diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
index fd4d8a4e4..113284442 100644
--- a/frontend/src/Theme.css
+++ b/frontend/src/Theme.css
@@ -29,6 +29,11 @@
   --main-toggle-off-colour: #ababab;
   --main-toggle-on-colour: var(--main-accent-colour);
 
+  --control-header-background-colour: var(
+    --main-button-inactive-background-colour
+  );
+  --control-body-background-colour: #3a3a3a;
+
   --overlay-hidden-colour: #0008;
   --overlay-background-colour: #8ad5da;
   --overlay-attack-background-colour: #d6d6ff;
diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
index bf5196c5f..24effdda9 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.css
+++ b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -1,10 +1,18 @@
 #control-panel {
-  display: flex;
-  flex-direction: column;
   height: 100%;
+  overflow-y: auto;
+  padding: 30px;
 }
 
-#control-strategy {
-  padding: 0 30px;
-  overflow-y: auto;
+.control-collapsible-section {
+  background-color: var(--control-body-background-colour);
+  margin-bottom: 12px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.control-collapsible-section-header {
+  background-color: var(--control-header-background-colour);
+  padding: 12px 14px;
+  cursor: default;
 }
diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
index e38a2ead8..43251f553 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.tsx
+++ b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -31,15 +31,38 @@ function ControlPanel({
   setEmails: (emails: EmailInfo[]) => void;
   setNumCompletedLevels: (numCompletedLevels: number) => void;
 }) {
+  function getDefencesConfigure() {
+    return defences.filter((defence) => {
+      return ![
+        DEFENCE_TYPES.LLM_EVALUATION,
+        DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
+        DEFENCE_TYPES.SYSTEM_ROLE,
+      ].some((id) => id === defence.id);
+    });
+  }
+
+  function getDefencesModel() {
+    return defences.filter((defence) => {
+      return [
+        DEFENCE_TYPES.LLM_EVALUATION,
+        DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
+        DEFENCE_TYPES.SYSTEM_ROLE,
+      ].some((id) => id === defence.id);
+    });
+  }
+
   return (
     <div id="control-panel">
-      <div id="control-strategy">
-        {/* hide defence box on levels 1 and 2 */}
-        {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
-          currentLevel === LEVEL_NAMES.SANDBOX) && (
+      {/* hide defence box on levels 1 and 2 */}
+      {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
+        currentLevel === LEVEL_NAMES.SANDBOX) && (
+        <details className="control-collapsible-section">
+          <summary className="control-collapsible-section-header">
+            Defence Configuration
+          </summary>
           <DefenceBox
             currentLevel={currentLevel}
-            defences={defences}
+            defences={getDefencesConfigure()}
             showConfigurations={
               // only allow configuration in sandbox
               currentLevel === LEVEL_NAMES.SANDBOX ? true : false
@@ -48,12 +71,27 @@ function ControlPanel({
             setDefenceInactive={setDefenceInactive}
             setDefenceConfiguration={setDefenceConfiguration}
           />
-        )}
-        {/* only show model selection box in sandbox mode */}
-        {currentLevel === LEVEL_NAMES.SANDBOX && <ModelBox />}
-        {/* only show document viewer button in sandbox mode */}
-        {currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
-      </div>
+        </details>
+      )}
+      {/* only show model selection box in sandbox mode */}
+      {currentLevel === LEVEL_NAMES.SANDBOX && (
+        <details className="control-collapsible-section">
+          <summary className="control-collapsible-section-header">
+            Model Configuration
+          </summary>
+          <DefenceBox
+            currentLevel={currentLevel}
+            defences={getDefencesModel()}
+            showConfigurations={true}
+            setDefenceActive={setDefenceActive}
+            setDefenceInactive={setDefenceInactive}
+            setDefenceConfiguration={setDefenceConfiguration}
+          />
+          <ModelBox />
+        </details>
+      )}
+      {/* only show document viewer button in sandbox mode */}
+      {currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
     </div>
   );
 }
diff --git a/frontend/src/components/StrategyBox/StrategyBox.css b/frontend/src/components/DefenceBox/DefenceBox.css
similarity index 60%
rename from frontend/src/components/StrategyBox/StrategyBox.css
rename to frontend/src/components/DefenceBox/DefenceBox.css
index 4f8b69a80..ca8968e61 100644
--- a/frontend/src/components/StrategyBox/StrategyBox.css
+++ b/frontend/src/components/DefenceBox/DefenceBox.css
@@ -1,3 +1,3 @@
-#strategy-box {
+#defence-box {
   position: relative;
 }
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
index 3a9c8f343..72791bd24 100644
--- a/frontend/src/components/DefenceBox/DefenceBox.tsx
+++ b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -1,4 +1,4 @@
-import "../StrategyBox/StrategyBox.css";
+import "./DefenceBox.css";
 import DefenceMechanism from "./DefenceMechanism";
 import {
   DEFENCE_TYPES,
@@ -24,8 +24,7 @@ function DefenceBox({
   ) => Promise<boolean>;
 }) {
   return (
-    <div id="strategy-box">
-      <div className="side-bar-header">Defences</div>
+    <div id="defence-box">
       {defences.map((defence, index) => {
         return (
           <DefenceMechanism
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index 80f21db96..08fe046b4 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,11 +1,23 @@
-.defence-mechanism-config {
-  font-size: 0.875rem;
-  margin-top: 4px;
+.defence-mechanism {
+  padding: 12px 14px;
+  cursor: default;
+}
+
+.defence-mechanism header {
+  display: flex;
+  justify-content: space-between;
 }
 
-.defence-mechanism-config-validated {
-  margin-top: 10px;
-  margin-bottom: 10px;
+.defence-mechanism header h4 {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  margin: 0;
+}
+
+.defence-mechanism > .info-box {
+  font-size: 0.875rem;
+  margin-top: 4px;
 }
 
 .validation-text {
@@ -13,6 +25,10 @@
   font-weight: 600;
 }
 
+/*
+ * Modified from https://www.w3schools.com/howto/howto_css_switch.asp
+*/
+
 /* The switch - the box around the slider */
 .switch {
   position: relative;
@@ -65,10 +81,6 @@ input:checked + .slider:before {
   transform: translateX(16px);
 }
 
-/*
- * Modified from https://www.w3schools.com/howto/howto_css_switch.asp
-*/
-
 /* Rounded sliders */
 .slider.round {
   border-radius: 34px;
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index cc29e6893..4a46d479b 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -6,7 +6,6 @@ import {
 } from "../../models/defence";
 import { validateDefence } from "../../service/defenceService";
 import "./DefenceMechanism.css";
-import "../StrategyBox/StrategyMechanism.css";
 import DefenceConfiguration from "./DefenceConfiguration";
 import { TiTick, TiTimes } from "react-icons/ti";
 
@@ -71,60 +70,49 @@ function DefenceMechanism({
   }
 
   return (
-    <span>
-      <div
-        className="strategy-mechanism defence-mechanism"
-        onClick={toggleDefenceInfo}
-      >
-        <div className="strategy-mechanism-header">
-          <span>{defenceDetail.name}</span>
-          <label className="switch">
-            <input
-              type="checkbox"
-              placeholder="defence-toggle"
-              onChange={toggleDefence}
-              // set checked if defence is active
-              checked={defenceDetail.isActive}
-            />
-            <span className="slider round"></span>
-          </label>
-        </div>
-        {isInfoBoxVisible ? (
-          <div className="strategy-mechanism-info-box">
-            <div>{defenceDetail.info}</div>
+    <article className="defence-mechanism" onClick={toggleDefenceInfo}>
+      <header>
+        <h4>{defenceDetail.name}</h4>
+        <label className="switch">
+          <input
+            type="checkbox"
+            placeholder="defence-toggle"
+            onChange={toggleDefence}
+            // set checked if defence is active
+            checked={defenceDetail.isActive}
+          />
+          <span className="slider round"></span>
+        </label>
+      </header>
+      {isInfoBoxVisible && (
+        <div className="info-box">
+          <p>{defenceDetail.info}</p>
 
-            {showConfigurations ? (
-              <div className="defence-mechanism-config">
-                {defenceDetail.config.map((config) => {
-                  return (
-                    <DefenceConfiguration
-                      key={config.id}
-                      isActive={defenceDetail.isActive}
-                      config={config}
-                      setConfigurationValue={setConfigurationValue}
-                    />
-                  );
-                })}
-              </div>
-            ) : null}
+          {showConfigurations &&
+            defenceDetail.config.map((config) => {
+              return (
+                <DefenceConfiguration
+                  key={config.id}
+                  isActive={defenceDetail.isActive}
+                  config={config}
+                  setConfigurationValue={setConfigurationValue}
+                />
+              );
+            })}
 
-            {isConfigured ? (
-              <div className="defence-mechanism-config-validated">
-                {configValidated ? (
-                  <p className="validation-text">
-                    <TiTick /> defence successfully configured
-                  </p>
-                ) : (
-                  <p className="validation-text">
-                    <TiTimes /> invalid input - configuration failed
-                  </p>
-                )}
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-    </span>
+          {isConfigured &&
+            (configValidated ? (
+              <p className="validation-text">
+                <TiTick /> defence successfully configured
+              </p>
+            ) : (
+              <p className="validation-text">
+                <TiTimes /> invalid input - configuration failed
+              </p>
+            ))}
+        </div>
+      )}
+    </article>
   );
 }
 
diff --git a/frontend/src/components/ModelBox/ModelBox.tsx b/frontend/src/components/ModelBox/ModelBox.tsx
index 6f7d4f8b4..8aab9acbe 100644
--- a/frontend/src/components/ModelBox/ModelBox.tsx
+++ b/frontend/src/components/ModelBox/ModelBox.tsx
@@ -5,7 +5,6 @@ import ModelConfiguration from "./ModelConfiguration";
 function ModelBox() {
   return (
     <div className="model-box">
-      <div className="side-bar-header">Model</div>
       <ModelSelection />
       <ModelConfiguration />
     </div>
diff --git a/frontend/src/components/StrategyBox/StrategyMechanism.css b/frontend/src/components/StrategyBox/StrategyMechanism.css
deleted file mode 100644
index 68cc5a287..000000000
--- a/frontend/src/components/StrategyBox/StrategyMechanism.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.strategy-mechanism {
-  background-color: var(--main-button-inactive-background-colour);
-  border-color: transparent;
-  border-radius: 8px;
-  border-style: solid;
-  padding: 12px 14px;
-  margin-bottom: 8px;
-  cursor: default;
-}
-
-.strategy-mechanism-header {
-  display: flex;
-  justify-content: space-between;
-}
-
-.strategy-mechanism-info {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 20px;
-  width: 20px;
-}
-
-.strategy-mechanism-info span {
-  position: relative;
-  bottom: 1px;
-}
-
-.strategy-mechanism-info-box {
-  font-size: 0.875rem;
-  margin-top: 4px;
-}