diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 977ed5cc4dbf7c694157ede01a713d4b2f5b983e..a2c811d497bee40d69fa8254e7842baa072f052d 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { createGlobalStyle } from 'styled-components';
 
 import Editoria from './Editoria/Editoria';
@@ -18,9 +18,15 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
+const activeStyles = css`
+  background: #fff;
+  color: #535e76;
+  border: 1px solid#535E76;
+`;
+
 const ProjectContainer = styled.div`
   display: flex;
-  height: calc(100% - 55px);
+  height: calc(100% - 65px);
 `;
 
 const ChooseProject = styled.div`
@@ -28,7 +34,7 @@ const ChooseProject = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 50px;
+  height: 60px;
 
   span {
     margin-right: 20px;
@@ -37,11 +43,20 @@ const ChooseProject = styled.div`
 
 const Projects = styled.div`
   margin-left: 10px;
+
+  span {
+    font-size: 16px;
+  }
 `;
 
 const ProjectButton = styled.button`
   cursor: pointer;
   margin-right: 20px;
+  border: none;
+  background: #535e76;
+  padding: 5px 15px 5px 15px;
+  color: #fff;
+  ${props => props.isActive && activeStyles}
 `;
 
 const Editors = () => {
@@ -54,7 +69,7 @@ const Editors = () => {
       case 'ncbi':
         break;
       default:
-        return <HHMI />;
+        return <Editoria />;
     }
   };
 
@@ -64,11 +79,24 @@ const Editors = () => {
       <ChooseProject>
         <Projects>
           <span>Select Project:</span>
-          <ProjectButton onClick={() => setProject('editoria')}>
+          <ProjectButton
+            isActive={project === 'editoria'}
+            onClick={() => setProject('editoria')}
+          >
             Editoria
           </ProjectButton>
-          <ProjectButton onClick={() => setProject('hhmi')}>HHMI</ProjectButton>
-          {/* <ProjectButton onClick={() => setProject('ncbi')}>NCBI</ProjectButton> */}
+          <ProjectButton
+            isActive={project === 'hhmi'}
+            onClick={() => setProject('hhmi')}
+          >
+            Widget Example
+          </ProjectButton>
+          <ProjectButton
+            isActive={project === 'ncbi'}
+            onClick={() => setProject('ncbi')}
+          >
+            NCBI
+          </ProjectButton>
         </Projects>
       </ChooseProject>
       <ProjectContainer>{displayProject()}</ProjectContainer>
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 3de249ab081c5ab16a17604036c95bbf722431de..640ea0ef78a9f6c46f28029f9c6f1671b07b4233 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -15,6 +15,8 @@ const renderImage = file => {
   });
 };
 
+const t = `<p class="paragraph">Based on the equation below</p><math-display class="math-node">x + y = 5</math-display><p class="paragraph">Which ones are correct?</p><p class="paragraph"></p><div id="" class="mutiple-choice"><div class="mutiple-choice-option" id="d7b65415-ff82-446f-afa4-accaa3837f4a" correct="false" feedback=""><p class="paragraph">answer 1</p><p class="paragraph"><math-inline class="math-node">x+y=1</math-inline></p></div><div class="mutiple-choice-option" id="e7d6bb2f-7cd7-44f1-92a0-281e72157538" correct="true" feedback=""><p class="paragraph">answer 2</p></div><div class="mutiple-choice-option" id="d6fc749f-afae-4203-9562-d68c380a86e5" correct="false" feedback=""><p class="paragraph">answer 3</p></div></div>`;
+
 const Hhmi = () => {
   return (
     <>
@@ -22,10 +24,10 @@ const Hhmi = () => {
         config={config}
         autoFocus
         fileUpload={file => renderImage(file)}
-        value=""
+        value={t}
         // readonly
         layout={HhmiLayout}
-        // onChange={source => console.log(source)}
+        onChange={source => console.log(source)}
       />
     </>
   );