diff --git a/src/app/page.tsx b/src/app/page.tsx
index e66fa97..56f97c6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,6 +14,7 @@ import HomePage from '@/components/HomePage';
 import AnsweredPrayers from '@/components/AnsweredPrayers';
 import { db } from '@/lib/firebase';
 import { collection, addDoc, getDocs, updateDoc, query, where, doc } from 'firebase/firestore';
+import { Loader2 } from 'lucide-react';
 import toast from 'react-hot-toast';
 
 interface Prayer {
@@ -194,7 +195,7 @@ export default function Home() {
                 style={{ animationDirection: 'reverse', animationDuration: '1.5s' }}
               ></div>
               <div className="absolute inset-0 flex items-center justify-center">
-                <div className="text-3xl animate-pulse">🙏</div>
+                <Loader2 className="w-8 h-8 text-blue-400 animate-spin" />
               </div>
             </div>
           </div>
diff --git a/src/components/AnsweredPrayers.tsx b/src/components/AnsweredPrayers.tsx
index aa69bde..6280a74 100644
--- a/src/components/AnsweredPrayers.tsx
+++ b/src/components/AnsweredPrayers.tsx
@@ -17,9 +17,10 @@ interface AnsweredPrayersProps {
   onEdit?: (prayer: Prayer) => void;
 }
 
+import { CheckCircle2 } from 'lucide-react';
+
 export default function AnsweredPrayers({ prayers, onEdit }: AnsweredPrayersProps) {
   const answeredPrayers = prayers.filter(p => p.answered);
-  const { CheckCircle2 } = require('lucide-react');
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4 pb-32 pt-24">
@@ -49,7 +50,7 @@ export default function AnsweredPrayers({ prayers, onEdit }: AnsweredPrayersProp
                 onClick={() => onEdit?.(prayer)}
               >
                 <div className="flex items-start gap-3 mb-2">
-                  <span className="text-3xl">✅</span>
+                  <CheckCircle2 className="w-7 h-7 text-green-400" />
                   <div className="flex-1">
                     {prayer.prayFor && (
                       <div className="text-xs font-semibold text-green-400 mb-1 uppercase tracking-wide">
diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx
index c1761a2..3230ebb 100644
--- a/src/components/BottomNav.tsx
+++ b/src/components/BottomNav.tsx
@@ -79,7 +79,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
             )}
 
       {/* Mobile Bottom Navigation */}
-      <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 md:hidden z-50 shadow-lg" style={{ paddingBottom: 'var(--safe-area-inset-bottom)' }}>
+      <nav className="fixed bottom-0 left-0 right-0 bg-slate-800/80 backdrop-blur-md border-t border-slate-700 md:hidden z-50 shadow-lg" style={{ paddingBottom: 'var(--safe-area-inset-bottom)' }}>
         <div className="flex justify-around">
           {primaryNavItems.map(item => (
             <button
@@ -110,9 +110,12 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
       </nav>
 
       {/* Desktop Top Navigation */}
-      <nav className="hidden md:fixed md:top-0 md:left-0 md:right-0 md:bg-white md:dark:bg-slate-800 md:border-b md:border-slate-200 md:dark:border-slate-700 md:z-50 md:flex md:items-center md:justify-between md:px-6 md:py-3 md:shadow-sm">
+      <nav className="hidden md:fixed md:top-0 md:left-0 md:right-0 md:bg-slate-800/80 md:backdrop-blur-md md:border-b md:border-slate-700 md:z-50 md:flex md:items-center md:justify-between md:px-6 md:py-3 md:shadow-sm">
         <div className="flex items-center gap-8">
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Haver</h1>
+          <div className="flex items-center gap-2">
+            <HandHeart className="w-5 h-5 text-blue-400" />
+            <h1 className="text-2xl font-bold text-white">Haver</h1>
+          </div>
           <div className="flex gap-1">
             {allNavItems.map(item => (
               <button
@@ -121,7 +124,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
                 className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
                   activeTab === item.id
                     ? 'bg-blue-600 text-white'
-                    : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'
+                    : 'text-slate-300 hover:bg-slate-700'
                 }`}
               >
                 <span className="inline-flex items-center justify-center">{item.icon}</span>
@@ -132,7 +135,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
         </div>
         <button
           onClick={logout}
-          className="px-4 py-2 rounded-lg font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
+          className="px-4 py-2 rounded-lg font-medium text-slate-300 hover:bg-slate-700 transition-colors"
         >
           Logout
         </button>
diff --git a/src/components/ThingsToPrayFor.tsx b/src/components/ThingsToPrayFor.tsx
index e4476ca..dc88d44 100644
--- a/src/components/ThingsToPrayFor.tsx
+++ b/src/components/ThingsToPrayFor.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { HandHeart } from 'lucide-react';
+import { HandHeart, Sparkles } from 'lucide-react';
 
 interface Prayer {
   id: string;
@@ -60,8 +60,8 @@ export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: Thing
         </div>
 
         {thingsToPrayFor.length === 0 ? (
-          <div className="text-center py-12">
-            <div className="text-6xl mb-4 animate-bounce">✨</div>
+            <div className="text-center py-12">
+            <Sparkles className="w-12 h-12 mb-4 text-blue-400 animate-pulse mx-auto" />
             <p className="text-white font-semibold mb-2">All Caught Up!</p>
             <p className="text-slate-400">
               You've marked all your prayers as answered. Praise God for His faithfulness!
@@ -92,7 +92,7 @@ export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: Thing
                         className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-md border border-slate-700/50 transition-all hover:shadow-xl hover:bg-slate-800/80"
                       >
                         <div className="flex items-start gap-3">
-                          <div className="text-3xl mt-0.5">🙏</div>
+                          <HandHeart className="w-7 h-7 text-blue-400 mt-0.5" />
                           <div className="flex-1 min-w-0">
                             <p className="text-base text-slate-200 line-clamp-3 mb-3">
                               {prayer.text}