diff --git a/app/(www)/page.tsx b/app/(www)/page.tsx
index 5f178f9..fc4ed0c 100644
--- a/app/(www)/page.tsx
+++ b/app/(www)/page.tsx
@@ -19,7 +19,7 @@ export default async function IndexPage() {
     <>
       <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
         <div className="flex max-w-3xl flex-col gap-4">
-          <h1 className="font-heading font-bold text-3xl sm:text-5xl md:text-6xl">
+          <h1 className="font-heading font-black text-4xl md:text-5xl lg:text-[5rem]">
             Hi, I&apos;m Olabode 👋🏽
           </h1>
           <p className="leading-normal text-muted-foreground sm:text-xl sm:leading-8">
@@ -44,10 +44,10 @@ export default async function IndexPage() {
       <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32" id="about">
         <div className="flex flex-col lg:flex-row gap-6">
           <div className="lg:w-2/5 lg:flex-none">
-            <h2 className="font-heading font-bold tracking-tight text-4xl sm:text-5xl md:text-[4.8rem]">
+            <h2 className="font-heading font-black tracking-tight text-4xl md:text-5xl lg:text-[5rem]">
               <Image 
                 src="/babblebey.png" 
-                className="h-10 w-10 md:h-20 md:w-20 border-2 rounded-full inline-block mr-2 md:mr-4 -mt-1 md:-mt-6" 
+                className="h-10 w-10 md:h-14 md:w-14 lg:h-20 lg:w-20 border-2 rounded-full inline-block mr-2 md:mr-4 -mt-1 md:-mt-3 lg:-mt-6" 
                 alt="Olabode" 
                 width={100}
                 height={100}  
@@ -79,7 +79,7 @@ export default async function IndexPage() {
 
       <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32" id="tools">
         <div className="flex max-w-5xl flex-col gap-6">
-          <h2 className="font-heading font-bold tracking-tight text-4xl sm:text-5xl md:text-[4.8rem]">
+          <h2 className="font-heading font-black tracking-tight text-4xl md:text-5xl lg:text-[5rem]">
             Tools & Libraries
           </h2>
           <p className="leading-normal text-muted-foreground sm:text-xl sm:leading-8">
@@ -100,13 +100,13 @@ export default async function IndexPage() {
       
       <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32" id="projects">
         <div className="flex max-w-5xl flex-col gap-6">
-          <h2 className="font-heading font-bold tracking-tight text-4xl sm:text-5xl md:text-[4.8rem]">
+          <h2 className="font-heading font-black tracking-tight text-4xl md:text-5xl lg:text-[5rem]">
             Projects
           </h2> 
           <p className="leading-normal text-muted-foreground sm:text-xl sm:leading-8">
             I like to engineer solutions that make a difference. Whether it&apos;s crafting problem-solving applications for businesses, creating tools that streamline my workflow or just hacking around with some ideas, innovation drives me. Here&apos;s a curated project collection, ranging from empowering business solutions to personal hacks that have either aided my learning or transformed my productivity:
           </p>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="flex flex-wrap justify-between">
             {projects.map((p, i) => (
               <ProjectCard key={i} {...p} />
             ))}
diff --git a/app/layout.tsx b/app/layout.tsx
index f4a50c7..ea987b0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,19 @@
 import "@/styles/globals.css";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Inter, Bricolage_Grotesque } from "next/font/google";
 import { siteConfig } from "@/config/site";
 import { ThemeProvider } from "@/components/theme-provider";
+import { cn } from "@/lib/utils";
 
-const inter = Inter({ subsets: ['latin'] });
+const fontSans = Inter({ 
+  subsets: ['latin'],
+  variable: "--font-sans"
+});
+
+const fontHeading = Bricolage_Grotesque({
+  subsets: ['latin'],
+  variable: "--font-heading"
+});
 
 export const metadata: Metadata = {
   title: {
@@ -59,7 +68,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={cn("font-sans", fontSans.variable, fontHeading.variable)}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           {children}
         </ThemeProvider>
diff --git a/components/project-card.tsx b/components/project-card.tsx
index ce87f85..bba57c7 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -27,7 +27,7 @@ interface ProjectCardProps {
 
 export function ProjectCard({ title, desc, image, category, url, linkText }: ProjectCardProps) {
   return (
-    <Card className="flex flex-col overflow-hidden">
+    <Card className="basis-full md:basis-[49%] lg:basis-[32.33%] mb-4 flex flex-col overflow-hidden">
       <div className="aspect-[1.4] overflow-hidden min-h-[230px]">
         <CardImage 
           src={image}
diff --git a/package.json b/package.json
index b7387f9..d213f9b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babblebey.dev",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0377ea1..1ea876c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,5 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
@@ -56,6 +58,10 @@ module.exports = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        heading: ["var(--font-heading)", ...fontFamily.sans],
+      },
       keyframes: {
         "accordion-down": {
           from: { height: 0 },