diff --git a/src/App.tsx b/src/App.tsx
index f1b0165..545e47e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,10 +4,12 @@ import Header from "./components/Header";
 import Main from "./components/Main/Main";
 import Settings from "./components/Settings";
 import { RootState } from "./redux/store";
+import { POMODORO, SHORT_BREAK } from "./constant";
 function App() {
-  const { settingsopen ,modes,mode} = useSelector((state: RootState) => state.timer);
+  const { settingsopen ,mode} = useSelector((state: RootState) => state.timer);
+  const background= mode == POMODORO ? 'bg-pomodoro' : mode== SHORT_BREAK ? 'bg-shortbreak' : 'bg-longbreak'
   return (
-    <div className={`${settingsopen ? 'bg-opacity-75': ''} w-full h-screen flex justify-center  bg-[${modes[mode].color}] transition-colors`}>
+    <div className={`${settingsopen ? 'bg-opacity-75': ''} w-full h-screen flex justify-center  ${background} transition-colors`}>
       <div className={`${settingsopen ? 'bg-opacity-25': ''}  h-screen p-4 w-full sm:max-w-2xl`}>
         <Header />
         <Main />
diff --git a/src/hooks/useCountdown.ts b/src/hooks/useCountdown.ts
index e916287..9f92572 100644
--- a/src/hooks/useCountdown.ts
+++ b/src/hooks/useCountdown.ts
@@ -64,6 +64,6 @@ console.log(timeLeft);
     reset,
     ticking,
     timeLeft,
-    progress: (progress / time) * 100,
+    progress: (progress / time) * 100000,
   };
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 3c31f7d..8cb3cfa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,10 @@ export default {
         bgbutton:'#ffffff33',
         loaderbg:'#0000001a',
         modebackground:'#00000026',
-        settingscolor:'#EFEFEF'
+        settingscolor:'#EFEFEF',
+        pomodoro:'#FCA5A5',
+        shortbreak:'#397097',
+        longbreak:'#518A58'
       }
     },
   },