diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 4c8e4bdf0..d3c9be75f 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -278,6 +278,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
               isNotAllowed={isNotAllowed}
+              tooltipPosition="left"
               selfPositioned
             />
           )}
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index c69faa0eb..28689e6cd 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -75,6 +75,19 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
   }, [projectId, projects]);
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
   const addIssueToCycle = async (issueId: string, cycleId: string) => {
     if (!workspaceSlug || !projectId) return;
 
diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index b1243fe98..127c78eba 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -8,7 +8,7 @@ import useSWR, { mutate } from "swr";
 import issuesService from "services/issues.service";
 import cyclesService from "services/cycles.service";
 // ui
-import { Spinner, CustomSelect } from "components/ui";
+import { Spinner, CustomSelect, Tooltip } from "components/ui";
 // icons
 import { CyclesIcon } from "components/icons";
 // types
@@ -65,11 +65,19 @@ export const SidebarCycleSelect: React.FC<Props> = ({
       <div className="space-y-1 sm:basis-1/2">
         <CustomSelect
           label={
-            <span
-              className={`hidden truncate text-left sm:block ${issueCycle ? "" : "text-gray-900"}`}
+            <Tooltip
+              position="top-right"
+              tooltipHeading="Cycle"
+              tooltipContent={issueCycle ? issueCycle.cycle_detail.name : "None"}
             >
-              {issueCycle ? issueCycle.cycle_detail.name : "None"}
-            </span>
+              <span
+                className={` w-full max-w-[125px] truncate text-left sm:block ${
+                  issueCycle ? "" : "text-gray-900"
+                }`}
+              >
+                {issueCycle ? issueCycle.cycle_detail.name : "None"}
+              </span>
+            </Tooltip>
           }
           value={issueCycle?.cycle_detail.id}
           onChange={(value: any) => {
@@ -84,11 +92,15 @@ export const SidebarCycleSelect: React.FC<Props> = ({
               <>
                 {cycles.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
-                    {option.name}
+                    <Tooltip position="left-bottom" tooltipContent={option.name}>
+                      <span className="w-full max-w-[125px] truncate ">{option.name}</span>
+                    </Tooltip>
                   </CustomSelect.Option>
                 ))}
                 <CustomSelect.Option value={null} className="capitalize">
-                  None
+                  <Tooltip position="left-bottom" tooltipContent="None">
+                    <span className="w-full max-w-[125px] truncate">None</span>
+                  </Tooltip>
                 </CustomSelect.Option>
               </>
             ) : (
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index 44bef4d62..90661a0df 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
 // services
 import modulesService from "services/modules.service";
 // ui
-import { Spinner, CustomSelect } from "components/ui";
+import { Spinner, CustomSelect, Tooltip } from "components/ui";
 // icons
 import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
@@ -64,11 +64,19 @@ export const SidebarModuleSelect: React.FC<Props> = ({
       <div className="space-y-1 sm:basis-1/2">
         <CustomSelect
           label={
-            <span
-              className={`hidden truncate text-left sm:block ${issueModule ? "" : "text-gray-900"}`}
+            <Tooltip
+              position="top-right"
+              tooltipHeading="Module"
+              tooltipContent={modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
             >
-              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
-            </span>
+              <span
+                className={`w-full max-w-[125px] truncate text-left sm:block ${
+                  issueModule ? "" : "text-gray-900"
+                }`}
+              >
+                {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
+              </span>
+            </Tooltip>
           }
           value={issueModule?.module_detail?.id}
           onChange={(value: any) => {
@@ -83,11 +91,15 @@ export const SidebarModuleSelect: React.FC<Props> = ({
               <>
                 {modules.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
-                    {option.name}
+                    <Tooltip position="left-bottom" tooltipContent={option.name}>
+                      <span className="w-full max-w-[125px] truncate">{option.name}</span>
+                    </Tooltip>
                   </CustomSelect.Option>
                 ))}
                 <CustomSelect.Option value={null} className="capitalize">
-                  None
+                  <Tooltip position="left-bottom" tooltipContent="None">
+                    <span className="w-full max-w-[125px] truncate"> None </span>
+                  </Tooltip>
                 </CustomSelect.Option>
               </>
             ) : (
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index e1dd2ee33..cb482dfa5 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -19,6 +19,7 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>) => void;
   selfPositioned?: boolean;
+  tooltipPosition?: "left" | "right";
   isNotAllowed: boolean;
 };
 
@@ -26,6 +27,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
   selfPositioned = false,
+  tooltipPosition = "right",
   isNotAllowed,
 }) => {
   const router = useRouter();
@@ -57,7 +59,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
         <div>
           <Listbox.Button>
             <Tooltip
-              position="top-right"
+              position={`top-${tooltipPosition}`}
               tooltipHeading="Assignees"
               tooltipContent={
                 issue.assignee_details.length > 0