diff --git a/package.json b/package.json
index 7ab94d8..1133e0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
diff --git a/src/components/list/List.tsx b/src/components/list/List.tsx
index f6fa515..56f70e6 100644
--- a/src/components/list/List.tsx
+++ b/src/components/list/List.tsx
@@ -33,6 +33,7 @@ export interface ListProps<T, F> {
   disableItemCompositionStyles?: boolean;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
+  headerBackgroundColor?: string;
   keyBoardShortcutActions?: {
     onShiftFKeysPressed?: () => void;
     onRKeyPressed?: () => void;
@@ -118,6 +119,9 @@ export interface ListProps<T, F> {
  * @property {() => void} [onMouseLeave]
  * - Optional callback triggered when the mouse leaves the list.
  *
+ * @property {string} [headerBackgroundColor]
+ * - Optional background color for the header.
+ *
  * @property {
  *              { onShiftFKeysPressed?: () => void; onRKeyPressed?: () => void; onBackspaceKeyPressed?: () => void }
  *           } [keyBoardShortcutActions]
@@ -151,6 +155,7 @@ const List = <T extends { id: number }, F extends keyof T>({
   disableItemCompositionStyles,
   onMouseEnter,
   onMouseLeave,
+  headerBackgroundColor = 'bg-surface',
   keyBoardShortcutActions,
   disableKeyboardShortcuts,
 }: ListProps<T, F>): JSX.Element => {
@@ -298,21 +303,23 @@ const List = <T extends { id: number }, F extends keyof T>({
     >
       {/* BODY */}
       <div id="scrollableList" className="flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto">
-        {!isEmptyState ? (
-          <ListHeader
-            selectedItems={selectedItems}
-            onTopSelectionCheckboxClick={onTopSelectionCheckboxClick}
-            items={items}
-            header={header}
-            orderBy={orderBy}
-            onOrderableColumnClicked={onOrderableColumnClicked}
-            menu={menu}
-            displayMenuDiv={displayMenuDiv}
-            isVerticalScrollbarVisible={isVerticalScrollbarVisible}
-            checkboxDataCy={checkboxDataCy}
-            onClose={onCloseContextMenu}
-          />
-        ) : null}
+        <div className={`sticky top-0 z-10 ${headerBackgroundColor}`}>
+          {!isEmptyState ? (
+            <ListHeader
+              selectedItems={selectedItems}
+              onTopSelectionCheckboxClick={onTopSelectionCheckboxClick}
+              items={items}
+              header={header}
+              orderBy={orderBy}
+              onOrderableColumnClicked={onOrderableColumnClicked}
+              menu={menu}
+              displayMenuDiv={displayMenuDiv}
+              isVerticalScrollbarVisible={isVerticalScrollbarVisible}
+              checkboxDataCy={checkboxDataCy}
+              onClose={onCloseContextMenu}
+            />
+          ) : null}
+        </div>
         {isEmptyState ? (
           emptyState
         ) : items.length > 0 && !forceLoading ? (
diff --git a/src/components/list/__test__/__snapshots__/List.test.tsx.snap b/src/components/list/__test__/__snapshots__/List.test.tsx.snap
index e37c6ba..96d46b1 100644
--- a/src/components/list/__test__/__snapshots__/List.test.tsx.snap
+++ b/src/components/list/__test__/__snapshots__/List.test.tsx.snap
@@ -14,69 +14,73 @@ exports[`List component > should match snapshot 1`] = `
           id="scrollableList"
         >
           <div
-            class="flex min-w-max h-12 shrink-0 flex-row px-5"
+            class="sticky top-0 z-10 bg-surface"
           >
             <div
-              class="flex h-full min-w-full flex-row items-center border-b border-gray-10"
+              class="flex min-w-max h-12 shrink-0 flex-row px-5"
             >
               <div
-                class="flex h-full flex-row items-center justify-between pr-4"
+                class="flex h-full min-w-full flex-row items-center border-b border-gray-10"
               >
-                <label
-                  class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+                <div
+                  class="flex h-full flex-row items-center justify-between pr-4"
                 >
-                  <div
-                    class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
+                  <label
+                    class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
                   >
-                    <svg
-                      class="absolute -inset-px"
-                      fill="none"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      width="20"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
                     >
-                      <rect
-                        fill="currentColor"
-                        height="2"
-                        rx="1"
-                        width="12"
-                        x="4"
-                        y="9"
-                      />
-                    </svg>
-                  </div>
-                  <input
-                    checked=""
-                    class="base-checkbox h-0 w-0 appearance-none opacity-0"
-                    readonly=""
-                    type="checkbox"
-                  />
-                </label>
-              </div>
-              <button
-                class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  100px cursor-pointer hover:text-gray-80"
-                data-cy="false"
-              >
-                <span
+                      <svg
+                        class="absolute -inset-px"
+                        fill="none"
+                        height="20"
+                        viewBox="0 0 20 20"
+                        width="20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <rect
+                          fill="currentColor"
+                          height="2"
+                          rx="1"
+                          width="12"
+                          x="4"
+                          y="9"
+                        />
+                      </svg>
+                    </div>
+                    <input
+                      checked=""
+                      class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                      readonly=""
+                      type="checkbox"
+                    />
+                  </label>
+                </div>
+                <button
+                  class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  100px cursor-pointer hover:text-gray-80"
                   data-cy="false"
                 >
-                  Name
-                </span>
-              </button>
-              <button
-                class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  50px cursor-pointer hover:text-gray-80"
-                data-cy="false"
-              >
-                <span
+                  <span
+                    data-cy="false"
+                  >
+                    Name
+                  </span>
+                </button>
+                <button
+                  class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  50px cursor-pointer hover:text-gray-80"
                   data-cy="false"
                 >
-                  Age
-                </span>
-              </button>
-              <div
-                class="flex h-full w-12 shrink-0"
-              />
+                  <span
+                    data-cy="false"
+                  >
+                    Age
+                  </span>
+                </button>
+                <div
+                  class="flex h-full w-12 shrink-0"
+                />
+              </div>
             </div>
           </div>
           <div>
@@ -208,69 +212,73 @@ exports[`List component > should match snapshot 1`] = `
         id="scrollableList"
       >
         <div
-          class="flex min-w-max h-12 shrink-0 flex-row px-5"
+          class="sticky top-0 z-10 bg-surface"
         >
           <div
-            class="flex h-full min-w-full flex-row items-center border-b border-gray-10"
+            class="flex min-w-max h-12 shrink-0 flex-row px-5"
           >
             <div
-              class="flex h-full flex-row items-center justify-between pr-4"
+              class="flex h-full min-w-full flex-row items-center border-b border-gray-10"
             >
-              <label
-                class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+              <div
+                class="flex h-full flex-row items-center justify-between pr-4"
               >
-                <div
-                  class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
+                <label
+                  class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
                 >
-                  <svg
-                    class="absolute -inset-px"
-                    fill="none"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    width="20"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
                   >
-                    <rect
-                      fill="currentColor"
-                      height="2"
-                      rx="1"
-                      width="12"
-                      x="4"
-                      y="9"
-                    />
-                  </svg>
-                </div>
-                <input
-                  checked=""
-                  class="base-checkbox h-0 w-0 appearance-none opacity-0"
-                  readonly=""
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <button
-              class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  100px cursor-pointer hover:text-gray-80"
-              data-cy="false"
-            >
-              <span
+                    <svg
+                      class="absolute -inset-px"
+                      fill="none"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        fill="currentColor"
+                        height="2"
+                        rx="1"
+                        width="12"
+                        x="4"
+                        y="9"
+                      />
+                    </svg>
+                  </div>
+                  <input
+                    checked=""
+                    class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                    readonly=""
+                    type="checkbox"
+                  />
+                </label>
+              </div>
+              <button
+                class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  100px cursor-pointer hover:text-gray-80"
                 data-cy="false"
               >
-                Name
-              </span>
-            </button>
-            <button
-              class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  50px cursor-pointer hover:text-gray-80"
-              data-cy="false"
-            >
-              <span
+                <span
+                  data-cy="false"
+                >
+                  Name
+                </span>
+              </button>
+              <button
+                class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  50px cursor-pointer hover:text-gray-80"
                 data-cy="false"
               >
-                Age
-              </span>
-            </button>
-            <div
-              class="flex h-full w-12 shrink-0"
-            />
+                <span
+                  data-cy="false"
+                >
+                  Age
+                </span>
+              </button>
+              <div
+                class="flex h-full w-12 shrink-0"
+              />
+            </div>
           </div>
         </div>
         <div>