diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index df672c1..f826f9d 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,40 +1,24 @@
-import { signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
 import SearchBar from "@/components/SearchBar";
-import useAccountStore from "@/store/account";
-import ProfilePhoto from "@/components/ProfilePhoto";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import ToggleDarkMode from "./ToggleDarkMode";
-import useLocalSettingsStore from "@/store/localSettings";
 import NewLinkModal from "./ModalContent/NewLinkModal";
 import NewCollectionModal from "./ModalContent/NewCollectionModal";
-import Link from "next/link";
 import UploadFileModal from "./ModalContent/UploadFileModal";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import MobileNavigation from "./MobileNavigation";
+import ProfileDropdown from "./ProfileDropdown";
 
 export default function Navbar() {
-  const { settings, updateSettings } = useLocalSettingsStore();
-
-  const { account } = useAccountStore();
-
   const router = useRouter();
 
   const [sidebar, setSidebar] = useState(false);
 
   const { width } = useWindowDimensions();
 
-  const handleToggle = () => {
-    if (settings.theme === "dark") {
-      updateSettings({ theme: "light" });
-    } else {
-      updateSettings({ theme: "dark" });
-    }
-  };
-
   useEffect(() => {
     setSidebar(false);
     document.body.style.overflow = "auto";
@@ -120,55 +104,7 @@ export default function Navbar() {
           </ul>
         </div>
 
-        <div className="dropdown dropdown-end">
-          <div
-            tabIndex={0}
-            role="button"
-            onMouseDown={dropdownTriggerer}
-            className="btn btn-circle btn-ghost"
-          >
-            <ProfilePhoto
-              src={account.image ? account.image : undefined}
-              priority={true}
-            />
-          </div>
-          <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
-            <li>
-              <Link
-                href="/settings/account"
-                onClick={() => (document?.activeElement as HTMLElement)?.blur()}
-                tabIndex={0}
-                role="button"
-              >
-                Settings
-              </Link>
-            </li>
-            <li className="block sm:hidden">
-              <div
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  handleToggle();
-                }}
-                tabIndex={0}
-                role="button"
-              >
-                Switch to {settings.theme === "light" ? "Dark" : "Light"}
-              </div>
-            </li>
-            <li>
-              <div
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  signOut();
-                }}
-                tabIndex={0}
-                role="button"
-              >
-                Logout
-              </div>
-            </li>
-          </ul>
-        </div>
+        <ProfileDropdown />
       </div>
 
       <MobileNavigation />
diff --git a/components/ProfileDropdown.tsx b/components/ProfileDropdown.tsx
new file mode 100644
index 0000000..2ee27ac
--- /dev/null
+++ b/components/ProfileDropdown.tsx
@@ -0,0 +1,71 @@
+import useLocalSettingsStore from "@/store/localSettings";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import ProfilePhoto from "./ProfilePhoto";
+import useAccountStore from "@/store/account";
+import Link from "next/link";
+import { signOut } from "next-auth/react";
+
+export default function ProfileDropdown() {
+  const { settings, updateSettings } = useLocalSettingsStore();
+  const { account } = useAccountStore();
+
+  const handleToggle = () => {
+    if (settings.theme === "dark") {
+      updateSettings({ theme: "light" });
+    } else {
+      updateSettings({ theme: "dark" });
+    }
+  };
+
+  return (
+    <div className="dropdown dropdown-end">
+      <div
+        tabIndex={0}
+        role="button"
+        onMouseDown={dropdownTriggerer}
+        className="btn btn-circle btn-ghost"
+      >
+        <ProfilePhoto
+          src={account.image ? account.image : undefined}
+          priority={true}
+        />
+      </div>
+      <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
+        <li>
+          <Link
+            href="/settings/account"
+            onClick={() => (document?.activeElement as HTMLElement)?.blur()}
+            tabIndex={0}
+            role="button"
+          >
+            Settings
+          </Link>
+        </li>
+        <li className="block sm:hidden">
+          <div
+            onClick={() => {
+              (document?.activeElement as HTMLElement)?.blur();
+              handleToggle();
+            }}
+            tabIndex={0}
+            role="button"
+          >
+            Switch to {settings.theme === "light" ? "Dark" : "Light"}
+          </div>
+        </li>
+        <li>
+          <div
+            onClick={() => {
+              (document?.activeElement as HTMLElement)?.blur();
+              signOut();
+            }}
+            tabIndex={0}
+            role="button"
+          >
+            Logout
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx
index ca6f6cf..a6b37b1 100644
--- a/components/SettingsSidebar.tsx
+++ b/components/SettingsSidebar.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
-  const LINKWARDEN_VERSION = "v2.5.2";
+  const LINKWARDEN_VERSION = process.env.version;
 
   const { collections } = useCollectionStore();
 
diff --git a/next.config.js b/next.config.js
index 71cfd8e..ebb9b54 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,10 +1,15 @@
 /** @type {import('next').NextConfig} */
+const { version } = require("./package.json");
+
 const nextConfig = {
   reactStrictMode: true,
   images: {
     domains: ["t2.gstatic.com"],
     minimumCacheTTL: 10,
   },
+  env: {
+    version,
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
index 39069be..a08ae19 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "0.0.0",
+  "version": "v2.5.4",
   "main": "index.js",
   "repository": "https://github.com/linkwarden/linkwarden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",