From 1f718dadc57f6213c5a9068463b10052d997f96b Mon Sep 17 00:00:00 2001
From: Sherin Thomas <sherint275@gmail.com>
Date: Mon, 2 Feb 2026 16:19:11 +0530
Subject: [PATCH] Fix responsiveness of the DSA page

---
 .../components/dsa/questions/QuestionView.jsx | 202 +++++++++---------
 .../src/components/dsa/topics/TopicView.jsx   | 131 ++++++------
 frontend/src/pages/DsaDashboard.jsx           |  16 +-
 3 files changed, 172 insertions(+), 177 deletions(-)

diff --git a/frontend/src/components/dsa/questions/QuestionView.jsx b/frontend/src/components/dsa/questions/QuestionView.jsx
index a9492ea..ce284a3 100644
--- a/frontend/src/components/dsa/questions/QuestionView.jsx
+++ b/frontend/src/components/dsa/questions/QuestionView.jsx
@@ -48,69 +48,67 @@ export function QuestionsView({ selectedTopic, onBack }) {
   };
 
   const difficulties = ["All", "Easy", "Medium", "Hard"];
-  
+
 
   return (
-    <section className="min-h-screen py-10">
+    <section className="min-h-screen py-6 sm:py-8 lg:py-10">
       {/* ---------- HEADER ---------- */}
-      <div className="flex flex-col md:flex-row justify-between items-center mb-12 gap-6">
+      <div className="flex flex-col gap-4 sm:gap-5 lg:gap-6 mb-8 sm:mb-10 lg:mb-12">
         {/* Back Button */}
-        <div className="relative">
+        <div className="relative w-full sm:w-auto">
           <div
             aria-hidden="true"
-            className="absolute inset-0 translate-x-2 translate-y-2 bg-[#2C1810] dark:bg-[#F5E6D3]"
+            className="absolute inset-0 translate-x-1.5 translate-y-1.5 sm:translate-x-2 sm:translate-y-2 bg-[#2C1810] dark:bg-[#F5E6D3]"
           />
           <button
             onClick={onBack}
-            className="relative border-4 border-black bg-[#2C1810] dark:bg-[#F5E6D3] text-[#F5E6D3] dark:text-[#2C1810] px-6 py-3 font-extrabold flex items-center gap-2 shadow-[6px_6px_0_0_rgba(0,0,0,1)] hover:-translate-x-1 hover:-translate-y-1 transition-transform"
+            className="relative w-full sm:w-auto border-3 sm:border-4 border-black bg-[#2C1810] dark:bg-[#F5E6D3] text-[#F5E6D3] dark:text-[#2C1810] px-5 py-2.5 sm:px-6 sm:py-3 font-extrabold flex items-center justify-center gap-2 shadow-[4px_4px_0_0_rgba(0,0,0,1)] sm:shadow-[6px_6px_0_0_rgba(0,0,0,1)] hover:-translate-x-1 hover:-translate-y-1 transition-transform text-sm sm:text-base"
           >
-            <ArrowLeft className="w-5 h-5" />
+            <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
             BACK TO TOPICS
           </button>
         </div>
 
         {/* Topic Tag */}
-        <div className="relative">
+        <div className="relative w-full sm:w-auto sm:self-start">
           <div
             aria-hidden="true"
-            className="absolute inset-0 translate-x-2 translate-y-2 bg-[#2C1810] dark:bg-[#F5E6D3]"
+            className="absolute inset-0 translate-x-1.5 translate-y-1.5 sm:translate-x-2 sm:translate-y-2 bg-[#2C1810] dark:bg-[#F5E6D3]"
           />
-          <button className="relative border-4 border-black bg-[#C1502E] text-white px-6 py-3 font-extrabold shadow-[6px_6px_0_0_rgba(0,0,0,1)]">
+          <button className="relative w-full sm:w-auto border-3 sm:border-4 border-black bg-[#C1502E] text-white px-5 py-2.5 sm:px-6 sm:py-3 font-extrabold shadow-[4px_4px_0_0_rgba(0,0,0,1)] sm:shadow-[6px_6px_0_0_rgba(0,0,0,1)] text-sm sm:text-base">
             {selectedTopic.title}
           </button>
         </div>
       </div>
 
       {/* ---------- SEARCH + FILTER ---------- */}
-      <div className="mb-12">
+      <div className="mb-8 sm:mb-10 lg:mb-12">
         <SearchBar
           searchTerm={searchTerm}
           onSearchChange={setSearchTerm}
           placeholder="Search questions..."
         />
 
-        <div className="mt-10">
-          <p className="text-lg font-extrabold text-[#2C1810] dark:text-[#F5E6D3] mb-4 tracking-wide">
+        <div className="mt-6 sm:mt-8 lg:mt-10">
+          <p className="text-base sm:text-lg font-extrabold text-[#2C1810] dark:text-[#F5E6D3] mb-3 sm:mb-4 tracking-wide">
             FILTER BY DIFFICULTY
           </p>
-          <div className="flex flex-wrap gap-4">
+          <div className="flex flex-wrap gap-3 sm:gap-4">
             {difficulties.map((diff) => (
               <div key={diff} className="relative">
                 <div
                   aria-hidden="true"
-                  className={`absolute inset-0 translate-x-2 translate-y-2 ${
-                    difficultyFilter === diff
+                  className={`absolute inset-0 translate-x-1.5 translate-y-1.5 sm:translate-x-2 sm:translate-y-2 ${difficultyFilter === diff
                       ? "bg-[#2C1810] dark:bg-[#F5E6D3]"
                       : "bg-transparent"
-                  }`}
+                    }`}
                 />
                 <button
                   onClick={() => setDifficultyFilter(diff)}
-                  className={`relative border-4 border-black px-6 py-2 font-extrabold shadow-[5px_5px_0_0_rgba(0,0,0,1)] transition-all duration-200 ${
-                    difficultyFilter === diff
+                  className={`relative border-3 sm:border-4 border-black px-4 py-1.5 sm:px-6 sm:py-2 font-extrabold shadow-[3px_3px_0_0_rgba(0,0,0,1)] sm:shadow-[5px_5px_0_0_rgba(0,0,0,1)] transition-all duration-200 text-sm sm:text-base ${difficultyFilter === diff
                       ? "bg-[#C1502E] text-white"
                       : "bg-[#FFF6EE] text-[#2C1810] hover:-translate-x-1 hover:-translate-y-1"
-                  }`}
+                    }`}
                 >
                   {diff.toUpperCase()}
                 </button>
@@ -123,94 +121,92 @@ export function QuestionsView({ selectedTopic, onBack }) {
       {/* ---------- QUESTIONS ---------- */}
       {isLoading ? (
         <div className="flex justify-center items-center h-64">
-          <Loader2 className="w-10 h-10 animate-spin text-[#C1502E]" />
+          <Loader2 className="w-8 h-8 sm:w-10 sm:h-10 animate-spin text-[#C1502E]" />
         </div>
       ) : filteredQuestions.length === 0 ? (
         <EmptyState icon={FileText} message="No questions found" />
       ) : (
-        <div className="space-y-8">
+        <div className="space-y-5 sm:space-y-6 lg:space-y-8">
           {filteredQuestions.map((question) => (
-  <div key={question.id} className="relative group mb-12">
-    {/* Layered block background (non-interactive) */}
-    <div
-      className="absolute inset-0 -rotate-1 translate-x-3 translate-y-3 bg-[#2C1810] dark:bg-[#F5E6D3] rounded-lg transition-all duration-500 group-hover:translate-x-4 group-hover:translate-y-4 pointer-events-none"
-    />
-    <div
-      className="absolute inset-0 rotate-2 translate-x-1 translate-y-1 bg-[#b05a3c]/60 rounded-lg blur-[1px] pointer-events-none"
-    />
-
-    {/* Main floating card */}
-    <div
-      className="relative border-4 border-black bg-[#FFF6EE] dark:bg-[#2C1810]
-      p-8 rounded-lg shadow-[10px_10px_0_0_#2C1810]
-      hover:shadow-[12px_12px_0_0_#C1502E]
-      transition-all duration-300 hover:-translate-y-2"
-    >
-      {/* Header */}
-      <div className="flex items-start justify-between gap-6">
-        <div className="flex-1">
-          <h3
-            className={`text-2xl font-extrabold leading-snug ${
-              completedMap[question.id]
-                ? "text-[#a88d80] line-through"
-                : "text-[#2C1810] dark:text-[#F5E6D3]"
-            }`}
-          >
-            {question.questionName}
-          </h3>
-        </div>
-
-        <div
-          className={`text-sm font-black tracking-wider border-4 border-black 
-          px-4 py-1 bg-[#C1502E] text-[#FFF6EE] dark:bg-[#F5E6D3] dark:text-[#2C1810]
-          shadow-[3px_3px_0_0_#2C1810]`}
-        >
-          {question.difficulty.toUpperCase()}
-        </div>
-      </div>
-
-      {/* Divider bar */}
-      <div className="h-1 mt-5 mb-6 bg-[#C1502E] dark:bg-[#F5E6D3] rounded-full w-2/3 group-hover:w-full transition-all duration-300"></div>
-
-      {/* Actions */}
-      <div className="flex justify-between items-center">
-        <button
-          onClick={() => handleToggle(question.id)}
-          disabled={toggle.isPending}
-          className={`flex items-center gap-3 font-extrabold text-[#2C1810] dark:text-[#F5E6D3] ${
-            toggle.isPending ? "opacity-60 cursor-not-allowed" : ""
-          }`}
-        >
-          {completedMap[question.id] ? (
-            <CheckCircle2 className="w-8 h-8 text-[#3dd68c]" />
-          ) : (
-            <Circle className="w-8 h-8 text-[#b05a3c] dark:text-[#F5E6D3]" />
-          )}
-          <span className="text-sm uppercase">
-            {toggle.isPending ? "Updating..." : "Mark Done"}
-          </span>
-        </button>
-
-        <button
-          onClick={() =>
-            window.open(question.link, "_blank", "noopener,noreferrer")
-          }
-          className="relative border-4 border-black bg-[#F5E6D3] dark:bg-[#FFF6EE] 
-          p-3 font-black hover:-translate-x-0.5 hover:-translate-y-0.5
-          shadow-[4px_4px_0_0_#2C1810] transition-transform group/link"
-        >
-          <ExternalLink className="w-5 h-5 text-[#2C1810]" />
-          <span className="absolute -bottom-5 left-0 opacity-0 group-hover/link:opacity-100 text-xs font-extrabold text-[#2C1810] dark:text-[#F5E6D3] transition-all">
-            Open
-          </span>
-        </button>
-      </div>
-
-      {/* Floating animated accent */}
-      <div className="absolute -bottom-2 right-6 w-20 h-20 bg-gradient-to-tr from-[#C1502E40] to-transparent blur-2xl rounded-full animate-pulse pointer-events-none" />
-    </div>
-  </div>
-))}
+            <div key={question.id} className="relative group mb-6 sm:mb-8 lg:mb-12">
+              {/* Layered block background (non-interactive) */}
+              <div
+                className="hidden sm:block absolute inset-0 -rotate-1 translate-x-2 translate-y-2 sm:translate-x-3 sm:translate-y-3 bg-[#2C1810] dark:bg-[#F5E6D3] rounded-lg transition-all duration-500 group-hover:translate-x-3 group-hover:translate-y-3 sm:group-hover:translate-x-4 sm:group-hover:translate-y-4 pointer-events-none"
+              />
+              <div
+                className="hidden sm:block absolute inset-0 rotate-2 translate-x-0.5 translate-y-0.5 sm:translate-x-1 sm:translate-y-1 bg-[#b05a3c]/60 rounded-lg blur-[1px] pointer-events-none"
+              />
+
+              {/* Main floating card */}
+              <div
+                className="relative border-3 sm:border-4 border-black bg-[#FFF6EE] dark:bg-[#2C1810]
+      p-5 sm:p-6 lg:p-8 rounded-lg shadow-[4px_4px_0_0_#2C1810] sm:shadow-[8px_8px_0_0_#2C1810] lg:shadow-[10px_10px_0_0_#2C1810]
+      hover:shadow-[6px_6px_0_0_#C1502E] sm:hover:shadow-[10px_10px_0_0_#C1502E] lg:hover:shadow-[12px_12px_0_0_#C1502E]
+      transition-all duration-300 hover:-translate-y-1 sm:hover:-translate-y-2"
+              >
+                {/* Header */}
+                <div className="flex flex-col sm:flex-row items-start justify-between gap-3 sm:gap-4 lg:gap-6">
+                  <div className="flex-1">
+                    <h3
+                      className={`text-lg sm:text-xl lg:text-2xl font-extrabold leading-snug ${completedMap[question.id]
+                          ? "text-[#a88d80] line-through"
+                          : "text-[#2C1810] dark:text-[#F5E6D3]"
+                        }`}
+                    >
+                      {question.questionName}
+                    </h3>
+                  </div>
+
+                  <div
+                    className={`text-xs sm:text-sm font-black tracking-wider border-2 sm:border-3 lg:border-4 border-black 
+          px-3 py-1 sm:px-4 sm:py-1 bg-[#C1502E] text-[#FFF6EE] dark:bg-[#F5E6D3] dark:text-[#2C1810]
+          shadow-[2px_2px_0_0_#2C1810] sm:shadow-[3px_3px_0_0_#2C1810] whitespace-nowrap`}
+                  >
+                    {question.difficulty.toUpperCase()}
+                  </div>
+                </div>
+
+                {/* Divider bar */}
+                <div className="h-0.5 sm:h-1 mt-3 sm:mt-4 lg:mt-5 mb-4 sm:mb-5 lg:mb-6 bg-[#C1502E] dark:bg-[#F5E6D3] rounded-full w-1/2 sm:w-2/3 group-hover:w-full transition-all duration-300"></div>
+
+                {/* Actions */}
+                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-6">
+                  <button
+                    onClick={() => handleToggle(question.id)}
+                    disabled={toggle.isPending}
+                    className={`flex items-center gap-2 sm:gap-3 font-extrabold text-[#2C1810] dark:text-[#F5E6D3] ${toggle.isPending ? "opacity-60 cursor-not-allowed" : ""
+                      }`}
+                  >
+                    {completedMap[question.id] ? (
+                      <CheckCircle2 className="w-7 h-7 sm:w-8 sm:h-8 text-[#3dd68c]" />
+                    ) : (
+                      <Circle className="w-7 h-7 sm:w-8 sm:h-8 text-[#b05a3c] dark:text-[#F5E6D3]" />
+                    )}
+                    <span className="text-xs sm:text-sm uppercase">
+                      {toggle.isPending ? "Updating..." : "Mark Done"}
+                    </span>
+                  </button>
+
+                  <button
+                    onClick={() =>
+                      window.open(question.link, "_blank", "noopener,noreferrer")
+                    }
+                    className="relative border-3 sm:border-4 border-black bg-[#F5E6D3] dark:bg-[#FFF6EE] 
+          p-2.5 sm:p-3 font-black hover:-translate-x-0.5 hover:-translate-y-0.5
+          shadow-[3px_3px_0_0_#2C1810] sm:shadow-[4px_4px_0_0_#2C1810] transition-transform group/link"
+                  >
+                    <ExternalLink className="w-4 h-4 sm:w-5 sm:h-5 text-[#2C1810]" />
+                    <span className="absolute -bottom-4 sm:-bottom-5 left-0 opacity-0 group-hover/link:opacity-100 text-[10px] sm:text-xs font-extrabold text-[#2C1810] dark:text-[#F5E6D3] transition-all">
+                      Open
+                    </span>
+                  </button>
+                </div>
+
+                {/* Floating animated accent */}
+                <div className="absolute -bottom-2 right-4 sm:right-6 w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-tr from-[#C1502E40] to-transparent blur-2xl rounded-full animate-pulse pointer-events-none" />
+              </div>
+            </div>
+          ))}
 
         </div>
       )}
diff --git a/frontend/src/components/dsa/topics/TopicView.jsx b/frontend/src/components/dsa/topics/TopicView.jsx
index 7ca6600..a83629a 100644
--- a/frontend/src/components/dsa/topics/TopicView.jsx
+++ b/frontend/src/components/dsa/topics/TopicView.jsx
@@ -15,19 +15,19 @@ export function TopicsView({ onViewQuestions }) {
   );
 
   return (
-    <section className="px-6 py-20 transition-colors duration-300">
+    <section className="px-3 sm:px-6 py-8 sm:py-12 lg:py-20 transition-colors duration-300">
       {/* Header */}
-      <div className="text-center mb-16">
-        <h1 className="text-5xl md:text-6xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-4 inline-block border-b-8 border-[#C1502E] pb-2">
+      <div className="text-center mb-8 sm:mb-12 lg:mb-16">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#2C1810] dark:text-[#F5E6D3] mb-3 sm:mb-4 inline-block border-b-4 sm:border-b-6 lg:border-b-8 border-[#C1502E] pb-2">
           Explore DSA Topics
         </h1>
-        <p className="text-lg font-semibold text-[#4A2E1B] dark:text-[#D9C1AC]">
+        <p className="text-sm sm:text-base lg:text-lg font-semibold text-[#4A2E1B] dark:text-[#D9C1AC] px-4">
           Choose a topic to start practicing problems
         </p>
       </div>
 
       {/* Search */}
-      <div className="max-w-3xl mx-auto mb-14">
+      <div className="max-w-full sm:max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-14">
         <SearchBar
           searchTerm={searchTerm}
           onSearchChange={setSearchTerm}
@@ -54,78 +54,77 @@ export function TopicsView({ onViewQuestions }) {
       ) : filteredTopics.length === 0 ? (
         <EmptyState icon={FileText} message="No topics found" />
       ) : (
-        <div className="flex flex-col gap-12 max-w-6xl mx-auto">
+        <div className="flex flex-col gap-6 sm:gap-8 lg:gap-12 max-w-6xl mx-auto">
           {filteredTopics.map((topic, index) => {
-  const IconComponent = CodeXml;
-  const isEven = index % 2 === 0;
+            const IconComponent = CodeXml;
+            const isEven = index % 2 === 0;
 
-  return (
-    <div
-      key={topic.id}
-      className={`relative flex flex-col md:flex-row items-stretch gap-10 ${
-        isEven ? "md:flex-row" : "md:flex-row-reverse"
-      }`}
-    >
-      <div
-        className="relative w-full border-[3px] border-[#2C1810] dark:border-[#F5E6D3]
+            return (
+              <div
+                key={topic.id}
+                className={`relative flex flex-col md:flex-row items-stretch gap-6 sm:gap-8 lg:gap-10 ${isEven ? "md:flex-row" : "md:flex-row-reverse"
+                  }`}
+              >
+                <div
+                  className="relative w-full border-2 sm:border-[3px] border-[#2C1810] dark:border-[#F5E6D3]
         bg-[#F5E6D3] dark:bg-[#2C1810]
-        rounded-xl shadow-[8px_8px_0_#C1502E] hover:shadow-[12px_12px_0_#C1502E]
+        rounded-xl shadow-[4px_4px_0_#C1502E] sm:shadow-[6px_6px_0_#C1502E] lg:shadow-[8px_8px_0_#C1502E] hover:shadow-[6px_6px_0_#C1502E] sm:hover:shadow-[10px_10px_0_#C1502E] lg:hover:shadow-[12px_12px_0_#C1502E]
         overflow-hidden transition-all duration-300"
-      >
-        {/* Subtle paper texture */}
-        <div className="absolute inset-0 opacity-10 dark:opacity-20 mix-blend-multiply pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] bg-repeat"></div>
+                >
+                  {/* Subtle paper texture */}
+                  <div className="absolute inset-0 opacity-10 dark:opacity-20 mix-blend-multiply pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] bg-repeat"></div>
 
-        {/* Top floating tag */}
-        <div className="absolute -top-4 left-6 bg-[#C1502E] text-[#F5E6D3] dark:bg-[#F5E6D3] dark:text-[#2C1810] border-2 border-[#2C1810] dark:border-[#F5E6D3] px-4 py-1 font-extrabold text-sm tracking-wider shadow-[3px_3px_0_#2C1810] uppercase">
-          {topic.difficulty}
-        </div>
+                  {/* Top floating tag */}
+                  <div className="absolute -top-3 sm:-top-4 left-4 sm:left-6 bg-[#C1502E] text-[#F5E6D3] dark:bg-[#F5E6D3] dark:text-[#2C1810] border-2 border-[#2C1810] dark:border-[#F5E6D3] px-3 py-0.5 sm:px-4 sm:py-1 font-extrabold text-xs sm:text-sm tracking-wider shadow-[2px_2px_0_#2C1810] sm:shadow-[3px_3px_0_#2C1810] uppercase">
+                    {topic.difficulty}
+                  </div>
 
-        {/* Left accent bar */}
-        <div className="absolute top-0 left-0 w-3 h-full bg-[#C1502E]" />
+                  {/* Left accent bar */}
+                  <div className="absolute top-0 left-0 w-2 sm:w-3 h-full bg-[#C1502E]" />
 
-        {/* Content */}
-        <div className="relative z-10 p-10">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-8">
-            <div className="flex items-center gap-5">
-              <div className="p-4 rounded-xl bg-[#C1502E] dark:bg-[#F5E6D3] border-2 border-[#2C1810] dark:border-[#F5E6D3] shadow-[4px_4px_0_#2C1810]">
-                <IconComponent className="w-8 h-8 text-[#F5E6D3] dark:text-[#2C1810]" />
-              </div>
-              <h3 className="text-3xl font-extrabold text-[#2C1810] dark:text-[#F5E6D3] tracking-tight uppercase">
-                {topic.title}
-              </h3>
-            </div>
+                  {/* Content */}
+                  <div className="relative z-10 p-5 sm:p-7 lg:p-10">
+                    {/* Header */}
+                    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-6 mb-5 sm:mb-6 lg:mb-8">
+                      <div className="flex items-center gap-3 sm:gap-4 lg:gap-5">
+                        <div className="p-2.5 sm:p-3 lg:p-4 rounded-lg sm:rounded-xl bg-[#C1502E] dark:bg-[#F5E6D3] border-2 border-[#2C1810] dark:border-[#F5E6D3] shadow-[2px_2px_0_#2C1810] sm:shadow-[3px_3px_0_#2C1810] lg:shadow-[4px_4px_0_#2C1810]">
+                          <IconComponent className="w-5 h-5 sm:w-6 sm:h-6 lg:w-8 lg:h-8 text-[#F5E6D3] dark:text-[#2C1810]" />
+                        </div>
+                        <h3 className="text-xl sm:text-2xl lg:text-3xl font-extrabold text-[#2C1810] dark:text-[#F5E6D3] tracking-tight uppercase">
+                          {topic.title}
+                        </h3>
+                      </div>
 
-            {/* Rotated tag */}
-            <div className="rotate-12 bg-[#F5E6D3] dark:bg-[#2C1810] border-2 border-[#2C1810] dark:border-[#F5E6D3] px-4 py-1 text-[#C1502E] dark:text-[#F5E6D3] font-black shadow-[2px_2px_0_#2C1810] text-xs tracking-widest uppercase">
-              Topic {index + 1}
-            </div>
-          </div>
+                      {/* Rotated tag */}
+                      <div className="rotate-6 sm:rotate-12 bg-[#F5E6D3] dark:bg-[#2C1810] border-2 border-[#2C1810] dark:border-[#F5E6D3] px-3 py-0.5 sm:px-4 sm:py-1 text-[#C1502E] dark:text-[#F5E6D3] font-black shadow-[2px_2px_0_#2C1810] text-[10px] sm:text-xs tracking-widest uppercase">
+                        Topic {index + 1}
+                      </div>
+                    </div>
 
-          {/* Description Box */}
-          <div className="bg-[#FFF6EE]/90 dark:bg-[#3B2415]/70 border-2 border-[#C1502E]/50 dark:border-[#F5E6D3]/40 rounded-xl shadow-[4px_4px_0_#C1502E] p-6 mb-8 backdrop-blur-sm">
-            <p className="text-lg font-semibold text-[#2C1810] dark:text-[#F5E6D3] leading-relaxed">
-              {topic.description}
-            </p>
-          </div>
+                    {/* Description Box */}
+                    <div className="bg-[#FFF6EE]/90 dark:bg-[#3B2415]/70 border-2 border-[#C1502E]/50 dark:border-[#F5E6D3]/40 rounded-lg sm:rounded-xl shadow-[2px_2px_0_#C1502E] sm:shadow-[3px_3px_0_#C1502E] lg:shadow-[4px_4px_0_#C1502E] p-4 sm:p-5 lg:p-6 mb-5 sm:mb-6 lg:mb-8 backdrop-blur-sm">
+                      <p className="text-sm sm:text-base lg:text-lg font-semibold text-[#2C1810] dark:text-[#F5E6D3] leading-relaxed">
+                        {topic.description}
+                      </p>
+                    </div>
 
-          {/* Button */}
-          <div className="flex justify-end">
-            <button
-              onClick={() => onViewQuestions(topic)}
-                className="relative px-8 py-3 border-2 border-[#2C1810] dark:border-[#F5E6D3] bg-[#C1502E] text-[#F5E6D3] dark:bg-[#F5E6D3] dark:text-[#2C1810] font-extrabold rounded-lg shadow-[4px_4px_0_#2C1810] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[6px_6px_0_#2C1810] active:translate-x-1 active:translate-y-1 active:shadow-[2px_2px_0_#2C1810] transition-all duration-300 uppercase tracking-wider flex items-center gap-3"
-            >
-              Start <ArrowRight className="w-5 h-5" />
-            </button>
-          </div>
-        </div>
+                    {/* Button */}
+                    <div className="flex justify-center sm:justify-end">
+                      <button
+                        onClick={() => onViewQuestions(topic)}
+                        className="relative px-6 py-2.5 sm:px-8 sm:py-3 border-2 border-[#2C1810] dark:border-[#F5E6D3] bg-[#C1502E] text-[#F5E6D3] dark:bg-[#F5E6D3] dark:text-[#2C1810] font-extrabold rounded-lg shadow-[3px_3px_0_#2C1810] sm:shadow-[4px_4px_0_#2C1810] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[4px_4px_0_#2C1810] sm:hover:shadow-[6px_6px_0_#2C1810] active:translate-x-0.5 active:translate-y-0.5 active:shadow-[2px_2px_0_#2C1810] transition-all duration-300 uppercase tracking-wider flex items-center gap-2 sm:gap-3 text-sm sm:text-base"
+                      >
+                        Start <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5" />
+                      </button>
+                    </div>
+                  </div>
 
-        {/* Bottom accent bar */}
-        <div className="absolute bottom-0 left-0 w-full h-2 bg-[#C1502E]" />
-      </div>
-    </div>
-  );
-})}
+                  {/* Bottom accent bar */}
+                  <div className="absolute bottom-0 left-0 w-full h-1.5 sm:h-2 bg-[#C1502E]" />
+                </div>
+              </div>
+            );
+          })}
 
 
         </div>
diff --git a/frontend/src/pages/DsaDashboard.jsx b/frontend/src/pages/DsaDashboard.jsx
index f8afebc..173d3d8 100644
--- a/frontend/src/pages/DsaDashboard.jsx
+++ b/frontend/src/pages/DsaDashboard.jsx
@@ -17,17 +17,17 @@ export default function DsaDashboard() {
   };
 
   return (
-    <div className="min-h-screen bg-[#F5E6D3] dark:bg-[#1A0D08] transition-colors duration-300 relative overflow-hidden px-6 py-8">
+    <div className="min-h-screen bg-[#F5E6D3] dark:bg-[#1A0D08] transition-colors duration-300 relative overflow-hidden px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
       {/* HEADER */}
-      <header className="max-w-6xl mx-20 mb-12">
-        <div className="flex items-center justify-between">
+      <header className="max-w-6xl mx-auto px-2 sm:px-4 mb-6 sm:mb-8 lg:mb-12">
+        <div className="flex items-center justify-center sm:justify-between">
           {/* LOGO BOX */}
           <div className="relative">
             <div
               aria-hidden="true"
-              className="absolute inset-0 translate-x-2 translate-y-2 bg-[#C1502E] dark:bg-[#F5E6D3]"
+              className="absolute inset-0 translate-x-1.5 translate-y-1.5 sm:translate-x-2 sm:translate-y-2 bg-[#C1502E] dark:bg-[#F5E6D3]"
             />
-            <div className="relative border-4 border-black dark:border-[#F5E6D3] bg-[#F5E6D3] dark:bg-[#2C1810] px-4 py-3 font-black text-xl text-[#2C1810] dark:text-[#F5E6D3] tracking-wider shadow-[6px_6px_0px_0px_rgba(193,80,46,1)]">
+            <div className="relative border-3 sm:border-4 border-black dark:border-[#F5E6D3] bg-[#F5E6D3] dark:bg-[#2C1810] px-3 py-2 sm:px-4 sm:py-3 font-black text-base sm:text-lg lg:text-xl text-[#2C1810] dark:text-[#F5E6D3] tracking-wider shadow-[4px_4px_0px_0px_rgba(193,80,46,1)] sm:shadow-[6px_6px_0px_0px_rgba(193,80,46,1)]">
               DSA TRACKER
             </div>
           </div>
@@ -36,7 +36,7 @@ export default function DsaDashboard() {
       </header>
 
       {/* CONTENT AREA */}
-      <main className="relative z-10 max-w-6xl mx-auto ">
+      <main className="relative z-10 max-w-6xl mx-auto px-2 sm:px-0">
         {currentView === "topics" && (
           <div className="animate-fadeInUp">
             <TopicsView onViewQuestions={openTopicQuestions} />
@@ -54,8 +54,8 @@ export default function DsaDashboard() {
       </main>
 
       {/* BACKGROUND SHAPES (Neo-Brutalist Deco) */}
-      <div className="absolute -top-10 -left-10 w-40 h-40 bg-[#C1502E] dark:bg-[#F5E6D3] rotate-12 opacity-20"></div>
-      <div className="absolute bottom-10 right-10 w-56 h-56 bg-[#C1502E] dark:bg-[#F5E6D3] rotate-[30deg] opacity-10"></div>
+      <div className="hidden sm:block absolute -top-10 -left-10 w-32 sm:w-40 h-32 sm:h-40 bg-[#C1502E] dark:bg-[#F5E6D3] rotate-12 opacity-10 sm:opacity-20"></div>
+      <div className="hidden sm:block absolute bottom-10 right-10 w-40 sm:w-56 h-40 sm:h-56 bg-[#C1502E] dark:bg-[#F5E6D3] rotate-[30deg] opacity-10"></div>
     </div>
   );
 }