diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx
index b97bc00a1..60a9a756d 100644
--- a/src/components/Settings/SettingsMenu.tsx
+++ b/src/components/Settings/SettingsMenu.tsx
@@ -8,6 +8,7 @@ import {
   Indicator,
   Alert,
   Notification,
+  Anchor,
 } from '@mantine/core';
 import { useElementSize, useHotkeys, useViewportSize } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
@@ -18,46 +19,33 @@ import AdvancedSettings from './AdvancedSettings';
 import CommonSettings from './CommonSettings';
 import Credits from './Credits';
 import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
+import Link from 'next/link';
+import { NextLink } from '@mantine/next';
 
 function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
   const { t } = useTranslation('settings/common');
   const { height, width } = useViewportSize();
 
   return (
-    <>
-      <Notification
-        icon={<IconInfoCircle size={25} />}
-        disallowClose
-        color="teal"
-        radius="md"
-        title="New update available"
-        hidden={newVersionAvailable === ''}
-      >
-        {
-          //TODO: Translate and add link to release page}
-        }
-        Version <b>{newVersionAvailable}</b> is available, update now!
-      </Notification>
-
-      <Tabs defaultValue="Common">
-        <Tabs.List grow>
-          <Tabs.Tab value="Common">{t('tabs.common')}</Tabs.Tab>
-          <Tabs.Tab value="Customizations">{t('tabs.customizations')}</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel data-autofocus value="Common">
-          <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
-            <CommonSettings />
-            <Credits />
-          </ScrollArea>
-        </Tabs.Panel>
-        <Tabs.Panel value="Customizations">
-          <ScrollArea style={{ height: height - 120 }} offsetScrollbars>
-            <AdvancedSettings />
-            <Credits />
-          </ScrollArea>
-        </Tabs.Panel>
-      </Tabs>
-    </>
+    <Tabs defaultValue="Common">
+      <Tabs.List grow>
+        <Tabs.Tab value="Common">{t('tabs.common')}</Tabs.Tab>
+        <Tabs.Tab value="Customizations">{t('tabs.customizations')}</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel data-autofocus value="Common">
+        <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+          {newVersionAvailable && <NewUpdateIndicator newVersionAvailable={newVersionAvailable} />}
+          <CommonSettings />
+          <Credits />
+        </ScrollArea>
+      </Tabs.Panel>
+      <Tabs.Panel value="Customizations">
+        <ScrollArea style={{ height: height - 120 }} offsetScrollbars>
+          <AdvancedSettings />
+          <Credits />
+        </ScrollArea>
+      </Tabs.Panel>
+    </Tabs>
   );
 }
 
@@ -107,3 +95,28 @@ export function SettingsMenuButton(props: any) {
     </>
   );
 }
+
+function NewUpdateIndicator({ newVersionAvailable }: { newVersionAvailable: string }) {
+  return (
+    <Notification
+      mt={10}
+      icon={<IconInfoCircle size={25} />}
+      disallowClose
+      color="teal"
+      radius="md"
+      title="New update available"
+      hidden={newVersionAvailable === ''}
+    >
+      Version{' '}
+      <b>
+        <Anchor
+          target="_blank"
+          href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
+        >
+          {newVersionAvailable}
+        </Anchor>
+      </b>{' '}
+      is available ! Current version: {CURRENT_VERSION}
+    </Notification>
+  );
+}