diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 2ff217132d67798d84e31a7d166ee007e4d615ba..704b199bc9876af2f3a4e222d34269d2a33b4947 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -27,7 +27,8 @@
       </li>
       <li id="leaveGroup">
         <div
-          class="cursor-pointer block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+          class="cursor-pointer block py-2 px-4 text-sm text-error hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+          @click="leaveCommunity"
         >
           Forlat Gruppe
         </div>
@@ -37,10 +38,26 @@
 </template>
 
 <script>
+
+import { LeaveCommunity } from "@/utils/apiutil";
+
 export default {
   name: "CommunityHamburger",
   props: {
     communityID: Number,
   },
+  data(){
+    return{
+      id: -1,
+    }
+  },
+
+  methods:{
+    leaveCommunity: async function(){
+      this.id = await this.$router.currentRoute.value.params.communityID;
+      await LeaveCommunity(this.id);
+      this.$router.push('/');
+    }
+  }
 };
 </script>
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 5f6a2261b6e74816f4c69cb3646ccbe51bf84928..fd412f2d0aa88bc3a2798753caab284afaf6cb2b 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -223,3 +223,17 @@ export async function GetIfUserAlreadyInCommunity(communityID) {
             return error;
         });
 }
+
+export async function LeaveCommunity(communityID) {
+    return axios
+        .patch(API_URL + "communities/" + communityID + "/leave", communityID, {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response.data;
+        })
+        .catch((error) => {
+            console.log(error.data);
+            return error;
+        });
+}