diff --git a/app/app.vue b/app/app.vue
index 4099cf0..812c2f3 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -64,5 +64,22 @@
         cursor: not-allowed;
       }
     }
+
+    // Reset default p styles
+    p {
+      margin: 0;
+    }
+
+    // Reset default ul styles
+    ul {
+      margin: 0;
+      padding: 0;
+      margin-left: 2rem;
+    }
+
+    // Reset default li styles
+    li {
+      line-height: 1.5em;
+    }
   }
 </style>
diff --git a/app/assets/styles/_base.scss b/app/assets/styles/_base.scss
index 0048c5a..22f8699 100644
--- a/app/assets/styles/_base.scss
+++ b/app/assets/styles/_base.scss
@@ -193,6 +193,9 @@
 }
 
 :root {
+  // Text
+  --text-color-secondary: color-mix(in oklch, var(--text), transparent 30%);
+
   // Overlay
   --overlay-color-background: oklch(0 0 0 / 50%);
   --overlay-backdrop-filter: blur(4px);
diff --git a/app/components/PerdLink.vue b/app/components/PerdLink.vue
index 59ca9c7..d50cf1a 100644
--- a/app/components/PerdLink.vue
+++ b/app/components/PerdLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink :class="$style.root">
+  <NuxtLink :class="$style.component">
     <slot />
   </NuxtLink>
 </template>
@@ -13,25 +13,22 @@
 </script>
 
 <style module>
-  .root {
+  .component {
     outline: none;
     color: var(--primary-700);
-    border-bottom: 1px solid transparent;
+    position: relative;
     text-decoration: none;
-
-    transition:
-      border-color var(--transition-time-quick),
-      color var(--transition-time-quick);
+    transition: color var(--transition-time-quick);
+    cursor: pointer;
 
     &:hover,
     &:focus-visible {
+      text-decoration: underline;
       color: var(--primary-600);
-      border-color: var(--primary-600);
     }
 
     &:active {
       color: var(--primary-500);
-      border-color: var(--primary-500);
     }
   }
 </style>
diff --git a/app/components/PerdTable/PerdTable.vue b/app/components/PerdTable/PerdTable.vue
index e11560f..837e202 100644
--- a/app/components/PerdTable/PerdTable.vue
+++ b/app/components/PerdTable/PerdTable.vue
@@ -42,7 +42,7 @@
   defineProps<Props>();
 </script>
 
-<style module>
+<style lang="scss" module>
   .component {
     width: 100%;
     table-layout: fixed;
@@ -70,6 +70,8 @@
   }
 
   .cell {
+    @include overflow-ellipsis();
+
     padding: var(--table-cell-padding);
   }
 </style>
diff --git a/app/components/PerdTag.vue b/app/components/PerdTag.vue
new file mode 100644
index 0000000..a3b4e9e
--- /dev/null
+++ b/app/components/PerdTag.vue
@@ -0,0 +1,51 @@
+<template>
+  <div :class="$style.component">
+    <Icon
+      :name="icon"
+      size="14px"
+    />
+
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  interface Props {
+    readonly icon: string;
+    readonly color?: 'green' | 'gray' | 'blue';
+  }
+
+  const { color } = defineProps<Props>()
+
+  const tagColor = computed(() => {
+    switch (color) {
+      case 'green': {
+        return 'oklch(95% 0.12 140)'
+      }
+
+      case 'blue': {
+        return 'oklch(95% 0.1 250)'
+      }
+
+      case 'gray':
+      default: {
+        return 'oklch(90% 0 0)'
+      }
+    }
+  });
+</script>
+
+<style module>
+  .component {
+    display: flex;
+    align-items: center;
+    color: var(--text-color-secondary);
+    column-gap: var(--spacing-2);
+    font-size: var(--font-size-14);
+    background-color: v-bind(tagColor);
+    padding: var(--spacing-4) var(--spacing-8);
+    border-radius: var(--border-radius-8);
+    font-weight: var(--font-weight-medium);
+    border: 1px solid color-mix(in oklch, v-bind(tagColor), black 5%);
+  }
+</style>
diff --git a/app/components/checklists/ChecklistItem.vue b/app/components/checklists/ChecklistItem.vue
index 7d17933..d72fbfa 100644
--- a/app/components/checklists/ChecklistItem.vue
+++ b/app/components/checklists/ChecklistItem.vue
@@ -10,7 +10,16 @@
     />
 
     <div :class="$style.name">
-      {{ item.equipment.name}}
+      <temlplate v-if="checkMode">
+        {{ item.equipment.name }}
+      </temlplate>
+
+      <PerdLink
+        v-else
+        :to="`/equipment/item/${item.equipment.id}`"
+      >
+        {{ item.equipment.name}}
+      </PerdLink>
     </div>
 
     <div
@@ -37,6 +46,7 @@
   import type { ChecklistItemModel } from '~/models/checklist'
   import IconButton from '@/components/IconButton.vue'
   import PerdToggle from '@/components/PerdToggle.vue'
+  import PerdLink from '@/components/PerdLink.vue';
 
   interface Props {
     readonly item: ChecklistItemModel;
diff --git a/app/components/equipment/AddEquipmentForm.vue b/app/components/equipment/AddEquipmentForm.vue
index 98cae81..b604db3 100644
--- a/app/components/equipment/AddEquipmentForm.vue
+++ b/app/components/equipment/AddEquipmentForm.vue
@@ -125,7 +125,7 @@
 
       const descriptionValue = description.value === '' ? undefined : description.value
 
-      await $fetch('/api/equipment', {
+      await $fetch('/api/equipment/items', {
         method: 'POST',
 
         body: {
diff --git a/app/components/equipment/EquipmentCard.vue b/app/components/equipment/EquipmentCard.vue
index 9757d73..f342bbe 100644
--- a/app/components/equipment/EquipmentCard.vue
+++ b/app/components/equipment/EquipmentCard.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="$style.component">
+  <NuxtLink
+    :to="`/equipment/item/${id}`"
+    :class="$style.component"
+  >
     <div :class="$style.name">
       {{ name }}
     </div>
@@ -7,7 +10,7 @@
     <div :class="$style.weight">
       {{ formattedWeight }}
     </div>
-  </div>
+  </NuxtLink>
 </template>
 
 <script lang="ts" setup>
@@ -23,6 +26,8 @@
 
 <style module>
   .component {
+    text-decoration: none;
+    color: inherit;
     display: grid;
     justify-content: space-between;
     row-gap: var(--spacing-8);
diff --git a/app/components/equipment/EquipmentTable.vue b/app/components/equipment/EquipmentTable.vue
index 7ff2b77..6ae0630 100644
--- a/app/components/equipment/EquipmentTable.vue
+++ b/app/components/equipment/EquipmentTable.vue
@@ -5,9 +5,12 @@
     :class="$style.table"
   >
     <template #name="{ rowData }">
-      <span :class="$style.nameCell">
+      <PerdLink
+        :class="$style.nameLink"
+        :to="`/equipment/item/${rowData.id}`"
+      >
         {{ rowData.name }}
-      </span>
+      </PerdLink>
     </template>
 
     <template #weight="{ rowData }">
@@ -18,6 +21,7 @@
 
 <script lang="ts" setup>
   import PerdTable from '@/components/PerdTable/PerdTable.vue';
+  import PerdLink from '@/components/PerdLink.vue';
 
   interface Item {
     readonly id: string;
@@ -47,7 +51,7 @@
     }
   }
 
-  .nameCell {
+  .nameLink {
     font-weight: var(--font-weight-medium);
   }
 </style>
diff --git a/app/components/layout/PageContent.vue b/app/components/layout/PageContent.vue
index ed5e719..62b457d 100644
--- a/app/components/layout/PageContent.vue
+++ b/app/components/layout/PageContent.vue
@@ -22,7 +22,7 @@
   import PerdHeading from '~/components/PerdHeading.vue'
 
   interface Props {
-    readonly pageTitle: string;
+    readonly pageTitle?: string;
   }
 
   defineProps<Props>()
diff --git a/app/components/manager/equipment/EquipmentCard.vue b/app/components/manager/equipment/EquipmentCard.vue
index 68cfbaa..dea3d05 100644
--- a/app/components/manager/equipment/EquipmentCard.vue
+++ b/app/components/manager/equipment/EquipmentCard.vue
@@ -1,7 +1,10 @@
 <template>
-  <div :class="$style.component">
+  <NuxtLink
+    :to="`/equipment/item/${id}`"
+    :class="$style.component"
+  >
     {{ name }}
-  </div>
+  </NuxtLink>
 </template>
 
 <script lang="ts" setup>
@@ -15,6 +18,8 @@
 
 <style module>
   .component {
+    text-decoration: none;
+    color: inherit;
     background-color: var(--accent-50);
     border: 1px solid var(--accent-200);
     border-radius: var(--border-radius-8);
diff --git a/app/components/manager/equipment/EquipmentTable.vue b/app/components/manager/equipment/EquipmentTable.vue
index cfd11dd..d7552e8 100644
--- a/app/components/manager/equipment/EquipmentTable.vue
+++ b/app/components/manager/equipment/EquipmentTable.vue
@@ -5,15 +5,19 @@
     :class="$style.table"
   >
     <template #name="{ rowData }">
-      <span :class="$style.nameCell">
+      <PerdLink
+        :class="$style.nameLink"
+        :to="`/equipment/item/${rowData.id}`"
+      >
         {{ rowData.name }}
-      </span>
+      </PerdLink>
     </template>
   </PerdTable>
 </template>
 
 <script lang="ts" setup>
   import PerdTable from '@/components/PerdTable/PerdTable.vue';
+  import PerdLink from '@/components/PerdLink.vue';
 
   interface Item {
     readonly id: string;
@@ -41,7 +45,7 @@
     }
   }
 
-  .nameCell {
+  .nameLink {
     font-weight: var(--font-weight-medium);
   }
 </style>
diff --git a/app/pages/equipment/index.vue b/app/pages/equipment/index.vue
index 23e8557..875f78c 100644
--- a/app/pages/equipment/index.vue
+++ b/app/pages/equipment/index.vue
@@ -71,7 +71,7 @@
   const searchValue = ref('')
   const searchQuery = computed(() => searchValue.value === '' ? undefined : searchValue.value)
 
-  const { data, error, status, refresh } = await useFetch('/api/equipment', {
+  const { data, error, status, refresh } = await useFetch('/api/equipment/items', {
     watch: false,
 
     query: {
diff --git a/app/pages/equipment/item/[itemId].vue b/app/pages/equipment/item/[itemId].vue
new file mode 100644
index 0000000..064a0a8
--- /dev/null
+++ b/app/pages/equipment/item/[itemId].vue
@@ -0,0 +1,180 @@
+<template>
+  <PageContent :page-title="itemName">
+    <EmptyState
+      v-if="error"
+      :icon="errorIcon"
+    >
+      {{ errorText }}
+    </EmptyState>
+
+    <div
+      v-else
+      :class="$style.content"
+    >
+      <img
+        src="public/equipment-item-placeholder.webp"
+        alt="Equipment item placeholder"
+        :class="$style.image"
+      />
+
+      <div
+        v-if="description"
+        :class="$style.tags"
+      >
+        <PerdTag
+          icon="tabler:weight"
+          color="gray"
+        >
+          {{ formattedWeight }}
+        </PerdTag>
+
+        <PerdTag
+          v-if="data?.group"
+          icon="tabler:cube"
+          color="blue"
+        >
+          {{ data.group.name }}
+        </PerdTag>
+
+        <PerdTag
+          v-if="data?.type"
+          icon="tabler:tag"
+          color="green"
+        >
+          {{ data.type.name }}
+        </PerdTag>
+      </div>
+
+      <div :class="$style.detailsSection">
+        <PerdHeading :level="2">
+          Details
+        </PerdHeading>
+
+        <ul>
+          <li>
+            <strong>Name:</strong> {{ itemName }}
+          </li>
+
+          <li>
+            <strong>Group:</strong> {{ data?.group?.name }}
+          </li>
+
+          <li>
+            <strong>Type:</strong> {{ data?.type?.name }}
+          </li>
+
+          <li>
+            <strong>Weight:</strong> {{ formattedWeight }}
+          </li>
+        </ul>
+      </div>
+
+      <div
+        v-if="description"
+        :class="$style.descriptionSection"
+      >
+        <PerdHeading :level="2">
+          Description
+        </PerdHeading>
+
+        <p :class="$style.description">
+          {{ description }}
+        </p>
+      </div>
+    </div>
+  </PageContent>
+</template>
+
+<script lang="ts" setup>
+  import EmptyState from '~/components/EmptyState.vue';
+  import PageContent from '~/components/layout/PageContent.vue'
+  import PerdHeading from '~/components/PerdHeading.vue';
+  import PerdTag from '~/components/PerdTag.vue';
+
+  const route = useRoute()
+  const itemId = computed(() => route.params.itemId)
+  const { data, error } = await useFetch(`/api/equipment/items/${itemId.value}`)
+  const itemName = computed(() => data.value?.equipment.name ?? '¯\\_(ツ)_/¯')
+
+  const errorIcon = computed(() => {
+    if (error.value?.statusCode === 404) {
+      return 'streamline-emojis:man-shrugging-1'
+    }
+
+    return 'streamline-emojis:face-screaming-in-fear'
+  })
+
+  const errorText = computed(() => {
+    if (error.value?.statusCode === 404) {
+      return 'Item not found'
+    }
+
+    return 'Something went wrong'
+  })
+
+  const description = computed(() => data.value?.equipment.description ?? null)
+  const weight = computed(() => data.value?.equipment.weight ?? 0)
+  const formattedWeight = computed(() => formatWeight(weight.value))
+</script>
+
+<style lang="scss" module>
+  @mixin section() {
+    display: grid;
+    row-gap: var(--spacing-16);
+  }
+
+  .content {
+    display: grid;
+    row-gap: var(--spacing-24);
+    grid-template-areas:
+      'image'
+      'tags'
+      'details'
+      'description';
+
+    @include tablet() {
+      column-gap: var(--spacing-16);
+      grid-template-columns: auto 1fr;
+      align-items: start;
+      grid-template-areas:
+        'image details'
+        'tags tags'
+        'description description';
+    }
+  }
+
+  .image {
+    grid-area: image;
+    width: 100%;
+    aspect-ratio: 3 / 2;
+    object-fit: cover;
+    border-radius: var(--border-radius-24);
+    max-width: 400px;
+  }
+
+  .detailsSection {
+    @include section();
+
+    grid-area: details;
+  }
+
+  .descriptionSection {
+    @include section();
+
+    grid-area: description;
+  }
+
+  .description {
+    white-space: pre-wrap;
+    color: var(--text-color-secondary);
+    line-height: 1.5;
+    text-wrap: balance;
+    overflow: auto;
+  }
+
+  .tags {
+    grid-area: tags;
+    display: flex;
+    column-gap: var(--spacing-8);
+  }
+</style>
diff --git a/app/pages/inventory.vue b/app/pages/inventory.vue
index b296853..ae3d0ad 100644
--- a/app/pages/inventory.vue
+++ b/app/pages/inventory.vue
@@ -22,9 +22,12 @@
       :columns="columns"
     >
       <template #name="{ rowData }">
-        <span :class="$style.name">
+        <PerdLink
+          :class="$style.nameLink"
+          :to="`/equipment/item/${rowData.id}`"
+        >
           {{ rowData.name }}
-        </span>
+        </PerdLink>
       </template>
 
       <template #weight="{ rowData }">
@@ -60,6 +63,7 @@
   import EmptyState from '~/components/EmptyState.vue';
   import PerdTable from '~/components/PerdTable/PerdTable.vue';
   import PerdButton from '~/components/PerdButton.vue';
+  import PerdLink from '~/components/PerdLink.vue';
 
   interface EquipmentItem {
     readonly id: number;
@@ -154,7 +158,7 @@
     }
   }
 
-  .name {
+  .nameLink {
     font-weight: var(--font-weight-medium);
   }
 
diff --git a/app/pages/manager/equipment/index.vue b/app/pages/manager/equipment/index.vue
index 4271ade..04ad12e 100644
--- a/app/pages/manager/equipment/index.vue
+++ b/app/pages/manager/equipment/index.vue
@@ -83,7 +83,7 @@
   const router = useRouter()
   const page = ref(1)
 
-  const { data, error } = await useFetch('/api/equipment/drafts', {
+  const { data, error } = await useFetch('/api/search/equipment-drafts', {
     query: {
       page
     },
diff --git a/public/equipment-item-placeholder.webp b/public/equipment-item-placeholder.webp
new file mode 100644
index 0000000..1a43992
Binary files /dev/null and b/public/equipment-item-placeholder.webp differ
diff --git a/server/api/equipment/items/[itemId].get.ts b/server/api/equipment/items/[itemId].get.ts
new file mode 100644
index 0000000..f64e3a3
--- /dev/null
+++ b/server/api/equipment/items/[itemId].get.ts
@@ -0,0 +1,57 @@
+import { eq } from 'drizzle-orm'
+import * as v from 'valibot'
+
+const paramsSchema = v.object({
+  itemId: stringToIntegerValidator
+})
+
+function validateParams(params: unknown) {
+  return v.parse(paramsSchema, params)
+}
+
+export default defineEventHandler(async (event) => {
+  const { itemId } = await getValidatedRouterParams(event, validateParams)
+
+  const item = await event.context.db
+  .select({
+    equipment: {
+      id: tables.equipment.id,
+      name: tables.equipment.name,
+      description: tables.equipment.description,
+      weight: tables.equipment.weight
+    },
+
+    group: {
+      id: tables.equipmentTypes.id,
+      name: tables.equipmentTypes.name
+    },
+
+    type: {
+      id: tables.equipmentGroups.id,
+      name: tables.equipmentGroups.name
+    }
+  })
+  .from(tables.equipment)
+  .where(
+    eq(tables.equipment.id, itemId)
+  )
+  .leftJoin(
+    tables.equipmentTypes,
+    eq(tables.equipment.equipmentTypeId, tables.equipmentTypes.id)
+  )
+  .leftJoin(
+    tables.equipmentGroups,
+    eq(tables.equipment.equipmentGroupId, tables.equipmentGroups.id)
+  )
+
+  const foundItem = item[0]
+
+  if (foundItem === undefined) {
+    throw createError({
+      statusCode: 404,
+      message: 'Item not found'
+    })
+  }
+
+  return foundItem
+})
diff --git a/server/api/equipment/index.get.ts b/server/api/equipment/items/index.get.ts
similarity index 100%
rename from server/api/equipment/index.get.ts
rename to server/api/equipment/items/index.get.ts
diff --git a/server/api/equipment/index.post.ts b/server/api/equipment/items/index.post.ts
similarity index 100%
rename from server/api/equipment/index.post.ts
rename to server/api/equipment/items/index.post.ts
diff --git a/server/api/equipment/drafts.get.ts b/server/api/search/equipment-drafts.get.ts
similarity index 100%
rename from server/api/equipment/drafts.get.ts
rename to server/api/search/equipment-drafts.get.ts