diff --git a/frontend/src/app/(app)/layout/horizontal/header/Header.tsx b/frontend/src/app/(app)/layout/horizontal/header/Header.tsx
index cc027c1..7be73c1 100644
--- a/frontend/src/app/(app)/layout/horizontal/header/Header.tsx
+++ b/frontend/src/app/(app)/layout/horizontal/header/Header.tsx
@@ -9,8 +9,8 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { styled } from '@mui/material/styles';
 
 import { IconMenu2 } from "@tabler/icons-react";
+import About from "../../vertical/header/About";
 import ApiDocsLink from "../../vertical/header/ApiDocsLink";
-import Notifications from "../../vertical/header/Notification";
 import Profile from "../../vertical/header/Profile";
 import Search from "../../vertical/header/Search";
 import Logo from "../../shared/logo/Logo";
@@ -85,7 +85,7 @@ export default function Header() {
               )}
             </IconButton>
             <ApiDocsLink />
-            <Notifications />
+            <About />
             <Profile />
           </Stack>
         </ToolbarStyled>
diff --git a/frontend/src/app/(app)/layout/vertical/header/About.tsx b/frontend/src/app/(app)/layout/vertical/header/About.tsx
new file mode 100644
index 0000000..27ed723
--- /dev/null
+++ b/frontend/src/app/(app)/layout/vertical/header/About.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { Icon } from "@iconify/react";
+import { useEffect, useState } from "react";
+
+interface ServerVersion {
+  version: string;
+  buildTime: string;
+  gitCommit: string;
+}
+
+// The /api/v1/version probe predates the {success,data} envelope the rest of
+// the API uses and returns bare snake_case JSON, so it is fetched directly
+// rather than through the api client (which requires the envelope). Both
+// shapes are accepted in case that endpoint is ever normalised.
+async function fetchVersion(signal: AbortSignal): Promise<ServerVersion> {
+  const res = await fetch("/api/v1/version", { signal });
+  if (!res.ok) throw new Error(`version request failed (${res.status})`);
+  const body = await res.json();
+  const v = body?.data ?? body ?? {};
+  return {
+    version: v.version ?? v.Version ?? "unknown",
+    buildTime: v.build_time ?? v.buildTime ?? "",
+    gitCommit: v.git_commit ?? v.gitCommit ?? "",
+  };
+}
+
+function formatBuildTime(raw: string): string {
+  if (!raw || raw === "unknown") return "—";
+  const d = new Date(raw);
+  return Number.isNaN(d.getTime()) ? raw : d.toLocaleString();
+}
+
+// About shows the running server's build so an operator can confirm which
+// version is deployed — and quote it verbatim in a bug report — without
+// shelling onto the host.
+export default function About() {
+  const [open, setOpen] = useState(false);
+  const [info, setInfo] = useState<ServerVersion | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const controller = new AbortController();
+    setError(null);
+    fetchVersion(controller.signal)
+      .then(setInfo)
+      .catch((err) => {
+        if (err?.name !== "AbortError") setError("Could not read the server version.");
+      });
+    return () => controller.abort();
+  }, [open]);
+
+  const summary = info
+    ? `OrchestrAD ${info.version}${info.gitCommit ? ` (${info.gitCommit})` : ""}`
+    : "";
+
+  const rows: Array<[string, string]> = info
+    ? [
+        ["Version", info.version],
+        ["Built", formatBuildTime(info.buildTime)],
+        ["Commit", info.gitCommit || "—"],
+      ]
+    : [];
+
+  return (
+    <>
+      <Tooltip title="About OrchestrAD">
+        <IconButton size="large" color="inherit" aria-label="About OrchestrAD" onClick={() => setOpen(true)}>
+          <Icon icon="solar:info-circle-line-duotone" width="21" height="21" />
+        </IconButton>
+      </Tooltip>
+
+      <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth="xs">
+        <DialogTitle>About OrchestrAD</DialogTitle>
+        <DialogContent dividers>
+          <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
+            Active Directory rule automation.
+          </Typography>
+
+          {error && <Typography variant="body2" color="error">{error}</Typography>}
+
+          {!info && !error && (
+            <Typography variant="body2" color="textSecondary">Reading server version…</Typography>
+          )}
+
+          {info && (
+            <Stack spacing={1.25}>
+              {rows.map(([label, value]) => (
+                <Stack key={label} direction="row" spacing={2} alignItems="baseline">
+                  <Typography variant="caption" color="textSecondary" sx={{ minWidth: 72 }}>
+                    {label}
+                  </Typography>
+                  <Typography variant="body2" sx={{ fontFamily: "monospace", wordBreak: "break-all" }}>
+                    {value}
+                  </Typography>
+                </Stack>
+              ))}
+            </Stack>
+          )}
+
+          <Box sx={{ mt: 3 }}>
+            <Typography variant="caption" color="textSecondary">
+              API reference:{" "}
+              <a href="/api/docs" target="_blank" rel="noopener noreferrer">/api/docs</a>
+            </Typography>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          {info && (
+            <Button
+              startIcon={<ContentCopyIcon sx={{ fontSize: 16 }} />}
+              onClick={() => { void navigator.clipboard?.writeText(summary).catch(() => {}); }}
+            >
+              Copy
+            </Button>
+          )}
+          <Button onClick={() => setOpen(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
diff --git a/frontend/src/app/(app)/layout/vertical/header/AppLinks.tsx b/frontend/src/app/(app)/layout/vertical/header/AppLinks.tsx
deleted file mode 100644
index c4014f4..0000000
--- a/frontend/src/app/(app)/layout/vertical/header/AppLinks.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import { Grid } from '@mui/material';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import * as dropdownData from './data';
-import Link from 'next/link';
-import React from 'react';
-
-const AppLinks = () => {
-  return (
-    (<Grid container spacing={3} mb={4}>
-      {dropdownData.appsLink.map((links, index) => (
-        <Grid
-          key={index}
-          size={{
-            lg: 6
-          }}>
-          <Link href={links.href} className="hover-text-primary">
-            <Stack direction="row" spacing={2}>
-              <Box
-                minWidth="45px"
-                height="45px"
-                bgcolor="grey.100"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-              >
-                <Avatar
-                  src={links.avatar}
-                  alt={links.avatar}
-                  sx={{
-                    width: 24,
-                    height: 24,
-                    borderRadius: 0,
-                  }}
-                />
-              </Box>
-              <Box>
-                <Typography
-                  variant="subtitle2"
-                  fontWeight={600}
-                  color="textPrimary"
-                  noWrap
-                  className="text-hover"
-                  sx={{
-                    width: '240px',
-                  }}
-                >
-                  {links.title}
-                </Typography>
-                <Typography
-                  color="textSecondary"
-                  variant="subtitle2"
-                  fontSize="12px"
-                  sx={{
-                    width: '240px',
-                  }}
-                  noWrap
-                >
-                  {links.subtext}
-                </Typography>
-              </Box>
-            </Stack>
-          </Link>
-        </Grid>
-      ))}
-    </Grid>)
-  );
-};
-
-export default AppLinks;
diff --git a/frontend/src/app/(app)/layout/vertical/header/Header.tsx b/frontend/src/app/(app)/layout/vertical/header/Header.tsx
index 4de1b34..fc884ad 100644
--- a/frontend/src/app/(app)/layout/vertical/header/Header.tsx
+++ b/frontend/src/app/(app)/layout/vertical/header/Header.tsx
@@ -8,8 +8,8 @@ import { styled } from '@mui/material/styles';
 import config from '@/app/context/config'
 import { useContext } from "react";
 import { Icon } from "@iconify/react";
+import About from "./About";
 import ApiDocsLink from "./ApiDocsLink";
-import Notifications from "./Notification";
 import Profile from "./Profile";
 import Search from "./Search";
 
@@ -88,7 +88,7 @@ const Header = () => {
             </IconButton>
 
             <ApiDocsLink />
-            <Notifications />
+            <About />
             <Profile />
           </Stack>
         </ToolbarStyled>
diff --git a/frontend/src/app/(app)/layout/vertical/header/Notification.tsx b/frontend/src/app/(app)/layout/vertical/header/Notification.tsx
deleted file mode 100644
index e95b4f2..0000000
--- a/frontend/src/app/(app)/layout/vertical/header/Notification.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useState } from "react";
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Typography from '@mui/material/Typography';
-import * as dropdownData from "./data";
-import Scrollbar from "@/app/components/custom-scroll/Scrollbar";
-
-import { Icon } from "@iconify/react";
-import { Stack } from "@mui/system";
-import Link from "next/link";
-
-const Notifications = () => {
-  const [anchorEl2, setAnchorEl2] = useState<HTMLElement | null>(null);
-
-  const handleClick2 = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl2(event.currentTarget);
-  };
-
-  const handleClose2 = () => {
-    setAnchorEl2(null);
-  };
-
-  return (
-    <Box>
-      <Button
-        size="large"
-        aria-label="show 11 new notifications"
-        aria-controls="msgs-menu"
-        aria-haspopup="true"
-        className="btn-rounded-circle-40"
-        color="inherit"
-        onClick={handleClick2}
-      >
-        <Box
-          sx={{
-            position: "relative",
-            top: "5px",
-            animationName: "pulse",
-          }}
-        >
-          <Icon icon="solar:bell-bing-line-duotone" width="24" height="24" />
-          <Box
-            sx={{
-              position: "absolute",
-              top: "-14px",
-              right: "-5px",
-              height: "18px",
-              width: "18px",
-              zIndex: "10",
-              border: "2px solid #4bd08b",
-              borderRadius: "70px",
-              animationIterationCount: "infinite !important",
-              animation: "heartbit 1s ease-out"
-            }}
-          ></Box>
-          <Box
-            sx={{
-              width: "4px",
-              height: "4px",
-              borderRadius: "30px",
-              position: "absolute",
-              right: "2px",
-              top: "-7px",
-              backgroundColor: "success.main"
-            }}
-          ></Box>
-        </Box>
-      </Button>
-      {/* ------------------------------------------- */}
-      {/* Message Dropdown */}
-      {/* ------------------------------------------- */}
-      <Menu
-        id="msgs-menu"
-        anchorEl={anchorEl2}
-        keepMounted
-        open={Boolean(anchorEl2)}
-        onClose={handleClose2}
-        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
-        transformOrigin={{ horizontal: "right", vertical: "top" }}
-        sx={{
-          "& .MuiMenu-paper": {
-            width: "360px",
-          },
-        }}
-      >
-        <Stack
-          direction="row"
-          py={2}
-          px={4}
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <Typography variant="h6">Notifications</Typography>
-          <Chip label="5 new" color="primary" size="small" />
-        </Stack>
-        <Scrollbar sx={{ height: "385px" }}>
-          {dropdownData.notifications.map((notification, index) => (
-            <Box key={index}>
-              <MenuItem sx={{ py: 2, px: 4 }}>
-                <Stack direction="row" spacing={2}>
-                  <Avatar
-                    src={notification.avatar}
-                    alt={notification.avatar}
-                    sx={{
-                      width: 48,
-                      height: 48,
-                    }}
-                  />
-                  <Box>
-                    <Typography
-                      variant="subtitle2"
-                      color="textPrimary"
-                      fontWeight={600}
-                      noWrap
-                      sx={{
-                        width: "240px",
-                      }}
-                    >
-                      {notification.title}
-                    </Typography>
-                    <Typography
-                      color="textSecondary"
-                      variant="subtitle2"
-                      sx={{
-                        width: "240px",
-                      }}
-                      noWrap
-                    >
-                      {notification.subtitle}
-                    </Typography>
-                  </Box>
-                </Stack>
-              </MenuItem>
-            </Box>
-          ))}
-        </Scrollbar>
-        <Box p={3} pb={1}>
-          <Button
-            href="/apps/email"
-            variant="outlined"
-            component={Link}
-            color="primary"
-            fullWidth
-          >
-            See all Notifications
-          </Button>
-        </Box>
-      </Menu>
-    </Box>
-  );
-};
-
-export default Notifications;
diff --git a/frontend/src/app/(app)/layout/vertical/header/Profile.tsx b/frontend/src/app/(app)/layout/vertical/header/Profile.tsx
index 6805748..44fe683 100644
--- a/frontend/src/app/(app)/layout/vertical/header/Profile.tsx
+++ b/frontend/src/app/(app)/layout/vertical/header/Profile.tsx
@@ -45,7 +45,7 @@ const Profile = () => {
     <Box>
       <Button
         size="large"
-        aria-label="show 11 new notifications"
+        aria-label="Account menu"
         color="inherit"
         aria-controls="msgs-menu"
         aria-haspopup="true"
diff --git a/frontend/src/app/(app)/layout/vertical/header/QuickLinks.tsx b/frontend/src/app/(app)/layout/vertical/header/QuickLinks.tsx
deleted file mode 100644
index b5a4d56..0000000
--- a/frontend/src/app/(app)/layout/vertical/header/QuickLinks.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import * as dropdownData from './data';
-import Link from 'next/link';
-
-const QuickLinks = () => {
-  return (
-    <>
-      <Typography variant="h5">Quick Links</Typography>
-      <Stack spacing={2} mt={2}>
-        {dropdownData.pageLinks.map((pagelink, index) => (
-          <Link href={pagelink.href} key={index} className="hover-text-primary">
-            <Typography
-              variant="subtitle2"
-              color="textPrimary"
-              className="text-hover"
-              fontWeight={600}
-            >
-              {pagelink.title}
-            </Typography>
-          </Link>
-        ))}
-      </Stack>
-    </>
-  );
-};
-
-export default QuickLinks;
diff --git a/frontend/src/app/(app)/layout/vertical/header/data.ts b/frontend/src/app/(app)/layout/vertical/header/data.ts
deleted file mode 100644
index b9faca7..0000000
--- a/frontend/src/app/(app)/layout/vertical/header/data.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-// Notifications dropdown
-
-interface notificationType {
-  avatar: string;
-  title: string;
-  subtitle: string;
-}
-
-const notifications: notificationType[] = [
-  {
-    avatar: "/images/profile/user-1.jpg",
-    title: "Roman Joined the Team!",
-    subtitle: "Congratulate him",
-  },
-  {
-    avatar: "/images/profile/user-2.jpg",
-    title: "New message received",
-    subtitle: "Salma sent you new message",
-  },
-  {
-    avatar: "/images/profile/user-3.jpg",
-    title: "New Payment received",
-    subtitle: "Check your earnings",
-  },
-  {
-    avatar: "/images/profile/user-4.jpg",
-    title: "Jolly completed tasks",
-    subtitle: "Assign her new tasks",
-  },
-  {
-    avatar: "/images/profile/user-1.jpg",
-    title: "Roman Joined the Team!",
-    subtitle: "Congratulate him",
-  },
-  {
-    avatar: "/images/profile/user-2.jpg",
-    title: "New message received",
-    subtitle: "Salma sent you new message",
-  },
-  {
-    avatar: "/images/profile/user-3.jpg",
-    title: "New Payment received",
-    subtitle: "Check your earnings",
-  },
-  {
-    avatar: "/images/profile/user-4.jpg",
-    title: "Jolly completed tasks",
-    subtitle: "Assign her new tasks",
-  },
-];
-
-// Messages dropdown
-
-interface messageType {
-  avatar: string;
-  title: string;
-  subtitle: string;
-  time: string;
-}
-
-const messages: messageType[] = [
-  {
-    avatar: "/images/profile/user1.jpg",
-    title: "Roman Joined the Team!",
-    subtitle: "Congratulate him",
-    time: '9:08 AM'
-  },
-  {
-    avatar: "/images/profile/user2.jpg",
-    title: "New message received",
-    subtitle: "Salma sent you new message",
-    time: '19:08 PM'
-  },
-  {
-    avatar: "/images/profile/user3.jpg",
-    title: "New Payment received",
-    subtitle: "Check your earnings",
-    time: '4:15 AM'
-  },
-  {
-    avatar: "/images/profile/user4.jpg",
-    title: "Jolly completed tasks",
-    subtitle: "Assign her new tasks",
-    time: '9:08 AM'
-  },
-  {
-    avatar: "/images/profile/user5.jpg",
-    title: "Roman Joined the Team!",
-    subtitle: "Congratulate him",
-    time: '12:08 AM'
-  },
-];
-
-
-// apps dropdown
-
-interface appsLinkType {
-  href: string;
-  title: string;
-  subtext: string;
-  avatar: string;
-}
-
-const appsLink: appsLinkType[] = [
-  {
-    href: "/apps/chats",
-    title: "Chat Application",
-    subtext: "New messages arrived",
-    avatar: "/images/svgs/icon-dd-chat.svg",
-  },
-  {
-    href: "/apps/ecommerce/shop",
-    title: "eCommerce App",
-    subtext: "New stock available",
-    avatar: "/images/svgs/icon-dd-cart.svg",
-  },
-  {
-    href: "/apps/notes",
-    title: "Notes App",
-    subtext: "To-do and Daily tasks",
-    avatar: "/images/svgs/icon-dd-invoice.svg",
-  },
-  {
-    href: "/apps/calendar",
-    title: "Calendar App",
-    subtext: "Get dates",
-    avatar: "/images/svgs/icon-dd-date.svg",
-  },
-  {
-    href: "/apps/contacts",
-    title: "Contact Application",
-    subtext: "2 Unsaved Contacts",
-    avatar: "/images/svgs/icon-dd-mobile.svg",
-  },
-  {
-    href: "/apps/tickets",
-    title: "Tickets App",
-    subtext: "Submit tickets",
-    avatar: "/images/svgs/icon-dd-lifebuoy.svg",
-  },
-  {
-    href: "/apps/email",
-    title: "Email App",
-    subtext: "Get new emails",
-    avatar: "/images/svgs/icon-dd-message-box.svg",
-  },
-  {
-    href: "/apps/blog/post",
-    title: "Blog App",
-    subtext: "added new blog",
-    avatar: "/images/svgs/icon-dd-application.svg",
-  },
-];
-
-interface LinkType {
-  href: string;
-  title: string;
-}
-
-const pageLinks: LinkType[] = [
-  {
-    href: "/theme-pages/pricing",
-    title: "Pricing Page",
-  },
-  {
-    href: "/login",
-    title: "Sign In",
-  },
-  {
-    href: "/404",
-    title: "404 Error Page",
-  },
-  {
-    href: "/apps/note",
-    title: "Notes App",
-  },
-  {
-    href: "/apps/user-profile/profile",
-    title: "User Application",
-  },
-  {
-    href: "/apps/blog/post",
-    title: "Blog Design",
-  },
-  {
-    href: "/apps/ecommerce/checkout",
-    title: "Shopping Cart",
-  },
-];
-
-export { notifications,   pageLinks, appsLink, messages };