diff --git a/app/api/docs/SwaggerUIWrapper.tsx b/app/api/docs/SwaggerUIWrapper.tsx
index e01affa..8b5c289 100644
--- a/app/api/docs/SwaggerUIWrapper.tsx
+++ b/app/api/docs/SwaggerUIWrapper.tsx
@@ -113,7 +113,7 @@ export default function SwaggerUIWrapper({ specUrl }: SwaggerUIWrapperProps) {
                 RemitWise API Documentation
               </h2>
               <p className="text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
-                Complete reference for integrating with RemitWise's remittance and financial planning services. 
+                Complete reference for integrating with RemitWise&apos;s remittance and financial planning services. 
                 Build secure, scalable applications with our comprehensive API.
               </p>
               <div className="flex flex-wrap gap-4">
diff --git a/app/api/v1/admin/webhooks/dlq/route.ts b/app/api/v1/admin/webhooks/dlq/route.ts
index da481cc..b69a688 100644
--- a/app/api/v1/admin/webhooks/dlq/route.ts
+++ b/app/api/v1/admin/webhooks/dlq/route.ts
@@ -41,7 +41,7 @@ export async function GET(request: NextRequest) {
     return NextResponse.json({
       success: true,
       data: {
-        events: dlqData.items.map((event) => ({
+        events: dlqData.items.map((event: any) => ({
           id: event.id,
           source: event.source,
           eventType: event.eventType,
diff --git a/app/dashboard/goals/components/SavingsGoalModal.tsx b/app/dashboard/goals/components/SavingsGoalModal.tsx
new file mode 100644
index 0000000..d7d59bc
--- /dev/null
+++ b/app/dashboard/goals/components/SavingsGoalModal.tsx
@@ -0,0 +1,300 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { 
+  X, 
+  GraduationCap, 
+  HeartPulse, 
+  Home, 
+  Plane,
+  AlertCircle
+} from 'lucide-react'
+import { SavingsGoal, SavingsGoalFormData } from '../types'
+import { 
+  validateGoalName, 
+  validateGoalDescription,
+  validateAmount, 
+  validateFutureDate 
+} from '@/lib/validation/savings-goals'
+import { useClientTranslator } from '@/lib/i18n/client'
+
+interface SavingsGoalModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (goalData: Partial<SavingsGoal>) => void
+  editingGoal: SavingsGoal | null
+}
+
+const ICONS = [
+  { type: 'education', icon: <GraduationCap className="w-6 h-6" />, gradient: { from: '#DC2626', to: '#B91C1C' } },
+  { type: 'medical', icon: <HeartPulse className="w-6 h-6" />, gradient: { from: '#F87171', to: '#EF4444' } },
+  { type: 'home', icon: <Home className="w-6 h-6" />, gradient: { from: '#DC2626', to: '#B91C1C' } },
+  { type: 'vacation', icon: <Plane className="w-6 h-6" />, gradient: { from: '#F87171', to: '#EF4444' } },
+] as const
+
+export default function SavingsGoalModal({
+  isOpen,
+  onClose,
+  onSave,
+  editingGoal,
+}: SavingsGoalModalProps) {
+  const { t } = useClientTranslator()
+  const [formData, setFormData] = useState<SavingsGoalFormData>({
+    title: '',
+    description: '',
+    targetAmount: 0,
+    targetDate: '',
+    iconType: 'education',
+  })
+
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (editingGoal) {
+      // Find iconType from icon or title if possible, else default
+      let iconType: SavingsGoalFormData['iconType'] = 'education'
+      if (editingGoal.title.toLowerCase().includes('medical') || editingGoal.title.toLowerCase().includes('health')) iconType = 'medical'
+      else if (editingGoal.title.toLowerCase().includes('home') || editingGoal.title.toLowerCase().includes('house')) iconType = 'home'
+      else if (editingGoal.title.toLowerCase().includes('vacation') || editingGoal.title.toLowerCase().includes('trip')) iconType = 'vacation'
+
+      setFormData({
+        title: editingGoal.title,
+        description: editingGoal.description,
+        targetAmount: editingGoal.targetAmount,
+        targetDate: editingGoal.targetDate,
+        iconType,
+      })
+    } else {
+      setFormData({
+        title: '',
+        description: '',
+        targetAmount: 0,
+        targetDate: '',
+        iconType: 'education',
+      })
+    }
+    setErrors({})
+  }, [editingGoal, isOpen])
+
+  // Focus trap and ESC key
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'Tab') {
+        const focusableElements = modalRef.current?.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        )
+        if (!focusableElements) return
+        
+        const firstElement = focusableElements[0] as HTMLElement
+        const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement
+
+        if (e.shiftKey) {
+          if (document.activeElement === firstElement) {
+            lastElement.focus()
+            e.preventDefault()
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            firstElement.focus()
+            e.preventDefault()
+          }
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {}
+    
+    const titleVal = validateGoalName(formData.title)
+    if (!titleVal.isValid) newErrors.title = titleVal.error ? t(`errors.${titleVal.error}`) : t('errors.invalid_name')
+
+    const descVal = validateGoalDescription(formData.description)
+    if (!descVal.isValid) newErrors.description = descVal.error ? t(`errors.${descVal.error}`) : t('errors.goal_description_invalid')
+    
+    const amountVal = validateAmount(formData.targetAmount)
+    if (!amountVal.isValid) newErrors.targetAmount = amountVal.error ? t(`errors.${amountVal.error}`) : t('errors.invalid_amount')
+    
+    const dateVal = validateFutureDate(formData.targetDate)
+    if (!dateVal.isValid) newErrors.targetDate = dateVal.error ? t(`errors.${dateVal.error}`) : t('errors.goal_invalid_date')
+    
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (validate()) {
+      const selectedIcon = ICONS.find(i => i.type === formData.iconType) || ICONS[0]
+      onSave({
+        title: formData.title,
+        description: formData.description,
+        targetAmount: formData.targetAmount,
+        targetDate: formData.targetDate,
+        icon: selectedIcon.icon,
+        iconGradient: selectedIcon.gradient,
+      })
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4 backdrop-blur-sm motion-reduce:backdrop-blur-none"
+      onClick={onClose}
+    >
+      <div
+        ref={modalRef}
+        className="rounded-2xl p-6 375:p-8 max-w-lg w-full mx-4 shadow-2xl relative motion-safe:animate-slide-in-bottom motion-reduce:animate-none"
+        style={{
+          background: 'linear-gradient(180deg, #0F0F0F 0%, #0A0A0A 100%)',
+          border: '1px solid rgba(255, 255, 255, 0.08)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+      >
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 p-2 text-white/50 hover:text-white transition-colors motion-reduce:transition-none"
+          aria-label="Close modal"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <h2 id="modal-title" className="text-xl 375:text-2xl font-bold text-white mb-6">
+          {editingGoal ? t('savingsGoals.modal.editTitle') : t('savingsGoals.modal.createTitle')}
+        </h2>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {/* Goal Title */}
+          <div className="space-y-2">
+            <label htmlFor="title" className="text-sm font-medium text-white/70">
+              {t('savingsGoals.modal.titleLabel')}
+            </label>
+            <input
+              id="title"
+              type="text"
+              value={formData.title}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              className={`w-full rounded-xl bg-white/5 border ${errors.title ? 'border-red-500' : 'border-white/10'} px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-all motion-reduce:transition-none`}
+              placeholder={t('savingsGoals.modal.titlePlaceholder')}
+              autoFocus
+            />
+            {errors.title && (
+              <p className="text-xs text-red-500 flex items-center gap-1">
+                <AlertCircle className="w-3 h-3" /> {errors.title}
+              </p>
+            )}
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2">
+            <label htmlFor="description" className="text-sm font-medium text-white/70">
+              {t('savingsGoals.modal.descriptionLabel')}
+            </label>
+            <textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              className={`w-full rounded-xl bg-white/5 border ${errors.description ? 'border-red-500' : 'border-white/10'} px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-all motion-reduce:transition-none resize-none h-20`}
+              placeholder={t('savingsGoals.modal.descriptionPlaceholder')}
+            />
+            {errors.description && (
+              <p className="text-xs text-red-500 flex items-center gap-1">
+                <AlertCircle className="w-3 h-3" /> {errors.description}
+              </p>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+            {/* Target Amount */}
+            <div className="space-y-2">
+              <label htmlFor="targetAmount" className="text-sm font-medium text-white/70">
+                {t('savingsGoals.modal.amountLabel')}
+              </label>
+              <input
+                id="targetAmount"
+                type="number"
+                value={formData.targetAmount || ''}
+                onChange={(e) => setFormData({ ...formData, targetAmount: parseFloat(e.target.value) || 0 })}
+                className={`w-full rounded-xl bg-white/5 border ${errors.targetAmount ? 'border-red-500' : 'border-white/10'} px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-all motion-reduce:transition-none`}
+                placeholder="0.00"
+                step="0.01"
+              />
+              {errors.targetAmount && (
+                <p className="text-xs text-red-500 flex items-center gap-1">
+                  <AlertCircle className="w-3 h-3" /> {errors.targetAmount}
+                </p>
+              )}
+            </div>
+
+            {/* Target Date */}
+            <div className="space-y-2">
+              <label htmlFor="targetDate" className="text-sm font-medium text-white/70">
+                {t('savingsGoals.modal.dateLabel')}
+              </label>
+              <input
+                id="targetDate"
+                type="date"
+                value={formData.targetDate}
+                onChange={(e) => setFormData({ ...formData, targetDate: e.target.value })}
+                className={`w-full rounded-xl bg-white/5 border ${errors.targetDate ? 'border-red-500' : 'border-white/10'} px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-all motion-reduce:transition-none`}
+              />
+              {errors.targetDate && (
+                <p className="text-xs text-red-500 flex items-center gap-1">
+                  <AlertCircle className="w-3 h-3" /> {errors.targetDate}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Icon Selector */}
+          <div className="space-y-3">
+            <label className="text-sm font-medium text-white/70">{t('savingsGoals.modal.iconLabel')}</label>
+            <div className="flex gap-4">
+              {ICONS.map((iconOption) => (
+                <button
+                  key={iconOption.type}
+                  type="button"
+                  onClick={() => setFormData({ ...formData, iconType: iconOption.type })}
+                  className={`w-12 h-12 rounded-xl flex items-center justify-center transition-all motion-reduce:transition-none ${
+                    formData.iconType === iconOption.type 
+                      ? 'ring-2 ring-white ring-offset-2 ring-offset-[#0A0A0A] scale-110 motion-reduce:scale-100' 
+                      : 'opacity-50 hover:opacity-100'
+                  }`}
+                  style={{
+                    background: `linear-gradient(180deg, ${iconOption.gradient.from} 0%, ${iconOption.gradient.to} 100%)`,
+                  }}
+                >
+                  <div className="text-white">{iconOption.icon}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="pt-4">
+            <button
+              type="submit"
+              className="touch-target-wide w-full rounded-xl py-4 text-base font-bold text-white shadow-lg transition-all motion-reduce:transition-none hover:brightness-110 active:scale-[0.98] motion-reduce:active:scale-100"
+              style={{
+                background: 'linear-gradient(180deg, #DC2626 0%, #B91C1C 100%)',
+              }}
+            >
+              {editingGoal ? t('savingsGoals.editGoal') : t('savingsGoals.createGoal')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/app/dashboard/goals/components/SavingsGoalsStatsCards.tsx b/app/dashboard/goals/components/SavingsGoalsStatsCards.tsx
index c55da3f..2e70cc8 100644
--- a/app/dashboard/goals/components/SavingsGoalsStatsCards.tsx
+++ b/app/dashboard/goals/components/SavingsGoalsStatsCards.tsx
@@ -1,4 +1,5 @@
 import { Target, DollarSign, TrendingUp } from 'lucide-react'
+import { useClientTranslator } from '@/lib/i18n/client'
 
 interface StatsCardProps {
     label: string
@@ -43,6 +44,8 @@ export default function SavingsGoalsStatsCards({
     totalTarget = 48000,
     totalSaved = 26500,
 }: SavingsGoalsStatsCardsProps) {
+    const { t } = useClientTranslator()
+    
     const formatCurrency = (amount: number): string => {
         return new Intl.NumberFormat('en-US', {
             style: 'currency',
@@ -55,17 +58,17 @@ export default function SavingsGoalsStatsCards({
     return (
         <div className="grid grid-cols-1 375:grid-cols-2 tablet:grid-cols-3 gap-4 375:gap-5">
             <StatsCard
-                label="Total Goals"
+                label={t('savingsGoals.stats.totalGoals')}
                 value={String(totalGoals)}
                 icon={<Target className="w-6 h-6" />}
             />
             <StatsCard
-                label="Total Target"
+                label={t('savingsGoals.stats.totalTarget')}
                 value={formatCurrency(totalTarget)}
                 icon={<DollarSign className="w-6 h-6" />}
             />
             <StatsCard
-                label="Total Saved"
+                label={t('savingsGoals.stats.totalSaved')}
                 value={formatCurrency(totalSaved)}
                 icon={<TrendingUp className="w-6 h-6" />}
             />
diff --git a/app/dashboard/goals/page.tsx b/app/dashboard/goals/page.tsx
index 69ec500..197ea10 100644
--- a/app/dashboard/goals/page.tsx
+++ b/app/dashboard/goals/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import {
   GraduationCap,
   HeartPulse,
@@ -10,9 +10,13 @@ import {
 import PageHeader from '@/components/PageHeader'
 import SavingsGoalCard from '@/components/Dashboard/SavingsGoalCard'
 import SavingsGoalsStatsCards from './components/SavingsGoalsStatsCards'
+import SavingsGoalModal from './components/SavingsGoalModal'
+import { SavingsGoal } from './types'
+import { calculateDaysLeft, checkIsOverdue } from './utils'
+import { useClientTranslator } from '@/lib/i18n/client'
 
 // Sample data matching Figma design
-const goalsData = [
+const initialGoals: SavingsGoal[] = [
   {
     id: 1,
     title: "Children's Education",
@@ -21,9 +25,7 @@ const goalsData = [
     iconGradient: { from: '#DC2626', to: '#B91C1C' },
     currentAmount: 3600,
     targetAmount: 5000,
-    targetDate: 'Dec 31, 2025',
-    daysLeft: 335,
-    isOverdue: false,
+    targetDate: '2026-12-31',
   },
   {
     id: 2,
@@ -33,9 +35,7 @@ const goalsData = [
     iconGradient: { from: '#F87171', to: '#EF4444' },
     currentAmount: 1800,
     targetAmount: 2000,
-    targetDate: 'Mar 15, 2025',
-    daysLeft: 44,
-    isOverdue: false,
+    targetDate: '2026-08-15',
   },
   {
     id: 3,
@@ -45,8 +45,7 @@ const goalsData = [
     iconGradient: { from: '#DC2626', to: '#B91C1C' },
     currentAmount: 8500,
     targetAmount: 25000,
-    targetDate: 'Jan 15, 2025',
-    isOverdue: true,
+    targetDate: '2026-05-15', // This will be overdue as of June 17, 2026
   },
   {
     id: 4,
@@ -56,36 +55,56 @@ const goalsData = [
     iconGradient: { from: '#F87171', to: '#EF4444' },
     currentAmount: 3000,
     targetAmount: 3000,
-    targetDate: 'Jul 1, 2025',
-    isOverdue: false,
+    targetDate: '2026-07-01',
   },
 ]
 
-// Calculate summary stats
-const totalGoals = goalsData.length
-const totalTarget = goalsData.reduce((sum, goal) => sum + goal.targetAmount, 0)
-const totalSaved = goalsData.reduce((sum, goal) => sum + goal.currentAmount, 0)
+export default function SavingsGoalsPage() {
+  const { t } = useClientTranslator()
+  const [goals, setGoals] = useState<SavingsGoal[]>(initialGoals)
+  const [showModal, setShowModal] = useState(false)
+  const [editingGoal, setEditingGoal] = useState<SavingsGoal | null>(null)
 
-function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
-  }).format(amount)
-}
+  // Calculate summary stats dynamically
+  const stats = useMemo(() => {
+    const totalGoals = goals.length
+    const totalTarget = goals.reduce((sum, goal) => sum + goal.targetAmount, 0)
+    const totalSaved = goals.reduce((sum, goal) => sum + goal.currentAmount, 0)
+    return { totalGoals, totalTarget, totalSaved }
+  }, [goals])
 
-export default function SavingsGoalsPage() {
-  const [showNewGoalModal, setShowNewGoalModal] = useState(false)
+  const handleNewGoal = () => {
+    setEditingGoal(null)
+    setShowModal(true)
+  }
+
+  const handleEditGoal = (goal: SavingsGoal) => {
+    setEditingGoal(goal)
+    setShowModal(true)
+  }
+
+  const handleSaveGoal = (goalData: Partial<SavingsGoal>) => {
+    if (editingGoal) {
+      setGoals(goals.map(g => g.id === editingGoal.id ? { ...g, ...goalData } as SavingsGoal : g))
+    } else {
+      const newGoal: SavingsGoal = {
+        ...goalData,
+        id: Date.now(),
+        currentAmount: 0,
+      } as SavingsGoal
+      setGoals([...goals, newGoal])
+    }
+    setShowModal(false)
+  }
 
   return (
     <div className="min-h-screen bg-[#010101] safari-safe-bottom">
       {/* Header */}
       <PageHeader
-        title="Savings Goals"
-        subtitle="Track and achieve your financial dreams"
-        ctaLabel="New Goal"
-        onCtaClick={() => setShowNewGoalModal(true)}
+        title={t('savingsGoals.title')}
+        subtitle={t('savingsGoals.subtitle')}
+        ctaLabel={t('savingsGoals.newGoal')}
+        onCtaClick={handleNewGoal}
         showBottomDivider
       />
 
@@ -93,9 +112,9 @@ export default function SavingsGoalsPage() {
         {/* Savings Goals Stats Cards */}
         <div className="mb-7 375:mb-8">
           <SavingsGoalsStatsCards
-            totalGoals={totalGoals}
-            totalTarget={totalTarget}
-            totalSaved={totalSaved}
+            totalGoals={stats.totalGoals}
+            totalTarget={stats.totalTarget}
+            totalSaved={stats.totalSaved}
           />
         </div>
 
@@ -105,7 +124,7 @@ export default function SavingsGoalsPage() {
 
         {/* Goals Grid */}
         <div className="grid grid-cols-1 450:grid-cols-2 xl:grid-cols-3 gap-5 375:gap-6">
-          {goalsData.map((goal) => (
+          {goals.map((goal) => (
             <SavingsGoalCard
               key={goal.id}
               title={goal.title}
@@ -115,46 +134,23 @@ export default function SavingsGoalsPage() {
               currentAmount={goal.currentAmount}
               targetAmount={goal.targetAmount}
               targetDate={goal.targetDate}
-              daysLeft={goal.daysLeft}
-              isOverdue={goal.isOverdue}
+              daysLeft={calculateDaysLeft(goal.targetDate)}
+              isOverdue={checkIsOverdue(goal.targetDate)}
               onAddFunds={() => console.log('Add funds to', goal.title)}
-              onDetails={() => console.log('View details for', goal.title)}
+              onEdit={() => handleEditGoal(goal)}
             />
           ))}
         </div>
       </main>
 
-      {/* New Goal Modal Placeholder */}
-      {showNewGoalModal && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4"
-          onClick={() => setShowNewGoalModal(false)}
-        >
-          <div
-            className="rounded-2xl p-7 375:p-8 max-w-md w-full mx-4"
-            style={{
-              background: 'linear-gradient(180deg, #0F0F0F 0%, #0A0A0A 100%)',
-              border: '1px solid rgba(255, 255, 255, 0.08)',
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <h2 className="text-lg 375:text-xl font-bold text-white mb-4">Create New Goal</h2>
-            <p className="text-sm 375:text-base text-white/50 mb-6">
-              Goal creation form will be implemented here. Connect to savings_goals smart contract.
-            </p>
-            <button
-              type="button"
-              onClick={() => setShowNewGoalModal(false)}
-              className="touch-target-wide w-full rounded-[14px] text-sm 375:text-base font-semibold text-white"
-              style={{
-                background: 'linear-gradient(180deg, #DC2626 0%, #B91C1C 100%)',
-              }}
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      )}
+      {/* Savings Goal Modal */}
+      <SavingsGoalModal
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+        onSave={handleSaveGoal}
+        editingGoal={editingGoal}
+      />
     </div>
   )
 }
+
diff --git a/app/dashboard/goals/types.ts b/app/dashboard/goals/types.ts
new file mode 100644
index 0000000..c8f42db
--- /dev/null
+++ b/app/dashboard/goals/types.ts
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+export interface SavingsGoal {
+  id: number | string
+  title: string
+  description: string
+  icon: ReactNode
+  iconGradient: { from: string; to: string }
+  currentAmount: number
+  targetAmount: number
+  targetDate: string
+}
+
+export interface SavingsGoalFormData {
+  title: string
+  description: string
+  targetAmount: number
+  targetDate: string
+  iconType: 'education' | 'medical' | 'home' | 'vacation'
+}
diff --git a/app/dashboard/goals/utils.ts b/app/dashboard/goals/utils.ts
new file mode 100644
index 0000000..e8f58b3
--- /dev/null
+++ b/app/dashboard/goals/utils.ts
@@ -0,0 +1,31 @@
+/**
+ * Calculates the number of days left until a target date.
+ * Returns 0 if the date is today or in the past.
+ */
+export function calculateDaysLeft(targetDate: string): number {
+  const target = new Date(targetDate)
+  const today = new Date()
+  
+  // Set times to midnight for accurate day calculation
+  target.setHours(0, 0, 0, 0)
+  today.setHours(0, 0, 0, 0)
+  
+  const diffTime = target.getTime() - today.getTime()
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+  
+  return Math.max(0, diffDays)
+}
+
+/**
+ * Checks if a target date is in the past (overdue).
+ */
+export function checkIsOverdue(targetDate: string): boolean {
+  const target = new Date(targetDate)
+  const today = new Date()
+  
+  // Set times to midnight
+  target.setHours(0, 0, 0, 0)
+  today.setHours(0, 0, 0, 0)
+  
+  return target < today
+}
diff --git a/app/dashboard/insight/page.tsx b/app/dashboard/insight/page.tsx
index 89eaf63..2aa1632 100644
--- a/app/dashboard/insight/page.tsx
+++ b/app/dashboard/insight/page.tsx
@@ -1,4 +1,4 @@
-import SixMonthTrendsWidget from '@/components/dashboard/SixMonthTrendsWidget'
+import SixMonthTrendsWidget from '@/components/Dashboard/SixMonthTrendsWidget'
 export default function InsightPage() {
     return (
         <div
diff --git a/app/dashboard/transaction-history/page.tsx b/app/dashboard/transaction-history/page.tsx
index 6b261af..6dcc56a 100644
--- a/app/dashboard/transaction-history/page.tsx
+++ b/app/dashboard/transaction-history/page.tsx
@@ -53,7 +53,7 @@ const TransactionHistoryPage = () => {
     } finally {
       setLoading(false);
     }
-  }, [statusFilter]);
+  }, [statusFilter, t]);
 
   useEffect(() => {
     fetchTransactions(undefined, true);
diff --git a/app/insurance/page.tsx b/app/insurance/page.tsx
index eec4c19..e86d186 100644
--- a/app/insurance/page.tsx
+++ b/app/insurance/page.tsx
@@ -1,143 +1,21 @@
 "use client"
 import Link from 'next/link'
 import { ArrowLeft, Plus, Shield, Loader2, CalendarClock } from 'lucide-react'
-import PrimaryButton from '@/components/ui/PrimaryButton'
 import { ActionState } from '@/lib/auth/middleware';
 import { useFormAction } from '@/lib/hooks/useFormAction';
 import { getPolicyPaymentPresentation } from '@/lib/ui/status-semantics';
 import NewPolicyForm from '@/components/forms/NewPolicyForm';
 
 export default function Insurance() {
-
-    type AddInsuranceResponse = ActionState & { policyName?: string; coverageAmount?: number, monthlyPremium?: number, coverageType?: string };
+  type AddInsuranceResponse = ActionState & { 
+    policyName?: string; 
+    coverageAmount?: number; 
+    monthlyPremium?: number; 
+    coverageType?: string 
+  };
   
   const [state, formAction, pending] = useFormAction<AddInsuranceResponse>("/api/insurance");
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <header className="bg-white shadow-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              <Link href="/" className="text-gray-600 hover:text-gray-900">
-                <ArrowLeft className="w-5 h-5" />
-              </Link>
-              <h1 className="text-2xl font-bold text-gray-900">Micro-Insurance</h1>
-            </div>
-            <PrimaryButton
-              className="flex items-center gap-2"
-              disabled
-            >
-              <Plus className="w-5 h-5" />
-              <span>New Policy</span>
-            </PrimaryButton>
-            <p className="mt-1 text-sm text-gray-500">Policy creation will be available once contract integration is live.</p>
-          </div>
-        </div>
-      </header>
-
-      {/* New Policy Form */}
-      <NewPolicyForm pending={pending} state={state} formAction={formAction} />
-
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Active Policies */}
-        <div className="mb-8">
-          <h2 className="text-xl font-bold text-gray-900 mb-4">Active Policies</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <PolicyCard
-              name="Health Insurance"
-              coverageType="health"
-              monthlyPremium={20}
-              coverageAmount={1000}
-              nextPayment="2024-02-01"
-              active={true}
-            />
-            <PolicyCard
-              name="Emergency Coverage"
-              coverageType="emergency"
-              monthlyPremium={15}
-              coverageAmount={500}
-              nextPayment="2024-02-05"
-              active={true}
-            />
-          </div>
-function PolicyCard({ name, coverageType, monthlyPremium, coverageAmount, nextPayment, active }: { 
-  name: string, 
-  coverageType: string, 
-  monthlyPremium: number, 
-  coverageAmount: number, 
-  nextPayment: string,
-  active: boolean 
-}) {
-  const paymentStatus = getPolicyPaymentPresentation(nextPayment, active);
-  const StatusIcon = paymentStatus.icon;
-
-  return (
-    <div className="bg-white rounded-xl shadow-md p-6">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2">
-          <Shield className="w-5 h-5 text-blue-600" />
-          <h3 className="text-lg font-semibold text-gray-900">{name}</h3>
-        </div>
-        <span className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-semibold ${paymentStatus.badgeClassName}`}>
-          <StatusIcon className="h-3.5 w-3.5" />
-          <span>{paymentStatus.label}</span>
-        </span>
-      </div>
-
-      <div className="space-y-3">
-        <div className="flex justify-between text-sm">
-          <span className="text-gray-600">Coverage Type</span>
-          <span className="font-semibold text-gray-900 capitalize">{coverageType}</span>
-        </div>
-        <div className="flex justify-between text-sm">
-          <span className="text-gray-600">Monthly Premium</span>
-          <span className="font-semibold text-gray-900">${monthlyPremium}</span>
-        </div>
-        <div className="flex justify-between text-sm">
-          <span className="text-gray-600">Coverage Amount</span>
-          <span className="font-semibold text-gray-900">${coverageAmount}</span>
-        </div>
-        <div className="flex justify-between text-sm">
-          <span className="text-gray-600">Next Payment</span>
-          <span className="font-semibold text-gray-900">{nextPayment}</span>
-        </div>
-      </div>
 
-      <div className={`mt-4 rounded-lg border px-3 py-3 ${paymentStatus.panelClassName}`}>
-        <div className="flex items-start gap-2">
-          <StatusIcon className="mt-0.5 h-4 w-4 shrink-0" />
-          <div className="min-w-0">
-            <p className="text-sm font-semibold">{paymentStatus.label}</p>
-            <p className="text-sm">{paymentStatus.emphasis}</p>
-            <p className="mt-1 flex items-center gap-1 text-xs text-gray-700">
-              <CalendarClock className="h-3.5 w-3.5" />
-              <span>Next scheduled payment: {nextPayment}</span>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {active && (
-        <button
-          className="w-full mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition text-sm font-semibold"
-          disabled
-        >
-          Pay Premium Now
-"use client"
-import Link from 'next/link'
-import { ArrowLeft, Plus, Shield, Loader2, CalendarClock } from 'lucide-react'
-import PrimaryButton from '@/components/ui/PrimaryButton'
-import { ActionState } from '@/lib/auth/middleware';
-import { useFormAction } from '@/lib/hooks/useFormAction';
-import { getPolicyPaymentPresentation } from '@/lib/ui/status-semantics';
-import NewPolicyForm from '@/components/forms/NewPolicyForm';
-
-export default function Insurance() {
-
-    type AddInsuranceResponse = ActionState & { policyName?: string; coverageAmount?: number, monthlyPremium?: number, coverageType?: string };
-  
-  const [state, formAction, pending] = useFormAction<AddInsuranceResponse>("/api/insurance");
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Header */}
@@ -150,14 +28,16 @@ export default function Insurance() {
               </Link>
               <h1 className="text-2xl font-bold text-gray-900">Micro-Insurance</h1>
             </div>
-            <PrimaryButton
-              className="flex items-center gap-2"
-              disabled
-            >
-              <Plus className="w-5 h-5" />
-              <span>New Policy</span>
-            </PrimaryButton>
-            <p className="mt-1 text-sm text-gray-500">Policy creation will be available once contract integration is live.</p>
+            <div className="flex flex-col items-end">
+              <button
+                className="flex items-center justify-center gap-2 w-full sm:w-auto px-5 py-2.5 rounded-xl bg-red-600 hover:bg-red-500 bg-gradient-to-b from-red-600 to-red-700 text-white font-medium transition-colors shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled
+              >
+                <Plus className="w-5 h-5" />
+                <span>New Policy</span>
+              </button>
+              <p className="mt-1 text-sm text-gray-500">Policy creation will be available once contract integration is live.</p>
+            </div>
           </div>
         </div>
       </header>
@@ -193,13 +73,20 @@ export default function Insurance() {
   )
 }
 
-function PolicyCard({ name, coverageType, monthlyPremium, coverageAmount, nextPayment, active }: { 
-  name: string, 
-  coverageType: string, 
-  monthlyPremium: number, 
-  coverageAmount: number, 
-  nextPayment: string,
-  active: boolean 
+function PolicyCard({ 
+  name, 
+  coverageType, 
+  monthlyPremium, 
+  coverageAmount, 
+  nextPayment, 
+  active 
+}: { 
+  name: string; 
+  coverageType: string; 
+  monthlyPremium: number; 
+  coverageAmount: number; 
+  nextPayment: string;
+  active: boolean; 
 }) {
   const paymentStatus = getPolicyPaymentPresentation(nextPayment, active);
   const StatusIcon = paymentStatus.icon;
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index d60f4d0..f5e64f4 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -16,6 +16,7 @@ import {
   Smartphone,
 } from "lucide-react";
 import { useDensity } from "@/lib/context/DensityContext";
+import { useToast } from "@/lib/context/ToastContext";
 
 
 const SECTIONS = [
diff --git a/components/Bills/UnpaidBillsSection.tsx b/components/Bills/UnpaidBillsSection.tsx
index c8a3575..70e1528 100644
--- a/components/Bills/UnpaidBillsSection.tsx
+++ b/components/Bills/UnpaidBillsSection.tsx
@@ -37,10 +37,11 @@ export function UnpaidBillsSection() {
             {statusOrder.map((status) => {
                 const bills = billsByStatus[status] ?? [];
                 if (!bills.length) return null;
-                const headerStyles = {
+                const headerStyles: Record<string, string> = {
                     overdue: "text-red-400",
                     urgent: "text-amber-400",
                     upcoming: "text-white/60",
+                    paid: "text-green-400",
                 };
                 return (
                     <section key={status} className="mb-4">
diff --git a/components/Dashboard/SavingsGoalCard.tsx b/components/Dashboard/SavingsGoalCard.tsx
index 02c9431..cc8550d 100644
--- a/components/Dashboard/SavingsGoalCard.tsx
+++ b/components/Dashboard/SavingsGoalCard.tsx
@@ -9,6 +9,7 @@ import {
     Clock3,
     Sparkles,
 } from 'lucide-react'
+import { useClientTranslator } from '@/lib/i18n/client'
 
 export interface SavingsGoalCardProps {
     title: string
@@ -21,7 +22,7 @@ export interface SavingsGoalCardProps {
     daysLeft?: number
     isOverdue?: boolean
     onAddFunds?: () => void
-    onDetails?: () => void
+    onEdit?: () => void
 }
 
 function formatCurrency(amount: number): string {
@@ -52,8 +53,9 @@ export default function SavingsGoalCard({
     daysLeft,
     isOverdue = false,
     onAddFunds,
-    onDetails,
+    onEdit,
 }: SavingsGoalCardProps) {
+    const { t } = useClientTranslator()
     const percentage = targetAmount > 0 ? Math.min((currentAmount / targetAmount) * 100, 100) : 0
     const remaining = Math.max(targetAmount - currentAmount, 0)
     const isComplete = !isOverdue && percentage >= 100
@@ -69,28 +71,28 @@ export default function SavingsGoalCard({
 
     const statusStyles = {
         overdue: {
-            label: 'Overdue',
+            label: t('savingsGoals.card.overdue'),
             icon: AlertTriangle,
             background: 'rgba(220, 38, 38, 0.18)',
             border: 'rgba(220, 38, 38, 0.35)',
             text: '#FCA5A5',
         },
         complete: {
-            label: 'Completed',
+            label: t('savingsGoals.card.complete'),
             icon: CheckCircle2,
             background: 'rgba(16, 185, 129, 0.16)',
             border: 'rgba(34, 197, 94, 0.28)',
             text: '#A7F3D0',
         },
         'near-complete': {
-            label: 'Almost there',
+            label: t('savingsGoals.card.nearComplete'),
             icon: Sparkles,
             background: 'rgba(245, 158, 11, 0.18)',
             border: 'rgba(245, 158, 11, 0.3)',
             text: '#FCD34D',
         },
         'on-track': {
-            label: 'On track',
+            label: t('savingsGoals.card.onTrack'),
             icon: Clock3,
             background: 'rgba(56, 189, 248, 0.18)',
             border: 'rgba(56, 189, 248, 0.3)',
@@ -99,12 +101,12 @@ export default function SavingsGoalCard({
     }[state]
 
     const targetInfoLabel = isOverdue
-        ? 'Overdue'
+        ? t('savingsGoals.card.overdue')
         : isComplete
-        ? 'Goal met'
+        ? t('savingsGoals.card.goalMet')
         : daysLeft !== undefined
-        ? `${daysLeft} days left`
-        : 'No deadline'
+        ? t('savingsGoals.card.daysLeft', { count: daysLeft })
+        : t('savingsGoals.card.noDeadline')
 
     return (
         <div
@@ -144,8 +146,8 @@ export default function SavingsGoalCard({
                 </div>
 
                 <div className="space-y-1">
-                    <h3 className="text-lg font-bold text-white tracking-tight">{title}</h3>
-                    <p className="text-sm tracking-tight text-white/60">{description}</p>
+                    <h3 className="text-lg font-bold text-white tracking-tight line-clamp-1">{title}</h3>
+                    <p className="text-sm tracking-tight text-white/60 line-clamp-2">{description}</p>
                 </div>
 
                 <div className="grid gap-4 sm:grid-cols-[1.3fr_0.9fr]">
@@ -160,12 +162,12 @@ export default function SavingsGoalCard({
                         </div>
                         <div className="text-sm font-semibold text-white/70">
                             {isComplete
-                                ? 'All set — target reached'
-                                : `Need ${formatCurrency(remaining)} more`}
+                                ? t('savingsGoals.card.complete')
+                                : t('savingsGoals.card.needMore', { amount: formatCurrency(remaining) })}
                         </div>
                     </div>
                     <div className="rounded-[18px] border border-white/10 bg-white/5 p-3">
-                        <p className="text-xs uppercase tracking-[0.32em] text-white/40">Target</p>
+                        <p className="text-xs uppercase tracking-[0.32em] text-white/40">{t('savingsGoals.card.target')}</p>
                         <p className="mt-1 text-sm font-semibold text-white">{formatDate(targetDate)}</p>
                         <p className={`mt-2 text-sm font-semibold ${isOverdue ? 'text-red-300' : isComplete ? 'text-emerald-200' : 'text-white/70'}`}>
                             {targetInfoLabel}
@@ -193,7 +195,7 @@ export default function SavingsGoalCard({
                             {percentage.toFixed(0)}% complete
                         </span>
                         <span className="text-sm text-white/60">
-                            {isComplete ? 'Goal reached' : `${formatCurrency(remaining)} remaining`}
+                            {isComplete ? t('savingsGoals.card.goalMet') : t('savingsGoals.card.remaining', { amount: formatCurrency(remaining) })}
                         </span>
                     </div>
                 </div>
@@ -204,14 +206,14 @@ export default function SavingsGoalCard({
                         onClick={onAddFunds}
                         className="touch-target-wide rounded-[14px] bg-gradient-to-b from-[#DC2626] to-[#B91C1C] px-4 py-3 text-sm font-semibold text-white transition hover:brightness-110"
                     >
-                        Add Funds
+                        {t('savingsGoals.card.addFunds')}
                     </button>
                     <button
                         type="button"
-                        onClick={onDetails}
+                        onClick={onEdit}
                         className="touch-target-wide rounded-[14px] border border-white/10 bg-white/5 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10"
                     >
-                        Details
+                        {t('savingsGoals.card.edit')}
                     </button>
                 </div>
             </div>
diff --git a/components/Insights/remittanceTrendChart.tsx b/components/Insights/remittanceTrendChart.tsx
index e1335d8..b57a90c 100644
--- a/components/Insights/remittanceTrendChart.tsx
+++ b/components/Insights/remittanceTrendChart.tsx
@@ -1,5 +1,16 @@
 'use client'
 
+import { Activity } from 'lucide-react';
+import { 
+  ResponsiveContainer, 
+  AreaChart, 
+  CartesianGrid, 
+  XAxis, 
+  YAxis, 
+  Tooltip, 
+  ReferenceLine, 
+  Area 
+} from 'recharts';
 import { INSIGHTS_PALETTE } from './palette';
 const LINE_COLOR = INSIGHTS_PALETTE[0];
 
@@ -30,7 +41,6 @@ export const MOCK_TREND_DATA: TrendDataPoint[] = [
 
 const AXIS_COLOR  = '#6b7280'
 const GRID_COLOR  = 'rgba(255,255,255,0.06)'
-const LINE_COLOR  = '#D72323'
 
 // ── Custom tooltip ────────────────────────────────────────────────────────────
 interface CustomTooltipProps {
@@ -45,7 +55,7 @@ function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
 
   return (
     <div className="rounded-xl border border-white/10 bg-black/80 px-4 py-3 shadow-2xl text-sm" aria-live="polite" role="region" aria-label="Remittance trend tooltip">
-      <p className="text-gray-400 font-medium mb-2">{label}</p
+      <p className="text-gray-400 font-medium mb-2">{label}</p>
       <div className="space-y-1">
         <div className="flex justify-between gap-6">
           <span className="text-gray-400">Amount</span>
diff --git a/components/SessionExpiryNotification.tsx b/components/SessionExpiryNotification.tsx
index 1265bb3..a927339 100644
--- a/components/SessionExpiryNotification.tsx
+++ b/components/SessionExpiryNotification.tsx
@@ -30,7 +30,6 @@ export default function SessionExpiryNotification({
   const primaryActionRef = useRef<HTMLButtonElement>(null);
   const isWarning = phase === 'warning';
   const isExpired = phase === 'expired';
-  if (!isWarning && !isExpired) return null;
 
   useEffect(() => {
     if (phase !== 'none') {
@@ -48,6 +47,8 @@ export default function SessionExpiryNotification({
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [isWarning, isExpired, onDismiss]);
 
+  if (!isWarning && !isExpired) return null;
+
   return (
     <div
       role="alert"
diff --git a/components/dashboard/SixMonthTrendsWidget.tsx b/components/dashboard/SixMonthTrendsWidget.tsx
deleted file mode 100644
index a63684d..0000000
--- a/components/dashboard/SixMonthTrendsWidget.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-'use client'
-
-import { useCallback, useState } from 'react'
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'
-import { TrendingUp, Target, FileText } from 'lucide-react'
-import WidgetEmptyState from '@/components/ui/WidgetEmptyState'
-import WidgetErrorState from '@/components/ui/WidgetErrorState'
-
-const mockChartData = [
-    { month: 'Jul', remittances: 2800, savings: 1200, bills: 420, insurance: 80 },
-    { month: 'Aug', remittances: 3050, savings: 1350, bills: 400, insurance: 80 },
-    { month: 'Sep', remittances: 3200, savings: 1400, bills: 380, insurance: 80 },
-    { month: 'Oct', remittances: 2900, savings: 1550, bills: 450, insurance: 80 },
-    { month: 'Nov', remittances: 3100, savings: 1480, bills: 420, insurance: 80 },
-    { month: 'Dec', remittances: 3400, savings: 1600, bills: 550, insurance: 80 },
-]
-
-const COLORS = {
-    remittances: '#DC2626',
-    savings: '#B91C1C',
-    bills: '#991B1B',
-    insurance: '#7F1D1D',
-}
-
-interface CustomLegendProps {
-    payload?: Array<{ value: string; color: string }>
-}
-
-function CustomLegend({ payload }: CustomLegendProps) {
-    return (
-        <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 mt-4">
-            {payload?.map((entry, index) => (
-                <div key={index} className="flex items-center gap-2">
-                    <div className="w-[14px] h-[1.75px]" style={{ backgroundColor: entry.color }} />
-                    <span className="text-xs font-normal leading-[18px] capitalize" style={{ color: entry.color }}>
-                        {entry.value}
-                    </span>
-                </div>
-            ))}
-        </div>
-    )
-}
-
-interface SummaryCardProps {
-    icon: React.ReactNode
-    label: string
-    value: string
-    subtitle: string
-    variant?: 'highlight' | 'default'
-    valueColor?: string
-}
-
-function SummaryCard({ icon, label, value, subtitle, variant = 'default', valueColor }: SummaryCardProps) {
-    const isHighlight = variant === 'highlight'
-    return (
-        <div
-            className={`flex flex-col items-start gap-2 pt-[17px] px-[17px] pb-[1px] rounded-[14px] ${isHighlight
-                ? 'bg-[rgba(220,38,38,0.1)] border border-[rgba(220,38,38,0.2)]'
-                : 'bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.08)]'
-                }`}
-        >
-            <div className="flex items-center gap-2">
-                <div className={isHighlight ? 'text-[#DC2626]' : 'text-[rgba(255,255,255,0.6)]'}>{icon}</div>
-                <span className={`text-xs font-semibold leading-4 ${isHighlight ? 'text-[#DC2626]' : 'text-[rgba(255,255,255,0.6)]'}`}>
-                    {label}
-                </span>
-            </div>
-            <div className="text-xl font-bold leading-7 tracking-[-0.45px]" style={{ color: valueColor ?? '#FFFFFF' }}>
-                {value}
-            </div>
-            <div className="text-xs font-normal leading-4 text-[rgba(255,255,255,0.6)]">{subtitle}</div>
-        </div>
-    )
-}
-
-interface SixMonthTrendsWidgetProps {
-    /** Pass an empty array to show the empty state */
-    chartData?: typeof mockChartData
-    /** Pass true to show the error state */
-    hasError?: boolean
-}
-
-export default function SixMonthTrendsWidget({
-    chartData = mockChartData,
-    hasError = false,
-}: SixMonthTrendsWidgetProps) {
-    const [retryKey, setRetryKey] = useState(0)
-    const handleRetry = useCallback(() => setRetryKey((k) => k + 1), [])
-
-    const isEmpty = !hasError && chartData.length === 0
-
-    return (
-        <div
-            key={retryKey}
-            className="flex flex-col items-start pt-[25px] px-[25px] pb-[16px] gap-6 rounded-2xl border border-[rgba(255,255,255,0.08)] w-full max-w-[928px]"
-            style={{ background: 'linear-gradient(180deg, #0F0F0F 0%, #0A0A0A 100%)' }}
-        >
-            {/* Header */}
-            <div className="flex flex-row items-center justify-between gap-4 w-full">
-                <div className="flex flex-col gap-1">
-                    <div className="flex items-center gap-2">
-                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                            <path d="M2 15L6 11L10 14L18 5" stroke="#DC2626" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
-                            <path d="M14 5H18V9" stroke="#DC2626" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
-                        </svg>
-                        <h2 className="text-xl font-bold leading-7 tracking-[-0.45px] text-white">6-Month Trends</h2>
-                    </div>
-                    <p className="text-sm font-normal leading-5 tracking-[-0.15px] text-[rgba(255,255,255,0.5)]">
-                        Track your financial patterns
-                    </p>
-                </div>
-                {!isEmpty && !hasError && (
-                    <button className="h-[30px] px-[13px] text-xs font-semibold leading-4 text-white bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.08)] rounded-[10px] hover:bg-[rgba(255,255,255,0.1)] transition-colors shrink-0 whitespace-nowrap">
-                        View Details
-                    </button>
-                )}
-            </div>
-
-            {hasError ? (
-                <WidgetErrorState
-                    message="We couldn't load your trend data. Please try again."
-                    onRetry={handleRetry}
-                />
-            ) : isEmpty ? (
-                <WidgetEmptyState
-                    icon={TrendingUp}
-                    title="No trend data yet"
-                    description="Complete a few transactions and your 6-month trends will appear here."
-                    ctaLabel="Send money"
-                    ctaHref="/send"
-                />
-            ) : (
-                <>
-                    {/* Line Chart */}
-                    <div className="w-full h-[280px] sm:h-[320px]">
-                        <ResponsiveContainer width="100%" height="100%">
-                            <LineChart data={chartData} margin={{ top: 5, right: 5, left: -10, bottom: 5 }}>
-                                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255, 255, 255, 0.063)" vertical={true} />
-                                <XAxis
-                                    dataKey="month"
-                                    axisLine={{ stroke: 'rgba(255, 255, 255, 0.25)' }}
-                                    tickLine={{ stroke: 'rgba(255, 255, 255, 0.25)' }}
-                                    tick={{ fill: 'rgba(255, 255, 255, 0.376)', fontSize: 12, fontWeight: 400 }}
-                                />
-                                <YAxis
-                                    axisLine={{ stroke: 'rgba(255, 255, 255, 0.25)' }}
-                                    tickLine={{ stroke: 'rgba(255, 255, 255, 0.25)' }}
-                                    tick={{ fill: 'rgba(255, 255, 255, 0.376)', fontSize: 12, fontWeight: 400 }}
-                                    tickFormatter={(value) => `$${value}`}
-                                    domain={[0, 3400]}
-                                    ticks={[0, 850, 1700, 2550, 3400]}
-                                    width={45}
-                                />
-                                <Tooltip
-                                    contentStyle={{ backgroundColor: '#1a1a1a', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: '8px', color: '#fff' }}
-                                    labelStyle={{ color: '#fff' }}
-                                    formatter={(value) => [`$${Number(value).toLocaleString()}`, '']}
-                                />
-                                <Legend content={<CustomLegend />} />
-                                <Line type="monotone" dataKey="remittances" stroke={COLORS.remittances} strokeWidth={3} dot={{ fill: COLORS.remittances, stroke: COLORS.remittances, strokeWidth: 3, r: 4 }} activeDot={{ r: 6 }} />
-                                <Line type="monotone" dataKey="savings" stroke={COLORS.savings} strokeWidth={3} dot={{ fill: COLORS.savings, stroke: COLORS.savings, strokeWidth: 3, r: 4 }} activeDot={{ r: 6 }} />
-                                <Line type="monotone" dataKey="bills" stroke={COLORS.bills} strokeWidth={3} dot={{ fill: COLORS.bills, stroke: COLORS.bills, strokeWidth: 3, r: 4 }} activeDot={{ r: 6 }} />
-                                <Line type="monotone" dataKey="insurance" stroke={COLORS.insurance} strokeWidth={3} dot={{ fill: COLORS.insurance, stroke: COLORS.insurance, strokeWidth: 3, r: 4 }} activeDot={{ r: 6 }} />
-                            </LineChart>
-                        </ResponsiveContainer>
-                    </div>
-
-                    {/* Summary Cards */}
-                    <div className="w-full border-t border-[rgba(255,255,255,0.08)] pt-[25px]">
-                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                            <SummaryCard icon={<TrendingUp className="w-4 h-4" />} label="Highest Month" value="Dec 2025" subtitle="$5,630 total" variant="highlight" />
-                            <SummaryCard icon={<Target className="w-4 h-4" />} label="Average" value="$5,395" subtitle="Per month" />
-                            <SummaryCard icon={<FileText className="w-4 h-4" />} label="Growth" value="+15.7%" subtitle="vs. Jul 2025" valueColor="#DC2626" />
-                        </div>
-                    </div>
-                </>
-            )}
-        </div>
-    )
-}
diff --git a/lib/i18n/client.ts b/lib/i18n/client.ts
index 06e5531..08ff864 100644
--- a/lib/i18n/client.ts
+++ b/lib/i18n/client.ts
@@ -5,11 +5,12 @@ import en from "./locales/en.json";
 import es from "./locales/es.json";
 
 type SupportedLocale = "en" | "es";
-type TranslationTree = Record<string, string | TranslationTree>;
+type TranslationValue = string | { [key: string]: TranslationValue };
+type TranslationTree = Record<string, TranslationValue>;
 
 const resources: Record<SupportedLocale, TranslationTree> = {
-	en,
-	es,
+	en: en as TranslationTree,
+	es: es as TranslationTree,
 };
 
 function resolveLocale(language: string | null | undefined): SupportedLocale {
@@ -18,7 +19,7 @@ function resolveLocale(language: string | null | undefined): SupportedLocale {
 }
 
 function readPath(tree: TranslationTree, path: string): string | undefined {
-	return path.split(".").reduce<string | TranslationTree | undefined>((acc, key) => {
+	return path.split(".").reduce<any>((acc, key) => {
 		if (!acc || typeof acc === "string") return undefined;
 		return acc[key];
 	}, tree) as string | undefined;
@@ -44,11 +45,18 @@ export function useClientTranslator(defaultLocale: SupportedLocale = "en") {
 
 		return {
 			locale,
-			t: (path: string, fallback?: string) =>
-				readPath(currentTree, path) ??
-				readPath(fallbackTree, path) ??
-				fallback ??
-				path,
+			t: (path: string, options?: string | Record<string, any>) => {
+				let text = readPath(currentTree, path) ??
+					readPath(fallbackTree, path) ??
+					(typeof options === 'string' ? options : path);
+
+				if (typeof options === 'object' && typeof text === 'string') {
+					Object.entries(options).forEach(([key, value]) => {
+						text = text.replace(new RegExp(`{{${key}}}`, 'g'), String(value));
+					});
+				}
+				return text;
+			}
 		};
 	}, [locale]);
 }
diff --git a/lib/i18n/locales/en.json b/lib/i18n/locales/en.json
index adfe367..3e73031 100644
--- a/lib/i18n/locales/en.json
+++ b/lib/i18n/locales/en.json
@@ -26,9 +26,56 @@
     "failed_fetch_total_premium": "Failed to compute total premium",
     "address_signature_required": "Address and signature are required",
     "nonce_expired": "Nonce expired or missing. Please request a new nonce.",
-    "signature_verification_failed": "Signature verification failed"
-  },
-  "transactionHistory": {
+    "signature_verification_failed": "Signature verification failed",
+    "goal_name_required": "Goal name is required",
+    "goal_id_required": "Goal ID is required",
+    "goal_description_invalid": "Invalid description",
+    "goal_name_too_long": "Goal name cannot exceed 100 characters",
+    "goal_description_too_long": "Goal description cannot exceed 200 characters",
+    "goal_amount_positive": "Amount must be positive",
+    "goal_date_future": "Target date must be in the future",
+    "goal_invalid_date": "Invalid date format"
+    },
+    "savingsGoals": {
+    "title": "Savings Goals",
+    "subtitle": "Track and achieve your financial dreams",
+    "newGoal": "New Goal",
+    "editGoal": "Edit Goal",
+    "createGoal": "Create Goal",
+    "modal": {
+      "createTitle": "Create New Goal",
+      "editTitle": "Edit Savings Goal",
+      "titleLabel": "Goal Title",
+      "titlePlaceholder": "e.g. Children's Education",
+      "descriptionLabel": "Description (Optional)",
+      "descriptionPlaceholder": "What are you saving for?",
+      "amountLabel": "Target Amount (USDC)",
+      "dateLabel": "Target Date",
+      "iconLabel": "Choose Icon"
+    },
+    "stats": {
+      "totalGoals": "Total Goals",
+      "totalTarget": "Total Target",
+      "totalSaved": "Total Saved"
+    },
+    "card": {
+      "addFunds": "Add Funds",
+      "edit": "Edit",
+      "target": "Target",
+      "remaining": "{{amount}} remaining",
+      "needMore": "Need {{amount}} more",
+      "complete": "All set — target reached",
+      "daysLeft": "{{count}} days left",
+      "overdue": "Overdue",
+      "goalMet": "Goal met",
+      "nearComplete": "Almost there",
+      "onTrack": "On track",
+      "noDeadline": "No deadline"
+    }
+
+    },
+    "transactionHistory": {
+
     "title": "Transaction History",
     "resultsCount": "{{count}} transactions found",
     "resultsCountZero": "No transactions found",
diff --git a/lib/validation/savings-goals.ts b/lib/validation/savings-goals.ts
index 6130f61..3081819 100644
--- a/lib/validation/savings-goals.ts
+++ b/lib/validation/savings-goals.ts
@@ -9,20 +9,12 @@ export interface ValidationResult {
  * Validates that an amount is a positive number
  */
 export function validateAmount(amount: number): ValidationResult {
-  if (typeof amount !== 'number') {
-    return { isValid: false, error: 'Amount must be a number' };
-  }
-  
-  if (isNaN(amount)) {
-    return { isValid: false, error: 'Amount cannot be NaN' };
-  }
-  
-  if (!isFinite(amount)) {
-    return { isValid: false, error: 'Amount must be finite' };
+  if (typeof amount !== 'number' || isNaN(amount) || !isFinite(amount)) {
+    return { isValid: false, error: 'goal_amount_positive' };
   }
   
   if (amount <= 0) {
-    return { isValid: false, error: 'Amount must be positive' };
+    return { isValid: false, error: 'goal_amount_positive' };
   }
   
   return { isValid: true };
@@ -33,19 +25,19 @@ export function validateAmount(amount: number): ValidationResult {
  */
 export function validateFutureDate(dateString: string): ValidationResult {
   if (!dateString || typeof dateString !== 'string') {
-    return { isValid: false, error: 'Date must be a non-empty string' };
+    return { isValid: false, error: 'goal_invalid_date' };
   }
   
   const date = new Date(dateString);
   
   if (isNaN(date.getTime())) {
-    return { isValid: false, error: 'Invalid date format' };
+    return { isValid: false, error: 'goal_invalid_date' };
   }
   
   const now = new Date();
   
   if (date <= now) {
-    return { isValid: false, error: 'Target date must be in the future' };
+    return { isValid: false, error: 'goal_date_future' };
   }
   
   return { isValid: true };
@@ -55,12 +47,8 @@ export function validateFutureDate(dateString: string): ValidationResult {
  * Validates that a goal ID is non-empty
  */
 export function validateGoalId(goalId: string): ValidationResult {
-  if (!goalId || typeof goalId !== 'string') {
-    return { isValid: false, error: 'Goal ID must be a non-empty string' };
-  }
-  
-  if (goalId.trim().length === 0) {
-    return { isValid: false, error: 'Goal ID cannot be empty or whitespace' };
+  if (!goalId || typeof goalId !== 'string' || goalId.trim().length === 0) {
+    return { isValid: false, error: 'goal_id_required' };
   }
   
   return { isValid: true };
@@ -70,16 +58,27 @@ export function validateGoalId(goalId: string): ValidationResult {
  * Validates that a goal name is valid
  */
 export function validateGoalName(name: string): ValidationResult {
-  if (!name || typeof name !== 'string') {
-    return { isValid: false, error: 'Goal name must be a non-empty string' };
+  if (!name || typeof name !== 'string' || name.trim().length === 0) {
+    return { isValid: false, error: 'goal_name_required' };
   }
   
-  if (name.trim().length === 0) {
-    return { isValid: false, error: 'Goal name cannot be empty or whitespace' };
+  if (name.length > 100) {
+    return { isValid: false, error: 'goal_name_too_long' };
   }
   
-  if (name.length > 100) {
-    return { isValid: false, error: 'Goal name cannot exceed 100 characters' };
+  return { isValid: true };
+}
+
+/**
+ * Validates that a goal description is valid
+ */
+export function validateGoalDescription(description: string): ValidationResult {
+  if (typeof description !== 'string') {
+    return { isValid: false, error: 'goal_description_invalid' };
+  }
+  
+  if (description.length > 200) {
+    return { isValid: false, error: 'goal_description_too_long' };
   }
   
   return { isValid: true };
diff --git a/lib/webhooks/retry.ts b/lib/webhooks/retry.ts
index 27c4bdb..7b4e5cc 100644
--- a/lib/webhooks/retry.ts
+++ b/lib/webhooks/retry.ts
@@ -59,7 +59,7 @@ export async function processPendingWebhooks(
     );
 
     const results = await Promise.allSettled(
-      pendingEvents.map((event) => processEvent(event.id, event.source))
+      pendingEvents.map((event: any) => processEvent(event.id, event.source))
     );
 
     const failed = results.filter((r) => r.status === 'rejected').length;
diff --git a/tests/unit/goals/utils.test.ts b/tests/unit/goals/utils.test.ts
new file mode 100644
index 0000000..572f49a
--- /dev/null
+++ b/tests/unit/goals/utils.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { calculateDaysLeft, checkIsOverdue } from '@/app/dashboard/goals/utils'
+
+describe('Goals Utilities', () => {
+  beforeEach(() => {
+    // Mock today's date to Wednesday, June 17, 2026
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-17T12:00:00Z'))
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('calculateDaysLeft', () => {
+    it('should calculate days left for a future date', () => {
+      // June 20, 2026 is 3 days after June 17
+      expect(calculateDaysLeft('2026-06-20')).toBe(3)
+    })
+
+    it('should return 0 for today', () => {
+      expect(calculateDaysLeft('2026-06-17')).toBe(0)
+    })
+
+    it('should return 0 for a past date', () => {
+      expect(calculateDaysLeft('2026-06-10')).toBe(0)
+    })
+
+    it('should handle end of year', () => {
+      // June 17, 2026 to Dec 31, 2026
+      // June: 13, July: 31, Aug: 31, Sep: 30, Oct: 31, Nov: 30, Dec: 31
+      // Total: 13+31+31+30+31+30+31 = 197
+      expect(calculateDaysLeft('2026-12-31')).toBe(197)
+    })
+  })
+
+  describe('checkIsOverdue', () => {
+    it('should return false for a future date', () => {
+      expect(checkIsOverdue('2026-06-20')).toBe(false)
+    })
+
+    it('should return false for today', () => {
+      expect(checkIsOverdue('2026-06-17')).toBe(false)
+    })
+
+    it('should return true for a past date', () => {
+      expect(checkIsOverdue('2026-06-10')).toBe(true)
+    })
+  })
+})
diff --git a/tests/unit/validation/savings-goals.test.ts b/tests/unit/validation/savings-goals.test.ts
index 17c552f..057e2f6 100644
--- a/tests/unit/validation/savings-goals.test.ts
+++ b/tests/unit/validation/savings-goals.test.ts
@@ -5,6 +5,7 @@ import {
   validateFutureDate,
   validateGoalId,
   validateGoalName,
+  validateGoalDescription,
   validatePublicKey,
 } from '@/lib/validation/savings-goals';
 
@@ -20,37 +21,37 @@ describe('Validation Functions - Unit Tests', () => {
     it('should reject zero', () => {
       const result = validateAmount(0);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Amount must be positive');
+      expect(result.error).toBe('goal_amount_positive');
     });
 
     it('should reject negative numbers', () => {
       const result = validateAmount(-1);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Amount must be positive');
+      expect(result.error).toBe('goal_amount_positive');
     });
 
     it('should reject NaN', () => {
       const result = validateAmount(NaN);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Amount cannot be NaN');
+      expect(result.error).toBe('goal_amount_positive');
     });
 
     it('should reject Infinity', () => {
       const result = validateAmount(Infinity);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Amount must be finite');
+      expect(result.error).toBe('goal_amount_positive');
     });
 
     it('should reject negative Infinity', () => {
       const result = validateAmount(-Infinity);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Amount must be finite');
+      expect(result.error).toBe('goal_amount_positive');
     });
 
     it('should reject non-number types', () => {
       const result = validateAmount('100' as any);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Amount must be a number');
+      expect(result.error).toBe('goal_amount_positive');
     });
   });
 
@@ -68,7 +69,7 @@ describe('Validation Functions - Unit Tests', () => {
       const result = validateFutureDate(pastDate.toISOString());
       
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Target date must be in the future');
+      expect(result.error).toBe('goal_date_future');
     });
 
     it('should reject current date/time', () => {
@@ -76,25 +77,25 @@ describe('Validation Functions - Unit Tests', () => {
       const result = validateFutureDate(now.toISOString());
       
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Target date must be in the future');
+      expect(result.error).toBe('goal_date_future');
     });
 
     it('should reject invalid date strings', () => {
       const result = validateFutureDate('not-a-date');
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Invalid date format');
+      expect(result.error).toBe('goal_invalid_date');
     });
 
     it('should reject empty strings', () => {
       const result = validateFutureDate('');
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Date must be a non-empty string');
+      expect(result.error).toBe('goal_invalid_date');
     });
 
     it('should reject non-string types', () => {
       const result = validateFutureDate(123 as any);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Date must be a non-empty string');
+      expect(result.error).toBe('goal_invalid_date');
     });
   });
 
@@ -108,19 +109,19 @@ describe('Validation Functions - Unit Tests', () => {
     it('should reject empty strings', () => {
       const result = validateGoalId('');
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Goal ID must be a non-empty string');
+      expect(result.error).toBe('goal_id_required');
     });
 
     it('should reject whitespace-only strings', () => {
       const result = validateGoalId('   ');
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Goal ID cannot be empty or whitespace');
+      expect(result.error).toBe('goal_id_required');
     });
 
     it('should reject non-string types', () => {
       const result = validateGoalId(123 as any);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Goal ID must be a non-empty string');
+      expect(result.error).toBe('goal_id_required');
     });
   });
 
@@ -134,25 +135,45 @@ describe('Validation Functions - Unit Tests', () => {
     it('should reject empty strings', () => {
       const result = validateGoalName('');
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Goal name must be a non-empty string');
+      expect(result.error).toBe('goal_name_required');
     });
 
     it('should reject whitespace-only strings', () => {
       const result = validateGoalName('   ');
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Goal name cannot be empty or whitespace');
+      expect(result.error).toBe('goal_name_required');
     });
 
     it('should reject names longer than 100 characters', () => {
       const result = validateGoalName('A'.repeat(101));
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Goal name cannot exceed 100 characters');
+      expect(result.error).toBe('goal_name_too_long');
     });
 
     it('should reject non-string types', () => {
       const result = validateGoalName(123 as any);
       expect(result.isValid).toBe(false);
-      expect(result.error).toBe('Goal name must be a non-empty string');
+      expect(result.error).toBe('goal_name_required');
+    });
+  });
+
+  describe('validateGoalDescription', () => {
+    it('should accept valid descriptions', () => {
+      expect(validateGoalDescription('Saving for a new car').isValid).toBe(true);
+      expect(validateGoalDescription('').isValid).toBe(true);
+      expect(validateGoalDescription('A'.repeat(200)).isValid).toBe(true);
+    });
+
+    it('should reject descriptions longer than 200 characters', () => {
+      const result = validateGoalDescription('A'.repeat(201));
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe('goal_description_too_long');
+    });
+
+    it('should reject non-string types', () => {
+      const result = validateGoalDescription(123 as any);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe('goal_description_invalid');
     });
   });