diff --git a/backend/tasks/api.py b/backend/tasks/api.py
index 7669d76..587f433 100644
--- a/backend/tasks/api.py
+++ b/backend/tasks/api.py
@@ -6,46 +6,22 @@ from rest_framework import viewsets
 from rest_framework.response import Response
 from rest_framework.permissions import IsAuthenticated
 
-from tasks.utils import get_service
+from tasks.utils import get_service, generate_recurrence_rule
 from tasks.models import Todo, RecurrenceTask
 from tasks.serializers import TodoUpdateSerializer, RecurrenceTaskUpdateSerializer
 
-
 class GoogleCalendarEventViewset(viewsets.ViewSet):
+    """Viewset for list or save Google Calendar Events."""
     permission_classes = (IsAuthenticated,)
 
     def __init__(self, *args, **kwargs):
         super().__init__()
-        self.current_time = datetime.now(tz=timezone.utc).isoformat()
-        self.event_fields = 'items(id,summary,description,created,recurringEventId,updated,start,end)'
+        self.current_time = (datetime.now(tz=timezone.utc) + timedelta(days=-7)).isoformat()
+        self.max_time = (datetime.now(tz=timezone.utc) + timedelta(days=7)).isoformat()
+        self.event_fields = 'items(id,summary,description,created,recurringEventId,updated,start,end,originalStartTime)'
 
-    def _validate_serializer(self, serializer):
-        if serializer.is_valid():
-            serializer.save()
-            return Response("Validate Successfully", status=200)
-        return Response(serializer.errors, status=400)
-
-    def post(self, request):
-        service = get_service(request)
-        events = service.events().list(calendarId='primary', fields=self.event_fields).execute()
-        for event in events.get('items', []):
-            if event.get('recurringEventId'):
-                continue
-            event['start_datetime'] = event.get('start').get('dateTime')
-            event['end_datetime'] = event.get('end').get('dateTime')
-            event.pop('start')
-            event.pop('end')
-            try:
-                task = Todo.objects.get(google_calendar_id=event['id'])
-                serializer = TodoUpdateSerializer(instance=task, data=event)
-                return self._validate_serializer(serializer)
-            except Todo.DoesNotExist:
-                serializer = TodoUpdateSerializer(data=event, user=request.user)
-                return self._validate_serializer(serializer)
-                
-    def list(self, request, days=7):
-        max_time = (datetime.now(tz=timezone.utc) + timedelta(days=days)).isoformat()
-        
+    def _get_google_events(self, request):
+        """Get all events from Google Calendar. """
         service = get_service(request)
         events = []
         next_page_token = None
@@ -54,21 +30,77 @@ class GoogleCalendarEventViewset(viewsets.ViewSet):
             query = service.events().list(
                 calendarId='primary',
                 timeMin=self.current_time,
-                timeMax=max_time,
+                timeMax=self.max_time,
                 maxResults=200,
                 singleEvents=True,
                 orderBy='startTime',
                 pageToken=next_page_token,
-                fields='items(id,summary,description,created,recurringEventId,updated,start,end)',
+                fields=self.event_fields,
             )
 
             page_results = query.execute()
             page_events = page_results.get('items', [])
-
+            
             events.extend(page_events)
             next_page_token = page_results.get('nextPageToken')
 
             if next_page_token is None:
                 break
 
-        return Response(events, status=200)
\ No newline at end of file
+        return events
+
+    def _validate_serializer(self, serializer):
+        """Validate serializer and return response."""
+        if serializer.is_valid():
+            serializer.save()
+            return Response("Validate Successfully", status=200)
+        return Response(serializer.errors, status=400)
+
+    def create(self, request, *args, **kwargs):
+        """Create a new Google Calendar Event."""
+        events = self._get_google_events(request)
+        
+        responses = []
+        recurrence_task_ids = []
+        for event in events:
+            start_datetime = event.get('start', {}).get('dateTime')
+            end_datetime = event.get('end', {}).get('dateTime')
+
+            event['start_datetime'] = start_datetime
+            event['end_datetime'] = end_datetime
+            event.pop('start')
+            event.pop('end')
+
+            if (event.get('recurringEventId') in recurrence_task_ids):
+                continue
+
+            if (event.get('recurringEventId') is not None):
+                originalStartTime = event.get('originalStartTime', {}).get('dateTime')
+                rrule_text = generate_recurrence_rule(event['start_datetime'], event['end_datetime'], originalStartTime)
+                event['recurrence'] = rrule_text
+                event.pop('originalStartTime')
+                recurrence_task_ids.append(event['recurringEventId'])
+
+                try:
+                    task = RecurrenceTask.objects.get(google_calendar_id=event['id'])
+                    serializer = RecurrenceTaskUpdateSerializer(instance=task, data=event)
+                except RecurrenceTask.DoesNotExist:
+                    serializer = RecurrenceTaskUpdateSerializer(data=event, user=request.user)
+
+                responses.append(self._validate_serializer(serializer))
+                continue
+
+            try:
+                task = Todo.objects.get(google_calendar_id=event['id'])
+                serializer = TodoUpdateSerializer(instance=task, data=event)
+            except Todo.DoesNotExist:
+                serializer = TodoUpdateSerializer(data=event, user=request.user)
+
+            responses.append(self._validate_serializer(serializer))
+
+        return responses[0] if responses else Response("No events to process", status=200)
+
+    def list(self, request):
+        """List all Google Calendar Events."""
+        return Response(self._get_google_events(request), status=200)
+        
\ No newline at end of file
diff --git a/backend/tasks/migrations/0012_habit.py b/backend/tasks/migrations/0012_habit.py
new file mode 100644
index 0000000..6e29775
--- /dev/null
+++ b/backend/tasks/migrations/0012_habit.py
@@ -0,0 +1,39 @@
+# Generated by Django 4.2.6 on 2023-11-13 18:15
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('tasks', '0011_recurrencetask'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Habit',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.TextField()),
+                ('notes', models.TextField(default='')),
+                ('importance', models.PositiveSmallIntegerField(choices=[(1, '1'), (2, '2'), (3, '3'), (4, '4'), (5, '5')], default=1)),
+                ('difficulty', models.PositiveSmallIntegerField(choices=[(1, 'Easy'), (2, 'Normal'), (3, 'Hard'), (4, 'Very Hard'), (5, 'Devil')], default=1)),
+                ('challenge', models.BooleanField(default=False)),
+                ('fromSystem', models.BooleanField(default=False)),
+                ('creation_date', models.DateTimeField(auto_now_add=True)),
+                ('last_update', models.DateTimeField(auto_now=True)),
+                ('google_calendar_id', models.CharField(blank=True, max_length=255, null=True)),
+                ('start_event', models.DateTimeField(null=True)),
+                ('end_event', models.DateTimeField(null=True)),
+                ('streak', models.IntegerField(default=0)),
+                ('tags', models.ManyToManyField(blank=True, to='tasks.tag')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'abstract': False,
+            },
+        ),
+    ]
diff --git a/backend/tasks/migrations/0013_alter_recurrencetask_recurrence_rule.py b/backend/tasks/migrations/0013_alter_recurrencetask_recurrence_rule.py
new file mode 100644
index 0000000..f629f13
--- /dev/null
+++ b/backend/tasks/migrations/0013_alter_recurrencetask_recurrence_rule.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.6 on 2023-11-14 15:17
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tasks', '0012_habit'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='recurrencetask',
+            name='recurrence_rule',
+            field=models.CharField(),
+        ),
+    ]
diff --git a/backend/tasks/models.py b/backend/tasks/models.py
index 5da815e..a8fc4e5 100644
--- a/backend/tasks/models.py
+++ b/backend/tasks/models.py
@@ -68,11 +68,19 @@ class Todo(Task):
         return self.title
 
 class RecurrenceTask(Task):
-    recurrence_rule = models.TextField()
+    recurrence_rule = models.CharField()
 
     def __str__(self) -> str:
         return f"{self.title} ({self.recurrence_rule})"
 
+
+class Habit(Task):
+    streak = models.IntegerField(default=0)
+
+    def __str__(self) -> str:
+        return f"{self.title} ({self.streak})"
+
+
 class Subtask(models.Model):
     """
     Represents a subtask associated with a task.
diff --git a/backend/tasks/serializers.py b/backend/tasks/serializers.py
index ed02300..408cb55 100644
--- a/backend/tasks/serializers.py
+++ b/backend/tasks/serializers.py
@@ -41,7 +41,7 @@ class RecurrenceTaskUpdateSerializer(serializers.ModelSerializer):
     description = serializers.CharField(source="notes", required=False)
     created = serializers.DateTimeField(source="creation_date")
     updated = serializers.DateTimeField(source="last_update")
-    recurrence = serializers.DateTimeField(source="recurrence_rule")
+    recurrence = serializers.CharField(source="recurrence_rule")
     start_datetime = serializers.DateTimeField(source="start_event", required=False)
     end_datetime = serializers.DateTimeField(source="end_event", required=False)
 
diff --git a/backend/tasks/tasks/serializers.py b/backend/tasks/tasks/serializers.py
index 85f0281..3098493 100644
--- a/backend/tasks/tasks/serializers.py
+++ b/backend/tasks/tasks/serializers.py
@@ -1,21 +1,47 @@
 from rest_framework import serializers
-from ..models import Todo
+from ..models import Todo, RecurrenceTask, Habit
 
-class TaskCreateSerializer(serializers.ModelSerializer):
-    class Meta:
-        model = Todo
-        # fields = '__all__'
-        exclude = ('tags',)
-
-    def create(self, validated_data):
-        # Create a new task with validated data
-        return Todo.objects.create(**validated_data)
-    
-class TaskGeneralSerializer(serializers.ModelSerializer):
+class TaskSerializer(serializers.ModelSerializer):
     class Meta:
         model = Todo
         fields = '__all__'
 
     def create(self, validated_data):
         # Create a new task with validated data
-        return Todo.objects.create(**validated_data)
\ No newline at end of file
+        return Todo.objects.create(**validated_data)
+
+class TaskCreateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Todo
+        exclude = ('tags',)
+    
+
+class RecurrenceTaskSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = RecurrenceTask
+        fields = '__all__'
+
+    def create(self, validated_data):
+        # Create a new task with validated data
+        return Todo.objects.create(**validated_data)
+    
+class RecurrenceTaskCreateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = RecurrenceTask
+        exclude = ('tags',)
+
+
+class HabitTaskSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Habit
+        fields = '__all__'
+
+    def create(self, validated_data):
+        # Create a new task with validated data
+        return Todo.objects.create(**validated_data)
+
+
+class HabitTaskCreateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Habit
+        exclude = ('tags',)
\ No newline at end of file
diff --git a/backend/tasks/tasks/views.py b/backend/tasks/tasks/views.py
index d884bbe..87bbaca 100644
--- a/backend/tasks/tasks/views.py
+++ b/backend/tasks/tasks/views.py
@@ -1,16 +1,49 @@
 from rest_framework import viewsets
 from rest_framework.permissions import IsAuthenticated
-from tasks.models import Todo
-from .serializers import TaskCreateSerializer, TaskGeneralSerializer
+from tasks.models import Todo, RecurrenceTask, Habit
+from tasks.tasks.serializers import (TaskCreateSerializer,
+                                     TaskSerializer,
+                                     RecurrenceTaskSerializer,
+                                     RecurrenceTaskCreateSerializer,
+                                     HabitTaskSerializer,
+                                     HabitTaskCreateSerializer)
 
 
 class TodoViewSet(viewsets.ModelViewSet):
     queryset = Todo.objects.all()
-    serializer_class = TaskGeneralSerializer
+    serializer_class = TaskSerializer
     permission_classes = [IsAuthenticated]
 
+    def get_queryset(self):
+        queryset = Todo.objects.filter(user=self.request.user)
+        return queryset
+
     def get_serializer_class(self):
         # Can't add ManytoMany at creation time (Tags)
         if self.action == 'create':
             return TaskCreateSerializer
-        return TaskGeneralSerializer
\ No newline at end of file
+        return TaskSerializer
+    
+
+class RecurrenceTaskViewSet(viewsets.ModelViewSet):
+    queryset = RecurrenceTask.objects.all()
+    serializer_class = RecurrenceTaskSerializer
+    permission_classes = [IsAuthenticated]
+
+    def get_serializer_class(self):
+        # Can't add ManytoMany at creation time (Tags)
+        if self.action == 'create':
+            return RecurrenceTaskCreateSerializer
+        return RecurrenceTaskSerializer
+
+
+class HabitTaskViewSet(viewsets.ModelViewSet):
+    queryset = Habit.objects.all()
+    serializer_class = HabitTaskSerializer
+    permission_classes = [IsAuthenticated]
+
+    def get_serializer_class(self):
+        # Can't add ManytoMany at creation time (Tags)
+        if self.action == 'create':
+            return HabitTaskCreateSerializer
+        return HabitTaskSerializer
\ No newline at end of file
diff --git a/backend/tasks/urls.py b/backend/tasks/urls.py
index b44ddd9..d830a65 100644
--- a/backend/tasks/urls.py
+++ b/backend/tasks/urls.py
@@ -3,12 +3,14 @@ from django.urls import path, include
 from rest_framework.routers import DefaultRouter
 
 from tasks.api import GoogleCalendarEventViewset
-from tasks.tasks.views import TodoViewSet
+from tasks.tasks.views import TodoViewSet, RecurrenceTaskViewSet, HabitTaskViewSet
 from tasks.misc.views import TagViewSet
 
 
 router = DefaultRouter()
 router.register(r'todo', TodoViewSet)
+router.register(r'daily', RecurrenceTaskViewSet)
+router.register(r'habit', HabitTaskViewSet)
 router.register(r'tags', TagViewSet)
 router.register(r'calendar-events', GoogleCalendarEventViewset, basename='calendar-events')
 
diff --git a/backend/tasks/utils.py b/backend/tasks/utils.py
index c55eb4a..de52535 100644
--- a/backend/tasks/utils.py
+++ b/backend/tasks/utils.py
@@ -1,8 +1,55 @@
+from dateutil import rrule
+from datetime import datetime
+
 from googleapiclient.discovery import build
 
 from authentications.access_token_cache import get_credential_from_cache_token
 
 
 def get_service(request):
+    """
+    Get a service that communicates to a Google API.
+    
+    :param request: Http request object
+    :return: A Resource object with methods for interacting with the calendar service
+    """
     credentials = get_credential_from_cache_token(request.user.id)
-    return build('calendar', 'v3', credentials=credentials)
\ No newline at end of file
+    return build('calendar', 'v3', credentials=credentials)
+
+def _determine_frequency(time_difference):
+    if time_difference.days >= 365:
+        return rrule.YEARLY
+    elif time_difference.days >= 30:
+        return rrule.MONTHLY
+    elif time_difference.days >= 7:
+        return rrule.WEEKLY
+    elif time_difference.days >= 1:
+        return rrule.DAILY
+    elif time_difference.seconds >= 3600:
+        return rrule.HOURLY
+    elif time_difference.seconds >= 60:
+        return rrule.MINUTELY
+    else:
+        return rrule.SECONDLY
+
+def generate_recurrence_rule(datetime1: str, datetime2: str, original_start_time: str) -> str:
+    """
+    Generate recurrence rule from 
+    difference between two datetime string.
+    
+    :param task1: A task object
+    :param task2: A task object
+    :return: A recurrence rule string according to ICAL format
+    """
+    start_time1 = datetime.fromisoformat(datetime1)
+    start_time2 = datetime.fromisoformat(datetime2)
+
+    time_difference = start_time2 - start_time1
+
+    recurrence_rule = rrule.rrule(
+        freq=_determine_frequency(time_difference),
+        dtstart=datetime.fromisoformat(original_start_time),
+        interval=time_difference.days if time_difference.days > 0 else 1,
+    )
+
+    return str(recurrence_rule)
\ No newline at end of file
diff --git a/backend/users/migrations/0005_alter_userstats_endurance_and_more.py b/backend/users/migrations/0005_alter_userstats_endurance_and_more.py
new file mode 100644
index 0000000..35fe6f7
--- /dev/null
+++ b/backend/users/migrations/0005_alter_userstats_endurance_and_more.py
@@ -0,0 +1,40 @@
+# Generated by Django 4.2.6 on 2023-11-13 18:15
+
+import django.core.validators
+from django.db import migrations, models
+import users.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0004_userstats'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='userstats',
+            name='endurance',
+            field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(100)]),
+        ),
+        migrations.AlterField(
+            model_name='userstats',
+            name='intelligence',
+            field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(100)]),
+        ),
+        migrations.AlterField(
+            model_name='userstats',
+            name='luck',
+            field=models.IntegerField(default=users.models.random_luck, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(50)]),
+        ),
+        migrations.AlterField(
+            model_name='userstats',
+            name='perception',
+            field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(100)]),
+        ),
+        migrations.AlterField(
+            model_name='userstats',
+            name='strength',
+            field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(100)]),
+        ),
+    ]
diff --git a/frontend/src/App.css b/frontend/src/App.css
index eaac616..48931c9 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -43,4 +43,4 @@
   to {
     transform: rotate(360deg);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 39f5ec7..ad9dc97 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,13 +4,15 @@ import { Route, Routes, useLocation } from "react-router-dom";
 import TestAuth from "./components/testAuth";
 import LoginPage from "./components/authentication/LoginPage";
 import SignUpPage from "./components/authentication/SignUpPage";
-import NavBar from "./components/navigators/Navbar";
+import NavBar from "./components/navigations/Navbar";
 import Home from "./components/Home";
-import ProfileUpdate from "./components/ProfileUpdatePage";
 import Calendar from "./components/calendar/calendar";
-import KanbanBoard from "./components/kanbanBoard/kanbanBoard";
-import IconSideNav from "./components/IconSideNav";
+import KanbanPage from "./components/kanbanBoard/kanbanPage";
+import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
+import PrivateRoute from "./PrivateRoute";
+import ProfileUpdatePage from "./components/profilePage";
+
 
 const App = () => {
   const location = useLocation();
@@ -18,24 +20,32 @@ const App = () => {
   const isLoginPageOrSignUpPage = prevention.some(_ => location.pathname.includes(_));
 
   return (
-      <div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
-        {!isLoginPageOrSignUpPage && <IconSideNav />}
-        <div className={isLoginPageOrSignUpPage ? "" : "flex-1"}>
-          <NavBar />
-          <div className={isLoginPageOrSignUpPage ? "" : "flex items-center justify-center"}>
-            <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/tasks" element={<KanbanBoard />} />
-              <Route path="/testAuth" element={<TestAuth />} />
-              <Route path="/update_profile" element={<ProfileUpdate />} />
-              <Route path="/calendar" element={<Calendar />} />
-              <Route path="/priority" element={<Eisenhower />} />
-              <Route path="/login" element={<LoginPage />} />
-              <Route path="/signup" element={<SignUpPage />} />
-            </Routes>
-          </div>
+    <div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
+      {!isLoginPageOrSignUpPage && <IconSideNav />}
+      <div className={isLoginPageOrSignUpPage ? "" : "flex-1 ml-[76px] overflow-hidden"}>
+        <NavBar />
+        <div className={isLoginPageOrSignUpPage ? "" : "overflow-x-auto"}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route exact path="/tasks" element={<PrivateRoute />}>
+              <Route exact path="/tasks" element={<KanbanPage />} />
+            </Route>
+            <Route path="/testAuth" element={<TestAuth />} />
+            <Route exact path="/profile" element={<PrivateRoute />}>
+              <Route exact path="/profile" element={<ProfileUpdatePage />} />
+            </Route>
+            <Route exact path="/calendar" element={<PrivateRoute />}>
+              <Route exact path="/calendar" element={<Calendar />} />
+            </Route>
+            <Route exact path="/priority" element={<PrivateRoute />}>
+              <Route exact path="/priority" element={<Eisenhower />} />
+            </Route>
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/signup" element={<SignUpPage />} />
+          </Routes>
         </div>
       </div>
+    </div>
   );
 };
 
diff --git a/frontend/src/PrivateRoute.jsx b/frontend/src/PrivateRoute.jsx
new file mode 100644
index 0000000..d72491a
--- /dev/null
+++ b/frontend/src/PrivateRoute.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuth } from "./hooks/authentication/IsAuthenticated";
+
+const PrivateRoute = () => {
+  const { isAuthenticated, setIsAuthenticated } = useAuth();
+  const auth = isAuthenticated;
+  return auth ? <Outlet /> : <Navigate to="/login" />;
+};
+
+export default PrivateRoute;
diff --git a/frontend/src/api/TagApi.jsx b/frontend/src/api/TagApi.jsx
index deea971..5d352aa 100644
--- a/frontend/src/api/TagApi.jsx
+++ b/frontend/src/api/TagApi.jsx
@@ -1,12 +1,8 @@
-import axiosInstance from "./configs/AxiosConfig";
+import { createTask, readTasks, readTaskByID, updateTask, deleteTask } from "./TaskApi";
 
-export const fetchTags = () => {
-  return axiosInstance
-    .get("tags/")
-    .then(response => {
-      return response.data;
-    })
-    .catch(error => {
-      throw error;
-    });
-};
+// CRUD functions for "tags" endpoint
+export const createTag = data => createTask("tags", data);
+export const readTags = () => readTasks("tags");
+export const readTagByID = id => readTaskByID("tags", id);
+export const updateTag = (id, data) => updateTask("tags", id, data);
+export const deleteTag = id => deleteTask("tags", id);
diff --git a/frontend/src/api/TaskApi.jsx b/frontend/src/api/TaskApi.jsx
index 96f24f6..eee70d0 100644
--- a/frontend/src/api/TaskApi.jsx
+++ b/frontend/src/api/TaskApi.jsx
@@ -1,23 +1,73 @@
 import axiosInstance from "./configs/AxiosConfig";
 
-export const fetchTodoTasks = () => {
+const baseURL = "";
+
+export const createTask = (endpoint, data) => {
   return axiosInstance
-    .get("todo/")
-    .then(response => {
-      return response.data;
-    })
+    .post(`${baseURL}${endpoint}/`, data)
+    .then(response => response.data)
     .catch(error => {
       throw error;
     });
 };
 
-export const fetchTodoTasksID = id => {
+export const readTasks = endpoint => {
   return axiosInstance
-    .get(`todo/${id}/`)
-    .then(response => {
-      return response.data;
-    })
+    .get(`${baseURL}${endpoint}/`)
+    .then(response => response.data)
     .catch(error => {
       throw error;
     });
 };
+
+export const readTaskByID = (endpoint, id) => {
+  return axiosInstance
+    .get(`${baseURL}${endpoint}/${id}/`)
+    .then(response => response.data)
+    .catch(error => {
+      throw error;
+    });
+};
+
+export const updateTask = (endpoint, id, data) => {
+  return axiosInstance
+    .put(`${baseURL}${endpoint}/${id}/`, data)
+    .then(response => response.data)
+    .catch(error => {
+      throw error;
+    });
+};
+
+export const deleteTask = (endpoint, id) => {
+  return axiosInstance
+    .delete(`${baseURL}${endpoint}/${id}/`)
+    .then(response => response.data)
+    .catch(error => {
+      throw error;
+    });
+};
+
+// Create
+export const createTodoTask = data => createTask("todo", data);
+export const createRecurrenceTask = data => createTask("daily", data);
+export const createHabitTask = data => createTask("habit", data);
+
+// Read
+export const readTodoTasks = () => readTasks("todo");
+export const readRecurrenceTasks = () => readTasks("daily");
+export const readHabitTasks = () => readTasks("habit");
+
+// Read by ID
+export const readTodoTaskByID = id => readTaskByID("todo", id);
+export const readRecurrenceTaskByID = id => readTaskByID("daily", id);
+export const readHabitTaskByID = id => readTaskByID("habit", id);
+
+// Update
+export const updateTodoTask = (id, data) => updateTask("todo", id, data);
+export const updateRecurrenceTask = (id, data) => updateTask("daily", id, data);
+export const updateHabitTask = (id, data) => updateTask("habit", id, data);
+
+// Delete
+export const deleteTodoTask = id => deleteTask("todo", id);
+export const deleteRecurrenceTask = id => deleteTask("daily", id);
+export const deleteHabitTask = id => deleteTask("habit", id);
diff --git a/frontend/src/api/UserProfileApi.jsx b/frontend/src/api/UserProfileApi.jsx
index ca80fd1..e7a1b17 100644
--- a/frontend/src/api/UserProfileApi.jsx
+++ b/frontend/src/api/UserProfileApi.jsx
@@ -1,11 +1,11 @@
-import axios from 'axios';
+import axios from "axios";
 
-const ApiUpdateUserProfile = async (formData) => {
+const ApiUpdateUserProfile = async formData => {
   try {
-    const response = await axios.post('http://127.0.1:8000/api/user/update/', formData, {
+    const response = await axios.post("http://127.0.1:8000/api/user/update/", formData, {
       headers: {
-        'Authorization': "Bearer " + localStorage.getItem('access_token'),
-        'Content-Type': 'multipart/form-data',
+        Authorization: "Bearer " + localStorage.getItem("access_token"),
+        "Content-Type": "multipart/form-data",
       },
     });
 
@@ -13,7 +13,7 @@ const ApiUpdateUserProfile = async (formData) => {
 
     return response.data;
   } catch (error) {
-    console.error('Error updating user profile:', error);
+    console.error("Error updating user profile:", error);
     throw error;
   }
 };
diff --git a/frontend/src/api/configs/AxiosConfig.jsx b/frontend/src/api/configs/AxiosConfig.jsx
index 80015ac..b0410d1 100644
--- a/frontend/src/api/configs/AxiosConfig.jsx
+++ b/frontend/src/api/configs/AxiosConfig.jsx
@@ -1,42 +1,45 @@
-import axios from 'axios';
+import axios from "axios";
+import { redirect } from "react-router-dom";
 
 const axiosInstance = axios.create({
-    baseURL: 'http://127.0.0.1:8000/api/',
-    timeout: 5000,
-    headers: {
-        'Authorization': "Bearer " + localStorage.getItem('access_token'),
-        'Content-Type': 'application/json',
-        'accept': 'application/json',
-    },
+  baseURL: "http://127.0.0.1:8000/api/",
+  timeout: 5000,
+  headers: {
+    Authorization: "Bearer " + localStorage.getItem("access_token"),
+    "Content-Type": "application/json",
+    accept: "application/json",
+  },
 });
 
 // handling token refresh on 401 Unauthorized errors
 axiosInstance.interceptors.response.use(
-    response => response,
-    error => {
-        const originalRequest = error.config;
-        const refresh_token = localStorage.getItem('refresh_token');
+  response => response,
+  error => {
+    const originalRequest = error.config;
+    const refresh_token = localStorage.getItem("refresh_token");
 
-        // Check if the error is due to 401 and a refresh token is available
-        if (error.response.status === 401 && error.response.statusText === "Unauthorized" && refresh_token !== "undefined") {
-            return axiosInstance
-                .post('/token/refresh/', { refresh: refresh_token })
-                .then((response) => {
+    // Check if the error is due to 401 and a refresh token is available
+    if (
+      error.response.status === 401 &&
+      error.response.statusText === "Unauthorized" &&
+      refresh_token !== "undefined"
+    ) {
+      return axiosInstance
+        .post("/token/refresh/", { refresh: refresh_token })
+        .then(response => {
+          localStorage.setItem("access_token", response.data.access);
 
-                    localStorage.setItem('access_token', response.data.access);
+          axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
+          originalRequest.headers["Authorization"] = "Bearer " + response.data.access;
 
-                    axiosInstance.defaults.headers['Authorization'] = "Bearer " + response.data.access;
-                    originalRequest.headers['Authorization'] = "Bearer " + response.data.access;
-
-                    return axiosInstance(originalRequest);
-                })
-                .catch(err => {
-                    console.log('Interceptors error: ', err);
-                });
-        }
-        return Promise.reject(error);
+          return axiosInstance(originalRequest);
+        })
+        .catch(err => {
+          console.log("Interceptors error: ", err);
+        });
     }
+    return Promise.reject(error);
+  }
 );
 
-
 export default axiosInstance;
diff --git a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
index 7800fa9..7c31328 100644
--- a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
+++ b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
@@ -1,27 +1,77 @@
-import React from 'react';
+import React, { useState } from "react";
+import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
+
+function EachBlog({ name, colorCode, contentList, icon }) {
+  const [tasks, setTasks] = useState(contentList);
+
+  const handleCheckboxChange = index => {
+    const updatedTasks = [...tasks];
+    updatedTasks[index].checked = !updatedTasks[index].checked;
+    setTasks(updatedTasks);
+  };
 
-function EachBlog({ name, colorCode }) {
   return (
-    <div className={`grid grid-rows-2 gap-4 text-left p-4 rounded-lg bg-white border border-gray-300 shadow-md`}>
-      <div className={`text-xl font-bold`} style={{ color: colorCode }}>
-        {name}
+    <div className={`h-full text-left p-4 rounded-lg bg-white border border-gray-300 overflow-y-auto`}>
+      <div className="flex" style={{ color: colorCode }}>
+        <span className="mx-2 mt-1">{icon}</span>
+        <span>{name}</span>
       </div>
-      <div className='h-36'>
-        Content goes here
+      <hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" />
+      <div className="space-y-2">
+        {tasks.length === 0 ? (
+          <p className="text-gray-500 text-center">No tasks</p>
+        ) : (
+          tasks.map((item, index) => (
+            <div key={index} className="flex items-start">
+              <input
+                type="checkbox"
+                checked={item.checked}
+                className="checkbox mt-1 mr-2"
+                onChange={() => handleCheckboxChange(index)}
+              />
+              <label className="cursor-pointer">{item.text}</label>
+            </div>
+          ))
+        )}
       </div>
     </div>
   );
 }
 
 function Eisenhower() {
+  const contentList_ui = [
+    { text: "Complete report for the meeting", checked: true },
+    { text: "Review project proposal", checked: false },
+    { text: "Submit expense report", checked: false },
+    { text: "Complete report for the meeting", checked: true },
+    { text: "Review project proposal", checked: false },
+    { text: "Submit expense report", checked: false },
+    { text: "Complete report for the meeting", checked: true },
+    { text: "Review project proposal", checked: false },
+    { text: "Submit expense report", checked: false },
+  ];
+
+  const contentList_uni = [];
+  const contentList_nui = [];
+  const contentList_nuni = [];
+
   return (
-    <div className='bg-slate-100 text-left p-4 m-auto'>
-      <h1 className="text-3xl font-bold mb-4">The Eisenhower Matrix</h1>
-      <div className='grid grid-rows-2 grid-cols-2 gap-2'>
-        <EachBlog name="Urgent & Important" colorCode="#FF5733" />
-        <EachBlog name="Urgent & Not important" colorCode="#FDDD5C" />
-        <EachBlog name="Not urgent & Important" colorCode="#189AB4" />
-        <EachBlog name="Not urgent & Not important" colorCode="#94FA92" />
+    <div className="bg-slate-100 text-left p-4 w-full">
+      <div className="grid grid-rows-2 grid-cols-2 gap-2">
+        <EachBlog name="Urgent & Important" colorCode="#ff5f68" icon={<FiAlertCircle />} contentList={contentList_ui} />
+        <EachBlog name="Urgent & Not important" colorCode="#ffb000" icon={<FiClock />} contentList={contentList_uni} />
+        <EachBlog
+          name="Not urgent & Important"
+          colorCode="#4772fa"
+          icon={<FiCheckCircle />}
+          contentList={contentList_nui}
+        />
+        <EachBlog
+          name="Not urgent & Not important"
+          colorCode="#0cce9c"
+          icon={<FiXCircle />}
+          contentList={contentList_nuni}
+        />
       </div>
     </div>
   );
diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx
index 3089df5..7fa7680 100644
--- a/frontend/src/components/Home.jsx
+++ b/frontend/src/components/Home.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 function HomePage() {
   return (
diff --git a/frontend/src/components/ProfileUpdatePage.jsx b/frontend/src/components/ProfileUpdateComponent.jsx
similarity index 73%
rename from frontend/src/components/ProfileUpdatePage.jsx
rename to frontend/src/components/ProfileUpdateComponent.jsx
index 06a0213..74da41f 100644
--- a/frontend/src/components/ProfileUpdatePage.jsx
+++ b/frontend/src/components/ProfileUpdateComponent.jsx
@@ -1,12 +1,12 @@
-import React, { useState, useRef } from 'react';
-import { ApiUpdateUserProfile } from '../api/UserProfileApi';
+import React, { useState, useRef } from "react";
+import { ApiUpdateUserProfile } from "../api/UserProfileApi";
 
-function ProfileUpdate() {
+function ProfileUpdateComponent() {
   const [file, setFile] = useState(null);
-  const [username, setUsername] = useState('');
-  const [fullName, setFullName] = useState('');
-  const [about, setAbout] = useState('');
-  const defaultImage = 'https://i1.sndcdn.com/artworks-cTz48e4f1lxn5Ozp-L3hopw-t500x500.jpg';
+  const [username, setUsername] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [about, setAbout] = useState("");
+  const defaultImage = "https://i1.sndcdn.com/artworks-cTz48e4f1lxn5Ozp-L3hopw-t500x500.jpg";
   const fileInputRef = useRef(null);
 
   const handleImageUpload = () => {
@@ -15,7 +15,7 @@ function ProfileUpdate() {
     }
   };
 
-  const handleFileChange = (e) => {
+  const handleFileChange = e => {
     const selectedFile = e.target.files[0];
     if (selectedFile) {
       setFile(selectedFile);
@@ -24,9 +24,9 @@ function ProfileUpdate() {
 
   const handleSave = () => {
     const formData = new FormData();
-    formData.append('profile_pic', file);
-    formData.append('first_name', username);
-    formData.append('about', about);
+    formData.append("profile_pic", file);
+    formData.append("first_name", username);
+    formData.append("about", about);
 
     ApiUpdateUserProfile(formData);
   };
@@ -45,10 +45,7 @@ function ProfileUpdate() {
             ref={fileInputRef}
           />
         </label>
-        <div
-          className="avatar w-32 h-32 cursor-pointer hover:blur"
-          onClick={handleImageUpload}
-        >
+        <div className="avatar w-32 h-32 cursor-pointer hover:blur" onClick={handleImageUpload}>
           {file ? (
             <img src={URL.createObjectURL(file)} alt="Profile" className="rounded-full" />
           ) : (
@@ -69,7 +66,7 @@ function ProfileUpdate() {
           placeholder="Enter your username"
           className="input w-full"
           value={username}
-          onChange={(e) => setUsername(e.target.value)}
+          onChange={e => setUsername(e.target.value)}
         />
       </div>
 
@@ -81,7 +78,7 @@ function ProfileUpdate() {
           placeholder="Enter your full name"
           className="input w-full"
           value={fullName}
-          onChange={(e) => setFullName(e.target.value)}
+          onChange={e => setFullName(e.target.value)}
         />
       </div>
 
@@ -92,7 +89,7 @@ function ProfileUpdate() {
           placeholder="Tell us about yourself"
           className="textarea w-full h-32"
           value={about}
-          onChange={(e) => setAbout(e.target.value)}
+          onChange={e => setAbout(e.target.value)}
         />
       </div>
 
@@ -104,4 +101,4 @@ function ProfileUpdate() {
   );
 }
 
-export default ProfileUpdate;
+export default ProfileUpdateComponent;
diff --git a/frontend/src/components/authentication/IsAuthenticated.jsx b/frontend/src/components/authentication/IsAuthenticated.jsx
deleted file mode 100644
index 48322de..0000000
--- a/frontend/src/components/authentication/IsAuthenticated.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useState, useEffect } from 'react';
-
-function IsAuthenticated() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-  useEffect(() => {
-    const access_token = localStorage.getItem('access_token');
-
-    if (access_token) {
-      setIsAuthenticated(true);
-    } else {
-      setIsAuthenticated(false);
-    }
-  }, []);
-
-  return isAuthenticated;
-}
-
-export default IsAuthenticated;
\ No newline at end of file
diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index 6bba8f8..d1eedf9 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -5,9 +5,13 @@ import { useGoogleLogin } from "@react-oauth/google";
 import refreshAccessToken from "./refreshAcesstoken";
 import axiosapi from "../../api/AuthenticationApi";
 
+import { useAuth } from "../../hooks/authentication/IsAuthenticated"; 
+
 function LoginPage() {
   const Navigate = useNavigate();
 
+  const { isAuthenticated, setIsAuthenticated } = useAuth();
+
   useEffect(() => {
     if (!refreshAccessToken()) {
       Navigate("/");
@@ -39,11 +43,13 @@ function LoginPage() {
         localStorage.setItem("access_token", res.data.access);
         localStorage.setItem("refresh_token", res.data.refresh);
         axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access;
+        setIsAuthenticated(true);
         Navigate("/");
       })
       .catch(err => {
         console.log("Login failed");
         console.log(err);
+        setIsAuthenticated(false);
       });
   };
 
@@ -58,10 +64,12 @@ function LoginPage() {
 
           localStorage.setItem("access_token", access_token);
           localStorage.setItem("refresh_token", refresh_token);
+          setIsAuthenticated(true);
           Navigate("/");
         }
       } catch (error) {
         console.error("Error with the POST request:", error);
+        setIsAuthenticated(false);
       }
     },
     onError: errorResponse => console.log(errorResponse),
diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 2712f97..28eb1c2 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -1,31 +1,30 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import axiosapi from '../../api/AuthenticationApi';
-
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import Link from '@mui/material/Link';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import axiosapi from "../../api/AuthenticationApi";
 
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import CssBaseline from "@mui/material/CssBaseline";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 function Copyright(props) {
   return (
     <Typography variant="body2" color="text.secondary" align="center" {...props}>
-      {'Copyright © '}
+      {"Copyright © "}
       <Link color="inherit" href="https://github.com/TurTaskProject/TurTaskWeb">
         TurTask
-      </Link>{' '}
+      </Link>{" "}
       {new Date().getFullYear()}
-      {'.'}
+      {"."}
     </Typography>
   );
 }
@@ -33,37 +32,36 @@ function Copyright(props) {
 const defaultTheme = createTheme();
 
 export default function SignUp() {
+  const Navigate = useNavigate();
 
-    const Navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    email: "",
+    username: "",
+    password: "",
+  });
+  const [error, setError] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const [formData, setFormData] = useState({
-      email: '',
-      username: '',
-      password: '',
-    });
-    const [error, setError] = useState(null);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-  
-    const handleSubmit = async (e) => {
-      e.preventDefault();
-      setIsSubmitting(true);
-      setError(null);
-  
-      try {
-          axiosapi.createUser(formData);
-      } catch (error) {
-          console.error('Error creating user:', error);
-          setError('Registration failed. Please try again.');
-      } finally {
-          setIsSubmitting(false);
-      }
-      Navigate('/login');
-    };
-  
-    const handleChange = (e) => {
-      const { name, value } = e.target;
-      setFormData({ ...formData, [name]: value });
-    };
+  const handleSubmit = async e => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      axiosapi.createUser(formData);
+    } catch (error) {
+      console.error("Error creating user:", error);
+      setError("Registration failed. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+    Navigate("/login");
+  };
+
+  const handleChange = e => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
 
   return (
     <ThemeProvider theme={defaultTheme}>
@@ -71,13 +69,12 @@ export default function SignUp() {
         <CssBaseline />
         <Box
           sx={{
-              marginTop: 8,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-        >
-          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}>
+          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
             <LockOutlinedIcon />
           </Avatar>
           <Typography component="h1" variant="h5">
@@ -85,17 +82,17 @@ export default function SignUp() {
           </Typography>
           <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
             <Grid container spacing={2}>
-            <Grid item xs={12}>
-              <TextField
-                required
-                fullWidth
-                id="email"
-                label="Email Address"
-                name="email"
-                autoComplete="email"
-                onChange={handleChange}
-              />
-            </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  required
+                  fullWidth
+                  id="email"
+                  label="Email Address"
+                  name="email"
+                  autoComplete="email"
+                  onChange={handleChange}
+                />
+              </Grid>
               <Grid item xs={12}>
                 <TextField
                   autoComplete="username"
@@ -127,12 +124,7 @@ export default function SignUp() {
                 />
               </Grid>
             </Grid>
-            <Button
-              type="submit"
-              fullWidth
-              variant="contained"
-              sx={{ mt: 3, mb: 2 }}
-            >
+            <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
               Sign Up
             </Button>
             <Grid container justifyContent="flex-end">
@@ -148,4 +140,4 @@ export default function SignUp() {
       </Container>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/authentication/refreshAcessToken.jsx b/frontend/src/components/authentication/refreshAcessToken.jsx
index 89204d5..11a74fa 100644
--- a/frontend/src/components/authentication/refreshAcessToken.jsx
+++ b/frontend/src/components/authentication/refreshAcessToken.jsx
@@ -1,8 +1,8 @@
-import axios from 'axios';
+import axios from "axios";
 
 async function refreshAccessToken() {
-  const refresh_token = localStorage.getItem('refresh_token');
-  const access_token = localStorage.getItem('access_token');
+  const refresh_token = localStorage.getItem("refresh_token");
+  const access_token = localStorage.getItem("access_token");
 
   if (access_token) {
     return true;
@@ -12,7 +12,7 @@ async function refreshAccessToken() {
     return false;
   }
 
-  const refreshUrl = 'http://127.0.0.1:8000/api/token/refresh/';
+  const refreshUrl = "http://127.0.0.1:8000/api/token/refresh/";
 
   try {
     const response = await axios.post(refreshUrl, { refresh: refresh_token });
@@ -22,8 +22,8 @@ async function refreshAccessToken() {
       const newAccessToken = response.data.access;
       const newRefreshToken = response.data.refresh;
 
-      localStorage.setItem('access_token', newAccessToken);
-      localStorage.setItem('refresh_token', newRefreshToken);
+      localStorage.setItem("access_token", newAccessToken);
+      localStorage.setItem("refresh_token", newRefreshToken);
 
       return true;
     } else {
diff --git a/frontend/src/components/calendar/TaskDataHandler.jsx b/frontend/src/components/calendar/TaskDataHandler.jsx
index 3c123e9..d96c381 100644
--- a/frontend/src/components/calendar/TaskDataHandler.jsx
+++ b/frontend/src/components/calendar/TaskDataHandler.jsx
@@ -1,42 +1,26 @@
-import { fetchTodoTasks } from '../../api/TaskApi';
+import { readTodoTasks } from "../../api/TaskApi";
 
-let eventGuid = 0
+let eventGuid = 0;
 
-// function getDateAndTime(dateString) {
-//   const dateObject = new Date(dateString);
-
-//   const year = dateObject.getFullYear();
-//   const month = (dateObject.getMonth() + 1).toString().padStart(2, '0');
-//   const day = dateObject.getDate().toString().padStart(2, '0');
-//   const dateFormatted = `${year}-${month}-${day}`;
-
-//   const hours = dateObject.getUTCHours().toString().padStart(2, '0');
-//   const minutes = dateObject.getUTCMinutes().toString().padStart(2, '0');
-//   const seconds = dateObject.getUTCSeconds().toString().padStart(2, '0');
-//   const timeFormatted = `T${hours}:${minutes}:${seconds}`;
-
-//   return dateFormatted + timeFormatted;
-// }
-
-const mapResponseToEvents = (response) => {
-    return response.map(item => ({
-        id: createEventId(),
-        title: item.title,
-        start: item.start_event,
-        end: item.end_event,
-    }));
-}
+const mapResponseToEvents = response => {
+  return response.map(item => ({
+    id: createEventId(),
+    title: item.title,
+    start: item.start_event,
+    end: item.end_event,
+  }));
+};
 
 export async function getEvents() {
-    try {
-        const response = await fetchTodoTasks();
-        return mapResponseToEvents(response);
-    } catch (error) {
-        console.error(error);
-        return [];
-    }
+  try {
+    const response = await readTodoTasks();
+    return mapResponseToEvents(response);
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
 }
 
 export function createEventId() {
-    return String(eventGuid++);
-}
\ No newline at end of file
+  return String(eventGuid++);
+}
diff --git a/frontend/src/components/calendar/calendar.jsx b/frontend/src/components/calendar/calendar.jsx
index 443d4bc..f1f63e5 100644
--- a/frontend/src/components/calendar/calendar.jsx
+++ b/frontend/src/components/calendar/calendar.jsx
@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { formatDate } from "@fullcalendar/core";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { getEvents, createEventId } from "./TaskDataHandler";
-import './index.css'
 
 export default class Calendar extends React.Component {
   state = {
@@ -15,9 +14,9 @@ export default class Calendar extends React.Component {
 
   render() {
     return (
-      <div className="demo-app">
+      <div className="flex font-sans w-full h-screen">
         {this.renderSidebar()}
-        <div className="demo-app-main">
+        <div className="flex-grow p-16 overflow-y-auto h-full max-h-screen">
           <FullCalendar
             plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
             headerToolbar={{
@@ -31,16 +30,11 @@ export default class Calendar extends React.Component {
             selectMirror={true}
             dayMaxEvents={true}
             weekends={this.state.weekendsVisible}
-            initialEvents={getEvents} // alternatively, use the `events` setting to fetch from a feed
+            initialEvents={getEvents}
             select={this.handleDateSelect}
-            eventContent={renderEventContent} // custom render function
+            eventContent={renderEventContent}
             eventClick={this.handleEventClick}
-            eventsSet={this.handleEvents} // called after events are initialized/added/changed/removed
-            /* you can update a remote database when these fire:
-            eventAdd={function(){}}
-            eventChange={function(){}}
-            eventRemove={function(){}}
-            */
+            eventsSet={this.handleEvents}
           />
         </div>
       </div>
@@ -49,23 +43,30 @@ export default class Calendar extends React.Component {
 
   renderSidebar() {
     return (
-      <div className="demo-app-sidebar">
-        <div className="demo-app-sidebar-section">
-          <h2>Instructions</h2>
-          <ul>
+      <div className="w-72 bg-blue-100 border-r border-blue-200 p-8 flex-shrink-0">
+        <div className="mb-8">
+          <h2 className="text-xl font-bold">Instructions</h2>
+          <ul className="list-disc pl-4">
             <li>Select dates and you will be prompted to create a new event</li>
             <li>Drag, drop, and resize events</li>
             <li>Click an event to delete it</li>
           </ul>
         </div>
-        <div className="demo-app-sidebar-section">
-          <label>
-            <input type="checkbox" checked={this.state.weekendsVisible} onChange={this.handleWeekendsToggle}></input>
-            toggle weekends
+
+        <div className="mb-8">
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              checked={this.state.weekendsVisible}
+              onChange={this.handleWeekendsToggle}
+              className="mr-2"
+            />
+            Toggle weekends
           </label>
         </div>
-        <div className="demo-app-sidebar-section">
-          <h2>All Events ({this.state.currentEvents.length})</h2>
+
+        <div>
+          <h2 className="text-xl font-bold">All Events ({this.state.currentEvents.length})</h2>
           <ul>{this.state.currentEvents.map(renderSidebarEvent)}</ul>
         </div>
       </div>
diff --git a/frontend/src/components/calendar/index.css b/frontend/src/components/calendar/index.css
deleted file mode 100644
index e5086bd..0000000
--- a/frontend/src/components/calendar/index.css
+++ /dev/null
@@ -1,55 +0,0 @@
-
-html,
-body,
-body > div { /* the react root */
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
-h2 {
-  margin: 0;
-  font-size: 16px;
-}
-
-ul {
-  margin: 0;
-  padding: 0 0 0 1.5em;
-}
-
-li {
-  margin: 1.5em 0;
-  padding: 0;
-}
-
-b { /* used for event dates/times */
-  margin-right: 3px;
-}
-
-.demo-app {
-  display: flex;
-  min-height: 100%;
-  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
-  font-size: 14px;
-}
-
-.demo-app-sidebar {
-  width: 300px;
-  line-height: 1.5;
-  background: #eaf9ff;
-  border-right: 1px solid #d3e2e8;
-}
-
-.demo-app-sidebar-section {
-  padding: 2em;
-}
-
-.demo-app-main {
-  flex-grow: 1;
-  padding: 3em;
-}
-
-.fc { /* the calendar root */
-  max-width: 1100px;
-  margin: 0 auto;
-}
diff --git a/frontend/src/components/icons/plusIcon.jsx b/frontend/src/components/icons/plusIcon.jsx
deleted file mode 100644
index 080d990..0000000
--- a/frontend/src/components/icons/plusIcon.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-function PlusIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-6 h-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-  );
-}
-
-export default PlusIcon;
diff --git a/frontend/src/components/icons/trashIcon.jsx b/frontend/src/components/icons/trashIcon.jsx
deleted file mode 100644
index f0be9fc..0000000
--- a/frontend/src/components/icons/trashIcon.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-function TrashIcon() {
-  return (
-    React.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: 1.5,
-        className: "w-6 h-6"
-      },
-      React.createElement("path", {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-      })
-    )
-  );
-}
-
-export default TrashIcon;
diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
index a72d7e3..80bd445 100644
--- a/frontend/src/components/kanbanBoard/columnContainer.jsx
+++ b/frontend/src/components/kanbanBoard/columnContainer.jsx
@@ -1,33 +1,18 @@
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import TrashIcon from "../icons/trashIcon";
+import { BsFillTrashFill } from "react-icons/bs";
+import { AiOutlinePlusCircle } from "react-icons/ai";
 import { CSS } from "@dnd-kit/utilities";
 import { useMemo, useState } from "react";
-import PlusIcon from "../icons/plusIcon";
 import TaskCard from "./taskCard";
 
-function ColumnContainer({
-  column,
-  deleteColumn,
-  updateColumn,
-  createTask,
-  tasks,
-  deleteTask,
-  updateTask,
-}) {
+function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
   const [editMode, setEditMode] = useState(false);
 
   const tasksIds = useMemo(() => {
-    return tasks.map((task) => task.id);
+    return tasks.map(task => task.id);
   }, [tasks]);
 
-  const {
-    setNodeRef,
-    attributes,
-    listeners,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
     id: column.id,
     data: {
       type: "Column",
@@ -47,15 +32,15 @@ function ColumnContainer({
         ref={setNodeRef}
         style={style}
         className="
-          bg-columnBackgroundColor
-          w-[350px]
-          h-[500px]
-          max-h-[500px]
-          rounded-md
-          flex
-          flex-col
-        "
-      ></div>
+      opacity-40
+      border-2
+      border-blue-500
+      w-[350px]
+      max-h-[400px]
+      rounded-md
+      flex
+      flex-col
+      "></div>
     );
   }
 
@@ -64,15 +49,13 @@ function ColumnContainer({
       ref={setNodeRef}
       style={style}
       className="
-  bg-columnBackgroundColor
-  w-[350px]
-  h-[500px]
-  max-h-[500px]
+  bg-[#f1f2f4]
+  w-[280px]
+  max-h-[400px]
   rounded-md
   flex
   flex-col
-  "
-    >
+  ">
       {/* Column title */}
       <div
         {...attributes}
@@ -81,45 +64,26 @@ function ColumnContainer({
           setEditMode(true);
         }}
         className="
-      bg-mainBackgroundColor
+      ml-3
       text-md
-      h-[60px]
       cursor-grab
-      rounded-md
-      rounded-b-none
-      p-3
       font-bold
-      border-columnBackgroundColor
-      border-4
       flex
       items-center
       justify-between
-      "
-      >
+      ">
         <div className="flex gap-2">
-          <div
-            className="
-        flex
-        justify-center
-        items-center
-        bg-columnBackgroundColor
-        px-2
-        py-1
-        text-sm
-        rounded-full
-        "
-          ></div>
           {!editMode && column.title}
           {editMode && (
             <input
-              className="bg-white focus:border-rose-500 border rounded outline-none px-2"
+              className="bg-gray-200 focus:border-blue-500 border rounded-md outline-none px-2"
               value={column.title}
-              onChange={(e) => updateColumn(column.id, e.target.value)}
+              onChange={e => updateColumn(column.id, e.target.value)}
               autoFocus
               onBlur={() => {
                 setEditMode(false);
               }}
-              onKeyDown={(e) => {
+              onKeyDown={e => {
                 if (e.key !== "Enter") return;
                 setEditMode(false);
               }}
@@ -137,33 +101,26 @@ function ColumnContainer({
         rounded
         px-1
         py-2
-        "
-        >
-          <TrashIcon />
+        ">
+          <BsFillTrashFill />
         </button>
       </div>
 
       {/* Column task container */}
-      <div className="flex flex-grow flex-col gap-4 p-2 overflow-x-hidden overflow-y-auto">
+      <div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
         <SortableContext items={tasksIds}>
-          {tasks.map((task) => (
-            <TaskCard
-              key={task.id}
-              task={task}
-              deleteTask={deleteTask} // Pass deleteTask to TaskCard
-              updateTask={updateTask}
-            />
+          {tasks.map(task => (
+            <TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} />
           ))}
         </SortableContext>
       </div>
       {/* Column footer */}
       <button
-        className="flex gap-2 items-center border-columnBackgroundColor border-2 rounded-md p-4 border-x-columnBackgroundColor hover:bg-mainBackgroundColor hover:text-rose-500 active:bg-white"
+        className="flex gap-2 items-center rounded-md p-2 my-2 hover:bg-zinc-200 active:bg-zinc-400"
         onClick={() => {
           createTask(column.id);
-        }}
-      >
-        <PlusIcon />
+        }}>
+        <AiOutlinePlusCircle />
         Add task
       </button>
     </div>
diff --git a/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx b/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
new file mode 100644
index 0000000..478a529
--- /dev/null
+++ b/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
@@ -0,0 +1,19 @@
+import ColumnContainer from "./columnContainer";
+
+function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
+  return (
+    <div className="card bg-[#f1f2f4] shadow p-1 my-2 border-2">
+      <ColumnContainer
+        column={column}
+        deleteColumn={deleteColumn}
+        updateColumn={updateColumn}
+        createTask={createTask}
+        tasks={tasks}
+        deleteTask={deleteTask}
+        updateTask={updateTask}
+      />
+    </div>
+  );
+}
+
+export default ColumnContainerCard;
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index b50f354..7866bbb 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -1,16 +1,10 @@
-import PlusIcon from "../icons/plusIcon";
 import { useMemo, useState } from "react";
-import ColumnContainer from "./columnContainer";
-import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
+import ColumnContainerCard from "./columnContainerWrapper";
+import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { createPortal } from "react-dom";
 import TaskCard from "./taskCard";
+import { AiOutlinePlusCircle } from "react-icons/ai";
 
 const defaultCols = [
   {
@@ -98,7 +92,7 @@ const defaultTasks = [
 
 function KanbanBoard() {
   const [columns, setColumns] = useState(defaultCols);
-  const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
+  const columnsId = useMemo(() => columns.map(col => col.id), [columns]);
 
   const [tasks, setTasks] = useState(defaultTasks);
 
@@ -123,19 +117,13 @@ function KanbanBoard() {
         items-center
         overflow-x-auto
         overflow-y-hidden
-    "
-    >
-      <DndContext
-        sensors={sensors}
-        onDragStart={onDragStart}
-        onDragEnd={onDragEnd}
-        onDragOver={onDragOver}
-      >
-        <div className="m-auto flex gap-4">
+    ">
+      <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragOver={onDragOver}>
+        <div className="ml-2 flex gap-4">
           <div className="flex gap-4">
             <SortableContext items={columnsId}>
-              {columns.map((col) => (
-                <ColumnContainer
+              {columns.map(col => (
+                <ColumnContainerCard
                   key={col.id}
                   column={col}
                   deleteColumn={deleteColumn}
@@ -143,7 +131,7 @@ function KanbanBoard() {
                   createTask={createTask}
                   deleteTask={deleteTask}
                   updateTask={updateTask}
-                  tasks={tasks.filter((task) => task.columnId === col.id)}
+                  tasks={tasks.filter(task => task.columnId === col.id)}
                 />
               ))}
             </SortableContext>
@@ -154,48 +142,41 @@ function KanbanBoard() {
               createNewColumn();
             }}
             className="
-      h-[60px]
-      w-[350px]
-      min-w-[350px]
-      cursor-pointer
-      rounded-lg
-      bg-mainBackgroundColor
-      border-2
-      border-columnBackgroundColor
-      p-4
-      ring-rose-500
-      hover:ring-2
-      flex
-      gap-2
-      "
-          >
-            <PlusIcon />
+                      h-[60px]
+                      w-[268px]
+                      max-w-[268px]
+                      cursor-pointer
+                      rounded-xl
+                      bg-[#f1f2f4]
+                      border-2
+                      p-4
+                      hover:bg-gray-200
+                      flex
+                      gap-2
+                      my-2
+                      bg-opacity-60
+                      ">
+            <div className="my-1">
+              <AiOutlinePlusCircle />
+            </div>
             Add Column
           </button>
         </div>
 
         {createPortal(
-          <DragOverlay>
+          <DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
             {activeColumn && (
-              <ColumnContainer
+              <ColumnContainerCard
                 column={activeColumn}
                 deleteColumn={deleteColumn}
                 updateColumn={updateColumn}
                 createTask={createTask}
                 deleteTask={deleteTask}
                 updateTask={updateTask}
-                tasks={tasks.filter(
-                  (task) => task.columnId === activeColumn.id
-                )}
-              />
-            )}
-            {activeTask && (
-              <TaskCard
-                task={activeTask}
-                deleteTask={deleteTask}
-                updateTask={updateTask}
+                tasks={tasks.filter(task => task.columnId === activeColumn.id)}
               />
             )}
+            {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
           </DragOverlay>,
           document.body
         )}
@@ -214,12 +195,12 @@ function KanbanBoard() {
   }
 
   function deleteTask(id) {
-    const newTasks = tasks.filter((task) => task.id !== id);
+    const newTasks = tasks.filter(task => task.id !== id);
     setTasks(newTasks);
   }
 
   function updateTask(id, content) {
-    const newTasks = tasks.map((task) => {
+    const newTasks = tasks.map(task => {
       if (task.id !== id) return task;
       return { ...task, content };
     });
@@ -237,15 +218,15 @@ function KanbanBoard() {
   }
 
   function deleteColumn(id) {
-    const filteredColumns = columns.filter((col) => col.id !== id);
+    const filteredColumns = columns.filter(col => col.id !== id);
     setColumns(filteredColumns);
 
-    const newTasks = tasks.filter((t) => t.columnId !== id);
+    const newTasks = tasks.filter(t => t.columnId !== id);
     setTasks(newTasks);
   }
 
   function updateColumn(id, title) {
-    const newColumns = columns.map((col) => {
+    const newColumns = columns.map(col => {
       if (col.id !== id) return col;
       return { ...col, title };
     });
@@ -280,10 +261,10 @@ function KanbanBoard() {
     const isActiveAColumn = active.data.current?.type === "Column";
     if (!isActiveAColumn) return;
 
-    setColumns((columns) => {
-      const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
+    setColumns(columns => {
+      const activeColumnIndex = columns.findIndex(col => col.id === activeId);
 
-      const overColumnIndex = columns.findIndex((col) => col.id === overId);
+      const overColumnIndex = columns.findIndex(col => col.id === overId);
 
       return arrayMove(columns, activeColumnIndex, overColumnIndex);
     });
@@ -304,9 +285,9 @@ function KanbanBoard() {
     if (!isActiveATask) return;
 
     if (isActiveATask && isOverATask) {
-      setTasks((tasks) => {
-        const activeIndex = tasks.findIndex((t) => t.id === activeId);
-        const overIndex = tasks.findIndex((t) => t.id === overId);
+      setTasks(tasks => {
+        const activeIndex = tasks.findIndex(t => t.id === activeId);
+        const overIndex = tasks.findIndex(t => t.id === overId);
 
         if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) {
           tasks[activeIndex].columnId = tasks[overIndex].columnId;
@@ -320,8 +301,8 @@ function KanbanBoard() {
     const isOverAColumn = over.data.current?.type === "Column";
 
     if (isActiveATask && isOverAColumn) {
-      setTasks((tasks) => {
-        const activeIndex = tasks.findIndex((t) => t.id === activeId);
+      setTasks(tasks => {
+        const activeIndex = tasks.findIndex(t => t.id === activeId);
 
         tasks[activeIndex].columnId = overId;
         return arrayMove(tasks, activeIndex, activeIndex);
diff --git a/frontend/src/components/kanbanBoard/kanbanPage.jsx b/frontend/src/components/kanbanBoard/kanbanPage.jsx
new file mode 100644
index 0000000..b362330
--- /dev/null
+++ b/frontend/src/components/kanbanBoard/kanbanPage.jsx
@@ -0,0 +1,36 @@
+import KanbanBoard from "./kanbanBoard";
+import React, { useState } from 'react';
+
+const KanbanPage = () => {
+    const [activeTab, setActiveTab] = useState('kanban');
+
+    const handleTabClick = (tabId) => {
+      setActiveTab(tabId);
+    };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex justify-center border-2 py-3 mb-1">
+        <div>
+          <div className="tabs tabs-boxed">
+            <a
+              id="kanban"
+              className={`tab ${activeTab === "kanban" ? "tab-active" : ""}`}
+              onClick={() => handleTabClick("kanban")}>
+              Kanban
+            </a>
+            <a
+              id="table"
+              className={`tab ${activeTab === "table" ? "tab-active" : ""}`}
+              onClick={() => handleTabClick("table")}>
+              Table
+            </a>
+          </div>
+        </div>
+      </div>
+      <KanbanBoard />
+    </div>
+  );
+};
+
+export default KanbanPage;
diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx
index cc2f4a4..379abf5 100644
--- a/frontend/src/components/kanbanBoard/taskCard.jsx
+++ b/frontend/src/components/kanbanBoard/taskCard.jsx
@@ -1,26 +1,18 @@
 import { useState } from "react";
-import TrashIcon from "../icons/trashIcon";
+import { BsFillTrashFill } from "react-icons/bs";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import TaskDetailModal from "./taskDetailModal";
 
 function TaskCard({ task, deleteTask, updateTask }) {
   const [mouseIsOver, setMouseIsOver] = useState(false);
-  const [editMode, setEditMode] = useState(true);
 
-  const {
-    setNodeRef,
-    attributes,
-    listeners,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
     id: task.id,
     data: {
       type: "Task",
       task,
     },
-    disabled: editMode,
   });
 
   const style = {
@@ -28,11 +20,9 @@ function TaskCard({ task, deleteTask, updateTask }) {
     transform: CSS.Transform.toString(transform),
   };
 
-  const toggleEditMode = () => {
-    setEditMode((prev) => !prev);
-    setMouseIsOver(false);
-  };
-
+  {
+    /* If card is dragged */
+  }
   if (isDragging) {
     return (
       <div
@@ -40,70 +30,43 @@ function TaskCard({ task, deleteTask, updateTask }) {
         style={style}
         className="
         opacity-30
-      bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl border-2 border-rose-500  cursor-grab relative
+      bg-mainBackgroundColor p-2.5 items-center flex text-left rounded-xl border-2 border-gray-400  cursor-grab relative
       "
       />
     );
   }
 
-  if (editMode) {
-    return (
+  return (
+    <div>
+      <TaskDetailModal />
       <div
         ref={setNodeRef}
-        style={style}
         {...attributes}
         {...listeners}
-        className="outline-double outline-1 outline-offset-2 hover:outline-double hover:outline-1 hover:outline-offset-2 bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative"
-      >
-        <textarea
-          className="
-        h-[90%]
-        w-full resize-none border-none rounded bg-transparent text-black focus:outline-none
-        "
-          value={task.content}
-          autoFocus
-          placeholder="Task content here"
-          onBlur={toggleEditMode}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && e.shiftKey) {
-              toggleEditMode();
-            }
-          }}
-          onChange={(e) => updateTask(task.id, e.target.value)}
-        />
+        style={style}
+        className="justify-center items-center flex text-left rounded-xl cursor-grab relative hover:border-2 hover:border-blue-400 shadow bg-white"
+        onMouseEnter={() => {
+          setMouseIsOver(true);
+        }}
+        onMouseLeave={() => {
+          setMouseIsOver(false);
+        }}>
+        <p
+          className="p-2.5 my-auto w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl shadow bg-white"
+          onClick={() => document.getElementById("task_detail_modal").showModal()}>
+          {task.content}
+        </p>
+
+        {mouseIsOver && (
+          <button
+            onClick={() => {
+              deleteTask(task.id);
+            }}
+            className="stroke-white absolute right-0 top-1/2 rounded-full bg-white -translate-y-1/2 bg-columnBackgroundColor p-2 hover:opacity-100 ">
+            <BsFillTrashFill />
+          </button>
+        )}
       </div>
-    );
-  }
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
-      {...listeners}
-      onClick={toggleEditMode}
-      className="outline-double outline-1 outline-offset-2 hover:outline-double hover:outline-1 hover:outline-offset-2 sbg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative task"
-      onMouseEnter={() => {
-        setMouseIsOver(true);
-      }}
-      onMouseLeave={() => {
-        setMouseIsOver(false);
-      }}
-    >
-      <p className="my-auto h-[90%] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap">
-        {task.content}
-      </p>
-
-      {mouseIsOver && (
-        <button
-          onClick={() => {
-            deleteTask(task.id);
-          }}
-          className="stroke-white absolute right-4 top-1/2 -translate-y-1/2 bg-columnBackgroundColor p-2 rounded opacity-60 hover:opacity-100"
-        >
-          <TrashIcon />
-        </button>
-      )}
     </div>
   );
 }
diff --git a/frontend/src/components/kanbanBoard/taskDetailModal.jsx b/frontend/src/components/kanbanBoard/taskDetailModal.jsx
new file mode 100644
index 0000000..35d5e14
--- /dev/null
+++ b/frontend/src/components/kanbanBoard/taskDetailModal.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+function TaskDetailModal() {
+  return (
+    <dialog id="task_detail_modal" className="modal">
+      <div className="modal-box">
+        <form method="dialog">
+          <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+        </form>
+        <h3 className="font-bold text-lg">Hello!</h3>
+        <p className="py-4">Press ESC key or click on ✕ button to close</p>
+      </div>
+    </dialog>
+  );
+}
+
+export default TaskDetailModal;
diff --git a/frontend/src/components/IconSideNav.jsx b/frontend/src/components/navigations/IconSideNav.jsx
similarity index 87%
rename from frontend/src/components/IconSideNav.jsx
rename to frontend/src/components/navigations/IconSideNav.jsx
index 982bc01..24b74fc 100644
--- a/frontend/src/components/IconSideNav.jsx
+++ b/frontend/src/components/navigations/IconSideNav.jsx
@@ -1,11 +1,6 @@
 import { useState } from "react";
-import {
-  AiOutlineHome,
-  AiOutlineSchedule,
-  AiOutlineUnorderedList,
-  AiOutlinePieChart,
-  AiOutlinePlus,
-} from "react-icons/ai";
+import { AiOutlineHome, AiOutlineSchedule, AiOutlineUnorderedList, AiOutlinePieChart } from "react-icons/ai";
+import { PiStepsDuotone } from "react-icons/pi";
 import { AnimatePresence, motion } from "framer-motion";
 import { Link, useNavigate } from "react-router-dom";
 
@@ -14,7 +9,7 @@ const menuItems = [
   { id: 1, path: "/tasks", icon: <AiOutlineUnorderedList /> },
   { id: 2, path: "/calendar", icon: <AiOutlineSchedule /> },
   { id: 3, path: "/analytic", icon: <AiOutlinePieChart /> },
-  { id: 4, path: "/priority", icon: <AiOutlinePlus /> },
+  { id: 4, path: "/priority", icon: <PiStepsDuotone /> },
 ];
 
 const IconSideNav = () => {
@@ -29,7 +24,7 @@ const SideNav = () => {
   const [selected, setSelected] = useState(0);
 
   return (
-    <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-screen">
+    <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-full fixed top-0 left-0 z-50">
       {menuItems.map(item => (
         <NavItem
           key={item.id}
diff --git a/frontend/src/components/navigations/Navbar.jsx b/frontend/src/components/navigations/Navbar.jsx
new file mode 100644
index 0000000..0c95389
--- /dev/null
+++ b/frontend/src/components/navigations/Navbar.jsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import axiosapi from "../../api/AuthenticationApi";
+import { useAuth } from "../../hooks/authentication/IsAuthenticated"; 
+
+const settings = {
+  Profile: '/profile',
+  Account: '/account',
+};
+
+function NavBar() {
+  const Navigate = useNavigate();
+
+  const { isAuthenticated, setIsAuthenticated } = useAuth();
+
+  const logout = () => {
+    axiosapi.apiUserLogout();
+    setIsAuthenticated(false);
+    Navigate("/");
+  };
+
+  return (
+    <div data-theme="night" className="navbar bg-base-100">
+      <div className="flex-1">
+        <a className="btn btn-ghost normal-case text-xl" href="/">
+          TurTask
+        </a>
+      </div>
+      <div className="flex-none gap-2">
+        <div className="form-control">
+          <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
+        </div>
+        {isAuthenticated ? (
+          <div className="dropdown dropdown-end">
+            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+              <div className="w-10 rounded-full">
+                <img src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
+              </div>
+            </label>
+            <ul
+              tabIndex={0}
+              className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
+              <li>
+                <a href={settings.Profile} className="justify-between">
+                  Profile
+                </a>
+              </li>
+              <li>
+                <a href={settings.Account}>Settings</a>
+              </li>
+              <li>
+                <a onClick={logout}>Logout</a>
+              </li>
+            </ul>
+          </div>
+        ) : (
+          <div className="flex gap-2">
+            <button className="btn btn-outline btn-info" onClick={() => Navigate("/login")}>
+              Login
+            </button>
+            <button className="btn btn-success" onClick={() => Navigate("/signup")}>
+              Sign Up
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+export default NavBar;
diff --git a/frontend/src/components/navigators/Navbar.jsx b/frontend/src/components/navigators/Navbar.jsx
index 3f42689..e69de29 100644
--- a/frontend/src/components/navigators/Navbar.jsx
+++ b/frontend/src/components/navigators/Navbar.jsx
@@ -1,69 +0,0 @@
-import * as React from "react";
-import { useNavigate } from "react-router-dom";
-import IsAuthenticated from "../authentication/IsAuthenticated";
-import axiosapi from "../../api/AuthenticationApi";
-
-const settings = {
-  Profile: '/profile',
-  Account: '/account',
-};
-
-function NavBar() {
-  const Navigate = useNavigate();
-
-  const isAuthenticated = IsAuthenticated();
-
-  const logout = () => {
-    axiosapi.apiUserLogout();
-    Navigate("/");
-  };
-
-  return (
-    <div data-theme="night" className="navbar bg-base-100">
-      <div className="flex-1">
-        <a className="btn btn-ghost normal-case text-xl" href="/">
-          TurTask
-        </a>
-      </div>
-      <div className="flex-none gap-2">
-        <div className="form-control">
-          <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
-        </div>
-        {isAuthenticated ? (
-          <div className="dropdown dropdown-end">
-            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-              <div className="w-10 rounded-full">
-                <img src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
-              </div>
-            </label>
-            <ul
-              tabIndex={0}
-              className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
-              <li>
-                <a href={settings.Profile} className="justify-between">
-                  Profile
-                </a>
-              </li>
-              <li>
-                <a href={settings.Account}>Settings</a>
-              </li>
-              <li>
-                <a onClick={logout}>Logout</a>
-              </li>
-            </ul>
-          </div>
-        ) : (
-          <div className="flex gap-2">
-            <button className="btn btn-outline btn-info" onClick={() => Navigate("/login")}>
-              Login
-            </button>
-            <button className="btn btn-success" onClick={() => Navigate("/signup")}>
-              Sign Up
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-export default NavBar;
diff --git a/frontend/src/components/profilePage.jsx b/frontend/src/components/profilePage.jsx
new file mode 100644
index 0000000..4b0d0b4
--- /dev/null
+++ b/frontend/src/components/profilePage.jsx
@@ -0,0 +1,146 @@
+import * as React from "react";
+import ProfileUpdateComponent from "./ProfileUpdateComponent";
+
+function ProfileUpdatePage() {
+  return (
+    <div>
+      <div className="stats shadow mt-3">
+        <div className="stat">
+          <div className="stat-title truncate">Username</div>
+          <div className="stat-value truncate">Sirin</div>
+          <div className="stat-desc truncate">User ID</div>
+          <div className="stat-figure text-secondary">
+            <div className="avatar online">
+              <div className="w-20 rounded-full">
+                <img src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Health</div>
+          <div className="stat-value flex truncate">
+            234/3213
+            <div className="stat-figure text-secondary px-2">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="red" viewBox="0 0 24 24" className="inline-block w-8 h-8">
+                <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0"></path>
+              </svg>
+            </div>
+          </div>
+          <div className="stat-desc py-2">32% Remain</div>
+          <progress className="progress progress-error w-56" value={20} max="100"></progress>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title truncate">Level</div>
+          <div className="stat-value flex">
+            1
+            <div className="stat-figure text-secondary px-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="#3abff8"
+                viewBox="0 0 24 24"
+                className="inline-block w-8 h-8">
+                <path d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+              </svg>
+            </div>
+          </div>
+          <div className="stat-desc py-2">3213/321312321 points</div>
+          <progress class="progress progress-info w-36" value="10" max="100"></progress>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Gold</div>
+          <div className="stat-value flex truncate">
+            331412421
+            <div className="stat-figure text-secondary px-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block w-8 h-8 stroke-current">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  stroke="gold"
+                  d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
+              </svg>
+            </div>
+          </div>
+          <div className="stat-desc py-2">Top 12% of Global Ranking</div>
+          <progress className="progress progress-warning w-56" value={20} max="100"></progress>
+        </div>
+      </div>
+
+      <div className="card bg-base-100 shadow">
+        <div class="card-body">
+          <h2 class="card-title">About me</h2>
+          <div class="card-actions justify-end"></div>
+          <textarea class="textarea textarea-bordered textarea-lg w-full" disabled>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dolores recusandae, officiis consequuntur
+            nam, non ab commodi totam mollitia iusto nemo voluptatum error aliquam similique perspiciatis, eligendi
+            nulla. Animi, sit?
+          </textarea>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 grid-rows-2 gap-4 my-2">
+        <div className="col-span-full">
+          <div className="card bg-base-100 shadow">
+            <div class="card-body">
+              <h2 class="card-title">Overall Statistics</h2>
+              <div class="card-actions justify-end"></div>
+            </div>
+          </div>
+        </div>
+        <div className="col-start-2 row-start-2">
+          <div className="card bg-base-100 shadow">
+            <div class="card-body">
+              <h2 class="card-title">Achievements</h2>
+              <div class="card-actions justify-end"></div>
+            </div>
+          </div>
+        </div>
+        <div className="col-start-1 row-start-2">
+          <div className="card bg-base-100 shadow">
+            <div class="card-body">
+              <h2 class="card-title">Friends</h2>
+              <div class="card-actions justify-end"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="fixed bottom-4 right-4">
+        <ul className="menu menu-horizontal bg-base-200 rounded-box">
+          <li>
+            <a onClick={() => document.getElementById("my_modal_4").showModal()}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="currentColor"
+                viewBox="0 0 16 16"
+                stroke="currentColor">
+                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
+              </svg>
+              <p className="text-xl font-bold">Edit</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      {/* Modal */}
+      <dialog id="my_modal_4" className="modal">
+        <div className="modal-box w-11/12 max-w-5xl flex flex-col">
+          <form method="dialog">
+            <ProfileUpdateComponent />
+            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+          </form>
+        </div>
+      </dialog>
+    </div>
+  );
+}
+export default ProfileUpdatePage;
diff --git a/frontend/src/components/signup.jsx b/frontend/src/components/signup.jsx
index 5c1bc7b..aba1642 100644
--- a/frontend/src/components/signup.jsx
+++ b/frontend/src/components/signup.jsx
@@ -1,59 +1,59 @@
-import React, { useState } from 'react';
-import axiosapi from '../api/axiosapi';
-import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Container from '@material-ui/core/Container';
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { useState } from "react";
+import axiosapi from "../api/axiosapi";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import Button from "@material-ui/core/Button";
+import { makeStyles } from "@material-ui/core/styles";
 
-const useStyles = makeStyles((theme) => ({
-    // Styles for various elements
-    paper: {
-        marginTop: theme.spacing(8),
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-    },
-    avatar: {
-        margin: theme.spacing(1),
-        backgroundColor: theme.palette.secondary.main,
-    },
-    form: {
-        width: '100%',
-        marginTop: theme.spacing(1),
-    },
-    submit: {
-        margin: theme.spacing(3, 0, 2),
-    },
+const useStyles = makeStyles(theme => ({
+  // Styles for various elements
+  paper: {
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: "100%",
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
 }));
 
 const Signup = () => {
   const classes = useStyles();
   const [formData, setFormData] = useState({
-    email: '',
-    username: '',
-    password: '',
+    email: "",
+    username: "",
+    password: "",
   });
   const [error, setError] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async e => {
     e.preventDefault();
     setIsSubmitting(true);
     setError(null);
 
     try {
-        axiosapi.createUser(formData);
+      axiosapi.createUser(formData);
     } catch (error) {
-        console.error('Error creating user:', error);
-        setError('Registration failed. Please try again.'); // Set an error message
+      console.error("Error creating user:", error);
+      setError("Registration failed. Please try again."); // Set an error message
     } finally {
-        setIsSubmitting(false);
+      setIsSubmitting(false);
     }
   };
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
@@ -102,9 +102,8 @@ const Signup = () => {
             variant="contained"
             color="primary"
             className={classes.submit}
-            disabled={isSubmitting}
-          >
-            {isSubmitting ? 'Signing up...' : 'Sign Up'}
+            disabled={isSubmitting}>
+            {isSubmitting ? "Signing up..." : "Sign Up"}
           </Button>
         </form>
         {error && <Typography color="error">{error}</Typography>}
diff --git a/frontend/src/components/testAuth.jsx b/frontend/src/components/testAuth.jsx
index abd7ba1..1edf44a 100644
--- a/frontend/src/components/testAuth.jsx
+++ b/frontend/src/components/testAuth.jsx
@@ -1,42 +1,47 @@
-import React, { useState, useEffect } from 'react';
-import axiosapi from '../api/AuthenticationApi';
-import { Button } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import axiosapi from "../api/AuthenticationApi";
+import { Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 function TestAuth() {
-    let Navigate = useNavigate();
+  let Navigate = useNavigate();
 
-    const [message, setMessage] = useState("");
+  const [message, setMessage] = useState("");
 
-    useEffect(() => {
-        // Fetch the "hello" data from the server when the component mounts
-        axiosapi.getGreeting().then(res => {
-            console.log(res.data);
-            setMessage(res.data.user);
-        }).catch(err => {
-            console.log(err);
-            setMessage("");
-        });
-    }, []);
+  useEffect(() => {
+    // Fetch the "hello" data from the server when the component mounts
+    axiosapi
+      .getGreeting()
+      .then(res => {
+        console.log(res.data);
+        setMessage(res.data.user);
+      })
+      .catch(err => {
+        console.log(err);
+        setMessage("");
+      });
+  }, []);
 
-    const logout = () => {
-        // Log out the user, clear tokens, and navigate to the "/testAuth" route
-        axiosapi.apiUserLogout();
-        Navigate('/testAuth');
-    }
+  const logout = () => {
+    // Log out the user, clear tokens, and navigate to the "/testAuth" route
+    axiosapi.apiUserLogout();
+    Navigate("/testAuth");
+  };
 
-    return (
+  return (
+    <div>
+      {message !== "" && (
         <div>
-            {message !== "" && (
-                <div>
-                    <h1 class="text-xl font-bold">Login! Hello!</h1>
-                    <h2>{message}</h2>
-                    <Button variant="contained" onClick={logout}>Logout</Button>
-                </div>
-            )}
-            {message === "" && <h1 class="text-xl font-bold">Need to sign in, No authentication found</h1>}
+          <h1 class="text-xl font-bold">Login! Hello!</h1>
+          <h2>{message}</h2>
+          <Button variant="contained" onClick={logout}>
+            Logout
+          </Button>
         </div>
-    );
+      )}
+      {message === "" && <h1 class="text-xl font-bold">Need to sign in, No authentication found</h1>}
+    </div>
+  );
 }
 
 export default TestAuth;
diff --git a/frontend/src/hooks/authentication/IsAuthenticated.jsx b/frontend/src/hooks/authentication/IsAuthenticated.jsx
new file mode 100644
index 0000000..8874645
--- /dev/null
+++ b/frontend/src/hooks/authentication/IsAuthenticated.jsx
@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(() => {
+    const access_token = localStorage.getItem("access_token");
+    return !!access_token;
+  });
+
+  useEffect(() => {
+    const handleTokenChange = () => {
+      const newAccessToken = localStorage.getItem("access_token");
+      setIsAuthenticated(!!newAccessToken);
+    };
+
+    handleTokenChange();
+
+    window.addEventListener("storage", handleTokenChange);
+
+    return () => {
+      window.removeEventListener("storage", handleTokenChange);
+    };
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index daa8633..fcd32b6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,20 +8,18 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
-.nav-link{
-  color:black;
+.nav-link {
+  color: black;
   /* border: 1px solid white; */
   padding: 1em;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index f5430b9..38cca17 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,15 +1,20 @@
-import React from "react";
+import React, { Fragment } from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import { GoogleOAuthProvider} from '@react-oauth/google';
-import { BrowserRouter } from 'react-router-dom';
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./hooks/authentication/IsAuthenticated";
 
-const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID
+const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
     <BrowserRouter>
-      <App />
+      <Fragment>
+        <AuthProvider>
+        <App />
+        </AuthProvider>
+      </Fragment>
     </BrowserRouter>
   </GoogleOAuthProvider>
-);
\ No newline at end of file
+);
diff --git a/requirements.txt b/requirements.txt
index 98f2a15..344b980 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -14,4 +14,5 @@ google_auth_oauthlib>=1.1
 google-auth-httplib2>=0.1
 django-storages[s3]>=1.14
 Pillow>=10.1
-drf-spectacular>=0.26
\ No newline at end of file
+drf-spectacular>=0.26
+python-dateutil>=2.8
\ No newline at end of file