diff --git a/components/custom/background/tile/tile.tsx b/components/custom/background/tile/tile.tsx
index 5af3285..eb55f46 100644
--- a/components/custom/background/tile/tile.tsx
+++ b/components/custom/background/tile/tile.tsx
@@ -6,11 +6,9 @@ import { TileContent } from './tileContent';
 type CardProps = {
   newsA?: z.infer<typeof NewsSchema>;
   newsB?: z.infer<typeof NewsSchema>;
-  width: number;
-  height: number;
 };
 
-export function Tile({ newsA, newsB, width, height }: CardProps) {
+export function Tile({ newsA, newsB }: CardProps) {
   const [switched, setSwitched] = useState(false);
   const [active, setActive] = useState(Math.random() < 0.5);
   const [delayed, setDelayed] = useState(true);
@@ -41,8 +39,8 @@ export function Tile({ newsA, newsB, width, height }: CardProps) {
       <div className='transform-gpu'>
         <div className={`absolute left-0 top-0 w-full ${''}`}>
           {active
-            ? TileContent({ story: newsA, width, height, side: true })
-            : TileContent({ story: newsB, width, height, side: false })}
+            ? TileContent({ story: newsA, side: true })
+            : TileContent({ story: newsB, side: false })}
         </div>
       </div>
     </div>
diff --git a/components/custom/background/tile/tileContent.tsx b/components/custom/background/tile/tileContent.tsx
index b30f7dc..f0c02d3 100644
--- a/components/custom/background/tile/tileContent.tsx
+++ b/components/custom/background/tile/tileContent.tsx
@@ -5,8 +5,6 @@ import { NewsSchema } from '../../../../utils/schemas';
 type CardContentProps = {
   story: z.infer<typeof NewsSchema>;
   side: boolean;
-  width: number;
-  height: number;
 };
 
 function getRandomColor() {
@@ -18,7 +16,7 @@ function getRandomColor() {
   return color;
 }
 
-export function TileContent({ story, width, height, side }: CardContentProps) {
+export function TileContent({ story, side }: CardContentProps) {
   const [firstColor, setFirstColor] = useState(getRandomColor());
   const [secondColor, setSecondColor] = useState(getRandomColor());
   const [switched, setSwitched] = useState(true);
@@ -34,11 +32,9 @@ export function TileContent({ story, width, height, side }: CardContentProps) {
 
   return (
     <div
-      className={`overflow-hidden p-6 shadow-sm`}
+      className={`h-40 w-40 overflow-hidden p-6 shadow-sm`}
       style={{
-        backgroundColor: `${color}`,
-        height: `${height * 4}px`,
-        width: `${width * 4}px`
+        backgroundColor: `${color}`
       }}
     >
       <h1 className='overflow-auto font-semibold'>{story.title}</h1>
diff --git a/components/custom/background/tile/tiles.tsx b/components/custom/background/tile/tiles.tsx
index d044a8e..6f0872f 100644
--- a/components/custom/background/tile/tiles.tsx
+++ b/components/custom/background/tile/tiles.tsx
@@ -21,9 +21,6 @@ export const Tiles = ({ children }: TilesProps) => {
   });
   const [news, setNews] = useState<z.infer<typeof NewsSchema>[]>();
 
-  const baseWidth = 40;
-  const baseHeight = 40;
-
   useEffect(() => {
     async function getNews() {
       const news = await fetch('/api/news').then(res => res.json());
@@ -66,20 +63,8 @@ export const Tiles = ({ children }: TilesProps) => {
     );
 
     return (
-      <div
-        key={key}
-        className={`m-1`}
-        style={{
-          height: `${baseHeight * 4}px`,
-          width: `${baseWidth * 4}px`
-        }}
-      >
-        <Tile
-          newsA={news[randomA]}
-          newsB={news[randomB]}
-          width={baseHeight}
-          height={baseHeight}
-        />
+      <div key={key} className={`m-1 h-40 w-40`}>
+        <Tile newsA={news[randomA]} newsB={news[randomB]} />
       </div>
     );
   }
@@ -93,8 +78,8 @@ export const Tiles = ({ children }: TilesProps) => {
   }
 
   function renderGrid() {
-    const columns = Math.ceil(windowSize.width / (baseWidth * 4));
-    const rows = Math.ceil(windowSize.height / (baseHeight * 4));
+    const columns = Math.ceil(windowSize.width / (40 * 4));
+    const rows = Math.ceil(windowSize.height / (40 * 4));
 
     return (
       <div>
diff --git a/components/emails/newsletter.tsx b/components/emails/newsletter.tsx
index 2d924e0..09de4a2 100644
--- a/components/emails/newsletter.tsx
+++ b/components/emails/newsletter.tsx
@@ -27,7 +27,7 @@ export default function NewsletterTemplate(
     subject: `What's new from Hackernews?`,
     template: (
       <Html>
-        <Section style={main}>
+        <Section className='bg-white'>
           <div className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'>
             <div className='text-center '>
               <h1 className='my-4 text-3xl font-bold'>Good day!</h1>
@@ -36,7 +36,13 @@ export default function NewsletterTemplate(
                 {sayings[Math.floor(Math.random() * sayings.length)]}:
               </p>
             </div>
-            <Container style={container}>
+            <Container
+              style={{
+                margin: '0 auto',
+                padding: '20px 0 48px',
+                width: '580px'
+              }}
+            >
               <Text>
                 {stories.map(story => {
                   return (
@@ -88,13 +94,3 @@ export default function NewsletterTemplate(
     )
   };
 }
-
-const main = {
-  backgroundColor: '#ffffff'
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-  width: '580px'
-};
diff --git a/components/emails/template.tsx b/components/emails/template.tsx
index f9d5290..d62308b 100644
--- a/components/emails/template.tsx
+++ b/components/emails/template.tsx
@@ -12,31 +12,26 @@ type EmailProps = {
 export default function Email({ title, body }: EmailProps) {
   return (
     <Html>
-      <Section
-        className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'
-        style={main}
-      >
-        <Container style={container}>
+      <Section className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'>
+        <Container
+          style={{
+            margin: '0 auto',
+            padding: '20px 0 48px',
+            width: '580px'
+          }}
+        >
           <h1 className='mt-4 text-center text-3xl font-bold'>{title}</h1>
-          <Text style={paragraph}>{body}</Text>
+          <Text
+            style={{
+              fontSize: '16px',
+              marginBottom: '16px'
+            }}
+          >
+            {body}
+          </Text>
         </Container>
         <Footer />
       </Section>
     </Html>
   );
 }
-
-const main = {
-  backgroundColor: '#ffffff'
-};
-
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-  width: '580px'
-};
-
-const paragraph = {
-  fontSize: '16px',
-  marginBottom: '16px'
-};