diff --git a/src/components/Controlbar.tsx b/src/components/Controlbar.tsx
new file mode 100644
index 0000000..172f1a5
--- /dev/null
+++ b/src/components/Controlbar.tsx
@@ -0,0 +1,10 @@
+import { component$ } from "@builder.io/qwik";
+
+// TODO: add upload button and other stuff fr
+export default component$(() => {
+    return (
+        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-red-400 w-1/4 p-4 rounded-lg flex items-center justify-center">
+            hi
+        </div>
+    )
+})
\ No newline at end of file
diff --git a/src/components/File.tsx b/src/components/File.tsx
new file mode 100644
index 0000000..714de15
--- /dev/null
+++ b/src/components/File.tsx
@@ -0,0 +1,15 @@
+import { component$ } from "@builder.io/qwik";
+import { StereoFile } from "~/lib/types";
+
+export default component$(({ file }: { file: StereoFile }) => {
+    return (
+        <div key={file.ID}>
+            <h2>Owner: {file.Owner}</h2>
+            <p>File ID: {file.ID}</p>
+            <p>Created: {new Date(file.CreatedAt).toLocaleString()}</p>
+            { file.Base64 && (file.ID.endsWith(".png") || file.ID.endsWith(".jpg") || file.ID.endsWith(".jpeg")) && (
+                <img src={`data:image/png;base64,${file.Base64}`} alt="Stereo File" class="w-full h-auto" />
+            )}
+        </div>
+    )
+})
\ No newline at end of file
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..37050e2
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,7 @@
+export type StereoFile = {
+    ID: string;
+    Path: string;
+    Owner: string;
+    CreatedAt: string;
+    Base64: string;
+}
\ No newline at end of file
diff --git a/src/routes/api/[path]/index.tsx b/src/routes/api/[path]/index.tsx
index 7101f19..34c113b 100644
--- a/src/routes/api/[path]/index.tsx
+++ b/src/routes/api/[path]/index.tsx
@@ -1,12 +1,26 @@
-import type { RequestHandler } from '@builder.io/qwik-city';
-import ky from 'ky';
+import type { RequestEvent, RequestHandler } from '@builder.io/qwik-city';
 
-export const onGet: RequestHandler = async ({ send, pathname, request }) => {
-  const res = await ky.get(`http://localhost:8081${pathname}`, {
+const proxy = async ({ send, url, pathname, request }: RequestEvent) => {
+  const targetUrl = new URL(`http://localhost:8081${pathname}`, url);
+  const headers = new Headers(request.headers);
+
+  const backendResponse = await fetch(targetUrl, {
     method: request.method,
-    headers: request.headers,
-    body: request.method === 'GET' ? null : request.body,
+    headers,
+    body: request.method !== 'GET' && request.method !== 'HEAD' ? request.body : undefined,
+    redirect: 'manual',
   });
 
-  send(res);
-};
\ No newline at end of file
+  console.log(`Proxying ${request.method} request to: ${targetUrl.href}`);
+
+  send(
+    new Response(backendResponse.body, {
+      status: backendResponse.status,
+      statusText: backendResponse.statusText,
+      headers: backendResponse.headers,
+    })
+  );
+};
+
+export const onGet: RequestHandler = proxy;
+export const onPost: RequestHandler = proxy;
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index b4452a9..928a264 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,38 +1,53 @@
 import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
 import ky from "ky";
+import Controlbar from "~/components/Controlbar";
+import File from "~/components/File";
 import { OAUTH_LINK } from "~/lib/constants";
+import { StereoFile } from "~/lib/types";
+
+// TODO: move this to dashboard/index.tsx
 
 export default component$(() => {
-  const files = useSignal<any[]>([]);
-  
-  useVisibleTask$(async () => {
-    const res: any[] | undefined = await ky.get("/api/list", { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` } })
-      .json();
-    console.log(res);
-    files.value = res!;
-  })
+	const files = useSignal<StereoFile[]>([]);
+	const loaded = useSignal(false);
+	useVisibleTask$(async () => {
+		const res: StereoFile[] | undefined
+		= await ky.get("/api/list", { 
+			headers: {
+				Authorization: `Bearer ${localStorage.getItem("token")}`
+			}
+		}).json();
 
-  return (
-    <>
-      <a href={OAUTH_LINK}>oauth</a>
-      {files.value.map((file) => (
-        <div key={file.ID}>
-          <h2>Owner: {file.Owner}</h2>
-          <p>File ID: {file.ID}</p>
-          <p>Created: {new Date(file.CreatedAt).toLocaleString()}</p>
-        </div>
-      ))}
-    </>
-  );
+		files.value = res!;
+		loaded.value = true;
+	})
+
+	return (
+		<>
+			<Controlbar />
+			<a href={OAUTH_LINK}>oauth</a>
+
+			<div class="grid grid-cols-3 gap-4 p-4">
+				{/* TODO: make ts better :broken_heart: */}
+				{!loaded.value ? <p>Loading...</p> : (
+					files.value.length === 0 ? ( <p> no files found fr </p> )
+					: files.value.map((file) => (
+						<File key={file.ID} file={file} />
+					))
+				)}
+			
+			</div>
+		</>
+	);
 });
 
 export const head: DocumentHead = {
-  title: "Welcome to Qwik",
-  meta: [
-    {
-      name: "description",
-      content: "Qwik site description",
-    },
-  ],
+	title: "Welcome to Qwik",
+	meta: [
+		{
+			name: "description",
+			content: "Qwik site description",
+		},
+	],
 };