diff --git a/apps/web/ce/components/issues/issue-details/sidebar.tsx/date-alert.tsx b/apps/web/ce/components/issues/issue-details/sidebar/date-alert.tsx
similarity index 100%
rename from apps/web/ce/components/issues/issue-details/sidebar.tsx/date-alert.tsx
rename to apps/web/ce/components/issues/issue-details/sidebar/date-alert.tsx
diff --git a/apps/web/core/components/common/activity/activity-block.tsx b/apps/web/core/components/common/activity/activity-block.tsx
index 1805dc304e4..5ed9e17beb2 100644
--- a/apps/web/core/components/common/activity/activity-block.tsx
+++ b/apps/web/core/components/common/activity/activity-block.tsx
@@ -12,7 +12,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 import { User } from "./user";
 
 type TActivityBlockComponent = {
-  icon?: ReactNode;
+  icon?: FC<{ className?: string }>;
   activity: TWorkspaceBaseActivity;
   ends: "top" | "bottom" | undefined;
   children: ReactNode;
@@ -20,19 +20,19 @@ type TActivityBlockComponent = {
 };
 
 export function ActivityBlockComponent(props: TActivityBlockComponent) {
-  const { icon, activity, ends, children, customUserName } = props;
+  const { icon: Icon, activity, ends, children, customUserName } = props;
   // hooks
   const { isMobile } = usePlatformOS();
 
   if (!activity) return <></>;
   return (
     <div
-      className={`relative flex items-start gap-2 text-11 ${
+      className={`relative flex items-start gap-2 text-caption-sm-regular  ${
         ends === "top" ? `pb-3` : ends === "bottom" ? `pt-3` : `py-3`
       }`}
     >
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-start mt-0.5 z-[4] text-secondary">
-        {icon ? icon : <Network className="w-3.5 h-3.5" />}
+      <div className="shrink-0  w-7 h-7 rounded-lg overflow-hidden flex justify-center items-center mt-0.5 z-[4] text-secondary border border-subtle shadow-raised-100">
+        {Icon ? <Icon className="h-3.5 w-3.5 shrink-0" /> : <Network className="h-3.5 w-3.5 shrink-0" />}
       </div>
       <div className="w-full text-secondary">
         <div className="line-clamp-2">
diff --git a/apps/web/core/components/common/activity/helper.tsx b/apps/web/core/components/common/activity/helper.tsx
index 22bc3de1ae4..f0f0cb0cb56 100644
--- a/apps/web/core/components/common/activity/helper.tsx
+++ b/apps/web/core/components/common/activity/helper.tsx
@@ -1,9 +1,8 @@
-import type { ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import {
   RotateCcw,
   Network,
   Link as LinkIcon,
-  Calendar,
   Inbox,
   AlignLeft,
   Paperclip,
@@ -13,7 +12,6 @@ import {
   Hash,
   Clock,
   Bell,
-  LayoutGrid,
   GitBranch,
   Timer,
   ListTodo,
@@ -24,54 +22,55 @@ import {
 import {
   ArchiveIcon,
   CycleIcon,
-  StatePropertyIcon,
+  DueDatePropertyIcon,
+  EstimatePropertyIcon,
+  GridLayoutIcon,
   IntakeIcon,
+  LabelPropertyIcon,
+  MembersPropertyIcon,
   ModuleIcon,
   PriorityPropertyIcon,
   StartDatePropertyIcon,
-  DueDatePropertyIcon,
-  LabelPropertyIcon,
-  MembersPropertyIcon,
-  EstimatePropertyIcon,
+  StatePropertyIcon,
 } from "@plane/propel/icons";
 import { store } from "@/lib/store-context";
 import type { TProjectActivity } from "@/plane-web/types";
 
 type ActivityIconMap = {
-  [key: string]: ReactNode;
+  [key: string]: FC<{ className?: string }>;
 };
 export const iconsMap: ActivityIconMap = {
-  priority: <PriorityPropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  archived_at: <ArchiveIcon className="h-3.5 w-3.5 text-secondary" />,
-  restored: <RotateCcw className="h-3.5 w-3.5 text-secondary" />,
-  link: <LinkIcon className="h-3.5 w-3.5 text-secondary" />,
-  start_date: <StartDatePropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  target_date: <DueDatePropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  label: <LabelPropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  inbox: <Inbox className="h-3.5 w-3.5 text-secondary" />,
-  description: <AlignLeft className="h-3.5 w-3.5 text-secondary" />,
-  assignee: <MembersPropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  attachment: <Paperclip className="h-3.5 w-3.5 text-secondary" />,
-  name: <Type className="h-3.5 w-3.5 text-secondary" />,
-  state: <StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-secondary" />,
-  estimate: <EstimatePropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  cycle: <CycleIcon className="h-4 w-4 flex-shrink-0 text-secondary" />,
-  module: <ModuleIcon className="h-4 w-4 flex-shrink-0 text-secondary" />,
-  page: <FileText className="h-3.5 w-3.5 text-secondary" />,
-  network: <Globe className="h-3.5 w-3.5 text-secondary" />,
-  identifier: <Hash className="h-3.5 w-3.5 text-secondary" />,
-  timezone: <Clock className="h-3.5 w-3.5 text-secondary" />,
-  is_project_updates_enabled: <Bell className="h-3.5 w-3.5 text-secondary" />,
-  is_epic_enabled: <LayoutGrid className="h-3.5 w-3.5 text-secondary" />,
-  is_workflow_enabled: <GitBranch className="h-3.5 w-3.5 text-secondary" />,
-  is_time_tracking_enabled: <Timer className="h-3.5 w-3.5 text-secondary" />,
-  is_issue_type_enabled: <ListTodo className="h-3.5 w-3.5 text-secondary" />,
-  default: <Network className="h-3.5 w-3.5 text-secondary" />,
-  module_view: <ModuleIcon className="h-3.5 w-3.5 text-secondary" />,
-  cycle_view: <CycleIcon className="h-3.5 w-3.5 text-secondary" />,
-  issue_views_view: <Layers className="h-3.5 w-3.5 text-secondary" />,
-  page_view: <FileText className="h-3.5 w-3.5 text-secondary" />,
-  intake_view: <IntakeIcon className="h-3.5 w-3.5 text-secondary" />,
+  priority: PriorityPropertyIcon,
+  archived_at: ArchiveIcon,
+  restored: RotateCcw,
+  link: LinkIcon,
+  start_date: StartDatePropertyIcon,
+  target_date: DueDatePropertyIcon,
+  label: LabelPropertyIcon,
+  inbox: Inbox,
+  description: AlignLeft,
+  assignee: MembersPropertyIcon,
+  attachment: Paperclip,
+  name: Type,
+  state: StatePropertyIcon,
+  estimate: EstimatePropertyIcon,
+  cycle: CycleIcon,
+  module: ModuleIcon,
+  page: FileText,
+  network: Globe,
+  identifier: Hash,
+  timezone: Clock,
+  is_project_updates_enabled: Bell,
+  is_epic_enabled: GridLayoutIcon,
+  is_workflow_enabled: GitBranch,
+  is_time_tracking_enabled: Timer,
+  is_issue_type_enabled: ListTodo,
+  default: Network,
+  module_view: ModuleIcon,
+  cycle_view: CycleIcon,
+  issue_views_view: Layers,
+  page_view: FileText,
+  intake_view: IntakeIcon,
 };
 
 export const messages = (activity: TProjectActivity): { message: string | ReactNode; customUserName?: string } => {
diff --git a/apps/web/core/components/common/layout/sidebar/property-list-item.tsx b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
new file mode 100644
index 00000000000..4aae69e61f4
--- /dev/null
+++ b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+type TSidebarPropertyListItemProps = {
+  icon: React.FC<{ className?: string }>;
+  label: string;
+  children: ReactNode;
+  appendElement?: ReactNode;
+};
+
+export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
+  const { icon: Icon, label, children, appendElement } = props;
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex shrink-0 items-center gap-1 w-30 text-body-xs-regular text-tertiary h-7.5">
+        <Icon className="h-4 w-4 shrink-0" />
+        <span>{label}</span>
+        {appendElement}
+      </div>
+      <div className="grow flex items-center flex-wrap gap-2">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/root.tsx
index d7a3518b6dd..44b5a76f71c 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/root.tsx
@@ -30,7 +30,7 @@ export function IssueDetailWidgets(props: Props) {
 
   return (
     <>
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col space-y-4">
         <IssueDetailWidgetActionButtons
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
index fdb4c9ca2ab..3b27711a974 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import React from "react";
 // helpers
-import { cn } from "@plane/utils";
+import { Button } from "@plane/propel/button";
 
 type Props = {
   icon: React.ReactNode;
@@ -12,17 +12,9 @@ type Props = {
 export function IssueDetailWidgetButton(props: Props) {
   const { icon, title, disabled = false } = props;
   return (
-    <div
-      className={cn(
-        "h-full w-min whitespace-nowrap flex items-center gap-2 border border-subtle rounded-sm px-3 py-1.5",
-        {
-          "cursor-not-allowed text-placeholder bg-surface-2": disabled,
-          "cursor-pointer text-tertiary hover:bg-layer-1": !disabled,
-        }
-      )}
-    >
+    <Button variant={"secondary"} disabled={disabled} size="lg">
       {icon && icon}
       <span className="text-body-xs-medium">{title}</span>
-    </div>
+    </Button>
   );
 }
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
index 8dbdad4faf4..8534e71710e 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
@@ -3,7 +3,7 @@ import { Check, ListFilter } from "lucide-react";
 // plane imports
 import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { IconButton } from "@plane/propel/icon-button";
 import { PopoverMenu } from "@plane/ui";
 // helper
 import { cn } from "@plane/utils";
@@ -24,12 +24,12 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
     <PopoverMenu
       buttonClassName="outline-none"
       button={
-        <Button variant="secondary" prependIcon={<ListFilter className="h-3 w-3" />} className="relative">
-          <span className="text-secondary">{t("common.filters")}</span>
+        <>
+          <IconButton variant="tertiary" icon={ListFilter} />
           {selectedFilters.length < filterOptions.length && (
             <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
           )}
-        </Button>
+        </>
       }
       panelClassName="p-2 rounded-md border border-subtle bg-surface-1"
       data={filterOptions}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index 95879e568d9..5cc9eea4443 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -30,12 +30,12 @@ export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent)
   if (!activity) return <></>;
   return (
     <div
-      className={`relative flex items-center gap-3 text-11 ${
+      className={`relative flex items-center gap-3 text-caption-sm-regular ${
         ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-layer-3" aria-hidden />
-      <div className="flex-shrink-0 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-layer-3 text-secondary">
+      <div className="absolute left-[13px] top-0 bottom-0 w-px bg-layer-3" aria-hidden />
+      <div className="flex-shrink-0 w-7 h-7 rounded-lg overflow-hidden flex justify-center items-center z-[4] bg-layer-2 text-secondary border border-subtle shadow-raised-100">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
       <div className="w-full truncate text-secondary">
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx
index 12eb17e3cb6..b6951acd7b3 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx
@@ -99,7 +99,7 @@ export const IssueActivity = observer(function IssueActivity(props: TIssueActivi
   if (!project) return <></>;
 
   return (
-    <div className="space-y-4 pt-3">
+    <div className="space-y-4">
       {/* header */}
       <div className="flex items-center justify-between">
         <div className="text-16 text-primary">{t("common.activity")}</div>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
index 1ae69db97dd..8e6a64e3124 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
@@ -2,32 +2,15 @@ import { memo } from "react";
 import { ArrowUpWideNarrow, ArrowDownWideNarrow } from "lucide-react";
 // plane package imports
 import { E_SORT_ORDER } from "@plane/constants";
-import { cn } from "@plane/utils";
-import { Button } from "@plane/propel/button";
+import { IconButton } from "@plane/propel/icon-button";
 
 export type TActivitySortRoot = {
   sortOrder: E_SORT_ORDER;
   toggleSort: () => void;
-  className?: string;
-  iconClassName?: string;
 };
 export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
-  return (
-    <Button
-      variant="ghost"
-      size="sm"
-      className={props.className}
-      onClick={() => {
-        props.toggleSort();
-      }}
-    >
-      {props.sortOrder === E_SORT_ORDER.ASC ? (
-        <ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
-      ) : (
-        <ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
-      )}
-    </Button>
-  );
+  const SortIcon = props.sortOrder === E_SORT_ORDER.ASC ? ArrowUpWideNarrow : ArrowDownWideNarrow;
+  return <IconButton variant="tertiary" icon={SortIcon} onClick={props.toggleSort} />;
 });
 
 ActivitySortRoot.displayName = "ActivitySortRoot";
diff --git a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
index 7e919ee2193..471274b66d5 100644
--- a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
@@ -5,6 +5,7 @@ import { LinkIcon } from "lucide-react";
 // plane imports
 import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
@@ -149,19 +150,13 @@ export const IssueDetailQuickActions = observer(function IssueDetailQuickActions
   return (
     <>
       <div className="flex items-center justify-end flex-shrink-0">
-        <div className="flex flex-wrap items-center gap-4">
+        <div className="flex flex-wrap items-center gap-2">
           {currentUser && !issue?.archived_at && (
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
-          <div className="flex flex-wrap items-center gap-2.5 text-tertiary">
+          <div className="flex flex-wrap items-center gap-2 text-tertiary">
             <Tooltip tooltipContent={t("common.actions.copy_link")} isMobile={isMobile}>
-              <button
-                type="button"
-                className="grid h-5 w-5 place-items-center rounded-sm hover:text-secondary focus:outline-none focus:ring-2 focus:ring-custom-primary"
-                onClick={handleCopyText}
-              >
-                <LinkIcon className="h-4 w-4" />
-              </button>
+              <IconButton variant="secondary" size="lg" onClick={handleCopyText} icon={LinkIcon} />
             </Tooltip>
             <WorkItemDetailQuickActions
               parentRef={parentRef}
diff --git a/apps/web/core/components/issues/issue-detail/links/link-list.tsx b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
index 0624a81ceed..34d842c1462 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-list.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
@@ -29,7 +29,7 @@ export const LinkList = observer(function LinkList(props: TLinkList) {
   if (!issueLinks) return null;
 
   return (
-    <div className="flex flex-col gap-2 py-4">
+    <div className="flex flex-col gap-2 pt-4">
       {issueLinks.map((linkId) => (
         <IssueLinkItem
           key={linkId}
diff --git a/apps/web/core/components/issues/issue-detail/main-content.tsx b/apps/web/core/components/issues/issue-detail/main-content.tsx
index f0094bd7c9e..78ac4e7507e 100644
--- a/apps/web/core/components/issues/issue-detail/main-content.tsx
+++ b/apps/web/core/components/issues/issue-detail/main-content.tsx
@@ -128,7 +128,7 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
 
         <DescriptionInput
           issueSequenceId={issue.sequence_id}
-          containerClassName="-ml-3 border-none"
+          containerClassName="p-0 border-none"
           disabled={isArchived || !isEditable}
           editorRef={editorRef}
           entityId={issue.id}
diff --git a/apps/web/core/components/issues/issue-detail/root.tsx b/apps/web/core/components/issues/issue-detail/root.tsx
index cff6e708a34..8194045d198 100644
--- a/apps/web/core/components/issues/issue-detail/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/root.tsx
@@ -301,7 +301,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
         />
       ) : (
         <div className="flex h-full w-full overflow-hidden">
-          <div className="max-w-2/3 h-full w-full space-y-8 overflow-y-auto px-9 py-5">
+          <div className="max-w-2/3 h-full w-full space-y-6 overflow-y-auto px-9 py-5">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -312,7 +312,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
             />
           </div>
           <div
-            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
+            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
             style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
           >
             <IssueDetailsSidebar
diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
index 96fd93e6a99..7628c2fb8d0 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -34,9 +34,10 @@ import { useProjectState } from "@/hooks/store/use-project-state";
 // components
 import { WorkItemAdditionalSidebarProperties } from "@/plane-web/components/issues/issue-details/additional-properties";
 import { IssueParentSelectRoot } from "@/plane-web/components/issues/issue-details/parent-select-root";
+import { DateAlert } from "@/plane-web/components/issues/issue-details/sidebar/date-alert";
 import { TransferHopInfo } from "@/plane-web/components/issues/issue-details/sidebar/transfer-hop-info";
-import { DateAlert } from "@/plane-web/components/issues/issue-details/sidebar.tsx/date-alert";
 import { IssueWorklogProperty } from "@/plane-web/components/issues/worklog/property";
+import { SidebarPropertyListItem } from "@/components/common/layout/sidebar/property-list-item";
 import { IssueCycleSelect } from "./cycle-select";
 import { IssueLabel } from "./label";
 import { IssueModuleSelect } from "./module-select";
@@ -81,32 +82,23 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
       <div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
         <div className="h-full w-full overflow-y-auto px-6">
           <h5 className="mt-6 text-body-xs-medium">{t("common.properties")}</h5>
-          {/* TODO: render properties using a common component */}
           <div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.state")}</span>
-              </div>
+            <SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
               <StateDropdown
                 value={issue?.state_id}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
                 projectId={projectId?.toString() ?? ""}
                 disabled={!isEditable}
                 buttonVariant="transparent-with-text"
-                className="group w-3/5 flex-grow"
+                className="group w-full grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName="text-body-xs-regular"
                 dropdownArrow
                 dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
               />
-            </div>
+            </SidebarPropertyListItem>
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.assignees")}</span>
-              </div>
+            <SidebarPropertyListItem icon={MembersPropertyIcon} label={t("common.assignees")}>
               <MemberDropdown
                 value={issue?.assignee_ids ?? undefined}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
@@ -115,49 +107,35 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 placeholder={t("issue.add.assignee")}
                 multiple
                 buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
-                className="group w-3/5 flex-grow"
+                className="group w-full grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={`text-body-xs-regular justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
                 hideIcon={issue.assignee_ids?.length === 0}
                 dropdownArrow
                 dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
               />
-            </div>
+            </SidebarPropertyListItem>
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.priority")}</span>
-              </div>
+            <SidebarPropertyListItem icon={PriorityPropertyIcon} label={t("common.priority")}>
               <PriorityDropdown
                 value={issue?.priority}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
                 disabled={!isEditable}
                 buttonVariant="border-with-text"
-                className="w-3/5 flex-grow rounded-sm px-2 hover:bg-layer-1"
+                className="w-full grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName="w-min h-auto whitespace-nowrap"
               />
-            </div>
+            </SidebarPropertyListItem>
 
             {createdByDetails && (
-              <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                  <UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>{t("common.created_by")}</span>
-                </div>
-                <div className="w-full h-full flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-body-xs-regular justify-between cursor-not-allowed">
-                  <ButtonAvatars showTooltip userIds={createdByDetails.id} />
-                  <span className="flex-grow truncate text-11 leading-5">{createdByDetails?.display_name}</span>
-                </div>
-              </div>
+              <SidebarPropertyListItem icon={UserCirclePropertyIcon} label={t("common.created_by")}>
+                <ButtonAvatars showTooltip userIds={createdByDetails.id} />
+                <span className="grow truncate text-body-xs-regular leading-5">{createdByDetails?.display_name}</span>
+              </SidebarPropertyListItem>
             )}
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                <StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.order_by.start_date")}</span>
-              </div>
+            <SidebarPropertyListItem icon={StartDatePropertyIcon} label={t("common.order_by.start_date")}>
               <DateDropdown
                 placeholder={t("issue.add.start_date")}
                 value={issue.start_date}
@@ -169,21 +147,15 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 maxDate={maxDate ?? undefined}
                 disabled={!isEditable}
                 buttonVariant="transparent-with-text"
-                className="group w-3/5 flex-grow"
+                className="group w-full grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={`text-body-xs-regular ${issue?.start_date ? "" : "text-placeholder"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
-                // TODO: add this logic
-                // showPlaceholderIcon
               />
-            </div>
+            </SidebarPropertyListItem>
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.order_by.due_date")}</span>
-              </div>
+            <SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("common.order_by.due_date")}>
               <div className="flex items-center gap-2">
                 <DateDropdown
                   placeholder={t("issue.add.due_date")}
@@ -196,27 +168,21 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                   minDate={minDate ?? undefined}
                   disabled={!isEditable}
                   buttonVariant="transparent-with-text"
-                  className="group w-3/5 flex-grow"
+                  className="group w-full grow"
                   buttonContainerClassName="w-full text-left"
                   buttonClassName={cn("text-body-xs-regular", {
                     "text-placeholder": !issue.target_date,
                     "text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
                   })}
                   hideIcon
-                  clearIconClassName="h-3 w-3 hidden group-hover:inline !text-primary"
-                  // TODO: add this logic
-                  // showPlaceholderIcon
+                  clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
                 />
                 {issue.target_date && <DateAlert date={issue.target_date} workItem={issue} projectId={projectId} />}
               </div>
-            </div>
+            </SidebarPropertyListItem>
 
             {projectId && areEstimateEnabledByProjectId(projectId) && (
-              <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                  <EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>{t("common.estimate")}</span>
-                </div>
+              <SidebarPropertyListItem icon={EstimatePropertyIcon} label={t("common.estimate")}>
                 <EstimateDropdown
                   value={issue?.estimate_point ?? undefined}
                   onChange={(val: string | undefined) =>
@@ -225,7 +191,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                   projectId={projectId}
                   disabled={!isEditable}
                   buttonVariant="transparent-with-text"
-                  className="group w-3/5 flex-grow"
+                  className="group w-full grow"
                   buttonContainerClassName="w-full text-left"
                   buttonClassName={`text-body-xs-regular ${issue?.estimate_point !== null ? "" : "text-placeholder"}`}
                   placeholder={t("common.none")}
@@ -233,73 +199,58 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                   dropdownArrow
                   dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
                 />
-              </div>
+              </SidebarPropertyListItem>
             )}
 
             {projectDetails?.module_view && (
-              <div className="flex min-h-8 gap-2">
-                <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-body-xs-regular text-tertiary">
-                  <ModuleIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>{t("common.modules")}</span>
-                </div>
+              <SidebarPropertyListItem icon={ModuleIcon} label={t("common.modules")}>
                 <IssueModuleSelect
-                  className="w-3/5 flex-grow"
+                  className="w-full grow"
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
                   issueId={issueId}
                   issueOperations={issueOperations}
                   disabled={!isEditable}
                 />
-              </div>
+              </SidebarPropertyListItem>
             )}
 
             {projectDetails?.cycle_view && (
-              <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                  <CycleIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>{t("common.cycle")}</span>
-                  <TransferHopInfo workItem={issue} />
-                </div>
+              <SidebarPropertyListItem
+                icon={CycleIcon}
+                label={t("common.cycle")}
+                appendElement={<TransferHopInfo workItem={issue} />}
+              >
                 <IssueCycleSelect
-                  className="w-3/5 flex-grow"
+                  className="w-full grow"
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
                   issueId={issueId}
                   issueOperations={issueOperations}
                   disabled={!isEditable}
                 />
-              </div>
+              </SidebarPropertyListItem>
             )}
 
-            <div className="flex h-8 items-center gap-2">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-body-xs-regular text-tertiary">
-                <ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.parent")}</span>
-              </div>
+            <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
               <IssueParentSelectRoot
-                className="h-full w-3/5 flex-grow"
+                className="h-full w-full grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}
                 issueOperations={issueOperations}
                 disabled={!isEditable}
               />
-            </div>
+            </SidebarPropertyListItem>
 
-            <div className="flex min-h-8 gap-2">
-              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-body-xs-regular text-tertiary">
-                <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{t("common.labels")}</span>
-              </div>
-              <div className="h-full min-h-8 w-3/5 flex-grow">
-                <IssueLabel
-                  workspaceSlug={workspaceSlug}
-                  projectId={projectId}
-                  issueId={issueId}
-                  disabled={!isEditable}
-                />
-              </div>
-            </div>
+            <SidebarPropertyListItem icon={LabelPropertyIcon} label={t("common.labels")}>
+              <IssueLabel
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                issueId={issueId}
+                disabled={!isEditable}
+              />
+            </SidebarPropertyListItem>
 
             <IssueWorklogProperty
               workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index 824a7a0380d..33f58a92970 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -82,6 +82,7 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
         className="hover:!bg-accent-primary/20"
         onClick={handleSubscription}
         disabled={!isEditable || loading}
+        size="lg"
       >
         {loading ? (
           <span>
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
index 3e011c5efb7..2df94630123 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+import { Ellipsis } from "lucide-react";
 // plane imports
 import {
   ARCHIVABLE_STATE_GROUPS,
@@ -29,6 +30,7 @@ import { CreateUpdateIssueModal } from "../../issue-modal/modal";
 import type { IQuickActionProps } from "../list/list-view-types";
 import type { MenuItemFactoryProps } from "./helper";
 import { useWorkItemDetailMenuItems } from "./helper";
+import { IconButton } from "@plane/propel/icon-button";
 
 type TWorkItemDetailQuickActionProps = IQuickActionProps & {
   toggleEditIssueModal?: (value: boolean) => void;
@@ -47,7 +49,6 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
     handleUpdate,
     handleArchive,
     handleRestore,
-    customActionButton,
     portalElement,
     readOnly = false,
     placements = "bottom-end",
@@ -243,7 +244,7 @@ export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickA
       <CustomMenu
         ellipsis
         placement={placements}
-        customButton={customActionButton}
+        customButton={<IconButton size="lg" variant="secondary" icon={Ellipsis} />}
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index 97f057b636d..6aecfa6f317 100644
--- a/apps/web/core/components/issues/peek-overview/properties.tsx
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -24,6 +24,7 @@ import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
 import { PriorityDropdown } from "@/components/dropdowns/priority";
 import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+import { SidebarPropertyListItem } from "@/components/common/layout/sidebar/property-list-item";
 // helpers
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
@@ -32,8 +33,8 @@ import { useProjectState } from "@/hooks/store/use-project-state";
 // plane web components
 import { WorkItemAdditionalSidebarProperties } from "@/plane-web/components/issues/issue-details/additional-properties";
 import { IssueParentSelectRoot } from "@/plane-web/components/issues/issue-details/parent-select-root";
+import { DateAlert } from "@/plane-web/components/issues/issue-details/sidebar/date-alert";
 import { TransferHopInfo } from "@/plane-web/components/issues/issue-details/sidebar/transfer-hop-info";
-import { DateAlert } from "@/plane-web/components/issues/issue-details/sidebar.tsx/date-alert";
 import { IssueWorklogProperty } from "@/plane-web/components/issues/worklog/property";
 import type { TIssueOperations } from "../issue-detail";
 import { IssueCycleSelect } from "../issue-detail/cycle-select";
@@ -75,34 +76,23 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
   return (
     <div>
       <h6 className="text-body-xs-medium">{t("common.properties")}</h6>
-      {/* TODO: render properties using a common component */}
       <div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
-        {/* state */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-            <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.state")}</span>
-          </div>
+        <SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
           <StateDropdown
             value={issue?.state_id}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
             projectId={projectId}
             disabled={disabled}
             buttonVariant="transparent-with-text"
-            className="w-3/4 flex-grow group"
+            className="w-full grow group"
             buttonContainerClassName="w-full text-left"
             buttonClassName="text-body-xs-regular"
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* assignee */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-            <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.assignees")}</span>
-          </div>
+        <SidebarPropertyListItem icon={MembersPropertyIcon} label={t("common.assignees")}>
           <MemberDropdown
             value={issue?.assignee_ids ?? undefined}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
@@ -111,57 +101,40 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             placeholder={t("issue.add.assignee")}
             multiple
             buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
-            className="w-3/4 flex-grow group"
+            className="w-full grow group"
             buttonContainerClassName="w-full text-left"
             buttonClassName={`text-body-xs-regular justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
             hideIcon={issue.assignee_ids?.length === 0}
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* priority */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-            <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.priority")}</span>
-          </div>
+        <SidebarPropertyListItem icon={PriorityPropertyIcon} label={t("common.priority")}>
           <PriorityDropdown
             value={issue?.priority}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
             disabled={disabled}
             buttonVariant="border-with-text"
-            className="w-3/4 flex-grow rounded-sm px-2 hover:bg-layer-1 group"
+            className="w-full grow group"
             buttonContainerClassName="w-full text-left"
             buttonClassName="w-min h-auto whitespace-nowrap"
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* created by */}
         {createdByDetails && (
-          <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-              <UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
-              <span>{t("common.created_by")}</span>
-            </div>
-            <div className="w-full h-full flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-body-xs-regular justify-between cursor-not-allowed">
-              <ButtonAvatars
-                showTooltip
-                userIds={createdByDetails?.display_name.includes("-intake") ? null : createdByDetails?.id}
-              />
-              <span className="flex-grow truncate  leading-5">
-                {createdByDetails?.display_name.includes("-intake") ? "Plane" : createdByDetails?.display_name}
-              </span>
-            </div>
-          </div>
+          <SidebarPropertyListItem icon={UserCirclePropertyIcon} label={t("common.created_by")}>
+            <ButtonAvatars
+              showTooltip
+              userIds={createdByDetails?.display_name.includes("-intake") ? null : createdByDetails?.id}
+            />
+            <span className="grow truncate leading-5">
+              {createdByDetails?.display_name.includes("-intake") ? "Plane" : createdByDetails?.display_name}
+            </span>
+          </SidebarPropertyListItem>
         )}
 
-        {/* start date */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-            <StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.order_by.start_date")}</span>
-          </div>
+        <SidebarPropertyListItem icon={StartDatePropertyIcon} label={t("common.order_by.start_date")}>
           <DateDropdown
             value={issue.start_date}
             onChange={(val) =>
@@ -173,22 +146,15 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             buttonVariant="transparent-with-text"
             maxDate={maxDate ?? undefined}
             disabled={disabled}
-            className="w-3/4 flex-grow group"
+            className="w-full grow group"
             buttonContainerClassName="w-full text-left"
             buttonClassName={`text-body-xs-regular ${issue?.start_date ? "" : "text-placeholder"}`}
             hideIcon
             clearIconClassName="h-3 w-3 hidden group-hover:inline"
-            // TODO: add this logic
-            // showPlaceholderIcon
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* due date */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-            <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.order_by.due_date")}</span>
-          </div>
+        <SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("common.order_by.due_date")}>
           <div className="flex items-center gap-2">
             <DateDropdown
               value={issue.target_date}
@@ -201,35 +167,28 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               buttonVariant="transparent-with-text"
               minDate={minDate ?? undefined}
               disabled={disabled}
-              className="w-3/4 flex-grow group"
+              className="w-full grow group"
               buttonContainerClassName="w-full text-left"
               buttonClassName={cn("text-body-xs-regular", {
                 "text-placeholder": !issue.target_date,
-                "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+                "text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
               })}
               hideIcon
-              clearIconClassName="h-3 w-3 hidden group-hover:inline !text-primary"
-              // TODO: add this logic
-              // showPlaceholderIcon
+              clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
             />
             {issue.target_date && <DateAlert date={issue.target_date} workItem={issue} projectId={projectId} />}
           </div>
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* estimate */}
         {isEstimateEnabled && (
-          <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-              <EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
-              <span>{t("common.estimate")}</span>
-            </div>
+          <SidebarPropertyListItem icon={EstimatePropertyIcon} label={t("common.estimate")}>
             <EstimateDropdown
               value={issue.estimate_point ?? undefined}
               onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
               projectId={projectId}
               disabled={disabled}
               buttonVariant="transparent-with-text"
-              className="w-3/4 flex-grow group"
+              className="w-full grow group"
               buttonContainerClassName="w-full text-left"
               buttonClassName={`text-body-xs-regular ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
               placeholder="None"
@@ -237,70 +196,53 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
               dropdownArrow
               dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
             />
-          </div>
+          </SidebarPropertyListItem>
         )}
 
         {projectDetails?.module_view && (
-          <div className="flex w-full items-center gap-3 min-h-8 h-full">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-              <ModuleIcon className="h-4 w-4 flex-shrink-0" />
-              <span>{t("common.modules")}</span>
-            </div>
+          <SidebarPropertyListItem icon={ModuleIcon} label={t("common.modules")}>
             <IssueModuleSelect
-              className="w-3/4 flex-grow"
+              className="w-full grow"
               workspaceSlug={workspaceSlug}
               projectId={projectId}
               issueId={issueId}
               issueOperations={issueOperations}
               disabled={disabled}
             />
-          </div>
+          </SidebarPropertyListItem>
         )}
 
         {projectDetails?.cycle_view && (
-          <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-              <CycleIcon className="h-4 w-4 flex-shrink-0" />
-              <span>{t("common.cycle")}</span>
-              <TransferHopInfo workItem={issue} />
-            </div>
+          <SidebarPropertyListItem
+            icon={CycleIcon}
+            label={t("common.cycle")}
+            appendElement={<TransferHopInfo workItem={issue} />}
+          >
             <IssueCycleSelect
-              className="w-3/4 flex-grow"
+              className="w-full grow"
               workspaceSlug={workspaceSlug}
               projectId={projectId}
               issueId={issueId}
               issueOperations={issueOperations}
               disabled={disabled}
             />
-          </div>
+          </SidebarPropertyListItem>
         )}
 
-        {/* parent */}
-        <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-            <ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <p>{t("common.parent")}</p>
-          </div>
+        <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
           <IssueParentSelectRoot
-            className="w-3/4 flex-grow h-full"
+            className="w-full grow h-full"
             disabled={disabled}
             issueId={issueId}
             issueOperations={issueOperations}
             projectId={projectId}
             workspaceSlug={workspaceSlug}
           />
-        </div>
+        </SidebarPropertyListItem>
 
-        {/* label */}
-        <div className="flex w-full items-center gap-3 min-h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-body-xs-regular text-tertiary">
-            <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
-            <span>{t("common.labels")}</span>
-          </div>
-          <div className="flex w-full flex-col gap-3 truncate">
-            <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
-          </div>
-        </div>
+        <SidebarPropertyListItem icon={LabelPropertyIcon} label={t("common.labels")}>
+          <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
+        </SidebarPropertyListItem>
 
         <IssueWorklogProperty
           workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
index b5d091e35a2..c4a543a6967 100644
--- a/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -168,7 +168,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
               {/* content */}
               <div className="vertical-scrollbar scrollbar-md relative h-full w-full overflow-hidden overflow-y-auto">
                 {["side-peek", "modal"].includes(peekMode) ? (
-                  <div className="relative flex flex-col gap-3 px-8 py-5 space-y-3">
+                  <div className="relative flex flex-col gap-3 px-12 py-6 space-y-3">
                     <PeekOverviewIssueDetails
                       editorRef={editorRef}
                       workspaceSlug={workspaceSlug}