diff --git a/src/components/Employee/EmployeeNav.jsx b/src/components/Employee/EmployeeNav.jsx
index 74fbeeda..3eb70fbc 100644
--- a/src/components/Employee/EmployeeNav.jsx
+++ b/src/components/Employee/EmployeeNav.jsx
@@ -2,49 +2,47 @@ import React from "react";
 
 const EmployeeNav = ({ onPillClick, activePill }) => {
   return (
-    <div className="nav-align-top ">
-      <ul className="nav nav-tabs">
-        <li className="nav-item">
-          <a
-            className={`nav-link ${activePill === "account" ? "active" : ""}`}
-            href="#"
-            onClick={(e) => {
-              e.preventDefault(); // Prevent page reload
-              onPillClick("account");
-            }}
-          >
-            <i className="bx bx-user bx-sm me-1_5"></i> Account
-          </a>
-        </li>
-        <li className="nav-item">
-          <a
-            className={`nav-link ${
-              activePill === "attendance" ? "active" : ""
-            }`}
-            href="#"
-            onClick={(e) => {
-              e.preventDefault(); // Prevent page reload
-              onPillClick("attendance");
-            }}
-          >
-            <i className="bx bx-group bx-sm me-1_5"></i> Attendances
-          </a>
-        </li>
-        <li className="nav-item">
-          <a
-            className={`nav-link ${
-              activePill === "activities" ? "active" : ""
-            }`}
-            href="#"
-            onClick={(e) => {
-              e.preventDefault(); // Prevent page reload
-              onPillClick("activities");
-            }}
-          >
-            <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
-          </a>
-        </li>
-      </ul>
+    <div className="col-md-12">
+      <div className="nav-align-top">
+        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
+          <li className="nav-item">
+            <a
+              className={`nav-link py-1 px-2 small  ${activePill === "account" ? "active" : ""}`}
+              href="#"
+              onClick={(e) => {
+                e.preventDefault(); // Prevent page reload
+                onPillClick("account");
+              }}
+            >
+              <i className="bx bx-user bx-sm me-1_5"></i> Documents
+            </a>
+          </li>
+          <li className="nav-item">
+            <a
+              className={`nav-link py-1 px-2 small ${activePill === "attendance" ? "active" : ""}`}
+              href="#"
+              onClick={(e) => {
+                e.preventDefault(); // Prevent page reload
+                onPillClick("attendance");
+              }}
+            >
+              <i className="bx bx-group bx-sm me-1_5"></i> Attendances
+            </a>
+          </li>
+          <li className="nav-item">
+            <a
+              className={`nav-link py-1 px-2 small ${activePill === "activities" ? "active" : ""}`}
+              href="#"
+              onClick={(e) => {
+                e.preventDefault(); // Prevent page reload
+                onPillClick("activities");
+              }}
+            >
+              <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 };