diff --git a/app/pages/designer.vue b/app/pages/designer.vue
index d810b57..bf95ccc 100644
--- a/app/pages/designer.vue
+++ b/app/pages/designer.vue
@@ -43,9 +43,9 @@ const {
 } = useSlipmatDesigner();
 
 // Active view selector for multi-canvas design
-const activeView = ref<'front' | 'top' | 'left' | 'right'>('front');
+const activeView = ref<"front" | "top" | "left" | "right">("front");
 
-const setActiveView = (view: 'front' | 'top' | 'left' | 'right') => {
+const setActiveView = (view: "front" | "top" | "left" | "right") => {
   activeView.value = view;
   setActiveCanvas(view);
 };
@@ -147,7 +147,7 @@ const persistDesign = async (designId: string, design: ExportedDesign) => {
       designId,
       templateId: design.templateId,
       ownerEmail: user.value?.email ?? null,
-  ownerId: backendUser.value?.id ?? null,
+      ownerId: backendUser.value?.id ?? null,
       previewUrl: previewUpload.publicUrl,
       productionUrl: productionUpload.publicUrl,
       canvasJson: canvasUpload.publicUrl,
@@ -382,10 +382,10 @@ const handleCheckout = async () => {
         </h1>
       </header>
 
-      <section class="mt-10 flex flex-col gap-8 lg:grid lg:grid-cols-[320px_minmax(0,1fr)] lg:gap-6">
+      <section class="mt-10 flex flex-col gap-8 lg:grid lg:gap-6">
         <!-- Left Sidebar - Template Picker and Preview (together on desktop, separate on mobile) -->
-        <div class="contents lg:block lg:space-y-6">
-          <!-- <div class="order-1">
+        <!-- <div class="contents lg:block lg:space-y-6"> -->
+        <!-- <div class="order-1">
             <TemplatePicker
               :templates="templates"
               :selected-template-id="selectedTemplate.id"
@@ -393,20 +393,22 @@ const handleCheckout = async () => {
             />
           </div> -->
 
-          <div class="order-3">
+        <!-- <div class="order-3">
             <DesignerPreview
               :is-checkout-pending="isCheckoutPending"
               :checkout-price="DESIGN_PRICE_USD"
               :checkout-error="checkoutError"
               @checkout="handleCheckout"
             />
-          </div>
-        </div>
+          </div> -->
+        <!-- </div> -->
 
         <!-- Designer Canvas - Second on mobile, right column on desktop -->
         <div class="order-2 flex flex-col gap-6 lg:order-0">
           <!-- View Selector Tabs -->
-          <div class="flex gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2">
+          <div
+            class="flex gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2"
+          >
             <button
               v-for="view in ['front', 'top', 'left', 'right']"
               :key="view"
@@ -415,16 +417,14 @@ const handleCheckout = async () => {
                 'flex-1 rounded-md px-4 py-2 text-sm font-semibold capitalize transition-all',
                 activeView === view
                   ? 'bg-white text-slate-900 shadow-sm'
-                  : 'text-slate-600 hover:text-slate-900'
+                  : 'text-slate-600 hover:text-slate-900',
               ]"
             >
               {{ view }} View
             </button>
           </div>
 
-          <div
-            class="rounded-3xl border border-slate-200 bg-white shadow-xl"
-          >
+          <div class="rounded-3xl border border-slate-200 bg-white shadow-xl">
             <DesignerToolbar
               :on-add-text="addTextbox"
               :on-add-circle="() => addShape('circle')"
@@ -449,7 +449,9 @@ const handleCheckout = async () => {
             <div class="p-6 space-y-4">
               <!-- Canvas for each view -->
               <div v-show="activeView === 'front'" class="canvas-container">
-                <h3 class="mb-2 text-sm font-semibold text-slate-700">Front View</h3>
+                <h3 class="mb-2 text-sm font-semibold text-slate-700">
+                  Front View
+                </h3>
                 <DesignerCanvas
                   canvas-id="front"
                   :size="displaySize"
@@ -458,9 +460,11 @@ const handleCheckout = async () => {
                   :unregister-canvas="unregisterCanvas"
                 />
               </div>
-              
+
               <div v-show="activeView === 'top'" class="canvas-container">
-                <h3 class="mb-2 text-sm font-semibold text-slate-700">Top View</h3>
+                <h3 class="mb-2 text-sm font-semibold text-slate-700">
+                  Top View
+                </h3>
                 <DesignerCanvas
                   canvas-id="top"
                   :size="displaySize"
@@ -469,9 +473,11 @@ const handleCheckout = async () => {
                   :unregister-canvas="unregisterCanvas"
                 />
               </div>
-              
+
               <div v-show="activeView === 'left'" class="canvas-container">
-                <h3 class="mb-2 text-sm font-semibold text-slate-700">Left View</h3>
+                <h3 class="mb-2 text-sm font-semibold text-slate-700">
+                  Left View
+                </h3>
                 <DesignerCanvas
                   canvas-id="left"
                   :size="displaySize"
@@ -480,9 +486,11 @@ const handleCheckout = async () => {
                   :unregister-canvas="unregisterCanvas"
                 />
               </div>
-              
+
               <div v-show="activeView === 'right'" class="canvas-container">
-                <h3 class="mb-2 text-sm font-semibold text-slate-700">Right View</h3>
+                <h3 class="mb-2 text-sm font-semibold text-slate-700">
+                  Right View
+                </h3>
                 <DesignerCanvas
                   canvas-id="right"
                   :size="displaySize"
@@ -493,12 +501,20 @@ const handleCheckout = async () => {
               </div>
 
               <p class="mt-4 text-sm text-slate-600">
-                Design each view of your table jersey separately. Switch between views using the tabs above. 
-                Safe zone and bleed guides update automatically when you switch templates.
+                Design each view of your table jersey separately. Switch between
+                views using the tabs above. Safe zone and bleed guides update
+                automatically when you switch templates.
               </p>
             </div>
           </div>
         </div>
+        
+        <DesignerPreview
+          :is-checkout-pending="isCheckoutPending"
+          :checkout-price="DESIGN_PRICE_USD"
+          :checkout-error="checkoutError"
+          @checkout="handleCheckout"
+        />
       </section>
     </div>
   </main>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 494cb41..d9e749b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -38,7 +38,7 @@ onMounted(() => {
     >
       <!-- Top Section - Split Layout -->
       <div
-        class="flex flex-1 flex-col items-center justify-between gap-8 lg:flex-row lg:gap-16"
+        class="flex flex-1 flex-col-reverse items-center justify-between gap-8 lg:flex-row lg:gap-16"
       >
         <!-- Left Side - Title & Description -->
         <div class="w-full space-y-8 text-center lg:w-1/2 lg:text-left">
@@ -54,70 +54,6 @@ onMounted(() => {
               Design custom jerseys for your table
             </p>
 
-            <!-- Simple preview for mobile view -->
-            <div class="relative mx-auto my-8 block lg:hidden">
-              <div class="relative mx-auto h-[280px] w-[280px] sm:h-80 sm:w-80">
-                <div
-                  class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-slate-100 shadow-lg overflow-hidden"
-                >
-                  <!-- Rotating Table with Fitted Cover -->
-                  <div
-                    class="animate-spin-slow relative"
-                    style="transform-style: preserve-3d"
-                  >
-                    <div class="relative">
-                      <!-- Table with fitted cover -->
-                      <div class="relative">
-                        <!-- Table Top -->
-                        <div
-                          class="relative h-24 w-40 rounded-t-sm bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 shadow-xl"
-                        >
-                          <!-- Jersey design on top of cover -->
-                          <div
-                            class="absolute inset-4 flex items-center justify-center rounded-lg bg-gradient-to-br from-blue-400 via-white to-red-400 shadow-lg border-2 border-slate-300"
-                          >
-                            <div class="text-center">
-                              <div class="text-2xl font-bold text-slate-800">
-                                23
-                              </div>
-                              <div
-                                class="text-[7px] font-semibold text-slate-600 tracking-wider"
-                              >
-                                CUSTOM
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-
-                        <!-- Fitted Cover Skirt (draping down) -->
-                        <div
-                          class="absolute top-24 left-0 right-0 h-16 bg-gradient-to-b from-slate-800 via-slate-900 to-slate-950 rounded-b-sm shadow-2xl"
-                        >
-                          <!-- Fabric folds/creases -->
-                          <div
-                            class="absolute inset-0 opacity-30"
-                            style="
-                              background: repeating-linear-gradient(
-                                90deg,
-                                transparent,
-                                transparent 8px,
-                                rgba(0, 0, 0, 0.3) 8px,
-                                rgba(0, 0, 0, 0.3) 9px
-                              );
-                            "
-                          ></div>
-                          <!-- Shadow at bottom -->
-                          <div
-                            class="absolute bottom-0 left-0 right-0 h-2 bg-black/40"
-                          ></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
             <p class="text-base text-slate-600 sm:text-lg">
               Create professional, print-ready jersey designs in minutes
             </p>
@@ -175,10 +111,10 @@ onMounted(() => {
         </div>
 
         <!-- Right Side - 3D Model -->
-        <div class="relative hidden w-full lg:block lg:w-1/2">
+        <div class="relative w-full lg:w-1/2">
           <div class="relative mx-auto max-w-4xl">
             <div
-              class="relative mx-auto h-[300px] w-[300px] sm:h-[600px] sm:w-[600px]"
+              class="relative mx-auto h-[300px] w-[300px] sm:h-[400px] sm:w-[400px] md:h-[500px] md:w-[500px] lg:h-[600px] lg:w-[600px]"
             >
               <div
                 class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-300 bg-linear-to-br from-slate-700 to-slate-900 shadow-xl overflow-hidden"