diff --git a/Client/actionCreator/actionCreator.js b/Client/actionCreator/actionCreator.js
index ba3b919..16ea28e 100644
--- a/Client/actionCreator/actionCreator.js
+++ b/Client/actionCreator/actionCreator.js
@@ -7,15 +7,14 @@ export const updateExercisesFromAPI = (array) => ({
 
 export const updateUSER_LOG_ON = (userObj) => ({
   type: types.USER_LOG_ON,
-  payload: userObj
-})
+  payload: userObj,
+});
 
 export const updateUSER_LOG_OFF = () => ({
   type: types.USER_LOG_OFF,
-  payload: 'probably none'
-})
+});
 
 export const updateDifficultyAndMuscle = ([muscle, difficulty]) => ({
   type: types.UPDATE_MUSCLE_DIFFICULTY,
-  payload: [muscle, difficulty]
-})
\ No newline at end of file
+  payload: [muscle, difficulty],
+});
diff --git a/Client/components/login.jsx b/Client/components/login.jsx
index 028b740..3080ce0 100644
--- a/Client/components/login.jsx
+++ b/Client/components/login.jsx
@@ -36,17 +36,17 @@ const login = () => {
           alert(data.err);
         }
       })
-      .catch((error) => alert(error));
+      .catch((error) => alert('Invalid Username/Password'));
   };
 
   return (
     <div>
       <form>
-        <input type="text" id="usernameLogin" placeholder="Username"></input>
+        <input type='text' id='usernameLogin' placeholder='Username'></input>
         <input
-          type="password"
-          id="passwordLogin"
-          placeholder="Password"
+          type='password'
+          id='passwordLogin'
+          placeholder='Password'
         ></input>
         <button onClick={(event) => loginFunc(event)}>Login</button>
       </form>
diff --git a/Client/components/star-style.module.css b/Client/components/star-style.module.css
new file mode 100644
index 0000000..5f8ab1b
--- /dev/null
+++ b/Client/components/star-style.module.css
@@ -0,0 +1,14 @@
+.star_true {
+  /* represents on state  */
+  color: #d4af37;
+}
+
+.star_false {
+  /* represents off state  */
+  color: black;
+}
+
+.star-button {
+  background: none;
+  border: none;
+}
diff --git a/Client/containers/HeaderContainer.jsx b/Client/containers/HeaderContainer.jsx
index b80666c..2a60349 100644
--- a/Client/containers/HeaderContainer.jsx
+++ b/Client/containers/HeaderContainer.jsx
@@ -11,12 +11,22 @@
 
 import React from 'react';
 import * as actions from '../actionCreator/actionCreator.js';
+import { useDispatch } from 'react-redux';
 
 const HeaderContainer = () => {
+  const dispatch = useDispatch();
+
+  const logoutHandler = () => {
+    dispatch(actions.updateUSER_LOG_OFF());
+    document.getElementById('overlay').style.display = 'block';
+  };
+
   return (
-    <div className="appHeaderBox">
-      <h4 className="mainHeader">Stretch</h4>
-      <button className="logoutBtn">Logout</button>
+    <div className='appHeaderBox'>
+      <h4 className='mainHeader'>Stretch</h4>
+      <button onClick={logoutHandler} className='logoutBtn'>
+        Logout
+      </button>
     </div>
   );
 };
diff --git a/Client/containers/OldHeaderContainer.jsx b/Client/containers/OldHeaderContainer.jsx
deleted file mode 100644
index ab453e8..0000000
--- a/Client/containers/OldHeaderContainer.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import '../styles.css';
-
-{
-  /* This is the HeaderContainer in Client/containers/HeaderContainer.jsx */
-}
-
-const HeaderContainer = () => {
-  // insert any logic for the HeaderContainer here
-  return (
-    <div id="navBar">
-      <header>
-        <h1>Ready to get your stretch on?</h1>
-      </header>
-      <div id="flex-item"></div>
-      <div id="flex-item">
-        <p>Stretch.io</p>
-      </div>
-      <div id="flex-item">
-        <p>Sign Up / Log in</p>
-      </div>
-    </div>
-  );
-};
-
-// export default HeaderContainer;
diff --git a/Client/containers/OldMainContainer.jsx b/Client/containers/OldMainContainer.jsx
deleted file mode 100644
index ec08133..0000000
--- a/Client/containers/OldMainContainer.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import Stretch from '../components/Stretch.jsx';
-
-const MainContainer = () => {
-  // stretchesFromAPI is an array that holds a series of objects, where each object is a stretch we have pulled from our query to our server
-  let stretchesFromAPI = [{}, {}, {}];
-  // stretchFetch is an async func that accepts as a param a muscle from user input in search bar
-  const stretchFetch = async (muscle) => {
-    try {
-      // fetch request to server 3000
-      const response = await fetch(
-        `/api?muscle=${muscle}&type=stretching`
-      );
-      stretchesFromAPI = await response.json();
-      redirect('/');
-      return;
-    } catch (err) {
-      console.log('Error from stretchFetch in MainContainer.jsx');
-    }
-  };
-
-  // init stretchComponents as empty arr, this will store Stretch components before rendering
-  const stretchComponents = [];
-  // if stretchesFromAPI is not undefined/null, iterate through stretchesFromAPI and push a new TaskRow component with id and key properties
-  if (stretchesFromAPI) {
-    stretchesFromAPI.forEach((task) => {
-      stretchComponents.push(
-        <Stretch
-          name={'Stretch1'}
-          equipment={'insert equipment from API query here'}
-          difficulty={'insert difficulty from API query here'}
-          instructions={'insert instructions from API query here'}
-        ></Stretch>
-      );
-    });
-  }
-  // insert any logic for the MainContainer here, including (potentially):
-  return (
-    <div>
-      {/* this p tag just helps us see where this MainContainer is being rendered */}
-      <p>This is the MainContainer in Client/containers/MainContainer.jsx</p>
-      {/* insert search bar here (input textbox and submit button) */}
-      <form action="">
-      <label name='searchBar'>
-        Search:
-        <input id='searchQ' />
-      </label>
-
-      submit
-
-      </form>
-
-
-      {/* Stretch are individual search results from query to database/API */}
-      {stretchComponents}
-    </div>
-  );
-};
-// export default MainContainer;
diff --git a/Client/login and signup/WelcomeScreen.html b/Client/login and signup/WelcomeScreen.html
deleted file mode 100644
index f23d693..0000000
--- a/Client/login and signup/WelcomeScreen.html	
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Welcome to Flexios</title>
-    <!-- <script href="WelcomeScreen.js"></script> -->
-</head>
-<body>
-    <div id="welcome"></div>
-    <script href="WelcomeScreen.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/Client/login and signup/WelcomeScreen.js b/Client/login and signup/WelcomeScreen.js
deleted file mode 100644
index 7c3d3b4..0000000
--- a/Client/login and signup/WelcomeScreen.js	
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * ************************************
- *
- * @module  WelcomeScreen.jsx
- * @author Eivind Del Fierro, Morah Geist
- * @date 07/2023
- * @description index file to render app
- *
- * ************************************
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom/client'
-import LoginScreen from './loginScreen.jsx'
-import WelcomeScreen from '../containers/WelcomeScreen.jsx';
-
-// render app from App.jsx file on the html element with id of app in the index.html page
-const root = ReactDOM.createRoot(document.getElementById('welcome'));
-root.render(
-    <WelcomeScreen />
-);
\ No newline at end of file
diff --git a/Client/login and signup/signup-login.css b/Client/login and signup/signup-login.css
deleted file mode 100644
index bd743c4..0000000
--- a/Client/login and signup/signup-login.css	
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
-    background-color: whitesmoke;
-}
-
diff --git a/Client/login and signup/signup-login.html b/Client/login and signup/signup-login.html
deleted file mode 100644
index 32098e7..0000000
--- a/Client/login and signup/signup-login.html	
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <!-- the title is what is displayed on tab header -->
-    <title>Log In/Sign Up</title>
-    <link rel="stylesheet" href="./signup-login.css" />
-  </head>
-
-  <body>
-    <script>
-      function printMe(e) {
-        fileContents = document.getElementById('pw').value;
-        // e.preventDefault()
-        // document.getElementById("my-div").style.backgroundColor = "whtesmoke";
-        console.log(fileContents);
-      }
-      function SignUp() {
-        password1 = document.getElementByID('signup-pw').value;
-        password2 = document.getElementByID('');
-      }
-    </script>
-
-    <!-- website header and nav bar -->
-    <header>
-      <h1>Ready to get your stretch on?</h1>
-    </header>
-    <!-- Do you want to login -->
-    <h2>Log in</h2>
-    <form id="login">
-      <label for="email">Email address:</label>
-      <input type="text" id="email" /><br /><br />
-      <label for="password">Password:</label>
-      <input type="text" id="login-pw" name="pw" /><br /><br />
-      <button onClick="printMe()">Log in</button>
-    </form>
-    <!-- signup form -->
-    <form id="signup">
-      <label for="email">Email address:</label>
-      <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
-      <label for="password">Password:</label>
-      <input type="text" id="signup-pw" name="pw" />
-      <label for="password">Confirm Password:</label>
-      <input type="text" id="confirm-pw" name="password confirm" /><br /><br />
-      <button onClick="printMe()">Sign up</button>
-    </form>
-    <br />
-    <hr />
-    <p>Already have an account?</p>
-  </body>
-</html>
diff --git a/Client/reducers/stretchReducer.js b/Client/reducers/stretchReducer.js
index d9b010d..78e5050 100644
--- a/Client/reducers/stretchReducer.js
+++ b/Client/reducers/stretchReducer.js
@@ -15,31 +15,40 @@ const initialState = {
   loggedInUser: '',
   favorites: [],
   muscle: '',
-  difficulty: ''
+  difficulty: '',
 };
 
 const stretchReducer = (state = initialState, action) => {
   switch (action.type) {
     // Get's a list of exercises from the server and updates the array with objects of exercises
     case types.UPDATE_FROM_API: {
-      return {...state, exercisesFromAPI : action.payload};
+      return { ...state, exercisesFromAPI: action.payload };
     }
 
     // Logs user on
     case types.USER_LOG_ON: {
       // get authentication status of user
-      return {...state, loggedInUser: action.payload.username, favorites : action.payload.favorites}
-
+      document.getElementById('usernameLogin').value = '';
+      document.getElementById('passwordLogin').value = '';
+      document.getElementById('usernameSignup').value = '';
+      document.getElementById('passwordSignup').value = '';
+      document.getElementById('passwordSignupConfirm').value = '';
+      return {
+        ...state,
+        loggedInUser: action.payload.username,
+        favorites: action.payload.favorites,
+      };
     }
 
     // Logs user off
     case types.USER_LOG_OFF: {
-      return {...state, loggedInUser : ''}
+      // reset the state including the logged-in user
+      return { ...initialState };
     }
 
     case types.UPDATE_MUSCLE_DIFFICULTY: {
       const [muscle, difficulty] = action.payload;
-      return {...state, muscle:muscle, difficulty,difficulty}
+      return { ...state, muscle: muscle, difficulty, difficulty };
     }
     default:
       return state;
diff --git a/Client/stylesheets/_flexios.scss b/Client/stylesheets/_flexios.scss
index 6cb5239..631349d 100644
--- a/Client/stylesheets/_flexios.scss
+++ b/Client/stylesheets/_flexios.scss
@@ -112,5 +112,5 @@ li:last-child {
   bottom: 0;
   background-color: black;
   z-index: 2;
-  cursor: pointer;
+  // cursor: pointer;
 }
diff --git a/Client/stylesheets/styles.css b/Client/stylesheets/styles.css
deleted file mode 100644
index 75b60f9..0000000
--- a/Client/stylesheets/styles.css
+++ /dev/null
@@ -1,52 +0,0 @@
-@import url('https://fonts.cdnfonts.com/css/geomanist');
-* {
-  margin: none;
-  padding: none;
-}
-
-/* containers */
-.mainApp {
-  background-image: linear-gradient(to bottom right, #9b5668, #ce95a3);
-  font-family: 'Geomanist', sans-serif;
-  padding: 20px;
-}
-.stretchCont {
-  border: 2px solid #000;
-}
-/* dropdown menu */
-.muscle,
-.difficulty {
-  color: #fff;
-  padding: 10px;
-  font-size: 16px;
-  border: none;
-  cursor: pointer;
-}
-
-.stretchCard {
-  background-color: #6b68e7;
-  color: #fff;
-  border: 2px solid #fff;
-}
-
-#overlay {
-  position: fixed;
-  display: block;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: black;
-  z-index: 2;
-  cursor: pointer;
-}
-/* 
-#6b68e7
-#d1b1f9
-#79403a
-#c5a992
-#9b5668
-#ce95a3
-*/
diff --git a/package.json b/package.json
index 2ebb4d9..3393189 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "mongodb": "^5.6.0",
     "mongoose": "^6.8.0",
     "react": "^18.2.0",
-    "react-countdown-clock": "^2.10.0",
     "react-dom": "^18.2.0",
     "react-hot-loader": "^4.6.3",
     "react-redux": "^8.1.1",