diff --git a/assets/css/main.css b/assets/css/main.css
index 159c5b0..502daf8 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,113 +1,354 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-/* Apply Inter font family to the entire application */
-* {
-  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+/* CRITICAL: Apply Inter font to EVERY element */
+html, body, * {
+  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
 }
 
-/* Ensure consistent font application */
+/* Global styling */
 html, body {
-  font-family: inherit;
-  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
   margin: 0;
   padding: 0;
-  background-color: #f9fafb;
-  color: #111827;
+  background-color: #f9fafb !important;
+  color: #111827 !important;
   line-height: 1.6;
+  font-size: 16px;
 }
 
-/* Basic reset and utility styles */
-* {
-  box-sizing: border-box;
+/* Logo sizing - CRITICAL FIX */
+img[alt*="New Life Christian Church"] {
+  height: 2rem !important;
+  width: auto !important;
+  max-height: 2rem !important;
+  object-fit: contain;
 }
 
+/* Override Nuxt UI components */
+.nui-card, .nui-button, .nui-input, .nui-select, .nui-textarea {
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
+}
+
+/* Header styling */
+header {
+  background-color: white !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+  border-bottom: 1px solid #e5e7eb !important;
+}
+
+header .container, header [class*="max-w"] {
+  padding: 1rem 1.5rem !important;
+}
+
+/* Main content styling */
+main {
+  background-color: #f9fafb !important;
+  min-height: calc(100vh - 80px);
+  padding: 2rem 0 !important;
+}
+
+main .container, main [class*="max-w"] {
+  padding: 0 1rem !important;
+}
+
+/* Typography */
 h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  line-height: 1.25;
-  margin: 0;
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
+  font-weight: 600 !important;
+  line-height: 1.25 !important;
+  margin: 0 !important;
+  color: #111827 !important;
 }
 
-button {
-  cursor: pointer;
-  border: none;
-  outline: none;
-}
-
-input, textarea {
-  outline: none;
-}
-
-/* Custom styling for better appearance */
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-/* Card styling */
-.card {
-  background: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
+p {
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
+  margin: 0 !important;
+  color: #6b7280 !important;
 }
 
 /* Button styling */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: all 0.2s;
-}
-
-.btn-primary {
-  background-color: #dc2626;
-  color: white;
-}
-
-.btn-primary:hover {
-  background-color: #b91c1c;
-}
-
-.btn-outline {
-  background-color: transparent;
-  border: 1px solid #d1d5db;
-  color: #374151;
-}
-
-.btn-outline:hover {
-  background-color: #f3f4f6;
+button, .nui-button {
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
+  border-radius: 0.375rem !important;
+  font-weight: 500 !important;
+  cursor: pointer !important;
 }
 
 /* Form styling */
-.form-group {
-  margin-bottom: 1rem;
+input, textarea, select, .nui-input, .nui-textarea, .nui-select {
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
+  border-radius: 0.375rem !important;
+  border: 1px solid #d1d5db !important;
+  padding: 0.5rem 0.75rem !important;
 }
 
-.form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: #374151;
+input:focus, textarea:focus, .nui-input:focus, .nui-textarea:focus {
+  border-color: #dc2626 !important;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
+  outline: none !important;
 }
 
-.form-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
+/* Loading and empty states */
+.text-center {
+  text-align: center !important;
 }
 
-.form-input:focus {
-  border-color: #dc2626;
-  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+.py-12 {
+  padding: 3rem 0 !important;
 }
 
-/* Custom font classes if needed */
-.font-inter {
-  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+/* Grid layout */
+.grid {
+  display: grid !important;
+}
+
+.gap-6 {
+  gap: 1.5rem !important;
+}
+
+.md\:grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+}
+
+.lg\:grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+}
+
+/* Responsive container */
+.max-w-7xl {
+  max-width: 1280px !important;
+  margin: 0 auto !important;
+}
+
+.px-4 {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+.sm\:px-6 {
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
+}
+
+.lg\:px-8 {
+  padding-left: 2rem !important;
+  padding-right: 2rem !important;
+}
+
+/* Flexbox utilities */
+.flex {
+  display: flex !important;
+}
+
+.justify-between {
+  justify-content: space-between !important;
+}
+
+.justify-center {
+  justify-content: center !important;
+}
+
+.items-center {
+  align-items: center !important;
+}
+
+.space-x-4 > * + * {
+  margin-left: 1rem !important;
+}
+
+/* Text sizing */
+.text-2xl {
+  font-size: 1.5rem !important;
+  line-height: 2rem !important;
+}
+
+.text-lg {
+  font-size: 1.125rem !important;
+  line-height: 1.75rem !important;
+}
+
+.text-sm {
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
+
+.text-gray-600 {
+  color: #4b5563 !important;
+}
+
+.text-gray-900 {
+  color: #111827 !important;
+}
+
+.text-gray-400 {
+  color: #9ca3af !important;
+}
+
+.text-gray-500 {
+  color: #6b7280 !important;
+}
+
+.font-bold {
+  font-weight: 700 !important;
+}
+
+.font-medium {
+  font-weight: 500 !important;
+}
+
+.font-semibold {
+  font-weight: 600 !important;
+}
+
+/* Margin and padding */
+.mt-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mt-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mb-8 {
+  margin-bottom: 2rem !important;
+}
+
+.py-4 {
+  padding: 1rem 0 !important;
+}
+
+.py-8 {
+  padding: 2rem 0 !important;
+}
+
+/* Border radius */
+.rounded-lg {
+  border-radius: 0.5rem !important;
+}
+
+/* Background colors */
+.bg-white {
+  background-color: white !important;
+}
+
+.bg-gray-50 {
+  background-color: #f9fafb !important;
+}
+
+.bg-blue-50 {
+  background-color: #eff6ff !important;
+}
+
+.bg-green-50 {
+  background-color: #f0fdf4 !important;
+}
+
+.bg-red-50 {
+  background-color: #fef2f2 !important;
+}
+
+/* Border colors */
+.border-blue-200 {
+  border-color: #bfdbfe !important;
+}
+
+.border-green-200 {
+  border-color: #bbf7d0 !important;
+}
+
+.border-red-200 {
+  border-color: #fecaca !important;
+}
+
+/* Text colors */
+.text-blue-900 {
+  color: #1e3a8a !important;
+}
+
+.text-green-900 {
+  color: #14532d !important;
+}
+
+.text-red-800 {
+  color: #991b1b !important;
+}
+
+/* Display utilities */
+.block {
+  display: block !important;
+}
+
+.inline-block {
+  display: inline-block !important;
+}
+
+/* Position utilities */
+.relative {
+  position: relative !important;
+}
+
+.absolute {
+  position: absolute !important;
+}
+
+/* Width utilities */
+.w-48 {
+  width: 12rem !important;
+}
+
+.w-full {
+  width: 100% !important;
+}
+
+/* Height utilities */
+.h-8 {
+  height: 2rem !important;
+}
+
+.h-12 {
+  height: 3rem !important;
+}
+
+.w-8 {
+  width: 2rem !important;
+}
+
+.h-6 {
+  height: 1.5rem !important;
+}
+
+.w-6 {
+  width: 1.5rem !important;
+}
+
+/* Animation */
+.animate-spin {
+  animation: spin 1s linear infinite !important;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Icon styling */
+.nui-icon {
+  display: inline-block !important;
+  vertical-align: middle !important;
+}
+
+/* Modal styling */
+.nui-modal {
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
+}
+
+/* Force logo to be small */
+img[src*="logo"], .logo-image {
+  height: 2rem !important;
+  width: auto !important;
+  max-height: 2rem !important;
+  object-fit: contain !important;
 }
diff --git a/pages/[slug].vue b/pages/[slug].vue
index afcef8d..f241fc2 100644
--- a/pages/[slug].vue
+++ b/pages/[slug].vue
@@ -5,7 +5,7 @@
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center py-4">
           <div class="flex items-center">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-6 w-auto mr-2" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="logo-image" />
             <UButton
               @click="navigateTo('/')"
               variant="ghost"
diff --git a/pages/admin.vue b/pages/admin.vue
index 7d8f683..ef571da 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -5,7 +5,7 @@
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center py-4">
           <div class="flex items-center">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-6 w-auto mr-2" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="logo-image" />
             <UButton
               @click="navigateTo('/')"
               variant="ghost"
diff --git a/pages/index.vue b/pages/index.vue
index be89053..86165da 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,7 +6,7 @@
         <div class="flex justify-between items-center py-4">
           <!-- Logo -->
           <div class="flex items-center">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-6 w-auto mr-2" />
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="logo-image" />
           </div>
 
           <!-- Welcome Message -->