diff --git a/django-site/adminpage/__pycache__/__init__.cpython-312.pyc b/django-site/adminpage/__pycache__/__init__.cpython-312.pyc
new file mode 100644
index 0000000..16eadfb
Binary files /dev/null and b/django-site/adminpage/__pycache__/__init__.cpython-312.pyc differ
diff --git a/django-site/adminpage/__pycache__/admin.cpython-312.pyc b/django-site/adminpage/__pycache__/admin.cpython-312.pyc
new file mode 100644
index 0000000..3a9f8fb
Binary files /dev/null and b/django-site/adminpage/__pycache__/admin.cpython-312.pyc differ
diff --git a/django-site/adminpage/__pycache__/apps.cpython-312.pyc b/django-site/adminpage/__pycache__/apps.cpython-312.pyc
new file mode 100644
index 0000000..7c3eacc
Binary files /dev/null and b/django-site/adminpage/__pycache__/apps.cpython-312.pyc differ
diff --git a/django-site/adminpage/__pycache__/models.cpython-312.pyc b/django-site/adminpage/__pycache__/models.cpython-312.pyc
new file mode 100644
index 0000000..c23ab67
Binary files /dev/null and b/django-site/adminpage/__pycache__/models.cpython-312.pyc differ
diff --git a/django-site/adminpage/__pycache__/urls.cpython-312.pyc b/django-site/adminpage/__pycache__/urls.cpython-312.pyc
new file mode 100644
index 0000000..2d5c17f
Binary files /dev/null and b/django-site/adminpage/__pycache__/urls.cpython-312.pyc differ
diff --git a/django-site/adminpage/__pycache__/views.cpython-312.pyc b/django-site/adminpage/__pycache__/views.cpython-312.pyc
new file mode 100644
index 0000000..915deb2
Binary files /dev/null and b/django-site/adminpage/__pycache__/views.cpython-312.pyc differ
diff --git a/django-site/adminpage/migrations/__pycache__/__init__.cpython-312.pyc b/django-site/adminpage/migrations/__pycache__/__init__.cpython-312.pyc
new file mode 100644
index 0000000..48aa9fe
Binary files /dev/null and b/django-site/adminpage/migrations/__pycache__/__init__.cpython-312.pyc differ
diff --git a/django-site/adminpage/templates/adminpage.html b/django-site/adminpage/templates/adminpage/adminpage.html
similarity index 100%
rename from django-site/adminpage/templates/adminpage.html
rename to django-site/adminpage/templates/adminpage/adminpage.html
diff --git a/django-site/adminpage/views.py b/django-site/adminpage/views.py
index 27eced6..ccce808 100644
--- a/django-site/adminpage/views.py
+++ b/django-site/adminpage/views.py
@@ -3,4 +3,4 @@
 # Create your views here.
 
 def showAdminPage(request):
-    return render(request, 'adminpage.html')
+    return render(request, 'adminpage/adminpage.html')
diff --git a/django-site/campus_resource/__pycache__/__init__.cpython-312.pyc b/django-site/campus_resource/__pycache__/__init__.cpython-312.pyc
new file mode 100644
index 0000000..38888b3
Binary files /dev/null and b/django-site/campus_resource/__pycache__/__init__.cpython-312.pyc differ
diff --git a/django-site/campus_resource/__pycache__/settings.cpython-312.pyc b/django-site/campus_resource/__pycache__/settings.cpython-312.pyc
new file mode 100644
index 0000000..6b34b68
Binary files /dev/null and b/django-site/campus_resource/__pycache__/settings.cpython-312.pyc differ
diff --git a/django-site/campus_resource/__pycache__/urls.cpython-312.pyc b/django-site/campus_resource/__pycache__/urls.cpython-312.pyc
new file mode 100644
index 0000000..555a792
Binary files /dev/null and b/django-site/campus_resource/__pycache__/urls.cpython-312.pyc differ
diff --git a/django-site/campus_resource/__pycache__/wsgi.cpython-312.pyc b/django-site/campus_resource/__pycache__/wsgi.cpython-312.pyc
new file mode 100644
index 0000000..030317d
Binary files /dev/null and b/django-site/campus_resource/__pycache__/wsgi.cpython-312.pyc differ
diff --git a/django-site/campus_resource/settings.py b/django-site/campus_resource/settings.py
index 1f308c4..7bb4c3e 100644
--- a/django-site/campus_resource/settings.py
+++ b/django-site/campus_resource/settings.py
@@ -39,6 +39,7 @@
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'adminpage',
+    'studentpage',
     ]
 
 MIDDLEWARE = [
diff --git a/django-site/campus_resource/urls.py b/django-site/campus_resource/urls.py
index 55d00cc..c986718 100644
--- a/django-site/campus_resource/urls.py
+++ b/django-site/campus_resource/urls.py
@@ -20,4 +20,5 @@
 urlpatterns = [
     path('', include('adminpage.urls')),
     path('admin/', include('adminpage.urls')),
+    path('student/', include('studentpage.urls')),    
 ]
diff --git a/django-site/studentpage/__init__.py b/django-site/studentpage/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/django-site/studentpage/__pycache__/__init__.cpython-312.pyc b/django-site/studentpage/__pycache__/__init__.cpython-312.pyc
new file mode 100644
index 0000000..0d94c22
Binary files /dev/null and b/django-site/studentpage/__pycache__/__init__.cpython-312.pyc differ
diff --git a/django-site/studentpage/__pycache__/admin.cpython-312.pyc b/django-site/studentpage/__pycache__/admin.cpython-312.pyc
new file mode 100644
index 0000000..a0626b1
Binary files /dev/null and b/django-site/studentpage/__pycache__/admin.cpython-312.pyc differ
diff --git a/django-site/studentpage/__pycache__/apps.cpython-312.pyc b/django-site/studentpage/__pycache__/apps.cpython-312.pyc
new file mode 100644
index 0000000..691f989
Binary files /dev/null and b/django-site/studentpage/__pycache__/apps.cpython-312.pyc differ
diff --git a/django-site/studentpage/__pycache__/models.cpython-312.pyc b/django-site/studentpage/__pycache__/models.cpython-312.pyc
new file mode 100644
index 0000000..32a6ff7
Binary files /dev/null and b/django-site/studentpage/__pycache__/models.cpython-312.pyc differ
diff --git a/django-site/studentpage/__pycache__/urls.cpython-312.pyc b/django-site/studentpage/__pycache__/urls.cpython-312.pyc
new file mode 100644
index 0000000..0067422
Binary files /dev/null and b/django-site/studentpage/__pycache__/urls.cpython-312.pyc differ
diff --git a/django-site/studentpage/__pycache__/views.cpython-312.pyc b/django-site/studentpage/__pycache__/views.cpython-312.pyc
new file mode 100644
index 0000000..d248981
Binary files /dev/null and b/django-site/studentpage/__pycache__/views.cpython-312.pyc differ
diff --git a/django-site/studentpage/admin.py b/django-site/studentpage/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/django-site/studentpage/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/django-site/studentpage/apps.py b/django-site/studentpage/apps.py
new file mode 100644
index 0000000..3218ba0
--- /dev/null
+++ b/django-site/studentpage/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class StudentpageConfig(AppConfig):
+    name = 'studentpage'
diff --git a/django-site/studentpage/migrations/__init__.py b/django-site/studentpage/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/django-site/studentpage/migrations/__pycache__/__init__.cpython-312.pyc b/django-site/studentpage/migrations/__pycache__/__init__.cpython-312.pyc
new file mode 100644
index 0000000..632df50
Binary files /dev/null and b/django-site/studentpage/migrations/__pycache__/__init__.cpython-312.pyc differ
diff --git a/django-site/studentpage/models.py b/django-site/studentpage/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/django-site/studentpage/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/django-site/studentpage/templates/studentpage/studentpage.html b/django-site/studentpage/templates/studentpage/studentpage.html
new file mode 100644
index 0000000..20b7df3
--- /dev/null
+++ b/django-site/studentpage/templates/studentpage/studentpage.html
@@ -0,0 +1,854 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Campus Resource Reservation</title>
+  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --maroon: #6B1A2A;
+      --maroon-dark: #4e1120;
+      --bg: #F5F3EF;
+      --surface: #FFFFFF;
+      --border: #DDD8D0;
+      --text: #1C1A17;
+      --muted: #7A736A;
+      --tab-inactive: #E8E4DE;
+      --shadow: 0 2px 12px rgba(0,0,0,0.08);
+      --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
+    }
+
+    body {
+      font-family: 'DM Sans', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+    }
+
+    #login-page {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+    }
+
+    .login-logo {
+      width: 64px;
+      height: 64px;
+      background: var(--maroon);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 2rem;
+      color: white;
+      font-family: 'EB Garamond', serif;
+      font-size: 1.8rem;
+      font-weight: 600;
+      letter-spacing: -1px;
+    }
+
+    .login-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 2.5rem 3rem;
+      width: 420px;
+      box-shadow: var(--shadow-lg);
+    }
+
+    .login-card h1 {
+      font-family: 'EB Garamond', serif;
+      font-size: 2rem;
+      font-weight: 500;
+      text-align: center;
+      margin-bottom: 0.4rem;
+      color: var(--text);
+    }
+
+    .login-card .subtitle {
+      text-align: center;
+      color: var(--muted);
+      font-size: 0.875rem;
+      margin-bottom: 2rem;
+    }
+
+    .field-group { margin-bottom: 1.25rem; }
+
+    .field-group label {
+      display: block;
+      font-size: 0.8rem;
+      font-weight: 500;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--muted);
+      margin-bottom: 0.4rem;
+    }
+
+    .field-group input {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      border: 1.5px solid var(--border);
+      border-radius: 8px;
+      font-size: 0.95rem;
+      font-family: 'DM Sans', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      transition: border-color 0.2s;
+    }
+
+    .field-group input:focus {
+      outline: none;
+      border-color: var(--maroon);
+      background: white;
+    }
+
+    .btn-primary {
+      width: 100%;
+      padding: 0.85rem;
+      background: var(--maroon);
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-size: 0.95rem;
+      font-weight: 500;
+      font-family: 'DM Sans', sans-serif;
+      cursor: pointer;
+      margin-top: 0.5rem;
+      transition: background 0.2s, transform 0.1s;
+    }
+    .btn-primary:hover { background: var(--maroon-dark); }
+    .btn-primary:active { transform: scale(0.98); }
+
+    #app-page { display: none; min-height: 100vh; }
+
+    .navbar {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 0 2rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 60px;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .nav-brand {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .nav-logo {
+      width: 36px;
+      height: 36px;
+      background: var(--maroon);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-family: 'EB Garamond', serif;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+
+    .nav-title {
+      font-family: 'EB Garamond', serif;
+      font-size: 1.15rem;
+      font-weight: 500;
+      color: var(--text);
+    }
+
+    .nav-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .btn-outline {
+      padding: 0.45rem 1rem;
+      border: 1.5px solid var(--border);
+      border-radius: 6px;
+      background: transparent;
+      font-size: 0.85rem;
+      font-family: 'DM Sans', sans-serif;
+      cursor: pointer;
+      color: var(--text);
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .btn-outline:hover { border-color: var(--maroon); background: #faf8f5; }
+
+    .btn-sm-primary {
+      padding: 0.45rem 1rem;
+      background: var(--maroon);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      font-size: 0.85rem;
+      font-family: 'DM Sans', sans-serif;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .btn-sm-primary:hover { background: var(--maroon-dark); }
+
+    .main-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    .tab-bar {
+      display: flex;
+      border-bottom: 2px solid var(--border);
+    }
+
+    .tab-btn {
+      padding: 0.8rem 2rem;
+      border: 1px solid var(--border);
+      border-bottom: none;
+      background: var(--tab-inactive);
+      color: var(--muted);
+      font-family: 'DM Sans', sans-serif;
+      font-size: 0.95rem;
+      font-weight: 500;
+      cursor: pointer;
+      border-radius: 10px 10px 0 0;
+      margin-right: 4px;
+      transition: background 0.2s, color 0.2s;
+      position: relative;
+      bottom: -2px;
+    }
+    .tab-btn:hover { background: #dedad4; color: var(--text); }
+    .tab-btn.active { background: var(--maroon); color: white; border-color: var(--maroon); z-index: 1; }
+
+    .tab-panel {
+      background: #787066;
+      border-radius: 0 8px 8px 8px;
+      padding: 1.5rem;
+      border: 1px solid var(--border);
+      border-top: none;
+      min-height: 500px;
+    }
+
+    .card-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1.25rem;
+    }
+
+    .resource-card {
+      background: var(--surface);
+      border-radius: 10px;
+      overflow: hidden;
+      border: 1px solid rgba(255,255,255,0.2);
+      display: flex;
+      flex-direction: column;
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+    .resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
+
+    .card-image {
+      width: 100%;
+      aspect-ratio: 4/3;
+      background: #E0DDD8;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .card-body {
+      padding: 1rem;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .card-status {
+      display: inline-block;
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+      margin-bottom: 0.5rem;
+    }
+    .status-available   { background: #E6F4EA; color: #276B3C; }
+    .status-limited     { background: #FFF4E0; color: #8A5A00; }
+    .status-unavailable { background: #FCE8E8; color: #8B2020; }
+
+    .card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
+
+    .card-desc {
+      font-size: 0.82rem;
+      color: var(--muted);
+      line-height: 1.5;
+      flex: 1;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .card-footer {
+      padding: 0.75rem 1rem;
+      border-top: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .card-location { font-size: 0.78rem; color: var(--muted); }
+
+    .btn-view {
+      padding: 0.4rem 0.9rem;
+      background: transparent;
+      border: 1.5px solid var(--maroon);
+      color: var(--maroon);
+      border-radius: 6px;
+      font-size: 0.8rem;
+      font-weight: 500;
+      cursor: pointer;
+      font-family: 'DM Sans', sans-serif;
+      transition: background 0.2s, color 0.2s;
+    }
+    .btn-view:hover { background: var(--maroon); color: white; }
+
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 4rem;
+      color: rgba(255,255,255,0.6);
+      text-align: center;
+      gap: 0.75rem;
+    }
+    .empty-state p { font-size: 0.95rem; }
+
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: 200;
+      align-items: center;
+      justify-content: center;
+      backdrop-filter: blur(2px);
+    }
+    .modal-overlay.open { display: flex; }
+
+    .modal-box {
+      background: var(--surface);
+      border-radius: 14px;
+      width: 480px;
+      max-height: 90vh;
+      overflow-y: auto;
+      box-shadow: var(--shadow-lg);
+      animation: slideUp 0.2s ease;
+    }
+
+    .detail-modal-box {
+      background: var(--surface);
+      border-radius: 14px;
+      width: 860px;
+      max-width: 95vw;
+      max-height: 90vh;
+      overflow-y: auto;
+      box-shadow: var(--shadow-lg);
+      animation: slideUp 0.2s ease;
+    }
+
+    @keyframes slideUp {
+      from { opacity: 0; transform: translateY(16px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    .modal-header {
+      padding: 1.25rem 1.5rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .modal-header h3 {
+      font-family: 'EB Garamond', serif;
+      font-size: 1.25rem;
+      font-weight: 500;
+    }
+
+    .modal-close {
+      background: none;
+      border: none;
+      font-size: 1.4rem;
+      cursor: pointer;
+      color: var(--muted);
+      line-height: 1;
+      padding: 0.2rem;
+      border-radius: 4px;
+      transition: color 0.15s;
+    }
+    .modal-close:hover { color: var(--text); }
+
+    .modal-body { padding: 1.5rem; }
+
+    .modal-body .field-group label {
+      text-transform: none;
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: var(--text);
+      letter-spacing: 0;
+    }
+
+    .modal-body select,
+    .modal-body textarea {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      border: 1.5px solid var(--border);
+      border-radius: 8px;
+      font-size: 0.95rem;
+      font-family: 'DM Sans', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      transition: border-color 0.2s;
+    }
+
+    .modal-body select:focus,
+    .modal-body textarea:focus,
+    .modal-body input:focus {
+      outline: none;
+      border-color: var(--maroon);
+      background: white;
+    }
+
+    .modal-footer {
+      padding: 1rem 1.5rem;
+      border-top: 1px solid var(--border);
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.75rem;
+    }
+
+    .detail-header {
+      background: var(--maroon);
+      color: white;
+      padding: 1.25rem 1.5rem;
+      border-radius: 14px 14px 0 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .detail-header h3 {
+      font-family: 'EB Garamond', serif;
+      font-size: 1.4rem;
+      font-weight: 500;
+    }
+
+    .detail-header .modal-close { color: rgba(255,255,255,0.7); }
+    .detail-header .modal-close:hover { color: white; }
+
+    .detail-body { padding: 1.5rem; }
+
+    .detail-desc {
+      font-size: 0.9rem;
+      line-height: 1.7;
+      color: var(--muted);
+      margin-bottom: 1.25rem;
+    }
+
+    .detail-media {
+      display: grid;
+      grid-template-columns: 240px 1fr;
+      gap: 1rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .detail-img {
+      border-radius: 8px;
+      background: #E0DDD8;
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .detail-calendar {
+      border-radius: 8px;
+      background: var(--bg);
+      border: 1.5px solid var(--border);
+      padding: 1rem;
+    }
+
+    .calendar-title {
+      font-size: 0.8rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--muted);
+      margin-bottom: 0.75rem;
+    }
+
+    .time-slots {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 0.4rem;
+    }
+
+    .time-slot {
+      padding: 0.4rem 0;
+      text-align: center;
+      border: 1.5px solid var(--border);
+      border-radius: 5px;
+      font-size: 0.75rem;
+      cursor: pointer;
+      transition: all 0.15s;
+      background: white;
+    }
+    .time-slot:hover { border-color: var(--maroon); color: var(--maroon); }
+    .time-slot.selected { background: var(--maroon); color: white; border-color: var(--maroon); }
+    .time-slot.taken { background: #eee; color: #bbb; cursor: not-allowed; }
+
+    .detail-footer {
+      padding: 1rem 1.5rem;
+      border-top: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .agree-label {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      font-size: 0.85rem;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .agree-label input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      accent-color: var(--maroon);
+      cursor: pointer;
+    }
+
+    .btn-schedule {
+      padding: 0.7rem 1.75rem;
+      background: var(--maroon);
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-size: 0.95rem;
+      font-weight: 500;
+      font-family: 'DM Sans', sans-serif;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .btn-schedule:hover { background: var(--maroon-dark); }
+    .btn-schedule:disabled { background: #ccc; cursor: not-allowed; }
+
+    #toast {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      background: #1C1A17;
+      color: white;
+      padding: 0.8rem 1.25rem;
+      border-radius: 8px;
+      font-size: 0.875rem;
+      box-shadow: var(--shadow-lg);
+      z-index: 999;
+      opacity: 0;
+      transform: translateY(8px);
+      transition: opacity 0.25s, transform 0.25s;
+      pointer-events: none;
+    }
+    #toast.show { opacity: 1; transform: translateY(0); }
+  </style>
+</head>
+<body>
+
+<!-- login -->
+<div id="login-page">
+  <div class="login-logo">CR</div>
+  <div class="login-card">
+    <h1>Sign in to continue</h1>
+    <p class="subtitle">Campus Resource Reservation System</p>
+
+    <div class="field-group">
+      <label>University Email</label>
+      <input type="email" id="login-email" placeholder="yourname@csuchico.edu">
+    </div>
+    <div class="field-group">
+      <label>Password</label>
+      <input type="password" id="login-pass" placeholder="••••••••">
+    </div>
+    <button class="btn-primary" onclick="doLogin()">Sign In</button>
+  </div>
+</div>
+
+<!-- main app -->
+<div id="app-page">
+
+  <nav class="navbar">
+    <div class="nav-brand">
+      <div class="nav-logo">CR</div>
+      <span class="nav-title">Campus Resources</span>
+    </div>
+    <div class="nav-actions">
+      <button class="btn-outline" onclick="openAddModal()">+ Add Resource</button>
+      <button class="btn-sm-primary" onclick="doLogout()">Sign Out</button>
+    </div>
+  </nav>
+
+  <div class="main-content">
+    <div class="tab-bar">
+      <button class="tab-btn active" onclick="switchTab('Books', this)">Books</button>
+      <button class="tab-btn" onclick="switchTab('Rooms', this)">Rooms</button>
+      <button class="tab-btn" onclick="switchTab('Loanables', this)">Loanables</button>
+      <button class="tab-btn" onclick="switchTab('Tutoring', this)">Tutoring</button>
+    </div>
+
+    <div class="tab-panel">
+      <div class="card-grid" id="card-grid"></div>
+      <div class="empty-state" id="empty-state" style="display:none">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 9h6M9 13h4"/></svg>
+        <p>No resources yet.<br>Click <strong>+ Add Resource</strong> to add one.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- add resource modal -->
+<div class="modal-overlay" id="add-modal" onclick="closeOnOverlay(event,'add-modal')">
+  <div class="modal-box">
+    <div class="modal-header">
+      <h3>Add New Resource</h3>
+      <button class="modal-close" onclick="closeModal('add-modal')">&times;</button>
+    </div>
+    <div class="modal-body">
+      <div class="field-group">
+        <label>Resource Name</label>
+        <input type="text" id="r-name" placeholder="e.g. Study Room A">
+      </div>
+      <div class="field-group">
+        <label>Location</label>
+        <input type="text" id="r-location" placeholder="e.g. Meriam Library, 2nd Floor">
+      </div>
+      <div class="field-group">
+        <label>Category</label>
+        <select id="r-category">
+          <option value="Books">Books</option>
+          <option value="Rooms">Rooms</option>
+          <option value="Loanables">Loanables</option>
+          <option value="Tutoring">Tutoring</option>
+        </select>
+      </div>
+      <div class="field-group">
+        <label>Description</label>
+        <textarea id="r-desc" rows="3" placeholder="Describe the resource..."></textarea>
+      </div>
+      <div class="field-group">
+        <label>Availability</label>
+        <select id="r-avail">
+          <option value="Available">Available</option>
+          <option value="Limited">Limited</option>
+          <option value="Unavailable">Unavailable</option>
+        </select>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn-outline" onclick="closeModal('add-modal')">Cancel</button>
+      <button class="btn-sm-primary" onclick="submitResource()">Add Resource</button>
+    </div>
+  </div>
+</div>
+
+<!-- detail / schedule modal -->
+<div class="modal-overlay" id="detail-modal" onclick="closeOnOverlay(event,'detail-modal')">
+  <div class="detail-modal-box">
+    <div class="detail-header">
+      <h3 id="detail-title"></h3>
+      <button class="modal-close" onclick="closeModal('detail-modal')">&times;</button>
+    </div>
+    <div class="detail-body">
+      <p class="detail-desc" id="detail-desc"></p>
+      <div class="detail-media">
+        <div class="detail-img">
+          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#b0a89e" stroke-width="1.2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="3" x2="21" y2="21"/><line x1="21" y1="3" x2="3" y2="21"/></svg>
+        </div>
+        <div class="detail-calendar">
+          <p class="calendar-title">Select a time slot</p>
+          <div class="time-slots" id="time-slots"></div>
+        </div>
+      </div>
+    </div>
+    <div class="detail-footer">
+      <label class="agree-label">
+        <input type="checkbox" id="agree-check" onchange="toggleSchedule()">
+        I agree to the campus resource usage policy
+      </label>
+      <button class="btn-schedule" id="schedule-btn" disabled onclick="doSchedule()">Schedule</button>
+    </div>
+  </div>
+</div>
+
+<div id="toast"></div>
+
+<script>
+  const resources = {
+    Books: [],
+    Rooms: [],
+    Loanables: [],
+    Tutoring: [],
+  };
+
+  let currentTab = 'Books';
+  let currentResource = null;
+
+  function doLogin() {
+    const email = document.getElementById('login-email').value.trim();
+    const pass = document.getElementById('login-pass').value;
+    if (!email || !pass) { showToast('Please fill in all fields.'); return; }
+    document.getElementById('login-page').style.display = 'none';
+    document.getElementById('app-page').style.display = 'block';
+    renderTab(currentTab);
+  }
+
+  function doLogout() {
+    document.getElementById('app-page').style.display = 'none';
+    document.getElementById('login-page').style.display = 'flex';
+    document.getElementById('login-email').value = '';
+    document.getElementById('login-pass').value = '';
+  }
+
+  function switchTab(tab, el) {
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    el.classList.add('active');
+    currentTab = tab;
+    renderTab(tab);
+  }
+
+  function renderTab(tab) {
+    const grid = document.getElementById('card-grid');
+    const empty = document.getElementById('empty-state');
+    const list = resources[tab] || [];
+    grid.innerHTML = '';
+    if (list.length === 0) {
+      empty.style.display = 'flex';
+      return;
+    }
+    empty.style.display = 'none';
+    list.forEach((r, i) => {
+      let statusClass = 'status-unavailable';
+      if (r.avail === 'Available') statusClass = 'status-available';
+      else if (r.avail === 'Limited') statusClass = 'status-limited';
+      const card = document.createElement('div');
+      card.className = 'resource-card';
+      card.innerHTML = `
+        <div class="card-image">
+          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.2">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+            <line x1="3" y1="3" x2="21" y2="21"/>
+            <line x1="21" y1="3" x2="3" y2="21"/>
+          </svg>
+        </div>
+        <div class="card-body">
+          <span class="card-status ${statusClass}">${r.avail}</span>
+          <div class="card-title">${r.name}</div>
+          <div class="card-desc">${r.desc}</div>
+        </div>
+        <div class="card-footer">
+          <span class="card-location">📍 ${r.location}</span>
+          <button class="btn-view" onclick="openDetail(${i})">View details</button>
+        </div>`;
+      grid.appendChild(card);
+    });
+  }
+
+  function openAddModal() { openModal('add-modal'); }
+
+  function submitResource() {
+    const name = document.getElementById('r-name').value.trim();
+    const loc = document.getElementById('r-location').value.trim();
+    const cat = document.getElementById('r-category').value;
+    const desc = document.getElementById('r-desc').value.trim();
+    const avail = document.getElementById('r-avail').value;
+    if (!name || !loc || !desc) { showToast('Please fill in all required fields.'); return; }
+    resources[cat].push({ name, location: loc, desc, avail });
+    closeModal('add-modal');
+    if (cat === currentTab) renderTab(currentTab);
+    document.querySelectorAll('.tab-btn').forEach(b => {
+      if (b.textContent === cat) b.click();
+    });
+    showToast(`"${name}" added to ${cat}.`);
+    document.getElementById('r-name').value = '';
+    document.getElementById('r-location').value = '';
+    document.getElementById('r-desc').value = '';
+    document.getElementById('r-avail').value = 'Available';
+  }
+
+  function openDetail(index) {
+    const r = resources[currentTab][index];
+    currentResource = r;
+    document.getElementById('detail-title').textContent = r.name;
+    document.getElementById('detail-desc').textContent = r.desc + ' — Located at ' + r.location + '.';
+    document.getElementById('agree-check').checked = false;
+    document.getElementById('schedule-btn').disabled = true;
+    buildTimeSlots();
+    openModal('detail-modal');
+  }
+
+  function buildTimeSlots() {
+    const times = ['8:00 AM','9:00 AM','10:00 AM','11:00 AM','12:00 PM','1:00 PM','2:00 PM','3:00 PM','4:00 PM','5:00 PM','6:00 PM','7:00 PM'];
+    const taken = [2, 5, 9]; // fake unavailable slots
+    const container = document.getElementById('time-slots');
+    container.innerHTML = '';
+    times.forEach((t, i) => {
+      const slot = document.createElement('div');
+      slot.className = 'time-slot' + (taken.includes(i) ? ' taken' : '');
+      slot.textContent = t;
+      if (!taken.includes(i)) slot.onclick = () => {
+        document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
+        slot.classList.add('selected');
+      };
+      container.appendChild(slot);
+    });
+  }
+
+  function toggleSchedule() {
+    document.getElementById('schedule-btn').disabled = !document.getElementById('agree-check').checked;
+  }
+
+  function doSchedule() {
+    const selected = document.querySelector('.time-slot.selected');
+    if (!selected) { showToast('Please select a time slot.'); return; }
+    closeModal('detail-modal');
+    showToast(`Scheduled: "${currentResource.name}" at ${selected.textContent}`);
+  }
+
+  function openModal(id) { document.getElementById(id).classList.add('open'); }
+  function closeModal(id) { document.getElementById(id).classList.remove('open'); }
+  function closeOnOverlay(e, id) { if (e.target === document.getElementById(id)) closeModal(id); }
+
+  function showToast(msg) {
+    const t = document.getElementById('toast');
+    t.textContent = msg;
+    t.classList.add('show');
+    setTimeout(() => t.classList.remove('show'), 3000);
+  }
+
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && document.getElementById('login-page').style.display !== 'none') doLogin();
+  });
+</script>
+</body>
+</html>
diff --git a/django-site/studentpage/tests.py b/django-site/studentpage/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/django-site/studentpage/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/django-site/studentpage/urls.py b/django-site/studentpage/urls.py
new file mode 100644
index 0000000..9be7b0d
--- /dev/null
+++ b/django-site/studentpage/urls.py
@@ -0,0 +1,6 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.showStudentPage)
+]
diff --git a/django-site/studentpage/views.py b/django-site/studentpage/views.py
new file mode 100644
index 0000000..e5c4145
--- /dev/null
+++ b/django-site/studentpage/views.py
@@ -0,0 +1,4 @@
+from django.shortcuts import render
+
+def showStudentPage(request):
+    return render(request, 'studentpage/studentpage.html')