diff --git a/app/src/config/Config.tsx b/app/src/config/Config.tsx
index b69ab4a5..252e1a45 100644
--- a/app/src/config/Config.tsx
+++ b/app/src/config/Config.tsx
@@ -248,7 +248,12 @@ export default function (props: {
 
   return (
     <div id="config-wrapper">
-      <p id="config-disclaimer">refresh webpage to go to main application page</p>
+      <div className="config-header">
+        <h2 className="config-title">Available Modules</h2>
+        <p className="config-description">
+          Enable or disable modules to customize your Music Blocks experience
+        </p>
+      </div>
 
       <ul id="config-module-list">
         {Object.entries(modules).map(([id, { name, desc, active, elements, flags }], i) => (
diff --git a/app/src/config/ConfigPage.tsx b/app/src/config/ConfigPage.tsx
index e089354e..a9e22a49 100644
--- a/app/src/config/ConfigPage.tsx
+++ b/app/src/config/ConfigPage.tsx
@@ -22,7 +22,53 @@ export default function (props: {
 
   return (
     <div id="config-page">
+      <div id="config-page-hero">
+        <div className="config-page-hero-content">
+          <div className="config-page-logo">
+            <svg viewBox="0 0 100 100" className="logo-icon">
+              <circle cx="50" cy="50" r="45" fill="#1b9cfc" />
+              <path d="M35 40 L35 60 L55 50 Z" fill="white" />
+              <circle cx="70" cy="35" r="8" fill="#0652dd" />
+              <circle cx="70" cy="65" r="8" fill="#0652dd" />
+            </svg>
+          </div>
+          <h1 className="config-page-title">Music Blocks v4</h1>
+          <p className="config-page-subtitle">
+            Configure your Music Blocks experience by selecting the modules and features you
+            want to use
+          </p>
+          <div className="config-page-badge">
+            <span className="badge-icon">⚙️</span>
+            <span className="badge-text">Development Configuration</span>
+          </div>
+        </div>
+      </div>
+
       <div id="config-page-content-wrapper">
+        <div className="config-instructions">
+          <div className="instruction-card">
+            <span className="instruction-icon">1️⃣</span>
+            <div className="instruction-content">
+              <h3>Select Modules</h3>
+              <p>Toggle the modules you want to enable in your Music Blocks application</p>
+            </div>
+          </div>
+          <div className="instruction-card">
+            <span className="instruction-icon">2️⃣</span>
+            <div className="instruction-content">
+              <h3>Configure Features</h3>
+              <p>Customize elements and feature flags for each module</p>
+            </div>
+          </div>
+          <div className="instruction-card">
+            <span className="instruction-icon">3️⃣</span>
+            <div className="instruction-content">
+              <h3>Refresh to Apply</h3>
+              <p>Reload the page to launch Music Blocks with your configuration</p>
+            </div>
+          </div>
+        </div>
+
         <Config
           definitions={props.definitions}
           config={props.config}
diff --git a/app/src/config/index.scss b/app/src/config/index.scss
index 958337b6..700d25fb 100644
--- a/app/src/config/index.scss
+++ b/app/src/config/index.scss
@@ -1,22 +1,203 @@
-@import '@res/themes/light';
-@import '@res/scss/sizes';
+@use '@res/themes/light' as *;
+@use '@res/scss/sizes' as *;
 
 #config-page {
   width: 100%;
-  height: 100%;
   min-height: 100vh;
-  padding: 30px 12px;
-  background-color: $c-bg-white;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
   overflow-y: auto;
 
+  #config-page-hero {
+    background: linear-gradient(135deg, $mb-accent-dark 0%, $mb-accent 50%, $mb-accent-light 100%);
+    padding: 60px 20px;
+    text-align: center;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      right: -10%;
+      width: 300px;
+      height: 300px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 50%;
+      animation: float 6s ease-in-out infinite;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -30%;
+      left: -5%;
+      width: 200px;
+      height: 200px;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 50%;
+      animation: float 8s ease-in-out infinite reverse;
+    }
+
+    .config-page-hero-content {
+      position: relative;
+      z-index: 1;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+
+    .config-page-logo {
+      width: 100px;
+      height: 100px;
+      margin: 0 auto 24px;
+      animation: pulse 2s ease-in-out infinite;
+
+      .logo-icon {
+        width: 100%;
+        height: 100%;
+        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
+      }
+    }
+
+    .config-page-title {
+      font-size: 3rem;
+      font-weight: 700;
+      color: $text-light;
+      margin: 0 0 16px;
+      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      letter-spacing: -0.5px;
+    }
+
+    .config-page-subtitle {
+      font-size: 1.2rem;
+      color: rgba(255, 255, 255, 0.95);
+      margin: 0 0 24px;
+      line-height: 1.6;
+      max-width: 600px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .config-page-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 20px;
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      border-radius: 50px;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: $text-light;
+      font-weight: 600;
+      font-size: 0.95rem;
+
+      .badge-icon {
+        font-size: 1.2rem;
+      }
+    }
+  }
+
   #config-page-content-wrapper {
     width: 100%;
+    max-width: 1200px;
     margin: 0 auto;
-    max-width: 720px;
-    height: max-content;
+    padding: 40px 20px;
+
+    .config-instructions {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 20px;
+      margin-bottom: 40px;
+
+      .instruction-card {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 24px;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        transition: all 0.3s ease;
+        border: 1px solid rgba(27, 156, 252, 0.1);
+
+        &:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 8px 24px rgba(27, 156, 252, 0.15);
+          border-color: rgba(27, 156, 252, 0.3);
+        }
+
+        .instruction-icon {
+          font-size: 2rem;
+          flex-shrink: 0;
+        }
+
+        .instruction-content {
+          h3 {
+            margin: 0 0 8px;
+            font-size: 1.1rem;
+            color: $text-dark;
+            font-weight: 600;
+          }
+
+          p {
+            margin: 0;
+            font-size: 0.95rem;
+            color: #666;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
 
     #config-wrapper {
-      border-radius: $s-border-radius;
+      border-radius: 16px;
+      background: white;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+    }
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+@media (max-width: 768px) {
+  #config-page {
+    #config-page-hero {
+      padding: 40px 20px;
+
+      .config-page-title {
+        font-size: 2rem;
+      }
+
+      .config-page-subtitle {
+        font-size: 1rem;
+      }
+    }
+
+    #config-page-content-wrapper {
+      padding: 24px 16px;
+
+      .config-instructions {
+        grid-template-columns: 1fr;
+      }
     }
   }
 }
@@ -24,30 +205,34 @@
 #config-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 20px;
   width: 100%;
-  height: 100%;
-  height: max-content;
-  padding: 12px;
-  background-color: $mb-accent;
+  padding: 32px;
 
-  #config-disclaimer {
-    width: 100%;
-    margin: 0;
-    padding: 8px 0;
-    border-radius: $s-border-radius;
-    font-size: 0.9rem;
-    font-weight: bold;
+  .config-header {
     text-align: center;
-    text-transform: uppercase;
-    color: $mb-accent;
-    background-color: $c-bg-white;
+    padding-bottom: 24px;
+    border-bottom: 2px solid #f0f0f0;
+
+    .config-title {
+      font-size: 2rem;
+      font-weight: 700;
+      color: $mb-accent-dark;
+      margin: 0 0 12px;
+    }
+
+    .config-description {
+      font-size: 1rem;
+      color: #666;
+      margin: 0;
+      line-height: 1.6;
+    }
   }
 
   #config-module-list {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 16px;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -56,11 +241,20 @@
     .config-module-list-item {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 16px;
       margin: 0;
-      padding: 12px;
-      border-radius: 4px;
-      background-color: $mb-accent-dark;
+      padding: 24px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+      border: 1px solid #e0e0e0;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(6, 82, 221, 0.12);
+        border-color: $mb-accent-light;
+      }
 
       > * {
         width: 100%;
@@ -70,37 +264,36 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        align-items: stretch;
-        padding: 0 12px;
+        align-items: center;
+        padding: 0;
+        gap: 16px;
 
-        .config-module-list-item-header-left,
-        .config-module-list-item-header-right {
-          height: 100%;
+        .config-module-list-item-header-left {
+          flex: 1;
           display: flex;
           flex-direction: column;
-          justify-content: flex-start;
-        }
-
-        .config-module-list-item-header-left {
-          align-items: flex-start;
-          gap: 4px;
+          gap: 8px;
 
           .config-module-list-item-name {
             margin: 0;
-            font-size: 1.2rem;
-            color: $text-light;
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: $mb-accent-dark;
+            letter-spacing: -0.3px;
           }
 
           .config-module-list-item-desc {
             margin: 0;
-            font-size: 0.9rem;
-            color: $mb-accent-light;
+            font-size: 1rem;
+            color: #666;
+            line-height: 1.5;
           }
         }
 
         .config-module-list-item-header-right {
-          padding-top: 2px;
-          align-items: flex-end;
+          display: flex;
+          align-items: center;
+          flex-shrink: 0;
         }
       }
 
@@ -108,10 +301,13 @@
         position: relative;
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: 12px;
+        padding-top: 8px;
+        border-top: 1px solid #e8e8e8;
 
         &.config-module-list-item-body-inactive {
-          opacity: 50%;
+          opacity: 40%;
+          pointer-events: none;
 
           &::before {
             position: absolute;
@@ -124,15 +320,19 @@
         }
 
         .config-module-list-item-subitems {
-          border: 1px solid $mb-accent;
-          border-radius: 4px;
+          border: 1px solid #e0e0e0;
+          border-radius: 8px;
+          overflow: hidden;
+          background: white;
 
           .config-module-list-item-subitems-label {
             margin: 0;
-            padding: 8px 0 8px 12px;
-            font-size: 0.9rem;
-            color: $text-light;
-            background-color: $mb-accent;
+            padding: 12px 16px;
+            font-size: 1rem;
+            font-weight: 600;
+            color: $mb-accent-dark;
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            border-bottom: 1px solid #e0e0e0;
           }
 
           .config-module-list-item-subitem-list {
@@ -147,23 +347,33 @@
               flex-direction: row;
               justify-content: space-between;
               align-items: center;
-              padding: 4px 12px;
-              border-bottom: 1px solid $mb-accent;
-              background-color: $mb-accent-light;
+              padding: 12px 16px;
+              border-bottom: 1px solid #f0f0f0;
+              background-color: white;
+              transition: background-color 0.2s ease;
 
-              &:first-child {
-                border-top: 1px solid $mb-accent-light;
+              &:hover {
+                background-color: #f8f9fa;
               }
 
               &:last-child {
-                border-bottom: unset;
+                border-bottom: none;
               }
 
               .config-module-list-item-subitem-name {
                 margin: 0;
-                font-size: 0.9rem;
-                font-weight: bold;
-                color: $mb-accent-dark;
+                font-size: 0.95rem;
+                font-weight: 500;
+                color: #333;
+
+                code {
+                  padding: 2px 8px;
+                  background: #f0f0f0;
+                  border-radius: 4px;
+                  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+                  font-size: 0.9rem;
+                  color: $mb-accent;
+                }
               }
             }
           }
@@ -172,3 +382,32 @@
     }
   }
 }
+
+@media (max-width: 640px) {
+  #config-wrapper {
+    padding: 20px;
+
+    .config-header {
+      .config-title {
+        font-size: 1.5rem;
+      }
+    }
+
+    #config-module-list {
+      .config-module-list-item {
+        padding: 16px;
+
+        .config-module-list-item-header {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 12px;
+
+          .config-module-list-item-header-right {
+            width: 100%;
+            justify-content: flex-end;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/src/splash/index.scss b/app/src/splash/index.scss
index c7bcc23e..3e32b456 100644
--- a/app/src/splash/index.scss
+++ b/app/src/splash/index.scss
@@ -1,5 +1,5 @@
-@import '@res/themes/light';
-@import '@res/scss/sizes';
+@use '@res/themes/light' as *;
+@use '@res/scss/sizes' as *;
 
 #splash-container {
   display: flex;