diff --git a/client/components/document/index.tsx b/client/components/document/index.tsx
index 9edb414..ece89ec 100644
--- a/client/components/document/index.tsx
+++ b/client/components/document/index.tsx
@@ -10,9 +10,10 @@ type Props = {
     content?: string
     setTitle?: (title: string) => void
     setContent?: (content: string) => void
+    initialTab?: "edit" | "preview"
 }
 
-const Document = ({ remove, editable, title, content, setTitle, setContent }: Props) => {
+const Document = ({ remove, editable, title, content, setTitle, setContent, initialTab = 'edit' }: Props) => {
     const codeEditorRef = useRef<HTMLTextAreaElement>(null)
 
     const removeFile = (remove?: () => void) => {
@@ -45,7 +46,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent }: Pr
                 {remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
             </div>
             <div className={styles.descriptionContainer}>
-                <Tabs initialValue="edit" hideDivider width={"100%"} >
+                <Tabs initialValue={initialTab} hideDivider width={"100%"} >
                     <Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
                         {/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
                         <Textarea
diff --git a/client/pages/api/hello.ts b/client/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e..0000000
--- a/client/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx
index 65bd7d7..20b40ec 100644
--- a/client/pages/post/[id].tsx
+++ b/client/pages/post/[id].tsx
@@ -1,18 +1,48 @@
-import { Badge, Page, Text } from "@geist-ui/core";
-import { GetServerSidePropsContext } from "next"
+import { Loading, Page, Text } from "@geist-ui/core";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import Document from '../../components/document'
 import Header from "../../components/header";
 import VisibilityBadge from "../../components/visibility-badge";
 import { ThemeProps } from "../_app";
 
-type Props = ThemeProps & {
-    post: any
-}
+const Post = ({ theme, changeTheme }: ThemeProps) => {
+    const [post, setPost] = useState<any>()
+    const [isLoading, setIsLoading] = useState(true)
+    const [error, setError] = useState<string>()
+    const router = useRouter();
 
-const Post = ({ post, theme, changeTheme }: Props) => {
-    if (!post.files) {
-        return <div>No files</div>
-    }
+    useEffect(() => {
+        async function fetchPost() {
+            setIsLoading(true);
+            if (router.query.id) {
+                const post = await fetch(`/api/posts/${router.query.id}`, {
+                    method: "GET",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${localStorage.getItem("drift-token")}`
+                    }
+                })
+
+                if (post.ok) {
+                    const res = await post.json()
+                    if (res)
+                        setPost(res)
+                    else
+                        setError("Post not found")
+                } else {
+                    if (post.status.toString().startsWith("4")) {
+                        router.push("/signin")
+                    } else {
+                        setError(post.statusText)
+                    }
+                }
+                setIsLoading(false)
+            }
+        }
+        fetchPost()
+    }, [router, router.query.id])
+    console.log(post, isLoading, error)
 
     return (
         <Page>
@@ -20,16 +50,19 @@ const Post = ({ post, theme, changeTheme }: Props) => {
                 <Header theme={theme} changeTheme={changeTheme} />
             </Page.Header>
             <Page.Content width={"var(--main-content-width)"} margin="auto">
-                <Text h2>{post.title} <VisibilityBadge visibility={post.visibility} /></Text>
-                {
-                    post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
+                {error && <Text type="error">{error}</Text>}
+                {!error && (isLoading || !post?.files) && <Loading />}
+                {!isLoading && post && <><Text h2>{post.title} <VisibilityBadge visibility={post.visibility} /></Text>
+                    {post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
                         <Document
                             key={id}
                             content={content}
                             title={title}
                             editable={false}
+                            initialTab={'preview'}
                         />
-                    ))
+                    ))}
+                    ))</>
                 }
             </Page.Content>
 
@@ -38,14 +71,3 @@ const Post = ({ post, theme, changeTheme }: Props) => {
 }
 
 export default Post
-
-export async function getServerSideProps(context: GetServerSidePropsContext) {
-    const { id } = context.query;
-    const response = await fetch(`http://localhost:3000/posts/${id}`);
-    const json = await response.json();
-    return {
-        props: {
-            post: json
-        },
-    }
-}
diff --git a/client/styles/Home.module.css b/client/styles/Home.module.css
index 9fb2f3e..2c9252c 100644
--- a/client/styles/Home.module.css
+++ b/client/styles/Home.module.css
@@ -8,10 +8,19 @@
   width: var(--main-content-width);
 }
 
+.container {
+  width: 100% !important;
+}
+
 @media screen and (max-width: 768px) {
   .container {
     width: 100%;
-    margin: 0 !important;
+    margin: 0 auto !important;
+    padding: 0;
+  }
+
+  .container h1 {
+    font-size: 2rem;
   }
 
   .main {
diff --git a/client/styles/globals.css b/client/styles/globals.css
index d9d64df..37031ea 100644
--- a/client/styles/globals.css
+++ b/client/styles/globals.css
@@ -7,6 +7,12 @@
   --font-size: 16px;
 }
 
+@media screen and (max-width: 768px) {
+  :root {
+    --main-content-width: 100%;
+  }
+}
+
 html,
 body {
   padding: 0;
diff --git a/server/src/routes/posts.ts b/server/src/routes/posts.ts
index 828a87b..7dda61f 100644
--- a/server/src/routes/posts.ts
+++ b/server/src/routes/posts.ts
@@ -2,7 +2,7 @@ import { Router } from 'express'
 // import { Movie } from '../models/Post'
 import { File } from '../../lib/models/File'
 import { Post } from '../../lib/models/Post';
-import jwt from '../../lib/middleware/jwt';
+import jwt, { UserJwtRequest } from '../../lib/middleware/jwt';
 import * as crypto from "crypto";
 import { User } from '../../lib/models/User';
 
@@ -61,7 +61,7 @@ posts.post('/create', jwt, async (req, res, next) => {
     }
 });
 
-posts.get("/:id", async (req, res, next) => {
+posts.get("/:id", async (req: UserJwtRequest, res, next) => {
     try {
         const post = await Post.findOne({
             where: {
@@ -80,7 +80,15 @@ posts.get("/:id", async (req, res, next) => {
                 },
             ]
         })
-        res.json(post);
+
+        console.log(post)
+        if (post?.visibility === 'public' || post?.visibility === 'unlisted') {
+            res.json(post);
+        } else {
+            jwt(req, res, () => {
+                res.json(post);
+            });
+        }
     }
     catch (e) {
         next(e);