diff --git a/packages/frontend/src/components/shared/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts
index 262cb8f9..eedb9b24 100644
--- a/packages/frontend/src/components/shared/Button/Button.theme.ts
+++ b/packages/frontend/src/components/shared/Button/Button.theme.ts
@@ -20,7 +20,7 @@ export const buttonTheme = tv(
     variants: {
       size: {
         lg: ['gap-2', 'py-3.5', 'px-5', 'text-base', 'tracking-[-0.011em]'],
-        md: ['gap-2', 'py-3.25', 'px-5', 'text-sm', 'tracking-[-0.006em]'],
+        md: ['gap-2', 'py-3', 'px-5', 'text-sm', 'tracking-[-0.006em]'],
         sm: ['gap-1', 'py-2', 'px-3', 'text-xs'],
         xs: ['gap-1', 'py-1', 'px-2', 'text-xs'],
       },
diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx
index cf333ba3..e5b7604d 100644
--- a/packages/frontend/src/pages/org-slug/projects/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx
@@ -24,8 +24,8 @@ const Id = () => {
   const client = useGQLClient();
   const location = useLocation();
 
-  const isDesktopView = useMediaQuery('(min-width: 768px)'); // md:
-  const buttonSize = isDesktopView ? {} : { size: 'sm' as const };
+  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isTabletView ? {} : { size: 'sm' as const };
 
   const [project, setProject] = useState<ProjectType | null>(null);
   const [repoUrl, setRepoUrl] = useState('');
diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
index 3d61792d..682d1f48 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -14,11 +14,15 @@ import {
 } from 'components/shared/CustomIcon';
 import { Heading } from 'components/shared/Heading';
 import { Steps } from 'components/shared/Steps';
+import { useMediaQuery } from 'usehooks-ts';
 
 // TODO: Set dynamic route for template and load details from DB
 const CreateWithTemplate = () => {
   const { orgSlug } = useParams();
 
+  const isDesktopView = useMediaQuery('(min-width: 960px)'); // lg:
+  const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
+
   const stepperValues = [
     {
       step: 1,
@@ -47,8 +51,8 @@ const CreateWithTemplate = () => {
   );
 
   return (
-    <div className="flex flex-col items-center">
-      <div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
+    <div className="flex flex-col items-center gap-6 lg:gap-10 mx-auto w-full lg:w-5/6">
+      <div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
         <div className="flex items-center gap-3">
           <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
           <Heading className="font-medium">{template?.name}</Heading>
@@ -69,11 +73,15 @@ const CreateWithTemplate = () => {
           </a>
         </div>
       </div>
-      <div className="grid grid-cols-3 w-5/6 p-6">
-        <div>
-          <Steps currentIndex={activeStep} steps={stepperValues} />
+      <div className="grid grid-cols-3 p-0 lg:p-6 w-full gap-8 lg:gap-0">
+        <div className="col-span-3 lg:col-span-1">
+          <Steps
+            orientation={stepsOrientation}
+            currentIndex={activeStep}
+            steps={stepperValues}
+          />
         </div>
-        <div className="col-span-2">
+        <div className="col-span-3 lg:col-span-2">
           <Outlet context={{ template }} />
         </div>
       </div>
diff --git a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
index 9fc8795e..777a866d 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
@@ -3,6 +3,7 @@ import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import assert from 'assert';
+import { useMediaQuery } from 'usehooks-ts';
 
 import { useOctokit } from '../../../../../context/OctokitContext';
 import { useGQLClient } from '../../../../../context/GQLClientContext';
@@ -28,6 +29,9 @@ const CreateRepo = () => {
 
   const { orgSlug } = useParams();
 
+  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isTabletView ? { size: 'lg' as const } : {};
+
   const navigate = useNavigate();
 
   const [gitAccounts, setGitAccounts] = useState<string[]>([]);
@@ -166,8 +170,8 @@ const CreateRepo = () => {
         </div>
         <div>
           <Button
+            {...buttonSize}
             type="submit"
-            size="lg"
             disabled={!Boolean(template.repoFullName) || isLoading}
             rightIcon={<ArrowRightCircleFilledIcon />}
           >