diff --git a/README.md b/README.md
index 16962c6..dcd69b0 100644
--- a/README.md
+++ b/README.md
@@ -14,24 +14,24 @@ I created this project after noticing the mass deployment of ALPRs in cities, to
 Uses OpenStreetMap data to populate a map with crowdsourced locations of ALPRs, along with their type and direction they face.
 
 ### Report ALPRs
-Provides OSM tags for easy reporting of ALPRs based on brand on OSM's editing site. Evemtually, this will be a native feature of the site.
+Provides OSM tags for easy reporting of ALPRs based on brand on OSM's editing site. Eventually, this will be a native feature of the site.
 
 ### Learn About ALPRs
 See photos of common ALPRs and learn about their capabilities.
 
 ## Tech Stack
 
-_Likely to change soon._
-
 ### Backend
 * Scala
 * PekkoHTTP
 * Nginx
 
 ### Cloud
-* AWS Lambda (for [clustering](serverless/alpr_clusters) and [counts](serverless/alpr_counts))
+* AWS Lambda (for [region segmenting](serverless/alpr_clusters) and [counts](serverless/alpr_counts))
 * AWS S3
 * AWS ECR
+* Cloudflare as DNS + Proxy
+* Directus CDN
 
 ### Frontend
 * Vue3
@@ -39,9 +39,8 @@ _Likely to change soon._
 * Vue Leaflet (mapping library)
 
 ### Services
-* OpenStreetMap - Overpass API
+* OpenStreetMap - Overpass API, Basic Map Tiles
 * Nominatim - Geocoding
-* Stadia Maps - Map Tiles
 
 ## Usage
 
@@ -60,6 +59,10 @@ _Likely to change soon._
 1. `cd shotgun`
 2. `sbt run`
 
+### Building for Production
+
+See [Dockerfile](./Dockerfile).
+
 ## Contributing
 
 We welcome contributions from anyone. Here's how you can help:
diff --git a/webapp/public/donate.webp b/webapp/public/donate.webp
new file mode 100644
index 0000000..7644f2b
Binary files /dev/null and b/webapp/public/donate.webp differ
diff --git a/webapp/public/torches.webp b/webapp/public/torches.webp
deleted file mode 100644
index 6bc78db..0000000
Binary files a/webapp/public/torches.webp and /dev/null differ
diff --git a/webapp/src/assets/main.css b/webapp/src/assets/main.css
index 7d65277..3491c0a 100644
--- a/webapp/src/assets/main.css
+++ b/webapp/src/assets/main.css
@@ -1,44 +1,169 @@
+/* Modern CSS Custom Properties */
+:root {
+  --df-background-color: white;
+  --df-blue: rgb(18, 151, 195);
+  
+  /* Modern Typography Scale */
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  
+  /* Responsive font sizes */
+  --font-size-body: clamp(1rem, 2.5vw, 1.125rem);
+  --line-height-base: 1.6;
+  --line-height-relaxed: 1.75;
+  
+  /* Spacing scale */
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+}
+
+/* Improved base typography */
+html {
+  font-size: 16px; /* Base font size for rem calculations */
+}
+
+body {
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-relaxed);
+  font-feature-settings: "kern" 1, "liga" 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+}
+
+/* Modern link styles */
 a {
-  font-weight: bold;
+  font-weight: 600;
   color: var(--df-blue);
   text-decoration: none;
+  transition: color 0.2s ease-in-out;
+}
+
+a:hover {
+  color: color-mix(in srgb, var(--df-blue) 80%, black);
 }
 
 /* underline only simple <a> elements */
 a:not([class]):hover {
   text-decoration: underline;
-}
-
-:root {
-  --df-background-color: white;
-  --df-text-color: #ccc;
-  --df-blue: rgb(18, 151, 195);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
 }
 
 .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-bar a {
   background: var(--df-background-color) !important;
 }
 
-.leaflet-bar a {
-  color: var(--df-text-color) !important;
-}
-
 .marker-cluster span {
   /* changing to dark mode should not affect the map yet */
   color: #000000 !important;
 }
 
-p {
-  font-family: "PT Serif", serif;
-  /* font-size: 1.1em; */
+/* Content elements use serif for better readability */
+p, li, blockquote, .content {
+  font-family: "PT Serif", Georgia, "Times New Roman", serif;
 }
 
+/* Modern paragraph styling */
+p {
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-relaxed);
+  margin: var(--space-md) 0;
+}
+
+/* Responsive headings */
+h1, h2, h3, h4, h5, h6 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-top: var(--space-xl);
+  margin-bottom: var(--space-md);
+}
+
+/* Reduce heading top margins in Vuetify components */
+.v-card h1, .v-card h2, .v-card h3, .v-card h4, .v-card h5, .v-card h6, .v-card p,
+.v-dialog h1, .v-dialog h2, .v-dialog h3, .v-dialog h4, .v-dialog h5, .v-dialog h6, .v-dialog p,
+.v-sheet h1, .v-sheet h2, .v-sheet h3, .v-sheet h4, .v-sheet h5, .v-sheet h6, .v-sheet p,
+.v-toolbar h1, .v-toolbar h2, .v-toolbar h3, .v-toolbar h4, .v-toolbar h5, .v-toolbar h6, .v-toolbar p,
+.v-expansion-panel h1, .v-expansion-panel h2, .v-expansion-panel h3, .v-expansion-panel h4, .v-expansion-panel h5, .v-expansion-panel h6, .v-expansion-panel p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+h1 {
+  font-size: clamp(1.75rem, 5vw, 3rem);
+}
+
+h2 {
+  font-size: clamp(1.5rem, 4vw, 2.25rem);
+}
+
+h3 {
+  font-size: clamp(1.25rem, 3vw, 1.875rem);
+}
+
+/* Utility classes */
 .serif {
-  font-family: "PT Serif", serif;
+  font-family: "PT Serif", Georgia, "Times New Roman", serif;
 }
 
 .sans-serif {
-  font-family: unset !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+}
+
+/* Improved list styling */
+ul, ol {
+  margin: var(--space-md) 0;
+  padding-left: var(--space-lg);
+  line-height: var(--line-height-relaxed);
+}
+
+ul li, ol li {
+  margin: var(--space-sm) 0;
+}
+
+/* Better text spacing for improved readability */
+blockquote {
+  margin: var(--space-xl) 0;
+  padding: var(--space-md) var(--space-lg);
+  border-left: 4px solid var(--df-blue);
+  font-style: italic;
+  background-color: #f8f9fa;
+}
+
+/* Code styling */
+code, pre {
+  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
+  font-size: 0.875em;
+  background-color: rgb(33,33,33);
+  color: white;
+  padding: 0.125em 0.25em;
+  border-radius: 3px;
+}
+
+pre {
+  padding: var(--space-md);
+  overflow-x: auto;
+  border-radius: 6px;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+.narrow-text {
+  max-width: 85ch !important;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /* Prevent Scrolling Horizontally */
diff --git a/webapp/src/assets/typography.css b/webapp/src/assets/typography.css
deleted file mode 100644
index 146f5e3..0000000
--- a/webapp/src/assets/typography.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Typography rules */
-
-body {
-  line-height: 1.6;
-  margin: 0;
-  padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  font-weight: bold;
-}
-
-p {
-  margin: 0.8em 0;
-}
-
-ul, ol {
-  margin: 1em 0;
-  padding-left: 1.5em;
-}
-
-ul li, ol li {
-  margin: 0.5em 0;
-}
diff --git a/webapp/src/components/DiscordWarningDialog.vue b/webapp/src/components/DiscordWarningDialog.vue
index 4a3ad7c..2a834e3 100644
--- a/webapp/src/components/DiscordWarningDialog.vue
+++ b/webapp/src/components/DiscordWarningDialog.vue
@@ -29,8 +29,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue';
-
 const props = defineProps<{ modelValue: boolean; discordUrl: string }>();
 const emit = defineEmits(['update:modelValue', 'proceed']);
 
diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue
index 64f6f31..2fb750a 100644
--- a/webapp/src/components/layout/Footer.vue
+++ b/webapp/src/components/layout/Footer.vue
@@ -50,15 +50,15 @@
 
         <!-- Copyright -->
         <v-col
-          class="text-center serif copyright d-flex align-center justify-center text-grey-darken-1"
+          class="text-center d-flex align-center justify-center text-grey-darken-1"
           cols="12"
           sm="6"
         >
-        <div>
-          <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
-          <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
-          <p class="mt-4">v1.1.0</p>
-        </div>
+          <div class="copyright">
+            <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
+            <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
+            <p class="mt-4">v1.1.0</p>
+          </div>
         </v-col>
       </v-row>
     </v-container>
@@ -66,7 +66,6 @@
 </template>
 
 <script setup lang="ts">
-import { icon } from 'leaflet';
 import { computed } from 'vue';
 import { useTheme } from 'vuetify';
 const theme = useTheme();
@@ -92,7 +91,8 @@ const externalLinks = [
 .custom-icon {
   opacity: var(--v-medium-emphasis-opacity);
 }
-.copyright {
+.copyright p {
   font-size: 0.85rem;
+  line-height: 0.5rem;
 }
 </style>
diff --git a/webapp/src/components/layout/Hero.vue b/webapp/src/components/layout/Hero.vue
index 44e5900..8979564 100644
--- a/webapp/src/components/layout/Hero.vue
+++ b/webapp/src/components/layout/Hero.vue
@@ -41,6 +41,10 @@ const props = defineProps({
     type: Number,
     default: 0.6,
   },
+  backgroundPosition: {
+    type: String,
+    default: 'center center',
+  },
 });
 
 const target = computed(() =>
@@ -51,7 +55,7 @@ const heroStyle = computed(() => {
   if (props.gradient) {
     return `background: ${props.gradient};`;
   } else if (props.imageUrl) {
-    return `background: url('${props.imageUrl}') no-repeat center center / cover; --hero-opacity: ${props.opacity};`;
+    return `background: url('${props.imageUrl}') no-repeat ${props.backgroundPosition} / cover; --hero-opacity: ${props.opacity};`;
   }
   return '';
 });
diff --git a/webapp/src/layouts/DefaultLayout.vue b/webapp/src/layouts/DefaultLayout.vue
index 2fa21ca..8759a16 100644
--- a/webapp/src/layouts/DefaultLayout.vue
+++ b/webapp/src/layouts/DefaultLayout.vue
@@ -3,7 +3,7 @@
     <slot name="header" />
 
     <!-- Main content -->
-    <main class="mb-16">
+    <main :class="{ 'mb-16': !noBottomMargin }">
       <slot />
     </main>
 
@@ -14,4 +14,11 @@
 
 <script setup lang="ts">
 import Footer from '../components/layout/Footer.vue'
+
+defineProps({
+  noBottomMargin: {
+    type: Boolean,
+    default: false,
+  },
+})
 </script>
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index d8b42c7..3d8506a 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -49,26 +49,19 @@ const router = createRouter({
     },
     {
       path: '/report',
-      name: 'reportChoose',
-      component: () => import('../views/ReportBase.vue'),
-      children: [
-        {
-          path: '',
-          name: 'report',
-          component: () => import('../views/ReportChoose.vue'),
-          meta: {
-            title: 'Submit Cameras | DeFlock'
-          },
-        },
-        {
-          path: '/report/id',
-          name: 'reportID',
-          component: () => import('../views/ReportID.vue'),
-          meta: {
-            title: 'Submit Cameras | DeFlock'
-          }
-        },
-      ]
+      name: 'report',
+      component: () => import('../views/ReportChoose.vue'),
+      meta: {
+        title: 'Submit Cameras | DeFlock'
+      }
+    },
+    {
+      path: '/report/id',
+      name: 'reportID',
+      component: () => import('../views/ReportID.vue'),
+      meta: {
+        title: 'Submit Cameras | DeFlock'
+      }
     },
     {
       path: '/council',
@@ -138,6 +131,9 @@ const router = createRouter({
       path: '/foia',
       name: 'foia',
       component: () => import('../views/FOIA.vue'),
+      meta: {
+        title: 'How to Request Public Records | DeFlock'
+      }
     },
     {
       path: '/identify',
diff --git a/webapp/src/views/404.vue b/webapp/src/views/404.vue
index 238adc2..4825d9a 100644
--- a/webapp/src/views/404.vue
+++ b/webapp/src/views/404.vue
@@ -1,21 +1,25 @@
 <template>
-  <v-container>
+  <DefaultLayout>
     <div class="text-center">
       <h1>Page Not Found</h1>
 
       <div class="mt-8 mb-16">
         <v-img height="300" src="/404.webp" />
-        <p class="caption">just like the license plate this guy is searching for</p>
+        <p class="caption">... just like the license plate this guy is searching for.</p>
       </div>
 
       <v-btn color="primary" to="/"><v-icon start>mdi-home</v-icon>Home</v-btn>
     </div>
-  </v-container>
+  </DefaultLayout>
 </template>
 
+<script setup lang="ts">
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+</script>
+
 <style scoped>
 .caption {
   font-size: 1.2rem;
-  color: #666;
+  color: var(--v-theme-on-surface);
 }
 </style>
diff --git a/webapp/src/views/AboutView.vue b/webapp/src/views/AboutView.vue
index b4dfa10..888eca8 100644
--- a/webapp/src/views/AboutView.vue
+++ b/webapp/src/views/AboutView.vue
@@ -1,86 +1,59 @@
 <template>
-  <v-container max-width="1000" class="mb-16">
-    <h2>About Us</h2>
-    <p>
-      Welcome to DeFlock, your go-to resource for understanding and addressing the growing presence of Automated License Plate Readers (ALPRs) in our communities.
-    </p>
-
-    <h2>Our Mission</h2>
-    <p>
-      Our mission is simple: to shine a light on the widespread use of ALPR technology, raise awareness about the threats it poses to personal privacy and civil liberties, and empower the public to take action. ALPRs are increasingly being deployed by law enforcement and private companies without the public's full understanding or consent, and they collect vast amounts of data on our movements, often without any real oversight.
-    </p>
-
-    <h2>Why This Matters</h2>
-    <p>
-      Privacy is a fundamental right, and the growing use of ALPRs threatens to erode it. Every day, ALPRs capture and store details about the movements of millions of innocent people, creating a massive database that can be used for anything from routine surveillance to potentially more nefarious purposes. This constant monitoring can deter people from exercising their freedoms, like attending protests or engaging in other forms of free expression, which should concern all of us.
-    </p>
-
-    <h2>What We Do</h2>
-    <div class="ml-4">
-      <h3>Educate</h3>
+  <DefaultLayout>
+    <v-container class="narrow-text">
+      <h2>About Us</h2>
       <p>
-        We provide easy-to-understand information about what ALPRs are, how they work, and why you should care.
+        Welcome to DeFlock, your go-to resource for understanding and addressing the growing presence of Automated License Plate Readers (ALPRs) in our communities.
       </p>
-
-      <h3>Report &amp; Track</h3>
+  
+      <h2>Our Mission</h2>
       <p>
-        Through our platform, you can report locations where you spot ALPRs, and view an interactive map showing where these surveillance devices are deployed.
+        Our mission is simple: to shine a light on the widespread use of ALPR technology, raise awareness about the threats it poses to personal privacy and civil liberties, and empower the public to take action. ALPRs are increasingly being deployed by law enforcement and private companies without the public's full understanding or consent, and they collect vast amounts of data on our movements, often without any real oversight.
       </p>
-
-      <h3>Advocate for Change</h3>
+  
+      <h2>Why This Matters</h2>
       <p>
-        We encourage communities to stand up against the unchecked spread of these surveillance systems. Together, we can push for greater accountability, stronger privacy protections, and a rollback of invasive surveillance practices.
+        Privacy is a fundamental right, and the growing use of ALPRs threatens to erode it. Every day, ALPRs capture and store details about the movements of millions of innocent people, creating a massive database that can be used for anything from routine surveillance to potentially more nefarious purposes. This constant monitoring can deter people from exercising their freedoms, like attending protests or engaging in other forms of free expression, which should concern all of us.
       </p>
-    </div>
-
-    <h2>Get Involved</h2>
-    <p>
-      Want to help us in our mission? Here are a few ways you can get involved:
-    </p>
-    <div class="ml-4">
-      <h3>Report ALPRs</h3>
+  
+      <h2>What We Do</h2>
+      <div class="ml-4">
+        <h3>Educate</h3>
+        <p>
+          We provide easy-to-understand information about what ALPRs are, how they work, and why you should care.
+        </p>
+  
+        <h3>Report &amp; Track</h3>
+        <p>
+          Through our platform, you can report locations where you spot ALPRs, and view an interactive map showing where these surveillance devices are deployed.
+        </p>
+  
+        <h3>Advocate for Change</h3>
+        <p>
+          We encourage communities to stand up against the unchecked spread of these surveillance systems. Together, we can push for greater accountability, stronger privacy protections, and a rollback of invasive surveillance practices.
+        </p>
+      </div>
+  
+      <h2>Get Involved</h2>
       <p>
-        If you spot an ALPR in your community, <router-link to="/report">let us know</router-link>! Your reports help us build a more comprehensive picture of where these devices are being used.
+        Want to help us in our mission? Here are a few ways you can get involved:
       </p>
-
-      <h3>Spread the Word</h3>
-      <p>
-        Share our site with your friends, family, and social networks to help raise awareness about the dangers of ALPRs.
-      </p>
-    </div>
-  </v-container>
-
-  <Footer />
+      <div class="ml-4">
+        <h3>Report ALPRs</h3>
+        <p>
+          If you spot an ALPR in your community, <router-link to="/report">let us know</router-link>! Your reports help us build a more comprehensive picture of where these devices are being used.
+        </p>
+  
+        <h3>Spread the Word</h3>
+        <p>
+          Share our site with your friends, family, and social networks to help raise awareness about the dangers of ALPRs.
+        </p>
+      </div>
+    </v-container>
+  </DefaultLayout>
 </template>
 
 <script setup lang="ts">
-import Footer from '@/components/layout/Footer.vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 </script>
 
-<style scoped>
-/* TODO: put this all in one place, also in what-is view */
-h2 {
-  margin-top: 2rem;
-}
-
-h3 {
-  margin-top: 1.25rem;
-}
-
-p {
-  margin-top: 0.5rem;
-}
-
-.flex-image {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  margin-top: 0.5rem;
-}
-
-/* as you can see, this one is the most updated */
-a {
-  color: var(green);
-  text-decoration: none;
-}
-</style>
diff --git a/webapp/src/views/ContactView.vue b/webapp/src/views/ContactView.vue
index ca10bed..8ea96a5 100644
--- a/webapp/src/views/ContactView.vue
+++ b/webapp/src/views/ContactView.vue
@@ -1,5 +1,6 @@
 <template>
-  <v-container class="mb-16">
+<DefaultLayout>
+  <v-container>
     <v-row justify="center" class="mb-8">
       <v-col cols="12" md="8" class="text-center">
         <h1 class="text-h3 font-weight-bold mb-4">Contact Us</h1>
@@ -126,12 +127,11 @@
       </v-col>
     </v-row>
   </v-container>
-  
-  <Footer />
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
-import Footer from '@/components/layout/Footer.vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import { useTheme } from 'vuetify';
 import { computed, ref } from 'vue';
 
@@ -141,8 +141,6 @@ const showContactOptions = ref(false);
 </script>
  
 <style lang="css" scoped>
-@import url('@/assets/typography.css');
-
 .card-title-wrap {
   white-space: normal !important;
   overflow: visible !important;
diff --git a/webapp/src/views/CouncilView.vue b/webapp/src/views/CouncilView.vue
index a7ef3e2..d99e1db 100644
--- a/webapp/src/views/CouncilView.vue
+++ b/webapp/src/views/CouncilView.vue
@@ -1,375 +1,377 @@
 <template>
-<Hero
-  imageUrl="/city-council.jpg"
-  title="City Council"
-  description="Block ALPRs in your community using the proven technique of petitioning your city or town's council."
-/>
+<DefaultLayout>
+  <template #header>
+    <Hero
+      imageUrl="/city-council.jpg"
+      title="City Council"
+      description="Block ALPRs in your community using the proven technique of petitioning your city or town's council."
+    />
+  </template>
 
-<v-container class="mb-16">
-  <!-- Introduction Section -->
-  <v-row>
-    <v-col cols="12" md="10" lg="8" class="mx-auto">
-      <div class="text-center mb-8">
-        <v-icon size="64" color="var(--df-blue)" class="mb-4">mdi-account-voice</v-icon>
-        <h2 class="text-h4 mb-4 font-weight-bold">Your Voice Matters Locally</h2>
-        <p class="text-h6 text-medium-emphasis serif">
-          City council members rely on us to understand public opinion. Here's your step-by-step guide to effectively advocate
-          against mass surveillance systems with your local representatives.
-        </p>
-      </div>
-    </v-col>
-  </v-row>
+  <v-container>
+    <!-- Introduction Section -->
+    <v-row>
+      <v-col cols="12" md="10" lg="8" class="mx-auto">
+        <div class="text-center mb-8">
+          <v-icon size="64" color="var(--df-blue)" class="mb-4">mdi-account-voice</v-icon>
+          <h2 class="text-h4 mb-4 font-weight-bold">Your Voice Matters Locally</h2>
+          <p class="text-h6 text-medium-emphasis serif">
+            City council members rely on us to understand public opinion. Here's your step-by-step guide to effectively advocate
+            against mass surveillance systems with your local representatives.
+          </p>
+        </div>
+      </v-col>
+    </v-row>
 
-  <!-- Talking Points -->
-  <v-row class="mb-8">
-    <v-col cols="12" md="10" lg="8" class="mx-auto">
-      <v-card 
-        class="pa-4" 
-        elevation="2" 
-        rounded="lg"
-        hover
-        href="https://consumerrights.wiki/w/Common_Questions,_Arguments,_%26_Responses_when_discussing_Flock_Surveillance"
-        target="_blank"
-      >
-        <div class="d-flex align-center justify-space-between">
-          <div class="d-flex align-center">
-            <v-icon color="primary" class="mr-3 align-self-center">mdi-comment-alert</v-icon>
-            <div>
-              <h4 class="text-h6 font-weight-bold mb-1">Talking Points</h4>
-              <p class="text-body-2 mb-0">Common questions, arguments & responses for discussing surveillance</p>
+    <!-- Talking Points -->
+    <v-row class="mb-8">
+      <v-col cols="12" md="10" lg="8" class="mx-auto">
+        <v-card 
+          class="pa-4" 
+          elevation="2" 
+          rounded="lg"
+          hover
+          href="https://consumerrights.wiki/w/Common_Questions,_Arguments,_%26_Responses_when_discussing_Flock_Surveillance"
+          target="_blank"
+        >
+          <div class="d-flex align-center justify-space-between">
+            <div class="d-flex align-center">
+              <v-icon color="primary" class="mr-3 align-self-center">mdi-comment-alert</v-icon>
+              <div>
+                <h4 class="text-h6 font-weight-bold mb-1">Talking Points</h4>
+                <p class="text-body-2 mb-0">Common questions, arguments & responses for discussing surveillance</p>
+              </div>
             </div>
+            <v-icon color="primary" class="align-self-center">mdi-open-in-new</v-icon>
           </div>
-          <v-icon color="primary" class="align-self-center">mdi-open-in-new</v-icon>
-        </div>
-      </v-card>
-    </v-col>
-  </v-row>
+        </v-card>
+      </v-col>
+    </v-row>
 
-  <!-- Step 1: One-on-One Meetings -->
-  <v-row class="mb-12">
-    <v-col cols="12" md="10" lg="8" class="mx-auto">
-      <v-card class="pa-6" elevation="3" rounded="lg">
-        <div class="d-flex align-center mb-4">
-          <v-avatar size="48" color="primary" class="mr-4">
-            <span class="text-h5 font-weight-bold white--text">1</span>
-          </v-avatar>
-          <div>
-            <h3 class="text-h5 font-weight-bold mb-1">Meet Council Members Privately</h3>
-            <p class="text-body-2 text-medium-emphasis mb-0">Start with personal conversations - often the most effective approach</p>
-          </div>
-        </div>
-
-        <p class="text-body-1 mb-4">
-          Personal conversations with council members are often the most effective way to influence their vote. 
-          These private meetings allow for deeper discussion and help them understand the human impact of surveillance policies.
-        </p>
-
-        <v-row>
-          <v-col cols="12" md="6">
-            <h4 class="text-h6 mb-3 d-flex align-center">
-              <v-icon color="primary" class="mr-2">mdi-calendar-plus</v-icon>
-              How to Schedule
-            </h4>
-            <v-list density="compact">
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Contact their office via phone or email</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Suggest meeting at a local coffee shop or their office</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Request just 15-20 minutes of their time</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Mention you're a constituent concerned about ALPRs</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-col>
-          <v-col cols="12" md="6">
-            <h4 class="text-h6 mb-3 d-flex align-center">
-              <v-icon color="primary" class="mr-2">mdi-lightbulb-on</v-icon>
-              Meeting Tips
-            </h4>
-            <v-list density="compact">
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Bring a brief printed summary of key points</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Share personal concerns about privacy and community impact</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Ask about their position and listen to their concerns</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Respond to their concerns with your ideas</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-col>
-        </v-row>
-
-        <v-divider class="my-4"></v-divider>
-
-        <div>
-          <h4 class="text-h6 font-weight-bold mb-2">Sample Email Template</h4>
-          <v-card class="pa-4" variant="tonal">
-            <p class="mb-0">
-              Hello [Council Member], I'm a [city] resident concerned about the upcoming 
-              surveillance technology contract. Would you have 15 minutes to discuss this over coffee? I'd love to share some community 
-              concerns and hear your thoughts.
-            </p>
-          </v-card>
-        </div>
-      </v-card>
-    </v-col>
-  </v-row>
-
-  <!-- Step 2: Public Speaking -->
-  <v-row class="mb-12">
-    <v-col cols="12" md="10" lg="8" class="mx-auto">
-      <v-card class="pa-6" elevation="3" rounded="lg">
-        <div class="d-flex align-center mb-4">
-          <v-avatar size="48" color="primary" class="mr-4">
-            <span class="text-h5 font-weight-bold white--text">2</span>
-          </v-avatar>
-          <div>
-            <h3 class="text-h5 font-weight-bold mb-1">Speak at Council Meetings</h3>
-            <p class="text-body-2 text-medium-emphasis mb-0">Create an official record and show public opposition</p>
-          </div>
-        </div>
-
-        <p class="text-body-1 mb-4">
-          Public comment at council meetings creates an official record of community opposition and demonstrates 
-          to council members that constituents are paying attention to their votes on surveillance issues.
-        </p>
-
-        <v-row>
-          <v-col cols="12" md="6">
-            <h4 class="text-h6 mb-3 d-flex align-center">
-              <v-icon color="primary" class="mr-2">mdi-clock</v-icon>
-              Before the Meeting
-            </h4>
-            <v-list density="compact">
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Check meeting schedule and agenda online</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Sign up for public comment (often required)</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Prepare 2-3 minute statement (practice timing)</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Bring a copy of your statement</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-col>
-          <v-col cols="12" md="6">
-            <h4 class="text-h6 mb-3 d-flex align-center">
-              <v-icon color="primary" class="mr-2">mdi-presentation</v-icon>
-              During the Meeting
-            </h4>
-            <v-list density="compact">
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Arrive on time or early</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>State your name and connection to the city</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Speak clearly and maintain eye contact</v-list-item-title>
-              </v-list-item>
-              <v-list-item prepend-icon="mdi-check">
-                <v-list-item-title>Stay respectful and thank council for their time</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-col>
-        </v-row>
-
-        <v-divider class="my-4"></v-divider>
-
-        <v-alert type="info" variant="tonal" class="mb-4">
-          <strong>Pro Tip:</strong> Focus on how ALPRs affect YOUR community specifically. Personal stories and local examples are more compelling than abstract arguments.
-        </v-alert>
-
-        <!-- Example Videos -->
-        <div class="mt-6">
-          <h4 class="text-h6 font-weight-bold mb-4 d-flex align-center">
-            <v-icon color="primary" class="mr-2">mdi-video</v-icon>
-            Example Speeches
-          </h4>
-          <v-row>
-            <v-col v-for="video in videos" :key="video.url" cols="12" sm="6">
-              <v-card 
-                class="video-card-compact pa-4 d-flex align-center"
-                elevation="2" 
-                rounded="lg"
-                hover
-                @click="openVideo(video.url)"
-              >
-                <v-avatar size="48" color="primary" class="mr-3 video-play-button-compact">
-                  <v-icon size="24" color="white">mdi-play</v-icon>
-                </v-avatar>
-                
-                <div class="flex-grow-1">
-                  <h4 class="text-body-1 font-weight-bold mb-0">{{ video.location }}</h4>
-                  <p class="text-caption text-medium-emphasis mb-0">City Council Meeting</p>
-                </div>
-              </v-card>
-            </v-col>
-          </v-row>
-        </div>
-      </v-card>
-    </v-col>
-  </v-row>
-
-  <!-- Success Stories -->
-  <v-row class="mb-12">
-    <v-col cols="12" md="10" lg="8" class="mx-auto">
-      <div ref="tableRef" class="intersection-target">
+    <!-- Step 1: One-on-One Meetings -->
+    <v-row class="mb-12">
+      <v-col cols="12" md="10" lg="8" class="mx-auto">
         <v-card class="pa-6" elevation="3" rounded="lg">
           <div class="d-flex align-center mb-4">
             <v-avatar size="48" color="primary" class="mr-4">
-              <v-icon size="24" color="white">mdi-trophy</v-icon>
+              <span class="text-h5 font-weight-bold white--text">1</span>
             </v-avatar>
             <div>
-              <h3 class="text-h5 font-weight-bold mb-1">Recent Victories</h3>
-              <p class="text-body-2 text-medium-emphasis mb-0">Communities across the country are winning</p>
+              <h3 class="text-h5 font-weight-bold mb-1">Meet Council Members Privately</h3>
+              <p class="text-body-2 text-medium-emphasis mb-0">Start with personal conversations - often the most effective approach</p>
             </div>
           </div>
-        
-        <v-data-table
-          :headers="headers"
-          :items="citiesRejectingFlock"
-          :loading="loading"
-          :items-per-page="10"
-          :items-per-page-options="[10, 25, 50]"
-          class="elevation-0"
-          density="comfortable"
-          hover
-          show-expand
-          item-value="cityState"
-        >
-          <template v-slot:header.cityState="{ column }">
-            <div class="d-flex align-center text-medium-emphasis">
-              <v-icon icon="mdi-map-marker" size="18" class="mr-2" />
-              <span class="text-caption font-weight-medium">{{ column.title }}</span>
-            </div>
-          </template>
 
-          <template v-slot:header.MonthYear="{ column }">
-            <div class="d-flex align-center text-medium-emphasis">
-              <v-icon icon="mdi-calendar-month" size="18" class="mr-2" />
-              <span class="text-caption font-weight-medium">{{ column.title }}</span>
-            </div>
-          </template>
-
-          <template v-slot:header.Outcome="{ column }">
-            <div class="d-flex align-center text-medium-emphasis">
-              <v-icon icon="mdi-trophy-outline" size="18" class="mr-2" />
-              <span class="text-caption font-weight-medium">{{ column.title }}</span>
-            </div>
-          </template>
-
-          <template v-slot:item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
-            <v-btn
-              :append-icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-              :text="isExpanded(internalItem) ? 'Collapse' : 'More info'"
-              class="text-none"
-              color="medium-emphasis"
-              size="small"
-              variant="text"
-              border
-              slim
-              @click="toggleExpand(internalItem)"
-            />
-          </template>
-
-          <template v-slot:expanded-row="{ columns, item }">
-            <tr>
-              <td :colspan="columns.length" class="pa-4">
-                <div v-html="item.description" class="text-body-1" style="line-height: 1.6;"></div>
-              </td>
-            </tr>
-          </template>
-
-          <template v-slot:item.cityState="{ item }">
-            <span class="font-weight-bold">{{ item.cityState }}</span>
-          </template>
-          
-          <template v-slot:item.MonthYear="{ item }">
-            {{ item.MonthYear }}
-          </template>
-          
-          <template v-slot:item.Outcome="{ item }">
-            <v-icon icon="mdi-check-bold" size="18" class="mr-2" />
-            <span class="font-weight-bold">{{ item.Outcome }}</span>
-          </template>
-          
-          <template v-slot:loading>
-            <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
-          </template>
-          
-          <template v-slot:no-data>
-            <div class="text-center py-8">
-              <v-icon size="48" color="grey-lighten-1" class="mb-4">mdi-database-off</v-icon>
-              <div class="text-h6 text-medium-emphasis">No victories found</div>
-              <div class="text-body-2 text-medium-emphasis mt-2">
-                Check your connection and try again
-              </div>
-              <v-btn
-                @click="fetchRecentWins"
-                color="primary"
-                variant="outlined"
-                class="mt-4"
-                prepend-icon="mdi-refresh"
-              >
-                Retry
-              </v-btn>
-            </div>
-          </template>
-        </v-data-table>
-
-        <div v-if="lastUpdated" class="mt-4 text-caption text-medium-emphasis text-center">
-          Last updated: {{ formatDate(lastUpdated) }}
-        </div>
-        </v-card>
-      </div>
-    </v-col>
-  </v-row>
-
-  <!-- Community Support Section -->
-  <v-row>
-    <v-col cols="12" md="10" lg="8" class="mx-auto">
-      <v-card class="pa-6" elevation="3" rounded="lg" color="primary" variant="tonal">
-        <div class="text-center">
-          <v-icon size="64" color="primary" class="mb-4">mdi-comment-question</v-icon>
-          <h3 class="text-h4 font-weight-bold mb-4">Need Help or Have Questions?</h3>
-          <p class="text-h6 mb-6 serif">
-            Join our supportive community of activists and experienced speakers who are ready to help you succeed.
+          <p class="text-body-1 mb-4">
+            Personal conversations with council members are often the most effective way to influence their vote. 
+            These private meetings allow for deeper discussion and help them understand the human impact of surveillance policies.
           </p>
-          
-          <v-btn
-            href="https://discord.gg/aV7v4R3sKT"
-            target="_blank"
-            size="large"
-            color="primary"
-            class="mr-4 mb-4"
-            prepend-icon="mdi-discord"
-          >
-            Join #campaigning Channel
-          </v-btn>
-        </div>
-      </v-card>
-    </v-col>
-  </v-row>
-</v-container>
 
-<Footer/>
+          <v-row>
+            <v-col cols="12" md="6">
+              <h4 class="text-h6 mb-3 d-flex align-center">
+                <v-icon color="primary" class="mr-2">mdi-calendar-plus</v-icon>
+                How to Schedule
+              </h4>
+              <v-list density="compact">
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Contact their office via phone or email</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Suggest meeting at a local coffee shop or their office</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Request just 15-20 minutes of their time</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Mention you're a constituent concerned about ALPRs</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-col>
+            <v-col cols="12" md="6">
+              <h4 class="text-h6 mb-3 d-flex align-center">
+                <v-icon color="primary" class="mr-2">mdi-lightbulb-on</v-icon>
+                Meeting Tips
+              </h4>
+              <v-list density="compact">
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Bring a brief printed summary of key points</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Share personal concerns about privacy and community impact</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Ask about their position and listen to their concerns</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Respond to their concerns with your ideas</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4"></v-divider>
+
+          <div>
+            <h4 class="text-h6 font-weight-bold mb-2">Sample Email Template</h4>
+            <v-card class="pa-4" variant="tonal">
+              <p class="mb-0">
+                Hello [Council Member], I'm a [city] resident concerned about the upcoming 
+                surveillance technology contract. Would you have 15 minutes to discuss this over coffee? I'd love to share some community 
+                concerns and hear your thoughts.
+              </p>
+            </v-card>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Step 2: Public Speaking -->
+    <v-row class="mb-12">
+      <v-col cols="12" md="10" lg="8" class="mx-auto">
+        <v-card class="pa-6" elevation="3" rounded="lg">
+          <div class="d-flex align-center mb-4">
+            <v-avatar size="48" color="primary" class="mr-4">
+              <span class="text-h5 font-weight-bold white--text">2</span>
+            </v-avatar>
+            <div>
+              <h3 class="text-h5 font-weight-bold mb-1">Speak at Council Meetings</h3>
+              <p class="text-body-2 text-medium-emphasis mb-0">Create an official record and show public opposition</p>
+            </div>
+          </div>
+
+          <p class="text-body-1 mb-4">
+            Public comment at council meetings creates an official record of community opposition and demonstrates 
+            to council members that constituents are paying attention to their votes on surveillance issues.
+          </p>
+
+          <v-row>
+            <v-col cols="12" md="6">
+              <h4 class="text-h6 mb-3 d-flex align-center">
+                <v-icon color="primary" class="mr-2">mdi-clock</v-icon>
+                Before the Meeting
+              </h4>
+              <v-list density="compact">
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Check meeting schedule and agenda online</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Sign up for public comment (often required)</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Prepare 2-3 minute statement (practice timing)</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Bring a copy of your statement</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-col>
+            <v-col cols="12" md="6">
+              <h4 class="text-h6 mb-3 d-flex align-center">
+                <v-icon color="primary" class="mr-2">mdi-presentation</v-icon>
+                During the Meeting
+              </h4>
+              <v-list density="compact">
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Arrive on time or early</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>State your name and connection to the city</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Speak clearly and maintain eye contact</v-list-item-title>
+                </v-list-item>
+                <v-list-item prepend-icon="mdi-check">
+                  <v-list-item-title>Stay respectful and thank council for their time</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4"></v-divider>
+
+          <v-alert type="info" variant="tonal" class="mb-4">
+            <strong>Pro Tip:</strong> Focus on how ALPRs affect YOUR community specifically. Personal stories and local examples are more compelling than abstract arguments.
+          </v-alert>
+
+          <!-- Example Videos -->
+          <div class="mt-6">
+            <h4 class="text-h6 font-weight-bold mb-4 d-flex align-center">
+              <v-icon color="primary" class="mr-2">mdi-video</v-icon>
+              Example Speeches
+            </h4>
+            <v-row>
+              <v-col v-for="video in videos" :key="video.url" cols="12" sm="6">
+                <v-card 
+                  class="video-card-compact pa-4 d-flex align-center"
+                  elevation="2" 
+                  rounded="lg"
+                  hover
+                  @click="openVideo(video.url)"
+                >
+                  <v-avatar size="48" color="primary" class="mr-3 video-play-button-compact">
+                    <v-icon size="24" color="white">mdi-play</v-icon>
+                  </v-avatar>
+                  
+                  <div class="flex-grow-1">
+                    <h4 class="text-body-1 font-weight-bold mb-0">{{ video.location }}</h4>
+                    <p class="text-caption text-medium-emphasis mb-0">City Council Meeting</p>
+                  </div>
+                </v-card>
+              </v-col>
+            </v-row>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Success Stories -->
+    <v-row class="mb-12">
+      <v-col cols="12" md="10" lg="8" class="mx-auto">
+        <div ref="tableRef" class="intersection-target">
+          <v-card class="pa-6" elevation="3" rounded="lg">
+            <div class="d-flex align-center mb-4">
+              <v-avatar size="48" color="primary" class="mr-4">
+                <v-icon size="24" color="white">mdi-trophy</v-icon>
+              </v-avatar>
+              <div>
+                <h3 class="text-h5 font-weight-bold mb-1">Recent Victories</h3>
+                <p class="text-body-2 text-medium-emphasis mb-0">Communities across the country are winning</p>
+              </div>
+            </div>
+          
+          <v-data-table
+            :headers="headers"
+            :items="citiesRejectingFlock"
+            :loading="loading"
+            :items-per-page="10"
+            :items-per-page-options="[10, 25, 50]"
+            class="elevation-0"
+            density="comfortable"
+            hover
+            show-expand
+            item-value="cityState"
+          >
+            <template v-slot:header.cityState="{ column }">
+              <div class="d-flex align-center text-medium-emphasis">
+                <v-icon icon="mdi-map-marker" size="18" class="mr-2" />
+                <span class="text-caption font-weight-medium">{{ column.title }}</span>
+              </div>
+            </template>
+
+            <template v-slot:header.MonthYear="{ column }">
+              <div class="d-flex align-center text-medium-emphasis">
+                <v-icon icon="mdi-calendar-month" size="18" class="mr-2" />
+                <span class="text-caption font-weight-medium">{{ column.title }}</span>
+              </div>
+            </template>
+
+            <template v-slot:header.Outcome="{ column }">
+              <div class="d-flex align-center text-medium-emphasis">
+                <v-icon icon="mdi-trophy-outline" size="18" class="mr-2" />
+                <span class="text-caption font-weight-medium">{{ column.title }}</span>
+              </div>
+            </template>
+
+            <template v-slot:item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
+              <v-btn
+                :append-icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                :text="isExpanded(internalItem) ? 'Collapse' : 'More info'"
+                class="text-none"
+                color="medium-emphasis"
+                size="small"
+                variant="text"
+                border
+                slim
+                @click="toggleExpand(internalItem)"
+              />
+            </template>
+
+            <template v-slot:expanded-row="{ columns, item }">
+              <tr>
+                <td :colspan="columns.length" class="pa-4">
+                  <div v-html="item.description" class="text-body-1" style="line-height: 1.6;"></div>
+                </td>
+              </tr>
+            </template>
+
+            <template v-slot:item.cityState="{ item }">
+              <span class="font-weight-bold">{{ item.cityState }}</span>
+            </template>
+            
+            <template v-slot:item.MonthYear="{ item }">
+              {{ item.MonthYear }}
+            </template>
+            
+            <template v-slot:item.Outcome="{ item }">
+              <v-icon icon="mdi-check-bold" size="18" class="mr-2" />
+              <span class="font-weight-bold">{{ item.Outcome }}</span>
+            </template>
+            
+            <template v-slot:loading>
+              <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
+            </template>
+            
+            <template v-slot:no-data>
+              <div class="text-center py-8">
+                <v-icon size="48" color="grey-lighten-1" class="mb-4">mdi-database-off</v-icon>
+                <div class="text-h6 text-medium-emphasis">No victories found</div>
+                <div class="text-body-2 text-medium-emphasis mt-2">
+                  Check your connection and try again
+                </div>
+                <v-btn
+                  @click="fetchRecentWins"
+                  color="primary"
+                  variant="outlined"
+                  class="mt-4"
+                  prepend-icon="mdi-refresh"
+                >
+                  Retry
+                </v-btn>
+              </div>
+            </template>
+          </v-data-table>
+
+          <div v-if="lastUpdated" class="mt-4 text-caption text-medium-emphasis text-center">
+            Last updated: {{ formatDate(lastUpdated) }}
+          </div>
+          </v-card>
+        </div>
+      </v-col>
+    </v-row>
+
+    <!-- Community Support Section -->
+    <v-row>
+      <v-col cols="12" md="10" lg="8" class="mx-auto">
+        <v-card class="pa-6" elevation="3" rounded="lg" color="primary" variant="tonal">
+          <div class="text-center">
+            <v-icon size="64" color="primary" class="mb-4">mdi-comment-question</v-icon>
+            <h3 class="text-h4 font-weight-bold mb-4">Need Help or Have Questions?</h3>
+            <p class="text-h6 mb-6 serif">
+              Join our supportive community of activists and experienced speakers who are ready to help you succeed.
+            </p>
+            
+            <v-btn
+              href="https://discord.gg/aV7v4R3sKT"
+              target="_blank"
+              size="large"
+              color="primary"
+              class="mr-4 mb-4"
+              prepend-icon="mdi-discord"
+            >
+              Join #campaigning Channel
+            </v-btn>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import Hero from '@/components/layout/Hero.vue';
-import Footer from '@/components/layout/Footer.vue';
 import { ref, onMounted, onUnmounted, nextTick } from 'vue';
 
 const sortMonthYearByDateDesc = (a: string, b: string) => {
diff --git a/webapp/src/views/DeflockApp.vue b/webapp/src/views/DeflockApp.vue
index 1c8f50a..d046508 100644
--- a/webapp/src/views/DeflockApp.vue
+++ b/webapp/src/views/DeflockApp.vue
@@ -1,4 +1,5 @@
 <template>
+<DefaultLayout no-bottom-margin>
   <div class="app-page">
     <!-- Hero Section -->
     <section class="hero-section">
@@ -218,11 +219,11 @@
       </v-container>
     </section>
   </div>
-  <Footer />
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
-import Footer from '@/components/layout/Footer.vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import { ref, computed } from 'vue';
 
 interface Feature {
diff --git a/webapp/src/views/DeflockAppDocs.vue b/webapp/src/views/DeflockAppDocs.vue
index 016b9e2..fca3936 100644
--- a/webapp/src/views/DeflockAppDocs.vue
+++ b/webapp/src/views/DeflockAppDocs.vue
@@ -1,111 +1,113 @@
 <template>
-<Hero 
-    title="App User Guide"
-    description="Learn how to use the Deflock app."
-    gradient="linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgb(var(--v-theme-secondary)) 100%)"
-/>
+<DefaultLayout>
+  <template #header>
+    <Hero 
+        title="App User Guide"
+        description="Learn how to use the Deflock app."
+        gradient="linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgb(var(--v-theme-secondary)) 100%)"
+    />
+  </template>
 
-<v-container class="documentation-content" fluid>
-  <div class="content-wrapper">
-    <v-row>
-      <!-- Desktop TOC Sidebar Column -->
-      <v-col 
-        v-if="!loading && !error && tocItems.length > 0" 
-        cols="12" 
-        md="3" 
-        lg="3" 
-        xl="2"
-        class="d-none d-md-block toc-column"
-      >
-      <v-card class="toc-sidebar" elevation="1" sticky>
-        <v-card-title class="text-h6 py-3">
-          <v-icon start>mdi-format-list-bulleted</v-icon>
-          Table of Contents
-        </v-card-title>
-        <v-divider />
-        <v-card-text class="py-2 toc-scrollable">
-          <nav class="toc-desktop">
-            <template v-for="item in tocItems" :key="item.id">
-              <div class="toc-item" :class="`toc-level-${item.level}`">
-                <button
-                  @click="scrollToSection(item.id)"
-                  class="toc-link"
-                  :class="{ 'toc-active': activeSection === item.id }"
-                >
-                  <span class="toc-text">{{ item.text }}</span>
-                </button>
-              </div>
-              
-              <!-- Render children recursively -->
-              <template v-if="item.children && item.children.length > 0">
-                <template v-for="child in item.children" :key="child.id">
-                  <div class="toc-item" :class="`toc-level-${child.level}`">
-                    <button
-                      @click="scrollToSection(child.id)"
-                      class="toc-link"
-                      :class="{ 'toc-active': activeSection === child.id }"
-                    >
-                      <span class="toc-text">{{ child.text }}</span>
-                    </button>
-                  </div>
-                  
-                  <!-- Third level -->
-                  <template v-if="child.children && child.children.length > 0">
-                    <div 
-                      v-for="grandchild in child.children" 
-                      :key="grandchild.id"
-                      class="toc-item" 
-                      :class="`toc-level-${grandchild.level}`"
-                    >
+  <v-container class="documentation-content" fluid>
+    <div class="content-wrapper">
+      <v-row>
+        <!-- Desktop TOC Sidebar Column -->
+        <v-col 
+          v-if="!loading && !error && tocItems.length > 0" 
+          cols="12" 
+          md="3" 
+          lg="3" 
+          xl="2"
+          class="d-none d-md-block toc-column"
+        >
+        <v-card class="toc-sidebar" elevation="1" sticky>
+          <v-card-title class="text-h6 py-3">
+            <v-icon start>mdi-format-list-bulleted</v-icon>
+            Table of Contents
+          </v-card-title>
+          <v-divider />
+          <v-card-text class="py-2 toc-scrollable">
+            <nav class="toc-desktop">
+              <template v-for="item in tocItems" :key="item.id">
+                <div class="toc-item" :class="`toc-level-${item.level}`">
+                  <button
+                    @click="scrollToSection(item.id)"
+                    class="toc-link"
+                    :class="{ 'toc-active': activeSection === item.id }"
+                  >
+                    <span class="toc-text">{{ item.text }}</span>
+                  </button>
+                </div>
+                
+                <!-- Render children recursively -->
+                <template v-if="item.children && item.children.length > 0">
+                  <template v-for="child in item.children" :key="child.id">
+                    <div class="toc-item" :class="`toc-level-${child.level}`">
                       <button
-                        @click="scrollToSection(grandchild.id)"
+                        @click="scrollToSection(child.id)"
                         class="toc-link"
-                        :class="{ 'toc-active': activeSection === grandchild.id }"
+                        :class="{ 'toc-active': activeSection === child.id }"
                       >
-                        <span class="toc-text">{{ grandchild.text }}</span>
+                        <span class="toc-text">{{ child.text }}</span>
                       </button>
                     </div>
+                    
+                    <!-- Third level -->
+                    <template v-if="child.children && child.children.length > 0">
+                      <div 
+                        v-for="grandchild in child.children" 
+                        :key="grandchild.id"
+                        class="toc-item" 
+                        :class="`toc-level-${grandchild.level}`"
+                      >
+                        <button
+                          @click="scrollToSection(grandchild.id)"
+                          class="toc-link"
+                          :class="{ 'toc-active': activeSection === grandchild.id }"
+                        >
+                          <span class="toc-text">{{ grandchild.text }}</span>
+                        </button>
+                      </div>
+                    </template>
                   </template>
                 </template>
               </template>
-            </template>
-          </nav>
-        </v-card-text>
-      </v-card>
-    </v-col>
+            </nav>
+          </v-card-text>
+        </v-card>
+      </v-col>
 
-    <!-- Main Content Column -->
-    <v-col 
-      :cols="12"
-      :md="(!loading && !error && tocItems.length > 0) ? 9 : 12"
-      :lg="(!loading && !error && tocItems.length > 0) ? 9 : 12"
-      :xl="(!loading && !error && tocItems.length > 0) ? 10 : 12"
-      class="content-column"
-    >
-      <div v-if="loading" class="text-center my-8">
-        <v-progress-circular indeterminate color="primary" size="64" />
-        <p class="mt-4">Loading user guide...</p>
-      </div>
-      
-      <div v-else-if="error" class="text-center my-8">
-        <v-alert type="error" variant="tonal" class="mb-4">
-          Failed to load user guide: {{ error }}
-        </v-alert>
-      </div>
-      
-      <article v-else-if="content" class="docs-content" v-html="content" />
-    </v-col>
-  </v-row>
-  </div>
-</v-container>
-
-<Footer />
+      <!-- Main Content Column -->
+      <v-col 
+        :cols="12"
+        :md="(!loading && !error && tocItems.length > 0) ? 9 : 12"
+        :lg="(!loading && !error && tocItems.length > 0) ? 9 : 12"
+        :xl="(!loading && !error && tocItems.length > 0) ? 10 : 12"
+        class="content-column"
+      >
+        <div v-if="loading" class="text-center my-8">
+          <v-progress-circular indeterminate color="primary" size="64" />
+          <p class="mt-4">Loading user guide...</p>
+        </div>
+        
+        <div v-else-if="error" class="text-center my-8">
+          <v-alert type="error" variant="tonal" class="mb-4">
+            Failed to load user guide: {{ error }}
+          </v-alert>
+        </div>
+        
+        <article v-else-if="content" class="docs-content" v-html="content" />
+      </v-col>
+    </v-row>
+    </div>
+  </v-container>
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, nextTick, watch } from 'vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import Hero from '@/components/layout/Hero.vue';
-import Footer from '@/components/layout/Footer.vue';
 
 interface CMSResponse {
   data: {
@@ -271,8 +273,6 @@ watch(content, () => {
 </script>
 
 <style scoped>
-@import url('@/assets/typography.css');
-
 /* Container styles */
 .documentation-content {
   padding: 2rem 0;
diff --git a/webapp/src/views/Donate.vue b/webapp/src/views/Donate.vue
index 590225a..d88cf7c 100644
--- a/webapp/src/views/Donate.vue
+++ b/webapp/src/views/Donate.vue
@@ -1,16 +1,18 @@
 <template>
-  <v-container fluid class="sponsor-page">
-    <!-- Hero Section -->
-    <v-row justify="center" class="hero-section-sponsor text-center mb-4">
-      <v-col cols="12" md="8">
-        <h1 class="mb-4">Join Us in Protecting Privacy</h1>
-        <p class="mb-4">
-          DeFlock empowers individuals to understand and combat the rise of Automatic License Plate Readers (ALPRs). Your support helps us spread awareness, maintain infrastructure, and advocate for privacy rights.
-        </p>
-        <v-btn href="https://github.com/sponsors/frillweeman" target="_blank" color="rgb(18, 151, 195)" class="mt-4">Donate Now</v-btn>
-      </v-col>
-    </v-row>
+<DefaultLayout>
+  <template #header>
+    <Hero
+      title="Support DeFlock"
+      subtitle="Your contributions help us fight for privacy and raise awareness about ALPR technology."
+      image-url="/donate.webp"
+      background-position="0 25%"
+      button-text="Donate Now"
+      button-href="https://github.com/sponsors/frillweeman"
+      :opacity="0.25"
+    />
+  </template>
 
+  <v-container fluid>
     <!-- GitHub Sponsors Section -->
     <v-row justify="center" class="sponsors-section text-center">
       <v-col cols="12" md="10">
@@ -41,23 +43,23 @@
         <h2 class="mb-2">Special Thanks</h2>
         
         <v-card href="https://www.404media.co/" target="_blank" max-width="250" variant="flat" class="text-center py-2 mx-auto" color="transparent">
-          <v-img class="ma-4" src="/404media.svg" alt="404 Media Logo" contain />
+          <v-img class="ma-4" src="/404media.svg" alt="404 Media Logo" contain style="background: rgb(245,245,245)" />
           <v-card-title class="mt-2 serif text-center font-weight-bold">404 Media</v-card-title>
           <v-card-text>
-            <p>Special thanks to Jason Koebler at 404 Media for popularizing this project. Be sure to support them, as they are fellow privacy advocates.</p>
+            <p>Special thanks to Jason Koebler at 404 Media for popularizing this project.</p>
           </v-card-text>
         </v-card>
       </v-col>
     </v-row>
   </v-container>
-
-  <Footer />
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, type Ref } from "vue";
 import { getSponsors } from "@/services/apiService";
-import Footer from "@/components/layout/Footer.vue";
+import DefaultLayout from "@/layouts/DefaultLayout.vue";
+import Hero from "@/components/layout/Hero.vue";
 
 interface Sponsor {
   login: string;
@@ -82,29 +84,3 @@ onMounted(() => {
     });
 });
 </script>
-
-<style scoped>
-.hero-section-sponsor {
-  background: url('/torches.webp') no-repeat center center;
-  background-size: cover;
-  color: white;
-  padding: 100px 0 !important;
-  position: relative;
-  }
-
- .hero-section-sponsor::before {
-   content: '';
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background: rgba(0, 0, 0, 0.5);
-   z-index: 1;
- }
-
- .hero-section-sponsor > * {
-   position: relative;
-   z-index: 2;
-}
-</style>
diff --git a/webapp/src/views/FOIA.vue b/webapp/src/views/FOIA.vue
index 361c9c4..08dd1cd 100644
--- a/webapp/src/views/FOIA.vue
+++ b/webapp/src/views/FOIA.vue
@@ -1,112 +1,90 @@
 <template>
-<Hero
-  imageUrl="/documents.jpg"
-  title="How to Request Public Records" 
-  description="Learn how simple it is to request ALPR data from your city"
-  button-text="Get Started"
-  button-href="#how-to"
-/>
+<DefaultLayout>
+  <template #header>
+    <Hero
+      image-url="/documents.jpg"
+      title="How to Request Public Records" 
+      description="Learn how simple it is to request ALPR data from your city"
+    />
+  </template>
 
-<v-container class="mb-12">
-  <h2>Why File a Public Records Request?</h2>
-  <p>
-    ALPRs are being installed across the country with little transparency. Public records requests allow us to track where these cameras are, ensuring that all installations are documented.
-  </p>
-  <p>
-    Your help is crucial. Filing a public records request is easy, and your contribution will help us build a complete map of these surveillance networks. We'll even link you to several hundred <a target="_blank" href="https://www.muckrock.com/search/?q=Flock">examples to follow</a>.<sup>[1]</sup>
-  </p>
-  <footer class="serif text-grey-darken-2 mt-4">
-    <small><sup>[1]</sup> While these examples focus on Flock Safety, the process applies to all ALPR vendors. Flock is highlighted here because it is the most widely reported ALPR vendor in the US on OpenStreetMap at the time this was written.</small>
-  </footer>
+  <v-container class="narrow-text">
+    <h2>Why File a Public Records Request?</h2>
+    <p>
+      ALPRs are being installed across the country with little transparency. Public records requests allow us to track where these cameras are, ensuring that all installations are documented.
+    </p>
+    <p>
+      Your help is crucial. Filing a public records request is easy, and your contribution will help us build a complete map of these surveillance networks. We'll even link you to several hundred <a target="_blank" href="https://www.muckrock.com/search/?q=Flock">examples to follow</a>.<sup>[1]</sup>
+    </p>
+    <footer class="serif text-grey-darken-2 mt-4">
+      <small><sup>[1]</sup> While these examples focus on Flock Safety, the process applies to all ALPR vendors. Flock is highlighted here because it is the most widely reported ALPR vendor in the US on OpenStreetMap at the time this was written.</small>
+    </footer>
 
-  <v-divider class="my-8" />
+    <v-divider class="my-8" />
 
-  <h2 id="how-to">How to File a Public Records Request</h2>
-  <ol class="serif">
-    <li class="mb-4">
-      Determine the correct agency that would have the responsive documents. For contracts and invoices, this is likely a <b>law enforcement agency</b> such as the police department or sheriff's office. For other records, such as installation permits, this might be the <b>city or county government</b>. If you're unsure, consider submitting requests to multiple agencies or researching which agency oversees the type of records you're seeking.
-    </li>
-    <li class="mb-4">
-      Locate their public records request portal. If they don't have one, find the relevant contact email.
-    </li>
-    <li class="mb-4">
-      <p>
-        Browse <a href="https://www.muckrock.com/search/?q=Flock" target="_blank">Muckrock</a> for examples of public records requests related to ALPRs. Use these as templates to draft your own request. Here are some common requests you can adapt:
-      </p>
-      <ul>
-        <li>Right-of-Way Installation Permits (typically include a map of locations)</li>
-        <li>Invoices for ALPRs (contain count of cameras)</li>
-        <li>Contracts with ALPR vendors (show proof of usage)</li>
-        <li>Emails discussing ALPR installations</li>
-      </ul>
+    <h2>How to File a Public Records Request</h2>
+    <ol class="serif">
+      <li class="mb-4">
+        Determine the correct agency that would have the responsive documents. For contracts and invoices, this is likely a <b>law enforcement agency</b> such as the police department or sheriff's office. For other records, such as installation permits, this might be the <b>city or county government</b>. If you're unsure, consider submitting requests to multiple agencies or researching which agency oversees the type of records you're seeking.
+      </li>
+      <li class="mb-4">
+        Locate their public records request portal. If they don't have one, find the relevant contact email.
+      </li>
+      <li class="mb-4">
+        <p>
+          Browse <a href="https://www.muckrock.com/search/?q=Flock" target="_blank">Muckrock</a> for examples of public records requests related to ALPRs. Use these as templates to draft your own request. Here are some common requests you can adapt:
+        </p>
+        <ul>
+          <li>Right-of-Way Installation Permits (typically include a map of locations)</li>
+          <li>Invoices for ALPRs (contain count of cameras)</li>
+          <li>Contracts with ALPR vendors (show proof of usage)</li>
+          <li>Emails discussing ALPR installations</li>
+        </ul>
 
-      <p><b>If you need help tailoring this to your situation, appealing rejections, etc., ChatGPT is a great resource.</b></p>
-    </li>
-    <li class="mb-4">
-      If you receive responsive documents that include location info, <router-link to="/report">add them to the site</router-link>.
-    </li>
-  </ol>
+        <p><b>If you need help tailoring this to your situation, appealing rejections, etc., ChatGPT is a great resource.</b></p>
+      </li>
+      <li class="mb-4">
+        If you receive responsive documents that include location info, <router-link to="/report">add them to the site</router-link>.
+      </li>
+    </ol>
 
-  <v-alert class="mt-8" type="info" variant="tonal">
-    <b>Tip:</b> If you run into any issues while submitting the public records request, such as not being able to locate the records portal or find a contact email, you can use <a href="https://muckrock.com" target="_blank">Muckrock</a>, a nonprofit public records platform that will submit it to the agency on your behalf for a small fee.
-  </v-alert>
+    <v-alert class="mt-8" type="info" variant="tonal">
+      <b>Tip:</b> If you run into any issues while submitting the public records request, such as not being able to locate the records portal or find a contact email, you can use <a href="https://muckrock.com" target="_blank">Muckrock</a>, a nonprofit public records platform that will submit it to the agency on your behalf for a small fee.
+    </v-alert>
 
-  <v-divider class="my-8" />
+    <v-divider class="my-8" />
 
-  <h2>Public Records Basics</h2>
+    <h2>Public Records Basics</h2>
 
-  <h3>What is a public records request?</h3>
-  <p>
-    A public records request is a formal way to ask government agencies for public records. Laws vary by state, but most allow residents to request documents such as contracts, emails, and invoices.
-  </p>
+    <h3>What is a public records request?</h3>
+    <p>
+      A public records request is a formal way to ask government agencies for public records. Laws vary by state, but most allow residents to request documents such as contracts, emails, and invoices.
+    </p>
 
-  <h3>Who can file a public records request?</h3>
-  <p>
-    Most states allow anyone to file a public records request, while some restrict it to state residents.
-  </p>
+    <h3>Who can file a public records request?</h3>
+    <p>
+      Most states allow anyone to file a public records request, while some restrict it to state residents.
+    </p>
 
-  <h3>What can be requested?</h3>
-  <p>
-    Invoices, contracts, emails, and other documents related to government spending and agreements with companies, including these surveillance companies.
-  </p>
+    <h3>What can be requested?</h3>
+    <p>
+      Invoices, contracts, emails, and other documents related to government spending and agreements with companies, including these surveillance companies.
+    </p>
 
-  <h3>What if my request is rejected?</h3>
-  <p>
-    Agencies may reject requests for various reasons, but you can often appeal. <a href="https://discord.gg/aV7v4R3sKT" target="_blank">Let us know</a> if you encounter issues, and we can help.
-  </p>
-
-  <h3>Can I remain anonymous?</h3>
-  <p>
-    Typically, yes. Many states allow you to submit public records requests anonymously or through an alias. If anonymity is important to you, consider using a disposable email address and avoiding personally identifying information in your request. If you're requesting records from a state that requires residency, you may need to provide an in-state address.
-  </p>
-  
-</v-container>
-
-<Footer />
+    <h3>What if my request is rejected?</h3>
+    <p>
+      Agencies may reject requests for various reasons, but you can often appeal. <a href="https://discord.gg/aV7v4R3sKT" target="_blank">Let us know</a> if you encounter issues, and we can help.
+    </p>
 
+    <h3>Can I remain anonymous?</h3>
+    <p>
+      Typically, yes. Many states allow you to submit public records requests anonymously or through an alias. If anonymity is important to you, consider using a disposable email address and avoiding personally identifying information in your request. If you're requesting records from a state that requires residency, you may need to provide an in-state address.
+    </p>
+  </v-container>
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
-import { useSeoMeta } from '@unhead/vue';
 import Hero from '@/components/layout/Hero.vue';
-import Footer from '@/components/layout/Footer.vue';
-
-useSeoMeta({
-  title: 'How to Request Public Records | DeFlock',
-  description: 'Learn how simple it is to request ALPR data from your city.',
-
-  ogTitle: 'How to Request ALPR Data',
-  ogDescription: 'Learn how simple it is to request ALPR data from your city.',
-  ogImage: 'https://deflock.me/documents.jpg',
-});
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 </script>
-
-<style lang="css" scoped>
-@import url('@/assets/typography.css');
-
-blockquote {
-  margin: 1em 0;
-  padding-left: 1em;
-  border-left: 4px solid #ccc;
-}
-</style>
diff --git a/webapp/src/views/Identification.vue b/webapp/src/views/Identification.vue
index 54f2a7e..f834f6b 100644
--- a/webapp/src/views/Identification.vue
+++ b/webapp/src/views/Identification.vue
@@ -1,10 +1,12 @@
 <template>
-  <!-- Hero Section -->
-  <Hero 
-    title="Spot an ALPR"
-    description="Visual guide to identifying license plate readers"
-    gradient="linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgb(var(--v-theme-secondary)) 100%)"
-  />
+<DefaultLayout>
+  <template #header>
+    <Hero 
+      title="Spot an ALPR"
+      description="Visual guide to identifying license plate readers"
+      gradient="linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgb(var(--v-theme-secondary)) 100%)"
+    />
+  </template>
 
   <v-container fluid>
     <!-- Flock Safety - Featured Section -->
@@ -151,13 +153,12 @@
       </v-card>
     </v-container>
   </v-container>
-
-  <Footer />
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import Hero from '@/components/layout/Hero.vue';
-import Footer from '@/components/layout/Footer.vue';
 
 function openImageInNewTab(url: string) {
   window.open(url, '_blank');
diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
index cfacfb6..713e3e9 100644
--- a/webapp/src/views/Landing.vue
+++ b/webapp/src/views/Landing.vue
@@ -1,29 +1,31 @@
 <template>
-  <!-- Hero Section -->
-  <v-container fluid class="hero-section">
-    <v-row justify="center">
-      <v-col cols="12" md="8" class="text-center">
-        <h1 class="display-1 px-8">You're Being Tracked</h1>
-        
-        <ALPRCounter class="my-6" />
-        
-        <!-- Featured On Section -->
-        <v-container class="featured-on-section my-8">
-          <h4 class="mb-4" style="opacity: 0.8">Featured On</h4>
-          <v-row justify="center" align-items="center">
-            <v-card v-for="site in featuredOn" flat target="_blank" :href="site.url" class="mx-4" :width="site.wide ? 200 : 100" height="50" style="background: rgba(0,0,0,0)">
-              <v-img contain :src="site.logo" :alt="site.name" class="featured-logo" style="display: flex; align-items: center; height: 100%;" />
-            </v-card>
-          </v-row>
-        </v-container>
-
-        <v-btn size="large" color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
-          Explore the Map
-          <v-icon end>mdi-map</v-icon>
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-container>
+<DefaultLayout no-bottom-margin>
+  <template #header>
+    <v-container fluid class="hero-section">
+      <v-row justify="center">
+        <v-col cols="12" md="8" class="text-center">
+          <h1 class="display-1 px-8">You're Being Tracked</h1>
+          
+          <ALPRCounter class="my-6" />
+          
+          <!-- Featured On Section -->
+          <v-container class="featured-on-section my-8">
+            <h4 class="mb-4" style="opacity: 0.8">Featured On</h4>
+            <v-row justify="center" align-items="center">
+              <v-card v-for="site in featuredOn" flat target="_blank" :href="site.url" class="mx-4" :width="site.wide ? 200 : 100" height="50" style="background: rgba(0,0,0,0)">
+                <v-img contain :src="site.logo" :alt="site.name" class="featured-logo" style="display: flex; align-items: center; height: 100%;" />
+              </v-card>
+            </v-row>
+          </v-container>
+  
+          <v-btn size="large" color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
+            Explore the Map
+            <v-icon end>mdi-map</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </template>
   
   <!-- Dangers Section -->
   <v-container class="py-10 text-center info-section">
@@ -100,8 +102,7 @@
       <v-icon end>mdi-map</v-icon>
     </v-btn>
   </v-container>
-  
-  <Footer />
+</DefaultLayout>
 </template>
 
 <style>
@@ -167,7 +168,7 @@
 import { useRouter } from 'vue-router';
 import ALPRCounter from '@/components/ALPRCounter.vue';
 import { useGlobalStore } from '@/stores/global';
-import Footer from '@/components/layout/Footer.vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 
 const router = useRouter();
 const { setCurrentLocation } = useGlobalStore();
diff --git a/webapp/src/views/Press.vue b/webapp/src/views/Press.vue
index 86eba19..d79fd54 100644
--- a/webapp/src/views/Press.vue
+++ b/webapp/src/views/Press.vue
@@ -1,64 +1,64 @@
 <template>
-<Hero
-  imageUrl="/press.jpg"
-  title="Press"
-  description="We're grateful for the media's interest in DeFlock. Below you'll find our press kit and contact information for interviews."
-/>
+<DefaultLayout>
+  <template #header>
+    <Hero
+      imageUrl="/press.jpg"
+      title="Press"
+      description="We're grateful for the media's interest in DeFlock. Below you'll find our press kit and contact information for interviews."
+    />
+  </template>
 
-<v-container class="mb-16">
-  <h2>What is DeFlock?</h2>
-  <p>
-    DeFlock is a community-driven project that maps surveillance devices across the world. We help communities hold their government and surveillance vendors accountable and understand where and how they're being watched.
-  </p>
+  <v-container class="narrow-text">
+    <h2>What is DeFlock?</h2>
+    <p>
+      DeFlock is a community-driven project that maps surveillance devices across the world. We help communities hold their government and surveillance vendors accountable and understand where and how they're being watched.
+    </p>
 
-  <h2>Founder Bio</h2>
-  <p>
-    DeFlock was founded in October 2024 by Will Freeman, a software engineer and privacy advocate. On a road trip from Washington state to Alabama, he noticed hundreds of newly-installed cameras mounted on black poles with solar panels in nearly every town he passed through. Curious about their purpose, he discovered they were <a target="_blank" href="https://en.wikipedia.org/wiki/Flock_Safety">Flock cameras</a> used for surveillance. Upset about this trend to blatantly disregard the Fourth Amendment, he created a platform that maps these devices, empowering communities to understand and challenge surveillance practices.
-  </p>
+    <h2>Founder Bio</h2>
+    <p>
+      DeFlock was founded in October 2024 by Will Freeman, a software engineer and privacy advocate. On a road trip from Washington state to Alabama, he noticed hundreds of newly-installed cameras mounted on black poles with solar panels in nearly every town he passed through. Curious about their purpose, he discovered they were <a target="_blank" href="https://en.wikipedia.org/wiki/Flock_Safety">Flock cameras</a> used for surveillance. Upset about this trend to blatantly disregard the Fourth Amendment, he created a platform that maps these devices, empowering communities to understand and challenge surveillance practices.
+    </p>
 
-  <p>Since its launch, DeFlock has received significant media coverage and community support, including code contributors and volunteer mappers, helping to raise awareness about the dangers of surveillance technology.</p>
+    <p>Since its launch, DeFlock has received significant media coverage and community support, including code contributors and volunteer mappers, helping to raise awareness about the dangers of surveillance technology.</p>
 
-  <h2>Media Kit</h2>
-  <p>
-    Download our very basic media kit <a target="_blank" href="https://cdn.deflock.me/deflock-media-kit.zip">here</a>.
-  </p>
+    <h2>Media Kit</h2>
+    <p>
+      Download our very basic media kit <a target="_blank" href="https://cdn.deflock.me/deflock-media-kit.zip">here</a>.
+    </p>
 
-  <h2>Embedding our Map</h2>
-  <p>
-    You are welcome to embed our map on your website. Use the following HTML snippet:
-  </p>
+    <h2>Embedding our Map</h2>
+    <p>
+      You are welcome to embed our map on your website. Use the following HTML snippet:
+    </p>
 
-  <p>
-    <DFCode>
-      &lt;iframe src=&quot;https://deflock.me/map&quot; width=&quot;100%&quot; height=&quot;600&quot; style=&quot;border: none;&quot;&gt;&lt;/iframe&gt;
-    </DFCode>
-  </p>
+    <p>
+      <DFCode>
+        &lt;iframe src=&quot;https://deflock.me/map&quot; width=&quot;100%&quot; height=&quot;600&quot; style=&quot;border: none;&quot;&gt;&lt;/iframe&gt;
+      </DFCode>
+    </p>
 
-  <p>
-    If you would like to <b>localize the URL</b> to a specific region, please zoom to the area at <router-link to="/map">https://deflock.me/map</router-link> and copy the URL from your browser's address bar.
-  </p>
+    <p>
+      If you would like to <b>localize the URL</b> to a specific region, please zoom to the area at <router-link to="/map">https://deflock.me/map</router-link> and copy the URL from your browser's address bar.
+    </p>
 
-  <p>
-    To <b>remove the header bar</b>, add the following query parameter to the URL: <code>?fullscreen=true</code>. For example:
-    <DFCode>
-      &lt;iframe src=&quot;http://localhost:5173/map?fullscreen=true#map=14/40.014863/-105.266275&quot; width=&quot;100%&quot; height=&quot;600&quot; style=&quot;border: none;&quot;&gt;&lt;/iframe&gt;
-    </DFCode>
-  </p>
+    <p>
+      To <b>remove the header bar</b>, add the following query parameter to the URL: <code>?fullscreen=true</code>. For example:
+      <DFCode>
+        &lt;iframe src=&quot;http://localhost:5173/map?fullscreen=true#map=14/40.014863/-105.266275&quot; width=&quot;100%&quot; height=&quot;600&quot; style=&quot;border: none;&quot;&gt;&lt;/iframe&gt;
+      </DFCode>
+    </p>
 
-  <h2>Contact Us</h2>
-  <p>
-    For press inquiries and interview requests, <router-link to="/contact" >please contact us here</router-link>.
-  </p>
+    <h2>Contact Us</h2>
+    <p>
+      For press inquiries and interview requests, <router-link to="/contact" >please contact us here</router-link>.
+    </p>
 
-</v-container>
-<Footer />
+  </v-container>
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
-import "@/assets/typography.css"
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import Hero from '@/components/layout/Hero.vue';
-import Footer from "@/components/layout/Footer.vue";
 import DFCode from "@/components/DFCode.vue";
-
-
 </script>
diff --git a/webapp/src/views/PrivacyPolicy.vue b/webapp/src/views/PrivacyPolicy.vue
index dcffb1b..9ad25dc 100644
--- a/webapp/src/views/PrivacyPolicy.vue
+++ b/webapp/src/views/PrivacyPolicy.vue
@@ -1,5 +1,6 @@
 <template>
-  <v-container class="mb-16">
+<DefaultLayout>
+  <v-container class="narrow-text">
     <h1>Privacy Policy</h1>
     <p>Effective Date: <b>1/4/2025</b></p>
 
@@ -35,14 +36,9 @@
       We may update this privacy policy from time to time to reflect changes in our practices or for legal compliance. The "Effective Date" above will indicate when the latest changes were made.
     </p>
   </v-container>
-
-  <Footer />
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
-import Footer from '@/components/layout/Footer.vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 </script>
- 
-<style lang="css" scoped>
-@import url('@/assets/typography.css');
-</style>
diff --git a/webapp/src/views/ReportBase.vue b/webapp/src/views/ReportBase.vue
deleted file mode 100644
index cbc43e6..0000000
--- a/webapp/src/views/ReportBase.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <router-view />
-
-  <Footer />
-</template>
-
-<script setup lang="ts">
-import Footer from '@/components/layout/Footer.vue';
-</script>
-
diff --git a/webapp/src/views/ReportChoose.vue b/webapp/src/views/ReportChoose.vue
index 6a7a061..731ac9a 100644
--- a/webapp/src/views/ReportChoose.vue
+++ b/webapp/src/views/ReportChoose.vue
@@ -1,5 +1,6 @@
 <template>
-  <v-container class="my-16">
+<DefaultLayout>
+  <v-container>
     <!-- ALPR Verification Dialog -->
     <ALPRVerificationDialog />
     
@@ -85,7 +86,7 @@
           <v-img cover :aspect-ratio="1.5" class="mx-auto mt-5" src="/id.webp" style="width: 90%; border-radius: 8px;" />
 
           <v-card-text class="text-body-1">
-            <p class="mb-4 sans-serif">The <b>OSM Web Editor</b> provides a more advanced interface for detailed reporting in your web browser.</p>
+            <p class="mb-4 sans-serif">The <b>OSM Web Editor</b> provides a more advanced interface for detailed reporting in your browser.</p>
           </v-card-text>
 
           <v-card-actions class="pa-4">
@@ -104,9 +105,11 @@
       </v-col>
     </v-row>
   </v-container>
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import ALPRVerificationDialog from '@/components/ALPRVerificationDialog.vue';
 </script>
 
diff --git a/webapp/src/views/ReportID.vue b/webapp/src/views/ReportID.vue
index 2e9fbbd..2947c38 100644
--- a/webapp/src/views/ReportID.vue
+++ b/webapp/src/views/ReportID.vue
@@ -1,11 +1,14 @@
 <template>
-  <Hero
-    imageUrl="/id.webp"
-    title="Submit Cameras" 
-    description="Add or edit ALPRs using OSM's powerful web-based editor."
-  />
+<DefaultLayout>
+  <template #header>
+    <Hero
+      imageUrl="/id.webp"
+      title="Submit Cameras" 
+      description="Add or edit ALPRs using OSM's powerful web-based editor."
+    />
+  </template>
 
-  <v-container class="mb-16">
+  <v-container>
     <h1 class="text-center">
       Editing the Map
     </h1>
@@ -47,7 +50,18 @@
             Once you've found the location of the ALPR, click the <strong>Edit</strong> button in the top left corner of the page. This will open the OpenStreetMap editor, where you can add the ALPR to the map.
           </p>
           <v-img max-width="450" src="/edit-map.png" class="my-8" />
-          <p class="mt-16 mb-8">
+
+          <v-alert
+            variant="tonal"
+            type="warning"
+            class="mt-16 mb-6"
+          >
+            <p>
+              Add cameras as <strong>standalone points only</strong>! Do not connect them to roads, buildings, or other objects. Place the point exactly where the camera is physically located, but keep it as an independent point on the map.
+            </p>
+          </v-alert>
+
+          <p class="mb-8">
             To add the ALPR, click the <strong>Point</strong> button at the top center of the editor, then click on the location of the ALPR on the map. In the popup that appears, paste one of the following sets of tags based on the brand of the ALPR:
           </p>
 
@@ -113,9 +127,11 @@
       </template>
     </v-stepper-vertical>
   </v-container>
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import Hero from '@/components/layout/Hero.vue';
 import { ref, onMounted, watch } from 'vue';
 import OSMTagSelector from '@/components/OSMTagSelector.vue';
diff --git a/webapp/src/views/TermsOfService.vue b/webapp/src/views/TermsOfService.vue
index a643e10..a777930 100644
--- a/webapp/src/views/TermsOfService.vue
+++ b/webapp/src/views/TermsOfService.vue
@@ -1,5 +1,6 @@
 <template>
-  <v-container class="mb-16">
+<DefaultLayout>
+  <v-container class="narrow-text">
     <h1>Terms of Service for DeFlock</h1>
     <p>Effective Date: <b>12/26/2024</b></p>
     
@@ -88,14 +89,9 @@
       Email: <a href="mailto:contact@deflock.me">contact@deflock.me</a>
     </p>
   </v-container>
-
-  <Footer />
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
-import Footer from '@/components/layout/Footer.vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 </script>
- 
-<style lang="css" scoped>
-@import url('@/assets/typography.css');
-</style>
diff --git a/webapp/src/views/WhatIsAnALPRView.vue b/webapp/src/views/WhatIsAnALPRView.vue
index 4020bbb..ba06a8a 100644
--- a/webapp/src/views/WhatIsAnALPRView.vue
+++ b/webapp/src/views/WhatIsAnALPRView.vue
@@ -1,8 +1,11 @@
 <template>
-  <Hero
-    image-url="/flock-camera.jpeg"
-    :opacity="0"
-  />
+<DefaultLayout>
+  <template #header>
+    <Hero
+      image-url="/flock-camera.jpeg"
+      :opacity="0"
+    />
+  </template>
   
   <v-container class="info-section mb-16">
     <h1 class="mt-0">What are ALPRs?</h1>
@@ -43,20 +46,18 @@
     
     <SimilarProjects id="similar" />
   </v-container>
-  <Footer />
+</DefaultLayout>
 </template>
 
 <script setup lang="ts">
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import Hero from '@/components/layout/Hero.vue';
 import Dangers from '@/components/Dangers.vue';
 import FAQ from '@/components/FAQ.vue';
-import Footer from '@/components/layout/Footer.vue';
 import SimilarProjects from '@/components/SimilarProjects.vue';
 </script>
 
 <style scoped>
-@import url('@/assets/typography.css');
-
 h1, h2 {
   text-align: center;
 }