diff --git a/template/package.json b/template/package.json
index a42e06a..4cee280 100644
--- a/template/package.json
+++ b/template/package.json
@@ -8,7 +8,7 @@
     "sass:watch": "sass --watch scss/main.scss:src/css/main.css",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "",
+  "author": "Christian Wolf",
   "license": "ISC",
   "devDependencies": {
     "sass": "^1.85.1"
diff --git a/template/scss/_colors.scss b/template/scss/_colors.scss
index c7d1782..4dabbb4 100644
--- a/template/scss/_colors.scss
+++ b/template/scss/_colors.scss
@@ -1,3 +1,5 @@
 $green: #69a840;
 $black: #000000;
 $light-gray: #d3d3d3;
+
+$background-color: $light-gray;
diff --git a/template/scss/_header.scss b/template/scss/_header.scss
new file mode 100644
index 0000000..c463756
--- /dev/null
+++ b/template/scss/_header.scss
@@ -0,0 +1,49 @@
+@use './colors' as *;
+@use './responsive' as r;
+@use './sizes';
+
+#header {
+    .text {
+        background-color: $green;
+        display: flex;
+        justify-content: center;
+
+        padding: 5px 0px;
+
+        .logo-link {
+            max-width: 85%;
+
+            @include r.normal {
+                max-height: 100px;
+            }
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+    }
+
+    .track {
+        height: 50px;
+        background-image: url('../images/track.png');
+        background-repeat: repeat-x;
+        background-size: contain;
+    }
+
+    .black-background {
+        display: none;
+
+        @include r.normal {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: sizes.$left-menu-width;
+            height: 100%;
+            background-color: $black;
+            z-index: -1;
+        }
+    }
+}
diff --git a/template/scss/_menu.scss b/template/scss/_menu.scss
new file mode 100644
index 0000000..e69de29
diff --git a/template/scss/_positions.scss b/template/scss/_positions.scss
new file mode 100644
index 0000000..d3d5c0c
--- /dev/null
+++ b/template/scss/_positions.scss
@@ -0,0 +1,39 @@
+@use './colors' as *;
+@use './responsive' as r;
+@use './sizes';
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+#main-row {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    gap: 10px;
+
+    @include r.normal {
+        flex-direction: row-reverse;
+    }
+
+    #main {
+        flex: 1 0 auto;
+    }
+
+    #menu {
+        background-color: $black;
+        padding: 5px;
+        box-sizing: border-box;
+
+        @include r.normal {
+            flex: 0 0 sizes.$left-menu-width;
+        }
+    }
+}
+
+#footer {
+    padding: 2px 0;
+    color: $light-gray;
+    background-color: black;
+}
diff --git a/template/scss/_sizes.scss b/template/scss/_sizes.scss
new file mode 100644
index 0000000..e026760
--- /dev/null
+++ b/template/scss/_sizes.scss
@@ -0,0 +1 @@
+$left-menu-width: 20%;
diff --git a/template/scss/main.scss b/template/scss/main.scss
index 102f51e..5cb6b57 100644
--- a/template/scss/main.scss
+++ b/template/scss/main.scss
@@ -1,6 +1,9 @@
 @use './fonts';
 @use './colors';
 @use './responsive' as r;
+@use './header';
+@use './positions';
+@use './menu';
 
 $color-green-1: rgb(184,229,162);
 $color-green-2: rgb(162,221,131);
@@ -24,16 +27,17 @@ $width-wide: 1600px;
 $indent-menu-left: 25px;
 
 body {
-	padding: 5px;
+	padding: 0px;
 	margin: 0px auto;
 	font-size: 12px;
-	max-width: 1100px;
+	// max-width: 1100px;
 	min-height: 100.1vh;
+	background-color: colors.$background-color;
 	
 	font-family: 'Noto Sans', sans-serif;
 	
 	@include r.narrow {
-		padding: 20px;
+		font-size: 13px;
 	}
 	
 	@include r.normal {
@@ -41,7 +45,7 @@ body {
 	}
 	
 	@include r.wide {
-		max-width: 70%;
+		// max-width: 70%;
 	}
 }
 
diff --git a/template/src/images/logo.png b/template/src/images/logo.png
new file mode 100644
index 0000000..4d27539
Binary files /dev/null and b/template/src/images/logo.png differ
diff --git a/template/src/images/track.png b/template/src/images/track.png
new file mode 100644
index 0000000..10cf16c
Binary files /dev/null and b/template/src/images/track.png differ
diff --git a/template/src/index.php b/template/src/index.php
index aa3a031..367c317 100644
--- a/template/src/index.php
+++ b/template/src/index.php
@@ -6,8 +6,8 @@ JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'au
 JHtml::_('stylesheet', 'templates/system/css/general.css', array('version' => 'auto', 'relative' => false));
 JHtml::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true));
 
-$doc = JFactory::getDocument();
-$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');
+// $doc = JFactory::getDocument();
+// $doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');
 
 // Check for a custom CSS file
 JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
@@ -25,6 +25,31 @@ JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
 </head>
 <body>
 
+<div id="header">
+	<div class="text">
+		<a class="logo-link" href="<?php echo JURI::base(); ?>">
+			<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/logo.png" alt="Logo">
+		</a>
+	</div>
+	<div class="track"></div>
+	<div class="black-background"></div>
+</div>
+
+<div id="main-row">
+	<div id="main">
+		<jdoc:include type="component" />
+	</div>
+
+	<div id="menu">
+		<jdoc:include type="modules" name="menu" />
+	</div>
+</div>
+
+<div id="footer">
+	<jdoc:include type="modules" name="footer" />
+</div>
+
+<!--
 <div id='header'>
 	<div class='image_row'>
 		<div class='siderow'>
@@ -67,7 +92,7 @@ JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
 		<jdoc:include type="modules" name="copyright" />
 	</div>
 </div>
-
+-->
 
 </body>
 </html>