diff --git a/packages/frontend/src/features/events/components/event-subscribers.tsx b/packages/frontend/src/features/events/components/event-subscribers.tsx
index e1bb8ec..69eb071 100644
--- a/packages/frontend/src/features/events/components/event-subscribers.tsx
+++ b/packages/frontend/src/features/events/components/event-subscribers.tsx
@@ -2,7 +2,14 @@
 
 import { Button } from '@/shared/components/ui/button';
 import { Card } from '@/shared/components/ui/card';
-import { ArrowLeft, UserIcon, UsersIcon } from 'lucide-react';
+import {
+  ArrowLeft,
+  UserIcon,
+  UsersIcon,
+  Clock,
+  CheckCircle,
+  XCircle
+} from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Input } from '@/shared/components/ui/input';
@@ -140,16 +147,44 @@ export const EventSubscribers = ({ eventId }: { eventId: string }) => {
         />
 
         <Tabs defaultValue="all" onValueChange={setActiveTab} className="mb-4">
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="all">All ({tabCounts.all})</TabsTrigger>
-            <TabsTrigger value="pending">
-              Pending ({tabCounts.pending})
+          <TabsList className="flex w-full max-w-full gap-2 sm:grid sm:grid-cols-4 sm:gap-0">
+            <TabsTrigger
+              value="all"
+              aria-label={`All (${tabCounts.all})`}
+              className="h-10 flex-none sm:flex-auto"
+            >
+              <UsersIcon className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">All ({tabCounts.all})</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="pending"
+              aria-label={`Pending (${tabCounts.pending})`}
+              className="h-10 flex-none sm:flex-auto"
+            >
+              <Clock className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">
+                Pending ({tabCounts.pending})
+              </span>
             </TabsTrigger>
-            <TabsTrigger value="approved">
-              Approved ({tabCounts.approved})
+            <TabsTrigger
+              value="approved"
+              aria-label={`Approved (${tabCounts.approved})`}
+              className="h-10 flex-none sm:flex-auto"
+            >
+              <CheckCircle className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">
+                Approved ({tabCounts.approved})
+              </span>
             </TabsTrigger>
-            <TabsTrigger value="rejected">
-              Rejected ({tabCounts.rejected})
+            <TabsTrigger
+              value="rejected"
+              aria-label={`Rejected (${tabCounts.rejected})`}
+              className="h-10 flex-none sm:flex-auto"
+            >
+              <XCircle className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">
+                Rejected ({tabCounts.rejected})
+              </span>
             </TabsTrigger>
           </TabsList>
 
diff --git a/packages/frontend/src/features/home/components/comment-card/comment-card.tsx b/packages/frontend/src/features/home/components/comment-card/comment-card.tsx
index d7713f4..ae58436 100644
--- a/packages/frontend/src/features/home/components/comment-card/comment-card.tsx
+++ b/packages/frontend/src/features/home/components/comment-card/comment-card.tsx
@@ -156,13 +156,18 @@ export const CommentCard = ({
                 <button
                   onClick={() => setShowCommentSection(!showCommentSection)}
                   className="flex items-center gap-2 rounded-full p-1 text-primary-500 hover:bg-neutral-light-200"
+                  aria-label={
+                    showCommentSection ? 'Hide comments' : 'View comments'
+                  }
                 >
                   {showCommentSection ? (
                     <ChevronUp className="h-5 w-5" />
                   ) : (
                     <ChevronDown className="h-5 w-5" />
                   )}
-                  {showCommentSection ? 'Hide Comments' : 'View Comments'}
+                  <span className="hidden sm:inline">
+                    {showCommentSection ? 'Hide Comments' : 'View Comments'}
+                  </span>
                 </button>
               )}
             <button
diff --git a/packages/frontend/src/features/home/components/common/thread-comment-input.tsx b/packages/frontend/src/features/home/components/common/thread-comment-input.tsx
index ae613c9..92de88b 100644
--- a/packages/frontend/src/features/home/components/common/thread-comment-input.tsx
+++ b/packages/frontend/src/features/home/components/common/thread-comment-input.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@/shared/components/ui/button';
 import { Textarea } from '@/shared/components/ui/textarea';
-import { ImageIcon, SmileIcon } from 'lucide-react';
+import { ImageIcon, SmileIcon, X, Send } from 'lucide-react';
 import { useState } from 'react';
 import {
   Avatar,
@@ -57,8 +57,8 @@ export const ThreadCommentInput = ({
       )}
       onClick={(e) => e.stopPropagation()}
     >
-      <div className="flex items-center gap-6">
-        <Avatar className="mb-12 h-11 w-11 bg-warning-500">
+      <div className="flex items-start gap-4 sm:gap-6">
+        <Avatar className="mb-12 h-10 w-10 bg-warning-500 sm:h-11 sm:w-11">
           {user.pictureUploadLink && (
             <ImagePreview
               imagePath={user.pictureUploadLink}
@@ -69,7 +69,7 @@ export const ThreadCommentInput = ({
             />
           )}
           {!user.pictureUploadLink && (
-            <AvatarFallback className="bg-warning-500">
+            <AvatarFallback className="bg-warning-500 text-sm sm:text-base">
               {user.firstName
                 ?.split(' ')
                 .map((n) => n[0])
@@ -88,11 +88,11 @@ export const ThreadCommentInput = ({
               value={comment}
               onChange={(e) => setComment(e.target.value)}
               className={cn(
-                'min-h-[150px] resize-none rounded-lg bg-white text-base'
+                'min-h-[120px] resize-none rounded-lg bg-white text-base sm:min-h-[150px]'
               )}
               maxLength={characterLimit}
             />
-            <div className="absolute bottom-14 right-4 flex items-center gap-1 text-sm text-muted-foreground">
+            <div className="absolute bottom-14 right-3 flex items-center gap-1 text-xs text-muted-foreground sm:right-4 sm:text-sm">
               <SharedIcons.info className="h-4 w-4" />
               <span className={isOverLimit ? 'text-destructive' : ''}>
                 {remainingCharacters} / {characterLimit} characters
@@ -103,34 +103,44 @@ export const ThreadCommentInput = ({
               <div className="flex gap-1">
                 <button
                   type="button"
-                  className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
+                  className="cursor-not-allowed rounded-md p-1 opacity-50"
                   aria-label="Add image"
+                  disabled
+                  aria-disabled="true"
+                  title="Disabled"
                 >
                   <ImageIcon className="h-6 w-6 text-muted-foreground" />
                 </button>
                 <button
                   type="button"
-                  className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
+                  className="cursor-not-allowed rounded-md p-1 opacity-50"
                   aria-label="Add emoji"
+                  disabled
+                  aria-disabled="true"
+                  title="Disabled"
                 >
                   <SmileIcon className="h-6 w-6 text-muted-foreground" />
                 </button>
               </div>
 
-              <div className="flex gap-2">
+              <div className="flex items-center gap-2">
                 <Button
                   variant="outline"
                   onClick={onCancel}
-                  className="h-10 w-fit rounded-xl"
+                  className="h-9 w-9 rounded-full p-0 sm:h-10 sm:w-fit sm:rounded-xl sm:px-4"
+                  aria-label="Cancel"
                 >
-                  Cancel
+                  <X className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Cancel</span>
                 </Button>
                 <Button
                   onClick={handleSubmit}
-                  className="h-10 w-fit rounded-xl"
+                  className="h-9 w-9 rounded-full p-0 sm:h-10 sm:w-fit sm:rounded-xl sm:px-4"
                   disabled={isSubmitting || !comment.trim() || isOverLimit}
+                  aria-label="Post comment"
                 >
-                  Post Comment
+                  <Send className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Post Comment</span>
                 </Button>
               </div>
             </div>
diff --git a/packages/frontend/src/features/home/components/common/thread-searchbar.tsx b/packages/frontend/src/features/home/components/common/thread-searchbar.tsx
index c71ed30..6a80199 100644
--- a/packages/frontend/src/features/home/components/common/thread-searchbar.tsx
+++ b/packages/frontend/src/features/home/components/common/thread-searchbar.tsx
@@ -72,7 +72,7 @@ export const ThreadSearchbar = ({
             </div>
           </Button>
           <div className="absolute right-4 top-1/2 flex -translate-y-1/2 gap-1">
-            <button
+            {/* <button
               type="button"
               className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
               aria-label="Add image"
@@ -85,7 +85,7 @@ export const ThreadSearchbar = ({
               aria-label="Add emoji"
             >
               <SmileIcon className="h-6 w-6 text-muted-foreground" />
-            </button>
+            </button> */}
           </div>
         </div>
       </div>
diff --git a/packages/frontend/src/features/home/components/home.tsx b/packages/frontend/src/features/home/components/home.tsx
index b6fbb85..b9811c8 100644
--- a/packages/frontend/src/features/home/components/home.tsx
+++ b/packages/frontend/src/features/home/components/home.tsx
@@ -269,10 +269,10 @@ export const Home = () => {
   };
 
   return (
-    <div className="container-wide px-0" onClick={handleOutsideClick}>
-      <div className="grid grid-cols-12 gap-8">
+    <div className="container-wide px-4 md:px-0" onClick={handleOutsideClick}>
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-12 md:gap-8">
         {/* Left column - 1 part */}
-        <div className="sticky top-0 col-span-3 h-fit rounded-2xl border bg-card p-4">
+        <div className="order-1 col-span-1 h-fit rounded-2xl border bg-card p-4 md:sticky md:top-0 md:order-1 md:col-span-3">
           <HomeSidebar
             activeTab={activeTab}
             handleActiveTab={handleActiveTab}
@@ -280,7 +280,7 @@ export const Home = () => {
         </div>
 
         {/* Middle column */}
-        <div className="relative col-span-7 min-h-screen gap-4 overflow-y-auto rounded-2xl border bg-muted bg-neutral-light-100 p-4">
+        <div className="relative order-2 col-span-1 min-h-[60vh] gap-4 overflow-visible rounded-2xl border bg-neutral-light-100 p-4 md:order-2 md:col-span-7 md:overflow-y-auto">
           {viewThreads && selectedThread ? (
             <div className="flex flex-col gap-4">
               <IconButton
diff --git a/packages/frontend/src/features/home/components/main-card/base-thread-card.tsx b/packages/frontend/src/features/home/components/main-card/base-thread-card.tsx
index da08295..641a686 100644
--- a/packages/frontend/src/features/home/components/main-card/base-thread-card.tsx
+++ b/packages/frontend/src/features/home/components/main-card/base-thread-card.tsx
@@ -78,8 +78,8 @@ BaseThreadCard.Author = function ThreadCardAuthor({
           </AvatarFallback>
         )}
       </Avatar>
-      <div className="flex flex-col">
-        <span className="font-semibold">{name}</span>
+      <div className="flex min-w-0 flex-col">
+        <span className="truncate font-semibold">{name}</span>
         <span className="text-gray-500">
           {transformDateTimeToTimeAgo(timeAgo)}
         </span>
diff --git a/packages/frontend/src/features/home/components/main-card/thread-card.tsx b/packages/frontend/src/features/home/components/main-card/thread-card.tsx
index 519ad4a..6c70a34 100644
--- a/packages/frontend/src/features/home/components/main-card/thread-card.tsx
+++ b/packages/frontend/src/features/home/components/main-card/thread-card.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/shared/components/ui/button';
-import { MessageSquare, Heart, Bookmark } from 'lucide-react';
+import { MessageSquare, Heart, Bookmark, Eye } from 'lucide-react';
 import Image from 'next/image';
 import { Thread } from '../../lib/mock-data';
 import { ThreadCardProvider } from './base-thread-card';
@@ -157,10 +157,12 @@ export const ThreadCard = ({
           <div className="flex items-center gap-2">
             <Button
               variant="secondary"
-              className="h-10 rounded-xl"
+              className="h-9 rounded-xl px-2 sm:h-10 sm:px-3"
               onClick={handleViewThread}
+              aria-label="View thread"
             >
-              View thread
+              <Eye className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">View thread</span>
             </Button>
 
             {/* {isOwner && (
diff --git a/packages/frontend/src/features/home/components/main-card/thread-input.tsx b/packages/frontend/src/features/home/components/main-card/thread-input.tsx
index a3be2c6..c6fe133 100644
--- a/packages/frontend/src/features/home/components/main-card/thread-input.tsx
+++ b/packages/frontend/src/features/home/components/main-card/thread-input.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@/shared/components/ui/button';
 import { Textarea } from '@/shared/components/ui/textarea';
-import { ImageIcon, SmileIcon } from 'lucide-react';
+import { ImageIcon, SmileIcon, X, Send } from 'lucide-react';
 import { useState } from 'react';
 import { Avatar, AvatarFallback } from '@/shared/components/ui/avatar';
 import { SharedIcons } from '@/shared/components/icons';
@@ -59,8 +59,8 @@ export const ThreadInput = ({
         className
       )}
     >
-      <div className="flex gap-6">
-        <Avatar className="h-11 w-11 bg-warning-500">
+      <div className="flex gap-4 sm:gap-6">
+        <Avatar className="h-10 w-10 bg-warning-500 sm:h-11 sm:w-11">
           {user?.pictureUploadLink && (
             <ImagePreview
               imagePath={user?.pictureUploadLink}
@@ -71,7 +71,7 @@ export const ThreadInput = ({
             />
           )}
           {!user?.pictureUploadLink && (
-            <AvatarFallback className="bg-warning-500">
+            <AvatarFallback className="bg-warning-500 text-sm sm:text-base">
               {user?.firstName
                 ?.split(' ')
                 ?.map((n) => n[0])
@@ -89,10 +89,10 @@ export const ThreadInput = ({
               placeholder="What's on your mind?"
               value={content}
               onChange={(e) => setContent(e.target.value)}
-              className="min-h-[400px] resize-none rounded-lg text-base"
+              className="min-h-[200px] resize-none rounded-lg text-base sm:min-h-[400px]"
               maxLength={characterLimit}
             />
-            <div className="absolute bottom-14 right-4 flex items-center gap-1 text-sm text-muted-foreground">
+            <div className="absolute bottom-14 right-3 flex items-center gap-1 text-xs text-muted-foreground sm:right-4 sm:text-sm">
               <SharedIcons.info className="h-4 w-4" />
               <span className={isOverLimit ? 'text-destructive' : ''}>
                 {remainingCharacters} / {characterLimit} characters
@@ -103,38 +103,48 @@ export const ThreadInput = ({
               <div className="flex gap-1">
                 <button
                   type="button"
-                  className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
+                  className="cursor-not-allowed rounded-md p-1 opacity-50"
                   aria-label="Add image"
+                  disabled
+                  aria-disabled="true"
+                  title="Disabled"
                 >
                   <ImageIcon className="h-6 w-6 text-muted-foreground" />
                 </button>
                 <button
                   type="button"
-                  className="rounded-md p-1 hover:bg-muted-foreground/10 focus:outline-none focus:ring-2 focus:ring-muted-foreground/20"
+                  className="cursor-not-allowed rounded-md p-1 opacity-50"
                   aria-label="Add emoji"
+                  disabled
+                  aria-disabled="true"
+                  title="Disabled"
                 >
                   <SmileIcon className="h-6 w-6 text-muted-foreground" />
                 </button>
               </div>
 
-              <div className="flex gap-2">
+              <div className="flex items-center gap-2">
                 <Button
                   onClick={handleCancel}
                   variant="outline"
-                  className="h-10 w-fit rounded-xl"
+                  className="h-9 w-9 rounded-full p-0 sm:h-10 sm:w-fit sm:rounded-xl sm:px-4"
+                  aria-label="Cancel"
                 >
-                  Cancel
+                  <X className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Cancel</span>
                 </Button>
                 <Button
                   onClick={handleSubmit}
-                  className="h-10 w-fit rounded-xl"
+                  className="h-9 w-9 rounded-full p-0 sm:h-10 sm:w-fit sm:rounded-xl sm:px-4"
                   disabled={
                     isSubmitting ||
                     (!content.trim() && attachments.length === 0) ||
                     isOverLimit
                   }
+                  aria-label="Post thread"
                 >
-                  Post Thread
+                  <Send className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Post Thread</span>
                 </Button>
               </div>
             </div>
diff --git a/packages/frontend/src/features/mentorship/components/common/mentor-card.tsx b/packages/frontend/src/features/mentorship/components/common/mentor-card.tsx
index 12995d5..c0ffdd4 100644
--- a/packages/frontend/src/features/mentorship/components/common/mentor-card.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/mentor-card.tsx
@@ -32,7 +32,7 @@ const MentorCard = ({
   return (
     <div
       className={cn(
-        'flex h-[156px] w-full min-w-0 justify-between rounded-2xl border border-neutral-light-400 p-4 shadow-sm sm:min-w-[380px]',
+        'flex h-[156px] w-full min-w-0 max-w-full justify-between rounded-2xl border border-neutral-light-400 p-4 shadow-sm sm:min-w-[340px]',
         className
       )}
     >
diff --git a/packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx b/packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx
index e3d59d9..dbf1cab 100644
--- a/packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx
@@ -208,8 +208,16 @@ export const MentorshipForm = ({ title, description }: MentorshipFormProps) => {
                 variant="link"
                 onClick={() => setIsModalOpen(true)}
                 type="button"
+                className="w-full whitespace-normal break-words text-left sm:w-auto sm:whitespace-nowrap sm:text-center"
               >
-                View Mentorship Program Agreement to Proceed
+                <span className="sm:hidden">
+                  View Mentorship Program
+                  <br />
+                  Agreement to Proceed
+                </span>
+                <span className="hidden sm:inline">
+                  View Mentorship Program Agreement to Proceed
+                </span>
               </Button>
               <IconButton
                 className="w-full"
diff --git a/packages/frontend/src/features/mentorship/components/common/modals/admin-mentee-modal.tsx b/packages/frontend/src/features/mentorship/components/common/modals/admin-mentee-modal.tsx
index f914882..b2a0829 100644
--- a/packages/frontend/src/features/mentorship/components/common/modals/admin-mentee-modal.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/modals/admin-mentee-modal.tsx
@@ -125,9 +125,9 @@ export const AdminMenteeModalCard = ({
             View
           </Button>
         </DialogTrigger>
-        <DialogContent className="w-[552px] max-w-[552px] rounded-3xl">
+        <DialogContent className="flex h-[85dvh] w-[92vw] max-w-[95vw] flex-col rounded-3xl p-4 sm:h-auto sm:w-[552px] sm:max-w-[552px] sm:p-6">
           <DialogHeader>
-            <DialogTitle className="text-center text-2xl font-semibold">
+            <DialogTitle className="text-center text-xl font-semibold sm:text-2xl">
               Mentee Profile
             </DialogTitle>
             <DialogDescription className="sr-only">
@@ -135,7 +135,7 @@ export const AdminMenteeModalCard = ({
             </DialogDescription>
           </DialogHeader>
 
-          <div className="flex flex-col gap-4 rounded-3xl bg-neutral-light-300 p-4">
+          <div className="flex flex-col gap-4 rounded-3xl bg-neutral-light-300 p-3 sm:p-4">
             <div className="relative flex flex-col items-center gap-4 rounded-2xl border border-neutral-light-500 bg-white p-6">
               <div
                 className={cn(
diff --git a/packages/frontend/src/features/mentorship/components/common/modals/admin-mentor-modal.tsx b/packages/frontend/src/features/mentorship/components/common/modals/admin-mentor-modal.tsx
index 8c1efc9..7593f1c 100644
--- a/packages/frontend/src/features/mentorship/components/common/modals/admin-mentor-modal.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/modals/admin-mentor-modal.tsx
@@ -128,9 +128,9 @@ export const AdminMentorModalCard = ({
             View
           </Button>
         </DialogTrigger>
-        <DialogContent className="w-[552px] max-w-[552px] rounded-3xl">
+        <DialogContent className="flex h-[85dvh] w-[92vw] max-w-[95vw] flex-col rounded-3xl p-4 sm:h-auto sm:w-[552px] sm:max-w-[552px] sm:p-6">
           <DialogHeader>
-            <DialogTitle className="text-center text-2xl font-semibold">
+            <DialogTitle className="text-center text-xl font-semibold sm:text-2xl">
               {isRating ? 'Session Review' : 'Mentor Profile'}
             </DialogTitle>
             <DialogDescription className="sr-only">
@@ -138,7 +138,7 @@ export const AdminMentorModalCard = ({
             </DialogDescription>
           </DialogHeader>
 
-          <div className="flex flex-col gap-4 rounded-3xl bg-neutral-light-300 p-4">
+          <div className="flex flex-col gap-4 rounded-3xl bg-neutral-light-300 p-3 sm:p-4">
             <div className="relative flex flex-col items-center gap-4 rounded-2xl border border-neutral-light-500 bg-white p-6">
               <div
                 className={cn(
diff --git a/packages/frontend/src/features/mentorship/components/common/modals/agreement-dialog.tsx b/packages/frontend/src/features/mentorship/components/common/modals/agreement-dialog.tsx
index f92f59f..7841b38 100644
--- a/packages/frontend/src/features/mentorship/components/common/modals/agreement-dialog.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/modals/agreement-dialog.tsx
@@ -60,19 +60,21 @@ export const MentorshipAgreementDialog = ({
 }: MentorshipAgreementDialogProps) => {
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="h-[700px] min-w-[740px]">
+      <DialogContent className="flex h-[85dvh] w-[92vw] max-w-[95vw] flex-col p-4 sm:h-[700px] sm:min-w-[740px] sm:p-6">
         <DialogHeader>
-          <DialogTitle>Mentorship Program Agreement - {title}</DialogTitle>
+          <DialogTitle className="text-base sm:text-lg">
+            Mentorship Program Agreement - {title}
+          </DialogTitle>
         </DialogHeader>
         <DialogDescription className="sr-only">
           Please read the following terms and conditions carefully before
           agreeing to participate in our mentorship program.
         </DialogDescription>
-        <ScrollArea className="h-[480px] w-full rounded-md border p-4">
+        <ScrollArea className="min-h-0 w-full flex-1 rounded-md border p-3 sm:p-4">
           <div className="whitespace-pre-line">{agreementContent}</div>
         </ScrollArea>
-        <div className="mb-6 flex flex-col gap-6 pt-4">
-          <div className="flex items-center space-x-2">
+        <div className="mb-2 mt-4 flex flex-col gap-4 sm:mb-6 sm:gap-6">
+          <div className="flex items-center gap-2">
             <Checkbox
               id="agreement"
               checked={hasAgreed}
@@ -82,12 +84,17 @@ export const MentorshipAgreementDialog = ({
             />
             <label
               htmlFor="agreement"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              className="text-sm font-medium leading-snug peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
             >
               I agree to the terms and conditions
             </label>
           </div>
-          <Button onClick={() => onOpenChange(false)}>Close</Button>
+          <Button
+            className="w-full sm:w-auto"
+            onClick={() => onOpenChange(false)}
+          >
+            Close
+          </Button>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/packages/frontend/src/features/mentorship/components/common/modals/mentor-modal.tsx b/packages/frontend/src/features/mentorship/components/common/modals/mentor-modal.tsx
index aba2e75..1441c17 100644
--- a/packages/frontend/src/features/mentorship/components/common/modals/mentor-modal.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/modals/mentor-modal.tsx
@@ -36,9 +36,9 @@ export function MentorModal({
 }: MentorModalProps) {
   return (
     <Dialog open={isOpen} onOpenChange={setIsModalOpen}>
-      <DialogContent className="w-[552px] max-w-[552px] rounded-3xl">
+      <DialogContent className="flex h-[85dvh] w-[92vw] max-w-[95vw] flex-col rounded-3xl p-4 sm:h-auto sm:w-[552px] sm:max-w-[552px] sm:p-6">
         <DialogHeader>
-          <DialogTitle className="text-center text-2xl font-semibold">
+          <DialogTitle className="text-center text-xl font-semibold sm:text-2xl">
             {profileData?.isMentor ? 'Mentor Profile' : 'Mentee Profile'}
           </DialogTitle>
           <DialogDescription className="sr-only">
@@ -48,8 +48,8 @@ export function MentorModal({
 
         <ScrollArea
           className={cn(
-            'rounded-2xl bg-neutral-light-300 p-4',
-            profileData?.isMentor ? 'h-[450px]' : ''
+            'min-h-0 flex-1 rounded-2xl bg-neutral-light-300 p-3 sm:p-4',
+            profileData?.isMentor ? 'h-[60dvh] sm:h-[450px]' : ''
           )}
         >
           <div className="flex flex-col gap-4">
@@ -57,7 +57,7 @@ export function MentorModal({
           </div>
         </ScrollArea>
 
-        <div className="flex gap-4">
+        <div className="mt-4 flex gap-4">
           <Button
             variant="outline"
             className="mx-auto h-10 w-full"
diff --git a/packages/frontend/src/features/mentorship/components/common/modals/past-mentors-modal.tsx b/packages/frontend/src/features/mentorship/components/common/modals/past-mentors-modal.tsx
index 62b2310..76be072 100644
--- a/packages/frontend/src/features/mentorship/components/common/modals/past-mentors-modal.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/modals/past-mentors-modal.tsx
@@ -42,14 +42,10 @@ export function PastMentorsModal({
   };
 
   return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={setIsPastMentorsOpen}
-      // className="w-[600px] max-w-[800px] rounded-3xl"
-    >
-      <DialogContent className="w-[552px] max-w-[552px] rounded-3xl">
+    <Dialog open={isOpen} onOpenChange={setIsPastMentorsOpen}>
+      <DialogContent className="flex h-[85dvh] w-[92vw] max-w-[95vw] flex-col rounded-3xl p-4 sm:h-auto sm:w-[552px] sm:max-w-[552px] sm:p-6">
         <DialogHeader>
-          <DialogTitle className="text-center text-2xl font-semibold">
+          <DialogTitle className="text-center text-xl font-semibold sm:text-2xl">
             Past Mentors
           </DialogTitle>
           <DialogDescription className="sr-only">
@@ -59,7 +55,7 @@ export function PastMentorsModal({
           </DialogDescription>
         </DialogHeader>
 
-        <ScrollArea className="h-[450px] rounded-2xl bg-neutral-light-300 p-4">
+        <ScrollArea className="h-[60dvh] rounded-2xl bg-neutral-light-300 p-3 sm:h-[450px] sm:p-4">
           <div className="flex flex-col gap-4">
             <div className="grid grid-cols-1 gap-4">
               {mentors.map((mentor) => (
diff --git a/packages/frontend/src/features/mentorship/components/common/modals/profile-dialog.tsx b/packages/frontend/src/features/mentorship/components/common/modals/profile-dialog.tsx
index 7347a08..b92c576 100644
--- a/packages/frontend/src/features/mentorship/components/common/modals/profile-dialog.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/modals/profile-dialog.tsx
@@ -34,7 +34,7 @@ export const ProfileDialog = ({ mentor, user }: ProfileDialogProps) => {
           View your profile and update your information
         </DialogDescription>
       </DialogHeader>
-      <DialogContent className="min-w-[1000px] p-12">
+      <DialogContent className="flex h-[85dvh] w-[92vw] max-w-[95vw] flex-col p-4 sm:h-auto sm:min-w-[1000px] sm:p-12">
         <div className="flex flex-col gap-6 py-4">
           {/* <div className="flex flex-col gap-2"> */}
           <h5 className="font-semibold">
@@ -64,17 +64,17 @@ export const ProfileDialog = ({ mentor, user }: ProfileDialogProps) => {
             <p className="font-normal">{mentor?.experience_details}</p>
           </div>
         </div>
-        <div className="flex justify-start gap-4 pt-4">
-          <Button className="w-[180px]">
+        <div className="flex flex-col justify-start gap-3 pt-4 sm:flex-row sm:gap-4">
+          <Button className="w-full sm:w-[180px]">
             <MessageSquare className="mr-1 h-5 w-5" />
             Message
           </Button>
-          <Button className="w-[180px]" variant="outline">
+          <Button className="w-full sm:w-[180px]" variant="outline">
             <FileText className="mr-1 h-5 w-5" />
             View Resume
           </Button>
           <Button
-            className="w-[180px]"
+            className="w-full sm:w-[180px]"
             variant="outline"
             onClick={() => router.push(`/profile`)}
           >
diff --git a/packages/frontend/src/features/mentorship/components/mentee-dashboard.tsx b/packages/frontend/src/features/mentorship/components/mentee-dashboard.tsx
index b58491b..7109528 100644
--- a/packages/frontend/src/features/mentorship/components/mentee-dashboard.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentee-dashboard.tsx
@@ -148,7 +148,7 @@ const MenteeDashboard = () => {
 
   return (
     <div className="container-wide flex w-full flex-col gap-6 px-4 md:px-0">
-      <MentorshipSection className="h-auto w-full">
+      <MentorshipSection className="h-auto w-full overflow-hidden">
         <MentorshipSection.Header>
           <h6 className="font-semibold">Hey, {user?.firstName}!👋</h6>
         </MentorshipSection.Header>
@@ -252,7 +252,7 @@ const MenteeDashboard = () => {
             </MentorshipSection.Header>
 
             <MentorshipSection.Content>
-              <ScrollArea className="h-[300px] pr-2 sm:h-[400px] sm:pr-4">
+              <ScrollArea className="h-[260px] pr-2 sm:h-[400px] sm:pr-4">
                 <div className="flex flex-col gap-4">
                   {notes.map((note) => (
                     <NotesCard
diff --git a/packages/frontend/src/features/mentorship/components/mentor-dashboard.tsx b/packages/frontend/src/features/mentorship/components/mentor-dashboard.tsx
index 37a3a68..e8bacc4 100644
--- a/packages/frontend/src/features/mentorship/components/mentor-dashboard.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentor-dashboard.tsx
@@ -205,7 +205,7 @@ const MentorDashboard = () => {
       </MentorshipSection>
 
       <div className="flex flex-col gap-4 lg:flex-row">
-        <MentorshipSection className="h-[444px]">
+        <MentorshipSection className="h-auto overflow-hidden lg:h-[444px]">
           <MentorshipSection.Header>
             <h6 className="font-semibold">Upcoming Sessions</h6>
             <Button className="h-10 w-full sm:w-auto">View All</Button>
@@ -214,7 +214,7 @@ const MentorDashboard = () => {
             <DataTable columns={sessionsColumns} data={upcomingSessionsData} />
           </MentorshipSection.Content>
         </MentorshipSection>
-        <MentorshipSection className="h-[444px]">
+        <MentorshipSection className="h-auto overflow-hidden lg:h-[444px]">
           <MentorshipSection.Header>
             <div className="flex items-center gap-4">
               <h6 className="font-semibold">My Mentees</h6>
diff --git a/packages/frontend/src/features/mentorship/components/mentorship-admin-page.tsx b/packages/frontend/src/features/mentorship/components/mentorship-admin-page.tsx
index 279a6df..09bb445 100644
--- a/packages/frontend/src/features/mentorship/components/mentorship-admin-page.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentorship-admin-page.tsx
@@ -134,13 +134,13 @@ export const MentorshipAdminPage = () => {
   const menteeColumns = createMenteeColumns(handleRefreshData);
 
   return (
-    <div className="container-wide flex w-full flex-col gap-6">
+    <div className="container-wide flex w-full flex-col gap-6 px-4 md:px-0">
       <MentorshipSection>
         <MentorshipSection.Header>
           <h6 className="font-semibold">Hey, {user?.firstName}!👋</h6>
         </MentorshipSection.Header>
         <MentorshipSection.Content>
-          <div className="flex gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <MentorCard
               title="Mentors"
               value={adminMentorshipTotals?.totalMentors.toString() || '0'}
@@ -192,8 +192,8 @@ export const MentorshipAdminPage = () => {
           </div>
         </MentorshipSection.Content>
       </MentorshipSection>
-      <div className="flex h-full w-full gap-4">
-        <MentorshipSection className="h-[fullpx]">
+      <div className="flex h-full w-full flex-col gap-4 md:flex-col lg:flex-row">
+        <MentorshipSection className="h-auto overflow-hidden">
           <MentorshipSection.Header>
             <div className="flex w-full items-center justify-between">
               <h6 className="font-semibold">Mentors and Mentees</h6>
@@ -218,8 +218,8 @@ export const MentorshipAdminPage = () => {
           </MentorshipSection.Header>
           <MentorshipSection.Content>
             <Tabs defaultValue="mentors">
-              <div className="flex items-start justify-between gap-4 rounded-xl bg-neutral-light-200 p-2">
-                <TabsList>
+              <div className="flex flex-col items-stretch justify-between gap-3 rounded-xl bg-neutral-light-200 p-2 sm:flex-row sm:items-start sm:gap-4">
+                <TabsList className="max-w-full">
                   <TabsTrigger value="mentors" className="w-fit px-4">
                     Mentors
                   </TabsTrigger>
@@ -229,7 +229,7 @@ export const MentorshipAdminPage = () => {
                 </TabsList>
                 <IconInput
                   leftIcon="search"
-                  className="h-12 rounded-full bg-white"
+                  className="h-12 w-full rounded-full bg-white sm:w-auto"
                   placeholder="Search"
                 />
               </div>
diff --git a/packages/frontend/src/features/mentorship/components/mentorship-apply.tsx b/packages/frontend/src/features/mentorship/components/mentorship-apply.tsx
index 2355ed7..d222ba6 100644
--- a/packages/frontend/src/features/mentorship/components/mentorship-apply.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentorship-apply.tsx
@@ -6,7 +6,7 @@ import { MentorshipIcons } from './icons';
 
 export const MentorshipApply = () => {
   return (
-    <Card className="mx-auto h-auto w-full max-w-5xl px-4 py-8 sm:px-8 sm:py-12">
+    <Card className="mx-auto h-auto w-full max-w-5xl overflow-hidden px-4 py-8 sm:px-8 sm:py-12">
       <div className="flex w-full flex-col items-center space-y-8">
         <h3 className="text-center font-semibold">Apply for Mentorship</h3>
 
diff --git a/packages/frontend/src/features/resources/components/common/expanded-job-card.tsx b/packages/frontend/src/features/resources/components/common/expanded-job-card.tsx
index beee9f0..63bca2e 100644
--- a/packages/frontend/src/features/resources/components/common/expanded-job-card.tsx
+++ b/packages/frontend/src/features/resources/components/common/expanded-job-card.tsx
@@ -91,7 +91,7 @@ export function ExpandedJobCard({
   };
 
   return (
-    <Card className="relative w-full min-w-full bg-neutral-light-100 p-4">
+    <Card className="relative w-full max-w-full bg-neutral-light-100 p-4">
       <AlertDialogUI />
       <DeleteModal
         isOpen={showDeleteDialog}
@@ -146,22 +146,24 @@ export function ExpandedJobCard({
         </span>
 
         {/* Job Details */}
-        <div className="flex items-center justify-start gap-6 py-4 text-sm text-muted-foreground">
-          <div className="flex flex-col gap-1">
+        <div className="grid w-full grid-cols-1 gap-4 py-4 text-sm text-muted-foreground sm:flex sm:items-center sm:justify-start sm:gap-6">
+          <div className="flex min-w-0 flex-col gap-1">
             <span>Experience</span>
             <p className="paragraph-lg">
               {opportunity.experience || 'Not specified'}
             </p>
           </div>
-          <div className="flex flex-col gap-1">
+          <div className="flex min-w-0 flex-col gap-1">
             <span>Location</span>
-            <p className="paragraph-lg">{location}</p>
+            <p className="paragraph-lg whitespace-normal break-words">
+              {location}
+            </p>
           </div>
-          <div className="flex flex-col gap-1">
+          <div className="flex min-w-0 flex-col gap-1">
             <span>Salary</span>
             <p className="paragraph-lg">{salaryRange}</p>
           </div>
-          <div className="flex flex-col gap-1">
+          <div className="flex min-w-0 flex-col gap-1">
             <span>Job Type</span>
             <p className="paragraph-lg">
               {opportunity.settings?.toString() || 'Not specified'}
@@ -180,7 +182,7 @@ export function ExpandedJobCard({
         </div>
 
         {/* Apply Button */}
-        <Button onClick={handleApply} className="h-12 w-[300px]">
+        <Button onClick={handleApply} className="h-12 w-full sm:w-[300px]">
           <Link className="h-6 w-6" />
           Apply Now
         </Button>
diff --git a/packages/frontend/src/features/resources/components/common/expanded-news-modal.tsx b/packages/frontend/src/features/resources/components/common/expanded-news-modal.tsx
index eaa9693..17b4c15 100644
--- a/packages/frontend/src/features/resources/components/common/expanded-news-modal.tsx
+++ b/packages/frontend/src/features/resources/components/common/expanded-news-modal.tsx
@@ -34,9 +34,9 @@ export function ExpandedNewsModal({
 }: ExpandedNewsModalProps) {
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="min-w-[1000px]">
+      <DialogContent className="flex h-[85dvh] w-[92vw] max-w-[95vw] flex-col p-4 sm:h-auto sm:min-w-[1000px] sm:p-6">
         <DialogHeader>
-          <DialogTitle className="self-center text-base font-semibold">
+          <DialogTitle className="self-center text-lg font-semibold sm:text-base">
             News
           </DialogTitle>
           <DialogDescription className="sr-only">
@@ -44,8 +44,8 @@ export function ExpandedNewsModal({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex flex-col gap-4 rounded-2xl bg-neutral-light-200 p-4">
-          <div className="relative aspect-video h-[300px] w-full">
+        <div className="flex flex-1 flex-col gap-4 rounded-2xl bg-neutral-light-200 p-4">
+          <div className="relative aspect-video h-[220px] w-full sm:h-[300px]">
             {/* <Image
               src={image || '/event/placeholder-2.jpg'}
               alt={newsTitle}
@@ -63,28 +63,38 @@ export function ExpandedNewsModal({
             />
           </div>
 
-          <h2 className="text-h3 self-center font-semibold">{newsTitle}</h2>
+          <h2 className="sm:text-h3 self-center text-xl font-semibold">
+            {newsTitle}
+          </h2>
 
-          <ScrollArea className="h-[250px]">
-            <p className="paragraph-lg text-justify font-normal">
+          <ScrollArea className="h-[200px] sm:h-[250px]">
+            <p className="sm:paragraph-lg text-justify text-sm font-normal">
               {description}
             </p>
           </ScrollArea>
         </div>
 
-        <div className="mt-4 flex items-center justify-between gap-4">
-          <Button variant="outline" onClick={onClose} className="h-12 w-full">
+        <div className="mt-4 flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="h-11 w-full sm:h-12 sm:w-auto"
+          >
             Back to News
           </Button>
           {articleUrl && (
-            <Button variant="default" asChild className="h-12 w-full">
+            <Button
+              variant="default"
+              asChild
+              className="h-11 w-full sm:h-12 sm:w-auto"
+            >
               <a
                 href={ensureAbsoluteUrl(articleUrl)}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex items-center justify-center"
               >
-                <LinkIcon className="mr-2 h-6 w-6" />
+                <LinkIcon className="mr-2 h-5 w-5 sm:h-6 sm:w-6" />
                 Read Full Article
               </a>
             </Button>
diff --git a/packages/frontend/src/features/resources/components/common/featured-news-card.tsx b/packages/frontend/src/features/resources/components/common/featured-news-card.tsx
index 038d368..536cfe6 100644
--- a/packages/frontend/src/features/resources/components/common/featured-news-card.tsx
+++ b/packages/frontend/src/features/resources/components/common/featured-news-card.tsx
@@ -109,7 +109,7 @@ export const FeaturedNewsCard = ({
   };
 
   return (
-    <Card className="mx-auto w-full bg-primary-300 p-6 text-white">
+    <Card className="mx-auto w-full bg-primary-300 p-4 text-white sm:p-6">
       <AlertDialogUI />
       <DeleteModal
         isOpen={showDeleteDialog}
@@ -145,9 +145,9 @@ export const FeaturedNewsCard = ({
         )}
       </div>
 
-      <div className="grid grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6">
         {/* Left Column - Image */}
-        <div className="relative h-[280px] w-full">
+        <div className="relative h-[200px] w-full sm:h-[280px]">
           <ImagePreview
             imagePath={image}
             alt={title}
@@ -159,10 +159,12 @@ export const FeaturedNewsCard = ({
         </div>
 
         {/* Right Column - Content */}
-        <div className="flex flex-1 flex-col gap-4">
-          <h1 className="text-3xl font-semibold text-white">{title}</h1>
+        <div className="flex flex-1 flex-col gap-3 sm:gap-4">
+          <h1 className="text-xl font-semibold text-white sm:text-3xl">
+            {title}
+          </h1>
 
-          <p className="font-regular line-clamp-3 text-justify text-base text-white">
+          <p className="font-regular line-clamp-4 text-justify text-sm text-white sm:line-clamp-3 sm:text-base">
             {details}
           </p>
 
@@ -171,7 +173,7 @@ export const FeaturedNewsCard = ({
             <Badge variant="secondary">{type}</Badge>
           </div>
 
-          <div className="flex items-center justify-between text-sm">
+          <div className="flex flex-col items-start justify-between gap-2 text-xs sm:flex-row sm:items-center sm:text-sm">
             <div className="flex items-center gap-2">
               <Clock className="h-4 w-4" />
               <span>{format(new Date(created_at), 'MMM d, yyyy')}</span>
diff --git a/packages/frontend/src/features/resources/components/common/job-card.tsx b/packages/frontend/src/features/resources/components/common/job-card.tsx
index 9c3fb9e..e31a666 100644
--- a/packages/frontend/src/features/resources/components/common/job-card.tsx
+++ b/packages/frontend/src/features/resources/components/common/job-card.tsx
@@ -5,7 +5,7 @@ import {
 } from '@/shared/components/ui/avatar';
 import { Button } from '@/shared/components/ui/button';
 import { Card } from '@/shared/components/ui/card';
-import { Link } from 'lucide-react';
+import { EyeIcon, Link } from 'lucide-react';
 import { WorkSettings } from '../../lib/constants/enums';
 
 interface JobCardProps {
@@ -53,55 +53,72 @@ export function JobCard({
   };
 
   return (
-    <Card className="relative flex h-[120px] w-full items-center gap-4 p-4">
-      <div className="absolute left-0 h-full w-[54px] shrink-0 rounded-l-xl bg-primary-200" />
+    <Card className="relative flex w-full max-w-full flex-col gap-4 p-4 sm:h-[120px] sm:flex-row sm:items-center sm:gap-4">
+      <div className="absolute left-0 top-0 h-full w-[40px] shrink-0 rounded-l-xl bg-primary-200 sm:w-[54px]" />
 
-      <div className="flex w-full items-center gap-4">
-        <Avatar className="h-16 w-16 border border-neutral-light-500 bg-white">
+      <div className="flex w-full gap-3 sm:items-center sm:gap-4">
+        <Avatar className="h-12 w-12 border border-neutral-light-500 bg-white sm:h-16 sm:w-16">
           <AvatarImage src={companyLogoUrl} alt={company} />
           <AvatarFallback>{company[0]}</AvatarFallback>
         </Avatar>
 
-        <div className="mt-4 flex flex-1">
-          <div className="flex w-1/3 flex-col gap-1">
-            <p className="paragraph-lg">{job}</p>
-            <p className="paragraph-sm text-neutral-dark-100">{company}</p>
-          </div>
-
-          <div className="flex w-2/3 justify-start gap-6 text-sm text-muted-foreground">
-            <div className="flex flex-col items-start gap-1">
-              <span>Experience</span>
-              <p className="paragraph-lg">{experience || 'Not specified'}</p>
-            </div>
-            <div className="flex w-1/3 flex-col items-start gap-1">
-              <span>Location</span>
-              <p className="paragraph-lg">{location}</p>
-            </div>
-            <div className="flex flex-col items-start gap-1">
-              <span>Salary</span>
-              <p className="paragraph-lg">
-                ${salary_range.from} - ${salary_range.to}
+        {/* Right pane: stacks content and actions on mobile, side-by-side on larger screens */}
+        <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+          <div className="mt-1 flex flex-1 flex-col sm:mt-4 sm:flex-row">
+            <div className="flex w-full min-w-0 flex-col gap-1 sm:w-1/3">
+              <p className="line-clamp-1 text-base font-semibold sm:text-lg">
+                {job}
+              </p>
+              <p className="line-clamp-1 text-sm text-neutral-dark-100 sm:text-base">
+                {company}
               </p>
             </div>
-            <div className="flex flex-col items-start gap-1">
-              <span>Job Type</span>
-              <p className="paragraph-lg">{settings}</p>
+
+            <div className="mt-3 grid w-full grid-cols-1 gap-3 text-xs text-muted-foreground sm:mt-0 sm:flex sm:w-2/3 sm:justify-start sm:gap-6 sm:text-sm">
+              <div className="flex min-w-0 flex-col items-start gap-1">
+                <span>Experience</span>
+                <p className="line-clamp-2 break-words text-sm sm:line-clamp-1 sm:text-base">
+                  {experience || 'Not specified'}
+                </p>
+              </div>
+              <div className="flex min-w-0 flex-col items-start gap-1 sm:w-1/3">
+                <span>Location</span>
+                <p className="whitespace-normal break-words text-sm sm:text-base">
+                  {location}
+                </p>
+              </div>
+              <div className="flex min-w-0 flex-col items-start gap-1">
+                <span>Salary</span>
+                <p className="truncate text-sm sm:text-base">
+                  ${salary_range.from} - ${salary_range.to}
+                </p>
+              </div>
+              <div className="flex min-w-0 flex-col items-start gap-1">
+                <span>Job Type</span>
+                <p className="truncate text-sm sm:text-base">{settings}</p>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className="flex flex-col gap-2">
-          <Button onClick={handleApply} className="h-10 w-[240px]">
-            <Link className="h-5 w-5" />
-            Apply Now
-          </Button>
-          <Button
-            variant="outline"
-            onClick={handleLearnMore}
-            className="h-10 w-[240px]"
-          >
-            Learn More
-          </Button>
+          <div className="flex w-full flex-row justify-end gap-2 sm:w-auto sm:flex-col sm:justify-start">
+            <Button
+              onClick={handleApply}
+              className="h-9 w-9 self-end rounded-full p-0 sm:h-10 sm:w-[240px] sm:rounded-xl sm:px-4"
+              aria-label="Apply now"
+            >
+              <Link className="h-5 w-5" />
+              <span className="ml-2 hidden sm:inline">Apply Now</span>
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleLearnMore}
+              className="h-9 w-9 self-end rounded-full p-0 sm:h-10 sm:w-[240px] sm:rounded-xl sm:px-4"
+              aria-label="Learn more"
+            >
+              <EyeIcon className="h-5 w-5" />
+              <span className="hidden sm:inline">Learn More</span>
+            </Button>
+          </div>
         </div>
       </div>
     </Card>
diff --git a/packages/frontend/src/shared/components/pdf/pdf-preview-modal.tsx b/packages/frontend/src/shared/components/pdf/pdf-preview-modal.tsx
index b589f9d..6c08aab 100644
--- a/packages/frontend/src/shared/components/pdf/pdf-preview-modal.tsx
+++ b/packages/frontend/src/shared/components/pdf/pdf-preview-modal.tsx
@@ -9,6 +9,7 @@ import {
 } from '@/shared/components/ui/dialog';
 import { ScrollArea } from '@/shared/components/ui/scroll-area';
 import { ReactNode } from 'react';
+import { cn } from '@/shared/lib/utils';
 
 interface PdfPreviewModalAction {
   label: string;
@@ -46,9 +47,9 @@ export function PdfPreviewModal({
   filePath,
   children,
   actions = [],
-  maxWidth = 'min-w-[1000px]',
-  height = 'min-h-[800px]',
-  scrollAreaHeight = 'min-h-[600px]'
+  maxWidth = 'sm:min-w-[1000px]',
+  height = 'sm:min-h-[800px]',
+  scrollAreaHeight = 'sm:min-h-[600px]'
 }: PdfPreviewModalProps) {
   const defaultActions: PdfPreviewModalAction[] = [
     {
@@ -62,18 +63,27 @@ export function PdfPreviewModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className={maxWidth}>
+      <DialogContent
+        className={cn('flex h-[85dvh] flex-col p-4 sm:h-auto sm:p-6', maxWidth)}
+      >
         <DialogHeader>
-          <DialogTitle className="self-center text-2xl font-semibold">
+          <DialogTitle className="self-center text-lg font-semibold sm:text-2xl">
             {title}
           </DialogTitle>
-          {description && <DialogDescription>{description}</DialogDescription>}
+          {description && (
+            <DialogDescription className="text-center text-sm sm:text-base">
+              {description}
+            </DialogDescription>
+          )}
         </DialogHeader>
 
         <div
-          className={`flex ${height} flex-col gap-4 rounded-2xl bg-neutral-light-300 p-4`}
+          className={cn(
+            'flex min-h-0 flex-1 flex-col gap-4 rounded-2xl bg-neutral-light-300 p-3 sm:p-4',
+            height
+          )}
         >
-          <ScrollArea className={scrollAreaHeight}>
+          <ScrollArea className={cn('min-h-0 flex-1', scrollAreaHeight)}>
             <PdfPreview filePath={filePath} />
           </ScrollArea>
 
@@ -81,14 +91,14 @@ export function PdfPreviewModal({
         </div>
 
         {modalActions.length > 0 && (
-          <div className="mt-4 flex items-center justify-between gap-4">
+          <div className="mt-4 flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
             {modalActions.map((action, index) => (
               <Button
                 key={index}
                 variant={action.variant || 'default'}
                 onClick={action.onClick}
                 asChild={!!action.href}
-                className="h-12 w-full"
+                className="h-11 w-full sm:h-12 sm:w-auto"
               >
                 {action.href ? (
                   <a