diff --git a/client/src/App.jsx b/client/src/App.jsx
index 088299e..a34077d 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -4,19 +4,28 @@ import "@/common/styles/main.sass";
 import {BrowserRouter} from "react-router-dom";
 import Header from "@/common/components/Header";
 import Content from "@/common/components/Content";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {StatusProvider} from "@/common/contexts/Status";
+import {ToastNotificationProvider} from "@/common/contexts/ToastNotification";
 
 const App = () => {
     const [sidebarOpen, setSidebarOpen] = useState(window.innerWidth >= 1024);
 
+    const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primary-color") || "#E3703F");
+
+    useEffect(() => {
+        document.documentElement.style.setProperty("--primary", primaryColor);
+    }, [primaryColor]);
+
     return (
         <>
             <BrowserRouter>
                 <StatusProvider>
-                    <Sidebar open={sidebarOpen} setOpen={setSidebarOpen}/>
-                    <Header open={sidebarOpen} setOpen={setSidebarOpen} />
-                    <Content/>
+                    <ToastNotificationProvider>
+                        <Sidebar open={sidebarOpen} setOpen={setSidebarOpen}/>
+                        <Header open={sidebarOpen} setOpen={setSidebarOpen} />
+                        <Content/>
+                    </ToastNotificationProvider>
                 </StatusProvider>
             </BrowserRouter>
         </>