diff --git a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
index 7db8985..e4caea1 100644
--- a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
+++ b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
@@ -43,6 +43,12 @@ public class RequestController {
     @GetMapping("/searchresults")
     public String searchresults() { return "searchResults";}
 
+    @GetMapping("/employee/articles")
+    public String articles() { return "articles";}
+
+    @GetMapping("/employee/listedarticles")
+    public String listedarticles() { return "listedArticles";}
+
     @GetMapping("/login")
     public String login(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) {
         model.addAttribute(new Customer());
diff --git a/prototype/src/main/resources/static/css/listedArticles.css b/prototype/src/main/resources/static/css/listedArticles.css
new file mode 100644
index 0000000..6f1315c
--- /dev/null
+++ b/prototype/src/main/resources/static/css/listedArticles.css
@@ -0,0 +1,19 @@
+img.xs {
+   width: var(--u2);
+}
+
+img.s {
+   width: var(--u4);
+}
+
+.full-width {
+   width: 100%;
+}
+
+span.checked::after {
+   content: "✔️";
+}
+
+span.unchecked::after {
+   content: "❌";
+}
diff --git a/prototype/src/main/resources/templates/articles.html b/prototype/src/main/resources/templates/articles.html
new file mode 100644
index 0000000..8bc8c98
--- /dev/null
+++ b/prototype/src/main/resources/templates/articles.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+   <meta charset="utf-8">
+   <title>e-commerce</title>
+   <link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}" />
+</head>
+
+<body>
+   <nav th:replace="fragments/header :: header">Header</nav>
+   <main class="sidebar-layout content-width">
+      <nav th:replace="fragments/employee :: sidebar">Header</nav>
+      <div class="content-width">
+         <h1> Artikel</h1>
+         <p>TODO</p>
+      </div>
+   </main>
+   <footer th:replace="fragments/footer :: footer"></footer>
+</body>
+
+</html>
diff --git a/prototype/src/main/resources/templates/fragments/employee.html b/prototype/src/main/resources/templates/fragments/employee.html
new file mode 100644
index 0000000..407bbf4
--- /dev/null
+++ b/prototype/src/main/resources/templates/fragments/employee.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+   <meta charset="UTF-8">
+   <title>e-commerce</title>
+</head>
+
+<body>
+   <nav th:fragment="sidebar">
+      <ul>
+         <li><a>Dashboard</a>
+            <ul>
+               <li><a>Artikel</a></li>
+               <li><a>Umsatzsteuer</a></li>
+               <li><a class='selected'>Geldbuchungen</a></li>
+               <li><a>Einstellungen</a></li>
+            </ul>
+         </li>
+         <li><a>Lieferanten</a>
+            <ul>
+               <li><a>Warenbuchungen</a></li>
+               <li><a>Geldbuchungen</a></li>
+            </ul>
+         </li>
+         <li><a>Lager</a>
+            <ul>
+               <li><a>Bestandsbuchungen</a></li>
+            </ul>
+         </li>
+         <li><a>Kunden</a>
+            <ul>
+               <li><a>Bestellungen</a></li>
+               <li><a>Geldbuchungen</a></li>
+            </ul>
+         </li>
+      </ul>
+   </nav>
+</body>
+
+</html>
diff --git a/prototype/src/main/resources/templates/listedArticles.html b/prototype/src/main/resources/templates/listedArticles.html
new file mode 100644
index 0000000..dc2322e
--- /dev/null
+++ b/prototype/src/main/resources/templates/listedArticles.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+   <meta charset="utf-8">
+   <title>e-commerce</title>
+   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
+   <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
+   <script th:src="@{/js/filterTable.js}"></script>
+
+</head>
+
+<body>
+   <nav th:replace="fragments/header :: header">Header</nav>
+   <main class="sidebar-layout content-width">
+      <nav th:replace="fragments/employee :: sidebar">Header</nav>
+      <div class="content-width">
+         <h1> Gelistete Artikel </h1>
+
+         <!--
+         ArticleListing (
+             article : Article
+             pricePerUnitNetCent : int
+             unitsPerWarehouseSlot : int
+
+             title : String
+             description : String
+             tags : Tag[]
+             image : Blob
+         )
+
+         Article (
+            manufacturer : string
+            articleId    : string
+            vatPercent   : int
+         )
+         -->
+         <h2>Artikel Hinzufügen</h2>
+         <p>
+            Weitere Artikel können über Artikelübersicht gelistet werden.
+            <a class="button smaller" th:href="@{/employee/articles}"> Jetzt Hinzufügen </a>
+         </p>
+
+         <p>
+            <table id="main-table">
+               <tr>
+                  <th colspan="8">
+                     <input type="text" placeholder="Filtern" class="smaller jsFilterTable full-width" data-target-id="main-table"></input>
+                  </th>
+               </tr>
+               <tr>
+                  <th>Bild</th>
+                  <th>Name</th>
+                  <th>Preis</th>
+                  <th>(Netto)</th>
+                  <th>Kategorien</th>
+                  <th>Aktiv</th>
+                  <th>Artikel</th>
+                  <th>Id (bearbeiten)</th>
+               </tr>
+
+               <tr>
+                  <td><img th:src="@{/img/product-1.jpg}" class="s" /></td>
+                  <td>Kamera</td>
+                  <td>100,50 €</td>
+                  <td> (84.45 €) </td>
+                  <td>Úberwachung, Elektronik</td>
+                  <td><span class="checked"></span></td>
+                  <td><a th:href="@{/employee/articles}">A-5051</a></td>
+                  <td><a th:href="@{/employee/listedArticlesDetail}">L-890</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-2.jpg}" class="s" /></td>
+                  <td>Earbuds</td>
+                  <td>63,95 €</td>
+                  <td>(53,73 €)</td>
+                  <td>Kopfhörer, Elektronik</td>
+                  <td><span class="checked"></span></td>
+                  <td><a th:href="@{/employee/articles}">A-840</a></td>
+                  <td><a th:href="@{/employee/listedArticlesDetail}">L-13850</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-3.jpg}" class="s" /></td>
+                  <td>USB-Magic Light</td>
+                  <td>11,90 €</td>
+                  <td> (10,00 €) </td>
+                  <td>Sonstiges, Elektronik</td>
+                  <td><span class="unchecked"></span></td>
+                  <td><a th:href="@{/employee/articles}">A-8401</a></td>
+                  <td><a th:href="@{/employee/listedArticlesDetail}">L-5784</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-4.jpg}" class="s" /></td>
+                  <td>3D Magic Stativ</td>
+                  <td>15,99 €</td>
+                  <td> (13.44 €) </td>
+                  <td>Úberwachung, Elektronik</td>
+                  <td><span class="checked"></span></td>
+                  <td><a th:href="@{/employee/articles}">A-2135</a></td>
+                  <td><a th:href="@{/employee/listedArticlesDetail}">L-4564</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-5.jpg}" class="s" /></td>
+                  <td>Ersatzfernbedinung</td>
+                  <td>7,95 €</td>
+                  <td> (6.68 €) </td>
+                  <td>Úberwachung, Elektronik</td>
+                  <td><span class="checked"></span></td>
+                  <td><a th:href="@{/employee/articles}">A-4565</a></td>
+                  <td><a th:href="@{/employee/listedArticlesDetail}">L-4566</a></td>
+               </tr>
+            </table>
+            <p>
+      </div>
+   </main>
+   <footer th:replace="fragments/footer :: footer"></footer>
+</body>
+
+</html>
