diff --git a/frontend/src/components/app-layout/NavBar.test.tsx b/frontend/src/components/app-layout/NavBar.test.tsx
index cce0e6c..a390d4b 100644
--- a/frontend/src/components/app-layout/NavBar.test.tsx
+++ b/frontend/src/components/app-layout/NavBar.test.tsx
@@ -1,31 +1,37 @@
-import { screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import NavBar from "./NavBar";
-import { renderWithProviders } from "../../tests/test-utils";
 
 describe("NavBar", () => {
-  it("renders an explicit homepage link", () => {
-    renderWithProviders(<NavBar />);
+  it("renders Working Groups link with correct URL", () => {
+    render(<NavBar />);
 
-    const homeLink = screen.getByRole("link", {
-      name: /gpu mode home/i,
+    const workingGroupsLink = screen.getByRole("link", {
+      name: /working groups/i,
     });
 
-    expect(homeLink).toHaveAttribute("href", "/home");
-    expect(homeLink).toHaveTextContent("Home");
+    expect(workingGroupsLink).toBeInTheDocument();
+    expect(workingGroupsLink).toHaveAttribute("href", "/working-groups");
+    // Internal link should not have target="_blank" or rel="noopener"
+    expect(workingGroupsLink).not.toHaveAttribute("target", "_blank");
+    expect(workingGroupsLink).not.toHaveAttribute("rel", "noopener");
   });
 
   it("renders all expected navigation links in correct order", () => {
-    renderWithProviders(<NavBar />);
+    render(<NavBar />);
 
     const links = screen.getAllByRole("link");
     const navigationLinks = links.filter((link) =>
-      ["News", "Events", "Projects"].includes(link.textContent || ""),
+      ["News", "Working Groups", "Events", "Resources", "Docs"].includes(
+        link.textContent || "",
+      ),
     );
 
-    expect(navigationLinks).toHaveLength(3);
+    expect(navigationLinks).toHaveLength(5);
     expect(navigationLinks[0]).toHaveTextContent("News");
-    expect(navigationLinks[1]).toHaveTextContent("Events");
-    expect(navigationLinks[2]).toHaveTextContent("Projects");
+    expect(navigationLinks[1]).toHaveTextContent("Working Groups");
+    expect(navigationLinks[2]).toHaveTextContent("Events");
+    expect(navigationLinks[3]).toHaveTextContent("Resources");
+    expect(navigationLinks[4]).toHaveTextContent("Docs");
   });
 });
diff --git a/frontend/src/components/app-layout/NavBar.tsx b/frontend/src/components/app-layout/NavBar.tsx
index 541503c..8f10edb 100644
--- a/frontend/src/components/app-layout/NavBar.tsx
+++ b/frontend/src/components/app-layout/NavBar.tsx
@@ -4,7 +4,6 @@ import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
 import SettingsBrightnessIcon from "@mui/icons-material/SettingsBrightness";
-import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
 import { useTheme } from "@mui/material/styles";
 import {
   flexRowCenter,
@@ -61,42 +60,15 @@ export default function NavBar() {
   ];
 
   const Brand = () => (
-    <Box
-      sx={{
-        ...brandStyle,
-        position: { xs: "sticky", sm: "static" },
-        left: 0,
-        zIndex: 1,
-        bgcolor: "background.paper",
-      }}
-    >
-      <Link
-        href="/home"
-        aria-label="GPU MODE home"
-        underline="none"
-        color="inherit"
-        sx={{ display: "block" }}
-      >
-        <Box
-          sx={{
-            ...flexRowCenter,
-            display: { xs: "flex", sm: "none" },
-            minHeight: 44,
-            px: 0.5,
-            fontSize: "1rem",
-            fontWeight: 600,
-          }}
-        >
-          <HomeRoundedIcon sx={{ fontSize: 22 }} />
-          Home
-        </Box>
-        <Box sx={{ display: { xs: "none", sm: "flex" } }}>
+    <Box sx={brandStyle}>
+      <Link href="/" underline="none" color="inherit">
+        <Box sx={{ ...flexRowCenter }}>
           <Box
             component="img"
             src={logoSrc}
-            alt=""
+            alt="GPU MODE"
             sx={{
-              height: 32,
+              height: { xs: 24, sm: 32 },
               maxWidth: "100%",
             }}
           />
@@ -108,19 +80,12 @@ export default function NavBar() {
   return (
     <AppBar position="fixed" sx={appBarStyle}>
       <ConstrainedContainer>
-        <Toolbar sx={{ px: 0, gap: { xs: 1, sm: 2 }, overflowX: "auto" }}>
+        <Toolbar sx={{ px: 0, gap: 2, overflowX: "auto" }}>
           {/* Left: Brand */}
           <Brand />
 
           {/* Middle: Links */}
-          <Box
-            sx={{
-              ...flexRowCenterMediumGap,
-              gap: { xs: 2.5, sm: 5 },
-              ml: { xs: 0, sm: 3 },
-              flexShrink: 0,
-            }}
-          >
+          <Box sx={{ ...flexRowCenterMediumGap, ml: 3, flexShrink: 0 }}>
             {links.map(({ label, href, external }) => (
               <Link
                 key={label}
diff --git a/frontend/src/components/app-layout/styles.tsx b/frontend/src/components/app-layout/styles.tsx
index 22c3434..3d60f25 100644
--- a/frontend/src/components/app-layout/styles.tsx
+++ b/frontend/src/components/app-layout/styles.tsx
@@ -15,10 +15,9 @@ export const brandStyle: SxProps<Theme> = {
   ...flexRowCenter,
   ...mediumText,
   fontWeight: "bold",
-  flexShrink: 0,
-  ml: { xs: 0, sm: -2 }, // Keep the mobile home control fully visible
+  ml: -2, // Negative left margin to reduce space from left edge
   mr: {
-    xs: 1, // margin on extra-small screens
+    xs: 2, // margin on extra-small screens
     sm: 4, // margin on small screens
     md: 8, // margin on medium screens
     lg: 16, // margin on large screens