chore: Update display property design

chore: Conflict clean up
Merge branch 'develop' into feat/v5-ui-redesign
2026-01-22 18:18:11 +05:30 · 2026-01-22 16:31:10 +05:30 · 2026-01-22 16:15:19 +05:30 · 2026-01-22 09:35:58 +05:30 · 2026-01-21 11:21:25 +05:30 · 2026-01-20 07:40:30 +05:30
372 changed files with 12293 additions and 10865 deletions
@@ -131,7 +131,7 @@ export default {
  <div
    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
    id="app"
-    class="flex flex-col w-full h-screen min-h-0"
+    class="flex flex-col w-full h-screen min-h-0 bg-n-background"
    :dir="isRTL ? 'rtl' : 'ltr'"
  >
    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
@@ -1,34 +1,11 @@
-<svg width="495" height="384" viewBox="0 0 495 384" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="No Chat History">
-<path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M266.903 0C221.687 0 180.128 15.7196 147.313 42.0198H94.2771C87.3866 42.0198 81.749 47.6925 81.749 54.6257C81.749 61.559 87.3866 67.2317 94.2771 67.2317H121.268H129.178C136.068 67.2317 141.706 72.9043 141.706 79.8376C141.706 83.3 140.294 86.4599 138.023 88.7374C135.759 91.0233 132.619 92.4435 129.178 92.4435H112.303H102.986H57.5281C50.6376 92.4435 45 98.1162 45 105.049C45 111.983 50.6376 117.655 57.5281 117.655H90.071C80.2473 140.886 74.8059 166.446 74.8059 193.291C74.8059 203.031 75.5242 212.603 76.9023 221.957C77.4786 225.865 78.1718 229.739 78.982 233.571C102.618 229.932 127.691 227.008 153.866 224.873L155.837 226.68L157.692 224.571C189.137 222.108 222.144 220.797 256.187 220.797C328.516 220.797 396.201 226.714 454.072 237C456.302 227.268 457.806 217.259 458.516 207.023C458.841 202.485 459 197.905 459 193.291C459 86.5356 372.999 0 266.903 0Z" fill="#43484C"/>
-<path id="Fill 3" fill-rule="evenodd" clip-rule="evenodd" d="M20.2465 91.4282H12.6678C5.7005 91.4282 0 97.1882 0 104.228C0 111.268 5.7005 117.028 12.6678 117.028H20.2465C27.2137 117.028 32.9142 111.268 32.9142 104.228C32.9142 97.1882 27.2137 91.4282 20.2465 91.4282Z" fill="#43484C"/>
-<g id="Group 7">
-<mask id="mask0_201_141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="78" y="219" width="417" height="165">
-<path id="Clip 6" fill-rule="evenodd" clip-rule="evenodd" d="M495 219V384H286.5H78V219H495Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_201_141)">
-<path id="Fill 5" fill-rule="evenodd" clip-rule="evenodd" d="M495 279.775C495 286.675 489.336 292.321 482.413 292.321H402.016C398.559 292.321 395.405 293.734 393.131 296.009C390.849 298.276 389.43 301.421 389.43 304.867C389.43 311.768 395.094 317.413 402.016 317.413H416.954C420.41 317.413 423.566 318.827 425.84 321.102C428.122 323.369 429.54 326.514 429.54 329.96C429.54 336.86 423.876 342.506 416.954 342.506H382.608C350.344 366.662 310.251 380.981 266.802 380.981C174.004 380.981 96.5026 315.699 78 228.695C101.747 225.073 126.937 222.162 153.235 220.038L155.215 221.836L157.079 219.736C188.671 217.286 221.833 215.981 256.036 215.981C328.703 215.981 396.705 221.869 454.847 232.107C452.02 244.302 448.026 256.045 442.991 267.228H482.413C485.879 267.228 489.017 268.642 491.3 270.917C493.582 273.184 495 276.328 495 279.775Z" fill="#34393D"/>
-</g>
-</g>
-<path id="Fill 8" fill-rule="evenodd" clip-rule="evenodd" d="M459 206.12C458.285 216.665 456.771 226.975 454.525 237C396.235 226.404 328.06 220.31 255.208 220.31C220.919 220.31 187.673 221.66 156 224.196L177.965 198.615L212.134 221.028L258.388 208.19L337.959 220.31L372.503 208.19L381.252 220.31L402.126 204.736L421.632 222.707L452.396 198L459 206.12Z" fill="#55575E"/>
-<path id="Fill 10" fill-rule="evenodd" clip-rule="evenodd" d="M344.905 216.502C353.565 203.915 358.526 188.987 358.397 173.012C358.043 128.578 318.46 92.8734 269.986 93.2602C221.512 93.6478 182.505 129.983 182.86 174.416C183.214 218.849 222.798 254.555 271.271 254.168C288.59 254.03 304.7 249.3 318.238 241.253L354.454 249.78L344.905 216.502Z" fill="#686B73"/>
-<path id="Fill 12" fill-rule="evenodd" clip-rule="evenodd" d="M245.029 171.813C245.069 176.862 241.008 180.988 235.959 181.028C230.909 181.069 226.783 177.008 226.743 171.959C226.703 166.909 230.763 162.784 235.813 162.743C240.861 162.703 244.987 166.763 245.029 171.813Z" fill="#BEC0D6"/>
-<path id="Fill 14" fill-rule="evenodd" clip-rule="evenodd" d="M277.942 171.812C277.982 176.862 273.922 180.988 268.872 181.028C263.822 181.068 259.696 177.008 259.657 171.959C259.616 166.909 263.677 162.783 268.726 162.743C273.775 162.703 277.901 166.763 277.942 171.812Z" fill="#BEC0D6"/>
-<path id="Fill 16" fill-rule="evenodd" clip-rule="evenodd" d="M310.856 171.812C310.897 176.861 306.836 180.987 301.786 181.028C296.737 181.068 292.611 177.008 292.571 171.958C292.53 166.908 296.591 162.783 301.641 162.743C306.689 162.702 310.815 166.763 310.856 171.812Z" fill="#BEC0D6"/>
-<path id="Fill 20" fill-rule="evenodd" clip-rule="evenodd" d="M173.714 235.887C173.714 241.693 175.571 247.099 178.763 251.649L175.376 263.789L188.564 260.581C193.523 263.465 199.402 265.143 205.714 265.143C223.388 265.143 237.714 252.044 237.714 235.887C237.714 219.728 223.388 206.629 205.714 206.629C188.041 206.629 173.714 219.728 173.714 235.887Z" fill="url(#paint0_linear_201_141)"/>
-<g id="Frame 148">
-<path id="Fill 26" fill-rule="evenodd" clip-rule="evenodd" d="M189 234.658C189 236.677 190.637 238.314 192.657 238.314C194.676 238.314 196.314 236.677 196.314 234.658C196.314 232.638 194.676 231 192.657 231C190.637 231 189 232.638 189 234.658Z" fill="#0D0D0D"/>
-<path id="Fill 24" fill-rule="evenodd" clip-rule="evenodd" d="M202.314 234.658C202.314 236.677 203.951 238.314 205.971 238.314C207.99 238.314 209.628 236.677 209.628 234.658C209.628 232.638 207.99 231 205.971 231C203.951 231 202.314 232.638 202.314 234.658Z" fill="#0D0D0D"/>
-<path id="Fill 22" fill-rule="evenodd" clip-rule="evenodd" d="M215.629 234.658C215.629 236.677 217.265 238.314 219.285 238.314C221.305 238.314 222.943 236.677 222.943 234.658C222.943 232.638 221.305 231 219.285 231C217.265 231 215.629 232.638 215.629 234.658Z" fill="#0D0D0D"/>
-</g>
-<path id="Fill 28" fill-rule="evenodd" clip-rule="evenodd" d="M153.6 223.557C127.481 225.685 102.461 228.601 78.8755 232.228C78.0671 228.408 77.3754 224.546 76.8003 220.65L117.229 190.171L153.6 223.557Z" fill="#55575E"/>
-<path id="Fill 30" fill-rule="evenodd" clip-rule="evenodd" d="M336.457 286.171C336.457 289.706 304.529 292.571 265.143 292.571C225.757 292.571 193.829 289.706 193.829 286.171C193.829 282.638 225.757 279.771 265.143 279.771C304.529 279.771 336.457 282.638 336.457 286.171Z" fill="#686B73"/>
-<path id="Fill 32" fill-rule="evenodd" clip-rule="evenodd" d="M453.486 345.599C446.446 345.599 440.686 339.839 440.686 332.799C440.686 325.76 446.446 320 453.486 320C460.526 320 466.286 325.76 466.286 332.799C466.286 339.839 460.526 345.599 453.486 345.599Z" fill="#34393D"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_201_141" x1="205.714" y1="177.372" x2="147.434" y2="241.115" gradientUnits="userSpaceOnUse">
-<stop stop-color="#9DC9FB"/>
-<stop offset="1" stop-color="#9DC9FB"/>
-</linearGradient>
-</defs>
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.4834 68.6832C42.7774 69.425 42.8429 70.2378 42.6714 71.0172L40.5414 77.5971C40.4728 77.9308 40.4905 78.2765 40.5929 78.6014C40.6954 78.9263 40.8791 79.2197 41.1267 79.4536C41.3743 79.6876 41.6776 79.8545 42.0078 79.9384C42.3379 80.0223 42.6841 80.0205 43.0134 79.9331L49.8393 77.9371C50.5747 77.7912 51.3364 77.855 52.0373 78.1211C56.308 80.1155 61.146 80.5375 65.6975 79.3125C70.249 78.0876 74.2217 75.2944 76.9145 71.4259C79.6073 67.5573 80.8473 62.862 80.4157 58.1683C79.984 53.4747 77.9085 49.0843 74.5553 45.7717C71.202 42.4592 66.7866 40.4375 62.088 40.0632C57.3894 39.6889 52.7096 40.9861 48.8742 43.726C45.0388 46.4659 42.2944 50.4724 41.1252 55.0385C39.9559 59.6047 40.4369 64.4371 42.4834 68.6832Z" stroke="#5A6165" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M53.8503 25.6371C58.2429 24.787 62.7578 24.787 67.1503 25.6371" stroke="#35373C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M67.1503 94.3623C62.7578 95.2124 58.2429 95.2124 53.8503 94.3623" stroke="#35373C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80.1311 31.02C83.8462 33.5373 87.0426 36.7456 89.5461 40.47" stroke="#35373C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.1371 66.6506C25.287 62.258 25.287 57.7432 26.1371 53.3506" stroke="#35373C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M89.4798 79.6348C86.9625 83.3499 83.7542 86.5463 80.0298 89.0498" stroke="#35373C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.8621 53.3506C95.7121 57.7432 95.7121 62.258 94.8621 66.6506" stroke="#35373C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.5249 40.3696C34.0422 36.6544 37.2504 33.4581 40.9749 30.9546" stroke="#35373C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.0717 91.9083L29.9007 94.8833C29.3241 95.0365 28.718 95.0397 28.1398 94.8927C27.5616 94.7457 27.0306 94.4534 26.5972 94.0434C26.1638 93.6335 25.8423 93.1196 25.6634 92.5505C25.4844 91.9814 25.4539 91.376 25.5747 90.7918L28.9522 80.3618" stroke="#35373C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -1,33 +1,11 @@
-<svg width="495" height="387" viewBox="0 0 495 387" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="No Chat History">
-<path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M267.927 1.5C222.792 1.5 181.307 17.1457 148.551 43.3222H95.611C88.7329 43.3222 83.1054 48.9682 83.1054 55.8688C83.1054 62.7695 88.7329 68.4155 95.611 68.4155H122.554H130.449C137.327 68.4155 142.955 74.0615 142.955 80.9621C142.955 84.4083 141.546 87.5533 139.278 89.8201C137.019 92.0952 133.884 93.5088 130.449 93.5088H113.605H104.304H58.9279C52.0499 93.5088 46.4224 99.1548 46.4224 106.055C46.4224 112.956 52.0499 118.602 58.9279 118.602H91.4124C81.6064 141.723 76.1748 167.164 76.1748 193.882C76.1748 203.576 76.8918 213.103 78.2674 222.413C78.8426 226.303 79.5346 230.159 80.3433 233.973C103.937 230.351 128.965 227.44 155.093 225.316L157.061 227.114L158.912 225.014C190.301 222.564 223.249 221.259 257.23 221.259C329.429 221.259 396.993 227.147 454.76 237.385C456.986 227.699 458.487 217.737 459.196 207.549C459.521 203.033 459.679 198.474 459.679 193.882C459.679 87.6286 373.832 1.5 267.927 1.5Z" fill="#F1F2F7"/>
-<path id="Fill 3" fill-rule="evenodd" clip-rule="evenodd" d="M20.954 92.9282H13.3753C6.40802 92.9282 0.70752 98.6882 0.70752 105.728C0.70752 112.768 6.40802 118.528 13.3753 118.528H20.954C27.9213 118.528 33.6218 112.768 33.6218 105.728C33.6218 98.6882 27.9213 92.9282 20.954 92.9282Z" fill="#F1F2F7"/>
-<g id="Group 7">
-<mask id="mask0_156_62" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="80" y="221" width="415" height="165">
-<path id="Clip 6" fill-rule="evenodd" clip-rule="evenodd" d="M494.293 221.536V385.5H287.188H80.083V221.536H494.293Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_156_62)">
-<path id="Fill 5" fill-rule="evenodd" clip-rule="evenodd" d="M494.293 284.929C494.293 291.786 488.667 297.396 481.79 297.396H401.932C398.498 297.396 395.364 298.801 393.106 301.062C390.838 303.314 389.429 306.439 389.429 309.864C389.429 316.721 395.055 322.331 401.932 322.331H416.769C420.202 322.331 423.337 323.736 425.596 325.997C427.863 328.249 429.271 331.374 429.271 334.799C429.271 341.656 423.645 347.266 416.769 347.266H382.653C350.604 371.271 310.78 385.5 267.622 385.5C175.444 385.5 98.4618 320.627 80.083 234.169C103.671 230.57 128.693 227.678 154.815 225.567L156.781 227.354L158.632 225.268C190.013 222.832 222.954 221.536 256.928 221.536C329.108 221.536 396.656 227.387 454.409 237.561C451.601 249.679 447.633 261.349 442.632 272.461H481.79C485.233 272.461 488.35 273.866 490.617 276.127C492.884 278.379 494.293 281.504 494.293 284.929Z" fill="#E8EBF2"/>
-</g>
-</g>
-<path id="Fill 8" fill-rule="evenodd" clip-rule="evenodd" d="M457.85 206.981C457.142 217.363 455.643 227.515 453.42 237.386C395.73 226.953 328.256 220.953 256.153 220.953C222.216 220.953 189.312 222.282 157.964 224.779L179.704 199.591L213.521 221.659L259.3 209.019L338.053 220.953L372.242 209.019L380.901 220.953L401.56 205.618L420.866 223.313L451.314 198.986L457.85 206.981Z" fill="#E0E2EE"/>
-<path id="Fill 10" fill-rule="evenodd" clip-rule="evenodd" d="M345.614 218.002C354.273 205.415 359.234 190.487 359.106 174.512C358.752 130.078 319.168 94.3734 270.694 94.7602C222.22 95.1478 183.213 131.483 183.568 175.916C183.923 220.349 223.506 256.055 271.979 255.668C289.298 255.53 305.408 250.8 318.946 242.753L355.162 251.28L345.614 218.002Z" fill="#D8DBEA"/>
-<path id="Fill 12" fill-rule="evenodd" clip-rule="evenodd" d="M245.736 173.313C245.776 178.362 241.716 182.488 236.667 182.528C231.616 182.569 227.49 178.508 227.451 173.459C227.411 168.409 231.471 164.284 236.52 164.243C241.569 164.203 245.695 168.263 245.736 173.313Z" fill="#BEC0D6"/>
-<path id="Fill 14" fill-rule="evenodd" clip-rule="evenodd" d="M278.65 173.312C278.69 178.362 274.629 182.488 269.58 182.528C264.53 182.568 260.404 178.508 260.365 173.459C260.323 168.409 264.384 164.283 269.434 164.243C274.483 164.203 278.609 168.263 278.65 173.312Z" fill="#BEC0D6"/>
-<path id="Fill 16" fill-rule="evenodd" clip-rule="evenodd" d="M311.565 173.312C311.605 178.361 307.544 182.487 302.495 182.528C297.445 182.568 293.319 178.508 293.28 173.458C293.239 168.408 297.299 164.283 302.349 164.243C307.398 164.202 311.524 168.263 311.565 173.312Z" fill="#BEC0D6"/>
-<path id="Fill 18" fill-rule="evenodd" clip-rule="evenodd" d="M157.965 224.585L156.192 226.414L154.308 224.848C155.521 224.753 156.744 224.666 157.965 224.585Z" fill="#F1F2F7"/>
-<path id="Fill 20" fill-rule="evenodd" clip-rule="evenodd" d="M174.422 237.387C174.422 243.193 176.279 248.599 179.47 253.149L176.083 265.289L189.272 262.081C194.23 264.965 200.11 266.643 206.422 266.643C224.095 266.643 238.422 253.544 238.422 237.387C238.422 221.228 224.095 208.129 206.422 208.129C188.748 208.129 174.422 221.228 174.422 237.387Z" fill="url(#paint0_linear_156_62)"/>
-<path id="Fill 22" fill-rule="evenodd" clip-rule="evenodd" d="M214.651 237.386C214.651 239.405 216.287 241.043 218.308 241.043C220.327 241.043 221.965 239.405 221.965 237.386C221.965 235.366 220.327 233.728 218.308 233.728C216.287 233.728 214.651 235.366 214.651 237.386Z" fill="white"/>
-<path id="Fill 24" fill-rule="evenodd" clip-rule="evenodd" d="M203.679 237.386C203.679 239.405 205.316 241.043 207.336 241.043C209.355 241.043 210.993 239.405 210.993 237.386C210.993 235.366 209.355 233.728 207.336 233.728C205.316 233.728 203.679 235.366 203.679 237.386Z" fill="white"/>
-<path id="Fill 26" fill-rule="evenodd" clip-rule="evenodd" d="M190.879 237.386C190.879 239.405 192.516 241.043 194.537 241.043C196.556 241.043 198.194 239.405 198.194 237.386C198.194 235.366 196.556 233.728 194.537 233.728C192.516 233.728 190.879 235.366 190.879 237.386Z" fill="white"/>
-<path id="Fill 28" fill-rule="evenodd" clip-rule="evenodd" d="M154.308 225.057C128.188 227.185 103.169 230.101 79.583 233.728C78.7746 229.908 78.0829 226.046 77.5078 222.15L117.936 191.671L154.308 225.057Z" fill="#E0E2EE"/>
-<path id="Fill 30" fill-rule="evenodd" clip-rule="evenodd" d="M337.164 287.671C337.164 291.206 305.235 294.071 265.85 294.071C226.464 294.071 194.536 291.206 194.536 287.671C194.536 284.138 226.464 281.271 265.85 281.271C305.235 281.271 337.164 284.138 337.164 287.671Z" fill="#D8DBEA"/>
-<path id="Fill 32" fill-rule="evenodd" clip-rule="evenodd" d="M454.193 347.099C447.153 347.099 441.393 341.339 441.393 334.299C441.393 327.26 447.153 321.5 454.193 321.5C461.233 321.5 466.993 327.26 466.993 334.299C466.993 341.339 461.233 347.099 454.193 347.099Z" fill="#E1E3EF"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_156_62" x1="206.422" y1="178.872" x2="148.142" y2="242.615" gradientUnits="userSpaceOnUse">
-<stop stop-color="#9DC9FB"/>
-<stop offset="1" stop-color="#9DC9FB"/>
-</linearGradient>
-</defs>
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.4834 68.6832C42.7774 69.425 42.8429 70.2378 42.6714 71.0172L40.5414 77.5971C40.4728 77.9308 40.4905 78.2765 40.5929 78.6014C40.6954 78.9263 40.8791 79.2197 41.1267 79.4536C41.3743 79.6876 41.6776 79.8545 42.0078 79.9384C42.3379 80.0223 42.6841 80.0205 43.0134 79.9331L49.8393 77.9371C50.5747 77.7912 51.3364 77.855 52.0373 78.1211C56.308 80.1155 61.146 80.5375 65.6975 79.3125C70.249 78.0876 74.2217 75.2944 76.9145 71.4259C79.6073 67.5573 80.8473 62.862 80.4157 58.1683C79.984 53.4747 77.9085 49.0843 74.5553 45.7717C71.202 42.4592 66.7866 40.4375 62.088 40.0632C57.3894 39.6889 52.7096 40.9861 48.8742 43.726C45.0388 46.4659 42.2944 50.4724 41.1252 55.0385C39.9559 59.6047 40.4369 64.4371 42.4834 68.6832Z" stroke="#B9BBC6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M53.8503 25.6371C58.2429 24.787 62.7578 24.787 67.1503 25.6371" stroke="#E4E4E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M67.1503 94.3621C62.7578 95.2121 58.2429 95.2121 53.8503 94.3621" stroke="#E4E4E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80.1311 31.02C83.8462 33.5373 87.0426 36.7456 89.5461 40.47" stroke="#E4E4E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.1371 66.6503C25.287 62.2578 25.287 57.7429 26.1371 53.3503" stroke="#E4E4E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M89.4798 79.635C86.9625 83.3502 83.7542 86.5465 80.0298 89.05" stroke="#E4E4E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.8621 53.3503C95.7121 57.7429 95.7121 62.2578 94.8621 66.6503" stroke="#E4E4E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.5249 40.3696C34.0422 36.6544 37.2504 33.4581 40.9749 30.9546" stroke="#E4E4E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.0717 91.9083L29.9007 94.8833C29.3241 95.0365 28.718 95.0397 28.1398 94.8927C27.5616 94.7457 27.0306 94.4534 26.5972 94.0434C26.1638 93.6335 25.8423 93.1196 25.6634 92.5505C25.4844 91.9814 25.4539 91.376 25.5747 90.7918L28.9522 80.3618" stroke="#E4E4E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -107,21 +107,39 @@
    --violet-11: 101 85 183;
    --violet-12: 47 38 95;

-    --background-color: 253 253 253;
-    --text-blue: 8 109 224;
+    --background-color: 247 247 247;
+    --surface-1: 254 254 254;
+    --surface-2: 255 255 255;
+    --surface-active: 255 255 255;
+    --background-input-box: 0, 0, 0, 0.03;
+    --text-blue: 1 22 44;
+    --text-purple: 2 4 49;
+    --text-amber: 37 24 1;
    --border-container: 236 236 236;
-    --border-strong: 235 235 235;
+    --border-strong: 226 227 231;
    --border-weak: 234 234 234;
+    --border-blue-strong: 18 61 117;
    --solid-1: 255 255 255;
    --solid-2: 255 255 255;
    --solid-3: 255 255 255;
    --solid-active: 255 255 255;
-    --solid-amber: 252 232 193;
+    --solid-amber: 255 228 181;
    --solid-blue: 218 236 255;
+    --solid-blue-2: 251 253 255;
    --solid-iris: 230 231 255;
+    --solid-purple: 230 231 255;
+    --solid-red: 254 200 201;
+    --solid-amber-button: 255 221 141;
+    --card-color: 255 255 255;
+    --overlay: 0, 0, 0, 0.12;
+    --overlay-avatar: 255, 255, 255, 0.67;
+    --button-color: 255 255 255;
+    --button-hover-color: 255, 255, 255, 0.2;
+    --label-background: 247 247 247;
+    --label-border: 0, 0, 0, 0.04;

-    --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-1: 215, 215, 215, 0.22;
+    --alpha-2: 196, 197, 198, 0.22;
    --alpha-3: 255, 255, 255, 0.96;
    --black-alpha-1: 0, 0, 0, 0.12;
    --black-alpha-2: 0, 0, 0, 0.04;
@@ -235,25 +253,43 @@
    --violet-11: 169 153 236;
    --violet-12: 226 221 254;

-    --background-color: 18 18 19;
-    --border-strong: 52 52 52;
-    --border-weak: 38 38 42;
+    --background-color: 28 29 32;
+    --surface-1: 20 21 23;
+    --surface-2: 22 23 26;
+    --surface-active: 53 57 66;
+    --background-input-box: 255, 255, 255, 0.02;
+    --text-blue: 213 234 255;
+    --text-purple: 232 233 254;
+    --text-amber: 255 247 234;
+    --border-strong: 46 45 50;
+    --border-weak: 31 31 37;
+    --border-blue-strong: 201 226 255;
    --solid-1: 23 23 26;
    --solid-2: 29 30 36;
    --solid-3: 44 45 54;
    --solid-active: 53 57 66;
-    --solid-amber: 42 37 30;
-    --solid-blue: 16 49 91;
+    --solid-amber: 56 50 41;
+    --solid-blue: 15 57 102;
+    --solid-blue-2: 26 29 35;
    --solid-iris: 38 42 101;
-    --text-blue: 126 182 255;
+    --solid-purple: 51 51 107;
+    --solid-red: 90 33 34;
+    --solid-amber-button: 255 221 141;
+    --card-color: 28 30 34;
+    --overlay: 0, 0, 0, 0.4;
+    --overlay-avatar: 0, 0, 0, 0.05;
+    --button-color: 42 43 51;
+    --button-hover-color: 0, 0, 0, 0.15;
+    --label-background: 36 38 45;
+    --label-border: 255, 255, 255, 0.03;

-    --alpha-1: 36, 36, 36, 0.8;
-    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 36, 38, 45, 0.9;
+    --alpha-1: 35, 36, 42, 0.8;
+    --alpha-2: 147, 153, 176, 0.12;
+    --alpha-3: 33, 34, 38, 0.95;
    --black-alpha-1: 0, 0, 0, 0.3;
    --black-alpha-2: 0, 0, 0, 0.2;
    --border-blue: 39, 129, 246, 0.5;
-    --border-container: 236, 236, 236, 0;
+    --border-container: 255, 255, 255, 0;
    --white-alpha: 255, 255, 255, 0.1;
  }
 }
@@ -46,14 +46,14 @@ body {
 }

 .custom-dashed-border {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23E2E3E7' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='calc(100%25 - 2px)' height='calc(100%25 - 2px)' fill='none' rx='12' ry='12' stroke='%23E2E3E7' stroke-width='1.5' stroke-dasharray='6 4' stroke-linecap='butt'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
 }

 .dark .custom-dashed-border {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23343434' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='calc(100%25 - 2px)' height='calc(100%25 - 2px)' fill='none' rx='12' ry='12' stroke='%23343434' stroke-width='1.5' stroke-dasharray='6 4' stroke-linecap='butt'/%3E%3C/svg%3E");
 }

@layer utilities {
@@ -66,4 +66,84 @@ body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
+
+  /**
+   * ============================================================================
+   * TYPOGRAPHY UTILITIES
+   * ============================================================================
+   *
+   * | Class              | Use Case                                           |
+   * |--------------------|----------------------------------------------------|
+   * | .text-body-main    | <p>, <span>, general body text                     |
+   * | .text-body-para    | <p> for paragraphs, larger text blocks             |
+   * | .text-heading-1    | <h1>, page titles, panel headers                   |
+   * | .text-heading-2    | <h2>, section headings, card titles                |
+   * | .text-heading-3    | <h3>, card headings, breadcrumbs, subsections      |
+   * | .text-label        | <label>, form labels, field names                  |
+   * | .text-label-small  | <small>, footnotes, tags, badges, captions         |
+   * | .text-button       | <button>, standard button text                     |
+   * | .text-button-small | <button>, small/compact button text                |
+   */
+
+  /* body-text-main: Main text style for general body text */
+  .text-body-main {
+    @apply font-inter text-sm font-420;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.28px;
+  }
+
+  /* body-text-paragraph: For paragraphs or larger blocks of text */
+  .text-body-para {
+    @apply font-inter text-sm font-420;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.21px;
+  }
+
+  /* heading-1: Large heading for pages and panels */
+  .text-heading-1 {
+    @apply font-inter text-lg font-520;
+    line-height: 24px; /* 133.333% */
+    letter-spacing: -0.27px;
+  }
+
+  /* heading-2: Secondary heading for sections */
+  .text-heading-2 {
+    @apply font-inter text-base font-medium;
+    line-height: 24px; /* 133.333% */
+    letter-spacing: -0.27px;
+  }
+
+  /* heading-3: For card headings, breadcrumbs, subsections */
+  .text-heading-3 {
+    @apply font-inter text-sm font-medium;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.27px;
+  }
+
+  /* label: Standard label text for form fields */
+  .text-label {
+    @apply font-inter text-sm font-medium;
+    line-height: 21px; /* 150% */
+  }
+
+  /* label-small: Smallest font for labels, footnotes, tags */
+  .text-label-small {
+    @apply font-inter text-xs font-440;
+    line-height: 16px; /* 133.333% */
+    letter-spacing: -0.24px;
+  }
+
+  /* button-text: Text for standard size buttons */
+  .text-button {
+    @apply font-inter text-sm font-460;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.28px;
+  }
+
+  /* button-text-small: Text for smaller buttons */
+  .text-button-small {
+    @apply font-inter text-xs font-440;
+    line-height: 18px; /* 150% */
+    letter-spacing: -0.24px;
+  }
 }
@@ -2,7 +2,7 @@
 import { computed, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
-import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
 import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
 import { DURATION_UNITS } from 'dashboard/components-next/input/constants';

@@ -103,7 +103,7 @@ onMounted(() => {
          :key="tag.id"
          :label="tag"
          :is-hovered="hoveredLabel === tag.id"
-          class="h-8"
+          class="h-8 ltr:!pr-1 rtl:!pl-1"
          @remove="onClickRemoveTag"
          @hover="hoveredLabel = tag.id"
        />
@@ -77,7 +77,7 @@ const inboxName = computed(() => props.inbox?.name || '');

 const inboxIcon = computed(() => {
  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium);
+  return getInboxIconByType(type, medium, 'line');
 });
 </script>

@@ -47,8 +47,8 @@ const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.FROM') }}
  </span>
-  <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
+  <div class="flex items-center gap-1 flex-shrink-0">
+    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-4" />
    <span class="text-sm font-medium text-n-slate-12">
      {{ inboxName }}
    </span>
@@ -20,11 +20,13 @@ const handleButtonClick = () => {
 </script>

 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto">
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
+    <header
+      class="sticky top-0 z-10 px-6 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+    >
+      <div class="w-full max-w-5xl mx-auto">
        <div class="flex items-center justify-between w-full h-20 gap-2">
-          <span class="text-xl font-medium text-n-slate-12">
+          <span class="text-heading-1 text-n-slate-12">
            {{ headerTitle }}
          </span>
          <div
@@ -43,8 +45,8 @@ const handleButtonClick = () => {
        </div>
      </div>
    </header>
-    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
+    <main class="flex-1 px-6 overflow-y-auto">
+      <div class="w-full mx-auto max-w-5xl py-4">
        <slot name="default" />
      </div>
    </main>
@@ -22,10 +22,10 @@ const handleClick = () => {
    class="flex flex-col w-full outline-1 outline outline-n-container group/cardLayout rounded-xl bg-n-solid-2"
  >
    <div
-      class="flex w-full gap-3 py-5"
+      class="flex w-full gap-2 py-4"
      :class="[
        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center',
-        selectable ? 'px-10 py-6' : 'px-6',
+        selectable ? 'px-10 py-6' : 'px-4',
      ]"
      @click="handleClick"
    >
@@ -0,0 +1,170 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { debounce } from '@chatwoot/utils';
+import { useCompaniesStore } from 'dashboard/stores/companies';
+import { useToggle } from '@vueuse/core';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  selectedCompanyName: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['change']);
+const companyId = defineModel({
+  type: [Number, String],
+  default: null,
+});
+
+const { t } = useI18n();
+const companiesStore = useCompaniesStore();
+
+const [showCompanyDropdown, toggleCompanyDropdown] = useToggle();
+
+const searchQuery = ref('');
+const isSearching = ref(false);
+
+const companies = computed(() => companiesStore.getCompaniesList || []);
+const isLoading = computed(() => companiesStore.uiFlags.fetchingList);
+
+const clearOption = computed(() => ({
+  label: t('DROPDOWN_MENU.CLEAR_SELECTION'),
+  value: 'clear',
+  action: 'clear',
+}));
+
+const companyOptions = computed(() =>
+  companies.value.map(company => ({
+    label: company.name,
+    value: company.id,
+    action: 'select',
+    isSelected: companyId.value === company.id,
+  }))
+);
+
+const menuItems = computed(() => {
+  const items = [];
+  // Show clear option if a company is selected (either by ID or by name prop)
+  if (companyId.value || props.selectedCompanyName) {
+    items.push(clearOption.value);
+  }
+  // Add company options after clear option
+  items.push(...companyOptions.value);
+  return items;
+});
+
+const selectedCompany = computed(() => {
+  return companies.value.find(company => company.id === companyId.value);
+});
+
+const buttonLabel = computed(() => {
+  if (selectedCompany.value) {
+    return selectedCompany.value.name;
+  }
+  if (props.selectedCompanyName) {
+    return props.selectedCompanyName;
+  }
+  return props.placeholder;
+});
+
+const fetchCompanies = async (search = '') => {
+  if (!search) return;
+  isSearching.value = true;
+  try {
+    await companiesStore.search({
+      search,
+      page: 1,
+      sort: 'name',
+    });
+  } finally {
+    isSearching.value = false;
+  }
+};
+
+const debouncedSearch = debounce(query => {
+  searchQuery.value = query;
+  fetchCompanies(query);
+}, 300);
+
+const handleAction = ({ value, action }) => {
+  if (action === 'clear') {
+    companyId.value = null;
+    emit('change', null);
+    toggleCompanyDropdown(false);
+    return;
+  }
+
+  if (companyId.value === value) {
+    companyId.value = null;
+    emit('change', null);
+  } else {
+    companyId.value = value;
+    const company = companies.value.find(c => c.id === value);
+    emit('change', company);
+  }
+  toggleCompanyDropdown(false);
+};
+
+const handleSearch = query => {
+  debouncedSearch(query);
+};
+
+const handleClickOutside = () => {
+  toggleCompanyDropdown(false);
+};
+
+watch(showCompanyDropdown, isOpen => {
+  if (!isOpen) {
+    searchQuery.value = '';
+    companiesStore.clearRecords();
+  }
+});
+</script>
+
+<template>
+  <div v-on-click-outside="handleClickOutside" class="relative w-full min-w-0">
+    <Button
+      slate
+      sm
+      :label="buttonLabel"
+      no-animation
+      type="button"
+      :variant="showCompanyDropdown ? 'faded' : 'solid'"
+      icon="i-lucide-briefcase-business"
+      justify="start"
+      class="w-full -outline-offset-1"
+      @click="toggleCompanyDropdown()"
+    />
+
+    <Transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <DropdownMenu
+        v-if="showCompanyDropdown"
+        :menu-items="menuItems"
+        show-search
+        disable-local-filtering
+        :search-placeholder="t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')"
+        :empty-state-message="t('COMPANIES.DROPDOWN_MENU.EMPTY_STATE')"
+        :is-loading="isLoading"
+        :is-searching="isSearching"
+        class="max-h-60 overflow-y-auto absolute z-50 w-full mt-1 top-full"
+        @action="handleAction"
+        @search="handleSearch"
+      />
+    </Transition>
+  </div>
+</template>
@@ -15,11 +15,13 @@ const emit = defineEmits(['search', 'update:sort']);
 </script>

 <template>
-  <header class="sticky top-0 z-10">
+  <header
+    class="sticky top-0 z-10 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none px-6"
+  >
    <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
    >
-      <span class="text-xl font-medium truncate text-n-slate-12">
+      <span class="text-heading-1 truncate text-n-slate-12">
        {{ headerTitle }}
      </span>
      <div class="flex items-center flex-row flex-shrink-0 gap-2">
@@ -91,7 +91,7 @@ const handleOrderChange = value => {
    <div
      v-if="isMenuOpen"
      v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute z-20 top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
    >
      <div class="flex items-center justify-between gap-2">
        <span class="text-sm text-n-slate-12">
@@ -21,7 +21,7 @@ const updateCurrentPage = page => {

 <template>
  <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-surface-1"
  >
    <div class="flex flex-col w-full h-full transition-all duration-300">
      <CompanyHeader
@@ -32,17 +32,18 @@ const updateCurrentPage = page => {
        @search="emit('search', $event)"
        @update:sort="emit('update:sort', $event)"
      />
-      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
+      <main class="flex-1 px-6 overflow-y-auto">
+        <div class="w-full mx-auto max-w-5xl py-4">
          <slot name="default" />
        </div>
      </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0">
        <PaginationFooter
          current-page-info="COMPANIES_LAYOUT.PAGINATION_FOOTER.SHOWING"
          :current-page="currentPage"
          :total-items="totalItems"
          :items-per-page="25"
+          class="max-w-[67rem]"
          @update:current-page="updateCurrentPage"
        />
      </footer>
@@ -1,12 +1,15 @@
 <script setup>
-import { computed, watch, onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed, ref, watch } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';

-import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
-import AddLabel from 'dashboard/components-next/Label/AddLabel.vue';
+import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/label/AddLabel.vue';

 const props = defineProps({
+  wrapperRef: {
+    type: Object,
+    default: null,
+  },
  contactId: {
    type: [String, Number],
    default: null,
@@ -14,7 +17,6 @@ const props = defineProps({
 });

 const store = useStore();
-const route = useRoute();

 const showDropdown = ref(false);

@@ -24,12 +26,14 @@ const showDropdown = ref(false);
 const hoveredLabel = ref(null);

 const allLabels = useMapGetter('labels/getLabels');
-const contactLabels = useMapGetter('contactLabels/getContactLabels');
+const getContactById = useMapGetter('contacts/getContactById');
+const getContactLabels = useMapGetter('contactLabels/getContactLabels');

 const savedLabels = computed(() => {
-  const availableContactLabels = contactLabels.value(props.contactId);
+  const contactLabelsList = getContactLabels.value(props.contactId) || [];
+
  return allLabels.value.filter(({ title }) =>
-    availableContactLabels.includes(title)
+    contactLabelsList.includes(title)
  );
 });

@@ -47,13 +51,6 @@ const labelMenuItems = computed(() => {
    .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
 });

-const fetchLabels = async contactId => {
-  if (!contactId) {
-    return;
-  }
-  store.dispatch('contactLabels/get', contactId);
-};
-
 const handleLabelAction = async ({ value }) => {
  try {
    // Get current label titles
@@ -80,6 +77,11 @@ const handleLabelAction = async ({ value }) => {
      labels: updatedLabels,
    });

+    store.dispatch('contacts/updateContactLabels', {
+      contactId: props.contactId,
+      labels: updatedLabels,
+    });
+
    showDropdown.value = false;
  } catch (error) {
    // error
@@ -90,19 +92,19 @@ const handleRemoveLabel = label => {
  return handleLabelAction({ value: label.id });
 };

+// Sync contact labels from contact object to contactLabels store when contact loads
 watch(
-  () => props.contactId,
-  (newVal, oldVal) => {
-    if (newVal !== oldVal) {
-      fetchLabels(newVal);
+  () => getContactById.value(props.contactId),
+  contact => {
+    if (contact?.labels) {
+      store.dispatch('contactLabels/setContactLabel', {
+        id: props.contactId,
+        data: contact.labels,
+      });
    }
-  }
+  },
+  { immediate: true }
 );
-onMounted(() => {
-  if (route.params.contactId) {
-    fetchLabels(route.params.contactId);
-  }
-});

 const handleMouseLeave = () => {
  // Reset hover state when mouse leaves the container
@@ -125,11 +127,13 @@ const handleLabelHover = labelId => {
      :key="label.id"
      :label="label"
      :is-hovered="hoveredLabel === label.id"
+      class="ltr:!pr-1 rtl:!pl-1"
      @remove="handleRemoveLabel"
      @hover="handleLabelHover(label.id)"
    />
    <AddLabel
      :label-menu-items="labelMenuItems"
+      :wrapper-ref="wrapperRef"
      @update-label="handleLabelAction"
    />
  </div>
@@ -0,0 +1,67 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  contactId: {
+    type: Number,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const state = reactive({
+  message: '',
+});
+
+const onAdd = async content => {
+  if (!content) return;
+  try {
+    await store.dispatch('contactNotes/create', {
+      content,
+      contactId: props.contactId,
+    });
+    state.message = '';
+    useAlert(t('CONTACTS_LAYOUT.CARD.ADD_NOTE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.CARD.ADD_NOTE.API.ERROR_MESSAGE'));
+  }
+};
+
+const keyboardEvents = {
+  '$mod+Enter': {
+    action: () => onAdd(state.message),
+    allowOnFocusedInput: true,
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-4 py-3">
+    <span
+      class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
+    >
+      <Icon
+        icon="i-lucide-file-plus-corner"
+        class="size-4 text-n-slate-11 hidden lg:block"
+      />
+      {{ t('CONTACTS_LAYOUT.CARD.ADD_NOTE.TITLE') }}
+    </span>
+    <div class="flex flex-col gap-6 lg:px-6 max-w-lg w-full">
+      <Editor
+        v-model="state.message"
+        :placeholder="t('CONTACTS_LAYOUT.CARD.ADD_NOTE.PLACEHOLDER')"
+        class="[&>div]:!border-transparent [&>div]:!px-3 [&>div]:!pb-4 [&_.ProseMirror-woot-style]:min-h-6 [&_.ProseMirror-menubar]:!relative ltr:[&_.ProseMirror-menubar]:!-left-[3px] ltr:[&_.ProseMirror-menubar]:!right-[unset] rtl:[&_.ProseMirror-menubar]:!-right-[3px] rtl:[&_.ProseMirror-menubar]:!left-[unset] [&_.ProseMirror-menubar]:!w-[unset] [&_.ProseMirror-menubar]:!top-[unset] [&_.ProseMirror-menubar-spacer]:!hidden"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+
+const props = defineProps({
+  customAttributes: { type: Object, required: true },
+});
+
+const { t } = useI18n();
+const { uiSettings } = useUISettings();
+
+const contactAttributes = useMapGetter('attributes/getContactAttributes');
+
+const displayAttributes = computed(() => {
+  const selectedKeys = uiSettings.value.contact_list_display_properties || [];
+  if (!selectedKeys.length) return [];
+
+  return contactAttributes.value
+    .filter(
+      attr =>
+        selectedKeys.includes(attr.attributeKey) &&
+        attr.attributeKey in props.customAttributes
+    )
+    .map(attribute => ({
+      attribute,
+      value: props.customAttributes[attribute.attributeKey],
+    }));
+});
+
+const formatValue = (value, displayType) => {
+  if (value === null || value === undefined || value === '') return null;
+
+  switch (displayType) {
+    case 'checkbox':
+      return value
+        ? t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.YES')
+        : t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.NO');
+    case 'list':
+      return Array.isArray(value) ? value.join(', ') : value;
+    case 'date':
+      return new Date(value).toLocaleDateString();
+    default:
+      return String(value);
+  }
+};
+</script>
+
+<template>
+  <template
+    v-for="(item, index) in displayAttributes"
+    :key="item.attribute.attributeKey"
+  >
+    <div
+      v-if="index === 0"
+      class="w-px h-3 bg-n-strong rounded-lg flex-shrink-0"
+    />
+    <div
+      v-tooltip.top="{
+        content: `${item.attribute.attributeDisplayName}: ${formatValue(item.value, item.attribute.attributeDisplayType)}`,
+        delay: { show: 500, hide: 0 },
+      }"
+      class="flex items-center gap-1 truncate"
+    >
+      <span class="text-body-main text-n-slate-12 truncate">
+        {{ item.attribute.attributeDisplayName }}{{ ':' }}
+      </span>
+      <span class="text-body-main text-n-slate-11 truncate">
+        {{ formatValue(item.value, item.attribute.attributeDisplayType) }}
+      </span>
+    </div>
+    <div
+      v-if="index < displayAttributes.length - 1"
+      class="w-px h-3 bg-n-strong rounded-lg flex-shrink-0"
+    />
+  </template>
+</template>
@@ -0,0 +1,370 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Flag from 'dashboard/components-next/flag/Flag.vue';
+import ContactLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
+import countries from 'shared/constants/countries';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardContent from 'dashboard/components-next/Conversation/ConversationCard/CardContent.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
+import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
+import CardStatusIcon from 'dashboard/components-next/Conversation/ConversationCard/CardStatusIcon.vue';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { getLastMessage } from 'dashboard/helper/conversationHelper';
+
+const props = defineProps({
+  contactData: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const router = useRouter();
+
+const contactNotes = useMapGetter('contactNotes/getAllNotesByContactId');
+const contactConversations = useMapGetter(
+  'contactConversations/getAllConversationsByContactId'
+);
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const currentUser = useMapGetter('getCurrentUser');
+const agentsList = useMapGetter('agents/getAgents');
+const inboxGetter = useMapGetter('inboxes/getInbox');
+
+const countriesMap = computed(() => {
+  return countries.reduce((acc, country) => {
+    acc[country.code] = country;
+    acc[country.id] = country;
+    return acc;
+  }, {});
+});
+
+const countryDetails = computed(() => {
+  const attributes = props.contactData?.additionalAttributes || {};
+  const { country, countryCode, city } = attributes;
+
+  if (!country && !countryCode) return null;
+
+  const activeCountry =
+    countriesMap.value[country] || countriesMap.value[countryCode];
+  if (!activeCountry) return null;
+
+  return {
+    countryCode: activeCountry.id,
+    city: city ? `${city},` : null,
+    name: activeCountry.name,
+  };
+});
+
+const formattedLocation = computed(() => {
+  if (!countryDetails.value) return '';
+  return [countryDetails.value.city, countryDetails.value.name]
+    .filter(Boolean)
+    .join(' ');
+});
+
+const companyName = computed(() => {
+  const attributes = props.contactData?.additionalAttributes || {};
+  return attributes.companyName || '';
+});
+
+const contactLabels = computed(() => {
+  return props.contactData?.labels || [];
+});
+
+const latestNote = computed(() => {
+  if (!props.contactData?.id) return null;
+  const notes = contactNotes.value(props.contactData.id);
+  return notes && notes.length > 0 ? notes[0] : null;
+});
+
+const latestConversation = computed(() => {
+  if (!props.contactData?.id) return null;
+  const conversations = contactConversations.value(props.contactData.id);
+  return conversations && conversations.length > 0 ? conversations[0] : null;
+});
+
+const lastMessageInConversation = computed(() => {
+  if (!latestConversation.value) return null;
+  return getLastMessage(latestConversation.value);
+});
+
+const inbox = computed(() => {
+  const inboxId = latestConversation.value?.inboxId;
+  return inboxId ? inboxGetter.value(inboxId) : {};
+});
+
+const assignee = computed(() => {
+  if (!latestConversation.value?.meta?.assignee?.id) return null;
+  return agentsList.value?.find(
+    agent => agent.id === latestConversation.value.meta.assignee.id
+  );
+});
+
+const getWrittenBy = ({ user } = {}) => {
+  const currentUserId = currentUser.value?.id;
+  return user?.id === currentUserId
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : user?.name || t('CONVERSATION.BOT');
+};
+
+const formatTimestamp = timestamp => {
+  if (!timestamp) return '';
+  return dynamicTime(timestamp);
+};
+
+const getConversationUrl = conversationId => {
+  if (!conversationId || !currentAccountId.value) return '#';
+  const url = `/app/accounts/${currentAccountId.value}/conversations/${conversationId}`;
+  return router.push(url);
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 ltr:pl-2 rtl:pr-2 lg:ltr:pl-9 lg:rtl:pr-9 lg:before:content-[''] lg:before:absolute lg:before:ltr:left-[2.688rem] lg:before:rtl:right-[2.688rem] lg:before:top-0 lg:before:w-px lg:before:h-4 lg:before:bg-n-weak"
+  >
+    <div class="flex items-center gap-2 pb-2">
+      <Icon icon="i-woot-overview" class="size-4 text-n-slate-11" />
+      <h3 class="text-n-slate-11 text-body-main">
+        {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.TITLE') }}
+      </h3>
+    </div>
+    <!-- Section 1: Basic Information -->
+    <div
+      class="hidden lg:flex rounded-xl bg-n-card w-auto outline outline-1 outline-n-container -outline-offset-1 p-3"
+    >
+      <div class="flex flex-wrap items-center gap-2 w-full">
+        <div class="flex items-center gap-1">
+          <Icon icon="i-lucide-circle-user" class="size-4 text-n-slate-11" />
+          <span class="text-label-small text-n-slate-11 m-0">
+            {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.BASIC_INFO') }}
+          </span>
+        </div>
+        <div
+          v-if="contactData?.email"
+          class="h-3 w-px bg-n-strong rounded-lg"
+        />
+        <!-- Email -->
+        <div v-if="contactData?.email" class="flex items-center gap-1">
+          <Icon
+            icon="i-woot-mail"
+            class="size-4 text-n-slate-11 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ contactData.email }}
+          </span>
+        </div>
+        <div
+          v-if="contactData?.phoneNumber"
+          class="h-3 w-px bg-n-strong rounded-lg"
+        />
+        <!-- Phone Number -->
+        <div v-if="contactData?.phoneNumber" class="flex items-center gap-1">
+          <Icon
+            icon="i-lucide-phone"
+            class="size-3.5 text-n-slate-11 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ contactData.phoneNumber }}
+          </span>
+        </div>
+        <div v-if="companyName" class="h-3 w-px bg-n-strong rounded-lg" />
+        <!-- Company Name -->
+        <div v-if="companyName" class="flex items-center gap-1">
+          <Icon
+            icon="i-lucide-briefcase-business"
+            class="size-4 text-n-slate-11 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ companyName }}
+          </span>
+        </div>
+        <div v-if="countryDetails" class="h-3 w-px bg-n-strong rounded-lg" />
+        <!-- Location (Country & City) -->
+        <div v-if="countryDetails" class="flex items-center gap-1">
+          <Flag
+            :country="countryDetails.countryCode"
+            class="size-4 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ formattedLocation }}
+          </span>
+        </div>
+        <div
+          v-if="contactLabels.length > 0"
+          class="h-3 w-px bg-n-strong rounded-lg"
+        />
+        <!-- Labels -->
+
+        <ContactLabels
+          v-if="contactLabels.length > 0"
+          :labels="contactLabels"
+          disable-toggle
+          class="my-0 flex-1"
+        />
+      </div>
+    </div>
+
+    <!-- Section 2: Latest Contact Note -->
+    <div
+      class="flex flex-col rounded-xl bg-n-card outline outline-1 outline-n-container -outline-offset-1 p-3 gap-1.6 w-full gap-1.5"
+    >
+      <div class="flex items-center gap-2 py-1">
+        <div class="flex items-center gap-1.5">
+          <Icon icon="i-lucide-notebook-pen" class="size-3.5 text-n-slate-11" />
+          <span class="text-label-small text-n-slate-11 m-0">
+            {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.LATEST_NOTE') }}
+          </span>
+        </div>
+        <template v-if="latestNote">
+          <div class="h-3 w-px bg-n-strong rounded-lg" />
+          <span class="text-label-small text-n-slate-11">
+            {{ formatTimestamp(latestNote.createdAt) }}
+          </span>
+        </template>
+      </div>
+
+      <div v-if="latestNote" class="flex items-center gap-1.5">
+        <Avatar
+          v-tooltip.left="{
+            content: getWrittenBy(latestNote),
+            delay: { show: 500, hide: 0 },
+          }"
+          :name="latestNote?.user?.name || 'Bot'"
+          :src="
+            latestNote?.user?.name
+              ? latestNote?.user?.thumbnail
+              : '/assets/images/chatwoot_bot.png'
+          "
+          :size="14"
+          rounded-full
+        />
+        <p class="text-body-main text-n-slate-12 m-0 line-clamp-1">
+          {{ latestNote.content }}
+        </p>
+      </div>
+      <p v-else class="text-body-para text-n-slate-10 m-0 italic">
+        {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.NO_NOTES') }}
+      </p>
+    </div>
+
+    <!-- Section 3: Latest Previous Conversation -->
+    <div
+      v-if="latestConversation"
+      class="flex flex-col rounded-xl bg-n-card outline outline-1 outline-n-container -outline-offset-1 p-3 gap-1.6 w-full gap-1.5 cursor-pointer"
+      @click="getConversationUrl(latestConversation.id)"
+    >
+      <div
+        class="flex justify-between gap-2 w-full min-w-0"
+        :class="
+          latestConversation?.labels?.length > 0
+            ? 'sm:flex-row flex-col items-start sm:items-center '
+            : 'flex-row items-center'
+        "
+      >
+        <div class="flex items-center gap-2 py-1 min-w-0 flex-shrink">
+          <div class="flex items-center gap-1.5 min-w-0">
+            <Icon
+              icon="i-lucide-message-circle"
+              class="size-3.5 text-n-slate-11"
+            />
+            <span class="text-label-small text-n-slate-11 m-0 truncate">
+              {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.LATEST_CONVERSATION') }}
+            </span>
+          </div>
+          <div v-if="inbox?.id" class="h-3 w-px bg-n-strong rounded-lg" />
+          <div class="flex items-center gap-1 min-w-0">
+            <InboxName
+              v-if="inbox?.id"
+              :inbox="inbox"
+              class="gap-1 [&>span]:text-n-slate-11"
+            />
+            <div
+              v-if="latestConversation?.id"
+              class="flex items-center gap-1 min-w-0"
+            >
+              <Icon
+                icon="i-woot-hash"
+                class="size-3.5 text-n-slate-10 flex-shrink-0"
+              />
+              <span class="text-label-small truncate text-n-slate-11">
+                {{ latestConversation.id }}
+              </span>
+            </div>
+          </div>
+          <div
+            v-if="latestConversation?.createdAt"
+            class="h-3 w-px bg-n-strong rounded-lg"
+          />
+          <span
+            v-if="latestConversation?.updatedAt"
+            class="text-label-small text-n-slate-11 truncate min-w-0"
+          >
+            {{ formatTimestamp(latestConversation.updatedAt) }}
+          </span>
+        </div>
+        <ContactLabels
+          v-if="latestConversation?.labels?.length > 0"
+          :labels="latestConversation.labels"
+          class="flex-1 min-w-0 sm:justify-end w-full sm:w-auto"
+          disable-toggle
+        >
+          <template #before>
+            <div data-before-slot class="flex items-center gap-1.5">
+              <CardPriorityIcon
+                v-if="latestConversation.priority"
+                :priority="latestConversation.priority"
+                class="flex-shrink-0"
+              />
+              <Avatar
+                v-if="assignee?.name"
+                v-tooltip.top="assignee.name"
+                :name="assignee.name"
+                :src="assignee.thumbnail"
+                :size="14"
+                :status="assignee.availabilityStatus"
+                hide-offline-status
+                rounded-full
+              />
+              <CardStatusIcon
+                v-if="latestConversation.status"
+                :status="latestConversation.status"
+              />
+              <div class="h-3 w-px bg-n-weak rounded-lg mx-1" />
+            </div>
+          </template>
+        </ContactLabels>
+        <div v-else class="flex items-center justify-end gap-1.5 flex-1">
+          <CardPriorityIcon
+            v-if="latestConversation.priority"
+            :priority="latestConversation.priority"
+            class="flex-shrink-0"
+          />
+          <Avatar
+            v-if="assignee?.name"
+            v-tooltip.top="assignee.name"
+            :name="assignee.name"
+            :src="assignee.thumbnail"
+            :size="14"
+            :status="assignee.availability_status"
+            hide-offline-status
+            rounded-full
+          />
+          <CardStatusIcon
+            v-if="latestConversation.status"
+            :status="latestConversation.status"
+          />
+        </div>
+      </div>
+      <CardContent
+        v-if="lastMessageInConversation"
+        :last-message="lastMessageInConversation"
+        :unread-count="lastMessageInConversation?.conversation?.unreadCount"
+      />
+    </div>
+  </div>
+</template>
@@ -1,68 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
-import Policy from 'dashboard/components/policy.vue';
-
-defineProps({
-  selectedContact: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const [showDeleteSection, toggleDeleteSection] = useToggle();
-const confirmDeleteContactDialogRef = ref(null);
-
-const openConfirmDeleteContactDialog = () => {
-  confirmDeleteContactDialogRef.value?.dialogRef.open();
-};
-</script>
-
-<template>
-  <Policy :permissions="['administrator']">
-    <div class="flex flex-col items-start border-t border-n-strong px-6 py-5">
-      <Button
-        :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
-        sm
-        link
-        slate
-        class="hover:!no-underline text-n-slate-12"
-        icon="i-lucide-chevron-down"
-        trailing-icon
-        @click="toggleDeleteSection()"
-      />
-
-      <div
-        class="transition-all duration-300 ease-in-out grid w-full overflow-hidden"
-        :class="
-          showDeleteSection
-            ? 'grid-rows-[1fr] opacity-100 mt-2'
-            : 'grid-rows-[0fr] opacity-0 mt-0'
-        "
-      >
-        <div class="overflow-hidden min-h-0">
-          <span class="inline-flex text-n-slate-11 text-sm items-center gap-1">
-            {{ t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.MESSAGE') }}
-            <Button
-              :label="t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.BUTTON')"
-              sm
-              ruby
-              link
-              @click="openConfirmDeleteContactDialog()"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-    <ConfirmContactDeleteDialog
-      ref="confirmDeleteContactDialogRef"
-      :selected-contact="selectedContact"
-    />
-  </Policy>
-</template>
@@ -1,41 +1,46 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';

-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
+import ContactCardOverview from 'dashboard/components-next/Contacts/ContactsCard/ContactCardOverview.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Flag from 'dashboard/components-next/flag/Flag.vue';
-import ContactDeleteSection from 'dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import ContactLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Policy from 'dashboard/components/policy.vue';
+import ContactAttributeDisplay from './ContactAttributeDisplay.vue';
 import countries from 'shared/constants/countries';

 const props = defineProps({
  id: { type: Number, required: true },
  name: { type: String, default: '' },
  email: { type: String, default: '' },
+  labels: { type: Array, default: () => [] },
  additionalAttributes: { type: Object, default: () => ({}) },
+  customAttributes: { type: Object, default: () => ({}) },
  phoneNumber: { type: String, default: '' },
  thumbnail: { type: String, default: '' },
  availabilityStatus: { type: String, default: null },
  isExpanded: { type: Boolean, default: false },
-  isUpdating: { type: Boolean, default: false },
-  selectable: { type: Boolean, default: false },
  isSelected: { type: Boolean, default: false },
 });

 const emit = defineEmits([
  'toggle',
-  'updateContact',
  'showContact',
  'select',
-  'avatarHover',
+  'sendMessage',
+  'deleteContact',
 ]);

 const { t } = useI18n();
+const store = useStore();

-const contactsFormRef = ref(null);
+const isPrefetching = ref(false);
+const hasPrefetched = ref(false);

 const getInitialContactData = () => ({
  id: props.id,
@@ -43,12 +48,11 @@ const getInitialContactData = () => ({
  email: props.email,
  phoneNumber: props.phoneNumber,
  additionalAttributes: props.additionalAttributes,
+  labels: props.labels,
 });

 const contactData = ref(getInitialContactData());

-const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
-
 const countriesMap = computed(() => {
  return countries.reduce((acc, country) => {
    acc[country.code] = country;
@@ -75,6 +79,11 @@ const countryDetails = computed(() => {
  };
 });

+const companyName = computed(() => {
+  const attributes = props.additionalAttributes || {};
+  return attributes.companyName || '';
+});
+
 const formattedLocation = computed(() => {
  if (!countryDetails.value) return '';

@@ -83,14 +92,6 @@ const formattedLocation = computed(() => {
    .join(' ');
 });

-const handleFormUpdate = updatedData => {
-  Object.assign(contactData.value, updatedData);
-};
-
-const handleUpdateContact = () => {
-  emit('updateContact', contactData.value);
-};
-
 const onClickExpand = () => {
  emit('toggle');
  contactData.value = getInitialContactData();
@@ -98,147 +99,275 @@ const onClickExpand = () => {

 const onClickViewDetails = () => emit('showContact', props.id);

+const onClickOpenSendMessage = () => emit('sendMessage', props.id);
+
+const onClickDeleteContact = () => {
+  emit('deleteContact', props.id);
+};
+
 const toggleSelect = checked => {
  emit('select', checked);
 };

-const handleAvatarHover = isHovered => {
-  emit('avatarHover', isHovered);
+const prefetchContactData = async () => {
+  if (hasPrefetched.value || isPrefetching.value || !props.id) return;
+
+  isPrefetching.value = true;
+  try {
+    await Promise.all([
+      store.dispatch('contactNotes/get', { contactId: props.id }),
+      store.dispatch('contactConversations/get', props.id),
+    ]);
+    hasPrefetched.value = true;
+  } catch (error) {
+    // error
+  } finally {
+    isPrefetching.value = false;
+  }
+};
+
+const handleExpandHover = isHovered => {
+  if (isHovered && !props.isExpanded) {
+    prefetchContactData();
+  }
 };
 </script>

 <template>
  <div class="relative">
-    <CardLayout
-      :key="id"
-      layout="row"
-      :class="{
-        'outline-n-weak !bg-n-slate-3 dark:!bg-n-solid-3': isSelected,
-      }"
+    <div
+      class="flex flex-col gap-2 p-2 lg:grid lg:gap-4 lg:items-center lg:rounded-lg lg:transition-all lg:duration-200 lg:grid-cols-[minmax(30%,1fr)_minmax(50%,1.5fr)_1fr]"
+      :class="{ 'border-b border-n-weak lg:border-none': isExpanded }"
    >
-      <div class="flex items-center justify-start flex-1 gap-4">
+      <div
+        class="flex items-center gap-3 lg:gap-2"
+        :class="{ 'lg:col-span-3': isExpanded }"
+      >
+        <div class="flex-shrink-0 size-5 flex items-center justify-center">
+          <Checkbox
+            :model-value="isSelected"
+            @change="event => toggleSelect(event.target.checked)"
+          />
+        </div>
+
        <div
-          class="relative"
-          @mouseenter="handleAvatarHover(true)"
-          @mouseleave="handleAvatarHover(false)"
+          class="relative hidden lg:block size-4 rounded-md hover:bg-n-alpha-2 flex-shrink-0"
+          @mouseenter.passive="handleExpandHover(true)"
+          @mouseleave.passive="handleExpandHover(false)"
        >
+          <Button
+            icon="i-lucide-chevron-down"
+            link
+            slate
+            sm
+            no-animation
+            class="flex-shrink-0 !size-8 absolute -inset-2"
+            :class="{ 'rotate-180': isExpanded }"
+            @click="onClickExpand"
+          />
+        </div>
+
+        <div class="flex-shrink-0 flex items-center">
          <Avatar
            :name="name"
            :src="thumbnail"
-            :size="48"
+            :size="24"
            :status="availabilityStatus"
            hide-offline-status
-            rounded-full
-          >
-            <template v-if="selectable" #overlay="{ size }">
-              <label
-                class="flex items-center justify-center rounded-full cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px] border border-n-weak"
-                :style="{ width: `${size}px`, height: `${size}px` }"
-                @click.stop
-              >
-                <Checkbox
-                  :model-value="isSelected"
-                  @change="event => toggleSelect(event.target.checked)"
-                />
-              </label>
-            </template>
-          </Avatar>
+          />
        </div>
-        <div class="flex flex-col gap-0.5 flex-1">
-          <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
-            <span class="text-base font-medium truncate text-n-slate-12">
-              {{ name }}
-            </span>
-            <span class="inline-flex items-center gap-1">
-              <span
-                v-if="additionalAttributes?.companyName"
-                class="i-ph-building-light size-4 text-n-slate-10 mb-0.5"
-              />
-              <span
-                v-if="additionalAttributes?.companyName"
-                class="text-sm truncate text-n-slate-11"
-              >
-                {{ additionalAttributes.companyName }}
-              </span>
-            </span>
-          </div>
+
+        <h4
+          class="text-heading-3 my-0 capitalize hover:cursor-pointer truncate text-n-slate-12 lg:max-w-40"
+          @click="onClickViewDetails"
+        >
+          {{ name }}
+        </h4>
+
+        <div
+          v-if="isExpanded"
+          class="hidden lg:flex items-center gap-2 flex-shrink-0"
+        >
          <div
-            class="flex flex-wrap items-center justify-start gap-x-3 gap-y-1"
+            class="w-px h-3 bg-n-strong rounded-md ltr:ml-1 rtl:mr-1 flex-shrink-0"
+          />
+          <Button
+            :label="t('CONTACTS_LAYOUT.CARD.ACTIONS.SEND_MESSAGE')"
+            icon="i-lucide-message-circle"
+            link
+            sm
+            class="hover:!no-underline"
+            @click="onClickOpenSendMessage"
+          />
+          <div
+            class="w-px h-3 bg-n-strong rounded-md ltr:ml-1 rtl:mr-1 flex-shrink-0"
+          />
+          <Button
+            :label="t('CONTACTS_LAYOUT.CARD.ACTIONS.VIEW_DETAILS')"
+            icon="i-lucide-info"
+            link
+            sm
+            class="hover:!no-underline"
+            @click="onClickViewDetails"
+          />
+          <Policy
+            :permissions="['administrator']"
+            class="flex items-center gap-2"
          >
-            <div v-if="email" class="truncate max-w-72" :title="email">
-              <span class="text-sm text-n-slate-11">
-                {{ email }}
-              </span>
-            </div>
-            <div v-if="email" class="w-px h-3 truncate bg-n-slate-6" />
-            <span v-if="phoneNumber" class="text-sm truncate text-n-slate-11">
-              {{ phoneNumber }}
-            </span>
-            <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
-            <span
-              v-if="countryDetails"
-              class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
-            >
-              <Flag :country="countryDetails.countryCode" class="size-3.5" />
-              {{ formattedLocation }}
-            </span>
-            <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
-            <Button
-              :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
-              variant="link"
-              size="xs"
-              @click="onClickViewDetails"
+            <div
+              class="w-px h-3 bg-n-strong rounded-md ltr:ml-1 rtl:mr-1 flex-shrink-0"
            />
-          </div>
+            <Button
+              :label="t('CONTACTS_LAYOUT.CARD.ACTIONS.DELETE_CONTACT')"
+              icon="i-lucide-trash-2"
+              link
+              sm
+              ruby
+              class="hover:!no-underline"
+              @click="onClickDeleteContact"
+            />
+          </Policy>
+        </div>
+
+        <div
+          v-if="companyName"
+          class="my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 max-w-40 min-w-0 bg-n-label-color outline outline-1 outline-n-label-border -outline-offset-1"
+          :class="{ 'lg:hidden': isExpanded }"
+        >
+          <Icon
+            icon="i-lucide-briefcase-business"
+            class="size-3.5 flex-shrink-0 text-n-slate-11"
+          />
+          <span class="truncate text-label-small">{{ companyName }}</span>
+        </div>
+
+        <div
+          class="relative lg:hidden size-5 rounded-md hover:bg-n-alpha-2 ltr:ml-auto rtl:mr-auto flex-shrink-0"
+          @mouseenter.passive="handleExpandHover(true)"
+          @mouseleave.passive="handleExpandHover(false)"
+        >
+          <Button
+            icon="i-lucide-chevron-down"
+            link
+            slate
+            sm
+            no-animation
+            class="flex-shrink-0 !size-8 absolute -inset-1.5"
+            :class="{ 'rotate-180': isExpanded }"
+            @click="onClickExpand"
+          />
        </div>
      </div>

-      <Button
-        icon="i-lucide-chevron-down"
-        variant="ghost"
-        color="slate"
-        size="xs"
-        :class="{ 'rotate-180': isExpanded }"
-        @click="onClickExpand"
-      />
-
-      <template #after>
+      <div
+        class="flex items-center gap-2 lg:gap-2 lg:min-w-0"
+        :class="{ 'lg:hidden': isExpanded }"
+      >
        <div
-          class="transition-all duration-500 ease-in-out grid overflow-hidden"
-          :class="
-            isExpanded
-              ? 'grid-rows-[1fr] opacity-100'
-              : 'grid-rows-[0fr] opacity-0'
-          "
+          v-if="email"
+          v-tooltip.top="{
+            content: email,
+            delay: { show: 500, hide: 0 },
+          }"
+          class="flex items-center gap-1 truncate lg:max-w-72"
        >
-          <div class="overflow-hidden">
-            <div class="flex flex-col gap-6 p-6 border-t border-n-strong">
-              <ContactsForm
-                ref="contactsFormRef"
-                :contact-data="contactData"
-                @update="handleFormUpdate"
-              />
-              <div>
-                <Button
-                  :label="
-                    t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')
-                  "
-                  size="sm"
-                  :is-loading="isUpdating"
-                  :disabled="isUpdating || isFormInvalid"
-                  @click="handleUpdateContact"
-                />
-              </div>
-            </div>
-            <ContactDeleteSection
-              :selected-contact="{
-                id: props.id,
-                name: props.name,
-              }"
-            />
-          </div>
+          <Icon
+            icon="i-woot-mail"
+            class="size-4 flex-shrink-0 text-n-slate-11"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ email }}
+          </span>
        </div>
-      </template>
-    </CardLayout>
+
+        <div
+          v-if="email && phoneNumber"
+          class="w-px h-3 bg-n-strong rounded-lg flex-shrink-0"
+        />
+
+        <div
+          v-if="phoneNumber"
+          v-tooltip.top="{
+            content: phoneNumber,
+            delay: { show: 500, hide: 0 },
+          }"
+          class="flex items-center gap-1 truncate lg:max-w-72"
+        >
+          <Icon
+            icon="i-lucide-phone"
+            class="size-3 flex-shrink-0 text-n-slate-11"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ phoneNumber }}
+          </span>
+        </div>
+
+        <div
+          v-if="countryDetails"
+          class="w-px h-3 bg-n-strong rounded-lg flex-shrink-0"
+        />
+
+        <div
+          v-if="countryDetails"
+          v-tooltip.top="{
+            content: formattedLocation,
+            delay: { show: 500, hide: 0 },
+          }"
+          class="flex items-center gap-2 min-w-0 text-n-slate-11"
+        >
+          <Flag
+            :country="countryDetails.countryCode"
+            class="size-3.5 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ formattedLocation }}
+          </span>
+        </div>
+        <ContactAttributeDisplay :custom-attributes="customAttributes" />
+      </div>
+
+      <div class="flex flex-col gap-2 lg:hidden">
+        <div v-if="labels.length > 0" class="min-h-[1rem]">
+          <ContactLabels :labels="labels" disable-toggle class="my-0" />
+        </div>
+
+        <Button
+          :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
+          link
+          xs
+          class="w-fit hover:!no-underline"
+          slate
+          @click="onClickViewDetails"
+        />
+      </div>
+
+      <div
+        class="hidden lg:flex items-center justify-end gap-3 flex-shrink-0"
+        :class="{ 'lg:hidden': isExpanded }"
+      >
+        <ContactLabels
+          :labels="labels"
+          disable-toggle
+          class="my-0 flex-1 justify-end"
+        />
+      </div>
+    </div>
+
+    <div
+      class="grid [transition:grid-template-rows_300ms_ease-out]"
+      :class="[
+        isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        isExpanded ? '' : 'overflow-hidden',
+      ]"
+    >
+      <div class="min-h-0">
+        <div
+          class="relative flex flex-col pt-3 pb-4 lg:pt-[1.125rem] lg:pb-5 overflow-visible transition-opacity duration-[600ms] ease-out"
+          :class="isExpanded ? 'opacity-100 delay-200' : 'opacity-0'"
+        >
+          <ContactCardOverview :contact-data="contactData" />
+        </div>
+      </div>
+    </div>
  </div>
 </template>
@@ -73,15 +73,15 @@ const closeMobileSidebar = () => {

 <template>
  <section
-    class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-surface-1"
  >
    <div
-      class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
+      class="flex flex-col w-full h-full transition-all duration-300 ltr:3xl:ml-56 rtl:3xl:mr-56"
    >
      <header class="sticky top-0 z-10 px-6 3xl:px-0">
-        <div class="w-full mx-auto max-w-[40.625rem]">
+        <div class="w-full mx-auto max-w-4xl">
          <div
-            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
+            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-4 gap-2"
          >
            <Breadcrumb
              :items="breadcrumbItems"
@@ -94,23 +94,20 @@ const closeMobileSidebar = () => {
                    ? $t('CONTACTS_LAYOUT.HEADER.BLOCK_CONTACT')
                    : $t('CONTACTS_LAYOUT.HEADER.UNBLOCK_CONTACT')
                "
-                size="sm"
                slate
-                :is-loading="isUpdating"
                :disabled="isUpdating"
                @click="toggleBlock"
              />
              <VoiceCallButton
                :phone="selectedContact?.phoneNumber"
                :contact-id="contactId"
+                size="md"
                :label="$t('CONTACT_PANEL.CALL')"
-                size="sm"
              />
              <ComposeConversation :contact-id="contactId">
                <template #trigger="{ toggle }">
                  <Button
                    :label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
-                    size="sm"
                    @click="toggle"
                  />
                </template>
@@ -120,7 +117,7 @@ const closeMobileSidebar = () => {
        </div>
      </header>
      <main class="flex-1 px-6 overflow-y-auto 3xl:px-px">
-        <div class="w-full py-4 mx-auto max-w-[40.625rem]">
+        <div class="w-full pt-2.5 pb-4 mx-auto max-w-4xl">
          <slot name="default" />
        </div>
      </main>
@@ -129,7 +126,7 @@ const closeMobileSidebar = () => {
    <!-- Desktop sidebar -->
    <div
      v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-5 max-w-md ltr:border-l rtl:border-r border-n-weak bg-n-surface-2"
    >
      <slot name="sidebar" />
    </div>
@@ -1,7 +1,8 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import { useI18n } from 'vue-i18n';

 defineProps({
  selectedContact: {
@@ -37,13 +38,13 @@ const { t } = useI18n();

 <template>
  <div class="flex flex-col">
-    <div class="flex flex-col gap-2">
-      <div class="flex items-center justify-between h-5 gap-2">
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center justify-between h-6 gap-2">
        <label class="text-sm text-n-slate-12">
          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY') }}
        </label>
        <span
-          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-teal-11 bg-n-alpha-2"
+          class="flex items-center justify-center px-1.5 h-6 font-420 text-xs rounded-md text-n-teal-11 outline outline-1 outline-n-weak"
        >
          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_HELP_LABEL') }}
        </span>
@@ -69,7 +70,7 @@ const { t } = useI18n();
        @search="query => emit('search', query)"
      />
    </div>
-    <div class="relative flex justify-center gap-2 top-4">
+    <div class="relative flex justify-center gap-2 mt-4 mb-3">
      <div v-for="i in 3" :key="i" class="relative w-4 h-8">
        <div
          class="absolute w-0 h-0 border-l-[4px] border-r-[4px] border-b-[6px] border-l-transparent border-r-transparent border-n-strong ltr:translate-x-[4px] rtl:-translate-x-[4px] -translate-y-[4px]"
@@ -79,13 +80,13 @@ const { t } = useI18n();
        />
      </div>
    </div>
-    <div class="flex flex-col gap-2">
-      <div class="flex items-center justify-between h-5 gap-2">
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center justify-between h-6 gap-2">
        <label class="text-sm text-n-slate-12">
          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT') }}
        </label>
        <span
-          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-ruby-11 bg-n-alpha-2"
+          class="flex items-center justify-center px-1.5 h-6 font-420 text-xs rounded-md text-n-ruby-11 outline outline-1 outline-n-weak"
        >
          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT_HELP_LABEL') }}
        </span>
@@ -4,11 +4,11 @@ import { useI18n } from 'vue-i18n';
 import { required, email } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { splitName } from '@chatwoot/utils';
-import countries from 'shared/constants/countries.js';
 import Input from 'dashboard/components-next/input/Input.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import CountryDropdown from 'dashboard/components-next/Countries/CountryDropdown.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
+import CompaniesDropdown from 'dashboard/components-next/Companies/CompaniesDropdown.vue';

 const props = defineProps({
  contactData: {
@@ -124,10 +124,6 @@ const prepareStateBasedOnProps = () => {
  });
 };

-const countryOptions = computed(() =>
-  countries.map(({ name, id }) => ({ label: name, value: id }))
-);
-
 const editDetailsForm = computed(() =>
  Object.keys(FORM_CONFIG).map(key => ({
    key,
@@ -206,9 +202,14 @@ const getMessageType = key => {
    : 'info';
 };

-const handleCountrySelection = value => {
-  const selectedCountry = countries.find(option => option.id === value);
-  state.additionalAttributes.country = selectedCountry?.name || '';
+const handleCountryChange = country => {
+  state.additionalAttributes.countryCode = country?.id || '';
+  state.additionalAttributes.country = country?.name || '';
+  emit('update', state);
+};
+
+const handleCompanyChange = company => {
+  state.additionalAttributes.companyName = company?.name || '';
  emit('update', state);
 };

@@ -238,41 +239,49 @@ defineExpose({
 </script>

 <template>
-  <div class="flex flex-col gap-6">
-    <div class="flex flex-col items-start gap-2">
-      <span class="py-1 text-sm font-medium text-n-slate-12">
+  <div class="flex flex-col gap-6 w-full">
+    <div class="flex flex-col items-start gap-5 w-full">
+      <span class="text-sm font-medium text-n-slate-12">
        {{ t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.TITLE') }}
      </span>
      <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
        <template v-for="item in editDetailsForm" :key="item.key">
-          <ComboBox
+          <CountryDropdown
            v-if="item.key === 'COUNTRY'"
            v-model="state.additionalAttributes.countryCode"
-            :options="countryOptions"
            :placeholder="item.placeholder"
-            class="[&>div>button]:h-8"
            :class="{
-              '[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:!outline-transparent':
-                !isDetailsView,
-              '[&>div>button]:!bg-n-alpha-black2': isDetailsView,
+              '[&>div>button]:h-8': !isDetailsView,
+              '[&_button]:!h-10 [&_button]:!rounded-[10px]': isDetailsView,
            }"
-            @update:model-value="handleCountrySelection"
+            @change="handleCountryChange"
          />
          <PhoneNumberInput
            v-else-if="item.key === 'PHONE_NUMBER'"
            v-model="getFormBinding(item.key).value"
            :placeholder="item.placeholder"
            :show-border="isDetailsView"
+            :compact="!isDetailsView"
+          />
+          <CompaniesDropdown
+            v-else-if="item.key === 'COMPANY_NAME'"
+            :placeholder="item.placeholder"
+            :selected-company-name="state.additionalAttributes.companyName"
+            :class="{
+              '[&>div>button]:h-8': !isDetailsView,
+              '[&_button]:!h-10 [&_button]:!rounded-[10px]': isDetailsView,
+            }"
+            @change="handleCompanyChange"
          />
          <Input
            v-else
            v-model="getFormBinding(item.key).value"
            :placeholder="item.placeholder"
            :message-type="getMessageType(item.key)"
-            :custom-input-class="`h-8 !pt-1 !pb-1 ${
+            :custom-input-class="`!pt-1 !pb-1 ${
              !isDetailsView
-                ? '[&:not(.error,.focus)]:!outline-transparent'
-                : ''
+                ? '[&:not(.error,.focus)]:!outline-transparent h-8'
+                : 'h-10 !rounded-[10px]'
            }`"
            class="w-full"
            @input="
@@ -287,18 +296,19 @@ defineExpose({
        </template>
      </div>
    </div>
-    <div class="flex flex-col items-start gap-2">
-      <span class="py-1 text-sm font-medium text-n-slate-12">
+    <div class="flex flex-col items-start gap-5">
+      <span class="text-sm font-medium text-n-slate-12">
        {{ t('CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.TITLE') }}
      </span>
      <div class="flex flex-wrap gap-2">
        <div
          v-for="item in socialProfilesForm"
          :key="item.key"
-          class="flex items-center h-8 gap-2 px-2 rounded-lg"
+          class="flex items-center h-8 gap-2 px-2 bg-n-alpha-2 dark:bg-n-solid-2"
          :class="{
-            'bg-n-alpha-2 dark:bg-n-solid-2': isDetailsView,
-            'bg-n-alpha-2 dark:bg-n-solid-3': !isDetailsView,
+            'rounded-[10px] outline-1 outline outline-n-weak -outline-offset-1 hover:outline-n-slate-6':
+              isDetailsView,
+            'rounded-lg': !isDetailsView,
          }"
        >
          <Icon
@@ -1,10 +1,13 @@
 <script setup>
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import ContactSortMenu from './components/ContactSortMenu.vue';
 import ContactMoreActions from './components/ContactMoreActions.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
+import DisplayPropertiesMenu from './components/DisplayPropertiesMenu.vue';

 defineProps({
  showSearch: { type: Boolean, default: true },
@@ -29,17 +32,25 @@ const emit = defineEmits([
  'createSegment',
  'deleteSegment',
 ]);
+
+const [showDisplayProperties, toggleDisplayProperties] = useToggle(false);
+
+const closeDisplayProperties = () => {
+  if (showDisplayProperties.value) {
+    toggleDisplayProperties(false);
+  }
+};
 </script>

 <template>
  <header class="sticky top-0 z-10">
    <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-start sm:items-center justify-between w-full py-4 px-6 gap-2 mx-auto after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
    >
-      <span class="text-xl font-medium truncate text-n-slate-12">
+      <span class="text-heading-1 truncate text-n-slate-12">
        {{ headerTitle }}
      </span>
-      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
+      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-3">
        <div v-if="showSearch" class="flex items-center gap-2 w-full">
          <Input
            :model-value="searchValue"
@@ -59,7 +70,23 @@ const emit = defineEmits([
            </template>
          </Input>
        </div>
-        <div class="flex items-center flex-shrink-0 gap-4">
+        <div class="flex items-center flex-shrink-0 gap-2">
+          <div class="w-px h-3 rounded-lg bg-n-strong" />
+          <div v-on-click-outside="closeDisplayProperties" class="relative">
+            <Button
+              icon="i-lucide-settings-2"
+              color="slate"
+              :label="$t('CONTACTS_LAYOUT.HEADER.DISPLAY_PROPERTIES')"
+              size="sm"
+              :variant="!showDisplayProperties ? 'ghost' : 'faded'"
+              @click="toggleDisplayProperties()"
+            />
+            <DisplayPropertiesMenu
+              v-if="showDisplayProperties"
+              class="absolute top-full mt-1 max-md:ltr:left-0 max-md:rtl:right-0 md:ltr:right-0 md:rtl:left-0"
+            />
+          </div>
+          <div class="w-px h-3 rounded-lg bg-n-strong mx-1" />
          <div class="flex items-center gap-2">
            <div v-if="!isLabelView && !isActiveView" class="relative">
              <Button
@@ -112,7 +139,9 @@ const emit = defineEmits([
              @export="emit('export')"
            />
          </div>
-          <div class="w-px h-4 bg-n-strong" />
+          <div
+            class="w-px h-3 rounded-lg bg-n-strong ltr:ml-1 rtl:mr-2 ltr:mr-1 rtl:ml-2"
+          />
          <ComposeConversation>
            <template #trigger="{ toggle }">
              <Button :label="buttonLabel" size="sm" @click="toggle" />
@@ -294,7 +294,7 @@ defineExpose({
  >
    <template #filter>
      <div
-        class="absolute mt-1 ltr:-right-52 rtl:-left-52 sm:ltr:right-0 sm:rtl:left-0 top-full"
+        class="absolute z-20 mt-1 ltr:-right-52 rtl:-left-52 sm:ltr:right-0 sm:rtl:left-0 top-full"
      >
        <ContactsFilter
          v-if="showFiltersModal"
@@ -105,7 +105,7 @@ const handleOrderChange = value => {
    <div
      v-if="isMenuOpen"
      v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute z-20 top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
    >
      <div class="flex items-center justify-between gap-2">
        <span class="text-sm text-n-slate-12">
@@ -62,7 +62,7 @@ const activeFilterQueryData = computed(() => {
      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
    "
    :show-clear-button="!hasActiveSegments"
-    class="max-w-[60rem] px-6"
+    class="max-w-[105rem] px-6 relative z-20"
    @open-filter="emit('openFilter')"
    @clear-filters="emit('clearFilters')"
  />
@@ -0,0 +1,162 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+
+const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const contactAttributes = useMapGetter('attributes/getContactAttributes');
+
+const MAX_SELECTED = 3;
+
+const selectedAttributeKeys = computed({
+  get: () => uiSettings.value?.contact_list_display_properties || [],
+  set: value => {
+    updateUISettings({
+      contact_list_display_properties: value,
+    });
+  },
+});
+
+const selectedAttributes = computed(() => {
+  return (
+    contactAttributes.value?.filter(attr =>
+      selectedAttributeKeys.value.includes(attr.attributeKey)
+    ) || []
+  );
+});
+
+const otherAttributes = computed(() => {
+  return (
+    contactAttributes.value?.filter(
+      attr => !selectedAttributeKeys.value.includes(attr.attributeKey)
+    ) || []
+  );
+});
+
+const canSelectMore = computed(() => {
+  return selectedAttributeKeys.value.length < MAX_SELECTED;
+});
+
+const toggleAttribute = attributeKey => {
+  const currentKeys = [...selectedAttributeKeys.value];
+  const index = currentKeys.indexOf(attributeKey);
+
+  if (index > -1) {
+    currentKeys.splice(index, 1);
+  } else if (currentKeys.length < MAX_SELECTED) {
+    currentKeys.push(attributeKey);
+  }
+
+  selectedAttributeKeys.value = currentKeys;
+};
+
+const removeAttribute = attributeKey => {
+  const currentKeys = [...selectedAttributeKeys.value];
+  const index = currentKeys.indexOf(attributeKey);
+  if (index > -1) {
+    currentKeys.splice(index, 1);
+    selectedAttributeKeys.value = currentKeys;
+  }
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 px-3 pt-3 pb-4 bg-n-alpha-3 rounded-xl outline outline-1 outline-n-weak -outline-offset-1 w-80 z-20 backdrop-blur-md"
+  >
+    <div class="flex items-start gap-1 flex-col">
+      <h3 class="text-heading-3 text-n-slate-12 m-0">
+        {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.TITLE') }}
+      </h3>
+      <p class="text-body-main text-n-slate-11 m-0">
+        {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.DESCRIPTION') }}
+      </p>
+    </div>
+
+    <div v-if="selectedAttributes.length > 0" class="flex flex-col gap-2">
+      <span class="pt-2 text-label-small text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.SELECTED_ATTRIBUTES') }}
+      </span>
+      <div class="flex flex-wrap gap-2">
+        <div
+          v-for="attribute in selectedAttributes"
+          :key="attribute.attributeKey"
+          class="inline-flex items-center gap-1 ltr:pl-1 rtl:pr-1 ltr:pr-2 rtl:pl-2 rounded-lg bg-n-button-color shadow-[0_1px_2px_0_rgba(27,28,29,0.04)] outline outline-1 -outline-offset-1 outline-n-container h-8"
+        >
+          <div class="size-5 flex items-center justify-center">
+            <Checkbox
+              model-value
+              @change="removeAttribute(attribute.attributeKey)"
+            />
+          </div>
+          <span class="text-body-main text-n-slate-12">
+            {{ attribute.attributeDisplayName }}
+          </span>
+          <Button
+            icon="i-lucide-x"
+            slate
+            xs
+            ghost
+            class="!size-4 !rounded-md"
+            @click="removeAttribute(attribute.attributeKey)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="otherAttributes.length > 0" class="flex flex-col gap-2">
+      <span class="pt-2 text-label-small text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.OTHER_ATTRIBUTES') }}
+      </span>
+      <div class="flex flex-wrap gap-2">
+        <div
+          v-for="attribute in otherAttributes"
+          :key="attribute.attributeKey"
+          class="inline-flex items-center gap-1 ltr:pl-1 rtl:pr-1 ltr:pr-2 rtl:pl-2 rounded-lg shadow-[0_1px_2px_0_rgba(27,28,29,0.04)] outline outline-1 -outline-offset-1 outline-n-container h-8 bg-n-button-color"
+          :class="[
+            canSelectMore ? 'cursor-pointer' : 'opacity-50 cursor-not-allowed',
+          ]"
+          @click="canSelectMore && toggleAttribute(attribute.attributeKey)"
+        >
+          <div class="size-5 flex items-center justify-center">
+            <Checkbox
+              :model-value="false"
+              :disabled="!canSelectMore"
+              @change="toggleAttribute(attribute.attributeKey)"
+            />
+          </div>
+          <span class="text-body-main text-n-slate-12">
+            {{ attribute.attributeDisplayName }}
+          </span>
+          <Button
+            v-if="attribute.attributeDescription"
+            v-tooltip.top="{
+              content: attribute.attributeDescription,
+              delay: { show: 500, hide: 0 },
+            }"
+            icon="i-lucide-info"
+            slate
+            xs
+            ghost
+            :disabled="!canSelectMore"
+            class="!size-4 !rounded-md"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="contactAttributes.length === 0"
+      class="flex flex-col items-center justify-center gap-3 py-8"
+    >
+      <p class="text-body-main text-center text-n-slate-11 m-0">
+        {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.NO_ATTRIBUTES') }}
+      </p>
+    </div>
+  </div>
+</template>
@@ -65,7 +65,7 @@ const openFilter = () => {

 <template>
  <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-surface"
  >
    <div class="flex flex-col w-full h-full transition-all duration-300">
      <ContactListHeaderWrapper
@@ -86,7 +86,7 @@ const openFilter = () => {
        @clear-filters="emit('clearFilters')"
      />
      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
+        <div class="w-full mx-auto">
          <ContactsActiveFiltersPreview
            v-if="showActiveFiltersPreview"
            :active-segment="activeSegment"
@@ -96,7 +96,7 @@ const openFilter = () => {
          <slot name="default" />
        </div>
      </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0">
        <PaginationFooter
          current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
          :current-page="currentPage"
@@ -9,6 +9,7 @@ import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttrib
 import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
 import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
 import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
+import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';

 const props = defineProps({
  attribute: {
@@ -75,11 +76,15 @@ const CurrentAttributeComponent = computed(() => {

 <template>
  <div
-    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
+    class="grid grid-cols-[auto,auto] group/attribute items-center w-full gap-4"
    :class="isEditingView ? 'min-h-10' : 'min-h-11'"
  >
-    <div class="flex items-center justify-between truncate">
-      <span class="text-sm font-medium truncate text-n-slate-12">
+    <div class="flex items-center gap-1.5 min-w-0">
+      <HelperTextPopup
+        v-if="attribute.attributeDescription"
+        :message="attribute.attributeDescription"
+      />
+      <span class="text-body-main truncate text-n-slate-12">
        {{ attribute.attributeDisplayName }}
      </span>
    </div>
@@ -108,7 +108,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
 </script>

 <template>
-  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+  <div v-if="hasContactAttributes" class="flex flex-col gap-4 px-5 pt-4 pb-6">
    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
      <ContactCustomAttributeItem
        v-for="attribute in usedAttributes"
@@ -117,16 +117,16 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
        :attribute="attribute"
      />
    </div>
-    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
+    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-2">
      <div class="flex-1 h-[1px] bg-n-slate-5" />
-      <span class="text-sm font-medium text-n-slate-10">{{
+      <span class="text-xs font-420 text-n-slate-10">{{
        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.UNUSED_ATTRIBUTES', {
          count: unusedAttributesCount,
        })
      }}</span>
      <div class="flex-1 h-[1px] bg-n-slate-5" />
    </div>
-    <div class="flex flex-col gap-3">
+    <div class="flex flex-col gap-4">
      <div v-if="!hasNoUnusedAttributes" class="relative">
        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
        <input
@@ -135,7 +135,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
          :placeholder="
            t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.SEARCH_PLACEHOLDER')
          "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 ltr:pl-10 ltr:pr-2 rtl:pr-10 rtl:pl-2 mb-0 reset-base outline-n-weak outline-1 outline hover:outline-n-slate-6 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12 outline-offset-0"
        />
      </div>
      <div
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';

 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
@@ -13,11 +14,6 @@ const route = useRoute();
 const conversations = useMapGetter(
  'contactConversations/getAllConversationsByContactId'
 );
-const contactsById = useMapGetter('contacts/getContactById');
-const stateInbox = useMapGetter('inboxes/getInboxById');
-const accountLabels = useMapGetter('labels/getLabels');
-
-const accountLabelsValue = computed(() => accountLabels.value);

 const uiFlags = useMapGetter('contactConversations/getUIFlags');
 const isFetching = computed(() => uiFlags.value.isFetching);
@@ -36,16 +32,17 @@ const contactConversations = computed(() =>
  </div>
  <div
    v-else-if="contactConversations.length > 0"
-    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+    class="px-6 pt-4 pb-6 divide-y divide-n-weak"
  >
    <ConversationCard
      v-for="conversation in contactConversations"
      :key="conversation.id"
-      :conversation="conversation"
-      :contact="contactsById(conversation.meta.sender.id)"
-      :state-inbox="stateInbox(conversation.inboxId)"
-      :account-labels="accountLabelsValue"
-      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+      :chat="useSnakeCase(conversation, { deep: true })"
+      enable-context-menu
+      compact
+      show-assignee
+      :allowed-context-menu-options="['open-new-tab', 'copy-link']"
+      :enable-selection="false"
    />
  </div>
  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
@@ -103,12 +103,12 @@ const onMergeContacts = async () => {
 </script>

 <template>
-  <div class="flex flex-col gap-8 px-6 py-6">
-    <div class="flex flex-col gap-2">
-      <h4 class="text-base text-n-slate-12">
+  <div class="flex flex-col gap-6 px-5 pb-6 pt-4">
+    <div class="flex flex-col gap-2 mt-4">
+      <h4 class="text-base font-medium text-n-slate-12">
        {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.TITLE') }}
      </h4>
-      <p class="text-sm text-n-slate-11">
+      <p class="text-sm font-420 text-n-slate-11">
        {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.DESCRIPTION') }}
      </p>
    </div>
@@ -126,13 +126,6 @@ const onMergeContacts = async () => {
      @search="onContactSearch"
    />
    <div class="flex items-center justify-between gap-3">
-      <Button
-        variant="faded"
-        color="slate"
-        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
-        @click="resetState"
-      />
      <Button
        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CONFIRM')"
        class="w-full"
@@ -140,6 +133,12 @@ const onMergeContacts = async () => {
        :disabled="isMergingContact"
        @click="onMergeContacts"
      />
+      <Button
+        slate
+        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
+        class="w-full"
+        @click="resetState"
+      />
    </div>
  </div>
 </template>
@@ -55,12 +55,12 @@ useKeyboardEvents(keyboardEvents);
 </script>

 <template>
-  <div class="flex flex-col gap-6 py-6">
+  <div class="flex flex-col gap-4 pt-4 pb-6">
    <Editor
      v-model="state.message"
      :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
      focus-on-mount
-      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 px-6"
+      class="[&>div]:px-4 [&>div]:py-4 px-5"
    >
      <template #actions>
        <div class="flex items-center gap-3">
@@ -87,7 +87,7 @@ useKeyboardEvents(keyboardEvents);
      <ContactNoteItem
        v-for="note in notes"
        :key="note.id"
-        class="mx-6 py-4"
+        class="mx-5 py-4"
        :note="note"
        :written-by="getWrittenBy(note)"
        allow-delete
@@ -48,10 +48,26 @@ onMounted(() => {
 </script>

 <template>
-  <div class="flex flex-col gap-2 border-b border-n-strong group/note">
-    <div class="flex items-center justify-between gap-2">
-      <div class="flex items-center gap-1.5 min-w-0">
+  <div class="flex flex-col gap-1.5 border-b border-n-strong group/note">
+    <div class="flex items-center justify-between w-full gap-1.5 min-w-0 h-9">
+      <div class="min-w-0 truncate text-n-slate-11 text-xs font-440">
+        {{ dynamicTime(note.createdAt) }}
+      </div>
+      <div class="flex items-center gap-1">
+        <Button
+          v-if="allowDelete"
+          ghost
+          ruby
+          size="xs"
+          icon="i-lucide-trash"
+          class="opacity-0 group-hover/note:opacity-100"
+          @click="handleDelete"
+        />
        <Avatar
+          v-tooltip.left="{
+            content: writtenBy,
+            delay: { show: 500, hide: 0 },
+          }"
          :name="note?.user?.name || 'Bot'"
          :src="
            note?.user?.name
@@ -61,30 +77,12 @@ onMounted(() => {
          :size="16"
          rounded-full
        />
-        <div class="min-w-0 truncate">
-          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
-            <span class="font-medium text-n-slate-12">{{ writtenBy }}</span>
-            {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
-            <span class="font-medium text-n-slate-12">
-              {{ dynamicTime(note.createdAt) }}
-            </span>
-          </span>
-        </div>
      </div>
-      <Button
-        v-if="allowDelete"
-        variant="faded"
-        color="ruby"
-        size="xs"
-        icon="i-lucide-trash"
-        class="opacity-0 group-hover/note:opacity-100"
-        @click="handleDelete"
-      />
    </div>
    <p
      ref="noteContentRef"
      v-dompurify-html="formatMessage(note.content || '')"
-      class="mb-0 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+      class="mb-0 text-body-main prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
      :class="{
        'line-clamp-4': collapsible && !isExpanded && needsCollapse,
      }"
@@ -11,6 +11,7 @@ import ContactLabels from 'dashboard/components-next/Contacts/ContactLabels/Cont
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
 import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
 import Policy from 'dashboard/components/policy.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';

 const props = defineProps({
  selectedContact: {
@@ -24,6 +25,8 @@ const emit = defineEmits(['goToContactsList']);
 const { t } = useI18n();
 const store = useStore();

+const wrapperRef = ref(null);
+
 const confirmDeleteContactDialogRef = ref(null);

 const avatarFile = ref(null);
@@ -121,17 +124,17 @@ const handleAvatarDelete = async () => {
 </script>

 <template>
-  <div class="flex flex-col items-start gap-8 pb-6">
-    <div class="flex flex-col items-start gap-3">
+  <div class="flex flex-col items-start gap-6 pb-6 w-full">
+    <div ref="wrapperRef" class="flex flex-col items-start gap-3 w-full">
      <Avatar
        :src="avatarSrc || ''"
        :name="selectedContact?.name || ''"
-        :size="72"
+        :size="64"
        allow-upload
        @upload="handleAvatarUpload"
        @delete="handleAvatarDelete"
      />
-      <div class="flex flex-col gap-1">
+      <div class="flex flex-col gap-2">
        <h3 class="text-base font-medium text-n-slate-12">
          {{ selectedContact?.name }}
        </h3>
@@ -140,27 +143,44 @@ const handleAvatarDelete = async () => {
            v-if="selectedContact?.identifier"
            class="inline-flex items-center gap-1 text-sm text-n-slate-11"
          >
-            <span class="i-ph-user-gear text-n-slate-10 size-4" />
+            <Icon
+              icon="i-ph-user-gear"
+              class="text-n-slate-10 size-4 flex-shrink-0"
+            />
            {{ selectedContact?.identifier }}
          </span>
-          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
-            <span
+          <span class="inline-flex items-start gap-1 text-sm text-n-slate-11">
+            <Icon
              v-if="selectedContact?.identifier"
-              class="i-ph-activity text-n-slate-10 size-4"
+              icon="i-ph-activity"
+              class="text-n-slate-10 size-4 flex-shrink-0 mt-0.5"
            />
-            {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
-            •
-            {{
-              $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
-                date: lastActivityAt,
-              })
-            }}
+            <div
+              class="flex flex-col sm:flex-row sm:inline-flex items-start sm:items-center gap-1 sm:gap-3"
+            >
+              <span>
+                {{
+                  $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt })
+                }}
+              </span>
+              <div class="w-px h-3 rounded-xl bg-n-weak hidden sm:block" />
+              <span>
+                {{
+                  $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
+                    date: lastActivityAt,
+                  })
+                }}
+              </span>
+            </div>
          </span>
        </div>
      </div>
-      <ContactLabels :contact-id="selectedContact?.id" />
+      <ContactLabels
+        :wrapper-ref="wrapperRef"
+        :contact-id="selectedContact?.id"
+      />
    </div>
-    <div class="flex flex-col items-start gap-6">
+    <div class="flex flex-col items-start gap-6 w-full">
      <ContactsForm
        ref="contactsFormRef"
        :contact-data="contactData"
@@ -175,21 +195,23 @@ const handleAvatarDelete = async () => {
        @click="updateContact"
      />
    </div>
-    <Policy :permissions="['administrator']">
+    <Policy :permissions="['administrator']" class="w-full">
+      <div class="w-full h-px bg-n-slate-3 mt-1 mb-7" />
      <div
-        class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
+        class="flex items-end justify-between w-full gap-4 outline outline-1 outline-n-weak rounded-2xl p-4"
      >
        <div class="flex flex-col gap-2">
          <h6 class="text-base font-medium text-n-slate-12">
            {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT') }}
          </h6>
-          <span class="text-sm text-n-slate-11">
+          <span class="text-sm font-420 text-n-slate-11">
            {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT_DESCRIPTION') }}
          </span>
        </div>
        <Button
          :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
-          color="ruby"
+          ruby
+          class="flex-shrink-0"
          @click="openConfirmDeleteContactDialog"
        />
      </div>
@@ -9,6 +9,8 @@ import {
  ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
 import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
+import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';

 const props = defineProps({
  contacts: { type: Array, required: true },
@@ -28,7 +30,10 @@ const route = useRoute();
 const uiFlags = useMapGetter('contacts/getUIFlags');
 const isUpdating = computed(() => uiFlags.value.isUpdating);
 const expandedCardId = ref(null);
-const hoveredAvatarId = ref(null);
+const selectedContactId = ref(null);
+const composeConversationRef = ref(null);
+const confirmDeleteContactDialogRef = ref(null);
+const contactToDelete = ref(null);

 const selectedIdsSet = computed(() => new Set(props.selectedContactIds || []));

@@ -66,27 +71,42 @@ const onClickViewDetails = async id => {
  await router.push({ name, params, query: route.query });
 };

-const toggleExpanded = id => {
+const toggleExpanded = async id => {
+  const isExpanding = expandedCardId.value !== id;
  expandedCardId.value = expandedCardId.value === id ? null : id;
+
+  // Fetch contactable inboxes when expanding a card
+  if (isExpanding) {
+    try {
+      await store.dispatch('contacts/fetchContactableInbox', id);
+    } catch (error) {
+      // error
+    }
+  }
 };

 const isSelected = id => selectedIdsSet.value.has(id);

-const shouldShowSelection = id => {
-  return hoveredAvatarId.value === id || isSelected(id);
-};
-
 const handleSelect = (id, value) => {
  emit('toggleContact', { id, value });
 };

-const handleAvatarHover = (id, isHovered) => {
-  hoveredAvatarId.value = isHovered ? id : null;
+const handleSendMessage = id => {
+  selectedContactId.value = String(id);
+  composeConversationRef.value?.toggle();
+};
+
+const handleDeleteContact = id => {
+  const contact = props.contacts.find(c => c.id === id);
+  if (contact) {
+    contactToDelete.value = { id: contact.id, name: contact.name };
+    confirmDeleteContactDialogRef.value?.dialogRef.open();
+  }
 };
 </script>

 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col divide-y divide-n-slate-3">
    <div v-for="contact in contacts" :key="contact.id" class="relative">
      <ContactsCard
        :id="contact.id"
@@ -95,17 +115,37 @@ const handleAvatarHover = (id, isHovered) => {
        :thumbnail="contact.thumbnail"
        :phone-number="contact.phoneNumber"
        :additional-attributes="contact.additionalAttributes"
+        :custom-attributes="contact.customAttributes"
        :availability-status="contact.availabilityStatus"
        :is-expanded="expandedCardId === contact.id"
        :is-updating="isUpdating"
-        :selectable="shouldShowSelection(contact.id)"
        :is-selected="isSelected(contact.id)"
+        :labels="contact.labels || []"
        @toggle="toggleExpanded(contact.id)"
        @update-contact="updateContact"
        @show-contact="onClickViewDetails"
        @select="value => handleSelect(contact.id, value)"
-        @avatar-hover="value => handleAvatarHover(contact.id, value)"
+        @send-message="handleSendMessage"
+        @delete-contact="handleDeleteContact"
      />
    </div>
+    <ComposeConversation
+      ref="composeConversationRef"
+      :contact-id="selectedContactId"
+      is-modal
+    >
+      <template #trigger="{ toggle }">
+        <button
+          type="button"
+          class="hidden"
+          aria-hidden="true"
+          @click="toggle"
+        />
+      </template>
+    </ComposeConversation>
+    <ConfirmContactDeleteDialog
+      ref="confirmDeleteContactDialogRef"
+      :selected-contact="contactToDelete"
+    />
  </div>
 </template>
@@ -0,0 +1,58 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+
+const props = defineProps({
+  contact: { type: Object, required: true },
+  selected: { type: Boolean, default: false },
+  enableSelection: { type: Boolean, default: true },
+  hideThumbnail: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['selectConversation']);
+
+const hovered = ref(false);
+
+const onThumbnailHover = () => {
+  hovered.value = !props.hideThumbnail;
+};
+
+const onThumbnailLeave = () => {
+  hovered.value = false;
+};
+
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => {
+    emit('selectConversation', value);
+  },
+});
+</script>
+
+<template>
+  <div
+    class="relative flex items-center flex-shrink-0"
+    @mouseenter="onThumbnailHover"
+    @mouseleave="onThumbnailLeave"
+  >
+    <Avatar
+      v-if="!hideThumbnail"
+      :name="contact.name"
+      :src="contact.thumbnail"
+      :size="24"
+      :status="contact.availability_status"
+      hide-offline-status
+    >
+      <template v-if="enableSelection" #overlay>
+        <div
+          v-if="hovered || selected"
+          class="flex items-center justify-center rounded-md cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px] size-6"
+          @click.stop
+        >
+          <Checkbox v-model="selectedModel" />
+        </div>
+      </template>
+    </Avatar>
+  </div>
+</template>
@@ -0,0 +1,47 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import MessagePreview from './MessagePreview.vue';
+import VoiceCallStatus from './VoiceCallStatus.vue';
+import UnreadBadge from './UnreadBadge.vue';
+
+defineProps({
+  lastMessage: { type: Object, default: null },
+  voiceCallStatus: { type: String, default: '' },
+  voiceCallDirection: { type: String, default: '' },
+  unreadCount: { type: Number, default: 0 },
+  showExpandedPreview: { type: Boolean, default: false },
+});
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[1fr_auto] gap-1.5"
+    :class="showExpandedPreview ? 'items-end' : 'items-center'"
+  >
+    <VoiceCallStatus
+      v-if="voiceCallStatus"
+      key="voice-status-row"
+      :status="voiceCallStatus"
+      :direction="voiceCallDirection"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    />
+    <MessagePreview
+      v-else-if="lastMessage"
+      key="message-preview"
+      :message="lastMessage"
+      :multi-line="showExpandedPreview"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    />
+    <span
+      v-else
+      key="no-messages"
+      class="inline-grid grid-flow-col auto-cols-max items-center gap-1 text-body-main"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    >
+      <Icon icon="i-lucide-info" class="size-3.5" />
+      {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
+    </span>
+
+    <UnreadBadge :count="unreadCount" :align-bottom="showExpandedPreview" />
+  </div>
+</template>
@@ -0,0 +1,23 @@
+<script setup>
+import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+
+defineProps({
+  contactName: { type: String, required: true },
+  timestamp: { type: Number, required: true },
+  createdAt: { type: Number, required: true },
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-[1fr_auto] items-center gap-2 h-5">
+    <h4 class="text-sm my-0 capitalize truncate text-n-slate-12 font-medium">
+      {{ contactName }}
+    </h4>
+
+    <TimeAgo
+      :last-activity-timestamp="timestamp"
+      :created-at-timestamp="createdAt"
+      class="font-440 !text-xs shrink-0"
+    />
+  </div>
+</template>
@@ -1,95 +1,191 @@
 <script setup>
-import { ref, computed } from 'vue';
+import {
+  ref,
+  computed,
+  inject,
+  nextTick,
+  useSlots,
+  watch,
+  useAttrs,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useThrottleFn } from '@vueuse/core';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Label from 'dashboard/components-next/label/Label.vue';

 const props = defineProps({
-  conversationLabels: {
+  labels: {
    type: Array,
    required: true,
  },
-  accountLabels: {
-    type: Array,
-    required: true,
+  disableToggle: {
+    type: Boolean,
+    default: false,
  },
 });

-const WIDTH_CONFIG = Object.freeze({
-  DEFAULT_WIDTH: 80,
-  CHAR_WIDTH: {
-    SHORT: 8, // For labels <= 5 chars
-    LONG: 6, // For labels > 5 chars
-  },
-  BASE_WIDTH: 12, // dot + gap
-  THRESHOLD: 5, // character length threshold
-});
+defineOptions({ inheritAttrs: false });

-const containerRef = ref(null);
-const maxLabels = ref(1);
+const attrs = useAttrs();
+const slots = useSlots();
+const { t } = useI18n();
+
+const accountLabels = useMapGetter('labels/getLabels');

 const activeLabels = computed(() => {
-  const labelSet = new Set(props.conversationLabels);
-  return props.accountLabels?.filter(({ title }) => labelSet.has(title));
+  return accountLabels.value.filter(({ title }) =>
+    props.labels.includes(title)
+  );
 });

-const calculateLabelWidth = ({ title = '' }) => {
-  const charWidth =
-    title.length > WIDTH_CONFIG.THRESHOLD
-      ? WIDTH_CONFIG.CHAR_WIDTH.LONG
-      : WIDTH_CONFIG.CHAR_WIDTH.SHORT;
+const showAllLabels = ref(false);
+const showExpandLabelButton = ref(false);
+const labelPosition = ref(-1);
+const labelContainer = ref(null);

-  return title.length * charWidth + WIDTH_CONFIG.BASE_WIDTH;
-};
-
-const getAverageWidth = labels => {
-  if (!labels.length) return WIDTH_CONFIG.DEFAULT_WIDTH;
-
-  const totalWidth = labels.reduce(
-    (sum, label) => sum + calculateLabelWidth(label),
-    0
-  );
-
-  return totalWidth / labels.length;
-};
-
-const visibleLabels = computed(() =>
-  activeLabels.value?.slice(0, maxLabels.value)
+// Show if there are labels OR if before slot exists
+const showSection = computed(
+  () => activeLabels.value.length > 0 || !!slots.before
 );

-const updateVisibleLabels = () => {
-  if (!containerRef.value) return;
+const computeVisibleLabelPosition = () => {
+  const container = labelContainer.value;
+  if (!container || activeLabels.value.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }

-  const containerWidth = containerRef.value.offsetWidth;
-  const avgWidth = getAverageWidth(activeLabels.value);
+  const labels = container.querySelectorAll('[data-label]');
+  if (labels.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }

-  maxLabels.value = Math.max(1, Math.floor(containerWidth / avgWidth));
+  // Early exit if all labels are visible
+  if (showAllLabels.value) return;
+
+  const beforeSlot = container.querySelector('[data-before-slot]');
+  const beforeSlotWidth = beforeSlot?.offsetWidth ?? 0;
+  const availableWidth = container.clientWidth - 46 - beforeSlotWidth;
+
+  let totalWidth = 0;
+  const labelsArray = Array.from(labels);
+
+  // Find last visible label index using some() - stops early on overflow
+  const overflowIndex = labelsArray.findIndex(label => {
+    totalWidth += label.offsetWidth + 6;
+    return totalWidth > availableWidth;
+  });
+
+  const visibleIndex =
+    overflowIndex === -1 ? labelsArray.length - 1 : overflowIndex - 1;
+
+  labelPosition.value = visibleIndex;
+  showExpandLabelButton.value = visibleIndex < labelsArray.length - 1;
+};
+
+const throttledCalculate = useThrottleFn(computeVisibleLabelPosition, 16);
+
+watch(activeLabels, () => nextTick(throttledCalculate), { immediate: true });
+
+// Recalculate when parent triggers (e.g., tab changes in ChatList)
+// Needed because inbox conversation view shows metadata inside CardLabels, affecting available width
+const recalculateKey = inject('recalculateLabelsKey', null);
+
+if (recalculateKey) {
+  watch(recalculateKey, () => nextTick(throttledCalculate));
+}
+
+const hiddenLabelsCount = computed(() => {
+  if (!showExpandLabelButton.value || showAllLabels.value) return 0;
+  return activeLabels.value.length - labelPosition.value - 1;
+});
+
+// Check if all labels are hidden (none visible)
+const allLabelsHidden = computed(() => {
+  return labelPosition.value === -1 && activeLabels.value.length > 0;
+});
+
+// Label text for button when disableToggle is true and all labels are hidden
+const labelsCountText = computed(() => {
+  if (props.disableToggle && allLabelsHidden.value) {
+    return t('CONVERSATION.CARD.LABELS_COUNT', {
+      count: activeLabels.value.length,
+    });
+  }
+  if (!showAllLabels.value && hiddenLabelsCount.value > 0) {
+    return hiddenLabelsCount.value;
+  }
+  return '';
+});
+
+const hiddenLabelsTooltip = computed(() => {
+  if (!props.disableToggle) return '';
+  // When all labels are hidden, show all label titles
+  if (allLabelsHidden.value) {
+    return activeLabels.value.map(label => label.title).join(', ');
+  }
+  if (!showExpandLabelButton.value) return '';
+  const hiddenLabels = activeLabels.value.slice(labelPosition.value + 1);
+  return hiddenLabels.map(label => label.title).join(', ');
+});
+
+const tooltipText = computed(() => {
+  if (props.disableToggle && hiddenLabelsTooltip.value) {
+    return hiddenLabelsTooltip.value;
+  }
+  return showAllLabels.value
+    ? t('CONVERSATION.CARD.HIDE_LABELS')
+    : t('CONVERSATION.CARD.SHOW_LABELS');
+});
+
+const onShowLabels = e => {
+  e.stopPropagation();
+  if (props.disableToggle) return;
+  showAllLabels.value = !showAllLabels.value;
+  nextTick(() => computeVisibleLabelPosition());
 };
 </script>

 <template>
  <div
-    ref="containerRef"
-    v-resize="updateVisibleLabels"
-    class="flex items-center gap-2.5 w-full min-w-0 h-6 overflow-hidden"
+    v-if="showSection"
+    ref="labelContainer"
+    v-bind="attrs"
+    v-resize="throttledCalculate"
+    data-labels-container
+    class="flex items-center flex-shrink min-w-0 min-h-6 gap-x-1.5 gap-y-1 [&:not(:has([data-label],[data-before-slot]))]:hidden"
+    :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
  >
-    <template v-for="(label, index) in visibleLabels" :key="label.id">
-      <div
-        class="flex items-center gap-1.5 min-w-0"
-        :class="[
-          index !== visibleLabels.length - 1
-            ? 'flex-shrink-0 text-ellipsis'
-            : 'flex-shrink',
-        ]"
-      >
-        <div
-          :style="{ backgroundColor: label.color }"
-          class="size-1.5 rounded-full flex-shrink-0"
-        />
-        <span
-          class="text-sm text-n-slate-10 whitespace-nowrap"
-          :class="{ truncate: index === visibleLabels.length - 1 }"
-        >
-          {{ label.title }}
-        </span>
-      </div>
-    </template>
+    <slot name="before" />
+
+    <Label
+      v-for="(label, index) in activeLabels"
+      :key="label ? label.id : index"
+      data-label
+      :label="label"
+      compact
+      :class="{
+        'invisible absolute': !showAllLabels && index > labelPosition,
+      }"
+    />
+    <Button
+      v-if="showExpandLabelButton || (disableToggle && allLabelsHidden)"
+      v-tooltip.top="{
+        content: tooltipText,
+        delay: { show: 1000, hide: 0 },
+      }"
+      :label="labelsCountText"
+      xs
+      slate
+      :no-animation="disableToggle"
+      :icon="labelsCountText ? 'i-lucide-plus' : 'i-lucide-chevron-left'"
+      class="!py-0 !px-1.5 flex-shrink-0 !rounded-md !bg-n-button-color -outline-offset-1 !gap-0.5 [&>span:first-child]:!text-n-slate-10 [&>span:last-child]:!text-n-slate-11"
+      :class="{ 'cursor-default': disableToggle }"
+      @click="onShowLabels"
+    />
  </div>
+  <template v-else />
 </template>
@@ -1,67 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-
-const props = defineProps({
-  conversation: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const { getPlainText } = useMessageFormatter();
-
-const lastNonActivityMessageContent = computed(() => {
-  const { lastNonActivityMessage = {}, customAttributes = {} } =
-    props.conversation;
-  const { email: { subject } = {} } = customAttributes;
-  return getPlainText(
-    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
-  );
-});
-
-const assignee = computed(() => {
-  const { meta: { assignee: agent = {} } = {} } = props.conversation;
-  return {
-    name: agent.name ?? agent.availableName,
-    thumbnail: agent.thumbnail,
-    status: agent.availabilityStatus,
-  };
-});
-
-const unreadMessagesCount = computed(() => {
-  const { unreadCount } = props.conversation;
-  return unreadCount;
-});
-</script>
-
-<template>
-  <div class="flex items-end w-full gap-2 pb-1">
-    <p class="w-full mb-0 text-sm leading-7 text-n-slate-12 line-clamp-2">
-      {{ lastNonActivityMessageContent }}
-    </p>
-    <div class="flex items-center flex-shrink-0 gap-2 pb-2">
-      <Avatar
-        v-if="assignee.name"
-        :name="assignee.name"
-        :src="assignee.thumbnail"
-        :size="20"
-        :status="assignee.status"
-        rounded-full
-      />
-      <div
-        v-if="unreadMessagesCount > 0"
-        class="inline-flex items-center justify-center rounded-full size-5 bg-n-brand"
-      >
-        <span class="text-xs font-semibold text-white">
-          {{ unreadMessagesCount }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
@@ -1,108 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import CardLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
-import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
-
-const props = defineProps({
-  conversation: {
-    type: Object,
-    required: true,
-  },
-  accountLabels: {
-    type: Array,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const slaCardLabelRef = ref(null);
-
-const { getPlainText } = useMessageFormatter();
-
-const lastNonActivityMessageContent = computed(() => {
-  const { lastNonActivityMessage = {}, customAttributes = {} } =
-    props.conversation;
-  const { email: { subject } = {} } = customAttributes;
-  return getPlainText(
-    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
-  );
-});
-
-const assignee = computed(() => {
-  const { meta: { assignee: agent = {} } = {} } = props.conversation;
-  return {
-    name: agent.name ?? agent.availableName,
-    thumbnail: agent.thumbnail,
-    status: agent.availabilityStatus,
-  };
-});
-
-const unreadMessagesCount = computed(() => {
-  const { unreadCount } = props.conversation;
-  return unreadCount;
-});
-
-const hasSlaThreshold = computed(() => {
-  return (
-    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
-  );
-});
-
-defineExpose({
-  hasSlaThreshold,
-});
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-1">
-    <div class="flex items-center justify-between w-full gap-2 py-1 h-7">
-      <p class="mb-0 text-sm leading-7 text-n-slate-12 line-clamp-1">
-        {{ lastNonActivityMessageContent }}
-      </p>
-
-      <div
-        v-if="unreadMessagesCount > 0"
-        class="inline-flex items-center justify-center flex-shrink-0 rounded-full size-5 bg-n-brand"
-      >
-        <span class="text-xs font-semibold text-white">
-          {{ unreadMessagesCount }}
-        </span>
-      </div>
-    </div>
-
-    <div
-      class="grid items-center gap-2.5 h-7"
-      :class="
-        hasSlaThreshold
-          ? 'grid-cols-[auto_auto_1fr_20px]'
-          : 'grid-cols-[1fr_20px]'
-      "
-    >
-      <SLACardLabel
-        v-show="hasSlaThreshold"
-        ref="slaCardLabelRef"
-        :conversation="conversation"
-      />
-      <div v-if="hasSlaThreshold" class="w-px h-3 bg-n-slate-4" />
-      <div class="overflow-hidden">
-        <CardLabels
-          :conversation-labels="conversation.labels"
-          :account-labels="accountLabels"
-        />
-      </div>
-      <Avatar
-        v-if="assignee.name"
-        :name="assignee.name"
-        :src="assignee.thumbnail"
-        :size="20"
-        :status="assignee.status"
-        rounded-full
-      />
-    </div>
-  </div>
-</template>
@@ -0,0 +1,103 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
+import CardPriorityIcon from './CardPriorityIcon.vue';
+import CardStatusIcon from './CardStatusIcon.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
+
+const props = defineProps({
+  chat: { type: Object, required: true },
+  inbox: { type: Object, required: true },
+  showInboxName: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  assignee: { type: Object, default: () => ({}) },
+  inline: { type: Boolean, default: false },
+  isLabelsEmpty: { type: Boolean, default: false },
+});
+
+const slaCardLabel = useTemplateRef('slaCardLabel');
+
+const hasSlaPolicyId = computed(
+  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
+);
+
+const showSection = computed(() => {
+  if (props.inline) {
+    return (
+      hasSlaPolicyId.value ||
+      props.chat.priority ||
+      (props.showAssignee && props.assignee.name)
+    );
+  }
+  return (
+    props.showInboxName ||
+    (props.showAssignee && props.assignee.name) ||
+    props.chat.priority ||
+    props.chat.status ||
+    hasSlaPolicyId.value
+  );
+});
+</script>
+
+<template>
+  <!-- Full meta section (when not inline) -->
+  <div
+    v-if="showSection && !inline"
+    class="flex items-center justify-between min-w-0 gap-8 h-6 mb-1"
+  >
+    <div class="flex-1 min-w-0 flex items-center gap-0.5">
+      <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
+    </div>
+    <div class="flex items-center gap-1.5 flex-shrink-0">
+      <CardPriorityIcon
+        v-if="chat.priority"
+        :priority="chat.priority"
+        class="flex-shrink-0"
+      />
+      <Avatar
+        v-if="showAssignee && assignee.name"
+        v-tooltip.top="{
+          content: assignee.name,
+          delay: { show: 500, hide: 0 },
+        }"
+        :name="assignee.name"
+        :src="assignee.thumbnail"
+        :size="14"
+        :status="assignee.availability_status"
+        hide-offline-status
+        rounded-full
+      />
+      <CardStatusIcon v-if="chat.status" :status="chat.status" />
+    </div>
+  </div>
+
+  <!-- Inline meta section (compact mode for cases in inbox and label filter view) -->
+  <div
+    v-else-if="showSection && inline"
+    data-before-slot
+    class="flex items-center gap-1.5 flex-shrink-0"
+  >
+    <div class="flex items-center gap-1.5">
+      <CardPriorityIcon
+        v-if="chat.priority"
+        :priority="chat.priority"
+        class="flex-shrink-0"
+      />
+      <Avatar
+        v-if="showAssignee && assignee.name"
+        v-tooltip.top="assignee.name"
+        :name="assignee.name"
+        :src="assignee.thumbnail"
+        :size="14"
+        :status="assignee.availability_status"
+        hide-offline-status
+        rounded-full
+      />
+      <CardStatusIcon v-if="chat.status" :status="chat.status" />
+    </div>
+    <div v-if="hasSlaPolicyId" class="rounded-lg h-2 w-px bg-n-strong mx-0.5" />
+    <SLACardLabel v-if="hasSlaPolicyId" ref="slaCardLabel" :chat="chat" />
+    <div v-if="!isLabelsEmpty" class="rounded-lg h-2 w-px bg-n-strong mx-0.5" />
+  </div>
+</template>
@@ -1,207 +1,42 @@
 <script setup>
+import { computed } from 'vue';
 import { CONVERSATION_PRIORITY } from 'shared/constants/messages';

-defineProps({
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
  priority: {
    type: String,
    default: '',
  },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const icons = {
+  [CONVERSATION_PRIORITY.URGENT]: 'i-woot-priority-urgent',
+  [CONVERSATION_PRIORITY.HIGH]: 'i-woot-priority-high',
+  [CONVERSATION_PRIORITY.MEDIUM]: 'i-woot-priority-medium',
+  [CONVERSATION_PRIORITY.LOW]: 'i-woot-priority-low',
+};
+
+const iconName = computed(() => {
+  if (props.priority && icons[props.priority]) {
+    return icons[props.priority];
+  }
+  return props.showEmpty ? 'i-woot-priority-empty' : '';
 });
 </script>

-<!-- eslint-disable vue/no-static-inline-styles -->
 <template>
-  <div class="inline-flex items-center justify-center rounded-md">
-    <!-- Low Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.LOW"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- Medium Priority  -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- High Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.HIGH"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-      </g>
-    </svg>
-
-    <!-- Urgent Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.URGENT"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-      </g>
-    </svg>
-  </div>
+  <Icon
+    v-tooltip.top="{
+      content: priority,
+      delay: { show: 500, hide: 0 },
+    }"
+    :icon="iconName"
+    class="size-4 text-n-slate-5"
+  />
 </template>
@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: '',
+  },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const icons = {
+  [CONVERSATION_STATUS.OPEN]: 'i-woot-status-open',
+  [CONVERSATION_STATUS.RESOLVED]: 'i-woot-status-resolved',
+  [CONVERSATION_STATUS.PENDING]: 'i-woot-status-pending',
+  [CONVERSATION_STATUS.SNOOZED]: 'i-woot-status-snoozed',
+};
+
+const iconName = computed(() => {
+  if (props.status && icons[props.status]) {
+    return icons[props.status];
+  }
+  return props.showEmpty ? 'i-woot-status-empty' : '';
+});
+</script>
+
+<template>
+  <Icon
+    v-tooltip.top="{
+      content: status,
+      delay: { show: 500, hide: 0 },
+    }"
+    :icon="iconName"
+    class="size-4 flex-shrink-0"
+  />
+</template>
@@ -1,477 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import ConversationCard from './ConversationCard.vue';
-
-// Base conversation object
-const conversationWithoutMeta = {
-  meta: {
-    sender: {
-      additionalAttributes: {},
-      availabilityStatus: 'offline',
-      email: 'candice@chatwoot.com',
-      id: 29,
-      name: 'Candice Matherson',
-      phone_number: '+918585858585',
-      identifier: null,
-      thumbnail: '',
-      customAttributes: {
-        linkContact: 'https://apple.com',
-        listContact: 'Not spam',
-        textContact: 'hey',
-        checkboxContact: true,
-      },
-      last_activity_at: 1712127410,
-      created_at: 1712127389,
-    },
-    channel: 'Channel::Email',
-    assignee: {
-      id: 1,
-      accountId: 2,
-      availabilityStatus: 'online',
-      autoOffline: false,
-      confirmed: true,
-      email: 'sivin@chatwoot.com',
-      availableName: 'Sivin',
-      name: 'Sivin',
-      role: 'administrator',
-      thumbnail: '',
-      customRoleId: null,
-    },
-    hmacVerified: false,
-  },
-  id: 38,
-  messages: [
-    {
-      id: 3597,
-      content: 'Sivin set the priority to low',
-      accountId: 2,
-      inboxId: 7,
-      conversationId: 38,
-      messageType: 2,
-      createdAt: 1730885168,
-      updatedAt: '2024-11-06T09:26:08.565Z',
-      private: false,
-      status: 'sent',
-      source_id: null,
-      contentType: 'text',
-      contentAttributes: {},
-      senderType: null,
-      senderId: null,
-      externalSourceIds: {},
-      additionalAttributes: {},
-      processedMessageContent: 'Sivin set the priority to low',
-      sentiment: {},
-      conversation: {
-        assigneeId: 1,
-        unreadCount: 0,
-        lastActivityAt: 1730885168,
-        contactInbox: {
-          sourceId: 'candice@chatwoot.com',
-        },
-      },
-    },
-  ],
-  accountId: 2,
-  uuid: '21bd8638-a711-4080-b4ac-7fda1bc71837',
-  additionalAttributes: {
-    mail_subject: 'Test email',
-  },
-  agentLastSeenAt: 0,
-  assigneeLastSeenAt: 0,
-  canReply: true,
-  contactLastSeenAt: 0,
-  customAttributes: {},
-  inboxId: 7,
-  labels: [],
-  status: 'open',
-  createdAt: 1730836533,
-  timestamp: 1730885168,
-  firstReplyCreatedAt: 1730836533,
-  unreadCount: 0,
-  lastNonActivityMessage: {
-    id: 3591,
-    content:
-      'Hello, I bought some paper but they did not come with the indices as we had assumed. Was there a change in the product line?',
-    account_id: 2,
-    inbox_id: 7,
-    conversation_id: 38,
-    message_type: 1,
-    created_at: 1730836533,
-    updated_at: '2024-11-05T19:55:37.158Z',
-    private: false,
-    status: 'sent',
-    source_id:
-      'conversation/21bd8638-a711-4080-b4ac-7fda1bc71837/messages/3591@paperlayer.test',
-    content_type: 'text',
-    content_attributes: {
-      cc_emails: ['test@gmail.com'],
-      bcc_emails: [],
-      to_emails: [],
-    },
-    sender_type: 'User',
-    sender_id: 1,
-    external_source_ids: {},
-    additional_attributes: {},
-    processed_message_content:
-      'Hello, I bought some paper but they did not come with the indices as we had assumed. Was there a change in the product line?',
-    sentiment: {},
-    conversation: {
-      assignee_id: 1,
-      unread_count: 0,
-      last_activity_at: 1730885168,
-      contact_inbox: {
-        source_id: 'candice@chatwoot.com',
-      },
-    },
-    sender: {
-      id: 1,
-      name: 'Sivin',
-      available_name: 'Sivin',
-      avatar_url: '',
-      type: 'user',
-      availability_status: 'online',
-      thumbnail: '',
-    },
-  },
-  lastActivityAt: 1730885168,
-  priority: 'low',
-  waitingSince: 0,
-  slaPolicyId: null,
-  slaEvents: [],
-};
-
-const conversationWithMeta = {
-  meta: {
-    sender: {
-      additionalAttributes: {},
-      availabilityStatus: 'offline',
-      email: 'willy@chatwoot.com',
-      id: 29,
-      name: 'Willy Castelot',
-      phoneNumber: '+918585858585',
-      identifier: null,
-      thumbnail: '',
-      customAttributes: {
-        linkContact: 'https://apple.com',
-        listContact: 'Not spam',
-        textContact: 'hey',
-        checkboxContact: true,
-      },
-      lastActivityAt: 1712127410,
-      createdAt: 1712127389,
-    },
-    channel: 'Channel::Email',
-    assignee: {
-      id: 1,
-      accountId: 2,
-      availabilityStatus: 'online',
-      autoOffline: false,
-      confirmed: true,
-      email: 'sivin@chatwoot.com',
-      availableName: 'Sivin',
-      name: 'Sivin',
-      role: 'administrator',
-      thumbnail: '',
-      customRoleId: null,
-    },
-    hmacVerified: false,
-  },
-  id: 37,
-  messages: [
-    {
-      id: 3599,
-      content:
-        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-      accountId: 2,
-      inboxId: 7,
-      conversationId: 37,
-      messageType: 1,
-      createdAt: 1730885428,
-      updatedAt: '2024-11-06T09:30:30.619Z',
-      private: false,
-      status: 'sent',
-      sourceId:
-        'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
-      contentType: 'text',
-      contentAttributes: {
-        ccEmails: [],
-        bccEmails: [],
-        toEmails: [],
-      },
-      sender_type: 'User',
-      senderId: 1,
-      externalSourceIds: {},
-      additionalAttributes: {},
-      processedMessageContent:
-        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-      sentiment: {},
-      conversation: {
-        assignee_id: 1,
-        unread_count: 0,
-        last_activity_at: 1730885428,
-        contact_inbox: {
-          source_id: 'candice@chatwoot.com',
-        },
-      },
-      sender: {
-        id: 1,
-        name: 'Sivin',
-        availableName: 'Sivin',
-        avatarUrl: '',
-        type: 'user',
-        availabilityStatus: 'online',
-        thumbnail: '',
-      },
-    },
-  ],
-  accountId: 2,
-  uuid: '53df668d-329d-420e-8fe9-980cb0e4d63c',
-  additionalAttributes: {
-    mail_subject: 'we',
-  },
-  agentLastSeenAt: 1730885428,
-  assigneeLastSeenAt: 1730885428,
-  canReply: true,
-  contactLastSeenAt: 0,
-  customAttributes: {},
-  inboxId: 7,
-  labels: [
-    'billing',
-    'delivery',
-    'lead',
-    'premium-customer',
-    'software',
-    'ops-handover',
-  ],
-  muted: false,
-  snoozedUntil: null,
-  status: 'open',
-  createdAt: 1722487645,
-  timestamp: 1730885428,
-  firstReplyCreatedAt: 1722487645,
-  unreadCount: 0,
-  lastNonActivityMessage: {
-    id: 3599,
-    content:
-      'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-    account_id: 2,
-    inbox_id: 7,
-    conversation_id: 37,
-    message_type: 1,
-    created_at: 1730885428,
-    updated_at: '2024-11-06T09:30:30.619Z',
-    private: false,
-    status: 'sent',
-    source_id:
-      'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
-    content_type: 'text',
-    content_attributes: {
-      cc_emails: [],
-      bcc_emails: [],
-      to_emails: [],
-    },
-    sender_type: 'User',
-    sender_id: 1,
-    external_source_ids: {},
-    additional_attributes: {},
-    processed_message_content:
-      'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-    sentiment: {},
-    conversation: {
-      assignee_id: 1,
-      unread_count: 2,
-      last_activity_at: 1730885428,
-      contact_inbox: {
-        source_id: 'willy@chatwoot.com',
-      },
-    },
-    sender: {
-      id: 1,
-      name: 'Sivin',
-      available_name: 'Sivin',
-      avatar_url: '',
-      type: 'user',
-      availability_status: 'online',
-      thumbnail: '',
-    },
-  },
-  lastActivityAt: 1730885428,
-  priority: 'urgent',
-  waitingSince: 1730885428,
-  slaPolicyId: 3,
-  appliedSla: {
-    id: 4,
-    sla_id: 3,
-    sla_status: 'active_with_misses',
-    created_at: 1712127410,
-    updated_at: 1712127545,
-    sla_description:
-      'Premium Service Level Agreements (SLAs) are contracts that define clear expectations ',
-    sla_name: 'Premium SLA',
-    sla_first_response_time_threshold: 120,
-    sla_next_response_time_threshold: 180,
-    sla_only_during_business_hours: false,
-    sla_resolution_time_threshold: 360,
-  },
-  slaEvents: [
-    {
-      id: 8,
-      event_type: 'frt',
-      meta: {},
-      updated_at: 1712127545,
-      created_at: 1712127545,
-    },
-    {
-      id: 9,
-      event_type: 'rt',
-      meta: {},
-      updated_at: 1712127790,
-      created_at: 1712127790,
-    },
-  ],
-};
-
-const contactForConversationWithoutMeta = computed(() => ({
-  availabilityStatus: null,
-  email: 'candice@chatwoot.com',
-  id: 29,
-  name: 'Candice Matherson',
-  phoneNumber: '+918585858585',
-  identifier: null,
-  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=George',
-  customAttributes: {},
-  last_activity_at: 1712127410,
-  createdAt: 1712127389,
-  contactInboxes: [],
-}));
-
-const contactForConversationWithMeta = computed(() => ({
-  availabilityStatus: null,
-  email: 'willy@chatwoot.com',
-  id: 29,
-  name: 'Willy Castelot',
-  phoneNumber: '+918585858585',
-  identifier: null,
-  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=Liam',
-  customAttributes: {},
-  lastActivityAt: 1712127410,
-  createdAt: 1712127389,
-  contactInboxes: [],
-}));
-
-const webWidgetInbox = computed(() => ({
-  phone_number: '+918585858585',
-  channel_type: 'Channel::WebWidget',
-}));
-
-const accountLabels = computed(() => [
-  {
-    id: 1,
-    title: 'billing',
-    description: 'Label is used for tagging billing related conversations',
-    color: '#28AD21',
-    show_on_sidebar: true,
-  },
-  {
-    id: 3,
-    title: 'delivery',
-    description: null,
-    color: '#A2FDD5',
-    show_on_sidebar: true,
-  },
-  {
-    id: 6,
-    title: 'lead',
-    description: null,
-    color: '#F161C8',
-    show_on_sidebar: true,
-  },
-  {
-    id: 4,
-    title: 'ops-handover',
-    description: null,
-    color: '#A53326',
-    show_on_sidebar: true,
-  },
-  {
-    id: 5,
-    title: 'premium-customer',
-    description: null,
-    color: '#6FD4EF',
-    show_on_sidebar: true,
-  },
-  {
-    id: 2,
-    title: 'software',
-    description: null,
-    color: '#8F6EF2',
-    show_on_sidebar: true,
-  },
-]);
-</script>
-
-<template>
-  <Story
-    title="Components/ConversationCard"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Conversation without meta">
-      <div class="flex flex-col">
-        <ConversationCard
-          :key="conversationWithoutMeta.id"
-          :conversation="conversationWithoutMeta"
-          :contact="contactForConversationWithoutMeta"
-          :state-inbox="webWidgetInbox"
-          :account-labels="accountLabels"
-          class="hover:bg-n-alpha-1"
-        />
-      </div>
-    </Variant>
-    <Variant title="Conversation with meta (SLA, Labels)">
-      <div class="flex flex-col">
-        <ConversationCard
-          :key="conversationWithMeta.id"
-          :conversation="{
-            ...conversationWithMeta,
-            priority: 'medium',
-          }"
-          :contact="contactForConversationWithMeta"
-          :state-inbox="webWidgetInbox"
-          :account-labels="accountLabels"
-          class="hover:bg-n-alpha-1"
-        />
-      </div>
-    </Variant>
-    <Variant title="Conversation without meta (Unread count)">
-      <div class="flex flex-col">
-        <ConversationCard
-          :key="conversationWithoutMeta.id"
-          :conversation="{
-            ...conversationWithoutMeta,
-            unreadCount: 2,
-            priority: 'high',
-          }"
-          :contact="contactForConversationWithoutMeta"
-          :state-inbox="webWidgetInbox"
-          :account-labels="accountLabels"
-          class="hover:bg-n-alpha-1"
-        />
-      </div>
-    </Variant>
-    <Variant title="Conversation with meta (SLA, Labels, Unread count)">
-      <div class="flex flex-col">
-        <ConversationCard
-          :key="conversationWithMeta.id"
-          :conversation="{
-            ...conversationWithMeta,
-            unreadCount: 2,
-          }"
-          :contact="contactForConversationWithMeta"
-          :state-inbox="webWidgetInbox"
-          :account-labels="accountLabels"
-          class="hover:bg-n-alpha-1"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,133 +1,243 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-import { useRouter, useRoute } from 'vue-router';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
-import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
-
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import CardMessagePreview from './CardMessagePreview.vue';
-import CardMessagePreviewWithMeta from './CardMessagePreviewWithMeta.vue';
-import CardPriorityIcon from './CardPriorityIcon.vue';
+import { useRouter } from 'vue-router';
+import { useBreakpoints } from '@vueuse/core';
+import { useMapGetter } from 'dashboard/composables/store';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
+import wootConstants from 'dashboard/constants/globals';
+import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
+import ConversationContextMenu from 'dashboard/components/widgets/conversation/contextMenu/Index.vue';
+import ConversationCardExpanded from './ConversationCardExpanded.vue';
+import ConversationCardCompact from './ConversationCardCompact.vue';

 const props = defineProps({
-  conversation: {
-    type: Object,
-    required: true,
-  },
-  contact: {
-    type: Object,
-    required: true,
-  },
-  stateInbox: {
-    type: Object,
-    required: true,
-  },
-  accountLabels: {
-    type: Array,
-    required: true,
-  },
+  activeLabel: { type: String, default: '' },
+  chat: { type: Object, default: () => ({}) },
+  hideThumbnail: { type: Boolean, default: false },
+  teamId: { type: [String, Number], default: 0 },
+  foldersId: { type: [String, Number], default: 0 },
+  showAssignee: { type: Boolean, default: false },
+  conversationType: { type: String, default: '' },
+  selected: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  enableContextMenu: { type: Boolean, default: false },
+  allowedContextMenuOptions: { type: Array, default: () => [] },
+  enableSelection: { type: Boolean, default: true },
+  isExpandedLayout: { type: Boolean, default: false },
+  isPreviousConversations: { type: Boolean, default: false },
 });

+const emit = defineEmits([
+  'contextMenuToggle',
+  'assignAgent',
+  'assignLabel',
+  'assignTeam',
+  'markAsUnread',
+  'markAsRead',
+  'assignPriority',
+  'updateConversationStatus',
+  'deleteConversation',
+  'selectConversation',
+  'deSelectConversation',
+]);
+
 const router = useRouter();
-const route = useRoute();

-const cardMessagePreviewWithMetaRef = ref(null);
+const breakpoints = useBreakpoints({
+  lg: wootConstants.LARGE_SCREEN_BREAKPOINT,
+});
+const isLargeScreen = breakpoints.greaterOrEqual('lg');

-const currentContact = computed(() => props.contact);
+// Show expanded only when: isExpandedLayout=true AND screen >= 1024px
+const showExpanded = computed(() => {
+  return props.isExpandedLayout && isLargeScreen.value;
+});

-const currentContactName = computed(() => currentContact.value?.name);
-const currentContactThumbnail = computed(() => currentContact.value?.thumbnail);
-const currentContactStatus = computed(
-  () => currentContact.value?.availabilityStatus
+const showContextMenu = ref(false);
+const contextMenu = ref({ x: null, y: null });
+
+const currentChat = useMapGetter('getSelectedChat');
+const inboxesList = useMapGetter('inboxes/getInboxes');
+const activeInbox = useMapGetter('getSelectedInbox');
+const accountId = useMapGetter('getCurrentAccountId');
+const contactGetter = useMapGetter('contacts/getContact');
+const inboxGetter = useMapGetter('inboxes/getInbox');
+
+const chatMetadata = computed(() => props.chat.meta || {});
+const assignee = computed(() => chatMetadata.value.assignee || {});
+const senderId = computed(() => chatMetadata.value.sender?.id);
+const currentContact = computed(() =>
+  senderId.value ? contactGetter.value(senderId.value) : {}
 );
+const hasActiveInbox = computed(() => activeInbox.value);

-const inbox = computed(() => props.stateInbox);
-
-const inboxName = computed(() => inbox.value?.name);
-
-const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+const isActiveChat = computed(() => currentChat.value.id === props.chat.id);
+const inbox = computed(() => {
+  const inboxId = props.chat.inbox_id;
+  return inboxId ? inboxGetter.value(inboxId) : {};
 });

-const lastActivityAt = computed(() => {
-  const timestamp = props.conversation?.timestamp;
-  return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
-});
+const showInboxName = computed(() => inboxesList.value.length > 1);

-const showMessagePreviewWithoutMeta = computed(() => {
-  const { labels = [] } = props.conversation;
-  return (
-    !cardMessagePreviewWithMetaRef.value?.hasSlaThreshold && labels.length === 0
+const conversationPath = computed(() => {
+  return frontendURL(
+    conversationUrl({
+      accountId: accountId.value,
+      activeInbox: activeInbox.value,
+      id: props.chat.id,
+      label: props.activeLabel,
+      teamId: props.teamId,
+      conversationType: props.conversationType,
+      foldersId: props.foldersId,
+    })
  );
 });

 const onCardClick = e => {
-  const path = frontendURL(
-    conversationUrl({
-      accountId: route.params.accountId,
-      id: props.conversation.id,
-    })
-  );
+  const path = conversationPath.value;
+  if (!path) return;

  if (e.metaKey || e.ctrlKey) {
+    e.preventDefault();
    window.open(
-      window.chatwootConfig.hostURL + path,
+      `${window.chatwootConfig.hostURL}${path}`,
      '_blank',
-      'noopener noreferrer nofollow'
+      'noopener,noreferrer'
    );
    return;
  }
+
+  if (isActiveChat.value) return;
  router.push({ path });
 };
+
+const onSelectConversation = checked => {
+  if (checked) {
+    emit('selectConversation', props.chat.id, inbox.value.id);
+  } else {
+    emit('deSelectConversation', props.chat.id, inbox.value.id);
+  }
+};
+
+const openContextMenu = e => {
+  if (!props.enableContextMenu) return;
+  e.preventDefault();
+  emit('contextMenuToggle', true);
+  contextMenu.value.x = e.pageX || e.clientX;
+  contextMenu.value.y = e.pageY || e.clientY;
+  showContextMenu.value = true;
+};
+
+const closeContextMenu = () => {
+  emit('contextMenuToggle', false);
+  showContextMenu.value = false;
+  contextMenu.value.x = null;
+  contextMenu.value.y = null;
+};
+
+const onUpdateConversation = (status, snoozedUntil) => {
+  closeContextMenu();
+  emit('updateConversationStatus', props.chat.id, status, snoozedUntil);
+};
+
+const onAssignAgent = agent => {
+  emit('assignAgent', agent, [props.chat.id]);
+  closeContextMenu();
+};
+
+const onAssignLabel = label => {
+  emit('assignLabel', [label.title], [props.chat.id]);
+  closeContextMenu();
+};
+
+const onAssignTeam = team => {
+  emit('assignTeam', team, props.chat.id);
+  closeContextMenu();
+};
+
+const markAsUnread = () => {
+  emit('markAsUnread', props.chat.id);
+  closeContextMenu();
+};
+
+const markAsRead = () => {
+  emit('markAsRead', props.chat.id);
+  closeContextMenu();
+};
+
+const assignPriority = priority => {
+  emit('assignPriority', priority, props.chat.id);
+  closeContextMenu();
+};
+
+const deleteConversation = () => {
+  emit('deleteConversation', props.chat.id);
+  closeContextMenu();
+};
 </script>

 <template>
-  <div
-    role="button"
-    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
+  <!-- Expanded: Only when isExpandedLayout=true AND screen >= 1024px -->
+  <ConversationCardExpanded
+    v-if="showExpanded"
+    :chat="chat"
+    :current-contact="currentContact"
+    :assignee="assignee"
+    :inbox="inbox"
+    :selected="selected"
+    :is-active-chat="isActiveChat"
+    :show-assignee="showAssignee"
+    :show-inbox-name="showInboxName"
+    :is-inbox-view="hasActiveInbox && !isPreviousConversations"
+    @select-conversation="onSelectConversation"
+    @de-select-conversation="onSelectConversation"
    @click="onCardClick"
+    @contextmenu="openContextMenu"
+  />
+
+  <!-- Compact: All other cases (mobile OR isExpandedLayout=false) -->
+  <ConversationCardCompact
+    v-else
+    :chat="chat"
+    :current-contact="currentContact"
+    :assignee="assignee"
+    :inbox="inbox"
+    :selected="selected"
+    :is-active-chat="isActiveChat"
+    :compact="compact"
+    :show-assignee="showAssignee"
+    :show-inbox-name="showInboxName"
+    :hide-thumbnail="hideThumbnail"
+    :enable-selection="enableSelection"
+    :is-inbox-view="hasActiveInbox && !isPreviousConversations"
+    @select-conversation="onSelectConversation"
+    @click="onCardClick"
+    @contextmenu="openContextMenu"
+  />
+
+  <ContextMenu
+    v-if="showContextMenu"
+    :x="contextMenu.x"
+    :y="contextMenu.y"
+    @close="closeContextMenu"
  >
-    <Avatar
-      :name="currentContactName"
-      :src="currentContactThumbnail"
-      :size="24"
-      :status="currentContactStatus"
-      rounded-full
+    <ConversationContextMenu
+      :status="chat.status"
+      :inbox-id="inbox.id"
+      :priority="chat.priority"
+      :chat-id="chat.id"
+      :has-unread-messages="chat.unread_count > 0"
+      :conversation-url="conversationPath"
+      :allowed-options="allowedContextMenuOptions"
+      @update-conversation="onUpdateConversation"
+      @assign-agent="onAssignAgent"
+      @assign-label="onAssignLabel"
+      @assign-team="onAssignTeam"
+      @mark-as-unread="markAsUnread"
+      @mark-as-read="markAsRead"
+      @assign-priority="assignPriority"
+      @delete-conversation="deleteConversation"
+      @close="closeContextMenu"
    />
-    <div class="flex flex-col w-full gap-1 min-w-0">
-      <div class="flex items-center justify-between h-6 gap-2">
-        <h4 class="text-base font-medium truncate text-n-slate-12">
-          {{ currentContactName }}
-        </h4>
-        <div class="flex items-center gap-2">
-          <CardPriorityIcon :priority="conversation.priority || null" />
-          <div
-            v-tooltip.left="inboxName"
-            class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
-          >
-            <Icon
-              :icon="inboxIcon"
-              class="flex-shrink-0 text-n-slate-11 size-3"
-            />
-          </div>
-          <span class="text-sm text-n-slate-10">
-            {{ lastActivityAt }}
-          </span>
-        </div>
-      </div>
-      <CardMessagePreview
-        v-show="showMessagePreviewWithoutMeta"
-        :conversation="conversation"
-      />
-      <CardMessagePreviewWithMeta
-        v-show="!showMessagePreviewWithoutMeta"
-        ref="cardMessagePreviewWithMetaRef"
-        :conversation="conversation"
-        :account-labels="accountLabels"
-      />
-    </div>
-  </div>
+  </ContextMenu>
 </template>
@@ -0,0 +1,135 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import CardMetaSection from './CardMetaSection.vue';
+import CardAvatar from './CardAvatar.vue';
+import CardHeader from './CardHeader.vue';
+import CardContent from './CardContent.vue';
+import CardLabels from './CardLabels.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
+
+const props = defineProps({
+  chat: { type: Object, required: true },
+  currentContact: { type: Object, required: true },
+  assignee: { type: Object, default: () => ({}) },
+  inbox: { type: Object, default: () => ({}) },
+  selected: { type: Boolean, default: false },
+  isActiveChat: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  showInboxName: { type: Boolean, default: false },
+  hideThumbnail: { type: Boolean, default: false },
+  enableSelection: { type: Boolean, default: true },
+  isInboxView: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['selectConversation', 'click', 'contextmenu']);
+
+const slaCardLabel = useTemplateRef('slaCardLabel');
+
+const lastMessageInChat = computed(() => getLastMessage(props.chat));
+const showLabelsSection = computed(() => props.chat.labels?.length > 0);
+const showExpandedPreview = computed(
+  () => props.compact && !showLabelsSection.value
+);
+
+const voiceCallData = computed(() => ({
+  status: props.chat.additional_attributes?.call_status,
+  direction: props.chat.additional_attributes?.call_direction,
+}));
+
+const unreadCount = computed(() => props.chat?.unread_count);
+
+const hasSlaPolicyId = computed(
+  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
+);
+
+const onSelectConversation = checked => {
+  emit('selectConversation', checked);
+};
+</script>
+
+<template>
+  <div
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full cursor-pointer group transition-all duration-150"
+    :class="{
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3': isActiveChat,
+      'selected bg-n-slate-2 dark:bg-n-slate-3': selected,
+      'px-0 py-3': compact,
+      'px-2 pt-2.5 pb-3 hover:bg-n-alpha-1 rounded-lg': !compact,
+    }"
+    @click="$emit('click', $event)"
+    @contextmenu="$emit('contextmenu', $event)"
+  >
+    <div class="min-w-0 w-full">
+      <CardMetaSection
+        v-if="!isInboxView"
+        :chat="chat"
+        :inbox="inbox"
+        :show-inbox-name="showInboxName"
+        :show-assignee="showAssignee"
+        :assignee="assignee"
+      />
+
+      <div
+        class="grid gap-2.5 items-start"
+        :class="{
+          'mt-0.5 grid-cols-1': compact,
+          'grid-cols-[auto,1fr]': !compact,
+        }"
+      >
+        <CardAvatar
+          v-if="!compact"
+          :contact="currentContact"
+          :selected="selected"
+          :enable-selection="enableSelection"
+          :hide-thumbnail="hideThumbnail"
+          class="mt-0.5"
+          @select-conversation="onSelectConversation"
+        />
+
+        <div class="min-w-0 flex flex-col gap-1.5">
+          <div class="min-w-0 flex flex-col gap-px">
+            <CardHeader
+              v-if="!compact"
+              :contact-name="currentContact.name"
+              :timestamp="chat.timestamp"
+              :created-at="chat.created_at"
+            />
+
+            <CardContent
+              :last-message="lastMessageInChat"
+              :voice-call-status="voiceCallData.status"
+              :voice-call-direction="voiceCallData.direction"
+              :unread-count="unreadCount"
+              :show-expanded-preview="showExpandedPreview"
+            />
+          </div>
+
+          <CardLabels
+            v-if="showLabelsSection || isInboxView"
+            :labels="chat.labels"
+          >
+            <template #before>
+              <CardMetaSection
+                v-if="isInboxView"
+                :chat="chat"
+                :inbox="inbox"
+                :show-assignee="showAssignee"
+                :assignee="assignee"
+                :is-labels-empty="chat.labels.length === 0"
+                inline
+              />
+              <SLACardLabel
+                v-else-if="hasSlaPolicyId"
+                ref="slaCardLabel"
+                data-before-slot
+                :chat="chat"
+              />
+            </template>
+          </CardLabels>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,182 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import CardAvatar from './CardAvatar.vue';
+import CardContent from './CardContent.vue';
+import CardLabels from './CardLabels.vue';
+import CardPriorityIcon from './CardPriorityIcon.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
+import CardStatusIcon from './CardStatusIcon.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  chat: { type: Object, required: true },
+  currentContact: { type: Object, required: true },
+  assignee: { type: Object, default: () => ({}) },
+  inbox: { type: Object, default: () => ({}) },
+  selected: { type: Boolean, default: false },
+  isActiveChat: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  showInboxName: { type: Boolean, default: false },
+  isInboxView: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'selectConversation',
+  'deSelectConversation',
+  'click',
+  'contextmenu',
+]);
+
+const lastMessageInChat = computed(() => getLastMessage(props.chat));
+const showLabelsSection = computed(() => props.chat.labels?.length > 0);
+
+const voiceCallData = computed(() => ({
+  status: props.chat.additional_attributes?.call_status,
+  direction: props.chat.additional_attributes?.call_direction,
+}));
+
+const unreadCount = computed(() => props.chat.unread_count);
+
+const slaCardLabel = useTemplateRef('slaCardLabel');
+
+const hasSlaPolicyId = computed(
+  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
+);
+
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => {
+    if (value) {
+      emit('selectConversation', value);
+    } else {
+      emit('deSelectConversation', value);
+    }
+  },
+});
+</script>
+
+<template>
+  <div
+    class="relative cursor-pointer group transition-all duration-150 grid gap-4 items-center px-2 h-12"
+    :class="{
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3': isActiveChat,
+      'selected bg-n-slate-2 dark:bg-n-slate-3': selected,
+      'hover:bg-n-alpha-1 rounded-lg': !isActiveChat && !selected,
+      'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]': showLabelsSection,
+      'grid-cols-[minmax(0,2fr)_max-content]': !showLabelsSection,
+    }"
+    @click="$emit('click', $event)"
+    @contextmenu="$emit('contextmenu', $event)"
+  >
+    <!-- LEFT SECTION -->
+    <div class="flex items-center gap-2 min-w-0 flex-1">
+      <div class="flex items-center justify-center flex-shrink-0" @click.stop>
+        <Checkbox v-model="selectedModel" />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <CardPriorityIcon :priority="chat.priority" show-empty />
+      </div>
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <Avatar
+          v-if="showAssignee && assignee.name"
+          v-tooltip.top="{
+            content: assignee.name,
+            delay: { show: 500, hide: 0 },
+          }"
+          :name="assignee.name"
+          :src="assignee.thumbnail"
+          :size="14"
+          :status="assignee.availability_status"
+          hide-offline-status
+          rounded-full
+        />
+        <Icon
+          v-else
+          icon="i-woot-empty-assignee"
+          class="size-4 text-n-slate-7"
+        />
+      </div>
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <CardStatusIcon :status="chat.status" show-empty />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div v-if="!isInboxView" class="w-20 flex-shrink-0">
+        <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div
+        v-tooltip.top="{
+          content: chat.id,
+          delay: { show: 500, hide: 0 },
+        }"
+        class="h-6 flex items-center gap-1 max-w-20 w-full min-w-0"
+      >
+        <Icon
+          icon="i-woot-hash"
+          class="size-3.5 text-n-slate-10 flex-shrink-0"
+        />
+        <span class="text-label-small text-n-slate-11 truncate">
+          {{ chat.id }}
+        </span>
+      </div>
+
+      <CardAvatar
+        :contact="currentContact"
+        :selected="false"
+        :enable-selection="false"
+        :hide-thumbnail="false"
+      />
+
+      <h4
+        class="text-heading-3 my-0 capitalize truncate text-n-slate-12 font-medium w-32 flex-shrink-0"
+      >
+        {{ currentContact.name }}
+      </h4>
+
+      <CardContent
+        :last-message="lastMessageInChat"
+        :voice-call-status="voiceCallData.status"
+        :voice-call-direction="voiceCallData.direction"
+        :unread-count="unreadCount"
+        :show-expanded-preview="false"
+      />
+    </div>
+
+    <!-- RIGHT SECTION -->
+    <div class="flex items-center justify-end gap-1.5 flex-shrink-0">
+      <div v-if="showLabelsSection" class="min-w-0 w-full">
+        <CardLabels
+          :labels="chat.labels"
+          disable-toggle
+          class="my-0 [&>div]:justify-end justify-end"
+        />
+      </div>
+
+      <div v-if="hasSlaPolicyId" class="flex-shrink-0">
+        <SLACardLabel ref="slaCardLabel" :chat="chat" />
+      </div>
+
+      <div class="flex-shrink-0 w-[4.375rem] text-end">
+        <TimeAgo
+          :last-activity-timestamp="chat.timestamp"
+          :created-at-timestamp="chat.created_at"
+          class="font-440 !text-xs text-n-slate-11"
+        />
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,156 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  showMessageType: {
+    type: Boolean,
+    default: true,
+  },
+  defaultEmptyMessage: {
+    type: String,
+    default: '',
+  },
+  multiLine: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { getPlainText } = useMessageFormatter();
+
+const attachmentIcons = {
+  image: 'i-lucide-image',
+  audio: 'i-lucide-headphones',
+  video: 'i-lucide-video',
+  file: 'i-lucide-file',
+  location: 'i-lucide-map-pin',
+  fallback: 'i-lucide-link-2',
+};
+
+const messageByAgent = computed(() => {
+  const { message_type: messageType } = props.message;
+  return messageType === MESSAGE_TYPE.OUTGOING;
+});
+
+const isMessageAnActivity = computed(() => {
+  const { message_type: messageType } = props.message;
+  return messageType === MESSAGE_TYPE.ACTIVITY;
+});
+
+const isMessagePrivate = computed(() => {
+  const { private: isPrivate } = props.message;
+  return isPrivate;
+});
+
+const parsedLastMessage = computed(() => {
+  const { content_attributes: contentAttributes } = props.message;
+  const { email: { subject } = {} } = contentAttributes || {};
+  return getPlainText(subject || props.message.content);
+});
+
+const lastMessageFileType = computed(() => {
+  const [{ file_type: fileType } = {}] = props.message.attachments;
+  return fileType;
+});
+
+const attachmentIcon = computed(() => {
+  return attachmentIcons[lastMessageFileType.value];
+});
+
+const attachmentMessageContent = computed(() => {
+  return `CHAT_LIST.ATTACHMENTS.${lastMessageFileType.value}.CONTENT`;
+});
+
+const isMessageSticker = computed(() => {
+  return props.message && props.message.content_type === 'sticker';
+});
+</script>
+
+<template>
+  <div
+    class="min-w-0 text-sm"
+    :class="
+      multiLine
+        ? 'flex items-start gap-1'
+        : 'grid grid-cols-[auto_1fr] items-center gap-1'
+    "
+  >
+    <template v-if="showMessageType && !multiLine">
+      <Icon
+        v-if="isMessagePrivate"
+        icon="i-lucide-lock-keyhole"
+        class="size-3.5"
+      />
+      <Icon
+        v-else-if="messageByAgent"
+        icon="i-lucide-undo-2"
+        class="size-3.5"
+      />
+      <Icon
+        v-else-if="isMessageAnActivity"
+        icon="i-lucide-info"
+        class="size-3.5"
+      />
+    </template>
+
+    <span
+      class="min-w-0 text-body-main"
+      :class="multiLine ? 'line-clamp-2' : 'truncate'"
+    >
+      <!-- Case for previous and conversation conversation card -->
+      <template v-if="showMessageType && multiLine">
+        <Icon
+          v-if="isMessagePrivate"
+          icon="i-lucide-lock-keyhole"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <Icon
+          v-else-if="messageByAgent"
+          icon="i-lucide-undo-2"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <Icon
+          v-else-if="isMessageAnActivity"
+          icon="i-lucide-info"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+      </template>
+      <span
+        v-if="message.content && isMessageSticker"
+        class="inline-grid grid-flow-col auto-cols-max items-center gap-1"
+      >
+        <Icon icon="i-lucide-image" class="size-3.5" />
+        {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
+      </span>
+
+      <template v-else-if="message.content">
+        {{ parsedLastMessage }}
+      </template>
+
+      <span
+        v-else-if="message.attachments"
+        class="inline-block align-middle truncate"
+      >
+        <Icon
+          v-if="attachmentIcon && showMessageType"
+          :icon="attachmentIcon"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <span class="inline-block align-middle">
+          {{ $t(attachmentMessageContent) }}
+        </span>
+      </span>
+
+      <template v-else>
+        {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
+      </template>
+    </span>
+  </div>
+</template>
@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  count: { type: Number, required: true },
+  alignBottom: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+
+const displayCount = computed(() =>
+  props.count > 9 ? t('CHAT_LIST.UNREAD_COUNT_OVERFLOW') : props.count
+);
+</script>
+
+<template>
+  <span
+    v-if="count > 0"
+    class="bg-n-blue-9 rounded-full h-4 min-w-4 max-w-5 px-1 w-fit font-medium text-xxs leading-3 text-white inline-grid place-items-center flex-shrink-0"
+    :class="{
+      'mb-0.5': alignBottom,
+    }"
+  >
+    {{ displayCount }}
+  </span>
+  <span v-else />
+</template>
@@ -9,7 +9,6 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 const props = defineProps({
  status: { type: String, default: '' },
  direction: { type: String, default: '' },
-  messagePreviewClass: { type: [String, Array, Object], default: '' },
 });

 const LABEL_KEYS = {
@@ -61,16 +60,9 @@ const statusColor = computed(
 </script>

 <template>
-  <div
-    class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
-    :class="messagePreviewClass"
-  >
-    <Icon
-      class="inline-block -mt-0.5 align-middle size-4"
-      :icon="iconName"
-      :class="statusColor"
-    />
-    <span class="mx-1" :class="statusColor">
+  <div class="grid grid-cols-[auto_1fr] items-center gap-1 min-w-0 text-sm">
+    <Icon class="size-3.5" :icon="iconName" :class="statusColor" />
+    <span class="truncate text-body-main" :class="statusColor">
      {{ $t(labelKey) }}
    </span>
  </div>
@@ -10,12 +10,9 @@ defineProps({
 </script>

 <template>
-  <div class="flex items-center text-n-slate-11 text-xs min-w-0">
-    <ChannelIcon
-      :inbox="inbox"
-      class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
-    />
-    <span class="truncate">
+  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
+    <span class="truncate text-label-small text-n-slate-11">
      {{ inbox.name }}
    </span>
  </div>
@@ -20,10 +20,10 @@ const showCopilotTab = computed(() =>

 const { uiSettings } = useUISettings();
 const isContactSidebarOpen = computed(
-  () => uiSettings.value.is_contact_sidebar_open
+  () => uiSettings.value.is_contact_sidebar_open || false
 );
 const isCopilotPanelOpen = computed(
-  () => uiSettings.value.is_copilot_panel_open
+  () => uiSettings.value.is_copilot_panel_open || false
 );

 const toggleConversationSidebarToggle = () => {
@@ -35,7 +35,7 @@ const toggleConversationSidebarToggle = () => {

 const handleConversationSidebarToggle = () => {
  updateUISettings({
-    is_contact_sidebar_open: true,
+    is_contact_sidebar_open: !isContactSidebarOpen.value,
    is_copilot_panel_open: false,
  });
 };
@@ -43,7 +43,7 @@ const handleConversationSidebarToggle = () => {
 const handleCopilotSidebarToggle = () => {
  updateUISettings({
    is_contact_sidebar_open: false,
-    is_copilot_panel_open: true,
+    is_copilot_panel_open: !isCopilotPanelOpen.value,
  });
 };

@@ -0,0 +1,100 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { evaluateSLAStatus } from '@chatwoot/utils';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+
+import SLAPopoverCard from './SLAPopoverCard.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
+
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+  showExtendedInfo: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const REFRESH_INTERVAL = 60000;
+
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const appliedSLA = computed(() => props.chat?.applied_sla);
+const slaEvents = computed(() => props.chat?.sla_events);
+const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+
+const conversation = computed(() => useCamelCase(props.chat, { deep: true }));
+
+const showSlaPopoverCard = computed(
+  () => props.showExtendedInfo && slaEvents.value?.length > 0
+);
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: appliedSLA.value || {},
+    chat: conversation.value,
+  });
+};
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
+
+watch(() => props.chat, updateSlaStatus);
+
+defineExpose({
+  hasSlaThreshold,
+});
+</script>
+
+<template>
+  <div
+    v-if="hasSlaThreshold"
+    v-bind="$attrs"
+    class="relative flex items-center cursor-pointer min-w-fit group"
+  >
+    <Label
+      :label="slaStatus.threshold"
+      :color="isSlaMissed ? 'ruby' : 'amber'"
+      compact
+    >
+      <template #icon>
+        <Icon icon="i-lucide-flame" class="flex-shrink-0 size-3.5" />
+      </template>
+    </Label>
+    <SLAPopoverCard
+      v-if="showSlaPopoverCard"
+      :sla-missed-events="slaEvents"
+      class="start-0 md:start-auto md:end-0 top-7 hidden group-hover:flex"
+    />
+  </div>
+  <template v-else />
+</template>
@@ -1,8 +1,10 @@
 <script setup>
+import { computed } from 'vue';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
 import AttributeBadge from 'dashboard/components-next/CustomAttributes/AttributeBadge.vue';
-import { computed } from 'vue';

 const props = defineProps({
  attribute: {
@@ -18,7 +20,7 @@ const props = defineProps({
 const emit = defineEmits(['edit', 'delete']);

 const iconByType = {
-  text: 'i-lucide-align-justify',
+  text: 'i-lucide-menu',
  checkbox: 'i-lucide-circle-check-big',
  list: 'i-lucide-list',
  date: 'i-lucide-calendar',
@@ -28,61 +30,60 @@ const iconByType = {

 const attributeIcon = computed(() => {
  const typeKey = props.attribute.type?.toLowerCase();
-  return iconByType[typeKey] || 'i-lucide-align-justify';
+  return iconByType[typeKey] || 'i-lucide-menu';
 });
 </script>

 <template>
-  <div
-    class="flex flex-col gap-2 p-4 bg-n-solid-1 rounded-2xl outline outline-1 outline-n-container"
-  >
-    <div class="flex flex-wrap gap-2 justify-between items-center">
-      <div class="flex flex-wrap gap-2 items-center min-w-0">
-        <h4 class="text-sm font-medium truncate text-n-slate-12">
-          {{ attribute.label }}
-        </h4>
-        <div class="w-px h-3 bg-n-strong" />
-        <div class="flex gap-2 items-center text-sm text-n-slate-11">
-          <div class="flex items-center gap-1.5 text-n-slate-11">
-            <Icon :icon="attributeIcon" class="size-4" />
-            <span class="text-sm">{{ attribute.type }}</span>
+  <div class="flex flex-col py-4 divide-y divide-n-weak">
+    <div class="flex justify-between flex-row items-center gap-4 min-w-0">
+      <div class="flex items-center gap-4 min-w-0">
+        <div
+          class="flex items-center flex-shrink-0 size-10 justify-center rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
+        >
+          <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
+        </div>
+        <div class="flex flex-col gap-1.5 items-start min-w-0">
+          <div class="flex items-center gap-2">
+            <h4 class="text-heading-3 truncate text-n-slate-12">
+              {{ attribute.label }}
+            </h4>
+            <div class="flex items-center gap-1.5">
+              <Label :label="attribute.type" compact />
+              <AttributeBadge
+                v-for="badge in badges"
+                :key="badge.type"
+                :type="badge.type"
+              />
+            </div>
          </div>
-          <div class="w-px h-3 bg-n-weak" />
-          <div class="flex items-center gap-1.5 text-n-slate-11">
-            <Icon icon="i-lucide-key-round" class="size-4" />
-            <span class="line-clamp-1 text-sm">{{ attribute.value }}</span>
+          <div class="grid grid-cols-[auto_1fr] items-center gap-1.5">
+            <Icon icon="i-lucide-key-round" class="size-3.5 text-n-slate-11" />
+            <div class="flex items-center gap-2 min-w-0">
+              <span class="text-body-main text-n-slate-11 truncate">
+                {{ attribute.value }}
+              </span>
+              <template
+                v-if="attribute.attribute_description || attribute.description"
+              >
+                <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
+                <span class="text-body-main text-n-slate-11 truncate">
+                  {{ attribute.attribute_description || attribute.description }}
+                </span>
+              </template>
+            </div>
          </div>
        </div>
      </div>
-      <div class="flex gap-2 items-center">
-        <AttributeBadge
-          v-for="badge in badges"
-          :key="badge.type"
-          :type="badge.type"
-        />
-        <div
-          v-if="badges.length > 0"
-          class="w-px h-3 bg-n-strong ltr:ml-1.5 rtl:mr-1.5"
-        />
+      <div class="flex gap-3 justify-end flex-shrink-0">
        <Button
-          icon="i-lucide-pencil-line"
-          size="sm"
-          color="slate"
-          ghost
+          icon="i-woot-edit-pen"
+          slate
+          sm
          @click="emit('edit', attribute)"
        />
-        <div class="w-px h-3 bg-n-strong" />
-        <Button
-          icon="i-lucide-trash"
-          size="sm"
-          color="slate"
-          ghost
-          @click="emit('delete', attribute)"
-        />
+        <Button icon="i-woot-bin" slate sm @click="emit('delete', attribute)" />
      </div>
    </div>
-    <p class="mb-0 text-sm text-n-slate-11">
-      {{ attribute.attribute_description || attribute.description || '' }}
-    </p>
  </div>
 </template>
@@ -0,0 +1,149 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { useToggle } from '@vueuse/core';
+import countries from 'shared/constants/countries.js';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Flag from 'dashboard/components-next/flag/Flag.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['change']);
+const countryCode = defineModel({
+  type: String,
+  default: '',
+});
+
+const { t } = useI18n();
+
+const [showCountryDropdown, toggleCountryDropdown] = useToggle();
+const searchQuery = ref('');
+
+const clearOption = computed(() => ({
+  label: t('DROPDOWN_MENU.CLEAR_SELECTION'),
+  value: 'clear',
+  action: 'clear',
+}));
+
+const countryOptions = computed(() =>
+  countries.map(({ name, id }) => ({
+    label: name,
+    value: id,
+    action: 'select',
+    isSelected: countryCode.value === id,
+  }))
+);
+
+const filteredCountries = computed(() => {
+  if (!searchQuery.value) return countryOptions.value;
+
+  const query = searchQuery.value.toLowerCase();
+  return countryOptions.value.filter(country =>
+    country.label.toLowerCase().includes(query)
+  );
+});
+
+const menuItems = computed(() => {
+  const items = [...filteredCountries.value];
+  if (countryCode.value) {
+    items.unshift(clearOption.value);
+  }
+  return items;
+});
+
+const selectedCountry = computed(() => {
+  return countries.find(country => country.id === countryCode.value);
+});
+
+const buttonLabel = computed(() => {
+  if (selectedCountry.value) {
+    return selectedCountry.value.name;
+  }
+  return props.placeholder;
+});
+
+const handleAction = ({ value, action }) => {
+  if (action === 'clear') {
+    countryCode.value = '';
+    emit('change', null);
+    toggleCountryDropdown(false);
+    return;
+  }
+
+  if (countryCode.value === value) {
+    countryCode.value = '';
+    emit('change', null);
+  } else {
+    countryCode.value = value;
+    const country = countries.find(c => c.id === value);
+    emit('change', country);
+  }
+  toggleCountryDropdown(false);
+};
+
+const handleSearch = query => {
+  searchQuery.value = query;
+};
+
+const handleClickOutside = () => {
+  toggleCountryDropdown(false);
+};
+
+watch(showCountryDropdown, isOpen => {
+  if (isOpen) searchQuery.value = '';
+});
+</script>
+
+<template>
+  <div v-on-click-outside="handleClickOutside" class="relative w-full min-w-0">
+    <Button
+      slate
+      sm
+      :label="buttonLabel"
+      :icon="!selectedCountry ? 'i-lucide-flag' : ''"
+      :variant="showCountryDropdown ? 'faded' : 'solid'"
+      type="button"
+      no-animation
+      justify="start"
+      class="w-full -outline-offset-1"
+      @click="toggleCountryDropdown()"
+    >
+      <template v-if="selectedCountry" #icon>
+        <Flag :country="selectedCountry.id" class="size-3" />
+      </template>
+    </Button>
+
+    <Transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <DropdownMenu
+        v-if="showCountryDropdown"
+        :menu-items="menuItems"
+        show-search
+        :search-placeholder="t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')"
+        class="max-h-60 overflow-y-auto absolute z-50 w-full mt-1 top-full min-w-40"
+        @action="handleAction"
+        @search="handleSearch"
+      >
+        <template #icon="{ item }">
+          <Flag
+            v-if="item.value !== 'clear'"
+            :country="item.value"
+            class="size-3"
+          />
+        </template>
+      </DropdownMenu>
+    </Transition>
+  </div>
+</template>
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';

 const props = defineProps({
  type: {
@@ -18,11 +19,13 @@ const attributeConfig = {
    colorClass: 'text-n-blue-11',
    icon: 'i-lucide-message-circle',
    labelKey: 'ATTRIBUTES_MGMT.BADGES.PRE_CHAT',
+    color: 'slate',
  },
  resolution: {
    colorClass: 'text-n-teal-11',
    icon: 'i-lucide-circle-check-big',
    labelKey: 'ATTRIBUTES_MGMT.BADGES.RESOLUTION',
+    color: 'slate',
  },
 };
 const config = computed(
@@ -31,12 +34,9 @@ const config = computed(
 </script>

 <template>
-  <div
-    class="flex gap-1 justify-center items-center px-1.5 py-1 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2"
-  >
-    <Icon :icon="config.icon" class="size-4" :class="config.colorClass" />
-    <span class="text-xs" :class="config.colorClass">{{
-      t(config.labelKey)
-    }}</span>
-  </div>
+  <Label :label="t(config.labelKey)" :color="config.color" compact>
+    <template #icon>
+      <Icon :icon="config.icon" class="size-3.5 text-n-slate-12" />
+    </template>
+  </Label>
 </template>
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';

 import Button from 'dashboard/components-next/button/Button.vue';
 import Switch from 'dashboard/components-next/switch/Switch.vue';
@@ -19,28 +19,35 @@ const emit = defineEmits(['update', 'delete']);

 const attributeValue = ref(Boolean(props.attribute.value));

+const isAttributePresent = computed(() => {
+  return (
+    props.attribute.value !== undefined &&
+    props.attribute.value !== null &&
+    props.attribute.value !== ''
+  );
+});
+
 const handleChange = value => {
  emit('update', value);
 };
+
+const handleDelete = () => {
+  attributeValue.value = false;
+  emit('delete');
+};
 </script>

 <template>
-  <div
-    class="flex items-center w-full gap-2"
-    :class="{
-      'justify-start': isEditingView,
-      'justify-end': !isEditingView,
-    }"
-  >
+  <div class="flex items-center w-full gap-2 justify-end">
    <Switch v-model="attributeValue" @change="handleChange" />
    <Button
-      v-if="isEditingView"
-      variant="faded"
-      color="ruby"
+      v-if="isEditingView && isAttributePresent"
+      ghost
+      ruby
      icon="i-lucide-trash"
-      size="xs"
-      class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
-      @click="emit('delete')"
+      xs
+      class="flex-shrink-0 !size-5 !rounded"
+      @click="handleDelete"
    />
  </div>
 </template>
@@ -75,20 +75,15 @@ const handleInputUpdate = async () => {
 </script>

 <template>
-  <div
-    class="flex items-center w-full min-w-0 gap-2"
-    :class="{
-      'justify-start': isEditingView,
-      'justify-end': !isEditingView,
-    }"
-  >
+  <div class="flex items-center w-full min-w-0 gap-1.5 justify-end">
    <span
      v-if="!isEditingValue"
-      class="min-w-0 text-sm"
+      class="min-w-0 text-body-main"
      :class="{
-        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none !font-medium':
          !isEditingView,
-        'text-n-slate-12 truncate': isEditingView,
+        'text-n-slate-12 truncate': isEditingView && attribute.value,
+        'text-n-slate-10 truncate': isEditingView && !attribute.value,
      }"
      @click="toggleEditValue(!isEditingView)"
    >
@@ -100,19 +95,20 @@ const handleInputUpdate = async () => {
      class="flex items-center gap-1"
    >
      <Button
-        variant="faded"
-        color="slate"
-        icon="i-lucide-pencil"
-        size="xs"
-        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        ghost
+        slate
+        icon="i-lucide-pen-line"
+        xs
+        class="flex-shrink-0 !size-5 !rounded"
        @click="toggleEditValue(true)"
      />
      <Button
-        variant="faded"
-        color="ruby"
+        v-if="attribute.value"
+        ghost
+        ruby
        icon="i-lucide-trash"
-        size="xs"
-        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        xs
+        class="flex-shrink-0 !size-5 !rounded"
        @click="emit('delete')"
      />
    </div>
@@ -125,7 +121,7 @@ const handleInputUpdate = async () => {
      <Input
        v-model="defaultDateValue"
        type="date"
-        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        class="w-full [&>p]:absolute [&>p]:mt-1 [&>p]:top-6 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
        :message="
          hasError
            ? t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_DATE')
@@ -133,14 +129,15 @@ const handleInputUpdate = async () => {
        "
        :message-type="hasError ? 'error' : 'info'"
        autofocus
-        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        custom-input-class="h-7 py-1 ltr:rounded-r-none rtl:rounded-l-none"
+        @enter="handleInputUpdate"
      />
      <Button
        icon="i-lucide-check"
        :color="hasError ? 'ruby' : 'blue'"
        size="sm"
-        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        type="button"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none !h-7"
        @click="handleInputUpdate"
      />
    </div>
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';

 const props = defineProps({
  attribute: {
@@ -40,61 +41,56 @@ const handleAttributeAction = async action => {
 </script>

 <template>
-  <div
-    class="flex items-center w-full min-w-0 gap-2"
-    :class="{
-      'justify-start': isEditingView,
-      'justify-end': !isEditingView,
-    }"
-  >
+  <div class="flex items-center w-full min-w-0 gap-1.5 justify-end">
    <div
      v-on-clickaway="() => toggleAttributeListDropdown(false)"
-      class="relative flex items-center"
+      class="relative flex items-center min-w-0 flex-1 justify-end gap-2 cursor-pointer"
+      @click="toggleAttributeListDropdown()"
    >
      <span
-        class="min-w-0 text-sm"
+        v-tooltip.top="{
+          content: attribute.value,
+          delay: { show: 1000, hide: 0 },
+        }"
+        class="min-w-0 text-body-main truncate"
        :class="{
-          'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+          'text-n-slate-11 hover:text-n-slate-12 py-2 select-none !font-medium':
            !isEditingView,
-          'text-n-slate-12 truncate flex-1': isEditingView,
+          'text-n-slate-12': isEditingView && attribute.value,
+          'text-n-slate-10': isEditingView && !attribute.value,
        }"
-        @click="toggleAttributeListDropdown(!props.isEditingView)"
      >
        {{
          attribute.value ||
          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.SELECT')
        }}
      </span>
+      <Icon
+        :icon="
+          showAttributeListDropdown
+            ? 'i-lucide-chevron-up'
+            : 'i-lucide-chevron-down'
+        "
+        class="text-n-slate-11 flex-shrink-0 size-4"
+      />
      <DropdownMenu
        v-if="showAttributeListDropdown"
        :menu-items="attributeListMenuItems"
        show-search
-        class="w-48 mt-2 top-full"
-        :class="{
-          'ltr:right-0 rtl:left-0': !isEditingView,
-          'ltr:left-0 rtl:right-0': isEditingView,
-        }"
+        class="w-48 mt-2 top-full ltr:right-0 rtl:left-0"
+        @click.stop
        @action="handleAttributeAction($event)"
      />
    </div>

-    <div v-if="isEditingView" class="flex items-center gap-1">
-      <Button
-        variant="faded"
-        color="slate"
-        icon="i-lucide-pencil"
-        size="xs"
-        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
-        @click="toggleAttributeListDropdown()"
-      />
-      <Button
-        variant="faded"
-        color="ruby"
-        icon="i-lucide-trash"
-        size="xs"
-        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
-        @click="emit('delete')"
-      />
-    </div>
+    <Button
+      v-if="isEditingView && attribute.value"
+      ghost
+      ruby
+      icon="i-lucide-trash"
+      xs
+      class="flex-shrink-0 !size-5 !rounded"
+      @click="emit('delete')"
+    />
  </div>
 </template>
@@ -114,24 +114,24 @@ const handleInputUpdate = async () => {
 </script>

 <template>
-  <div
-    class="flex items-center w-full min-w-0 gap-2"
-    :class="{
-      'justify-start': isEditingView,
-      'justify-end': !isEditingView,
-    }"
-  >
+  <div class="flex items-center w-full min-w-0 gap-1.5 justify-end">
    <span
      v-if="!isEditingValue"
-      class="min-w-0 text-sm"
-      :class="{
-        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
-          !isEditingView,
-        'text-n-slate-12 truncate': isEditingView && !isAttributeTypeLink,
-        'truncate hover:text-n-brand text-n-blue-text':
-          isEditingView && isAttributeTypeLink,
+      v-tooltip.top="{
+        content: !isAttributeTypeLink ? attribute.value : '',
+        delay: { show: 1000, hide: 0 },
      }"
-      @click="toggleEditValue(!isEditingView)"
+      class="min-w-0 cursor-pointer text-body-main"
+      :class="{
+        'text-n-slate-11 hover:text-n-slate-12 py-2 select-none !font-medium':
+          !isEditingView,
+        'text-n-slate-12 truncate':
+          isEditingView && !isAttributeTypeLink && attribute.value,
+        'text-n-slate-10 truncate': isEditingView && !attribute.value,
+        'truncate hover:text-n-brand text-n-blue-10':
+          isEditingView && isAttributeTypeLink && attribute.value,
+      }"
+      @click="toggleEditValue(true)"
    >
      <a
        v-if="isAttributeTypeLink && attribute.value && isEditingView"
@@ -156,19 +156,20 @@ const handleInputUpdate = async () => {
      class="flex items-center gap-1"
    >
      <Button
-        variant="faded"
-        color="slate"
-        icon="i-lucide-pencil"
-        size="xs"
-        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        ghost
+        slate
+        icon="i-lucide-pen-line"
+        xs
+        class="flex-shrink-0 !size-5 !rounded"
        @click="toggleEditValue(true)"
      />
      <Button
-        variant="faded"
-        color="ruby"
+        v-if="attribute.value"
+        ghost
+        ruby
        icon="i-lucide-trash"
-        size="xs"
-        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        xs
+        class="flex-shrink-0 !size-5 !rounded"
        @click="emit('delete')"
      />
    </div>
@@ -182,18 +183,19 @@ const handleInputUpdate = async () => {
        v-model="editedValue"
        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')"
        :type="getInputType"
-        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        class="w-full [&>p]:absolute [&>p]:mt-1 [&>p]:top-6 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
        autofocus
        :message="attributeErrorMessage"
        :message-type="hasError ? 'error' : 'info'"
-        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        custom-input-class="h-7 py-1 ltr:rounded-r-none rtl:rounded-l-none"
+        @enter="handleInputUpdate"
      />
      <Button
        icon="i-lucide-check"
        :color="hasError ? 'ruby' : 'blue'"
        size="sm"
-        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        type="button"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none !h-7"
        @click="handleInputUpdate"
      />
    </div>
@@ -26,7 +26,7 @@ defineProps({
    class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
  >
    <div
-      class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
+      class="relative w-full max-w-5xl mx-auto overflow-hidden h-full max-h-[28rem]"
    >
      <div
        v-if="showBackdrop"
@@ -37,7 +37,7 @@ defineProps({
      <div
        class="flex flex-col items-center justify-end w-full h-full pb-20"
        :class="{
-          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent':
+          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-surface-1 from-40% to-transparent':
            showBackdrop,
        }"
      >
@@ -93,13 +93,15 @@ const statusText = computed(() => {

 const categoryName = computed(() => {
  if (props.category?.slug) {
-    return `${props.category.icon} ${props.category.name}`;
+    return props.category.name;
  }
  return t(
    'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
  );
 });

+const categoryIcon = computed(() => props.category?.icon || '');
+
 const authorName = computed(() => {
  return props.author?.name || props.author?.availableName || '';
 });
@@ -123,17 +125,17 @@ const handleClick = id => {
 </script>

 <template>
-  <CardLayout>
+  <CardLayout class="[&>div]:!pt-3 group/articleCard hover:bg-n-alpha-1">
    <div class="flex justify-between w-full gap-1">
      <span
-        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
+        class="cursor-pointer py-1.5 text-heading-3 group-hover/articleCard:text-n-blue-11 text-n-slate-12 line-clamp-1"
        @click="handleClick(id)"
      >
        {{ title }}
      </span>
      <div class="flex items-center gap-2">
        <span
-          class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
+          class="text-xs font-440 outline outline-1 outline-n-container inline-flex items-center px-2 h-6 rounded-md bg-n-button-color"
          :class="statusTextColor"
        >
          {{ statusText }}
@@ -144,41 +146,52 @@ const handleClick = id => {
        >
          <Button
            icon="i-lucide-ellipsis-vertical"
-            color="slate"
+            slate
+            :variant="!showActionsDropdown ? 'ghost' : 'faded'"
            size="xs"
-            class="rounded-md group-hover:bg-n-alpha-2"
+            class="rounded-md group-hover:bg-n-alpha-2 [&>span]:size-3.5"
            @click="toggleDropdown()"
          />
          <DropdownMenu
            v-if="showActionsDropdown"
            :menu-items="articleMenuItems"
-            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
+            class="mt-1 ltr:right-0 rtl:left-0 top-full"
            @action="handleArticleAction($event)"
          />
        </div>
      </div>
    </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-4">
-        <div class="flex items-center gap-1">
+    <div class="flex items-center justify-between w-full gap-4 min-w-0">
+      <div class="flex items-center gap-3 min-w-0 overflow-hidden">
+        <div class="flex items-center gap-1.5 min-w-0 shrink">
          <Avatar
            :name="authorName"
            :src="authorThumbnailSrc"
            :size="16"
            rounded-full
+            class="shrink-0"
          />
-          <span class="text-sm truncate text-n-slate-11">
+          <span class="text-body-main truncate text-n-slate-11">
            {{ authorName || '-' }}
          </span>
        </div>
-        <span class="block text-sm whitespace-nowrap text-n-slate-11">
-          {{ categoryName }}
-        </span>
+        <div class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
        <div
-          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
+          v-if="category"
+          class="flex items-center gap-1.5 text-n-slate-11 min-w-0 shrink"
        >
-          <Icon icon="i-lucide-eye" class="size-4" />
-          <span class="text-sm">
+          <span v-if="categoryIcon" class="text-sm shrink-0">
+            {{ categoryIcon }}
+          </span>
+          <Icon v-else icon="i-lucide-shapes" class="size-4 shrink-0" />
+          <span class="text-body-main truncate">
+            {{ categoryName }}
+          </span>
+        </div>
+        <div v-if="category" class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
+        <div class="flex items-center gap-1.5 text-n-slate-11 shrink-0">
+          <Icon icon="i-lucide-trending-up" class="size-4" />
+          <span class="text-body-main whitespace-nowrap">
            {{
              t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
                count: views,
@@ -187,7 +200,7 @@ const handleClick = id => {
          </span>
        </div>
      </div>
-      <span class="text-sm text-n-slate-11 line-clamp-1">
+      <span class="text-sm text-n-slate-11 truncate">
        {{ lastUpdatedAt }}
      </span>
    </div>
@@ -1,11 +1,10 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';

 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';

 const props = defineProps({
  id: {
@@ -38,27 +37,6 @@ const emit = defineEmits(['click', 'action']);

 const { t } = useI18n();

-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const categoryMenuItems = [
-  {
-    label: 'Edit',
-    action: 'edit',
-    value: 'edit',
-    icon: 'i-lucide-pencil',
-  },
-  {
-    label: 'Delete',
-    action: 'delete',
-    value: 'delete',
-    icon: 'i-lucide-trash',
-  },
-];
-
-const categoryTitleWithIcon = computed(() => {
-  return `${props.icon} ${props.title}`;
-});
-
 const description = computed(() => {
  return props.description ? props.description : 'No description added';
 });
@@ -71,59 +49,68 @@ const handleClick = slug => {
  emit('click', slug);
 };

-const handleAction = ({ action, value }) => {
-  emit('action', { action, value, id: props.id });
-  toggleDropdown(false);
+const handleAction = ({ action }) => {
+  emit('action', { action, id: props.id });
 };
 </script>

 <template>
  <CardLayout>
-    <div class="flex w-full gap-2">
-      <div class="flex justify-between w-full gap-2">
-        <div class="flex items-center justify-start w-full min-w-0 gap-2">
-          <span
-            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
-            @click="handleClick(slug)"
-          >
-            {{ categoryTitleWithIcon }}
-          </span>
-          <span
-            class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"
-          >
-            {{
-              t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
-                count: articlesCount,
-              })
-            }}
-          </span>
+    <div class="flex items-start justify-between gap-3 group/categoryCard">
+      <div
+        class="size-10 rounded-[0.625rem] mt-1 outline outline-1 outline-n-weak flex items-center justify-center flex-shrink-0"
+      >
+        <span v-if="icon" class="text-body-para">
+          {{ icon }}
+        </span>
+        <Icon v-else icon="i-lucide-shapes" class="size-4 shrink-0" />
+      </div>
+      <div class="flex flex-col w-full gap-2">
+        <div class="flex justify-between w-full gap-2 h-6">
+          <div class="flex items-center justify-start min-w-0 gap-2">
+            <span
+              class="text-heading-3 truncate group-hover/categoryCard:text-n-blue-11 cursor-pointer text-n-slate-12"
+              @click="handleClick(slug)"
+            >
+              {{ title }}
+            </span>
+            <div class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
+            <span class="text-body-main text-n-slate-11 shrink-0">
+              {{
+                t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
+                  count: articlesCount,
+                })
+              }}
+            </span>
+          </div>
+          <div class="flex items-center gap-1 shrink-0">
+            <Button
+              icon="i-lucide-pen-line"
+              slate
+              xs
+              ghost
+              class="[&>span]:size-3.5"
+              @click="handleAction({ action: 'edit' })"
+            />
+            <div class="w-px h-3 bg-n-weak rounded-lg" />
+            <Button
+              icon="i-lucide-trash"
+              slate
+              xs
+              ghost
+              class="[&>span]:size-3.5"
+              @click="handleAction({ action: 'delete' })"
+            />
+          </div>
        </div>
-        <div
-          v-on-clickaway="() => toggleDropdown(false)"
-          class="relative group"
+
+        <span
+          class="text-body-main line-clamp-3"
+          :class="hasDescription ? 'text-n-slate-11' : 'text-n-slate-9'"
        >
-          <Button
-            icon="i-lucide-ellipsis-vertical"
-            color="slate"
-            size="xs"
-            variant="ghost"
-            class="rounded-md group-hover:bg-n-alpha-2"
-            @click="toggleDropdown()"
-          />
-          <DropdownMenu
-            v-if="showActionsDropdown"
-            :menu-items="categoryMenuItems"
-            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
-            @action="handleAction"
-          />
-        </div>
+          {{ description }}
+        </span>
      </div>
    </div>
-    <span
-      class="text-sm line-clamp-3"
-      :class="hasDescription ? 'text-n-slate-11' : 'text-n-slate-9'"
-    >
-      {{ description }}
-    </span>
  </CardLayout>
 </template>
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useRoute } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store.js';
@@ -14,6 +14,14 @@ defineProps({
    type: Number,
    default: 1,
  },
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  createButtonLabel: {
+    type: String,
+    default: '',
+  },
  totalItems: {
    type: Number,
    default: 100,
@@ -32,11 +40,12 @@ defineProps({
  },
 });

-const emit = defineEmits(['update:currentPage']);
+const emit = defineEmits(['update:currentPage', 'create']);

 const route = useRoute();

 const createPortalDialogRef = ref(null);
+const createButtonRef = useTemplateRef('createButtonRef');

 const showPortalSwitcher = ref(false);

@@ -55,56 +64,86 @@ const updateCurrentPage = page => {
 const togglePortalSwitcher = () => {
  showPortalSwitcher.value = !showPortalSwitcher.value;
 };
+
+const onClickCreateButton = () => {
+  emit('create');
+};
 </script>

 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
-        <div
-          v-if="showHeaderTitle"
-          class="flex items-center justify-start h-20 gap-2"
-        >
-          <span
-            v-if="activePortalName"
-            class="text-xl font-medium text-n-slate-12"
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
+    <header
+      class="sticky top-0 z-10 px-6 pb-3 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+    >
+      <div class="w-full max-w-5xl mx-auto">
+        <div class="flex items-center justify-between gap-3">
+          <div
+            v-if="showHeaderTitle"
+            class="flex items-center justify-start h-20 gap-1"
          >
-            {{ activePortalName }}
-          </span>
-          <div v-if="activePortalName" class="relative group">
-            <OnClickOutside @trigger="showPortalSwitcher = false">
-              <Button
-                icon="i-lucide-chevron-down"
-                variant="ghost"
-                color="slate"
-                size="xs"
-                class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
-                @click="togglePortalSwitcher"
-              />
+            <span
+              v-if="activePortalName"
+              class="text-heading-1 text-n-slate-12 ltr:mr-1 rtl:ml-1"
+            >
+              {{ activePortalName }}
+            </span>
+            <div v-if="activePortalName" class="relative group">
+              <OnClickOutside @trigger="showPortalSwitcher = false">
+                <Button
+                  icon="i-lucide-chevron-down"
+                  :variant="showPortalSwitcher ? 'faded' : 'ghost'"
+                  color="slate"
+                  size="xs"
+                  class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
+                  @click="togglePortalSwitcher"
+                />

-              <PortalSwitcher
-                v-if="showPortalSwitcher"
-                class="absolute ltr:left-0 rtl:right-0 top-9"
-                @close="showPortalSwitcher = false"
-                @create-portal="createPortalDialogRef.dialogRef.open()"
+                <PortalSwitcher
+                  v-if="showPortalSwitcher"
+                  class="absolute ltr:left-0 rtl:right-0 top-9"
+                  @close="showPortalSwitcher = false"
+                  @create-portal="createPortalDialogRef.dialogRef.open()"
+                />
+              </OnClickOutside>
+              <CreatePortalDialog ref="createPortalDialogRef" />
+            </div>
+            <div
+              v-if="activePortalName && headerTitle"
+              class="flex items-center gap-1"
+            >
+              <div
+                v-if="activePortalName"
+                class="w-px h-3 rounded-2xl bg-n-strong ltr:ml-2 ltr:mr-3 rtl:mr-2 rtl:ml-3"
              />
-            </OnClickOutside>
-            <CreatePortalDialog ref="createPortalDialogRef" />
+              <span v-if="headerTitle" class="text-body-main text-n-slate-12">
+                {{ headerTitle }}
+              </span>
+            </div>
+          </div>
+          <div ref="createButtonRef" class="relative z-20">
+            <Button
+              v-if="createButtonLabel"
+              :label="createButtonLabel"
+              size="sm"
+              @click="onClickCreateButton"
+            />
+            <slot name="modal" :button-ref="createButtonRef" />
          </div>
        </div>
        <slot name="header-actions" />
      </div>
    </header>
-    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-3 lg:px-6">
+    <main class="flex-1 px-6 overflow-y-auto">
+      <div class="w-full max-w-5xl mx-auto py-3">
        <slot name="content" />
      </div>
    </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
      <PaginationFooter
        :current-page="currentPage"
        :total-items="totalItems"
        :items-per-page="itemsPerPage"
+        class="max-w-[67rem]"
        @update:current-page="updateCurrentPage"
      />
    </footer>
@@ -55,19 +55,20 @@ const handleAction = ({ action, value }) => {
  <CardLayout>
    <div class="flex justify-between gap-2">
      <div class="flex items-center justify-start gap-2">
-        <span class="text-sm font-medium text-n-slate-12 line-clamp-1">
+        <span class="text-heading-3 text-n-slate-12 line-clamp-1">
          {{ locale }} ({{ localeCode }})
        </span>
+        <div v-if="isDefault" class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
        <span
          v-if="isDefault"
-          class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
+          class="text-button-small outline outline-1 outline-n-container inline-flex items-center px-2 h-6 rounded-md bg-n-button-color"
        >
          {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
        </span>
      </div>
      <div class="flex items-center justify-end gap-4">
        <div class="flex items-center gap-4">
-          <span class="text-sm text-n-slate-11 whitespace-nowrap">
+          <span class="text-body-main text-n-slate-11 whitespace-nowrap">
            {{
              $t(
                'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
@@ -76,7 +77,7 @@ const handleAction = ({ action, value }) => {
            }}
          </span>
          <div class="w-px h-3 bg-n-weak" />
-          <span class="text-sm text-n-slate-11 whitespace-nowrap">
+          <span class="text-body-main text-n-slate-11 whitespace-nowrap">
            {{
              $t(
                'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
@@ -92,15 +93,16 @@ const handleAction = ({ action, value }) => {
          <Button
            icon="i-lucide-ellipsis-vertical"
            color="slate"
-            size="xs"
-            class="rounded-md group-hover:bg-n-alpha-2"
+            ghost
+            xs
+            class="rounded-md group-hover:bg-n-alpha-2 [&>span]:size-3.5"
            @click="toggleDropdown()"
          />

          <DropdownMenu
            v-if="showDropdownMenu"
            :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
            @action="handleAction"
          />
        </div>
@@ -29,12 +29,7 @@ const props = defineProps({
  },
 });

-const emit = defineEmits([
-  'tabChange',
-  'localeChange',
-  'categoryChange',
-  'newArticle',
-]);
+const emit = defineEmits(['tabChange', 'localeChange', 'categoryChange']);

 const route = useRoute();
 const { t } = useI18n();
@@ -126,23 +121,21 @@ const handleCategoryAction = ({ value }) => {
  isCategoryMenuOpen.value = false;
 };

-const handleNewArticle = () => {
-  emit('newArticle');
-};
-
 const handleTabChange = value => {
  emit('tabChange', value);
 };
 </script>

 <template>
-  <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
+  <div
+    class="flex flex-col items-start justify-between w-full gap-2 lg:flex-row"
+  >
    <TabBar
      :tabs="tabs"
      :initial-active-tab="activeTabIndex"
      @tab-changed="handleTabChange"
    />
-    <div class="flex items-start justify-between w-full gap-2">
+    <div class="flex items-start justify-between lg:justify-end w-full gap-2">
      <div class="flex items-center gap-2">
        <div class="relative group">
          <OnClickOutside @trigger="isLocaleMenuOpen = false">
@@ -159,7 +152,7 @@ const handleTabChange = value => {
              v-if="isLocaleMenuOpen"
              :menu-items="localeMenuItems"
              show-search
-              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="ltr:left-0 rtl:right-0 w-40 max-w-[300px] mt-2 overflow-y-auto top-full max-h-60"
              @action="handleLocaleAction"
            />
          </OnClickOutside>
@@ -180,18 +173,12 @@ const handleTabChange = value => {
              v-if="isCategoryMenuOpen"
              :menu-items="categoryMenuItems"
              show-search
-              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="ltr:right-0 rtl:left-0 w-48 mt-2 overflow-y-auto top-full max-h-60"
              @action="handleCategoryAction"
            />
          </OnClickOutside>
        </div>
      </div>
-      <Button
-        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
-        icon="i-lucide-plus"
-        size="sm"
-        @click="handleNewArticle"
-      />
    </div>
  </div>
 </template>
@@ -136,7 +136,12 @@ const navigateToNewArticlePage = () => {
    :total-items="articlesCount"
    :items-per-page="25"
    :header="portalName"
+    :header-title="t('HELP_CENTER.ARTICLES_PAGE.HEADER')"
+    :create-button-label="
+      t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')
+    "
    :show-pagination-footer="shouldShowPaginationFooter"
+    @create="navigateToNewArticlePage"
    @update:current-page="handlePageChange"
  >
    <template #header-actions>
@@ -149,7 +154,6 @@ const navigateToNewArticlePage = () => {
          @tab-change="handleTabChange"
          @locale-change="handleLocaleAction"
          @category-change="handleCategoryAction"
-          @new-article="navigateToNewArticlePage"
        />
        <CategoryHeaderControls
          v-else-if="showCategoryHeaderControls"
@@ -1,5 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
+import { useStoreGetters } from 'dashboard/composables/store.js';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
@@ -12,6 +14,7 @@ import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/C
 import CategoryEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue';
 import EditCategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import CategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue';

 const props = defineProps({
  categories: {
@@ -37,6 +40,36 @@ const { t } = useI18n();

 const editCategoryDialog = ref(null);
 const selectedCategory = ref(null);
+const isCreateCategoryDialogOpen = ref(false);
+
+const getters = useStoreGetters();
+
+const currentPortalSlug = computed(() => route.params.portalSlug);
+
+const currentPortal = computed(() => {
+  const slug = currentPortalSlug.value;
+  if (slug) return getters['portals/portalBySlug'].value(slug);
+  return getters['portals/allPortals'].value[0];
+});
+
+const currentPortalName = computed(() => currentPortal.value?.name);
+
+const activeLocale = computed(() => {
+  return props.allowedLocales.find(
+    locale => locale.code === route.params.locale
+  );
+});
+
+const activeLocaleName = computed(() => activeLocale.value?.name ?? '');
+const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
+
+const toggleCreateCategoryDialog = () => {
+  isCreateCategoryDialogOpen.value = !isCreateCategoryDialogOpen.value;
+};
+
+const closeCreateCategoryDialog = () => {
+  isCreateCategoryDialogOpen.value = false;
+};

 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
 const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
@@ -101,7 +134,28 @@ const handleAction = ({ action, id, category: categoryData }) => {
 </script>

 <template>
-  <HelpCenterLayout :show-pagination-footer="false">
+  <HelpCenterLayout
+    :header-title="t('HELP_CENTER.CATEGORY_PAGE.HEADER')"
+    :create-button-label="
+      t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')
+    "
+    :show-pagination-footer="false"
+    @create="toggleCreateCategoryDialog"
+  >
+    <template #modal="{ buttonRef }">
+      <CategoryDialog
+        v-if="isCreateCategoryDialogOpen"
+        v-on-click-outside="[
+          closeCreateCategoryDialog,
+          { ignore: [buttonRef] },
+        ]"
+        mode="create"
+        :portal-name="currentPortalName"
+        :active-locale-name="activeLocaleName"
+        :active-locale-code="activeLocaleCode"
+        @close="closeCreateCategoryDialog"
+      />
+    </template>
    <template #header-actions>
      <CategoryHeaderControls
        :categories="categories"
@@ -33,7 +33,6 @@ const getters = useStoreGetters();
 const { t } = useI18n();

 const isLocaleMenuOpen = ref(false);
-const isCreateCategoryDialogOpen = ref(false);
 const isEditCategoryDialogOpen = ref(false);

 const currentPortalSlug = computed(() => {
@@ -127,7 +126,19 @@ const handleBreadcrumbClick = () => {

 <template>
  <div class="flex items-center justify-between w-full">
-    <div v-if="!hasSelectedCategory" class="flex items-center gap-4">
+    <div
+      v-if="!hasSelectedCategory"
+      class="flex items-center gap-4 w-full justify-between"
+    >
+      <span
+        class="min-w-0 text-sm font-medium truncate text-n-slate-11 ltr:ml-1 rtl:mr-1"
+      >
+        {{
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
+            n: categoriesCount,
+          })
+        }}
+      </span>
      <div class="relative group">
        <OnClickOutside @trigger="isLocaleMenuOpen = false">
          <Button
@@ -142,44 +153,18 @@ const handleBreadcrumbClick = () => {
            v-if="isLocaleMenuOpen"
            :menu-items="localeMenuItems"
            show-search
-            class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+            class="ltr:right-0 rtl:left-0 w-40 mt-2 overflow-y-auto top-full max-h-60"
            @action="handleLocaleAction"
          />
        </OnClickOutside>
      </div>
-      <div class="w-px h-3.5 rounded my-auto bg-n-weak" />
-      <span class="min-w-0 text-sm font-medium truncate text-n-slate-12">
-        {{
-          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
-            n: categoriesCount,
-          })
-        }}
-      </span>
    </div>
    <Breadcrumb
      v-else
      :items="breadcrumbItems"
      @click="handleBreadcrumbClick"
    />
-    <div v-if="!hasSelectedCategory" class="relative">
-      <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
-        <Button
-          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
-        />
-        <CategoryDialog
-          v-if="isCreateCategoryDialogOpen"
-          mode="create"
-          :portal-name="currentPortalName"
-          :active-locale-name="activeLocaleName"
-          :active-locale-code="activeLocaleCode"
-          @close="isCreateCategoryDialogOpen = false"
-        />
-      </OnClickOutside>
-    </div>
-    <div v-else class="relative">
+    <div v-if="hasSelectedCategory" class="relative">
      <OnClickOutside @trigger="isEditCategoryDialogOpen = false">
        <Button
          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.EDIT_CATEGORY')"
@@ -14,13 +14,13 @@ const handleClick = slug => {
  emit('click', slug);
 };

-const handleAction = ({ action, value, id }, category) => {
-  emit('action', { action, value, id, category });
+const handleAction = ({ action, id }, category) => {
+  emit('action', { action, id, category });
 };
 </script>

 <template>
-  <ul role="list" class="grid w-full h-full grid-cols-1 gap-4 md:grid-cols-2">
+  <ul role="list" class="flex w-full h-full flex-col gap-4">
    <CategoryCard
      v-for="category in categories"
      :id="category.id"
@@ -1,9 +1,9 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
+import { useI18n } from 'vue-i18n';

 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
 import AddLocaleDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue';
@@ -19,6 +19,8 @@ const props = defineProps({
  },
 });

+const { t } = useI18n();
+
 const addLocaleDialogRef = ref(null);

 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
@@ -31,20 +33,17 @@ const localeCount = computed(() => props.locales?.length);
 </script>

 <template>
-  <HelpCenterLayout :show-pagination-footer="false">
+  <HelpCenterLayout
+    :header-title="t('HELP_CENTER.LOCALES_PAGE.HEADER')"
+    :create-button-label="t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
+    :show-pagination-footer="false"
+    @create="openAddLocaleDialog"
+  >
    <template #header-actions>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-4">
-          <span class="text-sm font-medium text-n-slate-12">
-            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
-          </span>
-        </div>
-        <Button
-          :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="openAddLocaleDialog"
-        />
+      <div class="flex items-start h-8 ltr:ml-1 rtl:mr-1">
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
+        </span>
      </div>
    </template>
    <template #content>
@@ -85,7 +85,7 @@ const handleDeletePortal = () => {
      </div>
      <div
        v-else-if="activePortal"
-        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
+        class="flex flex-col w-full gap-4 max-w-2xl pb-8"
      >
        <PortalBaseSettings
          :active-portal="activePortal"
@@ -12,7 +12,7 @@ import { NOTIFICATION_TYPES_MAPPING } from 'dashboard/routes/dashboard/inbox/hel
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
-import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
+import SLACardLabel from 'dashboard/components-next/Inbox/SLACardLabel.vue';
 import InboxContextMenu from 'dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue';

 const props = defineProps({
@@ -221,7 +221,6 @@ onBeforeMount(contextMenuActions.close);
        <CardPriorityIcon
          v-if="primaryActor?.priority"
          :priority="primaryActor?.priority"
-          class="[&>svg]:size-4"
        />
        <div
          v-if="inboxIcon"
@@ -1,49 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-defineProps({
-  labelMenuItems: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['updateLabel']);
-
-const { t } = useI18n();
-
-const showDropdown = ref(false);
-</script>
-
-<template>
-  <div class="relative">
-    <button
-      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-6 outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
-      :class="{ 'bg-n-alpha-2': showDropdown }"
-      @click="showDropdown = !showDropdown"
-    >
-      <span class="i-lucide-plus" />
-      <span class="text-sm text-n-slate-11">
-        {{ t('LABEL.TAG_BUTTON') }}
-      </span>
-    </button>
-    <DropdownMenu
-      v-if="showDropdown"
-      v-on-clickaway="() => (showDropdown = false)"
-      :menu-items="labelMenuItems"
-      show-search
-      class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
-      @action="emit('updateLabel', $event)"
-    >
-      <template #thumbnail="{ item }">
-        <div
-          class="rounded-sm size-2"
-          :style="{ backgroundColor: item.thumbnail.color }"
-        />
-      </template>
-    </DropdownMenu>
-  </div>
-</template>
@@ -1,57 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  label: {
-    type: Object,
-    default: null,
-  },
-  isHovered: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['remove', 'hover']);
-
-const handleRemoveLabel = () => {
-  emit('remove', props.label);
-};
-
-const handleMouseEnter = () => {
-  // Notify parent component when this label is hovered
-  // Added this to show the remove button with transition when hovering over the label
-  // This will solve the flickering issue when hovering over the last label item
-  emit('hover', props.label?.id);
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center px-1 py-1 overflow-hidden transition-all duration-300 ease-out rounded-md bg-n-alpha-2 h-7"
-    @mouseenter="handleMouseEnter"
-  >
-    <div
-      class="w-2 h-2 m-1 rounded-sm"
-      :style="{ backgroundColor: label.color }"
-    />
-    <span class="text-sm text-n-slate-12 ltr:mr-px rtl:ml-px">
-      {{ label.title }}
-    </span>
-    <div
-      class="w-0 flex relative ltr:left-1 rtl:right-1 flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-out"
-      :class="{ 'w-6': isHovered }"
-    >
-      <Button
-        class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
-        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
-        type="button"
-        slate
-        xs
-        faded
-        icon="i-lucide-x"
-        @click="handleRemoveLabel"
-      />
-    </div>
-  </div>
-</template>
@@ -236,6 +236,10 @@ const keyboardEvents = {
 };

 useKeyboardEvents(keyboardEvents);
+
+defineExpose({
+  toggle,
+});
 </script>

 <template>
@@ -70,7 +70,7 @@ describe('composeConversationHelper', () => {
      const result = helpers.buildContactableInboxesList(inboxes);
      expect(result[0]).toMatchObject({
        id: 1,
-        icon: 'i-ri-mail-line',
+        icon: 'i-woot-mail',
        label: 'Email Inbox (support@example.com)',
        action: 'inbox',
        value: 1,
@@ -20,11 +20,11 @@ const handleButtonClick = button => {

 <template>
  <div
-    class="flex items-center justify-between px-4 py-2 border-b border-n-weak h-12"
+    class="flex flex-col items-start gap-3 justify-between ltr:pl-4 ltr:pr-2 rtl:pl-2 rtl:pr-4 my-2 pt-2"
  >
-    <div class="flex items-center justify-between gap-2 flex-1">
-      <span class="font-medium text-sm text-n-slate-12">{{ title }}</span>
-      <div class="flex items-center">
+    <div class="flex items-center justify-between gap-2 flex-1 w-full">
+      <span class="text-heading-2 text-n-slate-12">{{ title }}</span>
+      <div class="flex items-center h-6">
        <Button
          v-for="button in buttons"
          :key="button.key"
@@ -43,5 +43,6 @@ const handleButtonClick = button => {
        />
      </div>
    </div>
+    <slot />
  </div>
 </template>
@@ -112,6 +112,19 @@ const containerStyles = computed(() => ({
  height: `${props.size}px`,
 }));

+const borderRadiusClass = computed(() => {
+  if (props.roundedFull) {
+    return 'rounded-full';
+  }
+
+  // Approximates 25% of size
+  if (props.size <= 16) return 'rounded'; // 4px
+  if (props.size <= 24) return 'rounded-md'; // 6px
+  if (props.size <= 32) return 'rounded-lg'; // 8px
+  if (props.size <= 48) return 'rounded-xl'; // 12px
+  return 'rounded-2xl'; // 16px
+});
+
 const avatarStyles = computed(() => ({
  ...containerStyles.value,
  backgroundColor:
@@ -184,7 +197,7 @@ watch(

 <template>
  <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0"
+    class="relative inline-flex group/avatar z-0 flex-shrink-0 align-middle"
    :style="containerStyles"
  >
    <!-- Status Badge -->
@@ -218,7 +231,7 @@ watch(
      role="img"
      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium"
      :class="[
-        roundedFull ? 'rounded-full' : 'rounded-xl',
+        borderRadiusClass,
        {
          'dark:!bg-[var(--dark-bg)] dark:!text-[var(--dark-text)]':
            !showDefaultAvatar && (!src || !isImageValid),
@@ -267,7 +280,8 @@ watch(
        :handle-image-upload="handleImageUpload"
      >
        <div
-          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+          :class="borderRadiusClass"
          @click="handleUploadAvatar"
        >
          <Icon
@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import Avatar from 'next/avatar/Avatar.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';

 const props = defineProps({
  usersList: {
@@ -11,11 +11,11 @@ const props = defineProps({
    type: Number,
    default: 24,
  },
-  showMoreThumbnailsCount: {
+  showMoreCount: {
    type: Boolean,
    default: false,
  },
-  moreThumbnailsText: {
+  moreCountText: {
    type: String,
    default: '',
  },
@@ -36,7 +36,7 @@ const gapClass = computed(() => {
  return 'ltr:[&:not(:first-child)]:-ml-1 rtl:[&:not(:first-child)]:-mr-1';
 });

-const moreThumbnailsClass = computed(() => {
+const morePlaceholderClass = computed(() => {
  if (props.gap === 'tight') {
    return 'ltr:-ml-2 rtl:-mr-2';
  }
@@ -59,11 +59,11 @@ const moreThumbnailsClass = computed(() => {
      rounded-full
    />
    <span
-      v-if="showMoreThumbnailsCount"
-      class="text-n-slate-11 bg-n-slate-4 outline outline-1 outline-n-background text-xs font-medium rounded-full px-2 inline-flex items-center shadow relative"
-      :class="moreThumbnailsClass"
+      v-if="showMoreCount"
+      class="text-n-slate-11 bg-n-button-color outline outline-1 outline-n-weak text-xs font-420 rounded-full px-2 inline-flex items-center shadow relative"
+      :class="morePlaceholderClass"
    >
-      {{ moreThumbnailsText }}
+      {{ moreCountText }}
    </span>
  </div>
 </template>
@@ -20,11 +20,11 @@ const emit = defineEmits(['action']);

 const bannerClass = computed(() => {
  const classMap = {
-    slate: 'bg-n-slate-3 border-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-3 border-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11',
+    slate: 'bg-n-slate-1 outline-n-slate-5 text-n-slate-12',
+    amber: 'bg-n-amber-1 outline-n-amber-5 text-n-amber-12',
+    teal: 'bg-n-teal-1 outline-n-teal-5 text-n-teal-12',
+    ruby: 'bg-n-ruby-1 outline-n-ruby-5 text-n-ruby-12',
+    blue: 'bg-n-blue-1 outline-n-blue-5 text-n-blue-12',
  };

  return classMap[props.color];
@@ -32,11 +32,11 @@ const bannerClass = computed(() => {

 const buttonClass = computed(() => {
  const classMap = {
-    slate: 'bg-n-slate-4 hover:bg-n-slate-5 text-n-slate-11',
-    amber: 'bg-n-amber-4 hover:bg-n-amber-5 text-n-amber-11',
-    teal: 'bg-n-teal-4 hover:bg-n-teal-5 text-n-teal-11',
-    ruby: 'bg-n-ruby-4 hover:bg-n-ruby-5 text-n-ruby-11',
-    blue: 'bg-n-blue-4 hover:bg-n-blue-5 text-n-blue-11',
+    slate: 'hover:bg-n-slate-4 text-n-slate-11',
+    amber: 'hover:bg-n-amber-4 text-n-amber-11',
+    teal: 'hover:bg-n-teal-4 text-n-teal-11',
+    ruby: 'hover:bg-n-ruby-4 text-n-ruby-11',
+    blue: 'hover:bg-n-blue-4 text-n-blue-11',
  };

  return classMap[props.color];
@@ -49,7 +49,7 @@ const triggerAction = () => {

 <template>
  <div
-    class="text-sm rounded-xl flex items-center justify-between gap-2 border"
+    class="text-sm rounded-xl flex items-center justify-between min-h-12 gap-2 outline outline-1 -outline-offset-1"
    :class="[
      bannerClass,
      {
@@ -64,11 +64,11 @@ const triggerAction = () => {
    <div>
      <button
        v-if="actionLabel"
-        class="px-3 py-1 w-auto grid place-content-center rounded-lg"
+        class="px-3 py-1 w-auto flex items-center justify-center rounded-lg flex-shrink-0"
        :class="buttonClass"
        @click="triggerAction"
      >
-        {{ actionLabel }}
+        <span class="line-clamp-2 text-button">{{ actionLabel }}</span>
      </button>
    </div>
  </div>
@@ -103,11 +103,11 @@ const STYLE_CONFIG = {
      solid:
        'bg-n-brand text-white hover:enabled:brightness-110 focus-visible:brightness-110 outline-transparent',
      faded:
-        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text outline-n-brand',
+        'bg-n-brand/10 text-n-blue-11 hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-11 outline-n-brand',
      ghost:
-        'text-n-blue-text hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-blue-text hover:enabled:underline focus-visible:underline outline-transparent',
+        'text-n-blue-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-11 hover:enabled:underline focus-visible:underline outline-transparent',
    },
    ruby: {
      solid:
@@ -133,7 +133,7 @@ const STYLE_CONFIG = {
    },
    slate: {
      solid:
-        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-button-color dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
      faded:
        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent',
      outline:
@@ -156,10 +156,10 @@ const STYLE_CONFIG = {
  },
  sizes: {
    regular: {
-      xs: 'h-6 px-2',
-      sm: 'h-8 px-3',
-      md: 'h-10 px-4',
-      lg: 'h-12 px-5',
+      xs: 'h-6 px-2 rounded-lg',
+      sm: 'h-8 px-3 rounded-lg',
+      md: 'h-10 px-4 rounded-[0.625rem]',
+      lg: 'h-12 px-5 rounded-[0.625rem]',
    },
    iconOnly: {
      xs: 'h-6 w-6 p-0',
@@ -175,10 +175,10 @@ const STYLE_CONFIG = {
    },
  },
  fontSize: {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm font-medium',
-    lg: 'text-base',
+    xs: 'text-button-small',
+    sm: 'text-button',
+    md: 'text-button',
+    lg: 'text-base font-460',
  },
  clickAnimation: {
    xs: 'active:enabled:scale-[0.97]',
@@ -191,16 +191,16 @@ const STYLE_CONFIG = {
    center: 'justify-center',
    end: 'justify-end',
  },
-  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-100 ease-out border-0 rounded-lg outline-1 outline disabled:opacity-50',
+  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-100 ease-out border-0  outline-1 outline -outline-offset-1 disabled:opacity-50',
 };

 const variantClasses = computed(() => {
  const variantMap = {
    ghost: `${STYLE_CONFIG.colors[computedColor.value].ghost}`,
    link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-2`,
-    outline: STYLE_CONFIG.colors[computedColor.value].outline,
-    faded: STYLE_CONFIG.colors[computedColor.value].faded,
-    solid: STYLE_CONFIG.colors[computedColor.value].solid,
+    outline: `${STYLE_CONFIG.colors[computedColor.value].outline} shadow-[0_1px_2px_0_rgba(27,28,29,0.04)]`,
+    faded: `${STYLE_CONFIG.colors[computedColor.value].faded} shadow-[0_1px_2px_0_rgba(27,28,29,0.04)]`,
+    solid: `${STYLE_CONFIG.colors[computedColor.value].solid} shadow-[0_1px_2px_0_rgba(27,28,29,0.04)]`,
  };

  return variantMap[computedVariant.value];
@@ -234,6 +234,12 @@ const animationClasses = computed(() => {
    ? ''
    : STYLE_CONFIG.clickAnimation[computedSize.value];
 });
+
+const iconClasses = computed(() => {
+  return computedColor.value === 'slate' && !isIconOnly.value
+    ? 'text-n-slate-11'
+    : '';
+});
 </script>

 <template>
@@ -249,7 +255,7 @@ const animationClasses = computed(() => {
    }"
  >
    <slot v-if="(icon || $slots.icon) && !isLoading" name="icon">
-      <Icon :icon="icon" class="flex-shrink-0" />
+      <Icon :icon="icon" class="flex-shrink-0" :class="iconClasses" />
    </slot>

    <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />
@@ -115,9 +115,11 @@ const handleCreateAssistant = () => {
 </script>

 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6">
-      <div class="w-full max-w-[60rem] mx-auto">
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
+    <header
+      class="sticky top-0 z-10 px-6 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+    >
+      <div class="w-full max-w-5xl mx-auto">
        <div
          class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
        >
@@ -130,7 +132,7 @@ const handleCreateAssistant = () => {
              <div class="flex items-center gap-2">
                <span
                  v-if="!isFetchingAssistants"
-                  class="text-xl font-medium truncate text-n-slate-12"
+                  class="text-heading-1 truncate text-n-slate-12"
                >
                  {{ activeAssistantName }}
                </span>
@@ -140,7 +142,9 @@ const handleCreateAssistant = () => {
                  >
                    <Button
                      icon="i-lucide-chevron-down"
-                      variant="ghost"
+                      :variant="
+                        showAssistantSwitcherDropdown ? 'faded' : 'ghost'
+                      "
                      color="slate"
                      size="xs"
                      :disabled="isFetchingAssistants"
@@ -162,11 +166,16 @@ const handleCreateAssistant = () => {
            <div class="flex items-center gap-4">
              <div
                v-if="showAssistantSwitcher && !showPaywall && headerTitle"
-                class="w-0.5 h-4 rounded-2xl bg-n-weak"
+                class="w-px h-3 rounded-xl bg-n-weak"
              />
              <span
                v-if="headerTitle"
-                class="text-xl font-medium text-n-slate-12"
+                class="text-n-slate-12"
+                :class="
+                  showAssistantSwitcher && !showPaywall
+                    ? 'text-body-main'
+                    : 'text-heading-1'
+                "
              >
                {{ headerTitle }}
              </span>
@@ -174,7 +183,7 @@ const handleCreateAssistant = () => {
                v-if="!isEmpty && showKnowMore"
                class="flex items-center gap-2"
              >
-                <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
+                <div class="w-px h-3 rounded-xl bg-n-weak" />
                <slot name="knowMore" />
              </div>
            </div>
@@ -204,7 +213,7 @@ const handleCreateAssistant = () => {
      </div>
    </header>
    <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
+      <div class="w-full max-w-5xl h-full mx-auto py-4">
        <slot v-if="!showPaywall" name="controls" />
        <div
          v-if="isFetching"
@@ -222,11 +231,12 @@ const handleCreateAssistant = () => {
        <slot />
      </div>
    </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
      <PaginationFooter
        :current-page="currentPage"
        :total-items="totalCount"
        :items-per-page="itemsPerPage"
+        class="max-w-[67rem]"
        @update:current-page="handlePageChange"
      />
    </footer>
@@ -20,6 +20,11 @@ const props = defineProps({
    type: String,
    default: 'Delete',
  },
+  animationDirection: {
+    type: String,
+    default: 'horizontal',
+    validator: value => ['horizontal', 'vertical'].includes(value),
+  },
 });

 const emit = defineEmits(['bulkDelete']);
@@ -49,19 +54,41 @@ const bulkCheckboxState = computed({
    modelValue.value = newSelectedIds;
  },
 });
+
+const animationClasses = computed(() => {
+  if (props.animationDirection === 'vertical') {
+    return {
+      enterActive: 'transition-all duration-200 ease-out origin-bottom',
+      enterFrom: 'opacity-0 scale-95 translate-y-2',
+      enterTo: 'opacity-100 scale-100 translate-y-0',
+      leaveActive: 'transition-all duration-150 ease-in origin-bottom',
+      leaveFrom: 'opacity-100 scale-100 translate-y-0',
+      leaveTo: 'opacity-0 scale-95 translate-y-2',
+    };
+  }
+  return {
+    enterActive: 'transition-all duration-300 ease-out',
+    enterFrom: 'opacity-0 ltr:-translate-x-4 rtl:translate-x-4',
+    enterTo: 'opacity-100 translate-x-0',
+    leaveActive: 'transition-all duration-200 ease-in',
+    leaveFrom: 'opacity-100 translate-x-0',
+    leaveTo: 'opacity-0 ltr:-translate-x-4 rtl:translate-x-4',
+  };
+});
 </script>

 <template>
-  <transition
-    name="slide-fade"
-    enter-active-class="transition-all duration-300 ease-out"
-    enter-from-class="opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4"
-    enter-to-class="opacity-100 transform translate-x-0"
-    leave-active-class="hidden opacity-0"
+  <Transition
+    :enter-active-class="animationClasses.enterActive"
+    :enter-from-class="animationClasses.enterFrom"
+    :enter-to-class="animationClasses.enterTo"
+    :leave-active-class="animationClasses.leaveActive"
+    :leave-from-class="animationClasses.leaveFrom"
+    :leave-to-class="animationClasses.leaveTo"
  >
    <div
      v-if="hasSelected"
-      class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
+      class="flex items-center gap-3 py-2 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container -outline-offset-1 shadow-sm origin-bottom"
    >
      <div class="flex items-center gap-3">
        <div class="flex items-center gap-1.5 min-w-0">
@@ -98,5 +125,5 @@ const bulkCheckboxState = computed({
    <div v-else class="flex items-center gap-3">
      <slot name="default-actions" />
    </div>
-  </transition>
+  </Transition>
 </template>
@@ -1,17 +1,15 @@
 <script setup>
 import { computed } from 'vue';
-import { useToggle } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
-import { usePolicy } from 'dashboard/composables/usePolicy';
 import {
  isPdfDocument,
  formatDocumentLink,
 } from 'shared/helpers/documentHelper';

+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Policy from 'dashboard/components/policy.vue';

 const props = defineProps({
  id: {
@@ -37,88 +35,59 @@ const props = defineProps({
 });

 const emit = defineEmits(['action']);
-const { checkPermissions } = usePolicy();
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const menuItems = computed(() => {
-  const allOptions = [
-    {
-      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
-      value: 'viewRelatedQuestions',
-      action: 'viewRelatedQuestions',
-      icon: 'i-ph-tree-view-duotone',
-    },
-  ];
-
-  if (checkPermissions(['administrator'])) {
-    allOptions.push({
-      label: t('CAPTAIN.DOCUMENTS.OPTIONS.DELETE_DOCUMENT'),
-      value: 'delete',
-      action: 'delete',
-      icon: 'i-lucide-trash',
-    });
-  }
-
-  return allOptions;
-});

 const createdAt = computed(() => dynamicTime(props.createdAt));

 const displayLink = computed(() => formatDocumentLink(props.externalLink));
 const linkIcon = computed(() =>
-  isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
+  isPdfDocument(props.externalLink) ? 'i-lucide-file-text' : 'i-lucide-link'
 );

-const handleAction = ({ action, value }) => {
-  toggleDropdown(false);
+const handleAction = (action, value) => {
  emit('action', { action, value, id: props.id });
 };
 </script>

 <template>
-  <CardLayout>
+  <CardLayout class="[&>div]:px-5 [&>div]:gap-2">
    <div class="flex gap-1 justify-between w-full">
-      <span class="text-base text-n-slate-12 line-clamp-1">
+      <span class="text-heading-3 text-n-slate-12 line-clamp-1">
        {{ name }}
      </span>
      <div class="flex gap-2 items-center">
-        <div
-          v-on-clickaway="() => toggleDropdown(false)"
-          class="flex relative items-center group"
-        >
+        <Button
+          icon="i-woot-menu-list"
+          slate
+          sm
+          ghost
+          @click="handleAction('viewRelatedQuestions', 'viewRelatedQuestions')"
+        />
+        <div class="w-px h-3 bg-n-weak rounded-lg" />
+        <Policy :permissions="['administrator']">
          <Button
-            icon="i-lucide-ellipsis-vertical"
-            color="slate"
-            size="xs"
-            class="rounded-md group-hover:bg-n-alpha-2"
-            @click="toggleDropdown()"
+            icon="i-woot-bin"
+            slate
+            sm
+            ghost
+            @click="handleAction('delete', 'delete')"
          />
-          <DropdownMenu
-            v-if="showActionsDropdown"
-            :menu-items="menuItems"
-            class="top-full mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0"
-            @action="handleAction($event)"
-          />
-        </div>
+        </Policy>
      </div>
    </div>
    <div class="flex gap-4 justify-between items-center w-full">
      <span
        class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
      >
-        <i class="i-woot-captain" />
+        <Icon icon="i-woot-captain" />
        {{ assistant?.name || '' }}
      </span>
      <span
        class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
      >
-        <i :class="linkIcon" class="shrink-0" />
-        <span class="truncate">{{ displayLink }}</span>
+        <Icon :icon="linkIcon" class="shrink-0" />
+        <span class="truncate text-body-main">{{ displayLink }}</span>
      </span>
-      <div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
+      <div class="text-label-small shrink-0 text-n-slate-11 line-clamp-1">
        {{ createdAt }}
      </div>
    </div>
@@ -1,13 +1,12 @@
 <script setup>
 import { computed } from 'vue';
-import { useToggle } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';

 import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Policy from 'dashboard/components/policy.vue';
-import { INBOX_TYPES, getInboxIconByType } from 'dashboard/helper/inbox';
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+import ChannelName from 'dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';

 const props = defineProps({
  id: {
@@ -22,10 +21,6 @@ const props = defineProps({

 const emit = defineEmits(['action']);

-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
 const inboxName = computed(() => {
  const inbox = props.inbox;
  if (!inbox?.name) {
@@ -48,56 +43,44 @@ const inboxName = computed(() => {
  return inbox.name;
 });

-const menuItems = computed(() => [
-  {
-    label: t('CAPTAIN.INBOXES.OPTIONS.DISCONNECT'),
-    value: 'delete',
-    action: 'delete',
-    icon: 'i-lucide-trash',
-  },
-]);
-
-const icon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium, 'outline');
-});
-
-const handleAction = ({ action, value }) => {
-  toggleDropdown(false);
+const handleAction = (action, value) => {
  emit('action', { action, value, id: props.id });
 };
 </script>

 <template>
-  <CardLayout>
+  <CardLayout
+    class="ltr:[&>div]:pl-4 ltr:[&>div]:pr-3 rtl:[&>div]:pl-3 rtl:[&>div]:pr-4 [&>div]:gap-2 [&>div]:py-4"
+  >
    <div class="flex justify-between w-full gap-1">
-      <span
-        class="text-base text-n-slate-12 line-clamp-1 flex items-center gap-2"
-      >
-        <span :class="icon" />
-        {{ inboxName }}
-      </span>
-      <div class="flex items-center gap-2">
-        <Policy
-          v-on-clickaway="() => toggleDropdown(false)"
-          :permissions="['administrator']"
-          class="relative flex items-center group"
+      <div class="flex items-center gap-3 min-w-0">
+        <div
+          class="size-8 rounded-[0.625rem] flex items-center justify-center outline outline-1 outline-n-weak -outline-offset-1 flex-shrink-0"
        >
-          <Button
-            icon="i-lucide-ellipsis-vertical"
-            color="slate"
-            size="xs"
-            class="rounded-md group-hover:bg-n-alpha-2"
-            @click="toggleDropdown()"
+          <ChannelIcon
+            :inbox="inbox"
+            class="size-4 flex-shrink-0 text-n-slate-11"
          />
-          <DropdownMenu
-            v-if="showActionsDropdown"
-            :menu-items="menuItems"
-            class="mt-1 ltr:right-0 rtl:left-0 top-full"
-            @action="handleAction($event)"
-          />
-        </Policy>
+        </div>
+        <span class="text-heading-3 text-n-slate-12 line-clamp-1 min-w-0">
+          {{ inboxName }}
+        </span>
+        <div class="w-px h-3 bg-n-weak rounded-lg flex-shrink-0" />
+        <ChannelName
+          :channel-type="inbox.channel_type"
+          :medium="inbox.medium"
+          class="text-body-main text-n-slate-11 flex-shrink-0"
+        />
      </div>
+      <Policy :permissions="['administrator']">
+        <Button
+          icon="i-lucide-unlink"
+          slate
+          sm
+          ghost
+          @click="handleAction('delete', 'delete')"
+        />
+      </Policy>
    </div>
  </CardLayout>
 </template>
@@ -1,11 +1,7 @@
 <script setup>
 import { computed } from 'vue';
-import { useToggle } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';

-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Policy from 'dashboard/components/policy.vue';
@@ -36,10 +32,6 @@ const props = defineProps({
    type: Object,
    default: null,
  },
-  assistant: {
-    type: Object,
-    default: () => ({}),
-  },
  updatedAt: {
    type: Number,
    required: true,
@@ -52,10 +44,6 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
  showMenu: {
    type: Boolean,
    default: true,
@@ -66,53 +54,18 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
+const emit = defineEmits(['action', 'navigate', 'select']);

 const modelValue = computed({
  get: () => props.isSelected,
  set: () => emit('select', props.id),
 });

-const statusAction = computed(() => {
-  if (props.status === 'pending') {
-    return [
-      {
-        label: t('CAPTAIN.RESPONSES.OPTIONS.APPROVE'),
-        value: 'approve',
-        action: 'approve',
-        icon: 'i-lucide-circle-check-big',
-      },
-    ];
-  }
-  return [];
-});
-
-const menuItems = computed(() => [
-  ...statusAction.value,
-  {
-    label: t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE'),
-    value: 'edit',
-    action: 'edit',
-    icon: 'i-lucide-pencil-line',
-  },
-  {
-    label: t('CAPTAIN.RESPONSES.OPTIONS.DELETE_RESPONSE'),
-    value: 'delete',
-    action: 'delete',
-    icon: 'i-lucide-trash',
-  },
-]);
-
 const timestamp = computed(() =>
  dynamicTime(props.updatedAt || props.createdAt)
 );

-const handleAssistantAction = ({ action, value }) => {
-  toggleDropdown(false);
+const handleAssistantAction = (action, value) => {
  emit('action', { action, value, id: props.id });
 };

@@ -125,43 +78,103 @@ const handleDocumentableClick = () => {
 </script>

 <template>
-  <CardLayout
-    selectable
-    class="relative"
-    :class="{ 'rounded-md': compact }"
-    @mouseenter="emit('hover', true)"
-    @mouseleave="emit('hover', false)"
-  >
-    <div v-show="selectable" class="absolute top-7 ltr:left-3 rtl:right-3">
-      <Checkbox v-model="modelValue" />
-    </div>
-    <div class="flex relative justify-between w-full gap-1">
-      <span class="text-base text-n-slate-12 line-clamp-1">
-        {{ question }}
-      </span>
-      <div v-if="!compact && showMenu" class="flex items-center gap-2">
+  <div class="py-4 flex flex-col gap-2">
+    <div
+      v-if="!compact"
+      class="flex items-start gap-3 h-6"
+      :class="{ 'justify-between w-full': !showActions }"
+    >
+      <div class="inline-flex items-center gap-2 min-w-0">
+        <!-- <span
+          v-if="status === 'approved'"
+          class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
+        >
+          <Icon icon="i-woot-captain" class="size-3.5" />
+          {{ assistant?.name || '' }}
+        </span> -->
+        <div
+          v-if="documentable"
+          class="text-sm text-n-slate-11 grid grid-cols-[auto_1fr] items-center gap-1.5 min-w-0"
+        >
+          <Icon
+            v-if="documentable.type === 'Captain::Document'"
+            icon="i-lucide-files"
+            class="size-3.5 flex-shrink-0"
+          />
+          <Icon
+            v-else-if="documentable.type === 'User'"
+            icon="i-lucide-circle-user-round"
+            class="size-3.5 flex-shrink-0"
+          />
+          <Icon
+            v-else-if="documentable.type === 'Conversation'"
+            icon="i-lucide-message-circle"
+            class="size-3.5 flex-shrink-0"
+          />
+          <span
+            v-if="documentable.type === 'Captain::Document'"
+            class="truncate text-body-main text-n-slate-11"
+            :title="documentable.name"
+          >
+            {{ documentable.name }}
+          </span>
+          <span
+            v-else-if="documentable.type === 'User'"
+            class="truncate text-body-main text-n-slate-11"
+            :title="documentable.available_name"
+          >
+            {{ documentable.available_name }}
+          </span>
+          <span
+            v-else-if="documentable.type === 'Conversation'"
+            class="hover:underline truncate cursor-pointer text-body-main text-n-slate-11"
+            role="button"
+            @click="handleDocumentableClick"
+          >
+            {{ documentable.display_id }}
+          </span>
+        </div>
+        <div class="w-px h-3 rounded-lg bg-n-strong" />
+        <span class="shrink-0 text-body-main text-n-slate-11">
+          {{ timestamp }}
+        </span>
+      </div>
+      <div v-if="!compact && showMenu">
        <Policy
-          v-on-clickaway="() => toggleDropdown(false)"
          :permissions="['administrator']"
-          class="relative flex items-center group"
+          class="gap-2 flex items-center flex-shrink-0"
        >
          <Button
-            icon="i-lucide-ellipsis-vertical"
-            color="slate"
-            size="xs"
-            class="rounded-md group-hover:bg-n-alpha-2"
-            @click="toggleDropdown()"
+            icon="i-lucide-pencil-line"
+            slate
+            sm
+            outline
+            @click="handleAssistantAction('edit', 'edit')"
          />
-          <DropdownMenu
-            v-if="showActionsDropdown"
-            :menu-items="menuItems"
-            class="mt-1 ltr:right-0 rtl:right-0 top-full"
-            @action="handleAssistantAction($event)"
+          <Button
+            icon="i-lucide-trash"
+            slate
+            sm
+            outline
+            @click="handleAssistantAction('delete', 'delete')"
          />
        </Policy>
      </div>
    </div>
-    <span class="text-n-slate-11 text-sm line-clamp-5">
+    <div class="flex justify-between items-center w-full gap-1">
+      <div class="flex items-center gap-1.5">
+        <div v-if="!compact" class="size-5 flex items-center">
+          <Checkbox v-model="modelValue" />
+        </div>
+        <span class="text-n-slate-12 text-heading-3 line-clamp-1">
+          {{ question }}
+        </span>
+      </div>
+    </div>
+    <span
+      class="text-n-slate-11 text-body-main line-clamp-5"
+      :class="{ 'ltr:pl-[1.625rem] rtl:pr-[1.625rem]': !compact }"
+    >
      {{ answer }}
    </span>
    <div
@@ -177,9 +190,7 @@ const handleDocumentableClick = () => {
            sm
            link
            class="hover:!no-underline"
-            @click="
-              handleAssistantAction({ action: 'approve', value: 'approve' })
-            "
+            @click="handleAssistantAction('approve', 'approve')"
          />
          <Button
            :label="$t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE')"
@@ -188,12 +199,7 @@ const handleDocumentableClick = () => {
            slate
            link
            class="hover:!no-underline"
-            @click="
-              handleAssistantAction({
-                action: 'edit',
-                value: 'edit',
-              })
-            "
+            @click="handleAssistantAction('edit', 'edit')"
          />
          <Button
            :label="$t('CAPTAIN.RESPONSES.OPTIONS.DELETE_RESPONSE')"
@@ -202,78 +208,10 @@ const handleDocumentableClick = () => {
            ruby
            link
            class="hover:!no-underline"
-            @click="
-              handleAssistantAction({ action: 'delete', value: 'delete' })
-            "
+            @click="handleAssistantAction('delete', 'delete')"
          />
        </div>
      </Policy>
-      <div
-        class="flex items-center gap-3"
-        :class="{ 'justify-between w-full': !showActions }"
-      >
-        <div class="inline-flex items-center gap-3 min-w-0">
-          <span
-            v-if="status === 'approved'"
-            class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
-          >
-            <Icon icon="i-woot-captain" class="size-3.5" />
-            {{ assistant?.name || '' }}
-          </span>
-          <div
-            v-if="documentable"
-            class="text-sm text-n-slate-11 grid grid-cols-[auto_1fr] items-center gap-1 min-w-0"
-          >
-            <Icon
-              v-if="documentable.type === 'Captain::Document'"
-              icon="i-ph-files-light"
-              class="size-3.5"
-            />
-            <Icon
-              v-else-if="documentable.type === 'User'"
-              icon="i-ph-user-circle-plus"
-              class="size-3.5"
-            />
-            <Icon
-              v-else-if="documentable.type === 'Conversation'"
-              icon="i-ph-chat-circle-dots"
-              class="size-3.5"
-            />
-            <span
-              v-if="documentable.type === 'Captain::Document'"
-              class="truncate"
-              :title="documentable.name"
-            >
-              {{ documentable.name }}
-            </span>
-            <span
-              v-else-if="documentable.type === 'User'"
-              class="truncate"
-              :title="documentable.available_name"
-            >
-              {{ documentable.available_name }}
-            </span>
-            <span
-              v-else-if="documentable.type === 'Conversation'"
-              class="hover:underline truncate cursor-pointer"
-              role="button"
-              @click="handleDocumentableClick"
-            >
-              {{
-                t(`CAPTAIN.RESPONSES.DOCUMENTABLE.CONVERSATION`, {
-                  id: documentable.display_id,
-                })
-              }}
-            </span>
-          </div>
-        </div>
-        <div
-          class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1"
-        >
-          <Icon icon="i-ph-calendar-dot" class="size-3.5" />
-          {{ timestamp }}
-        </div>
-      </div>
    </div>
-  </CardLayout>
+  </div>
 </template>
@@ -27,7 +27,7 @@ const openBilling = () => {

 <template>
  <div
-    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-5xl mx-auto h-full max-h-[448px] grid place-content-center"
  >
    <BasePaywallModal
      class="mx-auto"
@@ -51,7 +51,7 @@ defineExpose({ dialogRef });
    >
      <Spinner />
    </div>
-    <div v-else class="flex flex-col gap-3 min-h-48">
+    <div v-else class="flex flex-col divide-y divide-n-weak min-h-48">
      <ResponseCard
        v-for="response in responses"
        :id="response.id"
@@ -60,7 +60,7 @@ const onClearFilters = () => {
    :show-backdrop="isApproved"
  >
    <template v-if="isApproved" #empty-state-item>
-      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+      <div class="grid grid-cols-1 divide-y divide-n-weak p-px overflow-hidden">
        <ResponseCard
          v-for="(response, index) in responsesList.slice(0, 5)"
          :id="response.id"
@@ -68,6 +68,7 @@ const onClearFilters = () => {
          :question="replaceInstallationName(response.question)"
          :answer="replaceInstallationName(response.answer)"
          :status="response.status"
+          :documentable="response.documentable"
          :assistant="response.assistant"
          :created-at="response.created_at"
          :updated-at="response.created_at"
@@ -141,6 +141,11 @@ export const responsesList = [
    id: 87,
    question: 'Why is my Messenger in Chatwoot deactivated?',
    status: 'pending',
+    documentable: {
+      id: 1,
+      type: 'Captain::Document',
+      name: 'Document 1',
+    },
    assistant: {
      account_id: 1,
      config: { product_name: 'Chatwoot' },
@@ -157,6 +162,11 @@ export const responsesList = [
    created_at: 1736283340,
    id: 88,
    question: 'How do I integrate WhatsApp with Chatwoot?',
+    documentable: {
+      id: 1,
+      type: 'User',
+      available_name: 'John Doe',
+    },
    assistant: {
      account_id: 2,
      config: { product_name: 'Chatwoot' },
@@ -173,6 +183,11 @@ export const responsesList = [
    created_at: 1736283350,
    id: 89,
    question: 'How can I reset my password in Chatwoot?',
+    documentable: {
+      id: 1,
+      type: 'Conversation',
+      display_id: '12345',
+    },
    assistant: {
      account_id: 3,
      config: { product_name: 'Chatwoot' },
@@ -189,6 +204,11 @@ export const responsesList = [
    created_at: 1736283360,
    id: 90,
    question: 'How do I enable dark mode in Chatwoot?',
+    documentable: {
+      id: 1,
+      type: 'Captain::Document',
+      name: 'Document 1',
+    },
    assistant: {
      account_id: 4,
      config: { product_name: 'Chatwoot' },
@@ -205,6 +225,11 @@ export const responsesList = [
    created_at: 1736283370,
    id: 91,
    question: 'How do I add a new team member in Chatwoot?',
+    documentable: {
+      id: 1,
+      type: 'User',
+      available_name: 'John Doe',
+    },
    assistant: {
      account_id: 5,
      config: { product_name: 'Chatwoot' },
@@ -221,6 +246,11 @@ export const responsesList = [
    created_at: 1736283380,
    id: 92,
    question: 'What are campaigns in Chatwoot?',
+    documentable: {
+      id: 1,
+      type: 'User',
+      available_name: 'John Doe',
+    },
    assistant: {
      account_id: 6,
      config: { product_name: 'Chatwoot' },
@@ -34,7 +34,7 @@ const handleImgClick = () => {
 <template>
  <div
    data-testid="changelog-card"
-    class="flex flex-col justify-between p-3 w-full rounded-lg border shadow-sm transition-all duration-200 border-n-weak bg-n-background text-n-slate-12"
+    class="flex flex-col justify-between p-3 w-full rounded-lg border shadow-sm transition-all duration-200 border-n-weak bg-n-surface-2 text-n-slate-12"
    :class="{
      'animate-fade-out pointer-events-none': isDismissing,
      'hover:shadow': isActive,
@@ -24,20 +24,20 @@ const handleChange = event => {
 </script>

 <template>
-  <div class="relative w-4 h-4">
+  <div class="relative w-3.5 h-3.5">
    <input
      :checked="modelValue"
      :indeterminate="indeterminate"
      type="checkbox"
      :disabled="disabled"
-      class="peer absolute inset-0 z-10 h-4 w-4 disabled:opacity-50 appearance-none rounded border border-n-slate-6 ring-transparent transition-all duration-200 checked:border-n-brand checked:bg-n-brand dark:border-gray-600 dark:checked:border-n-brand indeterminate:border-n-brand indeterminate:bg-n-brand hover:enabled:bg-n-blue-border cursor-pointer"
+      class="peer absolute inset-0 z-10 h-3.5 w-3.5 disabled:opacity-50 appearance-none rounded border border-n-slate-6 bg-n-slate-2 ring-transparent transition-all duration-100 checked:border-n-brand checked:bg-n-brand dark:border-gray-600 dark:bg-n-slate-2 dark:checked:border-n-brand indeterminate:border-n-brand indeterminate:bg-n-brand hover:enabled:bg-n-blue-border cursor-pointer"
      @change="handleChange"
    />
    <!-- Checkmark SVG -->
    <svg
      viewBox="0 0 14 14"
      fill="none"
-      class="pointer-events-none absolute w-3.5 h-3.5 z-20 stroke-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+      class="pointer-events-none absolute w-2.5 h-2.5 z-20 stroke-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
    >
      <path
        d="M3 8L6 11L11 3.5"
@@ -50,7 +50,7 @@ const handleChange = event => {
    <svg
      viewBox="0 0 14 14"
      fill="none"
-      class="pointer-events-none absolute w-3.5 h-3.5 z-20 stroke-white opacity-0 peer-indeterminate:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+      class="pointer-events-none absolute w-2.5 h-2.5 z-20 stroke-white opacity-0 peer-indeterminate:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
    >
      <path
        d="M3 7L11 7"
@@ -52,16 +52,16 @@ const toggleSidebar = () => {
 <template>
  <div
    v-if="showCopilotLauncher"
-    class="fixed bottom-4 ltr:right-4 rtl:left-4 z-50"
+    class="fixed bottom-16 md:bottom-[4.5rem] ltr:right-0 rtl:left-0 md:ltr:right-[0.813rem] md:rtl:left-[0.813rem] z-50"
  >
    <ButtonGroup
-      class="rounded-full bg-n-alpha-2 backdrop-blur-lg p-1 shadow hover:shadow-md"
+      class="ltr:rounded-l-full ltr:rounded-r-none rtl:rounded-r-full rtl:rounded-l-none bg-n-alpha-2 backdrop-blur-lg p-1 shadow hover:shadow-md"
    >
      <Button
        icon="i-woot-captain"
        no-animation
        class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl transition-all duration-200 ease-out hover:brightness-110"
-        lg
+        md
        @click="toggleSidebar"
      />
    </ButtonGroup>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
iamsivin	48ae6e5381	chore: Update display property design	2026-01-22 18:18:11 +05:30
iamsivin	077ce63c8f	chore: Conflict clean up	2026-01-22 16:31:10 +05:30
iamsivin	968a280b21	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-22 16:15:19 +05:30
iamsivin	6ce3423205	chore: Update contacts page	2026-01-22 09:35:58 +05:30
Sivin VargheseandGitHub	7455838206	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-21 11:21:25 +05:30
Sivin VargheseandGitHub	5c48ebd476	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-20 07:40:30 +05:30
Sivin VargheseandGitHub	0225a195d4	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-16 14:50:34 +05:30
iamsivin	ed590a0684	chore: Update feedback fixes	2026-01-16 01:21:51 +05:30
Sivin VargheseandGitHub	8e5e5692fd	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-15 13:42:00 +05:30
Sivin VargheseandGitHub	ea592481d1	feat: Update settings pages UI (#13191 )	2026-01-15 12:30:53 +05:30
Sivin VargheseandGitHub	f6b2bc170e	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-14 15:36:50 +05:30
Sivin VargheseandGitHub	c29c045a2b	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-14 14:34:07 +05:30
Sivin VargheseandGitHub	271e2742ec	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-12 20:22:45 +05:30
Sivin VargheseandGitHub	db13dd9ba8	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-12 12:25:24 +05:30
Sivin VargheseandGitHub	fe951d9d92	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-12 10:13:31 +05:30
Sivin VargheseandGitHub	81b54c5e4e	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-09 23:56:29 +05:30
Sivin VargheseandGitHub	4deb999b45	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-09 12:25:39 +05:30
Sivin VargheseandGitHub	1e0dfbf7d9	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-08 20:12:51 +05:30
iamsivin	79cb13c4ac	chore: Minor fix	2026-01-08 18:09:00 +05:30
Sivin VargheseandGitHub	ffb0598547	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-08 15:30:07 +05:30
iamsivin	3a65481e19	fix: Rebase issue	2026-01-07 16:01:56 +05:30
Sivin VargheseandGitHub	3f29bf78e2	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-07 15:58:29 +05:30
iamsivin	e42f2deab5	chore: Update typography in contacts page	2026-01-07 13:31:21 +05:30
iamsivin	3813a25eae	fix: Button shadow issue	2026-01-07 12:02:21 +05:30
iamsivin	017bf17e06	chore: Update typography in Help Center	2026-01-07 11:48:35 +05:30
Sivin VargheseandGitHub	d1fb816243	feat: Update locales page UI (#13053 )	2026-01-07 10:59:00 +05:30
Sivin VargheseandGitHub	dd426d69eb	feat: Update categories page UI (#13052 )	2026-01-07 10:57:46 +05:30
Sivin VargheseandGitHub	b7be546934	feat: Update articles page UI (#13049 )	2026-01-07 10:54:24 +05:30
Sivin VargheseandGitHub	d6d7aba465	feat: Update Captain pages UI (#13184 )	2026-01-07 00:44:07 +05:30
Sivin VargheseandGitHub	68fc2e36aa	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-06 21:00:40 +05:30
Sivin VargheseandGitHub	2387ebf443	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-06 13:23:01 +05:30
iamsivin	d5ba0a946b	chore: Update slate button icon color	2026-01-05 11:01:40 +05:30
Sivin VargheseandGitHub	15584c0bb4	Merge branch 'develop' into feat/v5-ui-redesign	2026-01-05 10:30:55 +05:30
Sivin VargheseandGitHub	d3ed788abb	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-22 21:50:09 +05:30
iamsivin	dcd41cdae0	chore: Feedback fixes	2025-12-22 17:22:42 +05:30
iamsivin	8191d65033	chore: Update messages section	2025-12-22 15:51:46 +05:30
Sivin VargheseandGitHub	c54c125f3b	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-20 09:04:17 +05:30
Sivin VargheseandGitHub	3bdfeff5f2	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-19 09:58:52 +05:30
Sivin VargheseandGitHub	e8b57bdeec	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-18 07:08:19 +05:30
iamsivin	08d3fb5b12	chore: Fix spec	2025-12-17 23:17:53 +05:30
iamsivin	6deceb651c	chore: Fix Tiktok icon	2025-12-17 23:14:24 +05:30
Sivin VargheseandGitHub	ceb0b773a4	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-17 22:54:42 +05:30
iamsivin	67766faa07	chore: Update typography in sidebar, chatlist, conversation card	2025-12-17 22:43:38 +05:30
Sivin VargheseandGitHub	657a89992a	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-17 12:18:35 +05:30
iamsivin	fe37bbaad7	chore: Minor fix	2025-12-16 20:46:22 +05:30
Sivin VargheseandGitHub	169ef09606	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-16 14:47:46 +05:30
Sivin VargheseandGitHub	f2ebccb89d	feat: Add typography utility classes (#13075 )	2025-12-16 12:33:19 +05:30
Sivin VargheseandGitHub	e98257b5a1	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-16 10:06:51 +05:30
Sivin VargheseandGitHub	abb2963882	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-15 17:28:39 +05:30
Sivin VargheseandGitHub	9ede713f66	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-11 20:32:39 +05:30
Sivin VargheseandGitHub	9b2b52bff8	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-11 12:25:53 +05:30
Sivin VargheseandGitHub	417f28ce4a	feat: Update contact details page UI (#13041 )	2025-12-10 20:14:24 +05:30
Sivin VargheseandGitHub	8d191a70b1	feat: Update contact list page (#13020 )	2025-12-10 19:47:20 +05:30
iamsivin	ee82a63b35	chore: Update button radius	2025-12-10 16:31:44 +05:30
Sivin VargheseandGitHub	446e164f2d	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-10 15:48:49 +05:30
iamsivin	0c1e7e1cd3	chore: Minor fix	2025-12-10 15:48:35 +05:30
iamsivin	3508228967	chore: Minor fix	2025-12-10 15:45:25 +05:30
Sivin VargheseandGitHub	b1a782a8f3	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-09 19:56:49 +05:30
iamsivin	e88db02ba2	chore: Update surface dark mode colors	2025-12-09 19:56:22 +05:30
Sivin VargheseandGitHub	99d9c8c41d	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-09 10:14:17 +05:30
Sivin VargheseandGitHub	9fe937094a	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-09 00:25:10 +05:30
Sivin VargheseandGitHub	998fed4a35	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-08 21:27:44 +05:30
iamsivin	bd036c1889	chore: Update conversation header when side panel is open	2025-12-04 14:56:26 +05:30
Sivin VargheseandGitHub	c1534e788d	feat: Update conversation filter UI (#13000 )	2025-12-04 13:57:34 +05:30
Sivin VargheseandGitHub	f5608bc28b	feat: Update dashboard empty state UI (#12990 )	2025-12-04 13:56:45 +05:30
Sivin VargheseandGitHub	b92b533afb	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-04 13:56:20 +05:30
Sivin VargheseandGitHub	604d4a9c30	feat: Update conversation side panel layout and styling (#12983 )	2025-12-04 13:55:07 +05:30
Sivin VargheseandGitHub	832d61c004	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-04 10:39:39 +05:30
Sivin VargheseandGitHub	3308616223	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-03 15:48:19 +05:30
Sivin VargheseandGitHub	8ad1bf3d2b	feat: Update conversation messages screen UI (#12975 )	2025-12-03 15:48:04 +05:30
Sivin VargheseandGitHub	99f17891d0	feat: Updated conversation list UI (#12971 )	2025-12-03 15:46:16 +05:30
Sivin VargheseandGitHub	eccf3dd8f6	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-01 15:02:29 +05:30
Sivin VargheseandGitHub	4cf5975ab8	Merge branch 'develop' into feat/v5-ui-redesign	2025-12-01 10:24:41 +05:30
Sivin VargheseandGitHub	f6852c33cb	feat: Redesign conversation card component UI (#12957 )	2025-12-01 10:18:14 +05:30
Sivin VargheseandGitHub	a0edf2e6e3	chore: Update sidebar and app layout UI (#12933 )	2025-11-28 18:39:51 +05:30
Sivin VargheseandGitHub	8cc6bde24f	Merge branch 'develop' into feat/v5-ui-redesign	2025-11-28 16:46:15 +05:30
Sivin VargheseandGitHub	4c724a4887	Merge branch 'develop' into feat/v5-ui-redesign	2025-11-28 15:36:07 +05:30
Sivin VargheseandGitHub	556a49a25a	Merge branch 'develop' into feat/v5-ui-redesign	2025-11-27 11:04:10 +05:30
Sivin VargheseandGitHub	727ffea9f7	Merge branch 'develop' into feat/v5-ui-redesign	2025-11-26 17:21:48 +05:30
Sivin VargheseandGitHub	08794c69ee	Merge branch 'develop' into feat/v5-ui-redesign	2025-11-26 10:11:34 +05:30
Sivin VargheseandGitHub	0829fbccd1	Merge branch 'develop' into feat/v5-ui-redesign	2025-11-25 09:03:35 +05:30
Sivin VargheseandGitHub	c94d76191b	chore: Update theme colors and add new Inter variable fonts (#12932 )	2025-11-24 20:57:34 +05:30