diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
index 08d73aca4d8..8eb96c46c03 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
@@ -33,7 +33,9 @@ class FloatingButton extends Component {
         let classes = 'btn-circle ' + this.props.className;
         return (
             <div className={classes} onClick={this.handleClick.bind(this)}>
+                <div className={classes + " btn-shade"}>
                 <i className="fw fw-add"></i>
+                </div>
             </div>
         )
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
index 1f483c87133..7c8de85ccbc 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
@@ -27,8 +27,20 @@
     box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px
 }
 
+.btn-circle:hover {
+    cursor: pointer;
+}
+
+.btn-shade:focus {
+    background-color: rgba(0, 0, 0, .12);
+}
+
 .btn-circle i {
-    margin-top: 40%;
+    height: 24px;
+    width: 24px;
+    font-size: 18px;
+    padding: 3px;
+    margin-top: 16px
 }
 
 .small {
@@ -40,7 +52,3 @@
     height: 100px;
     width: 100px;
 }
-
-.primary {
-    background-color: blue;
-}