diff --git a/src/App.jsx b/src/App.jsx
index 9d0bd8288e2c0a1cb0a4fa3fc865f468a7503558..82823910a46581ede9f7806d2067b8ca68573079 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,24 +4,12 @@ import SignUp from "./pages/SignUp";
 import Home from "@pages/Home";
 import "./App.css";
 import Todolist from "@pages/Todolist";
-import { TasksContext } from "@services/Context";
-import { useState, useEffect} from "react";
+import { TasksProvider } from "@context/TasksContext";
 import Navbar from "@components/Navbar.jsx";
 
 function App() {
-  const [tasks, setTasks] = useState(() => {
-    const savedTasks = JSON.parse(localStorage.getItem("tasks"));
-    return savedTasks ? savedTasks : []
-  });
-
-  useEffect(() => {
-    if (tasks) {
-      localStorage.setItem('tasks', JSON.stringify(tasks));
-    }
-  }, [tasks]);
-
   return (
-    <TasksContext.Provider value={{ tasks, setTasks }}>
+    <TasksProvider>
     <Router>
         <div className="min-h-screen bg-gray-50">
             <Navbar />
@@ -35,7 +23,7 @@ function App() {
             </main>
         </div>
     </Router>
-    </TasksContext.Provider>
+    </TasksProvider>
   );
 }
 
diff --git a/src/components/dashboard/TaskStats.jsx b/src/components/dashboard/TaskStats.jsx
index 92a8331c368ea164e871dc3c5aea9b62200b60f9..440bca0c4784450b9cada2a408e5aa34e37588c6 100644
--- a/src/components/dashboard/TaskStats.jsx
+++ b/src/components/dashboard/TaskStats.jsx
@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
 import TaskCard from "@components/dashboard/TaskCard";
-import { TasksContext } from "@services/Context";
+import { useTasks } from "@context/TasksContext";
 
 const TaskStats = () => {
-  const { tasks } = useContext(TasksContext);
+  const { tasks } = useTasks();
 
   const completed = tasks.filter(task => task.isCompleted).length;
   const incompleted = tasks.filter(task => !task.isCompleted).length;
diff --git a/src/components/dashboard/TasksStatPercent.jsx b/src/components/dashboard/TasksStatPercent.jsx
index b1ec843a44bebd76a4d14abb1632a9844bebeb6c..56508a87aa885c421332d665173210ce0f6e0f88 100644
--- a/src/components/dashboard/TasksStatPercent.jsx
+++ b/src/components/dashboard/TasksStatPercent.jsx
@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
-import { TasksContext } from "@services/Context";
+import { useTasks } from "@context/TasksContext";
 
 const TasksStatPercent = () => {
-    const { tasks } = useContext(TasksContext);
+    const { tasks } = useTasks();
 
     const totalTasks = tasks.length;
     const completedTasks = tasks.filter(task => task.isCompleted).length;
diff --git a/src/components/todolist/TaskItem.jsx b/src/components/todolist/TaskItem.jsx
index 2a4adcb50cdf43330d5732a9030b927b49ade754..1305331c046b5a087ae6801671b5c404de49356a 100644
--- a/src/components/todolist/TaskItem.jsx
+++ b/src/components/todolist/TaskItem.jsx
@@ -1,10 +1,9 @@
-import { TasksContext } from "@services/Context"
-import { useContext } from "react"
+import { useTasks } from "@context/TasksContext"
 import { TrashIcon } from '@heroicons/react/24/outline'
 
 export default function TaskItem({ task }) {
 
-    const { tasks, setTasks } = useContext(TasksContext)
+    const { tasks, setTasks } = useTasks()
 
     const onChange = (event) => {
         const nextTasks = [...tasks]
diff --git a/src/context/TasksContext.jsx b/src/context/TasksContext.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..57c7c373cfbce09b17778d57f292c825d12f1cdf
--- /dev/null
+++ b/src/context/TasksContext.jsx
@@ -0,0 +1,28 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const TasksContext = createContext('tasks');
+
+const TasksProvider = ({children}) => {
+    const [tasks, setTasks] = useState(() => {
+        const savedTasks = JSON.parse(localStorage.getItem("tasks"));
+        return savedTasks ? savedTasks : []
+      });
+
+      useEffect(() => {
+        if (tasks) {
+          localStorage.setItem('tasks', JSON.stringify(tasks));
+        }
+      }, [tasks]);
+
+      return (
+        <TasksContext.Provider value={{ tasks, setTasks}}>
+            {children}
+        </TasksContext.Provider>
+      )
+}
+
+const useTasks = () => {
+    return useContext(TasksContext)
+}
+
+export { TasksProvider, useTasks }
\ No newline at end of file
diff --git a/src/pages/Todolist.jsx b/src/pages/Todolist.jsx
index 98182ffd14b45e5c9b2e415289fbb664f5e40fa0..343f0201df39cf4879c173d0f4b5d8860a3cdfbb 100644
--- a/src/pages/Todolist.jsx
+++ b/src/pages/Todolist.jsx
@@ -1,11 +1,11 @@
 import AddTaskButton from "@components/todolist/AddTaskButton";
 import Modal from "@components/todolist/Modal";
 import TaskList from "@components/todolist/TaskList";
-import { TasksContext } from "@services/Context";
-import { useContext, useState } from "react";
+import { useState } from "react";
+import { useTasks } from "@context/TasksContext";
 
 export default function Todolist() {
-    const { tasks, setTasks } = useContext(TasksContext)
+    const { tasks, setTasks } = useTasks()
     const saveTask = (task) => {
         setTasks([...tasks, task])
     }
diff --git a/src/services/Context.js b/src/services/Context.js
deleted file mode 100644
index c9f70650a2dd57462b1b5e45056e79ea6cfc2b6d..0000000000000000000000000000000000000000
--- a/src/services/Context.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const TasksContext = createContext('tasks');
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 5333f28bee2feadf9f56e744e64ade75057e5ed5..fa07971628ca49e0a6ef4b5ab4d5341718a56127 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,6 +15,7 @@ export default defineConfig({
       "@components": path.resolve(__dirname, "src/components"),
       "@pages": path.resolve(__dirname, "src/pages"),
       "@services": path.resolve(__dirname, "src/services"),
+      "@context": path.resolve(__dirname, "src/context"),
     },
   },
 });