diff --git a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
index 95965a9..4ad9614 100644
--- a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
@@ -9,6 +9,7 @@ import { LuSearch } from "react-icons/lu";
 import ViewRegisterUsers from "./ViewRegisterUsers";
 import EditRegisterUsers from "./EditRegisterUsers";
 import AddRegisterUsers from "./AddRegisterUsers";
+import Delete from "../../../components/ActionIcons/Delete";
 
 const tableHeadRow = [
   "Sr. No",
@@ -42,7 +43,7 @@ const registerUser: any[] = [
         <EditRegisterUsers />
         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} // Pass as function
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="Are You Sure You Want To Delete This User ?"
diff --git a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
index 5f26943..66ab01c 100644
--- a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
@@ -9,31 +9,23 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
+import View from "../../../components/ActionIcons/View";
 
 function ViewRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-      <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
+        <View />
       </DialogTrigger>
 
       <DialogContent
-         bg={"#fff"}
-         w={{ base: '90%', md: '400px' }}
-         height={'80vh'}
-         overflow={'scroll'}
-         overflowX="hidden" 
-         p={3} // Reduced padding
-         bgSize={'md'}
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
       >
         <DialogHeader bg="white">
           <DialogTitle alignSelf="center" color="black" fontSize="14px">
@@ -48,42 +40,72 @@ function ViewRegisterUsers() {
                 First Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Last Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Gender
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 DOB
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 OTP Verified
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Language
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
             </Field.Root>
           </Stack>
diff --git a/src/components/ActionIcons/Delete.tsx b/src/components/ActionIcons/Delete.tsx
new file mode 100644
index 0000000..95f1cf5
--- /dev/null
+++ b/src/components/ActionIcons/Delete.tsx
@@ -0,0 +1,34 @@
+import { Icon, Image } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { RiDeleteBin5Line } from "react-icons/ri";
+
+const Delete = () => {
+  return (
+    <Tooltip
+      content="Delete"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#fed7d7",
+          color: "#822727",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <RiDeleteBin5Line />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default Delete;
diff --git a/src/components/ActionIcons/Edit.tsx b/src/components/ActionIcons/Edit.tsx
index d6d4b09..fde1f52 100644
--- a/src/components/ActionIcons/Edit.tsx
+++ b/src/components/ActionIcons/Edit.tsx
@@ -1,22 +1,33 @@
-import { Icon } from '@chakra-ui/react'
-import { TbEdit } from 'react-icons/tb'
-import { Tooltip } from '../ui/tooltip'
+import { Icon } from "@chakra-ui/react";
+import { TbEdit } from "react-icons/tb";
+import { Tooltip } from "../ui/tooltip";
 
 const Edit = () => {
   return (
-    <Tooltip content='Edit' >
-    <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-        </Tooltip>
-  )
-}
+    <Tooltip
+      content="Edit"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#c6f6d5",
+          color: "#22543d",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+      >
+        <TbEdit />
+      </Icon>
+    </Tooltip>
+  );
+};
 
-export default Edit
\ No newline at end of file
+export default Edit;
diff --git a/src/components/ActionIcons/View.tsx b/src/components/ActionIcons/View.tsx
new file mode 100644
index 0000000..c83d22a
--- /dev/null
+++ b/src/components/ActionIcons/View.tsx
@@ -0,0 +1,34 @@
+import { Icon } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+
+const View = () => {
+  return (
+    <Tooltip
+      content="View"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#ccecec",
+          color: "#055757",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <MdOutlineRemoveRedEye />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default View;
diff --git a/src/components/MainFrame.tsx b/src/components/MainFrame.tsx
index e486ade..0d86073 100644
--- a/src/components/MainFrame.tsx
+++ b/src/components/MainFrame.tsx
@@ -22,7 +22,7 @@ const MainFrame: FC<MainFrameProps> = ({ children }) => {
         rounded="lg"
         boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
         pt={3}
-      >
+      > 
         {children}
       </Box>
     </MotionVStack>