diff --git a/web/resources/sass/Graphictoria.scss b/web/resources/sass/Graphictoria.scss
index bebcca5..fddb6e0 100644
--- a/web/resources/sass/Graphictoria.scss
+++ b/web/resources/sass/Graphictoria.scss
@@ -1,6 +1,8 @@
 // © XlXi 2021
 // Graphictoria 5
 
+@use "sass:math";
+
 // Lumen 5.0.1
 // Bootswatch
 
@@ -34,6 +36,15 @@ img.twemoji {
 
 // Shop
 
+.graphictoria-list-dropdown::after {
+	@include caret-down();
+
+	content: "";
+    display: inline-block;
+    margin-left: 0.255em;
+    vertical-align: 0.255em;
+}
+
 .graphictoria-item-card {
 	text-decoration: none!important;
 	font-weight: 400!important;
@@ -41,21 +52,21 @@ img.twemoji {
 	padding: 0;
 	
 	flex: 0 0 auto;
-    width: 33.33333333%;
+    width: math.div(100%, 3);
 	
 	@media (min-width: 768px) {
 		flex: 0 0 auto;
-		width: 25%;
+		width: math.div(100%, 5);
 	}
 	
 	@media (min-width: 992px) {
 		flex: 0 0 auto;
-		width: 16.66666667%;
+		width: math.div(100%, 7);
 	}
 	
 	@media (min-width: 1400px) {
 		flex: 0 0 auto;
-		width: 11.1111111%;
+		width: math.div(100%, 8);
 	}
 }
 
@@ -64,7 +75,7 @@ img.twemoji {
 	background-size: cover;
 }
 
-.graphictoria-catalog-overlay {
+.graphictoria-shop-overlay {
 	position: absolute;
     width: 100%;
     height: 100%;
@@ -75,10 +86,26 @@ img.twemoji {
 	z-index: 10;
 }
 
-.graphictoria-catalog-overlay > .gtoria-loader {
+.graphictoria-shop-overlay > .gtoria-loader {
 	margin: auto;
 }
 
+.graphictoria-shop-categories {
+	@media (min-width: 768px) {
+		html.gtoria-light & {
+			border-right: 2px solid #dee2e6!important;
+		}
+		
+		html.gtoria-dark & {
+			border-right: 2px solid #333!important;
+		}
+		
+		// py-1
+		padding-bottom: 0.25rem!important;
+		padding-top: 0.25rem!important;
+	}
+}
+
 // Maintenance
 
 .gtoria-maintenance-background {
diff --git a/web/resources/views/web/shop/index.blade.php b/web/resources/views/web/shop/index.blade.php
index 72b53c1..5574e3d 100644
--- a/web/resources/views/web/shop/index.blade.php
+++ b/web/resources/views/web/shop/index.blade.php
@@ -3,7 +3,7 @@
 @section('title', 'Shop')
 
 @section('content')
-<div class="container my-2">
+<div class="container-lg my-2">
 	<div class="row">
 		<div class="col d-flex">
 			<h4 class="my-auto">Shop</h4>
@@ -16,20 +16,51 @@
 			</div>
 		</div>
 	</div>
-	<div class="card p-3">
-		<div class="graphictoria-catalog-overlay">
-			<x-loader />
+	<div class="row">
+		<div class="col-md-2">
+			<div class="graphictoria-shop-categories border-2 border-end py-1">
+				<h5>Category</h5>
+				<ul class="list-unstyled ps-0">
+					<li class="mb-1">
+						<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-test-collapse" aria-expanded="true" href="#">Test</a>
+						<div class="collapse show" id="shop-test-collapse">
+							<ul class="btn-toggle-nav list-unstyled fw-normal small">
+								<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
+								<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
+								<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
+							</ul>
+						</div>
+					</li>
+					<li class="mb-1">
+						<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-test2-collapse" aria-expanded="false" href="#">Test 2</a>
+						<div class="collapse" id="shop-test2-collapse">
+							<ul class="btn-toggle-nav list-unstyled fw-normal small">
+								<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
+								<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
+								<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
+							</ul>
+						</div>
+					</li>
+				</ul>
+			</div>
 		</div>
-		<div>
-			<a class="graphictoria-item-card" href="#">
-				<span class="card m-2">
-					<img class="img-fluid" src="{{ asset('images/testing/hat.png') }}" />
-					<div class="p-2">
-						<p>Test hat</p>
-						<p class="text-muted">Free</p>
-					</div>
-				</span>
-			</a>
+		<div class="col-md-10">
+			<div class="card p-3">
+				<div class="graphictoria-shop-overlay">
+					<x-loader />
+				</div>
+				<div>
+					<a class="graphictoria-item-card" href="#">
+						<span class="card m-2">
+							<img class="img-fluid" src="{{ asset('images/testing/hat.png') }}" />
+							<div class="p-2">
+								<p>Test hat</p>
+								<p class="text-muted">Free</p>
+							</div>
+						</span>
+					</a>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>