Index: imaps-frontend/src/pages/IMaps/components/Button.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Button.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/Button.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,9 +1,10 @@
+@import url(https://fonts.googleapis.com/css?family=Exo:500);
 :root {
-  --primary: #fff;
+  --primary: #252627;
 }
 
 .btn {
   padding: 8px 20px;
-
+  font-family: exo, sans-serif;
   border-radius: 20px;
   outline: none;
@@ -14,6 +15,5 @@
 .btn--primary {
   background-color: var(--primary);
-
-  color: #242424;
+  color: #ffffff;
   border: 1px solid var(--primary);
 }
@@ -24,5 +24,5 @@
   color: #fff;
   padding: 8px 20px;
-  border: 1px solid var(--primary);
+  /* border: 1px solid var(--primary); */
   transition: all 0.3s ease-out;
 }
@@ -30,10 +30,10 @@
 .btn--medium {
   padding: 8px 20px;
-  font-size: 18px;
+  font-size: 22px;
 }
 
 .btn--large {
   padding: 12px 26px;
-  font-size: 20px;
+  font-size: 24px;
 }
 
@@ -41,6 +41,6 @@
 .btn--medium:hover {
   transition: all 0.3s ease-out;
-  background: #fff;
-  color: #242424;
+  background: #ffffffc2;
+  color: #000000;
   transition: 250ms;
 }
Index: imaps-frontend/src/pages/IMaps/components/HeroSection.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/HeroSection.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/HeroSection.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,2 +1,4 @@
+@import url(https://fonts.googleapis.com/css?family=Exo:500);
+
 video {
   object-fit: cover;
@@ -7,6 +9,8 @@
 }
 
+
+
+
 .hero-container {
-  background: url("../images/img-home.jpg") center center/cover no-repeat;
   height: 100vh;
   width: 100%;
@@ -15,6 +19,9 @@
   justify-content: center;
   align-items: center;
-  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
+
   object-fit: contain;
+
+
+
 }
 
@@ -23,4 +30,16 @@
   font-size: 100px;
   margin-top: -100px;
+  font-family: exo, sans-serif;
+  text-transform: uppercase;
+  text-shadow: 1px 1px 0px #ef404e,
+  1px 2px 0px #ef404e,
+  1px 3px 0px #ef404e,
+  1px 4px 0px #ef404e,
+  1px 5px 0px #ef404e,
+  1px 6px 0px #ef404e,
+  1px 10px 5px rgba(16, 16, 16, 0.5),
+  1px 15px 10px rgba(16, 16, 16, 0.4),
+  1px 20px 30px rgba(16, 16, 16, 0.3),
+  1px 25px 50px rgba(16, 16, 16, 0.2);
 }
 
Index: imaps-frontend/src/pages/IMaps/components/HeroSection.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/HeroSection.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/HeroSection.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -7,25 +7,24 @@
 function HeroSection() {
   return (
-    <div className="hero-container">
-      <h1>Map Your World</h1>
-      <p>Create and explore detailed indoor maps.</p>
-      <div className="hero-btns">
-        <Link to="/Maps/FinkiMaps/Draw">
-          <Button className="btns" buttonStyle="btn--outline" buttonSize="btn--large">
-            Create maps
-          </Button>
-        </Link>
-        <Link to="/Maps">
-          <Button
-            className="btns"
-            buttonStyle="btn--primary"
-            buttonSize="btn--large"
-            onClick={console.log("hey")}
-          >
-            Browse Maps <i className="far fa-play-circle" />
-          </Button>
-        </Link>
+      <div className="hero-container">
+          <h1>Map Your World</h1>
+          <p>Create and explore detailed indoor maps.</p>
+          <div className="hero-btns">
+              <Link to="/myMaps">
+                  <Button className="btns" buttonStyle="btn--outline" buttonSize="btn--large">
+                      Create maps
+                  </Button>
+              </Link>
+              <Link to="/Maps">
+                  <Button
+                      className="btns"
+                      buttonStyle="btn--primary"
+                      buttonSize="btn--large"
+                  >
+                      Browse Maps <i className="far fa-play-circle"/>
+                  </Button>
+              </Link>
+          </div>
       </div>
-    </div>
   );
 }
Index: imaps-frontend/src/pages/IMaps/components/Navbar.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,161 +1,92 @@
-.navbar {
-  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
-  height: 80px;
+.modern-navbar {
+  /*background-color: #ffffff;*/
+  /*background: linear-gradient(*/
+  /*        90deg,*/
+  /*        #fafafa 0%,*/
+  /*        #c07e7e 25%,*/
+  /*        #af2525 50%,*/
+  /*        #443a3a 75%,*/
+  /*        #8d1010 100%*/
+  /*);*/
+  /*background: linear-gradient(to right, #ffffff, #c12c2c);*/
+  /*background: linear-gradient(90deg, #3b3131, #ffffff);*/
+  background: linear-gradient(90deg, #9b1818, #efefef);
+  color: #ffffff;
+  /*color: #333333;*/
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 1.2rem;
+  padding: 0.8rem 1.5rem;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
-  z-index: 999;
-}
-
-.pad-bot {
-  /* padding-bottom: 1.5rem; */
+  z-index: 1000;
+  border-radius: 8px;
+  margin: 5px;
 }
 
 .navbar-container {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   width: 100%;
+  max-width: 1200px;
 }
 
-.navbar-logo {
-  color: #fff;
-  justify-self: start;
-  margin-left: 20px;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 2rem;
+.navbar-left {
   display: flex;
   align-items: center;
+  gap: 1rem;
 }
 
-.fa-typo3 {
-  margin-left: 0.5rem;
-  font-size: 1.8rem;
+.navbar-title {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: #ffffff;
+  margin: 0;
+  font-family: "exo", sans-serif;
 }
 
-.nav-menu {
-  display: grid;
-  grid-template-columns: repeat(4, auto);
-  grid-gap: 10px;
-  list-style: none;
-  text-align: center;
-  width: 70vw;
-  justify-content: end;
-  margin-right: 2rem;
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
-.nav-item {
-  height: 80px;
+.navbar-btn {
+  padding: 0.4rem 1.5rem;
+  font-size: 0.9rem;
+  border: 2px solid transparent;
+  border-radius: 20px;
+  text-decoration: none;
+  color: #ffffff;
+  font-weight: 500;
+  transition: all 0.3s ease-in-out;
+  font-family: "exo", sans-serif;
+  cursor: pointer;
+  margin-left: 4em;
+  margin-right: 1em;
 }
 
-.nav-links {
-  color: #fff;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  padding: 0.5rem 1rem;
-  height: 100%;
+.navbar-login {
+  background-color: #252627;
+  border: 2px solid #3f3232;
 }
 
-.nav-links:hover {
-  border-bottom: 4px solid #fff;
-  transition: all 0.2s ease-out;
+.navbar-login:hover {
+  background-color: #ffffff;
+  color: #212121;
+  border: 1px solid rgba(19, 18, 18, 0.82);
 }
 
-.fa-bars {
-  color: #fff;
+.navbar-signup {
+  background-color: #252627;
+  color: #ffffff;
+  border: 2px solid #343a40;
 }
 
-.nav-links-mobile {
-  display: none;
+.navbar-signup:hover {
+  background-color: #ffffff;
+  color: #343a40;
+  border: 2px solid #343a40;
 }
-
-.menu-icon {
-  display: none;
-}
-
-@media screen and (max-width: 960px) {
-  .NavbarItems {
-    position: relative;
-  }
-
-  .nav-menu {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 90vh;
-    position: absolute;
-    top: 80px;
-    left: -100%;
-    opacity: 1;
-    transition: all 0.5s ease;
-  }
-
-  .nav-menu.active {
-    background: #242222;
-    left: 0;
-    opacity: 1;
-    transition: all 0.5s ease;
-    z-index: 1;
-  }
-
-  .nav-links {
-    text-align: center;
-    padding: 2rem;
-    width: 100%;
-    display: table;
-  }
-
-  .nav-links:hover {
-    background-color: #fff;
-    color: #242424;
-    border-radius: 0;
-  }
-
-  .navbar-logo {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(25%, 50%);
-  }
-
-  .menu-icon {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(-100%, 60%);
-    font-size: 1.8rem;
-    cursor: pointer;
-  }
-
-  .fa-times {
-    color: #fff;
-    font-size: 2rem;
-  }
-
-  .nav-links-mobile {
-    display: block;
-    text-align: center;
-    margin: 2rem auto;
-    border-radius: 4px;
-    width: 80%;
-    text-decoration: none;
-    font-size: 1.5rem;
-    background-color: transparent;
-    color: #fff;
-    padding: 14px 20px;
-    border: 1px solid #fff;
-    transition: all 0.3s ease-out;
-  }
-
-  .nav-links-mobile:hover {
-    background: #fff;
-    color: #242424;
-    transition: 250ms;
-  }
-}
Index: imaps-frontend/src/pages/IMaps/components/Navbar.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,7 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { Button } from "./Button";
+import React, {useContext, useState} from "react";
+import { Link } from "react-router-dom";
+import logo_icon from "../../../assets/logo_icon.png";
+//import { AuthContext } from "../../../components/AuthContext/AuthContext";
+import Logo from "../../../components/Logo/Logo.jsx";
+import Profile from "../../../components/Profile/Profile.jsx";
+import {useAppContext} from "../../../components/AppContext/AppContext.jsx";
 import "./Navbar.css";
-import { Link } from "react-router-dom";
-import logo from "../../../assets/logo_icon.png";
 
 function Navbar() {
@@ -12,44 +15,33 @@
   const closeMobileMenu = () => setClick(false);
 
-  const showButton = () => {
-    if (window.innerWidth <= 960) {
-      setButton(false);
-    } else {
-      setButton(true);
-    }
-  };
+  const { isAuthenticated } = useAppContext();
 
-  useEffect(() => {
-    showButton();
-  }, []);
+    return (
+        <nav className="modern-navbar">
+            <div className="navbar-container">
+                {/* Left Section - Logo and Title */}
+                <div className="navbar-left">
+                    <Logo position="relative"/>
+                    <h1 className="navbar-title">iMaps</h1>
+                </div>
 
-  window.addEventListener("resize", showButton);
-
-  return (
-    <>
-      <nav className="navbar">
-        <div className="navbar-container">
-          <a href="#" className="navbar-logo pad-bot" onClick={closeMobileMenu}>
-            iMaps
-          </a>
-          <div className="menu-icon" onClick={handleClick}>
-            <i className={click ? "fas fa-times" : "fas fa-bars"} />
-          </div>
-          <ul className={click ? "nav-menu active" : "nav-menu"}>
-            <Link to="/Signup">
-              <li className="nav-item">
-                <a href="#" className="nav-links" onClick={closeMobileMenu}>
-                  SignUp
-                </a>
-              </li>
-            </Link>
-          </ul>
-          <div className="pad-bot">
-            <Link to="/Login">{button && <Button buttonStyle="btn--outline">LOG IN</Button>}</Link>
-          </div>
-        </div>
-      </nav>
-    </>
-  );
+                {/* Right Section - Login/Signup or Profile */}
+                <div className="navbar-right">
+                    {isAuthenticated ? (
+                        <Profile position="relative"/>
+                    ) : (
+                        <>
+                            <Link to="/Login" className="navbar-btn navbar-login">
+                                Log In
+                            </Link>
+                            <Link to="/Signup" className="navbar-btn navbar-signup">
+                                Sign Up
+                            </Link>
+                        </>
+                    )}
+                </div>
+            </div>
+        </nav>
+    );
 }
 
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,3 +1,0 @@
-.home {
-  width: 100%;
-}
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,17 +1,32 @@
 import React from "react";
-import "./Home.css";
-import Cards from "../Cards";
-import HeroSection from "../HeroSection";
-import Footer from "../Footer";
+import "./Home.scss";
+import { Link } from "react-router-dom";
+import { Button } from "../Button.jsx";
+import Cards from "../Cards.jsx";
+import Footer from "../Footer.jsx";
+import sl from "../../../../assets/bg-home-light-gray.png"
 
 function Home() {
   return (
-    <>
-      <div className="home">
-        <HeroSection />
-        {/* <Cards /> */}
-        <Footer />
+    <div className="home">
+      <div className="hero-container">
+        <h1>Map Your World</h1>
+        <h2 className="description">Create and explore detailed indoor maps.</h2>
+        <div className="hero-btns">
+          <Link to="/myMaps">
+            <Button className="btns" buttonSize="btn--large">
+              Create Maps
+            </Button>
+          </Link>
+          <Link to="/Maps">
+            <Button className="btns" buttonSize="btn--large">
+              Browse Maps <i className="far fa-play-circle" />
+            </Button>
+          </Link>
+        </div>
       </div>
-    </>
+      <Cards />
+      <Footer></Footer>
+    </div>
   );
 }
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.scss
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.scss	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.scss	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+/* Exo thin font */
+@import url(https://fonts.googleapis.com/css?family=Exo:500);
+
+//$bg-url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC";
+$bg-url: "../../../../assets/bg-home-light-gray.png";
+$bg-width: 50px;
+$bg-height: 50px;
+
+/* Animations */
+@-webkit-keyframes bg-scrolling-reverse {
+  100% { background-position: $bg-width $bg-height; }
+}
+@-moz-keyframes    bg-scrolling-reverse {
+  100% { background-position: $bg-width $bg-height; }
+}
+@-o-keyframes      bg-scrolling-reverse {
+  100% { background-position: $bg-width $bg-height; }
+}
+@keyframes         bg-scrolling-reverse {
+  100% { background-position: $bg-width $bg-height; }
+}
+
+@-webkit-keyframes bg-scrolling {
+  0% { background-position: $bg-width $bg-height; }
+}
+@-moz-keyframes    bg-scrolling {
+  0% { background-position: $bg-width $bg-height; }
+}
+@-o-keyframes      bg-scrolling {
+  0% { background-position: $bg-width $bg-height; }
+}
+@keyframes         bg-scrolling {
+  0% { background-position: $bg-width $bg-height; }
+}
+
+.homebg{
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.home {
+  color: #999;
+
+  font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
+  text-align: center;
+  height: 100vh;
+  width: 100vw;
+  /* img size is 50x50 */
+  background: url($bg-url) repeat 0 0;
+
+  -webkit-animation: bg-scrolling-reverse .92s infinite; /* Safari 4+ */
+  -moz-animation:    bg-scrolling-reverse .92s infinite; /* Fx 5+ */
+  -o-animation:      bg-scrolling-reverse .92s infinite; /* Opera 12+ */
+  animation:         bg-scrolling-reverse .92s infinite; /* IE 10+ */
+  -webkit-animation-timing-function: linear;
+  -moz-animation-timing-function:    linear;
+  -o-animation-timing-function:      linear;
+  animation-timing-function:         linear;
+
+  &::before {
+    font-size: 8rem;
+    font-weight: 100;
+    font-style: normal;
+  }
+}
+
+.hero-container {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  object-fit: contain;
+  //box-shadow: inset 0 0 0 1000px rgba(253, 244, 195, 0.5);
+
+}
+
+.hero-container h1 {
+  font-family: exo, sans-serif;
+
+
+  background: linear-gradient(
+                  90deg,
+                  #9a2020 0%,
+                  #3b3131 25%,
+                  #af2525 50%,
+                  #443a3a 75%,
+                  #8d1010 100%
+  );
+
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 3px 2px 10px rgba(0, 0, 0, 0.5);
+
+  font-size: 6em;
+
+
+
+
+}
+.hero-container h2{
+  font-family: exo, sans-serif;
+  color: #1c1c1c;
+}
+
+.hero-container > p {
+  margin-top: 8px;
+  color: #fff;
+  font-size: 32px;
+}
+
+.hero-btns {
+  margin-top: 32px;
+}
+
+.hero-btns .btn {
+  margin: 6px;
+}
+
+.description{
+  color: gray;
+}
+
+.fa-play-circle {
+  margin-left: 4px;
+}
+
+@media screen and (max-width: 960px) {
+  .hero-container > h1 {
+    font-size: 70px;
+    margin-top: -150px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .hero-container > h1 {
+    font-size: 50px;
+    margin-top: -100px;
+  }
+
+  .hero-container > p {
+    font-size: 30px;
+  }
+
+  .btn-mobile {
+    display: block;
+    text-decoration: none;
+  }
+
+  .home-btn {
+    width: 100%;
+    background: #252627;
+  }
+}
