diff --git a/src/components/TransactionHistory.js b/src/components/TransactionHistory.js
index 9843a53..e375a27 100644
--- a/src/components/TransactionHistory.js
+++ b/src/components/TransactionHistory.js
@@ -70,9 +70,9 @@ const TransactionHistory = ({
                 <div className="flex items-start gap-3 mb-2 sm:mb-0">
                     <div className={`p-2 rounded-lg ${isSubscription ? 'bg-[var(--purple-lavender)] bg-opacity-20' : 'bg-[var(--orange-light)] bg-opacity-20'}`}>
                         {isSubscription ? (
-                            <CreditCard className="h-5 w-5 text-[var(--purple-lavender)]" />
+                            <CreditCard className="h-5 w-5 text-white" />
                         ) : (
-                            <Heart className="h-5 w-5 text-[var(--orange-light)]" />
+                            <Heart className="h-5 w-5 text-white" />
                         )}
                     </div>
                     <div className="flex-1">
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index ee8ad38..6b74a27 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -9,6 +9,8 @@ import Navbar from '../components/Navbar';
 import MemberFooter from '../components/MemberFooter';
 import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale, Receipt, Heart, CreditCard } from 'lucide-react';
 import { toast } from 'sonner';
+import TransactionHistory from '../components/TransactionHistory';
+
 
 const Dashboard = () => {
   const { user, resendVerificationEmail, refreshUser } = useAuth();
@@ -17,12 +19,15 @@ const Dashboard = () => {
   const [resendLoading, setResendLoading] = useState(false);
   const [eventActivity, setEventActivity] = useState(null);
   const [activityLoading, setActivityLoading] = useState(true);
+  const [transactionsLoading, setTransactionsLoading] = useState(true);
+  const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
   const [activeTransactionTab, setActiveTransactionTab] = useState('all');
   const joinedDate = user?.member_since || user?.created_at;
 
   useEffect(() => {
     fetchUpcomingEvents();
     fetchEventActivity();
+    fetchTransactions();
   }, []);
 
   const fetchUpcomingEvents = async () => {
@@ -48,6 +53,19 @@ const Dashboard = () => {
     }
   };
 
+  const fetchTransactions = async () => {
+    try {
+      setTransactionsLoading(true);
+      const response = await api.get('/members/transactions');
+      setTransactions(response.data);
+    } catch (error) {
+      console.error('Failed to load transactions:', error);
+      // Don't show error toast - transactions are optional
+    } finally {
+      setTransactionsLoading(false);
+    }
+  };
+
   const handleResendVerification = async () => {
     setResendLoading(true);
     try {
@@ -72,6 +90,7 @@ const Dashboard = () => {
     }
   };
 
+
   const getStatusBadge = (status) => {
     const statusConfig = {
       pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
@@ -183,67 +202,57 @@ const Dashboard = () => {
         {/* Grid Layout */}
         <div className="grid lg:grid-cols-2 gap-8">
           {/* Quick Stats */}
-          <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
-            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Quick Info
-            </h3>
-            <div className="space-y-4">
-              <div>
-                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
-                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
-              </div>
-              <div>
-                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
-                <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
-              </div>
-              <div>
-                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
-                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
-                </p>
-              </div>
-              {user?.subscription_start_date && user?.subscription_end_date && (
-                <>
-                  <div className="pt-4 border-t border-[var(--neutral-800)]">
-                    <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
-                    <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
-                    </p>
-                  </div>
-                  <div>
-                    <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
-                    <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
-                    </p>
-                  </div>
-                </>
-              )}
-            </div>
-          </Card>
-          <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
-            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Membership Info
-            </h3>
-            <div className="space-y-4">
+          <div className='space-y-8'>
 
-              {user?.subscription_start_date && user?.subscription_end_date && (
-                <>
-                  <div className="pt-4 border-t border-[var(--neutral-800)]">
-                    <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
-                    <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
-                    </p>
-                  </div>
-                  <div>
-                    <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
-                    <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
-                    </p>
-                  </div>
-                </>
-              )}
-            </div>
-          </Card>
+            <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
+              <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                Quick Info
+              </h3>
+              <div className="space-y-4">
+                <div>
+                  <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                  <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
+                  <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
+                  <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
+                  </p>
+                </div>
+
+              </div>
+            </Card>
+            <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
+              <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                Membership Info
+              </h3>
+              <div className="space-y-4">
+                {!user.subscription_end_date && !user.subscription_end_date && (
+                  <div>No subscriptions yet</div>
+                )}
+                {user?.subscription_start_date && user?.subscription_end_date && (
+                  <>
+                    <div className="pt-4 border-t border-[var(--neutral-800)]">
+                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
+                      <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
+                      <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
+                      </p>
+                    </div>
+                  </>
+                )}
+              </div>
+            </Card>
+          </div>
 
           {/* Upcoming Events */}
           <Card className="lg:col-span-1 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="upcoming-events-card">
@@ -337,127 +346,16 @@ const Dashboard = () => {
         )}
 
         {/* Transaction History Section */}
-        <Card className="mt-12 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          {/* Header */}
-          <div className="flex items-center gap-3 mb-6">
-            <div className="p-2 bg-[var(--green-light)] rounded-lg">
-              <Receipt className="h-5 w-5 text-white" />
-            </div>
-            <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Transaction History
-            </h2>
-          </div>
-
-          {/* Stats Row */}
-          <div className="grid grid-cols-2 gap-4 mb-6">
-            <div className="p-4 bg-[var(--lavender-300)]/30 rounded-xl border border-[var(--neutral-800)]">
-              <div className="flex items-center gap-2 mb-2">
-                <CreditCard className="h-4 w-4 text-[var(--green-light)]" />
-                <span className="text-sm text-[var(--green-light)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Total Subscriptions
-                </span>
-              </div>
-              <p className="text-3xl font-bold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                $30.00
-              </p>
-              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                1 payment(s)
-              </p>
-            </div>
-            <div className="p-4 bg-[var(--lavender-300)]/30 rounded-xl border border-[var(--neutral-800)]">
-              <div className="flex items-center gap-2 mb-2">
-                <Heart className="h-4 w-4 text-[var(--coral)]" />
-                <span className="text-sm text-[var(--coral)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Total Donations
-                </span>
-              </div>
-              <p className="text-3xl font-bold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                $0.00
-              </p>
-              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                0 donation(s)
-              </p>
-            </div>
-          </div>
-
-          {/* Filter Tabs */}
-          <div className="flex gap-2 mb-6">
-            <button
-              onClick={() => setActiveTransactionTab('all')}
-              className={`px-6 py-2 rounded-full font-medium transition-all ${
-                activeTransactionTab === 'all'
-                  ? 'bg-[var(--purple-lavender)] text-white'
-                  : 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
-              }`}
-              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-            >
-              All (1)
-            </button>
-            <button
-              onClick={() => setActiveTransactionTab('subscriptions')}
-              className={`px-6 py-2 rounded-full font-medium transition-all ${
-                activeTransactionTab === 'subscriptions'
-                  ? 'bg-[var(--purple-lavender)] text-white'
-                  : 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
-              }`}
-              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-            >
-              Subscriptions (1)
-            </button>
-            <button
-              onClick={() => setActiveTransactionTab('donations')}
-              className={`px-6 py-2 rounded-full font-medium transition-all ${
-                activeTransactionTab === 'donations'
-                  ? 'bg-[var(--purple-lavender)] text-white'
-                  : 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
-              }`}
-              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-            >
-              Donations (0)
-            </button>
-          </div>
-
-          {/* Transaction List */}
-          <div className="space-y-4">
-            {(activeTransactionTab === 'all' || activeTransactionTab === 'subscriptions') && (
-              <div className="flex items-center justify-between p-4 border border-[var(--neutral-800)] rounded-xl">
-                <div className="flex items-center gap-4">
-                  <div className="w-12 h-12 bg-[var(--purple-lavender)] rounded-lg"></div>
-                  <div>
-                    <div className="flex items-center gap-2 mb-1">
-                      <span className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        Annual Membership
-                      </span>
-                      <Badge className="bg-[var(--green-light)] text-white text-xs px-2 py-0.5 rounded">
-                        active
-                      </Badge>
-                    </div>
-                    <div className="flex items-center gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      <Calendar className="h-3.5 w-3.5" />
-                      <span>Dec 16, 2025</span>
-                      <span>•</span>
-                      <span>Custom</span>
-                    </div>
-                    <span className="text-sm text-[var(--coral)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      Manual Payment
-                    </span>
-                  </div>
-                </div>
-                <span className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  $30.00
-                </span>
-              </div>
-            )}
-            {activeTransactionTab === 'donations' && (
-              <div className="text-center py-8">
-                <Heart className="h-12 w-12 text-[var(--neutral-800)] mx-auto mb-3" />
-                <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  No donations yet
-                </p>
-              </div>
-            )}
-          </div>
-        </Card>
+        <div className="mt-8">
+          <TransactionHistory
+            subscriptions={transactions.subscriptions}
+            donations={transactions.donations}
+            totalSubscriptionCents={transactions.total_subscription_amount_cents}
+            totalDonationCents={transactions.total_donation_amount_cents}
+            loading={transactionsLoading}
+            isAdmin={false}
+          />
+        </div>
 
       </div>
       <MemberFooter />
diff --git a/src/pages/admin/AdminFinancials.js b/src/pages/admin/AdminFinancials.js
index d29bc67..7838efd 100644
--- a/src/pages/admin/AdminFinancials.js
+++ b/src/pages/admin/AdminFinancials.js
@@ -191,10 +191,9 @@ const AdminFinancials = () => {
         <div className="space-y-4">
           {reports.map(report => (
             <Card key={report.id} className="p-6">
-              <div className="flex items-center gap-6">
-                <div className="bg-light-lavender p-4 rounded-xl min-w-[100px] text-center">
-                  <DollarSign className="h-6 w-6 mx-auto mb-1" />
-                  <div className="text-2xl font-bold">{report.year}</div>
+              <div className="flex items-center gap-3">
+                <div className="bg-light-lavender p-3 rounded-xl self-center">
+                  <DollarSign className="size-8 " />
                 </div>
                 <div className="flex-1">
                   <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
diff --git a/src/pages/admin/AdminNewsletters.js b/src/pages/admin/AdminNewsletters.js
index 479a6fb..bb4a565 100644
--- a/src/pages/admin/AdminNewsletters.js
+++ b/src/pages/admin/AdminNewsletters.js
@@ -223,10 +223,13 @@ const AdminNewsletters = () => {
                 <Calendar className="h-5 w-5" />
                 {year}
               </h2>
-              <div className="grid gap-4">
+              <div className="grid gap-3">
                 {groupedNewsletters[year].map(newsletter => (
                   <Card key={newsletter.id} className="p-6">
-                    <div className="flex items-start justify-between">
+                    <div className="flex items-start justify-between ">
+                      <div className="bg-light-lavender p-3 mr-4 rounded-xl self-center">
+                        <FileText className="size-8 " />
+                      </div>
                       <div className="flex-1">
                         <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
                           {newsletter.title}
diff --git a/src/pages/members/NewsletterArchive.js b/src/pages/members/NewsletterArchive.js
index 9febb0a..48513bc 100644
--- a/src/pages/members/NewsletterArchive.js
+++ b/src/pages/members/NewsletterArchive.js
@@ -167,9 +167,9 @@ export default function NewsletterArchive() {
                   {groupedNewsletters[year].map(newsletter => (
                     <Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
                       <div className="flex items-start gap-4">
-                       <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl">
-                <FileText className="h-8 w-8 text-white" />
-              </div>
+                        <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl">
+                          <FileText className="h-8 w-8 text-white" />
+                        </div>
                         <div className="flex-1 min-w-0">
                           <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {newsletter.title}