diff --git a/compose.yml b/compose.yml
index 3cf901d..a3b4873 100644
--- a/compose.yml
+++ b/compose.yml
@@ -61,5 +61,11 @@ services:
     ports:
       - "8000:8000"
 
+  tailwind:
+    <<: *common-settings
+    command: ["uv", "run", "-m", "manage", "tailwind", "--skip-checks", "watch"]
+    depends_on: []
+    init: true
+
 volumes:
   postgres-data:
diff --git a/frontend/index.css b/frontend/index.css
index 90a8ef0..4d71ff1 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -2,3 +2,41 @@
 
 /* Use legacy config for content sources */
 @config "../tailwind.config.js";
+
+/* Base form input styles */
+@layer base {
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    input[type="number"],
+    input[type="url"],
+    input[type="tel"],
+    input[type="date"],
+    input[type="time"],
+    input[type="datetime-local"],
+    input[type="search"],
+    textarea,
+    select {
+        @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm;
+        @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
+        @apply text-gray-900 text-base;
+    }
+
+    input[type="checkbox"] {
+        @apply h-4 w-4 text-blue-600 border-gray-300 rounded;
+        @apply focus:ring-blue-500;
+    }
+
+    input[type="file"] {
+        @apply block w-full text-sm text-gray-500;
+        @apply file:mr-4 file:py-2 file:px-4;
+        @apply file:rounded-md file:border-0;
+        @apply file:text-sm file:font-medium;
+        @apply file:bg-blue-50 file:text-blue-700;
+        @apply hover:file:bg-blue-100;
+    }
+
+    textarea {
+        @apply min-h-[120px];
+    }
+}
diff --git a/templates/_field.html b/templates/_field.html
index 8a13532..0c6a24e 100644
--- a/templates/_field.html
+++ b/templates/_field.html
@@ -1,12 +1,20 @@
-<div class="field">
-    <label for="{{ field.id_for_label }}">
-        <span>{{ field.label }} {% if field.field.required %}<span class="required" aria-hidden="true">(required)</span>{% endif %}</span>
-        {{ field }}
-        {% if field.help_text %}<p class="help-text" id="help-{{ field.id_for_label }}">{{ field.help_text }}</p>{% endif %}
-        {% if field.errors %}
-            <div class="field-errors" role="alert">
-                {{ field.errors }}
-            </div>
-        {% endif %}
+<div class="mb-4">
+    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
+        {{ field.label }}
+        {% if field.field.required %}<span class="text-red-500 text-xs ml-1">(required)</span>{% endif %}
     </label>
+    {% if field.field.widget.input_type == 'checkbox' %}
+        <div class="flex items-center">
+            {{ field }}
+            {% if field.help_text %}<span class="ml-2 text-sm text-gray-500">{{ field.help_text }}</span>{% endif %}
+        </div>
+    {% else %}
+        {{ field }}
+        {% if field.help_text %}<p class="mt-1 text-sm text-gray-500" id="help-{{ field.id_for_label }}">{{ field.help_text }}</p>{% endif %}
+    {% endif %}
+    {% if field.errors %}
+        <div class="mt-1 text-sm text-red-600" role="alert">
+            {{ field.errors }}
+        </div>
+    {% endif %}
 </div>
diff --git a/templates/_form.html b/templates/_form.html
index dc90454..4b8e103 100644
--- a/templates/_form.html
+++ b/templates/_form.html
@@ -1,19 +1,29 @@
-<form action="{{ action|default:"." }}" method="POST">
+<form action="{{ action|default:'.' }}" method="POST" class="space-y-4">
     {% csrf_token %}
-    {{ form.non_field_errors }}
+    {% if form.non_field_errors %}
+        <div class="p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
+            {{ form.non_field_errors }}
+        </div>
+    {% endif %}
     {% for field in form.visible_fields %}
         {% include "_field.html" %}
     {% endfor %}
     {% for field in form.hidden_fields %}
         {{ field }}
     {% endfor %}
-    <div class="buttons">
-        <input class="button" type="submit" value="{{ submit_verb|default:"Save" }}" aria-label="{{ submit_verb|default:"Save" }}">
+    <div class="flex flex-wrap gap-3 pt-4">
+        <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+            {{ submit_verb|default:"Save" }}
+        </button>
         {% if include_delete %}
-            <input class="button serious" type="submit" name="delete" value="{{ delete_verb|default:"Delete" }}" aria-label="{{ delete_verb|default:"Delete" }}">
+            <button type="submit" name="delete" class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
+                {{ delete_verb|default:"Delete" }}
+            </button>
         {% endif %}
         {% if include_random %}
-            <input class="button boring" type="submit" name="random_after" accesskey="n" value="{{ random_verb|default:"Save & Next" }}" aria-label="{{ random_verb|default:"Save and go to next item" }}">
+            <button type="submit" name="random_after" accesskey="n" class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
+                {{ random_verb|default:"Save & Next" }}
+            </button>
         {% endif %}
     </div>
 </form>
diff --git a/templates/account/base.html b/templates/account/base.html
index e2e9407..c627b76 100644
--- a/templates/account/base.html
+++ b/templates/account/base.html
@@ -1,11 +1,10 @@
 {% extends "base.html" %}
 
-
-{% block content-wrapper %}
-    <div class="section">
-        <div class="main-column">
-            {% block content %}
-            {% endblock content %}
+{% block content %}
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            {% block account_content %}
+            {% endblock account_content %}
         </div>
     </div>
-{% endblock content-wrapper %}
+{% endblock content %}
diff --git a/templates/account/email.html b/templates/account/email.html
index eb26af0..2cca87f 100644
--- a/templates/account/email.html
+++ b/templates/account/email.html
@@ -1,63 +1,75 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Email Addresses{% endblock %}
 
 {% block content %}
-    <h2>Email Addresses</h2>
-
-    {% if emailaddresses %}
-        <p>The following email addresses are associated with your account:</p>
-
-        <ul class="real">
-            {% for emailaddress in emailaddresses %}
-                <li>
-                    {{ emailaddress.email }}
-                    {% if emailaddress.verified %}
-                        <span class="verified">(verified)</span>
-                    {% else %}
-                        <span class="unverified">(unverified)</span>
-                    {% endif %}
-                    {% if emailaddress.primary %}
-                        <span class="primary">(primary)</span>
-                    {% endif %}
-                </li>
-            {% endfor %}
-        </ul>
-
-        <form method="POST" action="{% url 'account_email' %}">
-            {% csrf_token %}
-            <select name="email">
-                {% for emailaddress in emailaddresses %}
-                    <option value="{{ emailaddress.email }}">{{ emailaddress.email }}</option>
+    <div class="max-w-xl mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6">Email Addresses</h2>
+
+            {% if emailaddresses %}
+                <p class="text-gray-600 mb-4">The following email addresses are associated with your account:</p>
+
+                <div class="space-y-2 mb-6">
+                    {% for emailaddress in emailaddresses %}
+                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200">
+                            <span class="font-medium text-gray-900">{{ emailaddress.email }}</span>
+                            <div class="flex gap-2">
+                                {% if emailaddress.verified %}
+                                    <span class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded">Verified</span>
+                                {% else %}
+                                    <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-700 rounded">Unverified</span>
+                                {% endif %}
+                                {% if emailaddress.primary %}
+                                    <span class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded">Primary</span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+
+                <form method="POST" action="{% url 'account_email' %}" class="mb-8">
+                    {% csrf_token %}
+                    <select name="email" class="w-full p-2 border border-gray-300 rounded-md mb-3">
+                        {% for emailaddress in emailaddresses %}
+                            <option value="{{ emailaddress.email }}">{{ emailaddress.email }}</option>
+                        {% endfor %}
+                    </select>
+                    <div class="flex flex-wrap gap-2">
+                        <button type="submit" name="action_primary" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors">
+                            Make Primary
+                        </button>
+                        <button type="submit" name="action_send" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium rounded-md transition-colors">
+                            Re-send Verification
+                        </button>
+                        <button type="submit" name="action_remove" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md transition-colors">
+                            Remove
+                        </button>
+                    </div>
+                </form>
+            {% else %}
+                <p class="text-gray-500 italic mb-6">No email addresses are associated with your account.</p>
+            {% endif %}
+
+            <h3 class="text-lg font-semibold text-gray-900 mb-4 pt-4 border-t border-gray-200">Add Email Address</h3>
+
+            {% if form.errors %}
+                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
+                    {{ form.non_field_errors }}
+                </div>
+            {% endif %}
+
+            <form method="POST" action="{% url 'account_email' %}" class="space-y-4">
+                {% csrf_token %}
+                {% for field in form.visible_fields %}
+                    {% include "_field.html" %}
                 {% endfor %}
-            </select>
-            <div class="buttons">
-                <button class="button" type="submit" name="action_primary">Make Primary</button>
-                <button class="button" type="submit" name="action_send">Re-send Verification</button>
-                <button class="button serious" type="submit" name="action_remove">Remove</button>
-            </div>
-        </form>
-    {% else %}
-        <p>No email addresses are associated with your account.</p>
-    {% endif %}
-
-    <h3>Add Email Address</h3>
-
-    {% if form.errors %}
-        <div class="errors">
-            {{ form.non_field_errors }}
-        </div>
-    {% endif %}
-
-    <form method="POST" action="{% url 'account_email' %}">
-        {% csrf_token %}
-        {% for field in form.visible_fields %}
-            {% include "_field.html" %}
-        {% endfor %}
-        <div class="buttons">
-            <input class="button" type="submit" name="action_add" value="Add Email">
+                <button type="submit" name="action_add" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors">
+                    Add Email
+                </button>
+            </form>
         </div>
-    </form>
+    </div>
 {% endblock %}
diff --git a/templates/account/email_confirm.html b/templates/account/email_confirm.html
index 6b9f60e..9a04571 100644
--- a/templates/account/email_confirm.html
+++ b/templates/account/email_confirm.html
@@ -1,28 +1,32 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Confirm Email Address{% endblock %}
 
 {% block content %}
-    <h2>Confirm Email Address</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
+            <h2 class="text-2xl font-bold text-gray-900 mb-4">Confirm Email Address</h2>
 
-    {% if confirmation %}
-        <p>
-            Please confirm that <strong>{{ confirmation.email_address.email }}</strong>
-            is an email address for user <strong>{{ confirmation.email_address.user }}</strong>.
-        </p>
+            {% if confirmation %}
+                <p class="text-gray-600 mb-6">
+                    Please confirm that <strong class="text-gray-900">{{ confirmation.email_address.email }}</strong>
+                    is an email address for user <strong class="text-gray-900">{{ confirmation.email_address.user }}</strong>.
+                </p>
 
-        <form method="POST" action="{% url 'account_confirm_email' confirmation.key %}">
-            {% csrf_token %}
-            <div class="buttons">
-                <input class="button" type="submit" value="Confirm">
-            </div>
-        </form>
-    {% else %}
-        <p class="error">
-            This email confirmation link has expired or is invalid.
-            Please <a href="{% url 'account_email' %}">request a new confirmation email</a>.
-        </p>
-    {% endif %}
+                <form method="POST" action="{% url 'account_confirm_email' confirmation.key %}">
+                    {% csrf_token %}
+                    <button type="submit" class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        Confirm
+                    </button>
+                </form>
+            {% else %}
+                <div class="p-4 bg-red-50 border border-red-200 rounded-md text-red-700">
+                    <p class="mb-2">This email confirmation link has expired or is invalid.</p>
+                    <a href="{% url 'account_email' %}" class="text-blue-600 hover:text-blue-800 font-medium">Request a new confirmation email</a>
+                </div>
+            {% endif %}
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/account/login.html b/templates/account/login.html
index 7a80e80..b9707e0 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -1,38 +1,46 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n socialaccount %}
 
 {% block title %}Login{% endblock %}
 
 {% block content %}
-    <h2>Login</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Log In</h2>
 
-    {% if form.errors %}
-        <div class="errors">
-            {{ form.non_field_errors }}
-        </div>
-    {% endif %}
+            {% if form.errors %}
+                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
+                    {{ form.non_field_errors }}
+                </div>
+            {% endif %}
 
-    <form method="POST" action="{% url 'account_login' %}">
-        {% csrf_token %}
-        {% for field in form.visible_fields %}
-            {% include "_field.html" %}
-        {% endfor %}
-        <div class="buttons">
-            <input class="button" type="submit" value="Login">
-        </div>
-    </form>
+            <form method="POST" action="{% url 'account_login' %}" class="space-y-4">
+                {% csrf_token %}
+                {% for field in form.visible_fields %}
+                    {% include "_field.html" %}
+                {% endfor %}
+                <div class="pt-2">
+                    <button type="submit" class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        Log In
+                    </button>
+                </div>
+            </form>
 
-    <p class="login-links">
-        <a href="{% url 'account_reset_password' %}">Forgot Password?</a>
-        <a href="{% url 'register' %}">Register New Account</a>
-    </p>
+            <div class="mt-4 flex justify-between text-sm">
+                <a href="{% url 'account_reset_password' %}" class="text-blue-600 hover:text-blue-800">Forgot Password?</a>
+                <a href="{% url 'register' %}" class="text-blue-600 hover:text-blue-800">Register</a>
+            </div>
 
-    {% get_providers as socialaccount_providers %}
-    {% if socialaccount_providers %}
-        <hr>
-        <p>
-            <a class="button" href="{% provider_login_url 'github' %}">Login with GitHub</a>
-        </p>
-    {% endif %}
+            {% get_providers as socialaccount_providers %}
+            {% if socialaccount_providers %}
+                <div class="mt-6 pt-6 border-t border-gray-200">
+                    <a href="{% provider_login_url 'github' %}" class="w-full flex items-center justify-center gap-2 py-2.5 px-4 bg-gray-800 hover:bg-gray-900 text-white font-medium rounded-md transition-colors">
+                        <i class="fab fa-github"></i>
+                        Log in with GitHub
+                    </a>
+                </div>
+            {% endif %}
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/account/logout.html b/templates/account/logout.html
index 37699a4..48b3190 100644
--- a/templates/account/logout.html
+++ b/templates/account/logout.html
@@ -1,22 +1,25 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Log Out{% endblock %}
 
 {% block content %}
-    <h2>Log Out</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
+            <h2 class="text-2xl font-bold text-gray-900 mb-4">Log Out</h2>
+            <p class="text-gray-600 mb-6">Are you sure you want to log out?</p>
 
-    <p>Are you sure you want to log out?</p>
+            <form method="POST" action="{% url 'account_logout' %}">
+                {% csrf_token %}
+                <button type="submit" class="w-full py-2.5 px-4 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
+                    Yes, Log Out
+                </button>
+            </form>
 
-    <form method="POST" action="{% url 'account_logout' %}">
-        {% csrf_token %}
-        <div class="buttons">
-            <input class="button serious" type="submit" value="Log Out">
+            <p class="mt-4">
+                <a href="{% url 'index' %}" class="text-blue-600 hover:text-blue-800 text-sm">Back to Home</a>
+            </p>
         </div>
-    </form>
-
-    <p class="login-links">
-        <a href="{% url 'index' %}">Back to Home</a>
-    </p>
+    </div>
 {% endblock %}
diff --git a/templates/account/password_change.html b/templates/account/password_change.html
index f7267fa..e2e385e 100644
--- a/templates/account/password_change.html
+++ b/templates/account/password_change.html
@@ -1,25 +1,31 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Change Password{% endblock %}
 
 {% block content %}
-    <h2>Change Password</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Change Password</h2>
 
-    {% if form.errors %}
-        <div class="errors">
-            {{ form.non_field_errors }}
-        </div>
-    {% endif %}
+            {% if form.errors %}
+                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
+                    {{ form.non_field_errors }}
+                </div>
+            {% endif %}
 
-    <form method="POST" action="{% url 'account_change_password' %}">
-        {% csrf_token %}
-        {% for field in form.visible_fields %}
-            {% include "_field.html" %}
-        {% endfor %}
-        <div class="buttons">
-            <input class="button" type="submit" value="Change Password">
+            <form method="POST" action="{% url 'account_change_password' %}" class="space-y-4">
+                {% csrf_token %}
+                {% for field in form.visible_fields %}
+                    {% include "_field.html" %}
+                {% endfor %}
+                <div class="pt-2">
+                    <button type="submit" class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        Change Password
+                    </button>
+                </div>
+            </form>
         </div>
-    </form>
+    </div>
 {% endblock %}
diff --git a/templates/account/password_reset.html b/templates/account/password_reset.html
index ca0151f..46cbcaf 100644
--- a/templates/account/password_reset.html
+++ b/templates/account/password_reset.html
@@ -1,31 +1,36 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Reset Password{% endblock %}
 
 {% block content %}
-    <h2>Reset Password</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-4 text-center">Reset Password</h2>
+            <p class="text-gray-600 mb-6 text-center">Enter your email address and we'll send you a link to reset your password.</p>
 
-    <p>Enter your email address and we'll send you a link to reset your password.</p>
+            {% if form.errors %}
+                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
+                    {{ form.non_field_errors }}
+                </div>
+            {% endif %}
 
-    {% if form.errors %}
-        <div class="errors">
-            {{ form.non_field_errors }}
-        </div>
-    {% endif %}
+            <form method="POST" action="{% url 'account_reset_password' %}" class="space-y-4">
+                {% csrf_token %}
+                {% for field in form.visible_fields %}
+                    {% include "_field.html" %}
+                {% endfor %}
+                <div class="pt-2">
+                    <button type="submit" class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        Send Reset Email
+                    </button>
+                </div>
+            </form>
 
-    <form method="POST" action="{% url 'account_reset_password' %}">
-        {% csrf_token %}
-        {% for field in form.visible_fields %}
-            {% include "_field.html" %}
-        {% endfor %}
-        <div class="buttons">
-            <input class="button" type="submit" value="Send Reset Email">
+            <p class="mt-4 text-center">
+                <a href="{% url 'account_login' %}" class="text-blue-600 hover:text-blue-800 text-sm">Back to Login</a>
+            </p>
         </div>
-    </form>
-
-    <p class="login-links">
-        <a href="{% url 'account_login' %}">Back to Login</a>
-    </p>
+    </div>
 {% endblock %}
diff --git a/templates/account/password_reset_done.html b/templates/account/password_reset_done.html
index f6d4a71..2e9b1ef 100644
--- a/templates/account/password_reset_done.html
+++ b/templates/account/password_reset_done.html
@@ -1,22 +1,27 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Password Reset Email Sent{% endblock %}
 
 {% block content %}
-    <h2>Email Sent</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
+            <div class="text-green-500 text-5xl mb-4">
+                <i class="fas fa-envelope-circle-check"></i>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900 mb-4">Email Sent</h2>
+            <p class="text-gray-600 mb-4">
+                We've sent you an email with instructions on how to reset your password.
+                Please check your inbox and follow the link in the email.
+            </p>
+            <p class="text-sm text-gray-500 bg-gray-50 p-3 rounded-md">
+                <strong>Note:</strong> If you don't see the email, please check your spam folder.
+            </p>
 
-    <p>
-        We've sent you an email with instructions on how to reset your password.
-        Please check your inbox and follow the link in the email.
-    </p>
-
-    <p>
-        <strong>Note:</strong> If you don't see the email, please check your spam folder.
-    </p>
-
-    <p class="login-links">
-        <a href="{% url 'account_login' %}">Back to Login</a>
-    </p>
+            <p class="mt-6">
+                <a href="{% url 'account_login' %}" class="text-blue-600 hover:text-blue-800 text-sm">Back to Login</a>
+            </p>
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/account/password_reset_from_key.html b/templates/account/password_reset_from_key.html
index 308b693..fcedf5a 100644
--- a/templates/account/password_reset_from_key.html
+++ b/templates/account/password_reset_from_key.html
@@ -1,32 +1,38 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Set New Password{% endblock %}
 
 {% block content %}
-    <h2>Set New Password</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Set New Password</h2>
 
-    {% if token_fail %}
-        <p class="error">
-            This password reset link is invalid or has expired.
-            Please <a href="{% url 'account_reset_password' %}">request a new one</a>.
-        </p>
-    {% else %}
-        {% if form.errors %}
-            <div class="errors">
-                {{ form.non_field_errors }}
-            </div>
-        {% endif %}
+            {% if token_fail %}
+                <div class="p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-center">
+                    <p class="mb-2">This password reset link is invalid or has expired.</p>
+                    <a href="{% url 'account_reset_password' %}" class="text-blue-600 hover:text-blue-800 font-medium">Request a new one</a>
+                </div>
+            {% else %}
+                {% if form.errors %}
+                    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
+                        {{ form.non_field_errors }}
+                    </div>
+                {% endif %}
 
-        <form method="POST" action="{{ action_url }}">
-            {% csrf_token %}
-            {% for field in form.visible_fields %}
-                {% include "_field.html" %}
-            {% endfor %}
-            <div class="buttons">
-                <input class="button" type="submit" value="Set Password">
-            </div>
-        </form>
-    {% endif %}
+                <form method="POST" action="{{ action_url }}" class="space-y-4">
+                    {% csrf_token %}
+                    {% for field in form.visible_fields %}
+                        {% include "_field.html" %}
+                    {% endfor %}
+                    <div class="pt-2">
+                        <button type="submit" class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                            Set Password
+                        </button>
+                    </div>
+                </form>
+            {% endif %}
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/account/password_reset_from_key_done.html b/templates/account/password_reset_from_key_done.html
index 5dd1400..28fad03 100644
--- a/templates/account/password_reset_from_key_done.html
+++ b/templates/account/password_reset_from_key_done.html
@@ -1,15 +1,21 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Password Reset Complete{% endblock %}
 
 {% block content %}
-    <h2>Password Reset Complete</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
+            <div class="text-green-500 text-5xl mb-4">
+                <i class="fas fa-check-circle"></i>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900 mb-4">Password Reset Complete</h2>
+            <p class="text-gray-600 mb-6">Your password has been successfully reset. You can now log in with your new password.</p>
 
-    <p>Your password has been successfully reset. You can now log in with your new password.</p>
-
-    <p class="login-links">
-        <a href="{% url 'account_login' %}">Log In</a>
-    </p>
+            <a href="{% url 'account_login' %}" class="inline-block w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors text-center">
+                Log In
+            </a>
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/account/signup.html b/templates/account/signup.html
index 818d25c..42a3aef 100644
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -1,29 +1,36 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Sign Up{% endblock %}
 
 {% block content %}
-    <h2>Sign Up</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Sign Up</h2>
 
-    {% if form.errors %}
-        <div class="errors">
-            {{ form.non_field_errors }}
-        </div>
-    {% endif %}
+            {% if form.errors %}
+                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
+                    {{ form.non_field_errors }}
+                </div>
+            {% endif %}
 
-    <form method="POST" action="{% url 'account_signup' %}">
-        {% csrf_token %}
-        {% for field in form.visible_fields %}
-            {% include "_field.html" %}
-        {% endfor %}
-        <div class="buttons">
-            <input class="button" type="submit" value="Sign Up">
-        </div>
-    </form>
+            <form method="POST" action="{% url 'account_signup' %}" class="space-y-4">
+                {% csrf_token %}
+                {% for field in form.visible_fields %}
+                    {% include "_field.html" %}
+                {% endfor %}
+                <div class="pt-2">
+                    <button type="submit" class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        Sign Up
+                    </button>
+                </div>
+            </form>
 
-    <p class="login-links">
-        <a href="{% url 'account_login' %}">Already have an account? Log in</a>
-    </p>
+            <p class="mt-6 text-center text-sm text-gray-600">
+                Already have an account?
+                <a href="{% url 'account_login' %}" class="text-blue-600 hover:text-blue-800 font-medium">Log in</a>
+            </p>
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/applicant-allocations.html b/templates/applicant-allocations.html
index bcf270b..81dae53 100644
--- a/templates/applicant-allocations.html
+++ b/templates/applicant-allocations.html
@@ -3,38 +3,39 @@
 {% block title %}Allocations for {{ applicant }} - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h1>Allocations for {{ applicant }}</h1>
+    <div class="max-w-2xl">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
+            <h1 class="text-2xl font-bold text-gray-900 mb-6">Allocations for {{ applicant }}</h1>
 
-            <table class="nice">
-                <tr>
-                    <th>Resource</th>
-                    <th>Amount</th>
-                    <th></th>
-                </tr>
-                {% for allocation in allocations %}
-                    <tr>
-                        <td>{{ allocation.resource }}</td>
-                        <td>{{ allocation.amount }}</td>
-                        <td>
-                            <form action="." method="POST">
+            {% if allocations %}
+                <div class="space-y-3">
+                    {% for allocation in allocations %}
+                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
+                            <div class="flex items-center gap-3">
+                                <i class="fa fa-{{ allocation.resource.fa_icon }} text-gray-400 text-lg"></i>
+                                <div>
+                                    <span class="font-medium text-gray-900">{{ allocation.resource }}</span>
+                                    <span class="text-gray-600 ml-2">{{ allocation.amount }}</span>
+                                </div>
+                            </div>
+                            <form action="." method="POST" class="inline">
                                 {% csrf_token %}
                                 <input type="hidden" name="delete_id" value="{{ allocation.pk }}">
-                                <input type="submit" name="delete" class="button serious" value="Delete">
+                                <button type="submit" name="delete" class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded transition-colors">
+                                    Delete
+                                </button>
                             </form>
-                        </td>
-                    </tr>
-                {% empty %}
-                    <tr>
-                        <td colspan="3" class="empty">No allocations.</td>
-                    </tr>
-                {% endfor %}
-            </table>
-            <h3>Allocate resource</h3>
-            <form action="." method="POST">
-                {% include "_form.html" %}
-            </form>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <p class="text-gray-500 italic p-4 bg-gray-50 rounded-md text-center">No allocations yet.</p>
+            {% endif %}
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4">Allocate Resource</h3>
+            {% include "_form.html" with submit_verb="Allocate" %}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/applicant-view.html b/templates/applicant-view.html
index aa82817..f865f5b 100644
--- a/templates/applicant-view.html
+++ b/templates/applicant-view.html
@@ -3,60 +3,84 @@
 {% block title %}{{ applicant.name }} - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h1>{{ applicant.name }}</h1>
+    <div class="grid gap-6 lg:grid-cols-3">
+        <!-- Main Content -->
+        <div class="lg:col-span-2 space-y-6">
+            <!-- Applicant Info Card -->
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+                <h1 class="text-2xl font-bold text-gray-900 mb-6">{{ applicant.name }}</h1>
 
-            <h4>Email address</h4>
-            <p>{{ applicant.email }}</p>
+                <div class="grid gap-4 sm:grid-cols-2 mb-6">
+                    <div>
+                        <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Email</h4>
+                        <p class="text-gray-900">{{ applicant.email }}</p>
+                    </div>
+                    <div>
+                        <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Applied</h4>
+                        <p class="text-gray-900">{{ applicant.applied|date:"j M Y, P" }}</p>
+                    </div>
+                </div>
 
-            <h4>Application time</h4>
-            <p>{{ applicant.applied|date:"j M Y P" }}</p>
+                {% for question in questions %}
+                    <div class="border-t border-gray-100 pt-4 mt-4">
+                        <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">{{ question.question }}</h4>
+                        {% if question.answer %}
+                            <p class="text-gray-900 whitespace-pre-line">{{ question.answer.answer }}</p>
+                        {% else %}
+                            <p class="text-gray-400 italic">Not answered</p>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+            </div>
 
-            {% for question in questions %}
-                <h4>{{ question.question }}</h4>
-                {% if question.answer %}
-                    <p>
-                        {{ question.answer.answer|linebreaksbr }}
+            <!-- Scores Section -->
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">Scores</h3>
+
+                {% if not all_scores %}
+                    <p class="text-gray-500 italic p-4 bg-gray-50 rounded-md">
+                        You must score this applicant before you can see other scores.
                     </p>
                 {% else %}
-                    <p class="empty">
-                        Not answered.
-                    </p>
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead>
+                                <tr>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">User</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Score</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Comment</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-100">
+                                {% for ascore in all_scores %}
+                                    <tr>
+                                        <td class="px-4 py-3 text-sm text-gray-900">{{ ascore.user }}</td>
+                                        <td class="px-4 py-3 text-sm">
+                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+                                                {{ ascore.score|floatformat:"1" }}
+                                            </span>
+                                        </td>
+                                        <td class="px-4 py-3 text-sm text-gray-600">
+                                            {{ ascore.comment }}
+                                            {% if ascore.score_history %}
+                                                <p class="text-xs text-gray-400 mt-1">History: {{ ascore.score_history_human }}</p>
+                                            {% endif %}
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
                 {% endif %}
-            {% endfor %}
-
-            <h3>Scores</h3>
-            {% if not all_scores %}
-                <p class="empty">
-                    You must score this applicant before you can see other scores.
-                </p>
-            {% else %}
-                <table class="nice">
-                    <tr>
-                        <th>User</th>
-                        <th>Score</th>
-                        <th>Comment</th>
-                    </tr>
-                    {% for ascore in all_scores %}
-                        <tr>
-                            <td>{{ ascore.user }}</td>
-                            <td>{{ ascore.score|floatformat:"1" }}</td>
-                            <td>
-                                {{ ascore.comment }}
-                                {% if ascore.score_history %}
-                                    <p class="score_history">Score history: {{ ascore.score_history_human }}</p>
-                                {% endif %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                </table>
-            {% endif %}
+            </div>
+        </div>
 
-            <h3>Submit score</h3>
-            <form action="." method="POST">
+        <!-- Sidebar - Score Form -->
+        <div class="lg:col-span-1">
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-6">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">Submit Score</h3>
                 {% include "_form.html" with submit_verb="Save" include_random=1 %}
-            </form>
+            </div>
         </div>
     </div>
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
index c32ed9b..f1b8529 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,92 +1,119 @@
 {% load static %}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
     <head>
         <title>{% block whole_title %}{% block title %}{% endblock %} - Grorg{% endblock %}</title>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="icon" href="https://fav.farm/🦄" />
-        <link rel="stylesheet" href="{% static 'css/reset.css' %}" type="text/css" media="screen" />
-        <link rel="stylesheet" href="{% static 'fonts/alte_din/stylesheet.css' %}" type="text/css" media="screen" />
+        <link rel="stylesheet" href="{% static 'css/tailwind.css' %}" type="text/css" media="screen" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
         <link rel="stylesheet" href="{% static 'css/select2.css' %}" type="text/css" media="screen" />
-        <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" media="screen" />
         <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
         <script src="{% static 'js/select2.js' %}" type="text/javascript"></script>
         {% block extra_head %}{% endblock %}
     </head>
-    <body class="{% block body_class %}{% endblock %}">
+    <body class="flex flex-col min-h-full bg-gray-50 text-gray-900 {% block body_class %}{% endblock %}">
 
         {% block edit_bar %}{% endblock %}
 
-        <header class="header" style="{% block header_style %}{% endblock %}">
-            <nav>
-                <ul class="primary-nav">
-                    <li class="home"><a href="{% url 'index' %}">Grorg</a></li>
-                    {% if user.is_authenticated %}
-                        <li class="right"><a href="{% url 'account_logout' %}">Log Out</a></li>
-                        <li class="right"><a href="{% url 'join' %}">Join Program</a></li>
-                        <li class="right"><a href="#"><i class="fa fa-user"></i> &nbsp;{{ user }}</a></li>
-                    {% else %}
-                        <li class="right"><a href="{% url 'account_login' %}">Log In</a></li>
-                        <li class="right"><a href="{% url 'register' %}">Register</a></li>
-                    {% endif %}
-                </ul>
+        <header class="bg-gray-900 shadow-lg">
+            <nav class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex justify-between h-14">
+                    <div class="flex items-center">
+                        <a href="{% url 'index' %}" class="text-white font-bold text-lg uppercase hover:text-blue-400 transition-colors">
+                            Grorg
+                        </a>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        {% if user.is_authenticated %}
+                            <span class="text-gray-300">
+                                <i class="fa fa-user"></i> {{ user }}
+                            </span>
+                            <a href="{% url 'join' %}" class="text-gray-300 hover:text-white transition-colors">
+                                Join Program
+                            </a>
+                            <a href="{% url 'account_logout' %}" class="text-gray-300 hover:text-white transition-colors">
+                                Log Out
+                            </a>
+                        {% else %}
+                            <a href="{% url 'register' %}" class="text-gray-300 hover:text-white transition-colors">
+                                Register
+                            </a>
+                            <a href="{% url 'account_login' %}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
+                                Log In
+                            </a>
+                        {% endif %}
+                    </div>
+                </div>
             </nav>
         </header>
 
         {% block content-wrapper %}
-            <main class="content">
+            <main class="flex-grow">
                 {% if messages %}
-                    <section class="section">
-                        <div class="main-column">
-                            <ul class="messages">
-                                {% for message in messages %}
-                                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
-                                {% endfor %}
-                            </ul>
-                        </div>
-                    </section>
+                    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
+                        {% for message in messages %}
+                            <div class="mb-2 p-4 rounded-md {% if message.tags == 'error' %}bg-red-100 text-red-800 border border-red-200{% elif message.tags == 'warning' %}bg-yellow-100 text-yellow-800 border border-yellow-200{% elif message.tags == 'success' %}bg-green-100 text-green-800 border border-green-200{% else %}bg-blue-100 text-blue-800 border border-blue-200{% endif %}">
+                                {{ message }}
+                            </div>
+                        {% endfor %}
+                    </div>
                 {% endif %}
+
                 {% if program %}
-                    <section class="section program-header">
-                        {% if user_allowed_program %}
-                            <div class="left-column">
-                                <h1><a href="{{ program.urls.view }}">{{ program }}</a></h1>
-                            </div>
-                            <div class="right-column">
-                                <nav>
-                                    <ul class="subnav">
-                                        <li><a href="{{ program.urls.questions }}">Questions</a></li>
-                                        <li><a href="{{ program.urls.applicants }}">Applicants</a></li>
-                                        <li><a href="{{ program.urls.resources }}">Resources</a></li>
+                    <div class="bg-white border-b border-gray-200 shadow-sm">
+                        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                                <h1 class="text-2xl font-bold text-gray-900">
+                                    {% if user_allowed_program %}
+                                        <a href="{{ program.urls.view }}" class="hover:text-blue-600 transition-colors">{{ program }}</a>
+                                    {% else %}
+                                        {{ program }}
+                                    {% endif %}
+                                </h1>
+                                {% if user_allowed_program %}
+                                    <nav class="flex flex-wrap gap-2">
+                                        <a href="{{ program.urls.questions }}" class="px-3 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors">
+                                            Questions
+                                        </a>
+                                        <a href="{{ program.urls.applicants }}" class="px-3 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors">
+                                            Applicants
+                                        </a>
+                                        <a href="{{ program.urls.resources }}" class="px-3 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors">
+                                            Resources
+                                        </a>
                                         {% if user.is_staff %}
-                                            <li class="admin"><a href="{% url 'admin:grants_program_change' program.pk %}">Admin</a></li>
+                                            <a href="{% url 'admin:grants_program_change' program.pk %}" class="px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors">
+                                                Admin
+                                            </a>
                                         {% endif %}
-                                    </ul>
-                                </nav>
+                                    </nav>
+                                {% endif %}
                             </div>
-                        {% else %}
-                            <div class="left-column">
-                                <h1>{{ program }}</h1>
-                            </div>
-                        {% endif %}
-                    </section>
+                        </div>
+                    </div>
                 {% endif %}
-                {% block content %}
-                {% endblock %}
+
+                <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                    {% block content %}
+                    {% endblock %}
+                </div>
             </main>
         {% endblock content-wrapper %}
 
-        <footer>
-            <section class="section">
-                <p>&copy; {% now "Y" %} Grorg - A grant management platform</p>
-                <p>
-                    <a href="https://github.com/djangocon/grorg/issues">GitHub Issues</a> |
-                    <a href="https://github.com/djangocon/grorg/discussions">GitHub Discussions</a>
-                </p>
-            </section>
+        <footer class="bg-gray-100 border-t border-gray-200 mt-auto">
+            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                <div class="text-center text-sm text-gray-600 space-y-2">
+                    <p>&copy; {% now "Y" %} Grorg - A grant management platform</p>
+                    <p class="space-x-4">
+                        <a href="https://github.com/djangocon/grorg/issues" class="hover:text-gray-900 transition-colors">GitHub Issues</a>
+                        <span class="text-gray-400">|</span>
+                        <a href="https://github.com/djangocon/grorg/discussions" class="hover:text-gray-900 transition-colors">GitHub Discussions</a>
+                    </p>
+                </div>
+            </div>
         </footer>
 
     </body>
diff --git a/templates/index.html b/templates/index.html
index 5fd9d55..f501179 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,25 +3,29 @@
 {% block whole_title %}Grorg{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h2>Welcome to Grorg.</h2>
-            <p>
-                This is the semi-experimental system to help manage grant applications.
-                Please report problems in <a href="https://github.com/djangocon/grorg/issues">GitHub Issues</a>
-                or ask questions in <a href="https://github.com/djangocon/grorg/discussions">GitHub Discussions</a>.
-            </p>
-            {% if user.is_authenticated %}
-                <h3>Programs</h3>
+    <div class="max-w-3xl">
+        <h2 class="text-3xl font-bold text-gray-900 mb-4">Welcome to Grorg</h2>
+        <p class="text-lg text-gray-600 mb-6">
+            This is the semi-experimental system to help manage grant applications.
+            Please report problems in <a href="https://github.com/djangocon/grorg/issues" class="text-blue-600 hover:text-blue-800 underline">GitHub Issues</a>
+            or ask questions in <a href="https://github.com/djangocon/grorg/discussions" class="text-blue-600 hover:text-blue-800 underline">GitHub Discussions</a>.
+        </p>
+
+        {% if user.is_authenticated %}
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
+                <h3 class="text-xl font-semibold text-gray-900 mb-4">Your Programs</h3>
                 {% for program in accessible_programs %}
-                    <p>
-                        <a href="{{ program.urls.view }}">{{ program.name }}</a>
-                    </p>
+                    <a href="{{ program.urls.view }}" class="block p-4 mb-2 bg-gray-50 hover:bg-blue-50 rounded-md border border-gray-200 hover:border-blue-300 transition-colors">
+                        <span class="font-medium text-gray-900">{{ program.name }}</span>
+                    </a>
                 {% empty %}
-                    <p class="empty">No programs are available to you at this time.</p>
+                    <p class="text-gray-500 italic">No programs are available to you at this time.</p>
                 {% endfor %}
-            {% endif %}
-            <p>Cheers to <a href="https://twitter.com/andrewgodwin">Andrew Godwin</a> for developing grorg.</p>
-        </div>
+            </div>
+        {% endif %}
+
+        <p class="text-sm text-gray-500">
+            Cheers to <a href="https://twitter.com/andrewgodwin" class="text-blue-600 hover:text-blue-800 underline">Andrew Godwin</a> for developing grorg.
+        </p>
     </div>
 {% endblock content %}
diff --git a/templates/join.html b/templates/join.html
index dc50574..2e9ebf7 100644
--- a/templates/join.html
+++ b/templates/join.html
@@ -1,14 +1,13 @@
 {% extends "base.html" %}
 
-{% block whole_title %}Join{% endblock %}
+{% block whole_title %}Join a Program{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h2>Join</h2>
-            <form action="." method="POST">
-                {% include "_form.html" with submit_verb="Join" %}
-            </form>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Join a Program</h2>
+            <p class="text-gray-600 mb-6 text-center">Enter the program code you received to join a grant program.</p>
+            {% include "_form.html" with submit_verb="Join" %}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/program-applicants.html b/templates/program-applicants.html
index 27d8372..834ae2d 100644
--- a/templates/program-applicants.html
+++ b/templates/program-applicants.html
@@ -3,58 +3,81 @@
 {% block title %}Applicants - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <h1>Applicants</h1>
-
-        <table class="nice">
-            <tr>
-                <th>Name</th>
-                <th>Email</th>
-                <th><a href="?sort=applied">Applied {% if sort == "applied" %}<i class="fa fa-chevron-circle-down"></i>{% endif %}</a></th>
-                <th><a href="?sort=score">Score {% if sort == "score" %}<i class="fa fa-chevron-circle-down"></i>{% endif %}</a></th>
-                <th>Allocated</th>
-                <th></th>
-            </tr>
-            {% for applicant in applicants %}
-                <tr>
-                    <td>{{ applicant.name }}</td>
-                    <td>{{ applicant.email }}</td>
-                    <td class="small">{{ applicant.applied|date:"j M Y P" }}</td>
-                    {% if applicant.has_scored %}
-                        <td>
-                            {{ applicant.average_score|floatformat:"1"|default:"-" }}
-                            <span class="num_votes">({{ applicant.scores.count }} vote{{ applicant.scores.count|pluralize }}, &sigma;={{ applicant.stdev|floatformat:"1" }})</span>
-                        </td>
-                        <td class="{% if not applicant.allocations.exists %}empty{% endif %}">
-                            {% for allocation in applicant.allocations.all %}
-                                <i class="fa fa-{{ allocation.resource.fa_icon }}"></i> {{ allocation.amount }}&nbsp;
-                            {% empty %}
-                                (none)
-                            {% endfor %}
-                        </td>
-                        <td>
-                            <a href="{{ applicant.urls.view }}" class="button boring">View</a>
-                            <a href="{{ applicant.urls.allocations }}" class="button boring">Allocate</a>
-                        </td>
-                    {% else %}
-                        <td class="empty">(hidden)</td>
-                        <td class="empty">(hidden)</td>
-                        <td>
-                            <a href="{{ applicant.urls.view }}" class="button">Score</a>
-                        </td>
-                    {% endif %}
-                </tr>
-            {% empty %}
-                <tr>
-                    <td colspan="6" class="empty">No applicants.</td>
-                </tr>
-            {% endfor %}
-        </table>
-
-        <div class="action-bar">
-            <a href="{{ program.urls.applicants_bulk }}" class="button boring">Bulk load applicants</a>
-            <a href="{{ program.urls.scores_bulk }}" class="button boring">Bulk load your scores</a>
-            <a href="{{ program.urls.applicants_csv }}" class="button boring">Export applications as CSV</a>
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            <a href="?sort=applied" class="hover:text-gray-900">
+                                Applied {% if sort == "applied" %}<i class="fa fa-chevron-down text-blue-600"></i>{% endif %}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            <a href="?sort=score" class="hover:text-gray-900">
+                                Score {% if sort == "score" %}<i class="fa fa-chevron-down text-blue-600"></i>{% endif %}
+                            </a>
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocated</th>
+                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                    {% for applicant in applicants %}
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ applicant.name }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ applicant.email }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ applicant.applied|date:"j M Y" }}</td>
+                            {% if applicant.has_scored %}
+                                <td class="px-6 py-4 whitespace-nowrap text-sm">
+                                    <span class="font-medium text-gray-900">{{ applicant.average_score|floatformat:"1"|default:"-" }}</span>
+                                    <span class="text-gray-400 text-xs">({{ applicant.scores.count }}, σ={{ applicant.stdev|floatformat:"1" }})</span>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {% for allocation in applicant.allocations.all %}
+                                        <span class="inline-flex items-center gap-1 mr-2">
+                                            <i class="fa fa-{{ allocation.resource.fa_icon }} text-gray-400"></i>
+                                            {{ allocation.amount }}
+                                        </span>
+                                    {% empty %}
+                                        <span class="text-gray-400 italic">None</span>
+                                    {% endfor %}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm space-x-2">
+                                    <a href="{{ applicant.urls.view }}" class="text-blue-600 hover:text-blue-900 font-medium">View</a>
+                                    <a href="{{ applicant.urls.allocations }}" class="text-blue-600 hover:text-blue-900 font-medium">Allocate</a>
+                                </td>
+                            {% else %}
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400 italic">Hidden</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400 italic">Hidden</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
+                                    <a href="{{ applicant.urls.view }}" class="inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded transition-colors">
+                                        Score
+                                    </a>
+                                </td>
+                            {% endif %}
+                        </tr>
+                    {% empty %}
+                        <tr>
+                            <td colspan="6" class="px-6 py-8 text-center text-gray-500 italic">No applicants yet.</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </div>
     </div>
+
+    <div class="mt-6 flex flex-wrap gap-3">
+        <a href="{{ program.urls.applicants_bulk }}" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-md transition-colors text-sm">
+            <i class="fas fa-upload mr-2"></i> Bulk Load Applicants
+        </a>
+        <a href="{{ program.urls.scores_bulk }}" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-md transition-colors text-sm">
+            <i class="fas fa-upload mr-2"></i> Bulk Load Scores
+        </a>
+        <a href="{{ program.urls.applicants_csv }}" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-md transition-colors text-sm">
+            <i class="fas fa-download mr-2"></i> Export as CSV
+        </a>
+    </div>
 {% endblock %}
diff --git a/templates/program-apply-success.html b/templates/program-apply-success.html
index acb957f..759fa2e 100644
--- a/templates/program-apply-success.html
+++ b/templates/program-apply-success.html
@@ -1,12 +1,18 @@
 {% extends "base.html" %}
 
-{% block title %}Apply - {{ program }}{% endblock %}
+{% block title %}Application Submitted - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h1>Application Successful</h1>
-            <p>Thanks for applying!</p>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
+            <div class="text-green-500 text-5xl mb-4">
+                <i class="fas fa-circle-check"></i>
+            </div>
+            <h1 class="text-2xl font-bold text-gray-900 mb-4">Application Submitted!</h1>
+            <p class="text-gray-600 mb-6">Thank you for applying to {{ program }}. We'll be in touch!</p>
+            <a href="{% url 'index' %}" class="inline-block px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors">
+                Back to Home
+            </a>
         </div>
     </div>
 {% endblock %}
diff --git a/templates/program-apply.html b/templates/program-apply.html
index e6c7071..a120a28 100644
--- a/templates/program-apply.html
+++ b/templates/program-apply.html
@@ -3,12 +3,10 @@
 {% block title %}Apply - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h1>Apply</h1>
-            <form action="." method="POST">
-                {% include "_form.html" with submit_verb="Apply" %}
-            </form>
+    <div class="max-w-2xl">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h1 class="text-2xl font-bold text-gray-900 mb-6">Apply for {{ program }}</h1>
+            {% include "_form.html" with submit_verb="Submit Application" %}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/program-bulk-applicants.html b/templates/program-bulk-applicants.html
index 365080b..283bb09 100644
--- a/templates/program-bulk-applicants.html
+++ b/templates/program-bulk-applicants.html
@@ -1,25 +1,46 @@
 {% extends "base.html" %}
 
-{% block title %}Bulk load applicants - {{ program }}{% endblock %}
+{% block title %}Bulk Load Applicants - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            {% if form %}
-                <h1>Bulk load applicants</h1>
+    <div class="max-w-2xl">
+        {% if form %}
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+                <h1 class="text-2xl font-bold text-gray-900 mb-6">Bulk Load Applicants</h1>
                 <form action="." method="POST" enctype="multipart/form-data">
-                    {% include "_form.html" with submit_verb="Load" %}
+                    {% include "_form.html" with submit_verb="Upload" %}
                 </form>
-            {% else %}
-                <h1>Bulk load applicants result</h1>
-                <p>Loaded {{ successful }} row{{ successful|pluralize }} successfully.</p>
+            </div>
+        {% else %}
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+                <div class="text-center mb-6">
+                    <div class="text-green-500 text-5xl mb-4">
+                        <i class="fas fa-circle-check"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold text-gray-900 mb-2">Upload Complete</h1>
+                    <p class="text-gray-600">Loaded <span class="font-semibold">{{ successful }}</span> row{{ successful|pluralize }} successfully.</p>
+                </div>
+
                 {% if errors %}
-                    <h3>Errors</h3>
-                    {% for offset, row, error in errors %}
-                        <p><b>Row {{ offset }}</b>: {{ error }}</p>
-                    {% endfor %}
+                    <div class="mt-6 border-t border-gray-200 pt-6">
+                        <h3 class="text-lg font-semibold text-red-600 mb-4">Errors</h3>
+                        <div class="space-y-2">
+                            {% for offset, row, error in errors %}
+                                <div class="p-3 bg-red-50 border border-red-200 rounded-md text-sm">
+                                    <span class="font-medium text-red-800">Row {{ offset }}:</span>
+                                    <span class="text-red-700">{{ error }}</span>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
                 {% endif %}
-            {% endif %}
-        </div>
+
+                <div class="mt-6 text-center">
+                    <a href="{{ program.urls.applicants }}" class="inline-block px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors">
+                        View Applicants
+                    </a>
+                </div>
+            </div>
+        {% endif %}
     </div>
 {% endblock %}
diff --git a/templates/program-bulk-scores.html b/templates/program-bulk-scores.html
index d885138..94150f5 100644
--- a/templates/program-bulk-scores.html
+++ b/templates/program-bulk-scores.html
@@ -1,25 +1,46 @@
 {% extends "base.html" %}
 
-{% block title %}Bulk load scores - {{ program }}{% endblock %}
+{% block title %}Bulk Load Scores - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            {% if form %}
-                <h1>Bulk load scores</h1>
+    <div class="max-w-2xl">
+        {% if form %}
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+                <h1 class="text-2xl font-bold text-gray-900 mb-6">Bulk Load Scores</h1>
                 <form action="." method="POST" enctype="multipart/form-data">
-                    {% include "_form.html" with submit_verb="Load" %}
+                    {% include "_form.html" with submit_verb="Upload" %}
                 </form>
-            {% else %}
-                <h1>Bulk load scores result</h1>
-                <p>Loaded {{ successful }} row{{ successful|pluralize }} successfully.</p>
+            </div>
+        {% else %}
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+                <div class="text-center mb-6">
+                    <div class="text-green-500 text-5xl mb-4">
+                        <i class="fas fa-circle-check"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold text-gray-900 mb-2">Upload Complete</h1>
+                    <p class="text-gray-600">Loaded <span class="font-semibold">{{ successful }}</span> row{{ successful|pluralize }} successfully.</p>
+                </div>
+
                 {% if errors %}
-                    <h3>Errors</h3>
-                    {% for offset, row, error in errors %}
-                        <p><b>Row {{ offset }}</b>: {{ error }}</p>
-                    {% endfor %}
+                    <div class="mt-6 border-t border-gray-200 pt-6">
+                        <h3 class="text-lg font-semibold text-red-600 mb-4">Errors</h3>
+                        <div class="space-y-2">
+                            {% for offset, row, error in errors %}
+                                <div class="p-3 bg-red-50 border border-red-200 rounded-md text-sm">
+                                    <span class="font-medium text-red-800">Row {{ offset }}:</span>
+                                    <span class="text-red-700">{{ error }}</span>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
                 {% endif %}
-            {% endif %}
-        </div>
+
+                <div class="mt-6 text-center">
+                    <a href="{{ program.urls.applicants }}" class="inline-block px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors">
+                        View Applicants
+                    </a>
+                </div>
+            </div>
+        {% endif %}
     </div>
 {% endblock %}
diff --git a/templates/program-home.html b/templates/program-home.html
index 65a5f3f..f3e13a1 100644
--- a/templates/program-home.html
+++ b/templates/program-home.html
@@ -2,50 +2,81 @@
 
 {% block title %}{{ program }}{% endblock %}
 
-{% block body_class %}program-home{% endblock %}
-
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h3>Applicants</h3>
-            <p>
-                <b>{{ num_applicants }}</b> application{{ num_applicants|pluralize }} received,
-                of which you have scored <b>{{ num_scored }}</b>.
+    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <!-- Applicants Card -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
+                <i class="fas fa-users text-blue-600"></i>
+                Applicants
+            </h3>
+            <p class="text-gray-600 mb-4">
+                <span class="text-2xl font-bold text-gray-900">{{ num_applicants }}</span>
+                application{{ num_applicants|pluralize }} received
+            </p>
+            <p class="text-sm text-gray-500 mb-4">
+                You have scored <span class="font-semibold text-gray-700">{{ num_scored }}</span> of them.
             </p>
-            <p>
-                <a href="{{ program.urls.applicants }}" class="button boring">View applicants</a>
+            <div class="flex flex-wrap gap-2">
+                <a href="{{ program.urls.applicants }}" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-md transition-colors text-sm">
+                    View All
+                </a>
                 {% if num_scored < num_applicants %}
-                    <a href="{{ program.urls.score_random }}" class="button">Score random applicant</a>
+                    <a href="{{ program.urls.score_random }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors text-sm">
+                        Score Random
+                    </a>
                 {% endif %}
-            </p>
+            </div>
+        </div>
 
-            <h3>Resources</h3>
-            <p>
-                {% for resource in program.resources.all %}
-                    <i class="fa fa-{{ resource.fa_icon }}"></i> <b>{{ resource }}</b>:
-                    {{ resource.amount_allocated }} allocated, {{ resource.amount_remaining }} remaining <br>
-                {% empty %}
-                    <span class="empty">No resources defined.</span>
-                {% endfor %}
-            </p>
-            <p>
-                <a href="{{ program.urls.resources }}" class="button boring">View resources</a>
-            </p>
+        <!-- Resources Card -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
+                <i class="fas fa-box text-green-600"></i>
+                Resources
+            </h3>
+            {% for resource in program.resources.all %}
+                <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
+                    <span class="flex items-center gap-2 text-gray-700">
+                        <i class="fa fa-{{ resource.fa_icon }} text-gray-400"></i>
+                        {{ resource }}
+                    </span>
+                    <span class="text-sm">
+                        <span class="text-green-600 font-medium">{{ resource.amount_allocated }}</span> /
+                        <span class="text-gray-500">{{ resource.amount_remaining }} left</span>
+                    </span>
+                </div>
+            {% empty %}
+                <p class="text-gray-500 italic text-sm">No resources defined.</p>
+            {% endfor %}
+            <div class="mt-4">
+                <a href="{{ program.urls.resources }}" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-md transition-colors text-sm">
+                    Manage Resources
+                </a>
+            </div>
+        </div>
 
-            <h3>Users</h3>
-            <p>The following users are assigned to this program:</p>
-            <ul class="real">
+        <!-- Users Card -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
+                <i class="fas fa-user-group text-purple-600"></i>
+                Users
+            </h3>
+            <ul class="space-y-2 mb-4">
                 {% for user in users %}
-                    <li>{{ user }} ({{ user.num_votes }} vote{{ user.num_votes|pluralize }})</li>
+                    <li class="flex items-center justify-between text-sm">
+                        <span class="text-gray-700">{{ user }}</span>
+                        <span class="text-gray-500">{{ user.num_votes }} vote{{ user.num_votes|pluralize }}</span>
+                    </li>
                 {% empty %}
-                    <li class="empty">No users assigned</li>
+                    <li class="text-gray-500 italic text-sm">No users assigned</li>
                 {% endfor %}
             </ul>
-            <p>
-                Other users can sign up using the program code, which is
-                <tt>{{ program.join_code }}</tt>. Only give this code to people
-                you trust; anyone with it can sign up and see voting results.
-            </p>
+            <div class="mt-4 p-3 bg-gray-50 rounded-md">
+                <p class="text-xs text-gray-500 mb-1">Program Code</p>
+                <code class="text-sm font-mono bg-white px-2 py-1 rounded border border-gray-200">{{ program.join_code }}</code>
+                <p class="text-xs text-gray-400 mt-2">Share with trusted reviewers only.</p>
+            </div>
         </div>
     </div>
 {% endblock %}
diff --git a/templates/program-question-edit.html b/templates/program-question-edit.html
index 06f40e7..f17edb2 100644
--- a/templates/program-question-edit.html
+++ b/templates/program-question-edit.html
@@ -1,14 +1,12 @@
 {% extends "base.html" %}
 
-{% block title %}Questions - {{ program }}{% endblock %}
+{% block title %}Edit Question - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h3>Edit question</h3>
-            <form action="." method="POST">
-                {% include "_form.html" with include_delete=question.can_delete %}
-            </form>
+    <div class="max-w-2xl">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h3 class="text-xl font-semibold text-gray-900 mb-6">Edit Question</h3>
+            {% include "_form.html" with include_delete=question.can_delete %}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/program-questions.html b/templates/program-questions.html
index 2b80651..ba433b0 100644
--- a/templates/program-questions.html
+++ b/templates/program-questions.html
@@ -3,50 +3,53 @@
 {% block title %}Questions - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h1>Questions</h1>
-
-            <table class="nice">
-                <tr>
-                    <th>Question</th>
-                    <th>Type</th>
-                    <th>Required</th>
-                    <th>Actions</th>
-                </tr>
-                <tr>
-                    <td>Name</td>
-                    <td>Text</td>
-                    <td><i class="fa fa-check green"></i></td>
-                    <td class="empty">Built in</td>
-                </tr>
-                <tr>
-                    <td>Email</td>
-                    <td>Email</td>
-                    <td><i class="fa fa-check green"></i></td>
-                    <td class="empty">Built in</td>
-                </tr>
-                {% for question in questions %}
+    <div class="max-w-4xl">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-8">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
                     <tr>
-                        <td>{{ question.question }}</td>
-                        <td>{{ question.get_type_display }}</td>
-                        <td>
-                            {% if question.required %}
-                                <i class="fa fa-check green"></i>
-                            {% else %}
-                                <i class="fa fa-times red"></i>
-                            {% endif %}
-                        </td>
-                        <td>
-                            <a href="{{ question.urls.edit }}" class="button">Edit</a>
-                        </td>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Question</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>
+                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                    <tr class="bg-gray-50">
+                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Name</td>
+                        <td class="px-6 py-4 text-sm text-gray-500">Text</td>
+                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-600"></i></td>
+                        <td class="px-6 py-4 text-right text-sm text-gray-400 italic">Built-in</td>
+                    </tr>
+                    <tr class="bg-gray-50">
+                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Email</td>
+                        <td class="px-6 py-4 text-sm text-gray-500">Email</td>
+                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-600"></i></td>
+                        <td class="px-6 py-4 text-right text-sm text-gray-400 italic">Built-in</td>
                     </tr>
-                {% endfor %}
+                    {% for question in questions %}
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ question.question }}</td>
+                            <td class="px-6 py-4 text-sm text-gray-500">{{ question.get_type_display }}</td>
+                            <td class="px-6 py-4 text-center">
+                                {% if question.required %}
+                                    <i class="fas fa-check text-green-600"></i>
+                                {% else %}
+                                    <i class="fas fa-xmark text-gray-400"></i>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 text-right">
+                                <a href="{{ question.urls.edit }}" class="text-blue-600 hover:text-blue-900 text-sm font-medium">Edit</a>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
             </table>
-            <h3>Create a new question</h3>
-            <form action="." method="POST">
-                {% include "_form.html" %}
-            </form>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4">Add New Question</h3>
+            {% include "_form.html" with submit_verb="Add Question" %}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/program-resource-edit.html b/templates/program-resource-edit.html
index 41986e5..8895fd0 100644
--- a/templates/program-resource-edit.html
+++ b/templates/program-resource-edit.html
@@ -1,14 +1,12 @@
 {% extends "base.html" %}
 
-{% block title %}Resources - {{ program }}{% endblock %}
+{% block title %}Edit Resource - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h3>Edit resource</h3>
-            <form action="." method="POST">
-                {% include "_form.html" with include_delete=1 %}
-            </form>
+    <div class="max-w-2xl">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h3 class="text-xl font-semibold text-gray-900 mb-6">Edit Resource</h3>
+            {% include "_form.html" with include_delete=1 %}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/program-resources.html b/templates/program-resources.html
index 648c6f0..da65c3f 100644
--- a/templates/program-resources.html
+++ b/templates/program-resources.html
@@ -3,37 +3,39 @@
 {% block title %}Resources - {{ program }}{% endblock %}
 
 {% block content %}
-    <div class="section">
-        <div class="main-column">
-            <h1>Resources</h1>
-
-            <table class="nice">
-                <tr>
-                    <th>Name</th>
-                    <th>Type</th>
-                    <th>Amount</th>
-                    <th>Actions</th>
-                </tr>
-                {% for resource in resources %}
-                    <tr>
-                        <td>{{ resource.name }}</td>
-                        <td>{{ resource.get_type_display }}</td>
-                        <td>{{ resource.amount }}</td>
-                        <td>
-                            <a href="{{ resource.urls.edit }}" class="button">Edit</a>
-                        </td>
-                    </tr>
-                {% empty %}
+    <div class="max-w-4xl">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-8">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
                     <tr>
-                        <td colspan="3" class="empty">No resources set.</td>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                     </tr>
-                {% endfor %}
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                    {% for resource in resources %}
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ resource.name }}</td>
+                            <td class="px-6 py-4 text-sm text-gray-500">{{ resource.get_type_display }}</td>
+                            <td class="px-6 py-4 text-sm text-gray-500">{{ resource.amount }}</td>
+                            <td class="px-6 py-4 text-right">
+                                <a href="{{ resource.urls.edit }}" class="text-blue-600 hover:text-blue-900 text-sm font-medium">Edit</a>
+                            </td>
+                        </tr>
+                    {% empty %}
+                        <tr>
+                            <td colspan="4" class="px-6 py-8 text-center text-gray-500 italic">No resources defined yet.</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
             </table>
+        </div>
 
-            <h3>Create a new resource</h3>
-            <form action="." method="POST">
-                {% include "_form.html" %}
-            </form>
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4">Add New Resource</h3>
+            {% include "_form.html" with submit_verb="Add Resource" %}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/register.html b/templates/register.html
index 6c8fd83..5655c99 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -3,12 +3,14 @@
 {% block whole_title %}Register{% endblock %}
 
 {% block content %}
-    <section class="section">
-        <div class="main-column">
-            <h2>Register</h2>
-            <form action="." method="POST">
-                {% include "_form.html" with submit_verb="Register" %}
-            </form>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Create an Account</h2>
+            {% include "_form.html" with submit_verb="Register" %}
+            <p class="mt-6 text-center text-sm text-gray-600">
+                Already have an account?
+                <a href="{% url 'account_login' %}" class="text-blue-600 hover:text-blue-800 font-medium">Log in</a>
+            </p>
         </div>
-    </section>
+    </div>
 {% endblock %}
diff --git a/templates/socialaccount/authentication_error.html b/templates/socialaccount/authentication_error.html
index fc9ad90..1f75704 100644
--- a/templates/socialaccount/authentication_error.html
+++ b/templates/socialaccount/authentication_error.html
@@ -1,15 +1,21 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Authentication Error{% endblock %}
 
 {% block content %}
-    <h2>Authentication Error</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
+            <div class="text-red-500 text-5xl mb-4">
+                <i class="fas fa-triangle-exclamation"></i>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900 mb-4">Authentication Error</h2>
+            <p class="text-gray-600 mb-6">An error occurred while trying to authenticate with the external provider. Please try again.</p>
 
-    <p>An error occurred while trying to authenticate with the external provider. Please try again.</p>
-
-    <p class="login-links">
-        <a href="{% url 'account_login' %}">Back to Login</a>
-    </p>
+            <a href="{% url 'account_login' %}" class="inline-block w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors text-center">
+                Back to Login
+            </a>
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/socialaccount/login_cancelled.html b/templates/socialaccount/login_cancelled.html
index a1b4111..ee52847 100644
--- a/templates/socialaccount/login_cancelled.html
+++ b/templates/socialaccount/login_cancelled.html
@@ -1,15 +1,21 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Login Cancelled{% endblock %}
 
 {% block content %}
-    <h2>Login Cancelled</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
+            <div class="text-yellow-500 text-5xl mb-4">
+                <i class="fas fa-circle-xmark"></i>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900 mb-4">Login Cancelled</h2>
+            <p class="text-gray-600 mb-6">You cancelled the login process. No worries, you can try again whenever you're ready.</p>
 
-    <p>You cancelled the login process. No worries, you can try again whenever you're ready.</p>
-
-    <p class="login-links">
-        <a href="{% url 'account_login' %}">Back to Login</a>
-    </p>
+            <a href="{% url 'account_login' %}" class="inline-block w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors text-center">
+                Back to Login
+            </a>
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/socialaccount/signup.html b/templates/socialaccount/signup.html
index 4138ddd..4fe7684 100644
--- a/templates/socialaccount/signup.html
+++ b/templates/socialaccount/signup.html
@@ -1,27 +1,32 @@
-{% extends "account/base.html" %}
+{% extends "base.html" %}
 
 {% load i18n %}
 
 {% block title %}Complete Sign Up{% endblock %}
 
 {% block content %}
-    <h2>Complete Sign Up</h2>
+    <div class="max-w-md mx-auto">
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-4 text-center">Complete Sign Up</h2>
+            <p class="text-gray-600 mb-6 text-center">You're almost there! Please complete your registration.</p>
 
-    <p>You're almost there! Please complete your registration.</p>
+            {% if form.errors %}
+                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
+                    {{ form.non_field_errors }}
+                </div>
+            {% endif %}
 
-    {% if form.errors %}
-        <div class="errors">
-            {{ form.non_field_errors }}
+            <form method="POST" action="{% url 'socialaccount_signup' %}" class="space-y-4">
+                {% csrf_token %}
+                {% for field in form.visible_fields %}
+                    {% include "_field.html" %}
+                {% endfor %}
+                <div class="pt-2">
+                    <button type="submit" class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        Complete Sign Up
+                    </button>
+                </div>
+            </form>
         </div>
-    {% endif %}
-
-    <form method="POST" action="{% url 'socialaccount_signup' %}">
-        {% csrf_token %}
-        {% for field in form.visible_fields %}
-            {% include "_field.html" %}
-        {% endfor %}
-        <div class="buttons">
-            <input class="button" type="submit" value="Complete Sign Up">
-        </div>
-    </form>
+    </div>
 {% endblock %}