diff --git a/docs/changelog.md b/docs/changelog.md
new file mode 100644
index 0000000..4c728c2
--- /dev/null
+++ b/docs/changelog.md
@@ -0,0 +1,47 @@
+# Changelog
+
+All notable changes to Kal will be documented in this file.
+
+---
+
+## [1.0.2] - 2026-04-07
+
+### Added
+
+- Per-minute usage progress bar in the Rate Limits documentation tab — see your real-time minute-level usage alongside daily limits
+- Numbered page navigation on the Food Database — quickly jump to any page instead of clicking through one at a time
+- Live reset countdown timers on dashboard usage cards — see exactly when your daily, monthly, and per-minute limits reset
+
+### Fixed
+
+- Corrected example Food IDs in the Setup page API quick reference to match actual records
+
+---
+
+## [1.0.1] - 2026-04-06
+
+### Fixed
+
+- Rate limit usage stats now only count successful requests — previously, rate-limited (429) responses were still counted against your usage, which made your dashboard stats appear higher than actual usage
+- Improved error tracking in request logs with clearer error messages for failed requests
+
+---
+
+## [1.0.0] - 2026-03-17
+
+### Added
+
+- API v1 with versioned endpoints (`/api/v1/*`)
+- Food database with comprehensive nutritional data
+- API key management dashboard
+- Request logging and analytics
+- Setup wizard with code examples
+- Feedback and bug reporting system
+- Collapsible sidebar with mobile-responsive drawer
+
+### Changed
+
+- Migrated all API endpoints to versioned paths
+- Improved dashboard performance and loading states
+
+---
diff --git a/packages/kal-backend/src/routers/api-keys.ts b/packages/kal-backend/src/routers/api-keys.ts
index fca0a58..56c33c0 100644
--- a/packages/kal-backend/src/routers/api-keys.ts
+++ b/packages/kal-backend/src/routers/api-keys.ts
@@ -200,11 +200,63 @@ export const apiKeysRouter = router({
       isRevoked: false,
     });
 
+    // Minute usage — only valid if minuteWindow is within the current minute
+    const now = new Date();
+    const currentMinuteStart = new Date(now);
+    currentMinuteStart.setSeconds(0, 0);
+
+    const minuteWindowIsStale =
+      !usage?.minuteWindow ||
+      new Date(usage.minuteWindow).getTime() < currentMinuteStart.getTime();
+
+    const minuteUsed = minuteWindowIsStale ? 0 : usage?.minuteCount || 0;
+
     return {
       tier: user?.tier || "free",
       dailyUsed: usage?.dailyCount || 0,
       monthlyUsed,
       activeKeyCount,
+      minuteUsed,
+    };
+  }),
+
+  /**
+   * Get key-specific stats: active, revoked, and expired counts
+   */
+  getKeyStats: protectedProcedure.query(async ({ ctx }) => {
+    const now = new Date();
+    const keysCollection = ctx.db.collection<ApiKey>("api_keys");
+
+    const [activeCount, revokedCount, expiredCount, totalCount] =
+      await Promise.all([
+        // Active: not revoked and not expired
+        keysCollection.countDocuments({
+          userId: ctx.userId,
+          isRevoked: false,
+          $or: [{ expiresAt: null }, { expiresAt: { $gt: now } }],
+        }),
+        // Revoked
+        keysCollection.countDocuments({
+          userId: ctx.userId,
+          isRevoked: true,
+        }),
+        // Expired: not revoked but past expiration
+        keysCollection.countDocuments({
+          userId: ctx.userId,
+          isRevoked: false,
+          expiresAt: { $ne: null, $lte: now },
+        }),
+        // Total ever created
+        keysCollection.countDocuments({
+          userId: ctx.userId,
+        }),
+      ]);
+
+    return {
+      active: activeCount,
+      revoked: revokedCount,
+      expired: expiredCount,
+      total: totalCount,
     };
   }),
 
diff --git a/packages/kal-frontend/src/app/dashboard/api-keys/client.tsx b/packages/kal-frontend/src/app/dashboard/api-keys/client.tsx
index 53843ee..e7b1290 100644
--- a/packages/kal-frontend/src/app/dashboard/api-keys/client.tsx
+++ b/packages/kal-frontend/src/app/dashboard/api-keys/client.tsx
@@ -1,9 +1,16 @@
 "use client";
 
 import type { ApiKeyExpiration } from "kal-shared";
-import { RATE_LIMITS } from "kal-shared";
 import { useState } from "react";
-import { AlertTriangle, Check, CheckCircle, Plus } from "react-feather";
+import {
+  AlertTriangle,
+  Check,
+  CheckCircle,
+  Key,
+  Plus,
+  Slash,
+  Clock,
+} from "react-feather";
 
 import { useBreakpoint } from "@/hooks/useBreakpoint";
 import { AuthUpdater, useAuth } from "@/lib/auth-context";
@@ -26,7 +33,11 @@ interface ApiKeysClientProps {
   name?: string | null;
 }
 
-export default function ApiKeysClient({ logtoId, email, name }: ApiKeysClientProps) {
+export default function ApiKeysClient({
+  logtoId,
+  email,
+  name,
+}: ApiKeysClientProps) {
   return (
     <>
       <AuthUpdater logtoId={logtoId} email={email} name={name} />
@@ -35,9 +46,13 @@ export default function ApiKeysClient({ logtoId, email, name }: ApiKeysClientPro
   );
 }
 
-function ApiKeysContentWrapper({ expectedLogtoId }: { expectedLogtoId?: string }) {
+function ApiKeysContentWrapper({
+  expectedLogtoId,
+}: {
+  expectedLogtoId?: string;
+}) {
   const { logtoId } = useAuth();
-  
+
   if (expectedLogtoId && logtoId !== expectedLogtoId) {
     return (
       <div className="p-4 md:p-8">
@@ -56,12 +71,14 @@ function ApiKeysContent() {
   const { isMobile } = useBreakpoint();
   const [showGenerateModal, setShowGenerateModal] = useState(false);
   const [newKeyName, setNewKeyName] = useState("");
-  const [newKeyExpiration, setNewKeyExpiration] = useState<"1_week" | "1_month" | "never">("1_month");
+  const [newKeyExpiration, setNewKeyExpiration] = useState<
+    "1_week" | "1_month" | "never"
+  >("1_month");
   const [generatedKey, setGeneratedKey] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
 
   const { data: apiKeys, refetch: refetchKeys } = trpc.apiKeys.list.useQuery();
-  const { data: stats } = trpc.apiKeys.getUsageStats.useQuery();
+  const { data: keyStats } = trpc.apiKeys.getKeyStats.useQuery();
 
   const generateMutation = trpc.apiKeys.generate.useMutation({
     onSuccess: (data) => {
@@ -101,76 +118,83 @@ function ApiKeysContent() {
   };
 
   const handleRevoke = (keyId: string, keyName: string) => {
-    if (confirm(`Are you sure you want to revoke "${keyName}"? This action cannot be undone.`)) {
+    if (
+      confirm(
+        `Are you sure you want to revoke "${keyName}"? This action cannot be undone.`
+      )
+    ) {
       revokeMutation.mutate({ keyId });
     }
   };
 
-  const tier = stats?.tier || "free";
-  const limits = RATE_LIMITS[tier];
-  const dailyUsed = stats?.dailyUsed || 0;
-  const dailyRemaining = Math.max(0, limits.dailyLimit - dailyUsed);
-  const dailyPercentage = Math.min(100, (dailyUsed / limits.dailyLimit) * 100);
-  const monthlyUsed = stats?.monthlyUsed || 0;
-  const monthlyRemaining = Math.max(0, limits.monthlyLimit - monthlyUsed);
-  const monthlyPercentage = Math.min(100, (monthlyUsed / limits.monthlyLimit) * 100);
-
   return (
     <div className="p-4 md:p-6 lg:p-8 w-full">
       <div className="mb-6 md:mb-8">
-        <h1 className="text-xl md:text-2xl font-bold text-content-primary mb-1 md:mb-2">API Keys</h1>
-        <p className="text-content-secondary text-sm md:text-base">Manage your API keys and view rate limit analytics</p>
+        <h1 className="text-xl md:text-2xl font-bold text-content-primary mb-1 md:mb-2">
+          API Keys
+        </h1>
+        <p className="text-content-secondary text-sm md:text-base">
+          Manage your API keys
+        </p>
       </div>
 
-      {/* Usage Stats */}
+      {/* Key Stats */}
       <section className="mb-6 md:mb-8">
-        <h2 className="text-base md:text-lg font-semibold text-content-primary mb-3 md:mb-4">Rate Limit Analytics</h2>
-        <div className="grid-auto-fit-md">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
           <div className="bg-dark-surface border border-dark-border rounded-xl p-4 md:p-6">
-            <div className="flex items-center justify-between mb-2">
-              <span className="text-content-secondary text-xs md:text-sm">Current Tier</span>
-              <span className={`px-2 py-1 rounded text-xs font-medium tier-badge tier-${tier}`}>
-                {tier === "free" ? "Free" : tier === "tier_1" ? "Tier 1" : "Tier 2"}
+            <div className="flex items-center gap-2 mb-3">
+              <div className="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center">
+                <Key size={16} className="text-accent" />
+              </div>
+              <span className="text-content-secondary text-xs md:text-sm">
+                Active
               </span>
             </div>
-            <p className="text-content-muted text-xs md:text-sm">{limits.minuteLimit} requests/minute</p>
-            <p className="text-content-muted text-xs md:text-sm">{limits.dailyLimit.toLocaleString()} requests/day</p>
-            <p className="text-content-muted text-xs md:text-sm">{limits.monthlyLimit.toLocaleString()} requests/month</p>
+            <span className="text-accent font-bold text-2xl md:text-3xl">
+              {keyStats?.active ?? 0}
+            </span>
           </div>
 
           <div className="bg-dark-surface border border-dark-border rounded-xl p-4 md:p-6">
-            <div className="flex items-center justify-between mb-2">
-              <span className="text-content-secondary text-xs md:text-sm">Today&apos;s Usage</span>
-              <span className="text-accent font-semibold text-sm md:text-base">{dailyUsed} / {limits.dailyLimit}</span>
-            </div>
-            <div className="h-2 bg-dark-elevated rounded-full overflow-hidden mb-2">
-              <div 
-                className="h-full bg-accent rounded-full transition-all duration-300" 
-                style={{ width: `${dailyPercentage}%` }}
-              />
+            <div className="flex items-center gap-2 mb-3">
+              <div className="w-8 h-8 rounded-lg bg-red-500/10 flex items-center justify-center">
+                <Slash size={16} className="text-red-400" />
+              </div>
+              <span className="text-content-secondary text-xs md:text-sm">
+                Revoked
+              </span>
             </div>
-            <p className="text-content-muted text-xs md:text-sm">{dailyRemaining} requests remaining</p>
+            <span className="text-content-primary font-bold text-2xl md:text-3xl">
+              {keyStats?.revoked ?? 0}
+            </span>
           </div>
 
           <div className="bg-dark-surface border border-dark-border rounded-xl p-4 md:p-6">
-            <div className="flex items-center justify-between mb-2">
-              <span className="text-content-secondary text-xs md:text-sm">Monthly Usage</span>
-              <span className="text-accent font-semibold text-sm md:text-base">{monthlyUsed.toLocaleString()} / {limits.monthlyLimit.toLocaleString()}</span>
-            </div>
-            <div className="h-2 bg-dark-elevated rounded-full overflow-hidden mb-2">
-              <div 
-                className="h-full bg-accent rounded-full transition-all duration-300" 
-                style={{ width: `${monthlyPercentage}%` }}
-              />
+            <div className="flex items-center gap-2 mb-3">
+              <div className="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center">
+                <Clock size={16} className="text-amber-400" />
+              </div>
+              <span className="text-content-secondary text-xs md:text-sm">
+                Expired
+              </span>
             </div>
-            <p className="text-content-muted text-xs md:text-sm">{monthlyRemaining.toLocaleString()} requests remaining</p>
+            <span className="text-content-primary font-bold text-2xl md:text-3xl">
+              {keyStats?.expired ?? 0}
+            </span>
           </div>
 
           <div className="bg-dark-surface border border-dark-border rounded-xl p-4 md:p-6">
-            <div className="flex items-center justify-between mb-2">
-              <span className="text-content-secondary text-xs md:text-sm">Active Keys</span>
-              <span className="text-accent font-semibold text-xl md:text-2xl">{stats?.activeKeyCount || 0}</span>
+            <div className="flex items-center gap-2 mb-3">
+              <div className="w-8 h-8 rounded-lg bg-dark-elevated flex items-center justify-center">
+                <Key size={16} className="text-content-muted" />
+              </div>
+              <span className="text-content-secondary text-xs md:text-sm">
+                Total Created
+              </span>
             </div>
+            <span className="text-content-primary font-bold text-2xl md:text-3xl">
+              {keyStats?.total ?? 0}
+            </span>
           </div>
         </div>
       </section>
@@ -178,8 +202,10 @@ function ApiKeysContent() {
       {/* API Keys List */}
       <section>
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
-          <h2 className="text-base md:text-lg font-semibold text-content-primary">Your API Keys</h2>
-          <button 
+          <h2 className="text-base md:text-lg font-semibold text-content-primary">
+            Your API Keys
+          </h2>
+          <button
             className="flex items-center justify-center gap-2 px-4 py-2 bg-accent text-dark font-medium rounded-lg hover:bg-accent/90 transition-colors text-sm md:text-base"
             onClick={() => setShowGenerateModal(true)}
           >
@@ -197,18 +223,26 @@ function ApiKeysContent() {
               <span>Last Used</span>
               <span>Actions</span>
             </div>
-            
+
             {apiKeys.map((key: SerializedApiKey) => (
               <div key={key._id}>
                 {/* Desktop Row */}
                 <div className="hidden md:grid grid-cols-5 gap-4 px-6 py-4 border-t border-dark-border items-center">
-                  <span className="font-medium text-content-primary truncate">{key.name}</span>
-                  <code className="text-content-secondary text-sm bg-dark-elevated px-2 py-1 rounded truncate">{key.keyPrefix}</code>
+                  <span className="font-medium text-content-primary truncate">
+                    {key.name}
+                  </span>
+                  <code className="text-content-secondary text-sm bg-dark-elevated px-2 py-1 rounded truncate">
+                    {key.keyPrefix}
+                  </code>
                   <span className="text-content-secondary text-sm">
-                    {key.expiresAt ? new Date(key.expiresAt).toLocaleDateString() : "Never"}
+                    {key.expiresAt
+                      ? new Date(key.expiresAt).toLocaleDateString()
+                      : "Never"}
                   </span>
                   <span className="text-content-muted text-sm">
-                    {key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleDateString() : "Never"}
+                    {key.lastUsedAt
+                      ? new Date(key.lastUsedAt).toLocaleDateString()
+                      : "Never"}
                   </span>
                   <button
                     className="text-red-400 hover:text-red-300 text-sm font-medium transition-colors"
@@ -218,11 +252,13 @@ function ApiKeysContent() {
                     Revoke
                   </button>
                 </div>
-                
+
                 {/* Mobile Card */}
                 <div className="md:hidden p-4 border-t border-dark-border">
                   <div className="flex items-center justify-between mb-2">
-                    <span className="font-medium text-content-primary">{key.name}</span>
+                    <span className="font-medium text-content-primary">
+                      {key.name}
+                    </span>
                     <button
                       className="text-red-400 hover:text-red-300 text-sm font-medium transition-colors"
                       onClick={() => handleRevoke(key._id, key.name)}
@@ -231,10 +267,22 @@ function ApiKeysContent() {
                       Revoke
                     </button>
                   </div>
-                  <code className="block text-content-secondary text-xs bg-dark-elevated px-2 py-1 rounded mb-2">{key.keyPrefix}</code>
+                  <code className="block text-content-secondary text-xs bg-dark-elevated px-2 py-1 rounded mb-2">
+                    {key.keyPrefix}
+                  </code>
                   <div className="flex gap-4 text-xs text-content-muted">
-                    <span>Expires: {key.expiresAt ? new Date(key.expiresAt).toLocaleDateString() : "Never"}</span>
-                    <span>Used: {key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleDateString() : "Never"}</span>
+                    <span>
+                      Expires:{" "}
+                      {key.expiresAt
+                        ? new Date(key.expiresAt).toLocaleDateString()
+                        : "Never"}
+                    </span>
+                    <span>
+                      Used:{" "}
+                      {key.lastUsedAt
+                        ? new Date(key.lastUsedAt).toLocaleDateString()
+                        : "Never"}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -242,23 +290,35 @@ function ApiKeysContent() {
           </div>
         ) : (
           <div className="bg-dark-surface border border-dark-border rounded-xl p-8 md:p-12 text-center">
-            <p className="text-content-secondary text-sm md:text-base">No API keys yet. Generate one to get started!</p>
+            <p className="text-content-secondary text-sm md:text-base">
+              No API keys yet. Generate one to get started!
+            </p>
           </div>
         )}
       </section>
 
       {/* Generate Key Modal */}
       {showGenerateModal && (
-        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-end sm:items-center justify-center z-50 p-4" onClick={handleCloseModal}>
-          <div 
-            className="bg-dark-surface border border-dark-border rounded-t-2xl sm:rounded-2xl p-4 md:p-6 w-full max-w-md max-h-[90vh] overflow-y-auto" 
+        <div
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-end sm:items-center justify-center z-50 p-4"
+          onClick={handleCloseModal}
+        >
+          <div
+            className="bg-dark-surface border border-dark-border rounded-t-2xl sm:rounded-2xl p-4 md:p-6 w-full max-w-md max-h-[90vh] overflow-y-auto"
             onClick={(e) => e.stopPropagation()}
           >
             {!generatedKey ? (
               <>
-                <h3 className="text-lg md:text-xl font-semibold text-content-primary mb-4 md:mb-6">Generate New API Key</h3>
+                <h3 className="text-lg md:text-xl font-semibold text-content-primary mb-4 md:mb-6">
+                  Generate New API Key
+                </h3>
                 <div className="mb-4">
-                  <label htmlFor="keyName" className="block text-xs md:text-sm font-medium text-content-secondary mb-2">Key Name</label>
+                  <label
+                    htmlFor="keyName"
+                    className="block text-xs md:text-sm font-medium text-content-secondary mb-2"
+                  >
+                    Key Name
+                  </label>
                   <input
                     id="keyName"
                     type="text"
@@ -270,7 +330,9 @@ function ApiKeysContent() {
                   />
                 </div>
                 <div className="mb-4 md:mb-6">
-                  <label className="block text-xs md:text-sm font-medium text-content-secondary mb-2">Expiration</label>
+                  <label className="block text-xs md:text-sm font-medium text-content-secondary mb-2">
+                    Expiration
+                  </label>
                   <div className="flex gap-2">
                     {[
                       { value: "1_week", label: "1 Week" },
@@ -284,7 +346,11 @@ function ApiKeysContent() {
                             ? "bg-accent text-dark"
                             : "bg-dark-elevated text-content-secondary border border-dark-border hover:border-accent/30"
                         }`}
-                        onClick={() => setNewKeyExpiration(opt.value as "1_week" | "1_month" | "never")}
+                        onClick={() =>
+                          setNewKeyExpiration(
+                            opt.value as "1_week" | "1_month" | "never"
+                          )
+                        }
                       >
                         {opt.label}
                       </button>
@@ -292,7 +358,10 @@ function ApiKeysContent() {
                   </div>
                 </div>
                 <div className="flex gap-3">
-                  <button className="flex-1 py-2 md:py-3 rounded-lg font-medium bg-dark-elevated text-content-secondary hover:text-content-primary transition-colors text-sm md:text-base" onClick={handleCloseModal}>
+                  <button
+                    className="flex-1 py-2 md:py-3 rounded-lg font-medium bg-dark-elevated text-content-secondary hover:text-content-primary transition-colors text-sm md:text-base"
+                    onClick={handleCloseModal}
+                  >
                     Cancel
                   </button>
                   <button
@@ -300,31 +369,48 @@ function ApiKeysContent() {
                     onClick={handleGenerate}
                     disabled={!newKeyName.trim() || generateMutation.isPending}
                   >
-                    {generateMutation.isPending ? "Generating..." : "Generate Key"}
+                    {generateMutation.isPending
+                      ? "Generating..."
+                      : "Generate Key"}
                   </button>
                 </div>
               </>
             ) : (
               <>
                 <h3 className="text-lg md:text-xl font-semibold text-content-primary mb-4 flex items-center gap-2">
-                  <CheckCircle size={isMobile ? 18 : 20} className="text-accent" /> API Key Generated!
+                  <CheckCircle
+                    size={isMobile ? 18 : 20}
+                    className="text-accent"
+                  />{" "}
+                  API Key Generated!
                 </h3>
                 <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-3 md:p-4 mb-4">
                   <p className="text-yellow-400 text-xs md:text-sm flex items-center gap-2">
-                    <AlertTriangle size={isMobile ? 14 : 16} /> <strong>Save this key now!</strong>
+                    <AlertTriangle size={isMobile ? 14 : 16} />{" "}
+                    <strong>Save this key now!</strong>
+                  </p>
+                  <p className="text-yellow-400/80 text-xs md:text-sm mt-1">
+                    This is the only time you&apos;ll see this key.
                   </p>
-                  <p className="text-yellow-400/80 text-xs md:text-sm mt-1">This is the only time you&apos;ll see this key.</p>
                 </div>
                 <div className="bg-dark-elevated rounded-lg p-3 md:p-4 mb-4 md:mb-6">
-                  <code className="block text-content-primary text-xs md:text-sm break-all mb-3">{generatedKey}</code>
-                  <button 
+                  <code className="block text-content-primary text-xs md:text-sm break-all mb-3">
+                    {generatedKey}
+                  </code>
+                  <button
                     className="w-full sm:w-auto px-4 py-2 bg-accent text-dark font-medium rounded-lg hover:bg-accent/90 transition-colors flex items-center justify-center gap-1 text-sm"
                     onClick={handleCopyKey}
                   >
-                    {copied ? <><Check size={14} /> Copied!</> : "Copy"}
+                    {copied ? (
+                      <>
+                        <Check size={14} /> Copied!
+                      </>
+                    ) : (
+                      "Copy"
+                    )}
                   </button>
                 </div>
-                <button 
+                <button
                   className="w-full py-2 md:py-3 rounded-lg font-medium bg-accent text-dark hover:bg-accent/90 transition-colors text-sm md:text-base"
                   onClick={handleCloseModal}
                 >
diff --git a/packages/kal-frontend/src/app/dashboard/changelog/client.tsx b/packages/kal-frontend/src/app/dashboard/changelog/client.tsx
new file mode 100644
index 0000000..1430b5c
--- /dev/null
+++ b/packages/kal-frontend/src/app/dashboard/changelog/client.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { FileText, Gift, Tool, Zap } from "react-feather";
+
+import type { ChangelogEntry } from "./page";
+
+const CATEGORY_CONFIG: Record<
+  string,
+  { icon: typeof Gift; color: string; bg: string; border: string; glow: string }
+> = {
+  Added: {
+    icon: Gift,
+    color: "text-emerald-400",
+    bg: "bg-emerald-400/10",
+    border: "border-emerald-400/20",
+    glow: "shadow-[0_0_8px_rgba(52,211,153,0.15)]",
+  },
+  Fixed: {
+    icon: Tool,
+    color: "text-amber-400",
+    bg: "bg-amber-400/10",
+    border: "border-amber-400/20",
+    glow: "shadow-[0_0_8px_rgba(251,191,36,0.15)]",
+  },
+  Changed: {
+    icon: Zap,
+    color: "text-sky-400",
+    bg: "bg-sky-400/10",
+    border: "border-sky-400/20",
+    glow: "shadow-[0_0_8px_rgba(56,189,248,0.15)]",
+  },
+};
+
+const DEFAULT_CATEGORY = {
+  icon: Zap,
+  color: "text-purple-400",
+  bg: "bg-purple-400/10",
+  border: "border-purple-400/20",
+  glow: "shadow-[0_0_8px_rgba(192,132,252,0.15)]",
+};
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr + "T00:00:00");
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+function VersionCard({
+  entry,
+  isLatest,
+  index,
+}: {
+  entry: ChangelogEntry;
+  isLatest: boolean;
+  index: number;
+}) {
+  return (
+    <div
+      className="relative pl-8 md:pl-12 animate-fade-in"
+      style={{ animationDelay: `${index * 100}ms`, animationFillMode: "both" }}
+    >
+      {/* Timeline dot */}
+      <div className="absolute left-0 md:left-[7px] top-[22px] z-10">
+        <div
+          className={`w-3.5 h-3.5 rounded-full border-2 ${
+            isLatest
+              ? "bg-accent border-accent shadow-[0_0_10px_rgba(16,185,129,0.5)]"
+              : "bg-dark-elevated border-dark-border"
+          }`}
+        />
+      </div>
+
+      {/* Card */}
+      <div
+        className={`
+          rounded-xl border p-5 md:p-6 transition-all duration-300
+          hover:border-accent/20 hover:shadow-[0_0_20px_rgba(16,185,129,0.05)]
+          ${
+            isLatest
+              ? "bg-gradient-to-br from-dark-surface to-dark-elevated border-accent/20 shadow-[0_0_30px_rgba(16,185,129,0.06)]"
+              : "bg-dark-surface border-dark-border"
+          }
+        `}
+      >
+        {/* Version header */}
+        <div className="flex flex-wrap items-center gap-3 mb-4">
+          <span
+            className={`
+              text-lg md:text-xl font-bold font-mono tracking-tight
+              ${isLatest ? "text-accent drop-shadow-[0_0_6px_rgba(16,185,129,0.5)]" : "text-content-primary"}
+            `}
+          >
+            v{entry.version}
+          </span>
+          {isLatest && (
+            <span className="px-2.5 py-0.5 text-[10px] font-bold uppercase rounded-full bg-accent/15 text-accent border border-accent/30 animate-neon-pulse tracking-wider">
+              latest
+            </span>
+          )}
+          <span className="text-xs text-content-muted ml-auto">
+            {formatDate(entry.date)}
+          </span>
+        </div>
+
+        {/* Categories */}
+        <div className="space-y-4">
+          {entry.categories.map((category) => {
+            const config = CATEGORY_CONFIG[category.name] ?? DEFAULT_CATEGORY;
+            const Icon = config.icon;
+
+            return (
+              <div key={category.name}>
+                {/* Category badge */}
+                <div
+                  className={`
+                    inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold
+                    border mb-3
+                    ${config.color} ${config.bg} ${config.border} ${config.glow}
+                  `}
+                >
+                  <Icon size={12} />
+                  {category.name}
+                </div>
+
+                {/* Items */}
+                <ul className="space-y-2 ml-1">
+                  {category.items.map((item, i) => (
+                    <li key={i} className="flex gap-2.5 group">
+                      <span
+                        className={`mt-[7px] w-1.5 h-1.5 rounded-full flex-shrink-0 transition-colors ${config.bg.replace("/10", "/30")} group-hover:${config.bg.replace("/10", "/60")}`}
+                      />
+                      <span className="text-sm text-content-secondary leading-relaxed group-hover:text-content-primary transition-colors">
+                        <HighlightCode text={item} />
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Renders inline `code` segments with accent styling */
+function HighlightCode({ text }: { text: string }) {
+  const parts = text.split(/(`[^`]+`)/g);
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.startsWith("`") && part.endsWith("`") ? (
+          <code
+            key={i}
+            className="px-1.5 py-0.5 rounded bg-dark/60 border border-dark-border text-xs font-mono text-accent"
+          >
+            {part.slice(1, -1)}
+          </code>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </>
+  );
+}
+
+interface ChangelogClientProps {
+  entries: ChangelogEntry[];
+}
+
+export default function ChangelogClient({ entries }: ChangelogClientProps) {
+  return (
+    <div className="p-4 md:p-6 lg:p-8 w-full max-w-3xl">
+      {/* Header */}
+      <div className="mb-8 md:mb-10">
+        <div className="flex items-center gap-3 mb-2">
+          <FileText
+            size={24}
+            className="text-accent drop-shadow-[0_0_6px_rgba(16,185,129,0.6)]"
+          />
+          <h1 className="text-xl md:text-2xl font-bold text-content-primary">
+            Changelog
+          </h1>
+        </div>
+        <p className="text-content-secondary text-sm md:text-base">
+          All the latest updates and improvements to Kal
+        </p>
+      </div>
+
+      {entries.length === 0 ? (
+        <div className="bg-dark-surface border border-dark-border rounded-xl p-8 md:p-12 text-center">
+          <FileText size={40} className="text-content-muted mx-auto mb-4" />
+          <p className="text-content-secondary">
+            No changelog entries yet. Check back soon.
+          </p>
+        </div>
+      ) : (
+        /* Timeline */
+        <div className="relative">
+          {/* Vertical timeline line */}
+          <div className="absolute left-[6px] md:left-[13px] top-6 bottom-6 w-px bg-gradient-to-b from-accent/40 via-dark-border to-transparent" />
+
+          {/* Entries */}
+          <div className="space-y-6 md:space-y-8">
+            {entries.map((entry, index) => (
+              <VersionCard
+                key={entry.version}
+                entry={entry}
+                isLatest={index === 0}
+                index={index}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/kal-frontend/src/app/dashboard/changelog/page.tsx b/packages/kal-frontend/src/app/dashboard/changelog/page.tsx
new file mode 100644
index 0000000..6ac63e4
--- /dev/null
+++ b/packages/kal-frontend/src/app/dashboard/changelog/page.tsx
@@ -0,0 +1,103 @@
+import fs from "fs";
+import path from "path";
+
+import { getLogtoContext } from "@logto/next/server-actions";
+import { redirect } from "next/navigation";
+
+import ChangelogClient from "./client";
+
+import { getLogtoConfig } from "@/lib/logto";
+
+export const metadata = {
+  title: "Changelog - Kal Dashboard",
+  description: "See what's new in Kal",
+};
+
+export interface ChangelogEntry {
+  version: string;
+  date: string;
+  categories: {
+    name: string;
+    items: string[];
+  }[];
+}
+
+/**
+ * Parses a Keep-a-Changelog-style markdown string into structured data.
+ *
+ * Expected format per release:
+ *   ## [version] - YYYY-MM-DD
+ *   ### Category
+ *   - item
+ */
+function parseChangelog(raw: string): ChangelogEntry[] {
+  const entries: ChangelogEntry[] = [];
+  let current: ChangelogEntry | null = null;
+  let currentCategory: { name: string; items: string[] } | null = null;
+
+  for (const line of raw.split("\n")) {
+    const trimmed = line.trim();
+
+    // Match version heading: ## [1.0.1] - 2026-04-06
+    const versionMatch = trimmed.match(
+      /^##\s+\[([^\]]+)\]\s*-\s*(\d{4}-\d{2}-\d{2})/
+    );
+    if (versionMatch) {
+      if (current) {
+        if (currentCategory) current.categories.push(currentCategory);
+        entries.push(current);
+      }
+      current = {
+        version: versionMatch[1],
+        date: versionMatch[2],
+        categories: [],
+      };
+      currentCategory = null;
+      continue;
+    }
+
+    // Match category heading: ### Added / ### Fixed / ### Changed
+    const categoryMatch = trimmed.match(/^###\s+(.+)/);
+    if (categoryMatch && current) {
+      if (currentCategory) current.categories.push(currentCategory);
+      currentCategory = { name: categoryMatch[1], items: [] };
+      continue;
+    }
+
+    // Match list item: - Some change description
+    const itemMatch = trimmed.match(/^-\s+(.+)/);
+    if (itemMatch && currentCategory) {
+      currentCategory.items.push(itemMatch[1]);
+    }
+  }
+
+  // Push last pending entries
+  if (current) {
+    if (currentCategory) current.categories.push(currentCategory);
+    entries.push(current);
+  }
+
+  return entries;
+}
+
+export default async function ChangelogPage() {
+  const config = getLogtoConfig();
+  const { isAuthenticated } = await getLogtoContext(config);
+
+  if (!isAuthenticated) {
+    redirect("/");
+  }
+
+  const changelogPath = path.resolve(process.cwd(), "../../docs/changelog.md");
+  let raw = "";
+
+  try {
+    raw = fs.readFileSync(changelogPath, "utf-8");
+  } catch {
+    raw = "";
+  }
+
+  const entries = parseChangelog(raw);
+
+  return <ChangelogClient entries={entries} />;
+}
diff --git a/packages/kal-frontend/src/app/dashboard/client.tsx b/packages/kal-frontend/src/app/dashboard/client.tsx
index a86ab90..3f2efc3 100644
--- a/packages/kal-frontend/src/app/dashboard/client.tsx
+++ b/packages/kal-frontend/src/app/dashboard/client.tsx
@@ -2,13 +2,83 @@
 
 import { RATE_LIMITS } from "kal-shared";
 import Link from "next/link";
-import { Book, Code, Key, List, Search, Settings } from "react-feather";
+import { useState, useEffect } from "react";
+import { Book, Clock, Code, Key, List, Search, Settings } from "react-feather";
 
 import { UsageChart } from "@/components/dashboard/UsageChart";
 import { useBreakpoint } from "@/hooks/useBreakpoint";
 import { AuthUpdater, useAuth } from "@/lib/auth-context";
 import { trpc } from "@/lib/trpc";
 
+// ─── Countdown helpers ────────────────────────────────────────────────────────
+function getMsUntilMidnightUTC(): number {
+  const now = new Date();
+  const midnight = new Date(now);
+  midnight.setUTCDate(midnight.getUTCDate() + 1);
+  midnight.setUTCHours(0, 0, 0, 0);
+  return midnight.getTime() - now.getTime();
+}
+
+function getMsUntilNextMonthUTC(): number {
+  const now = new Date();
+  const nextMonth = new Date(
+    Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 1)
+  );
+  return nextMonth.getTime() - now.getTime();
+}
+
+function getMsUntilNextMinute(): number {
+  const now = new Date();
+  return (60 - now.getSeconds()) * 1_000 - now.getMilliseconds();
+}
+
+function formatCountdown(ms: number, compact = false): string {
+  const totalSec = Math.max(0, Math.floor(ms / 1_000));
+
+  if (compact) {
+    const s = totalSec % 60;
+    return `${s}s`;
+  }
+
+  const d = Math.floor(totalSec / 86_400);
+  const h = Math.floor((totalSec % 86_400) / 3_600);
+  const m = Math.floor((totalSec % 3_600) / 60);
+  const s = totalSec % 60;
+
+  if (d > 0) {
+    return `${d}d ${h}h ${String(m).padStart(2, "0")}m`;
+  }
+  return `${h}h ${String(m).padStart(2, "0")}m ${String(s).padStart(2, "0")}s`;
+}
+
+function useCountdown(getMsFn: () => number, interval = 1_000): number {
+  const [ms, setMs] = useState(getMsFn);
+
+  useEffect(() => {
+    const id = setInterval(() => setMs(getMsFn()), interval);
+    return () => clearInterval(id);
+  }, [getMsFn, interval]);
+
+  return ms;
+}
+
+function ResetBadge({
+  ms,
+  compact = false,
+}: {
+  ms: number;
+  compact?: boolean;
+}) {
+  return (
+    <span className="inline-flex items-center gap-1 text-content-muted text-xs">
+      <Clock size={10} className="text-accent/60 shrink-0" />
+      <span className="font-mono text-content-secondary">
+        {formatCountdown(ms, compact)}
+      </span>
+    </span>
+  );
+}
+
 interface DashboardClientProps {
   logtoId?: string;
   email?: string | null;
@@ -59,6 +129,10 @@ function DashboardContent({ nameProp }: { nameProp?: string | null }) {
   const { data: chartData, isLoading: isLoadingChart } =
     trpc.requestLogs.requestsByDay.useQuery({ days: 30 });
 
+  const dailyResetMs = useCountdown(getMsUntilMidnightUTC);
+  const monthlyResetMs = useCountdown(getMsUntilNextMonthUTC);
+  const minuteResetMs = useCountdown(getMsUntilNextMinute, 1_000);
+
   const tier = stats?.tier || "free";
   const limits = RATE_LIMITS[tier];
   const dailyUsed = stats?.dailyUsed || 0;
@@ -70,6 +144,12 @@ function DashboardContent({ nameProp }: { nameProp?: string | null }) {
     100,
     (monthlyUsed / limits.monthlyLimit) * 100
   );
+  const minuteUsed = stats?.minuteUsed || 0;
+  const minuteRemaining = Math.max(0, limits.minuteLimit - minuteUsed);
+  const minutePercentage = Math.min(
+    100,
+    (minuteUsed / limits.minuteLimit) * 100
+  );
 
   const displayName = userInfo?.name || nameProp || "Developer";
 
@@ -128,9 +208,12 @@ function DashboardContent({ nameProp }: { nameProp?: string | null }) {
               style={{ width: `${dailyPercentage}%` }}
             />
           </div>
-          <p className="text-content-muted text-xs md:text-sm">
-            {dailyRemaining} remaining
-          </p>
+          <div className="flex items-center justify-between">
+            <p className="text-content-muted text-xs md:text-sm">
+              {dailyRemaining} remaining
+            </p>
+            <ResetBadge ms={dailyResetMs} />
+          </div>
         </div>
 
         <div className="bg-dark-surface border border-dark-border rounded-xl p-4 md:p-6">
@@ -149,26 +232,35 @@ function DashboardContent({ nameProp }: { nameProp?: string | null }) {
               style={{ width: `${monthlyPercentage}%` }}
             />
           </div>
-          <p className="text-content-muted text-xs md:text-sm">
-            {monthlyRemaining.toLocaleString()} remaining
-          </p>
+          <div className="flex items-center justify-between">
+            <p className="text-content-muted text-xs md:text-sm">
+              {monthlyRemaining.toLocaleString()} remaining
+            </p>
+            <ResetBadge ms={monthlyResetMs} />
+          </div>
         </div>
 
         <div className="bg-dark-surface border border-dark-border rounded-xl p-4 md:p-6">
           <div className="flex items-center justify-between mb-2">
             <span className="text-content-secondary text-xs md:text-sm">
-              Active API Keys
+              Minute Usage
             </span>
-            <span className="text-accent font-semibold text-xl md:text-2xl">
-              {stats?.activeKeyCount || 0}
+            <span className="text-accent font-semibold text-sm md:text-base">
+              {minuteUsed} / {limits.minuteLimit}
             </span>
           </div>
-          <Link
-            href="/dashboard/api-keys"
-            className="text-accent text-xs md:text-sm hover:underline"
-          >
-            Manage keys →
-          </Link>
+          <div className="h-2 bg-dark-elevated rounded-full overflow-hidden mb-2">
+            <div
+              className="h-full bg-accent rounded-full transition-all duration-300"
+              style={{ width: `${minutePercentage}%` }}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-content-muted text-xs md:text-sm">
+              {minuteRemaining} remaining
+            </p>
+            <ResetBadge ms={minuteResetMs} compact />
+          </div>
         </div>
       </div>
 
diff --git a/packages/kal-frontend/src/app/dashboard/docs/client.tsx b/packages/kal-frontend/src/app/dashboard/docs/client.tsx
index e2fdbc7..e22558a 100644
--- a/packages/kal-frontend/src/app/dashboard/docs/client.tsx
+++ b/packages/kal-frontend/src/app/dashboard/docs/client.tsx
@@ -238,8 +238,10 @@ function RateLimitsTab() {
 
   const tier = stats?.tier ?? "free";
   const limits = RATE_LIMITS[tier];
+  const minuteUsed = stats?.minuteUsed ?? 0;
   const dailyUsed = stats?.dailyUsed ?? 0;
   const monthlyUsed = stats?.monthlyUsed ?? 0;
+  const minutePct = Math.min(100, (minuteUsed / limits.minuteLimit) * 100);
   const dailyPct = Math.min(100, (dailyUsed / limits.dailyLimit) * 100);
   const monthlyPct = Math.min(100, (monthlyUsed / limits.monthlyLimit) * 100);
 
@@ -286,6 +288,25 @@ function RateLimitsTab() {
       <SectionCard>
         <SectionTitle>Your Current Usage</SectionTitle>
         <div className="space-y-4">
+          <div>
+            <div className="flex justify-between text-sm mb-1.5">
+              <span className="text-content-secondary">Per minute</span>
+              <span className="font-mono text-content-primary">
+                {minuteUsed.toLocaleString()} /{" "}
+                {limits.minuteLimit.toLocaleString()}
+              </span>
+            </div>
+            <div className="h-2 bg-dark-elevated rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all duration-500 ${minutePct > 80 ? "bg-red-400" : minutePct > 60 ? "bg-yellow-400" : "bg-accent"}`}
+                style={{ width: `${minutePct}%` }}
+              />
+            </div>
+            <p className="text-xs text-content-muted mt-1">
+              {Math.max(0, limits.minuteLimit - minuteUsed).toLocaleString()}{" "}
+              remaining &middot; resets every minute
+            </p>
+          </div>
           <div>
             <div className="flex justify-between text-sm mb-1.5">
               <span className="text-content-secondary">Today</span>
diff --git a/packages/kal-frontend/src/app/dashboard/foods/client.tsx b/packages/kal-frontend/src/app/dashboard/foods/client.tsx
index f900cd6..057c93f 100644
--- a/packages/kal-frontend/src/app/dashboard/foods/client.tsx
+++ b/packages/kal-frontend/src/app/dashboard/foods/client.tsx
@@ -54,6 +54,27 @@ const CATEGORY_GROUPS: Record<string, string[]> = {
 };
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Build a compact page-number array with ellipsis for large page counts. */
+function getPageNumbers(current: number, total: number): (number | "...")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const pages: (number | "...")[] = [1];
+
+  if (current > 3) pages.push("...");
+
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+
+  if (current < total - 2) pages.push("...");
+
+  pages.push(total);
+  return pages;
+}
+
 interface FoodsClientProps {
   logtoId?: string;
   email?: string | null;
@@ -360,25 +381,49 @@ function FoodsContent() {
 
       {/* Pagination */}
       {data && data.total > PAGE_SIZE && (
-        <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center justify-center gap-1.5 flex-wrap">
+          {/* Previous */}
           <button
             onClick={handlePrev}
             disabled={cursor === 0}
-            className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-dark-surface border border-dark-border text-content-secondary hover:text-content-primary hover:border-accent/30 disabled:opacity-40 disabled:cursor-not-allowed transition-all text-sm"
+            className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-dark-surface border border-dark-border text-content-secondary hover:text-content-primary hover:border-accent/30 disabled:opacity-40 disabled:cursor-not-allowed transition-all text-sm"
           >
-            <ChevronLeft size={16} /> Previous
+            <ChevronLeft size={16} />
+            <span className="hidden sm:inline">Previous</span>
           </button>
 
-          <span className="text-content-muted text-sm">
-            Page {currentPage} of {totalPages}
-          </span>
+          {/* Page numbers */}
+          {getPageNumbers(currentPage, totalPages).map((page, i) =>
+            page === "..." ? (
+              <span
+                key={`ellipsis-${i}`}
+                className="px-1.5 py-1.5 text-content-muted text-sm select-none"
+              >
+                &hellip;
+              </span>
+            ) : (
+              <button
+                key={page}
+                onClick={() => setCursor(((page as number) - 1) * PAGE_SIZE)}
+                className={`min-w-[36px] px-2.5 py-1.5 rounded-lg border text-sm font-medium transition-all ${
+                  page === currentPage
+                    ? "bg-accent/15 border-accent/40 text-accent"
+                    : "bg-dark-surface border-dark-border text-content-secondary hover:text-content-primary hover:border-accent/30"
+                }`}
+              >
+                {page}
+              </button>
+            )
+          )}
 
+          {/* Next */}
           <button
             onClick={handleNext}
             disabled={data.nextCursor === null || data.nextCursor === undefined}
-            className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-dark-surface border border-dark-border text-content-secondary hover:text-content-primary hover:border-accent/30 disabled:opacity-40 disabled:cursor-not-allowed transition-all text-sm"
+            className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-dark-surface border border-dark-border text-content-secondary hover:text-content-primary hover:border-accent/30 disabled:opacity-40 disabled:cursor-not-allowed transition-all text-sm"
           >
-            Next <ChevronRight size={16} />
+            <span className="hidden sm:inline">Next</span>
+            <ChevronRight size={16} />
           </button>
         </div>
       )}
diff --git a/packages/kal-frontend/src/app/dashboard/setup/client.tsx b/packages/kal-frontend/src/app/dashboard/setup/client.tsx
index 01f6b7f..7d95c85 100644
--- a/packages/kal-frontend/src/app/dashboard/setup/client.tsx
+++ b/packages/kal-frontend/src/app/dashboard/setup/client.tsx
@@ -99,7 +99,8 @@ function ApiPlayground({
     setResponseTime(null);
 
     const startTime = performance.now();
-    const baseUrl = process.env.NEXT_PUBLIC_API_URL || "https://api.kalori-api.my";
+    const baseUrl =
+      process.env.NEXT_PUBLIC_API_URL || "https://api.kalori-api.my";
     const url =
       endpoint === "halal"
         ? `${baseUrl}/api/v1/halal/search?q=${encodeURIComponent(query)}`
@@ -354,7 +355,7 @@ const endpointsData: EndpointData[] = [
         description: "Food ID (MongoDB ObjectId)",
       },
     ],
-    defaultExample: "/api/v1/foods/507f1f77bcf86cd799439011",
+    defaultExample: "/api/v1/foods/696d6752260e86a2b61634ef",
     section: "natural",
   },
   {
@@ -429,7 +430,7 @@ const endpointsData: EndpointData[] = [
         description: "Food ID (MongoDB ObjectId)",
       },
     ],
-    defaultExample: "/api/v1/halal/507f1f77bcf86cd799439011",
+    defaultExample: "/api/v1/halal/696d6752260e86a2b616381b",
     section: "halal",
   },
   {
@@ -496,7 +497,8 @@ function InteractiveEndpoints({ apiKey }: { apiKey: string }) {
 
     setLoadingEndpoint(endpoint.id);
     const startTime = performance.now();
-    const baseUrl = process.env.NEXT_PUBLIC_API_URL || "https://api.kalori-api.my";
+    const baseUrl =
+      process.env.NEXT_PUBLIC_API_URL || "https://api.kalori-api.my";
     const path = getTryUrl(endpoint.id, endpoint.defaultExample);
 
     try {
diff --git a/packages/kal-frontend/src/components/dashboard/Sidebar.tsx b/packages/kal-frontend/src/components/dashboard/Sidebar.tsx
index b7568b9..2fa5269 100644
--- a/packages/kal-frontend/src/components/dashboard/Sidebar.tsx
+++ b/packages/kal-frontend/src/components/dashboard/Sidebar.tsx
@@ -10,6 +10,7 @@ import {
   ChevronRight,
   Code,
   Database,
+  FileText,
   Home,
   Key,
   List,
@@ -175,6 +176,30 @@ export function Sidebar({ onSignOut }: SidebarProps) {
               })}
             </nav>
 
+            {/* Changelog */}
+            <div className="border-t border-dark-border py-4">
+              <Link
+                href="/dashboard/changelog"
+                onClick={() => setMobileOpen(false)}
+                className={`
+                  flex items-center gap-3 px-4 py-3 mx-2 rounded-lg
+                  ${
+                    pathname === "/dashboard/changelog"
+                      ? "bg-accent/10 text-accent border border-accent/30"
+                      : "text-content-secondary hover:bg-dark-elevated hover:text-content-primary"
+                  }
+                `}
+              >
+                <FileText
+                  size={20}
+                  className="text-accent drop-shadow-[0_0_6px_rgba(16,185,129,0.6)]"
+                />
+                <span className="font-medium text-accent drop-shadow-[0_0_6px_rgba(16,185,129,0.6)]">
+                  Changelog
+                </span>
+              </Link>
+            </div>
+
             {/* Feedback */}
             <div className="border-t border-dark-border py-4">
               <Link
@@ -191,9 +216,6 @@ export function Sidebar({ onSignOut }: SidebarProps) {
               >
                 <MessageSquare size={20} />
                 <span className="font-medium">Review & Bug</span>
-                <span className="ml-auto px-2 py-0.5 text-[10px] font-bold uppercase rounded-full bg-gradient-to-r from-emerald-500 to-teal-400 text-white shadow-sm">
-                  new
-                </span>
               </Link>
             </div>
 
@@ -270,6 +292,32 @@ export function Sidebar({ onSignOut }: SidebarProps) {
           })}
         </nav>
 
+        {/* Changelog */}
+        <div className="border-t border-dark-border py-4">
+          <Link
+            href="/dashboard/changelog"
+            className={`
+              flex items-center gap-3 px-4 py-3 mx-2 rounded-lg
+              ${
+                pathname === "/dashboard/changelog"
+                  ? "bg-accent/10 text-accent border border-accent/30"
+                  : "text-content-secondary hover:bg-dark-elevated hover:text-content-primary"
+              }
+            `}
+            title={collapsed ? "Changelog" : undefined}
+          >
+            <FileText
+              size={20}
+              className="flex-shrink-0 text-accent drop-shadow-[0_0_6px_rgba(16,185,129,0.6)]"
+            />
+            {!collapsed && (
+              <span className="font-medium whitespace-nowrap text-accent drop-shadow-[0_0_6px_rgba(16,185,129,0.6)]">
+                Changelog
+              </span>
+            )}
+          </Link>
+        </div>
+
         {/* Feedback */}
         <div className="border-t border-dark-border py-4">
           <Link
@@ -286,14 +334,9 @@ export function Sidebar({ onSignOut }: SidebarProps) {
           >
             <MessageSquare size={20} className="flex-shrink-0" />
             {!collapsed && (
-              <>
-                <span className="font-medium whitespace-nowrap">
-                  Review & Bug
-                </span>
-                <span className="ml-auto px-2 py-0.5 text-[10px] font-bold uppercase rounded-full bg-gradient-to-r from-emerald-500 to-teal-400 text-white shadow-sm">
-                  new
-                </span>
-              </>
+              <span className="font-medium whitespace-nowrap">
+                Review & Bug
+              </span>
             )}
           </Link>
         </div>
diff --git a/packages/kal-frontend/tailwind.config.ts b/packages/kal-frontend/tailwind.config.ts
index a04326b..4643497 100644
--- a/packages/kal-frontend/tailwind.config.ts
+++ b/packages/kal-frontend/tailwind.config.ts
@@ -36,6 +36,7 @@ const config: Config = {
         "fade-in": "fadeIn 0.5s ease-out",
         "slide-up": "slideUp 0.5s ease-out",
         "panel-slide-in": "panelSlideIn 0.25s ease-out",
+        "neon-pulse": "neonPulse 2s ease-in-out infinite",
       },
       keyframes: {
         fadeIn: {
@@ -50,6 +51,16 @@ const config: Config = {
           "0%": { opacity: "0", transform: "translateX(100%)" },
           "100%": { opacity: "1", transform: "translateX(0)" },
         },
+        neonPulse: {
+          "0%, 100%": {
+            boxShadow:
+              "0 0 4px rgba(16,185,129,0.4), 0 0 8px rgba(16,185,129,0.2)",
+          },
+          "50%": {
+            boxShadow:
+              "0 0 8px rgba(16,185,129,0.6), 0 0 16px rgba(16,185,129,0.3)",
+          },
+        },
       },
     },
   },