diff --git a/webapp/public/everydoor.webp b/webapp/public/everydoor.webp
new file mode 100644
index 0000000..05de6c1
Binary files /dev/null and b/webapp/public/everydoor.webp differ
diff --git a/webapp/public/everydoor/1-view-mode.jpg b/webapp/public/everydoor/1-view-mode.jpg
new file mode 100644
index 0000000..46f6dc2
Binary files /dev/null and b/webapp/public/everydoor/1-view-mode.jpg differ
diff --git a/webapp/public/everydoor/3-search.png b/webapp/public/everydoor/3-search.png
new file mode 100644
index 0000000..b3c178d
Binary files /dev/null and b/webapp/public/everydoor/3-search.png differ
diff --git a/webapp/public/everydoor/6-all-fields.png b/webapp/public/everydoor/6-all-fields.png
new file mode 100644
index 0000000..eb911ff
Binary files /dev/null and b/webapp/public/everydoor/6-all-fields.png differ
diff --git a/webapp/public/everydoor/7-upload.jpg b/webapp/public/everydoor/7-upload.jpg
new file mode 100644
index 0000000..8165791
Binary files /dev/null and b/webapp/public/everydoor/7-upload.jpg differ
diff --git a/webapp/public/id.webp b/webapp/public/id.webp
new file mode 100644
index 0000000..fdbb5d2
Binary files /dev/null and b/webapp/public/id.webp differ
diff --git a/webapp/public/pole-map.webp b/webapp/public/pole-map.webp
new file mode 100644
index 0000000..d09716d
Binary files /dev/null and b/webapp/public/pole-map.webp differ
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 11e354c..936f79b 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -16,8 +16,8 @@ function toggleTheme() {
 const items = [
   { title: 'Home', icon: 'mdi-home', to: '/' },
   { title: 'Map', icon: 'mdi-map', to: '/map' },
-  { title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' },
   { title: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' },
+  { title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' },
   { title: 'How to FOIA', icon: 'mdi-file-document', to: '/foia' },
   { title: 'Wardriving', icon: 'mdi-car-connected', to: '/wardriving' },
   // { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue
index 2734d62..fd73a17 100644
--- a/webapp/src/components/layout/Footer.vue
+++ b/webapp/src/components/layout/Footer.vue
@@ -57,7 +57,7 @@
         <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.0.4</p>
+          <p class="mt-4">v1.0.5</p>
         </div>
         </v-col>
       </v-row>
diff --git a/webapp/src/components/layout/Hero.vue b/webapp/src/components/layout/Hero.vue
index 606f80d..49c0cff 100644
--- a/webapp/src/components/layout/Hero.vue
+++ b/webapp/src/components/layout/Hero.vue
@@ -1,12 +1,25 @@
 <template>
   <v-container fluid>
-    <v-row justify="center" class="hero text-center mb-4" :style="`background: url('${imageUrl}') no-repeat center center / cover;`">
+    <v-row
+      justify="center"
+      class="hero text-center mb-4"
+      :style="`background: url('${imageUrl}') no-repeat center center / cover; --hero-opacity: ${opacity};`"
+    >
       <v-col cols="12" md="8">
-      <h1 class="mb-4">{{ title }}</h1>
-      <p class="mb-4">
-        {{ description }}
-      </p>
-      <v-btn v-if="buttonText" :href="buttonHref" :to="buttonTo" :target color="rgb(18, 151, 195)" class="mt-4">{{ buttonText }}</v-btn>
+        <h1 class="mb-4">{{ title }}</h1>
+        <p class="mb-4">
+          {{ description }}
+        </p>
+        <v-btn
+          v-if="buttonText"
+          :href="buttonHref"
+          :to="buttonTo"
+          :target
+          color="rgb(18, 151, 195)"
+          class="mt-4"
+        >
+          {{ buttonText }}
+        </v-btn>
       </v-col>
     </v-row>
   </v-container>
@@ -22,9 +35,13 @@ const props = defineProps({
   buttonText: String,
   buttonTo: String,
   buttonHref: String,
+  opacity: {
+    type: Number,
+    default: 0.6,
+  },
 });
 
-const target = computed(() => 
+const target = computed(() =>
   props.buttonHref && !props.buttonHref.startsWith('#') ? '_blank' : '_self'
 );
 </script>
@@ -34,21 +51,21 @@ const target = computed(() =>
   color: white;
   padding: 100px 0 !important;
   position: relative;
-  }
+}
 
- .hero::before {
-   content: '';
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background: rgba(0, 0, 0, 0.6);
-   z-index: 1;
- }
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, var(--hero-opacity));
+  z-index: 1;
+}
 
- .hero > * {
-   position: relative;
-   z-index: 2;
+.hero > * {
+  position: relative;
+  z-index: 2;
 }
 </style>
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index 255d6fb..28a0e97 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -52,11 +52,34 @@ const router = createRouter({
     },
     {
       path: '/report',
-      name: 'report',
-      component: () => import('../views/ReportView.vue'),
-      meta: {
-        title: 'Report an ALPR | DeFlock'
-      }
+      name: 'reportChoose',
+      component: () => import('../views/ReportBase.vue'),
+      children: [
+        {
+          path: '',
+          name: 'report',
+          component: () => import('../views/ReportChoose.vue'),
+          meta: {
+            title: 'Report an ALPR | DeFlock'
+          },
+        },
+        {
+          path: '/report/id',
+          name: 'reportID',
+          component: () => import('../views/ReportID.vue'),
+          meta: {
+            title: 'Report using iD | DeFlock'
+          }
+        },
+        {
+          path: '/report/every-door',
+          name: 'reportEveryDoor',
+          component: () => import('../views/ReportEveryDoor.vue'),
+          meta: {
+            title: 'Report using Every Door | DeFlock'
+          }
+        },
+      ]
     },
     {
       path: '/operators',
diff --git a/webapp/src/views/ReportBase.vue b/webapp/src/views/ReportBase.vue
new file mode 100644
index 0000000..cbc43e6
--- /dev/null
+++ b/webapp/src/views/ReportBase.vue
@@ -0,0 +1,10 @@
+<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
new file mode 100644
index 0000000..7464361
--- /dev/null
+++ b/webapp/src/views/ReportChoose.vue
@@ -0,0 +1,119 @@
+<template>
+  <Hero
+    :opacity="0.53"
+    imageUrl="/pole-map.webp"
+    title="Add to Our Map" 
+    description="We need your help to complete our map!"
+  />
+
+  <v-container class="mb-16">
+    <v-row justify="center" class="mb-8">
+      <v-col cols="12" md="8">
+        <h2 class="text-center text-h4 font-weight-bold">Choose Your Reporting Method</h2>
+        <p class="text-center text-body-1 mt-4">
+          We use OpenStreetMap to source our data. Choose a method below to add to our map.
+        </p>
+        <p class="sans-serif text-center mt-2">
+          <a style="font-size: 0.85em" target="_blank" href="https://deflock.hashnode.dev/why-we-use-openstreetmap">Why do we use OSM?</a>
+        </p>
+      </v-col>
+    </v-row>
+
+    <v-row justify="center">
+      <v-col cols="12" md="5" class="pa-4">
+        <v-card
+          to="/report/every-door"
+          class="mx-auto h-100 d-flex flex-column"
+          elevation="4"
+          hover
+        >
+          <v-card-item class="bg-green-lighten-5">
+            <v-card-title class="text-h5 font-weight-bold">
+              <v-icon icon="mdi-leaf" class="me-2" color="green-darken-1"></v-icon>
+              Easy Reporting
+            </v-card-title>
+            <v-card-subtitle class="pt-2">
+              Using the <b>Every Door app</b>
+            </v-card-subtitle>
+          </v-card-item>
+
+          <v-img class="mx-auto mt-5" src="/everydoor.webp" style="width: 90%; border-radius: 8px;" />
+
+          <v-card-text class="text-body-1">
+            <p class="mb-4 sans-serif">Recommended for beginners. The Every Door app provides a simple mobile interface that's easy to use while walking around.</p>
+            <p class="sans-serif">Features:</p>
+            <ul class="ml-4">
+              <li class="my-2">Simple, intuitive interface</li>
+              <li class="my-2">Works well on mobile devices</li>
+              <li class="mt-2">Minimal learning curve</li>
+            </ul>
+          </v-card-text>
+
+          <v-card-actions class="pa-4">
+            <v-btn
+              block
+              color="green-darken-1"
+              variant="elevated"
+              to="/report/every-door"
+              size="large"
+            >
+              Choose Easy
+              <v-icon icon="mdi-arrow-right" end></v-icon>
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="5" class="pa-4">
+        <v-card
+          class="mx-auto h-100 d-flex flex-column"
+          elevation="4"
+          hover
+          to="/report/id"
+        >
+          <v-card-item class="bg-blue-lighten-5">
+            <v-card-title class="text-h5 font-weight-bold">
+              <v-icon icon="mdi-layers" class="me-2" color="blue-darken-1"></v-icon>
+              Advanced Reporting
+            </v-card-title>
+            <v-card-subtitle class="pt-2">
+              Using the <b>iD OSM editor</b>
+            </v-card-subtitle>
+          </v-card-item>
+
+          <v-img 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">For users who want more control. The iD editor provides a comprehensive interface for detailed reporting.</p>
+            <p class="sans-serif">Features:</p>
+            <ul class="ml-4">
+              <li class="my-2">Full-featured editing capabilities</li>
+              <li class="my-2">More detailed attribute settings</li>
+              <li class="mt-2">Advanced mapping interface</li>
+            </ul>
+          </v-card-text>
+
+          <v-card-actions class="pa-4">
+            <v-btn
+              block
+              color="blue-darken-1"
+              variant="elevated"
+              to="/report/id"
+              size="large"
+            >
+              Choose Advanced
+              <v-icon icon="mdi-arrow-right" end></v-icon>
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import Hero from '@/components/layout/Hero.vue';
+</script>
+
+<style scoped>
+</style>
diff --git a/webapp/src/views/ReportEveryDoor.vue b/webapp/src/views/ReportEveryDoor.vue
new file mode 100644
index 0000000..7e31885
--- /dev/null
+++ b/webapp/src/views/ReportEveryDoor.vue
@@ -0,0 +1,124 @@
+<template>
+  <Hero
+    imageUrl="/everydoor.webp"
+    title="Report using Every Door" 
+    description="Add ALPRs to our map using the Every Door app."
+  />
+  
+  <v-container class="mb-16">
+    <h1 class="text-center">Adding to the Map</h1>
+
+    <v-alert
+      type="warning"
+      color="#1297c3"
+      class="my-6"
+      title="Are You Sure it's an ALPR?"
+    >
+      <p>
+        Please ensure that the device you're reporting <a style="color: white; text-decoration: underline;" href="/what-is-an-alpr#photos">is actually an ALPR</a> and not a commonly mistaken traffic detection camera or other device. Adding incorrect data can lead to confusion and inaccuracies on the map.
+      </p>
+    </v-alert>
+
+    <v-stepper-vertical color="rgb(18, 151, 195)" v-model="step" flat non-linear class="my-8" edit-icon="mdi-home">
+      <template v-slot:default="{ step }: { step: any }">
+        <v-stepper-vertical-item
+          class="transparent"
+          :complete="step > 1"
+          title="Create an OpenStreetMap Account"
+          value="1"
+          editable
+        >
+          <p>
+            <a href="https://www.openstreetmap.org/user/new" target="_blank">Sign up for an OpenStreetMap account</a> in order to submit changes.
+          </p>
+        </v-stepper-vertical-item>
+
+        <v-stepper-vertical-item
+          class="transparent"
+          :complete="step > 2"
+          title="Download the Every Door App"
+          value="2"
+          editable
+        >
+          <p>
+            <a target="_blank" href="https://every-door.app/">Download the Every Door app</a> for your device.
+          </p>
+        </v-stepper-vertical-item>
+
+        <v-stepper-vertical-item
+          class="transparent"
+          :complete="step > 3"
+          title="Add the ALPR"
+          value="3"
+          editable
+        >
+          <p>
+            Make sure you're using this mode in order to add an ALPR.
+          </p>
+          <v-img max-width="450" src="/everydoor/1-view-mode.jpg" class="my-8" />
+
+          <p class="mb-8">
+            Find the location of the ALPR on the map. Once found, hit the <b>➕</b> button, verify the placement, and hit the <b>✔️</b>.
+          </p>
+
+          <p class="mb-8">
+            After placing the pin, search for <b>Surveillance Camera</b>:
+          </p>
+
+          <v-img max-width="450" src="/everydoor/3-search.png" class="my-8"></v-img>
+
+          <p class="mb-8">
+            Set the fields to the following values. Use <b>Direction</b> to set the direction the ALPR faces. If you happen to know the manufacturer of the ALPR, include it as shown in the screenshot below. For help identifying the manufacturer, <a href="/what-is-an-alpr#photos">see our vendor photos</a>.
+          </p>
+
+          <v-img max-width="450" src="/everydoor/6-all-fields.png" class="my-8"></v-img>
+
+          <p class="mb-8">
+            When finished, save your changes. You can add multiple cameras before uploading them to OSM as a single changeset.
+          </p>
+        </v-stepper-vertical-item>
+
+        <v-stepper-vertical-item
+          class="transparent"
+          :complete="step > 5"
+          title="Submit Your Changes"
+          value="5"
+          editable
+        >
+          <p>
+            Once you've added the ALPRs to the map, click the <strong>Upload</strong> button at the bottom-left corner of the app.
+          </p>
+
+          <v-img max-width="450" src="/everydoor/7-upload.jpg" class="my-8"></v-img>
+          
+          <v-alert
+              variant="tonal"
+              type="info"
+              class="my-6"
+              title="How Long Will It Take?"
+            >
+              <p>
+                We pull data from OpenStreetMap <i>hourly</i>, so it may take up to an hour for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
+              </p>
+          </v-alert>
+        </v-stepper-vertical-item>
+      </template>
+    </v-stepper-vertical>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { VStepperVerticalItem, VStepperVertical } from 'vuetify/labs/components';
+import Hero from '@/components/layout/Hero.vue';
+
+const step = ref(parseInt(localStorage.getItem('currentStepED') || '1'));
+
+onMounted(() => {
+  step.value = parseInt(localStorage.getItem('currentStepED') || '1');
+});
+
+watch(step, (newStep) => {
+  localStorage.setItem('currentStepED', newStep.toString());
+});
+</script>
diff --git a/webapp/src/views/ReportView.vue b/webapp/src/views/ReportID.vue
similarity index 85%
rename from webapp/src/views/ReportView.vue
rename to webapp/src/views/ReportID.vue
index 85efff1..c59f03f 100644
--- a/webapp/src/views/ReportView.vue
+++ b/webapp/src/views/ReportID.vue
@@ -1,10 +1,16 @@
 <template>
-  <v-container class="mb-16">
-    <h1 class="text-center mt-4">Report a New ALPR</h1>
+  <Hero
+    imageUrl="/id.webp"
+    title="Report using iD" 
+    description="Add and edit ALPRs using OSM's powerful web-based editor."
+  />
 
-    <p>
-      If you've spotted an ALPR in your area, you can help us track it by reporting it to OpenStreetMap, where we source our information. Here's how you can do it:
-    </p>
+  <!-- TODO: make sure the stepper saves its progress properly after the route refactoring -->
+
+  <v-container class="mb-16">
+    <h1 class="text-center">
+      Editing the Map
+    </h1>
 
     <v-stepper-vertical color="rgb(18, 151, 195)" v-model="step" flat non-linear class="my-8" edit-icon="mdi-home">
       <template v-slot:default="{ step }: { step: any }">
@@ -106,30 +112,16 @@
             </p>
           </v-alert>
         </v-stepper-vertical-item>
-
-        <v-stepper-vertical-item
-          class="transparent"
-          :complete="step > 6"
-          title="Hang a Sign"
-          value="6"
-          editable
-        >
-          <p>
-            Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
-          </p>
-        </v-stepper-vertical-item>
       </template>
     </v-stepper-vertical>
   </v-container>
-
-  <Footer />
 </template>
 
 <script setup lang="ts">
+import Hero from '@/components/layout/Hero.vue';
 import { ref, onMounted, watch } from 'vue';
 import OSMTagSelector from '@/components/OSMTagSelector.vue';
 import { VStepperVerticalItem, VStepperVertical } from 'vuetify/labs/components';
-import Footer from '@/components/layout/Footer.vue';
 
 const step = ref(parseInt(localStorage.getItem('currentStep') || '1'));