diff --git a/package-lock.json b/package-lock.json
index 0c9b607..d00c86a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reactjs-editor",
-  "version": "1.0.6",
+  "version": "10.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reactjs-editor",
-      "version": "1.0.6",
+      "version": "10.0.1",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.12.10",
diff --git a/src/components/floatingToolBar.js b/src/components/floatingToolBar.js
index dac769a..c300662 100644
--- a/src/components/floatingToolBar.js
+++ b/src/components/floatingToolBar.js
@@ -6,47 +6,87 @@ import useUpdateDom from "../customHooks/useUpdateDom";
 
 export default function FloatingToolBar({ x, y }) {
   const [open, setOpen] = useState(true);
-  const changeType = useEditor(state=>state.changeType)
-  const {addBold} = useUpdateDom()
+  const changeType = useEditor(state => state.changeType)
+  const { addBold, addItalic, addUnderline } = useUpdateDom()
 
   const closeMenu = () => setOpen(!open);
-  const toggleModal = useModal(state=>state.toggleModal)
-  const toggleCommentModal = useCommentModal(state=>state.toggleCommentModal)
+  const toggleModal = useModal(state => state.toggleModal)
+  const toggleCommentModal = useCommentModal(state => state.toggleCommentModal)
 
   const type = useEditor((state) => state.type);
   const config = useEditor((state) => state.config);
 
-  const openModal = ({name,value}) => {
+  const openModal = ({ name, value }) => {
 
 
-    changeType({name,value})
-    if(name === 'bold') return;
-    if(name === 'comment'){
+    changeType({ name, value })
+    if (name === 'bold') return;
+    if (name === 'italic') return;
+    if (name === 'underline') return;
+    if (name === 'comment') {
       toggleCommentModal()
     }
-    else{
+    else {
       toggleModal()
 
     }
 
   }
-useEffect(()=>{
-if(type.name === 'bold' && config.selectedText){
-  addBold();
-} 
-},[type.name,addBold])
   useEffect(() => {
-     setOpen(true);
+    if (type.name === 'bold' && config.selectedText) {
+      addBold();
+    }
+    if (type.name === 'italic' && config.selectedText) {
+      addItalic();
+    }
+    if (type.name === 'underline' && config.selectedText) {
+      addUnderline();
+    }
+  }, [type.name, addBold, addItalic, addUnderline])
+  useEffect(() => {
+    setOpen(true);
   }, [x]);
   return (
     <>
       {open && config.selectedText && x ? (
         <section
-          style={{ left: `${x-100}px`, top: `${y+10}px`, position: "absolute" }}
+          style={{ left: `${x - 100}px`, top: `${y + 10}px`, position: "absolute" }}
         >
           <div className="floating-toolbar">
-            <span onClick={()=>openModal({name:'bold'})} >B</span>
-            <span onClick={()=>openModal({name:'highlight'})}>
+            <span onClick={() => openModal({ name: 'bold' })} >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height={"20px"}
+                width={"20px"}
+                fill="#000000"
+                viewBox="0 -960 960 960"
+              >
+                <path d="M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z" />
+              </svg>
+            </span>
+            <span onClick={() => openModal({ name: 'italic' })}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height={"20px"}
+                width={"20px"}
+                fill="#000000"
+                viewBox="0 -960 960 960"
+              >
+                <path d="M200-200v-100h160l120-360H320v-100h400v100H580L460-300h140v100H200Z" />
+              </svg>
+            </span>
+            <span onClick={() => openModal({ name: 'underline' })}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height={"20px"}
+                width={"20px"}
+                fill="#000000"
+                viewBox="0 -960 960 960"
+              >
+                <path d="M200-120v-80h560v80H200Zm280-160q-101 0-157-63t-56-167v-330h103v336q0 56 28 91t82 35q54 0 82-35t28-91v-336h103v330q0 104-56 167t-157 63Z" />
+              </svg>
+            </span>
+            <span onClick={() => openModal({ name: 'highlight' })}>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -63,7 +103,7 @@ if(type.name === 'bold' && config.selectedText){
                 />
               </svg>
             </span>
-            <span onClick={()=>openModal({name:'comment'})} >
+            <span onClick={() => openModal({ name: 'comment' })} >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
diff --git a/src/customHooks/useUpdateDom.js b/src/customHooks/useUpdateDom.js
index 5c961ac..c51224b 100644
--- a/src/customHooks/useUpdateDom.js
+++ b/src/customHooks/useUpdateDom.js
@@ -31,45 +31,44 @@ export default function useUpdateDom() {
             specificIndex = index;
             const elements = domElement.split(config.selectedText);
             let Childrens = []
-            elements.forEach((element,index) => {
-              if(index === elements.length-1){
-               Childrens.push(element)
+            elements.forEach((element, index) => {
+              if (index === elements.length - 1) {
+                Childrens.push(element)
               }
-              else{
-               Childrens.push(element)
-               Childrens.push(   {
-                 type: "span",
-                 props: {
-                   children:
-                     type.name === "comment"
-                       ? [
-                           config.selectedText,
-                           {
-                             type: "span",
-                             props: {
-                               className: "hover-card",
-                               children: [
-                                 {
-                                   type: "span",
-                                   props: {
-                                     className: "hover-title",
-                                     children: [config.selectedText],
-                                   },
-                                 },
-                                 type.value,
-                               ],
-                             },
-                           },
-                         ]
-                       : [config.selectedText],
-                   className: `text-shadow-reed ${type.name} ${
-                     type.value ? type.value : ""
-                   } `,
-                 },
-               },)
+              else {
+                Childrens.push(element)
+                Childrens.push({
+                  type: "span",
+                  props: {
+                    children:
+                      type.name === "comment"
+                        ? [
+                          config.selectedText,
+                          {
+                            type: "span",
+                            props: {
+                              className: "hover-card",
+                              children: [
+                                {
+                                  type: "span",
+                                  props: {
+                                    className: "hover-title",
+                                    children: [config.selectedText],
+                                  },
+                                },
+                                type.value,
+                              ],
+                            },
+                          },
+                        ]
+                        : [config.selectedText],
+                    className: `text-shadow-reed ${type.name} ${type.value ? type.value : ""
+                      } `,
+                  },
+                },)
               }
-                
-             })
+
+            })
             let child = {
               type: "span",
               props: {
@@ -99,7 +98,7 @@ export default function useUpdateDom() {
       config.selectedText &&
       config.xPath
     ) {
-      
+
       let updatedDom = updateDom(dom, "");
       const newDom = Object.create(updatedDom);
       setDom(newDom);
@@ -118,6 +117,25 @@ export default function useUpdateDom() {
       changeType({ name: "", value: "" });
     }
   };
+
+  const addItalic = () => {
+    if (type.name === "italic" && config.selectedText && config.xPath) {
+      let updatedDom = updateDom(dom, "");
+      const newDom = Object.create(updatedDom);
+      setDom(newDom);
+      changeConfig({ xPath: "", selectedText: "" });
+      changeType({ name: "", value: "" });
+    }
+  };
+  const addUnderline = () => {
+    if (type.name === "underline" && config.selectedText && config.xPath) {
+      let updatedDom = updateDom(dom, "");
+      const newDom = Object.create(updatedDom);
+      setDom(newDom);
+      changeConfig({ xPath: "", selectedText: "" });
+      changeType({ name: "", value: "" });
+    }
+  };
   const addComment = () => {
     if (type.name === "comment" && config.selectedText && config.xPath) {
       let updatedDom = updateDom(dom, "");
@@ -130,6 +148,8 @@ export default function useUpdateDom() {
 
   return {
     addBold,
+    addItalic,
+    addUnderline,
     addComment,
     addHighlight,
   };
diff --git a/src/style.css b/src/style.css
index efa9b94..fc0880d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -37,6 +37,10 @@
   position: relative;
   transition: all .2s ease-in-out;
   color:#000;
+  border-right: 1px solid rgb(83, 82, 82);
+}
+.floating-toolbar span:last-child {
+  border-right: none;
 }
 .floating-toolbar span:hover {
   background: #f2f2f2;
@@ -205,6 +209,12 @@
   font-weight: bold;
   letter-spacing: 1;
 }
+.italic {
+  font-style: italic;
+}
+.underline{
+  text-decoration: underline;
+}
 .highlight {
   border-radius: 4px;
   padding: 4px;