diff --git a/src/app/page.module.css b/src/app/page.module.css
deleted file mode 100644
index 6676d2c..0000000
--- a/src/app/page.module.css
+++ /dev/null
@@ -1,229 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 651ec60..9fd2689 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 import { AppShell, Flex, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { Header } from "../components/Header/Header";
-import { Navbar } from "../components/Navbar/Navbar";
-import { Timetable } from "../components/Timetable/Timetable";
+import { Header } from "../components/Header";
+import { Navbar } from "../components/Navbar";
+import { Timetable } from "../components/Timetable";
 import { useLocalStorage } from "../hooks/useLocalStorage";
 import { Course } from "../type/Types";
 
@@ -25,6 +25,7 @@ export default function Page() {
       modified: new Date(2022, 5 - 1, 5, 6, 35, 20, 333),
       unit: 3,
       isEnrolled: true,
+      color: "#ff0000",
     },
   ]);
 
diff --git a/src/components/AddCourse/AddCourse.tsx b/src/components/AddCourse/index.tsx
similarity index 98%
rename from src/components/AddCourse/AddCourse.tsx
rename to src/components/AddCourse/index.tsx
index 460b50a..ff2b450 100644
--- a/src/components/AddCourse/AddCourse.tsx
+++ b/src/components/AddCourse/index.tsx
@@ -77,6 +77,7 @@ export default function AddCourse(props: {
         unit: unit,
         modified: new Date(),
         isEnrolled: true, // Default value, update as needed
+        color: "#000000", // Default value, update as needed
       };
 
       return course;
diff --git a/src/components/CourseCard/CourseCard.tsx b/src/components/CourseCard/index.tsx
similarity index 96%
rename from src/components/CourseCard/CourseCard.tsx
rename to src/components/CourseCard/index.tsx
index c7e7ce3..b8a61fe 100644
--- a/src/components/CourseCard/CourseCard.tsx
+++ b/src/components/CourseCard/index.tsx
@@ -1,4 +1,4 @@
-import ModalConfirm from "@/src/components/ModalConfirm/ModalConfirm";
+import ModalConfirm from "@/src/components/ModalConfirm";
 import { Course } from "@/src/type/Types";
 import {
   ActionIcon,
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
deleted file mode 100644
index 5695dc4..0000000
--- a/src/components/Header/Header.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.inner {
-  height: rem(56px);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/index.tsx
similarity index 85%
rename from src/components/Header/Header.tsx
rename to src/components/Header/index.tsx
index dca30f8..8234dbe 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/index.tsx
@@ -4,8 +4,7 @@ import { IconBrandGithub, IconSettings } from "@tabler/icons-react";
 
 import React from "react";
 
-import ModalSetting from "../ModalSetting/ModalSetting";
-import classes from "./Header.module.css";
+import ModalSetting from "../ModalSetting";
 
 export function Header(props: {
   opened: boolean;
@@ -14,7 +13,15 @@ export function Header(props: {
   const [modalOpened, { open, close }] = useDisclosure(false);
   return (
     <header>
-      <Container size="max" className={classes.inner}>
+      <Container
+        size="max"
+        style={{
+          height: "56px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
         <Group gap={5}>
           <Burger
             opened={props.opened}
diff --git a/src/components/ModalConfirm/ModalConfirm.tsx b/src/components/ModalConfirm/index.tsx
similarity index 100%
rename from src/components/ModalConfirm/ModalConfirm.tsx
rename to src/components/ModalConfirm/index.tsx
diff --git a/src/components/ModalSetting/ModalSetting.tsx b/src/components/ModalSetting/index.tsx
similarity index 84%
rename from src/components/ModalSetting/ModalSetting.tsx
rename to src/components/ModalSetting/index.tsx
index 513064e..faacc92 100644
--- a/src/components/ModalSetting/ModalSetting.tsx
+++ b/src/components/ModalSetting/index.tsx
@@ -1,21 +1,20 @@
 import {
-    Button,
-    Group,
-    Input,
-    Modal,
-    NativeSelect,
-    Text,
-    useComputedColorScheme,
-    useMantineColorScheme,
+  Button,
+  Group,
+  Input,
+  Modal,
+  NativeSelect,
+  Text,
+  useComputedColorScheme,
+  useMantineColorScheme,
 } from "@mantine/core";
 import { useColorScheme } from "@mantine/hooks";
 import { IconMoon, IconSun } from "@tabler/icons-react";
-import cx from "clsx";
 import classes from "./ModalSetting.module.css";
 
 export default function ModalSetting(props: {
-    modalOpened: boolean;
-    close: () => void;
+  modalOpened: boolean;
+  close: () => void;
 }) {
   const { setColorScheme } = useMantineColorScheme();
 
@@ -74,8 +73,11 @@ export default function ModalSetting(props: {
             size="sm"
             aria-label="Toggle color scheme"
           >
-            <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
-            <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
+            {computedColorScheme === "dark" ? (
+              <IconSun stroke={1.5} />
+            ) : (
+              <IconMoon stroke={1.5} />
+            )}
           </Button>
           <Button
             onClick={() => setColorScheme("auto")}
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/index.tsx
similarity index 91%
rename from src/components/Navbar/Navbar.tsx
rename to src/components/Navbar/index.tsx
index 174d2ff..3bc44d1 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,8 +1,8 @@
 import { Flex, ScrollArea, Text } from "@mantine/core";
 
+import AddCourse from "@/src/components/AddCourse";
+import CourseCard from "@/src/components/CourseCard";
 import { Course } from "@/src/type/Types";
-import AddCourse from "../AddCourse/AddCourse";
-import CourseCard from "../CourseCard/CourseCard";
 import classes from "./Navbar.module.css";
 
 export function Navbar(props: {
diff --git a/src/components/RequirementTable/RequirementTable.tsx b/src/components/RequirementTable/index.tsx
similarity index 100%
rename from src/components/RequirementTable/RequirementTable.tsx
rename to src/components/RequirementTable/index.tsx
diff --git a/src/components/Timetable/Timetable.tsx b/src/components/Timetable/index.tsx
similarity index 96%
rename from src/components/Timetable/Timetable.tsx
rename to src/components/Timetable/index.tsx
index 18fbd9f..543215d 100644
--- a/src/components/Timetable/Timetable.tsx
+++ b/src/components/Timetable/index.tsx
@@ -1,11 +1,9 @@
 "use client";
 import { Course } from "@/src/type/Types";
-import { Card, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
+import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
 import classes from "./Timetable.module.css";
 
 export function Timetable(props: { courses: Course[] }) {
-  const theme = useMantineTheme();
-
   const weekDays: string[] = ["M", "TU", "W", "TH", "F", "SA"];
   const weekDayItems = weekDays.map((day) => (
     <Card key={day} className={classes.item} style={{ height: "30px" }}>
diff --git a/src/type/Types.ts b/src/type/Types.ts
index 4276c4c..f8295a0 100644
--- a/src/type/Types.ts
+++ b/src/type/Types.ts
@@ -11,4 +11,5 @@ export interface Course {
   unit: number;
   modified: Date;
   isEnrolled: boolean;
+  color: string;
 }