diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 2c8b1c893..9f6796447 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -253,4 +253,32 @@ The cursor: default; property value restores the browser's default cursor style
   .logspace-icon-text {
     @apply mt-1
   }
+
+  .flex-max-width {
+    @apply flex w-full
+  }
+
+  .main-page-panel {
+    @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16
+  }
+
+  .main-page-nav-arrangement {
+    @apply flex-max-width justify-between px-6 py-12 pb-2
+  }
+
+  .main-page-nav-title {
+    @apply flex items-center justify-center gap-2 text-2xl font-semibold
+  }
+
+  .main-page-nav-button {
+    @apply mr-2 w-4
+  }
+
+  .main-page-description-text {
+    @apply flex w-[60%] px-6 pb-14 text-muted-foreground
+  }
+
+  .main-page-flows-display {
+    @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 0b45a94ae..99df6a8a8 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -13,9 +13,9 @@ export default function HomePage() {
   }, []);
   const navigate = useNavigate();
   return (
-    <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
-      <div className="flex w-full justify-between px-6 py-12 pb-2">
-        <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
+    <div className="main-page-panel">
+      <div className="main-page-nav-arrangement">
+        <span className="main-page-nav-title">
           <Home className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
@@ -26,7 +26,7 @@ export default function HomePage() {
               downloadFlows();
             }}
           >
-            <Download className="mr-2 w-4" />
+            <Download className="main-page-nav-button" />
             Download Collection
           </Button>
           <Button
@@ -35,7 +35,7 @@ export default function HomePage() {
               uploadFlows();
             }}
           >
-            <Upload className="mr-2 w-4" />
+            <Upload className="main-page-nav-button" />
             Upload Collection
           </Button>
           <Button
@@ -46,15 +46,15 @@ export default function HomePage() {
               });
             }}
           >
-            <Plus className="mr-2 w-4" />
+            <Plus className="main-page-nav-button" />
             New Project
           </Button>
         </div>
       </div>
-      <span className="flex w-[60%] px-6 pb-14 text-muted-foreground">
+      <span className="main-page-description-text">
         Manage your personal projects. Download or upload your collection.
       </span>
-      <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+      <div className="main-page-flows-display">
         {flows.map((flow, idx) => (
           <CardComponent
             key={idx}
@@ -67,7 +67,7 @@ export default function HomePage() {
                   size="sm"
                   className="whitespace-nowrap "
                 >
-                  <ExternalLink className="mr-2 w-4" />
+                  <ExternalLink className="main-page-nav-button" />
                   Edit Flow
                 </Button>
               </Link>