From 1d6aae49f49b83b6cb52eb81b45ad67bf850e850 Mon Sep 17 00:00:00 2001
From: yu-zhen <wlphg010688@gmail.com>
Date: Tue, 2 Jul 2024 03:03:50 +0900
Subject: [PATCH] feat: integrate application page styling

---
 public/circle-check-blue-filled.svg           |   3 +
 src/components/EligibilityDialog.tsx          |  27 +-
 src/components/StatusBar.tsx                  |  31 ++
 src/components/ui/Badge.tsx                   |   5 +-
 src/components/ui/Form.tsx                    |  35 +-
 src/components/ui/Input.tsx                   |   1 +
 .../components/AdminButtonsBar.tsx            |  36 ++
 .../components/ApplicationButtons.tsx         | 136 ++++++++
 .../components/ApplicationForm.tsx            | 316 ++++++++----------
 .../components/ApplicationSteps.tsx           |  49 +++
 .../components/ApplicationsToApprove.tsx      | 155 +++++----
 .../applications/components/ImpactTags.tsx    |  53 +++
 .../applications/components/LinkField.tsx     |  89 +++++
 .../components/ReviewApplicationDetails.tsx   | 133 ++++++++
 .../applications/components/ReviewBar.tsx     |  45 +++
 .../hooks/useApplicationByTxHash.ts           |   8 +
 .../hooks/useCreateApplication.ts             |  24 +-
 src/features/applications/types/index.ts      |  14 +-
 src/features/filter/types/index.ts            |   1 +
 .../projects/components/ProjectAvatar.tsx     |   9 +-
 .../projects/components/ProjectBanner.tsx     |  11 +-
 .../projects/components/ProjectDetails.tsx    |  24 +-
 .../projects/components/ProjectItem.tsx       |  17 +-
 src/features/projects/components/Projects.tsx |  17 +-
 src/features/projects/hooks/useProjects.ts    |  14 +-
 src/features/voters/components/VotersList.tsx |  10 +-
 src/layouts/BaseLayout.tsx                    |   2 +-
 src/pages/applications/[projectId]/index.tsx  |  25 --
 src/pages/applications/confirmation.tsx       |  51 +++
 src/pages/applications/new.tsx                |  44 ++-
 src/pages/projects/[projectId]/Project.tsx    |  18 +-
 src/pages/signup/index.tsx                    |  15 +-
 src/server/api/routers/projects.ts            |  47 ++-
 src/utils/fetchAttestations.ts                |   4 +-
 34 files changed, 1078 insertions(+), 391 deletions(-)
 create mode 100644 public/circle-check-blue-filled.svg
 create mode 100644 src/components/StatusBar.tsx
 create mode 100644 src/features/applications/components/AdminButtonsBar.tsx
 create mode 100644 src/features/applications/components/ApplicationButtons.tsx
 create mode 100644 src/features/applications/components/ApplicationSteps.tsx
 create mode 100644 src/features/applications/components/ImpactTags.tsx
 create mode 100644 src/features/applications/components/LinkField.tsx
 create mode 100644 src/features/applications/components/ReviewApplicationDetails.tsx
 create mode 100644 src/features/applications/components/ReviewBar.tsx
 create mode 100644 src/features/applications/hooks/useApplicationByTxHash.ts
 delete mode 100644 src/pages/applications/[projectId]/index.tsx
 create mode 100644 src/pages/applications/confirmation.tsx

diff --git a/public/circle-check-blue-filled.svg b/public/circle-check-blue-filled.svg
new file mode 100644
index 00000000..a3f650a7
--- /dev/null
+++ b/public/circle-check-blue-filled.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.83374 11.0002C1.83374 5.93755 5.9378 1.8335 11.0004 1.8335C16.063 1.8335 20.1671 5.93755 20.1671 11.0002C20.1671 16.0628 16.063 20.1668 11.0004 20.1668C5.9378 20.1668 1.83374 16.0628 1.83374 11.0002ZM14.3986 8.51829C14.0406 8.16031 13.4602 8.16031 13.1022 8.51829L10.0837 11.5361L8.89859 10.3516L8.81223 10.2754C8.45263 9.99576 7.93267 10.0212 7.60223 10.3516C7.24425 10.7096 7.24425 11.29 7.60223 11.648L9.43556 13.4813L9.52192 13.5576C9.88152 13.8372 10.4015 13.8118 10.7319 13.4813L14.3986 9.81465L14.4748 9.7283C14.7545 9.3687 14.729 8.84873 14.3986 8.51829Z" fill="#579BEA"/>
+</svg>
diff --git a/src/components/EligibilityDialog.tsx b/src/components/EligibilityDialog.tsx
index 8776f85b..df26fcb5 100644
--- a/src/components/EligibilityDialog.tsx
+++ b/src/components/EligibilityDialog.tsx
@@ -4,6 +4,8 @@ import { toast } from "sonner";
 import { useAccount, useDisconnect } from "wagmi";
 
 import { useMaci } from "~/contexts/Maci";
+import { useAppState } from "~/utils/state";
+import { EAppState } from "~/utils/types";
 
 import { Dialog } from "./ui/Dialog";
 
@@ -15,6 +17,8 @@ export const EligibilityDialog = (): JSX.Element | null => {
   const { onSignup, isEligibleToVote, isRegistered } = useMaci();
   const router = useRouter();
 
+  const appState = useAppState();
+
   const onError = useCallback(() => toast.error("Signup error"), []);
 
   const handleSignup = useCallback(async () => {
@@ -38,9 +42,13 @@ export const EligibilityDialog = (): JSX.Element | null => {
     router.push("/projects");
   }, [router]);
 
+  const handleGoToCreateApp = useCallback(() => {
+    router.push("/applications/new");
+  }, [router]);
+
   return (
     <div>
-      {isRegistered && (
+      {isRegistered && appState === EAppState.VOTING && (
         <Dialog
           button="secondary"
           buttonAction={handleGoToProjects}
@@ -64,6 +72,23 @@ export const EligibilityDialog = (): JSX.Element | null => {
         />
       )}
 
+      {isRegistered && appState === EAppState.APPLICATION && (
+        <Dialog
+          button="secondary"
+          buttonAction={handleGoToCreateApp}
+          buttonName="Create Application"
+          description={
+            <div className="flex flex-col gap-4">
+              <p>Start creating your own application now!</p>
+            </div>
+          }
+          isOpen={openDialog}
+          size="sm"
+          title="You're all set to apply"
+          onOpenChange={handleCloseDialog}
+        />
+      )}
+
       {!isRegistered && isEligibleToVote && (
         <Dialog
           button="secondary"
diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
new file mode 100644
index 00000000..8fb9c620
--- /dev/null
+++ b/src/components/StatusBar.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { tv } from "tailwind-variants";
+
+import { createComponent } from "~/components/ui";
+
+const StatusBarContainer = createComponent(
+  "div",
+  tv({
+    base: "flex rounded-md border p-4 justify-center mb-4",
+    variants: {
+      status: {
+        default: "text-blue-600 border-blue-600 bg-blue-400",
+        pending: "text-[#4E1D0D] border-[#4E1D0D] bg-[#FFEDD5]",
+        approved: "text-[#14532D] border-[#14532D] bg-[#BBF7D0]",
+        declined: "text-[#F87171] border-[#F87171] bg-[#FEE2E2]",
+      },
+    },
+    defaultVariants: {
+      status: "default",
+    },
+  }),
+);
+
+interface IStatusBarProps {
+  status: string;
+  content: ReactNode;
+}
+
+export const StatusBar = ({ status, content }: IStatusBarProps): JSX.Element => (
+  <StatusBarContainer status={status}>{content}</StatusBarContainer>
+);
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
index eb09e883..45352f1d 100644
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -5,11 +5,12 @@ import { createComponent } from ".";
 export const Badge = createComponent(
   "div",
   tv({
-    base: "inline-flex items-center rounded font-semibold text-gray-500 text-sm",
+    base: "inline-flex items-center rounded font-semibold text-sm p-2",
     variants: {
       variant: {
         default: "bg-gray-100 dark:bg-gray-800",
-        success: "dark:bg-green-300 dark:text-green-900",
+        success: "bg-[#BBF7D0] text-[#14532D]",
+        pending: "bg-[#FFEDD5] text-[#4E1D0D]",
       },
       size: {
         md: "px-1 ",
diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
index dfd410f0..c5e010cd 100644
--- a/src/components/ui/Form.tsx
+++ b/src/components/ui/Form.tsx
@@ -43,7 +43,7 @@ export const Select = createComponent(
 export const Checkbox = createComponent(
   "input",
   tv({
-    base: [...inputBase, "checked:focus:dark:bg-gray-700 checked:hover:dark:bg-gray-700"],
+    base: [...inputBase, "rounded-none checked:focus:dark:bg-gray-700 checked:hover:dark:bg-gray-700"],
   }),
 );
 
@@ -51,7 +51,12 @@ export const Label = createComponent(
   "label",
   tv({
     base: "block tracking-wider dark:text-gray-300 font-semibold",
-    variants: { required: { true: "after:content-['*']" } },
+    variants: {
+      required: {
+        true: "after:content-['*'] after:text-blue-400",
+        false: "after:content-['(optional)'] after:text-gray-300 after:text-sm after:font-semibold after:ml-1",
+      },
+    },
   }),
 );
 
@@ -98,7 +103,7 @@ export const FormControl = ({
   const error = index && errors[index];
 
   return (
-    <fieldset className={cn("mb-4", className)}>
+    <fieldset className={cn(className)}>
       {label && (
         <Label className="mb-1" htmlFor={name} required={required}>
           {label}
@@ -119,9 +124,13 @@ export const FormControl = ({
 };
 
 export const FieldArray = <S extends z.Schema>({
+  title,
+  description,
   name,
   renderField,
 }: {
+  title: string;
+  description: string;
   name: string;
   renderField: (field: z.infer<S>, index: number) => ReactNode;
 }): JSX.Element => {
@@ -135,6 +144,14 @@ export const FieldArray = <S extends z.Schema>({
 
   return (
     <div className="mb-8">
+      <p>
+        {title}
+
+        <span className="text-blue-400">*</span>
+      </p>
+
+      <p className="mb-2 text-gray-300">{description}</p>
+
       {error && <div className="border-red-900 dark:text-red-500 border p-2">{String(error)}</div>}
 
       {fields.map((field, i) => (
@@ -155,11 +172,12 @@ export const FieldArray = <S extends z.Schema>({
         </div>
       ))}
 
-      <div className="flex justify-end">
+      <div className="flex justify-start">
         <IconButton
           icon={PlusIcon}
           size="sm"
           type="button"
+          variant="outline"
           onClick={() => {
             append({});
           }}
@@ -167,6 +185,8 @@ export const FieldArray = <S extends z.Schema>({
           Add row
         </IconButton>
       </div>
+
+      <div className="mt-4 h-[1px] w-full bg-gray-100" />
     </div>
   );
 };
@@ -175,11 +195,12 @@ export const FormSection = ({
   title,
   description,
   children,
+  ...props
 }: { title: string; description: string } & ComponentProps<"section">): JSX.Element => (
-  <section className="mb-8">
-    <h3 className="mb-1 text-xl font-semibold">{title}</h3>
+  <section className="mb-8" {...props}>
+    <h3 className="mb-1 font-sans text-xl font-semibold">{title}</h3>
 
-    <p className="mb-4 leading-loose text-gray-600 dark:text-gray-400">{description}</p>
+    <p className="mb-4 leading-loose text-gray-400">{description}</p>
 
     {children}
   </section>
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index 6eacaf11..788f240a 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -12,6 +12,7 @@ export const inputBase = [
   "border-gray-200",
   "rounded-lg",
   "border",
+  "placeholder:text-gray-300",
 ];
 
 export const Input = createComponent(
diff --git a/src/features/applications/components/AdminButtonsBar.tsx b/src/features/applications/components/AdminButtonsBar.tsx
new file mode 100644
index 00000000..b6eb0c3f
--- /dev/null
+++ b/src/features/applications/components/AdminButtonsBar.tsx
@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+
+import { Button } from "~/components/ui/Button";
+import { useIsAdmin } from "~/hooks/useIsAdmin";
+import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
+
+import { useApproveApplication } from "../hooks/useApproveApplication";
+
+interface IAdminButtonsBarProps {
+  projectId: string;
+}
+
+export const AdminButtonsBar = ({ projectId }: IAdminButtonsBarProps): JSX.Element => {
+  const isAdmin = useIsAdmin();
+  const { isCorrectNetwork, correctNetwork } = useIsCorrectNetwork();
+
+  const approve = useApproveApplication({});
+
+  const onClick = useCallback(() => {
+    approve.mutate([projectId]);
+  }, [approve, projectId]);
+
+  return (
+    <div className="my-3 flex justify-end gap-2">
+      <Button
+        suppressHydrationWarning
+        disabled={!isAdmin || !isCorrectNetwork}
+        size="auto"
+        variant="primary"
+        onClick={onClick}
+      >
+        {!isCorrectNetwork ? `Connect to ${correctNetwork.name}` : "Approve application"}
+      </Button>
+    </div>
+  );
+};
diff --git a/src/features/applications/components/ApplicationButtons.tsx b/src/features/applications/components/ApplicationButtons.tsx
new file mode 100644
index 00000000..6b4e6696
--- /dev/null
+++ b/src/features/applications/components/ApplicationButtons.tsx
@@ -0,0 +1,136 @@
+import { useMemo, useCallback, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { useAccount } from "wagmi";
+
+import { Button, IconButton } from "~/components/ui/Button";
+import { Dialog } from "~/components/ui/Dialog";
+import { Spinner } from "~/components/ui/Spinner";
+import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
+
+import type { Application } from "../types";
+import type { ImpactMetrix, ContributionLink, FundingSource } from "~/features/projects/types";
+
+export enum EApplicationStep {
+  PROFILE,
+  ADVANCED,
+  REVIEW,
+}
+
+interface IApplicationButtonsProps {
+  step: EApplicationStep;
+  isUploading: boolean;
+  isPending: boolean;
+  onNextStep: () => void;
+  onBackStep: () => void;
+}
+
+export const ApplicationButtons = ({
+  step,
+  isUploading,
+  isPending,
+  onNextStep,
+  onBackStep,
+}: IApplicationButtonsProps): JSX.Element => {
+  const { isCorrectNetwork } = useIsCorrectNetwork();
+
+  const { address } = useAccount();
+
+  const [showDialog, setShowDialog] = useState<boolean>(false);
+
+  const form = useFormContext<Application>();
+
+  const application = useMemo(() => form.getValues(), [form]);
+
+  const checkLinks = (links: Pick<ContributionLink | ImpactMetrix | FundingSource, "description">[]): boolean =>
+    links.reduce((prev, link) => prev && link.description.length > 0, true);
+
+  const stepComplete = useMemo((): boolean => {
+    const {
+      name,
+      bio,
+      payoutAddress,
+      websiteUrl,
+      profileImageUrl,
+      bannerImageUrl,
+      contributionDescription,
+      impactDescription,
+      impactCategory,
+      contributionLinks,
+      impactMetrics,
+      fundingSources,
+    } = application;
+
+    if (step === EApplicationStep.PROFILE) {
+      return (
+        bannerImageUrl !== undefined &&
+        profileImageUrl !== undefined &&
+        bio.length > 0 &&
+        name.length > 0 &&
+        payoutAddress.length > 0 &&
+        websiteUrl.length > 0
+      );
+    }
+
+    if (step === EApplicationStep.ADVANCED) {
+      return (
+        impactCategory !== undefined &&
+        contributionDescription.length > 0 &&
+        impactDescription.length > 0 &&
+        checkLinks(contributionLinks) &&
+        checkLinks(impactMetrics) &&
+        checkLinks(fundingSources)
+      );
+    }
+
+    return true;
+  }, [step, application]);
+
+  const handleOnClickNextStep = useCallback(() => {
+    if (stepComplete) {
+      onNextStep();
+    } else {
+      setShowDialog(true);
+    }
+  }, [onNextStep, setShowDialog, stepComplete]);
+
+  const handleOnOpenChange = useCallback(() => {
+    setShowDialog(false);
+  }, [setShowDialog]);
+
+  return (
+    <div className="flex justify-end gap-2">
+      <Dialog
+        description="There are still some inputs not fulfilled, please complete all the required information."
+        isOpen={showDialog}
+        size="sm"
+        title="Please complete all the required information"
+        onOpenChange={handleOnOpenChange}
+      />
+
+      {step !== EApplicationStep.PROFILE && (
+        <Button className="text-gray-300 underline" size="auto" variant="ghost" onClick={onBackStep}>
+          Back
+        </Button>
+      )}
+
+      {step !== EApplicationStep.REVIEW && (
+        <Button size="auto" variant="primary" onClick={handleOnClickNextStep}>
+          Next
+        </Button>
+      )}
+
+      {step === EApplicationStep.REVIEW && (
+        <IconButton
+          disabled={isPending || !address || !isCorrectNetwork}
+          icon={isPending ? Spinner : null}
+          isLoading={isPending}
+          size="auto"
+          type="submit"
+          variant="primary"
+        >
+          {isUploading ? "Uploading metadata" : "Submit"}
+        </IconButton>
+      )}
+    </div>
+  );
+};
diff --git a/src/features/applications/components/ApplicationForm.tsx b/src/features/applications/components/ApplicationForm.tsx
index d18a7c7e..6683b239 100644
--- a/src/features/applications/components/ApplicationForm.tsx
+++ b/src/features/applications/components/ApplicationForm.tsx
@@ -1,222 +1,158 @@
-import { useController, useFormContext } from "react-hook-form";
+import { Transaction } from "@ethereum-attestation-service/eas-sdk";
+import { useRouter } from "next/router";
+import { useState, useCallback } from "react";
 import { useLocalStorage } from "react-use";
 import { toast } from "sonner";
 import { useAccount } from "wagmi";
-import { z } from "zod";
 
 import { ImageUpload } from "~/components/ImageUpload";
-import { Alert } from "~/components/ui/Alert";
-import { IconButton } from "~/components/ui/Button";
-import {
-  ErrorMessage,
-  FieldArray,
-  Form,
-  FormControl,
-  FormSection,
-  Label,
-  Select,
-  Textarea,
-} from "~/components/ui/Form";
+import { FieldArray, Form, FormControl, FormSection, Select, Textarea } from "~/components/ui/Form";
 import { Input } from "~/components/ui/Input";
-import { Spinner } from "~/components/ui/Spinner";
-import { Tag } from "~/components/ui/Tag";
-import { impactCategories } from "~/config";
 import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
 
 import { useCreateApplication } from "../hooks/useCreateApplication";
-import { ApplicationSchema, ProfileSchema, contributionTypes, fundingSourceTypes } from "../types";
-
-const ApplicationCreateSchema = z.object({
-  profile: ProfileSchema,
-  application: ApplicationSchema,
-});
-
-export interface IApplicationFormProps {
-  address?: string;
-}
-
-const ImpactTags = (): JSX.Element => {
-  const { control, watch, formState } = useFormContext<z.infer<typeof ApplicationCreateSchema>>();
-  const { field } = useController({
-    name: "application.impactCategory",
-    control,
-  });
+import { ApplicationSchema, contributionTypes, fundingSourceTypes } from "../types";
 
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  const selected = watch("application.impactCategory") ?? [];
+import { ApplicationButtons, EApplicationStep } from "./ApplicationButtons";
+import { ApplicationSteps } from "./ApplicationSteps";
+import { ImpactTags } from "./ImpactTags";
+import { ReviewApplicationDetails } from "./ReviewApplicationDetails";
 
-  const error = formState.errors.application?.impactCategory;
-  return (
-    <div className="mb-4">
-      <Label>
-        Impact categories<span className="text-red-300">*</span>
-      </Label>
-
-      <div className="flex flex-wrap gap-2">
-        {Object.entries(impactCategories).map(([value, { label }]) => {
-          const isSelected = selected.includes(value);
-          return (
-            <Tag
-              key={value}
-              selected={isSelected}
-              size="lg"
-              onClick={() => {
-                const currentlySelected = isSelected ? selected.filter((s) => s !== value) : selected.concat(value);
-
-                field.onChange(currentlySelected);
-              }}
-            >
-              {label}
-            </Tag>
-          );
-        })}
-      </div>
-
-      {error && <ErrorMessage>{error.message}</ErrorMessage>}
-    </div>
-  );
-};
+export const ApplicationForm = (): JSX.Element => {
+  const clearDraft = useLocalStorage("application-draft")[2];
 
-const CreateApplicationButton = ({ isLoading, buttonText }: { isLoading: boolean; buttonText: string }) => {
   const { isCorrectNetwork, correctNetwork } = useIsCorrectNetwork();
 
   const { address } = useAccount();
 
-  return (
-    <div className="flex items-center justify-between">
-      <div>
-        {!address && <div>You must connect wallet to create a list</div>}
-
-        {!isCorrectNetwork && (
-          <div className="flex items-center gap-2">You must be connected to {correctNetwork.name}</div>
-        )}
-      </div>
-
-      <IconButton
-        disabled={isLoading}
-        icon={isLoading ? Spinner : null}
-        isLoading={isLoading}
-        type="submit"
-        variant="primary"
-      >
-        {buttonText}
-      </IconButton>
-    </div>
-  );
-};
-
-export const ApplicationForm = ({ address = "" }: IApplicationFormProps): JSX.Element => {
-  const clearDraft = useLocalStorage("application-draft")[2];
+  const router = useRouter();
+
+  /**
+   * There are 3 steps for creating an application.
+   * The first step is to set the project introduction (profile);
+   * the second step is to set the contributions, impacts, and funding sources (advanced);
+   * the last step is to review the input values, allow editing by going back to previous steps (review).
+   */
+  const [step, setStep] = useState<EApplicationStep>(EApplicationStep.PROFILE);
+
+  const handleNextStep = useCallback(() => {
+    if (step === EApplicationStep.PROFILE) {
+      setStep(EApplicationStep.ADVANCED);
+    } else if (step === EApplicationStep.ADVANCED) {
+      setStep(EApplicationStep.REVIEW);
+    }
+  }, [step, setStep]);
+
+  const handleBackStep = useCallback(() => {
+    if (step === EApplicationStep.REVIEW) {
+      setStep(EApplicationStep.ADVANCED);
+    } else if (step === EApplicationStep.ADVANCED) {
+      setStep(EApplicationStep.PROFILE);
+    }
+  }, [step, setStep]);
 
   const create = useCreateApplication({
-    onSuccess: () => {
-      toast.success("Application created successfully!");
+    onSuccess: (data: Transaction<string[]>) => {
       clearDraft();
+      router.push(`/applications/confirmation?txHash=${data.tx.hash}`);
     },
     onError: (err: { reason?: string; data?: { message: string } }) =>
       toast.error("Application create error", {
         description: err.reason ?? err.data?.message,
       }),
   });
-  if (create.isSuccess) {
-    return (
-      <Alert title="Application created!" variant="success">
-        It will now be reviewed by our admins.
-      </Alert>
-    );
-  }
-  const { error } = create;
 
-  const text = create.isAttesting ? "Creating attestation" : "Create application";
+  const { error: createError } = create;
 
   return (
-    <div>
+    <div className="rounded-lg border border-gray-200 p-4">
+      <ApplicationSteps step={step} />
+
       <Form
         defaultValues={{
-          application: {
-            payoutAddress: address,
-            contributionLinks: [{}],
-            impactMetrics: [{}],
-            fundingSources: [{}],
-          },
+          payoutAddress: address,
+          contributionLinks: [{}],
+          impactMetrics: [{}],
+          fundingSources: [{}],
         }}
-        schema={ApplicationCreateSchema}
-        onSubmit={({ profile, application }) => {
-          create.mutate({ application, profile });
+        schema={ApplicationSchema}
+        onSubmit={(application) => {
+          create.mutate(application);
         }}
       >
         <FormSection
-          description="Configure your profile name and choose your avatar and background for your project."
-          title="Profile"
+          className={step === EApplicationStep.PROFILE ? "block" : "hidden"}
+          description="Please provide information about your project."
+          title="Project Profile"
         >
-          <FormControl required label="Profile name" name="profile.name">
-            <Input placeholder="Your name" />
+          <FormControl required label="Project name" name="name">
+            <Input placeholder="Type your project name" />
           </FormControl>
 
-          <div className="mb-4 gap-4 md:flex">
-            <FormControl required label="Project avatar" name="profile.profileImageUrl">
-              <ImageUpload className="h-48 w-48 " />
+          <FormControl required label="Description" name="bio">
+            <Textarea placeholder="Type project description" rows={4} />
+          </FormControl>
+
+          <div className="gap-4 md:flex">
+            <FormControl required className="flex-1" label="Website" name="websiteUrl">
+              <Input placeholder="https://" />
             </FormControl>
 
-            <FormControl required className="flex-1" label="Project background image" name="profile.bannerImageUrl">
-              <ImageUpload className="h-48 " />
+            <FormControl required className="flex-1" label="Payout address" name="payoutAddress">
+              <Input placeholder="0x..." />
             </FormControl>
           </div>
-        </FormSection>
 
-        <FormSection
-          description="Configure your application and the payout address to where tokens will be transferred."
-          title="Application"
-        >
-          <FormControl required label="Name" name="application.name">
-            <Input placeholder="Project name" />
-          </FormControl>
+          <div className="gap-4 md:flex">
+            <FormControl className="flex-1" label="X(Twitter)" name="twitter" required={false}>
+              <Input placeholder="Type your twitter username" />
+            </FormControl>
 
-          <FormControl required label="Description" name="application.bio">
-            <Textarea placeholder="Project description" rows={4} />
-          </FormControl>
+            <FormControl className="flex-1" label="Github" name="github" required={false}>
+              <Input placeholder="Type your github username" />
+            </FormControl>
+          </div>
 
-          <div className="gap-4 md:flex">
-            <FormControl required className="flex-1" label="Website" name="application.websiteUrl">
-              <Input placeholder="https://" />
+          <div className="mb-4 gap-4 md:flex">
+            <FormControl required label="Project avatar" name="profileImageUrl">
+              <ImageUpload className="h-48 w-48 " />
             </FormControl>
 
-            <FormControl required className="flex-1" label="Payout address" name="application.payoutAddress">
-              <Input placeholder="0x..." />
+            <FormControl required className="flex-1" label="Project background image" name="bannerImageUrl">
+              <ImageUpload className="h-48 " />
             </FormControl>
           </div>
         </FormSection>
 
-        <FormSection description="Describe the contribution and impact of your project." title="Contribution & Impact">
-          <FormControl required label="Contribution description" name="application.contributionDescription">
+        <FormSection
+          className={step === EApplicationStep.ADVANCED ? "block" : "hidden"}
+          description="Describe the contribution and impact of your project."
+          title="Contribution & Impact"
+        >
+          <FormControl required label="Contribution description" name="contributionDescription">
             <Textarea placeholder="What have your project contributed to?" rows={4} />
           </FormControl>
 
-          <FormControl required label="Impact description" name="application.impactDescription">
+          <FormControl required label="Impact description" name="impactDescription">
             <Textarea placeholder="What impact has your project had?" rows={4} />
           </FormControl>
 
           <ImpactTags />
-        </FormSection>
 
-        <FormSection description="Where can we find your contributions?" title="Contribution links">
           <FieldArray
-            name="application.contributionLinks"
+            description="Where can we find your contributions?"
+            name="contributionLinks"
             renderField={(field, i) => (
-              <>
-                <FormControl
-                  required
-                  className="min-w-96 flex-1"
-                  name={`application.contributionLinks.${i}.description`}
-                >
-                  <Input placeholder="Description" />
+              <div className="mb-4 flex flex-wrap gap-2">
+                <FormControl required className="min-w-96" name={`contributionLinks.${i}.description`}>
+                  <Input placeholder="Type the description of your contribution" />
                 </FormControl>
 
-                <FormControl required name={`application.contributionLinks.${i}.url`}>
+                <FormControl required className="min-w-72" name={`contributionLinks.${i}.url`}>
                   <Input placeholder="https://" />
                 </FormControl>
 
-                <FormControl required name={`application.contributionLinks.${i}.type`}>
+                <FormControl required name={`contributionLinks.${i}.type`}>
                   <Select>
                     {Object.entries(contributionTypes).map(([value, label]) => (
                       <option key={value} value={value}>
@@ -225,50 +161,50 @@ export const ApplicationForm = ({ address = "" }: IApplicationFormProps): JSX.El
                     ))}
                   </Select>
                 </FormControl>
-              </>
+              </div>
             )}
+            title="Contribution links"
           />
-        </FormSection>
 
-        <FormSection description="What kind of impact have your project made?" title="Impact metrics">
           <FieldArray
-            name="application.impactMetrics"
+            description="What kind of impact have your project made?"
+            name="impactMetrics"
             renderField={(field, i) => (
-              <>
-                <FormControl required className="min-w-96 flex-1" name={`application.impactMetrics.${i}.description`}>
-                  <Input placeholder="Description" />
+              <div className="mb-4 flex flex-wrap gap-2">
+                <FormControl required className="min-w-96" name={`impactMetrics.${i}.description`}>
+                  <Input placeholder="Type the name of your impact metric" />
                 </FormControl>
 
-                <FormControl required name={`application.impactMetrics.${i}.url`}>
+                <FormControl required className="min-w-72" name={`impactMetrics.${i}.url`}>
                   <Input placeholder="https://" />
                 </FormControl>
 
-                <FormControl required valueAsNumber name={`application.impactMetrics.${i}.number`}>
-                  <Input placeholder="Number" type="number" />
+                <FormControl required valueAsNumber name={`impactMetrics.${i}.number`}>
+                  <Input placeholder="Type a metric number" type="number" />
                 </FormControl>
-              </>
+              </div>
             )}
+            title="Impact metrics"
           />
-        </FormSection>
 
-        <FormSection description="From what sources have you received funding?" title="Funding sources">
           <FieldArray
-            name="application.fundingSources"
+            description="From what sources have you received funding?"
+            name="fundingSources"
             renderField={(field, i) => (
-              <>
-                <FormControl required className="min-w-96 flex-1" name={`application.fundingSources.${i}.description`}>
-                  <Input placeholder="Description" />
+              <div className="mb-4 flex flex-wrap gap-2">
+                <FormControl required className="min-w-96" name={`fundingSources.${i}.description`}>
+                  <Input placeholder="Type the name of your funding source" />
                 </FormControl>
 
-                <FormControl required valueAsNumber name={`application.fundingSources.${i}.amount`}>
+                <FormControl required valueAsNumber className="w-32" name={`fundingSources.${i}.amount`}>
                   <Input placeholder="Amount" type="number" />
                 </FormControl>
 
-                <FormControl required name={`application.fundingSources.${i}.currency`}>
-                  <Input placeholder="USD" />
+                <FormControl required className="w-32" name={`fundingSources.${i}.currency`}>
+                  <Input placeholder="e.g. USD" />
                 </FormControl>
 
-                <FormControl required name={`application.fundingSources.${i}.type`}>
+                <FormControl required name={`fundingSources.${i}.type`}>
                   <Select>
                     {Object.entries(fundingSourceTypes).map(([value, label]) => (
                       <option key={value} value={value}>
@@ -277,20 +213,34 @@ export const ApplicationForm = ({ address = "" }: IApplicationFormProps): JSX.El
                     ))}
                   </Select>
                 </FormControl>
-              </>
+              </div>
             )}
+            title="Funding sources"
           />
         </FormSection>
 
-        {error ? (
-          <div className="mb-4 text-center text-gray-600 dark:text-gray-400">
-            Make sure you&apos;re not connected to a VPN since this can cause problems with the RPC and your wallet.
+        {step === EApplicationStep.REVIEW && <ReviewApplicationDetails />}
+
+        {step === EApplicationStep.REVIEW && (
+          <div className="mb-2 w-full text-right text-sm italic text-blue-400">
+            {!address && <p>You must connect wallet to create an application</p>}
+
+            {!isCorrectNetwork && <p className="gap-2">You must be connected to {correctNetwork.name}</p>}
+
+            {createError && (
+              <p>
+                Make sure you&apos;re not connected to a VPN since this can cause problems with the RPC and your wallet.
+              </p>
+            )}
           </div>
-        ) : null}
+        )}
 
-        <CreateApplicationButton
-          buttonText={create.isUploading ? "Uploading metadata" : text}
-          isLoading={create.isPending}
+        <ApplicationButtons
+          isPending={create.isPending}
+          isUploading={create.isUploading}
+          step={step}
+          onBackStep={handleBackStep}
+          onNextStep={handleNextStep}
         />
       </Form>
     </div>
diff --git a/src/features/applications/components/ApplicationSteps.tsx b/src/features/applications/components/ApplicationSteps.tsx
new file mode 100644
index 00000000..6f5cd096
--- /dev/null
+++ b/src/features/applications/components/ApplicationSteps.tsx
@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import Image from "next/image";
+
+export enum EStepState {
+  DEFAULT = -1,
+  ACTIVE = 0,
+  DONE = 1,
+}
+
+interface IStepCategoryProps {
+  title: string;
+  progress: EStepState;
+}
+
+interface IApplicationStepsProps {
+  step: number;
+}
+
+const StepCategory = ({ title, progress }: IStepCategoryProps): JSX.Element => (
+  <div className="flex items-center gap-3">
+    {progress === EStepState.ACTIVE && (
+      <Image alt="circle-check-blue" height="22" src="/circle-check-blue.svg" width="22" />
+    )}
+
+    {progress === EStepState.DONE && (
+      <Image alt="circle-check-blue-filled" height="22" src="/circle-check-blue-filled.svg" width="22" />
+    )}
+
+    {progress === EStepState.DEFAULT && <div className="h-4 w-4 rounded-full border-2 border-gray-300" />}
+
+    <p className={clsx("text-md", progress === EStepState.ACTIVE ? "text-blue-400" : "text-gray-300")}>{title}</p>
+  </div>
+);
+
+const Interline = (): JSX.Element => <div className="h-[1px] w-9 bg-gray-300" />;
+
+export const ApplicationSteps = ({ step }: IApplicationStepsProps): JSX.Element => (
+  <div className="mb-4 flex items-center gap-4">
+    <StepCategory progress={step} title="Project Profile" />
+
+    <Interline />
+
+    <StepCategory progress={step - 1} title="Contribution & Impact" />
+
+    <Interline />
+
+    <StepCategory progress={step - 2} title="Review & Submit" />
+  </div>
+);
diff --git a/src/features/applications/components/ApplicationsToApprove.tsx b/src/features/applications/components/ApplicationsToApprove.tsx
index 1e2b1914..ed221251 100644
--- a/src/features/applications/components/ApplicationsToApprove.tsx
+++ b/src/features/applications/components/ApplicationsToApprove.tsx
@@ -2,14 +2,13 @@ import { ClockIcon } from "lucide-react";
 import Link from "next/link";
 import { useMemo } from "react";
 import { useFormContext } from "react-hook-form";
+import { FiAlertCircle } from "react-icons/fi";
 import { z } from "zod";
 
 import { EmptyState } from "~/components/EmptyState";
-import { Alert } from "~/components/ui/Alert";
 import { Badge } from "~/components/ui/Badge";
 import { Button } from "~/components/ui/Button";
 import { Checkbox, Form } from "~/components/ui/Form";
-import { Markdown } from "~/components/ui/Markdown";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { Spinner } from "~/components/ui/Spinner";
 import { useApplications } from "~/features/applications/hooks/useApplications";
@@ -63,6 +62,7 @@ const ApproveButton = ({ isLoading = false }: IApproveButtonProps): JSX.Element
     <Button
       suppressHydrationWarning
       disabled={!selectedCount || !isAdmin || isLoading || !isCorrectNetwork}
+      size="auto"
       type="submit"
       variant="primary"
     >
@@ -71,6 +71,20 @@ const ApproveButton = ({ isLoading = false }: IApproveButtonProps): JSX.Element
   );
 };
 
+const ApplicationHeader = ({ applications = [] }: { applications: Attestation[] | undefined }): JSX.Element => (
+  <div className="flex items-center bg-gray-50 py-4">
+    <div className="flex-1 justify-center">
+      <SelectAllButton applications={applications} />
+    </div>
+
+    <div className="flex-[8] pl-6">Project</div>
+
+    <div className="flex-[3]">Submitted on</div>
+
+    <div className="flex-[2]">Status</div>
+  </div>
+);
+
 export const ApplicationItem = ({
   id,
   recipient,
@@ -84,34 +98,32 @@ export const ApplicationItem = ({
 
   const form = useFormContext();
 
-  const { bio, fundingSources = [], impactMetrics = [] } = metadata.data ?? {};
+  const { fundingSources = [], impactMetrics = [], profileImageUrl } = metadata.data ?? {};
 
   return (
-    <div className="flex items-center gap-2 rounded border-b dark:border-gray-800 hover:dark:bg-gray-800">
-      <label className="flex flex-1 cursor-pointer items-center gap-4 p-2">
-        <Checkbox disabled={isApproved} value={id} {...form.register(`selected`)} type="checkbox" />
+    <Link href={`/projects/${id}`} target="_blank">
+      <div className="flex cursor-pointer items-center gap-2 py-4 hover:bg-blue-50">
+        <label className="flex flex-1 cursor-pointer justify-center p-2">
+          <Checkbox disabled={isApproved} value={id} {...form.register(`selected`)} type="checkbox" />
+        </label>
 
-        <ProjectAvatar isLoading={isLoading} profileId={recipient} size="sm" />
+        <div className="flex flex-[8] items-center gap-4">
+          <ProjectAvatar isLoading={isLoading} profileId={recipient} size="sm" url={profileImageUrl} />
 
-        <div className=" flex-1">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col">
             <Skeleton className="mb-1 min-h-5 min-w-24" isLoading={isLoading}>
-              {name}
+              <span className="uppercase">{name}</span>
             </Skeleton>
-          </div>
 
-          <div>
-            <div className="flex gap-4 text-xs dark:text-gray-400">
+            <div className="text-sm text-gray-400">
               <div>{fundingSources.length} funding sources</div>
 
               <div>{impactMetrics.length} impact metrics</div>
             </div>
-
-            <div className="line-clamp-2 text-sm dark:text-gray-300">{bio}</div>
           </div>
         </div>
 
-        <div className="flex items-center gap-2 text-xs text-gray-700 dark:text-gray-400">
+        <div className="flex flex-[3] items-center gap-2 text-xs text-gray-700">
           <ClockIcon className="size-3" />
 
           <Skeleton className="mb-1 min-h-5 min-w-24" isLoading={isLoading}>
@@ -119,21 +131,11 @@ export const ApplicationItem = ({
           </Skeleton>
         </div>
 
-        {isApproved ? <Badge variant="success">Approved</Badge> : <Badge>Pending</Badge>}
-
-        <Button
-          as={Link}
-          className="transition-transform group-data-[state=closed]:rotate-180"
-          disabled={isLoading}
-          href={`/applications/${id}`}
-          target="_blank"
-          type="button"
-          variant=""
-        >
-          Review
-        </Button>
-      </label>
-    </div>
+        <div className="flex-[2]">
+          {isApproved ? <Badge variant="success">Approved</Badge> : <Badge variant="pending">Pending</Badge>}
+        </div>
+      </div>
+    </Link>
   );
 };
 
@@ -160,54 +162,59 @@ export const ApplicationsToApprove = (): JSX.Element => {
   const applicationsToApprove = applications.data?.filter((application) => !approvedById?.get(application.id));
 
   return (
-    <Form
-      defaultValues={{ selected: [] }}
-      schema={ApplicationsToApproveSchema}
-      onSubmit={(values) => {
-        approve.mutate(values.selected);
-      }}
-    >
-      <Markdown>{`### Review applications
-Select the applications you want to approve. You must be a configured admin to approve applications.
+    <div className="flex w-full justify-center">
+      <div className="flex flex-col gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
+        <h3>Review Applications</h3>
 
-`}</Markdown>
+        <p className="text-gray-400">
+          Select the applications you want to approve. You must be a configured admin to approve applications.
+        </p>
 
-      <Alert>Newly submitted applications can take 10 minutes to show up.</Alert>
+        <p className="flex items-center gap-2 text-blue-400">
+          <FiAlertCircle className="h-4 w-4" />
 
-      <div className="my-2 flex items-center justify-between">
-        <div className="text-gray-300">
-          {applications.data?.length ? `${applications.data.length} applications found` : ""}
-        </div>
+          <span>Newly submitted applications can take 10 minutes to show up.</span>
+        </p>
 
-        <div className="flex gap-2">
-          <SelectAllButton applications={applicationsToApprove} />
+        <div className="mt-6 text-2xl font-extrabold uppercase text-black">{`${applications.data?.length} applications found`}</div>
 
-          <ApproveButton isLoading={approve.isPending} />
-        </div>
-      </div>
+        <Form
+          defaultValues={{ selected: [] }}
+          schema={ApplicationsToApproveSchema}
+          onSubmit={(values) => {
+            approve.mutate(values.selected);
+          }}
+        >
+          {applications.isLoading && (
+            <div className="flex items-center justify-center py-16">
+              <Spinner />
+            </div>
+          )}
+
+          {!applications.isLoading && !applications.data?.length ? (
+            <EmptyState title="No applications">
+              <Button as={Link} href="/applications/new" variant="primary">
+                Go to create application
+              </Button>
+            </EmptyState>
+          ) : null}
+
+          <div className="mb-2 flex justify-end">
+            <ApproveButton isLoading={approve.isPending} />
+          </div>
 
-      {applications.isLoading && (
-        <div className="flex items-center justify-center py-16">
-          <Spinner />
-        </div>
-      )}
-
-      {!applications.isLoading && !applications.data?.length ? (
-        <EmptyState title="No applications">
-          <Button as={Link} href="/applications/new" variant="primary">
-            Go to create application
-          </Button>
-        </EmptyState>
-      ) : null}
-
-      {applications.data?.map((item) => (
-        <ApplicationItem
-          key={item.id}
-          {...item}
-          isApproved={approvedById?.get(item.id)}
-          isLoading={applications.isLoading}
-        />
-      ))}
-    </Form>
+          <ApplicationHeader applications={applicationsToApprove} />
+
+          {applications.data?.map((item) => (
+            <ApplicationItem
+              key={item.id}
+              {...item}
+              isApproved={approvedById?.get(item.id)}
+              isLoading={applications.isLoading}
+            />
+          ))}
+        </Form>
+      </div>
+    </div>
   );
 };
diff --git a/src/features/applications/components/ImpactTags.tsx b/src/features/applications/components/ImpactTags.tsx
new file mode 100644
index 00000000..a40c0cba
--- /dev/null
+++ b/src/features/applications/components/ImpactTags.tsx
@@ -0,0 +1,53 @@
+import { useController, useFormContext } from "react-hook-form";
+import { z } from "zod";
+
+import { ErrorMessage, Label } from "~/components/ui/Form";
+import { Tag } from "~/components/ui/Tag";
+import { impactCategories } from "~/config";
+
+import { ApplicationSchema } from "../types";
+
+export const ImpactTags = (): JSX.Element => {
+  const { control, watch, formState } = useFormContext<z.infer<typeof ApplicationSchema>>();
+  const { field } = useController({
+    name: "impactCategory",
+    control,
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const selected = watch("impactCategory") ?? [];
+
+  const error = formState.errors.impactCategory;
+
+  return (
+    <div className="mb-4">
+      <Label>
+        Impact categories<span className="text-blue-400">*</span>
+      </Label>
+
+      <p className="mb-2 text-gray-300">Please select the categories your project is related to </p>
+
+      <div className="flex flex-wrap gap-2">
+        {Object.entries(impactCategories).map(([value, { label }]) => {
+          const isSelected = selected.includes(value);
+          return (
+            <Tag
+              key={value}
+              selected={isSelected}
+              size="md"
+              onClick={() => {
+                const currentlySelected = isSelected ? selected.filter((s) => s !== value) : selected.concat(value);
+
+                field.onChange(currentlySelected);
+              }}
+            >
+              {label}
+            </Tag>
+          );
+        })}
+      </div>
+
+      {error && <ErrorMessage>{error.message}</ErrorMessage>}
+    </div>
+  );
+};
diff --git a/src/features/applications/components/LinkField.tsx b/src/features/applications/components/LinkField.tsx
new file mode 100644
index 00000000..84c59d56
--- /dev/null
+++ b/src/features/applications/components/LinkField.tsx
@@ -0,0 +1,89 @@
+import { useMemo, type ReactNode } from "react";
+import { FaGithub, FaEthereum } from "react-icons/fa";
+import { RiGlobalLine } from "react-icons/ri";
+
+import { type ImpactMetrix, type ContributionLink, type FundingSource } from "~/features/projects/types";
+
+interface ILinkField {
+  contributionLink?: ContributionLink;
+  impactMetrix?: ImpactMetrix;
+  fundingSource?: FundingSource;
+}
+
+export const LinkField = ({
+  contributionLink = undefined,
+  impactMetrix = undefined,
+  fundingSource = undefined,
+}: ILinkField): JSX.Element => {
+  const logo = useMemo((): JSX.Element | null => {
+    if (contributionLink && contributionLink.type === "CONTRACT_ADDRESS") {
+      return <FaEthereum />;
+    }
+
+    if (contributionLink && contributionLink.type === "GITHUB_REPO") {
+      return <FaGithub />;
+    }
+
+    if (contributionLink || impactMetrix) {
+      return <RiGlobalLine />;
+    }
+
+    return null;
+  }, [contributionLink, impactMetrix, fundingSource]);
+
+  const title = useMemo((): string | null => {
+    if (contributionLink) {
+      return contributionLink.description;
+    }
+
+    if (impactMetrix) {
+      return impactMetrix.description;
+    }
+
+    if (fundingSource) {
+      return fundingSource.description;
+    }
+
+    return null;
+  }, [contributionLink, impactMetrix, fundingSource]);
+
+  const content = useMemo((): ReactNode | null => {
+    if (contributionLink) {
+      return contributionLink.url;
+    }
+
+    if (impactMetrix) {
+      return (
+        <p className="flex gap-2">
+          <span>{impactMetrix.url}:</span>
+
+          <span>${impactMetrix.number}</span>
+        </p>
+      );
+    }
+
+    if (fundingSource) {
+      return (
+        <p className="flex gap-2">
+          <span>{fundingSource.amount}</span>
+
+          <span>{fundingSource.currency}</span>
+        </p>
+      );
+    }
+
+    return null;
+  }, [contributionLink, impactMetrix, fundingSource]);
+
+  return (
+    <div className="flex w-full flex-col justify-start gap-2">
+      <p className="text-sm text-gray-400">{title}</p>
+
+      <div className="flex items-center gap-2 text-sm text-black">
+        {logo}
+
+        {content}
+      </div>
+    </div>
+  );
+};
diff --git a/src/features/applications/components/ReviewApplicationDetails.tsx b/src/features/applications/components/ReviewApplicationDetails.tsx
new file mode 100644
index 00000000..537af13a
--- /dev/null
+++ b/src/features/applications/components/ReviewApplicationDetails.tsx
@@ -0,0 +1,133 @@
+import clsx from "clsx";
+import { useMemo, type ReactNode } from "react";
+import { useFormContext } from "react-hook-form";
+
+import { Tag } from "~/components/ui/Tag";
+
+import type { Application } from "../types";
+
+import { LinkField } from "./LinkField";
+
+interface IValueFieldProps {
+  title: string;
+  body?: ReactNode;
+  required?: boolean;
+}
+
+const ValueField = ({ title, body = undefined, required = false }: IValueFieldProps): JSX.Element => {
+  const emptyPlaceholder = "(empty)";
+
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      <b className={clsx(required && "after:text-blue-400 after:content-['*']")}>{title}</b>
+
+      <div className="text-light flex flex-wrap gap-2 text-gray-400">
+        {body === undefined && emptyPlaceholder}
+
+        {typeof body === "string" && body.length === 0 && emptyPlaceholder}
+
+        {((typeof body === "string" && body.length > 0) || typeof body !== "string") && body}
+      </div>
+    </div>
+  );
+};
+
+export const ReviewApplicationDetails = (): JSX.Element => {
+  const form = useFormContext<Application>();
+
+  const application = useMemo(() => form.getValues(), [form]);
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div>
+        <h3 className="mb-1 font-sans text-xl font-semibold">Review & Submit</h3>
+
+        <p className="leading-loose text-gray-400">Please review and submit your project application.</p>
+      </div>
+
+      <div className="flex flex-col gap-6">
+        <b className="text-lg">Project Profile</b>
+
+        <ValueField required body={application.name} title="Project name" />
+
+        <ValueField required body={application.bio} title="Project description" />
+
+        <div className="grid grid-flow-row grid-cols-2 gap-4">
+          <ValueField required body={application.websiteUrl} title="Website" />
+
+          <ValueField required body={application.payoutAddress} title="Payout address" />
+
+          <ValueField body={application.twitter} title="X(Twitter)" />
+
+          <ValueField body={application.github} title="Github" />
+        </div>
+
+        <div className="flex gap-6">
+          <div>
+            <p>Project avatar</p>
+
+            <div
+              className="h-48 w-48 rounded-full bg-gray-200 bg-cover bg-center bg-no-repeat"
+              style={{
+                backgroundImage: `url("${application.profileImageUrl}")`,
+              }}
+            />
+          </div>
+
+          <div className="flex-1">
+            <p>Project cover image</p>
+
+            <div
+              className="h-48 rounded-xl bg-gray-200 bg-cover bg-center bg-no-repeat"
+              style={{
+                backgroundImage: `url("${application.bannerImageUrl}")`,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-6">
+        <b className="text-lg">Contribution & Impact</b>
+
+        <ValueField required body={application.contributionDescription} title="Contribution description" />
+
+        <ValueField required body={application.impactDescription} title="Impact description" />
+
+        <ValueField
+          required
+          body={application.impactCategory?.map((tag) => (
+            <Tag key={tag} selected size="sm">
+              {tag}
+            </Tag>
+          ))}
+          title="Impact categories"
+        />
+
+        <ValueField
+          required
+          body={application.contributionLinks.map((link) => (
+            <LinkField key={link.description} contributionLink={link} />
+          ))}
+          title="Contribution links"
+        />
+
+        <ValueField
+          required
+          body={application.impactMetrics.map((link) => (
+            <LinkField key={link.description} impactMetrix={link} />
+          ))}
+          title="Impact metrics"
+        />
+
+        <ValueField
+          required
+          body={application.fundingSources.map((link) => (
+            <LinkField key={link.description} fundingSource={link} />
+          ))}
+          title="Funding sources"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/features/applications/components/ReviewBar.tsx b/src/features/applications/components/ReviewBar.tsx
new file mode 100644
index 00000000..03a8e43e
--- /dev/null
+++ b/src/features/applications/components/ReviewBar.tsx
@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { FiAlertCircle } from "react-icons/fi";
+
+import { StatusBar } from "~/components/StatusBar";
+import { useIsAdmin } from "~/hooks/useIsAdmin";
+
+import { useApprovedApplications } from "../hooks/useApprovedApplications";
+
+import { AdminButtonsBar } from "./AdminButtonsBar";
+
+interface IReviewBarProps {
+  projectId: string;
+}
+
+export const ReviewBar = ({ projectId }: IReviewBarProps): JSX.Element => {
+  const isAdmin = useIsAdmin();
+  const rawReturn = useApprovedApplications([projectId]);
+
+  const approved = useMemo(() => rawReturn.data && rawReturn.data.length > 0, [rawReturn]);
+
+  return (
+    <div className="mb-4 w-full">
+      {approved && <StatusBar content="The project has been approved." status="approved" />}
+
+      {!approved && isAdmin && <StatusBar content="This project is pending approval." status="pending" />}
+
+      {!approved && !isAdmin && (
+        <StatusBar
+          content={
+            <div className="flex items-center gap-2">
+              <FiAlertCircle className="h-4 w-4" />
+
+              <span>This project is under review by our team.</span>
+
+              <i>Applications can be edited and approved until Registration period ends.</i>
+            </div>
+          }
+          status="default"
+        />
+      )}
+
+      {isAdmin && !approved && <AdminButtonsBar projectId={projectId} />}
+    </div>
+  );
+};
diff --git a/src/features/applications/hooks/useApplicationByTxHash.ts b/src/features/applications/hooks/useApplicationByTxHash.ts
new file mode 100644
index 00000000..4ad843cf
--- /dev/null
+++ b/src/features/applications/hooks/useApplicationByTxHash.ts
@@ -0,0 +1,8 @@
+import { api } from "~/utils/api";
+
+import type { UseTRPCQueryResult } from "@trpc/react-query/shared";
+import type { Attestation } from "~/utils/fetchAttestations";
+
+export function useApplicationByTxHash(transactionId: string): UseTRPCQueryResult<Attestation, unknown> {
+  return api.projects.getByTransactionId.useQuery({ transactionId });
+}
diff --git a/src/features/applications/hooks/useCreateApplication.ts b/src/features/applications/hooks/useCreateApplication.ts
index 90f7284b..06a4ef8d 100644
--- a/src/features/applications/hooks/useCreateApplication.ts
+++ b/src/features/applications/hooks/useCreateApplication.ts
@@ -5,11 +5,11 @@ import { type TransactionError } from "~/features/voters/hooks/useApproveVoters"
 import { useAttest, useCreateAttestation } from "~/hooks/useEAS";
 import { useUploadMetadata } from "~/hooks/useMetadata";
 
-import type { Application, Profile } from "../types";
+import type { Application } from "../types";
 import type { Transaction } from "@ethereum-attestation-service/eas-sdk";
 
 export type TUseCreateApplicationReturn = Omit<
-  UseMutationResult<Transaction<string[]>, Error | TransactionError, { application: Application; profile: Profile }>,
+  UseMutationResult<Transaction<string[]>, Error | TransactionError, Application>,
   "error"
 > & {
   error: Error | TransactionError | null;
@@ -18,7 +18,7 @@ export type TUseCreateApplicationReturn = Omit<
 };
 
 export function useCreateApplication(options: {
-  onSuccess: () => void;
+  onSuccess: (data: Transaction<string[]>) => void;
   onError: (err: TransactionError) => void;
 }): TUseCreateApplicationReturn {
   const attestation = useCreateAttestation();
@@ -26,13 +26,13 @@ export function useCreateApplication(options: {
   const upload = useUploadMetadata();
 
   const mutation = useMutation({
-    mutationFn: async (values: { application: Application; profile: Profile }) =>
+    mutationFn: async (values: Application) =>
       Promise.all([
-        upload.mutateAsync(values.application).then(({ url: metadataPtr }) =>
+        upload.mutateAsync(values).then(({ url: metadataPtr }) =>
           attestation.mutateAsync({
             schemaUID: eas.schemas.metadata,
             values: {
-              name: values.application.name,
+              name: values.name,
               metadataType: 0, // "http"
               metadataPtr,
               type: "application",
@@ -40,18 +40,6 @@ export function useCreateApplication(options: {
             },
           }),
         ),
-        upload.mutateAsync(values.profile).then(({ url: metadataPtr }) =>
-          attestation.mutateAsync({
-            schemaUID: eas.schemas.metadata,
-            values: {
-              name: values.profile.name,
-              metadataType: 0, // "http"
-              metadataPtr,
-              type: "profile",
-              round: config.roundId,
-            },
-          }),
-        ),
       ]).then((attestations) => attest.mutateAsync(attestations.map((att) => ({ ...att, data: [att.data] })))),
 
     ...options,
diff --git a/src/features/applications/types/index.ts b/src/features/applications/types/index.ts
index f7b57c67..fc0ad423 100644
--- a/src/features/applications/types/index.ts
+++ b/src/features/applications/types/index.ts
@@ -9,14 +9,6 @@ export const MetadataSchema = z.object({
   metadataPtr: z.string().min(3),
 });
 
-export const ProfileSchema = z.object({
-  name: z.string().min(3),
-  profileImageUrl: z.string(),
-  bannerImageUrl: z.string(),
-});
-
-export type Profile = z.infer<typeof ProfileSchema>;
-
 export const contributionTypes = {
   CONTRACT_ADDRESS: "Contract address",
   GITHUB_REPO: "Github repo",
@@ -33,6 +25,8 @@ export const fundingSourceTypes = {
 export const ApplicationSchema = z.object({
   name: z.string().min(3),
   bio: z.string().min(3),
+  profileImageUrl: z.string().optional(),
+  bannerImageUrl: z.string().optional(),
   websiteUrl: z
     .string()
     .min(1)
@@ -41,9 +35,11 @@ export const ApplicationSchema = z.object({
       /^(http:\/\/|https:\/\/)/i.test(url) ? url : `https://${url}`,
     ),
   payoutAddress: EthAddressSchema,
+  github: z.string().optional(),
+  twitter: z.string().optional(),
   contributionDescription: z.string().min(3),
   impactDescription: z.string().min(3),
-  impactCategory: z.array(z.string()).min(1),
+  impactCategory: z.array(z.string()).min(1).optional(),
   contributionLinks: z
     .array(
       z.object({
diff --git a/src/features/filter/types/index.ts b/src/features/filter/types/index.ts
index f9fc5c8b..dc0f3e30 100644
--- a/src/features/filter/types/index.ts
+++ b/src/features/filter/types/index.ts
@@ -16,6 +16,7 @@ export const FilterSchema = z.object({
   orderBy: z.nativeEnum(OrderBy).default(OrderBy.name),
   sortOrder: z.nativeEnum(SortOrder).default(SortOrder.asc),
   search: z.preprocess((v) => (v === "null" || v === "undefined" ? null : v), z.string().nullish()),
+  needApproval: z.boolean().optional().default(true),
 });
 
 export type Filter = z.infer<typeof FilterSchema>;
diff --git a/src/features/projects/components/ProjectAvatar.tsx b/src/features/projects/components/ProjectAvatar.tsx
index 40bb2db6..22bba644 100644
--- a/src/features/projects/components/ProjectAvatar.tsx
+++ b/src/features/projects/components/ProjectAvatar.tsx
@@ -6,11 +6,16 @@ import { useProfileWithMetadata } from "~/hooks/useProfile";
 
 export interface IProjectAvatarProps extends ComponentProps<typeof Avatar> {
   profileId?: Address;
+  url?: string;
 }
 
-export const ProjectAvatar = ({ profileId = undefined, ...rest }: IProjectAvatarProps): JSX.Element => {
+export const ProjectAvatar = ({
+  profileId = undefined,
+  url = undefined,
+  ...rest
+}: IProjectAvatarProps): JSX.Element => {
   const profile = useProfileWithMetadata(profileId);
   const { profileImageUrl } = profile.data ?? {};
 
-  return <Avatar {...rest} src={profileImageUrl} />;
+  return <Avatar {...rest} src={profileImageUrl ?? url} />;
 };
diff --git a/src/features/projects/components/ProjectBanner.tsx b/src/features/projects/components/ProjectBanner.tsx
index 05b8ea6b..c70292cf 100644
--- a/src/features/projects/components/ProjectBanner.tsx
+++ b/src/features/projects/components/ProjectBanner.tsx
@@ -6,15 +6,20 @@ import { useProfileWithMetadata } from "~/hooks/useProfile";
 
 export interface IProjectBannerProps extends ComponentProps<typeof Banner> {
   profileId?: Address;
+  url?: string;
 }
 
-export const ProjectBanner = ({ profileId = undefined, ...rest }: IProjectBannerProps): JSX.Element => {
+export const ProjectBanner = ({
+  profileId = undefined,
+  url = undefined,
+  ...rest
+}: IProjectBannerProps): JSX.Element => {
   const profile = useProfileWithMetadata(profileId);
   const { profileImageUrl, bannerImageUrl } = profile.data ?? {};
 
   return (
-    <div className="overflow-hidden rounded-3xl">
-      <Banner {...rest} fallbackSrc={profileImageUrl} src={bannerImageUrl} />
+    <div className="overflow-hidden rounded-xl">
+      <Banner {...rest} fallbackSrc={profileImageUrl ?? url} src={bannerImageUrl ?? url} />
     </div>
   );
 };
diff --git a/src/features/projects/components/ProjectDetails.tsx b/src/features/projects/components/ProjectDetails.tsx
index b2b1f5b9..102c9ae7 100644
--- a/src/features/projects/components/ProjectDetails.tsx
+++ b/src/features/projects/components/ProjectDetails.tsx
@@ -1,4 +1,5 @@
-import { useMemo, type ReactNode } from "react";
+import clsx from "clsx";
+import { type ReactNode } from "react";
 
 import { Navigation } from "~/components/ui/Navigation";
 import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
@@ -15,37 +16,32 @@ export interface IProjectDetailsProps {
   action?: ReactNode;
   projectId?: string;
   attestation?: Attestation;
+  disabled?: boolean;
 }
 
 const ProjectDetails = ({
   projectId = "",
   attestation = undefined,
   action = undefined,
+  disabled = false,
 }: IProjectDetailsProps): JSX.Element => {
   const metadata = useProjectMetadata(attestation?.metadataPtr);
 
-  const { bio, websiteUrl, payoutAddress, fundingSources } = metadata.data ?? {};
-
-  const github = useMemo(
-    () =>
-      metadata.data?.contributionLinks
-        ? metadata.data.contributionLinks.find((l) => l.type === "GITHUB_REPO")
-        : undefined,
-    [metadata, useProjectMetadata],
-  );
+  const { bio, websiteUrl, payoutAddress, github, twitter, fundingSources, profileImageUrl, bannerImageUrl } =
+    metadata.data ?? {};
 
   return (
-    <div className="relative">
+    <div className={clsx("relative", disabled && "opacity-30")}>
       <div className="mb-7">
         <Navigation projectName={attestation?.name ?? "project name"} />
       </div>
 
       <div className="overflow-hidden rounded-3xl">
-        <ProjectBanner profileId={attestation?.recipient} size="lg" />
+        <ProjectBanner size="lg" url={bannerImageUrl} />
       </div>
 
       <div className="mb-8 flex items-end gap-4">
-        <ProjectAvatar className="-mt-20 ml-8" profileId={attestation?.recipient} rounded="full" size="lg" />
+        <ProjectAvatar className="-mt-20 ml-8" rounded="full" size="lg" url={profileImageUrl} />
       </div>
 
       <div className="flex items-center justify-between">
@@ -54,7 +50,7 @@ const ProjectDetails = ({
         <VotingWidget projectId={projectId} />
       </div>
 
-      <ProjectContacts author={payoutAddress} github={github?.url} website={websiteUrl} />
+      <ProjectContacts author={payoutAddress} github={github} twitter={twitter} website={websiteUrl} />
 
       <p className="text-gray-400">{bio}</p>
 
diff --git a/src/features/projects/components/ProjectItem.tsx b/src/features/projects/components/ProjectItem.tsx
index 82a832ed..3326e3b6 100644
--- a/src/features/projects/components/ProjectItem.tsx
+++ b/src/features/projects/components/ProjectItem.tsx
@@ -19,20 +19,25 @@ import { ProjectBanner } from "./ProjectBanner";
 export interface IProjectItemProps {
   attestation: Attestation;
   isLoading: boolean;
-  state: EProjectState;
-  action: (e: Event) => void;
+  state?: EProjectState;
+  action?: (e: Event) => void;
 }
 
-export const ProjectItem = ({ attestation, isLoading, state, action }: IProjectItemProps): JSX.Element => {
+export const ProjectItem = ({
+  attestation,
+  isLoading,
+  state = undefined,
+  action = undefined,
+}: IProjectItemProps): JSX.Element => {
   const metadata = useProjectMetadata(attestation.metadataPtr);
   const appState = useAppState();
 
   return (
     <article className="group rounded-xl bg-white shadow-lg hover:shadow-sm" data-testid={`project-${attestation.id}`}>
       <div className="opacity-70 transition-opacity group-hover:opacity-100">
-        <ProjectBanner profileId={attestation.recipient} />
+        <ProjectBanner url={metadata.data?.bannerImageUrl} />
 
-        <ProjectAvatar className="-mt-8 ml-4" profileId={attestation.recipient} rounded="full" />
+        <ProjectAvatar className="-mt-8 ml-4" rounded="full" url={metadata.data?.profileImageUrl} />
       </div>
 
       <div className="p-4 pt-2">
@@ -50,7 +55,7 @@ export const ProjectItem = ({ attestation, isLoading, state, action }: IProjectI
           <ImpactCategories tags={metadata.data?.impactCategory} />
         </Skeleton>
 
-        {!isLoading && appState === EAppState.VOTING && (
+        {!isLoading && state && action && appState === EAppState.VOTING && (
           <div className="flex justify-end pt-6">
             <Skeleton>
               {state === EProjectState.DEFAULT && (
diff --git a/src/features/projects/components/Projects.tsx b/src/features/projects/components/Projects.tsx
index 07fa3eb7..17300d87 100644
--- a/src/features/projects/components/Projects.tsx
+++ b/src/features/projects/components/Projects.tsx
@@ -1,9 +1,11 @@
 import clsx from "clsx";
 import Link from "next/link";
 import { useCallback } from "react";
+import { FiAlertCircle } from "react-icons/fi";
 
 import { InfiniteLoading } from "~/components/InfiniteLoading";
 import { SortFilter } from "~/components/SortFilter";
+import { StatusBar } from "~/components/StatusBar";
 import { useBallot } from "~/contexts/Ballot";
 import { useMaci } from "~/contexts/Maci";
 import { useResults } from "~/hooks/useResults";
@@ -16,8 +18,9 @@ import { EProjectState } from "../types";
 import { ProjectItem, ProjectItemAwarded } from "./ProjectItem";
 
 export const Projects = (): JSX.Element => {
-  const projects = useSearchProjects();
   const appState = useAppState();
+  const projects = useSearchProjects({ needApproval: appState !== EAppState.APPLICATION });
+
   const { pollData, pollId, isRegistered } = useMaci();
   const { addToBallot, removeFromBallot, ballotContains, ballot } = useBallot();
   const results = useResults(pollData);
@@ -62,6 +65,18 @@ export const Projects = (): JSX.Element => {
 
   return (
     <div>
+      {appState === EAppState.APPLICATION && (
+        <StatusBar
+          content={
+            <div className="flex items-center gap-2">
+              <FiAlertCircle className="h-4 w-4" />
+              Voting is enabled until Registration period ends.
+            </div>
+          }
+          status="default"
+        />
+      )}
+
       <div className="flex justify-between">
         <h3>Projects</h3>
 
diff --git a/src/features/projects/hooks/useProjects.ts b/src/features/projects/hooks/useProjects.ts
index 5910bc53..ff45f0a9 100644
--- a/src/features/projects/hooks/useProjects.ts
+++ b/src/features/projects/hooks/useProjects.ts
@@ -10,6 +10,11 @@ import type { UseTRPCInfiniteQueryResult, UseTRPCQueryResult } from "@trpc/react
 import type { Ballot } from "~/features/ballot/types";
 import type { Attestation } from "~/utils/fetchAttestations";
 
+interface IUseSearchProjectsProps {
+  filterOverride?: Partial<Filter>;
+  needApproval?: boolean;
+}
+
 export function useProjectById(id: string): UseTRPCQueryResult<Attestation[], unknown> {
   return api.projects.get.useQuery({ ids: [id] }, { enabled: Boolean(id) });
 }
@@ -19,13 +24,14 @@ export function useProjectsById(ids: string[]): UseTRPCQueryResult<Attestation[]
 }
 
 const seed = 0;
-export function useSearchProjects(
-  filterOverride?: Partial<Filter>,
-): UseTRPCInfiniteQueryResult<Attestation[], unknown, unknown> {
+export function useSearchProjects({
+  filterOverride = {},
+  needApproval = true,
+}: IUseSearchProjectsProps): UseTRPCInfiniteQueryResult<Attestation[], unknown, unknown> {
   const { ...filter } = useFilter();
 
   return api.projects.search.useInfiniteQuery(
-    { seed, ...filter, ...filterOverride },
+    { seed, ...filter, ...filterOverride, needApproval },
     {
       getNextPageParam: (_, pages) => pages.length,
     },
diff --git a/src/features/voters/components/VotersList.tsx b/src/features/voters/components/VotersList.tsx
index db0e57fb..60ec4188 100644
--- a/src/features/voters/components/VotersList.tsx
+++ b/src/features/voters/components/VotersList.tsx
@@ -13,11 +13,11 @@ export const VotersList = (): JSX.Element => {
   }
   return (
     <div className="space-y-1">
-      {(
-        data ??
-        Array(5)
-          .fill(0)
-          .map((_, i) => ({ recipient: i }))
+      {(data
+        ? data.filter(
+            ({ recipient }, index, array) => array.findIndex((item) => item.recipient === recipient) === index,
+          )
+        : []
       ).map((voter) => (
         <div key={voter.recipient}>
           <Skeleton className="min-h-4 w-96" isLoading={isLoading}>
diff --git a/src/layouts/BaseLayout.tsx b/src/layouts/BaseLayout.tsx
index 7bd04d28..76a05235 100644
--- a/src/layouts/BaseLayout.tsx
+++ b/src/layouts/BaseLayout.tsx
@@ -130,7 +130,7 @@ export const BaseLayout = ({
         <MainContainer type={type}>
           {sidebar === "left" ? wrappedSidebar : null}
 
-          <div className="w-full min-w-0 pb-24">{children}</div>
+          <div className="w-full pb-24">{children}</div>
 
           {sidebar === "right" ? wrappedSidebar : null}
         </MainContainer>
diff --git a/src/pages/applications/[projectId]/index.tsx b/src/pages/applications/[projectId]/index.tsx
deleted file mode 100644
index 89bfe41d..00000000
--- a/src/pages/applications/[projectId]/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { type GetServerSideProps } from "next";
-
-import ApproveButton from "~/features/applications/components/ApproveButton";
-import ProjectDetails from "~/features/projects/components/ProjectDetails";
-import { useProjectById } from "~/features/projects/hooks/useProjects";
-import { Layout } from "~/layouts/DefaultLayout";
-
-export interface IApplicationDetailsPageProps {
-  projectId?: string;
-}
-
-const ApplicationDetailsPage = ({ projectId = "" }: IApplicationDetailsPageProps): JSX.Element => {
-  const projects = useProjectById(projectId);
-
-  return (
-    <Layout title={projects.data?.[0]?.name}>
-      <ProjectDetails action={<ApproveButton projectIds={[projectId]} />} attestation={projects.data?.[0]} />
-    </Layout>
-  );
-};
-
-export default ApplicationDetailsPage;
-
-export const getServerSideProps: GetServerSideProps = async ({ query: { projectId } }) =>
-  Promise.resolve({ props: { projectId } });
diff --git a/src/pages/applications/confirmation.tsx b/src/pages/applications/confirmation.tsx
new file mode 100644
index 00000000..fe301d47
--- /dev/null
+++ b/src/pages/applications/confirmation.tsx
@@ -0,0 +1,51 @@
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+import { FiAlertCircle } from "react-icons/fi";
+
+import { Alert } from "~/components/ui/Alert";
+import { useApplicationByTxHash } from "~/features/applications/hooks/useApplicationByTxHash";
+import { ProjectItem } from "~/features/projects/components/ProjectItem";
+import { Layout } from "~/layouts/DefaultLayout";
+import { useAppState } from "~/utils/state";
+import { EAppState } from "~/utils/types";
+
+const ConfirmProjectPage = (): JSX.Element => {
+  const state = useAppState();
+
+  const searchParams = useSearchParams();
+  const txHash = searchParams.get("txHash");
+  const project = useApplicationByTxHash(txHash ?? "");
+
+  const attestation = useMemo(() => project.data, [project]);
+
+  return (
+    <Layout>
+      <div className="flex w-full justify-center">
+        <div className="flex flex-col items-center gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
+          <h2 className="font-mono uppercase">Your project application has been submitted!</h2>
+
+          <p className="text-gray-400">
+            Thank you for submitting your project application. Our team is now reviewing it.
+          </p>
+
+          <p className="flex gap-1 text-blue-400">
+            <FiAlertCircle className="h-4 w-4" />
+
+            <i className="text-sm">Applications can be edited and approved until the Registration period ends.</i>
+          </p>
+
+          {state !== EAppState.APPLICATION && <Alert title="Application period has ended" variant="info" />}
+
+          {attestation && (
+            <Link href={`/projects/${attestation.id}`}>
+              <ProjectItem attestation={attestation} isLoading={false} />
+            </Link>
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default ConfirmProjectPage;
diff --git a/src/pages/applications/new.tsx b/src/pages/applications/new.tsx
index ad9f3e38..344c4b62 100644
--- a/src/pages/applications/new.tsx
+++ b/src/pages/applications/new.tsx
@@ -1,33 +1,43 @@
-import { useAccount } from "wagmi";
+import { FiAlertCircle } from "react-icons/fi";
 
 import { Alert } from "~/components/ui/Alert";
-import { Markdown } from "~/components/ui/Markdown";
 import { ApplicationForm } from "~/features/applications/components/ApplicationForm";
 import { Layout } from "~/layouts/DefaultLayout";
 import { useAppState } from "~/utils/state";
 import { EAppState } from "~/utils/types";
 
-const APPLICATION_TEXT = `
-### New Application
-Fill out this form to create an application for your project. It will
-then be reviewed by our admins. 
-
-Your progress is saved locally so you can return to this page to resume your application.
-`;
-
 const NewProjectPage = (): JSX.Element => {
-  const { address } = useAccount();
   const state = useAppState();
 
   return (
     <Layout>
-      <Markdown className="mb-8">{APPLICATION_TEXT}</Markdown>
+      <div className="flex w-full justify-center">
+        <div className="flex flex-col gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
+          <h3>New Application</h3>
+
+          <p className="text-gray-400">
+            <span className="inline-block">
+              Fill out this form to create an application for your project. It will then be reviewed by our admins.
+            </span>
+
+            <span className="inline-block">
+              Your progress is saved locally so you can return to this page to resume your application.
+            </span>
+          </p>
+
+          <p className="flex gap-1 text-blue-400">
+            <FiAlertCircle className="h-4 w-4" />
+
+            <i className="text-sm">Applications can be edited and approved until the Registration period ends.</i>
+          </p>
 
-      {state !== EAppState.APPLICATION ? (
-        <Alert title="Application period has ended" variant="info" />
-      ) : (
-        <ApplicationForm address={address} />
-      )}
+          {state !== EAppState.APPLICATION ? (
+            <Alert title="Application period has ended" variant="info" />
+          ) : (
+            <ApplicationForm />
+          )}
+        </div>
+      </div>
     </Layout>
   );
 };
diff --git a/src/pages/projects/[projectId]/Project.tsx b/src/pages/projects/[projectId]/Project.tsx
index 6077238c..caf6ef72 100644
--- a/src/pages/projects/[projectId]/Project.tsx
+++ b/src/pages/projects/[projectId]/Project.tsx
@@ -1,8 +1,13 @@
 import { type GetServerSideProps } from "next";
+import { useMemo } from "react";
 
+import { ReviewBar } from "~/features/applications/components/ReviewBar";
+import { useApprovedApplications } from "~/features/applications/hooks/useApprovedApplications";
 import ProjectDetails from "~/features/projects/components/ProjectDetails";
 import { useProjectById } from "~/features/projects/hooks/useProjects";
 import { LayoutWithSidebar } from "~/layouts/DefaultLayout";
+import { useAppState } from "~/utils/state";
+import { EAppState } from "~/utils/types";
 
 export interface IProjectDetailsProps {
   projectId?: string;
@@ -10,11 +15,22 @@ export interface IProjectDetailsProps {
 
 const ProjectDetailsPage = ({ projectId = "" }: IProjectDetailsProps): JSX.Element => {
   const projects = useProjectById(projectId);
+  const approved = useApprovedApplications();
   const { name } = projects.data?.[0] ?? {};
+  const appState = useAppState();
+
+  const approvedById = useMemo(
+    () => new Map(approved.data?.map(({ refUID }) => [refUID, true]) ?? []),
+    [approved.data],
+  );
+
+  const disabled = useMemo(() => approvedById.get(projectId), [approvedById, projectId]);
 
   return (
     <LayoutWithSidebar eligibilityCheck showBallot showInfo sidebar="left" title={name}>
-      <ProjectDetails attestation={projects.data?.[0]} projectId={projectId} />
+      {appState === EAppState.APPLICATION && <ReviewBar projectId={projectId} />}
+
+      <ProjectDetails attestation={projects.data?.[0]} disabled={!disabled} projectId={projectId} />
     </LayoutWithSidebar>
   );
 };
diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
index 0ca4acca..1b6b13dd 100644
--- a/src/pages/signup/index.tsx
+++ b/src/pages/signup/index.tsx
@@ -11,10 +11,13 @@ import { config } from "~/config";
 import { useMaci } from "~/contexts/Maci";
 import { FAQList } from "~/features/signup/components/FaqList";
 import { Layout } from "~/layouts/DefaultLayout";
+import { useAppState } from "~/utils/state";
+import { EAppState } from "~/utils/types";
 
 const SignupPage = (): JSX.Element => {
   const { isConnected } = useAccount();
   const { isRegistered } = useMaci();
+  const appState = useAppState();
 
   return (
     <Layout type="home">
@@ -33,7 +36,15 @@ const SignupPage = (): JSX.Element => {
           <span>{config.resultsAt && format(config.resultsAt, "d MMMM, yyyy")}</span>
         </p>
 
-        {isConnected && isRegistered && (
+        {!isConnected && <ConnectButton />}
+
+        {isConnected && appState === EAppState.APPLICATION && (
+          <Button size="auto" variant="primary">
+            <Link href="/applications/new">Start Application</Link>
+          </Button>
+        )}
+
+        {isConnected && isRegistered && appState === EAppState.VOTING && (
           <Button size="auto" variant="primary">
             <Link href="/projects">View projects</Link>
           </Button>
@@ -41,8 +52,6 @@ const SignupPage = (): JSX.Element => {
 
         {isConnected && !isRegistered && <JoinButton />}
 
-        {!isConnected && <ConnectButton />}
-
         <div className="my-8">
           <Info size="default" />
         </div>
diff --git a/src/server/api/routers/projects.ts b/src/server/api/routers/projects.ts
index 84278fac..22506e46 100644
--- a/src/server/api/routers/projects.ts
+++ b/src/server/api/routers/projects.ts
@@ -32,6 +32,14 @@ export const projectsRouter = createTRPCRouter({
     });
   }),
 
+  getByTransactionId: publicProcedure
+    .input(z.object({ transactionId: z.string() }))
+    .query(async ({ input: { transactionId } }) =>
+      fetchAttestations([eas.schemas.metadata], {
+        where: { txid: { equals: transactionId } },
+      }).then((applications) => applications[0]),
+    ),
+
   search: publicProcedure.input(FilterSchema).query(async ({ input }) => {
     const filters = [
       createDataFilter("type", "bytes32", "application"),
@@ -42,23 +50,34 @@ export const projectsRouter = createTRPCRouter({
       filters.push(createSearchFilter(input.search));
     }
 
-    return fetchAttestations([eas.schemas.approval], {
-      where: {
-        attester: { equals: config.admin },
-        ...createDataFilter("type", "bytes32", "application"),
-      },
-    }).then((attestations = []) => {
-      const approvedIds = attestations.map(({ refUID }) => refUID).filter(Boolean);
-
-      return fetchAttestations([eas.schemas.metadata], {
-        take: input.limit,
-        skip: input.cursor * input.limit,
-        orderBy: [createOrderBy(input.orderBy, input.sortOrder)],
+    if (input.needApproval) {
+      return fetchAttestations([eas.schemas.approval], {
         where: {
-          id: { in: approvedIds },
-          AND: filters,
+          attester: { equals: config.admin },
+          ...createDataFilter("type", "bytes32", "application"),
         },
+      }).then((attestations = []) => {
+        const approvedIds = attestations.map(({ refUID }) => refUID).filter(Boolean);
+
+        return fetchAttestations([eas.schemas.metadata], {
+          take: input.limit,
+          skip: input.cursor * input.limit,
+          orderBy: [createOrderBy(input.orderBy, input.sortOrder)],
+          where: {
+            id: { in: approvedIds },
+            AND: filters,
+          },
+        });
       });
+    }
+
+    return fetchAttestations([eas.schemas.metadata], {
+      take: input.limit,
+      skip: input.cursor * input.limit,
+      orderBy: [createOrderBy(input.orderBy, input.sortOrder)],
+      where: {
+        attester: { equals: config.admin },
+      },
     });
   }),
 
diff --git a/src/utils/fetchAttestations.ts b/src/utils/fetchAttestations.ts
index b714d847..dfc5b860 100644
--- a/src/utils/fetchAttestations.ts
+++ b/src/utils/fetchAttestations.ts
@@ -16,6 +16,7 @@ export interface AttestationWithMetadata {
   time: number;
   decodedDataJson: string;
   schemaId: string;
+  txid: string;
 }
 
 export type Attestation = Omit<AttestationWithMetadata, "decodedDataJson"> & {
@@ -35,6 +36,7 @@ interface MatchWhere {
   refUID?: MatchFilter;
   schemaId?: MatchFilter;
   time?: MatchFilter;
+  txid?: MatchFilter;
   decodedDataJson?: { contains: string };
   AND?: MatchWhere[];
 }
@@ -57,7 +59,7 @@ const AttestationsQuery = `
       recipient
       revoked
       schemaId
-      time
+      txid
       time
     }
   }