diff --git a/Moonlight/Shared/Views/Index.razor b/Moonlight/Shared/Views/Index.razor
index c07a66bb..44de7963 100644
--- a/Moonlight/Shared/Views/Index.razor
+++ b/Moonlight/Shared/Views/Index.razor
@@ -96,11 +96,16 @@
     </div>
 </div>
 
-<div class="d-flex flex-row mb-5">
-    <div class="card card-body">
-        <span class="card-title mb-3 fs-3">
-            <TL>Create something new</TL>
-        </span>
+<!--d-flex flex-row mb-5-->
+<div class="card mb-5">
+    <div class="card-header card-header-stretch">
+        <div class="card-title d-flex align-items-center">
+            <h3 class="fw-bold m-0 text-gray-800">
+                <TL>Create something new</TL>
+            </h3>
+        </div>
+    </div>
+    <div class="card-body pt-3">
         <div class="flex-row">
             <div class="d-flex align-items-center">
                 <div class="symbol symbol-50px me-3">
@@ -115,6 +120,7 @@
                     </span>
                 </div>
             </div>
+            <div class="separator mb-2 mt-2"></div>
             <div class="d-flex align-items-center">
                 <div class="symbol symbol-50px me-3">
                     <i class="bx bx-md bx-data"></i>
@@ -128,6 +134,7 @@
                     </span>
                 </div>
             </div>
+            <div class="separator mb-2 mt-2"></div>
             <div class="d-flex align-items-center">
                 <div class="symbol symbol-50px me-3">
                     <i class="bx bx-md bx-globe"></i>
@@ -141,6 +148,7 @@
                     </span>
                 </div>
             </div>
+            <div class="separator mb-2 mt-2"></div>
             <div class="d-flex align-items-center">
                 <div class="symbol symbol-50px me-3">
                     <i class="bx bx-md bx-purchase-tag"></i>
@@ -157,11 +165,16 @@
         </div>
     </div>
 </div>
-<div class="d-flex flex-row">
-    <div class="card card-body">
-        <span class="card-title mb-3 fs-3">
-            <TL>Manage your services</TL>
-        </span>
+
+<div class="card mb-5">
+    <div class="card-header card-header-stretch">
+        <div class="card-title d-flex align-items-center">
+            <h3 class="fw-bold m-0 text-gray-800">
+                <TL>Manage your services</TL>
+            </h3>
+        </div>
+    </div>
+    <div class="card-body pt-3">
         <div class="flex-row">
             <div class="d-flex align-items-center">
                 <div class="symbol symbol-50px me-3">
@@ -176,6 +189,7 @@
                     </span>
                 </div>
             </div>
+            <div class="separator mb-2 mt-2"></div>
             <div class="d-flex align-items-center">
                 <div class="symbol symbol-50px me-3">
                     <i class="bx bx-md bx-data"></i>
@@ -189,6 +203,7 @@
                     </span>
                 </div>
             </div>
+            <div class="separator mb-2 mt-2"></div>
             <div class="d-flex align-items-center">
                 <div class="symbol symbol-50px me-3">
                     <i class="bx bx-md bx-globe"></i>
@@ -202,6 +217,7 @@
                     </span>
                 </div>
             </div>
+            <div class="separator mb-2 mt-2"></div>
             <div class="d-flex align-items-center">
                 <div class="symbol symbol-50px me-3">
                     <i class="bx bx-md bx-purchase-tag"></i>