diff --git a/index.html b/index.html
index 5dfc5be..8d61a01 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
+    
 </head>
 <body>
     <!-- Header and Navigation -->
@@ -694,18 +695,38 @@ <h2>Personal Projects</h2>
                 <!-- Project List -->
                 <ul class="list-group">
 
+                    <!-- Project Item -->
+                    <li class="list-group-item project">
+                        <div class="icon">
+                            <i class="fas fa-project-diagram language-icon"></i>
+                        </div>
+                        <h3 class="font-color">Github GraphQL</h3>
+                        <p>React-based web application <br>that interfaces with the GitHub GraphQL API, 
+                        allowing users to search and retrieve<br> detailed information about GitHub repositories,
+                            for collecting/exploring repository data using GraphQL queries.</p>
+                        <div class="project-details">
+                            <a href="https://github.com/SV592/github_graph_ql" target="_blank" class="button">
+                                <i class="fab fa-github project-tags"></i> <span>View</span>
+                            </a>
+                            <div class="about-icons">
+                                <i class="fab fa-react"></i> 
+                                <i class="fab fa-js"></i> 
+                            </div>
+                        </div>
+                    </li>
+
                     <!-- Project Item -->
                     <li class="list-group-item project">
                         <div class="icon">
                             <i class="fab fa-readme language-icon"></i>
                         </div>
-                        <h3 class="font-color">Flashcard App</h3>
+                        <h3 class="font-color">Flashcard</h3>
                         <p>A Flashcard App built using React Native,<br> allowing users to create, edit, 
                            and store flashcards locally with persistent storage through React Native Local
                            <br>Storage. The app is designed for offline use, providing a simple and effective tool for studying and reviewing information.</p>
                         <div class="project-details">
                             <a href="https://github.com/SV592/Flashcard-App-" target="_blank" class="button">
-                                <i class="fab fa-github project-tags"></i> <span>GitHub</span>
+                                <i class="fab fa-github project-tags"></i> <span>View</span>
                             </a>
                             <div class="about-icons">
                                 <i class="fab fa-react"></i> 
@@ -725,7 +746,7 @@ <h3 class="font-color">Pomodoro</h3>
                         <br>timers for focused work sessions and breaks, providing a simple and efficient tool for improving productivity.</p>
                         <div class="project-details">
                             <a href="https://github.com/SV592/Pomodoro-App-" target="_blank" class="button">
-                                <i class="fab fa-github project-tags"></i> <span>GitHub</span>
+                                <i class="fab fa-github project-tags"></i> <span>View</span>
                             </a>
                             <div class="about-icons">
                                 <i class="fab fa-react"></i> 
@@ -733,20 +754,6 @@ <h3 class="font-color">Pomodoro</h3>
                             </div>
                         </div>
                     </li>
-
-                    <!-- Project Item -->
-                    <li class="list-group-item project">
-                        <div class="icon">
-                            <i class="fas fa-sticky-note language-icon"></i>
-                        </div>
-                        <h3 class="font-color">Project 3</h3>
-                        <p>Coming Soon!</p>
-                        <div class="project-details">
-                            <a href="" target="_blank" class="button">
-                                <i class="fab fa-github project-tags"></i> <span>GitHub</span>
-                            </a>
-                        </div>
-                    </li>
                 </ul>
             </section>
     </main>
diff --git a/styles.css b/styles.css
index b1d94b3..ad8c901 100644
--- a/styles.css
+++ b/styles.css
@@ -38,6 +38,11 @@ li {
   color: #777;
 }
 
+section{
+  transition: all 0.3s ease;
+  text-rendering: optimizeLegibility;
+  text-rendering: optimizeSpeed;
+}
 
 /* Header styles */
 .navbar-dark .navbar-nav .nav-link {
@@ -155,12 +160,12 @@ section ul li {
   transition: all 0.3s ease;
   position: relative;
   min-height: 450px;
-  transition: all 0.3s ease;
+  transition: all 0.3s ease-in-out;
 }
 
 .about-content:hover {
   box-shadow: 0 0 10px rgba(0, 128, 0, 0.3); /* darker green shadow on hover */
-  transform: scale(1.01);
+  transform: scale(1.01) translateZ(0)
 }
 
 #about p {
