diff --git a/packages/web/pages/settings/pinned-searches.tsx b/packages/web/pages/settings/pinned-searches.tsx
index 819278b78..a1b30b13f 100644
--- a/packages/web/pages/settings/pinned-searches.tsx
+++ b/packages/web/pages/settings/pinned-searches.tsx
@@ -18,7 +18,7 @@ import { applyStoredTheme } from '../../lib/themeUpdater'
 import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery'
 import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery'
 import { Label } from '../../lib/networking/fragments/labelFragment'
-import { Circle } from 'phosphor-react'
+import { CheckSquare, Circle, Square } from 'phosphor-react'
 import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
 
@@ -248,7 +248,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
   const labelId = `checkbox-label-${props.label.id}`
   return (
     <CheckboxButton
-      key={labelId}
+      itemKey={labelId}
       title={props.label.name}
       isSelected={props.isSelected}
       item={{
@@ -259,12 +259,6 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
       }}
       listAction={props.listAction}
     >
-      <input
-        type="checkbox"
-        checked={props.isSelected}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onChange={(event) => {}}
-      />
       <SpanBox css={{}}>{props.label.name}</SpanBox>
       <Circle size={9} color={props.label.color} weight="fill" />
     </CheckboxButton>
@@ -281,10 +275,11 @@ type SearchButtonProps = {
 }
 
 function SearchButton(props: SearchButtonProps): JSX.Element {
+  console.log(' ', props.search.name, props.isSelected)
   const searchId = `checkbox-search-${props.search.id}`
   return (
     <CheckboxButton
-      key={searchId}
+      itemKey={searchId}
       title={props.search.filter}
       isSelected={props.isSelected}
       item={{
@@ -295,19 +290,13 @@ function SearchButton(props: SearchButtonProps): JSX.Element {
       }}
       listAction={props.listAction}
     >
-      <input
-        type="checkbox"
-        checked={props.isSelected}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onChange={(e) => {}}
-      />
       <SpanBox css={{}}>{props.search.name}</SpanBox>
     </CheckboxButton>
   )
 }
 
 type CheckboxButtonProps = {
-  key: string
+  itemKey: string
   title: string
   isSelected: boolean
   item: PinnedSearch
@@ -338,7 +327,7 @@ function CheckboxButton(props: CheckboxButtonProps): JSX.Element {
   )
   return (
     <HStack
-      key={props.key}
+      key={props.itemKey}
       title={props.title}
       css={{
         px: '10px',
@@ -369,6 +358,11 @@ function CheckboxButton(props: CheckboxButtonProps): JSX.Element {
         event.preventDefault()
       }}
     >
+      {props.isSelected ? (
+        <CheckSquare size={20} weight="duotone" />
+      ) : (
+        <Square size={20} weight="duotone" />
+      )}
       {props.children}
     </HStack>
   )