diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx
index efb8e5c..a6fa7a3 100644
--- a/frontend/components/Footer.tsx
+++ b/frontend/components/Footer.tsx
@@ -2,7 +2,7 @@ import * as hi from "jsr:@preact-icons/hi2";
 
 export default function Footer() {
   return (
-    <footer class="bg-[#313244] text-[#cdd6f4] py-8">
+    <footer class="bg-[#313244] text-[#cdd6f4] py-8 mt-auto">
       <div class="container mx-auto px-4">
         {/* Grid layout that switches from 2 to 1 column on small screens */}
         <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
diff --git a/frontend/components/PostCard.tsx b/frontend/components/PostCard.tsx
index a38e1ae..7bda89e 100644
--- a/frontend/components/PostCard.tsx
+++ b/frontend/components/PostCard.tsx
@@ -3,22 +3,31 @@ import { truncateString } from "../lib/truncate.ts";
 import { Post } from "../types/index.ts";
 
 export const PostCard = function PostCard({ post }: { post: Post }) {
+  const handleCardClick = (e: MouseEvent) => {
+    // Don't navigate if clicking on the author link
+    if ((e.target as HTMLElement).closest("a")) {
+      return;
+    }
+    window.location.href = `${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`;
+  };
+
   return (
-    <div class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
-      <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
-        <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
-        <p class="text-white">
-          Written by{" "}
-          <a
-            class="text-white transition-all duration-300 ease-in-out hover:text-[#74c7ec] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
-            href={`${Deno.env.get("BASE_URI_WEB")}/authors/${post.author_id}`}
-          >
-            {post.first_name} {post.last_name}
-          </a>{" "}
-          at {convertUtc(post.created_at)}
-        </p>
-        <p class="text-gray-400">{truncateString(post.body, 15)}</p>
-      </a>
+    <div
+      class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105 cursor-pointer"
+      onClick={handleCardClick}
+    >
+      <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
+      <p class="text-white">
+        Written by{" "}
+        <a
+          class="text-white transition-all duration-300 ease-in-out hover:text-[#74c7ec] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
+          href={`${Deno.env.get("BASE_URI_WEB")}/authors/${post.author_id}`}
+        >
+          {post.first_name} {post.last_name}
+        </a>{" "}
+        at {convertUtc(post.created_at)}
+      </p>
+      <p class="text-gray-400">{truncateString(post.body, 15)}</p>
     </div>
   );
 };
diff --git a/frontend/components/PostHeader.tsx b/frontend/components/PostHeader.tsx
index 7c171f2..47bbb2b 100644
--- a/frontend/components/PostHeader.tsx
+++ b/frontend/components/PostHeader.tsx
@@ -8,7 +8,7 @@ export const PostHeader = function PostHeader({ post }: PostHeaderOpts) {
       <Head>
         <title>Wyatt J. Miller | {post.title}</title>
       </Head>
-      <div class="p-6 bg-[#313244]">
+      <div class="p-4 bg-[#313244]">
         <div class="min-w-screen flex flex-col items-center justify-between bg-[#45475a] rounded-lg shadow-md">
           <div class="sm:mt-14 sm:mb-14 mt-8 mb-8 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
             <div class="space-y-2 text-center md:text-left">
diff --git a/frontend/islands/ProjectCard.tsx b/frontend/islands/ProjectCard.tsx
index f5baa06..f0c205e 100644
--- a/frontend/islands/ProjectCard.tsx
+++ b/frontend/islands/ProjectCard.tsx
@@ -1,9 +1,9 @@
 export const ProjectCard = function ProjectCard(props: ProjectProps) {
   return (
     <div
-      class={`group space-y-1 rounded-md ${
+      class={`md:m-8 group space-y-1 rounded-md ${
         props.wip ? "border-2 border-dashed" : "cursor-pointer"
-      } bg-[#45475a] px-3 py-2 m-10 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`}
+      } bg-[#45475a] px-3 py-2 m-4 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`}
       onClick={() => props.repo && open(props.repo, "_blank")}
     >
       <div class="flex items-center justify-between">
diff --git a/frontend/routes/contact/index.tsx b/frontend/routes/contact/index.tsx
index 9ecf25d..a133019 100644
--- a/frontend/routes/contact/index.tsx
+++ b/frontend/routes/contact/index.tsx
@@ -26,7 +26,6 @@ export const handler: Handlers = {
       message: formData.get("message")?.toString(),
     };
 
-    // Validation logic
     const errors: FormState["errors"] = {};
 
     if (!state.name || state.name.trim() === "") {
@@ -44,7 +43,6 @@ export const handler: Handlers = {
       errors.message = "Message is required";
     }
 
-    // If there are errors, return the form with error messages
     if (Object.keys(errors).length > 0) {
       return ctx.render({
         ...state,
@@ -56,7 +54,6 @@ export const handler: Handlers = {
       method: "POST",
       body: formData,
     });
-    console.log(res);
 
     if (!res.ok || res.status !== 200) {
       return ctx.render({
@@ -77,11 +74,15 @@ export default function Contact({ data }: PageProps<FormState>) {
     <div class="bg-[#313244] min-h-screen">
       <div class="px-4 py-8 mx-auto p-6 flex flex-col bg-[#313244] min-h-screen w-full md:max-w-md">
         <Head>
-          <title>Contact</title>
+          <title>Wyatt J. Miller | Contact</title>
         </Head>
         <h1 class="text-3xl text-white font-bold uppercase text-center">
           Contact
         </h1>
+        <p class="md:text-lg sm:text-md text-white mt-5 mb-5">
+          Got a question? Here to yell at me? Send me something!
+        </p>
+        <br />
         {data?.submitted && (
           <div
             class="bg-[#a6e3a1] text-[#313244] px-4 py-3 rounded relative"
@@ -114,7 +115,7 @@ export default function Contact({ data }: PageProps<FormState>) {
               required
               placeholder="Your Name"
               value={data?.name || ""}
-              class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 
+              class={`w-full px-3 py-2 bg-[#ECECEE] border rounded-md focus:outline-transparent
               ${data?.errors?.name ? "border-[#f38ba8]" : "border-[#313244]"}`}
             />
             {data?.errors?.name && (
@@ -137,7 +138,7 @@ export default function Contact({ data }: PageProps<FormState>) {
               required
               placeholder="your@email.com"
               value={data?.email || ""}
-              class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 
+              class={`w-full px-3 py-2 bg-[#ECECEE] border rounded-md focus:outline-transparent 
               ${data?.errors?.email ? "border-[#f38ba8]" : "border-[#313244]"}`}
             />
             {data?.errors?.email && (
@@ -159,7 +160,7 @@ export default function Contact({ data }: PageProps<FormState>) {
               required
               placeholder="Write your message here..."
               rows={4}
-              class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 
+              class={`w-full px-3 py-2 bg-[#ECECEE] border rounded-md focus:outline-transparent 
               ${data?.errors?.message ? "border-red-500" : "border-gray-300"}`}
             >
               {data?.message || ""}
diff --git a/frontend/routes/index.tsx b/frontend/routes/index.tsx
index 230127a..51cdf2a 100644
--- a/frontend/routes/index.tsx
+++ b/frontend/routes/index.tsx
@@ -3,7 +3,7 @@ import { PhotoCircle } from "../components/PhotoCircle.tsx";
 export default function Home() {
   return (
     <body>
-      <div class="min-w-screen flex flex-col items-center justify-between bg-[#313244] sm:min-h-screen">
+      <div class="flex flex-col items-center justify-between bg-[#313244] min-h-screen">
         <div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
           <PhotoCircle
             src="https://wyattjmiller.us-ord-1.linodeobjects.com/IMG_1480-min.png"
diff --git a/frontend/routes/projects/index.tsx b/frontend/routes/projects/index.tsx
index 89ae701..507effb 100644
--- a/frontend/routes/projects/index.tsx
+++ b/frontend/routes/projects/index.tsx
@@ -31,11 +31,17 @@ export default function Projects({ data }: PageProps<ProjectData>) {
     <div class="space-y-12 px-10 py-8 sm:min-h-screen bg-[#313244]">
       <section
         id="projects"
-        class="lg:grid-cols-desktop grid scroll-mt-16 grid-cols-1 gap-x-10 gap-y-4 bg-[#313244] "
+        class="lg:grid-cols-desktop grid scroll-mt-8 grid-cols-1 gap-x-4 gap-y-2 bg-[#313244] "
       >
         <h1 class="text-3xl text-white font-bold uppercase text-center">
           Projects
         </h1>
+        <p class="md:text-lg sm:text-md text-white">
+          Here's a collection of software and electronics projects I've been
+          tinkering with during my free time - some are ongoing adventures,
+          others are finished experiments, but they've all been exciting
+          challenges that keep me busy when I'm not doing the "real work" stuff!
+        </p>
         <div class="grid grid-cols-1 sm:grid-cols-2">
           {projects.map((project: any) => {
             return (
