Index: backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,9 +1,13 @@
 package com.shifterwebapp.shifter.auth;
 
+import com.shifterwebapp.shifter.Validate;
+import com.shifterwebapp.shifter.user.UserDto;
 import com.shifterwebapp.shifter.user.service.UserService;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 import lombok.RequiredArgsConstructor;
+import org.apache.coyote.Response;
 import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.Authentication;
 import org.springframework.web.bind.annotation.*;
 
@@ -17,5 +21,5 @@
 
     private final AuthService authService;
-
+    private final Validate validate;
     private final UserService userService;
 
@@ -48,4 +52,11 @@
     }
 
+    @GetMapping("/oauth/finalize")
+    public void finalizeOAuthLogin(Authentication authentication, HttpServletResponse response) throws IOException {
+        Long userId = validate.extractUserId(authentication);
+
+        authService.finalizeOAuthLogin(userId, response);
+    }
+
     @PostMapping("/refresh")
     public ResponseEntity<AuthResponse> refreshToken(HttpServletRequest request) {
Index: backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -7,4 +7,5 @@
 import com.shifterwebapp.shifter.external.email.EmailService;
 import com.shifterwebapp.shifter.user.User;
+import com.shifterwebapp.shifter.user.UserDto;
 import com.shifterwebapp.shifter.user.UserMapper;
 import com.shifterwebapp.shifter.user.UserRepository;
@@ -132,4 +133,10 @@
     }
 
+    public void finalizeOAuthLogin(Long userId, HttpServletResponse response) throws IOException {
+        User user = userService.getUserEntityById(userId);
+
+        if (user.getIsEnabled())
+            sendTokens(response, user);
+    }
 
     public AuthResponse refreshToken(HttpServletRequest request) {
Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/package-lock.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -24,4 +24,5 @@
         "framer-motion": "^12.19.1",
         "gsap": "^3.13.0",
+        "i18next": "^25.6.0",
         "lottie-react": "^2.4.1",
         "lucide-react": "^0.515.0",
@@ -30,6 +31,8 @@
         "react": "^19.1.0",
         "react-bits": "^1.0.5",
+        "react-country-flag": "^3.1.0",
         "react-countup": "^6.5.3",
         "react-dom": "^19.1.0",
+        "react-i18next": "^16.0.0",
         "react-router-dom": "^7.6.2",
         "react-slick": "^0.30.3",
@@ -4051,4 +4054,44 @@
       "license": "MIT"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "25.6.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.6.0.tgz",
+      "integrity": "sha512-tTn8fLrwBYtnclpL5aPXK/tAYBLWVvoHM1zdfXoRNLcI+RvtMsoZRV98ePlaW3khHYKuNh/Q65W/+NVFUeIwVw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
@@ -5138,4 +5181,16 @@
       }
     },
+    "node_modules/react-country-flag": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
+      "integrity": "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-countup": {
       "version": "6.5.3",
@@ -5160,4 +5215,30 @@
       "peerDependencies": {
         "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-i18next": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.0.0.tgz",
+      "integrity": "sha512-JQ+dFfLnFSKJQt7W01lJHWRC0SX7eDPobI+MSTJ3/gP39xH2g33AuTE7iddAfXYHamJdAeMGM0VFboPaD3G68Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.5.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
       }
     },
@@ -5802,5 +5883,5 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
@@ -5985,4 +6066,13 @@
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/package.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -26,4 +26,5 @@
     "framer-motion": "^12.19.1",
     "gsap": "^3.13.0",
+    "i18next": "^25.6.0",
     "lottie-react": "^2.4.1",
     "lucide-react": "^0.515.0",
@@ -32,6 +33,8 @@
     "react": "^19.1.0",
     "react-bits": "^1.0.5",
+    "react-country-flag": "^3.1.0",
     "react-countup": "^6.5.3",
     "react-dom": "^19.1.0",
+    "react-i18next": "^16.0.0",
     "react-router-dom": "^7.6.2",
     "react-slick": "^0.30.3",
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/App.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -2,5 +2,4 @@
 import Home from "./pages/Home.tsx";
 import Navbar from "./layout/Navbar.tsx";
-import Footer from "./layout/Footer.tsx";
 import Login from "./pages/Login.tsx";
 import Register from "./pages/Register.tsx";
@@ -12,5 +11,4 @@
 import Profile from "./pages/Profile.tsx";
 import Learn from "./pages/Learn.tsx";
-import FreeConsultation from "./pages/FreeConsultation.tsx";
 import PublicOnlyRoute from "./components/routeProtectors/PublicOnlyRoute.tsx";
 import UserOnlyRoute from "./components/routeProtectors/UserOnlyRoute.tsx";
@@ -27,4 +25,8 @@
 import Personalize from "./pages/Personalize.tsx";
 import OAuth2RedirectHandler from "./api/OAuth2RedirectHandler.tsx";
+import FooterNew from "./layout/FooterNew.tsx";
+import FooterSmall from "./layout/FooterSmall.tsx";
+import FreeConsultation from "./pages/FreeConsultation.tsx";
+import LanguageToggle from "./layout/LanguageToggle.tsx";
 
 function LayoutWrapper() {
@@ -35,9 +37,13 @@
         location.pathname === "/welcome" ||
         location.pathname.startsWith("/learn/");
-    const hideFooter =
+    const showSmallFooter =
+        location.pathname === "/profile" ||
+        location.pathname === "/courses" ||
+        location.pathname === "/learn" ||
         location.pathname === "/mentoring" ||
         location.pathname === "/consulting" ||
         location.pathname === "/academies" ||
-        location.pathname === "/contact";
+        location.pathname === "/contact" ||
+        location.pathname === "/free-consultation";
     const {user, authChecked} = useAuthContext();
 
@@ -79,5 +85,5 @@
                 }/>
 
-                <Route path="/oauth2/redirect" element={<OAuth2RedirectHandler />} />
+                <Route path="/oauth2/redirect" element={<OAuth2RedirectHandler/>}/>
 
                 <Route path="/" element={<Home/>}/>
@@ -85,9 +91,21 @@
                 <Route path="/about" element={<About/>}/>
 
-                <Route path="/mentoring" element={<Mentoring/>}/>
+                <Route path="/mentoring" element={
+                    <UserOnlyRoute>
+                        <Mentoring/>
+                    </UserOnlyRoute>
+                }/>
 
-                <Route path="/consulting" element={<Consulting/>}/>
+                <Route path="/consulting" element={
+                    <UserOnlyRoute>
+                        <Consulting/>
+                    </UserOnlyRoute>
+                }/>
 
-                <Route path="/academies" element={<Academies/>}/>
+                <Route path="/academies" element={
+                    <UserOnlyRoute>
+                        <Academies/>
+                    </UserOnlyRoute>
+                }/>
 
                 <Route path="/courses" element={<Courses/>}/>
@@ -96,5 +114,5 @@
                 <Route path="/contact" element={
                     <UserOnlyRoute>
-                        <Contact />
+                        <Contact/>
                     </UserOnlyRoute>
                 }/>
@@ -124,5 +142,5 @@
 
             </Routes>
-            {(!hideLayout && !hideFooter) && <Footer/>}
+            {(!hideLayout) && showSmallFooter ? <FooterSmall/> : <FooterNew/>}
         </>
     );
@@ -154,4 +172,5 @@
             />
             <LayoutWrapper/>
+            <LanguageToggle/>
         </>
     );
Index: frontend/src/api/OAuth2RedirectHandler.tsx
===================================================================
--- frontend/src/api/OAuth2RedirectHandler.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/api/OAuth2RedirectHandler.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,6 +1,6 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useAuthContext } from "../context/AuthContext.tsx";
-import {getUserApi} from "./userApi.ts";
+import {oAuthLoginApi} from "./authApi.ts";
 
 export default function OAuth2RedirectHandler() {
@@ -16,10 +16,10 @@
         if (token) {
             if (login) {
-                getUserApi(token)
-                    .then(user => {
-                        setUser(user);
+                oAuthLoginApi(token)
+                    .then(data => {
                         setAuthChecked(true);
-                        setAccessToken(token);
-                        navigate("/", { replace: true }); // Use replace to avoid adding to history
+                        setUser(data.user);
+                        setAccessToken(data.accessToken);
+                        navigate("/", { replace: true }); // Using replace to avoid adding to history
                     })
                     .catch(err => console.log("Cannot fetch user: ", err));
Index: frontend/src/api/authApi.ts
===================================================================
--- frontend/src/api/authApi.ts	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/api/authApi.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -7,5 +7,5 @@
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
-export const refreshAccessTokenApi = async (): Promise<{user: User, accessToken: string}> => {
+export const refreshAccessTokenApi = async (): Promise<{ user: User, accessToken: string }> => {
     const res = await axios.post(`${backendUrl}/api/auth/refresh`,
         {},
@@ -19,5 +19,5 @@
     await axios.post(`${backendUrl}/api/auth/register`,
         {email, password},
-        { withCredentials: true }
+        {withCredentials: true}
     );
 }
@@ -26,5 +26,5 @@
     const res = await axios.post(`${backendUrl}/api/auth/verify`,
         {token},
-        { withCredentials: true }
+        {withCredentials: true}
     );
 
@@ -32,8 +32,8 @@
 }
 
-export const personalizeApi = async (user: UserPersonalization): Promise<{user: User, accessToken: string}> => {
+export const personalizeApi = async (user: UserPersonalization): Promise<{ user: User, accessToken: string }> => {
     const res = await axios.post(`${backendUrl}/api/auth/personalize`,
         user,
-        { withCredentials: true }
+        {withCredentials: true}
     );
 
@@ -41,5 +41,17 @@
 }
 
-export const loginApi = async (email: string, password: string): Promise<{user: User, accessToken: string}> => {
+export const oAuthLoginApi = async (accessToken: string): Promise<{ user: User, accessToken: string }> => {
+    const res = await axios.get(`${backendUrl}/api/auth/oauth/finalize`, {
+            withCredentials: true,
+            headers: {
+                Authorization: `Bearer ${accessToken}`
+            },
+        }
+    );
+
+    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},
Index: frontend/src/assets/animations/SpikeAnimation.tsx
===================================================================
--- frontend/src/assets/animations/SpikeAnimation.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/assets/animations/SpikeAnimation.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,12 +1,14 @@
 import React from "react";
 
-export function LightBeams(): React.ReactElement {
-    const beamCount = 120; // more beams for denser effect
+export function LightBeams({tilt, beamCount, initialHeight, spikeMoveDown}: {
+    tilt: number,
+    beamCount: number,
+    initialHeight: number,
+    spikeMoveDown: number
+}): React.ReactElement {
     const beams = Array.from({ length: beamCount }, (_, i) => {
-        const spacing = (window.innerWidth + 300) / beamCount; // tighter spacing
+        const spacing = (window.innerWidth + 320) / beamCount; // tighter spacing
         const x = i * spacing;
         const width = 10 + Math.random() * 4; // thin but varied
-        const tilt = -50; // tilt to the right
-        const initialHeight = 120 + Math.random() * 80; // starting height
 
         return (
@@ -28,5 +30,5 @@
                 <animate
                     attributeName="y"
-                    values={`${320 - initialHeight}; ${320 - (initialHeight - 40)}; ${320 - initialHeight}`}
+                    values={`${320 - initialHeight}; ${320 - (initialHeight - spikeMoveDown)}; ${320 - initialHeight}`}
                     dur={`${1 + Math.random() * 2}s`}
                     repeatCount="indefinite"
Index: frontend/src/assets/icons/Instagram.tsx
===================================================================
--- frontend/src/assets/icons/Instagram.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/assets/icons/Instagram.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,12 +1,12 @@
-export default function Instagram({className = "w-6 h-6 text-black"}) {
+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
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"     // Reset full view
+            fill="currentColor"
+            className={className}
+        >
+            <path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 7a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm4.5-3.5a1.25 1.25 0 1 0 1.25 1.25A1.25 1.25 0 0 0 16.5 5.5z" />
         </svg>
-    )
+    );
 }
Index: frontend/src/assets/icons/LinkedIn.tsx
===================================================================
--- frontend/src/assets/icons/LinkedIn.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/assets/icons/LinkedIn.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -9,5 +9,4 @@
                 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 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/CollaborationSteps.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,51 +1,63 @@
+import { useAuthContext } from "../context/AuthContext.tsx";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
 export default function CollaborationSteps() {
+    const { user } = useAuthContext();
+    const { t } = useTranslation("home");
+
     const steps = [
         {
             number: '01',
-            title: 'Schedule a Free Consultation',
-            description:
-                'Schedule a no-obligation consultation to discuss your challenges, goals, and expectations.',
+            title: user?.hasUsedFreeConsultation
+                ? t("collaborationSteps.step1.afterConsultation.title")
+                : t("collaborationSteps.step1.beforeConsultation.title"),
+            description: user?.hasUsedFreeConsultation
+                ? t("collaborationSteps.step1.afterConsultation.description")
+                : t("collaborationSteps.step1.beforeConsultation.description"),
         },
         {
             number: '02',
-            title: 'Share Your Needs & Goals',
-            description:
-                'Provide clear insights about your business struggles and aspirations to shape the right strategy.',
+            title: t("collaborationSteps.step2.title"),
+            description: t("collaborationSteps.step2.description"),
         },
         {
             number: '03',
-            title: 'Review Your Personalized Plan',
-            description:
-                'Receive a tailored roadmap with clear, actionable steps to help you achieve business success.',
+            title: t("collaborationSteps.step3.title"),
+            description: t("collaborationSteps.step3.description"),
         },
         {
             number: '04',
-            title: 'Start Implementing & Collaborating',
-            description:
-                'Apply expert guidance and proven strategies with continuous support throughout the process.',
+            title: t("collaborationSteps.step4.title"),
+            description: t("collaborationSteps.step4.description"),
         },
     ];
 
+    return (
+        <section className="relative bg-shifter text-white py-vertical-xl px-horizontal-md flex flex-col gap-between-md items-center">
+            {/* Gradients */}
+            <div className="absolute bottom-0 w-full h-[32%]" style={{
+                background: "linear-gradient(to bottom, rgba(248,246,245,0) 0%, rgba(248,246,245,0.1) 20%, rgba(248,246,245,0.9) 80%, rgba(248,246,245,1) 100%)",
+                pointerEvents: "none",
+            }} />
+            <div className="absolute top-0 w-full h-[32%]" style={{
+                background: "linear-gradient(to top, rgba(248,246,245,0) 0%, rgba(248,246,245,0.1) 20%, rgba(248,246,245,0.9) 80%, rgba(248,246,245,1) 100%)",
+                pointerEvents: "none",
+            }} />
 
-    return (
-        <section className="bg-dark-blue text-white py-vertical-md px-horizontal-md flex flex-col gap-12 items-center">
-            <h2 className="text-5xl font-light">
-                How to Start Your Journey to <strong className="font-bold">Success</strong>
-            </h2>
+            <h2 className="text-5xl font-light z-1" dangerouslySetInnerHTML={{ __html: t("collaborationSteps.heading") }} />
 
             <div className="relative flex w-full mt-4">
                 {/* LINE AND DOTS */}
                 <div className="absolute w-[104%] top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 -rotate-16">
-                    <hr className="border-t-4 border-white rounded-full w-full absolute top-2"/>
-
+                    <hr className="border-t-4 border-white rounded-full w-full absolute top-2" />
                     {[-0.2, 25, 50, 75, 99.8].map((percent, idx) => (
                         <div
                             key={idx}
                             className="absolute w-5 h-5 bg-white rounded-full z-20 border-2 border-black/20 top-0"
-                            style={{left: `${percent}%`, transform: 'translateX(-50%)'}}
+                            style={{ left: `${percent}%`, transform: 'translateX(-50%)' }}
                         />
                     ))}
                 </div>
-
 
                 {steps.map((step, i) => (
@@ -53,10 +65,7 @@
                         key={i}
                         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
-                            `}
+                                border-l-2 ${i === 3 ? 'border-r-2' : ''} ${i < 2 ? 'pb-60' : 'pt-60'} border-white/60`}
                     >
-                        {/* Number */}
                         <strong className="text-4xl font-bold text-white/60">{step.number}</strong>
-                        {/* Title and description */}
                         <div className="flex flex-col justify-start h-full gap-2">
                             <div className="flex justify-center items-center min-h-[3.5rem]">
@@ -69,9 +78,11 @@
             </div>
 
-            {/* Button */}
-            <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">
-                Get Started
-            </button>
+            <Link
+                to={user?.hasUsedFreeConsultation ? "/contact" : "/free-consultation"}
+                className="z-1 hover:shadow-white/60 transition-all duration-200 ease-in-out cursor-pointer
+                w-3/10 whitespace-nowrap py-2 bg-white text-xl text-black-text rounded-md font-semibold
+                shadow-md shadow-white/40 border-2 border-shifter/20">
+                {t("collaborationSteps.button")}
+            </Link>
         </section>
     );
Index: ontend/src/components/CourseCardEnrolled.tsx
===================================================================
--- frontend/src/components/CourseCardEnrolled.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ 	(revision )
@@ -1,96 +1,0 @@
-import type {CoursePreviewEnrolled} from "../models/javaObjects/CoursePreviewEnrolled.tsx";
-import {Link} from "react-router-dom";
-import React from "react";
-import {toUrlFormat} from "../utils/toUrlFormat.ts";
-import StarFilled from "../assets/icons/StarFilled.tsx";
-import StarOutline from "../assets/icons/StarOutline.tsx";
-import ModalReviewCourse from "./ModalReviewCourse.tsx";
-
-function CourseCardEnrolled({course, markCourseAsRated}: {
-    course: CoursePreviewEnrolled
-    markCourseAsRated: (rating: number) => void;
-}) {
-    const [showReviewModal, setShowReviewModal] = React.useState<boolean>(false);
-
-    return (
-        <aside className="h-full">
-            <Link
-                style={{"--card-color": course.color} as React.CSSProperties}
-                className="hover:shadow-md transition-all duration-300 ease-in-out
-                flex flex-col gap-2 items-center col-span-1 p-2 rounded-md h-full"
-                to={`/learn/${course.id}/${toUrlFormat(course.titleShort)}`}>
-
-                {/*IMAGE*/}
-                <div className="overflow-clip rounded-sm">
-                    <img src={course.imageUrl} alt={course.title}
-                         className="aspect-video object-cover"/>
-                </div>
-
-                {/*INFO*/}
-                <div className="flex flex-col gap-2 justify-between flex-1 text-left">
-                    <h3 className="text-md font-bold">{course.titleShort}</h3>
-
-                    <p className="text-black/60 text-sm">{
-                        course.topicsCovered.map(item =>
-                            item
-                                .toLowerCase()
-                                .replace(/_/g, " ")
-                                .replace(/\b\w/g, c => c.toUpperCase())
-                        )
-                            .join(" • ")
-                    }</p>
-                </div>
-
-                {/*PROGRESS BAR*/}
-                <div className="flex flex-col gap-1 items-start w-full">
-                    <div className="w-full bg-gray-200 rounded-full h-0.5">
-                        <div
-                            className="h-full rounded-full"
-                            style={{
-                                width: `${(course.lecturesFinishedCount / course.courseLectureCount) * 100}%`,
-                                backgroundColor: course.color,
-                            }}
-                        />
-                    </div>
-                    <div className="flex justify-between w-full">
-                        <p className="text-xs text-black/60">
-                            {course.lecturesFinishedCount / course.courseLectureCount * 100}% completed
-                        </p>
-                        {
-                            course.isFinished && (
-                                <button
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        setShowReviewModal(true)
-                                    }}
-                                    className="hover:bg-black/5 px-2 rounded-xs
-                                    flex gap-1 cursor-pointer"
-                                >
-                                    {[1, 2, 3, 4, 5].map((star) => {
-                                        const courseRating = course.rating;
-                                        const StarIcon = courseRating > 0 && star <= courseRating ? StarFilled : StarOutline;
-                                        return <StarIcon key={star} className="w-2 text-yellow-400" />;
-                                    })}
-                                </button>
-                            )
-                        }
-                    </div>
-                </div>
-            </Link>
-
-            {
-                showReviewModal && (
-                    <ModalReviewCourse
-                        courseId={course.id}
-                        closeModal={() => setShowReviewModal(false)}
-                        markCourseAsRated={markCourseAsRated}
-                        isUpdate={true}
-                    />
-                )
-            }
-        </aside>
-    )
-}
-
-export default CourseCardEnrolled;
Index: frontend/src/components/CourseCardLearnDashboard.tsx
===================================================================
--- frontend/src/components/CourseCardLearnDashboard.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/components/CourseCardLearnDashboard.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,105 @@
+import type {CoursePreviewEnrolled} from "../models/javaObjects/CoursePreviewEnrolled.tsx";
+import {Link} from "react-router-dom";
+import React from "react";
+import {toUrlFormat} from "../utils/toUrlFormat.ts";
+import StarFilled from "../assets/icons/StarFilled.tsx";
+import StarOutline from "../assets/icons/StarOutline.tsx";
+import ModalReviewCourse from "./ModalReviewCourse.tsx";
+import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
+
+function CourseCardLearnDashboard({course, markCourseAsRated}: {
+    course: CoursePreviewEnrolled | CoursePreview;
+    markCourseAsRated: (rating: number) => void;
+}) {
+    const [showReviewModal, setShowReviewModal] = React.useState<boolean>(false);
+
+    return (
+        <aside className="h-full">
+            <Link
+                style={{"--card-color": course.color} as React.CSSProperties}
+                className="hover:shadow-md transition-all duration-300 ease-in-out
+                flex flex-col gap-2 items-center col-span-1 p-2 rounded-md h-full"
+                to={
+                    "rating" in course ?
+                        `/learn/${course.id}/${toUrlFormat(course.titleShort)}` :
+                        `/courses/${course.id}//${toUrlFormat(course.titleShort)}`
+                }>
+
+                {/*IMAGE*/}
+                <div className="overflow-clip rounded-sm">
+                    <img src={course.imageUrl} alt={course.title}
+                         className="aspect-video object-cover"/>
+                </div>
+
+                {/*INFO*/}
+                <div className="flex flex-col gap-2 justify-between flex-1 text-left">
+                    <h3 className="text-md font-bold">{course.titleShort}</h3>
+
+                    <p className="text-black/60 text-sm">{
+                        course.topicsCovered.map(item =>
+                            item
+                                .toLowerCase()
+                                .replace(/_/g, " ")
+                                .replace(/\b\w/g, c => c.toUpperCase())
+                        )
+                            .join(" • ")
+                    }</p>
+                </div>
+
+                {/*PROGRESS BAR*/}
+                {
+                    "lecturesFinishedCount" in course && (
+                        <div className="flex flex-col gap-1 items-start w-full">
+                            <div className="w-full bg-gray-200 rounded-full h-0.5">
+                                <div
+                                    className="h-full rounded-full"
+                                    style={{
+                                        width: `${(course.lecturesFinishedCount / course.courseLectureCount) * 100}%`,
+                                        backgroundColor: course.color,
+                                    }}
+                                />
+                            </div>
+                            <div className="flex justify-between w-full">
+                                <p className="text-xs text-black/60">
+                                    {course.lecturesFinishedCount / course.courseLectureCount * 100}% completed
+                                </p>
+                                {
+                                    course.isFinished && (
+                                        <button
+                                            onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                setShowReviewModal(true)
+                                            }}
+                                            className="hover:bg-black/5 px-2 rounded-xs
+                                    flex gap-1 cursor-pointer"
+                                        >
+                                            {[1, 2, 3, 4, 5].map((star) => {
+                                                const courseRating = course.rating;
+                                                const StarIcon = courseRating > 0 && star <= courseRating ? StarFilled : StarOutline;
+                                                return <StarIcon key={star} className="w-2 text-yellow-400"/>;
+                                            })}
+                                        </button>
+                                    )
+                                }
+                            </div>
+                        </div>
+                    )
+                }
+            </Link>
+
+            {
+                "lecturesFinishedCount" in course && showReviewModal && (
+                    <ModalReviewCourse
+                        courseId={course.id}
+                        closeModal={() => setShowReviewModal(false)}
+                        markCourseAsRated={markCourseAsRated}
+                        isUpdate={true}
+                    />
+                )
+            }
+        </aside>
+    )
+}
+
+export default CourseCardLearnDashboard;
Index: frontend/src/components/CourseDetailsInfo.tsx
===================================================================
--- frontend/src/components/CourseDetailsInfo.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/CourseDetailsInfo.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -37,10 +37,5 @@
             {/*WHAT WILL BE LEARNED*/}
             <section className="relative flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md overflow-clip ">
-                <img src={ShifterArrow} alt="Shifter Arrow"
-                     className="absolute opacity-10 h-150 w-120 -rotate-130 -top-40 right-0"/>
-                <img src={ShifterArrow} alt="Shifter Arrow"
-                     className="absolute opacity-10 h-150 w-120 rotate-50 -bottom-40 left-0"/>
-
-                <h2 className="text-5xl">What you'll learn</h2>
+                <h2 className="text-5xl font-semibold">What you'll learn</h2>
                 <div className="grid grid-cols-2 gap-y-4 gap-x-20">
                     {
@@ -58,5 +53,5 @@
             <section
                 className="relative flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md overflow-clip ">
-                <h2 className="text-5xl">Course content</h2>
+                <h2 className="text-5xl font-semibold">Course content</h2>
                 <div>
                     {
@@ -75,5 +70,5 @@
                                                          className={`text-black ${isOpen ? "rotate-180" : "rotate-0"} transition-all duration-500 ease-in-out `}
                                             />
-                                            <h3 className="text-2xl font-semibold">{content.title}</h3>
+                                            <h3 className="text-2xl font-medium">{content.title}</h3>
                                         </div>
 
@@ -102,5 +97,5 @@
                                                                 <div className="flex flex-col gap-2">
                                                                     <h4 className="font-medium">{lecture.title}</h4>
-                                                                    <p className="opacity-80">{lecture.description}</p>
+                                                                    <p className="font-light opacity-80">{lecture.description}</p>
                                                                 </div>
                                                             </div>
@@ -121,5 +116,5 @@
             {/*DESCRIPTION*/}
             <section className="flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md">
-                <h2 className="text-5xl">Course description</h2>
+                <h2 className="text-5xl font-semibold">Course description</h2>
 
                 <div>
Index: frontend/src/components/CoursesCarouselCourseDetails.tsx
===================================================================
--- frontend/src/components/CoursesCarouselCourseDetails.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/CoursesCarouselCourseDetails.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -7,5 +7,7 @@
 import CourseCardSkeleton from "./skeletons/CourseCardSkeleton.tsx";
 
-function CoursesCarouselCourseDetails() {
+function CoursesCarouselCourseDetails({courseId}: {
+    courseId: number;
+}) {
     const {recommendedCourses, setRecommendedCourses} = useCourseStorage();
     const {accessToken} = useAuthContext();
@@ -36,34 +38,39 @@
     return (
         <section className="flex flex-col gap-12 text-left px-horizontal-lg py-vertical-md">
-            <h2 className="text-5xl">People also bought</h2>
+            <h2 className="text-5xl font-semibold">People also bought</h2>
 
             <div className="relative mx-0 my-auto w-full p-0">
-                {recommendedCourses && recommendedCourses.length > 0 ? (
-                    recommendedCourses.length <= 3 ? (
-                        <div className="flex gap-4 justify-center items-center">
-                            {recommendedCourses.map((course, index) => (
-                                <div key={index} className="max-w-1/3">
-                                    <CourseCard card={course} key={index}/>
-                                </div>
-                            ))}
-                        </div>
+                {
+                    recommendedCourses && recommendedCourses.filter(course => course.id !== courseId).length > 0 ? (
+                        recommendedCourses.filter(course => course.id !== courseId).length <= 3 ? (
+                            <div className="flex gap-4 justify-center items-center">
+                                {recommendedCourses
+                                    .filter(course => course.id !== courseId)
+                                    .map((course, index) => (
+                                    <div key={index} className="max-w-1/3">
+                                        <CourseCard card={course} key={index}/>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <Slider {...settings}>
+                                {recommendedCourses
+                                    .filter(course => course.id !== courseId)
+                                    .map((course, index) => (
+                                    <div key={index}>
+                                        <CourseCard card={course}/>
+                                    </div>
+                                ))}
+                            </Slider>
+                        )
                     ) : (
                         <Slider {...settings}>
-                            {recommendedCourses.map((course, index) => (
+                            {[...Array(4)].map((_, index) => (
                                 <div key={index}>
-                                    <CourseCard card={course}/>
+                                    <CourseCardSkeleton/>
                                 </div>
                             ))}
                         </Slider>
-                    )
-                ) : (
-                    <Slider {...settings}>
-                        {[...Array(4)].map((_, index) => (
-                            <div key={index}>
-                                <CourseCardSkeleton/>
-                            </div>
-                        ))}
-                    </Slider>
-                )}
+                    )}
             </div>
         </section>
Index: frontend/src/components/CoursesCarouselHome.tsx
===================================================================
--- frontend/src/components/CoursesCarouselHome.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/CoursesCarouselHome.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,33 +1,33 @@
 import Slider from 'react-slick';
+import CourseCard from "./CourseCard.tsx";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import 'slick-carousel/slick/slick.css';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import 'slick-carousel/slick/slick-theme.css';
-import CourseCard from "./CourseCard.tsx";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import "../slick-custom.css";
 
-import ShifterArrow from "../../public/Shifter-Arrow.png";
-import {useCourseStorage} from "../context/CourseStorage.ts";
+import { useCourseStorage } from "../context/CourseStorage.ts";
 import CourseCardSkeleton from "./skeletons/CourseCardSkeleton.tsx";
+import { useTranslation } from "react-i18next";
 
 function CoursesCarouselHome() {
-    const {recommendedCourses} = useCourseStorage();
+    const { recommendedCourses } = useCourseStorage();
+    const { t } = useTranslation("home");
 
     return (
         <section
-            className="relative flex flex-col gap-10 items-center bg-dark-blue/10 py-vertical-md px-horizontal-lg 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"/>
+            className="relative flex flex-col items-center gap-between-md py-vertical-lg px-horizontal-lg overflow-clip">
 
-            <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-2xl font-light text-black/80">
-                    Access expert-led courses designed to help you master business, strategy, and success - anytime,
-                    anywhere.
-                </p>
+            {/* TEXT */}
+            <div className="text-center flex flex-col gap-4 text-black-text">
+                <h2 className="text-5xl font-semibold whitespace-nowrap" dangerouslySetInnerHTML={{ __html: t("coursesCarousel.heading") }} />
+                <p className="text-xl font-light opacity-80">{t("coursesCarousel.description")}</p>
             </div>
 
+            {/* SLIDER / CARDS */}
             <div className="relative mx-0 my-auto w-full p-0">
                 {recommendedCourses && recommendedCourses.length > 0 ? (
@@ -36,5 +36,5 @@
                             {recommendedCourses.map((course, index) => (
                                 <div key={index} className="max-w-1/3">
-                                    <CourseCard card={course} key={index}/>
+                                    <CourseCard card={course} />
                                 </div>
                             ))}
@@ -44,5 +44,5 @@
                             {recommendedCourses.map((course, index) => (
                                 <div key={index}>
-                                    <CourseCard card={course}/>
+                                    <CourseCard card={course} />
                                 </div>
                             ))}
@@ -53,5 +53,5 @@
                         {[...Array(4)].map((_, index) => (
                             <div key={index}>
-                                <CourseCardSkeleton/>
+                                <CourseCardSkeleton />
                             </div>
                         ))}
@@ -94,4 +94,3 @@
 };
 
-
 export default CoursesCarouselHome;
Index: frontend/src/components/CoursesFilters.tsx
===================================================================
--- frontend/src/components/CoursesFilters.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/CoursesFilters.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -13,8 +13,8 @@
     const {user} = useAuthContext();
     const duration = [
-        "< 3 hours",
-        "3-6 hours",
-        "6-10 hours",
-        "10+ hours"
+        "< 3h",
+        "3h - 6h",
+        "6h - 10h",
+        "10h + "
     ]
     const difficulty = [
Index: frontend/src/components/HeroCourseDetails.tsx
===================================================================
--- frontend/src/components/HeroCourseDetails.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/HeroCourseDetails.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -33,9 +33,9 @@
         <div
             style={{"--card-color": course?.color} as React.CSSProperties}
-            className="bg-dark-blue py-4">
+            className={`py-4 bg-shifter`}>
             {/*HEADER AND DESCRIPTION*/}
             <section
-                className="flex flex-col items-center gap-8 bg-white mx-6 px-horizontal-lg pb-12 pt-40 rounded-xl shadow-lg shadow-black/20">
-                <h1 className="text-5xl">{course?.title}</h1>
+                className="flex flex-col items-center gap-8 bg-white mx-6 px-horizontal-lg pb-12 pt-40 rounded-xl shadow-lg shadow-black/20 text-black-text">
+                <h1 className="text-5xl font-semibold">{course?.title}</h1>
                 <p>{course?.description}</p>
                 {
@@ -51,5 +51,5 @@
                                         to={`/learn/${course?.id}/${toUrlFormat(course?.titleShort || "")}`}
                                         className={`
-                                            ${bgColor}
+                                            bg-shifter
                                             hover:shadow-lg hover:shadow-deep-green/50 transition-all duration-300 ease-in-out cursor-pointer
                                             shadow-md shadow-deep-green/30 text-white font-medium text-xl border-3 border-white/50 rounded-full px-14 py-2
@@ -70,5 +70,5 @@
                                 ) : (
                                     <button className={`
-                                                ${bgColor}
+                                                bg-shifter
                                                 hover:shadow-lg hover:shadow-deep-green/50 transition-all duration-300 ease-in-out cursor-pointer
                                                 shadow-md shadow-deep-green/30 text-white font-medium text-xl border-3 border-white/50 rounded-full px-14 py-2
Index: frontend/src/components/HeroHome.tsx
===================================================================
--- frontend/src/components/HeroHome.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/HeroHome.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -4,7 +4,9 @@
 import CountUp from "react-countup";
 import {useAuthContext} from "../context/AuthContext.tsx";
+import {useTranslation} from "react-i18next";
 
 function HeroHome() {
     const {user} = useAuthContext()
+    const { t } = useTranslation("home");
 
     return (
@@ -26,15 +28,11 @@
                         <div className="border-1 border-white/40
                         bg-black/10 rounded-full py-1 px-8 font-medium text-sm text-white shadow-sm">
-                            {/*Simply Shift*/}
-                            Shift 2 Win
+                            {t("hero.label")}
                         </div>
                         <h1 className="text-7xl font-semibold text-white max-w-3/4">
-                            {/*Get tailored strategies that actually work*/}
-                            Simplify your growth journey
+                            {t("hero.title")}
                         </h1>
                         <p className="text-xl font-light text-white max-w-3/4">
-                            {/*Practical tools and guidance to help your business grow with ease.*/}
-                            {/*Expert mentorship, practical courses, and group academies in one place.*/}
-                            Expert guidance, practical courses, and group academies designed to help family-owned businesses thrive.
+                            {t("hero.description")}
                         </p>
                     </div>
@@ -44,5 +42,8 @@
                         rounded-full text-black/90 px-12 py-3 bg-white font-bold border-2 border-black/20
                         w-fit shadow-md shadow-white/40">
-                        {user?.hasUsedFreeConsultation ? "Get In Touch" : "Book a Free Consultation"}
+                        {user?.hasUsedFreeConsultation ?
+                            t("hero.cta.contact") :
+                            t("hero.cta.freeConsultation")
+                        }
                     </Link>
                 </div>
@@ -52,20 +53,20 @@
                  flex justify-between bg-black/40 backdrop-blur-md w-9/10 py-6 px-24 rounded-lg">
                 <div className="text-white">
-                    <h3 className="text-4xl font-bold"><CountUp start={0} end={250} duration={4} separator={"."}  />+</h3>
-                    <p className="font-light whitespace-nowrap">Businesses Empowered</p>
+                    <h3 className="text-4xl font-bold"><CountUp start={0} end={Number(t("hero.stats.businessesEmpowered.value"))} duration={4} separator={"."}  />+</h3>
+                    <p className="font-light whitespace-nowrap">{t("hero.stats.businessesEmpowered.label")}</p>
                 </div>
                 <div className="text-white">
-                    <h3 className="text-4xl font-bold"><CountUp start={0} end={2000} duration={4} separator={"."}  />+</h3>
-                    <p className="font-light whitespace-nowrap">Mentoring Hours</p>
+                    <h3 className="text-4xl font-bold"><CountUp start={0} end={Number(t("hero.stats.mentoringHours.value"))} duration={4} separator={"."}  />+</h3>
+                    <p className="font-light whitespace-nowrap">{t("hero.stats.mentoringHours.label")}</p>
                 </div>
                 <div className="text-white">
-                    <h3 className="text-4xl font-bold"><CountUp start={0} end={4} duration={4} separator={"."}  />+</h3>
-                    <p className="font-light whitespace-nowrap">Years of Shifter</p>
+                    <h3 className="text-4xl font-bold"><CountUp start={0} end={Number(t("hero.stats.yearsOfShifter.value"))} duration={4} separator={"."}  />+</h3>
+                    <p className="font-light whitespace-nowrap">{t("hero.stats.yearsOfShifter.label")}</p>
                 </div>
-                <div className="text-white">
-                    <h3 className="text-4xl font-bold"><CountUp start={0} end={10} duration={4} separator={"."}  />+</h3>
-                    {/*<p className="font-light whitespace-nowrap">Courses & Academies Available</p>*/}
-                    <p className="font-light whitespace-nowrap">Growth Programs Delivered</p>
-                </div>
+                {/*<div className="text-white">*/}
+                {/*    <h3 className="text-4xl font-bold"><CountUp start={0} end={10} duration={4} separator={"."}  />+</h3>*/}
+                {/*    /!*<p className="font-light whitespace-nowrap">Courses & Academies Available</p>*!/*/}
+                {/*    <p className="font-light whitespace-nowrap">Growth Programs Delivered</p>*/}
+                {/*</div>*/}
             </div>
         </section>
Index: frontend/src/components/NavbarLink.tsx
===================================================================
--- frontend/src/components/NavbarLink.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/NavbarLink.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,10 +1,10 @@
 import {Link} from "react-router-dom";
 
-const NavbarLink = ({to, label, className}: { to: string; label: string, className?: string; }) => (
+const NavbarLink = ({to, label, className, classNameLine}: { to: string; label: string, className?: string; classNameLine?: string; }) => (
     <div className={`flex flex-col gap-0 overflow-clip group w-fit ${className}`}>
         <Link to={to} className="transition-all duration-300 ease-in-out z-10">
             {label}
         </Link>
-        <hr className="relative -translate-x-60 group-hover:-translate-x-1/4 border-t-2 rounded-full transition-all duration-300 ease-in-out"/>
+        <hr className={`relative -translate-x-60 group-hover:-translate-x-1/4 border-t-2 rounded-full transition-all duration-300 ease-in-out ${classNameLine}`}/>
     </div>
 );
Index: frontend/src/components/OurServices.tsx
===================================================================
--- frontend/src/components/OurServices.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/OurServices.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,66 +1,67 @@
-import {ArrowBigUpDash, BookOpen, GraduationCap, Handshake} from "lucide-react";
-import {Link} from "react-router-dom";
+import { ArrowBigUpDash, BookOpen, GraduationCap, Handshake } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 function OurServices() {
+    const { t } = useTranslation("home"); // assuming this JSON is in home.json
+
     const cardContent = [
         {
-            title: "Mentoring",
-            description: "Personalized mentorship to help you overcome challenges and achieve your goals.",
             icon: Handshake,
-            link: "/mentoring"
+            path: "ourServices.cards.0"
         },
         {
-            title: "Courses",
-            description: "On-demand courses to guide your journey at every stage.",
             icon: BookOpen,
-            link: "/courses"
+            path: "ourServices.cards.1"
         },
         {
-            title: "Consulting",
-            description: "Targeted consulting to solve specific challenges and deliver immediate results.",
-            icon: ArrowBigUpDash ,
-            link: "/consulting"
+            icon: ArrowBigUpDash,
+            path: "ourServices.cards.2"
         },
         {
-            title: "Academies",
-            description: "Structured group learning designed to help you grow and succeed together.",
             icon: GraduationCap,
-            link: "/academies"
+            path: "ourServices.cards.3"
         }
-    ]
+    ];
 
     return (
-        <section className="grid grid-cols-3 gap-20 justify-between py-vertical-lg pt-top-nav-lg px-horizontal-md">
+        <section className="grid grid-cols-3 gap-20 justify-between py-vertical-sm pt-top-nav-lg px-horizontal-md">
 
-            {/*TEXT*/}
-            <div className="col-span-1 col-start-1 flex flex-col gap-2 text-black-text text-left w-full">
-                <h2 className="text-5xl font-bold">Solutions That Deliver Real Results</h2>
-                <p className="text-xl font-light">
-                    Shifter focuses on clear, practical steps that drive measurable growth.
-                </p>
+            {/* TEXT */}
+            <div className="col-span-1 col-start-1 flex flex-col gap-6 text-black-text text-left w-full">
+                <h2 className="text-5xl font-bold">{t("ourServices.heading")}</h2>
+                <p className="text-xl font-light opacity-80">{t("ourServices.description")}</p>
             </div>
 
-            {/*CARDS*/}
+            {/* CARDS */}
             <div className="col-span-2 col-start-2 grid grid-cols-2 grid-rows-2 gap-8">
-                {
-                    cardContent.map((card, index) => (
-                        <div key={index}
-                             className={`shadow-md shadow-black/20
-                             ${index === 0 ? "bg-shifter/100 -rotate-3" : "bg-black/20"}
-                             ${index === 0 ? "text-white" : "text-black-text"}
-                            flex flex-col gap-8 items-start text-left border-2 border-white/40 rounded-2xl p-8 `}>
-                            <card.icon size={40} strokeWidth={1.5}
-                                       color={index === 0 ? "var(--color-white)" : "var(--color-black-text)"} className=""/>
+                {cardContent.map((card, index) => {
+                    const CardIcon = card.icon;
+                    return (
+                        <div
+                            key={index}
+                            className={`shadow-md shadow-black/20
+                            ${index === 0 ? "bg-shifter/100 -rotate-3" : "bg-black/10"}
+                            ${index === 0 ? "text-white" : "text-black-text"}
+                            flex flex-col gap-8 items-start text-left border-2 border-white/40 rounded-2xl p-8`}
+                        >
+                            <CardIcon
+                                size={40}
+                                strokeWidth={1.5}
+                                color={index === 0 ? "var(--color-white)" : "var(--color-black-text)"}
+                            />
                             <div className="flex flex-col gap-2 justify-between">
-                                <h2 className="text-2xl font-bold">{card.title}</h2>
-                                <p className="text-lg font-light">{card.description}</p>
-                                <Link to={card.link} className="underline mt-4" >Show Service</Link>
+                                <h2 className="text-2xl font-bold">{t(`${card.path}.title`)}</h2>
+                                <p className="text-lg font-light">{t(`${card.path}.description`)}</p>
+                                <Link to={t(`${card.path}.link`)} className="underline mt-4">
+                                    {t("ourServices.discoverMore")}
+                                </Link>
                             </div>
                         </div>
-                    ))
-                }
+                    );
+                })}
             </div>
         </section>
-    )
+    );
 }
 
Index: frontend/src/components/ProfileInfo.tsx
===================================================================
--- frontend/src/components/ProfileInfo.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/ProfileInfo.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -5,5 +5,5 @@
 
     return (
-        <section className="border-1 border-dark-blue/10 flex flex-col gap-6 items-center justify-center bg-white w-full rounded-xl p-8 ">
+        <section className="shadow-md border-1 border-dark-blue/10 flex flex-col gap-6 items-center justify-center bg-white w-full rounded-xl p-8 ">
 
             <div
Index: frontend/src/components/ProfileMyProfile.tsx
===================================================================
--- frontend/src/components/ProfileMyProfile.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/ProfileMyProfile.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -44,5 +44,5 @@
             <form
                 onSubmit={handleSubmit}
-                className="flex flex-col gap-6 px-24 py-6 border-1 border-dark-blue/10 bg-white rounded-lg w-full ">
+                className="shadow-md flex flex-col gap-6 px-24 py-6 border-1 border-dark-blue/10 bg-white rounded-lg w-full ">
                 <Input name={"name"} value={formData.name} func={setFormData} />
                 <Input name={"workPosition"} value={formData.workPosition} func={setFormData} />
Index: frontend/src/components/ProfileSkills&Interests.tsx
===================================================================
--- frontend/src/components/ProfileSkills&Interests.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/ProfileSkills&Interests.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -27,5 +27,5 @@
                 }
             </div>
-            <div className="flex gap-2 w-full flex-wrap border-1 border-dark-blue/10 bg-white rounded-lg p-4">
+            <div className="shadow-md flex gap-2 w-full flex-wrap border-1 border-dark-blue/10 bg-white rounded-lg p-4">
                 {
                     visiblePills.map((pill, index) => (
Index: frontend/src/components/ShifterValues.tsx
===================================================================
--- frontend/src/components/ShifterValues.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/ShifterValues.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,34 +1,36 @@
+import { useTranslation } from "react-i18next";
+
 function ShifterValues() {
+    const { t } = useTranslation("home");
+
+    const values = t("shifterValues.valuesList", { returnObjects: true }) as string[];
+
     return (
-        <section className="flex px-horizontal-md py-vertical-md gap-20">
+        <section className="flex px-horizontal-md py-vertical-lg gap-20">
             <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
-                        impactful and lasting success.
-                    </p>
+                    <h2 className="text-5xl" dangerouslySetInnerHTML={{ __html: t("shifterValues.heading") }} />
+                    <p className="text-xl">{t("shifterValues.description")}</p>
                 </div>
+
                 <div className="flex gap-2">
                     <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>
+                        {values.map((v, i) => (
+                            <strong key={i}>{v[0]}</strong>
+                        ))}
                     </div>
                     <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>
-                        <span className="h-1/5 flex items-end pb-1">n-depth Analysis</span>
-                        <span className="h-1/5 flex items-end pb-1">act Based Solutions</span>
-                        <span className="h-1/5 flex items-end pb-1">ailor Made Services</span>
+                        {values.map((v, i) => (
+                            <span key={i} className="h-1/5 flex items-end pb-1">{v.slice(1)}</span>
+                        ))}
                     </div>
                 </div>
+
                 <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>
+                >
+                    {t("shifterValues.button")}
+                </button>
             </div>
 
@@ -37,12 +39,12 @@
                 <div className="absolute left-70 top-1/5 rounded-full bg-dark-gray/30 w-35 h-35"></div>
                 <div className="absolute left-70 bottom-1/5 rounded-full bg-dark-gray/30 w-35 h-35"></div>
-                <div className="absolute right-20 top-1/2 transform -translate-x-1/2 -translate-y-1/2  rounded-full bg-dark-gray/30 w-20 h-20"></div>
-                <div className="absolute left-1/2 top-1/10 transform -translate-x-1/2 -translate-y-1/2  rounded-full bg-dark-gray/30 w-20 h-20"></div>
-                <div className="absolute left-2/5 -bottom-1/10 transform -translate-x-1/2 -translate-y-1/2  rounded-full bg-dark-gray/30 w-30 h-30"></div>
-                <div className="absolute left-1/5 bottom-4 transform -translate-x-1/2  rounded-full bg-dark-gray/30 w-20 h-20"></div>
+                <div className="absolute right-20 top-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-dark-gray/30 w-20 h-20"></div>
+                <div className="absolute left-1/2 top-1/10 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-dark-gray/30 w-20 h-20"></div>
+                <div className="absolute left-2/5 -bottom-1/10 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-dark-gray/30 w-30 h-30"></div>
+                <div className="absolute left-1/5 bottom-4 transform -translate-x-1/2 rounded-full bg-dark-gray/30 w-20 h-20"></div>
                 <div className="absolute left-2/7 -top-2 transform -translate-x-1/2 rounded-full bg-dark-gray/30 w-30 h-30"></div>
             </div>
         </section>
-    )
+    );
 }
 
Index: frontend/src/components/registerSteps/PersonalizationStepThree.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizationStepThree.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/registerSteps/PersonalizationStepThree.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -3,4 +3,5 @@
 import PersonalizationSlider from "../inputs/PersonalizationSlider.tsx";
 import {fetchCoursesSkillsApi} from "../../api/courseApi.ts";
+import {useTranslation} from "react-i18next";
 
 function PersonalizationStepThree({setUser, user, setError}: {
@@ -10,4 +11,5 @@
 }){
     const [skills, setSkills] = React.useState<string[]>([]);
+    const { t } = useTranslation("personalize");
 
     useEffect(() => {
@@ -26,5 +28,5 @@
     useEffect(() => {
         if (user.desiredSkills.length === 0) {
-            setError("We’d love to support your growth — select at least one skill you'd like to improve");
+            setError(t("stepThree.errorNoSkill"));
         } else {
             setError("");
@@ -38,5 +40,5 @@
                 skills.length > 0 &&
                 <PersonalizationSlider
-                    label={"Outline Your Learning Goals"}
+                    label={t("stepThree.desiredSkills")}
                     name={"desiredSkills"}
                     id={"desired-skills"}
Index: frontend/src/components/registerSteps/PersonalizationStepTwo.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizationStepTwo.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/registerSteps/PersonalizationStepTwo.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -3,4 +3,5 @@
 import PersonalizationSlider from "../inputs/PersonalizationSlider.tsx";
 import {fetchCoursesTopicsApi} from "../../api/courseApi.ts";
+import {useTranslation} from "react-i18next";
 
 function PersonalizationStepTwo({setUser, user, setError}: {
@@ -10,4 +11,5 @@
 }) {
     const [interests, setInterests] = React.useState<string[]>([]);
+    const { t } = useTranslation("personalize");
 
     useEffect(() => {
@@ -26,5 +28,5 @@
     useEffect(() => {
         if (user.interests.length === 0) {
-            setError("Help us understand you better — select at least one topic you like");
+            setError(t("stepTwo.errorNoInterest"));
         } else {
             setError("");
@@ -39,5 +41,5 @@
                 interests.length > 0 &&
                 <PersonalizationSlider
-                    label={"Select Topics You Like"}
+                    label={t("stepTwo.interests")}
                     name={"interests"}
                     id={"interests"}
Index: frontend/src/components/registerSteps/PersonalizeStepOne.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizeStepOne.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/registerSteps/PersonalizeStepOne.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -3,4 +3,5 @@
 import PersonalizationInput from "../inputs/PersonalizationInput.tsx";
 import PersonalizationSelect from "../inputs/PersonalizationSelect.tsx";
+import {useTranslation} from "react-i18next";
 
 function PersonalizeStepOne({setUser, user, setError}: {
@@ -9,4 +10,5 @@
     setError: React.Dispatch<React.SetStateAction<string>>,
 }) {
+    const { t } = useTranslation("personalize");
 
     useEffect(() => {
@@ -22,6 +24,6 @@
             className="flex flex-col gap-4 w-full items-center">
             <PersonalizationInput
-                placeholder={"John Doe"}
-                label={"Full Name"}
+                placeholder={t("stepOne.fullNamePlaceholder")}
+                label={t("stepOne.fullName")}
                 name={"name"}
                 type={"text"}
@@ -31,6 +33,6 @@
             />
             <PersonalizationInput
-                placeholder={"Your Position"}
-                label={"Work Position"}
+                placeholder={t("stepOne.workPositionPlaceholder")}
+                label={t("stepOne.workPosition")}
                 name={"workPosition"}
                 type={"text"}
@@ -40,8 +42,8 @@
             />
             <PersonalizationSelect
-                label={"Company Size"}
+                label={t("stepOne.companySize")}
                 name={"companySize"}
                 id={"company-size"}
-                options={["Freelance", "Micro", "Small", "Medium", "Mid Market", "Enterprise", "Other"]}
+                options={t("stepOne.companySizeOptions") as unknown as string[]}
                 setUser={setUser}
                 user={user}
Index: frontend/src/components/skeletons/HeroCourseDetailsSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/HeroCourseDetailsSkeleton.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/components/skeletons/HeroCourseDetailsSkeleton.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -2,5 +2,5 @@
 function HeroCourseDetailsSkeleton() {
     return (
-        <div className="bg-dark-blue py-4">
+        <div className="bg-shifter py-4">
             {/*HEADER AND DESCRIPTION*/}
             <section className="flex flex-col items-center gap-8 bg-white mx-6 px-horizontal-lg pb-12 pt-40 rounded-xl shadow-lg shadow-black/20">
Index: frontend/src/global.css
===================================================================
--- frontend/src/global.css	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/global.css	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -2,9 +2,10 @@
 
 @theme {
+    --spacing-horizontal-xl: 12rem;
     --spacing-horizontal-lg: 10rem;
     --spacing-horizontal-md: 7rem;
     --spacing-horizontal-sm: 4rem;
-    /*--spacing-horizontal: 7rem;*/
-
+
+    --spacing-vertical-xl: 5rem;
     --spacing-vertical-lg: 3rem;
     --spacing-vertical-md: 2rem;
@@ -15,4 +16,8 @@
     --spacing-top-nav-md: 7rem;
     --spacing-top-nav-sm: 6rem;
+
+    --spacing-between-lg: 6rem;
+    --spacing-between-md: 4rem;
+    --spacing-between-sm: 2rem;
 
 
@@ -95,4 +100,7 @@
 
 #root {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
     background: var(--color-white);
     width: 100%;
Index: frontend/src/hooks/useEnrolledCourses.tsx
===================================================================
--- frontend/src/hooks/useEnrolledCourses.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/hooks/useEnrolledCourses.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -30,9 +30,11 @@
         }
         const storedCourses = sessionStorage.getItem("allCourses");
-        if (storedCourses) {
-            setAllCoursesStorage(JSON.parse(storedCourses));
-            setAllCourses(JSON.parse(storedCourses));
+        const parsedCourses = storedCourses ? JSON.parse(storedCourses) : null;
+        if (parsedCourses) {
+            setAllCoursesStorage(parsedCourses);
+            setAllCourses(parsedCourses);
             return;
         }
+
         fetchCoursesApi(accessToken || "")
             .then(courses => {
Index: frontend/src/hooks/usePersonalizeHook.tsx
===================================================================
--- frontend/src/hooks/usePersonalizeHook.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/hooks/usePersonalizeHook.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -79,5 +79,7 @@
             .catch(err => {
                 setIsVerified(false);
-                console.error("Error verifying user" + err);
+                setError("Verification failed. Please try again.");
+                setShowError(true);
+                console.error("Error verifying user " + err);
             })
             .finally(() => setVerificationChecked(true))
@@ -85,4 +87,9 @@
 
     const handlePersonalize = async () => {
+        if (!isVerified) {
+            setError("Verification failed. Please try again.");
+            setShowError(true);
+            return;
+        }
         setIsLoading(true);
         personalize(user)
Index: frontend/src/i18n.ts
===================================================================
--- frontend/src/i18n.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/i18n.ts	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,77 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// Import all namespaces
+import homeEN from "./locales/en/home.json";
+import navbarEN from "./locales/en/navbar.json";
+import footerEN from "./locales/en/footer.json";
+import contactEN from "./locales/en/contact.json";
+import freeConsultationEN from "./locales/en/freeConsultation.json";
+import mentoringEN from "./locales/en/mentoring.json";
+import consultingEN from "./locales/en/consulting.json";
+import academiesEN from "./locales/en/academies.json";
+import aboutEN from "./locales/en/about.json";
+import loginEN from "./locales/en/login.json";
+import registerEN from "./locales/en/register.json";
+import personalizeEN from "./locales/en/personalize.json";
+import coursesEN from "./locales/en/courses.json";
+
+import homeMK from "./locales/mk/home.json";
+import navbarMK from "./locales/mk/navbar.json";
+import footerMK from "./locales/mk/footer.json";
+import contactMK from "./locales/mk/contact.json";
+import freeConsultationMK from "./locales/mk/freeConsultation.json";
+import mentoringMK from "./locales/mk/mentoring.json";
+import consultingMK from "./locales/mk/consulting.json";
+import academiesMK from "./locales/mk/academies.json";
+import aboutMK from "./locales/mk/about.json";
+import loginMK from "./locales/mk/login.json";
+import registerMK from "./locales/mk/register.json";
+import personalizeMK from './locales/mk/personalize.json';
+import coursesMK from "./locales/mk/courses.json";
+
+
+i18n
+    .use(initReactI18next)
+    .init({
+        lng: "en",
+        fallbackLng: "en",
+        ns: ["home", "navbar", "footer", "contact", "freeConsultation", "mentoring", "consulting", "academies", "about",
+        "login", "register", "personalize", "courses"],
+        defaultNS: "home",
+        resources: {
+            en: {
+                home: homeEN,
+                navbar: navbarEN,
+                footer: footerEN,
+                contact: contactEN,
+                freeConsultation: freeConsultationEN,
+                mentoring: mentoringEN,
+                consulting: consultingEN,
+                academies: academiesEN,
+                about: aboutEN,
+                login: loginEN,
+                register: registerEN,
+                personalize: personalizeEN,
+                courses: coursesEN,
+            },
+            mk: {
+                home: homeMK,
+                navbar: navbarMK,
+                footer: footerMK,
+                contact: contactMK,
+                freeConsultation: freeConsultationMK,
+                mentoring: mentoringMK,
+                consulting: consultingMK,
+                academies: academiesMK,
+                about: aboutMK,
+                login: loginMK,
+                register: registerMK,
+                personalize: personalizeMK,
+                courses: coursesMK,
+            }
+        },
+        interpolation: { escapeValue: false },
+    });
+
+export default i18n;
Index: frontend/src/layout/FooterNew.tsx
===================================================================
--- frontend/src/layout/FooterNew.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/layout/FooterNew.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,149 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
+import { useAuthContext } from "../context/AuthContext.tsx";
+import LinkedIn from "../assets/icons/LinkedIn.tsx";
+import Instagram from "../assets/icons/Instagram.tsx";
+import NavbarLink from "../components/NavbarLink.tsx";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+function FooterNew() {
+    const { user, logout } = useAuthContext();
+    const { t } = useTranslation("footer");
+
+    return (
+        <section className="relative flex flex-col gap-24 pt-top-nav-md overflow-clip bg-beige">
+
+            {/* background circles */}
+            <div className="absolute -bottom-150 -left-80 w-320 aspect-square bg-[radial-gradient(circle_at_center,rgba(0,140,194,0.4),transparent_70%)]"></div>
+            <div className="absolute -bottom-150 -right-80 w-320 aspect-square bg-[radial-gradient(circle_at_center,rgba(0,140,194,0.4),transparent_70%)]"></div>
+
+            {/* CTA */}
+            <section className="flex flex-col gap-4 z-1 text-black-text">
+                <h2 className="text-6xl font-semibold">
+                    {t("cta.title.part1")} <br /> {t("cta.title.part2")}
+                </h2>
+                <p className="font-light">
+                    {t("cta.subtitle.line1")} <br />
+                    {t("cta.subtitle.line2")}
+                </p>
+                <div className="mt-12">
+                    <Link
+                        to={user?.hasUsedFreeConsultation ? "/contact" : "/free-consultation"}
+                        className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer
+                        shadow-md shadow-shifter/40 font-bold border-2 border-white/20
+                        bg-shifter py-3 px-12 rounded-full text-white "
+                    >
+                        {user?.hasUsedFreeConsultation
+                            ? t("cta.button.contact")
+                            : t("cta.button.consultation")}
+                    </Link>
+                </div>
+            </section>
+
+            {/* FOOTER */}
+            <div className="p-4">
+                <footer className="flex flex-col gap-4 rounded-xl shadow-md
+                bg-beige/80 backdrop-blur-md text-black-text pt-12 pb-4 px-horizontal-sm">
+
+                    <div className="flex justify-between">
+                        <section className="flex flex-col justify-center gap-12 max-w-1/4">
+                            <img
+                                src={ShifterLogo}
+                                alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
+                                className="w-40"
+                            />
+
+                            <div className="flex flex-col items-start text-xs">
+                                <p>contact@shift-er.com</p>
+                                <div className="flex gap-2 items-center">
+                                    {t("social.visit")}:
+                                    <a
+                                        href="http://www.google.com"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="w-6 h-6 flex items-center justify-center"
+                                    >
+                                        <LinkedIn className="w-full h-full" />
+                                    </a>
+                                    <a
+                                        href="http://www.google.com"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="w-6 h-6 flex items-center justify-center"
+                                    >
+                                        <Instagram className="w-full h-full" />
+                                    </a>
+                                </div>
+                            </div>
+                        </section>
+
+                        <div>
+                            <div className="flex gap-20 text-sm">
+                                {/* SERVICES */}
+                                <section className="flex flex-col gap-1 text-left font-light">
+                                    <h3 className="font-bold text-lg mb-4">{t("sections.services.title")}</h3>
+                                    <NavbarLink to="/mentoring" label={t("sections.services.items.mentoring")} classNameLine="border-black-text" />
+                                    <NavbarLink to="/consulting" label={t("sections.services.items.consulting")} classNameLine="border-black-text" />
+                                    <NavbarLink to="/courses" label={t("sections.services.items.courses")} classNameLine="border-black-text" />
+                                    <NavbarLink to="/academies" label={t("sections.services.items.academies")} classNameLine="border-black-text" />
+                                </section>
+
+                                {/* ABOUT */}
+                                <section className="flex flex-col gap-1 text-left font-light">
+                                    <h3 className="font-bold text-lg mb-4">{t("sections.about.title")}</h3>
+                                    <NavbarLink to="/about" label={t("sections.about.items.about")} classNameLine="border-black-text" />
+                                </section>
+
+                                {/* PROFILE */}
+                                <section className="flex flex-col gap-1 text-left font-light">
+                                    <h3 className="font-bold text-lg mb-4">{t("sections.profile.title")}</h3>
+                                    {user ? (
+                                        <>
+                                            <NavbarLink to="/profile" label={t("sections.profile.items.profile")} classNameLine="border-black-text" />
+                                            <div className="flex flex-col gap-0 overflow-clip group w-fit">
+                                                <button
+                                                    onClick={logout}
+                                                    className="transition-all duration-300 ease-in-out z-10 cursor-pointer"
+                                                >
+                                                    {t("sections.profile.items.logout")}
+                                                </button>
+                                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                                                rounded-full transition-all duration-300 ease-in-out"/>
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <NavbarLink to="/login" label={t("sections.profile.items.login")} classNameLine="border-black-text" />
+                                    )}
+                                </section>
+
+                                {/* DASHBOARD */}
+                                {user && (
+                                    <section className="flex flex-col gap-1 text-left font-light">
+                                        <h3 className="font-bold text-lg mb-4">{t("sections.dashboard.title")}</h3>
+                                        <NavbarLink to="/profile" label={t("sections.dashboard.items.profile")} classNameLine="border-black-text" />
+                                        <NavbarLink to="/learn" label={t("sections.dashboard.items.learning")} classNameLine="border-black-text" />
+                                    </section>
+                                )}
+
+                                {/* CONTACT */}
+                                <section className="flex flex-col gap-2 text-left font-light">
+                                    <h3 className="font-bold text-lg mb-4">{t("sections.contact.title")}</h3>
+                                    <NavbarLink to="/contact" label={t("sections.contact.items.contact")} classNameLine="border-black-text" />
+                                </section>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr className="mt-12 border-t-1 border-black/10 w-full" />
+                    <div className="text-xs font-light text-black/60">
+                        &copy; {new Date().getFullYear()} Shifter. {t("rights")}
+                    </div>
+                </footer>
+            </div>
+        </section>
+    );
+}
+
+export default FooterNew;
Index: frontend/src/layout/FooterSmall.tsx
===================================================================
--- frontend/src/layout/FooterSmall.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/layout/FooterSmall.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,45 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
+import NavbarLink from "../components/NavbarLink.tsx";
+import {Instagram, Linkedin} from "lucide-react";
+import {useTranslation} from "react-i18next";
+
+export default function FooterSmall () {
+    const { t } = useTranslation("footer");
+    
+    return (
+        <footer className="flex justify-between px-horizontal-lg py-vertical-sm bg-beige">
+            <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
+                 className="h-12"
+            />
+
+            <div className="flex gap-4 items-center">
+                <NavbarLink to={"/mentoring"} label={t("sections.services.items.mentoring")} className="text-sm"/>
+                <NavbarLink to={"/consulting"} label={t("sections.services.items.consulting")} className="text-sm"/>
+                <NavbarLink to={"/courses"} label={t("sections.services.items.courses")} className="text-sm"/>
+                <NavbarLink to={"/academies"} label={t("sections.services.items.academies")} className="text-sm"/>
+            </div>
+
+            <div className="flex gap-4 ">
+                <a
+                    href="http://www.google.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
+                >
+                    <Linkedin size={20} color="var(--color-shifter)"/>
+                </a>
+
+                <a
+                    href="http://www.google.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
+                >
+                    <Instagram size={20} color="var(--color-shifter)"/>
+                </a>
+            </div>
+        </footer>
+    )
+}
Index: frontend/src/layout/LanguageToggle.tsx
===================================================================
--- frontend/src/layout/LanguageToggle.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/layout/LanguageToggle.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,55 @@
+import ReactCountryFlag from "react-country-flag";
+import { useState } from "react";
+import i18n from "../i18n.ts";
+
+export default function LanguageToggle() {
+    const [open, setOpen] = useState(false);
+    const [lang, setLang] = useState("en");
+
+    const handleLangChange = (lang: string) => {
+        setLang(lang);
+        i18n.changeLanguage(lang);
+        setOpen(false);
+    }
+
+    return (
+        <div className="fixed bottom-4 left-4 z-50">
+            {/* Toggle Button */}
+            <button
+                onClick={() => setOpen(!open)}
+                className="flex items-center justify-center gap-2 p-3 py-2 rounded-md
+                   bg-black/40 backdrop-blur-md border border-white/20 text-white
+                   hover:bg-black/60 transition-all duration-200 ease-in-out cursor-pointer"
+            >
+                {lang === "en" ? "EN" : "MK"}
+            </button>
+
+            {/* Language List (UPWARD) */}
+            {open && (
+                <div
+                    className="
+                        absolute bottom-full mb-1 left-0
+                        flex flex-col  w-40
+                        bg-black/80 text-white-text
+                        shadow-lg rounded-md
+                    "
+                >
+                    <div
+                        onClick={() => { handleLangChange("mk") }}
+                        className="flex items-center gap-3 px-4 py-2 hover:bg-white/10 cursor-pointer"
+                    >
+                        <ReactCountryFlag countryCode="MK" svg style={{ width: "20px", height: "20px" }} />
+                        <span>Македонски</span>
+                    </div>
+                    <div
+                        onClick={() => { handleLangChange("en") }}
+                        className="flex items-center gap-3 px-4 py-2 hover:bg-white/10 cursor-pointer"
+                    >
+                        <ReactCountryFlag countryCode="GB" svg style={{ width: "20px", height: "20px" }} />
+                        <span>English</span>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
Index: frontend/src/layout/Navbar.tsx
===================================================================
--- frontend/src/layout/Navbar.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/layout/Navbar.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -5,7 +5,9 @@
 import {useAuthContext} from "../context/AuthContext.tsx";
 import NavbarLink from "../components/NavbarLink.tsx";
+import {useTranslation} from "react-i18next";
 
 function Navbar() {
     const {user} = useAuthContext();
+    const { t } = useTranslation("navbar");
 
     return (
@@ -18,8 +20,8 @@
                                 pl-10 ${user?.hasUsedFreeConsultation && "pl-12"}`}>
                 {/* Link group */}
-                <NavbarLink to="/courses" label="Courses"/>
-                <NavbarLink to="/mentoring" label="Mentoring"/>
-                <NavbarLink to="/consulting" label="Consulting"/>
-                <NavbarLink to="/academies" label="Academies"/>
+                <NavbarLink to="/courses" label={t("courses")}/>
+                <NavbarLink to="/mentoring" label={t("mentoring")}/>
+                <NavbarLink to="/consulting" label={t("consulting")}/>
+                <NavbarLink to="/academies" label={t("academies")}/>
             </div>
 
@@ -33,9 +35,9 @@
             {/* Right nav links + profile */}
             <div className="flex w-40/100 justify-between text-md items-center gap-6">
-                <NavbarLink to="/about" label="About"/>
+                <NavbarLink to="/about" label={t("about")}/>
                 {
                     user ?
-                        <NavbarLink to="/learn" label="My Learning"/> :
-                        <NavbarLink to="/login" label="Login / Register"/>
+                        <NavbarLink to="/learn" label={t("learn")}/> :
+                        <NavbarLink to="/login" label={t("login")}/>
                 }
                 <div className="flex gap-4 items-center">
@@ -56,5 +58,5 @@
                                 shadow-md shadow-shifter/30 px-8 pr-10 ${user?.hasUsedFreeConsultation && "px-10 pr-12"}`}
                     >
-                        {user?.hasUsedFreeConsultation ? "Contact Us" : "Free Consultation"}
+                        {user?.hasUsedFreeConsultation ? t("contact") : t("freeConsultation")}
                     </Link>
                 </div>
Index: frontend/src/locales/en/about.json
===================================================================
--- frontend/src/locales/en/about.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/about.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,44 @@
+{
+  "hero": {
+    "title": "Business Development & Transformation Center",
+    "description": "<span class='font-semibold'>Shifter</span> is a center for business development and transformation, offering mentorship, consulting, academies, and e-learning for family businesses."
+  },
+  "stats": {
+    "clients": "Clients Empowered",
+    "hours": "Mentoring Hours",
+    "years": "Years of Shifter"
+  },
+  "whyChoose": {
+    "title": "Why choose <span class='font-bold text-shifter'>Shifter?</span>"
+  },
+  "reasons": [
+    {
+      "title": "Tailored Strategies",
+      "description": "Strategies and programs designed specifically for your business goals and challenges."
+    },
+    {
+      "title": "Empowering Clients",
+      "description": "Teaching clients how to solve challenges independently, not just provide ready-made solutions."
+    },
+    {
+      "title": "Holistic Approach",
+      "description": "A comprehensive method that addresses root causes across your business, not just the symptoms."
+    },
+    {
+      "title": "Sustainable Growth",
+      "description": "Strategic solutions that strengthen processes, teams, and systems for long-term success."
+    },
+    {
+      "title": "Expert Guidance",
+      "description": "Solutions from professionals who make business challenges manageable."
+    }
+  ],
+  "about": {
+    "title": "About <span class='text-shifter font-black'>Shifter</span>",
+    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    "cta": "Book a Free Consultation"
+  },
+  "foundations": {
+    "title": "Our Foundations"
+  }
+}
Index: frontend/src/locales/en/academies.json
===================================================================
--- frontend/src/locales/en/academies.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/academies.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,20 @@
+{
+  "heroTitle": "Transform Your Team's Expertise with Corporate Group Academies & Training",
+  "heroDescription": "Transform your team into a synchronized unit of high-performers. Our Group Academies deliver <strong class='font-bold'>standardized, expert-led training</strong> to rapidly upskill entire departments, close knowledge gaps, and drive consistent execution across your organization. Inquire now to secure a personalized curriculum review for your business.",
+  "contactInfoTitle": "Contact Information",
+  "contactInfoDescription": "Complete the form and our team will respond shortly to help you take the next step.",
+  "contactEmail": "contact@shift-er.com",
+  "contactLocation": "Skopje, N. Macedonia",
+  "autoFilledNote": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page.",
+  "name": "Name",
+  "email": "Email",
+  "subjectLabel": "Your Subject",
+  "subjectPlaceholder": "Enter the subject of your message",
+  "messageLabel": "Message",
+  "messagePlaceholder": "Write your message here...",
+  "emailError": "We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com",
+  "messageSentTitle": "Your message has been sent successfully!",
+  "messageSentDescription": "Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible. Keep an eye on your <span class='font-semibold text-shifter'>inbox for our reply</span>.",
+  "sending": "Sending...",
+  "sendMessage": "Send Message"
+}
Index: frontend/src/locales/en/consulting.json
===================================================================
--- frontend/src/locales/en/consulting.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/consulting.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,20 @@
+{
+  "heroTitle": "Personalized Strategic Consulting",
+  "heroDescription": "Our consulting engagement ensures maximum client results by operating with <strong class='font-bold'>limited openings</strong>. This guarantees that every client receives the <strong class='font-bold'>undivided attention</strong> and continuous strategic execution necessary to deliver <strong class='font-bold'>measurable outcomes</strong>. Submit your inquiry to begin the qualification process for exclusive strategic support.",
+  "contactInfoTitle": "Contact Information",
+  "contactInfoDescription": "Complete the form and our team will respond shortly to help you take the next step.",
+  "contactEmail": "contact@shift-er.com",
+  "contactLocation": "Skopje, N. Macedonia",
+  "autoFilledNote": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page.",
+  "name": "Name",
+  "email": "Email",
+  "subjectLabel": "Your Subject",
+  "subjectPlaceholder": "Enter the subject of your message",
+  "messageLabel": "Message",
+  "messagePlaceholder": "Write your message here...",
+  "emailError": "We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com",
+  "messageSentTitle": "Your message has been sent successfully!",
+  "messageSentDescription": "Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible. Keep an eye on your <span class='font-semibold text-shifter'>inbox for our reply</span>.",
+  "sending": "Sending...",
+  "sendMessage": "Send Message"
+}
Index: frontend/src/locales/en/contact.json
===================================================================
--- frontend/src/locales/en/contact.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/contact.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,24 @@
+{
+  "hero": {
+    "title": "Transform Your Vision into Results",
+    "description": "Complete the form and our team will respond shortly to help you take the next step."
+  },
+  "info": {
+    "title": "Contact Information",
+    "description": "Complete the form and our team will respond shortly to help you take the next step.",
+    "email": "contact@shift-er.com",
+    "location": "Skopje, N. Macedonia"
+  },
+  "form": {
+    "subject": "Your Subject",
+    "subjectPlaceholder": "Enter the subject of your message",
+    "message": "Message",
+    "messagePlaceholder": "Write your message here...",
+    "sendingError": "We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com",
+    "successTitle": "Your message has been sent successfully!",
+    "successDescription": "Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible. Keep an eye on your inbox for our reply.",
+    "sendButton": "Send Message",
+    "sending": "Sending..."
+  },
+  "profileNotice": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page."
+}
Index: frontend/src/locales/en/courses.json
===================================================================
--- frontend/src/locales/en/courses.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/courses.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,7 @@
+{
+  "title": "Ready to Take the",
+  "highlight": "Next Step?",
+  "description": "Explore courses designed not just to teach — but to shift your mindset, sharpen your skills, and accelerate your journey toward real impact. Whether you're scaling a business, leading a team, or growing as a professional, this is where transformation begins.",
+  "rocketAlt": "Shifter Rocket",
+  "difficultyOptions": ["Beginner", "Intermediate", "Advanced"]
+}
Index: frontend/src/locales/en/footer.json
===================================================================
--- frontend/src/locales/en/footer.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/footer.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,49 @@
+{
+  "cta": {
+    "title": { "part1": "Simplify Your Growth", "part2": "Journey" },
+    "subtitle": {
+      "line1": "Take the first step toward smarter business solutions.",
+      "line2": "Let us guide you every step of the way."
+    },
+    "button": {
+      "consultation": "Schedule a Free Consultation",
+      "contact": "Contact Us"
+    }
+  },
+  "social": { "visit": "Visit us at" },
+  "sections": {
+    "services": {
+      "title": "Services",
+      "items": {
+        "mentoring": "Mentoring",
+        "consulting": "Consulting",
+        "courses": "Courses",
+        "academies": "Academies"
+      }
+    },
+    "about": {
+      "title": "About Us",
+      "items": { "about": "About Shifter" }
+    },
+    "profile": {
+      "title": "Profile",
+      "items": {
+        "profile": "Profile",
+        "logout": "Log Out",
+        "login": "Log In / Sign Up"
+      }
+    },
+    "dashboard": {
+      "title": "Dashboard",
+      "items": {
+        "profile": "Profile",
+        "learning": "My Learning"
+      }
+    },
+    "contact": {
+      "title": "Contact",
+      "items": { "contact": "Contact Us" }
+    }
+  },
+  "rights": "All rights reserved."
+}
Index: frontend/src/locales/en/freeConsultation.json
===================================================================
--- frontend/src/locales/en/freeConsultation.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/freeConsultation.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,39 @@
+{
+  "hero": {
+    "title": "Book Your Free Expert Session",
+    "description": "Talk to an expert about your business goals and challenges. Get a personalized program recommendation tailored to your needs."
+  },
+  "nextSteps": {
+    "title": "Next Steps After Submission?",
+    "steps": [
+      {"title": "Your Expert is Assigned","description":"We schedule an expert for your session and send you a confirmation email with all the meeting details."},
+      {"title": "Expert Prepares for Your Session","description":"Your expert reviews the information you provided to create valuable insights and a strategy tailored to your situation."},
+      {"title": "Attend Your Personalized Session","description":"Join the session and receive actionable guidance along with a program or mentorship recommendation designed specifically for your goals."}
+    ]
+  },
+  "form": {
+    "profileHint": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page.",
+    "name": "Name",
+    "email": "Email",
+    "fields": {
+      "aboutCompany": {"label":"About your business","placeholder":"What you do, industry, customers"},
+      "challenges": {"label":"Your current challenges","placeholder":"E.g. sales, growth, team issues"},
+      "expectations": {"label":"What you want from the session","placeholder":"Advice, strategy, solutions"},
+      "otherInfo": {"label":"Anything else","placeholder":"Extra context or details"}
+    },
+    "selectDate": "Select a date",
+    "selectTime": "Select a time",
+    "book": "Book Session",
+    "booking": "Booking..."
+  },
+  "confirmation": {
+    "title": "Your free consultation is scheduled! 🎉",
+    "description": "Completing the form was the <span class='font-semibold text-shifter'>first step toward progress and growth</span>. Check your <span class='font-semibold text-shifter'>email for the Zoom link.</span>"
+  },
+  "optionalHint": "<sup>*</sup> These fields are optional. Filling them out helps us better understand your challenges and objectives, so we can prepare a more personalized session.",
+  "errors": {
+    "selectDateTime": "Please select both date and time.",
+    "alreadyUsed": "We couldn’t schedule your meeting. It appears you’ve already used your free consultation. Feel free to get in touch with us through our Contact page for more options.",
+    "failedSchedule": "Failed to schedule the meeting. Please try again later or contact support."
+  }
+}
Index: frontend/src/locales/en/home.json
===================================================================
--- frontend/src/locales/en/home.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/home.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,95 @@
+{
+  "hero": {
+    "label": "Shift 2 Win",
+    "title": "Simplify Your Growth Journey",
+    "description": "Expert guidance, practical courses, and group academies designed to help family-owned businesses thrive.",
+    "cta": {
+      "freeConsultation": "Book a Free Consultation",
+      "contact": "Get In Touch"
+    },
+    "stats": {
+      "businessesEmpowered": {
+        "value": 250,
+        "label": "Businesses Empowered"
+      },
+      "mentoringHours": {
+        "value": 2000,
+        "label": "Mentoring Hours"
+      },
+      "yearsOfShifter": {
+        "value": 4,
+        "label": "Years of Shifter"
+      }
+    }
+  },
+  "ourServices": {
+    "heading": "Solutions That Deliver Real Results",
+    "description": "Shifter focuses on clear, practical steps that drive measurable growth.",
+    "discoverMore": "Discover more",
+    "cards": [
+      {
+        "title": "Mentoring",
+        "description": "Personalized mentorship to help you overcome challenges and achieve your goals.",
+        "link": "/mentoring"
+      },
+      {
+        "title": "Courses",
+        "description": "On-demand courses to guide your journey at every stage.",
+        "link": "/courses"
+      },
+      {
+        "title": "Consulting",
+        "description": "Targeted consulting to solve specific challenges and deliver immediate results.",
+        "link": "/consulting"
+      },
+      {
+        "title": "Academies",
+        "description": "Structured group learning designed to help you grow and succeed together.",
+        "link": "/academies"
+      }
+    ]
+  },
+  "collaborationSteps": {
+    "heading": "How to Start Your Journey to <strong>Success</strong>",
+    "button": "Get Started",
+    "step1": {
+      "beforeConsultation": {
+        "title": "Schedule a Free Consultation",
+        "description": "Schedule a no-obligation consultation to discuss your challenges, goals, and expectations."
+      },
+      "afterConsultation": {
+        "title": "Request Continued Support",
+        "description": "Reach out to continue your journey with tailored guidance for your next business goals."
+      }
+    },
+    "step2": {
+      "title": "Share Your Needs & Goals",
+      "description": "Provide clear insights about your business struggles and aspirations to shape the right strategy."
+    },
+    "step3": {
+      "title": "Review Your Personalized Plan",
+      "description": "Receive a tailored roadmap with clear, actionable steps to help you achieve business success."
+    },
+    "step4": {
+      "title": "Start Implementing & Collaborating",
+      "description": "Apply expert guidance and proven strategies with continuous support throughout the process."
+    }
+  },
+  "coursesCarousel": {
+    "heading": "Unlock Your Growth With <strong class='text-shifter'>E-Learning</strong>",
+    "description": "Access expert-led courses designed to help you master business, strategy, and success - anytime, anywhere."
+  },
+  "shifterValues": {
+    "heading": "Our Core <strong class='text-shifter'>Values</strong>",
+    "description": "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 impactful and lasting success.",
+    "valuesList": [
+      "Sustainable Results",
+      "Holistic Approach",
+      "In-depth Analysis",
+      "Fact Based Solutions",
+      "Tailor Made Services"
+    ],
+    "button": "Read More"
+  }
+
+}
Index: frontend/src/locales/en/login.json
===================================================================
--- frontend/src/locales/en/login.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/login.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,18 @@
+{
+  "welcomeBack": "Welcome Back!",
+  "subtitle": "Let's unlock your next breakthrough in business!",
+  "backToMain": "Back to Main Page",
+  "emailLabel": "Email address",
+  "emailPlaceholder": "name@email.com",
+  "passwordLabel": "Password",
+  "passwordPlaceholder": "********",
+  "logIn": "Log In",
+  "register": "Register",
+  "loggingIn": "Logging in...",
+  "or": "or",
+  "googleLogin": "Log in with Google",
+  "errors": {
+    "fillAllFields": "Please fill in all fields.",
+    "somethingWentWrong": "Something went wrong. Please try again."
+  }
+}
Index: frontend/src/locales/en/mentoring.json
===================================================================
--- frontend/src/locales/en/mentoring.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/mentoring.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,20 @@
+{
+  "heroTitle": "Dedicated 1:1 Mentorship",
+  "heroDescription": "Our program ensures maximum client success by operating with <strong class='font-bold'>limited openings</strong>. This guarantees that every partner receives the <strong class='font-bold'>undivided attention</strong> and continuous strategic input necessary to <strong class='font-bold'>achieve their objectives</strong>. Submit your inquiry to begin the assessment for one of our dedicated slots.",
+  "contactInfoTitle": "Contact Information",
+  "contactInfoDescription": "Complete the form and our team will respond shortly to help you take the next step.",
+  "contactEmail": "contact@shift-er.com",
+  "contactLocation": "Skopje, N. Macedonia",
+  "autoFilledNote": "These values are automatically populated from your profile. If any of them are incorrect, please update them in the Profile page.",
+  "name": "Name",
+  "email": "Email",
+  "subjectLabel": "Your Subject",
+  "subjectPlaceholder": "Enter the subject of your message",
+  "messageLabel": "Message",
+  "messagePlaceholder": "Write your message here...",
+  "emailError": "We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com",
+  "messageSentTitle": "Your message has been sent successfully!",
+  "messageSentDescription": "Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible. Keep an eye on your <span class='font-semibold text-shifter'>inbox for our reply</span>.",
+  "sending": "Sending...",
+  "sendMessage": "Send Message"
+}
Index: frontend/src/locales/en/navbar.json
===================================================================
--- frontend/src/locales/en/navbar.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/navbar.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,11 @@
+{
+  "courses": "Courses",
+  "mentoring": "Mentoring",
+  "consulting": "Consulting",
+  "academies": "Academies",
+  "about": "About",
+  "login": "Login / Register",
+  "learn": "My Learning",
+  "freeConsultation": "Free Consultation",
+  "contact": "Contact Us"
+}
Index: frontend/src/locales/en/personalize.json
===================================================================
--- frontend/src/locales/en/personalize.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/personalize.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,32 @@
+{
+  "title": "Shift into Success",
+  "subtitle": "Start your journey toward smarter, scalable business growth.",
+  "backToMain": "Back to Main Page",
+  "verificationFailedTitle": "Verification Failed",
+  "verificationFailedMessage1": "We couldn’t verify your email address. The verification link may be invalid or expired.",
+  "verificationFailedMessage2": "Please try registering again or request a new verification link.",
+  "back": "Back",
+  "next": "Next",
+  "settingUp": "Setting up...",
+  "startUsing": "Start Using Shifter",
+
+  "stepOne": {
+    "fullName": "Full Name",
+    "fullNamePlaceholder": "John Doe",
+    "workPosition": "Work Position",
+    "workPositionPlaceholder": "Your Position",
+    "companySize": "Company Size",
+    "companySizeOptions": ["Freelance", "Micro", "Small", "Medium", "Mid Market", "Enterprise", "Other"],
+    "errorIncomplete": "Please ensure all inputs are completed."
+  },
+
+  "stepTwo": {
+    "interests": "Select Topics You Like",
+    "errorNoInterest": "Help us understand you better — select at least one topic you like"
+  },
+
+  "stepThree": {
+    "desiredSkills": "Outline Your Learning Goals",
+    "errorNoSkill": "We’d love to support your growth — select at least one skill you'd like to improve"
+  }
+}
Index: frontend/src/locales/en/register.json
===================================================================
--- frontend/src/locales/en/register.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/en/register.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,19 @@
+{
+  "title": "Shift into Success",
+  "subtitle": "Start your journey toward smarter, scalable business growth.",
+  "backToMain": "Back to Main Page",
+  "emailLabel": "Email address",
+  "emailPlaceholder": "name@email.com",
+  "passwordLabel": "Password",
+  "passwordPlaceholder": "********",
+  "passwordConfirmationLabel": "Confirm password",
+  "passwordConfirmationPlaceholder": "********",
+  "createAccount": "Create Account",
+  "creatingAccount": "Creating account...",
+  "logIn": "Log In",
+  "or": "or",
+  "googleLogin": "Sign in with Google",
+  "verifyEmail": "Verify your email to continue",
+  "verificationSent1": "A verification link has been sent to",
+  "verificationSent2": "Please check your inbox and click the link to activate your account."
+}
Index: frontend/src/locales/mk/about.json
===================================================================
--- frontend/src/locales/mk/about.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/about.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,44 @@
+{
+  "hero": {
+    "title": "Центар за Развој и Трансформација на Бизнисот",
+    "description": "<span class='font-semibold'>Shifter</span> е центар за развој и трансформација на бизнисот, нудејќи менторство, консултации, академии и е-учење за семејни бизниси."
+  },
+  "stats": {
+    "clients": "Овластени клиенти",
+    "hours": "Менторски часови",
+    "years": "Години Shifter"
+  },
+  "whyChoose": {
+    "title": "Зошто да го изберете <span class='font-bold text-shifter'>Shifter?</span>"
+  },
+  "reasons": [
+    {
+      "title": "Прилагодени стратегии",
+      "description": "Стратегии и програми дизајнирани специфично за целите и предизвиците на вашиот бизнис."
+    },
+    {
+      "title": "Овластување на клиенти",
+      "description": "Учиме клиенти како да решаваат предизвици самостојно, а не само да обезбедиме готови решенија."
+    },
+    {
+      "title": "Холистички пристап",
+      "description": "Севкупен метод кој се занимава со коренските причини во вашиот бизнис, а не само со симптомите."
+    },
+    {
+      "title": "Одржлив раст",
+      "description": "Стратегиски решенија кои ја зајакнуваат работата, тимовите и системите за долгорочен успех."
+    },
+    {
+      "title": "Експертска насока",
+      "description": "Решенија од професионалци кои ги прават бизнис предизвиците управливи."
+    }
+  ],
+  "about": {
+    "title": "За <span class='text-shifter font-black'>Shifter</span>",
+    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    "cta": "Закажете бесплатна консултација"
+  },
+  "foundations": {
+    "title": "Нашите основи"
+  }
+}
Index: frontend/src/locales/mk/academies.json
===================================================================
--- frontend/src/locales/mk/academies.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/academies.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,20 @@
+{
+  "heroTitle": "Трансформирајте ја експертизата на вашиот тим со Корпоративни Групни Академии и Обуки",
+  "heroDescription": "Трансформирајте го вашиот тим во синхронизирана единица на високо-ефикасни професионалци. Нашите Групни Академии обезбедуваат <strong class='font-bold'>стандардизирани, водени од експерти обуки</strong> за брзо надградување на цели оддели, затворање на јазовите во знаењето и обезбедување конзистентно извршување низ вашата организација. Прашајте сега за персонализирана ревизија на наставната програма за вашиот бизнис.",
+  "contactInfoTitle": "Контакт информации",
+  "contactInfoDescription": "Пополнете го формуларот и нашиот тим ќе одговори наскоро за да ви помогне да направите следен чекор.",
+  "contactEmail": "contact@shift-er.com",
+  "contactLocation": "Скопје, С. Македонија",
+  "autoFilledNote": "Овие вредности се автоматски пополнети од вашиот профил. Ако некоја од нив е неточна, ве молиме ажурирајте ја на страницата Профил.",
+  "name": "Име",
+  "email": "Е-пошта",
+  "subjectLabel": "Ваш предмет",
+  "subjectPlaceholder": "Внесете ја темата на вашето прашање",
+  "messageLabel": "Порака",
+  "messagePlaceholder": "Напишете ја вашата порака овде...",
+  "emailError": "Имаме привремени проблеми со нашиот сервис за е-пошта. Ве молиме обидете се повторно или контактирајте директно на contact@shift-er.com",
+  "messageSentTitle": "Вашата порака е успешно испратена!",
+  "messageSentDescription": "Ви благодариме што не контактиравте. Нашиот тим ќе ја прегледа вашата порака и ќе ве контактира што е можно поскоро. Следете ја вашата <span class='font-semibold text-shifter'>е-пошта за нашиот одговор</span>.",
+  "sending": "Се испраќа...",
+  "sendMessage": "Испрати порака"
+}
Index: frontend/src/locales/mk/consulting.json
===================================================================
--- frontend/src/locales/mk/consulting.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/consulting.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,20 @@
+{
+  "heroTitle": "Персонализирано Стратешко Консултирање",
+  "heroDescription": "Нашиот консултантски ангажман обезбедува максимални резултати за клиентите со работа со <strong class='font-bold'>ограничен број места</strong>. Ова гарантира дека секој клиент добива <strong class='font-bold'>неподеленo внимание</strong> и континуирано стратешко извршување потребно за да обезбеди <strong class='font-bold'>мерливи резултати</strong>. Испратете ја вашата прашање за да започне процесот на квалификација за ексклузивна стратешка поддршка.",
+  "contactInfoTitle": "Контакт информации",
+  "contactInfoDescription": "Пополнете го формуларот и нашиот тим ќе одговори наскоро за да ви помогне да направите следен чекор.",
+  "contactEmail": "contact@shift-er.com",
+  "contactLocation": "Скопје, С. Македонија",
+  "autoFilledNote": "Овие вредности се автоматски пополнети од вашиот профил. Ако некоја од нив е неточна, ве молиме ажурирајте ја на страницата Профил.",
+  "name": "Име",
+  "email": "Е-пошта",
+  "subjectLabel": "Ваш предмет",
+  "subjectPlaceholder": "Внесете ја темата на вашето прашање",
+  "messageLabel": "Порака",
+  "messagePlaceholder": "Напишете ја вашата порака овде...",
+  "emailError": "Имаме привремени проблеми со нашиот сервис за е-пошта. Ве молиме обидете се повторно или контактирајте директно на contact@shift-er.com",
+  "messageSentTitle": "Вашата порака е успешно испратена!",
+  "messageSentDescription": "Ви благодариме што не контактиравте. Нашиот тим ќе ја прегледа вашата порака и ќе ве контактира што е можно поскоро. Следете ја вашата <span class='font-semibold text-shifter'>е-пошта за нашиот одговор</span>.",
+  "sending": "Се испраќа...",
+  "sendMessage": "Испрати порака"
+}
Index: frontend/src/locales/mk/contact.json
===================================================================
--- frontend/src/locales/mk/contact.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/contact.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,24 @@
+{
+  "hero": {
+    "title": "Претворете ја вашата визија во резултати",
+    "description": "Пополнете го формуларот и нашиот тим ќе ве контактира наскоро за да ви помогне да го направите следниот чекор."
+  },
+  "info": {
+    "title": "Контакт информации",
+    "description": "Пополнете го формуларот и нашиот тим ќе ве контактира наскоро за да ви помогне да го направите следниот чекор.",
+    "email": "contact@shift-er.com",
+    "location": "Скопје, РС Македонија"
+  },
+  "form": {
+    "subject": "Ваш предмет",
+    "subjectPlaceholder": "Внесете го предметот на вашата порака",
+    "message": "Порака",
+    "messagePlaceholder": "Напишете ја вашата порака овде...",
+    "sendingError": "Има привремени проблеми со нашата пошта. Ве молиме обидете се повторно или контактирајте не директно на contact@shift-er.com",
+    "successTitle": "Вашата порака е успешно испратена!",
+    "successDescription": "Ви благодариме што не контактиравте. Нашиот тим ќе ја прегледа вашата порака и ќе ве контактира што е можно поскоро. Проверете ја вашата пошта за одговор.",
+    "sendButton": "Испрати порака",
+    "sending": "Се испраќа..."
+  },
+  "profileNotice": "Овие вредности се автоматски пополнети од вашиот профил. Ако некои се неточни, ве молиме ажурирајте ги во Профил страницата."
+}
Index: frontend/src/locales/mk/courses.json
===================================================================
--- frontend/src/locales/mk/courses.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/courses.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,7 @@
+{
+  "title": "Подготвени за следниот",
+  "highlight": "чекор?",
+  "description": "Истражете курсеви дизајнирани не само за учење, туку и за трансформација на вашето размислување, усовршување на вештините и забрзување на патот кон реален успех. Без разлика дали ја развивате компанијата, водите тим или се развивате како професионалец, тука започнува трансформацијата.",
+  "rocketAlt": "Shifter ракета",
+  "difficultyOptions": ["Почетник", "Среден", "Напреден"]
+}
Index: frontend/src/locales/mk/footer.json
===================================================================
--- frontend/src/locales/mk/footer.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/footer.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,49 @@
+{
+  "cta": {
+    "title": { "part1": "Поедностави го твојот пат кон", "part2": "успехот" },
+    "subtitle": {
+      "line1": "Направи го првиот чекор кон поумни бизнис решенија.",
+      "line2": "Ние ќе те водиме во секој чекор."
+    },
+    "button": {
+      "consultation": "Закажи бесплатна консултација",
+      "contact": "Контактирај не"
+    }
+  },
+  "social": { "visit": "Посети не на" },
+  "sections": {
+    "services": {
+      "title": "Услуги",
+      "items": {
+        "mentoring": "Менторство",
+        "consulting": "Консалтинг",
+        "courses": "Курсеви",
+        "academies": "Академии"
+      }
+    },
+    "about": {
+      "title": "За нас",
+      "items": { "about": "За Shifter" }
+    },
+    "profile": {
+      "title": "Профил",
+      "items": {
+        "profile": "Профил",
+        "logout": "Одјави се",
+        "login": "Најави се / Регистрирај се"
+      }
+    },
+    "dashboard": {
+      "title": "Табла",
+      "items": {
+        "profile": "Профил",
+        "learning": "Моето учење"
+      }
+    },
+    "contact": {
+      "title": "Контакт",
+      "items": { "contact": "Контактирај не" }
+    }
+  },
+  "rights": "Сите права се задржани."
+}
Index: frontend/src/locales/mk/freeConsultation.json
===================================================================
--- frontend/src/locales/mk/freeConsultation.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/freeConsultation.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,39 @@
+{
+  "hero": {
+    "title": "Закажете бесплатна експертска сесија",
+    "description": "Разговарајте со експерт за вашите бизнис цели и предизвици. Добијте персонализирана препорака за програм, прилагодена на вашите потреби."
+  },
+  "nextSteps": {
+    "title": "Следни чекори по пополнување на формуларот?",
+    "steps": [
+      {"title": "Вашиот експерт е доделен","description":"Ние го доделуваме експертот за вашата сесија и ви испраќаме е-пошта со сите детали за средбата."},
+      {"title": "Експертот се подготвува за вашата сесија","description":"Вашиот експерт ги прегледува информациите што ги обезбедивте за да создаде вредни увиди и стратегија прилагодена на вашата ситуација."},
+      {"title": "Присуствувајте на вашата персонализирана сесија","description":"Приклучете се на сесијата и добијте практични насоки заедно со препорака за програм или менторство дизајнирана специјално за вашите цели."}
+    ]
+  },
+  "form": {
+    "profileHint": "Овие вредности се автоматски пополнети од вашиот профил. Доколку некоја од нив е неточна, ажурирајте ја на страницата Профил.",
+    "name": "Име",
+    "email": "Е-пошта",
+    "fields": {
+      "aboutCompany": {"label":"За вашиот бизнис","placeholder":"Што правите, индустрија, клиенти"},
+      "challenges": {"label":"Вашите тековни предизвици","placeholder":"На пример, продажба, раст, тимски проблеми"},
+      "expectations": {"label":"Што сакате од сесијата","placeholder":"Совет, стратегија, решенија"},
+      "otherInfo": {"label":"Сè друго","placeholder":"Дополнителен контекст или детали"}
+    },
+    "selectDate": "Изберете датум",
+    "selectTime": "Изберете време",
+    "book": "Закажи сесија",
+    "booking": "Закажување..."
+  },
+  "confirmation": {
+    "title": "Вашата бесплатна консултација е закажана! 🎉",
+    "description": "Пополнувањето на формуларот беше <span class='font-semibold text-shifter'>првиот чекор кон напредок и раст</span>. Проверете ја вашата <span class='font-semibold text-shifter'>е-пошта за Zoom линк.</span>"
+  },
+  "optionalHint": "<sup>*</sup> Овие полиња се опционални. Пополнувањето им помага на нашите експерти подобро да ги разберат вашите предизвици и цели, за да подготват персонализирана сесија.",
+  "errors": {
+    "selectDateTime": "Ве молиме изберете и датум и време.",
+    "alreadyUsed": "Не можеме да ја закажеме вашата сесија. Се чини дека веќе ја искористивте бесплатната консултација. Контактирајте нè преку страницата Контакт за повеќе опции.",
+    "failedSchedule": "Не успеавме да ја закажеме сесијата. Обидете се повторно подоцна или контактирајте ја поддршката."
+  }
+}
Index: frontend/src/locales/mk/home.json
===================================================================
--- frontend/src/locales/mk/home.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/home.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,95 @@
+{
+  "hero": {
+    "label": "Shift 2 Win",
+    "title": "Едноставно растете и напредувајте",
+    "description": "Експертско водство, практични курсеви и групни академии дизајнирани да им помогнат на семејните бизниси да напредуваат.",
+    "cta": {
+      "freeConsultation": "Закажи бесплатна консултација",
+      "contact": "Контактирајте не"
+    },
+    "stats": {
+      "businessesEmpowered": {
+        "value": 250,
+        "label": "Поддржани Бизниси"
+      },
+      "mentoringHours": {
+        "value": 2000,
+        "label": "Часови Менторство"
+      },
+      "yearsOfShifter": {
+        "value": 4,
+        "label": "Години Историја"
+      }
+    }
+  },
+  "ourServices": {
+    "heading": "Решенија кои даваат вистински резултати",
+    "description": "Shifter се фокусира на јасни и практични чекори кои носат мерлив раст.",
+    "discoverMore": "Дознај повеќе",
+    "cards": [
+      {
+        "title": "Менторство",
+        "description": "Персонализирано менторство за да ги надминете предизвиците и да ги постигнете вашите цели.",
+        "link": "/mentoring"
+      },
+      {
+        "title": "Курсеви",
+        "description": "Курсеви на барање кои ве водат во секоја фаза од вашиот пат.",
+        "link": "/courses"
+      },
+      {
+        "title": "Консултации",
+        "description": "Целни консултации за решавање на специфични предизвици и обезбедување моментални резултати.",
+        "link": "/consulting"
+      },
+      {
+        "title": "Академии",
+        "description": "Структурирано групно учење за да се развивате и успевате заедно.",
+        "link": "/academies"
+      }
+    ]
+  },
+  "collaborationSteps": {
+    "heading": "Како да го започнете вашиот пат кон <strong>успех</strong>",
+    "button": "Започнете",
+    "step1": {
+      "beforeConsultation": {
+        "title": "Закажете бесплатна консултација",
+        "description": "Закажете консултација без обврски за да ги разгледате вашите предизвици, цели и очекувања."
+      },
+      "afterConsultation": {
+        "title": "Побарајте продолжена поддршка",
+        "description": "Контактирајте за да продолжите со вашиот пат со прилагодено водство за следните бизнис цели."
+      }
+    },
+    "step2": {
+      "title": "Споделете ги вашите потреби и цели",
+      "description": "Обезбедете јасни информации за предизвиците и амбициите на вашиот бизнис за да се создаде вистинската стратегија."
+    },
+    "step3": {
+      "title": "Прегледајте го вашиот персонализиран план",
+      "description": "Примете прилагодена патека со јасни, применливи чекори за да го постигнете бизнис успехот."
+    },
+    "step4": {
+      "title": "Започнете со имплементација и соработка",
+      "description": "Применете стручни совети и проверени стратегии со континуирана поддршка во текот на процесот."
+    }
+  },
+  "coursesCarousel": {
+    "heading": "Отклучете го вашиот раст со <strong class='text-shifter'>Е-учење</strong>",
+    "description": "Пристапете до курсеви водени од експерти кои ќе ви помогнат да го совладате бизнисот, стратегијата и успехот - секогаш и секаде."
+  },
+  "shifterValues": {
+    "heading": "Нашите Основни <strong class='text-shifter'>Вредности</strong>",
+    "description": "Нашите SHIFT вредности го дефинираат нашиот пристап кон менторство и консултации. Се фокусираме на Одржливи Резултати, Холистички Пристап, Длабинска Анализа, Решенија Базирани на Факти и Прилагодени Услуги – обезбедувајќи влијателен и траен успех.",
+    "valuesList": [
+      "Одржливи Резултати",
+      "Холистички Пристап",
+      "Длабинска Анализа",
+      "Решенија Базирани на Факти",
+      "Прилагодени Услуги"
+    ],
+    "button": "Прочитај Повеќе"
+  }
+
+}
Index: frontend/src/locales/mk/login.json
===================================================================
--- frontend/src/locales/mk/login.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/login.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,18 @@
+{
+  "welcomeBack": "Добредојдовте повторно!",
+  "subtitle": "Да ја отклучиме вашата следна деловна пресвртница!",
+  "backToMain": "Назад кон главната страница",
+  "emailLabel": "Емаил адреса",
+  "emailPlaceholder": "ime@domen.com",
+  "passwordLabel": "Лозинка",
+  "passwordPlaceholder": "********",
+  "logIn": "Најави се",
+  "register": "Регистрирај се",
+  "loggingIn": "Се најавуваме...",
+  "or": "или",
+  "googleLogin": "Најави се со Google",
+  "errors": {
+    "fillAllFields": "Ве молиме пополнете ги сите полиња.",
+    "somethingWentWrong": "Нешто тргна наопаку. Обидете се повторно."
+  }
+}
Index: frontend/src/locales/mk/mentoring.json
===================================================================
--- frontend/src/locales/mk/mentoring.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/mentoring.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,20 @@
+{
+  "heroTitle": "Посветено 1:1 Менторство",
+  "heroDescription": "Нашата програма обезбедува максимален успех на клиентите со работа со <strong class='font-bold'>ограничен број места</strong>. Ова гарантира дека секој партнер добива <strong class='font-bold'>неподеленo внимание</strong> и континуиран стратешки влез потребен за <strong class='font-bold'>да ги оствари своите цели</strong>. Испратете ја вашата прашање за да започне проценката за едно од нашите посветени места.",
+  "contactInfoTitle": "Контакт информации",
+  "contactInfoDescription": "Пополнете го формуларот и нашиот тим ќе одговори наскоро за да ви помогне да направите следен чекор.",
+  "contactEmail": "contact@shift-er.com",
+  "contactLocation": "Скопје, С. Македонија",
+  "autoFilledNote": "Овие вредности се автоматски пополнети од вашиот профил. Ако некоја од нив е неточна, ве молиме ажурирајте ја на страницата Профил.",
+  "name": "Име",
+  "email": "Е-пошта",
+  "subjectLabel": "Ваш предмет",
+  "subjectPlaceholder": "Внесете ја темата на вашето прашање",
+  "messageLabel": "Порака",
+  "messagePlaceholder": "Напишете ја вашата порака овде...",
+  "emailError": "Имаме привремени проблеми со нашиот сервис за е-пошта. Ве молиме обидете се повторно или контактирајте директно на contact@shift-er.com",
+  "messageSentTitle": "Вашата порака е успешно испратена!",
+  "messageSentDescription": "Ви благодариме што не контактиравте. Нашиот тим ќе ја прегледа вашата порака и ќе ве контактира што е можно поскоро. Проверете ја вашата <span class='font-semibold text-shifter'>влезна пошта за одговор</span>.",
+  "sending": "Се испраќа...",
+  "sendMessage": "Испрати порака"
+}
Index: frontend/src/locales/mk/navbar.json
===================================================================
--- frontend/src/locales/mk/navbar.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/navbar.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,11 @@
+{
+  "courses": "Курсеви",
+  "mentoring": "Менторство",
+  "consulting": "Консалтинг",
+  "academies": "Академии",
+  "about": "За Нас",
+  "login": "Најави се / Регистрирај се",
+  "learn": "Мое Учење",
+  "freeConsultation": "Бесплатна Сесија",
+  "contact": "Контакт"
+}
Index: frontend/src/locales/mk/personalize.json
===================================================================
--- frontend/src/locales/mk/personalize.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/personalize.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,32 @@
+{
+  "title": "Прескокни кон успех",
+  "subtitle": "Започнете го вашето патување кон паметен и скалабилен бизнис раст.",
+  "backToMain": "Назад кон главната страница",
+  "verificationFailedTitle": "Верификацијата не успеа",
+  "verificationFailedMessage1": "Не можевме да ја верифицираме вашата емаил адреса. Линкот за верификација може да е невалиден или истечен.",
+  "verificationFailedMessage2": "Ве молиме обидете се повторно со регистрацијата или побарајте нов линк за верификација.",
+  "back": "Назад",
+  "next": "Следно",
+  "settingUp": "Се подесува...",
+  "startUsing": "Започни да користиш Shifter",
+
+  "stepOne": {
+    "fullName": "Целосно име",
+    "fullNamePlaceholder": "Јован Јованов",
+    "workPosition": "Работно место",
+    "workPositionPlaceholder": "Вашата позиција",
+    "companySize": "Големина на компанијата",
+    "companySizeOptions": ["Фриленсер", "Микро", "Мала", "Средна", "Среден пазар", "Голема компанија", "Друго"],
+    "errorIncomplete": "Ве молиме пополнете ги сите полиња."
+  },
+
+  "stepTwo": {
+    "interests": "Изберете теми кои ви се допаѓаат",
+    "errorNoInterest": "Помогнете ни да ве разбереме подобро — изберете барем една тема која ви се допаѓа"
+  },
+
+  "stepThree": {
+    "desiredSkills": "Опишете ги вашите цели за учење",
+    "errorNoSkill": "Би сакале да го поддржиме вашиот раст — изберете барем една вештина која сакате да ја усовршите"
+  }
+}
Index: frontend/src/locales/mk/register.json
===================================================================
--- frontend/src/locales/mk/register.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
+++ frontend/src/locales/mk/register.json	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -0,0 +1,19 @@
+{
+  "title": "Прескокни кон успех",
+  "subtitle": "Започнете го вашето патување кон паметен и скалабилен бизнис раст.",
+  "backToMain": "Назад кон главната страница",
+  "emailLabel": "Емаил адреса",
+  "emailPlaceholder": "ime@domen.com",
+  "passwordLabel": "Лозинка",
+  "passwordPlaceholder": "********",
+  "passwordConfirmationLabel": "Потврдете ја лозинката",
+  "passwordConfirmationPlaceholder": "********",
+  "createAccount": "Креирај сметка",
+  "creatingAccount": "Се креира сметка...",
+  "logIn": "Најави се",
+  "or": "или",
+  "googleLogin": "Најави се со Google",
+  "verifyEmail": "Верифицирајте ја вашата емаил адреса за продолжување",
+  "verificationSent1": "Линк за верификација е испратен на",
+  "verificationSent2": "Ве молиме проверете ја вашата е-пошта и кликнете на линкот за да ја активирате вашата сметка."
+}
Index: frontend/src/main.tsx
===================================================================
--- frontend/src/main.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/main.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,8 +1,11 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './global.css'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import './global.css';
 import App from './App.tsx'
 import {AuthProvider} from "./context/AuthContext.tsx";
 import {BrowserRouter} from "react-router-dom";
+import "./i18n.ts";
 
 createRoot(document.getElementById('root')!).render(
Index: frontend/src/pages/About.tsx
===================================================================
--- frontend/src/pages/About.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/About.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -12,64 +12,53 @@
 // @ts-expect-error
 import ShifterArrow from "../../public/Shifter-Arrow-White.png"
+import { useTranslation } from "react-i18next";
 
-const reasons = [
-    {
-        icon: <IconChessKnight size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-        title: "Tailored Strategies",
-        description: "Strategies and programs designed specifically for your business goals and challenges.",
-    },
-    {
-        icon: <IconArrowBigUp size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-        title: "Empowering Clients",
-        description: "Teaching clients how to solve challenges independently, not just provide ready-made solutions.",
-    },
-    {
-        icon: <IconRotate360 size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-        title: "Holistic Approach",
-        description: "A comprehensive method that addresses root causes across your business, not just the symptoms.",
-    },
-    {
-        icon: <IconTrendingUp size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-        title: "Sustainable Growth",
-        description: "Strategic solutions that strengthen processes, teams, and systems for long-term success.",
-    },
-    {
-        icon: <IconRoute size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
-        title: "Expert Guidance",
-        description: "Solutions from professionals who make business challenges manageable.",
-    }
-];
+const About = () => {
+    const { t } = useTranslation("about");
 
-function About() {
+    const reasons = [
+        {
+            icon: <IconChessKnight size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
+            title: t("reasons.0.title"),
+            description: t("reasons.0.description"),
+        },
+        {
+            icon: <IconArrowBigUp size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
+            title: t("reasons.1.title"),
+            description: t("reasons.1.description"),
+        },
+        {
+            icon: <IconRotate360 size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
+            title: t("reasons.2.title"),
+            description: t("reasons.2.description"),
+        },
+        {
+            icon: <IconTrendingUp size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
+            title: t("reasons.3.title"),
+            description: t("reasons.3.description"),
+        },
+        {
+            icon: <IconRoute size={72} color="var(--color-shifter)" aria-hidden={true} focusable={false}/>,
+            title: t("reasons.4.title"),
+            description: t("reasons.4.description"),
+        }
+    ];
+
     return (
         <main className="relative bg-beige text-black-text">
             {/*Hero Section*/}
-            <section className="relative py-vertical-lg pt-top-nav-lg px-horizontal-md
-                        flex flex-col items-center justify-center">
-                <LightBeams/>
+            <section className="relative py-vertical-lg pt-top-nav-lg px-horizontal-md flex flex-col items-center justify-center">
+                <LightBeams tilt={-50} beamCount={120} initialHeight={120 + Math.random() * 80} spikeMoveDown={40} />
 
                 <div className="flex flex-col items-center gap-20 z-1">
                     <div className="flex flex-col  gap-4 max-w-3/4">
-                        <h1 className="text-7xl font-semibold ">Business Development & Transformation
-                            Center</h1>
-                        <p className="text-xl font-light ">
-                            <span className="font-semibold">Shifter</span> is a center for business development and
-                            transformation,
-                            offering mentorship, consulting, academies, and e-learning for family businesses.
-                        </p>
+                        <h1 className="text-7xl font-semibold" dangerouslySetInnerHTML={{__html: t("hero.title")}}/>
+                        <p className="text-xl font-light" dangerouslySetInnerHTML={{__html: t("hero.description")}}/>
                     </div>
+
                     <div className="flex justify-evenly items-stretch w-full">
                         <div>
-                            <h2 className="text-3xl font-bold text"><CountUp start={0} end={250} duration={4}
-                                                                             separator={"."}/>+</h2>
-                            <p className="font-light whitespace-nowrap">Clients Empowered</p>
-                        </div>
-
-                        <div className="w-px  bg-beige/80"/>
-
-                        <div>
-                            <h2 className="text-3xl font-bold text"><CountUp start={0} end={2000} duration={4}
-                                                                             separator={"."}/>+</h2>
-                            <p className="font-light whitespace-nowrap">Mentoring Hours</p>
+                            <h2 className="text-3xl font-bold"><CountUp start={0} end={250} duration={4} separator={"."}/>+</h2>
+                            <p className="font-light whitespace-nowrap">{t("stats.clients")}</p>
                         </div>
 
@@ -77,7 +66,13 @@
 
                         <div>
-                            <h2 className="text-3xl font-bold text"><CountUp start={0} end={4} duration={4}
-                                                                             separator={"."}/>+</h2>
-                            <p className="font-light whitespace-nowrap">Years of Shifter</p>
+                            <h2 className="text-3xl font-bold"><CountUp start={0} end={2000} duration={4} separator={"."}/>+</h2>
+                            <p className="font-light whitespace-nowrap">{t("stats.hours")}</p>
+                        </div>
+
+                        <div className="w-px bg-beige/80"/>
+
+                        <div>
+                            <h2 className="text-3xl font-bold"><CountUp start={0} end={4} duration={4} separator={"."}/>+</h2>
+                            <p className="font-light whitespace-nowrap">{t("stats.years")}</p>
                         </div>
                     </div>
@@ -86,8 +81,5 @@
                 <div
                     className="absolute bottom-0 w-full h-3/10"
-                    style={{
-                        background: "linear-gradient(to bottom, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 100%)",
-                        pointerEvents: "none", // allows clicks to pass through
-                    }}
+                    style={{ background: "linear-gradient(to bottom, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 100%)", pointerEvents: "none" }}
                 />
             </section>
@@ -96,7 +88,5 @@
             <section className="grid grid-cols-3 grid-rows-2 px-horizontal-md py-vertical-lg gap-20">
                 <div className="col-span-1 flex flex-col">
-                    <h2 className="text-5xl font-medium text-left ">
-                        Why choose <br/> <span className="font-bold text-shifter">Shifter?</span>
-                    </h2>
+                    <h2 className="text-5xl font-medium text-left " dangerouslySetInnerHTML={{__html: t("whyChoose.title")}}/>
                 </div>
 
@@ -114,31 +104,13 @@
             {/*About Section*/}
             <section className="grid grid-cols-2 gap-x-40 px-horizontal-md py-vertical-lg bg-dark-blue/5">
-
                 <div className="col-start-1 col-span-1 flex flex-col text-left gap-12">
                     <div className="flex flex-col gap-20">
                         <div className="flex flex-col gap-4">
-                            <h2 className="text-5xl font-medium">About <span
-                                className="text-shifter font-black">Shifter</span></h2>
-                            <p>
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-                                has been the
-                                industry's standard dummy text ever since the 1500s, when an unknown printer took a
-                                galley of type
-                                and scrambled it to make a type specimen book. It has survived not only five centuries,
-                                but also the
-                                leap into electronic typesetting, remaining essentially unchanged. It was popularised in
-                                the 1960s
-                                with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
-                                with desktop
-                                publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                            </p>
+                            <h2 className="text-5xl font-medium" dangerouslySetInnerHTML={{__html: t("about.title")}}/>
+                            <p dangerouslySetInnerHTML={{__html: t("about.description")}}/>
                         </div>
 
-                        <Link to={"/free-consultation"}
-                              className="hover:shadow-shifter/60 shadow-shifter/40 transition-all duration-250 ease-in-out
-                              shadow-md border-2 border-white/40 flex gap-4 items-center
-                              text-white bg-shifter px-8 py-2 w-fit rounded-md group font-medium">
-                            Book a Free Consultation
-                            <ArrowRight size={20} strokeWidth={1.5} className="group-hover:translate-x-1 transition-all duration-250 ease-in-out" />
+                        <Link to={"/free-consultation"} className="hover:shadow-shifter/60 shadow-shifter/40 transition-all duration-250 ease-in-out shadow-md border-2 border-white/40 flex gap-4 items-center text-white bg-shifter px-8 py-2 w-fit rounded-md group font-medium">
+                            {t("about.cta")} <ArrowRight size={20} strokeWidth={1.5} className="group-hover:translate-x-1 transition-all duration-250 ease-in-out"/>
                         </Link>
                     </div>
@@ -149,6 +121,6 @@
 
             {/*Mission, Vision & Purpose*/}
-            <section className="flex flex-col gap-12 px-horizontal-md py-vertical-lg bg-dark-blue/5">
-                <h2 className="text-5xl font-medium">Our Foundations</h2>
+            <section className="flex flex-col gap-12 px-horizontal-md py-vertical-lg ">
+                <h2 className="text-5xl font-medium">{t("foundations.title")}</h2>
                 <MagicBento
                     textAutoHide={true}
@@ -162,23 +134,4 @@
                 />
             </section>
-
-            <section className="py-vertical-sm bg-dark-blue/5">
-                <div className="relative border-2 border-white/40 shadow-md shadow-shifter/40
-                flex justify-between items-end overflow-clip
-                px-horizontal-sm py-vertical-md pt-top-nav-lg mx-horizontal-md bg-shifter rounded-xl text-left">
-                    <h2 className="text-5xl text-white">Simplify Your Growth <br/> Journey</h2>
-                    <Link to={"/free-consultation"}
-                          className="z-1 hover:shadow-white/60 shadow-white/40 transition-all duration-250 ease-in-out
-                              shadow-md border-2 border-black/10 flex gap-4 items-center
-                              text-shifter bg-beige px-4 py-2 w-fit rounded-md font-bold">
-                        Book a Free Consultation
-                    </Link>
-
-                    <img src={ShifterArrow} alt={"Shifter Arrow"}
-                        aria-hidden={true}
-                         className="absolute right-0 -bottom-20 rotate-45 w-60 opacity-20"
-                    />
-                </div>
-            </section>
         </main>
     );
Index: frontend/src/pages/Academies.tsx
===================================================================
--- frontend/src/pages/Academies.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Academies.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,3 +1,3 @@
-import {Instagram, Linkedin, Mail, MapPin} from "lucide-react"
+import {Mail, MapPin} from "lucide-react"
 import React from "react";
 import {useAuthContext} from "../context/AuthContext.tsx";
@@ -5,11 +5,9 @@
 // @ts-expect-error
 import Arrow from "../../public/Shifter-Arrow-White.png"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import NavbarLink from "../components/NavbarLink.tsx";
 import {sendEmailApi} from "../api/contactApi.ts";
+import { useTranslation } from "react-i18next";
 
 function Academies() {
+    const {t} = useTranslation("academies");
     const {user, accessToken} = useAuthContext();
     const [subject, setSubject] = React.useState("");
@@ -29,5 +27,5 @@
             })
             .catch((err) => {
-                setError("We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com")
+                setError(t("emailError"));
                 console.error("Error sending email for academies inquiry:", err);
             })
@@ -40,15 +38,7 @@
             <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg
                 text-white-text">
-                <h1 className="text-5xl font-bold">Transform Your Team's Expertise with Corporate Group Academies &
-                    Training</h1>
-                <p className="text-xl font-light">
-                    Transform your team into a synchronized unit of high-performers.
-                    Our Group Academies deliver <strong className="font-bold">standardized, expert-led
-                    training</strong> to rapidly upskill entire departments,
-                    close knowledge gaps, and drive consistent execution across your organization.
-                    Inquire now to secure a personalized curriculum review for your business.
-                </p>
+                <h1 className="text-5xl font-bold" dangerouslySetInnerHTML={{__html: t("heroTitle")}}/>
+                <p className="text-xl font-light" dangerouslySetInnerHTML={{__html: t("heroDescription")}}/>
             </section>
-
 
             {/*Contact Form*/}
@@ -61,16 +51,14 @@
                     relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
                         <div className="flex flex-col gap-2 items-start text-left">
-                            <h2 className="text-2xl font-semibold whitespace-nowrap">Contact Information</h2>
-                            <p className="text-white/80 font-light text-sm">
-                                Complete the form and our team will respond shortly to help you take the next step.
-                            </p>
+                            <h2 className="text-2xl font-semibold whitespace-nowrap">{t("contactInfoTitle")}</h2>
+                            <p className="text-white/80 font-light text-sm">{t("contactInfoDescription")}</p>
                         </div>
                         <div className="flex gap-4 items-center">
                             <Mail size={24} color="var(--color-white)"/>
-                            contact@shift-er.com
+                            {t("contactEmail")}
                         </div>
                         <div className="flex gap-4 items-center">
                             <MapPin size={24} color="var(--color-white)"/>
-                            Skopje, N. Macedonia
+                            {t("contactLocation")}
                         </div>
 
@@ -83,62 +71,57 @@
                     {/*Form*/}
                     <div className="flex flex-col gap-4 col-span-2">
-                        <div className="flex justify-betwee gap-20 items-center">
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">Name: <span
-                                className="text-black-text font-normal">{user?.name}</span></p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">Email: <span
-                                className="text-black-text font-normal">{user?.email}</span></p>
-                            <p className="text-black/40 text-sm col-span-2">
-                                These values are automatically populated from your profile.
-                                If any of them are incorrect, please update them in the Profile page.
+                        <div className="grid grid-cols-2 gap-4 items-center">
+                            <p className="text-black/40 text-xs col-span-2">{t("autoFilledNote")}</p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">
+                                {t("name")}: <span className="text-black-text font-normal">{user?.name}</span>
+                            </p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">
+                                {t("email")}: <span className="text-black-text font-normal">{user?.email}</span>
                             </p>
                         </div>
 
-                        <hr className="border-t-2 border-black/20"/>
+                        <hr className="border-t-1 border-black/20 rounded-full"/>
 
                         <form
                             onSubmit={handleSubmit}
                             className="flex flex-col gap-4 items-start">
-                            <TextInput
-                                label="Your Subject"
-                                name="subject"
-                                placeholder="Enter the subject of your message"
-                                rows={1}
-                                onChange={(e) => setSubject(e.target.value)}
-                            />
-                            <TextInput
-                                label="Message"
-                                name="message"
-                                placeholder="Write your message here..."
-                                rows={8}
-                                onChange={(e) => setMessage(e.target.value)}
-                            />
-                            {
-                                error && (
-                                    <p className="text-red-500 text-md font-medium text-center">
-                                        {error}
-                                    </p>
-                                )
-                            }
+                            <div className="flex flex-col gap-4 items-center w-full">
+                                <TextInput
+                                    label={t("subjectLabel")}
+                                    name="subject"
+                                    placeholder={t("subjectPlaceholder")}
+                                    rows={1}
+                                    onChange={(e) => setSubject(e.target.value)}
+                                />
+                                <TextInput
+                                    label={t("messageLabel")}
+                                    name="message"
+                                    placeholder={t("messagePlaceholder")}
+                                    rows={8}
+                                    onChange={(e) => setMessage(e.target.value)}
+                                />
+                                {
+                                    error && (
+                                        <p className="text-red-500 text-md font-medium text-center">
+                                            {error}
+                                        </p>
+                                    )
+                                }
+                            </div>
                             {
                                 isMessageSent ? (
                                     <div className="text-center w-full">
-                                        <h2 className="text-xl font-bold text-shifter mb-2">
-                                            Your message has been sent successfully!
-                                        </h2>
-                                        <p className="text-md font-medium text-black/80 max-w-xl mx-auto">
-                                            Thank you for reaching out to us. Our team will review your message and get
-                                            back to you as soon as possible.
-                                            Keep an eye on your <span className="font-semibold text-shifter">inbox for our reply</span>.
-                                        </p>
+                                        <h2 className="text-xl font-bold text-shifter mb-2">{t("messageSentTitle")}</h2>
+                                        <p className="text-md font-medium text-black/80 max-w-xl mx-auto" dangerouslySetInnerHTML={{__html: t("messageSentDescription")}}/>
                                     </div>
                                 ) : (
                                     <div className="flex items-center gap-6">
                                         <button
-                                            className="hover:shadow-shifter/40 transition-all duration-200 ease-in-out
+                                            className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out
                                     disabled:cursor-not-allowed disabled:opacity-60
-                                    shadow-md shadow-shifter/20 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
+                                    shadow-md shadow-shifter/40 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
                                             disabled={loading}
                                             type="submit">
-                                            {loading ? "Sending..." : "Send Message"}
+                                            {loading ? t("sending") : t("sendMessage")}
                                         </button>
                                         {
@@ -151,37 +134,4 @@
                 </div>
             </section>
-
-            <footer className="flex justify-between px-horizontal-lg py-vertical-sm ">
-                <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
-                     className="h-12"
-                />
-
-                <div className="flex gap-4 items-center">
-                    <NavbarLink to={"/mentoring"} label={"Mentoring"} className="text-sm"/>
-                    <NavbarLink to={"/consulting"} label={"Consulting"} className="text-sm"/>
-                    <NavbarLink to={"/courses"} label={"Courses"} className="text-sm"/>
-                    <NavbarLink to={"/academies"} label={"Academies"} className="text-sm"/>
-                </div>
-
-                <div className="flex gap-4 ">
-                    <a
-                        href="http://www.google.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                    >
-                        <Linkedin size={20} color="var(--color-shifter)"/>
-                    </a>
-
-                    <a
-                        href="http://www.google.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                    >
-                        <Instagram size={20} color="var(--color-shifter)"/>
-                    </a>
-                </div>
-            </footer>
         </main>
     )
@@ -200,4 +150,5 @@
             <span className="text-black/40 font-semibold text-md peer-focused:text-shifter">{label}</span>
             <textarea
+                required
                 onChange={onChange}
                 rows={rows}
@@ -212,3 +163,3 @@
 }
 
-export default Academies
+export default Academies;
Index: frontend/src/pages/Consulting.tsx
===================================================================
--- frontend/src/pages/Consulting.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Consulting.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,21 +1,19 @@
-import {Instagram, Linkedin, Mail, MapPin} from "lucide-react"
-import React from "react";
-import {useAuthContext} from "../context/AuthContext.tsx";
+import { Mail, MapPin } from "lucide-react";
+import { useState } from "react";
+import { useAuthContext } from "../context/AuthContext.tsx";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
-import Arrow from "../../public/Shifter-Arrow-White.png"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import NavbarLink from "../components/NavbarLink.tsx";
-import {sendEmailApi} from "../api/contactApi.ts";
+import Arrow from "../../public/Shifter-Arrow-White.png";
+import { sendEmailApi } from "../api/contactApi.ts";
+import { useTranslation } from "react-i18next";
 
 function Consulting() {
-    const {user, accessToken} = useAuthContext();
-    const [subject, setSubject] = React.useState("");
-    const [message, setMessage] = React.useState("");
-    const [loading, setLoading] = React.useState(false);
-    const [error, setError] = React.useState("");
-    const [isMessageSent, setIsMessageSent] = React.useState(false);
+    const { t } = useTranslation("consulting");
+    const { user, accessToken } = useAuthContext();
+    const [subject, setSubject] = useState("");
+    const [message, setMessage] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+    const [isMessageSent, setIsMessageSent] = useState(false);
 
     const handleSubmit = (e: React.FormEvent) => {
@@ -26,8 +24,8 @@
             .then(() => {
                 setIsMessageSent(true);
-                setError("")
+                setError("");
             })
             .catch((err) => {
-                setError("We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com")
+                setError(t("emailError"));
                 console.error("Error sending email for consulting inquiry:", err);
             })
@@ -38,44 +36,30 @@
         <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
             {/*Hero*/}
-            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg
-                text-white-text">
-                <h1 className="text-5xl font-bold">Personalized Strategic Consulting</h1>
-                <p className="text-xl font-light">
-                    Our consulting engagement ensures maximum client results by operating with <strong
-                    className="font-bold">limited openings. </strong>
-                    This guarantees that every client receives the <strong className="font-bold">undivided
-                    attention</strong> and continuous strategic
-                    execution necessary to deliver <strong className="font-bold">measurable outcomes. </strong>
-                    Submit your inquiry to begin the qualification process for exclusive strategic support.
-                </p>
+            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg text-white-text">
+                <h1 className="text-5xl font-bold">{t("heroTitle")}</h1>
+                <p className="text-xl font-light" dangerouslySetInnerHTML={{ __html: t("heroDescription") }} />
             </section>
 
-
             {/*Contact Form*/}
-            <section className=" flex items-center justify-center w-full px-horizontal-lg">
-                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4
-                    shadow-md shadow-black/10">
-
+            <section className="flex items-center justify-center w-full px-horizontal-lg">
+                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4 shadow-md shadow-black/10">
                     {/*Contact Info*/}
-                    <div className="border-1 border-white/40
-                    relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
+                    <div className="border-1 border-white/40 relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
                         <div className="flex flex-col gap-2 items-start text-left">
-                            <h2 className="text-2xl font-semibold whitespace-nowrap">Contact Information</h2>
-                            <p className="text-white/80 font-light text-sm">
-                                Complete the form and our team will respond shortly to help you take the next step.
-                            </p>
+                            <h2 className="text-2xl font-semibold whitespace-nowrap">{t("contactInfoTitle")}</h2>
+                            <p className="text-white/80 font-light text-sm">{t("contactInfoDescription")}</p>
                         </div>
                         <div className="flex gap-4 items-center">
-                            <Mail size={24} color="var(--color-white)"/>
-                            contact@shift-er.com
+                            <Mail size={24} color="var(--color-white)" />
+                            {t("contactEmail")}
                         </div>
                         <div className="flex gap-4 items-center">
-                            <MapPin size={24} color="var(--color-white)"/>
-                            Skopje, N. Macedonia
+                            <MapPin size={24} color="var(--color-white)" />
+                            {t("contactLocation")}
                         </div>
 
                         <div className="absolute -bottom-26 right-12 flex flex-col opacity-40 rotate-40">
-                            <img src={Arrow} className="w-28 h-auto" alt="Shifter Arrow"/>
-                            <img src={Arrow} className="w-28 h-auto rotate-180" alt="Shifter Arrow"/>
+                            <img src={Arrow} className="w-28 h-auto" alt="Shifter Arrow" />
+                            <img src={Arrow} className="w-28 h-auto rotate-180" alt="Shifter Arrow" />
                         </div>
                     </div>
@@ -83,111 +67,61 @@
                     {/*Form*/}
                     <div className="flex flex-col gap-4 col-span-2">
-                        <div className="flex justify-betwee gap-20 items-center">
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">Name: <span
-                                className="text-black-text font-normal">{user?.name}</span></p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">Email: <span
-                                className="text-black-text font-normal">{user?.email}</span></p>
-                            <p className="text-black/40 text-sm col-span-2">
-                                These values are automatically populated from your profile.
-                                If any of them are incorrect, please update them in the Profile page.
+                        <div className="grid grid-cols-2 gap-4 items-center">
+                            <p className="text-black/40 text-xs col-span-2">{t("autoFilledNote")}</p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
+                                {t("name")}: <span className="text-black-text font-normal">{user?.name}</span>
+                            </p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
+                                {t("email")}: <span className="text-black-text font-normal">{user?.email}</span>
                             </p>
                         </div>
 
-                        <hr className="border-t-2 border-black/20"/>
+                        <hr className="border-t-1 border-black/20 rounded-full" />
 
-                        <form
-                            onSubmit={handleSubmit}
-                            className="flex flex-col gap-4 items-start">
-                            <TextInput
-                                label="Your Subject"
-                                name="subject"
-                                placeholder="Enter the subject of your message"
-                                rows={1}
-                                onChange={(e) => setSubject(e.target.value)}
-                            />
-                            <TextInput
-                                label="Message"
-                                name="message"
-                                placeholder="Write your message here..."
-                                rows={8}
-                                onChange={(e) => setMessage(e.target.value)}
-                            />
-                            {
-                                error && (
-                                    <p className="text-red-500 text-md font-medium text-center">
-                                        {error}
-                                    </p>
-                                )
-                            }
-                            {
-                                isMessageSent ? (
-                                    <div className="text-center w-full">
-                                        <h2 className="text-xl font-bold text-shifter mb-2">
-                                            Your message has been sent successfully!
-                                        </h2>
-                                        <p className="text-md font-medium text-black/80 max-w-xl mx-auto">
-                                            Thank you for reaching out to us. Our team will review your message and get
-                                            back to you as soon as possible.
-                                            Keep an eye on your <span className="font-semibold text-shifter">inbox for our reply</span>.
-                                        </p>
-                                    </div>
-                                ) : (
-                                    <div className="flex items-center gap-6">
-                                        <button
-                                            className="hover:shadow-shifter/40 transition-all duration-200 ease-in-out
-                                    disabled:cursor-not-allowed disabled:opacity-60
-                                    shadow-md shadow-shifter/20 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
-                                            disabled={loading}
-                                            type="submit">
-                                            {loading ? "Sending..." : "Send Message"}
-                                        </button>
-                                        {
-                                            loading && <div className="loader"/>
-                                        }
-                                    </div>
-                                )}
+                        <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start">
+                            <div className="flex flex-col gap-4 items-center w-full">
+                                <TextInput
+                                    label={t("subjectLabel")}
+                                    name="subject"
+                                    placeholder={t("subjectPlaceholder")}
+                                    rows={1}
+                                    onChange={(e) => setSubject(e.target.value)}
+                                />
+                                <TextInput
+                                    label={t("messageLabel")}
+                                    name="message"
+                                    placeholder={t("messagePlaceholder")}
+                                    rows={8}
+                                    onChange={(e) => setMessage(e.target.value)}
+                                />
+                                {error && <p className="text-red-500 text-md font-medium text-center">{error}</p>}
+                            </div>
+
+                            {isMessageSent ? (
+                                <div className="text-center w-full">
+                                    <h2 className="text-xl font-bold text-shifter mb-2">{t("messageSentTitle")}</h2>
+                                    <p className="text-md font-medium text-black/80 max-w-xl mx-auto" dangerouslySetInnerHTML={{ __html: t("messageSentDescription") }} />
+                                </div>
+                            ) : (
+                                <div className="flex items-center gap-6">
+                                    <button
+                                        className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60 shadow-md shadow-shifter/40 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
+                                        disabled={loading}
+                                        type="submit"
+                                    >
+                                        {loading ? t("sending") : t("sendMessage")}
+                                    </button>
+                                    {loading && <div className="loader" />}
+                                </div>
+                            )}
                         </form>
                     </div>
                 </div>
             </section>
-
-            <footer className="flex justify-between px-horizontal-lg py-vertical-sm ">
-                <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
-                     className="h-12"
-                />
-
-                <div className="flex gap-4 items-center">
-                    <NavbarLink to={"/mentoring"} label={"Mentoring"} className="text-sm"/>
-                    <NavbarLink to={"/consulting"} label={"Consulting"} className="text-sm"/>
-                    <NavbarLink to={"/courses"} label={"Courses"} className="text-sm"/>
-                    <NavbarLink to={"/academies"} label={"Academies"} className="text-sm"/>
-                </div>
-
-                <div className="flex gap-4 ">
-                    <a
-                        href="http://www.google.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                    >
-                        <Linkedin size={20} color="var(--color-shifter)"/>
-                    </a>
-
-                    <a
-                        href="http://www.google.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                    >
-                        <Instagram size={20} color="var(--color-shifter)"/>
-                    </a>
-                </div>
-            </footer>
         </main>
-    )
+    );
 }
 
-
-function TextInput({label, name, placeholder, rows, onChange}: {
+function TextInput({ label, name, placeholder, rows, onChange }: {
     label: string;
     name: string;
@@ -200,15 +134,14 @@
             <span className="text-black/40 font-semibold text-md peer-focused:text-shifter">{label}</span>
             <textarea
+                required
                 onChange={onChange}
                 rows={rows}
                 name={name}
-                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm
-                resize-none min-h-fit custom-scrollbar
-                focus:outline-none focus:border-shifter/40 focus:border-2"
+                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm resize-none min-h-fit custom-scrollbar focus:outline-none focus:border-shifter/40 focus:border-2"
                 placeholder={placeholder}
             />
         </label>
-    )
+    );
 }
 
-export default Consulting
+export default Consulting;
Index: frontend/src/pages/Contact.tsx
===================================================================
--- frontend/src/pages/Contact.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Contact.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,16 +1,14 @@
-import {Instagram, Linkedin, Mail, MapPin} from "lucide-react"
+import { Mail, MapPin } from "lucide-react";
 import React from "react";
-import {useAuthContext} from "../context/AuthContext.tsx";
+import { useTranslation } from "react-i18next";
+import { useAuthContext } from "../context/AuthContext.tsx";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
-import Arrow from "../../public/Shifter-Arrow-White.png"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import NavbarLink from "../components/NavbarLink.tsx";
-import {sendEmailApi} from "../api/contactApi.ts";
+import Arrow from "../../public/Shifter-Arrow-White.png";
+import { sendEmailApi } from "../api/contactApi.ts";
 
 function Contact() {
-    const {user, accessToken} = useAuthContext();
+    const { t } = useTranslation("contact");
+    const { user, accessToken } = useAuthContext();
     const [subject, setSubject] = React.useState("");
     const [message, setMessage] = React.useState("");
@@ -26,50 +24,38 @@
             .then(() => {
                 setIsMessageSent(true);
-                setError("")
+                setError("");
             })
             .catch((err) => {
-                setError("We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com")
+                setError(t("form.sendingError"));
                 console.error("Error sending email for contact form:", err);
             })
-            .finally(() => {
-                setLoading(false)
-            });
-    }
+            .finally(() => setLoading(false));
+    };
 
     return (
         <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
-            {/*Hero*/}
-            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg
-                text-white-text">
-                <h1 className="text-5xl font-bold">Transform Your Vision into Results</h1>
-                <p className="text-xl font-light">
-                    Complete the form and our team will respond shortly to help you take the next step.
-                </p>
+            {/* Hero */}
+            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg text-white-text">
+                <h1 className="text-5xl font-bold">{t("hero.title")}</h1>
+                <p className="text-xl font-light">{t("hero.description")}</p>
             </section>
 
-
-            {/*Contact Form*/}
-            <section className=" flex items-center justify-center w-full px-horizontal-lg">
-                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4
-                    shadow-md shadow-black/10">
-
-                    {/*Contact Info*/}
-                    <div className="border-1 border-white/40
-                    relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
+            {/* Contact Form */}
+            <section className="flex items-center justify-center w-full px-horizontal-lg">
+                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4 shadow-md shadow-black/10">
+                    {/* Contact Info */}
+                    <div className="border-1 border-white/40 relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
                         <div className="flex flex-col gap-2 items-start text-left">
-                            <h2 className="text-2xl font-semibold whitespace-nowrap">Contact Information</h2>
-                            <p className="text-white/80 font-light text-sm">
-                                Complete the form and our team will respond shortly to help you take the next step.
-                            </p>
+                            <h2 className="text-2xl font-semibold whitespace-nowrap">{t("info.title")}</h2>
+                            <p className="text-white/80 font-light text-sm">{t("info.description")}</p>
                         </div>
                         <div className="flex gap-4 items-center">
                             <Mail size={24} color="var(--color-white)" />
-                            contact@shift-er.com
+                            {t("info.email")}
                         </div>
                         <div className="flex gap-4 items-center">
                             <MapPin size={24} color="var(--color-white)" />
-                            Skopje, N. Macedonia
+                            {t("info.location")}
                         </div>
-
                         <div className="absolute -bottom-26 right-12 flex flex-col opacity-40 rotate-40">
                             <img src={Arrow} className="w-28 h-auto" alt="Shifter Arrow" />
@@ -78,135 +64,79 @@
                     </div>
 
-                    {/*Form*/}
+                    {/* Form */}
                     <div className="flex flex-col gap-4 col-span-2">
-                        <div className="flex justify-betwee gap-20 items-center">
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">Name: <span
-                                className="text-black-text font-normal">{user?.name}</span></p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">Email: <span
-                                className="text-black-text font-normal">{user?.email}</span></p>
-                            <p className="text-black/40 text-sm col-span-2">
-                                These values are automatically populated from your profile.
-                                If any of them are incorrect, please update them in the Profile page.
+                        <div className="grid grid-cols-2 gap-4 items-center">
+                            <p className="text-black/40 text-xs col-span-2">{t("profileNotice")}</p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
+                                Name: <span className="text-black-text font-normal">{user?.name}</span>
+                            </p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
+                                Email: <span className="text-black-text font-normal">{user?.email}</span>
                             </p>
                         </div>
 
-                        <hr className="border-t-2 border-black/20"/>
+                        <hr className="border-t-1 border-black/20 rounded-full" />
 
-                        <form
-                            onSubmit={handleSubmit}
-                            className="flex flex-col gap-4 items-start">
-                            <TextInput
-                                label="Your Subject"
-                                name="subject"
-                                placeholder="Enter the subject of your message"
-                                rows={1}
-                                onChange={(e) => setSubject(e.target.value)}
-                            />
-                            <TextInput
-                                label="Message"
-                                name="message"
-                                placeholder="Write your message here..."
-                                rows={8}
-                                onChange={(e) => setMessage(e.target.value)}
-                            />
-                            {
-                                error && (
-                                    <p className="text-red-500 text-md font-medium text-center">
-                                        {error}
+                        <form onSubmit={handleSubmit} className="flex flex-col gap-12 items-start">
+                            <div className="flex flex-col gap-4 items-center w-full">
+                                <TextInput
+                                    label={t("form.subject")}
+                                    name="subject"
+                                    placeholder={t("form.subjectPlaceholder")}
+                                    rows={1}
+                                    onChange={(e) => setSubject(e.target.value)}
+                                />
+                                <TextInput
+                                    label={t("form.message")}
+                                    name="message"
+                                    placeholder={t("form.messagePlaceholder")}
+                                    rows={8}
+                                    onChange={(e) => setMessage(e.target.value)}
+                                />
+                                {error && <p className="text-red-500 text-md font-medium text-center">{error}</p>}
+                            </div>
+
+                            {isMessageSent ? (
+                                <div className="text-center w-full">
+                                    <h2 className="text-xl font-bold text-shifter mb-2">{t("form.successTitle")}</h2>
+                                    <p className="text-md font-medium text-black/80 max-w-xl mx-auto">
+                                        {t("form.successDescription")}
                                     </p>
-                                )
-                            }
-                            {
-                                isMessageSent ? (
-                                    <div className="text-center w-full">
-                                        <h2 className="text-xl font-bold text-shifter mb-2">
-                                            Your message has been sent successfully!
-                                        </h2>
-                                        <p className="text-md font-medium text-black/80 max-w-xl mx-auto">
-                                            Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible.
-                                            Keep an eye on your <span className="font-semibold text-shifter">inbox for our reply</span>.
-                                        </p>
-                                    </div>
-                                ) : (
-                                    <div className="flex items-center gap-6">
-                                        <button
-                                            className="hover:shadow-shifter/40 transition-all duration-200 ease-in-out
-                                    disabled:cursor-not-allowed disabled:opacity-60
-                                    shadow-md shadow-shifter/20 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
-                                            disabled={loading}
-                                            type="submit">
-                                            {loading ? "Sending..." : "Send Message"}
-                                        </button>
-                                        {
-                                            loading && <div className="loader" />
-                                        }
-                                    </div>
-                                )
-                            }
+                                </div>
+                            ) : (
+                                <div className="flex items-center gap-6">
+                                    <button
+                                        className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60 shadow-md shadow-shifter/40 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
+                                        disabled={loading}
+                                        type="submit"
+                                    >
+                                        {loading ? t("form.sending") : t("form.sendButton")}
+                                    </button>
+                                    {loading && <div className="loader" />}
+                                </div>
+                            )}
                         </form>
                     </div>
                 </div>
             </section>
-
-            <footer className="flex justify-between px-horizontal-lg py-vertical-sm ">
-                <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
-                     className="h-12"
-                />
-
-                <div className="flex gap-4 items-center">
-                    <NavbarLink to={"/mentoring"} label={"Mentoring"} className="text-sm"/>
-                    <NavbarLink to={"/consulting"} label={"Consulting"} className="text-sm"/>
-                    <NavbarLink to={"/courses"} label={"Courses"} className="text-sm"/>
-                    <NavbarLink to={"/academies"} label={"Academies"} className="text-sm"/>
-                </div>
-
-                <div className="flex gap-4 ">
-                    <a
-                        href="http://www.google.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                    >
-                        <Linkedin size={20} color="var(--color-shifter)"/>
-                    </a>
-
-                    <a
-                        href="http://www.google.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                    >
-                        <Instagram size={20} color="var(--color-shifter)"/>
-                    </a>
-                </div>
-            </footer>
         </main>
-    )
+    );
 }
 
-
-function TextInput({label, name, placeholder, rows, onChange}: {
-    label: string;
-    name: string;
-    placeholder: string;
-    rows: number;
-    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}) {
+function TextInput({ label, name, placeholder, rows, onChange }: { label: string; name: string; placeholder: string; rows: number; onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void }) {
     return (
         <label className="w-full flex flex-col items-start gap-2">
             <span className="text-black/40 font-semibold text-md peer-focused:text-shifter">{label}</span>
             <textarea
-                required={true}
+                required
                 onChange={onChange}
                 rows={rows}
                 name={name}
-                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm
-                resize-none min-h-fit custom-scrollbar
-                focus:outline-none focus:border-shifter/40 focus:border-2"
+                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm resize-none min-h-fit custom-scrollbar focus:outline-none focus:border-shifter/40 focus:border-2"
                 placeholder={placeholder}
             />
         </label>
-    )
+    );
 }
 
-export default Contact
+export default Contact;
Index: frontend/src/pages/CourseDetails.tsx
===================================================================
--- frontend/src/pages/CourseDetails.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/CourseDetails.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -55,5 +55,5 @@
 
     return (
-        <main className="bg-white">
+        <main className="bg-beige text-black-text">
             {
                 (authLoading || loading) ?
@@ -66,5 +66,5 @@
                         <HeroCourseDetails course={course} enrollUser={enroll}/>
                         <CourseDetailsInfo course={course}/>
-                        <CoursesCarouselCourseDetails/>
+                        <CoursesCarouselCourseDetails courseId={course.id}/>
                     </>
             }
Index: frontend/src/pages/Courses.tsx
===================================================================
--- frontend/src/pages/Courses.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Courses.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,8 +1,11 @@
-import React, {useEffect, useMemo, useState} from "react";
+import {useEffect, useMemo, useState} from "react";
+import { useTranslation } from "react-i18next";
 import CoursesFilters from "../components/CoursesFilters.tsx";
 import CoursesGrid from "../components/CoursesGrid.tsx";
 import type {FilterParams} from "../models/FilterParams.tsx";
 import {fetchCoursesApi} from "../api/courseApi.ts";
-import ShifterRocket from "../../public/Rocket-Blue-Fire.png"
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterRocket from "../../public/Rocket-Blue-Fire.png";
 import {useCourseStorage} from "../context/CourseStorage.ts";
 import type {CoursePreview} from "../models/javaObjects/CoursePreview.tsx";
@@ -39,4 +42,5 @@
 
 function Courses() {
+    const { t } = useTranslation("courses");
     const navigate = useNavigate();
     const location = useLocation();
@@ -44,7 +48,6 @@
     const {allCourses, setAllCourses} = useCourseStorage();
 
-    const [courses, setCourses] = React.useState<CoursePreview[] | null>(null);
+    const [courses, setCourses] = useState<CoursePreview[] | null>(null);
     const [loading, setLoading] = useState<boolean>(false);
-
     const [filters, setFilters] = useState<FilterParams>(getInitialFiltersFromSearch(location.search));
 
@@ -58,5 +61,4 @@
     );
 
-    // Effect to initialize courses
     useEffect(() => {
         const storedCourses = getFromSessionStorage<typeof allCourses>("allCourses");
@@ -68,18 +70,13 @@
         setLoading(true);
         fetchCoursesApi(accessToken || "")
-            .then(resCourses => {
-                setAllCourses(resCourses);
-            })
-            .catch(err => {
-                console.error("Failed to fetch courses:", err);
-            })
+            .then(resCourses => setAllCourses(resCourses))
+            .catch(err => console.error("Failed to fetch courses:", err))
             .finally(() => setLoading(false));
-    }, [authLoading])
-    
+    }, [authLoading]);
+
     useEffect(() => {
         saveToSessionStorage("allCourses", allCourses);
-    }, [allCourses])
-
-    // Effect to filter courses based on filters and favorites
+    }, [allCourses]);
+
     useEffect(() => {
         if (!allCourses) return;
@@ -87,5 +84,4 @@
         let filteredCourses = [...allCourses];
 
-        // Apply search filter
         if (filters.search) {
             filteredCourses = filteredCourses.filter(course =>
@@ -99,6 +95,5 @@
         }
 
-        // Apply skill filter
-        if (filters.skill && filters.skill.length > 0) {
+        if (filters.skill?.length) {
             filteredCourses = filteredCourses.filter(course =>
                 filters.skill!.some(skill => course.skillsGained.includes(skill))
@@ -106,6 +101,5 @@
         }
 
-        // Apply topic filter
-        if (filters.topic && filters.topic.length > 0) {
+        if (filters.topic?.length) {
             filteredCourses = filteredCourses.filter(course =>
                 filters.topic!.some(topic => course.topicsCovered.includes(topic))
@@ -113,6 +107,5 @@
         }
 
-        // Apply difficulty filter
-        if (filters.difficulty && filters.difficulty.length > 0) {
+        if (filters.difficulty?.length) {
             filteredCourses = filteredCourses.filter(course =>
                 filters.difficulty!.includes(course.difficulty)
@@ -120,53 +113,38 @@
         }
 
-        // Apply price filter
-        if (filters.price && filters.price.length > 0) {
-            filteredCourses = filteredCourses.filter(course => {
-                return filters.price!.some(priceRange => {
+        if (filters.price?.length) {
+            filteredCourses = filteredCourses.filter(course =>
+                filters.price!.some(priceRange => {
                     const price = course.price;
-
                     switch (priceRange) {
-                        case "free":
-                            return price === 0;
-                        case "low": // < $20
-                            return price > 0 && price < 20;
-                        case "medium": // $20 - $50
-                            return price >= 20 && price <= 50;
-                        case "high": // $50+
-                            return price > 50;
-                        default:
-                            return false;
+                        case "free": return price === 0;
+                        case "low": return price > 0 && price < 20;
+                        case "medium": return price >= 20 && price <= 50;
+                        case "high": return price > 50;
+                        default: return false;
                     }
-                });
-            });
-        }
-
-        // Apply duration filter
-        if (filters.duration && filters.duration.length > 0) {
-            filteredCourses = filteredCourses.filter(course => {
-                return filters.duration!.some(durationRange => {
+                })
+            );
+        }
+
+        if (filters.duration?.length) {
+            filteredCourses = filteredCourses.filter(course =>
+                filters.duration!.some(durationRange => {
                     const minutes = course.durationMinutes;
-
                     switch (durationRange) {
-                        case "extraShort": // < 3 hours
-                            return minutes < 60 * 3;
-                        case "short": // 3-6 hours
-                            return minutes >= 60 * 3 && minutes < 60 * 6;
-                        case "medium": // 6-10 hours
-                            return minutes >= 60 * 6 && minutes < 60 * 10;
-                        case "long": // 10+ hours
-                            return minutes >= 60 * 10;
-                        default:
-                            return false;
+                        case "extraShort": return minutes < 60 * 3;
+                        case "short": return minutes >= 60 * 3 && minutes < 60 * 6;
+                        case "medium": return minutes >= 60 * 6 && minutes < 60 * 10;
+                        case "long": return minutes >= 60 * 10;
+                        default: return false;
                     }
-                });
-            });
-        }
-
-        // Apply favorites filter
+                })
+            );
+        }
+
         if (filters.showOnlyFavoriteCourses) {
             filteredCourses = filteredCourses.filter(course =>
                 user?.favoriteCourses.includes(course.id)
-            )
+            );
         }
 
@@ -174,9 +152,6 @@
     }, [allCourses, filters, user?.favoriteCourses]);
 
-    // Effect to change url params based on filters
     useEffect(() => {
         const noFiltersApplied = Object.keys(filters).length === 0;
-
-        // Clear URL query params
         if (noFiltersApplied) {
             navigate({pathname: location.pathname, search: ""}, {replace: true});
@@ -184,6 +159,4 @@
         }
 
-
-        // Add URL query params from filters
         const paramsToUrl = new URLSearchParams();
         Object.entries(filters).forEach(([key, value]) => {
@@ -195,49 +168,42 @@
         });
         navigate({pathname: location.pathname, search: paramsToUrl.toString()}, {replace: true});
-
     }, [filters]);
 
     return (
         <main className="font-montserrat bg-white">
-            <section
-                className="relative flex flex-col items-center justify-center py-vertical-lg pt-top-nav-md gap-4 px-horizontal-lg shadow-sm">
+            <section className="relative flex flex-col items-center justify-center py-vertical-lg pt-top-nav-md gap-4 px-horizontal-lg shadow-sm">
                 <img
                     src={ShifterRocket}
-                    alt="Shifter Rocket"
+                    alt={t("rocketAlt")}
                     className="absolute top-top-nav-sm left-20 rotate-45 w-16 h-auto"
                 />
                 <h1 className="text-6xl">
-                    Ready to Take the
+                    {t("title")}
                     <br/>
-                    <strong className="text-shifter">Next Step?</strong>
+                    <strong className="text-shifter">{t("highlight")}</strong>
                 </h1>
-                <p>
-                    Explore courses designed not just to teach — but to shift your mindset, sharpen your skills, and
-                    accelerate your journey toward real impact. Whether you're scaling a business, leading a team, or
-                    growing as a professional, this is where transformation begins.
-                </p>
+                <p>{t("description")}</p>
             </section>
-            {
-                (authLoading || loading) ? (
-                    <section className="flex gap-0 w-full">
-                        <CoursesFiltersSkeleton />
-                        <CoursesGridSkeleton />
-                    </section>
-                ) : (
-                    <section className="flex gap-0 w-full">
-                        <CoursesFilters
-                            filters={filters}
-                            setFilters={setFilters}
-                            topics={topics}
-                            skills={skills}
-                        />
-                        <CoursesGrid
-                            setFilters={setFilters}
-                            filters={filters}
-                            courses={courses}
-                        />
-                    </section>
-                )
-            }
+
+            {(authLoading || loading) ? (
+                <section className="flex gap-0 w-full">
+                    <CoursesFiltersSkeleton />
+                    <CoursesGridSkeleton />
+                </section>
+            ) : (
+                <section className="flex gap-0 w-full">
+                    <CoursesFilters
+                        filters={filters}
+                        setFilters={setFilters}
+                        topics={topics}
+                        skills={skills}
+                    />
+                    <CoursesGrid
+                        setFilters={setFilters}
+                        filters={filters}
+                        courses={courses}
+                    />
+                </section>
+            )}
         </main>
     );
Index: frontend/src/pages/FreeConsultation.tsx
===================================================================
--- frontend/src/pages/FreeConsultation.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/FreeConsultation.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -3,9 +3,8 @@
 import {fetchExpertFreeTimeSlotsApi, scheduleMeetingApi} from "../api/meetingApi.ts";
 import type {UserMeetingInfoRequest} from "../models/UserMeetingInfoRequest.tsx";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterArrow from "../../public/Shifter-Arrow-White.png"
+import { useTranslation } from "react-i18next";
 
 function FreeConsultation() {
+    const { t } = useTranslation("freeConsultation");
     const {user, setUser, accessToken, authChecked} = useAuthContext();
     const [loadingDateTime, setLoadingDateTime] = useState(true);
@@ -26,5 +25,5 @@
         e.preventDefault();
         if (!selectedDate || !selectedTime) {
-            setError("Please select both date and time.");
+            setError(t("errors.selectDateTime"));
             return;
         }
@@ -41,8 +40,8 @@
             .catch(error => {
                 console.error("Error scheduling meeting:", error);
-                if (error.response.data.message === "User has already used free consultation")
-                    setError('We couldn’t schedule your meeting. It appears you’ve already used your free consultation. Feel free to get in touch with us through our Contact page for more options.');
+                if (error.response?.data?.message === "User has already used free consultation")
+                    setError(t("errors.alreadyUsed"));
                 else
-                    setError("Failed to schedule the meeting. Please try again later or contact support.");
+                    setError(t("errors.failedSchedule"));
             })
             .finally(() => setLoadingSubmitForm(false));
@@ -50,187 +49,116 @@
 
     useEffect(() => {
-        if (!authChecked || !accessToken)
-            return;
+        if (!authChecked || !accessToken) return;
 
         setLoadingDateTime(true);
         fetchExpertFreeTimeSlotsApi(accessToken)
-            .then(data => {
-                console.log("Available time slots:", data);
-                setFreeSlots(data)
-            })
-            .catch(error => {
-                console.error("Error fetching time slots:", error);
-            })
+            .then(data => setFreeSlots(data))
+            .catch(error => console.error("Error fetching time slots:", error))
             .finally(() => setLoadingDateTime(false));
-    }, []);
+    }, [authChecked, accessToken]);
+
+    // Assert type for TypeScript
+    const steps = t("nextSteps.steps", { returnObjects: true }) as { title: string; description: string }[];
 
     return (
-        <main className="">
-            {/*HERO*/}
-            <section
-                style={{paddingTop: 'calc(var(--spacing-top-nav-lg) + 4rem)'}}
-                className="relative bg-dark-blue text-white w-full px-horizontal-lg py-vertical-lg pt-top-nav-lg text-left overflow-x-clip">
-                <div className="flex flex-col gap-4 w-1/2">
-                    <h1 className="text-5xl font-bold">Book Your Free Expert Session</h1>
-                    <p className="text-xl font-light ">
-                        Talk to an expert about your business goals and challenges.
-                        Get a personalized program recommendation tailored to your needs.
-                    </p>
-                </div>
-
-                <img src={ShifterArrow} className="absolute right-20 -bottom-20 h-120 rotate-45 opacity-5"/>
+        <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
+            {/*Hero*/}
+            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg text-white-text">
+                <h1 className="text-5xl font-bold">{t("hero.title")}</h1>
+                <p className="text-xl font-light">{t("hero.description")}</p>
             </section>
 
-            <section className="bg-dark-blue/5 flex gap-20 py-vertical-lg px-horizontal-lg text-left">
-                {/*STEPS*/}
-                <div className="flex flex-col gap-12 w-1/3">
-                    <h2 className="text-dark-blue font-bold text-5xl">Next Steps After Submission?</h2>
+            {/*Contact Form*/}
+            <section className="flex items-center justify-center w-full px-horizontal-lg">
+                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4 shadow-md shadow-black/10">
 
-                    <div>
+                    {/*Contact Info*/}
+                    {/*Contact Info*/}
+                    <div className="border-1 border-white/40 relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
+                        <h2 className="text-left text-2xl font-semibold">{t("nextSteps.title")}</h2>
                         <ol className="flex flex-col">
-                            {/*<Step*/}
-                            {/*    title={"Submit Your Request"}*/}
-                            {/*    description={"Share your business challenges and objectives by completing the form. This helps us understand your needs and prepare a personalized session."}*/}
-                            {/*/>*/}
-                            <Step
-                                title={"Your Expert is Assigned"}
-                                description={"We schedule an expert for your session and send you a confirmation email with all the meeting details."}
-                            />
-                            <Step
-                                title={"Expert Prepares for Your Session"}
-                                description={"Your expert reviews the information you provided to create valuable insights and a strategy tailored to your situation."}
-                            />
-                            <Step
-                                title={"Attend Your Personalized Session"}
-                                description={"Join the session and receive actionable guidance along with a program or mentorship recommendation designed specifically for your goals."}
-                                isLast={true}
-                            />
+                            {steps.map((step, idx) => (
+                                <Step
+                                    key={idx}
+                                    title={step.title}
+                                    description={step.description}
+                                    isLast={idx === steps.length - 1}
+                                />
+                            ))}
                         </ol>
                     </div>
-                </div>
 
-                {/*FORM*/}
-                <div className="flex flex-col gap-4 bg-white rounded-xl w-2/3 px-horizontal-sm py-vertical-md ">
-                    {/*Automatically populated*/}
-                    <div className="grid grid-cols-2 gap-y-4">
-                        <p className="text-black/40 col-span-2">
-                            These values are automatically populated from your profile.
-                            If any of them are incorrect, please update them in the Profile page.
-                        </p>
-                        <p className="font-light text-black/60 text-lg ">Name: <span
-                            className="text-black font-medium">{user?.name}</span></p>
-                        <p className="font-light text-black/60 text-lg ">Email: <span
-                            className="text-black font-medium">{user?.email}</span></p>
-                        <p className="font-light text-black/60 text-lg ">Company Type: <span
-                            className="text-black font-medium">{user?.companySize.toLowerCase().split("_").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")}</span>
-                        </p>
-                        <p className="font-light text-black/60 text-lg ">Work Position: <span
-                            className="text-black font-medium">{user?.workPosition}</span></p>
-                    </div>
-
-                    <hr className="border-t-2 border-black/20"/>
 
                     {/*Form*/}
-                    <form
-                        onSubmit={handleScheduleMeeting}
-                        className="flex flex-col gap-6 w-full">
-                        <p className="text-black/40 col-span-2">
-                            <sup>*</sup> These fields are optional. Filling them out helps us better understand your
-                            challenges and objectives, so we can prepare a more personalized session.
-                        </p>
-                        <TextInput
-                            label="About your business"
-                            name="intro"
-                            placeholder="What you do, industry, customers"
-                            onChange={(e) => setUserMeetingInfo({...userMeetingInfo, aboutCompany: e.target.value})}
-                        />
-                        <TextInput
-                            label="Your current challenges"
-                            name="challenges"
-                            placeholder="E.g. sales, growth, team issues"
-                            onChange={(e) => setUserMeetingInfo({...userMeetingInfo, challenges: e.target.value})}
-                        />
-                        <TextInput
-                            label="What you want from the session"
-                            name="expectations"
-                            placeholder="Advice, strategy, solutions"
-                            onChange={(e) => setUserMeetingInfo({...userMeetingInfo, expectations: e.target.value})}
-                        />
-                        <TextInput
-                            label="Anything else"
-                            name="additional"
-                            placeholder="Extra context or details"
-                            onChange={(e) => setUserMeetingInfo({...userMeetingInfo, otherInfo: e.target.value})}
-                        />
-
-                        <hr className="border-t-2 border-black/20"/>
-
-                        <div className="flex justify-between items-center">
-                            {
-                                loadingDateTime ? (
-                                    <>
-                                        <div className="bg-gray-300 animate-pulse py-2 px-8 rounded-sm h-10 w-50"></div>
-                                        <div className="bg-gray-300 animate-pulse py-2 px-8 rounded-sm h-10 w-50"></div>
-                                    </>
-                                ) : (
-                                    <>
-                                        <SelectInput
-                                            value={selectedDate}
-                                            onChange={(e) => setSelectedDate(e.target.value)}
-                                            firstOption={"Select a date"}
-                                            options={Object.keys(freeSlots)}
-                                        />
-                                        <SelectInput
-                                            value={selectedTime}
-                                            onChange={(e) => setSelectedTime(e.target.value)}
-                                            firstOption={"Select a time"}
-                                            options={freeSlots[selectedDate]}
-                                            isDisabled={selectedDate.length === 0}
-                                        />
-                                    </>
-                                )
-                            }
+                    <div className="flex flex-col gap-4 col-span-2">
+                        <div className="grid grid-cols-2 gap-4 items-center">
+                            <p className="text-black/40 text-xs col-span-2">{t("form.profileHint")}</p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">{t("form.name")}: <span className="text-black-text font-normal">{user?.name}</span></p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">{t("form.email")}: <span className="text-black-text font-normal">{user?.email}</span></p>
                         </div>
 
-                        {
-                            error && (
-                                <p className="text-red-500 text-md font-medium text-center">
-                                    {error}
-                                </p>
-                            )
-                        }
-                        {
-                            meetingScheduled ? (
-                                <div className="my-12 text-center">
-                                    <h2 className="text-2xl font-bold text-dark-blue mb-4">
-                                        Your free consultation is scheduled! 🎉
-                                    </h2>
-                                    <p className="text-lg font-medium text-black/80 max-w-xl mx-auto">
-                                        Completing the form was the <span className="font-semibold text-dark-blue">first step toward progress and growth</span>.
-                                        Check your <span className="font-semibold text-dark-blue">email for the Zoom link</span> to continue your journey.
-                                    </p>
+                        <hr className="border-t-1 border-black/20 rounded-full"/>
+
+                        <form onSubmit={handleScheduleMeeting} className="flex flex-col gap-12 items-start">
+                            <div className="flex flex-col gap-4 items-center w-full">
+                                {["aboutCompany","challenges","expectations","otherInfo"].map(field => (
+                                    <TextInput
+                                        key={field}
+                                        label={t(`form.fields.${field}.label`)}
+                                        name={field}
+                                        placeholder={t(`form.fields.${field}.placeholder`)}
+                                        onChange={(e) => setUserMeetingInfo({...userMeetingInfo, [field]: e.target.value})}
+                                    />
+                                ))}
+
+                                <hr className="border-t-1 border-black/20 rounded-full w-full"/>
+                                <div className="flex justify-between items-center w-full">
+                                    {loadingDateTime ? (
+                                        <>
+                                            <div className="bg-gray-300 animate-pulse py-2 px-8 rounded-sm h-10 w-50"></div>
+                                            <div className="bg-gray-300 animate-pulse py-2 px-8 rounded-sm h-10 w-50"></div>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <SelectInput
+                                                value={selectedDate}
+                                                onChange={(e) => setSelectedDate(e.target.value)}
+                                                firstOption={t("form.selectDate")}
+                                                options={Object.keys(freeSlots)}
+                                            />
+                                            <SelectInput
+                                                value={selectedTime}
+                                                onChange={(e) => setSelectedTime(e.target.value)}
+                                                firstOption={t("form.selectTime")}
+                                                options={freeSlots[selectedDate]}
+                                                isDisabled={selectedDate.length === 0}
+                                            />
+                                        </>
+                                    )}
                                 </div>
 
+                                {error && <p className="text-red-500 text-md font-medium text-center">{error}</p>}
+                            </div>
+
+                            {meetingScheduled ? (
+                                <div className="text-center w-full">
+                                    <h2 className="text-xl font-bold text-shifter mb-2">{t("confirmation.title")}</h2>
+                                    <p className="text-md font-medium text-black/80 max-w-xl mx-auto" dangerouslySetInnerHTML={{__html: t("confirmation.description")}}/>
+                                </div>
                             ) : (
-                                <button
-                                    type="submit"
-                                    disabled={loadingSubmitForm}
-                                    className="disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none
-                                    hover:shadow-md hover:shadow-dark-blue/60 transition-all duration-300 ease-in-out
-                                    shadow-sm shadow-dark-blue/30 border-2 border-white/20
-                                    w-full py-2 bg-dark-blue text-white text-lg font-semibold rounded-sm cursor-pointer"
-                                >
-                                    {
-                                        loadingSubmitForm ? (
-                                            <div className="flex justify-center gap-6 items-center">
-                                                Booking...
-                                                <div className="loader-white w-8 h-8"/>
-                                            </div>
-                                        ) : "Book Session"
-                                    }
-                                </button>
-                            )
-                        }
-                    </form>
+                                <div className="flex items-center gap-6">
+                                    <button
+                                        className="hover:shadow-shifter/40 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60 shadow-md shadow-shifter/20 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
+                                        disabled={loadingSubmitForm}
+                                        type="submit"
+                                    >
+                                        {loadingSubmitForm ? t("form.booking") : t("form.book")}
+                                    </button>
+                                    {loadingSubmitForm && <div className="loader"/>}
+                                </div>
+                            )}
+                        </form>
+                        <p className="text-xs text-black/40">{t("form.optionalHint")}</p>
+                    </div>
                 </div>
             </section>
@@ -239,64 +167,29 @@
 }
 
-function TextInput({label, name, placeholder, onChange}: {
-    label: string;
-    name: string;
-    placeholder: string;
-    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}) {
+function TextInput({label, name, placeholder, onChange}: {label:string,name:string,placeholder:string,onChange:(e:React.ChangeEvent<HTMLTextAreaElement>)=>void}) {
     return (
-        <label className="flex flex-col gap-2">
-            <span className="text-black font-semibold text-xl"><sup>*</sup> {label}</span>
-            <textarea
-                onChange={onChange}
-                rows={2}
-                name={name}
-                placeholder={placeholder}
-                className="bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm
-                font-medium resize-none overflow-hidden min-h-fit"
-            />
+        <label className="w-full flex flex-col items-start gap-2 text-black-text">
+            <span className="text-black/40 font-semibold text-md peer-focused:text-shifter"><sup>*</sup> {label}</span>
+            <textarea rows={2} name={name} onChange={onChange} placeholder={placeholder} className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm resize-none min-h-fit custom-scrollbar focus:outline-none focus:border-shifter/40 focus:border-2"/>
         </label>
     )
 }
 
-function SelectInput({value, onChange, firstOption, options, isDisabled}: {
-    value: string;
-    onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-    firstOption: string;
-    options: string[];
-    isDisabled?: boolean;
-}) {
+function SelectInput({value, onChange, firstOption, options, isDisabled}: {value:string,onChange:(e:React.ChangeEvent<HTMLSelectElement>)=>void,firstOption:string,options:string[],isDisabled?:boolean}) {
     return (
-        <select
-            className="disabled:opacity-20 disabled:cursor-not-allowed
-            bg-dark-blue/5 border-1 border-black/10 py-2 px-8 rounded-sm
-                font-medium resize-none overflow-hidden min-h-fit cursor-pointer"
-            disabled={isDisabled}
-            value={value} onChange={onChange}>
-            <option value="">{firstOption}</option>
-            {options?.map((option) => (
-                <option key={option} value={option}>
-                    {option}
-                </option>
-            ))}
+        <select required className={`disabled:opacity-20 disabled:cursor-not-allowed bg-dark-blue/5 border-1 border-black/10 py-1 px-4 rounded-sm ${value ? "text-black-text" : "text-black/40"} resize-none overflow-hidden min-h-fit cursor-pointer`} disabled={isDisabled} value={value} onChange={onChange}>
+            <option value="" className="text-black/40">{firstOption}</option>
+            {options?.map(option => <option key={option} value={option} className="text-black-text">{option}</option>)}
         </select>
-    );
+    )
 }
 
-
-function Step({title, description, isLast}: {
-    title: string;
-    description: string;
-    isLast?: boolean;
-}) {
+function Step({title, description, isLast}: {title:string,description:string,isLast?:boolean}) {
     return (
-        <li className={`${isLast ? 'border-transparent' : ''}
-        relative pl-6 flex gap-4 items-start border-l-4 border-dark-blue/10`}>
-            <div
-                style={{transform: 'translateX(calc(-0.75rem - 2px))'}}
-                className="absolute left-0 top-0 h-[1.5rem] aspect-square bg-dark-blue rounded-full"/>
-            <div className="pb-12">
-                <h3 className="text-xl font-bold text-dark-blue">{title}</h3>
-                <p className="text-black/80">{description}</p>
+        <li className={`${isLast ? 'border-transparent' : ''} relative pl-6 border-l-4 border-white/10`}>
+            <div style={{transform: 'translateX(calc(-0.5rem - 2px))'}} className="absolute left-0 top-0 h-[1rem] aspect-square bg-white rounded-full"/>
+            <div className="pb-8 text-left">
+                <h3 className="text-md font-semibold text-white">{title}</h3>
+                <p className="text-sm text-white/60 font-light">{description}</p>
             </div>
         </li>
Index: frontend/src/pages/Learn.tsx
===================================================================
--- frontend/src/pages/Learn.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Learn.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,7 +1,10 @@
 import {useEnrolledCourses} from "../hooks/useEnrolledCourses.tsx";
-import { useState} from "react";
+import {useState} from "react";
 import {useAuthContext} from "../context/AuthContext.tsx";
-import CourseCardEnrolled from "../components/CourseCardEnrolled.tsx";
+import CourseCardLearnDashboard from "../components/CourseCardLearnDashboard.tsx";
 import CourseCardEnrolledSkeleton from "../components/skeletons/CourseCardEnrolledSkeleton.tsx";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterArrow from "../../public/Shifter-Arrow-White.png";
 
 function Learn() {
@@ -16,11 +19,10 @@
 
     function renderContent() {
-        if (enrolledCourses.length === 0) {
-            return (
-                <h2 className="text-2xl font-semibold text-black/60">
-                    No limits, just potential — enroll in your first course!
-                </h2>
-            );
-        }
+        const noCoursesMessage = {
+            all: "You haven't enrolled in any courses yet!",
+            active: "No active courses — time to start learning!",
+            completed: "Nothing completed yet — keep going!",
+            favorites: "You have no favorites — find courses you love!"
+        };
 
         switch (selectedTab) {
@@ -29,14 +31,17 @@
                     <>
                         {
-                            enrolledCourses.map((course, index) => (
-                                <CourseCardEnrolled
-                                    course={course}
-                                    key={index}
-                                    markCourseAsRated={(rating) => setEnrolledCourses([
-                                        ...enrolledCourses.filter(c => c.id !== course.id),
-                                        {...course, rating: rating}
-                                    ])}
-                                />
-                            ))
+                            enrolledCourses.length > 0 ?
+                                enrolledCourses.map((course, index) => (
+                                    <CourseCardLearnDashboard
+                                        course={course}
+                                        key={index}
+                                        markCourseAsRated={(rating) => setEnrolledCourses([
+                                            ...enrolledCourses.filter(c => c.id !== course.id),
+                                            {...course, rating: rating}
+                                        ])}
+                                    />
+                                )) : (
+                                    <h2 className="text-2xl font-semibold text-black/60 text-left whitespace-nowrap">{noCoursesMessage.all}</h2>
+                                )
                         }
                     </>
@@ -46,17 +51,20 @@
                     <>
                         {
-                            enrolledCourses.map((course, index) => {
-                                if (course.isFinished) return null;
-                                return (
-                                    <CourseCardEnrolled
-                                        course={course}
-                                        key={index}
-                                        markCourseAsRated={(rating) => setEnrolledCourses([
-                                            ...enrolledCourses.filter(c => c.id !== course.id),
-                                            {...course, rating: rating}
-                                        ])}
-                                    />
+                            enrolledCourses.length > 0 ?
+                                enrolledCourses.map((course, index) => {
+                                    if (course.isFinished) return null;
+                                    return (
+                                        <CourseCardLearnDashboard
+                                            course={course}
+                                            key={index}
+                                            markCourseAsRated={(rating) => setEnrolledCourses([
+                                                ...enrolledCourses.filter(c => c.id !== course.id),
+                                                {...course, rating: rating}
+                                            ])}
+                                        />
+                                    )
+                                }) : (
+                                    <h2 className="text-2xl font-semibold text-black/60 text-left whitespace-nowrap">{noCoursesMessage.active}</h2>
                                 )
-                            })
                         }
                     </>
@@ -66,17 +74,18 @@
                     <>
                         {
-                            enrolledCourses.map((course, index) => {
-                                if (!course.isFinished) return null;
-                                return (
-                                    <CourseCardEnrolled
-                                        course={course}
-                                        key={index}
-                                        markCourseAsRated={(rating) => setEnrolledCourses([
-                                            ...enrolledCourses.filter(c => c.id !== course.id),
-                                            {...course, rating: rating}
-                                        ])}
-                                    />
+                            enrolledCourses.filter(course => course.isFinished).length > 0 ?
+                                enrolledCourses.filter(course => course.isFinished).map((course, index) => (
+                                        <CourseCardLearnDashboard
+                                            course={course}
+                                            key={index}
+                                            markCourseAsRated={(rating) => setEnrolledCourses([
+                                                ...enrolledCourses.filter(c => c.id !== course.id),
+                                                {...course, rating: rating}
+                                            ])}
+                                        />
+                                    )
+                                ) : (
+                                    <h2 className="text-2xl font-semibold text-black/60 text-left whitespace-nowrap">{noCoursesMessage.completed}</h2>
                                 )
-                            })
                         }
                     </>
@@ -86,7 +95,13 @@
                     <>
                         {
-                            allCourses.filter(course => user?.favoriteCourses.includes(course.id)).map((course, index) => (
-                                <CourseCardEnrolled course={course} key={index}/>
-                            ))
+                            allCourses.filter(course => user?.favoriteCourses.includes(course.id)).length > 0 ?
+                                allCourses?.filter(course => user?.favoriteCourses.includes(course.id)).map((course, index) => (
+                                    <CourseCardLearnDashboard course={course} key={index}
+                                                              markCourseAsRated={(rating) => {
+                                                                  console.log(rating)
+                                                              }}/>
+                                )) : (
+                                    <h2 className="text-2xl font-semibold text-black/60 text-left whitespace-nowrap">{noCoursesMessage.favorites}</h2>
+                                )
                         }
                     </>
@@ -97,27 +112,39 @@
 
     return (
-        <main className="flex flex-col gap-0">
-            <section className="border-b-2 border-white/40
-            bg-dark-blue text-white px-horizontal-md w-full flex flex-col gap-4 text-left pt-top-nav-lg">
-                <h1 className="text-4xl font-semibold">My Learning</h1>
-                <ul>
-                    <ListTab name={"All"} isSelected={selectedTab === "all"}
-                             setSelectedTab={() => setSelectedTab("all")}/>
-                    <ListTab name={"Active"} isSelected={selectedTab === "active"}
-                             setSelectedTab={() => setSelectedTab("active")}/>
-                    <ListTab name={"Completed"} isSelected={selectedTab === "completed"}
-                             setSelectedTab={() => setSelectedTab("completed")}/>
-                    <ListTab name={"Favorites"} isSelected={selectedTab === "favorites"}
-                             setSelectedTab={() => setSelectedTab("favorites")}/>
-                </ul>
-            </section>
-            <section className="grid grid-cols-4 gap-x-4 gap-y-8 px-horizontal-md py-vertical-md items-stretch">
-                {
-                    loading ?
-                        new Array(8).fill(0).map((_, index) => (
-                            <CourseCardEnrolledSkeleton key={index} />
-                        )) : renderContent()
-                }
-            </section>
+        <main className="flex flex-col flex-1 gap-0 ">
+            <div className="bg-black">
+                <section className="relative border-b-2 border-white/40 overflow-clip
+            bg-shifter/90 shadow-md text-white px-horizontal-md w-full flex flex-col gap-between-sm text-left pt-top-nav-lg">
+
+                    <img
+                        src={ShifterArrow}
+                        alt="Shifter Arrow"
+                        className="absolute right-0 -bottom-24 rotate-45 opacity-20
+                    pointer-events-none w-60 h-auto"
+                    />
+
+                    <h1 className="text-4xl font-semibold">My Learning</h1>
+                    <ul>
+                        <ListTab name={"All"} isSelected={selectedTab === "all"}
+                                 setSelectedTab={() => setSelectedTab("all")}/>
+                        <ListTab name={"Active"} isSelected={selectedTab === "active"}
+                                 setSelectedTab={() => setSelectedTab("active")}/>
+                        <ListTab name={"Completed"} isSelected={selectedTab === "completed"}
+                                 setSelectedTab={() => setSelectedTab("completed")}/>
+                        <ListTab name={"Favorites"} isSelected={selectedTab === "favorites"}
+                                 setSelectedTab={() => setSelectedTab("favorites")}/>
+                    </ul>
+                </section>
+            </div>
+            <div className="flex-1 bg-beige">
+                <section className="grid grid-cols-4 gap-x-4 gap-y-8 px-horizontal-md py-vertical-md items-stretch ">
+                    {
+                        loading ?
+                            new Array(8).fill(0).map((_, index) => (
+                                <CourseCardEnrolledSkeleton key={index}/>
+                            )) : renderContent()
+                    }
+                </section>
+            </div>
         </main>
     )
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Login.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -6,8 +6,9 @@
 import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
 import React from "react";
-import {Eye, EyeOff} from "lucide-react";
-import {Link, useNavigate} from "react-router-dom";
-import {useAuthContext} from "../context/AuthContext.tsx";
+import { Eye, EyeOff } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuthContext } from "../context/AuthContext.tsx";
 import GoogleLoginButton from "../components/GoogleLoginButton.tsx";
+import { useTranslation } from "react-i18next";
 
 interface InputProps {
@@ -22,5 +23,6 @@
 
 function Login() {
-    const {login} = useAuthContext();
+    const { t } = useTranslation("login");
+    const { login } = useAuthContext();
     const [email, setEmail] = React.useState<string>("");
     const [password, setPassword] = React.useState<string>("");
@@ -33,5 +35,5 @@
 
         if (!email || !password) {
-            setError("Please fill in all fields.");
+            setError(t("errors.fillAllFields"));
             return;
         }
@@ -48,5 +50,5 @@
                     setError(err.response.data.message);
                 } else {
-                    setError("Something went wrong. Please try again.");
+                    setError(t("errors.somethingWentWrong"));
                 }
             })
@@ -60,21 +62,10 @@
             {/* LEFT HEADER AND BACKGROUND */}
             <section className="relative bg-black w-[55%] overflow-hidden">
-                <div
-                    className="absolute w-full h-full bg-shifter/80 z-0 text-white px-20 flex flex-col gap-4 justify-center text-start">
-                    <img
-                        src={ShifterArrow}
-                        alt="Shifter Arrow"
-                        className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"
-                    />
-                    <img
-                        src={ShifterArrow}
-                        alt="Shifter Arrow"
-                        className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"
-                    />
+                <div className="absolute w-full h-full bg-shifter/80 z-0 text-white px-20 flex flex-col gap-4 justify-center text-start">
+                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2" />
+                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2" />
 
-                    <h1 className="text-7xl font-semibold z-2">Welcome Back!</h1>
-                    <p className="text-2xl font-light z-2">
-                        Let's unlock your next breakthrough in business!
-                    </p>
+                    <h1 className="text-7xl font-semibold z-2">{t("welcomeBack")}</h1>
+                    <p className="text-2xl font-light z-2">{t("subtitle")}</p>
                 </div>
             </section>
@@ -84,27 +75,15 @@
                 <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
                     <Link to={"/"}>
-                        <img
-                            src={ShifterLogo}
-                            alt="Shifter Logo"
-                            className="w-40 h-auto object-contain"
-                        />
+                        <img src={ShifterLogo} alt="Shifter Logo" className="w-40 h-auto object-contain" />
                     </Link>
-                    <Link
-                        to={"/"}
-                        className="hover:bg-shifter/20 hover:text-shifter underline decoration-current
-                             font-semibold text-black/80 rounded-sm px-4 py-2"
-                    >
-                        Back to Main Page
+                    <Link to={"/"} className="hover:bg-shifter/20 hover:text-shifter underline decoration-current font-semibold text-black/80 rounded-sm px-4 py-2">
+                        {t("backToMain")}
                     </Link>
                 </div>
 
-                <form
-                    onSubmit={handleLogin}
-                    className="flex flex-col justify-center items-center gap-4 w-full"
-                >
-
+                <form onSubmit={handleLogin} className="flex flex-col justify-center items-center gap-4 w-full">
                     <Input
-                        placeholder="name@email.com"
-                        label="Email address"
+                        placeholder={t("emailPlaceholder")}
+                        label={t("emailLabel")}
                         name="email"
                         type="email"
@@ -114,6 +93,6 @@
                     />
                     <Input
-                        placeholder="********"
-                        label="Password"
+                        placeholder={t("passwordPlaceholder")}
+                        label={t("passwordLabel")}
                         name="password"
                         type="password"
@@ -123,46 +102,32 @@
                     />
 
-                    {/* Error Message */}
                     {error && <p className="text-red-500 text-sm">{error}</p>}
 
-                    {/* Buttons */}
                     <div className="flex gap-2 justify-center text-md w-full text-lg mt-4">
                         <button
                             type="submit"
                             disabled={isLoading}
-                            className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer
-                            rounded-md border-3 border-white/50 text-white w-1/3 py-1 bg-shifter font-medium
-                            whitespace-nowrap ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+                            className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer rounded-md border-3 border-white/50 text-white w-1/3 py-1 bg-shifter font-medium whitespace-nowrap ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
                         >
-                            {
-                                isLoading ? "Logging in..." : "Log In"
-                            }
+                            {isLoading ? t("loggingIn") : t("logIn")}
                         </button>
                         <Link
                             to="/register"
-                            className="hover:shadow-md hover:shadow-shifter/20 transition-all duration-200 ease-in-out cursor-pointer
-                            rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium
-                            whitespace-nowrap opacity-80"
+                            className="hover:shadow-md hover:shadow-shifter/20 transition-all duration-200 ease-in-out cursor-pointer rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium whitespace-nowrap opacity-80"
                         >
-                            Register
+                            {t("register")}
                         </Link>
 
-                        {/* Loading Animation */}
-                        {
-                            isLoading && (
-                                <div className="h-full loader"></div>
-                            )
-                        }
+                        {isLoading && <div className="h-full loader"></div>}
                     </div>
-
                 </form>
 
-                <div className="my-4 flex items-center gap-2 w-9/10 text-black opacity-20">
-                    <hr className="border-t-2 border-black w-full"/>
-                    <p>or</p>
-                    <hr className="border-t-2 border-black w-full"/>
+                <div className="my-4 flex items-center gap-2 w-[90%] text-black opacity-20">
+                    <hr className="border-t-2 border-black w-full" />
+                    <p>{t("or")}</p>
+                    <hr className="border-t-2 border-black w-full" />
                 </div>
 
-                <GoogleLoginButton text="Log in with Google"/>
+                <GoogleLoginButton text={t("googleLogin")} />
             </section>
         </main>
@@ -174,6 +139,5 @@
 
     return (
-        <div
-            className="relative flex flex-col gap-1 px-6 py-1.5 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm w-full">
+        <div className="relative flex flex-col gap-1 px-6 py-1.5 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm w-full">
             <label htmlFor={inputProps.id} className="text-shifter text-light">
                 {inputProps.label}
@@ -183,11 +147,5 @@
                     <input
                         id={inputProps.id}
-                        type={
-                            inputProps.name !== "password"
-                                ? "text"
-                                : showPassword
-                                    ? "text"
-                                    : "password"
-                        }
+                        type={inputProps.type === "password" && !showPassword ? "password" : "text"}
                         name={inputProps.name}
                         placeholder={inputProps.placeholder}
@@ -196,7 +154,7 @@
                         onChange={inputProps.onChange}
                     />
-                    <hr className="border-t-2 border-black/5 rounded-full w-full"/>
+                    <hr className="border-t-2 border-black/5 rounded-full w-full" />
                 </div>
-                {inputProps.name === "password" && (
+                {inputProps.type === "password" && (
                     <button
                         type="button"
@@ -205,9 +163,5 @@
                         aria-label={showPassword ? "Hide password" : "Show password"}
                     >
-                        {!showPassword ? (
-                            <EyeOff size={20} opacity={0.6}/>
-                        ) : (
-                            <Eye size={20} opacity={0.6}/>
-                        )}
+                        {!showPassword ? <EyeOff size={20} opacity={0.6} /> : <Eye size={20} opacity={0.6} />}
                     </button>
                 )}
Index: frontend/src/pages/Mentoring.tsx
===================================================================
--- frontend/src/pages/Mentoring.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Mentoring.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -1,16 +1,14 @@
-import {Instagram, Linkedin, Mail, MapPin} from "lucide-react"
+import { Mail, MapPin } from "lucide-react";
 import React from "react";
-import {useAuthContext} from "../context/AuthContext.tsx";
+import { useAuthContext } from "../context/AuthContext.tsx";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
-import Arrow from "../../public/Shifter-Arrow-White.png"
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import NavbarLink from "../components/NavbarLink.tsx";
-import {sendEmailApi} from "../api/contactApi.ts";
+import Arrow from "../../public/Shifter-Arrow-White.png";
+import { sendEmailApi } from "../api/contactApi.ts";
+import { useTranslation } from "react-i18next";
 
 function Mentoring() {
-    const {user, accessToken} = useAuthContext();
+    const { t } = useTranslation("mentoring");
+    const { user, accessToken } = useAuthContext();
     const [subject, setSubject] = React.useState("");
     const [message, setMessage] = React.useState("");
@@ -29,5 +27,5 @@
             })
             .catch((err) => {
-                setError("We’re experiencing a temporary issue with our mail service. Please try again shortly or contact us directly at contact@shift-er.com")
+                setError(t("emailError"));
                 console.error("Error sending email for mentoring inquiry:", err);
             })
@@ -38,36 +36,25 @@
         <main className="bg-gradient-to-b from-shifter via-shifter/20 via-40% to-beige">
             {/*Hero*/}
-            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg
-                text-white-text">
-                <h1 className="text-5xl font-bold">Dedicated 1:1 Mentorship</h1>
-                <p className="text-xl font-light">
-                    Our program ensures maximum client success by operating with <strong className="font-bold">limited openings. </strong>
-                    This guarantees that every partner receives the <strong className="font-bold">undivided attention</strong> and continuous strategic input
-                    necessary to <strong className="font-bold">achieve their objectives. </strong> Submit your inquiry to begin the assessment for one of our dedicated slots.
-                </p>
+            <section className="flex flex-col items-center gap-4 w-full pb-60 pt-top-nav-lg px-horizontal-lg text-white-text">
+                <h1 className="text-5xl font-bold">{t("heroTitle")}</h1>
+                <p className="text-xl font-light" dangerouslySetInnerHTML={{ __html: t("heroDescription") }} />
             </section>
 
-
             {/*Contact Form*/}
-            <section className=" flex items-center justify-center w-full px-horizontal-lg">
-                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4
-                    shadow-md shadow-black/10">
-
+            <section className="flex items-center justify-center w-full px-horizontal-lg">
+                <div className="relative -top-40 grid grid-cols-3 gap-x-20 rounded-lg bg-white p-4 shadow-md shadow-black/10">
                     {/*Contact Info*/}
-                    <div className="border-1 border-white/40
-                    relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
+                    <div className="border-1 border-white/40 relative overflow-clip col-span-1 flex flex-col gap-8 py-8 px-8 rounded-lg bg-shifter text-white">
                         <div className="flex flex-col gap-2 items-start text-left">
-                            <h2 className="text-2xl font-semibold whitespace-nowrap">Contact Information</h2>
-                            <p className="text-white/80 font-light text-sm">
-                                Complete the form and our team will respond shortly to help you take the next step.
-                            </p>
+                            <h2 className="text-2xl font-semibold whitespace-nowrap">{t("contactInfoTitle")}</h2>
+                            <p className="text-white/80 font-light text-sm">{t("contactInfoDescription")}</p>
                         </div>
                         <div className="flex gap-4 items-center">
                             <Mail size={24} color="var(--color-white)" />
-                            contact@shift-er.com
+                            {t("contactEmail")}
                         </div>
                         <div className="flex gap-4 items-center">
                             <MapPin size={24} color="var(--color-white)" />
-                            Skopje, N. Macedonia
+                            {t("contactLocation")}
                         </div>
 
@@ -80,111 +67,61 @@
                     {/*Form*/}
                     <div className="flex flex-col gap-4 col-span-2">
-                        <div className="flex justify-betwee gap-20 items-center">
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">Name: <span
-                                className="text-black-text font-normal">{user?.name}</span></p>
-                            <p className="font-light text-black-text/60 text-md whitespace-nowrap ">Email: <span
-                                className="text-black-text font-normal">{user?.email}</span></p>
-                            <p className="text-black/40 text-sm col-span-2">
-                                These values are automatically populated from your profile.
-                                If any of them are incorrect, please update them in the Profile page.
+                        <div className="grid grid-cols-2 gap-4 items-center">
+                            <p className="text-black/40 text-xs col-span-2">{t("autoFilledNote")}</p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
+                                {t("name")}: <span className="text-black-text font-normal">{user?.name}</span>
+                            </p>
+                            <p className="font-light text-black-text/60 text-md whitespace-nowrap">
+                                {t("email")}: <span className="text-black-text font-normal">{user?.email}</span>
                             </p>
                         </div>
 
-                        <hr className="border-t-2 border-black/20"/>
+                        <hr className="border-t-1 border-black/20 rounded-full" />
 
-                        <form
-                            onSubmit={handleSubmit}
-                            className="flex flex-col gap-4 items-start">
-                            <TextInput
-                                label="Your Subject"
-                                name="subject"
-                                placeholder="Enter the subject of your message"
-                                rows={1}
-                                onChange={(e) => setSubject(e.target.value)}
-                            />
-                            <TextInput
-                                label="Message"
-                                name="message"
-                                placeholder="Write your message here..."
-                                rows={8}
-                                onChange={(e) => setMessage(e.target.value)}
-                            />
-                            {
-                                error && (
-                                    <p className="text-red-500 text-md font-medium text-center">
-                                        {error}
-                                    </p>
-                                )
-                            }
-                            {
-                                isMessageSent ? (
-                                    <div className="text-center w-full">
-                                        <h2 className="text-xl font-bold text-shifter mb-2">
-                                            Your message has been sent successfully!
-                                        </h2>
-                                        <p className="text-md font-medium text-black/80 max-w-xl mx-auto">
-                                            Thank you for reaching out to us. Our team will review your message and get back to you as soon as possible.
-                                            Keep an eye on your <span className="font-semibold text-shifter">inbox for our reply</span>.
-                                        </p>
-                                    </div>
-                                ) : (
-                                    <div className="flex items-center gap-6">
-                                        <button
-                                            className="hover:shadow-shifter/40 transition-all duration-200 ease-in-out
-                                    disabled:cursor-not-allowed disabled:opacity-60
-                                    shadow-md shadow-shifter/20 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
-                                            disabled={loading}
-                                            type="submit">
-                                            {loading ? "Sending..." : "Send Message"}
-                                        </button>
-                                        {
-                                            loading && <div className="loader" />
-                                        }
-                                    </div>
-                                )
-                            }
+                        <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start">
+                            <div className="flex flex-col gap-4 items-center w-full">
+                                <TextInput
+                                    label={t("subjectLabel")}
+                                    name="subject"
+                                    placeholder={t("subjectPlaceholder")}
+                                    rows={1}
+                                    onChange={(e) => setSubject(e.target.value)}
+                                />
+                                <TextInput
+                                    label={t("messageLabel")}
+                                    name="message"
+                                    placeholder={t("messagePlaceholder")}
+                                    rows={8}
+                                    onChange={(e) => setMessage(e.target.value)}
+                                />
+                                {error && <p className="text-red-500 text-md font-medium text-center">{error}</p>}
+                            </div>
+
+                            {isMessageSent ? (
+                                <div className="text-center w-full">
+                                    <h2 className="text-xl font-bold text-shifter mb-2">{t("messageSentTitle")}</h2>
+                                    <p className="text-md font-medium text-black/80 max-w-xl mx-auto" dangerouslySetInnerHTML={{ __html: t("messageSentDescription") }} />
+                                </div>
+                            ) : (
+                                <div className="flex items-center gap-6">
+                                    <button
+                                        className="hover:shadow-shifter/60 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-60 shadow-md shadow-shifter/40 bg-shifter text-white py-2 px-6 rounded-md cursor-pointer"
+                                        disabled={loading}
+                                        type="submit"
+                                    >
+                                        {loading ? t("sending") : t("sendMessage")}
+                                    </button>
+                                    {loading && <div className="loader" />}
+                                </div>
+                            )}
                         </form>
                     </div>
                 </div>
             </section>
-
-            <footer className="flex justify-between px-horizontal-lg py-vertical-sm ">
-                <img src={ShifterLogo} alt="Shifter - Business Consulting, Mentoring & Online Courses Logo"
-                     className="h-12"
-                />
-
-                <div className="flex gap-4 items-center">
-                    <NavbarLink to={"/mentoring"} label={"Mentoring"} className="text-sm"/>
-                    <NavbarLink to={"/consulting"} label={"Consulting"} className="text-sm"/>
-                    <NavbarLink to={"/courses"} label={"Courses"} className="text-sm"/>
-                    <NavbarLink to={"/academies"} label={"Academies"} className="text-sm"/>
-                </div>
-
-                <div className="flex gap-4 ">
-                    <a
-                        href="http://www.google.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                    >
-                        <Linkedin size={20} color="var(--color-shifter)"/>
-                    </a>
-
-                    <a
-                        href="http://www.google.com"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="bg-shifter/10 rounded-full flex items-center justify-center aspect-square scale-80"
-                    >
-                        <Instagram size={20} color="var(--color-shifter)"/>
-                    </a>
-                </div>
-            </footer>
         </main>
-    )
+    );
 }
 
-
-function TextInput({label, name, placeholder, rows, onChange}: {
+function TextInput({ label, name, placeholder, rows, onChange }: {
     label: string;
     name: string;
@@ -197,15 +134,14 @@
             <span className="text-black/40 font-semibold text-md peer-focused:text-shifter">{label}</span>
             <textarea
+                required
                 onChange={onChange}
                 rows={rows}
                 name={name}
-                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm
-                resize-none min-h-fit custom-scrollbar
-                focus:outline-none focus:border-shifter/40 focus:border-2"
+                className="peer w-full bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm resize-none min-h-fit custom-scrollbar focus:outline-none focus:border-shifter/40 focus:border-2"
                 placeholder={placeholder}
             />
         </label>
-    )
+    );
 }
 
-export default Mentoring
+export default Mentoring;
Index: frontend/src/pages/Personalize.tsx
===================================================================
--- frontend/src/pages/Personalize.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Personalize.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -5,11 +5,13 @@
 // @ts-expect-error
 import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import {Link} from "react-router-dom";
-import {usePersonalizeHook} from "../hooks/usePersonalizeHook.tsx";
-import {Box, Step, StepLabel, Stepper} from "@mui/material";
-import {CustomStepperConnector, CustomStepperStepIcon} from "../components/registerSteps/CustomStepper.tsx";
-import {AnimatePresence, motion} from "framer-motion";
+import {Link, useNavigate} from "react-router-dom";
+import { usePersonalizeHook } from "../hooks/usePersonalizeHook.tsx";
+import { Box, Step, StepLabel, Stepper } from "@mui/material";
+import { CustomStepperConnector, CustomStepperStepIcon } from "../components/registerSteps/CustomStepper.tsx";
+import { AnimatePresence, motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
 
 function Personalize() {
+    const { t } = useTranslation("personalize");
     const {
         verificationChecked,
@@ -26,6 +28,8 @@
         handlePersonalize
     } = usePersonalizeHook();
+    const navigate = useNavigate();
 
-    if (!verificationChecked) {
+    if (!verificationChecked || !isVerified) {
+        navigate("/")
         return undefined;
     }
@@ -36,14 +40,9 @@
             {/* LEFT HEADER AND BACKGROUND */}
             <section className="relative bg-black w-[55%] overflow-hidden">
-                <div
-                    className="absolute w-full h-full bg-shifter/80 z-0 text-white px-16 flex flex-col gap-4 justify-center text-start">
-                    {/*Arrows*/}
-                    <img src={ShifterArrow} alt="Shifter Arrow"
-                         className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"/>
-                    <img src={ShifterArrow} alt="Shifter Arrow"
-                         className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"/>
-                    <h1 className="text-7xl font-semibold z-2 whitespace-nowrap">Shift into Success</h1>
-                    <p className="text-2xl font-light z-2">Start your journey toward smarter, scalable business
-                        growth.</p>
+                <div className="absolute w-full h-full bg-shifter/80 z-0 text-white px-16 flex flex-col gap-4 justify-center text-start">
+                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"/>
+                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"/>
+                    <h1 className="text-7xl font-semibold z-2 whitespace-nowrap">{t("title")}</h1>
+                    <p className="text-2xl font-light z-2">{t("subtitle")}</p>
                 </div>
             </section>
@@ -53,123 +52,85 @@
                 <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
                     <Link to={"/"} >
-                        <img
-                            src={ShifterLogo}
-                            alt="Shifter Logo"
-                            className="w-40 h-auto object-contain"
-                        />
+                        <img src={ShifterLogo} alt="Shifter Logo" className="w-40 h-auto object-contain"/>
                     </Link>
-                    <Link
-                        to={"/"}
-                        className="hover:bg-shifter/20 hover:text-shifter underline decoration-current
-                             font-semibold text-black/80 rounded-sm px-4 py-2"
-                    >
-                        Back to Main Page
+                    <Link to={"/"} className="hover:bg-shifter/20 hover:text-shifter underline decoration-current font-semibold text-black/80 rounded-sm px-4 py-2">
+                        {t("backToMain")}
                     </Link>
                 </div>
 
-                {
-                    isVerified ? (
-                            <div className="flex flex-col items-center justify-center">
-                                <div className="flex flex-col gap-4 bg-white rounded-2xl shadow-lg p-8 w-fit text-center">
-                                    <h2 className="text-2xl font-bold text-red">Verification Failed</h2>
-                                    <p className="font-medium text-black-text/80 max-w-xl mx-auto">
-                                        We couldn’t verify your email address. The verification link may be invalid or
-                                        expired.
-                                        <br/>
-                                        Please try registering again or request a new verification link.
-                                    </p>
+                {isVerified ? (
+                    <div className="flex flex-col items-center justify-center">
+                        <div className="flex flex-col gap-4 bg-white rounded-2xl shadow-lg p-8 w-fit text-center">
+                            <h2 className="text-2xl font-bold text-red">{t("verificationFailedTitle")}</h2>
+                            <p className="font-medium text-black-text/80 max-w-xl mx-auto">
+                                {t("verificationFailedMessage1")}
+                                <br/>
+                                {t("verificationFailedMessage2")}
+                            </p>
+                        </div>
+                    </div>
+                ) : (
+                    <Box className="w-full flex flex-col">
+                        <Stepper activeStep={activeStep} alternativeLabel connector={<CustomStepperConnector/>}>
+                            {stepsContent.map((_, index) => (
+                                <Step key={index}>
+                                    <StepLabel StepIconComponent={CustomStepperStepIcon} className="text-shifter font-semibold"/>
+                                </Step>
+                            ))}
+                        </Stepper>
+
+                        <Box className="flex flex-col overflow-hidden gap-2">
+                            <AnimatePresence mode="wait" initial={false} custom={direction}>
+                                <motion.div
+                                    key={activeStep}
+                                    custom={direction}
+                                    variants={variants}
+                                    initial="enter"
+                                    animate="center"
+                                    exit="exit"
+                                    transition={{ x: { type: "spring", stiffness: 500, damping: 40 }, opacity: { duration: 0.2 } }}
+                                    className="h-80 flex flex-col justify-center"
+                                >
+                                    {stepsContent[activeStep]}
+                                </motion.div>
+                            </AnimatePresence>
+
+                            {showError && <p className="text-red-500 text-sm">{error}</p>}
+
+                            <Box className="flex flex-col justify-center items-center gap-2">
+                                <div className="flex justify-center gap-4 w-full">
+                                    <button
+                                        disabled={activeStep === 0}
+                                        onClick={handleBack}
+                                        className="disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none hover:shadow-sm hover:shadow-black/20 transition-all duration-200 ease-in-out border-3 border-white/50 w-1/3 py-1 bg-black/10 text-black/60 cursor-pointer rounded-sm"
+                                    >
+                                        {t("back")}
+                                    </button>
+
+                                    {activeStep === stepsContent.length - 1 ? (
+                                        <button
+                                            onClick={handlePersonalize}
+                                            className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out px-8 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+                                        >
+                                            {isLoading ? t("settingUp") : t("startUsing")}
+                                        </button>
+                                    ) : (
+                                        <button
+                                            onClick={handleNext}
+                                            className="disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out w-1/3 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md"
+                                        >
+                                            {t("next")}
+                                        </button>
+                                    )}
+
+                                    {isLoading && <div className="h-full loader"></div>}
                                 </div>
-                            </div>
-                    ) : (
-                        <Box className="w-full flex flex-col">
-                            <Stepper
-                                activeStep={activeStep}
-                                alternativeLabel
-                                connector={<CustomStepperConnector/>}
-                            >
-                                {stepsContent.map((_, index) => (
-                                    <Step key={index}>
-                                        <StepLabel StepIconComponent={CustomStepperStepIcon}
-                                                   className="text-shifter font-semibold"
-                                        />
-                                    </Step>
-                                ))}
-                            </Stepper>
-
-                            <Box className="flex flex-col overflow-hidden gap-2">
-
-                                {/*STEPPER CONTENT*/}
-                                <AnimatePresence mode="wait" initial={false} custom={direction}>
-                                    <motion.div
-                                        key={activeStep}
-                                        custom={direction}
-                                        variants={variants}
-                                        initial="enter"
-                                        animate="center"
-                                        exit="exit"
-                                        transition={{
-                                            x: {type: "spring", stiffness: 500, damping: 40},
-                                            opacity: {duration: 0.2},
-                                        }}
-                                        className="h-80 flex flex-col justify-center"
-                                    >
-                                        {stepsContent[activeStep]}
-                                    </motion.div>
-                                </AnimatePresence>
-
-                                {/* Error Message */}
-                                {showError && <p className="text-red-500 text-sm">{error}</p>}
-
-
-                                {/*STEPPER BUTTONS*/}
-                                <Box className="flex flex-col justify-center items-center gap-2">
-                                    <div className="flex justify-center gap-4 w-full">
-                                        <button
-                                            disabled={activeStep === 0}
-                                            onClick={handleBack}
-                                            className="disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none
-                                            hover:shadow-sm hover:shadow-black/20 transition-all duration-200 ease-in-out
-                                            border-3 border-white/50 w-1/3 py-1 bg-black/10 text-black/60 cursor-pointer rounded-sm "
-                                        >
-                                            Back
-                                        </button>
-                                        {activeStep === stepsContent.length - 1 ? (
-                                            <button
-                                                onClick={handlePersonalize}
-                                                className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out
-                                                px-8 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md 
-                                                ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
-                                            >
-                                                {
-                                                    isLoading ? "Setting up..." : "Start Using Shifter"
-                                                }
-                                            </button>
-                                        ) : (
-                                            <button
-                                                onClick={handleNext}
-                                                className={`disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none
-                                                hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out
-                                                w-1/3 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md`}
-                                            >
-                                                Next
-                                            </button>
-                                        )}
-
-
-                                        {/* Loading Animation */}
-                                        {
-                                            isLoading && (
-                                                <div className="h-full loader"></div>
-                                            )
-                                        }
-                                    </div>
-                                </Box>
                             </Box>
                         </Box>
-                    )
-                }
+                    </Box>
+                )}
             </section>
         </main>
-    )
+    );
 }
 
Index: frontend/src/pages/Profile.tsx
===================================================================
--- frontend/src/pages/Profile.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Profile.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -17,5 +17,5 @@
 
     return (
-        <main className="grid grid-cols-4 gap-x-12 py-vertical-lg pt-top-nav-lg px-horizontal-md bg-dark-blue/5">
+        <main className="grid grid-cols-4 gap-x-12 py-vertical-lg pt-top-nav-lg px-horizontal-md  bg-beige">
             <div className="col-span-1 flex flex-col gap-6">
                 <ProfileInfo/>
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/pages/Register.tsx	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -5,11 +5,13 @@
 // @ts-expect-error
 import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 import React from "react";
-import {Eye, EyeOff} from "lucide-react";
-import {useRegisterHook} from "../hooks/useRegisterHook.tsx";
+import { Eye, EyeOff } from "lucide-react";
+import { useRegisterHook } from "../hooks/useRegisterHook.tsx";
 import GoogleLoginButton from "../components/GoogleLoginButton.tsx";
+import { useTranslation } from "react-i18next";
 
 function Register() {
+    const { t } = useTranslation("register");
     const {
         email,
@@ -30,17 +32,11 @@
     return (
         <main className="flex font-montserrat h-screen bg-beige">
-
             {/* LEFT HEADER AND BACKGROUND */}
             <section className="relative bg-black w-[55%] overflow-hidden">
-                <div
-                    className="absolute w-full h-full bg-shifter/80 z-0 text-white px-16 flex flex-col gap-4 justify-center text-start">
-                    {/*Arrows*/}
-                    <img src={ShifterArrow} alt="Shifter Arrow"
-                         className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"/>
-                    <img src={ShifterArrow} alt="Shifter Arrow"
-                         className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"/>
-                    <h1 className="text-7xl font-semibold z-2 whitespace-nowrap">Shift into Success</h1>
-                    <p className="text-2xl font-light z-2">Start your journey toward smarter, scalable business
-                        growth.</p>
+                <div className="absolute w-full h-full bg-shifter/80 z-0 text-white px-16 flex flex-col gap-4 justify-center text-start">
+                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"/>
+                    <img src={ShifterArrow} alt="Shifter Arrow" className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"/>
+                    <h1 className="text-7xl font-semibold z-2 whitespace-nowrap">{t("title")}</h1>
+                    <p className="text-2xl font-light z-2">{t("subtitle")}</p>
                 </div>
             </section>
@@ -50,113 +46,86 @@
                 <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
                     <Link to={"/"} >
-                        <img
-                            src={ShifterLogo}
-                            alt="Shifter Logo"
-                            className="w-40 h-auto object-contain"
-                        />
+                        <img src={ShifterLogo} alt="Shifter Logo" className="w-40 h-auto object-contain"/>
                     </Link>
-                    <Link
-                        to={"/"}
-                        className="hover:bg-shifter/20 hover:text-shifter underline decoration-current
-                             font-semibold text-black/80 rounded-sm px-4 py-2"
-                    >
-                        Back to Main Page
+                    <Link to={"/"} className="hover:bg-shifter/20 hover:text-shifter underline decoration-current font-semibold text-black/80 rounded-sm px-4 py-2">
+                        {t("backToMain")}
                     </Link>
                 </div>
 
-                {
-                    isSuccess ? (
-                            <div className="flex flex-col items-center justify-center">
-                                <div className="flex flex-col gap-4 bg-white rounded-2xl shadow-lg p-8 w-fit text-center">
-                                    <h2 className="text-2xl font-bold text-shifter">Verify your email to continue</h2>
-                                    <p className="font-medium text-black-text/80 max-w-xl mx-auto">
-                                        A verification link has been sent to <span className='font-semibold text-shifter'>{email}</span>.
-                                        Please check your inbox and click the link to activate your account.
-                                    </p>
-                                </div>
+                {isSuccess ? (
+                    <div className="flex flex-col items-center justify-center">
+                        <div className="flex flex-col gap-4 bg-white rounded-2xl shadow-lg p-8 w-fit text-center">
+                            <h2 className="text-2xl font-bold text-shifter">{t("verifyEmail")}</h2>
+                            <p className="font-medium text-black-text/80 max-w-xl mx-auto">
+                                {t("verificationSent1")} <span className='font-semibold text-shifter'>{email}</span> {t("verificationSent2")}
+                            </p>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        <form onSubmit={handleRegister} className="flex flex-col gap-4 w-full items-center">
+                            <Input
+                                placeholder={t("emailPlaceholder")}
+                                label={t("emailLabel")}
+                                name="email"
+                                type="email"
+                                id="email"
+                                value={email}
+                                onChange={e => setEmail(e.target.value)}
+                                showPassword={showPassword}
+                                setShowPassword={setShowPassword}
+                            />
+                            <Input
+                                placeholder={t("passwordPlaceholder")}
+                                label={t("passwordLabel")}
+                                name="password"
+                                type="password"
+                                id="password"
+                                value={password}
+                                onChange={e => setPassword(e.target.value)}
+                                showPassword={showPassword}
+                                setShowPassword={setShowPassword}
+                            />
+                            <Input
+                                placeholder={t("passwordConfirmationPlaceholder")}
+                                label={t("passwordConfirmationLabel")}
+                                name="passwordConfirmation"
+                                type="password"
+                                id="password-confirmation"
+                                value={passwordConfirmation}
+                                onChange={e => setPasswordConfirmation(e.target.value)}
+                                showPassword={showPassword}
+                                setShowPassword={setShowPassword}
+                            />
+
+                            {showError && <p className="text-red-500 text-sm">{error}</p>}
+
+                            <div className="flex gap-2 justify-center text-md w-full text-lg mt-4">
+                                <button
+                                    type="submit"
+                                    disabled={isLoading}
+                                    className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer rounded-md border-3 border-white/50 text-white px-8 py-1 bg-shifter font-medium whitespace-nowrap ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+                                >
+                                    {isLoading ? t("creatingAccount") : t("createAccount")}
+                                </button>
+                                <Link
+                                    to="/login"
+                                    className="hover:shadow-md hover:shadow-shifter/20 transition-all duration-200 ease-in-out cursor-pointer rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium whitespace-nowrap opacity-80"
+                                >
+                                    {t("logIn")}
+                                </Link>
+                                {isLoading && <div className="h-full loader"></div>}
                             </div>
-                    ) : (
-                        <>
-                            <form
-                                onSubmit={handleRegister}
-                                className="flex flex-col gap-4 w-full items-center">
-                                <Input
-                                    placeholder={"name@email.com"}
-                                    label={"Email address"}
-                                    name={"email"}
-                                    type={"email"}
-                                    id={"email"}
-                                    value={email}
-                                    onChange={e => setEmail(e.target.value)}
-                                    showPassword={showPassword}
-                                    setShowPassword={setShowPassword}
-                                />
-                                <Input
-                                    placeholder={"********"}
-                                    label={"Password"}
-                                    name={"password"}
-                                    type={"password"}
-                                    id={"password"}
-                                    value={password}
-                                    onChange={e => setPassword(e.target.value)}
-                                    showPassword={showPassword}
-                                    setShowPassword={setShowPassword}
-                                />
-                                <Input
-                                    placeholder={"********"}
-                                    label={"Confirm password"}
-                                    name={"passwordConfirmation"}
-                                    type={"password"}
-                                    id={"password-confirmation"}
-                                    value={passwordConfirmation}
-                                    onChange={e => setPasswordConfirmation(e.target.value)}
-                                    showPassword={showPassword}
-                                    setShowPassword={setShowPassword}
-                                />
+                        </form>
 
-                                {/* Error Message */}
-                                {showError && <p className="text-red-500 text-sm">{error}</p>}
+                        <div className="my-4 flex items-center gap-2 w-9/10 text-black opacity-20">
+                            <hr className="border-t-2 border-black w-full"/>
+                            <p>{t("or")}</p>
+                            <hr className="border-t-2 border-black w-full"/>
+                        </div>
 
-                                {/* Buttons */}
-                                <div className="flex gap-2 justify-center text-md w-full text-lg mt-4">
-                                    <button
-                                        type="submit"
-                                        disabled={isLoading}
-                                        className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer
-                                    rounded-md border-3 border-white/50 text-white px-8 py-1 bg-shifter font-medium
-                                    whitespace-nowrap ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
-                                    >
-                                        {
-                                            isLoading ? "Creating account..." : "Create Account"
-                                        }
-                                    </button>
-                                    <Link
-                                        to="/login"
-                                        className="hover:shadow-md hover:shadow-shifter/20 transition-all duration-200 ease-in-out cursor-pointer
-                                    rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium
-                                    whitespace-nowrap opacity-80"
-                                    >
-                                        Log In
-                                    </Link>
-
-                                    {/* Loading Animation */}
-                                    {
-                                        isLoading && (
-                                            <div className="h-full loader"></div>
-                                        )
-                                    }
-                                </div>
-                            </form>
-
-                            <div className="my-4 flex items-center gap-2 w-9/10 text-black opacity-20">
-                                <hr className="border-t-2 border-black w-full"/>
-                                <p>or</p>
-                                <hr className="border-t-2 border-black w-full"/>
-                            </div>
-
-                            <GoogleLoginButton text="Sign in with Google"/>
-                        </>
-                    )
-                }
+                        <GoogleLoginButton text={t("googleLogin")} />
+                    </>
+                )}
             </section>
         </main>
@@ -177,11 +146,7 @@
 
 function Input(inputProps: InputProps) {
-
     return (
-        <div
-            className="relative flex flex-col gap-1 px-6 py-1.5 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm w-full">
-            <label htmlFor={inputProps.id} className="text-shifter text-light">
-                {inputProps.label}
-            </label>
+        <div className="relative flex flex-col gap-1 px-6 py-1.5 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm w-full">
+            <label htmlFor={inputProps.id} className="text-shifter text-light">{inputProps.label}</label>
             <div className="flex gap-2 w-full">
                 <div className="w-full">
@@ -204,9 +169,5 @@
                         aria-label={inputProps.showPassword ? "Hide password" : "Show password"}
                     >
-                        {!inputProps.showPassword ? (
-                            <EyeOff size={20} opacity={0.6} />
-                        ) : (
-                            <Eye size={20} opacity={0.6} />
-                        )}
+                        {!inputProps.showPassword ? <EyeOff size={20} opacity={0.6} /> : <Eye size={20} opacity={0.6} />}
                     </button>
                 )}
Index: frontend/src/slick-custom.css
===================================================================
--- frontend/src/slick-custom.css	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/src/slick-custom.css	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -56,6 +56,6 @@
     &:before {
         content: '';
-        width: 3rem;
-        height: 3rem;
+        width: 2rem;
+        height: 2rem;
         border: solid var(--color-shifter);
         opacity: 0.6;
@@ -71,4 +71,5 @@
 .slick-prev {
     left: calc(33.33% - 90px);
+
     &:before {
         transform: translate(-25%, -50%) rotate(135deg);
Index: frontend/tailwind.config.js
===================================================================
--- frontend/tailwind.config.js	(revision 8367d4a0cfcda1481e7de4f45b1b24b5c3b5ba8b)
+++ frontend/tailwind.config.js	(revision 171bfdbb54bf6f8fcb8525406335d07912601114)
@@ -9,15 +9,22 @@
             spacing: {
                 // Map your spacing variables as custom spacing tokens
-                'horizontal-lg': '10rem',   // --spacing-horizontal-lg
-                'horizontal-md': '7rem',    // --spacing-horizontal-md
-                'horizontal-sm': '4rem',    // --spacing-horizontal-sm
+                'horizontal-xl': '12rem',
+                'horizontal-lg': '10rem',
+                'horizontal-md': '7rem',
+                'horizontal-sm': '4rem',
 
-                'vertical-lg': '3rem',      // --spacing-vertical-lg
-                'vertical-md': '2rem',      // --spacing-vertical-md
-                'vertical-sm': '1rem',      // --spacing-vertical-sm
+                'vertical-xl': '5rem',
+                'vertical-lg': '3rem',
+                'vertical-md': '2rem',
+                'vertical-sm': '1rem',
 
-                'top-nav-lg': '8rem',       // --spacing-top-nav-lg
-                'top-nav-md': '7rem',       // --spacing-top-nav-md
-                'top-nav-sm': '6rem',       // --spacing-top-nav-sm
+                'top-nav-xl': '9rem',
+                'top-nav-lg': '8rem',
+                'top-nav-md': '7rem',
+                'top-nav-sm': '6rem',
+
+                'between-lg': '3rem',
+                'between-md': '2rem',
+                'between-sm': '1rem',
             },
             colors: {