♻️(frontend) change favorite to star

Change the favorite to star, it will be part of the grid list as the others, we can select them directly from a filter in the url.
2026-09-12 20:57:56 +02:00 · 2026-08-26 10:32:02 +02:00
parent 1af34c6e70
commit e6bc586df7
34 changed files with 454 additions and 595 deletions
@@ -11,6 +11,7 @@ and this project adheres to
 - ♿️(frontend) use anchor links for interlinking sub-documents #2391
 - ✨(frontend) reset side panel state between documents #2583
 - ♿️(frontend) announce search loading state for screen readers #2526
+- ♻️(frontend) change favorite to star #2539

 ### Fixed

@@ -28,7 +28,7 @@ const saveStorageState = async (
     * If the grid is displayed, it means the user is logged in and the storage state can be saved.
     */
    await expect(
-      page.getByRole('heading', { name: 'All docs', level: 2 }),
+      page.getByRole('heading', { name: 'Recent', level: 2 }),
    ).toBeVisible({ timeout: 10000 });

    await page.context().storageState({
@@ -112,29 +112,35 @@ test.describe('Document grid item options', () => {
    ).toBeVisible();
  });

-  test('it pins a document', async ({ page, browserName }) => {
+  test('it stars a document', async ({ page, browserName }) => {
    const [docTitle] = await createDoc(page, `Favorite doc`, browserName);
+    const [docTitle2] = await createDoc(page, `Not Favorite doc`, browserName);

-    await page.goto('/');
+    await page.getByRole('button', { name: 'Back to homepage' }).click();

    const row = await getGridRow(page, docTitle);

-    // Pin
+    // Star
    await row.getByRole('button', { name: /Open the menu of actions/ }).click();
-    await page.getByRole('menuitem', { name: 'Pin' }).click();
+    await page.getByRole('menuitem', { name: 'Star' }).click();

-    // Check is pinned
-    await expect(row.getByTestId('doc-pinned-icon')).toBeVisible();
-    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
-    await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible();
+    // Check is starred
+    await expect(row.getByText(/This document is starred/)).toBeVisible();
+    await expect(page.getByText(docTitle2)).toBeVisible();

-    // Unpin
+    await page.getByRole('link', { name: 'Starred', exact: true }).click();
+    await expect(row.getByText(/This document is starred/)).toBeVisible();
+    await expect(page.getByText(docTitle2)).toBeHidden();
+
+    // Unstar
    await row.getByRole('button', { name: /Open the menu of actions/ }).click();
-    await page.getByText('Unpin').click();
+    await page.getByText('Unstar').click();
+    await expect(row).toBeHidden();

-    // Check is unpinned
-    await expect(row.getByTestId('doc-pinned-icon')).toBeHidden();
-    await expect(leftPanelFavorites.getByText(docTitle)).toBeHidden();
+    // Check is unstarred
+    await page.getByRole('link', { name: 'Recent', exact: true }).click();
+    await expect(row).toBeVisible();
+    await expect(row.getByText(/This document is starred/)).toBeHidden();
  });

  test('it deletes the document', async ({ page, browserName }) => {
@@ -148,13 +154,6 @@ test.describe('Document grid item options', () => {
    const row = await getGridRow(page, docTitle);

    await row.getByRole('button', { name: /Open the menu of actions/ }).click();
-    await page.getByRole('menuitem', { name: 'Pin' }).click();
-
-    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
-    await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible();
-
-    await row.getByRole('button', { name: /Open the menu of actions/ }).click();
-
    await page.getByRole('menuitem', { name: 'Delete' }).click();

    await expect(
@@ -174,7 +173,6 @@ test.describe('Document grid item options', () => {
    await expect(
      page.getByLabel('Documents grid').getByText(docTitle),
    ).toBeHidden();
-    await expect(leftPanelFavorites.getByText(docTitle)).toBeHidden();
  });

  test('it checks the leave feature', async ({ page, browserName }) => {
@@ -520,46 +520,22 @@ test.describe('Doc Header', () => {
    expect(clipboardContent.trim()).toMatch(url);
  });

-  test('it pins a document', async ({ page, browserName }) => {
-    const [docTitle] = await createDoc(page, `Pin doc`, browserName);
+  test('it stars a document', async ({ page, browserName }) => {
+    await createDoc(page, `Star doc`, browserName);

+    // Star
    await page
      .getByRole('button', { name: 'Open the document options' })
      .click();
+    await page.getByRole('menuitem', { name: 'Star' }).click();
+    await expect(page.getByText('This document is starred')).toBeVisible();

-    // Pin
-    await page.getByRole('menuitem', { name: 'Pin' }).click();
+    // UnStar
    await page
      .getByRole('button', { name: 'Open the document options' })
      .click();
-    await expect(page.getByText('Unpin')).toBeVisible();
-
-    await page.goto('/');
-
-    const row = await getGridRow(page, docTitle);
-
-    // Check is pinned
-    await expect(row.getByTestId('doc-pinned-icon')).toBeVisible();
-    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
-    await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible();
-
-    await row.getByText(docTitle).click();
-    await page
-      .getByRole('button', { name: 'Open the document options' })
-      .click();
-
-    // Unpin
-    await page.getByRole('menuitem', { name: 'Unpin' }).click();
-    await page
-      .getByRole('button', { name: 'Open the document options' })
-      .click();
-    await expect(page.getByRole('menuitem', { name: 'Pin' })).toBeVisible();
-
-    await page.goto('/');
-
-    // Check is unpinned
-    await expect(row.getByTestId('doc-pinned-icon')).toBeHidden();
-    await expect(leftPanelFavorites.getByText(docTitle)).toBeHidden();
+    await page.getByRole('menuitem', { name: 'Unstar' }).click();
+    await expect(page.getByText('This document is starred')).toBeHidden();
  });

  test('it duplicates a document', async ({ page, browserName }) => {
@@ -32,24 +32,27 @@ test.describe('Doc Trashbin', () => {

    await page.getByRole('button', { name: 'Back to homepage' }).click();

+    // Delete the first document - Is not displayed
    const row1 = await getGridRow(page, title1);
    await clickInGridMenu(page, row1, 'Delete');
    await page.getByRole('button', { name: 'Delete document' }).click();
    await expect(row1.getByText(title1)).toBeHidden();

+    // Star the second document - Is displayed in the starred list
    const row2 = await getGridRow(page, title2);
-    await clickInGridMenu(page, row2, 'Pin');
-    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
-    await expect(leftPanelFavorites.getByText(title2)).toBeVisible();
+    await clickInGridMenu(page, row2, 'Star');
+    await page.getByRole('link', { name: 'Starred', exact: true }).click();
+    await expect(row2.getByText(title2)).toBeVisible();

+    // Delete the second document - It is not displayed in the starred list anymore
    await clickInGridMenu(page, row2, 'Delete');
    await page.getByRole('button', { name: 'Delete document' }).click();
    await expect(row2.getByText(title2)).toBeHidden();
-    await expect(leftPanelFavorites.getByText(title2)).toBeHidden();

+    // It is displayed in the trashbin list
    await page.getByRole('link', { name: 'Trashbin' }).click();
-
    const docsGrid = page.getByTestId('docs-grid');
+    await expect(row2.getByText(title2)).toBeVisible();
    await expect(docsGrid.getByText('Days remaining')).toBeVisible();

    try {
@@ -86,8 +89,13 @@ test.describe('Doc Trashbin', () => {
    await clickInGridMenu(page, row2, 'Restore');

    await expect(row2.getByText(title2)).toBeHidden();
-    await expect(leftPanelFavorites.getByText(title2)).toBeVisible();
-    await page.getByRole('link', { name: 'All docs' }).click();
+
+    // It is displayed in the starred list again
+    await page.getByRole('link', { name: 'Starred', exact: true }).click();
+    await expect(row2.getByText(title2)).toBeVisible();
+
+    // It is displayed in the recent list again
+    await page.getByRole('link', { name: 'Recent' }).click();
    const row2Restored = await getGridRow(page, title2);
    await expect(row2Restored.getByText(title2)).toBeVisible();
    await row2Restored.getByRole('link', { name: /Open document/ }).click();
@@ -115,7 +123,6 @@ test.describe('Doc Trashbin', () => {
      browserName,
      1,
    );
-    await verifyDocName(page, topParent);
    const { name: subDocName } = await createRootSubPage(
      page,
      browserName,
@@ -132,12 +139,13 @@ test.describe('Doc Trashbin', () => {

    await navigateToPageFromTree({ page, title: subDocName });
    await verifyDocName(page, subDocName);
+    const docsGrid = page.getByTestId('docs-grid');

-    await clickInEditorMenu(page, 'Pin');
+    await clickInEditorMenu(page, 'Star');
    await page.getByRole('button', { name: 'Back to homepage' }).click();
-    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
-    await expect(leftPanelFavorites.getByText(subDocName)).toBeVisible();
-    await leftPanelFavorites.getByText(subDocName).click();
+    await page.getByRole('link', { name: 'Starred', exact: true }).click();
+    await expect(docsGrid.getByText(subDocName)).toBeVisible();
+    await page.getByText(subDocName).click();
    await verifyDocName(page, subDocName);

    await clickInEditorMenu(page, 'Delete');
@@ -145,7 +153,7 @@ test.describe('Doc Trashbin', () => {
    await verifyDocName(page, topParent);

    await page.getByRole('button', { name: 'Back to homepage' }).click();
-    await expect(leftPanelFavorites.getByText(subDocName)).toBeHidden();
+    await expect(docsGrid.getByText(subDocName)).toBeHidden();
    await page.getByRole('link', { name: 'Trashbin' }).click();

    let row;
@@ -194,6 +202,7 @@ test.describe('Doc Trashbin', () => {
    await expect(page.getByRole('button', { name: 'Share' })).toBeEnabled();
    await expect(docTree.getByText(topParent)).toBeVisible();
    await page.getByRole('button', { name: 'Back to homepage' }).click();
-    await expect(leftPanelFavorites.getByText(subDocName)).toBeVisible();
+    await page.getByRole('link', { name: 'Starred', exact: true }).click();
+    await expect(docsGrid.getByText(subDocName)).toBeVisible();
  });
 });
@@ -19,7 +19,7 @@ test.describe('Header', () => {
    // Clicking moves focus to the page heading
    await skipLink.click();
    const pageHeading = page.getByRole('heading', {
-      name: 'All docs',
+      name: 'Recent',
      level: 2,
    });
    await expect(pageHeading).toBeFocused();
@@ -285,7 +285,7 @@ test.describe('Left panel responsive', () => {
    await page.setViewportSize({ width: 900, height: 1200 });
    await page.goto('/');

-    await expect(page.getByRole('link', { name: 'All docs' })).toBeInViewport();
+    await expect(page.getByRole('link', { name: 'Recent' })).toBeInViewport();
    await expect(newDocButton).toBeInViewport();
    await expect(userMenu).toBeInViewport();
    await expect(header.getByLabel('Toggle left panel')).toBeVisible();
@@ -1,20 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M6.12757 9.8486C5.98657 9.6993 5.91709 9.5143 5.91709 9.30858C5.91709 9.10284 5.98679 8.91775 6.13233 8.77221C6.28262 8.62192 6.47291 8.54842 6.68579 8.54842H13.1697C13.3775 8.54842 13.5623 8.62245 13.7061 8.77215C13.8559 8.91601 13.9299 9.10081 13.9299 9.30858C13.9299 9.51737 13.8553 9.70306 13.7085 9.8511C13.5643 10.0024 13.3787 10.0773 13.1697 10.0773H6.68579C6.47291 10.0773 6.28262 10.0038 6.13233 9.85349L6.13076 9.85192L6.12757 9.8486Z"
-    fill="currentColor"
-  />
-  <path
-    d="M6.12757 12.83C5.98657 12.6807 5.91709 12.4957 5.91709 12.29C5.91709 12.0843 5.98679 11.8992 6.13233 11.7536C6.28262 11.6033 6.47291 11.5298 6.68579 11.5298H13.1697C13.3775 11.5298 13.5623 11.6039 13.7061 11.7536C13.8559 11.8974 13.9299 12.0822 13.9299 12.29C13.9299 12.4988 13.8553 12.6845 13.7085 12.8325C13.5643 12.9838 13.3787 13.0587 13.1697 13.0587H6.68579C6.47291 13.0587 6.28262 12.9852 6.13233 12.8349L6.13076 12.8333L6.12757 12.83Z"
-    fill="currentColor"
-  />
-  <path
-    d="M5.91709 15.2885C5.91709 15.4912 5.98839 15.6726 6.12757 15.82L6.134 15.8266L6.13723 15.8296C6.28833 15.9723 6.47704 16.0401 6.68579 16.0401H9.75263C9.96123 16.0401 10.1502 15.9722 10.2975 15.8249C10.444 15.6784 10.5213 15.4956 10.5213 15.2885C10.5213 15.0768 10.4486 14.8874 10.2999 14.7374C10.1539 14.5842 9.96433 14.5113 9.75263 14.5113H6.68579C6.47293 14.5113 6.28257 14.5847 6.13226 14.735L6.12757 14.7399C5.98486 14.891 5.91709 15.0797 5.91709 15.2885Z"
-    fill="currentColor"
-  />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M7.37975 1.24597C7.88425 0.735004 8.61944 0.5 9.54031 0.5H18.6127C19.533 0.5 20.2661 0.734736 20.7653 1.24652C21.2686 1.75666 21.5 2.49628 21.5 3.42147V16.3808C21.5 17.3112 21.2688 18.0521 20.7638 18.5572C20.2645 19.0624 19.532 19.2937 18.6127 19.2937H17.347V20.5338C17.347 21.4641 17.1158 22.2051 16.6108 22.7102C16.1115 23.2153 15.3789 23.4467 14.4597 23.4467H5.3873C4.46721 23.4467 3.73242 23.2149 3.22781 22.7103C2.72908 22.2051 2.5 21.4635 2.5 20.5338V7.57442C2.5 6.64962 2.72942 5.90915 3.22673 5.39893C3.73123 4.88796 4.46643 4.65295 5.3873 4.65295H6.65302V3.42147C6.65302 2.49666 6.88244 1.7562 7.37975 1.24597ZM8.42319 4.65295H14.4597C15.38 4.65295 16.1131 4.88769 16.6122 5.39947C17.1156 5.90962 17.347 6.64923 17.347 7.57442V17.5236H18.5444C18.9636 17.5236 19.2496 17.4163 19.4324 17.2289L19.4337 17.2275C19.6238 17.0374 19.7298 16.7549 19.7298 16.3552V3.4471C19.7298 3.04734 19.6238 2.76485 19.4337 2.57481L19.431 2.57206C19.248 2.37972 18.9625 2.27017 18.5444 2.27017H9.60866C9.19081 2.27017 8.90126 2.37956 8.71212 2.57341C8.52701 2.76329 8.42319 3.04633 8.42319 3.4471V4.65295ZM5.45564 21.6765C5.03728 21.6765 4.74743 21.5697 4.55844 21.3811C4.37372 21.1913 4.27017 20.9084 4.27017 20.5081V7.60005C4.27017 7.19928 4.37399 6.91625 4.55911 6.72636C4.74825 6.53252 5.03779 6.42313 5.45564 6.42313H14.3913C14.8095 6.42313 15.095 6.53268 15.278 6.72501L15.2807 6.72776C15.4708 6.9178 15.5768 7.20029 15.5768 7.60005V20.5081C15.5768 20.9079 15.4708 21.1904 15.2807 21.3804L15.2793 21.3818C15.0966 21.5693 14.8105 21.6765 14.3913 21.6765H5.45564Z"
-    fill="currentColor"
-  />
-</svg>
@@ -1,12 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
-  <path
-    fill="currentColor"
-    d="M8 3.333c.368 0 .666.299.666.667v3.333h2a.667.667 0 1 1 0 1.334H7.999A.667.667 0 0 1 7.333 8V4c0-.368.298-.667.666-.667Z"
-  />
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M8 .667a7.333 7.333 0 1 1 0 14.666A7.333 7.333 0 0 1 8 .667ZM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z"
-    clip-rule="evenodd"
-  />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <g clip-path="url(#clip0_16070_5833)">
+    <path
+      d="M8.00033 3.33329C8.36852 3.33329 8.66699 3.63177 8.66699 3.99996V7.33329H10.667C11.0352 7.33329 11.3337 7.63177 11.3337 7.99996C11.3337 8.36815 11.0352 8.66663 10.667 8.66663H8.00033C7.63214 8.66663 7.33366 8.36815 7.33366 7.99996V3.99996C7.33366 3.63177 7.63214 3.33329 8.00033 3.33329Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.00033 0.666626C12.0504 0.666626 15.3337 3.94987 15.3337 7.99996C15.3337 12.05 12.0504 15.3333 8.00033 15.3333C3.95024 15.3333 0.666992 12.05 0.666992 7.99996C0.666992 3.94987 3.95024 0.666626 8.00033 0.666626ZM8.00033 1.99996C4.68662 1.99996 2.00033 4.68625 2.00033 7.99996C2.00033 11.3137 4.68662 14 8.00033 14C11.314 14 14.0003 11.3137 14.0003 7.99996C14.0003 4.68625 11.314 1.99996 8.00033 1.99996Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_16070_5833">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
 </svg>
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
+  <g clip-path="url(#clip0_16070_7836)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 0.5C6.19994 0.500045 6.38068 0.619444 6.45947 0.803223C6.53814 0.98694 6.50005 1.19993 6.3623 1.34473C5.28241 2.47862 4.63377 3.94864 4.51855 5.5H5.25C5.52614 5.5 5.75 5.72386 5.75 6C5.75 6.27614 5.52614 6.5 5.25 6.5H4.51953C4.62126 7.86877 5.13748 9.17408 5.99951 10.2412C6.66713 9.41481 7.13316 8.44094 7.354 7.39648C7.41119 7.12639 7.67665 6.95363 7.94678 7.01074C8.21671 7.06804 8.38959 7.33349 8.33252 7.60352C8.12423 8.58855 7.72562 9.51877 7.16553 10.3457C7.82338 10.1695 8.43507 9.84654 8.95215 9.39746C9.57996 8.85212 10.045 8.14338 10.2944 7.3501C10.3773 7.08672 10.658 6.94011 10.9214 7.02295C11.1845 7.10594 11.3308 7.38665 11.248 7.6499C10.9431 8.6195 10.3753 9.48581 9.60791 10.1523C8.84061 10.8188 7.90349 11.2595 6.90088 11.4258C6.60593 11.4747 6.30833 11.4985 6.01172 11.499C6.00795 11.4991 6.00379 11.5 6 11.5C5.99747 11.5 5.99471 11.4996 5.99219 11.4995C5.28707 11.4983 4.58556 11.3618 3.92725 11.0938C2.98595 10.7104 2.16929 10.0737 1.56787 9.25439C0.966415 8.43497 0.603536 7.46469 0.52002 6.45166C0.508564 6.31263 0.502334 6.17353 0.501465 6.03467C0.50068 6.02321 0.5 6.01166 0.5 6C0.5 5.98536 0.50072 5.97087 0.501953 5.95654C0.508684 5.1103 0.71045 4.27461 1.09473 3.51562C1.55388 2.60883 2.25521 1.84675 3.12109 1.31445C3.98697 0.782212 4.98362 0.500271 6 0.5ZM1.5293 6.5C1.61672 7.28155 1.90779 8.0274 2.37402 8.6626C2.86609 9.33293 3.53405 9.85435 4.3042 10.168C4.47684 10.2383 4.65372 10.2966 4.83252 10.3447C4.06231 9.20703 3.60632 7.88026 3.51709 6.5H1.5293ZM4.83252 1.65479C4.41613 1.7668 4.01586 1.93857 3.64502 2.1665C2.93658 2.60201 2.36248 3.22538 1.98682 3.96729C1.74301 4.44883 1.5893 4.96821 1.52979 5.5H3.51709C3.60629 4.11958 4.06217 2.79256 4.83252 1.65479Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9 0.5C9.39782 0.5 9.77924 0.658149 10.0605 0.939453C10.3419 1.22076 10.5 1.60218 10.5 2V2.5C11.0523 2.5 11.5 2.94772 11.5 3.5V5C11.5 5.55228 11.0523 6 10.5 6H7.5C6.94772 6 6.5 5.55228 6.5 5V3.5C6.5 2.94772 6.94772 2.5 7.5 2.5V2C7.5 1.60218 7.65815 1.22076 7.93945 0.939453C8.22076 0.658149 8.60218 0.5 9 0.5ZM7.5 5H10.5V3.5H7.5V5ZM9 1.5C8.86739 1.5 8.74025 1.55272 8.64648 1.64648C8.55272 1.74025 8.5 1.86739 8.5 2V2.5H9.5V2C9.5 1.86739 9.44728 1.74025 9.35352 1.64648C9.25975 1.55272 9.13261 1.5 9 1.5Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_16070_7836">
+      <rect width="12" height="12" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
@@ -1,3 +1,8 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9951 1.78125C13.4064 1.78125 14.7287 2.04565 15.9619 2.57324C17.2017 3.10081 18.2901 3.83216 19.2266 4.76855C20.163 5.70502 20.8953 6.79339 21.4229 8.0332C21.957 9.26638 22.2236 10.5888 22.2236 12C22.2236 13.4111 21.9569 14.7368 21.4229 15.9766C20.8953 17.2098 20.163 18.2918 19.2266 19.2217C18.2901 20.1582 17.2018 20.8904 15.9619 21.418C14.7287 21.9521 13.4064 22.2188 11.9951 22.2188C10.5838 22.2187 9.26155 21.9521 8.02832 21.418C6.79506 20.8904 5.70992 20.1582 4.77344 19.2217C3.83702 18.2918 3.10155 17.2098 2.56738 15.9766C2.03992 14.7368 1.77637 13.4111 1.77637 12C1.7764 10.5888 2.03982 9.26638 2.56738 8.0332C3.10157 6.79338 3.83697 5.70502 4.77344 4.76855C5.70988 3.83213 6.79514 3.10082 8.02832 2.57324C9.26157 2.04565 10.5838 1.78125 11.9951 1.78125ZM7.97266 4.36328C7.20547 4.7711 6.51153 5.2817 5.8916 5.89648C5.10021 6.68787 4.47971 7.60449 4.03125 8.64648C3.58942 9.68841 3.36917 10.8064 3.36914 12C3.36914 13.1935 3.5895 14.3116 4.03125 15.3535C4.47968 16.3955 5.10027 17.3122 5.8916 18.1035C6.68959 18.8883 7.60936 19.5056 8.65137 19.9541C9.69336 20.4091 10.808 20.6367 11.9951 20.6367C13.1887 20.6367 14.3067 20.4091 15.3486 19.9541C16.3906 19.5056 17.3072 18.8883 18.0986 18.1035C18.89 17.3121 19.5105 16.3955 19.959 15.3535C20.1867 14.8244 20.3547 14.2753 20.4668 13.707C20.2315 13.5328 20.0315 13.3174 19.8691 13.0586C19.6252 12.6696 19.4344 12.2669 19.2959 11.8516C19.1574 11.4296 19.0384 11.0733 18.9395 10.7832C18.8406 10.4867 18.7319 10.338 18.6133 10.3379C18.5408 10.3379 18.4817 10.3716 18.4355 10.4375C18.396 10.4969 18.3423 10.5591 18.2764 10.625C18.217 10.6842 18.1251 10.7138 18 10.7139C17.8484 10.7139 17.6734 10.6452 17.4756 10.5068C17.2843 10.3617 17.0863 10.1964 16.8818 10.0117C16.6842 9.82064 16.4963 9.65599 16.3184 9.51758C16.1469 9.37249 16.0047 9.2998 15.8926 9.2998C15.774 9.29987 15.6652 9.35898 15.5664 9.47754C15.4676 9.59616 15.418 9.72809 15.418 9.87305C15.418 9.99835 15.5202 10.1374 15.7246 10.2891C15.929 10.4341 16.1631 10.5923 16.4268 10.7637C16.6904 10.9351 16.9245 11.1165 17.1289 11.3076C17.3334 11.4989 17.4355 11.6969 17.4355 11.9014C17.4355 12.1849 17.3502 12.4557 17.1787 12.7129C17.0073 12.9633 16.8322 13.187 16.6543 13.3848C16.4828 13.5826 16.3975 13.7385 16.3975 13.8506C16.3975 14.0945 16.4133 14.4046 16.4463 14.7803C16.4858 15.1561 16.3804 15.5482 16.1299 15.957C16.031 16.1219 15.8666 16.3926 15.6357 16.7686C15.405 17.1378 15.1214 17.5268 14.7852 17.9355C14.4554 18.3444 14.0825 18.6942 13.667 18.9844C13.2581 19.2746 12.8293 19.4199 12.3809 19.4199C11.8599 19.4199 11.4647 19.284 11.1943 19.0137C10.924 18.7433 10.7354 18.4008 10.6299 17.9854C10.531 17.5699 10.4751 17.1378 10.4619 16.6895C10.4553 16.2345 10.4522 15.8255 10.4521 15.4629C10.4521 15.0012 10.29 14.622 9.9668 14.3252C9.64366 14.0219 9.23163 13.8701 8.73047 13.8701C7.89967 13.8701 7.2536 13.6456 6.79199 13.1973C6.33035 12.7422 6.09961 12.109 6.09961 11.2979C6.09962 10.678 6.28088 10.1111 6.64355 9.59668C7.01287 9.08227 7.50386 8.66934 8.11719 8.35938C8.73049 8.04285 9.40374 7.88477 10.1357 7.88477C10.4654 7.8848 10.7954 7.92797 11.125 8.01367C11.4545 8.09934 11.751 8.18166 12.0146 8.26074C12.2783 8.33984 12.4797 8.37985 12.6182 8.37988C12.7501 8.37988 12.8523 8.31354 12.9248 8.18164C12.9973 8.04326 13.0341 7.87537 13.0342 7.67773C13.0342 7.54584 12.9678 7.38998 12.8359 7.21191C12.7107 7.03398 12.5493 6.88207 12.3516 6.75684C12.1538 6.62501 11.9492 6.55964 11.7383 6.55957C11.6791 6.55957 11.6326 6.57564 11.5996 6.6084C11.5667 6.6413 11.5435 6.6911 11.5303 6.75684C11.5171 6.90188 11.4675 7.02096 11.3818 7.11328C11.3027 7.19902 11.1868 7.24219 11.0352 7.24219C10.7913 7.24213 10.5835 7.18944 10.4121 7.08398C10.2407 6.97851 10.0857 6.87306 9.94727 6.76758C9.80887 6.65555 9.67062 6.59872 9.53223 6.59863C9.39373 6.59863 9.27153 6.66181 9.16602 6.78711C9.06718 6.90571 8.96161 7.04723 8.84961 7.21191C8.74409 7.37019 8.60823 7.50922 8.44336 7.62793C8.27858 7.74645 8.05792 7.80562 7.78125 7.80566C7.51086 7.80566 7.29597 7.73298 7.1377 7.58789C6.98628 7.44289 6.91022 7.24859 6.91016 7.00488C6.91016 6.80061 6.96301 6.62231 7.06836 6.4707C7.17388 6.31242 7.29608 6.15023 7.43457 5.98535C7.57295 5.814 7.69532 5.61661 7.80078 5.39258C7.9063 5.16835 7.95898 4.88712 7.95898 4.55078C7.959 4.48782 7.96449 4.42544 7.97266 4.36328ZM14.8438 5.0459C14.4351 5.04594 14.1155 5.11229 13.8848 5.24414C13.6606 5.37604 13.5479 5.56045 13.5479 5.79785C13.5479 5.96251 13.6007 6.09449 13.7061 6.19336C13.8182 6.29228 13.954 6.3418 14.1123 6.3418C14.277 6.34177 14.4089 6.31223 14.5078 6.25293C14.6133 6.19361 14.7484 6.1641 14.9131 6.16406C15.0119 6.16406 15.1143 6.20004 15.2197 6.27246C15.3252 6.33841 15.4674 6.37109 15.6455 6.37109C15.7641 6.37108 15.8633 6.3256 15.9424 6.2334C16.0215 6.1345 16.0605 6.0154 16.0605 5.87695C16.0605 5.64616 15.9424 5.45124 15.7051 5.29297C15.4743 5.12809 15.1867 5.0459 14.8438 5.0459Z" fill="#222631"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.9951 1.78125C13.4064 1.78125 14.7287 2.04565 15.9619 2.57324C17.2017 3.10081 18.2901 3.83216 19.2266 4.76855C20.163 5.70502 20.8953 6.79339 21.4229 8.0332C21.957 9.26638 22.2236 10.5888 22.2236 12C22.2236 13.4111 21.9569 14.7368 21.4229 15.9766C20.8953 17.2098 20.163 18.2918 19.2266 19.2217C18.2901 20.1582 17.2018 20.8904 15.9619 21.418C14.7287 21.9521 13.4064 22.2188 11.9951 22.2188C10.5838 22.2187 9.26155 21.9521 8.02832 21.418C6.79506 20.8904 5.70992 20.1582 4.77344 19.2217C3.83702 18.2918 3.10155 17.2098 2.56738 15.9766C2.03992 14.7368 1.77637 13.4111 1.77637 12C1.7764 10.5888 2.03982 9.26638 2.56738 8.0332C3.10157 6.79338 3.83697 5.70502 4.77344 4.76855C5.70988 3.83213 6.79514 3.10082 8.02832 2.57324C9.26157 2.04565 10.5838 1.78125 11.9951 1.78125ZM7.97266 4.36328C7.20547 4.7711 6.51153 5.2817 5.8916 5.89648C5.10021 6.68787 4.47971 7.60449 4.03125 8.64648C3.58942 9.68841 3.36917 10.8064 3.36914 12C3.36914 13.1935 3.5895 14.3116 4.03125 15.3535C4.47968 16.3955 5.10027 17.3122 5.8916 18.1035C6.68959 18.8883 7.60936 19.5056 8.65137 19.9541C9.69336 20.4091 10.808 20.6367 11.9951 20.6367C13.1887 20.6367 14.3067 20.4091 15.3486 19.9541C16.3906 19.5056 17.3072 18.8883 18.0986 18.1035C18.89 17.3121 19.5105 16.3955 19.959 15.3535C20.1867 14.8244 20.3547 14.2753 20.4668 13.707C20.2315 13.5328 20.0315 13.3174 19.8691 13.0586C19.6252 12.6696 19.4344 12.2669 19.2959 11.8516C19.1574 11.4296 19.0384 11.0733 18.9395 10.7832C18.8406 10.4867 18.7319 10.338 18.6133 10.3379C18.5408 10.3379 18.4817 10.3716 18.4355 10.4375C18.396 10.4969 18.3423 10.5591 18.2764 10.625C18.217 10.6842 18.1251 10.7138 18 10.7139C17.8484 10.7139 17.6734 10.6452 17.4756 10.5068C17.2843 10.3617 17.0863 10.1964 16.8818 10.0117C16.6842 9.82064 16.4963 9.65599 16.3184 9.51758C16.1469 9.37249 16.0047 9.2998 15.8926 9.2998C15.774 9.29987 15.6652 9.35898 15.5664 9.47754C15.4676 9.59616 15.418 9.72809 15.418 9.87305C15.418 9.99835 15.5202 10.1374 15.7246 10.2891C15.929 10.4341 16.1631 10.5923 16.4268 10.7637C16.6904 10.9351 16.9245 11.1165 17.1289 11.3076C17.3334 11.4989 17.4355 11.6969 17.4355 11.9014C17.4355 12.1849 17.3502 12.4557 17.1787 12.7129C17.0073 12.9633 16.8322 13.187 16.6543 13.3848C16.4828 13.5826 16.3975 13.7385 16.3975 13.8506C16.3975 14.0945 16.4133 14.4046 16.4463 14.7803C16.4858 15.1561 16.3804 15.5482 16.1299 15.957C16.031 16.1219 15.8666 16.3926 15.6357 16.7686C15.405 17.1378 15.1214 17.5268 14.7852 17.9355C14.4554 18.3444 14.0825 18.6942 13.667 18.9844C13.2581 19.2746 12.8293 19.4199 12.3809 19.4199C11.8599 19.4199 11.4647 19.284 11.1943 19.0137C10.924 18.7433 10.7354 18.4008 10.6299 17.9854C10.531 17.5699 10.4751 17.1378 10.4619 16.6895C10.4553 16.2345 10.4522 15.8255 10.4521 15.4629C10.4521 15.0012 10.29 14.622 9.9668 14.3252C9.64366 14.0219 9.23163 13.8701 8.73047 13.8701C7.89967 13.8701 7.2536 13.6456 6.79199 13.1973C6.33035 12.7422 6.09961 12.109 6.09961 11.2979C6.09962 10.678 6.28088 10.1111 6.64355 9.59668C7.01287 9.08227 7.50386 8.66934 8.11719 8.35938C8.73049 8.04285 9.40374 7.88477 10.1357 7.88477C10.4654 7.8848 10.7954 7.92797 11.125 8.01367C11.4545 8.09934 11.751 8.18166 12.0146 8.26074C12.2783 8.33984 12.4797 8.37985 12.6182 8.37988C12.7501 8.37988 12.8523 8.31354 12.9248 8.18164C12.9973 8.04326 13.0341 7.87537 13.0342 7.67773C13.0342 7.54584 12.9678 7.38998 12.8359 7.21191C12.7107 7.03398 12.5493 6.88207 12.3516 6.75684C12.1538 6.62501 11.9492 6.55964 11.7383 6.55957C11.6791 6.55957 11.6326 6.57564 11.5996 6.6084C11.5667 6.6413 11.5435 6.6911 11.5303 6.75684C11.5171 6.90188 11.4675 7.02096 11.3818 7.11328C11.3027 7.19902 11.1868 7.24219 11.0352 7.24219C10.7913 7.24213 10.5835 7.18944 10.4121 7.08398C10.2407 6.97851 10.0857 6.87306 9.94727 6.76758C9.80887 6.65555 9.67062 6.59872 9.53223 6.59863C9.39373 6.59863 9.27153 6.66181 9.16602 6.78711C9.06718 6.90571 8.96161 7.04723 8.84961 7.21191C8.74409 7.37019 8.60823 7.50922 8.44336 7.62793C8.27858 7.74645 8.05792 7.80562 7.78125 7.80566C7.51086 7.80566 7.29597 7.73298 7.1377 7.58789C6.98628 7.44289 6.91022 7.24859 6.91016 7.00488C6.91016 6.80061 6.96301 6.62231 7.06836 6.4707C7.17388 6.31242 7.29608 6.15023 7.43457 5.98535C7.57295 5.814 7.69532 5.61661 7.80078 5.39258C7.9063 5.16835 7.95898 4.88712 7.95898 4.55078C7.959 4.48782 7.96449 4.42544 7.97266 4.36328ZM14.8438 5.0459C14.4351 5.04594 14.1155 5.11229 13.8848 5.24414C13.6606 5.37604 13.5479 5.56045 13.5479 5.79785C13.5479 5.96251 13.6007 6.09449 13.7061 6.19336C13.8182 6.29228 13.954 6.3418 14.1123 6.3418C14.277 6.34177 14.4089 6.31223 14.5078 6.25293C14.6133 6.19361 14.7484 6.1641 14.9131 6.16406C15.0119 6.16406 15.1143 6.20004 15.2197 6.27246C15.3252 6.33841 15.4674 6.37109 15.6455 6.37109C15.7641 6.37108 15.8633 6.3256 15.9424 6.2334C16.0215 6.1345 16.0605 6.0154 16.0605 5.87695C16.0605 5.64616 15.9424 5.45124 15.7051 5.29297C15.4743 5.12809 15.1867 5.0459 14.8438 5.0459Z"
+    fill="currentColor"
+  />
 </svg>
@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.39681 21.5464C5.17464 21.3813 5.03817 21.1592 4.98738 20.8799C4.94295 20.6069 4.98421 20.2832 5.11116 19.9087L7.07259 14.0911L2.07381 10.5015C1.75008 10.2729 1.52474 10.0349 1.39778 9.78735C1.27083 9.53345 1.25179 9.27319 1.34066 9.00659C1.42952 8.74634 1.59774 8.55273 1.84529 8.42578C2.09285 8.29883 2.41658 8.23535 2.81649 8.23535H8.9388L10.805 2.42725C10.9256 2.04639 11.0843 1.75757 11.2811 1.56079C11.4842 1.35767 11.7222 1.2561 11.9952 1.2561C12.2745 1.2561 12.5125 1.35767 12.7093 1.56079C12.9124 1.75757 13.0743 2.04639 13.1949 2.42725L15.0611 8.23535H21.1834C21.5833 8.23535 21.9071 8.29883 22.1546 8.42578C22.4022 8.55273 22.5704 8.74634 22.6593 9.00659C22.7481 9.27319 22.7291 9.53345 22.6021 9.78735C22.4752 10.0349 22.2498 10.2729 21.9261 10.5015L16.9273 14.0911L18.8888 19.9087C19.0157 20.2832 19.0538 20.6069 19.003 20.8799C18.9586 21.1592 18.8253 21.3813 18.6031 21.5464C18.3809 21.7241 18.1302 21.7876 17.8509 21.7368C17.5716 21.686 17.2733 21.5464 16.9559 21.3179L11.9952 17.6711L7.04402 21.3179C6.72664 21.5464 6.4283 21.686 6.149 21.7368C5.86971 21.7876 5.61898 21.7241 5.39681 21.5464Z" fill="#222631"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M5.39681 21.5464C5.17464 21.3813 5.03817 21.1592 4.98738 20.8799C4.94295 20.6069 4.98421 20.2832 5.11116 19.9087L7.07259 14.0911L2.07381 10.5015C1.75008 10.2729 1.52474 10.0349 1.39778 9.78735C1.27083 9.53345 1.25179 9.27319 1.34066 9.00659C1.42952 8.74634 1.59774 8.55273 1.84529 8.42578C2.09285 8.29883 2.41658 8.23535 2.81649 8.23535H8.9388L10.805 2.42725C10.9256 2.04639 11.0843 1.75757 11.2811 1.56079C11.4842 1.35767 11.7222 1.2561 11.9952 1.2561C12.2745 1.2561 12.5125 1.35767 12.7093 1.56079C12.9124 1.75757 13.0743 2.04639 13.1949 2.42725L15.0611 8.23535H21.1834C21.5833 8.23535 21.9071 8.29883 22.1546 8.42578C22.4022 8.55273 22.5704 8.74634 22.6593 9.00659C22.7481 9.27319 22.7291 9.53345 22.6021 9.78735C22.4752 10.0349 22.2498 10.2729 21.9261 10.5015L16.9273 14.0911L18.8888 19.9087C19.0157 20.2832 19.0538 20.6069 19.003 20.8799C18.9586 21.1592 18.8253 21.3813 18.6031 21.5464C18.3809 21.7241 18.1302 21.7876 17.8509 21.7368C17.5716 21.686 17.2733 21.5464 16.9559 21.3179L11.9952 17.6711L7.04402 21.3179C6.72664 21.5464 6.4283 21.686 6.149 21.7368C5.86971 21.7876 5.61898 21.7241 5.39681 21.5464Z"
+    fill="currentColor"
+  />
 </svg>
@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.38062 22.0569C5.1412 21.8741 4.99629 21.6316 4.94588 21.3291C4.89548 21.033 4.93643 20.6896 5.06874 20.299L6.98724 14.6002L2.09176 11.094C1.75154 10.8483 1.51212 10.5931 1.37351 10.3285C1.2412 10.0576 1.22545 9.7772 1.32625 9.48738C1.42076 9.20386 1.60032 8.99279 1.86494 8.85418C2.12957 8.71557 2.46979 8.64942 2.88562 8.65572L5.69249 8.66517L7.54483 10.5175L4.43554 10.4419C4.38514 10.4419 4.35994 10.4514 4.35994 10.4703C4.34734 10.4955 4.35994 10.5175 4.39774 10.5364L8.64112 13.4189C8.88684 13.5827 9.03175 13.7497 9.07585 13.9198C9.11996 14.0899 9.0916 14.3041 8.9908 14.5624L7.26131 19.3917C7.25501 19.4296 7.25816 19.4548 7.27076 19.4674C7.27706 19.48 7.29912 19.4737 7.33692 19.4485L11.3157 16.3581C11.4984 16.2069 11.678 16.1281 11.8544 16.1218C12.0371 16.1155 12.2166 16.1911 12.3931 16.3486L18.8196 21.7922C18.6998 21.956 18.6022 22.0632 18.5266 22.1136C18.2872 22.2585 18.0257 22.2994 17.7422 22.2364C17.465 22.1797 17.1688 22.038 16.8538 21.8111L11.9961 18.2482L7.1479 21.8111C6.81398 22.0569 6.4958 22.2049 6.19338 22.2553C5.89726 22.3057 5.62634 22.2396 5.38062 22.0569ZM17.1846 14.4774L15.8048 13.1165L19.604 10.5364C19.6418 10.5112 19.6575 10.4892 19.6512 10.4703C19.6449 10.4514 19.6197 10.4419 19.5756 10.4419L14.4533 10.5837C14.1698 10.5963 13.9524 10.5553 13.8012 10.4608C13.6563 10.36 13.5492 10.171 13.4799 9.89376L12.0434 4.97938C12.0371 4.93528 12.0213 4.91323 11.9961 4.91323C11.9772 4.91323 11.9646 4.93528 11.9583 4.97938L10.9849 8.29659L9.49168 6.81283L10.7203 2.95693C10.8463 2.56 11.0164 2.25757 11.2306 2.04966C11.4448 1.83544 11.7 1.72833 11.9961 1.72833C12.2986 1.72833 12.5569 1.83544 12.7711 2.04966C12.9853 2.25757 13.1554 2.56 13.2814 2.95693L15.1054 8.69352L21.1066 8.65572C21.5288 8.64942 21.8721 8.71557 22.1368 8.85418C22.4014 8.99279 22.5809 9.20386 22.6755 9.48738C22.7763 9.7772 22.7574 10.0576 22.6187 10.3285C22.4864 10.5931 22.2502 10.8483 21.9099 11.094L17.1846 14.4774ZM20.2088 21.4142L4.44499 5.69764C4.30008 5.55273 4.22763 5.37316 4.22763 5.15895C4.22763 4.93843 4.30008 4.75572 4.44499 4.61081C4.60251 4.45329 4.78522 4.37454 4.99314 4.37454C5.20735 4.37454 5.39322 4.45329 5.55073 4.61081L21.2956 20.3274C21.4532 20.4723 21.5288 20.6518 21.5225 20.8661C21.5225 21.0803 21.4469 21.263 21.2956 21.4142C21.1507 21.5591 20.9712 21.6316 20.757 21.6316C20.5427 21.6316 20.36 21.5591 20.2088 21.4142Z" fill="#222631"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M5.38062 22.0569C5.1412 21.8741 4.99629 21.6316 4.94588 21.3291C4.89548 21.033 4.93643 20.6896 5.06874 20.299L6.98724 14.6002L2.09176 11.094C1.75154 10.8483 1.51212 10.5931 1.37351 10.3285C1.2412 10.0576 1.22545 9.7772 1.32625 9.48738C1.42076 9.20386 1.60032 8.99279 1.86494 8.85418C2.12957 8.71557 2.46979 8.64942 2.88562 8.65572L5.69249 8.66517L7.54483 10.5175L4.43554 10.4419C4.38514 10.4419 4.35994 10.4514 4.35994 10.4703C4.34734 10.4955 4.35994 10.5175 4.39774 10.5364L8.64112 13.4189C8.88684 13.5827 9.03175 13.7497 9.07585 13.9198C9.11996 14.0899 9.0916 14.3041 8.9908 14.5624L7.26131 19.3917C7.25501 19.4296 7.25816 19.4548 7.27076 19.4674C7.27706 19.48 7.29912 19.4737 7.33692 19.4485L11.3157 16.3581C11.4984 16.2069 11.678 16.1281 11.8544 16.1218C12.0371 16.1155 12.2166 16.1911 12.3931 16.3486L18.8196 21.7922C18.6998 21.956 18.6022 22.0632 18.5266 22.1136C18.2872 22.2585 18.0257 22.2994 17.7422 22.2364C17.465 22.1797 17.1688 22.038 16.8538 21.8111L11.9961 18.2482L7.1479 21.8111C6.81398 22.0569 6.4958 22.2049 6.19338 22.2553C5.89726 22.3057 5.62634 22.2396 5.38062 22.0569ZM17.1846 14.4774L15.8048 13.1165L19.604 10.5364C19.6418 10.5112 19.6575 10.4892 19.6512 10.4703C19.6449 10.4514 19.6197 10.4419 19.5756 10.4419L14.4533 10.5837C14.1698 10.5963 13.9524 10.5553 13.8012 10.4608C13.6563 10.36 13.5492 10.171 13.4799 9.89376L12.0434 4.97938C12.0371 4.93528 12.0213 4.91323 11.9961 4.91323C11.9772 4.91323 11.9646 4.93528 11.9583 4.97938L10.9849 8.29659L9.49168 6.81283L10.7203 2.95693C10.8463 2.56 11.0164 2.25757 11.2306 2.04966C11.4448 1.83544 11.7 1.72833 11.9961 1.72833C12.2986 1.72833 12.5569 1.83544 12.7711 2.04966C12.9853 2.25757 13.1554 2.56 13.2814 2.95693L15.1054 8.69352L21.1066 8.65572C21.5288 8.64942 21.8721 8.71557 22.1368 8.85418C22.4014 8.99279 22.5809 9.20386 22.6755 9.48738C22.7763 9.7772 22.7574 10.0576 22.6187 10.3285C22.4864 10.5931 22.2502 10.8483 21.9099 11.094L17.1846 14.4774ZM20.2088 21.4142L4.44499 5.69764C4.30008 5.55273 4.22763 5.37316 4.22763 5.15895C4.22763 4.93843 4.30008 4.75572 4.44499 4.61081C4.60251 4.45329 4.78522 4.37454 4.99314 4.37454C5.20735 4.37454 5.39322 4.45329 5.55073 4.61081L21.2956 20.3274C21.4532 20.4723 21.5288 20.6518 21.5225 20.8661C21.5225 21.0803 21.4469 21.263 21.2956 21.4142C21.1507 21.5591 20.9712 21.6316 20.757 21.6316C20.5427 21.6316 20.36 21.5591 20.2088 21.4142Z"
+    fill="currentColor"
+  />
 </svg>
@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.40979 21.4006C5.17037 21.2179 5.02546 20.9753 4.97506 20.6729C4.92465 20.3768 4.96561 20.0334 5.09792 19.6428L7.01642 13.944L2.12094 10.4378C1.78071 10.192 1.54129 9.93687 1.40268 9.67225C1.27037 9.40133 1.25462 9.12095 1.35543 8.83113C1.44994 8.54761 1.6295 8.33654 1.89412 8.19793C2.15874 8.05932 2.49897 7.99317 2.9148 7.99947L8.92546 8.03727L10.7495 2.30068C10.8755 1.90375 11.0456 1.60132 11.2598 1.39341C11.474 1.17919 11.7292 1.07208 12.0253 1.07208C12.3277 1.07208 12.586 1.17919 12.8003 1.39341C13.0145 1.60132 13.1846 1.90375 13.3106 2.30068L15.1346 8.03727L21.1358 7.99947C21.5579 7.99317 21.9013 8.05932 22.1659 8.19793C22.4306 8.33654 22.6101 8.54761 22.7046 8.83113C22.8054 9.12095 22.7865 9.40133 22.6479 9.67225C22.5156 9.93687 22.2793 10.192 21.9391 10.4378L17.0436 13.944L18.9621 19.6428C19.0944 20.0334 19.1354 20.3768 19.085 20.6729C19.0346 20.9753 18.8897 21.2179 18.6503 21.4006C18.4045 21.5833 18.1305 21.6495 17.8281 21.5991C17.5319 21.5487 17.2169 21.4006 16.883 21.1549L12.0253 17.592L7.17708 21.1549C6.84315 21.4006 6.52498 21.5487 6.22255 21.5991C5.92643 21.6495 5.65551 21.5833 5.40979 21.4006ZM7.29994 18.8111C7.30624 18.8237 7.32829 18.8174 7.36609 18.7922L11.4205 15.6451C11.641 15.475 11.8426 15.3899 12.0253 15.3899C12.2143 15.3899 12.4191 15.475 12.6396 15.6451L16.694 18.7922C16.7318 18.8174 16.7538 18.8237 16.7601 18.8111C16.7727 18.7985 16.7759 18.7733 16.7696 18.7355L15.0401 13.9062C14.9708 13.7298 14.933 13.5786 14.9267 13.4525C14.9267 13.3202 14.9613 13.2005 15.0306 13.0934C15.1062 12.9863 15.226 12.876 15.3898 12.7626L19.6331 9.88016C19.6709 9.85496 19.6867 9.83291 19.6804 9.81401C19.6741 9.79511 19.6489 9.78566 19.6048 9.78566L14.4825 9.92742C14.199 9.94002 13.9816 9.89907 13.8304 9.80456C13.6855 9.70375 13.5784 9.51474 13.5091 9.23751L12.0726 4.32313C12.0663 4.27903 12.0505 4.25698 12.0253 4.25698C12.0064 4.25698 11.9938 4.27903 11.9875 4.32313L10.551 9.23751C10.4817 9.51474 10.3714 9.70375 10.2202 9.80456C10.0753 9.89907 9.86424 9.94002 9.58701 9.92742L4.46472 9.78566C4.41431 9.78566 4.38911 9.79511 4.38911 9.81401C4.37651 9.83921 4.38911 9.86126 4.42692 9.88016L8.67029 12.7626C8.83411 12.8697 8.95066 12.98 9.01997 13.0934C9.09558 13.2005 9.13023 13.3202 9.12393 13.4525C9.12393 13.5786 9.08928 13.7298 9.01997 13.9062L7.29049 18.7355C7.28419 18.7733 7.28734 18.7985 7.29994 18.8111Z" fill="#222631"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path
+    d="M12.2119 1.01465C12.4222 1.04409 12.6248 1.1176 12.8066 1.23047C12.9884 1.34335 13.1439 1.49245 13.2636 1.66797L13.371 1.85156L15.6816 6.53125C15.762 6.69388 15.8806 6.83464 16.0273 6.94141C16.1742 7.04828 16.3456 7.11814 16.5253 7.14453L21.6904 7.90039C21.9022 7.93112 22.1032 8.00614 22.2832 8.11914L22.456 8.24414L22.6083 8.39258C22.7031 8.49819 22.7825 8.61658 22.8447 8.74414L22.9248 8.94141L22.9765 9.14844C23.0134 9.35762 23.0063 9.57349 22.955 9.78125C22.8866 10.0582 22.7423 10.3106 22.538 10.5098L22.5371 10.5107L18.8017 14.1484C18.6716 14.2753 18.5738 14.4317 18.5175 14.6045C18.4613 14.7773 18.448 14.9615 18.4785 15.1406L19.3593 20.2764L19.3818 20.4893C19.3892 20.7025 19.352 20.9159 19.2714 21.1152C19.164 21.3811 18.9839 21.6118 18.7519 21.7803C18.5199 21.9487 18.245 22.0485 17.9589 22.0684C17.6729 22.0882 17.3869 22.0273 17.1337 21.8926L12.5205 19.4668C12.3597 19.3825 12.1805 19.3389 11.999 19.3389C11.8177 19.3389 11.6391 19.3826 11.4785 19.4668L6.86225 21.8926L6.86323 21.8936C6.61022 22.0274 6.32454 22.0877 6.03901 22.0674C5.75361 22.047 5.47943 21.9475 5.248 21.7793C5.0165 21.6109 4.83678 21.3806 4.72944 21.1152C4.6489 20.916 4.61181 20.7025 4.61909 20.4893L4.64057 20.2773L5.52143 15.1416C5.55213 14.9624 5.53855 14.7784 5.48237 14.6055C5.44019 14.4757 5.37498 14.3548 5.28999 14.249L5.19819 14.1484L1.46186 10.5117L1.46284 10.5107C1.25828 10.3121 1.11297 10.0609 1.04389 9.78418C0.974532 9.50616 0.983795 9.21396 1.07221 8.94141L1.15229 8.74316C1.24581 8.55129 1.37926 8.3805 1.54389 8.24219C1.76322 8.05794 2.02981 7.9386 2.31342 7.89844L7.47456 7.14453L7.60737 7.11621C7.73834 7.08062 7.86219 7.0216 7.9726 6.94141C8.11958 6.83462 8.23878 6.69411 8.31928 6.53125L10.6279 1.85254L10.6289 1.85156C10.7553 1.59614 10.9503 1.38088 11.1923 1.23047C11.4346 1.08005 11.7148 1 11.9999 1L12.2119 1.01465ZM17.3896 20.624V20.6191L17.3876 20.6113L17.3896 20.624ZM18.0693 20.125L18.0742 20.127C18.0719 20.1258 18.0696 20.1242 18.0673 20.123L18.0693 20.125ZM5.92768 20.126L5.93061 20.125L5.93354 20.123C5.93165 20.124 5.92957 20.125 5.92768 20.126ZM10.1123 7.41602C9.88826 7.86934 9.55745 8.26235 9.14839 8.55957C8.73934 8.85669 8.26389 9.05012 7.76362 9.12305L3.53706 9.74023L6.5937 12.7158C6.95632 13.069 7.22814 13.5049 7.38471 13.9863C7.54128 14.4678 7.57767 14.9805 7.49214 15.4795L6.77143 19.6826L10.5478 17.6973C10.9954 17.4623 11.4934 17.3389 11.999 17.3389C12.5046 17.3389 13.0034 17.4612 13.4511 17.6963L17.2285 19.6826L16.5068 15.4795C16.4216 14.9807 16.4596 14.4676 16.6162 13.9863C16.7727 13.5051 17.0438 13.069 17.4062 12.7158L20.4599 9.74121L16.2353 9.12305C15.7356 9.04965 15.26 8.85656 14.8515 8.55957C14.4429 8.2624 14.1125 7.86993 13.8886 7.41699L11.999 3.5918L10.1123 7.41602Z"
+    fill="currentColor"
+  />
 </svg>
@@ -1,12 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
+    d="M9.27246 18.7681C9.08073 18.7681 8.92611 18.7155 8.80859 18.6104C8.69108 18.499 8.62923 18.3506 8.62305 18.165L8.34473 8.44238C8.33854 8.26302 8.39421 8.11768 8.51172 8.00635C8.62923 7.88883 8.78385 7.83008 8.97559 7.83008C9.16732 7.83008 9.32194 7.88574 9.43945 7.99707C9.55697 8.1084 9.61572 8.25374 9.61572 8.43311L9.90332 18.1558C9.90332 18.3413 9.84456 18.4897 9.72705 18.6011C9.61572 18.7124 9.46419 18.7681 9.27246 18.7681ZM12 18.7681C11.8083 18.7681 11.6506 18.7124 11.5269 18.6011C11.4093 18.4897 11.3506 18.3444 11.3506 18.165V8.44238C11.3506 8.26302 11.4093 8.11768 11.5269 8.00635C11.6506 7.88883 11.8083 7.83008 12 7.83008C12.1979 7.83008 12.3556 7.88883 12.4731 8.00635C12.5968 8.11768 12.6587 8.26302 12.6587 8.44238V18.165C12.6587 18.3444 12.5968 18.4897 12.4731 18.6011C12.3556 18.7124 12.1979 18.7681 12 18.7681ZM14.7368 18.7681C14.5389 18.7681 14.3812 18.7124 14.2637 18.6011C14.1523 18.4897 14.0998 18.3413 14.106 18.1558L14.3843 8.44238C14.3905 8.25684 14.4523 8.1084 14.5698 7.99707C14.6873 7.88574 14.8389 7.83008 15.0244 7.83008C15.2223 7.83008 15.377 7.88883 15.4883 8.00635C15.6058 8.11768 15.6615 8.26302 15.6553 8.44238L15.377 18.165C15.3708 18.3506 15.3089 18.499 15.1914 18.6104C15.0739 18.7155 14.9224 18.7681 14.7368 18.7681ZM7.78809 5.2417V3.23779C7.78809 2.52653 8.00146 1.97298 8.42822 1.57715C8.86117 1.17513 9.4611 0.974121 10.228 0.974121H13.7534C14.5203 0.974121 15.1203 1.17513 15.5532 1.57715C15.9862 1.97298 16.2026 2.52653 16.2026 3.23779V5.2417H14.4863V3.32129C14.4863 3.08626 14.409 2.89762 14.2544 2.75537C14.0998 2.60693 13.8926 2.53271 13.6328 2.53271H10.3486C10.0951 2.53271 9.89095 2.60693 9.73633 2.75537C9.58171 2.89762 9.50439 3.08626 9.50439 3.32129V5.2417H7.78809ZM3.67822 6.26221C3.44938 6.26221 3.25456 6.1818 3.09375 6.021C2.93294 5.86019 2.85254 5.66536 2.85254 5.43652C2.85254 5.21387 2.93294 5.02523 3.09375 4.87061C3.25456 4.7098 3.44938 4.62939 3.67822 4.62939H20.3311C20.5599 4.62939 20.7516 4.70671 20.9062 4.86133C21.0671 5.01595 21.1475 5.20768 21.1475 5.43652C21.1475 5.66536 21.0671 5.86019 20.9062 6.021C20.7516 6.1818 20.5599 6.26221 20.3311 6.26221H3.67822ZM7.7417 21.9131C7.02425 21.9131 6.44906 21.7121 6.01611 21.3101C5.58936 20.908 5.36051 20.3483 5.32959 19.6309L4.68018 6.08594H6.37793L7.01807 19.3433C7.03044 19.6154 7.12012 19.8381 7.28711 20.0112C7.4541 20.1844 7.66748 20.271 7.92725 20.271H16.0728C16.3325 20.271 16.5459 20.1844 16.7129 20.0112C16.8799 19.8442 16.9696 19.6216 16.9819 19.3433L17.5942 6.08594H19.3198L18.6797 19.6216C18.6488 20.339 18.4168 20.8988 17.9839 21.3008C17.5509 21.709 16.9788 21.9131 16.2676 21.9131H7.7417Z"
    fill="currentColor"
-    d="M6.667 6.667c.369 0 .667.298.667.666v4a.667.667 0 1 1-1.333 0v-4c0-.368.298-.666.666-.666m2.667 0c.368 0 .667.298.667.666v4a.667.667 0 0 1-1.334 0v-4c0-.368.299-.666.667-.666"
-  />
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M9.334.667a2 2 0 0 1 2 2v.666h2.667a.667.667 0 0 1 0 1.334h-.667v8.666a2 2 0 0 1-2 2H4.667a2 2 0 0 1-2-2V4.667h-.666a.667.667 0 0 1 0-1.334h2.666v-.666a2 2 0 0 1 2-2zM4.001 13.333a.666.666 0 0 0 .666.667h6.667a.666.666 0 0 0 .667-.667V4.667H4zM6.667 2a.667.667 0 0 0-.666.667v.666h4v-.666A.667.667 0 0 0 9.334 2z"
-    clip-rule="evenodd"
  />
 </svg>
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <path
+    d="M10.0003 9.33337C10.8844 9.33337 11.732 9.68482 12.3571 10.3099C12.9822 10.9351 13.3337 11.7827 13.3337 12.6667V14C13.3337 14.3682 13.0352 14.6667 12.667 14.6667C12.2988 14.6667 12.0003 14.3682 12.0003 14V12.6667C12.0003 12.1363 11.7895 11.6277 11.4144 11.2526C11.0393 10.8776 10.5308 10.6667 10.0003 10.6667H6.00033C5.46989 10.6667 4.96134 10.8776 4.58626 11.2526C4.21119 11.6277 4.00033 12.1363 4.00033 12.6667V14C4.00033 14.3682 3.70185 14.6667 3.33366 14.6667C2.96547 14.6667 2.66699 14.3682 2.66699 14V12.6667C2.66699 11.7827 3.01843 10.9351 3.64355 10.3099C4.26868 9.68482 5.11627 9.33337 6.00033 9.33337H10.0003Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.00033 1.33337C9.84128 1.33337 11.3337 2.82576 11.3337 4.66671C11.3337 6.50766 9.84128 8.00004 8.00033 8.00004C6.15938 8.00004 4.66699 6.50766 4.66699 4.66671C4.66699 2.82576 6.15938 1.33337 8.00033 1.33337ZM8.00033 2.66671C6.89576 2.66671 6.00033 3.56214 6.00033 4.66671C6.00033 5.77128 6.89576 6.66671 8.00033 6.66671C9.1049 6.66671 10.0003 5.77128 10.0003 4.66671C10.0003 3.56214 9.1049 2.66671 8.00033 2.66671Z"
+    fill="currentColor"
+  />
+</svg>
@@ -1,8 +1,6 @@
 import { t } from 'i18next';

-import PublicSVG from '@/assets/icons/ui-kit/public.svg';
-import ProtedtedSVG from '@/assets/icons/ui-kit/vpn_lock.svg';
-import { Box, Text } from '@/components';
+import { Box, Icon, Text } from '@/components';
 import { useConfig } from '@/core';
 import {
  Doc,
@@ -13,6 +11,9 @@ import {
  useTrans,
 } from '@/docs/doc-management';
 import { useDate } from '@/hooks';
+import PublicSVG from '@/icons/public.svg';
+import StarIcon from '@/icons/star-filled.svg';
+import ProtedtedSVG from '@/icons/vpn_lock.svg';

 interface DocHeaderInfoProps {
  doc: Doc;
@@ -41,7 +42,31 @@ export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => {
  }

  return (
-    <Box as="dl" $direction="row" $align="center" $margin="0">
+    <Box as="dl" $direction="row" $align="center" $margin="0" $gap="3xs">
+      {doc.is_favorite && (
+        <>
+          <Text as="dt" className="sr-only">
+            {t('This document is starred')}
+          </Text>
+          <Text
+            as="dd"
+            $variation="tertiary"
+            $size="s"
+            $weight="bold"
+            $theme={isEditable ? 'neutral' : 'warning'}
+            $direction="row"
+            $margin="0"
+          >
+            <Icon
+              $layer="background"
+              $theme="neutral"
+              $variation="primary"
+              $size="sm"
+              icon={<StarIcon aria-hidden="true" width={16} height={16} />}
+            />
+          </Text>
+        </>
+      )}
      <Text as="dt" className="sr-only">
        {t('Role')}
      </Text>
@@ -56,7 +81,7 @@ export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => {
      >
        <VisibilityDoc doc={doc} />
        {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)}
-        &nbsp;·&nbsp;
+        &nbsp;&nbsp;·&nbsp;
      </Text>
      <Text as="dt" $variation="tertiary" $size="s" $margin="0">
        {dateLabel}
@@ -42,13 +42,13 @@ export function useCreateFavoriteDoc({
        });
      });

-      const message = t('Document pinned successfully!');
+      const message = t('Document starred successfully!');
      announce(message, 'polite');

      onSuccess?.();
    },
    onError: () => {
-      const message = t('Failed to pin the document.');
+      const message = t('Failed to star the document.');
      announce(message, 'assertive');
    },
  });
@@ -42,13 +42,13 @@ export function useDeleteFavoriteDoc({
        });
      });

-      const message = t('Document unpinned successfully!');
+      const message = t('Document unstarred successfully!');
      announce(message, 'polite');

      onSuccess?.();
    },
    onError: () => {
-      const message = t('Failed to unpin the document.');
+      const message = t('Failed to unstar the document.');
      announce(message, 'assertive');
    },
  });
@@ -9,10 +9,11 @@ import {
  useAPIInfiniteQuery,
 } from '@/api';

-import { Doc } from '../types';
+import { Doc, DocsOrdering } from '../types';

 export type DocsFavoriteParams = {
  page: number;
+  ordering?: DocsOrdering;
 };

 export type DocsFavoriteResponse = APIList<Doc>;
@@ -24,7 +25,9 @@ export const getDocsFavorite = async (
  if (params.page) {
    searchParams.set('page', params.page.toString());
  }
-
+  if (params.ordering) {
+    searchParams.set('ordering', params.ordering);
+  }
  const response = await fetchAPI(
    `documents/favorite_list/?${searchParams.toString()}`,
  );
@@ -1,138 +0,0 @@
-<svg
-  width="33"
-  height="33"
-  viewBox="0 0 33 33"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g clip-path="url(#clip0_3236_2932)">
-    <g clip-path="url(#clip1_3236_2932)">
-      <rect x="4.5" y="0.5" width="24" height="32" rx="3.55556" fill="white" />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M8.08374 7.7623C8.08374 7.27138 8.48171 6.87341 8.97263 6.87341H16.9726C17.4635 6.87341 17.8615 7.27138 17.8615 7.7623C17.8615 8.25322 17.4635 8.65118 16.9726 8.65118H8.97263C8.48171 8.65118 8.08374 8.25322 8.08374 7.7623Z"
-        fill="currentColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M8.08374 10.7685C8.08374 10.2776 8.48171 9.87964 8.97263 9.87964H24.0273C24.5182 9.87964 24.9162 10.2776 24.9162 10.7685C24.9162 11.2594 24.5182 11.6574 24.0273 11.6574H8.97263C8.48171 11.6574 8.08374 11.2594 8.08374 10.7685ZM8.08374 13.4352C8.08374 12.9443 8.48171 12.5463 8.97263 12.5463H24.0273C24.5182 12.5463 24.9162 12.9443 24.9162 13.4352C24.9162 13.9261 24.5182 14.3241 24.0273 14.3241H8.97263C8.48171 14.3241 8.08374 13.9261 8.08374 13.4352ZM8.08374 16.1019C8.08374 15.6109 8.48171 15.213 8.97263 15.213H24.0273C24.5182 15.213 24.9162 15.6109 24.9162 16.1019C24.9162 16.5928 24.5182 16.9907 24.0273 16.9907H8.97263C8.48171 16.9907 8.08374 16.5928 8.08374 16.1019ZM8.08374 18.7685C8.08374 18.2776 8.48171 17.8796 8.97263 17.8796H24.0273C24.5182 17.8796 24.9162 18.2776 24.9162 18.7685C24.9162 19.2594 24.5182 19.6574 24.0273 19.6574H8.97263C8.48171 19.6574 8.08374 19.2594 8.08374 18.7685Z"
-        fill="currentColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M8.08374 10.7685C8.08374 10.2776 8.48171 9.87964 8.97263 9.87964H24.0273C24.5182 9.87964 24.9162 10.2776 24.9162 10.7685C24.9162 11.2594 24.5182 11.6574 24.0273 11.6574H8.97263C8.48171 11.6574 8.08374 11.2594 8.08374 10.7685ZM8.08374 13.4352C8.08374 12.9443 8.48171 12.5463 8.97263 12.5463H24.0273C24.5182 12.5463 24.9162 12.9443 24.9162 13.4352C24.9162 13.9261 24.5182 14.3241 24.0273 14.3241H8.97263C8.48171 14.3241 8.08374 13.9261 8.08374 13.4352ZM8.08374 16.1019C8.08374 15.6109 8.48171 15.213 8.97263 15.213H24.0273C24.5182 15.213 24.9162 15.6109 24.9162 16.1019C24.9162 16.5928 24.5182 16.9907 24.0273 16.9907H8.97263C8.48171 16.9907 8.08374 16.5928 8.08374 16.1019ZM8.08374 18.7685C8.08374 18.2776 8.48171 17.8796 8.97263 17.8796H24.0273C24.5182 17.8796 24.9162 18.2776 24.9162 18.7685C24.9162 19.2594 24.5182 19.6574 24.0273 19.6574H8.97263C8.48171 19.6574 8.08374 19.2594 8.08374 18.7685Z"
-        fill="white"
-        fill-opacity="0.65"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M8.08374 21.4666C8.08374 20.9757 8.48171 20.5777 8.97263 20.5777H24.0273C24.5182 20.5777 24.9162 20.9757 24.9162 21.4666C24.9162 21.9575 24.5182 22.3555 24.0273 22.3555H8.97263C8.48171 22.3555 8.08374 21.9575 8.08374 21.4666ZM8.08374 24.1333C8.08374 23.6424 8.48171 23.2444 8.97263 23.2444H24.0273C24.5182 23.2444 24.9162 23.6424 24.9162 24.1333C24.9162 24.6242 24.5182 25.0222 24.0273 25.0222H8.97263C8.48171 25.0222 8.08374 24.6242 8.08374 24.1333ZM8.08374 26.8C8.08374 26.309 8.48171 25.9111 8.97263 25.9111H24.0273C24.5182 25.9111 24.9162 26.309 24.9162 26.8C24.9162 27.2909 24.5182 27.6888 24.0273 27.6888H8.97263C8.48171 27.6888 8.08374 27.2909 8.08374 26.8ZM8.08374 29.4666C8.08374 28.9757 8.48171 28.5777 8.97263 28.5777H24.0273C24.5182 28.5777 24.9162 28.9757 24.9162 29.4666C24.9162 29.9575 24.5182 30.3555 24.0273 30.3555H8.97263C8.48171 30.3555 8.08374 29.9575 8.08374 29.4666Z"
-        fill="currentColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M8.08374 21.4666C8.08374 20.9757 8.48171 20.5777 8.97263 20.5777H24.0273C24.5182 20.5777 24.9162 20.9757 24.9162 21.4666C24.9162 21.9575 24.5182 22.3555 24.0273 22.3555H8.97263C8.48171 22.3555 8.08374 21.9575 8.08374 21.4666ZM8.08374 24.1333C8.08374 23.6424 8.48171 23.2444 8.97263 23.2444H24.0273C24.5182 23.2444 24.9162 23.6424 24.9162 24.1333C24.9162 24.6242 24.5182 25.0222 24.0273 25.0222H8.97263C8.48171 25.0222 8.08374 24.6242 8.08374 24.1333ZM8.08374 26.8C8.08374 26.309 8.48171 25.9111 8.97263 25.9111H24.0273C24.5182 25.9111 24.9162 26.309 24.9162 26.8C24.9162 27.2909 24.5182 27.6888 24.0273 27.6888H8.97263C8.48171 27.6888 8.08374 27.2909 8.08374 26.8ZM8.08374 29.4666C8.08374 28.9757 8.48171 28.5777 8.97263 28.5777H24.0273C24.5182 28.5777 24.9162 28.9757 24.9162 29.4666C24.9162 29.9575 24.5182 30.3555 24.0273 30.3555H8.97263C8.48171 30.3555 8.08374 29.9575 8.08374 29.4666Z"
-        fill="white"
-        fill-opacity="0.65"
-      />
-      <rect
-        x="4.57422"
-        y="0.5"
-        width="23.9258"
-        height="31.8206"
-        fill="url(#paint0_linear_3236_2932)"
-        fill-opacity="0.4"
-      />
-    </g>
-    <rect
-      x="4.85"
-      y="0.85"
-      width="23.3"
-      height="31.3"
-      rx="3.20556"
-      stroke="currentColor"
-      stroke-width="0.7"
-    />
-    <rect
-      x="4.85"
-      y="0.85"
-      width="23.3"
-      height="31.3"
-      rx="3.20556"
-      stroke="white"
-      stroke-opacity="0.65"
-      stroke-width="0.7"
-    />
-    <rect
-      x="4.85"
-      y="0.85"
-      width="23.3"
-      height="31.3"
-      rx="3.20556"
-      stroke="url(#paint1_linear_3236_2932)"
-      stroke-opacity="0.23"
-      stroke-width="0.7"
-    />
-    <rect
-      x="10.0132"
-      y="10.0132"
-      width="12.9736"
-      height="12.9736"
-      rx="6.48682"
-      fill="currentColor"
-    />
-    <rect
-      x="10.0132"
-      y="10.0132"
-      width="12.9736"
-      height="12.9736"
-      rx="6.48682"
-      stroke="white"
-      stroke-width="1.21628"
-    />
-    <path
-      d="M17.9595 16.5L18.9325 17.473V18.2028H16.8648V20.5137L16.4999 20.8786L16.1351 20.5137V18.2028H14.0674V17.473L15.0404 16.5V13.8242H14.5539V13.0944H18.446V13.8242H17.9595V16.5Z"
-      fill="white"
-    />
-  </g>
-  <defs>
-    <linearGradient
-      id="paint0_linear_3236_2932"
-      x1="16.5371"
-      y1="0.5"
-      x2="16.5371"
-      y2="32.3206"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop stop-color="white" stop-opacity="0" />
-      <stop offset="1" stop-color="white" />
-    </linearGradient>
-    <linearGradient
-      id="paint1_linear_3236_2932"
-      x1="16.5"
-      y1="0.5"
-      x2="16.5"
-      y2="32.5"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop stop-color="white" stop-opacity="0" />
-      <stop offset="1" stop-color="white" />
-    </linearGradient>
-    <clipPath id="clip0_3236_2932">
-      <rect
-        width="32"
-        height="32"
-        fill="white"
-        transform="translate(0.5 0.5)"
-      />
-    </clipPath>
-    <clipPath id="clip1_3236_2932">
-      <rect x="4.5" y="0.5" width="24" height="32" rx="3.55556" fill="white" />
-    </clipPath>
-  </defs>
-</svg>
@@ -10,19 +10,19 @@ import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';

-import ContentCopyIcon from '@/assets/icons/ui-kit/copy.svg';
-import DownloadSVG from '@/assets/icons/ui-kit/download.svg';
-import HistorySVG from '@/assets/icons/ui-kit/history.svg';
-import KeepSVG from '@/assets/icons/ui-kit/keep.svg';
-import KeepOffSVG from '@/assets/icons/ui-kit/keep_off.svg';
-import LeaveSVG from '@/assets/icons/ui-kit/leave.svg';
-import LinkIcon from '@/assets/icons/ui-kit/link.svg';
-import MoreSVG from '@/assets/icons/ui-kit/more_horiz.svg';
-import PrintIcon from '@/assets/icons/ui-kit/print.svg';
-import SharedIcon from '@/assets/icons/ui-kit/shared.svg';
-import DeleteIcon from '@/assets/icons/ui-kit/trash.svg';
 import { usePresenterStore } from '@/docs/doc-presenter/stores';
 import { useAuth } from '@/features/auth';
+import ContentCopyIcon from '@/icons/copy.svg';
+import DownloadSVG from '@/icons/download.svg';
+import HistorySVG from '@/icons/history.svg';
+import LeaveSVG from '@/icons/leave.svg';
+import LinkIcon from '@/icons/link.svg';
+import MoreSVG from '@/icons/more_horiz.svg';
+import PrintIcon from '@/icons/print.svg';
+import SharedIcon from '@/icons/shared.svg';
+import StarSlashIcon from '@/icons/star-slash.svg';
+import StarIcon from '@/icons/star.svg';
+import DeleteIcon from '@/icons/trash.svg';
 import { useFocusStore, useResponsiveStore } from '@/stores';

 import { printDocumentWithStyles } from '../../doc-export/utils_print';
@@ -167,11 +167,11 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
    },
    { type: 'separator' },
    {
-      label: doc.is_favorite ? t('Unpin') : t('Pin'),
+      label: doc.is_favorite ? t('Unstar') : t('Star'),
      icon: doc.is_favorite ? (
-        <KeepOffSVG width={18} height={18} aria-hidden="true" />
+        <StarSlashIcon width={18} height={18} aria-hidden="true" />
      ) : (
-        <KeepSVG width={18} height={18} aria-hidden="true" />
+        <StarIcon width={18} height={18} aria-hidden="true" />
      ),
      callback: () => {
        if (doc.is_favorite) {
@@ -181,7 +181,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
        }
      },
      isHidden: !doc.abilities.favorite,
-      testId: `docs-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
+      testId: `docs-actions-${doc.is_favorite ? 'unstar' : 'star'}-${doc.id}`,
    },
    {
      label: t('Duplicate', {
@@ -6,7 +6,6 @@ import { useDate } from '@/hooks/useDate';
 import DocsIcon from '@/icons/Docs.svg';
 import SubdocsIcon from '@/icons/Subdocs.svg';
 import ArrowIcon from '@/icons/arrow-corner-down-right.svg';
-import PinnedIcon from '@/icons/pinned.svg';
 import { useResponsiveStore } from '@/stores';

 import { useDocUtils, useTrans } from '../hooks';
@@ -26,13 +25,11 @@ const ItemTextCss = css`
 type SimpleDocItemProps = {
  doc: Doc;
  breadcrumb?: string;
-  isPinned?: boolean;
  showDate?: boolean;
 };

 export const SimpleDocItem = ({
  doc,
-  isPinned = false,
  showDate = false,
  breadcrumb,
 }: SimpleDocItemProps) => {
@@ -59,34 +56,7 @@ export const SimpleDocItem = ({
      className="--docs--simple-doc-item"
      aria-label={itemAriaLabel}
    >
-      {isPinned ? (
-        <Box
-          $position="relative"
-          data-testid={isPinned ? `doc-pinned-${doc.id}` : undefined}
-        >
-          <Icon
-            icon={
-              <DocsIcon
-                width={isSmallMobile ? '35px' : '40px'}
-                height={isSmallMobile ? '35px' : '40px'}
-                aria-hidden="true"
-                data-testid="doc-simple-icon"
-                color="var(--c--contextuals--content--semantic--info--tertiary)"
-              />
-            }
-            $shrink="0"
-          />
-
-          <PinnedIcon
-            width="16px"
-            height="16px"
-            style={{ position: 'absolute', top: 0, right: 0 }}
-            aria-hidden="true"
-            data-testid="doc-pinned-icon"
-            color="var(--c--contextuals--content--semantic--info--tertiary)"
-          />
-        </Box>
-      ) : isChild ? (
+      {isChild ? (
        <Icon
          icon={
            <SubdocsIcon
@@ -13,9 +13,10 @@ export const useTrans = () => {
  };

  const translatedFilters = {
-    [DocDefaultFilter.ALL_DOCS]: t('All docs'),
+    [DocDefaultFilter.ALL_DOCS]: t('Recent'),
    [DocDefaultFilter.MY_DOCS]: t('My docs'),
    [DocDefaultFilter.SHARED_WITH_ME]: t('Shared with me'),
+    [DocDefaultFilter.STARRED]: t('Starred'),
    [DocDefaultFilter.TRASHBIN]: t('Trashbin'),
  };

@@ -114,6 +114,7 @@ export enum DocDefaultFilter {
  ALL_DOCS = 'all_docs',
  MY_DOCS = 'my_docs',
  SHARED_WITH_ME = 'shared_with_me',
+  STARRED = 'starred',
  TRASHBIN = 'trashbin',
 }

@@ -28,7 +28,6 @@ export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
              <SimpleDocItem
                doc={doc}
                showDate
-                isPinned={doc.is_favorite}
                breadcrumb={filter === 'all' ? doc.parent?.title : undefined}
              />
            </Box>
@@ -2,7 +2,8 @@ import {
  DocDefaultFilter,
  DocsOrdering,
  useInfiniteDocs,
-} from '../../doc-management';
+  useInfiniteDocsFavorite,
+} from '@/docs/doc-management';

 import { useInfiniteDocsTrashbin } from './useDocsTrashbin';

@@ -19,6 +20,16 @@ export const useDocsGridQuery = (
    },
  );

+  const favoriteQuery = useInfiniteDocsFavorite(
+    {
+      page: 1,
+      ordering,
+    },
+    {
+      enabled: target === DocDefaultFilter.STARRED,
+    },
+  );
+
  const docsQuery = useInfiniteDocs(
    {
      page: 1,
@@ -29,9 +40,18 @@ export const useDocsGridQuery = (
        }),
    },
    {
-      enabled: target !== DocDefaultFilter.TRASHBIN,
+      enabled:
+        target !== DocDefaultFilter.TRASHBIN &&
+        target !== DocDefaultFilter.STARRED,
    },
  );

-  return target === DocDefaultFilter.TRASHBIN ? trashbinQuery : docsQuery;
+  switch (target) {
+    case DocDefaultFilter.TRASHBIN:
+      return trashbinQuery;
+    case DocDefaultFilter.STARRED:
+      return favoriteQuery;
+    default:
+      return docsQuery;
+  }
 };
@@ -4,13 +4,17 @@ import { useTranslation } from 'react-i18next';
 import { InView } from 'react-intersection-observer';
 import { css } from 'styled-components';

-import AllDocs from '@/assets/icons/doc-all.svg';
-import { Box, Card, Icon, Loading, Text } from '@/components';
+import { Box, Card, Loading, Text } from '@/components';
 import { FadeComponent } from '@/components/Effect';
 import { useImport } from '@/docs/doc-management/hooks/useImport';
 import { DocDefaultFilter, DocsOrdering } from '@/docs/doc-management/types';
 import DocsIcon from '@/icons/Docs.svg';
 import BinIcon from '@/icons/bin.svg';
+import ClockIcon from '@/icons/clock.svg';
+import SharedIcon from '@/icons/shared.svg';
+import StarIcon from '@/icons/star.svg';
+import TrashIcon from '@/icons/trash.svg';
+import UserIcon from '@/icons/user.svg';
 import { useResponsiveStore } from '@/stores';

 import { useDocsGridQuery } from '../api/useDocsGridQuery';
@@ -174,16 +178,19 @@ const DocGridTitleBar = ({
  const { t } = useTranslation();
  const { isDesktop } = useResponsiveStore();

-  let title = t('All docs');
-  let icon = <Icon icon={<AllDocs width={24} height={24} />} />;
+  let title = t('Recent');
+  let icon = <ClockIcon width={24} height={24} aria-hidden="true" />;
  if (target === DocDefaultFilter.MY_DOCS) {
-    icon = <Icon iconName="lock" />;
+    icon = <UserIcon width={24} height={24} aria-hidden="true" />;
    title = t('My docs');
  } else if (target === DocDefaultFilter.SHARED_WITH_ME) {
-    icon = <Icon iconName="group" />;
+    icon = <SharedIcon width={24} height={24} aria-hidden="true" />;
    title = t('Shared with me');
+  } else if (target === DocDefaultFilter.STARRED) {
+    icon = <StarIcon width={24} height={24} aria-hidden="true" />;
+    title = t('Starred');
  } else if (target === DocDefaultFilter.TRASHBIN) {
-    icon = <Icon iconName="delete" />;
+    icon = <TrashIcon width={24} height={24} aria-hidden="true" />;
    title = t('Trashbin');
  }

@@ -217,6 +224,7 @@ const DocGridNoDocs = ({ target }: { target: DocDefaultFilter }) => {
        DocDefaultFilter.ALL_DOCS,
        DocDefaultFilter.MY_DOCS,
        DocDefaultFilter.SHARED_WITH_ME,
+        DocDefaultFilter.STARRED,
      ].includes(target) && (
        <>
          <DocsIcon width={56} height={56} aria-hidden="true" />
@@ -8,14 +8,6 @@ import dynamic from 'next/dynamic';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';

-import ContentCopySVG from '@/assets/icons/ui-kit/content_copy.svg';
-import DeleteSVG from '@/assets/icons/ui-kit/delete.svg';
-import DocMoveInSVG from '@/assets/icons/ui-kit/doc-move-in.svg';
-import GroupSVG from '@/assets/icons/ui-kit/group.svg';
-import KeepSVG from '@/assets/icons/ui-kit/keep.svg';
-import KeepOffSVG from '@/assets/icons/ui-kit/keep_off.svg';
-import LeaveSVG from '@/assets/icons/ui-kit/leave.svg';
-import MoreSVG from '@/assets/icons/ui-kit/more_horiz.svg';
 import { Icon } from '@/components/Icon';
 import {
  Doc,
@@ -27,6 +19,14 @@ import {
  useRestoreDoc,
  useTrans,
 } from '@/docs/doc-management';
+import ContentCopyIcon from '@/icons/content_copy.svg';
+import DeleteIcon from '@/icons/delete.svg';
+import DocMoveInIcon from '@/icons/doc-move-in.svg';
+import GroupIcon from '@/icons/group.svg';
+import LeaveIcon from '@/icons/leave.svg';
+import MoreIcon from '@/icons/more_horiz.svg';
+import StarSlashIcon from '@/icons/star-slash.svg';
+import StarIcon from '@/icons/star.svg';
 import { focusMainContentStart } from '@/layouts/utils';
 import { useFocusStore } from '@/stores';

@@ -101,11 +101,11 @@ const DocsGridActionsGlobal = ({ doc }: { doc: Doc }) => {

  const options: DropdownMenuItem[] = [
    {
-      label: doc.is_favorite ? t('Unpin') : t('Pin'),
+      label: doc.is_favorite ? t('Unstar') : t('Star'),
      icon: doc.is_favorite ? (
-        <KeepOffSVG width={24} height={24} aria-hidden="true" />
+        <StarSlashIcon width={18} height={18} aria-hidden="true" />
      ) : (
-        <KeepSVG width={24} height={24} aria-hidden="true" />
+        <StarIcon width={18} height={18} aria-hidden="true" />
      ),
      callback: () => {
        if (doc.is_favorite) {
@@ -114,12 +114,12 @@ const DocsGridActionsGlobal = ({ doc }: { doc: Doc }) => {
          makeFavoriteDoc.mutate({ id: doc.id });
        }
      },
-      testId: `docs-grid-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
+      testId: `docs-grid-actions-${doc.is_favorite ? 'unstar' : 'star'}-${doc.id}`,
      showSeparator: true,
    },
    {
      label: t('Share'),
-      icon: <GroupSVG width={24} height={24} aria-hidden="true" />,
+      icon: <GroupIcon width={18} height={18} aria-hidden="true" />,
      callback: () => {
        setIsModalShareOpen(true);
      },
@@ -128,7 +128,7 @@ const DocsGridActionsGlobal = ({ doc }: { doc: Doc }) => {
    },
    {
      label: t('Move into a doc'),
-      icon: <DocMoveInSVG width={24} height={24} aria-hidden="true" />,
+      icon: <DocMoveInIcon width={18} height={18} aria-hidden="true" />,
      callback: () => {
        setIsModalMoveOpen(true);
      },
@@ -137,7 +137,7 @@ const DocsGridActionsGlobal = ({ doc }: { doc: Doc }) => {
    },
    {
      label: t('Duplicate'),
-      icon: <ContentCopySVG width={24} height={24} aria-hidden="true" />,
+      icon: <ContentCopyIcon width={18} height={18} aria-hidden="true" />,
      isDisabled: !doc.abilities.duplicate,
      callback: () => {
        duplicateDoc({
@@ -150,14 +150,14 @@ const DocsGridActionsGlobal = ({ doc }: { doc: Doc }) => {
    },
    {
      label: t('Leave'),
-      icon: <LeaveSVG width={24} height={24} aria-hidden="true" />,
+      icon: <LeaveIcon width={18} height={18} aria-hidden="true" />,
      callback: () => {
        setIsModalLeaveOpen(true);
      },
    },
    {
      label: t('Delete'),
-      icon: <DeleteSVG width={24} height={24} aria-hidden="true" />,
+      icon: <DeleteIcon width={18} height={18} aria-hidden="true" />,
      callback: () => {
        setIsModalRemoveOpen(true);
      },
@@ -296,7 +296,7 @@ const DocsGridDropdown = ({ doc, options }: DocsGridDropdownProps) => {
          title: doc.title || untitledDocument,
        })}
        size="nano"
-        icon={<MoreSVG width={16} height={16} aria-hidden="true" />}
+        icon={<MoreIcon width={16} height={16} aria-hidden="true" />}
        color="neutral"
        variant="tertiary"
        onClick={(e) => {
@@ -20,16 +20,8 @@ export const DocsGridColumnName = ({
  ordering,
  setOrdering,
 }: DocsGridColumnNameProps) => {
-  const { t } = useTranslation();
-  const { isSmallMobile } = useResponsiveStore();
-
-  const canSort = target !== DocDefaultFilter.TRASHBIN;
-
-  const toggleOrdering = (field: 'title' | 'updated_at') => {
-    setOrdering((prevOrdering) =>
-      prevOrdering === field ? (`-${field}` as DocsOrdering) : field,
-    );
-  };
+  const canSort =
+    target !== DocDefaultFilter.TRASHBIN && target !== DocDefaultFilter.STARRED;

  return (
    <Box
@@ -40,51 +32,109 @@ export const DocsGridColumnName = ({
      `}
      data-testid="docs-grid-header"
    >
+      {canSort ? (
+        <DocGridColumnWithSort ordering={ordering} setOrdering={setOrdering} />
+      ) : (
+        <DocGridColumnWithoutSort target={target} />
+      )}
+    </Box>
+  );
+};
+
+const DocGridColumnWithSort = ({
+  ordering,
+  setOrdering,
+}: {
+  ordering: DocsOrdering;
+  setOrdering: React.Dispatch<React.SetStateAction<DocsOrdering>>;
+}) => {
+  const { t } = useTranslation();
+  const { isSmallMobile } = useResponsiveStore();
+  const defaultOrdering: Record<'title' | 'updated_at', DocsOrdering> = {
+    title: 'title',
+    updated_at: '-updated_at',
+  };
+  const toggleOrdering = (field: 'title' | 'updated_at') => {
+    setOrdering((prevOrdering) => {
+      if (prevOrdering === field) {
+        return `-${field}` as DocsOrdering;
+      }
+      if (prevOrdering === `-${field}`) {
+        return field;
+      }
+      return defaultOrdering[field];
+    });
+  };
+
+  return (
+    <>
      <Box $padding={{ all: '3xs' }}>
-        {canSort ? (
-          <DocGridSortButton
-            label={t('Name')}
-            ariaLabel={t('Name')}
-            ordering={ordering}
-            field="title"
-            onClick={() => toggleOrdering('title')}
-          />
-        ) : (
-          <Text $size="xs" $variation="secondary" $weight="500">
-            {t('Name')}
-          </Text>
-        )}
+        <DocGridSortButton
+          label={t('Name')}
+          ariaLabel={t('Name')}
+          ordering={ordering}
+          field="title"
+          defaultOrdering={defaultOrdering.title}
+          onClick={() => toggleOrdering('title')}
+        />
      </Box>
      {!isSmallMobile && (
        <Box $padding={{ vertical: '3xs' }}>
-          {canSort ? (
-            <DocGridSortButton
-              label={
-                <Text
-                  $size="xs"
-                  $weight="500"
-                  $variation="secondary"
-                  $direction="row"
-                  $align="center"
-                  $gap="2xs"
-                >
-                  <ClockIcon width={16} height={16} aria-hidden="true" />{' '}
-                  {t('Last modified')}
-                </Text>
-              }
-              ariaLabel={t('Last modified')}
-              ordering={ordering}
-              field="updated_at"
-              onClick={() => toggleOrdering('updated_at')}
-            />
-          ) : (
-            <Text $size="xs" $weight="500" $variation="secondary">
-              {t('Days remaining')}
-            </Text>
-          )}
+          <DocGridSortButton
+            label={
+              <Text
+                $size="xs"
+                $weight="500"
+                $variation="secondary"
+                $direction="row"
+                $align="center"
+                $gap="2xs"
+              >
+                <ClockIcon width={16} height={16} aria-hidden="true" />{' '}
+                {t('Last modified')}
+              </Text>
+            }
+            ariaLabel={t('Last modified')}
+            ordering={ordering}
+            field="updated_at"
+            defaultOrdering={defaultOrdering.updated_at}
+            onClick={() => toggleOrdering('updated_at')}
+          />
        </Box>
      )}
-    </Box>
+    </>
+  );
+};
+
+const DocGridColumnWithoutSort = ({ target }: { target: DocDefaultFilter }) => {
+  const { t } = useTranslation();
+  const { isSmallMobile } = useResponsiveStore();
+
+  return (
+    <>
+      <Box $padding={{ all: '3xs' }}>
+        <Text $size="xs" $variation="secondary" $weight="500">
+          {t('Name')}
+        </Text>
+      </Box>
+      {!isSmallMobile && (
+        <Box $padding={{ vertical: '3xs' }}>
+          <Text
+            $size="xs"
+            $weight="500"
+            $variation="secondary"
+            $direction="row"
+            $align="center"
+            $gap="2xs"
+          >
+            <ClockIcon width={16} height={16} aria-hidden="true" />{' '}
+            {target === DocDefaultFilter.STARRED
+              ? t('Last modified')
+              : t('Days remaining')}
+          </Text>
+        </Box>
+      )}
+    </>
  );
 };

@@ -93,20 +143,22 @@ const DocGridSortButton = ({
  ariaLabel,
  field,
  ordering,
+  defaultOrdering,
  onClick,
 }: {
  label: ReactNode;
  ariaLabel: string;
  field: 'title' | 'updated_at';
  ordering: DocsOrdering;
+  defaultOrdering: DocsOrdering;
  onClick: () => void;
 }) => {
  const { t } = useTranslation();
-  const isDesc = ordering === `-${field}`;
-  const isActive = ordering === field || isDesc;
+  const isActive = ordering?.includes(field);
+  const isDesc = ordering !== defaultOrdering;

  return (
-    <Box $direction="row" $align="center" $gap="4xs">
+    <Box $direction="row" $align="center" $gap="2xs">
      <Text $size="xs" $weight="500" $variation="secondary">
        {label}
      </Text>
@@ -127,7 +179,7 @@ const DocGridSortButton = ({
        }
        iconPosition="right"
        icon={<ArrowUpDownIcon width={16} height={16} aria-hidden="true" />}
-        variant="tertiary"
+        variant={isDesc ? 'tertiary' : 'secondary'}
        color={isActive ? 'brand' : 'neutral'}
      />
    </Box>
@@ -11,6 +11,9 @@ import { useCunninghamTheme } from '@/cunningham';
 import { Doc, LinkReach, SimpleDocItem, useTrans } from '@/docs/doc-management';
 import { useLeftPanelStore } from '@/features/left-panel';
 import { useDate } from '@/hooks';
+import GlobeLockIcon from '@/icons/globe-lock.svg';
+import GlobeIcon from '@/icons/globe.svg';
+import StarIcon from '@/icons/star-filled.svg';
 import { useResponsiveStore } from '@/stores';

 import { DocsGridActions } from './DocsGridActions';
@@ -65,7 +68,11 @@ export const DocsGridItem = ({

        &:nth-child(1n):not(:last-child) {
          border-bottom: 1px solid
-            var(--c--contextuals--border--surface--primary);
+            color-mix(
+              in srgb,
+              var(--c--contextuals--border--surface--primary) 50%,
+              transparent
+            );
        }

        ${$css}
@@ -173,42 +180,38 @@ export const DocsGridItemTitle = ({
      $padding={{ right: isDesktop ? 'md' : '3xs' }}
      $maxWidth="100%"
    >
-      <SimpleDocItem
-        isPinned={doc.is_favorite}
-        doc={doc}
-        showDate={isSmallMobile}
-      />
-      {isShared && (
-        <Box
-          $padding={{ top: !isDesktop ? '4xs' : undefined }}
-          $css={
-            !isDesktop
-              ? css`
-                  align-self: flex-start;
-                `
-              : undefined
-          }
-        >
-          {withTooltip ? (
-            <Tooltip
-              content={
-                <Text $textAlign="center">
-                  {isPublic
-                    ? t('Accessible to anyone')
-                    : t('Accessible to authenticated users')}
-                </Text>
-              }
-              placement="top"
-            >
-              <Box>
-                <IconPublic isPublic={isPublic} />
-              </Box>
-            </Tooltip>
-          ) : (
-            <IconPublic isPublic={isPublic} />
-          )}
-        </Box>
-      )}
+      <SimpleDocItem doc={doc} showDate={isSmallMobile} />
+      <Box $direction="row" $align="center" $gap="3xs">
+        {doc.is_favorite && (
+          <>
+            <Icon
+              $layer="background"
+              $theme="neutral"
+              $variation="primary"
+              $size="sm"
+              icon={<StarIcon aria-hidden="true" width={16} height={16} />}
+            />
+            <span className="sr-only">{t('This document is starred')}</span>
+          </>
+        )}
+        {isShared && !withTooltip && <IconPublic isPublic={isPublic} />}
+        {isShared && withTooltip && (
+          <Tooltip
+            content={
+              <Text $textAlign="center">
+                {isPublic
+                  ? t('Accessible to anyone')
+                  : t('Accessible to authenticated users')}
+              </Text>
+            }
+            placement="top"
+          >
+            <Box>
+              <IconPublic isPublic={isPublic} />
+            </Box>
+          </Tooltip>
+        )}
+      </Box>
    </Box>
  );
 };
@@ -217,20 +220,24 @@ const IconPublic = ({ isPublic }: { isPublic: boolean }) => {
  const { t } = useTranslation();

  return (
-    <>
-      <Icon
-        $layer="background"
-        $theme="neutral"
-        $variation="primary"
-        $size="sm"
-        iconName={isPublic ? 'public' : 'vpn_lock'}
-      />
-      <span className="sr-only">
-        {isPublic
+    <Icon
+      $layer="background"
+      $theme="neutral"
+      $variation="primary"
+      $size="sm"
+      aria-label={
+        isPublic
          ? t('Accessible to anyone')
-          : t('Accessible to authenticated users')}
-      </span>
-    </>
+          : t('Accessible to authenticated users')
+      }
+      icon={
+        isPublic ? (
+          <GlobeIcon aria-hidden="true" width={16} height={16} />
+        ) : (
+          <GlobeLockIcon aria-hidden="true" width={16} height={16} />
+        )
+      }
+    />
  );
 };

@@ -2,11 +2,15 @@ import { usePathname, useSearchParams } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';

-import AllDocs from '@/assets/icons/doc-all.svg';
 import { Box, Icon, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocDefaultFilter } from '@/docs/doc-management';
 import { useLeftPanelStore } from '@/features/left-panel';
+import ClockIcon from '@/icons/clock.svg';
+import SharedIcon from '@/icons/shared.svg';
+import StarIcon from '@/icons/star.svg';
+import TrashIcon from '@/icons/trash.svg';
+import UserIcon from '@/icons/user.svg';
 import { useResponsiveStore } from '@/stores/useResponsiveStore';

 export const LeftPanelTargetFilters = () => {
@@ -23,22 +27,57 @@ export const LeftPanelTargetFilters = () => {

  const defaultQueries = [
    {
-      icon: <Icon icon={<AllDocs width={24} height={24} />} />,
-      label: t('All docs'),
+      icon: (
+        <Icon
+          icon={<ClockIcon width={20} height={20} aria-hidden="true" />}
+          $padding="4xs"
+          $variation="tertiary"
+        />
+      ),
+      label: t('Recent'),
      targetQuery: DocDefaultFilter.ALL_DOCS,
    },
    {
-      icon: <Icon iconName="lock" />,
+      icon: (
+        <Icon
+          icon={<UserIcon width={20} height={20} aria-hidden="true" />}
+          $padding="4xs"
+          $variation="tertiary"
+        />
+      ),
      label: t('My docs'),
      targetQuery: DocDefaultFilter.MY_DOCS,
    },
    {
-      icon: <Icon iconName="group" />,
+      icon: (
+        <Icon
+          icon={<SharedIcon width={20} height={20} aria-hidden="true" />}
+          $padding="4xs"
+          $variation="tertiary"
+        />
+      ),
      label: t('Shared with me'),
      targetQuery: DocDefaultFilter.SHARED_WITH_ME,
    },
    {
-      icon: <Icon iconName="delete" />,
+      icon: (
+        <Icon
+          icon={<StarIcon width={20} height={20} aria-hidden="true" />}
+          $padding="4xs"
+          $variation="tertiary"
+        />
+      ),
+      label: t('Starred'),
+      targetQuery: DocDefaultFilter.STARRED,
+    },
+    {
+      icon: (
+        <Icon
+          icon={<TrashIcon width={20} height={20} aria-hidden="true" />}
+          $padding="4xs"
+          $variation="tertiary"
+        />
+      ),
      label: t('Trashbin'),
      targetQuery: DocDefaultFilter.TRASHBIN,
    },
@@ -75,21 +114,19 @@ export const LeftPanelTargetFilters = () => {
            aria-current={isActive ? 'page' : undefined}
            onClick={handleFilterClick}
            $css={css`
-              display: flex;
              align-items: center;
              justify-content: flex-start;
-              gap: ${spacingsTokens['xs']};
-              padding: ${spacingsTokens['2xs']};
-              border-radius: ${spacingsTokens['3xs']};
+              gap: var(--c--globals--spacings--3xs);
+              padding: var(--c--globals--spacings--2xs);
+              border-radius: var(--c--globals--spacings--3xs);
              background-color: ${
                isActive
                  ? 'var(--c--contextuals--background--semantic--contextual--primary)'
                  : 'transparent'
              };
-              font-weight: ${isActive ? 700 : 400};
+              font-weight: 500;
              color: inherit;
              text-decoration: none;
-              cursor: pointer;
              &:hover {
                background-color: var(
                  --c--contextuals--background--semantic--contextual--primary
@@ -9,7 +9,6 @@ import { DocTree } from '@/features/docs/doc-tree/components/DocTree';
 import { TreeSkeleton } from '@/features/skeletons/components/TreeSkeleton';

 import { LeftPanelTargetFilters } from './LefPanelTargetFilters';
-import { LeftPanelFavorites } from './LeftPanelFavorites';

 export const LeftPanelContent = () => {
  const router = useRouter();
@@ -30,13 +29,6 @@ export const LeftPanelContent = () => {
            <LeftPanelTargetFilters />
          </SeparatedSection>
        </Box>
-        <Box
-          $flex={1}
-          $width="100%"
-          $css="overflow-y: auto; overflow-x: hidden;"
-        >
-          <LeftPanelFavorites />
-        </Box>
      </>
    );
  }
@@ -1,130 +0,0 @@
-import { DateTime } from 'luxon';
-import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
-
-import {
-  Box,
-  HorizontalSeparator,
-  InfiniteScroll,
-  StyledLink,
-  Text,
-} from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-import {
-  Doc,
-  SimpleDocItem,
-  useInfiniteDocsFavorite,
-} from '@/docs/doc-management';
-import { DocsGridActions } from '@/features/docs/docs-grid';
-import { useResponsiveStore } from '@/stores/useResponsiveStore';
-
-export const LeftPanelFavorites = () => {
-  const { t } = useTranslation();
-
-  const { spacingsTokens } = useCunninghamTheme();
-
-  const docs = useInfiniteDocsFavorite({
-    page: 1,
-  });
-
-  const favoriteDocs = docs.data?.pages.flatMap((page) => page.results) || [];
-
-  if (favoriteDocs.length === 0) {
-    return null;
-  }
-
-  return (
-    <Box as="section" className="--docs--left-panel-favorites">
-      <HorizontalSeparator $margin="none" />
-      <Box
-        $justify="center"
-        $padding={{ horizontal: 'sm', top: 'sm' }}
-        $gap={spacingsTokens['2xs']}
-        $height="100%"
-        data-testid="left-panel-favorites"
-      >
-        <Text
-          as="h2"
-          $size="sm"
-          $padding={{ horizontal: '3xs' }}
-          $weight="700"
-          $margin="0"
-        >
-          {t('Pinned documents')}
-        </Text>
-        <Box>
-          <Box as="ul" $padding="none" $margin={{ top: '4xs' }}>
-            {favoriteDocs.map((doc) => (
-              <LeftPanelFavoriteItem key={doc.id} doc={doc} />
-            ))}
-          </Box>
-          {docs.hasNextPage && (
-            <InfiniteScroll
-              hasMore={docs.hasNextPage}
-              isLoading={docs.isFetchingNextPage}
-              next={() => void docs.fetchNextPage()}
-              $padding="none"
-            />
-          )}
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-type LeftPanelFavoriteItemProps = {
-  doc: Doc;
-};
-
-export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
-  const { isLargeScreen } = useResponsiveStore();
-  const { t } = useTranslation();
-
-  return (
-    <Box
-      as="li"
-      $direction="row"
-      $align="center"
-      $justify="space-between"
-      $css={css`
-        padding: ${spacingsTokens['2xs']};
-        border-radius: 4px;
-        .pinned-actions {
-          opacity: ${isLargeScreen ? 0 : 1};
-        }
-        &:hover {
-          background-color: var(
-            --c--contextuals--background--semantic--contextual--primary
-          );
-          .pinned-actions {
-            opacity: 1;
-          }
-        }
-        &:focus-within {
-          cursor: pointer;
-          box-shadow: 0 0 0 2px ${colorsTokens['brand-400']} !important;
-          .pinned-actions {
-            opacity: 1;
-          }
-        }
-      `}
-      key={doc.id}
-      className="--docs--left-panel-favorite-item"
-    >
-      <StyledLink
-        href={`/docs/${doc.id}`}
-        $css={css`
-          overflow: auto;
-          outline: none !important;
-        `}
-        aria-label={`${doc.title}, ${t('Updated')} ${DateTime.fromISO(doc.updated_at).toRelative()}`}
-      >
-        <SimpleDocItem showDate doc={doc} />
-      </StyledLink>
-      <Box className="pinned-actions" $align="center">
-        <DocsGridActions doc={doc} />
-      </Box>
-    </Box>
-  );
-};