diff --git a/FRONTEND/src/pages/Allocation/Allocation.tsx b/FRONTEND/src/pages/Allocation/Allocation.tsx
index 2e2cf0e..ff83224 100644
--- a/FRONTEND/src/pages/Allocation/Allocation.tsx
+++ b/FRONTEND/src/pages/Allocation/Allocation.tsx
@@ -80,6 +80,31 @@ const Allocation = () => {
   const [opened, setOpened] = useState(false)
   const [issDetail, setIssDetail] = useState('')
   const [data, setData] = useState<any>({})
+
+  useEffect(() => {
+    // Check if iframe already exists
+    const existingIframe = document.querySelector('#drawio iframe')
+    if (existingIframe) return
+
+    // Add iframe only if it doesn't exist
+    const iframe = document.createElement('iframe')
+    iframe.src = import.meta.env.VITE_URL_DRAWIO
+    iframe.style.width = '100%'
+    iframe.style.height = '500px'
+    const drawioDiv = document.getElementById('drawio')
+    if (drawioDiv) {
+      drawioDiv.appendChild(iframe)
+    }
+
+    // Cleanup function to remove iframe when component unmounts
+    return () => {
+      const iframe = document.querySelector('#drawio iframe')
+      if (iframe) {
+        iframe.remove()
+      }
+    }
+  }, [])
+
   const getAll = async () => {
     try {
       const res = await get(getAllUserDoing)
@@ -117,6 +142,7 @@ const Allocation = () => {
   }, [])
   return (
     <div>
+      <div id="drawio"></div>
       <div>
         <Box
           style={{
@@ -138,12 +164,12 @@ const Allocation = () => {
           }}
         >
           <Box>
-            <Text fw={600} fz={'md'}>
+            {/* <Text fw={600} fz={'md'}>
               Admin/
             </Text>
             <Text fw={700} fz={'lg'}>
               Personnel Allocation
-            </Text>
+            </Text> */}
             <Text fw={600} fz={'sm'} c={'gray'} fs={'italic'} ml={'md'}>
               "P:" is the timspent/timeestimate number within the project itself
             </Text>
@@ -224,27 +250,38 @@ const Allocation = () => {
                                         alignItems: 'center',
                                       }}
                                     >
-                                      <Box w='10%'>
-                                      <IconInnerShadowTopRightFilled
-                                        style={{ color: 'orange' }}
-                                        height={20}
-                                        width={20}
-                                        display={userData.issues?.filter(
-                                          (iss: Issue) =>
-                                            iss.fields.status.name === 'In Progress' && 
-                                          ((Date.now() - (new Date(iss.changelog?.histories[0]?.created)).getTime()) > 172800000)
-                                        ).length > 0 ? 'block' :'none'}
-                                      />
+                                      <Box w="10%">
+                                        <IconInnerShadowTopRightFilled
+                                          style={{ color: 'orange' }}
+                                          height={20}
+                                          width={20}
+                                          display={
+                                            userData.issues?.filter(
+                                              (iss: Issue) =>
+                                                iss.fields.status.name ===
+                                                  'In Progress' &&
+                                                Date.now() -
+                                                  new Date(
+                                                    iss.changelog?.histories[0]?.created,
+                                                  ).getTime() >
+                                                  172800000,
+                                            ).length > 0
+                                              ? 'block'
+                                              : 'none'
+                                          }
+                                        />
                                       </Box>
                                       <Box display={'flex'}>
-                                      <Avatar
-                                        size={'sm'}
-                                        ml={'5px'}
-                                        src={userData.user.avatarUrls['48x48']}
-                                      />
-                                      <Text ml={'md'} fw={600}>
-                                        {user}
-                                      </Text>
+                                        <Avatar
+                                          size={'sm'}
+                                          ml={'5px'}
+                                          src={
+                                            userData.user.avatarUrls['48x48']
+                                          }
+                                        />
+                                        <Text ml={'md'} fw={600}>
+                                          {user}
+                                        </Text>
                                       </Box>
                                     </Box>
                                     <Box
@@ -260,9 +297,12 @@ const Allocation = () => {
                                       }}
                                       ml={'md'}
                                       p="0 20px"
-                                      
                                     >
-                                      <Text ml={'md'} fw={700} fz={'sm'}>{`P: `}</Text>
+                                      <Text
+                                        ml={'md'}
+                                        fw={700}
+                                        fz={'sm'}
+                                      >{`P: `}</Text>
                                       <Text fw={700} c="green" fz={'sm'}>{`${
                                         userData.p_total_spent / 60 / 60
                                       }h/`}</Text>