diff --git a/package.json b/package.json
index 95b7342..fc1d754 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "dev:bin": "node scripts/cli.js --examples=fakeExamples"
   },
   "dependencies": {
+    "@fontsource-variable/rubik": "^5.1.0",
     "@formkit/drag-and-drop": "^0.0.38",
     "@kaplayjs/crew": "^1.6.1",
     "@monaco-editor/react": "^4.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0cfe511..0c1df28 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@fontsource-variable/rubik':
+        specifier: ^5.1.0
+        version: 5.1.0
       '@formkit/drag-and-drop':
         specifier: ^0.0.38
         version: 0.0.38
@@ -443,6 +446,9 @@ packages:
   '@floating-ui/utils@0.2.8':
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
 
+  '@fontsource-variable/rubik@5.1.0':
+    resolution: {integrity: sha512-gmh3xts3ARd0ktWW/VX+MVxhJr6TxHVeGLsQEaQXDVxvuNjn5WRucfKfXK3EVN2BcgRxUe1Fctv/v9zgEd0DUg==}
+
   '@formkit/drag-and-drop@0.0.38':
     resolution: {integrity: sha512-3uJFcqz1xL7x/5pClDnyqEDfyFRDFH+75MFpJYXnVF17oekxLrwbUaOBN7ttKGn1jW2MdojRw4WMnSN1iLryvw==}
 
@@ -2034,6 +2040,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.8': {}
 
+  '@fontsource-variable/rubik@5.1.0': {}
+
   '@formkit/drag-and-drop@0.0.38': {}
 
   '@isaacs/cliui@8.0.2':
diff --git a/src/App.tsx b/src/App.tsx
index 014190f..6a0e5e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import "allotment/dist/style.css";
 import "./styles/index.css";
 import "./styles/toast.css";
 import "./util/hotkeys.js";
+import "@fontsource-variable/rubik";
 
 export const App = () => {
     return <Playground />;
diff --git a/src/components/Config/ConfigDialog.tsx b/src/components/Config/ConfigDialog.tsx
index 5fbc064..9b3078e 100644
--- a/src/components/Config/ConfigDialog.tsx
+++ b/src/components/Config/ConfigDialog.tsx
@@ -1,32 +1,42 @@
-import { Tooltip } from "react-tooltip";
-import { EditorConfig } from "./Sections/EditorConfig";
+import { useProject } from "../../hooks/useProject";
+import { debug } from "../../util/logs";
+import { Dialog } from "../UI/Dialog";
+import { ConfigProject } from "./ConfigProject";
 
 const ConfigDialog = () => {
-    return (
-        <dialog id="config" className="modal">
-            <main className="modal-box overflow-hidden px-0 py-0">
-                <Tooltip id="config-dialog" />
-                <section className="max-h-[400px] overflow-y-auto p-4">
-                    <EditorConfig />
-                </section>
+    const { setProject } = useProject();
+
+    const handleDeleteAllData = () => {
+        if (confirm("Are you sure you want to delete all data?")) {
+            localStorage.clear();
+            location.reload();
+        }
+    };
+
+    const handleSave = () => {
+        const versionEl = document.querySelector<HTMLSelectElement>(
+            "#version-selector",
+        );
 
-                <footer className="p-4 bg-base-200">
-                    <div className="modal-action">
-                        <form method="dialog">
-                            <button className="btn btn-primary">
-                                Save Changes
-                            </button>
-                        </form>
-                    </div>
-                </footer>
-            </main>
-            <form
-                method="dialog"
-                className="modal-backdrop"
+        if (!versionEl) return;
+
+        const version = versionEl.value;
+        debug(0, "Project KAPLAY version set to", version);
+        setProject({ kaplayVersion: version });
+    };
+
+    return (
+        <Dialog id="config" onSave={handleSave}>
+            <ConfigProject />
+            <div className="divider"></div>
+            <h2 className="text-2xl font-bold pb-4">Misc configuration</h2>
+            <button
+                className="btn btn-warning"
+                onClick={handleDeleteAllData}
             >
-                <button>Close</button>
-            </form>
-        </dialog>
+                Delete All Data
+            </button>
+        </Dialog>
     );
 };
 
diff --git a/src/components/Config/ConfigProject.tsx b/src/components/Config/ConfigProject.tsx
new file mode 100644
index 0000000..37bda3d
--- /dev/null
+++ b/src/components/Config/ConfigProject.tsx
@@ -0,0 +1,51 @@
+import { type Packument } from "query-registry";
+import { useEffect, useState } from "react";
+
+async function getPackageInfo(name: string): Promise<Packument> {
+    const endpoint = `https://registry.npmjs.org/${name}`;
+    const res = await fetch(endpoint);
+    const data = await res.json();
+    return data;
+}
+
+export const ConfigProject = () => {
+    const [packageInfo, setPackageInfo] = useState<Packument | null>(
+        null,
+    );
+
+    useEffect(() => {
+        async function fetchPackageInfo() {
+            const info = await getPackageInfo("kaplay");
+            setPackageInfo(info);
+        }
+
+        fetchPackageInfo();
+    }, []);
+
+    return (
+        <>
+            <h2 className="text-2xl font-bold pb-4">Project configuration</h2>
+
+            <label className="form-control w-full max-w-xs">
+                <div className="label">
+                    <span className="label-text">
+                        KAPLAY.js version:
+                    </span>
+                </div>
+                <select
+                    id="version-selector"
+                    className="select select-bordered"
+                >
+                    {packageInfo
+                        && Object.keys(packageInfo.versions).reverse().map((
+                            version,
+                        ) => (
+                            <option key={version} value={version}>
+                                {version}
+                            </option>
+                        ))}
+                </select>
+            </label>
+        </>
+    );
+};
diff --git a/src/components/Config/Sections/EditorConfig.tsx b/src/components/Config/Sections/EditorConfig.tsx
deleted file mode 100644
index 8ad34b9..0000000
--- a/src/components/Config/Sections/EditorConfig.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { type Packument } from "query-registry";
-import { useEffect, useState } from "react";
-
-async function getPackageInfo(name: string): Promise<Packument> {
-    const endpoint = `https://registry.npmjs.org/${name}`;
-    const res = await fetch(endpoint);
-    const data = await res.json();
-    return data;
-}
-
-export const VersionSelector = () => {
-    const [packageInfo, setPackageInfo] = useState<Packument | null>(
-        null,
-    );
-
-    useEffect(() => {
-        async function fetchPackageInfo() {
-            const info = await getPackageInfo("kaplay");
-            setPackageInfo(info);
-            console.log(info.versions);
-        }
-
-        fetchPackageInfo();
-    }, []);
-
-    return (
-        <select className="select select-bordered">
-            {packageInfo
-                && Object.keys(packageInfo.versions).map((version) => (
-                    <option key={version} value={version}>
-                        {version}
-                    </option>
-                ))}
-        </select>
-    );
-};
-
-// Configurations of the editor
-export const EditorConfig = () => {
-    const handleDeleteAllData = () => {
-        if (confirm("Are you sure you want to delete all data?")) {
-            localStorage.clear();
-            location.reload();
-        }
-    };
-
-    return (
-        <section>
-            <header className="flex items-center font-bold">
-                <h2 className="text-xl">Editor Configuration</h2>
-            </header>
-
-            <main className="py-4 flex flex-col gap-2">
-                <button
-                    className="btn btn-warning"
-                    onClick={handleDeleteAllData}
-                >
-                    Delete All Data
-                </button>
-            </main>
-        </section>
-    );
-};
diff --git a/src/components/FileTree/FileTree.tsx b/src/components/FileTree/FileTree.tsx
index d6243ab..e2a819a 100644
--- a/src/components/FileTree/FileTree.tsx
+++ b/src/components/FileTree/FileTree.tsx
@@ -3,8 +3,8 @@ import { FileFold } from "./FileFold";
 
 export const FileTree = () => {
     return (
-        <View direction={"column"} justify="between" height="full">
-            <View direction={"column"} padding={2} gap={2}>
+        <View direction={"column"} justify="between" height="full" el={"div"}>
+            <View direction={"column"} padding={2} gap={2} el="div">
                 <FileFold
                     level={1}
                     title="Scenes"
@@ -18,7 +18,7 @@ export const FileTree = () => {
                 />
             </View>
 
-            <View direction="column" padding={2} gap={2}>
+            <View direction="column" padding={2} gap={2} el={"div"}>
                 <ul className="flex flex-col font-bold">
                     <li className="link link-primary">
                         <a
diff --git a/src/components/UI/Dialog.tsx b/src/components/UI/Dialog.tsx
new file mode 100644
index 0000000..e143119
--- /dev/null
+++ b/src/components/UI/Dialog.tsx
@@ -0,0 +1,42 @@
+import type { ComponentProps, FC } from "react";
+import { View } from "./View";
+
+type Props = ComponentProps<"dialog"> & {
+    onSave?: () => void;
+    onCloseWithoutSave?: () => void;
+};
+
+export const Dialog: FC<Props> = (props) => {
+    return (
+        <View className="modal" el={"dialog"} id={props.id} {...props}>
+            <main className="modal-box overflow-hidden px-0 py-0">
+                <section className="max-h-[400px] overflow-y-auto p-4">
+                    {props.children}
+                </section>
+
+                <footer className="p-4 bg-base-200">
+                    <div className="modal-action">
+                        <form method="dialog">
+                            <button
+                                className="btn btn-primary"
+                                onClick={props.onSave}
+                            >
+                                Save Changes
+                            </button>
+                        </form>
+                    </div>
+                </footer>
+            </main>
+            <form
+                method="dialog"
+                className="modal-backdrop"
+            >
+                <button
+                    onClick={props.onCloseWithoutSave}
+                >
+                    Close
+                </button>
+            </form>
+        </View>
+    );
+};
diff --git a/src/components/UI/View.tsx b/src/components/UI/View.tsx
index 2f3a0a6..d38cb28 100644
--- a/src/components/UI/View.tsx
+++ b/src/components/UI/View.tsx
@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
+import type { ElementType, FC, PropsWithChildren } from "react";
 import { cn } from "../../util/cn";
 
 export type ViewProps = PropsWithChildren<{
@@ -8,13 +8,17 @@ export type ViewProps = PropsWithChildren<{
     justify?: "center" | "start" | "end" | "between" | "around";
     height?: "full" | "screen";
     className?: string;
+    id?: string;
+    el: ElementType<{
+        className?: string;
+    }>;
 }>;
 
 export const View: FC<ViewProps> = (props) => {
     const needsFlex = props.direction || props.gap || props.justify;
 
     return (
-        <div
+        <props.el
             className={cn({
                 "flex": needsFlex,
                 "flex-col": props.direction === "column",
@@ -33,8 +37,10 @@ export const View: FC<ViewProps> = (props) => {
                 "h-full": props.height === "full",
                 "h-screen": props.height === "screen",
             }, props.className)}
+            id={props.id}
+            {...props}
         >
             {props.children}
-        </div>
+        </props.el>
     );
 };
diff --git a/src/data/examples.ts b/src/data/examples.ts
index b5d930d..4b486b2 100644
--- a/src/data/examples.ts
+++ b/src/data/examples.ts
@@ -525,8 +525,7 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
 // would like to personally apologize to MF for not understanding a lot of examples
 
 export const examples = examplesList.filter((example) =>
-    examplesMetaData[example.name]?.version !== "4000"
-    || examplesMetaData[example.name]?.hidden
+    !examplesMetaData[example.name]?.hidden
 ).map((example) => {
     return {
         ...example,
diff --git a/src/stores/project.ts b/src/stores/project.ts
index ba348da..ff8e31f 100644
--- a/src/stores/project.ts
+++ b/src/stores/project.ts
@@ -16,6 +16,7 @@ export type Project = {
     assets: Map<string, Asset>;
     files: Map<string, File>;
     kaplayConfig: KAPLAYOpt;
+    kaplayVersion: string;
     mode: ProjectMode;
     isDefault?: boolean;
 };
@@ -50,7 +51,7 @@ export const createProjectSlice: StateCreator<
         assets: new Map(),
         kaplayConfig: {},
         mode: "pj",
-        saved: false,
+        kaplayVersion: "3001.0.0-beta.5",
     },
     getProject: () => {
         return get().project;
@@ -107,7 +108,7 @@ export const createProjectSlice: StateCreator<
                 assets: assets,
                 kaplayConfig: {},
                 mode: filter,
-                saved: false,
+                kaplayVersion: "3001.0.0-beta.5",
                 isDefault: exampleIndex ? true : false,
             },
         }));
diff --git a/src/styles/index.css b/src/styles/index.css
index dba36d6..c26db79 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -8,6 +8,7 @@ html, body, #root {
 	padding: 0;
     overflow: hidden;
     scrollbar-width: none;
+    font-family: 'Rubik Variable', sans-serif;
 }
 
 /* temp */
diff --git a/src/util/compiler.ts b/src/util/compiler.ts
index f4640f1..af03310 100644
--- a/src/util/compiler.ts
+++ b/src/util/compiler.ts
@@ -24,7 +24,7 @@ body {
         </style>
 </head>
 <body>
-<script src="https://unpkg.com/kaplay@latest/dist/kaplay.js"></script>
+<script src="https://unpkg.com/kaplay@${useProject.getState().project.kaplayVersion}/dist/kaboom.js"></script>
 <script>
     ${parseAssets(code)}
 </script>