diff --git a/src/components/Container.ts b/src/components/Container.ts
index 88e183559..ba7c35257 100644
--- a/src/components/Container.ts
+++ b/src/components/Container.ts
@@ -62,3 +62,11 @@ export const FlexWrapper = styled.div`
     text-align: center;
     justify-content: center;
 `;
+
+export const HighLightWrapper = styled.div`
+    &:hover {
+        background-color: #555;
+    }
+    border-radius: 50%;
+    padding: 5px;
+`;
diff --git a/src/components/icons/CrossIcon.tsx b/src/components/icons/CrossIcon.tsx
index bee5baeb2..18eb9c333 100644
--- a/src/components/icons/CrossIcon.tsx
+++ b/src/components/icons/CrossIcon.tsx
@@ -1,18 +1,21 @@
+import { HighLightWrapper } from 'components/Container';
 import React from 'react';
 
-export default function DateIcon(props) {
+export default function CrossIcon(props) {
     return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}>
-            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-        </svg>
+        <HighLightWrapper>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height={props.height}
+                viewBox={props.viewBox}
+                width={props.width}>
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+            </svg>
+        </HighLightWrapper>
     );
 }
 
-DateIcon.defaultProps = {
+CrossIcon.defaultProps = {
     height: 24,
     width: 24,
     viewBox: '0 0 24 24',
diff --git a/src/components/icons/EditIcon.tsx b/src/components/icons/EditIcon.tsx
index ea96a862e..19a719e14 100644
--- a/src/components/icons/EditIcon.tsx
+++ b/src/components/icons/EditIcon.tsx
@@ -1,15 +1,18 @@
+import { HighLightWrapper } from 'components/Container';
 import React from 'react';
 
 export default function AddIcon(props) {
     return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-        </svg>
+        <HighLightWrapper>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height={props.height}
+                viewBox={props.viewBox}
+                width={props.width}
+                fill="currentColor">
+                <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+            </svg>
+        </HighLightWrapper>
     );
 }
 
diff --git a/src/components/icons/TickIcon.tsx b/src/components/icons/TickIcon.tsx
index 8bd76968f..8d230b961 100644
--- a/src/components/icons/TickIcon.tsx
+++ b/src/components/icons/TickIcon.tsx
@@ -1,15 +1,18 @@
+import { HighLightWrapper } from 'components/Container';
 import React from 'react';
 
 export default function TickIcon(props) {
     return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-        </svg>
+        <HighLightWrapper>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height={props.height}
+                viewBox={props.viewBox}
+                width={props.width}
+                fill="currentColor">
+                <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+            </svg>
+        </HighLightWrapper>
     );
 }