diff --git a/html/landingpage.html b/html/landingpage.html
index b92dfa5..fec5a7a 100644
--- a/html/landingpage.html
+++ b/html/landingpage.html
@@ -1,113 +1,102 @@
 <!DOCTYPE html>
 <html lang="de" dir="ltr">
+
   <head>
     <meta charset="utf-8">
-    <title>The Advertisement</title>
+    <title>THE ADVERSARY</title>
     <link rel="stylesheet" href="../sass/index.css">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
   </head>
+
   <body>
-    <div class="header">
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Suche</a></li>
-        <li><a href="#">Kontakt</a></li>
-        <li><a href="#">Impressum</a></li>
-      </ul>
-    </div>
-    <div class="greeting">
-      <h1>Welcome to the Advertisement</h1>
+    
+    <div class="navigation">
+      <img id="logo" src="../img/logodark.svg"> 
+      <a href="#">LINUX</a>
+      <a href="#">OPEN SOURCE</a>
+      <a href="#">OPINION</a>
+      <a href="#">PROGRAMMING</a>
     </div>
+
     <div class="content">
-      <div class="navigation">
-        <ol>
-          <li><a href="#">Category1</a></li>
-          <li><a href="#">Category2</a></li>
-          <li><a href="#">Category3</a></li>
-          <li><a href="#">Category4</a></li>
-        </ol>
-      </div>
       <div class="articles">
+
         <a href="#">
           <div class="article">
             <div class="article-header">
-              <h3>The World is Burning</h3>
+              <h3>Java is trash, and here is the proof.</h3>
+            </div>
+            <div class="article-description"> 
+              <p>OPINION   DAVID   15.12.2021</p>
             </div>
             <div class="article-body">
-              <p>SomeText</p>
+              <p>After a recent vulnerability voices get louder that demand to retire the language.</p>
             </div>
           </div>
         </a>
+
+        <div class="divider"></div>
+
         <a href="#">
           <div class="article">
             <div class="article-header">
-              <h3>The World is Burning</h3>
+              <h3>Render fractals on canvas with WASM.</h3>
+            </div>
+            <div class="article-description"> 
+              <p>PROGRAMMING  DAVID   15.12.2021</p>
             </div>
             <div class="article-body">
-              <p>SomeText</p>
+              <p>Learn how to render mandelbrot fractals with web assembly.</p>
             </div>
           </div>
         </a>
+
+        <div class="divider"></div>
+
         <a href="#">
           <div class="article">
             <div class="article-header">
-              <h3>The World is Burning</h3>
+              <h3>Write directly to the framebuffer with Rust.</h3>
+            </div>
+            <div class="article-description"> 
+              <p>LINUX   DAVID   15.12.2021</p>
             </div>
             <div class="article-body">
-              <p>SomeText</p>
+              <p>Learn how to access the framebuffer with Rust.</p>
             </div>
           </div>
         </a>
+
+        <div class="divider"></div>
+
         <a href="#">
           <div class="article">
             <div class="article-header">
-              <h3>The World is Burning</h3>
+              <h3>Kobalt a simple webserver for testing.</h3>
+            </div>
+            <div class="article-description"> 
+              <p>OPEN SOURCE   DAVID   15.12.2021</p>
             </div>
             <div class="article-body">
-              <p>SomeText</p>
-            </div>
-          </div>
-        </a>
-        <a href="#">
-          <div class="article">
-            <div class="article-header">
-              <h3>The World is Burning</h3>
-            </div>
-            <div class="article-body">
-              <p>SomeText</p>
-            </div>
-          </div>
-        </a>
-        <a href="#">
-          <div class="article">
-            <div class="article-header">
-              <h3>The World is Burning</h3>
-            </div>
-            <div class="article-body">
-              <p>SomeText</p>
-            </div>
-          </div>
-        </a>
-        <a href="#">
-          <div class="article">
-            <div class="article-header">
-              <h3>The World is Burning</h3>
-            </div>
-            <div class="article-body">
-              <p>SomeText</p>
-            </div>
-          </div>
-        </a>
-        <a href="#">
-          <div class="article">
-            <div class="article-header">
-              <h3>The World is Burning</h3>
-            </div>
-            <div class="article-body">
-              <p>SomeText</p>
+              <p>Meet kobalt, the new fast and simple production ready webserver.</p>
             </div>
           </div>
         </a>
+        
       </div>
     </div>
   </body>
+
+  <footer>
+    <div class="foot">
+      <a>ABOUT</a>
+      <a>IMPRESSUM</a>
+      <a>CONTACT</a>
+    </div>
+  </footer>
+
 </html>
diff --git a/img/logodark.svg b/img/logodark.svg
new file mode 100644
index 0000000..13f4e04
--- /dev/null
+++ b/img/logodark.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="LOGO-FINAL-DARK.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 17.197914 15.875005"
+   height="15.875005mm"
+   width="17.197914mm">
+  <defs
+     id="defs2">
+    <inkscape:perspective
+       id="perspective1549"
+       inkscape:persp3d-origin="105 : -182.125 : 1"
+       inkscape:vp_z="210 : -132.625 : 1"
+       inkscape:vp_y="0 : 999.99997 : 0"
+       inkscape:vp_x="0 : -132.625 : 1"
+       sodipodi:type="inkscape:persp3d" />
+  </defs>
+  <sodipodi:namedview
+     fit-margin-bottom="0"
+     fit-margin-right="0"
+     fit-margin-left="0"
+     fit-margin-top="0"
+     showguides="true"
+     inkscape:window-maximized="1"
+     inkscape:window-y="-8"
+     inkscape:window-x="-8"
+     inkscape:window-height="1017"
+     inkscape:window-width="1920"
+     showgrid="true"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="mm"
+     inkscape:cy="36.490448"
+     inkscape:cx="22.175528"
+     inkscape:zoom="22.627417"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base">
+    <inkscape:grid
+       originy="-120.38541"
+       originx="-88.635412"
+       id="grid833"
+       type="xygrid" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-88.635416,-120.38542)"
+     inkscape:label="Background"
+     id="layer2"
+     inkscape:groupmode="layer">
+    <path
+       id="path1541"
+       d="m 91.28125,136.26042 h 1.322917 l 5.291666,-10.58333 h -1.322915 z"
+       style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       id="path1682"
+       d="m 96.572915,128.32292 h 0.529167 l 1.852083,1.05833 h -0.529166 z"
+       style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+  </g>
+  <g
+     transform="translate(-88.635416,-120.38542)"
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Ebene 1">
+    <path
+       transform="scale(0.26458333)"
+       d="m 365,455 -30,60 h 10 l 10,-20 10,-5 10,5 10,20 h 10 z m 0,20 7,14 -7,-4 -7,4 z"
+       style="fill:#d62828;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.944882;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1468" />
+    <path
+       id="path1678"
+       d="m 96.572915,120.38542 h 1.322917 l 7.937498,15.87499 h -1.32291 z"
+       style="fill:#003049;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/img/logolight.svg b/img/logolight.svg
new file mode 100644
index 0000000..58262b6
--- /dev/null
+++ b/img/logolight.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="LOGO-FINAL-LIGHT.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 17.197914 15.875005"
+   height="15.875005mm"
+   width="17.197914mm">
+  <defs
+     id="defs2">
+    <inkscape:perspective
+       id="perspective1549"
+       inkscape:persp3d-origin="105 : -182.125 : 1"
+       inkscape:vp_z="210 : -132.625 : 1"
+       inkscape:vp_y="0 : 999.99997 : 0"
+       inkscape:vp_x="0 : -132.625 : 1"
+       sodipodi:type="inkscape:persp3d" />
+  </defs>
+  <sodipodi:namedview
+     fit-margin-bottom="0"
+     fit-margin-right="0"
+     fit-margin-left="0"
+     fit-margin-top="0"
+     showguides="true"
+     inkscape:window-maximized="1"
+     inkscape:window-y="-8"
+     inkscape:window-x="-8"
+     inkscape:window-height="1017"
+     inkscape:window-width="1920"
+     showgrid="true"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer2"
+     inkscape:document-units="mm"
+     inkscape:cy="35.054888"
+     inkscape:cx="18.899507"
+     inkscape:zoom="8"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base">
+    <inkscape:grid
+       originy="-120.38541"
+       originx="-88.635412"
+       id="grid833"
+       type="xygrid" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-88.635416,-120.38542)"
+     inkscape:label="Background"
+     id="layer2"
+     inkscape:groupmode="layer">
+    <path
+       id="path1541"
+       d="m 91.28125,136.26042 h 1.322917 l 5.291666,-10.58333 h -1.322915 z"
+       style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       id="path1682"
+       d="m 96.572915,128.32292 h 0.529167 l 1.852083,1.05833 h -0.529166 z"
+       style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+  </g>
+  <g
+     transform="translate(-88.635416,-120.38542)"
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Ebene 1">
+    <path
+       transform="scale(0.26458333)"
+       d="m 365,455 -30,60 h 10 l 10,-20 10,-5 10,5 10,20 h 10 z m 0,20 7,14 -7,-4 -7,4 z"
+       style="fill:#003049;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.944882;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1468" />
+    <path
+       id="path1678"
+       d="m 96.572915,120.38542 h 1.322917 l 7.937498,15.87499 h -1.32291 z"
+       style="fill:#d62828;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/sass/index.css b/sass/index.css
index 13ecc48..b7a0303 100644
--- a/sass/index.css
+++ b/sass/index.css
@@ -4,54 +4,111 @@ body {
   display: flex;
   flex-direction: column; 
   background-color: #03071e;
+  color: #EAE2B7;
 }
 
 a {
-  color: #EAE2B7;
+  color: inherit;
   font-size: 150%;
   text-decoration: none;
 }
 
 h3 {
   font-size: 250%;
+  margin: 0;
 }
 
 p {
+  margin: 0;
   font-size: 175%;
 }
 
+.divider {
+  height: 3px;
+  background-color: #ad080f;
+}
+
 .articles {
   margin: auto;
-  width: 50%;
-  padding: 10px;
+  width: 80%;
   font-family: 'Roboto', sans-serif;
 }
 
-.navigation {
-  font-family: 'Roboto', sans-serif
+.article {
+  padding: 2%;
+}
+
+.article:hover {
+  color: white;
+}
+
+.article-body {
+  width: 60%;
+  font-size: 80%;
+  font-weight: normal;
+  margin-top: 1%;
+  font-family: 'Roboto Mono', monospace;
+}
+
+.article-description {
+  font-weight: 500;
+  font-family: 'Roboto Mono', monospace;
+  color: #D00000;
+  font-size: 75%;
+  margin-top: 0.5%;
+}
+
+.article-description p {
+  white-space: pre;
+}
+
+#logo {
+  width: 3%;
+  padding-left: 2.5%;
 }
 
 .header {
-  background-color: #03071e;
-  color: #EAE2B7;
-  font-family: 'Roboto', sans-serif;
-  width: 100%;
-  height: 100px;
   display: flex;
   align-items: center;
-  justify-content: flex-end; }
+  justify-content: space-between;
+  font-family: 'Roboto', sans-serif
+}
 
-ul {
+.navigation {
+  background-color: black;
+  color: inherit;
+  font-family: 'Roboto', sans-serif;
+  width: 100%;
+  padding-top: 1%;
+  padding-bottom: 1%;
+  height: 5%;
   display: flex;
-  flex-direction: row;
-  font-size: 20px;
-  list-style: none; }
-  ul li {
-    padding-right: 30px; }
+  align-items: center;
+  justify-content: space-between;
+}
+  
+.navigation a {
+  padding-left: 2%;
+  padding-right: 2%;
+  font-size: 250%;
+  font-weight: bolder;
+  
+}
 
-ol {
+.foot {
   display: flex;
-  flex-direction: column;
-  list-style: georgian; }
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 2.5%;
+  margin-bottom: 2.5%;
+}
+
+.foot a {
+  font-family: 'Roboto Mono', monospace;
+  font-weight: normal;
+  padding-left: 10%;
+  padding-right: 10%;
+}
 
 /*# sourceMappingURL=index.css.map */
