diff --git a/src/App.css b/src/App.css
index 74b5e05..020dffe 100644
--- a/src/App.css
+++ b/src/App.css
@@ -24,6 +24,17 @@
   color: white;
 }
 
+body,
+html {
+  height: 100%;
+  min-width: fit-content;
+  overflow-x: hidden;
+}
+
+#root {
+  height: 100%;
+}
+
 .App-link {
   color: #61dafb;
 }
diff --git a/src/App.js b/src/App.js
index d652a63..546cf74 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,15 @@
 import React from "react";
+import { useState } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 import Main from "./components/Main.jsx";
 
 function App() {
+  const [theme, setTheme] = useState("light");
+
   return (
-    <div>
-      <Main></Main>
+    <div className={"h-full" + (theme == "dark" ? " bg-gray-800" : "")}>
+      <Main theme={theme} setTheme={setTheme}></Main>
     </div>
   );
 }
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
index 991b028..6968c4d 100644
--- a/src/components/Main.jsx
+++ b/src/components/Main.jsx
@@ -6,8 +6,9 @@ import Form from "./Form.jsx";
 import api from "../api/api.js";
 import axios from "axios";
 import "./style.css";
+import { Switch } from "@mantine/core";
 
-function Main() {
+function Main({ theme, setTheme }) {
   const [tasks, setTasks] = useState([]);
   const [tasksFiltered, setTasksFiltered] = useState([]);
   const [addFormFlag, setAddFormFlag] = useState(false);
@@ -129,43 +130,60 @@ function Main() {
   return (
     <div className="flex flex-col p-2">
       {addFormFlag || addSubtask ? newTaskForm() : ""}
-      <div className="flex w-full justify-center items-center ">
-        <div className="flex justify-center">
-          <Button
-            className="bg-blue-500 mx-2"
-            onClick={() => {
-              setAddFormFlag(true);
+      <div className="flex w-full">
+        <div className="flex w-full justify-center items-center" style={{}}>
+          <div className="flex justify-center">
+            <Button
+              className="bg-blue-500 mx-2"
+              onClick={() => {
+                setAddFormFlag(true);
+              }}
+            >
+              Add task
+            </Button>
+          </div>
+          <Select
+            placeholder="Pick one"
+            defaultValue="all"
+            data={[
+              { value: "all", label: "all" },
+              { value: "completed", label: "completed" },
+              { value: "uncompleted", label: "uncompleted" },
+            ]}
+            onChange={(e) => {
+              if (e !== "all") {
+                let tmp;
+                if (e === "completed")
+                  tmp = tasks.filter((el) => el.completed == true);
+                else
+                  tmp = tasks.filter((el) => {
+                    console.log(
+                      "title: " + el.title + " ,completed: " + el.completed
+                    );
+                    return el.completed == false;
+                  });
+                setTasksFiltered(tmp);
+              } else {
+                setTasksFiltered([]);
+              }
             }}
-          >
-            Add task
-          </Button>
+          />
         </div>
-        <Select
-          placeholder="Pick one"
-          defaultValue="all"
-          data={[
-            { value: "all", label: "all" },
-            { value: "completed", label: "completed" },
-            { value: "uncompleted", label: "uncompleted" },
-          ]}
-          onChange={(e) => {
-            if (e !== "all") {
-              let tmp;
-              if (e === "completed")
-                tmp = tasks.filter((el) => el.completed == true);
-              else
-                tmp = tasks.filter((el) => {
-                  console.log(
-                    "title: " + el.title + " ,completed: " + el.completed
-                  );
-                  return el.completed == false;
-                });
-              setTasksFiltered(tmp);
-            } else {
-              setTasksFiltered([]);
-            }
-          }}
-        />
+        <div
+          className={
+            "flex items-center justify-around text-xs w-1/6" +
+            (theme === "dark" ? " text-white" : "")
+          }
+        >
+          <label>Light mode</label>
+          <Switch
+            color="gray"
+            onChange={() => {
+              theme === "dark" ? setTheme("light") : setTheme("dark");
+            }}
+          />
+          <label>Dark mode</label>
+        </div>{" "}
       </div>
 
       <TableOfUsers
@@ -176,6 +194,7 @@ function Main() {
         start={start}
         showMore={showMore}
         sortTasks={sortTasks}
+        theme={theme}
       ></TableOfUsers>
     </div>
   );
diff --git a/src/components/TableOfUsers.jsx b/src/components/TableOfUsers.jsx
index ace5f5e..8582454 100644
--- a/src/components/TableOfUsers.jsx
+++ b/src/components/TableOfUsers.jsx
@@ -12,6 +12,7 @@ function TableOfUsers({
   start,
   showMore,
   setAddSubtask,
+  theme,
 }) {
   const titleRef = useRef();
   const [updateTitle, setUpdateTitle] = useState(false);
@@ -105,7 +106,10 @@ function TableOfUsers({
     if (task.subtasks) {
       return task.subtasks.map((subtask) => {
         return (
-          <tr key={subtask.title} className="text-xs">
+          <tr
+            key={subtask.title}
+            className={"text-xs" + (theme === "dark" ? " text-white" : "")}
+          >
             <td></td>
             <td></td>
             <td>{subtask.title}</td>
@@ -195,6 +199,7 @@ function TableOfUsers({
               snapshot.isDragging,
               provided.draggableProps.style
             )}
+            className={"text-xs" + (theme === "dark" ? " text-white" : "")}
           >
             <td
               style={getTdStyle(
@@ -318,6 +323,7 @@ function TableOfUsers({
             >
               <Checkbox
                 size="xl"
+                color={theme === "dark" ? "gray" : "white"}
                 defaultChecked={task.completed ? true : false}
                 onClick={() => {
                   task.completed = !task.completed;
@@ -364,7 +370,7 @@ function TableOfUsers({
 
   return (
     <DragDropContext onDragEnd={handleDragEnd}>
-      <Table m={10} highlightOnHover>
+      <Table m={10}>
         <thead>
           <tr>
             <th className="">Priority</th>