diff --git a/pages/account/subscriptions/_id/index.vue b/pages/account/subscriptions/_id/index.vue
index 166dced8..1f8eb728 100644
--- a/pages/account/subscriptions/_id/index.vue
+++ b/pages/account/subscriptions/_id/index.vue
@@ -4,7 +4,7 @@
       <!-- Breadcrumb -->
       <NuxtLink
         :to="localePath('/account/subscriptions/')"
-        class="flex items-center cursor-pointer mb-6"
+        class="flex items-center mb-6 cursor-pointer"
       >
         <BaseIcon icon="uil:angle-left" size="sm" /><span class="ml-1">
           {{ $t('account.subscriptions.id.backToSubscriptions') }}
@@ -14,15 +14,15 @@
 
     <!-- Fetch loader -->
     <div v-if="$fetchState.pending" class="container">
-      <div class="loader-el w-1/3 h-7 mb-6" />
-      <div class="loader-el w-3/5 h-2 mb-4" />
-      <div class="loader-el w-2/5 h-2 mb-8" />
+      <div class="w-1/3 mb-6 loader-el h-7" />
+      <div class="w-3/5 h-2 mb-4 loader-el" />
+      <div class="w-2/5 h-2 mb-8 loader-el" />
     </div>
 
     <div v-else>
       <div class="container pb-10 border-b border-primary-med">
-        <div class="pb-6 border-b border-primary-med mb-6">
-          <h2 class="text-2xl pb-6">
+        <div class="pb-6 mb-6 border-b border-primary-med">
+          <h2 class="pb-6 text-2xl">
             {{ subscription.product.name }}
           </h2>
 
@@ -48,9 +48,9 @@
             <div
               v-for="(item, index) in planItems"
               :key="`plan-item-${index}`"
-              class="w-full flex py-6 border-b border-primary-light"
+              class="flex w-full py-6 border-b border-primary-light"
             >
-              <div class="min-w-26 mr-6">
+              <div class="mr-6 min-w-26">
                 <VisualMedia :source="selectThumbnail(item)" sizes="120px" />
               </div>
 
@@ -83,13 +83,14 @@
           }}</span>
 
           <div class="mb-6 md:grid md:grid-cols-2 md:col-gap-4">
-            <div class="w-full flex py-6 border-b border-primary-light">
+            <div class="flex w-full py-6 border-b border-primary-light">
               <div
                 v-if="
+                  subscription.variant &&
                   subscription.variant.images &&
                   subscription.variant.images.length
                 "
-                class="min-w-26 mr-6"
+                class="mr-6 min-w-26"
               >
                 <VisualMedia
                   :source="subscription.variant.images[0].file"
@@ -99,10 +100,11 @@
 
               <div
                 v-else-if="
+                  subscription.product &&
                   subscription.product.images &&
                   subscription.product.images.length
                 "
-                class="min-w-26 mr-6"
+                class="mr-6 min-w-26"
               >
                 <VisualMedia
                   :source="subscription.product.images[0].file"
@@ -136,7 +138,7 @@
           </div>
         </template>
 
-        <div class="bg-primary-lightest rounded shadow-md">
+        <div class="rounded shadow-md bg-primary-lightest">
           <div
             class="p-4"
             :class="{ 'border-b border-primary-med': status !== 'canceled' }"
@@ -214,7 +216,7 @@
 
             <BaseButton
               v-if="status !== 'canceled' && allowPlanEdit"
-              class="w-full block mt-6"
+              class="block w-full mt-6"
               fit="auto"
               appearance="dark"
               :label="$t('account.subscriptions.id.editPlan')"
@@ -229,13 +231,13 @@
       <div class="container pt-4">
         <!-- Delivery details -->
         <template v-if="shipping">
-          <p class="text-base font-semibold pb-4">
+          <p class="pb-4 text-base font-semibold">
             {{ $t('account.subscriptions.id.deliveryDetails') }}
           </p>
 
           <div class="mb-8">
-            <div class="rounded text-sm border border-primary-med p-4">
-              <p class="font-semibold pb-2">
+            <div class="p-4 text-sm border rounded border-primary-med">
+              <p class="pb-2 font-semibold">
                 {{ $t('account.subscriptions.id.deliveryAddress') }}
               </p>
               <p>
@@ -247,9 +249,9 @@
             </div>
             <div
               v-if="shipping.phone"
-              class="rounded text-sm border border-primary-med p-4 -mt-px"
+              class="p-4 -mt-px text-sm border rounded border-primary-med"
             >
-              <p class="font-semibold pb-2">
+              <p class="pb-2 font-semibold">
                 {{ $t('account.subscriptions.id.phoneNumber') }}
               </p>
               <p>
@@ -258,9 +260,9 @@
             </div>
             <div
               v-if="shipping && shipping.service"
-              class="rounded text-sm border border-primary-med p-4 -mt-px"
+              class="p-4 -mt-px text-sm border rounded border-primary-med"
             >
-              <p class="font-semibold pb-2">
+              <p class="pb-2 font-semibold">
                 {{ $t('account.subscriptions.id.deliveryMethod') }}
               </p>
               <p v-if="shipping.serviceName">
@@ -286,22 +288,23 @@
 
         <!-- Payment details -->
         <div class="mb-8">
-          <p class="text-base font-semibold pb-4">
+          <p class="pb-4 text-base font-semibold">
             {{ $t('account.subscriptions.id.paymentMethod') }}
           </p>
 
           <div
             class="
               grid grid-cols-1
-              md:grid-cols-2
+              border
               rounded
-              border border-primary-med
+              md:grid-cols-2
+              border-primary-med
             "
           >
             <!-- Method: Card -->
             <div
-              v-if="billing.card"
-              class="md:border-b-0 md:border-r border-b border-primary-med p-4"
+              v-if="billing && billing.card"
+              class="p-4 border-b md:border-b-0 md:border-r border-primary-med"
             >
               <div class="flex mb-0 md:mb-4">
                 <BrandCardIcon
@@ -310,18 +313,18 @@
                 />
 
                 <span
-                  class="ml-0 md:ml-auto pr-4 md:pl-4 text-sm font-semibold"
+                  class="pr-4 ml-0 text-sm font-semibold md:ml-auto md:pl-4"
                   >{{ billing.card.brand }}</span
                 >
 
-                <div class="text-base md:hidden ml-auto">
+                <div class="ml-auto text-base md:hidden">
                   <span class="tracking-large">····</span>
                   <span>&nbsp;{{ billing.card.last4 }}</span>
                   <span class="ml-6">{{ cardExpDate }}</span>
                 </div>
               </div>
 
-              <div class="hidden md:flex mb-4">
+              <div class="hidden mb-4 md:flex">
                 <div class="text-base">
                   <span class="tracking-large">···· ····</span>
                   <span>&nbsp;{{ billing.card.last4 }}</span>
@@ -331,9 +334,9 @@
               </div>
             </div>
 
-            <div v-if="billing" class="flex md:text-sm p-4">
+            <div v-if="billing" class="flex p-4 md:text-sm">
               <div>
-                <p class="font-semibold pb-2">
+                <p class="pb-2 font-semibold">
                   {{ $t('account.subscriptions.id.billingAddress') }}
                 </p>
                 <p>
@@ -347,7 +350,7 @@
 
               <button
                 v-if="status !== 'canceled'"
-                class="px-2 ml-auto mt-auto"
+                class="px-2 mt-auto ml-auto"
                 @click="editBillingAddressPopupIsActive = true"
               >
                 {{ $t('account.subscriptions.id.editBillingAddress') }}
@@ -363,7 +366,7 @@
         class="container border-t border-b border-primary-med"
       >
         <div class="py-10">
-          <p class="text-base font-semibold pb-4">
+          <p class="pb-4 text-base font-semibold">
             {{
               status === 'paused'
                 ? $t('account.subscriptions.id.resume.title')
@@ -397,7 +400,7 @@
       <div class="container">
         <!-- Orders -->
         <div v-if="orders" class="mb-10">
-          <p class="text-base font-semibold pt-10 pb-4">
+          <p class="pt-10 pb-4 text-base font-semibold">
             {{ $t('account.subscriptions.id.orders') }}
           </p>
 
@@ -411,7 +414,7 @@
             <span class="label-sm-bold">{{
               formatDate(order.dateCreated)
             }}</span>
-            <span class="label-sm ml-auto">#{{ order.number }}</span>
+            <span class="ml-auto label-sm">#{{ order.number }}</span>
           </NuxtLink>
         </div>