diff --git a/.DS_Store b/.DS_Store
index d82bfb917..f155cef73 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/src/App.tsx b/src/App.tsx
index e1641da36..26b4fa84d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom';
 import Home from './Components/Home';
 import LogIn from './Components/LogIn';
 import ContactUs from './Components/ContactUs';
@@ -6,14 +7,30 @@ import AboutUs from './Components/AboutUs';
 import FAQ from './Components/FAQ';
 import Profile from './Components/Profile';
 import Inventory from './Components/Inventory';
+import View from './Components/View';
 import SignUp from './Components/SignUp';
 import Progress from './Components/Progress';
+
 import "@fontsource/inter"
 import "@fontsource/inter/700.css";
-import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
-import View from './Components/View';
+
+const hard_clicking_sound = new Audio(require('./Audios/clicking_hard.mp3'));
+const soft_clicking_sound = new Audio(require('./Audios/clicking_soft.mp3'));
 
 function App() {
+  const [mute, setMute] = useState(false);
+  
+  const toggleSound = () => {
+    setMute(!mute);
+  }
+
+  const playClickSound = (hard = false) => {
+    if (mute) return;
+    const clicking_sound = hard ? hard_clicking_sound : soft_clicking_sound;
+    clicking_sound.play();
+  }
+
+  const location = useLocation();
 
   const usePageNavigation = () => {
     const navigate = useNavigate();
@@ -22,42 +39,52 @@ function App() {
 
   const setPage = usePageNavigation();
 
+  const getPageName = () => {
+    const path = location.pathname;
+    if (path === '/') return '';
+    return path.slice(1);
+  }
+
   const goToLogin = () => {
+    playClickSound(getPageName() === 'login' ? true : false);
     setPage('login');
   }
 
   const backToHome = () => {
+    playClickSound(getPageName() === '' ? true : false);
     setPage('');
   }
 
   const toContactPage = () => {
+    playClickSound(getPageName() === 'contact' ? true : false);
     setPage('contact');
   }
 
   const toAboutUsPage = () => {
+    playClickSound(getPageName() === 'about' ? true : false);
     setPage('about');
   }
 
   const toFAQPage = () => {
+    playClickSound(getPageName() === 'faq' ? true : false);
     setPage('faq');
   }
 
   const toProfilePage = () => {
+    playClickSound(getPageName() === 'profile' ? true : false);
     setPage('profile');
   }
 
   const toInventoryPage = () => {
+    playClickSound(getPageName() === 'inventory' ? true : false);
     setPage('inventory');
   }
 
   const toViewPage = () => {
+    playClickSound(getPageName() === 'inventory/view' ? true : false);
     setPage('inventory/view');
   }
 
-  const toProgressPage = () => {
-    setPage('Progress');
-  }
-
   return (
     <div>
       <Routes>
@@ -67,11 +94,13 @@ function App() {
                                   contactHandler={toContactPage} 
                                   FAQHandler={toFAQPage} 
                                   ProfileHandler={toProfilePage} 
+                                  toggleSoundHandler={toggleSound}
+                                  mute={mute}
                                 />} />
+
       <Route path="/login" element={<LogIn 
                                           backToHomeHandler={backToHome} 
                                         />} />
-      <Route path="/signUp" element={<SignUp backToLoginHandler={goToLogin}/>} />
         <Route path="/contact" element={<ContactUs 
                                             aboutUsHandler={toAboutUsPage} 
                                             contactHandler={toContactPage} 
@@ -95,7 +124,9 @@ function App() {
                                             getStartedHandler={goToLogin}
                                             InventoryHandler={toInventoryPage}
                                             backToHomeHandler={backToHome}
-                                            ProgressHandler={toProgressPage}
+                                            ProgressHandler={toProfilePage}
+                                            toggleSoundHandler={toggleSound}
+                                            mute={mute}
                                           />} />
         <Route path="/inventory" element={<Inventory 
                                               ProfileHandler={toProfilePage} 
@@ -106,7 +137,9 @@ function App() {
                                               ViewHandler={toViewPage}
                                               InventoryHandler={toInventoryPage}
                                               backToHomeHandler={backToHome} 
-                                              ProgressHandler={toProgressPage}
+                                              ProgressHandler={toProfilePage}
+                                              toggleSoundHandler={toggleSound}
+                                              mute={mute}
                                             />} />
         <Route path="/inventory/view" element={<View 
                                               ProfileHandler={toProfilePage} 
@@ -117,16 +150,8 @@ function App() {
                                               ViewHandler={toViewPage}
                                               InventoryHandler={toInventoryPage}
                                               backToHomeHandler={backToHome}
-                                            />} />
-        <Route path="/progress" element={<Progress 
-                                              ProfileHandler={toProfilePage} 
-                                              aboutUsHandler={toAboutUsPage} 
-                                              contactHandler={toContactPage} 
-                                              FAQHandler={toFAQPage} 
-                                              getStartedHandler={goToLogin}
-                                              InventoryHandler={toInventoryPage}
-                                              ProgressHandler={toProgressPage}
-                                              backToHomeHandler={backToHome}
+                                              toggleSoundHandler={toggleSound}
+                                              mute={mute}
                                             />} />
       </Routes>
     </div>
diff --git a/src/Audios/clicking_hard.mp3 b/src/Audios/clicking_hard.mp3
new file mode 100644
index 000000000..128c2776d
Binary files /dev/null and b/src/Audios/clicking_hard.mp3 differ
diff --git a/src/Audios/clicking_soft.mp3 b/src/Audios/clicking_soft.mp3
new file mode 100644
index 000000000..84dd4fce3
Binary files /dev/null and b/src/Audios/clicking_soft.mp3 differ
diff --git a/src/Components/Home.tsx b/src/Components/Home.tsx
index c45ef7ecf..2f4083a6b 100644
--- a/src/Components/Home.tsx
+++ b/src/Components/Home.tsx
@@ -8,9 +8,17 @@ interface Props {
     contactHandler: () => void;
     FAQHandler: () => void;
     ProfileHandler: () => void;
+    toggleSoundHandler:() => void;
+    mute: boolean;
 }
 
-function Home({getStartedHandler, aboutUsHandler, contactHandler, FAQHandler, ProfileHandler}: Props) {
+function Home({getStartedHandler, 
+               aboutUsHandler, 
+               contactHandler, 
+               FAQHandler, 
+               ProfileHandler,
+               toggleSoundHandler,
+               mute}: Props) {
     return (
         <div>
             <div id="website-title">Website.com</div>
@@ -26,6 +34,7 @@ function Home({getStartedHandler, aboutUsHandler, contactHandler, FAQHandler, Pr
                 <button className="info-button" onClick={contactHandler}> Contact </button>
                 <button className="info-button" onClick={FAQHandler}> FAQ </button>
                 <button className="info-button" onClick={ProfileHandler}> Profile </button>
+                <button className="info-button" onClick={toggleSoundHandler}>{mute ? 'Turn On Sound' : 'Turn Off Sound'}</button>
             </div>
             <img id="icon" src={user_4_fill} alt="user icon" />
             <img id="cover" src={humaaansGraph} alt="front page image" />
diff --git a/src/Components/Inventory.tsx b/src/Components/Inventory.tsx
index 851df5b27..eb61ecd66 100644
--- a/src/Components/Inventory.tsx
+++ b/src/Components/Inventory.tsx
@@ -22,6 +22,8 @@ interface Props {
     ViewHandler: () => void;
     backToHomeHandler:() => void;
     InventoryHandler:() => void;
+    toggleSoundHandler:() => void;
+    mute: boolean;
 }
 
 function Inventory({ProfileHandler,
@@ -32,7 +34,9 @@ function Inventory({ProfileHandler,
                     ProgressHandler,
                     InventoryHandler,
                     ViewHandler,
-                    backToHomeHandler} : Props) {
+                    backToHomeHandler,
+                    toggleSoundHandler,
+                    mute} : Props) {
     return (
         <div style={{ margin: 0, padding: 0, height: '100vh', position: 'relative' }}>
             <div className="blue-half" style={{ width: '20%', height: '100%', backgroundColor: '#3127A0', position: 'fixed', left: 0}}>
@@ -57,7 +61,7 @@ function Inventory({ProfileHandler,
                     <img src={theme_icon} alt="Theme Icon"/>
                     Theme
                 </button>
-                <button id="sidebar-selected-inventory-button">
+                <button id="sidebar-selected-inventory-button" onClick={InventoryHandler}>
                     <img src={selected_inventory_icon} alt="Selected Inventory Icon"/>
                     Inventory
                 </button>
@@ -78,6 +82,7 @@ function Inventory({ProfileHandler,
                     <button className="info-button" onClick={contactHandler}> Contact </button>
                     <button className="info-button" onClick={FAQHandler}> FAQ </button>
                     <button className="info-button" onClick={ProfileHandler}> Profile </button>
+                    <button className="info-button" onClick={toggleSoundHandler}>{mute ? 'Turn On Sound' : 'Turn Off Sound'}</button>
                 </div>
                 <button id = "red-name-button">Kelvin</button>
                 <div id="top-area">
diff --git a/src/Components/Profile.tsx b/src/Components/Profile.tsx
index b2e5b791b..4cb29687c 100644
--- a/src/Components/Profile.tsx
+++ b/src/Components/Profile.tsx
@@ -19,6 +19,8 @@ interface Props {
     InventoryHandler: () => void;
     ProgressHandler: () => void;
     backToHomeHandler:() => void;
+    toggleSoundHandler:() => void;
+    mute: boolean;
 }
 
 function Profile({ProfileHandler,
@@ -28,7 +30,9 @@ function Profile({ProfileHandler,
                     FAQHandler,
                     InventoryHandler,
                     ProgressHandler,
-                    backToHomeHandler} : Props) {
+                    backToHomeHandler,
+                    toggleSoundHandler,
+                    mute} : Props) {
     return (
         <div style={{ margin: 0, padding: 0, height: '100vh', position: 'relative' }}>
             <div className="blue-half" style={{ width: '20%', height: '100%', backgroundColor: '#3127A0', position: 'absolute', left: 0 }}>
@@ -37,7 +41,7 @@ function Profile({ProfileHandler,
                     <img src={learning_icon} alt="Learning icon"/>
                     Learning Progress
                 </button>
-                <button id="sidebar-selected-profile-button">
+                <button id="sidebar-selected-profile-button" onClick={ProfileHandler}>
                     <img src={selected_profile_icon} alt="Selected Profile Icon"/>
                     Profile
                 </button>
@@ -84,6 +88,7 @@ function Profile({ProfileHandler,
                     <button className="info-button" onClick={contactHandler}> Contact </button>
                     <button className="info-button" onClick={FAQHandler}> FAQ </button>
                     <button className="info-button" onClick={ProfileHandler}> Profile </button>
+                    <button className="info-button" onClick={toggleSoundHandler}>{mute ? 'Turn On Sound' : 'Turn Off Sound'}</button>
                 </div>
                 <button id = "red-name-button">Kelvin</button>
 
diff --git a/src/Components/View.tsx b/src/Components/View.tsx
index 6e50a0cf3..f6d527e41 100644
--- a/src/Components/View.tsx
+++ b/src/Components/View.tsx
@@ -18,6 +18,8 @@ interface Props {
     ViewHandler: () => void;
     backToHomeHandler:() => void;
     InventoryHandler: () => void;
+    toggleSoundHandler:() => void;
+    mute: boolean;
 }
 
 function View({ProfileHandler,
@@ -27,7 +29,9 @@ function View({ProfileHandler,
                     FAQHandler, 
                     ViewHandler,
                     InventoryHandler,
-                    backToHomeHandler} : Props) {
+                    backToHomeHandler,
+                    toggleSoundHandler,
+                    mute} : Props) {
     return (
         <div style={{ margin: 0, padding: 0, height: '100vh', position: 'relative' }}>
             <div className="blue-half" style={{ width: '20%', height: '100%', backgroundColor: '#3127A0', position: 'fixed', left: 0}}>
@@ -69,11 +73,12 @@ function View({ProfileHandler,
                     <span id="page-title-button" onClick={InventoryHandler}> Inventory {'>'} </span>
                     <span id="page-title-button" onClick={ViewHandler}> View </span>
                 </div>
-                <div id="inventory-top-buttons">
-                    <button className="inventory-info-button" onClick={aboutUsHandler}> About Us </button>
-                    <button className="inventory-info-button" onClick={contactHandler}> Contact </button>
-                    <button className="inventory-info-button" onClick={FAQHandler}> FAQ </button>
-                    <button className="inventory-info-button" onClick={ProfileHandler}> Profile </button>
+                <div id="top-buttons">
+                    <button className="info-button" onClick={aboutUsHandler}> About Us </button>
+                    <button className="info-button" onClick={contactHandler}> Contact </button>
+                    <button className="info-button" onClick={FAQHandler}> FAQ </button>
+                    <button className="info-button" onClick={ProfileHandler}> Profile </button>
+                    <button className="info-button" onClick={toggleSoundHandler}>{mute ? 'Turn On Sound' : 'Turn Off Sound'}</button>
                 </div>
                 <button id = "red-name-button">Kelvin</button>