diff --git a/express-server/public/javascripts/ajax.js b/express-server/public/javascripts/ajax.js
index 3abdd961..631a5654 100644
--- a/express-server/public/javascripts/ajax.js
+++ b/express-server/public/javascripts/ajax.js
@@ -68,6 +68,7 @@ $(document).ready(function() {
 
         // let name = $("#groupname").val();
         // let color = $("#groupfarbe").val();
+        $("#ListenDetailAdd").modal("hide");
         
         $.ajax({
             type: "POST",
@@ -79,7 +80,7 @@ $(document).ready(function() {
             },
             success(res){
                 console.log("groupadd funktioniert");
-                $("#mySmallModalLabel").modal("hide");
+                
             },
             error(err){
                 console.log("error");
@@ -126,7 +127,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">
+                                    <div class="card-header" style="background-color: #b3b3b3;">
                                     <span>
                                     <img src="${picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                         ${userinfo}</span>
@@ -210,6 +211,7 @@ function lala(){
         let card = $(this).closest(".card");
         let id = card.attr("id");
         globaleAddZwischenID = id;
+        $("#groupname").val("");
     });
 }
 
@@ -253,10 +255,7 @@ function Detail(){
 
                                     var link = "/dash/"+idtoken;
 
-                                    //ITEM ADD
-                                    // von Card Header Kopiert
-
-                                    $(".card-header").append(`<div class="shoplistid" id="${id}">
+                                    $(".card-header").append(`<div class="shoplistid" id="${id}" style="background-color:#b3b3b3">
                                         <a href="${link}" style="left: 5px; margin-top: -50px">
                                             <i class="fas fa-caret-left"></i>
                                         </a>
@@ -269,12 +268,15 @@ function Detail(){
                                     `);
                                     for (let i = 0; i < res.groups.length; i++) {
                                         const el = res.groups[i];
-                                        $(".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>
+                                        $(".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>
                                         `);
                                         for(let x = 0; x < el.content.length; x++){
                                             const el2 = el.content[x]
@@ -283,7 +285,8 @@ function Detail(){
                                         `);
                                     }
                                     }
-                                    ItemAdden()
+                                    ItemAdden();
+                                    groupdelete();
                                 },
                                 error(err){
                                     console.log("Detail error userinfo_json: ", err);
@@ -368,4 +371,33 @@ $(".itemhinzu").click(function(){
 
     Detail();
 
-});
\ No newline at end of file
+});
+
+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
diff --git a/express-server/public/stylesheets/colorpicker-style.css b/express-server/public/stylesheets/colorpicker-style.css
index 050ab98e..b9193811 100644
--- a/express-server/public/stylesheets/colorpicker-style.css
+++ b/express-server/public/stylesheets/colorpicker-style.css
@@ -11,85 +11,97 @@ body {
   color: #333;
 } */
 input[type="radio"] {
-    display: none;
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label span {
-    transform: scale(1.25);
-  }
-  input[type="radio"]:checked + label .farbe1 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .farbe2 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .farbe3 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .farbe4 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .farbe5 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .farbe6 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .farbe7 {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .violet {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .purple {
-    border: 1px solid black;
-  }
-  input[type="radio"]:checked + label .pink {
-    border: 1px solid black;
-  }
-  label {
-    display: inline-block;
-    width: 25px;
-    height: 25px;
-    margin-right: 10px;
-    cursor: pointer;
-  }
-  label:hover span {
-    transform: scale(1.25);
-  }
-  label span {
-    display: block;
-    width: 100%;
-    height: 100%;
-    transition: transform 0.2s ease-in-out;
-  }
-  label span.farbe1 {
-    background: #F44336;
-  }
-  label span.farbe2 {
-    background: #e91e63;
-  }
-  label span.farbe3 {
-    background: #9c27b0;
-  }
-  label span.farbe4 {
-    background: #673ab7;
-  }
-  label span.farbe5 {
-    background: #3F51B5;
-  }
-  label span.farbe6 {
-    background: #2196F3;
-  }
-  label span.blue {
-    background: #03A9F4;
-  }
-  label span.violet {
-    background: #00BCD4;
-  }
-  label span.purple {
-    background: #009688;
-  }
-  label span.pink {
-    background: #4CAF50;
-  }
\ No newline at end of file
+  display: none;
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label span {
+  transform: scale(1.25);
+}
+input[type="radio"]:checked + label .farbe1 {
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label .farbe2 {
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label .farbe3 {
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label .farbe4 {
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label .farbe5 {
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label .farbe6 {
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label .farbe7 {
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label .farbe8 {
+  border: 1px solid black;
+}
+input[type="radio"]:checked + label .farbe9 {
+  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 {
+  border: 1px solid black;
+}
+label {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+label:hover span {
+  transform: scale(1.25);
+}
+label span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.2s ease-in-out;
+}
+label span.farbe1 {
+  background: #F44336;
+}
+label span.farbe2 {
+  background: #e91e63;
+}
+label span.farbe3 {
+  background: #9c27b0;
+}
+label span.farbe4 {
+  background: #673ab7;
+}
+label span.farbe5 {
+  background: #3F51B5;
+}
+label span.farbe6 {
+  background: #2196F3;
+}
+label span.farbe7 {
+  background: #03a9f4;
+}
+label span.farbe8 {
+  background: #00bcd4;
+}
+label span.farbe9 {
+  background: #009688;
+}
+label span.farbe10 {
+  background: #4caf50;
+}
+label span.farbe11 {
+  background: #8bc34a;
+}
+label span.farbe12 {
+  background: #cddc39;
+}
\ No newline at end of file
diff --git a/express-server/public/stylesheets/style.css b/express-server/public/stylesheets/style.css
index 169545a7..49d566e8 100644
--- a/express-server/public/stylesheets/style.css
+++ b/express-server/public/stylesheets/style.css
@@ -60,4 +60,15 @@
 
 .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