diff --git a/package-lock.json b/package-lock.json
index 3ae4f70..e685aaf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,14 @@
       "name": "chat-client",
       "version": "0.0.0",
       "dependencies": {
+        "@primeuix/themes": "^2.0.3",
+        "@tailwindcss/vite": "^4.2.1",
         "@vueuse/core": "^14.2.1",
         "pinia": "^3.0.4",
+        "primeicons": "^7.0.0",
+        "primevue": "^4.5.4",
+        "tailwindcss": "^4.2.1",
+        "tailwindcss-primeui": "^0.6.1",
         "vue": "^3.5.28"
       },
       "devDependencies": {
@@ -528,7 +534,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -545,7 +550,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -562,7 +566,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -579,7 +582,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -596,7 +598,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -613,7 +614,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -630,7 +630,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -647,7 +646,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -664,7 +662,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -681,7 +678,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -698,7 +694,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -715,7 +710,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -732,7 +726,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -749,7 +742,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -766,7 +758,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -783,7 +774,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -800,7 +790,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -817,7 +806,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -834,7 +822,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -851,7 +838,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -868,7 +854,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -885,7 +870,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -902,7 +886,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -919,7 +902,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -936,7 +918,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -953,7 +934,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1198,7 +1178,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1209,7 +1188,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1220,7 +1198,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1236,7 +1213,6 @@
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1618,6 +1594,74 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-2.0.3.tgz",
+      "integrity": "sha512-2ykAB6BaHzR/6TwF8ShpJTsZrid6cVIEBVlookSdvOdmlWuevGu5vWOScgIwqWwlZcvkFYAGR/SUV3OHCTBMdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-2.0.3.tgz",
+      "integrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
+      "integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.5.4.tgz",
+      "integrity": "sha512-lYJJB3wTrDJ8MkLctzHfrPZAqXVxoatjIsswSJzupatf6ZogJHVYADUKcn1JAkLLk8dtV1FA2AxDek663fHO5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.5.4.tgz",
+      "integrity": "sha512-DxgryEc7ZmUqcEhYMcxGBRyFzdtLIoy3jLtlH1zsVSRZaG+iSAcjQ88nvfkZxGUZtZBFL7sRjF6KLq3bJZJwUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.2",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
@@ -1632,7 +1676,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1646,7 +1689,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1660,7 +1702,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1674,7 +1715,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1688,7 +1728,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1702,7 +1741,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1716,7 +1754,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1730,7 +1767,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1744,7 +1780,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1758,7 +1793,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1772,7 +1806,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1786,7 +1819,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1800,7 +1832,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1814,7 +1845,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1828,7 +1858,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1842,7 +1871,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1856,7 +1884,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1870,7 +1897,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1884,7 +1910,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1898,7 +1923,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1912,7 +1936,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1926,7 +1949,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1940,7 +1962,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1954,7 +1975,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1968,13 +1988,269 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.1.tgz",
+      "integrity": "sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.31.1",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.1.tgz",
+      "integrity": "sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.1",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.1",
+        "@tailwindcss/oxide-darwin-x64": "4.2.1",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.1",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.1",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.1",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.1",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.1",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.1",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.1",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.1",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.1.tgz",
+      "integrity": "sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.1.tgz",
+      "integrity": "sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.1.tgz",
+      "integrity": "sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.1.tgz",
+      "integrity": "sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.1.tgz",
+      "integrity": "sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.1.tgz",
+      "integrity": "sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.1.tgz",
+      "integrity": "sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.1.tgz",
+      "integrity": "sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.1.tgz",
+      "integrity": "sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.1.tgz",
+      "integrity": "sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.1.tgz",
+      "integrity": "sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.1.tgz",
+      "integrity": "sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.1.tgz",
+      "integrity": "sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.1",
+        "@tailwindcss/oxide": "4.2.1",
+        "tailwindcss": "4.2.1"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@tsconfig/node24": {
       "version": "24.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node24/-/node24-24.0.4.tgz",
@@ -1986,7 +2262,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
@@ -2000,7 +2275,7 @@
       "version": "24.10.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.13.tgz",
       "integrity": "sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.16.0"
@@ -3054,6 +3329,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.286",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
@@ -3061,6 +3345,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -3087,7 +3384,6 @@
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
       "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -3545,7 +3841,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -3592,6 +3887,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3752,7 +4053,6 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -3873,6 +4173,255 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
+      "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.31.1",
+        "lightningcss-darwin-arm64": "1.31.1",
+        "lightningcss-darwin-x64": "1.31.1",
+        "lightningcss-freebsd-x64": "1.31.1",
+        "lightningcss-linux-arm-gnueabihf": "1.31.1",
+        "lightningcss-linux-arm64-gnu": "1.31.1",
+        "lightningcss-linux-arm64-musl": "1.31.1",
+        "lightningcss-linux-x64-gnu": "1.31.1",
+        "lightningcss-linux-x64-musl": "1.31.1",
+        "lightningcss-win32-arm64-msvc": "1.31.1",
+        "lightningcss-win32-x64-msvc": "1.31.1"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
+      "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
+      "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
+      "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
+      "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
+      "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
+      "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
+      "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
+      "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
+      "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
+      "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
+      "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4423,6 +4972,28 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
+    "node_modules/primevue": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.5.4.tgz",
+      "integrity": "sha512-nTyEohZABFJhVIpeUxgP0EJ8vKcJAhD+Z7DYj95e7ie/MNUCjRNcGjqmE1cXtXi4z54qDfTSI9h2uJ51qz2DIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^2.0.2",
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4",
+        "@primevue/icons": "4.5.4"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4499,7 +5070,6 @@
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
       "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -4697,11 +5267,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
+      "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
+      "license": "MIT"
+    },
+    "node_modules/tailwindcss-primeui": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.6.1.tgz",
+      "integrity": "sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.1.0"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -4718,7 +5315,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -4736,7 +5332,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -4836,7 +5431,7 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unplugin-utils": {
@@ -4921,7 +5516,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.27.0",
@@ -5140,7 +5734,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -5158,7 +5751,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
diff --git a/package.json b/package.json
index d13d824..88423f3 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,14 @@
     "format": "prettier --write --experimental-cli src/"
   },
   "dependencies": {
+    "@primeuix/themes": "^2.0.3",
+    "@tailwindcss/vite": "^4.2.1",
     "@vueuse/core": "^14.2.1",
     "pinia": "^3.0.4",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.5.4",
+    "tailwindcss": "^4.2.1",
+    "tailwindcss-primeui": "^0.6.1",
     "vue": "^3.5.28"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 2b343fa..badec65 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import ChatView from '@/views/ChatView.vue'
 import { useAuthStore } from '@/stores/auth.ts'
 import SignInView from '@/views/SignInView.vue'
+import MainView from '@/views/MainView.vue'
 
 const authStore = useAuthStore()
 </script>
 
 <template>
-  <div class="chat-fullscreen">
-    <div class="h-100 w-50r margin-auto py-4">
-      <chat-view />
-      <!--      <chat-view v-if="authStore.isAuth" />-->
-      <!--      <sign-in-view v-else />-->
+  <div class="h-screen bg-gray-200">
+    <div class="h-full m-auto p-4">
+      <MainView v-if="authStore.isAuth" />
+      <SignInView v-else />
     </div>
   </div>
 </template>
diff --git a/src/assets/clean.css b/src/assets/clean.css
deleted file mode 100644
index 779a084..0000000
--- a/src/assets/clean.css
+++ /dev/null
@@ -1,415 +0,0 @@
-/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
-
-/* Reset box-model and set borders */
-/* ============================================ */
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-style: solid;
-  border-width: 0;
-  min-width: 0;
-}
-
-/* Document */
-/* ============================================ */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- * 3. Remove gray overlay on links for iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -webkit-tap-highlight-color: transparent; /* 3*/
-}
-
-/* Sections */
-/* ============================================ */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/* Vertical rhythm */
-/* ============================================ */
-
-p,
-table,
-blockquote,
-address,
-pre,
-iframe,
-form,
-figure,
-dl {
-  margin: 0;
-}
-
-/* Headings */
-/* ============================================ */
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-  margin: 0;
-}
-
-/* Lists (enumeration) */
-/* ============================================ */
-
-ul,
-ol {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-/* Lists (definition) */
-/* ============================================ */
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-left: 0;
-}
-
-/* Grouping content */
-/* ============================================ */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-  border-top-width: 1px;
-  margin: 0;
-  clear: both;
-  color: inherit;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: inherit; /* 2 */
-}
-
-address {
-  font-style: inherit;
-}
-
-/* Text-level semantics */
-/* ============================================ */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-  text-decoration: none;
-  color: inherit;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: inherit; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Replaced content */
-/* ============================================ */
-
-/**
- * Prevent vertical alignment issues.
- */
-
-svg,
-img,
-embed,
-object,
-iframe {
-  vertical-align: bottom;
-}
-
-/* Forms */
-/* ============================================ */
-
-/**
- * Reset form fields to make them styleable.
- * 1. Make form elements stylable across systems iOS especially.
- * 2. Inherit text-transform from parent.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  -webkit-appearance: none; /* 1 */
-  appearance: none;
-  vertical-align: middle;
-  color: inherit;
-  font: inherit;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  border-radius: 0;
-  text-align: inherit;
-  text-transform: inherit; /* 2 */
-}
-
-/**
- * Correct cursors for clickable elements.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  cursor: pointer;
-}
-
-button:disabled,
-[type="button"]:disabled,
-[type="reset"]:disabled,
-[type="submit"]:disabled {
-  cursor: default;
-}
-
-/**
- * Improve outlines for Firefox and unify style with input elements & buttons.
- */
-
-:-moz-focusring {
-  outline: auto;
-}
-
-select:disabled {
-  opacity: inherit;
-}
-
-/**
- * Remove padding
- */
-
-option {
-  padding: 0;
-}
-
-/**
- * Reset to invisible
- */
-
-fieldset {
-  margin: 0;
-  padding: 0;
-  min-width: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * Correct the outline style in Safari.
- */
-
-[type="search"] {
-  outline-offset: -2px; /* 1 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Fix font inheritance.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/**
- * Fix appearance for Firefox
- */
-[type="number"] {
-  -moz-appearance: textfield;
-}
-
-/**
- * Clickable labels
- */
-
-label[for] {
-  cursor: pointer;
-}
-
-/* Interactive */
-/* ============================================ */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/*
- * Remove outline for editable content.
- */
-
-[contenteditable]:focus {
-  outline: auto;
-}
-
-/* Tables */
-/* ============================================ */
-
-/**
-1. Correct table border color inheritance in all Chrome and Safari.
-*/
-
-table {
-  border-color: inherit; /* 1 */
-  border-collapse: collapse;
-}
-
-caption {
-  text-align: left;
-}
-
-td,
-th {
-  vertical-align: top;
-  padding: 0;
-}
-
-th {
-  text-align: left;
-  font-weight: bold;
-}
diff --git a/src/assets/custom.css b/src/assets/custom.css
new file mode 100644
index 0000000..8fe86a8
--- /dev/null
+++ b/src/assets/custom.css
@@ -0,0 +1,53 @@
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-variation-settings: normal;
+  font-weight: 400;
+}
+
+/* Light */
+:root {
+  --p-primary-color: var(--p-primary-500);
+  --p-primary-contrast-color: var(--p-surface-0);
+  --p-primary-hover-color: var(--p-primary-600);
+  --p-primary-active-color: var(--p-primary-700);
+  --p-content-border-color: var(--p-surface-200);
+  --p-content-hover-background: var(--p-surface-100);
+  --p-content-hover-color: var(--p-surface-800);
+  --p-highlight-background: var(--p-primary-50);
+  --p-highlight-color: var(--p-primary-700);
+  --p-highlight-focus-background: var(--p-primary-100);
+  --p-highlight-focus-color: var(--p-primary-800);
+  --p-text-color: var(--p-surface-700);
+  --p-text-hover-color: var(--p-surface-800);
+  --p-text-muted-color: var(--p-surface-500);
+  --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+/* Dark */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --p-primary-color: var(--p-primary-400);
+    --p-primary-contrast-color: var(--p-surface-900);
+    --p-primary-hover-color: var(--p-primary-300);
+    --p-primary-active-color: var(--p-primary-200);
+    --p-content-border-color: var(--p-surface-700);
+    --p-content-hover-background: var(--p-surface-800);
+    --p-content-hover-color: var(--p-surface-0);
+    --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+    --p-highlight-color: rgba(255, 255, 255, 0.87);
+    --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+    --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
+    --p-text-color: var(--p-surface-0);
+    --p-text-hover-color: var(--p-surface-0);
+    --p-text-muted-color: var(--p-surface-400);
+    --p-text-hover-muted-color: var(--p-surface-300);
+  }
+}
+
+.p-dark {
+  color-scheme: dark;
+}
diff --git a/src/assets/default.css b/src/assets/default.css
new file mode 100644
index 0000000..905bb64
--- /dev/null
+++ b/src/assets/default.css
@@ -0,0 +1,26 @@
+:root {
+  --p-primary-50: #ecfdf5;
+  --p-primary-100: #d1fae5;
+  --p-primary-200: #a7f3d0;
+  --p-primary-300: #6ee7b7;
+  --p-primary-400: #34d399;
+  --p-primary-500: #10b981;
+  --p-primary-600: #059669;
+  --p-primary-700: #047857;
+  --p-primary-800: #065f46;
+  --p-primary-900: #064e3b;
+  --p-primary-950: #022c22;
+  --p-surface-0: #ffffff;
+  --p-surface-50: #fafafa;
+  --p-surface-100: #f4f4f5;
+  --p-surface-200: #e4e4e7;
+  --p-surface-300: #d4d4d8;
+  --p-surface-400: #a1a1aa;
+  --p-surface-500: #71717a;
+  --p-surface-600: #52525b;
+  --p-surface-700: #3f3f46;
+  --p-surface-800: #27272a;
+  --p-surface-900: #18181b;
+  --p-surface-950: #09090b;
+  --p-content-border-radius: 6px;
+}
diff --git a/src/assets/main.css b/src/assets/main.css
index 3fcdecd..c72f728 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,137 +1,3 @@
-.chat-fullscreen {
-  height: 100vh;
-}
-
-input,
-button {
-  border: 1px solid black;
-}
-
-.h-100 {
-  height: 100%;
-}
-
-.h-20r {
-  height: 20rem;
-}
-
-.h-40r {
-  height: 40rem;
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.w-5r {
-  width: 5rem
-}
-
-.w-20r {
-  width: 20rem
-}
-
-.w-40r {
-  width: 40rem
-}
-
-.w-50r {
-  width: 50rem
-}
-
-.w-60r {
-  width: 60rem
-}
-
-.margin-auto {
-  margin: 0 auto;
-}
-
-.border {
-  border: 1px solid black;
-}
-.d-flex {
-  display: flex;
-}
-.flex-column {
-  flex-direction: column;
-}
-.flex-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.flex-column-reverse {
-  flex-direction: column-reverse;
-}
-
-.flex-grow-0 {
-  flex-grow: 0;
-}
-
-.flex-grow-1 {
-  flex-grow: 1;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.overflow-y-auto{
-  overflow-y: auto;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-
-.ga-2 {
-  gap: .5rem;
-}
-
-.ga-4 {
-  gap: 1rem;
-}
-
-.pa-1 {
-  padding: .25rem;
-}
-.pa-2 {
-  padding: .5rem;
-}
-
-.pa-4 {
-  padding: 1rem;
-}
-
-.py-4 {
-  padding: 1rem 0;
-}
-
-.px-4 {
-  padding: 0 1rem;
-}
-
-.px-8 {
-  padding: 0 2rem;
-}
-
-.red {
-  background: #e68181;
-}
-
-.blue {
-  background: #5d5ded;
-}
-
-.green {
-  background: #82e882;
-}
-
-.yellow {
-  background: #eaea83;
-}
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@import "primeicons/primeicons.css";
diff --git a/src/assets/main1.css b/src/assets/main1.css
new file mode 100644
index 0000000..3fcdecd
--- /dev/null
+++ b/src/assets/main1.css
@@ -0,0 +1,137 @@
+.chat-fullscreen {
+  height: 100vh;
+}
+
+input,
+button {
+  border: 1px solid black;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.h-20r {
+  height: 20rem;
+}
+
+.h-40r {
+  height: 40rem;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.w-5r {
+  width: 5rem
+}
+
+.w-20r {
+  width: 20rem
+}
+
+.w-40r {
+  width: 40rem
+}
+
+.w-50r {
+  width: 50rem
+}
+
+.w-60r {
+  width: 60rem
+}
+
+.margin-auto {
+  margin: 0 auto;
+}
+
+.border {
+  border: 1px solid black;
+}
+.d-flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.overflow-y-auto{
+  overflow-y: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+
+.ga-2 {
+  gap: .5rem;
+}
+
+.ga-4 {
+  gap: 1rem;
+}
+
+.pa-1 {
+  padding: .25rem;
+}
+.pa-2 {
+  padding: .5rem;
+}
+
+.pa-4 {
+  padding: 1rem;
+}
+
+.py-4 {
+  padding: 1rem 0;
+}
+
+.px-4 {
+  padding: 0 1rem;
+}
+
+.px-8 {
+  padding: 0 2rem;
+}
+
+.red {
+  background: #e68181;
+}
+
+.blue {
+  background: #5d5ded;
+}
+
+.green {
+  background: #82e882;
+}
+
+.yellow {
+  background: #eaea83;
+}
diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue
index 87b9fcc..edb9cfe 100644
--- a/src/components/AppMenu.vue
+++ b/src/components/AppMenu.vue
@@ -1,17 +1,22 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { JustList, JustListItem, JustNav } from '@/components/simple'
+import { ref } from 'vue'
+
+const model = defineModel<string>()
+
+function onSelect(value: string) {
+  model.value = value
+}
+</script>
 
 <template>
-  <div class="red w-5r d-flex flex-column align-center pa-1">
-    <div>
-      <span class="mdi mdi-account"></span>
-    </div>
-    <div>
-      <span class="mdi mdi-message"></span>
-    </div>
-    <div>
-      <span class="mdi mdi-cog"></span>
-    </div>
-  </div>
+  <JustNav>
+    <JustList>
+      <JustListItem value="users" icon="mdi-account" @click="onSelect" />
+      <JustListItem value="messages" icon="mdi-message" @click="onSelect" />
+      <JustListItem value="settings" icon="mdi-cog" @click="onSelect" />
+    </JustList>
+  </JustNav>
 </template>
 
 <style scoped></style>
diff --git a/src/components/ChatList.vue b/src/components/ChatList.vue
deleted file mode 100644
index c3e71c9..0000000
--- a/src/components/ChatList.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { type Chat, useChatsStore } from '@/stores/chats.ts'
-import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
-import { useAuthStore } from '@/stores/auth.ts'
-
-const authStore = useAuthStore()
-const chatsStore = useChatsStore()
-const socketsStore = useSocketsStore()
-
-function onSelect(id: string) {
-  const chatId = id
-  chatsStore.selected = chatId
-
-  socketsStore.send({
-    type: SocketDataReq.GET_MESSAGES,
-    data: { chat_id: chatId },
-  })
-}
-
-function getChatName(chat: Chat) {
-  if (chat.type_id === 2) {
-    return chat.name
-  } else if (chat.type_id === 1) {
-    const otherUsers = chat.users.filter((user) => user.id !== authStore.me?.id)
-    return otherUsers[0]?.name ?? otherUsers[0]?.email ?? 'unknown'
-  }
-
-  return 'unknown ID'
-}
-</script>
-
-<template>
-  <div class="d-flex flex-column ga-2 h-100 overflow-hidden">
-    <div>chats</div>
-
-    <!--    <div class="overflow-y-auto">-->
-    <!--      <div v-for="i in 30" :key="i" class="pa-4 border">bla</div>-->
-    <!--    </div>-->
-    <div v-for="chat in chatsStore.chats" :key="chat.id" @click="onSelect(chat.id)" class="border">
-      <div>{{ getChatName(chat) }}</div>
-      <div>avatar</div>
-      <div>
-        <div>0</div>
-        <div>00:00</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/components/ChatListElement.vue b/src/components/ChatListElement.vue
new file mode 100644
index 0000000..34d033c
--- /dev/null
+++ b/src/components/ChatListElement.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Chat } from '@/stores/chats.ts'
+import { useAuthStore } from '@/stores/auth.ts'
+import { computed } from 'vue'
+
+interface Props {
+  chat: Chat
+}
+
+const { chat } = defineProps<Props>()
+const authStore = useAuthStore()
+
+const getChatName = computed(() => {
+  if (chat.type_id === 2) {
+    return chat.name
+  } else if (chat.type_id === 1) {
+    const otherUsers = chat.users.filter((user) => user.id !== authStore.me?.id)
+    return otherUsers[0]?.name ?? otherUsers[0]?.email ?? 'unknown'
+  }
+
+  return 'unknown ID'
+})
+</script>
+
+<template>
+  <div class="border p-2">
+    <!--    {{ chat }}-->
+    <div>id:{{ chat.id }}</div>
+    <div>name:{{ chat.name }}</div>
+    <div>type:{{ chat.type_id }}</div>
+    <div>chatName:{{ getChatName }}</div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/ChatToolbar.vue b/src/components/Chats/ChatToolbar.vue
similarity index 81%
rename from src/components/ChatToolbar.vue
rename to src/components/Chats/ChatToolbar.vue
index 79e5b9e..4cd8078 100644
--- a/src/components/ChatToolbar.vue
+++ b/src/components/Chats/ChatToolbar.vue
@@ -5,7 +5,7 @@ const search = ref('')
 </script>
 
 <template>
-  <div class="d-flex align-center ga-4">
+  <div class="flex gap-2 p-4 border bg-amber-200">
     <button>menu</button>
     <input v-model="search" placeholder="Search..." />
   </div>
diff --git a/src/components/Chats/ChatsList.vue b/src/components/Chats/ChatsList.vue
new file mode 100644
index 0000000..ce43c69
--- /dev/null
+++ b/src/components/Chats/ChatsList.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useChatsStore } from '@/stores/chats.ts'
+import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
+import ChatListElement from '@/components/ChatListElement.vue'
+
+const chatsStore = useChatsStore()
+const socketsStore = useSocketsStore()
+
+function onSelect(id: string) {
+  const chatId = id
+  chatsStore.selected = chatId
+
+  socketsStore.send({
+    type: SocketDataReq.GET_MESSAGES,
+    data: { chat_id: chatId },
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 h-full overflow-hidden px-2">
+    <div>chats</div>
+
+    <!--    <div class="overflow-y-auto">-->
+    <!--      <div v-for="i in 30" :key="i" class="pa-4 border">bla</div>-->
+    <!--    </div>-->
+    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+      <chat-list-element
+        v-for="chat in chatsStore.chats"
+        :key="chat.id"
+        v-bind="{ chat }"
+        @click="onSelect(chat.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/ChatsPane.vue b/src/components/LeftPane.vue
similarity index 84%
rename from src/components/ChatsPane.vue
rename to src/components/LeftPane.vue
index 4e398a2..ef84149 100644
--- a/src/components/ChatsPane.vue
+++ b/src/components/LeftPane.vue
@@ -4,12 +4,18 @@ import ChatList from '@/components/ChatList.vue'
 import { useAuthStore } from '@/stores/auth.ts'
 import { type Chat, useChatsStore } from '@/stores/chats.ts'
 import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
-import AppMenu from '@/components/AppMenu.vue'
+import UserList from '@/components/Users/UserList.vue'
 
 const authStore = useAuthStore()
 const chatsStore = useChatsStore()
 const socketsStore = useSocketsStore()
 
+interface Props {
+  selected: string
+}
+
+const props = defineProps()
+
 function onSelect(value: { id: unknown }) {
   const chatId = value.id as string
   chatsStore.selected = chatId
@@ -33,10 +39,8 @@ function getChatName(chat: Chat) {
 </script>
 
 <template>
-  <div class="w-100 d-flex h-100 flex-column ga-2 yellow">
-    <chat-toolbar />
-
-    <chat-list />
+  <div class="w-full flex flex-col h-full gap-2">
+    <slot />
   </div>
 </template>
 
diff --git a/src/components/MessageData.vue b/src/components/MessageData.vue
index 5bdab06..e02bdb3 100644
--- a/src/components/MessageData.vue
+++ b/src/components/MessageData.vue
@@ -35,15 +35,15 @@ const avatarLetter = computed(() => {
   <!--    </div>-->
   <!--  </div>-->
 
-  <div class="d-flex ga-2 border" :class="{ 'flex-row-reverse': props.my }">
+  <div class="flex gap-2 border" :class="{ 'flex-row-reverse': props.my }">
     <!--    <v-avatar size="36" color="deep-purple-lighten-4">-->
     <!--      <span class="text-deep-purple-darken-2">{{ avatarLetter }}</span>-->
     <!--    </v-avatar>-->
 
     <!--    :class="props.my ? 'message-shaped-right' : 'message-shaped'"-->
-    <div class="pa-4" :class="props.my ? 'red' : 'blue'">
-      <span class="text-body-1">{{ props.text }}</span>
-      <span class="text-caption ml-2">{{ createdAt }}</span>
+    <div class="pa-4" :class="props.my ? 'bg-blue-400' : 'bg-white'">
+      <span class="">{{ props.text }}</span>
+      <span class="">{{ createdAt }}</span>
     </div>
   </div>
 </template>
diff --git a/src/components/MessagesPane.vue b/src/components/RightPane.vue
similarity index 58%
rename from src/components/MessagesPane.vue
rename to src/components/RightPane.vue
index a5f10cb..f95d0be 100644
--- a/src/components/MessagesPane.vue
+++ b/src/components/RightPane.vue
@@ -30,27 +30,24 @@ watch(messages, async () => {
 </script>
 
 <template>
-  <div class="w-100 green h-100">
+  <div class="w-full h-full bg-blue-200 border">
     <!--    <button class="position-absolute scroll-down" @click="scrollToBottom">UP</button>-->
-    <div class="d-flex flex-column h-100">
-      <div class="d-flex h-100 flex-column overflow-hidden">
-        <message-toolbar class="flex-grow-0" />
+    <div class="flex flex-col h-full">
+      <div class="flex h-full flex-col overflow-hidden">
+        <message-toolbar class="grow-0" />
 
-        <div
-          class="px-8 ga-2 flex-grow-1 d-flex flex-column flex-column-reverse overflow-y-auto"
-          ref="messageArea"
-        >
-          <!--          <message-data-->
-          <!--            v-for="message in messages"-->
-          <!--            :key="message.id"-->
-          <!--            :text="message.text"-->
-          <!--            :my="authStore.me?.id === message.user_id"-->
-          <!--            :created-at="message.created_at"-->
-          <!--          ></message-data>-->
-          <div class="pa-4 border" v-for="v in 101" :key="v">text {{ v }}</div>
+        <div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
+          <message-data
+            v-for="message in messages"
+            :key="message.id"
+            :text="message.text"
+            :my="authStore.me?.id === message.user_id"
+            :created-at="message.created_at"
+          ></message-data>
+          <!--          <div class="p-4 border" v-for="v in 101" :key="v">text {{ v }}</div>-->
         </div>
 
-        <message-form class="flex-grow-0 blue" />
+        <message-form class="grow-0 bg-green-200" />
       </div>
     </div>
   </div>
diff --git a/src/components/Settings/SettingsList.vue b/src/components/Settings/SettingsList.vue
new file mode 100644
index 0000000..93eb846
--- /dev/null
+++ b/src/components/Settings/SettingsList.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>2</template>
+
+<style scoped></style>
diff --git a/src/components/Users/UsersList.vue b/src/components/Users/UsersList.vue
new file mode 100644
index 0000000..e795900
--- /dev/null
+++ b/src/components/Users/UsersList.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
+import { onMounted } from 'vue'
+import { useUsersStore } from '@/stores/users.ts'
+import UsersListElement from '@/components/Users/UsersListElement.vue'
+import { useAuthStore } from '@/stores/auth.ts'
+
+const socketsStore = useSocketsStore()
+const usersStore = useUsersStore()
+const authStore = useAuthStore()
+
+function onInit() {
+  socketsStore.send({
+    type: SocketDataReq.GET_USERS,
+    data: {},
+  })
+}
+
+onMounted(() => {
+  onInit()
+})
+
+function onStartChat(userId: number) {
+  console.log('user', userId)
+  console.log('me', authStore.me?.id)
+
+  socketsStore.send({
+    type: SocketDataReq.CREATE_CHAT,
+    data: {
+      userId: userId,
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 h-full overflow-hidden px-2">
+    <div>contacts</div>
+
+    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+      <UsersListElement
+        v-for="user in usersStore.users"
+        :key="user.id"
+        v-bind:user="user"
+        @click="onStartChat"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/Users/UsersListElement.vue b/src/components/Users/UsersListElement.vue
new file mode 100644
index 0000000..5de9422
--- /dev/null
+++ b/src/components/Users/UsersListElement.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { User } from '@/stores/users.ts'
+import { JustButton } from '@/components/simple'
+
+interface Props {
+  user: User
+}
+
+const { user } = defineProps<Props>()
+const emit = defineEmits<{
+  click: [id: number]
+}>()
+</script>
+
+<template>
+  <div class="border p-2">
+    <!--    <div>log: {{ user }}</div>-->
+    <div>id:{{ user.id }}</div>
+    <div>name:{{ user.name }}</div>
+    <div>email:{{ user.email }}</div>
+    <JustButton @click="emit('click', user.id)">start chat</JustButton>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/simple/JustButton.vue b/src/components/simple/JustButton.vue
new file mode 100644
index 0000000..f47d727
--- /dev/null
+++ b/src/components/simple/JustButton.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <button class="border border-gray-700 rounded-md text-gray-700 px-1.5 py-1.5 flex justify-center">
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped></style>
diff --git a/src/components/simple/JustInput.vue b/src/components/simple/JustInput.vue
new file mode 100644
index 0000000..29106a6
--- /dev/null
+++ b/src/components/simple/JustInput.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const model = defineModel()
+</script>
+
+<template>
+  <input
+    v-model="model"
+    class="border px-2 py-1.5 rounded-md bg-white outline-none focus:outline-none"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/components/simple/JustList.vue b/src/components/simple/JustList.vue
new file mode 100644
index 0000000..8a4af94
--- /dev/null
+++ b/src/components/simple/JustList.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref, useSlots } from 'vue'
+
+const model = defineModel('selected')
+function checkSlots() {
+  const slots = useSlots()
+  console.log('slots')
+  if (slots.default) {
+    // console.log('default slot', slots.default())
+
+    const a = slots.default().map((el) => el)
+    console.log('a', a)
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <slot />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/simple/JustListItem.vue b/src/components/simple/JustListItem.vue
new file mode 100644
index 0000000..a975c54
--- /dev/null
+++ b/src/components/simple/JustListItem.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import JustButton from '@/components/simple/JustButton.vue'
+
+interface Props {
+  icon: string
+  value: string
+}
+
+const { icon, value } = defineProps<Props>()
+const emit = defineEmits<{
+  click: [value: string]
+}>()
+</script>
+
+<template>
+  <JustButton @click="emit('click', value)">
+    <span class="mdi text-2xl" :class="icon"></span>
+  </JustButton>
+</template>
+
+<style scoped></style>
diff --git a/src/components/simple/JustNav.vue b/src/components/simple/JustNav.vue
new file mode 100644
index 0000000..f527ce7
--- /dev/null
+++ b/src/components/simple/JustNav.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="w-16 flex flex-col gap-2 items-stretch p-1 border">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/simple/JustTest.vue b/src/components/simple/JustTest.vue
new file mode 100644
index 0000000..61375e1
--- /dev/null
+++ b/src/components/simple/JustTest.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  text: string
+  value: string
+}
+
+const { text, value } = defineProps<Props>()
+
+const emit = defineEmits<{
+  click: [value: string]
+}>()
+
+function onClick() {
+  emit('click', value)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 border" @click="onClick">{{ text }} - {{ value }}</div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/simple/index.ts b/src/components/simple/index.ts
new file mode 100644
index 0000000..838f889
--- /dev/null
+++ b/src/components/simple/index.ts
@@ -0,0 +1,8 @@
+import JustInput from '@/components/simple/JustInput.vue'
+import JustButton from '@/components/simple/JustButton.vue'
+import JustList from '@/components/simple/JustList.vue'
+import JustListItem from '@/components/simple/JustListItem.vue'
+import JustNav from '@/components/simple/JustNav.vue'
+import JustTest from '@/components/simple/JustTest.vue'
+
+export { JustInput, JustButton, JustList, JustListItem, JustNav, JustTest }
diff --git a/src/composables/useLayout.ts b/src/composables/useLayout.ts
new file mode 100644
index 0000000..2d1f60f
--- /dev/null
+++ b/src/composables/useLayout.ts
@@ -0,0 +1,459 @@
+import { updatePrimaryPalette, updateSurfacePalette } from '@primeuix/themes'
+import { computed, ref } from 'vue'
+
+const appState = ref({
+  primary: 'black',
+  surface: '',
+  darkMode: false,
+})
+
+const primaryColors = ref([
+  {
+    name: 'emerald',
+    palette: {
+      50: '#ecfdf5',
+      100: '#d1fae5',
+      200: '#a7f3d0',
+      300: '#6ee7b7',
+      400: '#34d399',
+      500: '#10b981',
+      600: '#059669',
+      700: '#047857',
+      800: '#065f46',
+      900: '#064e3b',
+      950: '#022c22',
+    },
+  },
+  {
+    name: 'green',
+    palette: {
+      50: '#f0fdf4',
+      100: '#dcfce7',
+      200: '#bbf7d0',
+      300: '#86efac',
+      400: '#4ade80',
+      500: '#22c55e',
+      600: '#16a34a',
+      700: '#15803d',
+      800: '#166534',
+      900: '#14532d',
+      950: '#052e16',
+    },
+  },
+  {
+    name: 'lime',
+    palette: {
+      50: '#f7fee7',
+      100: '#ecfccb',
+      200: '#d9f99d',
+      300: '#bef264',
+      400: '#a3e635',
+      500: '#84cc16',
+      600: '#65a30d',
+      700: '#4d7c0f',
+      800: '#3f6212',
+      900: '#365314',
+      950: '#1a2e05',
+    },
+  },
+  {
+    name: 'orange',
+    palette: {
+      50: '#fff7ed',
+      100: '#ffedd5',
+      200: '#fed7aa',
+      300: '#fdba74',
+      400: '#fb923c',
+      500: '#f97316',
+      600: '#ea580c',
+      700: '#c2410c',
+      800: '#9a3412',
+      900: '#7c2d12',
+      950: '#431407',
+    },
+  },
+  {
+    name: 'amber',
+    palette: {
+      50: '#fffbeb',
+      100: '#fef3c7',
+      200: '#fde68a',
+      300: '#fcd34d',
+      400: '#fbbf24',
+      500: '#f59e0b',
+      600: '#d97706',
+      700: '#b45309',
+      800: '#92400e',
+      900: '#78350f',
+      950: '#451a03',
+    },
+  },
+  {
+    name: 'yellow',
+    palette: {
+      50: '#fefce8',
+      100: '#fef9c3',
+      200: '#fef08a',
+      300: '#fde047',
+      400: '#facc15',
+      500: '#eab308',
+      600: '#ca8a04',
+      700: '#a16207',
+      800: '#854d0e',
+      900: '#713f12',
+      950: '#422006',
+    },
+  },
+  {
+    name: 'teal',
+    palette: {
+      50: '#f0fdfa',
+      100: '#ccfbf1',
+      200: '#99f6e4',
+      300: '#5eead4',
+      400: '#2dd4bf',
+      500: '#14b8a6',
+      600: '#0d9488',
+      700: '#0f766e',
+      800: '#115e59',
+      900: '#134e4a',
+      950: '#042f2e',
+    },
+  },
+  {
+    name: 'cyan',
+    palette: {
+      50: '#ecfeff',
+      100: '#cffafe',
+      200: '#a5f3fc',
+      300: '#67e8f9',
+      400: '#22d3ee',
+      500: '#06b6d4',
+      600: '#0891b2',
+      700: '#0e7490',
+      800: '#155e75',
+      900: '#164e63',
+      950: '#083344',
+    },
+  },
+  {
+    name: 'sky',
+    palette: {
+      50: '#f0f9ff',
+      100: '#e0f2fe',
+      200: '#bae6fd',
+      300: '#7dd3fc',
+      400: '#38bdf8',
+      500: '#0ea5e9',
+      600: '#0284c7',
+      700: '#0369a1',
+      800: '#075985',
+      900: '#0c4a6e',
+      950: '#082f49',
+    },
+  },
+  {
+    name: 'blue',
+    palette: {
+      50: '#eff6ff',
+      100: '#dbeafe',
+      200: '#bfdbfe',
+      300: '#93c5fd',
+      400: '#60a5fa',
+      500: '#3b82f6',
+      600: '#2563eb',
+      700: '#1d4ed8',
+      800: '#1e40af',
+      900: '#1e3a8a',
+      950: '#172554',
+    },
+  },
+  {
+    name: 'indigo',
+    palette: {
+      50: '#eef2ff',
+      100: '#e0e7ff',
+      200: '#c7d2fe',
+      300: '#a5b4fc',
+      400: '#818cf8',
+      500: '#6366f1',
+      600: '#4f46e5',
+      700: '#4338ca',
+      800: '#3730a3',
+      900: '#312e81',
+      950: '#1e1b4b',
+    },
+  },
+  {
+    name: 'violet',
+    palette: {
+      50: '#f5f3ff',
+      100: '#ede9fe',
+      200: '#ddd6fe',
+      300: '#c4b5fd',
+      400: '#a78bfa',
+      500: '#8b5cf6',
+      600: '#7c3aed',
+      700: '#6d28d9',
+      800: '#5b21b6',
+      900: '#4c1d95',
+      950: '#2e1065',
+    },
+  },
+  {
+    name: 'purple',
+    palette: {
+      50: '#faf5ff',
+      100: '#f3e8ff',
+      200: '#e9d5ff',
+      300: '#d8b4fe',
+      400: '#c084fc',
+      500: '#a855f7',
+      600: '#9333ea',
+      700: '#7e22ce',
+      800: '#6b21a8',
+      900: '#581c87',
+      950: '#3b0764',
+    },
+  },
+  {
+    name: 'fuchsia',
+    palette: {
+      50: '#fdf4ff',
+      100: '#fae8ff',
+      200: '#f5d0fe',
+      300: '#f0abfc',
+      400: '#e879f9',
+      500: '#d946ef',
+      600: '#c026d3',
+      700: '#a21caf',
+      800: '#86198f',
+      900: '#701a75',
+      950: '#4a044e',
+    },
+  },
+  {
+    name: 'pink',
+    palette: {
+      50: '#fdf2f8',
+      100: '#fce7f3',
+      200: '#fbcfe8',
+      300: '#f9a8d4',
+      400: '#f472b6',
+      500: '#ec4899',
+      600: '#db2777',
+      700: '#be185d',
+      800: '#9d174d',
+      900: '#831843',
+      950: '#500724',
+    },
+  },
+  {
+    name: 'rose',
+    palette: {
+      50: '#fff1f2',
+      100: '#ffe4e6',
+      200: '#fecdd3',
+      300: '#fda4af',
+      400: '#fb7185',
+      500: '#f43f5e',
+      600: '#e11d48',
+      700: '#be123c',
+      800: '#9f1239',
+      900: '#881337',
+      950: '#4c0519',
+    },
+  },
+])
+
+const surfaces = ref([
+  {
+    name: 'slate',
+    palette: {
+      0: '#ffffff',
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a',
+      950: '#020617',
+    },
+  },
+  {
+    name: 'gray',
+    palette: {
+      0: '#ffffff',
+      50: '#f9fafb',
+      100: '#f3f4f6',
+      200: '#e5e7eb',
+      300: '#d1d5db',
+      400: '#9ca3af',
+      500: '#6b7280',
+      600: '#4b5563',
+      700: '#374151',
+      800: '#1f2937',
+      900: '#111827',
+      950: '#030712',
+    },
+  },
+  {
+    name: 'zinc',
+    palette: {
+      0: '#ffffff',
+      50: '#fafafa',
+      100: '#f4f4f5',
+      200: '#e4e4e7',
+      300: '#d4d4d8',
+      400: '#a1a1aa',
+      500: '#71717a',
+      600: '#52525b',
+      700: '#3f3f46',
+      800: '#27272a',
+      900: '#18181b',
+      950: '#09090b',
+    },
+  },
+  {
+    name: 'neutral',
+    palette: {
+      0: '#ffffff',
+      50: '#fafafa',
+      100: '#f5f5f5',
+      200: '#e5e5e5',
+      300: '#d4d4d4',
+      400: '#a3a3a3',
+      500: '#737373',
+      600: '#525252',
+      700: '#404040',
+      800: '#262626',
+      900: '#171717',
+      950: '#0a0a0a',
+    },
+  },
+  {
+    name: 'stone',
+    palette: {
+      0: '#ffffff',
+      50: '#fafaf9',
+      100: '#f5f5f4',
+      200: '#e7e5e4',
+      300: '#d6d3d1',
+      400: '#a8a29e',
+      500: '#78716c',
+      600: '#57534e',
+      700: '#44403c',
+      800: '#292524',
+      900: '#1c1917',
+      950: '#0c0a09',
+    },
+  },
+  {
+    name: 'soho',
+    palette: {
+      0: '#ffffff',
+      50: '#f4f4f4',
+      100: '#e8e9e9',
+      200: '#d2d2d4',
+      300: '#bbbcbe',
+      400: '#a5a5a9',
+      500: '#8e8f93',
+      600: '#77787d',
+      700: '#616268',
+      800: '#4a4b52',
+      900: '#34343d',
+      950: '#1d1e27',
+    },
+  },
+  {
+    name: 'viva',
+    palette: {
+      0: '#ffffff',
+      50: '#f3f3f3',
+      100: '#e7e7e8',
+      200: '#cfd0d0',
+      300: '#b7b8b9',
+      400: '#9fa1a1',
+      500: '#87898a',
+      600: '#6e7173',
+      700: '#565a5b',
+      800: '#3e4244',
+      900: '#262b2c',
+      950: '#0e1315',
+    },
+  },
+  {
+    name: 'ocean',
+    palette: {
+      0: '#ffffff',
+      50: '#fbfcfc',
+      100: '#F7F9F8',
+      200: '#EFF3F2',
+      300: '#DADEDD',
+      400: '#B1B7B6',
+      500: '#828787',
+      600: '#5F7274',
+      700: '#415B61',
+      800: '#29444E',
+      900: '#183240',
+      950: '#0c1920',
+    },
+  },
+])
+
+export function useLayout() {
+  function setPrimary(value: string) {
+    appState.value.primary = value
+  }
+
+  function setSurface(value: string) {
+    appState.value.surface = value
+  }
+
+  function setDarkMode(value: boolean) {
+    appState.value.darkMode = value
+    if (value) {
+      document.documentElement.classList.add('p-dark')
+    } else {
+      document.documentElement.classList.remove('p-dark')
+    }
+  }
+
+  function toggleDarkMode() {
+    appState.value.darkMode = !appState.value.darkMode
+    document.documentElement.classList.toggle('p-dark')
+  }
+
+  function updateColors(type: string, colorName: string) {
+    if (type === 'primary') {
+      setPrimary(colorName)
+      const color = primaryColors.value.find((c) => c.name === colorName)
+      updatePrimaryPalette(color?.palette)
+    } else if (type === 'surface') {
+      setSurface(colorName)
+      const surfaceColor = surfaces.value.find((s) => s.name === colorName)
+      updateSurfacePalette(surfaceColor?.palette)
+    }
+  }
+
+  const isDarkMode = computed(() => appState.value.darkMode)
+  const primary = computed(() => appState.value.primary)
+  const surface = computed(() => appState.value.surface)
+
+  return {
+    primaryColors,
+    surfaces,
+    isDarkMode,
+    primary,
+    surface,
+    toggleDarkMode,
+    setDarkMode,
+    setPrimary,
+    setSurface,
+    updateColors,
+  }
+}
diff --git a/src/main.ts b/src/main.ts
index e1cf1ee..5f39bb7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,28 @@
 import '@mdi/font/css/materialdesignicons.css'
-import './assets/clean.css'
 import './assets/main.css'
+import './assets/default.css'
+import './assets/custom.css'
+
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
+
 import App from './App.vue'
+import { version } from 'vue'
 
 const app = createApp(App)
 
+console.log('version', version)
+
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+    options: {
+      darkModeSelector: '.p-dark',
+    },
+  },
+})
 app.use(createPinia())
 
 app.mount('#app')
diff --git a/src/stores/sockets.ts b/src/stores/sockets.ts
index a689af2..b992220 100644
--- a/src/stores/sockets.ts
+++ b/src/stores/sockets.ts
@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import { type Chat, useChatsStore } from '@/stores/chats.ts'
 import { useAuthStore } from '@/stores/auth.ts'
 import { type Message, useMessagesStore } from '@/stores/messages.ts'
+import { useUsersStore } from '@/stores/users.ts'
 
 export enum SocketDataReq {
   GET_CHATS = 'GET_CHATS',
@@ -35,6 +36,7 @@ export const useSocketsStore = defineStore('sockets', () => {
   const authStore = useAuthStore()
   const chatsStore = useChatsStore()
   const messagesStore = useMessagesStore()
+  const usersStore = useUsersStore()
 
   const isConnected = ref(false)
   const error = ref<string>()
@@ -57,26 +59,29 @@ export const useSocketsStore = defineStore('sockets', () => {
 
       switch (type) {
         case SocketDataRes.USERS:
-          console.log('USERS_LIST', data)
+          usersStore.users = data
           break
         case SocketDataRes.USER:
-          console.log('USER', data)
           authStore.me = data
           break
         case SocketDataRes.CHATS:
-          console.log('CHATS', data)
-          chatsStore.chats = data
+          if (Array.isArray(data)) {
+            chatsStore.chats = data
+          } else {
+            console.log(data)
+            const idx = chatsStore.chats.findIndex((chat) => chat.id === data.id)
+            console.log(idx)
+            if (idx < 0) chatsStore.chats.push(data)
+          }
+
           break
         case SocketDataRes.MESSAGES:
-          console.log('MESSAGES', data)
-
           messagesStore.messages = data
           // if (options.onMessage) {
           //   options.onMessage(data)
           // }
           break
         case SocketDataRes.MESSAGE:
-          console.log('MESSAGE', data)
           messagesStore.messages.unshift(data)
           break
         case SocketDataRes.STATUS:
diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue
deleted file mode 100644
index 6c2821a..0000000
--- a/src/views/ChatView.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import ChatsPane from '@/components/ChatsPane.vue'
-import MessagesPane from '@/components/MessagesPane.vue'
-import { useSocketsStore } from '@/stores/sockets.ts'
-import { useChatsStore } from '@/stores/chats.ts'
-import AppMenu from '@/components/AppMenu.vue'
-
-const socketsStore = useSocketsStore()
-// const { messages, chats, isConnected, error, send } = useSharedWebSocket({ autoConnect: true })
-
-// const socketsStore = useSocketsStore()
-
-const chatsStore = useChatsStore()
-
-const message = ref('')
-const selectedChat = ref('')
-
-// const onChatClick = (id: string) => {
-//   console.log(id)
-//   selectedChat.value = id
-//   send({
-//     type: WsDataType.GET_MESSAGES,
-//     data: { chat_id: id },
-//   })
-// }
-
-// const sendMessage = () => {
-//   if (message.value.trim()) {
-//     send({
-//       type: WsDataType.CREATE_MESSAGE,
-//       data: {
-//         chat_id: selectedChat.value,
-//         text: message.value,
-//       },
-//     })
-//     message.value = ''
-//   }
-// }
-onMounted(() => {
-  socketsStore.init()
-})
-</script>
-
-<template>
-  <div class="d-flex h-100">
-    <div class="d-flex w-100">
-      <app-menu />
-      <chats-pane />
-    </div>
-    <messages-pane />
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
new file mode 100644
index 0000000..59b1bce
--- /dev/null
+++ b/src/views/MainView.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useSocketsStore } from '@/stores/sockets.ts'
+import AppMenu from '@/components/AppMenu.vue'
+import LeftPane from '@/components/LeftPane.vue'
+import RightPane from '@/components/RightPane.vue'
+import UsersList from '@/components/Users/UsersList.vue'
+import SettingsList from '@/components/Settings/SettingsList.vue'
+import ChatsList from '@/components/Chats/ChatsList.vue'
+
+const socketsStore = useSocketsStore()
+
+type MenuSelected = 'chats' | 'users' | 'settings'
+
+const selected = ref<MenuSelected>()
+
+const component = computed(() => {
+  switch (selected.value) {
+    case 'chats':
+      return ChatsList
+    case 'users':
+      return UsersList
+    case 'settings':
+      return SettingsList
+    default:
+      return ChatsList
+  }
+})
+
+onMounted(() => {
+  socketsStore.init()
+})
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="flex w-full">
+      <AppMenu v-model="selected" />
+      <LeftPane>
+        <component :is="component" />
+      </LeftPane>
+    </div>
+    <RightPane />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/SignInView.vue b/src/views/SignInView.vue
index 1993f21..dd941fc 100644
--- a/src/views/SignInView.vue
+++ b/src/views/SignInView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useAuthStore } from '@/stores/auth.ts'
+import { JustButton, JustInput } from '@/components/simple'
 
 const authStore = useAuthStore()
 
@@ -12,16 +13,16 @@ async function onSubmit() {
 </script>
 
 <template>
-  <div class="h-100 d-flex flex-column align-center justify-center red">
-    <div class="w-20r border pa-4 blue">
+  <div class="h-full flex flex-col justify-center items-center">
+    <div class="bg-white border border-gray-500 p-4 rounded-md w-64">
       <form @submit.prevent="onSubmit">
-        <div class="d-flex flex-column ga-4">
+        <div class="flex flex-col gap-2">
           <div class="">Sign in</div>
-          <input v-model="email" placeholder="email" type="email" class="border" />
+          <JustInput v-model="email" placeholder="email" type="email" class="" />
           <input v-if="false" v-model="name" placeholder="name" />
-          <div class="d-flex ga-4 align-center">
+          <div class="flex justify-end">
             <input type="checkbox" v-if="false" />
-            <button type="submit">login</button>
+            <JustButton type="submit">sign in</JustButton>
           </div>
         </div>
       </form>
diff --git a/src/views/SignInView2.vue b/src/views/SignInView2.vue
new file mode 100644
index 0000000..1993f21
--- /dev/null
+++ b/src/views/SignInView2.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAuthStore } from '@/stores/auth.ts'
+
+const authStore = useAuthStore()
+
+const email = ref('vadim.olonin@gmail.com')
+const name = ref('')
+async function onSubmit() {
+  await authStore.login(email.value)
+}
+</script>
+
+<template>
+  <div class="h-100 d-flex flex-column align-center justify-center red">
+    <div class="w-20r border pa-4 blue">
+      <form @submit.prevent="onSubmit">
+        <div class="d-flex flex-column ga-4">
+          <div class="">Sign in</div>
+          <input v-model="email" placeholder="email" type="email" class="border" />
+          <input v-if="false" v-model="name" placeholder="name" />
+          <div class="d-flex ga-4 align-center">
+            <input type="checkbox" v-if="false" />
+            <button type="submit">login</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
new file mode 100644
index 0000000..cb28ce5
--- /dev/null
+++ b/src/views/TestView.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { JustButton, JustInput } from '@/components/simple'
+
+const email = ref('test')
+</script>
+
+<template>
+  <div class="flex gap-1 h-full w-full bg-green-200 items-start">
+    <JustInput v-model="email" placeholder="email" type="email" />
+    <JustInput placeholder="email" type="email" />
+
+    <JustButton>sign in</JustButton>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/vite.config.ts b/vite.config.ts
index 93807df..8db0266 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
+import tailwindcss from '@tailwindcss/vite'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -6,10 +7,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    // vueDevTools(),
-  ],
+  plugins: [vue(), tailwindcss(), vueDevTools()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),