diff --git a/packages/enterprise/src/routes/share/[sessionID].tsx b/packages/enterprise/src/routes/share/[sessionID].tsx
index 28df1ff90..3b733a672 100644
--- a/packages/enterprise/src/routes/share/[sessionID].tsx
+++ b/packages/enterprise/src/routes/share/[sessionID].tsx
@@ -74,7 +74,7 @@ export default function () {
     <Show when={data()}>
       {(data) => (
         <DataProvider data={data()}>
-          <div class="relative bg-background-base size-full overflow-x-hidden flex flex-col">
+          <div class="relative bg-background-stronger size-full overflow-x-hidden flex flex-col">
             <div class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
               <div class="w-full flex-1 min-h-0 flex">
                 <div class="relative shrink-0 px-6 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-xl mx-auto">
diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css
index 49858efda..8cfac06b0 100644
--- a/packages/ui/src/components/accordion.css
+++ b/packages/ui/src/components/accordion.css
@@ -5,7 +5,7 @@
   gap: 0px;
   align-self: stretch;
 
-  [data-slot="accordion-accordion-item"] {
+  [data-slot="accordion-item"] {
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -14,14 +14,14 @@
     align-self: stretch;
     overflow: clip;
 
-    [data-slot="accordion-accordion-header"] {
+    [data-slot="accordion-header"] {
       width: 100%;
       display: flex;
       align-items: center;
       margin: 0;
       padding: 0;
 
-      [data-slot="accordion-accordion-trigger"] {
+      [data-slot="accordion-trigger"] {
         width: 100%;
         display: flex;
         height: 32px;
@@ -62,23 +62,23 @@
       margin-top: 8px;
       margin-bottom: 8px;
 
-      [data-slot="accordion-accordion-trigger"] {
+      [data-slot="accordion-trigger"] {
         border-top-left-radius: var(--radius-md);
         border-top-right-radius: var(--radius-md);
       }
 
-      [data-slot="accordion-accordion-content"] {
+      [data-slot="accordion-content"] {
         border: 1px solid var(--border-weak-base);
         border-top: none;
         border-bottom-left-radius: var(--radius-md);
         border-bottom-right-radius: var(--radius-md);
       }
 
-      [data-slot="accordion-accordion-item"]:has(+ &) {
+      [data-slot="accordion-item"]:has(+ &) {
         &[data-closed] {
           border-bottom-left-radius: var(--radius-md);
           border-bottom-right-radius: var(--radius-md);
-          [data-slot="accordion-accordion-trigger"] {
+          [data-slot="accordion-trigger"] {
             border-bottom-left-radius: var(--radius-md);
             border-bottom-right-radius: var(--radius-md);
           }
@@ -86,10 +86,10 @@
         margin-bottom: 8px;
       }
 
-      & + [data-slot="accordion-accordion-item"] {
+      & + [data-slot="accordion-item"] {
         margin-top: 8px;
 
-        [data-slot="accordion-accordion-trigger"] {
+        [data-slot="accordion-trigger"] {
           border-top-left-radius: var(--radius-md);
           border-top-right-radius: var(--radius-md);
         }
@@ -97,7 +97,7 @@
     }
 
     &[data-closed] + &[data-closed] {
-      [data-slot="accordion-accordion-trigger"] {
+      [data-slot="accordion-trigger"] {
         border-top: none;
       }
     }
@@ -106,7 +106,7 @@
       margin-top: 0px;
 
       &[data-closed] {
-        [data-slot="accordion-accordion-trigger"] {
+        [data-slot="accordion-trigger"] {
           border-top-left-radius: var(--radius-md);
           border-top-right-radius: var(--radius-md);
         }
@@ -117,14 +117,14 @@
       margin-bottom: 0px;
 
       &[data-closed] {
-        [data-slot="accordion-accordion-trigger"] {
+        [data-slot="accordion-trigger"] {
           border-bottom-left-radius: var(--radius-md);
           border-bottom-right-radius: var(--radius-md);
         }
       }
     }
 
-    [data-slot="accordion-accordion-content"] {
+    [data-slot="accordion-content"] {
       overflow: hidden;
       width: 100%;
 
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
index 5ec9bc64c..535d38e3d 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -27,7 +27,7 @@ function AccordionItem(props: AccordionItemProps) {
   return (
     <Kobalte.Item
       {...rest}
-      data-slot="accordion-accordion-item"
+      data-slot="accordion-item"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
@@ -41,7 +41,7 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   return (
     <Kobalte.Header
       {...rest}
-      data-slot="accordion-accordion-header"
+      data-slot="accordion-header"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
@@ -57,7 +57,7 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   return (
     <Kobalte.Trigger
       {...rest}
-      data-slot="accordion-accordion-trigger"
+      data-slot="accordion-trigger"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
@@ -73,7 +73,7 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
   return (
     <Kobalte.Content
       {...rest}
-      data-slot="accordion-accordion-content"
+      data-slot="accordion-content"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
diff --git a/packages/ui/src/components/file-icon.css b/packages/ui/src/components/file-icon.css
new file mode 100644
index 000000000..e650f6dc7
--- /dev/null
+++ b/packages/ui/src/components/file-icon.css
@@ -0,0 +1,5 @@
+[data-component="file-icon"] {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
diff --git a/packages/ui/src/components/file-icon.tsx b/packages/ui/src/components/file-icon.tsx
index 7cd4471c7..11465112f 100644
--- a/packages/ui/src/components/file-icon.tsx
+++ b/packages/ui/src/components/file-icon.tsx
@@ -13,10 +13,10 @@ export const FileIcon: Component<FileIconProps> = (props) => {
   const name = createMemo(() => chooseIconName(local.node.path, local.node.type, local.expanded || false))
   return (
     <svg
+      data-component="file-icon"
       {...rest}
       classList={{
         ...(local.classList ?? {}),
-        "shrink-0 size-4": true,
         [local.class ?? ""]: !!local.class,
       }}
     >
diff --git a/packages/ui/src/components/session-review.css b/packages/ui/src/components/session-review.css
index c6882d06c..0096bab38 100644
--- a/packages/ui/src/components/session-review.css
+++ b/packages/ui/src/components/session-review.css
@@ -46,8 +46,8 @@
     }
   }
 
-  [data-slot="session-review-accordion-trigger"] {
-    background-color: var(--background-stronger);
+  [data-slot="accordion-trigger"] {
+    background-color: var(--background-stronger) !important;
   }
 
   [data-slot="session-review-trigger-content"] {
@@ -66,12 +66,6 @@
     min-width: 0;
   }
 
-  [data-slot="session-review-file-icon"] {
-    flex-shrink: 0;
-    width: 16px;
-    height: 16px;
-  }
-
   [data-slot="session-review-file-name-container"] {
     display: flex;
     flex-grow: 1;
diff --git a/packages/ui/src/components/session-review.tsx b/packages/ui/src/components/session-review.tsx
index c2e49f5e4..e5d5bdb88 100644
--- a/packages/ui/src/components/session-review.tsx
+++ b/packages/ui/src/components/session-review.tsx
@@ -68,7 +68,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                 <Accordion.Trigger>
                   <div data-slot="session-review-trigger-content">
                     <div data-slot="session-review-file-info">
-                      <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
+                      <FileIcon node={{ path: diff.file, type: "file" }} />
                       <div data-slot="session-review-file-name-container">
                         <Show when={diff.file.includes("/")}>
                           <span data-slot="session-review-directory">{getDirectory(diff.file)}&lrm;</span>
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index a04c7bb80..3c4ccbeb9 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -11,10 +11,11 @@
 @import "../components/card.css" layer(components);
 @import "../components/checkbox.css" layer(components);
 @import "../components/code.css" layer(components);
+@import "../components/collapsible.css" layer(components);
 @import "../components/diff.css" layer(components);
 @import "../components/diff-changes.css" layer(components);
-@import "../components/collapsible.css" layer(components);
 @import "../components/dialog.css" layer(components);
+@import "../components/file-icon.css" layer(components);
 @import "../components/icon.css" layer(components);
 @import "../components/icon-button.css" layer(components);
 @import "../components/input.css" layer(components);