diff --git a/package-lock.json b/package-lock.json
index 9fb5857..c2034b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ujjwals-portfolio",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ujjwals-portfolio",
-      "version": "0.1.3",
+      "version": "0.1.4",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
@@ -46,6 +46,7 @@
         "react-use": "^17.5.1",
         "react-vertical-timeline-component": "^3.6.0",
         "styled-components": "^6.1.12",
+        "sweetalert2": "^11.14.5",
         "tailwind-merge": "^2.4.0",
         "tailwindcss-animate": "^1.0.7",
         "three": "^0.166.1",
@@ -21565,6 +21566,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.14.5",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.5.tgz",
+      "integrity": "sha512-8MWk5uc/r6bWhiJWkUXyEuApfXAhSCZT8FFX7pZXL7YwaPxq+9Ynhi2dUzWkOFn9jvLjKj22CXuccZ+IHcnjvQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 2e2e332..2830f96 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ujjwals-portfolio",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.13.0",
@@ -41,6 +41,7 @@
     "react-use": "^17.5.1",
     "react-vertical-timeline-component": "^3.6.0",
     "styled-components": "^6.1.12",
+    "sweetalert2": "^11.14.5",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.166.1",
@@ -77,3 +78,4 @@
     "tailwindcss": "^3.4.6"
   }
 }
+
diff --git a/src/Pages/CompoPage/ExtraComponents/Marquee.js b/src/Pages/CompoPage/ExtraComponents/Marquee.js
index d748363..ccb3a6b 100644
--- a/src/Pages/CompoPage/ExtraComponents/Marquee.js
+++ b/src/Pages/CompoPage/ExtraComponents/Marquee.js
@@ -264,7 +264,8 @@ export function MarqueeDemo() {
 export default MarqueeDemo;
 
 
-// TOdo: Done some rubbish Change
+// Todo: Problematic Code
+// ! Try Change - 1: Component is moving good but the problem is space between start and end.
 // import React, { useEffect, useState } from 'react';
 // import { useInView } from 'react-intersection-observer';
 
@@ -274,89 +275,96 @@ export default MarqueeDemo;
 // import bgref from '../../../components/Assest_Used/textures/Bg_Shades/CubeBgAbout.png';
 
 // const reviews = [
-//   {
-//     name: "Ayush",
-//     username: "@ayush",
-//     body: "I've never seen anything like this before. It's amazing. I love it.",
-//     img: Shade1,
-//   },
-//   {
-//     name: "Keshav",
-//     username: "@keshav",
-//     body: "I don't know what to say. I'm speechless. This is amazing.",
-//     img: Shade2,
-//   },
-//   {
-//     name: "Sameer",
-//     username: "@sam",
-//     body: "I'm at a loss for words. This is amazing. I love it.",
-//     img: Shade3,
-//   },
-//   {
-//     name: "Rohit",
-//     username: "@rohit",
-//     body: "I'm at a loss for words. This is amazing. I love it.",
-//     img: Shade3,
-//   },
-//   {
-//     name: "Ansh",
-//     username: "@ansh",
-//     body: "I'm at a loss for words. This is amazing. I love it.",
-//     img: Shade2,
-//   },
-//   {
-//     name: "Jhanvi",
-//     username: "@jhanvi",
-//     body: "I'm at a loss for words. This is amazing. I love it.",
-//     img: Shade1,
-//   },
+//   { name: "Ayush", username: "@ayush", body: "I've never seen anything like this before. It's amazing. I love it.", img: Shade1 },
+//   { name: "Keshav", username: "@keshav", body: "I don't know what to say. I'm speechless. This is amazing.", img: Shade2 },
+//   { name: "Sameer", username: "@sam", body: "I'm at a loss for words. This is amazing. I love it.", img: Shade3 },
+//   { name: "Rohit", username: "@rohit", body: "I'm at a loss for words. This is amazing. I love it.", img: Shade3 },
+//   { name: "Ansh", username: "@ansh", body: "I'm at a loss for words. This is amazing. I love it.", img: Shade2 },
+//   { name: "Jhanvi", username: "@jhanvi", body: "I'm at a loss for words. This is amazing. I love it.", img: Shade1 },
 // ];
 
-// const Marquee = ({ children, reverse = false }) => {
+// const spaceboardsFont = `
+//   @font-face {
+//     font-family: 'Spaceboards';
+//     src: url('/fonts/Spaceboards.otf') format('opentype');
+//   }
+// `;
+
+// const TestoStyle = `
+//   .Test {
+//     font-family: 'Spaceboards', sans-serif;
+//     font-size: 5rem;
+//     font-weight: bold;
+//     background: linear-gradient(90deg, #0cffc5, #a939ff, #0cffc5, #a939ff);
+//     -webkit-background-clip: text;
+//     -webkit-text-fill-color: transparent;
+//     margin-left: 4rem;
+//     animation: gradient 1.5s infinite;
+//     letter-spacing: 0.1rem;
+//     background-size: 200% 200%;
+//   }
+
+//   @keyframes gradient {
+//     0% { background-position: 0% 50%; }
+//     50% { background-position: 100% 50%; }
+//     100% { background-position: 0% 50%; }
+//   }
+
+//   /* Marquee animation styles */
+//   .animate-marquee {
+//     display: flex;
+//     animation: marquee var(--duration, 10s) linear infinite;
+//   }
+
+//   .animate-marquee2 {
+//     display: flex;
+//     animation: marquee2 var(--duration, 10s) linear infinite;
+//   }
+
+//   @keyframes marquee {
+//     from { transform: translateX(100%); }
+//     to { transform: translateX(-100%); }
+//   }
+
+//   @keyframes marquee2 {
+//     from { transform: translateX(-100%); }
+//     to { transform: translateX(100%); }
+//   }
+
+//   .group:hover .animate-marquee,
+//   .group:hover .animate-marquee2 {
+//     animation-play-state: paused;
+//   }
+// `;
+
+// const Marquee = ({ children, reverse = false, pauseOnHover = false, className = '' }) => {
 //   const { ref: ref0, inView: inView0 } = useInView({
 //     triggerOnce: true,
 //     threshold: 0.1,
 //   });
 
+//   const marqueeClass = reverse ? 'animate-marquee2' : 'animate-marquee';
 //   const marqueeStyle = {
-//     display: 'flex',
-//     animation: `marquee 20s linear infinite`,
-//     whiteSpace: 'nowrap',
-//     ...(reverse && { animationDirection: 'reverse' }),
 //     opacity: inView0 ? 1 : 0,
 //     transform: inView0 ? 'translateY(0)' : 'translateY(-50px)',
-//     transition: `opacity 1.25s ease-out 0.5s, transform 1.25s ease-out 0.5s`,
-//   };
-
-//   const containerStyle = {
-//     overflow: 'hidden',
-//     display: 'flex',
-//     opacity: inView0 ? 1 : 0,
-//     transform: inView0 ? 'translateY(0)' : 'translateY(-50px)',
-//     transition: `opacity 1.25s ease-out 0.5s, transform 1.25s ease-out 0.5s`,
-//     position: 'relative',
+//     transition: `opacity 1.25s ease-out 4s, transform 1.25s ease-out 4s`,
 //   };
 
 //   return (
-//     <div style={containerStyle} className="marquee-container" ref={ref0}>
-//       <div style={marqueeStyle}>
-//         {children}
-//         {children} {/* Duplicate children to create infinite loop */}
-//         {children} {/* Triplicate to ensure there's enough content */}
-//       </div>
+//     <div ref={ref0} style={marqueeStyle} className={`${marqueeClass} ${className} ${pauseOnHover ? 'group' : ''}`}>
+//       {children}
 //     </div>
 //   );
 // };
 
-
 // const ReviewCard = ({ img, name, username, body }) => {
 //   const [hover, setHover] = useState(false);
 
 //   const cardStyle = {
 //     position: 'relative',
 //     width: '35rem',
-//     height: '8rem',
-//     margin: '0.5rem',
+//     height: '8rem', 
+//     margin: '0.2px 0.5rem 1.2rem',
 //     cursor: 'pointer',
 //     overflow: 'hidden',
 //     borderRadius: '1rem',
@@ -399,13 +407,13 @@ export default MarqueeDemo;
 // export function MarqueeDemo() {
 //   useEffect(() => {
 //     const styleSheet = document.styleSheets[0];
-//     const keyframes = `
-//       @keyframes marquee {
-//         0% { transform: translateX(100%); }
-//         100% { transform: translateX(-100%); }
-//       }
-//     `;
-//     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
+//     const styleElement = document.createElement('style');
+//     styleElement.innerHTML = spaceboardsFont + TestoStyle;
+//     document.head.appendChild(styleElement);
+
+//     return () => {
+//       document.head.removeChild(styleElement);
+//     };
 //   }, []);
 
 //   const firstRow = reviews.slice(0, Math.ceil(reviews.length / 2));
@@ -442,14 +450,22 @@ export default MarqueeDemo;
 //     right: 0,
 //   };
 
+//   const { ref: ref0, inView: inView0 } = useInView({
+//     triggerOnce: true,
+//     threshold: 0.1, 
+//   });
+
 //   return (
 //     <div style={containerStyle}>
-//       <Marquee>
+//       <div className="Test" ref={ref0} style={{ textAlign: 'center', marginBottom: '2.5rem', marginTop: '1rem',  opacity: inView0 ? 1 : 0, transform: inView0 ? 'translateY(0)' : 'translateY(50px)', transition: `opacity 1.25s ease-out 3.2s, transform 1.25s ease-out 3.2s`}}>
+//         Testimonials
+//       </div>
+//       <Marquee pauseOnHover className="[--duration:20s]">
 //         {firstRow.map((review) => (
 //           <ReviewCard key={review.username} {...review} />
 //         ))}
 //       </Marquee>
-//       <Marquee reverse>
+//       <Marquee reverse pauseOnHover className="[--duration:20s]">
 //         {secondRow.map((review) => (
 //           <ReviewCard key={review.username} {...review} />
 //         ))}
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 8fade10..68cb640 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -538,8 +538,7 @@ useEffect(() => {
               }}>
                 
                 <iframe
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3503.4709491222006!2d77.1156931!3d28.643659!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d036b61214b21%3A0xaaa9a3b98a1faee2!2sRajouri%20Garden%2C%20Delhi!5e0!3m2!1sen!2sin!4v1698004002035!5m2!1sen!2sin"
-                  // src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3501.5393826342255!2d77.14058945079842!3d28.66222527921225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d03009e810ffd%3A0xcf2bda6f1a9acec6!2sNew%20Moti%20Nagar%2C%20Moti%20Nagar%2C%20Delhi%2C%20110015!5e0!3m2!1sen!2sin!4v1636631965111!5m2!1sen!2sin"
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3498.987241148713!2d77.2319384!3d28.6249118!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0b5b3b51cd%3A0x63589a2e9f69bc01!2sIndia%20Gate%2C%20Delhi!5e0!3m2!1sen!2sin!4v1698004002035!5m2!1sen!2sin"
                   style={{
                     border: 0,
                     width: '100%',
diff --git a/src/Pages/Skills.js b/src/Pages/Skills.js
index 03d9846..f94fe67 100644
--- a/src/Pages/Skills.js
+++ b/src/Pages/Skills.js
@@ -137,17 +137,20 @@ const technologies = [
   { name: "Python", icon: "https://cdn-icons-png.flaticon.com/512/5968/5968286.png" },
   { name: "Django", icon: "https://www.opengis.ch/wp-content/uploads/2020/04/django-python-logo.png" },
   { name: "Cpp", icon: "https://cpp-lang.net/img/cpp.svg" },
-  { name: "C Sharp", icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk0LQoEffBJcfDkSDSgOusJAqyTFxqMC1dCzwm0KgB0cMeGzVg3sGoON5Gn0m6H0_p73o&usqp=CAU" },
-  { name: "Ardiuno", icon: "https://siminnovations.com/wiki/images/7/7a/Arduino_logo_round.png" },
+  // { name: "C Sharp", icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk0LQoEffBJcfDkSDSgOusJAqyTFxqMC1dCzwm0KgB0cMeGzVg3sGoON5Gn0m6H0_p73o&usqp=CAU" },
+  { name: "Ardiuno*", icon: "https://siminnovations.com/wiki/images/7/7a/Arduino_logo_round.png" },
   { name: "Node JS", icon: "https://academyclass.com/wp-content/uploads/2021/11/ACCL-NodeJS-1200x1200.png" },
   { name: "MySQL", icon: "https://wallpapers.com/images/hd/my-s-q-l-development-services-circle-logo-xkzj685lk8e3zego.jpg" },
-  { name: "Three JS", icon: "https://pbs.twimg.com/profile_images/1390736294666506242/_D_h6aWq_400x400.png", dark: true },
+  { name: "MongoDB*", icon: "https://x5h8w2v3.rocketcdn.me/wp-content/uploads/2021/10/Logo-MongoDB.png" },
+  { name: "Mongoose", icon: "https://w7.pngwing.com/pngs/948/837/png-transparent-mongoose-hd-logo.png" },
+  { name: "Express", icon: "https://w7.pngwing.com/pngs/925/447/png-transparent-express-js-node-js-javascript-mongodb-node-js-text-trademark-logo.png" },
+  { name: "Three JS*", icon: "https://pbs.twimg.com/profile_images/1390736294666506242/_D_h6aWq_400x400.png", dark: true },
   { name: "Git", icon: "https://cdn-icons-png.flaticon.com/512/4494/4494740.png" },
   { name: "Github", icon: "https://cdn-icons-png.flaticon.com/256/25/25231.png" },
   { name: "VS Code", icon: "https://e1.pngegg.com/pngimages/947/906/png-clipart-clay-os-6-a-macos-icon-visual-studio-code-blue-and-white-illustration.png" },
-  { name: "Java", icon: "https://banner2.cleanpng.com/20180504/obw/kisspng-java-programming-language-computer-programming-obj-java-5aecd0e57187f9.7147867015254694134651.jpg" },
+  // { name: "Java", icon: "https://banner2.cleanpng.com/20180504/obw/kisspng-java-programming-language-computer-programming-obj-java-5aecd0e57187f9.7147867015254694134651.jpg" },
   { name: "Bootstrap", icon: "https://upload.wikimedia.org/wikipedia/commons/b/b2/Bootstrap_logo.svg" },
-  { name: "Google Cloud", icon: "https://bcassetcdn.com/public/blog/wp-content/uploads/2022/08/29150705/Google-Cloud.png" },
+  { name: "Google Cloud*", icon: "https://bcassetcdn.com/public/blog/wp-content/uploads/2022/08/29150705/Google-Cloud.png" },
 ];
 
 const slugs = [
diff --git a/src/Pages/Styles/Equalizer.css b/src/Pages/Styles/Equalizer.css
new file mode 100644
index 0000000..0a54b0f
--- /dev/null
+++ b/src/Pages/Styles/Equalizer.css
@@ -0,0 +1,29 @@
+.bar {
+  animation: bounce 0.5s ease-in-out infinite alternate;
+  transform-origin: bottom; /* Anchor scaling from bottom */
+}
+
+.bar1 {
+  animation-delay: 0.1s;
+}
+
+.bar2 {
+  animation-delay: 0.2s;
+}
+
+.bar3 {
+  animation-delay: 0.3s;
+}
+
+.bar4 {
+  animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+  from {
+    transform: scaleY(0.2); /* Smallest scale */
+  }
+  to {
+    transform: scaleY(1); /* Full height */
+  }
+}
diff --git a/src/components/Assest_Used/Sounds/Music/Audio1_LMK.mp3 b/src/components/Assest_Used/Sounds/Music/Audio1_LMK.mp3
new file mode 100644
index 0000000..539cc33
Binary files /dev/null and b/src/components/Assest_Used/Sounds/Music/Audio1_LMK.mp3 differ
diff --git a/src/components/Assest_Used/Sounds/Music/Audio2_EDEyeClosed.mp3 b/src/components/Assest_Used/Sounds/Music/Audio2_EDEyeClosed.mp3
new file mode 100644
index 0000000..2d5a8ca
Binary files /dev/null and b/src/components/Assest_Used/Sounds/Music/Audio2_EDEyeClosed.mp3 differ
diff --git a/src/components/Assest_Used/Sounds/Music/Audio3_AWAlone.mp3 b/src/components/Assest_Used/Sounds/Music/Audio3_AWAlone.mp3
new file mode 100644
index 0000000..704c169
Binary files /dev/null and b/src/components/Assest_Used/Sounds/Music/Audio3_AWAlone.mp3 differ
diff --git a/src/components/Assest_Used/Sounds/Music/Audio4_EDShape.mp3 b/src/components/Assest_Used/Sounds/Music/Audio4_EDShape.mp3
new file mode 100644
index 0000000..83011fa
Binary files /dev/null and b/src/components/Assest_Used/Sounds/Music/Audio4_EDShape.mp3 differ
diff --git a/src/components/Assest_Used/Sounds/Music/Audio5_AWFaded.mp3 b/src/components/Assest_Used/Sounds/Music/Audio5_AWFaded.mp3
new file mode 100644
index 0000000..231d16d
Binary files /dev/null and b/src/components/Assest_Used/Sounds/Music/Audio5_AWFaded.mp3 differ
diff --git a/src/components/Assest_Used/Sounds/Music/Audio_Bruno.mp3 b/src/components/Assest_Used/Sounds/Music/Audio_Bruno.mp3
new file mode 100644
index 0000000..dd9b7b8
Binary files /dev/null and b/src/components/Assest_Used/Sounds/Music/Audio_Bruno.mp3 differ
diff --git a/src/components/Equalizer.jsx b/src/components/Equalizer.jsx
new file mode 100644
index 0000000..6bb550b
--- /dev/null
+++ b/src/components/Equalizer.jsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import ".././Pages/Styles/Equalizer.css";
+
+const SVGComponent = (props) => (
+  <svg
+    id="equalizer"
+    width="24px"
+    height="26px"
+    viewBox="0 0 25 17.5"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}
+  >
+    <g fill="#fff">
+      <path
+        id="bar1"
+        className="bar bar1"
+        d="M0 12.5H2.5V17.5H0V12.5z"
+      />
+      <path
+        id="bar2"
+        className="bar bar2"
+        d="M7.5 5H10V17.5H7.5V5z"
+      />
+      <path
+        id="bar3"
+        className="bar bar3"
+        d="M15 0H17.5V17.5H15V0z"
+      />
+      <path
+        id="bar4"
+        className="bar bar4"
+        d="M22.5 7.5H25V17.5H22.5V7.5z"
+      />
+    </g>
+  </svg>
+);
+
+export default SVGComponent;
diff --git a/src/components/Music.jsx b/src/components/Music.jsx
new file mode 100644
index 0000000..3a57f89
--- /dev/null
+++ b/src/components/Music.jsx
@@ -0,0 +1,172 @@
+import React, { useState, useRef } from "react";
+import Swal from "sweetalert2";
+import "sweetalert2/dist/sweetalert2.min.css";
+
+import Equalizer from "./Equalizer.jsx";
+import Audio1 from "../components/Assest_Used/Sounds/Music/Audio1_LMK.mp3";
+import Audio2 from "../components/Assest_Used/Sounds/Music/Audio2_EDEyeClosed.mp3";
+import Audio3 from "../components/Assest_Used/Sounds/Music/Audio3_AWAlone.mp3";
+import Audio4 from "../components/Assest_Used/Sounds/Music/Audio4_EDShape.mp3";
+import Audio5 from "../components/Assest_Used/Sounds/Music/Audio5_AWFaded.mp3";
+
+const Music = () => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [currentAudio, setCurrentAudio] = useState(Audio1);
+  const audioRef = useRef(null);
+  const clickTimeout = useRef(null);
+
+  const correctPassword = "ujjwal";
+
+  const handleMusicPlay = async () => {
+    if (!isAuthenticated) {
+      const { value: password } = await Swal.fire({
+        title: "Enter your password",
+        input: "password",
+        inputLabel: "Password",
+        inputPlaceholder: "Enter your password",
+        customClass: {
+          popup: "swal-custom-popup",
+          title: "swal-custom-title",
+          input: "swal-custom-input",
+          confirmButton: "swal-custom-button",
+        },
+        inputAttributes: {
+          maxlength: "10",
+          autocapitalize: "off",
+          autocorrect: "off",
+        },
+        willOpen: () => {
+          document.body.style.overflow = "hidden"; // Disable scroll
+        },
+        willClose: () => {
+          document.body.style.overflow = "auto"; // Restore scroll
+        },
+      });
+
+      if (password) {
+        if (password === correctPassword) {
+          Swal.fire(
+            `Password correct!<br/> Music is playing.<br/> Double Tap on MusicNode to get the next song.`
+          );
+          setIsAuthenticated(true);
+          setIsPlaying(true);
+          audioRef.current.play();
+          audioRef.current.volume = 0.4;
+        } else {
+          Swal.fire(
+            `Incorrect password.<br/>Try again.<br/> You Entered: ${password}<br/>Hint: Something Special!!`
+          );
+        }
+      }
+    } else {
+      handleDoubleClick();
+    }
+  };
+
+  const handleDoubleClick = () => {
+    if (clickTimeout.current) {
+      setNextAudio();
+      clearTimeout(clickTimeout.current);
+      clickTimeout.current = null;
+    } else {
+      clickTimeout.current = setTimeout(() => {
+        clickTimeout.current = null;
+        togglePlayPause();
+      }, 300);
+    }
+  };
+
+  const setNextAudio = () => {
+    setCurrentAudio((prevAudio) => {
+      const audioArray = [Audio1, Audio2, Audio3, Audio4, Audio5];
+      const currentIndex = audioArray.indexOf(prevAudio); // Get the current audio index
+      const nextIndex = (currentIndex + 1) % audioArray.length; // Calculate the next index (cycle back to 0 after 4)
+      return audioArray[nextIndex]; // Setting the next audio
+    });
+    setIsPlaying(true);
+
+    // Remove any previous event listener before adding a new one
+    audioRef.current.removeEventListener(
+      "canplaythrough",
+      handlePlayAfterLoad
+    );
+
+    // Add an event listener to play the audio only once it's ready
+    audioRef.current.addEventListener("canplaythrough", handlePlayAfterLoad);
+    audioRef.current.load(); // Load the new audio source
+  };
+
+  // Function to handle playback after loading
+  const handlePlayAfterLoad = () => {
+    audioRef.current.play();
+  };
+
+  const togglePlayPause = () => {
+    if (isPlaying) {
+      audioRef.current.pause();
+    } else {
+      audioRef.current.play();
+    }
+    setIsPlaying(!isPlaying);
+  };
+
+  const [isHovering, setIsHovering] = useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={handleMusicPlay}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+        style={{ color: "#fff" }}
+      >
+        {isPlaying ? (
+          isHovering ? (
+            <i
+              className="bi bi-pause"
+              style={{ cursor: "pointer", fontSize: "24px", color: "#fff" }}
+            ></i>
+          ) : (
+            <Equalizer
+              style={{
+                cursor: "pointer",
+                width: "24px",
+                height: "26px",
+                color: "#fff",
+                display: "flex",
+                alignItems: "center",
+              }}
+            />
+          )
+        ) : (
+          <i
+            className="bi bi-music-note-beamed"
+            style={{ cursor: "pointer", fontSize: "24px", color: "#fff" }}
+          ></i>
+        )}
+      </button>
+
+      <audio
+        ref={audioRef}
+        src={currentAudio}
+        onEnded={setNextAudio} // Automatically set the next audio when the current one ends
+      />
+      <style jsx>{`
+        .swal-custom-title {
+          font-size: 2.2rem;
+        }
+        .swal-custom-input {
+          font-size: 1.2em;
+          padding: 10px;
+        }
+        .swal-custom-button {
+          font-size: 1.2em;
+          padding: 10px 20px;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Music;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 299df6e..bd3feab 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import useSound from 'use-sound';
 import { useMediaQuery } from 'react-responsive';
 
+import Music from './Music.jsx';
 import USLogopng from '../components/Assest_Used/Us_LogoMain.png';
 import sound from './Assest_Used/Sounds/base.mp3';
 import '../Pages/Styles/Nav.css';
@@ -100,6 +101,9 @@ const About = () => {
                 <motion.div variants={textVariant(4.2)} initial="hidden" animate="show">
                   <li><Link to="/contact" onClick={play} style={{ fontFamily: "'Vidaloka', serif",}}>Contact</Link></li>
                 </motion.div>
+                <motion.div variants={textVariant(4.5)} initial="hidden" animate="show">
+                  <li><Music onClick={play}/></li>
+                </motion.div>
               </ul>
             </nav>
           </header>