diff --git a/apps/app/components/core/board-view/board-header.tsx b/apps/app/components/core/board-view/board-header.tsx
index 5eaed3a45..f209ba6e2 100644
--- a/apps/app/components/core/board-view/board-header.tsx
+++ b/apps/app/components/core/board-view/board-header.tsx
@@ -96,17 +96,17 @@ export const BoardHeader: React.FC<Props> = ({
 
     switch (selectedGroup) {
       case "state":
-        icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
+        icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
         break;
       case "priority":
-        icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
+        icon = getPriorityIcon(groupTitle, "text-lg");
         break;
       case "labels":
         const labelColor =
           issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
         icon = (
           <span
-            className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
+            className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
             style={{ backgroundColor: labelColor }}
           />
         );
@@ -143,7 +143,9 @@ export const BoardHeader: React.FC<Props> = ({
             {getGroupTitle()}
           </h2>
           <span
-            className={`${isCollapsed ? "ml-0.5" : ""} rounded-full bg-gray-100 py-1 px-3 text-sm`}
+            className={`${
+              isCollapsed ? "ml-0.5" : ""
+            } rounded-full bg-gray-100 py-1 min-w-[2.5rem] text-xs text-center`}
           >
             {groupedByIssues?.[groupTitle].length ?? 0}
           </span>
diff --git a/apps/app/components/core/list-view/all-lists.tsx b/apps/app/components/core/list-view/all-lists.tsx
index 27cd92fa5..2ea40ffe4 100644
--- a/apps/app/components/core/list-view/all-lists.tsx
+++ b/apps/app/components/core/list-view/all-lists.tsx
@@ -36,7 +36,7 @@ export const AllLists: React.FC<Props> = ({
   return (
     <>
       {groupedByIssues && (
-        <div className="flex flex-col space-y-5 bg-white">
+        <div>
           {Object.keys(groupedByIssues).map((singleGroup) => {
             const currentState =
               selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index df2d1cb3a..4fa518769 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -216,149 +216,147 @@ export const SingleListIssue: React.FC<Props> = ({
           </ContextMenu.Item>
         </a>
       </ContextMenu>
-      <div className="border-b mx-6 border-gray-300 last:border-b-0">
-        <div
-          className="flex items-center justify-between gap-2  py-3"
-          onContextMenu={(e) => {
-            e.preventDefault();
-            setContextMenu(true);
-            setContextMenuPosition({ x: e.pageX, y: e.pageY });
-          }}
-        >
-          <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-            <a className="group relative flex items-center gap-2">
-              {properties.key && (
-                <Tooltip
-                  tooltipHeading="Issue ID"
-                  tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-                >
-                  <span className="flex-shrink-0 text-xs text-gray-400">
-                    {issue.project_detail?.identifier}-{issue.sequence_id}
-                  </span>
-                </Tooltip>
-              )}
-              <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="text-sm text-gray-800">{truncateText(issue.name, 50)}</span>
+      <div
+        className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-gray-300 last:border-b-0"
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setContextMenu(true);
+          setContextMenuPosition({ x: e.pageX, y: e.pageY });
+        }}
+      >
+        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
+          <a className="group relative flex items-center gap-2">
+            {properties.key && (
+              <Tooltip
+                tooltipHeading="Issue ID"
+                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+              >
+                <span className="flex-shrink-0 text-xs text-gray-400">
+                  {issue.project_detail?.identifier}-{issue.sequence_id}
+                </span>
               </Tooltip>
-            </a>
-          </Link>
+            )}
+            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+              <span className="text-[0.825rem] text-gray-800">{truncateText(issue.name, 50)}</span>
+            </Tooltip>
+          </a>
+        </Link>
 
-          <div className="flex flex-wrap items-center gap-2 text-xs">
-            {properties.priority && (
-              <ViewPrioritySelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="right"
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.state && (
-              <ViewStateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="right"
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.due_date && (
-              <ViewDueDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.sub_issue_count && (
-              <div className="flex  items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
-                {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-              </div>
-            )}
-            {properties.labels && issue.label_details.length > 0 ? (
-              <div className="flex flex-wrap gap-1">
-                {issue.label_details.map((label) => (
+        <div className="flex flex-wrap items-center gap-2 text-xs">
+          {properties.priority && (
+            <ViewPrioritySelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="right"
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.state && (
+            <ViewStateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="right"
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.due_date && (
+            <ViewDueDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.sub_issue_count && (
+            <div className="flex  items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
+              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+            </div>
+          )}
+          {properties.labels && issue.label_details.length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {issue.label_details.map((label) => (
+                <span
+                  key={label.id}
+                  className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
+                >
                   <span
-                    key={label.id}
-                    className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
-                  >
-                    <span
-                      className="h-1.5 w-1.5  rounded-full"
-                      style={{
-                        backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
-                      }}
-                    />
-                    {label.name}
-                  </span>
-                ))}
-              </div>
-            ) : (
-              ""
-            )}
-            {properties.assignee && (
-              <ViewAssigneeSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="right"
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.estimate && (
-              <ViewEstimateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="right"
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.link && (
-              <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
-                <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-gray-500">
-                    <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
-                    {issue.link_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.attachment_count && (
-              <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
-                <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-gray-500">
-                    <PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
-                    {issue.attachment_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {type && !isNotAllowed && (
-              <CustomMenu width="auto" ellipsis>
-                <CustomMenu.MenuItem onClick={editIssue}>
+                    className="h-1.5 w-1.5  rounded-full"
+                    style={{
+                      backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                    }}
+                  />
+                  {label.name}
+                </span>
+              ))}
+            </div>
+          ) : (
+            ""
+          )}
+          {properties.assignee && (
+            <ViewAssigneeSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="right"
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.estimate && (
+            <ViewEstimateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="right"
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.link && (
+            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
+              <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
+                <div className="flex items-center gap-1 text-gray-500">
+                  <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
+                  {issue.link_count}
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          {properties.attachment_count && (
+            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
+              <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
+                <div className="flex items-center gap-1 text-gray-500">
+                  <PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
+                  {issue.attachment_count}
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          {type && !isNotAllowed && (
+            <CustomMenu width="auto" ellipsis>
+              <CustomMenu.MenuItem onClick={editIssue}>
+                <div className="flex items-center justify-start gap-2">
+                  <PencilIcon className="h-4 w-4" />
+                  <span>Edit issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+              {type !== "issue" && removeIssue && (
+                <CustomMenu.MenuItem onClick={removeIssue}>
                   <div className="flex items-center justify-start gap-2">
-                    <PencilIcon className="h-4 w-4" />
-                    <span>Edit issue</span>
+                    <XMarkIcon className="h-4 w-4" />
+                    <span>Remove from {type}</span>
                   </div>
                 </CustomMenu.MenuItem>
-                {type !== "issue" && removeIssue && (
-                  <CustomMenu.MenuItem onClick={removeIssue}>
-                    <div className="flex items-center justify-start gap-2">
-                      <XMarkIcon className="h-4 w-4" />
-                      <span>Remove from {type}</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-                <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                  <div className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-4 w-4" />
-                    <span>Delete issue</span>
-                  </div>
-                </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <div className="flex items-center justify-start gap-2">
-                    <LinkIcon className="h-4 w-4" />
-                    <span>Copy issue link</span>
-                  </div>
-                </CustomMenu.MenuItem>
-              </CustomMenu>
-            )}
-          </div>
+              )}
+              <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
+                <div className="flex items-center justify-start gap-2">
+                  <TrashIcon className="h-4 w-4" />
+                  <span>Delete issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={handleCopyText}>
+                <div className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-4 w-4" />
+                  <span>Copy issue link</span>
+                </div>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          )}
         </div>
       </div>
     </>
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
index adf8a6a5f..32880a1a6 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -104,17 +104,17 @@ export const SingleList: React.FC<Props> = ({
 
     switch (selectedGroup) {
       case "state":
-        icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
+        icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
         break;
       case "priority":
-        icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
+        icon = getPriorityIcon(groupTitle, "text-lg");
         break;
       case "labels":
         const labelColor =
           issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
         icon = (
           <span
-            className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
+            className="h-3 w-3 flex-shrink-0 rounded-full"
             style={{ backgroundColor: labelColor }}
           />
         );
@@ -134,24 +134,24 @@ export const SingleList: React.FC<Props> = ({
       {({ open }) => (
         <div className="bg-white">
           <div
-            className={`flex items-center justify-between bg-gray-100 px-5 py-3 ${
+            className={`flex items-center justify-between bg-gray-100 px-4 py-2.5 ${
               open ? "" : "rounded-[10px]"
             }`}
           >
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
                 {selectedGroup !== null && (
-                  <span className="flex items-center">{getGroupIcon()}</span>
+                  <div className="flex items-center">{getGroupIcon()}</div>
                 )}
                 {selectedGroup !== null ? (
-                  <h2 className="text-base font-semibold capitalize leading-6 text-gray-800">
+                  <h2 className="text-sm font-semibold capitalize leading-6 text-gray-800">
                     {getGroupTitle()}
                   </h2>
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>
                 )}
-                <span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black">
-                  {groupedByIssues[groupTitle as keyof IIssue].length}
+                <span className="rounded-full bg-gray-200 py-1 min-w-[2.5rem] text-center text-xs text-black">
+                  {groupedByIssues?.[groupTitle].length ?? 0}
                 </span>
               </div>
             </Disclosure.Button>
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index adfd078a6..1429555d9 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -106,7 +106,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
             } items-center gap-2 text-gray-500`}
           >
             {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
-              <div className="flex items-center justify-center gap-2">
+              <div className="flex items-center justify-center gap-2 -my-0.5">
                 <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
                 <span className="text-gray-500">{issue.assignees.length} Assignees</span>
               </div>
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index b5c992a78..cf99bcc04 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -34,7 +34,7 @@ export const CustomDatePicker: React.FC<Props> = ({
       if (!val) onChange(null);
       else onChange(renderDateFormat(val));
     }}
-    className={`${className} ${
+    className={`${
       renderAs === "input"
         ? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
@@ -44,7 +44,7 @@ export const CustomDatePicker: React.FC<Props> = ({
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } w-full rounded-md border bg-transparent caret-transparent`}
+    } w-full rounded-md border bg-transparent caret-transparent ${className}`}
     dateFormat="dd-MM-yyyy"
     isClearable={isClearable}
     disabled={disabled}