diff --git a/src/charts/aggregate.vue b/src/charts/aggregate.vue
new file mode 100644
index 00000000..e7b18487
--- /dev/null
+++ b/src/charts/aggregate.vue
@@ -0,0 +1,48 @@
+<template lang="pug">
+aggregate-od.deck-map(
+  :root="fileSystemConfig.slug"
+  :subfolder="subfolder"
+  :config="config"
+  :thumbnail="false"
+)
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+
+import { FileSystemConfig } from '@/Globals'
+import AggregateOd from '@/plugins/aggregate-od/AggregateOd.vue'
+
+@Component({ components: { AggregateOd } })
+export default class VueComponent extends Vue {
+  @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
+  @Prop({ required: true }) subfolder!: string
+  @Prop({ required: true }) files!: string[]
+  @Prop({ required: true }) config!: any
+
+  private mounted() {
+    // console.log(this.fileSystemConfig)
+    // console.log('subfolder', this.subfolder)
+    // console.log('config', this.config)
+    this.$emit('isLoaded')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.deck-map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>
diff --git a/src/charts/allCharts.ts b/src/charts/allCharts.ts
index 84bc13eb..822d9d3c 100644
--- a/src/charts/allCharts.ts
+++ b/src/charts/allCharts.ts
@@ -15,6 +15,7 @@ import transit from './transit.vue'
 import vega from './vega.vue'
 
 // full-screen map visualizations:
+import aggregate from './aggregate.vue'
 import carriers from './carriers.vue'
 import flowmap from './flowmap.vue'
 import links from './links.vue'
@@ -37,7 +38,7 @@ export const plotlyCharts = {
 }
 
 // export all remaining charts/maps here:
-export default Object.assign({ carriers, flowmap, links, map }, plotlyCharts)
+export default Object.assign({ aggregate, carriers, flowmap, links, map }, plotlyCharts)
 
 // ----- HELPER FUNCTIONS -----------------------------------------------------
 
diff --git a/src/plugins/aggregate-od/AggregateOd.vue b/src/plugins/aggregate-od/AggregateOd.vue
index 93ac9d16..c3e671ef 100644
--- a/src/plugins/aggregate-od/AggregateOd.vue
+++ b/src/plugins/aggregate-od/AggregateOd.vue
@@ -1,18 +1,29 @@
 <template lang="pug">
 .mycomponent(:id="containerId")
-  .status-blob(v-show="!thumbnail && loadingText")
-    p {{ loadingText }}
 
   zoom-buttons.zoom-buttons(v-if="!thumbnail")
 
-  .map-complications(v-if="!thumbnail && !isMobile()")
-    legend-box.complication(:rows="legendRows")
-    scale-box.complication(:rows="scaleRows")
-
   .map-container
     .mymap(:id="mapId")
 
-  collapsible-panel.left-panel(v-if="!thumbnail && !loadingText"
+    .status-blob(v-show="!thumbnail && loadingText")
+      p {{ loadingText }}
+
+    .lower-left(v-if="!thumbnail")
+      .subheading {{ $t('lineWidths')}}
+      scale-slider.scale-slider(:stops='scaleValues' :initialTime='1' @change='bounceScaleSlider')
+
+      .subheading {{ $t('hide')}}
+      line-filter-slider.scale-slider(
+        :initialValue="lineFilter"
+        @change='bounceLineFilter')
+
+    .lower-right(v-if="!thumbnail && !isMobile()")
+      legend-box.complication(:rows="legendRows")
+      scale-box.complication(:rows="scaleRows")
+
+
+  collapsible-panel.left-panel(v-if="!this.config && !thumbnail && !loadingText"
     :darkMode="isDarkMode" direction="left" :locked="true")
 
     .info-header(style="padding: 0 0.5rem;")
@@ -21,46 +32,53 @@
     .info-description(style="padding: 0 0.5rem;" v-if="this.vizDetails.description")
       p.description {{ this.vizDetails.description }}
 
-    .widgets
-      h4.heading Uhrzeit
+  .widgets(v-if="!thumbnail" style="{'padding': config ? '0 0'}")
+    .widget-column()
+      h4.heading {{ $t('time')}}
+      label.checkbox(style="margin: 0 0.5rem 0 auto;")
+          input(type="checkbox" v-model="showTimeRange")
+          | &nbsp;{{ $t('duration') }}
       time-slider.time-slider(v-if="headers.length > 0"
         :useRange='showTimeRange'
         :stops='headers'
         @change='bounceTimeSlider')
+
+    .widget-column
+      h4.heading {{ $t('Centroids')}}
+      label.checkbox
+        input(type="checkbox" v-model="showCentroids")
+        | &nbsp;{{ $t('showCentroids')}}
       label.checkbox
-         input(type="checkbox" v-model="showTimeRange")
-         | &nbsp;Zeitraum
-
-      h4.heading Kreise
-      .white-box
-        label.checkbox
-          input(type="checkbox" v-model="showCentroids")
-          | &nbsp;Kreise anzeigen
-        label.checkbox
-          input(type="checkbox" v-model="showCentroidLabels")
-          | &nbsp;Nummern anzeigen
-
-      h4.heading Strecken
-      .white-box
-        .subheading Linienbreiten
-        scale-slider.scale-slider(:stops='scaleValues' :initialTime='1' @change='bounceScaleSlider')
-
-        .subheading Ausblenden bis
-        line-filter-slider.scale-slider(
-          :initialValue="lineFilter"
-          @change='bounceLineFilter')
-
-      h4.heading Insgesamt für
-      .buttons-bar
-        // {{rowName}}
-        button.button(@click='clickedOrigins' :class='{"is-link": isOrigin ,"is-active": isOrigin}') Quellen
-        // {{colName}}
-        button.button(hint="hide" @click='clickedDestinations' :class='{"is-link": !isOrigin,"is-active": !isOrigin}') Zielorte
+        input(type="checkbox" v-model="showCentroidLabels")
+        | &nbsp;{{$t('showNumbers')}}
+
+    .widget-column(style="margin: 0 0 0 auto")
+      h4.heading {{$t('total')}}
+      button.button(@click='clickedOrigins' :class='{"is-link": isOrigin ,"is-active": isOrigin}') {{$t('origins')}}
+      button.button(hint="hide" @click='clickedDestinations' :class='{"is-link": !isOrigin,"is-active": !isOrigin}') {{$t('dest')}}
 
 </template>
 
 <script lang="ts">
-'use strict'
+const i18n = {
+  messages: {
+    en: {
+      legend: 'Legend:',
+      lineWidth: 'Line width:',
+      lineWidths: 'Line widths',
+      hide: 'Hide smaller than',
+      time: 'Time of Day',
+      duration: 'Duration',
+      circle: 'Centroids',
+      showCentroids: 'Show centroids',
+      showNumbers: 'Show totals',
+      total: 'Totals for',
+      origins: 'Origins',
+      dest: 'Destinations',
+    },
+    de: {},
+  },
+}
 
 import * as shapefile from 'shapefile'
 import * as turf from '@turf/turf'
@@ -120,6 +138,7 @@ const INPUTS = {
 }
 
 @Component({
+  i18n,
   components: {
     CollapsiblePanel,
     LegendBox,
@@ -140,6 +159,9 @@ class MyComponent extends Vue {
   @Prop({ required: false })
   private yamlConfig!: string
 
+  @Prop({ required: false })
+  private config!: any
+
   @Prop({ required: false })
   private thumbnail!: boolean
 
@@ -336,21 +358,25 @@ class MyComponent extends Vue {
 
   private async getVizDetails() {
     if (!this.myState.fileApi) return
-    // first get config
-    try {
-      // might be a project config:
-      const filename =
-        this.myState.yamlConfig.indexOf('/') > -1
-          ? this.myState.yamlConfig
-          : this.myState.subfolder + '/' + this.myState.yamlConfig
-
-      const text = await this.myState.fileApi.getFileText(filename)
-      this.vizDetails = yaml.parse(text)
-    } catch (err) {
-      const e = err as any
-      // maybe it failed because password?
-      if (this.myState.fileSystem && this.myState.fileSystem.needPassword && e.status === 401) {
-        globalStore.commit('requestLogin', this.myState.fileSystem.slug)
+
+    if (this.config) {
+      this.vizDetails = Object.assign({}, this.config)
+    } else {
+      try {
+        // might be a project config:
+        const filename =
+          this.myState.yamlConfig.indexOf('/') > -1
+            ? this.myState.yamlConfig
+            : this.myState.subfolder + '/' + this.myState.yamlConfig
+
+        const text = await this.myState.fileApi.getFileText(filename)
+        this.vizDetails = yaml.parse(text)
+      } catch (err) {
+        const e = err as any
+        // maybe it failed because password?
+        if (this.myState.fileSystem && this.myState.fileSystem.needPassword && e.status === 401) {
+          globalStore.commit('requestLogin', this.myState.fileSystem.slug)
+        }
       }
     }
 
@@ -399,8 +425,8 @@ class MyComponent extends Vue {
   private setupMap() {
     this.mymap = new maplibregl.Map({
       container: this.mapId,
-      logoPosition: 'bottom-right',
       style: this.isDarkMode ? MAP_STYLES.dark : MAP_STYLES.light,
+      logoPosition: 'top-left',
     })
 
     try {
@@ -409,7 +435,7 @@ class MyComponent extends Vue {
         const lnglat = JSON.parse(extent)
 
         const mFac = this.isMobile() ? 0 : 1
-        const padding = { top: 50 * mFac, bottom: 100 * mFac, right: 100 * mFac, left: 300 * mFac }
+        const padding = { top: 50 * mFac, bottom: 50 * mFac, right: 100 * mFac, left: 50 * mFac }
 
         this.$store.commit('setMapCamera', {
           longitude: 0.5 * (lnglat[0] + lnglat[2]),
@@ -618,7 +644,7 @@ class MyComponent extends Vue {
     if (this.mymap.getLayer('centroid-layer')) this.mymap.removeLayer('centroid-layer')
     if (this.mymap.getLayer('centroid-label-layer')) this.mymap.removeLayer('centroid-label-layer')
 
-    if (this.showCentroids) {
+    if (this.showCentroids && !this.thumbnail) {
       this.mymap.addLayer({
         id: 'centroid-layer',
         source: 'centroids',
@@ -904,7 +930,7 @@ class MyComponent extends Vue {
     const options = this.thumbnail
       ? { animate: false }
       : {
-          padding: { top: 50, bottom: 100, right: 100, left: 300 },
+          padding: { top: 100, bottom: 100, right: 100, left: 100 },
           animate: false,
         }
     this.mymap.fitBounds(this._mapExtentXYXY, options)
@@ -1257,7 +1283,6 @@ h4 {
 }
 
 .mycomponent {
-  width: 100%;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: 1fr auto;
@@ -1265,30 +1290,28 @@ h4 {
 }
 
 .status-blob {
-  grid-column: 1 / 3;
-  grid-row: 1 / 3;
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
   background-color: white;
-  box-shadow: 0 0 8px #00000040;
-  margin: auto 0px;
-  padding: 3rem 0px;
-  text-align: center;
-  z-index: 99;
-  border-top: solid 1px #479ccc;
-  border-bottom: solid 1px #479ccc;
+  padding: 0.75rem 1.5rem;
+  z-index: 5;
+  filter: $filterShadow;
+  font-size: 1.2rem;
 }
 
 .map-container {
+  height: 100%;
   min-height: $thumbnailHeight;
   background-color: #eee;
   grid-column: 1 / 3;
   grid-row: 1 / 3;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .mymap {
-  height: 100%;
-  width: 100%;
   flex: 1;
 }
 
@@ -1310,52 +1333,66 @@ h4 {
 .widgets {
   color: var(--text);
   display: flex;
+  flex-direction: row;
+  user-select: none;
+  padding: 0.5rem 0.5rem;
+}
+
+.widget-column {
+  margin-right: 1rem;
+  display: flex;
   flex-direction: column;
-  padding: 0px 0.5rem;
-  margin-top: auto;
-  margin-bottom: 0.5rem;
 }
 
 .status-blob p {
   color: #555;
 }
 
-.map-complications {
+.lower-right {
+  position: absolute;
+  bottom: 2rem;
+  right: 0.5rem;
   display: flex;
-  grid-column: 1 / 3;
-  grid-row: 2/3;
-  margin: auto 0.5rem 1.5rem auto;
-  z-index: 4;
+  z-index: 1;
 }
 
-.complication {
-  margin: 0rem 0rem 0rem 0.5rem;
+.lower-left {
+  width: 10rem;
+  position: absolute;
+  bottom: 5.5rem;
+  right: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+  background-color: var(--bgPanel);
+  opacity: 0.9;
+  filter: $filterShadow;
+  border: solid 1px rgba(161, 160, 160, 0.781);
+  border-radius: 2px;
+  padding-bottom: 0.25rem;
 }
 
-.buttons-bar {
-  display: flex;
-  flex-direction: row;
-  text-align: center;
+.complication {
+  margin: 0rem 0rem 0rem 0.25rem;
 }
 
-.buttons-bar button {
-  flex-grow: 1;
-  width: 50%;
-  margin: 0px 1px;
+.widget-column button {
+  // flex-grow: 1;
+  margin: 1px 0px;
 }
 
 .time-slider {
-  margin: 0rem 0px auto 0px;
+  width: 12rem;
 }
 
 .scale-slider {
-  margin: 0rem 0px auto 0px;
+  // margin: 0rem 0px auto 0px;
 }
 
 .heading {
   font-weight: bold;
   text-align: left;
-  margin-top: 1rem;
+  margin-top: 0.5rem;
 }
 
 .subheading {
@@ -1364,10 +1401,10 @@ h4 {
 }
 
 .checkbox {
-  font-size: 0.8rem;
-  margin-top: 0.25rem;
-  margin-right: 0.5rem;
-  margin-left: 1rem;
+  // font-size: 0.8rem;
+  // margin-top: 0.25rem;
+  // margin-right: 0.5rem;
+  // margin-left: 1rem;
 }
 
 .description {
@@ -1387,7 +1424,7 @@ h4 {
 }
 
 .left-panel {
-  z-index: 1;
+  z-index: 2;
   position: absolute;
   top: 0rem;
   left: 0;
@@ -1410,9 +1447,10 @@ h4 {
 }
 
 .zoom-buttons {
-  grid-row: 1 / 3;
-  grid-column: 1 / 3;
-  margin: 0 0 auto auto;
+  position: absolute;
+  top: 0.3rem;
+  right: 0.3rem;
+  z-index: 1;
 }
 
 @media only screen and (max-width: 640px) {
diff --git a/src/plugins/aggregate-od/LegendBoxOD.vue b/src/plugins/aggregate-od/LegendBoxOD.vue
index 9e05356d..a251a59c 100644
--- a/src/plugins/aggregate-od/LegendBoxOD.vue
+++ b/src/plugins/aggregate-od/LegendBoxOD.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 #legend-container
-  p.title Legende:
+  p.title {{$t('legend')}}
   .legend-item(v-for="item in rows")
     .legend-col(v-if ="typeof item === 'string' && item.includes('#')" :style="{'background-color': item}")
     .legend-element1(v-if ="typeof item === 'string' && !item.includes('#') && item == ('↓')") {{item}}
@@ -8,9 +8,15 @@
 </template>
 
 <script lang="ts">
+const i18n = {
+  messages: {
+    en: { linewidth: 'Line widths:', legend: 'Legend:' },
+    de: { linewidth: 'Linienbreite:', legend: 'Legende:' },
+  },
+}
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
-@Component
+@Component({ i18n })
 export default class LegendBox extends Vue {
   @Prop({ type: Array, required: true })
   private rows!: any
diff --git a/src/plugins/aggregate-od/ScaleBoxOD.vue b/src/plugins/aggregate-od/ScaleBoxOD.vue
index de2304aa..16843588 100644
--- a/src/plugins/aggregate-od/ScaleBoxOD.vue
+++ b/src/plugins/aggregate-od/ScaleBoxOD.vue
@@ -1,15 +1,22 @@
 <template lang="pug">
 #scale-container
-  p.title Linienbreite:
+  p.title {{$t('linewidth')}}
     .scale-element {{ "|↔︎|" }}
-    .scale-scale {{ "~ " + this.rows[0] + " Fahrten" }}
+    .scale-scale {{ `~ ${this.rows[0]} ` + $t('trips') }}
 
 </template>
 
 <script lang="ts">
+const i18n = {
+  messages: {
+    en: { linewidth: 'Line widths:', legend: 'Legend:', trips: 'trips' },
+    de: { linewidth: 'Linienbreite:', legend: 'Legende:', trips: 'Fahrten' },
+  },
+}
+
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
-@Component
+@Component({ i18n })
 export default class ScaleBox extends Vue {
   @Prop({ type: Array, required: true })
   private rows!: any
diff --git a/src/plugins/aggregate-od/TimeSlider.vue b/src/plugins/aggregate-od/TimeSlider.vue
index 661dd509..6cc366e3 100644
--- a/src/plugins/aggregate-od/TimeSlider.vue
+++ b/src/plugins/aggregate-od/TimeSlider.vue
@@ -104,15 +104,12 @@ export default class TimeSlider extends Vue {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 @import '../../../node_modules/vue-slider-component/theme/default.css';
-
-.time-slider-main-content {
-  padding: 0.5rem 0.8rem 2rem 0.5rem;
-}
+@import '@/styles.scss';
 
 .time-slider {
   margin-left: 0.5rem;
-  margin-bottom: 0.2rem;
+  padding-bottom: 0.25rem;
 }
 </style>