diff --git a/src/components/Config/ConfigDialog.tsx b/src/components/Config/ConfigDialog.tsx
index 20cab15..9bd2ec0 100644
--- a/src/components/Config/ConfigDialog.tsx
+++ b/src/components/Config/ConfigDialog.tsx
@@ -10,10 +10,10 @@ import ConfigInput from "./ConfigInput";
 
 const ConfigDialog = () => {
     const {
-        getProjectMode,
         getKAPLAYConfig,
         updateKAPLAYConfig,
         syncKAPLAYFile,
+        getProject,
     } = useProject();
     const {
         update,
@@ -81,7 +81,7 @@ const ConfigDialog = () => {
                         <h2 className="text-xl">KAPLAY Configuration</h2>
                     </header>
                     <main>
-                        {getProjectMode() === "project"
+                        {getProject().mode === "pj"
                             ? (
                                 <>
                                     <ConfigGroup title="screen & perf">
diff --git a/src/components/Editor/MonacoEditor.tsx b/src/components/Editor/MonacoEditor.tsx
index 803a588..12f11e0 100644
--- a/src/components/Editor/MonacoEditor.tsx
+++ b/src/components/Editor/MonacoEditor.tsx
@@ -3,7 +3,6 @@ import type { editor } from "monaco-editor";
 import { type FC } from "react";
 import { useEditor } from "../../hooks/useEditor";
 import { useProject } from "../../hooks/useProject";
-import { decompressCode } from "../../util/compressCode";
 import { debug } from "../../util/logs";
 import { configMonaco } from "./monacoConfig";
 
@@ -11,58 +10,46 @@ type Props = {
     onMount?: () => void;
 };
 
-const IMPORT_CODE_ALERT =
-    "Are you sure you want to open this example? This will permanently replace your current project. You can export your current project to save it.";
-
 const MonacoEditor: FC<Props> = (props) => {
-    const { updateFile, replaceProject, addFile, getFile } = useProject();
-    const {
-        setEditor,
-        run,
-        update,
-        currentFile,
-        setMonaco,
-        updateImageDecorations,
-        setGylphDecorations,
-        getCurrentFile,
-    } = useEditor();
+    const { updateFile, getFile } = useProject();
+    const { run, update, updateImageDecorations, getRuntime } = useEditor();
 
     const handleEditorBeforeMount = (monaco: Monaco) => {
         configMonaco(monaco);
-
-        const codeUrl = new URL(window.location.href).searchParams.get("code");
-        if (!codeUrl) return;
-
-        if (confirm(IMPORT_CODE_ALERT)) {
-            replaceProject({
-                files: new Map(),
-                assets: new Map(),
-                kaplayConfig: {},
-                version: "2.0.0",
-                mode: "example",
-            });
-
-            const code = decompressCode(codeUrl);
-
-            addFile({
-                name: "main.js",
-                value: code,
-                kind: "main",
-                language: "javascript",
-                path: "main.js",
-            });
-        }
     };
 
     const handleEditorMount = (
         editor: editor.IStandaloneCodeEditor,
         monaco: Monaco,
     ) => {
-        setEditor(editor);
-        setMonaco(monaco);
+        getRuntime().editor = editor;
+        getRuntime().monaco = monaco;
+        const currentFile = getRuntime().currentFile;
+
         props.onMount?.();
         editor.setValue(getFile(currentFile)?.value ?? "");
 
+        editor.onDidChangeModelContent((ev) => {
+            if (ev.isFlush) {
+                // set value
+
+                updateImageDecorations();
+            } else {
+                const currentProjectFile = getFile(getRuntime().currentFile);
+                if (!currentProjectFile) {
+                    return debug(0, "Current file not found");
+                }
+
+                debug(
+                    0,
+                    "Due to text editor change, updating file",
+                    currentProjectFile.path,
+                );
+
+                updateFile(currentProjectFile.path, editor.getValue());
+            }
+        });
+
         // Editor Shortcuts
         editor.addAction({
             id: "run-game",
@@ -88,32 +75,16 @@ const MonacoEditor: FC<Props> = (props) => {
         });
 
         let decorations = editor.createDecorationsCollection([]);
-        setGylphDecorations(decorations);
+        getRuntime().gylphDecorations = decorations;
 
         run();
     };
 
-    const handleEditorChange = (value: string | undefined) => {
-        const currentProjectFile = getFile(getCurrentFile());
-        if (!currentProjectFile) return debug(0, "Current file not found");
-
-        debug(
-            0,
-            "Due to editor change, updating file",
-            currentProjectFile.path,
-        );
-
-        updateFile(currentProjectFile.path, value ?? "");
-        updateImageDecorations();
-    };
-
     return (
         <Editor
             defaultLanguage="javascript"
-            defaultValue={getFile(currentFile)?.value}
             beforeMount={handleEditorBeforeMount}
             onMount={handleEditorMount}
-            onChange={handleEditorChange}
             theme="kaplayrk"
             language="javascript"
             options={{
@@ -126,6 +97,4 @@ const MonacoEditor: FC<Props> = (props) => {
     );
 };
 
-MonacoEditor.displayName = "MonacoEditor";
-
 export default MonacoEditor;
diff --git a/src/components/ExamplesBrowser/ExampleEntry.tsx b/src/components/ExamplesBrowser/ExampleEntry.tsx
index 8a49cbd..c2c29e6 100644
--- a/src/components/ExamplesBrowser/ExampleEntry.tsx
+++ b/src/components/ExamplesBrowser/ExampleEntry.tsx
@@ -2,6 +2,7 @@ import { assets } from "@kaplayjs/crew";
 import type { FC } from "react";
 import type { Example } from "../../data/examples";
 import { useEditor } from "../../hooks/useEditor";
+import { useProject } from "../../hooks/useProject";
 import { cn } from "../../util/cn";
 
 type Props = {
@@ -17,7 +18,8 @@ const imagesPerDifficulty: Record<string, string> = {
 };
 
 export const ExampleEntry: FC<Props> = ({ example, isProject }) => {
-    const { loadExample } = useEditor();
+    const { loadDefaultExample } = useProject();
+    const { loadProject } = useEditor();
 
     const handleClick = () => {
         const dialog = document.querySelector<HTMLDialogElement>(
@@ -27,8 +29,9 @@ export const ExampleEntry: FC<Props> = ({ example, isProject }) => {
         dialog?.close();
 
         if (isProject) {
+            loadProject(example.name);
         } else {
-            loadExample(example.index);
+            loadDefaultExample(example.index);
         }
     };
 
diff --git a/src/components/ExamplesBrowser/ExamplesBrowser.tsx b/src/components/ExamplesBrowser/ExamplesBrowser.tsx
index 3cfced3..969ba67 100644
--- a/src/components/ExamplesBrowser/ExamplesBrowser.tsx
+++ b/src/components/ExamplesBrowser/ExamplesBrowser.tsx
@@ -1,5 +1,5 @@
 import * as Tabs from "@radix-ui/react-tabs";
-import { examples } from "../../data/examples";
+import { examples, type Tag } from "../../data/examples";
 import { ExampleEntry } from "./ExampleEntry";
 import "./ExamplesBrowser.css";
 import { assets } from "@kaplayjs/crew";
@@ -37,7 +37,7 @@ export const ExamplesBrowser = () => {
                     />
                 </header>
 
-                <Tabs.Root className="overflow-auto">
+                <Tabs.Root className="overflow-auto" defaultValue="Projects">
                     <TabsList>
                         <TabTrigger
                             label="Projects"
@@ -57,13 +57,16 @@ export const ExamplesBrowser = () => {
                             <ExampleEntry
                                 example={{
                                     description: null,
-                                    formatedName: project.replace(
-                                        "pj-",
-                                        "",
-                                    ),
+                                    formatedName: project.slice(3),
                                     name: project,
                                     index: "0",
+                                    tags: [
+                                        ...project.startsWith("pj-")
+                                            ? ["project"] as Tag[]
+                                            : ["example"] as Tag[],
+                                    ],
                                 }}
+                                isProject
                                 key={project}
                             />
                         ))}
diff --git a/src/components/FileTree/FileTree.tsx b/src/components/FileTree/FileTree.tsx
index 5e8eeaa..72d25ed 100644
--- a/src/components/FileTree/FileTree.tsx
+++ b/src/components/FileTree/FileTree.tsx
@@ -4,14 +4,14 @@ import FileFolder from "./FileFolder";
 
 const FileTree = () => {
     const {
-        getProjectMode,
         getFile,
         getFilesByFolder,
+        getProject,
     } = useProject();
 
     return (
         <div className="flex flex-col p-2 gap-2">
-            {getProjectMode() === "project" && (
+            {getProject().mode === "pj" && (
                 <>
                     <FileFolder level={1} title="Scenes">
                         {getFilesByFolder("scenes").length === 0
diff --git a/src/components/Playground/GameView.tsx b/src/components/Playground/GameView.tsx
index caffd67..a87b8d3 100644
--- a/src/components/Playground/GameView.tsx
+++ b/src/components/Playground/GameView.tsx
@@ -1,18 +1,13 @@
 import { type FC } from "react";
-import { useEditor } from "../../hooks/useEditor";
 
 type GameViewProps = {
     onLoad?: () => void;
 };
 
 const GameView: FC<GameViewProps> = ({ onLoad }) => {
-    const {
-        setIframe,
-    } = useEditor();
-
     return (
         <iframe
-            ref={setIframe}
+            id="game-view"
             tabIndex={0}
             onLoad={onLoad}
             style={{
diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx
index 110d7a4..e346ee6 100644
--- a/src/components/Playground/Playground.tsx
+++ b/src/components/Playground/Playground.tsx
@@ -18,7 +18,7 @@ import GameView from "./GameView";
 const Playground = () => {
     const {
         project,
-        getProjectMode,
+        getProject,
         createNewProject,
     } = useProject();
     const [loadingProject, setLoadingProject] = useState<boolean>(true);
@@ -32,7 +32,7 @@ const Playground = () => {
     useEffect(() => {
         if (project.files.size > 0) setLoadingProject(false);
         else {
-            createNewProject();
+            createNewProject("pj");
         }
     }, [project]);
 
@@ -57,7 +57,7 @@ const Playground = () => {
                                 <Allotment.Pane
                                     snap
                                     minSize={200}
-                                    visible={getProjectMode() === "project"}
+                                    visible={getProject().mode === "pj"}
                                 >
                                     <FileTree />
                                 </Allotment.Pane>
@@ -70,8 +70,7 @@ const Playground = () => {
                                         </Allotment.Pane>
                                         <Allotment.Pane
                                             snap
-                                            visible={getProjectMode()
-                                                === "project"}
+                                            visible={getProject().mode === "pj"}
                                         >
                                             <Assets />
                                         </Allotment.Pane>
diff --git a/src/components/Toolbar/ExampleList.tsx b/src/components/Toolbar/ExampleList.tsx
index 15b055d..17abae6 100644
--- a/src/components/Toolbar/ExampleList.tsx
+++ b/src/components/Toolbar/ExampleList.tsx
@@ -4,16 +4,16 @@ import { useEditor } from "../../hooks/useEditor";
 import { useProject } from "../../hooks/useProject";
 
 const ExampleList: FC = () => {
-    const { getSavedProjects } = useProject();
-    const { loadExample, loadProject } = useEditor();
+    const { getSavedProjects, loadDefaultExample } = useProject();
+    const { loadProject } = useEditor();
 
     const handleExampleChange = (ev: ChangeEvent<HTMLSelectElement>) => {
         const exampleIndex = ev.target.selectedOptions[0].getAttribute(
-            "data-example",
+            "data-def-example",
         );
 
         if (exampleIndex) {
-            loadExample(exampleIndex);
+            loadDefaultExample(exampleIndex);
         } else {
             loadProject(ev.target.value);
         }
@@ -30,16 +30,26 @@ const ExampleList: FC = () => {
                     Projects
                 </option>
 
-                {getSavedProjects().map((project) => (
-                    <option key={project} value={project} data-project>
+                {getSavedProjects("pj").map((project) => (
+                    <option key={project} value={project}>
                         {project.replace("pj-", "")}
                     </option>
                 ))}
 
+                <option className="text-md" disabled value="none">
+                    User Examples
+                </option>
+
+                {getSavedProjects("ex").map((project) => (
+                    <option key={project} value={project}>
+                        {project.replace("ex-", "")}
+                    </option>
+                ))}
+
                 <option className="text-md" disabled>KAPLAY Examples</option>
 
                 {examples.map((example) => (
-                    <option key={example.name} data-example={example.index}>
+                    <option key={example.name} data-def-example={example.index}>
                         {example.name}
                     </option>
                 ))}
diff --git a/src/components/Toolbar/ProjectStatus.tsx b/src/components/Toolbar/ProjectStatus.tsx
index a27eaf9..b034884 100644
--- a/src/components/Toolbar/ProjectStatus.tsx
+++ b/src/components/Toolbar/ProjectStatus.tsx
@@ -2,35 +2,33 @@ import { assets } from "@kaplayjs/crew";
 import { useProject } from "../../hooks/useProject";
 
 const ProjectStatus = () => {
-    const {
-        getProjectMode,
-        project,
-        saveProject,
-        getProjectName,
-        setProjectName,
-        isProjectSaved,
-    } = useProject();
+    const { saveProject, getProject, setProject, projectIsSaved } =
+        useProject();
 
     const handleSaveProject = () => {
-        saveProject(getProjectName());
+        saveProject(getProject().name);
     };
 
     const handleEditName = () => {
-        const projectName = prompt("Project name");
+        const projectName = prompt("New project name?");
         if (!projectName) return;
 
-        setProjectName(projectName);
+        setProject({ name: projectName });
     };
 
+    if (getProject().isDefault) return;
+
     return (
         <div className="flex flex-row gap-2">
             <div className="uppercase | badge badge-lg badge-primary">
-                {getProjectMode() === "project" ? "PJ" : "EX"}
+                {getProject().mode}
             </div>
 
             <div>
-                {project.name || "Untitled Project"}
-                {!isProjectSaved(getProjectName()) && <span>*</span>}
+                {getProject().name}
+                {!projectIsSaved(getProject().name, getProject().mode) && (
+                    <span>*</span>
+                )}
             </div>
 
             <button
diff --git a/src/components/Toolbar/Projects.tsx b/src/components/Toolbar/Projects.tsx
index cc83507..01399c7 100644
--- a/src/components/Toolbar/Projects.tsx
+++ b/src/components/Toolbar/Projects.tsx
@@ -2,12 +2,11 @@ import { assets } from "@kaplayjs/crew";
 import type { FC } from "react";
 import { useEditor } from "../../hooks/useEditor";
 import { useProject } from "../../hooks/useProject";
-import type { Project } from "../../stores/project";
 import { downloadBlob } from "../../util/download";
 import ToolbarButton from "./ToolbarButton";
 
 const Projects: FC = () => {
-    const { project, replaceProject, createNewProject } = useProject();
+    const { project, createNewProject } = useProject();
     const { update, run, showNotification } = useEditor();
 
     const handleDownload = () => {
@@ -20,21 +19,22 @@ const Projects: FC = () => {
     };
 
     const handleProjectUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
+        alert("reimplement project upload");
+        // const file = e.target.files?.[0];
+        // if (!file) return;
 
-        const reader = new FileReader();
+        // const reader = new FileReader();
 
-        reader.onload = (e) => {
-            const project = JSON.parse(e.target?.result as string) as Project;
-            replaceProject(project);
-        };
+        // reader.onload = (e) => {
+        //     const project = JSON.parse(e.target?.result as string) as Project;
+        //     replaceProject(project);
+        // };
 
-        reader.readAsText(file);
+        // reader.readAsText(file);
     };
 
     const handleProjectReset = () => {
-        createNewProject();
+        createNewProject("pj");
         update();
         run();
     };
diff --git a/src/components/Toolbar/ToolbarToolsMenu.tsx b/src/components/Toolbar/ToolbarToolsMenu.tsx
index 7b8bd81..8472d75 100644
--- a/src/components/Toolbar/ToolbarToolsMenu.tsx
+++ b/src/components/Toolbar/ToolbarToolsMenu.tsx
@@ -17,7 +17,7 @@ const ToolbarToolItem: FC<PropsWithChildren> = ({ children }) => {
 };
 
 const ToolbarToolsMenu: FC = () => {
-    const { getProjectMode } = useProject();
+    const { getProject } = useProject();
     const { run } = useEditor();
 
     return (
@@ -31,7 +31,7 @@ const ToolbarToolsMenu: FC = () => {
                     keys={["ctrl", "s"]}
                 />
             </ToolbarToolItem>
-            {getProjectMode() == "example" && (
+            {getProject().mode == "ex" && (
                 <ToolbarToolItem>
                     <ToolbarButton
                         icon={assets.bag.outlined}
diff --git a/src/data/examples.ts b/src/data/examples.ts
index 44fd358..b5d930d 100644
--- a/src/data/examples.ts
+++ b/src/data/examples.ts
@@ -1,6 +1,6 @@
 import examplesList from "./exampleList.json";
 
-type tag =
+export type Tag =
     | "basic concepts"
     | "physics"
     | "animation"
@@ -11,7 +11,9 @@ type tag =
     | "input"
     | "effects"
     | "math"
-    | "game";
+    | "game"
+    | "project"
+    | "example";
 
 export type Example = {
     name: string;
@@ -21,7 +23,7 @@ export type Example = {
     formatedName: string;
     hidden?: boolean;
     version?: string;
-    tags?: tag[];
+    tags?: Tag[];
     difficulty?: "easy" | "medium" | "hard" | "auto";
     image?: string;
 };
diff --git a/src/hooks/useEditor.ts b/src/hooks/useEditor.ts
index e4ec9e0..8d8bf85 100644
--- a/src/hooks/useEditor.ts
+++ b/src/hooks/useEditor.ts
@@ -4,103 +4,68 @@ import { createRef, type MutableRefObject } from "react";
 import { toast } from "react-toastify";
 import { create } from "zustand";
 import examplesList from "../data/exampleList.json";
-import type { File } from "../stores/storage/files";
+import { examples } from "../data/examples";
 import { wrapGame } from "../util/compiler";
 import { debug } from "../util/logs";
 import { useProject } from "./useProject";
-import { examples } from "../data/examples";
 
-/** The internal API to interact with the editor */
-type EditorStore = {
-    /** Monaco's editor instance */
+type EditorRuntime = {
     editor: editor.IStandaloneCodeEditor | null;
-    /** Monaco instance */
     monaco: Monaco | null;
-    /** The current file */
     currentFile: string;
-    /** Gylph decorations */
     gylphDecorations: editor.IEditorDecorationsCollection | null;
-    /** Set Monaco's editor instance */
-    setEditor: (editor: editor.IStandaloneCodeEditor) => void;
-    /** Set Monaco instance */
-    setMonaco: (monaco: Monaco) => void;
-    /** Set the current file */
-    setCurrentFile: (path: string) => void;
-    /** Get the current file path */
-    getCurrentFile: () => string;
-    /** Set gylph decorations */
-    setGylphDecorations: (
-        gylphDecorations: editor.IEditorDecorationsCollection,
-    ) => void;
-    /** Sync content of the current file and Monaco view */
-    update: () => void;
-    /** Set's Monaco's theme */
-    setTheme: (theme: string) => void;
-    /** GameView iFrame */
     iframe: MutableRefObject<HTMLIFrameElement>;
-    /** Set iFrame */
-    setIframe: (iframe: HTMLIFrameElement) => void;
-    /** Run the game */
+};
+
+type EditorStore = {
+    runtime: {
+        editor: editor.IStandaloneCodeEditor | null;
+        monaco: Monaco | null;
+        currentFile: string;
+        gylphDecorations: editor.IEditorDecorationsCollection | null;
+        iframe: MutableRefObject<HTMLIFrameElement>;
+    };
+    update: (value?: string) => void;
     run: () => void;
-    /** Update image decorations */
+    getRuntime: () => EditorRuntime;
+    setTheme: (theme: string) => void;
     updateImageDecorations: () => void;
-    /** Display notification */
     showNotification: (message: string) => void;
-    /** Set value in Monaco instance */
     setEditorValue: (value: string) => void;
-    /** Load an example */
-    loadExample: (example: string) => void;
-    /** Load a project */
+    loadDefaultExample: (example: string) => void;
     loadProject: (project: string) => void;
 };
 
-export const useEditor = create<EditorStore>((set, get) => ({
-    editor: null,
-    setEditor: (editor) => {
-        set({ editor });
-    },
-    monaco: null,
-    setMonaco: (monaco) => {
-        set({ monaco });
-    },
-    gylphDecorations: null,
-    setGylphDecorations: (gylphDecorations) => {
-        set({ gylphDecorations });
-    },
-    currentFile: "main.js",
-    setCurrentFile: (path) => {
-        set({ currentFile: path });
-        get().update();
+export const useEditor = create<EditorStore>((_set, get) => ({
+    runtime: {
+        editor: null,
+        monaco: null,
+        currentFile: "main.js",
+        gylphDecorations: null,
+        iframe: createRef() as MutableRefObject<HTMLIFrameElement>,
+        isDefaultExample: false,
     },
-    getCurrentFile: () => {
-        return get().currentFile;
-    },
-    iframe: createRef() as MutableRefObject<HTMLIFrameElement>,
-    setIframe: (iframe) => {
-        if (!iframe) {
+    getRuntime: () => get().runtime,
+    update: (customValue?: string) => {
+        if (customValue) {
+            debug(0, "Editor value updated with custom value");
+
+            get().setEditorValue(customValue);
             return;
         }
-        const newRef = createRef() as MutableRefObject<HTMLIFrameElement>;
-        newRef.current = iframe;
 
-        set({ iframe: newRef });
-    },
-    update: () => {
         const currentFile = useProject.getState().getFile(
-            get().getCurrentFile(),
+            get().getRuntime().currentFile,
         );
         if (!currentFile) return;
 
-        console.debug(
-            "Editor value updated with currentFile",
-            currentFile.path,
-        );
+        debug(0, "Editor value updated with", currentFile.path);
 
         get().setEditorValue(currentFile.value);
         get().updateImageDecorations();
     },
     setTheme: (theme: string) => {
-        const editor = get().editor;
+        const editor = get().runtime.editor;
         if (!editor) return;
 
         editor.updateOptions({
@@ -108,15 +73,15 @@ export const useEditor = create<EditorStore>((set, get) => ({
         });
     },
     run() {
-        const iframe = get().iframe.current;
+        const iframe = document.querySelector<HTMLIFrameElement>("#game-view");
+        if (!iframe) return;
+
         const {
             getKAPLAYFile,
             getMainFile,
             getAssetsFile,
-            getProjectMode,
-            project: { files },
-        } = useProject
-            .getState();
+            getProject,
+        } = useProject.getState();
         if (!iframe) return;
 
         let KAPLAYFile = "";
@@ -129,13 +94,13 @@ export const useEditor = create<EditorStore>((set, get) => ({
         mainFile = getMainFile()?.value ?? "";
         assetsFile = getAssetsFile()?.value ?? "";
 
-        files.forEach((file) => {
+        getProject().files.forEach((file) => {
             if (file.kind !== "scene") return;
 
             sceneFiles += `\n${file.value}\n`;
         });
 
-        if (getProjectMode() === "project") {
+        if (getProject().mode === "pj") {
             parsedFiles =
                 `${KAPLAYFile}\n\n ${assetsFile}\n\n ${sceneFiles}\n\n ${mainFile}`;
         } else {
@@ -146,10 +111,10 @@ export const useEditor = create<EditorStore>((set, get) => ({
     },
     updateImageDecorations() {
         debug(0, "Updating gylph decorations");
-        const editor = get().editor;
-        const monaco = get().monaco;
+        const editor = get().runtime.editor;
+        const monaco = get().runtime.monaco;
+        const gylphDecorations = get().runtime.gylphDecorations;
         const model = editor?.getModel();
-        const gylphDecorations = get().gylphDecorations;
 
         if (!editor || !monaco || !model || !gylphDecorations) {
             return console.error("No editor");
@@ -210,39 +175,32 @@ export const useEditor = create<EditorStore>((set, get) => ({
         toast(message);
     },
     setEditorValue(value) {
-        console.debug("Setting editor value to", value);
+        debug(0, "Setting editor value to", value);
 
-        const editor = get().editor;
+        const editor = get().runtime.editor;
         if (!editor) return console.error("No editor");
 
         editor.setValue(value);
     },
-    loadExample(exampleIndex) {
-        const exampleId = examplesList.filter(example => example.index === exampleIndex)[0].name;
-        const exampleName = examples.filter(example => example.name === exampleId)[0].formatedName
-        
-        useProject.persist.setOptions({
-            name: exampleName,
-        });
+    loadDefaultExample(exampleIndex) {
+        const exampleId =
+            examplesList.filter(example => example.index === exampleIndex)[0]
+                .name;
+        const exampleName =
+            examples.filter(example => example.name === exampleId)[0]
+                .formatedName;
 
-        useProject.getState().replaceProject({
+        useProject.persist.setOptions({
             name: exampleName,
-            assets: new Map(),
-            files: new Map<string, File>(),
-            kaplayConfig: {},
-            mode: "example",
-            version: "2.0.0",
         });
 
-        useProject.getState().addFile({
-            name: "main.js",
-            value: examplesList[Number(exampleIndex)].code,
-            kind: "main",
-            language: "javascript",
-            path: "main.js",
-        });
+        useProject.getState().createNewProject("ex");
+        useProject.getState().updateFile(
+            "main.js",
+            examplesList[Number(exampleIndex)].code,
+        );
 
-        get().editor?.setScrollTop(0);
+        get().runtime.editor?.setScrollTop(0);
         get().update();
         get().run();
     },
@@ -253,7 +211,7 @@ export const useEditor = create<EditorStore>((set, get) => ({
 
         useProject.persist.rehydrate();
 
-        get().editor?.setScrollTop(0);
+        get().runtime.editor?.setScrollTop(0);
         get().update();
         get().run();
     },
diff --git a/src/hooks/useProject.ts b/src/hooks/useProject.ts
index 91137ee..bfcf4c3 100644
--- a/src/hooks/useProject.ts
+++ b/src/hooks/useProject.ts
@@ -16,7 +16,7 @@ export const useProject = create<Store>()(persist((...a) => ({
     ...createAssetsSlice(...a),
     ...createKaboomConfigSlice(...a),
 }), {
-    name: "Untitled Project",
+    name: "upj-Untitled",
     storage: {
         getItem: (name) => {
             const str = localStorage.getItem(name);
diff --git a/src/stores/project.ts b/src/stores/project.ts
index 2e9c7e3..af189e0 100644
--- a/src/stores/project.ts
+++ b/src/stores/project.ts
@@ -1,43 +1,35 @@
 import type { KAPLAYOpt } from "kaplay";
 import type { StateCreator } from "zustand";
 import { defaultProject } from "../config/defaultProject";
+import examplesList from "../data/exampleList.json";
 import { useEditor } from "../hooks/useEditor";
 import { useProject } from "../hooks/useProject";
 import { debug } from "../util/logs";
 import type { Asset, AssetsSlice } from "./storage/assets";
 import type { File, FilesSlice } from "./storage/files";
 
+export type ProjectMode = "ex" | "pj";
+
 export type Project = {
     name: string;
     version: string;
     assets: Map<string, Asset>;
     files: Map<string, File>;
     kaplayConfig: KAPLAYOpt;
-    mode?: "example" | "project";
+    mode: ProjectMode;
+    isDefault?: boolean;
 };
 
 export interface ProjectSlice {
     /** The current project */
     project: Project;
-    /** Creates a new project */
-    createNewProject: () => void;
-    /** Replace the project with a new project */
-    replaceProject: (project: Project) => void;
-    /** Set the project mode */
-    setProjectMode: (mode: Project["mode"]) => void;
-    /** Get project mode */
-    getProjectMode: () => Project["mode"];
-    /** Get project name */
-    getProjectName: () => string;
-    /** Get the list of saved projects */
-    getSavedProjects: () => string[];
-    /** Project exists */
-    isProjectSaved: (name: string) => boolean;
-    /** Set project name */
-    setProjectName: (name: string) => void;
-    /** Save a project */
+    getProject(): Project;
+    setProject(project: Partial<Project>): void;
+    createNewProject: (filter: ProjectMode, example?: string) => void;
+    getSavedProjects: (filter?: "pj" | "ex") => string[];
+    projectIsSaved: (name: string, filter: "pj" | "ex") => boolean;
     saveProject: (name: string) => void;
-    /** Load defaut setup for every project mode */
+    loadDefaultExample: (example: string) => void;
     loadDefaultSetup: (
         mode: Project["mode"],
         files: Map<string, File>,
@@ -52,101 +44,104 @@ export const createProjectSlice: StateCreator<
     ProjectSlice
 > = (set, get) => ({
     project: {
-        name: "Untitled Project",
+        name: "Untitled",
         version: "2.0.0",
         files: new Map(),
         assets: new Map(),
         kaplayConfig: {},
-        mode: "project",
+        mode: "pj",
+        saved: false,
+    },
+    getProject: () => {
+        return get().project;
     },
-    createNewProject: () => {
-        debug(0, "creating a new project");
+    setProject: (project) => {
+        set(() => ({
+            project: {
+                ...get().project,
+                ...project,
+            },
+        }));
+    },
+    createNewProject: (filter: ProjectMode, exampleIndex?: string) => {
+        debug(0, "Creating a new project");
 
-        const files = new Map();
+        const files = new Map<string, File>();
         const assets = new Map();
 
         // Load default setup
-        get().loadDefaultSetup("project", files, assets);
-        debug(1, "New files for the new project", files, assets);
+        if (filter === "pj") {
+            get().loadDefaultSetup("pj", files, assets);
+            debug(1, "New files for the new project", files, assets);
+        } else if (exampleIndex) {
+            const example = examplesList.filter(example =>
+                example.index === exampleIndex
+            )[0];
+
+            files.set("main.js", {
+                kind: "main",
+                language: "javascript",
+                name: "main.js",
+                path: "main.js",
+                value: example.code,
+            });
+        } else {
+            get().loadDefaultSetup("ex", files, assets);
+            debug(1, "New files for the new example project", files, assets);
+        }
+
+        useEditor.getState().update(files.get("main.js")?.value);
 
         useProject.persist.setOptions({
-            name: "Untitled Project",
+            name: `u${filter}-Untitled`,
         });
         useProject.persist.rehydrate();
 
         set(() => ({
             project: {
-                name: "Project #" + get().getSavedProjects().length,
+                name: `${filter}#${get().getSavedProjects().length}`,
                 version: "2.0.0",
                 files: files,
                 assets: assets,
                 kaplayConfig: {},
-                mode: "project",
-            },
-        }));
-
-        useEditor.getState().update();
-    },
-    replaceProject: (project) => {
-        const { run, update } = useEditor.getState();
-
-        set(() => ({
-            project: project,
-        }));
-
-        window.history.replaceState({}, document.title, "/");
-        update();
-        run();
-    },
-    getProjectName: () => {
-        return get().project.name;
-    },
-    setProjectName: (name: string) => {
-        set(() => ({
-            project: {
-                ...get().project,
-                name: name,
+                mode: filter,
+                saved: false,
+                isDefault: exampleIndex ? true : false,
             },
         }));
     },
-    setProjectMode: (mode) => {
-        set(() => ({
-            project: {
-                ...get().project,
-                mode: mode,
-            },
-        }));
-    },
-    getProjectMode: () => {
-        return get().project.mode;
-    },
     saveProject: (name: string) => {
         useProject.persist.setOptions({
-            name: `pj-${name}`,
+            name: `${get().project.mode}-${name}`,
         });
 
         useProject.persist.rehydrate();
 
-        localStorage.removeItem(`Untitled Project`);
+        localStorage.removeItem(`u${get().project.mode}-Untitled`);
     },
-    isProjectSaved: (name: string) => {
-        return get().getSavedProjects().includes(`pj-${name}`);
+    projectIsSaved: (name: string, filter: "pj" | "ex") => {
+        return get().getSavedProjects().includes(`${filter}-${name}`);
     },
-    getSavedProjects: () => {
+    getSavedProjects: (filter) => {
+        const prefix = filter ? `${filter}-` : "";
         let keys: string[] = [];
 
         for (let i = 0, len = localStorage.length; i < len; ++i) {
             const localKey = localStorage.key(i);
 
-            if (localKey && localKey.startsWith("pj-")) {
+            if (localKey && localKey.startsWith(prefix)) {
                 keys.push(localKey);
             }
         }
 
         return keys;
     },
+    loadDefaultExample: (exampleIndex) => {
+        debug(0, "Loading default example", exampleIndex);
+        get().createNewProject("ex", exampleIndex);
+    },
     loadDefaultSetup: (mode, files, assets) => {
-        if (mode === "project") {
+        if (mode === "pj") {
             defaultProject.files.forEach((file) => {
                 files.set(file.path, file);
             });
diff --git a/src/stores/storage/files.ts b/src/stores/storage/files.ts
index 0040890..be95c7b 100644
--- a/src/stores/storage/files.ts
+++ b/src/stores/storage/files.ts
@@ -1,4 +1,5 @@
 import type { StateCreator } from "zustand";
+import { debug } from "../../util/logs";
 import type { KAPLAYConfigSlice } from "../kaplayConfig";
 import type { ProjectSlice } from "../project";
 
@@ -52,12 +53,13 @@ export const createFilesSlice: StateCreator<
     FilesSlice
 > = (set, get) => ({
     addFile(file) {
+        debug(0, "Adding file", file.path);
         get().project.files.set(file.path, file);
         set({});
     },
 
     removeFile(path) {
-        console.debug("Removing file", path);
+        debug(0, "Removing file", path);
         const files = get().project.files;
 
         const foundFile = files.has(path) ? files.get(path) : null;
@@ -72,11 +74,18 @@ export const createFilesSlice: StateCreator<
     },
 
     updateFile(path, value) {
-        console.debug("Updating file", path);
+        debug(0, "Updating file", path);
         const files = get().project.files;
 
         const foundFile = files.has(path) ? files.get(path) : null;
-        if (!foundFile) return console.debug("File not found", path);
+        if (!foundFile) return debug(2, "File not found", path);
+
+        if (get().getProject().isDefault) {
+            debug(0, "Default project, dettaching", path);
+            get().setProject({
+                isDefault: false,
+            });
+        }
 
         get().addFile({
             ...foundFile,