diff --git a/files/templates/shop.html b/files/templates/shop.html
index edf6a6a47..b30e6f6aa 100644
--- a/files/templates/shop.html
+++ b/files/templates/shop.html
@@ -7,30 +7,31 @@
 {% block pagetype %}message{% endblock %}
 
 {% block subHeader %}
-	<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t-md">
-		<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-800 to-gray-700 rounded-t-md sub-header-shadow"></div>
-		<div class="relative col-span-full flex items-center">
-			<div>
-				<h1 class="font-bold text-xl font-heading leading-normal">
-					Shop
-				</h1>
-				<small class="block text-gray-400">
-					Stir drama. Earn coins.
-				</small>
-			</div>
-			<ul class="ml-auto flex space-x-2 text-sm">
-				<li>
-					<strong class="text-gray-500">Total sales:</strong> {{sales}}
-				</li>
-				<li>
-					<strong class="text-gray-500">Spent by you:</strong> {{v.coins_spent}}
-				</li>
-			</ul>
+<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t-md">
+	<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-800 to-gray-700 rounded-t-md sub-header-shadow"></div>
+	<div class="relative col-span-full flex items-center">
+		<div>
+			<h1 class="font-bold text-xl font-heading leading-normal">
+				Shop
+			</h1>
+			<small class="block text-gray-400">
+				Stir drama. Earn coins.
+			</small>
 		</div>
+		<ul class="ml-auto flex space-x-2 text-sm">
+			<li>
+				<strong class="text-gray-500">Total sales:</strong> {{sales}}
+			</li>
+			<li>
+				<strong class="text-gray-500">Spent by you:</strong> {{v.coins_spent}}
+			</li>
+		</ul>
 	</div>
+</div>
 {% endblock %}
 
 {% block content %}
+<div class="col-span-full">
 	{% if error %}
 	<div class="alert alert-danger alert-dismissible fade show my-3" role="alert">
 		<i class="fas fa-exclamation-circle my-auto"></i>
@@ -56,58 +57,96 @@
 
 	<img src="/assets/images/shop.webp" width="50%"/>
 
-	<table class="table table-striped shop">
-		<thead class="bg-primary text-white">
-				<tr>
-					<th scope="col">Icon</th>
-					<th scope="col">Title</th>
-					<th scope="col">Price</th>
-					<th scope="col">Owned</th>
-					<th scope="col">Buy</th>
-				</tr>
-			</thead>
-			<tbody>
-		{% for a in awards %}
-			<tr data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="{{a['description']}}">
-				<td><i class="{{a['icon']}} {{a['color']}}" style="font-size: 30px"></i></td>
-				<td style="font-weight: bold">{{a['title']}}</td>
-				<td style="font-weight: bold">{{a['price']}}</td>
-				<td style="font-weight: bold">{{a['owned']}}</td>
-				{% set kind = a['kind'] %}
-				<td style="font-weight: bold">
-					<a class="d-flex btn btn-success {% if v.coins < a['price'] %}disabled{% endif %}" href="javascript:void(0)" onclick="post_toast('/buy/{{kind}}')"><span class="m-auto">Buy</span></a>
-					{% if v.procoins and a['price'] < 3600 %}<a class="d-flex marseybux btn btn-success {% if v.procoins < a['price'] %}disabled{% endif %}" href="javascript:void(0)" onclick="post_toast('/buy/{{kind}}?mb=true')"><span class="m-auto">Buy with Marseybux</span></a>{% endif %}
-				</td>
-			</tr>
-		{% endfor %}
-	</table>
-	<pre>
+	<!-- This example requires Tailwind CSS v2.0+ -->
+	<div class="flex flex-col">
+		<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+			<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+				<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+					<table class="min-w-full divide-y divide-gray-200">
+						<thead class="bg-gray-50">
+							<tr>
+								<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+									Name
+								</th>
+								<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+									Title
+								</th>
+								<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+									Status
+								</th>
+								<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+									Role
+								</th>
+								<th scope="col" class="relative px-6 py-3">
+									<span class="sr-only">Edit</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody class="bg-white divide-y divide-gray-200">
+							<tr>
+								<td class="px-6 py-4 whitespace-nowrap">
+									<div class="flex items-center">
+										<div class="flex-shrink-0 h-10 w-10">
+											<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
+										</div>
+										<div class="ml-4">
+											<div class="text-sm font-medium text-gray-900">
+												Jane Cooper
+											</div>
+											<div class="text-sm text-gray-500">
+												jane.cooper@example.com
+											</div>
+										</div>
+									</div>
+								</td>
+								<td class="px-6 py-4 whitespace-nowrap">
+									<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
+									<div class="text-sm text-gray-500">Optimization</div>
+								</td>
+								<td class="px-6 py-4 whitespace-nowrap">
+									<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+										Active
+									</span>
+								</td>
+								<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+									Admin
+								</td>
+								<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+									<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
+								</td>
+							</tr>
 
+							<!-- More people... -->
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
 
-
-
-
-	</pre>
-
-	<style>
-		@media (max-width: 768px) {
-			.table th {
-				padding-left: 0.3rem !important;
-				padding-right: 0.3rem !important;
-			}
-			.table td {
-				padding-left: 0.3rem !important;
-				padding-right: 0.3rem !important;
-				font-size: 0.9rem;
-			}
-			.marseybux {
-				font-size: 0.7rem !important;
-			}
-		}
-
-		.tooltip-inner {
-			font-size: 1.5rem;
-			max-width: 300px;
-		}
-	</style>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<style>
+	@media (max-width: 768px) {
+		.table th {
+			padding-left: 0.3rem !important;
+			padding-right: 0.3rem !important;
+		}
+		.table td {
+			padding-left: 0.3rem !important;
+			padding-right: 0.3rem !important;
+			font-size: 0.9rem;
+		}
+		.marseybux {
+			font-size: 0.7rem !important;
+		}
+	}
+
+	.tooltip-inner {
+		font-size: 1.5rem;
+		max-width: 300px;
+	}
+</style>
 {% endblock %}