diff --git a/app/assets/styles/_base.scss b/app/assets/styles/_base.scss
index 797f371..abdba62 100644
--- a/app/assets/styles/_base.scss
+++ b/app/assets/styles/_base.scss
@@ -87,4 +87,8 @@
   // Small inputs
   --input-small-height: 2rem;
   --input-small-border-radius: 0.75rem;
+
+  // Extra small inputs
+  --input-extra-small-height: 1.5rem;
+  --input-extra-small-border-radius: 0.5rem;
 }
diff --git a/app/assets/styles/_utils.scss b/app/assets/styles/_utils.scss
new file mode 100644
index 0000000..af42b6b
--- /dev/null
+++ b/app/assets/styles/_utils.scss
@@ -0,0 +1,6 @@
+// overflow ellipsis
+@mixin overflow-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/app/components/IconButton.vue b/app/components/IconButton.vue
index a99195c..0746cfe 100644
--- a/app/components/IconButton.vue
+++ b/app/components/IconButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button :class="[$style.button, {
-    small,
+    [size]: true,
     secondary
   }]">
     <Icon
@@ -15,12 +15,12 @@
    interface Props {
     readonly iconName: string;
     readonly secondary?: boolean;
-    readonly small?: boolean;
+    readonly size: 'm' | 's' | 'xs';
   }
 
   withDefaults(defineProps<Props>(), {
     secondary: false,
-    small: false
+    size: 'm'
   });
 </script>
 
@@ -46,13 +46,20 @@
       border: 1px solid var(--input-secondary-color-border);
     }
 
-    &:global(.small) {
+    &:global(.s) {
       height: var(--input-small-height);
       width: var(--input-small-height);
       border-radius: var(--input-small-border-radius);
       font-size: 1.125rem;
     }
 
+    &:global(.xs) {
+      height: var(--input-extra-small-height);
+      width: var(--input-extra-small-height);
+      border-radius: var(--input-extra-small-border-radius);
+      font-size: 1rem;
+    }
+
     &:focus-visible,
     &:hover {
       background-color: var(--input-color-focus);
diff --git a/app/components/PerdInput.vue b/app/components/PerdInput.vue
index 9d647d1..d88f4a6 100644
--- a/app/components/PerdInput.vue
+++ b/app/components/PerdInput.vue
@@ -102,7 +102,7 @@
     border: none;
     background: none;
     outline: none;
-    color: var(--input-secondary-color-text);
+    color: var(--input-color-text);
   }
 
   .input::placeholder {
diff --git a/app/components/PerdSearch/SearchOptionAdd.vue b/app/components/PerdSearch/SearchOptionAdd.vue
index 278bf18..e87524c 100644
--- a/app/components/PerdSearch/SearchOptionAdd.vue
+++ b/app/components/PerdSearch/SearchOptionAdd.vue
@@ -1,6 +1,8 @@
 <template>
   <div :class="$style.component">
-    <slot />
+    <div :class="$style.name">
+      <slot />
+    </div>
 
     <div :class="$style.add">
       <Icon
@@ -13,10 +15,11 @@
   </div>
 </template>
 
-<style module>
+<style lang="scss" module>
   .component {
     height: 100%;
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
     align-items: center;
     column-gap: var(--spacing-16);
     justify-content: space-between;
@@ -29,10 +32,14 @@
     }
   }
 
+  .name {
+    @include overflow-ellipsis();
+  }
+
   .add {
-    display: none;
-    opacity: 0;
+    display: flex;
     align-items: center;
+    opacity: 0;
     column-gap: var(--spacing-4);
     font-size: var(--font-size-14);
     transition:
@@ -40,12 +47,7 @@
       display 0.15s ease-out allow-discrete;
 
     .component:hover & {
-      display: flex;
       opacity: 1;
-
-      @starting-style {
-        opacity: 0;
-      }
     }
   }
 </style>
diff --git a/app/components/checklists/ChecklistItem.vue b/app/components/checklists/ChecklistItem.vue
index 51f040b..b0442ec 100644
--- a/app/components/checklists/ChecklistItem.vue
+++ b/app/components/checklists/ChecklistItem.vue
@@ -1,30 +1,49 @@
 <template>
   <div :class="$style.component">
-    <div>
+    <div :class="$style.name">
       {{ item.equipment.name}}
     </div>
 
     <div :class="$style.weight">
       {{ item.equipment.weight }}
     </div>
+
+    <div :class="$style.actions">
+      <IconButton
+        size="xs"
+        icon-name="tabler:x"
+        @click="handleRemoveClick"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
   import type { ChecklistItemModel } from '~/models/checklist';
+  import IconButton from '@/components/IconButton.vue';
 
   interface Props {
     readonly item: ChecklistItemModel;
   }
 
-  defineProps<Props>();
+  const props = defineProps<Props>();
+  const route = useRoute();
+  const { removeItem } = useChecklistStore();
+
+  async function handleRemoveClick() {
+    if (typeof route.params.checklistId === 'string' && typeof props.item.id === 'string') {
+      await removeItem(route.params.checklistId, props.item.id);
+    }
+  }
 </script>
 
-<style module>
+<style lang="scss" module>
   .component {
+    height: 40px;
     display: grid;
-    grid-template-columns: 1fr auto;
-    padding: var(--border-radius-8) var(--spacing-12);
+    grid-template-columns: minmax(100px, 30%) auto auto;
+    align-items: center;
+    padding: 0 var(--spacing-12);
     background-color: var(--color-blue-100);
     border: 1px solid var(--color-blue-300);
     border-radius: var(--border-radius-12);
@@ -32,8 +51,21 @@
     color: var(--color-blue-800);
   }
 
+  .name {
+    @include overflow-ellipsis();
+  }
+
   .weight {
     color: var(--color-blue-700);
     font-size: var(--font-size-14);
   }
+
+  .actions {
+    justify-self: end;
+  }
+
+  .icon {
+    display: block;
+    cursor: pointer;
+  }
 </style>
diff --git a/app/components/checklists/ChecklistItemsList.vue b/app/components/checklists/ChecklistItemsList.vue
index c4d497c..2ed7d12 100644
--- a/app/components/checklists/ChecklistItemsList.vue
+++ b/app/components/checklists/ChecklistItemsList.vue
@@ -9,14 +9,9 @@
 </template>
 
 <script lang="ts" setup>
-  import type { ChecklistItemModel } from '~/models/checklist';
   import ChecklistItem from './ChecklistItem.vue';
 
-  interface Props {
-    readonly items: ChecklistItemModel[];
-  }
-
-  defineProps<Props>();
+  const { items } = useChecklistStore();
 </script>
 
 <style module>
diff --git a/app/components/checklists/ChecklistsItem.vue b/app/components/checklists/ChecklistsItem.vue
index f51e3f3..e6a8d0d 100644
--- a/app/components/checklists/ChecklistsItem.vue
+++ b/app/components/checklists/ChecklistsItem.vue
@@ -19,7 +19,7 @@
   const path = computed(() => `/checklists/${props.checklistId}`)
 </script>
 
-<style module>
+<style lang="scss" module>
   .component {
     display: flex;
     align-items: center;
@@ -51,8 +51,6 @@
   }
 
   .name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    @include overflow-ellipsis();
   }
 </style>
diff --git a/app/components/equipment/EquipmentTable.vue b/app/components/equipment/EquipmentTable.vue
index 5ddc6b2..2faccbd 100644
--- a/app/components/equipment/EquipmentTable.vue
+++ b/app/components/equipment/EquipmentTable.vue
@@ -85,7 +85,7 @@
   }
 </script>
 
-<style module>
+<style lang="scss" module>
   .component {
     border: 1px solid var(--input-color-main);
     border-radius: var(--border-radius-16);
@@ -124,6 +124,10 @@
       font-weight: var(--font-weight-medium);
     }
 
+    &:global(.name) {
+      @include overflow-ellipsis();
+    }
+
     &:global(.actions) {
       width: 8rem;
     }
diff --git a/app/components/layout/page-content.vue b/app/components/layout/page-content.vue
index b9f527f..3e4e35b 100644
--- a/app/components/layout/page-content.vue
+++ b/app/components/layout/page-content.vue
@@ -24,15 +24,13 @@
   defineProps<Props>()
 </script>
 
-<style module>
+<style lang="scss" module>
   .layout {
     display: grid;
     row-gap: var(--spacing-32);
   }
 
   .heading {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-wrap: nowrap;
+    @include overflow-ellipsis();
   }
 </style>
diff --git a/app/composables/use-checklist-items-data.ts b/app/composables/use-checklist-items-data.ts
index 64ac276..7ae53d2 100644
--- a/app/composables/use-checklist-items-data.ts
+++ b/app/composables/use-checklist-items-data.ts
@@ -1,12 +1,8 @@
-import type { ChecklistItemModel } from "~/models/checklist"
-
 export async function useChecklistItemsData(checklistId: string) {
-  const items = ref<ChecklistItemModel[]>([])
+  const { items } = useChecklistStore()
   const { data } = await useFetch(`/api/checklists/${checklistId}/items`)
 
   if (data.value !== undefined) {
     items.value = data.value
   }
-
-  return items
 }
diff --git a/app/composables/use-checklist-store.ts b/app/composables/use-checklist-store.ts
new file mode 100644
index 0000000..3a32f24
--- /dev/null
+++ b/app/composables/use-checklist-store.ts
@@ -0,0 +1,44 @@
+import type { ChecklistItemModel } from "~/models/checklist";
+
+export function useChecklistStore() {
+  const items = useState<ChecklistItemModel[]>('checklistItems', () => [])
+
+  async function removeItem(checklistId: string, itemId: string) {
+    try {
+      const deletedItem = await $fetch(`/api/checklists/${checklistId}/items/${itemId}`, {
+        method: 'DELETE'
+      });
+
+      items.value = items.value.filter(item => item.id !== deletedItem.id);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function addItem(checklistId: string, equipmentId: string) {
+    try {
+      const insertedItem = await $fetch(`/api/checklists/${checklistId}/items`, {
+        method: 'POST',
+
+        body: {
+          equipmentId
+        }
+      });
+
+      if (insertedItem !== undefined) {
+        items.value.push({
+          id: insertedItem.id,
+          equipment: insertedItem.equipment
+        })
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  return {
+    items,
+    removeItem,
+    addItem
+  }
+}
diff --git a/app/pages/checklists/[id].vue b/app/pages/checklists/[checklistId].vue
similarity index 76%
rename from app/pages/checklists/[id].vue
rename to app/pages/checklists/[checklistId].vue
index d879fa5..18d35bd 100644
--- a/app/pages/checklists/[id].vue
+++ b/app/pages/checklists/[checklistId].vue
@@ -18,7 +18,7 @@
         @search="search"
       >
         <template #option="{ option }">
-          <SearchOptionAdd @click="addItem(option)">
+          <SearchOptionAdd @click="handleOptionClick(option.id)">
             {{ option.name }}
           </SearchOptionAdd>
         </template>
@@ -42,13 +42,15 @@
   }
 
   const route = useRoute()
+  const { items, addItem } = useChecklistStore()
   const name = ref('')
-  const checklistId = route.params.id?.toString() ?? ''
+  const checklistId = route.params.checklistId?.toString() ?? ''
   const isDeleting = ref(false)
-  const options = ref<InventoryItem[]>([]);
-  const isSearching = ref(false);
+  const options = ref<InventoryItem[]>([])
+  const isSearching = ref(false)
   const { data: checklistData } = await useFetch(`/api/checklists/${checklistId}`)
-  const items = await useChecklistItemsData(checklistId)
+
+  await useChecklistItemsData(checklistId)
 
   if (checklistData.value !== undefined) {
     name.value = checklistData.value.name
@@ -100,27 +102,10 @@
     }
   }
 
-  async function addItem(item: InventoryItem) {
-    try {
-      const insertedItem = await $fetch(`/api/checklists/${checklistId}/items`, {
-        method: 'POST',
-
-        body: {
-          equipmentId: item.id
-        }
-      })
+  async function handleOptionClick(equipmentId: string) {
+    await addItem(checklistId, equipmentId)
 
-      options.value = options.value.filter(({ id }) => id !== item.id)
-
-      if (insertedItem !== undefined) {
-        items.value.push({
-          id: insertedItem.id,
-          equipment: insertedItem.equipment
-        })
-      }
-    } catch (error) {
-      console.error(error)
-    }
+    options.value = options.value.filter(({ id }) => id !== equipmentId)
   }
 </script>
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 27553d5..55405a7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,11 @@ export default defineNuxtConfig({
       preprocessorOptions: {
         scss: {
           api: 'modern-compiler',
-          additionalData: '@use "~/assets/styles/media" as *;'
+
+          additionalData: `
+@use "~/assets/styles/media" as *;
+@use "~/assets/styles/utils" as *;
+`
         }
       }
     }
diff --git a/server/api/checklists/[id]/index.delete.ts b/server/api/checklists/[checklistId]/index.delete.ts
similarity index 83%
rename from server/api/checklists/[id]/index.delete.ts
rename to server/api/checklists/[checklistId]/index.delete.ts
index e801071..3475715 100644
--- a/server/api/checklists/[id]/index.delete.ts
+++ b/server/api/checklists/[checklistId]/index.delete.ts
@@ -3,8 +3,8 @@ import { validateId } from '~~/server/utils/validate'
 
 export default defineEventHandler(async (event) => {
   const userId = await validateSessionUser(event)
-  const id = getRouterParam(event, 'id')
-  const checklistId = validateId(id)
+  const checklistIdParam = getRouterParam(event, 'checklistId')
+  const checklistId = validateId(checklistIdParam)
 
   const deleted = await event.context.db
     .delete(tables.checklists)
diff --git a/server/api/checklists/[id]/index.get.ts b/server/api/checklists/[checklistId]/index.get.ts
similarity index 85%
rename from server/api/checklists/[id]/index.get.ts
rename to server/api/checklists/[checklistId]/index.get.ts
index 62738c9..8fd4151 100644
--- a/server/api/checklists/[id]/index.get.ts
+++ b/server/api/checklists/[checklistId]/index.get.ts
@@ -8,8 +8,8 @@ interface ReturnData {
 
 export default defineEventHandler(async (event) : Promise<ReturnData> => {
   const userId = await validateSessionUser(event)
-  const id = getRouterParam(event, 'id')
-  const checklistId = validateId(id)
+  const checklistIdParam = getRouterParam(event, 'checklistId')
+  const checklistId = validateId(checklistIdParam)
 
   const result = await event.context.db.query.checklists
     .findFirst({
diff --git a/server/api/checklists/[checklistId]/items/[itemId].delete.ts b/server/api/checklists/[checklistId]/items/[itemId].delete.ts
new file mode 100644
index 0000000..80733f0
--- /dev/null
+++ b/server/api/checklists/[checklistId]/items/[itemId].delete.ts
@@ -0,0 +1,50 @@
+import { and, eq, exists } from 'drizzle-orm'
+import * as v from 'valibot'
+
+const paramsSchema = v.object({
+  checklistId: idValidator,
+  itemId: idValidator
+})
+
+type ParamsData = v.InferOutput<typeof paramsSchema>
+
+function validateParams(params: unknown) {
+  return v.parse(paramsSchema, params)
+}
+
+export default defineEventHandler(async (event) => {
+  const { db } = event.context
+  const userId = await validateSessionUser(event)
+  const { checklistId, itemId } = await getValidatedRouterParams(event, validateParams)
+
+  const [deletedItem] = await db.delete(tables.checklistItems)
+    .where(
+      and(
+        eq(tables.checklistItems.id, itemId),
+        eq(tables.checklistItems.checklistId, checklistId),
+        exists(
+          db.select({
+            id: tables.checklists.id
+          })
+            .from(tables.checklists)
+            .where(
+              and(
+                eq(tables.checklists.id, checklistId),
+                eq(tables.checklists.userId, userId)
+              )
+            )
+          )
+      )
+    )
+    .returning({
+      id: tables.checklistItems.id
+    })
+
+  if (deletedItem === undefined) {
+    throw createError({
+      statusCode: 404
+    })
+  }
+
+  return deletedItem
+})
diff --git a/server/api/checklists/[id]/items.get.ts b/server/api/checklists/[checklistId]/items/index.get.ts
similarity index 93%
rename from server/api/checklists/[id]/items.get.ts
rename to server/api/checklists/[checklistId]/items/index.get.ts
index 3226dd3..23ca862 100644
--- a/server/api/checklists/[id]/items.get.ts
+++ b/server/api/checklists/[checklistId]/items/index.get.ts
@@ -2,7 +2,7 @@ import { and, asc, eq } from 'drizzle-orm'
 
 export default defineEventHandler(async (event) => {
   const userId = await validateSessionUser(event)
-  const checklistIdParam = getRouterParam(event, 'id')
+  const checklistIdParam = getRouterParam(event, 'checklistId')
   const checklistId = validateId(checklistIdParam)
 
   const result = await event.context.db
diff --git a/server/api/checklists/[id]/items.post.ts b/server/api/checklists/[checklistId]/items/index.post.ts
similarity index 91%
rename from server/api/checklists/[id]/items.post.ts
rename to server/api/checklists/[checklistId]/items/index.post.ts
index 4bcf5e5..00e30ab 100644
--- a/server/api/checklists/[id]/items.post.ts
+++ b/server/api/checklists/[checklistId]/items/index.post.ts
@@ -2,10 +2,7 @@ import { eq } from 'drizzle-orm'
 import * as v from 'valibot'
 
 const bodySchema = v.object({
-  equipmentId: v.pipe(
-    v.string(),
-    v.nonEmpty()
-  )
+  equipmentId: idValidator
 })
 
 type BodyData = v.InferOutput<typeof bodySchema>
@@ -19,7 +16,7 @@ export default defineEventHandler(async (event) => {
 
   await validateSessionUser(event)
 
-  const checklistIdParam = getRouterParam(event, 'id')
+  const checklistIdParam = getRouterParam(event, 'checklistId')
   const checklistId = validateId(checklistIdParam)
   const { equipmentId } = await readValidatedBody(event, validateBody)
 
diff --git a/server/utils/validate.ts b/server/utils/validate.ts
index 5c2679e..161e0cd 100644
--- a/server/utils/validate.ts
+++ b/server/utils/validate.ts
@@ -1,6 +1,8 @@
 import * as v from 'valibot'
 import type { H3Event, EventHandlerRequest } from 'h3'
 
+export const idValidator = v.pipe(v.string(), v.nonEmpty())
+
 export async function validateSessionUser(event: H3Event<EventHandlerRequest>) {
   const session = await useAppSession(event)
   const { userId } = session.data
@@ -15,8 +17,7 @@ export async function validateSessionUser(event: H3Event<EventHandlerRequest>) {
 }
 
 export function validateId(id: unknown) {
-  const schema = v.pipe(v.string(), v.nonEmpty())
-  const { issues, output, success } = v.safeParse(schema, id)
+  const { issues, output, success } = v.safeParse(idValidator, id)
 
   if (success) {
     return output