diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index e1f9a94..1bebe2f 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -10,7 +10,9 @@ <h1 class="font-bold">ngx-easy-view-transitions</h1>
         height="48"
         ngSrc="assets/images/github-mark.svg"
         width="48"
-    /></a>
+        class="min-w-8 md:min-w-12"
+      />
+    </a>
   </div>
   <nav class="flex gap-4 md:gap-8 items-center">
     <a
diff --git a/demo/src/app/colors/colors-list.component.html b/demo/src/app/colors/colors-list.component.html
index a87f632..1a429ea 100644
--- a/demo/src/app/colors/colors-list.component.html
+++ b/demo/src/app/colors/colors-list.component.html
@@ -1,12 +1,11 @@
 <div
-  class="grid gap-16"
-  style="grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr))"
+  class="grid gap-16 grid-cols-[repeat(auto-fill,minmax(4rem,1fr))] md:grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]"
 >
   @for (color of colors; track color.name) {
   <a [routerLink]="color.name">
     <div class="flex flex-col items-center">
       <div
-        class="h-32 aspect-square rounded-2xl"
+        class="h-24 md:h-32 aspect-square rounded-2xl"
         [style.backgroundColor]="color.hex"
         [transitionName]="color.name + '-img'"
       ></div>