diff --git a/applications/uk.ewsgit.dashboard/web/Layout.tsx b/applications/uk.ewsgit.dashboard/web/Layout.tsx
--- a/applications/uk.ewsgit.dashboard/web/Layout.tsx
+++ b/applications/uk.ewsgit.dashboard/web/Layout.tsx
@@ -1,4 +1,4 @@
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import clsx from "clsx";
 import { type Component, createResource, type ParentProps, Suspense } from "solid-js";
 import PLACEHOLDER_WALLPAPER from "./assets/placeholder_wallpaper.png";
@@ -17,7 +17,7 @@ const [wallpaperOptions] = createResource(() => trpc.dashboard.getWallpaperOptions.query());
 
   return (
     <div class={styles.root} data-show-background={contentBackground()}>
-      <Suspense fallback={<UKIndeterminateSpinner class={styles.wallpaperSpinner} />}>
+      <Suspense fallback={<UKCircularProgressIndicator class={styles.wallpaperSpinner} />}>
         <img
           onLoad={(e) => {
             e.currentTarget.style.opacity = "1";
diff --git a/applications/uk.ewsgit.files/TODO b/applications/uk.ewsgit.files/TODO
deleted file mode 100644
--- a/applications/uk.ewsgit.files/TODO
+++ /dev/null
@@ -1,14 +0,0 @@
-# TODO
-
-- Views
-  - Item View
-  - Details View
-  - Stage View
-- View Item Context Menu
-- ActionBar
-  - Back & Forwards
-- SideBar
-  - Storage Shares
-  - Shared With Me
-- StatusBar
-  - Current Status & Progress Indication
diff --git a/applications/uk.ewsgit.files/backend/index.ts b/applications/uk.ewsgit.files/backend/index.ts
--- a/applications/uk.ewsgit.files/backend/index.ts
+++ b/applications/uk.ewsgit.files/backend/index.ts
@@ -1,6 +1,6 @@
 /// <reference path="./global.d.ts" />
 
-import { promises as fs } from "node:fs";
+import { promises as fs, existsSync as fsExists } from "node:fs";
 import * as path from "node:path";
 import { createTRPCContext, procedure } from "@onlineworkspace/workspace-instance/src/systems/trpcRouter.js";
 import { initTRPC } from "@trpc/server";
@@ -13,350 +13,358 @@
 export const t = initTRPC.context<ReturnType<typeof createTRPCContext>>().create();
 
 const router = t.router({
-  getFileGrid: procedure.input(z.object({ path: z.string(), sortBy: z.enum(["name"]) })).query(async (opt) => {
-    const finalPath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.path);
-
-    if (!(await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
-      // send a missing permissions notification
-      return {
-        type: "error" as const,
-        message: "You cannot access this location!",
-        icon: "folder_limited",
-      };
-    }
-
-    const THUMBNAIL_SIZE = 128;
-
-    const output: {
-      name: string;
-      path: string;
-      icon?: string;
-      type: "directory" | "file" | "alias";
-    }[] = [];
-
-    if (!(await fs.exists(finalPath))) {
-      return {
-        type: "error" as const,
-        message: "This directory does not exist!",
-        icon: "folder_limited",
-      };
-    }
-
-    for (const item of await fs.readdir(finalPath)) {
-      const itemPath = path.join(finalPath, item);
-      const isDirectory = (await fs.lstat(itemPath)).isDirectory();
-
-      let icon: string;
-
-      if (!isDirectory) {
-        switch (instance.sys.filesystem.getFileType(itemPath)) {
-          case "image": {
-            icon =
-              opt.ctx.instance.sys.configuration.backendUrl +
-              (await instance.sys.image.serveImage(opt.ctx.userId, itemPath, {
-                resize: {
-                  dimensions: (dimensions) => {
-                    let newWidth = THUMBNAIL_SIZE;
-                    let newHeight = THUMBNAIL_SIZE;
-
-                    if (dimensions.width > dimensions.height) {
-                      newWidth = THUMBNAIL_SIZE;
-                      newHeight = Math.round((dimensions.height / dimensions.width) * THUMBNAIL_SIZE);
-                    }
-
-                    if (dimensions.height > dimensions.width) {
-                      newHeight = THUMBNAIL_SIZE;
-                      newWidth = Math.round((dimensions.height / dimensions.width) * THUMBNAIL_SIZE);
-                    }
-
-                    return {
-                      width: newWidth,
-                      height: newHeight,
-                    };
-                  },
-                },
-              }));
-          }
-        }
-      }
-
-      let itemName = item;
-      const finalItemPath = path.relative(instance.sys.filesystem.FS_ROOT, itemPath);
-
-      if (finalItemPath.split(itemName)[0] === "users/") {
-        itemName += ` (${await (await instance.sys.users.getUserById(Number(itemName)))?.getUsername()})`;
-      }
-
-      output.push({
-        name: itemName,
-        path: finalItemPath,
-        // @ts-ignore
-        icon: icon,
-        type: isDirectory ? "directory" : "file",
-      });
-    }
-
-    if (output.length < 1) {
-      return {
-        type: "info" as const,
-        message: "This directory is empty",
-        icon: "folder",
-      };
-    }
-
-    return { type: "success" as const, items: output };
-  }),
-  getFileList: procedure.input(z.object({ path: z.string(), sortBy: z.enum(["name"]) })).query(async (opt) => {
-    const finalPath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.path);
-
-    if (!(await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
-      // send a missing permissions notification
-      return {
-        type: "error" as const,
-        message: "You cannot access this location!",
-        icon: "folder_limited",
-      };
-    }
-
-    const THUMBNAIL_SIZE = 32;
-
-    const output: {
-      name: string;
-      path: string;
-      icon?: string;
-      type: "directory" | "file" | "alias";
-    }[] = [];
-
-    if (!(await fs.exists(finalPath))) {
-      return {
-        type: "error" as const,
-        message: "This directory does not exist!",
-        icon: "folder_limited",
-      };
-    }
-
-    for (const item of await fs.readdir(finalPath)) {
-      const itemPath = path.join(finalPath, item);
-      const isDirectory = (await fs.lstat(itemPath)).isDirectory();
-
-      let icon: string;
-
-      if (!isDirectory) {
-        switch (instance.sys.filesystem.getFileType(itemPath)) {
-          case "image": {
-            icon =
-              opt.ctx.instance.sys.configuration.backendUrl +
-              (await instance.sys.image.serveImage(opt.ctx.userId, itemPath, {
-                resize: {
-                  dimensions: (dimensions) => {
-                    let newWidth = THUMBNAIL_SIZE;
-                    let newHeight = THUMBNAIL_SIZE;
-
-                    if (dimensions.width > dimensions.height) {
-                      newWidth = THUMBNAIL_SIZE;
-                      newHeight = Math.round((dimensions.height / dimensions.width) * THUMBNAIL_SIZE);
-                    }
-
-                    if (dimensions.height > dimensions.width) {
-                      newHeight = THUMBNAIL_SIZE;
-                      newWidth = Math.round((dimensions.height / dimensions.width) * THUMBNAIL_SIZE);
-                    }
-
-                    return {
-                      width: newWidth,
-                      height: newHeight,
-                    };
-                  },
-                },
-              }));
-          }
-        }
-      }
-
-      let itemName = item;
-      const finalItemPath = path.relative(instance.sys.filesystem.FS_ROOT, itemPath);
-
-      if (finalItemPath.split(itemName)[0] === "users/") {
-        itemName += ` (${await (await instance.sys.users.getUserById(Number(itemName)))?.getUsername()})`;
-      }
-
-      output.push({
-        name: itemName,
-        path: finalItemPath,
-        // @ts-ignore
-        icon: icon,
-        type: isDirectory ? "directory" : "file",
-      });
-    }
-
-    if (output.length < 1) {
+  // getFileGrid: procedure.input(z.object({ path: z.string(), sortBy: z.enum(["name"]) })).query(async (opt) => {
+  //   const finalPath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.path);
+  //
+  //   if (!(await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
+  //     // send a missing permissions notification
+  //     return {
+  //       type: "error" as const,
+  //       message: "You cannot access this location!",
+  //       icon: "folder_limited",
+  //     };
+  //   }
+  //
+  //   const THUMBNAIL_SIZE = 128;
+  //
+  //   const output: {
+  //     name: string;
+  //     path: string;
+  //     icon?: string;
+  //     type: "directory" | "file" | "alias";
+  //   }[] = [];
+  //
+  //   if (!fsExists(finalPath)) {
+  //     return {
+  //       type: "error" as const,
+  //       message: "This directory does not exist!",
+  //       icon: "folder_limited",
+  //     };
+  //   }
+  //
+  //   for (const item of await fs.readdir(finalPath)) {
+  //     const itemPath = path.join(finalPath, item);
+  //     const isDirectory = (await fs.lstat(itemPath)).isDirectory();
+  //
+  //     let icon: string;
+  //
+  //     if (!isDirectory) {
+  //       switch (instance.sys.filesystem.getFileType(itemPath)) {
+  //         case "image": {
+  //           icon =
+  //             opt.ctx.instance.sys.configuration.backendUrl +
+  //             (await instance.sys.image.serveImage(opt.ctx.userId, itemPath, {
+  //               resize: {
+  //                 dimensions: (dimensions) => {
+  //                   let newWidth = THUMBNAIL_SIZE;
+  //                   let newHeight = THUMBNAIL_SIZE;
+  //
+  //                   if (dimensions.width > dimensions.height) {
+  //                     newWidth = THUMBNAIL_SIZE;
+  //                     newHeight = Math.round((dimensions.height / dimensions.width) * THUMBNAIL_SIZE);
+  //                   }
+  //
+  //                   if (dimensions.height > dimensions.width) {
+  //                     newHeight = THUMBNAIL_SIZE;
+  //                     newWidth = Math.round((dimensions.height / dimensions.width) * THUMBNAIL_SIZE);
+  //                   }
+  //
+  //                   return {
+  //                     width: newWidth,
+  //                     height: newHeight,
+  //                   };
+  //                 },
+  //               },
+  //             }));
+  //         }
+  //       }
+  //     }
+  //
+  //     let itemName = item;
+  //     const finalItemPath = path.relative(instance.sys.filesystem.FS_ROOT, itemPath);
+  //
+  //     if (finalItemPath.split(itemName)[0] === "users/") {
+  //       itemName += ` (${await (await instance.sys.users.getUserById(Number(itemName)))?.getUsername()})`;
+  //     }
+  //
+  //     output.push({
+  //       name: itemName,
+  //       path: finalItemPath,
+  //       // @ts-ignore
+  //       icon: icon,
+  //       type: isDirectory ? "directory" : "file",
+  //     });
+  //   }
+  //
+  //   if (output.length < 1) {
+  //     return {
+  //       type: "info" as const,
+  //       message: "This directory is empty",
+  //       icon: "folder",
+  //     };
+  //   }
+  //
+  //   return { type: "success" as const, items: output };
+  // }),
+  // getFileList: procedure.input(z.object({ path: z.string(), sortBy: z.enum(["name"]) })).query(async (opt) => {
+  //   const finalPath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.path);
+  //
+  //   if (!(await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
+  //     // send a missing permissions notification
+  //     return {
+  //       type: "error" as const,
+  //       message: "You cannot access this location!",
+  //       icon: "folder_limited",
+  //     };
+  //   }
+  //
+  //   const THUMBNAIL_SIZE = 32;
+  //
+  //   const output: {
+  //     name: string;
+  //     path: string;
+  //     icon?: string;
+  //     type: "directory" | "file" | "alias";
+  //   }[] = [];
+  //
+  //   if (!fsExists(finalPath)) {
+  //     return {
+  //       type: "error" as const,
+  //       message: "This directory does not exist!",
+  //       icon: "folder_limited",
+  //     };
+  //   }
+  //
+  //   for (const item of await fs.readdir(finalPath)) {
+  //     const itemPath = path.join(finalPath, item);
+  //     const isDirectory = (await fs.lstat(itemPath)).isDirectory();
+  //
+  //     let icon: string;
+  //
+  //     if (!isDirectory) {
+  //       switch (instance.sys.filesystem.getFileType(itemPath)) {
+  //         case "image": {
+  //           icon =
+  //             opt.ctx.instance.sys.configuration.backendUrl +
+  //             (await instance.sys.image.serveImage(opt.ctx.userId, itemPath, {
+  //               resize: {
+  //                 dimensions: (dimensions) => {
+  //                   let newWidth = THUMBNAIL_SIZE;
+  //                   let newHeight = THUMBNAIL_SIZE;
+  //
+  //                   if (dimensions.width > dimensions.height) {
+  //                     newWidth = THUMBNAIL_SIZE;
+  //                     newHeight = Math.round((dimensions.height / dimensions.width) * THUMBNAIL_SIZE);
+  //                   }
+  //
+  //                   if (dimensions.height > dimensions.width) {
+  //                     newHeight = THUMBNAIL_SIZE;
+  //                     newWidth = Math.round((dimensions.height / dimensions.width) * THUMBNAIL_SIZE);
+  //                   }
+  //
+  //                   return {
+  //                     width: newWidth,
+  //                     height: newHeight,
+  //                   };
+  //                 },
+  //               },
+  //             }));
+  //         }
+  //       }
+  //     }
+  //
+  //     let itemName = item;
+  //     const finalItemPath = path.relative(instance.sys.filesystem.FS_ROOT, itemPath);
+  //
+  //     if (finalItemPath.split(itemName)[0] === "users/") {
+  //       itemName += ` (${await (await instance.sys.users.getUserById(Number(itemName)))?.getUsername()})`;
+  //     }
+  //
+  //     output.push({
+  //       name: itemName,
+  //       path: finalItemPath,
+  //       // @ts-ignore
+  //       icon: icon,
+  //       type: isDirectory ? "directory" : "file",
+  //     });
+  //   }
+  //
+  //   if (output.length < 1) {
+  //     return {
+  //       type: "info" as const,
+  //       message: "This directory is empty",
+  //       icon: "folder",
+  //     };
+  //   }
+  //
+  //   return { type: "success" as const, items: output };
+  // }),
+  // getRawFile: procedure.input(z.string()).query(async (opt) => {
+  //   const finalPath = path.join(instance.sys.filesystem.FS_ROOT, opt.input);
+  //   if (!(await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
+  //     return "You lack the required permissions to access this resource!";
+  //   }
+  //
+  //   return opt.ctx.instance.sys.configuration.backendUrl + instance.sys.filesystem.serveFile(opt.ctx.userId, finalPath);
+  // }),
+  // batchMove: procedure.input(z.object({ path: z.string(), newPath: z.string() }).array()).mutation(async (opt) => {
+  //   for (const item of opt.input) {
+  //     if (item.path === item.newPath) continue;
+  //     // TODO: send a failure notification
+  //     if (path.join(item.newPath, "..") === "users") continue;
+  //     if (path.join(item.path, "..") === "users") continue;
+  //
+  //     const finalPath = path.join(instance.sys.filesystem.FS_ROOT, item.path);
+  //     const finalNewPath = path.join(instance.sys.filesystem.FS_ROOT, item.newPath);
+  //
+  //     try {
+  //       if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
+  //         if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalNewPath)).write) {
+  //           await fs.rename(finalPath, finalNewPath);
+  //         } else {
+  //           // send a missing permissions notification
+  //           return false;
+  //         }
+  //       } else {
+  //         // send a missing permissions notification
+  //         return false;
+  //       }
+  //     } catch (err) {
+  //       log.error(err);
+  //     }
+  //   }
+  // }),
+  // batchCopy: procedure.input(z.object({ path: z.string(), newPath: z.string() }).array()).mutation(async (opt) => {
+  //   for (const item of opt.input) {
+  //     if (item.path === item.newPath) continue;
+  //     // TODO: send a failure notification
+  //     if (path.join(item.newPath, "..") === "users") continue;
+  //     if (path.join(item.path, "..") === "users") continue;
+  //
+  //     const finalPath = path.join(instance.sys.filesystem.FS_ROOT, item.path);
+  //     const finalNewPath = path.join(instance.sys.filesystem.FS_ROOT, item.newPath);
+  //
+  //     try {
+  //       if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
+  //         if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalNewPath)).write) {
+  //           await fs.cp(finalPath, finalNewPath, { recursive: true });
+  //         } else {
+  //           // send a missing permissions notification
+  //           return false;
+  //         }
+  //       } else {
+  //         // send a missing permissions notification
+  //         return false;
+  //       }
+  //     } catch (err) {
+  //       log.error(err);
+  //     }
+  //   }
+  //
+  //   return true;
+  // }),
+  // batchDelete: procedure.input(z.string().array()).mutation(async (opt) => {
+  //   for (const item of opt.input) {
+  //     const itemPath = path.join(instance.sys.filesystem.FS_ROOT, item);
+  //
+  //     try {
+  //       if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, itemPath)).write) {
+  //         await fs.rm(itemPath, { recursive: true });
+  //       } else {
+  //         // send a missing permissions notification
+  //         return false;
+  //       }
+  //     } catch (err) {
+  //       log.error(err);
+  //     }
+  //   }
+  //
+  //   return true;
+  // }),
+  // createFile: procedure.input(z.object({ filePath: z.string() })).mutation(async (opt) => {
+  //   const filePath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.filePath);
+  //
+  //   if (fsExists(filePath)) return false;
+  //
+  //   if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, filePath)).write) {
+  //     await fs.writeFile(filePath, "");
+  //   } else {
+  //     // send a missing permissions notification
+  //     return false;
+  //   }
+  //
+  //   return true;
+  // }),
+  // createDirectory: procedure.input(z.object({ directoryPath: z.string() })).mutation(async (opt) => {
+  //   const filePath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.directoryPath);
+  //
+  //   if (fsExists(filePath)) return false;
+  //
+  //   if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, filePath)).write) {
+  //     await fs.mkdir(filePath, { recursive: true });
+  //   } else {
+  //     // send a missing permissions notification
+  //     return false;
+  //   }
+  //
+  //   return true;
+  // }),
+  // getHome: procedure.query(async (opt) => {
+  //   return `/users/${opt.ctx.userId}/fs`;
+  // }),
+  // getPlaces: procedure.query(async (opt) => {
+  //   return [
+  //     {
+  //       icon: "house",
+  //       path: `/users/${opt.ctx.userId}/fs`,
+  //       name: "Home",
+  //     },
+  //     {
+  //       icon: "data_usage",
+  //       path: `/`,
+  //       name: "Root",
+  //     },
+  //   ];
+  // }),
+  // uploadFile: procedure.input(octetInputParser).mutation(async (opt) => {
+  //   const uuid = randomUUIDv7();
+  //   const uploadFilePath = path.join((await opt.ctx.user()).getPath(), `system/temp/${uuid}`);
+  //
+  //   log.info(`Uploading file ${uuid}`);
+  //
+  //   const fileResponse = new Response(opt.input);
+  //   await fs.writeFile(uploadFilePath, await fileResponse.bytes());
+  //
+  //   return { id: uuid };
+  // }),
+  // setUploadMetadata: procedure.input(z.object({ id: z.string(), path: z.string(), lastModified: z.number() })).mutation(async (opt) => {
+  //   const uploadFilePath = path.join((await opt.ctx.user()).getPath(), `system/temp/${opt.input.id}`);
+  //   const actualFilePath = path.join(instance.sys.filesystem.FS_ROOT, `${opt.input.path}`);
+  //   const actualFilePathParentDir = path.join(actualFilePath, "..");
+  //
+  //   if (!(await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, actualFilePath)).write) {
+  //     return false;
+  //   }
+  //
+  //   if (!fsExists(actualFilePathParentDir)) {
+  //     await fs.mkdir(actualFilePathParentDir, { recursive: true });
+  //   }
+  //
+  //   log.info(`Applying metadata to file (${opt.input.id}) '${actualFilePath}'`);
+  //
+  //   await fs.rename(uploadFilePath, actualFilePath);
+  //   await fs.utimes(actualFilePath, 0, opt.input.lastModified);
+  //
+  //   return true;
+  // }),
+  userPreferences: {
+    get: procedure.query(async (opt) => {
       return {
-        type: "info" as const,
-        message: "This directory is empty",
-        icon: "folder",
+        showWelcome: false,
+        homePath: `/Users/${opt.ctx.userId}/fs/`,
       };
-    }
-
-    return { type: "success" as const, items: output };
-  }),
-  getRawFile: procedure.input(z.string()).query(async (opt) => {
-    const finalPath = path.join(instance.sys.filesystem.FS_ROOT, opt.input);
-    if (!(await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
-      return "You lack the required permissions to access this resource!";
-    }
-
-    return opt.ctx.instance.sys.configuration.backendUrl + instance.sys.filesystem.serveFile(opt.ctx.userId, finalPath);
-  }),
-  batchMove: procedure.input(z.object({ path: z.string(), newPath: z.string() }).array()).mutation(async (opt) => {
-    for (const item of opt.input) {
-      if (item.path === item.newPath) continue;
-      // TODO: send a failure notification
-      if (path.join(item.newPath, "..") === "users") continue;
-      if (path.join(item.path, "..") === "users") continue;
-
-      const finalPath = path.join(instance.sys.filesystem.FS_ROOT, item.path);
-      const finalNewPath = path.join(instance.sys.filesystem.FS_ROOT, item.newPath);
-
-      try {
-        if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
-          if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalNewPath)).write) {
-            await fs.rename(finalPath, finalNewPath);
-          } else {
-            // send a missing permissions notification
-            return false;
-          }
-        } else {
-          // send a missing permissions notification
-          return false;
-        }
-      } catch (err) {
-        log.error(err);
-      }
-    }
-  }),
-  batchCopy: procedure.input(z.object({ path: z.string(), newPath: z.string() }).array()).mutation(async (opt) => {
-    for (const item of opt.input) {
-      if (item.path === item.newPath) continue;
-      // TODO: send a failure notification
-      if (path.join(item.newPath, "..") === "users") continue;
-      if (path.join(item.path, "..") === "users") continue;
-
-      const finalPath = path.join(instance.sys.filesystem.FS_ROOT, item.path);
-      const finalNewPath = path.join(instance.sys.filesystem.FS_ROOT, item.newPath);
-
-      try {
-        if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalPath)).read) {
-          if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, finalNewPath)).write) {
-            await fs.cp(finalPath, finalNewPath, { recursive: true });
-          } else {
-            // send a missing permissions notification
-            return false;
-          }
-        } else {
-          // send a missing permissions notification
-          return false;
-        }
-      } catch (err) {
-        log.error(err);
-      }
-    }
-
-    return true;
-  }),
-  batchDelete: procedure.input(z.string().array()).mutation(async (opt) => {
-    for (const item of opt.input) {
-      const itemPath = path.join(instance.sys.filesystem.FS_ROOT, item);
-
-      try {
-        if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, itemPath)).write) {
-          await fs.rm(itemPath, { recursive: true });
-        } else {
-          // send a missing permissions notification
-          return false;
-        }
-      } catch (err) {
-        log.error(err);
-      }
-    }
-
-    return true;
-  }),
-  createFile: procedure.input(z.object({ filePath: z.string() })).mutation(async (opt) => {
-    const filePath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.filePath);
-
-    if (await fs.exists(filePath)) return false;
-
-    if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, filePath)).write) {
-      await fs.writeFile(filePath, "");
-    } else {
-      // send a missing permissions notification
-      return false;
-    }
-
-    return true;
-  }),
-  createDirectory: procedure.input(z.object({ directoryPath: z.string() })).mutation(async (opt) => {
-    const filePath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.directoryPath);
-
-    if (await fs.exists(filePath)) return false;
-
-    if ((await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, filePath)).write) {
-      await fs.mkdir(filePath, { recursive: true });
-    } else {
-      // send a missing permissions notification
-      return false;
-    }
-
-    return true;
-  }),
-  getHome: procedure.query(async (opt) => {
-    return `/users/${opt.ctx.userId}/fs`;
-  }),
-  getPlaces: procedure.query(async (opt) => {
-    return [
-      {
-        icon: "house",
-        path: `/users/${opt.ctx.userId}/fs`,
-        name: "Home",
-      },
-      {
-        icon: "data_usage",
-        path: `/`,
-        name: "Root",
-      },
-    ];
-  }),
-  uploadFile: procedure.input(octetInputParser).mutation(async (opt) => {
-    const uuid = randomUUIDv7();
-    const uploadFilePath = path.join((await opt.ctx.user()).getPath(), `system/temp/${uuid}`);
-
-    log.info(`Uploading file ${uuid}`);
-
-    const fileResponse = new Response(opt.input);
-    await fs.writeFile(uploadFilePath, await fileResponse.bytes());
-
-    return { id: uuid };
-  }),
-  setUploadMetadata: procedure.input(z.object({ id: z.string(), path: z.string(), lastModified: z.number() })).mutation(async (opt) => {
-    const uploadFilePath = path.join((await opt.ctx.user()).getPath(), `system/temp/${opt.input.id}`);
-    const actualFilePath = path.join(instance.sys.filesystem.FS_ROOT, `${opt.input.path}`);
-    const actualFilePathParentDir = path.join(actualFilePath, "..");
-
-    if (!(await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, actualFilePath)).write) {
-      return false;
-    }
-
-    if (!(await fs.exists(actualFilePathParentDir))) {
-      await fs.mkdir(actualFilePathParentDir, { recursive: true });
-    }
-
-    log.info(`Applying metadata to file (${opt.input.id}) '${actualFilePath}'`);
-
-    await fs.rename(uploadFilePath, actualFilePath);
-    await fs.utimes(actualFilePath, 0, opt.input.lastModified);
-
-    return true;
-  }),
+    }),
+  },
 });
 
 export type TRPCRouter = typeof router;
diff --git a/applications/uk.ewsgit.files/web/.backup/App.tsx b/applications/uk.ewsgit.files/web/.backup/App.tsx
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/.backup/App.tsx
@@ -0,0 +1,20 @@
+import { Route } from "@solidjs/router";
+import { type Component, lazy } from "solid-js";
+
+const Redirect = lazy(() => import("./components/Redirect.tsx"));
+const ViewContainer = lazy(() => import("./components/ViewContainer/ViewContainer.tsx"));
+const Layout = lazy(() => import("./Layout.tsx"));
+
+const App: Component = () => {
+  return (
+    <>
+      <Route path={"/"} component={Redirect} />
+      <Route component={Layout}>
+        <Route path={"/dir"} component={ViewContainer} />
+        <Route path={"/dir/*currentPath"} component={ViewContainer} />
+      </Route>
+    </>
+  );
+};
+
+export default App;
diff --git a/applications/uk.ewsgit.files/web/App.tsx b/applications/uk.ewsgit.files/web/App.tsx
--- a/applications/uk.ewsgit.files/web/App.tsx
+++ b/applications/uk.ewsgit.files/web/App.tsx
@@ -1,19 +1,66 @@
 import { Route } from "@solidjs/router";
-import { type Component, lazy } from "solid-js";
+import { type Accessor, type Component, createSignal, lazy, onMount } from "solid-js";
+import { createStore, type Store } from "solid-js/store";
+import { AppContext } from "./appContext.ts";
+import trpc from "./lib/trpc.ts";
+import Redirect from "./Redirect.tsx";
+
+const Layout = lazy(() => import("./layout/Layout.tsx"));
+const WelcomePage = lazy(() => import("./pages/welcome/Index.tsx"));
+
+interface AppContextType {
+  isAdministrator: Accessor<boolean>;
+  shootYourselfInTheFoot: Accessor<boolean>;
+  userPreferences: Store<{
+    showWelcome: boolean;
+    homePath: string;
+    pinnedDirectories: string[];
+  }>;
+}
 
-const Redirect = lazy(() => import("./components/Redirect.tsx"));
-const ViewContainer = lazy(() => import("./components/ViewContainer/ViewContainer.tsx"));
-const Layout = lazy(() => import("./Layout.tsx"));
+export type { AppContextType };
 
 const App: Component = () => {
+  const [hasLoaded, setHasLoaded] = createSignal<boolean>(false);
+  const [userPreferences, setUserPreferences] = createStore<AppContextType["userPreferences"]>({
+    showWelcome: true,
+    homePath: "/Users/1/fs/",
+    pinnedDirectories: ["/home"],
+  });
+
+  onMount(async () => {
+    const userServerPreferences = await trpc.userPreferences.get.query();
+
+    setUserPreferences("showWelcome", userServerPreferences.showWelcome);
+    setUserPreferences("homePath", userServerPreferences.homePath);
+
+    setHasLoaded(true);
+  });
+
   return (
-    <>
-      <Route path={"/"} component={Redirect} />
+    <AppContext.Provider
+      value={{
+        isAdministrator: () => false,
+        shootYourselfInTheFoot: () => false,
+        userPreferences: userPreferences,
+      }}
+    >
+      {!hasLoaded() && <Route path={"*"} component={() => "Loading..."} />}
+      <Route
+        path={"/"}
+        component={() => (
+          <Redirect to={userPreferences.showWelcome ? "/app/uk.ewsgit.files/welcome" : `/app/uk.ewsgit.files/dir?path=${userPreferences.homePath}`} />
+        )}
+      />
+      <Route path={"/welcome"} component={WelcomePage} />
       <Route component={Layout}>
-        <Route path={"/dir"} component={ViewContainer} />
-        <Route path={"/dir/*currentPath"} component={ViewContainer} />
+        <Route path={"/dir"} component={() => "Dir View"} />
       </Route>
-    </>
+      {/*<Route component={Layout}>*/}
+      {/*  <Route path={"/dir"} component={ViewContainer} />*/}
+      {/*  <Route path={"/dir/*currentPath"} component={ViewContainer} />*/}
+      {/*</Route>*/}
+    </AppContext.Provider>
   );
 };
 
diff --git a/applications/uk.ewsgit.files/web/Layout.module.scss b/applications/uk.ewsgit.files/web/.backup/Layout.module.scss
rename from applications/uk.ewsgit.files/web/Layout.module.scss
rename to applications/uk.ewsgit.files/web/.backup/Layout.module.scss
--- a/applications/uk.ewsgit.files/web/Layout.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/Layout.module.scss
diff --git a/applications/uk.ewsgit.files/web/Layout.tsx b/applications/uk.ewsgit.files/web/.backup/Layout.tsx
rename from applications/uk.ewsgit.files/web/Layout.tsx
rename to applications/uk.ewsgit.files/web/.backup/Layout.tsx
--- a/applications/uk.ewsgit.files/web/Layout.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/Layout.tsx
diff --git a/applications/uk.ewsgit.files/web/Redirect.tsx b/applications/uk.ewsgit.files/web/Redirect.tsx
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/Redirect.tsx
@@ -0,0 +1,14 @@
+import { useNavigate } from "@solidjs/router";
+import { type Component, onMount } from "solid-js";
+
+const Redirect: Component<{ to: string }> = (props) => {
+  const navigate = useNavigate();
+
+  onMount(() => {
+    navigate(props.to);
+  });
+
+  return null;
+};
+
+export default Redirect;
diff --git a/applications/uk.ewsgit.files/web/appContext.ts b/applications/uk.ewsgit.files/web/appContext.ts
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/appContext.ts
@@ -0,0 +1,6 @@
+import { createContext } from "solid-js";
+import type { AppContextType } from "./App.tsx";
+
+const AppContext = createContext<AppContextType>();
+
+export { AppContext };
diff --git a/applications/uk.ewsgit.files/web/components/PathBar/PathBar.module.scss b/applications/uk.ewsgit.files/web/.backup/components/PathBar/PathBar.module.scss
rename from applications/uk.ewsgit.files/web/components/PathBar/PathBar.module.scss
rename to applications/uk.ewsgit.files/web/.backup/components/PathBar/PathBar.module.scss
--- a/applications/uk.ewsgit.files/web/components/PathBar/PathBar.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/components/PathBar/PathBar.module.scss
diff --git a/applications/uk.ewsgit.files/web/components/PathBar/PathBar.tsx b/applications/uk.ewsgit.files/web/.backup/components/PathBar/PathBar.tsx
rename from applications/uk.ewsgit.files/web/components/PathBar/PathBar.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/PathBar/PathBar.tsx
--- a/applications/uk.ewsgit.files/web/components/PathBar/PathBar.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/PathBar/PathBar.tsx
diff --git a/applications/uk.ewsgit.files/web/components/Redirect.tsx b/applications/uk.ewsgit.files/web/.backup/components/Redirect.tsx
rename from applications/uk.ewsgit.files/web/components/Redirect.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/Redirect.tsx
--- a/applications/uk.ewsgit.files/web/components/Redirect.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/Redirect.tsx
diff --git a/applications/uk.ewsgit.files/web/components/SideBar/SideBar.module.scss b/applications/uk.ewsgit.files/web/.backup/components/SideBar/SideBar.module.scss
rename from applications/uk.ewsgit.files/web/components/SideBar/SideBar.module.scss
rename to applications/uk.ewsgit.files/web/.backup/components/SideBar/SideBar.module.scss
--- a/applications/uk.ewsgit.files/web/components/SideBar/SideBar.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/components/SideBar/SideBar.module.scss
diff --git a/applications/uk.ewsgit.files/web/components/SideBar/SideBar.tsx b/applications/uk.ewsgit.files/web/.backup/components/SideBar/SideBar.tsx
rename from applications/uk.ewsgit.files/web/components/SideBar/SideBar.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/SideBar/SideBar.tsx
--- a/applications/uk.ewsgit.files/web/components/SideBar/SideBar.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/SideBar/SideBar.tsx
diff --git a/applications/uk.ewsgit.files/web/components/StatusBar/StatusBar.module.scss b/applications/uk.ewsgit.files/web/.backup/components/StatusBar/StatusBar.module.scss
rename from applications/uk.ewsgit.files/web/components/StatusBar/StatusBar.module.scss
rename to applications/uk.ewsgit.files/web/.backup/components/StatusBar/StatusBar.module.scss
--- a/applications/uk.ewsgit.files/web/components/StatusBar/StatusBar.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/components/StatusBar/StatusBar.module.scss
diff --git a/applications/uk.ewsgit.files/web/components/StatusBar/StatusBar.tsx b/applications/uk.ewsgit.files/web/.backup/components/StatusBar/StatusBar.tsx
rename from applications/uk.ewsgit.files/web/components/StatusBar/StatusBar.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/StatusBar/StatusBar.tsx
--- a/applications/uk.ewsgit.files/web/components/StatusBar/StatusBar.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/StatusBar/StatusBar.tsx
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/Grid.module.scss b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/Grid.module.scss
rename from applications/uk.ewsgit.files/web/components/ViewContainer/Grid/Grid.module.scss
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/Grid.module.scss
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/Grid.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/Grid.module.scss
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/Grid.tsx b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/Grid.tsx
rename from applications/uk.ewsgit.files/web/components/ViewContainer/Grid/Grid.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/Grid.tsx
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/Grid.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/Grid.tsx
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItem.module.scss b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItem.module.scss
rename from applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItem.module.scss
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItem.module.scss
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItem.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItem.module.scss
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItem.tsx b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItem.tsx
rename from applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItem.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItem.tsx
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItem.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItem.tsx
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItemRename.tsx b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItemRename.tsx
rename from applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItemRename.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItemRename.tsx
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/Grid/GridItemRename.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/Grid/GridItemRename.tsx
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/ItemMenu.tsx b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ItemMenu.tsx
rename from applications/uk.ewsgit.files/web/components/ViewContainer/ItemMenu.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ItemMenu.tsx
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/ItemMenu.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ItemMenu.tsx
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/List/List.module.scss b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/List.module.scss
rename from applications/uk.ewsgit.files/web/components/ViewContainer/List/List.module.scss
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/List.module.scss
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/List/List.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/List.module.scss
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/List/List.tsx b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/List.tsx
rename from applications/uk.ewsgit.files/web/components/ViewContainer/List/List.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/List.tsx
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/List/List.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/List.tsx
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/List/ListItem.module.scss b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/ListItem.module.scss
rename from applications/uk.ewsgit.files/web/components/ViewContainer/List/ListItem.module.scss
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/ListItem.module.scss
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/List/ListItem.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/ListItem.module.scss
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/List/ListItem.tsx b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/ListItem.tsx
rename from applications/uk.ewsgit.files/web/components/ViewContainer/List/ListItem.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/ListItem.tsx
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/List/ListItem.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/List/ListItem.tsx
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/ViewContainer.module.scss b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContainer.module.scss
rename from applications/uk.ewsgit.files/web/components/ViewContainer/ViewContainer.module.scss
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContainer.module.scss
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/ViewContainer.module.scss
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContainer.module.scss
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/ViewContainer.tsx b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContainer.tsx
rename from applications/uk.ewsgit.files/web/components/ViewContainer/ViewContainer.tsx
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContainer.tsx
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/ViewContainer.tsx
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContainer.tsx
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/ViewContext.ts b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContext.ts
rename from applications/uk.ewsgit.files/web/components/ViewContainer/ViewContext.ts
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContext.ts
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/ViewContext.ts
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/ViewContext.ts
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/keyboard.ts b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/keyboard.ts
rename from applications/uk.ewsgit.files/web/components/ViewContainer/keyboard.ts
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/keyboard.ts
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/keyboard.ts
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/keyboard.ts
diff --git a/applications/uk.ewsgit.files/web/components/ViewContainer/viewItem.ts b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/viewItem.ts
rename from applications/uk.ewsgit.files/web/components/ViewContainer/viewItem.ts
rename to applications/uk.ewsgit.files/web/.backup/components/ViewContainer/viewItem.ts
--- a/applications/uk.ewsgit.files/web/components/ViewContainer/viewItem.ts
+++ b/applications/uk.ewsgit.files/web/.backup/components/ViewContainer/viewItem.ts
diff --git a/applications/uk.ewsgit.files/web/layout/Layout.module.scss b/applications/uk.ewsgit.files/web/layout/Layout.module.scss
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/layout/Layout.module.scss
@@ -0,0 +1,22 @@
+.root {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto 1fr auto;
+  width: 100%;
+  height: 100%;
+}
+
+.sidebar {
+  grid-row-start: 1;
+  grid-row-end: 4;
+}
+
+.actionbar {
+  grid-column-start: 2;
+  grid-column-end: 4;
+}
+
+.statusbar {
+  grid-column-start: 2;
+  grid-column-end: 4;
+}
diff --git a/applications/uk.ewsgit.files/web/layout/Layout.tsx b/applications/uk.ewsgit.files/web/layout/Layout.tsx
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/layout/Layout.tsx
@@ -0,0 +1,64 @@
+import HOUSE_ICON from "@material-symbols/svg-700/outlined/house.svg";
+import PERSON_ICON from "@material-symbols/svg-700/outlined/person.svg";
+import UKSideBar from "@onlineworkspace/uikit-solid/src/components/sideBar/UKSideBar.tsx";
+import type { Component } from "solid-js";
+import ActionBar from "./components/ActionBar/ActionBar";
+import Quota from "./components/Quota/Quota.tsx";
+import StatusBar from "./components/StatusBar/StatusBar.tsx";
+import styles from "./Layout.module.scss";
+
+const Layout: Component = () => {
+  return (
+    <div class={styles.root}>
+      <UKSideBar
+        containerClassName={styles.sidebar}
+        items={[
+          {
+            type: "label",
+            label: "Files",
+          },
+          {
+            type: "button",
+            icon: { type: "icon", value: HOUSE_ICON },
+            label: "Home",
+            onClick() {
+              console.log("Navigate Home");
+            },
+          },
+          {
+            type: "button",
+            icon: { type: "icon", value: PERSON_ICON },
+            label: "Shared With Me",
+            onClick() {},
+          },
+          {
+            type: "divider",
+          },
+          {
+            type: "label",
+            label: "Pinned",
+          },
+          ...[],
+          {
+            type: "label",
+            label: "Quota",
+          },
+          {
+            type: "component",
+            component: Quota,
+          },
+        ]}
+      ></UKSideBar>
+      <div class={styles.actionbar}>
+        <ActionBar />
+      </div>
+      <div>View</div>
+      <div>Preview</div>
+      <div class={styles.statusbar}>
+        <StatusBar />
+      </div>
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss
@@ -0,0 +1,3 @@
+.root {
+  background-color: rgb(var(--uk-sys-color-surface-container-low));
+}
diff --git a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx
@@ -0,0 +1,8 @@
+import type { Component } from "solid-js";
+import styles from "./ActionBar.module.scss";
+
+const ActionBar: Component = () => {
+  return <div class={styles.root}>ActionBar Component</div>;
+};
+
+export default ActionBar;
diff --git a/applications/uk.ewsgit.files/web/layout/components/Quota/Quota.module.scss b/applications/uk.ewsgit.files/web/layout/components/Quota/Quota.module.scss
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/layout/components/Quota/Quota.module.scss
@@ -0,0 +1,8 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: calc(100% - 2rem);
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/applications/uk.ewsgit.files/web/layout/components/Quota/Quota.tsx b/applications/uk.ewsgit.files/web/layout/components/Quota/Quota.tsx
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/layout/components/Quota/Quota.tsx
@@ -0,0 +1,17 @@
+import UKLinearProgressIndicator from "@onlineworkspace/uikit-solid/src/components/linearProgressIndicator/UKLinearProgressIndicator.tsx";
+import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.tsx";
+import type { Component } from "solid-js";
+import styles from "./Quota.module.scss";
+
+const Quota: Component = () => {
+  return (
+    <div class={styles.root}>
+      <UKLinearProgressIndicator start={0} stop={10} value={4} thickness={4} />
+      <UKText role={"label"} size={"m"}>
+        4 of 10GB Used
+      </UKText>
+    </div>
+  );
+};
+
+export default Quota;
diff --git a/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.module.scss b/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.module.scss
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.module.scss
@@ -0,0 +1,3 @@
+.root {
+  background-color: rgb(var(--uk-sys-color-surface-container-low));
+}
diff --git a/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.tsx b/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.tsx
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.tsx
@@ -0,0 +1,8 @@
+import type { Component } from "solid-js";
+import styles from "./StatusBar.module.scss";
+
+const StatusBar: Component = () => {
+  return <div class={styles.root}>Status Bar Component</div>;
+};
+
+export default StatusBar;
diff --git a/applications/uk.ewsgit.files/web/pages/welcome/Index.module.scss b/applications/uk.ewsgit.files/web/pages/welcome/Index.module.scss
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/pages/welcome/Index.module.scss
@@ -0,0 +1,5 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
diff --git a/applications/uk.ewsgit.files/web/pages/welcome/Index.tsx b/applications/uk.ewsgit.files/web/pages/welcome/Index.tsx
new file mode 100644
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/pages/welcome/Index.tsx
@@ -0,0 +1,43 @@
+import UKButton from "@onlineworkspace/uikit-solid/src/components/button/UKButton.tsx";
+import UKButtonGroup from "@onlineworkspace/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx";
+import UKCard from "@onlineworkspace/uikit-solid/src/components/card/UKCard.tsx";
+import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.tsx";
+import { useNavigate } from "@solidjs/router";
+import type { Component } from "solid-js";
+import styles from "./Index.module.scss";
+
+const WelcomePage: Component = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div class={styles.page}>
+      <UKCard>
+        <UKText role={"display"} size={"m"} emphasized={true}>
+          Welcome To Files
+        </UKText>
+        <UKText role={"body"} size={"l"}>
+          Let's get everything setup for you.
+        </UKText>
+      </UKCard>
+      <UKButtonGroup size={"s"} align={"end"}>
+        <UKButton
+          onClick={() => {
+            navigate("/app/uk.ewsgit.files/dir");
+          }}
+          color={"tonal"}
+        >
+          Skip
+        </UKButton>
+        <UKButton
+          onClick={() => {
+            navigate("/app/uk.ewsgit.files/dir");
+          }}
+        >
+          Continue
+        </UKButton>
+      </UKButtonGroup>
+    </div>
+  );
+};
+
+export default WelcomePage;
diff --git a/applications/uk.ewsgit.settings/backend/index.ts b/applications/uk.ewsgit.settings/backend/index.ts
--- a/applications/uk.ewsgit.settings/backend/index.ts
+++ b/applications/uk.ewsgit.settings/backend/index.ts
@@ -655,13 +655,16 @@ }),
       setWallpaperToCustomWallpaper: procedure.input(z.object({ name: z.string() })).mutation(async (opt) => {
         const userWallpapersPath = path.join((await opt.ctx.user()).getPath(), "assets/wallpapers");
         const resizedWallpapersPath = path.join(userWallpapersPath, "resized");
+        const currentWallpaperPath = path.join(userWallpapersPath, "current.webp");
 
         for (const resizedWallpaper of await fs.readdir(resizedWallpapersPath)) {
           await fs.rm(path.join(resizedWallpapersPath, resizedWallpaper));
         }
 
-        await fs.rm(path.join(userWallpapersPath, "current.webp"));
-        await fs.copyFile(path.join(userWallpapersPath, opt.input.name.replace(".preview", "")), path.join(userWallpapersPath, "current.webp"));
+        if (fsExistsSync(currentWallpaperPath)) {
+          await fs.rm(currentWallpaperPath);
+        }
+        await fs.copyFile(path.join(userWallpapersPath, opt.input.name.replace(".preview", "")), currentWallpaperPath);
 
         return true;
       }),
@@ -669,13 +672,16 @@ setWallpaperToDefaultWallpaper: procedure.input(z.object({ name: z.string() })).mutation(async (opt) => {
         const userWallpapersPath = path.join((await opt.ctx.user()).getPath(), "assets/wallpapers");
         const officialWallpaperPath = path.join(instance.sys.filesystem.SRC_ROOT, "assets/wallpapers");
         const resizedWallpapersPath = path.join(userWallpapersPath, "resized");
+        const currentWallpaperPath = path.join(userWallpapersPath, "current.webp");
 
         for (const resizedWallpaper of await fs.readdir(resizedWallpapersPath)) {
           await fs.rm(path.join(resizedWallpapersPath, resizedWallpaper));
         }
 
-        await fs.rm(path.join(userWallpapersPath, "current.webp"));
-        await fs.copyFile(path.join(officialWallpaperPath, opt.input.name), path.join(userWallpapersPath, "current.webp"));
+        if (fsExistsSync(currentWallpaperPath)) {
+          await fs.rm(currentWallpaperPath);
+        }
+        await fs.copyFile(path.join(officialWallpaperPath, opt.input.name), currentWallpaperPath);
 
         return true;
       }),
diff --git a/applications/uk.ewsgit.settings/web/Layout.tsx b/applications/uk.ewsgit.settings/web/Layout.tsx
--- a/applications/uk.ewsgit.settings/web/Layout.tsx
+++ b/applications/uk.ewsgit.settings/web/Layout.tsx
@@ -5,7 +5,7 @@ import PERSON_ICON from "@material-symbols/svg-700/outlined/person.svg";
 import SETTINGS_APPLICATIONS_ICON from "@material-symbols/svg-700/outlined/settings_applications.svg";
 import STORAGE_ICON from "@material-symbols/svg-700/outlined/storage.svg";
 import WALLPAPER_ICON from "@material-symbols/svg-700/outlined/wallpaper.svg";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import UKSideBar from "@onlineworkspace/uikit-solid/src/components/sideBar/UKSideBar.tsx";
 import { useLocation, useNavigate, useSearchParams } from "@solidjs/router";
 import { type Component, createEffect, createSignal, type ParentProps, Suspense } from "solid-js";
@@ -36,7 +36,7 @@ }}
     >
       {searchParams.sidebar_hidden === "true" ? (
         <div class={styles.sidebarHiddenPage}>
-          <Suspense fallback={<UKIndeterminateSpinner class={styles.spinner} />}>{props.children}</Suspense>
+          <Suspense fallback={<UKCircularProgressIndicator class={styles.spinner} />}>{props.children}</Suspense>
         </div>
       ) : (
         <UKSideBar
@@ -112,7 +112,7 @@ }
               : undefined,
           ]}
         >
-          <Suspense fallback={<UKIndeterminateSpinner class={styles.spinner} />}>{props.children}</Suspense>
+          <Suspense fallback={<UKCircularProgressIndicator class={styles.spinner} />}>{props.children}</Suspense>
         </UKSideBar>
       )}
     </AppContext.Provider>
diff --git a/applications/uk.ewsgit.settings/web/pages/applications/Index.tsx b/applications/uk.ewsgit.settings/web/pages/applications/Index.tsx
--- a/applications/uk.ewsgit.settings/web/pages/applications/Index.tsx
+++ b/applications/uk.ewsgit.settings/web/pages/applications/Index.tsx
@@ -1,5 +1,5 @@
 import CHEVRON_LEFT_ICON from "@material-symbols/svg-700/outlined/chevron_left.svg";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import UKStack from "@onlineworkspace/uikit-solid/src/components/stack/UKStack.tsx";
 import UKStackItem from "@onlineworkspace/uikit-solid/src/components/stack/UKStackItem.tsx";
 import UKStackLabel from "@onlineworkspace/uikit-solid/src/components/stack/UKStackLabel.tsx";
@@ -28,7 +28,7 @@ }}
       />
       <div class={styles.page}>
         <UKStackLabel>Applications</UKStackLabel>
-        <Suspense fallback={<UKIndeterminateSpinner />}>
+        <Suspense fallback={<UKCircularProgressIndicator />}>
           <UKStack>
             <For each={applications()}>
               {(app) => {
diff --git a/applications/uk.ewsgit.settings/web/pages/authentication/Index.tsx b/applications/uk.ewsgit.settings/web/pages/authentication/Index.tsx
--- a/applications/uk.ewsgit.settings/web/pages/authentication/Index.tsx
+++ b/applications/uk.ewsgit.settings/web/pages/authentication/Index.tsx
@@ -1,5 +1,5 @@
 import CHEVRON_LEFT_ICON from "@material-symbols/svg-700/outlined/chevron_left.svg";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import UKStack from "@onlineworkspace/uikit-solid/src/components/stack/UKStack.jsx";
 import UKStackLabel from "@onlineworkspace/uikit-solid/src/components/stack/UKStackLabel.tsx";
 import UKTopAppBar from "@onlineworkspace/uikit-solid/src/components/topAppBar/UKTopAppBar.jsx";
@@ -30,7 +30,7 @@ />
       <div class={styles.root}>
         <UKStackLabel>Login methods</UKStackLabel>
         <UKStack>
-          <Suspense fallback={<UKIndeterminateSpinner class={styles.spinner} />}>
+          <Suspense fallback={<UKCircularProgressIndicator class={styles.spinner} />}>
             <MethodPassword />
             <MethodTwoFactor />
             <MethodPasskey />
diff --git a/applications/uk.ewsgit.settings/web/pages/authentication/components/Sessions/Sessions.tsx b/applications/uk.ewsgit.settings/web/pages/authentication/components/Sessions/Sessions.tsx
--- a/applications/uk.ewsgit.settings/web/pages/authentication/components/Sessions/Sessions.tsx
+++ b/applications/uk.ewsgit.settings/web/pages/authentication/components/Sessions/Sessions.tsx
@@ -1,6 +1,6 @@
 import UKButton, { AffirmativeButtonState } from "@onlineworkspace/uikit-solid/src/components/button/UKButton.jsx";
 import UKButtonGroup from "@onlineworkspace/uikit-solid/src/components/buttonGroup/UKButtonGroup.jsx";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import UKStack from "@onlineworkspace/uikit-solid/src/components/stack/UKStack.jsx";
 import { type Component, createResource, For, Suspense } from "solid-js";
 import trpc from "../../../../lib/trpc";
@@ -13,7 +13,7 @@
   return (
     <>
       <UKStack>
-        <Suspense fallback={<UKIndeterminateSpinner class={styles.spinner} />}>
+        <Suspense fallback={<UKCircularProgressIndicator class={styles.spinner} />}>
           <For each={sessions()}>
             {(s) => {
               return <Session {...s} refetch={refetchSessions} />;
diff --git a/applications/uk.ewsgit.settings/web/pages/customization/quickShortcuts/components/addShortcutButton/AddShortcutButton.tsx b/applications/uk.ewsgit.settings/web/pages/customization/quickShortcuts/components/addShortcutButton/AddShortcutButton.tsx
--- a/applications/uk.ewsgit.settings/web/pages/customization/quickShortcuts/components/addShortcutButton/AddShortcutButton.tsx
+++ b/applications/uk.ewsgit.settings/web/pages/customization/quickShortcuts/components/addShortcutButton/AddShortcutButton.tsx
@@ -1,10 +1,10 @@
 import ADD_ICON from "@material-symbols/svg-700/outlined/add.svg";
 import UKButton from "@onlineworkspace/uikit-solid/src/components/button/UKButton.tsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import UKCard from "@onlineworkspace/uikit-solid/src/components/card/UKCard.tsx";
 import UKDialog from "@onlineworkspace/uikit-solid/src/components/dialog/UKDialog.tsx";
 import UKDivider from "@onlineworkspace/uikit-solid/src/components/divider/UKDivider.jsx";
 import UKIcon from "@onlineworkspace/uikit-solid/src/components/icon/UKIcon.tsx";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
 import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.tsx";
 import { type Component, createSignal, For, Suspense } from "solid-js";
 import styles from "./AddShortcutButton.module.scss";
@@ -43,7 +43,7 @@ <div class={styles.shortcutGrid}>
           <Suspense
             fallback={
               <div class={styles.spinner}>
-                <UKIndeterminateSpinner />
+                <UKCircularProgressIndicator />
               </div>
             }
           >
diff --git a/applications/uk.ewsgit.settings/web/pages/customization/wallpaper/Index.tsx b/applications/uk.ewsgit.settings/web/pages/customization/wallpaper/Index.tsx
--- a/applications/uk.ewsgit.settings/web/pages/customization/wallpaper/Index.tsx
+++ b/applications/uk.ewsgit.settings/web/pages/customization/wallpaper/Index.tsx
@@ -5,10 +5,10 @@ import FOLDER_ICON from "@material-symbols/svg-700/outlined/folder.svg";
 import UPLOAD_ICON from "@material-symbols/svg-700/outlined/upload.svg";
 import UKButton from "@onlineworkspace/uikit-solid/src/components/button/UKButton.tsx";
 import UKButtonGroup from "@onlineworkspace/uikit-solid/src/components/buttonGroup/UKButtonGroup.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx";
 import { DividerDirection } from "@onlineworkspace/uikit-solid/src/components/divider/lib/direction.js";
 import UKDivider from "@onlineworkspace/uikit-solid/src/components/divider/UKDivider.jsx";
 import UKIconButton from "@onlineworkspace/uikit-solid/src/components/iconButton/UKIconButton.tsx";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx";
 import UKStack from "@onlineworkspace/uikit-solid/src/components/stack/UKStack.jsx";
 import UKStackItem from "@onlineworkspace/uikit-solid/src/components/stack/UKStackItem.jsx";
 import UKStackLabel from "@onlineworkspace/uikit-solid/src/components/stack/UKStackLabel.jsx";
@@ -256,7 +256,7 @@ <UKText role={"title"} size={"m"} class={styles.subheading}>
               Previous Wallpapers
             </UKText>
             <div class={styles.wallpaperHistory}>
-              <Suspense fallback={<UKIndeterminateSpinner />}>
+              <Suspense fallback={<UKCircularProgressIndicator />}>
                 <For each={previousWallpapers() || []}>
                   {(wallpaper) => {
                     return (
diff --git a/applications/uk.ewsgit.settings/web/pages/profile/components/ProfilePicture/components/CropImage/CropImage.tsx b/applications/uk.ewsgit.settings/web/pages/profile/components/ProfilePicture/components/CropImage/CropImage.tsx
--- a/applications/uk.ewsgit.settings/web/pages/profile/components/ProfilePicture/components/CropImage/CropImage.tsx
+++ b/applications/uk.ewsgit.settings/web/pages/profile/components/ProfilePicture/components/CropImage/CropImage.tsx
@@ -1,5 +1,5 @@
 import UKButton, { AffirmativeButtonState } from "@onlineworkspace/uikit-solid/src/components/button/UKButton.tsx";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import { createFileUploader } from "@solid-primitives/upload";
 import Cropper from "cropperjs";
 import type { Component } from "solid-js";
@@ -42,7 +42,7 @@ return (
     <div class={styles.root}>
       {files().length === 0 ? (
         <div class={styles.spinnerContainer}>
-          <UKIndeterminateSpinner />
+          <UKCircularProgressIndicator />
         </div>
       ) : (
         <>
diff --git a/applications/uk.ewsgit.store/web/Layout.tsx b/applications/uk.ewsgit.store/web/Layout.tsx
--- a/applications/uk.ewsgit.store/web/Layout.tsx
+++ b/applications/uk.ewsgit.store/web/Layout.tsx
@@ -1,7 +1,7 @@
 import APPS_ICON from "@material-symbols/svg-700/outlined/apps.svg";
 import REWARDED_ADS_ICON from "@material-symbols/svg-700/outlined/rewarded_ads.svg";
 import SEARCH_ICON from "@material-symbols/svg-700/outlined/search.svg";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx";
 import UKSideBar from "@onlineworkspace/uikit-solid/src/components/sideBar/UKSideBar.tsx";
 import { useLocation, useNavigate } from "@solidjs/router";
 import { type Component, type ParentProps, Suspense } from "solid-js";
@@ -47,7 +47,7 @@ active: location.pathname === "/app/uk.ewsgit.store/manage-installed",
         },
       ]}
     >
-      <Suspense fallback={<UKIndeterminateSpinner class={styles.spinner} />}>{props.children}</Suspense>
+      <Suspense fallback={<UKCircularProgressIndicator class={styles.spinner} />}>{props.children}</Suspense>
     </UKSideBar>
   );
 };
diff --git a/applications/uk.ewsgit.store/web/pages/search/Index.tsx b/applications/uk.ewsgit.store/web/pages/search/Index.tsx
--- a/applications/uk.ewsgit.store/web/pages/search/Index.tsx
+++ b/applications/uk.ewsgit.store/web/pages/search/Index.tsx
@@ -1,7 +1,7 @@
 import INDETERMINATE_QUESTION_BOX_ICON from "@material-symbols/svg-700/outlined/indeterminate_question_box.svg";
 import UKButton from "@onlineworkspace/uikit-solid/src/components/button/UKButton.jsx";
 import UKIcon from "@onlineworkspace/uikit-solid/src/components/icon/UKIcon.jsx";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.jsx";
 import UKTopAppBar from "@onlineworkspace/uikit-solid/src/components/topAppBar/UKTopAppBar.jsx";
 import { type Component, createResource, createSignal, For, Suspense } from "solid-js";
@@ -31,7 +31,7 @@ }}
         value={searchQuery}
         placeholder={"Search Applications"}
       />
-      <Suspense fallback={<UKIndeterminateSpinner class={styles.spinner} />}>
+      <Suspense fallback={<UKCircularProgressIndicator class={styles.spinner} />}>
         {(results() || [])?.length > 0 ? (
           <div class={styles.resultGrid}>
             <For each={results()}>
diff --git a/instance/src/systems/applications.ts b/instance/src/systems/applications.ts
--- a/instance/src/systems/applications.ts
+++ b/instance/src/systems/applications.ts
@@ -38,7 +38,7 @@ for (const app of this.availableApplications) {
       if (this.enabledApplications.find((a) => a === app.manifest?.id)) {
         if (app.manifest?.modules.web) {
           applicationImportsInfill += `const App${ind}Router = lazy(() => import("${path.relative(path.join(this.instance.sys.filesystem.FS_ROOT), path.join(app.path, app.manifest.modules.web.path, "/App.tsx")).replaceAll("\\", "/")}"));`;
-          applicationsInfill += `<Suspense fallback={<UKIndeterminateSpinner/>}><Route path="${app.manifest.id}/*"><App${ind}Router/></Route></Suspense>`;
+          applicationsInfill += `<Suspense fallback={<UKCircularProgressIndicator/>}><Route path="${app.manifest.id}/*"><App${ind}Router/></Route></Suspense>`;
           ind++;
         }
       }
@@ -48,7 +48,7 @@ if (this.availableApplications.length === 0) {
       applicationsInfill = `<Route path="*" component={() => <div style={{ "text-align": "center" }}>How peculiar. You have no applications installed, please ask an administrator to install some via the command-line interface.</div>}/>`;
     }
 
-    const applicationsWebRouterTemplate = `import { Route } from "@solidjs/router";import { type Component, lazy, Suspense } from "solid-js";import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx";${applicationImportsInfill};const ApplicationsRouter: Component = () => {return (<>${applicationsInfill}</>);};export default ApplicationsRouter`;
+    const applicationsWebRouterTemplate = `import { Route } from "@solidjs/router";import { type Component, lazy, Suspense } from "solid-js";import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx";${applicationImportsInfill};const ApplicationsRouter: Component = () => {return (<>${applicationsInfill}</>);};export default ApplicationsRouter`;
 
     await fs.writeFile(path.join(this.instance.sys.filesystem.FS_ROOT, "Applications.tsx"), applicationsWebRouterTemplate);
 
diff --git a/instance/src/systems/image.ts b/instance/src/systems/image.ts
--- a/instance/src/systems/image.ts
+++ b/instance/src/systems/image.ts
@@ -1,5 +1,5 @@
+import * as nodePath from "node:path";
 import { randomUUIDv7 } from "bun";
-import * as nodePath from "path";
 import sharp from "sharp";
 import type { Instance } from "../index.js";
 import System from "../system.js";
diff --git a/instance/src/web/src/pages/app/AuthCheck.tsx b/instance/src/web/src/pages/app/AuthCheck.tsx
--- a/instance/src/web/src/pages/app/AuthCheck.tsx
+++ b/instance/src/web/src/pages/app/AuthCheck.tsx
@@ -2,7 +2,7 @@ import UKButton from "@onlineworkspace/uikit-solid/src/components/button/UKButton.tsx";
 import UKCard from "@onlineworkspace/uikit-solid/src/components/card/UKCard.tsx";
 import { DividerDirection } from "@onlineworkspace/uikit-solid/src/components/divider/lib/direction.ts";
 import UKDivider from "@onlineworkspace/uikit-solid/src/components/divider/UKDivider.tsx";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx";
 import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.tsx";
 import { useNavigate } from "@solidjs/router";
 import { type Component, createResource, type ParentProps } from "solid-js";
@@ -16,7 +16,7 @@
   return (
     <>
       {checkResult() === undefined ? (
-        <UKIndeterminateSpinner class={styles.spinner} />
+        <UKCircularProgressIndicator class={styles.spinner} />
       ) : !checkResult()?.authenticated ? (
         <UKCard color={"filled"} class={styles.root}>
           <UKText role={"title"} size={"l"} emphasized={true}>
diff --git a/instance/src/web/src/pages/app/Layout.tsx b/instance/src/web/src/pages/app/Layout.tsx
--- a/instance/src/web/src/pages/app/Layout.tsx
+++ b/instance/src/web/src/pages/app/Layout.tsx
@@ -1,4 +1,4 @@
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import { baselineTheme } from "@onlineworkspace/uikit-solid/src/core/design/themes/baseline.js";
 import { applyTheme } from "@onlineworkspace/uikit-solid/src/core/design/tokens.js";
 import { Ref } from "@solid-primitives/refs";
@@ -49,13 +49,13 @@ <>
       {window.localStorage.getItem("onlineworkspace_workspace_no_app_navigation_rail") !== "true" ? (
         <Ref ref={setRef}>
           <AppNavigation>
-            <Suspense fallback={<UKIndeterminateSpinner />}>{props.children}</Suspense>
+            <Suspense fallback={<UKCircularProgressIndicator />}>{props.children}</Suspense>
           </AppNavigation>
         </Ref>
       ) : (
         <Ref ref={setRef}>
           <div class={styles.page}>
-            <Suspense fallback={<UKIndeterminateSpinner />}>{props.children}</Suspense>
+            <Suspense fallback={<UKCircularProgressIndicator />}>{props.children}</Suspense>
           </div>
         </Ref>
       )}
diff --git a/instance/src/web/src/pages/userSelect/Layout.tsx b/instance/src/web/src/pages/userSelect/Layout.tsx
--- a/instance/src/web/src/pages/userSelect/Layout.tsx
+++ b/instance/src/web/src/pages/userSelect/Layout.tsx
@@ -1,5 +1,5 @@
 import UKCard from "@onlineworkspace/uikit-solid/src/components/card/UKCard.jsx";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.jsx";
 import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.jsx";
 import type { RouteSectionProps } from "@solidjs/router";
 import { type Component, Suspense } from "solid-js";
@@ -11,7 +11,7 @@ return (
     <div class={styles.root}>
       <img class={styles.background} alt="" src={backend("/api/instance/login/background")} />
       <img alt="" class={styles.banner} src={backend("/api/instance/login/banner")} />
-      <Suspense fallback={<UKIndeterminateSpinner />}>{props.children}</Suspense>
+      <Suspense fallback={<UKCircularProgressIndicator />}>{props.children}</Suspense>
       <UKCard color={"outlined"} class={styles.copyrightContainer}>
         <UKText role={"title"} size={"m"} emphasized={true}>
           Online Workspace Alpha
diff --git a/instance/src/web/src/pages/userSelect/signup/Signup.tsx b/instance/src/web/src/pages/userSelect/signup/Signup.tsx
--- a/instance/src/web/src/pages/userSelect/signup/Signup.tsx
+++ b/instance/src/web/src/pages/userSelect/signup/Signup.tsx
@@ -1,9 +1,9 @@
 import UKAvatar from "@onlineworkspace/uikit-solid/src/components/avatar/UKAvatar.tsx";
 import UKButton, { AffirmativeButtonState } from "@onlineworkspace/uikit-solid/src/components/button/UKButton.tsx";
+import UKCircularProgressIndicator from "@onlineworkspace/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx";
 import UKCard from "@onlineworkspace/uikit-solid/src/components/card/UKCard.tsx";
 import { DividerDirection } from "@onlineworkspace/uikit-solid/src/components/divider/lib/direction.ts";
 import UKDivider from "@onlineworkspace/uikit-solid/src/components/divider/UKDivider.tsx";
-import UKIndeterminateSpinner from "@onlineworkspace/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx";
 import UKSearchableDropdownMenu from "@onlineworkspace/uikit-solid/src/components/searchableDropdownMenu/UKSearchableDropdownMenu.tsx";
 import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.tsx";
 import UKTextField from "@onlineworkspace/uikit-solid/src/components/textField/UKTextField.tsx";
@@ -53,7 +53,7 @@ const [twoFactorTestCode, setTwoFactorTestCode] = createSignal<string>("");
   const [isEmailCodeValid, setIsEmailCodeValid] = createSignal<boolean>(false);
 
   return (
-    <Switch fallback={<UKIndeterminateSpinner />}>
+    <Switch fallback={<UKCircularProgressIndicator />}>
       <Match when={stage() === UserSelectStage.Username}>
         <Username
           setStage={setStage}
diff --git a/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx b/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx
--- a/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx
+++ b/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx
@@ -1,27 +1,22 @@
-import styles from "./UKButtonGroup.module.scss"
-import { type Component, type JSX } from "solid-js";
-import type { ButtonSize } from "../button/lib/size.ts";
 import clsx from "clsx";
+import type { Component, JSX } from "solid-js";
+import type { ButtonSize } from "../button/lib/size.ts";
+import styles from "./UKButtonGroup.module.scss";
 
 // FIXME: this is not correctly implemented according to the MV3 Spec
 
 const UKButtonGroup: Component<{
-    children: JSX.Element;
-    size: ButtonSize;
-    connected?: boolean;
-    align?: "start" | "end";
-    class?: string;
+  children: JSX.Element;
+  size: ButtonSize;
+  connected?: boolean;
+  align?: "start" | "end";
+  class?: string;
 }> = (props) => {
-    return (
-        <div
-            data-size={props.size}
-            data-connected={props.connected}
-            class={clsx(styles.root, props.class)}
-            data-align={props.align}
-        >
-            {props.children}
-        </div>
-    );
+  return (
+    <div data-size={props.size} data-connected={props.connected} class={clsx(styles.root, props.class)} data-align={props.align}>
+      {props.children}
+    </div>
+  );
 };
 
 export default UKButtonGroup;
diff --git a/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx b/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx
new file mode 100644
--- /dev/null
+++ b/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx
@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import type { Component } from "solid-js";
+import styles from "./UKCircularProgressIndicator.module.scss";
+
+const UKCircularProgressIndicator: Component<{ class?: string; centerSelf?: boolean }> = (props) => {
+  return (
+    <div class={clsx(styles.root, props.class, props.centerSelf && styles.centerSelf)}>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class={styles.svg}>
+        <title>spinner</title>
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.53449 14.8913C3.62961 15.0355 4.4005 16.0401 4.25633 17.1352L4.06276 18.6055L4.00188 19.9998L4.06276 21.3942L4.24493 22.7779L4.54701 24.1405L4.96669 25.4715L5.50078 26.7609L6.14522 27.9989L6.89511 29.176L7.74473 30.2832L8.68762 31.3122L9.7166 32.2551L10.8238 33.1047L12.0009 33.8546L13.2389 34.499L14.5283 35.0331L15.8594 35.4528L17.2219 35.7549L18.6057 35.9371L20 35.9979L21.3943 35.9371L22.778 35.7549L24.1406 35.4528L25.4717 35.0331L26.7611 34.499L27.999 33.8546L29.1761 33.1047L30.3526 32.2019C31.229 31.5295 32.4844 31.6948 33.1569 32.5711C33.8293 33.4474 33.664 34.7029 32.7877 35.3753L31.4726 36.3844L30.0009 37.322L28.4531 38.1277L26.841 38.7955L25.1769 39.3202L23.4733 39.6979L21.7433 39.9256L20 40.0017L18.2567 39.9256L16.5267 39.6979L14.8231 39.3202L13.1589 38.7955L11.5468 38.1277L9.99903 37.322L8.52736 36.3844L7.143 35.3222L5.8565 34.1433L4.67763 32.8568L3.61538 31.4725L2.67782 30.0008L1.8721 28.453L1.20434 26.8409L0.679621 25.1767L0.301947 23.4731L0.0741866 21.7431L-0.00192618 19.9998L0.0741876 18.2566L0.29055 16.6131C0.434725 15.518 1.43937 14.7471 2.53449 14.8913Z"
+          fill="rgb(var(--uk-sys-color-primary))"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M4.0373 11.2627C3.16098 10.5902 2.9957 9.33474 3.66812 8.45842L4.67721 7.14335L5.85608 5.85684L7.14258 4.67797L8.52694 3.61572L9.99861 2.67817L11.5464 1.87244L13.1585 1.20468L14.8227 0.679966L16.5263 0.302293L18.2563 0.0745323L19.9996 -0.00157983L21.7428 0.0745339L23.4729 0.302291L25.1764 0.679966L26.8406 1.20468L28.4527 1.87244L30.0005 2.67817L31.4722 3.61572L32.8565 4.67797L34.143 5.85684L35.3219 7.14335L36.3842 8.5277L37.3217 9.99937L38.1274 11.5472L38.7952 13.1593L39.3199 14.8235L39.6976 16.527L39.9253 18.257L40.0015 20.0003L39.9253 21.7436L39.6976 23.4736L39.3199 25.1772L38.7952 26.8414L38.1609 28.3728C37.7382 29.3933 36.5682 29.8779 35.5477 29.4552C34.5272 29.0325 34.0426 27.8626 34.4653 26.8421L35.0329 25.472L35.4525 24.1409L35.7546 22.7784L35.9368 21.3946L35.9976 20.0003L35.9368 18.606L35.7546 17.2223L35.4525 15.8597L35.0328 14.5287L34.4988 13.2392L33.8543 12.0013L33.1044 10.8242L32.2548 9.71694L31.3119 8.68796L30.2829 7.74508L29.1757 6.89545L27.9986 6.14557L26.7606 5.50113L25.4712 4.96703L24.1402 4.54735L22.7776 4.24528L21.3939 4.06311L19.9996 4.00223L18.6052 4.06311L17.2215 4.24528L15.8589 4.54735L14.5279 4.96703L13.2385 5.50112L12.0005 6.14557L10.8234 6.89545L9.71618 7.74507L8.6872 8.68796L7.74431 9.71695L6.84153 10.8935C6.16911 11.7698 4.91361 11.9351 4.0373 11.2627Z"
+          fill="rgb(var(--uk-sys-color-secondary))"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default UKCircularProgressIndicator;
diff --git a/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.module.scss b/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.module.scss
rename from uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.module.scss
rename to uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.module.scss
--- a/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.module.scss
+++ b/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.module.scss
diff --git a/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx b/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx
deleted file mode 100644
--- a/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import clsx from "clsx";
-import type { Component } from "solid-js";
-import styles from "./UKIndeterminateSpinner.module.scss";
-
-const UKIndeterminateSpinner: Component<{ class?: string; centerSelf?: boolean }> = (props) => {
-  return (
-    <div class={clsx(styles.root, props.class, props.centerSelf && styles.centerSelf)}>
-      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class={styles.svg}>
-        <title>spinner</title>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M2.53449 14.8913C3.62961 15.0355 4.4005 16.0401 4.25633 17.1352L4.06276 18.6055L4.00188 19.9998L4.06276 21.3942L4.24493 22.7779L4.54701 24.1405L4.96669 25.4715L5.50078 26.7609L6.14522 27.9989L6.89511 29.176L7.74473 30.2832L8.68762 31.3122L9.7166 32.2551L10.8238 33.1047L12.0009 33.8546L13.2389 34.499L14.5283 35.0331L15.8594 35.4528L17.2219 35.7549L18.6057 35.9371L20 35.9979L21.3943 35.9371L22.778 35.7549L24.1406 35.4528L25.4717 35.0331L26.7611 34.499L27.999 33.8546L29.1761 33.1047L30.3526 32.2019C31.229 31.5295 32.4844 31.6948 33.1569 32.5711C33.8293 33.4474 33.664 34.7029 32.7877 35.3753L31.4726 36.3844L30.0009 37.322L28.4531 38.1277L26.841 38.7955L25.1769 39.3202L23.4733 39.6979L21.7433 39.9256L20 40.0017L18.2567 39.9256L16.5267 39.6979L14.8231 39.3202L13.1589 38.7955L11.5468 38.1277L9.99903 37.322L8.52736 36.3844L7.143 35.3222L5.8565 34.1433L4.67763 32.8568L3.61538 31.4725L2.67782 30.0008L1.8721 28.453L1.20434 26.8409L0.679621 25.1767L0.301947 23.4731L0.0741866 21.7431L-0.00192618 19.9998L0.0741876 18.2566L0.29055 16.6131C0.434725 15.518 1.43937 14.7471 2.53449 14.8913Z" fill="rgb(var(--uk-sys-color-primary))"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.0373 11.2627C3.16098 10.5902 2.9957 9.33474 3.66812 8.45842L4.67721 7.14335L5.85608 5.85684L7.14258 4.67797L8.52694 3.61572L9.99861 2.67817L11.5464 1.87244L13.1585 1.20468L14.8227 0.679966L16.5263 0.302293L18.2563 0.0745323L19.9996 -0.00157983L21.7428 0.0745339L23.4729 0.302291L25.1764 0.679966L26.8406 1.20468L28.4527 1.87244L30.0005 2.67817L31.4722 3.61572L32.8565 4.67797L34.143 5.85684L35.3219 7.14335L36.3842 8.5277L37.3217 9.99937L38.1274 11.5472L38.7952 13.1593L39.3199 14.8235L39.6976 16.527L39.9253 18.257L40.0015 20.0003L39.9253 21.7436L39.6976 23.4736L39.3199 25.1772L38.7952 26.8414L38.1609 28.3728C37.7382 29.3933 36.5682 29.8779 35.5477 29.4552C34.5272 29.0325 34.0426 27.8626 34.4653 26.8421L35.0329 25.472L35.4525 24.1409L35.7546 22.7784L35.9368 21.3946L35.9976 20.0003L35.9368 18.606L35.7546 17.2223L35.4525 15.8597L35.0328 14.5287L34.4988 13.2392L33.8543 12.0013L33.1044 10.8242L32.2548 9.71694L31.3119 8.68796L30.2829 7.74508L29.1757 6.89545L27.9986 6.14557L26.7606 5.50113L25.4712 4.96703L24.1402 4.54735L22.7776 4.24528L21.3939 4.06311L19.9996 4.00223L18.6052 4.06311L17.2215 4.24528L15.8589 4.54735L14.5279 4.96703L13.2385 5.50112L12.0005 6.14557L10.8234 6.89545L9.71618 7.74507L8.6872 8.68796L7.74431 9.71695L6.84153 10.8935C6.16911 11.7698 4.91361 11.9351 4.0373 11.2627Z" fill="rgb(var(--uk-sys-color-secondary))"/>
-      </svg>
-    </div>
-  );
-};
-
-export default UKIndeterminateSpinner;
diff --git a/uikit-solid/src/components/linearProgressIndicator/UKLinearProgressIndicator.module.scss b/uikit-solid/src/components/linearProgressIndicator/UKLinearProgressIndicator.module.scss
new file mode 100644
--- /dev/null
+++ b/uikit-solid/src/components/linearProgressIndicator/UKLinearProgressIndicator.module.scss
@@ -0,0 +1,31 @@
+// track
+.root {
+  --track-height: var(--thickness, 0.25rem);
+
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  border-radius: 100rem;
+  height: var(--track-height);
+}
+
+.activeIndicator {
+  border-radius: 100rem;
+  background-color: rgb(var(--uk-sys-color-primary));
+}
+
+.remainingIndicator {
+  border-radius: 100rem;
+  display: flex;
+  align-items: center;
+  background-color: rgb(var(--uk-sys-color-secondary-container));
+}
+
+.stopIndicator {
+  height: 0.25rem;
+  width: 0.25rem;
+  border-radius: 100rem;
+  background-color: rgb(var(--uk-sys-color-primary));
+  margin-left: auto;
+  margin-right: calc(calc(var(--thickness) - 0.5rem) / 2);
+}
diff --git a/uikit-solid/src/components/linearProgressIndicator/UKLinearProgressIndicator.tsx b/uikit-solid/src/components/linearProgressIndicator/UKLinearProgressIndicator.tsx
new file mode 100644
--- /dev/null
+++ b/uikit-solid/src/components/linearProgressIndicator/UKLinearProgressIndicator.tsx
@@ -0,0 +1,34 @@
+import { type Component, createEffect, createSignal } from "solid-js";
+import styles from "./UKLinearProgressIndicator.module.scss";
+
+const UKLinearProgressIndicator: Component<{ start: number; stop: number; value: number; thickness?: number }> = (props) => {
+  const [percentageCompletion, setPercentageCompletion] = createSignal<number>(45);
+
+  createEffect(() => {
+    const range = props.stop - props.start;
+
+    if (range === 0) {
+      setPercentageCompletion(0);
+      return;
+    }
+
+    setPercentageCompletion(Math.min(Math.max(((props.value - props.start) / range) * 100, 0), 100));
+  });
+
+  return (
+    <div class={styles.root} style={{ ...(props.thickness ? { "--thickness": `${props.thickness}px` } : {}) }}>
+      <div class={styles.activeIndicator} style={{ width: `${percentageCompletion()}%` }}></div>
+      <div
+        class={styles.remainingIndicator}
+        style={{
+          width: `calc(${100 - percentageCompletion()}% - ${percentageCompletion() > 5 ? "0.25rem" : "0px"})`,
+          "margin-left": percentageCompletion() <= 5 ? "0px" : "0.25rem",
+        }}
+      >
+        <div class={styles.stopIndicator}></div>
+      </div>
+    </div>
+  );
+};
+
+export default UKLinearProgressIndicator;
diff --git a/uikit-solid/src/components/sideBar/UKSideBar.tsx b/uikit-solid/src/components/sideBar/UKSideBar.tsx
--- a/uikit-solid/src/components/sideBar/UKSideBar.tsx
+++ b/uikit-solid/src/components/sideBar/UKSideBar.tsx
@@ -1,12 +1,12 @@
-import { createSignal, Index, Show, type Component, type ParentProps } from "solid-js";
-import styles from "./UKSideBar.module.scss";
-import UKIcon from "../icon/UKIcon.tsx";
+import MENU_ICON from "@material-symbols/svg-700/outlined/menu.svg";
+import MENU_OPEN_ICON from "@material-symbols/svg-700/outlined/menu_open.svg";
+import clsx from "clsx";
+import { type Component, createSignal, Index, type ParentProps, Show } from "solid-js";
 import useIsMobile from "../../core/useIsMobile.ts";
 import UKDivider from "../divider/UKDivider.tsx";
+import UKIcon from "../icon/UKIcon.tsx";
 import UKIconButton from "../iconButton/UKIconButton.tsx";
-import clsx from "clsx";
-import MENU_ICON from "@material-symbols/svg-700/outlined/menu.svg"
-import MENU_OPEN_ICON from "@material-symbols/svg-700/outlined/menu_open.svg";
+import styles from "./UKSideBar.module.scss";
 
 interface ButtonItem {
   type: "button";
@@ -32,16 +32,22 @@ interface MarginItem {
   type: "margin";
 }
 
+interface ComponentItem {
+  type: "component";
+  component: Component;
+}
+
 const UKSideBar: Component<
   ParentProps<{
-    items: (ButtonItem | LabelItem | DividerItem | MarginItem | undefined)[];
+    items: (ButtonItem | LabelItem | DividerItem | MarginItem | ComponentItem | undefined)[];
+    containerClassName?: string;
   }>
 > = (props) => {
   const isMobile = useIsMobile();
   const [isMobileToggled, setIsMobileToggled] = createSignal<boolean>(false);
 
   return (
-    <div class={styles.root} data-sidebar-mode-mobile-mode={isMobile()}>
+    <div class={clsx(styles.root, props.containerClassName)} data-sidebar-mode-mobile-mode={isMobile()}>
       <div class={styles.component}>
         {isMobile() && (
           <UKIconButton
@@ -76,6 +82,8 @@ case "margin":
                   return <div class={styles.margin} />;
                 case "divider":
                   return <UKDivider class={styles.divider} width="middle-inset" direction="horizontal" />;
+                case "component":
+                  return <>{(item() as ComponentItem).component}</>;
                 default:
                   return <div>AHH</div>;
               }