diff --git a/prototype/src/main/resources/static/css/searchResults.css b/prototype/src/main/resources/static/css/searchResults.css
deleted file mode 100644
index ae78c28..0000000
--- a/prototype/src/main/resources/static/css/searchResults.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.container {
-
-}
-
-.searchresults {
-    max-width: 100%;
-    padding: 2em;
-    background-color: var(--c-white);
-    border: 0px;
-}
-
-.sidebar {
-    border: 0px;
-    border-right: 2px;
-    border-style: solid;
-    border-color: white;
-}
-
-.articlelist {
-    background-color: var(--c-white);
-}
-
-.article {
-    padding: 1em;
-}
-
-img {
-    width: 75%
-}
-
-h2 {
-    padding-bottom: 0px;
-}
-
-.articlelink {
-    color: var(--c-white);
-    background-color: var(--c-white);
-    border: 0px;
-}
-
-.articlelink:hover {
-    color: var(--root-c-secondary)
-}
-
-h1 {
-    padding: 0px;
-    padding-bottom: 0.5em;
-}
-
-hr {
-    border-top: 2px solid white;
-    width: 75%;
-    margin: auto;
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/searchResults.html b/prototype/src/main/resources/templates/searchResults.html
index a24d3bc..230f81a 100644
--- a/prototype/src/main/resources/templates/searchResults.html
+++ b/prototype/src/main/resources/templates/searchResults.html
@@ -3,87 +3,71 @@
 <head>
     <meta charset="utf-8">
     <title>e-commerce</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link href="/css/ecom.css" rel="stylesheet"/>
-    <link href="/css/searchResults.css" rel="stylesheet"/>
 </head>
 <body>
 <nav th:replace="fragments/header :: header">Header</nav>
-<main>
-    <div class="hero">
-        <div class="searchresults">
-            <div class="row">
-                <div class="sidebar col-2">
-                    <h1>Kategorie</h1>
-                    <ul>
-                        <li><span>Aufnahmegeräte</span></li>
-                        <li><span>Computer</span></li>
-                        <li><span>Fernseher</span></li>
-                        <li><span>Handys</span></li>
-                        <li><span>Unterhaltungselektronik</span></li>
-                        <li><span>Sonstiges</span></li>
-                    </ul>
-                </div>
-                <div class="articlelist col-10">
-                    <div class="row article">
-                        <div class="col-3 articleimg">
-                            <img src="/img/product-1.jpg" />
-                        </div>
-                        <div class="col-9 articledesc">
-                            <h2>
-                                <form action="/articleDetail" method="GET">
-                                    <input type="submit" value="Tolle Kamera" class="articlelink">
-                                </form>
-                            </h2>
-                            <h1> 25.14 €</h1>
-                            <p>
-                                Eine TOLLE Kamera <br>
-                                Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
-                                Aber glaub mir, sie is echt echt TOLL! <br>
-                                Indianerehrenwort!
-                            </p>
-                        </div>
-                    </div>
-                    <hr>
-                    <div class="row article">
-                        <div class="col-3 articleimg">
-                            <img src="/img/product-2.jpg" />
-                        </div>
-                        <div class="col-9 articledesc">
-                            <h2>
-                                <form action="/articleDetail" method="GET">
-                                    <input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
-                                </form>
-                            </h2>
-                            <h1> 10.14 €</h1>
-                            <p>
-                                Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
-                            </p>
-                        </div>
-                    </div>
-                    <hr>
-                    <div class="row article">
-                        <div class="col-3 articleimg">
-                            <img src="/img/product-3.jpg" />
-                        </div>
-                        <div class="col-9 articledesc">
-                            <h2>
-                                <form action="/articleDetail" method="GET">
-                                    <input type="submit" value="???" class="articlelink">
-                                </form>
-                            </h2>
-                            <h1> 44.14 €</h1>
-                            <p>
-                                Ich weiß selbst nich was das genau sein soll.<br>
-                                Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
-                            </p>
-                        </div>
-                    </div>
-                </div>
+<div class="hero">
+<main class="sidebar-layout content-width">
+    <nav class="sidebar-layout">
+        <ul  class="secondary">
+            <li><a>Aufnahmegeräte</a></li>
+            <li><a>Computer</a></li>
+            <li><a>Fernseher</a></li>
+            <li><a>Handys</a></li>
+            <li><a>Unterhaltungselektronik</a></li>
+            <li><a>Sonstiges</a></li>
+        </ul>
+    </nav>
+
+    <div class="content-width">
+        <div class='content-width'>
+            <h1>Suchergebnisse</h1>
+            <div class='grid m base shadow'>
+
+                <section>
+                    <img src="img/product-1.jpg">
+                    <h2>Tolle Kamera</h2>
+                    <p class='price'> 25.14 €</p>
+                    <p>
+                        Eine TOLLE Kamera <br>
+                        Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
+                        Aber glaub mir, sie is echt echt TOLL! <br>
+                        Indianerehrenwort!
+                    </p>
+                </section>
+
+                <section>
+                    <img src="img/product-2.jpg">
+                    <h2>Bluetooth Kopfhörer</h2>
+                    <p class='price'> 10.14 €</p>
+                    <p>
+                        Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
+                    </p>
+                </section>
+
+                <section>
+                    <img src="img/product-3.jpg">
+                    <h2>???</h2>
+                    <p class='price'> 25.14 €</p>
+                    <p>
+                        Ich weiß selbst nich was das genau sein soll.<br>
+                        Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
+                    </p>
+                </section>
+
+                <section class="spacer"></section>
+                <section class="spacer"></section>
+                <section class="spacer"></section>
+                <section class="spacer"></section>
             </div>
         </div>
+        <div class="vertical-spacer s"></div>
     </div>
+
+
 </main>
+</div>
 <footer th:replace="fragments/footer :: footer"></footer>
 </body>
 </html>
\ No newline at end of file
