diff --git a/client/src/App.js b/client/src/App.js
index e05f839..81d8f7a 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -4,7 +4,7 @@ import { Container, styled } from '@mui/material';
 import { appContainerCss } from './styles/appCss';
 import { UserContext } from './context/UserContext';
 import Landing from './components/pages/login-page/Landing';
-import MainHeader from './components/pages/home-page/MainHeader';
+// import MainHeader from './components/pages/home-page/MainHeader';
 import Story from './components/pages/story/Story';
 import ViewStory from './components/pages/story/ViewStory';
 import WriteStory from './components/pages/story/WriteStory';
@@ -18,7 +18,7 @@ function App() {
   
   return (
     <AppContainer maxWidth='false' disableGutters>
-      <MainHeader />
+      {/* <MainHeader /> */}
       <Routes>
         <Route index element={ <Landing /> } />
         <Route path='home' element={ <HomePage /> } />
diff --git a/client/src/components/pages/home-page/Bookshelf.jsx b/client/src/components/pages/home-page/Bookshelf.jsx
index 86eb95a..fac88b9 100644
--- a/client/src/components/pages/home-page/Bookshelf.jsx
+++ b/client/src/components/pages/home-page/Bookshelf.jsx
@@ -1,11 +1,16 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Typography, styled, Container } from '@mui/material';
 import { noStoriesTextCss, storyCardContainerCss } from '../../../styles/homePageCss';
 import StoryCard from './StoryCard';
 import StoryControlPanel from './StoryControlPanel';
 
-const Bookshelf = ({ allStories, handleUpdateStories, handleUpdateUrl, bookshelfStories, noStories }) => {
+const Bookshelf = () => {
   const [expanded, setExpanded] = useState(null);
+  const [bookshelfStories, setBookshelfStories] = useState([]);
+  const [allStories, setAllStories] = useState([]);
+  const [noStories, setNoStories] = useState(false);
+  const [url, setUrl] = useState('/stories');
+
   // const [isScrollbar, setIsScrollbar] = useState(false);
 // console.log("is scrollbar visible?? ", isScrollbar)
   // useEffect(() => {
@@ -18,6 +23,34 @@ const Bookshelf = ({ allStories, handleUpdateStories, handleUpdateUrl, bookshelf
   //   }
   // }, [])
 
+  
+  useEffect(() => {
+    fetch(url).then((res) => {
+      res.json().then((stories) => {
+        if (stories.length > 0) {
+          setNoStories(false);
+          setAllStories(stories);
+          setBookshelfStories(stories);
+        } else {
+          setNoStories(true);
+        }
+      })
+    })
+  }, [url]);
+
+  const handleUpdateStories = (stories) => {
+    if (stories.length === 0) {
+      setNoStories(true);
+    } else {
+      setNoStories(false);
+      setBookshelfStories(stories);
+    }
+  };
+
+  const handleUpdateUrl = (newUrl) => {
+    setUrl(newUrl);
+  };
+
   const handleExpand = (storyId) => {
     if (expanded !== storyId) {
       setExpanded(storyId);
@@ -37,7 +70,7 @@ const Bookshelf = ({ allStories, handleUpdateStories, handleUpdateUrl, bookshelf
 
   return (
     <>
-        <Typography variant="h3">BOOKSHELF</Typography>
+        {/* <Typography variant="h3">BOOKSHELF</Typography> */}
         <StoryControlPanel
           allStories={ allStories }
           bookshelfStories={ bookshelfStories }
diff --git a/client/src/components/pages/home-page/HomePage.jsx b/client/src/components/pages/home-page/HomePage.jsx
index fda7422..40882de 100644
--- a/client/src/components/pages/home-page/HomePage.jsx
+++ b/client/src/components/pages/home-page/HomePage.jsx
@@ -1,74 +1,36 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Box, Button, Container, styled, Typography } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
-// import StoryControlPanel from './StoryControlPanel';
-import { dashboardCss, newStoryBtnCss, controlSectionCss, storiesSectionCss, welcomeTextCss, instructionsTextCss } from '../../../styles/homePageCss';
+import React, { useContext } from 'react';
 import { UserContext } from '../../../context/UserContext';
+import { Container, IconButton, Tooltip, Zoom, styled } from '@mui/material';
+import { dashboardCss, logoutBtn } from '../../../styles/homePageCss';
 import Bookshelf from './Bookshelf';
+import Welcome from './Welcome';
+import LogoutIcon from '@mui/icons-material/Logout';
+import { handleDELETE } from '../../../helpers/fetchRequests';
+import { useNavigate } from 'react-router-dom';
 
 const HomePage = () => {
-  const [bookshelfStories, setBookshelfStories] = useState([]);
-  const [allStories, setAllStories] = useState([]);
-  const [noStories, setNoStories] = useState(false);
-  const [url, setUrl] = useState('/stories');
-  const { user } = useContext(UserContext);
+  const { setUser } = useContext(UserContext);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    fetch(url).then((res) => {
-      res.json().then((stories) => {
-        if (stories.length > 0) {
-          setNoStories(false);
-          setAllStories(stories);
-          setBookshelfStories(stories);
-        } else {
-          setNoStories(true);
-        }
-      })
-    })
-  }, [url]);
-
-  const handleUpdateStories = (stories) => {
-    if (stories.length === 0) {
-      setNoStories(true);
-    } else {
-      setNoStories(false);
-      setBookshelfStories(stories);
-    }
-  };
-
-  const handleUpdateUrl = (newUrl) => {
-    setUrl(newUrl);
+  const handleLogout = () => {
+    handleDELETE('/logout')
+    .then(() => setUser(null))
+    .then(navigate('/'));
   };
 
   return (
     <Dashboard>
-      <ControlSection>
-        <WelcomeText>Welcome to Storyteller, {user.username}!</WelcomeText>
-        <InstructionsText>Choose a story from the Bookshelf, and pick up where the previous author left off. Or, being writing a new one to share with other authors.</InstructionsText>
-        <NewStoryBtn 
-          variant="contained"
-          onClick={ () => navigate('/story/new') } 
-        >
-          Create a New Story Here
-        </NewStoryBtn>
-        {/* <StoryControlPanel
-          allStories={ allStories }
-          bookshelfStories={ bookshelfStories }
-          noStories={ noStories }
-          onUpdateStories={ handleUpdateStories }
-          onUpdateUrl={ handleUpdateUrl }
-        /> */}
-      </ControlSection>
-      <StoriesSection>
-        <Bookshelf
-          allStories={ allStories }
-          onUpdateStories={ handleUpdateStories }
-          onUpdateUrl={ handleUpdateUrl }
-          bookshelfStories={ bookshelfStories }
-          noStories={ noStories }
-        />
-      </StoriesSection>
+      <Welcome />
+      <Bookshelf />
+      <Tooltip
+        title={`LOGOUT`}
+        placement="bottom"
+        TransitionComponent={Zoom}
+      >
+        <LogoutBtn onClick={ () => handleLogout() } >
+          <LogoutIcon />
+        </LogoutBtn>
+      </Tooltip>
     </Dashboard>
   )
 }
@@ -76,8 +38,4 @@ const HomePage = () => {
 export default HomePage
 
 const Dashboard = styled(Container)(dashboardCss);
-const ControlSection = styled(Box)(controlSectionCss);
-const WelcomeText = styled(Typography)(welcomeTextCss);
-const InstructionsText = styled(Typography)(instructionsTextCss);
-const StoriesSection = styled(Box)(storiesSectionCss);
-const NewStoryBtn = styled(Button)(newStoryBtnCss);
\ No newline at end of file
+const LogoutBtn = styled(IconButton)(logoutBtn);
\ No newline at end of file
diff --git a/client/src/components/pages/home-page/Welcome.jsx b/client/src/components/pages/home-page/Welcome.jsx
new file mode 100644
index 0000000..b6121b5
--- /dev/null
+++ b/client/src/components/pages/home-page/Welcome.jsx
@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import { newStoryBtnCss, welcomeTextCss, instructionsTextCss, welcomeSectionCss } from '../../../styles/homePageCss';
+import { Box, Button, styled, Typography } from '@mui/material';
+import { UserContext } from '../../../context/UserContext';
+import { useNavigate } from 'react-router-dom';
+
+const Welcome = () => {
+  const { user } = useContext(UserContext);
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <WelcomeSection>
+        <WelcomeText>Welcome to STORYTELLER, {user.username}!</WelcomeText>
+        <InstructionsText>Choose a story below, or create a new one.</InstructionsText>
+        <NewStoryBtn 
+          variant="contained"
+          onClick={ () => navigate('/story/new') } 
+          >
+          Create New Story
+        </NewStoryBtn>
+      </WelcomeSection>
+    </>
+  )
+}
+
+export default Welcome
+
+
+const WelcomeSection = styled(Box)(welcomeSectionCss);
+const WelcomeText = styled(Typography)(welcomeTextCss);
+const InstructionsText = styled(Typography)(instructionsTextCss);
+const NewStoryBtn = styled(Button)(newStoryBtnCss);
\ No newline at end of file
diff --git a/client/src/styles/homePageCss.js b/client/src/styles/homePageCss.js
index 8cd94b7..6da4c92 100644
--- a/client/src/styles/homePageCss.js
+++ b/client/src/styles/homePageCss.js
@@ -2,29 +2,43 @@ const dashboardCss = {
   display: 'flex',
   justifyContent: 'space-around',
   alignItems: 'center',
-  width: '100%',
+  flexDirection: 'column',
+  width: '90%',
+  height: '100%',
   '@media (max-width: 640px)': {
-    flexDirection: 'column',
   },
 };
 
-const controlSectionCss = {
-  width: '40%',
-  height: '90vh',
-  display: 'inherit',
-  flexDirection: 'column',
+const logoutBtn = {
+  position: 'absolute',
+  right: 20,
+  top: 20,
+};
+
+// const controlSectionCss = {
+//   // width: '40%',
+//   // height: '90vh',
+//   display: 'inherit',
+//   flexDirection: 'row',
+//   justifyContent: 'space-between',
+//   '@media (max-width: 640px)': {
+//     width: '90%',
+//     padding: '10px 0 0'
+//   },
+//   '@media (max-width: 400px)': {
+//     width: '98%',
+//   }
+// };
+
+const welcomeSectionCss = {
+  display: 'flex',
+  width: '100%',
   justifyContent: 'space-between',
-  '@media (max-width: 640px)': {
-    width: '90%',
-    padding: '10px 0 0'
-  },
-  '@media (max-width: 400px)': {
-    width: '98%',
-  }
+  margin: '20px auto',
 };
 
 const welcomeTextCss = {
-  fontSize: '1.7rem',
+  fontSize: '1.5rem',
   '@media (max-width: 640px)': {
     textAlign: 'center',
     fontSize: '1.4rem',
@@ -32,7 +46,7 @@ const welcomeTextCss = {
 }
 
 const instructionsTextCss = {
-  fontSize: '1.1rem',
+  fontSize: '1.2rem',
   lineHeight: '18px',
   margin: '10px 0 15px',
   '@media (max-width: 640px)': {
@@ -40,35 +54,35 @@ const instructionsTextCss = {
   },
 }
 
-const storiesSectionCss = ({ theme }) => `
-  background: ${theme.palette.primary.main};
-  border: 3px solid ${theme.palette.primary.dark};
-  border-radius: 3px;
-  text-align: center;
-  width: 50%;
-  min-width: 330px;
-  height: 90vh;
-  margin: 15px 0;
-  display: inherit;
-  flex-direction: column;
-  justify-content: space-around;
-  @media (max-width: 640px) {
-    width: 90%;
-  };
-  @media (max-width: 400px) {
-    width: 98%;
-    min-width: auto;
-  }
-`;
+// const storiesSectionCss = ({ theme }) => `
+//   background: ${theme.palette.primary.main};
+//   border: 3px solid ${theme.palette.primary.dark};
+//   border-radius: 3px;
+//   text-align: center;
+//   width: 50%;
+//   min-width: 330px;
+//   height: 90vh;
+//   margin: 15px 0;
+//   display: inherit;
+//   flex-direction: column;
+//   justify-content: space-around;
+//   @media (max-width: 640px) {
+//     width: 90%;
+//   };
+//   @media (max-width: 400px) {
+//     width: 98%;
+//     min-width: auto;
+//   }
+// `;
 
 const newStoryBtnCss = ({ theme }) => `
   color: ${theme.palette.secondary.dark};
-  width: 100%;
-  height: 50px;
+  // width: 100%;
+  // height: 50px;
   margin: 0 0 10px;
+  font-size: 1.2rem;
   :hover {
     color: ${theme.palette.secondary.light};
-    font-size: 1.2rem;
     @media only screen and (max-width: 790px) and (min-width: 640px) {
       font-size: 1.1rem;
       line-height: 20px;
@@ -132,10 +146,12 @@ const styledButtonGroupCss = {
 
 export { 
   dashboardCss,
-  controlSectionCss,
+  logoutBtn,
+  // controlSectionCss,
+  welcomeSectionCss,
   welcomeTextCss,
   instructionsTextCss,
-  storiesSectionCss,
+  // storiesSectionCss,
   newStoryBtnCss, 
   storyCardContainerCss, 
   storyCardAccordionCss,