diff --git a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
index c7a9632ae..4b02e30c8 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
@@ -107,7 +107,7 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
 <Wizard title="Add Apple platform" bind:showExitModal confirmExit>
     <Layout.Stack gap="xxl">
         <!-- Step One -->
-        <Layout.Stack gap="l" direction="row">
+        <Layout.Stack gap="l" direction="row" class="platforms">
             {#each Object.entries(platforms) as [key, value]}
                 <div class="u-width-full-line">
                     <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
@@ -289,4 +289,12 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
             padding: 16px;
         }
     }
+
+    :global(.platforms) {
+        @media (max-width: 768px) {
+            gap: var(--gap-l, 1rem);
+            display: grid !important;
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
 </style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index f7a8501fa..cea6ae0a6 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -164,7 +164,7 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
 <Wizard title="Add Flutter platform" bind:showExitModal confirmExit>
     <Layout.Stack gap="xxl">
         <!-- Step One -->
-        <Layout.Stack gap="l" direction="row">
+        <Layout.Stack gap="l" direction="row" class="platforms">
             {#each Object.entries(platforms) as [key, value]}
                 <div class="u-width-full-line">
                     <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
@@ -345,4 +345,12 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
             padding: 16px;
         }
     }
+
+    :global(.platforms) {
+        @media (max-width: 768px) {
+            gap: var(--gap-l, 1rem);
+            display: grid !important;
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
 </style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
index 154c446e1..90d47cdfd 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
@@ -133,7 +133,7 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
 <Wizard title="Add React Native platform" bind:showExitModal confirmExit>
     <Layout.Stack gap="xxl">
         <!-- Step One -->
-        <Layout.Stack gap="l" direction="row">
+        <Layout.Stack gap="l" direction="row" class="platforms">
             {#each Object.entries(platforms) as [key, value]}
                 <div class="u-width-full-line">
                     <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
@@ -311,4 +311,12 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
             padding: 16px;
         }
     }
+
+    :global(.platforms) {
+        @media (max-width: 768px) {
+            gap: var(--gap-l, 1rem);
+            display: grid !important;
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
 </style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index 7f4e834af..366d1302e 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -412,7 +412,11 @@ ${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
 
     .frameworks {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
         gap: var(--gap-l, 16px);
+        grid-template-columns: repeat(3, 1fr);
+
+        @media (max-width: 768px) {
+            grid-template-columns: repeat(2, 1fr);
+        }
     }
 </style>