diff --git a/webapp/chat-app/package.json b/webapp/chat-app/package.json
index 1ca8f261..a14e4cdf 100644
--- a/webapp/chat-app/package.json
+++ b/webapp/chat-app/package.json
@@ -25,22 +25,35 @@
     "@types/react-redux": "^7.1.34",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
+    "cross-env": "^7.0.3",
     "eslint": "^8.0.0",
     "typescript": "^4.9.5"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "cross-env GENERATE_SOURCEMAP=true react-scripts start",
+    "build": "cross-env GENERATE_SOURCEMAP=true INLINE_RUNTIME_CHUNK=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix",
+    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix --max-warnings=0",
     "type-check": "tsc --noEmit"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "rules": {
+      "no-console": [
+        "warn",
+        {
+          "allow": [
+            "warn",
+            "error"
+          ]
+        }
+      ],
+      "no-debugger": "warn"
+    }
   },
   "browserslist": {
     "production": [
diff --git a/webapp/chat-app/src/App.tsx b/webapp/chat-app/src/App.tsx
index a833f20a..d34e8ed7 100644
--- a/webapp/chat-app/src/App.tsx
+++ b/webapp/chat-app/src/App.tsx
@@ -6,6 +6,7 @@ import {GlobalStyles} from './styles/GlobalStyles';
 import ChatInterface from './components/ChatInterface';
 import ThemeProvider from './themes/ThemeProvider';
 import {Menu} from "./components/Menu/Menu";
+import {Modal} from "./components/Modal/Modal";
 
 const App: React.FC = () => {
     console.log('[App] Component rendering');
@@ -41,6 +42,7 @@ const App: React.FC = () => {
                                             websocket={websocket}
                                             isConnected={isConnected}
                                         />
+                                        <Modal/>
                                     </div>
                                 </>
                             );
diff --git a/webapp/chat-app/src/components/Menu/Menu.tsx b/webapp/chat-app/src/components/Menu/Menu.tsx
index e0394831..8bcaad9d 100644
--- a/webapp/chat-app/src/components/Menu/Menu.tsx
+++ b/webapp/chat-app/src/components/Menu/Menu.tsx
@@ -27,14 +27,12 @@ const Dropdown = styled.div`
     padding: ${({theme}) => theme.sizing.spacing.sm};
     text-decoration: none;
     cursor: pointer;
+    position: relative;
 
     &:hover {
         background-color: ${({theme}) => theme.colors.primary};
         color: white;
-    }
 
-    &:hover .div {
-        display: block;
     }
 `;
 
@@ -57,6 +55,12 @@ const DropdownContent = styled.div`
     min-width: 160px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     z-index: 1;
+    top: 100%;
+    left: 0;
+
+    ${Dropdown}:hover & {
+        display: block;
+    }
 `;
 
 const DropdownItem = styled.a`
@@ -84,6 +88,11 @@ export const Menu: React.FC = () => {
     const handleModalOpen = (modalType: string) => {
         console.log(`Opening modal: ${modalType}`);
         dispatch(showModal(modalType));
+        // Verify the action was dispatched
+        console.log('[Menu] Modal action dispatched:', {
+            type: 'showModal',
+            modalType
+        });
     };
 
     const handleLogout = () => {
diff --git a/webapp/chat-app/src/components/Modal/Modal.tsx b/webapp/chat-app/src/components/Modal/Modal.tsx
new file mode 100644
index 00000000..97276a8f
--- /dev/null
+++ b/webapp/chat-app/src/components/Modal/Modal.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../store';
+import { hideModal } from '../../store/slices/uiSlice';
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+const ModalContent = styled.div`
+  background-color: ${({theme}) => theme.colors.surface};
+  padding: ${({theme}) => theme.sizing.spacing.lg};
+  border-radius: 4px;
+  min-width: 300px;
+`;
+
+export const Modal: React.FC = () => {
+  const dispatch = useDispatch();
+  const { modalOpen, modalType } = useSelector((state: RootState) => state.ui);
+
+  if (!modalOpen) return null;
+
+  console.log('[Modal] Rendering modal:', { modalType });
+
+  return (
+    <ModalOverlay onClick={() => dispatch(hideModal())}>
+      <ModalContent onClick={e => e.stopPropagation()}>
+        <h2>{modalType}</h2>
+        {/* Add your modal content here based on modalType */}
+      </ModalContent>
+    </ModalOverlay>
+  );
+};
\ No newline at end of file
diff --git a/webapp/chat-app/src/components/Tabs/index.tsx b/webapp/chat-app/src/components/Tabs/index.tsx
index 7cb0535d..6c86d1f1 100644
--- a/webapp/chat-app/src/components/Tabs/index.tsx
+++ b/webapp/chat-app/src/components/Tabs/index.tsx
@@ -29,7 +29,6 @@ interface TabsProps {
 }
 
 const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, onTabChange, children }) => {
-  // Log when component mounts or updates
   useEffect(() => {
     console.log('Tabs component mounted/updated with:', {
       tabsCount: tabs.length,
@@ -65,7 +64,7 @@ const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, onTabChange, children }) =
     </TabContainer>
   );
 };
-// Add component display name for better debugging
+
 Tabs.displayName = 'Tabs';
 
 
diff --git a/webapp/chat-app/src/store/slices/uiSlice.ts b/webapp/chat-app/src/store/slices/uiSlice.ts
index 6ddf1375..9402bb47 100644
--- a/webapp/chat-app/src/store/slices/uiSlice.ts
+++ b/webapp/chat-app/src/store/slices/uiSlice.ts
@@ -24,12 +24,23 @@ const uiSlice = createSlice({
       state.theme = action.payload;
     },
     showModal: (state, action: PayloadAction<string>) => {
-      console.log('[UI Slice] Showing modal:', action.payload);
+      console.log('[UI Slice] Showing modal:', {
+        modalType: action.payload,
+        previousState: {
+          modalOpen: state.modalOpen,
+          modalType: state.modalType
+        }
+      });
       state.modalOpen = true;
       state.modalType = action.payload;
     },
     hideModal: (state) => {
-      console.log('[UI Slice] Hiding modal');
+      console.log('[UI Slice] Hiding modal', {
+        previousState: {
+          modalOpen: state.modalOpen,
+          modalType: state.modalType
+        }
+      });
       state.modalOpen = false;
       state.modalType = null;
     },
diff --git a/webapp/chat-app/src/themes/themes.ts (Additional changes for theme objects) b/webapp/chat-app/src/themes/themes.ts (Additional changes for theme objects)
deleted file mode 100644
index 6f068390..00000000
--- a/webapp/chat-app/src/themes/themes.ts (Additional changes for theme objects)	
+++ /dev/null
@@ -1,36 +0,0 @@
-export const mainTheme: ExtendedTheme = {
-   name: 'main',
-   colors: {
-     primary: '#007AFF',
-     secondary: '#5856D6',
-     background: '#FFFFFF',
-     surface: '#F2F2F7',
-     text: {
-       primary: '#000000',
-       secondary: '#6E6E73',
-     },
-     border: '#C6C6C8',
-     error: '#FF3B30',
-     success: '#34C759',
-     warning: '#FF9500',
-     info: '#5856D6',
-+    console: {
-+      background: '#F8F8F8',
-+      text: '#2C2C2E',
-+      error: '#FF3B30',
-+      warning: '#FF9500',
-+      success: '#34C759',
-+      info: '#007AFF',
-+      debug: '#5856D6',
-+    },
-   },
-   ...baseTheme,
-+  typography: {
-+    ...baseTheme.typography,
-+    console: {
-+      fontFamily: 'Monaco, Consolas, monospace',
-+      fontSize: '0.9rem',
-+      lineHeight: '1.4',
-+    },
-+  },
- };
\ No newline at end of file