diff --git a/backup/templates/backup/oneClickBackups.html b/backup/templates/backup/oneClickBackups.html
index 1208c2e8e..9b6778288 100755
--- a/backup/templates/backup/oneClickBackups.html
+++ b/backup/templates/backup/oneClickBackups.html
@@ -28,36 +28,52 @@
         
         .cp-card {
             background: #fff;
-            border-radius: 4px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
             margin-bottom: 20px;
             border: 1px solid var(--border-color);
+            transition: transform 0.2s, box-shadow 0.2s;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .cp-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }
         
         .cp-card-header {
-            padding: 15px;
+            padding: 18px 20px;
             border-bottom: 1px solid var(--border-color);
             background: var(--bg-light);
-            font-weight: 500;
+            font-weight: 600;
+            font-size: 18px;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
         }
         
         .cp-card-body {
-            padding: 15px;
+            padding: 20px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
         }
         
         .cp-btn {
             display: inline-block;
-            font-weight: 400;
+            font-weight: 500;
             text-align: center;
             white-space: nowrap;
             vertical-align: middle;
             user-select: none;
             border: 1px solid transparent;
-            padding: 7px 12px;
+            padding: 10px 16px;
             font-size: 14px;
-            border-radius: 4px;
+            border-radius: 6px;
             transition: all 0.2s;
             cursor: pointer;
+            text-decoration: none;
         }
         
         .cp-btn-primary {
@@ -67,6 +83,8 @@
         
         .cp-btn-primary:hover {
             background-color: #0056b3;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
         
         .cp-btn-outline {
@@ -77,11 +95,14 @@
         
         .cp-btn-outline:hover {
             background-color: var(--bg-light);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
         
         .cp-btn-block {
             display: block;
             width: 100%;
+            margin-top: auto;
         }
         
         .cp-table {
@@ -93,13 +114,13 @@
         .cp-table th {
             background-color: var(--bg-light);
             border-bottom: 1px solid var(--border-color);
-            padding: 12px;
+            padding: 15px;
             text-align: left;
             font-weight: 500;
         }
         
         .cp-table td {
-            padding: 12px;
+            padding: 15px;
             border-bottom: 1px solid var(--border-color);
             vertical-align: middle;
         }
@@ -129,22 +150,24 @@
         .cp-form-control {
             display: block;
             width: 100%;
-            padding: 6px 12px;
+            padding: 10px 15px;
             background-color: #fff;
             border: 1px solid var(--border-color);
-            border-radius: 4px;
+            border-radius: 6px;
+            font-size: 14px;
         }
         
         .price-box {
             background-color: var(--bg-light);
-            border-radius: 4px;
-            padding: 12px;
+            border-radius: 6px;
+            padding: 15px;
             margin-bottom: 15px;
+            text-align: center;
         }
         
         .price-amount {
-            font-size: 22px;
-            font-weight: 500;
+            font-size: 28px;
+            font-weight: 600;
             color: var(--primary-color);
         }
         
@@ -155,8 +178,8 @@
         
         .plan-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 20px;
+            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+            gap: 25px;
         }
         
         .billing-cycle {
@@ -170,7 +193,7 @@
         
         .action-btns {
             display: flex;
-            gap: 8px;
+            gap: 10px;
         }
         
         .action-btns a {
@@ -181,19 +204,39 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 20px;
+            margin-bottom: 25px;
         }
         
         .page-title {
-            font-size: 24px;
+            font-size: 26px;
             margin-bottom: 0;
+            font-weight: 500;
         }
         
         .section-title {
-            font-size: 18px;
-            margin-bottom: 15px;
-            border-bottom: 1px solid var(--border-color);
-            padding-bottom: 10px;
+            font-size: 20px;
+            margin-bottom: 20px;
+            padding-bottom: 12px;
+            position: relative;
+            font-weight: 500;
+        }
+        
+        .section-title:after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 50px;
+            height: 3px;
+            background-color: var(--primary-color);
+        }
+        
+        .btn-space {
+            margin-top: 15px;
+        }
+        
+        .plans-container {
+            margin-top: 30px;
         }
         
         @media (max-width: 768px) {
@@ -395,7 +438,7 @@
 
             <!-- Available Backup Plans Section -->
             <h2 class="section-title">Available Backup Plans</h2>
-            <div class="mb-4">
+            <div class="plans-container">
                 <div class="plan-grid">
                     <!-- 100GB Plan -->
                     <div class="cp-card">
@@ -412,7 +455,7 @@
                             
                             <a href="javascript:void(0)" 
                                ng-click="BuyNowBackupP('{{ plans.0.name }}', '{{ plans.0.monthlyPrice }}', '{{ plans.0.yearlyPrice }}', 12)" 
-                               class="cp-btn cp-btn-outline cp-btn-block">
+                               class="cp-btn cp-btn-outline cp-btn-block btn-space">
                                 Yearly via Card
                             </a>
                         </div>
@@ -431,16 +474,18 @@
                                 <div class="price-period">/year</div>
                             </div>
                             
-                            <a href="javascript:void(0)" 
-                               ng-click="BuyNowBackupP('{{ plans.1.name }}', '{{ plans.1.monthlyPrice }}', '{{ plans.1.yearlyPrice }}', 1)" 
-                               class="cp-btn cp-btn-outline cp-btn-block mb-2">
-                                Monthly via Card
-                            </a>
-                            <a href="javascript:void(0)" 
-                               ng-click="BuyNowBackupP('{{ plans.1.name }}', '{{ plans.1.monthlyPrice }}', '{{ plans.1.yearlyPrice }}', 12)" 
-                               class="cp-btn cp-btn-outline cp-btn-block">
-                                Yearly via Card
-                            </a>
+                            <div class="btn-space">
+                                <a href="javascript:void(0)" 
+                                   ng-click="BuyNowBackupP('{{ plans.1.name }}', '{{ plans.1.monthlyPrice }}', '{{ plans.1.yearlyPrice }}', 1)" 
+                                   class="cp-btn cp-btn-outline cp-btn-block mb-2">
+                                    Monthly via Card
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   ng-click="BuyNowBackupP('{{ plans.1.name }}', '{{ plans.1.monthlyPrice }}', '{{ plans.1.yearlyPrice }}', 12)" 
+                                   class="cp-btn cp-btn-outline cp-btn-block">
+                                    Yearly via Card
+                                </a>
+                            </div>
                         </div>
                     </div>
                     
@@ -457,16 +502,18 @@
                                 <div class="price-period">/year</div>
                             </div>
                             
-                            <a href="javascript:void(0)" 
-                               ng-click="BuyNowBackupP('{{ plans.2.name }}', '{{ plans.2.monthlyPrice }}', '{{ plans.2.yearlyPrice }}', 1)" 
-                               class="cp-btn cp-btn-outline cp-btn-block mb-2">
-                                Monthly via Card
-                            </a>
-                            <a href="javascript:void(0)" 
-                               ng-click="BuyNowBackupP('{{ plans.2.name }}', '{{ plans.2.monthlyPrice }}', '{{ plans.2.yearlyPrice }}', 12)" 
-                               class="cp-btn cp-btn-outline cp-btn-block">
-                                Yearly via Card
-                            </a>
+                            <div class="btn-space">
+                                <a href="javascript:void(0)" 
+                                   ng-click="BuyNowBackupP('{{ plans.2.name }}', '{{ plans.2.monthlyPrice }}', '{{ plans.2.yearlyPrice }}', 1)" 
+                                   class="cp-btn cp-btn-outline cp-btn-block mb-2">
+                                    Monthly via Card
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   ng-click="BuyNowBackupP('{{ plans.2.name }}', '{{ plans.2.monthlyPrice }}', '{{ plans.2.yearlyPrice }}', 12)" 
+                                   class="cp-btn cp-btn-outline cp-btn-block">
+                                    Yearly via Card
+                                </a>
+                            </div>
                         </div>
                     </div>
                     
@@ -483,16 +530,18 @@
                                 <div class="price-period">/year</div>
                             </div>
                             
-                            <a href="javascript:void(0)" 
-                               ng-click="BuyNowBackupP('{{ plans.3.name }}', '{{ plans.3.monthlyPrice }}', '{{ plans.3.yearlyPrice }}', 1)" 
-                               class="cp-btn cp-btn-outline cp-btn-block mb-2">
-                                Monthly via Card
-                            </a>
-                            <a href="javascript:void(0)" 
-                               ng-click="BuyNowBackupP('{{ plans.3.name }}', '{{ plans.3.monthlyPrice }}', '{{ plans.3.yearlyPrice }}', 12)" 
-                               class="cp-btn cp-btn-outline cp-btn-block">
-                                Yearly via Card
-                            </a>
+                            <div class="btn-space">
+                                <a href="javascript:void(0)" 
+                                   ng-click="BuyNowBackupP('{{ plans.3.name }}', '{{ plans.3.monthlyPrice }}', '{{ plans.3.yearlyPrice }}', 1)" 
+                                   class="cp-btn cp-btn-outline cp-btn-block mb-2">
+                                    Monthly via Card
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   ng-click="BuyNowBackupP('{{ plans.3.name }}', '{{ plans.3.monthlyPrice }}', '{{ plans.3.yearlyPrice }}', 12)" 
+                                   class="cp-btn cp-btn-outline cp-btn-block">
+                                    Yearly via Card
+                                </a>
+                            </div>
                         </div>
                     </div>
                     
@@ -509,16 +558,18 @@
                                 <div class="price-period">/year</div>
                             </div>
                             
-                            <a href="javascript:void(0)" 
-                               ng-click="BuyNowBackupP('{{ plans.4.name }}', '{{ plans.4.monthlyPrice }}', '{{ plans.4.yearlyPrice }}', 1)" 
-                               class="cp-btn cp-btn-outline cp-btn-block mb-2">
-                                Monthly via Card
-                            </a>
-                            <a href="javascript:void(0)" 
-                               ng-click="BuyNowBackupP('{{ plans.4.name }}', '{{ plans.4.monthlyPrice }}', '{{ plans.4.yearlyPrice }}', 12)" 
-                               class="cp-btn cp-btn-outline cp-btn-block">
-                                Yearly via Card
-                            </a>
+                            <div class="btn-space">
+                                <a href="javascript:void(0)" 
+                                   ng-click="BuyNowBackupP('{{ plans.4.name }}', '{{ plans.4.monthlyPrice }}', '{{ plans.4.yearlyPrice }}', 1)" 
+                                   class="cp-btn cp-btn-outline cp-btn-block mb-2">
+                                    Monthly via Card
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   ng-click="BuyNowBackupP('{{ plans.4.name }}', '{{ plans.4.monthlyPrice }}', '{{ plans.4.yearlyPrice }}', 12)" 
+                                   class="cp-btn cp-btn-outline cp-btn-block">
+                                    Yearly via Card
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>