diff --git a/static/js/index.js b/static/js/index.js
index c777980..b66430b 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,18 +1,17 @@
 window.app = Vue.createApp({
+  el: '#dcaClient',
   mixins: [windowMixin],
   delimiters: ['${', '}'],
-  data() {
+  data: function () {
     return {
       dashboardData: null,
       transactions: [],
-      analytics: null,
       loading: true,
       error: null
     }
   },
 
   methods: {
-    // Utility Methods
     formatCurrency(amount) {
       if (!amount) return 'Q 0.00';
       // Convert centavos to quetzales
@@ -27,12 +26,6 @@ window.app = Vue.createApp({
       return new Date(dateString).toLocaleDateString()
     },
 
-    formatDateTime(dateString) {
-      if (!dateString) return ''
-      const date = new Date(dateString)
-      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString('en-US', { hour12: false })
-    },
-
     formatSats(amount) {
       if (!amount) return '0 sats'
       return new Intl.NumberFormat('en-US').format(amount) + ' sats'
@@ -87,5 +80,3 @@ window.app = Vue.createApp({
     }
   }
 })
-
-window.app.mount('#dcaClient')
diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html
index 6a10114..7da2cd3 100644
--- a/templates/satmachineclient/index.html
+++ b/templates/satmachineclient/index.html
@@ -7,59 +7,63 @@
 <script src="{{ static_url_for('satmachineclient/static', path='js/index.js') }}"></script>
 {% endblock %} {% block page %}
 <div class="row q-col-gutter-md" id="dcaClient">
-  <!-- Loading State -->
-  <div v-if="loading" class="col-12">
-    <q-card class="q-pa-md text-center">
-      <q-spinner size="2em" />
-      <div class="q-mt-md">Loading your DCA dashboard...</div>
+  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
+    
+    <!-- Loading State -->
+    <q-card v-if="loading">
+      <q-card-section class="text-center">
+        <q-spinner size="2em" />
+        <div class="q-mt-md">Loading your DCA dashboard...</div>
+      </q-card-section>
     </q-card>
-  </div>
 
-  <!-- Error State -->
-  <div v-if="error && !loading" class="col-12">
-    <q-banner class="bg-negative text-white">
-      <template v-slot:avatar>
-        <q-icon name="error" />
-      </template>
-      ${error}
-    </q-banner>
-  </div>
+    <!-- Error State -->
+    <q-card v-if="error && !loading" class="bg-negative text-white">
+      <q-card-section>
+        <q-icon name="error" class="q-mr-sm" />
+        ${error}
+      </q-card-section>
+    </q-card>
 
-  <!-- Dashboard Content -->
-  <div v-if="hasData" class="col-12">
-    <!-- Summary Cards -->
-    <div class="row q-col-gutter-md q-mb-lg">
-      <div class="col-12 col-md-3">
-        <q-card class="q-pa-md text-center">
-          <div class="text-h6">${formatSats(dashboardData.total_sats_accumulated)}</div>
-          <div class="text-grey">Total Sats Accumulated</div>
-        </q-card>
-      </div>
-      <div class="col-12 col-md-3">
-        <q-card class="q-pa-md text-center">
-          <div class="text-h6">${formatCurrency(dashboardData.total_fiat_invested)}</div>
-          <div class="text-grey">Total Invested</div>
-        </q-card>
-      </div>
-      <div class="col-12 col-md-3">
-        <q-card class="q-pa-md text-center">
-          <div class="text-h6">${formatCurrency(dashboardData.current_fiat_balance)}</div>
-          <div class="text-grey">Available Balance</div>
-        </q-card>
-      </div>
-      <div class="col-12 col-md-3">
-        <q-card class="q-pa-md text-center">
-          <div class="text-h6">${dashboardData.total_transactions}</div>
-          <div class="text-grey">Total Transactions</div>
-        </q-card>
-      </div>
-    </div>
+    <!-- Dashboard Content -->
+    <div v-if="hasData">
+      <!-- Summary Cards -->
+      <q-card class="q-mb-md">
+        <q-card-section>
+          <h6 class="text-subtitle1 q-my-none q-mb-md">DCA Overview</h6>
+          <div class="row q-col-gutter-md">
+            <div class="col-6 col-md-3">
+              <div class="text-center">
+                <div class="text-h6">${formatSats(dashboardData.total_sats_accumulated)}</div>
+                <div class="text-grey text-caption">Total Sats</div>
+              </div>
+            </div>
+            <div class="col-6 col-md-3">
+              <div class="text-center">
+                <div class="text-h6">${formatCurrency(dashboardData.total_fiat_invested)}</div>
+                <div class="text-grey text-caption">Total Invested</div>
+              </div>
+            </div>
+            <div class="col-6 col-md-3">
+              <div class="text-center">
+                <div class="text-h6">${formatCurrency(dashboardData.current_fiat_balance)}</div>
+                <div class="text-grey text-caption">Available Balance</div>
+              </div>
+            </div>
+            <div class="col-6 col-md-3">
+              <div class="text-center">
+                <div class="text-h6">${dashboardData.total_transactions}</div>
+                <div class="text-grey text-caption">Transactions</div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
 
-    <!-- DCA Status -->
-    <div class="row q-col-gutter-md q-mb-lg">
-      <div class="col-12">
-        <q-card class="q-pa-md">
-          <div class="text-h6 q-mb-md">DCA Status</div>
+      <!-- DCA Status -->
+      <q-card class="q-mb-md">
+        <q-card-section>
+          <h6 class="text-subtitle2 q-my-none q-mb-md">DCA Status</h6>
           <div class="row q-col-gutter-md">
             <div class="col-6">
               <div class="text-body2">Mode: <strong>${dashboardData.dca_mode}</strong></div>
@@ -79,15 +83,13 @@
           <div v-if="dashboardData.average_cost_basis > 0" class="q-mt-md">
             <div class="text-body2">Average Cost Basis: <strong>${Math.round(dashboardData.average_cost_basis)} sats/GTQ</strong></div>
           </div>
-        </q-card>
-      </div>
-    </div>
+        </q-card-section>
+      </q-card>
 
-    <!-- Recent Transactions -->
-    <div class="row q-col-gutter-md">
-      <div class="col-12">
-        <q-card class="q-pa-md">
-          <div class="text-h6 q-mb-md">Recent Transactions</div>
+      <!-- Recent Transactions -->
+      <q-card>
+        <q-card-section>
+          <h6 class="text-subtitle2 q-my-none q-mb-md">Recent Transactions</h6>
           <div v-if="transactions.length === 0" class="text-grey text-center q-pa-md">
             No transactions yet
           </div>
@@ -108,9 +110,49 @@
               </q-item-section>
             </q-item>
           </q-list>
-        </q-card>
-      </div>
+        </q-card-section>
+      </q-card>
     </div>
   </div>
+  
+  <!-- Sidebar -->
+  <div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
+    <q-card>
+      <q-card-section>
+        <h6 class="text-subtitle1 q-my-none">
+          {{SITE_TITLE}} DCA Client
+        </h6>
+        <p>
+          Monitor your Dollar Cost Averaging progress and manage your DCA settings.
+        </p>
+      </q-card-section>
+      <q-card-section class="q-pa-none">
+        <q-separator></q-separator>
+        <q-list>
+          <q-expansion-item
+            group="info"
+            icon="account_balance_wallet"
+            label="Quick Stats"
+            :content-inset-level="0.5"
+          >
+            <q-card-section class="text-caption" v-if="dashboardData">
+              <div class="row">
+                <div class="col-6">DCA Mode:</div>
+                <div class="col-6">${ dashboardData.dca_mode }</div>
+              </div>
+              <div class="row">
+                <div class="col-6">Status:</div>
+                <div class="col-6">${ dashboardData.dca_status }</div>
+              </div>
+              <div class="row" v-if="dashboardData.average_cost_basis > 0">
+                <div class="col-6">Avg Cost:</div>
+                <div class="col-6">${ Math.round(dashboardData.average_cost_basis) } sats/GTQ</div>
+              </div>
+            </q-card-section>
+          </q-expansion-item>
+        </q-list>
+      </q-card-section>
+    </q-card>
+  </div>
 </div>
 {% endblock %}