diff --git a/src/routes/(app)/catalog/+page.svelte b/src/routes/(app)/catalog/+page.svelte
index b6f2a93..f3a2328 100644
--- a/src/routes/(app)/catalog/+page.svelte
+++ b/src/routes/(app)/catalog/+page.svelte
@@ -12,10 +12,10 @@
 </div>
 <div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6 pb-3 px-2">
     <div class="card card-body shadow-lg p-2 rounded-lg w-40">
-        <a href="/items/1">
+        <a href="/catalog/items">
             <!-- svelte-ignore a11y-missing-attribute -->
-            <img src="/img/worker.png">
-            <div class="mt-1 text-truncate">Hat</div>
+            <img src="/img/workercap.png">
+            <div class="mt-1 text-truncate">Rowblox Cap HD 4k Quality 120 FPS</div>
         </a>
         <hr class="my-2">
         <div class="text-s mt-1 mb-1">
diff --git a/src/routes/(app)/catalog/items/+page.svelte b/src/routes/(app)/catalog/items/+page.svelte
new file mode 100644
index 0000000..636c44a
--- /dev/null
+++ b/src/routes/(app)/catalog/items/+page.svelte
@@ -0,0 +1,30 @@
+<svelte:head>
+	<title>Catalog - Rowblox</title>
+</svelte:head>
+
+<div class="row justify-content-center">
+    <div class="col-md-8">
+    <div class="card shadow-lg rounded-lg">
+     <div class="card-body text-center">
+        <h2>Rowblox Hat</h2>
+      <div id="thumbnail-container" class="my-2 position-relative">
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <img src="/img/workercap.png" style="object-fit: contain;" alt="Rowblox Hat" width="250" height="250">
+      </div>
+     </div>
+   </div>
+   <hr>
+   <span class="text-bold font-bold mx-auto">
+<small>Description</small>
+   </span>
+   <br>
+   <span>its the best rowblox hat!</span>
+   <div class="col-md-3">
+   <div class="card shadow-lg">
+
+   </div>
+  
+</div>
+
+</div>
+</div>