diff --git a/static/img/logo-black.png b/static/img/logo-black.png
new file mode 100644
index 0000000..0569e97
Binary files /dev/null and b/static/img/logo-black.png differ
diff --git a/static/img/logo-white.png b/static/img/logo-white.png
new file mode 100644
index 0000000..73b26dc
Binary files /dev/null and b/static/img/logo-white.png differ
diff --git a/static/output.css b/static/output.css
index ea38322..94f7a80 100644
--- a/static/output.css
+++ b/static/output.css
@@ -786,6 +786,10 @@ video {
   flex: 1 1 0%;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1240,6 +1244,36 @@ video {
   background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
 }
 
+.bg-pink-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 207 232 / var(--tw-bg-opacity, 1));
+}
+
+.bg-pink-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 168 212 / var(--tw-bg-opacity, 1));
+}
+
+.bg-pink-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(190 24 93 / var(--tw-bg-opacity, 1));
+}
+
+.bg-pink-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
+}
+
+.bg-fuchsia-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(217 70 239 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
+
 .fill-red-50 {
   fill: #fef2f2;
 }
@@ -1265,6 +1299,10 @@ video {
   padding: 1rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1364,6 +1402,10 @@ video {
   padding-top: 1.25rem;
 }
 
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2114,6 +2156,14 @@ video {
     max-width: 80rem;
   }
 
+  .lg\:max-w-4xl {
+    max-width: 56rem;
+  }
+
+  .lg\:max-w-6xl {
+    max-width: 72rem;
+  }
+
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -2122,6 +2172,10 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .lg\:p-8 {
     padding: 2rem;
   }
@@ -2146,6 +2200,10 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .xl\:grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
   .xl\:gap-x-8 {
     -moz-column-gap: 2rem;
          column-gap: 2rem;
@@ -2153,6 +2211,14 @@ video {
 }
 
 @media (min-width: 1536px) {
+  .\32xl\:grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .\32xl\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
   .\32xl\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
diff --git a/views/additem.html b/views/additem.html
index 0b803e6..edb09b7 100644
--- a/views/additem.html
+++ b/views/additem.html
@@ -2,7 +2,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Your Company">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Add an Item</h2>
   </div>
 
diff --git a/views/addtag.html b/views/addtag.html
index 630fa33..07b865f 100644
--- a/views/addtag.html
+++ b/views/addtag.html
@@ -2,7 +2,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Your Company">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Add Tag</h2>
   </div>
 
diff --git a/views/batchupload.html b/views/batchupload.html
index b362939..7b2c9e2 100644
--- a/views/batchupload.html
+++ b/views/batchupload.html
@@ -2,7 +2,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Your Company">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Batch Upload</h2>
     Select multiple files on the upload. For each a new Shop Item will be created with the Filename as Name, Abstract
     and Description.<br>
diff --git a/views/checkout.html b/views/checkout.html
index d7d481a..b81a95f 100644
--- a/views/checkout.html
+++ b/views/checkout.html
@@ -2,7 +2,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Logo">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Logo">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Checkout</h2>
   </div>
 
diff --git a/views/edititem.html b/views/edititem.html
index 7d67047..86124f6 100644
--- a/views/edititem.html
+++ b/views/edititem.html
@@ -2,7 +2,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Your Company">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Edit Item</h2>
 
             <a href="/shopitems/{{ .data.shopItem.ID }}">
diff --git a/views/editorders.html b/views/editorders.html
index 08f49e8..f398210 100644
--- a/views/editorders.html
+++ b/views/editorders.html
@@ -3,7 +3,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Your Company">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Edit Orders</h2>
   </div>
 
diff --git a/views/header.html b/views/header.html
index c9fd336..7094e9f 100644
--- a/views/header.html
+++ b/views/header.html
@@ -12,8 +12,8 @@
   <div class="mx-auto max-w-7xl px-4 sm:px-8 lg:px-8">
     <div class="relative flex h-16 items-center justify-between">
       <div class="flex flex-1 items-center">
-        <a href="/"><div class="flex shrink-0">
-          <img class="h-8 w-auto" src="/static/img/circlea.png" alt="Your Company">
+        <a href="/"><div class="flex-shrink-0 w-full h-full">
+          <img class="h-8 w-auto" src="/static/img/logo-white.png" alt="Your Company">
         </div></a>
         <!--
         {{ if .loggedIn }}
diff --git a/views/login.html b/views/login.html
index 847d4e4..e25564f 100644
--- a/views/login.html
+++ b/views/login.html
@@ -2,7 +2,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Logo">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Logo">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Login to your account</h2>
   </div>
 
diff --git a/views/register.html b/views/register.html
index 4e69e71..4054ac8 100644
--- a/views/register.html
+++ b/views/register.html
@@ -2,7 +2,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Logo">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Logo">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Register your account</h2>
   </div>
 
diff --git a/views/shopitems.html b/views/shopitems.html
index 7e7fdc7..db8792f 100644
--- a/views/shopitems.html
+++ b/views/shopitems.html
@@ -1,14 +1,14 @@
   <div class="bg-white">
-  <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+  <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl">
     <h2 class="text-2xl font-bold tracking-tight text-gray-900">Available Zines</h2>
 
     <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
-  <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
+  <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 xl:grid-cols-4">
   {{ range .data.shopItems }}
 
     <div class="myClass group relative">
             <a href="/shopitems/{{ .ID }}">
-      <img src="/{{ .Image }}" alt="Product Image" class="aspect-4/5 mx-auto rounded-md bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80">
+      <img src="/{{ .Image }}" alt="Product Image" class="aspect-4/5 mx-auto rounded bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80">
             </a>
       <div class="mt-4 flex justify-between">
         <div>
diff --git a/views/tagview.html b/views/tagview.html
index 2974573..6bd09e3 100644
--- a/views/tagview.html
+++ b/views/tagview.html
@@ -3,7 +3,7 @@
 
 <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
   <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img class="mx-auto h-10 w-auto" src="/static/img/circlea.png" alt="Your Company">
+    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
     <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Edit Tags</h2>
   </div>