diff --git a/src/pages/files/[fileId].js b/src/pages/files/[fileId].js
index 7a3e623..234c7df 100644
--- a/src/pages/files/[fileId].js
+++ b/src/pages/files/[fileId].js
@@ -1,33 +1,39 @@
-import FileModel from "../../models/FileModel";
-import UserModel from "../../models/UserModel";
+import { Button } from "@nextui-org/react";
+import Image from "next/image";
+import { getFileInfo } from "src/utils/helpers/fileHelpers";
 
 export default function File(props) {
 	const { isValidFile, fileData } = props;
 	const file = JSON.parse(fileData);
+	let { uploader, fileId, uploadDate, contentType, fileUrl, width, height } =
+		file;
+	contentType = contentType.toLowerCase();
 
-	console.log(file);
+	if (isValidFile === false) {
+		return "invalid file";
+	}
+
+	let toShow;
+	if (contentType.includes("image")) {
+		toShow = (
+			<Image alt={fileId} src={fileUrl} width={width} height={height}></Image>
+		);
+	} else if (contentType.includes("video")) {
+		toShow = <video alt={fileId} src={fileUrl} controls></video>;
+	} else {
+		<Button>Download</Button>;
+	}
+
+	return (
+		<div className="h-screen flex items-center justify-center">{toShow}</div>
+	);
 }
 
 export async function getServerSideProps(ctx) {
 	let { fileId } = ctx.query;
 	fileId = fileId.split(".")[0];
 
-	const file = await FileModel.aggregate([
-		{
-			$match: {
-				fileId: fileId,
-			},
-		},
-		{
-			$lookup: {
-				from: UserModel.collection.name,
-				localField: "uploader",
-				foreignField: "_id",
-				as: "uploader",
-			},
-		},
-	]).exec();
-	console.log(file.uploader);
+	const file = await getFileInfo(fileId);
 	return {
 		props: {
 			isValidFile: file !== null,