diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..23b4e25c2bebf3eb8fcc97d852a1024aedb26183
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColoredButtonComponent renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Button with custom text and color -->
+  <button
+    class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
+  >
+    hei
+  </button>
+  
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..088e1e4160c9174e917d9a62b7472627b9223061
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButtonComponent renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Main modal -->
+  <div
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
+  >
+    <div
+      class="relative w-full h-full max-w-2xl p-4 md:h-auto"
+    >
+      <!-- Modal content -->
+      <div
+        class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+      >
+        <!-- Modal header -->
+        <div
+          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+        >
+          <h3
+            class="text-xl font-semibold text-gray-900 dark:text-white"
+          >
+            String
+          </h3>
+          <!-- Close button -->
+          <button
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 18L18 6M6 6l12 12"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div
+          class="p-6 space-y-6"
+        >
+          <p
+            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+          >
+            String
+          </p>
+        </div>
+        <!-- Modal footer -->
+        <div
+          class="rounded-b border-t border-gray-200 dark:border-gray-600"
+        >
+          <!-- Slot: Add any html you want here (Must be one div) -->
+          
+          <div
+            class="fake-msg"
+          >
+            String
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/footer-bar.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/footer-bar.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..bf4ee8cc5e808ec6f563c2d10af1ec4cb33fc35b
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/footer-bar.spec.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FooterBar component renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Footer -->
+  <footer
+    class="w-full bg-white dark:bg-gray-800 sm:flex-row border-1 border-t border-gray-600 h-10"
+  >
+    <!-- Copyright -->
+    <p
+      class="float-left text-xs my-3 ml-4 text-primary-dark"
+    >
+       © BoCo 2022 - All rights reserved 
+    </p>
+    <!-- Icon link to help page -->
+    <svg
+      aria-hidden="true"
+      class="md:mt-0 mt-1 mr-4 float-right cursor-pointer h-8 md:h-10 text-primary-medium"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </footer>
+  
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/form-image-display.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/form-image-display.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..a6dc51e0b065edf6405d394c937a4e028b591409
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/form-image-display.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormImageDisplay component renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Image -->
+  <img
+    alt="Bilde av gjenstanden"
+    class="w-2/5 inline"
+    src="http://localhost:3000/api/images/5"
+  />
+  <!-- Modal -->
+  
+  <!-- Main modal -->
+  <!--v-if-->
+  
+  
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..f38c6fa8f94b7e530126dffc3820753778b5c453
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButtonComponent renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Button -->
+  <button
+    class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
+  >
+    <div
+      class="w-5 h-5 mx-1"
+    >
+      <!-- Slot for icon (Default BanIcon) -->
+      
+      <svg
+        aria-hidden="true"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      
+    </div>
+    <span
+      class="mx-1"
+    >
+      hei
+    </span>
+  </button>
+  
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..f466c4431962725a99e10fdad9139913a0315aa7
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavBar component renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- NavBar -->
+  <nav
+    class="flex items-center bg-white justify-between h-10 md:h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+  >
+    <!-- Logo reroutes to homepage -->
+    <div
+      class="logo"
+    >
+      <img
+        alt="BoCo logo"
+        class="m-1 ml-4 cursor-pointer h-9 md:h-12"
+        src=""
+      />
+    </div>
+    <ul
+      class="flex justify-between"
+    >
+      <!-- New listing button -->
+      <li
+        class="cursor-pointer"
+      >
+        <plus-icon-stub
+          alt="Legg til"
+          class="m-6 md:mr-2 h-7 text-primary-medium float-left"
+        />
+        <a
+          class="hidden md:block mt-7 text-sm float-right"
+        >
+          Legg til
+        </a>
+      </li>
+      <!-- My messages button -->
+      <li
+        class="cursor-pointer"
+      >
+        <div
+          class="notification-container relative"
+        >
+          <chat-alt2-icon-stub
+            alt="Meldinger"
+            class="m-6 md:mr-2 h-7 text-primary-medium float-left"
+          />
+          <!--v-if-->
+          <a
+            class="hidden md:block mt-7 text-sm float-right"
+          >
+            Meldinger
+          </a>
+        </div>
+      </li>
+      <!-- User profile button -->
+      <li
+        class="cursor-pointer"
+      >
+        <user-circle-icon-stub
+          alt="Profil"
+          class="m-6 md:mr-2 h-7 text-primary-medium float-left"
+        />
+        <!-- Shows "Profil" if user is logged in, else "Logg inn"  -->
+        <a
+          class="hidden md:block mr-4 mt-7 text-sm float-right"
+        >
+          Profil
+        </a>
+      </li>
+    </ul>
+  </nav>
+  
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..485fb4f230c17053c0ffdd03ebbb1a003c2a55d9
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotificationModal component renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Main modal -->
+  <div
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
+  >
+    <div
+      class="relative w-full h-full max-w-2xl p-4 md:h-auto"
+    >
+      <!-- Modal content -->
+      <div
+        class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+      >
+        <!-- Modal header -->
+        <div
+          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+        >
+          <h3
+            class="text-xl font-semibold text-gray-900 dark:text-white"
+          >
+            String
+          </h3>
+          <!-- Close button -->
+          <button
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 18L18 6M6 6l12 12"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div
+          class="p-6 space-y-6"
+        >
+          <p
+            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+          >
+            String
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/pagination-template.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/pagination-template.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..e4d76ee174ab3fcbf15a5a02601274a3bb2be6c6
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/pagination-template.spec.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaginationTemplate renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Pagination -->
+  <!--v-if-->
+  
+</div>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/triple-dot-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/triple-dot-button.spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..710c50c9b036381f235ee14b68201cd4668257f9
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/triple-dot-button.spec.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TripleDotButton component renders correctly 1`] = `
+<button
+  class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
+  data-dropdown-toggle="dropdown"
+  id="dropdownDefault"
+  type="button"
+>
+  <svg
+    aria-hidden="true"
+    class="w-6 h-6"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</button>
+`;
diff --git a/tests/unit/component-tests/base-component-tests/color-button.spec.js b/tests/unit/component-tests/base-component-tests/color-button.spec.js
index 29300503d6aeae9159b782520be94ebb502ce44c..90c7a43df8e616a2a6349ef00db2934eb35ce40a 100644
--- a/tests/unit/component-tests/base-component-tests/color-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/color-button.spec.js
@@ -13,6 +13,10 @@ describe("ColoredButtonComponent", () => {
     });
   });
 
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+  
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
index 5afb8f9cb6f6d966856b1a59516062300c80e2b1..4d4db9169c1d7c90402aa4e78be331938ebf487f 100644
--- a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
@@ -18,6 +18,10 @@ describe("IconButtonComponent", () => {
     });
   });
 
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/footer-bar.spec.js b/tests/unit/component-tests/base-component-tests/footer-bar.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c50efb9e22f767ff23292cb0c1b371cb8c19f460
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/footer-bar.spec.js
@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import FooterBar from "@/components/BaseComponents/FooterBar.vue";
+
+describe("FooterBar component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(FooterBar);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file
diff --git a/tests/unit/component-tests/base-component-tests/form-image-display.spec.js b/tests/unit/component-tests/base-component-tests/form-image-display.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cb8f55a0e6b87a98fe2172ef58f6cb35eea19f7
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/form-image-display.spec.js
@@ -0,0 +1,23 @@
+import { mount } from "@vue/test-utils";
+import FormImageDisplay from "@/components/BaseComponents/FormImageDisplay.vue";
+
+describe("FormImageDisplay component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(FormImageDisplay, {
+      //passing prop to component
+      props: {
+          image: "http://localhost:3000/api/images/5"
+      },
+    });
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file
diff --git a/tests/unit/component-tests/base-component-tests/icon-button.spec.js b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
index 376fb18f1f3ba20d4e417f7f615c2136f908016b..57b6f0fbc8450074c308627cd845f61085cb6743 100644
--- a/tests/unit/component-tests/base-component-tests/icon-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
@@ -13,6 +13,10 @@ describe("IconButtonComponent", () => {
     });
   });
 
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
index c728013aea767ae263d383c9f0cf92597874512b..940507557a0acbf1c42d42aa1eaca34b654fda3c 100644
--- a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
+++ b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
@@ -16,6 +16,10 @@ describe("NavBar component", () => {
     });
   });
 
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
index c005e4f94aec3da15453735e5e1b267884104baf..0fb2c913ba0efa291df6a397a8dd0ee7370da776 100644
--- a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
@@ -15,6 +15,10 @@ describe("NotificationModal component", () => {
     });
   });
 
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/pagination-template.spec.js b/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
index 91a7495f64107bf31184e1dee68e250a959e06de..b72731817026bf0de1a62bbbc04964c5f9c1e2d9 100644
--- a/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
+++ b/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
@@ -15,6 +15,10 @@ describe("PaginationTemplate", () => {
     });
   });
 
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/triple-dot-button.spec.js b/tests/unit/component-tests/base-component-tests/triple-dot-button.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..f796516f86eaa2fe675fa95b0bcfec8040a23c29
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/triple-dot-button.spec.js
@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import TripleDotButton from "@/components/BaseComponents/TripleDotButton.vue";
+
+describe("TripleDotButton component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(TripleDotButton);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
index 6389c542acb08f641164d126f05565082d3b9cc4..77b8975ee9dbbcc08570939bf65238456f813b77 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
@@ -22,6 +22,8 @@ exports[`CommunityHeader component renders correctly 1`] = `
     <div
       class="flex place-content-center mx-4"
     >
+      
+      <!-- PacMan for indicating loading -->
       <div
         class="loadingio-spinner-bean-eater-o5tefvffeqm"
       >
@@ -40,6 +42,7 @@ exports[`CommunityHeader component renders correctly 1`] = `
           </div>
         </div>
       </div>
+      
     </div>
   </div>
   
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 1788f9305c5a342b282e03657a5b7351548a3c4c..c72b816590a7a3a9f0cb92722cb4e88cb5287698 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
@@ -219,11 +219,14 @@ exports[`NewItemForm component renders correctly 1`] = `
         type="file"
       />
       <!-- Opens file explorer -->
+      
+      <!-- Button with custom text and color -->
       <button
         class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
       >
         Velg bilde
       </button>
+      
       <!-- Shows chosen images -->
       
       
@@ -232,12 +235,15 @@ exports[`NewItemForm component renders correctly 1`] = `
     <div
       class="float-right"
     >
+      
+      <!-- Button with custom text and color -->
       <button
         class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
         id="saveButton"
       >
         Lagre
       </button>
+      
     </div>
   </div>
   
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
index da0a65acb1aaebb2d840fba0a32e54ed26c72800..0c3c3c009af9e5a933f5ed99d16db44906e178a4 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
@@ -58,11 +58,14 @@ exports[`LoginForm component renders correctly 1`] = `
             Glemt passord?
           </router-link>
           <!-- Button for logging in -->
+          
+          <!-- Button with custom text and color -->
           <button
             class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light login"
           >
             Logg på
           </button>
+          
         </div>
       </div>
     </div>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
index a62255e09948f531f521385f62d61d04c7899cef..8d4a4752be15507de8c0a6decba0a129aca5aceb 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
@@ -78,11 +78,14 @@ exports[`NewPasswordForm component renders correctly 1`] = `
       class="mt-6"
       id="buttonsField"
     >
+      
+      <!-- Button with custom text and color -->
       <button
         class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light float-right"
       >
         Sett ny passord
       </button>
+      
     </div>
     <!-- Message for user -->
     <div
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
index af2bbf8783faa8af62a497730fa7c81f24b960ed..7ac9eff69f58987c4ffb5152ce619ff927142b62 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
@@ -99,11 +99,14 @@ exports[`RegisterFormComponent renders correctly 1`] = `
       <div
         class="flex justify-end mt-6"
       >
+        
+        <!-- Button with custom text and color -->
         <button
           class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
         >
           Opprett
         </button>
+        
       </div>
     </form>
   </div>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
index 40a038afb49c611841f534b60c65fd7a2ee740ee..417f7973077f99b92a0933b95b54788ed5269141 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
@@ -33,11 +33,14 @@ exports[`ResetPasswordForm component renders correctly 1`] = `
       
       
     </div>
+    
+    <!-- Button with custom text and color -->
     <button
       class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light float-right"
     >
       Tilbakestill passord
     </button>
+    
   </div>
 </div>
 `;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
index 6a73973168534f9f4153a75d0448d4e301d0ba97..6144f610a8902c6c981d2d5ace4425fdd3cec20d 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
@@ -69,17 +69,23 @@ exports[`UserItems component renders correctly 1`] = `
     <div
       class="flex justify-center"
     >
+      
+      <!-- Pagination -->
       <div
         class="mt-10"
       >
+        <!-- Prev button -->
         <!--v-if-->
+        <!-- Current page -->
         <label
           class="mx-2 text-primary-light"
         >
           1 av 1
         </label>
+        <!-- Next button -->
         <!--v-if-->
       </div>
+      
     </div>
   </div>