diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index a4f869cb3..16fe0e887 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="pt-3 overflow-y-auto">
+              <div className="pt-3 overflow-hidden overflow-y-scroll">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index ad298e79d..9c8e922d2 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@@ -10,6 +12,9 @@ type Props = {
 };
 
 export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   // rendering issues on gantt sidebar
   const GanttSidebarBlockView = ({ data }: any) => (
     <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@@ -23,12 +28,14 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index 04de7afb7..44abc392b 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 113ca8964..f2d44b294 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -18,7 +18,7 @@ export const GanttChartBlocks: FC<{
 
   return (
     <div
-      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
+      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto"
       style={{ width: `${itemsContainerWidth}px` }}
     >
       <div className="w-full">
@@ -39,12 +39,12 @@ export const GanttChartBlocks: FC<{
                   >
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                       <div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.start_date ? datePreview(block?.start_date, true) : "-"}
+                        {block?.start_date ? datePreview(block?.start_date) : "-"}
                       </div>
                     </div>
 
                     <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
+                      className="rounded shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
@@ -54,7 +54,7 @@ export const GanttChartBlocks: FC<{
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                       <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.target_date ? datePreview(block?.target_date, true) : "-"}
+                        {block?.target_date ? datePreview(block?.target_date) : "-"}
                       </div>
                     </div>
                   </div>
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index 6724c3552..72d6888e2 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -37,6 +37,7 @@ import { datePreview, currentViewDataWithView } from "../data";
 import { useChart } from "../hooks";
 
 type ChartViewRootProps = {
+  border: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;
@@ -46,6 +47,7 @@ type ChartViewRootProps = {
 };
 
 export const ChartViewRoot: FC<ChartViewRootProps> = ({
+  border,
   title,
   blocks = null,
   loaderTitle,
@@ -214,10 +216,12 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     <div
       className={`${
         fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
-      } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
+      } ${
+        border ? `border border-brand-base` : ``
+      } flex h-full flex-col rounded-sm select-none bg-brand-base shadow`}
     >
       {/* chart title */}
-      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
+      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
@@ -233,7 +237,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             {blocks.length} {loaderTitle}
           </div>
         )}
-      </div>
+      </div> */}
 
       {/* chart header */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
@@ -248,10 +252,23 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           )}
         </div> */}
 
-        <div className="mr-auto text-sm font-medium">
-          {`${datePreview(currentViewData?.data?.startDate)} - ${datePreview(
-            currentViewData?.data?.endDate
-          )}`}
+        {title && (
+          <div className="text-lg font-medium flex gap-2 items-center">
+            <div>{title}</div>
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+              Gantt View Beta
+            </div>
+          </div>
+        )}
+
+        <div className="ml-auto">
+          {blocks === null ? (
+            <div className="text-sm font-medium ml-auto">Loading...</div>
+          ) : (
+            <div className="text-sm font-medium ml-auto">
+              {blocks.length} {loaderTitle}
+            </div>
+          )}
         </div>
 
         <div className="flex flex-wrap items-center gap-2">
@@ -260,7 +277,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium ${
+                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs ${
                   currentView === _chatView?.key ? `bg-brand-surface-2` : `hover:bg-brand-surface-1`
                 }`}
                 onClick={() => handleChartView(_chatView?.key)}
@@ -272,7 +289,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium hover:bg-brand-surface-2`}
+            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs hover:bg-brand-surface-2`}
             onClick={handleToday}
           >
             Today
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx
index 15d02c488..197ac9930 100644
--- a/apps/app/components/gantt-chart/chart/month.tsx
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@@ -37,7 +37,7 @@ export const MonthChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-brand-surface-1`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx
index 787df0e46..c52bc55b0 100644
--- a/apps/app/components/gantt-chart/root.tsx
+++ b/apps/app/components/gantt-chart/root.tsx
@@ -5,6 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 
 type GanttChartRootProps = {
+  border?: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;
@@ -14,6 +15,7 @@ type GanttChartRootProps = {
 };
 
 export const GanttChartRoot: FC<GanttChartRootProps> = ({
+  border = true,
   title = null,
   blocks,
   loaderTitle = "blocks",
@@ -23,6 +25,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
 }) => (
   <ChartContextProvider>
     <ChartViewRoot
+      border={border}
       title={title}
       blocks={blocks}
       loaderTitle={loaderTitle}
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index b35d4a749..1330c2438 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -1,8 +1,7 @@
 import { FC } from "react";
-
+// next imports
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +31,17 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm font-normal">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
@@ -67,8 +68,9 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
       : [];
 
   return (
-    <div className="w-full h-full p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
+        border={false}
         title="Issues"
         loaderTitle="Issues"
         blocks={ganttIssues ? blockFormat(ganttIssues) : null}
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 48149c24f..71e16a092 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -122,6 +122,8 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       noChevron
       position={position}
       disabled={isNotAllowed}
+      selfPositioned={selfPositioned}
+      dropdownWidth="w-full min-w-[8rem]"
     />
   );
 };
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index 0d11da2c0..fa92964c1 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index edff17a95..cb1c7bc07 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@@ -12,6 +14,9 @@ type Props = {
 };
 
 export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   // rendering issues on gantt sidebar
   const GanttSidebarBlockView = ({ data }: any) => (
     <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@@ -27,15 +32,17 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/modules/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index ef0943377..fb1c0a88c 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -29,6 +29,7 @@ type CustomSearchSelectProps = {
   selfPositioned?: boolean;
   multiple?: boolean;
   footerOption?: JSX.Element;
+  dropdownWidth?: string;
 };
 export const CustomSearchSelect = ({
   label,
@@ -47,6 +48,7 @@ export const CustomSearchSelect = ({
   selfPositioned = false,
   multiple = false,
   footerOption,
+  dropdownWidth,
 }: CustomSearchSelectProps) => {
   const [query, setQuery] = useState("");
 
@@ -108,7 +110,9 @@ export const CustomSearchSelect = ({
                 position === "right" ? "right-0" : "left-0"
               } ${
                 verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
+              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+                dropdownWidth ? dropdownWidth : ``
+              } `}
             >
               <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index 461f46835..dc81f70fa 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date