diff --git a/resources/views/abouts.blade.php b/resources/views/abouts.blade.php
index 9e0e0f2..c452b3c 100644
--- a/resources/views/abouts.blade.php
+++ b/resources/views/abouts.blade.php
@@ -447,7 +447,7 @@ body {
             </p>
         </div>
     </div>
-
+  
     <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
         <div class="about-box text-center">
             <div class="icon-circle">
diff --git a/resources/views/students.blade.php b/resources/views/students.blade.php
index 9e1cc2b..a9b98e9 100644
--- a/resources/views/students.blade.php
+++ b/resources/views/students.blade.php
@@ -30,7 +30,6 @@ body {
 .hero {
     background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6)),
     url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
-    
     background-size: cover;
     background-position: center;
     color: #fff;
@@ -78,7 +77,6 @@ body {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color: #fff;
     padding: 12px 35px;
-   
     border-radius: 8px;
     font-weight: 600;
     transition: all 0.3s ease;
@@ -89,7 +87,6 @@ body {
     color: #f4ff8d;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
-    
 }
 
 .btn:hover {
@@ -203,23 +200,15 @@ body {
 }
 
 .bg-light {
-  background: linear-gradient(rgba(162, 190, 255, 0.49), rgba(237, 235, 255, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600');
-    background-position-x: 0%, 0%;
-    background-position-y: 0%, 0%;
-    background-repeat: repeat, repeat;
-    background-attachment: scroll, scroll;
-    background-size: auto, auto;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  color: white;
+    background: linear-gradient(rgba(162, 190, 255, 0.49), rgba(237, 235, 255, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    color: white;
 }
 
-
-/* ========================================================
-   Custom CSS Scroll Animations
-   ======================================================== */
+/* Scroll Animations */
 .animate-item {
     opacity: 0;
     will-change: transform, opacity;
@@ -242,11 +231,9 @@ body {
     opacity: 1;
     transform: translate(0) scale(1);
 }
-/* .rounded-pill {
-  border-radius: inherit;
-} */
 </style>
 
+<!-- HERO SECTION -->
 <section class="hero">
     <div class="container" style="padding-top: 46px;">
         <div class="animate-item animated fade-up-init">
@@ -337,84 +324,79 @@ body {
     </div>
 </section>
 
-<!-- QUICK LINKS -->
-<!-- <section class="py-5 bg-light overflow-hidden">
-    <div class="container">
-        <div class="text-center mb-5 animate-item fade-up-init">
-            <h2 class="fw-bold">Quick Links</h2>
-        </div>
-
-        <div class="row text-center animate-item slide-right-init" style="color:white;">
-            <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Academic Calendar</a>
-            </div>
-            <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Student Handbook</a>
-            </div>
-            <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Examination Notices</a>
-            </div>
-            <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Contact Support</a>
-            </div>
-        </div>
-    </div>
-</section> -->
-
-<section class="py-5 overflow-hidden" 
-         style="background: linear-gradient(rgba(25, 48, 102, 0.49), rgba(10, 9, 17, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; color: white; height: 395px; ">
-    <div class="container">
+<!-- QUICK LINKS (FIXED WITH FONTAWESOME ICONS & RESPONSIVE LAYOUT) -->
+<section class="py-5 position-relative overflow-hidden" 
+         style="background: linear-gradient(rgba(86, 94, 110, 0.57), rgba(10, 9, 17, 0.92)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; min-height: 380px; display: flex; align-items: center;">
+    <div class="container py-2">
         
         <!-- Section Title -->
         <div class="text-center mb-5 animate-item fade-up-init">
-            <h2 class="fw-bold mb-2" style="color: #ffffff;">Quick Links</h2>
-            <p style="color: #ffffff; font-size: 0.95rem; font-weight: 500;">Access important student portals and resources instantly</p>
+            <h2 class="fw-bold mb-2 text-white display-6">Quick Links</h2>
+            <p class="text-white-50 fs-6 mx-auto" style="max-width: 500px;">
+                Access important student portals and official resources instantly
+            </p>
         </div>
 
         <!-- Quick Links Grid -->
-        <div class="row g-3 justify-content-center animate-item slide-right-init">
+        <div class="row g-4 justify-content-center animate-item slide-right-init">
             
             <!-- Link 1 -->
-            <div class="col-6 col-md-3">
-                <a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center" 
-                   style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
-                    <div style="color: #0284c7; font-size: 2rem;" class="mb-2">
-                        <i class="bi bi-calendar-event"></i>
+            <div class="col-12 col-sm-6 col-lg-3">
+                <a href="#" class="text-decoration-none p-4 rounded-4 text-center d-flex flex-column align-items-center h-100 shadow-sm"
+                   style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease;"
+                   onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
+                   onmouseout="this.style.transform='translateY(0)'; this.style.background='rgba(255, 255, 255, 0.85)'; this.style.boxShadow='none';">
+                    
+                    <div class="mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(108, 55, 55);
+                    color: #fff; transition: all 0.3s ease;">
+                        <i class="fa-solid fa-calendar-days fs-3"></i>
                     </div>
-                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Academic Calendar</span>
+                    <span class="fw-bold text-dark fs-6 mt-auto">Academic Calendar</span>
                 </a>
             </div>
 
             <!-- Link 2 -->
-            <div class="col-6 col-md-3">
-                <a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center" 
-                   style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
-                    <div style="color: #0284c7; font-size: 2rem;" class="mb-2">
-                        <i class="bi bi-journal-bookmark"></i>
+            <div class="col-12 col-sm-6 col-lg-3">
+                <a href="#" class="text-decoration-none p-4 rounded-4 text-center d-flex flex-column align-items-center h-100 shadow-sm"
+                   style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease;"
+                   onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
+                   onmouseout="this.style.transform='translateY(0)'; this.style.background='rgba(255, 255, 255, 0.85)'; this.style.boxShadow='none';">
+                    
+                    <div class="mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(108, 55, 55);
+                    color: #fff; transition: all 0.3s ease;">
+                        <i class="fa-solid fa-book-bookmark fs-3"></i>
                     </div>
-                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Student Handbook</span>
+                    <span class="fw-bold text-dark fs-6 mt-auto">Student Handbook</span>
                 </a>
             </div>
 
             <!-- Link 3 -->
-            <div class="col-6 col-md-3">
-                <a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center" 
-                   style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
-                    <div style="color: #0284c7; font-size: 2rem;" class="mb-2">
-                        <i class="bi bi-file-earmark-text"></i>
+            <div class="col-12 col-sm-6 col-lg-3">
+                <a href="#" class="text-decoration-none p-4 rounded-4 text-center d-flex flex-column align-items-center h-100 shadow-sm"
+                   style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease;"
+                   onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
+                   onmouseout="this.style.transform='translateY(0)'; this.style.background='rgba(255, 255, 255, 0.85)'; this.style.boxShadow='none';">
+                    
+                    <div class="mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(108, 55, 55);
+                    color: #fff; transition: all 0.3s ease;">
+                        <i class="fa-solid fa-file-lines fs-3"></i>
                     </div>
-                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Examination Notices</span>
+                    <span class="fw-bold text-dark fs-6 mt-auto">Examination Notices</span>
                 </a>
             </div>
 
             <!-- Link 4 -->
-            <div class="col-6 col-md-3">
-                <a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center" 
-                   style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
-                    <div style="color: #0284c7; font-size: 2rem;" class="mb-2">
-                        <i class="bi bi-headset"></i>
+            <div class="col-12 col-sm-6 col-lg-3">
+                <a href="#" class="text-decoration-none p-4 rounded-4 text-center d-flex flex-column align-items-center h-100 shadow-sm"
+                   style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease;"
+                   onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
+                   onmouseout="this.style.transform='translateY(0)'; this.style.background='rgba(255, 254, 254, 0.85)'; this.style.boxShadow='none';">
+                    
+                    <div class="mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(108, 55, 55);
+                    color: #fff;; transition: all 0.3s ease;">
+                        <i class="fa-solid fa-headset fs-3" ></i>
                     </div>
-                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Contact Support</span>
+                    <span class="fw-bold text-dark fs-6 mt-auto">Contact Support</span>
                 </a>
             </div>
 
@@ -451,7 +433,7 @@ body {
                     <div class="mb-3">
                         <label for="username" class="form-label">Username / Student ID</label>
                         <div class="input-group">
-                            <span class="input-group-text"><i class="fa-solid fa-user-graduate"></i></span>
+                            <span class="input-group-text"> <i class="fa-solid fa-user-graduate"></i></span>
                             <input type="text" name="username" id="username" class="form-control" placeholder="Enter your student ID" required>
                         </div>
                     </div>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index b27df2d..021243f 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -286,7 +286,7 @@ body {
     left: 0; 
     width: 100%; 
     height: 100%;
-    background: linear-gradient(rgba(17, 17, 39, 0.9), rgba(0, 9, 15, 0.31)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
+    background: linear-gradient(rgba(17, 17, 39, 0.9), rgba(0, 9, 15, 0.6)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
     background-position: center;
     background-size: cover;
     z-index: 1;
@@ -560,7 +560,7 @@ body {
                     {{-- Interest Area Field --}}
                     <div class="mb-4">
                         <label for="interestArea" class="form-label fw-semibold text-dark small fs-6">
-                            <i class="fa-solid fa-car-battery me-1 text-primary"></i> Which area of Automotive Engineering interests you most?
+                            <!-- <i class="fa-solid fa-car-battery me-1 text-primary"></i> Which area of Automotive Engineering interests you most? -->
                         </label>
                         <select class="form-select form-select-lg border-2 fs-6" id="interestArea" required>
                             <option value="" selected disabled>Select Field of Interest</option>