diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index 66bbfd17..a069e760 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -4,16 +4,13 @@ import 'elix/define/DropdownList.js';
 const template = document.createElement('template');
 template.innerHTML = `
 <style>
-[part~="source"] {
-  grid-template-columns: 20px 1fr auto;
+::part(popup-toggle) {
+  display: none;
 }
 ::slotted(*) {
   background: #E8E8E8;
   border: 1px solid #B0B0B0;
 }
-::part(popup-toggle) {
-  display: none;
-}
 </style>
   <label>Label</label>
   <elix-dropdown-list>
diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js
index 846d4e76..c23f01b5 100644
--- a/src/editor/components/seListItem.js
+++ b/src/editor/components/seListItem.js
@@ -21,7 +21,9 @@ export class SeListItem extends HTMLElement {
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this._shadowRoot.append(template.content.cloneNode(true));
-    this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
+    this.$menuitem = this._shadowRoot.querySelector('elix-option');
+    this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
+    this.$svg.setAttribute('style', 'display: none;');
   }
   /**
    * @function observedAttributes
diff --git a/src/editor/index.html b/src/editor/index.html
index 5592933f..9e77520a 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -248,14 +248,14 @@
             <se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg"></se-button>
           </div>
           <se-list id="tool_font_family" label="Font:">
-            <se-list-item value="Sans-serif"> <div style="font-family:serif">Sans-serif</div></se-list-item>
-            <se-list-item value="Serif"> <div style="font-family:serif">Serif</div></se-list-item>
-            <se-list-item value="Cursive"> <div style="font-family:serif">Cursive</div></se-list-item>
-            <se-list-item value="Fantasy"> <div style="font-family:serif">Fantasy</div></se-list-item>
-            <se-list-item value="Monospace"> <div style="font-family:serif">Monospace</div></se-list-item>
-            <se-list-item value="Courier"> <div style="font-family:serif">Courier</div></se-list-item>
-            <se-list-item value="Helvetica"> <div style="font-family:serif">Helvetica</div></se-list-item>
-            <se-list-item value="Times"> <div style="font-family:serif">Times</div></se-list-item> 
+            <se-list-item value="Sans-serif" style="font-family:serif;"> Sans-serif</se-list-item>
+            <se-list-item value="Serif" style="font-family:sans-serif;"> Serif</se-list-item>
+            <se-list-item value="Cursive" style="font-family:cursive;"> Cursive</se-list-item>
+            <se-list-item value="Fantasy" style="font-family:fantasy;"> Fantasy</se-list-item>
+            <se-list-item value="Monospace" style="font-family:monospace;"> Monospace</se-list-item>
+            <se-list-item value="Courier" style="font-family:courier;"> Courier</se-list-item>
+            <se-list-item value="Helvetica" style="font-family:helvetica;">Helvetica</se-list-item>
+            <se-list-item value="Times" style="font-family:times;">Times</se-list-item> 
           </se-list>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
             src="./images/fontsize.svg"></se-spin-input>