diff --git a/editors/demo/src/Editoria/theme/elements/ButtonStyles.js b/editors/demo/src/Editoria/theme/elements/ButtonStyles.js
index 5a54e9877430650d1835b3b5a117d0cbbe51b350..bfdddd29a8f8cd68c35fcdaf3a16d43619c8ebe1 100644
--- a/editors/demo/src/Editoria/theme/elements/ButtonStyles.js
+++ b/editors/demo/src/Editoria/theme/elements/ButtonStyles.js
@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
 
 export default css`
   background: #fff;
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 0ffa6e0962d7df6fc6678274d594c45776e4043d..9e14f6ac6c5dfb292ff737394c05d66b8ce35c76 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -73,7 +73,7 @@ const Editors = () => {
       case 'oen':
         return <OEN />;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 
diff --git a/editors/demo/src/HHMI/config/config.js b/editors/demo/src/HHMI/config/config.js
index 70ca2465e00b04e3ad4758887c2dfbe0bc3f99ac..162052fd573df0c359984459f9aba25fbf667e51 100644
--- a/editors/demo/src/HHMI/config/config.js
+++ b/editors/demo/src/HHMI/config/config.js
@@ -63,6 +63,7 @@ export default {
 
   SchemaService: DefaultSchema,
   RulesService: [emDash, ellipsis],
+  ImageService: { showAlt: true },
 
   PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
   services: [
diff --git a/wax-prosemirror-services/src/ImageService/AltComponent.js b/wax-prosemirror-services/src/ImageService/AltComponent.js
index 9786988c1a4a4a9e1016da4e7f989299abe598a1..35ab8914bb525affb89d9baa3d84f2a110d5faa2 100644
--- a/wax-prosemirror-services/src/ImageService/AltComponent.js
+++ b/wax-prosemirror-services/src/ImageService/AltComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { WaxContext } from 'wax-prosemirror-core';
@@ -65,10 +66,14 @@ export default ({ setPosition, position }) => {
 
   const imageConfig = app.config.get('config.ImageService');
   const showAlt = imageConfig && imageConfig.showAlt;
+  const autoFocus =
+    activeView.state.selection &&
+    activeView.state.selection.node &&
+    activeView.state.selection.node.attrs.alt === '';
 
   return !readOnly && showAlt ? (
     <StyledInputAlt
-      autoFocus="autoFocus"
+      autoFocus={autoFocus}
       key="alt"
       onChange={altTextOnChange}
       placeholder="Alt Text"
diff --git a/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersComponent.js b/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersComponent.js
index 2437f2d6f45fe6b96daeb77143b2976b4089284d..d1adfc181933b9bbf83c36c8f62cde337379a1ce 100644
--- a/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersComponent.js
+++ b/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersComponent.js
@@ -85,7 +85,7 @@ const SpecialCharacter = styled.div`
   min-width: 25px;
   height: 25px;
   display: inline-grid;
-  background: ${th('colorPrimary')}
+  background: white;
   cursor: pointer;
   border: 1px solid ${th('colorPrimary')};
   border-radius: 50%;
@@ -102,8 +102,7 @@ const SpecialCharacter = styled.div`
       color: #fff;
     }
   }
-    ${override('Wax.SpecialCharacterButton')}
-
+  ${override('Wax.SpecialCharacterButton')}
 `;
 
 const SpecialCharactersComponent = ({ close }) => {