diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index bdf827658..c3901b69a 100644
--- a/web/_data/serverState.ts
+++ b/web/_data/serverState.ts
@@ -58,7 +58,7 @@ export const serverState: Server = {
   license: '',
   locale: 'en_US', // en_US, ja
   name: 'fuji',
-  osVersion: '6.12.5-rc1',
+  osVersion: '6.12.3',
   registered: true,
   regGen: 0,
   // "regGuid": "0781-5583-8355-81071A2B0211",
diff --git a/web/components/Brand/Button.vue b/web/components/Brand/Button.vue
index 128e33772..0d480173d 100644
--- a/web/components/Brand/Button.vue
+++ b/web/components/Brand/Button.vue
@@ -12,6 +12,7 @@ export interface ButtonProps {
   external?: boolean;
   href?: string;
   icon?: typeof XCircleIcon | typeof BrandLoading | typeof BrandLoadingWhite;
+  iconRight?: typeof XCircleIcon | typeof BrandLoading | typeof BrandLoadingWhite;
   text?: string;
 }
 const props = withDefaults(defineProps<ButtonProps>(), {
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   click: undefined,
   href: undefined,
   icon: undefined,
+  iconRight: undefined,
   text: undefined,
 });
 
@@ -51,5 +53,6 @@ const classes = computed(() => {
   >
     <component :is="icon" v-if="icon" class="flex-shrink-0 w-14px" />
     {{ text }}
+    <component :is="iconRight" v-if="iconRight" class="flex-shrink-0 w-14px" />
   </component>
 </template>
diff --git a/web/components/UpdateOs.ce.vue b/web/components/UpdateOs.ce.vue
new file mode 100644
index 000000000..bfca23aa2
--- /dev/null
+++ b/web/components/UpdateOs.ce.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+/**
+ * @todo require keyfile to be set before allowing user to check for updates
+ * @todo require keyfile to update
+ * @todo require valid guid / server state to update
+ * @todo detect downgrade possibility
+ */
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import { ArrowTopRightOnSquareIcon, BellAlertIcon } from '@heroicons/vue/24/solid';
+import dayjs from 'dayjs';
+import { storeToRefs } from 'pinia';
+import { ref, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
+
+import { useServerStore } from '~/store/server';
+import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
+import type { UserProfileLink } from '~/types/userProfile';
+
+const { t } = useI18n();
+
+const serverStore = useServerStore();
+const updateOsStore = useUpdateOsStore();
+const updateOsActionsStore = useUpdateOsActionsStore();
+
+const { guid, keyfile, osVersion } = storeToRefs(serverStore);
+const { available, cachedReleasesTimestamp } = storeToRefs(updateOsStore);
+
+const includeNext = ref(false);
+
+const updateButton = ref<UserProfileLink | undefined>();
+
+const parsedCachedReleasesTimestamp = computed(() => {
+  if (!cachedReleasesTimestamp.value) { return ''; }
+  return dayjs(cachedReleasesTimestamp.value).format('YYYY-MM-DD HH:mm:ss');
+});
+
+const check = () => {
+  updateOsStore.checkForUpdate({
+    cache: true,
+    guid: guid.value,
+    includeNext: includeNext.value,
+    keyfile: keyfile.value,
+    osVersion: osVersion.value,
+    skipCache: true,
+  });
+};
+
+watchEffect(() => {
+  if (available.value) {
+    updateButton.value = updateOsActionsStore.initUpdateOsCallback();
+  } else {
+    updateButton.value = undefined;
+  }
+});
+</script>
+
+<template>
+  <div class="grid gap-y-24px">
+    <div class="grid gap-y-16px">
+      <h1 class="text-24px">{{ t('Update Unraid OS') }}</h1>
+      <p>Current Version: {{ osVersion }}</p>
+      <p>Status: {{ available ? 'Update Available' : 'Up-to-date' }}</p>
+    </div>
+
+    <div class="text-16px text-alpha bg-beta text-left relative flex flex-col justify-around border-2 border-solid shadow-xl transform overflow-hidden rounded-lg transition-all sm:w-full">
+      <div class="px-16px py-20px sm:p-24px">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-20px">
+          <div class="grid gap-y-16px">
+            <h3 class="text-20px font-semibold leading-6 text-gray-900 flex flex-row items-center gap-8px">
+              <BellAlertIcon class="w-20px shrink-0" />
+              <span>
+                {{ available ? t(updateButton?.text ?? '', updateButton?.textParams) : t('Check for Updates')}}
+              </span>
+            </h3>
+            <div class="max-w-xl text-sm text-gray-500 whitespace-normal">
+              <p class="text-18px">{{ t('Receive the latest and greatest for Unraid OS. Whether it new features, security patches, or bug fixes – keeping your server up-to-date ensures the best experience that Unraid has to offer.') }}</p>
+            </div>
+          </div>
+
+          <div class="flex flex-col sm:flex-shrink-0 items-center gap-16px">
+            <SwitchGroup v-if="!available" as="div">
+              <div class="flex flex-shrink-0 items-center gap-16px">
+                <Switch v-model="includeNext" :class="[includeNext ? 'bg-green-500' : 'bg-gray-200', 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2']">
+                  <span :class="[includeNext ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out']">
+                    <span :class="[includeNext ? 'opacity-0 duration-100 ease-out' : 'opacity-100 duration-200 ease-in', 'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity']" aria-hidden="true">
+                      <svg class="h-12px w-12px text-gray-400" fill="none" viewBox="0 0 12 12">
+                        <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      </svg>
+                    </span>
+                    <span :class="[includeNext ? 'opacity-100 duration-200 ease-in' : 'opacity-0 duration-100 ease-out', 'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity']" aria-hidden="true">
+                      <svg class="h-12px w-12px text-green-500" fill="currentColor" viewBox="0 0 12 12">
+                        <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
+                      </svg>
+                    </span>
+                  </span>
+                </Switch>
+                <SwitchLabel class="text-14px">{{ t('Include Prereleases') }}</SwitchLabel>
+              </div>
+            </SwitchGroup>
+            <span class="flex flex-col gap-y-8px">
+              <BrandButton
+                v-if="available && updateButton"
+                @click="updateButton?.click"
+                :external="updateButton?.external"
+                :icon-right="ArrowTopRightOnSquareIcon"
+                :name="updateButton?.name"
+                :text="t('View changelog & update')" />
+              <BrandButton v-else @click="check" btn-style="outline" :text="t('Check Now')" />
+              <span class="text-14px text-gamma text-center">{{ t('Last checked: {0}', [parsedCachedReleasesTimestamp]) }}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>
diff --git a/web/components/UserProfile/DropdownItem.vue b/web/components/UserProfile/DropdownItem.vue
index c5363bd2e..9cd31f929 100644
--- a/web/components/UserProfile/DropdownItem.vue
+++ b/web/components/UserProfile/DropdownItem.vue
@@ -4,7 +4,6 @@ import type { ServerStateDataAction } from '~/types/server';
 import type { UserProfileLink } from '~/types/userProfile';
 
 export interface Props {
-  clickParams?: any; // so we can pass in params to the click handler
   item: ServerStateDataAction | UserProfileLink;
   rounded?: boolean;
   t: any;
diff --git a/web/locales/en_US.json b/web/locales/en_US.json
index 65736a44b..2b7b1de9c 100644
--- a/web/locales/en_US.json
+++ b/web/locales/en_US.json
@@ -211,5 +211,7 @@
   "Current Version: Unraid {0}": "Current Version: Unraid {0}",
   "New Version: {0}": "New Version: {0}",
   "This update will require a reboot": "This update will require a reboot",
-  "Confirm and start update": "Confirm and start update"
+  "Confirm and start update": "Confirm and start update",
+  "Update Unraid OS": "Update Unraid OS",
+  "Last checked: {0}": "Last checked: {0}"
 }
diff --git a/web/nuxt.config.ts b/web/nuxt.config.ts
index 1632f7cd6..45e1531ed 100644
--- a/web/nuxt.config.ts
+++ b/web/nuxt.config.ts
@@ -96,6 +96,10 @@ export default defineNuxtConfig({
             name: 'UnraidUserProfile',
             path: '@/components/UserProfile.ce',
           },
+          {
+            name: 'UnraidUpdateOs',
+            path: '@/components/UpdateOs.ce',
+          },
           {
             name: 'UnraidWanIpCheck',
             path: '@/components/WanIpCheck.ce',
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 4a83873df..63f4e1c0d 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -19,27 +19,32 @@ onBeforeMount(() => {
             UserProfileCe
           </h3>
           <UserProfileCe :server="serverState" />
-          <hr class="border-black">
+          <hr class="border-black dark:border-white">
           <h3 class="text-lg font-semibold font-mono">
             DownloadApiLogsCe
           </h3>
           <DownloadApiLogsCe />
-          <hr class="border-black">
+          <hr class="border-black dark:border-white">
           <h3 class="text-lg font-semibold font-mono">
             AuthCe
           </h3>
           <AuthCe />
-          <hr class="border-black">
+          <hr class="border-black dark:border-white">
           <h3 class="text-lg font-semibold font-mono">
             KeyActionsCe
           </h3>
           <KeyActionsCe />
-          <hr class="border-black">
+          <hr class="border-black dark:border-white">
           <h3 class="text-lg font-semibold font-mono">
             WanIpCheckCe
           </h3>
           <WanIpCheckCe php-wan-ip="47.184.85.45" />
-          <hr class="border-black">
+          <hr class="border-black dark:border-white">
+          <h3 class="text-lg font-semibold font-mono">
+            UpdateOsCe
+          </h3>
+          <UpdateOsCe />
+          <hr class="border-black dark:border-white">
           <h3 class="text-lg font-semibold font-mono">
             ModalsCe
           </h3>
diff --git a/web/pages/webComponents.vue b/web/pages/webComponents.vue
index c2baf12b2..bdb62e81d 100644
--- a/web/pages/webComponents.vue
+++ b/web/pages/webComponents.vue
@@ -17,27 +17,32 @@ onBeforeMount(() => {
         UserProfileCe
       </h3>
       <unraid-user-profile :server="JSON.stringify(serverState)" />
-      <hr class="border-black">
+      <hr class="border-black dark:border-white">
       <h3 class="text-lg font-semibold font-mono">
         DownloadApiLogsCe
       </h3>
       <unraid-download-api-logs />
-      <hr class="border-black">
+      <hr class="border-black dark:border-white">
       <h3 class="text-lg font-semibold font-mono">
         AuthCe
       </h3>
       <unraid-auth />
-      <hr class="border-black">
+      <hr class="border-black dark:border-white">
       <h3 class="text-lg font-semibold font-mono">
         KeyActionsCe
       </h3>
       <unraid-key-actions />
-      <hr class="border-black">
+      <hr class="border-black dark:border-white">
       <h3 class="text-lg font-semibold font-mono">
         WanIpCheckCe
       </h3>
       <unraid-wan-ip-check php-wan-ip="47.184.85.45" />
-      <hr class="border-black">
+      <hr class="border-black dark:border-white">
+      <h3 class="text-lg font-semibold font-mono">
+        UpdateOsCe
+      </h3>
+      <unraid-update-os />
+      <hr class="border-black dark:border-white">
       <h3 class="text-lg font-semibold font-mono">
         ModalsCe
       </h3>
diff --git a/web/store/updateOs.ts b/web/store/updateOs.ts
index 91a13fe0a..caeb96f56 100644
--- a/web/store/updateOs.ts
+++ b/web/store/updateOs.ts
@@ -69,10 +69,8 @@ export const useUpdateOsStoreGeneric = (
     }
 
     // getters
-    const isOsVersionStable = computed(() => {
-      const hasPrerelease = prerelease(osVersion.value);
-      return !hasPrerelease;
-    });
+    const cachedReleasesTimestamp = computed(() => releases.value?.timestamp);
+    const isOsVersionStable = computed(() => !isVersionStable(osVersion.value));
 
     const filteredStableReleases = computed(() => {
       if (!osVersion.value) return undefined;
@@ -186,9 +184,11 @@ export const useUpdateOsStoreGeneric = (
 
       /**
        * If we're on stable and the user hasn't requested to include next releases in the check
-       * then remove next releases from the cached data
+       * then remove next releases from the data
        */
-      if (!payload.includeNext && isOsVersionStable.value && releases.value.response.next) {
+      console.debug('[checkForUpdate] checking for next releases', payload.includeNext, isOsVersionStable.value, releases.value.response.next)
+      if (!payload.includeNext || isOsVersionStable.value && releases.value.response.next) {
+        console.debug('[checkForUpdate] removing next releases from data')
         delete releases.value.response.next;
       }
 
@@ -238,11 +238,14 @@ export const useUpdateOsStoreGeneric = (
       return releaseForReturn;
     };
 
+    const isVersionStable = (version: SemVer | string): boolean => prerelease(version) === null;
+
     return {
       // state
       available,
       releases,
       // getters
+      cachedReleasesTimestamp,
       isOsVersionStable,
       filteredStableReleases,
       filteredNextReleases,
@@ -251,5 +254,6 @@ export const useUpdateOsStoreGeneric = (
       checkForUpdate,
       findReleaseByMd5,
       requestReleases,
+      isVersionStable,
     };
   });
diff --git a/web/store/updateOsActions.ts b/web/store/updateOsActions.ts
index 2714223c1..ee5844ee5 100644
--- a/web/store/updateOsActions.ts
+++ b/web/store/updateOsActions.ts
@@ -22,8 +22,9 @@ import {
   type UpdateOsActionStore,
 } from '~/store/updateOs';
 
-import { type InstallPluginPayload } from '~/composables/installPlugin';
+import type { InstallPluginPayload } from '~/composables/installPlugin';
 import type { ServerStateDataAction } from '~/types/server';
+import type { UserProfileLink } from '~/types/userProfile';
 
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
@@ -47,7 +48,7 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
   const callbackUpdateRelease = ref<Release | null>(null);
 
   // Actions
-  const initUpdateOsCallback = (includeNextReleases: boolean = false) => {
+  const initUpdateOsCallback = (includeNextReleases: boolean = false): UserProfileLink => {
     return {
       click: (includeNext: boolean = includeNextReleases) => {
         callbackStore.send(
diff --git a/web/types/userProfile.ts b/web/types/userProfile.ts
index de3c6c364..2acd05000 100644
--- a/web/types/userProfile.ts
+++ b/web/types/userProfile.ts
@@ -9,7 +9,7 @@ export interface UserProfileLink {
   icon?: typeof ArrowTopRightOnSquareIcon;
   name?: string;
   text: string;
-  textParams?: string|number[];
+  textParams?: string[] | number[];
   title?: string;
 }