diff --git a/app/bun.lockb b/app/bun.lockb
index fe1d36df..1e6814e1 100755
Binary files a/app/bun.lockb and b/app/bun.lockb differ
diff --git a/app/common/helpers/index.ts b/app/common/helpers/index.ts
index d74b7004..fe870ba5 100644
--- a/app/common/helpers/index.ts
+++ b/app/common/helpers/index.ts
@@ -65,3 +65,35 @@ export function isOnlookInDoc(doc: Document): boolean {
     ).booleanValue;
     return attributeExists;
 }
+
+export function timeSince(date: Date): string {
+    if (!(date instanceof Date) || isNaN(date.getTime())) {
+        console.error('Invalid date provided');
+        return 'Invalid date';
+    }
+
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+    let interval = seconds / 31536000;
+
+    if (interval > 1) {
+        return Math.floor(interval) + 'y';
+    }
+    interval = seconds / 2592000;
+    if (interval > 1) {
+        return Math.floor(interval) + 'm';
+    }
+    interval = seconds / 86400;
+    if (interval > 1) {
+        return Math.floor(interval) + 'd';
+    }
+    interval = seconds / 3600;
+    if (interval > 1) {
+        return Math.floor(interval) + 'h';
+    }
+    interval = seconds / 60;
+    if (interval > 1) {
+        return Math.floor(interval) + 'm';
+    }
+    return Math.floor(seconds) + 's';
+}
diff --git a/app/package.json b/app/package.json
index 7d4f9ec3..530fdc03 100644
--- a/app/package.json
+++ b/app/package.json
@@ -44,6 +44,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-progress": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
diff --git a/app/src/components/ui/progress.tsx b/app/src/components/ui/progress.tsx
new file mode 100644
index 00000000..be57c156
--- /dev/null
+++ b/app/src/components/ui/progress.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '@/lib/utils';
+
+const Progress = React.forwardRef<
+    React.ElementRef<typeof ProgressPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+    <ProgressPrimitive.Root
+        ref={ref}
+        className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+        {...props}
+    >
+        <ProgressPrimitive.Indicator
+            className="h-full w-full flex-1 bg-primary transition-all"
+            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        />
+    </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/app/src/routes/projects/ProjectsTab/Create/ChooseMethod.tsx b/app/src/routes/projects/ProjectsTab/Create/ChooseMethod.tsx
new file mode 100644
index 00000000..cd11635b
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Create/ChooseMethod.tsx
@@ -0,0 +1,66 @@
+import { Card } from '@/components/ui/card';
+import { DownloadIcon, FilePlusIcon } from '@radix-ui/react-icons';
+import { CreateMethod } from '../..';
+
+export const ChooseMethod = ({
+    setCreateMethod,
+}: {
+    setCreateMethod: (method: CreateMethod | null) => void;
+}) => {
+    const MESSAGES = [
+        "Ready to make some good lookin' apps",
+        "What a week... right? Doesn't matter, let's build!",
+        "These apps aren't gunna design themselves",
+        'Time to unleash your inner designer',
+        'Release your inner artist today',
+        "Let's craft some beautiful UIs!",
+        "*crackles knuckles* Let's get building!",
+        'Another day another design',
+        "Can't wait to see what you create!",
+        "Let's design something fresh today",
+        "Let's get to work",
+        "What time is it? It's time to build!",
+        "ಠ_ಠ   Why aren't you designing?   ಠ_ಠ",
+    ];
+
+    const OPENING_MESSAGE = MESSAGES[Math.floor(Math.random() * MESSAGES.length)];
+
+    return (
+        <div className="flex flex-col w-[40rem] gap-20 mt-40">
+            <div className="gap-5 flex flex-col">
+                <h1 className="text-title1 text-text-active leading-none">{'Projects'}</h1>
+                <p className="text-text text-regular">{OPENING_MESSAGE}</p>
+            </div>
+            <div className="flex flex-row w-full gap-8">
+                <Card
+                    className="w-full border border-blue-800 bg-blue-900/50 hover:bg-blue-900 hover:border-blue-600 hover:cursor-pointer flex flex-col items-center justify-center space-y-2 p-8 transition"
+                    onClick={() => {
+                        setCreateMethod(CreateMethod.NEW);
+                    }}
+                >
+                    <div className="rounded-full p-2 bg-blue-500">
+                        <FilePlusIcon className="w-4 h-4 text-blue-100" />
+                    </div>
+                    <h3 className="text-regular font-medium pt-2 text-blue-100">
+                        {'New Onlook project'}
+                    </h3>
+                    <p className="text-small text-blue-200"> {'Start a React App'} </p>
+                </Card>
+                <Card
+                    className="w-full border border-teal-800 bg-teal-1000 hover:bg-teal-800 hover:border-teal-600 hover:cursor-pointer flex flex-col items-center justify-center space-y-2 p-8 transition"
+                    onClick={() => {
+                        setCreateMethod(CreateMethod.LOAD);
+                    }}
+                >
+                    <div className="rounded-full p-2 bg-teal-500">
+                        <DownloadIcon className="w-4 h-4 text-teal-100" />
+                    </div>
+                    <h3 className="text-regular font-medium text-teal-100 pt-2">
+                        {'Import existing project'}
+                    </h3>
+                    <p className="text-small text-teal-200">{'Work on your React UI'}</p>
+                </Card>
+            </div>
+        </div>
+    );
+};
diff --git a/app/src/routes/projects/ProjectsTab/Create/Load/SelectFolder.tsx b/app/src/routes/projects/ProjectsTab/Create/Load/SelectFolder.tsx
new file mode 100644
index 00000000..8e3321e5
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Create/Load/SelectFolder.tsx
@@ -0,0 +1,84 @@
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { MinusCircledIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+import { StepProps } from '..';
+import { MainChannels } from '/common/constants';
+
+export const LoadSelectFolder = ({
+    props: { currentStep, totalSteps, prevStep, nextStep },
+}: {
+    props: StepProps;
+}) => {
+    const [projectName, setProjectName] = useState<string | null>(null);
+    const [projectPath, setProjectPath] = useState<string | null>(null);
+
+    async function pickProjectFolder() {
+        const path = (await window.api.invoke(MainChannels.PICK_COMPONENTS_DIRECTORY)) as
+            | string
+            | null;
+
+        if (path == null) {
+            return;
+        }
+        setProjectName('Project Name');
+        setProjectPath('/path/to/project');
+    }
+
+    return (
+        <Card className="w-[30rem]">
+            <CardHeader>
+                <CardTitle>{'Select your project folder'}</CardTitle>
+                <CardDescription>{'This is where we’ll reference your App'}</CardDescription>
+            </CardHeader>
+            <CardContent className="h-24 flex items-center w-full">
+                {projectPath ? (
+                    <div className="w-full flex flex-row items-center border p-4 rounded">
+                        <div className="flex flex-col text-sm">
+                            <p>{projectName}</p>
+                            <p>{projectPath}</p>
+                        </div>
+                        <Button
+                            className="ml-auto"
+                            variant={'ghost'}
+                            size={'icon'}
+                            onClick={() => {
+                                setProjectPath(null);
+                                setProjectName(null);
+                            }}
+                        >
+                            <MinusCircledIcon />
+                        </Button>
+                    </div>
+                ) : (
+                    <Button className="w-full h-12" variant={'outline'} onClick={pickProjectFolder}>
+                        {'Click to select your folder'}
+                    </Button>
+                )}
+            </CardContent>
+            <CardFooter className="text-sm">
+                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <div className="flex ml-auto gap-2">
+                    <Button type="button" onClick={prevStep} variant="ghost">
+                        Back
+                    </Button>
+                    <Button
+                        disabled={!projectPath}
+                        type="button"
+                        onClick={nextStep}
+                        variant="outline"
+                    >
+                        Next
+                    </Button>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+};
diff --git a/app/src/routes/projects/ProjectsTab/Create/Load/SetUrl.tsx b/app/src/routes/projects/ProjectsTab/Create/Load/SetUrl.tsx
new file mode 100644
index 00000000..07bcfde4
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Create/Load/SetUrl.tsx
@@ -0,0 +1,57 @@
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useState } from 'react';
+import { StepProps } from '..';
+
+export const LoadSetUrl = ({
+    props: { currentStep, totalSteps, prevStep, nextStep },
+}: {
+    props: StepProps;
+}) => {
+    const [projectUrl, setProjectUrl] = useState<string>('http://localhost:3000');
+
+    return (
+        <Card className="w-[30rem]">
+            <CardHeader>
+                <CardTitle>{'Set your project URL'}</CardTitle>
+                <CardDescription>{'Where is your project running locally?'}</CardDescription>
+            </CardHeader>
+            <CardContent className="h-24 flex items-center w-full">
+                <div className="flex flex-col w-full gap-2">
+                    <Label htmlFor="text">Local Url</Label>
+                    <Input
+                        value={projectUrl}
+                        type="text"
+                        placeholder="http://localhost:3000"
+                        onInput={(e) => setProjectUrl(e.currentTarget.value)}
+                    />
+                </div>
+            </CardContent>
+            <CardFooter className="text-sm">
+                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <div className="flex ml-auto gap-2">
+                    <Button type="button" onClick={prevStep} variant="ghost">
+                        Back
+                    </Button>
+                    <Button
+                        disabled={!projectUrl || projectUrl.length === 0}
+                        type="button"
+                        onClick={nextStep}
+                        variant="outline"
+                    >
+                        Complete setup
+                    </Button>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+};
diff --git a/app/src/routes/projects/ProjectsTab/Create/Load/Verify.tsx b/app/src/routes/projects/ProjectsTab/Create/Load/Verify.tsx
new file mode 100644
index 00000000..f59ec6dc
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Create/Load/Verify.tsx
@@ -0,0 +1,77 @@
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { CheckCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { StepProps } from '..';
+
+export const LoadVerifyProject = ({
+    props: { currentStep, totalSteps, prevStep, nextStep },
+}: {
+    props: StepProps;
+}) => {
+    const [isInstalled, setIsInstalled] = useState<boolean | null>(null);
+
+    async function installOnlook() {
+        setIsInstalled(true);
+    }
+
+    return (
+        <Card className="w-[30rem]">
+            <CardHeader>
+                <CardTitle>
+                    {isInstalled ? 'Onlook is installed' : 'Onlook is not installed'}
+                </CardTitle>
+                <CardDescription>
+                    {isInstalled
+                        ? 'Your project is all set up'
+                        : 'It takes one second to install Onlook on your project'}
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="h-24 flex items-center w-full">
+                <div
+                    className={clsx(
+                        'w-full flex flex-row items-center border p-4 rounded',
+                        isInstalled
+                            ? 'border-green-600 text-green-600 bg-green-100'
+                            : 'border-yellow-700 text-yellow-700 bg-yellow-100',
+                    )}
+                >
+                    <div className={'flex flex-col text-sm'}>
+                        <p>{'projectName'}</p>
+                        <p>{'projectPath'}</p>
+                    </div>
+                    {isInstalled ? (
+                        <CheckCircledIcon className="ml-auto" />
+                    ) : (
+                        <ExclamationTriangleIcon className="ml-auto" />
+                    )}
+                </div>
+            </CardContent>
+            <CardFooter className="text-sm">
+                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <div className="flex ml-auto gap-2">
+                    <Button type="button" onClick={prevStep} variant="ghost">
+                        Select a different folder
+                    </Button>
+                    {isInstalled ? (
+                        <Button variant={'outline'} onClick={nextStep}>
+                            {'Next'}
+                        </Button>
+                    ) : (
+                        <Button variant={'outline'} onClick={installOnlook}>
+                            {'Install Onlook'}
+                        </Button>
+                    )}
+                </div>
+            </CardFooter>
+        </Card>
+    );
+};
diff --git a/app/src/routes/projects/ProjectsTab/Create/LoadProject.tsx b/app/src/routes/projects/ProjectsTab/Create/LoadProject.tsx
deleted file mode 100644
index c63e4af3..00000000
--- a/app/src/routes/projects/ProjectsTab/Create/LoadProject.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ProjectData } from '.';
-
-// Step components for "Load existing project" path
-export const LoadStep1 = ({
-    formData,
-    setProjectData,
-}: {
-    formData: ProjectData;
-    setProjectData: (data: ProjectData) => void;
-}) => (
-    <div className="space-y-4">
-        <h2 className="text-xl font-bold">Step 1: Select Project</h2>
-        <input
-            type="text"
-            placeholder="Project Name"
-            value={formData.projectName}
-            onChange={(e) => setProjectData({ ...formData, projectName: e.target.value })}
-            className="w-full p-2 border rounded"
-        />
-    </div>
-);
-
-export const LoadStep2 = ({
-    formData,
-    setProjectData,
-}: {
-    formData: ProjectData;
-    setProjectData: (data: ProjectData) => void;
-}) => (
-    <div className="space-y-4">
-        <h2 className="text-xl font-bold">Step 2: Configure</h2>
-        <select
-            value={formData.projectType}
-            onChange={(e) => setProjectData({ ...formData, projectType: e.target.value })}
-            className="w-full p-2 border rounded"
-        >
-            <option value="">Select Project Type</option>
-            <option value="react">React</option>
-            <option value="vue">Vue</option>
-            <option value="angular">Angular</option>
-        </select>
-    </div>
-);
diff --git a/app/src/routes/projects/ProjectsTab/Create/New/Name.tsx b/app/src/routes/projects/ProjectsTab/Create/New/Name.tsx
new file mode 100644
index 00000000..dc4cce74
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Create/New/Name.tsx
@@ -0,0 +1,58 @@
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useState } from 'react';
+import { StepProps } from '..';
+
+export const NewNameProjectStep = ({
+    props: { currentStep, totalSteps, prevStep, nextStep },
+}: {
+    props: StepProps;
+}) => {
+    const [projectName, setProjectName] = useState<string | null>(null);
+
+    return (
+        <Card className="w-[30rem]">
+            <CardHeader>
+                <CardTitle>{'Let’s name your project'}</CardTitle>
+                <CardDescription>
+                    {'We’ll set you up with a blank template to start designing'}
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="h-24 flex items-center w-full">
+                <div className="flex flex-col w-full gap-2">
+                    <Label htmlFor="text">Project Name</Label>
+                    <Input
+                        type="text"
+                        placeholder="My awesome project"
+                        onInput={(e) => setProjectName(e.currentTarget.value)}
+                    />
+                </div>
+            </CardContent>
+            <CardFooter className="text-sm">
+                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <div className="flex ml-auto gap-2">
+                    <Button type="button" onClick={prevStep} variant="ghost">
+                        Back
+                    </Button>
+                    <Button
+                        disabled={!projectName || projectName.length === 0}
+                        type="button"
+                        onClick={nextStep}
+                        variant="outline"
+                    >
+                        Next
+                    </Button>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+};
diff --git a/app/src/routes/projects/ProjectsTab/Create/New/Run.tsx b/app/src/routes/projects/ProjectsTab/Create/New/Run.tsx
new file mode 100644
index 00000000..c426fe97
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Create/New/Run.tsx
@@ -0,0 +1,71 @@
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { toast } from '@/components/ui/use-toast';
+import { ClipboardCopyIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+import { StepProps } from '..';
+
+export const NewRunProject = ({
+    props: { currentStep, totalSteps, prevStep, nextStep },
+}: {
+    props: StepProps;
+}) => {
+    const [projectPath, setProjectPath] = useState<string>('path/to/project');
+    const [isRunning, setIsRunning] = useState<boolean>(false);
+    const codeContent = `cd ${projectPath} && npm run dev`;
+
+    function copyToClipboard(text: string) {
+        navigator.clipboard.writeText(text);
+    }
+
+    return (
+        <Card className="w-[30rem]">
+            <CardHeader>
+                <CardTitle>{'Run your project'}</CardTitle>
+                <CardDescription>
+                    {'Run this command in your command line to start'}
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="h-24 flex items-center w-full">
+                <div className="border bg-gray-100 w-full rounded-lg p-4 flex flex-row gap-2 items-center">
+                    <code className="text-sm max-w-[80%]">{codeContent}</code>
+                    <Button
+                        className="ml-auto"
+                        onClick={() => {
+                            copyToClipboard(codeContent);
+                            setIsRunning(true);
+                            toast({ title: 'Copied to clipboard' });
+                        }}
+                        variant={'secondary'}
+                        size={'icon'}
+                    >
+                        <ClipboardCopyIcon />
+                    </Button>
+                </div>
+            </CardContent>
+            <CardFooter className="text-sm">
+                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <div className="flex ml-auto gap-2">
+                    <Button type="button" onClick={prevStep} variant="ghost">
+                        Back
+                    </Button>
+                    <Button
+                        disabled={!isRunning}
+                        type="button"
+                        onClick={nextStep}
+                        variant="outline"
+                    >
+                        Complete Setup
+                    </Button>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+};
diff --git a/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx b/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
new file mode 100644
index 00000000..85a971ca
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
@@ -0,0 +1,84 @@
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { MinusCircledIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+import { StepProps } from '..';
+import { MainChannels } from '/common/constants';
+
+export const NewSelectFolder = ({
+    props: { currentStep, totalSteps, prevStep, nextStep },
+}: {
+    props: StepProps;
+}) => {
+    const [projectName, setProjectName] = useState<string | null>(null);
+    const [projectPath, setProjectPath] = useState<string | null>(null);
+
+    async function pickProjectFolder() {
+        const path = (await window.api.invoke(MainChannels.PICK_COMPONENTS_DIRECTORY)) as
+            | string
+            | null;
+
+        if (path == null) {
+            return;
+        }
+        setProjectName('Project Name');
+        setProjectPath('/path/to/project');
+    }
+
+    return (
+        <Card className="w-[30rem]">
+            <CardHeader>
+                <CardTitle>{'Select your project folder'}</CardTitle>
+                <CardDescription>{'This is where we’ll reference your App'}</CardDescription>
+            </CardHeader>
+            <CardContent className="h-24 flex items-center w-full">
+                {projectPath ? (
+                    <div className="w-full flex flex-row items-center border p-4 rounded">
+                        <div className="flex flex-col text-sm">
+                            <p>{projectName}</p>
+                            <p>{projectPath}</p>
+                        </div>
+                        <Button
+                            className="ml-auto"
+                            variant={'ghost'}
+                            size={'icon'}
+                            onClick={() => {
+                                setProjectPath(null);
+                                setProjectName(null);
+                            }}
+                        >
+                            <MinusCircledIcon />
+                        </Button>
+                    </div>
+                ) : (
+                    <Button className="w-full h-12" variant={'outline'} onClick={pickProjectFolder}>
+                        {'Click to select your folder'}
+                    </Button>
+                )}
+            </CardContent>
+            <CardFooter className="text-sm">
+                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <div className="flex ml-auto gap-2">
+                    <Button type="button" onClick={prevStep} variant="ghost">
+                        Rename folder
+                    </Button>
+                    <Button
+                        disabled={!projectPath}
+                        type="button"
+                        onClick={nextStep}
+                        variant="outline"
+                    >
+                        {projectPath ? 'Set up project' : 'Next'}
+                    </Button>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+};
diff --git a/app/src/routes/projects/ProjectsTab/Create/New/Setup.tsx b/app/src/routes/projects/ProjectsTab/Create/New/Setup.tsx
new file mode 100644
index 00000000..5357377d
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Create/New/Setup.tsx
@@ -0,0 +1,80 @@
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { CheckCircledIcon } from '@radix-ui/react-icons';
+import { useEffect, useState } from 'react';
+import { StepProps } from '..';
+
+export const NewSetupProject = ({
+    props: { currentStep, totalSteps, prevStep, nextStep },
+}: {
+    props: StepProps;
+}) => {
+    const [isInstalling, setIsInstalling] = useState<boolean | null>(false);
+    const [progress, setProgress] = useState<number>(0);
+
+    useEffect(() => {
+        if (progress >= 100) {
+            setIsInstalling(false);
+        } else {
+            setTimeout(() => {
+                setProgress(progress + 10);
+            }, 1000);
+        }
+    }, [progress]);
+
+    async function installOnlook() {
+        setIsInstalling(true);
+    }
+
+    return (
+        <Card className="w-[30rem]">
+            <CardHeader>
+                <CardTitle>
+                    {isInstalling ? 'Setting up project...' : 'Your project is ready'}
+                </CardTitle>
+                <CardDescription>
+                    {isInstalling
+                        ? 'Installing the right files and folders for you.'
+                        : 'Open this project in Onlook any time to start designing'}
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="h-24 flex items-center w-full">
+                {isInstalling ? (
+                    <div className="flex flex-col">
+                        <Progress value={progress} className="w-full" />
+                        <p>Installing dependencies...</p>
+                    </div>
+                ) : (
+                    <div className="w-full flex flex-row items-center border p-4 rounded border-green-600 text-green-600 bg-green-100">
+                        <div className={'flex flex-col text-sm'}>
+                            <p>{'projectName'}</p>
+                            <p>{'projectPath'}</p>
+                        </div>
+                        <CheckCircledIcon className="ml-auto" />
+                    </div>
+                )}
+            </CardContent>
+            <CardFooter className="text-sm">
+                <p>{`${currentStep + 1} of ${totalSteps}`}</p>
+                <div className="flex ml-auto gap-2">
+                    {isInstalling && (
+                        <Button type="button" onClick={prevStep} variant="ghost">
+                            Cancel
+                        </Button>
+                    )}
+                    <Button disabled={!!isInstalling} variant={'outline'} onClick={nextStep}>
+                        {'Run Project'}
+                    </Button>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+};
diff --git a/app/src/routes/projects/ProjectsTab/Create/NewProject.tsx b/app/src/routes/projects/ProjectsTab/Create/NewProject.tsx
deleted file mode 100644
index 42a6ab16..00000000
--- a/app/src/routes/projects/ProjectsTab/Create/NewProject.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ProjectData } from '.';
-
-// Step components for "New Onlook project" path
-export const NewStep1 = ({
-    formData,
-    setProjectData,
-}: {
-    formData: ProjectData;
-    setProjectData: (data: ProjectData) => void;
-}) => (
-    <div className="space-y-4">
-        <h2 className="text-xl font-bold">Step 1: Project Details</h2>
-        <input
-            type="text"
-            placeholder="Project Name"
-            value={formData.projectName}
-            onChange={(e) => setProjectData({ ...formData, projectName: e.target.value })}
-            className="w-full p-2 border rounded"
-        />
-        <input
-            type="text"
-            placeholder="Description"
-            value={formData.description}
-            onChange={(e) => setProjectData({ ...formData, description: e.target.value })}
-            className="w-full p-2 border rounded"
-        />
-    </div>
-);
-
-export const NewStep2 = ({
-    formData,
-    setProjectData,
-}: {
-    formData: ProjectData;
-    setProjectData: (data: ProjectData) => void;
-}) => (
-    <div className="space-y-4">
-        <h2 className="text-xl font-bold">Step 2: React Setup</h2>
-        <select
-            value={formData.reactVersion}
-            onChange={(e) => setProjectData({ ...formData, reactVersion: e.target.value })}
-            className="w-full p-2 border rounded"
-        >
-            <option value="">Select React Version</option>
-            <option value="18">React 18</option>
-            <option value="17">React 17</option>
-            <option value="16">React 16</option>
-        </select>
-    </div>
-);
diff --git a/app/src/routes/projects/ProjectsTab/Create/index.tsx b/app/src/routes/projects/ProjectsTab/Create/index.tsx
index 3de08619..6b935c0d 100644
--- a/app/src/routes/projects/ProjectsTab/Create/index.tsx
+++ b/app/src/routes/projects/ProjectsTab/Create/index.tsx
@@ -1,163 +1,88 @@
-import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { DownloadIcon, FilePlusIcon } from '@radix-ui/react-icons';
-import { FormEvent, useState } from 'react';
-import { LoadStep1, LoadStep2 } from './LoadProject';
-import { NewStep1, NewStep2 } from './NewProject';
+import { useState } from 'react';
+import { CreateMethod } from '../..';
+import { LoadSelectFolder } from './Load/SelectFolder';
+import { LoadSetUrl } from './Load/SetUrl';
+import { LoadVerifyProject } from './Load/Verify';
+import { NewNameProjectStep } from './New/Name';
+import { NewRunProject } from './New/Run';
+import { NewSelectFolder } from './New/SelectFolder';
+import { NewSetupProject } from './New/Setup';
+import { Project } from '/common/models/project';
 
-export interface ProjectData {
-    projectName: string;
-    projectType: string;
-    description: string;
-    reactVersion: string;
+export interface StepProps {
+    projectData: Project;
+    setProjectData: (data: Project) => void;
+    currentStep: number;
+    totalSteps: number;
+    prevStep: () => void;
+    nextStep: () => void;
 }
 
-export enum FormPath {
-    LOAD = 'load',
-    NEW = 'new',
-}
-
-const ConfirmationStep = ({ formData }: { formData: ProjectData }) => (
-    <div className="space-y-4">
-        <h2 className="text-xl font-bold">Confirmation</h2>
-        <p>Project Name: {formData.projectName}</p>
-        {formData.projectType && <p>Project Type: {formData.projectType}</p>}
-        {formData.description && <p>Description: {formData.description}</p>}
-        {formData.reactVersion && <p>React Version: {formData.reactVersion}</p>}
-    </div>
-);
-
-const CreateProject = () => {
-    const [isOpen, setIsOpen] = useState(true);
-    const [formPath, setFormPath] = useState<FormPath | null>(null);
+const CreateProject = ({
+    createMethod,
+    setCreateMethod,
+}: {
+    createMethod: CreateMethod | null;
+    setCreateMethod: (method: CreateMethod | null) => void;
+}) => {
     const [currentStep, setCurrentStep] = useState(0);
-    const [formData, setFormData] = useState({
-        projectName: '',
-        projectType: '',
-        description: '',
-        reactVersion: '',
+    const [totalSteps, setTotalSteps] = useState(createMethod === CreateMethod.NEW ? 4 : 4);
+    const [projectData, setProjectData] = useState<Project>({
+        id: '',
+        name: '',
+        folderPath: '',
+        url: '',
+        onlookEnabled: false,
+        createdAt: '',
+        updatedAt: '',
     });
 
     const nextStep = () => setCurrentStep(currentStep + 1);
-    const prevStep = () => setCurrentStep(currentStep - 1);
-
-    const handleSubmit = (e: FormEvent) => {
-        e.preventDefault();
-        console.log('Form submitted:', formData);
-        setIsOpen(false);
+    const prevStep = () => {
+        if (currentStep === 0) {
+            setCreateMethod(null);
+            return;
+        }
+        setCurrentStep(currentStep - 1);
     };
 
     const renderStep = () => {
-        if (currentStep === 0) {
-            return (
-                <div className="flex w-full max-w-[800px] justify-center flex-col gap-32 relative mb-80 px-8">
-                    <div className="h-full gap-5 flex flex-col">
-                        <h1 className="text-title1 text-text-active leading-none">{'Projects'}</h1>
-                        <p className="text-text text-regular">{openingMessage}</p>
-                    </div>
-                    <div className="w-full flex justify-center">
-                        <div className="flex flex-row w-full gap-8">
-                            <Card
-                                className="w-full border border-blue-800 bg-blue-900/50 hover:bg-blue-900 hover:border-blue-600 hover:cursor-pointer flex flex-col items-center justify-center space-y-2 p-8 transition"
-                                onClick={() => {
-                                    setFormPath(FormPath.NEW);
-                                    nextStep();
-                                }}
-                            >
-                                <div className="rounded-full p-2 bg-blue-500">
-                                    <FilePlusIcon className="w-4 h-4 text-blue-100" />
-                                </div>
-                                <h3 className="text-regular font-medium pt-2 text-blue-100">
-                                    {' '}
-                                    {'New Onlook project'}{' '}
-                                </h3>
-                                <p className="text-small text-blue-200"> {'Start a React App'} </p>
-                            </Card>
-                            <Card
-                                className="w-full border border-teal-800 bg-teal-1000 hover:bg-teal-800 hover:border-teal-600 hover:cursor-pointer flex flex-col items-center justify-center space-y-2 p-8 transition"
-                                onClick={() => {
-                                    setFormPath(FormPath.LOAD);
-                                    nextStep();
-                                }}
-                            >
-                                <div className="rounded-full p-2 bg-teal-500">
-                                    <DownloadIcon className="w-4 h-4 text-teal-100" />
-                                </div>
-                                <h3 className="text-regular font-medium text-teal-100 pt-2">
-                                    {'Import existing project'}
-                                </h3>
-                                <p className="text-small text-teal-200">
-                                    {'Work on your React UI'}
-                                </p>
-                            </Card>
-                        </div>
-                    </div>
-                </div>
-            );
-        }
+        const props: StepProps = {
+            projectData,
+            setProjectData,
+            currentStep,
+            totalSteps,
+            prevStep,
+            nextStep,
+        };
 
-        if (formPath === FormPath.LOAD) {
+        if (createMethod === CreateMethod.LOAD) {
+            if (currentStep === 0) {
+                return <LoadSelectFolder props={props} />;
+            }
             if (currentStep === 1) {
-                return <LoadStep1 formData={formData} setProjectData={setFormData} />;
+                return <LoadVerifyProject props={props} />;
             }
             if (currentStep === 2) {
-                return <LoadStep2 formData={formData} setProjectData={setFormData} />;
+                return <LoadSetUrl props={props} />;
+            }
+        } else if (createMethod === CreateMethod.NEW) {
+            if (currentStep === 0) {
+                return <NewNameProjectStep props={props} />;
             }
-        } else if (formPath === FormPath.NEW) {
             if (currentStep === 1) {
-                return <NewStep1 formData={formData} setProjectData={setFormData} />;
+                return <NewSelectFolder props={props} />;
             }
             if (currentStep === 2) {
-                return <NewStep2 formData={formData} setProjectData={setFormData} />;
+                return <NewSetupProject props={props} />;
+            }
+            if (currentStep === 3) {
+                return <NewRunProject props={props} />;
             }
-        }
-
-        if (currentStep === 3) {
-            return <ConfirmationStep formData={formData} />;
         }
     };
 
-    return (
-        <div className="w-full flex items-center justify-center relative">
-            <form
-                onSubmit={handleSubmit}
-                className="w-full space-y-4 flex flex-col items-center justify-center"
-            >
-                {renderStep()}
-                <div className="flex justify-between mt-4">
-                    {currentStep > 0 && (
-                        <Button type="button" onClick={prevStep} variant="outline">
-                            Previous
-                        </Button>
-                    )}
-                    {currentStep > 0 && currentStep < 3 && (
-                        <Button type="button" onClick={nextStep}>
-                            Next
-                        </Button>
-                    )}
-                    {currentStep === 3 && <Button type="submit">Submit</Button>}
-                </div>
-            </form>
-        </div>
-    );
+    return <div className="mt-40">{renderStep()}</div>;
 };
 
-const messages = [
-    "Ready to make some good lookin' apps",
-    "What a week... right? Doesn't matter, let's build!",
-    "These apps aren't gunna design themselves",
-    'Time to unleash your inner designer',
-    'Release your inner artist today',
-    "Let's craft some beautiful UIs!",
-    "*crackles knuckles* Let's get building!",
-    'Another day another design',
-    "Can't wait to see what you create!",
-    "Let's design something fresh today",
-    "Let's get to work",
-    "What time is it? It's time to build!",
-    "ಠ_ಠ   Why aren't you designing?   ಠ_ಠ",
-];
-
-const openingMessage = messages[Math.floor(Math.random() * messages.length)];
-
 export default CreateProject;
diff --git a/app/src/routes/projects/ProjectsTab/Info.tsx b/app/src/routes/projects/ProjectsTab/Info.tsx
deleted file mode 100644
index 3bc4ea3f..00000000
--- a/app/src/routes/projects/ProjectsTab/Info.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { DotsVerticalIcon, Pencil2Icon } from '@radix-ui/react-icons';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Project } from '.';
-
-export function ProjectInfo({
-    projects,
-    currentProjectIndex,
-    direction,
-}: {
-    projects: Project[];
-    currentProjectIndex: number;
-    direction: number;
-}) {
-    const variants = {
-        enter: (direction: number) => ({
-            y: direction > 0 ? 20 : -20,
-            opacity: 0,
-        }),
-        center: {
-            y: 0,
-            opacity: 1,
-        },
-        exit: (direction: number) => ({
-            y: direction < 0 ? 20 : -20,
-            opacity: 0,
-        }),
-    };
-
-    return (
-        <>
-            <AnimatePresence mode="wait" custom={direction}>
-                <motion.p
-                    key={currentProjectIndex}
-                    custom={direction}
-                    variants={variants}
-                    initial="enter"
-                    animate="center"
-                    exit="exit"
-                    transition={{ duration: 0.3 }}
-                    className="inline-block text-text-active text-title1"
-                >
-                    {projects[currentProjectIndex].title}
-                </motion.p>
-            </AnimatePresence>
-            <div className="text-text flex flex-col md:flex-row gap-2 md:gap-7 text-small">
-                <p>Last edited 3 days ago </p>
-                <p> localhost: 3000</p>
-            </div>
-            <div className="flex flex-col sm:flex-row gap-3 sm:gap-5 w-full">
-                <Button
-                    size="default"
-                    variant={'outline'}
-                    className="gap-2 bg-bg-active border border-border-active w-full lg:w-auto"
-                >
-                    <Pencil2Icon />
-                    <p> Edit App </p>
-                </Button>
-                <Button size="default" variant={'ghost'} className="gap-2 w-full lg:w-auto">
-                    <DotsVerticalIcon />
-                    <p> Project settings</p>
-                </Button>
-            </div>
-        </>
-    );
-}
diff --git a/app/src/routes/projects/ProjectsTab/Carousel.tsx b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
similarity index 96%
rename from app/src/routes/projects/ProjectsTab/Carousel.tsx
rename to app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
index e0db3c18..aa98f317 100644
--- a/app/src/routes/projects/ProjectsTab/Carousel.tsx
+++ b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
@@ -1,7 +1,7 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import useEmblaCarousel from 'embla-carousel-react';
 import React, { useCallback, useEffect, useState } from 'react';
-import { Project } from '.';
+import { Project } from '/common/models/project';
 
 interface EmblaCarouselProps {
     slides: Project[];
@@ -86,8 +86,8 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                             }}
                         >
                             <img
-                                src={slide.img}
-                                alt={slide.title}
+                                src={slide.previewImg}
+                                alt={slide.name}
                                 className="rounded-lg object-cover w-[50%] h-[80%]"
                             />
                         </div>
diff --git a/app/src/routes/projects/ProjectsTab/Select/Info.tsx b/app/src/routes/projects/ProjectsTab/Select/Info.tsx
new file mode 100644
index 00000000..49d7e320
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Select/Info.tsx
@@ -0,0 +1,75 @@
+import { Button } from '@/components/ui/button';
+import { DotsVerticalIcon, Pencil2Icon } from '@radix-ui/react-icons';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import { timeSince } from '/common/helpers';
+import { Project } from '/common/models/project';
+
+export function ProjectInfo({
+    projects,
+    currentProjectIndex,
+    direction,
+}: {
+    projects: Project[];
+    currentProjectIndex: number;
+    direction: number;
+}) {
+    const [project, setProject] = useState<Project | null>(null);
+    useEffect(() => {
+        setProject(projects[currentProjectIndex]);
+    }, [currentProjectIndex]);
+
+    const variants = {
+        enter: (direction: number) => ({
+            y: direction > 0 ? 20 : -20,
+            opacity: 0,
+        }),
+        center: {
+            y: 0,
+            opacity: 1,
+        },
+        exit: (direction: number) => ({
+            y: direction < 0 ? 20 : -20,
+            opacity: 0,
+        }),
+    };
+
+    return (
+        project && (
+            <>
+                <AnimatePresence mode="wait" custom={direction}>
+                    <motion.p
+                        key={currentProjectIndex}
+                        custom={direction}
+                        variants={variants}
+                        initial="enter"
+                        animate="center"
+                        exit="exit"
+                        transition={{ duration: 0.3 }}
+                        className="inline-block text-text-active text-title1"
+                    >
+                        {project.name}
+                    </motion.p>
+                </AnimatePresence>
+                <div className="text-text flex flex-col md:flex-row gap-2 md:gap-7 text-small">
+                    <p>Last edited {timeSince(new Date(project.updatedAt))} ago </p>
+                    <p>{project.url}</p>
+                </div>
+                <div className="flex flex-col sm:flex-row gap-3 sm:gap-5 w-full">
+                    <Button
+                        size="default"
+                        variant={'outline'}
+                        className="gap-2 bg-bg-active border border-border-active w-full lg:w-auto"
+                    >
+                        <Pencil2Icon />
+                        <p> Edit App </p>
+                    </Button>
+                    <Button size="default" variant={'ghost'} className="gap-2 w-full lg:w-auto">
+                        <DotsVerticalIcon />
+                        <p> Project settings</p>
+                    </Button>
+                </div>
+            </>
+        )
+    );
+}
diff --git a/app/src/routes/projects/ProjectsTab/Select/index.tsx b/app/src/routes/projects/ProjectsTab/Select/index.tsx
new file mode 100644
index 00000000..6e37e33f
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Select/index.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import EmblaCarousel from './Carousel';
+import { ProjectInfo } from './Info';
+import { Project } from '/common/models/project';
+
+function SelectProject({ projects }: { projects: Project[] }) {
+    const [currentProjectIndex, setCurrentProjectIndex] = useState(0);
+    const [direction, setDirection] = useState(0);
+
+    const handleProjectChange = (index: number) => {
+        if (currentProjectIndex === index) {
+            return;
+        }
+        setDirection(index > currentProjectIndex ? 1 : -1);
+        setCurrentProjectIndex(index);
+    };
+    return (
+        <>
+            <div className="w-3/5">
+                <EmblaCarousel slides={projects} onSlideChange={handleProjectChange} />
+            </div>
+            <div className="w-2/5 flex flex-col justify-center items-start p-4 gap-6">
+                <ProjectInfo
+                    projects={projects}
+                    currentProjectIndex={currentProjectIndex}
+                    direction={direction}
+                />
+            </div>
+        </>
+    );
+}
+
+export default SelectProject;
diff --git a/app/src/routes/projects/ProjectsTab/index.tsx b/app/src/routes/projects/ProjectsTab/index.tsx
index d92d5345..6518f742 100644
--- a/app/src/routes/projects/ProjectsTab/index.tsx
+++ b/app/src/routes/projects/ProjectsTab/index.tsx
@@ -1,52 +1,50 @@
-import { useState } from 'react';
-import EmblaCarousel from './Carousel';
-import CreateProject from './Create';
-import { ProjectInfo } from './Info';
-
-export interface Project {
-    id: number;
-    img: string;
-    title: string;
-}
-
-export function ProjectsTab() {
-    const [currentProjectIndex, setCurrentProjectIndex] = useState(0);
-    const [direction, setDirection] = useState(0);
+import { CreateMethod } from '..';
+import { ChooseMethod } from './Create/ChooseMethod';
+import SelectProject from './Select';
+import { Project } from '/common/models/project';
 
+export function ProjectsTab({
+    setCreateMethod,
+}: {
+    setCreateMethod: (method: CreateMethod | null) => void;
+}) {
     const PROJECTS: Project[] = [
-        // { id: 0, img: 'https://picsum.photos/id/237/200/300', title: 'Airbnb.com' },
-        // { id: 1, img: 'https://picsum.photos/id/238/300/200', title: 'Netflix Clone' },
-        // { id: 2, img: 'https://picsum.photos/id/239/500/500', title: 'Personal Portfolio' },
-        // { id: 3, img: 'https://picsum.photos/id/240/100/1000', title: 'Amazon.com' },
-        // { id: 4, img: 'https://picsum.photos/id/241/1000/100', title: 'X' },
-        // { id: 5, img: 'https://picsum.photos/id/242/1000/1000', title: 'YC' },
+        {
+            id: '0',
+            previewImg: 'https://picsum.photos/id/237/200/300',
+            name: 'Airbnb.com',
+            url: 'http://localhost:3000',
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+            onlookEnabled: false,
+            folderPath: '/path/to/folder',
+        },
+        {
+            id: '1',
+            previewImg: 'https://picsum.photos/id/238/300/200',
+            name: 'Netflix Clone',
+            url: 'http://localhost:5371',
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+            onlookEnabled: true,
+            folderPath: '/path/to/folder',
+        },
+        {
+            id: '2',
+            previewImg: 'https://picsum.photos/id/239/500/500',
+            name: 'Personal Portfolio',
+            url: 'http://localhost:8080',
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+            onlookEnabled: true,
+            folderPath: '/path/to/folder',
+        },
     ];
 
-    const handleProjectChange = (index: number) => {
-        if (currentProjectIndex === index) {
-            return;
-        }
-        setDirection(index > currentProjectIndex ? 1 : -1);
-        setCurrentProjectIndex(index);
-    };
-
     return (
-        <div className="flex h-[calc(100vh-5.5rem)] w-full">
-            {PROJECTS.length === 0 && <CreateProject />}
-            {PROJECTS.length > 0 && (
-                <>
-                    <div className="w-3/5">
-                        <EmblaCarousel slides={PROJECTS} onSlideChange={handleProjectChange} />
-                    </div>
-                    <div className="w-2/5 flex flex-col justify-center items-start p-4 gap-6">
-                        <ProjectInfo
-                            projects={PROJECTS}
-                            currentProjectIndex={currentProjectIndex}
-                            direction={direction}
-                        />
-                    </div>
-                </>
-            )}
-        </div>
+        <>
+            {PROJECTS.length === 0 && <ChooseMethod setCreateMethod={setCreateMethod} />}
+            {PROJECTS.length > 0 && <SelectProject projects={PROJECTS} />}
+        </>
     );
 }
diff --git a/app/src/routes/projects/SettingsTab/index.tsx b/app/src/routes/projects/SettingsTab/index.tsx
index 54a40ff8..a22fdfa1 100644
--- a/app/src/routes/projects/SettingsTab/index.tsx
+++ b/app/src/routes/projects/SettingsTab/index.tsx
@@ -9,130 +9,125 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { useState } from 'react';
+import { MainChannels } from '/common/constants';
+import { IDE } from '/common/ide';
 
 export function SettingsTab() {
     const [analyticsActive, setAnalyticsActive] = useState(false); // State for analytics
 
-    //   function updateIde(ide: IDE) {
-    //       window.api.invoke(MainChannels.UPDATE_USER_SETTINGS, { ideType: ide.type });
-    //       setIde(ide);
-    //   }
+    function updateIde(ide: IDE) {
+        window.api.invoke(MainChannels.UPDATE_USER_SETTINGS, { ideType: ide.type });
+        // setIde(ide);
+    }
 
     return (
-        <div
-            className={
-                'w-full mt-20 px-8 flex items-center justify-center relative overflow-hidden'
-            }
-        >
-            <div className="w-full max-w-[800px] h-full flex flex-row gap-16">
-                <div className="h-[fit-content] w-fill min-w-[180px] flex flex-col gap-5 ">
-                    <h1 className="leading-none text-title1">Settings</h1>
-                    <p className="text-text text-regular">{openingMessage}</p>
-                </div>
-                <div className="w-full h-full flex flex-col gap-12">
-                    <div className="flex flex-col gap-8">
-                        <h3 className="text-title3">Editor</h3>
-                        <div className="flex justify-between items-center">
-                            <p className="text-text text-largePlus">Default Code Editor</p>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button variant="outline" className="min-w-[150px]">
-                                        <span className="flex flex-row items-center justify-center text-default h-3 w-[fit-content] mr-2">
-                                            <img src={VsCodeIcon} alt="VSCode Icon" />
-                                        </span>
-                                        <span>VSCode</span>
-                                        <ChevronDownIcon className="ml-auto" />
-                                    </Button>
-                                </DropdownMenuTrigger>
-
-                                <DropdownMenuContent>
-                                    <DropdownMenuItem>
-                                        <span className="text-default h-3 w-3 mr-2">
-                                            <img src={VsCodeIcon} alt="VSCode Icon" />
-                                        </span>
-                                        <span>VSCode</span>
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem>
-                                        <span className="text-default h-3 w-3 mr-2">
-                                            <img src={CursorIcon} alt="Cursor Icon" />
-                                        </span>
-                                        <span>Cursor</span>
-                                    </DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </div>
-                        <div className="w-full h-[fit-content] flex justify-between items-center gap-4">
-                            <div className="w-full h-[fit-content] flex flex-col gap-2">
-                                <p className="w-[fit-content] h-[fit-content] text-text text-largePlus">
-                                    Analytics
-                                </p>
-                                <p className="w-[fit-content] h-[fit-content] text-text text-small">
-                                    This helps our small team of two know what we need to improve
-                                    with the product.
-                                </p>
-                            </div>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button variant="outline" className="min-w-[150px]">
-                                        {analyticsActive ? 'On' : 'Off'}
-                                        <ChevronDownIcon className="ml-auto" />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent>
-                                    <DropdownMenuItem onClick={() => setAnalyticsActive(true)}>
-                                        Analytics On
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem onClick={() => setAnalyticsActive(false)}>
-                                        Analytics Off
-                                    </DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </div>
+        <div className="w-[800px] mt-28 flex flex-row gap-16">
+            <div className="h-[fit-content] w-fill min-w-[180px] flex flex-col gap-5 ">
+                <h1 className="leading-none text-title1">Settings</h1>
+                <p className="text-text text-regular">{openingMessage}</p>
+            </div>
+            <div className="w-full h-full flex flex-col gap-12">
+                <div className="flex flex-col gap-8">
+                    <h3 className="text-title3">Editor</h3>
+                    <div className="flex justify-between items-center">
+                        <p className="text-text text-largePlus">Default Code Editor</p>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="outline" className="min-w-[150px]">
+                                    <span className="flex flex-row items-center justify-center text-default h-3 w-[fit-content] mr-2">
+                                        <img src={VsCodeIcon} alt="VSCode Icon" />
+                                    </span>
+                                    <span>VSCode</span>
+                                    <ChevronDownIcon className="ml-auto" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem>
+                                    <span className="text-default h-3 w-3 mr-2">
+                                        <img src={VsCodeIcon} alt="VSCode Icon" />
+                                    </span>
+                                    <span>VSCode</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    <span className="text-default h-3 w-3 mr-2">
+                                        <img src={CursorIcon} alt="Cursor Icon" />
+                                    </span>
+                                    <span>Cursor</span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
-                    <div className="w-full h-[0.5px] bg-gray-400"></div>
-                    <div className="w-full h-[fit-content] flex flex-col gap-8">
-                        <h3 className="w-full h-[fit-content] text-title3">Danger Zone</h3>
-                        <div className="w-full h-[fit-content] flex justify-between items-center gap-4">
-                            <div className="w-full h-[fit-content] flex flex-col gap-2">
-                                <p className="w-[fit-content] h-[fit-content] text-text text-largePlus">
-                                    Delete Account
-                                </p>
-                                <p className="w-[fit-content] h-[fit-content] text-text text-small">
-                                    We’ll delete all of your actions, your account, and connections
-                                    to your projects, but we won’t delete your React projects from
-                                    your computer.
-                                </p>
-                            </div>
-                            <Button
-                                variant="destructive"
-                                className="border border-red-500 text-red-200 hover:bg-red-700 hover:text-red-100 hover:border-red-300"
-                            >
-                                Delete Account
-                            </Button>
+                    <div className="w-full h-[fit-content] flex justify-between items-center gap-4">
+                        <div className="w-full h-[fit-content] flex flex-col gap-2">
+                            <p className="w-[fit-content] h-[fit-content] text-text text-largePlus">
+                                Analytics
+                            </p>
+                            <p className="w-[fit-content] h-[fit-content] text-text text-small">
+                                This helps our small team of two know what we need to improve with
+                                the product.
+                            </p>
                         </div>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="outline" className="min-w-[150px]">
+                                    {analyticsActive ? 'On' : 'Off'}
+                                    <ChevronDownIcon className="ml-auto" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem onClick={() => setAnalyticsActive(true)}>
+                                    {'Analytics On'}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={() => setAnalyticsActive(false)}>
+                                    {'Analytics Off'}
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
-                    <div className="w-full h-[0.5px] bg-gray-400"></div>
-                    <div className="w-full h-[fit-content] flex flex-row gap-1 text-gray-600 text-micro">
-                        <p>Onlook Studio Version 1.4 • </p>
-                        <p>
-                            <a
-                                href="/privacy-policy"
-                                className="text-gray-600 hover:text-gray-900 underline transition-colors duration-200"
-                            >
-                                Privacy Policy
-                            </a>
-                        </p>
-                        <p> and </p>
-                        <p>
-                            <a
-                                href="/terms-of-service"
-                                className="text-gray-600 hover:text-gray-900 underline transition-colors duration-200"
-                            >
-                                Terms of Service
-                            </a>
-                        </p>
+                </div>
+                <div className="w-full h-[0.5px] bg-gray-400"></div>
+                <div className="w-full h-[fit-content] flex flex-col gap-8">
+                    <h3 className="w-full h-[fit-content] text-title3">Danger Zone</h3>
+                    <div className="w-full h-[fit-content] flex justify-between items-center gap-4">
+                        <div className="w-full h-[fit-content] flex flex-col gap-2">
+                            <p className="w-[fit-content] h-[fit-content] text-text text-largePlus">
+                                {'Delete Account'}
+                            </p>
+                            <p className="w-[fit-content] h-[fit-content] text-text text-small">
+                                {
+                                    ' We’ll delete all of your actions, your account, and connections to your projects, but we won’t delete your React projects from your computer.'
+                                }
+                            </p>
+                        </div>
+                        <Button
+                            variant="destructive"
+                            className="border border-red-500 text-red-200 hover:bg-red-700 hover:text-red-100 hover:border-red-300"
+                        >
+                            {' Delete Account'}
+                        </Button>
                     </div>
                 </div>
+                <div className="w-full h-[0.5px] bg-gray-400"></div>
+                <div className="w-full h-[fit-content] flex flex-row gap-1 text-gray-600 text-micro">
+                    <p>{'Onlook Studio Version 1.4 • '}</p>
+                    <p>
+                        <a
+                            href="/privacy-policy"
+                            className="text-gray-600 hover:text-gray-900 underline transition-colors duration-200"
+                        >
+                            {'Privacy Policy'}
+                        </a>
+                    </p>
+                    <p> {'and'} </p>
+                    <p>
+                        <a
+                            href="/terms-of-service"
+                            className="text-gray-600 hover:text-gray-900 underline transition-colors duration-200"
+                        >
+                            {'Terms of Service'}
+                        </a>
+                    </p>
+                </div>
             </div>
         </div>
     );
diff --git a/app/src/routes/projects/TopBar/index.tsx b/app/src/routes/projects/TopBar/index.tsx
index cd5168bb..05728a26 100644
--- a/app/src/routes/projects/TopBar/index.tsx
+++ b/app/src/routes/projects/TopBar/index.tsx
@@ -8,22 +8,26 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
 import { DownloadIcon, FilePlusIcon, PlusIcon } from '@radix-ui/react-icons';
-import { ProjectsPageTab } from '..';
+import { CreateMethod, ProjectsPageTab } from '..';
 import ModeToggle from '../TopBar/ModeToggle';
 
 export default function TopBar({
     currentTab,
     setCurrentTab,
+    createMethod,
+    setCreateMethod,
 }: {
     currentTab: ProjectsPageTab;
     setCurrentTab: (tab: ProjectsPageTab) => void;
+    createMethod: CreateMethod | null;
+    setCreateMethod: (method: CreateMethod | null) => void;
 }) {
     return (
         <div className="flex flex-row h-12 px-12 items-center">
             <div className="flex-1 flex items-center justify-start mt-3">
                 <img className="w-24" src={wordLogo} alt="Onlook logo" />
             </div>
-            <ModeToggle currentTab={currentTab} setCurrentTab={setCurrentTab} />
+            {!createMethod && <ModeToggle currentTab={currentTab} setCurrentTab={setCurrentTab} />}
             <div className="flex-1 flex justify-end space-x-2 mt-4 items-center">
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
@@ -38,6 +42,7 @@ export default function TopBar({
                                 'focus:bg-blue-900 focus:text-blue-100',
                                 'hover:bg-blue-900 hover:text-blue-100',
                             )}
+                            onSelect={() => setCreateMethod(CreateMethod.NEW)}
                         >
                             <FilePlusIcon className="w-4 h-4 mr-2" />
                             Start from scratch
@@ -47,6 +52,7 @@ export default function TopBar({
                                 'focus:bg-teal-900 focus:text-teal-100',
                                 'hover:bg-teal-900 hover:text-teal-100',
                             )}
+                            onSelect={() => setCreateMethod(CreateMethod.LOAD)}
                         >
                             <DownloadIcon className="w-4 h-4 mr-2" />
                             Import existing project
diff --git a/app/src/routes/projects/index.tsx b/app/src/routes/projects/index.tsx
index 6145ee1e..369ab254 100644
--- a/app/src/routes/projects/index.tsx
+++ b/app/src/routes/projects/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { ProjectsTab } from './ProjectsTab';
+import CreateProject from './ProjectsTab/Create';
 import { SettingsTab } from './SettingsTab';
 import TopBar from './TopBar';
 
@@ -8,14 +9,35 @@ export enum ProjectsPageTab {
     SETTINGS = 'settings',
 }
 
+export enum CreateMethod {
+    LOAD = 'load',
+    NEW = 'new',
+}
+
 export default function Projects() {
     const [currentTab, setCurrentTab] = useState<ProjectsPageTab>(ProjectsPageTab.PROJECTS);
+    const [createMethod, setCreateMethod] = useState<CreateMethod | null>(null);
 
     return (
-        <div className="w-full">
-            <TopBar currentTab={currentTab} setCurrentTab={setCurrentTab} />
-            {currentTab === ProjectsPageTab.PROJECTS && <ProjectsTab />}
-            {currentTab === ProjectsPageTab.SETTINGS && <SettingsTab />}
+        <div className="w-full h-[calc(100vh-2.5rem)]">
+            <TopBar
+                createMethod={createMethod}
+                setCreateMethod={setCreateMethod}
+                currentTab={currentTab}
+                setCurrentTab={setCurrentTab}
+            />
+            <div className="flex  h-[calc(100vh-5.5rem)] justify-center">
+                {createMethod ? (
+                    <CreateProject createMethod={createMethod} setCreateMethod={setCreateMethod} />
+                ) : (
+                    <>
+                        {currentTab === ProjectsPageTab.PROJECTS && (
+                            <ProjectsTab setCreateMethod={setCreateMethod} />
+                        )}
+                        {currentTab === ProjectsPageTab.SETTINGS && <SettingsTab />}
+                    </>
+                )}
+            </div>
         </div>
     );
 }