diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index b5818e3d4512ad3b92e9d39c637979d9445721ed..4bec2a3448372f0470ea3a5b38ce639e2e07b015 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -44,30 +44,32 @@ $command-palette-spacing: px-to-rem(14px);
   --super-sidebar-nav-item-current-bg: var(--super-sidebar-accent-color-bg);
 
   --super-sidebar-hr-mix-blend-mode: multiply;
+}
 
-  .gl-dark & {
-    --super-sidebar-bg: var(--gl-background-color-subtle);
-
-    --super-sidebar-accent-color-fg: var(--gl-color-blue-200);
-    --super-sidebar-accent-color-bg: var(--gl-color-neutral-950);
+.gl-dark .super-topbar,
+.gl-dark .super-sidebar,
+.gl-dark.page-with-panels {
+  --super-sidebar-bg: var(--gl-background-color-subtle);
 
-    --super-sidebar-search-bar-button-bg: var(--gl-color-alpha-light-16);
-    --super-sidebar-user-bar-button-bg: var(--gl-color-alpha-light-8);
-    --super-sidebar-user-bar-button-border-color: transparent;
-    --super-sidebar-user-bar-button-hover-bg: var(--gl-color-alpha-light-16);
-    --super-sidebar-user-bar-button-active-bg: var(--gl-color-alpha-light-24);
-    --super-sidebar-user-bar-notification-dot: var(--gl-color-blue-200);
+  --super-sidebar-accent-color-fg: var(--gl-color-blue-200);
+  --super-sidebar-accent-color-bg: var(--gl-color-neutral-950);
 
-    --super-sidebar-nav-item-hover-bg: var(--gl-color-alpha-light-16);
-    --super-sidebar-nav-item-active-bg: var(--gl-color-alpha-light-24);
-    --super-sidebar-nav-item-current-bg: rgb(from var(--super-sidebar-accent-color-fg) r g b / 15%);
+  --super-sidebar-search-bar-button-bg: var(--gl-color-alpha-light-16);
+  --super-sidebar-user-bar-button-bg: var(--gl-color-alpha-light-8);
+  --super-sidebar-user-bar-button-border-color: transparent;
+  --super-sidebar-user-bar-button-hover-bg: var(--gl-color-alpha-light-16);
+  --super-sidebar-user-bar-button-active-bg: var(--gl-color-alpha-light-24);
+  --super-sidebar-user-bar-notification-dot: var(--gl-color-blue-200);
 
-    --super-sidebar-hr-mix-blend-mode: color-dodge;
+  --super-sidebar-nav-item-hover-bg: var(--gl-color-alpha-light-16);
+  --super-sidebar-nav-item-active-bg: var(--gl-color-alpha-light-24);
+  --super-sidebar-nav-item-current-bg: rgb(from var(--super-sidebar-accent-color-fg) r g b / 15%);
 
-  }
+  --super-sidebar-hr-mix-blend-mode: color-dodge;
 }
 
 @mixin super-sidebar-theme(
+  $theme-color,
   $background,
   $accent-color-fg,
   $accent-color-bg,
@@ -77,6 +79,7 @@ $command-palette-spacing: px-to-rem(14px);
   .super-topbar,
   .super-sidebar,
   &.page-with-panels {
+    --theme-color: #{$theme-color};
     --super-sidebar-bg: #{$background};
     --super-sidebar-accent-color-fg: #{$accent-color-fg};
     --super-sidebar-accent-color-bg: #{$accent-color-bg};
@@ -87,6 +90,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-indigo {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-purple-500),
     $background: var(--gl-color-purple-50),
     $accent-color-fg: var(--gl-color-purple-800),
     $accent-color-bg: var(--gl-color-purple-100),
@@ -95,6 +99,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-purple-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-purple-200),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -105,6 +110,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-blue {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-blue-500),
     $background: var(--gl-color-blue-50),
     $accent-color-fg: var(--gl-color-blue-900),
     $accent-color-bg: var(--gl-color-blue-100),
@@ -113,6 +119,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-blue-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-blue-100),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -124,6 +131,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-green {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-green-500),
     $background: var(--gl-color-green-50),
     $accent-color-fg: var(--gl-color-green-900),
     $accent-color-bg: var(--gl-color-green-100),
@@ -132,6 +140,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-green-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-green-200),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -142,6 +151,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-red {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-red-500),
     $background: var(--gl-color-red-50),
     $accent-color-fg: var(--gl-color-red-800),
     $accent-color-bg: var(--gl-color-red-100),
@@ -150,6 +160,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-red-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-red-200),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -160,6 +171,7 @@ $command-palette-spacing: px-to-rem(14px);
 
 .ui-gray {
   @include super-sidebar-theme(
+    $theme-color: var(--gl-color-neutral-500),
     $background: var(--gl-background-color-strong),
     $accent-color-fg: var(--gl-color-neutral-800),
     $accent-color-bg: var(--gl-color-neutral-100),
@@ -168,6 +180,7 @@ $command-palette-spacing: px-to-rem(14px);
 
   &.gl-dark {
     @include super-sidebar-theme(
+      $theme-color: var(--gl-color-neutral-500),
       $background: var(--gl-background-color-subtle),
       $accent-color-fg: var(--gl-color-neutral-100),
       $accent-color-bg: var(--gl-background-color-subtle),
@@ -176,6 +189,26 @@ $command-palette-spacing: px-to-rem(14px);
   }
 }
 
+.ui-neutral {
+  @include super-sidebar-theme(
+    $theme-color: var(--gl-color-neutral-500),
+    $background: var(--gl-background-color-strong),
+    $accent-color-fg: var(--gl-color-blue-800),
+    $accent-color-bg: var(--gl-color-blue-100),
+    $accent-notification-dot: var(--gl-color-neutral-500),
+  );
+
+  &.gl-dark {
+    @include super-sidebar-theme(
+      $theme-color: var(--gl-color-neutral-500),
+      $background: var(--gl-background-color-subtle),
+      $accent-color-fg: var(--gl-color-blue-100),
+      $accent-color-bg: var(--gl-background-blue-300),
+      $accent-notification-dot: var(--gl-color-neutral-200),
+    );
+  }
+}
+
 .super-sidebar {
   display: flex;
   flex-direction: column;
@@ -726,8 +759,7 @@ $scroll-scrim-height: 2.25rem;
 
 .super-topbar,
 .super-sidebar,
-.application-chrome body,
-.page-with-panels body {
+.application-chrome body {
   background-color: var(--super-sidebar-bg);
 }
 
@@ -1136,3 +1168,53 @@ html:not(.gl-dark) .super-topbar .organization-switcher-button.gl-button:not(:ho
   --gl-button-confirm-primary-border-color-focus: var(--gl-color-neutral-0);
   --gl-button-confirm-primary-border-color-active: var(--gl-color-neutral-0);
 }
+
+.application-chrome {
+  // default color to mute the gradient
+  --_shade-0: rgba(from var(--gl-color-neutral-0) r g b / 80%);
+  // background
+  --_shade-2: color-mix(in srgb, var(--gl-color-neutral-0), var(--theme-color) 36%);
+  // original color
+  --_shade-4: hsl(from var(--theme-color) calc(h + 0) calc(s + 0) calc(l + 0));
+  // alternative color
+  --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l - 8));
+  --theme-background-color: color-mix(in srgb, var(--gl-color-neutral-0), var(--theme-color) 1%);
+
+  &.gl-dark {
+    // default color to mute the gradient
+    --_shade-0: rgba(from var(--gl-color-neutral-950) r g b / 90%);
+    // background
+    --_shade-2: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 60%);
+    // original color
+    --_shade-4: hsl(from var(--theme-color) calc(h + 0) calc(s + 0) calc(l + 20));
+    // alternative color
+    --_shade-3: hsl(from var(--theme-color) calc(h + 50) s calc(l + 20));
+    --theme-background-color: color-mix(in srgb, var(--gl-color-neutral-950), var(--theme-color) 2%);
+  }
+
+  body {
+    --_shade-1: hsl(from var(--theme-color) calc(h - 5) calc(s - 1) calc(l + 30));
+
+    background:
+      linear-gradient(var(--_shade-0)),
+      radial-gradient(farthest-side at 50% 0%, var(--_shade-4), transparent 70vw),
+      radial-gradient(farthest-side at 50% 0%, var(--_shade-3), transparent 50vw),
+      radial-gradient(farthest-side at 100% 100%, var(--_shade-4), transparent 30vw),
+      var(--_shade-2)
+      ;
+  }
+}
+
+.super-topbar,
+.super-sidebar,
+.super-sidebar .bottom-scrim,
+.super-sidebar .top-scrim {
+  background: transparent;
+}
+
+.application-chrome.page-with-panels .top-bar-fixed,
+.application-chrome.page-with-panels #static-panel-portal,
+.application-chrome.page-with-panels #contextual-panel-portal,
+.application-chrome.page-with-panels #ai-panel-portal {
+  background-color: var(--theme-background-color) !important;
+}
diff --git a/ee/app/assets/javascripts/ai/components/chat_panel.vue b/ee/app/assets/javascripts/ai/components/chat_panel.vue
index 893cddb101d58fcc67786973713873333f6a01f6..c5a0d9d2483b92ae240f62345ad910edf49c121d 100644
--- a/ee/app/assets/javascripts/ai/components/chat_panel.vue
+++ b/ee/app/assets/javascripts/ai/components/chat_panel.vue
@@ -29,6 +29,7 @@ export default {
 <template>
   <aside
     v-if="isExpanded"
+    id="ai-panel-portal"
     :aria-label="__('AI Chat Panel')"
     :aria-hidden="!isExpanded"
     class="gl-w-[400px] gl-rounded-[1rem] gl-bg-default"