diff --git a/src/apps/chat/components/composer/buttons/ButtonAttachCamera.tsx b/src/apps/chat/components/composer/buttons/ButtonAttachCamera.tsx
index e546760f7..87d0b0761 100644
--- a/src/apps/chat/components/composer/buttons/ButtonAttachCamera.tsx
+++ b/src/apps/chat/components/composer/buttons/ButtonAttachCamera.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import CameraAltOutlinedIcon from '@mui/icons-material/CameraAltOutlined';
 
@@ -12,6 +12,7 @@ import { CameraCaptureModal } from '../CameraCaptureModal';
 export const ButtonAttachCameraMemo = React.memo(ButtonAttachCamera);
 
 function ButtonAttachCamera(props: {
+  color?: ColorPaletteProp,
   isMobile?: boolean,
   disabled?: boolean,
   fullWidth?: boolean,
@@ -19,7 +20,7 @@ function ButtonAttachCamera(props: {
   onOpenCamera: () => void,
 }) {
   return props.isMobile ? (
-    <IconButton disabled={props.disabled} onClick={props.onOpenCamera}>
+    <IconButton color={props.color} disabled={props.disabled} onClick={props.onOpenCamera}>
       <AddAPhotoIcon />
     </IconButton>
   ) : (
@@ -30,8 +31,8 @@ function ButtonAttachCamera(props: {
       </Box>
     )}>
       <Button
-        variant='plain'
-        color='neutral'
+        variant={props.color ? 'soft' : 'plain'}
+        color={props.color || 'neutral'}
         disabled={props.disabled}
         fullWidth={props.fullWidth}
         startDecorator={<CameraAltOutlinedIcon />}
diff --git a/src/apps/chat/components/composer/buttons/ButtonAttachClipboard.tsx b/src/apps/chat/components/composer/buttons/ButtonAttachClipboard.tsx
index b7c7287aa..716ea104f 100644
--- a/src/apps/chat/components/composer/buttons/ButtonAttachClipboard.tsx
+++ b/src/apps/chat/components/composer/buttons/ButtonAttachClipboard.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
 import ContentPasteGoIcon from '@mui/icons-material/ContentPasteGo';
 
 import { KeyStroke } from '~/common/components/KeyStroke';
@@ -10,6 +10,7 @@ import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
 export const ButtonAttachClipboardMemo = React.memo(ButtonAttachClipboard);
 
 function ButtonAttachClipboard(props: {
+  color?: ColorPaletteProp,
   isMobile?: boolean,
   disabled?: boolean,
   fullWidth?: boolean,
@@ -17,7 +18,7 @@ function ButtonAttachClipboard(props: {
   onAttachClipboard: () => void,
 }) {
   return props.isMobile ? (
-    <IconButton disabled={props.disabled} onClick={props.onAttachClipboard}>
+    <IconButton color={props.color} disabled={props.disabled} onClick={props.onAttachClipboard}>
       <ContentPasteGoIcon />
     </IconButton>
   ) : (
@@ -29,8 +30,8 @@ function ButtonAttachClipboard(props: {
       </Box>
     )}>
       <Button
-        variant='plain'
-        color='neutral'
+        variant={props.color ? 'soft' : 'plain'}
+        color={props.color || 'neutral'}
         disabled={props.disabled}
         fullWidth={props.fullWidth}
         startDecorator={<ContentPasteGoIcon />}
diff --git a/src/apps/chat/components/composer/buttons/ButtonAttachNewDoc.tsx b/src/apps/chat/components/composer/buttons/ButtonAttachNewDoc.tsx
index f86feec04..c7cf02876 100644
--- a/src/apps/chat/components/composer/buttons/ButtonAttachNewDoc.tsx
+++ b/src/apps/chat/components/composer/buttons/ButtonAttachNewDoc.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
 
 import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
@@ -9,6 +9,7 @@ import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
 export const ButtonAttachNewMemo = React.memo(ButtonAttachNew);
 
 function ButtonAttachNew(props: {
+  color?: ColorPaletteProp,
   isMobile?: boolean,
   disabled?: boolean,
   fullWidth?: boolean,
@@ -16,7 +17,7 @@ function ButtonAttachNew(props: {
   onAttachNew: () => void,
 }) {
   return props.isMobile ? (
-    <IconButton disabled={props.disabled} onClick={props.onAttachNew}>
+    <IconButton color={props.color} disabled={props.disabled} onClick={props.onAttachNew}>
       <AddRoundedIcon />
     </IconButton>
   ) : (
@@ -29,8 +30,8 @@ function ButtonAttachNew(props: {
       </Box>
     )}>
       <Button
-        variant='plain'
-        color='neutral'
+        variant={props.color ? 'soft' : 'plain'}
+        color={props.color || 'neutral'}
         disabled={props.disabled}
         fullWidth={props.fullWidth}
         startDecorator={<AddRoundedIcon />}
diff --git a/src/apps/chat/components/composer/buttons/ButtonAttachScreenCapture.tsx b/src/apps/chat/components/composer/buttons/ButtonAttachScreenCapture.tsx
index 79c3db655..721e6deed 100644
--- a/src/apps/chat/components/composer/buttons/ButtonAttachScreenCapture.tsx
+++ b/src/apps/chat/components/composer/buttons/ButtonAttachScreenCapture.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
 import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
 
 import { Is } from '~/common/util/pwaUtils';
@@ -11,6 +11,7 @@ import { takeScreenCapture } from '~/common/util/screenCaptureUtils';
 export const ButtonAttachScreenCaptureMemo = React.memo(ButtonAttachScreenCapture);
 
 function ButtonAttachScreenCapture(props: {
+  color?: ColorPaletteProp,
   isMobile?: boolean,
   disabled?: boolean,
   fullWidth?: boolean,
@@ -41,7 +42,7 @@ function ButtonAttachScreenCapture(props: {
 
 
   return props.isMobile ? (
-    <IconButton disabled={props.disabled} onClick={handleTakeScreenCapture}>
+    <IconButton color={props.color} disabled={props.disabled} onClick={handleTakeScreenCapture}>
       <ScreenshotMonitorIcon />
     </IconButton>
   ) : (
@@ -55,8 +56,8 @@ function ButtonAttachScreenCapture(props: {
       </Box>
     )}>
       <Button
-        variant={capturing ? 'solid' : 'plain'}
-        color={!!error ? 'danger' : 'neutral'}
+        variant={capturing ? 'solid' : props.color ? 'soft' : 'plain'}
+        color={!!error ? 'danger' : props.color || 'neutral'}
         disabled={props.disabled}
         fullWidth={props.fullWidth}
         loading={capturing}
diff --git a/src/apps/chat/components/composer/buttons/ButtonAttachWeb.tsx b/src/apps/chat/components/composer/buttons/ButtonAttachWeb.tsx
index 0730ed7c5..5efc3cee7 100644
--- a/src/apps/chat/components/composer/buttons/ButtonAttachWeb.tsx
+++ b/src/apps/chat/components/composer/buttons/ButtonAttachWeb.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
 import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
 
 import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
@@ -10,6 +10,7 @@ import { KeyStroke } from '~/common/components/KeyStroke';
 export const ButtonAttachWebMemo = React.memo(ButtonAttachWeb);
 
 function ButtonAttachWeb(props: {
+  color?: ColorPaletteProp,
   isMobile?: boolean,
   disabled?: boolean,
   fullWidth?: boolean,
@@ -18,13 +19,13 @@ function ButtonAttachWeb(props: {
 }) {
 
   const button = props.isMobile ? (
-    <IconButton disabled={props.disabled} onClick={props.onOpenWebInput}>
+    <IconButton color={props.color} disabled={props.disabled} onClick={props.onOpenWebInput}>
       <LanguageRoundedIcon />
     </IconButton>
   ) : (
     <Button
-      variant='plain'
-      color='neutral'
+      variant={props.color ? 'soft' : 'plain'}
+      color={props.color || 'neutral'}
       disabled={props.disabled}
       fullWidth={props.fullWidth}
       startDecorator={<LanguageRoundedIcon />}
diff --git a/src/common/components/ButtonAttachFiles.tsx b/src/common/components/ButtonAttachFiles.tsx
index df19ae3b6..12de30ace 100644
--- a/src/common/components/ButtonAttachFiles.tsx
+++ b/src/common/components/ButtonAttachFiles.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { fileOpen, FileWithHandle } from 'browser-fs-access';
 
-import { Box, Button, IconButton, Tooltip } from '@mui/joy';
+import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
 import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
 
 import { KeyStroke } from '~/common/components/KeyStroke';
@@ -40,6 +40,7 @@ export async function openFileForAttaching(
 export const ButtonAttachFilesMemo = React.memo(ButtonAttachFiles);
 
 function ButtonAttachFiles(props: {
+  color?: ColorPaletteProp,
   multiple?: boolean,
   isMobile?: boolean,
   disabled?: boolean,
@@ -55,7 +56,7 @@ function ButtonAttachFiles(props: {
   }, [onAttachFiles, props.multiple]);
 
   return props.isMobile ? (
-    <IconButton disabled={props.disabled} onClick={handleAttachFilePicker}>
+    <IconButton color={props.color} disabled={props.disabled} onClick={handleAttachFilePicker}>
       <AttachFileRoundedIcon />
     </IconButton>
   ) : (
@@ -67,8 +68,8 @@ function ButtonAttachFiles(props: {
       </Box>
     )}>
       <Button
-        variant='plain'
-        color='neutral'
+        variant={props.color ? 'soft' : 'plain'}
+        color={props.color || 'neutral'}
         disabled={props.disabled}
         fullWidth={props.fullWidth}
         onClick={handleAttachFilePicker}