diff --git a/apps/wesnest-search/index.html b/apps/wesnest-search/index.html
index d2ff1b5..9449064 100644
--- a/apps/wesnest-search/index.html
+++ b/apps/wesnest-search/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>WesNest Semantic Search</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>WesNest Semantic Search - Wesleyan University</title>
   <script
     defer
     src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"
@@ -10,48 +11,500 @@
     crossorigin="anonymous"
   ></script>
   <style>
-    body { font-family: system-ui, sans-serif; max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
-    input { width: 100%; padding: 0.75rem; font-size: 1rem; }
-    .card { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin-top: 1rem; }
-    .categories { color: #666; font-size: 0.85rem; }
+    :root {
+      --wes-cardinal: #C41230;
+      --wes-cardinal-dark: #990000;
+      --wes-cardinal-light: #FDF2F4;
+      --wes-black: #1F2937;
+      --wes-gray-700: #374151;
+      --wes-gray-500: #6B7280;
+      --wes-gray-200: #E5E7EB;
+      --wes-gray-100: #F3F4F6;
+      --wes-gray-50: #F9FAFB;
+      --wes-white: #FFFFFF;
+      --wes-focus-ring: rgba(196, 18, 48, 0.4);
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background-color: var(--wes-gray-50);
+      color: var(--wes-black);
+      line-height: 1.5;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    header {
+      background-color: var(--wes-cardinal);
+      color: var(--wes-white);
+      padding: 1.25rem 1rem;
+      border-bottom: 3px solid var(--wes-cardinal-dark);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    }
+
+    .header-container {
+      max-width: 768px;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .header-title-group h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+    }
+
+    .header-title-group p {
+      font-size: 0.875rem;
+      color: rgba(255, 255, 255, 0.9);
+      margin-top: 0.15rem;
+    }
+
+    main {
+      max-width: 768px;
+      width: 100%;
+      margin: 2rem auto;
+      padding: 0 1rem;
+      flex: 1;
+    }
+
+    .search-bar-wrapper {
+      position: relative;
+      margin-bottom: 1rem;
+    }
+
+    .search-input {
+      width: 100%;
+      padding: 0.875rem 2.75rem 0.875rem 2.75rem;
+      font-size: 1.05rem;
+      color: var(--wes-black);
+      background-color: var(--wes-white);
+      border: 2px solid var(--wes-gray-200);
+      border-radius: 10px;
+      outline: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    }
+
+    .search-input:focus {
+      border-color: var(--wes-cardinal);
+      box-shadow: 0 0 0 4px var(--wes-focus-ring);
+    }
+
+    .search-icon {
+      position: absolute;
+      left: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1.25rem;
+      height: 1.25rem;
+      color: var(--wes-gray-500);
+      pointer-events: none;
+    }
+
+    .clear-button {
+      position: absolute;
+      right: 0.875rem;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      font-size: 1.15rem;
+      line-height: 1;
+      color: var(--wes-gray-500);
+      cursor: pointer;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.15s ease, background-color 0.15s ease;
+    }
+
+    .clear-button:hover, .clear-button:focus-visible {
+      color: var(--wes-cardinal);
+      background-color: var(--wes-gray-100);
+      outline: 2px solid var(--wes-cardinal);
+    }
+
+    .spinner {
+      position: absolute;
+      right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 2px solid var(--wes-gray-200);
+      border-top-color: var(--wes-cardinal);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: translateY(-50%) rotate(360deg); }
+    }
+
+    .suggestion-chips {
+      margin-bottom: 1.5rem;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .suggestion-label {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--wes-gray-500);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .chip-button {
+      background-color: var(--wes-white);
+      border: 1px solid var(--wes-gray-200);
+      border-radius: 20px;
+      padding: 0.35rem 0.75rem;
+      font-size: 0.875rem;
+      color: var(--wes-gray-700);
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .chip-button:hover {
+      background-color: var(--wes-cardinal-light);
+      border-color: var(--wes-cardinal);
+      color: var(--wes-cardinal);
+    }
+
+    .chip-button:focus-visible {
+      outline: 2px solid var(--wes-cardinal);
+      outline-offset: 2px;
+    }
+
+    .status-announcer {
+      font-size: 0.875rem;
+      color: var(--wes-gray-500);
+      margin-bottom: 1rem;
+      min-height: 1.25rem;
+    }
+
+    .results-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .card {
+      background-color: var(--wes-white);
+      border: 1px solid var(--wes-gray-200);
+      border-radius: 10px;
+      padding: 1.25rem;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+    }
+
+    .card:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border-color: #D1D5DB;
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 0.75rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .org-link {
+      font-size: 1.15rem;
+      font-weight: 700;
+      color: var(--wes-cardinal);
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    .org-link:hover, .org-link:focus-visible {
+      text-decoration: underline;
+      color: var(--wes-cardinal-dark);
+      outline-offset: 2px;
+    }
+
+    .match-score {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: #065F46;
+      background-color: #D1FAE5;
+      padding: 0.15rem 0.5rem;
+      border-radius: 9999px;
+      white-space: nowrap;
+    }
+
+    .categories-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.35rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .category-tag {
+      background-color: var(--wes-gray-100);
+      color: var(--wes-gray-700);
+      font-size: 0.75rem;
+      font-weight: 500;
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+    }
+
+    .org-summary {
+      font-size: 0.925rem;
+      color: var(--wes-gray-700);
+      line-height: 1.5;
+    }
+
+    .zero-state-container, .empty-state-container {
+      text-align: center;
+      padding: 3rem 1rem;
+      background-color: var(--wes-white);
+      border: 1px dashed var(--wes-gray-200);
+      border-radius: 12px;
+      color: var(--wes-gray-500);
+    }
+
+    .zero-state-icon {
+      font-size: 2.25rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .zero-state-title {
+      font-size: 1.15rem;
+      font-weight: 600;
+      color: var(--wes-black);
+      margin-bottom: 0.5rem;
+    }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
   </style>
 </head>
 <body>
-  <h1>Find a Wesleyan club</h1>
-  <div x-data="clubSearch()">
-    <input
-      type="search"
-      placeholder="Describe what you're looking for..."
-      data-testid="search-input"
-      x-model="query"
-      @input.debounce.400ms="search()"
-    />
-    <template x-for="org in results" :key="org.name">
-      <div class="card" data-testid="result-card">
-        <strong x-text="org.name"></strong>
-        <div class="categories" x-text="org.categories"></div>
-        <p x-text="org.summary"></p>
+  <header>
+    <div class="header-container">
+      <div class="header-title-group">
+        <h1>WesNest Club Finder</h1>
+        <p>Wesleyan University Student Organizations Semantic Search</p>
       </div>
-    </template>
-  </div>
+    </div>
+  </header>
+
+  <main>
+    <div x-data="clubSearch()">
+      <div class="search-bar-wrapper">
+        <svg class="search-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+        </svg>
+
+        <label for="wesnest-search-input" class="visually-hidden">Search Wesleyan student clubs and organizations</label>
+        <input
+          id="wesnest-search-input"
+          class="search-input"
+          type="search"
+          placeholder="Describe your interests (e.g. game design, debate, volunteering)..."
+          data-testid="search-input"
+          x-model="query"
+          @input.debounce.300ms="search()"
+          aria-describedby="search-status"
+        />
+
+        <div x-show="loading" class="spinner" data-testid="search-spinner" aria-label="Loading search results" role="status"></div>
+
+        <button
+          type="button"
+          x-show="query.length > 0 && !loading"
+          @click="clearSearch()"
+          class="clear-button"
+          data-testid="clear-search"
+          aria-label="Clear search input"
+        >
+          ✕
+        </button>
+      </div>
+
+      <!-- Zero-state suggestions -->
+      <div class="suggestion-chips" aria-label="Suggested search queries">
+        <span class="suggestion-label">Try searching:</span>
+        <template x-for="suggestion in suggestions" :key="suggestion">
+          <button
+            type="button"
+            class="chip-button"
+            data-testid="suggestion-chip"
+            x-text="suggestion"
+            @click="applyQuery(suggestion)"
+          ></button>
+        </template>
+      </div>
+
+      <!-- Live region for accessibility announcements -->
+      <div id="search-status" class="status-announcer" aria-live="polite" role="status" data-testid="status-announcer">
+        <span x-text="statusMessage"></span>
+      </div>
+
+      <!-- Results list -->
+      <div class="results-grid" data-testid="results-container">
+        <template x-for="org in results" :key="org.name">
+          <article class="card" data-testid="result-card">
+            <div class="card-header">
+              <a
+                :href="getOrgUrl(org.name)"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="org-link"
+                data-testid="org-link"
+              >
+                <span x-text="org.name"></span>
+                <span aria-hidden="true" style="font-size: 0.8em;">↗</span>
+              </a>
+              <span
+                class="match-score"
+                data-testid="match-score"
+                x-show="org.score !== undefined && org.score !== null"
+                x-text="formatScore(org.score)"
+              ></span>
+            </div>
+
+            <div class="categories-list" data-testid="categories-list" x-show="splitCategories(org.categories).length > 0">
+              <template x-for="cat in splitCategories(org.categories)" :key="cat">
+                <span class="category-tag" data-testid="category-chip" x-text="cat"></span>
+              </template>
+            </div>
+
+            <div class="categories visually-hidden" x-text="org.categories"></div>
+
+            <p class="org-summary" x-text="org.summary"></p>
+          </article>
+        </template>
+      </div>
+
+      <!-- Empty state when query produces no matches -->
+      <div
+        class="empty-state-container"
+        data-testid="empty-state"
+        x-show="hasSearched && !loading && results.length === 0"
+      >
+        <div class="zero-state-icon">🔍</div>
+        <h2 class="zero-state-title">No matching student organizations found</h2>
+        <p>Try searching with broader terms or exploring one of the suggested topics above.</p>
+      </div>
+
+      <!-- Initial zero state -->
+      <div
+        class="zero-state-container"
+        data-testid="zero-state"
+        x-show="!hasSearched && results.length === 0"
+      >
+        <div class="zero-state-icon">🏛️</div>
+        <h2 class="zero-state-title">Discover Wesleyan Organizations</h2>
+        <p>Enter keywords, skills, or passions above to find matching clubs via AI semantic search.</p>
+      </div>
+    </div>
+  </main>
 
   <script>
     function clubSearch() {
       return {
         query: '',
         results: [],
+        loading: false,
+        hasSearched: false,
+        suggestions: ['Robotics', 'Community Service', 'A Cappella', 'Debate', 'Coding', 'Film'],
+        statusMessage: '',
+
+        splitCategories(cats) {
+          if (!cats) return [];
+          return cats.split(',').map(c => c.trim()).filter(Boolean);
+        },
+
+        getOrgUrl(name) {
+          if (!name) return 'https://wesleyan.campuslabs.com/engage/organizations';
+          const slug = name
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+          return `https://wesleyan.campuslabs.com/engage/organization/${slug}`;
+        },
+
+        formatScore(score) {
+          if (score === undefined || score === null) return '';
+          const pct = Math.round(Number(score) * 100);
+          return `${pct}% match`;
+        },
+
+        applyQuery(text) {
+          this.query = text;
+          this.search();
+        },
+
+        clearSearch() {
+          this.query = '';
+          this.results = [];
+          this.hasSearched = false;
+          this.statusMessage = '';
+        },
+
         async search() {
-          if (!this.query.trim()) {
-            this.results = [];
+          const trimmed = this.query.trim();
+          if (!trimmed) {
+            this.clearSearch();
             return;
           }
-          const response = await fetch('/api/search', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query: this.query }),
-          });
-          const data = await response.json();
-          this.results = data.results ?? [];
+
+          this.loading = true;
+          this.statusMessage = 'Searching for clubs...';
+
+          try {
+            const response = await fetch('/api/search', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query: trimmed }),
+            });
+
+            if (!response.ok) {
+              throw new Error(`Search failed with status ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.results = data.results ?? [];
+            this.hasSearched = true;
+            this.statusMessage = `Found ${this.results.length} student organization${this.results.length === 1 ? '' : 's'}.`;
+          } catch (err) {
+            console.error('Search error:', err);
+            this.results = [];
+            this.hasSearched = true;
+            this.statusMessage = 'An error occurred while searching. Please try again.';
+          } finally {
+            this.loading = false;
+          }
         },
       };
     }
diff --git a/apps/wesnest-search/tests/frontend.spec.mjs b/apps/wesnest-search/tests/frontend.spec.mjs
index 30d47f2..ed0f21e 100644
--- a/apps/wesnest-search/tests/frontend.spec.mjs
+++ b/apps/wesnest-search/tests/frontend.spec.mjs
@@ -17,9 +17,76 @@ test('renders results after typing a query', async ({ page }) => {
   await page.fill('[data-testid="search-input"]', 'coding');
   await expect(page.locator('[data-testid="result-card"]')).toHaveCount(1);
   await expect(page.locator('[data-testid="result-card"]')).toContainText('Code_Wes');
+  await expect(page.locator('[data-testid="match-score"]')).toContainText('90% match');
+  await expect(page.locator('[data-testid="category-chip"]')).toHaveCount(2);
+
+  const orgLink = page.locator('[data-testid="org-link"]');
+  await expect(orgLink).toHaveAttribute('href', 'https://wesleyan.campuslabs.com/engage/organization/code-wes');
 });
 
 test('shows an empty state before any query', async ({ page }) => {
   await page.goto('/index.html');
   await expect(page.locator('[data-testid="result-card"]')).toHaveCount(0);
+  await expect(page.locator('[data-testid="zero-state"]')).toBeVisible();
+  await expect(page.locator('[data-testid="suggestion-chip"]')).toHaveCount(6);
+});
+
+test('clicking suggestion chip populates search and fetches results', async ({ page }) => {
+  await page.route('**/api/search', async (route) => {
+    const postData = JSON.parse(route.request().postData());
+    expect(postData.query).toBe('Robotics');
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        results: [
+          { name: 'Robotics Club', categories: 'STEM, Engineering', summary: 'Building autonomous robots.', score: 0.88 },
+        ],
+      }),
+    });
+  });
+
+  await page.goto('/index.html');
+  await page.locator('[data-testid="suggestion-chip"]:has-text("Robotics")').click();
+  await expect(page.locator('[data-testid="search-input"]')).toHaveValue('Robotics');
+  await expect(page.locator('[data-testid="result-card"]')).toHaveCount(1);
+  await expect(page.locator('[data-testid="status-announcer"]')).toContainText('Found 1 student organization');
+});
+
+test('clear button resets search query and results', async ({ page }) => {
+  await page.route('**/api/search', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        results: [
+          { name: 'Code_Wes', categories: 'Academic', summary: 'Club for coding.', score: 0.95 },
+        ],
+      }),
+    });
+  });
+
+  await page.goto('/index.html');
+  await page.fill('[data-testid="search-input"]', 'coding');
+  await expect(page.locator('[data-testid="result-card"]')).toHaveCount(1);
+
+  await page.locator('[data-testid="clear-search"]').click();
+  await expect(page.locator('[data-testid="search-input"]')).toHaveValue('');
+  await expect(page.locator('[data-testid="result-card"]')).toHaveCount(0);
+  await expect(page.locator('[data-testid="zero-state"]')).toBeVisible();
+});
+
+test('shows empty state when no results return', async ({ page }) => {
+  await page.route('**/api/search', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ results: [] }),
+    });
+  });
+
+  await page.goto('/index.html');
+  await page.fill('[data-testid="search-input"]', 'nonexistent club query xyz');
+  await expect(page.locator('[data-testid="empty-state"]')).toBeVisible();
+  await expect(page.locator('[data-testid="status-announcer"]')).toContainText('Found 0 student organizations');
 });