diff --git a/express-server/public/javascripts/ajax.js b/express-server/public/javascripts/ajax.js
index 631a5654..3abdd961 100644
--- a/express-server/public/javascripts/ajax.js
+++ b/express-server/public/javascripts/ajax.js
@@ -68,7 +68,6 @@ $(document).ready(function() {
 
         // let name = $("#groupname").val();
         // let color = $("#groupfarbe").val();
-        $("#ListenDetailAdd").modal("hide");
         
         $.ajax({
             type: "POST",
@@ -80,7 +79,7 @@ $(document).ready(function() {
             },
             success(res){
                 console.log("groupadd funktioniert");
-                
+                $("#mySmallModalLabel").modal("hide");
             },
             error(err){
                 console.log("error");
@@ -127,7 +126,7 @@ function eigeneEinkaufslisten(){
                 
                                 $(".listen-ausgabe").append(`<div class="col-md-12 karten">
                                 <div class="card border-light mb-3" style="max-width: 18rem;" id="${el.sl_id}">
-                                    <div class="card-header" style="background-color: #b3b3b3;">
+                                    <div class="card-header">
                                     <span>
                                     <img src="${picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                         ${userinfo}</span>
@@ -211,7 +210,6 @@ function lala(){
         let card = $(this).closest(".card");
         let id = card.attr("id");
         globaleAddZwischenID = id;
-        $("#groupname").val("");
     });
 }
 
@@ -255,7 +253,10 @@ function Detail(){
 
                                     var link = "/dash/"+idtoken;
 
-                                    $(".card-header").append(`<div class="shoplistid" id="${id}" style="background-color:#b3b3b3">
+                                    //ITEM ADD
+                                    // von Card Header Kopiert
+
+                                    $(".card-header").append(`<div class="shoplistid" id="${id}">
                                         <a href="${link}" style="left: 5px; margin-top: -50px">
                                             <i class="fas fa-caret-left"></i>
                                         </a>
@@ -268,15 +269,12 @@ function Detail(){
                                     `);
                                     for (let i = 0; i < res.groups.length; i++) {
                                         const el = res.groups[i];
-                                        $(".gruppeninhalt").append(`<div class="col-md-6 col-lg-4 shoplisteid" id="${res.sl_id}">
-                                        <div class="card mb-3 groupid ${el.group_id}" id="${el.group_id}" style="max-width: 18rem;background-color:#${el.color};">
-
-                                            <div class="card-header"><h5 class="card-title">${el.name}</h5><button class="btn trashgroup"><i class="far fa-trash-alt"></i></button><button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
-                                                <div class="${el.name}">
-                                                </div>
-                                            </div>
-
-                                        </div></div>
+                                        $(".gruppeninhalt").append(`<div class="card mb-3" style="max-width: 18rem;background-color:#${el.color};">
+                                        <div class="card-header"><h5 class="card-title">${el.name}</h5><button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
+                                        <div class="${el.name}">
+                                        </div>
+                                        </div>
+                                      </div>
                                         `);
                                         for(let x = 0; x < el.content.length; x++){
                                             const el2 = el.content[x]
@@ -285,8 +283,7 @@ function Detail(){
                                         `);
                                     }
                                     }
-                                    ItemAdden();
-                                    groupdelete();
+                                    ItemAdden()
                                 },
                                 error(err){
                                     console.log("Detail error userinfo_json: ", err);
@@ -371,33 +368,4 @@ $(".itemhinzu").click(function(){
 
     Detail();
 
-});
-
-function groupdelete(){
-    $('.trashgroup').click(function(){
-        
-        let getid = $(this).closest('.shoplisteid');
-        let shoplistid = getid.attr('id');
-        let getid2 = $(this).closest('.groupid');
-        let groupid = getid2.attr('id');
-
-        console.log(shoplistid);
-        console.log(groupid);
-
-        $.ajax({
-            type: "DELETE",
-            url: "/group",
-            data: {
-                sl_id: shoplistid,
-                group_id: groupid},
-            success(res){
-                console.log("card gelöscht");
-                $(`.${groupid}`).remove();
-            },
-            error(err){
-                console.log("error");
-            }
-        });
-
-    });
-};
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/express-server/public/stylesheets/colorpicker-style.css b/express-server/public/stylesheets/colorpicker-style.css
index 6dc42c32..050ab98e 100644
--- a/express-server/public/stylesheets/colorpicker-style.css
+++ b/express-server/public/stylesheets/colorpicker-style.css
@@ -38,19 +38,13 @@ input[type="radio"] {
   input[type="radio"]:checked + label .farbe7 {
     border: 1px solid black;
   }
-  input[type="radio"]:checked + label .farbe8 {
+  input[type="radio"]:checked + label .violet {
     border: 1px solid black;
   }
-  input[type="radio"]:checked + label .farbe9 {
+  input[type="radio"]:checked + label .purple {
     border: 1px solid black;
   }
-  input[type="radio"]:checked + label .farbe10 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .farbe11 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .farbe12 {
+  input[type="radio"]:checked + label .pink {
     border: 1px solid black;
   }
   label {
@@ -87,21 +81,15 @@ input[type="radio"] {
   label span.farbe6 {
     background: #2196F3;
   }
-  label span.farbe7 {
-    background: #03a9f4;
+  label span.blue {
+    background: #03A9F4;
   }
-  label span.farbe8 {
-    background: #00bcd4;
+  label span.violet {
+    background: #00BCD4;
   }
-  label span.farbe9 {
+  label span.purple {
     background: #009688;
   }
-  label span.farbe10 {
-    background: #4caf50;
-  }
-  label span.farbe11 {
-    background: #8bc34a;
-  }
-  label span.farbe12 {
-    background: #cddc39;
+  label span.pink {
+    background: #4CAF50;
   }
\ No newline at end of file
diff --git a/express-server/public/stylesheets/style.css b/express-server/public/stylesheets/style.css
index 49d566e8..169545a7 100644
--- a/express-server/public/stylesheets/style.css
+++ b/express-server/public/stylesheets/style.css
@@ -60,15 +60,4 @@
 
 .farbeeen{
     margin-left: 19px;
-}
-
-.spez-farbe{
-    background-color: #b3b3b3;
-}
-
-.trashgroup{
-    background: transparent;
-    position: absolute;
-    right:23px;
-    margin-top:-40px;
 }
\ No newline at end of file
diff --git a/express-server/views/dash.ejs b/express-server/views/dash.ejs
index 415a3b14..91cc5c1a 100644
--- a/express-server/views/dash.ejs
+++ b/express-server/views/dash.ejs
@@ -13,7 +13,7 @@
   <body id="vue-app">
 
     <!-- Navbar -->
-    <nav class="navbar sticky-top navbar-light spez-farbe" style="background-color:rgb(200, 200, 201)">
+    <nav class="navbar sticky-top navbar-light bg-light" style="background-color:rgb(200, 200, 201)">
         <a class="navbar-brand" id="dashurl">
             <div class="logo-image">
                 <img src="/images/Logo.png" class="img-fluid">
@@ -33,7 +33,7 @@
     <br>
 
     <!-- alle cards-->
-    <div class="row justify-content-center cardausgabe">
+    <div class="container justify-content-center cardausgabe">
         <div class="card-columns">
             <div class="listen-ausgabe">
             </div>
@@ -43,20 +43,16 @@
     <!-- detail card -->
     <div class="row justify-content-center ">
         <div class="card border-light mb-3 detailcardausgabe" style="width: 50rem;">
-            <div class="card-header" style="background-color: #b3b3b3;"></div>
+            <div class="card-header"></div>
 
-            <div class="card-body text-dark">
-                <div class="row justify-content-center gruppeninhalt">
-                    
-                </div>
-            </div>
+            <div class="card-body text-dark gruppeninhalt"></div>
                 
         </div>
     </div>
 
 
     <!-- Modal Group Hinzufügen -->
-    <div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog" aria-labelledby="ListenDetailAdd" aria-hidden="true">
+    <div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
                 <div>
@@ -72,7 +68,7 @@
                       <div class="farbeeen">
                             
                         <input type="radio" name="color" id="farbe1" value="F44336" />
-                        <label for="farbe1"><span class="farbe1"></span></label>
+                        <label for="farbe1"><span class="farbe1 border"></span></label>
     
                         <input type="radio" name="color" id="farbe2" value="e91e63" />
                         <label for="farbe2"><span class="farbe2"></span></label>
@@ -89,25 +85,25 @@
                         <input type="radio" name="color" id="farbe6" value="2196F3" />
                         <label for="farbe6"><span class="farbe6"></span></label>
 
-                        <br> 
+                        <!-- <br> 
     
-                        <input type="radio" name="color" id="farbe7" value="03a9f4" />
-                        <label for="farbe7"><span class="farbe7"></span></label>
+                        <input type="radio" name="color" id="violet" value="violet" />
+                        <label for="violet"><span class="violet"></span></label>
     
-                        <input type="radio" name="color" id="farbe8" value="00bcd4" />
-                        <label for="farbe8"><span class="farbe8"></span></label>
+                        <input type="radio" name="color" id="purple" value="purple" />
+                        <label for="purple"><span class="purple"></span></label>
     
-                        <input type="radio" name="color" id="farbe9" value="009688" />
-                        <label for="farbe9"><span class="farbe9"></span></label>
+                        <input type="radio" name="color" id="pink" value="pink" />
+                        <label for="pink"><span class="pink"></span></label>
 
-                        <input type="radio" name="color" id="farbe10" value="4caf50" />
-                        <label for="farbe10"><span class="farbe10"></span></label>
+                        <input type="radio" name="color" id="blue" value="blue" />
+                        <label for="blue"><span class="blue"></span></label>
     
-                        <input type="radio" name="color" id="farbe11" value="8bc34a" />
-                        <label for="farbe11"><span class="farbe11"></span></label>
+                        <input type="radio" name="color" id="violet" value="violet" />
+                        <label for="violet"><span class="violet"></span></label>
     
-                        <input type="radio" name="color" id="farbe12" value="cddc39" />
-                        <label for="farbe12"><span class="farbe12"></span></label>
+                        <input type="radio" name="color" id="purple" value="purple" />
+                        <label for="purple"><span class="purple"></span></label> -->
 
                         </div>
                     </div>
@@ -122,7 +118,7 @@
 
 
     <!-- Modal Item Hinzufügen -->
-    <div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog" aria-labelledby="GroupItemAdd" aria-hidden="true">
+    <div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
                 <div class="inhalt">