Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783)
+++ frontend/src/App.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -1,30 +1,45 @@
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
 import CourseCatalog from "./components/SubjectCatalog/SubjectCatalog";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
+import Home from "./pages/Home";
+import Form from "./pages/Form";
+import PrivateRoute from "./components/PrivateRoute";
+import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
 import "./index.css";
-import Home from "./pages/Home";
 
+const Layout = () => (
+  <div className="flex flex-col min-h-screen">
+    <Navbar />
+    <main className="flex-grow">
+      <Outlet />
+    </main>
+    <Footer />
+  </div>
+);
 const router = createBrowserRouter([
-	{
-		path: "/",
-		element: <Home />,
-	},
-	{
-		path: "/subjects",
-		element: <CourseCatalog />,
-	},
-	{
-		path: "/login",
-		element: <Login />,
-	},
-	{
-		path: "/register",
-		element: <Register />,
-	}
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      { path: "", element: <Home /> },
+      { path: "subjects", element: <CourseCatalog /> },
+      { path: "login", element: <Login /> },
+      { path: "register", element: <Register /> },
+      {
+        path: "form",
+        element: (
+          <PrivateRoute>
+            <Form />
+          </PrivateRoute>
+        ),
+      },
+    ],
+  },
 ]);
 
 function App() {
-	return <RouterProvider router={router} />;
+  return <RouterProvider router={router} />;
 }
 
Index: frontend/src/components/Footer.tsx
===================================================================
--- frontend/src/components/Footer.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
+++ frontend/src/components/Footer.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -0,0 +1,10 @@
+import React from "react";
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="bg-gray-100 text-center text-gray-600 py-4 mt-auto">
+      <p className="text-sm">&copy; {new Date().getFullYear()} ИзберИзборен.</p>
+    </footer>
+  );
+};
+export default Footer;
Index: frontend/src/components/LogoutButton.tsx
===================================================================
--- frontend/src/components/LogoutButton.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
+++ frontend/src/components/LogoutButton.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -0,0 +1,19 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const LogoutButton: React.FC = () => {
+  const navigate = useNavigate();
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    navigate("/login");
+  };
+  return (
+    <button
+      onClick={handleLogout}
+      className="bg-red-500 text-white p-2 rounded hover:bg-red-600"
+    >
+      Logout
+    </button>
+  );
+};
+export default LogoutButton;
Index: frontend/src/components/Navbar.tsx
===================================================================
--- frontend/src/components/Navbar.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
+++ frontend/src/components/Navbar.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -0,0 +1,37 @@
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+
+const Navbar: React.FC = () => {
+    const { isAuthenticated, logout } = useAuth();
+    const navigate = useNavigate();
+
+    const handleLogout = () => {
+        logout();
+        navigate("/");
+    }
+    console.log(isAuthenticated); // Log to check state changes
+
+    return (
+        <nav className="p-4 bg-gray-800 text-white flex justify-between">
+          <div className="space-x-4">
+            <Link to="/">Home</Link>
+            <Link to="/subjects">Subjects</Link>
+            {isAuthenticated && <Link to="/form">Form</Link>}
+          </div>
+    
+          <div>
+            {isAuthenticated ? (
+              <button onClick={handleLogout} className="bg-red-500 px-3 py-1 rounded">
+                Logout
+              </button>
+            ) : (
+              <>
+                <Link to="/login" className="mr-3">Login</Link>
+                <Link to="/register">Register</Link>
+              </>
+            )}
+          </div>
+        </nav>
+      );
+    };
+export default Navbar;
Index: frontend/src/components/PrivateRoute.tsx
===================================================================
--- frontend/src/components/PrivateRoute.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
+++ frontend/src/components/PrivateRoute.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+interface PrivateRouteProps {
+    children: React.ReactNode;
+}
+const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
+    const { isAuthenticated } = useAuth();
+    if (!isAuthenticated) {
+        return <Navigate to="/login" replace />;
+    }
+    return <>{children}</>;
+}
+export default PrivateRoute;
Index: frontend/src/context/AuthContext.tsx
===================================================================
--- frontend/src/context/AuthContext.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
+++ frontend/src/context/AuthContext.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+export interface AuthContextType {
+    token: string | null;
+    login: (token:string) => void;
+    logout: () => void;
+    isAuthenticated: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+export default AuthContext;
+
+
Index: frontend/src/context/AuthProvider.tsx
===================================================================
--- frontend/src/context/AuthProvider.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
+++ frontend/src/context/AuthProvider.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -0,0 +1,34 @@
+import React, { useState, useEffect, ReactNode } from "react";
+import AuthContext, { AuthContextType } from "./AuthContext";
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [token, setToken] = useState<string | null>(localStorage.getItem("token"));
+
+  useEffect(() => {
+    const storedToken = localStorage.getItem("token");
+    if (storedToken !== token) {
+      setToken(storedToken);
+    }
+  }, [token]);
+  const login = (newToken: string) => {
+    localStorage.setItem("token", newToken);
+    setToken(newToken);
+  };
+  const logout = () => {
+    localStorage.removeItem("token");
+    setToken(null);
+  };
+  const isAuthenticated = !!token;
+
+  const contextValue: AuthContextType = {
+    token,
+    login,
+    logout,
+    isAuthenticated,
+  };
+  return (
+    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
+  );
+};
Index: frontend/src/hooks/useAuth.ts
===================================================================
--- frontend/src/hooks/useAuth.ts	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
+++ frontend/src/hooks/useAuth.ts	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import AuthContext, { AuthContextType } from "../context/AuthContext";
+
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
Index: frontend/src/main.tsx
===================================================================
--- frontend/src/main.tsx	(revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783)
+++ frontend/src/main.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -3,8 +3,11 @@
 import App from "./App.tsx";
 import "./index.css";
+import { AuthProvider } from "./context/AuthProvider";
 
 createRoot(document.getElementById("root")!).render(
-	<StrictMode>
-		<App />
-	</StrictMode>
+  <StrictMode>
+    <AuthProvider>
+      <App />
+    </AuthProvider>
+  </StrictMode>
 );
Index: frontend/src/pages/Form.tsx
===================================================================
--- frontend/src/pages/Form.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
+++ frontend/src/pages/Form.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Form: React.FC = () => {
+    return (
+        <div>Form!</div>
+    )
+}
+
+export default Form;
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783)
+++ frontend/src/pages/Login.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -3,4 +3,5 @@
 import { useNavigate } from "react-router-dom";
 import PasswordInput from "../components/PasswordInput";
+import { useAuth } from "../hooks/useAuth";
 
 interface LoginForm {
@@ -18,4 +19,5 @@
   >({});
   const navigate = useNavigate();
+  const { login } = useAuth();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -39,5 +41,5 @@
       );
       const token = response.data.token;
-      localStorage.setItem("token", token);
+      login(token);
       navigate("/");
     } catch (err: unknown) {
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 997721a9d300fe4402e7f6db9e40cc1d4e69c783)
+++ frontend/src/pages/Register.tsx	(revision 03b54d263f511b328f6b837e4d2fef641a880974)
@@ -3,4 +3,5 @@
 import { useNavigate } from "react-router-dom";
 import PasswordInput from "../components/PasswordInput";
+import { useAuth } from "../hooks/useAuth";
 
 interface RegisterForm {
@@ -23,4 +24,5 @@
   >({});
   const navigate = useNavigate();
+  const { login } = useAuth();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -48,7 +50,6 @@
       );
 
-      const { token, userType } = response.data;
-      localStorage.setItem("token", token);
-      localStorage.setItem("userType", userType);
+      const { token } = response.data;
+      login(token);
       navigate("/");
     } catch (err: unknown) {