diff --git a/frontend/src/components/ProfilePage/PersonalInfo.jsx b/frontend/src/components/ProfilePage/PersonalInfo.jsx
index 8244f14..3d871ca 100644
--- a/frontend/src/components/ProfilePage/PersonalInfo.jsx
+++ b/frontend/src/components/ProfilePage/PersonalInfo.jsx
@@ -8,7 +8,7 @@ export const PersonalInfo = ({ user, isEditing, onChange }) => {
   };
 
   return (
-    <div className="relative bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] shadow-[8px_8px_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)] p-8">
+    <div className="relative bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] shadow-[8px_8px_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)] p-4 sm:p-6 md:p-8">
       {/* Brutalist Tag */}
       <div className="absolute -top-4 left-4 bg-[#C1502E] text-[#F5E6D3] text-xs font-black px-3 py-1 border-4 border-black dark:border-[#F5E6D3] rotate-[-2deg] shadow-[3px_3px_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_rgba(245,230,211,0.3)]">
         PERSONAL INFORMATION
diff --git a/frontend/src/components/ProfilePage/ProfileHeader.jsx b/frontend/src/components/ProfilePage/ProfileHeader.jsx
index 9a85376..9e77b2c 100644
--- a/frontend/src/components/ProfilePage/ProfileHeader.jsx
+++ b/frontend/src/components/ProfilePage/ProfileHeader.jsx
@@ -30,43 +30,28 @@ export const ProfileHeader = ({
   const userEmail = user?.email || "No email provided";
 
   return (
-    <section className="relative bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] p-7 shadow-[8px_8px_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)] flex flex-col md:flex-row items-center justify-between gap-8 rounded-none overflow-hidden">
-      {/* --- Left: Info --- */}
-      <div className="flex-1 text-center md:text-left space-y-2 z-20">
-        <h1 className="text-[2.5rem] md:text-[4rem] font-black uppercase text-[#2C1810] dark:text-[#F5E6D3] tracking-tight leading-none">
-          {userName}
-        </h1>
-        <p className="text-base md:text-lg font-semibold text-[#C1502E] dark:text-[#F5E6D3]/70">
-          {userEmail}
-        </p>
-
-        {user?.isManager && (
-          <span className="inline-block mt-2 bg-[#C1502E] text-[#F5E6D3] border-4 border-black dark:border-[#F5E6D3] font-black px-3 py-0.5 shadow-[4px_4px_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_rgba(245,230,211,0.3)] text-sm rotate-[-1deg]">
-            MANAGER
-          </span>
-        )}
-
-        {/* Poster label */}
-        <div className="absolute -top-1 left-4 bg-[#2C1810] text-[#F5E6D3] text-xs font-black px-3 py-0.5 border-4 border-black dark:border-[#F5E6D3] rotate-[-3deg] shadow-[3px_3px_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_rgba(245,230,211,0.3)]">
-          PROFILE
-        </div>
+    <section className="relative bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] p-5 md:p-7 shadow-[8px_8px_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)] flex flex-col md:flex-row items-center justify-between gap-6 md:gap-8 rounded-none overflow-hidden">
+      {/* Poster label */}
+      <div className="absolute -top-1 left-4 bg-[#2C1810] text-[#F5E6D3] text-xs font-black px-3 py-0.5 border-4 border-black dark:border-[#F5E6D3] rotate-[-3deg] shadow-[3px_3px_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_rgba(245,230,211,0.3)]">
+        PROFILE
       </div>
 
-      {/* --- Right: Profile Image --- */}
+      {/* --- Profile Image --- */}
       <div
-        className={`relative w-44 h-44 md:w-56 md:h-56 border-4 border-black dark:border-[#F5E6D3] bg-[#C1502E] dark:bg-[#F5E6D3]/10 overflow-hidden shadow-[6px_6px_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_rgba(245,230,211,0.3)] group z-20 ${
+        className={`relative w-28 h-28 sm:w-36 sm:h-36 md:w-56 md:h-56 flex-shrink-0 border-4 border-black dark:border-[#F5E6D3] bg-[#C1502E] dark:bg-[#F5E6D3]/10 overflow-hidden shadow-[6px_6px_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_rgba(245,230,211,0.3)] group z-20 ${
           isEditing ? "cursor-pointer" : ""
         } transition-all duration-300`}
         onClick={isEditing ? handleImageClick : undefined}
       >
         {user.profilePhoto ? (
-            <img src= {previewImg?`${previewImg}`:`${user.profilePhoto}?t=${new Date(user.updatedAt)}`}
+          <img
+            src={previewImg ? `${previewImg}` : `${user.profilePhoto}?t=${new Date(user.updatedAt)}`}
             alt={userName}
             className="object-cover w-full h-full"
           />
         ) : (
           <div className="flex items-center justify-center h-full text-[#F5E6D3] dark:text-[#C1502E]">
-            <User className="h-14 w-14" />
+            <User className="h-10 w-10 md:h-14 md:w-14" />
           </div>
         )}
 
@@ -82,39 +67,55 @@ export const ProfileHeader = ({
             <button
               onClick={handleImageClick}
               type="button"
-              className="absolute bottom-3 right-3 bg-[#F5E6D3] dark:bg-[#2C1810] text-[#2C1810] dark:text-[#F5E6D3] border-4 border-black dark:border-[#F5E6D3] p-2 font-black shadow-[3px_3px_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_rgba(245,230,211,0.3)] hover:bg-[#C1502E] hover:text-[#F5E6D3] transition-all"
+              className="absolute bottom-2 right-2 bg-[#F5E6D3] dark:bg-[#2C1810] text-[#2C1810] dark:text-[#F5E6D3] border-4 border-black dark:border-[#F5E6D3] p-1.5 font-black shadow-[3px_3px_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_rgba(245,230,211,0.3)] hover:bg-[#C1502E] hover:text-[#F5E6D3] transition-all"
             >
-              <Camera className="h-4 w-4" />
+              <Camera className="h-3 w-3 md:h-4 md:w-4" />
             </button>
           </>
         )}
       </div>
 
-      {/* --- Buttons --- */}
-      <div className="absolute top-4 right-4 flex flex-wrap gap-3 z-30">
-        {!isEditing ? (
-          <button
-            onClick={onEdit}
-            className="bg-[#C1502E] text-[#F5E6D3] text-sm md:text-base font-black px-5 py-2 border-4 border-black dark:border-[#F5E6D3] shadow-[4px_4px_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_rgba(245,230,211,0.3)] hover:-translate-y-[2px] transition-all flex items-center gap-1"
-          >
-            <Edit2 className="h-4 w-4" /> EDIT
-          </button>
-        ) : (
-          <>
-            <button
-              onClick={onSave}
-              className="bg-[#C1502E] text-[#F5E6D3] text-sm md:text-base font-black px-5 py-2 border-4 border-black dark:border-[#F5E6D3] shadow-[4px_4px_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_rgba(245,230,211,0.3)] hover:-translate-y-[2px] transition-all flex items-center gap-1"
-            >
-              <Save className="h-4 w-4" /> SAVE
-            </button>
+      {/* --- Info + Buttons --- */}
+      <div className="flex-1 flex flex-col items-center md:items-start gap-3 z-20 w-full min-w-0">
+        <h1 className="text-[1.8rem] sm:text-[2.5rem] md:text-[4rem] font-black uppercase text-[#2C1810] dark:text-[#F5E6D3] tracking-tight leading-none text-center md:text-left break-words w-full">
+          {userName}
+        </h1>
+        <p className="text-sm sm:text-base md:text-lg font-semibold text-[#C1502E] dark:text-[#F5E6D3]/70 text-center md:text-left break-all w-full">
+          {userEmail}
+        </p>
+
+        {user?.isManager && (
+          <span className="inline-block bg-[#C1502E] text-[#F5E6D3] border-4 border-black dark:border-[#F5E6D3] font-black px-3 py-0.5 shadow-[4px_4px_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_rgba(245,230,211,0.3)] text-sm rotate-[-1deg]">
+            MANAGER
+          </span>
+        )}
+
+        {/* --- Buttons --- */}
+        <div className="flex flex-wrap gap-2 mt-1 justify-center md:justify-start">
+          {!isEditing ? (
             <button
-              onClick={onCancel}
-              className="bg-[#F5E6D3] dark:bg-[#2C1810] text-[#2C1810] dark:text-[#F5E6D3] text-sm md:text-base font-black px-5 py-2 border-4 border-black dark:border-[#F5E6D3] shadow-[4px_4px_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_rgba(245,230,211,0.3)] hover:-translate-y-[2px] transition-all flex items-center gap-1"
+              onClick={onEdit}
+              className="bg-[#C1502E] text-[#F5E6D3] text-sm font-black px-4 py-2 border-4 border-black dark:border-[#F5E6D3] shadow-[4px_4px_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_rgba(245,230,211,0.3)] hover:-translate-y-[2px] transition-all flex items-center gap-1"
             >
-              <X className="h-4 w-4" /> CANCEL
+              <Edit2 className="h-4 w-4" /> EDIT
             </button>
-          </>
-        )}
+          ) : (
+            <>
+              <button
+                onClick={onSave}
+                className="bg-[#C1502E] text-[#F5E6D3] text-sm font-black px-4 py-2 border-4 border-black dark:border-[#F5E6D3] shadow-[4px_4px_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_rgba(245,230,211,0.3)] hover:-translate-y-[2px] transition-all flex items-center gap-1"
+              >
+                <Save className="h-4 w-4" /> SAVE
+              </button>
+              <button
+                onClick={onCancel}
+                className="bg-[#F5E6D3] dark:bg-[#2C1810] text-[#2C1810] dark:text-[#F5E6D3] text-sm font-black px-4 py-2 border-4 border-black dark:border-[#F5E6D3] shadow-[4px_4px_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_rgba(245,230,211,0.3)] hover:-translate-y-[2px] transition-all flex items-center gap-1"
+              >
+                <X className="h-4 w-4" /> CANCEL
+              </button>
+            </>
+          )}
+        </div>
       </div>
 
     </section>
diff --git a/frontend/src/components/ProfilePage/SocialLink.jsx b/frontend/src/components/ProfilePage/SocialLink.jsx
index e055d49..9d89a30 100644
--- a/frontend/src/components/ProfilePage/SocialLink.jsx
+++ b/frontend/src/components/ProfilePage/SocialLink.jsx
@@ -50,7 +50,7 @@ export const SocialLinks = ({ user, isEditing, onChange }) => {
   return (
     <div className="space-y-10">
       {/* Social Links Section */}
-      <div className="relative bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] shadow-[8px_8px_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)] p-8">
+      <div className="relative bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] shadow-[8px_8px_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)] p-4 sm:p-6 md:p-8">
         {/* Brutalist Tag */}
         <div className="absolute -top-4 left-4 bg-[#2C1810] text-[#F5E6D3] text-xs font-black px-3 py-1 border-4 border-black dark:border-[#F5E6D3] rotate-[-3deg] shadow-[3px_3px_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_rgba(245,230,211,0.3)]">
           SOCIAL LINKS
@@ -63,7 +63,7 @@ export const SocialLinks = ({ user, isEditing, onChange }) => {
       </div>
 
       {/* Coding Platforms Section */}
-      <div className="relative bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] shadow-[8px_8px_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)] p-8">
+      <div className="relative bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] shadow-[8px_8px_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)] p-4 sm:p-6 md:p-8">
         {/* Brutalist Tag */}
         <div className="absolute -top-4 left-4 bg-[#C1502E] text-[#F5E6D3] text-xs font-black px-3 py-1 border-4 border-black dark:border-[#F5E6D3] rotate-[2deg] shadow-[3px_3px_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_rgba(245,230,211,0.3)]">
           CODING PLATFORMS
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>
   );
 }
diff --git a/frontend/src/pages/ProfilePage.jsx b/frontend/src/pages/ProfilePage.jsx
index e99797b..f9f036e 100644
--- a/frontend/src/pages/ProfilePage.jsx
+++ b/frontend/src/pages/ProfilePage.jsx
@@ -116,7 +116,7 @@ const ProfilePage = () => {
         theme === "dark" ? "dark bg-[#2C1810]" : "bg-[#F5E6D3]"
       }`}
     >
-      <section className="max-w-7xl mx-auto px-6 py-12 relative z-10">
+      <section className="max-w-7xl mx-auto px-3 sm:px-6 py-6 md:py-12 relative z-10">
         
         {/* 1. Header Section */}
         <div className="mb-12 relative">
@@ -138,7 +138,7 @@ const ProfilePage = () => {
         </div>
 
         {/* 2. Tab Navigation */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-3 gap-2 sm:gap-4 mb-8">
           {tabs.map((tab) => {
             const isActive = activeTab === tab.id;
             const Icon = tab.icon;
@@ -148,8 +148,8 @@ const ProfilePage = () => {
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}
                 className={`
-                  relative group flex items-center justify-center gap-3 px-6 py-4 
-                  font-black text-lg uppercase border-4 border-black dark:border-[#F5E6D3]
+                  relative group flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-3 px-2 sm:px-6 py-3 sm:py-4 
+                  font-black text-[0.6rem] sm:text-sm md:text-lg uppercase border-4 border-black dark:border-[#F5E6D3]
                   transition-all duration-200 outline-none
                   ${isActive 
                     ? "bg-[#C1502E] text-[#F5E6D3] translate-x-[4px] translate-y-[4px] shadow-none" 
@@ -157,12 +157,12 @@ const ProfilePage = () => {
                   }
                 `}
               >
-                <Icon className={`w-6 h-6 ${isActive ? "text-[#F5E6D3]" : "text-[#C1502E]"}`} />
-                {tab.label}
+                <Icon className={`w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0 ${isActive ? "text-[#F5E6D3]" : "text-[#C1502E]"}`} />
+                <span className="hidden xs:inline sm:inline leading-tight text-center">{tab.label}</span>
                 
                 {/* Active Indicator Dot */}
                 {isActive && (
-                  <div className="absolute top-2 right-2 w-3 h-3 bg-[#F5E6D3] border-2 border-black rounded-none" />
+                  <div className="absolute top-1.5 right-1.5 w-2 h-2 sm:w-3 sm:h-3 bg-[#F5E6D3] border-2 border-black rounded-none" />
                 )}
               </button>
             );
@@ -201,7 +201,7 @@ const ProfilePage = () => {
               <div className="animate-in fade-in slide-in-from-bottom-4 duration-300">
                 {/* Removing wrapper card from component since we are in a tab container context now, 
                     but MyInterviewExperiences has its own structure, so we wrap it to match style */}
-                <div className="bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] p-8 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)]">
+                <div className="bg-[#F5E6D3] dark:bg-[#2C1810] border-4 border-black dark:border-[#F5E6D3] p-4 sm:p-6 md:p-8 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_rgba(245,230,211,0.3)]">
                   <MyInterviewExperiences userId={userData?.id} />
                 </div>
               </div>