diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index a9824d004..19a09710a 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -51,6 +51,7 @@ import { IIssue } from "types";
 // constant
 import { monthOptions, yearOptions } from "constants/calendar";
 import modulesService from "services/modules.service";
+import { getStateGroupIcon } from "components/icons";
 
 type Props = {
   addIssueToDate: (date: string) => void;
@@ -62,9 +63,10 @@ interface ICalendarRange {
 }
 
 export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
-  const [showWeekEnds, setShowWeekEnds] = useState<boolean>(false);
-  const [currentDate, setCurrentDate] = useState<Date>(new Date());
-  const [isMonthlyView, setIsMonthlyView] = useState<boolean>(true);
+  const [showWeekEnds, setShowWeekEnds] = useState(false);
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [isMonthlyView, setIsMonthlyView] = useState(true);
+  const [showAllIssues, setShowAllIssues] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@@ -151,15 +153,15 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
   const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays;
 
   const calendarIssues = cycleId
-    ? cycleCalendarIssues
+    ? (cycleCalendarIssues as IIssue[])
     : moduleId
-    ? moduleCalendarIssues
-    : projectCalendarIssues;
+    ? (moduleCalendarIssues as IIssue[])
+    : (projectCalendarIssues as IIssue[]);
 
   const currentViewDaysData = currentViewDays.map((date: Date) => {
     const filterIssue =
       calendarIssues && calendarIssues.length > 0
-        ? (calendarIssues as IIssue[]).filter(
+        ? calendarIssues.filter(
             (issue) =>
               issue.target_date && renderDateFormat(issue.target_date) === renderDateFormat(date)
           )
@@ -324,7 +326,7 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
 
           <div className="flex w-full items-center justify-end gap-2">
             <button
-              className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-4 py-1.5 text-sm  hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none"
+              className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none"
               onClick={() => {
                 if (isMonthlyView) {
                   updateDate(new Date());
@@ -337,14 +339,12 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
                 }
               }}
             >
-              Today{" "}
+              Today
             </button>
 
             <CustomMenu
               customButton={
-                <div
-                  className={`group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-sm  hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none `}
-                >
+                <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none ">
                   {isMonthlyView ? "Monthly" : "Weekly"}
                   <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                 </div>
@@ -445,61 +445,87 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
             showWeekEnds ? "grid-cols-7" : "grid-cols-5"
           } `}
         >
-          {currentViewDaysData.map((date, index) => (
-            <StrictModeDroppable droppableId={date.date}>
-              {(provided, snapshot) => (
-                <div
-                  key={index}
-                  ref={provided.innerRef}
-                  {...provided.droppableProps}
-                  className={`group flex flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
-                    showWeekEnds
-                      ? (index + 1) % 7 === 0
+          {currentViewDaysData.map((date, index) => {
+            const totalIssues = date.issues.length;
+
+            return (
+              <StrictModeDroppable droppableId={date.date}>
+                {(provided) => (
+                  <div
+                    key={index}
+                    ref={provided.innerRef}
+                    {...provided.droppableProps}
+                    className={`group relative flex flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
+                      showWeekEnds
+                        ? (index + 1) % 7 === 0
+                          ? ""
+                          : "border-r"
+                        : (index + 1) % 5 === 0
                         ? ""
                         : "border-r"
-                      : (index + 1) % 5 === 0
-                      ? ""
-                      : "border-r"
-                  }`}
-                >
-                  {isMonthlyView && <span>{formatDate(new Date(date.date), "d")}</span>}
-                  {date.issues.length > 0 &&
-                    date.issues.map((issue: IIssue, index) => (
-                      <Draggable draggableId={issue.id} index={index}>
-                        {(provided, snapshot) => (
-                          <div
-                            key={index}
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            className={`w-full cursor-pointer truncate rounded bg-brand-surface-2 p-1.5 hover:scale-105 ${
-                              snapshot.isDragging ? "shadow-lg" : ""
-                            }`}
-                          >
-                            <Link
-                              href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}
-                              className="w-full"
-                            >
-                              {issue.name}
-                            </Link>
-                          </div>
-                        )}
-                      </Draggable>
-                    ))}
-                  <div className="flex items-center justify-center p-1.5 text-sm text-brand-secondary opacity-0 group-hover:opacity-100">
-                    <button
-                      className="flex items-center justify-center gap-2 text-center"
-                      onClick={() => addIssueToDate(date.date)}
+                    }`}
+                  >
+                    {isMonthlyView && <span>{formatDate(new Date(date.date), "d")}</span>}
+                    {totalIssues > 0 &&
+                      date.issues
+                        .slice(0, showAllIssues ? totalIssues : 4)
+                        .map((issue: IIssue, index) => (
+                          <Draggable draggableId={issue.id} index={index}>
+                            {(provided, snapshot) => (
+                              <div
+                                key={index}
+                                ref={provided.innerRef}
+                                {...provided.draggableProps}
+                                {...provided.dragHandleProps}
+                                className={`w-full cursor-pointer truncate rounded border border-brand-base px-1.5 py-1 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
+                                  snapshot.isDragging ? "bg-brand-surface-2 shadow-lg" : ""
+                                }`}
+                              >
+                                <Link
+                                  href={`/${workspaceSlug}/projects/${issue?.project_detail.id}/issues/${issue.id}`}
+                                >
+                                  <a className="flex w-full items-center gap-2">
+                                    {getStateGroupIcon(
+                                      issue.state_detail.group,
+                                      "12",
+                                      "12",
+                                      issue.state_detail.color
+                                    )}
+                                    {issue.name}
+                                  </a>
+                                </Link>
+                              </div>
+                            )}
+                          </Draggable>
+                        ))}
+                    {totalIssues > 4 && (
+                      <button
+                        type="button"
+                        className="w-min whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-2 px-1.5 py-1 text-xs"
+                        onClick={() => setShowAllIssues((prevData) => !prevData)}
+                      >
+                        {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
+                      </button>
+                    )}
+                    <div
+                      className={`absolute ${
+                        isMonthlyView ? "bottom-2" : "top-2"
+                      } right-2 flex items-center justify-center rounded-md bg-brand-surface-2 p-1 text-xs text-brand-secondary opacity-0 group-hover:opacity-100`}
                     >
-                      <PlusIcon className="h-4 w-4 text-brand-secondary" />
-                      Add new issue
-                    </button>
+                      <button
+                        className="flex items-center justify-center gap-1 text-center"
+                        onClick={() => addIssueToDate(date.date)}
+                      >
+                        <PlusIcon className="h-3 w-3 text-brand-secondary" />
+                        Add issue
+                      </button>
+                    </div>
+                    {provided.placeholder}
                   </div>
-                  {provided.placeholder}
-                </div>
-              )}
-            </StrictModeDroppable>
-          ))}
+                )}
+              </StrictModeDroppable>
+            );
+          })}
         </div>
       </div>
     </DragDropContext>
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 240368d7f..f063de373 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -426,7 +426,7 @@ export const IssuesView: React.FC<Props> = ({
           )}
         </div>
         {areFiltersApplied && (
-          <div className={` ${issueView === "list" ? "mt-4" : "my-4"} border-t`} />
+          <div className={`${issueView === "list" ? "mt-4" : "my-4"} border-t border-brand-base`} />
         )}
       </>