diff --git a/frontend/src/App.css b/frontend/src/App.css
index 49e0fe9..1769f14 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -4,6 +4,11 @@ div {
   word-break: break-word;
 }
 
+button {
+  overflow-wrap: initial;
+  word-break: initial;
+}
+
 .TabPanel {
   display: flex;
   height: 100%;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1bb2510..70c3e33 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -344,7 +344,7 @@ const App = () => {
   const [resume, setResume] = useState<MessageData | undefined>(undefined);
   const [facts, setFacts] = useState<MessageData | undefined>(undefined);
   const timerRef = useRef<any>(null);
-  const isDesktop = useMediaQuery('(min-width:600px)');
+  const isDesktop = useMediaQuery('(min-width:650px)');
   const prevIsDesktopRef = useRef<boolean>(isDesktop);
 
   const startCountdown = (seconds: number) => {
@@ -1113,68 +1113,78 @@ const App = () => {
         }}
       >
         <Toolbar>
-          {
-            <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "row" }}>
-              {
-                !isDesktop && 
-                  <IconButton
-                    sx={{ display: "flex", margin: 'auto 0px' }}
-                    size="large"
-                    edge="start"
-                    color="inherit"
-                    onClick={handleMenuToggle}
+          <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "row" }}>
+            {!isDesktop &&
+              <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "row" }}>
+                <IconButton
+                  sx={{ display: "flex", margin: 'auto 0px' }}
+                  size="large"
+                  edge="start"
+                  color="inherit"
+                  onClick={handleMenuToggle}
+                >
+                  <Tooltip title="Navigation">
+                    <MenuIcon />
+                  </Tooltip>
+                </IconButton>
+                <Tooltip title="Backstory">
+                  <Box
+                    sx={{ m: 1, gap: 1, display: "flex", flexDirection: "row", alignItems: "center", fontWeight: "bold", fontSize: "1.0rem", cursor: "pointer" }}
+                    onClick={() => { setTab(0); setMenuOpen(false); }}
                   >
-                    <Tooltip title="Navigation">
-                      <MenuIcon />
-                    </Tooltip>
-                  </IconButton>
-              }
+                    <Avatar sx={{
+                      width: 24,
+                      height: 24
+                    }}
+                      variant="rounded"
+                      alt="Backstory logo"
+                      src="/logo192.png" />
+                    BACKSTORY
+                  </Box>
+                </Tooltip>
+              </Box>
+            }
 
-              { menuOpen === false &&
-              <Tabs sx={{ display: "flex", flexGrow: 1 }} 
-                value={tab}           
+            {menuOpen === false && isDesktop &&
+              <Tabs sx={{ display: "flex", flexGrow: 1 }}
+                value={tab}
                 indicatorColor="secondary"
                 textColor="inherit"
                 variant="fullWidth"
                 allowScrollButtonsMobile
-                onChange={handleTabChange} 
+                onChange={handleTabChange}
                 aria-label="Backstory navigation">
-                  <Tab sx={{ fontSize: '1rem' }} label="Backstory"
-                    value={0}
-                    icon={
-                      <Avatar sx={{ 
-                        width: 24, 
-                        height: 24 
-                        }} 
-                        variant="rounded" 
-                        alt="Backstory logo"
-                        src="/logo192.png" />
-                    } 
-                    iconPosition="start" />
-                  { isDesktop && 
-                    <Tab 
-                      value={1}
-                      sx={{ fontSize: '1rem' }} wrapped 
-                      label="Resume Builder"
-                      />
+                <Tab sx={{ fontSize: '1rem' }} label="Backstory"
+                  value={0}
+                  icon={
+                    <Avatar sx={{
+                      width: 24,
+                      height: 24
+                    }}
+                      variant="rounded"
+                      alt="Backstory logo"
+                      src="/logo192.png" />
                   }
-                  {isDesktop && 
-                    <Tab
-                      value={2}
-                      sx={{ fontSize: '1rem' }} wrapped 
-                      label="Context Visualizer"
-                    />
-                  }
-                  <Tab 
-                    value={3}
-                    sx={{ fontSize: '1rem' }} label="About" />
-                  <Tab 
-                    value={4}
-                    sx={{ flexShrink: 1, flexGrow: 0, fontSize: '1rem' }} icon={<SettingsIcon />}/>
+                  iconPosition="start" />
+                <Tab
+                  value={1}
+                  sx={{ fontSize: '1rem' }} wrapped
+                  label="Resume Builder"
+                />
+                <Tab
+                  value={2}
+                  sx={{ fontSize: '1rem' }} wrapped
+                  label="Context Visualizer"
+                />
+                <Tab
+                  value={3}
+                  sx={{ fontSize: '1rem' }} label="About" />
+                <Tab
+                  value={4}
+                  sx={{ flexShrink: 1, flexGrow: 0, fontSize: '1rem' }} icon={<SettingsIcon />} />
               </Tabs>
             }
-            </Box>
-          }
+          </Box>
         </Toolbar>
 
       </AppBar>
diff --git a/frontend/src/DocumentViewer.tsx b/frontend/src/DocumentViewer.tsx
index 9f9a268..f5fba42 100644
--- a/frontend/src/DocumentViewer.tsx
+++ b/frontend/src/DocumentViewer.tsx
@@ -303,9 +303,9 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
           variant="fullWidth"
           sx={{ bgcolor: 'background.paper' }}
         >
-          <Tab label="Job Description" />
-          {(resume !== undefined || processing === "resume") && <Tab label="Resume" />}
-          {(facts !== undefined || processing === "facts") && <Tab label="Fact Check" />}
+          <Tab value={0} label="Job Description" />
+          {(resume !== undefined || processing === "resume") && <Tab value={1} label="Resume" />}
+          {(facts !== undefined || processing === "facts") && <Tab value={2} label="Fact Check" />}
         </Tabs>
 
         {/* Document display area */}