diff --git a/frontend/index.html b/frontend/index.html
index e8e87be..4aa24b5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,18 +7,17 @@
         <link rel="icon" href="./src/resources/images/logo.png" />
     </head>
     <body>
-        <div id="electron-title-bar">
+        <!-- <div id="electron-title-bar">
             <div class="macos-padding"></div>
             <div id="window-title"></div>
-            <!-- <div class="window-controls">
+            <div class="window-controls">
                 <mdui-button-icon icon="remove" id="window-minimize"></mdui-button-icon>
                 <mdui-button-icon icon="stack--outlined" id="window-restore" class="hidden"></mdui-button-icon>
                 <mdui-button-icon icon="ad--outlined" id="window-maximize"></mdui-button-icon>
                 <mdui-button-icon icon="close" id="window-close"></mdui-button-icon>
-            </div> -->
+            </div> 
         </div>
         <div id="main-wrapper">
-            <!-- Login Form -->
             <div id="login-form" class="auth-container">
                 <div class="auth-card fade-in">
                     <div class="auth-header">
@@ -62,8 +61,6 @@
                     </div>
                 </div>
             </div>
-
-            <!-- Register Form -->
             <div id="register-form" class="auth-container" style="display: none;">
                 <div class="auth-card fade-in">
                     <div class="auth-header">
@@ -123,8 +120,6 @@
                     </div>
                 </div>
             </div>
-
-            <!-- Chat Interface -->
             <div id="chat-interface" style="display: none;">
                 <div class="all-container">
                     <div class="chat-list" id="chat-list">
@@ -192,7 +187,6 @@
                             </div>
                             
                             <div class="chat-messages" id="chat-messages">
-                                <!-- Messages will be loaded here dynamically -->
                             </div>
                             
                             <div class="chat-input-wrapper">
@@ -239,7 +233,6 @@
             </div>
         </mdui-dialog>
 
-        <!-- Profile Picture Cropper Dialog -->
         <mdui-dialog id="cropper-dialog" close-on-overlay-click close-on-esc>
             <div class="cropper-dialog-content">
                 <div class="cropper-header">
@@ -425,8 +418,10 @@
                     </div>
                 </div>
             </div>
-        </mdui-dialog>
+        </mdui-dialog> -->
 
-        <script src="src/main.ts" type="module"></script>
+        <div id="root"></div>
+
+        <script src="src/main.tsx" type="module"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
deleted file mode 100644
index b3c1090..0000000
--- a/frontend/src/main.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @fileoverview Application entry point for FromChat frontend
- * @description Main module that initializes all required components and styles
- * @author Cursor
- * @version 1.0.0
- */
-
-import './resources/css/style.scss';
-import "mdui/mdui.css";
-
-import "./utils/material";
-import "./chat/chat";
-import "./userPanel/settings";
-import "./userPanel/userpanel";
-import "./core/init";
-import "./userPanel/profile/profile";
-import "./chat/contextMenu";
-import "./chat/profileDialog";
-import "./electron/electron";
-import "./chat/panel";
-import "./chat/dm";
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..5f09643
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,26 @@
+/**
+ * @fileoverview Application entry point for FromChat frontend
+ * @description Main module that initializes all required components and styles
+ * @author Cursor
+ * @version 1.0.0
+ */
+
+import './resources/css/style.scss';
+import "mdui/mdui.css";
+
+import "./utils/material";
+// import "./chat/chat";
+// import "./userPanel/settings";
+// import "./userPanel/userpanel";
+// import "./core/init";
+// import "./userPanel/profile/profile";
+// import "./chat/contextMenu";
+// import "./chat/profileDialog";
+// import "./electron/electron";
+// import "./chat/panel";
+// import "./chat/dm";
+import { createRoot } from 'react-dom/client';
+import App from './ui/App';
+
+// Initialize React app
+createRoot(document.getElementById("root")!).render(<App />);
\ No newline at end of file
diff --git a/frontend/src/ui/App.tsx b/frontend/src/ui/App.tsx
new file mode 100644
index 0000000..cead101
--- /dev/null
+++ b/frontend/src/ui/App.tsx
@@ -0,0 +1,3 @@
+export default function App() {
+    return <></>
+}
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index cd5be70..2dcd702 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -17,7 +17,11 @@
         "strict": true,
         "erasableSyntaxOnly": true,
         "noFallthroughCasesInSwitch": true,
-        "noUncheckedSideEffectImports": true
+        "noUncheckedSideEffectImports": true,
+
+        /* React JSX Support */
+        "jsx": "react-jsx",
+        "jsxImportSource": "react"
     },
     "include": ["src", "electron.d.ts"]
 }
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 5771b3e..cf1126e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,33 +2,10 @@ import { defineConfig, PluginOption } from "vite";
 import { createHtmlPlugin } from "vite-plugin-html";
 import autoprefixer from "autoprefixer";
 import electron from "vite-plugin-electron/simple";
-
-function hmrAutoAcceptPlugin(): PluginOption {
-    const injectionLine = "if(import.meta.hot){import.meta.hot.accept()}";
-    const fileRegex = /\.(m?jsx?|tsx?)$/;
-
-    return {
-        name: "hmr-auto-accept",
-        apply: "serve",
-        enforce: "post",
-        transform(code, id) {
-            if (!fileRegex.test(id)) return null;
-            if (id.endsWith(".d.ts")) return null;
-            if (id.includes("node_modules")) return null;
-            if (id.startsWith("\0") || id.includes("virtual:") || id.includes("/@vite/")) return null;
-            if (code.includes("import.meta.hot.accept()")) return null;
-
-            if (!code.endsWith("\n")) {
-                code += "\n";
-            }
-            code += injectionLine;
-            return { code: code, map: null };
-        },
-    };
-}
+import react from "@vitejs/plugin-react";
 
 const plugins: PluginOption[] = [
-    hmrAutoAcceptPlugin(),
+    react(),
     createHtmlPlugin({
         minify: {
             collapseWhitespace: true,
diff --git a/package.json b/package.json
index f06de8f..5082110 100644
--- a/package.json
+++ b/package.json
@@ -41,10 +41,15 @@
         "vite": "^7.1.2",
         "vite-plugin-electron": "^0.29.0",
         "vite-plugin-electron-renderer": "^0.14.6",
-        "vite-plugin-html": "^3.2.2"
+        "vite-plugin-html": "^3.2.2",
+        "@vitejs/plugin-react": "^5.0.2",
+        "@types/react": "^19.1.12",
+        "@types/react-dom": "^19.1.9"
     },
     "dependencies": {
         "mdui": "^2.1.4",
-        "tweetnacl": "^1.0.3"
+        "tweetnacl": "^1.0.3",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1"
     }
 }
