diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index 12e4547..797d68a 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -1901,6 +1901,8 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
             onRename={(oldPath, newName, newPath) => {
               setEditingFile(prev => prev ? { ...prev, name: newName, path: newPath } : null);
             }}
+            theme={theme as 'light' | 'dark'}
+            toggleTheme={toggleTheme}
           />
         ) : (appMode === 'docs' || appMode === 'slides') && activeSection === 'files' ? (
           <OfficeHome 
diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index 9e23ab3..9b72f41 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -268,12 +268,12 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
                 <Plus className="w-12 h-12 text-gray-300 group-hover:text-blue-500 transition-colors" />
               </button>
               <span className="text-sm font-medium" style={{ color: 'var(--color-text-primary)' }}>Blank</span>
+            </div>
           </div>
         </div>
       </div>
 
 
-
       {/* Recent Documents */}
       <div className="py-8 px-10">
         <div className="max-w-6xl mx-auto">
diff --git a/frontend/src/components/OnlyOfficeEditor.tsx b/frontend/src/components/OnlyOfficeEditor.tsx
index ac6c10e..3dbf295 100644
--- a/frontend/src/components/OnlyOfficeEditor.tsx
+++ b/frontend/src/components/OnlyOfficeEditor.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { DocumentEditor } from '@onlyoffice/document-editor-react';
+import { Sun, Moon } from 'lucide-react';
 import api from '@/lib/api';
 
 interface FileItem {
@@ -18,9 +19,11 @@ interface OnlyOfficeEditorProps {
   type: 'word' | 'cell' | 'slide';
   onClose: () => void;
   onRename?: (oldPath: string, newName: string, newPath: string) => void;
+  theme: 'light' | 'dark';
+  toggleTheme: () => void;
 }
 
-export default function OnlyOfficeEditor({ file, type, onClose, onRename }: OnlyOfficeEditorProps) {
+export default function OnlyOfficeEditor({ file, type, onClose, onRename, theme, toggleTheme }: OnlyOfficeEditorProps) {
   const [downloadToken, setDownloadToken] = useState<string | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [config, setConfig] = useState<any>(null);
@@ -103,6 +106,7 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
         mode: 'edit',
         customization: {
           forcesave: true,
+          uiTheme: theme === 'dark' ? 'id-dark' : 'id-light',
           goback: {
             url: '', 
           }
@@ -123,13 +127,13 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
         setConfig(baseConfig);
       });
 
-  }, [downloadToken, file, type]);
+  }, [downloadToken, file, type, theme]);
 
   if (!config) {
     return (
       <div className="flex-1 flex flex-col items-center justify-center" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
         <div className="text-sm" style={{ color: 'var(--color-text-tertiary)' }}>Loading Editor...</div>
-        {loadError && <div className="mt-4 text-red-500 font-medium">Error: {loadError}</div>}
+        {loadError && <div className="mt-4 text-red-500 dark:text-red-400 font-medium">Error: {loadError}</div>}
       </div>
     );
   }
@@ -146,8 +150,8 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
   };
 
   return (
-    <div className="flex-1 w-full h-full flex flex-col" style={{ backgroundColor: '#fff' }}>
-      <div className="flex items-center justify-between px-4 py-2 bg-gray-100 border-b border-gray-200">
+    <div className="flex-1 w-full h-full flex flex-col" style={{ backgroundColor: 'var(--color-bg-primary, #fff)' }}>
+      <div className="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-[#1e1e1e] border-b border-gray-200 dark:border-white/10 transition-colors">
         {isRenaming ? (
           <input
             ref={renameInputRef}
@@ -158,7 +162,7 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
               if (e.key === 'Enter') handleRename();
               if (e.key === 'Escape') { setRenameValue(baseName); setIsRenaming(false); }
             }}
-            className="font-medium text-sm text-gray-700 bg-white border border-blue-400 rounded px-2 py-0.5 outline-none w-1/3 min-w-[300px] max-w-[600px]"
+            className="font-medium text-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-[#2d2d2d] border border-blue-400 dark:border-blue-500 rounded px-2 py-0.5 outline-none w-1/3 min-w-[300px] max-w-[600px]"
             autoFocus
           />
         ) : (
@@ -173,18 +177,28 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename }: Only
                 }
               }, 50);
             }}
-            className="font-medium text-sm text-gray-700 hover:text-blue-600 hover:underline cursor-pointer transition-colors truncate max-w-[500px]"
+            className="font-medium text-sm text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline cursor-pointer transition-colors truncate max-w-[500px]"
             title="Click to rename"
           >
             {baseName}
           </button>
         )}
-        <button 
-          onClick={onClose}
-          className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded text-sm transition-colors"
-        >
-          Close Document
-        </button>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={toggleTheme}
+            className="p-1.5 rounded-lg transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+            style={{ color: 'var(--color-text-secondary)' }}
+            title={theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+          >
+            {theme === 'dark' ? <Sun className="w-4.5 h-4.5" /> : <Moon className="w-4.5 h-4.5" />}
+          </button>
+          <button 
+            onClick={onClose}
+            className="px-3 py-1 bg-gray-200 dark:bg-white/10 hover:bg-gray-300 dark:hover:bg-white/20 text-gray-700 dark:text-gray-200 rounded text-sm transition-colors"
+          >
+            Close Document
+          </button>
+        </div>
       </div>
       <div className="flex-1 relative">
         {loadError ? (