diff --git a/resources/views/StudentPortal.blade.php b/resources/views/StudentPortal.blade.php
index 1e307f9..5723811 100644
--- a/resources/views/StudentPortal.blade.php
+++ b/resources/views/StudentPortal.blade.php
@@ -108,12 +108,13 @@ body{
 
 .service-card i{
     font-size:45px;
-    color:var(--primary);
+    color: #6C2B2E;
     margin-bottom:20px;
 }
 
 .service-card h5{
     font-weight:700;
+    color: #773939;
 }
 
 .service-card p{
diff --git a/resources/views/abouts.blade.php b/resources/views/abouts.blade.php
index 56288bd..f24041a 100644
--- a/resources/views/abouts.blade.php
+++ b/resources/views/abouts.blade.php
@@ -160,7 +160,7 @@ body {
     .btn-view-courses{
     background: #822424;
     color: #fff;
-    padding: 14px 35px;
+    /* padding: 14px ; */
     border-radius: 40px;
     font-weight: 600;
     transition: all 0.3s ease;
@@ -242,7 +242,7 @@ body {
 
 .hero-about {
     min-height: 60vh;
-    background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
+    background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)),url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1600&q=80');
     background-size: cover;
     background-position: center;
     display: flex;
diff --git a/resources/views/contacts.blade.php b/resources/views/contacts.blade.php
index ebd54f1..229523a 100644
--- a/resources/views/contacts.blade.php
+++ b/resources/views/contacts.blade.php
@@ -28,7 +28,7 @@ body {
 .hero-contact{
     min-height:50vh;
     background:
-    linear-gradient(rgba(218, 225, 255, 0.56), rgba(0, 0, 0, 0.8)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
+    linear-gradient(rgba(233, 236, 246, 0.6), rgba(39, 35, 35, 0.71)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
     background-size:cover;
     background-position:center;
     display:flex;
@@ -94,7 +94,7 @@ body {
 }
 
 .info-card i {
-    color: #FFC926 !important;
+    color: #861E28 !important;
     transition: color 0.3s ease;
 }
 
@@ -135,7 +135,7 @@ body {
     <div class="container">
         <div class="animate-item animated fade-up-init">
             <h1 class="fw-bold display-4">Contact Us</h1>
-            <p class="fs-5 text-white-50">We are here to help you. Reach us anytime.</p>
+            <p class="fs-5 text-white-50" style="color:rgba(255, 255, 255, 0.8) !important">We are here to help you. Reach us anytime.</p>
         </div>
     </div>
 </section>
diff --git a/resources/views/courses.blade.php b/resources/views/courses.blade.php
index 203641a..5257137 100644
--- a/resources/views/courses.blade.php
+++ b/resources/views/courses.blade.php
@@ -506,11 +506,11 @@ $courses=[
 {{-- Why Study With Us Section --}}
 <section  class="pb-5 why-study-section>
     <div class="container">
-    <div class="features-section text-center animate-on-scroll fade-up-init" 
-         style="background-image: linear-gradient(rgba(110, 126, 166, 0.84), rgba(15, 23, 42, 0.90)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
-                background-size: cover;
-                background-position: center;
-                background-repeat: no-repeat;">
+    <<div class="features-section text-center animate-on-scroll fade-up-init" 
+     style="background-image: linear-gradient(rgba(77, 103, 169, 0.61), rgba(0, 0, 0, 0.9)), url('https://images.pexels.com/photos/4489749/pexels-photo-4489749.jpeg?auto=compress&cs=tinysrgb&w=1600');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;">
             <h2>Why Study With Us?</h2>
             <!-- <div class="section-divider"></div> -->
             
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index d378208..5820ef2 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -43,6 +43,7 @@
             margin-left: 20px;
             transition: 0.2s ease;
             font-weight: bold;
+            font-size: 18px;
         }
  
         .nav-link:hover,
diff --git a/resources/views/layouts/studentportalnav.blade.php b/resources/views/layouts/studentportalnav.blade.php
index 105b2e2..113f9ee 100644
--- a/resources/views/layouts/studentportalnav.blade.php
+++ b/resources/views/layouts/studentportalnav.blade.php
@@ -13,11 +13,11 @@
     <style>
         /* Global Root Variables */
         :root {
-            --primary: #000000;  
+            --primary: #642326;  
             --background: #f5f6fb;
             --sidebar-width: 260px;
             --text-color: #333333;
-            --sidebar-bg: #5E244E;
+            --sidebar-bg: #282d55;
         }
 
         * {
@@ -82,6 +82,7 @@
             flex-direction: column;
             flex-grow: 1;
             overflow-y: auto;
+            color: #2e2750;
         }
 
         .sidebar .nav-link {
@@ -184,7 +185,7 @@
             opacity: 1;
         }
 
-        /* ---------- Responsive Media Queries (Mobile & Tablets) ---------- */
+      
         @media (max-width: 991px) {
             .sidebar {
                 left: calc(-1 * var(--sidebar-width)); 
diff --git a/resources/views/students.blade.php b/resources/views/students.blade.php
index f9df8ad..9e1cc2b 100644
--- a/resources/views/students.blade.php
+++ b/resources/views/students.blade.php
@@ -36,6 +36,7 @@ body {
     color: #fff;
     padding: 80px 0; 
     text-align: center;
+    height: 480px;
 }
 
 .portal-card {
@@ -74,10 +75,10 @@ body {
 }
 
 .btn-portal {
-    background: var(--primary-light);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color: #fff;
     padding: 12px 35px;
-    border: none;
+   
     border-radius: 8px;
     font-weight: 600;
     transition: all 0.3s ease;
@@ -85,9 +86,14 @@ body {
 
 .btn-portal:hover {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
-    color: #fff;
+    color: #f4ff8d;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
+    
+}
+
+.btn:hover {
+  border-color: rgba(255, 255, 255, 0.98);
 }
  
 .modal-content {
@@ -196,6 +202,21 @@ body {
     box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
 }
 
+.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;
+}
+
+
 /* ========================================================
    Custom CSS Scroll Animations
    ======================================================== */
@@ -221,10 +242,13 @@ body {
     opacity: 1;
     transform: translate(0) scale(1);
 }
+/* .rounded-pill {
+  border-radius: inherit;
+} */
 </style>
 
 <section class="hero">
-    <div class="container">
+    <div class="container" style="padding-top: 46px;">
         <div class="animate-item animated fade-up-init">
             <h1 class="fw-bold display-5">Student Portal</h1>
             <p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
@@ -314,27 +338,88 @@ body {
 </section>
 
 <!-- QUICK LINKS -->
-<section class="py-5 bg-light overflow-hidden">
+<!-- <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">
+        <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">Academic Calendar</a>
+                <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">Student Handbook</a>
+                <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">Examination Notices</a>
+                <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">Contact Support</a>
+                <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">
+        
+        <!-- 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>
+        </div>
+
+        <!-- Quick Links Grid -->
+        <div class="row g-3 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>
+                    <span class="fw-bold" style="color: #002886; font-size: 19px;">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>
+                    <span class="fw-bold" style="color: #002886; font-size: 19px;">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>
+                    <span class="fw-bold" style="color: #002886; font-size: 19px;">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>
+                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Contact Support</span>
+                </a>
+            </div>
+
+        </div>
+    </div>
 </section>
 
 <!-- BOTTOM CTA -->
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 84067d2..126bc20 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -101,7 +101,7 @@ body {
 
 
 .hero {
-    height: 650px;
+    height:636px;
     background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
     background-position: center;
     background-size: cover;
@@ -118,7 +118,7 @@ body {
 }
 
 .hero h1 {
-    font-size: 60px;
+    font-size: 63px;
     font-weight: 800;
     margin-top: -87px;
     text-shadow: 0 2px 15px rgba(0,0,0,0.3);
@@ -427,36 +427,37 @@ body {
             @foreach($courses as $key => $course)
                 <div class="col-lg-4 col-md-6 d-flex align-items-stretch animate-on-scroll fade-up-init" style="transition-delay: {{ $key * 100 }}ms;">
                     <div class="card course-card w-100 d-flex flex-column">
-                        
-                        <div class="course-image-wrapper">
-                            <span class="badge-floating">{{ $course['badge'] }}</span>
-                            <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
-                        </div>
-                        
-                        <div class="card-body">
-                            <h4 class="course-title">{{ $course['title'] }}</h4>
-                            <div class="course-author">
-                                <i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }}
-                            </div>
-                            <p class="course-short-desc">{{ $course['desc'] }}</p>
-                            
-                            <div class="course-features-container">
-                                <span class="feature-pill"><i class="fas fa-tools"></i> Practical Labs</span>
-                                <span class="feature-pill"><i class="fas fa-certificate"></i> Accredited</span>
+                         <a href="/courses" style="text-decoration:none;">
+                            <div class="course-image-wrapper">
+                                <span class="badge-floating">{{ $course['badge'] }}</span>
+                                <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
                             </div>
+                        
+                                <div class="card-body">
+                                    <h4 class="course-title">{{ $course['title'] }}</h4>
+                                    <div class="course-author">
+                                        <i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }}
+                                    </div>
+                                    <p class="course-short-desc">{{ $course['desc'] }}</p>
+                                    
+                                    <div class="course-features-container">
+                                        <span class="feature-pill"><i class="fas fa-tools"></i> Practical Labs</span>
+                                        <span class="feature-pill"><i class="fas fa-certificate"></i> Accredited</span>
+                                    </div>
 
-                            <!-- Footer wrapped inside card-body with margin-top: auto to perfectly align elements -->
-                            <div class="course-footer">
-                                <div class="course-meta-row">
-                                    <span class="rating-star">
-                                        <i class="fas fa-star me-1"></i>{{ $course['rating'] }}
-                                        <span class="rating-count">({{ $course['students'] }})</span>
-                                    </span>
-                                    <span class="small fw-bold" style="color: #2ecc71;"><i class="fa-solid fa-circle-check me-1"></i>Active</span>
+                                    <!-- Footer wrapped inside card-body with margin-top: auto to perfectly align elements -->
+                                    <div class="course-footer">
+                                        <div class="course-meta-row">
+                                            <span class="rating-star">
+                                                <i class="fas fa-star me-1"></i>{{ $course['rating'] }}
+                                                <span class="rating-count">({{ $course['students'] }})</span>
+                                            </span>
+                                            <span class="small fw-bold" style="color: #2ecc71;"><i class="fa-solid fa-circle-check me-1"></i>Active</span>
+                                        </div>
+                                        <a href="/courses" class="read-btn">View Details</a>
+                                    </div>
                                 </div>
-                                <a href="/courses" class="read-btn">View Details</a>
-                            </div>
-                        </div>
+                        </a>
 
                     </div>
                 </div>