diff --git a/src/main/webapp/preview/index.html b/src/main/webapp/preview/index.html
index 26a5fae..1bb7406 100644
--- a/src/main/webapp/preview/index.html
+++ b/src/main/webapp/preview/index.html
@@ -4,128 +4,120 @@
         <!--Import Google Icon Font-->
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <!--Import materialize.css-->
-        <link type="text/css" rel="stylesheet" href="../../../../../../OneDrive/Desktop/SPM%20GUI/css/materialize.min.css" media="screen,projection" />
+        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
 
         <!--Let browser know website is optimized for mobile-->
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <!--Script für die Diagramme-->
-        <script src="../../../../../../OneDrive/Desktop/SPM%20GUI/dist/Chart.bundle.js"></script>
 
     </head>
     <body class="blue-grey lighten-5">
-
-        <!--Navbar-->
-        <!--Die Navbar besteht aus 2 Navbars. Das habe ich so umgestzt, da das Suchfeld die komplette Navbar umfasst und sonst die Anderen Tabs verdeckt.
-    Um die Navbar zu fixieren wir ein äußere Wrapper benutzt.-->
-        <div class="navbar-fixed row">
-            <nav class="blue-grey lighten-3 white-text">
-
-                <!--Navbar Items-->
-                <div class="nav-wrapper col s1 m1 l6">
-                    <!--Dieses Icon wird nur auf kleinen Bildschirmen(oder bei hohem Zoom) angezeigt, und erstzt die Items in der Navbar-->
-                    <a href="#" data-target="sidebar" class="sidenav-trigger"><i class="material-icons">menu</i></a>
-                    <ul id="nav-mobile" class="hide-on-med-and-down">
-                        <li><a><i class="material-icons">person</i></a></li><!--Login-->
-                        <li><a class="dropdown-trigger" href="#!" data-target="dropdown_groups">Gruppen<i class="material-icons right">arrow_drop_down</i></a></li><!--Auswahl der Personengruppen-->
-                        <li><a class="dropdown-trigger" href="#!" data-target="dropdown_data_set">Datensatz<i class="material-icons right">arrow_drop_down</i></a></li><!--Auswahl der Datensätze-->
-                        <li><a class="dropdown-trigger" href="#!" data-target="dropdown_menu">Menü<i class="material-icons right">arrow_drop_down</i></a></li><!--Menü zum Navigieren auf der Page-->
+    <!--Navbar-->
+        <div class="navbar-fixed">
+            <nav class="nav-extended blue-grey lighten-3 white-text row">
+                <a href="#" class="brand-logo hide-on-small-and-down center">BauDas</a>
+                <!--Navbar Tabs-->
+                <div class="nav-content col 12 ">
+                    <ul class="tabs tabs-transparent blue-grey lighten-3 white-text">
+                        <li class="tab"><a class="active" href="#analysis"><i class="material-icons left">poll</i>Analyse</a></li>
+                        <li class="tab"><a href="#marketing"><i class="material-icons left">public</i>Marketing</a></li>
                     </ul>
                 </div>
-
-                <!--Navbar Searchbar-->
-                <div class="nav-wrapper col s11 m11 l6">
-                    <form>
-                        <div class="input-field">
-                            <input id="search" type="search" required>
-                            <label class="label-icon" for="search"><i class="material-icons">search</i></label>
-                            <i class="material-icons">close</i>
-                        </div>
-                    </form>
+                <!--Navbar Items-->
+                <div class="nav-wrapper col 2 right">
+                    <ul class="right hide-on-med-and-down">
+                        <li><a data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons left">menu</i>Menü</a></li><!--Sidenav-->
+                        <li><a><i class="material-icons left">person_outline</i>Logout</a></li><!--Logout-->
+                    </ul>
+                    <ul class="right">
+                        <li><a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a></li><!--Sidenav-->
+                        <li><a href="#" class="sidenav-trigger"><i class="material-icons">person_outline</i></a></li><!--Logout-->
+                    </ul>
                 </div>
             </nav>
         </div>
+        <br>
 
-        <!--Navbar Dropdown Contents-->
-        <!--Menü-->
-        <ul id="dropdown_menu" class="dropdown-content">
-            <li><a href="#test1">Analysen</a></li>
-            <li><a href="#test2">Marketing-Strategien</a></li>
+        <!--Sidenav Content-->
+        <ul id="slide-out" class="sidenav">
+            <li><div class="user-view">
+                <div class="background">
+                    <img style="width: 100%" src="logoOrginal.gif">
+                </div>
+                <br>
+                <br>
+            </div></li>
+            <li><div class="divider"></div></li>
+            <li><div class="input-field container">
+                <label>Gruppenauswahl</label>
+                <br>
+                <select>
+                    <option value="0">alle</option>
+                    <option value="1">Gruppe 1</option>
+                    <option value="2">Gruppe 2</option>
+                    <option value="3">Gruppe 3</option>
+                </select>
+            </div></li>
+            <li><div class="input-field container">
+                <label>Datensatzauswahl</label>
+                <br>
+                <select>
+                    <option value="0">aktuell</option>
+                    <option value="1">Datensatz 1</option>
+                    <option value="2">Datensatz 2</option>
+                    <option value="3">Datensatz 3</option>
+                    <option value="4">Datensatz 4</option>
+                    <option value="5">Datensatz 5</option>
+                </select>
+                <br>
+            </div></li>
         </ul>
 
-        <!--Datensätze-->
-        <ul id="dropdown_data_set" class="dropdown-content">
-            <li class="tab"><a href="#">aktuell</a></li>
-            <li class="divider"></li>
-            <li class="tab"><a href="#">1.Datensatz</a></li>
-            <li class="tab"><a href="#">2.Datensatz</a></li>
-            <li class="tab"><a href="#">3.Datensatz</a></li>
-            <li class="tab"><a href="#">4.Datensatz</a></li>
-            <li class="tab"><a href="#">5.Datensatz</a></li>
-        </ul>
-
-        <!--Gruppen-->
-        <ul id="dropdown_groups" class="dropdown-content">
-            <li class="tab"><a href="#">Gesamt</a></li>
-            <li class="tab"><a href="#">Gruppe 1</a></li>
-            <li class="tab"><a href="#">Gruppe 2</a></li>
-            <li class="tab"><a href="#">Gruppe 3</a></li>
-        </ul>
-
-        <!--Navbar Sidebar Contents-->
-        <ul class="sidenav" id="sidebar">
-            <li><a class="dropdown-trigger" data-target="dropdown_groups" href="!#">Gruppen<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="dropdown-trigger" data-target="dropdown_data_set" href="!#">Datensatz<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="dropdown-trigger" data-target="dropdown_menu" href="!#">Menü<i class="material-icons right">arrow_drop_down</i></a></li>
-        </ul>
-
-        <!--BauDasLogo-->
-        <div class="center">
-            <a href="" class="brand-logo center"><img src="../../../../../../OneDrive/Desktop/SPM%20GUI/logoOrginal.gif"></a>
-        </div>
-
-        <!--Diagramm-Cards-->
-        <!--Die verschiedenen Diagramme werdin in Cards augeteilt. Die Cards befinden sich je nach Katgorie in verschiedenen Containern-->
+        <!--Cards-->
         <!--Analyse-Cards-->
-        <div id="test1" class="row container">
-
+        <div id="analysis" class="row container">
             <!--Übersicht-->
             <div class="col s12 m12">
-                <div class="card white">
+                <div id="overview" class="card white">
                     <div class="center">
                         <span class="card-title center">Übersicht</span>
                     </div>
-                    <div class="card-conten">
-                        <div>
-                            <canvas id="Übersicht_Chart" width="1000" height="400"></canvas>
-                        </div>
-                        <div class="center">
-                            <p>
-                                Dropdownmenü
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card-action">
-                        <a href="#">Wochenübersicht</a>
+                    <div class="card-action center">
                         <a href="#">Tagesübersicht</a>
+                        <a href="#">Wochenübersicht</a>
+                    </div>
+                    <div class="card-content">
+                        <div>
+                            <canvas id="overview_chart" width="1000" height="400"></canvas>
+                        </div>
                     </div>
                 </div>
             </div>
 
             <!--Einkaufszeiten-->
             <div class="col s12 m6">
-                <div class="card white">
+                <div id="shoping_times" class="card white">
                     <div class="card-content">
                         <div class="center">
                             <span class="card-title">Einkaufszeiten</span>
                         </div>
                         <div class="center">
-                            <p>
-                                Dropdownmenü
-                            </p>
+                            <div class="input-field col s12">
+                                <select>
+                                    <option value="0">Montag</option>
+                                    <option value="1">Dienstag</option>
+                                    <option value="2">Mittwoch</option>
+                                    <option value="3">Donnerstag</option>
+                                    <option value="4">Freitag</option>
+                                    <option value="5">Samstag</option>
+                                    <option value="6">Sonntag</option>
+                                </select>
+                                <label>Wochentag</label>
+                            </div>
                         </div>
                         <div>
-                            <canvas id="Einkaufszeiten" width="1000" height="400"></canvas>
+                            <canvas id="shoping_times_chart" width="1000" height="400"></canvas>
                         </div>
                     </div>
                 </div>
@@ -133,62 +125,66 @@
 
             <!--Verkaufte Artikel-->
             <div class="col s12 m6">
-                <div class="card white">
+                <div id="sold_articles" class="card white">
                     <div class="card-content">
                         <div class="center">
                             <span class="card-title center">Verkaufte Artikel</span>
                         </div>
                         <div class="center">
-                            <p>
-                                Dropdownmenü
-                            </p>
+                            <div class="input-field col s12">
+                                <select>
+                                    <option value="0">Artikel 1</option>
+                                    <option value="1">Artikel 2</option>
+                                    <option value="2">Artikel 3</option>
+                                </select>
+                                <label>Artikel</label>
+                            </div>
                         </div>
                         <div>
-                            <canvas id="Kuchendiagramm" width="1000" height="400"></canvas>
+                            <canvas id="sold_articles_cake" width="1000" height="400"></canvas>
                         </div>
                     </div>
-
                 </div>
             </div>
 
             <!--Top Artikel-->
             <div class="col s12 m6">
-                <div class="card white">
-                    <div class="card-content">
-                        <div class="center">
-                            <span class="card-title center">Top Artikel</span>
-                        </div>
-                        <div>
-                            <canvas id="TopArtikel" width="1000" height="400"></canvas>
-                        </div>
+                <div id="top_articles" class="card white">
+                    <div class="center">
+                        <span class="card-title center">Top Artikel</span>
                     </div>
-                    <div class="card-action">
+                    <div class="card-action center">
                         <a href="#">Umsatz</a>
                         <a href="#">Stückzahl</a>
                     </div>
+                    <div class="card-content">
+                        <div>
+                            <canvas id="top_articles_chart" width="1000" height="400"></canvas>
+                        </div>
+                    </div>
                 </div>
             </div>
 
             <!--Flop Artikel-->
             <div class="col s12 m6">
-                <div class="card white">
-                    <div class="card-content">
-                        <div class="center">
-                            <span class="card-title center">Flop Artikel</span>
-                        </div>
-                        <div>
-                            <canvas id="FlopArtikel" width="1000" height="400"></canvas>
-                        </div>
+                <div id="flop_articles" class="card white">
+                    <div class="center">
+                        <span class="card-title center">Flop Artikel</span>
                     </div>
-                    <div class="card-action">
+                    <div class="card-action center">
                         <a href="#">Umsatz</a>
                         <a href="#">Stückzahl</a>
                     </div>
+                    <div class="card-content">
+                        <div>
+                            <canvas id="flop_articles_chart" width="1000" height="400"></canvas>
+                        </div>
+                    </div>
                 </div>
             </div>
 
             <!--Warenkorbanlyse-->
-            <div class="col s12 m6">
+            <div id="shopping_card_analysis" class="col s12 m6">
                 <div class="card white">
                     <div class="card-content">
                         <div class="center">
@@ -203,7 +199,7 @@
 
             <!--Gruppenübersicht-->
             <div class="col s12 m6">
-                <div class="card white">
+                <div id="group_overview" class="card white">
                     <div class="card-content">
                         <div class="center">
                             <span class="card-title center">Gruppenübersicht</span>
@@ -217,9 +213,10 @@
         </div>
 
         <!--Marketing-Cards-->
-        <div id="test2" class="row container">
+        <div id="marketing" class="row container">
+
             <div class="col s12 m6">
-                <div class="card white">
+                <div id="marketing_tip_1" class="card white">
                     <div class="card-content">
                         <div class="center">
                             <span class="card-title center">Marketingmaßnahme 1</span>
@@ -231,10 +228,10 @@
                 </div>
             </div>
             <div class="col s12 m6">
-                <div class="card white">
+                <div id="marketing_tip_2" class="card white">
                     <div class="card-content">
                         <div class="center">
-                            <span class="card-title center">Marketingmaßnahme 1</span>
+                            <span class="card-title center">Marketingmaßnahme 2</span>
                         </div>
                         <div>
                             <p>Coming Soon</p>
@@ -243,10 +240,10 @@
                 </div>
             </div>
             <div class="col s12 m6">
-                <div class="card white">
+                <div id="marketing_tip_3" class="card white">
                     <div class="card-content">
                         <div class="center">
-                            <span class="card-title center">Marketingmaßnahme 1</span>
+                            <span class="card-title center">Marketingmaßnahme 3</span>
                         </div>
                         <div>
                             <p>Coming Soon</p>
@@ -255,10 +252,10 @@
                 </div>
             </div>
             <div class="col s12 m6">
-                <div class="card white">
+                <div id="marketing_tip_4" class="card white">
                     <div class="card-content">
                         <div class="center">
-                            <span class="card-title center">Marketingmaßnahme 1</span>
+                            <span class="card-title center">Marketingmaßnahme 4</span>
                         </div>
                         <div>
                             <p>Coming Soon</p>
@@ -268,292 +265,21 @@
             </div>
         </div>
 
-        <!––Skriptbereich der einzelnen Statistiken, nach den Canvas-Objekten. Hier werden die einzelnen Diagramme
-        konfiguriert, welche von der Chart.js berechnet und anschließend an Canvas übergeben werden sollen.––>
+        <!--Anfang Skriptbereich-->
 
-        <script>
-            var ctx = document.getElementById("Übersicht_Chart");
-            var Übersicht_Chart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: ["1 Jan", "2 Jan", "3 Jan", "4 Jan", "5 Jan", "6 Jan"],
-                    datasets: [{
-                        label: "Warenanzahl",
-                        data: [200, 150, 190, 99, 142, 222],
-                        fill: true,
-                        backgroundColor: 'rgba(113, 114, 231, 0.7)',
-                        lineTension: 0,
-                    }, {
-                        label: "Einnahmen in €",
-                        data: [434, 300, 324, 198, 349, 353],
-                        fill: true,
-                        backgroundColor: 'rgba(104, 216, 154, 0.8)',
-                        lineTension: 0,
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    title: {
-                        display: false,
-                        text: 'Übersicht'
-                    },
-                    legend: {
-                        display: false
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false,
-                    },
-                    hover: {
-                        mode: 'nearest',
-                        intersect: true
-                    },
-                    elements: {
-                        point: {
-                            radius: 0
-                        }
-                    },
-                    scales: {
-                        xAxes: [{
-                            display: true,
-                            gridLines: {
-                                display: false
-                            }
-                        }],
-                        yAxes: [{
-                            display: true,
-                        }]
-                    }
-                }
-            });
-        </script>
-
-        <script>
-            var ctx = document.getElementById("Kuchendiagramm");
-            var Kuchendiagramm = new Chart(ctx, {
-                type: 'pie',
-                data: {
-                    datasets: [{
-                        data: [
-                            2055,
-                            816,
-                            953,
-                        ],
-                        backgroundColor: [
-                            'rgba(237, 125, 49, 0.9)',
-                            'rgba(255, 192, 0, 0.9)',
-                            'rgba(112, 173, 71, 0.9)',
-                        ],
-                        label: 'Dataset 1'
-                    }],
-                    labels: [
-                        'Gruppe 1',
-                        'Gruppe 2',
-                        'Gruppe 3',
-
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    title: {
-                        display: false,
-                        text: 'Verkaufte Artikel',
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false,
-                    },
-                    hover: {
-                        mode: 'nearest',
-                        intersect: true
-                    },
-                    legend: {
-                        position: 'bottom'
-                    }
-                }
-            });
-        </script>
-
-        <script>
-            var ctx = document.getElementById("Einkaufszeiten");
-            var Einkaufszeiten = new Chart(ctx, {
-                type: 'bar',
-                data: {
-                    labels: ['8-9', '9-10', '10-11', '11-12', '12-13', '13-14'],
-                    datasets: [{
-                        label: 'Anzahl verkaufter Artikel',
-                        data: [12, 19, 3, 5, 2, 3],
-                        backgroundColor: [
-                            'rgba(143, 170, 220, 0.9)',
-                            'rgba(255, 50, 1, 0.9)',
-                            'rgba(143, 170, 220, 0.9)',
-                            'rgba(143, 170, 220, 0.9)',
-                            'rgba(103, 215, 153, 0.9)',
-                            'rgba(143, 170, 220, 0.9)',
-                        ],
-                        borderColor: [
-                            'rgba(143, 170, 220, 0.9)',
-                            'rgba(255, 50, 1, 1)',
-                            'rgba(143, 170, 220, 1)',
-                            'rgba(143, 170, 220, 1)',
-                            'rgba(103, 215, 153, 1)',
-                            'rgba(143, 170, 220, 1)',
-                        ],
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    title: {
-                        display: false,
-                        text: 'Einkaufszeiten'
-                    },
-                    legend: {
-                        display: false
-                    },
-                    scales: {
-                        yAxes: [{
-                            categoryPercentage: 1.0,
-                            barPercentage: 0.5,
-                            ticks: {
-                                beginAtZero: true
-                            }
-                        }],
-                        xAxes: [{
-                            gridLines: {
-                                display: false
-                            },
-                        }]
-                    }
-                }
-            });
-        </script>
-
-        <script>
-            var ctx = document.getElementById("TopArtikel");
-            var TopArtikel = new Chart(ctx, {
-                type: 'horizontalBar',
-                data: {
-                    labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',],
-                    datasets: [{
-                        label: 'Gartengeräte',
-                        backgroundColor: 'rgba(244, 177, 131, 1)',
-                        stack: 'Stack 0',
-                        data: [
-                            150,
-                            50,
-                            50,
-                            50
-                        ]
-                    }, {
-                        label: 'Eisenwaren',
-                        backgroundColor: 'rgba(255, 217, 102, 1)',
-                        stack: 'Stack 1',
-                        data: [
-                            120,
-                            10,
-                            80,
-                            30
-                        ]
-                    }, {
-                        label: 'Baumaterialien',
-                        backgroundColor: 'rgba(196, 209, 142, 1)',
-                        stack: 'Stack 2',
-                        data: [
-                            200,
-                            102,
-                            53,
-                            45
-                        ]
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    title: {
-                        display: false,
-                        text: 'Top Artikel'
-                    },
-                    legend: {
-                        position: 'bottom',
-                    },
-                    scales: {
-                        yAxes: [{
-                            gridLines: {
-                                display: false
-                            },
-                            ticks: {
-                                beginAtZero: true
-                            }
-                        }]
-                    }
-                }
-            });
-        </script>
-
-        <script>
-            var ctx = document.getElementById("FlopArtikel");
-            var FlopArtikel = new Chart(ctx, {
-                type: 'horizontalBar',
-                data: {
-                    labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',],
-                    datasets: [{
-                        label: 'Holz',
-                        backgroundColor: 'rgba(244, 177, 131, 1)',
-                        stack: 'Stack 0',
-                        data: [
-                            50,
-                            10,
-                            20,
-                            30
-                        ]
-                    }, {
-                        label: 'Eisenwaren',
-                        backgroundColor: 'rgba(255, 217, 102, 1)',
-                        stack: 'Stack 1',
-                        data: [
-                            30,
-                            5,
-                            20,
-                            5
-                        ]
-                    }, {
-                        label: 'Baumaterialien',
-                        backgroundColor: 'rgba(196, 209, 142, 1)',
-                        stack: 'Stack 2',
-                        data: [
-                            80,
-                            20,
-                            30,
-                            30
-                        ]
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    title: {
-                        display: false,
-                        text: 'Flop Artikel'
-                    },
-                    legend: {
-                        position: 'bottom',
-                    },
-                    scales: {
-                        yAxes: [{
-                            gridLines: {
-                                display: false
-                            },
-                            ticks: {
-                                beginAtZero: true
-                            }
-                        }]
-                    }
-                }
-            });
-        </script>
+        <!--Script für Diagramme-->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
+        <script src="js/overview.js"></script>
+        <script src="js/shoping_times.js"></script>
+        <script src="js/sold_articles.js"></script>
+        <script src="js/top_articles.js"></script>
+        <script src="js/flop_articles.js"></script>
 
         <!--Script für Materlialize-->
-        <script type="text/javascript" src="../../../../../../OneDrive/Desktop/SPM%20GUI/js/materialize.min.js"></script>
+        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+        <script type="text/javascript" src="js/materialize_components.js"></script>
 
-        <!–– Ende Skriptbereich ––>
+        <!--Ende Skriptbereich-->
     </body>
 </html>
diff --git a/src/main/webapp/preview/js/flop_articles.js b/src/main/webapp/preview/js/flop_articles.js
new file mode 100644
index 0000000..d54d92e
--- /dev/null
+++ b/src/main/webapp/preview/js/flop_articles.js
@@ -0,0 +1,58 @@
+var ctx = document.getElementById("flop_articles_chart");
+var flop_articles_chart = new Chart(ctx, {
+    type: 'horizontalBar',
+    data: {
+        labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',],
+        datasets: [{
+            label: 'Holz',
+            backgroundColor: 'rgba(244, 177, 131, 1)',
+            stack: 'Stack 0',
+            data: [
+                50,
+                10,
+                20,
+                30
+            ]
+        }, {
+            label: 'Eisenwaren',
+            backgroundColor: 'rgba(255, 217, 102, 1)',
+            stack: 'Stack 1',
+            data: [
+                30,
+                5,
+                20,
+                5
+            ]
+        }, {
+            label: 'Baumaterialien',
+            backgroundColor: 'rgba(196, 209, 142, 1)',
+            stack: 'Stack 2',
+            data: [
+                80,
+                20,
+                30,
+                30
+            ]
+        }]
+    },
+    options: {
+        responsive: true,
+        title: {
+            display: false,
+            text: 'Flop Artikel'
+        },
+        legend: {
+            position: 'bottom',
+        },
+        scales: {
+            yAxes: [{
+                gridLines: {
+                    display: false
+                },
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
\ No newline at end of file
diff --git a/src/main/webapp/preview/js/materialize_components.js b/src/main/webapp/preview/js/materialize_components.js
new file mode 100644
index 0000000..f438abd
--- /dev/null
+++ b/src/main/webapp/preview/js/materialize_components.js
@@ -0,0 +1,11 @@
+$(".dropdown-trigger").dropdown();
+$(document).ready(function(){
+    $('.sidenav').sidenav();
+});
+$('.tabs').tabs();
+$(document).ready(function(){
+    $('select').formSelect();
+});
+$(document).ready(function(){
+    $('.collapsible').collapsible();
+});
\ No newline at end of file
diff --git a/src/main/webapp/preview/js/overview.js b/src/main/webapp/preview/js/overview.js
new file mode 100644
index 0000000..c372936
--- /dev/null
+++ b/src/main/webapp/preview/js/overview.js
@@ -0,0 +1,54 @@
+var ctx = document.getElementById("overview_chart");
+var overview_chart = new Chart(ctx, {
+    type: 'line',
+    data: {
+        labels: ["1 Jan", "2 Jan", "3 Jan", "4 Jan", "5 Jan", "6 Jan"],
+        datasets: [{
+            label: "Warenanzahl",
+            data: [200, 150, 190, 99, 142, 222],
+            fill: true,
+            backgroundColor: 'rgba(113, 114, 231, 0.7)',
+            lineTension: 0,
+        }, {
+            label: "Einnahmen in €",
+            data: [434, 300, 324, 198, 349, 353],
+            fill: true,
+            backgroundColor: 'rgba(104, 216, 154, 0.8)',
+            lineTension: 0,
+        }]
+    },
+    options: {
+        responsive: true,
+        title: {
+            display: false,
+            text: 'Übersicht'
+        },
+        legend: {
+            display: false
+        },
+        tooltips: {
+            mode: 'index',
+            intersect: false,
+        },
+        hover: {
+            mode: 'nearest',
+            intersect: true
+        },
+        elements: {
+            point: {
+                radius: 0
+            }
+        },
+        scales: {
+            xAxes: [{
+                display: true,
+                gridLines: {
+                    display: false
+                }
+            }],
+            yAxes: [{
+                display: true,
+            }]
+        }
+    }
+});
\ No newline at end of file
diff --git a/src/main/webapp/preview/js/shoping_times.js b/src/main/webapp/preview/js/shoping_times.js
new file mode 100644
index 0000000..12d9cd3
--- /dev/null
+++ b/src/main/webapp/preview/js/shoping_times.js
@@ -0,0 +1,53 @@
+
+var ctx = document.getElementById("shoping_times_chart");
+var shoping_times_chart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: ['8-9', '9-10', '10-11', '11-12', '12-13', '13-14'],
+        datasets: [{
+            label: 'Anzahl verkaufter Artikel',
+            data: [12, 19, 3, 5, 2, 3],
+            backgroundColor: [
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(255, 50, 1, 0.9)',
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(103, 215, 153, 0.9)',
+                'rgba(143, 170, 220, 0.9)',
+            ],
+            borderColor: [
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(255, 50, 1, 1)',
+                'rgba(143, 170, 220, 1)',
+                'rgba(143, 170, 220, 1)',
+                'rgba(103, 215, 153, 1)',
+                'rgba(143, 170, 220, 1)',
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        responsive: true,
+        title: {
+            display: false,
+            text: 'Einkaufszeiten'
+        },
+        legend: {
+            display: false
+        },
+        scales: {
+            yAxes: [{
+                categoryPercentage: 1.0,
+                barPercentage: 0.5,
+                ticks: {
+                    beginAtZero: true
+                }
+            }],
+            xAxes: [{
+                gridLines: {
+                    display: false
+                },
+            }]
+        }
+    }
+});
diff --git a/src/main/webapp/preview/js/sold_articles.js b/src/main/webapp/preview/js/sold_articles.js
new file mode 100644
index 0000000..9aa2a03
--- /dev/null
+++ b/src/main/webapp/preview/js/sold_articles.js
@@ -0,0 +1,43 @@
+var ctx = document.getElementById("sold_articles_cake");
+var sold_articles_cake = new Chart(ctx, {
+    type: 'pie',
+    data: {
+        datasets: [{
+            data: [
+                2055,
+                816,
+                953,
+            ],
+            backgroundColor: [
+                'rgba(237, 125, 49, 0.9)',
+                'rgba(255, 192, 0, 0.9)',
+                'rgba(112, 173, 71, 0.9)',
+            ],
+            label: 'Dataset 1'
+        }],
+        labels: [
+            'Gruppe 1',
+            'Gruppe 2',
+            'Gruppe 3',
+
+        ]
+    },
+    options: {
+        responsive: true,
+        title: {
+            display: false,
+            text: 'Verkaufte Artikel',
+        },
+        tooltips: {
+            mode: 'index',
+            intersect: false,
+        },
+        hover: {
+            mode: 'nearest',
+            intersect: true
+        },
+        legend: {
+            position: 'bottom'
+        }
+    }
+});
\ No newline at end of file
diff --git a/src/main/webapp/preview/js/top_articles.js b/src/main/webapp/preview/js/top_articles.js
new file mode 100644
index 0000000..50f4d20
--- /dev/null
+++ b/src/main/webapp/preview/js/top_articles.js
@@ -0,0 +1,58 @@
+var ctx = document.getElementById("top_articles_chart");
+var top_articles_chart = new Chart(ctx, {
+    type: 'horizontalBar',
+    data: {
+        labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',],
+        datasets: [{
+            label: 'Gartengeräte',
+            backgroundColor: 'rgba(244, 177, 131, 1)',
+            stack: 'Stack 0',
+            data: [
+                150,
+                50,
+                50,
+                50
+            ]
+        }, {
+            label: 'Eisenwaren',
+            backgroundColor: 'rgba(255, 217, 102, 1)',
+            stack: 'Stack 1',
+            data: [
+                120,
+                10,
+                80,
+                30
+            ]
+        }, {
+            label: 'Baumaterialien',
+            backgroundColor: 'rgba(196, 209, 142, 1)',
+            stack: 'Stack 2',
+            data: [
+                200,
+                102,
+                53,
+                45
+            ]
+        }]
+    },
+    options: {
+        responsive: true,
+        title: {
+            display: false,
+            text: 'Top Artikel'
+        },
+        legend: {
+            position: 'bottom',
+        },
+        scales: {
+            yAxes: [{
+                gridLines: {
+                    display: false
+                },
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
\ No newline at end of file
