diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index ce32d194363..0cc7bbbf47e 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -20,6 +20,16 @@ export default {
 
       return eventHub.$emit('toggleSubGroups', this.group);
     },
+    onLeaveGroup(e) {
+      e.preventDefault();
+
+      if (confirm(`Are you sure you want to leave the "${this.group.fullName}" group?`)) {
+        this.leaveGroup();
+      }
+    },
+    leaveGroup() {
+      eventHub.$emit('leaveGroup', this.group.leavePath);
+    }
   },
   computed: {
     groupDomId() {
@@ -73,10 +83,13 @@ export default {
     :class="rowClass"
     >
     <div class="controls">
-      <a class="edit-group btn" href="#edit">
+      <a class="edit-group btn" :href="group.editPath">
         <i aria-hidden="true" class="fa fa-cogs"></i>
       </a>
-      <a class="leave-group btn" title="Leave this group" href="#leave">
+      <a @click="onLeaveGroup"
+        :href="group.leavePath"
+        class="leave-group btn"
+        title="Leave this group">
         <i aria-hidden="true" class="fa fa-sign-out"></i>
       </a>
     </div>
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index 90dae30bafb..4d0f415bfc2 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -52,7 +52,7 @@ $(() => {
           store.setGroups(response.json(), parentGroup);
         })
         .catch(() => {
-          // TODO: Handler error
+          // TODO: Handle error
         });
 
         return getGroups;
@@ -65,6 +65,15 @@ $(() => {
 
         GroupsStore.toggleSubGroups(parentGroup);
       },
+      leaveGroup(endpoint) {
+        service.leaveGroup(endpoint)
+          .then(() => {
+            // TODO: Refresh?
+          })
+          .catch(() => {
+            // TODO: Handle error
+          });
+      },
     },
     created() {
       let groupFilterList = null;
@@ -81,6 +90,7 @@ $(() => {
         });
 
       eventHub.$on('toggleSubGroups', this.toggleSubGroups);
+      eventHub.$on('leaveGroup', this.leaveGroup);
     },
   });
 });
diff --git a/app/assets/javascripts/groups/services/groups_service.js b/app/assets/javascripts/groups/services/groups_service.js
index 2b861b6a4d5..f2abe2681db 100644
--- a/app/assets/javascripts/groups/services/groups_service.js
+++ b/app/assets/javascripts/groups/services/groups_service.js
@@ -6,6 +6,7 @@ Vue.use(VueResource);
 export default class GroupsService {
   constructor(endpoint) {
     this.groups = Vue.resource(endpoint);
+    this.groups = Vue.resource(endpoint);
   }
 
   getGroups(parentId, page) {
@@ -20,4 +21,8 @@ export default class GroupsService {
 
     return this.groups.get(data);
   }
+
+  leaveGroup(endpoint) {
+    return Vue.http.delete(endpoint);
+  }
 }
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index e59aee42400..7304fb1e804 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/app/assets/javascripts/groups/stores/groups_store.js
@@ -121,6 +121,8 @@ export default class GroupsStore {
       webUrl: rawGroup.web_url,
       parentId: rawGroup.parent_id,
       visibility: rawGroup.visibility,
+      leavePath: rawGroup.leave_path,
+      editPath: rawGroup.edit_path,
       isOpen: false,
       isOrphan: false,
       numberProjects: 10,