diff --git a/client/src/AuthenticatedApp.tsx b/client/src/AuthenticatedApp.tsx
index 8806e00..0997689 100644
--- a/client/src/AuthenticatedApp.tsx
+++ b/client/src/AuthenticatedApp.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Route, Routes } from "react-router-dom";
-import Banner from "./components/Banner/Banner";
-import Navbar from "./components/Navbar/Navbar";
+import Header from "./components/Header/Header";
 import MainPage from "./pages/MainPage/MainPage";
 import Forums from "./pages/Forums/Forums";
 import Profiles from "./pages/Profiles/Profiles";
@@ -39,8 +38,7 @@ const AuthenticatedApp = () => {
 
   return (
     <div>
-      <Banner />
-      <Navbar />
+      <Header />
       <Routes>
         <Route path="main" element={<MainPage />} />
         <Route path="/profiles" element={<Profiles />} />
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
new file mode 100644
index 0000000..3e9b71c
--- /dev/null
+++ b/client/src/components/Header/Header.tsx
@@ -0,0 +1,113 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import logo from "../../assets/hammer.png";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { logout } from "../../features/user/userSlice";
+
+const Header = (): JSX.Element => {
+  const user = useAppSelector((state) => state.user.userData);
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [showDropdown, setShowDropdown] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleLogout = () => {
+    dispatch(logout());
+    navigate("/");
+    //TODO CLEAR ALL STATE
+  };
+
+  const currentPath = location.pathname.replace("/app/", "");
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [dropdownRef]);
+
+  return (
+    <div
+      className="fixed top-0 left-0 right-0 bg-gray-600 text-white p-4 md:p-6 flex items-center justify-between"
+      style={{ margin: "10px 20px 0 20px", zIndex: 1000 }}
+    >
+      <div className="flex items-center">
+        <img src={logo} alt="Code Hammers Logo" className="h-12 md:h-16" />
+        <h1 className="ml-3 text-xl md:text-2xl font-bold">Code Hammers</h1>
+      </div>
+
+      <div className="flex-grow mx-10">
+        <div className="flex justify-evenly space-x-4 md:space-x-6 lg:space-x-10">
+          <Link
+            to="/app/main"
+            className={`text-lg md:text-xl ${
+              currentPath === "main" ? "text-gray-300" : "hover:text-gray-300"
+            } transition transform hover:scale-105`}
+          >
+            MainPage
+          </Link>
+          <Link
+            to="/app/profiles"
+            className={`text-lg md:text-xl ${
+              currentPath === "profiles"
+                ? "text-gray-300"
+                : "hover:text-gray-300"
+            } transition transform hover:scale-105`}
+          >
+            Profiles
+          </Link>
+          <Link
+            to="/app/forums"
+            className={`text-lg md:text-xl ${
+              currentPath === "forums" ? "text-gray-300" : "hover:text-gray-300"
+            } transition transform hover:scale-105`}
+          >
+            Forums
+          </Link>
+        </div>
+      </div>
+      <div className="relative">
+        <button
+          onClick={() => setShowDropdown(!showDropdown)}
+          className="bg-gray-700 hover:bg-gray-800 font-bold py-2 px-4 rounded"
+        >
+          Account
+        </button>
+        {showDropdown && (
+          <div
+            ref={dropdownRef}
+            className="absolute right-0 mt-2 py-2 w-48 bg-gray-700 rounded-md shadow-xl z-20"
+          >
+            <a
+              href="#!"
+              className="block px-4 py-2 text-sm text-white hover:bg-gray-800"
+              onClick={() => {
+                navigate("/app/profile");
+                setShowDropdown(false);
+              }}
+            >
+              Go to Profile
+            </a>
+            <a
+              href="#!"
+              className="block px-4 py-2 text-sm text-white hover:bg-gray-800"
+              onClick={handleLogout}
+            >
+              Logout
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/client/src/components/ProfileThumb/ProfileThumb.tsx b/client/src/components/ProfileThumb/ProfileThumb.tsx
index 6ea3856..892b525 100644
--- a/client/src/components/ProfileThumb/ProfileThumb.tsx
+++ b/client/src/components/ProfileThumb/ProfileThumb.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useAppDispatch } from "../../app/hooks";
 import { IProfile } from "../../../types/profile";
 
 interface ProfileThumbProps {
@@ -7,19 +6,18 @@ interface ProfileThumbProps {
 }
 
 const ProfileThumb = ({ profile }: ProfileThumbProps): JSX.Element => {
-  const dispatch = useAppDispatch();
+  const defaultImage = "https://picsum.photos/200";
 
   return (
-    <div className="bg-gray-100 flex flex-col items-center justify-center p-4 rounded-lg shadow-lg">
-      {profile.profilePhoto && (
-        <img
-          src={profile.profilePhoto}
-          alt="Profile"
-          className="rounded-full h-20 w-20 object-cover mb-4"
-        />
-      )}
-      <h1 className="text-4xl font-extrabold mb-4">{profile.fullName}</h1>
-      <h2 className="text-4xl font-extrabold mb-4">{profile.personalBio}</h2>
+    <div className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 text-white p-4 rounded-lg flex flex-col items-center justify-center h-64 w-64">
+      <img
+        src={profile.profilePhoto || defaultImage}
+        alt={profile.fullName || "Default Profile"}
+        className="rounded-full h-24 w-24 object-cover mb-4"
+      />
+
+      <h1 className="text-xl font-bold mb-2">{profile.fullName}</h1>
+      <h2 className="text-md mb-2">{profile.personalBio}</h2>
     </div>
   );
 };
diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
index cfb1aec..75406b7 100644
--- a/client/src/pages/MainPage/MainPage.tsx
+++ b/client/src/pages/MainPage/MainPage.tsx
@@ -5,9 +5,105 @@ const MainPage = (): JSX.Element => {
   const user = useAppSelector((state) => state.user.userData);
 
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
-      <h1 className="text-4xl font-extrabold mb-4">Main Page</h1>
-      <h1>Welcome {user?.firstName} !</h1>
+    <div className="pt-40 min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
+      <h1 className="text-4xl font-extrabold mb-4">Welcome!</h1>
+
+      <section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-l from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
+        <img
+          src="https://picsum.photos/200/300?grayscale"
+          alt="Description of Image 1"
+          className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover"
+          style={{ maxHeight: "300px" }}
+        />
+        <div className="flex-grow">
+          <h3 className="text-2xl font-bold mb-2">About Code Hammers</h3>
+          <p className="text-gray-300">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
+            dapibus dictum.Duis tempus diam ac massa bibendum, sed tempus sapien
+            posuere. In elementum enim ac dui interdum porta. Pellentesque
+            habitant morbi tristique senectus et netus et malesuada fames ac.
+          </p>
+        </div>
+      </section>
+
+      <section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
+        <img
+          src="https://picsum.photos/200/300?grayscale"
+          alt="Description of Image 1"
+          className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover md:order-last"
+          style={{ maxHeight: "300px" }}
+        />
+        <div className="flex-grow">
+          <h3 className="text-2xl font-bold mb-2">Features</h3>
+          <p className="text-gray-300">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
+            dapibus dictum. Duis tempus diam ac massa bibendum, sed tempus
+            sapien posuere. In elementum enim ac dui interdum porta.
+            Pellentesque habitant morbi tristique senectus et netus et malesuada
+            fames ac.
+          </p>
+        </div>
+      </section>
+
+      <section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-l from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
+        <img
+          src="https://picsum.photos/200/300?grayscale"
+          alt="Description of Image 1"
+          className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover"
+          style={{ maxHeight: "300px" }}
+        />
+        <div className="flex-grow">
+          <h3 className="text-2xl font-bold mb-2">Get Started!</h3>
+          <p className="text-gray-300">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
+            dapibus dictum.Duis tempus diam ac massa bibendum, sed tempus sapien
+            posuere. In elementum enim ac dui interdum porta. Pellentesque
+            habitant morbi tristique senectus et netus et malesuada fames ac.
+          </p>
+        </div>
+      </section>
+
+      <section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
+        <img
+          src="https://picsum.photos/200/300?grayscale"
+          alt="Description of Image 1"
+          className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover md:order-last"
+          style={{ maxHeight: "300px" }}
+        />
+        <div className="flex-grow">
+          <h3 className="text-2xl font-bold mb-2">Boopity Bops</h3>
+          <p className="text-gray-300">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
+            dapibus dictum. Duis tempus diam ac massa bibendum, sed tempus
+            sapien posuere. In elementum enim ac dui interdum porta.
+            Pellentesque habitant morbi tristique senectus et netus et malesuada
+            fames ac.
+          </p>
+        </div>
+      </section>
+
+      <section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-l from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
+        <img
+          src="https://picsum.photos/200/300?grayscale"
+          alt="Description of Image 1"
+          className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover"
+          style={{ maxHeight: "300px" }}
+        />
+        <div className="flex-grow">
+          <h3 className="text-2xl font-bold mb-2">Bopitty Boops</h3>
+          <p className="text-gray-300">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
+            dapibus dictum.Duis tempus diam ac massa bibendum, sed tempus sapien
+            posuere. In elementum enim ac dui interdum porta. Pellentesque
+            habitant morbi tristique senectus et netus et malesuada fames ac.
+          </p>
+        </div>
+      </section>
     </div>
   );
 };
diff --git a/client/src/pages/MainPage/__snapshots__/MainPage.test.tsx.snap b/client/src/pages/MainPage/__snapshots__/MainPage.test.tsx.snap
deleted file mode 100644
index f9bfca1..0000000
--- a/client/src/pages/MainPage/__snapshots__/MainPage.test.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MainPage Component renders correctly 1`] = `
-<div
-  className="min-h-screen bg-gray-100 flex flex-col items-center justify-center"
->
-  <h1
-    className="text-4xl font-extrabold mb-4"
-  >
-    Main Page
-  </h1>
-  <h1>
-    Welcome 
-     !
-  </h1>
-</div>
-`;
diff --git a/client/src/pages/Profiles/Profiles.tsx b/client/src/pages/Profiles/Profiles.tsx
index 173b3ac..6d3ba6d 100644
--- a/client/src/pages/Profiles/Profiles.tsx
+++ b/client/src/pages/Profiles/Profiles.tsx
@@ -14,15 +14,20 @@ const Profiles = (): JSX.Element => {
 
   return (
     <>
-      <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
+      <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
         <h1 className="text-4xl font-extrabold mb-4">PROFILES</h1>
-      </div>
-      <div>
-        {profiles.map((profile, index) => (
-          <Link to={`/app/profile/${profile.user}`} key={index}>
-            <ProfileThumb profile={profile} />
-          </Link>
-        ))}
+
+        <div className="w-full max-w-6xl p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {profiles.map((profile, index) => (
+            <Link
+              to={`/app/profile/${profile.user}`}
+              key={index}
+              className="shadow-lg rounded-lg overflow-hidden transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl"
+            >
+              <ProfileThumb profile={profile} />
+            </Link>
+          ))}
+        </div>
       </div>
     </>
   );
diff --git a/client/src/pages/Profiles/__snapshots__/Profiles.test.tsx.snap b/client/src/pages/Profiles/__snapshots__/Profiles.test.tsx.snap
deleted file mode 100644
index 5be788e..0000000
--- a/client/src/pages/Profiles/__snapshots__/Profiles.test.tsx.snap
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MainPage Component renders correctly 1`] = `
-[
-  <div
-    className="min-h-screen bg-gray-100 flex flex-col items-center justify-center"
-  >
-    <h1
-      className="text-4xl font-extrabold mb-4"
-    >
-      PROFILES
-    </h1>
-  </div>,
-  <div>
-    <a
-      href="/app/profile/User1"
-      onClick={[Function]}
-    >
-      <div
-        className="bg-gray-100 flex flex-col items-center justify-center p-4 rounded-lg shadow-lg"
-      >
-        <h1
-          className="text-4xl font-extrabold mb-4"
-        />
-        <h2
-          className="text-4xl font-extrabold mb-4"
-        />
-      </div>
-    </a>
-    <a
-      href="/app/profile/User2"
-      onClick={[Function]}
-    >
-      <div
-        className="bg-gray-100 flex flex-col items-center justify-center p-4 rounded-lg shadow-lg"
-      >
-        <h1
-          className="text-4xl font-extrabold mb-4"
-        />
-        <h2
-          className="text-4xl font-extrabold mb-4"
-        />
-      </div>
-    </a>
-  </div>,
-]
-`;