diff --git a/frontend/src/App.css b/frontend/src/App.css
index 03e3d5251..14a9aaf18 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -4,9 +4,12 @@
   flex-direction: column;
 }
 
+#app-content-header {
+  height: 10%;
+}
+
 #app-content-body {
-  height: 50%;
-  flex-grow: 1;
+  height: 90%;
 }
 
 #root {
@@ -53,7 +56,7 @@
 
 .prompt-injection-input {
   background-color: var(--main-input-background-colour);
-  border-color: var(--main-border-colour);
+  border-color: none;
   border-radius: 5px;
   border-style: solid;
   border-width: 1px;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0105bb8c5..40923b57a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,7 +6,6 @@ import { useEffect, useState } from "react";
 import { PHASE_NAMES } from "./models/phase";
 import {
   getChatHistory,
-  addMessageToChatHistory,
   clearChat,
 } from "./service/chatService";
 import { EmailInfo } from "./models/email";
@@ -28,7 +27,6 @@ function App() {
   const [defencesToShow, setDefencesToShow] =
     useState<DefenceInfo[]>(DEFENCE_DETAILS_ALL);
 
-  const [triggeredDefences, setTriggeredDefences] = useState<string[]>([]);
   const [emails, setEmails] = useState<EmailInfo[]>([]);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
 
@@ -61,7 +59,6 @@ function App() {
       setEmails([]);
     });
     resetActiveDefences(currentPhase).then(() => {
-      setTriggeredDefences([]);
       // choose appropriate defences to display
       let defences =
         currentPhase === PHASE_NAMES.PHASE_2
@@ -96,7 +93,7 @@ function App() {
       setMessages(phaseChatHistory);
     });
 
-    let defences =
+    const defences =
       newPhase === PHASE_NAMES.PHASE_2
         ? DEFENCE_DETAILS_PHASE
         : DEFENCE_DETAILS_ALL;
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
index 8dd7742a8..89e4d091a 100644
--- a/frontend/src/Theme.css
+++ b/frontend/src/Theme.css
@@ -1,6 +1,8 @@
 :root {
+  --header-background-colour: #101010;
+
   --main-accent-colour: #1FD07B;
-  --main-background-colour: #101010;
+  --main-background-colour: #252525;
   --main-border-colour: var(--main-accent-colour);
   --main-error-colour: #cc3c3c;
   --main-text-colour: #fff;
@@ -19,6 +21,10 @@
   --main-input-background-colour: var(--main-button-inactive-background-colour);
   --main-input-text-colour: var(--main-button-inactive-text-colour);
 
+  --main-toggle-ball-colour: #ECECEC;
+  --main-toggle-off-colour: #ABABAB;
+  --main-toggle-on-colour: var(--main-accent-colour);
+
   --chat-bot-colour: #D482FB;
   --chat-bot-background: linear-gradient(var(--chat-bot-colour), #F3DBFE);
   --chat-blocked-colour: var(--main-error-colour);
diff --git a/frontend/src/components/AttackBox/AttackBox.tsx b/frontend/src/components/AttackBox/AttackBox.tsx
index 11c53d00e..b16122470 100644
--- a/frontend/src/components/AttackBox/AttackBox.tsx
+++ b/frontend/src/components/AttackBox/AttackBox.tsx
@@ -5,7 +5,7 @@ import { AttackInfo } from "../../models/attack";
 function AttackBox({ attacks }: { attacks: AttackInfo[] }) {
   return (
     <div id="strategy-box">
-      <div className="side-bar-header">attack mechanisms</div>
+      <div className="side-bar-header">Attacks</div>
       {attacks.map((attack) => {
         return <AttackMechanism key={attack.id} attack={attack} />;
       })}
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 01e4a3b32..c2c7f000f 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -18,21 +18,22 @@ import { DEFENCE_DETAILS_ALL } from "../../Defences";
 function ChatBox(
   {
     messages,
+    completedPhases,
     currentPhase,
     addChatMessage,
-    resetPhase,
+    addCompletedPhase,
     setNumCompletedPhases,
     setEmails,
   }: {
     messages: ChatMessage[];
+    completedPhases: Set<PHASE_NAMES>;
     currentPhase: PHASE_NAMES;
     addChatMessage: (message: ChatMessage) => void;
-    resetPhase: () => void;
+    addCompletedPhase: (phase: PHASE_NAMES) => void;
     setNumCompletedPhases: (numCompletedPhases: number) => void;
     setEmails: (emails: EmailInfo[]) => void;
   }
 ) {
-  const [completedPhases, setCompletedPhases] = useState<Set<PHASE_NAMES>>(new Set());
   const [isSendingMessage, setIsSendingMessage] = useState<boolean>(false);
 
   // called on mount
@@ -49,12 +50,6 @@ function ChatBox(
     }
   }
 
-  function resetButtonPressed() {
-    completedPhases.delete(currentPhase);
-    setCompletedPhases(completedPhases);
-    resetPhase();
-  }
-
   async function sendChatMessage() {
     const inputBoxElement = document.getElementById(
       "chat-box-input"
@@ -144,7 +139,7 @@ function ChatBox(
       setEmails(sentEmails);
 
       if (response.wonPhase && !completedPhases.has(currentPhase)) {
-        setCompletedPhases(completedPhases.add(currentPhase));
+        addCompletedPhase(currentPhase);
         const successMessage =
           "Congratulations! You have completed this phase. Please click on the next phase to continue.";
         addChatMessage({
@@ -180,15 +175,6 @@ function ChatBox(
             Send
           </button>
         </div>
-        <div id="chat-box-footer-reset">
-          <button
-            id="chat-box-button-reset"
-            className="prompt-injection-button"
-            onClick={resetButtonPressed}
-          >
-            Reset phase
-          </button>
-        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
index 9c2fc60f7..8aac8b85c 100644
--- a/frontend/src/components/DefenceBox/DefenceBox.tsx
+++ b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -113,7 +113,7 @@ function DefenceBox({
 
   return (
     <div id="strategy-box">
-      <div className="side-bar-header">defence mechanisms</div>
+      <div className="side-bar-header">Defences</div>
       {defenceDetails.map((defenceDetail, index) => {
         return (
           <DefenceMechanism
diff --git a/frontend/src/components/DefenceBox/DefenceConfiguration.css b/frontend/src/components/DefenceBox/DefenceConfiguration.css
index b19fb00f0..006782816 100644
--- a/frontend/src/components/DefenceBox/DefenceConfiguration.css
+++ b/frontend/src/components/DefenceBox/DefenceConfiguration.css
@@ -1,9 +1,6 @@
 .defence-config-value {
-  border-color: var(--main-border-colour);
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 1px;
+  background-color: var(--main-background-colour);
   font-size: 14px;
   padding: 2px 4px;
   margin: 4px 0px;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/DefenceBox/DefenceConfiguration.tsx b/frontend/src/components/DefenceBox/DefenceConfiguration.tsx
index 8dc3e4944..640c24d86 100644
--- a/frontend/src/components/DefenceBox/DefenceConfiguration.tsx
+++ b/frontend/src/components/DefenceBox/DefenceConfiguration.tsx
@@ -23,7 +23,7 @@ function DefenceConfiguration(
     <div>
       <span className="defence-config-name">{config.name}: </span>
       <ContentEditable
-        className="defence-config-value"
+        className="defence-config-value prompt-injection-input"
         html={config.value.toString()}
         onKeyUp={setConfiguration.bind(this)}
         onClick={(event) => event.stopPropagation()}
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index 99ab25480..ab2e6b255 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,21 +1,4 @@
-.defence-active {
-  background-color: var(--main-button-active-background-colour);
-}
-
-.defence-active:hover {
-  background-color: var(--main-button-active-background-colour);
-}
-
-.defence-mechanism:hover {
-  border-width: 2px;
-  margin: 0px;
-  margin-bottom: 7px;
-}
-
 .defence-mechanism-config {
-  border-color: var(--main-border-colour);
-  border-style: solid;
-  border-width: 1px 0 0 0;
   font-size: 14px;
   margin-top: 4px;
 }
@@ -30,26 +13,67 @@
   font-weight: 600;
 }
 
-@keyframes flash-red-active {
-  0% {
-    background-color: #eef;
-  }
-  50% {
-    background-color: #fdd;
-  }
-  100% {
-    background-color: #eef;
-  }
-}
-
-@keyframes flash-red-inactive {
-  0% {
-    background-color: #fff;
-  }
-  50% {
-    background-color: #fdd;
-  }
-  100% {
-    background-color: #fff;
-  }
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 29px;
+  height: 13px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--main-toggle-off-colour);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  background-color: var(--main-toggle-ball-colour);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: var(--main-toggle-on-colour);
 }
+
+input:focus+.slider {
+  box-shadow: 0 0 1px var(--main-toggle-on-colour);
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
+}
+
+/*
+ * Modified from https://www.w3schools.com/howto/howto_css_switch.asp
+*/
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index 8c158ae80..29f9ef103 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -58,46 +58,30 @@ function DefenceMechanism({
   return (
     <span>
       <div
-        className={
-          defenceDetail.isActive
-            ? "strategy-mechanism defence-mechanism prompt-injection-button defence-active"
-            : "strategy-mechanism defence-mechanism prompt-injection-button"
-        }
+        className="strategy-mechanism defence-mechanism"
         onMouseOver={() => {
           setIsInfoBoxVisible(true);
         }}
         onMouseLeave={() => {
           setIsInfoBoxVisible(false);
         }}
-        // style={
-        //   defenceDetail.isTriggered
-        //     ? defenceDetail.isActive
-        //       ? {
-        //           animation:
-        //             "flash-red-active " +
-        //             ANIMATION_FLASH_TIME_SECONDS +
-        //             "s linear 0s " +
-        //             ANIMATION_FLASH_REPEAT +
-        //             " forwards",
-        //         }
-        //       : {
-        //           animation:
-        //             "flash-red-inactive " +
-        //             ANIMATION_FLASH_TIME_SECONDS +
-        //             "s linear 0s " +
-        //             ANIMATION_FLASH_REPEAT +
-        //             " forwards",
-        //         }
-        //     : { animation: "none" }
-        // }
-        onClick={() => {
-          defenceDetail.isActive
-            ? setDefenceInactive(defenceDetail.id)
-            : setDefenceActive(defenceDetail.id);
-        }}
       >
         <div className="strategy-mechanism-header">
           <span>{defenceDetail.name}</span>
+          <label className="switch" >
+            <input 
+              type="checkbox" 
+              placeholder="defence-toggle" 
+              onChange={() => {
+                defenceDetail.isActive
+                  ? setDefenceInactive(defenceDetail.id)
+                  : setDefenceActive(defenceDetail.id);
+              }}
+              // set checked if defence is active
+              checked={defenceDetail.isActive}
+            />
+            <span className="slider round"></span>
+          </label>
         </div>
         {isInfoBoxVisible ? (
           <div className="strategy-mechanism-info-box">
diff --git a/frontend/src/components/EmailBox/EmailBox.css b/frontend/src/components/EmailBox/EmailBox.css
index ebfd1d980..a30c8aa1c 100644
--- a/frontend/src/components/EmailBox/EmailBox.css
+++ b/frontend/src/components/EmailBox/EmailBox.css
@@ -10,7 +10,6 @@
   flex-direction: column-reverse;
   flex-grow: 1;
   overflow-y: auto;
+  padding: 32px 8px;
   scrollbar-width: thin;
-  padding: 0 40px;
-  padding-bottom: 40px;
 }
\ No newline at end of file
diff --git a/frontend/src/components/ExportChat/ExportPDFLink.css b/frontend/src/components/ExportChat/ExportPDFLink.css
index ce5faaf64..c5b3b1835 100644
--- a/frontend/src/components/ExportChat/ExportPDFLink.css
+++ b/frontend/src/components/ExportChat/ExportPDFLink.css
@@ -1,17 +1,16 @@
 #export-chat-box {
-    margin: 15px;
-    padding-top: 20px;        
-    padding-bottom: 20px;
     text-align: center;
+    height: 100%;
+    width: 100%;
 }
 
 a {
     padding: 5 12px;
-    font-size: 16px;
     color: var(--main-button-inactive-text-colour);
     text-decoration: none;
 }
 
 button {
-    height: 30px;
+    height: 100%;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/frontend/src/components/ExportChat/ExportPDFLink.tsx b/frontend/src/components/ExportChat/ExportPDFLink.tsx
index e095a74f2..d85ba0996 100644
--- a/frontend/src/components/ExportChat/ExportPDFLink.tsx
+++ b/frontend/src/components/ExportChat/ExportPDFLink.tsx
@@ -33,7 +33,7 @@ const ExportPDFLink = ({
           }
           fileName={getFileName()}
         >
-          {"Export chat history"}
+          {"Export"}
         </PDFDownloadLink>{" "}
       </button>
     </div>
diff --git a/frontend/src/components/MainComponent/DemoBody.css b/frontend/src/components/MainComponent/DemoBody.css
index ad1b1c5e7..6981628f8 100644
--- a/frontend/src/components/MainComponent/DemoBody.css
+++ b/frontend/src/components/MainComponent/DemoBody.css
@@ -23,15 +23,27 @@
   height: 100%;
   width: 30%;
   overflow-y: auto;
+  padding: 0 30px;
   scrollbar-width: thin;
 }
 
 .side-bar-header {
-  border-color: var(--main-border-colour);
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  margin: 15px;
-  margin-bottom: 10px;
-  padding-bottom: 20px;
-  text-align: center;
+  margin-top: 25px;
+  margin-bottom: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: left;
+}
+
+#control-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 34px;
+  min-height: 34px;
+  padding: 32px 0;
+}
+
+.control-button {
+  width: 45%;
 }
\ No newline at end of file
diff --git a/frontend/src/components/MainComponent/DemoBody.tsx b/frontend/src/components/MainComponent/DemoBody.tsx
index 6496a96d4..db06d0c4d 100644
--- a/frontend/src/components/MainComponent/DemoBody.tsx
+++ b/frontend/src/components/MainComponent/DemoBody.tsx
@@ -11,6 +11,7 @@ import ExportPDFLink from "../ExportChat/ExportPDFLink";
 import ModelSelectionBox from "../ModelSelectionBox/ModelSelectionBox";
 import { EmailInfo } from "../../models/email";
 import { addMessageToChatHistory } from "../../service/chatService";
+import { useState } from "react";
 
 function DemoBody({
   currentPhase,
@@ -31,6 +32,19 @@ function DemoBody({
   setEmails: (emails: EmailInfo[]) => void;
   setNumCompletedPhases: (numCompletedPhases: number) => void;
 }) {
+  const [completedPhases, setCompletedPhases] = useState<Set<PHASE_NAMES>>(new Set());
+
+  function addCompletedPhase(phase: PHASE_NAMES) {
+    completedPhases.add(phase);
+    setCompletedPhases(completedPhases);
+  }
+
+  function resetButtonClicked() {
+    completedPhases.delete(currentPhase);
+    setCompletedPhases(completedPhases);
+    resetPhase();
+  }
+
   const addInfoMessage = (message: string) => {
     addChatMessage({
       message: message,
@@ -53,8 +67,16 @@ function DemoBody({
   return (
     <span id="main-area">
       <div className="side-bar">
+        {/* show reduced set of attacks on phase 1 */}
+        {currentPhase === PHASE_NAMES.PHASE_1 && (
+          <AttackBox attacks={ATTACKS_PHASE_1} />
+        )}
+        {/* show all attacks on phase 2 and sandbox */}
+        {(currentPhase === PHASE_NAMES.PHASE_2 ||
+          currentPhase === PHASE_NAMES.SANDBOX) && (
+          <AttackBox attacks={ATTACKS_ALL} />
+        )}
         {/* hide defence box on phases 0 and 1. only allow configuration in sandbox */}
-        {/* hide defence box on phases 0 and 1 */}
         {(currentPhase === PHASE_NAMES.PHASE_2 ||
           currentPhase === PHASE_NAMES.SANDBOX) && (
           <DefenceBox
@@ -65,29 +87,31 @@ function DemoBody({
             defenceDeactivated={defenceDeactivated}
           />
         )}
-        {/* show reduced set of attacks on phase 1 */}
-        {currentPhase === PHASE_NAMES.PHASE_1 && (
-          <AttackBox attacks={ATTACKS_PHASE_1} />
-        )}
-        {/* show all attacks on phase 2 and sandbox */}
-        {(currentPhase === PHASE_NAMES.PHASE_2 ||
-          currentPhase === PHASE_NAMES.SANDBOX) && (
-          <AttackBox attacks={ATTACKS_ALL} />
-        )}
-        <ExportPDFLink
-          messages={messages}
-          emails={emails}
-          currentPhase={currentPhase}
-        />
         {/* hide model selection box on phases 0 and 1 */}
         {currentPhase === PHASE_NAMES.SANDBOX && <ModelSelectionBox />}
+        <div id="control-buttons">
+          <div className="control-button">
+            <ExportPDFLink
+              messages={messages}
+              emails={emails}
+              currentPhase={currentPhase}
+            />
+          </div>
+          <button
+            className="prompt-injection-button control-button"
+            onClick={resetButtonClicked}
+          >
+            Reset
+          </button>
+        </div> 
       </div>
       <div id="centre-area">
         <ChatBox
           messages={messages}
+          completedPhases={completedPhases}
           currentPhase={currentPhase}
           addChatMessage={addChatMessage}
-          resetPhase={resetPhase}
+          addCompletedPhase={addCompletedPhase}
           setNumCompletedPhases={setNumCompletedPhases}
           setEmails={setEmails}
         />
diff --git a/frontend/src/components/MainComponent/DemoHeader.css b/frontend/src/components/MainComponent/DemoHeader.css
index dbf04da7d..b45191497 100644
--- a/frontend/src/components/MainComponent/DemoHeader.css
+++ b/frontend/src/components/MainComponent/DemoHeader.css
@@ -1,13 +1,13 @@
 #demo-header {
+  background-color: var(--header-background-colour);
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
-  padding: 20px 32px;
-  border-width: 0px;
-  border-bottom: 3px;
-  border-color: var(--main-accent-colour);
-  border-style: solid;
+  padding: 0 32px;
+  height: 100%;
+  min-height: 50px;
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 
 #demo-header-left {
@@ -25,7 +25,7 @@
   white-space: nowrap;
 }
 
-#demo-header-current-phase { 
+#demo-header-current-phase {
   color: var(--main-accent-colour);
   font-size: 36px;
   font-style: italic;
diff --git a/frontend/src/components/ModelSelectionBox/ModelSelectionBox.css b/frontend/src/components/ModelSelectionBox/ModelSelectionBox.css
index 293abfbad..2b8844bb8 100644
--- a/frontend/src/components/ModelSelectionBox/ModelSelectionBox.css
+++ b/frontend/src/components/ModelSelectionBox/ModelSelectionBox.css
@@ -1,5 +1,5 @@
 #model-selection-box {
-    padding: 1px 32px;
+    padding: 1px 0;
     position: relative;
 }
 
@@ -16,7 +16,7 @@
 #model-selection-info p {
     margin: 0;
     padding: 0;
-    color:cadetblue
+    color: cadetblue
 }
 
 #p error {
diff --git a/frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx b/frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx
index a0084edfc..3c01e3e61 100644
--- a/frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx
+++ b/frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx
@@ -40,7 +40,7 @@ function ModelSelectionBox() {
   // return a drop down menu with the models
   return (
     <div id="model-selection-box">
-      <div className="side-bar-header">model selection</div>
+      <div className="side-bar-header">Model</div>
       <div id="model-selection-row">
         <p>Select a model: </p>
         <select
diff --git a/frontend/src/components/StrategyBox/StrategyBox.css b/frontend/src/components/StrategyBox/StrategyBox.css
index 50f2870f9..1b826f177 100644
--- a/frontend/src/components/StrategyBox/StrategyBox.css
+++ b/frontend/src/components/StrategyBox/StrategyBox.css
@@ -1,4 +1,3 @@
 #strategy-box {
-  padding: 16px 32px;
   position: relative;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/StrategyBox/StrategyMechanism.css b/frontend/src/components/StrategyBox/StrategyMechanism.css
index 57acd4112..26bae80a8 100644
--- a/frontend/src/components/StrategyBox/StrategyMechanism.css
+++ b/frontend/src/components/StrategyBox/StrategyMechanism.css
@@ -1,10 +1,9 @@
 .strategy-mechanism {
-  border-color: var(--main-border-colour);
+  background-color: var(--main-button-inactive-background-colour);
+  border-color: transparent;
   border-radius: 8px;
   border-style: solid;
-  border-width: 1px;
-  padding: 6px;
-  margin: 1px;
+  padding: 12px 14px;
   margin-bottom: 8px;
   cursor: default;
 }
@@ -18,10 +17,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-color: var(--main-border-colour);
-  border-radius: 10px;
-  border-style: solid;
-  border-width: 1px;
   height: 20px;
   width: 20px;
 }
@@ -32,9 +27,6 @@
 }
 
 .strategy-mechanism-info-box {
-  border-color: var(--main-border-colour);
-  border-style: solid;
-  border-width: 1px 0 0 0;
   font-size: 14px;
   margin-top: 4px;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4849f22ea..99c7e25d6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,8 +1,7 @@
 body {
   height: 100%;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: "Helvetica Neue", Helvetica, Arial,
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -18,5 +17,4 @@ html {
   background-color: var(--main-background-colour);
   border-color: var(--main-border-colour);
   color: var(--main-text-colour);
-}
-
+}
\ No newline at end of file