diff --git a/pkgs/clan-cli/clan_cli/nix.py b/pkgs/clan-cli/clan_cli/nix.py
index ce3c0c602..56e2964a6 100644
--- a/pkgs/clan-cli/clan_cli/nix.py
+++ b/pkgs/clan-cli/clan_cli/nix.py
@@ -21,6 +21,7 @@ def nix_flake_show(flake_url: AnyUrl | Path) -> list[str]:
             "show",
             "--json",
             "--show-trace",
+            "--no-write-lock-file",
             f"{flake_url}",
         ]
     )
@@ -35,6 +36,7 @@ def nix_build(
                 "build",
                 "--no-link",
                 "--print-out-paths",
+                "--no-write-lock-file",
             ]
         )
         + flags
@@ -57,6 +59,7 @@ def nix_eval(flags: list[str]) -> list[str]:
             "eval",
             "--show-trace",
             "--json",
+            "--no-write-lock-file",
         ]
     )
     if os.environ.get("IN_NIX_SANDBOX"):
diff --git a/pkgs/ui/.eslintrc.json b/pkgs/ui/.eslintrc.json
index 891a985aa..40464e701 100644
--- a/pkgs/ui/.eslintrc.json
+++ b/pkgs/ui/.eslintrc.json
@@ -5,6 +5,7 @@
   "plugins": ["@typescript-eslint"],
   "ignorePatterns": ["**/src/api/*"],
   "rules": {
+    "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-explicit-any": "off"
   }
 }
diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx
index 0a6ec70b5..b17e69ec3 100644
--- a/pkgs/ui/src/components/hooks/useAppContext.tsx
+++ b/pkgs/ui/src/components/hooks/useAppContext.tsx
@@ -1,6 +1,4 @@
-import { useListMachines } from "@/api/machine/machine";
-import { MachinesResponse } from "@/api/model";
-import { AxiosError, AxiosResponse } from "axios";
+import { AxiosError } from "axios";
 import React, {
   Dispatch,
   ReactNode,
@@ -8,7 +6,6 @@ import React, {
   createContext,
   useState,
 } from "react";
-import { KeyedMutator } from "swr";
 
 type AppContextType = {
   //   data: AxiosResponse<{}, any> | undefined;
@@ -18,7 +15,7 @@ type AppContextType = {
   error: AxiosError<any> | undefined;
 
   setAppState: Dispatch<SetStateAction<AppState>>;
-  mutate: KeyedMutator<AxiosResponse<MachinesResponse, any>>;
+  // mutate: KeyedMutator<AxiosResponse<MachinesResponse, any>>;
   swrKey: string | false | Record<any, any>;
 };
 
@@ -38,7 +35,11 @@ interface AppContextProviderProps {
 }
 export const WithAppState = (props: AppContextProviderProps) => {
   const { children } = props;
-  const { isLoading, error, mutate, swrKey } = useListMachines("defaultFlake");
+  const { isLoading, error, swrKey } = {
+    isLoading: false,
+    error: undefined,
+    swrKey: "default",
+  };
 
   const [data, setAppState] = useState<AppState>({ isJoined: false });
 
@@ -50,7 +51,7 @@ export const WithAppState = (props: AppContextProviderProps) => {
         isLoading,
         error,
         swrKey,
-        mutate,
+        // mutate,
       }}
     >
       {children}
diff --git a/pkgs/ui/src/views/joinPrequel.tsx b/pkgs/ui/src/views/joinPrequel.tsx
index 1beba84e9..eb039a667 100644
--- a/pkgs/ui/src/views/joinPrequel.tsx
+++ b/pkgs/ui/src/views/joinPrequel.tsx
@@ -1,31 +1,82 @@
 "use client";
-import { IconButton, Input, InputAdornment } from "@mui/material";
+import {
+  IconButton,
+  Input,
+  InputAdornment,
+  LinearProgress,
+  MenuItem,
+  Select,
+} from "@mui/material";
 import { useSearchParams } from "next/navigation";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 
+import { createFlake } from "@/api/flake/flake";
+import { useAppState } from "@/components/hooks/useAppContext";
 import { Confirm } from "@/components/join/confirm";
 import { Layout } from "@/components/join/layout";
 import { ChevronRight } from "@mui/icons-material";
 import { Controller, useForm } from "react-hook-form";
 
 type FormValues = {
+  workflow: "join" | "create";
   flakeUrl: string;
+  dest?: string;
 };
 
 export default function JoinPrequel() {
   const queryParams = useSearchParams();
   const flakeUrl = queryParams.get("flake") || "";
   const flakeAttr = queryParams.get("attr") || "default";
-  const { control, formState, getValues, reset } = useForm<FormValues>({
-    defaultValues: { flakeUrl: "" },
-  });
+  const [, setForkInProgress] = useState(false);
+  const { setAppState } = useAppState();
 
+  const { control, formState, getValues, reset, watch, handleSubmit } =
+    useForm<FormValues>({
+      defaultValues: { flakeUrl: "", dest: undefined, workflow: "join" },
+    });
+
+  const workflow = watch("workflow");
+
+  const WorkflowAdornment = (
+    <InputAdornment position="end">
+      <Controller
+        name="workflow"
+        control={control}
+        render={({ field }) => (
+          <Select
+            {...field}
+            label="workflow"
+            variant="standard"
+            disableUnderline
+          >
+            <MenuItem value={"join"}>Join</MenuItem>
+            <MenuItem value={"create"}>Create</MenuItem>
+          </Select>
+        )}
+      />
+      <IconButton type="submit">
+        <ChevronRight />
+      </IconButton>
+    </InputAdornment>
+  );
   return (
     <Layout>
       <Suspense fallback="Loading">
         {!formState.isSubmitted && !flakeUrl && (
           <form
-            // onSubmit={handleSubmit(() => {})}
+            onSubmit={handleSubmit((values) => {
+              console.log("submitted", { values });
+              if (workflow === "create") {
+                setForkInProgress(true);
+                createFlake({
+                  flake_name: values.dest || "default",
+                  url: values.flakeUrl,
+                }).then(() => {
+                  setForkInProgress(false);
+                  setAppState((s) => ({ ...s, isJoined: true }));
+                });
+              }
+            })}
             className="w-full max-w-2xl justify-self-center"
           >
             <Controller
@@ -33,6 +84,8 @@ export default function JoinPrequel() {
               control={control}
               render={({ field }) => (
                 <Input
+                  disableUnderline
+                  placeholder="url"
                   color="secondary"
                   aria-required="true"
                   {...field}
@@ -42,18 +95,42 @@ export default function JoinPrequel() {
                     <InputAdornment position="start">Clan</InputAdornment>
                   }
                   endAdornment={
-                    <InputAdornment position="end">
-                      <IconButton type="submit">
-                        <ChevronRight />
-                      </IconButton>
-                    </InputAdornment>
+                    workflow == "join" ? WorkflowAdornment : undefined
                   }
                 />
               )}
             />
+            {workflow === "create" && (
+              <Controller
+                name="dest"
+                control={control}
+                render={({ field }) => (
+                  <Input
+                    sx={{ my: 2 }}
+                    placeholder="Location"
+                    color="secondary"
+                    aria-required="true"
+                    {...field}
+                    required
+                    fullWidth
+                    startAdornment={
+                      <InputAdornment position="start">Name</InputAdornment>
+                    }
+                    endAdornment={
+                      workflow == "create" ? WorkflowAdornment : undefined
+                    }
+                  />
+                )}
+              />
+            )}
           </form>
         )}
-        {(formState.isSubmitted || flakeUrl) && (
+        {formState.isSubmitted && workflow == "create" && (
+          <div>
+            <LinearProgress />
+          </div>
+        )}
+        {(formState.isSubmitted || flakeUrl) && workflow == "join" && (
           <Confirm
             handleBack={() => reset()}
             flakeUrl={formState.isSubmitted ? getValues("flakeUrl") : flakeUrl}
diff --git a/pkgs/ui/tsconfig.json b/pkgs/ui/tsconfig.json
index ebe4baa2f..b93706c25 100644
--- a/pkgs/ui/tsconfig.json
+++ b/pkgs/ui/tsconfig.json
@@ -21,8 +21,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"],
-      "@API/*": ["./src/api/*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],