diff --git a/package-lock.json b/package-lock.json
index 228f656..4de482e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -93,6 +93,7 @@
 			"integrity": "sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.0",
 				"@babel/code-frame": "^7.26.2",
@@ -435,6 +436,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=18"
 			},
@@ -458,6 +460,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=18"
 			}
@@ -1302,8 +1305,7 @@
 			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
 			"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
 			"dev": true,
-			"license": "MIT",
-			"peer": true
+			"license": "MIT"
 		},
 		"node_modules/@types/babel__core": {
 			"version": "7.20.5",
@@ -1506,7 +1508,6 @@
 			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -1574,6 +1575,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"caniuse-lite": "^1.0.30001688",
 				"electron-to-chromium": "^1.5.73",
@@ -1655,7 +1657,6 @@
 			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"ansi-styles": "^4.1.0",
 				"supports-color": "^7.1.0"
@@ -1812,8 +1813,7 @@
 			"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
 			"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
 			"dev": true,
-			"license": "MIT",
-			"peer": true
+			"license": "MIT"
 		},
 		"node_modules/dunder-proto": {
 			"version": "1.0.1",
@@ -2226,6 +2226,7 @@
 			"integrity": "sha512-BZYDGVAIriBWTpIxYzrXjv3E/4u8+/pSG5bQdIYCbNCGOvsPkDQfTVLAIXAf9ETdCpduCVTkDe2NNZ8NIwUVzw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"cssstyle": "^4.2.1",
 				"data-urls": "^5.0.0",
@@ -2317,7 +2318,6 @@
 			"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"bin": {
 				"lz-string": "bin/bin.js"
 			}
@@ -2487,7 +2487,6 @@
 			"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"ansi-regex": "^5.0.1",
 				"ansi-styles": "^5.0.0",
@@ -2503,7 +2502,6 @@
 			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -2526,6 +2524,7 @@
 			"resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
 			"integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2535,6 +2534,7 @@
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
 			"integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"scheduler": "^0.25.0"
 			},
@@ -2547,8 +2547,7 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
 			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
 			"dev": true,
-			"license": "MIT",
-			"peer": true
+			"license": "MIT"
 		},
 		"node_modules/react-refresh": {
 			"version": "0.14.2",
@@ -2854,6 +2853,7 @@
 			"integrity": "sha512-n2GnqDb6XPhlt9B8olZPrgMD/es/Nd1RdChF6CBD/fHW6pUyUTt2sQW2fPRX5GiD9XEa6+8A6A4f2vT6pSsE7Q==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"postcss": "^8.5.3",
diff --git a/src/App.jsx b/src/App.jsx
index e602152..01e9b1c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,42 +3,53 @@ import logo from './logo.svg';
 import './App.css';
 
 const App = () => {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(10);
+  const [isVisible, setIsVisible] = useState(true);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [score, setScore] = useState(75);
+  const [mode, setMode] = useState('light');
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h1>Vite + React</h1>
-        <p>
-          <button onClick={() => setCount(count => count + 1)}>
-            count is {count}
-          </button>
-        </p>
-        <p>
-          Edit <code>App.jsx</code> and save to test HMR updates.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://react.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          {' | '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
-          </a>
-        </p>
-      </header>
+    <div style={{ padding: '40px', fontFamily: 'Arial', maxWidth: '600px', margin: '0 auto' }}>
+      <h1>Day 5: Conditional Rendering Practice</h1>
+      <h2>By Ufuoma 🚀</h2>
+  
+    <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
+    {isLoggedIn ? 'Log Out' : 'Log In'}
+    </button>
+
+    {isLoggedIn && (
+    <div style={{ marginTop: '20px', padding: '20px', background: '#fff3cd', borderRadius: '8px' }}>
+    <h3>🎉 Welcome back, Ufuoma!</h3>
+    <p>You are now logged in. Secret content is visible!</p>
+    </div>
+    )}
+    <h3>Quiz Result:</h3>
+    <p>
+    <h2>Score: {score}</h2>
+    {score >= 70 ? <span style={{ color: 'green', fontWeight: 'bold' }}>🎉 Congratulations! You passed!</span>: <span style={{ color: 'red', fontWeight: 'light' }}>😔 Sorry, you need to study more.</span>}
+    </p>
+   
+    <button onClick={() => setScore(score + 10)}>Add 10 Points</button>
+    <button onClick={() => setScore(50)}>Reset to 50</button>
+    <button onClick={() => setScore(score - 10)}>Subtract 10 Points</button>
+    <p></p>
+    <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+    Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
+    </button>
+      <div style={{
+      marginTop: '30px',
+      padding: '30px',
+      background: mode === 'light' ? '#ffffff' : '#1a1a1a',
+      color: mode === 'light' ? '#000000' : '#ffffff',
+      borderRadius: '12px',
+      border: '2px solid #ccc'
+      }}>
+      <h3>This box background color and font color changes with mode!</h3>
+      <p>Current mode: {mode}</p>
+      </div>
     </div>
+
   );
 };