diff --git a/src/components/Loading/Loading.jsx b/src/components/Loading/Loading.jsx
index 4e61a6a..5cfacb1 100644
--- a/src/components/Loading/Loading.jsx
+++ b/src/components/Loading/Loading.jsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import loadingImage from './img/loading-light-theme.png'
 
-const Loading = () => {
+const Loading = ({width, height}) => {
     return (
         <>
-            <div className="loading-container">
+            <div className="loading-container" style={{width: width, height: height}}>
                 <img src={loadingImage} alt="loading"/>
             </div>
         </>
diff --git a/src/components/Loading/loading-styles.css b/src/components/Loading/loading-styles.css
index a2d1a85..e658133 100644
--- a/src/components/Loading/loading-styles.css
+++ b/src/components/Loading/loading-styles.css
@@ -1,5 +1,5 @@
 .loading-container {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: unset;
   background-color: #fff;
 }/*# sourceMappingURL=loading-styles.css.map */
\ No newline at end of file
diff --git a/src/components/Loading/loading-styles.css.map b/src/components/Loading/loading-styles.css.map
index 657fd99..7cfc797 100644
--- a/src/components/Loading/loading-styles.css.map
+++ b/src/components/Loading/loading-styles.css.map
@@ -1 +1 @@
-{"version":3,"sources":["loading-styles.scss","loading-styles.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,YAAA;EAEA,sBAAA;ACAJ","file":"loading-styles.css"}
\ No newline at end of file
+{"version":3,"sources":["loading-styles.scss","loading-styles.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,aAAA;EAEA,sBAAA;ACAJ","file":"loading-styles.css"}
\ No newline at end of file
diff --git a/src/components/Loading/loading-styles.scss b/src/components/Loading/loading-styles.scss
index 2f44f38..25ed1ca 100644
--- a/src/components/Loading/loading-styles.scss
+++ b/src/components/Loading/loading-styles.scss
@@ -1,6 +1,6 @@
 .loading-container {
-    width: 100%;
-    height: 100%;
+    width: auto;
+    height: unset;
 
     background-color: #fff;
 }
\ No newline at end of file
diff --git a/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx b/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx
index 23c3402..b8a93f8 100644
--- a/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx
+++ b/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx
@@ -54,15 +54,15 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
                 if (user && user.uid) {
 
                     await getApiKey(user.uid)
-                    setLoading(false)
                     
                 } else {
-                    return (<></>)
+                    return(<></>)
                 }
+                setLoading(false)
 
             })
         } else {
-            setLoading(false)
+            
         }
         
     }, [signedIn])
@@ -178,118 +178,115 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
     }
 
     return (
-        <>
+        <div className='clockify-tasks-display-container'>
             {
-                loading ?
-                    <Loading />
-                :
-                <div className={darkMode ? 'clockify-task-form-container dark-mode-container' : 'clockify-tasks-display-container'}>
-                    {
-                        clockifyData.workspaces ?
-                            <div className={`clockify-task-form ${(timerOn || !clockifyData.workspaces) && "disabled"}`}>
-                                
-                                <select
-                                    onChange={(e) => {
-                                        changeClockifyData({workspaceID: e.target.value})
-                                        getProjects(e.target.value)
-                                    }}
-                                    className='workspace-selector'
-                                >
-                                    <option value="0">Select a Workspace</option>
-                                    {
-                                        clockifyData.workspaces &&
-                                            clockifyData.workspaces.map((workspace) => {
-                                                return <option value={workspace.id} key={workspace.id}>{workspace.name}</option>
-                                            })
-                                    }
-                                </select>
+                loading &&
+                    <Loading width={"20vw"} height={"initial"}/>
+            }
+            {
+                clockifyData.workspaces ?
+                    <div className={`clockify-task-form ${(timerOn || !clockifyData.workspaces) && "disabled"}`}>
+                        
+                        <select
+                            onChange={(e) => {
+                                changeClockifyData({workspaceID: e.target.value})
+                                getProjects(e.target.value)
+                            }}
+                            className='workspace-selector'
+                        >
+                            <option value="0">Select a Workspace</option>
+                            {
+                                clockifyData.workspaces &&
+                                    clockifyData.workspaces.map((workspace) => {
+                                        return <option value={workspace.id} key={workspace.id}>{workspace.name}</option>
+                                    })
+                            }
+                        </select>
 
-                                <select
-                                    onChange={(e) => {
-                                        changeClockifyData({projectID: e.target.value})
-                                        getTasks(e.target.value)
-                                    }}
-                                    className={`project-selector ${(!clockifyData.workspaceID) && 'disabled'}`}
-                                >
-                                    <option value="0">Select a Project</option>
-                                    {
-                                        clockifyData.projects &&
-                                            clockifyData.projects.map((project) => (
-                                                !project.archived ?
-                                                    <option value={project.id} key={project.id} style={{color: project.color}}>{project.name}</option>
-                                                : null
-                                            ))
-                                    }
-                                </select>
+                        <select
+                            onChange={(e) => {
+                                changeClockifyData({projectID: e.target.value})
+                                getTasks(e.target.value)
+                            }}
+                            className={`project-selector ${(!clockifyData.workspaceID) && 'disabled'}`}
+                        >
+                            <option value="0">Select a Project</option>
+                            {
+                                clockifyData.projects &&
+                                    clockifyData.projects.map((project) => (
+                                        !project.archived ?
+                                            <option value={project.id} key={project.id} style={{color: project.color}}>{project.name}</option>
+                                        : null
+                                    ))
+                            }
+                        </select>
 
-                                <select
-                                    onChange={(e) => changeClockifyData({taskID: e.target.value})}
-                                    className={`project-selector ${(!clockifyData.projectID || (clockifyData.tasks && clockifyData.tasks.length === 0)) && 'disabled'}`}
-                                >
-                                    <option value="0">Select a Task</option>
-                                    {
-                                        clockifyData.tasks &&
-                                            clockifyData.tasks.map((task) => (
-                                                task.status !== "DONE" &&
-                                                    <option value={task.id} key={task.id} >{task.name}</option>
-                                            ))
-                                    }
-                                </select>
-                                <button
-                                    className={`add-task ${!clockifyData.projectID && 'disabled'}`}
-                                    onClick={() => {
+                        <select
+                            onChange={(e) => changeClockifyData({taskID: e.target.value})}
+                            className={`project-selector ${(!clockifyData.projectID || (clockifyData.tasks && clockifyData.tasks.length === 0)) && 'disabled'}`}
+                        >
+                            <option value="0">Select a Task</option>
+                            {
+                                clockifyData.tasks &&
+                                    clockifyData.tasks.map((task) => (
+                                        task.status !== "DONE" &&
+                                            <option value={task.id} key={task.id} >{task.name}</option>
+                                    ))
+                            }
+                        </select>
+                        <button
+                            className={`add-task ${!clockifyData.projectID && 'disabled'}`}
+                            onClick={() => {
 
-                                        if (addingNewTask === "loading") {
-                                            return
-                                        }
-
-                                        if (!addingNewTask) {
-                                            setAddingNewTask(true)
-                                            return
-                                        } else {
-                                            addNewTask()
-                                        }
-                                    }}
-                                >
-                                    {
-                                        addingNewTask === false ?
-                                            <FontAwesomeIcon icon={faPlus} />
-                                        : addingNewTask === true ?
-                                            <FontAwesomeIcon icon={faCheck} />
-                                        : addingNewTask === "loading" &&
-                                            <Ring size={20} color="#fff" />
-                                    }
-
-                                </button>
-                                <>
-                                {
-                                    addingNewTask &&
-                                        <input
-                                            type="text"
-                                            ref={newTask}
-                                            placeholder="Set new task name"
-                                        />
+                                if (addingNewTask === "loading") {
+                                    return
                                 }
-                                </>
 
+                                if (!addingNewTask) {
+                                    setAddingNewTask(true)
+                                    return
+                                } else {
+                                    addNewTask()
+                                }
+                            }}
+                        >
+                            {
+                                addingNewTask === false ?
+                                    <FontAwesomeIcon icon={faPlus} />
+                                : addingNewTask === true ?
+                                    <FontAwesomeIcon icon={faCheck} />
+                                : addingNewTask === "loading" &&
+                                    <Ring size={20} color="#fff" />
+                            }
+
+                        </button>
+                        <>
+                        {
+                            addingNewTask &&
                                 <input
                                     type="text"
-                                    ref={descriptionInput}
-                                    onChange={(e) => changeClockifyData({description: e.target.value})}
-                                    placeholder="Add task description"
-                                    className={!clockifyData.projectID && 'disabled'}
-                                    onKeyPress={event => {
-                                        if (event.key === 'Enter') {
-                                            setTimerOn(true)
-                                        }
-                                    }}
+                                    ref={newTask}
+                                    placeholder="Set new task name"
                                 />
-                            </div>
-                        : null
-                    }
-                </div>
+                        }
+                        </>
+
+                        <input
+                            type="text"
+                            ref={descriptionInput}
+                            onChange={(e) => changeClockifyData({description: e.target.value})}
+                            placeholder="Add task description"
+                            className={!clockifyData.projectID && 'disabled'}
+                            onKeyPress={event => {
+                                if (event.key === 'Enter') {
+                                    setTimerOn(true)
+                                }
+                            }}
+                        />
+                    </div>
+                : null
             }
-        </>   
+        </div> 
     )
 }
 
diff --git a/src/pages/Main/ClockifyTaskForm/clockify-task-form.css b/src/pages/Main/ClockifyTaskForm/clockify-task-form.css
index ad621a9..9618401 100644
--- a/src/pages/Main/ClockifyTaskForm/clockify-task-form.css
+++ b/src/pages/Main/ClockifyTaskForm/clockify-task-form.css
@@ -1,28 +1,28 @@
-.clockify-task-form {
+.clockify-tasks-display-container {
   width: 20vw;
   position: absolute;
   top: 60vh;
   left: 2.5vw;
 }
-.clockify-task-form input::-moz-placeholder {
+.clockify-tasks-display-container .clockify-task-form input::-moz-placeholder {
   font-family: "Arial", sans-serif;
 }
-.clockify-task-form input:-ms-input-placeholder {
+.clockify-tasks-display-container .clockify-task-form input:-ms-input-placeholder {
   font-family: "Arial", sans-serif;
 }
-.clockify-task-form select, .clockify-task-form select option, .clockify-task-form input, .clockify-task-form input::placeholder {
+.clockify-tasks-display-container .clockify-task-form select, .clockify-tasks-display-container .clockify-task-form select option, .clockify-tasks-display-container .clockify-task-form input, .clockify-tasks-display-container .clockify-task-form input::placeholder {
   font-family: "Arial", sans-serif;
 }
-.clockify-task-form.loading-container {
+.clockify-tasks-display-container .clockify-task-form.loading-container {
   width: 20vw;
   height: auto;
   background: none;
 }
-.clockify-task-form .workspace-selector, .clockify-task-form .project-selector {
+.clockify-tasks-display-container .clockify-task-form .workspace-selector, .clockify-tasks-display-container .clockify-task-form .project-selector {
   width: 15vw;
   height: 5vh;
 }
-.clockify-task-form .add-task {
+.clockify-tasks-display-container .clockify-task-form .add-task {
   width: 3.5vh;
   height: 3.5vh;
   margin-left: 0.5vh;
@@ -32,18 +32,18 @@
   color: #fff;
   cursor: pointer;
 }
-.clockify-task-form .add-task:hover {
+.clockify-tasks-display-container .clockify-task-form .add-task:hover {
   filter: brightness(90%);
 }
-.clockify-task-form .add-task:active {
+.clockify-tasks-display-container .clockify-task-form .add-task:active {
   filter: brightness(110%);
 }
-.clockify-task-form select {
+.clockify-tasks-display-container .clockify-task-form select {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.clockify-task-form input[type=text] {
+.clockify-tasks-display-container .clockify-task-form input[type=text] {
   width: 15vw;
   height: 3vw;
   font-size: 12pt;
@@ -51,7 +51,7 @@
   padding: 1px 2px;
   box-sizing: border-box;
 }
-.clockify-task-form.disabled, .clockify-task-form .disabled {
+.clockify-tasks-display-container .clockify-task-form.disabled, .clockify-tasks-display-container .clockify-task-form .disabled {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -60,37 +60,36 @@
   pointer-events: none;
   opacity: 0.3;
 }
-
 @media (max-width: 991.98px) {
-  .clockify-tasks-display {
+  .clockify-tasks-display-container .clockify-tasks-display {
     position: initial;
     width: auto;
     display: flex;
     justify-content: space-around;
     padding: 3vh 5vw;
   }
-  .clockify-tasks-display.loading-container {
+  .clockify-tasks-display-container .clockify-tasks-display.loading-container {
     width: 90%;
     height: auto;
   }
-  .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] {
+  .clockify-tasks-display-container .clockify-tasks-display .workspace-selector, .clockify-tasks-display-container .clockify-tasks-display .project-selector, .clockify-tasks-display-container .clockify-tasks-display input[type=text] {
     width: 20vw;
     height: 5vw;
   }
 }
 @media (max-width: 576px) {
-  .clockify-tasks-display {
+  .clockify-tasks-display-container .clockify-tasks-display {
     position: initial;
     width: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
-  .clockify-tasks-display.loading-container {
+  .clockify-tasks-display-container .clockify-tasks-display.loading-container {
     width: 90%;
     height: auto;
   }
-  .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] {
+  .clockify-tasks-display-container .clockify-tasks-display .workspace-selector, .clockify-tasks-display-container .clockify-tasks-display .project-selector, .clockify-tasks-display-container .clockify-tasks-display input[type=text] {
     width: 70%;
     height: 4vh;
     margin-top: 1vh;
diff --git a/src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map b/src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map
index 449b608..5a702c8 100644
--- a/src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map
+++ b/src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map
@@ -1 +1 @@
-{"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EAEI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACDJ;ADGI;EACI,gCAAA;ACDR;ADAI;EACI,gCAAA;ACDR;ADAI;EACI,gCAAA;ACDR;ADII;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACFR;ADKI;EACI,WAAA;EACA,WAAA;ACHR;ADMI;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,wCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACTR;ADWQ;EACI,uBAAA;ACTZ;ADYQ;EACI,wBAAA;ACVZ;ADcI;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACZR;ADeI;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;AChBR;ADmBI;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACjBR;;ADqBA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,6BAAA;IAEA,gBAAA;ECrBN;EDuBM;IACI,UAAA;IACA,YAAA;ECrBV;EDwBM;IACI,WAAA;IACA,WAAA;ECtBV;AACF;AD2BA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EC3BN;ED6BM;IACI,UAAA;IACA,YAAA;EC3BV;ED8BM;IACI,UAAA;IACA,WAAA;IACA,eAAA;EC5BV;AACF","file":"clockify-task-form.css"}
\ No newline at end of file
+{"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACAJ;ADGQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADIQ;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACFZ;ADKQ;EACI,WAAA;EACA,WAAA;ACHZ;ADMQ;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,wCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACTZ;ADWY;EACI,uBAAA;ACThB;ADYY;EACI,wBAAA;ACVhB;ADcQ;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACZZ;ADeQ;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;AChBZ;ADmBQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACjBZ;ADqBI;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,6BAAA;IAEA,gBAAA;ECtBV;EDwBU;IACI,UAAA;IACA,YAAA;ECtBd;EDyBU;IACI,WAAA;IACA,WAAA;ECvBd;AACF;AD4BI;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EC5BV;ED8BU;IACI,UAAA;IACA,YAAA;EC5Bd;ED+BU;IACI,UAAA;IACA,WAAA;IACA,eAAA;EC7Bd;AACF","file":"clockify-task-form.css"}
\ No newline at end of file
diff --git a/src/pages/Main/ClockifyTaskForm/clockify-task-form.scss b/src/pages/Main/ClockifyTaskForm/clockify-task-form.scss
index 06d480d..42fdbf4 100644
--- a/src/pages/Main/ClockifyTaskForm/clockify-task-form.scss
+++ b/src/pages/Main/ClockifyTaskForm/clockify-task-form.scss
@@ -1,119 +1,120 @@
-.clockify-task-form {
-
+.clockify-tasks-display-container {
     width: 20vw;
     position: absolute;
 
     top: 60vh;
     left: 2.5vw;
 
-    select, select option, input, input::placeholder {   
-        font-family: 'Arial', sans-serif;
-    }
-
-    &.loading-container {
-        width: 20vw;
-        height: auto;
-        background: none;
-    }
-    
-    .workspace-selector, .project-selector {
-        width: 15vw;
-        height: 5vh;
-    }
-
-    .add-task {
-        width: 3.5vh;
-        height: 3.5vh;
-
-        margin-left: 0.5vh;
-
-        display: inline;
-
-        background-color: var(--main-text-color);
-        border-radius: 100%;
-
-        color: #fff;
-
-        cursor: pointer;
-
-        &:hover {
-            filter: brightness(90%);
+    .clockify-task-form {
+        select, select option, input, input::placeholder {   
+            font-family: 'Arial', sans-serif;
         }
 
-        &:active {
-            filter: brightness(110%);
-        }
-    }
-
-    select {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    input[type=text] {
-        width: 15vw;
-        height: 3vw;
-
-        font-size: 12pt;
-
-        outline: none;
-        padding: 1px 2px;
-
-        box-sizing: border-box;
-    }
-
-    &.disabled, .disabled {
-        user-select: none;
-        cursor: initial;
-        pointer-events: none;
-        opacity: 0.3;
-    }
-}
-
-@media (max-width: 991.98px) {
-
-    .clockify-tasks-display {
-        position: initial;
-        width: auto;
-
-        display: flex;
-        justify-content:space-around;
-
-        padding: 3vh 5vw;
-
         &.loading-container {
-            width: 90%;
-            height: auto;
-        }
-
-        .workspace-selector, .project-selector, input[type=text] {
             width: 20vw;
-            height: 5vw;
-        }
-    
-    }
-}
-
-@media (max-width: 576px) {
-
-    .clockify-tasks-display {
-        position: initial;
-        width: auto;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        &.loading-container {
-            width: 90%;
             height: auto;
+            background: none;
+        }
+        
+        .workspace-selector, .project-selector {
+            width: 15vw;
+            height: 5vh;
         }
 
-        .workspace-selector, .project-selector, input[type=text] {
-            width: 70%;
-            height: 4vh;
-            margin-top: 1vh;
+        .add-task {
+            width: 3.5vh;
+            height: 3.5vh;
+
+            margin-left: 0.5vh;
+
+            display: inline;
+
+            background-color: var(--main-text-color);
+            border-radius: 100%;
+
+            color: #fff;
+
+            cursor: pointer;
+
+            &:hover {
+                filter: brightness(90%);
+            }
+
+            &:active {
+                filter: brightness(110%);
+            }
+        }
+
+        select {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        input[type=text] {
+            width: 15vw;
+            height: 3vw;
+
+            font-size: 12pt;
+
+            outline: none;
+            padding: 1px 2px;
+
+            box-sizing: border-box;
+        }
+
+        &.disabled, .disabled {
+            user-select: none;
+            cursor: initial;
+            pointer-events: none;
+            opacity: 0.3;
+        }
+    }
+
+    @media (max-width: 991.98px) {
+
+        .clockify-tasks-display {
+            position: initial;
+            width: auto;
+
+            display: flex;
+            justify-content:space-around;
+
+            padding: 3vh 5vw;
+
+            &.loading-container {
+                width: 90%;
+                height: auto;
+            }
+
+            .workspace-selector, .project-selector, input[type=text] {
+                width: 20vw;
+                height: 5vw;
+            }
+        
+        }
+    }
+
+    @media (max-width: 576px) {
+
+        .clockify-tasks-display {
+            position: initial;
+            width: auto;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            &.loading-container {
+                width: 90%;
+                height: auto;
+            }
+
+            .workspace-selector, .project-selector, input[type=text] {
+                width: 70%;
+                height: 4vh;
+                margin-top: 1vh;
+            }
         }
     }
 }
\ No newline at end of file