diff --git a/apps/api/apps/catalog/routes/things.js b/apps/api/apps/catalog/routes/things.js
index 63ff70d..0b91a60 100644
--- a/apps/api/apps/catalog/routes/things.js
+++ b/apps/api/apps/catalog/routes/things.js
@@ -2,6 +2,7 @@ const express = require('express');
 const router = express.Router();
 const { getCatalogData } = require('../services/catalog');
 const { getThingDetails } = require('../services/thingDetails');
+const { getItemDetails } = require('../services/itemDetails');
 
 router.get('/', async (req, res) => {
     try {
@@ -22,4 +23,14 @@ router.get('/things/:id', async (req, res) => {
     }
 });
 
+router.get('/items/:id', async (req, res) => {
+    const { id } = req.params;
+    try {
+        res.send(await getItemDetails(id));
+    } catch (error) {
+        console.error(error);
+        res.status(error.status || 500).send({ errors: [error] });
+    }
+});
+
 module.exports = router;
\ No newline at end of file
diff --git a/apps/api/apps/catalog/services/itemDetails.js b/apps/api/apps/catalog/services/itemDetails.js
new file mode 100644
index 0000000..160a95f
--- /dev/null
+++ b/apps/api/apps/catalog/services/itemDetails.js
@@ -0,0 +1,25 @@
+const { fetchItem } = require("../../../services/inventory");
+const mapItemStatus = require("./mapItemStatus");
+
+async function getItemDetails(id) {
+  const details = await fetchItem(null, { recordId: id });
+
+  return {
+    id: details.id,
+    name: details.name,
+    number: details.number,
+    spanishName: details.name_es,
+    available: details.available,
+    availableDate: details.dueBack,
+    condition: details.condition,
+    eyeProtection: details.eyeProtection,
+    totalLoans: details.totalLoans,
+    image: details.images.length ? details.images[0] : undefined,
+    manuals: details.manuals?.map((m) => m.url) || [],
+    status: mapItemStatus(details)
+  };
+}
+
+module.exports = {
+  getItemDetails
+}
\ No newline at end of file
diff --git a/apps/api/apps/catalog/services/mapItemStatus.js b/apps/api/apps/catalog/services/mapItemStatus.js
new file mode 100644
index 0000000..dafc981
--- /dev/null
+++ b/apps/api/apps/catalog/services/mapItemStatus.js
@@ -0,0 +1,9 @@
+function mapItemStatus(item) {
+  if (item.available) {
+    return 'available';
+  }
+
+  return 'checkedOut';
+}
+
+module.exports = mapItemStatus;
\ No newline at end of file
diff --git a/apps/api/apps/catalog/services/thingDetails.js b/apps/api/apps/catalog/services/thingDetails.js
index 8d9ced8..a2f7434 100644
--- a/apps/api/apps/catalog/services/thingDetails.js
+++ b/apps/api/apps/catalog/services/thingDetails.js
@@ -1,4 +1,5 @@
 const { fetchThing } = require("../../../services/things");
+const mapItemStatus = require("./mapItemStatus");
 
 async function getThingDetails(id) {
   const details = await fetchThing(id);
@@ -22,14 +23,6 @@ async function getThingDetails(id) {
   };
 }
 
-function mapItemStatus(item) {
-  if (item.available) {
-    return 'available';
-  }
-
-  return 'checkedOut';
-}
-
 module.exports = {
   getThingDetails
 }
\ No newline at end of file
diff --git a/apps/api/package.json b/apps/api/package.json
index 6d4278e..bd55a86 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pvdthings-api",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "description": "",
   "main": "server.js",
   "scripts": {
diff --git a/apps/api/services/inventory/mapItem.js b/apps/api/services/inventory/mapItem.js
index 4430eb7..8e7c16b 100644
--- a/apps/api/services/inventory/mapItem.js
+++ b/apps/api/services/inventory/mapItem.js
@@ -6,12 +6,14 @@ function mapItem(record) {
       id: record.id,
       number: Number(record.get('ID')),
       name: record.get('Name')[0],
+      name_es: record.get('name_es')?.[0],
       available: record.get('Active Loans') === 0
           && !hidden
           && !isThingHidden,
       hidden: hidden || isThingHidden,
       brand: record.get('Brand'),
       description: record.get('Description'),
+      dueBack: record.get('Due Back')?.[0],
       estimatedValue: record.get('Estimated Value'),
       eyeProtection: Boolean(record.get('Eye Protection')),
       condition: record.get('Condition'),
diff --git a/apps/api/services/inventory/service.js b/apps/api/services/inventory/service.js
index 1e20f33..06932c0 100644
--- a/apps/api/services/inventory/service.js
+++ b/apps/api/services/inventory/service.js
@@ -7,6 +7,7 @@ const inventoryFields = [
   'Name', 
   'Brand',
   'Description',
+  'Due Back',
   'Eye Protection',
   'Active Loans', 
   'Total Loans',
@@ -30,7 +31,13 @@ const fetchItems = async () => {
   return records.map((r) => mapItem(r));
 }
 
-const fetchItem = async (id) => {
+// Tech Debt: "id" here is actually the item number
+const fetchItem = async (id, { recordId } = { recordId: undefined }) => {
+  if (recordId) {
+    const record = await items.find(recordId);
+    return mapItem(record);
+  }
+
   const records = await items.select({
       view: 'api_fetch_things',
       fields: inventoryFields,
diff --git a/apps/web/package.json b/apps/web/package.json
index 33d2db6..b01d228 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@library_os/web",
-	"version": "0.16.1",
+	"version": "0.17.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
diff --git a/apps/web/src/lib/components/Shell/Drawer/NavigationButton/BackButton.svelte b/apps/web/src/lib/components/Shell/Drawer/NavigationButton/BackButton.svelte
new file mode 100644
index 0000000..d7add43
--- /dev/null
+++ b/apps/web/src/lib/components/Shell/Drawer/NavigationButton/BackButton.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { pop } from "../drawer";
+
+  let className: string = '';
+  export { className as class };
+</script>
+
+<button class="btn btn-circle bg-white outline-none shadow {className}" on:click={pop}>
+  <span class="ph-bold ph-arrow-left text-xl" />
+</button>
\ No newline at end of file
diff --git a/apps/web/src/lib/components/Shell/Drawer/NavigationButton/CloseButton.svelte b/apps/web/src/lib/components/Shell/Drawer/NavigationButton/CloseButton.svelte
new file mode 100644
index 0000000..cc4058b
--- /dev/null
+++ b/apps/web/src/lib/components/Shell/Drawer/NavigationButton/CloseButton.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { close } from "../drawer";
+
+  let className: string = '';
+  export { className as class };
+</script>
+
+<button class="btn btn-circle bg-white outline-none shadow {className}" on:click={close}>
+  <span class="ph-bold ph-x text-xl" />
+</button>
\ No newline at end of file
diff --git a/apps/web/src/lib/components/Shell/Drawer/NavigationButton/NavigationButton.svelte b/apps/web/src/lib/components/Shell/Drawer/NavigationButton/NavigationButton.svelte
new file mode 100644
index 0000000..2d95a99
--- /dev/null
+++ b/apps/web/src/lib/components/Shell/Drawer/NavigationButton/NavigationButton.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import BackButton from "./BackButton.svelte";
+	import CloseButton from "./CloseButton.svelte";
+  import { poppable } from "../drawer";
+
+  let className: string = '';
+  export { className as class };
+</script>
+
+{#if $poppable}
+  <BackButton class={className} />
+{:else}
+  <CloseButton class={className} />
+{/if}
\ No newline at end of file
diff --git a/apps/web/src/lib/components/Shell/Drawer/NavigationButton/index.ts b/apps/web/src/lib/components/Shell/Drawer/NavigationButton/index.ts
new file mode 100644
index 0000000..8e6a1f1
--- /dev/null
+++ b/apps/web/src/lib/components/Shell/Drawer/NavigationButton/index.ts
@@ -0,0 +1 @@
+export { default as NavigationButton } from "./NavigationButton.svelte";
\ No newline at end of file
diff --git a/apps/web/src/lib/components/Shell/Drawer/drawer.ts b/apps/web/src/lib/components/Shell/Drawer/drawer.ts
new file mode 100644
index 0000000..f35d5b8
--- /dev/null
+++ b/apps/web/src/lib/components/Shell/Drawer/drawer.ts
@@ -0,0 +1,53 @@
+import { derived, writable } from 'svelte/store';
+
+const emptyState = Object.freeze({ views: [] });
+
+let previousViewsLength = 0;
+
+export type DrawerState = {
+	views: DrawerContent[];
+};
+
+export type DrawerContent = {
+	component: any;
+	props: any;
+};
+
+const state = writable<DrawerState>(emptyState);
+
+export const view = derived(state, (s) => {
+	return s.views.length ? s.views[0] : undefined;
+});
+
+export const push = (component: any, props: any) => {
+	state.update((s) => ({
+		views: [{ component, props }, ...s.views]
+	}));
+};
+
+export const pop = () => {
+  state.update((s) => ({
+		views: s.views.slice(1)
+	}));
+};
+
+export const poppable = derived(state, (s) => s.views.length && s.views.length > 1);
+
+export const close = () => {
+	state.update((s) => emptyState);
+};
+
+// pushing second view does not work
+export const toggle = (callback: () => void) => {
+	return state.subscribe(s => {
+		if (previousViewsLength === 0 && s.views.length) {
+			callback();
+		}
+
+		if (previousViewsLength && !s.views.length) {
+			callback();
+		}
+
+		previousViewsLength = s.views.length;
+	});
+};
\ No newline at end of file
diff --git a/apps/web/src/lib/components/Shell/Drawer/index.ts b/apps/web/src/lib/components/Shell/Drawer/index.ts
new file mode 100644
index 0000000..62ebccc
--- /dev/null
+++ b/apps/web/src/lib/components/Shell/Drawer/index.ts
@@ -0,0 +1,2 @@
+export * from "./drawer";
+export * from "./NavigationButton";
\ No newline at end of file
diff --git a/apps/web/src/lib/components/Shell/Shell.svelte b/apps/web/src/lib/components/Shell/Shell.svelte
index ea9e55c..4fbdac5 100644
--- a/apps/web/src/lib/components/Shell/Shell.svelte
+++ b/apps/web/src/lib/components/Shell/Shell.svelte
@@ -1,26 +1,13 @@
 <script lang="ts">
-	import { setContext } from "svelte";
+	import { onDestroy } from "svelte";
+	import { NavigationButton } from "./Drawer/NavigationButton";
+	import { toggle, view } from "./Drawer";
 
 	let drawerToggle: HTMLLabelElement;
-	let drawerContent: any;
-	let drawerContentProps: any;
 
-	const drawer = {
-		open: (content: any, props = {}) => {
-			drawerContent = content;
-			drawerContentProps = props;
-			drawerToggle.click();
-		},
-		close: () => {
-			drawerToggle.click();
-			drawerContent = null;
-			drawerContentProps = null;
-		}
-	};
+	const unsubscribe = toggle(() => drawerToggle?.click());
 
-	setContext('shell', {
-		drawer
-	});
+	onDestroy(unsubscribe);
 </script>
 
 <div class="drawer drawer-end">
@@ -30,9 +17,12 @@
 		<slot />
 	</div>
 	<div class="drawer-side z-50">
-    <label for="drawer-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="bg-base-200 text-base-content flex flex-col h-dvh w-screen overflow-hidden md:w-80 lg:w-96 relative">
-      <svelte:component this={drawerContent} {...drawerContentProps} />
+    <div class="drawer-overlay !cursor-default" />
+    <div class="bg-neutral-200 flex flex-col h-dvh w-screen overflow-hidden md:w-80 lg:w-96 relative">
+      {#if $view}
+				<NavigationButton class="absolute top-4 left-4 z-50" />
+				<svelte:component this={$view.component} {...$view.props} />
+			{/if}
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/apps/web/src/lib/components/Shell/ShellContext.ts b/apps/web/src/lib/components/Shell/ShellContext.ts
deleted file mode 100644
index 543227b..0000000
--- a/apps/web/src/lib/components/Shell/ShellContext.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { getContext } from "svelte";
-
-export type ShellContext = {
-  drawer: DrawerContext;
-};
-
-export type DrawerContext = {
-  open: (content: any, props: any) => void;
-  close: () => void;
-};
-
-export function getShellContext(): ShellContext {
-  return getContext('shell');
-}
\ No newline at end of file
diff --git a/apps/web/src/lib/components/things/Details/Details.svelte b/apps/web/src/lib/components/things/Details/Details.svelte
index 1219ff4..5bed547 100644
--- a/apps/web/src/lib/components/things/Details/Details.svelte
+++ b/apps/web/src/lib/components/things/Details/Details.svelte
@@ -1,44 +1,48 @@
 <script lang="ts">
 	import BoxIcon from '$lib/icons/box.svg';
-	import CloseButton from '$lib/components/CloseButton.svelte';
-	import { getShellContext } from '$lib/components/Shell/ShellContext';
 	import InventoryItem from './InventoryItem.svelte';
 	import BookmarkButton from './BookmarkButton.svelte';
 	import { bookmarks } from '$lib/stores/bookmarks';
 	import { locale, t } from '$lib/language/translate';
-	import Divider from "$lib/components/Divider.svelte";
-	import Wrap from "$lib/components/Wrap.svelte";
-	import Title from "./Title.svelte";
-	import List from "./List.svelte";
-	import Section from "./Section.svelte";
-	import { Badge, type BadgeType } from "$lib/components/Badge";
+	import Divider from '$lib/components/Divider.svelte';
+	import Wrap from '$lib/components/Wrap.svelte';
+	import Title from './Title.svelte';
+	import List from './List.svelte';
+	import Section from './Section.svelte';
+	import { Badge, type BadgeType } from '$lib/components/Badge';
 	import type { InventoryItemModel } from '$lib/models/ThingDetails';
+	import { createEventDispatcher } from 'svelte';
 
 	export let id: string;
 	export let name: string;
-	export let image: string|undefined;
+	export let image: string | undefined;
 	export let stock: number;
 	export let available: number;
-	export let availableDate: string|undefined;
+	export let availableDate: string | undefined;
 	export let categories: string[];
 	export let items: InventoryItemModel[];
 
-	const { drawer } = getShellContext();
-
 	$: stockBadgeVariant = (available ? 'success' : 'error') as BadgeType;
 
 	$: bookmarked = bookmarks.isBookmarked(id);
 	$: isBookmarked = $bookmarked;
+
+	const dispatch = createEventDispatcher();
+
+	const onClickItem = (item: InventoryItemModel) => {
+		dispatch('clickItem', item);
+	};
 </script>
 
 <BookmarkButton {id} />
-<section class="flex-grow-0 flex-shrink-0 h-48 md:h-64 border-b border-base-300 overflow-hidden relative shadow-sm">
+<section
+	class="flex-grow-0 flex-shrink-0 h-48 md:h-64 border-b border-base-300 overflow-hidden relative shadow-sm"
+>
 	<img
 		src={image ?? BoxIcon}
 		alt={name}
 		class="object-center object-contain bg-white h-full w-full"
 	/>
-	<CloseButton class="absolute top-4 right-4" on:click={drawer.close} />
 </section>
 <div class="p-4 flex flex-col flex-grow overflow-y-scroll">
 	<section>
@@ -49,7 +53,7 @@
 				<Badge>{$t('Due Back')} {new Date(availableDate).toLocaleDateString($locale)}</Badge>
 			{/if}
 			{#if isBookmarked}
-				<Badge type='primary'>{$t('Bookmarked')}</Badge>
+				<Badge type="primary">{$t('Bookmarked')}</Badge>
 			{/if}
 		</Wrap>
 	</section>
@@ -61,7 +65,7 @@
 					<Badge>{$t(category)}</Badge>
 				{/each}
 			{:else}
-				<div>None</div>
+				<div>{$t('None')}</div>
 			{/if}
 		</Wrap>
 	</Section>
@@ -70,10 +74,19 @@
 		{@const availableItems = items.filter((i) => i.status === 'available' && !i.hidden)}
 		{@const unavailableItems = items.filter((i) => i.status === 'checkedOut' || i.hidden)}
 
+		{#if !availableItems.length && !unavailableItems.length}
+			<span>{$t('None')}</span>
+		{/if}
+
 		{#if availableItems.length}
 			<List title={$t('Available')}>
 				{#each availableItems as item}
-					<InventoryItem number={item.number} brand={item.brand} status={item.status} />
+					<InventoryItem
+						number={item.number}
+						brand={item.brand}
+						status={item.status}
+						on:click={() => onClickItem(item)}
+					/>
 				{/each}
 			</List>
 		{/if}
@@ -81,7 +94,12 @@
 		{#if unavailableItems.length}
 			<List title={$t('Unavailable')}>
 				{#each unavailableItems as item}
-					<InventoryItem number={item.number} brand={item.brand} status={item.status} />
+					<InventoryItem
+						number={item.number}
+						brand={item.brand}
+						status={item.status}
+						on:click={() => onClickItem(item)}
+					/>
 				{/each}
 			</List>
 		{/if}
diff --git a/apps/web/src/lib/components/things/Details/DetailsView.svelte b/apps/web/src/lib/components/things/Details/DetailsView.svelte
index 708e044..8418ed7 100644
--- a/apps/web/src/lib/components/things/Details/DetailsView.svelte
+++ b/apps/web/src/lib/components/things/Details/DetailsView.svelte
@@ -4,6 +4,9 @@
 	import LoadingSpinner from '$lib/components/LoadingSpinner.svelte';
 	import Details from './Details.svelte';
 	import { locale } from '$lib/language/translate';
+	import type { InventoryItemModel } from '$lib/models/ThingDetails';
+	import { ItemDetailsView } from './Item';
+	import { push } from '$lib/components/Shell/Drawer';
 
 	export let id: string;
 
@@ -11,6 +14,10 @@
 	$: loading = $details.loading;
 	$: thing = $details.value;
 	$: thingName = $locale === 'en' ? thing?.name : thing?.spanishName ?? thing?.name;
+
+	const onClickItem = (event: CustomEvent<InventoryItemModel>) => {
+		push(ItemDetailsView, { id: event.detail.id });
+	};
 </script>
 
 {#if loading}
@@ -27,5 +34,6 @@
 		available={thing.available}
 		availableDate={thing.availableDate}
 		items={thing.items}
+		on:clickItem={onClickItem}
 	/>
 {/if}
diff --git a/apps/web/src/lib/components/things/Details/InventoryItem.svelte b/apps/web/src/lib/components/things/Details/InventoryItem.svelte
index 0a5da89..25d935f 100644
--- a/apps/web/src/lib/components/things/Details/InventoryItem.svelte
+++ b/apps/web/src/lib/components/things/Details/InventoryItem.svelte
@@ -6,7 +6,8 @@
   export let status: 'available'|'checkedOut';
 </script>
 
-<div class="card bg-white border border-base-300 flex flex-row gap-2 relative shadow-sm">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="card bg-white border border-base-300 flex flex-row gap-2 relative shadow-sm" role="button" tabindex="-1" on:click>
   {#if status === 'available'}
     <span class="absolute -top-1 -left-1 badge badge-sm badge-success border border-white shadow" />
   {/if}
diff --git a/apps/web/src/lib/components/things/Details/Item/ItemDetails.svelte b/apps/web/src/lib/components/things/Details/Item/ItemDetails.svelte
new file mode 100644
index 0000000..d362513
--- /dev/null
+++ b/apps/web/src/lib/components/things/Details/Item/ItemDetails.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/Badge';
+	import Divider from '$lib/components/Divider.svelte';
+	import Wrap from '$lib/components/Wrap.svelte';
+  import BoxIcon from '$lib/icons/box.svg';
+	import { locale, t } from '$lib/language/translate';
+	import Section from '../Section.svelte';
+	import SectionTitle from '../SectionTitle.svelte';
+	import Title from '../Title.svelte';
+
+  export let number: number;
+  export let image: string = undefined;
+  export let name: string;
+  export let brand: string = undefined;
+  export let available: boolean;
+  export let availableDate: string = undefined;
+  export let manuals: string[];
+</script>
+
+<section
+	class="flex-grow-0 flex-shrink-0 h-48 md:h-64 border-b border-base-300 overflow-hidden relative shadow-sm"
+>
+	<img
+		src={image ?? BoxIcon}
+		alt={'name'}
+		class="object-center object-contain bg-white h-full w-full"
+	/>
+</section>
+<div class="p-4 flex flex-col flex-grow overflow-y-scroll">
+	<section>
+		<Title>#{number}</Title>
+    <SectionTitle>{name}</SectionTitle>
+    <Wrap>
+      {#if available}
+        <Badge type='success'>{$t('Available')}</Badge>
+      {/if}
+      {#if !available}
+        <Badge type='error'>{$t('Unavailable')}</Badge>
+      {/if}
+      {#if !available && availableDate}
+        <Badge>{$t('Due Back')} {new Date(availableDate).toLocaleDateString($locale)}</Badge>
+      {/if}
+    </Wrap>
+	</section>
+	<Divider />
+  <Section title={$t('Brand')}>
+    <span>{brand ?? $t('None')}</span>
+  </Section>
+  <Divider />
+  <Section title={$t('Attachments')}>
+    <div class="grid grid-cols-3 gap-4">
+      {#each manuals as url}
+        <a href={url} target="_blank" class="aspect-square p-2 bg-white card flex flex-row items-center justify-center border border-base-300 shadow active:shadow-sm">
+          <span class="ph ph-file text-5xl" />
+        </a>
+      {/each}
+      {#if !manuals.length}
+        <span>{$t('None')}</span>
+      {/if}
+    </div>
+  </Section>
+</div>
\ No newline at end of file
diff --git a/apps/web/src/lib/components/things/Details/Item/ItemDetailsView.svelte b/apps/web/src/lib/components/things/Details/Item/ItemDetailsView.svelte
new file mode 100644
index 0000000..41dcdd4
--- /dev/null
+++ b/apps/web/src/lib/components/things/Details/Item/ItemDetailsView.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import AbsoluteCenter from '$lib/components/AbsoluteCenter.svelte';
+	import LoadingSpinner from '$lib/components/LoadingSpinner.svelte';
+	import { locale } from '$lib/language/translate';
+	import { items } from '$lib/stores/items';
+	import ItemDetails from './ItemDetails.svelte';
+
+	export let id: string;
+
+	$: details = items.details(id);
+	$: loading = $details.loading;
+	$: item = $details.value;
+	$: thingName = $locale === 'en' ? item?.name : item?.spanishName ?? item?.name;
+</script>
+
+{#if loading}
+	<AbsoluteCenter>
+		<LoadingSpinner />
+	</AbsoluteCenter>
+{:else}
+	<ItemDetails
+    number={item.number}
+		image={item.image}
+    name={thingName}
+		brand={item.brand}
+		available={item.available}
+		availableDate={item.availableDate}
+		manuals={item.manuals}
+	/>
+{/if}
diff --git a/apps/web/src/lib/components/things/Details/Item/index.ts b/apps/web/src/lib/components/things/Details/Item/index.ts
new file mode 100644
index 0000000..6d37c88
--- /dev/null
+++ b/apps/web/src/lib/components/things/Details/Item/index.ts
@@ -0,0 +1 @@
+export { default as ItemDetailsView } from "./ItemDetailsView.svelte";
\ No newline at end of file
diff --git a/apps/web/src/lib/components/things/ThingCardView.svelte b/apps/web/src/lib/components/things/ThingCardView.svelte
index c846a3e..2675839 100644
--- a/apps/web/src/lib/components/things/ThingCardView.svelte
+++ b/apps/web/src/lib/components/things/ThingCardView.svelte
@@ -4,18 +4,16 @@
 	import type { Thing } from '$lib/models/Thing';
 	import ThingCard from './ThingCard.svelte';
 	import { vibrate } from '$lib/utils/haptics';
-	import { getShellContext } from '../Shell/ShellContext';
 	import Details from './Details';
+	import { push } from '$lib/components/Shell/Drawer';
 
 	export let thing: Thing;
 
 	$: bookmarked = $bookmarks.find((t) => t === thing.id) !== undefined;
 	$: thingName = $locale === 'en' ? thing.name : thing.spanishName ?? thing.name;
 
-	const { drawer } = getShellContext();
-
 	const openThingDetails = () => {
-		drawer.open(Details, { id: thing.id });
+		push(Details, { id: thing.id });
 		vibrate();
 	};
 </script>
diff --git a/apps/web/src/lib/language/translations.ts b/apps/web/src/lib/language/translations.ts
index 9cc4866..ebd7f83 100644
--- a/apps/web/src/lib/language/translations.ts
+++ b/apps/web/src/lib/language/translations.ts
@@ -1,5 +1,6 @@
 export default {
     en: {
+        "Attachments": "Attachments",
         "Button.Home": "Home",
         "Button.WishList": "Wish List",
         "Name": "Name",
@@ -7,6 +8,8 @@ export default {
         "Categories": "Categories",
         "Inventory": "Inventory",
         "Input.Search": "Search...",
+        "Brand": "Brand",
+        "None": "None",
         "No Results": "No Results",
         "No Brand": "No Brand",
         "Donate": "Donate",
@@ -49,6 +52,7 @@ export default {
         "Due Back Disclaimer": "We cannot guarantee that the item will be returned by the expected due date. Please check with the Lead Librarian during open hours."
     },
     es: {
+        "Attachments": "Archivos adjuntos",
         "Button.Home": "Inicio",
         "Button.Donate": "Done",
         "Button.WishList": "Donaciones",
@@ -57,7 +61,9 @@ export default {
         "Categories": "Categorías",
         "Inventory": "Inventario",
         "Input.Search": "Buscar...",
+        "None": "Nada",
         "No Results": "No hay resultados",
+        "Brand": "Marca",
         "No Brand": "No Marca",
         "Donate": "Donar",
         "How to Borrow": "Como pedir prestado",
diff --git a/apps/web/src/lib/models/ItemDetails.ts b/apps/web/src/lib/models/ItemDetails.ts
new file mode 100644
index 0000000..84fd77e
--- /dev/null
+++ b/apps/web/src/lib/models/ItemDetails.ts
@@ -0,0 +1,14 @@
+export type ItemDetailsModel = {
+  id: string;
+  image?: string;
+  name: string;
+  spanishName?: string;
+  number: number;
+  available: boolean;
+  availableDate?: string;
+  brand?: string;
+  condition?: string;
+  hidden: boolean;
+  manuals: string[];
+  status: 'available'|'checkedOut';
+};
\ No newline at end of file
diff --git a/apps/web/src/lib/stores/items.ts b/apps/web/src/lib/stores/items.ts
new file mode 100644
index 0000000..3efbb6b
--- /dev/null
+++ b/apps/web/src/lib/stores/items.ts
@@ -0,0 +1,42 @@
+import type { ItemDetailsModel } from "$lib/models/ItemDetails";
+import { derived, get, readable, writable, type Readable } from "svelte/store";
+import type { Async } from "./types";
+
+function createItemsRepository() {
+  const items = writable(new Map());
+  const subscribe = items.subscribe;
+  const unsubscribe = items.subscribe(_ => {});
+
+  const details = (id: string): Readable<Async<ItemDetailsModel>> => {
+    const itemsValue = get(items);
+
+    if (itemsValue.has(id)) {
+      return readable({
+        loading: false,
+        value: itemsValue[id]
+      });
+    }
+
+    const result = writable({
+      loading: true,
+      value: undefined
+    });
+
+    fetch(`/api/items/${id}`).then((r) => r.json()).then((model) => {
+      result.update((r) => ({
+        loading: false,
+        value: model
+      }));
+    });
+
+    return derived(result, (r) => r);
+  };
+
+  return {
+    subscribe,
+    unsubscribe,
+    details
+  };
+}
+
+export const items = createItemsRepository();
\ No newline at end of file
diff --git a/apps/web/src/lib/stores/things.ts b/apps/web/src/lib/stores/things.ts
index 4a4a526..6967f72 100644
--- a/apps/web/src/lib/stores/things.ts
+++ b/apps/web/src/lib/stores/things.ts
@@ -1,10 +1,6 @@
 import type { ThingDetailsModel } from "$lib/models/ThingDetails";
 import { derived, get, readable, writable, type Readable } from "svelte/store";
-
-type Async<T> = {
-  loading: boolean;
-  value: T;
-};
+import type { Async } from "./types";
 
 function createThingsRepository() {
   const things = writable(new Map());
diff --git a/apps/web/src/lib/stores/types.ts b/apps/web/src/lib/stores/types.ts
new file mode 100644
index 0000000..bb9bc51
--- /dev/null
+++ b/apps/web/src/lib/stores/types.ts
@@ -0,0 +1,4 @@
+export type Async<T> = {
+  loading: boolean;
+  value: T;
+};
\ No newline at end of file
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index a41afce..8315988 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
 	import '../app.css';
 	import '@phosphor-icons/web/light';
+	import '@phosphor-icons/web/regular';
 	import '@phosphor-icons/web/bold';
 	import '@phosphor-icons/web/fill';
 	import { Head } from '$lib/components';
diff --git a/apps/web/src/routes/api/items/[id]/+server.ts b/apps/web/src/routes/api/items/[id]/+server.ts
new file mode 100644
index 0000000..c4de7da
--- /dev/null
+++ b/apps/web/src/routes/api/items/[id]/+server.ts
@@ -0,0 +1,11 @@
+import { HOST, KEY } from '$lib/server/env.js';
+
+export const GET = async ({ params }) => {
+  const { id } = params;
+
+  return await fetch(`${HOST}/web/items/${id}`, {
+    headers: {
+      'x-api-key': KEY
+    }
+  });
+};
\ No newline at end of file