diff --git a/Pasted image.png b/Pasted image.png
new file mode 100644
index 0000000..caf7ed2
Binary files /dev/null and b/Pasted image.png differ
diff --git a/backend/holy_backend/settings.py b/backend/holy_backend/settings.py
index f5168d5..ff73469 100644
--- a/backend/holy_backend/settings.py
+++ b/backend/holy_backend/settings.py
@@ -69,7 +69,7 @@ ROOT_URLCONF = 'holy_backend.urls'
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, '..', 'frontend', 'dist')],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -142,6 +142,7 @@ USE_TZ = True
 
 STATIC_URL = 'static/'
 STATIC_ROOT = BASE_DIR / 'staticfiles'
+STATICFILES_DIRS = [os.path.join(BASE_DIR, '..', 'frontend', 'dist')]
 STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'
 WHITENOISE_INDEX_PAGE = True
 
diff --git a/backend/holy_backend/urls.py b/backend/holy_backend/urls.py
index ce0dbf7..acc148f 100644
--- a/backend/holy_backend/urls.py
+++ b/backend/holy_backend/urls.py
@@ -5,15 +5,14 @@ from rest_framework.authtoken.views import obtain_auth_token
 from django.conf import settings
 from django.conf.urls.static import static
 from django.views.static import serve
-from django.views.static import serve
-from django.conf import settings
+from django.views.generic.base import TemplateView
 import os
 
 # Clean the admin path
 admin_url = os.environ.get('ADMIN_URL', 'admin').strip('/')
 
-def serve_index(request, resource=None):
-    return serve(request, 'index.html', document_root=settings.STATIC_ROOT)
+# Catch-all view for React
+index_view = TemplateView.as_view(template_name="index.html")
 
 urlpatterns = [
     # Robots.txt
@@ -30,6 +29,6 @@ urlpatterns = [
     path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),
     
     # Catch-all for React Frontend
-    path('', serve_index, name='index'),
-    path('<path:resource>', serve_index),
+    path('', index_view, name='index'),
+    path('<path:resource>', index_view),
 ]
diff --git a/frontend/src/pages/AdminDashboard.tsx b/frontend/src/pages/AdminDashboard.tsx
index 240aaac..7afd594 100644
--- a/frontend/src/pages/AdminDashboard.tsx
+++ b/frontend/src/pages/AdminDashboard.tsx
@@ -11,7 +11,6 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import PeopleIcon from '@mui/icons-material/People';
 import WallpaperIcon from '@mui/icons-material/Wallpaper';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import api from '../api';
@@ -273,7 +272,7 @@ const AdminDashboard: React.FC = () => {
 
             {currentTab === 2 && (
                 <Box>
-                    <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 3 }}>{t('admin.banners')}</Typography>
+                    <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 3 }}>{t('admin.banners')} ({banners.length})</Typography>
                     
                     {banners.length === 0 ? (
                         <Card variant="outlined" sx={{ p: 4, textAlign: 'center', borderRadius: 3 }}>
@@ -287,57 +286,44 @@ const AdminDashboard: React.FC = () => {
                             </Button>
                         </Card>
                     ) : (
-                        <Grid container spacing={3}>
+                        <Stack spacing={3}>
                             {banners.map((banner) => (
-                                <Grid size={{ xs: 12, md: 4 }} key={banner.id}>
-                                    <Card sx={{ borderRadius: 3, position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
-                                        {banner.is_active && (
-                                            <Chip 
-                                                icon={<CheckCircleIcon />} 
-                                                label="Active" 
-                                                color="success" 
-                                                size="small"
-                                                sx={{ position: 'absolute', top: 12, right: 12, zIndex: 2 }}
-                                            />
-                                        )}
-                                        <CardContent sx={{ flexGrow: 1 }}>
-                                            <Typography variant="h6" sx={{ fontWeight: 'bold', mb: 1 }}>{banner.name}</Typography>
-                                            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>{banner.description}</Typography>
-                                            
-                                            <Box sx={{ mt: 2, p: 2, bgcolor: 'action.hover', borderRadius: 2 }}>
-                                                <Typography variant="caption" sx={{ fontWeight: 'bold', display: 'block', mb: 1 }}>Settings:</Typography>
-                                                <pre style={{ margin: 0, fontSize: '0.7rem', overflow: 'auto' }}>
-                                                    {JSON.stringify(banner.settings, null, 2)}
-                                                </pre>
-                                            </Box>
-                                        </CardContent>
-                                        <Box sx={{ p: 2, pt: 0 }}>
-                                            <Stack direction="row" spacing={1}>
+                                <Card key={banner.id} sx={{ borderRadius: 3, border: '1px solid', borderColor: 'divider' }}>
+                                    <CardContent>
+                                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                                            <Typography variant="h6" sx={{ fontWeight: 'bold' }}>{banner.name} (Slug: {banner.slug})</Typography>
+                                            {banner.is_active && <Chip label="Active" color="success" size="small" />}
+                                        </Box>
+                                        
+                                        <Typography variant="body2" sx={{ mb: 2 }}>{banner.description}</Typography>
+                                        
+                                        <Box sx={{ p: 2, bgcolor: 'action.hover', borderRadius: 2, mb: 2 }}>
+                                            <pre style={{ margin: 0, fontSize: '0.8rem' }}>{JSON.stringify(banner.settings, null, 2)}</pre>
+                                        </Box>
+
+                                        <Stack direction="row" spacing={2}>
+                                            <Button 
+                                                variant="outlined" size="small"
+                                                onClick={() => {
+                                                    setSelectedBanner(banner);
+                                                    setIsSettingsDialogOpen(true);
+                                                }}
+                                            >
+                                                Edit Settings
+                                            </Button>
+                                            {!banner.is_active && (
                                                 <Button 
-                                                    fullWidth 
-                                                    variant="outlined" 
-                                                    startIcon={<EditIcon />}
-                                                    onClick={() => {
-                                                        setSelectedBanner(banner);
-                                                        setIsSettingsDialogOpen(true);
-                                                    }}
-                                                >
-                                                    Edit Settings
-                                                </Button>
-                                                <Button 
-                                                    fullWidth 
-                                                    variant={banner.is_active ? "outlined" : "contained"} 
-                                                    disabled={banner.is_active}
+                                                    variant="contained" size="small"
                                                     onClick={() => handleActivateBanner(banner.id)}
                                                 >
-                                                    {banner.is_active ? "Currently Active" : "Set as Active"}
+                                                    Set as Active
                                                 </Button>
-                                            </Stack>
-                                        </Box>
-                                    </Card>
-                                </Grid>
+                                            )}
+                                        </Stack>
+                                    </CardContent>
+                                </Card>
                             ))}
-                        </Grid>
+                        </Stack>
                     )}
                 </Box>
             )}