diff --git a/packages/console/src/components/ItemPreview/index.module.scss b/packages/console/src/components/ItemPreview/index.module.scss
index 93a5e01ce..f1a89c1fe 100644
--- a/packages/console/src/components/ItemPreview/index.module.scss
+++ b/packages/console/src/components/ItemPreview/index.module.scss
@@ -9,15 +9,23 @@
     margin-left: _.unit(3);
   }
 
-  .title {
-    font: var(--font-body-medium);
-    color: var(--color-text-link);
-    text-decoration: none;
-  }
+  .content {
+    padding-right: _.unit(4);
+    max-width: 100%;
 
-  .subtitle {
-    font: var(--font-body-small);
-    color: var(--color-outline);
+    .title {
+      font: var(--font-body-medium);
+      color: var(--color-text-link);
+      text-decoration: none;
+    }
+
+    .subtitle {
+      font: var(--font-body-small);
+      color: var(--color-outline);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   &.compact {
diff --git a/packages/console/src/pages/SignInExperience/components/Preview.tsx b/packages/console/src/pages/SignInExperience/components/Preview.tsx
index d332c1754..80a2bf267 100644
--- a/packages/console/src/pages/SignInExperience/components/Preview.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Preview.tsx
@@ -31,7 +31,7 @@ const Preview = ({ signInExperience, className }: Props) => {
     const light = { value: AppearanceMode.LightMode, title: t('sign_in_exp.preview.light') };
     const dark = { value: AppearanceMode.DarkMode, title: t('sign_in_exp.preview.dark') };
 
-    if (!signInExperience?.branding.isDarkModeEnabled) {
+    if (!signInExperience?.color.isDarkModeEnabled) {
       return [light];
     }