diff --git a/components/main/uebersicht/VersionInfo.tsx b/components/main/uebersicht/VersionInfo.tsx
new file mode 100644
index 0000000..2220212
--- /dev/null
+++ b/components/main/uebersicht/VersionInfo.tsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import { Icon } from "@iconify/react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+
+const VersionInfo: React.FC = () => {
+  const appVersion =
+    useSelector((state: RootState) => state.variables.appVersion) ||
+    "Unbekannt";
+  const webVersion = useSelector(() => "1.0.0"); // Falls `webVersion` aus einer Config kommt
+
+  return (
+    <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 w-full">
+      <h2 className="text-lg font-semibold text-gray-700 mb-2">
+        Versionsinformationen
+      </h2>
+
+      <div className="flex flex-row p-2 space-x-2">
+        <Icon icon="bx:code-block" className="text-xl text-blue-400" />
+        <p className="text-sm text-gray-600">
+          Applikationsversion: {appVersion}
+        </p>
+      </div>
+
+      <div className="flex flex-row p-2 space-x-2">
+        <Icon icon="mdi:web" className="text-xl text-blue-400" />
+        <p className="text-sm text-gray-600">Webversion: {webVersion}</p>
+      </div>
+    </div>
+  );
+};
+
+export default VersionInfo;
diff --git a/config/webVersion.ts b/config/webVersion.ts
index aad6439..3703dc7 100644
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -5,5 +5,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.21";
+const webVersion = "1.6.22";
 export default webVersion;
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 1b78dc6..95ae685 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -18,6 +18,7 @@ import {
 import webVersion from "../config/webVersion";
 import Last20MessagesTable from "../components/main/uebersicht/Last20MessagesTable";
 import NetworkInfo from "../components/main/uebersicht/NetworkInfo";
+import VersionInfo from "../components/main/uebersicht/VersionInfo";
 
 function Dashboard() {
   const router = useRouter();
@@ -168,30 +169,7 @@ function Dashboard() {
              flex flex-col gap-2"
         >
           <div className="bg-gray-50 p-4 sm:p-3 md:p-4 lg:p-2 xl:p-2 rounded-lg shadow-sm border border-gray-200 w-full ">
-            <h2 className="text-lg 2xl:text-lg xl:text-sm font-semibold text-gray-700 mb-2 ">
-              Versionsinformationen
-            </h2>
-
-            <div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2 laptop:p-0 xl:p-0">
-              <Icon
-                icon="bx:code-block"
-                className="text-xl 2xl:text-xl xl:text-base text-blue-400"
-              />
-              <p className="text-sm 2xl:text-lg text-gray-600">
-                <span className="font-bold"></span> Applikationsversion:{" "}
-                {appVersion}
-              </p>
-            </div>
-
-            <div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2 laptop:p-0 xl:p-0">
-              <Icon
-                icon="mdi:web"
-                className="text-xl lg:text-base text-blue-400"
-              />
-              <p className="text-sm sm:text-xs md:text-sm lg:text-base text-gray-600">
-                <span className="font-bold"></span> Webversion: {webVersion}
-              </p>
-            </div>
+            <VersionInfo />
           </div>
 
           {renderBaugruppentraeger()}