diff --git a/package-lock.json b/package-lock.json
index 3951476..1aa8301 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,8 @@
         "react-color": "^2.19.3",
         "react-dom": "^17.0.2",
         "react-google-charts": "^3.0.15",
+        "react-hotkeys-hook": "^3.4.7",
+        "react-keyboard": "^1.0.10",
         "react-qr-code": "^2.0.15",
         "react-redux": "^8.0.5",
         "react-scripts": "^5.0.1",
@@ -52,6 +54,9 @@
         "wav-decoder": "^1.3.0",
         "web-vitals": "^2.1.2",
         "webvtt-parser": "^2.2.0"
+      },
+      "devDependencies": {
+        "prettier": "^3.6.2"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -9577,6 +9582,12 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/hotkeys-js": {
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.4.tgz",
+      "integrity": "sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q==",
+      "license": "MIT"
+    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -12934,6 +12945,13 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+      "license": "MIT"
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -13415,6 +13433,12 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mousetrap": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
+      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==",
+      "license": "Apache-2.0 WITH LLVM-exception"
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -15306,6 +15330,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -15766,11 +15806,38 @@
         "react-dom": ">=16.3.0"
       }
     },
+    "node_modules/react-hotkeys-hook": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz",
+      "integrity": "sha512-+bbPmhPAl6ns9VkXkNNyxlmCAIyDAcWbB76O4I0ntr3uWCRuIQf/aRLartUahe9chVMPj+OEzzfk3CQSjclUEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "hotkeys-js": "3.9.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.1",
+        "react-dom": ">=16.8.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-keyboard": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/react-keyboard/-/react-keyboard-1.0.10.tgz",
+      "integrity": "sha512-uWd6Yd7AYxmu2rULxYdDhUAQqEktWJTNRRZ/rPUe1FekuoMHucwlvKjnQ3eo7BflL/S5ReR7wLKsHFFe4tHiKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.isequal": "^4.5.0",
+        "mousetrap": "^1.6.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0",
+        "react-dom": ">= 0.14.0"
+      }
+    },
     "node_modules/react-load-script": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/react-load-script/-/react-load-script-0.0.6.tgz",
diff --git a/package.json b/package.json
index c3973db..807432a 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,8 @@
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
     "react-google-charts": "^3.0.15",
+    "react-hotkeys-hook": "^3.4.7",
+    "react-keyboard": "^1.0.10",
     "react-qr-code": "^2.0.15",
     "react-redux": "^8.0.5",
     "react-scripts": "^5.0.1",
@@ -75,5 +77,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^3.6.2"
   }
 }
diff --git a/src/components/navbars/appNavBar.tsx b/src/components/navbars/appNavBar.tsx
index a73f959..ecdd9f7 100644
--- a/src/components/navbars/appNavBar.tsx
+++ b/src/components/navbars/appNavBar.tsx
@@ -10,6 +10,7 @@ import {
     AppBar,
     Toolbar,
     Typography,
+    Tooltip,
     // useMediaQuery,
     // useTheme
 } from '@mui/material';
@@ -59,9 +60,11 @@ export default function AppNavBar(props) {
                         <Grid container alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
                             {/* Left Section: Menu Icon and Title */}
                             <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
-                                <IconButton edge="start" sx={{ color: 'white' }} aria-label="menu" onClick={toggleDrawer(true)}>
-                                    <MenuIcon />
-                                </IconButton>
+                                <Tooltip title = "Menu">
+                                    <IconButton edge="start" sx={{ color: 'white' }} aria-label="menu" onClick={toggleDrawer(true)}>
+                                        <MenuIcon />
+                                    </IconButton>
+                                </Tooltip>
                                 <Drawer anchor="left" open={isDrawerOpen} onClose={toggleDrawer(false)}>
                                     <SideBar isRecording={props.isRecording} onClose={toggleDrawer(false)} />
                                 </Drawer>
@@ -94,4 +97,4 @@ export default function AppNavBar(props) {
             </AppBar>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/navbars/topbar/listening.tsx b/src/components/navbars/topbar/listening.tsx
index f137420..4d7b88d 100644
--- a/src/components/navbars/topbar/listening.tsx
+++ b/src/components/navbars/topbar/listening.tsx
@@ -5,36 +5,36 @@ import { ControlStatus } from '../../../react-redux&middleware/redux/typesImport
 import Theme from '../../theme'
 import * as React from 'react';
 
-
    export default function CustomizedMenus(props) {
     console.log(Theme())
      const dispatch = useDispatch()
+
      
      let controlStatus = useSelector((state: RootState) => {
           return state.ControlReducer as ControlStatus;
      });
 
-     const handleClick = (event: React.KeyboardEvent | React.MouseEvent) => {
+     const handleClick = (event: React.KeyboardEvent | React.MouseEvent | KeyboardEvent) => {
           controlStatus.listening = !controlStatus.listening
           dispatch({type: 'FLIP_RECORDING', payload: controlStatus})
-     }
+     } 
+
      const {myTheme} = Theme()
 
      // color "primary" comes from Theme()
      return (
-       <div>
-        <ThemeProvider theme={myTheme}>
-          <Tooltip title = 
-            {props.listening === false ? "Begin Listening" : "Pause Listening"}>
-            <IconButton color="primary" onClick={handleClick}>
-              {props.listening ? 
-                <MicIcon color="primary" fontSize="large"/> : 
-                <MicOffIcon color="primary" fontSize="large"/>
-              }
-            </IconButton>
-          </Tooltip>
-         </ThemeProvider>
-
-       </div>
+        <div>
+            <ThemeProvider theme={myTheme}>
+                    <Tooltip title = 
+                        {props.listening === false ? "Begin Listening" : "Pause Listening"}>
+                        <IconButton color="primary" onClick={handleClick}>
+                            {props.listening ? 
+                                <MicIcon color="primary" fontSize="large"/> : 
+                                <MicOffIcon color="primary" fontSize="large"/>
+                            }
+                        </IconButton>
+                    </Tooltip>
+            </ThemeProvider>
+        </div>
      );
    }