diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
index a5597f813ab65d6720c22ce685ce67bc0badeec6..21bfa1b61597f4a9bf5022f330d9bc4edf2eebc8 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
@@ -1,14 +1,23 @@
 /* eslint-disable react/prop-types */
-import React, { useContext, useState, useRef } from 'react';
+import React, { useContext, useState, useRef, useLayoutEffect } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import { v4 as uuidv4 } from 'uuid';
 import styled from 'styled-components';
 
+const TriangleTop = styled.div`
+  width: 0;
+  height: 0;
+  margin: 0px auto;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 10px solid #535e76;
+`;
+
 const DropDownComponent = styled.div`
   width: 174px;
   height: 150px;
   background: white;
-  border: 1px solid green;
+  border: 1px solid #535e76;
   display: flex;
   flex-direction: column;
   padding: 5px;
@@ -52,9 +61,10 @@ const AddOption = styled.div`
   }
 `;
 
-export default ({ node, view, getPos }) => {
+export default ({ setPosition, position }) => {
   const context = useContext(WaxContext);
   const {
+    activeView,
     pmViews: { main },
   } = context;
 
@@ -71,6 +81,16 @@ export default ({ node, view, getPos }) => {
   const [optionText, setOptionText] = useState('');
   const addOptionRef = useRef(null);
 
+  useLayoutEffect(() => {
+    const { selection } = activeView.state;
+    const { to } = selection;
+    const WaxSurface = activeView.dom.getBoundingClientRect();
+    const end = activeView.coordsAtPos(to);
+    const left = end.left - WaxSurface.left - 100;
+    const top = end.top - WaxSurface.top + 25;
+    setPosition({ ...position, left, top });
+  }, [position.left]);
+
   const updateOptionText = () => {
     setOptionText(addOptionRef.current.value);
   };
@@ -90,21 +110,24 @@ export default ({ node, view, getPos }) => {
   };
 
   return (
-    <DropDownComponent>
-      <Options>All Options</Options>
-      <AddOption>
-        <input
-          onChange={updateOptionText}
-          onKeyPress={handleKeyDown}
-          placeholder="Type an option ..."
-          ref={addOptionRef}
-          type="text"
-          value={optionText}
-        />
-        <button onClick={addOption} type="button">
-          Add
-        </button>
-      </AddOption>
-    </DropDownComponent>
+    <>
+      <TriangleTop />
+      <DropDownComponent>
+        <Options>All Options</Options>
+        <AddOption>
+          <input
+            onChange={updateOptionText}
+            onKeyPress={handleKeyDown}
+            placeholder="Type an option ..."
+            ref={addOptionRef}
+            type="text"
+            value={optionText}
+          />
+          <button onClick={addOption} type="button">
+            Add
+          </button>
+        </AddOption>
+      </DropDownComponent>
+    </>
   );
 };
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
index 2142887f64175893226c4837dbc324b7f0eb1cc7..29681124639733227282719487f6b06eb295f155 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
@@ -1,21 +1,42 @@
 /* eslint-disable react/prop-types */
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
+import { Icon } from 'wax-prosemirror-components';
 import styled from 'styled-components';
 
+const StyledIconAction = styled(Icon)`
+  height: 24px;
+  width: 24px;
+  outline: 1px solid black;
+`;
+
 export default ({ node, view, getPos }) => {
   const context = useContext(WaxContext);
   const {
     pmViews: { main },
+    pmViews,
+    activeViewId,
   } = context;
 
+  const [isActive, setIsActive] = useState(false);
   const customProps = main.props.customValues;
+  const posFrom = pmViews[activeViewId].state.selection.from;
 
   const isEditable = main.props.editable(editable => {
     return editable;
   });
-
   const readOnly = !isEditable;
 
-  return <span>DropDown</span>;
+  useEffect(() => {
+    setIsActive(false);
+    if (getPos() + 2 === posFrom) {
+      setIsActive(true);
+    }
+  }, [posFrom]);
+
+  return (
+    <>
+      <StyledIconAction isActive={isActive} name="mulitpleDropDown" />
+    </>
+  );
 };