diff --git a/src/main/java/de/hsel/itech/db/Database.java b/src/main/java/de/hsel/itech/db/Database.java
index 82c8e0c..a8af043 100644
--- a/src/main/java/de/hsel/itech/db/Database.java
+++ b/src/main/java/de/hsel/itech/db/Database.java
@@ -1,6 +1,10 @@
 package de.hsel.itech.db;
 
 import de.hsel.itech.config.Configuration;
+import de.hsel.itech.db.pojo.Author;
+import de.hsel.itech.db.pojo.Book;
+import de.hsel.itech.db.pojo.Category;
+import de.hsel.itech.db.pojo.Publisher;
 import org.jetbrains.annotations.Nullable;
 import org.mariadb.jdbc.MariaDbPoolDataSource;
 
@@ -11,6 +15,8 @@ import java.sql.Connection;
 import java.sql.PreparedStatement;
 import java.sql.ResultSet;
 import java.sql.SQLException;
+import java.time.Year;
+import java.util.ArrayList;
 
 /**
  *
@@ -43,7 +49,6 @@ public class Database {
             assert connection != null;
             try(BufferedReader br = new BufferedReader(new FileReader(getClass().getClassLoader().getResource("database.sql").getFile()))) {
                 for (String line = br.readLine(); line != null; line = br.readLine()) {
-                    System.out.println(line);
                     PreparedStatement statement = connection.prepareStatement(line);
                     statement.executeUpdate();
                     statement.close();
@@ -90,6 +95,49 @@ public class Database {
     }
 
 
+    private ArrayList<Book> books;
+
+    public void addBook(Book book){
+        if(books == null){
+            books = new ArrayList<Book>();
+        }
+        books.add(book);
+    }
+
+    public void removeBook(long isbn){
+        for(Book book : books){
+            if(book.getIsbn() == isbn){
+                books.remove(book);
+                break;
+            }
+        }
+    }
+
+    public ArrayList<Book> getBooks(){
+        if(books == null){
+            books = new ArrayList<Book>();
+            Book book = new Book(
+                    1234,
+                    new Author(123123,"Julian Hinxlage"),
+                    new Publisher(234231,"Verlag xy"),
+                    new Category(23434,"Education", "DxAzOKSiPoE"),
+                    "C++ for beginners", Year.of(2019),1500,"C++ book", "DxAzOKSiPoE"
+            );
+            books.add(book);
+
+            book = new Book(
+                    1235,
+                    new Author(123123,"Julian Hinxlage"),
+                    new Publisher(234231,"Verlag xy"),
+                    new Category(23434,"Education", "DxAzOKSiPoE"),
+                    "C++ for beginners vol 2", Year.of(2019),1499,"C++ book", "DxAzOKSiPoE"
+            );
+            books.add(book);
+        }
+
+        return books;
+    }
+
 
 
 
diff --git a/src/main/java/de/hsel/itech/servlet/AddBook.java b/src/main/java/de/hsel/itech/servlet/AddBook.java
new file mode 100644
index 0000000..cabd6b3
--- /dev/null
+++ b/src/main/java/de/hsel/itech/servlet/AddBook.java
@@ -0,0 +1,43 @@
+package de.hsel.itech.servlet;
+
+import de.hsel.itech.db.pojo.Book;
+
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.util.ArrayList;
+
+public class AddBook extends HttpServlet {
+
+
+    protected void doGet(final HttpServletRequest req, final HttpServletResponse resp)
+            throws IOException {
+
+        resp.setCharacterEncoding("utf-8");
+        PrintWriter out = resp.getWriter();
+
+        Utillity.insertFile(out, "template_head.html");
+        de.hsel.itech.db.Database db = de.hsel.itech.db.Database.getInstance();
+        ArrayList<Book> books = db.getBooks();
+
+        out.println("<form class=\"m-container\" action=\"booklist\" method=post>");
+        Utillity.addInput(out,"ISBN", "isbn");
+        Utillity.addInput(out,"Titel", "title");
+        Utillity.addInput(out,"Author", "author");
+        Utillity.addInput(out,"Preis", "price");
+        Utillity.addInput(out,"Jahr", "year");
+        Utillity.addInput(out,"Beschreibung", "description");
+        Utillity.addInput(out,"Verlag", "publisher");
+        Utillity.addTypeButton(out, "Hinzufügen", "submit");
+        out.println("</form>");
+
+
+        //Utillity.addButton(out,"Hinzufügen", "/itech/booklist");
+        Utillity.addButton(out,"Zurück zur Buchliste", "booklist");
+
+        Utillity.insertFile(out, "template_footer.html");
+    }
+
+}
diff --git a/src/main/java/de/hsel/itech/servlet/BookList.java b/src/main/java/de/hsel/itech/servlet/BookList.java
new file mode 100644
index 0000000..c2622b7
--- /dev/null
+++ b/src/main/java/de/hsel/itech/servlet/BookList.java
@@ -0,0 +1,122 @@
+package de.hsel.itech.servlet;
+
+import de.hsel.itech.db.pojo.Author;
+import de.hsel.itech.db.pojo.Book;
+import de.hsel.itech.db.pojo.Category;
+import de.hsel.itech.db.pojo.Publisher;
+
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.time.Year;
+import java.util.ArrayList;
+import java.util.Enumeration;
+
+public class BookList extends HttpServlet {
+
+    protected void doGet(final HttpServletRequest req, final HttpServletResponse resp)
+            throws IOException {
+
+        //get database object
+        de.hsel.itech.db.Database db = de.hsel.itech.db.Database.getInstance();
+
+        //print parameter (debug)
+        Enumeration<String> names = req.getParameterNames();
+        while(names.hasMoreElements()){
+            String name = names.nextElement();
+            System.out.println(name + "=" + req.getParameter(name));
+        }
+
+        //remove book by id
+        String param = req.getParameter("removeid");
+        if(param != null){
+            long isbn = Long.parseLong(param);
+            //TODO remove book from Database
+            db.removeBook(isbn);
+        }
+
+        param = req.getParameter("isbn");
+        if(param != null){
+            long isbn = Long.parseLong(param);
+            String title = req.getParameter("title");
+            String author = req.getParameter("author");
+            int price = Integer.parseInt(req.getParameter("price"));
+            int year = Integer.parseInt(req.getParameter("year"));
+            String category = req.getParameter("category");
+            String description = req.getParameter("description");
+            String publisher = req.getParameter("publisher");
+
+            Book book = new Book(
+                    0,
+                    new Author(0,author),
+                    new Publisher(0,publisher),
+                    new Category(0,category, "DxAzOKSiPoE"),
+                    title, Year.of(year),price,description, "DxAzOKSiPoE"
+            );
+            //TODO add book
+            db.addBook(book);
+
+            resp.sendRedirect("booklist");
+        }
+
+        resp.setCharacterEncoding("utf-8");
+        PrintWriter out = resp.getWriter();
+
+        //header template
+        Utillity.insertFile(out, "template_head.html");
+
+
+        ArrayList<Book> books = db.getBooks();
+
+        //book entries
+        out.println("<div class=\"m-container\">");
+        for (Book book : books) {
+
+            out.println(" <div class=\"m-row\">");
+
+            out.println("  <div class=\"m-col-l-4\">");
+            out.println("   <img class=\"m-image\" src=\"https://source.unsplash.com/" + book.getImage() + "/300x300\" alt=\"Buchcover\">");
+            out.println("  </div>");
+
+            out.println("  <div class=\"m-col-l-4\">");
+            out.println("<h1>" + book.getTitle() + "</h1>");
+            out.println("   <br>");
+            out.println("   <h2>" + book.getAuthor().getName() + "</h2>");
+            out.println("   <br>");
+            out.print("   <h3>" + book.getPrice() / 100 + ",");
+            if(book.getPrice() % 100 < 10){
+                out.print("0");
+            }
+            out.println(book.getPrice() % 100 +" &euro;</h3>");
+            out.println("   <br>");
+            out.println("  </div>");
+
+            out.println("  <div class=\"m-col-l-4\">");
+            out.println("   <div class=\"m-button m-danger\">");
+
+            out.println("<a href=\"/itech/booklist?removeid=" + book.getIsbn() + "\">");
+            out.println("Entfernen");
+            out.println("</a>");
+
+            out.println(" </div>");
+            out.println("   </div>");
+            out.println("  </div>");
+        }
+        out.println("</div>");
+
+
+        //add book button
+        Utillity.addButton(out,"Neues Buch Hinzufügen", "addbook");
+
+        //footer template
+        Utillity.insertFile(out, "template_footer.html");
+    }
+
+    protected void doPost(final HttpServletRequest req, final HttpServletResponse resp)
+            throws IOException {
+        doGet(req,resp);
+    }
+
+}
diff --git a/src/main/java/de/hsel/itech/servlet/Utillity.java b/src/main/java/de/hsel/itech/servlet/Utillity.java
new file mode 100644
index 0000000..74b998a
--- /dev/null
+++ b/src/main/java/de/hsel/itech/servlet/Utillity.java
@@ -0,0 +1,51 @@
+package de.hsel.itech.servlet;
+
+import java.io.BufferedReader;
+import java.io.FileReader;
+import java.io.IOException;
+import java.io.PrintWriter;
+
+public class Utillity {
+
+    static public void insertFile(PrintWriter out, String fileName) {
+        try (BufferedReader br = new BufferedReader(new FileReader(Utillity.class.getClassLoader().getResource(fileName).getFile()))) {
+            for (String line = br.readLine(); line != null; line = br.readLine()) {
+                out.println(line);
+            }
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
+
+    static public void addInput(PrintWriter out, String label, String name){
+        out.println(" <div class=\"m-row\">");
+        out.println("  <div class=\"m-col-l-2 m-push-l-5\">");
+        out.println(label);
+        out.println("<input type=\"text\" name=\"" + name + "\">");
+        out.println("</div>");
+        out.println("</div>");
+    }
+
+    static public void addButton(PrintWriter out, String label, String url){
+        out.println(" <div class=\"m-row\">");
+        out.println("  <div class=\"m-col-l-4 m-push-l-4\">");
+        out.println("   <div class=\"m-button m-success\">");
+        out.println("<a href=\"" + url + "\">");
+        out.println(label);
+        out.println("</a>");
+        out.println(" </div>");
+        out.println("</div>");
+        out.println("</div>");
+    }
+
+    static public void addTypeButton(PrintWriter out, String label, String type){
+        out.println(" <div class=\"m-row\">");
+        out.println("  <div class=\"m-col-l-4 m-push-l-4\">");
+        //out.println("   <div class=\"m-button m-success\">");
+        out.println("<input type=\"" + type + "\" value=\"" + label + "\">");
+        //out.println("<input type=" + type + " value=" + label + ">");
+        //out.println(" </div>");
+        out.println("</div>");
+        out.println("</div>");
+    }
+}
diff --git a/src/main/resources/template_footer.html b/src/main/resources/template_footer.html
new file mode 100644
index 0000000..c0a0803
--- /dev/null
+++ b/src/main/resources/template_footer.html
@@ -0,0 +1,81 @@
+<footer>
+    <nav>
+        <div class="m-container">
+            <div class="m-row">
+                <div class="m-col-s-3 m-col-t-6">
+                    <h3>Hilfe</h3>
+                    <ul>
+                        <li><a href="#">FAQ</a></li>
+                        <li><a href="#">Rückgabe</a></li>
+                    </ul>
+                </div>
+                <div class="m-col-s-3 m-col-t-6">
+                    <h3>Zahlung</h3>
+                    <ul>
+                        <li><a href="#">Kreditkarten</a></li>
+                        <li><a href="#">Gutscheine</a></li>
+                        <li><a href="#">Bankeinzug</a></li>
+                    </ul>
+                </div>
+                <div class="m-clearfix-t"></div>
+                <div class="m-col-s-3 m-col-t-6">
+                    <h3>Amazon light</h3>
+                    <ul>
+                        <li><a href="#">Über</a></li>
+                        <li><a href="#">Kontakt</a></li>
+                        <li><a href="#">Presse</a></li>
+                        <li><a href="#">Jobs</a></li>
+                    </ul>
+                </div>
+                <div class="m-col-s-3 m-col-t-6">
+                    <h3><a href="#">Rechtliches</a></h3>
+                    <ul>
+                        <li><a href="https://joethei.xyz/impress">Impressum</a></li>
+                        <li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
+                        <li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="m-row">
+                <div class="m-col-l-10 m-push-l-1">
+                    <p>Amazon light. Copyright &copy; <a href="#">B1</a>,
+                        2019. All rights reserved.</p>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+
+</footer>
+
+
+<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+<script>
+    function changeTheme() {
+
+        if(document.getElementById('myonoffswitch').checked) {
+            swapStyleSheet("dark", "#22272e");
+        }else {
+            swapStyleSheet("light", "#cb4b16");
+        }
+
+    }
+
+    function swapStyleSheet(sheet, color) {
+        document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
+        document.getElementById("pagecolor").setAttribute("content", color);
+    }
+
+    $(document).ready(function () {
+        $('.slider').slick({
+            infinite: true,
+            slidesToShow: 6,
+            slidesToScroll: 3
+        })
+    });
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/template_head.html b/src/main/resources/template_head.html
new file mode 100644
index 0000000..d6dcbf2
--- /dev/null
+++ b/src/main/resources/template_head.html
@@ -0,0 +1,65 @@
+<!Doctype html>
+<html lang="de">
+<head>
+    <title>Edit Book List</title>
+
+    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
+    <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
+
+    <link href="css/custom.css" rel="stylesheet">
+    <link href="css/slick-theme.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+</head>
+<body>
+
+<header>
+    <nav id="navigation">
+        <div class="m-container">
+            <div class="m-row">
+                <a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
+                <a id="m-navbar-show" href="#navigation" title="Show navigation"
+                   class="m-col-t-3 m-hide-m m-text-right"></a>
+                <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+                <div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
+                    <div class="m-row">
+                        <ol class="m-col-t-6 m-col-m-none">
+                            <li><a href="#">Katalog</a></li>
+                            <li><a href="#">(1) Warenkorb</a></li>
+                        </ol>
+                        <ol class="m-col-t-6 m-col-m-none" start="4">
+                            <li>
+                                <a href="#">Mein Account</a>
+                                <ol>
+                                    <li><a href="#">Meine Bestellungen</a></li>
+                                    <li><a href="#">Adressen & Konten</a></li>
+                                    <li><a href="#">Abmelden</a></li>
+                                </ol>
+                            </li>
+                        </ol>
+                        <ol class="m-col-t-6 m-col-m-none" start="6">
+                            <li>
+                                <a href="#"><i class="fas fa-ellipsis-v"></i></a>
+                                <ol>
+                                    <li>Dark Theme
+                                        <div class="onoffswitch">
+                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
+                                            <label class="onoffswitch-label" for="myonoffswitch">
+                                                <span class="onoffswitch-inner"></span>
+                                                <span class="onoffswitch-switch"></span>
+                                            </label>
+                                        </div>
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+</header>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/web.xml b/src/main/webapp/WEB-INF/web.xml
index 391a545..4560e40 100644
--- a/src/main/webapp/WEB-INF/web.xml
+++ b/src/main/webapp/WEB-INF/web.xml
@@ -15,6 +15,16 @@
         <servlet-class>de.hsel.itech.servlet.Database</servlet-class>
     </servlet>
 
+    <servlet>
+        <servlet-name>booklist</servlet-name>
+        <servlet-class>de.hsel.itech.servlet.BookList</servlet-class>
+    </servlet>
+
+    <servlet>
+        <servlet-name>addbook</servlet-name>
+        <servlet-class>de.hsel.itech.servlet.AddBook</servlet-class>
+    </servlet>
+
     <servlet-mapping>
         <servlet-name>helloWorld</servlet-name>
         <url-pattern>/index</url-pattern>
@@ -24,4 +34,14 @@
         <servlet-name>database</servlet-name>
         <url-pattern>/db</url-pattern>
     </servlet-mapping>
+
+    <servlet-mapping>
+        <servlet-name>booklist</servlet-name>
+        <url-pattern>/booklist</url-pattern>
+    </servlet-mapping>
+
+    <servlet-mapping>
+        <servlet-name>addbook</servlet-name>
+        <url-pattern>/addbook</url-pattern>
+    </servlet-mapping>
 </web-app>
\ No newline at end of file
diff --git a/src/main/webapp/preview/css/custom.css b/src/main/webapp/css/custom.css
similarity index 100%
rename from src/main/webapp/preview/css/custom.css
rename to src/main/webapp/css/custom.css
diff --git a/src/main/webapp/preview/css/m-components.css b/src/main/webapp/css/m-components.css
similarity index 100%
rename from src/main/webapp/preview/css/m-components.css
rename to src/main/webapp/css/m-components.css
diff --git a/src/main/webapp/preview/css/m-dark.compiled.css b/src/main/webapp/css/m-dark.compiled.css
similarity index 100%
rename from src/main/webapp/preview/css/m-dark.compiled.css
rename to src/main/webapp/css/m-dark.compiled.css
diff --git a/src/main/webapp/preview/css/m-dark.css b/src/main/webapp/css/m-dark.css
similarity index 100%
rename from src/main/webapp/preview/css/m-dark.css
rename to src/main/webapp/css/m-dark.css
diff --git a/src/main/webapp/preview/css/m-debug.css b/src/main/webapp/css/m-debug.css
similarity index 100%
rename from src/main/webapp/preview/css/m-debug.css
rename to src/main/webapp/css/m-debug.css
diff --git a/src/main/webapp/preview/css/m-doxygen.css b/src/main/webapp/css/m-doxygen.css
similarity index 100%
rename from src/main/webapp/preview/css/m-doxygen.css
rename to src/main/webapp/css/m-doxygen.css
diff --git a/src/main/webapp/preview/css/m-grid.css b/src/main/webapp/css/m-grid.css
similarity index 100%
rename from src/main/webapp/preview/css/m-grid.css
rename to src/main/webapp/css/m-grid.css
diff --git a/src/main/webapp/preview/css/m-layout.css b/src/main/webapp/css/m-layout.css
similarity index 100%
rename from src/main/webapp/preview/css/m-layout.css
rename to src/main/webapp/css/m-layout.css
diff --git a/src/main/webapp/preview/css/m-light.compiled.css b/src/main/webapp/css/m-light.compiled.css
similarity index 100%
rename from src/main/webapp/preview/css/m-light.compiled.css
rename to src/main/webapp/css/m-light.compiled.css
diff --git a/src/main/webapp/preview/css/m-light.css b/src/main/webapp/css/m-light.css
similarity index 100%
rename from src/main/webapp/preview/css/m-light.css
rename to src/main/webapp/css/m-light.css
diff --git a/src/main/webapp/preview/css/m-theme-dark.css b/src/main/webapp/css/m-theme-dark.css
similarity index 100%
rename from src/main/webapp/preview/css/m-theme-dark.css
rename to src/main/webapp/css/m-theme-dark.css
diff --git a/src/main/webapp/preview/css/m-theme-light.css b/src/main/webapp/css/m-theme-light.css
similarity index 100%
rename from src/main/webapp/preview/css/m-theme-light.css
rename to src/main/webapp/css/m-theme-light.css
diff --git a/src/main/webapp/preview/css/pygments-console.css b/src/main/webapp/css/pygments-console.css
similarity index 100%
rename from src/main/webapp/preview/css/pygments-console.css
rename to src/main/webapp/css/pygments-console.css
diff --git a/src/main/webapp/preview/css/pygments-dark.css b/src/main/webapp/css/pygments-dark.css
similarity index 100%
rename from src/main/webapp/preview/css/pygments-dark.css
rename to src/main/webapp/css/pygments-dark.css
diff --git a/src/main/webapp/preview/css/slick-theme.css b/src/main/webapp/css/slick-theme.css
similarity index 100%
rename from src/main/webapp/preview/css/slick-theme.css
rename to src/main/webapp/css/slick-theme.css
diff --git a/src/main/webapp/preview/book.html b/src/main/webapp/preview/book.html
index eb30c83..caf6525 100644
--- a/src/main/webapp/preview/book.html
+++ b/src/main/webapp/preview/book.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
diff --git a/src/main/webapp/preview/catalog.html b/src/main/webapp/preview/catalog.html
index f4c13b7..8574887 100644
--- a/src/main/webapp/preview/catalog.html
+++ b/src/main/webapp/preview/catalog.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
diff --git a/src/main/webapp/preview/confirmation.html b/src/main/webapp/preview/confirmation.html
index 28545cd..44553c8 100644
--- a/src/main/webapp/preview/confirmation.html
+++ b/src/main/webapp/preview/confirmation.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
diff --git a/src/main/webapp/preview/detailpage.html b/src/main/webapp/preview/detailpage.html
index 283bb9a..e42fc41 100644
--- a/src/main/webapp/preview/detailpage.html
+++ b/src/main/webapp/preview/detailpage.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
diff --git a/src/main/webapp/preview/login.html b/src/main/webapp/preview/login.html
index 623393a..df2ed05 100644
--- a/src/main/webapp/preview/login.html
+++ b/src/main/webapp/preview/login.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
diff --git a/src/main/webapp/preview/orderinfo.html b/src/main/webapp/preview/orderinfo.html
index 2bc3057..ccfad5c 100644
--- a/src/main/webapp/preview/orderinfo.html
+++ b/src/main/webapp/preview/orderinfo.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
diff --git a/src/main/webapp/preview/register.html b/src/main/webapp/preview/register.html
index 8fb71cd..177913a 100644
--- a/src/main/webapp/preview/register.html
+++ b/src/main/webapp/preview/register.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
diff --git a/src/main/webapp/preview/shoppingcart.html b/src/main/webapp/preview/shoppingcart.html
index ccd201c..e1b058e 100644
--- a/src/main/webapp/preview/shoppingcart.html
+++ b/src/main/webapp/preview/shoppingcart.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
diff --git a/src/main/webapp/preview/start.html b/src/main/webapp/preview/start.html
index b8ba79f..caa74b3 100644
--- a/src/main/webapp/preview/start.html
+++ b/src/main/webapp/preview/start.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
diff --git a/src/main/webapp/preview/thanksForBuyin.html b/src/main/webapp/preview/thanksForBuyin.html
index 1a2f3c8..1dfa652 100644
--- a/src/main/webapp/preview/thanksForBuyin.html
+++ b/src/main/webapp/preview/thanksForBuyin.html
@@ -3,12 +3,12 @@
 <head>
     <title>Amazon light</title>
 
-    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="../css/m-light.css" id="pagestyle"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
     <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-    <link href="css/custom.css" rel="stylesheet">
-    <link href="css/slick-theme.css" rel="stylesheet">
+    <link href="../css/custom.css" rel="stylesheet">
+    <link href="../css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">