diff --git a/src/app/blog/[slug]/commentCard.tsx b/src/app/blog/[slug]/commentCard.tsx
index 99c0f6c..47c24e9 100644
--- a/src/app/blog/[slug]/commentCard.tsx
+++ b/src/app/blog/[slug]/commentCard.tsx
@@ -1,24 +1,22 @@
-'use client';
+
 import Image from 'next/image';
-import { type Comment } from '../../../interfaces/comments';
-import { formatRelativeTime } from '~/utils/miscUtils';
+
 import CommentEditModal from './commentEditModal';
-import { useSession } from 'next-auth/react';
 import CommentDeleteButton from './commentDeleteButton';
+import { type Comment } from '~/interfaces/comments';
+import { api } from '~/utils/api'
+import { formatRelativeTime } from '~/utils/miscUtils';
 
-interface CommentCardProps {
-    comment: Comment;
-}
 
 // Create the CommentCard component
-const CommentCard: React.FC<CommentCardProps> = ({ comment }) => {
+export default function CommentCard({ comment }: { comment: Comment }) {
     const commenterImage = comment.commenter?.image ?? '/images/user.png';
     const createdAt = comment.createdAt.toISOString();
     const displayTime = formatRelativeTime(createdAt);
 
-    const { data: sessionData } = useSession();
-    const isOwner = sessionData?.user?.id === comment.commenter?.id;
-    const isAdmin = sessionData?.user?.isAdmin;
+    const user = api.user.getUserSession.useQuery().data;
+    const isOwner = user?.id === comment.commenter?.id;
+    const isAdmin = user?.isAdmin;
 
     return (
         <div
@@ -38,14 +36,14 @@ const CommentCard: React.FC<CommentCardProps> = ({ comment }) => {
                     <p className="font-bold">{comment.commenter?.name}</p>
                 </div>
                 {isOwner ? (
-                  <CommentEditModal comment={comment} />
+
+                  <CommentEditModal comment={comment} user={user} />
                   ): isAdmin ? (
-                    <CommentDeleteButton commentId={comment.id} />) : null }
+                    <CommentDeleteButton commentId={comment.id} />
+                ) : null }
             </div>
             <p className="text-gray-700">{comment.content}</p>
             <p className="mt-2 text-sm text-gray-500">Created: {displayTime}</p>
         </div>
     );
 };
-
-export default CommentCard;
diff --git a/src/app/blog/[slug]/commentDeleteButton.tsx b/src/app/blog/[slug]/commentDeleteButton.tsx
index 8730aec..26c7377 100644
--- a/src/app/blog/[slug]/commentDeleteButton.tsx
+++ b/src/app/blog/[slug]/commentDeleteButton.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useRouter } from 'next/navigation';
 import { api } from '~/utils/api';
 
 export default function CommentDeleteButton({
@@ -6,33 +7,23 @@ export default function CommentDeleteButton({
 }: {
     commentId: string;
 }) {
-    const utils = api.useContext();
+    const router = useRouter();
     const deleteComment = api.comments.deleteComment.useMutation({
-        onSuccess: async () => {
-            await utils.comments.invalidate();
+        onSuccess:  () => {
+        router.refresh();
         },
         onError: error => {
             console.log('error deleting comment', error);
         }
     });
 
-    function handleDeleteComment(commentId: string) {
-        return deleteComment.mutate(
-            { commentId },
-            {
-                onSettled: () => {
-                    console.log('Comment deleted');
-                },
-            },
-        );
-    }
     return (
         <>
             <button
                 className="items-center  rounded-md border border-transparent bg-none px-4 py-2 text-base font-medium text-white shadow-sm shadow-slate-400 hover:bg-red-200 focus:outline-none"
                 onClick={e => {
                     e.preventDefault();
-                    handleDeleteComment(commentId);
+                    deleteComment.mutate({ commentId });
                 }}
             >
                 ❌
diff --git a/src/app/blog/[slug]/commentEditModal.tsx b/src/app/blog/[slug]/commentEditModal.tsx
index b8a35ff..a848593 100644
--- a/src/app/blog/[slug]/commentEditModal.tsx
+++ b/src/app/blog/[slug]/commentEditModal.tsx
@@ -2,16 +2,17 @@
 import { useEffect, useRef, useState } from 'react';
 import { api } from '~/utils/api';
 import CommentDeleteButton from './commentDeleteButton';
-import { useSession } from 'next-auth/react';
+
 import { type Comment } from '~/interfaces/comments';
 import { translateCases, type TranslateCase } from '~/interfaces/translate';
+import { type Session } from 'next-auth';
+import { useRouter } from 'next/navigation';
+import useController from '~/hooks/useController';
 
-export default function CommentEditModal({ comment }: { comment: Comment }) {
+export default function CommentEditModal({ comment, user }: { comment: Comment, user: Session["user"] }) {
     const commentId = comment?.id;
     const initialContent = comment?.content;
-
-    const { data: sessionData } = useSession();
-    const user = sessionData?.user;
+    const router = useRouter();
 
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [commentContent, setCommentContent] = useState<string>(
@@ -28,11 +29,11 @@ export default function CommentEditModal({ comment }: { comment: Comment }) {
     const closeModal = () => {
         setIsModalOpen(false);
     };
+    const {
+        postComments,
+    } = useController({ slug: comment.postSlug })
 
     useEffect(() => {
-        // if (!commentContent) {
-        //     setCommentContent(comment?.content);
-        // }
         const handleKeyDown = (e: KeyboardEvent) => {
             if (e.key === 'Escape') {
                 closeModal();
@@ -62,16 +63,16 @@ export default function CommentEditModal({ comment }: { comment: Comment }) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const utils = api.useContext();
+
     const translateMutation = api.translations.translateComment.useMutation({
         async onSuccess(res) {
             async function close() {
                 await new Promise(resolve => setTimeout(resolve, 2000));
             }
+            router.refresh();
             await close();
             const { comment } = res;
             setCommentContent(comment.content);
-            await utils.comments.invalidate();
             closeModal();
         },
         onError(error) {
@@ -82,13 +83,23 @@ export default function CommentEditModal({ comment }: { comment: Comment }) {
             setIsTranslating(false);
         },
     });
+    const commentToUpdate = postComments?.find(c => c.id === commentId);
 
     const updateMutation = api.comments.updateComment.useMutation({
-        async onSuccess() {
-            await utils.comments.invalidate();
+        onMutate() {
+            if (commentToUpdate) {
+                commentToUpdate.content = commentContent;
+            }
+
+        },
+        onSuccess() {
+            router.refresh();
             closeModal();
         },
         onError(error) {
+            if (commentToUpdate) {
+                commentToUpdate.content = initialContent;
+            }
             console.log('error updating comment', error);
         },
         onSettled() {
diff --git a/src/app/blog/[slug]/commentLayout.tsx b/src/app/blog/[slug]/commentForm.tsx
similarity index 87%
rename from src/app/blog/[slug]/commentLayout.tsx
rename to src/app/blog/[slug]/commentForm.tsx
index 6623bbd..f542400 100644
--- a/src/app/blog/[slug]/commentLayout.tsx
+++ b/src/app/blog/[slug]/commentForm.tsx
@@ -1,30 +1,35 @@
 'use client';
 import { signIn } from 'next-auth/react';
-import ReCAPTCHA from 'react-google-recaptcha';
 
-import { typedBoolean } from '~/utils/miscUtils';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { type Comment } from '~/interfaces/comments';
 import CommentCard from './commentCard';
 import useController from '~/hooks/useController';
 
 const RECAPTCHA_SITE_KEY = process.env.GOOGLE_PUBLIC_RECAPTCHA_KEY;
 
-export function CommentLayout({ slug }: { slug: string }) {
-
+export default function CommentForm({
+    slug,
+    allComments,
+}: {
+    slug: string;
+    allComments: Comment[];
+}) {
     const {
         submitting,
         setSubmitting,
         setToken,
         comment,
         setComment,
-        allComments,
         errors,
         setGotime,
-        commentContainerRef,
         userIsLoggedIn,
-    } = useController({ slug })
+    } = useController({
+        slug,
+    });
 
     return (
-        <div>
+        <>
             <section aria-labelledby="comments-heading" className="pt-16">
                 <div className="w-full">
                     <form
@@ -99,7 +104,7 @@ export function CommentLayout({ slug }: { slug: string }) {
                             {errors.length
                                 ? errors.map((error, i) => (
                                       <p key={i} className="text-red-500">
-                                          {errors}
+                                          {error}
                                       </p>
                                   ))
                                 : null}
@@ -138,24 +143,14 @@ export function CommentLayout({ slug }: { slug: string }) {
                         </div>
                     </form>
                 </div>
-                <div className="mt-16 " ref={commentContainerRef}>
+                <div className="mt-16">
                     <h2 id="comments-heading" className="sr-only">
                         Comments
                     </h2>
-                    {allComments?.length ? (
-                        allComments
-                            .filter(comment => typedBoolean(comment))
-                            .map(comment => (
-                                <div
-                                    className="relative flex flex-row items-center"
-                                    key={comment.id}
-                                >
-                                    <CommentCard
-                                        key={comment.id}
-                                        comment={comment}
-                                    />
-                                </div>
-                            ))
+                    {allComments ? (
+                        allComments.map(comment => (
+                            <CommentCard key={comment?.id} comment={comment} />
+                        ))
                     ) : (
                         <p className="text-center text-xl text-gray-500">
                             Be the first to leave your thoughts!
@@ -163,6 +158,6 @@ export function CommentLayout({ slug }: { slug: string }) {
                     )}
                 </div>
             </section>
-        </div>
+        </>
     );
 }
diff --git a/src/app/blog/[slug]/commentList.tsx b/src/app/blog/[slug]/commentList.tsx
new file mode 100644
index 0000000..1f96d3d
--- /dev/null
+++ b/src/app/blog/[slug]/commentList.tsx
@@ -0,0 +1,28 @@
+import { type CommentSelect } from '~/interfaces/comments';
+import CommentCard from './commentCard';
+
+export default function CommentList({
+    allComments,
+}: {
+    allComments: CommentSelect[] | undefined;
+}) {
+
+    return (
+        <div className="mt-16">
+            <h2 id="comments-heading" className="sr-only">
+                Comments
+            </h2>
+            {allComments ? (
+                allComments.map(comment => (
+                        comment ? (
+                    <CommentCard key={comment?.id} comment={comment} />
+                    ) : null
+                    )
+            )) : (
+                <p className="text-center text-xl text-gray-500">
+                    Be the first to leave your thoughts!
+                </p>
+            )}
+        </div>
+    );
+}
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
new file mode 100644
index 0000000..6677443
--- /dev/null
+++ b/src/app/blog/[slug]/page.tsx
@@ -0,0 +1,107 @@
+import { type Metadata } from 'next';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import readingTime from 'reading-time';
+
+import { type NonNullablePostOptions } from '~/interfaces/post';
+import { getPostBySlug, getPostSlugs } from 'lib/blogApi';
+import markdownToHtml from 'lib/markdownToHtml';
+import PostBody from '~/components/postBody';
+import { api } from '~/trpc/server';
+import CommentForm from './commentForm';
+
+type Params = {
+    params: {
+        slug: string;
+    };
+};
+
+async function getPostData({ params }: Params) {
+    const postData: NonNullablePostOptions = await getPostBySlug(params.slug, [
+        'title',
+        'date',
+        'slug',
+        'author',
+        'content',
+    ]);
+
+    const parsedContent = await markdownToHtml(postData.content || '');
+    const stats = readingTime(postData.content || '');
+    if (!postData.slug) throw new Error('No slug found for post');
+    const comments = await api.comments.getCommentsForPost.query({slug: params.slug})
+    return {
+        post: {
+            title: postData.title,
+            date: postData.date,
+            slug: postData.slug,
+            author: postData.author,
+            content: parsedContent,
+        },
+        stats,
+        comments
+    };
+}
+
+
+
+export async function generateStaticParams() {
+    const slugs = await getPostSlugs();
+    return slugs.map(slug => {
+        return {
+            slug: slug.replace(/\.md$/, ''), // Remove file extension for each post slug
+        };
+    });
+}
+
+export async function generateMetadata({ params }: Params): Promise<Metadata> {
+    const { title, excerpt } = await getPostBySlug(params.slug, [
+        'title',
+        'excerpt',
+    ]);
+    return {
+        title,
+        description: excerpt,
+    };
+}
+
+export default async function Post({ params }: Params) {
+    const { post, stats, comments } = await getPostData({ params });
+    if (!post.slug) notFound();
+    return (
+        <>
+            <div className="py-16">
+                <details>
+                    <summary>Post Data</summary>
+                    <pre>
+                        {JSON.stringify({ ...post, id: undefined }, null, 2)}
+                    </pre>
+                </details>
+                {post.content ? (
+                    <section aria-labelledby="post-heading">
+                        <div className="container mx-auto min-h-full max-w-2xl px-5">
+                            <h1
+                                id="post-heading"
+                                className="md:text-6 3xl mb-12 text-center text-3xl font-bold leading-tight tracking-tighter md:text-left md:leading-none lg:text-4xl"
+                            >
+                                {post.title}
+                            </h1>
+                            <p>{post.date?.split('T')[0]}</p>
+                            <span>{stats.text}</span>
+                            {typeof post.author === 'string' ? (
+                                // When post.author is a string (name of the author)
+                                <p>Written by: {post.author}</p>
+                            ) : (
+                                // When post.author is an Author object
+                                <p>Written by: {post.author?.name}</p>
+                            )}
+                            <PostBody content={post.content} />
+                            <Link href="/blog">Back to blogs →</Link>
+                        </div>
+                    </section>
+                ) : null}
+                <hr className="mt-16 h-[3px] bg-gradient-to-r from-[#d68501] to-[#6b2b6f]" />
+                <CommentForm slug={post.slug} allComments={comments} />
+            </div>
+        </>
+    );
+}
diff --git a/src/pages/blog/index.tsx b/src/app/blog/page.tsx
similarity index 82%
rename from src/pages/blog/index.tsx
rename to src/app/blog/page.tsx
index a042e60..9fb63ef 100644
--- a/src/pages/blog/index.tsx
+++ b/src/app/blog/page.tsx
@@ -1,13 +1,16 @@
 import { getAllPosts } from "lib/blogApi"
-import { type PostOptions } from "../../interfaces/post"
 import Link from "next/link"
 import Head from "next/head"
 
-type Props = {
-    allPosts: PostOptions[]
-}
+const getPostList =  async () => {
+    return await getAllPosts([
+      'date',
+      'slug',
+    ])
+  }
 
-export default function Blog({ allPosts } : Props) {
+export default async function Blog() {
+    const allPosts = await getPostList();
     return (
         <>
         <Head>
@@ -39,15 +42,4 @@ export default function Blog({ allPosts } : Props) {
         </div>
         </>
     )
-}
-
-export const getStaticProps =  async () => {
-    const allPosts = await getAllPosts([
-      'date',
-      'slug',
-    ])
-
-    return {
-      props: { allPosts },
-    }
-  }
+}
\ No newline at end of file
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
new file mode 100644
index 0000000..cab2af0
--- /dev/null
+++ b/src/app/global-error.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        {error.message}
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  )
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ada45ee..3279ad7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import Layout from '~/app/pageLayout';
 import { TRPCReactProvider } from '~/trpc/react';
 import { headers } from 'next/headers';
 
+
 export const metadata: Metadata = {
     title: 'Lucas Steinmacher - Software Engineering Blog',
     description:
@@ -16,10 +17,11 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
+
     return (
         <html lang="en">
             <body>
-                <TRPCReactProvider headers={headers()}>
+                <TRPCReactProvider  headers={headers()}>
                     <Layout>{children}</Layout>
                 </TRPCReactProvider>
             </body>
diff --git a/src/components/commentCard.tsx b/src/components/commentCard.tsx
deleted file mode 100644
index 2b458cc..0000000
--- a/src/components/commentCard.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import Image from 'next/image';
-import { type Comment } from '../interfaces/comments';
-import { formatRelativeTime } from '~/utils/miscUtils';
-import CommentEditModal from './commentEditModal';
-import { useSession } from 'next-auth/react';
-import CommentDeleteButton from './commentDeleteButton';
-
-interface CommentCardProps {
-    comment: Comment;
-}
-
-// Create the CommentCard component
-const CommentCard: React.FC<CommentCardProps> = ({ comment }) => {
-    const commenterImage = comment.commenter?.image ?? '/images/user.png';
-    const createdAt = comment.createdAt.toISOString();
-    const displayTime = formatRelativeTime(createdAt);
-
-    const { data: sessionData } = useSession();
-    const isOwner = sessionData?.user?.id === comment.commenter?.id;
-    const isAdmin = sessionData?.user?.isAdmin;
-
-    return (
-        <div
-            key={comment.id}
-            className="mx-auto mb-4 w-full max-w-2xl rounded-lg bg-[#fffefe] p-6 shadow-lg"
-            role="article"
-        >
-            <div className="mb-4 flex items-center justify-between ">
-                <div className="flex items-center">
-                    <Image
-                        className="mr-3 h-8 w-8 rounded-full"
-                        src={commenterImage}
-                        alt={comment.commenter?.name ?? 'Commenter Image'}
-                        width={32}
-                        height={32}
-                    />
-                    <p className="font-bold">{comment.commenter?.name}</p>
-                </div>
-                {isOwner ? (
-                  <CommentEditModal comment={comment} />
-                  ): isAdmin ? (
-                    <CommentDeleteButton commentId={comment.id} />) : null }
-            </div>
-            <p className="text-gray-700">{comment.content}</p>
-            <p className="mt-2 text-sm text-gray-500">Created: {displayTime}</p>
-        </div>
-    );
-};
-
-export default CommentCard;
diff --git a/src/components/commentDeleteButton.tsx b/src/components/commentDeleteButton.tsx
deleted file mode 100644
index 592390b..0000000
--- a/src/components/commentDeleteButton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { api } from '~/utils/api';
-
-export default function CommentDeleteButton({
-    commentId,
-}: {
-    commentId: string;
-}) {
-    const utils = api.useContext();
-    const deleteComment = api.comments.deleteComment.useMutation({
-        onSuccess: async () => {
-            await utils.comments.invalidate();
-        },
-        onError: error => {
-            console.log('error deleting comment', error);
-        }
-    });
-
-    function handleDeleteComment(commentId: string) {
-        return deleteComment.mutate(
-            { commentId },
-            {
-                onSettled: () => {
-                    console.log('Comment deleted');
-                },
-            },
-        );
-    }
-    return (
-        <>
-            <button
-                className="items-center  rounded-md border border-transparent bg-none px-4 py-2 text-base font-medium text-white shadow-sm shadow-slate-400 hover:bg-red-200 focus:outline-none"
-                onClick={e => {
-                    e.preventDefault();
-                    handleDeleteComment(commentId);
-                }}
-            >
-                ❌
-            </button>
-        </>
-    );
-}
diff --git a/src/components/commentEditModal.tsx b/src/components/commentEditModal.tsx
deleted file mode 100644
index a9c118e..0000000
--- a/src/components/commentEditModal.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { api } from '~/utils/api';
-import CommentDeleteButton from './commentDeleteButton';
-import { useSession } from 'next-auth/react';
-import { type Comment } from '~/interfaces/comments';
-import { translateCases, type TranslateCase } from '~/interfaces/translate';
-
-export default function CommentEditModal({ comment }: { comment: Comment }) {
-    const commentId = comment?.id;
-    const initialContent = comment?.content;
-
-    const { data: sessionData } = useSession();
-    const user = sessionData?.user;
-
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [commentContent, setCommentContent] = useState<string>(
-        comment.content,
-    );
-    const [caseType, setCaseType] = useState<string>('none');
-    const [isTranslating, setIsTranslating] = useState(false);
-
-    const modalRef = useRef<HTMLDialogElement>(null);
-    const openModal = () => {
-        setIsModalOpen(true);
-    };
-
-    const closeModal = () => {
-        setIsModalOpen(false);
-    };
-
-    useEffect(() => {
-        // if (!commentContent) {
-        //     setCommentContent(comment?.content);
-        // }
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') {
-                closeModal();
-            }
-        };
-
-        // TODO this is not working yet
-        const handleOutsideClick = (e: MouseEvent) => {
-            if (
-                isModalOpen &&
-                modalRef.current &&
-                !modalRef.current.contains(e.target as Node)
-            ) {
-                closeModal();
-            }
-        };
-
-        window.addEventListener('keydown', handleKeyDown);
-        if (isModalOpen) {
-            document.addEventListener('click', handleOutsideClick);
-        }
-
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-            document.removeEventListener('click', handleOutsideClick);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const utils = api.useContext();
-    const translateMutation = api.translations.translateComment.useMutation({
-        async onSuccess(res) {
-            async function close() {
-                await new Promise(resolve => setTimeout(resolve, 2000));
-            }
-            await close();
-            const { comment } = res;
-            setCommentContent(comment.content);
-            await utils.comments.invalidate();
-            closeModal();
-        },
-        onError(error) {
-            console.log('error translating comment', error);
-        },
-        onSettled() {
-            console.log('settled');
-            setIsTranslating(false);
-        },
-    });
-
-    const updateMutation = api.comments.updateComment.useMutation({
-        async onSuccess() {
-            await utils.comments.invalidate();
-            closeModal();
-        },
-        onError(error) {
-            console.log('error updating comment', error);
-        },
-        onSettled() {
-            console.log('settled');
-            setIsTranslating(false);
-        },
-    });
-
-    function handleUpdate() {
-        setIsTranslating(true);
-        if (caseType === 'none') {
-            updateMutation.mutate({ commentId, content: commentContent });
-        } else {
-            translateMutation.mutate({
-                commentId,
-                caseType: caseType as TranslateCase,
-            });
-        }
-    }
-
-    return (
-        <>
-            {isModalOpen && (
-                <div className="fixed inset-0 z-50 flex w-full items-center  justify-center bg-opacity-50 backdrop-blur-sm backdrop-brightness-75  ">
-                    <dialog
-                        id="comment-edit-modal"
-                        open={isModalOpen}
-                        className={`h-fit w-5/6 rounded-lg bg-[#f7f7f7] p-6 md:h-1/2 md:w-1/2  `}
-                        ref={modalRef}
-                    >
-                        {isTranslating && (
-                            <div className="absolute inset-0 flex items-center justify-center">
-                                <p className="text-lg font-bold animate-pulse text-white bg-gray-700 p-4 rounded-md">
-                                    One moment while we translate...
-                                </p>
-                            </div>
-                        )}
-                        <div className="container flex h-full flex-col justify-between">
-                            <div>
-                                <form >
-                                    <div style={{display: 'none'}}>
-                                        <label htmlFor='name_confirm'>Please leave this field blank </label>
-                                        <input
-                                            type="text"
-                                            name="name__confirm"
-                                            id="name__confirm"
-                                        />
-                                    </div>
-                                    <label htmlFor="comment">Comment</label>
-                                    <textarea
-                                        name="comment"
-                                        id="comment"
-                                        cols={30}
-                                        rows={10}
-                                        value={commentContent}
-                                        disabled={
-                                            commentContent.length > 500 ||
-                                            isTranslating
-                                        }
-                                        onChange={e =>
-                                            setCommentContent(e.target.value)
-                                        }
-                                        className="w-full rounded-sm border-2 border-gray-300 p-2 "
-                                    ></textarea>
-                                </form>
-                            </div>
-                            <div className="flex flex-grow flex-col items-end justify-between md:flex-row ">
-                                <div className="relative flex h-fit flex-col  ">
-                                    <details className="absolute left-0 top-0 z-50 md:mt-[-1rem] mt-0 md:ml-0 ml-[-6rem] md:pb-3 pb-0">
-                                        <summary className="text-xs">
-                                            What is this?
-                                        </summary>
-                                        <p className="border-1 rounded-md bg-[#fefafa] p-3 text-xs shadow-md ">
-                                            Each user gets 5 free translation
-                                            tokens to transform your text using
-                                            OpenAI ChatGPT. You have{' '}
-                                            {user?.langToken} tokens left.
-                                        </p>
-                                    </details>
-                                    <select
-                                        className="block w-full px-4 py-2 pr-8 leading-tight bg-white border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring focus:border-blue-400"
-                                        value={caseType}
-                                        disabled={
-                                            user && user.isAdmin
-                                                ? false
-                                                : !(user && user.langToken > 0)
-                                        }
-                                        onChange={e =>
-                                            setCaseType(e.target.value)
-                                        }
-                                    >
-                                        {translateCases.map(c => (
-                                            <option
-                                                className="bg-grey-100"
-                                                key={c}
-                                                value={c}
-                                            >
-                                                {c}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </div>
-                                <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
-                                    <button
-                                        type="reset"
-                                        className='rounded-md border border-transparent bg-none px-4 py-2 text-base font-medium shadow-sm shadow-slate-400 hover:bg-slate-100 focus:outline-none'
-                                        onClick={e => {
-                                            e.preventDefault();
-                                            setCommentContent(initialContent);
-                                            }}
-                                    >Reset</button>
-                                    <button
-                                        className="rounded-md border border-transparent bg-none px-4 py-2 text-base font-medium shadow-sm shadow-slate-400 hover:bg-slate-100 focus:outline-none"
-                                        type="submit"
-                                        disabled={isTranslating}
-                                        onClick={() => {
-                                            handleUpdate();
-                                        }}
-                                    >
-                                        Update
-                                    </button>
-                                    <CommentDeleteButton
-                                        commentId={commentId}
-                                    />
-                                    <button
-                                        className="rounded-md border border-transparent bg-none px-4 py-2 text-base font-medium shadow-sm shadow-slate-400 hover:bg-yellow-100 focus:outline-none"
-                                        type="submit"
-                                        onClick={() => {
-                                            closeModal();
-                                        }}
-                                    >
-                                        Cancel
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </dialog>
-                </div>
-            )}
-            <p>
-                <button id="show-dialog" onClick={() => openModal()}>
-                    Edit
-                </button>
-            </p>
-        </>
-    );
-}
diff --git a/src/components/commentLayout.tsx b/src/components/commentLayout.tsx
deleted file mode 100644
index 65c43ae..0000000
--- a/src/components/commentLayout.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { signIn } from 'next-auth/react';
-import ReCAPTCHA from 'react-google-recaptcha';
-
-import { typedBoolean } from '~/utils/miscUtils';
-import CommentCard from './commentCard';
-import useController from '~/hooks/useController';
-
-const RECAPTCHA_SITE_KEY = process.env.GOOGLE_PUBLIC_RECAPTCHA_KEY;
-
-export function CommentLayout({ slug }: { slug: string }) {
-
-    const {
-        submitting,
-        setSubmitting,
-        setToken,
-        comment,
-        setComment,
-        allComments,
-        errors,
-        setGotime,
-        commentContainerRef,
-        userIsLoggedIn,
-    } = useController({ slug })
-
-    return (
-        <div>
-            <section aria-labelledby="comments-heading" className="pt-16">
-                <div className="w-full">
-                    <form
-                        className="flex flex-col items-center"
-                        aria-label="Leave a comment"
-                        onSubmit={e => {
-                            e.preventDefault();
-                            setSubmitting(true);
-                        }}
-                    >
-                        <h2 className="mb-4 text-center text-2xl font-bold">
-                            Have an opinion of what I said? Find a typo? Just
-                            want to be nice?
-                            <br /> Feel free to leave a comment!
-                        </h2>
-                        <label htmlFor="comment" className="sr-only">
-                            Comment
-                        </label>
-                        <div className="relative w-full ">
-                            <textarea
-                                id="comment"
-                                name="comment"
-                                rows={6}
-                                className="mt-1 block w-full rounded-md border-gray-400 bg-[#fffefe] px-3 py-2 text-gray-700 placeholder-gray-400 shadow-lg shadow-slate-400 focus:border-[#6b2b6f] focus:ring-[#6b2b6f] sm:text-sm"
-                                placeholder="Feel free to leave a comment."
-                                aria-label="Comment on blog post"
-                                tabIndex={1}
-                                value={comment}
-                                onChange={e => {
-                                    const commentLength = e.target.value.length;
-                                    if (commentLength <= 500) {
-                                        setComment(e.target.value);
-                                    }
-                                }}
-                            />
-                            {comment.length ? (
-                                <p className="absolute bottom-0 right-0 mb-2 mr-3 text-sm text-gray-500">
-                                    {comment.length} / 500
-                                </p>
-                            ) : null}
-                        </div>
-                        {submitting && (
-                            <>
-                                {!RECAPTCHA_SITE_KEY ? (
-                                    // render a fake recaptcha in dev mode
-                                    <div className="relative  ">
-                                        <button
-                                            type="submit"
-                                            className="absolute top-0 flex items-center space-x-2 rounded-md border border-gray-300 bg-white p-2 hover:bg-gray-100 focus:border-blue-300 focus:outline-none"
-                                            tabIndex={2}
-                                            aria-label="Submit comment button"
-                                            onClick={e => {
-                                                e.preventDefault();
-                                                setGotime(true);
-                                            }}
-                                        >
-                                            ✅
-                                        </button>
-                                    </div>
-                                ) : (
-                                    <ReCAPTCHA
-                                        sitekey={RECAPTCHA_SITE_KEY}
-                                        onChange={(tkn: string | null) => {
-                                            setToken(tkn);
-                                            setGotime(true);
-                                        }}
-                                    />
-                                )}
-                            </>
-                        )}
-                        <div className="block h-4 text-xl font-bold">
-                            {errors.length
-                                ? errors.map((error, i) => (
-                                      <p key={i} className="text-red-500">
-                                          {errors}
-                                      </p>
-                                  ))
-                                : null}
-                        </div>
-                        <div className="flex flex-col items-center">
-                            {userIsLoggedIn ? (
-                                <>
-                                    <button
-                                        type="submit"
-                                        className="mt-4 inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-md shadow-slate-400 hover:bg-indigo-700 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                                        tabIndex={2}
-                                        aria-label="Submit comment button"
-                                        disabled={comment.length < 1}
-                                    >
-                                        Submit
-                                    </button>
-                                </>
-                            ) : (
-                                <div className="flex flex-col ">
-                                    <div className="block h-4">
-                                        <p className="text-xl font-bold ">
-                                            You must be logged in to leave a
-                                            comment.
-                                        </p>
-                                    </div>
-                                    <button
-                                        className="mx-auto mt-4 inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm shadow-slate-400 hover:bg-indigo-700 focus:outline-none"
-                                        tabIndex={2}
-                                        aria-label="Sign in"
-                                        onClick={() => void signIn()}
-                                    >
-                                        Sign in
-                                    </button>
-                                </div>
-                            )}
-                        </div>
-                    </form>
-                </div>
-                <div className="mt-16 " ref={commentContainerRef}>
-                    <h2 id="comments-heading" className="sr-only">
-                        Comments
-                    </h2>
-                    {allComments?.length ? (
-                        allComments
-                            .filter(comment => typedBoolean(comment))
-                            .map(comment => (
-                                <div
-                                    className="relative flex flex-row items-center"
-                                    key={comment.id}
-                                >
-                                    <CommentCard
-                                        key={comment.id}
-                                        comment={comment}
-                                    />
-                                </div>
-                            ))
-                    ) : (
-                        <p className="text-center text-xl text-gray-500">
-                            Be the first to leave your thoughts!
-                        </p>
-                    )}
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/src/components/error.tsx b/src/components/error.tsx
new file mode 100644
index 0000000..0cca415
--- /dev/null
+++ b/src/components/error.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/hooks/useController.ts b/src/hooks/useController.ts
index 1403ebb..13806e8 100644
--- a/src/hooks/useController.ts
+++ b/src/hooks/useController.ts
@@ -1,67 +1,58 @@
-import { useSession } from "next-auth/react";
-import { type RefObject, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { type RefObject, useRef, useState, useEffect } from "react";
 import { type Comment } from "~/interfaces/comments";
 import { api } from "~/utils/api";
 
-export default function useController({ slug }: { slug: string}) {
-    const { data: commentsData } = api.comments.getCommentsForPost.useQuery({
-        slug,
-    });
-
+export default function useController({ slug }: {
+        slug: string,
+    }) {
+    const allComments = api.comments.getCommentsForPost.useQuery({ slug }).data || [];
+    const router = useRouter();
+    const user = api.user.getUserSession.useQuery().data;
+    const userIsLoggedIn = !!user;
+    const [postComments, setPostComments] = useState<Comment[]>(allComments);
     const [submitting, setSubmitting] = useState<boolean>(false);
     const [token, setToken] = useState<string | null>('');
     const [comment, setComment] = useState<string>('');
-    const [allComments, setAllComments] = useState<Comment[]>(
-        commentsData || [],
-    );
+
     const [errors, setErrors] = useState<string[]>([]);
     const [gotime, setGotime] = useState<boolean>(false);
 
-    const { data: sessionData } = useSession();
-
     const commentContainerRef: RefObject<HTMLDivElement> = useRef(null);
-    const userIsLoggedIn = !!sessionData;
 
-    const utils = api.useContext();
-
-    useEffect(() => {
-        if (commentsData) {
-            setAllComments(commentsData);
-        }
-    }, [commentsData]);
-    let newComment: Comment ;
+    let newComment: Comment
 
     const addComment = api.comments.createComment.useMutation({
         onMutate: () => {
+            setErrors([]);
             newComment = {
                 content: comment,
                 createdAt: new Date(),
                 id: '',
                 postSlug: slug,
                 commenter: {
-                    id: sessionData?.user?.id || 'default-id',
-                    name: sessionData?.user?.name || '',
-                    image: sessionData?.user?.image || '',
+                    id: user?.id || 'default-id',
+                    name: user?.name || '',
+                    image: user?.image || '',
                 },
             };
-            setAllComments(prevComments => [...prevComments, newComment]);
+
+            setPostComments(prevComments => [...prevComments, newComment]);
         },
-        onSuccess: async () => {
+        onSuccess:  () => {
             setComment('');
-            await utils.comments.getCommentsForPost.refetch({ slug });
             const lastComment = commentContainerRef.current
-                ?.lastElementChild as HTMLElement | null;
+            ?.lastElementChild as HTMLElement | null;
             if (lastComment) {
                 lastComment.scrollIntoView({ behavior: 'smooth' });
             }
+            router.refresh();
         },
         onError: error => {
-            console.error('Error adding comment:', error);
             setErrors(prevErrors => [...prevErrors, error.message]);
-            setAllComments(allComments.filter(c => c.id !== newComment.id));
+            setPostComments(postComments.filter(comment => comment.id !== newComment.id))
         },
         onSettled: () => {
-            console.log('onSettled', submitting);
             setSubmitting(false);
             setGotime(false);
         },
@@ -75,6 +66,7 @@ export default function useController({ slug }: { slug: string}) {
             postSlug: slug,
             token: token || '',
         });
+        router.refresh();
     };
 
     // First we wait for the recaptcha token to be set, only then will the boolean gotime to be true
@@ -87,19 +79,23 @@ export default function useController({ slug }: { slug: string}) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [gotime]);
 
+
+
     return {
-        addComment,
-        allComments,
-        comment,
         commentContainerRef,
+        postComments,
+        setPostComments,
+        submitting,
+        setSubmitting,
+        token,
+        setToken,
+        comment,
+        setComment,
         errors,
+        setErrors,
         gotime,
-        setComment,
         setGotime,
-        setToken,
-        setSubmitting,
-        submitting,
-        token,
+        user,
         userIsLoggedIn,
     };
-}
+}
\ No newline at end of file
diff --git a/src/interfaces/comments.ts b/src/interfaces/comments.ts
index 5f648ed..8880b95 100644
--- a/src/interfaces/comments.ts
+++ b/src/interfaces/comments.ts
@@ -10,4 +10,16 @@ export type Comment = {
     postSlug: string;
     commenter: Commenter;
     createdAt: Date;
-  };
\ No newline at end of file
+  };
+
+export type CommentSelect = {
+  id: string;
+  content: string;
+  postSlug: string;
+  commenter: {
+      id: string;
+      name: string;
+      image: string;
+  };
+  createdAt: Date;
+} | undefined;
\ No newline at end of file
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
deleted file mode 100644
index 526d485..0000000
--- a/src/pages/blog/[slug].tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import Link from 'next/link';
-import { type NonNullablePostOptions } from '~/interfaces/post';
-import { getPostBySlug, getPostSlugs } from 'lib/blogApi';
-import markdownToHtml from 'lib/markdownToHtml';
-import PostBody from '~/components/postBody';
-import readingTime, { type ReadTimeResults } from 'reading-time';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { type Comment } from '~/interfaces/comments';
-import { CommentLayout } from '~/components/commentLayout';
-
-type Props = {
-  post: NonNullablePostOptions;
-  stats: ReadTimeResults;
-  comments: Comment[];
-};
-
-export default function Post({ post, stats }: Props) {
-
-  const router = useRouter();
-  if (!post.slug) throw router.push('/404');
-
-  return (
-    <>
-      <Head>
-        <title>{post?.title}</title>
-        <meta
-          name="description"
-          content={post.excerpt || 'A Blog Post by Lucas Steinmacher'}
-        />
-        <link rel="icon" href="favicon.ico" />
-        <meta name="robots" content="index,follow" />
-      </Head>
-      <div className="py-16">
-        <details>
-          <summary>Post Data</summary>
-          <pre>{JSON.stringify({ ...post, id: undefined }, null, 2)}</pre>
-        </details>
-        {post.content ? (
-          <section aria-labelledby="post-heading">
-            <div className="container mx-auto min-h-full max-w-2xl px-5">
-              <h1
-                id="post-heading"
-                className="md:text-6 3xl mb-12 text-center text-3xl font-bold leading-tight tracking-tighter md:text-left md:leading-none lg:text-4xl"
-              >
-                {post.title}
-              </h1>
-              <p>{post.date?.split('T')[0]}</p>
-              <span>{stats.text}</span>
-              {typeof post.author === 'string' ? (
-                // When post.author is a string (name of the author)
-                <p>Written by: {post.author}</p>
-              ) : (
-                // When post.author is an Author object
-                <p>Written by: {post.author?.name}</p>
-              )}
-              <PostBody content={post.content} />
-              <Link href="/blog">Back to blogs →</Link>
-            </div>
-          </section>
-        ) : null}
-        <hr className="mt-16 h-[3px] bg-gradient-to-r from-[#d68501] to-[#6b2b6f]" />
-        <CommentLayout slug={post.slug} />
-      </div>
-    </>
-  );
-}
-
-type Params = {
-  params: {
-    slug: string;
-  };
-};
-
-export const getStaticProps = async ({ params }: Params) => {
-  const postData: NonNullablePostOptions = await getPostBySlug(params.slug, [
-    'title',
-    'date',
-    'slug',
-    'author',
-    'content',
-  ]);
-
-  const parsedContent = await markdownToHtml(postData.content || '');
-  const stats = readingTime(postData.content || '');
-  if (!postData.slug) throw new Error('No slug found for post');
-
-  return {
-    props: {
-      post: {
-        title: postData.title,
-        date: postData.date,
-        slug: postData.slug,
-        author: postData.author,
-        content: parsedContent,
-      },
-      stats,
-    },
-  };
-};
-
-export async function getStaticPaths() {
-  const slugs = await getPostSlugs();
-  const paths = slugs.map(slug => {
-    return {
-      params: {
-        slug: slug.replace(/\.md$/, ''), // Remove file extension for each post slug
-      },
-    };
-  });
-
-  return {
-    paths,
-    fallback: false,
-  };
-}
diff --git a/src/server/api/root.ts b/src/server/api/root.ts
index fc246bc..e0dc80d 100644
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@@ -1,6 +1,7 @@
 import { createTRPCRouter } from "~/server/api/trpc";
 import { commentsRouter } from "./routers/comments";
 import { translationRouter } from "./routers/translation";
+import { userRouter } from "./routers/user";
 
 /**
  * This is the primary router for your server.
@@ -10,6 +11,7 @@ import { translationRouter } from "./routers/translation";
 export const appRouter = createTRPCRouter({
   comments: commentsRouter,
   translations: translationRouter,
+  user: userRouter,
 });
 
 // export type definition of API
diff --git a/src/server/api/routers/comments.ts b/src/server/api/routers/comments.ts
index ff32890..54ae874 100644
--- a/src/server/api/routers/comments.ts
+++ b/src/server/api/routers/comments.ts
@@ -40,7 +40,17 @@ export const commentsRouter = createTRPCRouter({
             });
 
             trpcInvariant(comments, "NOT_FOUND", `No comments found for post ${slug}`);
-            return comments;
+
+            comments.sort((a, b) => {
+                if (a.createdAt > b.createdAt) {
+                    return 1;
+                }
+                if (a.createdAt < b.createdAt) {
+                    return -1;
+                }
+                return 0;
+            });
+            return comments ;
         }),
     getCommentData: publicProcedure
         .input(z.object({ commentId: z.string() }))
diff --git a/src/server/api/routers/user.ts b/src/server/api/routers/user.ts
index 7d777ba..3e7a6b6 100644
--- a/src/server/api/routers/user.ts
+++ b/src/server/api/routers/user.ts
@@ -1,24 +1,15 @@
-import { TRPCError } from "@trpc/server";
+
 import { createTRPCRouter, publicProcedure } from "../trpc";
-import { db as prisma } from "~/server/db";
-import { z } from "zod";
 
 export const userRouter = createTRPCRouter({
-    isUserLoggedIn: publicProcedure
-    .input(z.object({ userId: z.string() }))
-    .query(async ({ input }) => {
-        const { userId } = input;
-        const user = await prisma.user.findUnique({
-            where: {
-                id: userId,
-            },
-        });
-        if (!user) {
-            throw new TRPCError({
-                code: "NOT_FOUND",
-                message: `No user found for id ${userId}`,
-            });
+    getUserSession: publicProcedure
+    .query(({ctx}) => {
+        const { session } = ctx
+
+        if (!session) {
+            return null;
         }
-        return user;
+
+        return session.user;
     }),
 });
\ No newline at end of file
diff --git a/src/trpc/react.tsx b/src/trpc/react.tsx
index 6429613..0b420e7 100644
--- a/src/trpc/react.tsx
+++ b/src/trpc/react.tsx
@@ -1,47 +1,47 @@
-"use client";
+'use client';
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
-import { createTRPCReact } from "@trpc/react-query";
-import { useState } from "react";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { loggerLink, unstable_httpBatchStreamLink } from '@trpc/client';
+import { createTRPCReact } from '@trpc/react-query';
+import { useState } from 'react';
 
-import { type AppRouter } from "~/server/api/root";
-import { getUrl, transformer } from "./shared";
+import { type AppRouter } from '~/server/api/root';
+import { getUrl, transformer } from './shared';
 
 export const api = createTRPCReact<AppRouter>();
 
 export function TRPCReactProvider(props: {
-  children: React.ReactNode;
-  headers: Headers;
+    children: React.ReactNode;
+    headers: Headers;
 }) {
-  const [queryClient] = useState(() => new QueryClient());
+    const [queryClient] = useState(() => new QueryClient());
 
-  const [trpcClient] = useState(() =>
-    api.createClient({
-      transformer,
-      links: [
-        loggerLink({
-          enabled: (op) =>
-            process.env.NODE_ENV === "development" ||
-            (op.direction === "down" && op.result instanceof Error),
+    const [trpcClient] = useState(() =>
+        api.createClient({
+            transformer,
+            links: [
+                loggerLink({
+                    enabled: op =>
+                        process.env.NODE_ENV === 'development' ||
+                        (op.direction === 'down' && op.result instanceof Error),
+                }),
+                unstable_httpBatchStreamLink({
+                    url: getUrl(),
+                    headers() {
+                        const heads = new Map(props.headers);
+                        heads.set('x-trpc-source', 'react');
+                        return Object.fromEntries(heads);
+                    },
+                }),
+            ],
         }),
-        unstable_httpBatchStreamLink({
-          url: getUrl(),
-          headers() {
-            const heads = new Map(props.headers);
-            heads.set("x-trpc-source", "react");
-            return Object.fromEntries(heads);
-          },
-        }),
-      ],
-    })
-  );
+    );
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <api.Provider client={trpcClient} queryClient={queryClient}>
-        {props.children}
-      </api.Provider>
-    </QueryClientProvider>
-  );
+    return (
+            <QueryClientProvider client={queryClient}>
+                <api.Provider client={trpcClient} queryClient={queryClient}>
+                    {props.children}
+                </api.Provider>
+            </QueryClientProvider>
+    );
 }