diff --git a/.changeset/wise-dodos-knock.md b/.changeset/wise-dodos-knock.md
new file mode 100644
index 0000000..6b1f552
--- /dev/null
+++ b/.changeset/wise-dodos-knock.md
@@ -0,0 +1,5 @@
+---
+'@arcanewizards/sigil': patch
+---
+
+Allow for UpdateBanner and UpdateDetails classes to be customized
diff --git a/apps/timecode-toolbox/src/components/frontend/constants.ts b/apps/timecode-toolbox/src/components/frontend/constants.ts
index 025e3e8..d46067f 100644
--- a/apps/timecode-toolbox/src/components/frontend/constants.ts
+++ b/apps/timecode-toolbox/src/components/frontend/constants.ts
@@ -1,6 +1,6 @@
 import { TIMECODE_FPS } from '@arcanewizards/artnet/constants';
 import {
-  UpdateCheckStrings,
+  UpdateBannerStrings,
   UpdateDetailsStrings,
 } from '@arcanewizards/sigil/frontend/updates';
 
@@ -174,7 +174,7 @@ export const STRINGS = {
         `Version ${latest} is available! You are currently on version ${current}.`,
       download: 'Download',
       details: 'Details',
-    } satisfies UpdateCheckStrings,
+    } satisfies UpdateBannerStrings,
     details: {
       title: 'Update Details',
       close: 'Close',
diff --git a/apps/timecode-toolbox/src/components/frontend/toolbox/core/layout.tsx b/apps/timecode-toolbox/src/components/frontend/toolbox/core/layout.tsx
index 2b5122a..2370b13 100644
--- a/apps/timecode-toolbox/src/components/frontend/toolbox/core/layout.tsx
+++ b/apps/timecode-toolbox/src/components/frontend/toolbox/core/layout.tsx
@@ -101,6 +101,7 @@ export const Layout = <WindowMode extends string>({
         strings={STRINGS.updates.banner}
         updates={updates}
         openDetails={viewUpdateDetails}
+        className="border-b"
       />
       <div className="relative flex h-0 grow flex-col">
         {connection.state !== 'connected' ? (
diff --git a/apps/timecode-toolbox/src/components/frontend/toolbox/root.tsx b/apps/timecode-toolbox/src/components/frontend/toolbox/root.tsx
index 0846137..43ca568 100644
--- a/apps/timecode-toolbox/src/components/frontend/toolbox/root.tsx
+++ b/apps/timecode-toolbox/src/components/frontend/toolbox/root.tsx
@@ -504,6 +504,7 @@ export const ToolboxRoot: FC<Props> = ({ info }) => {
                       updates={info.state.updates}
                       strings={STRINGS.updates.details}
                       closeDetails={() => setWindowMode(null)}
+                      className="grow"
                     />
                   ) : null,
                 button: null,
diff --git a/packages/sigil/src/frontend/updates.tsx b/packages/sigil/src/frontend/updates.tsx
index b1f6ca4..445c450 100644
--- a/packages/sigil/src/frontend/updates.tsx
+++ b/packages/sigil/src/frontend/updates.tsx
@@ -6,8 +6,9 @@ import type { CheckForUpdatesResponse } from '@arcanewizards/apis';
 import { ToolbarDivider, ToolbarRow, ToolbarWrapper } from './toolbars';
 import { ControlButton } from './controls';
 import { apiContentToReact } from './utils';
+import { cn } from '@arcanejs/toolkit-frontend/util';
 
-export type UpdateCheckStrings = {
+export type UpdateBannerStrings = {
   download: string;
   details: string;
   updateAvailable: (currentVersion: string, latestVersion: string) => string;
@@ -33,7 +34,8 @@ export type UpdateCheckResult =
     };
 
 type UpdateBannerProps = {
-  strings: UpdateCheckStrings;
+  className?: string;
+  strings: UpdateBannerStrings;
   updates: UpdateCheckResult | null;
   openDetails?: () => void;
 };
@@ -47,6 +49,7 @@ const clsBannerButton = () => `
 `;
 
 export const UpdateBanner: FC<UpdateBannerProps> = ({
+  className,
   strings,
   updates,
   openDetails,
@@ -82,11 +85,14 @@ export const UpdateBanner: FC<UpdateBannerProps> = ({
   if (displayState?.type === 'error') {
     return (
       <div
-        className="
-          flex items-center justify-center gap-2 border-b
-          border-sigil-usage-orange-border bg-sigil-usage-orange-background p-1
-          text-sigil-usage-orange-text
-        "
+        className={cn(
+          `
+            flex items-center justify-center gap-2
+            border-sigil-usage-orange-border bg-sigil-usage-orange-background
+            p-1 text-sigil-usage-orange-text
+          `,
+          className,
+        )}
       >
         <Icon icon="error" />
         {displayState.error}
@@ -97,11 +103,14 @@ export const UpdateBanner: FC<UpdateBannerProps> = ({
   if (displayState?.type === 'updates-available') {
     return (
       <div
-        className="
-          flex items-center justify-center gap-2 border-b
-          border-sigil-usage-hint-border bg-sigil-usage-hint-background p-1
-          text-sigil-usage-hint-text
-        "
+        className={cn(
+          `
+            flex items-center justify-center gap-2
+            border-sigil-usage-hint-border bg-sigil-usage-hint-background p-1
+            text-sigil-usage-hint-text
+          `,
+          className,
+        )}
       >
         <Icon icon="upgrade" />
         {strings.updateAvailable(version, displayState.response.latestVersion)}
@@ -130,12 +139,14 @@ export type UpdateDetailsStrings = {
 };
 
 type UpdateDetailsProps = {
+  className?: string;
   updates: UpdateCheckResult;
   strings: UpdateDetailsStrings;
   closeDetails: () => void;
 };
 
 export const UpdateDetails: FC<UpdateDetailsProps> = ({
+  className,
   updates,
   strings,
   closeDetails,
@@ -147,7 +158,7 @@ export const UpdateDetails: FC<UpdateDetailsProps> = ({
   }
 
   return (
-    <div className="flex grow flex-col">
+    <div className={cn('flex flex-col', className)}>
       <ToolbarWrapper>
         <ToolbarRow>
           <span className="grow p-1">{strings.title}</span>