diff --git a/themes/modern/views/page-footer.php b/themes/modern/views/page-footer.php
new file mode 100644
index 0000000..6ba8682
--- /dev/null
+++ b/themes/modern/views/page-footer.php
@@ -0,0 +1,31 @@
+    <!-- Modern Theme Footer -->
+    <footer class="footer mt-5 py-3 bg-light">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <span class="text-muted">
+                        &copy; <?= date('Y') ?> <?= htmlspecialchars($config['site_name'] ?? '') ?> v<?= htmlspecialchars($config['version'] ?? '') ?>
+                    </span>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <span class="text-muted">
+                        <?= htmlspecialchars($themeName ?? 'Modern Theme') ?>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Theme-specific JavaScript -->
+    <script src="<?= \App\Helpers\Theme::asset('js/theme.js') ?>"></script>
+
+    <!-- Global site scripts -->
+    <script src="<?= htmlspecialchars($app_root) ?>static/js/messages.js"></script>
+
+    <?php if ($page === 'graphs'): ?>
+    <script src="<?= htmlspecialchars($app_root) ?>static/js/graphs.js"></script>
+    <?php endif; ?>
+
+    <?php do_hook('footer_scripts'); ?>
+</body>
+</html>
diff --git a/themes/modern/views/page-header.php b/themes/modern/views/page-header.php
new file mode 100644
index 0000000..55de508
--- /dev/null
+++ b/themes/modern/views/page-header.php
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($config['site_name'] ?? '') ?> - <?= htmlspecialchars($pageTitle ?? 'Dashboard') ?></title>
+
+    <!-- Bootstrap 5.3.3 CSS -->
+    <link rel="stylesheet" type="text/css" href="<?= htmlspecialchars($app_root) ?>static/libs/bootstrap/bootstrap-5.3.3.min.css">
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" type="text/css" href="<?= htmlspecialchars($app_root) ?>static/css/main.css">
+
+    <!-- Theme-specific CSS -->
+    <link rel="stylesheet" type="text/css" href="<?= \App\Helpers\Theme::asset('css/theme.css') ?>">
+
+    <!-- jQuery -->
+    <script src="<?= htmlspecialchars($app_root) ?>static/libs/jquery/jquery.min.js"></script>
+
+    <!-- Bootstrap JS -->
+    <script src="<?= htmlspecialchars($app_root) ?>static/libs/bootstrap/popper.min.js"></script>
+    <script src="<?= htmlspecialchars($app_root) ?>static/libs/bootstrap/bootstrap-4.0.0.min.js"></script>
+
+    <?php if (Session::getUsername()): ?>
+    <script>
+    // Restore sidebar state before the page is rendered
+    (function() {
+        var savedState = localStorage.getItem('sidebarState');
+        if (savedState === 'collapsed') {
+            document.documentElement.classList.add('sidebar-collapsed');
+        }
+    })();
+    </script>
+    <?php endif; ?>
+
+    <!-- Page-specific CSS -->
+    <?php if ($page === 'logs'): ?>
+    <link rel="stylesheet" type="text/css" href="<?= htmlspecialchars($app_root) ?>static/css/logs.css">
+    <?php endif; ?>
+
+    <?php if ($page === 'profile'): ?>
+    <link rel="stylesheet" type="text/css" href="<?= htmlspecialchars($app_root) ?>static/css/profile.css">
+    <?php endif; ?>
+
+    <?php if ($page === 'agents'): ?>
+    <script src="<?= htmlspecialchars($app_root) ?>static/js/agents.js"></script>
+    <?php endif; ?>
+
+    <?php if ($page === 'graphs'): ?>
+    <script src="<?= htmlspecialchars($app_root) ?>static/libs/chartjs/chart.umd.min.js"></script>
+    <script src="<?= htmlspecialchars($app_root) ?>static/libs/chartjs/moment.min.js"></script>
+    <script src="<?= htmlspecialchars($app_root) ?>static/libs/chartjs/chartjs-adapter-moment.min.js"></script>
+    <script src="<?= htmlspecialchars($app_root) ?>static/libs/chartjs/chartjs-plugin-zoom.min.js"></script>
+    <?php endif; ?>
+
+    <link rel="icon" type="image/x-icon" href="<?= htmlspecialchars($app_root) ?>static/favicon.ico">
+</head>
+
+<body class="modern-theme">
+    <div id="messages-container" class="container-fluid mt-2"></div>
+
+    <?php if (isset($system_messages) && is_array($system_messages)): ?>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col">
+                <?php foreach ($system_messages as $msg): ?>
+                    <?= Feedback::render($msg['category'], $msg['key'], $msg['custom_message'] ?? null) ?>
+                <?php endforeach; ?>
+            </div>
+        </div>
+    </div>
+    <?php endif; ?>
