diff --git a/package-lock.json b/package-lock.json
index 92415a10cf3e721007d669673ea0ebbbf5827a42..4bd9f6822075a48d6d04e75bde6c7862841d8215 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "axios": "^0.26.1",
         "core-js": "^3.8.3",
         "cssom": "^0.5.0",
+        "heroicons": "^1.0.6",
         "jwt-decode": "^3.1.2",
         "net": "^1.0.2",
         "roboto-fontface": "*",
@@ -7540,6 +7541,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heroicons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-1.0.6.tgz",
+      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "dev": true,
@@ -19967,6 +19973,11 @@
       "version": "1.2.0",
       "dev": true
     },
+    "heroicons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-1.0.6.tgz",
+      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
+    },
     "highlight.js": {
       "version": "10.7.3",
       "dev": true
diff --git a/package.json b/package.json
index 82bef75d775f37cffd5e8bda14ea138904251888..97312aebe6f2e7cb32032be5bf4f7416775d6ea9 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "cssom": "^0.5.0",
+    "heroicons": "^1.0.6",
     "jwt-decode": "^3.1.2",
     "net": "^1.0.2",
     "roboto-fontface": "*",
diff --git a/src/components/CommunityComponents/CommunityList.vue b/src/components/CommunityComponents/CommunityList.vue
index 859e69d3e7f96c56935f64dd7b16beca2f403188..97d25120249632f9d395a35f80e66c338125e0e3 100644
--- a/src/components/CommunityComponents/CommunityList.vue
+++ b/src/components/CommunityComponents/CommunityList.vue
@@ -8,6 +8,7 @@
 
 <script>
 import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
+//import Join
 
 export default {
   name: "CommunityList",
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index 28e910a7c60693985ec5fdcb9fc49b6a6e7aad6d..f260d3b475014d6c247a12b73543f8364a9801ba 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -8,12 +8,20 @@
     <div class="flex justify-center p-2">
       <!-- If a user is not a member in the community, this button will show -->
       <ColoredButton
-        v-if="!member"
+        v-if="!member && community.visibility!==0"
         :text="'Bli med'"
         @click="goToJoin(community.communityId)"
         class="m-2"
       />
 
+        <ColoredButton
+        v-if="!member && community.visibility===0"
+        :text="'Spør om å bli med'"
+        @click="goToRequest(community.communityId)"
+        class="m-2"
+        />
+
+      
       <!-- If a user is member this button will show -->
       <ColoredButton
         v-if="member"
@@ -96,6 +104,9 @@ export default {
         this.$router.push("/community/" + id);
       }
     },
+    goToRequest(id){
+        this.$router.push("/community/" + id + "/private/join")
+    },
     toggleDialog() {
       this.dialogOpen = !this.dialogOpen;
     },
diff --git a/src/components/CommunityComponents/CommunityRequestForm.vue b/src/components/CommunityComponents/CommunityRequestForm.vue
index add42c62e1bd00cd4f33377ce3c73c788abd6e3f..7f738dbecb0e4653891accbf867816061118b519 100644
--- a/src/components/CommunityComponents/CommunityRequestForm.vue
+++ b/src/components/CommunityComponents/CommunityRequestForm.vue
@@ -6,7 +6,7 @@
     <div
       class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
     >
-      Bli med i: {{gruppenavn}}
+      Bli med i: {{community.name}}
     </div>
 
 
@@ -49,6 +49,7 @@ import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, helpers, maxLength } from "@vuelidate/validators";
 import Button from "@/components/BaseComponents/ColoredButton";
+import {GetCommunity} from "@/utils/apiutil";
 
 export default {
   name: "CommunityRequestForm.vue",
@@ -78,10 +79,9 @@ export default {
   },
   data() {
     return {
-      group: {
         description: "",
         communityId: null,
-      },
+        community: {},
     };
   },
   computed: {
@@ -91,6 +91,16 @@ export default {
     async saveClicked() {
       await axios.post(process.env.VUE_APP_BASEURL+ `community/${this.communityId}/private/join`);
     },
+     getCommunityFromAPI: async function () {
+      this.communityID = await this.$router.currentRoute.value.params
+        .communityID;
+        console.log("Dette er community id =" + this.communityID)
+      this.community = await GetCommunity(this.communityID);
+      console.log(this.community)
+    }
+  },
+   async created() {
+    await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
   },
 };
 </script>
diff --git a/src/main.js b/src/main.js
index 2d3b35cdcc6b5aaa8e21905ac4abba260db9a30e..32764da4a55678ff6ed1fbf6e21819a55990f716 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,4 +5,4 @@ import store from "./store";
 import ws from "./services/ws";
 
 createApp(App).use(router).use(store).mount("#app");
-//console.log("WS", ws.test);
+console.log("WS", ws.test);
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 4df5907c9470ac4c4bca53ec0d29f8c58eecb35f..d16c32b968c6108f51e0aec442f114b1624198fc 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -215,6 +215,8 @@ export async function GetListingsInCommunity(communityID) {
     });
 }
 
+
+
 export async function GetMembersOfCommunity(communityID) {
   return axios
     .get(API_URL + "community/" + communityID + "/members", {