diff --git a/.env.example b/.env.example
index d4343c2..3dcca8f 100644
--- a/.env.example
+++ b/.env.example
@@ -12,6 +12,7 @@ GITHUB_DISCUSSION_COUNT=10
 
 # Leaderboard source data
 LEADERBOARD_SOURCE_URL_TEMPLATE=https://raw.githubusercontent.com/ashkulz/committers.top/gh-pages/_data/locations/{country}.yml
+DISABLE_CALCULATE_LEADERBOARD_ENDPOINT=false
 
 # Redis caching (optional — strongly recommended for leaderboard performance)
 # Use either redis://localhost:6379 or include password if enabled: redis://:password@localhost:6379
@@ -24,4 +25,4 @@ REDIS_CONNECT_TIMEOUT_MS=1500
 
 # ── PostgreSQL (local development) ─────────────────
 DATABASE_URL=postgresql://devimpact:devimpact@localhost:5432/devimpact?sslmode=disable
-POSTGRES_PASSWORD=CHANGE_THIS_TO_A_LONG_RANDOM_PASSWORD
\ No newline at end of file
+POSTGRES_PASSWORD=CHANGE_THIS_TO_A_LONG_RANDOM_PASSWORD
diff --git a/app/api/calculate-leaderboard/route.ts b/app/api/calculate-leaderboard/route.ts
index 02ae782..5a9c83b 100644
--- a/app/api/calculate-leaderboard/route.ts
+++ b/app/api/calculate-leaderboard/route.ts
@@ -3,7 +3,20 @@ import { calculateLeaderboard } from "@/lib/calculate-leaderboard";
 
 export const runtime = "nodejs";
 
+function isCalculateLeaderboardDisabled(): boolean {
+  const raw =
+    process.env.DISABLE_CALCULATE_LEADERBOARD_ENDPOINT?.trim().toLowerCase();
+  return raw === "true" || raw === "1" || raw === "yes";
+}
+
 export async function POST(request: Request) {
+  if (isCalculateLeaderboardDisabled()) {
+    return NextResponse.json(
+      { success: false, error: "Not found" },
+      { status: 404 },
+    );
+  }
+
   const { searchParams } = new URL(request.url);
   const country = searchParams.get("country")?.trim();
 
@@ -26,4 +39,4 @@ export async function POST(request: Request) {
       { status: 502 },
     );
   }
-}
\ No newline at end of file
+}
diff --git a/components/avatar.tsx b/components/avatar.tsx
new file mode 100644
index 0000000..95ade3b
--- /dev/null
+++ b/components/avatar.tsx
@@ -0,0 +1,33 @@
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+type AvatarProps = {
+  src: string;
+  alt: string;
+  size?: number;
+  unoptimized?: boolean;
+  className?: string;
+};
+
+/**
+ * Reusable avatar image component.
+ *
+ */
+export function Avatar({
+  src,
+  alt,
+  size = 32,
+  unoptimized = true,
+  className,
+}: AvatarProps) {
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={size}
+      height={size}
+      unoptimized={unoptimized}
+      className={cn("rounded-full ring-1 ring-border", className)}
+    />
+  );
+}
diff --git a/components/leaderboard-table.tsx b/components/leaderboard-table.tsx
index f7872db..14ccbd2 100644
--- a/components/leaderboard-table.tsx
+++ b/components/leaderboard-table.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import Image from "next/image";
 import { Search, AlertTriangle } from "lucide-react";
+import { Avatar } from "./avatar";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import {
   Card,
@@ -154,12 +154,10 @@ export function LeaderboardTable({
                     </td>
                     <td className="px-3 py-3">
                       <div className="flex items-center gap-2">
-                        <Image
+                        <Avatar
                           src={user.avatarUrl}
                           alt={user.name || user.username}
-                          width={32}
-                          height={32}
-                          className="rounded-full ring-1 ring-border"
+                          size={32}
                         />
                         <div className="min-w-0">
                           <a
diff --git a/components/result-dashboard.tsx b/components/result-dashboard.tsx
index 8d8c542..937ff26 100644
--- a/components/result-dashboard.tsx
+++ b/components/result-dashboard.tsx
@@ -2,8 +2,8 @@
 
 import { useMemo, useState } from "react";
 import { Check, Copy, Trophy } from "lucide-react";
-import Image from "next/image";
 import { useSearchParams } from "next/navigation";
+import { Avatar } from "@/components/avatar";
 import { ComparisonChart } from "./comparison-chart";
 import { TopList } from "./top-list";
 import { InsightsList } from "./insights-list";
@@ -139,12 +139,10 @@ export function ResultDashboard({
         <CardHeader className="pb-3">
           <CardTitle className="flex items-center justify-between text-base">
             <div className="flex items-center gap-2">
-              <Image
+              <Avatar
                 src={user.avatarUrl}
                 alt={t("comparison.avatarAlt", { name: title })}
-                width={28}
-                height={28}
-                className="rounded-full ring-1 ring-border"
+                size={28}
               />
               <a
                 href={getGithubProfileUrl(user.username)}
@@ -263,12 +261,10 @@ export function ResultDashboard({
       <Card key={`signal-${user.username}`}>
         <CardHeader className="pb-3">
           <CardTitle className="flex items-center gap-2 text-base">
-            <Image
+            <Avatar
               src={user.avatarUrl}
               alt={t("comparison.avatarAlt", { name: getDisplayName(user) })}
-              width={24}
-              height={24}
-              className="rounded-full ring-1 ring-border"
+              size={24}
             />
             <a
               href={getGithubProfileUrl(user.username)}
@@ -356,12 +352,10 @@ export function ResultDashboard({
               return (
                 <div className="flex items-center gap-2">
                   {winnerAvatar ? (
-                    <Image
+                    <Avatar
                       src={winnerAvatar}
                       alt={t("comparison.avatarAlt", { name: winnerName })}
-                      width={20}
-                      height={20}
-                      className="rounded-full ring-1 ring-border"
+                      size={20}
                     />
                   ) : null}
                   <p className="text-sm font-semibold text-cyan-700 dark:text-cyan-300">
diff --git a/next.config.js b/next.config.js
index 2e47547..3228a37 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   typedRoutes: true,
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: "https",