diff --git a/core/Dockerfile b/core/Dockerfile
index bebec2b838..8dad8898e5 100644
--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -10,6 +10,8 @@ RUN [ -z "$VUE_APP_GIT_DESCRIBE" ] \
 COPY frontend /home/pi/frontend
 RUN --mount=type=cache,target=/home/pi/frontend/node_modules yarn --cwd /home/pi/frontend install --network-timeout=300000 --ignore-engines
 RUN --mount=type=cache,target=/home/pi/frontend/node_modules yarn --cwd /home/pi/frontend build --skip-plugins @vue/cli-plugin-eslint --ignore-engines
+# Copy some static files not consumed by webpack
+COPY frontend/src/assets/vehicles /home/pi/frontend/dist/vehicles
 
 # Download binaries
 FROM bluerobotics/blueos-base:v0.0.8 as downloadBinaries
diff --git a/core/frontend/src/App.vue b/core/frontend/src/App.vue
index f4a722dd21..ee91f6bcc4 100644
--- a/core/frontend/src/App.vue
+++ b/core/frontend/src/App.vue
@@ -50,6 +50,13 @@
           width="70%"
         />
       </v-container>
+      <v-divider />
+      <v-container
+        elevation="0"
+        class="d-flex justify-center align-center"
+      >
+        <vehicle-banner />
+      </v-container>
 
       <v-container
         class="pa-1"
@@ -227,6 +234,7 @@ import PowerMenu from './components/app/PowerMenu.vue'
 import ReportMenu from './components/app/ReportMenu.vue'
 import SettingsMenu from './components/app/SettingsMenu.vue'
 import ThemeTrayMenu from './components/app/ThemeTrayMenu.vue'
+import VehicleBanner from './components/app/VehicleBanner.vue'
 import VehicleRebootRequiredTrayMenu from './components/app/VehicleRebootRequiredTrayMenu.vue'
 import BeaconTrayMenu from './components/beacon/BeaconTrayMenu.vue'
 import EthernetTrayMenu from './components/ethernet/EthernetTrayMenu.vue'
@@ -275,6 +283,7 @@ export default Vue.extend({
     'report-menu': ReportMenu,
     'backend-status-checker': BackendStatusChecker,
     Alerter,
+    'vehicle-banner': VehicleBanner,
     'new-version-notificator': NewVersionNotificator,
     VehicleRebootRequiredTrayMenu,
     Wizard,
diff --git a/core/frontend/src/assets/vehicles/images/bb120.png b/core/frontend/src/assets/vehicles/images/bb120.png
new file mode 100755
index 0000000000..7d7929c64a
Binary files /dev/null and b/core/frontend/src/assets/vehicles/images/bb120.png differ
diff --git a/core/frontend/src/assets/vehicles/images/bluerov2.png b/core/frontend/src/assets/vehicles/images/bluerov2.png
new file mode 100755
index 0000000000..ee7e10d7e8
Binary files /dev/null and b/core/frontend/src/assets/vehicles/images/bluerov2.png differ
diff --git a/core/frontend/src/assets/vehicles/images/unknown.svg b/core/frontend/src/assets/vehicles/images/unknown.svg
new file mode 100644
index 0000000000..afc8dd8167
--- /dev/null
+++ b/core/frontend/src/assets/vehicles/images/unknown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 10.54C16.78 7.44 14.63 5 12 5S7.22 7.44 7 10.54C4 11.23 2 12.5 2 14C2 16.21 6.5 18 12 18S22 16.21 22 14C22 12.5 20 11.23 17 10.54M14.93 11.84C13.03 12.05 10.97 12.05 9.07 11.84C9.03 11.56 9 11.28 9 11C9 8.8 10.35 7 12 7S15 8.8 15 11C15 11.28 15 11.56 14.93 11.84Z" /></svg>
\ No newline at end of file
diff --git a/core/frontend/src/components/app/ImagePicker.vue b/core/frontend/src/components/app/ImagePicker.vue
new file mode 100755
index 0000000000..4be07fcd7c
--- /dev/null
+++ b/core/frontend/src/components/app/ImagePicker.vue
@@ -0,0 +1,295 @@
+<template>
+  <div id="imgdiv">
+    <v-img
+      id="main"
+      contain
+      :src="image !== null ? image : defaultImage"
+      @click="openDialog()"
+    />
+    <v-btn
+      id="edit-icon"
+      class="mx-2"
+      fab
+      dark
+      x-small
+      @click="openDialog"
+    >
+      <v-icon>
+        mdi-pencil
+      </v-icon>
+    </v-btn>
+    <v-dialog v-model="dialog" @dragover.prevent @dragenter.prevent @drop.prevent="onDrop">
+      <v-card class="pa-2">
+        <v-card-title>
+          Pick an Image
+        </v-card-title>
+        <v-row v-if="allimages.length > 0" class="overflow-auto" style="max-height: 500px;" justify="space-around">
+          <v-col v-for="(each_image, index) in allimages" :key="index" cols="12" sm="3" md="3">
+            <v-card
+              :class="{ 'selected-image': selected_index === index }"
+              class="image-card"
+              @click="selectImage(index)"
+            >
+              <v-img :src="`${each_image.name}`" contain aspect-ratio="1" />
+              <v-btn
+                v-if="!each_image.readonly"
+                id="trashcan-icon"
+                class="mx-2"
+                fab
+                dark
+                x-small
+                @click.stop="deleteImage(index)"
+              >
+                <v-icon>
+                  mdi-trash-can
+                </v-icon>
+              </v-btn>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-row v-else-if="loading">
+          <SpinningLogo size="100px" />
+        </v-row>
+        <v-row v-else>
+          <v-alert>
+            No images found at {{ directory }}. Please upload some images to this directory using the file browser.
+          </v-alert>
+          <v-alert v-if="error" color="red lighten-2">
+            {{ error }}
+          </v-alert>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <v-card
+              class="drop-zone"
+              @dragover.prevent
+              @dragenter.prevent
+              @drop.prevent="onDrop"
+            >
+              <v-card-text>
+                Drag and drop an image file here to upload
+              </v-card-text>
+              <input
+                id="file-input"
+                ref="fileInput"
+                aria-label="File browser"
+                type="file"
+                accept="image/*"
+                style="display:none"
+                @change="onFileInputChange"
+              />
+              <v-btn color="primary" @click="onFilePickerClick">
+                Click to upload an image
+              </v-btn>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-alert v-if="upload_error" color="red lighten-2">
+          {{ upload_error }}
+        </v-alert>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from 'axios'
+import Vue from 'vue'
+
+import SpinningLogo from '@/components/common/SpinningLogo.vue'
+import back_axios from '@/utils/api'
+
+interface FileEntry {
+  name: string;
+  type: string;
+  mtime: string;
+}
+
+interface ImageUrl {
+  name: string;
+  readonly: boolean;
+}
+
+export default Vue.extend({
+  name: 'ImagePicker',
+  components: {
+    SpinningLogo,
+  },
+  props: {
+    directory: {
+      type: String,
+      default: '/userdata/images/',
+      required: false,
+    },
+    readonlyDirectory: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    defaultImage: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    image: {
+      type: String,
+      default: null,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+      selected_index: null as number | null,
+      images: [] as string[],
+      readonly_images: [] as string[],
+      error: null as string | null,
+      loading: true,
+      upload_error: null as string | null,
+    }
+  },
+  computed: {
+    allimages(): ImageUrl[] {
+      const images = this.images.map((image: string) => (
+        { name: `${this.directory}/${image}`, readonly: false }))
+      const readonly_images = this.readonly_images.map((image: string) => (
+        { name: `${this.readonlyDirectory}/${image}`, readonly: true }))
+      return [...images, ...readonly_images, { name: this.defaultImage, readonly: true }]
+    },
+  },
+  mounted() {
+    this.loadImages()
+    this.loadReadonlyImages()
+  },
+  methods: {
+    selectImage(index: number) {
+      this.selected_index = index
+      this.$emit('image-selected', this.allimages[index].name)
+      this.dialog = false
+    },
+    openDialog() {
+      this.dialog = true
+    },
+    loadImages() {
+      back_axios({
+        method: 'get',
+        url: this.directory,
+      }).then((response) => {
+        this.images = response.data.filter(
+          (string: FileEntry) => string.type === 'file',
+        ).map((file: FileEntry) => file.name)
+        this.loading = false
+      }).catch((error) => {
+        this.error = error
+      })
+    },
+    loadReadonlyImages() {
+      if (!this.readonlyDirectory) {
+        return
+      }
+      back_axios({
+        method: 'get',
+        url: this.readonlyDirectory as string,
+      }).then((response) => {
+        this.readonly_images = response.data.filter(
+          (string: FileEntry) => string.type === 'file',
+        ).map((file: FileEntry) => file.name)
+        this.loading = false
+      }).catch((error) => {
+        this.error = error
+      })
+    },
+    async deleteImage(index: number) {
+      try {
+        await back_axios({
+          method: 'delete',
+          url: `/upload/${this.directory}/${this.images[index]}`,
+        })
+        this.loadImages()
+      } catch (error) {
+        console.error('Error deleting file:', error)
+        this.error = `Error deleting file: ${error}`
+      }
+    },
+    onFileInputChange(event: Event) {
+      const target = event.target as HTMLInputElement
+      const file = target.files?.[0]
+      if (!file) return
+      const fileName = encodeURIComponent(file.name)
+      this.uploadFile(file, `${this.directory}/${fileName}`)
+    },
+    onFilePickerClick() {
+      const input = this.$refs.fileInput as HTMLInputElement
+      input.click()
+    },
+    async uploadFile(file: File, destination_path: string) {
+      const config = {
+        headers: {
+          'Content-Type': file.type,
+        },
+      }
+      await axios.put(`/upload/${destination_path}`, file, config)
+        .catch((error) => {
+          this.upload_error = error
+          console.log(`Error uploading file: ${error}`)
+        })
+      this.loadImages()
+    },
+    async onDrop(event: DragEvent) {
+      const file = event.dataTransfer?.files?.[0]
+      if (!file) return
+      const fileName = encodeURIComponent(file.name)
+      await this.uploadFile(file, `${this.directory}/${fileName}`)
+    },
+  },
+})
+</script>
+<style scoped>
+  #main {
+    display: inline-flex;
+    height: 50px;
+    width: 50px;
+    margin: 0px;
+    object-fit: contain;
+    position: relative;
+  }
+
+  #edit-icon {
+    display: none;
+    position: absolute;
+    right: -15px;
+    bottom: 0;
+  }
+
+  #imgdiv:hover #edit-icon{
+    display: inline-flex !important;
+  }
+
+  #imgdiv {
+    position:relative;
+  }
+
+  .drop-zone {
+    border: 2px dashed #ccc;
+    border-radius: 4px;
+    text-align: center;
+    padding: 20px;
+    margin: 20px 0;
+  }
+
+  .image-card {
+    position: relative;
+  }
+
+  #trashcan-icon {
+    display: none;
+    position: absolute;
+    top: -10px;
+    right: -10px;
+  }
+
+  .image-card:hover #trashcan-icon {
+    display: inline-flex !important;
+  }
+
+</style>
diff --git a/core/frontend/src/components/app/VehicleBanner.vue b/core/frontend/src/components/app/VehicleBanner.vue
new file mode 100755
index 0000000000..270b2ce617
--- /dev/null
+++ b/core/frontend/src/components/app/VehicleBanner.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div id="vehicle-banner" class="d-flex align-center justify-space-between mb-6">
+      <image-picker
+        directory="/userdata/images/vehicle"
+        readonly-directory="/vehicles/images"
+        :default-image="require('@/assets/vehicles/images/unknown.svg')"
+        :image="vehicle_image"
+        @image-selected="save_vehicle_image"
+      />
+      <p id="vehicle-name" class="pa-4">
+        {{ vehicle_name }}
+        <span
+          v-if="system_id !== 1"
+          :title="`System ID: ${system_id}`"
+          class="subtitle-1 text--secondary"
+        >
+          ({{ system_id }})
+        </span>
+        <v-btn
+          class="mx-2 edit-icon"
+          fab
+          dark
+          x-small
+          @click="openDialog"
+        >
+          <v-icon>
+            mdi-pencil
+          </v-icon>
+        </v-btn>
+      </p>
+      <image-picker
+        directory="/userdata/images/logo"
+        :default-image="require('@/assets/img/blue-robotics-logo.svg')"
+        :image="logo_image"
+        @image-selected="save_logo"
+      />
+    </div>
+    <v-dialog v-if="dialog" v-model="dialog" max-width="500px">
+      <v-card>
+        <v-card-title>Edit Vehicle Details</v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="vehicle_name_input"
+            label="Vehicle Name"
+          />
+          <v-text-field
+            v-model="mdns_hostname_input"
+            label="mDNS Hostname"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Cancel
+          </v-btn>
+          <v-btn color="blue darken-1" text @click="save()">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import ardupilot_data from '@/store/autopilot'
+import bag from '@/store/bag'
+import beacon from '@/store/beacon'
+
+import ImagePicker from './ImagePicker.vue'
+
+export default Vue.extend({
+  name: 'VehicleBanner',
+  components: {
+    ImagePicker,
+  },
+  data() {
+    return {
+      vehicle_name_input: '',
+      vehicle_image: undefined as string | undefined,
+      logo_image: null as string | null,
+      mdns_hostname_input: '',
+      dialog: false,
+    }
+  },
+  computed: {
+    vehicle_name() {
+      return beacon.vehicle_name
+    },
+    mdns_hostname() {
+      return beacon.hostname || 'blueos'
+    },
+    system_id() {
+      return ardupilot_data.system_id
+    },
+  },
+  watch: {
+    vehicle_name() {
+      this.update_title()
+      this.vehicle_name_input = this.vehicle_name || 'My Vehicle'
+    },
+    system_id() {
+      this.update_title()
+    },
+  },
+  mounted() {
+    beacon.registerBeaconListener(this)
+    this.load_vehicle_image()
+    this.vehicle_name_input = this.vehicle_name || 'My Vehicle'
+    this.mdns_hostname_input = this.mdns_hostname
+    this.load_company_logo()
+  },
+  methods: {
+    async load_vehicle_image() {
+      this.vehicle_image = (await bag.getData('vehicle.image_path'))?.url as string
+    },
+    async load_company_logo() {
+      this.logo_image = (await bag.getData('vehicle.logo_image_path'))?.url as string
+    },
+    update_title() {
+      const sysid = this.system_id !== 1 ? `(${this.system_id}) ` : ''
+      document.title = `${sysid}${this.vehicle_name} - BlueOS`
+    },
+    save() {
+      this.save_name()
+      this.save_mdns()
+      this.dialog = false
+    },
+    save_logo(image: string) {
+      this.logo_image = image
+      bag.setData('vehicle.logo_image_path', {
+        url: image,
+      })
+    },
+    save_vehicle_image(image: string) {
+      this.vehicle_image = image
+      bag.setData('vehicle.image_path', {
+        url: image,
+      })
+    },
+    save_name() {
+      beacon.setVehicleName(this.vehicle_name_input)
+    },
+    save_mdns() {
+      beacon.setHostname(this.mdns_hostname_input)
+    },
+    openDialog() {
+      this.dialog = true
+    },
+  },
+})
+</script>
+<style scoped>
+  #vehicle-name:hover .edit-icon{
+    display: inline-flex;
+  }
+
+  #vehicle-banner {
+    margin-bottom: 0 !important;
+    margin-top: 3px;
+  }
+
+  #vehicle-name {
+    margin-bottom: 0 !important;
+    position: relative;
+  }
+  .edit-icon {
+    display: none;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+  }
+</style>
diff --git a/core/frontend/src/components/wizard/Wizard.vue b/core/frontend/src/components/wizard/Wizard.vue
index b2ad40bdac..7799476be1 100644
--- a/core/frontend/src/components/wizard/Wizard.vue
+++ b/core/frontend/src/components/wizard/Wizard.vue
@@ -151,7 +151,7 @@ import beacon from '@/store/beacon'
 import wifi from '@/store/wifi'
 import back_axios from '@/utils/api'
 
-const WIZARD_VERSION = 3
+const WIZARD_VERSION = 4
 
 const models = require.context(
   '/src/assets/vehicles/models/',
@@ -194,6 +194,7 @@ export default Vue.extend({
       sub_model: models('./bluerov.glb'),
       vehicle_name: 'blueos',
       vehicle_type: VehicleType.Sub,
+      vehicle_image: null as string | null,
       wait_configuration: false,
       // Final configuration
       configurations: [] as Configuration[],
@@ -253,6 +254,13 @@ export default Vue.extend({
           message: undefined,
           done: false,
         },
+        {
+          title: 'Set vehicle image',
+          summary: 'Set image to be used for vehicle thumbnail',
+          promise: this.setVehicleImage(),
+          message: undefined,
+          done: false,
+        },
         ...this.setup_configurations,
         {
           title: 'Update wizard version',
@@ -276,6 +284,7 @@ export default Vue.extend({
     setupBoat() {
       this.vehicle_type = VehicleType.Boat
       this.vehicle_name = 'BlueBoat'
+      this.vehicle_image = '/vehicles/images/bb120.png'
       this.step_number += 1
 
       this.setup_configurations = [
@@ -302,6 +311,7 @@ export default Vue.extend({
     setupROV() {
       this.vehicle_type = VehicleType.Sub
       this.vehicle_name = 'BlueROV'
+      this.vehicle_image = '/vehicles/images/bluerov2.png'
       this.step_number += 1
     },
     async setWizardVersion(): Promise<ConfigurationStatus> {
@@ -317,6 +327,14 @@ export default Vue.extend({
         .then(() => undefined)
         .catch(() => 'Failed to set vehicle hostname for mDNS')
     },
+    async setVehicleImage(): Promise<ConfigurationStatus> {
+      const failed = 'Failed to set vehicle Image.'
+      const payload = { url: this.vehicle_image }
+      return bag.setData('vehicle.image_path', payload)
+        // eslint-disable-next-line no-confusing-arrow
+        .then((result) => result ? undefined : failed)
+        .catch(() => failed)
+    },
     async setVehicleName(): Promise<ConfigurationStatus> {
       return beacon.setVehicleName(this.vehicle_name)
         .then(() => undefined)
diff --git a/core/frontend/src/store/beacon.ts b/core/frontend/src/store/beacon.ts
index b59e8b5333..23b4641434 100644
--- a/core/frontend/src/store/beacon.ts
+++ b/core/frontend/src/store/beacon.ts
@@ -35,7 +35,7 @@ class BeaconStore extends VuexModule {
 
   hostname: undefined | string = undefined
 
-  vehicle_name: undefined | string = undefined
+  vehicle_name = ''
 
   // eslint-disable-next-line
   @Mutation
@@ -193,7 +193,7 @@ class BeaconStore extends VuexModule {
         })
     }
 
-    if (this.vehicle_name === undefined) {
+    if (this.vehicle_name === '') {
       back_axios({
         method: 'get',
         url: `${this.API_URL}/vehicle_name`,
@@ -208,8 +208,8 @@ class BeaconStore extends VuexModule {
         })
     }
 
-    if (this.hostname !== undefined && this.vehicle_name !== undefined) {
-      prefetched_names = false
+    if (this.hostname !== undefined && this.vehicle_name !== '') {
+      prefetched_names = true
     }
   }
 
diff --git a/core/frontend/vue.config.js b/core/frontend/vue.config.js
index 42115cfebb..31e2b9733e 100644
--- a/core/frontend/vue.config.js
+++ b/core/frontend/vue.config.js
@@ -39,6 +39,9 @@ module.exports = {
       '^/helper': {
         target: SERVER_ADDRESS,
       },
+      '^/upload': {
+        target: SERVER_ADDRESS,
+      },
       '^/kraken': {
         target: SERVER_ADDRESS,
         selfHandleResponse: true,
@@ -78,6 +81,9 @@ module.exports = {
       '^/userdata': {
         target: SERVER_ADDRESS,
       },
+      '^/vehicles': {
+        target: SERVER_ADDRESS,
+      },
       '^/version-chooser': {
         target: SERVER_ADDRESS,
         selfHandleResponse: true,
diff --git a/core/tools/blueos_startup_update/blueos_startup_update b/core/tools/blueos_startup_update/blueos_startup_update
index b13516d078..ea82813ddc 100755
--- a/core/tools/blueos_startup_update/blueos_startup_update
+++ b/core/tools/blueos_startup_update/blueos_startup_update
@@ -89,6 +89,21 @@ def update_dwc2() -> None:
     )' '''
     print(run_command(command, False))
 
+def ensure_nginx_permissions() -> None:
+    # ensure nginx can read the userdata directory
+    command = "sudo chown -R www-data:www-data /usr/blueos/userdata"
+    print(run_command(command, False))
+
+def ensure_user_data_structure_is_in_place() -> None:
+    # ensures we have all base folders in userdata
+    commands = [
+        "sudo mkdir -p /usr/blueos/userdata/images/vehicle",
+        "sudo mkdir -p /usr/blueos/userdata/images/logo",
+        "sudo mkdir -p /usr/blueos/userdata/styles",
+    ]
+    for command in commands:
+        print(run_command(command, False))
+
 
 def main() -> None:
     current_git_version = os.getenv('GIT_DESCRIBE_TAGS')
@@ -99,6 +114,8 @@ def main() -> None:
     update_startup()
     update_cgroups()
     update_dwc2()
+    ensure_user_data_structure_is_in_place()
+    ensure_nginx_permissions()
 
 if __name__ == "__main__":
     main()
\ No newline at end of file
diff --git a/core/tools/nginx/nginx.conf b/core/tools/nginx/nginx.conf
index 0f73964a57..a3eb0ee401 100644
--- a/core/tools/nginx/nginx.conf
+++ b/core/tools/nginx/nginx.conf
@@ -193,15 +193,34 @@ http {
         location / {
             root /home/pi/frontend;
             try_files $uri $uri/ /index.html;
+            autoindex on;
+            # allow frontend to see files using json
+            autoindex_format json;
+        }
+
+        location ~ ^/upload(/.*)$ {
+            client_max_body_size 100M;
+            alias /usr/blueos$1;
+
+            # Change the access permissions of the uploaded file
+            dav_access group:rw all:r;
+            create_full_put_path on;
+
+            # Configure the allowed HTTP methods
+            dav_methods PUT DELETE MKCOL COPY MOVE;
         }
 
         location /userdata {
             root /usr/blueos;
             autoindex on;
+            # use json as it is easily consumed by the frontend
+            # users already have access through the file browser
+            autoindex_format json;
             # disable cache to improve developer experience
             # this should have very little impact for users
             expires -1;
             add_header Cache-Control no-store;
+            add_header Access-Control-Allow-Origin *;
         }
 
         location ~* \.html$ {