diff --git a/apps/app/components/core/list-view/all-lists.tsx b/apps/app/components/core/list-view/all-lists.tsx
index d7c93cb78ab..0e067513d8f 100644
--- a/apps/app/components/core/list-view/all-lists.tsx
+++ b/apps/app/components/core/list-view/all-lists.tsx
@@ -38,15 +38,25 @@ export const AllLists: React.FC<Props> = ({
   return (
     <div className="flex flex-col space-y-5">
       {Object.keys(groupedByIssues).map((singleGroup) => {
+        const currentState =
+          selectedGroup === "state_detail.name"
+            ? states?.find((s) => s.name === singleGroup)
+            : null;
         const stateId =
           selectedGroup === "state_detail.name"
             ? states?.find((s) => s.name === singleGroup)?.id ?? null
             : null;
+        const bgColor =
+          selectedGroup === "state_detail.name"
+            ? states?.find((s) => s.name === singleGroup)?.color
+            : "#000000";
 
         return (
           <SingleList
             key={singleGroup}
             type={type}
+            currentState={currentState}
+            bgColor={bgColor}
             groupTitle={singleGroup}
             groupedByIssues={groupedByIssues}
             selectedGroup={selectedGroup}
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 8e76237e9ad..1b6dc23ccba 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -27,7 +27,7 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import { CycleIssueResponse, IIssue, ModuleIssueResponse, Properties, UserAuth } from "types";
 // fetch-keys
@@ -176,21 +176,15 @@ export const SingleListIssue: React.FC<Props> = ({
           Copy issue link
         </ContextMenu.Item>
       </ContextMenu>
-      <div
-        className="flex items-center justify-between gap-2 px-4 py-3 text-sm"
-        onContextMenu={(e) => {
-          e.preventDefault();
-          setContextMenu(true);
-          setContextMenuPosition({ x: e.pageX, y: e.pageY });
-        }}
-      >
-        <div className="flex items-center gap-2">
-          <span
-            className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-            style={{
-              backgroundColor: issue.state_detail.color,
-            }}
-          />
+      <div className="border-b border-gray-300 last:border-b-0">
+        <div
+          className="flex items-center justify-between gap-2 px-4 py-4"
+          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 && (
@@ -198,88 +192,89 @@ export const SingleListIssue: React.FC<Props> = ({
                   tooltipHeading="ID"
                   tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
                 >
-                  <span className="flex-shrink-0 text-xs text-gray-500">
+                  <span className="flex-shrink-0 text-sm text-gray-400">
                     {issue.project_detail?.identifier}-{issue.sequence_id}
                   </span>
                 </Tooltip>
               )}
               <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap">
-                  {issue.name}
-                </span>
+                <span className="text-base text-gray-800">{truncateText(issue.name, 50)}</span>
               </Tooltip>
             </a>
           </Link>
-        </div>
-        <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-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 flex-shrink-0 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 && (
-            <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"
-                >
+
+          <div className="flex  flex-wrap items-center gap-3 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
-                    className="h-1.5 w-1.5 flex-shrink-0 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}
-            />
-          )}
-          {type && !isNotAllowed && (
-            <CustomMenu width="auto" ellipsis>
-              <CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
-              {type !== "issue" && removeIssue && (
-                <CustomMenu.MenuItem onClick={removeIssue}>
-                  <>Remove from {type}</>
+                    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}
+              />
+            )}
+            {type && !isNotAllowed && (
+              <CustomMenu width="auto" ellipsis>
+                <CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
+                {type !== "issue" && removeIssue && (
+                  <CustomMenu.MenuItem onClick={removeIssue}>
+                    <>Remove from {type}</>
+                  </CustomMenu.MenuItem>
+                )}
+                <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
+                  Delete issue
                 </CustomMenu.MenuItem>
-              )}
-              <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                Delete issue
-              </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
-            </CustomMenu>
-          )}
+                <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
+              </CustomMenu>
+            )}
+          </div>
         </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 478b27380f1..1ca09ff9905 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -7,15 +7,18 @@ import useIssuesProperties from "hooks/use-issue-properties";
 // components
 import { SingleListIssue } from "components/core";
 // icons
-import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
+import { getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
+import { IIssue, IProjectMember, IState, NestedKeyOf, UserAuth } from "types";
 import { CustomMenu } from "components/ui";
 
 type Props = {
   type?: "issue" | "cycle" | "module";
+  currentState?: IState | null;
+  bgColor?: string;
   groupTitle: string;
   groupedByIssues: {
     [key: string]: IIssue[];
@@ -33,6 +36,8 @@ type Props = {
 
 export const SingleList: React.FC<Props> = ({
   type,
+  currentState,
+  bgColor,
   groupTitle,
   groupedByIssues,
   selectedGroup,
@@ -69,17 +74,23 @@ export const SingleList: React.FC<Props> = ({
   return (
     <Disclosure key={groupTitle} as="div" defaultOpen>
       {({ open }) => (
-        <div className="rounded-lg bg-white">
-          <div className="rounded-t-lg bg-gray-100 px-4 py-3">
+        <div className="rounded-[10px] border border-gray-300 bg-white">
+          <div
+            className={`flex items-center justify-between bg-gray-100 px-5 py-3 ${
+              open ? "rounded-t-[10px]" : "rounded-[10px]"
+            }`}
+          >
             <Disclosure.Button>
-              <div className="flex items-center gap-x-2">
-                <span>
-                  <ChevronDownIcon
-                    className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
-                  />
-                </span>
+              <div className="flex items-center gap-x-3">
+                {selectedGroup !== null && selectedGroup === "state_detail.name" ? (
+                  <span>
+                    {currentState && getStateGroupIcon(currentState.group, "20", "20", bgColor)}
+                  </span>
+                ) : (
+                  ""
+                )}
                 {selectedGroup !== null ? (
-                  <h2 className="font-medium capitalize leading-5">
+                  <h2 className="text-xl font-semibold capitalize leading-6 text-gray-800">
                     {selectedGroup === "created_by"
                       ? createdBy
                       : selectedGroup === "assignees"
@@ -89,65 +100,25 @@ export const SingleList: React.FC<Props> = ({
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>
                 )}
-                <p className="text-sm text-gray-500">
+                <span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black">
                   {groupedByIssues[groupTitle as keyof IIssue].length}
-                </p>
+                </span>
               </div>
             </Disclosure.Button>
-          </div>
-          <Transition
-            show={open}
-            enter="transition duration-100 ease-out"
-            enterFrom="transform opacity-0"
-            enterTo="transform opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform opacity-100"
-            leaveTo="transform opacity-0"
-          >
-            <Disclosure.Panel>
-              <div className="divide-y-2">
-                {groupedByIssues[groupTitle] ? (
-                  groupedByIssues[groupTitle].length > 0 ? (
-                    groupedByIssues[groupTitle].map((issue: IIssue) => (
-                      <SingleListIssue
-                        key={issue.id}
-                        type={type}
-                        issue={issue}
-                        properties={properties}
-                        editIssue={() => handleEditIssue(issue)}
-                        makeIssueCopy={() => makeIssueCopy(issue)}
-                        handleDeleteIssue={handleDeleteIssue}
-                        removeIssue={() => {
-                          removeIssue && removeIssue(issue.bridge);
-                        }}
-                        userAuth={userAuth}
-                      />
-                    ))
-                  ) : (
-                    <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
-                  )
-                ) : (
-                  <div className="flex h-full w-full items-center justify-center">Loading...</div>
-                )}
-              </div>
-            </Disclosure.Panel>
-          </Transition>
-          <div className="p-3">
+
             {type === "issue" ? (
               <button
                 type="button"
-                className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+                className="p-1  text-gray-500 hover:bg-gray-100"
                 onClick={addIssueToState}
               >
-                <PlusIcon className="h-3 w-3" />
-                Add issue
+                <PlusIcon className="h-4 w-4" />
               </button>
             ) : (
               <CustomMenu
                 label={
-                  <span className="flex items-center gap-1">
-                    <PlusIcon className="h-3 w-3" />
-                    Add issue
+                  <span className="flex items-center">
+                    <PlusIcon className="h-4 w-4" />
                   </span>
                 }
                 optionsPosition="left"
@@ -162,6 +133,41 @@ export const SingleList: React.FC<Props> = ({
               </CustomMenu>
             )}
           </div>
+          <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform opacity-0"
+            enterTo="transform opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform opacity-100"
+            leaveTo="transform opacity-0"
+          >
+            <Disclosure.Panel>
+              {groupedByIssues[groupTitle] ? (
+                groupedByIssues[groupTitle].length > 0 ? (
+                  groupedByIssues[groupTitle].map((issue: IIssue) => (
+                    <SingleListIssue
+                      key={issue.id}
+                      type={type}
+                      issue={issue}
+                      properties={properties}
+                      editIssue={() => handleEditIssue(issue)}
+                      makeIssueCopy={() => makeIssueCopy(issue)}
+                      handleDeleteIssue={handleDeleteIssue}
+                      removeIssue={() => {
+                        removeIssue && removeIssue(issue.bridge);
+                      }}
+                      userAuth={userAuth}
+                    />
+                  ))
+                ) : (
+                  <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
+                )
+              ) : (
+                <div className="flex h-full w-full items-center justify-center">Loading...</div>
+              )}
+            </Disclosure.Panel>
+          </Transition>
         </div>
       )}
     </Disclosure>