diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index c65499e4..6e772bd2 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -75,13 +75,13 @@
 				{{ course.title }}
 			</div>
 
-			<!-- Short intro -->
-			<p class="text-xs text-ink-gray-5 leading-relaxed line-clamp-2 mb-3 mt-0.5">
+			<!-- Short intro: fixed 2-line height so cards stay aligned -->
+			<p class="text-xs text-ink-gray-5 leading-relaxed line-clamp-2 mb-3 mt-0.5" style="min-height: 2.5rem">
 				{{ course.short_introduction }}
 			</p>
 
-			<!-- Stats row -->
-			<div class="flex items-center gap-3 text-xs text-ink-gray-5 mb-3 flex-wrap">
+			<!-- Stats row: always occupies space even when empty -->
+			<div class="flex items-center gap-3 text-xs text-ink-gray-5 mb-3 flex-wrap" style="min-height: 1.25rem">
 				<span v-if="course.lessons" class="flex items-center gap-1">
 					<BookOpen class="h-3.5 w-3.5" />
 					{{ course.lessons }} {{ __('lessons') }}
diff --git a/frontend/src/pages/Courses/Courses.vue b/frontend/src/pages/Courses/Courses.vue
index 1da012cf..9d90f3de 100644
--- a/frontend/src/pages/Courses/Courses.vue
+++ b/frontend/src/pages/Courses/Courses.vue
@@ -47,33 +47,22 @@
 		</Dropdown>
 	</header>
 
-	<!-- Hero search bar -->
-	<div class="bg-gradient-to-br from-ink-gray-9 to-surface-gray-7 px-5 py-8">
-		<div class="max-w-xl">
-			<div class="flex items-center gap-2 mb-1">
-				<BookOpen class="h-5 w-5 text-ink-blue-3" />
-				<span class="text-xs font-semibold text-ink-blue-3 uppercase tracking-wider">
-					{{ __('Courses') }}
-				</span>
-			</div>
-			<h1 class="text-2xl font-bold text-white mb-4">{{ __('Explore Our Courses') }}</h1>
-			<div class="relative">
-				<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-gray-5" />
-				<input
-					v-model="title"
-					type="text"
-					:placeholder="__('Search by title...')"
-					class="w-full pl-9 pr-4 py-2.5 rounded-lg bg-white border border-outline-gray-2 text-sm text-ink-gray-9 focus:outline-none focus:ring-2 focus:ring-ink-blue-3"
-					@input="updateCourses()"
-				/>
-			</div>
-		</div>
-	</div>
-
 	<div class="p-5 pb-10">
 		<!-- Filters row -->
 		<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
-			<TabButtons :buttons="courseTabs" v-model="currentTab" class="w-fit" />
+			<div class="flex items-center gap-2 flex-wrap">
+				<TabButtons :buttons="courseTabs" v-model="currentTab" class="w-fit" />
+				<div class="relative">
+					<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-ink-gray-4 pointer-events-none" />
+					<input
+						v-model="title"
+						type="text"
+						:placeholder="__('Search...')"
+						class="pl-8 pr-3 py-1.5 rounded-md border border-outline-gray-2 text-sm text-ink-gray-9 bg-surface-white focus:outline-none focus:ring-1 focus:ring-ink-blue-3 w-44"
+						@input="updateCourses()"
+					/>
+				</div>
+			</div>
 			<div class="flex items-center gap-3 flex-wrap">
 				<div class="min-w-0 w-36">
 					<Select
diff --git a/frontend/src/pages/Olympiads/Olympiads.vue b/frontend/src/pages/Olympiads/Olympiads.vue
index d18f7727..0f5756dd 100644
--- a/frontend/src/pages/Olympiads/Olympiads.vue
+++ b/frontend/src/pages/Olympiads/Olympiads.vue
@@ -5,36 +5,22 @@
 		<Breadcrumbs :items="breadcrumbs" />
 	</header>
 
-	<!-- Hero banner -->
-	<div class="bg-gradient-to-br from-ink-gray-9 to-surface-gray-7 px-5 py-10 text-white">
-		<div class="max-w-2xl">
-			<div class="flex items-center gap-2 mb-2">
-				<Trophy class="h-6 w-6 text-ink-amber-3" />
-				<span class="text-sm font-medium text-ink-amber-3 uppercase tracking-wider">
-					{{ __('Olympiads') }}
-				</span>
-			</div>
-			<h1 class="text-3xl font-bold mb-3">{{ __('Academic Olympiads') }}</h1>
-			<p class="text-base text-surface-gray-3 mb-6">
-				{{ __('Test your knowledge, compete with peers and earn recognition.') }}
-			</p>
-			<div class="relative max-w-sm">
-				<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-gray-5" />
-				<input
-					v-model="searchQuery"
-					type="text"
-					:placeholder="__('Search olympiads...')"
-					class="w-full pl-9 pr-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm"
-					@input="debouncedSearch"
-				/>
-			</div>
-		</div>
-	</div>
-
 	<div class="p-5 pb-10">
 		<!-- Tab filters -->
 		<div class="flex items-center justify-between mb-6 flex-wrap gap-3">
-			<TabButtons :buttons="statusTabs" v-model="currentStatus" class="w-fit" />
+			<div class="flex items-center gap-2 flex-wrap">
+				<TabButtons :buttons="statusTabs" v-model="currentStatus" class="w-fit" />
+				<div class="relative">
+					<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-ink-gray-4 pointer-events-none" />
+					<input
+						v-model="searchQuery"
+						type="text"
+						:placeholder="__('Search...')"
+						class="pl-8 pr-3 py-1.5 rounded-md border border-outline-gray-2 text-sm text-ink-gray-9 bg-surface-white focus:outline-none focus:ring-1 focus:ring-ink-blue-3 w-44"
+						@input="debouncedSearch"
+					/>
+				</div>
+			</div>
 			<div class="text-sm text-ink-gray-5">
 				{{ filteredOlympiads.length }} {{ __('olympiads') }}
 			</div>
diff --git a/frontend/src/pages/StudentProfile.vue b/frontend/src/pages/StudentProfile.vue
index 0dcd013b..a5b980c3 100644
--- a/frontend/src/pages/StudentProfile.vue
+++ b/frontend/src/pages/StudentProfile.vue
@@ -370,7 +370,6 @@
 /* ===== PAGE ===== */
 .student-profile-page {
   min-height: 100vh;
-  background: #f8f9fa;
 }
 .profile-content {
   max-width: 960px;
@@ -383,8 +382,8 @@
 
 /* ===== HERO CARD ===== */
 .hero-card {
-  background: #fff;
-  border: 1px solid #e5e7eb;
+  background: rgb(var(--color-surface-white));
+  border: 1px solid rgb(var(--color-outline-gray-2));
   border-radius: 8px;
   overflow: hidden;
   margin-bottom: 20px;
@@ -427,24 +426,23 @@
 .hero-name {
   font-size: 20px;
   font-weight: 700;
-  color: #111827;
+  color: rgb(var(--color-ink-gray-9));
   line-height: 1.3;
 }
 .hero-subtitle {
   font-size: 13px;
-  color: #6b7280;
+  color: rgb(var(--color-ink-gray-5));
   margin-top: 2px;
 }
 .hero-bio {
   margin-top: 4px;
   font-size: 13px;
-  color: #4b5563;
+  color: rgb(var(--color-ink-gray-7));
 }
 .hero-actions {
   flex-shrink: 0;
 }
 
-
 /* ===== SECTION GRID ===== */
 .section-grid {
   display: grid;
@@ -463,8 +461,8 @@
 
 /* ===== INFO CARDS ===== */
 .info-card {
-  background: #fff;
-  border: 1px solid #e5e7eb;
+  background: rgb(var(--color-surface-white));
+  border: 1px solid rgb(var(--color-outline-gray-2));
   border-radius: 8px;
   transition: box-shadow 0.15s ease;
 }
@@ -476,8 +474,8 @@
   align-items: center;
   gap: 10px;
   padding: 14px 18px;
-  border-bottom: 1px solid #f3f4f6;
-  background: #fafafa;
+  border-bottom: 1px solid rgb(var(--color-outline-gray-1));
+  background: rgb(var(--color-surface-gray-1));
   border-radius: 8px 8px 0 0;
 }
 .card-header-icon {
@@ -489,7 +487,7 @@
 .card-header-title {
   font-size: 14px;
   font-weight: 600;
-  color: #111827;
+  color: rgb(var(--color-ink-gray-9));
 }
 .card-body {
   padding: 16px 18px;
@@ -498,7 +496,7 @@
 }
 .text-body {
   font-size: 14px;
-  color: #374151;
+  color: rgb(var(--color-ink-gray-7));
   line-height: 1.65;
   white-space: pre-line;
   overflow-wrap: anywhere;
@@ -510,7 +508,7 @@
   display: flex;
   align-items: baseline;
   padding: 7px 0;
-  border-bottom: 1px solid #f9fafb;
+  border-bottom: 1px solid rgb(var(--color-outline-gray-1));
   gap: 8px;
 }
 .info-row:last-child {
@@ -520,7 +518,7 @@
   width: 130px;
   flex-shrink: 0;
   font-size: 13px;
-  color: #6b7280;
+  color: rgb(var(--color-ink-gray-5));
   font-weight: 500;
 }
 @media (max-width: 639px) {
@@ -529,35 +527,29 @@
 }
 .info-value {
   font-size: 14px;
-  color: #111827;
+  color: rgb(var(--color-ink-gray-9));
   word-break: break-word;
 }
-.text-body {
-  font-size: 14px;
-  color: #374151;
-  line-height: 1.65;
-  white-space: pre-line;
-}
 
 /* ===== TELEGRAM LINK ===== */
 .tg-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  color: #2563eb;
+  color: rgb(var(--color-ink-blue-3));
   font-weight: 500;
   font-size: 14px;
   transition: color 0.15s;
 }
-.tg-link:hover { color: #1d4ed8; }
+.tg-link:hover { color: rgb(var(--color-ink-blue-4)); }
 
 /* ===== BADGES ===== */
 .badge-yes {
   display: inline-block;
   padding: 2px 10px;
   border-radius: 999px;
-  background: #ecfdf5;
-  color: #059669;
+  background: rgb(var(--color-surface-green-1));
+  color: rgb(var(--color-ink-green-3));
   font-size: 12px;
   font-weight: 600;
 }
@@ -565,8 +557,8 @@
   display: inline-block;
   padding: 2px 10px;
   border-radius: 999px;
-  background: #f3f4f6;
-  color: #6b7280;
+  background: rgb(var(--color-surface-gray-2));
+  color: rgb(var(--color-ink-gray-5));
   font-size: 12px;
   font-weight: 500;
 }
@@ -574,8 +566,8 @@
 /* ===== EMPTY CARD ===== */
 .empty-card {
   grid-column: 1 / -1;
-  background: #fff;
-  border: 1px solid #e5e7eb;
+  background: rgb(var(--color-surface-white));
+  border: 1px solid rgb(var(--color-outline-gray-2));
   border-radius: 8px;
   overflow: hidden;
 }
@@ -599,19 +591,19 @@
 .empty-title {
   font-size: 20px;
   font-weight: 700;
-  color: #111827;
+  color: rgb(var(--color-ink-gray-9));
   margin-bottom: 8px;
 }
 .empty-desc {
   font-size: 14px;
-  color: #6b7280;
+  color: rgb(var(--color-ink-gray-5));
   line-height: 1.6;
   margin-bottom: 20px;
 }
 .empty-benefits {
   text-align: left;
-  background: #fafafa;
-  border: 1px solid #f3f4f6;
+  background: rgb(var(--color-surface-gray-1));
+  border: 1px solid rgb(var(--color-outline-gray-1));
   border-radius: 6px;
   padding: 14px 16px;
   margin-bottom: 24px;
@@ -621,7 +613,7 @@
   align-items: center;
   gap: 10px;
   font-size: 13px;
-  color: #374151;
+  color: rgb(var(--color-ink-gray-7));
   padding: 5px 0;
 }
 .benefit-dot {
@@ -637,27 +629,27 @@
   margin-top: 0;
 }
 .edit-card {
-  background: #fff;
-  border: 1px solid #e5e7eb;
+  background: rgb(var(--color-surface-white));
+  border: 1px solid rgb(var(--color-outline-gray-2));
   border-radius: 8px;
   overflow: hidden;
 }
 .edit-section-title {
   font-size: 14px;
   font-weight: 600;
-  color: #374151;
+  color: rgb(var(--color-ink-gray-7));
   padding-bottom: 8px;
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid rgb(var(--color-outline-gray-1));
   margin-bottom: 4px;
 }
 .edit-input {
   width: 100%;
-  border: 1px solid #d1d5db;
+  border: 1px solid rgb(var(--color-outline-gray-3));
   border-radius: 6px;
   padding: 8px 12px;
   font-size: 14px;
-  color: #111827;
-  background: #fff;
+  color: rgb(var(--color-ink-gray-9));
+  background: rgb(var(--color-surface-white));
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
@@ -667,28 +659,28 @@
 }
 .dropdown-list {
   margin-top: 4px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid rgb(var(--color-outline-gray-2));
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-  background: #fff;
+  background: rgb(var(--color-surface-white));
   max-height: 220px;
   overflow-y: auto;
 }
 .dropdown-item {
   padding: 10px 14px;
   cursor: pointer;
-  border-bottom: 1px solid #f9fafb;
+  border-bottom: 1px solid rgb(var(--color-outline-gray-1));
   transition: background 0.1s;
 }
 .dropdown-item:last-child { border-bottom: none; }
-.dropdown-item:hover { background: #fff7ed; }
+.dropdown-item:hover { background: rgb(var(--color-surface-amber-1)); }
 
 /* ===== SCROLLBAR ===== */
 .dropdown-list::-webkit-scrollbar { width: 5px; }
-.dropdown-list::-webkit-scrollbar-track { background: #f9fafb; }
-.dropdown-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
-.dropdown-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+.dropdown-list::-webkit-scrollbar-track { background: rgb(var(--color-surface-gray-1)); }
+.dropdown-list::-webkit-scrollbar-thumb { background: rgb(var(--color-outline-gray-3)); border-radius: 3px; }
+.dropdown-list::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-outline-gray-4)); }
 </style>
 
 <script setup>