diff --git a/pkgs/webview-ui/app/mock.ts b/pkgs/webview-ui/app/mock.ts
index dab41ba0..1fa5399e 100644
--- a/pkgs/webview-ui/app/mock.ts
+++ b/pkgs/webview-ui/app/mock.ts
@@ -1,6 +1,6 @@
 import { JSONSchemaFaker } from "json-schema-faker";
 import { schema } from "./api/index";
-import { OperationNames } from "./src/message";
+import { OperationNames } from "./src/api";
 
 const faker = JSONSchemaFaker;
 
diff --git a/pkgs/webview-ui/app/src/App.tsx b/pkgs/webview-ui/app/src/App.tsx
index cad9e312..4ae09cdd 100644
--- a/pkgs/webview-ui/app/src/App.tsx
+++ b/pkgs/webview-ui/app/src/App.tsx
@@ -1,5 +1,5 @@
 import { createSignal, type Component } from "solid-js";
-import { CountProvider } from "./Config";
+import { MachineProvider } from "./Config";
 import { Layout } from "./layout/layout";
 import { Route, Router } from "./Routes";
 
@@ -10,11 +10,11 @@ export { route, setRoute };
 
 const App: Component = () => {
   return (
-    <CountProvider>
+    <MachineProvider>
       <Layout>
         <Router route={route} />
       </Layout>
-    </CountProvider>
+    </MachineProvider>
   );
 };
 
diff --git a/pkgs/webview-ui/app/src/Config.tsx b/pkgs/webview-ui/app/src/Config.tsx
index cc1ac0ce..fff8ad57 100644
--- a/pkgs/webview-ui/app/src/Config.tsx
+++ b/pkgs/webview-ui/app/src/Config.tsx
@@ -5,9 +5,9 @@ import {
   JSXElement,
   createEffect,
 } from "solid-js";
-import { OperationResponse, pyApi } from "./message";
+import { OperationResponse, pyApi } from "./api";
 
-export const makeCountContext = () => {
+export const makeMachineContext = () => {
   const [machines, setMachines] =
     createSignal<OperationResponse<"list_machines">>();
   const [loading, setLoading] = createSignal(false);
@@ -18,7 +18,7 @@ export const makeCountContext = () => {
   });
 
   createEffect(() => {
-    console.log("The count is now", machines());
+    console.log("The state is now", machines());
   });
 
   return [
@@ -33,9 +33,9 @@ export const makeCountContext = () => {
   ] as const;
   // `as const` forces tuple type inference
 };
-type CountContextType = ReturnType<typeof makeCountContext>;
+type MachineContextType = ReturnType<typeof makeMachineContext>;
 
-export const CountContext = createContext<CountContextType>([
+export const MachineContext = createContext<MachineContextType>([
   {
     loading: () => false,
 
@@ -48,12 +48,12 @@ export const CountContext = createContext<CountContextType>([
   },
 ]);
 
-export const useCountContext = () => useContext(CountContext);
+export const useMachineContext = () => useContext(MachineContext);
 
-export function CountProvider(props: { children: JSXElement }) {
+export function MachineProvider(props: { children: JSXElement }) {
   return (
-    <CountContext.Provider value={makeCountContext()}>
+    <MachineContext.Provider value={makeMachineContext()}>
       {props.children}
-    </CountContext.Provider>
+    </MachineContext.Provider>
   );
 }
diff --git a/pkgs/webview-ui/app/src/message.ts b/pkgs/webview-ui/app/src/api.ts
similarity index 94%
rename from pkgs/webview-ui/app/src/message.ts
rename to pkgs/webview-ui/app/src/api.ts
index f661370a..b5c2878a 100644
--- a/pkgs/webview-ui/app/src/message.ts
+++ b/pkgs/webview-ui/app/src/api.ts
@@ -7,6 +7,11 @@ export type OperationNames = keyof API;
 export type OperationArgs<T extends OperationNames> = API[T]["arguments"];
 export type OperationResponse<T extends OperationNames> = API[T]["return"];
 
+export type SuccessData<T extends OperationNames> = Extract<
+  OperationResponse<T>,
+  { status: "success" }
+>;
+
 declare global {
   interface Window {
     clan: {
diff --git a/pkgs/webview-ui/app/src/routes/machines/view.tsx b/pkgs/webview-ui/app/src/routes/machines/view.tsx
index bb2acab5..f09ac3bb 100644
--- a/pkgs/webview-ui/app/src/routes/machines/view.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/view.tsx
@@ -6,11 +6,28 @@ import {
   createSignal,
   type Component,
 } from "solid-js";
-import { useCountContext } from "../../Config";
+import { useMachineContext } from "../../Config";
 import { route } from "@/src/App";
+import { OperationResponse, pyApi } from "@/src/api";
+
+type FilesModel = Extract<
+  OperationResponse<"get_directory">,
+  { status: "success" }
+>["data"]["files"];
 
 export const MachineListView: Component = () => {
-  const [{ machines, loading }, { getMachines }] = useCountContext();
+  const [{ machines, loading }, { getMachines }] = useMachineContext();
+
+  const [files, setFiles] = createSignal<FilesModel>([]);
+  pyApi.get_directory.receive((r) => {
+    const { status } = r;
+    if (status === "error") return console.error(r.errors);
+    setFiles(r.data.files);
+  });
+
+  createEffect(() => {
+    console.log(files());
+  });
 
   const [data, setData] = createSignal<string[]>([]);
   createEffect(() => {
@@ -27,7 +44,17 @@ export const MachineListView: Component = () => {
 
   return (
     <div class="max-w-screen-lg">
-      <div class="tooltip" data-tip="Refresh ">
+      <div class="tooltip" data-tip="Open Clan">
+        <button
+          class="btn btn-ghost"
+          onClick={() =>
+            pyApi.get_directory.dispatch({ current_path: "/home/" })
+          }
+        >
+          <span class="material-icons ">folder_open</span>
+        </button>
+      </div>
+      <div class="tooltip" data-tip="Refresh">
         <button class="btn btn-ghost" onClick={() => getMachines()}>
           <span class="material-icons ">refresh</span>
         </button>
diff --git a/pkgs/webview-ui/app/tests/types.test.ts b/pkgs/webview-ui/app/tests/types.test.ts
index cc23c83a..242d0c6a 100644
--- a/pkgs/webview-ui/app/tests/types.test.ts
+++ b/pkgs/webview-ui/app/tests/types.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expectTypeOf } from "vitest";
 
-import { OperationNames, pyApi } from "@/src/message";
+import { OperationNames, pyApi } from "@/src/api";
 
 describe.concurrent("API types work properly", () => {
   // Test some basic types