diff --git a/express-server/public/javascripts/ajax.js b/express-server/public/javascripts/ajax.js
index 540c5b98..093a8190 100644
--- a/express-server/public/javascripts/ajax.js
+++ b/express-server/public/javascripts/ajax.js
@@ -1,7 +1,36 @@
 $(document).ready(function() {
 
-    bekommen();
-    // loeschen();
+    eigeneEinkaufslisten();
+    geteilteEinkaufslisten();
+    $(".detailcardausgabe").hide();
+
+    $(".gruppenadd").click(function(){
+
+        // let name = $("#groupname").val();
+        // let color = $("#groupfarbe").val();
+        
+        $.ajax({
+            type: "POST",
+            url: "/group",
+            data: {
+                sl_id: globaleAddZwischenID,
+                name: $("#groupname").val(),
+                color: $("#groupfarbe").val()
+            },
+            success(res){
+                console.log("groupadd funktioniert");
+                $("#mySmallModalLabel").modal("hide");
+            },
+            error(err){
+                console.log("error");
+            }
+        });
+    });
+
+    $(".sl_add").click(function(){
+        $('#EigeneListeAdd').modal('show');
+    });
+
 
     $(".add").click(function(){
 
@@ -17,16 +46,7 @@ $(document).ready(function() {
             },
             success(res){
                 console.log("add funktioniert");
-                $("#mySmallModalLabel").modal("hide");
-                // $(".listen-ausgabe").append(`<div class="col-md-12 karten">
-                // <div class="card border-light mb-3" style="max-width: 18rem;">
-                //     <div class="card-header"><span>Username...</span><button class="btn trash r"><i class="far fa-trash-alt"></i></button></div>
-                //     <div class="card-body">
-                //         <h5 class="card-title">`+ $("#einkaufslistenname").val() +`</h5>
-                //         <p class="card-text">`+ $("#einkaufslistenbeschreibung").val() +`</p>
-                //     </div>
-                // </div></div>`
-                // )
+                $("#normalAdd").modal("hide");
             },
             error(err){ 
                 console.log("error");
@@ -37,33 +57,68 @@ $(document).ready(function() {
     
 });
 
-function bekommen(){
+var globaleAddZwischenID = "";
+// var globaleGetZwischenID = "";
+
+function eigeneEinkaufslisten(){
 
     $.ajax({
         type: "GET",
         url: "/myshoppinglists",
-        success(data){
-            console.log("get funktioniert");
-            for(let i = 0; i < data.length; i++){
-                const el = data[i];
+        success(res){
 
-                $(".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"><span>Username...</span><button class="btn trash r"><i class="far fa-trash-alt"></i></button></div>
-                    <div class="card-body">
-                        <h5 class="card-title">${el.name}</h5>
-                        <p class="card-text">${el.description}</p>
-                    </div>
-                </div></div>`
-                )
-            }
-            loeschen();
+                $.ajax({
+                    type: "GET",
+                    url: "/userinfo_json",
+                    success(data){
+                        let userinfo = data.profile.displayName
+                        console.log(userinfo);
+
+                        for(let i = 0; i < res.length; i++){
+                            const el = res[i];
+            
+                            $(".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">
+                                    <span>${userinfo}</span>
+                                    <button class="btn edit"><i class="fas fa-angle-down"></i></button>
+                                    <button class="btn trash"><i class="far fa-trash-alt"></i></button>
+                                    <button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-ellipsis-v"></i></button>
+                                </div>
+                                
+                                <div class="card-body">
+                                    <h5 class="card-title">${el.name}</h5>
+                                    <p class="card-text">${el.description}</p>
+                                </div>
+                            </div></div>`
+                            )
+                        }
+                        console.log("Eigene Einkaufslisten");
+                        loeschen();
+                        lala();
+                        Detail();
+                        // groupHinzufügen()
+                    }
+                })
         },
         error(err){
             console.log("error");
         }
     });
-}
+};
+
+function geteilteEinkaufslisten(){
+    $.ajax({
+        data: "GET",
+        url: "/sharedshoppinglists",
+        success(res){
+            console.log("Geteilte Einkaufslisten");
+        },
+        error(err){
+            console.log("error");
+        }
+    });
+};
 
 function loeschen(){
     $(".trash").click(function(){
@@ -80,13 +135,80 @@ function loeschen(){
                 sl_id: id},
             success(res){
                 console.log("card gelöscht");
-                // bekommen();
                 card.remove();
             },
             error(err){
-
+                console.log("error");
             }
         });
 
     });
+};
+
+function lala(){
+    $(".groupadd").click(function(){
+        let card = $(this).closest(".card");
+        let id = card.attr("id");
+        globaleAddZwischenID = id;
+    });
+}
+
+function Detail(){
+    $(".edit").click(function(){
+
+        $(".cardausgabe").hide();
+        $(".detailcardausgabe").show();
+
+        let card = $(this).closest(".card");
+        let id = card.attr("id");
+
+        $.ajax({
+            data: "GET",
+            url: "/shoppinglist_json/" + id,
+            success(res){
+
+                $.ajax({
+                    type: "GET",
+                    url: "/myshoppinglists",
+                    success(result){
+            
+                        $.ajax({
+                            type: "GET",
+                            url: "/userinfo_json",
+                            success(data){
+                                let userinfo = data.profile.displayName
+                                console.log(userinfo);
+            
+                                const neu = result.filter(obj => obj.sl_id === id);
+
+                                $(".card-header").append(`<h1 class="text-center">${neu[0].name}</h1><button class="btn itemadd"><ion-icon name="more" size="large"></ion-icon></button>
+                                `);
+                                for (let i = 0; i < res.length; i++) {
+                                    const el = res[i];
+                                    $(".card-text").append(`<div class="card border-dark mb-3 items" id="${el.group_id}" style="max-width: 18rem;">
+                                    <div class="card-body text-dark">
+                                      <h5 class="card-title text-center">${el.name}</h5>
+                                    </div>
+                                  </div>`);
+                                }
+                                ItemAdden()
+                            }
+                        })
+                    },
+                    error(err){
+                        console.log("error");
+                    }
+                });
+            },
+            error(err){
+                console.log("error");
+            }
+        });
+    });
+};
+
+function ItemAdden(){
+    $(".itemadd").click(function(){
+        alert("aleert");
+    });
 }
\ No newline at end of file
diff --git a/express-server/public/stylesheets/style.css b/express-server/public/stylesheets/style.css
index e5481ebc..f9439c80 100644
--- a/express-server/public/stylesheets/style.css
+++ b/express-server/public/stylesheets/style.css
@@ -22,6 +22,31 @@
 .trash{
     background: transparent;
     position:absolute;
-    right:5px;
+    right: 29px;
     margin-top:-7px;
+}
+
+.edit{
+    background: transparent;
+    position: absolute;
+    right: 60px;
+    margin-top:-7px;
+}
+
+.groupadd{
+    background: transparent;
+    position: absolute;
+    right:5px;
+    margin-top: -7px;
+}
+
+.ueberschrift{
+    font-size: 25px;
+}
+
+.itemadd{
+    background: transparent;
+    position: absolute;
+    right:5px;
+    margin-top: -50px;
 }
\ No newline at end of file
diff --git a/express-server/views/index.ejs b/express-server/views/index.ejs
index a8b23d47..27598f93 100644
--- a/express-server/views/index.ejs
+++ b/express-server/views/index.ejs
@@ -5,6 +5,7 @@
     <link rel='stylesheet' href='/stylesheets/style.css'>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.min.css'>
+    
   </head>
   <body>
 
@@ -18,42 +19,84 @@
         <ul class="nav justify-content-end liste">
             <li class="nav-item">
               <!-- <a class="nav-link active" href="#">Add</a> -->
-              <button class="btn btn-outline-light border-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Hinzufügen</button>
+              <button class="btn btn-outline-light border-secondary sl_add" style="color: black">Shoppingliste Hinzufügen</button>
             </li>
         </ul>
     </nav>
     <br>
     <br>
 
-    <!--cards-->
-    <div class="container justify-content-center">
+    <!-- alle cards-->
+    <div class="container justify-content-center cardausgabe">
         <div class="card-columns">
-            <div class="row listen-ausgabe">
+            <div class="listen-ausgabe">
             </div>
         </div>
     </div>
 
+    <!-- detail card -->
+    <div class="row justify-content-center ">
+        <div class="card border-light mb-3 detailcardausgabe" style="width: 50rem;">
+            <div class="card-header text-center"></div>
 
-    <!-- Modal -->
-    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+            <div class="card-body">
+                <h5 class="card-title"></h5>
+            <p class="card-text"></p>
+        </div>
+    </div>
+
+
+    <!-- Modal Group Hinzufügen -->
+    <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">
-                    <form>
-                            <div class="form-group layout">
-                              <label for="exampleInputEmail1">Name</label>
-                              <input type="text" class="form-control" id="einkaufslistenname"placeholder="Billa">
-                            </div>
-                            <div class="form-group layout">
-                              <label for="exampleInputPassword1">Beschreibung</label>
-                              <input type="text" class="form-control" id="einkaufslistenbeschreibung" placeholder="Großeinkauf bei Billa">
-                            </div>
-                            <center><button type="submit" class="btn btn-outline-dark add">Submit</button></center>
-                            <br>
-                          </form>
+                <form>
+
+                    <center><p class="layout ueberschrift">Group hinzufügen</p></center>
+                    <div class="form-group layout">
+                      <label for="exampleInputEmail1">Name</label>
+                      <input type="text" class="form-control" id="groupname"placeholder="zB: Getränke">
+                    </div>
+    
+                    <div class="form-group layout">
+                      <label for="exampleInputPassword1">Farbe</label>
+                      <input type="text" class="form-control" id="groupfarbe" placeholder="zB: Red">
+                    </div>
+    
+                    <center><button type="submit" class="btn btn-outline-dark gruppenadd">Hinzufügen</button></center>
+                    <br>
+    
+                </form>
             </div>
         </div>
     </div>
 
+
+    <!-- Modal Shoppingliste Hinzufügen -->
+    <div class="modal fade bd-example-modal-sm EigeneListeAdd" tabindex="-1" id="EigeneListeAdd" role="dialog" aria-labelledby="EigeneListeAdd" aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <form>
+
+                    <div class="form-group layout">
+                      <label for="exampleInputEmail1">Name</label>
+                      <input type="text" class="form-control" id="einkaufslistenname"placeholder="zB: Billa">
+                    </div>
+
+                    <div class="form-group layout">
+                      <label for="exampleInputPassword1">Beschreibung</label>
+                      <input type="text" class="form-control" id="einkaufslistenbeschreibung" placeholder="zB: Großeinkauf bei Billa">
+                    </div>
+
+                    <center><button type="submit" class="btn btn-outline-dark add">Hinzufügen</button></center>
+                    <br>
+
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- <a href="/shoppinglist_json/0">dfasdfghjklöghjkl</a> -->
     <!-- <a href="/myshoppinglists">Meine Einkaufslisten anzeigen</a><br>
     <a href="/sharedshoppinglists">Mit mir geteilte Einkaufslisten anzeigen</a><br>
     <a href="">Einkaufsliste erstellen</a><br>
@@ -62,5 +105,6 @@
     <script src="/jquery/dist/jquery.js"></script>
     <script src="/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="/javascripts/ajax.js"></script>
+    <script src="https://unpkg.com/ionicons@4.4.8/dist/ionicons.js"></script>
   </body>
 </html>
\ No newline at end of file