diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
new file mode 100644
index 000000000..1930dc3dc
--- /dev/null
+++ b/.github/workflows/docker-publish.yml
@@ -0,0 +1,58 @@
+name: Build and Publish Docker Image
+
+on:
+  push:
+    branches: [ "main", "master" ]
+    tags: [ 'v*' ]
+  pull_request:
+    branches: [ "main", "master" ]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          submodules: true
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=ref,event=branch
+            type=ref,event=pr
+            type=sha
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/Dockerfile b/Dockerfile
index b5ec600a6..89d106080 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,17 +1,27 @@
-FROM node:12
+FROM node:20
 
 # Create app directory
 WORKDIR /usr/src/app
 
-# Install app dependencies
-# A wildcard is used to ensure both package.json AND package-lock.json are copied
-# where available (npm@5+)
+# Install git (needed for submodules)
+RUN apt-get update && apt-get install -y git
+
+# Copy package files first for better caching
 COPY package*.json ./
 
+# Install dependencies
 RUN npm install
 
 # Bundle app source
 COPY . .
 
+# Initialize and update git submodules
+RUN git init
+RUN git submodule init
+RUN git submodule update
+
+# Run the update-browserslist-db as suggested in the warning
+RUN npx update-browserslist-db@latest
+
 EXPOSE 8080
-CMD [ "npm", "run", "dev" ]
\ No newline at end of file
+CMD [ "npm", "run", "dev" ]
diff --git a/README.md b/README.md
index 8577fc223..b8cd888aa 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,15 @@ npm test
 
 # Docker
 
+run the prebuilt docker image:
+
+``` bash
+docker run -p 8080:8080 -d ghcr.io/ArduPilot/UAVLogViewer:latest
+
+```
+
+or build the docker file locally:
+
 ``` bash
 
 # Build Docker Image
@@ -45,4 +54,4 @@ docker logs <container id>
 
 # Navigate to localhost:8080 in your web browser
 
-```
\ No newline at end of file
+```
diff --git a/src/components/CesiumViewer.vue b/src/components/CesiumViewer.vue
index b41e0352e..2763a5571 100644
--- a/src/components/CesiumViewer.vue
+++ b/src/components/CesiumViewer.vue
@@ -70,7 +70,7 @@ import tzlookup from 'tz-lookup'
 import { store } from './Globals.js'
 import { DataflashDataExtractor } from '../tools/dataflashDataExtractor'
 import { MavlinkDataExtractor } from '../tools/mavlinkDataExtractor'
-import { djiDataExtractor } from '../tools/djiDataExtractor'
+import { DjiDataExtractor } from '../tools/djiDataExtractor'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
 import CesiumSettingsWidget from './widgets/CesiumSettingsWidget.vue'
 import ColorCoderMode from './cesiumExtra/colorCoderMode.js'
@@ -1367,7 +1367,7 @@ export default {
                     dataExtractor = MavlinkDataExtractor
                 } else if (this.state.logType === 'dji') {
                     console.log('Using DJI extractor')
-                    dataExtractor = djiDataExtractor
+                    dataExtractor = DjiDataExtractor
                 } else {
                     dataExtractor = DataflashDataExtractor
                 }