diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
deleted file mode 100644
index cf119f44e..000000000
--- a/.github/workflows/claude.yml
+++ /dev/null
@@ -1,64 +0,0 @@
-name: Claude Code
-
-on:
-  issue_comment:
-    types: [created]
-  pull_request_review_comment:
-    types: [created]
-  issues:
-    types: [opened, assigned]
-  pull_request_review:
-    types: [submitted]
-
-jobs:
-  claude:
-    if: |
-      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
-      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: read
-      issues: read
-      id-token: write
-      actions: read # Required for Claude to read CI results on PRs
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          fetch-depth: 1
-
-      - name: Run Claude Code
-        id: claude
-        uses: anthropics/claude-code-action@beta
-        with:
-          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
-
-          # This is an optional setting that allows Claude to read CI results on PRs
-          additional_permissions: |
-            actions: read
-          
-          # Optional: Specify model (defaults to Claude Sonnet 4, uncomment for Claude Opus 4)
-          # model: "claude-opus-4-20250514"
-          
-          # Optional: Customize the trigger phrase (default: @claude)
-          # trigger_phrase: "/claude"
-          
-          # Optional: Trigger when specific user is assigned to an issue
-          # assignee_trigger: "claude-bot"
-          
-          # Optional: Allow Claude to run specific commands
-          # allowed_tools: "Bash(npm install),Bash(npm run build),Bash(npm run test:*),Bash(npm run lint:*)"
-          
-          # Optional: Add custom instructions for Claude to customize its behavior for your project
-          # custom_instructions: |
-          #   Follow our coding standards
-          #   Ensure all new code has tests
-          #   Use TypeScript for new files
-          
-          # Optional: Custom environment variables for Claude
-          # claude_env: |
-          #   NODE_ENV: test
-
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 7fe34df16..003506403 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -310,9 +310,6 @@ jobs:
       - name: Type Check
         run: pnpm run type-check
 
-      - name: Test
-        run: pnpm run test:ci
-
       - name: Build
         run: pnpm run build
 
diff --git a/@tailwind-shared/base-utilities.css b/@tailwind-shared/base-utilities.css
index 1aec6db34..5fb843677 100644
--- a/@tailwind-shared/base-utilities.css
+++ b/@tailwind-shared/base-utilities.css
@@ -1,7 +1,8 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 /* Utility defaults for web components (when we were using shadow DOM) */
-:host {
+:host,
+.unapi {
     --tw-divide-y-reverse: 0;
     --tw-border-style: solid;
     --tw-font-weight: initial;
@@ -61,7 +62,7 @@
 }
 */
 
-body {
+.unapi {
     --color-alpha: #1c1b1b;
     --color-beta: #f2f2f2;
     --color-gamma: #999999;
@@ -73,13 +74,14 @@ body {
     --ring-shadow: 0 0 var(--color-beta);
   }
 
-button:not(:disabled),
-[role='button']:not(:disabled) {
+.unapi button:not(:disabled),
+.unapi [role='button']:not(:disabled) {
   cursor: pointer;
 }
 
 /* Font size overrides for SSO button component */
-unraid-sso-button {
+.unapi unraid-sso-button,
+unraid-sso-button.unapi {
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1rem;
@@ -93,4 +95,4 @@ unraid-sso-button {
   --text-7xl: 4.5rem;
   --text-8xl: 6rem;
   --text-9xl: 8rem;
-}
\ No newline at end of file
+}
diff --git a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/unraid-api.php b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/unraid-api.php
index 4cbda52d1..51df7c4dc 100644
--- a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/unraid-api.php
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/unraid-api.php
@@ -69,8 +69,45 @@ switch ($command) {
     response_complete(200, array('result' => $output), $output);
     break;
   case 'restart':
+    $lockFilePath = '/var/run/unraid-api-restart.lock';
+    $lockHandle = @fopen($lockFilePath, 'c');
+    if ($lockHandle === false) {
+      response_complete(500, array('error' => 'Unable to open restart lock file'), 'Unable to open restart lock file');
+    }
+
+    // Use a lockfile to avoid concurrently running restart commands
+    $wouldBlock = null;
+    error_clear_last();
+    $acquiredLock = flock($lockHandle, LOCK_EX | LOCK_NB, $wouldBlock);
+    if (!$acquiredLock) {
+      if (!empty($wouldBlock)) {
+        fclose($lockHandle);
+        response_complete(200, array('success' => true, 'result' => 'Unraid API restart already in progress'), 'Restart already in progress');
+      }
+
+      $lastError = error_get_last();
+      $errorMessage = 'Unable to acquire restart lock';
+      if (!empty($lastError['message'])) {
+        $errorMessage .= ': ' . $lastError['message'];
+      }
+
+      fclose($lockHandle);
+      response_complete(500, array('error' => $errorMessage), $errorMessage);
+    }
+
+    $pid = getmypid();
+    if ($pid !== false) {
+      ftruncate($lockHandle, 0);
+      fwrite($lockHandle, (string)$pid);
+      fflush($lockHandle);
+    }
+
     exec('/etc/rc.d/rc.unraid-api restart 2>&1', $output, $retval);
     $output = implode(PHP_EOL, $output);
+
+    flock($lockHandle, LOCK_UN);
+    fclose($lockHandle);
+
     response_complete(200, array('success' => ($retval === 0), 'result' => $output, 'error' => ($retval !== 0 ? $output : null)), $output);
     break;
   case 'status':
@@ -100,4 +137,4 @@ switch ($command) {
     break;
 }
 exit;
-?>
\ No newline at end of file
+?>
diff --git a/web/__test__/components/ChangelogModal.test.ts b/web/__test__/components/ChangelogModal.test.ts
new file mode 100644
index 000000000..a5367f76c
--- /dev/null
+++ b/web/__test__/components/ChangelogModal.test.ts
@@ -0,0 +1,171 @@
+import { ref } from 'vue';
+import { mount } from '@vue/test-utils';
+
+import { DOCS } from '~/helpers/urls';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import ChangelogModal from '~/components/UpdateOs/ChangelogModal.vue';
+
+vi.mock('@unraid/ui', () => ({
+  BrandButton: { template: '<button><slot /></button>' },
+  BrandLoading: { template: '<div class="brand-loading" />' },
+  cn: (...classes: string[]) => classes.filter(Boolean).join(' '),
+  ResponsiveModal: { template: '<div><slot /></div>', props: ['open'] },
+  ResponsiveModalFooter: { template: '<div><slot /></div>' },
+  ResponsiveModalHeader: { template: '<div><slot /></div>' },
+  ResponsiveModalTitle: { template: '<div><slot /></div>' },
+}));
+
+vi.mock('@heroicons/vue/24/solid', () => ({
+  ArrowRightIcon: { template: '<svg />' },
+  ArrowTopRightOnSquareIcon: { template: '<svg />' },
+  KeyIcon: { template: '<svg />' },
+  ServerStackIcon: { template: '<svg />' },
+}));
+
+vi.mock('~/components/UpdateOs/RawChangelogRenderer.vue', () => ({
+  default: { template: '<div />', props: ['changelog', 'version', 'date', 't', 'changelogPretty'] },
+}));
+
+vi.mock('pinia', async () => {
+  const actual = await vi.importActual<typeof import('pinia')>('pinia');
+
+  const isActualStore = (candidate: unknown): candidate is Parameters<typeof actual.storeToRefs>[0] =>
+    Boolean(candidate && typeof candidate === 'object' && '$id' in candidate);
+
+  const isRefLike = (input: unknown): input is { value: unknown } =>
+    Boolean(input && typeof input === 'object' && 'value' in input);
+
+  return {
+    ...actual,
+    storeToRefs: (store: unknown) => {
+      if (isActualStore(store)) {
+        return actual.storeToRefs(store);
+      }
+
+      if (!store || typeof store !== 'object') {
+        return {};
+      }
+
+      const refs: Record<string, unknown> = {};
+      for (const [key, value] of Object.entries(store)) {
+        if (isRefLike(value)) {
+          refs[key] = value;
+        }
+      }
+
+      return refs;
+    },
+  };
+});
+
+const mockRenew = vi.fn();
+vi.mock('~/store/purchase', () => ({
+  usePurchaseStore: () => ({
+    renew: mockRenew,
+  }),
+}));
+
+const mockAvailableWithRenewal = ref(false);
+const mockReleaseForUpdate = ref(null);
+const mockChangelogModalVisible = ref(false);
+const mockSetReleaseForUpdate = vi.fn();
+const mockFetchAndConfirmInstall = vi.fn();
+vi.mock('~/store/updateOs', () => ({
+  useUpdateOsStore: () => ({
+    availableWithRenewal: mockAvailableWithRenewal,
+    releaseForUpdate: mockReleaseForUpdate,
+    changelogModalVisible: mockChangelogModalVisible,
+    setReleaseForUpdate: mockSetReleaseForUpdate,
+    fetchAndConfirmInstall: mockFetchAndConfirmInstall,
+  }),
+}));
+
+const mockDarkMode = ref(false);
+const mockTheme = ref({ name: 'default' });
+vi.mock('~/store/theme', () => ({
+  useThemeStore: () => ({
+    darkMode: mockDarkMode,
+    theme: mockTheme,
+  }),
+}));
+
+describe('ChangelogModal iframeSrc', () => {
+  const mountWithChangelog = (changelogPretty: string | null) =>
+    mount(ChangelogModal, {
+      props: {
+        t: (key: string) => key,
+        open: true,
+        release: {
+          version: '6.12.0',
+          changelogPretty: changelogPretty ?? undefined,
+          changelog: 'Raw changelog markdown',
+          name: 'Unraid OS 6.12.0',
+          date: '2024-01-01',
+        },
+      },
+    });
+
+  beforeEach(() => {
+    mockRenew.mockClear();
+    mockAvailableWithRenewal.value = false;
+    mockReleaseForUpdate.value = null;
+    mockChangelogModalVisible.value = false;
+    mockSetReleaseForUpdate.mockClear();
+    mockFetchAndConfirmInstall.mockClear();
+    mockDarkMode.value = false;
+    mockTheme.value = { name: 'default' };
+  });
+
+  it('sanitizes absolute docs URLs to embed within DOCS origin', () => {
+    const entry = `${DOCS.origin}/go/release-notes/?foo=bar#section`;
+    const wrapper = mountWithChangelog(entry);
+
+    const iframeSrc = (wrapper.vm as unknown as { iframeSrc: string | null }).iframeSrc;
+    expect(iframeSrc).toBeTruthy();
+
+    const iframeUrl = new URL(iframeSrc!);
+    expect(iframeUrl.origin).toBe(DOCS.origin);
+    expect(iframeUrl.pathname).toBe('/go/release-notes/');
+    expect(iframeUrl.searchParams.get('embed')).toBe('1');
+    expect(iframeUrl.searchParams.get('theme')).toBe('light');
+    expect(iframeUrl.searchParams.get('entry')).toBe('/go/release-notes/?foo=bar#section');
+  });
+
+  it('builds DOCS-relative URL when provided a path entry', () => {
+    const wrapper = mountWithChangelog('updates/6.12?tab=notes#overview');
+
+    const iframeSrc = (wrapper.vm as unknown as { iframeSrc: string | null }).iframeSrc;
+    expect(iframeSrc).toBeTruthy();
+
+    const iframeUrl = new URL(iframeSrc!);
+    expect(iframeUrl.origin).toBe(DOCS.origin);
+    expect(iframeUrl.pathname).toBe('/updates/6.12');
+    expect(iframeUrl.searchParams.get('entry')).toBe('/updates/6.12?tab=notes#overview');
+  });
+
+  it('applies dark theme when current UI theme requires it', () => {
+    mockTheme.value = { name: 'azure' };
+    const wrapper = mountWithChangelog(`${DOCS.origin}/release/6.12`);
+
+    const iframeSrc = (wrapper.vm as unknown as { iframeSrc: string | null }).iframeSrc;
+    expect(iframeSrc).toBeTruthy();
+
+    const iframeUrl = new URL(iframeSrc!);
+    expect(iframeUrl.searchParams.get('theme')).toBe('dark');
+  });
+
+  it('rejects non-docs origins and returns null', () => {
+    const wrapper = mountWithChangelog('https://example.com/bad');
+
+    const iframeSrc = (wrapper.vm as unknown as { iframeSrc: string | null }).iframeSrc;
+    expect(iframeSrc).toBeNull();
+  });
+
+  it('rejects non-http(s) protocols', () => {
+    const wrapper = mountWithChangelog('javascript:alert(1)');
+
+    const iframeSrc = (wrapper.vm as unknown as { iframeSrc: string | null }).iframeSrc;
+    expect(iframeSrc).toBeNull();
+  });
+});
diff --git a/web/__test__/components/CheckUpdateResponseModal.test.ts b/web/__test__/components/CheckUpdateResponseModal.test.ts
new file mode 100644
index 000000000..a6a074106
--- /dev/null
+++ b/web/__test__/components/CheckUpdateResponseModal.test.ts
@@ -0,0 +1,271 @@
+import { nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { ComposerTranslation } from 'vue-i18n';
+
+import CheckUpdateResponseModal from '~/components/UpdateOs/CheckUpdateResponseModal.vue';
+
+const translate: ComposerTranslation = ((key: string, params?: unknown) => {
+  if (Array.isArray(params) && params.length > 0) {
+    return params.reduce<string>(
+      (result, value, index) => result.replace(`{${index}}`, String(value)),
+      key
+    );
+  }
+
+  if (params && typeof params === 'object') {
+    return Object.entries(params as Record<string, unknown>).reduce<string>(
+      (result, [placeholder, value]) => result.replace(`{${placeholder}}`, String(value)),
+      key
+    );
+  }
+
+  if (typeof params === 'number') {
+    return key.replace('{0}', String(params));
+  }
+
+  return key;
+}) as ComposerTranslation;
+
+vi.mock('@unraid/ui', () => ({
+  BrandButton: {
+    name: 'BrandButton',
+    props: {
+      text: {
+        type: String,
+        default: undefined,
+      },
+    },
+    emits: ['click'],
+    template: '<button class="brand-button" @click="$emit(\'click\')"><slot>{{ text }}</slot></button>',
+  },
+  BrandLoading: { template: '<div class="brand-loading" />' },
+  Button: { template: '<button class="ui-button"><slot /></button>' },
+  cn: (...classes: string[]) => classes.filter(Boolean).join(' '),
+  DialogDescription: { template: '<div class="dialog-description"><slot /></div>' },
+  Label: { template: '<label><slot /></label>' },
+  ResponsiveModal: {
+    name: 'ResponsiveModal',
+    props: ['open', 'dialogClass', 'sheetClass', 'showCloseButton'],
+    template: '<div class="responsive-modal"><slot /></div>',
+  },
+  ResponsiveModalFooter: { template: '<div class="responsive-modal-footer"><slot /></div>' },
+  ResponsiveModalHeader: { template: '<div class="responsive-modal-header"><slot /></div>' },
+  ResponsiveModalTitle: { template: '<div class="responsive-modal-title"><slot /></div>' },
+  Switch: { name: 'Switch', props: ['modelValue'], template: '<div class="switch" />' },
+  Tooltip: { template: '<div class="tooltip"><slot /></div>' },
+  TooltipTrigger: { template: '<div class="tooltip-trigger"><slot /></div>' },
+  TooltipContent: { template: '<div class="tooltip-content"><slot /></div>' },
+  TooltipProvider: { template: '<div class="tooltip-provider"><slot /></div>' },
+}));
+
+vi.mock('@heroicons/vue/24/solid', () => ({
+  ArrowTopRightOnSquareIcon: { template: '<svg />' },
+  CheckCircleIcon: { template: '<svg />' },
+  CogIcon: { template: '<svg />' },
+  EyeIcon: { template: '<svg />' },
+  IdentificationIcon: { template: '<svg />' },
+  KeyIcon: { template: '<svg />' },
+}));
+
+vi.mock('@heroicons/vue/24/outline', () => ({
+  ArrowDownTrayIcon: { template: '<svg />' },
+}));
+
+vi.mock('~/components/UpdateOs/IgnoredRelease.vue', () => ({
+  default: { template: '<div class="ignored-release" />', props: ['label'] },
+}));
+
+vi.mock('~/composables/dateTime', () => ({
+  default: () => ({
+    outputDateTimeFormatted: ref('2024-01-01'),
+    outputDateTimeReadableDiff: ref('today'),
+  }),
+}));
+
+vi.mock('pinia', async () => {
+  const actual = await vi.importActual<typeof import('pinia')>('pinia');
+
+  const isActualStore = (candidate: unknown): candidate is Parameters<typeof actual.storeToRefs>[0] =>
+    Boolean(candidate && typeof candidate === 'object' && '$id' in candidate);
+
+  const isRefLike = (input: unknown): input is { value: unknown } =>
+    Boolean(input && typeof input === 'object' && 'value' in input);
+
+  return {
+    ...actual,
+    storeToRefs: (store: unknown) => {
+      if (isActualStore(store)) {
+        return actual.storeToRefs(store);
+      }
+
+      if (!store || typeof store !== 'object') {
+        return {};
+      }
+
+      const refs: Record<string, unknown> = {};
+      for (const [key, value] of Object.entries(store)) {
+        if (isRefLike(value)) {
+          refs[key] = value;
+        }
+      }
+
+      return refs;
+    },
+  };
+});
+
+const mockAccountUpdateOs = vi.fn();
+vi.mock('~/store/account', () => ({
+  useAccountStore: () => ({
+    updateOs: mockAccountUpdateOs,
+  }),
+}));
+
+const mockRenew = vi.fn();
+vi.mock('~/store/purchase', () => ({
+  usePurchaseStore: () => ({
+    renew: mockRenew,
+  }),
+}));
+
+const mockSetReleaseForUpdate = vi.fn();
+const mockSetModalOpen = vi.fn();
+const mockFetchAndConfirmInstall = vi.fn();
+
+const available = ref<string | null>(null);
+const availableWithRenewal = ref<string | null>(null);
+const availableReleaseDate = ref<number | null>(null);
+const availableRequiresAuth = ref(false);
+const checkForUpdatesLoading = ref(false);
+
+vi.mock('~/store/updateOs', () => ({
+  useUpdateOsStore: () => ({
+    available,
+    availableWithRenewal,
+    availableReleaseDate,
+    availableRequiresAuth,
+    checkForUpdatesLoading,
+    setReleaseForUpdate: mockSetReleaseForUpdate,
+    setModalOpen: mockSetModalOpen,
+    fetchAndConfirmInstall: mockFetchAndConfirmInstall,
+  }),
+}));
+
+const regExp = ref<number | null>(null);
+const regUpdatesExpired = ref(false);
+const dateTimeFormat = ref('YYYY-MM-DD');
+const osVersion = ref<string | null>(null);
+const updateOsIgnoredReleases = ref<string[]>([]);
+const updateOsNotificationsEnabled = ref(true);
+const updateOsResponse = ref<{ changelog?: string | null } | null>(null);
+
+const mockUpdateOsIgnoreRelease = vi.fn();
+
+vi.mock('~/store/server', () => ({
+  useServerStore: () => ({
+    regExp,
+    regUpdatesExpired,
+    dateTimeFormat,
+    osVersion,
+    updateOsIgnoredReleases,
+    updateOsNotificationsEnabled,
+    updateOsResponse,
+    updateOsIgnoreRelease: mockUpdateOsIgnoreRelease,
+  }),
+}));
+
+const mountModal = () =>
+  mount(CheckUpdateResponseModal, {
+    props: {
+      open: true,
+      t: translate,
+    },
+  });
+
+describe('CheckUpdateResponseModal', () => {
+  beforeEach(() => {
+    available.value = null;
+    availableWithRenewal.value = null;
+    availableReleaseDate.value = null;
+    availableRequiresAuth.value = false;
+    checkForUpdatesLoading.value = false;
+    regExp.value = null;
+    regUpdatesExpired.value = false;
+    osVersion.value = null;
+    updateOsIgnoredReleases.value = [];
+    updateOsNotificationsEnabled.value = true;
+    updateOsResponse.value = null;
+
+    mockAccountUpdateOs.mockClear();
+    mockRenew.mockClear();
+    mockSetModalOpen.mockClear();
+    mockSetReleaseForUpdate.mockClear();
+    mockFetchAndConfirmInstall.mockClear();
+    mockUpdateOsIgnoreRelease.mockClear();
+  });
+
+  it('renders loading state while checking for updates', () => {
+    checkForUpdatesLoading.value = true;
+
+    const wrapper = mountModal();
+
+    expect(wrapper.find('.responsive-modal-title').text()).toBe('Checking for OS updates...');
+    expect(wrapper.find('.brand-loading').exists()).toBe(true);
+    expect(wrapper.find('.ui-button').text()).toBe('More Options');
+  });
+
+  it('shows up-to-date messaging when no updates are available', async () => {
+    osVersion.value = '6.12.3';
+    updateOsNotificationsEnabled.value = false;
+
+    const wrapper = mountModal();
+    await nextTick();
+
+    expect(wrapper.find('.responsive-modal-title').text()).toBe('Unraid OS is up-to-date');
+    expect(wrapper.text()).toContain('Current Version 6.12.3');
+    expect(wrapper.text()).toContain(
+      'Go to Settings > Notifications to enable automatic OS update notifications for future releases.'
+    );
+
+    expect(wrapper.find('.ui-button').text()).toBe('More Options');
+    expect(wrapper.text()).toContain('Enable update notifications');
+  });
+
+  it('displays update actions when a new release is available', async () => {
+    available.value = '6.13.0';
+    osVersion.value = '6.12.3';
+    updateOsResponse.value = { changelog: '### New release' };
+
+    const wrapper = mountModal();
+    await nextTick();
+
+    const actionButtons = wrapper.findAll('.brand-button');
+    const viewChangelogButton = actionButtons.find((button) =>
+      button.text().includes('View Changelog to Start Update')
+    );
+    expect(viewChangelogButton).toBeDefined();
+
+    await viewChangelogButton!.trigger('click');
+    expect(mockSetReleaseForUpdate).toHaveBeenCalledWith({ changelog: '### New release' });
+  });
+
+  it('includes renew option when update requires license renewal', async () => {
+    available.value = '6.14.0';
+    availableWithRenewal.value = '6.14.0';
+    updateOsResponse.value = { changelog: '### Renewal release' };
+
+    const wrapper = mountModal();
+    await nextTick();
+
+    const actionButtons = wrapper.findAll('.brand-button');
+    const labels = actionButtons.map((button) => button.text());
+    expect(labels).toContain('View Changelog');
+    expect(labels).toContain('Extend License');
+
+    await actionButtons.find((btn) => btn.text() === 'Extend License')?.trigger('click');
+    expect(mockRenew).toHaveBeenCalled();
+  });
+});
diff --git a/web/__test__/components/ColorSwitcher.test.ts b/web/__test__/components/ColorSwitcher.test.ts
index bb17a4770..0d010e00c 100644
--- a/web/__test__/components/ColorSwitcher.test.ts
+++ b/web/__test__/components/ColorSwitcher.test.ts
@@ -2,7 +2,7 @@
  * ColorSwitcher Component Test Coverage
  */
 
-import { nextTick } from 'vue';
+import { nextTick, ref } from 'vue';
 import { setActivePinia } from 'pinia';
 import { mount } from '@vue/test-utils';
 
@@ -15,6 +15,15 @@ import type { MockInstance } from 'vitest';
 import ColorSwitcher from '~/components/ColorSwitcher.standalone.vue';
 import { useThemeStore } from '~/store/theme';
 
+vi.mock('@vue/apollo-composable', () => ({
+  useQuery: () => ({
+    result: ref(null),
+    loading: ref(false),
+    onResult: vi.fn(),
+    onError: vi.fn(),
+  }),
+}));
+
 // Explicitly mock @unraid/ui to ensure we use the actual components
 vi.mock('@unraid/ui', async (importOriginal) => {
   const actual = (await importOriginal()) as Record<string, unknown>;
diff --git a/web/__test__/components/HeaderOsVersion.test.ts b/web/__test__/components/HeaderOsVersion.test.ts
index 62537d33b..530a697c4 100644
--- a/web/__test__/components/HeaderOsVersion.test.ts
+++ b/web/__test__/components/HeaderOsVersion.test.ts
@@ -27,6 +27,8 @@ vi.mock('@vue/apollo-composable', () => ({
   useQuery: () => ({
     result: { value: {} },
     loading: { value: false },
+    onResult: vi.fn(),
+    onError: vi.fn(),
   }),
   useLazyQuery: () => ({
     result: { value: {} },
diff --git a/web/__test__/components/Registration.test.ts b/web/__test__/components/Registration.test.ts
index 4ab7c7b66..5d9d47b2f 100644
--- a/web/__test__/components/Registration.test.ts
+++ b/web/__test__/components/Registration.test.ts
@@ -30,6 +30,8 @@ vi.mock('@vue/apollo-composable', () => ({
   useQuery: () => ({
     result: { value: {} },
     loading: { value: false },
+    onResult: vi.fn(),
+    onError: vi.fn(),
   }),
   useLazyQuery: () => ({
     result: { value: {} },
diff --git a/web/__test__/store/theme.test.ts b/web/__test__/store/theme.test.ts
index abc7c7d1f..7e15402fa 100644
--- a/web/__test__/store/theme.test.ts
+++ b/web/__test__/store/theme.test.ts
@@ -2,7 +2,7 @@
  * Theme store test coverage
  */
 
-import { nextTick } from 'vue';
+import { nextTick, ref } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 
 import { defaultColors } from '~/themes/default';
@@ -11,6 +11,15 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useThemeStore } from '~/store/theme';
 
+vi.mock('@vue/apollo-composable', () => ({
+  useQuery: () => ({
+    result: ref(null),
+    loading: ref(false),
+    onResult: vi.fn(),
+    onError: vi.fn(),
+  }),
+}));
+
 vi.mock('hex-to-rgba', () => ({
   default: vi.fn((hex, opacity) => `rgba(mock-${hex}-${opacity})`),
 }));
diff --git a/web/__test__/store/unraidApi.test.ts b/web/__test__/store/unraidApi.test.ts
index 19a711cf2..b2cbd6e45 100644
--- a/web/__test__/store/unraidApi.test.ts
+++ b/web/__test__/store/unraidApi.test.ts
@@ -126,12 +126,18 @@ describe('UnraidApi Store', () => {
       store.unraidApiStatus = 'offline';
       await nextTick();
 
+      expect(mockErrorsStore.removeErrorByRef).toHaveBeenCalledWith('unraidApiOffline');
       expect(mockErrorsStore.setError).toHaveBeenCalledWith({
         heading: 'Warning: API is offline!',
         message: 'The Unraid API is currently offline.',
         ref: 'unraidApiOffline',
         level: 'warning',
         type: 'unraidApiState',
+        actions: [
+          expect.objectContaining({
+            text: 'Restart unraid-api',
+          }),
+        ],
       });
     });
 
@@ -211,6 +217,28 @@ describe('UnraidApi Store', () => {
       expect(store.unraidApiStatus).toBe('restarting');
     });
 
+    it('should reuse existing restart promise when restart is already running', async () => {
+      const { WebguiUnraidApiCommand } = await import('~/composables/services/webgui');
+      const mockWebguiCommand = vi.mocked(WebguiUnraidApiCommand);
+
+      let resolveCommand: (() => void) | undefined;
+      const commandPromise = new Promise<void>((resolve) => {
+        resolveCommand = resolve;
+      });
+
+      mockWebguiCommand.mockReturnValueOnce(commandPromise);
+
+      store.unraidApiStatus = 'online';
+
+      const firstCallPromise = store.restartUnraidApiClient();
+      const secondCallPromise = store.restartUnraidApiClient();
+
+      expect(mockWebguiCommand).toHaveBeenCalledTimes(1);
+
+      resolveCommand?.();
+      await Promise.all([firstCallPromise, secondCallPromise]);
+    });
+
     it('should handle error during restart', async () => {
       const { WebguiUnraidApiCommand } = await import('~/composables/services/webgui');
       const mockWebguiCommand = vi.mocked(WebguiUnraidApiCommand);
diff --git a/web/postcss/scopeTailwindToUnapi.ts b/web/postcss/scopeTailwindToUnapi.ts
new file mode 100644
index 000000000..d6f75695e
--- /dev/null
+++ b/web/postcss/scopeTailwindToUnapi.ts
@@ -0,0 +1,165 @@
+interface Container {
+  type: string;
+  parent?: Container;
+}
+
+interface Rule extends Container {
+  selector?: string;
+  selectors?: string[];
+}
+
+interface AtRule extends Container {
+  name: string;
+  params: string;
+}
+
+type PostcssPlugin = {
+  postcssPlugin: string;
+  Rule?(rule: Rule): void;
+};
+
+type PluginCreator<T> = {
+  (opts?: T): PostcssPlugin;
+  postcss?: boolean;
+};
+
+export interface ScopeOptions {
+  scope?: string;
+  layers?: string[];
+  includeRoot?: boolean;
+}
+
+const DEFAULT_SCOPE = '.unapi';
+const DEFAULT_LAYERS = ['*'];
+const DEFAULT_INCLUDE_ROOT = true;
+
+const KEYFRAME_AT_RULES = new Set(['keyframes']);
+const NON_SCOPED_AT_RULES = new Set(['font-face', 'page']);
+const MERGE_WITH_SCOPE_PATTERNS: RegExp[] = [/^\.theme-/, /^\.has-custom-/, /^\.dark\b/];
+
+function shouldScopeRule(rule: Rule, targetLayers: Set<string>, includeRootRules: boolean): boolean {
+  const hasSelectorString = typeof rule.selector === 'string' && rule.selector.length > 0;
+  const hasSelectorArray = Array.isArray(rule.selectors) && rule.selectors.length > 0;
+
+  // Skip rules without selectors (e.g. @font-face) or nested keyframe steps
+  if (!hasSelectorString && !hasSelectorArray) {
+    return false;
+  }
+
+  const directParent = rule.parent;
+  if (directParent?.type === 'atrule') {
+    const parentAtRule = directParent as AtRule;
+    const parentAtRuleName = parentAtRule.name.toLowerCase();
+    if (KEYFRAME_AT_RULES.has(parentAtRuleName) || parentAtRuleName.endsWith('keyframes')) {
+      return false;
+    }
+    if (NON_SCOPED_AT_RULES.has(parentAtRuleName)) {
+      return false;
+    }
+  }
+
+  const includeAllLayers = targetLayers.has('*');
+
+  // Traverse ancestors to find the enclosing @layer declaration
+  let current: Container | undefined = rule.parent ?? undefined;
+
+  while (current) {
+    if (current.type === 'atrule') {
+      const currentAtRule = current as AtRule;
+      if (currentAtRule.name === 'layer') {
+        const layerNames = currentAtRule.params
+          .split(',')
+          .map((name: string) => name.trim())
+          .filter(Boolean);
+        if (includeAllLayers) {
+          return true;
+        }
+        return layerNames.some((name) => targetLayers.has(name));
+      }
+    }
+    current = current.parent ?? undefined;
+  }
+
+  // If the rule is not inside any @layer, treat it as root-level CSS
+  return includeRootRules;
+}
+
+function hasScope(selector: string, scope: string): boolean {
+  return selector.includes(scope);
+}
+
+function prefixSelector(selector: string, scope: string): string {
+  const trimmed = selector.trim();
+
+  if (!trimmed) {
+    return selector;
+  }
+
+  if (hasScope(trimmed, scope)) {
+    return trimmed;
+  }
+
+  // Do not prefix :host selectors – they are only valid at the top level
+  if (trimmed.startsWith(':host')) {
+    return trimmed;
+  }
+
+  if (trimmed === ':root') {
+    return scope;
+  }
+
+  if (trimmed.startsWith(':root')) {
+    return `${scope}${trimmed.slice(':root'.length)}`;
+  }
+
+  const firstToken = trimmed.split(/[\s>+~]/, 1)[0] ?? '';
+  const shouldMergeWithScope =
+    !firstToken.includes('\\:') && MERGE_WITH_SCOPE_PATTERNS.some((pattern) => pattern.test(firstToken));
+
+  if (shouldMergeWithScope) {
+    return `${scope}${trimmed}`;
+  }
+
+  return `${scope} ${trimmed}`;
+}
+
+export const scopeTailwindToUnapi: PluginCreator<ScopeOptions> = (options: ScopeOptions = {}) => {
+  const scope = options.scope ?? DEFAULT_SCOPE;
+  const layers = options.layers ?? DEFAULT_LAYERS;
+  const includeRootRules = options.includeRoot ?? DEFAULT_INCLUDE_ROOT;
+  const targetLayers = new Set<string>(layers);
+
+  return {
+    postcssPlugin: 'scope-tailwind-to-unapi',
+    Rule(rule: Rule) {
+      if (!shouldScopeRule(rule, targetLayers, includeRootRules)) {
+        return;
+      }
+
+      const hasSelectorArray = Array.isArray(rule.selectors);
+      let selectors: string[] = [];
+
+      if (hasSelectorArray && rule.selectors) {
+        selectors = rule.selectors;
+      } else if (rule.selector) {
+        selectors = [rule.selector];
+      }
+
+      if (!selectors.length) {
+        return;
+      }
+
+      const scopedSelectors = selectors.map((selector: string) => prefixSelector(selector, scope));
+
+      if (hasSelectorArray) {
+        rule.selectors = scopedSelectors;
+      } else {
+        rule.selector = scopedSelectors.join(', ');
+      }
+    },
+  };
+};
+
+scopeTailwindToUnapi.postcss = true;
+
+export default scopeTailwindToUnapi;
diff --git a/web/src/__tests__/scopeTailwindToUnapi.spec.ts b/web/src/__tests__/scopeTailwindToUnapi.spec.ts
new file mode 100644
index 000000000..b7d16a398
--- /dev/null
+++ b/web/src/__tests__/scopeTailwindToUnapi.spec.ts
@@ -0,0 +1,86 @@
+import { performance } from 'node:perf_hooks';
+
+import { describe, expect, it } from 'vitest';
+
+import scopeTailwindToUnapi from '../../postcss/scopeTailwindToUnapi';
+
+type LayerAtRule = {
+  type: string;
+  name: string;
+  params: string;
+  parent?: LayerAtRule;
+};
+
+type MutableRule = {
+  type: string;
+  selector?: string;
+  selectors?: string[];
+  parent?: LayerAtRule;
+};
+
+function createRule(selectors: string[], layer = 'utilities'): MutableRule {
+  return {
+    type: 'rule',
+    selector: selectors.join(', '),
+    selectors: [...selectors],
+    parent: {
+      type: 'atrule',
+      name: 'layer',
+      params: layer,
+    },
+  };
+}
+
+describe('scopeTailwindToUnapi plugin', () => {
+  it('prefixes simple selectors with .unapi scope', () => {
+    const plugin = scopeTailwindToUnapi();
+    const rule = createRule(['.btn-primary']);
+
+    plugin.Rule?.(rule);
+
+    expect(rule.selectors).toEqual(['.unapi .btn-primary']);
+  });
+
+  it('merges variant class selectors into the scope', () => {
+    const plugin = scopeTailwindToUnapi();
+    const rule = createRule(['.dark .btn-secondary']);
+
+    plugin.Rule?.(rule);
+
+    expect(rule.selectors).toEqual(['.unapi.dark .btn-secondary']);
+  });
+
+  it('handles rules expressed with selector strings only', () => {
+    const plugin = scopeTailwindToUnapi();
+    const rule: MutableRule = {
+      type: 'rule',
+      selector: '.card',
+      parent: {
+        type: 'atrule',
+        name: 'layer',
+        params: 'components',
+      },
+    };
+
+    plugin.Rule?.(rule);
+
+    expect(rule.selector).toBe('.unapi .card');
+  });
+
+  it('processes large rule sets within the target budget', () => {
+    const plugin = scopeTailwindToUnapi();
+    const totalRules = 10_000;
+
+    const start = performance.now();
+
+    for (let index = 0; index < totalRules; index += 1) {
+      const rule = createRule([`.test-${index}`]);
+      plugin.Rule?.(rule);
+    }
+
+    const durationMs = performance.now() - start;
+
+    // Ensure we stay well under 1 second even on slower CI hosts.
+    expect(durationMs).toBeLessThan(1_000);
+  });
+});
diff --git a/web/src/components/Logs/SingleLogViewer.vue b/web/src/components/Logs/SingleLogViewer.vue
index d6427d5ce..7e4817c63 100644
--- a/web/src/components/Logs/SingleLogViewer.vue
+++ b/web/src/components/Logs/SingleLogViewer.vue
@@ -325,7 +325,7 @@ defineExpose({ refreshLogContent });
 </script>
 
 <template>
-  <div class="flex h-full max-h-full flex-col overflow-hidden">
+  <div class="log-viewer flex h-full max-h-full flex-col overflow-hidden">
     <div
       class="bg-muted text-muted-foreground flex shrink-0 items-center justify-between px-4 py-2 text-xs"
     >
@@ -412,9 +412,8 @@ defineExpose({ refreshLogContent });
 
 <style scoped>
 /* Define CSS variables for both light and dark themes */
-:root {
+.log-viewer {
   /* Light theme colors (default) - adjusted for better readability */
-  --log-background: transparent;
   --log-keyword-color: hsl(var(--destructive) / 0.9); /* Slightly dimmed */
   --log-string-color: hsl(var(--primary) / 0.7); /* Dimmed primary color */
   --log-comment-color: hsl(var(--muted-foreground));
@@ -431,7 +430,6 @@ defineExpose({ refreshLogContent });
 
 /* Dark theme colors - use slightly different color combinations for better visibility */
 .theme-dark {
-  --log-background: transparent;
   --log-keyword-color: hsl(var(--destructive) / 0.9);
   --log-string-color: hsl(var(--primary) / 0.9);
   --log-comment-color: hsl(var(--muted-foreground) / 0.9);
@@ -446,11 +444,6 @@ defineExpose({ refreshLogContent });
   --log-success-bg: hsl(120, 100%, 40% / 0.15);
 }
 
-/* Add some basic styling for the highlighted logs */
-.hljs {
-  background: var(--log-background);
-}
-
 /* Style for error messages */
 .hljs .hljs-keyword,
 .hljs .hljs-selector-tag,
diff --git a/web/src/components/UpdateOs/ChangelogModal.vue b/web/src/components/UpdateOs/ChangelogModal.vue
index 73be0d7d0..2495fc02f 100644
--- a/web/src/components/UpdateOs/ChangelogModal.vue
+++ b/web/src/components/UpdateOs/ChangelogModal.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed } from 'vue';
 import { storeToRefs } from 'pinia';
 
 import {
-  ArrowLeftIcon,
   ArrowRightIcon,
   ArrowTopRightOnSquareIcon,
   KeyIcon,
@@ -18,7 +17,7 @@ import {
   ResponsiveModalHeader,
   ResponsiveModalTitle,
 } from '@unraid/ui';
-import { allowedDocsOriginRegex, allowedDocsUrlRegex } from '~/helpers/urls';
+import { DOCS } from '~/helpers/urls';
 
 import type { ComposerTranslation } from 'vue-i18n';
 
@@ -87,93 +86,55 @@ const handleClose = () => {
 };
 
 // iframe navigation handling
-const iframeRef = ref<HTMLIFrameElement | null>(null);
-const hasNavigated = ref(false);
-const currentIframeUrl = ref<string | null>(null);
-
 const docsChangelogUrl = computed(() => {
   return currentRelease.value?.changelogPretty ?? null;
 });
 
-const actualIframeSrc = ref<string | null>(docsChangelogUrl.value);
+const iframeSrc = computed(() => {
+  if (!docsChangelogUrl.value) {
+    return null;
+  }
 
-const showRawChangelog = computed<boolean>(() => {
-  return Boolean(!docsChangelogUrl.value && currentRelease.value?.changelog);
-});
+  try {
+    const entryTarget = docsChangelogUrl.value.trim();
+    if (!entryTarget) {
+      return null;
+    }
 
-const handleDocsPostMessages = (event: MessageEvent) => {
-  // Common checks for all iframe messages
-  if (
-    event.data &&
-    iframeRef.value &&
-    event.source === iframeRef.value.contentWindow &&
-    (allowedDocsOriginRegex.test(event.origin) || event.origin === 'http://localhost:3000')
-  ) {
-    // Handle navigation events
-    if (event.data.type === 'unraid-docs-navigation') {
-      if (typeof event.data.url === 'string' && allowedDocsUrlRegex.test(event.data.url)) {
-        hasNavigated.value = event.data.url !== docsChangelogUrl.value;
-        currentIframeUrl.value = event.data.url;
+    let entryUrl: URL;
+
+    try {
+      entryUrl = new URL(entryTarget);
+      const protocol = entryUrl.protocol.toLowerCase();
+      if (protocol !== 'http:' && protocol !== 'https:') {
+        return null;
+      }
+      if (entryUrl.origin !== DOCS.origin) {
+        return null;
+      }
+    } catch (error) {
+      entryUrl = new URL(entryTarget, DOCS);
+      if (entryUrl.origin !== DOCS.origin) {
+        return null;
       }
     }
-    // Handle theme ready events
-    else if (event.data.type === 'theme-ready') {
-      sendThemeToIframe();
-    }
+
+    const entryValue = `${entryUrl.pathname}${entryUrl.search}${entryUrl.hash}`;
+    const url = new URL(entryValue, DOCS);
+
+    url.searchParams.set('embed', '1');
+    url.searchParams.set('theme', isDarkMode.value ? 'dark' : 'light');
+    url.searchParams.set('entry', entryValue);
+
+    return url.toString();
+  } catch (error) {
+    console.error('Failed to construct docs iframe URL:', error);
+    return null;
   }
-};
-
-// Keep this function just for the watch handler
-const sendThemeToIframe = () => {
-  if (iframeRef.value && iframeRef.value.contentWindow) {
-    try {
-      const message = { type: 'theme-update', theme: isDarkMode.value ? 'dark' : 'light' };
-      iframeRef.value.contentWindow.postMessage(message, '*');
-    } catch (error) {
-      console.error('Failed to send theme to iframe:', error);
-    }
-  }
-};
-
-// Attach event listener right away instead of waiting for mount
-
-onMounted(() => {
-  // Set initial values only
-  window.addEventListener('message', handleDocsPostMessages);
-  currentIframeUrl.value = docsChangelogUrl.value;
 });
 
-onBeforeUnmount(() => {
-  window.removeEventListener('message', handleDocsPostMessages);
-});
-
-const revertToInitialChangelog = () => {
-  if (iframeRef.value && docsChangelogUrl.value) {
-    iframeRef.value.src = docsChangelogUrl.value;
-    hasNavigated.value = false;
-    currentIframeUrl.value = docsChangelogUrl.value;
-  }
-};
-
-watch(
-  docsChangelogUrl,
-  (newUrl) => {
-    currentIframeUrl.value = newUrl;
-    hasNavigated.value = false;
-
-    if (newUrl) {
-      actualIframeSrc.value = newUrl;
-    } else {
-      actualIframeSrc.value = null;
-    }
-  },
-  { immediate: true }
-);
-
-// Only need to watch for theme changes
-watch(isDarkMode, () => {
-  // The iframe will only pick up the message if it has sent theme-ready
-  sendThemeToIframe();
+const showRawChangelog = computed<boolean>(() => {
+  return Boolean(!iframeSrc.value && currentRelease.value?.changelog);
 });
 </script>
 
@@ -196,13 +157,13 @@ watch(isDarkMode, () => {
     <div class="flex-1 px-3">
       <div class="flex flex-col gap-4 sm:min-w-[40rem]">
         <!-- iframe for changelog if available -->
-        <div v-if="docsChangelogUrl" class="h-[calc(100vh-15rem)] w-full overflow-hidden sm:h-[45rem]">
+        <div v-if="iframeSrc" class="h-[calc(100vh-15rem)] w-full overflow-hidden sm:h-[45rem]">
           <iframe
-            v-if="actualIframeSrc"
-            ref="iframeRef"
-            :src="actualIframeSrc"
+            :src="iframeSrc"
             class="h-full w-full rounded-md border-0"
             sandbox="allow-scripts allow-same-origin"
+            allow="fullscreen"
+            referrerpolicy="no-referrer"
             title="Unraid Changelog"
           />
         </div>
@@ -231,21 +192,12 @@ watch(isDarkMode, () => {
     <ResponsiveModalFooter>
       <div :class="cn('flex w-full flex-wrap justify-between gap-3 md:gap-4')">
         <div :class="cn('flex flex-wrap justify-start gap-3 md:gap-4')">
-          <!-- Back to changelog button (when navigated away) -->
-          <BrandButton
-            v-if="hasNavigated && docsChangelogUrl"
-            variant="underline"
-            :icon="ArrowLeftIcon"
-            aria-label="Back to Changelog"
-            @click="revertToInitialChangelog"
-          />
-
           <!-- View on docs button -->
           <BrandButton
-            v-if="currentIframeUrl || currentRelease?.changelogPretty"
+            v-if="docsChangelogUrl"
             variant="underline"
             :external="true"
-            :href="currentIframeUrl || currentRelease?.changelogPretty"
+            :href="docsChangelogUrl"
             :icon-right="ArrowTopRightOnSquareIcon"
             aria-label="View on Docs"
             target="_blank"
diff --git a/web/src/components/UpdateOs/CheckUpdateResponseModal.vue b/web/src/components/UpdateOs/CheckUpdateResponseModal.vue
index b1115cf44..1d42c3627 100644
--- a/web/src/components/UpdateOs/CheckUpdateResponseModal.vue
+++ b/web/src/components/UpdateOs/CheckUpdateResponseModal.vue
@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
 import { ArrowDownTrayIcon } from '@heroicons/vue/24/outline';
 import {
   ArrowTopRightOnSquareIcon,
+  CheckCircleIcon,
   CogIcon,
   EyeIcon,
   IdentificationIcon,
@@ -56,6 +57,7 @@ const {
   regExp,
   regUpdatesExpired,
   dateTimeFormat,
+  osVersion,
   updateOsIgnoredReleases,
   updateOsNotificationsEnabled,
   updateOsResponse,
@@ -162,7 +164,7 @@ const extraLinks = computed((): BrandButtonProps[] => {
   return buttons;
 });
 
-const actionButtons = computed((): BrandButtonProps[] | null => {
+const actionButtons = computed((): BrandButtonProps[] => {
   // If ignoring release, show close button as primary action
   if (ignoreThisRelease.value && (available.value || availableWithRenewal.value)) {
     return [
@@ -173,13 +175,13 @@ const actionButtons = computed((): BrandButtonProps[] | null => {
     ];
   }
 
-  // update not available or no action buttons default closing
-  if (!available.value && !availableWithRenewal.value) {
-    return null;
-  }
-
   const buttons: BrandButtonProps[] = [];
 
+  // update not available or no action buttons default to empty array
+  if (!available.value && !availableWithRenewal.value) {
+    return buttons;
+  }
+
   // update available but not stable branch - should link out to account update callback
   // if availableWithRenewal.value is true, then we need to renew the license before we can update so don't show the verify button
   if (availableRequiresAuth.value && !availableWithRenewal.value) {
@@ -219,6 +221,10 @@ const actionButtons = computed((): BrandButtonProps[] | null => {
   return buttons;
 });
 
+const showNoUpdateContent = computed(() => {
+  return !checkForUpdatesLoading.value && !available.value && !availableWithRenewal.value;
+});
+
 const close = () => {
   // close it
   updateOsStore.setModalOpen(false);
@@ -231,12 +237,14 @@ const close = () => {
 };
 
 const renderMainSlot = computed(() => {
-  return !!(
-    checkForUpdatesLoading.value ||
-    available.value ||
-    availableWithRenewal.value ||
-    extraLinks.value?.length > 0 ||
-    updateOsIgnoredReleases.value.length > 0
+  return (
+    !!(
+      checkForUpdatesLoading.value ||
+      available.value ||
+      availableWithRenewal.value ||
+      extraLinks.value?.length > 0 ||
+      updateOsIgnoredReleases.value.length > 0
+    ) || showNoUpdateContent.value
   );
 });
 
@@ -330,6 +338,22 @@ const modalWidth = computed(() => {
             </div>
           </div>
 
+          <div v-if="showNoUpdateContent" class="flex flex-col items-center gap-4 py-6 text-center">
+            <div class="bg-primary/10 flex items-center justify-center rounded-full p-4">
+              <CheckCircleIcon class="text-primary h-10 w-10" />
+            </div>
+            <div class="space-y-2">
+              <p v-if="osVersion" class="text-muted-foreground text-center text-sm font-semibold">
+                {{ t('Current Version {0}', [osVersion]) }}
+              </p>
+              <p
+                v-if="modalCopy?.description"
+                class="text-muted-foreground text-xs sm:text-sm"
+                v-html="modalCopy.description"
+              />
+            </div>
+          </div>
+
           <div
             v-if="extraLinks.length > 0"
             :class="cn('xs:!flex-row flex flex-col justify-center gap-2')"
@@ -370,14 +394,13 @@ const modalWidth = computed(() => {
           :class="
             cn(
               'mx-auto flex w-full gap-2',
-              actionButtons ? 'xs:!flex-row flex-col-reverse justify-between' : 'justify-center'
+              actionButtons.length > 0
+                ? 'xs:!flex-row flex-col-reverse justify-between'
+                : 'justify-center'
             )
           "
         >
-          <div
-            v-if="actionButtons"
-            :class="cn('xs:!flex-row flex flex-col-reverse justify-start gap-3')"
-          >
+          <div :class="cn('xs:!flex-row mt-2 flex flex-col-reverse justify-start gap-3')">
             <TooltipProvider>
               <Tooltip :delay-duration="0">
                 <TooltipTrigger as-child>
@@ -403,7 +426,10 @@ const modalWidth = computed(() => {
               </Tooltip>
             </TooltipProvider>
           </div>
-          <div v-if="actionButtons" :class="cn('xs:!flex-row flex flex-col justify-end gap-3')">
+          <div
+            v-if="actionButtons.length > 0"
+            :class="cn('xs:!flex-row flex flex-col justify-end gap-3')"
+          >
             <template v-for="item in actionButtons" :key="item.text">
               <TooltipProvider v-if="ignoreThisRelease && item.text === localizedCloseText">
                 <Tooltip :delay-duration="300">
diff --git a/web/src/components/Wrapper/mount-engine.ts b/web/src/components/Wrapper/mount-engine.ts
index e86150ec8..e9e44abfb 100644
--- a/web/src/components/Wrapper/mount-engine.ts
+++ b/web/src/components/Wrapper/mount-engine.ts
@@ -12,6 +12,7 @@ import en_US from '~/locales/en_US.json';
 
 // Import Pinia for use in Vue apps
 import { globalPinia } from '~/store/globalPinia';
+import { useThemeStore } from '~/store/theme';
 
 // Ensure Apollo client is singleton
 const apolloClient = (typeof window !== 'undefined' && window.apolloClient) || client;
@@ -118,6 +119,8 @@ export function mountUnifiedApp() {
   app.use(ui);
   app.provide(DefaultApolloClient, apolloClient);
 
+  const themeStore = useThemeStore();
+
   // Mount the app to establish context
   let rootElement = document.getElementById('unraid-unified-root');
   if (!rootElement) {
@@ -214,6 +217,9 @@ export function mountUnifiedApp() {
     });
   });
 
+  // Re-apply theme classes/variables now that new scoped roots exist
+  themeStore.setCssVars();
+
   console.debug(`[UnifiedMount] Mounted ${mountedComponents.length} components`);
 
   return app;
diff --git a/web/src/store/errors.ts b/web/src/store/errors.ts
index 2112df21a..30c9fba7a 100644
--- a/web/src/store/errors.ts
+++ b/web/src/store/errors.ts
@@ -5,6 +5,9 @@ import { OBJ_TO_STR } from '~/helpers/functions';
 
 import type { BrandButtonProps } from '@unraid/ui';
 import type { Server } from '~/types/server';
+import type { UserProfileLink } from '~/types/userProfile';
+
+export type ErrorAction = BrandButtonProps | UserProfileLink;
 
 export type ErrorType =
   | 'account'
@@ -17,7 +20,7 @@ export type ErrorType =
   | 'unraidApiState';
 
 export interface Error {
-  actions?: BrandButtonProps[];
+  actions?: ErrorAction[];
   debugServer?: Server;
   forumLink?: boolean;
   heading: string; // if adding new errors be sure to add translations key value pairs
diff --git a/web/src/store/theme.ts b/web/src/store/theme.ts
index 7c5af393b..f6a70de30 100644
--- a/web/src/store/theme.ts
+++ b/web/src/store/theme.ts
@@ -1,10 +1,11 @@
 import { computed, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { useLazyQuery } from '@vue/apollo-composable';
+import { useQuery } from '@vue/apollo-composable';
 
 import { defaultColors } from '~/themes/default';
 import hexToRgba from 'hex-to-rgba';
 
+import type { GetThemeQuery } from '~/composables/gql/graphql';
 import type { Theme, ThemeVariables } from '~/themes/types';
 
 import { graphql } from '~/composables/gql/gql';
@@ -26,21 +27,69 @@ export const GET_THEME_QUERY = graphql(`
   }
 `);
 
+const DEFAULT_THEME: Theme = {
+  name: 'white',
+  banner: false,
+  bannerGradient: false,
+  bgColor: '',
+  descriptionShow: false,
+  metaColor: '',
+  textColor: '',
+};
+
+const DYNAMIC_VAR_KEYS = [
+  '--custom-header-text-primary',
+  '--custom-header-text-secondary',
+  '--custom-header-background-color',
+  '--custom-header-gradient-start',
+  '--custom-header-gradient-end',
+  '--banner-gradient',
+] as const;
+
+type DynamicVarKey = (typeof DYNAMIC_VAR_KEYS)[number];
+
 export const useThemeStore = defineStore('theme', () => {
   // State
-  const theme = ref<Theme>({
-    name: 'white',
-    banner: false,
-    bannerGradient: false,
-    bgColor: '',
-    descriptionShow: false,
-    metaColor: '',
-    textColor: '',
-  });
-
-  const { load } = useLazyQuery(GET_THEME_QUERY);
+  const theme = ref<Theme>({ ...DEFAULT_THEME });
 
   const activeColorVariables = ref<ThemeVariables>(defaultColors.white);
+  const hasServerTheme = ref(false);
+
+  const { result, onResult, onError } = useQuery<GetThemeQuery>(GET_THEME_QUERY, null, {
+    fetchPolicy: 'cache-and-network',
+    nextFetchPolicy: 'cache-first',
+  });
+
+  const applyThemeFromQuery = (publicTheme?: GetThemeQuery['publicTheme'] | null) => {
+    if (!publicTheme) {
+      return;
+    }
+
+    hasServerTheme.value = true;
+    theme.value = {
+      name: publicTheme.name?.toLowerCase() ?? DEFAULT_THEME.name,
+      banner: publicTheme.showBannerImage ?? DEFAULT_THEME.banner,
+      bannerGradient: publicTheme.showBannerGradient ?? DEFAULT_THEME.bannerGradient,
+      bgColor: publicTheme.headerBackgroundColor ?? DEFAULT_THEME.bgColor,
+      descriptionShow: publicTheme.showHeaderDescription ?? DEFAULT_THEME.descriptionShow,
+      metaColor: publicTheme.headerSecondaryTextColor ?? DEFAULT_THEME.metaColor,
+      textColor: publicTheme.headerPrimaryTextColor ?? DEFAULT_THEME.textColor,
+    };
+  };
+
+  onResult(({ data }) => {
+    if (data?.publicTheme) {
+      applyThemeFromQuery(data.publicTheme);
+    }
+  });
+
+  if (result.value?.publicTheme) {
+    applyThemeFromQuery(result.value.publicTheme);
+  }
+
+  onError((err) => {
+    console.warn('Failed to load theme from server, keeping existing theme:', err);
+  });
 
   // Getters
   // Apply dark mode for gray and black themes
@@ -56,38 +105,17 @@ export const useThemeStore = defineStore('theme', () => {
     const end = theme.value?.bgColor ? 'var(--header-gradient-end)' : 'var(--header-background-color)';
     return `background-image: linear-gradient(90deg, ${start} 0, ${end} 90%);`;
   });
+
   // Actions
-  const setTheme = async (data?: Theme) => {
+  const setTheme = (data?: Partial<Theme>) => {
     if (data) {
-      theme.value = data;
-    } else {
-      try {
-        const result = await load();
-        if (result && result.publicTheme) {
-          theme.value = {
-            name: result.publicTheme.name?.toLowerCase() || 'white',
-            banner: result.publicTheme.showBannerImage ?? false,
-            bannerGradient: result.publicTheme.showBannerGradient ?? false,
-            bgColor: result.publicTheme.headerBackgroundColor || '',
-            descriptionShow: result.publicTheme.showHeaderDescription ?? false,
-            metaColor: result.publicTheme.headerSecondaryTextColor || '',
-            textColor: result.publicTheme.headerPrimaryTextColor || '',
-          };
-          return;
-        }
-      } catch (error) {
-        console.warn('Failed to load theme from server, using default:', error);
+      if (hasServerTheme.value) {
+        return;
       }
 
-      // Single fallback for both no data and error cases
       theme.value = {
-        name: 'white',
-        banner: false,
-        bannerGradient: false,
-        bgColor: '',
-        descriptionShow: false,
-        metaColor: '',
-        textColor: '',
+        ...theme.value,
+        ...data,
       };
     }
   };
@@ -109,7 +137,7 @@ export const useThemeStore = defineStore('theme', () => {
 
     // Only set CSS variables for dynamic/user-configured values from GraphQL
     // Static theme values are handled by Tailwind v4 theme classes in @tailwind-shared
-    const dynamicVars: Record<string, string> = {};
+    const dynamicVars: Partial<Record<DynamicVarKey, string>> = {};
 
     // User-configured colors from webGUI @ /Settings/DisplaySettings
     if (theme.value.textColor) {
@@ -141,19 +169,31 @@ export const useThemeStore = defineStore('theme', () => {
     }
 
     requestAnimationFrame(() => {
-      // Apply theme classes to documentElement for Tailwind v4
-      const root = document.documentElement;
+      const scopedTargets: HTMLElement[] = [
+        document.documentElement,
+        ...Array.from(document.querySelectorAll<HTMLElement>('.unapi')),
+      ];
 
-      // Remove all existing theme and custom classes
-      root.className = root.className
-        .split(' ')
-        .filter((c) => !c.startsWith('theme-') && c !== 'dark' && !c.startsWith('has-custom-'))
-        .join(' ');
+      const cleanClassList = (classList: string) =>
+        classList
+          .split(' ')
+          .filter((c) => !c.startsWith('theme-') && c !== 'dark' && !c.startsWith('has-custom-'))
+          .filter(Boolean)
+          .join(' ');
 
-      // Add new theme classes
-      [...themeClasses, ...customClasses].forEach((cls) => root.classList.add(cls));
+      // Apply theme and custom classes to html element and all .unapi roots
+      scopedTargets.forEach((target) => {
+        target.className = cleanClassList(target.className);
+        [...themeClasses, ...customClasses].forEach((cls) => target.classList.add(cls));
 
-      // Also apply dark class to body for compatibility
+        if (darkMode.value) {
+          target.classList.add('dark');
+        } else {
+          target.classList.remove('dark');
+        }
+      });
+
+      // Maintain dark mode flag on body for legacy components
       if (darkMode.value) {
         document.body.classList.add('dark');
       } else {
@@ -162,12 +202,22 @@ export const useThemeStore = defineStore('theme', () => {
 
       // Only apply dynamic CSS variables for custom user values
       // All theme defaults are handled by classes in @tailwind-shared/theme-variants.css
-      if (Object.keys(dynamicVars).length > 0) {
-        // Apply to root element for global availability
-        Object.entries(dynamicVars).forEach(([key, value]) => {
-          document.documentElement.style.setProperty(key, value);
+      const activeDynamicKeys = Object.keys(dynamicVars) as DynamicVarKey[];
+
+      scopedTargets.forEach((target) => {
+        activeDynamicKeys.forEach((key) => {
+          const value = dynamicVars[key];
+          if (value !== undefined) {
+            target.style.setProperty(key, value);
+          }
         });
-      }
+
+        DYNAMIC_VAR_KEYS.forEach((key) => {
+          if (!Object.prototype.hasOwnProperty.call(dynamicVars, key)) {
+            target.style.removeProperty(key);
+          }
+        });
+      });
 
       // Store active variables for reference (from defaultColors for compatibility)
       const customTheme = { ...defaultColors[selectedTheme] };
diff --git a/web/src/store/unraidApi.ts b/web/src/store/unraidApi.ts
index c53b31eb6..e78ddf65c 100644
--- a/web/src/store/unraidApi.ts
+++ b/web/src/store/unraidApi.ts
@@ -16,35 +16,52 @@ export const useUnraidApiStore = defineStore('unraidApi', () => {
   const errorsStore = useErrorsStore();
   const serverStore = useServerStore();
   const unraidApiClient = ref<ApolloClientType<NormalizedCacheObject> | null>(client);
+  let pendingRestartPromise: Promise<void> | null = null;
 
   // const unraidApiErrors = ref<any[]>([]);
   const unraidApiStatus = ref<'connecting' | 'offline' | 'online' | 'restarting'>('connecting');
   const prioritizeCorsError = ref(false); // Ensures we don't overwrite this specific error message with a non-descriptive network error message
 
-  const offlineError = computed(() => {
-    if (unraidApiStatus.value === 'offline') {
-      return new Error('The Unraid API is currently offline.');
+  /**
+   * Can both start and restart the unraid-api depending on its current status
+   */
+  const restartUnraidApiClient = () => {
+    if (pendingRestartPromise) {
+      return pendingRestartPromise;
     }
-  });
-  // maintains an error in global store while api is offline
-  watch(
-    offlineError,
-    (error) => {
-      const errorId = 'unraidApiOffline';
-      if (error) {
-        errorsStore.setError({
-          heading: 'Warning: API is offline!',
-          message: error.message,
-          ref: errorId,
-          level: 'warning',
-          type: 'unraidApiState',
+
+    const command = unraidApiStatus.value === 'offline' ? 'start' : 'restart';
+    unraidApiStatus.value = 'restarting';
+
+    const restartTask = (async () => {
+      try {
+        await WebguiUnraidApiCommand({
+          csrf_token: serverStore.csrf,
+          command,
+        });
+      } catch (error) {
+        let errorMessage = 'Unknown error';
+        if (typeof error === 'string') {
+          errorMessage = error.toUpperCase();
+        } else if (error instanceof Error) {
+          errorMessage = error.message;
+        }
+        errorsStore.setError({
+          heading: 'Error: unraid-api restart',
+          message: errorMessage,
+          level: 'error',
+          ref: 'restartUnraidApiClient',
+          type: 'request',
         });
-      } else {
-        errorsStore.removeErrorByRef(errorId);
       }
-    },
-    { immediate: true }
-  );
+    })();
+
+    pendingRestartPromise = restartTask.finally(() => {
+      pendingRestartPromise = null;
+    });
+
+    return pendingRestartPromise;
+  };
 
   const unraidApiRestartAction = computed((): UserProfileLink | undefined => {
     const { connectPluginInstalled, stateDataError } = serverStore;
@@ -59,6 +76,34 @@ export const useUnraidApiStore = defineStore('unraidApi', () => {
     };
   });
 
+  const offlineError = computed(() => {
+    if (unraidApiStatus.value === 'offline') {
+      return new Error('The Unraid API is currently offline.');
+    }
+    return undefined;
+  });
+
+  // maintains an error in global store while api is offline
+  watch(
+    [offlineError, unraidApiRestartAction],
+    ([error, restartAction]) => {
+      const errorId = 'unraidApiOffline';
+      errorsStore.removeErrorByRef(errorId);
+
+      if (error) {
+        errorsStore.setError({
+          heading: 'Warning: API is offline!',
+          message: error.message,
+          ref: errorId,
+          level: 'warning',
+          type: 'unraidApiState',
+          actions: restartAction ? [restartAction] : undefined,
+        });
+      }
+    },
+    { immediate: true }
+  );
+
   /**
    * Automatically called when an apiKey is unset in the serverStore
    */
@@ -74,33 +119,6 @@ export const useUnraidApiStore = defineStore('unraidApi', () => {
     unraidApiClient.value = null;
     unraidApiStatus.value = 'offline';
   };
-  /**
-   * Can both start and restart the unraid-api depending on it's current status
-   */
-  const restartUnraidApiClient = async () => {
-    const command = unraidApiStatus.value === 'offline' ? 'start' : 'restart';
-    unraidApiStatus.value = 'restarting';
-    try {
-      await WebguiUnraidApiCommand({
-        csrf_token: serverStore.csrf,
-        command,
-      });
-    } catch (error) {
-      let errorMessage = 'Unknown error';
-      if (typeof error === 'string') {
-        errorMessage = error.toUpperCase();
-      } else if (error instanceof Error) {
-        errorMessage = error.message;
-      }
-      errorsStore.setError({
-        heading: 'Error: unraid-api restart',
-        message: errorMessage,
-        level: 'error',
-        ref: 'restartUnraidApiClient',
-        type: 'request',
-      });
-    }
-  };
 
   return {
     unraidApiClient,
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 6da12942a..452afef64 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -8,6 +8,7 @@ import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
 import removeConsole from 'vite-plugin-remove-console';
 
+import scopeTailwindToUnapi from './postcss/scopeTailwindToUnapi';
 import { serveStaticHtml } from './vite-plugin-serve-static';
 
 const dropConsole = process.env.VITE_ALLOW_CONSOLE_LOGS !== 'true';
@@ -83,6 +84,12 @@ export default defineConfig({
       : []),
   ],
 
+  css: {
+    postcss: {
+      plugins: [scopeTailwindToUnapi()],
+    },
+  },
+
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
diff --git a/web/vitest.setup.ts b/web/vitest.setup.ts
index d101487a0..d8082bca4 100644
--- a/web/vitest.setup.ts
+++ b/web/vitest.setup.ts
@@ -1,7 +1,25 @@
+import { ref } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 
 import { beforeEach, vi } from 'vitest';
 
+vi.mock('@vue/apollo-composable', async () => {
+  const actual =
+    await vi.importActual<typeof import('@vue/apollo-composable')>('@vue/apollo-composable');
+
+  const useQueryMock = vi.fn(() => ({
+    result: ref(null),
+    loading: ref(false),
+    onResult: vi.fn(),
+    onError: vi.fn(),
+  }));
+
+  return {
+    ...actual,
+    useQuery: useQueryMock,
+  };
+});
+
 // Mock WebSocket for test environment
 if (!global.WebSocket) {
   const mockWebSocket = vi.fn().mockImplementation(() => ({