diff --git a/src/components/dashboard/Actionbar.tsx b/src/components/dashboard/Actionbar.tsx
index cec5881..eb7953d 100644
--- a/src/components/dashboard/Actionbar.tsx
+++ b/src/components/dashboard/Actionbar.tsx
@@ -32,7 +32,7 @@ export default component$(() => {
             );
 
             input.value = "";
-            files.value = [...files.value, ...metas];
+            files.value = [...files.value, ...metas].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
         }
     });
 
@@ -56,7 +56,7 @@ export default component$(() => {
                 boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
                 backdropFilter: "blur(12px)",
             }} class="flex items-center justify-center px-6 py-4 gap-5 text-white text-3xl absolute left-1/2 transform -translate-x-1/2">
-                <a onClick$={() => settingsOpen.value = true}><StereoLogoLinear /></a>
+                <StereoLogoLinear />
                 <SolarLibraryLinear />
                 <a
                     onClick$={(e) => {
@@ -67,7 +67,7 @@ export default component$(() => {
                     <SolarUploadMinimalisticLinear />
                 </a>
                 <SolarRoundedMagniferLinear />
-                <SolarSettingsLinear />
+                <a onClick$={() => settingsOpen.value = true}><SolarSettingsLinear /></a>
             </div>
 
             <input
diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx
index 1c190c8..fe68b56 100644
--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@@ -38,7 +38,6 @@ const formatSize = (bytes: number) => {
 	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 }
 
-
 const Files = component$(() => {
   	const File = component$(({ file }: { file: StereoFile }) => {
 		const Preview = component$(() => {
@@ -113,7 +112,7 @@ const Files = component$(() => {
     const hasMore = useSignal(true);
     const sentinel = useSignal<HTMLDivElement>();
 
-    const files = useNanostore$<StereoFile[]>(loadedFiles, []);
+    const files = useNanostore$<StereoFile[]>(loadedFiles, [])
     const page = useSignal(1);
 
 	// TODO: make it load enough images to fill the viewport instead
@@ -132,12 +131,12 @@ const Files = component$(() => {
 				console.log("Loading more files...");
 
 				debounce(async () => {
-					const newFiles = await api.list(page.value, 12); // gotta be a multiple of 4 so pages dont look weird
+					const newFiles = await api.list(page.value, 12);
                     if (newFiles.length === 0) {
                         hasMore.value = false;
                         if (sentinel.value) observer.unobserve(sentinel.value);
                     } else {
-                        files.value = [...files.value, ...newFiles];
+                        files.value = [...files.value, ...newFiles].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
                         page.value++;
                     }
                     loadingMore.value = false;
@@ -154,10 +153,30 @@ const Files = component$(() => {
 
     return (
         <div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl">
-            <div class="w-full columns-1 md:columns-2 lg:columns-4 gap-2 space-y-2 relative">
-                {files.value.map((file) => (
-                    <File key={file.ID} file={file} />
-                ))}
+            <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 space-y-2 relative">
+				<div>
+					{files.value.filter((_, index) => index % 4 === 0).map((file) => (
+						<File key={file.ID} file={file} />
+					))}
+				</div>
+
+				<div>
+					{files.value.filter((_, index) => index % 4 === 1).map((file) => (
+						<File key={file.ID} file={file} />
+					))}
+				</div>
+
+				<div>
+					{files.value.filter((_, index) => index % 4 === 2).map((file) => (
+						<File key={file.ID} file={file} />
+					))}
+				</div>
+
+				<div>
+					{files.value.filter((_, index) => index % 4 === 3).map((file) => (
+						<File key={file.ID} file={file} />
+					))}
+				</div>
 
 				{hasMore.value && (
 					<div