diff --git a/frontend/src/ui/App.tsx b/frontend/src/ui/App.tsx
index 8943814..a8f9f37 100644
--- a/frontend/src/ui/App.tsx
+++ b/frontend/src/ui/App.tsx
@@ -3,7 +3,6 @@ import ChatScreen from "./screen/ChatScreen";
 import LoginScreen from "./screen/LoginScreen";
 import RegisterScreen from "./screen/RegisterScreen";
 import { useAppState } from "./state";
-import { DialogProvider } from "./contexts/DialogContext";
 import { useEffect } from "react";
 
 export default function App() {
@@ -32,11 +31,11 @@ export default function App() {
     }
 
     return (
-        <DialogProvider>
+        <>
             <ElectronTitleBar />
             <div id="main-wrapper">
                 {page}
             </div>
-        </DialogProvider>
+        </>
     )
 }
\ No newline at end of file
diff --git a/frontend/src/ui/components/chat/ChatHeader.tsx b/frontend/src/ui/components/chat/ChatHeader.tsx
index 7c9fdfd..4f1c236 100644
--- a/frontend/src/ui/components/chat/ChatHeader.tsx
+++ b/frontend/src/ui/components/chat/ChatHeader.tsx
@@ -1,34 +1,38 @@
 import { PRODUCT_NAME } from "../../../core/config";
-import { useDialog } from "../../contexts/DialogContext";
 import { useProfile } from "../../hooks/useProfile";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
+import { useState } from "react";
+import { ProfileDialog } from "../profile/ProfileDialog";
 
 export function ChatHeader() {
-    const { openProfile } = useDialog();
     const { profileData } = useProfile();
+    const [isProfileOpen, setIsProfileOpen] = useState(false);
 
     const handleProfileClick = () => {
-        openProfile();
+        setIsProfileOpen(true);
     };
 
     const profilePictureUrl = profileData?.profile_picture || defaultAvatar;
 
     return (
-        <header className="chat-header-left">
-            <div className="product-name">{PRODUCT_NAME}</div>
-            <div className="profile">
-                <a href="#" id="profile-open" onClick={handleProfileClick}>
-                    <img 
-                        src={profilePictureUrl} 
-                        alt="" 
-                        id="preview1"
-                        onError={(e) => {
-                            const target = e.target as HTMLImageElement;
-                            target.src = defaultAvatar;
-                        }}
-                    />
-                </a>
-            </div>
-        </header>
+        <>
+            <header className="chat-header-left">
+                <div className="product-name">{PRODUCT_NAME}</div>
+                <div className="profile">
+                    <a href="#" id="profile-open" onClick={handleProfileClick}>
+                        <img 
+                            src={profilePictureUrl} 
+                            alt="" 
+                            id="preview1"
+                            onError={(e) => {
+                                const target = e.target as HTMLImageElement;
+                                target.src = defaultAvatar;
+                            }}
+                        />
+                    </a>
+                </div>
+            </header>
+            <ProfileDialog isOpen={isProfileOpen} onOpenChange={setIsProfileOpen} />
+        </>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/ui/contexts/DialogContext.tsx b/frontend/src/ui/contexts/DialogContext.tsx
deleted file mode 100644
index e7c61e9..0000000
--- a/frontend/src/ui/contexts/DialogContext.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { createContext, useContext, useState } from "react";
-import type { ReactNode } from "react";
-
-interface DialogContextType {
-    isProfileOpen: boolean;
-    isSettingsOpen: boolean;
-    openProfile: () => void;
-    closeProfile: () => void;
-    openSettings: () => void;
-    closeSettings: () => void;
-}
-
-const DialogContext = createContext<DialogContextType | undefined>(undefined);
-
-export function DialogProvider({ children }: { children: ReactNode }) {
-    const [isProfileOpen, setIsProfileOpen] = useState(false);
-    const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-
-    const openProfile = () => setIsProfileOpen(true);
-    const closeProfile = () => setIsProfileOpen(false);
-    const openSettings = () => setIsSettingsOpen(true);
-    const closeSettings = () => setIsSettingsOpen(false);
-
-    return (
-        <DialogContext.Provider value={{
-            isProfileOpen,
-            isSettingsOpen,
-            openProfile,
-            closeProfile,
-            openSettings,
-            closeSettings
-        }}>
-            {children}
-        </DialogContext.Provider>
-    );
-}
-
-export function useDialog() {
-    const context = useContext(DialogContext);
-    if (context === undefined) {
-        throw new Error("useDialog must be used within a DialogProvider");
-    }
-    return context;
-}