diff --git a/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx b/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx
index 38fe094eb..f56c7e4e7 100644
--- a/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx
+++ b/frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx
@@ -48,12 +48,13 @@ function FileContainer({ name, id, selectedFile, setSelectedFile }: Props) {
     console.log(id);
     setSelectedFile(id);
     if (selectedFile !== null) {
-      navigate("/editor/" + selectedFile, { 
+      navigate("/editor/" + selectedFile, {
         replace: false,
         state: {
-          filename: name
-        } 
-      }), [navigate];
+          filename: name,
+        },
+      }),
+        [navigate];
     }
   };
 
diff --git a/next/src/pages/blog/[bid].tsx b/next/src/pages/blog/[bid].tsx
index 812be6888..0a271c2bc 100644
--- a/next/src/pages/blog/[bid].tsx
+++ b/next/src/pages/blog/[bid].tsx
@@ -10,47 +10,71 @@ import { BlogHeading } from "../../components/blog/Blog-styled";
 import Footer from "../../components/footer/Footer";
 
 const PageContainer = styled.div`
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
 `;
 
 const MainContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 80vh;
 `;
 
-const BlogPage: NextPage<{ data: Block[] }> = ({ data }) => {
-  return (
-    <PageContainer>
-      <Navbar
-        variant={NavbarType.HOMEPAGE}
-        open={false}
-        setNavbarOpen={() => {}}
-      />{" "}
-      {/** ignore the styling */}
-      <MainContainer>
-        <BlogHeading>Blog Title</BlogHeading>
-        <Blog blocks={data} />
-      </MainContainer>
-      <Footer />
-    </PageContainer>
-  );
+const BlogPage: NextPage<{ data: Block[]; blogName: string }> = ({
+    data,
+    blogName,
+}) => {
+    return (
+        <PageContainer>
+            <Navbar
+                variant={NavbarType.HOMEPAGE}
+                open={false}
+                setNavbarOpen={() => {}}
+            />{" "}
+            {/** ignore the styling */}
+            <MainContainer>
+                <BlogHeading>{blogName}</BlogHeading>
+                <Blog blocks={data} />
+            </MainContainer>
+            <Footer />
+        </PageContainer>
+    );
 };
 
 export const getServerSideProps: GetServerSideProps = async ({ params }) => {
-  const data = await fetch(
-    `http://backend:8080/api/filesystem/get/published?DocumentID=${
-      params && params.bid
-    }`,
-    {
-      method: "GET",
-    }
-  ).then((res) => res.text());
-
-  return { props: { data: JSON.parse(data).Contents } };
+    // get blog data
+    const data = await fetch(
+        `http://backend:8080/api/filesystem/get/published?DocumentID=${
+            params && params.bid
+        }`,
+        {
+            method: "GET",
+        }
+    )
+        .then((res) => res.text())
+        .then((res) => JSON.parse(res).Contents);
+
+    // get blog name
+    const blogName = await fetch(
+        `http://backend:8080/api/filesystem/info?EntityID=${
+            params && params.bid
+        }`,
+        {
+            method: "GET",
+        }
+    )
+        .then((blogInfo) => blogInfo.json())
+        .then((blogInfo_json) => blogInfo_json.Response.EntityName)
+        .catch((err) => console.log("ERROR fetching blogInfo: ", err));
+
+    return {
+        props: {
+            data: data,
+            blogName: blogName,
+        },
+    };
 };
 
 export default BlogPage;