diff --git a/app/[installer-slug]/page.tsx b/app/[installer-slug]/page.tsx
index 93cd26c..538e1d4 100644
--- a/app/[installer-slug]/page.tsx
+++ b/app/[installer-slug]/page.tsx
@@ -19,26 +19,24 @@ export default async function Installer({ params, searchParams }) {
 
   return (
     <>
-      <header className="grid grid-cols-3 gap-4">
-        <div className="col-span-1 items-center pt-4">
-          <Link className="w-fit" href="/">
+      <header className="flex flex-col gap-4">
+        <div className="flex justify-between pt-4">
+          <Link className="w-fit pt-4" href="/">
             {"< Other installation options"}
           </Link>
-        </div>
-
-        <div className="col-span-1">
           <Link href={installer?.metadata?.homepage_url}>
             <img
-              className="m-auto"
+              className="inline-block"
               src={installer?.metadata?.logo_url}
               alt={installer?.metadata?.name}
             />
           </Link>
         </div>
 
-        <p className="col-span-3 text-4xl text-center leading-relaxed">
-          {app?.description}
-        </p>
+        <div className="text-center">
+          <h1 className="text-2xl font-semibold mb-2">{app.name}</h1>
+          <p>{app?.description}</p>
+        </div>
       </header>
 
       <main className="flex-auto" id="steps">
diff --git a/app/layout.tsx b/app/layout.tsx
index c0d62c5..49a5d06 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -58,7 +58,7 @@ export default async function RootLayout({
       lang="en"
     >
       <body className={`${inter.className} w-full h-dvh`}>
-        <div className="flex flex-col w-full max-w-5xl mx-auto p-6 py-12 gap-12 md:gap-24">
+        <div className="flex flex-col w-full max-w-5xl mx-auto p-6 py-12 gap-6 md:gap-12">
           {children}
           <footer className="flex items-center justify-between">
             <div className="flex gap-2 items-center">
diff --git a/components/AWSInstallerFormFields.tsx b/components/AWSInstallerFormFields.tsx
index 5854ef6..20e9d9f 100644
--- a/components/AWSInstallerFormFields.tsx
+++ b/components/AWSInstallerFormFields.tsx
@@ -26,7 +26,7 @@ export const AWSInstallerFormFields: FC<{
   regions: Array<Object>;
 }> = ({ searchParams = {}, regions }) => {
   return (
-    <fieldset className="p-4">
+    <fieldset className="p-4 w-full">
       <label className="flex flex-col flex-auto gap-2">
         <span className="text-sm font-medium">AWS IAM role ARN</span>
         <input
diff --git a/components/AzureInstallerFormFields.tsx b/components/AzureInstallerFormFields.tsx
index 384237d..721bed0 100644
--- a/components/AzureInstallerFormFields.tsx
+++ b/components/AzureInstallerFormFields.tsx
@@ -26,7 +26,7 @@ export const AzureInstallerFormFields: FC<{
   regions: Array<Object>;
 }> = ({ searchParams = {}, regions }) => {
   return (
-    <fieldset className="p-4">
+    <fieldset className="p-4 w-full">
       <label className="flex flex-col flex-auto gap-2">
         <span className="text-sm font-medium">Location</span>
         <AzureLocationSelect
diff --git a/components/Card.tsx b/components/Card.tsx
index 2aecec7..c225425 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -9,7 +9,7 @@ export default function Card({
 }>) {
   return (
     <div
-      className={`flex flex-col gap-2 rounded bg-card-background dark:bg-white items-start rounded border-card-border border-2 ${className}`}
+      className={`flex flex-col gap-2 rounded bg-card-background dark:bg-white items-start border border-card-border shadow shadow-card-border ${className}`}
     >
       {children}
     </div>
diff --git a/components/InputFields.tsx b/components/InputFields.tsx
index 7407ea7..dd4e39f 100644
--- a/components/InputFields.tsx
+++ b/components/InputFields.tsx
@@ -5,7 +5,7 @@ export const InputFields: FC<{
   searchParams?: Record<string, string>;
 }> = ({ group, inputs, searchParams = {} }) => {
   return (
-    <fieldset key={group.id} name={group.name} className="p-4">
+    <fieldset key={group.id} name={group.name} className="p-4 w-full">
       {group.app_inputs.map((input) => (
         <label className="flex flex-col flex-auto gap-2" key={input?.id}>
           <span className="text-sm font-medium">
diff --git a/components/InstallStatus.tsx b/components/InstallStepper/InstallStatus.tsx
similarity index 87%
rename from components/InstallStatus.tsx
rename to components/InstallStepper/InstallStatus.tsx
index 45d785f..0e131b8 100644
--- a/components/InstallStatus.tsx
+++ b/components/InstallStepper/InstallStatus.tsx
@@ -2,14 +2,14 @@
 
 import React from "react";
 
-import Card from "./Card";
-import StatusIcon from "./StatusIcon";
+import Card from "@/components/Card";
+import StatusIcon from "@/components/StatusIcon";
 
 export const InstallStatus: FC<{ install: Record<string, any> }> = ({
   install,
 }) => {
   let sandboxStatus = "pending";
-  let sandboxStatusDescription = "Sandbox has not deployed yet.";
+  let sandboxStatusDescription = "waiting to provision";
   if (install.install_sandbox_runs && install.install_sandbox_runs.length > 0) {
     const lastRun = install.install_sandbox_runs[0];
     sandboxStatus = lastRun.status;
@@ -18,7 +18,7 @@ export const InstallStatus: FC<{ install: Record<string, any> }> = ({
 
   const components = install.install_components.map((component, idx) => {
     let status = "pending";
-    let status_description = "Component has not deployed yet.";
+    let status_description = "waiting to deploy";
     if (component.install_deploys.length > 0) {
       const lastDeploy = component.install_deploys[0];
       status = lastDeploy.status;
diff --git a/components/InstallStepper.tsx b/components/InstallStepper/index.tsx
similarity index 60%
rename from components/InstallStepper.tsx
rename to components/InstallStepper/index.tsx
index 93bba62..511caf9 100644
--- a/components/InstallStepper.tsx
+++ b/components/InstallStepper/index.tsx
@@ -2,9 +2,11 @@
 
 import React, { useEffect, useRef } from "react";
 import {
+  ThemeProvider,
   Stepper,
   Step,
   Button,
+  IconButton,
   Accordion,
   AccordionHeader,
   AccordionBody,
@@ -17,10 +19,11 @@ import {
   StepOneAWS,
   StepOneAzure,
   Link,
-} from "../components";
+} from "@/components";
 import { InstallStatus } from "./InstallStatus";
-import StatusIcon from "./StatusIcon";
+import StatusIcon from "@/components/StatusIcon";
 import showdown from "showdown";
+import Card from "@/components/Card";
 
 const markdown = new showdown.Converter();
 
@@ -41,15 +44,11 @@ const InstallStepper = ({
   const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
   const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
 
-  const steps = app.input_config.input_groups.map((group, idx) => (
-    <Step onClick={() => setActiveStep(idx + 2)}>{idx + 3}</Step>
-  ));
-
   // track state of install
   const [install, setInstall] = React.useState({
-    id: "",
+    id: searchParams.install_id || "",
     status: "not created",
-    status_description: "No install has been created yet.",
+    status_description: "install has not been created yet",
     install_components: [],
   });
   const [error, setError] = React.useState({
@@ -62,6 +61,8 @@ const InstallStepper = ({
   const formAction = async (event) => {
     event.preventDefault();
 
+    console.log("event: ", event);
+
     const formData = new FormData(event.target);
     let installID = "";
     if (install.id === "") {
@@ -132,14 +133,22 @@ const InstallStepper = ({
   console.log("error: ", error);
 
   const stepContent = app.input_config.input_groups.map((group, idx) => (
-    <Accordion open={activeStep === idx + 2}>
-      <AccordionHeader>{group.display_name}</AccordionHeader>
+    <Accordion key={idx} open={activeStep === idx + 2}>
+      <AccordionHeader onClick={() => setActiveStep(idx + 2)}>
+        {group.display_name}
+      </AccordionHeader>
       <AccordionBody>
-        <InputFields group={group} searchParams={searchParams} />
+        <Card>
+          <InputFields group={group} searchParams={searchParams} />
+        </Card>
       </AccordionBody>
     </Accordion>
   ));
 
+  const steps = app.input_config.input_groups.map((group, idx) => (
+    <Step onClick={() => setActiveStep(idx + 2)}>{idx + 3}</Step>
+  ));
+
   const errorAlert =
     error.error !== "" ? (
       <div className="fixed w-full right-0 bottom-0 left-0 p-4">
@@ -148,73 +157,124 @@ const InstallStepper = ({
     ) : null;
 
   return (
-    <div className="w-full p-4">
+    <div className="relative w-full p-4">
       <Stepper
         activeStep={activeStep}
         isLastStep={(value) => setIsLastStep(value)}
         isFirstStep={(value) => setIsFirstStep(value)}
       >
         <Step onClick={() => setActiveStep(0)}>1</Step>
+
         <Step onClick={() => setActiveStep(1)}>2</Step>
+
         {...steps}
+
         <Step onClick={() => setActiveStep(steps.length + 2)}>
           {steps.length + 3}
         </Step>
       </Stepper>
 
-      <div className="mt-4 flex justify-between">
-        <Button onClick={handlePrev} disabled={isFirstStep}>
-          Prev
-        </Button>
-        <Button onClick={handleNext} disabled={isLastStep}>
-          Next
-        </Button>
+      <div className="absolute -left-8 -right-8 top-1/2 flex justify-between">
+        <IconButton
+          className="rounded-full"
+          onClick={handlePrev}
+          disabled={isFirstStep}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="size-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15.75 19.5 8.25 12l7.5-7.5"
+            />
+          </svg>
+        </IconButton>
+        <IconButton
+          className="rounded-full"
+          onClick={handleNext}
+          disabled={isLastStep}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="size-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m8.25 4.5 7.5 7.5-7.5 7.5"
+            />
+          </svg>
+        </IconButton>
       </div>
 
       <form className="mt-4" onSubmit={formAction}>
         <Accordion open={activeStep === 0}>
-          <AccordionHeader>Company</AccordionHeader>
+          <AccordionHeader onClick={() => setActiveStep(0)}>
+            Company Info
+          </AccordionHeader>
           <AccordionBody>
-            <fieldset className="p-4">
-              <label className="flex flex-col flex-auto gap-2">
-                <span className="text-sm font-medium">Name</span>
-                <input
-                  className="border bg-inherit rounded px-4 py-1.5 shadow-inner"
-                  defaultValue={
-                    Object.hasOwn(searchParams, "name")
-                      ? searchParams?.name
-                      : ""
-                  }
-                  name="name"
-                  type="text"
-                  required
-                />
-              </label>
-            </fieldset>
+            <Card>
+              <fieldset className="p-4 w-full">
+                <label className="flex flex-col flex-auto gap-2">
+                  <span className="text-sm font-medium">Name</span>
+                  <input
+                    className="border bg-inherit rounded px-4 py-1.5 shadow-inner"
+                    defaultValue={
+                      Object.hasOwn(searchParams, "name")
+                        ? searchParams?.name
+                        : ""
+                    }
+                    name="name"
+                    type="text"
+                    required
+                  />
+                </label>
+              </fieldset>
+            </Card>
           </AccordionBody>
         </Accordion>
 
         <Accordion open={activeStep == 1}>
           {app?.cloud_platform === "aws" && (
             <>
-              <AccordionHeader>AWS Account</AccordionHeader>
-              <AccordionBody>
-                <AWSInstallerFormFields
-                  searchParams={searchParams}
-                  regions={regions}
-                />
+              <AccordionHeader onClick={() => setActiveStep(1)}>
+                AWS IAM Role
+              </AccordionHeader>
+              <AccordionBody className="grid grid-cols-2 gap-4">
+                <StepOneAWS app={app} />
+                <Card>
+                  <AWSInstallerFormFields
+                    searchParams={searchParams}
+                    regions={regions}
+                  />
+                </Card>
               </AccordionBody>
             </>
           )}
 
           {app?.cloud_platform === "azure" && (
             <>
-              <AccordionHeader>Azure Account</AccordionHeader>
-              <AccordionBody>
-                <AzureInstallerFormFields
-                  searchParams={searchParams}
-                  regions={regions}
-                />
+              <AccordionHeader onClick={() => setActiveStep(1)}>
+                Azure Account
+              </AccordionHeader>
+              <AccordionBody className="grid grid-cols-2 gap-4">
+                <StepOneAzure />
+                <Card>
+                  <AzureInstallerFormFields
+                    searchParams={searchParams}
+                    regions={regions}
+                  />
+                </Card>
               </AccordionBody>
             </>
           )}
@@ -223,9 +283,12 @@ const InstallStepper = ({
         {...stepContent}
 
         <Accordion open={activeStep === steps.length + 2}>
-          <AccordionHeader>
+          <AccordionHeader onClick={() => setActiveStep(steps.length + 2)}>
             <span>
-              Install Status <StatusIcon status={install.status} />
+              Install Status <StatusIcon status={install.status} />{" "}
+              <span className="text-sm font-medium">
+                {install.status_description}
+              </span>
             </span>
           </AccordionHeader>
           <AccordionBody>
@@ -253,6 +316,7 @@ const InstallStepper = ({
           </AccordionBody>
         </Accordion>
       </form>
+
       {errorAlert}
     </div>
   );
diff --git a/components/StepOneAWS.tsx b/components/StepOneAWS.tsx
index e9fd5c3..c033d7c 100644
--- a/components/StepOneAWS.tsx
+++ b/components/StepOneAWS.tsx
@@ -4,112 +4,107 @@ import Card from "@/components/Card";
 
 export const StepOneAWS: FC<{ app: Record<string, any> }> = ({ app }) => {
   return (
-    <div className="flex flex-col gap-12">
-      <div className="flex flex-col gap-4">
-        <h2 className="text-xl font-semibold">Step 1: create your IAM role</h2>
-        <p className="text-base">
-          In order to connect your AWS account, please create an IAM role with
-          permissions to provision your install. You can create your IAM role
-          however works for your team, using one of the following mechanisms.
-          <br /> <br />
-          This IAM role is only used when first provisioning your install, or
-          when deprovisioning and can be removed after setup. Read more about{" "}
+    <div className="flex flex-col gap-4">
+      <p>
+        In order to connect your AWS account, please create an IAM role with
+        permissions to provision your install. You can create your IAM role
+        however works for your team, using one of the following mechanisms.
+      </p>
+
+      <p>
+        This IAM role is only used when first provisioning your install, or when
+        deprovisioning and can be removed after setup. Read more about{" "}
+        <Link
+          href="https://docs.nuon.co/guides/install-access-permissions"
+          target="_blank"
+          rel="noreferrer"
+        >
+          install access using AWS IAM
+        </Link>{" "}
+        in our documentation.
+      </p>
+
+      <Card className="p-4">
+        <h3 className="text-md font-semibold">
+          Create IAM policies with CloudFormation
+        </h3>
+        <p className="text-sm">
+          You can create a 1-click IAM role with the correct policies attached
+          to provision + deprovision your application using the following link.
+          This will create an IAM role granting access to install{" "}
+          {app?.metadata?.name}. Please use the stack output called{" "}
+          <code className="bg-gray-800 text-orange-400 font-monospaced px-2 py-1 rounded-sm h-[22px] inline-flex text-[11px] tracking-wide">
+            RoleARN
+          </code>{" "}
+          as an input in step 2.
+        </p>
+
+        <Link
+          className="text-sm mt-4"
+          href={`https://us-west-2.console.aws.amazon.com/cloudformation/home#/stacks/quickcreate?templateUrl=${app?.sandbox_config?.artifacts?.cloudformation_stack_template}&stackName=nuon-${app?.sandbox_config?.public_git_vcs_config?.directory}-permissions`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          Create IAM Role
+        </Link>
+      </Card>
+
+      <Card className="p-4">
+        <h3 className="text-md font-semibold">
+          Create IAM policies with Terraform
+        </h3>
+        <p className="text-sm">
+          You can use our sandbox IAM role Terraform module to automatically
+          create an IAM for a sandbox type using Terraform. Please set the IAM
+          role ARN as an output, and use it for step 2.
+        </p>
+
+        <Link
+          className="text-sm mt-4"
+          href="https://github.com/nuonco/sandboxes/tree/main/iam-role"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Terraform Module
+        </Link>
+      </Card>
+
+      <Card className="p-4">
+        <h3 className="text-md font-semibold">Create IAM policies manually</h3>
+        <p className="text-sm">
+          You can use the following policies to manually create an IAM role
+          using the permissions noted below. Please note, the `deprovision`
+          permissions are only needed if you would like to deprovision the
+          install, and can be added later if desired.
+        </p>
+
+        <div className="flex gap-2 mt-4 items-center">
           <Link
-            href="https://docs.nuon.co/guides/install-access-permissions"
+            className="text-sm"
+            href={app?.sandbox_config?.artifacts?.trust_policy}
             target="_blank"
             rel="noreferrer"
           >
-            install access using AWS IAM
-          </Link>{" "}
-          in our documentation.
-        </p>
-      </div>
-
-      <div className="flex flex-col gap-12">
-        <Card>
-          <h3 className="text-md font-semibold">
-            Create IAM policies with CloudFormation
-          </h3>
-          <p className="text-sm">
-            You can create a 1-click IAM role with the correct policies attached
-            to provision + deprovision your application using the following
-            link. This will create an IAM role granting access to install{" "}
-            {app?.metadata?.name}. Please use the stack output called{" "}
-            <code className="bg-gray-800 text-orange-400 font-monospaced px-2 py-1 rounded-sm h-[22px] inline-flex text-[11px] tracking-wide">
-              RoleARN
-            </code>{" "}
-            as an input in step 2.
-          </p>
-
+            Trust policy
+          </Link>
           <Link
-            className="text-sm mt-4"
-            href={`https://console.aws.amazon.com/cloudformation/home#/stacks/quickcreate?templateUrl=${app?.sandbox_config?.artifacts?.cloudformation_stack_template}&stackName=nuon-${app?.sandbox_config?.public_git_vcs_config?.directory}-permissions`}
+            className="text-sm"
+            href={app?.sandbox_config?.artifacts?.provision_policy}
             target="_blank"
             rel="noreferrer"
           >
-            Create IAM Role
+            Provision policy
           </Link>
-        </Card>
-
-        <Card>
-          <h3 className="text-md font-semibold">
-            Create IAM policies with Terraform
-          </h3>
-          <p className="text-sm">
-            You can use our sandbox IAM role Terraform module to automatically
-            create an IAM for a sandbox type using Terraform. Please set the IAM
-            role ARN as an output, and use it for step 2.
-          </p>
-
           <Link
-            className="text-sm mt-4"
-            href="https://github.com/nuonco/sandboxes/tree/main/iam-role"
+            className="text-sm"
+            href={app?.sandbox_config?.artifacts?.deprovision_policy}
             target="_blank"
             rel="noreferrer"
           >
-            Terraform Module
+            Deprovision policy
           </Link>
-        </Card>
-
-        <Card>
-          <h3 className="text-md font-semibold">
-            Create IAM policies manually
-          </h3>
-          <p className="text-sm">
-            You can use the following policies to manually create an IAM role
-            using the permissions noted below. Please note, the `deprovision`
-            permissions are only needed if you would like to deprovision the
-            install, and can be added later if desired.
-          </p>
-
-          <div className="flex gap-2 mt-4 items-center">
-            <Link
-              className="text-sm"
-              href={app?.sandbox_config?.artifacts?.trust_policy}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Trust policy
-            </Link>
-            <Link
-              className="text-sm"
-              href={app?.sandbox_config?.artifacts?.provision_policy}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Provision policy
-            </Link>
-            <Link
-              className="text-sm"
-              href={app?.sandbox_config?.artifacts?.deprovision_policy}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Deprovision policy
-            </Link>
-          </div>
-        </Card>
-      </div>
+        </div>
+      </Card>
     </div>
   );
 };
diff --git a/theme.ts b/theme.ts
index 2e339b5..2118fe3 100644
--- a/theme.ts
+++ b/theme.ts
@@ -9,7 +9,7 @@ export default {
         white: colors.white,
         primary: colors.fuchsia,
         "page-background": colors.white,
-        "card-border": colors.black,
+        "card-border": colors.gray["200"],
         "card-background": colors.white,
         "accordion-header-color": colors.black,
         "accordion-header-background": colors.gray["100"],
diff --git a/theme.ts.example b/theme.ts.example
index 2e339b5..2118fe3 100644
--- a/theme.ts.example
+++ b/theme.ts.example
@@ -9,7 +9,7 @@ export default {
         white: colors.white,
         primary: colors.fuchsia,
         "page-background": colors.white,
-        "card-border": colors.black,
+        "card-border": colors.gray["200"],
         "card-background": colors.white,
         "accordion-header-color": colors.black,
         "accordion-header-background": colors.gray["100"],
