diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css
index 937c106..8fa71dc 100644
--- a/public/css_styles/styles.css
+++ b/public/css_styles/styles.css
@@ -569,6 +569,33 @@
   color: #ffffff;
 }
 
+.clockify-tasks-display {
+  width: 20vw;
+  position: absolute;
+  top: 60vh;
+  left: 2.5vw;
+}
+.clockify-tasks-display.loading-container {
+  width: 20vw;
+  height: auto;
+}
+.clockify-tasks-display.disabled {
+  user-select: none;
+  cursor: initial;
+  pointer-events: none;
+  opacity: 30%;
+}
+.clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector {
+  width: 15vw;
+  height: 3vw;
+}
+.clockify-tasks-display .workspace-selector.disabled, .clockify-tasks-display .project-selector.disabled {
+  user-select: none;
+  cursor: initial;
+  pointer-events: none;
+  opacity: 30%;
+}
+
 html, body {
   margin: 0;
   padding: 0;
diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map
index c0e2d2e..e05045f 100644
--- a/public/css_styles/styles.css.map
+++ b/public/css_styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss"],"names":[],"mappings":"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","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"AACA;EACI,kBCsCS;EDpCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAOZ;EACI;;;ACpDJ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFuBO;;AEpBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFOG;EENH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFHG;EEKH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFlBO;EEmBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHuBO;EGtBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHVL;EGWK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH7CE;;;AGsDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN0BU;;AMxBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPED;EODC,kBPGF;;;AQ3Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRwBD;EQtBC;EAEA;;AAEA;ERpBZ;EACA;EAQA;EACA;EACA;EQagB;;AAIR;EACI;EACA,kBRSM;;AQLd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;AClEpB;EAEI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBT6BS;ES5BT;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EAEA,kBTKS;;ASFb;EACI;;;ACzCJ;EACI;EAEA;;AAEA;EVJJ;EACA;EAQA;EACA;EACA;EUHQ;EACA;;AAIR;EACI;;AAEA;EAAI;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA,kBVOE;;AULF;EV1BR;EACA;EACA;EAXA;EACA;EUuCY,OVFD;EUIC;;AAIR;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAEA;EACI;EACA,kBV1CC;EU4CD;EACA;EAEA;EAEA;;AAKI;EVtFhB;EACA;EACA;EAXA;EACA;;AUmGgB;EACI;;AAIR;EACI;EACA;EAEA;EAEA;EACA;EAEA;;;AAOpB;EACI;EACA;EAEA;EACA;EACA;;;AClIJ;EAEI;EACA;EAEA;EAEA;EAEA,kBXgCW;EW9BX;EACA;EACA;EAEA;;AAEA;EXdA;EACA;EWgBI;EACA;EAEA;;;AAIR;EACI;EACA;EAEA;EAEA;EAEA,kBXMW;EWJX;EACA;EACA;EAEA;;AAEA;EXxCA;EACA;EW0CI;EAEA;EAEA;;;AClDR;EAEI;EACA;EAEA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AZqCZ;EACI;EACA;;;AAGJ;EACI;EACA,kBAnCe","file":"styles.css"}
\ No newline at end of file
diff --git a/public/sass_styles/_clockify-tasks-display.scss b/public/sass_styles/_clockify-tasks-display.scss
new file mode 100644
index 0000000..bfba6a5
--- /dev/null
+++ b/public/sass_styles/_clockify-tasks-display.scss
@@ -0,0 +1,32 @@
+.clockify-tasks-display {
+
+    width: 20vw;
+    position: absolute;
+
+    top: 60vh;
+    left: 2.5vw;
+
+    &.loading-container {
+        width: 20vw;
+        height: auto;
+    }
+
+    &.disabled {
+        user-select: none;
+        cursor: initial;
+        pointer-events: none;
+        opacity: 30%;
+    }
+    
+    .workspace-selector, .project-selector {
+        width: 15vw;
+        height: 3vw;
+
+        &.disabled {
+            user-select: none;
+            cursor: initial;
+            pointer-events: none;
+            opacity: 30%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss
index a6fffcc..7797242 100644
--- a/public/sass_styles/styles.scss
+++ b/public/sass_styles/styles.scss
@@ -61,6 +61,7 @@ $lightest-color-dark: #EEEEEE;
 @import 'dark-mode_toogle-switch';
 @import 'account';
 @import 'goToAccount';
+@import 'clockify-tasks-display';
 
 html, body { 
     margin: 0;
diff --git a/src/App.js b/src/App.js
index 1b16f5b..2a0cf31 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,6 +22,8 @@ import ClockifyTasksDisplay from './components/ClockifyTasksDisplay';
 
 function App() {
 
+  const [timerOn, setTimerOn] = useState(false)
+
   const [signIn, setSignIn] = useState('')
 
   const auth = getAuth()
@@ -59,9 +61,12 @@ function App() {
             />
             <MainPomodoro 
               signIn={signIn}
+              timerOn={timerOn}
+              setTimerOn={setTimerOn}
             />
             <ClockifyTasksDisplay
               signIn={signIn}
+              timerOn={timerOn}
             />
             <GoDownArrow />
             <AboutThis />
diff --git a/src/components/ClockifyTasksDisplay.jsx b/src/components/ClockifyTasksDisplay.jsx
index 5296ce2..e5c4af4 100644
--- a/src/components/ClockifyTasksDisplay.jsx
+++ b/src/components/ClockifyTasksDisplay.jsx
@@ -3,7 +3,7 @@ import React, {useState} from 'react'
 import { firebase } from './Firebase/firebase';
 import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
-
+import loadingGif from './img/loading.gif'
 
 const ClockifyTasksDisplay = (props) => {
     
@@ -18,6 +18,11 @@ const ClockifyTasksDisplay = (props) => {
     const [projects, setProjects] = useState([])
     const [projectsDone, setProjectsDone] = useState(false)
 
+    const [workspaceID, setWorspaceID] = useState(0)
+    const [projectID, setProjectID] = useState(0)
+
+    const [loading, setLoading] = useState(true)
+
     const getApiKey = async () => {
 
         try {
@@ -85,6 +90,7 @@ const ClockifyTasksDisplay = (props) => {
             await setWorkspaces(workspacesCopy)
     
             setWorkspacesReady(true)
+            setLoading(false)
         }
         
         console.log(workspaces)
@@ -127,8 +133,6 @@ const ClockifyTasksDisplay = (props) => {
             const data = await response.json()
 
             console.log(data)
-            
-            setProjectsDone(true)
 
             return await data
     
@@ -139,6 +143,16 @@ const ClockifyTasksDisplay = (props) => {
 
     const defineProjects = async (e) => {
 
+        if (e === 0) {
+            setProjectsDone(false)
+            setProjects([])
+
+        } else {
+            setProjectsDone(true)
+        }
+        
+        setWorspaceID(e)
+
         const data = await makeRequestProjects(e)
 
         await setProjects(data)
@@ -151,11 +165,18 @@ const ClockifyTasksDisplay = (props) => {
         
     }
 
+    if (loading) {
+        return (
+            <div className="clockify-tasks-display loading-container">
+                <img src={loadingGif} alt=""/>
+            </div>
+        )
+    }
 
 
     return (
-        <div>
-            <select onChange={(e) => {defineProjects(e.target.value)}}>
+        <div className={props.timerOn ? 'clockify-tasks-display disabled' : 'clockify-tasks-display'}>
+            <select onChange={(e) => {defineProjects(e.target.value)}} className='workspace-selector'>
                 <option value="0">Select a Workspace</option>
                 {
                     workspacesReady ? 
@@ -165,9 +186,9 @@ const ClockifyTasksDisplay = (props) => {
                     : null
                 }
             </select>
-            <select>
+            <select className={workspaceID !== 0 ? 'project-selector' : 'project-selector disabled'}>
                 {
-                    projectsDone ?
+                    projectsDone && projects !== undefined ?
                         projects.map( (project) => {
 
                             if (!project.archived){
@@ -175,7 +196,7 @@ const ClockifyTasksDisplay = (props) => {
 
                             }
                         })
-                    :null
+                    : null
                 }
             </select>
         </div>
diff --git a/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx b/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx
index 48fb3b8..d6d4096 100644
--- a/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx	
+++ b/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx	
@@ -2,8 +2,8 @@ import React, {useState} from 'react'
 
 const MainPomodoroTimer = (props) => {
 
-    const [minutes, setMinutes] = useState('25')
-    const [seconds, setSeconds] = useState('0')
+    const [minutes, setMinutes] = useState(25)
+    const [seconds, setSeconds] = useState(0)
 
     const [breakTime, setBreakTime] = useState(undefined)
     const [weAreInBreakTime, setWeAreInBreakTime] = useState(false)
@@ -144,12 +144,12 @@ const MainPomodoroTimer = (props) => {
             if (seconds === 0) {
 
                 setSeconds(59) 
-                setMinutes((minutes - 1))
+                setMinutes(minutes - 1)
 
             }
             
             else {
-                setSeconds((seconds - 1))
+                setSeconds(seconds - 1)
             }
 
         }, (1000 / velocity))
diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx
index 04dedec..f6a69e0 100644
--- a/src/components/MainPomodoro.jsx
+++ b/src/components/MainPomodoro.jsx
@@ -11,7 +11,6 @@ const MainPomodoro = (props) => {
 
     const [style, setStyle] = useState('Regular')
     const [displayHidden, setDisplayHidden] = useState(true)
-    const [timerOn, setTimerOn] = useState(false)
 
     const [pomodoros, setPomodoros] = useState(0)
     const [rests, setRests] = useState(0)
@@ -31,8 +30,8 @@ const MainPomodoro = (props) => {
                 
                 style={style}
 
-                timerOn={timerOn}
-                setTimerOn={setTimerOn}
+                timerOn={props.timerOn}
+                setTimerOn={props.setTimerOn}
                 
                 pomodoros={pomodoros}
                 setPomodoros={setPomodoros}
@@ -54,8 +53,8 @@ const MainPomodoro = (props) => {
                     </h3>
                 </div>
 
-                <button class="start-pomodoro" onClick={() => setTimerOn(!timerOn)}>{
-                    timerOn ? 'STOP' : 'START'
+                <button class="start-pomodoro" onClick={() => props.setTimerOn(!props.timerOn)}>{
+                    props.timerOn ? 'STOP' : 'START'
 
                 }</button>
             </div>