diff --git a/src/App.js b/src/App.js
index ac6f4dc..3c7cea4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,13 @@
 import './App.scss';
-import User from './User/User';
-import { Link } from 'react-router-dom';
+import Navbar from './Navbar';
+import Home from './Home';
 import { useState } from 'react';
 
 function App() {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(false);
 
+
     const toggleUserBar = () => {
         setIsCollapsed(!isCollapsed);
     };
@@ -14,36 +16,12 @@ function App() {
         <div className="app">
             <div className="log-head">
                 <header className="header">
-                    <div className="logo">
-                        <h1>Bot-Wars</h1>
-                    </div>
-                    <nav className="nav">
-                        <div className="menu-btns">
-                            <div className="menu-btn">
-                                <Link to="tournaments/home">
-                                    <button className="btn">Tournaments</button>
-                                </Link>
-                            </div>
-                            <div className="menu-btn">
-                                <Link to="games">
-                                    <button className="btn">Games</button>
-                                </Link>
-                            </div>
-                            <div className="menu-btn">
-                                <Link to="about">
-                                    <button className="btn">About us</button>
-                                </Link>
-                            </div>
-                            <div className="menu-btn">
-                                <User isAuthenticated={false} />
-                            </div>
-                        </div>
-                    </nav>
+                    <Navbar isAuthenticated={isAuthenticated} user={null} />
                 </header>
             </div>
 
             <div className='container'>
-                <h2>Hello World</h2>
+                <Home isAuthenticated={isAuthenticated} />
             </div>
         </div>
     );
diff --git a/src/App.scss b/src/App.scss
index d2ffc93..47eddbf 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,6 +6,7 @@
 
 body {
   margin: 0;
+  padding: 0;
   font-family: Arial, sans-serif;
   background: #000;
   color: #0f0;
@@ -24,10 +25,7 @@ body {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 10px 20px;
       background: rgba(0, 0, 0, 0.8);
-      border-bottom: 1px solid #0f0;
-      padding: 25px;
       width: 100%;
 
       .logo {
@@ -42,65 +40,6 @@ body {
         font-size: 1.5em;
         color: #0f0;
       }
-
-      .nav {
-        flex-grow: 1;
-
-        .menu-btns {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: 20px;
-
-          .menu-btn {
-            display: flex;
-            align-items: center;
-            margin: 10px 0 10px 5px;
-            padding: 0;
-
-            a {
-              text-decoration: none;
-              display: flex;
-              align-items: center;
-
-              .btn,
-              .login-btn {
-                padding: 10px 20px;
-                border: none;
-                // color: #000;
-                font-weight: bold;
-                cursor: pointer;
-                min-width: 130px;
-
-                &:hover {
-                  background: #fff;
-                  color: #000;
-                }
-              }
-
-              .signup-btn {
-                padding: 10px 20px;
-                // border: 3px solid #3D1680 ;
-                background-color: #0BE400;
-                color: #000;
-                border-radius: 20px;
-                font-weight: bold;
-                cursor: pointer;
-                min-width: 130px;
-                margin-right: 10px;
-
-                &:hover {
-                  background: #fff;
-                  color: #000;
-                }
-              }
-            }
-          }
-        }
-      }
     }
 
     .flex-user {
diff --git a/src/Home.js b/src/Home.js
new file mode 100644
index 0000000..c75b428
--- /dev/null
+++ b/src/Home.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import './Home.scss';
+
+function Home({ isAuthenticated }) {
+    return (
+        <div className="home">
+            <div className="welcome-box">
+                <h1>Welcome to Bot-Wars!</h1>
+                {isAuthenticated ? (
+                    <p>Welcome back! Check out our latest tournaments and games.</p>
+                ) : (
+                    <p>Join us today and start competing in our exciting tournaments!</p>
+                )}
+            </div>
+            <div className="info-boxes">
+                {isAuthenticated ? (
+                    <>
+                        <div className="info-box">
+                            <h2>Your Dashboard</h2>
+                            <p>View your current standings, upcoming matches, and more.</p>
+                        </div>
+                        <div className="info-box">
+                            <h2>Latest Tournaments</h2>
+                            <p>Stay updated with the latest tournaments and events.</p>
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        <div className="info-box">
+                            <h2>Why Join Bot-Wars?</h2>
+                            <p>Compete with players from around the world and prove your skills.</p>
+                        </div>
+                        <div className="info-box">
+                            <h2>How to Get Started</h2>
+                            <p>Sign up, create your profile, and join your first tournament today.</p>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default Home;
diff --git a/src/Home.scss b/src/Home.scss
new file mode 100644
index 0000000..3b8174d
--- /dev/null
+++ b/src/Home.scss
@@ -0,0 +1,56 @@
+.home {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: #f4f4f4;
+
+    .welcome-box {
+        background: #fff;
+        border: 1px solid #ddd;
+        border-radius: 10px;
+        padding: 20px;
+        margin-bottom: 20px;
+        text-align: center;
+        width: 80%;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+        h1 {
+            color: #333;
+            margin-bottom: 10px;
+        }
+
+        p {
+            color: #666;
+            font-size: 1.2em;
+        }
+    }
+
+    .info-boxes {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        justify-content: center;
+        width: 100%;
+
+        .info-box {
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: 10px;
+            padding: 20px;
+            width: 300px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            text-align: center;
+
+            h2 {
+                color: #333;
+                margin-bottom: 10px;
+            }
+
+            p {
+                color: #666;
+                font-size: 1em;
+            }
+        }
+    }
+}
diff --git a/src/Navbar.js b/src/Navbar.js
new file mode 100644
index 0000000..63b6727
--- /dev/null
+++ b/src/Navbar.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import User from './User/User';
+import './Navbar.scss';
+
+function Navbar({ isAuthenticated, user }) {
+    return (
+        <div className="navbar">
+            <div className="logo">
+                <h1>Bot-Wars</h1>
+            </div>
+            <nav className="nav">
+                <div className="menu-btns">
+                    <div className="menu-btn">
+                        <Link to="tournaments/home">
+                            <button className="btn">Tournaments</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <Link to="games">
+                            <button className="btn">Games</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <Link to="about">
+                            <button className="btn">About us</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <User isAuthenticated={isAuthenticated} user={user} />
+                    </div>
+                </div>
+            </nav>
+        </div>
+    );
+}
+
+export default Navbar;
diff --git a/src/Navbar.scss b/src/Navbar.scss
new file mode 100644
index 0000000..5928ff0
--- /dev/null
+++ b/src/Navbar.scss
@@ -0,0 +1,78 @@
+.navbar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    padding: 10px 20px;
+    background: rgba(0, 0, 0, 0.8);
+    border-bottom: 1px solid #0f0;
+
+    .logo {
+        display: flex;
+        justify-content: left;
+        letter-spacing: 5px;
+
+        h1 {
+            margin: 0;
+            font-size: 1.5em;
+            color: #0f0;
+        }
+    }
+
+    .nav {
+        flex-grow: 1;
+
+        .menu-btns {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 20px;
+
+            .menu-btn {
+                display: flex;
+                align-items: center;
+                margin: 10px 0 10px 5px;
+                padding: 0;
+
+                a {
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+
+                    .btn,
+                    .login-btn {
+                        padding: 10px 20px;
+                        border: none;
+                        font-weight: bold;
+                        cursor: pointer;
+                        min-width: 130px;
+
+                        &:hover {
+                            background: #fff;
+                            color: #000;
+                        }
+                    }
+
+                    .signup-btn {
+                        padding: 10px 20px;
+                        background-color: #0be400;
+                        color: #000;
+                        border-radius: 20px;
+                        font-weight: bold;
+                        cursor: pointer;
+                        min-width: 130px;
+                        margin-right: 10px;
+
+                        &:hover {
+                            background: #fff;
+                            color: #000;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/Tournaments/TournamentNav.js b/src/Tournaments/TournamentNav.js
index 84b922b..c43742a 100644
--- a/src/Tournaments/TournamentNav.js
+++ b/src/Tournaments/TournamentNav.js
@@ -1,28 +1,28 @@
 import './TournamentNav.scss';
 import React from "react";
-import { NavLink, Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { login, logout } from '../User/store';
 import { connect } from 'react-redux';
+import User from "../User/User";
 
 
 function TournamentNav({ isAuthenticated }) {
     return (
-        <>
-            <nav className="tournament-nav">
-                <NavLink exact className="menu-btn" activeClassName="active" to="/tournaments/home">
-                    <button className="btn">Tournaments</button>
-                </NavLink>
-                <NavLink className="menu-btn" activeClassName="active" to="/tournaments/leaderboard">
-                    <button className="btn">Leaderboard</button>
-                </NavLink>
-                <NavLink className="menu-btn" activeClassName="active" to="/tournaments/help">
-                    <button className="btn">Help</button>
-                </NavLink>
-                <NavLink exact className="menu-btn" activeClassName="active" to="/">
-                    <button className="btn">Home</button>
-                </NavLink>
-            </nav>
-        </>
+        <nav className="tournament-nav">
+            <NavLink exact className="menu-btn" activeClassName="active" to="/tournaments/home">
+                <button className="btn">Tournaments</button>
+            </NavLink>
+            <NavLink className="menu-btn" activeClassName="active" to="/tournaments/leaderboard">
+                <button className="btn">Leaderboard</button>
+            </NavLink>
+            <NavLink className="menu-btn" activeClassName="active" to="/tournaments/help">
+                <button className="btn">Help</button>
+            </NavLink>
+            <NavLink exact className="menu-btn" activeClassName="active" to="/">
+                <button className="btn">Home</button>
+            </NavLink>
+            <User></User>
+        </nav>
     );
 }
 
@@ -30,6 +30,6 @@ const mapStateToProps = (state) => ({
     isAuthenticated: state.isAuthenticated,
 });
 
-const mapDispatchToProps = { login, logout, };
+const mapDispatchToProps = { login, logout };
 
 export default connect(mapStateToProps, mapDispatchToProps)(TournamentNav);
diff --git a/src/Tournaments/TournamentNav.scss b/src/Tournaments/TournamentNav.scss
index 7ad4c47..d1a9827 100644
--- a/src/Tournaments/TournamentNav.scss
+++ b/src/Tournaments/TournamentNav.scss
@@ -48,36 +48,135 @@
     border-radius: 2px;
   
     .menu-btn {
-      margin: 0 0.5em;
-      padding: 0.1em 0.2em;
-      width: 8em;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      // Add flex-direction for .menu-btn if necessary here
-    
-      &.active .btn {
-        background-color: lighten(black, 5%);
-        color: white;
-      }
+        margin: 0 0.5em;
+        padding: 0.1em 0.2em;
+        width: 8em;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+
+        &.active .btn {
+            background-color: lighten(black, 5%);
+            color: white;
+        }
     }
   
     a {
-      text-decoration: none;
-      color: white;
+        text-decoration: none;
+        color: white;
     }
     
-    // Add responsive styles
-    @media (max-width: 768px) { // Adjust breakpoint as needed
-      flex-direction: column;
-      align-items: flex-start;
-      font-size: 1.2em; // Smaller font size for smaller screens
-  
-      .menu-btn {
-        width: 100%; // Full width for vertical layout
-        margin: 10px 0;
-      }
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: flex-start;
+        font-size: 1.2em;
+
+        .menu-btn {
+            width: 100%;
+            margin: 10px 0;
+        }
     }
-  }
-  
+}
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+
+    .user-info {
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        &.hover .user-name::before {
+            transform: scaleX(1);
+            transform-origin: bottom left;
+        }
+
+        .user-name {
+            color: #0f0;
+            font-weight: bold;
+            margin-right: 5px;
+            font-family: 'YourNewFont', sans-serif;
+            position: relative;
+            overflow: hidden;
 
+            &::before {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 2px;
+                background: #0f0;
+                transform: scaleX(0);
+                transform-origin: bottom right;
+                transition: transform 0.3s ease-out;
+            }
+        }
+
+        .arrow-icon {
+            width: 20px;
+            height: 20px;
+            fill: #0f0;
+            transition: width 0.3s ease, height 0.3s ease;
+            margin-left: 5px;
+
+            .hover & {
+                width: 24px;
+                height: 24px;
+            }
+
+            &.open {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    .dropdown-menu {
+        position: absolute;
+        top: 40px;
+        right: 0;
+        background: rgba(0, 0, 0, 0.9);
+        border: 1px solid #0f0;
+        border-radius: 5px;
+        overflow: hidden;
+        display: none;
+        flex-direction: column;
+        opacity: 0;
+        transition: opacity 0.3s ease, display 0.3s ease;
+
+        &.open {
+            display: flex;
+            opacity: 1;
+        }
+
+        .dropdown-item {
+            padding: 10px 20px;
+            color: #0f0;
+            text-align: left;
+            background: #222;
+            border-bottom: 1px solid #333;
+            cursor: pointer;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            font-size: 16px;
+
+            &:hover {
+                background: #444;
+            }
+
+            .dropdown-icon {
+                width: 20px;
+                height: 20px;
+                margin-right: 10px;
+            }
+        }
+
+        .dropdown-item:last-child {
+            border-bottom: none;
+        }
+    }
+}
diff --git a/src/Tournaments/TournamentsLeaderboard.js b/src/Tournaments/TournamentsLeaderboard.js
index 71eb1da..9463654 100644
--- a/src/Tournaments/TournamentsLeaderboard.js
+++ b/src/Tournaments/TournamentsLeaderboard.js
@@ -1,12 +1,11 @@
-import TournamentNav from './TournamentNav';
+import React from 'react';
 import { connect } from 'react-redux';
-import UserButtons from "../User/UserButtons";
+import TournamentNav from './TournamentNav';
 import Leaderboard from "./leaderboard";
 
-function TournamentsLeaderboard({ tournaments, isAuthenticated }) {
+function TournamentsLeaderboard({ isAuthenticated, user }) {
     return (
         <div className="tournaments-container">
-            <UserButtons></UserButtons>
             <TournamentNav />
             <Leaderboard></Leaderboard>
         </div>
@@ -15,6 +14,7 @@ function TournamentsLeaderboard({ tournaments, isAuthenticated }) {
 
 const mapStateToProps = (state) => ({
     isAuthenticated: state.isAuthenticated,
+    user: state.user,
 });
 
 export default connect(mapStateToProps)(TournamentsLeaderboard);
diff --git a/src/User/User.js b/src/User/User.js
index 1fd5ad5..128c877 100644
--- a/src/User/User.js
+++ b/src/User/User.js
@@ -10,28 +10,28 @@ import React, { useState, useRef, useEffect } from 'react';
 
 function User({ isAuthenticated, user, login, logout }) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const userNameRef = useRef(null);
+    const userInfoRef = useRef(null);
 
     const toggleMenu = () => {
         setIsMenuOpen(!isMenuOpen);
     };
 
     useEffect(() => {
-        const userNameElement = userNameRef.current;
+        const userInfoElement = userInfoRef.current;
         const handleMouseEnter = () => {
-            userNameElement.classList.add('hover');
+            userInfoElement.classList.add('hover');
         };
         const handleMouseLeave = () => {
-            userNameElement.classList.remove('hover');
+            userInfoElement.classList.remove('hover');
         };
-        if (userNameElement) {
-            userNameElement.addEventListener('mouseenter', handleMouseEnter);
-            userNameElement.addEventListener('mouseleave', handleMouseLeave);
+        if (userInfoElement) {
+            userInfoElement.addEventListener('mouseenter', handleMouseEnter);
+            userInfoElement.addEventListener('mouseleave', handleMouseLeave);
         }
         return () => {
-            if (userNameElement) {
-                userNameElement.removeEventListener('mouseenter', handleMouseEnter);
-                userNameElement.removeEventListener('mouseleave', handleMouseLeave);
+            if (userInfoElement) {
+                userInfoElement.removeEventListener('mouseenter', handleMouseEnter);
+                userInfoElement.removeEventListener('mouseleave', handleMouseLeave);
             }
         };
     }, []);
@@ -40,8 +40,8 @@ function User({ isAuthenticated, user, login, logout }) {
         <>
             {isAuthenticated ? (
                 <div className="user-profile" onClick={toggleMenu}>
-                    <div className="user-info">
-                        <span ref={userNameRef} className="user-name">username</span>
+                    <div ref={userInfoRef} className="user-info">
+                        <span className="user-name">username</span>
                         <svg
                             className={`arrow-icon ${isMenuOpen ? 'open' : ''}`}
                             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/User/UserButtons.scss b/src/User/UserButtons.scss
index 425348a..a64c290 100644
--- a/src/User/UserButtons.scss
+++ b/src/User/UserButtons.scss
@@ -9,6 +9,16 @@
         align-items: center;
         position: relative;
 
+        &.hover .user-name::before {
+            transform: scaleX(1);
+            transform-origin: bottom left;
+        }
+
+        &.hover .arrow-icon {
+            width: 24px;
+            height: 24px;
+        }
+
         .user-name {
             color: #0f0;
             font-weight: bold;
@@ -17,7 +27,7 @@
             position: relative;
             overflow: hidden;
 
-            &:before {
+            &::before {
                 content: '';
                 position: absolute;
                 bottom: 0;
@@ -29,21 +39,16 @@
                 transform-origin: bottom right;
                 transition: transform 0.3s ease-out;
             }
-
-            &:hover:before {
-                transform: scaleX(1);
-                transform-origin: bottom left;
-            }
         }
 
         .arrow-icon {
             width: 20px;
             height: 20px;
             fill: #0f0;
-            transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
+            transition: width 0.3s ease, height 0.3s ease;
             margin-left: 5px;
 
-            &:hover {
+            .hover & {
                 width: 24px;
                 height: 24px;
             }
@@ -54,11 +59,6 @@
         }
     }
 
-    .user-info:hover .arrow-icon {
-        width: 24px;
-        height: 24px;
-    }
-
     .dropdown-menu {
         position: absolute;
         top: 40px;
diff --git a/src/lists/TournamentsList.js b/src/lists/TournamentsList.js
index 6be8d0d..b9f9873 100644
--- a/src/lists/TournamentsList.js
+++ b/src/lists/TournamentsList.js
@@ -1,7 +1,6 @@
 import './TournamentList.scss';
 import DeleteTournamentButton from './DeleteTournamentButton';
 import TournamentNav from '../Tournaments/TournamentNav';
-import UserButtons from '../User/UserButtons';
 import {Link, useNavigate} from 'react-router-dom';
 import { connect } from 'react-redux';
 import { TournamentService } from "../services/TournamentService";
@@ -44,7 +43,6 @@ function TournamentsList({ tournaments, isAuthenticated }) {
 
     return (
         <div className="tournaments-container">
-            <UserButtons/>
             <TournamentNav/>
             <div className="tournaments-box">
                 <h1>Upcoming Tournaments</h1>