diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7e1de1af..5bc8d200 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,10 +2,5 @@
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "editor.tabSize": 2,
   "files.eol": "\n",
-  "cSpell.words": [
-    "apexcharts",
-    "ncstate",
-    "popover",
-    "treemap"
-  ]
+  "cSpell.words": ["apexcharts", "treemap"]
 }
diff --git a/docs/components.md b/docs/components.md
index a9478684..20cf781b 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -13,8 +13,6 @@ flowchart TB
     carbon-estimation`"]
     Assumptions["`AssumptionsAndLimitationComponent
     assumptions-and-limitation`"]
-    HelperInfo["`HelperInfoComponent
-    helper-info`"]
     Note["`NoteComponent
     note`"]
     ExpansionPanel["`ExpansionPanelComponent
@@ -30,7 +28,7 @@ flowchart TB
 
   CarbonEstimator --> CarbonEstimatorForm & CarbonEstimation & Assumptions
   CarbonEstimatorForm ---> FormatCostRangePipe
-  CarbonEstimatorForm --> HelperInfo & Note
+  CarbonEstimatorForm --> Note
   CarbonEstimator & CarbonEstimatorForm ---> CarbonEstimationService
   CarbonEstimatorForm & CarbonEstimation --> ExpansionPanel
   CarbonEstimationService & Assumptions --> CarbonIntensityService
@@ -57,10 +55,6 @@ Visualises the Carbon Estimation result.
 Provides information on the Assumptions and Limitations of the estimation.  
 Uses the [CarbonIntensityService](services.md#carbonintensityservice) to get the latest carbon intensity figures to display.
 
-## HelperInfoComponent
-
-Displays a help button which can be clicked to show extra details on how the form inputs are used.
-
 ## NoteComponent
 
 Highlights assumptions that will be made when certain options are selected.
diff --git a/package-lock.json b/package-lock.json
index 5554f88d..21ec3499 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,6 @@
         "@angular/platform-browser": "^17.2.0",
         "@angular/platform-browser-dynamic": "^17.2.0",
         "@angular/router": "^17.2.0",
-        "@ncstate/sat-popover": "^11.0.0",
         "@tgwf/co2": "^0.14.3",
         "lodash-es": "^4.17.21",
         "ng-apexcharts": "^1.9.0",
@@ -3325,14 +3324,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/@ncstate/sat-popover": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@ncstate/sat-popover/-/sat-popover-11.0.0.tgz",
-      "integrity": "sha512-xgdyopR3ehganWvlJ+gIepXRxhzc+d/4i3E/0nCq32IgUGTC5Sdyu7rGren5htoGS6C6Ux49fmGdQIoUdB9noQ==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      }
-    },
     "node_modules/@ngtools/webpack": {
       "version": "17.3.6",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.3.6.tgz",
diff --git a/package.json b/package.json
index 7e950873..41c70373 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
     "@angular/platform-browser": "^17.2.0",
     "@angular/platform-browser-dynamic": "^17.2.0",
     "@angular/router": "^17.2.0",
-    "@ncstate/sat-popover": "^11.0.0",
     "@tgwf/co2": "^0.14.3",
     "lodash-es": "^4.17.21",
     "ng-apexcharts": "^1.9.0",
diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.html b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
index 0ea14939..5690c236 100644
--- a/src/app/carbon-estimator-form/carbon-estimator-form.component.html
+++ b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
@@ -155,21 +155,22 @@
 
       @if (!noDownstream) {
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <div class="tce-flex">
-            <label for="purposeOfSite" class="tce-text-sm tce-text-slate-600"
-              >What's the primary purpose of your digital services?</label
-            >
-            <helper-info class="tce-ml-auto" inputLabel="What's the purpose of your website">
+          <expansion-panel [configOverride]="questionPanelConfig">
+            <div header>
+              <div class="tce-flex">
+                <label for="purposeOfSite" class="tce-text-sm tce-text-slate-600"
+                  >What's the primary purpose of your digital services?</label
+                >
+              </div>
+            </div>
+            <div content>
               <p class="tce-text-sm tce-text-slate-600">
                 The purpose of your digital services is used to determine the typical amount of time a user might spend
-                on them and the amount of data that may be transferred.
+                on them and the amount of data that may be transferred. This can affect the amount of energy used by end
+                user devices and how much energy from network traffic is attributable to your organisation
               </p>
-              <p class="tce-text-sm tce-text-slate-600">
-                This can affect the amount of energy used by end user devices and how much energy from network traffic
-                is attributable to your organisation
-              </p>
-            </helper-info>
-          </div>
+            </div>
+          </expansion-panel>
           <select
             class="tce-border tce-border-slate-400 tce-rounded"
             formControlName="purposeOfSite"
@@ -198,23 +199,22 @@
         </div>
 
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <div class="tce-flex">
-            <label for="mobilePercentage" class="tce-text-sm tce-text-slate-600">
-              What percentage of your end-users are mobile or personal computer users?
-            </label>
-            <helper-info
-              class="tce-ml-auto"
-              inputLabel="What percentage of your users are mobile or personal computer users">
+          <expansion-panel [configOverride]="questionPanelConfig">
+            <div header>
+              <div class="tce-flex">
+                <label for="mobilePercentage" class="tce-text-sm tce-text-slate-600">
+                  What percentage of your end-users are mobile or personal computer users?
+                </label>
+              </div>
+            </div>
+            <div content>
               <p class="tce-text-sm tce-text-slate-600">
                 The percentage of mobile users will affect the energy used by end user devices and network
-                infrastructure.
-              </p>
-              <p class="tce-text-sm tce-text-slate-600">
-                While the power demand of mobile devices is often much lower, the use of mobile networks can increase
-                the power used when transferring data.
+                infrastructure. While the power demand of mobile devices is often much lower, the use of mobile networks
+                can increase the power used when transferring data.
               </p>
-            </helper-info>
-          </div>
+            </div>
+          </expansion-panel>
           <input
             id="mobilePercentage"
             formControlName="mobilePercentage"
@@ -256,20 +256,22 @@
     let-formControlName="location.formControlName"
     let-formGroupName="formGroupName">
     <div formGroupName="{{ formGroupName }}" class="tce-flex tce-flex-col tce-gap-2">
-      <div class="tce-flex">
-        <label for="{{ formControlName }}" class="tce-text-sm tce-text-slate-600">{{ label }} </label>
-        @if (helperText) {
-          <helper-info class="tce-ml-auto" [inputLabel]="label">
-            <p class="tce-text-sm tce-text-slate-600">
-              This will affect the average
-              <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
-                >Carbon Intensity</a
-              >
-              of the energy used by your {{ helperText }}.
-            </p>
-          </helper-info>
-        }
-      </div>
+      <expansion-panel [configOverride]="questionPanelConfig">
+        <div header>
+          <div class="tce-flex">
+            <label for="{{ formControlName }}" class="tce-text-sm tce-text-slate-600">{{ label }} </label>
+          </div>
+        </div>
+        <div content>
+          <p class="tce-text-sm tce-text-slate-600">
+            This will affect the average
+            <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
+              >Carbon Intensity</a
+            >
+            of the energy used by your {{ helperText }}.
+          </p>
+        </div>
+      </expansion-panel>
       <select
         class="tce-border tce-border-slate-400 tce-rounded tce-px-3 tce-py-2"
         name="{{ formControlName }}"
diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.ts b/src/app/carbon-estimator-form/carbon-estimator-form.component.ts
index adc4f4e3..007887c0 100644
--- a/src/app/carbon-estimator-form/carbon-estimator-form.component.ts
+++ b/src/app/carbon-estimator-form/carbon-estimator-form.component.ts
@@ -2,12 +2,11 @@ import { CommonModule, JsonPipe } from '@angular/common';
 import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output, input } from '@angular/core';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { EstimatorFormValues, EstimatorValues, WorldLocation, locationArray } from '../types/carbon-estimator';
-import { costRanges, defaultValues, formContext } from './carbon-estimator-form.constants';
+import { costRanges, defaultValues, formContext, questionPanelConfig } from './carbon-estimator-form.constants';
 import { NoteComponent } from '../note/note.component';
 import { CarbonEstimationService } from '../services/carbon-estimation.service';
 import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.component';
 import { FormatCostRangePipe } from '../pipes/format-cost-range.pipe';
-import { HelperInfoComponent } from '../helper-info/helper-info.component';
 
 const locationDescriptions: Record<WorldLocation, string> = {
   WORLD: 'Globally',
@@ -31,7 +30,6 @@ const locationDescriptions: Record<WorldLocation, string> = {
     JsonPipe,
     FormsModule,
     CommonModule,
-    HelperInfoComponent,
     NoteComponent,
     ExpansionPanelComponent,
     FormatCostRangePipe,
@@ -67,6 +65,8 @@ export class CarbonEstimatorFormComponent implements OnInit {
     description: locationDescriptions[location],
   }));
 
+  public questionPanelConfig = questionPanelConfig;
+
   constructor(
     private formBuilder: FormBuilder,
     private changeDetector: ChangeDetectorRef,
diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts b/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts
index 57e802d1..31341464 100644
--- a/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts
+++ b/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts
@@ -1,3 +1,4 @@
+import { ExpansionPanelConfig } from '../expansion-panel/expansion-panel.constants';
 import { CostRange, EstimatorValues } from '../types/carbon-estimator';
 
 export const costRanges: CostRange[] = [
@@ -90,3 +91,9 @@ export const formContext = {
     },
   },
 };
+
+export const questionPanelConfig: ExpansionPanelConfig = {
+  startsExpanded: false,
+  buttonStyles: 'material-icons-outlined tce-text-base tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded',
+  contentContainerStyles: 'tce-px-3 tce-py-2 tce-bg-slate-100 tce-border tce-border-slate-400 tce-rounded tce-text-sm',
+};
diff --git a/src/app/expansion-panel/expansion-panel.component.html b/src/app/expansion-panel/expansion-panel.component.html
index 80451d95..8c44e459 100644
--- a/src/app/expansion-panel/expansion-panel.component.html
+++ b/src/app/expansion-panel/expansion-panel.component.html
@@ -4,11 +4,11 @@
     type="button"
     (click)="toggle()"
     (keydown.enter)="toggle()"
-    class="material-icons-outlined tce-text tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded"
+    [class]="config.buttonStyles"
     [attr.aria-label]="expanded ? 'Hide details' : 'Show details'">
     {{ expanded ? 'expand_less' : 'expand_more' }}
   </button>
 </div>
-<div [ngClass]="{ 'tce-hidden': !expanded }" role="region">
+<div [ngClass]="{ 'tce-hidden': !expanded }" [class]="config.contentContainerStyles" role="region">
   <ng-content select="[content]"></ng-content>
 </div>
diff --git a/src/app/expansion-panel/expansion-panel.component.ts b/src/app/expansion-panel/expansion-panel.component.ts
index 5c4bdc97..59d5bd20 100644
--- a/src/app/expansion-panel/expansion-panel.component.ts
+++ b/src/app/expansion-panel/expansion-panel.component.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ExpansionPanelConfig, defaultConfig } from './expansion-panel.constants';
 
 @Component({
   selector: 'expansion-panel',
@@ -8,12 +9,22 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angul
   templateUrl: './expansion-panel.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ExpansionPanelComponent {
+export class ExpansionPanelComponent implements OnInit {
+  @Input() configOverride?: Partial<ExpansionPanelConfig> = {};
   @Output() expandedChanged = new EventEmitter<void>();
-  public expanded: boolean = true;
+  public config!: ExpansionPanelConfig;
+  public expanded!: boolean;
 
   toggle() {
     this.expanded = !this.expanded;
     this.expandedChanged.emit();
   }
+
+  ngOnInit(): void {
+    this.config = {
+      ...defaultConfig,
+      ...this.configOverride,
+    };
+    this.expanded = this.config.startsExpanded;
+  }
 }
diff --git a/src/app/expansion-panel/expansion-panel.constants.ts b/src/app/expansion-panel/expansion-panel.constants.ts
new file mode 100644
index 00000000..4b7621fc
--- /dev/null
+++ b/src/app/expansion-panel/expansion-panel.constants.ts
@@ -0,0 +1,11 @@
+export type ExpansionPanelConfig = {
+  readonly startsExpanded: boolean;
+  readonly buttonStyles: string;
+  readonly contentContainerStyles: string;
+};
+
+export const defaultConfig: ExpansionPanelConfig = {
+  startsExpanded: true,
+  buttonStyles: 'material-icons-outlined tce-text tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded',
+  contentContainerStyles: '',
+};
diff --git a/src/app/helper-info/helper-info.component.html b/src/app/helper-info/helper-info.component.html
deleted file mode 100644
index 5a221051..00000000
--- a/src/app/helper-info/helper-info.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<button
-  [satPopoverAnchor]="helperInfo"
-  (click)="helperInfo.toggle()"
-  type="button"
-  [attr.aria-label]="inputLabel + ' helper popup'"
-  class="material-icons-outlined tce-text-base tce-text-slate-600 hover:tce-bg-slate-300 tce-rounded">
-  help_outline
-</button>
-
-<sat-popover #helperInfo verticalAlign="above" hasBackdrop>
-  <div
-    class="tce-max-w-64 tce-bg-white tce-border tce-border-slate-600 tce-rounded tce-p-2 before:tce-w-4 before:tce-h-4 before:tce-rotate-45 before:tce-bg-slate-600 before:tce-absolute before:tce-z-[-10] before:-tce-bottom-1 before:tce-left-0 before:tce-right-0 before:tce-mx-auto">
-    <ng-content></ng-content>
-  </div>
-  <button
-    (click)="helperInfo.close()"
-    aria-label="Close helper popup"
-    class="tce-absolute tce-top-1 tce-right-1 tce-h-4 tce-w-4 tce-text-slate-800 tce-rounded hover:tce-bg-slate-300 tce-text-base leading-4 tce-text-slate-600 material-icons-outlined">
-    close
-  </button>
-</sat-popover>
diff --git a/src/app/helper-info/helper-info.component.ts b/src/app/helper-info/helper-info.component.ts
deleted file mode 100644
index 3ef075ea..00000000
--- a/src/app/helper-info/helper-info.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { SatPopoverModule } from '@ncstate/sat-popover';
-
-@Component({
-  selector: 'helper-info',
-  standalone: true,
-  imports: [SatPopoverModule],
-  templateUrl: './helper-info.component.html',
-})
-export class HelperInfoComponent {
-  @Input() inputLabel!: string;
-}