diff --git a/Client/.well-known/interverse b/Client/.well-known/interverse
index a577aed..0b0e87c 100644
--- a/Client/.well-known/interverse
+++ b/Client/.well-known/interverse
@@ -11,9 +11,16 @@
       "description": "Stay up to date!"
       }
     ],
+    "connection_groups":{
+      "Group1":[
+        "https://libresolutions.network"
+      ],
+      "Group2":["https://retroedge.tech"],
+      "Group3":["https://small-web.org"]
+    },
     "connections": [
-      "https://libresolutions.network",
-      "https://retroedge.tech"
+      "https://gabe.rocks",
+      "https://codeberg.org"
     ],
     "contact": {
       "e-mail": "contact@https://my.website",
diff --git a/Client/index.html b/Client/index.html
index 72d0a76..ff95ab0 100644
--- a/Client/index.html
+++ b/Client/index.html
@@ -3,7 +3,8 @@
 <head>
     <link rel="stylesheet" href="/theme.css">
     <title>Interverse</title>
-    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script src="//unpkg.com/alpinejs" defer></script>
+    <! consider hosting on your site>
     <script src="/helper.js"></script>
 </head>
 <body>
@@ -26,6 +27,33 @@
                 </a>
             </template>
         </div>
+        <div id="interverse-groups">
+            <template x-for="(group,name) in Alpine.store('data')['connection_groups']">
+                <div>
+                    <h3 x-text="name"></h3>
+                    <div class="interverse-group">
+                        <template x-for="link in group">
+                            <div class="interverse-connection" x-data="{connected:false">
+                                <template x-if="Alpine.store(link)['name'] !=''">
+                                    <div class='interverse-connection-preview' x-on:click="initialize(link+'/.well-known/interverse')">
+                                        <h3 x-text="Alpine.store(link)['name']"></h3>
+                                        <img x-bind:src="Alpine.store(link)['image']">
+                                        <a x-bind:href="link" x-text="link"></a>
+                                    </div>
+                                </template>
+                                <template x-if="Alpine.store(link) == undefined">
+                                    <div>
+                                        <p x-text="link"></p>
+                                    </div>
+    
+                                </template>
+                            </div>
+                        </template>
+                    </div>
+                    
+                </div>
+            </template>                
+        </div>
         <h2>Links</h2>
         <div id="interverse-connections">
             <template x-for="connection in Alpine.store('data')['connections']">
@@ -76,8 +104,14 @@
             Alpine.store("data",{});
             fetchdata(url,function(e){
                 data = JSON.parse(e.target.response);
+                raw_data = JSON.parse(e.target.response);
                 Alpine.store("data",data);
-                connections = data['connections'];
+                var connections = raw_data['connections'];
+                for (group in data['connection_groups']){
+                    for (link in data['connection_groups'][group]){
+                        connections.push(data['connection_groups'][group][link]);
+                    }
+                }
                 for (var i =0; i<connections.length; i++){
                     fetchdata(connections[i]+'/.well-known/interverse',function(e){
                         try{
diff --git a/Client/interverse.js b/Client/interverse.js
deleted file mode 100644
index e69de29..0000000
diff --git a/Client/theme.css b/Client/theme.css
index f1cc961..48e30d9 100644
--- a/Client/theme.css
+++ b/Client/theme.css
@@ -47,6 +47,16 @@ img {
     height:3rem;
     width:3rem;
 }
+#interverse-groups{
+    display:flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+.interverse-group{
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
 #interverse-connections{
     display:flex;
     flex-wrap: wrap;
@@ -59,6 +69,10 @@ img {
     padding:1rem;
     margin:0.25rem;
 }
+.interverse-connection-preview{
+    display:flex;
+    flex-direction: column;
+}
 
 .interverse-widget{
     width:50vw;
