Index: petify-frontend/src/views/ClinicApplicationView.vue
===================================================================
--- petify-frontend/src/views/ClinicApplicationView.vue	(revision fa32d0f462d925f109df1a21025f904e56606f8b)
+++ petify-frontend/src/views/ClinicApplicationView.vue	(revision fa32d0f462d925f109df1a21025f904e56606f8b)
@@ -0,0 +1,352 @@
+<template>
+  <main class="application-page">
+    <section class="application-hero">
+      <div class="container hero-inner">
+        <div class="hero-copy">
+          <p class="eyebrow">Petify clinics</p>
+          <h1>Apply as a vet clinic</h1>
+          <p>
+            Send your clinic details to the Petify admins. Once approved, your clinic can manage appointments,
+            availability, cancellations, and client visit outcomes from the clinic dashboard.
+          </p>
+        </div>
+        <div class="review-note">
+          <span class="note-label">Admin review</span>
+          <strong>Applications start as pending</strong>
+          <p>Admins can approve or deny them from the Clinics tab.</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="container application-body">
+      <div class="form-shell">
+        <div class="form-heading">
+          <h2>Clinic information</h2>
+          <p>Use details patients can recognize. Email or phone is required.</p>
+        </div>
+
+        <form class="application-form" @submit.prevent="submit">
+          <div class="form-grid">
+            <div class="form-group wide">
+              <label for="clinicName">Clinic name *</label>
+              <input
+                id="clinicName"
+                v-model.trim="form.name"
+                class="form-control"
+                type="text"
+                placeholder="Happy Paws Clinic"
+                required
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="clinicEmail">Email</label>
+              <input
+                id="clinicEmail"
+                v-model.trim="form.email"
+                class="form-control"
+                type="email"
+                placeholder="clinic@example.com"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="clinicPhone">Phone</label>
+              <input
+                id="clinicPhone"
+                v-model.trim="form.phone"
+                class="form-control"
+                type="tel"
+                placeholder="+389 70 000 000"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="clinicCity">City *</label>
+              <input
+                id="clinicCity"
+                v-model.trim="form.city"
+                class="form-control"
+                type="text"
+                placeholder="Skopje"
+                required
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="clinicAddress">Address *</label>
+              <input
+                id="clinicAddress"
+                v-model.trim="form.address"
+                class="form-control"
+                type="text"
+                placeholder="Partizanska 12"
+                required
+              />
+            </div>
+          </div>
+
+          <div v-if="errorMessage" class="alert alert-danger">
+            {{ errorMessage }}
+          </div>
+
+          <div v-if="successMessage" class="alert alert-success">
+            {{ successMessage }}
+          </div>
+
+          <div class="form-actions">
+            <button class="btn btn-primary" type="submit" :disabled="isSubmitting">
+              <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
+              {{ isSubmitting ? 'Submitting...' : 'Submit application' }}
+            </button>
+            <button class="btn btn-outline-secondary" type="button" :disabled="isSubmitting" @click="resetForm">
+              Reset
+            </button>
+          </div>
+        </form>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { submitClinicApplication } from '../api/clinicApplications'
+
+const emptyForm = {
+  name: '',
+  email: '',
+  phone: '',
+  city: '',
+  address: '',
+}
+
+const form = ref({ ...emptyForm })
+const isSubmitting = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+function validateForm(): string {
+  if (!form.value.name.trim()) return 'Clinic name is required'
+  if (!form.value.city.trim()) return 'City is required'
+  if (!form.value.address.trim()) return 'Address is required'
+  if (!form.value.email.trim() && !form.value.phone.trim()) return 'Email or phone is required'
+  return ''
+}
+
+async function submit() {
+  const validationError = validateForm()
+  if (validationError) {
+    errorMessage.value = validationError
+    successMessage.value = ''
+    return
+  }
+
+  try {
+    isSubmitting.value = true
+    errorMessage.value = ''
+    successMessage.value = ''
+    const application = await submitClinicApplication(form.value)
+    successMessage.value = `Application submitted. Your status is ${application.status || 'PENDING'}.`
+    form.value = { ...emptyForm }
+  } catch (error) {
+    errorMessage.value = error instanceof Error ? error.message : 'Failed to submit application'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+function resetForm() {
+  form.value = { ...emptyForm }
+  errorMessage.value = ''
+  successMessage.value = ''
+}
+</script>
+
+<style scoped>
+.application-page {
+  min-height: calc(100vh - 72px);
+  background: #f7f5f2;
+  color: #1f2933;
+}
+
+.application-hero {
+  background:
+    linear-gradient(135deg, rgba(31, 41, 51, 0.82), rgba(60, 78, 88, 0.68)),
+    url('https://images.unsplash.com/photo-1628009368231-7bb7cfcb0def?auto=format&fit=crop&w=1800&q=80');
+  background-position: center;
+  background-size: cover;
+  color: #ffffff;
+}
+
+.hero-inner {
+  min-height: 360px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 32px;
+  align-items: end;
+  padding-top: 72px;
+  padding-bottom: 46px;
+}
+
+.hero-copy {
+  max-width: 720px;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #fed7aa;
+}
+
+.hero-copy h1 {
+  margin: 0;
+  font-size: clamp(2.35rem, 5vw, 4.7rem);
+  line-height: 0.95;
+  font-weight: 850;
+}
+
+.hero-copy p {
+  margin: 20px 0 0;
+  max-width: 620px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1.04rem;
+  line-height: 1.65;
+}
+
+.review-note {
+  align-self: end;
+  padding: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  background: rgba(255, 255, 255, 0.11);
+  backdrop-filter: blur(12px);
+  border-radius: 8px;
+}
+
+.note-label {
+  display: inline-block;
+  margin-bottom: 10px;
+  color: #fed7aa;
+  font-size: 0.78rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.review-note strong {
+  display: block;
+  font-size: 1.05rem;
+}
+
+.review-note p {
+  margin: 8px 0 0;
+  color: rgba(255, 255, 255, 0.82);
+}
+
+.application-body {
+  padding-top: 34px;
+  padding-bottom: 64px;
+}
+
+.form-shell {
+  max-width: 940px;
+  margin: 0 auto;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 18px 40px rgba(31, 41, 51, 0.08);
+  padding: 28px;
+}
+
+.form-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  border-bottom: 1px solid #edf0f2;
+  padding-bottom: 18px;
+  margin-bottom: 22px;
+}
+
+.form-heading h2 {
+  margin: 0;
+  font-size: 1.45rem;
+  font-weight: 800;
+}
+
+.form-heading p {
+  max-width: 340px;
+  margin: 0;
+  color: #667085;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.form-group.wide {
+  grid-column: 1 / -1;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 7px;
+  color: #344054;
+  font-weight: 700;
+  font-size: 0.92rem;
+}
+
+.form-control {
+  min-height: 46px;
+  border-radius: 8px;
+}
+
+.alert {
+  margin-top: 18px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.btn {
+  border-radius: 8px;
+  font-weight: 700;
+}
+
+.btn-primary {
+  background: #f97316;
+  border-color: #f97316;
+}
+
+.btn-primary:hover {
+  background: #ea580c;
+  border-color: #ea580c;
+}
+
+@media (max-width: 768px) {
+  .hero-inner {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    padding-top: 48px;
+  }
+
+  .review-note {
+    max-width: 420px;
+  }
+
+  .form-heading,
+  .form-actions {
+    flex-direction: column;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>