diff --git a/Frontend/src/CSS/Footer.css b/Frontend/src/CSS/Footer.css
index 5a6daba..4aa27cd 100644
--- a/Frontend/src/CSS/Footer.css
+++ b/Frontend/src/CSS/Footer.css
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Croissant+One&family=Inconsolata:wght@200;900&family=Rubik:wght@300&display=swap");
-
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
 :root {
   --color-1: rgb(205, 180, 219);
   --color-2: rgb(255, 200, 221);
@@ -97,6 +97,14 @@ ul li {
 .social-icons svg:hover {
   color: rgb(255, 0, 251);
 }
+.section i{
+  margin-bottom: 20px;
+  transition: transform 0.3s ease;
+}
+.section i:hover{
+  transform: translateY(-5px);
+  color: rgb(161, 14, 151);
+}
 
 @media (max-width: 768px) {
   .footer {
diff --git a/Frontend/src/Components/Footer.jsx b/Frontend/src/Components/Footer.jsx
index 5d372a2..0d8b216 100644
--- a/Frontend/src/Components/Footer.jsx
+++ b/Frontend/src/Components/Footer.jsx
@@ -33,12 +33,15 @@ const Footer = () => {
         <div className="section">
           <h2>SpectaStyle</h2>
           <div className="email-signup">
-          <input
-                      type="email"
-                      name="email"
-                      placeholder="Enter Email"
-                      style={{ border: "3px solid var(--color-6)", borderRadius: "10px" }}
-                    />
+            <input
+              type="email"
+              name="email"
+              placeholder="Enter Email"
+              style={{
+                border: "3px solid var(--color-6)",
+                borderRadius: "10px",
+              }}
+            />
             <button>Get monthly updates and free resources</button>
           </div>
         </div>
@@ -46,10 +49,10 @@ const Footer = () => {
         <div className="section">
           <h2>Routes</h2>
           <ul>
-            <li onClick={()=>navigate('/about')}>About Us</li>
+            <li onClick={() => navigate("/about")}>About Us</li>
             <li>Services</li>
-            <li onClick={()=>navigate('/contact')}>Get In Touch</li>
-            <li onClick={()=>navigate('/faq')}>FAQ</li>
+            <li onClick={() => navigate("/contact")}>Get In Touch</li>
+            <li onClick={() => navigate("/faq")}>FAQ</li>
             <div className="social-icons">
               <Facebook />
               <XIcon />
@@ -61,10 +64,25 @@ const Footer = () => {
 
         <div className="section">
           <h2>About Us</h2>
-          <z>Phone: +91 565 8989 878</z>
-          <z>Email: spectastyle@gmail.com</z>
-          <z>Address: 1234 Smart Street,Nagpur 440058</z>
-          <z style={{fontWeight:'bolder'}}>Design and Develop by <a style={{textDecoration:'none'}} href="https://harshalwebfolio.netlify.app">❤️Harshal Honde❤️</a></z>
+          <i className="fa fa-phone">
+            <z>   Phone: +91 565 8989 878</z>
+          </i>
+
+          <i className="fa fa-envelope">
+              <z>   Email: spectastyle@gmail.com</z>
+          </i>
+          <i className="fa fa-building">
+              <z>   Address: 1234 Smart Street,Nagpur 440058</z>
+          </i>
+          <z style={{ fontWeight: "bolder" }}>
+            Design and Develop by{" "}
+            <a
+              style={{ textDecoration: "none" }}
+              href="https://harshalwebfolio.netlify.app"
+            >
+              ❤️Harshal Honde❤️
+            </a>
+          </z>
         </div>
 
         <div className="section">
@@ -76,14 +94,22 @@ const Footer = () => {
           </ul>
         </div>
         {showBackToTop && (
-        <div id="back-to-top-container">
-      <div class="circle1" onClick={scrollToTop}>
-    <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-      <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
-    </svg>
-    </div>
-    </div>
-    )}
+          <div id="back-to-top-container">
+            <div class="circle1" onClick={scrollToTop}>
+              <svg
+                id="back-to-top"
+                xmlns="http://www.w3.org/2000/svg"
+                width="40"
+                height="40"
+                fill="currentColor"
+                class="bi bi-arrow-up-circle-fill"
+                viewBox="0 0 16 16"
+              >
+                <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+              </svg>
+            </div>
+          </div>
+        )}
       </footer>
     </Fragment>
   );