diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
deleted file mode 100644
index 6296b1aa73..0000000000
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
+++ /dev/null
@@ -1,362 +0,0 @@
-.leftDrawer {
-  width: calc(300px + 2rem);
-  min-height: 100%;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  padding: 0.8rem 0rem 0 1rem;
-  background-color: #f6f8fc;
-  transition: 0.5s;
-  font-family: var(--bs-leftDrawer-font-family);
-}
-
-.avatarContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 1rem 0;
-  width: 75%;
-  height: 75%;
-}
-
-.activeDrawer {
-  width: calc(300px + 2rem);
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  animation: comeToRightBigScreen 0.5s ease-in-out;
-}
-
-.inactiveDrawer {
-  position: fixed;
-  top: 0;
-  left: calc(-300px - 2rem);
-  bottom: 0;
-  animation: goToLeftBigScreen 0.5s ease-in-out;
-}
-
-.leftDrawer .brandingContainer {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.leftDrawer .organizationContainer button {
-  position: relative;
-  margin: 0.7rem 0;
-  padding: 2.5rem 0.1rem;
-  border-radius: 16px;
-}
-
-.leftDrawer .talawaLogo {
-  width: 50px;
-  height: 50px;
-  margin-right: 0.3rem;
-}
-
-.leftDrawer .talawaText {
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.leftDrawer .titleHeader {
-  font-weight: 600;
-  margin: 0.6rem 0rem;
-}
-
-.leftDrawer .optionList {
-  height: 100%;
-  overflow-y: scroll;
-  padding-bottom: 1.5rem;
-}
-
-.leftDrawer .optionList button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  text-align: start;
-  margin-bottom: 0.8rem;
-  border-radius: 16px;
-  font-size: 16px;
-  padding: 0.6rem;
-  padding-left: 0.8rem;
-  outline: none;
-  border: none;
-}
-
-.leftDrawer button .iconWrapper {
-  width: 36px;
-}
-
-.leftDrawer .optionList .collapseBtn {
-  height: 48px;
-  border: none;
-}
-
-.leftDrawer button .iconWrapperSm {
-  width: 36px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.leftDrawer .organizationContainer .profileContainer {
-  background-color: #e0e9ff;
-  padding-right: 10px;
-}
-
-.leftDrawer .profileContainer {
-  border: none;
-  width: 100%;
-  height: 52px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  background-color: var(--bs-white);
-}
-
-.leftDrawer .profileContainer:focus {
-  outline: none;
-}
-
-.leftDrawer .imageContainer {
-  width: 68px;
-  margin-left: 0.75rem;
-  margin-right: 8px;
-}
-
-.leftDrawer .profileContainer img {
-  height: 52px;
-  width: 52px;
-  border-radius: 50%;
-}
-
-.leftDrawer .profileContainer .profileText {
-  flex: 1;
-  text-align: start;
-  overflow: hidden;
-}
-
-.leftDrawer .profileContainer .profileText .primaryText {
-  font-size: 1.1rem;
-  font-weight: 600;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /* number of lines to show */
-  -webkit-box-orient: vertical;
-  word-wrap: break-word;
-  white-space: normal;
-}
-
-.leftDrawer .profileContainer .profileText .secondaryText {
-  font-size: 0.8rem;
-  font-weight: 400;
-  /* color: var(--bs-secondary); */
-  display: block;
-  text-transform: capitalize;
-}
-
-@media (max-width: 1120px) {
-  .leftDrawer {
-    width: calc(250px + 2rem);
-    padding: 1rem 0rem 0 1rem;
-  }
-}
-
-/* For tablets */
-@media (max-height: 900px) {
-  .leftDrawer {
-    width: calc(300px + 1rem);
-  }
-  .leftDrawer .talawaLogo {
-    width: 38px;
-    height: 38px;
-    margin-right: 0.4rem;
-  }
-  .leftDrawer .talawaText {
-    font-size: 1rem;
-  }
-  .leftDrawer .organizationContainer button {
-    margin: 0.6rem 0;
-    padding: 2.2rem 0.1rem;
-  }
-  .leftDrawer .optionList button {
-    margin-bottom: 0.05rem;
-    font-size: 16px;
-    padding-left: 0.8rem;
-  }
-  .leftDrawer .profileContainer .profileText .primaryText {
-    font-size: 1rem;
-  }
-  .leftDrawer .profileContainer .profileText .secondaryText {
-    font-size: 0.8rem;
-  }
-}
-@media (max-height: 650px) {
-  .leftDrawer {
-    padding: 0.5rem 0rem 0 0.8rem;
-    width: calc(250px);
-  }
-  .leftDrawer .talawaText {
-    font-size: 0.8rem;
-  }
-  .leftDrawer .organizationContainer button {
-    margin: 0.2rem 0;
-    padding: 1.6rem 0rem;
-  }
-  .leftDrawer .titleHeader {
-    font-size: 16px;
-  }
-  .leftDrawer .optionList button {
-    margin-bottom: 0.05rem;
-    font-size: 14px;
-    padding: 0.4rem;
-    padding-left: 0.8rem;
-  }
-  .leftDrawer .profileContainer .profileText .primaryText {
-    font-size: 0.8rem;
-  }
-  .leftDrawer .profileContainer .profileText .secondaryText {
-    font-size: 0.6rem;
-  }
-  .leftDrawer .imageContainer {
-    width: 40px;
-    margin-left: 0.75rem;
-    margin-right: 12px;
-  }
-  .leftDrawer .imageContainer img {
-    width: 40px;
-    height: 100%;
-  }
-}
-
-@media (max-width: 820px) {
-  .hideElemByDefault {
-    display: none;
-  }
-
-  .leftDrawer {
-    width: 100%;
-    left: 0;
-    right: 0;
-  }
-
-  .inactiveDrawer {
-    opacity: 0;
-    left: 0;
-    z-index: -1;
-    animation: closeDrawer 0.2s ease-in-out;
-  }
-
-  .activeDrawer {
-    display: flex;
-    z-index: 100;
-    animation: openDrawer 0.4s ease-in-out;
-  }
-
-  .logout {
-    margin-bottom: 2.5rem;
-  }
-}
-
-@keyframes goToLeftBigScreen {
-  from {
-    left: 0;
-  }
-
-  to {
-    opacity: 0.1;
-    left: calc(-300px - 2rem);
-  }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes goToLeftBigScreen {
-  from {
-    left: 0;
-  }
-
-  to {
-    opacity: 0.1;
-    left: calc(-300px - 2rem);
-  }
-}
-
-@keyframes comeToRightBigScreen {
-  from {
-    opacity: 0.4;
-    left: calc(-300px - 2rem);
-  }
-
-  to {
-    opacity: 1;
-    left: 0;
-  }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes comeToRightBigScreen {
-  from {
-    opacity: 0.4;
-    left: calc(-300px - 2rem);
-  }
-
-  to {
-    opacity: 1;
-    left: 0;
-  }
-}
-
-@keyframes closeDrawer {
-  from {
-    left: 0;
-    opacity: 1;
-  }
-
-  to {
-    left: -1000px;
-    opacity: 0;
-  }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes closeDrawer {
-  from {
-    left: 0;
-    opacity: 1;
-  }
-
-  to {
-    left: -1000px;
-    opacity: 0;
-  }
-}
-
-@keyframes openDrawer {
-  from {
-    opacity: 0;
-    left: -1000px;
-  }
-
-  to {
-    left: 0;
-    opacity: 1;
-  }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes openDrawer {
-  from {
-    opacity: 0;
-    left: -1000px;
-  }
-
-  to {
-    left: 0;
-    opacity: 1;
-  }
-}
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index a687351c98..35173a930e 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -11,7 +11,7 @@ import type { TargetsType } from 'state/reducers/routesReducer';
 import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
 import AngleRightIcon from 'assets/svgs/angleRight.svg?react';
 import TalawaLogo from 'assets/svgs/talawa.svg?react';
-import styles from './LeftDrawerOrg.module.css';
+import styles from './../../style/app.module.css'; // Import the global CSS file
 import Avatar from 'components/Avatar/Avatar';
 import useLocalStorage from 'utils/useLocalstorage';
 
@@ -31,6 +31,7 @@ export interface InterfaceLeftDrawerProps {
  * @param setHideDrawer - Function to update the visibility state of the drawer.
  * @returns JSX element for the left navigation drawer with organization details.
  */
+
 const leftDrawerOrg = ({
   targets,
   orgId,
@@ -45,7 +46,9 @@ const leftDrawerOrg = ({
   const getIdFromPath = (pathname: string): string => {
     if (!pathname) return '';
     const segments = pathname.split('/');
+
     // Index 2 (third segment) represents the ID in paths like /member/{userId}
+
     return segments.length > 2 ? segments[2] : '';
   };
   const [isProfilePage, setIsProfilePage] = useState(false);
@@ -66,11 +69,13 @@ const leftDrawerOrg = ({
   });
 
   // Get the ID from the current path
+
   const pathId = useMemo(
     () => getIdFromPath(location.pathname),
     [location.pathname],
   );
   // Check if the current page is admin profile page
+
   useEffect(() => {
     // if param id is equal to userId, then it is a profile page
     setIsProfilePage(pathId === userId);
@@ -88,7 +93,6 @@ const leftDrawerOrg = ({
       isMounted = false;
     };
   }, [data]);
-
   /**
    * Handles link click to hide the drawer on smaller screens.
    */
@@ -121,16 +125,14 @@ const leftDrawerOrg = ({
         {/* Organization Section */}
         <div className={`${styles.organizationContainer} pe-3`}>
           {loading ? (
-            <>
-              <button
-                className={`${styles.profileContainer} shimmer`}
-                data-testid="orgBtn"
-              />
-            </>
+            <button
+              className={`${styles.profileContainer} shimmer`}
+              data-testid="orgBtn"
+            />
           ) : organization == undefined ? (
             !isProfilePage && (
               <button
-                className={`${styles.profileContainer} bg-danger text-start text-white`}
+                className={`${styles.profileContainer} ${styles.bgDanger} text-start text-white`}
                 disabled
               >
                 <div className="px-3">
@@ -174,21 +176,16 @@ const leftDrawerOrg = ({
                 {({ isActive }) => (
                   <Button
                     key={name}
-                    variant={isActive === true ? 'success' : ''}
-                    style={{
-                      backgroundColor: isActive === true ? '#EAEBEF' : '',
-                    }}
-                    className={`${
-                      isActive === true ? 'text-black' : 'text-secondary'
-                    }`}
+                    variant={isActive ? 'success' : ''}
+                    className={
+                      isActive ? styles.activeButton : styles.inactiveButton
+                    }
                   >
                     <div className={styles.iconWrapper}>
                       <IconComponent
                         name={name == 'Membership Requests' ? 'Requests' : name}
                         fill={
-                          isActive === true
-                            ? 'var(--bs-black)'
-                            : 'var(--bs-secondary)'
+                          isActive ? 'var(--bs-black)' : 'var(--bs-secondary)'
                         }
                       />
                     </div>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 25e5c4b678..79702a54be 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -3628,6 +3628,183 @@ button[data-testid='createPostBtn'] {
   }
 }
 
+/* LeftDrawer general styles */
+.leftDrawer {
+  height: 100vh; /* Ensure it spans the full height */
+  overflow-y: auto; /* Enable vertical scrolling */
+  transition: transform 0.3s ease;
+  will-change: transform; /* NEW */
+  position: fixed; /* Ensure it's positioned properly */
+  padding-bottom: 1rem; /* Prevent last item clipping */
+  overscroll-behavior: contain;
+  /* Improve scroll performance */
+  -webkit-overflow-scrolling: touch;
+}
+
+.hideElemByDefault {
+  display: none;
+}
+
+[data-hidden='true'] {
+  visibility: hidden;
+}
+
+[data-hidden='false'] {
+  visibility: visible;
+}
+
+.inactiveDrawer {
+  transform: translateX(-100%);
+  &[data-hidden='true'] {
+    /* Specific styles for inactive drawers if needed */
+  }
+}
+
+.activeDrawer {
+  transform: translateX(0);
+  &[data-hidden='false'] {
+    /* Specific styles for active drawers if needed */
+  }
+}
+
+/* Organization Section */
+.organizationContainer {
+  padding-right: 3rem;
+}
+
+.profileContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  /* Add focus styles for keyboard navigation */
+  &:focus-within {
+    @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */
+  }
+}
+
+.bg-danger {
+  background-color: var(--delete-button-color);
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-white {
+  color: var(--bs-white);
+}
+
+.imageContainer img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  /* Add alt text styles */
+  &[alt] {
+    font-size: 0.875rem;
+    color: var(--bs-emphasis-color);
+  }
+}
+
+.profileText {
+  margin-left: 1rem;
+}
+
+.primaryText {
+  font-weight: bold;
+  color: var(--bs-emphasis-color, #000);
+  @extend .reusable-text-ellipsis; /* Referencing the reusable class from the general section */
+}
+
+.secondaryText {
+  font-size: 0.9rem;
+  color: var(--bs-secondary-text);
+  @extend .reusable-text-ellipsis; /* Referencing the reusable class from the general section */
+}
+
+/* Dropdown and options list */
+.titleHeader {
+  font-size: 1.2rem;
+  color: var(--bs-secondary);
+  line-height: 1.5; /* NEW */
+  margin: var(--spacing-md, 1rem) 0; /* NEW */
+}
+
+/* Active and inactive buttons */
+.activeButton,
+.inactiveButton {
+  position: relative;
+  transition: all 0.2s ease;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &.focus-visible {
+    @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */
+  }
+}
+
+.activeButton {
+  background-color: var(--grey-bg-color);
+  color: black;
+
+  &::before {
+    @extend .reusable-indicator; /* Referencing the reusable class from the general section */
+  }
+
+  &::after {
+    @extend .reusable-arrow-indicator; /* Referencing the reusable class from the general section */
+  }
+}
+
+.activeButton:hover .arrow-indicator {
+  transform: translateY(-50%) scale(1.1);
+  opacity: 1;
+}
+
+.inactiveButton {
+  background-color: transparent;
+  color: var(--bs-emphasis-color, #000);
+
+  &:hover {
+    background-color: var(--grey-bg-color);
+  }
+}
+
+/* Icon wrapper styles */
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  margin-inline-end: 8px;
+  margin-inline-start: 0;
+
+  &[aria-label]:not([aria-label='']) {
+    position: relative;
+
+    &::after {
+      content: attr(aria-label);
+      position: absolute;
+      inset-inline-start: 100%;
+      background: var(--bs-dark);
+      color: var(--bs-white);
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.875rem;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateX(var(--transform-direction, 8px));
+      transition: all 0.2s ease;
+    }
+
+    &:hover::after {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(0);
+    }
+  }
+}
+
 /* CustomRecurrenceModal.tsx */
 
 .titlemodalCustomRecurrenceModal {