diff --git a/package.json b/package.json
index f15ff73..7dbf00d 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.50.1",
+    "react-scroll": "^1.9.0",
     "server-only": "^0.0.1",
     "sonner": "^1.4.3",
     "superjson": "^2.2.1",
@@ -55,6 +56,7 @@
     "@types/node": "^18.19.15",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@types/react-scroll": "^1.8.10",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed6479d..ae36834 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ dependencies:
   react-hook-form:
     specifier: ^7.50.1
     version: 7.50.1(react@18.2.0)
+  react-scroll:
+    specifier: ^1.9.0
+    version: 1.9.0(react-dom@18.2.0)(react@18.2.0)
   server-only:
     specifier: ^0.0.1
     version: 0.0.1
@@ -118,6 +121,9 @@ devDependencies:
   "@types/react-dom":
     specifier: ^18.2.19
     version: 18.2.19
+  "@types/react-scroll":
+    specifier: ^1.8.10
+    version: 1.8.10
   "@typescript-eslint/eslint-plugin":
     specifier: ^6.21.0
     version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.56.0)(typescript@5.3.3)
@@ -1541,6 +1547,15 @@ packages:
     dependencies:
       "@types/react": 18.2.55
 
+  /@types/react-scroll@1.8.10:
+    resolution:
+      {
+        integrity: sha512-RD4Z7grbdNGOKwKnUBKar6zNxqaW3n8m9QSrfvljW+gmkj1GArb8AFBomVr6xMOgHPD3v1uV3BrIf01py57daQ==,
+      }
+    dependencies:
+      "@types/react": 18.2.55
+    dev: true
+
   /@types/react@18.2.55:
     resolution:
       {
@@ -4775,6 +4790,13 @@ packages:
       }
     dev: true
 
+  /lodash.throttle@4.1.1:
+    resolution:
+      {
+        integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==,
+      }
+    dev: false
+
   /lodash.uniq@4.5.0:
     resolution:
       {
@@ -5803,7 +5825,6 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
-    dev: true
 
   /punycode@2.3.1:
     resolution:
@@ -5857,7 +5878,21 @@ packages:
       {
         integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==,
       }
-    dev: true
+
+  /react-scroll@1.9.0(react-dom@18.2.0)(react@18.2.0):
+    resolution:
+      {
+        integrity: sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==,
+      }
+    peerDependencies:
+      react: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      lodash.throttle: 4.1.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
 
   /react@18.2.0:
     resolution:
diff --git a/public/svg/verified.svg b/public/svg/verified.svg
new file mode 100644
index 0000000..df309e8
--- /dev/null
+++ b/public/svg/verified.svg
@@ -0,0 +1,10 @@
+<svg width="105" height="105" viewBox="0 0 105 105" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="verified">
+<mask id="mask0_746_2493" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="105" height="105">
+<rect id="Bounding box" width="104.396" height="104.396" fill="#436F8E"/>
+</mask>
+<g mask="url(#mask0_746_2493)">
+<path id="verified_2" d="M37.4085 97.8704L29.1438 83.9508L13.4843 80.4709L15.0068 64.3765L4.34961 52.1969L15.0068 40.0173L13.4843 23.9229L29.1438 20.443L37.4085 6.52344L52.198 12.8307L66.9875 6.52344L75.2522 20.443L90.9117 23.9229L89.3893 40.0173L100.046 52.1969L89.3893 64.3765L90.9117 80.4709L75.2522 83.9508L66.9875 97.8704L52.198 91.5631L37.4085 97.8704ZM41.1059 86.7782L52.198 81.9934L63.5076 86.7782L69.5974 76.3386L81.5595 73.5112L80.472 61.3316L88.5193 52.1969L80.472 42.8447L81.5595 30.6651L69.5974 28.0552L63.2901 17.6156L52.198 22.4004L40.8884 17.6156L34.7986 28.0552L22.8365 30.6651L23.924 42.8447L15.8767 52.1969L23.924 61.3316L22.8365 73.7287L34.7986 76.3386L41.1059 86.7782ZM47.6306 67.6389L72.2073 43.0622L66.1175 36.7549L47.6306 55.2418L38.2785 46.1071L32.1887 52.1969L47.6306 67.6389Z" fill="#1D679C"/>
+</g>
+</g>
+</svg>
diff --git a/src/app/(protected)/review/page.tsx b/src/app/(protected)/review/page.tsx
index 8eb355e..7384da5 100644
--- a/src/app/(protected)/review/page.tsx
+++ b/src/app/(protected)/review/page.tsx
@@ -1,4 +1,4 @@
-import { ReviewForm } from "~/components/review-form";
+import { ReviewForm } from "~/components/form/review-form";
 import { getServerSession } from "next-auth";
 import { authOptions } from "~/server/auth";
 import { redirect, notFound } from "next/navigation";
@@ -45,13 +45,15 @@ export default async function Page({
     }
 
     return (
-      <div className="container mx-auto px-4 py-10 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-lg">
-          <ReviewForm
-            company={company}
-            roleId={role.id}
-            profileId={profile.id}
-          />
+      <div className="min-h-screen bg-cooper-blue-200">
+        <div className="mx-auto w-full px-4 py-16">
+          <div className="mx-auto max-w-6xl">
+            <ReviewForm
+              company={company}
+              roleId={role.id}
+              profileId={profile.id}
+            />
+          </div>
         </div>
       </div>
     );
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2e79316..9d5f0d7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import "~/styles/globals.css";
 import { TRPCReactProvider } from "~/trpc/react";
-import { Toaster } from "~/components/ui/sonner";
 import { cn } from "~/lib/utils";
 import { bentonSansFont } from "~/styles/font";
 
@@ -23,7 +22,6 @@ export default function RootLayout({
     >
       <body className={cn("min-h-screen bg-white font-sans antialiased")}>
         <TRPCReactProvider>{children}</TRPCReactProvider>
-        <Toaster />
       </body>
     </html>
   );
diff --git a/src/components/company-details-section.tsx b/src/components/form/company-details-section.tsx
similarity index 72%
rename from src/components/company-details-section.tsx
rename to src/components/form/company-details-section.tsx
index da13251..51d0104 100644
--- a/src/components/company-details-section.tsx
+++ b/src/components/form/company-details-section.tsx
@@ -1,5 +1,6 @@
+import { useState } from "react";
 import { useFormContext } from "react-hook-form";
-import { FormSection } from "~/components/form-section";
+import { FormSection } from "~/components/form/form-section";
 import {
   FormControl,
   FormField,
@@ -8,10 +9,10 @@ import {
   FormMessage,
 } from "~/components/ui/form";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
-import { Input } from "~/components/ui/input";
 import { Checkbox } from "~/components/ui/checkbox";
 
-import { benefits } from "~/components/review-form";
+import { benefits } from "~/components/form/review-form";
+import { Textarea } from "~/components/ui/textarea";
 
 type CompanyDetailsSectionProps = {
   companyName: string;
@@ -23,22 +24,23 @@ type CompanyDetailsSectionProps = {
  */
 export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
   const form = useFormContext();
+  const [otherBenefits, setOtherBenefits] = useState(false);
 
   return (
-    <FormSection title="4. Company Details">
+    <FormSection title="Company Details" className="text-cooper-red-500">
       <FormField
         control={form.control}
         name="workEnvironment"
         render={({ field }) => (
-          <FormItem className="space-y-3">
+          <FormItem className="space-y-6">
             <FormLabel>What kind of work model?*</FormLabel>
             <FormControl>
               <RadioGroup
                 onValueChange={field.onChange}
                 defaultValue={field.value}
-                className="flex flex-col space-y-1"
+                className="flex flex-col space-y-3"
               >
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="INPERSON"
@@ -47,7 +49,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
                   </FormControl>
                   <FormLabel>In-person</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="HYBRID"
@@ -56,7 +58,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
                   </FormControl>
                   <FormLabel>Hybrid</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="REMOTE"
@@ -75,15 +77,15 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
         control={form.control}
         name="drugTest"
         render={({ field }) => (
-          <FormItem className="space-y-3">
+          <FormItem className="space-y-6">
             <FormLabel>Did {props.companyName} drug test?*</FormLabel>
             <FormControl>
               <RadioGroup
                 onValueChange={field.onChange}
                 defaultValue={field.value}
-                className="flex flex-col space-y-1"
+                className="flex flex-col space-y-3"
               >
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="true"
@@ -92,7 +94,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
                   </FormControl>
                   <FormLabel>Yes</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="false"
@@ -111,15 +113,15 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
         control={form.control}
         name="overtimeNormal"
         render={({ field }) => (
-          <FormItem className="space-y-3">
+          <FormItem className="space-y-6">
             <FormLabel>Was working overtime common?*</FormLabel>
             <FormControl>
               <RadioGroup
                 onValueChange={field.onChange}
                 defaultValue={field.value}
-                className="flex flex-col space-y-1"
+                className="flex flex-col space-y-3"
               >
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="true"
@@ -128,7 +130,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
                   </FormControl>
                   <FormLabel>Yes</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="false"
@@ -152,7 +154,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
           control={form.control}
           name={benefit.field}
           render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+            <FormItem className="flex flex-row items-start space-x-4 space-y-0">
               <FormControl>
                 <Checkbox
                   checked={field.value}
@@ -164,23 +166,31 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
           )}
         />
       ))}
-      <FormField
-        control={form.control}
-        name="otherBenefits"
-        render={({ field }) => (
-          <FormItem className="flex flex-row items-start space-x-2 space-y-0">
-            <Checkbox checked={!!field.value} className="pointer-events-none" />
-            <FormControl>
-              <Input
-                {...field}
-                placeholder="Other..."
-                className="highlight h-4 border-none bg-white pl-1 font-medium focus:ring-0"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+      <FormItem className="flex flex-row items-start space-x-4 space-y-0">
+        <Checkbox
+          checked={otherBenefits}
+          onCheckedChange={(c) => setOtherBenefits(!!c)}
+        />
+        <FormLabel>Other</FormLabel>
+        <FormMessage />
+      </FormItem>
+      {otherBenefits && (
+        <FormField
+          control={form.control}
+          name="otherBenefits"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder="Please type the other benefits here."
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      )}
     </FormSection>
   );
 }
diff --git a/src/components/coop-cycle-section.tsx b/src/components/form/coop-cycle-section.tsx
similarity index 80%
rename from src/components/coop-cycle-section.tsx
rename to src/components/form/coop-cycle-section.tsx
index 2ebbddd..52e7516 100644
--- a/src/components/coop-cycle-section.tsx
+++ b/src/components/form/coop-cycle-section.tsx
@@ -1,5 +1,5 @@
 import { useFormContext } from "react-hook-form";
-import { FormSection } from "~/components/form-section";
+import { FormSection } from "~/components/form/form-section";
 import { TriangleDownIcon } from "@radix-ui/react-icons";
 import {
   FormControl,
@@ -10,7 +10,6 @@ import {
 } from "~/components/ui/form";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
 import { cn } from "~/lib/utils";
-import { buttonVariants } from "~/components/ui/button";
 import dayjs from "dayjs";
 
 /**
@@ -27,20 +26,20 @@ export function CoopCycleSection() {
   );
 
   return (
-    <FormSection title="1. Co-op Cycle">
+    <FormSection title="Co-op Cycle" className="text-cooper-pink-500">
       <FormField
         control={form.control}
         name="workTerm"
         render={({ field }) => (
-          <FormItem className="space-y-3">
+          <FormItem className="space-y-6">
             <FormLabel>Co-op Cycle*</FormLabel>
             <FormControl>
               <RadioGroup
                 onValueChange={field.onChange}
                 defaultValue={field.value}
-                className="flex flex-col space-y-1"
+                className="flex flex-col space-y-3"
               >
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="SPRING"
@@ -49,7 +48,7 @@ export function CoopCycleSection() {
                   </FormControl>
                   <FormLabel>Spring</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center  space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="FALL"
@@ -58,7 +57,7 @@ export function CoopCycleSection() {
                   </FormControl>
                   <FormLabel>Fall</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="SUMMER"
@@ -83,8 +82,7 @@ export function CoopCycleSection() {
               <FormControl>
                 <select
                   className={cn(
-                    buttonVariants({ variant: "outline" }),
-                    "w-full appearance-none pr-8",
+                    "w-full appearance-none rounded-md border-2 border-cooper-blue-600 bg-transparent px-6 py-3 pr-8 text-2xl font-semibold text-cooper-blue-600",
                   )}
                   {...field}
                 >
@@ -96,7 +94,7 @@ export function CoopCycleSection() {
                   ))}
                 </select>
               </FormControl>
-              <TriangleDownIcon className="absolute right-2.5 top-2.5 h-5 w-5" />
+              <TriangleDownIcon className="absolute right-5 top-5 h-6 w-6 text-cooper-blue-600" />
             </div>
             <FormMessage />
           </FormItem>
diff --git a/src/components/form-card.tsx b/src/components/form/form-card.tsx
similarity index 74%
rename from src/components/form-card.tsx
rename to src/components/form/form-card.tsx
index 605223f..9b22dde 100644
--- a/src/components/form-card.tsx
+++ b/src/components/form/form-card.tsx
@@ -3,7 +3,7 @@
  */
 export function FormCard({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col space-y-4 rounded-xl bg-white p-8">
+    <div className="flex flex-col space-y-12 rounded-xl bg-white">
       {children}
     </div>
   );
diff --git a/src/components/form-section.tsx b/src/components/form/form-section.tsx
similarity index 57%
rename from src/components/form-section.tsx
rename to src/components/form/form-section.tsx
index bfd281d..686d9ff 100644
--- a/src/components/form-section.tsx
+++ b/src/components/form/form-section.tsx
@@ -1,18 +1,21 @@
-import { FormCard } from "~/components/form-card";
+import { FormCard } from "~/components/form/form-card";
+import { cn } from "~/lib/utils";
 
 /**
  * FormSection component creates a section within a FormCard with a specified title.
  */
 export function FormSection({
   title,
+  className,
   children,
 }: {
   title: string;
+  className: string;
   children: React.ReactNode;
 }) {
   return (
     <FormCard>
-      <h2 className="text-2xl font-semibold">{title}</h2>
+      <h2 className={cn("text-5xl font-bold", className)}>{title}</h2>
       {children}
     </FormCard>
   );
diff --git a/src/components/ratings-section.tsx b/src/components/form/ratings-section.tsx
similarity index 85%
rename from src/components/ratings-section.tsx
rename to src/components/form/ratings-section.tsx
index b08519a..28092c0 100644
--- a/src/components/ratings-section.tsx
+++ b/src/components/form/ratings-section.tsx
@@ -1,4 +1,4 @@
-import { FormSection } from "~/components/form-section";
+import { FormSection } from "~/components/form/form-section";
 import { useFormContext } from "react-hook-form";
 import {
   FormControl,
@@ -20,7 +20,7 @@ export function RatingsSection() {
   const form = useFormContext();
 
   return (
-    <FormSection title="2. Ratings">
+    <FormSection title="Ratings" className="text-cooper-green-500">
       <FormField
         control={form.control}
         name="overallRating"
@@ -83,39 +83,39 @@ export function RatingsSection() {
         control={form.control}
         name="interviewDifficulty"
         render={({ field }) => (
-          <FormItem className="space-y-2">
+          <FormItem className="space-y-8">
             <FormLabel>Interview Difficulty*</FormLabel>
             <FormControl>
               <RadioGroup
                 onValueChange={field.onChange}
                 defaultValue={field.value}
-                className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0"
+                className="flex w-full flex-col justify-between space-y-3 text-center sm:flex-row sm:space-y-0"
               >
-                <FormItem className="flex items-center space-x-2 space-y-0">
+                <FormItem className="flex flex-col items-center space-x-2 space-y-2">
                   <FormControl>
                     <RadioGroupItem value="1" checked={field.value === "1"} />
                   </FormControl>
                   <FormLabel>Very easy</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-2 space-y-0">
+                <FormItem className="flex flex-col items-center space-x-2 space-y-2">
                   <FormControl>
                     <RadioGroupItem value="2" checked={field.value === "2"} />
                   </FormControl>
                   <FormLabel>Easy</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-2 space-y-0">
+                <FormItem className="flex flex-col items-center space-x-2 space-y-2">
                   <FormControl>
                     <RadioGroupItem value="3" checked={field.value === "3"} />
                   </FormControl>
                   <FormLabel>Neither easy nor difficult</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-2 space-y-0">
+                <FormItem className="flex flex-col items-center space-x-2 space-y-2">
                   <FormControl>
                     <RadioGroupItem value="4" checked={field.value === "4"} />
                   </FormControl>
                   <FormLabel>Difficult</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-2 space-y-0">
+                <FormItem className="flex flex-col items-center space-x-2 space-y-2">
                   <FormControl>
                     <RadioGroupItem value="5" checked={field.value === "5"} />
                   </FormControl>
diff --git a/src/components/review-form.tsx b/src/components/form/review-form.tsx
similarity index 83%
rename from src/components/review-form.tsx
rename to src/components/form/review-form.tsx
index e1d0a57..20daf99 100644
--- a/src/components/review-form.tsx
+++ b/src/components/form/review-form.tsx
@@ -6,14 +6,16 @@ import { z } from "zod";
 import dayjs from "dayjs";
 import { Button } from "~/components/ui/button";
 import { Form } from "~/components/ui/form";
-import { toast } from "sonner";
-import { ReviewSection } from "~/components/review-section";
-import { CoopCycleSection } from "~/components/coop-cycle-section";
-import { CompanyDetailsSection } from "~/components/company-details-section";
-import { RatingsSection } from "~/components/ratings-section";
+import { ReviewSection } from "~/components/form/review-section";
+import { CoopCycleSection } from "~/components/form/coop-cycle-section";
+import { CompanyDetailsSection } from "~/components/form/company-details-section";
+import { RatingsSection } from "~/components/form/ratings-section";
+import { SubmissionConfirmation } from "~/components/form/submission-confirmation";
 import { useState } from "react";
 import { Company, WorkEnvironment, WorkTerm } from "@prisma/client";
 import { api } from "~/trpc/react";
+import { cn } from "~/lib/utils";
+import { animateScroll as scroll } from "react-scroll";
 
 const formSchema = z.object({
   workTerm: z.nativeEnum(WorkTerm, {
@@ -117,9 +119,10 @@ export const benefits = [
   { field: "freeMerch", label: "Free merchandise" },
 ];
 
-const steps = [
+const steps: { fields: string[]; color: string }[] = [
   {
     fields: ["workTerm", "workYear"],
+    color: "border-cooper-pink-500",
   },
   {
     fields: [
@@ -130,9 +133,11 @@ const steps = [
       "interviewDifficulty",
       "interviewReview",
     ],
+    color: "border-cooper-green-500",
   },
   {
     fields: ["reviewHeadline", "textReview", "location", "hourlyPay"],
+    color: "border-cooper-yellow-500",
   },
   {
     fields: [
@@ -146,6 +151,7 @@ const steps = [
       "freeMerch",
       "otherBenefits",
     ],
+    color: "border-cooper-red-500",
   },
 ];
 
@@ -187,7 +193,7 @@ export function ReviewForm(props: ReviewFormProps) {
     },
   });
 
-  const [currentStep, setCurrentStep] = useState(0);
+  const [currentStep, setCurrentStep] = useState<number>(0);
 
   type FieldName = keyof z.infer<typeof formSchema>;
 
@@ -207,6 +213,7 @@ export function ReviewForm(props: ReviewFormProps) {
         await form.handleSubmit(onSubmit)();
       }
       setCurrentStep((step) => step + 1);
+      scroll.scrollToTop({ duration: 250, smooth: true });
     }
   };
 
@@ -215,6 +222,7 @@ export function ReviewForm(props: ReviewFormProps) {
     if (currentStep > 0) {
       setCurrentStep((prev) => prev - 1);
     }
+    scroll.scrollToTop({ duration: 250, smooth: true });
   };
 
   const mutation = api.review.create.useMutation();
@@ -227,13 +235,18 @@ export function ReviewForm(props: ReviewFormProps) {
     });
   }
 
-  function onReset() {
-    form.reset();
+  if (currentStep === steps.length) {
+    return <SubmissionConfirmation />;
   }
 
   return (
     <Form {...form}>
-      <form className="space-y-6">
+      <form
+        className={cn(
+          "space-y-12 rounded-2xl border-t-[16px] bg-white px-32 py-16",
+          steps[currentStep]?.color,
+        )}
+      >
         {currentStep == 0 && <CoopCycleSection />}
         {currentStep == 1 && <RatingsSection />}
         {currentStep == 2 && <ReviewSection />}
@@ -241,25 +254,20 @@ export function ReviewForm(props: ReviewFormProps) {
           <CompanyDetailsSection companyName={props.company.name} />
         )}
         {currentStep >= 0 && currentStep <= steps.length - 1 && (
-          <div className="flex justify-between">
+          <div className="flex justify-end space-x-4">
             <Button
-              variant="secondary"
+              variant="outline"
               onClick={prev}
               disabled={currentStep === 0}
             >
               Previous
             </Button>
             <Button onClick={next}>
-              {currentStep == steps.length - 1 ? "Submit" : "Next"}
+              {currentStep == steps.length - 1 ? "Submit" : "Save and continue"}
             </Button>
           </div>
         )}
       </form>
-      {currentStep == steps.length && (
-        <h1 className="text-center text-3xl font-semibold">
-          Thank you for submitting your review!
-        </h1>
-      )}
     </Form>
   );
 }
diff --git a/src/components/review-section.tsx b/src/components/form/review-section.tsx
similarity index 93%
rename from src/components/review-section.tsx
rename to src/components/form/review-section.tsx
index eaa5c2b..e6e5a1e 100644
--- a/src/components/review-section.tsx
+++ b/src/components/form/review-section.tsx
@@ -7,7 +7,7 @@ import {
 } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
 import { Textarea } from "~/components/ui/textarea";
-import { FormSection } from "~/components/form-section";
+import { FormSection } from "~/components/form/form-section";
 import { useFormContext } from "react-hook-form";
 
 /**
@@ -17,7 +17,7 @@ export function ReviewSection() {
   const form = useFormContext();
 
   return (
-    <FormSection title="3. Review">
+    <FormSection title="Review" className="text-cooper-yellow-500">
       <FormField
         control={form.control}
         name="reviewHeadline"
diff --git a/src/components/form/submission-confirmation.tsx b/src/components/form/submission-confirmation.tsx
new file mode 100644
index 0000000..d5128a4
--- /dev/null
+++ b/src/components/form/submission-confirmation.tsx
@@ -0,0 +1,35 @@
+import { Button } from "../ui/button";
+import Image from "next/image";
+import Link from "next/link";
+
+export function SubmissionConfirmation() {
+  return (
+    <div className="flex flex-col border-2">
+      <div className="z-10 -mb-4 h-4 w-full rounded-t-xl bg-gradient-to-r from-rose-400 via-yellow-400 to-blue-600" />
+      <div className="flex h-[80vh] w-full flex-col items-center justify-center space-y-6 rounded-xl bg-white px-8 py-32 text-cooper-blue-600">
+        <Image
+          src="./svg/verified.svg"
+          width={125}
+          height={125}
+          alt="Verified"
+        />
+        <div className="text-5xl font-bold">
+          Your review has been submitted!
+        </div>
+        <div className="max-w-3xl text-center text-2xl">
+          Thank you for taking the time to submit a co-op review! Your feedback
+          is highly appreciated.
+        </div>
+        <div className="flex justify-between space-x-8">
+          <Link href="/">
+            <Button>Return to home </Button>
+          </Link>
+          <Button variant="outline">
+            {/* Redirect to the correct page to submit another review (for a different company perhaps) */}
+            <Link href="/">Submit another review</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 32f70f5..e02939e 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -56,7 +56,9 @@ export default async function Header() {
           outerWidth,
         )}
       >
-        <Button className="bg-cooper-yellow-500">+ Write A Review</Button>
+        <Button className="text-md bg-cooper-yellow-500 px-5 py-4 hover:bg-gray-900">
+          + Write A Review
+        </Button>
         {session ? <LogoutButton /> : <LoginButton />}
       </div>
     </header>
diff --git a/src/components/logout-button.tsx b/src/components/logout-button.tsx
index 2b7a6f0..5e0e01c 100644
--- a/src/components/logout-button.tsx
+++ b/src/components/logout-button.tsx
@@ -10,7 +10,7 @@ export default function LogoutButton() {
         signOut({ callbackUrl: "/" });
       }}
       type="button"
-      className="rounded-lg bg-cooper-blue-400 px-5 py-2.5 text-sm font-medium text-white hover:bg-cooper-blue-200 hover:text-cooper-blue-600 focus:outline-none focus:ring-4 focus:ring-white"
+      className="rounded-lg bg-cooper-blue-400 px-5 py-2.5 text-sm font-semibold text-white hover:bg-cooper-blue-200 hover:text-cooper-blue-600 focus:outline-none focus:ring-4 focus:ring-white"
     >
       Sign Out
     </Button>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 6ead79f..1f7b605 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,22 +5,23 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "~/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-full text-lg font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary border-2 border-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border-2 border-slate-800 bg-transparent text-black hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "h-10 p-6 rounded-full",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 5237bd3..0df59fe 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-6 w-6 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className,
     )}
     {...props}
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <Check className="h-6 w-6" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 249fc6a..958f5c6 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -93,7 +93,11 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(
+        "text-2xl font-semibold text-cooper-blue-700",
+        error && "text-destructive",
+        className,
+      )}
       htmlFor={formItemId}
       {...props}
     />
@@ -134,7 +138,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-xl text-muted-foreground", className)}
       {...props}
     />
   );
@@ -156,7 +160,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn("text-xl font-semibold text-destructive", className)}
       {...props}
     >
       {body}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 8ac4ede..ef5d151 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-16 w-full rounded-md border-[3px] border-cooper-blue-600 bg-white px-3 py-2 text-xl font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index f4115c6..fbcf2de 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -28,13 +28,14 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-6 w-6 rounded-full border-2  text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        props.checked ? "border-cooper-blue-600" : "border-cooper-blue-400/35",
         className,
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        <Circle className="h-3.5 w-3.5 fill-cooper-blue-600 text-cooper-blue-600" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
diff --git a/src/components/ui/rating.tsx b/src/components/ui/rating.tsx
index 1d1999f..f70fa1e 100644
--- a/src/components/ui/rating.tsx
+++ b/src/components/ui/rating.tsx
@@ -1,5 +1,6 @@
 import { FieldPath, useFormContext } from "react-hook-form";
-import { ReviewFormType } from "~/components/review-form";
+// Probably fix this import at some point (form context)
+import { ReviewFormType } from "~/components/form/review-form";
 import { forwardRef, useState } from "react";
 import { cn } from "~/lib/utils";
 
@@ -26,13 +27,13 @@ export const Rating = forwardRef<HTMLInputElement, RatingProps>(
               key={i}
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              strokeWidth={0.75}
-              stroke="currentColor"
+              strokeWidth={0}
+              stroke="white"
               className={cn(
-                "size-14",
+                "size-20",
                 i < hoveredIndex || i < +getValues(name)
-                  ? "fill-[#B9B9B9]"
-                  : "fill-primary-foreground",
+                  ? "fill-cooper-yellow-500"
+                  : "fill-cooper-gray-100",
                 "pr-2 hover:cursor-pointer",
               )}
               onMouseEnter={() => setHoveredIndex(i + 1)}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
deleted file mode 100644
index 549cf84..0000000
--- a/src/components/ui/sonner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 26f564d..8a20dd4 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[200px] w-full rounded-md border-[3px] border-cooper-blue-600 bg-white px-3 py-2 text-xl font-normal ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5e56efd..10412c4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 0 0% 90%;
+    --background: 212 65% 92%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
@@ -13,7 +13,7 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 205 69% 36%;
     --primary-foreground: 210 40% 98%;
 
     --secondary: 210 40% 96.1%;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 50edba4..35bcff4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -23,10 +23,15 @@ const config = {
         sans: ["var(--font-sans)", ...fontFamily.sans],
       },
       colors: {
+        "cooper-gray-100": "#DDE8F0",
+        "cooper-blue-700": "#1D679C",
         "cooper-blue-600": "#436F8E",
         "cooper-blue-400": "#5E8BAB",
         "cooper-blue-200": "#DEEAF8",
         "cooper-yellow-500": "#FFA400",
+        "cooper-pink-500": "#EA8FBA",
+        "cooper-green-500": "#619518",
+        "cooper-red-500": "#F05833",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",