diff --git a/frontend/components/Item/AttachmentsList.vue b/frontend/components/Item/AttachmentsList.vue
index 1dd8855..ddad600 100644
--- a/frontend/components/Item/AttachmentsList.vue
+++ b/frontend/components/Item/AttachmentsList.vue
@@ -11,10 +11,10 @@
       </div>
       <div class="ml-4 flex-shrink-0">
         <a class="tooltip mr-2" data-tip="Download" :href="attachmentURL(attachment.id)" target="_blank">
-         <Icon class="h-5 w-5" name="mdi-download"/>
+          <Icon class="h-5 w-5" name="mdi-download" />
         </a>
         <a class="tooltip" data-tip="Open" :href="attachmentURL(attachment.id)" target="_blank">
-          <Icon class="h-5 w-5" name="mdi-open-in-new"/>
+          <Icon class="h-5 w-5" name="mdi-open-in-new" />
         </a>
       </div>
     </li>
@@ -37,11 +37,9 @@
 
   const api = useUserApi();
 
-  function attachmentURL(attachmentId : string) {
+  function attachmentURL(attachmentId: string) {
     return api.authURL(`/items/${props.itemId}/attachments/${attachmentId}`);
   }
-
-
 </script>
 
 <style scoped></style>
diff --git a/frontend/lib/api/base/base-api.ts b/frontend/lib/api/base/base-api.ts
index bef9326..6db8951 100644
--- a/frontend/lib/api/base/base-api.ts
+++ b/frontend/lib/api/base/base-api.ts
@@ -27,9 +27,9 @@ export function parseDate<T>(obj: T, keys: Array<keyof T> = []): T {
 
 export class BaseAPI {
   http: Requests;
-  attachmentToken: string
+  attachmentToken: string;
 
-  constructor(requests: Requests, attachmentToken: string = "") {
+  constructor(requests: Requests, attachmentToken = "") {
     this.http = requests;
     this.attachmentToken = attachmentToken;
   }
diff --git a/frontend/lib/api/classes/items.ts b/frontend/lib/api/classes/items.ts
index 2d6cce7..ee18f01 100644
--- a/frontend/lib/api/classes/items.ts
+++ b/frontend/lib/api/classes/items.ts
@@ -1,12 +1,6 @@
 import { BaseAPI, route } from "../base";
 import { parseDate } from "../base/base-api";
-import {
-  ItemAttachmentUpdate,
-  ItemCreate,
-  ItemOut,
-  ItemSummary,
-  ItemUpdate,
-} from "../types/data-contracts";
+import { ItemAttachmentUpdate, ItemCreate, ItemOut, ItemSummary, ItemUpdate } from "../types/data-contracts";
 import { AttachmentTypes, PaginationResult } from "../types/non-generated";
 
 export type ItemsQuery = {
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index b003023..256ff0c 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -35,17 +35,19 @@
 
   type Photo = {
     src: string;
-  }
+  };
 
   const photos = computed<Photo[]>(() => {
-    return item.value?.attachments.reduce((acc, cur) => {
-      if (cur.type === "photo") {
-        acc.push({
-          src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`),
-        })
-      }
-      return acc;
-    }, [] as Photo[]) || [];
+    return (
+      item.value?.attachments.reduce((acc, cur) => {
+        if (cur.type === "photo") {
+          acc.push({
+            src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`),
+          });
+        }
+        return acc;
+      }, [] as Photo[]) || []
+    );
   });
 
   const attachments = computed<FilteredAttachments>(() => {
@@ -304,7 +306,7 @@
   const refDialog = ref<HTMLDialogElement>();
   const dialoged = reactive({
     src: "",
-  })
+  });
 
   function openDialog(img: Photo) {
     refDialog.value.showModal();
@@ -319,30 +321,22 @@
   onClickOutside(refDialogBody, () => {
     closeDialog();
   });
-
 </script>
 
-<style>
-  /* Style dialog background */
-  dialog::backdrop {
-    background: rgba(0, 0, 0, 0.5);
-  }
-</style>
-
 <template>
   <BaseContainer v-if="item" class="pb-8">
     <dialog ref="refDialog" class="z-[999] fixed bg-transparent">
-      <div class="relative" ref="refDialogBody">
+      <div ref="refDialogBody" class="relative">
         <div class="absolute right-0 -mt-3 -mr-3 sm:-mt-4 sm:-mr-4 space-x-1">
           <a class="btn btn-sm sm:btn-md btn-primary btn-circle" :href="dialoged.src" download>
-            <Icon class="h-5 w-5" name="mdi-download"/>
+            <Icon class="h-5 w-5" name="mdi-download" />
           </a>
           <button class="btn btn-sm sm:btn-md btn-primary btn-circle" @click="closeDialog()">
-            <Icon class="h-5 w-5"  name="mdi-close" />
+            <Icon class="h-5 w-5" name="mdi-close" />
           </button>
         </div>
 
-        <img class="max-w-[80vw] max-h-[80vh]" :src="dialoged.src"/>
+        <img class="max-w-[80vw] max-h-[80vh]" :src="dialoged.src" />
       </div>
     </dialog>
     <section class="px-3">
@@ -405,8 +399,8 @@
         <BaseCard>
           <template #title> Photos </template>
           <div class="container p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-scroll">
-            <button v-for="img in photos" @click="openDialog(img)">
-              <img class="rounded max-h-[200px]" :src="img.src"/>
+            <button v-for="(img, i) in photos" :key="i" @click="openDialog(img)">
+              <img class="rounded max-h-[200px]" :src="img.src" />
             </button>
           </div>
         </BaseCard>
@@ -470,3 +464,10 @@
     </section>
   </BaseContainer>
 </template>
+
+<style>
+  /* Style dialog background */
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+</style>