diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 4cc1212c3..a6104dd01 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -155,20 +155,47 @@ const AppShelf = (props: any) => {
           }}
         >
           {categoryList.map((category, idx) => (
-            <Accordion.Item key={category} value={idx.toString()}>
+            <Accordion.Item
+              style={{
+                background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+              ${(config.settings.appOpacity || 100) / 100}`,
+                borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+              ${(config.settings.appOpacity || 100) / 100}`,
+              }}
+              key={category}
+              value={idx.toString()}
+            >
               <Accordion.Control>{category}</Accordion.Control>
               <Accordion.Panel>{getItems(category)}</Accordion.Panel>
             </Accordion.Item>
           ))}
           {/* Return the item for all services without category */}
           {noCategory && noCategory.length > 0 ? (
-            <Accordion.Item key="Other" value="Other">
+            <Accordion.Item
+              style={{
+                background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+              ${(config.settings.appOpacity || 100) / 100}`,
+                borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+              ${(config.settings.appOpacity || 100) / 100}`,
+              }}
+              key="Other"
+              value="Other"
+            >
               <Accordion.Control>{t('accordions.others.text')}</Accordion.Control>
               <Accordion.Panel>{getItems()}</Accordion.Panel>
             </Accordion.Item>
           ) : null}
           {downloadEnabled ? (
-            <Accordion.Item key="Downloads" value="Your downloads">
+            <Accordion.Item
+              style={{
+                background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+              ${(config.settings.appOpacity || 100) / 100}`,
+                borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+              ${(config.settings.appOpacity || 100) / 100}`,
+              }}
+              key="Downloads"
+              value="Your downloads"
+            >
               <Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control>
               <Accordion.Panel>
                 <Paper
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 7d675f5a8..e695a6653 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,10 +1,11 @@
-import { Box, createStyles, Group, Header as Head } from '@mantine/core';
+import { Box, createStyles, Group, Header as Head, useMantineColorScheme } from '@mantine/core';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
 
 import DockerMenuButton from '../../modules/docker/DockerModule';
 import SearchBar from '../../modules/search/SearchModule';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import { Logo } from './Logo';
+import { useConfig } from '../../tools/state';
 
 const HEADER_HEIGHT = 60;
 
@@ -23,9 +24,19 @@ const useStyles = createStyles((theme) => ({
 
 export function Header(props: any) {
   const { classes, cx } = useStyles();
+  const { config } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
 
   return (
-    <Head height="auto">
+    <Head
+      height="auto"
+      style={{
+        background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+      ${(config.settings.appOpacity || 100) / 100}`,
+        borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+      ${(config.settings.appOpacity || 100) / 100}`,
+      }}
+    >
       <Group p="xs" position="apart">
         <Box className={classes.hide}>
           <Logo style={{ fontSize: 22 }} />
