diff --git a/src/main/webapp/preview/index.html b/src/main/webapp/preview/index.html
new file mode 100644
index 0000000..26a5fae
--- /dev/null
+++ b/src/main/webapp/preview/index.html
@@ -0,0 +1,559 @@
+﻿<!DOCTYPE html>
+<html>
+    <head>
+        <!--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" />
+
+        <!--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-->
+                    </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>
+                </div>
+            </nav>
+        </div>
+
+        <!--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>
+        </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-->
+        <!--Analyse-Cards-->
+        <div id="test1" class="row container">
+
+            <!--Übersicht-->
+            <div class="col s12 m12">
+                <div 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>
+                        <a href="#">Tagesübersicht</a>
+                    </div>
+                </div>
+            </div>
+
+            <!--Einkaufszeiten-->
+            <div class="col s12 m6">
+                <div class="card white">
+                    <div class="card-content">
+                        <div class="center">
+                            <span class="card-title">Einkaufszeiten</span>
+                        </div>
+                        <div class="center">
+                            <p>
+                                Dropdownmenü
+                            </p>
+                        </div>
+                        <div>
+                            <canvas id="Einkaufszeiten" width="1000" height="400"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!--Verkaufte Artikel-->
+            <div class="col s12 m6">
+                <div 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>
+                        <div>
+                            <canvas id="Kuchendiagramm" 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>
+                    <div class="card-action">
+                        <a href="#">Umsatz</a>
+                        <a href="#">Stückzahl</a>
+                    </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>
+                    <div class="card-action">
+                        <a href="#">Umsatz</a>
+                        <a href="#">Stückzahl</a>
+                    </div>
+                </div>
+            </div>
+
+            <!--Warenkorbanlyse-->
+            <div class="col s12 m6">
+                <div class="card white">
+                    <div class="card-content">
+                        <div class="center">
+                            <span class="card-title center">Warenkorbanalyse</span>
+                        </div>
+                        <div>
+                            <p>Coming Soon</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!--Gruppenübersicht-->
+            <div class="col s12 m6">
+                <div class="card white">
+                    <div class="card-content">
+                        <div class="center">
+                            <span class="card-title center">Gruppenübersicht</span>
+                        </div>
+                        <div>
+                            <p>Coming Soon</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!--Marketing-Cards-->
+        <div id="test2" class="row container">
+            <div class="col s12 m6">
+                <div class="card white">
+                    <div class="card-content">
+                        <div class="center">
+                            <span class="card-title center">Marketingmaßnahme 1</span>
+                        </div>
+                        <div>
+                            <p>Coming Soon</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col s12 m6">
+                <div class="card white">
+                    <div class="card-content">
+                        <div class="center">
+                            <span class="card-title center">Marketingmaßnahme 1</span>
+                        </div>
+                        <div>
+                            <p>Coming Soon</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col s12 m6">
+                <div class="card white">
+                    <div class="card-content">
+                        <div class="center">
+                            <span class="card-title center">Marketingmaßnahme 1</span>
+                        </div>
+                        <div>
+                            <p>Coming Soon</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col s12 m6">
+                <div class="card white">
+                    <div class="card-content">
+                        <div class="center">
+                            <span class="card-title center">Marketingmaßnahme 1</span>
+                        </div>
+                        <div>
+                            <p>Coming Soon</p>
+                        </div>
+                    </div>
+                </div>
+            </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.––>
+
+        <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 Materlialize-->
+        <script type="text/javascript" src="../../../../../../OneDrive/Desktop/SPM%20GUI/js/materialize.min.js"></script>
+
+        <!–– Ende Skriptbereich ––>
+    </body>
+</html>
diff --git a/src/main/webapp/preview/logoOrginal.gif b/src/main/webapp/preview/logoOrginal.gif
new file mode 100644
index 0000000..2fbc6e1
Binary files /dev/null and b/src/main/webapp/preview/logoOrginal.gif differ
