diff --git a/app/components/subjects.tsx b/app/components/subjects.tsx
index 588c63a..9166ef6 100644
--- a/app/components/subjects.tsx
+++ b/app/components/subjects.tsx
@@ -135,7 +135,7 @@ export default function SubjectsSection() {
   return (
     <section id="subjects" className="px-6 pb-12 md:pt-12 text-center scroll-mt-20">
       <h2
-        className="text-7xl flex px-6 mb-0"
+        className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl flex px-6 mb-3"
         style={{ fontFamily: '"Road Rage", sans-serif' }}
       >
         Browse Subjects
@@ -161,21 +161,18 @@ export default function SubjectsSection() {
                   const href = `/${semCode}/${code}/ch0`;
                   const isAvailable = available.includes(code);
 
-                  const baseClass =
-                    "relative bg-[#d2b48c] text-[#2b1b0e] flex items-center justify-center font-medium py-4 px-6 shadow-md";
-
                   return isAvailable ? (
                     <Link
                       key={subj}
                       href={href}
-                      className={`${baseClass} hover:scale-[98%]`}
+                      className="relative bg-[#c9a876] text-[#1a0f06] flex items-center justify-center font-semibold py-4 px-6 shadow-md hover:scale-[98%]"
                     >
                       {subj}
                     </Link>
                   ) : (
                     <div
                       key={subj}
-                      className={`${baseClass} opacity-50 cursor-not-allowed`}
+                      className="relative bg-[#e8d4b8] text-[#5c4a35] flex items-center justify-center font-medium py-4 px-6 shadow-md cursor-not-allowed"
                     >
                       {subj}
                       <span className="absolute bottom-1 right-1 text-xs bg-[#2b1b0e] text-white px-2 py-0.5 rounded">
@@ -192,4 +189,4 @@ export default function SubjectsSection() {
 
     </section>
   );
-}
+}
\ No newline at end of file