diff --git a/backend/src/index.ts b/backend/src/index.ts
index b98d517..22ad4d9 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -1,10 +1,11 @@
 import cors from "cors";
-import express, { Request, Response } from "express";
+import express, { NextFunction, Request, Response } from "express";
 import http from "http";
 import { Server } from "socket.io";
 import { connectDatabase } from "./config/database.js";
 import { env } from "./config/env.js";
 import { authenticateSocket } from "./middleware/auth.js";
+import { apiRoutes } from "./routes/index.js";
 import { handleConnection } from "./socket/socketHandlers.js";
 import { AuthenticatedSocket } from "./types/index.js";
 
@@ -26,6 +27,8 @@ app.use(
 
 app.use(express.json());
 
+app.use("/api", apiRoutes);
+
 app.get("/health", (_, res) => {
   res.json({ status: "OK", timestamp: new Date().toISOString() });
 });
@@ -35,7 +38,7 @@ io.on("connection", async (socket) => {
   await handleConnection(io, socket as AuthenticatedSocket);
 });
 
-app.use((err: Error, _: Request, res: Response) => {
+app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
   console.error("Unhandled error:", err);
   res.status(500).json({
     success: false,
@@ -68,4 +71,4 @@ process.on("SIGTERM", () => {
 
 (async () => {
   await startServer();
-})()
+})();
diff --git a/backend/src/services/messageService.ts b/backend/src/services/messageService.ts
index 70cd8c6..ed18750 100644
--- a/backend/src/services/messageService.ts
+++ b/backend/src/services/messageService.ts
@@ -6,7 +6,7 @@ export class MessageService {
     try {
       const message = await prisma.message.create({
         data: {
-          content: data.constent,
+          content: data.content,
           userId,
           roomId: data.roomId,
         },
diff --git a/backend/src/types/index.ts b/backend/src/types/index.ts
index 33602f6..c712905 100644
--- a/backend/src/types/index.ts
+++ b/backend/src/types/index.ts
@@ -23,7 +23,7 @@ export type AuthenticatedSocket = Socket & {
 
 export type SendMessageRequest = {
   roomId: string;
-  constent: string;
+  content: string;
 };
 
 export type ReactToMessageRequest = {
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index b4f4470..995372c 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -7,4 +7,4 @@
   "jsxSingleQuote": false,
   "bracketSpacing": true,
   "arrowParens": "always"
-}
\ No newline at end of file
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ebc408a..f5a8a17 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,16 +8,23 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-scroll-area": "^1.2.9",
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tabs": "^1.1.12",
         "@tailwindcss/vite": "^4.1.10",
+        "@tanstack/react-query": "^5.80.6",
         "axios": "^1.9.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.514.0",
+        "next-themes": "^0.4.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "recharts": "^2.15.3",
         "socket.io-client": "^4.8.1",
+        "sonner": "^2.0.5",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.10",
         "zod": "^3.25.62",
@@ -780,6 +787,44 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -795,6 +840,313 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
+      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.9.tgz",
+      "integrity": "sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -813,6 +1165,121 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",
+      "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz",
@@ -1574,6 +2041,32 @@
         "vite": "^5.2.0 || ^6"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.80.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.80.6.tgz",
+      "integrity": "sha512-nl7YxT/TAU+VTf+e2zTkObGTyY8YZBMnbgeA1ee66lIVqzKlYursAII6z5t0e6rXgwUMJSV4dshBTNacNpZHbQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.80.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.80.6.tgz",
+      "integrity": "sha512-izX+5CnkpON3NQGcEm3/d7LfFQNo9ZpFtX2QsINgCYK9LT2VCIdi8D3bMaMSNhrAJCznRoAkFic76uvLroALBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.80.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -1675,7 +2168,7 @@
       "version": "19.1.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
       "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.0.0"
@@ -2015,6 +2508,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -2653,6 +3158,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -3452,6 +3963,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -4636,6 +5156,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5009,6 +5539,53 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
+      "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-smooth": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
@@ -5024,6 +5601,28 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -5514,6 +6113,16 @@
         }
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.5.tgz",
+      "integrity": "sha512-YwbHQO6cSso3HBXlbCkgrgzDNIhws14r4MO87Ofy+cV2X7ES4pOoAK3+veSmVTvqNx1BWUxlhPmZzP00Crk2aQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5790,6 +6399,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/tw-animate-css": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.4.tgz",
@@ -5964,6 +6579,49 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 53685e6..8234c2c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,16 +12,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
     "@tailwindcss/vite": "^4.1.10",
+    "@tanstack/react-query": "^5.80.6",
     "axios": "^1.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.514.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "recharts": "^2.15.3",
     "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.10",
     "zod": "^3.25.62",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 648381b..6932648 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,11 +1,38 @@
-import { Button } from './components/ui/button';
+import { ChatApp } from '@/components/ChatApp';
+import { LoginForm } from '@/components/LoginForm';
+import { Toaster } from '@/components/ui/sonner';
+import { useSocket } from '@/hooks/useSocket';
+import { useAuthStore } from '@/stores/authStore';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { FC } from 'react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+const AppContent: FC = () => {
+  const { isAuthenticated } = useAuthStore();
+
+  useSocket();
+
+  return (
+    <>
+      {isAuthenticated ? <ChatApp /> : <LoginForm />}
+      <Toaster />
+    </>
+  );
+};
 
 function App() {
   return (
-    <div>
-      <h1 className="text-3xl font-bold underline">Hello world!</h1>
-      <Button>Click me</Button>
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <AppContent />
+    </QueryClientProvider>
   );
 }
 
diff --git a/frontend/src/components/ChatApp.tsx b/frontend/src/components/ChatApp.tsx
new file mode 100644
index 0000000..0b07ea7
--- /dev/null
+++ b/frontend/src/components/ChatApp.tsx
@@ -0,0 +1,39 @@
+import { useChatStore } from '@/stores/chatStore';
+import type { FC } from 'react';
+import { ChatSidebar } from './ChatSidebar';
+import { MessageInput } from './MessageInput';
+import { MessageList } from './MessageList';
+
+export const ChatApp: FC = () => {
+  const { selectedRoomId, setSelectedRoom } = useChatStore();
+
+  return (
+    <div className="flex h-screen bg-white">
+      <ChatSidebar
+        selectedRoomId={selectedRoomId}
+        onRoomSelect={setSelectedRoom}
+      />
+
+      <div className="flex-1 flex flex-col">
+        {selectedRoomId ? (
+          <>
+            <div className="p-4 border-b border-gray-200 bg-gray-50">
+              <h1 className="text-lg font-semibold">Chat Room</h1>
+            </div>
+            <MessageList roomId={selectedRoomId} />
+            <MessageInput roomId={selectedRoomId} />
+          </>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-gray-500">
+            <div className="text-center">
+              <h2 className="text-xl font-semibold mb-2">
+                Welcome to Chat App
+              </h2>
+              <p>Select a chat room to start messaging</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/ChatSidebar.tsx b/frontend/src/components/ChatSidebar.tsx
new file mode 100644
index 0000000..e4a55eb
--- /dev/null
+++ b/frontend/src/components/ChatSidebar.tsx
@@ -0,0 +1,228 @@
+import { chatAPI } from '@/lib/api';
+import { useAuthStore } from '@/stores/authStore';
+import { useChatStore } from '@/stores/chatStore';
+import type { ChatRoom, CreateChatRoomRequest } from '@/types';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { LogOut, MessageCircle, Plus, Users } from 'lucide-react';
+import { useState, type FC, type FormEvent } from 'react';
+import { toast } from 'sonner';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './ui/dialog';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { ScrollArea } from './ui/scroll-area';
+import { Textarea } from './ui/textarea';
+
+type ChatSidebarProps = {
+  selectedRoomId: string | null;
+  onRoomSelect: (roomId: string) => void;
+};
+
+export const ChatSidebar: FC<ChatSidebarProps> = ({
+  selectedRoomId,
+  onRoomSelect,
+}) => {
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [newRoomData, setNewRoomData] = useState<CreateChatRoomRequest>({
+    name: '',
+    description: '',
+    memberUsernames: [],
+  });
+
+  const { user, logout } = useAuthStore();
+  const { chatRooms, onlineUsers, setChatRooms, addChatRoom } = useChatStore();
+
+  const { isLoading } = useQuery({
+    queryKey: ['chatRooms'],
+    queryFn: async () => {
+      const response = await chatAPI.getChatRooms();
+      if (response.data.success) {
+        setChatRooms(response.data.data);
+        return response.data.data;
+      }
+      throw new Error(response.data.error ?? 'Failed to fetch chat rooms');
+    },
+  });
+
+  const createRoomMutation = useMutation({
+    mutationKey: ['createChatRoom'],
+    mutationFn: chatAPI.createChatRoom,
+    onSuccess: (response) => {
+      if (response.data.success) {
+        addChatRoom(response.data.data);
+        setIsCreateDialogOpen(false);
+        setNewRoomData({ name: '', description: '', memberUsernames: [] });
+        toast.success('Chat room created successfully');
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onError: (error: any) => {
+      toast.error(error.response?.data?.error ?? 'Failed to create chat room');
+    },
+  });
+
+  const handleCreateRoom = (e: FormEvent) => {
+    e.preventDefault();
+    createRoomMutation.mutate(newRoomData);
+  };
+
+  const getOnlineMembersCount = (room: ChatRoom) => {
+    return room.members.filter((member) => onlineUsers.has(member.userId))
+      .length;
+  };
+
+  if (isLoading) {
+    return (
+      <div className="w-80 bg-gray-50 border-r border-gray-200 p-4">
+        <div className="animate-pulse space-y-4">
+          <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+          <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+          <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-80 bg-gray-50 border-r border-gray-200 flex flex-col">
+      {/* Header */}
+      <div className="p-4 border-b border-gray-200">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Chat Rooms</h2>
+          <Dialog
+            open={isCreateDialogOpen}
+            onOpenChange={setIsCreateDialogOpen}
+          >
+            <DialogTrigger asChild>
+              <Button size="sm" variant="outline">
+                <Plus className="h-4 w-4" />
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Create New Chat Room</DialogTitle>
+              </DialogHeader>
+              <form onSubmit={handleCreateRoom} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="room-name">Room Name</Label>
+                  <Input
+                    id="room-name"
+                    value={newRoomData.name}
+                    onChange={(e) =>
+                      setNewRoomData({ ...newRoomData, name: e.target.value })
+                    }
+                    required
+                    placeholder="Enter room name"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="room-description">
+                    Description (optional)
+                  </Label>
+                  <Textarea
+                    id="room-description"
+                    value={newRoomData.description}
+                    onChange={(e) =>
+                      setNewRoomData({
+                        ...newRoomData,
+                        description: e.target.value,
+                      })
+                    }
+                    placeholder="Enter room description"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="member-usernames">
+                    Member Usernames (comma-separated)
+                  </Label>
+                  <Input
+                    id="member-usernames"
+                    value={newRoomData.memberUsernames.join(', ')}
+                    onChange={(e) =>
+                      setNewRoomData({
+                        ...newRoomData,
+                        memberUsernames: e.target.value
+                          .split(',')
+                          .map((u) => u.trim())
+                          .filter((u) => u.length > 0),
+                      })
+                    }
+                    placeholder="user1, user2, user3"
+                  />
+                </div>
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={createRoomMutation.isPending}
+                >
+                  {createRoomMutation.isPending ? 'Creating...' : 'Create Room'}
+                </Button>
+              </form>
+            </DialogContent>
+          </Dialog>
+        </div>
+        <div className="flex items-center space-x-2 text-sm text-gray-600">
+          <span>Welcome, {user?.username}</span>
+          <Button size="sm" variant="ghost" onClick={logout}>
+            <LogOut className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+      <ScrollArea className="flex-1">
+        <div className="p-2 space-y-2">
+          {chatRooms.map((room: ChatRoom) => (
+            <div
+              key={room.id}
+              className={`p-3 rounded-lg cursor-pointer transition-colors ${selectedRoomId === room.id ? 'bg-blue-100 border-blue-200 border' : 'bg-white hover:bg-gray-100 border border-gray-200'}`}
+              onClick={() => onRoomSelect(room.id)}
+            >
+              <div className="flex items-center justify-between mb-1">
+                <h3 className="font-medium text-sm">{room.name}</h3>
+                <div className="flex items-center space-x-1">
+                  <Badge variant="secondary" className="text-xs">
+                    <Users className="h-3 w-3 mr-1" />
+                    {getOnlineMembersCount(room) / room.members.length}
+                  </Badge>
+                </div>
+              </div>
+              {room.description && (
+                <p className="text-xs text-gray-500 mb-2 truncate">
+                  {room.description}
+                </p>
+              )}
+              <div className="flex items-center justify-between text-xs text-gray-500">
+                <div className="flex items-center">
+                  <MessageCircle className="h-3 w-3 mr-1" />
+                  {room._count.messages} messages
+                </div>
+                <div className="flex -space-x-1">
+                  {room.members.slice(0, 3).map((member) => (
+                    <div
+                      key={member.id}
+                      className={`w-4 h-4 rounded-full border border-white flex items-center justify-center text-xs font-medium ${onlineUsers.has(member.userId) ? 'bg-green-500 text-white' : 'bg-gray-300 text-gray-600 '}`}
+                      title={`${member.user.username} - ${onlineUsers.has(member.userId) ? 'Online' : 'Offline'}`}
+                    >
+                      {member.user.username.charAt(0).toUpperCase()}
+                    </div>
+                  ))}
+                  {room.members.length > 3 && (
+                    <div className="w-4 h-4 rounded-full border border-white bg-gray-200 flex items-center justify-center text-xs">
+                      +{room.members.length - 3}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
diff --git a/frontend/src/components/LoginForm.tsx b/frontend/src/components/LoginForm.tsx
new file mode 100644
index 0000000..7c807d3
--- /dev/null
+++ b/frontend/src/components/LoginForm.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useMutation } from '@tanstack/react-query';
+import type React from 'react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { authAPI } from '../lib/api';
+import { useAuthStore } from '../stores/authStore';
+import type { LoginRequest, RegisterRequest } from '../types';
+
+export const LoginForm: React.FC = () => {
+  const [loginData, setLoginData] = useState<LoginRequest>({
+    email: '',
+    password: '',
+  });
+  const [registerData, setRegisterData] = useState<RegisterRequest>({
+    username: '',
+    email: '',
+    password: '',
+  });
+
+  const { login } = useAuthStore();
+
+  const loginMutation = useMutation({
+    mutationFn: authAPI.login,
+    onSuccess: (response) => {
+      if (response.data.success && response.data.data) {
+        login(response.data.data.token, response.data.data.user);
+        toast.success('Login successful!');
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onError: (error: any) => {
+      toast.error(
+        'Login failed: ' + (error.response?.data?.error ?? 'Unknown error')
+      );
+    },
+  });
+
+  const registerMutation = useMutation({
+    mutationFn: authAPI.register,
+    onSuccess: (response) => {
+      if (response.data.success && response.data.data) {
+        login(response.data.data.token, response.data.data.user);
+        toast.success('Registration successful! You are now logged in.');
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onError: (error: any) => {
+      toast.error(
+        'Registration failed: ' +
+          (error.response?.data?.error ?? 'Unknown error')
+      );
+    },
+  });
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    loginMutation.mutate(loginData);
+  };
+
+  const handleRegister = (e: React.FormEvent) => {
+    e.preventDefault();
+    registerMutation.mutate(registerData);
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Welcome to Chat App</CardTitle>
+          <CardDescription>
+            Sign in to your account or create a new one
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="login" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="login">Login</TabsTrigger>
+              <TabsTrigger value="register">Register</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="login">
+              <form onSubmit={handleLogin} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={loginData.email}
+                    onChange={(e) =>
+                      setLoginData({ ...loginData, email: e.target.value })
+                    }
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="password">Password</Label>
+                  <Input
+                    id="password"
+                    type="password"
+                    value={loginData.password}
+                    onChange={(e) =>
+                      setLoginData({ ...loginData, password: e.target.value })
+                    }
+                    required
+                  />
+                </div>
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={loginMutation.isPending}
+                >
+                  {loginMutation.isPending ? 'Signing in...' : 'Sign In'}
+                </Button>
+              </form>
+            </TabsContent>
+
+            <TabsContent value="register">
+              <form onSubmit={handleRegister} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="username">Username</Label>
+                  <Input
+                    id="username"
+                    value={registerData.username}
+                    onChange={(e) =>
+                      setRegisterData({
+                        ...registerData,
+                        username: e.target.value,
+                      })
+                    }
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="register-email">Email</Label>
+                  <Input
+                    id="register-email"
+                    type="email"
+                    value={registerData.email}
+                    onChange={(e) =>
+                      setRegisterData({
+                        ...registerData,
+                        email: e.target.value,
+                      })
+                    }
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="register-password">Password</Label>
+                  <Input
+                    id="register-password"
+                    type="password"
+                    value={registerData.password}
+                    onChange={(e) =>
+                      setRegisterData({
+                        ...registerData,
+                        password: e.target.value,
+                      })
+                    }
+                    required
+                  />
+                </div>
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={registerMutation.isPending}
+                >
+                  {registerMutation.isPending
+                    ? 'Creating account...'
+                    : 'Create Account'}
+                </Button>
+              </form>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
new file mode 100644
index 0000000..3086764
--- /dev/null
+++ b/frontend/src/components/MessageInput.tsx
@@ -0,0 +1,73 @@
+import { useSocket } from '@/hooks/useSocket';
+import { Send } from 'lucide-react';
+import { useEffect, useState, type FC, type FormEvent } from 'react';
+import { toast } from 'sonner';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+
+type MessageInputProps = {
+  roomId: string;
+};
+
+export const MessageInput: FC<MessageInputProps> = ({ roomId }) => {
+  const [message, setMessage] = useState('');
+  const [isRateLimited, setIsRateLimited] = useState(false);
+  const { socket } = useSocket();
+
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleRateLimitExceeded = (data: {
+      message: string;
+      remainingTime?: number;
+    }) => {
+      setIsRateLimited(true);
+      toast.error(data.message);
+
+      const resetTime = data.remainingTime ?? 60000;
+      setTimeout(() => {
+        setIsRateLimited(false);
+      }, resetTime);
+    };
+
+    socket.on('rate_limit_exceeded', handleRateLimitExceeded);
+
+    return () => {
+      socket.off('rate_limit_exceeded', handleRateLimitExceeded);
+    };
+  }, [socket, toast]);
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!message.trim() || !socket || isRateLimited) return;
+
+    socket.emit('send_message', {
+      roomId,
+      content: message.trim(),
+    });
+
+    setMessage('');
+  };
+
+  return (
+    <div className="p-4 border-t border-gray-200">
+      <form onSubmit={handleSubmit} className="flex space-x-2">
+        <Input
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder={
+            isRateLimited
+              ? 'Rate limited - please wait...'
+              : 'Type your message...'
+          }
+          disabled={isRateLimited}
+          className="flex-1"
+        />
+        <Button type="submit" disabled={!message.trim() || isRateLimited}>
+          <Send className="h-4 w-4" />
+        </Button>
+      </form>
+    </div>
+  );
+};
diff --git a/frontend/src/components/MessageList.tsx b/frontend/src/components/MessageList.tsx
new file mode 100644
index 0000000..b505922
--- /dev/null
+++ b/frontend/src/components/MessageList.tsx
@@ -0,0 +1,186 @@
+import { useSocket } from '@/hooks/useSocket';
+import { chatAPI } from '@/lib/api';
+import { cn } from '@/lib/utils';
+import { useAuthStore } from '@/stores/authStore';
+import { useChatStore } from '@/stores/chatStore';
+import type { Message, MessageReaction } from '@/types';
+import { useQuery } from '@tanstack/react-query';
+import { Heart, Smile, ThumbsUp } from 'lucide-react';
+import { useEffect, useRef, type FC } from 'react';
+import { Button } from './ui/button';
+import { ScrollArea } from './ui/scroll-area';
+
+type MessageListProps = {
+  roomId: string;
+};
+
+export const MessageList: FC<MessageListProps> = ({ roomId }) => {
+  const { user } = useAuthStore();
+  const { messages, setMessages } = useChatStore();
+  const { socket } = useSocket();
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const roomMessages = messages[roomId] ?? [];
+
+  const { isLoading } = useQuery({
+    queryKey: ['messages', roomId],
+    queryFn: async () => {
+      const response = await chatAPI.getMessages(roomId);
+      if (response.data.success) {
+        setMessages(roomId, response.data.data);
+        return response.data.data;
+      }
+      throw new Error(response.data.error ?? 'Failed to fetch messages');
+    },
+    enabled: !!roomId,
+  });
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [roomMessages]);
+
+  const handleReaction = (messageId: string, type: string) => {
+    if (socket) {
+      socket.emit('react_to_message', {
+        messageId,
+        type,
+      });
+    }
+  };
+
+  const getReactionCount = (reactions: MessageReaction[], type: string) => {
+    return reactions.filter((r) => r.type === type).length;
+  };
+
+  const hasUserReacted = (reactions: MessageReaction[], type: string) => {
+    return reactions.some((r) => r.type === type && r.userId === user?.id);
+  };
+
+  const formatTime = (dateString: string) => {
+    return new Date(dateString).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="animate-pulse text-gray-500">Loading messages...</div>
+      </div>
+    );
+  }
+
+  return (
+    <ScrollArea className="flex-1 p-4">
+      <div className="space-y-4">
+        {roomMessages.map((message: Message) => (
+          <div
+            key={message.id}
+            className={cn(
+              'flex',
+              message.userId === user?.id ? 'justify-end' : 'justify-start'
+            )}
+          >
+            <div
+              className={cn(
+                'max-w-xs lg:max-w-md px-4 py-2 rounded-lg',
+                message.userId === user?.id
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-200 text-gray-900'
+              )}
+            >
+              {message.userId !== user?.id && (
+                <div className="text-xs font-medium mb-1 opacity-70">
+                  {message.user.username}
+                </div>
+              )}
+
+              <div className="break-words">{message.content}</div>
+
+              <div className="flex items-center justify-between mt-2">
+                <div className="text-xs opacity-70">
+                  {formatTime(message.createdAt)}
+                </div>
+
+                <div className="flex items-center space-x-1">
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className={cn(
+                      'h-6 px-2 text-xs',
+                      hasUserReacted(message.reactions, 'like') && 'bg-red-100'
+                    )}
+                    onClick={() => handleReaction(message.id, 'like')}
+                  >
+                    <Heart
+                      className={cn(
+                        'h-3 w-3',
+                        hasUserReacted(message.reactions, 'like') &&
+                          'fill-red-500 text-red-500'
+                      )}
+                    />
+                    {getReactionCount(message.reactions, 'like') > 0 && (
+                      <span className="ml-1">
+                        {getReactionCount(message.reactions, 'like')}
+                      </span>
+                    )}
+                  </Button>
+
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className={cn(
+                      'h-6 px-2 text-xs',
+                      hasUserReacted(message.reactions, 'thumbs_up') &&
+                        'bg-blue-100'
+                    )}
+                    onClick={() => handleReaction(message.id, 'thumbs_up')}
+                  >
+                    <ThumbsUp
+                      className={cn(
+                        'h-3 w-3',
+                        hasUserReacted(message.reactions, 'thumbs_up') &&
+                          'fill-blue-500 text-blue-500'
+                      )}
+                    />
+                    {getReactionCount(message.reactions, 'thumbs_up') > 0 && (
+                      <span className="ml-1">
+                        {getReactionCount(message.reactions, 'thumbs_up')}
+                      </span>
+                    )}
+                  </Button>
+
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className={cn(
+                      'h-6 px-2 text-xs',
+                      hasUserReacted(message.reactions, 'laugh') &&
+                        'bg-yellow-100'
+                    )}
+                    onClick={() => handleReaction(message.id, 'laugh')}
+                  >
+                    <Smile
+                      className={cn(
+                        'h-3 w-3',
+                        hasUserReacted(message.reactions, 'laugh') &&
+                          'fill-yellow-500 text-yellow-500'
+                      )}
+                    />
+                    {getReactionCount(message.reactions, 'laugh') > 0 && (
+                      <span className="ml-1">
+                        {getReactionCount(message.reactions, 'laugh')}
+                      </span>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+    </ScrollArea>
+  );
+};
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..0205413
--- /dev/null
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..d05bbc6
--- /dev/null
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..6cb123b
--- /dev/null
+++ b/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..03295ca
--- /dev/null
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..ef7133a
--- /dev/null
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/frontend/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..9376f59
--- /dev/null
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..cd62aff
--- /dev/null
+++ b/frontend/src/components/ui/sonner.tsx
@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..3d6f3ac
--- /dev/null
+++ b/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/frontend/src/hooks/useSocket.ts b/frontend/src/hooks/useSocket.ts
new file mode 100644
index 0000000..d168bd3
--- /dev/null
+++ b/frontend/src/hooks/useSocket.ts
@@ -0,0 +1,26 @@
+import { socketService } from '@/lib/socket';
+import { useAuthStore } from '@/stores/authStore';
+import { useSocketStore } from '@/stores/socketStore';
+import { useEffect } from 'react';
+
+export const useSocket = () => {
+  const { token, isAuthenticated } = useAuthStore();
+  const { socket, isConnected, setSocket } = useSocketStore();
+
+  useEffect(() => {
+    if (isAuthenticated && token && !socket) {
+      const socketInstance = socketService.connect(token);
+      setSocket(socketInstance);
+    } else if (!isAuthenticated && socket) {
+      socketService.disconnect();
+    }
+  }, [isAuthenticated, token, socket, setSocket]);
+
+  return {
+    socket,
+    isConnected,
+    emit: socket?.emit.bind(socket),
+    on: socket?.on.bind(socket),
+    off: socket?.off.bind(socket),
+  };
+};
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
new file mode 100644
index 0000000..a309c26
--- /dev/null
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,55 @@
+import { useAuthStore } from '@/stores/authStore';
+import type {
+  ApiResponse,
+  CreateChatRoomRequest,
+  LoginRequest,
+  RegisterRequest,
+} from '@/types';
+import axios, { type AxiosResponse } from 'axios';
+
+const API_BASE_URL = 'http://localhost:3000/api';
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+});
+
+api.interceptors.request.use((config) => {
+  const token = useAuthStore.getState().token;
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+
+  return config;
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      useAuthStore.getState().logout();
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export const authAPI = {
+  login: (data: LoginRequest): Promise<AxiosResponse<ApiResponse>> =>
+    api.post('/auth/login', data),
+  register: (data: RegisterRequest): Promise<AxiosResponse<ApiResponse>> =>
+    api.post('/auth/register', data),
+};
+
+export const chatAPI = {
+  getChatRooms: (): Promise<AxiosResponse<ApiResponse>> =>
+    api.get('/chat-rooms'),
+  createChatRoom: (
+    data: CreateChatRoomRequest
+  ): Promise<AxiosResponse<ApiResponse>> => api.post('/chat-rooms', data),
+  getMessages: (
+    roomId: string,
+    page = 1,
+    limit = 50
+  ): Promise<AxiosResponse<ApiResponse>> =>
+    api.get(`/messages/${roomId}?page=${page}&limit=${limit}`),
+};
+
+export default api;
diff --git a/frontend/src/lib/socket.ts b/frontend/src/lib/socket.ts
new file mode 100644
index 0000000..91c9953
--- /dev/null
+++ b/frontend/src/lib/socket.ts
@@ -0,0 +1,131 @@
+import { useChatStore } from '@/stores/chatStore';
+import { useSocketStore } from '@/stores/socketStore';
+import type { Message, MessageReaction } from '@/types';
+import { io, type Socket } from 'socket.io-client';
+import { toast } from 'sonner';
+
+class SocketService {
+  private socket: Socket | null = null;
+  private listenersInitialized = false;
+
+  connect(token: string): Socket {
+    if (this.socket && this.socket.connected) {
+      return this.socket;
+    }
+
+    this.socket = io('http://localhost:3000', {
+      auth: {
+        token,
+      },
+    });
+    if (!this.listenersInitialized) {
+      this.setupEventListeners();
+      this.listenersInitialized = true;
+    }
+
+    useSocketStore.getState().setSocket(this.socket);
+    return this.socket;
+  }
+
+  disconnect() {
+    if (this.socket) {
+      this.removeAllListeners();
+      this.socket.disconnect();
+      this.socket = null;
+      useSocketStore.getState().setSocket(null);
+      useSocketStore.getState().setConnected(false);
+    }
+  }
+
+  private removeAllListeners() {
+    if (!this.socket) return;
+
+    this.socket.removeAllListeners('new_message');
+    this.socket.removeAllListeners('message_reaction_updated');
+    this.socket.removeAllListeners('user_online');
+    this.socket.removeAllListeners('user_offline');
+    this.socket.removeAllListeners('rate_limit_exceeded');
+    this.socket.removeAllListeners('error');
+    this.socket.removeAllListeners('connect');
+    this.socket.removeAllListeners('disconnect');
+  }
+
+  getSocket(): Socket | null {
+    return this.socket;
+  }
+
+  private setupEventListeners() {
+    if (!this.socket) return;
+
+    this.removeAllListeners();
+
+    const { setConnected } = useSocketStore.getState();
+    const {
+      addMessage,
+      updateMessageReactions,
+      addOnlineUser,
+      removeOnlineUser,
+    } = useChatStore.getState();
+
+    this.socket.on('connect', () => {
+      console.log('Connected to server');
+      setConnected(true);
+    });
+
+    this.socket.on('disconnect', () => {
+      console.log('Disconnected from server');
+      setConnected(false);
+    });
+
+    this.socket.on('new_message', (message: Message) => {
+      addMessage(message);
+    });
+
+    this.socket.on(
+      'message_reaction_updated',
+      (data: { messageId: string; reactions: MessageReaction[] }) => {
+        updateMessageReactions(data.messageId, data.reactions);
+      }
+    );
+
+    this.socket.on(
+      'user_online',
+      (data: { userId: string; username: string }) => {
+        addOnlineUser(data.userId);
+      }
+    );
+
+    this.socket.on(
+      'user_offline',
+      (data: { userId: string; username: string }) => {
+        removeOnlineUser(data.userId);
+      }
+    );
+
+    this.socket.on(
+      'rate_limit_exceeded',
+      (data: { message: string; remainingTime?: number }) => {
+        console.warn('Rate limit exceeded:', data.message);
+        toast.error(`Rate limit exceeded: ${data.message}`, {
+          duration: data.remainingTime ? data.remainingTime * 1000 : 5000,
+          position: 'top-right',
+          style: {
+            background: '#f8d7da',
+            color: '#721c24',
+            border: '1px solid #f5c6cb',
+          },
+        });
+      }
+    );
+
+    this.socket.on('error', (data: { message: string }) => {
+      console.error('Socket error:', data.message);
+      toast.error(`Socket error: ${data.message}`, {
+        duration: 5000,
+        position: 'top-right',
+      });
+    });
+  }
+}
+
+export const socketService = new SocketService();
diff --git a/frontend/src/stores/authStore.ts b/frontend/src/stores/authStore.ts
new file mode 100644
index 0000000..4f3aeba
--- /dev/null
+++ b/frontend/src/stores/authStore.ts
@@ -0,0 +1,55 @@
+import type { User } from '@/types';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type AuthState = {
+  user: User | null;
+  token: string | null;
+  isAuthenticated: boolean;
+  login: (token: string, user: User) => void;
+  logout: () => void;
+  updateUser: (user: Partial<User>) => void;
+};
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set, get) => ({
+      user: null,
+      token: null,
+      isAuthenticated: false,
+
+      login: (token: string, user: User) => {
+        set({
+          token,
+          user,
+          isAuthenticated: true,
+        });
+      },
+
+      logout: () => {
+        set({
+          token: null,
+          user: null,
+          isAuthenticated: false,
+        });
+      },
+
+      updateUser: (userData: Partial<User>) => {
+        const currentUser = get().user;
+        if (currentUser) {
+          set({
+            user: { ...currentUser, ...userData },
+          });
+        }
+      },
+    }),
+    {
+      name: 'auth-storage',
+      partialize: (state) => ({
+        token: state.token,
+        user: state.user,
+        isAuthenticated: state.isAuthenticated,
+      }),
+    }
+  )
+);
diff --git a/frontend/src/stores/chatStore.ts b/frontend/src/stores/chatStore.ts
new file mode 100644
index 0000000..7c8a8d5
--- /dev/null
+++ b/frontend/src/stores/chatStore.ts
@@ -0,0 +1,99 @@
+import type { ChatRoom, Message, MessageReaction } from '@/types';
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+
+type ChatState = {
+  chatRooms: ChatRoom[];
+  selectedRoomId: string | null;
+  messages: Record<string, Message[]>;
+  onlineUsers: Set<string>;
+
+  setChatRooms: (rooms: ChatRoom[]) => void;
+  addChatRoom: (room: ChatRoom) => void;
+  setSelectedRoom: (roomId: string | null) => void;
+  setMessages: (roomId: string, messages: Message[]) => void;
+  addMessage: (message: Message) => void;
+  updateMessageReactions: (
+    messageId: string,
+    reactions: MessageReaction[]
+  ) => void;
+  setOnlineUsers: (users: Set<string>) => void;
+  addOnlineUser: (userId: string) => void;
+  removeOnlineUser: (userId: string) => void;
+};
+
+export const useChatStore = create<ChatState>()(
+  subscribeWithSelector((set) => ({
+    chatRooms: [],
+    selectedRoomId: null,
+    messages: {},
+    onlineUsers: new Set(),
+
+    setChatRooms: (rooms) => {
+      set({ chatRooms: rooms });
+    },
+
+    addChatRoom: (room) => {
+      set((state) => ({
+        chatRooms: [room, ...state.chatRooms],
+      }));
+    },
+
+    setSelectedRoom: (roomId) => {
+      set({ selectedRoomId: roomId });
+    },
+
+    setMessages: (roomId, messages) => {
+      set((state) => ({
+        messages: {
+          ...state.messages,
+          [roomId]: messages,
+        },
+      }));
+    },
+
+    addMessage: (message) => {
+      set((state) => ({
+        messages: {
+          ...state.messages,
+          [message.roomId]: [
+            ...(state.messages[message.roomId] || []),
+            message,
+          ],
+        },
+      }));
+    },
+
+    updateMessageReactions: (messageId, reactions) => {
+      set((state) => {
+        const newMessages = { ...state.messages };
+
+        Object.keys(newMessages).forEach((roomId) => {
+          newMessages[roomId] = newMessages[roomId].map((message) =>
+            message.id === messageId ? { ...message, reactions } : message
+          );
+        });
+
+        return { messages: newMessages };
+      });
+    },
+
+    setOnlineUsers: (users) => {
+      set({ onlineUsers: users });
+    },
+
+    addOnlineUser: (userId) => {
+      set((state) => ({
+        onlineUsers: new Set([...state.onlineUsers, userId]),
+      }));
+    },
+
+    removeOnlineUser: (userId) => {
+      set((state) => {
+        const newOnlineUsers = new Set(state.onlineUsers);
+        newOnlineUsers.delete(userId);
+        return { onlineUsers: newOnlineUsers };
+      });
+    },
+  }))
+);
diff --git a/frontend/src/stores/socketStore.ts b/frontend/src/stores/socketStore.ts
new file mode 100644
index 0000000..1349db4
--- /dev/null
+++ b/frontend/src/stores/socketStore.ts
@@ -0,0 +1,21 @@
+import type { Socket } from 'socket.io-client';
+import { create } from 'zustand';
+
+type SocketState = {
+  socket: Socket | null;
+  isConnected: boolean;
+  setSocket: (socket: Socket | null) => void;
+  setConnected: (isConnected: boolean) => void;
+};
+
+export const useSocketStore = create<SocketState>((set) => ({
+  socket: null,
+  isConnected: false,
+
+  setSocket: (socket) => {
+    set({ socket });
+  },
+  setConnected: (isConnected) => {
+    set({ isConnected });
+  },
+}));
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..9ccdd8b
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,73 @@
+export type User = {
+  id: string;
+  username: string;
+  email: string;
+  avatar?: string;
+  isOnline: boolean;
+  lastSeen: string;
+};
+
+export type ChatRoom = {
+  id: string;
+  name: string;
+  description?: string;
+  isPrivate: boolean;
+  createdAt: string;
+  members: ChatRoomMember[];
+  _count: {
+    messages: number;
+  };
+};
+
+export type ChatRoomMember = {
+  id: string;
+  userId: string;
+  roomId: string;
+  joinedAt: string;
+  role: string;
+  user: User;
+};
+
+export type Message = {
+  id: string;
+  content: string;
+  createdAt: string;
+  userId: string;
+  roomId: string;
+  user: User;
+  reactions: MessageReaction[];
+};
+
+export type MessageReaction = {
+  id: string;
+  type: string;
+  createdAt: string;
+  userId: string;
+  messageId: string;
+  user: User;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ApiResponse<T = any> = {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+};
+
+export type LoginRequest = {
+  email: string;
+  password: string;
+};
+
+export type RegisterRequest = {
+  username: string;
+  email: string;
+  password: string;
+};
+
+export type CreateChatRoomRequest = {
+  name: string;
+  description?: string;
+  memberUsernames: string[];
+};