diff --git a/.cursorrules b/.cursorrules
index 42f6ee4..ca57249 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -1,2 +1,3 @@
 * Use Remix V2 syntax
 * Use TSDoc specification for docstrings
+* Use TailwindCSS for styling
diff --git a/.tool-versions b/.tool-versions
index 0e81cf1..a945d85 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -3,5 +3,5 @@ pre-commit 3.7.0
 nodejs 21.7.3
 pnpm 9.9.0
 yarn 1.22.22
-supabase-cli 2.1.1
+supabase-cli 2.2.1
 terraform 1.5.4
diff --git a/app/components/molecules/TagSearchBar.tsx b/app/components/molecules/TagSearchBar.tsx
index f116ea0..54fa239 100644
--- a/app/components/molecules/TagSearchBar.tsx
+++ b/app/components/molecules/TagSearchBar.tsx
@@ -92,7 +92,7 @@ const TagItem = ({ name, onClick, checked, isFocused }: TagItemProps) => {
   );
 };
 
-interface TagOption {
+export interface TagOption {
   name: string;
   selected: boolean;
 }
@@ -220,7 +220,7 @@ export const TagSearchBar = ({
 
   return (
     <div
-      className="font-gill-sans relative mx-auto mt-4 w-full max-w-xs font-light"
+      className="font-gill-sans relative mx-auto mb-4 mt-4 w-full max-w-xs font-light"
       ref={TagSearchBarRef}
       onKeyDown={handleKeyDown}
       role="combobox"
diff --git a/app/components/organisms/Carousel.tsx b/app/components/organisms/Carousel.tsx
index bd97a13..7064afe 100644
--- a/app/components/organisms/Carousel.tsx
+++ b/app/components/organisms/Carousel.tsx
@@ -10,7 +10,7 @@ import { Tables } from "~/integrations/supabase/database.types";
  */
 export const Carousel = ({ posts }: { posts: Tables<"posts">[] }) => {
   return (
-    <div className="mb-2 mt-2">
+    <div>
       {posts.length > 0 ? (
         <div className="carousel carousel-vertical h-full w-full">
           {posts.map((post) => (
@@ -25,10 +25,10 @@ export const Carousel = ({ posts }: { posts: Tables<"posts">[] }) => {
                     {post.title}
                   </h2>
                   <p className="font-gill-sans mb-1 text-sm">
-                    Created at{" "}
+                    Published on{" "}
                     {new Date(post.created_at).toLocaleDateString("en-US", {
                       year: "numeric",
-                      month: "numeric",
+                      month: "long",
                       day: "numeric",
                     })}
                   </p>
diff --git a/app/components/organisms/Pagination.tsx b/app/components/organisms/Pagination.tsx
index c86492f..cdc37eb 100644
--- a/app/components/organisms/Pagination.tsx
+++ b/app/components/organisms/Pagination.tsx
@@ -24,7 +24,7 @@ export const Pagination = ({
   const endPage = Math.min(startPage + MAX_PAGES_PER_PAGE, pagesInTotal);
 
   return (
-    <div className="font-gill-sans join mt-auto flex justify-center space-x-0">
+    <div className="font-gill-sans join mt-4 flex justify-center space-x-0">
       <button
         className="btn join-item btn-sm"
         onClick={() => onPageChange(currentPage - 1)}
diff --git a/app/root.tsx b/app/root.tsx
index 89f1b99..e7159c2 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -132,6 +132,9 @@ export default function App() {
   return (
     <html lang="en">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="author" content="Gleb Khaykin" />
         <Meta />
         <Links />
       </head>
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 2c55517..049788d 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -12,15 +12,6 @@ import { Header } from "~/components/organisms/Header";
  */
 export const meta: MetaFunction = () => {
   return [
-    { charset: "utf-8" },
-    {
-      name: "viewport",
-      content: "width=device-width, initial-scale=1",
-    },
-    {
-      name: "author",
-      content: "Gleb Khaykin",
-    },
     {
       property: "og:title",
       content: "About",
diff --git a/app/routes/blog.$slug.tsx b/app/routes/blog.$slug.tsx
index 6b5b0bc..fdaa46e 100644
--- a/app/routes/blog.$slug.tsx
+++ b/app/routes/blog.$slug.tsx
@@ -5,7 +5,12 @@ import {
   LoaderFunctionArgs,
   MetaFunction,
 } from "@remix-run/node";
-import { Await, useLoaderData } from "@remix-run/react";
+import {
+  Await,
+  ClientLoaderFunction,
+  ClientLoaderFunctionArgs,
+  useLoaderData,
+} from "@remix-run/react";
 import { createClient } from "@supabase/supabase-js";
 import { NotionAPI } from "notion-client";
 import React, { Suspense } from "react";
@@ -19,7 +24,6 @@ import {
 import { ExtendedRecordMap } from "vendor/react-notion-x/packages/notion-types/src/maps";
 import { NotionRenderer } from "vendor/react-notion-x/packages/react-notion-x";
 
-import { LoadingSpinner } from "~/components/atoms/LoadingSpinner";
 import { Footer } from "~/components/organisms/Footer";
 import { Header } from "~/components/organisms/Header";
 import { Tables } from "~/integrations/supabase/database.types";
@@ -104,30 +108,74 @@ const NotionPage = ({ recordMap }: { recordMap: ExtendedRecordMap }) => {
 export const loader: LoaderFunction = async ({
   params,
 }: LoaderFunctionArgs) => {
-  const slug = params.slug;
-  if (!slug) {
-    throw new Response("Slug is required", { status: 400 });
-  }
-
   const supabase = createClient(
     process.env.SUPABASE_URL!,
     process.env.SUPABASE_SERVICE_ROLE_KEY!,
   );
-  const { data: post, error } = await supabase
+  const { data, error } = await supabase
     .from("posts")
     .select("*")
-    .eq("slug", slug)
+    .eq("slug", params.slug)
     .returns<Tables<"posts">[]>()
     .single();
 
-  if (error) {
-    throw new Response("Post not found", { status: 404 });
-  }
+  if (error) throw new Response("Failed to load post", { status: 500 });
+  if (!data) throw new Response("Post not found", { status: 404 });
 
   const notion = new NotionAPI();
-  const recordMapPromise = notion.getPage(post.notion_page_id);
-  return defer({ post, recordMap: recordMapPromise });
+  const recordMapPromise = notion.getPage(data.notion_page_id);
+
+  return defer({ post: data, recordMap: recordMapPromise });
+};
+
+const CACHE_DURATION = 24 * 60 * 60 * 1000; // 1 day in milliseconds
+
+export const clientLoader: ClientLoaderFunction = async ({
+  params,
+  serverLoader,
+}: ClientLoaderFunctionArgs) => {
+  const cachedData = sessionStorage.getItem(`blogPosts-${params.slug}`);
+  const cachedTimestamp = sessionStorage.getItem(
+    `blogPostsTimestamp-${params.slug}`,
+  );
+
+  // Use cached data if it's valid
+  if (cachedData && cachedTimestamp) {
+    const isExpired = Date.now() - Number(cachedTimestamp) > CACHE_DURATION;
+    const parsedData = JSON.parse(cachedData);
+    if (!isExpired && parsedData.post && parsedData.recordMap) {
+      return {
+        post: parsedData.post,
+        recordMap: Promise.resolve(parsedData.recordMap),
+      };
+    }
+  }
+
+  // Get fresh data from server
+  const serverData = (await serverLoader()) as {
+    post: Tables<"posts">;
+    recordMap: Promise<ExtendedRecordMap>;
+  };
+
+  // Cache the data
+  Promise.resolve(serverData.recordMap).then((recordMap) => {
+    sessionStorage.setItem(
+      `blogPosts-${params.slug}`,
+      JSON.stringify({
+        post: serverData.post,
+        recordMap,
+      }),
+    );
+    sessionStorage.setItem(
+      `blogPostsTimestamp-${params.slug}`,
+      Date.now().toString(),
+    );
+  });
+
+  return serverData;
 };
+// Tell Remix to use the client loader during hydration
+clientLoader.hydrate = true;
 
 export const handle: SEOHandle = {
   /**
@@ -159,54 +207,52 @@ export const handle: SEOHandle = {
  * @param post - The post object
  * @returns The meta tags
  */
-// @ts-expect-error: Expect not assignable type (otherwise, it would be a server timeout)
-export const meta: MetaFunction = ({
-  data,
-}: {
-  data: { post: Tables<"posts"> };
-}) => {
-  const { post } = data;
-
-  const dateStr = new Date(post.created_at).toLocaleDateString("en-US", {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  if (!data) {
+    return [
+      { title: "Blog Post Not Found" },
+      { description: "The requested blog post could not be found." },
+    ];
+  }
+
+  const createdDate = new Date(data.post.created_at);
+  const formattedDate = createdDate.toLocaleDateString("en-US", {
     year: "numeric",
-    month: "numeric",
+    month: "long",
     day: "numeric",
   });
-  const description = `Created at ${dateStr}`;
 
   return [
-    { charset: "utf-8" },
-    {
-      name: "author",
-      content: "Gleb Khaykin",
-    },
-    {
-      name: "viewport",
-      content: "width=device-width, initial-scale=1",
-    },
-    {
-      property: "og:image",
-      content: post.image_url || "/img/van_gogh_wheatfield_with_crows.webp",
-    },
+    { title: data.post.title },
+    { description: `Published on ${formattedDate}` },
     {
       property: "og:title",
-      content: post.title,
+      content: data.post.title,
     },
     {
       property: "og:description",
-      content: description,
+      content: `Published on ${formattedDate}`,
     },
     {
       property: "og:type",
       content: "article",
     },
+    {
+      property: "og:url",
+      content: `https://khaykingleb.com/blog/${data.post.slug}`,
+    },
+    {
+      property: "og:image",
+      content:
+        data.post.image_url || "/img/van_gogh_wheatfield_with_crows.webp",
+    },
     {
       property: "article:published_time",
-      content: post.created_at,
+      content: data.post.created_at,
     },
     {
-      property: "og:url",
-      content: `https://khaykingleb.com/blog/${post.slug}`,
+      property: "article:tag",
+      content: Array.isArray(data.post.tags) ? data.post.tags.join(", ") : "",
     },
   ];
 };
@@ -222,9 +268,13 @@ export default function BlogPostRoute() {
   return (
     <div className="flex min-h-screen flex-col">
       <Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.webp" />
-      <main className="flex-grow px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto flex max-w-[750px] flex-col">
-          <Suspense fallback={<LoadingSpinner />}>
+      <main className="flex flex-grow px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto flex w-full max-w-[750px] flex-col">
+          <Suspense
+            fallback={
+              <div className="mb-2 mt-4 w-full flex-grow animate-pulse rounded-lg bg-gray-200" />
+            }
+          >
             <Await resolve={recordMap}>
               {(resolvedRecordMap: ExtendedRecordMap) => {
                 return <NotionPage recordMap={resolvedRecordMap} />;
diff --git a/app/routes/blog._index.tsx b/app/routes/blog._index.tsx
index 108b466..dc4fa41 100644
--- a/app/routes/blog._index.tsx
+++ b/app/routes/blog._index.tsx
@@ -1,10 +1,20 @@
 import { SEOHandle } from "@nasa-gcn/remix-seo";
-import { json, MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { defer, MetaFunction } from "@remix-run/node";
+import {
+  Await,
+  ClientLoaderFunctionArgs,
+  useLoaderData,
+} from "@remix-run/react";
 import { createClient } from "@supabase/supabase-js";
-import { useCallback, useEffect, useMemo, useState } from "react";
-
-import { TagSearchBar } from "~/components/molecules/TagSearchBar";
+import React, {
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+import { TagOption, TagSearchBar } from "~/components/molecules/TagSearchBar";
 import { Carousel } from "~/components/organisms/Carousel";
 import { Footer } from "~/components/organisms/Footer";
 import { Header } from "~/components/organisms/Header";
@@ -29,22 +39,9 @@ export const handle: SEOHandle = {
  */
 export const meta: MetaFunction = () => {
   return [
-    { charset: "utf-8" },
-    {
-      name: "viewport",
-      content: "width=device-width, initial-scale=1",
-    },
-    {
-      name: "author",
-      content: "Gleb Khaykin",
-    },
-    {
-      property: "og:title",
-      content: "Blog",
-    },
     {
       property: "og:description",
-      content: "Gleb Khaykin's personal website",
+      content: "Blog posts by Gleb Khaykin",
     },
     {
       property: "og:type",
@@ -67,75 +64,93 @@ export const loader = async () => {
     process.env.SUPABASE_SERVICE_ROLE_KEY!,
   );
 
-  const { data, error } = await supabase
+  const postsPromise = supabase
     .from("posts")
     .select("*")
-    .returns<Tables<"posts">[]>();
+    .returns<Tables<"posts">[]>()
+    .then(({ data, error }) => {
+      if (error) throw new Response("Failed to load posts", { status: 500 });
+      return data;
+    });
+
+  return defer({
+    posts: postsPromise as Promise<Tables<"posts">[]>,
+  });
+};
 
-  if (error) {
-    throw new Response("Failed to load posts", { status: 500 });
+const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in milliseconds
+
+export const clientLoader = async ({
+  serverLoader,
+}: ClientLoaderFunctionArgs) => {
+  const cachedData = sessionStorage.getItem("blogPosts");
+  const cachedTimestamp = sessionStorage.getItem("blogPostsTimestamp");
+
+  // Use cached data if it's valid
+  if (cachedData && cachedTimestamp) {
+    const isExpired = Date.now() - Number(cachedTimestamp) > CACHE_DURATION;
+    const parsedData = JSON.parse(cachedData);
+    if (!isExpired && parsedData.posts?.length > 0) {
+      return { posts: Promise.resolve(parsedData.posts) };
+    }
   }
 
-  return json({ posts: data });
+  // Get fresh data from server and cache it
+  const serverData = (await serverLoader()) as {
+    posts: Promise<Tables<"posts">[]>;
+  };
+  serverData.posts.then((posts) => {
+    sessionStorage.setItem("blogPosts", JSON.stringify({ posts }));
+    sessionStorage.setItem("blogPostsTimestamp", Date.now().toString());
+  });
+
+  return serverData;
 };
+// Tell Remix to use the client loader during hydration
+clientLoader.hydrate = true;
 
-// TODO: have conflict with Pagination component
 const MAX_POSTS_PER_PAGE_DESKTOP = 4;
 const MAX_POSTS_PER_PAGE_MOBILE = 3;
 
-/**
- * The main component for the route
- *
- * @returns The route layout
- */
-export default function BlogRoute() {
-  const [postsPerPage, setPostsPerPage] = useState(MAX_POSTS_PER_PAGE_DESKTOP);
-  const [currentPage, setCurrentPage] = useState(0);
-
-  const { posts } = useLoaderData<typeof loader>();
+const PostsContent = ({ posts }: { posts: Tables<"posts">[] }) => {
   const [tagOptions, setTagOptions] = useState(
     Array.from(new Set(posts.flatMap((post) => post.tags)))
       .sort()
       .map((tag) => ({ name: tag, selected: false })),
   );
-
   const selectedTags = useMemo(
     () =>
       tagOptions
-        .filter((option) => option.selected)
-        .map((option) => option.name),
+        .filter((option: TagOption) => option.selected)
+        .map((option: TagOption) => option.name),
     [tagOptions],
   );
-  useEffect(() => {
-    setCurrentPage(0);
-  }, [selectedTags]);
-
   const filteredPosts = useMemo(
     () =>
       posts.filter((post) =>
-        selectedTags.every((tag) => post.tags.includes(tag)),
+        selectedTags.every((tag: string) => post.tags.includes(tag)),
       ),
     [selectedTags, posts],
   );
 
-  useEffect(() => {
-    const updatePostsPerPage = () => {
-      if (window.matchMedia("(min-height: 800px)").matches) {
-        setPostsPerPage(MAX_POSTS_PER_PAGE_DESKTOP);
-      } else {
-        setPostsPerPage(MAX_POSTS_PER_PAGE_MOBILE);
-      }
-    };
+  const [postsPerPage, setPostsPerPage] = useState(MAX_POSTS_PER_PAGE_DESKTOP);
+  const updatePostsPerPage = useCallback(() => {
+    if (window.matchMedia("(min-height: 800px)").matches) {
+      setPostsPerPage(MAX_POSTS_PER_PAGE_DESKTOP);
+    } else {
+      setPostsPerPage(MAX_POSTS_PER_PAGE_MOBILE);
+    }
+  }, []);
 
+  useEffect(() => {
     updatePostsPerPage();
     window.addEventListener("resize", updatePostsPerPage);
-
     return () => window.removeEventListener("resize", updatePostsPerPage);
-  }, []);
-
-  const pagesInTotal = Math.ceil(filteredPosts.length / postsPerPage);
+  }, [updatePostsPerPage]);
 
-  const handlePageChange = useCallback(
+  const [currentPage, setCurrentPage] = useState(0);
+  const pagesInTotal = Math.ceil(posts.length / postsPerPage);
+  const updateCurrentPage = useCallback(
     (pageIndex: number) => {
       if (pageIndex >= 0 && pageIndex < pagesInTotal) {
         setCurrentPage(pageIndex);
@@ -144,27 +159,60 @@ export default function BlogRoute() {
     [pagesInTotal],
   );
 
+  return (
+    <div className="flex flex-grow flex-col">
+      <TagSearchBar tagOptions={tagOptions} setTagOptions={setTagOptions} />
+      <div className="flex-grow">
+        <Carousel
+          posts={filteredPosts.slice(
+            currentPage * postsPerPage,
+            (currentPage + 1) * postsPerPage,
+          )}
+        />
+      </div>
+      <div className="flex justify-center">
+        <Pagination
+          currentPage={currentPage}
+          pagesInTotal={pagesInTotal}
+          onPageChange={updateCurrentPage}
+        />
+      </div>
+    </div>
+  );
+};
+
+const LoadingState = () => (
+  <div className="flex flex-grow flex-col">
+    <TagSearchBar tagOptions={[]} setTagOptions={() => {}} />
+    <div className="flex flex-grow">
+      <div className="flex-grow animate-pulse rounded bg-gray-200"></div>
+    </div>
+    <div className="flex justify-center">
+      <Pagination currentPage={0} pagesInTotal={1} onPageChange={() => {}} />
+    </div>
+  </div>
+);
+
+/**
+ * The main component for the route
+ *
+ * @returns The route layout
+ */
+export default function BlogRoute() {
+  const { posts } = useLoaderData<typeof loader>();
+
   return (
     <div className="flex min-h-screen flex-col">
       <Header backgroundImageUrl="/img/van_gogh_wheatfield_with_crows.webp" />
       <main className="flex flex-grow flex-col px-4 sm:px-6 lg:px-8">
         <div className="mx-auto flex w-full max-w-[750px] flex-grow flex-col">
-          <TagSearchBar tagOptions={tagOptions} setTagOptions={setTagOptions} />
-          <div className="flex-grow">
-            <Carousel
-              posts={filteredPosts.slice(
-                currentPage * postsPerPage,
-                (currentPage + 1) * postsPerPage,
+          <Suspense fallback={<LoadingState />}>
+            <Await resolve={posts}>
+              {(resolvedPosts: Tables<"posts">[]) => (
+                <PostsContent posts={resolvedPosts} />
               )}
-            />
-          </div>
-          <div className="flex justify-center">
-            <Pagination
-              currentPage={currentPage}
-              pagesInTotal={pagesInTotal}
-              onPageChange={handlePageChange}
-            />
-          </div>
+            </Await>
+          </Suspense>
         </div>
       </main>
       <Footer />
