diff --git a/src/pages/Misc/ComingSoonPage.jsx b/src/pages/Misc/ComingSoonPage.jsx
new file mode 100644
index 00000000..937b4603
--- /dev/null
+++ b/src/pages/Misc/ComingSoonPage.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export const ComingSoonPage = () => {
+    return (
+        <>
+            <div className="misc-wrapper">
+                <h2 className="mb-2 mx-2">Coming Soon!</h2>
+                <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
+                    Thank you for your patience!</p>
+                <div className="mt-4">
+                    <img
+                        src="../assets/img/illustrations/girl-doing-yoga-light.png"
+                        alt="girl-doing-yoga-light"
+                        aria-label="Girl doing yoga light"
+                        width="500"
+                        className="img-fluid"
+                        data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
+                        data-app-light-img="illustrations/girl-doing-yoga-light.png" />
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index a000f72d..a1e10df3 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -8,7 +8,7 @@ import { getCachedData } from "../../slices/apiDataManager";
 import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../hooks/useEmployees";
 import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
-
+import { ComingSoonPage } from "../Misc/ComingSoonPage";
 
 const EmployeeProfile = () => {
  
@@ -56,49 +56,32 @@ const EmployeeProfile = () => {
     switch (activePill) {
       case "account": {
         return (
-          <div className="row">
-            {/* <div className="col-xl-4 col-lg-5 col-md-5"> */}
-              <p>Account</p>
-            {/* </div> */}
-         
-          </div>
+          <>
+            <ComingSoonPage/>
+          </>
         );
       }
       case "attendance": {
         return (
-          <div className="row">
-            <div className="col-lg-12 col-xl-12">
-              {/* Teams */}
-             <p>attendance component</p>
-              {/* Teams */}
-            </div>
-          </div>
+          <>
+          <ComingSoonPage/>
+        </>
         );
         break;
       }
       case "activities": {
         return (
-         <p>activites components</p>
+          <>
+          <ComingSoonPage/>
+        </>
         );
         break;
       }
 
       default:
-        return  <div className="misc-wrapper">
-        <h2 className="mb-2 mx-2">Coming Soon!</h2>
-        <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
-        Thank you for your patience!</p>
-        <div className="mt-4">
-            <img
-                src="../assets/img/illustrations/girl-doing-yoga-light.png"
-                alt="girl-doing-yoga-light"
-                aria-label="Girl doing yoga light"
-                width="500"
-                className="img-fluid"
-                data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
-                data-app-light-img="illustrations/girl-doing-yoga-light.png" />
-        </div>
-    </div>;
+        return   <>
+        <ComingSoonPage/>
+      </>;
     }
   };