diff --git a/assets/sass/pages/button-generator.scss b/assets/sass/pages/button-generator.scss
index c6aac4b..193610b 100644
--- a/assets/sass/pages/button-generator.scss
+++ b/assets/sass/pages/button-generator.scss
@@ -67,6 +67,16 @@
       0 0 20px rgba(0, 150, 255, 0.1),
       inset 0 0 40px rgba(0, 100, 200, 0.05);
 
+    @include media-down(md) {
+      background: linear-gradient(
+        135deg,
+        rgba(0, 100, 180, 1) 0%,
+        rgb(0, 29, 55) 100%
+      );
+      z-index: 90;
+    }
+    
+
     &::before {
       content: "";
       position: absolute;
diff --git a/layouts/shortcodes/button-generator.html b/layouts/shortcodes/button-generator.html
index 8d65fa3..6babacb 100644
--- a/layouts/shortcodes/button-generator.html
+++ b/layouts/shortcodes/button-generator.html
@@ -1,7 +1,7 @@
 <div id="button-generator-app">
   <div class="generator-container">
     <div class="preview-section">
-      <h3>Preview</h3>
+      <h3 class="hidden-md-down">Preview</h3>
       <div class="preview-container">
         <div class="preview-wrapper">
           <canvas id="button-canvas" width="88" height="31"></canvas>
@@ -9,7 +9,7 @@
       </div>
       <button id="download-button" class="btn-primary">Download Button</button>
 
-      <div class="presets-container">
+      <div class="presets-container hidden-md-down">
         <h3>Presets</h3>
         <button id="preset-random" class="btn-secondary">Random Button</button>
         <button id="preset-classic" class="btn-secondary">Classic Style</button>