diff --git a/src/components/ChipList.tsx b/src/components/ChipList.tsx
index 14464554..6297bcf1 100644
--- a/src/components/ChipList.tsx
+++ b/src/components/ChipList.tsx
@@ -1,15 +1,9 @@
 import { Flex, Span } from 'honorable'
-import {
-  type ComponentProps,
-  type ReactElement,
-  useMemo,
-  useState,
-} from 'react'
+import { type ComponentProps, type ReactElement, useState } from 'react'
 
 import { HamburgerMenuCollapseIcon } from '../icons'
 
 import Chip, { type ChipProps } from './Chip'
-import { useFillLevel } from './contexts/FillLevelContext'
 
 type TransformFn<TValue> = (
   value: TValue
@@ -28,19 +22,6 @@ function ChipList<TValue = string>({
   ...props
 }: ChipListProps<TValue>): ReactElement {
   const [collapsed, setCollapsed] = useState(true)
-  const parentFillLevel = useFillLevel()
-  const fillLevelClassName = useMemo(() => {
-    switch (parentFillLevel) {
-      case 3:
-        return 'fill-three'
-      case 2:
-        return 'fill-two'
-      case 1:
-        return 'fill-one'
-      default:
-        return 'fill-zero'
-    }
-  }, [parentFillLevel])
 
   return (
     <Flex
@@ -65,7 +46,6 @@ function ChipList<TValue = string>({
               onClick={() => setCollapsed(false)}
               {...props}
               clickable
-              background={fillLevelClassName}
             >
               {`+${values.length - limit}`}
             </Chip>
@@ -75,7 +55,6 @@ function ChipList<TValue = string>({
               onClick={() => setCollapsed(true)}
               {...props}
               clickable
-              background={fillLevelClassName}
             >
               <HamburgerMenuCollapseIcon />
             </Chip>
diff --git a/src/components/ListBoxItemChipList.tsx b/src/components/ListBoxItemChipList.tsx
index ecd1b639..4edf93da 100644
--- a/src/components/ListBoxItemChipList.tsx
+++ b/src/components/ListBoxItemChipList.tsx
@@ -18,8 +18,6 @@ type ChipListProps = HTMLAttributes<HTMLDivElement> & {
 
 const ChipListUnstyled = forwardRef<HTMLDivElement, ChipListProps>(
   ({ chips, maxVisible = 3, showExtra = true, ...props }, ref) => {
-    const chipHue = 'lightest'
-
     if (!Array.isArray(chips)) {
       chips = []
     }
@@ -28,7 +26,7 @@ const ChipListUnstyled = forwardRef<HTMLDivElement, ChipListProps>(
       () =>
         chips
           .slice(0, maxVisible)
-          .map((chip, i) => cloneElement(chip, { hue: chipHue, key: i })),
+          .map((chip, i) => cloneElement(chip, { key: i })),
       [chips, maxVisible]
     )
     const restChips = useMemo(
@@ -56,12 +54,7 @@ const ChipListUnstyled = forwardRef<HTMLDivElement, ChipListProps>(
               </>
             }
           >
-            <Chip
-              size="small"
-              hue={chipHue}
-            >
-              {`+${restChips.length}`}
-            </Chip>
+            <Chip size="small">{`+${restChips.length}`}</Chip>
           </Tooltip>
         ) : null,
       [restChips, showExtra]
diff --git a/src/stories/ComboBox.stories.tsx b/src/stories/ComboBox.stories.tsx
index 81faad88..6ef459a4 100644
--- a/src/stories/ComboBox.stories.tsx
+++ b/src/stories/ComboBox.stories.tsx
@@ -5,16 +5,32 @@ import Fuse from 'fuse.js'
 
 import {
   AppIcon,
+  Card,
   Chip,
   ComboBox,
   ListBoxFooterPlus,
   ListBoxItem,
   ListBoxItemChipList,
-} from '../index'
+  WrapWithIf,
+} from '..'
 
 export default {
   title: 'Combo Box',
   component: 'ComboBox',
+  argTypes: {
+    onFillLevel: {
+      options: [0, 1, 2, 3],
+      control: {
+        type: 'select',
+        labels: {
+          0: '0',
+          1: '1',
+          2: '2',
+          3: "3 - Shouldn't be used",
+        },
+      },
+    },
+  },
 }
 
 const portrait = (
@@ -162,7 +178,7 @@ const ChipList = styled(ListBoxItemChipList)(({ theme }) => ({
   justifyContent: 'start',
 }))
 
-function Template() {
+function Template({ onFillLevel }: { onFillLevel: any }) {
   const [selectedKeys, setSelectedKeys] = useState(new Set<Key>())
   const [inputValue, setInputValue] = useState('')
 
@@ -203,49 +219,64 @@ function Template() {
   }
 
   return (
-    <Flex
-      flexDirection="column"
-      gap="large"
-      maxWidth={512}
-    >
-      <TagPicker>
-        <ComboBox
-          inputValue={inputValue}
-          onSelectionChange={onSelectionChange}
-          onInputChange={onInputChange}
-          inputProps={{ placeholder: 'Pick something' }}
-        >
-          {searchResults.map(({ item, score: _score, refIndex: _refIndex }) => (
-            <ListBoxItem
-              key={item.key}
-              label={item.label}
-              textValue={`${item.label} – ${item.description}`}
-              description={item.description}
-              leftContent={portrait}
-              selected={selectedKeys.has(item.key)}
-            />
-          ))}
-        </ComboBox>
-        <ChipList
-          maxVisible={Infinity}
-          chips={[...selectedKeys].map((key) => (
-            <Chip
-              size="small"
-              clickable
-              onClick={() => {
-                const newKeys = new Set(selectedKeys)
-
-                newKeys.delete(key)
-                setSelectedKeys(newKeys)
-              }}
-              closeButton
-            >
-              {(itemsByKey as any)[key]?.label}
-            </Chip>
-          ))}
+    <WrapWithIf
+      condition={onFillLevel > 0}
+      wrapper={
+        <Card
+          display="flex"
+          flexDirection="column"
+          gap="large"
+          padding="large"
+          fillLevel={onFillLevel}
         />
-      </TagPicker>
-    </Flex>
+      }
+    >
+      <Flex
+        flexDirection="column"
+        gap="large"
+        maxWidth={512}
+      >
+        <TagPicker>
+          <ComboBox
+            inputValue={inputValue}
+            onSelectionChange={onSelectionChange}
+            onInputChange={onInputChange}
+            inputProps={{ placeholder: 'Pick something' }}
+          >
+            {searchResults.map(
+              ({ item, score: _score, refIndex: _refIndex }) => (
+                <ListBoxItem
+                  key={item.key}
+                  label={item.label}
+                  textValue={`${item.label} – ${item.description}`}
+                  description={item.description}
+                  leftContent={portrait}
+                  selected={selectedKeys.has(item.key)}
+                />
+              )
+            )}
+          </ComboBox>
+          <ChipList
+            maxVisible={Infinity}
+            chips={[...selectedKeys].map((key) => (
+              <Chip
+                size="small"
+                clickable
+                onClick={() => {
+                  const newKeys = new Set(selectedKeys)
+
+                  newKeys.delete(key)
+                  setSelectedKeys(newKeys)
+                }}
+                closeButton
+              >
+                {(itemsByKey as any)[key]?.label}
+              </Chip>
+            ))}
+          />
+        </TagPicker>
+      </Flex>
+    </WrapWithIf>
   )
 }
 
diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx
index 95ab0b04..12acc431 100644
--- a/src/stories/Select.stories.tsx
+++ b/src/stories/Select.stories.tsx
@@ -1,4 +1,4 @@
-import { Div, Flex, H4 } from 'honorable'
+import { Flex, H4 } from 'honorable'
 import { type ComponentProps, type Key, forwardRef, useState } from 'react'
 import styled from 'styled-components'
 
@@ -18,11 +18,26 @@ import {
   SearchIcon,
   Select,
   SelectButton,
+  WrapWithIf,
 } from '../index'
 
 export default {
   title: 'Select',
   component: 'Select',
+  argTypes: {
+    onFillLevel: {
+      options: [0, 1, 2, 3],
+      control: {
+        type: 'select',
+        labels: {
+          0: '0',
+          1: '1',
+          2: '2',
+          3: "3 - Shouldn't be used",
+        },
+      },
+    },
+  },
 }
 
 const portrait = (
@@ -171,7 +186,7 @@ const CustomTriggerButton = styled(
   },
 }))
 
-function Template() {
+function Template({ onFillLevel }: { onFillLevel: any }) {
   const [selectedKey, setSelectedKey] = useState<Key>()
   const shownStep = 4
   const [shownLimit, setShownLimit] = useState<number>(shownStep)
@@ -202,8 +217,25 @@ function Template() {
       maxWidth={512}
     >
       {/* SINGLE SELECT */}
-      <Div>
-        <h4>Single select</h4>
+      <H4
+        subtitle
+        margin="0"
+        marginBottom="small"
+      >
+        Single select
+      </H4>
+      <WrapWithIf
+        condition={onFillLevel > 0}
+        wrapper={
+          <Card
+            display="flex"
+            flexDirection="column"
+            gap="large"
+            padding="large"
+            fillLevel={onFillLevel}
+          />
+        }
+      >
         <Select
           defaultOpen={false}
           label="Pick something"
@@ -227,8 +259,7 @@ function Template() {
             />
           ))}
         </Select>
-      </Div>
-      <Div>
+
         <Select
           label="Pick something"
           selectedKey={selectedKey}
@@ -255,9 +286,7 @@ function Template() {
             />
           ))}
         </Select>
-      </Div>
 
-      <Div>
         <Select
           label="Pick something"
           selectedKey={selectedKey}
@@ -288,54 +317,54 @@ function Template() {
             />
           ))}
         </Select>
-      </Div>
 
-      <Flex justifyContent="right">
-        <Select
-          label="Version"
-          selectedKey={selectedKey}
-          triggerButton={<CustomTriggerButton />}
-          width="max-content"
-          maxHeight={197}
-          placement="right"
-          onSelectionChange={(key) => {
-            setSelectedKey(key)
-          }}
-          onFooterClick={() => setShownLimit(shownLimit + shownStep)}
-          onOpenChange={(open) => {
-            if (!open) setShownLimit(shownStep)
-          }}
-          rightContent={
-            curItem && (
-              <ListBoxItemChipList
-                maxVisible={0}
-                showExtra
-                chips={curItem.chips}
-              />
-            )
-          }
-          dropdownFooter={
-            shownLimit < items.length && (
-              <ListBoxFooterPlus>View more</ListBoxFooterPlus>
-            )
-          }
-        >
-          {items.slice(0, shownLimit).map(({ key, chips, version }) => (
-            <ListBoxItem
-              key={key}
-              label={version}
-              textValue={version}
-              rightContent={
+        <Flex justifyContent="right">
+          <Select
+            label="Version"
+            selectedKey={selectedKey}
+            triggerButton={<CustomTriggerButton />}
+            width="max-content"
+            maxHeight={197}
+            placement="right"
+            onSelectionChange={(key) => {
+              setSelectedKey(key)
+            }}
+            onFooterClick={() => setShownLimit(shownLimit + shownStep)}
+            onOpenChange={(open) => {
+              if (!open) setShownLimit(shownStep)
+            }}
+            rightContent={
+              curItem && (
                 <ListBoxItemChipList
-                  maxVisible={1}
+                  maxVisible={0}
                   showExtra
-                  chips={chips}
+                  chips={curItem.chips}
                 />
-              }
-            />
-          ))}
-        </Select>
-      </Flex>
+              )
+            }
+            dropdownFooter={
+              shownLimit < items.length && (
+                <ListBoxFooterPlus>View more</ListBoxFooterPlus>
+              )
+            }
+          >
+            {items.slice(0, shownLimit).map(({ key, chips, version }) => (
+              <ListBoxItem
+                key={key}
+                label={version}
+                textValue={version}
+                rightContent={
+                  <ListBoxItemChipList
+                    maxVisible={1}
+                    showExtra
+                    chips={chips}
+                  />
+                }
+              />
+            ))}
+          </Select>
+        </Flex>
+      </WrapWithIf>
 
       {/* MULTIPLE SELECT */}
       <H4
@@ -345,12 +374,17 @@ function Template() {
       >
         Multiple select
       </H4>
-      <Card
-        display="flex"
-        flexDirection="column"
-        gap="large"
-        padding="large"
-        fillLevel={2}
+      <WrapWithIf
+        condition={onFillLevel > 0}
+        wrapper={
+          <Card
+            display="flex"
+            flexDirection="column"
+            gap="large"
+            padding="large"
+            fillLevel={onFillLevel}
+          />
+        }
       >
         <Select
           defaultOpen={false}
@@ -473,7 +507,7 @@ function Template() {
             ))}
           </Select>
         </Flex>
-      </Card>
+      </WrapWithIf>
     </Flex>
   )
 }