diff --git a/templates/admin.templ b/templates/admin.templ
index 328d74f..0dc277a 100644
--- a/templates/admin.templ
+++ b/templates/admin.templ
@@ -7,6 +7,7 @@ templ Admin(user User) {
         <meta charset="UTF-8">
         <title>Admin Dashboard - Bookmann</title>
         <script src="/static/htmx.min.js"></script>
+        <script src="/static/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
         <style>
             :root {
diff --git a/templates/admin_library.templ b/templates/admin_library.templ
index e633da1..7f84824 100644
--- a/templates/admin_library.templ
+++ b/templates/admin_library.templ
@@ -7,6 +7,7 @@ templ AdminLibrary(user User) {
         <meta charset="UTF-8">
         <title>Library Management - Bookmann</title>
         <script src="/static/htmx.min.js"></script>
+        <script src="/static/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
         <style>
             :root {
diff --git a/templates/admin_profile.templ b/templates/admin_profile.templ
index 5305030..ffdc645 100644
--- a/templates/admin_profile.templ
+++ b/templates/admin_profile.templ
@@ -7,6 +7,7 @@ templ AdminProfile(user User) {
         <meta charset="UTF-8">
         <title>Profile Settings - Bookmann</title>
         <script src="/static/htmx.min.js"></script>
+        <script src="/static/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
         <style>
             :root {
diff --git a/templates/dashboard.templ b/templates/dashboard.templ
index 1e9d003..45ba0fa 100644
--- a/templates/dashboard.templ
+++ b/templates/dashboard.templ
@@ -8,6 +8,7 @@ templ Dashboard(user User) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Dashboard - Bookmann</title>
         <script src="/static/htmx.min.js"></script>
+        <script src="/static/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
         <style>
             :root {
diff --git a/templates/index.templ b/templates/index.templ
index 110125a..1f569ef 100644
--- a/templates/index.templ
+++ b/templates/index.templ
@@ -8,6 +8,7 @@ templ Index(loggedIn bool) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Bookmann - Home</title>
         <script src="/static/htmx.min.js"></script>
+        <script src="/static/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
         <style>
             :root {
@@ -238,59 +239,7 @@ templ Index(loggedIn bool) {
             </div>
         }
 
-        <script>
-            function applyTheme(theme) {
-                document.body.className = `theme-${theme}`;
-                localStorage.setItem('theme', theme);
-            }
-            function loadTheme() {
-                const theme = localStorage.getItem('theme') || 'tokyo-night';
-                applyTheme(theme);
-            }
-            function changeTheme() {
-                const theme = document.getElementById('theme-select').value;
-                applyTheme(theme);
-                // Save to server if logged in
-                fetch('/api/auth/theme', {
-                    method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': 'Bearer ' + localStorage.getItem('token')
-                    },
-                    body: JSON.stringify({ theme })
-                }).catch(err => console.log('Theme save failed', err));
-            }
-            function loadUserTheme() {
-                // If logged in, load from profile
-                const token = localStorage.getItem('token');
-                if (token) {
-                    fetch('/api/auth/profile', {
-                        headers: { 'Authorization': 'Bearer ' + token }
-                    }).then(res => res.json()).then(data => {
-                        if (data.theme) applyTheme(data.theme);
-                    }).catch(() => {});
-                }
-            }
-            document.addEventListener('DOMContentLoaded', () => {
-                loadTheme();
-                loadUserTheme();
-                document.getElementById('theme-select').value = localStorage.getItem('theme') || 'tokyo-night';
-
-                // Smooth scroll for anchor links
-                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-                    anchor.addEventListener('click', function (e) {
-                        e.preventDefault();
-                        const target = document.querySelector(this.getAttribute('href'));
-                        if (target) {
-                            target.scrollIntoView({
-                                behavior: 'smooth',
-                                block: 'start'
-                            });
-                        }
-                    });
-                });
-            });
-        </script>
+        <script src="/static/theme.js"></script>
     </body>
     </html>
 }
\ No newline at end of file
diff --git a/templates/login.templ b/templates/login.templ
index 7c1d13b..af67205 100644
--- a/templates/login.templ
+++ b/templates/login.templ
@@ -8,6 +8,7 @@ templ Login() {
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Login</title>
         <script src="/static/htmx.min.js"></script>
+        <script src="/static/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
         <style>
             :root {
diff --git a/templates/register.templ b/templates/register.templ
index 97ff15a..5c4307c 100644
--- a/templates/register.templ
+++ b/templates/register.templ
@@ -8,6 +8,7 @@ templ Register() {
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Register</title>
         <script src="/static/htmx.min.js"></script>
+        <script src="/static/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
         <style>
             :root {