diff --git a/src/App.js b/src/App.js
index 60b37bd..d9d0866 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ import MailIcon from '@mui/icons-material/Mail';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import MoreIcon from '@mui/icons-material/MoreVert';
 import Container from '@mui/material/Container';
+import SettingsIcon from '@mui/icons-material/Settings';
 import Avatar from '@mui/material/Avatar';
 import AdbIcon from '@mui/icons-material/Adb';
 import InputBase from '@mui/material/InputBase';
@@ -40,6 +41,7 @@ import logo from './logo.svg';
 import './App.css';
 import SideNav from './components/SideNav/SideNav';
 import BookSearch from './components/BookSearch/BookSearch';
+import Setting from './components/SettingIcon/Setting';
 
 const label = { inputProps: { 'aria-label': 'Color switch demo' } };
 
@@ -94,6 +96,8 @@ export default function App() {
                 onChange={handleToggleDarkMode}
               />
               <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+              {/* <SettingsIcon style={{marginLeft:20}} /> */}
+              <Setting/>
             </Toolbar>
           </AppBar>
 		  </Box>
diff --git a/src/components/SettingIcon/Setting.css b/src/components/SettingIcon/Setting.css
new file mode 100644
index 0000000..fad9ad7
--- /dev/null
+++ b/src/components/SettingIcon/Setting.css
@@ -0,0 +1,27 @@
+.app-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    /* height: 60px; */
+    /* padding-right: 20px; */
+    margin-left: 15px;
+    /* background-color: #f0f0f0; */
+  }
+  
+  .settings-sidebar {
+    position: fixed;
+    top: 0;
+    right: -200px;
+    width: 200px;
+    height: 40vh;
+    padding: 20px;
+    margin-top: 80px;
+    background-color: #1976d2;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-out;
+  }
+  
+  .settings-sidebar.open {
+    transform: translateX(-200px);
+  }
+  
\ No newline at end of file
diff --git a/src/components/SettingIcon/Setting.jsx b/src/components/SettingIcon/Setting.jsx
new file mode 100644
index 0000000..7ecf3d8
--- /dev/null
+++ b/src/components/SettingIcon/Setting.jsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import SettingsIcon from '@mui/icons-material/Settings';
+import './Setting.css';
+
+function Setting() {
+  const [showSettings, setShowSettings] = useState(false);
+  const [randomSetting1, setRandomSetting1] = useState(false);
+  const [randomSetting2, setRandomSetting2] = useState('Option 1');
+  const [randomSetting3, setRandomSetting3] = useState(10);
+
+  const toggleSettings = () => {
+    setShowSettings(prevShowSettings => !prevShowSettings);
+  }
+
+  const toggleRandomSetting1 = () => {
+    setRandomSetting1(!randomSetting1);
+  }
+
+  const handleRandomSetting2Change = (event) => {
+    setRandomSetting2(event.target.value);
+  }
+
+  const handleRandomSetting3Change = (event) => {
+    setRandomSetting3(parseInt(event.target.value));
+  }
+
+  return (
+    <div className="app-container">
+      <SettingsIcon onClick={toggleSettings} />
+      <div className={`settings-sidebar ${showSettings ? 'open' : ''}`}>
+        <h2>Settings Menu</h2>
+        <div>
+          <input type="checkbox" checked={randomSetting1} onChange={toggleRandomSetting1} />
+          <label>Random Setting 1</label>
+        </div>
+        <div>
+          <label>Random Setting 2:</label>
+          <select value={randomSetting2} onChange={handleRandomSetting2Change}>
+            <option value="Option 1">Option 1</option>
+            <option value="Option 2">Option 2</option>
+            <option value="Option 3">Option 3</option>
+          </select>
+        </div>
+        <div>
+          <label>Random Setting 3:</label>
+          <input type="number" value={randomSetting3} onChange={handleRandomSetting3Change} />
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Setting;
\ No newline at end of file