diff --git a/src/interface/src/styleguide/expander/expander.component.scss b/src/interface/src/styleguide/expander/expander.component.scss
deleted file mode 100644
index 049788495..000000000
--- a/src/interface/src/styleguide/expander/expander.component.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-@import 'mixins';
-@import 'colors';
-
-:host {
-  --mat-expansion-header-hover-state-layer-color: $color-white;
-  --mat-expansion-header-focus-state-layer-color: $color-white;
-  --mat-expansion-header-expanded-state-height: 48px;
-  --mat-expansion-header-hover-state-layer-color: $color-white;
-
-  ::ng-deep .mat-expansion-panel {
-    box-shadow: none;
-    border: 1px $color-light-gray solid;
-    border-radius: 0;
-  }
-  ::ng-deep .mat-expansion-panel.selected {
-    border: 1px $color-original-purple solid;
-    background-color: $color-soft-purple;
-    // --mat-expansion-container-background-color: $color-soft-purple;
-  }
-  ::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
-    box-shadow: none;
-    border: 1px $color-light-gray solid;
-    border-radius: 0;
-  }
-  ::ng-deep .mat-expansion-panel:hover:not([class*='selected']) {
-    border: 1px $color-original-purple solid;
-    background-color: $color-white;
-  }
-  
-}
-
-
-::ng-deep .sg-expander-panel .mat-expansion-panel-header .mat-content {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  width: 100%;
-}
-
-::ng-deep
-  .sg-expander-panel
-  .mat-expansion-panel-header
-  .mat-expansion-indicator {
-  padding-bottom: 6px;
-}
-
-::ng-deep
-  .sg-expander-panel
-  .mat-expansion-panel-header
-  .mat-expansion-indicator::after {
-  color: $color-black;
-}
-
-::ng-deep .sg-expander-panel .mat-expansion-panel-body {
-  padding: 0 24px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.header-content {
-  padding: 0 20px 0 8px;
-}
-
-.left-content {
-  @include xs-label();
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 8px;
-  margin-left: 4px;
-  line-height: 0px;
-}
-
-.right-content {
-  @include xs-label();
-  color: $color-md-gray;
-  width: 100px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: right;
-  gap: 8px;
-  padding-right: 10px;
-}
-
-.treatment-detail {
-  height: 22px;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: flex-start;
-  gap: 4px;
-  padding: 0 24px 0 24px;
-}
-
-.treatment-detail-name {
-  @include xs-label();
-  font-weight: 600;
-  line-height: 14px;
-  text-align: left;
-}
-
-.treatment-detail-value {
-  @include small-paragraph();
-}
-
-.stand-count {
-  color: $color-dark-gray;
-}
-
-.treatment-hexagon {
-  color: $color-dark-gray;
-}
-
-.rx-detail {
-  height: 22px;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: flex-start;
-  gap: 4px;
-  padding: 0 0 0 24px;
-}
-
-.rx-detail-name {
-  @include small-paragraph();
-}
-
-.rx-detail-value {
-  @include small-paragraph();
-  color: $color-md-gray;
-}
diff --git a/src/interface/src/styleguide/expander/expander.component.html b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.html
similarity index 100%
rename from src/interface/src/styleguide/expander/expander.component.html
rename to src/interface/src/styleguide/treatment-expander/treatment-expander.component.html
diff --git a/src/interface/src/styleguide/treatment-expander/treatment-expander.component.scss b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.scss
new file mode 100644
index 000000000..006a4c82b
--- /dev/null
+++ b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.scss
@@ -0,0 +1,123 @@
+@import 'mixins';
+@import 'colors';
+
+:host {
+  --mat-expansion-header-hover-state-layer-color: $color-white;
+  --mat-expansion-header-focus-state-layer-color: $color-white;
+  --mat-expansion-header-expanded-state-height: 48px;
+
+  ::ng-deep {
+    .mat-expansion-panel {
+      box-shadow: none;
+      border: 1px $color-light-gray solid;
+      border-radius: 0;
+    }
+
+    .mat-expansion-panel.selected {
+      border-color: $color-soft-purple;
+      background-color: $color-soft-purple;
+    }
+
+    .mat-expansion-panel:not([class*='mat-elevation-z']) {
+      box-shadow: none;
+    }
+
+    .mat-expansion-panel:hover:not([class*='selected']) {
+      border-color: $color-original-purple;
+      background-color: $color-white;
+    }
+  }
+}
+
+.sg-expander-panel {
+  ::ng-deep {
+    .mat-expansion-panel-header .mat-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      width: 100%;
+    }
+
+    .mat-expansion-panel-header .mat-expansion-indicator {
+      padding-bottom: 6px;
+    }
+
+    .mat-expansion-panel-header .mat-expansion-indicator::after {
+      color: $color-black;
+    }
+
+    .mat-expansion-panel-body {
+      padding: 0 24px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+}
+
+.header-content {
+  padding: 0 20px 0 8px;
+}
+
+.left-content {
+  @include xs-label();
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-left: 4px;
+  line-height: 0;
+}
+
+.right-content {
+  @include xs-label();
+  color: $color-md-gray;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  gap: 8px;
+  padding-right: 10px;
+}
+
+.treatment-detail {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 24px;
+}
+
+.treatment-detail-name {
+  @include xs-label();
+  font-weight: 600;
+  line-height: 14px;
+  text-align: left;
+}
+
+.treatment-detail-value {
+  @include small-paragraph();
+}
+
+.stand-count,
+.treatment-hexagon {
+  color: $color-dark-gray;
+}
+
+.rx-detail {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-left: 24px;
+}
+
+.rx-detail-name {
+  @include small-paragraph();
+}
+
+.rx-detail-value {
+  @include small-paragraph();
+  color: $color-md-gray;
+}
\ No newline at end of file
diff --git a/src/interface/src/styleguide/expander/expander.component.ts b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.ts
similarity index 94%
rename from src/interface/src/styleguide/expander/expander.component.ts
rename to src/interface/src/styleguide/treatment-expander/treatment-expander.component.ts
index 34dfdfada..92d7c299e 100644
--- a/src/interface/src/styleguide/expander/expander.component.ts
+++ b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.ts
@@ -32,7 +32,7 @@ export type TreatmentType =
  * NOTE: this expects *either* a treatmentType OR a sequenceNumber to determine appearance
  */
 @Component({
-  selector: 'sg-expander',
+  selector: 'sg-treatment-expander',
   standalone: true,
   imports: [
     MatExpansionModule,
@@ -43,10 +43,10 @@ export type TreatmentType =
     SequenceIconComponent,
     TreatmentTypeIconComponent,
   ],
-  templateUrl: './expander.component.html',
-  styleUrl: './expander.component.scss',
+  templateUrl: './treatment-expander.component.html',
+  styleUrl: './treatment-expander.component.scss',
 })
-export class ExpanderComponent {
+export class TreatmentExpanderComponent {
   /**
    * Optional title text -- explicitly overrides the derived title
    */
diff --git a/src/interface/src/styleguide/expander/expander.stories.ts b/src/interface/src/styleguide/treatment-expander/treatment-expander.stories.ts
similarity index 85%
rename from src/interface/src/styleguide/expander/expander.stories.ts
rename to src/interface/src/styleguide/treatment-expander/treatment-expander.stories.ts
index 6be35a4ab..c69b535ca 100644
--- a/src/interface/src/styleguide/expander/expander.stories.ts
+++ b/src/interface/src/styleguide/treatment-expander/treatment-expander.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { applicationConfig, argsToTemplate } from '@storybook/angular';
-import { ExpanderComponent } from './expander.component';
+import { TreatmentExpanderComponent } from './treatment-expander.component';
 import { provideAnimations } from '@angular/platform-browser/animations';
 
 const containerStyle = `style="display: flex;
@@ -12,9 +12,9 @@ const containerStyle = `style="display: flex;
   padding: 10px;
   flex-direction: column;"`;
 
-const meta: Meta<ExpanderComponent> = {
-  title: 'Components/Expander',
-  component: ExpanderComponent,
+const meta: Meta<TreatmentExpanderComponent> = {
+  title: 'Components/Treatment Expander',
+  component: TreatmentExpanderComponent,
   decorators: [
     applicationConfig({
       providers: [provideAnimations()],
@@ -23,12 +23,12 @@ const meta: Meta<ExpanderComponent> = {
   tags: ['autodocs'],
   render: ({ ...args }) => ({
     props: args,
-    template: `<div ${containerStyle}><div style="width:400px;"><sg-expander ${argsToTemplate(args)}></sg-expander></div>`,
+    template: `<div ${containerStyle}><div style="width:400px;"><sg-treatment-expander ${argsToTemplate(args)}></sg-treatment-expander></div>`,
   }),
 };
 
 export default meta;
-type Story = StoryObj<ExpanderComponent>;
+type Story = StoryObj<TreatmentExpanderComponent>;
 
 export const Default: Story = {
   args: {