diff --git a/.gitignore b/.gitignore
index 7be4bd1b..5351fbde 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,8 @@ share/python-wheels/
 .installed.cfg
 *.egg
 MANIFEST
+yarn.lock
+package-lock.json
 
 # PyInstaller
 #  Usually these files are written by a python script from a template
@@ -61,7 +63,9 @@ local_settings.py
 db.sqlite3
 db.sqlite3-journal
 *.dump
+src/static/node_modules
 src/staticfiles
+src/staticroot
 src/media
 
 # Flask stuff:
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6a275c6d..4e2b76c5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,5 +14,6 @@
   "python.testing.pytestEnabled": true,
   "python.testing.pytestArgs": ["src"],
   // linter
-  "ruff.organizeImports": true
+  "ruff.organizeImports": true,
+  "git.ignoreLimitWarning": true
 }
diff --git a/pyproject.toml b/pyproject.toml
index 4b334868..90b3acde 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -18,7 +18,7 @@ dependencies = [
     "django-celery-beat>=2.6.0",
     "django-celery-results>=2.5.1",
     "django-crispy-forms>=2.1",
-    "django-handyhelpers>=0.3.22",
+    "django-handyhelpers>=0.3.28",
     "django-markdownify>=0.9.3",
     "django-storages[azure]>=1.14.2",
     "dj-database-url>=2.1.0",
diff --git a/requirements.dev.lock b/requirements.dev.lock
index c6e1b78c..71cc6440 100644
--- a/requirements.dev.lock
+++ b/requirements.dev.lock
@@ -12,6 +12,10 @@ asgiref==3.8.1
     # via
     #   spokanetech (pyproject.toml)
     #   django
+async-timeout==4.0.3
+    # via
+    #   aiohttp
+    #   redis
 attrs==24.2.0
     # via aiohttp
 azure-common==1.1.28
@@ -131,7 +135,7 @@ django-debug-toolbar==4.4.6
     # via spokanetech (pyproject.toml)
 django-filter==24.3
     # via djangorestframework-filters
-django-handyhelpers==0.3.26
+django-handyhelpers==0.3.28
     # via spokanetech (pyproject.toml)
 django-markdownify==0.9.5
     # via spokanetech (pyproject.toml)
@@ -149,6 +153,8 @@ drf-dynamic-fields==0.4.0
     # via django-handyhelpers
 eventbrite==3.3.5
     # via spokanetech (pyproject.toml)
+exceptiongroup==1.2.2
+    # via pytest
 flower==2.0.1
     # via spokanetech (pyproject.toml)
 freezegun==1.5.1
@@ -349,10 +355,13 @@ tinycss2==1.2.1
     #   bleach
     #   cairosvg
     #   cssselect2
+tomli==2.0.1
+    # via pytest
 tornado==6.4.1
     # via flower
 typing-extensions==4.12.2
     # via
+    #   asgiref
     #   azure-core
     #   azure-storage-blob
     #   beautifulsoup4
diff --git a/requirements.lock b/requirements.lock
index bcd2afbd..9850aefe 100644
--- a/requirements.lock
+++ b/requirements.lock
@@ -12,6 +12,10 @@ asgiref==3.8.1
     # via
     #   spokanetech (pyproject.toml)
     #   django
+async-timeout==4.0.3
+    # via
+    #   aiohttp
+    #   redis
 attrs==24.2.0
     # via aiohttp
 azure-common==1.1.28
@@ -110,7 +114,7 @@ django-crispy-forms==2.3
     #   crispy-bootstrap5
 django-filter==24.3
     # via djangorestframework-filters
-django-handyhelpers==0.3.26
+django-handyhelpers==0.3.28
     # via spokanetech (pyproject.toml)
 django-markdownify==0.9.5
     # via spokanetech (pyproject.toml)
@@ -242,6 +246,7 @@ tornado==6.4.1
     # via flower
 typing-extensions==4.12.2
     # via
+    #   asgiref
     #   azure-core
     #   azure-storage-blob
     #   beautifulsoup4
diff --git a/src/spokanetech/settings.py b/src/spokanetech/settings.py
index 29ab9b6a..64f05af2 100644
--- a/src/spokanetech/settings.py
+++ b/src/spokanetech/settings.py
@@ -39,7 +39,10 @@
     # SECURITY WARNING: don't run with debug turned on in production!
     DEBUG = True
 
-    ALLOWED_HOSTS = []
+    ALLOWED_HOSTS = [
+        "localhost",
+        "127.0.0.1",
+    ]
 
     INTERNAL_IPS = [
         "localhost",
@@ -280,26 +283,6 @@
 }
 
 
-# Django Debug Toolbar
-DEBUG_TOOLBAR_CONFIG = {
-    "DISABLE_PANELS": {
-        "debug_toolbar.panels.cache.CachePanel",
-        "debug_toolbar.panels.headers.HeadersPanel",
-        "debug_toolbar.panels.history.HistoryPanel",
-        "debug_toolbar.panels.profiling.ProfilingPanel",
-        "debug_toolbar.panels.redirects.RedirectsPanel",
-        "debug_toolbar.panels.request.RequestPanel",
-        "debug_toolbar.panels.settings.SettingsPanel",
-        "debug_toolbar.panels.signals.SignalsPanel",
-        "debug_toolbar.panels.sql.SQLPanel",
-        "debug_toolbar.panels.staticfiles.StaticFilesPanel",
-        "debug_toolbar.panels.templates.TemplatesPanel",
-        "debug_toolbar.panels.timer.TimerPanel",
-        "debug_toolbar.panels.versions.VersionsPanel",
-    }
-}
-
-
 # Crispy Forms
 CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
 
diff --git a/src/static/spokanetech/css/index-styles.css b/src/static/spokanetech/css/index-styles.css
new file mode 100644
index 00000000..a2ba39fb
--- /dev/null
+++ b/src/static/spokanetech/css/index-styles.css
@@ -0,0 +1,470 @@
+:root {
+    --light: #fff;
+    --dark: #111;
+    --gunmetal: hsla(197, 36%, 15%, 1);
+    --keppel: hsla(169, 59%, 45%, 1);
+    --persian-green: hsla(171, 58%, 40%, 1);
+    --pine-green: hsla(171, 46%, 31%, 1);
+    --rich-black: hsla(203, 32%, 8%, 1);
+    --accent-color: var(--keppel);
+}
+.text-primary {
+    color: var(--keppel) !important;
+}
+.text-secondary {
+    color: var(--light) !important;
+}
+
+/* Reset some default styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+ }
+
+ a {
+    text-decoration: none;
+    color: var(--accent-color);
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-image: url("../img/bg-02.jpg");
+    background-size: cover; /* or 'contain' or specific size like '100px 100px' */
+    background-repeat: no-repeat; /* or 'repeat' or 'repeat-x' or 'repeat-y' */
+    background-position: center; /* or 'top', 'bottom', 'left', 'right', 'center' */
+    background-attachment: fixed; /* or 'scroll' */    
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    color: var(--light);
+}
+
+main {
+    flex: 1;
+    text-align: center;
+    margin-top: 4rem;
+    margin-bottom: 2rem;
+    padding: 3rem;    
+}
+
+/* Navbar styles */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    background-color: transparent;
+    color: var(--light);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    padding-left: 3rem;
+    padding-right: 3rem;
+}
+
+.navbar .logo {
+    font-size: 1rem;
+    font-weight: bold;
+}
+.navbar .logo a {
+    color: var(--light);
+    opacity: .5;
+    text-decoration: none;
+    transition: opacity 0.3s ease;
+}
+.navbar .logo a:hover {
+    text-decoration: none;
+    opacity: 1;
+    color: var(--light);
+}
+.navbar .menu {
+    list-style: none;
+    display: flex;
+    gap: .25rem;
+}
+.navbar .menu li {
+    display: inline;
+}
+.navbar .menu a {
+    padding: 10px 15px;
+    color: var(--light);
+    opacity: .5;
+    text-decoration: none;
+    transition: opacity 0.3s ease;
+}
+.navbar .menu a:hover {
+    text-decoration: none;
+    opacity: 1;
+    color: var(--light);
+}
+
+.hero {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    text-align: left;
+    color: var(--light);
+    margin-bottom: 2rem;
+}
+
+.hero-content {
+    max-width: 90%;
+}
+
+.hero-content .accent {
+    font-style: italic;
+}
+
+.hero h1 {
+    font-size: 4.5rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+.hero h2 {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+}
+
+
+.hero p {
+    font-size: 1.2rem;
+}
+
+footer {
+    color: var(--light);
+    padding: 10px 20px;
+    width: 100%;
+    bottom: 0;
+    text-align: center;
+}
+
+footer p {
+    margin: 5px 0;
+}
+
+footer a {
+    color: var(--light);
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+footer .title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    opacity: 50%;
+    margin-bottom: .5rem;
+}
+
+footer .copyright {
+    font-size: .75rem;
+    opacity: 50%;
+}
+
+
+.hero-buttons {
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.hero-buttons .btn {
+    padding: 10px 20px;
+    font-size: 1rem;
+    border-radius: 5px;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-right: 10px; 
+    margin-top: 10px; 
+}
+
+/* .hero-buttons .btn-filled {
+    background-color: #007bff;
+    color: var(--light);
+}
+
+.hero-buttons .btn-filled:hover {
+    background-color: #0056b3;
+} */
+
+/* .hero-buttons .btn-outline {
+    background-color: transparent;
+    color: #007bff;
+    border-color: #007bff;
+}
+
+.hero-buttons .btn-outline:hover {
+    background-color: #007bff;
+    color: var(--light);
+} */
+
+.hero-buttons .btn-outline {
+    background-color: transparent;
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+}
+
+.hero-buttons .btn-outline:hover {
+    background-color: var(--accent-color);
+    color: var(--light);
+    box-shadow: 0rem 0.25rem 1rem -0.25rem var(--accent-color);
+}
+
+.empty-queryset {
+    color: var(--light);
+    margin-left: 5rem;
+    margin-right: 5rem;
+}
+
+
+.about h1 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 2.5rem;
+}
+
+.about p {
+    font-size: 1.5rem;
+    line-height: 1.5;
+    margin-bottom: 1.5rem;
+}
+
+.marquee-wrapper {
+    margin-top: .5rem;
+    margin: 0rem !important;
+}
+
+.marquee-wrapper a {
+    text-decoration: none;
+}
+
+.marquee-menu {
+    text-align: start;
+    margin-top: .25rem;
+    margin-bottom: 1rem;
+}
+.marquee-menu ul {
+    list-style: none;
+    margin-right: 0rem;
+    padding-left: 0rem;
+}
+.marquee-menu li {
+    display: inline;
+    margin-right: 1rem; 
+}
+.marquee-menu li a {
+    color: var(--light);
+    opacity: .5;
+    text-decoration: none;
+    transition: opacity 0.3s ease; 
+}
+.marquee-menu li a:hover {
+    text-decoration: none;
+    opacity: 1;
+    color: var(--light);
+}
+
+.card {
+    width: 250px;
+    height: 125px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 0.5rem;
+    box-shadow: 0rem 0.25rem 1rem -0.25rem var(--light, rgb(255, 255, 255));
+    text-align: center;
+    color: var(--light, rgb(255, 255, 255));
+    font-weight: bold;
+  }
+
+  .card:hover {
+    box-shadow: 0 4px 8px var(--accent, hsla(169, 59%, 45%, 1));
+    color: var(--accent, hsla(169, 59%, 45%, 1));
+  }
+
+  .highlight {
+    color: var(--accent, hsla(169, 59%, 45%, 1));
+  }
+
+
+  .list-card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 3rem;
+    padding: 3rem;
+  }
+
+  .list-card {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 0.5rem;
+    box-shadow: 0rem 0.25rem 1rem -0.25rem var(--light, rgb(255, 255, 255));
+    padding: 20px;
+    width: 400px; /* Fixed width */
+    height: 150px; /* Fixed height */
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--light, rgb(255, 255, 255));
+    cursor: pointer;
+}
+.list-card .title {
+    font-weight: bold;
+    font-size: 2.5rem;
+}
+.list-card .description {
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.tag-container {
+    margin:.75rem;
+}
+
+.tag {
+    font-size: .7rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
+    padding: .25rem .5rem;
+    color: var(--dark);
+    background-color: var(--accent-color);
+    border-radius: 999px;
+}
+.list-card .footer {
+    font-size: .75rem;
+    margin-top: .5rem;
+    color: var(--accent-color);
+    display: flex;
+    justify-content: space-between;
+}
+.list-card .footer a {
+    font-size: .75rem;
+    margin-top: .5rem;
+    color: var(--accent-color);
+    text-decoration: none !important;
+}
+.split-footer {
+    display: flex;
+    justify-content: space-between; /* Two columns, left and right justified */
+    align-items: center;
+    width: 100%;
+    margin-top: .25rem;
+    font-size: .75rem;
+    /* color: var(--accent-color); */
+    color: var(--light);
+    text-decoration: none !important;
+}
+.footer-left {
+    text-align: left; /* Left justify */
+    flex: 1; /* Take up remaining space */
+}
+
+.footer-right {
+    text-align: right; /* Right justify */
+    flex: 1; /* Take up remaining space */
+}
+
+
+.list-card:hover {
+    box-shadow: 0 4px 8px var(--accent, hsla(169, 59%, 45%, 1));
+    /* color: var(--accent, hsla(169, 59%, 45%, 1)); */
+}
+.list-card:hover .title {
+    color: var(--accent, hsla(169, 59%, 45%, 1));
+}
+.list-card:hover .description {
+    color: var(--accent, hsla(169, 59%, 45%, 1));
+}
+.list-card:hover .split-footer {
+    color: var(--accent, hsla(169, 59%, 45%, 1));
+}
+
+
+.detail h1 {
+    font-size: 2.5rem;
+}
+.homepage {
+    margin: .5rem;
+    font-size: .75rem;
+}
+.homepage a {
+    margin: .5rem;
+    color: var(--light);
+    opacity: .5;
+    text-decoration: none;
+    transition: opacity 0.3s ease;
+}
+.homepage a:hover {
+    text-decoration: none;
+    opacity: 1;
+    color: var(--light);
+}
+.description {
+    margin: 3rem;
+}
+
+
+/* Custom CSS for Bootstrap 5 Modals */
+
+/* Override modal backdrop to make it semi-transparent */
+.modal-backdrop.show {
+    opacity: 0.5; /* Adjust the opacity as needed */
+}
+
+/* Override modal content to have a semi-transparent background */
+.modal-content {
+    background-color: hsla(197, 36%, 15%, .75); /* Adjust the opacity as needed */
+    border: 2px solid var(--gunmetal);
+    backdrop-filter: blur(10px);
+}
+
+
+/* Apply accent color to modal buttons */
+.modal-footer .btn {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+}
+
+.modal-footer .btn:hover {
+    background-color: var(--accent-color);
+    opacity: 0.9; /* Optional: Add hover effect */
+}
+
+.modal-footer .btn-secondary {
+    background-color: #6c757d; /* Bootstrap secondary color */
+    border-color: #6c757d;
+    color: white;
+}
+
+.modal-footer .btn-secondary:hover {
+    background-color: #5a6268; /* Darken secondary color on hover */
+}
+.modal-header,
+.modal-footer {
+    border: none; /* Remove the default Bootstrap borders */
+}
+.btn-close {
+    filter: invert(100%);
+}
+
+
+.calendar-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 3rem;
+    padding: 3rem;
+  }
diff --git a/src/static/main.css b/src/static/spokanetech/css/main.css
similarity index 92%
rename from src/static/main.css
rename to src/static/spokanetech/css/main.css
index 314edb8e..4bba9c24 100644
--- a/src/static/main.css
+++ b/src/static/spokanetech/css/main.css
@@ -3,10 +3,6 @@ li {
   list-style-type: disc !important;
 }
 
-.navbar li {
-  list-style-type: none !important;
-}
-
 .fit-content {
   width: fit-content;
 }
diff --git a/src/static/android-chrome-192x192.png b/src/static/spokanetech/img/android-chrome-192x192.png
similarity index 100%
rename from src/static/android-chrome-192x192.png
rename to src/static/spokanetech/img/android-chrome-192x192.png
diff --git a/src/static/android-chrome-512x512.png b/src/static/spokanetech/img/android-chrome-512x512.png
similarity index 100%
rename from src/static/android-chrome-512x512.png
rename to src/static/spokanetech/img/android-chrome-512x512.png
diff --git a/src/static/apple-touch-icon.png b/src/static/spokanetech/img/apple-touch-icon.png
similarity index 100%
rename from src/static/apple-touch-icon.png
rename to src/static/spokanetech/img/apple-touch-icon.png
diff --git a/src/static/spokanetech/img/bg-01.jpg b/src/static/spokanetech/img/bg-01.jpg
new file mode 100644
index 00000000..a6af15e4
Binary files /dev/null and b/src/static/spokanetech/img/bg-01.jpg differ
diff --git a/src/static/spokanetech/img/bg-02.jpg b/src/static/spokanetech/img/bg-02.jpg
new file mode 100644
index 00000000..950dbc66
Binary files /dev/null and b/src/static/spokanetech/img/bg-02.jpg differ
diff --git a/src/static/favicon-16x16.png b/src/static/spokanetech/img/favicon-16x16.png
similarity index 100%
rename from src/static/favicon-16x16.png
rename to src/static/spokanetech/img/favicon-16x16.png
diff --git a/src/static/favicon-32x32.png b/src/static/spokanetech/img/favicon-32x32.png
similarity index 100%
rename from src/static/favicon-32x32.png
rename to src/static/spokanetech/img/favicon-32x32.png
diff --git a/src/static/favicon.ico b/src/static/spokanetech/img/favicon.ico
similarity index 100%
rename from src/static/favicon.ico
rename to src/static/spokanetech/img/favicon.ico
diff --git a/src/templates/spokanetech/base.html b/src/templates/spokanetech/base.html
index a2e178f8..e290cb34 100644
--- a/src/templates/spokanetech/base.html
+++ b/src/templates/spokanetech/base.html
@@ -1,48 +1,96 @@
-{% extends "handyhelpers/handyhelpers_with_sidebar.htm" %}
 {% load static %}
 
-{% block favicon %}
-<link rel="apple-touch-icon" sizes="180x180" href="{% static '/apple-touch-icon.png' %}">
-<link rel="icon" type="image/png" sizes="32x32" href="{% static '/favicon-32x32.png' %}">
-<link rel="icon" type="image/png" sizes="16x16" href="{% static '/favicon-16x16.png' %}">
-<link rel="stylesheet" href="{% static '/main.css' %}">
-<link rel="manifest" href="{% static '/site.webmanifest' %}">
-<title>Spokane Tech</title>
-{% endblock favicon %}
-
-{% block app_javascript %}
-{% comment %}
-<script>
-  const TIMEZONE_ID = "TIMEZONE_ID"
-
-  $(document).ready(() => {
-    const timezoneID = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const storedTimezone = window.localStorage.getItem(TIMEZONE_ID)
-    const sessionTimezone = "{{ request.timezone }}"
-    if (!storedTimezone || storedTimezone != timezoneID || !sessionTimezone || sessionTimezone != timezoneID) {
-      $.post({
-        url: "/set_timezone/",
-        data: { "timezone": timezoneID },
-        headers: { "X-CSRFToken": csrftoken }, // handyhelpers base template defines `csrftoken`
-        success: (data) => {
-          window.localStorage.setItem(TIMEZONE_ID, timezoneID)
-          location.reload()
-        },
-      })
-    }
-  })
-</script>
-{% endcomment %}
-{% endblock app_javascript %}
-
-{% block sidebar %}
-{% include 'spokanetech/sidebar.htm' %}
-{% endblock sidebar %}
-
-{% block mainnavbar %}
-{% include 'spokanetech/navbar.htm' %}
-{% endblock mainnavbar %}
-
-{% block mainfooter %}
-{% include 'spokanetech/footer.htm' %}
-{% endblock mainfooter%}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'spokanetech/img/apple-touch-icon.png' %}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'spokanetech/img/favicon-32x32.png' %}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'spokanetech/img/favicon-16x16.png' %}">
+    <title>Spokane Tech</title>
+    <link href="{% static 'node_modules/bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
+    <link href="{% static 'node_modules/@fortawesome/fontawesome-free/css/all.min.css' %}" rel="stylesheet">
+    
+    <link rel="stylesheet" href="{% static 'spokanetech/css/index-styles.css' %}">
+
+    <link rel="stylesheet" href="{% static 'node_modules/tippy.js/dist/tippy.css' %}">
+    <link rel="stylesheet" href="{% static 'node_modules/fun-effects/src/css/fades.css' %}">
+    <link rel="stylesheet" href="{% static 'node_modules/fun-effects/src/css/marquee.css' %}">
+    <link rel="stylesheet" href="{% static 'node_modules/fun-effects/src/css/blur_group.css' %}">
+    <link rel="stylesheet" href="{% static 'node_modules/fun-effects/src/css/background_icons.css' %}">
+    
+    <script type="text/javascript" src="{% static 'node_modules/htmx.org/dist/htmx.min.js' %}"></script>
+
+
+</head>
+<body>
+    <header class="fade-in-blur" style="--fade-duration: .75s;">
+        <nav class="navbar">
+            <div class="logo">
+                <a href="" title="SpokaneTech.org home" hx-get="{% url 'web:index' %}" hx-target="#body_main" hx-push-url="true">Home</a>
+            </div>
+            
+            <ul class="menu">
+                <li><a href="https://discord.gg/wHrSJNgpnP" target="_blank" class="tippy-tooltip" data-tippy-content="Join us on Discord"><i class="fa-brands fa-discord"></i></a></li>
+                <li><a href="" hx-get="{% url 'web:get_techgroups' display='list' %}" hx-target="#body_main" hx-push-url="true" class="tippy-tooltip" data-tippy-content="View our tech groups">
+                    <i class="fa-solid fa-user-group"></i></a>
+                </li>
+                <li><a href="" hx-get="{% url 'web:get_events' display='list' %}" hx-target="#body_main" hx-push-url="true" class="tippy-tooltip" data-tippy-content="List upcoming events">
+                    <i class="fa-solid fa-list-check"></i></a>
+                </li>
+                <li><a hx-get="{% url 'web:event_calendar' year=0 month=0 %}" hx-target="#body_main" hx-push-url="true" class="tippy-tooltip" data-tippy-content="Calendar of events">
+                  <i class="fa-solid fa-calendar-days"></i></a>
+                </li>
+                <li><a href="" class="tippy-tooltip" data-tippy-content="Log in or sign up">
+                    <i class="fa-solid fa-right-to-bracket"></i></a>
+                </li>
+            </ul>
+        </nav>
+    </header>
+ 
+    {% block main_content %}
+    <main id="body_main" hx-get="{% url 'web:about' %}" hx-trigger="load"> 
+    </main>
+    {% endblock main_content %}
+ 
+    <footer class="fade-in-blur" style="--fade-duration: .75s;">
+        <p class="title">SpokaneTech.org</p>
+        <p class="copyright">&copy; 2024 spokantech.org. All rights reserved.</p>
+    </footer>
+
+    {% block modals %}
+    {% if not disable_modals_in_base %}
+    {% include 'handyhelpers/htmx/bs5/generic_modal.htm' %}
+    {% endif %}
+    {% endblock modals %}
+    <script type="text/javascript" src="{% static 'node_modules/jquery/dist/jquery.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'node_modules/@popperjs/core/dist/umd/popper.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'node_modules/bootstrap/dist/js/bootstrap.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'node_modules/tippy.js/dist/tippy-bundle.umd.js' %}"></script>
+    <script type="text/javascript" src="{% static 'node_modules/fun-effects/dist/js/marquee.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'node_modules/fun-effects/dist/js/background_icons.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'node_modules/tippy.js/dist/tippy-bundle.umd.min.js' %}"></script>
+
+    <script>   
+        // Listen for the htmx:afterOnLoad event
+        document.addEventListener('htmx:afterOnLoad', function(event) {
+          addAnimationDelay();
+          setRightProperty();
+          setLeftProperty();
+          addMarqueeMouseListener();
+        });
+      </script>
+
+    <!-- Initialize Tippy.js -->
+    <script>
+        tippy('.tippy-tooltip', {
+            placement: 'bottom',
+            animation: 'fade',
+            arrow: true,
+        });
+    </script>
+
+</body>
+</html>
diff --git a/src/web/models.py b/src/web/models.py
index 2cf49113..0f17be4b 100644
--- a/src/web/models.py
+++ b/src/web/models.py
@@ -41,7 +41,10 @@ def __str__(self) -> str:
         return self.name
 
     def get_absolute_url(self) -> str:
-        return reverse("web:get_tech_group", kwargs={"pk": self.pk})
+        return reverse("web:get_techgroup", kwargs={"pk": self.pk})
+
+    # def get_htmx_detail_url(self) -> str:
+    #     return reverse("web:get_techgroup", kwargs={"pk": self.pk})
 
 
 class EventQuerySet(models.QuerySet):
@@ -111,6 +114,9 @@ def __str__(self) -> str:
     def get_absolute_url(self) -> str:
         return reverse("web:get_event", kwargs={"pk": self.pk})
 
+    # def get_htmx_detail_url(self) -> str:
+    #     return reverse("web:detail_event", kwargs={"pk": self.pk})
+
 
 class EventbriteOrganization(models.Model):
     tech_group = models.ForeignKey(TechGroup, on_delete=models.CASCADE)
diff --git a/src/web/scripts/__init__.py b/src/web/scripts/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/src/web/scripts/generate_dev_data.py b/src/web/scripts/generate_dev_data.py
new file mode 100644
index 00000000..b2454bc9
--- /dev/null
+++ b/src/web/scripts/generate_dev_data.py
@@ -0,0 +1,65 @@
+from web.models import TechGroup
+
+
+def create_groups():
+    print("INFO: creating TechGroup entries")
+    data_list = [
+        {
+            "name": "Business Brew",
+            "icon": """<i class="fa-solid fa-mug-saucer"></i>""",
+        },
+        {
+            "name": "Greater Spokane Inc",
+            "icon": """""",
+        },
+        {
+            "name": "Ignite Northwest",
+            "icon": """""",
+        },
+        {
+            "name": "INCH360",
+            "icon": """""",
+        },
+        {
+            "name": "SP3NW",
+            "icon": """""",
+        },
+        {
+            "name": "Spokane DevOps Meetup",
+            "icon": """""",
+        },
+        {
+            "name": "Spokane Go Users Group",
+            "icon": """""",
+        },
+        {
+            "name": "Spokane .NET Users Group",
+            "icon": """""",
+        },
+        {
+            "name": "spokaneOS",
+            "icon": """""",
+        },
+        {
+            "name": "Spokane Python User Group",
+            "icon": """<i class="fa-brands fa-python"></i>""",
+        },
+        {
+            "name": "Spokane Rust User Group",
+            "icon": """""",
+        },
+        {
+            "name": "Spokane Tech Community",
+            "icon": """""",
+        },
+        {
+            "name": "Spokane UX",
+            "icon": """""",
+        },
+    ]
+    for data in data_list:
+        TechGroup.objects.get_or_create(name=data["name"], defaults=data)
+
+
+def run():
+    create_groups()
diff --git a/src/web/templates/web/event_detail.html b/src/web/templates/web/event_detail.html
deleted file mode 100644
index 15c6813c..00000000
--- a/src/web/templates/web/event_detail.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% extends 'spokanetech/base.html' %}
-
-{% block content %}
-<div class="mw-100">
-  {% include "web/partials/detail_event.htm" with object=object %}
-</div>
-{% endblock content %}
diff --git a/src/web/templates/web/event_list.html b/src/web/templates/web/event_list.html
deleted file mode 100644
index 1aad62b7..00000000
--- a/src/web/templates/web/event_list.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% extends 'spokanetech/base.html' %}
-
-{% block content %}
-{% include "web/partials/event_list.htm" %}
-{% endblock content %}
diff --git a/src/web/templates/web/full/custom/about.html b/src/web/templates/web/full/custom/about.html
new file mode 100644
index 00000000..42042611
--- /dev/null
+++ b/src/web/templates/web/full/custom/about.html
@@ -0,0 +1,6 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block main_content %}
+    <main id="body_main" hx-get="{% url 'web:about' %}" hx-trigger="load"> 
+    </main>
+{% endblock main_content %}
diff --git a/src/web/templates/web/full/custom/calendar.html b/src/web/templates/web/full/custom/calendar.html
new file mode 100644
index 00000000..efb84b3f
--- /dev/null
+++ b/src/web/templates/web/full/custom/calendar.html
@@ -0,0 +1,6 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block main_content %}
+    <main id="body_main" hx-get="{% url 'web:event_calendar' year=0 month=0 %}" hx-trigger="load"> 
+    </main>
+{% endblock main_content %}
diff --git a/src/web/templates/web/full/custom/index.html b/src/web/templates/web/full/custom/index.html
new file mode 100644
index 00000000..b91ee5fa
--- /dev/null
+++ b/src/web/templates/web/full/custom/index.html
@@ -0,0 +1,6 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block main_content %}
+    <main id="body_main" hx-get="{% url 'web:index' %}" hx-trigger="load"> 
+    </main>
+{% endblock main_content %}
diff --git a/src/web/templates/web/full/detail/event.html b/src/web/templates/web/full/detail/event.html
new file mode 100644
index 00000000..fe63762d
--- /dev/null
+++ b/src/web/templates/web/full/detail/event.html
@@ -0,0 +1,6 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block main_content %}
+    <main id="body_main" hx-get="{% url 'web:get_event' object.pk %}" hx-trigger="load"> 
+    </main>
+{% endblock main_content %}
diff --git a/src/web/templates/web/full/detail/group.html b/src/web/templates/web/full/detail/group.html
new file mode 100644
index 00000000..3397a765
--- /dev/null
+++ b/src/web/templates/web/full/detail/group.html
@@ -0,0 +1,6 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block main_content %}
+    <main id="body_main" hx-get="{% url 'web:get_techgroup' object.pk %}" hx-trigger="load"> 
+    </main>
+{% endblock main_content %}
diff --git a/src/web/templates/web/full/list/events.html b/src/web/templates/web/full/list/events.html
new file mode 100644
index 00000000..ad4aa631
--- /dev/null
+++ b/src/web/templates/web/full/list/events.html
@@ -0,0 +1,9 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block main_content %}
+    <main id="body_main"> 
+        {% include 'web/partials/list/events.htm' %}
+    </main>
+{% endblock main_content %}
+
+    
\ No newline at end of file
diff --git a/src/web/templates/web/full/list/groups.html b/src/web/templates/web/full/list/groups.html
new file mode 100644
index 00000000..578b1471
--- /dev/null
+++ b/src/web/templates/web/full/list/groups.html
@@ -0,0 +1,9 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block main_content %}
+    <main id="body_main"> 
+        {% include 'web/partials/list/groups.htm' %}
+    </main>
+{% endblock main_content %}
+
+    
\ No newline at end of file
diff --git a/src/web/templates/web/partials/custom/about.htm b/src/web/templates/web/partials/custom/about.htm
new file mode 100644
index 00000000..84d61d7f
--- /dev/null
+++ b/src/web/templates/web/partials/custom/about.htm
@@ -0,0 +1,15 @@
+<section class="about">
+    <h1 class="fade-in-blur" style="--fade-duration: .9s;">About SpokaneTech.org</h1>
+    <p class="fade-in-blur" style="--fade-duration: 1s;">
+        Welcome to <span class="highlight">SpokaneTech.org</span>, a vibrant community of technology enthusiasts based in Spokane and the greater Inland Northwest. Our mission is to <strong class="highlight">foster community</strong>, <strong class="highlight">knowledge sharing</strong>, and <strong class="highlight">growth</strong> among individuals who are passionate about technology.
+    </p>
+    <p class="fade-in-blur" style="--fade-duration: 1.1s;">    
+        Founded on the principles of collaboration and innovation, SpokaneTech.org brings together tech professionals, hobbyists, students, and anyone with an interest in technology. We believe that by working together and sharing knowledge, we can drive personal and professional growth, as well as contribute to the technological advancement of our community.
+    </p>
+    <p class="fade-in-blur" style="--fade-duration: 1.2s;">
+        At SpokaneTech.org, we host regular meetups, workshops, and events where members can connect, learn, and share their experiences. Our events cover a wide range of topics, from software development and cybersecurity to emerging technologies like AI and blockchain. Whether you're a seasoned professional or just starting your tech journey, <strong class="highlight">there's always something for everyone.</strong>
+    </p>
+    <p class="fade-in-blur" style="--fade-duration: 1.3s;">
+        Join us at SpokaneTech.org and become a part of a supportive and dynamic community that is dedicated to making a positive impact through technology. Together, we can achieve great things and help shape the future of technology in Spokane and beyond.
+    </p>
+</section>
\ No newline at end of file
diff --git a/src/web/templates/web/partials/custom/calendar.htm b/src/web/templates/web/partials/custom/calendar.htm
new file mode 100644
index 00000000..ba0d64fb
--- /dev/null
+++ b/src/web/templates/web/partials/custom/calendar.htm
@@ -0,0 +1,135 @@
+    
+<section class="about">
+    <h1 class="fade-in-blur mb-2" style="--fade-duration: 0.3s;">{{ title }}</h1>
+    <h4 class="text-primary fade-in-blur" style="--fade-duration: 0.4s;">{{ month_name }} {{ year }}</h1>
+</section>    
+
+<div id="calendar-wrapper" class="calendar-container">
+    <style>
+        .calendar-table {
+            box-shadow: 0rem 0.25rem 1rem -0.25rem var(--accent-color);
+            width: 100%;
+            border-collapse: collapse;
+            table-layout: fixed; 
+        }
+        .calendar-table th,
+        .calendar-table td {
+        border: 1px solid var(--accent-color); /* Adds a thin, light gray border around each cell */
+        padding: .5rem; /* Optional: Adds some padding inside the cells for better spacing */
+        }
+
+        /* Optional: Adds a slight hover effect to table rows */
+        /* .calendar-table tr:hover {
+        background-color: var(--accent-color);
+        } */
+
+        .calendar-table thead {
+            background-color: rgba(255, 255, 255, 0.3);
+        }
+        .calendar-table thead tr {
+            height: 3rem;
+        }
+        .calendar-table tbody {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .calendar-table tbody tr {
+            height: 4rem;
+        }
+        .calendar-table tbody tr td {
+            vertical-align: top;
+        }
+        .today {
+            color: var(--accent-color);
+            font-weight: bold;
+            text-decoration: underline;
+        }
+        .cursor-pointer {
+            cursor: pointer;
+        }
+        .event {
+            border: 1px solid var(--accent-color);
+            margin: .75rem;
+            border-radius: .25rem;
+            background-color: rgba(255, 255, 255, 0.3);
+            transition: transform 0.3s ease; /* Smooth transition effect for the transform */
+        }
+        .event:hover {
+            transform: scale(1.1); /* Scales the element to 1.1 times its original size */
+        }
+        .nav-links {
+            margin-bottom: .5rem;
+        }
+    </style>  
+
+    <div class="container-fluid fade-in-blur" style="--fade-duration: .5s;">
+        <div class="text-end nav-links">
+            <a 
+            {% if use_htmx %}
+            hx-get="{{ today_url }}" hx-target="#body_main"
+            {% else %}
+            href="{{ today_url }}" 
+            {% endif %}
+            class="me-3" style="text-decoration: none">
+                today
+            </a>
+            <a 
+            {% if use_htmx %}
+            hx-get="{{ prev_month_url }}" hx-target="#body_main"
+            {% else %}
+            href="{{ prev_month_url }}"
+            {% endif %}
+            class="me-2" title="previous month">
+                <i class="fa-solid fa-angle-left"></i>
+            </a>
+            <a 
+            {% if use_htmx %}
+            hx-get="{{ next_month_url }}" hx-target="#body_main"
+            {% else %}
+            href="{{ next_month_url }}"
+            {% endif %}
+            class="ms-2" title="next month">
+                <i class="fa-solid fa-angle-right"></i>
+            </a>
+        </div>
+        <table class="calendar-table">
+            <thead>
+                <tr class="">
+                    <th class="calendar-table-header" scope="col">Mon</th>
+                    <th class="calendar-table-header" scope="col">Tue</th>
+                    <th class="" scope="col">Wed</th>
+                    <th class="" scope="col">Thu</th>
+                    <th class="" scope="col">Fri</th>
+                    <th class="" scope="col">Sat</th>
+                    <th class="" scope="col">Sun</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for week in cal_data %}
+                    <tr>
+                    {% for day in week %}
+                        <td {% if day == today.day and month == today.month and year == today.year %}class="today"{% endif %}>
+                            {% if day %}
+                            <div class="text-end {% if day == today.day and month == today.month and year == today.year %}fw-bold{% endif %}">{{ day }}</div>
+                            {%endif%}
+                            {% for event in event_list %}
+                                {% if event.date_time.day == day and event.date_time.month == month and event.date_time.year == year %}   
+                                    {% if event_detail_url %}
+                                <div class="event hvr-grow d-block cursor-pointer"
+                                hx-get="{% url event_detail_url event.pk %}"
+                                hx-target="#modal_wrapper"
+                                data-bs-toggle="modal"
+                                data-bs-target="#modal_wrapper">{{ event }}
+                                </div>
+                                    {% else %}
+                                    <div class="event">{{ event }}</div>
+                                    {% endif %}
+                                {% endif %}
+                            {% endfor %}
+                        </td>
+                    {% endfor %}
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
diff --git a/src/web/templates/web/partials/custom/index.htm b/src/web/templates/web/partials/custom/index.htm
new file mode 100644
index 00000000..656f047b
--- /dev/null
+++ b/src/web/templates/web/partials/custom/index.htm
@@ -0,0 +1,23 @@
+<section class="hero fade-in-blur" style="--fade-duration: 1s;">
+    <div class="hero-content">
+        <h1><span class="accent">Your</span> Inland Northwest tech community</h1>
+        <div class="hero-buttons">
+            <button class="btn btn-outline" hx-get="{% url 'web:about' %}" hx-target="#body_main" hx-push-url="true">Learn More</button>
+        </div>
+    </div>
+</section>
+<section class="fade-in-blur" style="--fade-duration: 1s;">
+    <div class="marquee-menu">
+        <ul>
+            <li><a href="#" hx-get="{% url 'web:get_techgroups' display='index' %}" hx-target="#marquee">Groups</a></li>
+            <li><a href="#" hx-get="{% url 'web:get_events' display='index' %}" hx-target="#marquee">Events</a></li>
+        </ul>
+    </div>
+    <div class="marquee-wrapper blur-group-container fade-in-blur" id="marquee"
+    style="--fade-duration: 1.5s;
+           --marquee-item-width: 280px; 
+           --marquee-item-height: 150px; 
+           --marquee-duration: 90s"
+    hx-get="{% url 'web:get_techgroups' display='index' %}" hx-trigger="load"
+    >
+</section>
\ No newline at end of file
diff --git a/src/web/templates/web/partials/detail/event.htm b/src/web/templates/web/partials/detail/event.htm
new file mode 100644
index 00000000..d74c6b47
--- /dev/null
+++ b/src/web/templates/web/partials/detail/event.htm
@@ -0,0 +1,33 @@
+{% load markdownify %}
+<section class="detail fade-in-blur mb-2" style="--fade-duration: .3s;">
+    <h1 class="fw-bold">{{ object.name }}</h1>
+</section>
+
+<section class="fade-in-blur" style="--fade-duration: .5s;">
+    <div class="mb-4">{{ object.date_time }}</div>
+    <div>
+        {% if object.group %}
+        Hosted by:<br/>
+        <a href="{{ object.group.get_absolute_url }}">{{ object.group }}</a>
+        {% endif %}
+    </div>
+</section>
+
+<section class="fade-in-blur" style="--fade-duration: .75s;">
+    <div class="description">
+        {% if object.description %}
+        {{ object.description|markdownify }}
+        {% else %}
+        <i>No description</i>
+        {% endif %}        
+    </div>
+</section>
+
+<section class="fade-in-blur" style="--fade-duration: 1s;">
+    <div class="tag-container mb-4">
+        {% for tag in object.tags.all %}
+        <span class="tag">{{ tag.value }}</span>
+        {% endfor %}
+    </div>
+    <div><a href="{{ event.url }}" target="_blank">RSVP here</a></div>
+</section>
diff --git a/src/web/templates/web/partials/detail/group.htm b/src/web/templates/web/partials/detail/group.htm
new file mode 100644
index 00000000..bcc7fd81
--- /dev/null
+++ b/src/web/templates/web/partials/detail/group.htm
@@ -0,0 +1,29 @@
+{% load markdownify %}
+<section class="detail fade-in-blur" style="--fade-duration: .3s;">
+    <h1>{{ object.icon|safe }}</h1>
+    <h1>{{ object.name }}</h1>
+</section>
+
+<section class="fade-in-blur" style="--fade-duration: .5s;">
+    <div class="homepage">
+        {% if object.homepage %}
+        <a href="{{ object.homepage }}">{{ object.homepage }}</a>
+        {% endif %}
+    </div>
+</section>
+
+<section class="fade-in-blur" style="--fade-duration: .75s;">
+    <div class="tag-container mb-4">
+        {% for tag in object.tags.all %}
+        <span class="tag">{{ tag.value }}</span>
+        {% endfor %}
+    </div>
+    <div class="description">
+        {% if object.description %}
+        {{ object.description|markdownify }}
+        {% else %}
+        <i>No description</i>
+        {% endif %}        
+    </div>
+</section>
+    
\ No newline at end of file
diff --git a/src/web/templates/web/partials/detail_event.htm b/src/web/templates/web/partials/detail_event.htm
deleted file mode 100644
index 6e0ff77f..00000000
--- a/src/web/templates/web/partials/detail_event.htm
+++ /dev/null
@@ -1,64 +0,0 @@
-{% load web_extras markdownify %}
-<div class="max-w-content">
-  <h1 class="mb-3">
-    {{ object }}
-  </h1>
-
-  <div class="mb-3 d-inline-block">
-    {% include 'spokanetech/partials/human_readable_datetime.htm' with object=object only %}
-  </div>
-
-  {% if object.image %}
-  <div class="max-w-100">
-    <img class="w-100 rounded" src="{{ object.image.url }}" />
-  </div>
-  {% endif %}
-
-  {% if object.group %}
-  <div class="mb-3 card fit-content">
-    <div class="card-body">
-      <div class="card-title my-0">
-        <a href="{{ object.group.get_absolute_url }}">{{ object.group }}</a>
-      </div>
-    </div>
-  </div>
-  {% endif %}
-
-  <p>
-    <h2>Description</h2>
-    {{ object.description|markdownify }}
-  </p>
-
-  {% with tags=object.tags.all %}
-  {% if tags %}
-  <p>
-    <h3>Tags</h3>
-    <ul>
-    {% for tag in tags %}
-    <li><a href="{% url 'web:list_events' %}?tags={{ tag.id }}">{{ tag.value }}</a></li>
-    {% endfor %}
-    </ul>
-  </p>
-  {% elif object.group.tags.all %}
-  <p>
-    <h3>Tags</h3>
-    <ul>
-    {% for tag in object.group.tags.all %}
-    <li><a href="/events?tags={{ tag.id }}&">{{ tag.value }}</a></li>
-    {% endfor %}
-    </ul>
-  </p>
-  {% endif %}
-  {% endwith %}
-
-  {% if event.url %}
-  <a class="btn btn-primary" href="{{ event.url }}" target="_blank">
-    RSVP <i class="fa-solid fa-arrow-up-right-from-square"></i> 
-  </a>
-  {% endif %}
-  {% if can_edit %}
-  <a href="{% url 'web:update_event' object.pk %}" class="btn btn-outline-primary">
-    Edit <i class="fa-solid fa-pen-to-square"></i>
-  </a>
-  {% endif %}
-</div>
diff --git a/src/web/templates/web/partials/detail_tech_group.htm b/src/web/templates/web/partials/detail_tech_group.htm
deleted file mode 100644
index c309a580..00000000
--- a/src/web/templates/web/partials/detail_tech_group.htm
+++ /dev/null
@@ -1,44 +0,0 @@
-{% load markdownify %}
-<div class="max-w-content">
-    <h1>
-        <i class="{{ object.icon }}"></i>
-        {{ object }}
-    </h1>
-    {% if object.homepage %}
-        <a href="{{ object.homepage }}">{{ object.homepage }}</a>
-    {% endif %}
-    <hr class>
-    {% if object.description %}
-    {{ object.description|markdownify }}
-    {% else %}
-    <i>No description</i>
-    {% endif %}
-
-    {% with tags=object.tags.all %}
-    {% if tags %}
-    <p>
-        <h3>Tags</h3>
-        <ul>
-        {% for tag in tags %}
-        <li><a href="{% url 'web:list_tech_groups' %}?tags={{ tag.id }}">{{ tag.value }}</a></li>
-        {% endfor %}
-        </ul>
-    </p>
-    {% endif %}
-    {% endwith %}
-
-    {% if can_edit %}
-    <a href="{% url 'web:edit_tech_group' object.pk %}" class="btn btn-outline-primary">
-        Edit <i class="fa-solid fa-pen-to-square"></i>
-      </a>
-    {% endif %}
-
-    {% with upcoming_events=object.event_set.all %}
-    {% if upcoming_events %}
-    <h2>Upcoming Events:</h2>
-        <div class="mw-100">
-          {% include "web/partials/event_list.htm" with queryset=upcoming_events %}
-        </div>
-    {% endif %}
-    {% endwith %}
-</div>
diff --git a/src/web/templates/web/partials/event_list.htm b/src/web/templates/web/partials/event_list.htm
deleted file mode 100644
index 002c5752..00000000
--- a/src/web/templates/web/partials/event_list.htm
+++ /dev/null
@@ -1,63 +0,0 @@
-{% extends 'web/partials/generic_list.htm' %}
-{% load web_extras markdownify %}
-
-{% block content %}
-<div class="grid">
-  {% for object in queryset %}
-  <div class="card mb-0">
-    {% if object.image %}
-    <a href="{{ object.get_absolute_url }}">
-      <img style="max-height: 200px; object-fit: cover;" src="{{ object.image.url }}" class="card-img-top">
-    </a>
-    {% endif %}
-    <div class="card-body card-header">
-      <h5 class="card-title">
-        <a href="{{ object.get_absolute_url }}" class="link">
-          {{ object }}
-        </a>
-      </h5>
-      <span data-testid="date_time">
-        {% include 'spokanetech/partials/human_readable_datetime.htm' with object=object duration=object.duration only %}
-      </span>
-    </div>
-    <div class="card-body">
-      {% if object.tags.all %}
-      <div class="mb-1">
-        {% for tag in object.tags.all %}
-        <a href="{% url 'web:list_events' %}?tags={{ tag.pk }}" class="badge rounded-pill text-bg-primary">{{ tag }}</a>
-        {% endfor %}
-      </div>
-      {% elif object.group.tags.all %}
-      <div class="mb-1">
-        {% for tag in object.group.tags.all %}
-        <a href="{% url 'web:list_events' %}?tags={{ tag.pk }}" class="badge rounded-pill text-bg-primary">{{ tag }}</a>
-        {% endfor %}
-      </div>
-      {% endif %}
-
-      {{ object.description|markdownify|truncatewords_html:50 }}
-    </div>
-    <div class="card-body d-flex flex-wrap align-items-end justify-content-between" style="gap: 8px;">
-      {% if object.group %}
-      <a href="{{ object.group.get_absolute_url }}" class="card-link">
-        {{ object.group }}
-      </a>
-      {% endif %}
-      {% if object.url %}
-      <div class="flex-grow-1 text-end">
-        <a href="{{ object.url }}" target="_blank" class="card-link">
-          RSVP <i class="fa-solid fa-arrow-up-right-from-square"></i> 
-        </a>
-      </div>
-      {% endif %}
-    </div>
-  </div>
-  {% endfor %}
-</div>
-
-<div class="mt-3">
-  <a href="{% url 'web:add_event' %}" class="btn btn-outline-primary">
-    {% if request.user.is_staff %}Add Event{% else %}Suggest Event{% endif %}
-  </a>
-</div>
-{% endblock content %}
diff --git a/src/web/templates/web/partials/generic_list.htm b/src/web/templates/web/partials/generic_list.htm
deleted file mode 100644
index 8da09088..00000000
--- a/src/web/templates/web/partials/generic_list.htm
+++ /dev/null
@@ -1,79 +0,0 @@
-{% load handyhelper_tags web_extras markdownify %}
-{# much of this code is from https://github.com/davidslusser/django-handyhelpers/blob/main/handyhelpers/templates/handyhelpers/generic/bs5/generic_list_content.htm #}
-
-<div class="d-flex flex-wrap">
-  <div class="flex-grow-1">
-    <h1>{{ title }}</h1>
-  </div>
-  <div class="d-flex align-items-center">
-    {# include extra_controls #}
-    {% if extra_controls.items %}
-    {% for name, control in extra_controls.items %}
-        <a href="{{ control.url }}" title="{{ control.title }}" class="mx-1">{{ control.icon|safe }}</a>
-    {% endfor %}
-    {% endif %}
-
-    {# To include a create form, exposed via modal, include create_form (dict) in the context of your view. The create_from must include modal_name and link_title fields #}
-    {% if create_form %}
-    {% if allow_create_groups and request.user|in_any_group:allow_create_groups %}
-    <a href="#" data-bs-toggle="modal" data-bs-target="#modal_{{ create_form.modal_name }}" title="{{ create_form.tool_tip|default_if_none:'create' }}" class="mx-1">
-        <i class="fas fa-plus-circle"></i>
-        {% if create_form.link_title %} {{ create_form.link_title }} {% endif %}
-    </a>
-    {% endif %}
-    {% endif %}
-
-    {# To include a filter form, exposed via modal, include filter_form (dict) in the context of your view. The filter_from must include modal_name and link_title fields #}
-    {% if filter_form %}
-    <a href="#" data-bs-toggle="modal" data-bs-target="#modal_{{ filter_form.modal_name }}" title="{{ filter_form.tool_tip|default_if_none:'filter' }}" class="mx-1">
-        <i class="fas fa-filter"></i>
-        {% if filter_form.link_title %} {{ filter_form.link_title }} {% endif %}
-    </a>
-        {% if filter_form.undo and request.META.QUERY_STRING %}
-        <a href="{% url 'handyhelpers:show_all_list_view' %}" title="clear filters" class="ms-1">
-            <i class="fas fa-undo-alt"></i>
-        </a>
-        {% endif %}
-    {% endif %}
-  </div>
-</div>
-
-{% block content %}{% endblock content %}
-
-{% if is_paginated_view %}
-{% include 'handyhelpers/generic/bs5/partials/pagination_controls.htm' %}
-{% endif %}
-
-{# include classic modals if create or filter form is included #}
-{% if create_form or filter_form %}
-    {% include 'handyhelpers/component/bs5/modals.htm' %}
-{% endif %}
-
-{# include generic modal form for the create object form if passed from the view #}
-{% with create_form as form_data %}
-    {% include 'handyhelpers/generic/bs5/generic_modal_form.htm' %}
-{% endwith %}
-
-{# include generic modal form for the filter object form if passed from the view #}
-{% with filter_form as form_data %}
-    {% include 'handyhelpers/generic/bs5/generic_modal_form.htm' %}
-{% endwith %}
-
-{# include custom modal html/js template if passed in from the view #}
-{% if modals %}
-    {% include modals %}
-{% endif %}
-
-{# block for additional static content #}
-{% block additional_static %}
-{% if add_static %}
-{{ add_static|safe }}
-{% endif %}
-{% endblock additional_static %}
-
-{# block for additional template content #}
-{% block additional_template %}
-{% if add_template %}
-{% include add_template %}
-{% endif %}
-{% endblock additional_template %}
diff --git a/src/web/templates/web/partials/list/events.htm b/src/web/templates/web/partials/list/events.htm
new file mode 100644
index 00000000..8668c60f
--- /dev/null
+++ b/src/web/templates/web/partials/list/events.htm
@@ -0,0 +1,20 @@
+<section class="about">
+<h1 class="fade-in-blur" style="--fade-duration: 0.3s;">Upcoming Events</h1>
+
+<div class="list-card-container blur-group-container fade-in-blur" style="--fade-duration: 0.5s;">
+    {% for row in queryset %}
+    <div class="list-card" hx-get="{% url 'web:get_event' row.pk %}" hx-target="#body_main" hx-push-url="true">
+        <div class="title">{{ row.name }}</div>
+        <div class="tag-container">
+            {% for tag in row.tags.all %}
+            <small><span class="tag">{{ tag }}</span></small>
+            {% endfor %}
+        </div>
+        <div class="split-footer">
+            <div class="footer-left">{% if row.group %}{{ row.group.name }}{% endif %}</div>
+            <div class="footer-right">{% if row.date_time %}{{ row.date_time }}{% endif %}</div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+</section>
diff --git a/src/web/templates/web/partials/list/groups.htm b/src/web/templates/web/partials/list/groups.htm
new file mode 100644
index 00000000..8422fbd0
--- /dev/null
+++ b/src/web/templates/web/partials/list/groups.htm
@@ -0,0 +1,17 @@
+<section class="about">
+<h1 class="fade-in-blur" style="--fade-duration: 0.3s;">Our Tech Groups</h1>
+
+<div class="list-card-container blur-group-container fade-in-blur" style="--fade-duration: 0.5s;">
+    {% for row in queryset %}
+    <div class="list-card" hx-get="{% url 'web:get_techgroup' row.pk %}" hx-target="#body_main" hx-push-url="true">
+        <div class="title">{{ row.icon|safe }}</div>
+        <div class="description">{{ row.name }}</div>
+        <div class="footer">
+            {% if row.homepage %}
+            <a href="{{ row.homepage }}" target="_blank">{{ row.homepage }}</a>
+            {% endif %}
+        </div>
+    </div>
+    {% endfor %}
+</div>
+</section>
diff --git a/src/web/templates/web/partials/marquee/event_cards.htm b/src/web/templates/web/partials/marquee/event_cards.htm
new file mode 100644
index 00000000..28202290
--- /dev/null
+++ b/src/web/templates/web/partials/marquee/event_cards.htm
@@ -0,0 +1,15 @@
+{% if queryset %}
+{% for row in queryset %}
+<div class="itemRight card"
+    hx-get="{% url 'web:techevent_modal' row.pk %}"
+    hx-target="#modal_wrapper"
+    data-bs-toggle="modal"
+    data-bs-target="#modal_wrapper"
+>{{ row.name }}</div>
+{% endfor %}
+{% else %}
+<div class="empty-queryset">
+    No events currently scheduled
+</div>
+{% endif %}
+
diff --git a/src/web/templates/web/partials/marquee/group_cards.htm b/src/web/templates/web/partials/marquee/group_cards.htm
new file mode 100644
index 00000000..843e02cc
--- /dev/null
+++ b/src/web/templates/web/partials/marquee/group_cards.htm
@@ -0,0 +1,9 @@
+{% for row in queryset %}
+<div class="itemLeft card"
+    hx-get="{% url 'web:techgroup_modal' row.pk %}"
+    hx-target="#modal_wrapper"
+    data-bs-toggle="modal"
+    data-bs-target="#modal_wrapper"
+>{{ row.name }}</div>
+
+{% endfor %}
diff --git a/src/web/templates/web/partials/modal/detail_event.htm b/src/web/templates/web/partials/modal/event_information.htm
similarity index 70%
rename from src/web/templates/web/partials/modal/detail_event.htm
rename to src/web/templates/web/partials/modal/event_information.htm
index 14c2f355..df99ee5b 100644
--- a/src/web/templates/web/partials/modal/detail_event.htm
+++ b/src/web/templates/web/partials/modal/event_information.htm
@@ -9,12 +9,12 @@
     {% if object.description %}
     <div class="row my-3">
         <div class="col-4 fw-bold text-primary">Description:</div>
-        <div class="col-8 text-secondary">{{ object.description|markdownify }}</div>
+        <div class="col-8 text-secondary">{{ object.description|markdownify|truncatewords_html:30 }}</div>
     </div>
     {% endif %}
     {% if object.date_time %}
     <div class="row my-3">
-        <div class="col-4 fw-bold text-primary">When:</div>
+        <div class="col-4 fw-bold text-primary">Date/Time:</div>
         <div class="col-8 text-secondary">
             {% include 'spokanetech/partials/human_readable_datetime.htm' with object=object duration=object.duration only %}
         </div>
@@ -26,4 +26,10 @@
         <div class="col-8 text-secondary">{{ object.location }}</div>
     </div>
     {% endif %}
+    <div class="row my-3">
+        <div class="col-4 fw-bold text-primary"></div>
+        <div class="col-8 text-secondary">
+            <a href="" hx-get="{% url 'web:get_event' object.pk %}" hx-target="#body_main" hx-push-url="true" data-bs-dismiss="modal">full details</a>
+        </div>
+    </div>
 </div>
diff --git a/src/web/templates/web/partials/modal/group_information.htm b/src/web/templates/web/partials/modal/group_information.htm
new file mode 100644
index 00000000..184083a8
--- /dev/null
+++ b/src/web/templates/web/partials/modal/group_information.htm
@@ -0,0 +1,35 @@
+{% load web_extras markdownify %}
+<div class="container-fluid my-3">
+    {% if object.group %}
+    <div class="row my-3">
+        <div class="col-4 fw-bold text-primary">Group:</div>
+        <div class="col-8 text-secondary">{{ object.group.name }}</div>
+    </div>
+    {% endif %}
+    {% if object.description %}
+    <div class="row my-3">
+        <div class="col-4 fw-bold text-primary">Description:</div>
+        <div class="col-8 text-secondary">{{ object.description|markdownify|truncatewords_html:30 }}</div>
+    </div>
+    {% endif %}
+    {% if object.date_time %}
+    <div class="row my-3">
+        <div class="col-4 fw-bold text-primary">Date/Time:</div>
+        <div class="col-8 text-secondary">
+            {% include 'spokanetech/partials/human_readable_datetime.htm' with object=object duration=object.duration only %}
+        </div>
+    </div>
+    {% endif %}
+    {% if object.location %}
+    <div class="row my-3">
+        <div class="col-4 fw-bold text-primary">Location:</div>
+        <div class="col-8 text-secondary">{{ object.location }}</div>
+    </div>
+    {% endif %}
+    <div class="row my-3">
+        <div class="col-4 fw-bold text-primary"></div>
+        <div class="col-8 text-secondary">
+            <a href="" hx-get="{% url 'web:get_techgroup' object.pk %}" hx-target="#body_main" hx-push-url="true" data-bs-dismiss="modal">full details</a>
+        </div>
+    </div>
+</div>
diff --git a/src/web/templates/web/partials/sidebar_items.htm b/src/web/templates/web/partials/sidebar_items.htm
deleted file mode 100644
index ecba0fb8..00000000
--- a/src/web/templates/web/partials/sidebar_items.htm
+++ /dev/null
@@ -1,5 +0,0 @@
-{% for row in queryset %}
-<li class="sidebar-link">
-    <a href="{{ row.get_absolute_url }}" class="sidebar-link ms-4">{{ row }}</a>
-</li>
-{% endfor %}
diff --git a/src/web/templates/web/partials/table/table_tech_groups.htm b/src/web/templates/web/partials/table/table_tech_groups.htm
deleted file mode 100644
index fc58991e..00000000
--- a/src/web/templates/web/partials/table/table_tech_groups.htm
+++ /dev/null
@@ -1,29 +0,0 @@
-{% load markdownify %}
-<table class="table table-bordered table-hover" data-toggle="table">
-  <thead>
-    <th>Name</th>
-    <th>Homepage</th>
-  </thead>
-  <tbody>
-    {% for object in queryset %}
-      <tr>
-        <td>
-          <a href="{{ object.get_absolute_url }}">
-            {% if object.icon %}<span class="pe-2 {{ object.icon|safe }}"></span>{% endif %}{{ object.name }}
-          </a>
-        </td>
-        <td>
-          {% if object.homepage %}
-          <a href="{{ object.homepage }}" target="_blank">{{ object.homepage }}</a>
-          {% endif %}
-        </td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
-
-{% if kwargs.can_edit %}
-<div class="mt-3">
-  <a href="{% url 'web:add_tech_group' %}" class="btn btn-primary">Add</a>
-</div>
-{% endif %}
diff --git a/src/web/templates/web/partials/techgroup_list.htm b/src/web/templates/web/partials/techgroup_list.htm
deleted file mode 100644
index c20e9522..00000000
--- a/src/web/templates/web/partials/techgroup_list.htm
+++ /dev/null
@@ -1,33 +0,0 @@
-{% load web_extras markdownify %}
-<h1>Tech Groups</h1>
-
-<div class="grid">
-  {% for object in queryset %}
-  <div class="card mb-0">
-    <div class="card-body card-header">
-      <h5 class="card-title">
-        <a href="{{ object.get_absolute_url }}" class="link">
-          {{ object }}
-        </a>
-      </h5>
-    </div>
-    <div class="card-body">
-      {% if object.tags.all %}
-      <div class="mb-1">
-        {% for tag in object.tags.all %}
-        <a href="{% url 'web:list_tech_groups' %}?tags={{ tag.pk }}" class="badge rounded-pill text-bg-primary">{{ tag }}</a>
-        {% endfor %}
-      </div>
-      {% endif %}
-      {{ object.description|markdownify|truncatewords_html:50 }}
-    </div>
-    <div class="card-body d-flex flex-wrap align-items-end justify-content-between" style="gap: 8px;">
-      <div class="flex-grow-1 text-end">
-        <a href="{{ object.homepage }}" target="_blank" class="card-link">
-          Homepage <i class="fa-solid fa-arrow-up-right-from-square"></i> 
-        </a>
-      </div>
-    </div>
-  </div>
-  {% endfor %}
-</div>
diff --git a/src/web/templates/web/techgroup_detail.html b/src/web/templates/web/techgroup_detail.html
deleted file mode 100644
index 6292effb..00000000
--- a/src/web/templates/web/techgroup_detail.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% extends 'spokanetech/base.html' %}
-
-{% block content %}
-{% include "web/partials/detail_tech_group.htm" %}
-{% endblock content %}
diff --git a/src/web/templates/web/techgroup_form.html b/src/web/templates/web/techgroup_form.html
deleted file mode 100644
index ec25512f..00000000
--- a/src/web/templates/web/techgroup_form.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% extends 'spokanetech/base.html' %}
-{% load crispy_forms_tags %}
-
-{% block content %}
-{% if object %}<h1>Edit Tech Group</h1>{% else %}<h1>Add Tech Group</h1>{% endif %}
-{% crispy form form.helper %}
-{% endblock content %}
diff --git a/src/web/templates/web/techgroup_list.html b/src/web/templates/web/techgroup_list.html
deleted file mode 100644
index 8233e384..00000000
--- a/src/web/templates/web/techgroup_list.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% extends 'spokanetech/base.html' %}
-
-{% block content %}
-{% include "web/partials/techgroup_list.htm" %}
-{% endblock content %}
diff --git a/src/web/tests/test_views.py b/src/web/tests/test_views.py
index 9ee9f50e..6e9e5688 100644
--- a/src/web/tests/test_views.py
+++ b/src/web/tests/test_views.py
@@ -2,98 +2,13 @@
 import zoneinfo
 from typing import Any
 
-import freezegun
-import pytest
-from bs4 import BeautifulSoup
 from django.contrib.auth import get_user_model
 from django.test import TestCase
-from django.test.client import Client
 from django.urls import reverse
 from django.utils import timezone
 from model_bakery import baker
 
-from web.models import Event, TechGroup
-
-
-@pytest.mark.django_db
-def test_list_tech_groups(client: Client):
-    # Arrange
-    tech_group = TechGroup(
-        name="List Tech Groups Test",
-        description="List Tech Groups Test",
-        enabled=True,
-        homepage="https://spokanetech.org/",
-    )
-    tech_group.save()
-
-    # Act
-    url = reverse("web:list_tech_groups")
-    response = client.get(url)
-
-    # Assert
-    assert response.status_code == 200
-    assert response.context["queryset"].get().pk == tech_group.pk
-
-
-@pytest.mark.django_db
-def test_get_tech_group(client: Client):
-    # Arrange
-    tech_group = TechGroup(
-        name="Get Tech Groups Test",
-        description="Get Tech Groups Test",
-        enabled=True,
-        homepage="https://spokanetech.org/",
-    )
-    tech_group.save()
-
-    # Act
-    url = reverse("web:get_tech_group", args=[tech_group.pk])
-    response = client.get(url)
-
-    # Assert
-    assert response.status_code == 200
-    assert response.context["object"].pk == tech_group.pk
-
-
-@freezegun.freeze_time("2024-03-17")
-@pytest.mark.django_db
-def test_set_timezone_and_timezone_middleware(client: Client):
-    # Arrange
-    date_time = datetime.datetime.fromisoformat("2024-03-19T01:00:00Z")
-    baker.make("web.Event", date_time=date_time, approved_at=date_time)
-
-    # Act
-    client.post(reverse("web:set_timezone"), {"timezone": "America/Los_Angeles"})
-    response = client.get(reverse("web:list_events"))
-
-    # Assert
-    soup = BeautifulSoup(response.content, "lxml")
-    date_time_tag = soup.find(attrs={"data-testid": "date_time"})
-    assert date_time_tag is not None
-    actual = date_time_tag.text.strip()
-    assert actual == "Monday, March 18, 2024 at 6:00 PM"
-
-
-class TestEventDetailModal(TestCase):
-    """test GetEventDetailsModal view"""
-
-    def setUp(self):
-        super(TestEventDetailModal, self).setUp()
-        self.object = baker.make("web.Event", approved_at=timezone.localtime())
-        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
-        self.referrer = reverse("web:index")
-        self.url = reverse("web:get_event_details", kwargs={"pk": self.object.pk})
-
-    def test_get(self):
-        """verify modal content can be rendered"""
-        response = self.client.get(self.url, HTTP_REFERER=self.referrer, **self.headers)
-        self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "web/partials/modal/detail_event.htm")
-
-    def test_non_htmx_call(self):
-        """verify 400 response if non-htmx request is used"""
-        response = self.client.get(self.url, HTTP_REFERER=self.referrer)
-        self.assertEqual(response.status_code, 400)
+from web.models import Event
 
 
 class TestCreateEvent(TestCase):
@@ -116,7 +31,7 @@ def test_suggest_event_redirects_and_sets_unapproved(self):
 
         # Assert
         assert response.status_code == 302
-        assert response.url == reverse("web:list_events")
+        assert response.url == reverse("web:get_events")
 
         actual = Event.all.get()
         assert actual.approved_at is None
@@ -134,9 +49,7 @@ def test_update_event_sets_right_date_time(self):
         user.is_staff = True  # type: ignore
         user.save()
 
-        # set user TZ
-        self.client.post(reverse("web:set_timezone"), {"timezone": timezone_str})
-        response = self.client.get(reverse("web:list_events"))
+        response = self.client.get(reverse("web:get_events"))
         assert response.status_code == 200
 
         # Act
@@ -191,51 +104,196 @@ def test_update_event_remove_approved_at_redirects_to_list(self):
 
         # Assert
         assert response.status_code == 302
-        assert response.url == reverse("web:list_events")
+        assert response.url == reverse("web:get_events")
+
 
+class TestIndexView(TestCase):
+    def setUp(self):
+        super(TestIndexView, self).setUp()
+        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
+        self.now = timezone.now()
+        self.url = reverse("web:index")
+
+    def test_default(self):
+        """verify call to GetIndexContent view via 'default' url with a non-htmx call"""
+        response = self.client.get(self.url)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/full/custom/index.html")
+
+    def test_default_htmx(self):
+        """verify call to GetIndexContent view via 'default' with a htmx call"""
+        response = self.client.get(self.url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/custom/index.htm")
+
+
+class TestAboutView(TestCase):
+    def setUp(self):
+        super(TestAboutView, self).setUp()
+        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
+        self.now = timezone.now()
+        self.url = reverse("web:about")
+
+    def test_get(self):
+        """verify call to GetAboutContent view with a non-htmx call"""
+        response = self.client.get(self.url)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/full/custom/about.html")
+
+    def test_get_htmx(self):
+        """verify call to GetAboutContent view with a htmx call"""
+        response = self.client.get(self.url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/custom/about.htm")
 
-class TestEventCalendarView(TestCase):
-    """test EventCalendarView view"""
 
+class TestCalendarView(TestCase):
     def setUp(self):
-        super(TestEventCalendarView, self).setUp()
-        self.object = baker.make("web.Event", approved_at=timezone.localtime())
+        super(TestCalendarView, self).setUp()
         self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
-        self.referrer = reverse("web:index")
         self.now = timezone.now()
         self.url = reverse("web:event_calendar", kwargs={"year": self.now.year, "month": self.now.month})
 
     def test_get(self):
-        """verify page content can be rendered"""
-        response = self.client.get(self.url, HTTP_REFERER=self.referrer, **self.headers)
+        """verify call to EventCalendarView view with a non-htmx call"""
+        response = self.client.get(self.url)
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "handyhelpers/partials/calendar.htm")
-        self.assertIn(self.object.name, response.content.decode("utf-8"))
-        self.assertIn(f"/events/{self.object.pk}/details", response.content.decode("utf-8"))
+        self.assertTemplateUsed(response, "web/full/custom/calendar.html")
+
+    def test_get_htmx(self):
+        """verify call to EventCalendarView view with a htmx call"""
+        response = self.client.get(self.url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/custom/calendar.htm")
 
 
-class TestEventListView(TestCase):
+class TestGetTechEventView(TestCase):
     def setUp(self):
-        super().setUp()
-        now = timezone.localtime()
-        self.tag = baker.make("web.Tag")
-        self.group = baker.make("web.TechGroup")
-        self.group.tags.set([self.tag])
-        self.object = baker.make(
-            "web.Event",
-            group=self.group,
-            date_time=now + datetime.timedelta(seconds=1),
-            approved_at=now,
-        )
-        self.url = reverse("web:list_events")
+        super(TestGetTechEventView, self).setUp()
+        self.instance = baker.make("web.Event", approved_at=timezone.localtime())
+        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
+        self.url = reverse("web:get_event", kwargs={"pk": self.instance.pk})
+
+    def test_get(self):
+        """verify call to GetTechEvent view with a non-htmx call"""
+        response = self.client.get(self.url)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/full/detail/event.html")
+
+    def test_get_htmx(self):
+        """verify call to GetTechEvent view with a htmx call"""
+        response = self.client.get(self.url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/detail/event.htm")
+        self.assertIn(self.instance.name, response.content.decode("utf-8"))
+
+
+class TestGetTechEventsView(TestCase):
+    def setUp(self):
+        super(TestGetTechEventsView, self).setUp()
+        self.instance = baker.make("web.Event", approved_at=timezone.localtime())
+        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
+
+    def test_get(self):
+        """verify call to GetTechEvents view with a non-htmx call"""
+        url = reverse("web:get_events")
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/full/list/events.html")
+
+    def test_get_htmx_index(self):
+        """verify call to GetTechEvents view with a htmx call"""
+        url = reverse("web:get_events", kwargs={"display": "index"})
+        response = self.client.get(url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/marquee/event_cards.htm")
+        self.assertIn(self.instance.name, response.content.decode("utf-8"))
+
+    def test_get_htmx_list(self):
+        """verify call to GetTechEvents view with a htmx call"""
+        url = reverse("web:get_events", kwargs={"display": "list"})
+        response = self.client.get(url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/list/events.htm")
+        self.assertIn(self.instance.name, response.content.decode("utf-8"))
+
+
+class GetTechEventModalView(TestCase):
+    def setUp(self):
+        super(GetTechEventModalView, self).setUp()
+        self.instance = baker.make("web.Event", approved_at=timezone.localtime())
+        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
+        self.url = reverse("web:techevent_modal", kwargs={"pk": self.instance.pk})
+
+    def test_get_htmx(self):
+        """verify call to GetTechEventModal view with a htmx call"""
+        response = self.client.get(self.url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/modal/event_information.htm")
+        self.assertIn(self.instance.name, response.content.decode("utf-8"))
+
 
-    def test_filter_on_group_tags(self):
-        response = self.client.get(self.url + f"?tags={self.tag.pk}")
+class TestGetTechGroupView(TestCase):
+    def setUp(self):
+        super(TestGetTechGroupView, self).setUp()
+        self.instance = baker.make("web.TechGroup")
+        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
+        self.url = reverse("web:get_techgroup", kwargs={"pk": self.instance.pk})
+
+    def test_get(self):
+        """verify call to GetTechGroup view with a non-htmx call"""
+        response = self.client.get(self.url)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/full/detail/group.html")
+
+    def test_get_htmx(self):
+        """verify call to GetTechGroup view with a htmx call"""
+        response = self.client.get(self.url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/detail/group.htm")
+        self.assertIn(self.instance.name, response.content.decode("utf-8"))
+
+
+class TestGetTechGroupsView(TestCase):
+    def setUp(self):
+        super(TestGetTechGroupsView, self).setUp()
+        self.instance = baker.make("web.TechGroup")
+        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
+
+    def test_get(self):
+        """verify call to GetTechGroups view with a non-htmx call"""
+        url = reverse("web:get_techgroups")
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/full/list/groups.html")
+
+    def test_get_htmx_index(self):
+        """verify call to GetTechGroups view with a htmx call"""
+        url = reverse("web:get_techgroups", kwargs={"display": "index"})
+        response = self.client.get(url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/marquee/group_cards.htm")
+        self.assertIn(self.instance.name, response.content.decode("utf-8"))
+
+    def test_get_htmx_list(self):
+        """verify call to GetTechGroups view with a htmx call"""
+        url = reverse("web:get_techgroups", kwargs={"display": "list"})
+        response = self.client.get(url, **self.headers)
         self.assertEqual(response.status_code, 200)
-        self.assertIn(self.object.name, response.content.decode("utf-8"))
+        self.assertTemplateUsed(response, "web/partials/list/groups.htm")
+        self.assertIn(self.instance.name, response.content.decode("utf-8"))
 
-    def test_does_not_include_unapproved_events(self):
-        self.object.approved_at = None
-        self.object.save()
-        response = self.client.get(self.url + f"?tags={self.tag.pk}")
-        self.assertNotIn(self.object.name, response.content.decode("utf-8"))
+
+class GetTechGroupModalView(TestCase):
+    def setUp(self):
+        super(GetTechGroupModalView, self).setUp()
+        self.instance = baker.make("web.TechGroup")
+        self.headers: dict[str, Any] = dict(HTTP_HX_REQUEST="true")
+        self.url = reverse("web:techgroup_modal", kwargs={"pk": self.instance.pk})
+
+    def test_get_htmx(self):
+        """verify call to GetTechGroupModal view with a htmx call"""
+        response = self.client.get(self.url, **self.headers)
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, "web/partials/modal/group_information.htm")
+        self.assertIn(self.instance.name, response.content.decode("utf-8"))
diff --git a/src/web/urls.py b/src/web/urls.py
index e35c2093..512cde86 100644
--- a/src/web/urls.py
+++ b/src/web/urls.py
@@ -1,23 +1,21 @@
-from django.urls import path
+from django.urls import path, re_path
 
 from web import views
 
 app_name = "web"
 
 urlpatterns = [
-    path("", views.Index.as_view(), name="index"),
-    path("set_timezone/", views.set_timezone, name="set_timezone"),
-    path("events", views.ListEvents.as_view(), name="list_events"),
-    path("groups", views.ListTechGroup.as_view(), name="list_tech_groups"),
-    path("groups/add", views.CreateTechGroup.as_view(), name="add_tech_group"),
-    path("groups/<int:pk>", views.DetailTechGroup.as_view(), name="get_tech_group"),
-    path("groups/<int:pk>/edit", views.UpdateTechGroup.as_view(), name="edit_tech_group"),
+    path("", views.GetIndexContent.as_view(), name="index"),
+    path("index", views.GetIndexContent.as_view(), name="index"),
+    path("about", views.GetAboutContent.as_view(), name="about"),
+    path("calendar/<int:year>/<int:month>", views.EventCalendarView.as_view(), name="event_calendar"),
     path("events/add", views.CreateEvent.as_view(), name="add_event"),
-    path("events/<int:pk>", views.DetailEvent.as_view(), name="get_event"),
+    path("events/<int:pk>", views.GetTechEvent.as_view(), name="get_event"),
+    path("events/<int:pk>/details", views.GetTechEventModal.as_view(), name="techevent_modal"),
     path("events/<int:pk>/edit", views.UpdateEvent.as_view(), name="update_event"),
-    path("build_sidebar", views.BuildSidebar.as_view(), name="build_sidebar"),
-    path("events/<int:pk>/details/", views.GetEventDetailsModal.as_view(), name="get_event_details"),
-    path("event_calendar/<int:year>/<int:month>/", views.EventCalendarView.as_view(), name="event_calendar"),
-    # handyhelpers overrides
-    path("filter_list_view", views.FilterListView.as_view(), name="filter_list_view"),
+    re_path("^events/(?P<display>\w+)?$", views.GetTechEvents.as_view(), name="get_events"),
+    path("techgroups/add", views.CreateTechGroup.as_view(), name="add_tech_group"),
+    path("techgroups/<int:pk>", views.GetTechGroup.as_view(), name="get_techgroup"),
+    path("techgroups/<int:pk>/details", views.GetTechGroupModal.as_view(), name="techgroup_modal"),
+    re_path("^techgroups/(?P<display>\w+)?$", views.GetTechGroups.as_view(), name="get_techgroups"),
 ]
diff --git a/src/web/views.py b/src/web/views.py
index fab555fe..efd1ab0f 100644
--- a/src/web/views.py
+++ b/src/web/views.py
@@ -2,52 +2,22 @@
 
 from django.contrib import messages
 from django.contrib.auth.mixins import UserPassesTestMixin
-from django.db.models import Prefetch
-from django.http import HttpRequest, HttpResponse
-from django.shortcuts import redirect
-from django.template import loader
-from django.urls import reverse, reverse_lazy
+from django.http import HttpRequest
+from django.urls import reverse
 from django.utils import timezone
-from django.views import View
-from django.views.decorators.http import require_http_methods
-from django.views.generic import CreateView, DetailView, UpdateView
-from handyhelpers.mixins.view_mixins import HtmxViewMixin
-from handyhelpers.views.calendar import CalendarView
-from handyhelpers.views.gui import (
-    HandyHelperIndexView,
-    HandyHelperListPlusFilterView,
-    HandyHelperListView,
+from django.views.generic import CreateView, UpdateView
+from handyhelpers.views.calendar import HtmxCalendarView
+from handyhelpers.views.htmx import (
+    ModelDetailBootstrapModalView,
+    HtmxOptionView,
+    HtmxOptionDetailView,
+    HtmxOptionMultiFilterView,
 )
-from handyhelpers.views.htmx import BuildBootstrapModalView, BuildModelSidebarNav
 
 from web import forms
 from web.models import Event, TechGroup
 
 
-@require_http_methods(["POST"])
-def set_timezone(request: HttpRequest) -> HttpResponse:
-    timezone_id = request.POST["timezone"]
-    request.session["timezone"] = timezone_id
-    return HttpResponse()
-
-
-class Index(HandyHelperIndexView):
-    title = "Spokane Tech"
-    subtitle = "Index of Spokane's Tech User Groups"
-    base_template = "spokanetech/base.html"
-
-    def __init__(self, **kwargs: Any) -> None:
-        self.item_list = [
-            {
-                "url": tech_group.get_absolute_url(),
-                "icon": tech_group.icon,
-                "title": str(tech_group),
-            }
-            for tech_group in TechGroup.objects.all()
-        ]
-        super().__init__(**kwargs)
-
-
 class CanEditMixin:
     """Add can_edit to the template context."""
 
@@ -69,62 +39,6 @@ def test_func(self) -> bool | None:
         return user.is_authenticated and user.is_staff  # type: ignore
 
 
-class ListEvents(CanEditMixin, HtmxViewMixin, HandyHelperListPlusFilterView):
-    title = "Events"
-    base_template = "spokanetech/base.html"
-    template_name = "web/event_list.html"
-
-    filter_form_obj = forms.ListEventsFilter
-    filter_form_url = reverse_lazy("web:filter_list_view")
-
-    def __init__(self, **kwargs: Any) -> None:
-        self.queryset = (
-            Event.objects.filter(date_time__gte=timezone.localtime())
-            .select_related("group")
-            .prefetch_related("tags", "group__tags")
-        )
-        super().__init__(**kwargs)
-
-    def get(self, request, *args, **kwargs):
-        if self.is_htmx():
-            self.template_name = "web/partials/event_list.htm"
-        return super().get(request, *args, **kwargs)
-
-    def filter_by_query_params(self):
-        """Include events that don't have any tags of their own but their group tags match."""
-        queryset = super().filter_by_query_params()
-        if queryset is None:
-            return None
-
-        if tags := self.request.GET.getlist("tags"):
-            events_with_group_tags_queryset = Event.objects.filter(
-                date_time__gte=timezone.localtime()
-            ).filter_group_tags(tags)  # type: ignore
-            queryset = queryset | events_with_group_tags_queryset
-
-        queryset = queryset.order_by("date_time")
-        return queryset
-
-
-class DetailEvent(HtmxViewMixin, DetailView):
-    model = Event
-
-    def __init__(self, **kwargs: Any) -> None:
-        self.queryset = Event.objects.select_related("group").prefetch_related("tags", "group__tags")
-        super().__init__(**kwargs)
-
-    def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
-        context = super().get_context_data(**kwargs)  # type: ignore
-        user = self.request.user
-        context["can_edit"] = user.is_authenticated and user.is_staff  # type: ignore
-        return context
-
-    def get(self, request, *args, **kwargs):
-        if self.is_htmx():
-            self.template_name = "web/partials/detail_event.htm"
-        return super().get(request, *args, **kwargs)
-
-
 class CreateEvent(CreateView):
     model = Event
 
@@ -145,7 +59,7 @@ def get_success_url(self) -> str:
                 "code of conduct.</a>",
                 extra_tags="safe",
             )
-            return reverse("web:list_events")
+            return reverse("web:get_events")
         return super().get_success_url()
 
 
@@ -157,119 +71,92 @@ class UpdateEvent(RequireStaffMixin, UpdateView):
 
     def get_success_url(self) -> str:
         if self.object.approved_at is None:
-            return reverse("web:list_events")
+            return reverse("web:get_events")
         return super().get_success_url()
 
 
-class DetailTechGroup(HtmxViewMixin, DetailView):
+class CreateTechGroup(RequireStaffMixin, CreateView):
     model = TechGroup
+    form_class = forms.TechGroupForm
 
-    def __init__(self, **kwargs: Any) -> None:
-        self.queryset = TechGroup.objects.prefetch_related(
-            Prefetch("event_set", Event.objects.filter(date_time__gte=timezone.localtime()))
-        )
-        super().__init__(**kwargs)
 
-    def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
-        context = super().get_context_data(**kwargs)
-        user = self.request.user
-        context["can_edit"] = user.is_authenticated and user.is_staff  # type: ignore
-        return context
+class UpdateTechGroup(RequireStaffMixin, UpdateView):
+    model = TechGroup
+    form_class = forms.TechGroupForm
 
-    def get(self, request, *args, **kwargs):
-        if self.is_htmx():
-            self.template_name = "web/partials/detail_tech_group.htm"
-        return super().get(request, *args, **kwargs)
 
+class EventCalendarView(HtmxCalendarView):
+    """Render a monthly calendar view of events"""
 
-class ListTechGroup(CanEditMixin, HtmxViewMixin, HandyHelperListView):
-    title = "Tech Groups"
-    base_template = "spokanetech/base.html"
-    template_name = "web/techgroup_list.html"
+    title = "Spokane Tech Event Calendar"
+    event_model = Event
+    event_model_date_field = "date_time"
+    event_detail_url = "web:techevent_modal"
+    htmx_template_name = "web/partials/custom/calendar.htm"
+    template_name = "web/full/custom/calendar.html"
 
-    def __init__(self, **kwargs: Any) -> None:
-        self.queryset = TechGroup.objects.filter(enabled=True)
-        super().__init__(**kwargs)
 
-    def get(self, request, *args, **kwargs):
-        if self.is_htmx():
-            self.template_name = "web/partials/techgroup_list.htm"
-        return super().get(request, *args, **kwargs)
+class GetAboutContent(HtmxOptionView):
+    """Render the 'about' page"""
 
+    htmx_template_name = "web/partials/custom/about.htm"
+    template_name = "web/full/custom/about.html"
 
-class CreateTechGroup(RequireStaffMixin, CreateView):
-    model = TechGroup
-    form_class = forms.TechGroupForm
 
+class GetIndexContent(HtmxOptionView):
+    """Render the index page"""
 
-class UpdateTechGroup(RequireStaffMixin, UpdateView):
-    model = TechGroup
-    form_class = forms.TechGroupForm
+    htmx_template_name = "web/partials/custom/index.htm"
+    template_name = "web/full/custom/index.html"
 
 
-class BuildSidebar(BuildModelSidebarNav):
-    """Get a list of upcoming Events and enabled TechGroups and render a partial to use on the sidebar navigation"""
+class GetTechEvent(HtmxOptionDetailView):
+    """Get details of an Event instance"""
 
-    template_name = "spokanetech/htmx/build_sidebar.htm"
+    model = Event
+    htmx_template_name = "web/partials/detail/event.htm"
+    template_name = "web/full/detail/event.html"
 
-    menu_item_list = [
-        {
-            "queryset": Event.objects.filter(date_time__gte=timezone.localtime()).order_by("date_time"),
-            "list_all_url": reverse_lazy("web:list_events"),
-            "icon": """<i class="fa-solid fa-calendar-day"></i>""",
-        },
-        {
-            "queryset": TechGroup.objects.filter(enabled=True).order_by("name"),
-            "list_all_url": reverse_lazy("web:list_tech_groups"),
-            "icon": """<i class="fa-solid fa-people-group"></i>""",
-        },
-    ]
 
+class GetTechEvents(HtmxOptionMultiFilterView):
+    """Get a list of Event entries"""
 
-class GetEventDetailsModal(BuildBootstrapModalView):
-    """get details of an event and display in a modal"""
+    template_name = "web/full/list/events.html"
+    htmx_index_template_name = "web/partials/marquee/event_cards.htm"
+    htmx_list_template_name = "web/partials/list/events.htm"
+    queryset = Event.objects.filter(date_time__gte=timezone.now())
 
-    modal_button_submit = None
-    modal_title = "Event Details"
 
-    def get(self, request, *args, **kwargs):
-        context = {}
-        context["object"] = Event.objects.get(pk=kwargs["pk"])
-        self.modal_subtitle = context["object"]
-        self.modal_body = loader.render_to_string("web/partials/modal/detail_event.htm", context=context)
-        return super().get(request, *args, **kwargs)
+class GetTechEventModal(ModelDetailBootstrapModalView):
+    """Get details of an Event instance and display in a modal"""
 
+    modal_button_submit = None
+    modal_title = "Event Info"
+    modal_template = "web/partials/modal/event_information.htm"
+    model = Event
 
-class EventCalendarView(CalendarView):
-    """Render a monthly calendar view of events"""
 
-    title = "Spokane Tech Event Calendar"
-    event_model = Event
-    event_model_date_field = "date_time"
-    event_detail_url = "web:get_event_details"
+class GetTechGroup(HtmxOptionDetailView):
+    """Get details of a TechGroup instance"""
 
+    model = TechGroup
+    htmx_template_name = "web/partials/detail/group.htm"
+    template_name = "web/full/detail/group.html"
 
-class FilterListView(View):
-    """apply filters, as provided via queryparameters, to a list view that uses the FilterByQueryParamsMixin"""
 
-    def post(self, request, *args, **kwargs):
-        """process POST request
+class GetTechGroups(HtmxOptionMultiFilterView):
+    """Get a list of TechGroup entries"""
 
-        **This handles multiple values for the same filter key
-        which Handy Helpers does not currently do.**
-        """
-        redirect_url = self.request.META["HTTP_REFERER"]
-        form_parameters = self.request.POST
+    template_name = "web/full/list/groups.html"
+    htmx_index_template_name = "web/partials/marquee/group_cards.htm"
+    htmx_list_template_name = "web/partials/list/groups.htm"
+    queryset = TechGroup.objects.filter(enabled=True)
 
-        # build filtered URL
-        filter_url = f"{redirect_url.split('?')[0]}?"
-        for key in form_parameters:
-            # remove csrf token from POST parameters
-            if key == "csrfmiddlewaretoken":
-                continue
 
-            values = form_parameters.getlist(key)
-            for value in values:
-                filter_url += f"{key}={value}&"
+class GetTechGroupModal(ModelDetailBootstrapModalView):
+    """get details of a TechGroup instance and display in a modal"""
 
-        return redirect(filter_url)
+    modal_button_submit = None
+    modal_title = "Group Info"
+    modal_template = "web/partials/modal/group_information.htm"
+    model = TechGroup