diff --git a/src/app/[file]/content.tsx b/src/app/[...file]/content.tsx
similarity index 100%
rename from src/app/[file]/content.tsx
rename to src/app/[...file]/content.tsx
diff --git a/src/app/[file]/download.png b/src/app/[...file]/download.png
similarity index 100%
rename from src/app/[file]/download.png
rename to src/app/[...file]/download.png
diff --git a/src/app/[file]/download.svg b/src/app/[...file]/download.svg
similarity index 100%
rename from src/app/[file]/download.svg
rename to src/app/[...file]/download.svg
diff --git a/src/app/[file]/page.css.ts b/src/app/[...file]/page.css.ts
similarity index 100%
rename from src/app/[file]/page.css.ts
rename to src/app/[...file]/page.css.ts
diff --git a/src/app/[file]/page.tsx b/src/app/[...file]/page.tsx
similarity index 84%
rename from src/app/[file]/page.tsx
rename to src/app/[...file]/page.tsx
index 03463a4..4bf14d4 100644
--- a/src/app/[file]/page.tsx
+++ b/src/app/[...file]/page.tsx
@@ -23,6 +23,10 @@ type Props = {
 	searchParams: SearchParams,
 };
 
+function get_path(file: string[]) {
+	return file.join("/");
+}
+
 function get_root(search_params: SearchParams) {
 	console.log("HEEEERORORORRO", search_params)
 	return search_params['root'] ?? 'raw.monodon.me';
@@ -33,13 +37,14 @@ export async function generateMetadata(
 	parent: ResolvingMetadata,
 ): Promise<Metadata> {
 	return {
-		title: `${params.file} | ${get_root(searchParams)}`,
+		title: `${get_path(params.file)} | ${get_root(searchParams)}`,
 	};
 }
 
 export default async function Page({
 	params, searchParams
 }: Props) {
+	const path     = get_path(params.file);
 	const root_url = `https://${get_root(searchParams)}/`;
 
 	return (
@@ -48,7 +53,7 @@ export default async function Page({
 				<div className={title_group}>
 					<div className={title_text_group}>
 		 				<p className={supertitle}>{root_url}</p>
-						<p className={title}>{params.file}</p>
+						<p className={title}>{path}</p>
 					</div>
 					<button className={download_button}>
 						<Image
@@ -58,7 +63,7 @@ export default async function Page({
 						/>
 					</button>
 				</div>
-				<Content src={`${root_url}${params.file}`} />
+				<Content src={`${root_url}${path}`} />
 			</div>
 		</div>
 	);
diff --git a/src/app/[file]/types/error.tsx b/src/app/[...file]/types/error.tsx
similarity index 100%
rename from src/app/[file]/types/error.tsx
rename to src/app/[...file]/types/error.tsx
diff --git a/src/app/[file]/types/image.tsx b/src/app/[...file]/types/image.tsx
similarity index 100%
rename from src/app/[file]/types/image.tsx
rename to src/app/[...file]/types/image.tsx
diff --git a/src/app/[...file]/types/text.css.ts b/src/app/[...file]/types/text.css.ts
new file mode 100644
index 0000000..fb8780b
--- /dev/null
+++ b/src/app/[...file]/types/text.css.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css'
+
+export const text = style({
+	fontFamily: 'monospace',
+	whiteSpace: 'pre-wrap',
+});
diff --git a/src/app/[...file]/types/text.tsx b/src/app/[...file]/types/text.tsx
new file mode 100644
index 0000000..8c2dbfc
--- /dev/null
+++ b/src/app/[...file]/types/text.tsx
@@ -0,0 +1,7 @@
+import * as style from './text.css'
+
+export default function Text({ text }: { text: string }) {
+	return (
+		<p className={style.text}>{text}</p>
+	);
+}
diff --git a/src/app/[file]/types/text.tsx b/src/app/[file]/types/text.tsx
deleted file mode 100644
index 3bead19..0000000
--- a/src/app/[file]/types/text.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function Text({ text }: { text: string }) {
-	return (
-		<p>{text}</p>
-	);
-}