diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..0b72e1f
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,23 @@
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #f8f9fa;
+}
+
+.navbar-brand {
+    font-weight: 600;
+}
+
+.card {
+    border: none;
+    border-radius: 0.5rem;
+}
+
+.btn-primary {
+    background-color: #3498db;
+    border-color: #3498db;
+}
+
+.btn-primary:hover {
+    background-color: #2980b9;
+    border-color: #2980b9;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..be427b7
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1 @@
+// Custom javascript can be added here.
diff --git a/config/db.php b/config/db.php
new file mode 100644
index 0000000..e46e348
--- /dev/null
+++ b/config/db.php
@@ -0,0 +1,20 @@
+<?php
+define('DB_HOST', '127.0.0.1');
+define('DB_USER', 'root');
+define('DB_PASS', '');
+define('DB_NAME', 'sikms');
+
+function db() {
+    static $pdo;
+    if ($pdo) {
+        return $pdo;
+    }
+    try {
+        $pdo = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_NAME, DB_USER, DB_PASS);
+        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+        return $pdo;
+    } catch (PDOException $e) {
+        die("Koneksi database gagal: " . $e->getMessage());
+    }
+}
+?>
\ No newline at end of file
diff --git a/config/wablas.php b/config/wablas.php
new file mode 100644
index 0000000..6ab259c
--- /dev/null
+++ b/config/wablas.php
@@ -0,0 +1,4 @@
+<?php
+define('WABLAS_API_KEY', 'NANTI');
+define('WABLAS_SENDER_ID', '');
+?>
\ No newline at end of file
diff --git a/db/database.sql b/db/database.sql
new file mode 100644
index 0000000..cca6bd7
--- /dev/null
+++ b/db/database.sql
@@ -0,0 +1,50 @@
+CREATE TABLE IF NOT EXISTS `users` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `username` varchar(50) NOT NULL,
+  `password` varchar(255) NOT NULL,
+  `role` enum('admin','guru','siswa') NOT NULL,
+  `nama_lengkap` varchar(100) DEFAULT NULL,
+  `nomor_induk` varchar(20) DEFAULT NULL,
+  `nomor_wa_orang_tua` varchar(20) DEFAULT NULL,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `username` (`username`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE IF NOT EXISTS `izin` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `user_id` int(11) NOT NULL,
+  `tanggal_izin` datetime NOT NULL,
+  `alasan` text NOT NULL,
+  `status` enum('menunggu','disetujui','ditolak','selesai') NOT NULL DEFAULT 'menunggu',
+  `guru_id` int(11) DEFAULT NULL,
+  `admin_id` int(11) DEFAULT NULL,
+  `waktu_kembali` datetime DEFAULT NULL,
+  `created_at` timestamp NOT NULL DEFAULT current_timestamp(),
+  PRIMARY KEY (`id`),
+  KEY `user_id` (`user_id`),
+  CONSTRAINT `izin_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE IF NOT EXISTS `log_aktivitas` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `user_id` int(11) DEFAULT NULL,
+  `aktivitas` varchar(255) NOT NULL,
+  `timestamp` timestamp NOT NULL DEFAULT current_timestamp(),
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Data Dummy
+INSERT INTO `users` (`id`, `username`, `password`, `role`, `nama_lengkap`, `nomor_induk`) VALUES
+(1, 'admin1', '$2y$10$g.g.j.Z.d.2...//..//..//..//..//..//..//..//..//..//', 'admin', 'Admin Satu', NULL),
+(2, 'admin2', '$2y$10$g.g.j.Z.d.2...//..//..//..//..//..//..//..//..//..//', 'admin', 'Admin Dua', NULL),
+(3, '1001', '$2y$10$g.g.j.Z.d.2...//..//..//..//..//..//..//..//..//..//', 'siswa', 'Siswa Satu', '1001'),
+(4, '1002', '$2y$10$g.g.j.Z.d.2...//..//..//..//..//..//..//..//..//..//', 'siswa', 'Siswa Dua', '1002'),
+(5, '1003', '$2y$10$g.g.j.Z.d.2...//..//..//..//..//..//..//..//..//..//', 'siswa', 'Siswa Tiga', '1003'),
+(6, 'guru1', '$2y$10$g.g.j.Z.d.2...//..//..//..//..//..//..//..//..//..//', 'guru', 'Guru Satu', NULL);
+
+INSERT INTO `izin` (`id`, `user_id`, `tanggal_izin`, `alasan`, `status`, `guru_id`, `admin_id`, `waktu_kembali`) VALUES
+(1, 3, '2025-10-23 10:00:00', 'Sakit gigi', 'disetujui', 6, 1, NULL),
+(2, 4, '2025-10-23 11:00:00', 'Keperluan keluarga', 'menunggu', NULL, NULL, NULL),
+(3, 5, '2025-10-23 09:30:00', 'Ada urusan mendadak', 'ditolak', NULL, 2, NULL),
+(4, 3, '2025-10-22 14:00:00', 'Pulang lebih awal', 'selesai', 6, 1, '2025-10-22 15:00:00'),
+(5, 4, '2025-10-24 08:00:00', 'Mengikuti lomba', 'menunggu', NULL, NULL, NULL);
diff --git a/includes/functions.php b/includes/functions.php
new file mode 100644
index 0000000..ac63cf9
--- /dev/null
+++ b/includes/functions.php
@@ -0,0 +1,25 @@
+<?php
+require_once __DIR__ . '/../config/db.php';
+
+function log_activity($user_id, $activity) {
+    try {
+        $pdo = db();
+        $stmt = $pdo->prepare("INSERT INTO log_aktivitas (user_id, aktivitas) VALUES (?, ?)");
+        $stmt->execute([$user_id, $activity]);
+    } catch (PDOException $e) {
+        // Optionally log error to a file
+    }
+}
+
+function check_auth($roles = []) {
+    if (!isset($_SESSION['user'])) {
+        header('Location: /login.php');
+        exit();
+    }
+    if (!empty($roles) && !in_array($_SESSION['user']['role'], $roles)) {
+        http_response_code(403);
+        echo "Forbidden";
+        exit();
+    }
+}
+?>
\ No newline at end of file
diff --git a/index.php b/index.php
index 7205f3d..98ccca6 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,27 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/templates/header.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
-    </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+if (!isset($_SESSION['user'])) {
+    header('Location: /login.php');
+    exit();
+}
+
+$role = $_SESSION['user']['role'];
+
+switch ($role) {
+    case 'admin':
+        header('Location: /pages/admin/dashboard.php');
+        break;
+    case 'guru':
+        header('Location: /pages/guru/dashboard.php');
+        break;
+    case 'siswa':
+        header('Location: /pages/siswa/dashboard.php');
+        break;
+    default:
+        header('Location: /login.php');
+        break;
+}
+
+require_once __DIR__ . '/templates/footer.php';
+?>
\ No newline at end of file
diff --git a/login.php b/login.php
new file mode 100644
index 0000000..13665ce
--- /dev/null
+++ b/login.php
@@ -0,0 +1,69 @@
+<?php
+require_once __DIR__ . '/config/db.php';
+require_once __DIR__ . '/includes/functions.php';
+require_once __DIR__ . '/templates/header.php';
+
+if (isset($_SESSION['user'])) {
+    header('Location: /index.php');
+    exit();
+}
+
+$error = '';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $username = $_POST['username'] ?? '';
+    $password = $_POST['password'] ?? '';
+
+    if (empty($username) || empty($password)) {
+        $error = 'Username dan password tidak boleh kosong.';
+    } else {
+        $pdo = db();
+        $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
+        $stmt->execute([$username]);
+        $user = $stmt->fetch(PDO::FETCH_ASSOC);
+
+        if ($user && password_verify($password, $user['password'])) {
+            $_SESSION['user'] = [
+                'id' => $user['id'],
+                'username' => $user['username'],
+                'role' => $user['role'],
+                'nama_lengkap' => $user['nama_lengkap']
+            ];
+            log_activity($user['id'], "User logged in");
+            header('Location: /index.php');
+            exit();
+        } else {
+            $error = 'Username atau password salah.';
+            log_activity(null, "Failed login attempt for username: $username");
+        }
+    }
+}
+?>
+
+<div class="container vh-100 d-flex justify-content-center align-items-center">
+    <div class="card shadow-lg" style="width: 22rem;">
+        <div class="card-body p-5">
+            <h3 class="card-title text-center mb-4">Login SIKMS</h3>
+            <?php if ($error): ?>
+                <div class="alert alert-danger" role="alert">
+                    <?php echo $error; ?>
+                </div>
+            <?php endif; ?>
+            <form method="POST">
+                <div class="mb-3">
+                    <label for="username" class="form-label">Username / NIS</label>
+                    <input type="text" class="form-control" id="username" name="username" required>
+                </div>
+                <div class="mb-3">
+                    <label for="password" class="form-label">Password</label>
+                    <input type="password" class="form-control" id="password" name="password" required>
+                </div>
+                <div class="d-grid">
+                    <button type="submit" class="btn btn-primary">Login</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/templates/footer.php'; ?>
\ No newline at end of file
diff --git a/logout.php b/logout.php
new file mode 100644
index 0000000..e2ffa2b
--- /dev/null
+++ b/logout.php
@@ -0,0 +1,12 @@
+<?php
+require_once __DIR__ . '/includes/functions.php';
+session_start();
+
+if (isset($_SESSION['user'])) {
+    log_activity($_SESSION['user']['id'], "User logged out");
+    session_destroy();
+}
+
+header('Location: /login.php');
+exit();
+?>
\ No newline at end of file
diff --git a/pages/admin/dashboard.php b/pages/admin/dashboard.php
new file mode 100644
index 0000000..15e829d
--- /dev/null
+++ b/pages/admin/dashboard.php
@@ -0,0 +1,23 @@
+<?php
+require_once __DIR__ . '/../../templates/header.php';
+require_once __DIR__ . '/../../includes/functions.php';
+
+check_auth(['admin']);
+
+require_once __DIR__ . '/../../templates/navbar.php';
+?>
+
+<div class="container mt-4">
+    <div class="card">
+        <div class="card-header">
+            <h3>Dashboard Admin</h3>
+        </div>
+        <div class="card-body">
+            <h5 class="card-title">Selamat Datang, <?php echo htmlspecialchars($_SESSION['user']['nama_lengkap']); ?>!</h5>
+            <p class="card-text">Anda login sebagai Admin. Anda dapat mengelola izin siswa dan melihat aktivitas sistem.</p>
+            <!-- Statistics can be added here -->
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/../../templates/footer.php'; ?>
\ No newline at end of file
diff --git a/pages/admin/izin.php b/pages/admin/izin.php
new file mode 100644
index 0000000..5b316a1
--- /dev/null
+++ b/pages/admin/izin.php
@@ -0,0 +1,22 @@
+<?php
+require_once __DIR__ . '/../../templates/header.php';
+require_once __DIR__ . '/../../includes/functions.php';
+
+check_auth(['admin']);
+
+require_once __DIR__ . '/../../templates/navbar.php';
+?>
+
+<div class="container mt-4">
+    <div class="card">
+        <div class="card-header">
+            <h3>Manajemen Izin</h3>
+        </div>
+        <div class="card-body">
+            <p>Halaman ini akan menampilkan daftar semua izin yang diajukan oleh siswa.</p>
+            <!-- Izin table will be here -->
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/../../templates/footer.php'; ?>
\ No newline at end of file
diff --git a/pages/admin/log.php b/pages/admin/log.php
new file mode 100644
index 0000000..e3c9d21
--- /dev/null
+++ b/pages/admin/log.php
@@ -0,0 +1,22 @@
+<?php
+require_once __DIR__ . '/../../templates/header.php';
+require_once __DIR__ . '/../../includes/functions.php';
+
+check_auth(['admin']);
+
+require_once __DIR__ . '/../../templates/navbar.php';
+?>
+
+<div class="container mt-4">
+    <div class="card">
+        <div class="card-header">
+            <h3>Log Aktivitas</h3>
+        </div>
+        <div class="card-body">
+            <p>Halaman ini akan menampilkan log aktivitas pengguna dalam sistem.</p>
+            <!-- Log table will be here -->
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/../../templates/footer.php'; ?>
\ No newline at end of file
diff --git a/pages/guru/dashboard.php b/pages/guru/dashboard.php
new file mode 100644
index 0000000..f6c0d51
--- /dev/null
+++ b/pages/guru/dashboard.php
@@ -0,0 +1,22 @@
+<?php
+require_once __DIR__ . '/../../templates/header.php';
+require_once __DIR__ . '/../../includes/functions.php';
+
+check_auth(['guru']);
+
+require_once __DIR__ . '/../../templates/navbar.php';
+?>
+
+<div class="container mt-4">
+    <div class="card">
+        <div class="card-header">
+            <h3>Dashboard Guru</h3>
+        </div>
+        <div class="card-body">
+            <h5 class="card-title">Selamat Datang, <?php echo htmlspecialchars($_SESSION['user']['nama_lengkap']); ?>!</h5>
+            <p class="card-text">Anda login sebagai Guru. Anda dapat mereview pengajuan izin dari siswa.</p>
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/../../templates/footer.php'; ?>
\ No newline at end of file
diff --git a/pages/guru/izin.php b/pages/guru/izin.php
new file mode 100644
index 0000000..0265896
--- /dev/null
+++ b/pages/guru/izin.php
@@ -0,0 +1,22 @@
+<?php
+require_once __DIR__ . '/../../templates/header.php';
+require_once __DIR__ . '/../../includes/functions.php';
+
+check_auth(['guru']);
+
+require_once __DIR__ . '/../../templates/navbar.php';
+?>
+
+<div class="container mt-4">
+    <div class="card">
+        <div class="card-header">
+            <h3>Review Izin Siswa</h3>
+        </div>
+        <div class="card-body">
+            <p>Halaman ini akan menampilkan daftar izin yang perlu direview oleh guru.</p>
+            <!-- Izin table for review will be here -->
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/../../templates/footer.php'; ?>
\ No newline at end of file
diff --git a/pages/siswa/ajukan_izin.php b/pages/siswa/ajukan_izin.php
new file mode 100644
index 0000000..956fff1
--- /dev/null
+++ b/pages/siswa/ajukan_izin.php
@@ -0,0 +1,22 @@
+<?php
+require_once __DIR__ . '/../../templates/header.php';
+require_once __DIR__ . '/../../includes/functions.php';
+
+check_auth(['siswa']);
+
+require_once __DIR__ . '/../../templates/navbar.php';
+?>
+
+<div class="container mt-4">
+    <div class="card">
+        <div class="card-header">
+            <h3>Form Pengajuan Izin</h3>
+        </div>
+        <div class="card-body">
+            <p>Halaman ini akan berisi form untuk mengajukan izin keluar sekolah.</p>
+            <!-- Leave application form will be here -->
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/../../templates/footer.php'; ?>
\ No newline at end of file
diff --git a/pages/siswa/dashboard.php b/pages/siswa/dashboard.php
new file mode 100644
index 0000000..19be615
--- /dev/null
+++ b/pages/siswa/dashboard.php
@@ -0,0 +1,23 @@
+<?php
+require_once __DIR__ . '/../../templates/header.php';
+require_once __DIR__ . '/../../includes/functions.php';
+
+check_auth(['siswa']);
+
+require_once __DIR__ . '/../../templates/navbar.php';
+?>
+
+<div class="container mt-4">
+    <div class="card">
+        <div class="card-header">
+            <h3>Dashboard Siswa</h3>
+        </div>
+        <div class="card-body">
+            <h5 class="card-title">Selamat Datang, <?php echo htmlspecialchars($_SESSION['user']['nama_lengkap']); ?>!</h5>
+            <p class="card-text">Anda login sebagai Siswa. Di sini Anda dapat mengajukan izin keluar dan melihat riwayat izin Anda.</p>
+            <a href="/pages/siswa/ajukan_izin.php" class="btn btn-primary">Ajukan Izin Baru</a>
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/../../templates/footer.php'; ?>
\ No newline at end of file
diff --git a/templates/footer.php b/templates/footer.php
new file mode 100644
index 0000000..87c1e23
--- /dev/null
+++ b/templates/footer.php
@@ -0,0 +1,4 @@
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="/assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/header.php b/templates/header.php
new file mode 100644
index 0000000..429e125
--- /dev/null
+++ b/templates/header.php
@@ -0,0 +1,22 @@
+<?php session_start(); ?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SIKMS - Sistem Izin Keluar-Masuk Sekolah</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/assets/css/style.css">
+    <meta name="description" content="Built with Flatlogic Generator">
+    <meta name="keywords" content="school permit system, student leave management, php mysql, student attendance, school administration, Built with Flatlogic Generator">
+    <meta property="og:title" content="sikms">
+    <meta property="og:description" content="Built with Flatlogic Generator">
+    <meta property="og:image" content="">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="">
+</head>
+<body style="background-color: #ecf0f1; font-family: 'Poppins', sans-serif;">
diff --git a/templates/navbar.php b/templates/navbar.php
new file mode 100644
index 0000000..3ef6f4f
--- /dev/null
+++ b/templates/navbar.php
@@ -0,0 +1,49 @@
+<?php
+$current_page = basename($_SERVER['PHP_SELF']);
+$user_role = $_SESSION['user']['role'] ?? '';
+?>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
+    <div class="container">
+        <a class="navbar-brand" href="/index.php">SIKMS</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ms-auto">
+                <?php if (isset($_SESSION['user'])): ?>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/index.php">Dashboard</a>
+                    </li>
+                    <?php if ($user_role === 'admin'): ?>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/pages/admin/izin.php">Manajemen Izin</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/pages/admin/log.php">Log Aktivitas</a>
+                        </li>
+                    <?php elseif ($user_role === 'guru'): ?>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/pages/guru/izin.php">Review Izin</a>
+                        </li>
+                    <?php elseif ($user_role === 'siswa'): ?>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/pages/siswa/ajukan_izin.php">Ajukan Izin</a>
+                        </li>
+                    <?php endif; ?>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <i class="bi bi-person-circle"></i> <?php echo htmlspecialchars($_SESSION['user']['nama_lengkap']); ?>
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                            <li><a class="dropdown-item" href="/logout.php">Logout</a></li>
+                        </ul>
+                    </li>
+                <?php else: ?>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/login.php">Login</a>
+                    </li>
+                <?php endif; ?>
+            </ul>
+        </div>
+    </div>
+</nav>
\ No newline at end of file