diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index d4493b6f..63c44d10 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -1,6 +1,6 @@
 <template>
     <h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" />
-
+    <!-- import / export section -->
     <div class="flex justify-between w-full">
         <div class="flex">
             <button class="btn mx-1">
@@ -8,25 +8,31 @@
             </button>
             <button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" />
         </div>
-        <i18n-t keypath="subscriptions.subscribed_channels_count">{{ subscriptions.length }}</i18n-t>
+        <!-- subscriptions count, only shown if there are any  -->
+        <i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
+            subscriptions.length
+        }}</i18n-t>
     </div>
+    <br />
     <hr />
-
-    <div class="grid">
-        <div class="mb-3" v-for="subscription in subscriptions" :key="subscription.url">
-            <div class="flex justify-center place-items-center">
-                <div class="w-full flex justify-between items-center">
-                    <router-link :to="subscription.url" class="flex text-center font-bold text-4xl">
-                        <img :src="subscription.avatar" class="rounded-full h-[fit-content]" width="48" height="48" />
-                        <span class="mx-2" v-text="subscription.name" />
-                    </router-link>
-                    <button
-                        class="btn w-min"
-                        @click="handleButton(subscription)"
-                        v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
-                    />
-                </div>
-            </div>
+    <!-- Subscriptions card list -->
+    <div class="xl:grid xl:grid-cols-5 <md:flex-wrap">
+        <!-- channel info card -->
+        <div
+            class="col m-2 p-1 border rounded-lg border-gray-500"
+            v-for="subscription in subscriptions"
+            :key="subscription.url"
+        >
+            <router-link :to="subscription.url" class="flex p-2 font-bold text-4x4">
+                <img :src="subscription.avatar" class="rounded-full h-[fit-content]" width="48" height="48" />
+                <span class="self-center mx-2" v-text="subscription.name" />
+            </router-link>
+            <!-- subscribe / unsubscribe btn -->
+            <button
+                class="btn w-full mt-2"
+                @click="handleButton(subscription)"
+                v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
+            />
         </div>
     </div>
     <br />