diff --git a/package-lock.json b/package-lock.json
index baadfe4a..06a38092 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "react": "^18.1.0",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.1.0",
+        "react-tabs": "^6.0.2",
         "react-tooltip": "^5.15.0",
         "uuid": "^9.0.0",
         "vex-js": "^4.1.0"
@@ -1578,6 +1579,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -5157,6 +5166,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -5280,6 +5299,23 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-tabs": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz",
+      "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/react-tooltip": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.15.0.tgz",
@@ -7564,9 +7600,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "requires": {
-        "ajv": "^8.0.0"
-      }
+      "requires": {}
     },
     "ansi-escapes": {
       "version": "4.3.2",
@@ -8010,6 +8044,11 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -10694,6 +10733,16 @@
         "retry": "^0.12.0"
       }
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -10773,6 +10822,20 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-tabs": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz",
+      "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==",
+      "requires": {
+        "clsx": "^2.0.0",
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-tooltip": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.15.0.tgz",
diff --git a/package.json b/package.json
index 9a121b7b..3c60598b 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "react": "^18.1.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.1.0",
+    "react-tabs": "^6.0.2",
     "react-tooltip": "^5.15.0",
     "uuid": "^9.0.0",
     "vex-js": "^4.1.0"
diff --git a/src/renderer/components/App.css b/src/renderer/components/App.css
index 55b9ba43..0428867c 100644
--- a/src/renderer/components/App.css
+++ b/src/renderer/components/App.css
@@ -7,9 +7,10 @@ body {
     margin: 0;
     padding: 0;
     position: relative;
-    background: #ffffff;
+    background-color: #F4F4F5;
     font-size: 18px;
     font-family: gotham_rounded_medium, sans-serif;
+    overflow-x: hidden;
 }
 
 button {
@@ -83,6 +84,9 @@ hr {
     background-color: #ffffff;
     background-image: url('Settings.png');
     background-repeat: no-repeat;
+    background-position: center;
+    padding: 0.5rem;
+    border-radius: 1rem;
 }
 
 .App__header {
@@ -102,14 +106,12 @@ hr {
     letter-spacing: -0.02em;
 }
 
-.App__header-title {
-}
-
 .App__header-version {
     font-size: 60%;
 }
 
 .App__body {
+    height: 920px;
 }
 
 .header-documentation-link {
diff --git a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
index 050ed788..bc569ee2 100644
--- a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
+++ b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
@@ -1,10 +1,9 @@
 .CBA {
-    background: #F4F4F5;
-    border-top: 1px solid #CCCCCC;
-    border-bottom: 1px solid #CCCCCC;
+    background: #FFFFFF;
     box-sizing: border-box;
     padding: 20px;
     margin-bottom: 20px;
+    margin-top: 1rem;
 }
 
 .CBA__heading {
@@ -66,9 +65,6 @@
     padding: 0;
 }
 
-.CBA__run {
-}
-
 .CBA__run button {
     margin-top: 20px;
 }
\ No newline at end of file
diff --git a/src/renderer/components/HelmetProject/HelmetProject.css b/src/renderer/components/HelmetProject/HelmetProject.css
index 1ac6b1cf..33d2f717 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.css
+++ b/src/renderer/components/HelmetProject/HelmetProject.css
@@ -1,20 +1,56 @@
 .Project {
     position: relative;
+    background: #ffffff;
+    height: 100%;
 }
- /*
-.Project__runtime {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-}
- */
+
 .Project__selected-details {
     position: absolute;
     top: 130px;
     right: 20px;
     left: 635px;
 }
-.HelmetProject__control-group-separator {
+
+.tab-list {
+    display: flex;
+    justify-content: flex-start;
+    list-style: none;
+    list-style-position: inside;
+    width: 100%;
+    height: 5rem;
+    background-color: #F4F4F5;
+}
+
+.tab-list-item {
+    width: 12rem;
+    height: 60%;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    color: #333333;
+    border-radius: 1rem 1rem 0 0;
+    background-color: white;
+    opacity: 0.65;
+    margin-left: 5px;
+    cursor: default;
+}
+
+.tab-item-name {
+    padding-top: 2rem;
+}
+
+.tab-item-name:hover { 
+    border-bottom: 2px solid #333333b5;
+}
+
+.selected-tab {
+    background-color: white;
+    height: 60%;
+    color: #333333;
+    opacity: 1;
+    outline: none;
 }
+
+.selected-tab:hover {
+    border-bottom: 2px solid #3333337e;
+}
\ No newline at end of file
diff --git a/src/renderer/components/HelmetProject/HelmetProject.jsx b/src/renderer/components/HelmetProject/HelmetProject.jsx
index 98ebaf58..5ebe91d0 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.jsx
+++ b/src/renderer/components/HelmetProject/HelmetProject.jsx
@@ -3,6 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import Store from "electron-store";
 import fs from "fs";
 import path from "path";
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
 const {ipcRenderer} = require('electron');
 
@@ -383,27 +384,42 @@ const HelmetProject = ({
 
       {/* Panel for primary view and controls */}
       <div className="Project__runtime">
-        <Runtime
-          projectPath={projectPath}
-          reloadScenarios={() => _loadProjectScenarios(projectPath)}
-          scenarios={scenarios}
-          scenarioIDsToRun={scenarioIDsToRun}
-          runningScenarioID={runningScenarioID}
-          openScenarioID={openScenarioID}
-          setOpenScenarioID={setOpenScenarioID}
-          deleteScenario={(scenario) => {_deleteScenario(scenario)}}
-          handleClickScenarioToActive={_handleClickScenarioToActive}
-          handleClickNewScenario={_handleClickNewScenario}
-          handleClickStartStop={_handleClickStartStop}
-          logArgs={logArgs}
-          duplicateScenario={duplicateScenario}
-        />
-        <CostBenefitAnalysis
-          resultsPath={resultsPath}
-          cbaOptions={cbaOptions}
-          setCbaOptions={setCbaOptions}
-          runCbaScript={_runCbaScript}
-        />
+        <Tabs className="tab-container">
+          <TabList className="tab-list">
+            <Tab selectedClassName="selected-tab" className="tab-list-item tab-item-name"> 
+              Skenaariot
+            </Tab>
+            <Tab selectedClassName="selected-tab" className="tab-list-item tab-item-name">
+              CBA
+            </Tab>
+          </TabList>
+
+          <TabPanel className="runtime-tab">
+            <Runtime
+              projectPath={projectPath}
+              reloadScenarios={() => _loadProjectScenarios(projectPath)}
+              scenarios={scenarios}
+              scenarioIDsToRun={scenarioIDsToRun}
+              runningScenarioID={runningScenarioID}
+              openScenarioID={openScenarioID}
+              setOpenScenarioID={setOpenScenarioID}
+              deleteScenario={(scenario) => {_deleteScenario(scenario)}}
+              handleClickScenarioToActive={_handleClickScenarioToActive}
+              handleClickNewScenario={_handleClickNewScenario}
+              handleClickStartStop={_handleClickStartStop}
+              logArgs={logArgs}
+              duplicateScenario={duplicateScenario}
+            />
+          </TabPanel>
+          <TabPanel>
+            <CostBenefitAnalysis
+              resultsPath={resultsPath}
+              cbaOptions={cbaOptions}
+              setCbaOptions={setCbaOptions}
+              runCbaScript={_runCbaScript}
+            />
+          </TabPanel>
+        </Tabs>
       </div>
 
       {/* Panel for secondary view(s) and controls */}
diff --git a/src/renderer/components/HelmetProject/Runtime/Runtime.css b/src/renderer/components/HelmetProject/Runtime/Runtime.css
index 6fddc688..494f0f30 100644
--- a/src/renderer/components/HelmetProject/Runtime/Runtime.css
+++ b/src/renderer/components/HelmetProject/Runtime/Runtime.css
@@ -1,6 +1,3 @@
-.Runtime { 
-}
-
 /* Helmet project */
 
 .Runtime__helmet-project-controls {
@@ -67,8 +64,6 @@
     width: 24px !important;
     height: 24px !important;
 }
-.Runtime__scenario-activate-checkbox--active {
-}
 
 .Runtime__scenario-open-config {
     display: inline-block;
@@ -126,15 +121,10 @@
 
 .Runtime__start-stop-controls {
     padding: 20px;
-}
-
-.Runtime__start-stop-description {
+    background-color: #FFFFFF;
 }
 
 .Runtime__start-stop-scenarios {
     color: #00985F;
     font-weight: bold;
-}
-
-.Runtime__start-stop-btn {
 }
\ No newline at end of file
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 56fb831b..65af139f 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -27,6 +27,7 @@
     <link rel="stylesheet" type="text/css" href="components/HelmetProject/RunLog/RunLog.css">
     <script type="text/babel" src="components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.jsx"></script>
     <link rel="stylesheet" type="text/css" href="components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css">
+    <link rel="stylesheet" type="text/css" href="react-tabs/style/react-tabs.css">
     <script type="text/javascript">
         // ipcRenderer is aliased, so that other <script> tag(s) won't crash on startup in "constant-already-set"
         const {webFrame, ipcRenderer: aliasIpcRenderer} = require('electron');
@@ -40,6 +41,7 @@
     <script type="text/babel" src="./icons/DocumentationIcon.jsx"></script>
     <script type="text/babel" src="./icons/ArrowDown.jsx"></script>
     <script type="text/babel" src="./icons/ArrowUp.jsx"></script>
+    <script src="node_modules/electron-tabs/dist/electron-tabs.js"></script>
 </head>
 <body>