Index: serveNGo-frontend/src/assets/base.css
===================================================================
--- ReserveNGo-frontend/src/assets/base.css	(revision 1e1f04e6989a592ceb2ce0fe84d85066f4fb94df)
+++ 	(revision )
@@ -1,86 +1,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
Index: ReserveNGo-frontend/src/assets/main.css
===================================================================
--- ReserveNGo-frontend/src/assets/main.css	(revision 1e1f04e6989a592ceb2ce0fe84d85066f4fb94df)
+++ ReserveNGo-frontend/src/assets/main.css	(revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d)
@@ -1,35 +1,31 @@
-@import './base.css';
+/* src/assets/main.css */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+html,
+body {
+    font-family: 'MyAwesomeFont', 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, sans-serif;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
+/* Force Vuetify to inherit your font */
+.v-application {
+    font-family: inherit !important;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+@media print {
+    /* Hide header & footer */
+    nav.navbar,
+    footer {
+        display: none !important;
+    }
+
+    /* Hide any helper UI */
+    .no-print {
+        display: none !important;
+    }
+
+    /* Clean print background */
+    body {
+        background: #fff !important;
+    }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
Index: ReserveNGo-frontend/src/components/Project/StaticPages/AboutUs.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/StaticPages/AboutUs.vue	(revision 1e1f04e6989a592ceb2ce0fe84d85066f4fb94df)
+++ ReserveNGo-frontend/src/components/Project/StaticPages/AboutUs.vue	(revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d)
@@ -1,54 +1,308 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const lastUpdated = ref(new Date().toLocaleDateString())
+</script>
 
 <template>
-  <div class="container py-5 about">
-    <h1 class="mb-4">About Us</h1>
-
-    <p>
-      <strong>ReserveNGo</strong> is a reservation management platform designed to connect customers
-      with local businesses such as restaurants, cafés, and similar venues. Our goal is to simplify
-      the reservation process for everyone involved.
-    </p>
-
-    <p>
-      We provide a complete system with clearly defined roles for
-      <strong>customers</strong>, <strong>local workers</strong>, and
-      <strong>local managers</strong>, allowing each user to focus on what matters most.
-    </p>
-
-    <h5 class="mt-4">For Customers</h5>
-    <p>
-      Customers can search for venues using detailed filters, manage their reservations, save
-      favorite locations or events, and leave ratings and feedback. Reservations can be made quickly
-      without the need for phone calls, while still offering the option to contact the venue
-      directly.
-    </p>
-
-    <h5 class="mt-4">For Local Businesses</h5>
-    <p>
-      Local managers can fully manage their venue’s information, create and promote events, and
-      oversee reservations through a centralized dashboard. Worker accounts are focused specifically
-      on reservation handling, ensuring smooth daily operations.
-    </p>
-
-    <h5 class="mt-4">Events & Discoverability</h5>
-    <p>
-      In addition to searching for venues, customers can discover places through events. Businesses
-      can create custom events, allowing users to search based on experiences rather than just
-      locations.
-    </p>
-
-    <h5 class="mt-4">Our Vision</h5>
-    <p>
-      ReserveNGo is currently developed as a student project, but it is treated as a future-ready
-      business idea. The long-term vision is to offer a subscription-based platform that helps local
-      businesses modernize their reservation workflows and improve customer experience.
-    </p>
+  <div class="about-page container py-5">
+    <!-- HERO -->
+    <header class="hero card shadow-sm mb-4">
+      <div class="card-body d-flex flex-column flex-md-row gap-3 align-items-center">
+        <div class="hero-left d-flex gap-3 align-items-start">
+          <div class="brand-mark d-flex align-items-center justify-content-center">
+            <!-- SVG mark (neutral) -->
+            <svg width="46" height="46" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <rect x="0" y="0" width="24" height="24" rx="6" fill="#5ea5bc" />
+              <path
+                d="M7 12h10M7 8h10M7 16h6"
+                stroke="white"
+                stroke-width="1.6"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+
+          <div>
+            <h1 class="h4 mb-1">About ReserveNGo</h1>
+            <p class="mb-0 text-muted small">
+              A simple, fast reservation platform that helps customers find and book experiences,
+              and helps local venues manage bookings without the phone-tag.
+            </p>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- INTRO + FEATURES -->
+    <section class="row gx-4 gy-4 mb-4">
+      <div class="col-12 col-lg-7">
+        <div class="card h-100 p-3 shadow-sm">
+          <h2 class="h6 mb-2">What we do</h2>
+          <p class="text-muted mb-2">
+            ReserveNGo makes table reservations easy for customers and straightforward for local
+            staff. We focus on speed, clarity and practical features — search, favorites, events,
+            reservation management and simple subscription billing for businesses.
+          </p>
+
+          <h3 class="h6 mt-3 mb-2">Why choose us</h3>
+          <ul class="list-unstyled features-list mb-0">
+            <li>
+              <i class="fas fa-check-circle me-2 text-success"></i>Fast booking flow (no calls
+              required)
+            </li>
+            <li>
+              <i class="fas fa-cog me-2 text-primary"></i>Practical tools for managers and workers
+            </li>
+            <li>
+              <i class="fas fa-star me-2 text-warning"></i>Ratings & favorites to surface top places
+            </li>
+            <li><i class="fas fa-calendar-alt me-2 text-info"></i>Events-first discovery</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="col-12 col-lg-5">
+        <div class="card h-100 p-3 shadow-sm">
+          <h2 class="h6 mb-2">Roles & responsibilities</h2>
+          <br />
+          <div class="role d-flex gap-3 align-items-start mb-3">
+            <div class="role-icon rounded">
+              <i class="fas fa-user-friends"></i>
+            </div>
+            <div>
+              <strong>Customers</strong>
+              <div class="text-muted small">
+                Search, reserve, manage bookings and rate experiences.
+              </div>
+            </div>
+          </div>
+
+          <div class="role d-flex gap-3 align-items-start mb-3">
+            <div class="role-icon rounded">
+              <i class="fas fa-user-tie"></i>
+            </div>
+            <div>
+              <strong>Local Managers</strong>
+              <div class="text-muted small">Full venue control: info, events, subscriptions.</div>
+            </div>
+          </div>
+
+          <div class="role d-flex gap-3 align-items-start">
+            <div class="role-icon rounded">
+              <i class="fas fa-user-cog"></i>
+            </div>
+            <div>
+              <strong>Local Workers</strong>
+              <div class="text-muted small">Handle day-to-day reservations and customer flow.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- MISSION / VISION -->
+    <section class="mb-4">
+      <div class="card p-3 shadow-sm">
+        <div class="row g-4 align-items-start">
+          <div class="col-12 col-md-6">
+            <h2 class="h6 mb-2">Our mission</h2>
+            <p class="text-muted mb-0">
+              To make reservations frictionless — for customers and for venues — by providing a
+              focused, reliable tool that replaces unnecessary phone calls and improves table
+              utilization.
+            </p>
+          </div>
+
+          <div class="col-12 col-md-6">
+            <h3 class="h6 mb-2">Our vision</h3>
+            <p class="text-muted mb-0">
+              To become a go-to reservation platform that empowers local businesses and improves how
+              people discover and book experiences.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TEAM (static) -->
+    <section class="mb-4">
+      <h2 class="h6 mb-3" style="color: #5ea5bc">The TEAM</h2>
+
+      <div class="row g-3">
+        <!-- Nikola -->
+        <div class="col-12 col-sm-6 col-lg-3">
+          <div class="card team-card text-center p-3 shadow-sm h-100">
+            <div class="avatar mx-auto mb-2">
+              <svg width="72" height="72" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <rect width="24" height="24" rx="6" fill="#e9eef0" />
+                <circle cx="12" cy="9" r="3.2" fill="#c0d6d9" />
+                <path
+                  d="M6 18c1.6-2.5 4-3 6-3s4.4.5 6 3"
+                  stroke="#c0d6d9"
+                  stroke-width="1.4"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </div>
+
+            <h3 class="h6 mb-1">Nikola Jordanoski</h3>
+            <div class="text-muted small mb-2">
+              Backend & Frontend · Team Lead · Project Manager
+            </div>
+            <p class="small text-muted mb-0">
+              System architecture, backend services, frontend integration and overall project
+              direction.
+            </p>
+          </div>
+        </div>
+
+        <!-- Zharko -->
+        <div class="col-12 col-sm-6 col-lg-3">
+          <div class="card team-card text-center p-3 shadow-sm h-100">
+            <div class="avatar mx-auto mb-2">
+              <svg width="72" height="72" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <rect width="24" height="24" rx="6" fill="#e9eef0" />
+                <circle cx="12" cy="9" r="3.2" fill="#c0d6d9" />
+                <path
+                  d="M6 18c1.6-2.5 4-3 6-3s4.4.5 6 3"
+                  stroke="#c0d6d9"
+                  stroke-width="1.4"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </div>
+
+            <h3 class="h6 mb-1">Zharko Ivanov</h3>
+            <div class="text-muted small mb-2">Backend Developer</div>
+            <p class="small text-muted mb-0">
+              API design, database logic and server-side business rules.
+            </p>
+          </div>
+        </div>
+
+        <!-- Ljubomir -->
+        <div class="col-12 col-sm-6 col-lg-3">
+          <div class="card team-card text-center p-3 shadow-sm h-100">
+            <div class="avatar mx-auto mb-2">
+              <svg width="72" height="72" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <rect width="24" height="24" rx="6" fill="#e9eef0" />
+                <circle cx="12" cy="9" r="3.2" fill="#c0d6d9" />
+                <path
+                  d="M6 18c1.6-2.5 4-3 6-3s4.4.5 6 3"
+                  stroke="#c0d6d9"
+                  stroke-width="1.4"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </div>
+
+            <h3 class="h6 mb-1">Ljubomir Ilievski</h3>
+            <div class="text-muted small mb-2">Frontend Developer</div>
+            <p class="small text-muted mb-0">
+              UI components, layouts and frontend interaction logic.
+            </p>
+          </div>
+        </div>
+
+        <!-- Aleksandar -->
+        <div class="col-12 col-sm-6 col-lg-3">
+          <div class="card team-card text-center p-3 shadow-sm h-100">
+            <div class="avatar mx-auto mb-2">
+              <svg width="72" height="72" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <rect width="24" height="24" rx="6" fill="#e9eef0" />
+                <circle cx="12" cy="9" r="3.2" fill="#c0d6d9" />
+                <path
+                  d="M6 18c1.6-2.5 4-3 6-3s4.4.5 6 3"
+                  stroke="#c0d6d9"
+                  stroke-width="1.4"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </div>
+
+            <h3 class="h6 mb-1">Aleksandar Jovanovski</h3>
+            <div class="text-muted small mb-2">Frontend Developer</div>
+            <p class="small text-muted mb-0">Frontend features, responsiveness and UX polish.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <footer class="text-muted small mt-4">
+      <p class="mb-0">Last updated: {{ lastUpdated }}</p>
+    </footer>
   </div>
 </template>
 
 <style scoped>
-.about {
-  max-width: 900px;
+.about-page {
+  max-width: 1100px;
+}
+
+/* HERO */
+.hero {
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
+}
+.brand-mark {
+  width: 46px;
+  height: 46px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* stats */
+.stats .stat {
+  min-width: 72px;
+}
+.stat-value {
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+/* features / roles */
+.features-list li {
+  margin-bottom: 0.6rem;
+}
+.role-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  background: #f1f7f8;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #5ea5bc;
+  font-size: 1.1rem;
+}
+
+/* team */
+.team-card .avatar {
+  width: 72px;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background: #fff;
+}
+
+/* callout */
+.callout {
+  border-left: 4px solid #5ea5bc;
+}
+
+/* small responsiveness */
+@media (max-width: 768px) {
+  .stats {
+    justify-content: space-between;
+    width: 100%;
+  }
+  .hero .card-body {
+    gap: 1rem;
+  }
 }
 </style>
Index: ReserveNGo-frontend/src/components/Project/StaticPages/ContactComp.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/StaticPages/ContactComp.vue	(revision 1e1f04e6989a592ceb2ce0fe84d85066f4fb94df)
+++ ReserveNGo-frontend/src/components/Project/StaticPages/ContactComp.vue	(revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d)
@@ -1,10 +1,20 @@
 <template>
-  <div class="container py-5 contact">
-    <h1 class="mb-4">Contact</h1>
+  <div class="contact-page container py-5">
+    <!-- HERO -->
+    <header class="card shadow-sm mb-4 hero">
+      <div class="card-body d-flex align-items-center gap-3">
+        <div class="hero-icon">
+          <i class="fas fa-envelope"></i>
+        </div>
 
-    <p class="mb-4">
-      If you have questions, feedback, or are interested in using ReserveNGo for your business, feel
-      free to reach out.
-    </p>
+        <div>
+          <h1 class="h5 mb-1">Contact</h1>
+          <p class="mb-0 text-muted small">
+            Questions, feedback, or interested in using ReserveNGo for your business? We’d love to
+            hear from you.
+          </p>
+        </div>
+      </div>
+    </header>
 
     <div class="row g-4">
@@ -13,17 +23,17 @@
         <div class="card shadow-sm h-100">
           <div class="card-body">
-            <h5 class="card-title mb-3">Contact Information</h5>
+            <h5 class="h6 mb-3">Contact Information</h5>
 
-            <p class="mb-2">
+            <p class="mb-2 small">
               <strong>Email:</strong><br />
-              reservengo2025@gmail.com
+              <a href="mailto:reservengo2025@gmail.com">reservengo2025@gmail.com</a>
             </p>
 
-            <p class="mb-2">
+            <p class="mb-2 small">
               <strong>Phone:</strong><br />
               +123 456 789
             </p>
 
-            <p class="mb-0">
+            <p class="mb-0 small">
               <strong>Location:</strong><br />
               Faculty of Computer Science & Engineering (FINKI), Skopje
@@ -37,21 +47,25 @@
         <div class="card shadow-sm">
           <div class="card-body">
-            <h5 class="card-title mb-3">Send a Message</h5>
+            <h5 class="h6 mb-3">Send a message</h5>
 
             <form>
               <div class="mb-3">
-                <label class="form-label">Your Name</label>
-                <input type="text" class="form-control" placeholder="John Doe" />
+                <label class="form-label small">Your name</label>
+                <input type="text" class="form-control form-control-sm" placeholder="John Doe" />
               </div>
 
               <div class="mb-3">
-                <label class="form-label">Email</label>
-                <input type="email" class="form-control" placeholder="you@example.com" />
+                <label class="form-label small">Email</label>
+                <input
+                  type="email"
+                  class="form-control form-control-sm"
+                  placeholder="you@example.com"
+                />
               </div>
 
               <div class="mb-3">
-                <label class="form-label">Message</label>
+                <label class="form-label small">Message</label>
                 <textarea
-                  class="form-control"
+                  class="form-control form-control-sm"
                   rows="4"
                   placeholder="Write your message here..."
@@ -59,5 +73,5 @@
               </div>
 
-              <button type="button" class="btn btn-primary">Send Message</button>
+              <button type="button" class="btn btn-sm">Send message</button>
             </form>
           </div>
@@ -67,7 +81,7 @@
 
     <!-- Map -->
-    <div class="mt-5">
-      <h5 class="mb-3">Find Us</h5>
-      <div class="ratio ratio-16x9 rounded overflow-hidden shadow-sm">
+    <section class="mt-4">
+      <h5 class="h6 mb-2">Find us</h5>
+      <div class="ratio ratio-16x9 map-wrapper rounded overflow-hidden shadow-sm">
         <iframe
           src="https://www.google.com/maps?q=FINKI%20Skopje&output=embed"
@@ -76,11 +90,39 @@
         ></iframe>
       </div>
-    </div>
+    </section>
   </div>
 </template>
 
 <style scoped>
-.contact {
+.contact-page {
   max-width: 1000px;
 }
+
+/* HERO */
+.hero {
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
+}
+
+.hero-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: rgba(94, 165, 188, 0.15);
+  color: #5ea5bc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+}
+
+/* Map smaller */
+.map-wrapper {
+  max-height: 300px;
+}
+
+button {
+  background-color: #5ea5bc;
+  color: white;
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/StaticPages/PrivacyPolicy.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/StaticPages/PrivacyPolicy.vue	(revision 1e1f04e6989a592ceb2ce0fe84d85066f4fb94df)
+++ ReserveNGo-frontend/src/components/Project/StaticPages/PrivacyPolicy.vue	(revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d)
@@ -1,60 +1,190 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const lastUpdated = ref(new Date().toLocaleDateString())
+const router = useRouter()
+
+function goToContact() {
+  router.push({ path: '/contact' })
+}
+
+function printPolicy() {
+  window.print()
+}
+</script>
 
 <template>
-  <div class="container py-5 privacy">
-    <h1 class="mb-4">Privacy Policy</h1>
+  <div class="privacy-page container py-5">
+    <!-- HERO (hidden when printing) -->
+    <div class="card mb-4 shadow-sm hero-card no-print">
+      <div class="card-body d-flex align-items-center justify-content-between flex-wrap gap-3">
+        <div class="d-flex align-items-center gap-3">
+          <div class="hero-icon">
+            <i class="fas fa-shield-alt"></i>
+          </div>
 
-    <p>
-      At <strong>ReserveNGo</strong>, we value your privacy and are committed to protecting your
-      personal information. This Privacy Policy explains how we collect, use, and safeguard your
-      data.
-    </p>
+          <div>
+            <h1 class="h5 mb-1">Privacy Policy</h1>
+            <p class="mb-0 text-muted small">
+              How ReserveNGo collects, uses and protects your personal data.
+            </p>
+          </div>
+        </div>
 
-    <h5 class="mt-4">Information We Collect</h5>
-    <p>
-      We may collect personal information such as your name, email address, and reservation details
-      when you use our services.
-    </p>
+        <div class="text-end">
+          <div class="small text-muted">Last updated</div>
+          <div class="fw-medium">{{ lastUpdated }}</div>
 
-    <h5 class="mt-4">How We Use Your Information</h5>
-    <p>
-      Your information is used solely to provide and improve our reservation services, manage
-      bookings, and communicate important updates related to your account.
-    </p>
+          <div class="mt-2 d-flex gap-2 justify-content-end">
+            <button class="btn btn-outline-secondary btn-sm" @click="printPolicy">
+              <i class="fas fa-print me-1"></i> Print
+            </button>
 
-    <h5 class="mt-4">Data Security</h5>
-    <p>
-      We take reasonable technical and organizational measures to protect your personal data against
-      unauthorized access, loss, or misuse.
-    </p>
+            <button class="btn btn-contact btn-sm" @click="goToContact">
+              <i class="fas fa-envelope me-1"></i> Contact Us
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
 
-    <h5 class="mt-4">Third-Party Services</h5>
-    <p>
-      ReserveNGo does not sell or share your personal information with third parties except when
-      required to provide the service or comply with legal obligations.
-    </p>
+    <!-- CONTENT -->
+    <article class="privacy-content mx-auto">
+      <section class="mb-4">
+        <p class="mb-1">
+          At <strong>ReserveNGo</strong> we respect your privacy. This page explains what personal
+          information we collect, why we collect it, and how you can manage it.
+        </p>
+        <p class="text-muted small mb-0">
+          Short version: we only collect what we need to run reservations and improve the service.
+          We never sell personal data.
+        </p>
+      </section>
 
-    <h5 class="mt-4">Your Rights</h5>
-    <p>
-      You have the right to access, correct, or request deletion of your personal data in accordance
-      with applicable laws.
-    </p>
+      <section class="mb-4">
+        <h2 class="h5">What we collect</h2>
+        <ul>
+          <li><strong>Account info:</strong> name, email, phone.</li>
+          <li><strong>Reservation data:</strong> date, time, people, requests.</li>
+          <li><strong>Venue data:</strong> favorites, ratings, event attendance.</li>
+          <li><strong>Usage data:</strong> IP, browser, device, logs.</li>
+          <li><strong>Billing:</strong> subscription references (no card storage).</li>
+        </ul>
+      </section>
 
-    <h5 class="mt-4">Changes to This Policy</h5>
-    <p>
-      We may update this Privacy Policy from time to time. Any changes will be posted on this page.
-    </p>
+      <section class="mb-4">
+        <h2 class="h5">How we use your information</h2>
+        <ul>
+          <li>Provide and manage reservations.</li>
+          <li>Send confirmations and important notifications.</li>
+          <li>Improve search, UX and platform features.</li>
+          <li>Handle subscriptions and billing.</li>
+          <li>Prevent abuse and fraud.</li>
+        </ul>
 
-    <h5 class="mt-4">Contact Us</h5>
-    <p>
-      If you have any questions regarding this Privacy Policy, please contact us through the Contact
-      page.
-    </p>
+        <details class="mt-2">
+          <summary class="fw-semibold">Marketing & emails</summary>
+          <p class="text-muted mt-2">
+            Promotional emails are optional and can be unsubscribed anytime. Transactional emails
+            are mandatory.
+          </p>
+        </details>
+      </section>
+
+      <section class="mb-4">
+        <h2 class="h5">Cookies & tracking</h2>
+        <ul>
+          <li><strong>Essential:</strong> login, sessions, reservations.</li>
+          <li><strong>Functional:</strong> preferences and UI state.</li>
+          <li><strong>Analytics:</strong> anonymous usage statistics.</li>
+        </ul>
+      </section>
+
+      <section class="mb-4">
+        <h2 class="h5">Data security</h2>
+        <ul>
+          <li>HTTPS encryption</li>
+          <li>Access control and least privilege</li>
+          <li>Regular security updates</li>
+          <li>Vetted third-party providers</li>
+        </ul>
+      </section>
+
+      <section class="mb-4">
+        <h2 class="h5">Your rights</h2>
+        <ul>
+          <li>Access your data</li>
+          <li>Correct inaccurate data</li>
+          <li>Request deletion</li>
+          <li>Object or restrict processing</li>
+          <li>Request data portability</li>
+        </ul>
+        <p class="text-muted">
+          Contact us at
+          <a href="mailto:reservengo2025@gmail.com">reservengo2025@gmail.com</a>
+          to exercise these rights.
+        </p>
+      </section>
+
+      <section class="mb-4">
+        <h2 class="h5">Changes to this policy</h2>
+        <p class="text-muted">
+          We may update this policy occasionally. Updates will be reflected on this page.
+        </p>
+      </section>
+
+      <footer class="text-muted small mt-4">
+        <p class="mb-0">
+          This Privacy Policy is suitable for student projects and MVPs. Legal review is recommended
+          for production use.
+        </p>
+      </footer>
+    </article>
   </div>
 </template>
 
 <style scoped>
-.privacy {
+.privacy-page {
+  max-width: 1200px;
+}
+
+/* Content width */
+.privacy-content {
   max-width: 900px;
 }
+
+/* HERO */
+.hero-card {
+  background: linear-gradient(135deg, #f8fbfc 0%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.hero-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 10px;
+  background: rgba(94, 165, 188, 0.15);
+  color: #5ea5bc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3rem;
+}
+
+/* Contact button */
+.btn-contact {
+  background-color: #f55845;
+  border-color: #f55845;
+  color: #fff;
+}
+.btn-contact:hover {
+  background-color: #e14a3a;
+  border-color: #e14a3a;
+}
+
+/* details */
+details summary {
+  cursor: pointer;
+}
 </style>
Index: ReserveNGo-frontend/src/main.js
===================================================================
--- ReserveNGo-frontend/src/main.js	(revision 1e1f04e6989a592ceb2ce0fe84d85066f4fb94df)
+++ ReserveNGo-frontend/src/main.js	(revision 2bbbe73e207cbd8a8655d0a7ffc9133bf0f39a8d)
@@ -2,8 +2,8 @@
 import { createPinia } from 'pinia'
 import vue3GoogleLogin from 'vue3-google-login'
+import '@/assets/main.css'
 
 import App from './App.vue'
 import router from './router'
-import '@fortawesome/fontawesome-free/css/all.css'
 
 import { createVuetify } from 'vuetify'