diff --git a/client/src/App.css b/client/src/App.css
index fce3f79..d518089 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -113,11 +113,11 @@ body {
 
 #top5-workspace {
   position: absolute;
+  display: grid;
+  place-items: center;
   background-color: #c4c4c4;
-  left: 0%;
-  top: 10%;
   width: 100%;
-  height: 80%;
+  height: 76%;
 }
 
 #top5-statusbar {
@@ -139,7 +139,7 @@ body {
   left: 0%;
   top: 0%;
   width: 100%;
-  height: 10%;
+  height: 50px;
   font-size: 24pt;
   font-weight: bold;
   display: flex;
@@ -206,11 +206,24 @@ body {
 
 #workspace-home,
 #workspace-edit {
-  position: absolute;
-  left: 0%;
-  top: 0%;
-  width: 100%;
-  height: 100%;
+  background-color: #d4d4f5;
+  width: 90%;
+  height: 90%;
+  border: 2px solid black;
+  border-radius: 10px;
+}
+
+#name-bar {
+  width: 35%;
+  height: 5%;
+  font-size: 16pt;
+  margin: 5px;
+}
+
+#list-space {
+  background-color: #2c2f70;
+  width: 90%;
+  height: 60%;
 }
 
 #edit-numbering {
diff --git a/client/src/App.js b/client/src/App.js
index 3c8c383..d962133 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -7,7 +7,7 @@ import {
     HomeWrapper,
     LoginScreen,
     RegisterScreen,
-    WorkspaceScreen
+    WorkspaceWrapper
 } from './components'
 
 // This is our application's top-level component.
@@ -25,7 +25,7 @@ const App = () => {
                         <Route path="/" exact component={HomeWrapper} />
                         <Route path="/register/" exact component={RegisterScreen} />
                         <Route path="/login/" exact component={LoginScreen} />
-                        <Route path="/top5list/:id" exact component={WorkspaceScreen} />
+                        <Route path="/top5list/:id" exact component={WorkspaceWrapper} />
                     </Switch>
                 </GlobalStoreContextProvider>
             </AuthContextProvider>
diff --git a/client/src/components/AppBanner.js b/client/src/components/AppBanner.js
index a4f0282..1fefad0 100644
--- a/client/src/components/AppBanner.js
+++ b/client/src/components/AppBanner.js
@@ -2,7 +2,6 @@ import { useContext, useState } from 'react';
 import { Link } from 'react-router-dom'
 import AuthContext from '../auth';
 import { GlobalStoreContext } from '../store'
-import EditToolbar from './EditToolbar'
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -74,12 +73,7 @@ export default function AppBanner() {
 
     let editToolbar = "";
     let menu = loggedOutMenu;
-    if (auth.loggedIn) {
-        menu = loggedInMenu;
-        if (store.currentList) {
-            editToolbar = <EditToolbar />;
-        }
-    }
+    if (auth.loggedIn) { menu = loggedInMenu; }
     
     function getAccountMenu(loggedIn) {
         return <AccountCircle />;
diff --git a/client/src/components/EditToolbar.js b/client/src/components/EditToolbar.js
deleted file mode 100644
index 7676d70..0000000
--- a/client/src/components/EditToolbar.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useContext } from 'react'
-import { GlobalStoreContext } from '../store'
-import Button from '@mui/material/Button';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import CloseIcon from '@mui/icons-material/HighlightOff';
-
-/**
-    This toolbar is a functional React component that
-    manages the undo/redo/close buttons.
-*/
-function EditToolbar() {
-    const { store } = useContext(GlobalStoreContext);
-
-    function handleUndo() {
-        store.undo();
-    }
-    function handleRedo() {
-        store.redo();
-    }
-    function handleClose() {
-        store.closeCurrentList();
-    }
-    let editStatus = false;
-    if (store.isItemEditActive) {
-        editStatus = true;
-    }  
-    return (
-        <div id="edit-toolbar">
-            <Button 
-                disabled={store.canUndo() ? false : true}
-                id='undo-button'
-                onClick={handleUndo}
-                variant="contained">
-                    <UndoIcon />
-            </Button>
-            <Button 
-                disabled={store.canRedo() ? false : true}
-                id='redo-button'
-                onClick={handleRedo}
-                variant="contained">
-                    <RedoIcon />
-            </Button>
-            <Button 
-                disabled={editStatus}
-                id='close-button'
-                onClick={handleClose}
-                variant="contained">
-                    <CloseIcon />
-            </Button>
-        </div>
-    )
-}
-
-export default EditToolbar;
diff --git a/client/src/components/HomeScreen.js b/client/src/components/HomeScreen.js
index f2a4a16..2f23c41 100644
--- a/client/src/components/HomeScreen.js
+++ b/client/src/components/HomeScreen.js
@@ -1,14 +1,9 @@
 import React, { useContext, useEffect } from 'react';
-import { GlobalStoreContext } from '../store';
+import GlobalStoreContext from '../store';
 import AuthContext from '../auth'
 import DeleteModal from './DeleteModal.js';
 import ListCard from './ListCard.js';
-import { Box, IconButton } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import GroupIcon from '@mui/icons-material/Groups';
-import PersonIcon from '@mui/icons-material/Person';
-import FunctionsIcon from '@mui/icons-material/Functions';
-import SortIcon from '@mui/icons-material/Sort';
+import Toolbar from './Toolbar.js';
 import List from '@mui/material/List';
 /**
     This React component lists all the top5 lists in the UI.
@@ -42,32 +37,7 @@ const HomeScreen = () => {
     }
     return (
         <div id="top5-list-selector">
-            <div id="list-selector-heading">
-                <IconButton aria-label="home">
-                    <HomeIcon />
-                </IconButton>
-                <IconButton aria-label="all">
-                    <GroupIcon />
-                </IconButton>
-                <IconButton aria-label="user">
-                    <PersonIcon />
-                </IconButton>
-                <IconButton aria-label="community">
-                    <FunctionsIcon />
-                </IconButton>
-                <input type="text" id="search-bar" />
-                <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                    <IconButton
-                        size="large"
-                        aria-label="sort by"
-                        aria-haspopup="true"
-                        sx={{ color: 'black' }}
-                    >
-                        <p id="sort-by-text">SORT BY</p>
-                        <SortIcon />
-                    </IconButton>
-                </Box>
-            </div>
+            <Toolbar />
             <div id="list-selector-list">
                 {listCard}
             </div>
diff --git a/client/src/components/HomeWrapper.js b/client/src/components/HomeWrapper.js
index 8fa4d3b..c13491b 100644
--- a/client/src/components/HomeWrapper.js
+++ b/client/src/components/HomeWrapper.js
@@ -1,13 +1,14 @@
 import { useContext } from 'react'
+
+import AppBanner from './AppBanner'
 import HomeScreen from './HomeScreen'
 import SplashScreen from './SplashScreen'
-import AuthContext from '../auth'
-import AppBanner from './AppBanner'
 import Statusbar from './Statusbar'
 
+import AuthContext from '../auth'
+
 export default function HomeWrapper() {
     const { auth } = useContext(AuthContext);
-    console.log("HomeWrapper auth.loggedIn: " + auth.loggedIn);
     
     if (auth.loggedIn) {
         return (
diff --git a/client/src/components/ListCard.js b/client/src/components/ListCard.js
index f22c3f3..5f4a9c2 100644
--- a/client/src/components/ListCard.js
+++ b/client/src/components/ListCard.js
@@ -1,10 +1,9 @@
-import { useContext, useState } from 'react'
+import { useContext } from 'react'
 import { GlobalStoreContext } from '../store'
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import Stack from '@mui/material/Stack';
-import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 
 /**
@@ -14,7 +13,6 @@ import DeleteIcon from '@mui/icons-material/Delete';
 */
 function ListCard(props) {
     const { store } = useContext(GlobalStoreContext);
-    const [editActive, setEditActive] = useState(false);
     const { listInfo } = props;
 
     function handleOpenList(id) {
@@ -24,15 +22,9 @@ function ListCard(props) {
         store.setOpenedList(null);
     }
 
-    function handleToggleEdit(event) {
+    function handleLoadList(event, id) {
         event.stopPropagation();
-        toggleEdit();
-    }
-
-    function toggleEdit() {
-        let newActive = !editActive;
-        if (newActive) { store.setIsListNameEditActive(); }
-        setEditActive(newActive);
+        store.setCurrentList(id);
     }
 
     async function handleDeleteList(event, id) {
@@ -54,16 +46,12 @@ function ListCard(props) {
             }}
             button
             onClick={() => { handleOpenList(listInfo._id) }}
+            disableRipple={true}
         >
                 <Box sx={{ padding: 0, flexGrow: 1 }}>
                     <b style={{ fontSize:"20pt" }}>{listInfo.name}</b><br />
                     By: {listInfo.ownerName}<br />
-                    <u style={{color:"red", "fontWeight":"bold"}}>Edit</u>
-                </Box>
-                <Box>
-                    <IconButton onClick={handleToggleEdit} aria-label='edit'>
-                        <EditIcon />
-                    </IconButton>
+                    <u style={{color:"red", "fontWeight":"bold"}} onClick={(event) => handleLoadList(event, listInfo._id)}>Edit</u>
                 </Box>
                 <Box>
                     <IconButton onClick={(event) => {
@@ -89,6 +77,7 @@ function ListCard(props) {
                 }}
                 button
                 onClick={() => { handleCloseList() }}
+                disableRipple={true}
             >
                 <Box sx={{ padding: "0", flexGrow: 1 }}>
                     <b style={{ fontSize:"20pt" }}>{listInfo.name}</b><br />
@@ -119,25 +108,6 @@ function ListCard(props) {
             </ListItem>
     }
 
-    // if (editActive) {
-    //     cardElement =
-    //         <TextField
-    //             margin="normal"
-    //             required
-    //             fullWidth
-    //             id={"list-" + listInfo._id}
-    //             label="Top 5 List Name"
-    //             name="name"
-    //             autoComplete="Top 5 List Name"
-    //             className='list-card'
-    //             onKeyPress={handleKeyPress}
-    //             onChange={handleUpdateText}
-    //             defaultValue={listInfo.name}
-    //             inputProps={{style: {fontSize: 48}}}
-    //             InputLabelProps={{style: {fontSize: 24}}}
-    //             autoFocus
-    //         />
-    // }
     return cardElement;
 }
 
diff --git a/client/src/components/Statusbar.js b/client/src/components/Statusbar.js
index f1f3086..af932f0 100644
--- a/client/src/components/Statusbar.js
+++ b/client/src/components/Statusbar.js
@@ -8,8 +8,6 @@ import AddIcon from '@mui/icons-material/Add'
 */
 function Statusbar() {
     const { store } = useContext(GlobalStoreContext);
-    let text ="";
-    if (store.currentList) { text = store.currentList.name; }
 
     function handleCreateList() { store.createNewList(); }
 
diff --git a/client/src/components/Toolbar.js b/client/src/components/Toolbar.js
new file mode 100644
index 0000000..099b2e4
--- /dev/null
+++ b/client/src/components/Toolbar.js
@@ -0,0 +1,39 @@
+import { Box, IconButton } from '@mui/material';
+import HomeIcon from '@mui/icons-material/Home';
+import GroupIcon from '@mui/icons-material/Groups';
+import PersonIcon from '@mui/icons-material/Person';
+import FunctionsIcon from '@mui/icons-material/Functions';
+import SortIcon from '@mui/icons-material/Sort';
+
+function Toolbar() {
+    return (
+        <div id="list-selector-heading">
+            <IconButton aria-label="home">
+                <HomeIcon />
+            </IconButton>
+            <IconButton aria-label="all">
+                <GroupIcon />
+            </IconButton>
+            <IconButton aria-label="user">
+                <PersonIcon />
+            </IconButton>
+            <IconButton aria-label="community">
+                <FunctionsIcon />
+            </IconButton>
+            <input type="text" id="search-bar" />
+            <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+                <IconButton
+                    size="large"
+                    aria-label="sort by"
+                    aria-haspopup="true"
+                    sx={{ color: 'black' }}
+                >
+                    <p id="sort-by-text">SORT BY</p>
+                    <SortIcon />
+                </IconButton>
+            </Box>
+        </div>
+    )
+}
+
+export default Toolbar;
diff --git a/client/src/components/WorkspaceScreen.js b/client/src/components/WorkspaceScreen.js
index bcb7c7d..e4c7831 100644
--- a/client/src/components/WorkspaceScreen.js
+++ b/client/src/components/WorkspaceScreen.js
@@ -1,8 +1,8 @@
-import { useContext } from 'react'
-import Top5Item from './Top5Item.js'
+import { useContext } from 'react';
+import Top5Item from './Top5Item.js';
+import Toolbar from './Toolbar.js';
 import List from '@mui/material/List';
-import { Typography } from '@mui/material'
-import { GlobalStoreContext } from '../store/index.js'
+import { GlobalStoreContext } from '../store/index.js';
 /**
     This React component lets us edit a loaded list, which only
     happens when we are on the proper route.
@@ -10,32 +10,32 @@ import { GlobalStoreContext } from '../store/index.js'
 function WorkspaceScreen() {
     const { store } = useContext(GlobalStoreContext);
 
-    let editItems = "";
-    if (store.currentList) {
-        editItems = 
-            <List id="edit-items" sx={{ width: '100%', bgcolor: 'background.paper' }}>
-                {
-                    store.currentList.items.map((item, index) => (
-                        <Top5Item 
-                            key={'top5-item-' + (index+1)}
-                            text={item}
-                            index={index} 
-                        />
-                    ))
-                }
-            </List>;
-    }
+    let editItems = 
+        <List id="edit-items" sx={{ width: '100%', bgcolor: 'background.paper' }}>
+            {
+                store.currentList.items.map((item, index) => (
+                    <Top5Item 
+                        key={'top5-item-' + (index + 1)}
+                        text={item}
+                        index={index} 
+                    />
+                ))
+            }
+        </List>;
     return (
         <div id="top5-workspace">
             <div id="workspace-edit">
-                <div id="edit-numbering">
+                <input type="text" id="name-bar" value={store.currentList.name}/>
+                <div id="list-space">
+                {/* <div id="edit-numbering">
                     <div className="item-number"><Typography variant="h3">1.</Typography></div>
                     <div className="item-number"><Typography variant="h3">2.</Typography></div>
                     <div className="item-number"><Typography variant="h3">3.</Typography></div>
                     <div className="item-number"><Typography variant="h3">4.</Typography></div>
                     <div className="item-number"><Typography variant="h3">5.</Typography></div>
                 </div>
-                {editItems}
+                {editItems} */}
+                </div>
             </div>
         </div>
     )
diff --git a/client/src/components/WorkspaceWrapper.js b/client/src/components/WorkspaceWrapper.js
new file mode 100644
index 0000000..c092ef0
--- /dev/null
+++ b/client/src/components/WorkspaceWrapper.js
@@ -0,0 +1,15 @@
+import AppBanner from './AppBanner';
+import Toolbar from './Toolbar';
+import Statusbar from './Statusbar';
+import WorkspaceScreen from './WorkspaceScreen';
+
+export default function WorkspaceWrapper() {
+    return (
+        <div>
+            <AppBanner />
+            <Toolbar />
+            <WorkspaceScreen />
+            <Statusbar />
+        </div>
+    );
+}
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 60d273b..b5f2d60 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -1,6 +1,5 @@
 import AppBanner from './AppBanner'
 import DeleteModal from './DeleteModal'
-import EditToolbar from './EditToolbar'
 import ErrorModal from './ErrorModal'
 import HomeScreen from './HomeScreen'
 import HomeWrapper from './HomeWrapper'
@@ -10,15 +9,16 @@ import RegisterScreen from './RegisterScreen'
 import SplashScreen from './SplashScreen'
 import Statusbar from './Statusbar'
 import Top5Item from './Top5Item'
+import Toolbar from './Toolbar'
 import WorkspaceScreen from './WorkspaceScreen'
+import WorkspaceWrapper from './WorkspaceWrapper'
 /**
     This serves as a module so that we can import
     all the other components as we wish.
 */
 export { 
     AppBanner, 
-    DeleteModal, 
-    EditToolbar, 
+    DeleteModal,
     ErrorModal, 
     HomeScreen,
     HomeWrapper,
@@ -28,5 +28,7 @@ export {
     SplashScreen,
     Statusbar, 
     Top5Item, 
-    WorkspaceScreen 
+    Toolbar,
+    WorkspaceScreen,
+    WorkspaceWrapper
 }
diff --git a/server/package-lock.json b/server/package-lock.json
index c59844f..a00d9ed 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -211,9 +211,9 @@
       }
     },
     "camelcase": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
-      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.1.tgz",
+      "integrity": "sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA=="
     },
     "chalk": {
       "version": "4.1.2",
@@ -1002,19 +1002,19 @@
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
     "nodemon": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.14.tgz",
-      "integrity": "sha512-frcpDx+PviKEQRSYzwhckuO2zoHcBYLHI754RE9z5h1RGtrngerc04mLpQQCPWBkH/2ObrX7We9YiwVSYZpFJQ==",
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.15.tgz",
+      "integrity": "sha512-gdHMNx47Gw7b3kWxJV64NI+Q5nfl0y5DgDbiVtShiwa7Z0IZ07Ll4RLFo6AjrhzMtoEZn5PDE3/c2AbVsiCkpA==",
       "requires": {
-        "chokidar": "^3.2.2",
-        "debug": "^3.2.6",
+        "chokidar": "^3.5.2",
+        "debug": "^3.2.7",
         "ignore-by-default": "^1.0.1",
         "minimatch": "^3.0.4",
-        "pstree.remy": "^1.1.7",
+        "pstree.remy": "^1.1.8",
         "semver": "^5.7.1",
         "supports-color": "^5.5.0",
         "touch": "^3.1.0",
-        "undefsafe": "^2.0.3",
+        "undefsafe": "^2.0.5",
         "update-notifier": "^5.1.0"
       },
       "dependencies": {
@@ -1334,9 +1334,9 @@
       "integrity": "sha512-+gxdEOMA2J+AI+fVsCqeNn7Tgx3M9ZN9jdi95939l1IJ8cZsqS8sqpJyOkic2SJk+1+98Uwryt/gL6XDaV+UZA=="
     },
     "signal-exit": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.5.tgz",
-      "integrity": "sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ=="
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
+      "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ=="
     },
     "sliced": {
       "version": "1.0.1",
diff --git a/server/package.json b/server/package.json
index 362d516..52a2aa5 100644
--- a/server/package.json
+++ b/server/package.json
@@ -12,6 +12,6 @@
     "express": "^4.16.4",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^5.7.5",
-    "nodemon": "^2.0.14"
+    "nodemon": "^2.0.15"
   }
 }