diff --git a/README.md b/README.md
index ad7e777..e2d9f46 100644
--- a/README.md
+++ b/README.md
@@ -20,23 +20,16 @@ This project aims at reviving [aero-offers.com](aero-offers.com) - invaluable so
 Currently, the project is being onboarded to Azure Cloud (still WIP).
 
 ### TODO
-- [x] deploy working ui, api and db to Azure
-- [x] fix segelflug spider/crawler
-- [x] good enough DB setup (cheap VM)
-- [x] use Azure secrets for db credentials
-- [x] setup cron triggers for crawlers, reclassifier and FX rates updater
-- [x] human readable domain (aero-offers.pl)
-- [x] fix aircraft type dropdown
-- [ ] database daily backups
-- [ ] infra as code (biceps or terraform)
+- [ ] UI: consent banner for GA
+- [ ] Infra: db daily backups
+- [ ] Infra: infra as code (biceps or terraform)
 - [ ] document infra and env topology
-- [ ] fix other spiders/crawlers
-- [ ] redirect from aero-offers.com
-- [ ] fix & polish CSS in UI
-- [ ] update/simplify legal subpage
-- [ ] cookies info
-- [ ] use https://github.com/weglide/GliderList  
-- [ ] admin panel for manual (re) classification (or community-based)
+- [ ] Backend: fix and enable other spiders/crawlers
+- [ ] UI: aero-offers.com
+- [ ] Improve aircraft types structure and introduce 2 levels: glider (e.g Discus 2c 18m) and model (Discus 2cFES 18m) as prices between models sometimes differ significantly
+- [ ] UI: fix & polish CSS in UI
+- [ ] utilize https://github.com/weglide/GliderList as source of truth for glider types/models
+- [ ] UI: admin panel for manual (re) classification (or community-based)
 - [ ] crawler for Facebook Marketplace - do they have nice api?
 - [ ] crawler for https://www.aircraft24.de
 - [ ] crawler for http://www.airplanemart.com
diff --git a/ui/eslint.config.js b/ui/eslint.config.js
index 7a05caa..0ae4115 100644
--- a/ui/eslint.config.js
+++ b/ui/eslint.config.js
@@ -8,9 +8,6 @@ export default [
   eslintPluginPrettierRecommended,
   {
     files: ['**/*.vue', '**/*..js', '**/*..jsx', '**/*..cjs', '**/*..mjs'],
-    ignores: ['.gitignore'],
-    rules: {
-      'vue/multi-word-component-names': 'warn'
-    }
+    ignores: ['.gitignore']
   }
 ]
diff --git a/ui/src/App.vue b/ui/src/App.vue
index ce6ee35..7d1fee2 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -9,7 +9,7 @@
           <router-link to="/">All Offers</router-link>
         </div>
         <div class="nav-element">
-          <router-link to="/gliders">Gliders</router-link>
+          <router-link to="/glider">Gliders</router-link>
         </div>
         <div class="nav-element">
           <router-link to="/tmg">TMG</router-link>
@@ -21,6 +21,10 @@
           <router-link to="/airplane">Airplanes</router-link>
         </div>
       </div>
+
+      <div id="aircraft-type-filter">
+        <AircraftModelFilter />
+      </div>
     </div>
     <div id="body">
       <router-view :key="$route.path" />
@@ -35,8 +39,12 @@
 /*global __COMMIT_HASH__*/
 /*global __BUILD_TIMESTAMP__*/
 
+import AircraftModelFilter from './components/AircraftModelFilter.vue'
+
 export default {
-  components: {},
+  components: {
+    AircraftModelFilter
+  },
   data() {
     return {
       buildInfo: 'Build: ' + __COMMIT_HASH__ + ', ' + __BUILD_TIMESTAMP__
@@ -150,7 +158,7 @@ export default {
   color: #ffffff;
 }
 
-#nav a.router-link-exact-active {
+#nav a.router-link-active {
   color: #f71735;
   text-decoration: none;
 }
@@ -229,4 +237,9 @@ export default {
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
+
+#aircraft-type-filter {
+  padding: 5px;
+  width: 500px;
+}
 </style>
diff --git a/ui/src/components/AircraftModelFilter.vue b/ui/src/components/AircraftModelFilter.vue
new file mode 100644
index 0000000..c588fca
--- /dev/null
+++ b/ui/src/components/AircraftModelFilter.vue
@@ -0,0 +1,123 @@
+<template>
+  <multiselect
+    v-model="selected"
+    :options="available_aircraft_types"
+    group-values="models"
+    group-label="manufacturer"
+    :group-select="false"
+    label="model"
+    :placeholder="'Search ' + (aircraft_type || 'aircraft')"
+    :max-height="500"
+  >
+    <template #noResult>
+      <span v-if="aircraft_type">
+        {{ aircraft_type.charAt(0).toUpperCase() + aircraft_type.slice(1) }} not found. Try different phrase or
+        category.
+      </span>
+      <span v-else>Aircraft model not found. Try different phrase.</span>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+import axios from 'axios'
+import Multiselect from 'vue-multiselect'
+
+export default {
+  name: 'AircraftModelFilter',
+  components: {
+    Multiselect
+  },
+  data() {
+    return {
+      aircraft_type: null,
+      all_aircraft_types: [],
+      available_aircraft_types: [],
+      selected: null
+    }
+  },
+
+  watch: {
+    $route() {
+      const pathSegments = this.$route.path.split('/')
+      switch (pathSegments[1]) {
+        case 'glider':
+        case 'tmg':
+        case 'ultralight':
+        case 'airplane':
+          this.aircraft_type = pathSegments[1]
+          this.selected = null
+          this.updateAircraftTypes()
+
+          if (pathSegments.length == 4) {
+            this.selected = {
+              manufacturer: decodeURI(pathSegments[2]),
+              model: decodeURI(pathSegments[3])
+            }
+          } else {
+            this.selected = null
+          }
+          break
+
+        default:
+          this.aircraft_type = null
+          this.selected = null
+      }
+    },
+
+    selected(val) {
+      if (val == null) {
+        return
+      }
+      this.$router.push({
+        name: 'offer_details',
+        params: { aircraftType: val.aircraft_type, manufacturer: val.manufacturer, model: val.model }
+      })
+    }
+  },
+
+  created() {
+    this.loadAircraftTypes()
+  },
+
+  methods: {
+    loadAircraftTypes() {
+      axios.get(`/models`).then((response) => {
+        this.all_aircraft_types = response.data
+        this.updateAircraftTypes()
+      })
+    },
+
+    updateAircraftTypes() {
+      const new_available_aircraft_types = []
+      for (const manufacturer in this.all_aircraft_types) {
+        const modelsToDisplay = []
+
+        const modelsByAircraftType = this.all_aircraft_types[manufacturer].models
+        for (const type in modelsByAircraftType) {
+          if (this.aircraft_type == type || this.aircraft_type == null) {
+            for (const model in modelsByAircraftType[type]) {
+              modelsToDisplay.push({
+                aircraft_type: type,
+                manufacturer: manufacturer,
+                model: modelsByAircraftType[type][model]
+              })
+            }
+          }
+        }
+
+        new_available_aircraft_types.push({
+          manufacturer: manufacturer,
+          models: modelsToDisplay
+        })
+      }
+
+      this.available_aircraft_types = new_available_aircraft_types
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import 'vue-multiselect/dist/vue-multiselect.css';
+</style>
diff --git a/ui/src/components/OfferComponent.vue b/ui/src/components/OfferThumb.vue
similarity index 86%
rename from ui/src/components/OfferComponent.vue
rename to ui/src/components/OfferThumb.vue
index 20fba0b..16b34ef 100644
--- a/ui/src/components/OfferComponent.vue
+++ b/ui/src/components/OfferThumb.vue
@@ -22,8 +22,8 @@
         <p v-if="offer.manufacturer">
           <router-link
             :to="{
-              name: 'ModelInformation',
-              params: { manufacturer: offer.manufacturer, model: offer.model }
+              name: 'offer_details',
+              params: { aircraftType: offer.aircraft_type, manufacturer: offer.manufacturer, model: offer.model }
             }"
           >
             <a>Model: {{ offer.manufacturer }} {{ offer.model }}</a>
@@ -34,7 +34,7 @@
     <div class="icon">
       <small>
         <a :href="offer.url" target="_blank">
-          <img :src="'url_icon.png'" alt="Link to Offer" height="30" width="30" />
+          <img :src="'/url_icon.png'" alt="Link to Offer" height="30" width="30" />
         </a>
       </small>
     </div>
@@ -43,7 +43,7 @@
 
 <script>
 export default {
-  name: 'OfferComponent',
+  name: 'OfferThumb',
   props: {
     offer: {
       type: Object,
diff --git a/ui/src/components/__tests__/OfferComponent.spec.js b/ui/src/components/__tests__/OfferThumb.spec.js
similarity index 82%
rename from ui/src/components/__tests__/OfferComponent.spec.js
rename to ui/src/components/__tests__/OfferThumb.spec.js
index e446b5e..0d23108 100644
--- a/ui/src/components/__tests__/OfferComponent.spec.js
+++ b/ui/src/components/__tests__/OfferThumb.spec.js
@@ -1,9 +1,9 @@
 import { describe, it, expect } from 'vitest'
 
 import { mount } from '@vue/test-utils'
-import OfferComponent from '../OfferComponent.vue'
+import OfferThumb from '../OfferThumb.vue'
 
-describe('OfferComponent', () => {
+describe('OfferThumb', () => {
   it('renders properly', () => {
     const offer = {
       aircraft_typ: 'glider',
@@ -23,7 +23,7 @@ describe('OfferComponent', () => {
       url: 'https://www.segelflug.de/osclass/index.php?page=item&id=42370'
     }
 
-    const wrapper = mount(OfferComponent, { props: { offer: offer } })
+    const wrapper = mount(OfferThumb, { props: { offer: offer } })
 
     expect(wrapper.text()).contains('Rolladen Schneider LS4').contains('2020-02-26')
   })
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index 073862a..0f4fa05 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Offers from '../views/Offers.vue'
-import ModelInformation from '../views/ModelInformation.vue'
+import OffersList from '../views/OffersList.vue'
+import OfferDetails from '../views/OfferDetails.vue'
 import { nextTick } from 'vue'
 
 const router = createRouter({
@@ -8,78 +8,39 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'All Offers',
-      component: Offers,
+      name: 'all_listing',
+      component: OffersList,
       meta: {
         title: 'Aircraft Offers Overview',
         description:
           'Aircraft Offers from various marketplaces. Ranging from Gliders like ASK21 to Cessna and much more (Gliders, TMG, Ultralight, Airplanes)'
       },
-      props: {}
-    },
-    {
-      path: '/gliders',
-      name: 'Glider Offers',
-      component: Offers,
-      meta: {
-        title: 'Aircraft Offers - Glider Offers',
-        description: 'Glider Offers from various marketplaces with prices in EUR.'
-      },
-      props: {
-        aircraftType: 'glider'
-      }
-    },
-    {
-      path: '/tmg',
-      name: 'Touring Motorglider Offers',
-      component: Offers,
-      meta: {
-        title: 'Aircraft Offers - Touring Motor Glider Offers',
-        description:
-          'Touring Motor Glider (like Super Dimona, Stemme) offers from various marketplaces with prices in EUR.'
-      },
-      props: {
-        aircraftType: 'tmg'
-      }
-    },
-    {
-      path: '/ultralight',
-      name: 'Ultralight Offers',
-      component: Offers,
-      meta: {
-        title: 'Aircraft Offers - Ultralights',
-        description: 'Ultralight (like C42) offers from various marketplaces with prices in EUR.'
-      },
-      props: {
-        aircraftType: 'ultralight'
-      }
-    },
-    {
-      path: '/airplane',
-      name: 'Airplane Offers',
-      component: Offers,
-      meta: {
-        title: 'Aircraft Offers - Airplanes',
-        description: 'Small Airplane (like Cessna) offers from various marketplaces with prices in EUR.'
-      },
-      props: {
-        aircraftType: 'airplane'
-      }
+      props: true
     },
     {
-      path: '/model/:manufacturer/:model',
-      name: 'ModelInformation',
-      component: ModelInformation,
-      props: true
+      path: '/:aircraftType',
+      name: 'category_listing',
+      children: [
+        {
+          path: '/:aircraftType',
+          component: OffersList,
+          props: true
+        },
+        {
+          path: '/:aircraftType/:manufacturer/:model',
+          name: 'offer_details',
+          component: OfferDetails,
+          props: true
+        }
+      ]
     }
   ]
 })
 
 router.afterEach((to) => {
   nextTick(() => {
-    // calculate title for ModelInformation dynamically
-    if (to.name === 'ModelInformation') {
-      document.title = `Model ${to.params.manufacturer} ${to.params.model}`
+    if (to.name === 'offer_details') {
+      document.title = `${to.params.aircraftType} ${to.params.manufacturer} ${to.params.model}`
     } else {
       document.title = to.meta.title
     }
diff --git a/ui/src/views/ModelInformation.vue b/ui/src/views/OfferDetails.vue
similarity index 99%
rename from ui/src/views/ModelInformation.vue
rename to ui/src/views/OfferDetails.vue
index 0fa2195..f58a6d5 100644
--- a/ui/src/views/ModelInformation.vue
+++ b/ui/src/views/OfferDetails.vue
@@ -47,7 +47,7 @@ import moment from 'moment'
 import ChartistTooltip from 'chartist-plugin-tooltips-updated'
 
 export default {
-  name: 'ModelInformation',
+  name: 'OfferDetails',
 
   components: {},
   props: {
diff --git a/ui/src/views/Offers.vue b/ui/src/views/Offers.vue
deleted file mode 100644
index bb981b4..0000000
--- a/ui/src/views/Offers.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div id="offers-content">
-    <div id="aircraft-type-filter">
-      <multiselect
-        v-model="selected"
-        :options="available_aircraft_types"
-        group-values="models"
-        group-label="manufacturer"
-        :group-select="false"
-        label="model"
-        :placeholder="'Filter ' + (aircraftType ? aircraftType + ' ' : 'aircraft ') + 'type'"
-      >
-        <template #noResult>
-          <span>Oops! Aircraft type not found. Try different phrase.</span>
-        </template>
-      </multiselect>
-    </div>
-
-    <div id="offers-div">
-      <OfferComponent v-for="offer in offers" :key="offer.id" :offer="offer" />
-      <button class="click-button" @click="fetchData">Load more Offers</button>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import OfferComponent from '../components/OfferComponent.vue'
-import Multiselect from 'vue-multiselect'
-
-export default {
-  name: 'Offers',
-
-  components: {
-    OfferComponent,
-    Multiselect
-  },
-  props: {
-    aircraftType: {
-      type: String,
-      default: null
-    }
-  },
-  data() {
-    return {
-      offers: [],
-      offset: 0,
-      limit: 30,
-
-      available_aircraft_types: [],
-      selected: ''
-    }
-  },
-
-  watch: {
-    selected(val) {
-      if (val !== null) {
-        this.$router.push({
-          name: 'ModelInformation',
-          params: { manufacturer: val.manufacturer, model: val.model }
-        })
-      }
-    }
-  },
-
-  created() {
-    this.fetchData()
-    this.fetchAircraftTypes()
-  },
-
-  methods: {
-    fetchData() {
-      axios
-        .get(`/offers`, {
-          params: {
-            aircraft_type: this.aircraftType,
-            limit: this.limit,
-            offset: this.offset
-          }
-        })
-        .then((response) => {
-          this.offers = this.offers.concat(response.data)
-        })
-      this.offset += this.limit
-    },
-    fetchAircraftTypes() {
-      axios.get(`/models`).then((response) => {
-        this.available_aircraft_types = []
-        for (const manufacturer in response.data) {
-          const modelsToDisplay = []
-
-          const modelsByAircraftType = response.data[manufacturer].models
-          for (const type in modelsByAircraftType) {
-            if (this.aircraftType == type || this.aircraftType == null) {
-              for (const model in modelsByAircraftType[type]) {
-                modelsToDisplay.push({
-                  manufacturer: manufacturer,
-                  model: modelsByAircraftType[type][model]
-                })
-              }
-            }
-          }
-
-          this.available_aircraft_types.push({
-            manufacturer: manufacturer,
-            models: modelsToDisplay
-          })
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="css">
-@import 'vue-multiselect/dist/vue-multiselect.css';
-
-#offers-div {
-  padding: 10px;
-}
-
-#aircraft-type-filter {
-  padding: 5px;
-  width: 400px;
-}
-</style>
diff --git a/ui/src/views/OffersList.vue b/ui/src/views/OffersList.vue
new file mode 100644
index 0000000..7968c26
--- /dev/null
+++ b/ui/src/views/OffersList.vue
@@ -0,0 +1,61 @@
+<template>
+  <div id="offers-content">
+    <div id="offers-div">
+      <OfferThumb v-for="offer in offers" :key="offer.id" :offer="offer" />
+      <button class="click-button" @click="fetchData">Load more Offers</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import OfferThumb from '../components/OfferThumb.vue'
+
+export default {
+  name: 'OffersList',
+
+  components: {
+    OfferThumb
+  },
+  props: {
+    aircraftType: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      offers: [],
+      offset: 0,
+      limit: 30
+    }
+  },
+
+  created() {
+    this.fetchData()
+  },
+
+  methods: {
+    fetchData() {
+      axios
+        .get(`/offers`, {
+          params: {
+            aircraft_type: this.aircraftType,
+            limit: this.limit,
+            offset: this.offset
+          }
+        })
+        .then((response) => {
+          this.offers = this.offers.concat(response.data)
+        })
+      this.offset += this.limit
+    }
+  }
+}
+</script>
+
+<style lang="css">
+#offers-div {
+  padding: 10px;
+}
+</style>