diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
index 19552df957..1181deac62 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
@@ -24,84 +24,147 @@
 >
     <div style="display:flex">
         <div style="width: 150px;">
-            <GhUploader
-                @uploadUrl="/media/upload/"
-                @resourceName="media"
-                @files={{this.files}}
-                @accept={{this.audioMimeTypes}}
-                @extensions={{this.audioExtensions}}
-                @onStart={{this.audioUploadStarted}}
-                @onComplete={{this.audioUploadCompleted}}
-                @onFailed={{this.audioUploadFailed}}
-                as |uploader|
-            >
-                <div class="relative{{unless (or this.previewThumbnailSrc @payload.thumbnailSrc) " bg-whitegrey-l2"}}">
-                    {{#if (or this.previewThumbnailSrc @payload.thumbnailSrc)}}
-                        <img src={{or this.previewThumbnailSrc @payload.thumbnailSrc}} class="{{kg-style this.kgImgStyle}}">
-                        {{#if this.isDraggedOver}}
-                            <div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
-                                <span class="db center sans-serif fw7 f7 white">
-                                    Drop to replace audio
-                                </span>
+            {{#if (not @payload.src)}}
+                <GhUploader
+                    @uploadUrl="/media/upload/"
+                    @resourceName="media"
+                    @files={{this.files}}
+                    @accept={{this.audioMimeTypes}}
+                    @extensions={{this.audioExtensions}}
+                    @onStart={{this.audioUploadStarted}}
+                    @onComplete={{this.audioUploadCompleted}}
+                    @onFailed={{this.audioUploadFailed}}
+                    as |uploader|
+                >
+                    <div class="relative{{unless @payload.src " bg-whitegrey-l2"}}">
+                        {{#if (or uploader.errors uploader.isUploading)}}
+                            <div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
+                                {{#if uploader.errors}}
+                                    <span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
+                                        {{uploader.errors.firstObject.message}}
+                                    </span>
+                                {{/if}}
+
+                                {{#if this.isDraggedOver}}
+                                    <span class="db center sans-serif fw7 f7 middarkgrey">
+                                        Drop it like it's hot 🔥
+                                    </span>
+                                {{else if uploader.isUploading}}
+                                    {{uploader.progressBar}}
+                                {{/if}}
+                            </div>
+                        {{else}}
+                            <div class="relative miw-100 flex items-center kg-media-placeholder ba b--whitegrey">
+                                {{#if this.isDraggedOver}}
+                                    <span class="db center sans-serif fw7 f7 middarkgrey">
+                                        Drop it like it's hot 🔥
+                                    </span>
+                                {{else if uploader.isUploading}}
+                                    {{uploader.progressBar}}
+                                {{else}}
+                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerAudioFileDialog}}>
+                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
+                                    </button>
+                                {{/if}}
                             </div>
                         {{/if}}
-                    {{/if}}
+                    </div>
 
-                    {{#if (or uploader.errors uploader.isUploading (not @payload.src))}}
-                        <div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
-                            {{#if uploader.errors}}
-                                <span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
-                                    {{uploader.errors.firstObject.message}}
-                                </span>
-                            {{/if}}
+                    <div style="display:none">
+                        <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.audioMimeTypes}} @onInsert={{this.registerAudioFileInput}} />
+                    </div>
+                </GhUploader>
 
-                            {{#if this.isDraggedOver}}
-                                <span class="db center sans-serif fw7 f7 middarkgrey">
-                                    Drop it like it's hot 🔥
-                                </span>
-                            {{else if uploader.isUploading}}
-                                {{uploader.progressBar}}
-                            {{else if (not this.previewThumbnailSrc @payload.src)}}
-                                <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerAudioFileDialog}}>
-                                    {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
-                                    {{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
-                                </button>
-                            {{/if}}
-                        </div>
-                    {{else}}
-                        <div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
-                            {{#if this.isDraggedOver}}
-                                <span class="db center sans-serif fw7 f7 middarkgrey">
-                                    Drop it like it's hot 🔥
-                                </span>
-                            {{else if uploader.isUploading}}
-                                {{uploader.progressBar}}
-                            {{else if (not this.previewThumbnailSrc @payload.src)}}
-                                <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerAudioFileDialog}}>
-                                    {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
-                                    {{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
-                                </button>
-                            {{/if}}
-                        </div>
-                    {{/if}}
-                </div>
+            {{else}}
+                <GhUploader
+                    @uploadUrl="/media/thumbnail/upload/"
+                    @resourceName="media"
+                    @requestMethod="put"
+                    @accept={{this.imageMimeTypes}}
+                    @extensions={{this.imageExtensions}}
+                    @onStart={{this.audioThumbnailUploadStarted}}
+                    @onComplete={{this.audioThumbnailUploadCompleted}}
+                    @onFailed={{this.audioThumbnailUploadFailed}}
+                    @paramsHash={{hash url=@payload.src}}
+                    as |uploader|
+                >
+                    <div class="relative{{unless @payload.thumbnailSrc " bg-whitegrey-l2"}}">
 
-                <div style="display:none">
-                    <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.audioMimeTypes}} @onInsert={{this.registerAudioFileInput}} />
-                </div>
-            </GhUploader>
+                        {{#if (or uploader.errors uploader.isUploading)}}
+                            <div class="relative miw-100 flex items-center {{if (not @payload.thumbnailSrc) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
+                                {{#if uploader.errors}}
+                                    <span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
+                                        {{uploader.errors.firstObject.message}}
+                                    </span>
+                                {{/if}}
 
+                                {{#if this.isDraggedOver}}
+                                    <span class="db center sans-serif fw7 f7 middarkgrey">
+                                        Drop it like it's hot 🔥
+                                    </span>
+                                {{else if uploader.isUploading}}
+                                    {{uploader.progressBar}}
+                                {{else if (not @payload.thumbnailSrc)}}
+                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
+                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
+                                        {{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
+                                    </button>
+                                {{else}}
+                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
+                                        <img src={{@payload.thumbnailSrc}} class="{{kg-style this.kgImgStyle}}">
+                                        {{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
+                                    </button>
+                                    {{#if this.isDraggedOver}}
+                                        <div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
+                                            <span class="db center sans-serif fw7 f7 white">
+                                                Drop to replace thumbnail
+                                            </span>
+                                        </div>
+                                    {{/if}}
+                                {{/if}}
+                            </div>
+                        {{else}}
+                            <div class="relative miw-100 flex items-center kg-media-placeholder ba b--whitegrey">
+                                {{#if this.isDraggedOver}}
+                                    <span class="db center sans-serif fw7 f7 middarkgrey">
+                                        Drop it like it's hot 🔥
+                                    </span>
+                                {{else if uploader.isUploading}}
+                                    {{uploader.progressBar}}
+                                {{else if @payload.thumbnailSrc}}
+                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
+                                        <img src={{@payload.thumbnailSrc}} style="width: 150px" />
+                                    </button>
+                                {{else}}
+                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
+                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
+                                    </button>
+                                {{/if}}
+                            </div>
+                        {{/if}}
+                    </div>
+                    <div style="display:none">
+                        <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} @onInsert={{this.registerAudioThumbnailFileInput}} />
+                    </div>
+                </GhUploader>
+
+            {{/if}}
         </div>
-        <div style="flex-grow: 1;display: flex;align-items: center;margin-left: 12px">
-            Click to upload an audio file
-        </div>
+        {{#if @payload.src}}
+            <div style="flex-grow: 1;display: flex;justify-content: center;margin-left: 12px;line-height:3rem">
+                <GhTextInput
+                    @value={{@payload.fileName}}
+                    @input={{action "setAudioTitle" value="target.value"}}
+                    @class="w-100 fw4 bn bg-transparent bw0"
+                    style="border-width: 0"
+                />
+            </div>
+        {{else}}
+            <div style="flex-grow: 1;display: flex;align-items: center;margin-left: 12px;line-height:3rem">
+                Click to upload an audio file
+            </div>
+        {{/if}}
     </div>
-    {{!-- {{#if (or @isSelected (clean-basic-html @payload.caption))}}
-        <card.CaptionInput
-            @caption={{@payload.caption}}
-            @update={{fn this.updatePayloadAttr "caption"}}
-            @placeholder="Type caption for audio (optional)" />
-    {{/if}} --}}
 
     {{#if (and @isEditing @payload.src)}}
         <KoenigSettingsPanel>
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.js
index 1727747e16..dde46f9ad2 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.js
@@ -1,4 +1,8 @@
 import Component from '@glimmer/component';
+import {
+    IMAGE_EXTENSIONS,
+    IMAGE_MIME_TYPES
+} from 'ghost-admin/components/gh-image-uploader';
 import {TrackedObject} from 'tracked-built-ins';
 import {action} from '@ember/object';
 import {bind} from '@ember/runloop';
@@ -8,7 +12,6 @@ import {inject as service} from '@ember/service';
 import {set} from '@ember/object';
 import {task} from 'ember-concurrency-decorators';
 import {tracked} from '@glimmer/tracking';
-
 export const AUDIO_EXTENSIONS = ['mp4', 'mp3', 'wav'];
 export const AUDIO_MIME_TYPES = ['audio/mp4', 'audio/mpeg', 'audio/ogg'];
 
@@ -37,6 +40,7 @@ export default class KoenigCardAudioComponent extends Component {
     @service ghostPaths;
 
     @tracked files;
+    @tracked thumbnailFiles;
     @tracked isDraggedOver = false;
     @tracked previewThumbnailSrc;
 
@@ -46,6 +50,8 @@ export default class KoenigCardAudioComponent extends Component {
 
     audioExtensions = AUDIO_EXTENSIONS;
     audioMimeTypes = AUDIO_MIME_TYPES;
+    imageExtensions = IMAGE_EXTENSIONS;
+    imageMimeTypes = IMAGE_MIME_TYPES;
     placeholder = PLACEHOLDERS[Math.floor(Math.random() * PLACEHOLDERS.length)]
 
     payloadAudioAttrs = ['src', 'fileName', 'width', 'height', 'duration', 'mimeType', 'thumbnailSrc', 'thumbnailWidth', 'thumbnailHeight'];
@@ -91,6 +97,11 @@ export default class KoenigCardAudioComponent extends Component {
         });
     }
 
+    _afterRender() {
+        // this._placeCursorAtEnd();
+        // this._focusInput();
+    }
+
     @action
     didInsert(element) {
         // required for snippet rects to be calculated - editor reaches in to component,
@@ -121,6 +132,11 @@ export default class KoenigCardAudioComponent extends Component {
         this._audioFileInput = input;
     }
 
+    @action
+    registerAudioThumbnailFileInput(input) {
+        this._audioThumbnailFileInput = input;
+    }
+
     @action
     triggerAudioFileDialog(event) {
         if (this._audioFileInput) {
@@ -137,11 +153,32 @@ export default class KoenigCardAudioComponent extends Component {
         }
     }
 
+    @action
+    triggerThumbnailFileDialog(event) {
+        if (this._audioThumbnailFileInput) {
+            return this._audioThumbnailFileInput.click();
+        }
+
+        const target = event?.target || this.element;
+
+        const cardElem = target.closest('.__mobiledoc-card');
+        const fileInput = cardElem?.querySelector('input[type="file"]');
+
+        if (fileInput) {
+            fileInput.click();
+        }
+    }
+
     @action
     async audioUploadStarted() {
         // TODO: Placeholder for any processing on audio upload
     }
 
+    @action
+    async audioThumbnailUploadStarted() {
+        // TODO: Placeholder for any processing on audio upload
+    }
+
     @action
     async audioUploadCompleted([audio]) {
         this.previewPayload.src = audio.url;
@@ -158,6 +195,22 @@ export default class KoenigCardAudioComponent extends Component {
         this.previewPayload = new TrackedObject({});
     }
 
+    @action
+    async audioThumbnailUploadCompleted([audio]) {
+        this.previewPayload.thumbnailSrc = audio.url;
+
+        // save preview payload attrs into actual payload and create undo snapshot
+        this.args.editor.run(() => {
+            this.updatePayloadAttr('thumbnailSrc', this.previewPayload.thumbnailSrc);
+            // this.payloadAudioAttrs.forEach((attr) => {
+            //     this.updatePayloadAttr(attr, this.previewPayload[attr]);
+            // });
+        });
+
+        // reset preview so we're back to rendering saved data
+        this.previewPayload = new TrackedObject({});
+    }
+
     @action
     audioUploadFailed() {
         // reset all attrs, creating an undo snapshot
@@ -168,6 +221,19 @@ export default class KoenigCardAudioComponent extends Component {
         });
     }
 
+    @action
+    setAudioTitle(content) {
+        this.updatePayloadAttr('fileName', content);
+    }
+
+    @action
+    audioThumbnailUploadFailed() {
+        this.previewPayload.thumbnailSrc = null;
+        this.args.editor.run(() => {
+            this.updatePayloadAttr('thumbnailSrc', this.previewPayload.thumbnailSrc);
+        });
+    }
+
     @task
     *uploadThumbnailFromBlobTask(audioUrl, fileBlob) {
         const formData = new FormData();