diff --git a/src/components/Email/Email.stories.tsx b/src/components/Email/Email.stories.tsx
index 31af5eb..6b11392 100644
--- a/src/components/Email/Email.stories.tsx
+++ b/src/components/Email/Email.stories.tsx
@@ -23,4 +23,10 @@ Default.args = {
       </tbody>
     </table>
   ),
+  classes: {
+    email: {
+      backgroundColor: 'gray',
+      color: 'white',
+    },
+  },
 };
diff --git a/src/components/Email/Email.tsx b/src/components/Email/Email.tsx
index 74afeda..d7304ab 100644
--- a/src/components/Email/Email.tsx
+++ b/src/components/Email/Email.tsx
@@ -1,14 +1,24 @@
 import { CSSProperties, ReactNode } from 'react';
+import { makeStyles } from '../../utils/makeStyles';
 
 export interface EmailProps {
   children?: ReactNode;
   className?: string;
-  style?: CSSProperties;
+  classes?: { email?: CSSProperties };
 }
 
-export const Email = ({ children, className, style }: EmailProps): JSX.Element => {
+const useStyles = makeStyles({
+  email: {
+    margin: '0px auto',
+    maxWidth: '600px',
+  },
+});
+
+export const Email = ({ children, className, classes }: EmailProps): JSX.Element => {
+  const styles = useStyles({ classes });
+
   return (
-    <div style={{ margin: '0px auto', maxWidth: '600px', ...style }} className={className}>
+    <div style={styles.email} className={className}>
       {children}
     </div>
   );