diff --git a/src/components/simulation-view/simulation-view.css b/src/components/simulation-view/simulation-view.css
new file mode 100644
index 0000000000000000000000000000000000000000..e49bf064c269964a748ba429532786e8f87d8a7f
--- /dev/null
+++ b/src/components/simulation-view/simulation-view.css
@@ -0,0 +1,30 @@
+.simulation-view-wrapper {
+  display: grid;
+  grid-template-rows: 100px auto;
+  grid-template-columns: 100px auto;
+  grid-template-areas: 
+      "simulation-view-header simulation-view-header"
+      "simulation-view-sidebar simulation-view-mainview";
+}
+
+.simulation-view-header {
+  grid-area: simulation-view-header;
+  background-color: yellow;
+  min-height: 100px;
+}
+
+.simulation-view-sidebar {
+  grid-area: simulation-view-sidebar;
+  background-color: green;
+  height: 100vh;
+}
+
+.simulation-view-mainview {
+  grid-area: simulation-view-mainview;
+  background-color: red;
+}
+
+.simulation-view-flexlayout {
+  position: relative;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/components/simulation-view/simulation-view.js b/src/components/simulation-view/simulation-view.js
index 8c82d3f6db534b953a5943d4769aaf1b9fe0f15b..d202d539611cf0773b42e5322b45b26130e238d9 100644
--- a/src/components/simulation-view/simulation-view.js
+++ b/src/components/simulation-view/simulation-view.js
@@ -2,6 +2,7 @@ import React from 'react';
 import FlexLayout from 'flexlayout-react';
 
 import '../../../node_modules/flexlayout-react/style/light.css';
+import './simulation-view.css';
 
 const jsonBaseLayout = {
   global: {},
@@ -38,6 +39,15 @@ const jsonBaseLayout = {
   }
 };
 
+const classNameMapper = (className) => {
+  if (className === 'flexlayout__layout') {
+    return 'simulation-view-flexlayout';
+  }
+  else {
+    return className;
+  }
+};
+
 export default class SimulationView extends React.Component {
   constructor(props) {
     super(props);
@@ -57,8 +67,17 @@ export default class SimulationView extends React.Component {
 
   render() {
     return (
-      <div>
-        <FlexLayout.Layout model={this.state.model} factory={this.factory}/>
+      <div className='simulation-view-wrapper'>
+        <div className='simulation-view-header'>
+          header
+        </div>
+        <div className='simulation-view-sidebar'>
+          sidebar
+        </div>
+        <div className='simulation-view-mainview'>
+          <FlexLayout.Layout model={this.state.model} factory={this.factory}
+            classNameMapper={classNameMapper}/>
+        </div>
       </div>
     );
   }