diff --git a/components/headerComponents/TopNavigationItems.tsx b/components/headerComponents/TopNavigationItems.tsx
index c60a3df..fd14abb 100644
--- a/components/headerComponents/TopNavigationItems.tsx
+++ b/components/headerComponents/TopNavigationItems.tsx
@@ -16,6 +16,9 @@ export function TopNavigationItems({ items }: TopNavigationItemsProps) {
       <Link href="/" className="flex items-center space-x-2">
         {/* <Icons.logo className="h-6 w-6" /> */}
         <span className="inline-block font-bold">{siteConfig.name}</span>
+        <span className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
+          v{siteConfig.version}
+        </span>
       </Link>
       {/* TOP NAVIGATION ITEMS */}
       {/* {items?.length ? (
diff --git a/config/site.ts b/config/site.ts
index 025dae4..6def428 100644
--- a/config/site.ts
+++ b/config/site.ts
@@ -1,7 +1,11 @@
+// Import package information dynamically
+import packageInfo from "../package.json"
+
 export type SiteConfig = typeof siteConfig
 
 export const siteConfig = {
   name: "LUMINA",
+  version: packageInfo.version, // Use the version from package.json
   description:
     "A beautiful Nostr client for images.",
   mainNav: [