diff --git a/docker-compose.yaml b/docker-compose.yaml
index 7008b53d..290345ab 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,15 +1,6 @@
 version: "3.9"
 
 services:
-  frontend:
-    build: ./frontend
-    environment:
-      - VITE_API_HOST=http://localhost:7091
-      - VITE_API_STREAMING=$VITE_API_STREAMING
-    ports:
-      - "5173:5173"
-    depends_on:
-      - backend
 
   backend:
     build: ./application
diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx
index 65756bea..c1a2a153 100644
--- a/frontend/src/Setting.tsx
+++ b/frontend/src/Setting.tsx
@@ -10,7 +10,6 @@ import {
   selectSourceDocs,
 } from './preferences/preferenceSlice';
 import { Doc } from './preferences/preferenceApi';
-
 type PromptProps = {
   prompts: { name: string; id: string; type: string }[];
   selectedPrompt: { name: string; id: string; type: string };
@@ -97,7 +96,7 @@ const Setting: React.FC = () => {
   };
 
   return (
-    <div className="p-4 pt-20 md:p-12">
+    <div className="p-4 pt-20 md:p-12 ">
       <p className="text-2xl font-bold text-eerie-black">Settings</p>
       <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
         <div className="md:hidden">
@@ -113,11 +112,10 @@ const Setting: React.FC = () => {
             <button
               key={index}
               onClick={() => setActiveTab(tab)}
-              className={`h-9 rounded-3xl px-4 font-bold ${
-                activeTab === tab
+              className={`h-9 rounded-3xl px-4 font-bold ${activeTab === tab
                   ? 'bg-purple-3000 text-purple-30'
                   : 'text-gray-6000'
-              }`}
+                }`}
             >
               {tab}
             </button>
@@ -187,11 +185,20 @@ const Setting: React.FC = () => {
 };
 
 const General: React.FC = () => {
-  const themes = ['Light'];
+  const themes = ['Light', 'Dark'];
   const languages = ['English'];
-  const [selectedTheme, setSelectedTheme] = useState(themes[0]);
+  const [selectedTheme, setSelectedTheme] = useState(localStorage.getItem('selectedTheme') || themes[0]);
   const [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
 
+  useEffect(() => {
+    if (selectedTheme === 'Dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('selectedTheme', selectedTheme);
+  }, [selectedTheme]);
+
   return (
     <div className="mt-[59px]">
       <div className="mb-4">
@@ -380,33 +387,30 @@ const Prompts: React.FC<PromptProps> = ({
 
       <div className="flex justify-between">
         <button
-          className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${
-            newPromptName === selectedPrompt.name
+          className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${newPromptName === selectedPrompt.name
               ? 'cursor-not-allowed opacity-50'
               : ''
-          }`}
+            }`}
           onClick={handleAddPrompt}
           disabled={newPromptName === selectedPrompt.name}
         >
           Add New Prompt
         </button>
         <button
-          className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${
-            selectedPrompt.type === 'public'
+          className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${selectedPrompt.type === 'public'
               ? 'cursor-not-allowed opacity-50'
               : ''
-          }`}
+            }`}
           onClick={handleDeletePrompt}
           disabled={selectedPrompt.type === 'public'}
         >
           Delete Prompt
         </button>
         <button
-          className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${
-            selectedPrompt.type === 'public'
+          className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${selectedPrompt.type === 'public'
               ? 'cursor-not-allowed opacity-50'
               : ''
-          }`}
+            }`}
           onClick={handleSaveChanges}
           disabled={selectedPrompt.type === 'public'}
         >
@@ -440,9 +444,8 @@ function DropdownPrompt({
         <img
           src={Arrow2}
           alt="arrow"
-          className={`transform ${
-            isOpen ? 'rotate-180' : 'rotate-0'
-          } h-3 w-3 transition-transform`}
+          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
+            } h-3 w-3 transition-transform`}
         />
       </button>
       {isOpen && (
@@ -496,9 +499,8 @@ function Dropdown({
         <img
           src={Arrow2}
           alt="arrow"
-          className={`transform ${
-            isOpen ? 'rotate-180' : 'rotate-0'
-          } h-3 w-3 transition-transform`}
+          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
+            } h-3 w-3 transition-transform`}
         />
       </button>
       {isOpen && (
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index ea40ed10..504b7e41 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -35,6 +35,7 @@ module.exports = {
         'dove-gray': '#6c6c6c',
         silver: '#c4c4c4',
         'rainy-gray': '#a4a4a4',
+        'dark-bg':'#222327'
       },
     },
   },