Index: ckend/src/main/java/com/shifterwebapp/shifter/course/RangeDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/RangeDto.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ 	(revision )
@@ -1,15 +1,0 @@
-package com.shifterwebapp.shifter.course;
-
-import lombok.AllArgsConstructor;
-import lombok.Builder;
-import lombok.Data;
-import lombok.NoArgsConstructor;
-
-@AllArgsConstructor
-@NoArgsConstructor
-@Data
-@Builder
-public class RangeDto {
-    private Double floor;
-    private Double ceil;
-}
Index: frontend/index.html
===================================================================
--- frontend/index.html	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/index.html	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -5,4 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/src/assets/shifterImg/Two-Arrows-Rotate.png" />
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap" rel="stylesheet">
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Shifter</title>
Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/package-lock.json	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -28,8 +28,10 @@
         "react-slick": "^0.30.3",
         "slick-carousel": "^1.8.1",
-        "tailwindcss": "^4.1.10"
+        "tailwindcss": "^4.1.10",
+        "zustand": "^5.0.6"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
+        "@types/qs": "^6.14.0",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
@@ -2301,4 +2303,11 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
+      "dev": true,
       "license": "MIT"
     },
@@ -5651,4 +5660,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.6.tgz",
+      "integrity": "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/package.json	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -30,8 +30,10 @@
     "react-slick": "^0.30.3",
     "slick-carousel": "^1.8.1",
-    "tailwindcss": "^4.1.10"
+    "tailwindcss": "^4.1.10",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/qs": "^6.14.0",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/App.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -6,6 +6,5 @@
 import Register from "./pages/Register.tsx";
 import Courses from "./pages/Courses.tsx";
-import {useGlobalContext} from "./GlobalContext.tsx";
-import React from "react";
+import {useGlobalContext} from "./context/GlobalContext.tsx";
 
 function LayoutWrapper() {
Index: ontend/src/GlobalContext.tsx
===================================================================
--- frontend/src/GlobalContext.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ 	(revision )
@@ -1,127 +1,0 @@
-import React, {
-    createContext,
-    useState,
-    useEffect,
-    type ReactNode,
-    type Dispatch,
-    type SetStateAction,
-} from "react";
-import axios from "axios";
-import type { User } from "./types/User.tsx";
-import type {UserRegister} from "./types/UserRegister.tsx";
-
-interface GlobalContextType {
-    user: User | null;
-    setUser: Dispatch<SetStateAction<User | null>>;
-    accessToken: string | null;
-    setAccessToken: Dispatch<SetStateAction<string | null>>;
-    register: (user: UserRegister) => Promise<void>;
-    login: (email: string, password: string) => Promise<void>;
-    logout: () => void;
-    refreshAccessToken: () => Promise<void>;
-    loading: boolean;
-}
-
-export const GlobalContext = createContext<GlobalContextType | undefined>(
-    undefined
-);
-
-export const GlobalProvider = ({ children }: { children: ReactNode }) => {
-    const [user, setUser] = useState<User | null>(null);
-    const [accessToken, setAccessToken] = useState<string | null>(null);
-    const [loading, setLoading] = useState(true);
-
-    const backendUrl = import.meta.env.VITE_BACKEND_URL;
-
-    const register = async (user: UserRegister) => {
-        try {
-            const res = await axios.post(
-                `${backendUrl}/api/auth/register`,
-                user,
-                { withCredentials: true }
-            );
-            setAccessToken(res.data.accessToken);
-            setUser(res.data.user);
-        } catch (error) {
-            setAccessToken(null);
-            setUser(null);
-            console.log("Registration failed:", error);
-            throw error;
-        }
-    }
-
-    const login = async (email: string, password: string) => {
-        try {
-            const res = await axios.post(
-                `${backendUrl}/api/auth/authenticate`,
-                { email, password },
-                { withCredentials: true }
-            );
-            setAccessToken(res.data.accessToken);
-            setUser(res.data.user);
-        } catch (error) {
-            setAccessToken(null);
-            setUser(null);
-            console.log("Login failed:", error);
-            throw error;
-        }
-    };
-
-    const logout = async () => {
-        try {
-            await axios.post(`${backendUrl}/api/auth/logout`, {}, { withCredentials: true });
-        } catch (err) {
-            console.warn("Logout failed:", err);
-        } finally {
-            setAccessToken(null);
-            setUser(null);
-        }
-    };
-
-
-    const refreshAccessToken = async () => {
-        setLoading(true);
-        try {
-            const res = await axios.post(`${backendUrl}/api/auth/refresh`, {}, { withCredentials: true });
-            setAccessToken(res.data.accessToken);
-            setUser(res.data.user);
-        } catch (error) {
-            setAccessToken(null);
-            setUser(null);
-            console.log("Refresh token failed: ", error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    useEffect(() => {
-        refreshAccessToken();
-    }, []);
-
-    return (
-        <GlobalContext.Provider
-            value={{
-                user,
-                setUser,
-                accessToken,
-                setAccessToken,
-                register,
-                login,
-                logout,
-                refreshAccessToken,
-                loading,
-            }}
-        >
-            {children}
-        </GlobalContext.Provider>
-    );
-};
-
-// Custom hook for ease of use
-export const useGlobalContext = () => {
-    const context = React.useContext(GlobalContext);
-    if (!context) {
-        throw new Error("useGlobalContext must be used within a GlobalProvider");
-    }
-    return context;
-};
Index: frontend/src/api/auth.ts
===================================================================
--- frontend/src/api/auth.ts	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
+++ frontend/src/api/auth.ts	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -0,0 +1,39 @@
+import axios from "axios";
+import type {UserRegister} from "../types/UserRegister.tsx";
+import type {User} from "../types/User.tsx";
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+export const refreshAccessTokenApi = async (): Promise<{user: User, accessToken: string}> => {
+    const res = await axios.post(`${backendUrl}/api/auth/refresh`,
+        {},
+        {withCredentials: true}
+    );
+
+    return res.data;
+}
+
+export const registerApi = async (user: UserRegister): Promise<{user: User, accessToken: string}> => {
+    const res = await axios.post(`${backendUrl}/api/auth/register`,
+        user,
+        { withCredentials: true }
+    );
+
+    return res.data;
+}
+
+export const loginApi = async (email: string, password: string): Promise<{user: User, accessToken: string}> => {
+    const res = await axios.post(`${backendUrl}/api/auth/authenticate`,
+        {email, password},
+        {withCredentials: true}
+    );
+
+    return res.data;
+}
+
+export const logoutApi = async (): Promise<void> => {
+    await axios.post(`${backendUrl}/api/auth/logout`,
+        {},
+        {withCredentials: true}
+    );
+}
Index: frontend/src/api/axiosInstance.tsx
===================================================================
--- frontend/src/api/axiosInstance.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/api/axiosInstance.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -3,52 +3,65 @@
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
-const axiosInstance = axios.create({
-    baseURL: backendUrl,
-});
+const createAxiosInstance = (getAccessToken: () => string | null) => {
+    const axiosInstance = axios.create({
+        baseURL: backendUrl,
+        withCredentials: true,
+    });
 
-// Request interceptor: attach access token
-axiosInstance.interceptors.request.use(
-    (config: InternalAxiosRequestConfig) => {
-        const token = localStorage.getItem("accessToken");
-        if (token) {
-            config.headers.Authorization = `Bearer ${token}`;
+    // Attach access token dynamically before each request
+    axiosInstance.interceptors.request.use(
+        (config: InternalAxiosRequestConfig) => {
+            const token = getAccessToken();
+            if (token) {
+                config.headers = config.headers || {};
+                config.headers.Authorization = `Bearer ${token}`;
+            }
+            return config;
+        },
+        (error: AxiosError) => {
+            return Promise.reject(error);
         }
-        return config;
-    },
-    (error: AxiosError) => {
-        return Promise.reject(error);
-    }
-);
+    );
 
-// Response interceptor: handle token refresh
-axiosInstance.interceptors.response.use(
-    (response) => response,
-    async (error: AxiosError) => {
-        const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
+    // Response interceptor: handle 401 by refreshing token
+    axiosInstance.interceptors.response.use(
+        (response) => response,
+        async (error: AxiosError) => {
+            const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
 
-        if (error.response && error.response.status === 401 && !originalRequest._retry) {
-            originalRequest._retry = true;
+            if (
+                error.response?.status === 401 &&
+                !originalRequest._retry
+            ) {
+                originalRequest._retry = true;
 
-            try {
-                const refreshToken = localStorage.getItem("refreshToken");
+                try {
+                    // Call refresh endpoint; no token needed in body, cookie sent automatically
+                    const res = await axiosInstance.post("/api/auth/refresh");
 
-                // Call refresh endpoint
-                const res = await axios.post(`${backendUrl}/api/auth/refresh`, { refreshToken });
+                    // The new access token is in res.data.accessToken
+                    const newAccessToken = res.data.accessToken;
 
-                const newAccessToken = res.data.accessToken;
-                localStorage.setItem("accessToken", newAccessToken);
+                    // Optionally you can call a function here to update your React global state
+                    // But since this is outside React, you may want to pass an "onTokenRefresh" callback
+                    // For example: onTokenRefresh(newAccessToken);
 
-                // Retry original request with new token
-                originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
-                return axiosInstance(originalRequest);
-            } catch (refreshError) {
-                console.error("Token refresh failed:", refreshError);
-                // Optionally clear tokens and redirect to login page
+                    // Update header and retry original request
+                    originalRequest.headers = originalRequest.headers || {};
+                    originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+
+                    return axiosInstance(originalRequest);
+                } catch (refreshError) {
+                    console.error("Token refresh failed:", refreshError);
+                    // Optional: trigger logout or token cleanup via a callback
+                }
             }
+
+            return Promise.reject(error);
         }
+    );
 
-        return Promise.reject(error);
-    }
-);
+    return axiosInstance;
+};
 
-export default axiosInstance;
+export default createAxiosInstance;
Index: frontend/src/api/courses.ts
===================================================================
--- frontend/src/api/courses.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/api/courses.ts	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -6,5 +6,5 @@
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
-export const fetchCoursesApi = async (params: FilterParams, signal?: AbortSignal): Promise<Course[]> => {
+export const fetchFilteredCoursesApi = async (params: FilterParams, signal?: AbortSignal): Promise<Course[]> => {
     const res = await axios.get(
         `${backendUrl}/api/courses`,
@@ -15,4 +15,27 @@
         }
     )
+
+    return res.data;
+}
+
+export const fetchAllCoursesApi = async (signal?: AbortSignal): Promise<Course[]> => {
+    const res = await axios.get(
+        `${backendUrl}/api/courses`,
+        {
+            params: {},
+            paramsSerializer: params => qs.stringify(params, {arrayFormat: 'repeat'}),
+            signal
+        }
+    )
+
+    return res.data;
+}
+
+export const fetchRecommendedCoursesApi = async (accessToken: string): Promise<Course[]> => {
+    const res = await axios.get(`${backendUrl}/api/courses/recommended`, {
+        headers: {
+            Authorization: `Bearer ${accessToken}`
+        }
+    });
 
     return res.data;
Index: frontend/src/assets/icons/Instagram.tsx
===================================================================
--- frontend/src/assets/icons/Instagram.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
+++ frontend/src/assets/icons/Instagram.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -0,0 +1,12 @@
+export default function Instagram({className = "w-6 h-6 text-black"}) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 24 24"
+             fill="currentColor"
+             className={className}>
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path
+                d="M16 3a5 5 0 0 1 5 5v8a5 5 0 0 1 -5 5h-8a5 5 0 0 1 -5 -5v-8a5 5 0 0 1 5 -5zm-4 5a4 4 0 0 0 -3.995 3.8l-.005 .2a4 4 0 1 0 4 -4m4.5 -1.5a1 1 0 0 0 -.993 .883l-.007 .127a1 1 0 0 0 1.993 .117l.007 -.127a1 1 0 0 0 -1 -1"/>
+        </svg>
+    )
+}
Index: frontend/src/assets/icons/LinkedIn.tsx
===================================================================
--- frontend/src/assets/icons/LinkedIn.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
+++ frontend/src/assets/icons/LinkedIn.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -0,0 +1,12 @@
+export default function LinkedIn({className = "w-6 h-6 text-black"}) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 24 24"
+             fill="currentColor"
+             className={className}>
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path
+                d="M17 2a5 5 0 0 1 5 5v10a5 5 0 0 1 -5 5h-10a5 5 0 0 1 -5 -5v-10a5 5 0 0 1 5 -5zm-9 8a1 1 0 0 0 -1 1v5a1 1 0 0 0 2 0v-5a1 1 0 0 0 -1 -1m6 0a3 3 0 0 0 -1.168 .236l-.125 .057a1 1 0 0 0 -1.707 .707v5a1 1 0 0 0 2 0v-3a1 1 0 0 1 2 0v3a1 1 0 0 0 2 0v-3a3 3 0 0 0 -3 -3m-6 -3a1 1 0 0 0 -.993 .883l-.007 .127a1 1 0 0 0 1.993 .117l.007 -.127a1 1 0 0 0 -1 -1"/>
+        </svg>
+    )
+}
Index: frontend/src/components/CollaborationSteps.tsx
===================================================================
--- frontend/src/components/CollaborationSteps.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/CollaborationSteps.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -30,6 +30,6 @@
     return (
         <section className="bg-dark-blue text-white py-vertical-md px-horizontal flex flex-col gap-12 items-center">
-            <h2 className="text-4xl font-regular">
-                How to Start Your Journey to <strong>Success</strong>
+            <h2 className="text-5xl font-light">
+                How to Start Your Journey to <strong className="font-bold">Success</strong>
             </h2>
 
@@ -51,8 +51,8 @@
 
                 {steps.map((step, i) => (
-                    <div
+                    <section
                         key={i}
-                        className={`flex flex-col items-center gap-4 justify-between w-1/4 px-4 
-                                border-l-3 ${i === 3 ? 'border-r-3' : ''} ${i < 2 ? 'pb-60' : 'pt-60'}
+                        className={`flex flex-col items-center gap-2 justify-between w-1/4 px-4 
+                                border-l-2 ${i === 3 ? 'border-r-2' : ''} ${i < 2 ? 'pb-60' : 'pt-60'} border-white/60
                             `}
                     >
@@ -62,14 +62,14 @@
                         <div className="flex flex-col justify-start h-full gap-2">
                             <div className="flex justify-center items-center min-h-[3.5rem]">
-                                <h3 className="text-xl font-semibold text-center line-clamp-2">{step.title}</h3>
+                                <h3 className="text-2xl font-semibold text-center line-clamp-2">{step.title}</h3>
                             </div>
-                            <p className="text-md text-white/70">{step.description}</p>
+                            <p className="font-light text-white/70">{step.description}</p>
                         </div>
-                    </div>
+                    </section>
                 ))}
             </div>
 
             {/* Button */}
-            <button className="hover:shadow-white/40 hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out cursor-pointer
+            <button className="hover:shadow-white/40 hover:shadow-lg transition-all duration-300 ease-in-out cursor-pointer
                 w-3/10 whitespace-nowrap py-2 bg-white text-xl text-dark-blue rounded-sm font-semibold shadow-md shadow-white/20">
                 Start Now
Index: frontend/src/components/CourseCard.tsx
===================================================================
--- frontend/src/components/CourseCard.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/CourseCard.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -27,5 +27,5 @@
             style={{"--card-color": card.color} as React.CSSProperties}
             className="border-1 border-black/10 shadow-md shadow-black/10
-                flex flex-col w-full rounded-xl gap-4 py-4 px-4 bg-[#FFFFFF] h-full">
+                flex flex-col w-full rounded-xl gap-4 py-4 px-4 bg-[#FFFFFF]">
 
             {/*IMAGE*/}
@@ -37,7 +37,7 @@
 
             {/*TITLE AND TOPICS LEARNED*/}
-            <div className="flex flex-col justify-between items-start text-left h-full">
+            <div className="flex flex-col gap-2 items-start text-left h-full">
                 {/*Title*/}
-                <h3 className="font-semibold text-lg">{card.titleShort}</h3>
+                <h3 className="font-semibold text-xl">{card.titleShort}</h3>
 
                 {/*What will be learned*/}
@@ -73,5 +73,5 @@
 
             {/*BUTTON AND PRICE*/}
-            <div className="flex justify-between mt-0">
+            <div className="flex justify-between items-center mt-0">
                 <p className={`font-bold text-black/80 text-lg ${card.price == 0 && "font-normal"}`}>{card.price > 0 ? "$"+card.price : "Free"}</p>
                 <button
Index: frontend/src/components/CoursesCarousel.tsx
===================================================================
--- frontend/src/components/CoursesCarousel.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/CoursesCarousel.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -1,122 +1,51 @@
-import React from 'react';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import Marketing from "../assets/courseImg/marketing.png"
-import Sales from "../assets/courseImg/sales.webp"
-import Onboarding from "../assets/courseImg/onboarding.png"
-import Leadership from "../assets/courseImg/leadership-2.webp"
-import BusinessFoundation from "../assets/courseImg/business-foundation.jpg"
 import CourseCard from "./CourseCard.tsx";
 import "../slick-custom.css";
 
 import ShifterArrow from "../assets/shifterImg/Shifter-Arrow.png";
+import {useCourseStorage} from "../context/CourseStorage.ts";
 
 function CoursesCarousel() {
-    const courses = [
-        {
-            title: "The Go-To Marketing Strategy",
-            skills: ["Marketing", "Strategy", "Growth"],
-            price: 15,
-            duration_hours: 2,
-            number_modules: 5,
-            image: Marketing,
-            imageAlt: "Marketing Course Banner",
-            color: "red"
-        },
-        {
-            title: "Personalized Onboarding Process",
-            skills: ["Onboarding", "Management"],
-            price: 20,
-            duration_hours: 3,
-            number_modules: 7,
-            image: Onboarding,
-            imageAlt: "Onboarding Course Banner",
-            color: "shifter"
-        },
-        {
-            title: "Strategic Leadership & Management",
-            skills: ["Management", "Leadership", "Strategy"],
-            price: 25,
-            duration_hours: 3,
-            number_modules: 8,
-            image: Leadership,
-            imageAlt: "Leadership Course Banner",
-            color: "teal"
-        },
-        {
-            title: "Business Foundations Roadmap",
-            skills: ["Leadership", "Strategy", "Business"],
-            price: 30,
-            duration_hours: 4,
-            number_modules: 11,
-            image: BusinessFoundation,
-            imageAlt: "Business Foundations Course Banner",
-            color: "dark-blue"
-        },
-        {
-            title: "Sales & Marketing for SME's",
-            skills: ["Marketing", "Sales", "Tactics"],
-            price: 18,
-            duration_hours: 2.5,
-            number_modules: 6,
-            image: Sales,
-            imageAlt: "Sales Course Banner",
-            color: "deep-green"
-        },
-    ];
-
-    const settings = {
-        dots: false,
-        infinite: true,
-        speed: 500,
-        slidesToShow: 3,
-        slidesToScroll: 1,
-        centerMode: true,
-        centerPadding: '0',
-        cssEase: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        responsive: [
-            {
-                breakpoint: 1024,
-                settings: {
-                    slidesToShow: 1,
-                    slidesToScroll: 1,
-                    infinite: true,
-                    dots: false
-                }
-            },
-            {
-                breakpoint: 600,
-                settings: {
-                    slidesToShow: 1,
-                    slidesToScroll: 1,
-                    initialSlide: 1
-                }
-            }
-        ]
-    };
+    const {recommendedCourses} = useCourseStorage();
 
     return (
-        <section className="relative flex flex-col gap-10 items-center bg-dark-blue/10 py-vertical-md px-4 overflow-clip">
-            <img src={ShifterArrow} alt="Shifter Arrow" className="absolute opacity-30 h-150 w-120 -rotate-130 -top-30 right-0" />
-            <img src={ShifterArrow} alt="Shifter Arrow" className="absolute opacity-30 h-150 w-120 rotate-50 -bottom-30 left-0" />
+        <section
+            className="relative flex flex-col gap-10 items-center bg-dark-blue/10 py-vertical-md px-4 overflow-clip">
+            <img src={ShifterArrow} alt="Shifter Arrow"
+                 className="absolute opacity-30 h-150 w-120 -rotate-130 -top-30 right-0"/>
+            <img src={ShifterArrow} alt="Shifter Arrow"
+                 className="absolute opacity-30 h-150 w-120 rotate-50 -bottom-30 left-0"/>
 
-            <div className="text-center flex flex-col gap-2">
-                <h2 className="text-4xl font-regular whitespace-nowrap">
-                    Unlock Your Growth With <span className="text-shifter font-semibold">E-Learning</span>
+            <div className="text-center flex flex-col gap-4">
+                <h2 className="text-5xl whitespace-nowrap">
+                    Unlock Your Growth With <strong className="text-shifter">E-Learning</strong>
                 </h2>
-                <p className="text-lg font-light text-gray-600">
-                    Access expert-led courses designed to help you master business, strategy, and success - anytime, anywhere.
+                <p className="text-2xl font-light text-black/80">
+                    Access expert-led courses designed to help you master business, strategy, and success - anytime,
+                    anywhere.
                 </p>
             </div>
 
             <div className="relative max-w-[80%] mx-0 my-auto w-full p-0">
-                <Slider {...settings}>
-                    {courses.map((course, index) => (
-                        <div className="h-full flex flex-col">
-                            {/*<CourseCard card={course} />*/}
+                {
+                    recommendedCourses ?
+                        <Slider {...settings}>
+                            {
+                                recommendedCourses.map((course, index) => (
+                                    <CourseCard card={course} key={index}/>
+                                    // <div className="h-full flex flex-col justify-center bg-red-500" key={index}>
+                                    //     <CourseCard card={course}/>
+                                    // </div>
+                                ))
+                            }
+                        </Slider>
+                        :
+                        <div className="flex flex-col gap-12 justify-center items-center" >
+                            <div className="w-20 loader"></div>
+                            <span className="text-xl font-semibold text-black/40">Loading...</span>
                         </div>
-                    ))}
-                </Slider>
+                }
             </div>
         </section>
@@ -124,3 +53,34 @@
 }
 
+const settings = {
+    dots: false,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    centerMode: true,
+    centerPadding: '0',
+    cssEase: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    responsive: [
+        {
+            breakpoint: 1024,
+            settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+                infinite: true,
+                dots: false
+            }
+        },
+        {
+            breakpoint: 600,
+            settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+                initialSlide: 1
+            }
+        }
+    ]
+};
+
+
 export default CoursesCarousel;
Index: frontend/src/components/CoursesFilters.tsx
===================================================================
--- frontend/src/components/CoursesFilters.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/CoursesFilters.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -4,9 +4,9 @@
 import {durationToQueryMapper, priceToQueryMapper} from "../utils/mapper.ts";
 
-function CoursesFilters({setParams, params, topics, skills}: {
-    setParams: React.Dispatch<React.SetStateAction<FilterParams>>,
-    params: FilterParams,
-    topics: string[],
-    skills: string[]
+function CoursesFilters({setFilters, filters, topics, skills}: {
+    setFilters: React.Dispatch<React.SetStateAction<FilterParams>>,
+    filters: FilterParams,
+    topics: string[] | null,
+    skills: string[] | null
 }) {
     const duration = [
@@ -29,46 +29,46 @@
     ]
 
-    const handleDifficultyChange = (param: string) => {
-        setParams(prevParams => ({
-            ...prevParams,
-            difficulty: prevParams.difficulty?.includes(param) ?
-                prevParams.difficulty.filter((v: string) => v !== param) :
-                [...(prevParams.difficulty || []), param]
+    const handleDifficultyChange = (filter: string) => {
+        setFilters(prevFilters => ({
+            ...prevFilters,
+            difficulty: prevFilters.difficulty?.includes(filter) ?
+                prevFilters.difficulty.filter((v: string) => v !== filter) :
+                [...(prevFilters.difficulty || []), filter]
         }))
     }
 
-    const handleTopicChange = (param: string) => {
-        setParams(prevParams => ({
-            ...prevParams,
-            topic: prevParams.topic?.includes(param) ?
-                prevParams.topic.filter((v: string) => v !== param) :
-                [...(prevParams.topic || []), param]
+    const handleTopicChange = (filter: string) => {
+        setFilters(prevFilters => ({
+            ...prevFilters,
+            topic: prevFilters.topic?.includes(filter) ?
+                prevFilters.topic.filter((v: string) => v !== filter) :
+                [...(prevFilters.topic || []), filter]
         }))
     }
 
-    const handleSkillChange = (param: string) => {
-        setParams(prevParams => ({
-            ...prevParams,
-            skill: prevParams.skill?.includes(param) ?
-                prevParams.skill.filter((v: string) => v !== param) :
-                [...(prevParams.skill || []), param]
+    const handleSkillChange = (filter: string) => {
+        setFilters(prevFilters => ({
+            ...prevFilters,
+            skill: prevFilters.skill?.includes(filter) ?
+                prevFilters.skill.filter((v: string) => v !== filter) :
+                [...(prevFilters.skill || []), filter]
         }))
     }
 
-    const handlePriceChange = (param: string) => {
-        setParams(prevParams => ({
-            ...prevParams,
-            price: prevParams.price?.includes(param) ?
-                prevParams.price.filter((v: string) => v !== param) :
-                [...(prevParams.price || []), param]
+    const handlePriceChange = (filter: string) => {
+        setFilters(prevFilters => ({
+            ...prevFilters,
+            price: prevFilters.price?.includes(filter) ?
+                prevFilters.price.filter((v: string) => v !== filter) :
+                [...(prevFilters.price || []), filter]
         }))
     }
 
-    const handleDurationChange = (param: string) => {
-        setParams(prevParams => ({
-            ...prevParams,
-            duration: prevParams.duration?.includes(param) ?
-                prevParams.duration.filter((v: string) => v !== param) :
-                [...(prevParams.duration || []), param]
+    const handleDurationChange = (filter: string) => {
+        setFilters(prevFilters => ({
+            ...prevFilters,
+            duration: prevFilters.duration?.includes(filter) ?
+                prevFilters.duration.filter((v: string) => v !== filter) :
+                [...(prevFilters.duration || []), filter]
         }))
     }
@@ -76,24 +76,24 @@
     return (
         <aside
-            className="flex flex-col gap-8 pl-8 pt-8 text-left sticky top-0 h-screen bg-white border-r-2 border-black/10">
+            className="flex flex-col gap-8 pl-8 pt-12 text-left sticky top-0 h-screen border-r-2 border-black/10">
             <h2 className="text-2xl font-medium">Filter by</h2>
-            <div className="relative flex flex-col gap-6 pl-4 pr-2 pb-20 overflow-y-auto scrollable">
+            <div className="relative flex flex-col gap-12 pl-4 pr-2 pb-20 overflow-y-auto scrollable">
                 <FilterSelect
                     header={"Level"}
                     options={difficulty}
                     handleFilter={handleDifficultyChange}
-                    selectedOptions={params.difficulty || []}
+                    selectedOptions={filters.difficulty || []}
                 />
                 <FilterSelect
-                    header={"Topic"}
+                    header={"Topics"}
                     options={topics}
                     handleFilter={handleTopicChange}
-                    selectedOptions={params.topic || []}
+                    selectedOptions={filters.topic || []}
                 />
                 <FilterSelect
-                    header={"Skill"}
+                    header={"Skills"}
                     options={skills}
                     handleFilter={handleSkillChange}
-                    selectedOptions={params.skill || []}
+                    selectedOptions={filters.skill || []}
                 />
                 <FilterSelect
@@ -101,5 +101,5 @@
                     options={duration}
                     handleFilter={handleDurationChange}
-                    selectedOptions={params.duration || []}
+                    selectedOptions={filters.duration || []}
                     mapper={durationToQueryMapper}
                 />
@@ -108,5 +108,5 @@
                     options={price}
                     handleFilter={handlePriceChange}
-                    selectedOptions={params.price || []}
+                    selectedOptions={filters.price || []}
                     mapper={priceToQueryMapper}
                 />
@@ -127,5 +127,5 @@
                       }: {
     header: string;
-    options: string[];
+    options: string[] | null;
     handleFilter: (value: string) => void;
     selectedOptions: string[];
@@ -137,16 +137,16 @@
 
     // Filter options based on search term
-    const filteredOptions = options.filter((option) =>
+    const filteredOptions = options?.filter((option) =>
         option.toLowerCase().includes(searchTerm.toLowerCase())
     );
 
     // Show only first 4 unless showAll is true
-    const visibleOptions = showAll ? filteredOptions : filteredOptions.slice(0, 4);
+    const visibleOptions = showAll ? filteredOptions : filteredOptions?.slice(0, 4);
 
     return (
-        <section className="flex flex-col gap-2">
-            <h3 className="text-lg font-medium">{header}</h3>
+        <section className="flex flex-col gap-2 text-md">
+            <h3 className="font-medium">{header}</h3>
             <form className="flex flex-col gap-0">
-                {options.length > 4 && (
+                {options && options.length > 4 && (
                     <input
                         type="search"
@@ -157,9 +157,10 @@
                             .replace(/_/g, " ")
                             .replace(/\b\w/g, (c) => c.toUpperCase())}`}
-                        className="px-4 py-1 border-2 border-black/20 rounded-sm focus:outline-none focus:border-shifter w-3/4 mb-2"
-                    />
+                        className="hover:bg-shifter/5 hover:border-shifter hover:placeholder-black
+                        px-4 py-2 border-1 border-black/20 rounded-sm focus:outline-none focus:border-shifter mb-2
+                        "/>
                 )}
-                {visibleOptions.map((option, index) => (
-                    <label key={index} className="text-lg text-black whitespace-nowrap">
+                {visibleOptions?.map((option, index) => (
+                    <label key={index} className="text-black whitespace-nowrap cursor-pointer w-fit">
                         <Checkbox
                             checked={selectedOptions.includes(mapper ? mapper(option) : option)}
@@ -181,5 +182,5 @@
                 ))}
             </form>
-            {filteredOptions.length > 4 && (
+            {filteredOptions && filteredOptions.length > 4 && (
                 <button
                     type="button"
Index: frontend/src/components/CoursesGrid.tsx
===================================================================
--- frontend/src/components/CoursesGrid.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/CoursesGrid.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -9,17 +9,19 @@
 
 
-function CoursesGrid({courses, loading, setParams, params}: {
-    courses: Course[],
+function CoursesGrid({courses, loading, setFilters, filters}: {
+    courses: Course[] | null,
     loading: boolean,
-    setParams: React.Dispatch<React.SetStateAction<FilterParams>>,
-    params: FilterParams
+    setFilters: React.Dispatch<React.SetStateAction<FilterParams>>,
+    filters: FilterParams
 }) {
-    const [searchText, setSearchText] = React.useState<string>(params.search || "");
-    const filterClassName = "border-1 border-black/40 rounded-full px-4 text-black/80 "
+    const [searchText, setSearchText] = React.useState<string>(filters.search || "");
+    const filterPillClassName = "group hover:border-shifter hover:bg-shifter/10 hover:text-shifter " +
+        "flex items-center gap-1 border-1 border-black/40 rounded-full px-4 py-1 text-black/80 font-medium cursor-pointer"
+    const filterXClassName = "group-hover:text-shifter text-black/60"
 
     const handleSearchFilter = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault()
 
-        setParams(prevParams => ({
+        setFilters(prevParams => ({
             ...prevParams,
             search: searchText.trim()
@@ -29,38 +31,33 @@
     }
 
-    console.log(params)
 
     return (
-        <section className="flex flex-col gap-8 px-12 py-6 w-full">
+        <section className="flex flex-col gap-8 py-6 pb-12 w-full">
 
             {/*SEARCH AND SORT BY*/}
-            <div className="flex justify-between items-center w-full">
+            <div className="flex justify-between items-center w-full px-12">
                 <div className="flex gap-2 flex-wrap items-center justify-start">
                     {
-                        Object.entries(params).map(([key, values]) => {
+                        Object.entries(filters).map(([key, values]) => {
                             if (key === "search") {
                                 const searchValue = values as string;
                                 return (
-                                    <div
+                                    <button
                                         key={`${key}-${searchValue}`}
-                                        className={filterClassName + " flex items-center gap-1"}
+                                        onClick={() => {
+                                            setFilters(prev => {
+                                                const typedKey = key as keyof FilterParams;
+                                                const updatedParams = {...prev};
+                                                delete updatedParams[typedKey];
+                                                return updatedParams;
+                                            });
+                                        }}
+                                        className={filterPillClassName}
                                     >
                                         {searchValue
                                             .toLowerCase()
                                             .replace(/\b\w/g, c => c.toUpperCase())}
-                                        <button
-                                            onClick={() => {
-                                                setParams(prev => {
-                                                    const typedKey = key as keyof FilterParams;
-                                                    const updatedParams = {...prev};
-                                                    delete updatedParams[typedKey];
-                                                    return updatedParams;
-                                                });
-                                            }}
-                                            className="ml-1 text-black/60 hover:text-black cursor-pointer"
-                                        >
-                                            <X size={16}/>
-                                        </button>
-                                    </div>
+                                        <X size={20} className={filterXClassName}/>
+                                    </button>
                                 )
                             }
@@ -68,7 +65,21 @@
                             // Array-type filters (topics, skills, difficulties, etc.)
                             return values.map((element: string, idx: number) => (
-                                <div
+                                <button
                                     key={`${key}-${idx}`}
-                                    className={filterClassName + " flex items-center gap-1"}
+                                    onClick={() => {
+                                        const updatedArray = values.filter((_: string, i: number) => i !== idx);
+                                        const typedKey = key as Exclude<keyof FilterParams, "search">;
+
+                                        setFilters(prev => {
+                                            const newParams = { ...prev };
+                                            if (updatedArray.length === 0) {
+                                                delete newParams[typedKey]; // remove key if empty array
+                                            } else {
+                                                newParams[typedKey] = updatedArray; // otherwise set updated array
+                                            }
+                                            return newParams;
+                                        });
+                                    }}
+                                    className={filterPillClassName}
                                 >
                                     {
@@ -88,24 +99,6 @@
                                                     .replace(/\b\w/g, c => c.toUpperCase())
                                     }
-                                    <button
-                                        onClick={() => {
-                                            const updatedArray = values.filter((_: string, i: number) => i !== idx);
-                                            const typedKey = key as keyof FilterParams;
-                                            setParams(prev => {
-                                                const newParams = { ...prev };
-                                                if (updatedArray.length === 0) {
-                                                    delete newParams[typedKey]; // remove key if empty array
-                                                } else {
-                                                    newParams[typedKey] = updatedArray; // otherwise set updated array
-                                                }
-                                                return newParams;
-                                            });
-                                        }}
-
-                                        className="ml-1 text-black/60 hover:text-black cursor-pointer"
-                                    >
-                                        <X size={16}/>
-                                    </button>
-                                </div>
+                                    <X size={20} className={filterXClassName}/>
+                                </button>
                             ));
                         })
@@ -155,9 +148,9 @@
 
             {/*COURSES GRID*/}
-            <div className="relative grid grid-cols-3 gap-x-4 gap-y-4 w-full h-fit">
+            <div className="relative grid grid-cols-3 gap-x-4 gap-y-4 w-full h-fit px-12">
                 {
-                    loading && (
+                    (!courses || loading) && (
                         <div className="absolute inset-0 bg-white/60 backdrop-blur-sm
-                        flex flex-col gap-2 items-center justify-start z-10 py-40">
+                        flex flex-col gap-2 items-center justify-start z-10 py-40 w-full">
                             <div className="w-12 loader"></div>
                             <span className="text-xl font-semibold text-black/40">Loading...</span>
@@ -166,9 +159,11 @@
                 }
                 {
-                    courses.map((course, index) => {
+                    courses && courses?.length > 0 ?
+                        courses?.map((course, index) => {
                         return (
                             <CourseCard card={course} key={index}/>
                         )
-                    })
+                    }) :
+                        <span className="text-3xl font-normal text-black/60 pl-20 py-8 text-left col-span-full">No results found</span>
                 }
             </div>
Index: frontend/src/components/Hero.tsx
===================================================================
--- frontend/src/components/Hero.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/Hero.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -1,14 +1,16 @@
 import StarFilled from "../assets/icons/StarFilled.tsx";
 import ShifterArrow from "../assets/shifterImg/Shifter-Arrow.png";
+import { Link } from 'react-router-dom';
 
 function Hero() {
+
     return (
-        <section className="bg-dark-blue w-full px-4 font-montserrat">
+        <section className="bg-dark-blue w-full">
             <div className="shadow-md shadow-black/80 flex flex-col gap-12
             items-center px-horizontal pt-30 w-full bg-white rounded-b-[60px]">
-                <h1 className="font-regular text-6xl">
-                    Business <strong className="font-semibold text-shifter">Excellence</strong>
+                <h1 className="text-6xl">
+                    Business <strong className="text-shifter">Excellence</strong>
                     <br/>
-                    Powered by <strong className="font-semibold text-shifter">Expertise</strong>
+                    Powered by <strong className="text-shifter">Expertise</strong>
                 </h1>
 
@@ -19,5 +21,5 @@
 
                     {/*LEFT TEXT*/}
-                    <div className="relative max-w-sm text-medium text-left">
+                    <div className="relative max-w-sm text-left">
                         <img src={ShifterArrow} alt="Shifter Arrow"
                              className="absolute left-5 -top-30 h-35 w-30 rotate-40 opacity-20"/>
@@ -25,5 +27,5 @@
                              className="absolute -left-25 top-5 h-35 w-30 -rotate-140 opacity-20"/>
 
-                        <p className="font-regular leading-relaxed">
+                        <p className="text-lg text-black leading-relaxed">
                             We guide businesses from the basics of planning to complete transformations, offering
                             expert
@@ -41,16 +43,18 @@
                         <div
                             className="absolute bottom-5 flex gap-2 bg-gray/20 backdrop-blur-lg p-1 rounded-full border-3 border-black/5 text-md">
-                            <button
-                                className="hover:scale-105 hover:shadow-lg hover:shadow-shifter/50 transition-all duration-200 ease-in-out cursor-pointer
-                            rounded-full text-white px-8 py-2 bg-shifter border-3 border-white/50 font-medium
+                            <Link
+                                to="/"
+                                className="hover:shadow-lg hover:shadow-shifter/50 transition-all duration-200 ease-in-out cursor-pointer
+                            rounded-full text-white px-8 py-3 bg-shifter border-3 border-white/50 font-semibold
                             shadow-md shadow-shifter/30">
                                 Book a Free Consultation
-                            </button>
-                            <button
-                                className="hover:scale-105 hover:shadow-lg hover:shadow-shifter/50 transition-all duration-200 ease-in-out cursor-pointer
-                            rounded-full text-shifter px-8 py-2 bg-white border-3 border-shifter/50 font-semibold
+                            </Link>
+                            <Link
+                                to="/courses"
+                                className="hover:shadow-lg hover:shadow-shifter/50 transition-all duration-200 ease-in-out cursor-pointer
+                            rounded-full text-shifter px-8 py-3 bg-white border-3 border-shifter/50 font-bold
                             shadow-md shadow-shifter/30">Explore
                                 Our Courses
-                            </button>
+                            </Link>
                         </div>
                     </div>
@@ -77,9 +81,9 @@
                         </div>
                         <div className="flex gap-1 text-gold">
-                            <StarFilled className="w-10 h-10"/>
-                            <StarFilled className="w-10 h-10"/>
-                            <StarFilled className="w-10 h-10"/>
-                            <StarFilled className="w-10 h-10"/>
-                            <StarFilled className="w-10 h-10"/>
+                            <StarFilled className="w-10 h-10 opacity-80"/>
+                            <StarFilled className="w-10 h-10 opacity-80"/>
+                            <StarFilled className="w-10 h-10 opacity-80"/>
+                            <StarFilled className="w-10 h-10 opacity-80"/>
+                            <StarFilled className="w-10 h-10 opacity-80"/>
                         </div>
                     </div>
Index: frontend/src/components/ShifterValues.tsx
===================================================================
--- frontend/src/components/ShifterValues.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/ShifterValues.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -2,8 +2,8 @@
     return (
         <section className="flex px-horizontal py-vertical-md gap-20">
-            <div className="flex flex-col gap-8 w-1/2">
-                <div className="flex flex-col gap-4 text-left">
-                    <h1 className="text-4xl font-regular">Our Core <span className="font-semibold text-shifter">Values</span></h1>
-                    <p className="text-lg">
+            <div className="flex flex-col gap-12 w-1/2">
+                <div className="flex flex-col gap-8 text-left">
+                    <h2 className="text-5xl">Our Core <strong className="text-shifter">Values</strong></h2>
+                    <p className="text-xl">
                         Our SHIFT Values define our approach to mentoring and consulting. We focus on Sustainable Results, a
                         Holistic Approach, In-depth Analysis, Fact-based Solutions, and Tailor-made Services—ensuring
@@ -12,12 +12,12 @@
                 </div>
                 <div className="flex gap-2">
-                    <div className="flex flex-col text-center gap-2 font-bold text-shifter text-4xl">
-                        <span>S</span>
-                        <span>H</span>
-                        <span>I</span>
-                        <span>F</span>
-                        <span>T</span>
+                    <div className="flex flex-col text-center gap-2 text-shifter text-5xl">
+                        <strong>S</strong>
+                        <strong>H</strong>
+                        <strong>I</strong>
+                        <strong>F</strong>
+                        <strong>T</strong>
                     </div>
-                    <div className="flex flex-col text-xl items-start">
+                    <div className="flex flex-col text-2xl items-start font-light">
                         <span className="h-1/5 flex items-end pb-1">ustainable Results</span>
                         <span className="h-1/5 flex items-end pb-1">olistic Approach</span>
@@ -27,6 +27,6 @@
                     </div>
                 </div>
-                <button className="hover:shadow-shifter/40 hover:shadow-lg  hover:scale-105 transition-all duration-300 ease-in-out cursor-pointer
-                    bg-shifter rounded-md border-3 border-black/20 py-2
+                <button className="hover:shadow-shifter/40 hover:shadow-lg transition-all duration-300 ease-in-out cursor-pointer
+                    bg-shifter rounded-md border-3 border-white/40 py-2
                     text-white text-xl shadow-md shadow-shifter/20 font-medium w-7/10"
                 >Read More</button>
Index: frontend/src/context/CourseStorage.ts
===================================================================
--- frontend/src/context/CourseStorage.ts	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
+++ frontend/src/context/CourseStorage.ts	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -0,0 +1,27 @@
+import { create } from "zustand";
+import type {Course} from "../types/Course.tsx";
+
+
+interface CourseStorage {
+    recommendedCourses: Course[] | null;
+    allCourses: Course[] | null;
+    topics: string[] | null;
+    skills: string[] | null;
+
+    setRecommendedCourses: (courses: Course[]) => void;
+    setAllCourses: (courses: Course[]) => void;
+    setTopics: (topics: string[]) => void;
+    setSkills: (skills: string[]) => void;
+}
+
+export const useCourseStorage = create<CourseStorage>((set) => ({
+    recommendedCourses: null,
+    allCourses: null,
+    topics: null,
+    skills: null,
+
+    setRecommendedCourses: (courses) => set({ recommendedCourses: courses }),
+    setAllCourses: (courses) => set({ allCourses: courses }),
+    setTopics: (topics) => set({ topics }),
+    setSkills: (skills) => set({ skills })
+}));
Index: frontend/src/context/GlobalContext.tsx
===================================================================
--- frontend/src/context/GlobalContext.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
+++ frontend/src/context/GlobalContext.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -0,0 +1,124 @@
+import React, {
+    createContext,
+    useState,
+    useEffect,
+    type ReactNode,
+    type Dispatch,
+    type SetStateAction,
+} from "react";
+import type {User} from "../types/User.tsx";
+import type {UserRegister} from "../types/UserRegister.tsx";
+import {loginApi, logoutApi, refreshAccessTokenApi, registerApi} from "../api/auth.ts";
+
+interface GlobalContextType {
+    user: User | null;
+    setUser: Dispatch<SetStateAction<User | null>>;
+    accessToken: string | null;
+    setAccessToken: Dispatch<SetStateAction<string | null>>;
+    register: (user: UserRegister) => Promise<void>;
+    login: (email: string, password: string) => Promise<void>;
+    logout: () => void;
+    refreshAccessToken: () => Promise<void>;
+    loading: boolean;
+}
+
+export const GlobalContext = createContext<GlobalContextType | undefined>(
+    undefined
+);
+
+export const GlobalProvider = ({children}: { children: ReactNode }) => {
+    const [user, setUser] = useState<User | null>(null);
+    const [accessToken, setAccessToken] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const register = async (user: UserRegister) => {
+        registerApi(user)
+            .then(data => {
+                setAccessToken(data.accessToken);
+                setUser(data.user);
+            })
+            .catch(error => {
+                setAccessToken(null);
+                setUser(null);
+                console.log("Registration failed:", error);
+                throw error;
+            });
+    }
+
+    const login = async (email: string, password: string) => {
+        loginApi(email, password)
+            .then(data => {
+                setAccessToken(data.accessToken);
+                setUser(data.user);
+            })
+            .catch(error => {
+                    setAccessToken(null);
+                    setUser(null);
+                    console.log("Login failed:", error);
+                    throw error;
+            });
+    };
+
+    const logout = async () => {
+        logoutApi()
+            .catch(err => {
+                console.warn("Logout failed:", err);
+                throw err;
+            })
+            .finally(() => {
+                setAccessToken(null);
+                setUser(null);
+            })
+    };
+
+
+    const refreshAccessToken = async () => {
+        setLoading(true);
+
+        refreshAccessTokenApi()
+            .then(data => {
+                setAccessToken(data.accessToken);
+                setUser(data.user);
+            })
+            .catch(error => {
+                setAccessToken(null);
+                setUser(null);
+                console.log("Refresh token failed: ", error);
+                throw error;
+            })
+            .finally(() => {
+                setLoading(false);
+            })
+    };
+
+    useEffect(() => {
+        refreshAccessToken();
+    }, []);
+
+    return (
+        <GlobalContext.Provider
+            value={{
+                user,
+                setUser,
+                accessToken,
+                setAccessToken,
+                register,
+                login,
+                logout,
+                refreshAccessToken,
+                loading,
+            }}
+        >
+            {children}
+        </GlobalContext.Provider>
+    );
+};
+
+// Custom hook for ease of use
+export const useGlobalContext = () => {
+    const context = React.useContext(GlobalContext);
+    if (!context) {
+        throw new Error("useGlobalContext must be used within a GlobalProvider");
+    }
+    return context;
+};
Index: frontend/src/global.css
===================================================================
--- frontend/src/global.css	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/global.css	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -21,4 +21,13 @@
     --color-gray: #E5E7EBFF;
 
+
+    --shadow-up-sm: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-up: 0 -1px 3px 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-up-md: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -2px rgba(0, 0, 0, 0.06);
+    --shadow-up-lg: 0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -4px rgba(0, 0, 0, 0.05);
+    --shadow-up-xl: 0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 -10px 10px -5px rgba(0, 0, 0, 0.04);
+    --shadow-up-2xl: 0 -25px 50px -12px rgba(0, 0, 0, 0.25);
+
+
     --font-montserrat-regular: 'Montserrat', sans-serif;
     --font-montserrat-medium: 'Montserrat', sans-serif;
@@ -63,6 +72,6 @@
 
 :root {
-    --color-white: #FFFFFF;
-    --color-black: #111111;
+    --color-white: #F8F8F8;
+    --color-black: #111;
 
     font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -77,13 +86,14 @@
 
 #root {
+    background: var(--color-white);
     width: 100%;
     margin: 0 0;
     padding: 0;
     text-align: center;
-    @apply font-sans;
+    font-family: 'Nunito', sans-serif;
+    /*@apply font-sans;*/
 }
 
 body {
-    font-family: 'Montserrat', sans-serif;
     background: #EEE;
     margin: 0;
@@ -135,4 +145,5 @@
     scrollbar-width: thin;
     -ms-overflow-style: auto;
+    scrollbar-color: rgba(0,0,0,0.4) transparent;
 }
 
@@ -145,4 +156,8 @@
     background-color: rgba(0,0,0,0.4);
     border-radius: 4px;
+}
+
+.scrollable:hover::-webkit-scrollbar-track {
+    background: transparent;
 }
 
Index: frontend/src/layout/Footer.tsx
===================================================================
--- frontend/src/layout/Footer.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/layout/Footer.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -1,51 +1,135 @@
 import ShifterLogo from "../assets/shifterImg/Shifter-S2W-White-Transparent.png";
 import {Link} from "react-router-dom";
+import {useGlobalContext} from "../context/GlobalContext.tsx";
+import ShifterRocket from "../assets/shifterImg/Rocket-Blue.png"
+import LinkedIn from "../assets/icons/LinkedIn.tsx";
+import Instagram from "../assets/icons/Instagram.tsx";
 
 function Footer() {
+    const {user} = useGlobalContext();
+
     return (
-        <footer className="px-4 pt-4">
-            <div className="bg-dark-blue flex justify-between rounded-lg px-50 py-20">
-                <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
-                     className="w-60 "
-                />
+        <footer className="bg-dark-blue border-t-4 border-white/20">
+            <div className="flex justify-between px-20 py-20">
+                <section className="flex flex-col gap-4 max-w-90">
+                    <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
+                         className="w-60 "
+                    />
+                    <p className="text-white font-light text-left">
+                        Practical strategies and hands-on guidance to help you overcome obstacles, unlock new
+                        opportunities, and build a thriving business.
+                    </p>
+                </section>
 
                 <div>
-                    <div className="flex gap-4 text-lg text-white">
-                        <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                            <Link to="/courses" className="transition-all
+                    <div className="flex gap-20 text-lg text-white">
+
+                        {/*SERVICES*/}
+                        <section className="flex flex-col gap-2 text-left font-light text-lg">
+                            <h3 className="text-white font-bold text-2xl mb-4">Services</h3>
+
+                            <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                <Link to="/mentoring" className="transition-all
+                                    duration-300 ease-in-out z-10">Mentoring</Link>
+                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                                    rounded-full transition-all duration-300 ease-in-out"/>
+                            </div>
+                            <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                <Link to="/courses" className="transition-all
                                     duration-300 ease-in-out z-10">Courses</Link>
-                            <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
                                     rounded-full transition-all duration-300 ease-in-out"/>
-                        </div>
-                        <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                            <Link to="/mentoring" className="transition-all
-                                    duration-300 ease-in-out z-10">Mentoring</Link>
-                            <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                            </div>
+                            <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                <Link to="/academies" className="transition-all
+                                    duration-300 ease-in-out z-10">Academies</Link>
+                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
                                     rounded-full transition-all duration-300 ease-in-out"/>
-                        </div>
-                        <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                            <Link to="/academies" className="transition-all
-                                    duration-300 ease-in-out z-10">Academies</Link>
-                            <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                            </div>
+                        </section>
+
+                        {/*ABOUT SHIFTER*/}
+                        <section className="flex flex-col gap-2 text-left font-light text-lg">
+                            <h3 className="text-white font-bold text-2xl mb-4">About Us</h3>
+
+                            <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                <Link to="/about" className="transition-all
+                                    duration-300 ease-in-out z-10">About Shifter</Link>
+                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
                                     rounded-full transition-all duration-300 ease-in-out"/>
-                        </div>
-                        <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                            <Link to="/about" className="transition-all
-                                    duration-300 ease-in-out z-10">About</Link>
-                            <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                            </div>
+                            <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                <Link to="/experts" className="transition-all
+                                    duration-300 ease-in-out z-10">Experts</Link>
+                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
                                     rounded-full transition-all duration-300 ease-in-out"/>
-                        </div>
-                        <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                            <Link to="/profile" className="transition-all
-                                    duration-300 ease-in-out z-10">Profile</Link>
-                            <hr className="relative -left-30 group-hover:-left-4 border-t-2
-                                    rounded-full transition-all duration-300 ease-in-out"/>
-                        </div>
+                            </div>
+                        </section>
+
+                        {/*PROFILE*/}
+                        <section className="flex flex-col gap-2 text-left font-light text-lg">
+                            <h3 className="text-white font-bold text-2xl mb-4">Profile</h3>
+
+                            {user ?
+                                <>
+                                    <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                        <Link to="/profile" className="transition-all
+                                duration-300 ease-in-out z-10">Profile</Link>
+                                        <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                                rounded-full transition-all duration-300 ease-in-out"/>
+                                    </div>
+                                    <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                        <Link to="/profile" className="transition-all
+                                duration-300 ease-in-out z-10">Favorite Courses</Link>
+                                        <hr className="relative -left-40 group-hover:-left-4 border-t-2
+                                rounded-full transition-all duration-300 ease-in-out"/>
+                                    </div>
+                                    <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                        <Link to="/profile" className="transition-all
+                                duration-300 ease-in-out z-10">My Courses</Link>
+                                        <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                                rounded-full transition-all duration-300 ease-in-out"/>
+                                    </div>
+                                </> :
+                                <div className="flex flex-col gap-0 overflow-clip p-1 group w-fit">
+                                    <Link to="/login" className="transition-all
+                                duration-300 ease-in-out z-10">Log in / Sign up </Link>
+                                    <hr className="relative -left-40 group-hover:-left-4 border-t-2
+                                rounded-full transition-all duration-300 ease-in-out"/>
+                                </div>
+                            }
+                        </section>
+
+                        {/*CONTAXT*/}
+                        <section className="flex flex-col gap-2 text-left font-light text-lg">
+                            <h3 className="text-white font-bold text-2xl mb-4">Contact</h3>
+
+                            <p>contact@shifter.com</p>
+                            <div className="flex gap-2 items-center">
+                                Visit us at:
+                                <a
+                                    href="http://www.google.com"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className=""
+                                >
+                                    <LinkedIn className="w-6 h-6 text-white"/>
+                                </a>
+                                <a
+                                    href="http://www.google.com"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className=""
+                                >
+                                    <Instagram className="w-7 h-7 text-white"/>
+                                </a>
+                            </div>
+                        </section>
                     </div>
                 </div>
             </div>
-            <h6 className="text-sm my-2 font-light text-gray-600">
+            <div className="text-sm py-2 font-light text-white/80 border-t-2 border-white/20 w-9/10 mx-auto">
                 &copy; {new Date().getFullYear()} Shifter. All rights reserved.
-            </h6>
+            </div>
         </footer>
     )
Index: frontend/src/layout/Navbar.tsx
===================================================================
--- frontend/src/layout/Navbar.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/layout/Navbar.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -1,5 +1,5 @@
 import {Link} from "react-router-dom";
 import logo from "../assets/shifterImg/Shifter-S2W-White-Transparent.png"
-import {useGlobalContext} from "../GlobalContext.tsx";
+import {useGlobalContext} from "../context/GlobalContext.tsx";
 
 function Navbar() {
@@ -9,11 +9,11 @@
         <nav
             className="-mt-20 sticky top-2 border-3 border-white/30 bg-black/50 backdrop-blur-md
-            z-50 w-80/100 mx-auto flex items-center justify-between py-2 px-10 pr-0 rounded-full
-            text-white font-montserrat font-light overflow-clip ">
+            z-50 w-80/100 mx-auto flex items-center justify-between py-3 px-10 pr-0 rounded-full
+            text-white font-light overflow-clip ">
 
             {/* Left nav links */}
-            <div className="flex gap-20 text-LG items-center">
+            <div className="flex gap-20 text-lg items-center">
                 <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/courses" className="hover:scale-110 transition-all
+                    <Link to="/courses" className=" transition-all
                     duration-300 ease-in-out z-10">Courses</Link>
                     <hr className="relative -left-30 group-hover:-left-6 border-t-2
@@ -21,5 +21,5 @@
                 </div>
                 <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/mentoring" className="hover:scale-110 transition-all
+                    <Link to="/mentoring" className=" transition-all
                     duration-300 ease-in-out z-10">Mentoring</Link>
                     <hr className="relative -left-30 group-hover:-left-6 border-t-2
@@ -27,5 +27,5 @@
                 </div>
                 <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/academies" className="hover:scale-110 transition-all
+                    <Link to="/academies" className=" transition-all
                     duration-300 ease-in-out z-10">Academies</Link>
                     <hr className="relative -left-30 group-hover:-left-6 border-t-2
@@ -39,14 +39,14 @@
                 className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
             >
-                <img src={logo} alt="Shifter Logo" width={130}/>
+                <img src={logo} alt="Shifter Logo" width={150}/>
             </Link>
 
             {/* Right side icons and button */}
-            <div className="flex gap-20 text-md items-center">
+            <div className="flex gap-20 text-lg items-center">
                 {/*<UserCircle className="w-10 h-auto "/>*/}
                 {/*<CircleUserRound size={40} strokeWidth={1.5}/>*/}
 
                 <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/about" className="hover:scale-110 transition-all
+                    <Link to="/about" className=" transition-all
                     duration-300 ease-in-out z-10">About</Link>
                     <hr className="relative -left-30 group-hover:-left-4 border-t-2
@@ -57,7 +57,7 @@
                         <>
                             <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                                <button onClick={logout} className="hover:scale-110 transition-all
+                                <button onClick={logout} className=" transition-all
                     duration-300 ease-in-out z-10 cursor-pointer">Profile</button>
-                                {/*<Link to="/profile" className="hover:scale-110 transition-all*/}
+                                {/*<Link to="/profile" className=" transition-all*/}
                     {/*duration-300 ease-in-out z-10">Profile</Link>*/}
                                 <hr className="relative -left-30 group-hover:-left-4 border-t-2
Index: frontend/src/main.tsx
===================================================================
--- frontend/src/main.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/main.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -3,5 +3,5 @@
 import './global.css'
 import App from './App.tsx'
-import {GlobalProvider} from "./GlobalContext.tsx";
+import {GlobalProvider} from "./context/GlobalContext.tsx";
 
 createRoot(document.getElementById('root')!).render(
Index: frontend/src/pages/Courses.tsx
===================================================================
--- frontend/src/pages/Courses.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/pages/Courses.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -2,11 +2,17 @@
 import CoursesFilters from "../components/CoursesFilters.tsx";
 import CoursesGrid from "../components/CoursesGrid.tsx";
-import { type Course} from "../types/Course.tsx";
 import type {FilterParams} from "../types/FilterParams.tsx";
 import { useNavigate, useLocation } from "react-router-dom";
-import {fetchCoursesApi, fetchCoursesSkillsApi, fetchCoursesTopicsApi} from "../api/courses.ts";
+import {
+    fetchAllCoursesApi,
+    fetchCoursesSkillsApi,
+    fetchCoursesTopicsApi,
+    fetchFilteredCoursesApi,
+} from "../api/courses.ts";
 import axios from "axios";
-
-function getInitialParamsFromSearch(): FilterParams {
+import ShifterRocket from "../assets/shifterImg/Rocket-Blue-Fire.png"
+import type {Course} from "../types/Course.tsx";
+
+function getInitialFiltersFromSearch(): FilterParams {
     const searchParams = new URLSearchParams(location.search);
     const initialParams: FilterParams = {};
@@ -37,33 +43,55 @@
     const location = useLocation();
 
+    const sessionCourses = sessionStorage.getItem("allCourses");
+    const [courses, setCourses] = React.useState<Course[] | null>(sessionCourses ? JSON.parse(sessionCourses) : null);
+    const sessionTopics = sessionStorage.getItem("courseTopics");
+    const [topics, setTopics] = React.useState<string[] | null>(sessionTopics ? JSON.parse(sessionTopics) : null);
+    const sessionsSkills = sessionStorage.getItem("courseSkills");
+    const [skills, setSkills] = React.useState<string[] | null>(sessionsSkills ? JSON.parse(sessionsSkills) : null);
+
+    const [filters, setFilters] = React.useState<FilterParams>(getInitialFiltersFromSearch());
     const [loading, setLoading] = React.useState<boolean>(false);
-    const [courses, setCourses] = React.useState<Course[]>([]);
-    const [params, setParams] = React.useState<FilterParams>(getInitialParamsFromSearch());
-    const [topics, setTopics] = React.useState<string[]>([]);
-    const [skills, setSkills] = React.useState<string[]>([]);
 
     const abortControllerRef = useRef<AbortController | null>(null);
     const debounceTimeoutRef = useRef<number | null>(null);
 
-    const fetchFilterValues = () => {
-        fetchCoursesTopicsApi()
-            .then(data => {
-                setTopics([...new Set(data as string[])]);
-            })
-            .catch(err => {
-                console.error("Error fetching topics:", err);
-            })
-
-        fetchCoursesSkillsApi()
-            .then(data => {
-                setSkills([...new Set(data as string[])]);
-            })
-            .catch(err => {
-                console.error("Error fetching skills:", err);
-            })
-    }
-
-    const fetchCourses = () => {
-
+    // INITIAL FETCHES IF NOTHING IN SESSION STORAGE (e.g. user visits /courses directly instead of from Home)
+    useEffect(() => {
+
+        if (!topics)
+            fetchCoursesTopicsApi()
+                .then(data => {
+                    setTopics(data);
+                    sessionStorage.setItem("courseTopics", JSON.stringify(data));
+                })
+                .catch(err => {
+                    console.error("Error fetching course topics: ", err);
+                    throw err;
+                })
+
+        if (!skills)
+            fetchCoursesSkillsApi()
+                .then(data => {
+                    setSkills(data);
+                    sessionStorage.setItem("courseSkills", JSON.stringify(data));
+                })
+                .catch(err => {
+                    console.error("Error fetching course skills: ", err);
+                    throw err;
+                })
+
+        if (!courses)
+            fetchAllCoursesApi()
+                .then(data => {
+                    setCourses(data);
+                    sessionStorage.setItem("allCourses", JSON.stringify(data));
+                })
+                .catch(err => {
+                    console.error("Error fetching all courses: ", err);
+                    throw err;
+                })
+    }, [])
+
+    const fetchFilteredCourses = () => {
         if (abortControllerRef.current) {
             abortControllerRef.current.abort();
@@ -75,5 +103,5 @@
         setLoading(true);
 
-        fetchCoursesApi(params, controller.signal)
+        fetchFilteredCoursesApi(filters, controller.signal)
             .then(data => {
                 setCourses(data)
@@ -95,18 +123,50 @@
     }
 
-    // FETCH FILTER TOPICS AND SKILLS. GET THE PARAMS FROM THE QUERY - ONLY ON MOUNT
-    useEffect(() => {
-        fetchFilterValues();
-    }, []);
-
     // UPDATE URL WHEN PARAMS CHANGE
     useEffect(() => {
+        console.log(filters);
+
         if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
 
+        const noFiltersApplied = Object.keys(filters).length === 0;
+
+        if (noFiltersApplied) {
+            // No filters → immediately show all courses from sessionStorage (no debounce!)
+            const sessionCourses = sessionStorage.getItem("allCourses");
+            if (!sessionCourses) {
+                setLoading(true)
+                fetchAllCoursesApi()
+                    .then(data => {
+                        setCourses(data);
+                        sessionStorage.setItem("allCourses", JSON.stringify(data));
+                    })
+                    .catch(err => {
+                        console.error("Error fetching all courses: ", err);
+                        throw err;
+                    })
+                    .finally(() => {
+                        setLoading(false);
+                    });
+            } else {
+                setCourses(JSON.parse(sessionCourses) || []);
+            }
+
+            // Update URL without debounce (if needed)
+            const paramsToUrl = new URLSearchParams();
+            const newSearch = paramsToUrl.toString();
+            if (newSearch !== location.search.replace(/^\?/, "")) {
+                navigate({ pathname: location.pathname, search: newSearch }, { replace: true });
+            }
+
+            return () => {
+                if (abortControllerRef.current) abortControllerRef.current.abort();
+            };
+        }
+
+        // Filters are applied → debounce API call
         debounceTimeoutRef.current = setTimeout(() => {
-            // Update URL params
             const paramsToUrl = new URLSearchParams();
 
-            Object.entries(params).forEach(([key, value]) => {
+            Object.entries(filters).forEach(([key, value]) => {
                 if (
                     value !== undefined &&
@@ -128,5 +188,5 @@
             }
 
-            fetchCourses();
+            fetchFilteredCourses();
         }, 500);
 
@@ -135,14 +195,21 @@
             if (abortControllerRef.current) abortControllerRef.current.abort();
         };
-    }, [params]);
+    }, [filters]);
+
 
 
     return (
         <main className="font-montserrat bg-white">
-            <section className="bg-deep-green/10 flex flex-col items-center justify-center py-vertical-lg pt-40 gap-4 px-40">
+            <section className="relative flex flex-col items-center justify-center py-vertical-lg pt-30 gap-4 px-40 shadow-sm">
+                <img
+                    src={ShifterRocket}
+                    alt="Shifter Rocket"
+                    className="absolute top-30 left-20 rotate-45 w-16 h-auto"
+                />
+
                 <h1 className="text-6xl">
                     Ready to Take the
                     <br />
-                    <strong className="text-shifter font-semibold">Next Step?</strong>
+                    <strong className="text-shifter">Next Step?</strong>
                 </h1>
                 <p>
@@ -152,8 +219,8 @@
                 </p>
             </section>
-            <div className="flex gap-0 w-full">
-                <CoursesFilters setParams={setParams} params={params} topics={topics} skills={skills}/>
-                <CoursesGrid setParams={setParams} params={params} courses={courses} loading={loading}/>
-            </div>
+            <section className="flex gap-0 w-full">
+                <CoursesFilters setFilters={setFilters} filters={filters} topics={topics} skills={skills}/>
+                <CoursesGrid setFilters={setFilters} filters={filters} courses={courses} loading={loading}/>
+            </section>
         </main>
     )
Index: frontend/src/pages/Home.tsx
===================================================================
--- frontend/src/pages/Home.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/pages/Home.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -4,14 +4,120 @@
 import ShifterValues from "../components/ShifterValues.tsx";
 import CoursesCarousel from "../components/CoursesCarousel.tsx";
+import {useCourseStorage} from "../context/CourseStorage.ts";
+import {useEffect} from "react";
+import {
+    fetchAllCoursesApi,
+    fetchCoursesSkillsApi,
+    fetchCoursesTopicsApi,
+    fetchRecommendedCoursesApi
+} from "../api/courses.ts";
+import {useGlobalContext} from "../context/GlobalContext.tsx";
 
 function Home() {
+    const {accessToken} = useGlobalContext();
+    const {
+        recommendedCourses,
+        setRecommendedCourses,
+        allCourses,
+        setAllCourses,
+        topics,
+        setTopics,
+        skills,
+        setSkills
+    } = useCourseStorage();
+
+    const fetchRecommendedCourses = async () => {
+        const stored = sessionStorage.getItem("recommendedCourses");
+        if (stored) {
+            setRecommendedCourses(JSON.parse(stored));
+            return;
+        }
+
+        fetchRecommendedCoursesApi(accessToken || "")
+            .then(data => {
+                setRecommendedCourses(data);
+                sessionStorage.setItem("recommendedCourses", JSON.stringify(data));
+            })
+            .catch(err => {
+                console.error("Error fetching recommended courses:", err);
+                throw err;
+            });
+    }
+
+    const fetchAllCourses = async () => {
+        const stored = sessionStorage.getItem("allCourses");
+        if (stored) {
+            setAllCourses(JSON.parse(stored));
+            return;
+        }
+
+        fetchAllCoursesApi()
+            .then(data => {
+                setAllCourses(data);
+                sessionStorage.setItem("allCourses", JSON.stringify(data));
+            })
+            .catch(err => {
+                console.error("Error fetching all courses:", err);
+                throw err;
+            });
+    }
+
+    const fetchCoursesTopics = async () => {
+        const stored = sessionStorage.getItem("courseTopics");
+        if (stored) {
+            setTopics(JSON.parse(stored));
+            return;
+        }
+
+        fetchCoursesTopicsApi()
+            .then(data => {
+                setTopics(data);
+                sessionStorage.setItem("courseTopics", JSON.stringify(data));
+            })
+            .catch(err => {
+                console.error("Error fetching course topics:", err);
+                throw err;
+            });
+    }
+
+    const fetchCoursesSkills = async () => {
+        const stored = sessionStorage.getItem("courseSkills");
+        if (stored) {
+            setSkills(JSON.parse(stored));
+            return;
+        }
+
+        fetchCoursesSkillsApi()
+            .then(data => {
+                setSkills(data);
+                sessionStorage.setItem("courseSkills", JSON.stringify(data));
+            })
+            .catch(err => {
+                console.error("Error fetching course skills:", err);
+                throw err;
+            });
+    }
+
+    useEffect(() => {
+        if (!recommendedCourses)
+            fetchRecommendedCourses()
+
+        if (!allCourses)
+            fetchAllCourses()
+
+        if (!topics)
+            fetchCoursesTopics()
+
+        if (!skills)
+            fetchCoursesSkills()
+    }, []);
 
     return (
-        <main>
-            <Hero />
-            <CollaborationSteps />
-            <RoadmapAI />
-            <CoursesCarousel />
-            <ShifterValues />
+        <main className="bg-white">
+            <Hero/>
+            <CollaborationSteps/>
+            <RoadmapAI/>
+            <CoursesCarousel/>
+            <ShifterValues/>
         </main>
     )
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/pages/Login.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -4,5 +4,5 @@
 import { Eye, EyeOff } from "lucide-react";
 import { Link, useNavigate } from "react-router-dom";
-import { useGlobalContext } from "../GlobalContext.tsx";
+import { useGlobalContext } from "../context/GlobalContext.tsx";
 
 interface InputProps {
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/pages/Register.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -17,5 +17,5 @@
 import RegisterStepFour from "../components/steps/RegisterStepFour.tsx";
 import RegisterStepFive from "../components/steps/RegisterStepFive.tsx";
-import {useGlobalContext} from "../GlobalContext.tsx";
+import {useGlobalContext} from "../context/GlobalContext.tsx";
 import {isValidEmail} from "../utils/validation.ts";
 import {checkEmailExistsApi} from "../api/user.ts";
Index: frontend/src/slick-custom.css
===================================================================
--- frontend/src/slick-custom.css	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/slick-custom.css	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -6,5 +6,5 @@
 .slick-slide {
     padding: 0 3rem;
-    opacity: 0.9;
+    opacity: 0.6;
     transform: scale(0.8);
     transition: all 0.4s ease-in-out;
@@ -17,5 +17,14 @@
         overflow: hidden;
     }
+
+    button {
+        cursor: initial;
+    }
+
+    button:hover {
+        box-shadow: none !important;
+    }
 }
+
 
 .slick-center {
@@ -30,5 +39,5 @@
         display: flex;
         flex-direction: column;
-        justify-content: stretch;
+        justify-content: center;
         height: 100%;
         border-radius: 12px;
Index: frontend/src/types/FilterParams.tsx
===================================================================
--- frontend/src/types/FilterParams.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/types/FilterParams.tsx	(revision ff6c3b7ddd4880243be29679e37d8a82d155513b)
@@ -1,9 +1,9 @@
 
 export interface FilterParams {
-    search: string;
-    difficulty: string[];
-    price: string[];
-    duration: string[];
-    skill: string[];
-    topic: string[];
+    search?: string;
+    difficulty?: string[];
+    price?: string[];
+    duration?: string[];
+    skill?: string[];
+    topic?: string[];
 }