diff --git a/src/Homepage/Homepage/Homepage.css b/src/Homepage/Homepage/Homepage.css
index 218e6771f..e1ef0cdff 100644
--- a/src/Homepage/Homepage/Homepage.css
+++ b/src/Homepage/Homepage/Homepage.css
@@ -478,20 +478,15 @@ input.search-input:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 1rem 1rem;
   margin-bottom: 3rem;
-  background: #cfcfcf;
-  color: #000;
-  border-radius: 20px;
-  text-decoration: none;
-  font-weight: 400;
+  border-radius: 50px;
+  margin-top: -1rem;
   font-family: "Press Start 2P", cursive;
   box-shadow: 2px 2px 10px rgb(149, 149, 149);
   transition: background-color 0.3s ease;
 }
 
 .container_card .card .content a:hover {
-  background-color: gold;
   box-shadow: 2px 2px 10px gold;
   color: #000;
 }
diff --git a/src/Homepage/Homepage/Homepage.js b/src/Homepage/Homepage/Homepage.js
index 3320b86c5..37ed0cbe5 100644
--- a/src/Homepage/Homepage/Homepage.js
+++ b/src/Homepage/Homepage/Homepage.js
@@ -9,6 +9,7 @@ import { useState } from "react";
 import DarkMode from "./DarkModeToggle";
 import Instagram from "./instagram.png"
 import Github from "./github.png"
+import Play from "./Play";
 
 
 function Homepage() {
@@ -31,9 +32,9 @@ function Homepage() {
     <React.Fragment>
       <GoToTop />
       <MusicButton />
-       <DarkMode/>
+      <DarkMode />
       {/* Pacman Landing Container */}
-      
+
       <div className="container_landing">
         <div className="pacman"></div>
         <div className="ghost"></div>
@@ -43,12 +44,12 @@ function Homepage() {
         <div className="text"></div>
       </div>
       <div class="page-bg"></div>
-<div class="animation-wrapper">
-  <div class="particle particle-1"></div>
-  <div class="particle particle-2"></div>
-  <div class="particle particle-3"></div>
-  <div class="particle particle-4"></div>
-</div>
+      <div class="animation-wrapper">
+        <div class="particle particle-1"></div>
+        <div class="particle particle-2"></div>
+        <div class="particle particle-3"></div>
+        <div class="particle particle-4"></div>
+      </div>
       <div className="about-section">
         <h2>About</h2>
         <p>Games-And-Go is a website that offers a diverse collection of online games to entertain and engage users of all ages. With a user-friendly interface, the website provides easy access to a wide range of games, including puzzles, arcade classics, strategy games, and more. Users can explore different game categories, choose their favorites, and start playing instantly without the need for downloads or installations. The website aims to provide a fun and immersive gaming experience, allowing players to relax, challenge themselves, and enjoy their leisure time. Whether you're a casual gamer or a dedicated gaming enthusiast, Games-And-Go has something to offer for everyone.</p>
@@ -66,44 +67,44 @@ function Homepage() {
         placeholder="🔍 Search for your favourite game..."
       />
       <div className="body_card">
-        
+
         <div className="container_card">
           {filteredData.map((row) => (
             <div className="card" key={row.serial_number}>
-            <div className="content">
-              {/* Addition of Flip card feature */}
-              <div class="flip-card">
-                <div class="flip-card-inner">
-                  <div class="flip-card-front">
-                    <div>
-                      <h2>{row.serial_number}</h2>
-                      <h3>{row.main_heading}</h3>
-                      
+              <div className="content">
+                {/* Addition of Flip card feature */}
+                <div class="flip-card">
+                  <div class="flip-card-inner">
+                    <div class="flip-card-front">
+                      <div>
+                        <h2>{row.serial_number}</h2>
+                        <h3>{row.main_heading}</h3>
+
+                      </div>
+
+                    </div>
+                    <div class="flip-card-back">
+                      <div class="rule_heading">{row.rule_heading}</div>
+                      <div class="step">{row.step1}</div>
+                      <div class="step">{row.step2}</div>
+                      <div class="step">{row.step3}</div>
                     </div>
-                    
-                  </div>
-                  <div class="flip-card-back">
-                    <div class="rule_heading">{row.rule_heading}</div>
-                    <div class="step">{row.step1}</div>
-                    <div class="step">{row.step2}</div>
-                    <div class="step">{row.step3}</div>
                   </div>
                 </div>
+                {/* Flip card feature ends here. */}
+                <p>{row.about} </p>
+                {/* Create a route for your game and add it in AllRoutes.js in Routes folder then add the link in data1 in Data Folder */}
+                <Link to={row.link_game}><Play /></Link>
               </div>
-              {/* Flip card feature ends here. */}
-              <p>{row.about} </p>
-              {/* Create a route for your game and add it in AllRoutes.js in Routes folder then add the link in data1 in Data Folder */}
-              <Link to={row.link_game}>Play now !!!</Link>
             </div>
-          </div>
           ))}
         </div>
       </div>
-      
+
       <div className="copyright">
         <div className="social-icons">
-        <a href="https://www.instagram.com/ieeessit/"><img classNmae="icons" src={Instagram}/></a>
-        <a href="https://github.com/ssitvit/Games-and-Go"><img classNmae="icons" src={Github}/></a>
+          <a href="https://www.instagram.com/ieeessit/"><img classNmae="icons" src={Instagram} /></a>
+          <a href="https://github.com/ssitvit/Games-and-Go"><img classNmae="icons" src={Github} /></a>
         </div>
         <h3>&copy;Copyright IEEE-SSIT {new Date().getFullYear()}</h3>
       </div>
diff --git a/src/Homepage/Homepage/Play.js b/src/Homepage/Homepage/Play.js
new file mode 100644
index 000000000..6b2b4b933
--- /dev/null
+++ b/src/Homepage/Homepage/Play.js
@@ -0,0 +1,25 @@
+import React from "react";
+
+const TrianglePlayLogo = () => {
+  return (
+    <svg
+      width="50px"
+      height="50px"
+      viewBox="0 0 130 120"
+      fill="none"
+      stroke="black"
+      stroke-width="5"
+    >
+      <path
+        d="M20,50 L50,0 L80,50 Z"
+        transform="rotate(90, 50, 50)"
+      />
+      <path
+        d="M20,50 L50,0 L80,50 Z"
+        transform="rotate(90, 38, 38)"
+      />
+    </svg>
+  );
+};
+
+export default TrianglePlayLogo;