diff --git a/src/app/(app)/pointsguide/page.tsx b/src/app/(app)/pointsguide/page.tsx
index 16929b1..c4fa5ad 100644
--- a/src/app/(app)/pointsguide/page.tsx
+++ b/src/app/(app)/pointsguide/page.tsx
@@ -70,7 +70,7 @@ export default function PointsGuidePage() {
 			<div className="bg-surface-700 rounded-xl px-4 py-4 my-6 shadow-sm">
 				<div className="overflow-x-auto rounded-xl">
 					<table className="min-w-full text-sm text-left text-[color:var(--color-warning-200)]">
-						<caption className="caption-top p-4 text-lg font-semibold text-[color:var(--color-warning-200)]">
+						<caption className="caption-top p-4 text-xl font-semibold text-[color:var(--color-warning-200)]">
 							Beverage Scoring System
 						</caption>
 
diff --git a/src/lib/components/NavBar.tsx b/src/lib/components/NavBar.tsx
index 4ab4278..19a2705 100644
--- a/src/lib/components/NavBar.tsx
+++ b/src/lib/components/NavBar.tsx
@@ -2,13 +2,25 @@
 
 import React from "react";
 
+import Image from "next/image";
+
 const NavBar = () => {
 	return (
 		<nav className="sticky top-0 z-50 shadow-xl text-black dark:text-white bg-surface-800">
 			<div className="container mx-auto px-4">
 				<div className="grid grid-cols-[auto_1fr_auto] items-center gap-4 p-4">
 					<h1 className="text-xl font-semibold">
-						<a href="/">Drink Happy</a>
+						<a href="/" className="flex items-center gap-2">
+							<Image
+								src="/cappylogosmall.png"
+								alt="Drink Happy Logo"
+								width={60}
+								height={60}
+								className="mr-2"
+							/>
+
+							<span>Drink Happy</span>
+						</a>
 					</h1>
 					<div className="hidden md:flex items-center gap-4 justify-center">
 						<a href="/info" className="btn variant-ghost">