diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index 93ef49252..5bc94bfcf 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -15,15 +15,25 @@ import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 type AvatarProps = {
   user?: Partial<IUser> | Partial<IUserLite> | IUser | IUserLite | undefined | null;
   index?: number;
+  height?: string;
+  width?: string;
+  fontSize?: string
 };
 
-export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
-  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
+export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", width="20px", fontSize="12px" }) => (
+  <div className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`} style={{
+    height: height,
+    width: width,
+  }}>
     {user && user.avatar && user.avatar !== "" ? (
       <div
-        className={`h-5 w-5 rounded-full border-2 ${
+        className={`rounded-full border-2 ${
           index ? "border-white bg-white" : "border-transparent"
         }`}
+        style={{
+          height: height,
+          width: width,
+        }}
       >
         <Image
           src={user.avatar}
@@ -34,7 +44,11 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
         />
       </div>
     ) : (
-      <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white">
+      <div className="grid place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white" style={{
+        height: height,
+        width: width,
+        fontSize: fontSize,
+      }}>
         {user?.first_name && user.first_name !== ""
           ? user.first_name.charAt(0)
           : user?.email?.charAt(0)}
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
index 5a98ad12e..c50ecd258 100644
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@@ -12,7 +12,7 @@ import useWorkspaces from "hooks/use-workspaces";
 import userService from "services/user.service";
 import authenticationService from "services/authentication.service";
 // components
-import { Loader } from "components/ui";
+import { Avatar, Loader } from "components/ui";
 
 // types
 import { IWorkspace } from "types";
@@ -72,44 +72,48 @@ export const WorkspaceSidebarDropdown = () => {
 
   return (
     <div className="relative">
-      <Menu as="div" className="col-span-4 inline-block w-full text-left">
-        <Menu.Button
-          className={`inline-flex w-full items-center justify-between rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
-            !sidebarCollapse
-              ? "border border-gray-300 shadow-sm hover:bg-gray-50 focus:bg-gray-50"
-              : ""
-          }`}
-        >
-          <div className="mx-auto flex items-center gap-x-1">
-            <div className="relative flex h-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
-              {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
-                <Image
-                  src={activeWorkspace.logo}
-                  alt="Workspace Logo"
-                  layout="fill"
-                  objectFit="cover"
-                  className="rounded"
-                />
-              ) : (
-                activeWorkspace?.name?.charAt(0) ?? "..."
+      <Menu as="div" className="col-span-4 inline-block w-full p-5 text-left">
+        <div className="flex w-full items-center justify-between gap-2.5">
+          <Menu.Button
+            className={`inline-flex w-full items-center rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none `}
+          >
+            <div className="flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5">
+              <div className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 uppercase text-white">
+                {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
+                  <Image
+                    src={activeWorkspace.logo}
+                    alt="Workspace Logo"
+                    layout="fill"
+                    objectFit="cover"
+                    className="rounded"
+                  />
+                ) : (
+                  activeWorkspace?.name?.charAt(0) ?? "..."
+                )}
+              </div>
+
+              {!sidebarCollapse && (
+                <p className="text-base">
+                  {activeWorkspace?.name
+                    ? activeWorkspace.name.length > 17
+                      ? `${activeWorkspace.name.substring(0, 17)}...`
+                      : activeWorkspace.name
+                    : "Loading..."}
+                </p>
               )}
             </div>
-            {!sidebarCollapse && (
-              <p className="ml-1 text-left">
-                {activeWorkspace?.name
-                  ? activeWorkspace.name.length > 17
-                    ? `${activeWorkspace.name.substring(0, 17)}...`
-                    : activeWorkspace.name
-                  : "Loading..."}
-              </p>
-            )}
-          </div>
+          </Menu.Button>
+
           {!sidebarCollapse && (
-            <div className="flex flex-grow justify-end">
-              <ChevronDownIcon className="ml-2 h-3 w-3" aria-hidden="true" />
-            </div>
+            <Link href={`/${workspaceSlug}/me/profile`}>
+              <a>
+                <div className="flex flex-grow justify-end">
+                  <Avatar user={user} height="32px" width="32px" fontSize="14px" />
+                </div>
+              </a>
+            </Link>
           )}
-        </Menu.Button>
+        </div>
 
         <Transition
           as={Fragment}
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index 2a196b436..939b86fd2 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -37,30 +37,28 @@ export const WorkspaceSidebarMenu: React.FC = () => {
   const { collapsed: sidebarCollapse } = useTheme();
 
   return (
-    <div className="px-2">
-      <div className="mt-3 flex-1 space-y-1 bg-white">
-        {workspaceLinks(workspaceSlug as string).map((link, index) => (
-          <Link key={index} href={link.href}>
-            <a
+    <div className="flex w-full flex-col items-start justify-start gap-2 px-5 py-1">
+      {workspaceLinks(workspaceSlug as string).map((link, index) => (
+        <Link key={index} href={link.href}>
+          <a
+            className={`${
+              link.href === router.asPath
+                ? "bg-indigo-50 text-gray-900"
+                : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
+            } group flex w-full items-center gap-3 rounded-md p-2 text-base font-medium outline-none ${
+              sidebarCollapse ? "justify-center" : ""
+            }`}
+          >
+            <link.icon
               className={`${
-                link.href === router.asPath
-                  ? "bg-indigo-50 text-gray-900"
-                  : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
-              } group flex items-center gap-3 rounded-md p-2 text-xs font-medium outline-none ${
-                sidebarCollapse ? "justify-center" : ""
-              }`}
-            >
-              <link.icon
-                className={`${
-                  link.href === router.asPath ? "text-gray-900" : "text-gray-600"
-                } h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
-                aria-hidden="true"
-              />
-              {!sidebarCollapse && link.name}
-            </a>
-          </Link>
-        ))}
-      </div>
+                link.href === router.asPath ? "text-gray-900" : "text-gray-600"
+              } h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
+              aria-hidden="true"
+            />
+            {!sidebarCollapse && link.name}
+          </a>
+        </Link>
+      ))}
     </div>
   );
 };
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
index ff64ea3ba..1c5f0b2b0 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -25,10 +25,8 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
         } flex h-full flex-col bg-white duration-300 md:relative`}
       >
         <div className="flex h-full flex-1 flex-col border-r">
-          <div className="flex h-full flex-1 flex-col pt-2">
-            <div className="px-2">
-              <WorkspaceSidebarDropdown />
-            </div>
+          <div className="flex h-full flex-1 flex-col">
+            <WorkspaceSidebarDropdown />
             <WorkspaceSidebarMenu />
             <ProjectSidebarList />
             <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />