diff --git a/src/App.css b/src/App.css
index 74b5e05..bf773c6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #555555;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
diff --git a/src/App.js b/src/App.js
index 45ff38c..cd9b721 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,8 @@ import { createContext } from 'react';
 import './styles.css'
 
 export const AppContext = createContext();
+export const PRIMARY_COLOR = '#333';
+export const SECONDARY_COLOR = '#ffffff';
 
 function App() {
   const [token, setToken] = useState(localStorage.getItem('token'));
diff --git a/src/components/Boxes.js b/src/components/Boxes.js
index 1c6e6b6..888ceda 100644
--- a/src/components/Boxes.js
+++ b/src/components/Boxes.js
@@ -4,14 +4,22 @@ import { Container, Button, TextField, List, ListItem, ListItemText, IconButton
 import { Delete as DeleteIcon } from '@mui/icons-material';
 import { Link as RouterLink } from 'react-router-dom'; // Import Link from react-router-dom
 import axios from 'axios';
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 
 export default function Boxes({ token }) {
   const [boxes, setBoxes] = useState([]);
   const [newBoxName, setNewBoxName] = useState('');
   const apiUrl = `${process.env.REACT_APP_API_URL}/boxes`; 
-  console.log("URL is" + apiUrl)
+
+  const debugApi = () => {
+    if (process.env.DEBUG_API) {
+      console.log("URL is " + apiUrl);
+    }
+  };
+  debugApi();
+
   useEffect(() => {
-    console.log('Token:' + token);
+    //console.log('Token:' + token);
     axios.get(`${process.env.REACT_APP_API_URL}/boxes`, {
       headers: { Authorization: `Bearer ${token}` }
     }).then(response => {
@@ -21,7 +29,7 @@ export default function Boxes({ token }) {
 
   // Log boxes state changes outside the useEffect
   useEffect(() => {
-    console.log('Boxes updated:', boxes);
+    //console.log('Boxes updated:', boxes);
   }, [boxes]); 
 
   const handleCreateBox = () => {
@@ -50,7 +58,7 @@ export default function Boxes({ token }) {
         value={newBoxName}
         onChange={(e) => setNewBoxName(e.target.value)}
       />
-      <Button variant="contained" color="primary" onClick={handleCreateBox}>
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleCreateBox}>
         Add Box
       </Button>
       <List>
@@ -62,7 +70,7 @@ export default function Boxes({ token }) {
           }>
             <ListItemText 
               primary={
-                <RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name}}> {/* Use Link component */}
+                <RouterLink to={`/boxes/${box.ID}/items`} state={{ boxName: box.name, boxID: box.ID }}> {/* Use Link component */}
                   {box.name}
                 </RouterLink>
               } 
diff --git a/src/components/ItemDetails.js b/src/components/ItemDetails.js
index 575711e..2d9fc36 100644
--- a/src/components/ItemDetails.js
+++ b/src/components/ItemDetails.js
@@ -2,6 +2,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { TextField, Button, Container, Avatar } from '@mui/material';
 import axios from 'axios';
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 //import { useNavigate } from 'react-router-dom'; // Import useNavigate
 
 export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
@@ -165,7 +166,7 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
         style={{ display: 'none' }} 
         id="editItemImageUpload" // Unique ID
       />
-      <Button variant="contained" component="label" htmlFor="editItemImageUpload"> 
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" component="label" htmlFor="editItemImageUpload"> 
         Upload Image
         <input 
           type="file" 
@@ -179,10 +180,10 @@ export default function ItemDetails({ item, token, onSave, onClose, boxId }) {
         />
       </Button>
 
-      <Button variant="contained" color="primary" onClick={handleSave}>
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={handleSave}>
         Save Changes
       </Button>
-      <Button variant="contained" color="primary" onClick={onClose}>Close</Button>
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" onClick={onClose}>Close</Button>
     </Container>
   );
 }
\ No newline at end of file
diff --git a/src/components/Items.js b/src/components/Items.js
index aa1a982..4966b6d 100644
--- a/src/components/Items.js
+++ b/src/components/Items.js
@@ -19,7 +19,7 @@ import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
 import axios from 'axios';
 import { useParams, useLocation } from 'react-router-dom'; 
 import ItemDetails from './ItemDetails';
-
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 
 export default function Items({ token }) {
   const { id: boxId } = useParams(); 
@@ -30,11 +30,22 @@ export default function Items({ token }) {
   const [editingItem, setEditingItem] = useState(null);
   const location = useLocation();
   const boxName = location.state?.boxName || 'Unknown Box';
+  // const boxID = location.state?.boxId; // used in handleClose function
   const [itemImages, setItemImages] = useState({});
   const fileInputRef = useRef(null);
   const [openAddItemDialog, setOpenAddItemDialog] = useState(false); // For Add Item dialog
+  const { id } = useParams();
+  const boxID = id;
+  const url = boxId === undefined ? `${process.env.REACT_APP_API_URL}/items` : `${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`;
 
 
+  const debugLog = (message) => {
+    if (process.env.DEBUG_API) {
+      console.log(message);
+    }
+  };
+  debugLog("Box ID: " + boxID);
+
   // const handleSelectItem = (item) => {
   //   setSelectedItem(item);
   // };
@@ -63,7 +74,7 @@ export default function Items({ token }) {
           'Content-Type': 'multipart/form-data'
         }
       });
-      console.log('Image uploaded successfully!');
+      // console.log('Image uploaded successfully!');
       return response.data.imagePath; // Indicate successful upload
     } catch (error) {
       console.error('Image upload failed:', error);
@@ -82,7 +93,7 @@ export default function Items({ token }) {
           Authorization: `Bearer ${token}`
         }
       });
-      console.log('New item created:', newItemResponse.status);
+      //console.log('New item created:', newItemResponse.status);
 
       // 2. If item creation is successful, upload the image
       if (newItemResponse.status === 200 && fileInputRef.current.files[0]) {
@@ -90,7 +101,7 @@ export default function Items({ token }) {
         const uploadedImagePath = await handleImageUpload(newItemId, fileInputRef.current.files[0]);
 
         if (uploadedImagePath) {
-          console.log("Image path to save:", uploadedImagePath);
+          // console.log("Image path to save:", uploadedImagePath);
 
           // You might want to update your item in the backend with the image path
           // For example:
@@ -170,7 +181,7 @@ export default function Items({ token }) {
   }, [token]);
 
   const fetchItems = useCallback(() => {
-    axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`, {
+    axios.get( url, {
         headers: { Authorization: `Bearer ${token}` }
     }).then(response => {
         setItems(response.data);
@@ -185,7 +196,8 @@ export default function Items({ token }) {
           });
         });
     });
-  }, [boxId, token, getImageSrc]);
+  }, [token, getImageSrc, url]); 
+  // lint says I don't need boxId here
 
   useEffect(() => {
     fetchItems();
@@ -237,7 +249,7 @@ export default function Items({ token }) {
 
   return (
     <Container>
-      <h2>Items in Box: {boxName}</h2>
+<h2>Items in Box: {boxName === "Unknown Box" ? "All Boxes" : boxName}</h2>
 
       <input 
         type="file" 
@@ -247,7 +259,7 @@ export default function Items({ token }) {
         id="newItemImageUpload" // Unique ID
       />
 
-      <Button variant="contained" color="primary" onClick={handleAddItem}>
+      <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}variant="contained" color="primary" onClick={handleAddItem}>
         Add Item
       </Button>
 
diff --git a/src/components/Login.js b/src/components/Login.js
index 6a8288a..fdce747 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Button, TextField, Container, Typography, Alert } from '@mui/material';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom'; // Import useNavigate
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 
 export default function Login({ setToken }) {
   const [username, setUsername] = useState('');
@@ -51,7 +52,7 @@ export default function Login({ setToken }) {
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
-        <Button variant="contained" color="primary" type="submit" fullWidth>
+        <Button sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary" type="submit" fullWidth>
           Login
         </Button>
       </form>
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 16f5846..5ddb1af 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -3,12 +3,17 @@ import React from 'react';
 import { AppBar, Toolbar, Typography, Button } from '@mui/material';
 import { Link, useNavigate } from 'react-router-dom';
 import { useContext } from 'react';
-import { AppContext } from '../App';
+import { AppContext, PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
 
 export default function Navbar() {
   const navigate = useNavigate();
   const context = useContext(AppContext);
-  console.log('Context:', context);
+  const debugLog = (message) => {
+    if (process.env.DEBUG_API) {
+      console.log(message);
+    }
+  };
+  debugLog('Context:', context);
 
   if (!context) {
     throw new Error('AppContext is not available');
@@ -24,9 +29,9 @@ export default function Navbar() {
 
   return (
     <AppBar position="static">
-      <Toolbar>
+      <Toolbar sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}>
         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-          Boxes App
+          Boxes
         </Typography>
         <Button color="inherit" component={Link} to="/login">Login</Button>
         <Button color="inherit" component={Link} to="/boxes">Boxes</Button>