diff --git a/src/component/Navigation/Navigation.tsx b/src/component/Navigation/Navigation.tsx
index 6374455..4b628c4 100644
--- a/src/component/Navigation/Navigation.tsx
+++ b/src/component/Navigation/Navigation.tsx
@@ -1,154 +1,174 @@
 import React, { useEffect, useState } from "react";
 import {
-    ChartPieIcon,
-    DocumentTextIcon,
-    EnvelopeIcon,
-    CommandLineIcon,
-    Bars3Icon,
-    SunIcon,
-    MoonIcon,
+  ChartPieIcon,
+  DocumentTextIcon,
+  EnvelopeIcon,
+  CommandLineIcon,
+  Bars3Icon,
+  SunIcon,
+  MoonIcon,
 } from "@heroicons/react/24/outline";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import axios from "axios";
 
 interface NavigationProps {
-    children: React.ReactElement;
+  children: React.ReactElement;
 }
 
 const Navigation: React.FC<NavigationProps> = ({
-    children,
+  children,
 }: NavigationProps) => {
-    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-    const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
+  const [user, setUser] = useState(null);
+  const navigate = useNavigate();
 
-    const [theme, setTheme] = useState(
-        localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
-    );
+  const [theme, setTheme] = useState(
+    localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
+  );
 
-    // update state on toggle
-    const handleToggle = (e) => {
-        if (theme === "light") {
-            setTheme("dark");
-        } else {
-            setTheme("light");
-        }
-    };
+  const handleToggle = (e) => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else {
+      setTheme("light");
+    }
+  };
 
-    // set theme state in localstorage on mount & also update localstorage on state change
-    useEffect(() => {
-        localStorage.setItem("theme", theme);
-        const localTheme = localStorage.getItem("theme");
-        // add custom data-theme attribute to html tag required to update theme using DaisyUI
-        document.querySelector("html").setAttribute("data-theme", localTheme);
-    }, [theme]);
+  useEffect(() => {
+    axios.get("/api/users/me").then((res) => {
+      if (res.data.username.trim() === "") {
+        navigate("/login");
+      }
+      setUser(res.data);
+    });
+    localStorage.setItem("theme", theme);
+    const localTheme = localStorage.getItem("theme");
+    document.querySelector("html").setAttribute("data-theme", localTheme);
+  }, [theme]);
 
-    return (
-        <div className="app h-screen">
+  return (
+    <>
+      {user && (
+        <>
+          <div className="app h-screen">
             <div className="drawer">
-                <input
-                    id="my-drawer"
-                    type="checkbox"
-                    className="drawer-toggle"
-                    checked={isDrawerOpen}
-                />
-                <div className="drawer-content h-full">
-                    <div className="p-6 flex justify-between">
-                        <div className="btn btn-ghost" onClick={toggleDrawer}>
-                            <Bars3Icon className="size-6" />
+              <input
+                id="my-drawer"
+                type="checkbox"
+                className="drawer-toggle"
+                checked={isDrawerOpen}
+              />
+              <div className="drawer-content h-full">
+                <div className="p-6 flex justify-between">
+                  <div className="btn btn-ghost" onClick={toggleDrawer}>
+                    <Bars3Icon className="size-6" />
+                  </div>
+                  <label className="swap swap-rotate">
+                    <input type="checkbox" onChange={handleToggle} />
+
+                    <SunIcon className="size-6 swap-off" />
+                    <MoonIcon className="size-6 swap-on" />
+                  </label>
+                </div>
+                {children}
+              </div>
+
+              <div className="drawer-side">
+                <div className="drawer-overlay" onClick={toggleDrawer}></div>
+                <div className="h-full menu bg-base-200 text-base-content w-80">
+                  {user ? (
+                    <li>
+                      <div className="dropdown dropdown-bottom h-full">
+                        <div
+                          tabIndex={0}
+                          role="button"
+                          className="flex avatar items-center space-x-4 w-64"
+                        >
+                          <a>{user.username}</a>
                         </div>
-                        <label className="swap swap-rotate">
-                            <input type="checkbox" onChange={handleToggle} />
-
-                            <SunIcon className="size-6 swap-off" />
-                            <MoonIcon className="size-6 swap-on" />
-                        </label>
-                    </div>
-                    {children}
-                </div>
-
-                <div className="drawer-side">
-                    <div className="drawer-overlay" onClick={toggleDrawer}></div>
-                    <div className="h-full menu bg-base-200 text-base-content w-80">
-                        <li>
-                            <div className="dropdown dropdown-bottom h-full">
-                                <div
-                                    tabIndex={0}
-                                    role="button"
-                                    className="flex avatar items-center space-x-4 w-64"
-                                >
-                                    <div className="w-10 rounded-full">
-                                        <img
-                                            alt="Tailwind CSS Navbar component"
-                                            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
-                                        />
-                                    </div>
-                                    <a>Malopieds</a>
-                                </div>
-                                <ul
-                                    tabIndex={0}
-                                    className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
-                                >
-                                    <li>
-                                        <Link to="/profile" onClick={toggleDrawer}>
-                                            Profile
-                                        </Link>
-                                    </li>
-                                    <li>
-                                        <Link to="/settings" onClick={toggleDrawer}>
-                                            Settings
-                                        </Link>
-                                    </li>
-                                    <div className="divider" onClick={toggleDrawer}></div>
-                                    <li>
-                                        <Link to="login" onClick={toggleDrawer}>
-                                            Log Out
-                                        </Link>
-                                    </li>
-                                </ul>
-                            </div>
-                        </li>
-                        <li>
-                            <div>
-                                <ChartPieIcon className="size-6" />
-                                <Link to="/admin" onClick={toggleDrawer}>
-                                    Admin
-                                </Link>
-                            </div>
-                        </li>
-                        <li>
-                            <div>
-                                <ChartPieIcon className="size-6" />
-                                <Link to="/" onClick={toggleDrawer}>
-                                    Dashboard
-                                </Link>
-                            </div>
-                        </li>
-                        <li>
-                            <div>
-                                <DocumentTextIcon className="size-6" />
-                                <Link to="/tps" onClick={toggleDrawer}>
-                                    TPs
-                                </Link>
-                            </div>
-                        </li>
-                        <li>
-                            <div>
-                                <CommandLineIcon className="size-6" />
-                                <Link to="/instances" onClick={toggleDrawer}>
-                                    Instances
-                                </Link>
-                            </div>
-                        </li>
-                        <li>
-                            <div onClick={toggleDrawer}>
-                                <EnvelopeIcon className="size-6" />
-                                <Link to="/messages">Messages</Link>
-                            </div>
-                        </li>
-                    </div>
+                        <ul
+                          tabIndex={0}
+                          className="dropdown-content menu bg-base-100 rounded-box z-[1] w-72 shadow"
+                        >
+                          <li>
+                            <Link to="/profile" onClick={toggleDrawer}>
+                              Profile
+                            </Link>
+                          </li>
+                          <li>
+                            <Link to="/settings" onClick={toggleDrawer}>
+                              Settings
+                            </Link>
+                          </li>
+                          <div className="divider" onClick={toggleDrawer}></div>
+                          <li>
+                            <Link to="login" onClick={toggleDrawer}>
+                              Log Out
+                            </Link>
+                          </li>
+                        </ul>
+                      </div>
+                    </li>
+                  ) : (
+                    <li>
+                      <Link to="login" onClick={toggleDrawer}>
+                        Log Out
+                      </Link>
+                    </li>
+                  )}
+                  {user && user.roles.includes("root") && (
+                    <li>
+                      <div>
+                        <ChartPieIcon className="size-6" />
+                        <Link to="/admin" onClick={toggleDrawer}>
+                          Admin
+                        </Link>
+                      </div>
+                    </li>
+                  )}
+                  {user && (
+                    <>
+                      <li>
+                        <div>
+                          <ChartPieIcon className="size-6" />
+                          <Link to="/" onClick={toggleDrawer}>
+                            Dashboard
+                          </Link>
+                        </div>
+                      </li>
+                      <li>
+                        <div>
+                          <DocumentTextIcon className="size-6" />
+                          <Link to="/tps" onClick={toggleDrawer}>
+                            TPs
+                          </Link>
+                        </div>
+                      </li>
+                      <li>
+                        <div>
+                          <CommandLineIcon className="size-6" />
+                          <Link to="/instances" onClick={toggleDrawer}>
+                            Instances
+                          </Link>
+                        </div>
+                      </li>
+                      <li>
+                        <div onClick={toggleDrawer}>
+                          <EnvelopeIcon className="size-6" />
+                          <Link to="/messages">Messages</Link>
+                        </div>
+                      </li>
+                    </>
+                  )}
                 </div>
+              </div>
             </div>
-        </div>
-    );
+          </div>
+        </>
+      )}
+    </>
+  );
 };
 
 export default Navigation;