diff --git a/src/components/PageBreadcrumb.tsx b/src/components/PageBreadcrumb.tsx
new file mode 100644
index 0000000..a4de8bd
--- /dev/null
+++ b/src/components/PageBreadcrumb.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+interface PageBreadcrumbProps {
+  /**
+   * The current page title, will be shown as the last breadcrumb item
+   */
+  currentPage: string;
+  /**
+   * Optional additional breadcrumb items between home and current page
+   */
+  items?: Array<{
+    label: string;
+    href: string;
+  }>;
+}
+
+/**
+ * A reusable breadcrumb component for pages
+ * Always includes Home as the first item and current page as the last
+ */
+export const PageBreadcrumb = ({ currentPage, items = [] }: PageBreadcrumbProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pt-4">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to="/">{t('navigation.home')}</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          {items.map((item) => (
+            <React.Fragment key={item.href}>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to={item.href}>{item.label}</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+            </React.Fragment>
+          ))}
+          <BreadcrumbItem>
+            <BreadcrumbPage>{currentPage}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </div>
+  );
+};
diff --git a/src/components/blog/CommentsSection.tsx b/src/components/blog/CommentsSection.tsx
index bd3aafe..d0e43de 100644
--- a/src/components/blog/CommentsSection.tsx
+++ b/src/components/blog/CommentsSection.tsx
@@ -11,7 +11,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Loader2 } from 'lucide-react';
 import { Link } from 'react-router-dom';
-import { getNormalizedLocale } from '@/lib/i18n';
+import { createDateFormatter } from '@/lib/i18n';
 
 interface CommentsSectionProps {
   postId: string;
@@ -47,26 +47,14 @@ const CommentsSection = ({ postId }: CommentsSectionProps) => {
   const queryClient = useQueryClient();
   const [newComment, setNewComment] = useState('');
 
-  const normalizedLocale = useMemo(
-    () => getNormalizedLocale(i18n.language),
+  const dateFormatter = useMemo(
+    () => createDateFormatter(i18n.language, {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }),
     [i18n.language]
   );
 
-  const dateFormatter = useMemo(() => {
-    try {
-      return new Intl.DateTimeFormat(normalizedLocale, {
-        dateStyle: 'medium',
-        timeStyle: 'short',
-      });
-    } catch (error) {
-      console.error('Unsupported locale for comment date formatting', error);
-      return new Intl.DateTimeFormat('en-US', {
-        dateStyle: 'medium',
-        timeStyle: 'short',
-      });
-    }
-  }, [normalizedLocale]);
-
   const {
     data: comments,
     isLoading,
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
index b4013a5..d2668a6 100644
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -20,3 +20,52 @@ export const getNormalizedLocale = (language: string | undefined | null) => {
       return language;
   }
 };
+
+/**
+ * Creates a date formatter with fallback handling
+ * @param locale - The locale to use for formatting
+ * @param options - Intl.DateTimeFormat options
+ * @returns A DateTimeFormat instance with fallback to en-US on error
+ */
+export const createDateFormatter = (
+  locale: string | undefined | null,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'medium' }
+): Intl.DateTimeFormat => {
+  const normalizedLocale = getNormalizedLocale(locale);
+  
+  try {
+    return new Intl.DateTimeFormat(normalizedLocale, options);
+  } catch (error) {
+    console.error(`Unsupported locale for date formatting: ${normalizedLocale}`, error);
+    return new Intl.DateTimeFormat('en-US', options);
+  }
+};
+
+/**
+ * Formats a date string with fallback handling
+ * @param dateString - The date string to format
+ * @param formatter - The DateTimeFormat instance to use
+ * @param fallbackFormatter - Optional fallback formatter
+ * @returns Formatted date string or em-dash if invalid
+ */
+export const formatDate = (
+  dateString: string | null | undefined,
+  formatter: Intl.DateTimeFormat,
+  fallbackFormatter?: Intl.DateTimeFormat
+): string => {
+  if (!dateString) return '—';
+
+  try {
+    return formatter.format(new Date(dateString));
+  } catch (error) {
+    console.error('Error formatting date', error);
+    if (fallbackFormatter) {
+      try {
+        return fallbackFormatter.format(new Date(dateString));
+      } catch {
+        return '—';
+      }
+    }
+    return '—';
+  }
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 2819a83..75d7cde 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,110 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Type guard to check if value is a non-empty string
+ */
+const isNonEmptyString = (value: unknown): value is string =>
+  typeof value === 'string' && value.trim().length > 0;
+
+/**
+ * Normalizes a value to an array of strings
+ * Handles JSON strings, arrays, and objects with an 'options' property
+ * @param value - The value to normalize
+ * @returns An array of unique non-empty strings
+ */
+export const normalizeToStringArray = (value: unknown): string[] => {
+  if (value === null || value === undefined) {
+    return [];
+  }
+
+  let parsedValue = value;
+
+  // Try to parse JSON string
+  if (typeof parsedValue === 'string') {
+    const trimmedValue = parsedValue.trim();
+    if (!trimmedValue) {
+      return [];
+    }
+
+    try {
+      parsedValue = JSON.parse(trimmedValue);
+    } catch {
+      return [trimmedValue];
+    }
+  }
+
+  // Handle arrays
+  if (Array.isArray(parsedValue)) {
+    return Array.from(
+      new Set(
+        parsedValue
+          .filter(isNonEmptyString)
+          .map((item) => item.trim())
+      )
+    );
+  }
+
+  // Handle objects with 'options' or 'stats' property
+  if (typeof parsedValue === 'object' && parsedValue !== null) {
+    const record = parsedValue as Record<string, unknown>;
+    if (Array.isArray(record.options)) {
+      return Array.from(
+        new Set(
+          record.options
+            .filter(isNonEmptyString)
+            .map((item) => item.trim())
+        )
+      );
+    }
+  }
+
+  return [];
+};
+
+/**
+ * Normalizes a value to an array of typed objects
+ * @param value - The value to normalize
+ * @param validator - Function to validate and transform each item
+ * @returns An array of validated objects
+ */
+export const normalizeToTypedArray = <T>(
+  value: unknown,
+  validator: (item: unknown) => T | null
+): T[] => {
+  if (!value) {
+    return [];
+  }
+
+  let parsedValue: unknown = value;
+
+  // Try to parse JSON string
+  if (typeof parsedValue === 'string') {
+    try {
+      parsedValue = JSON.parse(parsedValue);
+    } catch {
+      return [];
+    }
+  }
+
+  // Handle arrays
+  if (Array.isArray(parsedValue)) {
+    return parsedValue
+      .map(validator)
+      .filter((item): item is T => item !== null);
+  }
+
+  // Handle objects with nested arrays
+  if (typeof parsedValue === 'object' && parsedValue !== null) {
+    const record = parsedValue as Record<string, unknown>;
+    if (Array.isArray(record.stats)) {
+      return normalizeToTypedArray(record.stats, validator);
+    }
+    if (Array.isArray(record.options)) {
+      return normalizeToTypedArray(record.options, validator);
+    }
+  }
+
+  return [];
+};
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index cf2725e..7aaca54 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { supabase } from '@/integrations/supabase';
 import { useTranslation } from 'react-i18next';
+import { normalizeToTypedArray } from '@/lib/utils';
 
 interface TeamMemberCard {
   id: string;
@@ -22,51 +23,6 @@ interface AboutStat {
   label: string;
 }
 
-const normalizeAboutStats = (value: unknown): AboutStat[] => {
-  if (!value) {
-    return [];
-  }
-
-  let parsedValue: unknown = value;
-
-  if (typeof parsedValue === 'string') {
-    try {
-      parsedValue = JSON.parse(parsedValue);
-    } catch {
-      return [];
-    }
-  }
-
-  if (Array.isArray(parsedValue)) {
-    return parsedValue
-      .map((item) => {
-        if (item && typeof item === 'object') {
-          const record = item as Record<string, unknown>;
-          const number = record.number;
-          const label = record.label;
-
-          if ((typeof number === 'string' || typeof number === 'number') && typeof label === 'string') {
-            return {
-              number: number.toString(),
-              label,
-            } satisfies AboutStat;
-          }
-        }
-        return null;
-      })
-      .filter((stat): stat is AboutStat => stat !== null);
-  }
-
-  if (typeof parsedValue === 'object' && parsedValue !== null) {
-    const record = parsedValue as Record<string, unknown>;
-    if (Array.isArray(record.stats)) {
-      return normalizeAboutStats(record.stats);
-    }
-  }
-
-  return [];
-};
-
 const About = () => {
   const { t } = useTranslation();
   const values = useMemo(
@@ -133,7 +89,21 @@ const About = () => {
 
       if (error) throw error;
 
-      return normalizeAboutStats(data?.value);
+      return normalizeToTypedArray<AboutStat>(data?.value, (item) => {
+        if (item && typeof item === 'object') {
+          const record = item as Record<string, unknown>;
+          const number = record.number;
+          const label = record.label;
+
+          if ((typeof number === 'string' || typeof number === 'number') && typeof label === 'string') {
+            return {
+              number: number.toString(),
+              label,
+            };
+          }
+        }
+        return null;
+      });
     },
   });
 
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index c4fe407..af76848 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import Layout from '@/components/Layout';
 import Meta from '@/components/Meta';
 import NewsletterSection from '@/components/NewsletterSection';
+import { PageBreadcrumb } from '@/components/PageBreadcrumb';
 import {
   ArrowRight,
   Clock,
@@ -15,14 +16,6 @@ import {
 import { supabase } from '@/integrations/supabase';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
 import {
   Pagination,
   PaginationContent,
@@ -31,7 +24,7 @@ import {
   PaginationEllipsis,
 } from '@/components/ui/pagination';
 import { cn } from '@/lib/utils';
-import { getNormalizedLocale } from '@/lib/i18n';
+import { createDateFormatter } from '@/lib/i18n';
 import type { Database } from '@/integrations/supabase/types';
 
 const FALLBACK_IMAGE =
@@ -94,24 +87,11 @@ const Blog = () => {
   const { t, i18n } = useTranslation();
   const [page, setPage] = useState(1);
 
-  const normalizedLocale = useMemo(
-    () => getNormalizedLocale(i18n.language),
+  const dateFormatter = useMemo(
+    () => createDateFormatter(i18n.language, { dateStyle: 'medium' }),
     [i18n.language]
   );
 
-  const dateFormatter = useMemo(() => {
-    try {
-      return new Intl.DateTimeFormat(normalizedLocale, {
-        dateStyle: 'medium',
-      });
-    } catch (error) {
-      console.error('Unsupported locale for blog date formatting', error);
-      return new Intl.DateTimeFormat('en-US', {
-        dateStyle: 'medium',
-      });
-    }
-  }, [normalizedLocale]);
-
   const categories = useMemo(
     () => BLOG_CATEGORY_KEYS.map((key) => t(key)),
     [t]
@@ -239,21 +219,7 @@ const Blog = () => {
         ogDescription={t('blog.description')}
         ogImage="/placeholder.svg"
       />
-      <div className="max-w-7xl mx-auto px-4 pt-4">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link to="/">{t('navigation.home')}</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{t('navigation.blog')}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
+      <PageBreadcrumb currentPage={t('navigation.blog')} />
       <section className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 25274d9..4a28387 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -5,20 +5,13 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import Layout from '@/components/Layout';
 import Meta from '@/components/Meta';
+import { PageBreadcrumb } from '@/components/PageBreadcrumb';
 import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';
 import { supabase } from '@/integrations/supabase';
 import { useToast } from '@/hooks/use-toast';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
 import { useQuery } from '@tanstack/react-query';
+import { normalizeToStringArray } from '@/lib/utils';
 
 const PROJECT_TYPE_KEYS = [
   'contact.projectTypes.customAssistant',
@@ -37,57 +30,6 @@ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const isValidatableField = (value: string): value is ValidatableField =>
   (validatableFields as readonly string[]).includes(value);
 
-const isNonEmptyString = (value: unknown): value is string =>
-  typeof value === 'string' && value.trim().length > 0;
-
-const normalizeProjectTypes = (value: unknown): string[] => {
-  if (value === null || value === undefined) {
-    return [];
-  }
-
-  let parsedValue = value;
-
-  if (typeof parsedValue === 'string') {
-    const trimmedValue = parsedValue.trim();
-
-    if (!trimmedValue) {
-      return [];
-    }
-
-    try {
-      parsedValue = JSON.parse(trimmedValue);
-    } catch {
-      return [trimmedValue];
-    }
-  }
-
-  if (Array.isArray(parsedValue)) {
-    return Array.from(
-      new Set(
-        parsedValue
-          .filter(isNonEmptyString)
-          .map((option) => option.trim())
-      )
-    );
-  }
-
-  if (typeof parsedValue === 'object' && parsedValue !== null) {
-    const record = parsedValue as Record<string, unknown>;
-
-    if (Array.isArray(record.options)) {
-      return Array.from(
-        new Set(
-          record.options
-            .filter(isNonEmptyString)
-            .map((option) => option.trim())
-        )
-      );
-    }
-  }
-
-  return [];
-};
-
 const Contact = () => {
   const { t } = useTranslation();
   const [formData, setFormData] = useState({
@@ -121,7 +63,7 @@ const Contact = () => {
 
       if (error) throw error;
 
-      return normalizeProjectTypes(data?.value);
+      return normalizeToStringArray(data?.value);
     },
     staleTime: 1000 * 60 * 10,
   });
@@ -311,21 +253,7 @@ const Contact = () => {
           ogDescription={t('contact.description')}
           ogImage="/placeholder.svg"
         />
-        <div className="max-w-7xl mx-auto px-4 pt-4">
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link to="/">{t('navigation.home')}</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>{t('navigation.contact')}</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
+        <PageBreadcrumb currentPage={t('navigation.contact')} />
         <section className="py-24 bg-white min-h-screen flex items-center">
           <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <div className="w-16 h-16 bg-gradient-brand rounded-full flex items-center justify-center mx-auto mb-6">
@@ -358,21 +286,7 @@ const Contact = () => {
         ogDescription={t('contact.description')}
         ogImage="/placeholder.svg"
       />
-      <div className="max-w-7xl mx-auto px-4 pt-4">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link to="/">{t('navigation.home')}</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{t('navigation.contact')}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
+      <PageBreadcrumb currentPage={t('navigation.contact')} />
       {/* Hero Section */}
       <section className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index d9618bd..311b47c 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -26,7 +26,7 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import Loading from '@/components/Loading';
 import { AlertTriangle, Loader2, LogOut, RefreshCcw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { getNormalizedLocale } from '@/lib/i18n';
+import { createDateFormatter, formatDate } from '@/lib/i18n';
 
 type Profile = Database['public']['Tables']['profiles']['Row'];
 type Lead = Database['public']['Tables']['leads']['Row'];
@@ -149,44 +149,17 @@ const Dashboard = () => {
     void loadDashboard();
   }, [loadDashboard]);
 
-  const normalizedLocale = useMemo(
-    () => getNormalizedLocale(i18n.language),
+  const dateTimeFormatter = useMemo(
+    () => createDateFormatter(i18n.language, {
+      dateStyle: 'short',
+      timeStyle: 'short',
+    }),
     [i18n.language]
   );
 
-  const fallbackDateFormatter = useMemo(
-    () =>
-      new Intl.DateTimeFormat('en-US', {
-        dateStyle: 'short',
-        timeStyle: 'short',
-      }),
-    []
-  );
-
-  const dateTimeFormatter = useMemo(() => {
-    try {
-      return new Intl.DateTimeFormat(normalizedLocale, {
-        dateStyle: 'short',
-        timeStyle: 'short',
-      });
-    } catch (error) {
-      console.error('Unsupported locale for dashboard date formatting', error);
-      return fallbackDateFormatter;
-    }
-  }, [fallbackDateFormatter, normalizedLocale]);
-
-  const formatDate = useCallback(
-    (value: string | null | undefined) => {
-      if (!value) return '—';
-
-      try {
-        return dateTimeFormatter.format(new Date(value));
-      } catch (error) {
-        console.error('Error formatting dashboard date', error);
-        return fallbackDateFormatter.format(new Date(value));
-      }
-    },
-    [dateTimeFormatter, fallbackDateFormatter]
+  const formatDashboardDate = useCallback(
+    (value: string | null | undefined) => formatDate(value, dateTimeFormatter),
+    [dateTimeFormatter]
   );
 
   const handleRefresh = () => {
@@ -350,7 +323,7 @@ const Dashboard = () => {
                   {t('dashboard.profile.updatedAt')}
                 </p>
                 <p className="text-base font-semibold text-foreground">
-                  {formatDate(profile?.updated_at)}
+                  {formatDashboardDate(profile?.updated_at)}
                 </p>
               </div>
             </div>
@@ -401,7 +374,7 @@ const Dashboard = () => {
                           <TableCell>{lead.project ?? '—'}</TableCell>
                           <TableCell className="max-w-sm truncate">{lead.message}</TableCell>
                           <TableCell className="text-right">
-                            {formatDate(lead.created_at)}
+                            {formatDashboardDate(lead.created_at)}
                           </TableCell>
                         </TableRow>
                       ))}
@@ -451,7 +424,7 @@ const Dashboard = () => {
                             </Badge>
                           </TableCell>
                           <TableCell className="text-right">
-                            {formatDate(subscriber.subscribed_at)}
+                            {formatDashboardDate(subscriber.subscribed_at)}
                           </TableCell>
                         </TableRow>
                       ))}
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index c75d31f..c4516ae 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -3,17 +3,10 @@ import { useQuery } from '@tanstack/react-query';
 import { Github, ExternalLink, Calendar, ArrowRight } from 'lucide-react';
 import Layout from '../components/Layout';
 import Meta from '@/components/Meta';
+import { PageBreadcrumb } from '@/components/PageBreadcrumb';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
 import { supabase } from '@/integrations/supabase';
 import { useTranslation, Trans } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -25,7 +18,7 @@ import {
 } from '@/lib/solutions';
 import type { GitHubRepository } from '@/lib/solutions';
 import type { SolutionContent } from '@/types/solutions';
-import { getNormalizedLocale } from '@/lib/i18n';
+import { createDateFormatter, formatDate } from '@/lib/i18n';
 import {
   SolutionCard,
   sectionContainer,
@@ -52,44 +45,18 @@ const Projects = () => {
 
   const memoizedFallbackSolutions = useMemo(() => getFallbackSolutions(), []);
 
-  const normalizedLocale = useMemo(
-    () => getNormalizedLocale(i18n.language),
+  const dateFormatter = useMemo(
+    () => createDateFormatter(i18n.language, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    }),
     [i18n.language]
   );
 
-  const fallbackDateFormatter = useMemo(
-    () =>
-      new Intl.DateTimeFormat('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      }),
-    []
-  );
-
-  const dateFormatter = useMemo(() => {
-    try {
-      return new Intl.DateTimeFormat(normalizedLocale, {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      });
-    } catch (error) {
-      console.error('Unsupported locale for project date formatting', error);
-      return fallbackDateFormatter;
-    }
-  }, [fallbackDateFormatter, normalizedLocale]);
-
-  const formatDate = useCallback(
-    (dateString: string) => {
-      try {
-        return dateFormatter.format(new Date(dateString));
-      } catch (error) {
-        console.error('Error formatting project date', error);
-        return fallbackDateFormatter.format(new Date(dateString));
-      }
-    },
-    [dateFormatter, fallbackDateFormatter]
+  const formatProjectDate = useCallback(
+    (dateString: string) => formatDate(dateString, dateFormatter),
+    [dateFormatter]
   );
 
   const {
@@ -254,21 +221,7 @@ const Projects = () => {
         ogDescription={t('projects.description')}
         ogImage="/placeholder.svg"
       />
-      <div className="max-w-7xl mx-auto px-4 pt-4">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link to="/">{t('navigation.home')}</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{t('navigation.projects')}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
+      <PageBreadcrumb currentPage={t('navigation.projects')} />
 
       <section className={cn(sectionPaddingY, 'bg-white')}>
         <div className={sectionContainer}>
@@ -457,7 +410,7 @@ const Projects = () => {
                       </CardTitle>
                       <div className="flex items-center gap-1 text-sm text-neutral-500">
                         <Calendar className="h-4 w-4" />
-                        {formatDate(repo.created_at)}
+                        {formatProjectDate(repo.created_at)}
                       </div>
                     </div>
                     <p className="text-neutral-600 leading-relaxed">
diff --git a/src/pages/Solutions.tsx b/src/pages/Solutions.tsx
index 596f39f..8972bf6 100644
--- a/src/pages/Solutions.tsx
+++ b/src/pages/Solutions.tsx
@@ -3,15 +3,8 @@ import { useQuery } from '@tanstack/react-query';
 import { Button } from '@/components/ui/button';
 import Layout from '@/components/Layout';
 import Meta from '@/components/Meta';
+import { PageBreadcrumb } from '@/components/PageBreadcrumb';
 import { Link } from 'react-router-dom';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
 import { ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { supabase } from '@/integrations/supabase';
@@ -109,21 +102,7 @@ const Solutions = () => {
         ogDescription={t('solutionsPage.description')}
         ogImage="/placeholder.svg"
       />
-      <div className="max-w-7xl mx-auto px-4 pt-4">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link to="/">{t('navigation.home')}</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{t('navigation.solutions')}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
+      <PageBreadcrumb currentPage={t('navigation.solutions')} />
       {/* Hero Section */}
       <section className={cn(sectionPaddingY, 'bg-white')}>
         <div className={sectionContainer}>
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
index b1e024f..b9600fb 100644
--- a/src/pages/blog/[slug].tsx
+++ b/src/pages/blog/[slug].tsx
@@ -7,17 +7,10 @@ import Layout from '@/components/Layout';
 import Meta from '@/components/Meta';
 import NewsletterSection from '@/components/NewsletterSection';
 import CommentsSection from '@/components/blog/CommentsSection';
+import { PageBreadcrumb } from '@/components/PageBreadcrumb';
 import { supabase } from '@/integrations/supabase';
-import { getNormalizedLocale } from '@/lib/i18n';
+import { createDateFormatter } from '@/lib/i18n';
 import type { Database } from '@/integrations/supabase/types';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
 
 type BlogPost = Database['public']['Tables']['blog_posts']['Row'];
 
@@ -213,22 +206,11 @@ const BlogPostPage = () => {
   const { slug } = useParams<{ slug: string }>();
   const { t, i18n } = useTranslation();
 
-  const normalizedLocale = useMemo(
-    () => getNormalizedLocale(i18n.language),
+  const dateFormatter = useMemo(
+    () => createDateFormatter(i18n.language, { dateStyle: 'long' }),
     [i18n.language]
   );
 
-  const dateFormatter = useMemo(() => {
-    try {
-      return new Intl.DateTimeFormat(normalizedLocale, {
-        dateStyle: 'long',
-      });
-    } catch (error) {
-      console.error('Unsupported locale for blog post date formatting', error);
-      return new Intl.DateTimeFormat('en-US', { dateStyle: 'long' });
-    }
-  }, [normalizedLocale]);
-
   const {
     data: post,
     isLoading,
@@ -336,27 +318,10 @@ const BlogPostPage = () => {
         ogDescription={metaDescription}
         ogImage={metaImage}
       />
-      <div className="max-w-4xl mx-auto px-4 pt-4">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link to="/">{t('navigation.home')}</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link to="/blog">{t('navigation.blog')}</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{post.title}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
+      <PageBreadcrumb 
+        currentPage={post.title}
+        items={[{ label: t('navigation.blog'), href: '/blog' }]}
+      />
       <section className="py-16 bg-white">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
           <Link
diff --git a/src/pages/solutions/[slug].tsx b/src/pages/solutions/[slug].tsx
index fe167c3..0817346 100644
--- a/src/pages/solutions/[slug].tsx
+++ b/src/pages/solutions/[slug].tsx
@@ -3,16 +3,9 @@ import { useParams, Link } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import Layout from '@/components/Layout';
 import Meta from '@/components/Meta';
+import { PageBreadcrumb } from '@/components/PageBreadcrumb';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
 import { ArrowLeft, ArrowRight, CheckCircle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { supabase } from '@/integrations/supabase';
@@ -165,27 +158,10 @@ const SolutionDetail = () => {
         ogDescription={displaySolution.description}
         ogImage={displaySolution.imageUrl ?? '/placeholder.svg'}
       />
-      <div className="max-w-7xl mx-auto px-4 pt-4">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link to="/">{t('navigation.home')}</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link to="/solutions">{t('navigation.solutions')}</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{displaySolution.title}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
+      <PageBreadcrumb 
+        currentPage={displaySolution.title}
+        items={[{ label: t('navigation.solutions'), href: '/solutions' }]}
+      />
 
       <section className="py-16">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">