diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.module.css b/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
index 591bf5783..063962e98 100644
--- a/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
@@ -25,7 +25,7 @@
 
 .modal_body {
   overflow-y: auto;
-  @apply rounded-b-md p-6 pt-4 bg-def-1 flex-grow;
+  @apply rounded-b-md p-4 pt-4 bg-def-1 flex-grow;
 
   &[data-no-padding] {
     @apply p-0;
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
index 512ca5e3d..c9198edad 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
@@ -24,8 +24,8 @@ import cx from "classnames";
 const Prose = () => (
   <StepLayout
     body={
-      <>
-        <div class="flex h-36 w-full flex-col justify-center gap-3 rounded-md px-4 py-6 text-fg-inv-1 outline-2 outline-bg-def-acc-3 bg-inv-4">
+      <div class="flex flex-col gap-4">
+        <div class="flex h-36 w-full flex-col justify-center gap-3 rounded-md p-4 text-fg-inv-1 outline-2 outline-bg-def-acc-3 bg-inv-4">
           <div class="flex flex-col gap-3">
             <Typography
               hierarchy="label"
@@ -74,7 +74,7 @@ const Prose = () => (
             </Typography>
           </div>
         </div>
-      </>
+      </div>
     }
     footer={<StepFooter nextText="start" />}
   />
diff --git a/pkgs/clan-app/ui/src/workflows/Steps.module.css b/pkgs/clan-app/ui/src/workflows/Steps.module.css
new file mode 100644
index 000000000..8416eb9ea
--- /dev/null
+++ b/pkgs/clan-app/ui/src/workflows/Steps.module.css
@@ -0,0 +1,7 @@
+.step {
+  @apply relative flex size-full flex-col justify-between gap-8;
+
+  .footer {
+    @apply flex justify-between;
+  }
+}
diff --git a/pkgs/clan-app/ui/src/workflows/Steps.tsx b/pkgs/clan-app/ui/src/workflows/Steps.tsx
index 85f6da171..c0ff851be 100644
--- a/pkgs/clan-app/ui/src/workflows/Steps.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Steps.tsx
@@ -2,6 +2,7 @@ import { JSX } from "solid-js";
 import { useStepper } from "../hooks/stepper";
 import { Button, ButtonProps } from "../components/Button/Button";
 import { InstallSteps } from "./Install/install";
+import styles from "./Steps.module.css";
 
 interface StepLayoutProps {
   body: JSX.Element;
@@ -9,7 +10,7 @@ interface StepLayoutProps {
 }
 export const StepLayout = (props: StepLayoutProps) => {
   return (
-    <div class="flex size-full grow flex-col justify-between gap-6">
+    <div class={styles.step}>
       {props.body}
       {props.footer}
     </div>
@@ -63,7 +64,7 @@ interface StepFooterProps {
 export const StepFooter = (props: StepFooterProps) => {
   const stepper = useStepper<InstallSteps>();
   return (
-    <div class="flex justify-between py-4">
+    <div class={styles.footer}>
       <BackButton />
       <NextButton type="button" onClick={() => stepper.next()}>
         {props.nextText || undefined}