diff --git a/apps/www/components/buttons/AddAssetButton.tsx b/apps/www/components/buttons/AddAssetButton.tsx
index e791e201..4ae6e52d 100644
--- a/apps/www/components/buttons/AddAssetButton.tsx
+++ b/apps/www/components/buttons/AddAssetButton.tsx
@@ -1,123 +1,25 @@
-import {
-  Bitcoin,
-  Building,
-  Car,
-  Folder,
-  GitGraph,
-  Hourglass,
-  MoreHorizontal,
-  Wallet,
-} from "lucide-react";
+import type { FC, ReactNode } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "../ui/dialog";
 
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+interface FlowModalProps {
+  triggerLabel: string;
+  children: ReactNode;
+}
 
-export function AddAssetButton() {
+export const AddAssetButton: FC<FlowModalProps> = ({
+  triggerLabel,
+  children,
+}) => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline">Add account</Button>
+        <Button variant="outline">{triggerLabel}</Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Add new account</DialogTitle>
-          <DialogDescription>Add the account type you want.</DialogDescription>
-        </DialogHeader>
-        <RadioGroup
-          defaultValue="realestate"
-          className="mb-4 grid grid-cols-3 gap-4"
-        >
-          <div>
-            <RadioGroupItem
-              value="realestate"
-              id="realestate"
-              className="peer sr-only"
-            />
-            <Label
-              htmlFor="realestate"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-checked:border-primary"
-            >
-              <Building className="mb-3 h-6 w-6" />
-              Real estate
-            </Label>
-          </div>
-          <div>
-            <RadioGroupItem
-              value="paypal"
-              id="paypal"
-              className="peer sr-only"
-            />
-            <Label
-              htmlFor="paypal"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-checked:border-primary"
-            >
-              <GitGraph className="mb-3 h-6 w-6" />
-              Investment
-            </Label>
-          </div>
-          <div>
-            <RadioGroupItem value="apple" id="apple" className="peer sr-only" />
-            <Label
-              htmlFor="apple"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-checked:border-primary"
-            >
-              <Folder className="mb-3 h-6 w-6" />
-              Input
-            </Label>
-          </div>
-        </RadioGroup>
-        <RadioGroup defaultValue="crypto" className="grid grid-cols-3 gap-4">
-          <div>
-            <RadioGroupItem
-              value="crypto"
-              id="crypto"
-              className="peer sr-only"
-            />
-            <Label
-              htmlFor="crypto"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-checked:border-primary"
-            >
-              <Wallet className="mb-3 h-6 w-6" />
-              Crypto
-            </Label>
-          </div>
-          <div>
-            <RadioGroupItem value="car" id="car" className="peer sr-only" />
-            <Label
-              htmlFor="car"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-checked:border-primary"
-            >
-              <Car className="mb-3 h-6 w-6" />
-              Car
-            </Label>
-          </div>
-          <div>
-            <RadioGroupItem value="misc" id="misc" className="peer sr-only" />
-            <Label
-              htmlFor="misc"
-              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-checked:border-primary"
-            >
-              <MoreHorizontal className="mb-3 h-6 w-6" />
-              Misc
-            </Label>
-          </div>
-        </RadioGroup>
-        {/* <DialogFooter>
-          <Button type="submit">Save changes</Button>
-        </DialogFooter> */}
+      <DialogContent className="sm:max-w-[425px]" showCloseButton={false}>
+        {children}
       </DialogContent>
     </Dialog>
   );
-}
+};
diff --git a/apps/www/components/forms/account-form/car-fields.tsx b/apps/www/components/forms/account-form/car-fields.tsx
new file mode 100644
index 00000000..6c011e03
--- /dev/null
+++ b/apps/www/components/forms/account-form/car-fields.tsx
@@ -0,0 +1,12 @@
+import { useFormContext } from "react-hook-form";
+
+import { CommonAccountFields } from "./common-account-fields";
+
+export const CarFormFields = () => {
+  const { control } = useFormContext();
+  return (
+    <>
+      <CommonAccountFields />
+    </>
+  );
+};
diff --git a/apps/www/components/forms/account-form/common-account-fields.tsx b/apps/www/components/forms/account-form/common-account-fields.tsx
new file mode 100644
index 00000000..b13eea7b
--- /dev/null
+++ b/apps/www/components/forms/account-form/common-account-fields.tsx
@@ -0,0 +1,98 @@
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useFormContext } from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export const CommonAccountFields = () => {
+  const { control } = useFormContext();
+  return (
+    <>
+      {/* Purchase Date Field  */}
+      <div className="grid gap-2">
+        <FormField
+          control={control}
+          name="purchaseDate"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Purchase Date</FormLabel>
+              <FormControl>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant={"outline"}
+                        className={cn(
+                          "justify-start text-left font-normal",
+                          !field.value && "text-muted-foreground",
+                        )}
+                      >
+                        {field.value ? (
+                          format(field.value, "PPP")
+                        ) : (
+                          <span>Pick a date</span>
+                        )}
+                        <CalendarIcon className="ml-2 h-4 w-4" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <Calendar
+                      mode="single"
+                      selected={field.value}
+                      onSelect={field.onChange}
+                      disabled={(date) =>
+                        date > new Date() || date < new Date("1900-01-01")
+                      }
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </div>
+      {/* Purchase Value Field */}
+      <FormField
+        control={control}
+        name="purchaseValue"
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <FormLabel>Purchase Value</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="Purchase Value..." />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      {/* Current Value Field */}
+      <FormField
+        control={control}
+        name="currentValue"
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <FormLabel>Current Value</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="Current Value..." />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    </>
+  );
+};
diff --git a/apps/www/components/forms/account-form/crypto-fields.tsx b/apps/www/components/forms/account-form/crypto-fields.tsx
new file mode 100644
index 00000000..31b168b8
--- /dev/null
+++ b/apps/www/components/forms/account-form/crypto-fields.tsx
@@ -0,0 +1,80 @@
+import { useFormContext } from "react-hook-form";
+
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+
+import { CommonAccountFields } from "./common-account-fields";
+
+export const CryptoFormFields = () => {
+  const { control } = useFormContext();
+  return (
+    <>
+      {/* Currency Name Field */}
+      <div className="grid gap-2">
+        <FormField
+          control={control}
+          name="currencyName"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Currency Name</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Currency Name..." />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </div>
+      {/* Wallet Address */}
+      <div className="grid gap-2">
+        <FormField
+          control={control}
+          name="walletAddress"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Wallet Address</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Wallet Address..." />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </div>
+      {/* Conversion Rate (at Purchase) */}
+      <div className="grid gap-2">
+        <FormField
+          control={control}
+          name="conversionRate"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Conversion Rate</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Conversion Rate..." />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </div>
+      {/* Current Conversion Rate */}
+      <div className="grid gap-2">
+        <FormField
+          control={control}
+          name="currentConversionRate"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Current Conversion Rate</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Current Conversion Rate..." />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </div>
+      <CommonAccountFields />
+    </>
+  );
+};
diff --git a/apps/www/components/forms/account-form/index.tsx b/apps/www/components/forms/account-form/index.tsx
new file mode 100644
index 00000000..e733ab35
--- /dev/null
+++ b/apps/www/components/forms/account-form/index.tsx
@@ -0,0 +1,45 @@
+import { type FC } from "react";
+import { type UseFormReturn } from "react-hook-form";
+
+import { type FormFields } from "@/hooks/use-flow-modal-state";
+import { Form } from "@/components/ui/form";
+import { type AccountType } from "@/components/modals/add-asset-flow";
+
+import { CarFormFields } from "./car-fields";
+import { CryptoFormFields } from "./crypto-fields";
+import { InputFormFields } from "./input-fields";
+import { InvestmentFormFields } from "./investment-fields";
+import { MiscFormFields } from "./misc-fields";
+import { RealEstateFormFields } from "./real-estate-fields";
+
+const generateFormFields = (accountType: AccountType) => {
+  switch (accountType) {
+    case "real-estate":
+      return <RealEstateFormFields />;
+    case "crypto":
+      return <CryptoFormFields />;
+    case "investment":
+      return <InvestmentFormFields />;
+    case "input":
+      return <InputFormFields />;
+    case "car":
+      return <CarFormFields />;
+    case "misc":
+      return <MiscFormFields />;
+    default:
+      return null;
+  }
+};
+
+interface AccountFormProps {
+  type: AccountType;
+  form: UseFormReturn<FormFields>;
+}
+
+export const AccountForm: FC<AccountFormProps> = ({ type, form }) => {
+  return (
+    <Form {...form}>
+      <form className="space-y-3">{generateFormFields(type)}</form>
+    </Form>
+  );
+};
diff --git a/apps/www/components/forms/account-form/input-fields.tsx b/apps/www/components/forms/account-form/input-fields.tsx
new file mode 100644
index 00000000..f9b255b8
--- /dev/null
+++ b/apps/www/components/forms/account-form/input-fields.tsx
@@ -0,0 +1,12 @@
+import { useFormContext } from "react-hook-form";
+
+import { CommonAccountFields } from "./common-account-fields";
+
+export const InputFormFields = () => {
+  const { control } = useFormContext();
+  return (
+    <>
+      <CommonAccountFields />
+    </>
+  );
+};
diff --git a/apps/www/components/forms/account-form/investment-fields.tsx b/apps/www/components/forms/account-form/investment-fields.tsx
new file mode 100644
index 00000000..431924b9
--- /dev/null
+++ b/apps/www/components/forms/account-form/investment-fields.tsx
@@ -0,0 +1,12 @@
+import { useFormContext } from "react-hook-form";
+
+import { CommonAccountFields } from "./common-account-fields";
+
+export const InvestmentFormFields = () => {
+  const { control } = useFormContext();
+  return (
+    <>
+      <CommonAccountFields />
+    </>
+  );
+};
diff --git a/apps/www/components/forms/account-form/misc-fields.tsx b/apps/www/components/forms/account-form/misc-fields.tsx
new file mode 100644
index 00000000..9d6b822c
--- /dev/null
+++ b/apps/www/components/forms/account-form/misc-fields.tsx
@@ -0,0 +1,12 @@
+import { useFormContext } from "react-hook-form";
+
+import { CommonAccountFields } from "./common-account-fields";
+
+export const MiscFormFields = () => {
+  const { control } = useFormContext();
+  return (
+    <>
+      <CommonAccountFields />
+    </>
+  );
+};
diff --git a/apps/www/components/forms/account-form/real-estate-fields.tsx b/apps/www/components/forms/account-form/real-estate-fields.tsx
new file mode 100644
index 00000000..4084fc2d
--- /dev/null
+++ b/apps/www/components/forms/account-form/real-estate-fields.tsx
@@ -0,0 +1,81 @@
+import { useFormContext } from "react-hook-form";
+
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+
+import { CommonAccountFields } from "./common-account-fields";
+
+export const RealEstateFormFields = () => {
+  const { control } = useFormContext();
+  return (
+    <>
+      {/* Address Field  */}
+      <div className="grid gap-2">
+        <FormField
+          control={control}
+          name="address"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Address</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Address..." />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </div>
+      {/* City Field */}
+      <div className="grid gap-2">
+        <FormField
+          control={control}
+          name="city"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>City</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="City..." />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </div>
+      {/* State & Postal Code Fields */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="grid gap-2">
+          <FormField
+            control={control}
+            name="state"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>State</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="State..." />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="grid gap-2">
+          <FormField
+            control={control}
+            name="postalCode"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Postal Code</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="Postal Code..." />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </div>
+      </div>
+      <CommonAccountFields />
+    </>
+  );
+};
diff --git a/apps/www/components/modals/add-asset-flow/components/account-type-selection.tsx b/apps/www/components/modals/add-asset-flow/components/account-type-selection.tsx
new file mode 100644
index 00000000..497fbb4d
--- /dev/null
+++ b/apps/www/components/modals/add-asset-flow/components/account-type-selection.tsx
@@ -0,0 +1,105 @@
+import { type FC } from "react";
+import {
+  Bitcoin,
+  Building,
+  Car,
+  Folder,
+  GitGraph,
+  MoreHorizontal,
+} from "lucide-react";
+
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+import { type AccountTypeInfo } from "..";
+
+interface AccountTypeSelectionProps {
+  onSelectAccountType: (accountType: AccountTypeInfo) => void;
+}
+
+const accountTypes: AccountTypeInfo[] = [
+  {
+    title: "Real Estate",
+    description: "Add details about your real estate.",
+    type: "real-estate",
+    value: "real-estate",
+    label: "Real Estate",
+    Icon: Building,
+  },
+  {
+    title: "Crypto",
+    description: "Add details about your crypto.",
+    type: "crypto",
+    value: "crypto",
+    label: "Crypto",
+    Icon: Bitcoin,
+  },
+  {
+    title: "Investment",
+    description: "Add details about your investment.",
+    type: "investment",
+    value: "investment",
+    label: "Investment",
+    Icon: GitGraph,
+  },
+  {
+    title: "Input",
+    description: "Add details about your input.",
+    type: "input",
+    value: "input",
+    label: "Input",
+    Icon: Folder,
+  },
+  {
+    title: "Car",
+    description: "Add details about your car.",
+    type: "car",
+    value: "car",
+    label: "Car",
+    Icon: Car,
+  },
+  {
+    title: "Misc",
+    description: "Add details about your misc.",
+    type: "misc",
+    value: "misc",
+    label: "Misc",
+    Icon: MoreHorizontal,
+  },
+];
+
+export const AccountTypeSelection: FC<AccountTypeSelectionProps> = ({
+  onSelectAccountType,
+}) => {
+  const handleSelectAccountType = (selectedValue: string) => {
+    const selectedAccountType = accountTypes.find(
+      (type) => type.value === selectedValue,
+    );
+    if (selectedAccountType) {
+      onSelectAccountType(selectedAccountType);
+    }
+  };
+  return (
+    <RadioGroup
+      className="mb-4 grid grid-cols-3 gap-4"
+      onValueChange={(accountType) => handleSelectAccountType(accountType)}
+    >
+      {accountTypes.map((accountType) => (
+        <div key={accountType.value}>
+          <RadioGroupItem
+            value={accountType.value}
+            id={accountType.value}
+            className="peer sr-only"
+          />
+          <Label
+            htmlFor={accountType.value}
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-checked:border-primary"
+          >
+            <accountType.Icon className="mb-3 h-6 w-6" />
+            {accountType.label}
+          </Label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+};
diff --git a/apps/www/components/modals/add-asset-flow/components/footer.tsx b/apps/www/components/modals/add-asset-flow/components/footer.tsx
new file mode 100644
index 00000000..0915ed62
--- /dev/null
+++ b/apps/www/components/modals/add-asset-flow/components/footer.tsx
@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from "react";
+
+import { DialogFooter } from "@/components/ui/dialog";
+
+interface StepFooterProps {
+  show: boolean;
+  children?: ReactNode;
+}
+
+export const Footer: FC<StepFooterProps> = ({ show, children }) => {
+  if (!show) {
+    return null;
+  }
+
+  return <DialogFooter className="mt-6">{children}</DialogFooter>;
+};
diff --git a/apps/www/components/modals/add-asset-flow/components/header-controls.tsx b/apps/www/components/modals/add-asset-flow/components/header-controls.tsx
new file mode 100644
index 00000000..a3192c76
--- /dev/null
+++ b/apps/www/components/modals/add-asset-flow/components/header-controls.tsx
@@ -0,0 +1,37 @@
+import { type FC } from "react";
+import { ChevronLeft, X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { DialogClose } from "@/components/ui/dialog";
+
+interface HeaderControlsProps {
+  currentStepId: number;
+  goToPreviousStep: () => void;
+}
+
+export const HeaderControls: FC<HeaderControlsProps> = ({
+  currentStepId,
+  goToPreviousStep,
+}) => {
+  return (
+    <div className="flex items-center justify-between">
+      {/* Previous button */}
+      {currentStepId > 0 && (
+        <Button
+          variant="ghost"
+          className="absolute left-4 top-4 h-fit w-fit rounded-sm p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+          aria-label="Return to previous step"
+          onClick={goToPreviousStep}
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="sr-only">Back To Previous Step</span>
+        </Button>
+      )}
+      {/* Close button */}
+      <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogClose>
+    </div>
+  );
+};
diff --git a/apps/www/components/modals/add-asset-flow/index.tsx b/apps/www/components/modals/add-asset-flow/index.tsx
new file mode 100644
index 00000000..3ca68e2a
--- /dev/null
+++ b/apps/www/components/modals/add-asset-flow/index.tsx
@@ -0,0 +1,116 @@
+import { useCallback, useMemo } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { FlowStep, useFlowControl } from "@/hooks/use-flow-control";
+import { useFlowModalState } from "@/hooks/use-flow-modal-state";
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { AccountForm } from "@/components/forms/account-form";
+
+import { AccountTypeSelection } from "./components/account-type-selection";
+import { Footer } from "./components/footer";
+import { HeaderControls } from "./components/header-controls";
+
+export type AccountType =
+  | "real-estate"
+  | "crypto"
+  | "investment"
+  | "input"
+  | "car"
+  | "misc";
+
+export interface AccountTypeInfo {
+  type: AccountType;
+  title: string;
+  description: string;
+  value: string;
+  label: string;
+  Icon: React.ElementType;
+}
+
+export const AddAssetFlow = () => {
+  const { setAccountTypeInfo, accountTypeInfo, form } = useFlowModalState();
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  const handleSelectAccountType = useCallback(
+    (selectedAccountType: AccountTypeInfo) => {
+      setAccountTypeInfo(selectedAccountType);
+      goToNextStep();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const accountFormTitle = accountTypeInfo
+    ? `Add ${accountTypeInfo.title}`
+    : "Step 2";
+  const accountFormDescription = accountTypeInfo
+    ? accountTypeInfo.description
+    : "Description of Step 2";
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  const steps = useMemo<FlowStep[]>(
+    () => [
+      {
+        id: 0,
+        title: "Add new account",
+        description: "Add the account type you want.",
+        component: (
+          <AccountTypeSelection onSelectAccountType={handleSelectAccountType} />
+        ),
+      },
+      {
+        id: 1,
+        title: accountFormTitle,
+        description: accountFormDescription,
+        component: accountTypeInfo ? (
+          <AccountForm type={accountTypeInfo.type} form={form} />
+        ) : null,
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleSelectAccountType, accountFormTitle, accountFormDescription],
+  );
+
+  const { currentStepId, goToNextStep, goToPreviousStep } = useFlowControl({
+    steps,
+  });
+
+  const currentStep = useMemo(
+    () => steps.find((step) => step.id === currentStepId),
+    [steps, currentStepId],
+  );
+
+  return (
+    <>
+      <HeaderControls
+        currentStepId={currentStepId}
+        goToPreviousStep={() => {
+          goToPreviousStep();
+        }}
+      />
+      <DialogHeader>
+        <DialogTitle>{currentStep?.title}</DialogTitle>
+        <DialogDescription>{currentStep?.description}</DialogDescription>
+      </DialogHeader>
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={currentStepId}
+          initial={{ y: 10, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -10, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          {currentStep?.component}
+          <Footer show={currentStepId === steps.length - 1}>
+            <Button>Add Property</Button>
+          </Footer>
+        </motion.div>
+      </AnimatePresence>
+    </>
+  );
+};
diff --git a/apps/www/components/new-dashboard/components/dashboard-1.tsx b/apps/www/components/new-dashboard/components/dashboard-1.tsx
index 4aa23f8b..731dc361 100644
--- a/apps/www/components/new-dashboard/components/dashboard-1.tsx
+++ b/apps/www/components/new-dashboard/components/dashboard-1.tsx
@@ -21,7 +21,6 @@ import {
 } from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
 import {
   ResizableHandle,
   ResizablePanel,
@@ -31,7 +30,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { AddAssetButton } from "@/components/buttons/AddAssetButton";
-import { AddRealEstateButton } from "@/components/buttons/AddRealEstateButton";
+import { AddAssetFlow } from "@/components/modals/add-asset-flow";
 import { WorkspaceSwitcher } from "@/app/(dashboard)/dashboard/_components/workspace-switcher";
 
 import { Mail } from "../data";
@@ -264,8 +263,9 @@ export function Dashboard({
                 <h1 className="text-xl font-bold">Dashboard</h1>
               </div>
               <div className="flex items-center gap-4">
-                <AddAssetButton />
-                <AddRealEstateButton />
+                <AddAssetButton triggerLabel="Add Asset">
+                  <AddAssetFlow />
+                </AddAssetButton>
               </div>
             </div>
 
diff --git a/apps/www/components/ui/dialog.tsx b/apps/www/components/ui/dialog.tsx
index 55952716..0bc888f1 100644
--- a/apps/www/components/ui/dialog.tsx
+++ b/apps/www/components/ui/dialog.tsx
@@ -4,6 +4,8 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 
+
+
 import { cn } from "@/lib/utils";
 
 const Dialog = DialogPrimitive.Root;
@@ -31,8 +33,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+  }
+>(({ className, children, showCloseButton = true, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -44,10 +48,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      {showCloseButton && (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
diff --git a/apps/www/hooks/use-flow-control.ts b/apps/www/hooks/use-flow-control.ts
new file mode 100644
index 00000000..f144b081
--- /dev/null
+++ b/apps/www/hooks/use-flow-control.ts
@@ -0,0 +1,81 @@
+"use client";
+
+import { useCallback, useState, useEffect, type ReactNode } from "react";
+
+export interface FlowStep {
+  id: number;
+  title?: string;
+  description?: string;
+  component: ReactNode;
+}
+
+export interface UseFlowControlProps {
+  // steps is an array of FlowStep objects
+  steps: FlowStep[];
+  // initialStep is the id of the first step
+  initialStep?: number;
+  // onStepChange (event) is a function that is called when the current step changes
+  onStepChange?: (newStepId: number) => void;
+  // onFlowComplete (event) is a function that is called when the flow is complete
+  onFlowComplete?: () => void;
+}
+
+export function useFlowControl({
+  steps,
+  initialStep = 0,
+  onStepChange,
+  onFlowComplete,
+}: UseFlowControlProps) {
+  const [currentStepId, setCurrentStepId] = useState<number>(initialStep);
+  const [isFlowComplete, setIsFlowComplete] = useState<boolean>(false);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  const goToNextStep = useCallback(() => {
+    const nextStepIndex = currentStepId + 1;
+    const nextStepId = steps[nextStepIndex]?.id;
+    if (nextStepIndex < steps.length && nextStepId !== undefined) {
+      setCurrentStepId(nextStepId);
+      onStepChange?.(nextStepId);
+    }
+  }, [steps, currentStepId, onStepChange]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  const goToPreviousStep = useCallback(() => {
+    const prevStepIndex = currentStepId - 1;
+    const prevStepId = steps[prevStepIndex]?.id;
+    if (prevStepIndex >= 0 && prevStepId !== undefined) {
+      setCurrentStepId(prevStepId);
+      onStepChange?.(prevStepId);
+    }
+  }, [steps, currentStepId, onStepChange]);
+
+  const setCurrentStep = (stepId: number) => {
+    setCurrentStepId(stepId);
+    onStepChange?.(stepId);
+  };
+
+  const resetFlow = () => {
+    setCurrentStepId(initialStep);
+    setIsFlowComplete(false);
+  };
+
+  const completeFlow = () => setIsFlowComplete(true);
+
+  useEffect(() => {
+    if (isFlowComplete) {
+      onFlowComplete?.();
+    }
+  }, [isFlowComplete, onFlowComplete]);
+
+  return {
+    currentStepId,
+    isFlowComplete,
+    goToNextStep,
+    goToPreviousStep,
+    setCurrentStep,
+    resetFlow,
+    completeFlow,
+  };
+}
+
+export type UseFlowControlReturn = ReturnType<typeof useFlowControl>;
diff --git a/apps/www/hooks/use-flow-modal-state.ts b/apps/www/hooks/use-flow-modal-state.ts
new file mode 100644
index 00000000..3ed16b79
--- /dev/null
+++ b/apps/www/hooks/use-flow-modal-state.ts
@@ -0,0 +1,59 @@
+"use client";
+
+import { AccountType, AccountTypeInfo } from '@/components/modals/add-asset-flow';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const baseSchema = z.object({
+  purchaseDate: z.date(),
+  purchaseValue: z.string(),
+  currentValue: z.string(),
+});
+
+export type BaseFormFields = z.infer<typeof baseSchema>;
+
+const realEstateSchema = baseSchema.extend({
+  address: z.string(),
+  city: z.string(),
+  state: z.string(),
+  postalCode: z.string(),
+});
+
+export type RealEstateFormFields = z.infer<typeof realEstateSchema>;
+
+export type FormFields = BaseFormFields | RealEstateFormFields;
+
+const generateFormSchema = (accountType?: AccountType) => {
+  switch (accountType) {
+    case 'real-estate':
+      return realEstateSchema;
+    default:
+      return baseSchema;
+  }
+};
+
+export function useFlowModalState() {
+  const [accountTypeInfo, setAccountTypeInfo] = useState<AccountTypeInfo | undefined>();
+  const currentFormSchema = generateFormSchema(accountTypeInfo?.type);
+  const form = useForm<z.infer<typeof currentFormSchema>>({
+    resolver: zodResolver(currentFormSchema),
+    defaultValues: {
+      purchaseDate: new Date(),
+      purchaseValue: "",
+      currentValue: "",
+    }
+  });
+
+  const submitFlowData = () => {
+    console.log('Submitting flow data');
+  };
+
+  return {
+    form,
+    submitFlowData,
+    accountTypeInfo,
+    setAccountTypeInfo,
+  }
+}
diff --git a/apps/www/package.json b/apps/www/package.json
index d44ffe07..7e528a35 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -82,6 +82,7 @@
     "date-fns": "^2.30.0",
     "dinero.js": "2.0.0-alpha.14",
     "dotenv-cli": "^7.3.0",
+    "framer-motion": "^11.0.8",
     "jotai": "^2.6.1",
     "lucide-react": "^0.314.0",
     "ms": "^2.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 249ea599..dcc11913 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -212,6 +212,9 @@ importers:
       dotenv-cli:
         specifier: ^7.3.0
         version: 7.3.0
+      framer-motion:
+        specifier: ^11.0.8
+        version: 11.0.8(react-dom@18.2.0)(react@18.2.0)
       jotai:
         specifier: ^2.6.1
         version: 2.6.3(@types/react@18.2.33)(react@18.2.0)
@@ -8791,6 +8794,24 @@ packages:
       '@emotion/is-prop-valid': 0.8.8
     dev: false
 
+  /framer-motion@11.0.8(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-1KSGNuqe1qZkS/SWQlDnqK2VCVzRVEoval379j0FiUBJAZoqgwyvqFkfvJbgW2IPFo4wX16K+M0k5jO23lCIjA==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tslib: 2.6.2
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+    dev: false
+
   /fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
     dev: false