diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 9dcc11e..87150bb 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,22 +1,5 @@
-import ContributionGraph from "@/components/ContributionGraph";
-import ContributionHeatmap from "@/components/ContributionHeatmap";
-import PRMetrics from "@/components/PRMetrics";
-import PRBreakdownChart from "@/components/PRBreakdownChart";
-import GoalTracker from "@/components/GoalTracker";
-import DashboardHeader from "@/components/DashboardHeader";
-import StreakTracker from "@/components/StreakTracker";
-import TopRepos from "@/components/TopRepos";
-import PinnedRepos from "@/components/PinnedRepos";
-import LanguageBreakdown from "@/components/LanguageBreakdown";
-import CommitTimeChart from "@/components/CommitTimeChart";
-import CIAnalytics from "@/components/CIAnalytics";
-import IssueMetrics from "@/components/IssueMetrics";
-import StreakAtRiskBanner from "@/components/StreakAtRiskBanner";
-import FriendComparison from "@/components/FriendComparison";
-import WeeklySummaryCard from "@/components/WeeklySummaryCard";
-import ExportButton from "@/components/ExportButton";
-import Link from "next/link";
-import PersonalRecords from "@/components/PersonalRecords";
+import DashboardWidgets from "@/components/DashboardWidgets";
+
 import { authOptions } from "@/lib/auth";
 import { cookies } from "next/headers";
 import { getServerSession } from "next-auth";
@@ -35,68 +18,7 @@ export default async function DashboardPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[var(--background)] p-4 md:p-8 text-[var(--foreground)] transition-colors">
-      <DashboardHeader />
-      <div className="mb-6 flex justify-end items-center gap-2">
-        <Link
-          href="/dashboard/settings"
-          className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-3 py-1 text-sm text-[var(--foreground)] hover:opacity-90 transition-opacity"
-        >
-          Settings
-        </Link>
-        <ExportButton />
-      </div>
-      <StreakAtRiskBanner />
-
-      <div className="mb-6">
-        <WeeklySummaryCard />
-      </div>
-
-      <div className="mb-6">
-        <PersonalRecords />
-      </div>
-
-      {/* Row 1: Contribution graph + Streak + Friend Comparison */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2">
-          <ContributionGraph />
-          <div className="mt-6">
-            <ContributionHeatmap />
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-6">
-          <StreakTracker />
-          <FriendComparison />
-        </div>
-      </div>
-
-      {/* Row 2: PR metrics, PR breakdown & Time Chart */}
-      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <PRMetrics />
-        <PRBreakdownChart />
-        <CommitTimeChart />
-      </div>
-
-      {/* Row 3: Issue metrics + CI analytics */}
-      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2">
-          <IssueMetrics />
-        </div>
-        <CIAnalytics />
-      </div>
-
-      {/* Row 4: Pinned repositories */}
-      <div className="mt-6">
-        <PinnedRepos />
-      </div>
-
-      {/* Row 5: Top repos + Language breakdown + Goal tracker */}
-      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <TopRepos />
-        <LanguageBreakdown />
-        <GoalTracker />
-      </div>
+    <div className="min-h-screen bg-[var(--background)] p-4 md:p-8 text-[var(--foreground)] transition-colors">      <DashboardWidgets />
     </div>
   );
 }
diff --git a/src/components/DashboardWidgets.tsx b/src/components/DashboardWidgets.tsx
new file mode 100644
index 0000000..c38fe1e
--- /dev/null
+++ b/src/components/DashboardWidgets.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import ContributionGraph from "@/components/ContributionGraph";
+import ContributionHeatmap from "@/components/ContributionHeatmap";
+import PRMetrics from "@/components/PRMetrics";
+import PRBreakdownChart from "@/components/PRBreakdownChart";
+import GoalTracker from "@/components/GoalTracker";
+import DashboardHeader from "@/components/DashboardHeader";
+import StreakTracker from "@/components/StreakTracker";
+import TopRepos from "@/components/TopRepos";
+import PinnedRepos from "@/components/PinnedRepos";
+import LanguageBreakdown from "@/components/LanguageBreakdown";
+import CommitTimeChart from "@/components/CommitTimeChart";
+import IssueMetrics from "@/components/IssueMetrics";
+import StreakAtRiskBanner from "@/components/StreakAtRiskBanner";
+import FriendComparison from "@/components/FriendComparison";
+import WeeklySummaryCard from "@/components/WeeklySummaryCard";
+import ExportButton from "@/components/ExportButton";
+import PersonalRecords from "@/components/PersonalRecords";
+import WidgetErrorBoundary from "@/components/WidgetErrorBoundary";
+
+export default function DashboardWidgets() {
+  return (
+    <>
+      <WidgetErrorBoundary>
+        <DashboardHeader />
+      </WidgetErrorBoundary>
+
+      <div className="mb-6 flex justify-end">
+        <WidgetErrorBoundary>
+          <ExportButton />
+        </WidgetErrorBoundary>
+      </div>
+
+      <WidgetErrorBoundary>
+        <StreakAtRiskBanner />
+      </WidgetErrorBoundary>
+
+      <WidgetErrorBoundary>
+        <WeeklySummaryCard />
+      </WidgetErrorBoundary>
+
+      <div className="mb-6">
+        <WidgetErrorBoundary>
+          <PersonalRecords />
+        </WidgetErrorBoundary>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <WidgetErrorBoundary>
+            <ContributionGraph />
+          </WidgetErrorBoundary>
+
+          <div className="mt-6">
+            <WidgetErrorBoundary>
+              <ContributionHeatmap />
+            </WidgetErrorBoundary>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <WidgetErrorBoundary>
+            <StreakTracker />
+          </WidgetErrorBoundary>
+
+          <WidgetErrorBoundary>
+            <FriendComparison />
+          </WidgetErrorBoundary>
+        </div>
+      </div>
+
+      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <WidgetErrorBoundary>
+          <PRMetrics />
+        </WidgetErrorBoundary>
+
+        <WidgetErrorBoundary>
+          <PRBreakdownChart />
+        </WidgetErrorBoundary>
+
+        <WidgetErrorBoundary>
+          <CommitTimeChart />
+        </WidgetErrorBoundary>
+      </div>
+
+      <div className="mt-6">
+        <WidgetErrorBoundary>
+          <IssueMetrics />
+        </WidgetErrorBoundary>
+      </div>
+
+      <div className="mt-6">
+        <WidgetErrorBoundary>
+          <PinnedRepos />
+        </WidgetErrorBoundary>
+      </div>
+
+      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <WidgetErrorBoundary>
+          <TopRepos />
+        </WidgetErrorBoundary>
+
+        <WidgetErrorBoundary>
+          <LanguageBreakdown />
+        </WidgetErrorBoundary>
+
+        <WidgetErrorBoundary>
+          <GoalTracker />
+        </WidgetErrorBoundary>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/TopRepos.tsx b/src/components/TopRepos.tsx
index 2bc9756..4f086cd 100644
--- a/src/components/TopRepos.tsx
+++ b/src/components/TopRepos.tsx
@@ -95,7 +95,8 @@ export default function TopRepos() {
       : b.commits - a.commits;
   });
 
-  const maxCommits = sortedRepos[0]?.commits ?? 1;
+  const maxCommits = repos[0]?.commits ?? 1;
+  // throw new Error("Test widget crash");
 
   return (
     <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
diff --git a/src/components/WidgetErrorBoundary.tsx b/src/components/WidgetErrorBoundary.tsx
new file mode 100644
index 0000000..c318f9b
--- /dev/null
+++ b/src/components/WidgetErrorBoundary.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React, { Component, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class WidgetErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      hasError: false,
+    };
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    return {
+      hasError: true,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Widget crashed:", error, errorInfo);
+  }
+
+  handleRetry = () => {
+    this.setState({
+      hasError: false,
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="rounded-xl border border-red-500/20 bg-red-500/10 p-4 text-center">
+          <h2 className="mb-2 text-lg font-semibold">
+            Something went wrong
+          </h2>
+
+          <p className="mb-4 text-sm text-gray-400">
+            This widget failed to load.
+          </p>
+
+          <button
+            onClick={this.handleRetry}
+            className="rounded-lg bg-white px-4 py-2 text-black transition hover:opacity-80"
+          >
+            Retry
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default WidgetErrorBoundary;
\ No newline at end of file