diff --git a/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagelg.png b/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagelg.png
index 75d98039..a42216e2 100644
Binary files a/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagelg.png and b/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagelg.png differ
diff --git a/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagemd.png b/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagemd.png
index 28042b9b..668ec7af 100644
Binary files a/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagemd.png and b/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagemd.png differ
diff --git a/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagexs.png b/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagexs.png
index 58fff146..79e6553a 100644
Binary files a/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagexs.png and b/playwright-tests/snapshots/qucikstart-page.spec.ts-Quickstart-Pagexs.png differ
diff --git a/src/pages/quickstart.tsx b/src/pages/quickstart.tsx
index 67657c31..33e51300 100644
--- a/src/pages/quickstart.tsx
+++ b/src/pages/quickstart.tsx
@@ -46,7 +46,7 @@ export const QuickstartPage = () => {
           {isLoading ? (
             <div>Loading...</div>
           ) : (
-            <div className="grid grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
               {mySnippets?.slice(0, 6).map((snippet) => (
                 <Link
                   key={snippet.snippet_id}
@@ -73,14 +73,16 @@ export const QuickstartPage = () => {
 
         <div className="mb-8">
           <h2 className="text-xl font-semibold mb-4">Start Blank Snippet</h2>
-          <div className="grid grid-cols-4 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             {blankTemplates.map((template, index) => (
               <Link
                 key={index}
                 href={
                   template.disabled
                     ? "#"
-                    : `/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`
+                    : `/editor?template=${template.name
+                        .toLowerCase()
+                        .replace(/ /g, "-")}`
                 }
               >
                 <Card
@@ -103,7 +105,7 @@ export const QuickstartPage = () => {
 
         <div className="mt-12">
           <h2 className="text-xl font-semibold mb-4">Import as Snippet</h2>
-          <div className="grid grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             {[
               { name: "KiCad Footprint", type: "footprint" },
               { name: "KiCad Project", type: "board" },
@@ -159,11 +161,13 @@ export const QuickstartPage = () => {
           <h2 className="text-xl font-semibold mb-4 mt-12">
             Start from a Template
           </h2>
-          <div className="grid grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             {templates.map((template, index) => (
               <Link
                 key={index}
-                href={`/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`}
+                href={`/editor?template=${template.name
+                  .toLowerCase()
+                  .replace(/ /g, "-")}`}
               >
                 <Card className="hover:shadow-md transition-shadow rounded-md">
                   <CardHeader className="p-4">