diff --git a/frontend/src/components/DiffViewer.tsx b/frontend/src/components/DiffViewer.tsx
index f360579..71563c3 100644
--- a/frontend/src/components/DiffViewer.tsx
+++ b/frontend/src/components/DiffViewer.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { createPatch } from 'diff';
 import { Box, SxProps } from '@mui/material';
-import * as Diff2Html from 'diff2html';
 import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui';
 import 'diff2html/bundles/css/diff2html.min.css';
 import './DiffViewer.css';
diff --git a/frontend/src/components/ui/ResumeInfo.css b/frontend/src/components/ui/ResumeInfo.css
index 8dfc86b..dd660f1 100644
--- a/frontend/src/components/ui/ResumeInfo.css
+++ b/frontend/src/components/ui/ResumeInfo.css
@@ -141,7 +141,7 @@
 .BackstoryResumeHeader {
   gap: 1rem;
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   /* border: 3px solid orange; */
 }
 
diff --git a/frontend/src/components/ui/ResumeInfo.tsx b/frontend/src/components/ui/ResumeInfo.tsx
index 3f5484f..22b06a9 100644
--- a/frontend/src/components/ui/ResumeInfo.tsx
+++ b/frontend/src/components/ui/ResumeInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Box,
   Typography,
@@ -410,103 +410,113 @@ const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }
   return (
     <Box className="BackstoryResumeHeader" sx={style.headerStyle}>
       <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
-        <Typography
-          variant="h4"
-          sx={{
-            fontWeight: 'bold',
-            mb: 1,
-            color: style.name === 'creative' ? '#ffffff' : style.color.primary,
-            fontFamily: 'inherit',
-          }}
-        >
-          {candidate.fullName}
-        </Typography>
-
-        {candidate.description && (
+        <Box sx={{ display: 'flex' }}>
           <Typography
-            variant="h6"
+            variant="h4"
             sx={{
-              mb: 2,
-              fontWeight: 300,
-              color: style.name === 'creative' ? '#ffffff' : style.color.secondary,
+              fontWeight: 'bold',
+              mb: 1,
+              color: style.name === 'creative' ? '#ffffff' : style.color.primary,
               fontFamily: 'inherit',
-              fontSize: '0.8rem !important',
             }}
           >
-            {candidate.description}
+            {candidate.fullName}
           </Typography>
-        )}
-      </Box>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 1,
+          }}
+        >
+          {candidate.description && (
+            <Box sx={{ display: 'flex' }}>
+              <Typography
+                variant="h6"
+                sx={{
+                  mb: 2,
+                  fontWeight: 300,
+                  color: style.name === 'creative' ? '#ffffff' : style.color.secondary,
+                  fontFamily: 'inherit',
+                  fontSize: '0.8rem !important',
+                }}
+              >
+                {candidate.description}
+              </Typography>
+            </Box>
+          )}
 
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          flexWrap: 'wrap',
-          alignContent: 'center',
-          flexGrow: 1,
-          minWidth: 'fit-content',
-          gap: 1,
-        }}
-      >
-        {candidate.email && (
-          <Box sx={{ display: 'flex', alignItems: 'center', m: 0, p: 0 }}>
-            <EmailIcon
-              fontSize="small"
-              sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
-            />
-            <Typography
-              variant="body2"
-              sx={{
-                color: style.name === 'creative' ? '#ffffff' : style.color.text,
-                fontFamily: 'inherit',
-              }}
-            >
-              {candidate.email}
-            </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              flexWrap: 'wrap',
+              alignContent: 'center',
+              flexGrow: 1,
+              minWidth: 'fit-content',
+              gap: 1,
+            }}
+          >
+            {candidate.email && (
+              <Box sx={{ display: 'flex', alignItems: 'center', m: 0, p: 0 }}>
+                <EmailIcon
+                  fontSize="small"
+                  sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
+                />
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: style.name === 'creative' ? '#ffffff' : style.color.text,
+                    fontFamily: 'inherit',
+                  }}
+                >
+                  {candidate.email}
+                </Typography>
+              </Box>
+            )}
+
+            {phone?.isValid() && (
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <PhoneIcon
+                  fontSize="small"
+                  sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
+                />
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: style.name === 'creative' ? '#ffffff' : style.color.text,
+                    fontFamily: 'inherit',
+                  }}
+                >
+                  {phone.formatInternational()}
+                </Typography>
+              </Box>
+            )}
+
+            {candidate.location && (
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <LocationIcon
+                  fontSize="small"
+                  sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
+                />
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: style.name === 'creative' ? '#ffffff' : style.color.text,
+                    fontFamily: 'inherit',
+                  }}
+                >
+                  {candidate.location.city
+                    ? `${candidate.location.city}, ${candidate.location.state}`
+                    : candidate.location.text}
+                </Typography>
+              </Box>
+            )}
           </Box>
-        )}
 
-        {phone?.isValid() && (
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <PhoneIcon
-              fontSize="small"
-              sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
-            />
-            <Typography
-              variant="body2"
-              sx={{
-                color: style.name === 'creative' ? '#ffffff' : style.color.text,
-                fontFamily: 'inherit',
-              }}
-            >
-              {phone.formatInternational()}
-            </Typography>
-          </Box>
-        )}
-
-        {candidate.location && (
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <LocationIcon
-              fontSize="small"
-              sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
-            />
-            <Typography
-              variant="body2"
-              sx={{
-                color: style.name === 'creative' ? '#ffffff' : style.color.text,
-                fontFamily: 'inherit',
-              }}
-            >
-              {candidate.location.city
-                ? `${candidate.location.city}, ${candidate.location.state}`
-                : candidate.location.text}
-            </Typography>
-          </Box>
-        )}
-      </Box>
-
-      {/* {(candidate.website || candidate.linkedin) && (
+          {/* {(candidate.website || candidate.linkedin) && (
           <Grid size={{ xs: 12, sm: 6, md: 3 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
               <WebsiteIcon
@@ -525,6 +535,8 @@ const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }
             </Box>
           </Grid>
         )} */}
+        </Box>
+      </Box>
     </Box>
   );
 };
@@ -563,7 +575,9 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
     }
   }, [resume, activeResume]);
 
-  const currentStyle = resumeStyles[selectedStyle];
+  const currentStyle = useMemo(() => {
+    return resumeStyles[selectedStyle];
+  }, [selectedStyle]);
 
   // Rest of the component remains the same...
   const deleteResume = async (id: string | undefined): Promise<void> => {