diff --git a/src/main/java/org/example/petshopdesktop/api/ChatRealtimeClient.java b/src/main/java/org/example/petshopdesktop/api/ChatRealtimeClient.java
index da6d94c3..fcb93c0c 100644
--- a/src/main/java/org/example/petshopdesktop/api/ChatRealtimeClient.java
+++ b/src/main/java/org/example/petshopdesktop/api/ChatRealtimeClient.java
@@ -37,6 +37,7 @@ public class ChatRealtimeClient implements WebSocket.Listener {
     private Consumer<ConversationResponse> conversationListener;
     private Consumer<MessageResponse> messageListener;
     private Consumer<String> statusListener;
+    private volatile String currentStatus = "Chat disconnected";
 
     private ChatRealtimeClient() {
         this.httpClient = HttpClient.newBuilder()
@@ -58,6 +59,9 @@ public class ChatRealtimeClient implements WebSocket.Listener {
 
     public void setStatusListener(Consumer<String> statusListener) {
         this.statusListener = statusListener;
+        if (statusListener != null) {
+            statusListener.accept(currentStatus);
+        }
     }
 
     public void connect() {
@@ -286,6 +290,7 @@ public class ChatRealtimeClient implements WebSocket.Listener {
     }
 
     private void publishStatus(String status) {
+        currentStatus = status;
         if (statusListener != null) {
             statusListener.accept(status);
         }
diff --git a/src/main/java/org/example/petshopdesktop/controllers/ChatController.java b/src/main/java/org/example/petshopdesktop/controllers/ChatController.java
index 6911960d..bc343639 100644
--- a/src/main/java/org/example/petshopdesktop/controllers/ChatController.java
+++ b/src/main/java/org/example/petshopdesktop/controllers/ChatController.java
@@ -107,7 +107,7 @@ public class ChatController {
         realtimeClient.setConversationListener(conversation -> Platform.runLater(() -> upsertConversation(conversation)));
         realtimeClient.setMessageListener(message -> Platform.runLater(() -> appendMessageIfSelected(message)));
         realtimeClient.setStatusListener(status -> Platform.runLater(() -> lblChatStatus.setText(status)));
-        realtimeClient.connect();
+        realtimeClient.subscribeToConversations();
 
         loadCustomers();
         loadConversations();
diff --git a/src/main/resources/org/example/petshopdesktop/main-layout-view.fxml b/src/main/resources/org/example/petshopdesktop/main-layout-view.fxml
index e301357f..9daa91e1 100644
--- a/src/main/resources/org/example/petshopdesktop/main-layout-view.fxml
+++ b/src/main/resources/org/example/petshopdesktop/main-layout-view.fxml
@@ -12,7 +12,7 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="742.0" prefWidth="1069.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.MainLayoutController">
+<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="742.0" prefWidth="1069.0" stylesheets="@styles/desktop-ui.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.MainLayoutController">
    <left>
       <VBox prefWidth="200.0" style="-fx-background-color: #2C3E50;" BorderPane.alignment="CENTER">
          <children>
@@ -47,7 +47,7 @@
                   <Separator prefWidth="200.0" style="-fx-background-color: #444444; -fx-opacity: 0.35;" />
                </children>
             </VBox>
-            <ScrollPane fitToWidth="true" hbarPolicy="NEVER" style="-fx-background-color: #2C3E50; -fx-background: #2C3E50;" VBox.vgrow="ALWAYS">
+            <ScrollPane fitToWidth="true" hbarPolicy="NEVER" styleClass="sidebar-scroll-pane" style="-fx-background-color: #2C3E50; -fx-background: #2C3E50;" VBox.vgrow="ALWAYS">
                <content>
                   <VBox spacing="6.0" style="-fx-background-color: #2C3E50;">
                      <padding>
diff --git a/src/main/resources/org/example/petshopdesktop/modelviews/analytics-view.fxml b/src/main/resources/org/example/petshopdesktop/modelviews/analytics-view.fxml
index cdf1f90b..dec7a883 100644
--- a/src/main/resources/org/example/petshopdesktop/modelviews/analytics-view.fxml
+++ b/src/main/resources/org/example/petshopdesktop/modelviews/analytics-view.fxml
@@ -14,7 +14,7 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-<VBox spacing="15.0" style="-fx-background-color: #f8fafc;" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.AnalyticsController">
+<VBox spacing="15.0" style="-fx-background-color: #f8fafc;" stylesheets="@../styles/desktop-ui.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.AnalyticsController">
     <padding>
         <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
     </padding>
@@ -41,7 +41,7 @@
         </font>
     </Label>
 
-    <TabPane VBox.vgrow="ALWAYS">
+    <TabPane styleClass="analytics-tabs" VBox.vgrow="ALWAYS">
         <Tab text="Overview" closable="false">
             <VBox spacing="15.0">
                 <padding>
diff --git a/src/main/resources/org/example/petshopdesktop/modelviews/chat-view.fxml b/src/main/resources/org/example/petshopdesktop/modelviews/chat-view.fxml
index f701a9b5..e425ec67 100644
--- a/src/main/resources/org/example/petshopdesktop/modelviews/chat-view.fxml
+++ b/src/main/resources/org/example/petshopdesktop/modelviews/chat-view.fxml
@@ -14,7 +14,7 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-<BorderPane prefHeight="680.0" prefWidth="900.0" style="-fx-background-color: linear-gradient(to bottom right, #f8fafc, #e2e8f0);" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.ChatController">
+<BorderPane prefHeight="680.0" prefWidth="900.0" style="-fx-background-color: linear-gradient(to bottom right, #f8fafc, #e2e8f0);" stylesheets="@../styles/desktop-ui.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.ChatController">
     <left>
         <VBox prefWidth="290.0" spacing="12.0" style="-fx-background-color: #ffffff; -fx-border-color: #dbe4ee; -fx-border-width: 0 1 0 0;">
             <padding>
@@ -38,7 +38,7 @@
                 </HBox>
                 <Label fx:id="lblChatStatus" text="Connecting chat..." textFill="#64748b" />
                 <Separator />
-                <ListView fx:id="lvConversations" prefHeight="620.0" style="-fx-background-color: transparent; -fx-border-color: transparent;" VBox.vgrow="ALWAYS" />
+                <ListView fx:id="lvConversations" prefHeight="620.0" styleClass="chat-conversation-list" style="-fx-background-color: transparent; -fx-border-color: transparent;" VBox.vgrow="ALWAYS" />
             </children>
         </VBox>
     </left>
@@ -53,7 +53,7 @@
                         <Font name="System Bold" size="24.0" />
                     </font>
                 </Label>
-                <ScrollPane fx:id="spMessages" fitToWidth="true" hbarPolicy="NEVER" style="-fx-background-color: transparent; -fx-background: transparent;" VBox.vgrow="ALWAYS">
+                <ScrollPane fx:id="spMessages" fitToWidth="true" hbarPolicy="NEVER" styleClass="chat-messages-scroll-pane" style="-fx-background-color: transparent; -fx-background: transparent;" VBox.vgrow="ALWAYS">
                     <content>
                         <VBox fx:id="vbMessages" spacing="10.0" style="-fx-background-color: rgba(255,255,255,0.72); -fx-background-radius: 18; -fx-padding: 18;" />
                     </content>
diff --git a/src/main/resources/org/example/petshopdesktop/styles/desktop-ui.css b/src/main/resources/org/example/petshopdesktop/styles/desktop-ui.css
new file mode 100644
index 00000000..9b029a2a
--- /dev/null
+++ b/src/main/resources/org/example/petshopdesktop/styles/desktop-ui.css
@@ -0,0 +1,119 @@
+.sidebar-scroll-pane {
+    -fx-background-color: transparent;
+    -fx-background-insets: 0;
+    -fx-padding: 0 4 0 0;
+}
+
+.sidebar-scroll-pane > .viewport {
+    -fx-background-color: #2C3E50;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical,
+.chat-conversation-list .scroll-bar:vertical,
+.chat-messages-scroll-pane .scroll-bar:vertical {
+    -fx-background-color: transparent;
+    -fx-pref-width: 10;
+    -fx-padding: 0;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical .track,
+.chat-conversation-list .scroll-bar:vertical .track,
+.chat-messages-scroll-pane .scroll-bar:vertical .track {
+    -fx-background-color: rgba(148, 163, 184, 0.18);
+    -fx-background-radius: 999;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical .thumb,
+.chat-conversation-list .scroll-bar:vertical .thumb,
+.chat-messages-scroll-pane .scroll-bar:vertical .thumb {
+    -fx-background-color: rgba(203, 213, 225, 0.52);
+    -fx-background-radius: 999;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical .increment-button,
+.sidebar-scroll-pane .scroll-bar:vertical .decrement-button,
+.chat-conversation-list .scroll-bar:vertical .increment-button,
+.chat-conversation-list .scroll-bar:vertical .decrement-button,
+.chat-messages-scroll-pane .scroll-bar:vertical .increment-button,
+.chat-messages-scroll-pane .scroll-bar:vertical .decrement-button {
+    -fx-padding: 0;
+    -fx-background-color: transparent;
+}
+
+.sidebar-scroll-pane .scroll-bar:vertical .increment-arrow,
+.sidebar-scroll-pane .scroll-bar:vertical .decrement-arrow,
+.chat-conversation-list .scroll-bar:vertical .increment-arrow,
+.chat-conversation-list .scroll-bar:vertical .decrement-arrow,
+.chat-messages-scroll-pane .scroll-bar:vertical .increment-arrow,
+.chat-messages-scroll-pane .scroll-bar:vertical .decrement-arrow {
+    -fx-shape: '';
+    -fx-padding: 0;
+}
+
+.analytics-tabs {
+    -fx-tab-min-height: 34;
+    -fx-tab-max-height: 34;
+}
+
+.analytics-tabs > .tab-header-area {
+    -fx-padding: 0 0 8 0;
+}
+
+.analytics-tabs > .tab-header-area > .headers-region > .tab {
+    -fx-background-color: transparent;
+    -fx-background-radius: 12 12 0 0;
+    -fx-border-color: transparent transparent rgba(148, 163, 184, 0.35) transparent;
+    -fx-border-width: 0 0 2 0;
+    -fx-padding: 8 16 8 16;
+}
+
+.analytics-tabs > .tab-header-area > .headers-region > .tab:selected {
+    -fx-background-color: white;
+    -fx-border-color: transparent transparent #ff6b6b transparent;
+    -fx-effect: dropshadow(gaussian, rgba(15, 23, 42, 0.08), 10, 0.2, 0, 2);
+}
+
+.analytics-tabs > .tab-header-area > .headers-region > .tab .tab-label {
+    -fx-text-fill: #64748b;
+    -fx-font-weight: 700;
+}
+
+.analytics-tabs > .tab-header-area > .headers-region > .tab:selected .tab-label {
+    -fx-text-fill: #1f2937;
+}
+
+.analytics-tabs > .tab-header-area > .tab-header-background {
+    -fx-background-color: transparent;
+}
+
+.analytics-tabs > .tab-content-area {
+    -fx-background-color: transparent;
+    -fx-padding: 0;
+}
+
+.chat-conversation-list {
+    -fx-background-insets: 0;
+    -fx-background-color: transparent;
+}
+
+.chat-conversation-list .list-cell {
+    -fx-background-color: transparent;
+    -fx-background-radius: 14;
+    -fx-padding: 10 10 10 10;
+}
+
+.chat-conversation-list .list-cell:filled:selected,
+.chat-conversation-list .list-cell:filled:hover {
+    -fx-background-color: #eef2ff;
+}
+
+.chat-conversation-list .list-cell:filled:selected {
+    -fx-border-color: #c7d2fe;
+    -fx-border-radius: 14;
+    -fx-background-insets: 0;
+}
+
+.chat-messages-scroll-pane,
+.chat-messages-scroll-pane > .viewport {
+    -fx-background-color: transparent;
+}