diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 9324b2bb76cfe0df33fde7a0cad06bd202470708..9012fdccddf250cb3ed592cba2a445f2e3205333 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -71,39 +71,34 @@
     <!-- Select Group -->
     <div class="mb-6">
       <label
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-        >Gruppe</label
-      >
-      <select
-        v-model="v$.item.selectGroup.$model"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      >
-        <option class="text-gray-400" value="" disabled selected>
-          Select a Group
-        </option>
-        <option
-          v-for="group in groups"
-          :key="group"
-          class="text-gray-900 text-sm"
-        >
-          {{ group }}
-        </option>
-      </select>
-
-      <!-- error message for select box -->
+        class="block text-sm font-medium text-gray-900 dark:text-gray-400"
+        >Grupper</label>
       <div
-        class="text-red"
-        v-for="(error, index) of v$.item.selectGroup.$errors"
-        :key="index"
+          class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700"
       >
-        <div class="text-red-600 text-sm">
-          {{ error.$message }}
-        </div>
+        <ul class="py-1" aria-labelledby="dropdownDefault">
+          <li>
+            <div class="form-check" v-for="group in groups" :key="group">
+              <input
+
+                  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+                  type="checkbox"
+                  :value="group.communityId"
+                  @change="onChangeGroup($event)"
+              >
+              <label class="form-check-label inline-block text-gray-800">
+                {{ group.name }}
+              </label>
+            </div>
+          </li>
+        </ul>
       </div>
+      <label class="text-red-600 text-sm block">{{ groupErrorMessage }}</label>
     </div>
 
+
     <!-- price -->
-    <div class="mb-6" :class="{ error: v$.item.price.$errors.length }">
+    <div class="mb-6 mt-4" :class="{ error: v$.item.price.$errors.length }">
       <label
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
         id="priceLabel"
@@ -228,7 +223,7 @@
 <script>
 import useVuelidate from "@vuelidate/core";
 import { parseUserFromToken } from "@/utils/token-utils";
-import { postNewItem } from "@/utils/apiutil";
+import { postNewItem, getMyGroups } from "@/utils/apiutil";
 
 import {
   required,
@@ -282,9 +277,6 @@ export default {
         select: {
           required: helpers.withMessage(() => `Velg en kategori`, required),
         },
-        selectGroup: {
-          required: helpers.withMessage(() => `Velg en gruppe`, required),
-        },
         address: {
           required: helpers.withMessage(
             () => "Addressen kan ikke være tom",
@@ -311,11 +303,13 @@ export default {
         type: "",
         images: [],
         userId: -1,
-        selectGroup: null,
+        selectedGroupId: -1,
+        selectedGroups: [],
       },
       //Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
       categories: ["Hage", "Kjøkken", "Musikk", "Annet"],
-      groups: [4040, 4041],
+      groups: [],
+      groupErrorMessage: '',
     };
   },
   methods: {
@@ -323,7 +317,10 @@ export default {
       console.log("sjekker validering");
 
       this.v$.item.$touch();
-      if (this.v$.item.$invalid) {
+      if (this.v$.item.$invalid || this.item.selectedGroups.length === 0) {
+        if(this.item.selectedGroups.length === 0){
+          this.groupErrorMessage = "Velg gruppe/grupper";
+        }
         console.log("Invalid, avslutter...");
         return false;
       }
@@ -346,7 +343,7 @@ export default {
         console.log("Addressen: " + this.item.address);
         console.log("Pris: " + this.item.price);
         console.log("bilder: " + this.item.images);
-        console.log("gruppe: " + this.item.selectGroup);
+        console.log("gruppe: " + this.item.selectedGroups);
 
         const itemInfo = {
           title: this.item.title,
@@ -355,7 +352,7 @@ export default {
           address: this.item.address,
           userID: this.item.userId,
           categoryNames: [],
-          communityIDs: [this.item.selectGroup],
+          communityIDs: this.item.selectedGroups,
         };
 
         console.log(itemInfo);
@@ -363,20 +360,48 @@ export default {
         const postRequest = await postNewItem(itemInfo);
 
         console.log("posted: " + postRequest);
+
+        this.$router.push('/');
       }
     },
 
     checkUser: async function () {
       let user = parseUserFromToken(this.$store.state.user.token);
       this.item.userId = parseInt(user.accountId);
-      console.log("id: " + this.item.userId);
     },
 
     addImage: function (event) {
       console.log(event.target.files);
       this.item.images.push(URL.createObjectURL(event.target.files[0]));
-      console.log("antall bilder: " + this.item.images.length);
+    },
+
+    getGroups: async function(){
+      this.groups = await getMyGroups();
+    },
+
+    onChangeGroup: function(e){
+      this.selectedGroupId = e.target.value;
+      let alreadyInGroupList = false;
+
+      for (let i = 0; i <= this.item.selectedGroups.length; i++) {
+        if (this.selectedGroupId == this.item.selectedGroups[i]) {
+          const index = this.item.selectedGroups.indexOf(this.selectedGroupId);
+          if (index > -1) {
+            this.item.selectedGroups.splice(index, 1);
+          }
+          alreadyInGroupList = true;
+        }
+      }
+
+      if(!alreadyInGroupList){
+        this.item.selectedGroups.push(this.selectedGroupId);
+        this.groupErrorMessage = "";
+      }
+
     },
   },
+  beforeMount() {
+    this.getGroups();
+  }
 };
 </script>
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
index a975fa560f988edeb59aee0a62e951b18b9192e2..9481b244b29873fb25e396f3f757ef1fc1f2b1e5 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
@@ -87,40 +87,30 @@ exports[`NewItemForm component renders correctly 1`] = `
     class="mb-6"
   >
     <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+      class="block text-sm font-medium text-gray-900 dark:text-gray-400"
     >
-      Gruppe
+      Grupper
     </label>
-    <select
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+    <div
+      class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700"
     >
-      <option
-        class="text-gray-400"
-        disabled=""
-        value=""
+      <ul
+        aria-labelledby="dropdownDefault"
+        class="py-1"
       >
-         Select a Group 
-      </option>
-      
-      <option
-        class="text-gray-900 text-sm"
-      >
-        4040
-      </option>
-      <option
-        class="text-gray-900 text-sm"
-      >
-        4041
-      </option>
-      
-    </select>
-    <!-- error message for select box -->
-    
-    
+        <li>
+          
+          
+        </li>
+      </ul>
+    </div>
+    <label
+      class="text-red-600 text-sm block"
+    />
   </div>
   <!-- price -->
   <div
-    class="mb-6"
+    class="mb-6 mt-4"
   >
     <label
       class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"