diff --git a/applications/uk.ewsgit.files/backend/index.ts b/applications/uk.ewsgit.files/backend/index.ts
index 0eb31b4..5ed5999 100644
--- a/applications/uk.ewsgit.files/backend/index.ts
+++ b/applications/uk.ewsgit.files/backend/index.ts
@@ -379,7 +379,7 @@ const router = t.router({
       const userPermissions = await instance.sys.filesystem.getUserPermissions(opt.ctx.userId, resolvedPath);
 
       if (!userPermissions.read) {
-        return { status: "missing_permission" };
+        return { status: "missing_permission" as const };
       }
 
       try {
@@ -394,7 +394,7 @@ const router = t.router({
 
         return { items: directoryContents.map((ent) => ent.name), status: "ok" };
       } catch (_) {
-        return { status: "invalid_path" };
+        return { status: "invalid_path" as const };
       }
     }),
   view: {
@@ -425,7 +425,7 @@ const router = t.router({
 
         if (!userPermissions.read) {
           return {
-            status: "missing_permission",
+            status: "missing_permission" as const,
           };
         }
 
@@ -433,7 +433,7 @@ const router = t.router({
           const itemStats = await fs.lstat(resolvedPath);
 
           return {
-            status: "ok",
+            status: "ok" as const,
             data: {
               path: opt.input.path,
               type: itemStats.isSymbolicLink() ? "link" : itemStats.isDirectory() ? "directory" : itemStats.isFile() ? "file" : "file",
@@ -460,7 +460,7 @@ const router = t.router({
           };
         } catch (_) {
           return {
-            status: "invalid_path",
+            status: "invalid_path" as const,
           };
         }
       }),
@@ -503,6 +503,44 @@ const router = t.router({
 
     return resp;
   }),
+  previewDialog: {
+    get: procedure.input(z.object({ path: z.string() })).query(async (opt) => {
+      const resolvedPath = path.join(instance.sys.filesystem.FS_ROOT, opt.input.path);
+
+      const pathStat = await fs.lstat(resolvedPath);
+      const isDirectory = pathStat.isDirectory();
+
+      const fileType = instance.sys.filesystem.getFileType(resolvedPath);
+
+      let imageDimensions: { width: number; height: number } = { width: 0, height: 0 };
+
+      return {
+        status: "ok" as const,
+        data: {
+          assets:
+            fileType === "image"
+              ? {
+                  original: await instance.sys.image.serveImage(opt.ctx.userId, resolvedPath),
+                  small: await instance.sys.image.serveImage(opt.ctx.userId, resolvedPath, {
+                    resize: {
+                      dimensions: (original) => {
+                        imageDimensions = original;
+
+                        return { width: 1024, height: Math.floor((original.height / original.width) * 1024) };
+                      },
+                    },
+                  }),
+                }
+              : undefined,
+          metadata: {
+            size: pathStat.size,
+            itemCount: isDirectory ? (await fs.readdir(resolvedPath)).length : undefined,
+            pixelate: imageDimensions.width !== 0 && imageDimensions.height !== 0 && imageDimensions.width < 640 && imageDimensions.height < 640,
+          },
+        },
+      };
+    }),
+  },
 });
 
 export type TRPCRouter = typeof router;
diff --git a/applications/uk.ewsgit.files/web/App.tsx b/applications/uk.ewsgit.files/web/App.tsx
index 11ca2ca..31a6c74 100644
--- a/applications/uk.ewsgit.files/web/App.tsx
+++ b/applications/uk.ewsgit.files/web/App.tsx
@@ -26,13 +26,15 @@ interface ViewState {
   viewItems: ViewItem[];
   selectedItems: string[];
   lastSelectionTime: number;
+  lastSelectedItem: string | undefined;
   viewId: number;
   isLoading: boolean;
-  isRenaming: boolean;
+  isRenaming: string | undefined;
 }
 
 interface GlobalState {
-  showPreview: string | undefined;
+  showPreview: boolean;
+  disableShortcuts: boolean;
 }
 
 interface AppContextType {
@@ -80,12 +82,14 @@ const App: Component = () => {
     viewItems: [],
     selectedItems: [],
     lastSelectionTime: -1,
+    lastSelectedItem: undefined,
     viewId: 0,
     isLoading: true,
-    isRenaming: false
+    isRenaming: undefined
   });
   const [ globalState, setGlobalState ] = createStore<GlobalState>({
-    showPreview: undefined
+    showPreview: false,
+    disableShortcuts: false,
   })
   const [ taskStatus, setTaskStatus ] = createSignal<Task[]>([])
 
diff --git a/applications/uk.ewsgit.files/web/layout/Layout.tsx b/applications/uk.ewsgit.files/web/layout/Layout.tsx
index 2d10df0..9a00211 100644
--- a/applications/uk.ewsgit.files/web/layout/Layout.tsx
+++ b/applications/uk.ewsgit.files/web/layout/Layout.tsx
@@ -13,6 +13,7 @@ import PreviewPane from "./components/PreviewPane/PreviewPane.tsx";
 import Quota from "./components/Quota/Quota.tsx";
 import StatusBar from "./components/StatusBar/StatusBar.tsx";
 import styles from "./Layout.module.scss";
+import type {UniformResourceLocator} from "../lib/filesystemInterface.ts";
 
 const Layout: Component<ParentProps> = (props) => {
   const navigate = useNavigate();
@@ -120,8 +121,8 @@ const Layout: Component<ParentProps> = (props) => {
           </div>
         </div>
       </UKSideBar>
-      <Show when={appContext?.globalState.showPreview !== undefined && appContext.isDesktopApp === false}>
-        <PreviewDialog path={appContext!.globalState.showPreview!} />
+      <Show when={appContext?.globalState.showPreview === true && appContext.isDesktopApp === false}>
+        <PreviewDialog pathUrl={appContext!.viewState.lastSelectedItem! as UniformResourceLocator} />
       </Show>
     </>
   );
diff --git a/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.module.scss b/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.module.scss
index 693ef4b..690b612 100644
--- a/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.module.scss
+++ b/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.module.scss
@@ -11,7 +11,6 @@
 
 .component {
   position: fixed;
-
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -21,6 +20,23 @@
   flex-direction: column;
   z-index: 10;
   animation: animateIn forwards 200ms ease-in-out;
+  interpolate-size: allow-keywords;
+  transition:
+    max-width var(--uk-sys-motion-duration-500) var(--uk-sys-motion-easing-emphasized-normal),
+    height var(--uk-sys-motion-duration-500) var(--uk-sys-motion-easing-emphasized-normal);
+
+  max-width: 1024px;
+  max-height: calc(100% - 2rem);
+  height: max-content;
+  width: calc(100% - 2rem);
+
+  &.expanded {
+    max-width: 100%;
+  }
+
+  &.loadingData {
+    height: 256px;
+  }
 }
 
 @keyframes animateIn {
@@ -37,3 +53,51 @@
   flex-direction: row;
   gap: 0.5rem;
 }
+
+.title {
+  margin-right: auto;
+  user-select: none;
+}
+
+.previewContentContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+
+  > img {
+    object-fit: contain;
+    object-position: center;
+
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+  }
+}
+
+.pixelate {
+  > img {
+    image-rendering: pixelated;
+  }
+}
+
+.originalPreview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: max-content;
+  height: 100%;
+  border-radius: calc(var(--uk-sys-shape-corner-medium) - 0.5rem);
+  transition: opacity var(--uk-sys-motion-duration-500) var(--uk-sys-motion-easing-emphasized-decelerate);
+  opacity: 0;
+  z-index: 2;
+}
+
+.smallPreview {
+  border-radius: calc(var(--uk-sys-shape-corner-medium) - 0.5rem);
+}
+
+.originalHasLoaded {
+  opacity: 1;
+}
diff --git a/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.tsx b/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.tsx
index 7c91f51..ca88f79 100644
--- a/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.tsx
+++ b/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.tsx
@@ -1,39 +1,103 @@
 import CLOSE_ICON from "@material-symbols/svg-700/outlined/close.svg";
+import COLLAPSE_CONTENT_ICON from "@material-symbols/svg-700/outlined/collapse_content.svg"
+import EXPAND_CONTENT_ICON from "@material-symbols/svg-700/outlined/expand_content.svg";
+import ROTATE_90_DEGREES_CW_ICON from "@material-symbols/svg-700/outlined/rotate_90_degrees_cw.svg";
+import SHARE_ICON from "@material-symbols/svg-700/outlined/share.svg";
+import UKButton from "@onlineworkspace/uikit-solid/src/components/button/UKButton.jsx";
 import UKCard from "@onlineworkspace/uikit-solid/src/components/card/UKCard.jsx";
 import UKIconButton from "@onlineworkspace/uikit-solid/src/components/iconButton/UKIconButton.jsx";
 import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.jsx";
 import path from "path-browserify";
-import {useContext, type Component} from "solid-js";
-import styles from "./PreviewDialog.module.scss";
+import {type Component, createResource, createSignal, Show, Suspense, useContext} from "solid-js";
 import {AppContext} from "../../../appContext";
+import styles from "./PreviewDialog.module.scss";
+import clsx from "clsx";
+import filesystemInterface, {type UniformResourceLocator} from "../../../lib/filesystemInterface";
 
-const PreviewDialog: Component<{path: string}> = (props) => {
+const PreviewDialog: Component<{pathUrl: UniformResourceLocator}> = (props) => {
   const appContext = useContext(AppContext);
+  const [ isExpanded, setIsExpanded ] = createSignal<boolean>(false);
+  const [ originalHasLoaded, setOriginalHasLoaded ] = createSignal<boolean>(false);
+  const [ data ] = createResource(() => props.pathUrl, (url) => filesystemInterface.getPreviewDialogMetadata(url as UniformResourceLocator))
 
   return (
     <>
-      <button type="button" class={styles.background} onClick={() => {
-        appContext?.setGlobalState("showPreview", undefined)
-      }} />
-      <UKCard color="outlined" class={styles.component}>
+      <button
+        type="button"
+        class={styles.background}
+        onClick={() => {
+          appContext?.setGlobalState("showPreview", false);
+        }}
+      />
+      <UKCard color="outlined" class={clsx(styles.component, isExpanded() && styles.expanded, data() === undefined && styles.loadingData)}>
         <div class={styles.header}>
+          {
+            !appContext?.isDesktopApp && <>
+              <UKIconButton
+                size="xxs"
+                color={"tonal"}
+                alt={"Close Preview"}
+                onClick={() => {
+                  appContext?.setGlobalState("showPreview", false);
+                }}
+                icon={CLOSE_ICON}
+              />
+              <UKIconButton
+                size="xxs"
+                color={"tonal"}
+                alt={"Expand preview"}
+                onClick={() => {
+                  setIsExpanded((p) => !p)
+                }}
+                icon={isExpanded() ? COLLAPSE_CONTENT_ICON : EXPAND_CONTENT_ICON}
+              />
+            </>
+          }
+          <UKText size="m" role="title" class={styles.title}>
+            Preview for {path.basename(props.pathUrl)}
+          </UKText>
           <UKIconButton
             size="xxs"
-            color={"tonal"}
-            alt={"Close Preview"}
+            width="wide"
+            color={"outlined"}
+            alt={"Rotate content by 90 degrees"}
             onClick={() => {
-              appContext?.setGlobalState("showPreview", undefined)
             }}
-            icon={CLOSE_ICON}
+            icon={ROTATE_90_DEGREES_CW_ICON}
           />
-          <UKText size="m" role="title" emphasized>
-            Preview for {path.basename(props.path)}
-          </UKText>
+          <UKIconButton
+            size="xxs"
+            width="wide"
+            color={"outlined"}
+            alt={"Share content"}
+            onClick={() => {
+            }}
+            icon={SHARE_ICON}
+          />
+          <UKButton
+            size="xxs"
+            color={"outlined"}
+            onClick={() => {
+            }}
+          >
+            Open in [DEFAULT APPLICATION]
+          </UKButton>
         </div>
-        <div>
-          Preview Content @ "{props.path}"
+        <div class={clsx(styles.previewContentContainer, (data() as Extract<ReturnType<typeof data>, {status: "ok"}>)?.data?.metadata?.pixelate && styles.pixelate)}>
+          <Suspense>
+            <Show when={data()!}>
+              {
+                data()!.status === "ok" && <>
+                  <img loading="eager" class={styles.smallPreview} src={(data() as Extract<ReturnType<typeof data>, {status: "ok"}>).data.assets?.small || ""} alt="preview"></img>
+                  {(isExpanded() || originalHasLoaded()) &&
+                    <img loading="lazy" class={clsx(originalHasLoaded() && styles.originalHasLoaded, styles.originalPreview)} onLoad={() => setOriginalHasLoaded(true)} src={(data() as Extract<ReturnType<typeof data>, {status: "ok"}>).data.assets?.original || ""} alt="preview"></img>
+                  }
+                </>
+              }
+            </Show>
+          </Suspense>
         </div>
-      </UKCard>
+      </UKCard >
     </>
   );
 };
diff --git a/applications/uk.ewsgit.files/web/lib/filesystemInterface.ts b/applications/uk.ewsgit.files/web/lib/filesystemInterface.ts
index f473f74..18e71a3 100644
--- a/applications/uk.ewsgit.files/web/lib/filesystemInterface.ts
+++ b/applications/uk.ewsgit.files/web/lib/filesystemInterface.ts
@@ -165,6 +165,27 @@ class FilesystemInterface {
     }
   }
 
+  async getPreviewDialogMetadata(url: UniformResourceLocator) {
+    const parsedUrl = this.urlToPath(url);
+
+    if (parsedUrl.type === "invalid") {
+      return { status: "invalid_path" as const };
+    }
+
+    if (parsedUrl.type === "local") {
+      alert("Cannot open the preview dialog for local files currently.");
+      return { status: "invalid_operation" as const };
+    } else {
+      const getEntryResponse = await trpc.previewDialog.get.query({ path: parsedUrl.path });
+
+      if (getEntryResponse.status === "ok") {
+        return getEntryResponse;
+      } else {
+        return { status: getEntryResponse.status };
+      }
+    }
+  }
+
   joinUrls(...urls: UniformResourceLocator[]) {
     const firstUrlType = this.urlToPath(urls[0]).type;
 
diff --git a/applications/uk.ewsgit.files/web/pages/dir/View.tsx b/applications/uk.ewsgit.files/web/pages/dir/View.tsx
index 167460f..d45340e 100644
--- a/applications/uk.ewsgit.files/web/pages/dir/View.tsx
+++ b/applications/uk.ewsgit.files/web/pages/dir/View.tsx
@@ -12,6 +12,7 @@ import DetailsView from "./components/DetailsView/DetailsView.tsx";
 import GridView from "./components/GridView/GridView.tsx";
 import styles from "./View.module.scss";
 import GalleryView from "./components/GalleryView/GalleryView.tsx";
+import {deselectAllItems, selectNextItem, selectPreviousItem} from "./itemSelection.ts";
 
 const View: Component = () => {
   const [ searchParams, setSearchParams ] = useSearchParams<{path?: UniformResourceLocator}>();
@@ -25,6 +26,7 @@ const View: Component = () => {
     size: undefined,
   });
   const [ errorMessage, setErrorMessage ] = createSignal<string | undefined>(undefined);
+  const [ forceViewItemUpdate, setForceViewItemUpdate ] = createSignal<number>(0)
   let navigationCounter = 0;
 
   createEffect(async () => {
@@ -35,8 +37,9 @@ const View: Component = () => {
 
     appContext?.userPreferences.viewType;
     appContext?.userPreferences.zoomPercentage;
+    forceViewItemUpdate();
 
-    appContext?.setViewState("isRenaming", false)
+    appContext?.setViewState("isRenaming", undefined)
     appContext?.setViewState("selectedItems", [])
 
     navigationCounter++
@@ -130,18 +133,58 @@ const View: Component = () => {
   const onKeyDown = (e: KeyboardEvent) => {
     e.preventDefault();
 
-    if (e.key === "F2") {
-      appContext?.setViewState("isRenaming", true)
-    }
+    if (e.key !== "Escape" && appContext?.globalState.disableShortcuts)
+      return;
 
-    if (e.key === " ") {
-      appContext?.setGlobalState("showPreview", appContext.viewState.selectedItems[ 0 ])
-    }
+    switch (e.key) {
+      case "F2": {
+        appContext?.setViewState("isRenaming", appContext.viewState.lastSelectedItem)
+        break;
+      }
+      case " ": {
+        if (appContext?.viewState.lastSelectedItem === undefined)
+          return;
 
-    if (e.key === "Escape") {
-      appContext?.setGlobalState("showPreview", undefined)
-      appContext?.setViewState("isRenaming", false)
-      appContext?.setViewState("selectedItems", [])
+        if (appContext?.globalState.showPreview === false) {
+          appContext?.setGlobalState("showPreview", true)
+        } else {
+          appContext?.setGlobalState("showPreview", false)
+        }
+        break;
+      }
+      case "Escape": {
+        appContext?.setGlobalState("showPreview", false)
+        appContext?.setViewState("isRenaming", undefined)
+        appContext?.setViewState("selectedItems", [])
+        appContext?.setGlobalState("disableShortcuts", false)
+        break;
+      }
+      case "ArrowLeft": {
+        selectPreviousItem(appContext!)
+        break;
+      }
+      case "ArrowRight": {
+        selectNextItem(appContext!)
+        break;
+      }
+      case "ArrowUp": {
+        selectPreviousItem(appContext!)
+        break;
+      }
+      case "ArrowDown": {
+        selectNextItem(appContext!)
+        break;
+      }
+      case "F5": {
+        setForceViewItemUpdate(p => p + 1)
+        break;
+      }
+      case "r": {
+        if (e.ctrlKey) {
+          setForceViewItemUpdate(p => p + 1)
+        }
+        break;
+      }
     }
   }
 
@@ -196,7 +239,7 @@ const View: Component = () => {
 
                 appContext?.setViewState("selectedItems", newSelection);
               } else {
-                appContext?.setViewState("selectedItems", []);
+                deselectAllItems(appContext!)
               }
 
               const originX = downEvent.clientX;
diff --git a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
index c84ce5b..07d5d9a 100644
--- a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
+++ b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
@@ -87,7 +87,7 @@ const DetailsView: Component = () => {
                     )}
                   </td>
                   <td>
-                    {appContext?.viewState.isRenaming && appContext.viewState.selectedItems[ 0 ] === item.path ?
+                    {appContext?.viewState.isRenaming === item.path ?
                       <div>Hello Renaming World!</div>
                       : <UKText size="m" role="body">
                         {browserPath.basename(item.path)}
diff --git a/applications/uk.ewsgit.files/web/pages/dir/components/GridView/GridView.module.scss b/applications/uk.ewsgit.files/web/pages/dir/components/GridView/GridView.module.scss
index e5cd0bc..287b004 100644
--- a/applications/uk.ewsgit.files/web/pages/dir/components/GridView/GridView.module.scss
+++ b/applications/uk.ewsgit.files/web/pages/dir/components/GridView/GridView.module.scss
@@ -73,7 +73,7 @@
   }
 
   .thumbnailIcon {
-    --icon-size: calc(6rem * var(--zoom-percentage, 1));
+    --icon-size: calc(calc(calc(128px / 16) * 9) * var(--zoom-percentage, 1));
   }
 
   &.itemHidden {
diff --git a/applications/uk.ewsgit.files/web/pages/dir/itemClick.ts b/applications/uk.ewsgit.files/web/pages/dir/itemClick.ts
index 0ae2e7c..143b51c 100644
--- a/applications/uk.ewsgit.files/web/pages/dir/itemClick.ts
+++ b/applications/uk.ewsgit.files/web/pages/dir/itemClick.ts
@@ -1,7 +1,8 @@
 import type { DOMElement } from "solid-js/jsx-runtime";
 import type { AppContextType } from "../../App.tsx";
-import type { ViewItem } from "./viewItem.ts";
 import filesystemInterface, { type UniformResourceLocator } from "../../lib/filesystemInterface.ts";
+import { deselectAllItems, selectItem } from "./itemSelection.ts";
+import type { ViewItem } from "./viewItem.ts";
 
 const onItemClick = (
   e: MouseEvent & { currentTarget: HTMLButtonElement; target: DOMElement },
@@ -16,18 +17,18 @@ const onItemClick = (
     const firstSelectionIndex = appContext?.viewState.viewItems.findIndex((viewItem) => viewItem.path === appContext.viewState.selectedItems[0]!);
 
     if (firstSelectionIndex === undefined) {
-      appContext?.setViewState("selectedItems", [item.path]);
+      selectItem(appContext, item.path);
       return;
     }
 
     if (firstSelectionIndex === currentIndex) {
-      appContext?.setViewState("selectedItems", []);
+      deselectAllItems(appContext);
       return;
     }
 
     if (firstSelectionIndex > currentIndex) {
       // for all intermediate items, select them
-      appContext?.setViewState("selectedItems", []);
+      deselectAllItems(appContext);
 
       const newViewSelectedItems: string[] = [];
 
@@ -35,13 +36,14 @@ const onItemClick = (
         newViewSelectedItems.push(appContext!.viewState.viewItems[i].path);
       }
 
+      appContext.setViewState("lastSelectedItem", newViewSelectedItems[0]);
       appContext?.setViewState("selectedItems", newViewSelectedItems);
       return;
     }
 
     if (firstSelectionIndex < currentIndex) {
       // for all intermediate items, select them
-      appContext?.setViewState("selectedItems", []);
+      deselectAllItems(appContext);
 
       const newViewSelectedItems: string[] = [];
 
@@ -49,6 +51,7 @@ const onItemClick = (
         newViewSelectedItems.push(appContext!.viewState.viewItems[i].path);
       }
 
+      appContext.setViewState("lastSelectedItem", newViewSelectedItems[0]);
       appContext?.setViewState("selectedItems", newViewSelectedItems);
 
       return;
@@ -77,12 +80,12 @@ const onItemClick = (
         return;
       }
 
-      appContext?.setViewState("selectedItems", []);
-      appContext.setViewState("lastSelectionTime", -1);
+      deselectAllItems(appContext);
       return;
     }
-    appContext?.setViewState("selectedItems", [item.path]);
-    appContext.setViewState("lastSelectionTime", Date.now());
+
+    selectItem(appContext, item.path);
   }
 };
+
 export default onItemClick;
diff --git a/applications/uk.ewsgit.files/web/pages/dir/itemSelection.ts b/applications/uk.ewsgit.files/web/pages/dir/itemSelection.ts
new file mode 100644
index 0000000..82c7cbe
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/pages/dir/itemSelection.ts
@@ -0,0 +1,55 @@
+import type { AppContextType } from "../../App";
+
+export function selectItem(appContext: AppContextType, path: string) {
+  appContext?.setViewState("lastSelectedItem", path);
+  appContext?.setViewState("selectedItems", [path]);
+  appContext.setViewState("lastSelectionTime", Date.now());
+
+  return true;
+}
+
+export function deselectAllItems(appContext: AppContextType) {
+  appContext?.setViewState("lastSelectedItem", undefined);
+  appContext?.setViewState("selectedItems", []);
+  appContext.setViewState("lastSelectionTime", -1);
+
+  return true;
+}
+
+export function selectNextItem(appContext: AppContextType) {
+  const viewItems = appContext?.viewState.viewItems;
+  const selectedViewItems = appContext?.viewState.selectedItems;
+
+  if (selectedViewItems?.length === 1) {
+    const currentSelectionIndex = viewItems?.findIndex((item) => item.path === selectedViewItems[0]);
+
+    if (currentSelectionIndex === undefined) return false;
+    if (!viewItems?.[currentSelectionIndex + 1]) return false;
+
+    appContext?.setViewState("lastSelectedItem", viewItems[currentSelectionIndex + 1].path);
+    appContext?.setViewState("selectedItems", [viewItems[currentSelectionIndex + 1].path]);
+
+    return true;
+  }
+
+  return false;
+}
+
+export function selectPreviousItem(appContext: AppContextType) {
+  const viewItems = appContext?.viewState.viewItems;
+  const selectedViewItems = appContext?.viewState.selectedItems;
+
+  if (selectedViewItems?.length === 1) {
+    const currentSelectionIndex = viewItems?.findIndex((item) => item.path === selectedViewItems[0]);
+
+    if (currentSelectionIndex === undefined) return false;
+    if (!viewItems?.[currentSelectionIndex - 1]) return false;
+
+    appContext?.setViewState("lastSelectedItem", viewItems[currentSelectionIndex - 1].path);
+    appContext?.setViewState("selectedItems", [viewItems[currentSelectionIndex - 1].path]);
+
+    return true;
+  }
+
+  return false;
+}
diff --git a/instance/src/systems/image.ts b/instance/src/systems/image.ts
index a4fd3b3..928e4d7 100644
--- a/instance/src/systems/image.ts
+++ b/instance/src/systems/image.ts
@@ -159,8 +159,10 @@ export default class ImageSystem extends System {
   ): Promise<boolean> {
     const sharpInstance = sharp(inputPath);
 
+    const originalDimensions = await sharpInstance.metadata();
+
     if (typeof dimensions === "function") {
-      dimensions = dimensions(await sharpInstance.metadata());
+      dimensions = dimensions(originalDimensions);
     }
 
     sharpInstance.resize(dimensions.width, dimensions.height, {
@@ -168,6 +170,7 @@ export default class ImageSystem extends System {
       position: options?.position,
       fit: options?.fit,
       background: options?.background,
+      kernel: originalDimensions.width / 2 > dimensions.width || originalDimensions.height / 2 > dimensions.height ? "cubic" : "mks2021",
     });
 
     if (options) {
diff --git a/uikit-solid/src/components/button/UKButton.module.scss b/uikit-solid/src/components/button/UKButton.module.scss
index 9fa5a48..e7d7d89 100644
--- a/uikit-solid/src/components/button/UKButton.module.scss
+++ b/uikit-solid/src/components/button/UKButton.module.scss
@@ -64,6 +64,43 @@
     cursor: not-allowed;
   }
 
+  &[data-size="xxs"] {
+    --padding-left: 8px;
+    --padding-right: 8px;
+
+    height: 24px;
+    border-width: 1px;
+    gap: 8px;
+    font-weight: var(--uk-ref-typeface-weight-medium);
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 0.1px;
+
+    --icon-size: 16px;
+
+    &[data-shape="square"] {
+      border-radius: var(--uk-sys-shape-corner-medium);
+      --transition-all: var(--uk-sys-motion-easing-standard-accelerate);
+
+      &:not(&[disabled]) {
+        &:active {
+          border-radius: var(--uk-sys-shape-corner-full);
+        }
+      }
+    }
+
+    &:not([data-shape="square"]) {
+      border-radius: 24px;
+      --transition-all: var(--uk-sys-motion-easing-standard-decelerate);
+
+      &:not(&[disabled]) {
+        &:active {
+          border-radius: var(--uk-sys-shape-corner-small);
+        }
+      }
+    }
+  }
+
   &[data-size="xs"] {
     --padding-left: 12px;
     --padding-right: 12px;
diff --git a/uikit-solid/src/components/button/lib/size.ts b/uikit-solid/src/components/button/lib/size.ts
index 57fcdf6..37c3945 100644
--- a/uikit-solid/src/components/button/lib/size.ts
+++ b/uikit-solid/src/components/button/lib/size.ts
@@ -1 +1 @@
-export type ButtonSize = "xs" | "s" | "m" | "l" | "xl";
+export type ButtonSize = "xxs" | "xs" | "s" | "m" | "l" | "xl";
diff --git a/uikit-solid/src/components/card/UKCard.module.scss b/uikit-solid/src/components/card/UKCard.module.scss
index a302d80..0eb3f19 100644
--- a/uikit-solid/src/components/card/UKCard.module.scss
+++ b/uikit-solid/src/components/card/UKCard.module.scss
@@ -67,7 +67,7 @@
 
   &[data-color="outlined"] {
     background-color: rgb(var(--uk-sys-color-surface));
-    color: rgb(var(--uk-sys-color-primary));
+    color: rgb(var(--uk-sys-color-on-surface));
     box-shadow: 0 0 1px rgb(var(--uk-sys-color-shadow));
     border-radius: var(--uk-sys-shape-corner-medium);
     border-width: 1px;