From 05876d502f8ed1e3c67e5fa493a86d0aca8749ef Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 21 Mar 2026 21:58:18 +0000
Subject: [PATCH 1/2] Initial plan


From 137b11ab40d8aa4c63c73de4f97525740c3d16ee Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 21 Mar 2026 22:07:45 +0000
Subject: [PATCH 2/2] Changes before error encountered

Co-authored-by: codenimar <119526795+codenimar@users.noreply.github.com>
Agent-Logs-Url: https://github.com/codenimar/blebetalo/sessions/e09ec26f-d364-41c9-90ee-8885c2f19de1
---
 package-lock.json            |  24 +-
 src/App.css                  |   2 +-
 src/App.js                   |  33 +-
 src/components/Header.js     |  71 ++-
 src/components/Navigation.js |  35 +-
 src/contexts/AuthContext.js  |  99 ++++
 src/index.css                | 998 ++++++++++++++++++++++++++++++++++-
 src/pages/Admin.js           | 426 +++++++++++++++
 src/pages/Home.js            |  59 +--
 src/pages/Login.js           | 169 ++++++
 10 files changed, 1823 insertions(+), 93 deletions(-)
 create mode 100644 src/contexts/AuthContext.js
 create mode 100644 src/pages/Admin.js
 create mode 100644 src/pages/Login.js

diff --git a/package-lock.json b/package-lock.json
index 00f169e..f9cac62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15434,22 +15434,6 @@
         }
       }
     },
-    "node_modules/tailwindcss/node_modules/yaml": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
-      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
-      "extraneous": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
@@ -15938,9 +15922,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -15948,7 +15932,7 @@
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/src/App.css b/src/App.css
index 50cda4c..af2ee2f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,7 +6,7 @@
 
 .main-content {
   flex: 1;
-  padding: 20px;
+  padding: 24px 20px;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
diff --git a/src/App.js b/src/App.js
index 3adbaae..6be7935 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,36 @@
 import React, { useState } from 'react';
 import './App.css';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
 import Header from './components/Header';
 import Navigation from './components/Navigation';
+import Login from './pages/Login';
 import Home from './pages/Home';
 import Kids from './pages/Kids';
 import Advanced from './pages/Advanced';
 import SkillTest from './pages/SkillTest';
 import FindTutor from './pages/FindTutor';
 import Resources from './pages/Resources';
+import Admin from './pages/Admin';
 
-function App() {
+function AppContent() {
+    const { user, loading } = useAuth();
     const [currentPage, setCurrentPage] = useState('home');
 
+    if (loading) {
+        return (
+            <div className="loading-screen">
+                <div className="loading-spinner" />
+                <p>Učitavanje...</p>
+            </div>
+        );
+    }
+
+    if (!user) {
+        return <Login />;
+    }
+
     const renderPage = () => {
-        switch(currentPage) {
+        switch (currentPage) {
             case 'home':
                 return <Home setCurrentPage={setCurrentPage} />;
             case 'kids':
@@ -26,6 +43,8 @@ function App() {
                 return <FindTutor />;
             case 'resources':
                 return <Resources />;
+            case 'admin':
+                return user.role === 'admin' ? <Admin /> : <Home setCurrentPage={setCurrentPage} />;
             default:
                 return <Home setCurrentPage={setCurrentPage} />;
         }
@@ -33,7 +52,7 @@ function App() {
 
     return (
         <div className="App">
-            <Header onFindTutor={() => setCurrentPage('find-tutor')} />
+            <Header onFindTutor={() => setCurrentPage('find-tutor')} currentPage={currentPage} setCurrentPage={setCurrentPage} />
             <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
             <main className="main-content">
                 {renderPage()}
@@ -42,4 +61,12 @@ function App() {
     );
 }
 
+function App() {
+    return (
+        <AuthProvider>
+            <AppContent />
+        </AuthProvider>
+    );
+}
+
 export default App;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index cf988ad..7f17ef4 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,16 +1,65 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+
+function Header({ onFindTutor, currentPage, setCurrentPage }) {
+    const { user, logout } = useAuth();
+    const [menuOpen, setMenuOpen] = useState(false);
 
-function Header({ onFindTutor }) {
     return (
-        <header style={{ background: '#2c3e50', color: 'white', padding: '15px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-            <h1 style={{ fontSize: '24px' }}>🇩🇪 Blebetalo</h1>
-            <p style={{ fontSize: '14px', opacity: 0.8 }}>Platforma za učenje nemačkog jezika na srpskom</p>
-            <button
-                onClick={onFindTutor}
-                style={{ background: '#e74c3c', color: 'white', border: 'none', padding: '8px 16px', borderRadius: '4px', cursor: 'pointer', fontSize: '14px' }}
-            >
-                Pronađi Tutora
-            </button>
+        <header className="app-header">
+            <div className="header-brand">
+                <span className="header-flag">🇩🇪</span>
+                <div className="header-brand-text">
+                    <span className="header-title">Blebetalo</span>
+                    <span className="header-subtitle">Učenje nemačkog na srpskom</span>
+                </div>
+            </div>
+
+            <div className="header-actions">
+                <button
+                    className="btn btn-outline-light btn-sm header-tutor-btn"
+                    onClick={onFindTutor}
+                >
+                    👨‍🏫 Tutori
+                </button>
+
+                <div className="user-menu-wrapper">
+                    <button
+                        className="user-avatar-btn"
+                        onClick={() => setMenuOpen(!menuOpen)}
+                        aria-expanded={menuOpen}
+                    >
+                        <span className="user-avatar">
+                            {user?.provider === 'google' ? '🌐' : user?.name?.[0]?.toUpperCase() || '?'}
+                        </span>
+                        <span className="user-name">{user?.name}</span>
+                        <span className="chevron">{menuOpen ? '▲' : '▼'}</span>
+                    </button>
+
+                    {menuOpen && (
+                        <div className="user-dropdown">
+                            <div className="user-dropdown-header">
+                                <strong>{user?.name}</strong>
+                                <small>{user?.role === 'admin' ? '👑 Administrator' : '👤 Korisnik'}</small>
+                            </div>
+                            {user?.role === 'admin' && (
+                                <button
+                                    className="user-dropdown-item"
+                                    onClick={() => { setCurrentPage('admin'); setMenuOpen(false); }}
+                                >
+                                    ⚙️ Admin Panel
+                                </button>
+                            )}
+                            <button
+                                className="user-dropdown-item user-dropdown-logout"
+                                onClick={() => { logout(); setMenuOpen(false); }}
+                            >
+                                🚪 Odjavi se
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
         </header>
     );
 }
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index bbec25c..f9b6745 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -1,32 +1,31 @@
 import React from 'react';
+import { useAuth } from '../contexts/AuthContext';
 
 const navItems = [
-    { id: 'home', label: '🏠 Početna' },
-    { id: 'kids', label: '👦 Za Decu' },
-    { id: 'advanced', label: '🎓 Napredni' },
-    { id: 'skill-test', label: '📝 Test Znanja' },
-    { id: 'find-tutor', label: '👨‍🏫 Tutor' },
-    { id: 'resources', label: '📖 Resursi' },
+    { id: 'home', label: '🏠', text: 'Početna' },
+    { id: 'kids', label: '👦', text: 'Za Decu' },
+    { id: 'advanced', label: '🎓', text: 'Napredni' },
+    { id: 'skill-test', label: '📝', text: 'Test Znanja' },
+    { id: 'find-tutor', label: '👨‍🏫', text: 'Tutori' },
+    { id: 'resources', label: '📖', text: 'Resursi' },
 ];
 
 function Navigation({ currentPage, setCurrentPage }) {
+    const { user } = useAuth();
+    const items = user?.role === 'admin'
+        ? [...navItems, { id: 'admin', label: '⚙️', text: 'Admin' }]
+        : navItems;
+
     return (
-        <nav style={{ background: '#34495e', display: 'flex', flexWrap: 'wrap' }}>
-            {navItems.map(item => (
+        <nav className="app-nav">
+            {items.map((item) => (
                 <button
                     key={item.id}
                     onClick={() => setCurrentPage(item.id)}
-                    style={{
-                        background: currentPage === item.id ? '#2c3e50' : 'transparent',
-                        color: 'white',
-                        border: 'none',
-                        padding: '12px 16px',
-                        cursor: 'pointer',
-                        fontSize: '14px',
-                        borderBottom: currentPage === item.id ? '2px solid #e74c3c' : '2px solid transparent',
-                    }}
+                    className={`nav-btn ${currentPage === item.id ? 'active' : ''}`}
                 >
-                    {item.label}
+                    <span className="nav-icon">{item.label}</span>
+                    <span className="nav-text">{item.text}</span>
                 </button>
             ))}
         </nav>
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
new file mode 100644
index 0000000..2ef7097
--- /dev/null
+++ b/src/contexts/AuthContext.js
@@ -0,0 +1,99 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const AuthContext = createContext(null);
+
+const DEFAULT_USERS = [
+    { username: 'admin', password: 'admin123', name: 'Administrator', role: 'admin' },
+    { username: 'korisnik', password: 'lozinka123', name: 'Test Korisnik', role: 'user' },
+];
+
+export function AuthProvider({ children }) {
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const stored = localStorage.getItem('blebetalo_user');
+        if (stored) {
+            try {
+                setUser(JSON.parse(stored));
+            } catch {
+                localStorage.removeItem('blebetalo_user');
+            }
+        }
+        setLoading(false);
+    }, []);
+
+    const getUsers = () => {
+        const stored = localStorage.getItem('blebetalo_users');
+        if (!stored) {
+            localStorage.setItem('blebetalo_users', JSON.stringify(DEFAULT_USERS));
+            return DEFAULT_USERS;
+        }
+        try {
+            return JSON.parse(stored);
+        } catch {
+            return DEFAULT_USERS;
+        }
+    };
+
+    const login = (username, password) => {
+        const users = getUsers();
+        const found = users.find(
+            (u) => u.username === username && u.password === password
+        );
+        if (found) {
+            const userData = {
+                username: found.username,
+                name: found.name,
+                role: found.role,
+                provider: 'local',
+            };
+            setUser(userData);
+            localStorage.setItem('blebetalo_user', JSON.stringify(userData));
+            return { success: true };
+        }
+        return { success: false, error: 'Pogrešno korisničko ime ili lozinka.' };
+    };
+
+    const loginWithGoogle = () => {
+        const userData = {
+            username: 'google_user',
+            name: 'Google Korisnik',
+            role: 'user',
+            provider: 'google',
+            avatar: 'https://lh3.googleusercontent.com/a/default-user',
+        };
+        setUser(userData);
+        localStorage.setItem('blebetalo_user', JSON.stringify(userData));
+        return { success: true };
+    };
+
+    const register = (username, password, name) => {
+        const users = getUsers();
+        if (users.find((u) => u.username === username)) {
+            return { success: false, error: 'Korisničko ime već postoji.' };
+        }
+        const newUser = { username, password, name, role: 'user' };
+        const updated = [...users, newUser];
+        localStorage.setItem('blebetalo_users', JSON.stringify(updated));
+        const userData = { username, name, role: 'user', provider: 'local' };
+        setUser(userData);
+        localStorage.setItem('blebetalo_user', JSON.stringify(userData));
+        return { success: true };
+    };
+
+    const logout = () => {
+        setUser(null);
+        localStorage.removeItem('blebetalo_user');
+    };
+
+    return (
+        <AuthContext.Provider value={{ user, loading, login, loginWithGoogle, register, logout }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth() {
+    return useContext(AuthContext);
+}
diff --git a/src/index.css b/src/index.css
index 05b6528..8e1b900 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,1002 @@
+:root {
+  --primary: #2c3e50;
+  --primary-dark: #1a252f;
+  --primary-light: #3d5166;
+  --secondary: #34495e;
+  --accent: #e74c3c;
+  --accent-hover: #c0392b;
+  --success: #27ae60;
+  --warning: #f39c12;
+  --danger: #e74c3c;
+  --info: #3498db;
+
+  --bg: #f0f2f5;
+  --bg-card: #ffffff;
+  --bg-hover: #f8f9fa;
+
+  --text-primary: #2c3e50;
+  --text-secondary: #636e72;
+  --text-muted: #b2bec3;
+
+  --border: #dfe6e9;
+  --border-light: #f0f2f5;
+
+  --radius-sm: 6px;
+  --radius: 12px;
+  --radius-lg: 20px;
+
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
+  --shadow: 0 4px 16px rgba(0,0,0,0.1);
+  --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
+  --shadow-hover: 0 8px 24px rgba(0,0,0,0.18);
+
+  --transition: 0.2s ease;
+  --transition-fast: 0.15s ease;
+
+  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  background-color: #f5f5f5;
-  color: #333;
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text-primary);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* =================== BUTTONS =================== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(231,76,60,0.35);
+}
+
+.btn-secondary {
+  background: var(--primary);
+  color: #fff;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--primary-dark);
+  transform: translateY(-1px);
+}
+
+.btn-danger {
+  background: #fff0f0;
+  color: var(--accent);
+  border: 1px solid #ffd5d5;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.btn-outline-light {
+  background: transparent;
+  color: #fff;
+  border: 1.5px solid rgba(255,255,255,0.5);
+}
+
+.btn-outline-light:hover {
+  background: rgba(255,255,255,0.15);
+  border-color: rgba(255,255,255,0.8);
+}
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.btn-full {
+  width: 100%;
+  justify-content: center;
+}
+
+/* =================== FORMS =================== */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.form-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.form-input {
+  padding: 11px 14px;
+  border: 2px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 15px;
+  font-family: var(--font);
+  color: var(--text-primary);
+  background: var(--bg-card);
+  transition: border-color var(--transition), box-shadow var(--transition);
+  outline: none;
+  width: 100%;
+}
+
+.form-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(44,62,80,0.1);
+}
+
+.form-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.form-error {
+  background: #fff0f0;
+  border: 1px solid #ffd5d5;
+  color: var(--accent);
+  padding: 10px 14px;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  margin-bottom: 14px;
+}
+
+/* =================== LOADING =================== */
+.loading-screen {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  gap: 16px;
+  color: var(--text-secondary);
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* =================== LOGIN PAGE =================== */
+.login-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1a252f 0%, #2c3e50 40%, #3d5166 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.login-card {
+  background: #fff;
+  border-radius: var(--radius-lg);
+  padding: 40px 36px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: var(--shadow-lg);
+  animation: slideUp 0.4s ease;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.login-logo {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.login-flag {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.login-title {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--primary);
+}
+
+.login-subtitle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+.login-tabs {
+  display: flex;
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+  padding: 4px;
+  margin-bottom: 24px;
+}
+
+.login-tab {
+  flex: 1;
+  padding: 9px;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  transition: all var(--transition);
+}
+
+.login-tab.active {
+  background: #fff;
+  color: var(--primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.login-form {
+  margin-bottom: 8px;
+}
+
+.login-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 20px 0;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.login-divider::before,
+.login-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.btn-google {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  padding: 11px 20px;
+  border: 2px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: #fff;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  font-family: var(--font);
+}
+
+.btn-google:hover {
+  border-color: #4285F4;
+  background: #f8f9ff;
+  box-shadow: 0 2px 8px rgba(66,133,244,0.2);
+  transform: translateY(-1px);
+}
+
+.google-icon {
+  flex-shrink: 0;
+}
+
+.login-hint {
+  text-align: center;
+  margin-top: 16px;
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 8px 12px;
+  background: #f8f9fa;
+  border-radius: var(--radius-sm);
+}
+
+/* =================== HEADER =================== */
+.app-header {
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+  color: #fff;
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.header-flag {
+  font-size: 28px;
+}
+
+.header-brand-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.header-title {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+}
+
+.header-subtitle {
+  font-size: 11px;
+  opacity: 0.7;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-tutor-btn {
+  display: none;
+}
+
+@media (min-width: 600px) {
+  .header-tutor-btn {
+    display: inline-flex;
+  }
+}
+
+/* User menu */
+.user-menu-wrapper {
+  position: relative;
+}
+
+.user-avatar-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255,255,255,0.15);
+  border: 1.5px solid rgba(255,255,255,0.3);
+  border-radius: 30px;
+  padding: 6px 12px 6px 6px;
+  cursor: pointer;
+  color: #fff;
+  transition: all var(--transition);
+  font-family: var(--font);
+}
+
+.user-avatar-btn:hover {
+  background: rgba(255,255,255,0.25);
+}
+
+.user-avatar {
+  width: 30px;
+  height: 30px;
+  background: var(--accent);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.user-name {
+  font-size: 13px;
+  font-weight: 600;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: none;
+}
+
+@media (min-width: 500px) {
+  .user-name {
+    display: block;
+  }
+}
+
+.chevron {
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+.user-dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  background: #fff;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  min-width: 200px;
+  overflow: hidden;
+  animation: fadeDown 0.15s ease;
+  z-index: 200;
+}
+
+@keyframes fadeDown {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.user-dropdown-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.user-dropdown-header strong {
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.user-dropdown-header small {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.user-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 11px 16px;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  text-align: left;
+  font-family: var(--font);
+}
+
+.user-dropdown-item:hover {
+  background: var(--bg-hover);
+}
+
+.user-dropdown-logout {
+  color: var(--accent);
+  border-top: 1px solid var(--border);
 }
+
+/* =================== NAVIGATION =================== */
+.app-nav {
+  background: var(--secondary);
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.app-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  background: transparent;
+  color: rgba(255,255,255,0.7);
+  border: none;
+  border-bottom: 3px solid transparent;
+  padding: 10px 14px;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-family: var(--font);
+}
+
+.nav-btn:hover {
+  color: #fff;
+  background: rgba(255,255,255,0.08);
+}
+
+.nav-btn.active {
+  color: #fff;
+  border-bottom-color: var(--accent);
+  background: rgba(255,255,255,0.1);
+}
+
+.nav-icon {
+  font-size: 18px;
+}
+
+.nav-text {
+  font-size: 10px;
+}
+
+/* =================== MAIN CONTENT =================== */
+.main-content {
+  flex: 1;
+  padding: 24px 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* =================== HOME PAGE =================== */
+.home-hero {
+  text-align: center;
+  padding: 48px 20px 40px;
+}
+
+.home-hero-title {
+  font-size: clamp(28px, 5vw, 42px);
+  font-weight: 800;
+  color: var(--primary);
+  margin-bottom: 12px;
+  line-height: 1.2;
+}
+
+.home-hero-subtitle {
+  font-size: 18px;
+  color: var(--text-secondary);
+  margin-bottom: 48px;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.home-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.home-card {
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  padding: 32px 24px;
+  cursor: pointer;
+  text-align: center;
+  box-shadow: var(--shadow-sm);
+  border: 2px solid transparent;
+  transition: all var(--transition);
+}
+
+.home-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-hover);
+  border-color: var(--accent);
+}
+
+.home-card-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.home-card-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: 8px;
+}
+
+.home-card-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+/* =================== ADMIN PAGE =================== */
+.admin-page {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.admin-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  flex-wrap: wrap;
+}
+
+.admin-title {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--primary);
+}
+
+.admin-subtitle {
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+.admin-empty {
+  text-align: center;
+  padding: 60px 20px;
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+.admin-empty h3 {
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+
+.admin-tests-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.admin-test-card {
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  padding: 20px;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border);
+  transition: box-shadow var(--transition);
+}
+
+.admin-test-card:hover {
+  box-shadow: var(--shadow);
+}
+
+.admin-test-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.test-category-badge {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 3px 8px;
+  border-radius: 20px;
+  letter-spacing: 0.3px;
+}
+
+.category-opste { background: #e8f4fd; color: #2980b9; }
+.category-deca { background: #fef9e7; color: #f39c12; }
+.category-napredni { background: #f0f0ff; color: #6c5ce7; }
+.category-gramatika { background: #eafaf1; color: #27ae60; }
+.category-vokabular { background: #fef5e7; color: #e67e22; }
+
+.test-date {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.admin-test-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: 6px;
+}
+
+.admin-test-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.admin-test-count {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 14px;
+}
+
+.admin-test-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Admin Form */
+.admin-form-card {
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.form-section {
+  padding: 28px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.form-section:last-child {
+  border-bottom: none;
+}
+
+.form-section-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--bg);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+@media (max-width: 600px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.question-card {
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+  padding: 20px;
+  margin-bottom: 16px;
+  border: 1px solid var(--border);
+}
+
+.question-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.question-number {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--primary);
+  background: rgba(44,62,80,0.1);
+  padding: 4px 10px;
+  border-radius: 20px;
+}
+
+.question-media {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+@media (max-width: 580px) {
+  .question-media {
+    grid-template-columns: 1fr;
+  }
+}
+
+.media-upload-box {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.file-upload-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 20px 12px;
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition);
+  background: var(--bg-card);
+  font-size: 13px;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+.file-upload-label:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+  background: rgba(44,62,80,0.03);
+}
+
+.file-input {
+  display: none;
+}
+
+.file-upload-icon {
+  font-size: 24px;
+}
+
+.file-upload-label small {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.media-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.image-preview {
+  width: 100%;
+  height: 120px;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+}
+
+.audio-preview {
+  width: 100%;
+  height: 40px;
+}
+
+.media-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.media-info span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.options-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.option-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.option-radio {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--success);
+  flex-shrink: 0;
+}
+
+.save-message {
+  margin: 0 28px 16px;
+  padding: 12px 16px;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.save-success {
+  background: #eafaf1;
+  color: #27ae60;
+  border: 1px solid #a9dfbf;
+}
+
+.save-error {
+  background: #fff0f0;
+  color: var(--accent);
+  border: 1px solid #ffd5d5;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px 28px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+}
+
+/* =================== SKILL TEST PAGE =================== */
+.skill-test-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.skill-test-tab {
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: 1.5px solid var(--border);
+  background: var(--bg-card);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  color: var(--text-secondary);
+  font-family: var(--font);
+}
+
+.skill-test-tab.active {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+
+/* =================== RESPONSIVE =================== */
+@media (max-width: 480px) {
+  .main-content {
+    padding: 16px 12px;
+  }
+
+  .login-card {
+    padding: 28px 20px;
+  }
+
+  .app-header {
+    padding: 10px 14px;
+  }
+}
+
diff --git a/src/pages/Admin.js b/src/pages/Admin.js
new file mode 100644
index 0000000..e3763f6
--- /dev/null
+++ b/src/pages/Admin.js
@@ -0,0 +1,426 @@
+import React, { useState, useEffect } from 'react';
+
+function Admin() {
+    const [tests, setTests] = useState([]);
+    const [view, setView] = useState('list'); // 'list' | 'create' | 'edit'
+    const [editingTest, setEditingTest] = useState(null);
+
+    const [testTitle, setTestTitle] = useState('');
+    const [testDescription, setTestDescription] = useState('');
+    const [testCategory, setTestCategory] = useState('opste');
+    const [questions, setQuestions] = useState([createEmptyQuestion()]);
+    const [saveMsg, setSaveMsg] = useState('');
+
+    useEffect(() => {
+        loadTests();
+    }, []);
+
+    function loadTests() {
+        try {
+            const stored = localStorage.getItem('blebetalo_tests');
+            setTests(stored ? JSON.parse(stored) : []);
+        } catch {
+            setTests([]);
+        }
+    }
+
+    function createEmptyQuestion() {
+        return {
+            id: Date.now() + Math.random(),
+            text: '',
+            options: ['', '', '', ''],
+            answer: 0,
+            imageData: null,
+            imageName: null,
+            audioData: null,
+            audioName: null,
+        };
+    }
+
+    function resetForm() {
+        setTestTitle('');
+        setTestDescription('');
+        setTestCategory('opste');
+        setQuestions([createEmptyQuestion()]);
+        setEditingTest(null);
+        setSaveMsg('');
+    }
+
+    function startCreate() {
+        resetForm();
+        setView('create');
+    }
+
+    function startEdit(test) {
+        setEditingTest(test);
+        setTestTitle(test.title);
+        setTestDescription(test.description);
+        setTestCategory(test.category || 'opste');
+        setQuestions(test.questions.map((q) => ({ ...q })));
+        setSaveMsg('');
+        setView('edit');
+    }
+
+    function deleteTest(id) {
+        if (!window.confirm('Obrisati ovaj test?')) return;
+        const updated = tests.filter((t) => t.id !== id);
+        localStorage.setItem('blebetalo_tests', JSON.stringify(updated));
+        setTests(updated);
+    }
+
+    function addQuestion() {
+        setQuestions([...questions, createEmptyQuestion()]);
+    }
+
+    function removeQuestion(idx) {
+        if (questions.length === 1) return;
+        setQuestions(questions.filter((_, i) => i !== idx));
+    }
+
+    function updateQuestion(idx, field, value) {
+        const updated = questions.map((q, i) => (i === idx ? { ...q, [field]: value } : q));
+        setQuestions(updated);
+    }
+
+    function updateOption(qIdx, optIdx, value) {
+        const updated = questions.map((q, i) => {
+            if (i !== qIdx) return q;
+            const options = q.options.map((o, j) => (j === optIdx ? value : o));
+            return { ...q, options };
+        });
+        setQuestions(updated);
+    }
+
+    function handleFileUpload(qIdx, type, file) {
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const field = type === 'image' ? 'imageData' : 'audioData';
+            const nameField = type === 'image' ? 'imageName' : 'audioName';
+            updateQuestion(qIdx, field, e.target.result);
+            updateQuestion(qIdx, nameField, file.name);
+        };
+        reader.readAsDataURL(file);
+    }
+
+    function removeFile(qIdx, type) {
+        const field = type === 'image' ? 'imageData' : 'audioData';
+        const nameField = type === 'image' ? 'imageName' : 'audioName';
+        const updated = questions.map((q, i) => {
+            if (i !== qIdx) return q;
+            return { ...q, [field]: null, [nameField]: null };
+        });
+        setQuestions(updated);
+    }
+
+    function saveTest() {
+        if (!testTitle.trim()) {
+            setSaveMsg('error:Unesite naslov testa.');
+            return;
+        }
+        for (let i = 0; i < questions.length; i++) {
+            const q = questions[i];
+            if (!q.text.trim()) {
+                setSaveMsg(`error:Pitanje ${i + 1} nema tekst.`);
+                return;
+            }
+            const filledOptions = q.options.filter((o) => o.trim());
+            if (filledOptions.length < 2) {
+                setSaveMsg(`error:Pitanje ${i + 1} mora imati barem 2 odgovora.`);
+                return;
+            }
+        }
+
+        const stored = localStorage.getItem('blebetalo_tests');
+        const allTests = stored ? JSON.parse(stored) : [];
+
+        if (editingTest) {
+            const updated = allTests.map((t) =>
+                t.id === editingTest.id
+                    ? { ...t, title: testTitle, description: testDescription, category: testCategory, questions, updatedAt: new Date().toISOString() }
+                    : t
+            );
+            localStorage.setItem('blebetalo_tests', JSON.stringify(updated));
+        } else {
+            const newTest = {
+                id: Date.now(),
+                title: testTitle,
+                description: testDescription,
+                category: testCategory,
+                questions,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+            };
+            allTests.push(newTest);
+            localStorage.setItem('blebetalo_tests', JSON.stringify(allTests));
+        }
+
+        loadTests();
+        setSaveMsg('success:Test je uspešno sačuvan!');
+        setTimeout(() => {
+            setView('list');
+            resetForm();
+        }, 1200);
+    }
+
+    if (view === 'list') {
+        return (
+            <div className="admin-page">
+                <div className="admin-header">
+                    <div>
+                        <h1 className="admin-title">⚙️ Admin Panel</h1>
+                        <p className="admin-subtitle">Upravljanje testovima</p>
+                    </div>
+                    <button className="btn btn-primary" onClick={startCreate}>
+                        + Novi Test
+                    </button>
+                </div>
+
+                {tests.length === 0 ? (
+                    <div className="admin-empty">
+                        <div style={{ fontSize: '48px', marginBottom: '16px' }}>📝</div>
+                        <h3>Nema kreiranih testova</h3>
+                        <p>Kliknite na "Novi Test" da biste kreirali prvi test.</p>
+                    </div>
+                ) : (
+                    <div className="admin-tests-grid">
+                        {tests.map((test) => (
+                            <div key={test.id} className="admin-test-card">
+                                <div className="admin-test-header">
+                                    <span className={`test-category-badge category-${test.category || 'opste'}`}>
+                                        {getCategoryLabel(test.category)}
+                                    </span>
+                                    <span className="test-date">
+                                        {new Date(test.createdAt).toLocaleDateString('sr')}
+                                    </span>
+                                </div>
+                                <h3 className="admin-test-title">{test.title}</h3>
+                                {test.description && (
+                                    <p className="admin-test-desc">{test.description}</p>
+                                )}
+                                <p className="admin-test-count">{test.questions.length} pitanja</p>
+                                <div className="admin-test-actions">
+                                    <button className="btn btn-secondary btn-sm" onClick={() => startEdit(test)}>
+                                        ✏️ Uredi
+                                    </button>
+                                    <button className="btn btn-danger btn-sm" onClick={() => deleteTest(test.id)}>
+                                        🗑️ Obriši
+                                    </button>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // Create / Edit form
+    return (
+        <div className="admin-page">
+            <div className="admin-header">
+                <div>
+                    <h1 className="admin-title">
+                        {view === 'create' ? '➕ Novi Test' : '✏️ Uredi Test'}
+                    </h1>
+                    <p className="admin-subtitle">Popunite detalje testa</p>
+                </div>
+                <button className="btn btn-secondary" onClick={() => { setView('list'); resetForm(); }}>
+                    ← Nazad
+                </button>
+            </div>
+
+            <div className="admin-form-card">
+                <div className="form-section">
+                    <h2 className="form-section-title">Osnovno</h2>
+                    <div className="form-row">
+                        <div className="form-group">
+                            <label className="form-label">Naslov testa *</label>
+                            <input
+                                className="form-input"
+                                type="text"
+                                placeholder="Npr. Test osnovnih reči"
+                                value={testTitle}
+                                onChange={(e) => setTestTitle(e.target.value)}
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label className="form-label">Kategorija</label>
+                            <select
+                                className="form-input"
+                                value={testCategory}
+                                onChange={(e) => setTestCategory(e.target.value)}
+                            >
+                                <option value="opste">Opšte</option>
+                                <option value="deca">Za decu</option>
+                                <option value="napredni">Napredni</option>
+                                <option value="gramatika">Gramatika</option>
+                                <option value="vokabular">Vokabular</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div className="form-group">
+                        <label className="form-label">Opis (opciono)</label>
+                        <textarea
+                            className="form-input"
+                            rows="3"
+                            placeholder="Kratki opis testa..."
+                            value={testDescription}
+                            onChange={(e) => setTestDescription(e.target.value)}
+                        />
+                    </div>
+                </div>
+
+                <div className="form-section">
+                    <h2 className="form-section-title">Pitanja</h2>
+                    {questions.map((q, qIdx) => (
+                        <div key={q.id} className="question-card">
+                            <div className="question-header">
+                                <span className="question-number">Pitanje {qIdx + 1}</span>
+                                {questions.length > 1 && (
+                                    <button
+                                        className="btn btn-danger btn-sm"
+                                        onClick={() => removeQuestion(qIdx)}
+                                    >
+                                        Ukloni
+                                    </button>
+                                )}
+                            </div>
+
+                            <div className="form-group">
+                                <label className="form-label">Tekst pitanja *</label>
+                                <input
+                                    className="form-input"
+                                    type="text"
+                                    placeholder="Unesite tekst pitanja..."
+                                    value={q.text}
+                                    onChange={(e) => updateQuestion(qIdx, 'text', e.target.value)}
+                                />
+                            </div>
+
+                            <div className="question-media">
+                                <div className="media-upload-box">
+                                    <label className="form-label">🖼️ Slika (opciono)</label>
+                                    {q.imageData ? (
+                                        <div className="media-preview">
+                                            <img src={q.imageData} alt="preview" className="image-preview" />
+                                            <div className="media-info">
+                                                <span>{q.imageName}</span>
+                                                <button
+                                                    className="btn btn-danger btn-sm"
+                                                    onClick={() => removeFile(qIdx, 'image')}
+                                                >
+                                                    Ukloni
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <label className="file-upload-label">
+                                            <input
+                                                type="file"
+                                                accept="image/*"
+                                                className="file-input"
+                                                onChange={(e) => handleFileUpload(qIdx, 'image', e.target.files[0])}
+                                            />
+                                            <span className="file-upload-icon">📁</span>
+                                            <span>Izaberite sliku</span>
+                                            <small>PNG, JPG, GIF do 5MB</small>
+                                        </label>
+                                    )}
+                                </div>
+
+                                <div className="media-upload-box">
+                                    <label className="form-label">🔊 Zvuk (opciono)</label>
+                                    {q.audioData ? (
+                                        <div className="media-preview">
+                                            <audio controls src={q.audioData} className="audio-preview" />
+                                            <div className="media-info">
+                                                <span>{q.audioName}</span>
+                                                <button
+                                                    className="btn btn-danger btn-sm"
+                                                    onClick={() => removeFile(qIdx, 'audio')}
+                                                >
+                                                    Ukloni
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <label className="file-upload-label">
+                                            <input
+                                                type="file"
+                                                accept="audio/*"
+                                                className="file-input"
+                                                onChange={(e) => handleFileUpload(qIdx, 'audio', e.target.files[0])}
+                                            />
+                                            <span className="file-upload-icon">🎵</span>
+                                            <span>Izaberite audio</span>
+                                            <small>MP3, WAV, OGG do 10MB</small>
+                                        </label>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div className="form-group">
+                                <label className="form-label">Opcije odgovora</label>
+                                <div className="options-grid">
+                                    {q.options.map((opt, optIdx) => (
+                                        <div key={optIdx} className="option-row">
+                                            <input
+                                                type="radio"
+                                                name={`correct-${q.id}`}
+                                                checked={q.answer === optIdx}
+                                                onChange={() => updateQuestion(qIdx, 'answer', optIdx)}
+                                                title="Tačan odgovor"
+                                                className="option-radio"
+                                            />
+                                            <input
+                                                className="form-input"
+                                                type="text"
+                                                placeholder={`Opcija ${optIdx + 1}${optIdx < 2 ? ' *' : ''}`}
+                                                value={opt}
+                                                onChange={(e) => updateOption(qIdx, optIdx, e.target.value)}
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                                <small className="form-hint">Kliknite na krug pored opcije da biste označili tačan odgovor.</small>
+                            </div>
+                        </div>
+                    ))}
+
+                    <button className="btn btn-secondary btn-full" onClick={addQuestion}>
+                        + Dodaj pitanje
+                    </button>
+                </div>
+
+                {saveMsg && (
+                    <div className={`save-message ${saveMsg.startsWith('success') ? 'save-success' : 'save-error'}`}>
+                        {saveMsg.split(':')[1]}
+                    </div>
+                )}
+
+                <div className="form-actions">
+                    <button className="btn btn-secondary" onClick={() => { setView('list'); resetForm(); }}>
+                        Otkaži
+                    </button>
+                    <button className="btn btn-primary" onClick={saveTest}>
+                        💾 Sačuvaj Test
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function getCategoryLabel(category) {
+    const labels = {
+        opste: 'Opšte',
+        deca: 'Za decu',
+        napredni: 'Napredni',
+        gramatika: 'Gramatika',
+        vokabular: 'Vokabular',
+    };
+    return labels[category] || 'Opšte';
+}
+
+export default Admin;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index f3e8da4..a3d89f5 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,45 +1,32 @@
 import React from 'react';
 
 function Home({ setCurrentPage }) {
+    const cards = [
+        { page: 'kids', icon: '👦', title: 'Za Decu', desc: 'Zabavno učenje za najmlađe' },
+        { page: 'advanced', icon: '🎓', title: 'Napredni', desc: 'Lekcije za napredne učenike' },
+        { page: 'skill-test', icon: '📝', title: 'Test Znanja', desc: 'Proveri svoje znanje' },
+        { page: 'find-tutor', icon: '👨‍🏫', title: 'Tutori', desc: 'Pronađi svog tutora' },
+        { page: 'resources', icon: '📖', title: 'Resursi', desc: 'Materijali za učenje' },
+    ];
+
     return (
-        <div style={{ textAlign: 'center', padding: '40px 20px' }}>
-            <h1 style={{ fontSize: '36px', marginBottom: '16px' }}>🇩🇪 Dobrodošli na Blebetalo!</h1>
-            <p style={{ fontSize: '18px', color: '#666', marginBottom: '40px' }}>
+        <div className="home-hero">
+            <h1 className="home-hero-title">🇩🇪 Dobrodošli na Blebetalo!</h1>
+            <p className="home-hero-subtitle">
                 Platforma za učenje nemačkog jezika na srpskom
             </p>
-            <div style={{ display: 'flex', justifyContent: 'center', gap: '20px', flexWrap: 'wrap' }}>
-                <div
-                    style={{ background: 'white', borderRadius: '8px', padding: '24px', width: '200px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)', cursor: 'pointer' }}
-                    onClick={() => setCurrentPage('kids')}
-                >
-                    <div style={{ fontSize: '40px', marginBottom: '12px' }}>👦</div>
-                    <h3>Za Decu</h3>
-                    <p style={{ color: '#666', fontSize: '14px', marginTop: '8px' }}>Zabavno učenje za najmlađe</p>
-                </div>
-                <div
-                    style={{ background: 'white', borderRadius: '8px', padding: '24px', width: '200px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)', cursor: 'pointer' }}
-                    onClick={() => setCurrentPage('advanced')}
-                >
-                    <div style={{ fontSize: '40px', marginBottom: '12px' }}>🎓</div>
-                    <h3>Napredni</h3>
-                    <p style={{ color: '#666', fontSize: '14px', marginTop: '8px' }}>Lekcije za napredne učenike</p>
-                </div>
-                <div
-                    style={{ background: 'white', borderRadius: '8px', padding: '24px', width: '200px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)', cursor: 'pointer' }}
-                    onClick={() => setCurrentPage('skill-test')}
-                >
-                    <div style={{ fontSize: '40px', marginBottom: '12px' }}>📝</div>
-                    <h3>Test Znanja</h3>
-                    <p style={{ color: '#666', fontSize: '14px', marginTop: '8px' }}>Proveri svoje znanje</p>
-                </div>
-                <div
-                    style={{ background: 'white', borderRadius: '8px', padding: '24px', width: '200px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)', cursor: 'pointer' }}
-                    onClick={() => setCurrentPage('resources')}
-                >
-                    <div style={{ fontSize: '40px', marginBottom: '12px' }}>📖</div>
-                    <h3>Resursi</h3>
-                    <p style={{ color: '#666', fontSize: '14px', marginTop: '8px' }}>Materijali za učenje</p>
-                </div>
+            <div className="home-cards">
+                {cards.map((card) => (
+                    <div
+                        key={card.page}
+                        className="home-card"
+                        onClick={() => setCurrentPage(card.page)}
+                    >
+                        <span className="home-card-icon">{card.icon}</span>
+                        <h3 className="home-card-title">{card.title}</h3>
+                        <p className="home-card-desc">{card.desc}</p>
+                    </div>
+                ))}
             </div>
         </div>
     );
diff --git a/src/pages/Login.js b/src/pages/Login.js
new file mode 100644
index 0000000..a79c09d
--- /dev/null
+++ b/src/pages/Login.js
@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+
+function Login() {
+    const { login, loginWithGoogle, register } = useAuth();
+    const [mode, setMode] = useState('login'); // 'login' | 'register'
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [name, setName] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        if (mode === 'register') {
+            if (!name.trim()) {
+                setError('Unesite vaše ime.');
+                setLoading(false);
+                return;
+            }
+            if (password !== confirmPassword) {
+                setError('Lozinke se ne podudaraju.');
+                setLoading(false);
+                return;
+            }
+            if (password.length < 6) {
+                setError('Lozinka mora imati najmanje 6 karaktera.');
+                setLoading(false);
+                return;
+            }
+            const result = register(username, password, name);
+            if (!result.success) setError(result.error);
+        } else {
+            const result = login(username, password);
+            if (!result.success) setError(result.error);
+        }
+
+        setLoading(false);
+    };
+
+    const handleGoogleLogin = () => {
+        setError('');
+        loginWithGoogle();
+    };
+
+    return (
+        <div className="login-page">
+            <div className="login-card">
+                <div className="login-logo">
+                    <span className="login-flag">🇩🇪</span>
+                    <h1 className="login-title">Blebetalo</h1>
+                    <p className="login-subtitle">Platforma za učenje nemačkog</p>
+                </div>
+
+                <div className="login-tabs">
+                    <button
+                        className={`login-tab ${mode === 'login' ? 'active' : ''}`}
+                        onClick={() => { setMode('login'); setError(''); }}
+                    >
+                        Prijava
+                    </button>
+                    <button
+                        className={`login-tab ${mode === 'register' ? 'active' : ''}`}
+                        onClick={() => { setMode('register'); setError(''); }}
+                    >
+                        Registracija
+                    </button>
+                </div>
+
+                <form className="login-form" onSubmit={handleSubmit}>
+                    {mode === 'register' && (
+                        <div className="form-group">
+                            <label className="form-label">Ime i prezime</label>
+                            <input
+                                className="form-input"
+                                type="text"
+                                placeholder="Vaše ime"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                required
+                            />
+                        </div>
+                    )}
+
+                    <div className="form-group">
+                        <label className="form-label">Korisničko ime</label>
+                        <input
+                            className="form-input"
+                            type="text"
+                            placeholder="Unesite korisničko ime"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            required
+                            autoComplete="username"
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label className="form-label">Lozinka</label>
+                        <input
+                            className="form-input"
+                            type="password"
+                            placeholder="Unesite lozinku"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required
+                            autoComplete={mode === 'register' ? 'new-password' : 'current-password'}
+                        />
+                    </div>
+
+                    {mode === 'register' && (
+                        <div className="form-group">
+                            <label className="form-label">Potvrdite lozinku</label>
+                            <input
+                                className="form-input"
+                                type="password"
+                                placeholder="Ponovite lozinku"
+                                value={confirmPassword}
+                                onChange={(e) => setConfirmPassword(e.target.value)}
+                                required
+                                autoComplete="new-password"
+                            />
+                        </div>
+                    )}
+
+                    {error && <div className="form-error">{error}</div>}
+
+                    <button
+                        type="submit"
+                        className="btn btn-primary btn-full"
+                        disabled={loading}
+                    >
+                        {loading ? 'Učitavanje...' : mode === 'login' ? 'Prijavite se' : 'Registrujte se'}
+                    </button>
+                </form>
+
+                <div className="login-divider">
+                    <span>ili</span>
+                </div>
+
+                <button
+                    className="btn-google"
+                    onClick={handleGoogleLogin}
+                    type="button"
+                >
+                    <svg className="google-icon" viewBox="0 0 24 24" width="20" height="20">
+                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                    </svg>
+                    Prijavite se sa Google-om
+                </button>
+
+                {mode === 'login' && (
+                    <p className="login-hint">
+                        Demo: <strong>admin</strong> / <strong>admin123</strong> za admin pristup
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default Login;