Container for holding buttons

src/components/manage-funds/ButtonContainer.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import DepositEthButton from './DepositEthButton';
+import WithdrawEthButton from './WithdrawEthButton';
+
+const Container = ({ children }) => {
+    return (
+        <Box
+            sx={{
+                display: 'inline-flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: '#D9D9D9',
+                borderRadius: '20px',
+                padding: '30px',
+                gap: '40px',
+                '& > *': {
+                    // Shift up to compensate for the the shadow on the buttons
+                    transform: 'translateY(-2px)',
+                  },
+            }}
+        >
+            {children}
+        </Box>
+    );
+};
+
+const ButtonContainer = () => {
+    return (
+        <Container>
+            <DepositEthButton />
+            <WithdrawEthButton />
+        </Container>
+    );
+};
+
+export default ButtonContainer;

src/components/manage-funds/ManageFunds.jsx

@@ -1,3 +1,4 @@
+import ButtonContainer from "./ButtonContainer";
 import DepositEthButton from "./DepositEthButton";
 import WithdrawEthButton from "./WithdrawEthButton";
 
@@ -8,10 +9,15 @@ export function ManageFunds() {
                 width: 1440,
                 height: 1024,
                 outline: '1px solid red',
+                backgroundColor: '#FFFFFF',
             }}
         >
-            <DepositEthButton />
-            <WithdrawEthButton />
+            <ButtonContainer
+                children={[
+                    <DepositEthButton />,
+                    <WithdrawEthButton />,
+                ]}
+            />
         </div>
     );
 }