diff --git a/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx b/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx
index d31eec6944..a8e51151d3 100644
--- a/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx
+++ b/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx
@@ -24,9 +24,7 @@ export const ProjectLabelFormContainer = () => {
     isLoading,
     error: createError
   } = useSaveSpaceLabelMutation(
-    {
-      space_ref: space_ref ?? ''
-    },
+    { space_ref: space_ref ?? '' },
     {
       onSuccess: () => {
         onFormCancel()
@@ -45,18 +43,12 @@ export const ProjectLabelFormContainer = () => {
   const onSubmit = (data: CreateLabelFormFields) => {
     const { values, ...rest } = data
 
-    mutate({
-      body: {
-        label: {
-          ...rest
-        },
-        values
-      }
-    })
+    mutate({ body: { label: { ...rest }, values } })
   }
 
   return (
     <LabelFormPage
+      className="mx-auto w-[610px]"
       useLabelsStore={useLabelsStore}
       useTranslationStore={useTranslationStore}
       isLoading={isLoading}
diff --git a/apps/gitness/src/pages-v2/project/labels/project-labels-list-container.tsx b/apps/gitness/src/pages-v2/project/labels/project-labels-list-container.tsx
index 27ff3d5d65..0d811f6fb7 100644
--- a/apps/gitness/src/pages-v2/project/labels/project-labels-list-container.tsx
+++ b/apps/gitness/src/pages-v2/project/labels/project-labels-list-container.tsx
@@ -32,9 +32,7 @@ export const ProjectLabelsList = () => {
   }
 
   const { mutate: deleteSpaceLabel, isLoading: isDeletingSpaceLabel } = useDeleteSpaceLabelMutation(
-    {
-      space_ref: space_ref ?? ''
-    },
+    { space_ref: space_ref ?? '' },
     {
       onSuccess: (_data, variables) => {
         setOpenAlertDeleteDialog(false)
@@ -48,22 +46,20 @@ export const ProjectLabelsList = () => {
   }
 
   const handleDeleteLabel = (identifier: string) => {
-    deleteSpaceLabel({
-      key: identifier
-    })
+    deleteSpaceLabel({ key: identifier })
   }
 
   return (
     <>
       <LabelsListPage
+        className="mx-auto max-w-[812px]"
         useTranslationStore={useTranslationStore}
         useLabelsStore={useLabelsStore}
         createdIn={space_ref}
-        handleEditLabel={handleEditLabel}
-        handleDeleteLabel={handleOpenDeleteDialog}
         searchQuery={query}
         setSearchQuery={setQuery}
         isLoading={isLoading}
+        labelsListViewProps={{ handleDeleteLabel: handleOpenDeleteDialog, handleEditLabel }}
       />
       <DeleteAlertDialog
         open={openAlertDeleteDialog}
diff --git a/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx b/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx
index 9ad463ef59..13f24be4e3 100644
--- a/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx
+++ b/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import copy from 'clipboard-copy'
 import { isEmpty } from 'lodash-es'
@@ -64,6 +64,7 @@ import { usePullRequestProviderStore } from './stores/pull-request-provider-stor
 
 export default function PullRequestConversationPage() {
   const routes = useRoutes()
+  const navigate = useNavigate()
   const {
     pullReqMetadata,
     refetchPullReq,
@@ -139,6 +140,8 @@ export default function PullRequestConversationPage() {
       refetchData: refetchActivities
     })
 
+  const handleEditLabels = () => navigate(routes.toRepoLabels({ spaceId, repoId }))
+
   const { mutateAsync: restoreBranch } = useRestorePullReqSourceBranchMutation({})
   const onRestoreBranch = () => {
     restoreBranch({
@@ -217,33 +220,30 @@ export default function PullRequestConversationPage() {
   }, [sourceBranch, pullReqMetadata?.merged, pullReqMetadata?.closed])
 
   useEffect(() => {
-    if (branchError) {
-      if (pullReqMetadata?.merged || pullReqMetadata?.closed) {
-        setShowRestoreBranchButton(true)
-      } else {
-        setShowDeleteBranchButton(false)
-        createBranch({
-          repo_ref: repoRef,
-          body: {
-            name: pullReqMetadata?.source_branch || '',
-            target: pullReqMetadata?.source_sha,
-            bypass_rules: true,
-            dry_run_rules: true
-          }
-        }).then(res => {
-          if (res?.body?.rule_violations) {
-            const { checkIfBypassAllowed } = extractInfoFromRuleViolationArr(res.body?.rule_violations)
-            if (checkIfBypassAllowed) {
-              setShowRestoreBranchButton(true)
-            } else {
-              setShowRestoreBranchButton(false)
-            }
-          } else {
-            setShowRestoreBranchButton(true)
-          }
-        })
-      }
+    if (!branchError) return
+
+    if (pullReqMetadata?.merged || pullReqMetadata?.closed) {
+      return setShowRestoreBranchButton(true)
     }
+
+    setShowDeleteBranchButton(false)
+    createBranch({
+      repo_ref: repoRef,
+      body: {
+        name: pullReqMetadata?.source_branch || '',
+        target: pullReqMetadata?.source_sha,
+        bypass_rules: true,
+        dry_run_rules: true
+      }
+    }).then(res => {
+      if (res?.body?.rule_violations) {
+        const { checkIfBypassAllowed } = extractInfoFromRuleViolationArr(res.body?.rule_violations)
+
+        return setShowRestoreBranchButton(checkIfBypassAllowed)
+      }
+
+      setShowRestoreBranchButton(true)
+    })
   }, [branchError])
 
   const [activities, setActivities] = useState(activityData)
@@ -349,16 +349,12 @@ export default function PullRequestConversationPage() {
 
   const handleAddReviewer = (id?: number) => {
     reviewerAddPullReq({ repo_ref: repoRef, pullreq_number: prId, body: { reviewer_id: id } })
-      .then(() => {
-        refetchReviewers()
-      })
+      .then(() => refetchReviewers())
       .catch(error => setAddReviewerError(error.message))
   }
   const handleDeleteReviewer = (id: number) => {
     reviewerDeletePullReq({ repo_ref: repoRef, pullreq_number: prId, pullreq_reviewer_id: id })
-      .then(() => {
-        refetchReviewers()
-      })
+      .then(() => refetchReviewers())
       .catch(error => setRemoveReviewerError(error.message))
   }
   const onPRStateChanged = useCallback(() => {
@@ -525,14 +521,15 @@ export default function PullRequestConversationPage() {
         <SandboxLayout.Column>
           <SandboxLayout.Content className="pl-0 pt-0">
             {/* TODO: fix handleaction for comment section in panel */}
-            {rebaseErrorMessage ? (
+            {rebaseErrorMessage && (
               <Alert.Container closable variant="destructive" className="mb-5">
                 <Alert.Title>Cannot rebase branch</Alert.Title>
                 <Alert.Description>
                   <p>{rebaseErrorMessage}</p>
                 </Alert.Description>
               </Alert.Container>
-            ) : null}
+            )}
+
             <PullRequestPanel
               handleRebaseBranch={handleRebaseBranch}
               handlePrState={handlePrState}
@@ -683,6 +680,7 @@ export default function PullRequestConversationPage() {
               searchLabelQuery={searchLabel}
               setSearchLabelQuery={changeSearchLabel}
               addLabel={handleAddLabel}
+              editLabels={handleEditLabels}
               removeLabel={handleRemoveLabel}
               useTranslationStore={useTranslationStore}
             />
diff --git a/apps/gitness/src/pages-v2/repo/labels/label-form-container.tsx b/apps/gitness/src/pages-v2/repo/labels/label-form-container.tsx
index 8ba547d439..891bce5e58 100644
--- a/apps/gitness/src/pages-v2/repo/labels/label-form-container.tsx
+++ b/apps/gitness/src/pages-v2/repo/labels/label-form-container.tsx
@@ -24,9 +24,7 @@ export const RepoLabelFormContainer = () => {
     isLoading,
     error: createError
   } = useSaveRepoLabelMutation(
-    {
-      repo_ref
-    },
+    { repo_ref },
     {
       onSuccess: () => {
         onFormCancel()
@@ -41,18 +39,12 @@ export const RepoLabelFormContainer = () => {
   const onSubmit = (data: CreateLabelFormFields) => {
     const { values, ...rest } = data
 
-    mutate({
-      body: {
-        label: {
-          ...rest
-        },
-        values
-      }
-    })
+    mutate({ body: { label: { ...rest }, values } })
   }
 
   return (
     <LabelFormPage
+      className="w-[570px] px-0"
       useLabelsStore={useLabelsStore}
       useTranslationStore={useTranslationStore}
       isLoading={isLoading}
diff --git a/apps/gitness/src/pages-v2/repo/labels/labels-list-container.tsx b/apps/gitness/src/pages-v2/repo/labels/labels-list-container.tsx
index 906bacb1d3..df16fd6360 100644
--- a/apps/gitness/src/pages-v2/repo/labels/labels-list-container.tsx
+++ b/apps/gitness/src/pages-v2/repo/labels/labels-list-container.tsx
@@ -34,9 +34,7 @@ export const RepoLabelsList = () => {
   }
 
   const { mutate: deleteRepoLabel, isLoading: isDeletingRepoLabel } = useDeleteRepoLabelMutation(
-    {
-      repo_ref: repo_ref ?? ''
-    },
+    { repo_ref: repo_ref ?? '' },
     {
       onSuccess: (_data, variables) => {
         setOpenAlertDeleteDialog(false)
@@ -46,9 +44,7 @@ export const RepoLabelsList = () => {
   )
 
   const { mutate: deleteSpaceLabel, isLoading: isDeletingSpaceLabel } = useDeleteSpaceLabelMutation(
-    {
-      space_ref: space_ref ?? ''
-    },
+    { space_ref: space_ref ?? '' },
     {
       onSuccess: (_data, variables) => {
         setOpenAlertDeleteDialog(false)
@@ -72,15 +68,15 @@ export const RepoLabelsList = () => {
   return (
     <>
       <LabelsListPage
+        className="max-w-[570px] px-0"
         useTranslationStore={useTranslationStore}
         useLabelsStore={useLabelsStore}
         createdIn={space_ref}
-        handleEditLabel={handleEditLabel}
-        handleDeleteLabel={handleOpenDeleteDialog}
         searchQuery={query}
         setSearchQuery={setQuery}
         isLoading={isLoading}
         isRepository
+        labelsListViewProps={{ widthType: 'small', handleDeleteLabel: handleOpenDeleteDialog, handleEditLabel }}
       />
       <DeleteAlertDialog
         open={openAlertDeleteDialog}
diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx
index a4dd7509bd..73e7460b4b 100644
--- a/apps/gitness/src/routes.tsx
+++ b/apps/gitness/src/routes.tsx
@@ -1,6 +1,6 @@
 import { Navigate } from 'react-router-dom'
 
-import { Breadcrumb } from '@harnessio/ui/components'
+import { Breadcrumb, Text } from '@harnessio/ui/components'
 import {
   EmptyPage,
   ProfileSettingsLayout,
diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json
index 26e099e581..6133e848b9 100644
--- a/packages/ui/locales/en/views.json
+++ b/packages/ui/locales/en/views.json
@@ -10,7 +10,7 @@
     "pull-requests": "Pull Requests",
     "branches": "Branches",
     "settings": "Settings",
-    "descriptionPlaceholder": "Enter a description",
+    "descriptionPlaceholder": "Enter a short description for the label",
     "description": "Description",
     "error": "Error:",
     "saving": "Saving…",
@@ -288,12 +288,14 @@
     "compareChangesTabOverview": "Overview",
     "compareChangesTabCommits": "Commits",
     "compareChangesTabChanges": "Changes",
-    "findOrAddNewValue": "Search or add a new value",
+    "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "No labels found",
+    "labelNotFound": "Label not found",
     "labels": "Labels",
     "searchLabels": "Search labels",
+    "noLabels": "No labels found",
+    "editLabels": "Edit labels",
     "deleted": "Deleted",
     "deletedComment": "This comment was deleted.",
     "reviewers": "Reviewers",
diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json
index 2cec183f99..4728334553 100644
--- a/packages/ui/locales/es/views.json
+++ b/packages/ui/locales/es/views.json
@@ -10,7 +10,7 @@
     "pull-requests": "Pull Requests",
     "branches": "Branches",
     "settings": "Settings",
-    "descriptionPlaceholder": "Enter a description",
+    "descriptionPlaceholder": "Enter a short description for the label",
     "description": "Description",
     "error": "Error:",
     "saving": "Saving...",
@@ -288,12 +288,14 @@
     "compareChangesTabOverview": "Resumen",
     "compareChangesTabCommits": "Commits",
     "compareChangesTabChanges": "Cambios",
-    "findOrAddNewValue": "Search or add a new value",
+    "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "No labels found",
+    "labelNotFound": "Label not found",
     "labels": "Labels",
     "searchLabels": "Search labels",
+    "noLabels": "No labels found",
+    "editLabels": "Edit labels",
     "deleted": "",
     "deletedComment": "",
     "reviewers": "",
diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json
index b7969b2952..2d5f02b32f 100644
--- a/packages/ui/locales/fr/views.json
+++ b/packages/ui/locales/fr/views.json
@@ -10,7 +10,7 @@
     "pull-requests": "Requêtes de tirage",
     "branches": "Branches",
     "settings": "Paramètres",
-    "descriptionPlaceholder": "Entrez une description",
+    "descriptionPlaceholder": "Enter a description",
     "description": "Description",
     "error": "Erreur :",
     "saving": "Enregistrement...",
@@ -291,9 +291,11 @@
     "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "Aucune étiquette trouvée.",
+    "labelNotFound": "Label not found",
     "labels": "Étiquettes",
     "searchLabels": "Rechercher des étiquettes..",
+    "noLabels": "No labels found",
+    "editLabels": "Edit labels",
     "deleted": "Supprimé",
     "deletedComment": "Ce commentaire a été supprimé.",
     "reviewers": "Réviseurs",
diff --git a/packages/ui/src/components/chat/chat-diff-viewer.tsx b/packages/ui/src/components/chat/chat-diff-viewer.tsx
index f548a7d209..044a0080e7 100644
--- a/packages/ui/src/components/chat/chat-diff-viewer.tsx
+++ b/packages/ui/src/components/chat/chat-diff-viewer.tsx
@@ -65,16 +65,16 @@ export const ChatDiffViewer = ({ data, mode = 4, lang = 'go', fileName }: ChatDi
   }, [data, lang, setDiffInstanceCb])
 
   return (
-    <div className="border-borders-1 bg-background-1 mr-7 mt-3 flex flex-col rounded-md border">
+    <div className="mr-7 mt-3 flex flex-col rounded-md border border-borders-1 bg-background-1">
       {fileName && (
-        <span className="bg-background-2 text-foreground-1 text-14 rounded-[inherit] p-4 font-medium">{fileName}</span>
+        <span className="rounded-[inherit] bg-background-2 p-4 text-14 font-medium text-foreground-1">{fileName}</span>
       )}
       {diffFileInstance && (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         <DiffView
           style={{ '--diff-plain-lineNumber--': 'hsl(var(--canary-background-01))' } as CSSProperties}
-          className="text-foreground-8 w-full"
+          className="w-full text-foreground-8"
           diffFile={diffFileInstance}
           diffViewFontSize={14}
           diffViewHighlight={true}
diff --git a/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx b/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx
index 9783a41d63..af7e71a27e 100644
--- a/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx
+++ b/packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx
@@ -4,7 +4,7 @@ import { Chat } from '@/components'
 
 export const ChatEmptyPreviewWrapper: FC = () => {
   return (
-    <div className="border-borders-4 h-[calc(100vh-100px)] border-r">
+    <div className="h-[calc(100vh-100px)] border-r border-borders-4">
       <Chat.Root>
         <Chat.Body>
           <Chat.EmptyState />
diff --git a/packages/ui/src/components/chat_deprecated.tsx b/packages/ui/src/components/chat_deprecated.tsx
index 82066a6291..b88bdaa09d 100644
--- a/packages/ui/src/components/chat_deprecated.tsx
+++ b/packages/ui/src/components/chat_deprecated.tsx
@@ -5,17 +5,17 @@ import { cn } from '@/utils/cn'
 
 // Root Container
 const Root: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="w-full h-full overflow-y-auto flex flex-col">{children}</div>
+  return <div className="flex size-full flex-col overflow-y-auto">{children}</div>
 }
 
 // Body
 const Body: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="flex-1 flex flex-col gap-6 mb-3 p-6">{children}</div>
+  return <div className="mb-3 flex flex-1 flex-col gap-6 p-6">{children}</div>
 }
 
 // Footer
 const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="sticky bottom-0 p-6 pt-0 bg-background">{children}</div>
+  return <div className="sticky bottom-0 bg-background p-6 pt-0">{children}</div>
 }
 
 // Message Component
@@ -48,8 +48,8 @@ const Message: React.FC<MessageProps> = ({ self, time, avatar, actions, children
         >
           {children}
         </div>
-        <div className="flex gap-3 items-center justify-between mt-1">
-          <div>{actions && <div className="flex gap-1 items-center justify-start">{actions}</div>}</div>
+        <div className="mt-1 flex items-center justify-between gap-3">
+          <div>{actions && <div className="flex items-center justify-start gap-1">{actions}</div>}</div>
           {time && (
             <Text size={1} className="text-primary opacity-20">
               {time}
@@ -68,9 +68,9 @@ interface TypingProps {
 
 const Typing: React.FC<TypingProps> = ({ avatar }) => {
   return (
-    <div className="flex items-center gap-3 mt-3">
+    <div className="mt-3 flex items-center gap-3">
       {avatar}
-      <div className="flex gap-1 text-success text-lg font-medium" aria-live="polite">
+      <div className="flex gap-1 text-lg font-medium text-success" aria-live="polite">
         <span className="dot animate-bounce">&middot;</span>
         <span className="dot animate-bounce" style={{ animationDelay: '0.15s' }}>
           &middot;
@@ -115,10 +115,10 @@ const InputField: React.FC<InputFieldProps> = ({
   sendIcon = <Icon name="chevron-up" size={16} />
 }) => {
   return (
-    <div className="sticky bottom-0 bg-background flex items-center gap-2">
+    <div className="sticky bottom-0 flex items-center gap-2 bg-background">
       <Input
         ref={inputRef}
-        className="flex-1 pt-6 px-4 pb-16 rounded-lg focus:ring-0"
+        className="flex-1 rounded-lg px-4 pb-16 pt-6 focus:ring-0"
         value={value}
         onChange={onChange}
         onKeyDown={onKeyDown}
@@ -130,7 +130,7 @@ const InputField: React.FC<InputFieldProps> = ({
         variant="outline"
         size="icon"
         disabled={disabled}
-        className="absolute right-3.5 bottom-3.5 z-10 w-6 h-6"
+        className="absolute bottom-3.5 right-3.5 z-10 size-6"
       >
         {sendIcon}
       </Button>
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 8194104113..e6bf32b159 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -406,7 +406,14 @@ export interface IconProps {
 
 const Icon: React.FC<IconProps> = ({ name, size = 16, height, width, className }) => {
   const Component = IconNameMap[name]
-  return <Component width={width || size} height={height || size} className={className} />
+  return (
+    <Component
+      width={width || size}
+      height={height || size}
+      className={className}
+      style={{ minWidth: `${width || size}px`, minHeight: `${height || size}px` }}
+    />
+  )
 }
 
 export { Icon }
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index d84989b4ce..8ac195e02d 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, Fragment, InputHTMLAttributes, ReactNode } from 'react'
+import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
 
 import { Caption, ControlGroup, Icon, IconProps, Label, Message, MessageTheme } from '@/components'
 import { cn } from '@utils/cn'
@@ -69,7 +69,7 @@ const BaseInputWithWrapper = forwardRef<HTMLInputElement, BaseInputWithWrapperPr
 
 BaseInputWithWrapper.displayName = 'BaseInputWithWrapper'
 
-interface InputProps extends BaseInputProps {
+export interface InputProps extends BaseInputProps {
   label?: string
   caption?: ReactNode
   error?: string
@@ -114,14 +114,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     },
     ref
   ) => {
-    const isControlGroup = !!error || !!caption || !!label || !!wrapperClassName
-    const InputWrapper = isControlGroup ? ControlGroup : Fragment
-    const inputWrapperProps = isControlGroup
-      ? {
-          className: wrapperClassName
-        }
-      : {}
-
     const InputComponent = customContent ? BaseInputWithWrapper : BaseInput
 
     const baseInputComp = (
@@ -167,7 +159,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     }
 
     return (
-      <InputWrapper {...inputWrapperProps}>
+      <ControlGroup className={wrapperClassName}>
         {!!label && (
           <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
             {label}
@@ -182,7 +174,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           </Message>
         )}
         {caption && <Caption className={disabled ? 'text-foreground-9' : ''}>{caption}</Caption>}
-      </InputWrapper>
+      </ControlGroup>
     )
   }
 )
@@ -190,4 +182,3 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 Input.displayName = 'Input'
 
 export { Input }
-export type { InputProps }
diff --git a/packages/ui/src/components/label-marker.tsx b/packages/ui/src/components/label-marker.tsx
index 1dcf1595dc..51f66e5f12 100644
--- a/packages/ui/src/components/label-marker.tsx
+++ b/packages/ui/src/components/label-marker.tsx
@@ -1,16 +1,19 @@
 import { FC } from 'react'
 
+import { Button, Icon } from '@/components'
 import { cn } from '@utils/cn'
-import { ColorsEnum } from '@views/labels'
+import { ColorsEnum, ILabelType, LabelType } from '@views/labels'
 
-export interface LabelMarkerProps {
+export interface LabelMarkerProps extends Pick<ILabelType, 'color' | 'type'> {
   label: string
   value?: string
-  color: ColorsEnum
-  inTable?: boolean
+  counter?: ILabelType['value_count']
+  className?: string
+  widthType?: 'auto' | 'balanced'
+  onDelete?: () => void
 }
 
-export const LabelMarkerColor = {
+const LabelMarkerColor = {
   [ColorsEnum.RED]: 'bg-label-background-red text-label-foreground-red',
   [ColorsEnum.BLUE]: 'bg-label-background-blue text-label-foreground-blue',
   [ColorsEnum.GREEN]: 'bg-label-background-green text-label-foreground-green',
@@ -25,23 +28,71 @@ export const LabelMarkerColor = {
   [ColorsEnum.MINT]: 'bg-label-background-mint text-label-foreground-mint',
   [ColorsEnum.LIME]: 'bg-label-background-lime text-label-foreground-lime'
 }
+const deleteButtonColor = {
+  [ColorsEnum.RED]: 'text-label-foreground-red',
+  [ColorsEnum.BLUE]: 'text-label-foreground-blue',
+  [ColorsEnum.GREEN]: 'text-label-foreground-green',
+  [ColorsEnum.YELLOW]: 'text-label-foreground-yellow',
+  [ColorsEnum.PURPLE]: 'text-label-foreground-purple',
+  [ColorsEnum.PINK]: 'text-label-foreground-pink',
+  [ColorsEnum.VIOLET]: 'text-label-foreground-violet',
+  [ColorsEnum.INDIGO]: 'text-label-foreground-indigo',
+  [ColorsEnum.CYAN]: 'text-label-foreground-cyan',
+  [ColorsEnum.ORANGE]: 'text-label-foreground-orange',
+  [ColorsEnum.BROWN]: 'text-label-foreground-brown',
+  [ColorsEnum.MINT]: 'text-label-foreground-mint',
+  [ColorsEnum.LIME]: 'text-label-foreground-lime'
+}
+
+const DeleteButton = ({ onDelete, color }: Pick<LabelMarkerProps, 'onDelete' | 'color'>) => (
+  <Button className={`ml-2 size-2.5 px-0 ${deleteButtonColor[color]}`} variant="custom" onClick={onDelete}>
+    <Icon name="cross" size={10} />
+  </Button>
+)
+
+export const LabelMarker: FC<LabelMarkerProps> = ({
+  type,
+  label,
+  value,
+  color,
+  counter,
+  onDelete,
+  className,
+  widthType = 'auto'
+}) => {
+  const isDynamic = type === LabelType.DYNAMIC
+  const isBalancedWidthType = widthType === 'balanced'
+  const isWithExtraContent = !!value || !!counter
+  const isWithDeleteButton = !!onDelete
 
-export const LabelMarker: FC<LabelMarkerProps> = ({ label, value, color, inTable = false }) => {
   return (
-    <span
-      className={cn(
-        `inline-flex text-12 leading-5 h-5 py-px px-2 items-center font-medium rounded overflow-hidden max-w-full ${LabelMarkerColor[color]}`,
-        { 'pr-px': !!value }
-      )}
-    >
-      <span className={cn('truncate', { 'flex-1': inTable }, { 'pr-1.5': !!value })}>{label}</span>
-      {!!value && (
-        <span
-          className={`flex h-full items-center overflow-hidden rounded-r bg-label-background-black pl-1.5 pr-[7px] ${inTable && 'max-w-[50%]'}`}
-        >
-          <span className="max-w-full truncate">{value}</span>
-        </span>
-      )}
-    </span>
+    <div className={cn('flex max-w-full items-center gap-2', className)}>
+      <span
+        className={cn(
+          `grid text-12 leading-3 h-5 py-px px-2 items-center font-medium rounded overflow-hidden w-fit ${LabelMarkerColor[color]}`,
+          { 'pr-px': isWithExtraContent },
+          { 'grid-cols-[1fr,auto]': !!counter || !isBalancedWidthType },
+          { 'grid-cols-[minmax(30%,1fr),auto]': !!value && isBalancedWidthType }
+        )}
+      >
+        <span className={cn('truncate', { 'pr-1.5': isWithExtraContent, 'pr-1': isBalancedWidthType })}>{label}</span>
+
+        {isWithExtraContent && (
+          <span
+            className={`flex h-full items-center overflow-hidden rounded-r-[3px] bg-label-background-black pl-1.5 pr-[7px]`}
+          >
+            {!!value && <span className="max-w-full truncate">{value}</span>}
+
+            {!!counter && counter}
+
+            {isWithExtraContent && isWithDeleteButton && <DeleteButton onDelete={onDelete} color={color} />}
+          </span>
+        )}
+
+        {!isWithExtraContent && isWithDeleteButton && <DeleteButton onDelete={onDelete} color={color} />}
+      </span>
+
+      {isDynamic && <Icon name="circle-plus" size={12} className="min-w-3 text-icons-4" />}
+    </div>
   )
 }
diff --git a/packages/ui/src/components/language-selector/language-dialog.tsx b/packages/ui/src/components/language-selector/language-dialog.tsx
index 1179b162aa..32569c9ee8 100644
--- a/packages/ui/src/components/language-selector/language-dialog.tsx
+++ b/packages/ui/src/components/language-selector/language-dialog.tsx
@@ -40,7 +40,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
               }}
             >
               <div className="flex items-center gap-2">
-                <div className="bg-background-12 text-12 text-foreground-3 flex size-6 items-center justify-center rounded">
+                <div className="flex size-6 items-center justify-center rounded bg-background-12 text-12 text-foreground-3">
                   {lang.code}
                 </div>
                 <span
diff --git a/packages/ui/src/components/multi-select.tsx b/packages/ui/src/components/multi-select.tsx
index 89eadccf21..e127b2d0f2 100644
--- a/packages/ui/src/components/multi-select.tsx
+++ b/packages/ui/src/components/multi-select.tsx
@@ -48,7 +48,7 @@ export const MultiSelect = <T = unknown,>({
         </Label>
       )}
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 px-3 transition-colors data-[state=open]:border-borders-8 bg-input-background">
+        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 bg-input-background px-3 transition-colors data-[state=open]:border-borders-8">
           {placeholder}
           <Icon name="chevron-down" className="chevron-down ml-auto" size={12} />
         </DropdownMenu.Trigger>
diff --git a/packages/ui/src/components/navbar-project-chooser.tsx b/packages/ui/src/components/navbar-project-chooser.tsx
index 9863d57dd2..e7910f7d8c 100644
--- a/packages/ui/src/components/navbar-project-chooser.tsx
+++ b/packages/ui/src/components/navbar-project-chooser.tsx
@@ -24,7 +24,7 @@ function Root({ logo }: ProjectProps) {
 
   return (
     <div className="flex w-full flex-col place-items-start px-3 pb-3">
-      <div className="flex h-[58px] px-1 items-center">{logo}</div>
+      <div className="flex h-[58px] items-center px-1">{logo}</div>
       <SearchBox
         width="full"
         placeholder="Search..."
diff --git a/packages/ui/src/components/navbar-skeleton/group.tsx b/packages/ui/src/components/navbar-skeleton/group.tsx
index 1410f4d312..733e7e43af 100644
--- a/packages/ui/src/components/navbar-skeleton/group.tsx
+++ b/packages/ui/src/components/navbar-skeleton/group.tsx
@@ -22,7 +22,7 @@ export function Group({ children, title, topBorder, isSubMenu = false, titleClas
     >
       {title && (
         <div className={cn('text-foreground-7 mt-1.5', isSubMenu ? 'mb-3' : 'mb-1.5', titleClassName)}>
-          <p className="text-xs font-normal px-2.5">{title}</p>
+          <p className="px-2.5 text-xs font-normal">{title}</p>
         </div>
       )}
       {children}
diff --git a/packages/ui/src/components/problems.tsx b/packages/ui/src/components/problems.tsx
index 2c3433d54b..114988a30f 100644
--- a/packages/ui/src/components/problems.tsx
+++ b/packages/ui/src/components/problems.tsx
@@ -41,7 +41,7 @@ const ProblemsComponent = {
         role="button"
         tabIndex={0}
         onClick={onClick}
-        className={`width-100 flex flex-1 cursor-pointer items-center gap-2 text-nowrap py-0.5 justify-between px-4 ${rowClasses}`}
+        className={`width-100 flex flex-1 cursor-pointer items-center justify-between gap-2 text-nowrap px-4 py-0.5 ${rowClasses}`}
       >
         {children}
       </div>
diff --git a/packages/ui/src/components/search-box.tsx b/packages/ui/src/components/search-box.tsx
index ac2bcba207..5078cb8fc5 100644
--- a/packages/ui/src/components/search-box.tsx
+++ b/packages/ui/src/components/search-box.tsx
@@ -1,4 +1,4 @@
-import React, {
+import {
   ForwardedRef,
   forwardRef,
   ReactNode,
@@ -8,7 +8,7 @@ import React, {
   type InputHTMLAttributes
 } from 'react'
 
-import { Icon, Input, Text } from '@/components'
+import { Icon, Input } from '@/components'
 import { cn } from '@utils/cn'
 import { noop } from 'lodash-es'
 
@@ -115,14 +115,14 @@ const Root = forwardRef<HTMLInputElement, SearchBoxProps>(
     return (
       <div className={cn('relative', width === 'full' ? 'w-full' : 'w-96', className)}>
         {hasSearchIcon && (
-          <Icon name="search" size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-icons-1" />
+          <Icon name="search" size={12} className="absolute left-2.5 top-1/2 z-10 -translate-y-1/2 text-icons-1" />
         )}
+
         {hasShortcut && !!shortcutLetter && (
           <div className="absolute right-1.5 top-1/2 flex h-5 -translate-y-1/2 cursor-pointer items-center gap-0.5 rounded-sm border bg-background-3 px-1 text-foreground-2 duration-100 ease-in-out">
             <Icon name="apple-shortcut" size={12} />
-            <Text size={0} className="text-inherit">
-              {shortcutLetter}
-            </Text>
+
+            <span className="text-inherit">{shortcutLetter}</span>
           </div>
         )}
         <Input
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index a2e61f7d19..67a3e696cd 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -6,7 +6,7 @@ import { useDebounceSearch } from '@hooks/use-debounce-search'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { cn } from '@utils/cn'
 
-interface SelectProps
+export interface SelectProps
   extends Omit<Omit<PropsWithChildren<React.HTMLAttributes<HTMLElement>>, 'defaultValue'>, 'dir'>,
     SelectPrimitive.SelectProps {
   label?: string
diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
index 37dd6b15f4..df0548981d 100644
--- a/packages/ui/src/components/table.tsx
+++ b/packages/ui/src/components/table.tsx
@@ -8,7 +8,7 @@ const tableVariants = cva('w-full text-sm', {
     variant: {
       default: 'caption-bottom',
       asStackedList:
-        'bg-background-surface rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
+        'rounded-md border bg-background-surface [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
     }
   },
   defaultVariants: {
@@ -43,7 +43,7 @@ TableHeader.displayName = 'TableHeader'
 
 const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
   ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0 [&>tr:hover]:bg-background-4', className)} {...props} />
   )
 )
 TableBody.displayName = 'TableBody'
@@ -57,11 +57,7 @@ TableFooter.displayName = 'TableFooter'
 
 const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
   ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn('hover:bg-background-4 data-[state=selected]:bg-muted border-b transition-colors', className)}
-      {...props}
-    />
+    <tr ref={ref} className={cn('data-[state=selected]:bg-muted border-b transition-colors', className)} {...props} />
   )
 )
 TableRow.displayName = 'TableRow'
diff --git a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
index fbf165e342..d2ca8e6819 100644
--- a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
+++ b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
@@ -38,8 +38,8 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
         {/* Mode */}
         <div className="mt-1 flex flex-col gap-y-5">
           <div className="flex flex-col">
-            <span className="text-16 text-foreground-1 font-medium">Mode</span>
-            <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+            <span className="text-16 font-medium text-foreground-1">Mode</span>
+            <p className="mt-1.5 text-14 leading-snug text-foreground-3">
               Choose Dark mode for low light or Light mode for bright spaces.
             </p>
             <div className="mt-[18px] grid grid-cols-2 gap-x-4">
@@ -63,7 +63,7 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
                         )}
                       />
                       {mode === item && (
-                        <Icon className="text-foreground-1 absolute bottom-2 left-2" name="checkbox-circle" size={16} />
+                        <Icon className="absolute bottom-2 left-2 text-foreground-1" name="checkbox-circle" size={16} />
                       )}
                       <div
                         className="absolute right-[27px] top-[61px] h-2 w-9 rounded-sm"
@@ -78,20 +78,20 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
                         aria-hidden
                       />
                     </div>
-                    <span className="text-14 text-foreground-1 leading-tight">{item}</span>
+                    <span className="text-14 leading-tight text-foreground-1">{item}</span>
                   </button>
                 )
               })}
             </div>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Contrast */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Contrast</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+              <span className="text-16 font-medium text-foreground-1">Contrast</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">
                 High contrast improves readability, Dimmer mode reduces glare.
               </p>
             </div>
@@ -114,13 +114,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </Select>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Color Adjustment */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Color adjustment</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+              <span className="text-16 font-medium text-foreground-1">Color adjustment</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">
                 Adjust colors for different types of color blindness.
               </p>
             </div>
@@ -143,13 +143,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </Select>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Accent Color */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Accent color</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">Select your application accent color.</p>
+              <span className="text-16 font-medium text-foreground-1">Accent color</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">Select your application accent color.</p>
             </div>
             <div className="flex flex-wrap gap-1.5">
               {Object.values(AccentColor).map(item => (
@@ -176,13 +176,13 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
             </div>
           </div>
 
-          <Separator className="bg-borders-4 h-px" />
+          <Separator className="h-px bg-borders-4" />
 
           {/* Gray Color */}
           <div className="grid grid-cols-[246px_1fr] gap-x-8">
             <div>
-              <span className="text-16 text-foreground-1 font-medium">Gray color</span>
-              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">Select your application gray color.</p>
+              <span className="text-16 font-medium text-foreground-1">Gray color</span>
+              <p className="mt-1.5 text-14 leading-snug text-foreground-3">Select your application gray color.</p>
             </div>
             <div className="flex flex-wrap gap-1.5">
               {Object.values(GrayColor).map(item => (
diff --git a/packages/ui/src/views/labels/components/label-cell-content.tsx b/packages/ui/src/views/labels/components/label-cell-content.tsx
index a61caf623f..8163ac6d7c 100644
--- a/packages/ui/src/views/labels/components/label-cell-content.tsx
+++ b/packages/ui/src/views/labels/components/label-cell-content.tsx
@@ -1,45 +1,53 @@
 import { FC } from 'react'
 
 import { Accordion, Icon, LabelMarker } from '@/components'
-import { ILabelType, LabelValuesType } from '@/views'
+import { ILabelType, LabelType, LabelValueType } from '@/views'
 import { cn } from '@utils/cn'
 
 export interface LabelCellContentProps {
   label: ILabelType
-  values: LabelValuesType
+  values?: LabelValueType[]
 }
 
 export const LabelCellContent: FC<LabelCellContentProps> = ({ label, values }) => {
-  const value = values?.[label.key]
-  const length = value ? value.length : 0
+  const isWithValues = values?.length && values.length > 0
 
   return (
     <Accordion.Root collapsible type="single">
-      <Accordion.Item value={label.key} isLast disabled={!length}>
+      <Accordion.Item value={label.key} isLast disabled={!isWithValues}>
         <Accordion.Trigger className="max-w-full flex-auto cursor-pointer p-0" hideChevron>
-          <div className={cn('flex gap-x-2.5 items-center max-w-full', { 'pl-[22px]': !length })}>
-            {!!length && (
+          <div className={cn('flex gap-x-2.5 items-center max-w-full', { 'pl-[22px]': !isWithValues })}>
+            {isWithValues && (
               <Icon
                 className="flex-none text-icons-1 transition-all group-hover:text-icons-2 group-data-[state=open]:rotate-180 group-data-[state=open]:text-icons-2"
                 name="arrow-short"
                 size={12}
               />
             )}
-            <LabelMarker inTable label={label.key} color={label.color} value={length ? String(length) : undefined} />
+
+            <LabelMarker
+              label={label.key}
+              color={label.color}
+              type={label.type}
+              counter={isWithValues ? values.length : undefined}
+            />
           </div>
         </Accordion.Trigger>
-        <Accordion.Content className="flex flex-col gap-y-2.5 pb-0 pl-[22px] pt-2.5">
-          {!!value &&
-            value.map(item => (
+
+        {isWithValues && (
+          <Accordion.Content className="flex flex-col gap-y-2.5 pb-0 pl-[22px] pt-2.5">
+            {values.map(item => (
               <LabelMarker
                 key={item.id}
-                inTable
                 label={label.key}
                 color={item?.color || label.color}
                 value={item.value}
+                type={LabelType.STATIC}
+                widthType="balanced"
               />
             ))}
-        </Accordion.Content>
+          </Accordion.Content>
+        )}
       </Accordion.Item>
     </Accordion.Root>
   )
diff --git a/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx b/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx
index 6bb83d4ca3..4b306327be 100644
--- a/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx
+++ b/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx
@@ -1,8 +1,7 @@
 import { FC } from 'react'
-import { UseFormRegister } from 'react-hook-form'
 
-import { Button, Icon, Input, Select, SelectContent, SelectItem } from '@/components'
-import { ColorsEnum, CreateLabelFormFields, TranslationStore } from '@/views'
+import { Button, Icon, Input, InputProps, Select, SelectContent, SelectItem, SelectProps } from '@/components'
+import { cn, ColorsEnum, TranslationStore } from '@/views'
 
 const SelectColorMarker = {
   [ColorsEnum.RED]: 'bg-label-foreground-red',
@@ -21,62 +20,60 @@ const SelectColorMarker = {
 }
 
 interface LabelFormColorAndNameGroupProps {
-  name: string
-  colorValue: ColorsEnum
-  handleColorChange: (color: ColorsEnum) => void
-  colorError?: string
-  nameError?: string
+  className?: string
   isValue?: boolean
   useTranslationStore: () => TranslationStore
-  register: UseFormRegister<CreateLabelFormFields>
-  registerName: keyof CreateLabelFormFields
   handleDeleteValue?: () => void
+  selectProps?: SelectProps
+  inputProps?: InputProps
 }
 
 export const LabelFormColorAndNameGroup: FC<LabelFormColorAndNameGroupProps> = ({
-  name,
-  colorValue,
-  handleColorChange,
-  colorError,
-  nameError,
+  className,
   isValue = false,
   useTranslationStore,
-  register,
-  registerName,
-  handleDeleteValue
+  handleDeleteValue,
+  selectProps,
+  inputProps
 }) => {
   const { t } = useTranslationStore()
 
+  const isWithDeleteButton = isValue && !!handleDeleteValue
+
   return (
-    <div className="flex gap-x-2.5">
-      <div className="w-32 flex-none">
-        <Select name={`color-${name}`} value={colorValue} onValueChange={handleColorChange} error={colorError}>
-          <SelectContent>
-            {Object.values(ColorsEnum).map(color => (
-              <SelectItem key={color} value={color}>
-                <div className="flex max-w-full items-center gap-x-1.5">
-                  <div className={`size-2 rounded-full ${SelectColorMarker[color]}`} />
-                  <span className="truncate">{color}</span>
-                </div>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+    <div
+      className={cn(
+        'grid grid-cols-[8rem_1fr] gap-x-2.5',
+        isWithDeleteButton && 'grid-cols-[8rem_1fr_auto]',
+        className
+      )}
+    >
+      <Select {...selectProps}>
+        <SelectContent>
+          {Object.values(ColorsEnum).map(color => (
+            <SelectItem key={color} value={color}>
+              <div className="flex max-w-full items-center gap-x-1.5">
+                <div className={`size-2 min-h-2 min-w-2 rounded-full ${SelectColorMarker[color]}`} />
+                <span className="truncate text-foreground-3">{color}</span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
       <Input
-        wrapperClassName="flex-1"
-        {...register(registerName)}
         placeholder={
           isValue
             ? t('views:labelData.form.colorValuePlaceholder', 'Enter value name')
             : t('views:labelData.form.colorLabelPlaceholder', 'Enter label name')
         }
-        error={nameError}
         size="md"
+        {...inputProps}
       />
-      {isValue && !!handleDeleteValue && (
+
+      {isWithDeleteButton && (
         <Button
-          className="mx-[-9px] h-9 flex-none text-icons-1 hover:text-icons-2"
+          className="size-4 flex-none self-center text-icons-1 hover:text-icons-2"
           variant="custom"
           size="icon"
           onClick={handleDeleteValue}
diff --git a/packages/ui/src/views/labels/components/labels-list-view.tsx b/packages/ui/src/views/labels/components/labels-list-view.tsx
index f5a25c615e..7e19c3e191 100644
--- a/packages/ui/src/views/labels/components/labels-list-view.tsx
+++ b/packages/ui/src/views/labels/components/labels-list-view.tsx
@@ -11,7 +11,7 @@ import {
   TableHeader,
   TableRow
 } from '@/components'
-import { ILabelsStore, ILabelType, LabelValuesType, TranslationStore } from '@/views'
+import { cn, ILabelsStore, ILabelType, LabelValuesType, TranslationStore } from '@/views'
 
 import { LabelCellContent } from './label-cell-content'
 
@@ -20,11 +20,14 @@ export interface LabelsListViewProps {
   labels: ILabelType[]
   handleEditLabel: (label: ILabelType) => void
   handleDeleteLabel: (identifier: string) => void
-  isDirtyList: boolean
   handleResetQueryAndPages: () => void
   searchQuery: string | null
   values: LabelValuesType
   useLabelsStore: () => ILabelsStore
+  /**
+   * When the widthType is set to 'small', 'name' column is bigger and 'description' column is smaller
+   */
+  widthType?: 'default' | 'small'
 }
 
 export const LabelsListView: FC<LabelsListViewProps> = ({
@@ -35,7 +38,8 @@ export const LabelsListView: FC<LabelsListViewProps> = ({
   searchQuery,
   handleResetQueryAndPages,
   values,
-  useLabelsStore
+  useLabelsStore,
+  widthType = 'default'
 }) => {
   const { t } = useTranslationStore()
   const { space_ref, repo_ref } = useLabelsStore!()
@@ -51,10 +55,7 @@ export const LabelsListView: FC<LabelsListViewProps> = ({
             t('views:noData.checkSpelling', 'Check your spelling and filter options,'),
             t('views:noData.changeSearch', 'or search for a different keyword.')
           ]}
-          primaryButton={{
-            label: t('views:noData.clearSearch', 'Clear search'),
-            onClick: handleResetQueryAndPages
-          }}
+          primaryButton={{ label: t('views:noData.clearSearch', 'Clear search'), onClick: handleResetQueryAndPages }}
         />
       )
     }
@@ -65,31 +66,33 @@ export const LabelsListView: FC<LabelsListViewProps> = ({
         iconName="no-data-branches"
         title={t('views:noData.labels', 'No labels yet')}
         description={[t('views:noData.createLabel', 'Create a new label to get started.')]}
-        primaryButton={{
-          label: t('views:projectSettings.newLabels', 'Create label'),
-          to: 'create'
-        }}
+        primaryButton={{ label: t('views:projectSettings.newLabels', 'Create label'), to: 'create' }}
       />
     )
   }
 
+  const isSmallWidth = widthType === 'small'
+
   return (
     <Table tableClassName="table-fixed" variant="asStackedList">
       <TableHeader>
         <TableRow>
-          <TableHead>
+          <TableHead className={cn('w-1/4', { 'w-4/12': isSmallWidth })}>
             <span className="pl-[22px]">{t('views:labelData.table.name', 'Name')}</span>
           </TableHead>
-          <TableHead>{t('views:labelData.table.created', 'Created in')}</TableHead>
-          <TableHead>{t('views:labelData.table.description', 'Description')}</TableHead>
-          <TableHead></TableHead>
+          <TableHead className="w-1/4">{t('views:labelData.table.created', 'Created in')}</TableHead>
+          <TableHead className={cn('w-1/2', { 'w-5/12': isSmallWidth })}>
+            {t('views:labelData.table.description', 'Description')}
+          </TableHead>
+          <TableHead className="w-[54px]"></TableHead>
         </TableRow>
       </TableHeader>
+
       <TableBody>
         {labels.map(label => (
-          <TableRow key={label.key}>
-            <TableCell className="w-1/4 !py-3">
-              <LabelCellContent label={label} values={values} />
+          <TableRow key={label.id}>
+            <TableCell className={cn('w-1/4 !py-3', { 'w-4/12': isSmallWidth })}>
+              <LabelCellContent label={label} values={values?.[label.key]} />
             </TableCell>
             <TableCell className="w-1/4 !py-3.5 leading-none">
               <span className="inline-flex h-4 max-w-full items-center gap-x-1 rounded bg-background-8 px-1.5 text-12 leading-4 text-foreground-8">
@@ -101,8 +104,8 @@ export const LabelsListView: FC<LabelsListViewProps> = ({
                 <span className="truncate">{label.scope === 0 ? (repo_ref ?? '') : (space_ref ?? '')}</span>
               </span>
             </TableCell>
-            <TableCell className="w-1/2 !py-3">
-              <span className="text-sm text-foreground-3">{label?.description || ''}</span>
+            <TableCell className={cn('w-1/2 !py-3', { 'w-5/12': isSmallWidth })}>
+              <span className="line-clamp-3 break-words text-sm text-foreground-3">{label?.description || ''}</span>
             </TableCell>
             <TableCell className="w-[54px] !py-2 text-right">
               <MoreActionsTooltip
diff --git a/packages/ui/src/views/labels/label-form-page.tsx b/packages/ui/src/views/labels/label-form-page.tsx
index beae9298a3..576fdefc4e 100644
--- a/packages/ui/src/views/labels/label-form-page.tsx
+++ b/packages/ui/src/views/labels/label-form-page.tsx
@@ -17,6 +17,7 @@ import {
   SkeletonForm
 } from '@/components'
 import {
+  cn,
   ColorsEnum,
   CreateLabelFormFields,
   createLabelFormSchema,
@@ -39,6 +40,7 @@ export interface LabelFormPageProps {
   onFormCancel: () => void
   error?: string
   labelId?: string
+  className?: string
 }
 
 export const LabelFormPage: FC<LabelFormPageProps> = ({
@@ -49,7 +51,8 @@ export const LabelFormPage: FC<LabelFormPageProps> = ({
   isDataLoading,
   onFormCancel,
   error,
-  labelId
+  labelId,
+  className
 }) => {
   const { t } = useTranslationStore()
   const { values: storeValues, labels: storeLabels } = useLabelsStore()
@@ -65,12 +68,7 @@ export const LabelFormPage: FC<LabelFormPageProps> = ({
 
     if (!currentLabel) return null
 
-    const currentValues =
-      storeValues?.[currentLabel.key]?.map(({ value, color, id }) => ({
-        value,
-        color,
-        id
-      })) ?? []
+    const currentValues = storeValues?.[currentLabel.key]?.map(({ value, color, id }) => ({ value, color, id })) ?? []
 
     return {
       id: currentLabel.id,
@@ -108,10 +106,11 @@ export const LabelFormPage: FC<LabelFormPageProps> = ({
     reset({ ...fullLabelData })
   }, [fullLabelData, reset])
 
-  const isDynamicValue = watch('type') === LabelType.DYNAMIC
+  const type = watch('type')
   const values = watch('values')
   const key = watch('key')
   const color = watch('color')
+  const isDynamicValue = watch('type') === LabelType.DYNAMIC
 
   const handleDynamicChange = (val: boolean) => {
     setValue('type', val ? LabelType.DYNAMIC : LabelType.STATIC)
@@ -121,7 +120,7 @@ export const LabelFormPage: FC<LabelFormPageProps> = ({
     setValue('color', val)
   }
 
-  const handleValueColorChange = (idx: number) => (val: ColorsEnum) => {
+  const makeHandleValueColorChange = (idx: number) => (val: ColorsEnum) => {
     const newValues = values.map((item, index) => (index === idx ? { ...item, color: val } : item))
     setValue('values', newValues)
   }
@@ -132,13 +131,7 @@ export const LabelFormPage: FC<LabelFormPageProps> = ({
       return
     }
 
-    setValue('values', [
-      ...values,
-      {
-        color,
-        value: ''
-      }
-    ])
+    setValue('values', [...values, { color, value: '' }])
   }
 
   const handleDeleteValue = (idx: number) => {
@@ -159,109 +152,118 @@ export const LabelFormPage: FC<LabelFormPageProps> = ({
   }
 
   return (
-    <SandboxLayout.Content className="mx-auto w-[610px]">
+    <SandboxLayout.Content className={cn('!flex-none', className)}>
       <h1 className="mb-10 text-2xl font-medium text-foreground-1">
         {labelId
           ? t('views:labelData.form.editTitle', 'Label details')
           : t('views:labelData.form.createTitle', 'Create a label')}
       </h1>
-      {isDataLoading ? (
-        <SkeletonForm />
-      ) : (
+
+      {isDataLoading && <SkeletonForm />}
+
+      {!isDataLoading && (
         <FormWrapper className="gap-y-10" onSubmit={handleSubmit(onSubmit)}>
           <Fieldset>
             <ControlGroup>
-              <Label className="mb-2.5" color="secondary" htmlFor="name-label">
+              <Label className="mb-2.5" color="secondary" htmlFor="label-name">
                 {t('views:labelData.form.labelName', 'Label name')}
               </Label>
+
               <LabelFormColorAndNameGroup
-                name="label"
-                colorValue={watch('color')}
-                handleColorChange={handleLabelColorChange}
-                colorError={errors.color?.message?.toString()}
-                nameError={errors.key?.message?.toString()}
                 useTranslationStore={useTranslationStore}
-                register={register}
-                registerName="key"
-              />
-            </ControlGroup>
-            <ControlGroup>
-              <Input
-                {...register('description')}
-                placeholder={t('views:repos.descriptionPlaceholder', 'Enter a description')}
-                label={t('views:repos.description', 'Description')}
-                name="description"
-                error={errors.description?.message?.toString()}
-                size="md"
-                optional
+                selectProps={{
+                  name: 'color-label',
+                  onValueChange: handleLabelColorChange,
+                  value: color,
+                  error: errors.color?.message?.toString()
+                }}
+                inputProps={{
+                  id: 'label-name',
+                  ...register('key'),
+                  error: errors.key?.message?.toString(),
+                  autoFocus: !key
+                }}
               />
             </ControlGroup>
+
+            <Input
+              {...register('description')}
+              placeholder={t('views:repos.descriptionPlaceholder', 'Enter a short description for the label')}
+              label={t('views:repos.description', 'Description')}
+              name="description"
+              id="description"
+              error={errors.description?.message?.toString()}
+              size="md"
+              optional
+            />
+
             <ControlGroup>
-              <Label className="mb-2.5" color="secondary" htmlFor="name-value-1" optional>
+              <Label className="mb-2.5" color="secondary" optional>
                 {t('views:labelData.form.valueName', 'Label value')}
               </Label>
-              <div className="flex flex-col gap-y-5">
-                {values.map((value, idx) => (
-                  <LabelFormColorAndNameGroup
-                    key={idx}
-                    name={`value-${idx}`}
-                    colorValue={value.color}
-                    handleColorChange={handleValueColorChange(idx)}
-                    colorError={errors.values?.[idx]?.color?.message?.toString()}
-                    nameError={errors.values?.[idx]?.value?.message?.toString()}
-                    useTranslationStore={useTranslationStore}
-                    register={register}
-                    registerName={`values.${idx}.value` as keyof CreateLabelFormFields}
-                    handleDeleteValue={() => handleDeleteValue(idx)}
-                    isValue
-                  />
-                ))}
-              </div>
+              {values.map((value, idx) => (
+                <LabelFormColorAndNameGroup
+                  isValue
+                  key={idx}
+                  /**
+                   * It is important to keep the margin-top 20px to allow room for error messages.
+                   */
+                  className="mt-5 first-of-type:mt-0"
+                  useTranslationStore={useTranslationStore}
+                  handleDeleteValue={() => handleDeleteValue(idx)}
+                  selectProps={{
+                    name: `value-${idx}`,
+                    value: value.color,
+                    error: errors.values?.[idx]?.color?.message?.toString(),
+                    onValueChange: makeHandleValueColorChange(idx)
+                  }}
+                  inputProps={{
+                    ...register(`values.${idx}.value` as keyof CreateLabelFormFields),
+                    error: errors.values?.[idx]?.value?.message?.toString()
+                  }}
+                />
+              ))}
+
               <Button
-                className={`h-auto gap-x-1 self-start p-0 ${!!values.length && 'mt-5'}`}
+                className="mt-3.5 h-auto gap-x-1 self-start p-0"
                 variant="link_accent"
                 size="md_split"
-                onClick={() => handleAddValue()}
+                onClick={handleAddValue}
               >
                 <Icon name="bold-plus" size={10} />
                 {t('views:labelData.form.addValue', 'Add a value')}
               </Button>
             </ControlGroup>
-            <ControlGroup>
-              <Option
-                control={<Checkbox checked={isDynamicValue} onCheckedChange={handleDynamicChange} id="type" />}
-                id="type"
-                label={t('views:labelData.form.allowUsersCheckboxLabel', 'Allow users to add values')}
-              />
-            </ControlGroup>
+
+            <Option
+              control={<Checkbox checked={isDynamicValue} onCheckedChange={handleDynamicChange} id="type" />}
+              id="type"
+              label={t('views:labelData.form.allowUsersCheckboxLabel', 'Allow users to add values')}
+            />
           </Fieldset>
 
-          <div className="mt-1 flex flex-col gap-y-5">
+          <section className="mt-1 flex flex-col gap-y-5">
             <h3 className="text-sm leading-none text-foreground-2">
               {t('views:labelData.form.previewLabel', 'Label preview')}
             </h3>
+
             <div className="flex flex-col items-start gap-y-2.5">
+              <LabelMarker
+                color={color}
+                label={key.length ? key : t('views:labelData.form.labelName', 'Label name')}
+                type={type}
+              />
               {values.map((value, idx) => (
                 <LabelMarker
                   key={`${value.value}-${idx}`}
+                  type={LabelType.STATIC}
                   color={value.color}
                   label={key.length ? key : t('views:labelData.form.labelName', 'Label name')}
                   value={value.value.length ? value.value : t('views:labelData.form.valueName', 'Label value')}
                 />
               ))}
-              {(!values.length || isDynamicValue) && (
-                <LabelMarker
-                  color={color}
-                  label={key.length ? key : t('views:labelData.form.labelName', 'Label name')}
-                  value={
-                    isDynamicValue
-                      ? t('views:labelData.form.previewDynamicValue', '*can be added by users*')
-                      : undefined
-                  }
-                />
-              )}
             </div>
-          </div>
+          </section>
 
           {!!error?.length && (
             <Alert.Container variant="destructive">
@@ -272,11 +274,11 @@ export const LabelFormPage: FC<LabelFormPageProps> = ({
           )}
 
           <Fieldset>
-            <ButtonGroup>
+            <ButtonGroup spacing="3">
               <Button type="submit" disabled={!isValid || isLoading}>
                 {isLoading ? t('views:repos.saving', 'Saving…') : t('views:repos.save', 'Save')}
               </Button>
-              <Button type="button" variant="outline" onClick={onFormCancel}>
+              <Button type="reset" variant="outline" onClick={onFormCancel}>
                 {t('views:repos.cancel', 'Cancel')}
               </Button>
             </ButtonGroup>
diff --git a/packages/ui/src/views/labels/labels-list-page.tsx b/packages/ui/src/views/labels/labels-list-page.tsx
index fa07dbb2bf..e9d42591ba 100644
--- a/packages/ui/src/views/labels/labels-list-page.tsx
+++ b/packages/ui/src/views/labels/labels-list-page.tsx
@@ -1,43 +1,34 @@
 import { FC, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 
-import {
-  Button,
-  Checkbox,
-  ListActions,
-  Option,
-  PaginationComponent,
-  SearchBox,
-  SkeletonList,
-  Spacer
-} from '@/components'
+import { Button, Checkbox, ListActions, Option, PaginationComponent, SearchBox, SkeletonList } from '@/components'
 import { useDebounceSearch } from '@/hooks'
-import { ILabelsStore, ILabelType, SandboxLayout, TranslationStore } from '@/views'
+import { ILabelsStore, SandboxLayout, TranslationStore } from '@/views'
 
-import { LabelsListView } from './components/labels-list-view'
+import { LabelsListView, LabelsListViewProps } from './components/labels-list-view'
 
 export interface LabelsListPageProps {
   useTranslationStore: () => TranslationStore
   useLabelsStore: () => ILabelsStore
   createdIn?: string
-  handleEditLabel: (label: ILabelType) => void
-  handleDeleteLabel: (identifier: string) => void
   showSpacer?: boolean
   searchQuery: string | null
   setSearchQuery: (query: string | null) => void
   isLoading: boolean
   isRepository?: boolean
+  className?: string
+  labelsListViewProps: Pick<LabelsListViewProps, 'handleDeleteLabel' | 'handleEditLabel' | 'widthType'>
 }
 
 export const LabelsListPage: FC<LabelsListPageProps> = ({
   useTranslationStore,
   useLabelsStore,
-  handleEditLabel,
-  handleDeleteLabel,
   searchQuery,
   setSearchQuery,
   isLoading,
-  isRepository = false
+  isRepository = false,
+  className,
+  labelsListViewProps
 }) => {
   const { t } = useTranslationStore()
   const {
@@ -70,68 +61,56 @@ export const LabelsListPage: FC<LabelsListPageProps> = ({
 
   return (
     <SandboxLayout.Main>
-      <SandboxLayout.Content className="px-0">
-        <h1 className="text-2xl font-medium text-foreground-1">{t('views:labelData.title', 'Labels')}</h1>
-        <Spacer size={6} />
+      <SandboxLayout.Content className={className}>
+        <h1 className="mb-6 text-2xl font-medium text-foreground-1">{t('views:labelData.title', 'Labels')}</h1>
+
         {isRepository && (
           <Option
             className="mb-[18px]"
             control={
-              <Checkbox
-                checked={getParentScopeLabels}
-                onCheckedChange={setGetParentScopeLabels}
-                id="show-parent-labels"
-              />
+              <Checkbox checked={getParentScopeLabels} onCheckedChange={setGetParentScopeLabels} id="parent-labels" />
             }
-            id="show-parent-labels"
+            id="parent-labels"
             label={t('views:labelData.showParentLabels', 'Show labels from parent scopes')}
           />
         )}
 
         {(!!spaceLabels.length || (!spaceLabels.length && isDirtyList)) && (
-          <>
-            <ListActions.Root>
-              <ListActions.Left>
-                <SearchBox.Root
-                  width="full"
-                  className="max-w-96"
-                  value={searchInput}
-                  handleChange={handleInputChange}
-                  placeholder={t('views:repos.search', 'Search')}
-                />
-              </ListActions.Left>
-              <ListActions.Right>
-                <Button asChild>
-                  <Link to="create">{t('views:labelData.newLabel', 'New label')}</Link>
-                </Button>
-              </ListActions.Right>
-            </ListActions.Root>
-          </>
+          <ListActions.Root>
+            <ListActions.Left>
+              <SearchBox.Root
+                width="full"
+                className="max-w-96"
+                value={searchInput}
+                handleChange={handleInputChange}
+                placeholder={t('views:repos.search', 'Search')}
+              />
+            </ListActions.Left>
+            <ListActions.Right>
+              <Button asChild>
+                <Link to="create">{t('views:labelData.newLabel', 'New label')}</Link>
+              </Button>
+            </ListActions.Right>
+          </ListActions.Root>
         )}
-        <Spacer size={5} />
-        {isLoading ? (
-          <SkeletonList />
-        ) : (
-          <LabelsListView
-            labels={spaceLabels}
-            useLabelsStore={useLabelsStore}
-            handleDeleteLabel={handleDeleteLabel}
-            handleEditLabel={handleEditLabel}
-            useTranslationStore={useTranslationStore}
-            isDirtyList={isDirtyList}
-            handleResetQueryAndPages={handleResetQueryAndPages}
-            searchQuery={searchQuery}
-            values={spaceValues}
-          />
+
+        {isLoading && <SkeletonList className="mb-8 mt-5" />}
+
+        {!isLoading && (
+          <div className="mb-8 mt-5">
+            <LabelsListView
+              {...labelsListViewProps}
+              labels={spaceLabels}
+              useLabelsStore={useLabelsStore}
+              useTranslationStore={useTranslationStore}
+              handleResetQueryAndPages={handleResetQueryAndPages}
+              searchQuery={searchQuery}
+              values={spaceValues}
+            />
+          </div>
         )}
 
-        <Spacer size={8} />
-        <PaginationComponent
-          totalPages={totalPages}
-          currentPage={page}
-          goToPage={(pageNum: number) => setPage(pageNum)}
-          t={t}
-        />
+        <PaginationComponent totalPages={totalPages} currentPage={page} goToPage={setPage} t={t} />
       </SandboxLayout.Content>
     </SandboxLayout.Main>
   )
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
index 99c9e60af5..0f469ecffe 100644
--- a/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
+++ b/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
@@ -54,7 +54,7 @@ export const ProfileKeysList: FC<ProfileKeysListProps> = ({
               <TableRow key={key.identifier}>
                 <TableCell className="content-center">
                   <div className="inline-flex items-center gap-x-2.5">
-                    <Icon name="ssh-key" size={32} className="bg-background-8 text-foreground-2 rounded-md" />
+                    <Icon name="ssh-key" size={32} className="rounded-md bg-background-8 text-foreground-2" />
                     <div className="flex flex-col">
                       <span className="block w-[200px] truncate font-medium text-foreground-1">{key.identifier}</span>
                       <span className="w-[200px] truncate text-12 text-foreground-3">{key.fingerprint}</span>
diff --git a/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx b/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx
index 80153b6893..c26b1742d1 100644
--- a/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx
+++ b/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx
@@ -37,7 +37,7 @@ export const BranchSelector: FC<BranchSelectorProps> = ({
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <Button
-          className="flex items-center gap-1.5 overflow-hidden px-3 data-[state=open]:border-borders-9 bg-input-background"
+          className="flex items-center gap-1.5 overflow-hidden bg-input-background px-3 data-[state=open]:border-borders-9"
           variant="outline"
           size={buttonSize}
         >
diff --git a/packages/ui/src/views/repo/pull-request/components/labels/label-value-selector.tsx b/packages/ui/src/views/repo/pull-request/components/labels/label-value-selector.tsx
index 84a1925494..24141e697f 100644
--- a/packages/ui/src/views/repo/pull-request/components/labels/label-value-selector.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/labels/label-value-selector.tsx
@@ -2,7 +2,7 @@ import { FC, useMemo, useState } from 'react'
 
 import { Button, DropdownMenu, Icon, LabelMarker, ScrollArea, SearchBox } from '@/components'
 import { useDebounceSearch } from '@/hooks'
-import { HandleAddLabelType, LabelValueType, TranslationStore } from '@/views'
+import { HandleAddLabelType, LabelType, LabelValueType, TranslationStore } from '@/views'
 
 import { LabelsWithValueType } from './pull-request-labels-header'
 
@@ -58,35 +58,20 @@ export const LabelValueSelector: FC<LabelValueSelectorProps> = ({
 
         return acc
       },
-      {
-        values: [],
-        isAllowAddNewValue: true
-      }
+      { values: [], isAllowAddNewValue: true }
     )
   }, [label?.values, searchState])
 
   const handleOnSelect = (value: LabelValueType) => (e: Event) => {
     e.preventDefault()
 
-    handleAddOrRemoveLabel(
-      {
-        label_id: label.id,
-        value_id: value.id
-      },
-      label.selectedValueId === value.id
-    )
+    handleAddOrRemoveLabel({ label_id: label.id, value_id: value.id }, label.selectedValueId === value.id)
   }
 
   const handleAddNewValue = () => {
     if (!searchState.length) return
 
-    handleAddOrRemoveLabel(
-      {
-        label_id: label.id,
-        value: searchState
-      },
-      false
-    )
+    handleAddOrRemoveLabel({ label_id: label.id, value: searchState }, false)
   }
 
   return (
@@ -105,10 +90,9 @@ export const LabelValueSelector: FC<LabelValueSelectorProps> = ({
           showOnFocus
           hasSearchIcon={false}
         >
-          <div className="max-w-20 pr-2 leading-none">
-            <LabelMarker color={label.color} label={label.key} />
-          </div>
+          <LabelMarker color={label.color} label={label.key} type={LabelType.STATIC} className="max-w-20 pr-2" />
         </SearchBox.Root>
+
         <Button
           className="absolute right-2 top-1.5 z-20 text-icons-1 hover:text-icons-2"
           size="icon"
@@ -123,8 +107,9 @@ export const LabelValueSelector: FC<LabelValueSelectorProps> = ({
       <ScrollArea viewportClassName="max-h-[224px]">
         {values.map(value => (
           <DropdownMenu.Item key={value.id} onSelect={handleOnSelect(value)}>
-            <div className="relative w-full pr-9 leading-none">
-              <LabelMarker color={value.color} label={label.key} value={value.value} />
+            <div className="relative w-full pr-7">
+              <LabelMarker color={value.color} label={label.key} value={value.value} type={LabelType.STATIC} />
+
               {label.selectedValueId === value.id && (
                 <Icon className="absolute right-0 top-1 text-icons-2" name="tick" size={12} />
               )}
@@ -133,31 +118,27 @@ export const LabelValueSelector: FC<LabelValueSelectorProps> = ({
         ))}
 
         {isAllowAddNewValue && !!label?.isCustom && (
-          <div className="flex items-center justify-between gap-x-5 px-2 py-[7px]">
-            <LabelMarker color={label.color} label={label.key} value={searchState} />
-            <Button
-              className="h-auto flex-none gap-x-1 p-0"
-              variant="link_accent"
-              size="md_split"
-              onClick={handleAddNewValue}
-            >
-              <Icon name="bold-plus" size={10} />
+          <>
+            <span className="px-1 pb-1.5 pt-2 leading-[1.125rem] text-foreground-2">
               {t('views:pullRequests.addValue', 'Add new value')}
-            </Button>
-          </div>
+            </span>
+
+            <DropdownMenu.Item onSelect={handleAddNewValue}>
+              <LabelMarker color={label.color} label={label.key} value={searchState} type={LabelType.STATIC} />
+            </DropdownMenu.Item>
+          </>
         )}
 
         {!values.length && !label?.isCustom && (
-          <div className="flex w-full items-center justify-between gap-x-5">
-            <LabelMarker color={label.color} label={label.key} value={searchState} />
-            <span className="flex-none text-foreground-4">{t('views:pullRequests.noLabels', 'No labels found')}</span>
-          </div>
+          <span className="block flex-none gap-x-5 px-2 py-[7px] text-foreground-4">
+            {t('views:pullRequests.labelNotFound', 'Label not found')}
+          </span>
         )}
 
         {!values.length && !!label?.isCustom && !isAllowAddNewValue && (
-          <div className="px-5 py-4 text-center">
-            <span className="leading-tight text-foreground-2">{t('views:pullRequests.addValue', 'Add new value')}</span>
-          </div>
+          <span className="block px-5 py-4 text-center leading-tight text-foreground-2">
+            {t('views:pullRequests.addValue', 'Add new value')}
+          </span>
         )}
       </ScrollArea>
     </>
diff --git a/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-header.tsx b/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-header.tsx
index 0baa5348b2..1267fa0f59 100644
--- a/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-header.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-header.tsx
@@ -26,17 +26,19 @@ interface LabelsHeaderProps {
   labelsValues: LabelValuesType
   selectedLabels: LabelAssignmentType[]
   addLabel?: (data: HandleAddLabelType) => void
+  editLabels?: () => void
   removeLabel?: (id: number) => void
   searchQuery?: string
   setSearchQuery?: (query: string) => void
   useTranslationStore: () => TranslationStore
 }
 
-const LabelsHeader = ({
+export const LabelsHeader = ({
   labelsList,
   labelsValues,
   selectedLabels,
   addLabel,
+  editLabels,
   removeLabel,
   searchQuery,
   setSearchQuery,
@@ -64,17 +66,11 @@ const LabelsHeader = ({
       }
 
       if (isCustom) {
-        res = {
-          ...res,
-          isCustom: true
-        }
+        res = { ...res, isCustom: true }
       }
 
       if (labelValues) {
-        res = {
-          ...res,
-          values: labelValues
-        }
+        res = { ...res, values: labelValues }
       }
 
       return res
@@ -107,8 +103,9 @@ const LabelsHeader = ({
   }
 
   return (
-    <div className="flex items-center justify-between">
-      <span className="text-14 font-medium text-foreground-1">{t('views:pullRequests.labels')}</span>
+    <article className="flex items-center justify-between">
+      <h5 className="text-14 font-medium text-foreground-1">{t('views:pullRequests.labels')}</h5>
+
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
           <Button
@@ -119,6 +116,7 @@ const LabelsHeader = ({
             <Icon name="vertical-ellipsis" size={12} />
           </Button>
         </DropdownMenu.Trigger>
+
         <DropdownMenu.Content
           className="w-80"
           align="end"
@@ -126,14 +124,16 @@ const LabelsHeader = ({
           alignOffset={10}
           onCloseAutoFocus={event => event.preventDefault()} // Prevent focus on hidden content
         >
-          {labelWithValuesToShow ? (
+          {labelWithValuesToShow && (
             <LabelValueSelector
               useTranslationStore={useTranslationStore}
               label={labelWithValuesToShow}
               handleAddOrRemoveLabel={handleAddOrRemoveLabel}
               onClose={handleCloseValuesView}
             />
-          ) : (
+          )}
+
+          {!labelWithValuesToShow && (
             <>
               {!!setSearchQuery && (
                 <>
@@ -144,28 +144,29 @@ const LabelsHeader = ({
                       value={search}
                       handleChange={handleSearchChange}
                       showOnFocus
+                      hasSearchIcon
                     />
                   </div>
                   <DropdownMenu.Separator />
                 </>
               )}
 
-              {labelsListWithValues.length ? (
+              {!!labelsListWithValues.length && (
                 <ScrollArea viewportClassName="max-h-[224px]">
                   {labelsListWithValues?.map((label, idx) => (
                     <DropdownMenu.Item key={`${label.id}-${idx}`} onSelect={handleOnSelect(label)}>
-                      <div className="relative flex w-full flex-col items-start justify-start gap-y-1.5 pr-9">
-                        <div className="flex items-center gap-x-2">
-                          <LabelMarker
-                            color={label.color}
-                            label={label.key}
-                            value={label?.values?.length.toString() || (label.isCustom ? '+' : undefined)}
-                          />
-                          {!!label.isCustom && <Icon className="flex-none text-icons-4" name="circle-plus" size={11} />}
-                        </div>
+                      <div className="relative grid w-full gap-y-1.5 pr-7">
+                        <LabelMarker
+                          color={label.color}
+                          label={label.key}
+                          type={label.type}
+                          counter={label?.values?.length}
+                        />
+
                         {!!label?.description && (
                           <span className="w-full truncate text-foreground-4">{label.description}</span>
                         )}
+
                         {label.isSelected && (
                           <Icon className="absolute right-0 top-1 text-icons-2" name="tick" size={12} />
                         )}
@@ -173,19 +174,25 @@ const LabelsHeader = ({
                     </DropdownMenu.Item>
                   ))}
                 </ScrollArea>
-              ) : (
-                <div className="px-5 py-4 text-center">
-                  <span className="leading-tight text-foreground-2">
-                    {t('views:pullRequests.noLabels', 'No labels found')}
-                  </span>
-                </div>
               )}
+
+              {!labelsListWithValues.length && (
+                <span className="block px-5 py-4 text-center leading-tight text-foreground-2">
+                  {t('views:pullRequests.noLabels', 'No labels found')}
+                </span>
+              )}
+
+              <DropdownMenu.Separator />
+
+              <div className="p-2">
+                <Button className="h-auto p-0 text-foreground-8" variant="link" onClick={editLabels}>
+                  {t('views:pullRequests.editLabels', 'Edit labels')}
+                </Button>
+              </div>
             </>
           )}
         </DropdownMenu.Content>
       </DropdownMenu.Root>
-    </div>
+    </article>
   )
 }
-
-export { LabelsHeader }
diff --git a/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-list.tsx b/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-list.tsx
index ff08c9ff8d..99bf88af24 100644
--- a/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-list.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-list.tsx
@@ -1,15 +1,17 @@
 import { FC } from 'react'
 
-import { LabelMarker } from '@/components'
-import { PRListLabelType } from '@/views'
+import { LabelMarker, LabelMarkerProps } from '@/components'
+import { LabelType, PRListLabelType } from '@/views'
 import { cn } from '@utils/cn'
 
+type LabelListLabel = PRListLabelType & Pick<LabelMarkerProps, 'onDelete'>
+
 interface LabelsListProps {
-  labels: PRListLabelType[]
+  labels: LabelListLabel[]
   className?: string
 }
 
-const LabelsList: FC<LabelsListProps> = ({ labels, className }) => {
+export const LabelsList: FC<LabelsListProps> = ({ labels, className }) => {
   if (!labels.length) {
     return <span className="text-14 font-medium text-foreground-5">No labels</span>
   }
@@ -17,10 +19,15 @@ const LabelsList: FC<LabelsListProps> = ({ labels, className }) => {
   return (
     <div className={cn('flex flex-wrap gap-1.5', className)}>
       {labels.map(label => (
-        <LabelMarker key={label.key} color={label.color} label={label.key} value={label?.value} />
+        <LabelMarker
+          key={label.key}
+          color={label.color}
+          label={label.key}
+          value={label?.value}
+          onDelete={label.onDelete}
+          type={LabelType.STATIC}
+        />
       ))}
     </div>
   )
 }
-
-export { LabelsList }
diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-item-title.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-item-title.tsx
index 1991dfc735..360db1aa21 100644
--- a/packages/ui/src/views/repo/pull-request/components/pull-request-item-title.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/pull-request-item-title.tsx
@@ -1,58 +1,45 @@
 import { FC } from 'react'
 
-import { Icon, StackedList } from '@/components'
-import { PRListLabelType } from '@/views'
+import { Icon } from '@/components'
+import { PullRequestType } from '@/views'
 import { cn } from '@utils/cn'
 import { LabelsList } from '@views/repo/pull-request/components/labels'
 
 import { getPrState } from '../utils'
 
-const Comments = ({ comments }: { comments: number }) => {
-  return (
-    <div className="flex items-center gap-1">
-      <Icon className="text-icons-7" size={16} name="comments" />
-      <span className="text-12 leading-none text-foreground-1">{comments}</span>
-    </div>
-  )
-}
-
 interface PullRequestItemTitleProps {
-  merged?: number | null
-  isDraft?: boolean
-  state?: string
-  success: boolean
-  title: string
-  comments?: number
-  labels: PRListLabelType[]
+  pullRequest: PullRequestType
 }
 
-export const PullRequestItemTitle: FC<PullRequestItemTitleProps> = ({
-  success,
-  title,
-  labels,
-  state,
-  isDraft,
-  comments,
-  merged
-}) => {
+export const PullRequestItemTitle: FC<PullRequestItemTitleProps> = ({ pullRequest }) => {
+  const { name, labels, state, is_draft: isDraft, comments, merged } = pullRequest
+  const isSuccess = !!merged
+
   return (
-    <div className="flex max-w-full items-center gap-2">
-      <div className="flex max-w-full flex-wrap items-center justify-start gap-1.5">
+    <div className="flex w-full items-center justify-between">
+      <div className="flex max-w-[calc(100%-82px)] items-center justify-start gap-1.5">
         <Icon
           size={14}
           className={cn({
             'text-icons-success': state === 'open' && !isDraft,
             'text-icons-1': state === 'open' && isDraft,
             'text-icons-danger': state === 'closed',
-            'text-icons-merged': success
+            'text-icons-merged': isSuccess
           })}
           name={getPrState(isDraft, merged, state).icon}
         />
 
-        <p className="ml-0.5 mr-1 max-w-[95%] truncate text-16 font-medium leading-snug ">{title}</p>
-        {!!labels.length && <LabelsList labels={labels} />}
+        <p className="ml-0.5 mr-1 truncate text-16 font-medium leading-snug">{name}</p>
+
+        {!!labels.length && <LabelsList labels={labels} className="max-h-5 w-[max(400px,60%)] overflow-hidden" />}
       </div>
-      {!!comments && <StackedList.Field title={<Comments comments={comments} />} right label secondary />}
+
+      {!!comments && (
+        <div className="ml-auto flex items-center gap-1">
+          <Icon className="text-icons-7" size={16} name="comments" />
+          <span className="text-12 leading-none text-foreground-1">{comments}</span>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-list.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-list.tsx
index 3e852161e3..3c7007a665 100644
--- a/packages/ui/src/views/repo/pull-request/components/pull-request-list.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/pull-request-list.tsx
@@ -163,19 +163,7 @@ export const PullRequestList: FC<PullRequestListProps> = ({
               <>
                 <StackedList.Field
                   className="max-w-full gap-1.5"
-                  title={
-                    pullRequest.name && (
-                      <PullRequestItemTitle
-                        isDraft={pullRequest.is_draft}
-                        state={pullRequest.state}
-                        success={!!pullRequest.merged}
-                        title={pullRequest.name}
-                        labels={pullRequest.labels}
-                        comments={pullRequest?.comments}
-                        merged={pullRequest.merged}
-                      />
-                    )
-                  }
+                  title={pullRequest.name && <PullRequestItemTitle pullRequest={pullRequest} />}
                   description={
                     pullRequest.author &&
                     typeof pullRequest.author === 'string' && (
diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-side-bar.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-side-bar.tsx
index bbc64d2758..ea89cab86f 100644
--- a/packages/ui/src/views/repo/pull-request/components/pull-request-side-bar.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/pull-request-side-bar.tsx
@@ -37,6 +37,7 @@ interface PullRequestSideBarProps {
   searchLabelQuery?: string
   setSearchLabelQuery?: (query: string) => void
   addLabel?: (data: HandleAddLabelType) => void
+  editLabels?: () => void
   removeLabel?: (id: number) => void
   useTranslationStore: () => TranslationStore
 }
@@ -59,11 +60,12 @@ const PullRequestSideBar: FC<PullRequestSideBarProps> = ({
   searchLabelQuery,
   setSearchLabelQuery,
   addLabel,
+  editLabels,
   removeLabel,
   useTranslationStore
 }) => {
   return (
-    <div>
+    <>
       <div className="flex flex-col gap-3">
         <ReviewersHeader
           currentUserId={currentUserId}
@@ -90,6 +92,7 @@ const PullRequestSideBar: FC<PullRequestSideBarProps> = ({
           labelsValues={labelsValues}
           selectedLabels={PRLabels}
           addLabel={addLabel}
+          editLabels={editLabels}
           removeLabel={removeLabel}
           searchQuery={searchLabelQuery}
           setSearchQuery={setSearchLabelQuery}
@@ -97,13 +100,14 @@ const PullRequestSideBar: FC<PullRequestSideBarProps> = ({
         />
         <LabelsList
           labels={PRLabels.map(label => ({
+            onDelete: () => removeLabel?.(label.id),
             color: label?.assigned_value?.color || label.color,
             key: label.key,
             value: label?.assigned_value?.value || undefined
           }))}
         />
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-system-label-item.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-system-label-item.tsx
index d594ebf4d8..d53d4818e1 100644
--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-system-label-item.tsx
+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-system-label-item.tsx
@@ -1,17 +1,27 @@
-import { Avatar, AvatarFallback, Icon, Text } from '@components/index'
+import { Avatar, AvatarFallback, Icon } from '@components/index'
 import { LabelMarker } from '@components/label-marker'
 import { getInitials } from '@utils/stringUtils'
-import { ColorsEnum } from '@views/labels'
+import { ColorsEnum, LabelType } from '@views/labels'
 
 import { GeneralPayload, LabelActivity, PayloadAuthor, TypesPullReqActivity } from '../../pull-request-details-types'
 import PullRequestTimelineItem from './pull-request-timeline-item'
 
+const labelActivityToTitleDict: Record<LabelActivity, string> = {
+  assign: 'added',
+  reassign: 'reassigned',
+  unassign: 'removed'
+}
+
 interface PullRequestSystemLabelItemProps {
   payload?: TypesPullReqActivity | undefined
   isLast: boolean
 }
+
 const PullRequestSystemLabelItem: React.FC<PullRequestSystemLabelItemProps> = ({ payload, isLast }) => {
   const data = payload?.payload?.payload as GeneralPayload
+  const labelActivity = data?.type as LabelActivity
+  const author = payload?.payload?.author as PayloadAuthor
+
   return (
     <PullRequestTimelineItem
       key={payload?.id} // Consider using a unique ID if available
@@ -20,33 +30,27 @@ const PullRequestSystemLabelItem: React.FC<PullRequestSystemLabelItemProps> = ({
           avatar: (
             <Avatar className="size-6 rounded-full p-0">
               <AvatarFallback>
-                <Text size={1} color="tertiaryBackground">
+                <span className="text-xs text-foreground-8">
                   {/* TODO: fix fallback string */}
-                  {getInitials(payload?.author?.display_name || '')}
-                </Text>
+                  {getInitials(author?.display_name || '')}
+                </span>
               </AvatarFallback>
             </Avatar>
           ),
-          name: (payload?.payload?.author as PayloadAuthor)?.display_name,
+          name: author?.display_name,
           description: (
-            <Text color="tertiaryBackground">
-              {((payload?.payload?.payload as GeneralPayload)?.type as LabelActivity) === 'assign' ? (
-                <>applied</>
-              ) : (
-                <>
-                  {((payload?.payload?.payload as GeneralPayload)?.type as LabelActivity) === 'reassign'
-                    ? 'reassigned'
-                    : 'removed'}
-                </>
-              )}{' '}
-              label{'  '}
+            <span className="inline-flex items-center">
+              {labelActivityToTitleDict[labelActivity]}
               <LabelMarker
+                className="mx-1.5"
                 key={data?.label as string}
-                color={data?.label_color as ColorsEnum}
+                color={(data?.value_color ?? data?.label_color) as ColorsEnum}
                 label={data?.label as string}
                 value={data?.value as string}
+                type={data?.label_type as LabelType}
               />
-            </Text>
+              label
+            </span>
           )
         }
       ]}
diff --git a/packages/ui/src/views/repo/pull-request/pull-request-list-page.tsx b/packages/ui/src/views/repo/pull-request/pull-request-list-page.tsx
index dd2aebf5f2..2bf521f093 100644
--- a/packages/ui/src/views/repo/pull-request/pull-request-list-page.tsx
+++ b/packages/ui/src/views/repo/pull-request/pull-request-list-page.tsx
@@ -139,12 +139,13 @@ const PullRequestList: FC<PullRequestPageProps> = ({
 
   return (
     <SandboxLayout.Main className="max-w-[1040px]">
-      <SandboxLayout.Content>
+      <SandboxLayout.Content className="max-w-[812px]">
         {showTopBar && (
           <>
-            <Spacer size={2} />
-            <p className="text-24 font-medium leading-snug tracking-tight text-foreground-1">Pull Requests</p>
-            <Spacer size={6} />
+            <h1 className="mb-6 mt-2 text-24 font-medium leading-snug tracking-tight text-foreground-1">
+              Pull Requests
+            </h1>
+
             <ListActions.Root>
               <ListActions.Left>
                 <SearchBox.Root
diff --git a/packages/ui/src/views/repo/repo-list/repo-list-page.tsx b/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
index 5bed6fb3c6..149d8241c4 100644
--- a/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
+++ b/packages/ui/src/views/repo/repo-list/repo-list-page.tsx
@@ -116,12 +116,12 @@ const SandboxRepoListPage: FC<RepoListProps> = ({
           <>
             <Spacer size={8} />
             <div className="flex items-end">
-              <h1 className="text-foreground-1 text-2xl font-medium">
+              <h1 className="text-2xl font-medium text-foreground-1">
                 {t('views:repos.repositories', 'Repositories')}
               </h1>
               {viewManagement.currentView && (
                 <>
-                  <span className="bg-borders-1 mx-2.5 inline-flex h-[18px] w-px" />
+                  <span className="mx-2.5 inline-flex h-[18px] w-px bg-borders-1" />
                   <span className="text-14 text-foreground-3">{viewManagement.currentView.name}</span>
                 </>
               )}
diff --git a/packages/ui/src/views/repo/repo-summary/repo-summary.tsx b/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
index 38cf028840..827973e37f 100644
--- a/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
+++ b/packages/ui/src/views/repo/repo-summary/repo-summary.tsx
@@ -248,7 +248,7 @@ export function RepoSummaryView({
                   right
                   title={
                     <Button
-                      className="border-borders-1 hover:bg-background-3 flex border"
+                      className="flex border border-borders-1 hover:bg-background-3"
                       variant="ghost"
                       size="icon"
                       asChild
diff --git a/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx b/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
index be7a815579..1efafcfdf5 100644
--- a/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
+++ b/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
@@ -165,7 +165,7 @@ export function RepoWebhookList({
                   />
                 </StackedList.Item>
               </TableCell>
-              <TableCell className="content-center cursor-pointer">
+              <TableCell className="cursor-pointer content-center">
                 <Badge
                   size="md"
                   disableHover
@@ -188,7 +188,7 @@ export function RepoWebhookList({
                 </Badge>
               </TableCell>
 
-              <TableCell className="content-center text-right cursor-pointer">
+              <TableCell className="cursor-pointer content-center text-right">
                 <MoreActionsTooltip
                   actions={[
                     {
diff --git a/packages/views/src/components/pipeline-studio/pipeline-studio-footer-bar/pipeline-studio-footer-bar.tsx b/packages/views/src/components/pipeline-studio/pipeline-studio-footer-bar/pipeline-studio-footer-bar.tsx
index ca386aa8b8..4a6f6d31c6 100644
--- a/packages/views/src/components/pipeline-studio/pipeline-studio-footer-bar/pipeline-studio-footer-bar.tsx
+++ b/packages/views/src/components/pipeline-studio/pipeline-studio-footer-bar/pipeline-studio-footer-bar.tsx
@@ -50,7 +50,7 @@ const PipelineStudioFooterBar: React.FC<PipelineStudioFooterBarProps> = (props:
           onClick={() => {
             props.togglePane?.()
           }}
-          className="hover:bg-primary/10 flex h-full cursor-pointer gap-2.5 rounded-md px-2 py-1.5 duration-150 ease-in-out"
+          className="flex h-full cursor-pointer gap-2.5 rounded-md px-2 py-1.5 duration-150 ease-in-out hover:bg-primary/10"
         >
           <div className="flex items-center gap-1.5">
             <Icon
diff --git a/packages/views/src/components/pull-request/pull-request-side-bar.tsx b/packages/views/src/components/pull-request/pull-request-side-bar.tsx
deleted file mode 100644
index fe9b8e5bf2..0000000000
--- a/packages/views/src/components/pull-request/pull-request-side-bar.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { EnumPullReqReviewDecision, PullReqReviewDecision } from './interfaces'
-import ReviewersHeader from './pull-request-reviewers-header'
-import ReviewersList from './pull-request-reviewers-list'
-
-interface PullRequestSideBarProps {
-  reviewers?: {
-    reviewer?: { display_name?: string; id?: number }
-    review_decision?: EnumPullReqReviewDecision
-    sha?: string
-  }[]
-  processReviewDecision: (
-    review_decision: EnumPullReqReviewDecision,
-    reviewedSHA?: string,
-    sourceSHA?: string
-  ) => EnumPullReqReviewDecision | PullReqReviewDecision.outdated
-  pullRequestMetadata?: { source_sha: string }
-  refetchReviewers: () => void
-  handleDelete: (id: number) => void
-  addReviewers?: (id?: number) => void
-  usersList?: { display_name?: string; id?: number; uid?: string }[]
-  currentUserId?: string
-}
-
-const PullRequestSideBar = (props: PullRequestSideBarProps) => {
-  const {
-    usersList,
-    reviewers = [],
-    pullRequestMetadata,
-    processReviewDecision,
-    handleDelete,
-    addReviewers,
-    currentUserId
-  } = props
-
-  return (
-    <div>
-      <div className="flex flex-col gap-3">
-        <ReviewersHeader currentUserId={currentUserId} usersList={usersList} addReviewers={addReviewers} />
-        <ReviewersList
-          reviewers={reviewers}
-          pullRequestMetadata={pullRequestMetadata}
-          processReviewDecision={processReviewDecision}
-          handleDelete={handleDelete}
-        />
-      </div>
-    </div>
-  )
-}
-
-export { PullRequestSideBar }
diff --git a/packages/views/src/index.ts b/packages/views/src/index.ts
index 6ee9dcec97..6353a75428 100644
--- a/packages/views/src/index.ts
+++ b/packages/views/src/index.ts
@@ -21,7 +21,6 @@ export * from './components/pull-request/pull-request-overview'
 export * from './components/pull-request/pull-request-panel'
 export * from './components/pull-request/pull-request-comment-box'
 export * from './components/pull-request/pull-request-filters'
-export * from './components/pull-request/pull-request-side-bar'
 export * from './components/pull-request/pull-request-changes'
 export * from './components/pull-request/interfaces-store'