diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx
index f511c6e8a..2506bef24 100644
--- a/packages/web/components/templates/article/Notebook.tsx
+++ b/packages/web/components/templates/article/Notebook.tsx
@@ -226,8 +226,6 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
         height: '100%',
         width: '100%',
         px: '20px',
-
-        bg: '$thLibrarySearchbox',
         '@mdDown': { p: '15px' },
       }}
     >
diff --git a/packages/web/components/templates/article/NotebookHeader.tsx b/packages/web/components/templates/article/NotebookHeader.tsx
index 5edeccd91..149e08a93 100644
--- a/packages/web/components/templates/article/NotebookHeader.tsx
+++ b/packages/web/components/templates/article/NotebookHeader.tsx
@@ -36,7 +36,7 @@ export const NotebookHeader = (props: NotebookHeaderProps) => {
         p: '20px',
         borderTopLeftRadius: '10px',
         overflow: 'clip',
-        background: '$thLibrarySearchbox',
+        background: '$thNotebookBackground',
         zIndex: 10,
         borderBottom: '1px solid $thNotebookBorder',
       }}
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index d1c0dbd17..d0260dd75 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -182,7 +182,6 @@ export function HighlightItemsLayout(
                 flexGrow: '1',
                 justifyContent: 'center',
                 overflowY: 'scroll',
-                bg: '$thLibrarySearchbox',
                 '@lgDown': {
                   display: 'none',
                   flexGrow: 'unset',