diff --git a/app/bun.lockb b/app/bun.lockb
index 241baa3db..0bc3c01b9 100755
Binary files a/app/bun.lockb and b/app/bun.lockb differ
diff --git a/app/package.json b/app/package.json
index 491481c5a..915d6d094 100644
--- a/app/package.json
+++ b/app/package.json
@@ -58,6 +58,8 @@
         "css-to-tailwind-translator": "^1.2.8",
         "culori": "^4.0.1",
         "electron-updater": "^6.2.1",
+        "embla-carousel-react": "^8.3.0",
+        "embla-carousel-wheel-gestures": "^8.0.1",
         "fflate": "^0.8.2",
         "framer-motion": "^11.2.12",
         "js-string-escape": "^1.0.1",
diff --git a/app/src/lib/routes/index.ts b/app/src/lib/routes/index.ts
index 48e4c6798..9bd79e9aa 100644
--- a/app/src/lib/routes/index.ts
+++ b/app/src/lib/routes/index.ts
@@ -4,6 +4,7 @@ import { sendAnalytics } from '../utils';
 export enum Route {
     EDITOR = 'editor',
     LOGIN = 'login',
+    PROJECTS = 'projects',
 }
 
 export class RouteManager {
diff --git a/app/src/routes/project/Canvas/HotkeysArea.tsx b/app/src/routes/editor/Canvas/HotkeysArea.tsx
similarity index 100%
rename from app/src/routes/project/Canvas/HotkeysArea.tsx
rename to app/src/routes/editor/Canvas/HotkeysArea.tsx
diff --git a/app/src/routes/project/Canvas/PanOverlay.tsx b/app/src/routes/editor/Canvas/PanOverlay.tsx
similarity index 100%
rename from app/src/routes/project/Canvas/PanOverlay.tsx
rename to app/src/routes/editor/Canvas/PanOverlay.tsx
diff --git a/app/src/routes/project/Canvas/index.tsx b/app/src/routes/editor/Canvas/index.tsx
similarity index 100%
rename from app/src/routes/project/Canvas/index.tsx
rename to app/src/routes/editor/Canvas/index.tsx
diff --git a/app/src/routes/project/EditPanel/ManualTab.tsx b/app/src/routes/editor/EditPanel/ManualTab.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/ManualTab.tsx
rename to app/src/routes/editor/EditPanel/ManualTab.tsx
diff --git a/app/src/routes/project/EditPanel/index.tsx b/app/src/routes/editor/EditPanel/index.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/index.tsx
rename to app/src/routes/editor/EditPanel/index.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/AutoLayoutInput.tsx b/app/src/routes/editor/EditPanel/inputs/AutoLayoutInput.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/AutoLayoutInput.tsx
rename to app/src/routes/editor/EditPanel/inputs/AutoLayoutInput.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/BorderInput.tsx b/app/src/routes/editor/EditPanel/inputs/BorderInput.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/BorderInput.tsx
rename to app/src/routes/editor/EditPanel/inputs/BorderInput.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/DisplayInput.tsx b/app/src/routes/editor/EditPanel/inputs/DisplayInput.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/DisplayInput.tsx
rename to app/src/routes/editor/EditPanel/inputs/DisplayInput.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/GridRowColInput.tsx b/app/src/routes/editor/EditPanel/inputs/GridRowColInput.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/GridRowColInput.tsx
rename to app/src/routes/editor/EditPanel/inputs/GridRowColInput.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/NestedInputs.tsx b/app/src/routes/editor/EditPanel/inputs/NestedInputs.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/NestedInputs.tsx
rename to app/src/routes/editor/EditPanel/inputs/NestedInputs.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/TagDetails.tsx b/app/src/routes/editor/EditPanel/inputs/TagDetails.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/TagDetails.tsx
rename to app/src/routes/editor/EditPanel/inputs/TagDetails.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/TailwindInput.tsx b/app/src/routes/editor/EditPanel/inputs/TailwindInput.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/TailwindInput.tsx
rename to app/src/routes/editor/EditPanel/inputs/TailwindInput.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx b/app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx
similarity index 96%
rename from app/src/routes/project/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx
rename to app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx
index 8dd808990..0e0687ff7 100644
--- a/app/src/routes/project/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx
+++ b/app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx
@@ -1,4 +1,4 @@
-import { useEditorEngine } from '@/routes/project';
+import { useEditorEngine } from '@/routes/editor';
 import { useEffect } from 'react';
 import { HexAlphaColorPicker } from 'react-colorful';
 import { Popover } from 'react-tiny-popover';
diff --git a/app/src/routes/project/EditPanel/inputs/primitives/ColorInput/index.tsx b/app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/index.tsx
similarity index 98%
rename from app/src/routes/project/EditPanel/inputs/primitives/ColorInput/index.tsx
rename to app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/index.tsx
index 8a9fa24f4..bcf6fadb2 100644
--- a/app/src/routes/project/EditPanel/inputs/primitives/ColorInput/index.tsx
+++ b/app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/index.tsx
@@ -1,7 +1,7 @@
 import { formatColorInput, stringToHex } from '@/lib/editor/styles/colors';
 import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
-import { useEditorEngine } from '@/routes/project';
+import { useEditorEngine } from '@/routes/editor';
 import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
diff --git a/app/src/routes/project/EditPanel/inputs/primitives/NumberUnitInput.tsx b/app/src/routes/editor/EditPanel/inputs/primitives/NumberUnitInput.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/primitives/NumberUnitInput.tsx
rename to app/src/routes/editor/EditPanel/inputs/primitives/NumberUnitInput.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/primitives/SelectInput.tsx b/app/src/routes/editor/EditPanel/inputs/primitives/SelectInput.tsx
similarity index 100%
rename from app/src/routes/project/EditPanel/inputs/primitives/SelectInput.tsx
rename to app/src/routes/editor/EditPanel/inputs/primitives/SelectInput.tsx
diff --git a/app/src/routes/project/EditPanel/inputs/primitives/TextInput.tsx b/app/src/routes/editor/EditPanel/inputs/primitives/TextInput.tsx
similarity index 98%
rename from app/src/routes/project/EditPanel/inputs/primitives/TextInput.tsx
rename to app/src/routes/editor/EditPanel/inputs/primitives/TextInput.tsx
index 92b69358c..43e4a0ac9 100644
--- a/app/src/routes/project/EditPanel/inputs/primitives/TextInput.tsx
+++ b/app/src/routes/editor/EditPanel/inputs/primitives/TextInput.tsx
@@ -2,7 +2,7 @@ import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
 import { parsedValueToString, stringToParsedValue } from '@/lib/editor/styles/numberUnit';
 import { appendCssUnit } from '@/lib/editor/styles/units';
-import { useEditorEngine } from '@/routes/project';
+import { useEditorEngine } from '@/routes/editor';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
diff --git a/app/src/routes/project/LayersPanel/ComponentsTab.tsx b/app/src/routes/editor/LayersPanel/ComponentsTab.tsx
similarity index 100%
rename from app/src/routes/project/LayersPanel/ComponentsTab.tsx
rename to app/src/routes/editor/LayersPanel/ComponentsTab.tsx
diff --git a/app/src/routes/project/LayersPanel/LayersTab.tsx b/app/src/routes/editor/LayersPanel/LayersTab.tsx
similarity index 100%
rename from app/src/routes/project/LayersPanel/LayersTab.tsx
rename to app/src/routes/editor/LayersPanel/LayersTab.tsx
diff --git a/app/src/routes/project/LayersPanel/ResizablePanel.tsx b/app/src/routes/editor/LayersPanel/ResizablePanel.tsx
similarity index 100%
rename from app/src/routes/project/LayersPanel/ResizablePanel.tsx
rename to app/src/routes/editor/LayersPanel/ResizablePanel.tsx
diff --git a/app/src/routes/project/LayersPanel/Tree/NodeIcon.tsx b/app/src/routes/editor/LayersPanel/Tree/NodeIcon.tsx
similarity index 100%
rename from app/src/routes/project/LayersPanel/Tree/NodeIcon.tsx
rename to app/src/routes/editor/LayersPanel/Tree/NodeIcon.tsx
diff --git a/app/src/routes/project/LayersPanel/Tree/TreeNode.tsx b/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
similarity index 100%
rename from app/src/routes/project/LayersPanel/Tree/TreeNode.tsx
rename to app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
diff --git a/app/src/routes/project/LayersPanel/Tree/TreeRow.tsx b/app/src/routes/editor/LayersPanel/Tree/TreeRow.tsx
similarity index 100%
rename from app/src/routes/project/LayersPanel/Tree/TreeRow.tsx
rename to app/src/routes/editor/LayersPanel/Tree/TreeRow.tsx
diff --git a/app/src/routes/project/LayersPanel/index.tsx b/app/src/routes/editor/LayersPanel/index.tsx
similarity index 100%
rename from app/src/routes/project/LayersPanel/index.tsx
rename to app/src/routes/editor/LayersPanel/index.tsx
diff --git a/app/src/routes/project/RightClickMenu/index.tsx b/app/src/routes/editor/RightClickMenu/index.tsx
similarity index 100%
rename from app/src/routes/project/RightClickMenu/index.tsx
rename to app/src/routes/editor/RightClickMenu/index.tsx
diff --git a/app/src/routes/project/Toolbar/index.tsx b/app/src/routes/editor/Toolbar/index.tsx
similarity index 100%
rename from app/src/routes/project/Toolbar/index.tsx
rename to app/src/routes/editor/Toolbar/index.tsx
diff --git a/app/src/routes/project/TopBar/ModeToggle/index.tsx b/app/src/routes/editor/TopBar/ModeToggle/index.tsx
similarity index 100%
rename from app/src/routes/project/TopBar/ModeToggle/index.tsx
rename to app/src/routes/editor/TopBar/ModeToggle/index.tsx
diff --git a/app/src/routes/project/TopBar/OpenCode/index.tsx b/app/src/routes/editor/TopBar/OpenCode/index.tsx
similarity index 100%
rename from app/src/routes/project/TopBar/OpenCode/index.tsx
rename to app/src/routes/editor/TopBar/OpenCode/index.tsx
diff --git a/app/src/routes/project/TopBar/PublishModal/index.tsx b/app/src/routes/editor/TopBar/PublishModal/index.tsx
similarity index 100%
rename from app/src/routes/project/TopBar/PublishModal/index.tsx
rename to app/src/routes/editor/TopBar/PublishModal/index.tsx
diff --git a/app/src/routes/project/TopBar/SharePopover/index.tsx b/app/src/routes/editor/TopBar/SharePopover/index.tsx
similarity index 100%
rename from app/src/routes/project/TopBar/SharePopover/index.tsx
rename to app/src/routes/editor/TopBar/SharePopover/index.tsx
diff --git a/app/src/routes/project/TopBar/index.tsx b/app/src/routes/editor/TopBar/index.tsx
similarity index 100%
rename from app/src/routes/project/TopBar/index.tsx
rename to app/src/routes/editor/TopBar/index.tsx
diff --git a/app/src/routes/project/WebviewArea/BrowserControl.tsx b/app/src/routes/editor/WebviewArea/BrowserControl.tsx
similarity index 100%
rename from app/src/routes/project/WebviewArea/BrowserControl.tsx
rename to app/src/routes/editor/WebviewArea/BrowserControl.tsx
diff --git a/app/src/routes/project/WebviewArea/Frame.tsx b/app/src/routes/editor/WebviewArea/Frame.tsx
similarity index 100%
rename from app/src/routes/project/WebviewArea/Frame.tsx
rename to app/src/routes/editor/WebviewArea/Frame.tsx
diff --git a/app/src/routes/project/WebviewArea/GestureScreen.tsx b/app/src/routes/editor/WebviewArea/GestureScreen.tsx
similarity index 100%
rename from app/src/routes/project/WebviewArea/GestureScreen.tsx
rename to app/src/routes/editor/WebviewArea/GestureScreen.tsx
diff --git a/app/src/routes/project/WebviewArea/Overlay.tsx b/app/src/routes/editor/WebviewArea/Overlay.tsx
similarity index 100%
rename from app/src/routes/project/WebviewArea/Overlay.tsx
rename to app/src/routes/editor/WebviewArea/Overlay.tsx
diff --git a/app/src/routes/project/WebviewArea/ResizeHandles.tsx b/app/src/routes/editor/WebviewArea/ResizeHandles.tsx
similarity index 100%
rename from app/src/routes/project/WebviewArea/ResizeHandles.tsx
rename to app/src/routes/editor/WebviewArea/ResizeHandles.tsx
diff --git a/app/src/routes/project/WebviewArea/index.tsx b/app/src/routes/editor/WebviewArea/index.tsx
similarity index 100%
rename from app/src/routes/project/WebviewArea/index.tsx
rename to app/src/routes/editor/WebviewArea/index.tsx
diff --git a/app/src/routes/project/index.tsx b/app/src/routes/editor/index.tsx
similarity index 100%
rename from app/src/routes/project/index.tsx
rename to app/src/routes/editor/index.tsx
diff --git a/app/src/routes/index.tsx b/app/src/routes/index.tsx
index f3ec733aa..40be92756 100644
--- a/app/src/routes/index.tsx
+++ b/app/src/routes/index.tsx
@@ -1,8 +1,9 @@
+import { useRouteManager } from '@/components/RouteProvider';
 import { Route } from '@/lib/routes';
 import { observer } from 'mobx-react-lite';
-import { useRouteManager } from '../components/RouteProvider';
+import ProjectEditor from './editor';
 import Login from './login';
-import ProjectEditor from './project';
+import Projects from './projects';
 
 const Routes = observer(() => {
     const routeManager = useRouteManager();
@@ -12,6 +13,8 @@ const Routes = observer(() => {
             return <ProjectEditor />;
         case Route.LOGIN:
             return <Login />;
+        case Route.PROJECTS:
+            return <Projects />;
         default:
             return <div>404: Unknown route</div>;
     }
diff --git a/app/src/routes/projects/Carousel.tsx b/app/src/routes/projects/Carousel.tsx
new file mode 100644
index 000000000..a1bc21821
--- /dev/null
+++ b/app/src/routes/projects/Carousel.tsx
@@ -0,0 +1,137 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
+import useEmblaCarousel from 'embla-carousel-react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+type CarouselProps = {
+    slides: { id: number; imgSrc: string; title: string }[];
+};
+
+const EmblaCarousel: React.FC<CarouselProps> = ({ slides }) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel(
+        {
+            axis: 'y',
+            loop: false,
+            align: 'center',
+            dragFree: false,
+            skipSnaps: false,
+            containScroll: 'trimSnaps',
+        },
+        [WheelGesturesPlugin()],
+    );
+    const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+    const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+    const [scrollProgress, setScrollProgress] = useState(0);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
+
+    const onSelect = useCallback(() => {
+        if (!emblaApi) {
+            return;
+        }
+        setPrevBtnEnabled(emblaApi.canScrollPrev());
+        setNextBtnEnabled(emblaApi.canScrollNext());
+    }, [emblaApi]);
+
+    const onScroll = useCallback(() => {
+        if (!emblaApi) {
+            return;
+        }
+        const progress = emblaApi.scrollProgress();
+        setScrollProgress(progress);
+    }, [emblaApi]);
+
+    useEffect(() => {
+        if (!emblaApi) {
+            return;
+        }
+        onSelect();
+        onScroll();
+        emblaApi.on('select', onSelect);
+        emblaApi.on('scroll', onScroll);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect, onScroll]);
+
+    const calculateImageSize = (imageNaturalWidth: number, imageNaturalHeight: number) => {
+        if (!containerRef.current) {
+            return { width: 'auto', height: 'auto' };
+        }
+
+        const containerWidth = containerRef.current.clientWidth;
+        const containerHeight = containerRef.current.clientHeight;
+        const targetSize = Math.min(containerWidth, containerHeight) * 0.6;
+
+        const imageAspectRatio = imageNaturalWidth / imageNaturalHeight;
+        const containerAspectRatio = containerWidth / containerHeight;
+
+        if (imageAspectRatio > containerAspectRatio) {
+            return { width: targetSize, height: 'auto' };
+        } else {
+            return { width: 'auto', height: targetSize };
+        }
+    };
+
+    return (
+        <div className="embla relative h-full overflow-hidden" ref={containerRef}>
+            <div className="embla__viewport h-full" ref={emblaRef}>
+                <div className="embla__container h-full">
+                    {slides.map((slide) => (
+                        <div
+                            key={slide.id}
+                            className="embla__slide h-full relative flex items-center justify-center"
+                            style={{
+                                flex: '0 0 100%',
+                                minWidth: 0,
+                            }}
+                        >
+                            <img
+                                src={slide.imgSrc}
+                                alt={slide.title}
+                                className="rounded-lg object-contain"
+                                style={{
+                                    maxWidth: '60%',
+                                    maxHeight: '60%',
+                                }}
+                                onLoad={(e) => {
+                                    const img = e.target as HTMLImageElement;
+                                    const { width, height } = calculateImageSize(
+                                        img.naturalWidth,
+                                        img.naturalHeight,
+                                    );
+                                    img.style.width =
+                                        typeof width === 'number' ? `${width}px` : width;
+                                    img.style.height =
+                                        typeof height === 'number' ? `${height}px` : height;
+                                }}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <div className="embla__buttons absolute left-24 top-1/2 transform -translate-y-1/2 flex flex-col gap-4 z-10">
+                <button
+                    className="embla__button embla__button--prev"
+                    onClick={scrollPrev}
+                    disabled={!prevBtnEnabled}
+                >
+                    <ChevronUpIcon
+                        className={`w-8 h-8 ${prevBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                    />
+                </button>
+                <button
+                    className="embla__button embla__button--next"
+                    onClick={scrollNext}
+                    disabled={!nextBtnEnabled}
+                >
+                    <ChevronDownIcon
+                        className={`w-8 h-8 ${nextBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                    />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default EmblaCarousel;
diff --git a/app/src/routes/projects/index.tsx b/app/src/routes/projects/index.tsx
new file mode 100644
index 000000000..6644062f3
--- /dev/null
+++ b/app/src/routes/projects/index.tsx
@@ -0,0 +1,45 @@
+import { Button } from '@/components/ui/button';
+import { DotsVerticalIcon, Pencil2Icon } from '@radix-ui/react-icons';
+import EmblaCarousel from './Carousel';
+
+export default function Projects() {
+    const slides = [
+        { id: 0, imgSrc: 'https://picsum.photos/id/237/200/300', title: '0' },
+        { id: 1, imgSrc: 'https://picsum.photos/id/238/300/200', title: '1' },
+        { id: 2, imgSrc: 'https://picsum.photos/id/239/500/500', title: '2' },
+    ];
+
+    return (
+        <div className="flex h-[calc(100vh-2.5rem)] w-full relative">
+            <div className="absolute top-0 w-full h-8 flex justify-center items-center px-32">
+                <div className="bg-bg h-full w-48"> </div>
+                <div className="bg-bg mx-auto h-full w-48"> </div>
+                <div className="bg-bg h-full w-48"> </div>
+            </div>
+            <div className="w-3/5 h-full">
+                <EmblaCarousel slides={slides} />
+            </div>
+            <div className="w-2/5 h-full flex flex-col justify-center items-start p-20 gap-4 font-light">
+                <p className="text-text-active text-4xl ">Airbnb.com</p>
+                <div className="text-text flex gap-7 text-sm">
+                    <p>Last edited 3 days ago </p>
+                    <p> localhost: 3000</p>
+                </div>
+                <div className="flex gap-4">
+                    <Button
+                        size="default"
+                        variant={'outline'}
+                        className="gap-4 bg-bg-active border border-border-active"
+                    >
+                        <Pencil2Icon />
+                        <p> Edit App </p>
+                    </Button>
+                    <Button size="default" variant={'ghost'} className="gap-4">
+                        <DotsVerticalIcon />
+                        <p> Project settings</p>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/cli/package.json b/cli/package.json
index 7947592e5..a6f4cc316 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "onlook",
   "description": "The Onlook Command Line Interface",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "bin": {
     "onlook": "dist/index.cjs"
diff --git a/cli/src/create/index.ts b/cli/src/create/index.ts
index eea5e3386..d0066f961 100644
--- a/cli/src/create/index.ts
+++ b/cli/src/create/index.ts
@@ -1,11 +1,13 @@
 import { exec } from 'child_process';
-import * as degit from 'degit';
 import * as fs from 'fs';
 import ora from 'ora';
 import * as path from 'path';
 import { promisify } from 'util';
 import { NEXT_TEMPLATE_REPO } from './constant';
 
+// @ts-ignore
+import degit from 'degit';
+
 const execAsync = promisify(exec);
 
 export async function create(projectName: string) {