finished

src/components/CommunityComponents/CommunityListItem.vue

 <template>
-  <NotificationModal
+  <CustomFooterModal
     @close="this.dialogOpen = false"
     :visible="dialogOpen"
     :title="community.name"
     :message="community.description"
   >
-  </NotificationModal>
+    <div class="flex justify-center p-2">
+      <ColoredButton
+        v-if="!member"
+        :text="'Bli med'"
+        @click="goToJoin(community.communityId)"
+      />
+      <ColoredButton
+        v-if="member"
+        :text="'Gå til'"
+        @click="goToGroup(community.communityId)"
+      />
+    </div>
+  </CustomFooterModal>
   <div
     @click="toggleDialog()"
     class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
   >
     <div class="h-10 w-10 flex flex-col justify-center items-center mr-4">
-      <img alt="Felleskapets bilde" src="@/assets/group.png" />
+      <UserGroupIcon v-if="!community.image" alt="Felleskapets bilde" />
+      <!-- TODO: USE COMMUNITY IMAGE <img alt="Felleskapets bilde" src="@/assets/group.png" /> -->
     </div>
     <div class="flex-1 pl-1 overflow-hidden">
       <div class="font-medium dark:text-white truncate">
@@ -23,38 +36,22 @@
         v-if="community.visibility === 0"
         class="max-h-6 max-w-6 shrink m-2"
       />
-      <LockOpenIcon
-        v-if="community.visibility === 1"
-        class="max-h-6 max-w-6 shrink m-2"
-      />
-      <button
-        @click="goToJoin(community.communityId)"
-        v-if="!member"
-        class="px-4 py-2 w-24 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
-      >
-        Bli med
-      </button>
-      <button
-        v-if="member"
-        @click="goToGroup(community.communityId)"
-        class="px-4 py-2 w-24 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
-      >
-        Gå til
-      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { LockClosedIcon, LockOpenIcon } from "@heroicons/vue/outline";
-import NotificationModal from "@/components/BaseComponents/NotificationModal.vue";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
+import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
+import { UserGroupIcon, LockClosedIcon } from "@heroicons/vue/outline";
 
 export default {
   name: "CommunityListItem",
   components: {
-    NotificationModal,
+    CustomFooterModal,
+    ColoredButton,
+    UserGroupIcon,
     LockClosedIcon,
-    LockOpenIcon,
   },
   data() {
     return {

src/views/CommunityViews/CommunityHomeView.vue

 <template>
-  <GroupHome></GroupHome>
+  <CommunityHome />
 </template>
 
 <script>
-import GroupHome from "@/components/CommunityComponents/CommunityHome";
+import CommunityHome from "@/components/CommunityComponents/CommunityHome.vue";
 export default {
-  name: "GroupHomeView.vue",
+  name: "CommunityHomeView",
   components: {
-    GroupHome,
+    CommunityHome,
   },
 };
 </script>
-
-<style scoped></style>

src/views/CommunityViews/CommunityView.vue

 <template>
-  <div>
-    <img
-      class="cursor-pointer h-8 mr-4 mt-4 float-right"
-      v-if="loggedIn"
-      src="@/assets/newCommunity.png"
-      alt="Legg til gruppe"
-      @click="$router.push('/createNewGroup')"
-    />
-  </div>
-  <div>
-    <div id="myGroups" v-if="loggedIn">
-      <div class="m-4">Mine grupper:</div>
-      <CommunityList :communities="myCommunities" :member="true" />
-    </div>
-    <div id="localGroups">
-      <div class="m-4">Offentlige grupper:</div>
-      <CommunityList :communities="publicCommunities" :member="false" />
+  <div v-if="loggedIn">
+    <div class="flex flex-row p-4 relative">
+      <p class="capitalize font-bold w-full">Mine felleskap</p>
+      <PlusIcon
+        class="cursor-pointer max-h-6 max-w-6 float-right grow"
+        @click="$router.push('/createNewGroup')"
+        v-if="loggedIn"
+        alt="Lag ett nytt felleskap"
+      />
     </div>
+    <CommunityList :communities="myCommunities" :member="true" />
   </div>
+  <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
+  <CommunityList :communities="publicCommunities" :member="false" />
 </template>
 
 <script>
 import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
 import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
+import { PlusIcon } from "@heroicons/vue/outline";
 
 export default {
   name: "HomeView",
@@ -35,12 +31,16 @@ export default {
   },
   components: {
     CommunityList,
+    PlusIcon,
   },
   async created() {
-    this.loggedIn = this.$store.state.user.token !== null;
     this.publicCommunities = await getVisibleGroups();
+    this.loggedIn = this.$store.state.user.token !== null;
     if (!this.loggedIn) return;
+
     this.myCommunities = await getMyGroups();
+
+    // Remove all of the user's communities from the public communities arrays
     this.publicCommunities = this.publicCommunities.filter(
       (val) => !this.myCommunities.includes(val)
     );