diff --git a/src/pages/file/[id].tsx b/src/pages/file/[id].tsx
index 13e0265..553309d 100644
--- a/src/pages/file/[id].tsx
+++ b/src/pages/file/[id].tsx
@@ -225,12 +225,20 @@ export default function File({ id, fileName }: Props) {
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const { id } = context.query;
-  const fileName = decodeURIComponent((id as string).split(":")[0]);
+
+  const fetchFileMetadata = await axios.get<FileResponse>(
+    `${process.env.NEXT_PUBLIC_DOMAIN}/api/files/${id}`,
+  );
+  if (!fetchFileMetadata.data.success) {
+    return {
+      notFound: true,
+    };
+  }
 
   return {
     props: {
       id,
-      fileName,
+      fileName: fetchFileMetadata.data.file.name,
     },
   };
 };
diff --git a/src/pages/folder/[id].tsx b/src/pages/folder/[id].tsx
index 2caa8ed..5dea94a 100644
--- a/src/pages/folder/[id].tsx
+++ b/src/pages/folder/[id].tsx
@@ -14,34 +14,20 @@ import ListLayout from "components/layout/Files/ListLayout";
 import { createFileId } from "utils/driveHelper";
 import { NextSeo } from "next-seo";
 import { GetServerSideProps } from "next";
-import { useRouter } from "next/router";
 
-// type Props = {
-//   id: string;
-//   folderName: string;
-//   // bannerFileId?: string;
-// };
-export default function Home() {
+type Props = {
+  id: string;
+  folderName: string;
+  // bannerFileId?: string;
+};
+export default function Home({ id, folderName }: Props) {
   const { layout } = useContext<TLayoutContext>(LayoutContext);
-  const router = useRouter();
-  const [id, setId] = useState<string>(router.query.id as string);
-  const [folderName, setFolderName] = useState<string>();
   const [data, setData] = useState<FilesResponse>();
 
   const [isReadmeExists, setIsReadmeExists] = useState<boolean>(false);
   const [isReadmeLoading, setIsReadmeLoading] = useState<boolean>(false);
   const [readmeData, setReadmeData] = useState<string>();
 
-  useEffect(() => {
-    if (!id && router.query.id) {
-      setId(router.query.id as string);
-      setFolderName(
-        decodeURIComponent((router.query.id as string).split(":")[0]),
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.query]);
-
   /**
    * ===========================
    * START - fetch file data
@@ -117,7 +103,7 @@ export default function Home() {
    * **/
 
   return (
-    <DefaultLayout fileId={id as string}>
+    <DefaultLayout fileId={id}>
       <NextSeo
         title={folderName}
         openGraph={{
@@ -184,36 +170,36 @@ export default function Home() {
   );
 }
 
-// export const getServerSideProps: GetServerSideProps = async (context) => {
-//   const { id } = context.query;
-//
-//   // const fetchFolder = await axios.get<FilesResponse>(
-//   //   `${process.env.NEXT_PUBLIC_DOMAIN}/api/files/${id}`,
-//   // );
-//   //
-//   // if (!fetchFolder.data.success) {
-//   //   return {
-//   //     notFound: true,
-//   //   };
-//   // }
-//   const folderName = decodeURIComponent((id as string).split(":")[0]);
-//
-//   // const fetchBanner = await axios.get<BannerResponse>(
-//   //   `${process.env.NEXT_PUBLIC_DOMAIN}/api/banner/${id}`,
-//   // );
-//   //
-//   // if (!fetchBanner.data.banner) {
-//   //   return {
-//   //     props: { id, folderName },
-//   //   };
-//   // }
-//
-//   // const bannerFileId = createFileId(fetchBanner.data.banner, true);
-//   return {
-//     props: {
-//       id,
-//       folderName,
-//       // bannerFileId,
-//     },
-//   };
-// };
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { id } = context.query;
+
+  const fetchFolder = await axios.get<FilesResponse>(
+    `${process.env.NEXT_PUBLIC_DOMAIN}/api/files/${id}`,
+  );
+
+  if (!fetchFolder.data.success) {
+    return {
+      notFound: true,
+    };
+  }
+  const folderName = decodeURIComponent((id as string).split(":")[0]);
+
+  // const fetchBanner = await axios.get<BannerResponse>(
+  //   `${process.env.NEXT_PUBLIC_DOMAIN}/api/banner/${id}`,
+  // );
+  //
+  // if (!fetchBanner.data.banner) {
+  //   return {
+  //     props: { id, folderName },
+  //   };
+  // }
+
+  // const bannerFileId = createFileId(fetchBanner.data.banner, true);
+  return {
+    props: {
+      id,
+      folderName,
+      // bannerFileId,
+    },
+  };
+};