diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss
index 1078e5936..bfa169ed3 100644
--- a/web/components/ui/Content/Content.module.scss
+++ b/web/components/ui/Content/Content.module.scss
@@ -71,6 +71,10 @@
   background-color: var(--theme-color-components-video-background);
 }
 
+.offlineBanner {
+  color: var(--theme-color-background-main);
+}
+
 .statusBar {
   flex-shrink: 0;
 }
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index a5a95b0ed..9e381f23c 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -229,7 +229,7 @@ export const Content: FC = () => {
                 lastLive={lastDisconnectTime}
                 onNotifyClick={() => setShowNotifyModal(true)}
                 onFollowClick={() => setShowFollowModal(true)}
-                className={styles.topSectionElement}
+                className={classnames([styles.topSectionElement, styles.offlineBanner])}
               />
             </div>
           )}
diff --git a/web/components/ui/OfflineBanner/OfflineBanner.module.scss b/web/components/ui/OfflineBanner/OfflineBanner.module.scss
index c22d29c2d..64bea76e0 100644
--- a/web/components/ui/OfflineBanner/OfflineBanner.module.scss
+++ b/web/components/ui/OfflineBanner/OfflineBanner.module.scss
@@ -9,7 +9,6 @@
   width: clamp(00px, 100%, 600px);
   display: flex;
   flex-direction: column;
-  color: var(--theme-color-background-main);
   margin: 3rem auto;
   padding: 2.4em;
 
@@ -22,7 +21,7 @@
 
 .bodyText {
   line-height: 2rem;
-	font-size: 1.2rem;
+  font-size: 1.2rem;
 }
 
 .separator {
@@ -32,10 +31,10 @@
 
 .lastLiveDate {
   margin-top: 2rem;
-  font-size: .8rem;
-  color: var(--theme-color-palette-8);
+  font-size: 0.8rem;
+  opacity: 0.7;
   font-family: var(--theme-text-body-font-family);
-	font-weight: 300;
+  font-weight: 300;
 
   .clockIcon {
     margin-right: 6px;
@@ -43,9 +42,9 @@
 }
 
 .header {
-	font-family: var(--theme-text-display-font-family);
-	font-weight: 600;
-	font-size: 1.4rem;
+  font-family: var(--theme-text-display-font-family);
+  font-weight: 600;
+  font-size: 1.4rem;
 }
 
 .footer {
diff --git a/web/pages/embed/video/index.tsx b/web/pages/embed/video/index.tsx
index 4db717113..6c20b1c26 100644
--- a/web/pages/embed/video/index.tsx
+++ b/web/pages/embed/video/index.tsx
@@ -47,7 +47,12 @@ export default function VideoEmbed() {
   const loadingState = <Skeleton active style={{ padding: '10px' }} paragraph={{ rows: 10 }} />;
 
   const offlineState = (
-    <OfflineBanner streamName={name} customText={offlineMessage} notificationsEnabled={false} />
+    <OfflineBanner
+      streamName={name}
+      customText={offlineMessage}
+      lastLive={lastDisconnectTime}
+      notificationsEnabled={false}
+    />
   );
 
   const onlineState = (