diff --git a/src/api/jobs.ts b/src/api/jobs.ts
index dbf48a6..a543a6a 100644
--- a/src/api/jobs.ts
+++ b/src/api/jobs.ts
@@ -1,60 +1,125 @@
-import api from '@/api/client'
+import api from "@/api/client";
 
 export interface Technology {
-  id: number
-  name: string
+  id: number;
+  name: string;
 }
 
 export interface Category {
-  id: number
-  name: string
-  slug: string
+  id: number;
+  name: string;
+  slug: string;
+}
+
+export interface Location {
+  id: number;
+  name: string;
+  slug: string;
 }
 
 export interface JobListing {
-  id: number
-  title: string
-  description: string | null
-  salary_range: string | null
-  work_type: 'remote' | 'onsite' | 'hybrid' | null
-  location: string | null
-  application_deadline: string | null
-  category: Category | null
-  technologies: Technology[]
+  id: number;
+  title: string;
+  description: string | null;
+  salary_range: string | null;
+  work_type: "remote" | "onsite" | "hybrid" | null;
+  location: string | null;
+  experience_level: "entry" | "mid" | "senior" | "lead" | null;
+  application_deadline: string | null;
+  created_at: string | null;
+  category: Category | null;
+  technologies: Technology[];
   employer: {
-    company_name: string
-    logo_url: string | null
-  }
+    company_name: string;
+    logo_url: string | null;
+  };
 }
 
 export interface JobDetail extends JobListing {
-  requirements: string | null
-  views_count: number
-  created_at: string | null
+  requirements: string | null;
+  views_count: number;
   employer: {
-    company_name: string
-    logo_url: string | null
-    bio: string | null
-    website: string | null
-  }
+    company_name: string;
+    logo_url: string | null;
+    bio: string | null;
+    website: string | null;
+  };
+}
+
+export interface JobFilters {
+  q?: string;
+  sort?: "newest" | "deadline";
+  page?: number;
+  per_page?: number;
+  experience_level?: "entry" | "mid" | "senior" | "lead";
+  location?: string;
+  work_type?: "remote" | "onsite" | "hybrid";
+  /** Category slug or numeric id as string */
+  category?: string;
+  /** ISO date string YYYY-MM-DD — filter jobs posted on/after this date */
+  date_from?: string;
+}
+
+export interface PaginatedJobsResponse {
+  data: JobListing[];
+  meta: {
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+  };
 }
 
-export async function fetchJobs(page = 1): Promise<{ data: JobListing[]; meta: { current_page: number; last_page: number; total: number } }> {
-  const { data } = await api.get('/v1/jobs', { params: { page } })
-  return data
+function buildParams(filters: JobFilters): Record<string, string | number> {
+  const params: Record<string, string | number> = {};
+  if (filters.q) params.q = filters.q;
+  if (filters.sort) params.sort = filters.sort;
+  if (filters.page) params.page = filters.page;
+  if (filters.per_page) params.per_page = filters.per_page;
+  if (filters.experience_level)
+    params.experience_level = filters.experience_level;
+  if (filters.location) params.location = filters.location;
+  if (filters.work_type) params.work_type = filters.work_type;
+  if (filters.category) params.category = filters.category;
+  if (filters.date_from) params.date_from = filters.date_from;
+  return params;
+}
+
+/** Fetch active jobs for the candidate home page (/v1/jobs) */
+export async function fetchJobs(
+  filters: JobFilters = {},
+): Promise<PaginatedJobsResponse> {
+  const { data } = await api.get("/v1/jobs", { params: buildParams(filters) });
+  return data;
+}
+
+/** Full search with all filters (/v1/search/jobs) */
+export async function fetchSearchJobs(
+  filters: JobFilters = {},
+): Promise<PaginatedJobsResponse> {
+  const { data } = await api.get("/v1/search/jobs", {
+    params: buildParams(filters),
+  });
+  return data;
 }
 
 export async function fetchJob(id: number): Promise<JobDetail> {
-  const { data } = await api.get(`/v1/jobs/${id}`)
-  return data.data
+  const { data } = await api.get(`/v1/jobs/${id}`);
+  return data.data;
 }
 
 export async function fetchCategories(): Promise<Category[]> {
-  const { data } = await api.get('/v1/categories')
-  return data.data
+  const { data } = await api.get("/v1/categories");
+  return data.data;
 }
 
 export async function fetchTechnologies(): Promise<Technology[]> {
-  const { data } = await api.get('/v1/technologies')
-  return data.data
+  const { data } = await api.get("/v1/technologies");
+  return data.data;
+}
+
+/** Location reference list for autocomplete (public, no auth required) */
+export async function fetchLocations(): Promise<Location[]> {
+  const { data } = await api.get("/v1/search/locations");
+  return data.data;
 }
diff --git a/src/components/search/ActiveFilters.vue b/src/components/search/ActiveFilters.vue
new file mode 100644
index 0000000..ef8d563
--- /dev/null
+++ b/src/components/search/ActiveFilters.vue
@@ -0,0 +1,159 @@
+<template>
+  <div v-if="chips.length > 0" class="active-filters" role="list">
+    <span class="active-filters__label">Active:</span>
+    <button
+      v-for="chip in chips"
+      :key="chip.key"
+      type="button"
+      class="filter-chip"
+      :aria-label="`Remove ${chip.label} filter`"
+      @click="chip.remove()"
+    >
+      {{ chip.label }}
+      <span class="material-symbols-outlined filter-chip__x">close</span>
+    </button>
+    <button
+      v-if="chips.length > 1"
+      type="button"
+      class="filter-chip filter-chip--clear-all"
+      @click="store.resetFilters()"
+    >
+      Clear all
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useSearchStore } from "@/stores/search";
+
+const store = useSearchStore();
+
+interface Chip {
+  key: string;
+  label: string;
+  remove: () => void;
+}
+
+const WORK_TYPE_LABELS: Record<string, string> = {
+  remote: "Remote",
+  onsite: "On-site",
+  hybrid: "Hybrid",
+};
+
+const EXPERIENCE_LABELS: Record<string, string> = {
+  entry: "Entry",
+  mid: "Mid",
+  senior: "Senior",
+  lead: "Lead",
+};
+
+const chips = computed<Chip[]>(() => {
+  const result: Chip[] = [];
+
+  if (store.query.trim()) {
+    result.push({
+      key: "q",
+      label: `"${store.query.trim()}"`,
+      remove: () => (store.query = ""),
+    });
+  }
+  if (store.filters.location) {
+    result.push({
+      key: "location",
+      label: `📍 ${store.filters.location}`,
+      remove: () => (store.filters.location = ""),
+    });
+  }
+  if (store.filters.work_type) {
+    result.push({
+      key: "work_type",
+      label:
+        WORK_TYPE_LABELS[store.filters.work_type] ?? store.filters.work_type,
+      remove: () => (store.filters.work_type = ""),
+    });
+  }
+  if (store.filters.experience_level) {
+    result.push({
+      key: "experience_level",
+      label:
+        EXPERIENCE_LABELS[store.filters.experience_level] ??
+        store.filters.experience_level,
+      remove: () => (store.filters.experience_level = ""),
+    });
+  }
+  if (store.filters.category) {
+    const cat = store.categories.find((c) => c.slug === store.filters.category);
+    result.push({
+      key: "category",
+      label: cat?.name ?? store.filters.category,
+      remove: () => (store.filters.category = ""),
+    });
+  }
+  if (store.filters.date_from) {
+    result.push({
+      key: "date_from",
+      label: `After ${store.filters.date_from}`,
+      remove: () => (store.filters.date_from = ""),
+    });
+  }
+
+  return result;
+});
+</script>
+
+<style scoped>
+.active-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.active-filters__label {
+  font-size: 0.78rem;
+  color: var(--on-surface-variant);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3rem 0.7rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 183, 125, 0.25);
+  background: rgba(255, 183, 125, 0.08);
+  color: var(--primary-dim);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.filter-chip:hover {
+  background: rgba(255, 183, 125, 0.18);
+  border-color: rgba(255, 183, 125, 0.45);
+}
+
+.filter-chip__x {
+  font-size: 0.85rem;
+  opacity: 0.7;
+}
+
+.filter-chip--clear-all {
+  border-color: rgba(255, 100, 100, 0.25);
+  background: rgba(255, 100, 100, 0.07);
+  color: rgba(255, 150, 150, 0.9);
+}
+
+.filter-chip--clear-all:hover {
+  background: rgba(255, 100, 100, 0.15);
+  border-color: rgba(255, 100, 100, 0.5);
+}
+</style>
diff --git a/src/components/search/FilterSection.vue b/src/components/search/FilterSection.vue
new file mode 100644
index 0000000..12e9766
--- /dev/null
+++ b/src/components/search/FilterSection.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="filter-section">
+    <button type="button" class="filter-section__toggle" @click="toggle">
+      <span class="filter-section__icon material-symbols-outlined">{{
+        icon
+      }}</span>
+      <span class="filter-section__title">{{ title }}</span>
+      <span class="filter-section__chevron material-symbols-outlined">
+        {{ open ? "expand_less" : "expand_more" }}
+      </span>
+    </button>
+    <div v-if="open" class="filter-section__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  icon: string;
+  open: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:open": [value: boolean];
+}>();
+
+function toggle() {
+  emit("update:open", !open);
+}
+</script>
+
+<style scoped>
+.filter-section {
+  border-top: 1px solid rgba(255, 183, 125, 0.07);
+}
+
+.filter-section__toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 0.7rem 0.25rem;
+  color: var(--on-surface);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.88rem;
+  font-weight: 500;
+  text-align: left;
+  transition: color 0.2s;
+}
+
+.filter-section__toggle:hover {
+  color: var(--primary-dim);
+}
+
+.filter-section__icon {
+  font-size: 1rem;
+  color: var(--on-surface-variant);
+}
+
+.filter-section__title {
+  flex: 1;
+}
+
+.filter-section__chevron {
+  font-size: 1.1rem;
+  color: var(--on-surface-variant);
+}
+
+.filter-section__body {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.25rem 0 0.75rem 0.25rem;
+}
+</style>
diff --git a/src/components/search/FilterSidebar.vue b/src/components/search/FilterSidebar.vue
new file mode 100644
index 0000000..8823ea7
--- /dev/null
+++ b/src/components/search/FilterSidebar.vue
@@ -0,0 +1,476 @@
+<template>
+  <aside class="filter-sidebar glass-panel">
+    <!-- ── Header ─────────────────────────────────────────── -->
+    <div class="sidebar-header">
+      <h2 class="sidebar-title">
+        <span class="material-symbols-outlined material-filled">tune</span>
+        Advanced Filters
+      </h2>
+      <button
+        type="button"
+        class="sidebar-close-btn"
+        @click="$emit('close')"
+        aria-label="Collapse filters"
+        title="Collapse sidebar"
+      >
+        <span class="material-symbols-outlined">chevron_left</span>
+      </button>
+    </div>
+
+    <!-- ── Keywords ──────────────────────────────────────── -->
+    <div class="filter-group">
+      <label class="filter-label">Keywords</label>
+      <div class="icon-field">
+        <span class="material-symbols-outlined icon-field__icon">search</span>
+        <input
+          v-model="store.query"
+          type="text"
+          placeholder="e.g. Vue, Laravel, React"
+          class="icon-field__input"
+          autocomplete="off"
+        />
+      </div>
+    </div>
+
+    <!-- ── Location ───────────────────────────────────────── -->
+    <div class="filter-group">
+      <label class="filter-label">Location</label>
+      <div class="icon-field">
+        <span class="material-symbols-outlined icon-field__icon"
+          >location_on</span
+        >
+        <input
+          v-model="store.filters.location"
+          type="text"
+          placeholder="City, State, or Remote"
+          class="icon-field__input"
+          list="loc-suggestions"
+          autocomplete="off"
+        />
+        <datalist id="loc-suggestions">
+          <option
+            v-for="loc in store.locations"
+            :key="loc.id"
+            :value="loc.name"
+          />
+        </datalist>
+      </div>
+    </div>
+
+    <!-- ── Work Type (checkbox-style radios) ──────────────── -->
+    <div class="filter-group">
+      <label class="filter-label">Work Type</label>
+      <div class="check-list">
+        <label
+          v-for="opt in WORK_TYPES"
+          :key="opt.value"
+          class="check-item"
+          :class="{
+            'check-item--active': store.filters.work_type === opt.value,
+          }"
+        >
+          <input
+            type="radio"
+            :name="'work_type'"
+            :value="opt.value"
+            v-model="store.filters.work_type"
+            class="check-input"
+          />
+          <span>{{ opt.label }}</span>
+        </label>
+        <label
+          class="check-item"
+          :class="{ 'check-item--active': !store.filters.work_type }"
+        >
+          <input
+            type="radio"
+            name="work_type"
+            value=""
+            v-model="store.filters.work_type"
+            class="check-input"
+          />
+          <span>Any</span>
+        </label>
+      </div>
+    </div>
+
+    <!-- ── Experience Level (pill chips) ──────────────────── -->
+    <div class="filter-group">
+      <label class="filter-label">Experience Level</label>
+      <div class="pill-list">
+        <button
+          v-for="opt in EXPERIENCE_LEVELS"
+          :key="opt.value"
+          type="button"
+          class="pill"
+          :class="{
+            'pill--active': store.filters.experience_level === opt.value,
+          }"
+          @click="
+            store.filters.experience_level =
+              store.filters.experience_level === opt.value ? '' : opt.value
+          "
+        >
+          {{ opt.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Date Posted (preset chips + date input) ─────────── -->
+    <div class="filter-group">
+      <label class="filter-label">Date Posted</label>
+      <div class="pill-list">
+        <button
+          v-for="preset in DATE_PRESETS"
+          :key="preset.label"
+          type="button"
+          class="pill"
+          :class="{ 'pill--active': store.filters.date_from === preset.value }"
+          @click="
+            store.filters.date_from =
+              store.filters.date_from === preset.value ? '' : preset.value
+          "
+        >
+          {{ preset.label }}
+        </button>
+      </div>
+      <input
+        type="date"
+        class="date-input"
+        v-model="store.filters.date_from"
+        :max="today"
+        title="Pick a date"
+      />
+    </div>
+
+    <!-- ── Category ───────────────────────────────────────── -->
+    <div v-if="store.categories.length > 0" class="filter-group">
+      <label class="filter-label">Category</label>
+      <div class="pill-list pill-list--wrap">
+        <button
+          v-for="cat in store.categories"
+          :key="cat.id"
+          type="button"
+          class="pill pill--mono"
+          :class="{ 'pill--active': store.filters.category === cat.slug }"
+          @click="
+            store.filters.category =
+              store.filters.category === cat.slug ? '' : cat.slug
+          "
+        >
+          {{ cat.name }}
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Reset button ───────────────────────────────────── -->
+    <button type="button" class="reset-btn" @click="store.resetFilters()">
+      Reset Filters
+    </button>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { useSearchStore } from "@/stores/search";
+
+defineEmits<{ close: [] }>();
+
+const store = useSearchStore();
+
+type WorkTypeValue = "" | "remote" | "hybrid" | "onsite";
+type ExperienceValue = "" | "entry" | "mid" | "senior" | "lead";
+
+const today = new Date().toISOString().slice(0, 10);
+
+const daysAgo = (n: number) =>
+  new Date(Date.now() - n * 86_400_000).toISOString().slice(0, 10);
+
+const DATE_PRESETS = [
+  { label: "Today", value: today },
+  { label: "Last 7d", value: daysAgo(7) },
+  { label: "Last 30d", value: daysAgo(30) },
+];
+
+const WORK_TYPES: Array<{ value: WorkTypeValue; label: string }> = [
+  { value: "remote", label: "Remote" },
+  { value: "hybrid", label: "Hybrid" },
+  { value: "onsite", label: "On-site" },
+];
+
+const EXPERIENCE_LEVELS: Array<{ value: ExperienceValue; label: string }> = [
+  { value: "entry", label: "Entry" },
+  { value: "mid", label: "Mid-Level" },
+  { value: "senior", label: "Senior" },
+  { value: "lead", label: "Lead/Staff" },
+];
+</script>
+
+<style scoped>
+/* ── Shell ────────────────────────────────────────────────── */
+.filter-sidebar {
+  border-radius: 1rem;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  overflow-y: auto;
+  max-height: calc(100vh - 6rem);
+}
+
+.filter-sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+.filter-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.filter-sidebar::-webkit-scrollbar-thumb {
+  background: #2e2e32;
+  border-radius: 4px;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.sidebar-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 1.1rem;
+  font-family: var(--font-display), serif;
+  color: var(--primary-dim);
+  font-weight: 600;
+}
+
+.sidebar-title .material-symbols-outlined {
+  font-size: 1.2rem;
+}
+
+.material-filled {
+  font-variation-settings: "FILL" 1;
+}
+
+.sidebar-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--on-surface-variant);
+  cursor: pointer;
+  opacity: 0.55;
+  transition:
+    opacity 0.2s,
+    color 0.2s,
+    background 0.2s;
+  flex-shrink: 0;
+}
+
+.sidebar-close-btn:hover {
+  opacity: 1;
+  color: var(--primary-dim);
+  background: rgba(255, 183, 125, 0.08);
+}
+
+.sidebar-close-btn .material-symbols-outlined {
+  font-size: 1.3rem;
+}
+
+/* ── Groups ───────────────────────────────────────────────── */
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.filter-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--on-surface-variant);
+}
+
+/* ── Icon fields (keywords + location) ───────────────────── */
+.icon-field {
+  position: relative;
+}
+
+.icon-field__icon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  color: var(--on-surface-variant);
+  pointer-events: none;
+}
+
+.icon-field__input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 9999px;
+  padding: 0.5rem 1rem 0.5rem 2.25rem;
+  color: var(--on-surface);
+  font: inherit;
+  font-size: 0.875rem;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+.icon-field__input:focus {
+  border-color: rgba(255, 220, 195, 0.5);
+  box-shadow: 0 0 0 2px rgba(255, 220, 195, 0.12);
+}
+
+.icon-field__input::placeholder {
+  color: rgba(221, 193, 174, 0.35);
+}
+
+/* ── Checkbox-style radio list ────────────────────────────── */
+.check-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.check-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--on-surface-variant);
+  transition: color 0.2s;
+}
+
+.check-item:hover {
+  color: var(--on-surface);
+}
+.check-item--active {
+  color: var(--on-surface);
+}
+
+.check-input {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1.5px solid rgba(255, 183, 125, 0.3);
+  border-radius: 3px;
+  background: rgba(18, 18, 20, 0.8);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.check-input:checked {
+  background: var(--primary-dim);
+  border-color: var(--primary-dim);
+}
+
+.check-input:checked::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 4px;
+  height: 7px;
+  border: 2px solid #2f1500;
+  border-top: none;
+  border-left: none;
+  transform: rotate(45deg);
+}
+
+/* ── Pill chips ───────────────────────────────────────────── */
+.pill-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.pill {
+  padding: 0.3rem 0.8rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(46, 46, 50, 0.8);
+  background: rgba(18, 18, 20, 0.6);
+  color: var(--on-surface-variant);
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    background 0.2s;
+}
+
+.pill:hover {
+  border-color: rgba(255, 183, 125, 0.4);
+  color: var(--primary-dim);
+}
+
+.pill--active {
+  background: rgba(255, 183, 125, 0.12);
+  border-color: rgba(255, 183, 125, 0.35);
+  color: var(--primary-dim);
+}
+
+.pill--mono {
+  font-size: 0.72rem;
+}
+
+/* ── Date input ───────────────────────────────────────────── */
+.date-input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.7rem;
+  color: var(--on-surface);
+  font: inherit;
+  font-size: 0.8rem;
+  outline: none;
+  color-scheme: dark;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.date-input:focus {
+  border-color: rgba(255, 183, 125, 0.4);
+}
+
+/* ── Reset button ─────────────────────────────────────────── */
+.reset-btn {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.07);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 9999px;
+  padding: 0.55rem 1rem;
+  color: var(--on-surface);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  margin-top: 0.25rem;
+  transition: background 0.2s;
+}
+
+.reset-btn:hover {
+  background: rgba(255, 255, 255, 0.13);
+}
+</style>
diff --git a/src/composables/useJobSearch.ts b/src/composables/useJobSearch.ts
new file mode 100644
index 0000000..8bac2ca
--- /dev/null
+++ b/src/composables/useJobSearch.ts
@@ -0,0 +1,90 @@
+import { watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useSearchStore } from "@/stores/search";
+
+/**
+ * Composable that wires the search store to URL query params.
+ * Supports shareable links — all filter state is reflected in the URL.
+ * Used by JobSearchView.vue.
+ */
+export function useJobSearch() {
+  const route = useRoute();
+  const router = useRouter();
+  const store = useSearchStore();
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // ── URL sync ──────────────────────────────────────────────────────────────
+
+  function syncToUrl() {
+    const q: Record<string, string> = {};
+    if (store.query.trim()) q.q = store.query.trim();
+    if (store.sort !== "newest") q.sort = store.sort;
+    if (store.filters.location) q.location = store.filters.location;
+    if (store.filters.work_type) q.work_type = store.filters.work_type;
+    if (store.filters.experience_level)
+      q.experience_level = store.filters.experience_level;
+    if (store.filters.category) q.category = store.filters.category;
+    if (store.filters.date_from) q.date_from = store.filters.date_from;
+    router.replace({ query: q });
+  }
+
+  function initFromUrl() {
+    const q = route.query;
+    store.query = (q.q as string) ?? "";
+    store.sort = q.sort === "deadline" ? "deadline" : "newest";
+    store.filters.location = (q.location as string) ?? "";
+    store.filters.work_type = ((q.work_type as string) ??
+      "") as typeof store.filters.work_type;
+    store.filters.experience_level = ((q.experience_level as string) ??
+      "") as typeof store.filters.experience_level;
+    store.filters.category = (q.category as string) ?? "";
+    store.filters.date_from = (q.date_from as string) ?? "";
+  }
+
+  // ── Scheduling ────────────────────────────────────────────────────────────
+
+  function scheduleSearch(page = 1) {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      syncToUrl();
+      store.loadJobs(page);
+    }, 350);
+  }
+
+  function goToPage(page: number) {
+    syncToUrl();
+    store.loadJobs(page);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  // ── Watchers ──────────────────────────────────────────────────────────────
+
+  watch(
+    () => store.query,
+    () => scheduleSearch(1),
+  );
+
+  watch(
+    () => store.sort,
+    () => {
+      syncToUrl();
+      store.loadJobs(1);
+    },
+  );
+
+  watch(
+    () => ({ ...store.filters }),
+    () => scheduleSearch(1),
+    { deep: true },
+  );
+
+  // ── Bootstrap ─────────────────────────────────────────────────────────────
+
+  onMounted(async () => {
+    initFromUrl();
+    await Promise.all([store.loadOptions(), store.loadJobs(1)]);
+  });
+
+  return { store, goToPage };
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index f9d8660..dd5df42 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,37 +23,58 @@ const router = createRouter({
       },
       meta: { requiresAuth: true, title: "Dashboard" },
     },
-    // Candidate home – job listings
+    // Candidate home – job listings with sidebar filters
     {
       path: "/jobs",
       name: "candidate-jobs",
       component: () => import("@/views/CandidateJobsView.vue"),
-      meta: { requiresAuth: true, role: "candidate" as UserRole, title: "Find Jobs" },
+      meta: {
+        requiresAuth: true,
+        role: "candidate" as UserRole,
+        title: "Find Jobs",
+      },
     },
     {
       path: "/jobs/:jobId",
       name: "job-detail",
       component: () => import("@/views/jobs/JobDetailView.vue"),
-      meta: { requiresAuth: true, role: "candidate" as UserRole, title: "Job Detail" },
+      meta: {
+        requiresAuth: true,
+        role: "candidate" as UserRole,
+        title: "Job Detail",
+      },
       props: true,
     },
     {
       path: "/jobs/:jobId/apply",
       name: "candidate-apply",
       component: () => import("@/views/candidate/ApplyView.vue"),
-      meta: { requiresAuth: true, role: "candidate" as UserRole, title: "Apply" },
+      meta: {
+        requiresAuth: true,
+        role: "candidate" as UserRole,
+        title: "Apply",
+      },
     },
     {
       path: "/applications/:applicationId",
       name: "candidate-application-detail",
-      component: () => import("@/views/candidate/CandidateApplicationDetailView.vue"),
-      meta: { requiresAuth: true, role: "candidate" as UserRole, title: "Application Detail" },
+      component: () =>
+        import("@/views/candidate/CandidateApplicationDetailView.vue"),
+      meta: {
+        requiresAuth: true,
+        role: "candidate" as UserRole,
+        title: "Application Detail",
+      },
     },
     {
       path: "/applications",
       name: "candidate-applications",
       component: () => import("@/views/candidate/ApplicationsView.vue"),
-      meta: { requiresAuth: true, role: "candidate" as UserRole, title: "My Applications" },
+      meta: {
+        requiresAuth: true,
+        role: "candidate" as UserRole,
+        title: "My Applications",
+      },
     },
     {
       path: "/profile/edit",
@@ -155,19 +176,31 @@ const router = createRouter({
       path: "/employer/jobs",
       name: "employer-jobs",
       component: () => import("@/views/employer/EmployerJobsView.vue"),
-      meta: { requiresAuth: true, role: "employer" as UserRole, title: "My Jobs" },
+      meta: {
+        requiresAuth: true,
+        role: "employer" as UserRole,
+        title: "My Jobs",
+      },
     },
     {
       path: "/employer/jobs/create",
       name: "employer-job-create",
       component: () => import("@/views/employer/CreateJobView.vue"),
-      meta: { requiresAuth: true, role: "employer" as UserRole, title: "Post New Job" },
+      meta: {
+        requiresAuth: true,
+        role: "employer" as UserRole,
+        title: "Post New Job",
+      },
     },
     {
       path: "/employer/jobs/:jobId/edit",
       name: "employer-job-edit",
       component: () => import("@/views/employer/EditJobView.vue"),
-      meta: { requiresAuth: true, role: "employer" as UserRole, title: "Edit Job" },
+      meta: {
+        requiresAuth: true,
+        role: "employer" as UserRole,
+        title: "Edit Job",
+      },
       props: true,
     },
     {
diff --git a/src/stores/search.ts b/src/stores/search.ts
new file mode 100644
index 0000000..7c136e8
--- /dev/null
+++ b/src/stores/search.ts
@@ -0,0 +1,101 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { fetchSearchJobs, fetchCategories, fetchLocations } from "@/api/jobs";
+import type { JobListing, Category, Location, JobFilters } from "@/api/jobs";
+
+export interface SearchFilters {
+  location: string;
+  work_type: "remote" | "onsite" | "hybrid" | "";
+  experience_level: "entry" | "mid" | "senior" | "lead" | "";
+  /** Category slug */
+  category: string;
+  /** YYYY-MM-DD */
+  date_from: string;
+}
+
+const EMPTY_FILTERS: SearchFilters = {
+  location: "",
+  work_type: "",
+  experience_level: "",
+  category: "",
+  date_from: "",
+};
+
+export const useSearchStore = defineStore("search", () => {
+  const query = ref("");
+  const sort = ref<"newest" | "deadline">("newest");
+  const filters = ref<SearchFilters>({ ...EMPTY_FILTERS });
+
+  const jobs = ref<JobListing[]>([]);
+  const meta = ref({ current_page: 1, last_page: 1, per_page: 20, total: 0 });
+  const isLoading = ref(false);
+
+  const categories = ref<Category[]>([]);
+  const locations = ref<Location[]>([]);
+  const optionsLoaded = ref(false);
+
+  const activeFilterCount = computed(
+    () => Object.values(filters.value).filter(Boolean).length,
+  );
+  const hasActiveFilters = computed(
+    () => activeFilterCount.value > 0 || !!query.value.trim(),
+  );
+
+  async function loadJobs(page = 1) {
+    isLoading.value = true;
+    try {
+      const params: JobFilters = {
+        page,
+        sort: sort.value,
+        q: query.value.trim() || undefined,
+        experience_level:
+          (filters.value.experience_level as JobFilters["experience_level"]) ||
+          undefined,
+        location: filters.value.location || undefined,
+        work_type:
+          (filters.value.work_type as JobFilters["work_type"]) || undefined,
+        category: filters.value.category || undefined,
+        date_from: filters.value.date_from || undefined,
+      };
+      const res = await fetchSearchJobs(params);
+      jobs.value = res.data;
+      meta.value = res.meta;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  async function loadOptions() {
+    if (optionsLoaded.value) return;
+    const [cats, locs] = await Promise.all([
+      fetchCategories(),
+      fetchLocations(),
+    ]);
+    categories.value = cats;
+    locations.value = locs;
+    optionsLoaded.value = true;
+  }
+
+  function resetFilters() {
+    filters.value = { ...EMPTY_FILTERS };
+    query.value = "";
+    sort.value = "newest";
+  }
+
+  return {
+    query,
+    sort,
+    filters,
+    jobs,
+    meta,
+    isLoading,
+    categories,
+    locations,
+    optionsLoaded,
+    activeFilterCount,
+    hasActiveFilters,
+    loadJobs,
+    loadOptions,
+    resetFilters,
+  };
+});
diff --git a/src/views/CandidateJobsView.vue b/src/views/CandidateJobsView.vue
index d900c50..1a9cb1f 100644
--- a/src/views/CandidateJobsView.vue
+++ b/src/views/CandidateJobsView.vue
@@ -1,279 +1,562 @@
 <template>
   <AppLayout>
     <div class="jobs-page">
-      <!-- Page header -->
+      <!-- ── Page header ───────────────────────────────────────── -->
       <div class="jobs-header">
-        <div class="jobs-header__copy">
-          <p class="jobs-kicker">Matched for you</p>
-          <h1>Find Your Next Role</h1>
-          <p class="jobs-subtitle">
-            Explore technical opportunities tailored to your profile and skills.
-          </p>
+        <div>
+          <p class="jobs-kicker">Explore Opportunities</p>
+          <h1>Job Search</h1>
         </div>
-        <div class="jobs-header__stats">
-          <div class="stat-chip glass-panel">
-            <span class="material-symbols-outlined">work</span>
-            <div>
-              <p class="stat-chip__value">{{ jobs.length }}</p>
-              <p class="stat-chip__label">Open Roles</p>
-            </div>
+        <div class="jobs-header__right">
+          <p class="jobs-count">
+            Showing
+            <strong>{{ store.meta.total }}</strong> result{{
+              store.meta.total !== 1 ? "s" : ""
+            }}
+            <template v-if="store.query.trim()">
+              for <em>"{{ store.query.trim() }}"</em>
+            </template>
+          </p>
+          <div class="jobs-sort">
+            <span class="sort-label">Sort by:</span>
+            <select v-model="store.sort" aria-label="Sort results">
+              <option value="newest">Newest</option>
+              <option value="deadline">Deadline</option>
+            </select>
           </div>
         </div>
       </div>
 
-      <!-- Search -->
-      <section class="jobs-search glass-panel" aria-label="Search jobs">
-        <div class="jobs-search__field">
-          <span class="material-symbols-outlined">search</span>
-          <input
-            v-model="searchQuery"
-            type="text"
-            placeholder="Search by title or company…"
-            id="jobs-search-input"
-          />
-        </div>
-      </section>
-
-      <!-- Loading -->
-      <div v-if="isLoading" class="jobs-loading">Loading…</div>
+      <!-- ── Active filter chips ───────────────────────────────── -->
+      <ActiveFilters />
 
-      <!-- Job list -->
-      <section v-else class="jobs-list" aria-label="Job listings">
+      <!-- ── Body: sidebar + results ──────────────────────────── -->
+      <div class="jobs-body">
+        <!-- ── Sidebar rail (desktop collapsible) ─────────────── -->
         <div
-          v-for="job in filteredJobs"
-          :key="job.id"
-          class="job-card glass-panel"
-          @click="router.push({ name: 'job-detail', params: { jobId: job.id } })"
-          style="cursor: pointer;"
+          class="sidebar-rail"
+          :class="{
+            'sidebar-rail--closed': !sidebarOpen,
+            'sidebar-rail--mobile-open': sidebarOpen,
+          }"
         >
-          <div class="job-card__logo">
-            <img
-              v-if="job.employer.logo_url"
-              :src="job.employer.logo_url"
-              :alt="job.employer.company_name"
-              class="job-card__logo-img"
-            />
-            <span v-else>{{ job.employer.company_name.charAt(0) }}</span>
+          <aside class="jobs-sidebar" aria-label="Filter sidebar">
+            <FilterSidebar @close="sidebarOpen = false" />
+          </aside>
+        </div>
+
+        <!-- ── Mobile toggle (shown only on mobile) ─────────────── -->
+        <button
+          type="button"
+          class="sidebar-toggle glass-panel"
+          :class="{ 'sidebar-toggle--open': sidebarOpen }"
+          @click="sidebarOpen = !sidebarOpen"
+          :aria-expanded="sidebarOpen"
+        >
+          <span class="material-symbols-outlined">tune</span>
+          Filters
+          <span
+            v-if="store.activeFilterCount > 0 || store.query"
+            class="filter-badge"
+            >{{ store.activeFilterCount + (store.query ? 1 : 0) }}</span
+          >
+        </button>
+
+        <!-- Results -->
+        <section class="jobs-results" aria-label="Job listings">
+          <!-- Desktop: show-filters button when sidebar is closed -->
+          <button
+            type="button"
+            class="show-filters-btn"
+            :class="{ 'show-filters-btn--visible': !sidebarOpen }"
+            @click="sidebarOpen = true"
+            aria-label="Show filters"
+            title="Expand sidebar"
+          >
+            <span class="material-symbols-outlined">tune</span>
+            <span>Filters</span>
+            <span
+              v-if="store.activeFilterCount > 0 || store.query"
+              class="filter-badge"
+              >{{ store.activeFilterCount + (store.query ? 1 : 0) }}</span
+            >
+          </button>
+          <!-- Loading skeleton -->
+          <div v-if="store.isLoading" class="jobs-skeletons">
+            <div v-for="n in 5" :key="n" class="skeleton-card glass-panel" />
           </div>
 
-          <div class="job-card__body">
-            <div class="job-card__top">
-              <div>
-                <h2 class="job-card__title">{{ job.title }}</h2>
-                <p class="job-card__company">{{ job.employer.company_name }}</p>
+          <template v-else>
+            <!-- Job cards -->
+            <div v-if="store.jobs.length > 0" class="job-list">
+              <div
+                v-for="job in store.jobs"
+                :key="job.id"
+                class="job-card glass-panel"
+              >
+                <!-- Top row: logo + info + bookmark placeholder -->
+                <div class="job-card__top">
+                  <div
+                    class="job-card__logo"
+                    @click="goToDetail(job.id)"
+                    style="cursor: pointer"
+                  >
+                    <img
+                      v-if="job.employer.logo_url"
+                      :src="job.employer.logo_url"
+                      :alt="job.employer.company_name"
+                      class="job-card__logo-img"
+                    />
+                    <span v-else class="job-card__logo-initial">{{
+                      job.employer.company_name.charAt(0)
+                    }}</span>
+                  </div>
+
+                  <div
+                    class="job-card__info"
+                    @click="goToDetail(job.id)"
+                    style="cursor: pointer"
+                  >
+                    <h3 class="job-card__title">{{ job.title }}</h3>
+                    <div class="job-card__meta-row">
+                      <span class="job-card__company">{{
+                        job.employer.company_name
+                      }}</span>
+                      <span v-if="job.location" class="job-card__meta-item">
+                        <span class="material-symbols-outlined"
+                          >location_on</span
+                        >
+                        {{ job.location }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Badges row -->
+                <div class="job-card__badges">
+                  <span
+                    v-if="job.work_type"
+                    class="badge badge--work"
+                    :class="`badge--${job.work_type}`"
+                  >
+                    {{ job.work_type }}
+                  </span>
+                  <span v-if="job.experience_level" class="badge badge--exp">
+                    {{ job.experience_level }}
+                  </span>
+                  <span v-if="job.salary_range" class="badge badge--salary">
+                    <span class="material-symbols-outlined">payments</span>
+                    {{ job.salary_range }}
+                  </span>
+                </div>
+
+                <!-- Description snippet -->
+                <p
+                  v-if="job.description"
+                  class="job-card__desc"
+                  @click="goToDetail(job.id)"
+                  style="cursor: pointer"
+                >
+                  {{ job.description }}
+                </p>
+
+                <!-- Bottom row: tags + action -->
+                <div class="job-card__footer">
+                  <div class="job-card__tags">
+                    <span v-if="job.category" class="tag">{{
+                      job.category.name
+                    }}</span>
+                    <span
+                      v-if="job.application_deadline"
+                      class="tag tag--deadline"
+                    >
+                      <span class="material-symbols-outlined">event</span>
+                      {{ job.application_deadline }}
+                    </span>
+                  </div>
+                  <div class="job-card__action">
+                    <button
+                      v-if="!applicationsStore.appliedJobIds.has(job.id)"
+                      type="button"
+                      class="apply-btn"
+                      @click.stop="openApply(job)"
+                    >
+                      Apply Now
+                    </button>
+                    <span v-else class="applied-label">Applied ✓</span>
+                  </div>
+                </div>
               </div>
             </div>
 
-            <div class="job-card__footer">
-              <span v-if="job.application_deadline" class="job-card__date">
-                Deadline: {{ job.application_deadline }}
-              </span>
-              <div class="job-card__meta">
+            <!-- Empty state -->
+            <div v-else class="jobs-empty glass-panel">
+              <span class="material-symbols-outlined">search_off</span>
+              <h3>No matching roles found</h3>
+              <p>Try adjusting your filters or search term.</p>
+              <button
+                v-if="store.hasActiveFilters"
+                type="button"
+                class="reset-btn"
+                @click="store.resetFilters()"
+              >
+                Clear filters
+              </button>
+            </div>
+
+            <!-- Pagination -->
+            <nav
+              v-if="store.meta.last_page > 1"
+              class="jobs-pagination"
+              aria-label="Pagination"
+            >
+              <button
+                class="page-btn"
+                :disabled="store.meta.current_page === 1"
+                @click="goToPage(store.meta.current_page - 1)"
+                aria-label="Previous page"
+              >
+                <span class="material-symbols-outlined">chevron_left</span>
+              </button>
+
+              <template v-for="item in visiblePages" :key="item">
+                <span v-if="item === '...'" class="page-ellipsis">…</span>
                 <button
-                  v-if="!applicationsStore.appliedJobIds.has(job.id)"
-                  type="button"
-                  class="apply-btn"
-                  :id="`apply-job-${job.id}`"
-                  @click="openApplyPage(job)"
+                  v-else
+                  class="page-btn page-btn--num"
+                  :class="{
+                    'page-btn--active': item === store.meta.current_page,
+                  }"
+                  @click="goToPage(item as number)"
+                  :aria-current="
+                    item === store.meta.current_page ? 'page' : undefined
+                  "
                 >
-                  Apply Now
+                  {{ item }}
                 </button>
-                <span v-else class="applied-label">Applied</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Empty state -->
-        <div v-if="filteredJobs.length === 0" class="jobs-empty glass-panel">
-          <span class="material-symbols-outlined">search_off</span>
-          <h3>No matching roles found</h3>
-          <p>Try adjusting your search criteria.</p>
-        </div>
-      </section>
+              </template>
+
+              <button
+                class="page-btn"
+                :disabled="store.meta.current_page === store.meta.last_page"
+                @click="goToPage(store.meta.current_page + 1)"
+                aria-label="Next page"
+              >
+                <span class="material-symbols-outlined">chevron_right</span>
+              </button>
+            </nav>
+          </template>
+        </section>
+      </div>
     </div>
   </AppLayout>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import AppLayout from '@/layouts/AppLayout.vue'
-import { useApplicationsStore } from '@/stores/applications'
-import { fetchJobs } from '@/api/jobs'
-import type { JobListing } from '@/api/jobs'
-
-const router = useRouter()
-const applicationsStore = useApplicationsStore()
-
-const searchQuery = ref('')
-const jobs = ref<JobListing[]>([])
-const isLoading = ref(true)
-
-function openApplyPage(job: JobListing) {
-  router.push({ path: `/jobs/${job.id}/apply`, state: { jobTitle: job.title, jobCompany: job.employer.company_name } })
-}
-
-onMounted(async () => {
-  await Promise.all([
-    fetchJobs().then((res) => { jobs.value = res.data }),
-    applicationsStore.fetchMyApplications(),
-  ])
-  isLoading.value = false
-})
-
-const filteredJobs = computed(() => {
-  const q = searchQuery.value.toLowerCase()
-  if (!q) return jobs.value
-  return jobs.value.filter(
-    (job) =>
-      job.title.toLowerCase().includes(q) ||
-      job.employer.company_name.toLowerCase().includes(q),
-  )
-})
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import AppLayout from "@/layouts/AppLayout.vue";
+import FilterSidebar from "@/components/search/FilterSidebar.vue";
+import ActiveFilters from "@/components/search/ActiveFilters.vue";
+import { useJobSearch } from "@/composables/useJobSearch";
+import { useApplicationsStore } from "@/stores/applications";
+import type { JobListing } from "@/api/jobs";
+
+const router = useRouter();
+const applicationsStore = useApplicationsStore();
+const sidebarOpen = ref(true);
+const { store, goToPage } = useJobSearch();
+
+function goToDetail(jobId: number) {
+  router.push({ name: "job-detail", params: { jobId } });
+}
+
+function openApply(job: JobListing) {
+  router.push({
+    path: `/jobs/${job.id}/apply`,
+    state: { jobTitle: job.title, jobCompany: job.employer.company_name },
+  });
+}
+
+/** Build a smart page list: 1 2 3 ... 12  or  1 ... 4 5 6 ... 12 */
+const visiblePages = computed<(number | "...")[]>(() => {
+  const total = store.meta.last_page;
+  const cur = store.meta.current_page;
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages: (number | "...")[] = [];
+  const add = (n: number | "...") => pages.push(n);
+  add(1);
+  if (cur > 3) add("...");
+  for (let p = Math.max(2, cur - 1); p <= Math.min(total - 1, cur + 1); p++) {
+    add(p);
+  }
+  if (cur < total - 2) add("...");
+  add(total);
+  return pages;
+});
 </script>
 
 <style scoped>
+/* ── Layout ─────────────────────────────────────────────── */
 .jobs-page {
   display: grid;
-  gap: 1.75rem;
+  gap: 1.25rem;
 }
 
 .jobs-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 1.5rem;
+  gap: 1rem;
   flex-wrap: wrap;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid rgba(255, 183, 125, 0.12);
 }
 
 .jobs-kicker {
-  margin: 0 0 0.4rem;
+  margin: 0 0 0.3rem;
   color: var(--primary-dim);
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
 }
 
 .jobs-header h1 {
-  margin: 0 0 0.5rem;
+  margin: 0;
   font-family: var(--font-display), serif;
-  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
   color: var(--on-surface);
 }
 
-.jobs-subtitle {
+.jobs-header__right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
+.jobs-count {
   margin: 0;
+  font-size: 0.88rem;
   color: var(--on-surface-variant);
-  font-size: 1rem;
-  line-height: 1.6;
 }
 
-.stat-chip {
+.jobs-count strong {
+  color: var(--primary-dim);
+  font-weight: 700;
+}
+
+.jobs-count em {
+  color: var(--on-surface);
+  font-style: italic;
+}
+
+.jobs-sort {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.85rem 1.25rem;
-  border-radius: 1rem;
+  gap: 0.5rem;
 }
 
-.stat-chip .material-symbols-outlined {
-  font-size: 1.6rem;
-  color: var(--primary-dim);
+.sort-label {
+  font-size: 0.78rem;
+  color: var(--on-surface-variant);
 }
 
-.stat-chip__value {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: 700;
+.jobs-sort select {
+  background: rgba(26, 26, 28, 0.8);
+  border: 1px solid rgba(255, 183, 125, 0.18);
+  border-radius: 9999px;
   color: var(--on-surface);
-  font-family: var(--font-display), serif;
+  font: inherit;
+  font-size: 0.82rem;
+  padding: 0.3rem 0.8rem;
+  cursor: pointer;
+  outline: none;
 }
 
-.stat-chip__label {
-  margin: 0;
-  font-size: 0.75rem;
-  color: var(--on-surface-variant);
+.jobs-sort select option {
+  background: #1a1a1c;
 }
 
-.glass-panel {
-  background: rgba(26, 26, 28, 0.6);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 183, 125, 0.15);
-  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+/* ── Body two-column ────────────────────────────────────── */
+.jobs-body {
+  display: flex;
+  align-items: start;
+  gap: 1.5rem;
 }
 
-.jobs-search {
-  border-radius: 9999px;
-  padding: 0.4rem;
+/* ── Sidebar rail: collapsible wrapper ──────────────────── */
+.sidebar-rail {
+  flex-shrink: 0;
+  width: 272px;
+  overflow: hidden;
+  transition: width 0.35s ease;
+  position: sticky;
+  top: 5.5rem;
 }
 
-.jobs-search__field {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.9rem 1.25rem;
+.sidebar-rail--closed {
+  width: 0;
 }
 
-.jobs-search__field .material-symbols-outlined {
+/* ── Show-filters button (desktop, results side) ─────────── */
+.show-filters-btn {
+  display: none;
+  align-items: center;
+  gap: 0.45rem;
+  background: rgba(26, 26, 28, 0.6);
+  border: 1px solid rgba(255, 183, 125, 0.18);
+  border-radius: 9999px;
   color: var(--on-surface-variant);
-  font-size: 1.2rem;
-  flex-shrink: 0;
+  font: inherit;
+  font-size: 0.82rem;
+  padding: 0.4rem 1rem;
+  cursor: pointer;
+  margin-bottom: 1rem;
+  transition:
+    border-color 0.2s,
+    color 0.2s;
 }
 
-.jobs-search__field input {
-  width: 100%;
-  background: transparent;
+.show-filters-btn:hover {
+  border-color: rgba(255, 183, 125, 0.4);
+  color: var(--primary-dim);
+}
+
+.show-filters-btn--visible {
+  display: flex;
+}
+
+/* Mobile sidebar toggle — hidden on desktop */
+.sidebar-toggle {
+  display: none;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1.1rem;
   border: none;
-  color: var(--on-surface);
-  outline: none;
+  border-radius: 9999px;
+  color: var(--on-surface-variant);
   font: inherit;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+  width: fit-content;
 }
 
-.jobs-search__field input::placeholder {
-  color: rgba(221, 193, 174, 0.45);
+.sidebar-toggle .material-symbols-outlined {
+  font-size: 1.1rem;
+  color: var(--primary-dim);
 }
 
-.jobs-loading {
-  color: var(--on-surface-variant);
-  text-align: center;
-  padding: 3rem;
+.filter-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: var(--primary-dim);
+  color: #2f1500;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+/* .jobs-sidebar — no sticky here; the .sidebar-rail wrapper is sticky */
+
+.jobs-results {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 1rem;
+  align-content: start;
 }
 
-.jobs-list {
+/* ── Skeleton loading ───────────────────────────────────── */
+.jobs-skeletons {
+  display: grid;
+  gap: 1rem;
+}
+
+.skeleton-card {
+  height: 160px;
+  border-radius: 1.25rem;
+  animation: skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* ── Job cards ──────────────────────────────────────────── */
+.job-list {
   display: grid;
   gap: 1rem;
 }
 
 .job-card {
-  display: flex;
-  gap: 1.25rem;
   padding: 1.5rem;
   border-radius: 1.25rem;
-  align-items: flex-start;
-  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
+  display: grid;
+  gap: 0.85rem;
+  transition:
+    border-color 0.25s,
+    box-shadow 0.25s,
+    transform 0.2s;
+  position: relative;
+  overflow: hidden;
+}
+
+.job-card::before {
+  content: "";
+  position: absolute;
+  top: -2rem;
+  right: -2rem;
+  width: 7rem;
+  height: 7rem;
+  background: rgba(255, 183, 125, 0.04);
+  border-radius: 9999px;
+  pointer-events: none;
+  transition: background 0.25s;
 }
 
 .job-card:hover {
   border-color: rgba(255, 183, 125, 0.3);
+  box-shadow: 0 0 20px rgba(255, 183, 125, 0.1);
   transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 183, 125, 0.08);
+}
+
+.job-card:hover::before {
+  background: rgba(255, 183, 125, 0.1);
+}
+
+.glass-panel {
+  background: rgba(26, 26, 28, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 183, 125, 0.15);
+}
+
+/* Card top row */
+.job-card__top {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
 }
 
 .job-card__logo {
   flex-shrink: 0;
-  width: 3.25rem;
-  height: 3.25rem;
-  border-radius: 0.9rem;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.75rem;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(255, 255, 255, 0.04);
   display: grid;
   place-items: center;
-  font-family: var(--font-display), serif;
-  font-size: 1.35rem;
-  color: var(--on-surface);
   overflow: hidden;
 }
 
@@ -281,87 +564,202 @@ const filteredJobs = computed(() => {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  opacity: 0.85;
 }
 
-.job-card__body {
-  flex: 1;
-  min-width: 0;
-  display: grid;
-  gap: 0.75rem;
+.job-card__logo-initial {
+  font-family: var(--font-display), serif;
+  font-size: 1.2rem;
+  color: var(--on-surface);
 }
 
-.job-card__top {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
+.job-card__info {
+  flex: 1;
+  min-width: 0;
 }
 
 .job-card__title {
-  margin: 0;
+  margin: 0 0 0.25rem;
   font-family: var(--font-display), serif;
-  font-size: 1.1rem;
+  font-size: 1.05rem;
   color: var(--on-surface);
+  transition: color 0.2s;
+}
+
+.job-card:hover .job-card__title {
+  color: var(--primary-dim);
+}
+
+.job-card__meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
 }
 
 .job-card__company {
-  margin: 0.2rem 0 0;
   font-size: 0.88rem;
+  font-weight: 500;
   color: var(--on-surface-variant);
 }
 
-.job-card__footer {
+.job-card__meta-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
+  gap: 0.2rem;
+  font-size: 0.8rem;
+  color: var(--on-surface-variant);
+}
+
+.job-card__meta-item .material-symbols-outlined {
+  font-size: 0.95rem;
+}
+
+/* Badges */
+.job-card__badges {
+  display: flex;
   flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-.job-card__date {
-  font-size: 0.8rem;
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid;
+}
+
+.badge--remote {
+  background: rgba(134, 239, 172, 0.08);
+  border-color: rgba(134, 239, 172, 0.25);
+  color: #86efac;
+}
+
+.badge--onsite {
+  background: rgba(147, 197, 253, 0.08);
+  border-color: rgba(147, 197, 253, 0.25);
+  color: #93c5fd;
+}
+
+.badge--hybrid {
+  background: rgba(196, 181, 253, 0.08);
+  border-color: rgba(196, 181, 253, 0.25);
+  color: #c4b5fd;
+}
+
+.badge--work {
+  text-transform: capitalize;
+}
+
+.badge--exp {
+  background: rgba(255, 183, 125, 0.08);
+  border-color: rgba(255, 183, 125, 0.2);
+  color: var(--primary-dim);
+  text-transform: capitalize;
+}
+
+.badge--salary {
+  background: transparent;
+  border-color: rgba(255, 183, 125, 0.18);
+  color: var(--on-surface-variant);
+  font-family: monospace;
+}
+
+.badge--salary .material-symbols-outlined {
+  font-size: 0.9rem;
+}
+
+/* Description */
+.job-card__desc {
+  margin: 0;
+  font-size: 0.85rem;
   color: var(--on-surface-variant);
+  line-height: 1.55;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.job-card__meta {
+/* Footer */
+.job-card__footer {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
+  padding-top: 0.85rem;
+  border-top: 1px solid rgba(255, 183, 125, 0.08);
+}
+
+.job-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.tag {
+  padding: 0.2rem 0.6rem;
+  border-radius: 0.35rem;
+  font-size: 0.72rem;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  color: var(--on-surface-variant);
+}
+
+.tag--deadline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.tag--deadline .material-symbols-outlined {
+  font-size: 0.8rem;
+}
+
+.job-card__action {
   flex-shrink: 0;
 }
 
 .apply-btn {
-  padding: 0.55rem 1.2rem;
+  padding: 0.5rem 1.25rem;
   border-radius: 9999px;
-  border: 1px solid rgba(255, 183, 125, 0.25);
-  background: rgba(255, 183, 125, 0.08);
-  color: var(--primary-dim);
+  border: none;
+  background: var(--primary-dim);
+  color: #2f1500;
   font: inherit;
-  font-size: 0.85rem;
-  font-weight: 600;
+  font-size: 0.82rem;
+  font-weight: 700;
   cursor: pointer;
-  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+  box-shadow: 0 0 10px rgba(255, 183, 125, 0.2);
+  transition:
+    background 0.2s,
+    box-shadow 0.2s,
+    transform 0.15s;
 }
 
 .apply-btn:hover {
-  background: rgba(255, 183, 125, 0.18);
-  border-color: rgba(255, 183, 125, 0.45);
+  background: #ffcca0;
+  box-shadow: 0 0 18px rgba(255, 183, 125, 0.35);
   transform: translateY(-1px);
 }
 
 .applied-label {
-  padding: 0.55rem 1.2rem;
+  padding: 0.5rem 1.25rem;
   border-radius: 9999px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--on-surface-variant);
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   font-weight: 600;
   opacity: 0.6;
-  cursor: default;
 }
 
+/* ── Empty state ────────────────────────────────────────── */
 .jobs-empty {
   display: grid;
   place-items: center;
@@ -386,4 +784,115 @@ const filteredJobs = computed(() => {
   margin: 0;
   color: var(--on-surface-variant);
 }
+
+.reset-btn {
+  padding: 0.5rem 1.25rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 183, 125, 0.25);
+  background: rgba(255, 183, 125, 0.08);
+  color: var(--primary-dim);
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.reset-btn:hover {
+  background: rgba(255, 183, 125, 0.16);
+  border-color: rgba(255, 183, 125, 0.4);
+}
+
+/* ── Pagination ─────────────────────────────────────────── */
+.jobs-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding-top: 0.5rem;
+}
+
+.page-btn {
+  display: grid;
+  place-items: center;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 183, 125, 0.2);
+  background: transparent;
+  color: var(--on-surface-variant);
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s,
+    color 0.2s;
+}
+
+.page-btn:hover:not(:disabled) {
+  border-color: rgba(255, 183, 125, 0.45);
+  color: var(--primary-dim);
+  background: rgba(255, 183, 125, 0.06);
+}
+
+.page-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.page-btn--num {
+  font-family: monospace;
+}
+
+.page-btn--active {
+  background: rgba(255, 183, 125, 0.15);
+  border-color: rgba(255, 183, 125, 0.5);
+  color: var(--primary-dim);
+  font-weight: 700;
+}
+
+.page-ellipsis {
+  padding: 0 0.25rem;
+  color: var(--on-surface-variant);
+  user-select: none;
+}
+
+/* ── Responsive ─────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .jobs-body {
+    flex-direction: column;
+  }
+
+  /* hide the desktop rail by default on mobile */
+  .sidebar-rail {
+    display: none;
+    width: auto !important;
+    overflow: visible;
+    position: static;
+  }
+
+  /* show when mobile toggle opens it */
+  .sidebar-rail--mobile-open {
+    display: block;
+  }
+
+  .show-filters-btn {
+    display: none !important;
+  }
+
+  /* show the mobile toggle button */
+  .sidebar-toggle {
+    display: flex;
+  }
+
+  .jobs-header__right {
+    align-items: flex-start;
+  }
+
+  .jobs-header {
+    flex-direction: column;
+  }
+}
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index d434ed4..4dcfece 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,21 +1,35 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { RouterLink } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
+import { ref, computed } from "vue";
+import { RouterLink, useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/auth";
 
-const auth = useAuthStore()
+const auth = useAuthStore();
+const router = useRouter();
+
+const searchQuery = ref("");
+const searchLocation = ref("");
+
+function submitSearch() {
+  const query: Record<string, string> = {};
+  if (searchQuery.value.trim()) query.q = searchQuery.value.trim();
+  if (searchLocation.value.trim()) query.location = searchLocation.value.trim();
+  router.push({ name: "candidate-jobs", query });
+}
 
 const primaryCta = computed(() => {
-  if (!auth.isAuthenticated) return { to: '/register', label: 'Find Your Next Role' }
-  if (auth.hasRole('employer')) return { to: '/profile/edit', label: 'Manage Company Profile' }
-  return { to: '/profile/edit', label: 'Complete Your Profile' }
-})
+  if (!auth.isAuthenticated)
+    return { to: "/register", label: "Find Your Next Role" };
+  if (auth.hasRole("employer"))
+    return { to: "/profile/edit", label: "Manage Company Profile" };
+  return { to: "/profile/edit", label: "Complete Your Profile" };
+});
 
 const secondaryCta = computed(() => {
-  if (!auth.isAuthenticated) return { to: '/login', label: 'Sign In' }
-  if (auth.hasRole('employer')) return { to: '/payments/checkout', label: 'Post a Job' }
-  return { to: { path: '/', hash: '#jobs' }, label: 'Browse Jobs' }
-})
+  if (!auth.isAuthenticated) return { to: "/login", label: "Sign In" };
+  if (auth.hasRole("employer"))
+    return { to: "/payments/checkout", label: "Post a Job" };
+  return { to: { path: "/", hash: "#jobs" }, label: "Browse Jobs" };
+});
 </script>
 
 <template>
@@ -33,9 +47,19 @@ const secondaryCta = computed(() => {
         </div>
       </div>
       <div class="nav-actions">
-        <RouterLink v-if="!auth.isAuthenticated" to="/login" class="nav-ghost">Sign In</RouterLink>
-        <RouterLink v-else to="/profile/edit" class="nav-ghost">Profile</RouterLink>
-        <RouterLink v-if="!auth.isAuthenticated || auth.isEmployer" :to="auth.isEmployer ? '/payments/checkout' : '/register'" class="nav-primary">Post a Job</RouterLink>      </div>
+        <RouterLink v-if="!auth.isAuthenticated" to="/login" class="nav-ghost"
+          >Sign In</RouterLink
+        >
+        <RouterLink v-else to="/profile/edit" class="nav-ghost"
+          >Profile</RouterLink
+        >
+        <RouterLink
+          v-if="!auth.isAuthenticated || auth.isEmployer"
+          :to="auth.isEmployer ? '/payments/checkout' : '/register'"
+          class="nav-primary"
+          >Post a Job</RouterLink
+        >
+      </div>
     </nav>
 
     <main class="page-wrap">
@@ -47,12 +71,17 @@ const secondaryCta = computed(() => {
           </div>
           <h1>The Future of Technical Recruitment</h1>
           <p>
-            Precision-matched opportunities for the world&apos;s elite engineers.
-            Experience a deep-focus hiring platform designed for technical minds.
+            Precision-matched opportunities for the world&apos;s elite
+            engineers. Experience a deep-focus hiring platform designed for
+            technical minds.
           </p>
           <div class="hero-actions">
-            <RouterLink :to="primaryCta.to" class="cta-primary">{{ primaryCta.label }}</RouterLink>
-            <RouterLink :to="secondaryCta.to" class="cta-secondary">{{ secondaryCta.label }}</RouterLink>
+            <RouterLink :to="primaryCta.to" class="cta-primary">{{
+              primaryCta.label
+            }}</RouterLink>
+            <RouterLink :to="secondaryCta.to" class="cta-secondary">{{
+              secondaryCta.label
+            }}</RouterLink>
           </div>
         </div>
 
@@ -60,7 +89,9 @@ const secondaryCta = computed(() => {
           <div class="hero-map"></div>
           <div class="floating-card floating-card--top glass-panel glow-amber">
             <div class="floating-card__row">
-              <div class="floating-icon"><span class="material-symbols-outlined">terminal</span></div>
+              <div class="floating-icon">
+                <span class="material-symbols-outlined">terminal</span>
+              </div>
               <div>
                 <p class="card-title">Senior Rust Dev</p>
                 <p class="card-subtitle">Neural Systems</p>
@@ -71,7 +102,9 @@ const secondaryCta = computed(() => {
           </div>
           <div class="floating-card floating-card--bottom glass-panel">
             <div class="floating-card__row">
-              <span class="material-symbols-outlined floating-globe">public</span>
+              <span class="material-symbols-outlined floating-globe"
+                >public</span
+              >
               <div>
                 <p class="card-title">Remote Setup</p>
                 <p class="card-subtitle">Verified Location</p>
@@ -81,16 +114,30 @@ const secondaryCta = computed(() => {
         </div>
       </section>
 
-      <section class="search-section glass-panel" aria-label="Search jobs">
+      <section
+        class="search-section glass-panel"
+        aria-label="Search jobs"
+        @keydown.enter="submitSearch"
+      >
         <div class="search-field">
           <span class="material-symbols-outlined">search</span>
-          <input type="text" placeholder="Keywords (e.g. Rust, Go, React)" />
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Keywords (e.g. Vue, Laravel, React)"
+          />
         </div>
         <div class="search-field search-field--split">
           <span class="material-symbols-outlined">location_on</span>
-          <input type="text" placeholder="Location or Remote" />
+          <input
+            v-model="searchLocation"
+            type="text"
+            placeholder="Location or Remote"
+          />
         </div>
-        <button type="button" class="search-button">Search</button>
+        <button type="button" class="search-button" @click="submitSearch">
+          Search
+        </button>
       </section>
 
       <section class="section-block">
@@ -109,8 +156,8 @@ const secondaryCta = computed(() => {
             </div>
             <h3>AI-Driven Matching</h3>
             <p>
-              Our models analyze technical stacks and experience signals to surface highly
-              relevant role recommendations.
+              Our models analyze technical stacks and experience signals to
+              surface highly relevant role recommendations.
             </p>
           </article>
 
@@ -120,8 +167,8 @@ const secondaryCta = computed(() => {
             </div>
             <h3>Verified Profiles</h3>
             <p>
-              Pre-verified technical capabilities instantly signal seniority to top-tier
-              engineering teams.
+              Pre-verified technical capabilities instantly signal seniority to
+              top-tier engineering teams.
             </p>
           </article>
 
@@ -131,8 +178,8 @@ const secondaryCta = computed(() => {
             </div>
             <h3>Deep-Focus Workspace</h3>
             <p>
-              A cyber-noir interface designed to reduce cognitive load and keep hiring work
-              organized.
+              A cyber-noir interface designed to reduce cognitive load and keep
+              hiring work organized.
             </p>
           </article>
         </div>
@@ -144,7 +191,10 @@ const secondaryCta = computed(() => {
             <h2>Featured Opportunities</h2>
             <p>Exclusive roles actively recruiting this week.</p>
           </div>
-          <a href="#" class="section-link">View All Roles <span class="material-symbols-outlined">arrow_forward</span></a>
+          <a href="#" class="section-link"
+            >View All Roles
+            <span class="material-symbols-outlined">arrow_forward</span></a
+          >
         </div>
 
         <div class="job-list">
@@ -214,12 +264,14 @@ const secondaryCta = computed(() => {
         <div>
           <h2>Ready to hire smarter?</h2>
           <p>
-            Create a profile, post a job, and keep the full workflow inside one focused
-            platform.
+            Create a profile, post a job, and keep the full workflow inside one
+            focused platform.
           </p>
         </div>
         <div class="hero-actions">
-          <RouterLink to="/register" class="cta-primary">Get Started</RouterLink>
+          <RouterLink to="/register" class="cta-primary"
+            >Get Started</RouterLink
+          >
           <RouterLink to="/login" class="cta-secondary">Sign In</RouterLink>
         </div>
       </section>
@@ -246,8 +298,16 @@ const secondaryCta = computed(() => {
   min-height: 100vh;
   overflow-x: hidden;
   background:
-    radial-gradient(circle at top left, rgba(255, 183, 125, 0.12), transparent 30%),
-    radial-gradient(circle at bottom right, rgba(201, 190, 255, 0.09), transparent 28%),
+    radial-gradient(
+      circle at top left,
+      rgba(255, 183, 125, 0.12),
+      transparent 30%
+    ),
+    radial-gradient(
+      circle at bottom right,
+      rgba(201, 190, 255, 0.09),
+      transparent 28%
+    ),
     var(--bg-ink);
 }
 
@@ -275,7 +335,10 @@ const secondaryCta = computed(() => {
   background: rgba(26, 26, 28, 0.6);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 183, 125, 0.15);
-  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+  transition:
+    border-color 0.3s ease,
+    box-shadow 0.3s ease,
+    transform 0.3s ease;
 }
 
 .glass-panel:hover {
@@ -365,7 +428,10 @@ const secondaryCta = computed(() => {
   border-radius: 9999px;
   font-weight: 600;
   letter-spacing: 0.04em;
-  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
 }
 
 .nav-ghost,
@@ -412,7 +478,11 @@ const secondaryCta = computed(() => {
   line-height: 1.05;
   letter-spacing: -0.04em;
   color: var(--on-surface);
-  background-image: linear-gradient(to right, var(--on-surface), var(--on-surface-variant));
+  background-image: linear-gradient(
+    to right,
+    var(--on-surface),
+    var(--on-surface-variant)
+  );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -481,7 +551,8 @@ const secondaryCta = computed(() => {
   border-radius: 2rem;
   background:
     linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
-    url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=2070') center/cover;
+    url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=2070")
+      center/cover;
   opacity: 0.12;
 }
 
@@ -813,15 +884,27 @@ const secondaryCta = computed(() => {
 }
 
 @keyframes float {
-  0% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-  100% { transform: translateY(0); }
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }
 
 @keyframes float-delayed {
-  0% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
-  100% { transform: translateY(0); }
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }
 
 @media (min-width: 768px) {
diff --git a/src/views/search/JobSearchView.vue b/src/views/search/JobSearchView.vue
new file mode 100644
index 0000000..496a426
--- /dev/null
+++ b/src/views/search/JobSearchView.vue
@@ -0,0 +1,650 @@
+<template>
+  <AppLayout>
+    <div class="search-page">
+      <!-- Header -->
+      <div class="search-header">
+        <div class="search-header__copy">
+          <p class="search-kicker">Explore Opportunities</p>
+          <h1>Search Jobs</h1>
+        </div>
+        <div class="search-header__stat stat-chip glass-panel">
+          <span class="material-symbols-outlined">work</span>
+          <div>
+            <p class="stat-chip__value">{{ store.meta.total }}</p>
+            <p class="stat-chip__label">Results</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Search bar + sort -->
+      <section class="search-bar glass-panel" aria-label="Search jobs">
+        <div class="search-bar__inner">
+          <div class="search-bar__field">
+            <span class="material-symbols-outlined">search</span>
+            <input
+              v-model="store.query"
+              type="text"
+              placeholder="Title, skill, or keyword…"
+              id="search-input"
+              autocomplete="off"
+            />
+          </div>
+          <div class="search-bar__sort">
+            <label for="search-sort" class="sr-only">Sort by</label>
+            <select v-model="store.sort" id="search-sort">
+              <option value="newest">Newest</option>
+              <option value="deadline">Deadline</option>
+            </select>
+          </div>
+        </div>
+      </section>
+
+      <!-- Active filter chips -->
+      <ActiveFilters />
+
+      <!-- Body: sidebar + list -->
+      <div class="search-body">
+        <!-- Sidebar toggle (mobile) -->
+        <button
+          type="button"
+          class="sidebar-toggle glass-panel"
+          @click="sidebarOpen = !sidebarOpen"
+          :aria-expanded="sidebarOpen"
+        >
+          <span class="material-symbols-outlined">tune</span>
+          Filters
+          <span v-if="store.activeFilterCount > 0" class="filter-badge">{{
+            store.activeFilterCount
+          }}</span>
+        </button>
+
+        <!-- Sidebar -->
+        <div
+          class="search-body__sidebar"
+          :class="{ 'search-body__sidebar--open': sidebarOpen }"
+        >
+          <FilterSidebar />
+        </div>
+
+        <!-- Job list -->
+        <div class="search-body__results">
+          <!-- Loading skeleton -->
+          <div v-if="store.isLoading" class="search-loading">
+            <div v-for="n in 5" :key="n" class="skeleton-card glass-panel" />
+          </div>
+
+          <!-- Results -->
+          <template v-else>
+            <div class="job-list">
+              <div
+                v-for="job in store.jobs"
+                :key="job.id"
+                class="job-card glass-panel"
+                @click="
+                  router.push({ name: 'job-detail', params: { jobId: job.id } })
+                "
+                style="cursor: pointer"
+              >
+                <!-- Logo -->
+                <div class="job-card__logo">
+                  <img
+                    v-if="job.employer.logo_url"
+                    :src="job.employer.logo_url"
+                    :alt="job.employer.company_name"
+                    class="job-card__logo-img"
+                  />
+                  <span v-else>{{ job.employer.company_name.charAt(0) }}</span>
+                </div>
+
+                <!-- Body -->
+                <div class="job-card__body">
+                  <div class="job-card__top">
+                    <div>
+                      <h2 class="job-card__title">{{ job.title }}</h2>
+                      <p class="job-card__company">
+                        {{ job.employer.company_name }}
+                      </p>
+                    </div>
+                    <!-- Badges -->
+                    <div class="job-card__badges">
+                      <span v-if="job.work_type" class="badge badge--work">
+                        {{ job.work_type }}
+                      </span>
+                      <span
+                        v-if="job.experience_level"
+                        class="badge badge--exp"
+                      >
+                        {{ job.experience_level }}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="job-card__footer">
+                    <div class="job-card__meta-row">
+                      <span v-if="job.location" class="job-card__meta-item">
+                        <span class="material-symbols-outlined"
+                          >location_on</span
+                        >
+                        {{ job.location }}
+                      </span>
+                      <span
+                        v-if="job.application_deadline"
+                        class="job-card__meta-item"
+                      >
+                        <span class="material-symbols-outlined">event</span>
+                        {{ job.application_deadline }}
+                      </span>
+                      <span v-if="job.category" class="job-card__meta-item">
+                        <span class="material-symbols-outlined">category</span>
+                        {{ job.category.name }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Empty state -->
+            <div
+              v-if="store.jobs.length === 0"
+              class="search-empty glass-panel"
+            >
+              <span class="material-symbols-outlined">search_off</span>
+              <h3>No matching roles</h3>
+              <p>Try adjusting your filters or search term.</p>
+              <button
+                v-if="store.hasActiveFilters"
+                type="button"
+                class="reset-btn"
+                @click="store.resetFilters()"
+              >
+                Clear filters
+              </button>
+            </div>
+
+            <!-- Pagination -->
+            <div
+              v-if="store.meta.last_page > 1"
+              class="search-pagination"
+              aria-label="Pagination"
+            >
+              <button
+                class="page-btn"
+                :disabled="store.meta.current_page === 1"
+                @click="goToPage(store.meta.current_page - 1)"
+                aria-label="Previous page"
+              >
+                <span class="material-symbols-outlined">chevron_left</span>
+              </button>
+              <span class="page-indicator">
+                {{ store.meta.current_page }} / {{ store.meta.last_page }}
+              </span>
+              <button
+                class="page-btn"
+                :disabled="store.meta.current_page === store.meta.last_page"
+                @click="goToPage(store.meta.current_page + 1)"
+                aria-label="Next page"
+              >
+                <span class="material-symbols-outlined">chevron_right</span>
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import AppLayout from "@/layouts/AppLayout.vue";
+import FilterSidebar from "@/components/search/FilterSidebar.vue";
+import ActiveFilters from "@/components/search/ActiveFilters.vue";
+import { useJobSearch } from "@/composables/useJobSearch";
+
+const router = useRouter();
+const sidebarOpen = ref(true);
+const { store, goToPage } = useJobSearch();
+</script>
+
+<style scoped>
+.search-page {
+  display: grid;
+  gap: 1.25rem;
+}
+
+/* ── Header ──────────────────────────────────────────────────────────── */
+.search-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.search-kicker {
+  margin: 0 0 0.3rem;
+  color: var(--primary-dim);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.search-header h1 {
+  margin: 0;
+  font-family: var(--font-display), serif;
+  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
+  color: var(--on-surface);
+}
+
+.stat-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1.25rem;
+  border-radius: 1rem;
+}
+
+.stat-chip .material-symbols-outlined {
+  font-size: 1.5rem;
+  color: var(--primary-dim);
+}
+
+.stat-chip__value {
+  margin: 0;
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--on-surface);
+  font-family: var(--font-display), serif;
+}
+
+.stat-chip__label {
+  margin: 0;
+  font-size: 0.72rem;
+  color: var(--on-surface-variant);
+}
+
+/* ── Search bar ──────────────────────────────────────────────────────── */
+.glass-panel {
+  background: rgba(26, 26, 28, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 183, 125, 0.15);
+}
+
+.search-bar {
+  border-radius: 9999px;
+  padding: 0.4rem;
+}
+
+.search-bar__inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.search-bar__field {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.9rem 1.25rem;
+}
+
+.search-bar__field .material-symbols-outlined {
+  color: var(--on-surface-variant);
+  font-size: 1.2rem;
+  flex-shrink: 0;
+}
+
+.search-bar__field input {
+  width: 100%;
+  background: transparent;
+  border: none;
+  color: var(--on-surface);
+  outline: none;
+  font: inherit;
+  font-size: 0.95rem;
+}
+
+.search-bar__field input::placeholder {
+  color: rgba(221, 193, 174, 0.45);
+}
+
+.search-bar__sort {
+  flex-shrink: 0;
+  padding: 0 1rem;
+  border-left: 1px solid rgba(255, 183, 125, 0.12);
+}
+
+.search-bar__sort select {
+  background: transparent;
+  border: none;
+  color: var(--on-surface-variant);
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  outline: none;
+  padding: 0.5rem 0;
+}
+
+.search-bar__sort select option {
+  background: #1a1a1c;
+  color: var(--on-surface);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Body layout ─────────────────────────────────────────────────────── */
+.search-body {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  grid-template-rows: auto 1fr;
+  gap: 1.25rem;
+  align-items: start;
+}
+
+.sidebar-toggle {
+  display: none;
+}
+
+.search-body__sidebar {
+  position: sticky;
+  top: 1rem;
+}
+
+.search-body__results {
+  min-width: 0;
+  display: grid;
+  gap: 1.25rem;
+}
+
+/* ── Loading skeleton ────────────────────────────────────────────────── */
+.search-loading {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.skeleton-card {
+  height: 100px;
+  border-radius: 1.25rem;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.2;
+  }
+}
+
+/* ── Job card ────────────────────────────────────────────────────────── */
+.job-list {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.job-card {
+  display: flex;
+  gap: 1.25rem;
+  padding: 1.35rem;
+  border-radius: 1.25rem;
+  align-items: flex-start;
+  transition:
+    border-color 0.25s ease,
+    transform 0.2s ease,
+    box-shadow 0.25s ease;
+}
+
+.job-card:hover {
+  border-color: rgba(255, 183, 125, 0.3);
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 30px rgba(0, 0, 0, 0.3),
+    0 0 20px rgba(255, 183, 125, 0.08);
+}
+
+.job-card__logo {
+  flex-shrink: 0;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.8rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+  display: grid;
+  place-items: center;
+  font-family: var(--font-display), serif;
+  font-size: 1.3rem;
+  color: var(--on-surface);
+  overflow: hidden;
+}
+
+.job-card__logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.job-card__body {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 0.6rem;
+}
+
+.job-card__top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.job-card__title {
+  margin: 0;
+  font-family: var(--font-display), serif;
+  font-size: 1.05rem;
+  color: var(--on-surface);
+}
+
+.job-card__company {
+  margin: 0.15rem 0 0;
+  font-size: 0.85rem;
+  color: var(--on-surface-variant);
+}
+
+.job-card__badges {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.badge {
+  padding: 0.2rem 0.6rem;
+  border-radius: 9999px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.badge--work {
+  background: rgba(100, 200, 255, 0.1);
+  color: rgba(140, 210, 255, 0.9);
+  border: 1px solid rgba(100, 200, 255, 0.2);
+}
+
+.badge--exp {
+  background: rgba(255, 183, 125, 0.1);
+  color: var(--primary-dim);
+  border: 1px solid rgba(255, 183, 125, 0.2);
+}
+
+.job-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.job-card__meta-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.job-card__meta-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.78rem;
+  color: var(--on-surface-variant);
+}
+
+.job-card__meta-item .material-symbols-outlined {
+  font-size: 0.9rem;
+}
+
+/* ── Empty state ─────────────────────────────────────────────────────── */
+.search-empty {
+  display: grid;
+  place-items: center;
+  gap: 0.5rem;
+  padding: 3rem 2rem;
+  border-radius: 1.25rem;
+  text-align: center;
+}
+
+.search-empty .material-symbols-outlined {
+  font-size: 3rem;
+  color: var(--on-surface-variant);
+  opacity: 0.5;
+}
+
+.search-empty h3 {
+  margin: 0;
+  color: var(--on-surface);
+}
+
+.search-empty p {
+  margin: 0;
+  color: var(--on-surface-variant);
+  font-size: 0.9rem;
+}
+
+.reset-btn {
+  margin-top: 0.5rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 183, 125, 0.3);
+  background: rgba(255, 183, 125, 0.08);
+  color: var(--primary-dim);
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.reset-btn:hover {
+  background: rgba(255, 183, 125, 0.18);
+}
+
+/* ── Pagination ──────────────────────────────────────────────────────── */
+.search-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+}
+
+.page-btn {
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 183, 125, 0.2);
+  background: rgba(255, 183, 125, 0.06);
+  color: var(--primary-dim);
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s,
+    opacity 0.2s;
+}
+
+.page-btn:hover:not(:disabled) {
+  background: rgba(255, 183, 125, 0.15);
+  border-color: rgba(255, 183, 125, 0.4);
+}
+
+.page-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.page-indicator {
+  font-size: 0.9rem;
+  color: var(--on-surface-variant);
+  min-width: 4rem;
+  text-align: center;
+}
+
+/* ── Mobile ──────────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .search-body {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.65rem 1rem;
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 183, 125, 0.2);
+    background: rgba(255, 183, 125, 0.06);
+    color: var(--on-surface);
+    font: inherit;
+    font-size: 0.88rem;
+    cursor: pointer;
+    width: fit-content;
+  }
+
+  .sidebar-toggle .material-symbols-outlined {
+    font-size: 1.1rem;
+  }
+
+  .filter-badge {
+    background: var(--primary-dim);
+    color: #1a1a1c;
+    font-size: 0.72rem;
+    font-weight: 700;
+    border-radius: 9999px;
+    padding: 0 0.45rem;
+    line-height: 1.5;
+  }
+
+  .search-body__sidebar {
+    display: none;
+  }
+
+  .search-body__sidebar--open {
+    display: block;
+  }
+}
+</style>