diff --git a/src/routes/(app)/catalog/+page.svelte b/src/routes/(app)/catalog/+page.svelte
index f3a2328..d24a6ab 100644
--- a/src/routes/(app)/catalog/+page.svelte
+++ b/src/routes/(app)/catalog/+page.svelte
@@ -3,34 +3,80 @@
 	<title>Catalog - Rowblox</title>
 </svelte:head>
 
-<div class="flex items-center">
-	<p class="font-bold text-3xl my-1">Catalog</p>
-	<span class="flex-grow" />
-	<input class="rounded px-2 border-2 border-grey-300 text-black mr-2 py-1" type="text" name="search" id="search" placeholder="Search" />
-	<button class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500 mr-2">Search</button>
-	<a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/Create/Asset">Create Asset</a>
-</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="/catalog/items">
-            <!-- svelte-ignore a11y-missing-attribute -->
-            <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">
-            <small> 
 
-             <img src="/img/rowbux.png" width="20" height="50" style="float:left">
-             <p class="text-xs font-bold">- 21</p>
 
-                </small>
 
-                </div>
-       
-
-    </div>
-</div>
+<div class="row-auto">
+    <div class="float-left my-16 border-2 rounded-lg">
+        <div class="card card-body p-3 shadow-lg">
+           <h4>
+            <b>Catergories</b>
+           </h4>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Hats</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Shirts</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Pants</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">T-Shirts</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Faces</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Heads</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Gears</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Packages</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Models</label>
+        </div>
+       </div>
+   </div>
    
+   <div class="flex items-center">
+       <p class="font-bold text-3xl my-1">Catalog</p>
+       <span class="flex-grow" />
+       <input class="rounded px-2 border-2 border-grey-300 text-black mr-2 py-1" type="text" name="search" id="search" placeholder="Search" />
+       <button class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500 mr-2">Search</button>
+       <a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/Create/Asset">Create Asset</a>
+   </div>
+   <div class="mx-48 pb-3 px-2 py-6">
+       <div class="card card-body shadow-lg p-2 rounded-lg w-40 border-2 py-2">
+           <a href="/catalog/items">
+               <!-- svelte-ignore a11y-missing-attribute -->
+               <img src="/img/hatrowblox.png">
+               <div class="mt-1 text-truncate">Traffic Cone</div>
+           </a>
+           <hr class="my-2">
+           <div class="text-s mt-1 mb-1">
+               <small> 
+                <img src="/img/rowbux.png" width="20" height="50" style="float:left">
+                <p class="text-xs font-bold"> -21</p>
+                <p class="text-xs font-bold"> By: Row</p>
+   
+                   </small>
+   
+                   </div>
+       </div>
+   </div>
+</div>
 
 
diff --git a/src/routes/(app)/catalog/items/+page.svelte b/src/routes/(app)/catalog/items/+page.svelte
index 636c44a..87de456 100644
--- a/src/routes/(app)/catalog/items/+page.svelte
+++ b/src/routes/(app)/catalog/items/+page.svelte
@@ -2,25 +2,53 @@
 	<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 class="container-lg">
+  <div class="row justify-content-center">
+    <div class="shadow-lg rounded-lg float-left px-48 border-2">
+     <div class="card-body text-center text-2xl font-bold h-72">
+        <h2>Rowblox Cone</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">
+        <img src="/img/hatrowblox.png" style="object-fit: contain;" alt="Rowblox Hat" width="250" height="250" class="mx-auto">
       </div>
      </div>
+     <hr>
+     <span class="text-bold font-bold mx-28">
+       <small>Description:</small>
+     </span>
+     <br>
+     <span class="text-xs mx-28">Very Coney!</span>
    </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="col-md-12 rounded-lg shadow-lg float-right my-10 border-2 mt-8">
    <div class="card shadow-lg">
+   <div class="card-header text-center font-bold text-bold h-6">Details</div>
+   <div class="card-body text-center">
+   <a href="/users/2/profile">
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <img src="/img/derpecated.png" width="100" height="100" class="mx-24">
+    </a>
+    <p class="text-bold mt-0 pd-0 font-bold">
+       <small>
+       Creator:
+       <a href="/users/2/profile">row</a>
+       <br>
+       Sales: 238
+       <br>
+       Created: 10/20/22
+       <br>
+       Updated: 10/20/22
+       </small>
+    </p>
+    <hr>
+  <div class="py-2">  
+    <button class="my-auto px-3 py-1 rounded border-2 border-green-500 text-green-500 shadow-lg hover:bg-green-200 w-48">
+      21
+    </button>
+  </div> 
+   </div>
 
    </div>
   
@@ -28,3 +56,4 @@
 
 </div>
 </div>
+
diff --git a/static/img/hatrowblox.png b/static/img/hatrowblox.png
new file mode 100644
index 0000000..9d50472
Binary files /dev/null and b/static/img/hatrowblox.png differ
diff --git a/static/img/workercap.png b/static/img/workercap.png
deleted file mode 100644
index 2835ea9..0000000
Binary files a/static/img/workercap.png and /dev/null differ