diff --git a/package-lock.json b/package-lock.json
index 225352b..deb9c29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3503,7 +3503,7 @@
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3513,7 +3513,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
@@ -4796,7 +4796,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -9345,7 +9345,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
diff --git a/src/app/globals.css b/src/app/globals.css
index 719b2cf..8cb2ba6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -145,3 +145,12 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Hide scrollbar for horizontal scroll containers */
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/src/app/loans/page.tsx b/src/app/loans/page.tsx
index e62c9e1..5cff9f2 100644
--- a/src/app/loans/page.tsx
+++ b/src/app/loans/page.tsx
@@ -28,11 +28,11 @@ export default async function LoanDashboardPage() {
   const items = await getItems();
 
   return (
-    <div className="min-h-screen w-full bg-[#0C2C47] p-8">
+    <div className="min-h-screen w-full bg-[#0C2C47] p-4 md:p-8">
       <DashboardNav userRole={session.user.role} />
-      <div className="flex justify-between items-center mb-8">
+      <div className="flex justify-between items-center mb-6 md:mb-8">
         <div>
-          <h1 className="text-4xl font-bold text-white mb-2">Loans</h1>
+          <h1 className="text-2xl md:text-4xl font-bold text-white mb-1 md:mb-2">Loans</h1>
           <p className="text-white/80">{loans.length} LOAN REQUESTS</p>
         </div>
 
@@ -43,7 +43,7 @@ export default async function LoanDashboardPage() {
         />
       </div>
 
-      <div className="bg-white rounded-lg p-6 shadow-sm">
+      <div className="bg-white rounded-lg p-3 md:p-6 shadow-sm">
         <LoansTable data={loans} items={items} />
       </div>
     </div>
diff --git a/src/components/DashboardNav.tsx b/src/components/DashboardNav.tsx
index 6656bec..97fb588 100644
--- a/src/components/DashboardNav.tsx
+++ b/src/components/DashboardNav.tsx
@@ -13,12 +13,12 @@ interface DashboardNavProps {
 export function DashboardNav({ userRole }: DashboardNavProps) {
     const pathname = usePathname();
     // Unauthenticated users only see Catalogue tab
-    const tabs = userRole 
-        ? getAvailableTabs(userRole) 
+    const tabs = userRole
+        ? getAvailableTabs(userRole)
         : [{ name: 'CATALOGUE', href: '/catalogue' }];
 
     return (
-        <div className="flex space-x-8 border-b border-white/10 mb-8">
+        <div className="flex gap-4 md:gap-8 border-b border-white/10 mb-6 md:mb-8 overflow-x-auto scrollbar-hide">
             {tabs.map((tab) => {
                 const isActive = pathname.startsWith(tab.href);
                 return (
@@ -26,7 +26,7 @@ export function DashboardNav({ userRole }: DashboardNavProps) {
                         key={tab.name}
                         href={tab.href}
                         className={cn(
-                            "pb-4 text-sm font-bold tracking-wide transition-colors hover:text-white",
+                            "pb-3 md:pb-4 text-xs md:text-sm font-bold tracking-wide transition-colors hover:text-white whitespace-nowrap shrink-0",
                             isActive
                                 ? "border-b-2 border-[#57A6FF] text-white"
                                 : "text-white/50 border-b-2 border-transparent"
diff --git a/src/components/catalogue/Catalogue.tsx b/src/components/catalogue/Catalogue.tsx
index a6e35d8..2837d7f 100644
--- a/src/components/catalogue/Catalogue.tsx
+++ b/src/components/catalogue/Catalogue.tsx
@@ -171,11 +171,11 @@ export default function Catalogue({ slocs, ihs, userRole }: CatalogueProps) {
   }, [fetchItems]);
 
   return (
-    <div className="min-h-screen w-full bg-[#0C2C47] p-8">
+    <div className="min-h-screen w-full bg-[#0C2C47] p-4 md:p-8">
       <DashboardNav userRole={userRole} />
-      <div className="mb-8 flex items-center justify-between">
+      <div className="mb-6 md:mb-8 flex items-center justify-between">
         <div>
-          <h1 className="mb-2 text-4xl font-bold text-white">Catalogue</h1>
+          <h1 className="mb-1 md:mb-2 text-2xl md:text-4xl font-bold text-white">Catalogue</h1>
           <p className="text-white/80">{totalItems} ITEMS</p>
         </div>
         {canEdit && (
@@ -183,8 +183,8 @@ export default function Catalogue({ slocs, ihs, userRole }: CatalogueProps) {
         )}
       </div>
 
-      <div className="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-        <div className="relative w-full max-w-md">
+      <div className="mb-6 md:mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-4">
+        <div className="relative w-full md:max-w-md">
           <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
           <Input
             ref={searchInputRef}
@@ -205,38 +205,39 @@ export default function Catalogue({ slocs, ihs, userRole }: CatalogueProps) {
             </button>
           )}
         </div>
-      <div className="flex gap-3 flex-wrap">
-      
+      <div className="flex gap-2 md:gap-3 flex-wrap">
+
       {/*Reset Filters Button - only show when filters are active */}
       {hasActiveFilters && (
         <button
            onClick={resetFilters}
-           className="h-9 rounded-md bg-white/20 px-4 text-white hover:bg-white/30 transition-colors flex items-center gap-2"
+           className="h-8 md:h-9 rounded-md bg-white/20 px-3 md:px-4 text-sm text-white hover:bg-white/30 transition-colors flex items-center gap-1.5"
          >
-           <RotateCcw className="h-4 w-4" />
-           Reset Filters
+           <RotateCcw className="h-3.5 w-3.5" />
+           <span className="hidden sm:inline">Reset Filters</span>
+           <span className="sm:hidden">Reset</span>
         </button>
       )}
 
       <select
            value={filterSlocId}
            onChange={(e) => setFilterSlocId(e.target.value)}
-           className="h-9 rounded-md bg-white/20 px-3 text-white border border-white/20 focus:outline-none"
+           className="h-8 md:h-9 rounded-md bg-white/20 px-2 md:px-3 text-sm text-white border border-white/20 focus:outline-none"
          >
-           <option value="" className="text-black">All Locations</option>  {/*Default*/}
+           <option value="" className="text-black">All Locations</option>
            {slocs.map((s) => (
              <option key={s.slocId} value={s.slocId} className="text-black">
                {s.slocName}
              </option>
            ))}
          </select>
-      
+
       <select
            value={filterIhId}
            onChange={(e) => setFilterIhId(e.target.value)}
-           className="h-9 rounded-md bg-white/20 px-3 text-white border border-white/20 focus:outline-none"
+           className="h-8 md:h-9 rounded-md bg-white/20 px-2 md:px-3 text-sm text-white border border-white/20 focus:outline-none"
          >
-           <option value="" className="text-black">All Holders</option>  {/*Default*/}
+           <option value="" className="text-black">All Holders</option>
            {ihs.map((h) => (
              <option key={h.ihId} value={h.ihId} className="text-black">
                {h.ihName}
@@ -247,19 +248,19 @@ export default function Catalogue({ slocs, ihs, userRole }: CatalogueProps) {
       <select
            value={sortOption}
            onChange={(e) => setSortOption(e.target.value as SortOption)}
-           className="h-9 rounded-md bg-white/20 px-3 text-white border border-white/20 focus:outline-none"
+           className="h-8 md:h-9 rounded-md bg-white/20 px-2 md:px-3 text-sm text-white border border-white/20 focus:outline-none"
          >
-           <option value="name" className="text-black">Sort by Item Name</option>
-           <option value="quantity" className="text-black">Sort by Quantity</option>
-           <option value="id" className="text-black">Sort by ID</option>
+           <option value="name" className="text-black">Sort: Name</option>
+           <option value="quantity" className="text-black">Sort: Qty</option>
+           <option value="id" className="text-black">Sort: ID</option>
          </select>
-      
+
         {/*Asc/Desc Button*/}
          <button
            onClick={() => {
              setSortAsc(!sortAsc);
            }}
-           className="h-9 rounded-md bg-white/20 px-4 text-white hover:bg-white/30 transition-colors"
+           className="h-8 md:h-9 rounded-md bg-white/20 px-3 md:px-4 text-white hover:bg-white/30 transition-colors"
          >
            {sortAsc ? "▲" : "▼"}
          </button>
@@ -303,7 +304,7 @@ export default function Catalogue({ slocs, ihs, userRole }: CatalogueProps) {
                 
                 {/* Action buttons - appear on hover (only for LOGS+) */}
                 {canEdit && (
-                  <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <div className="absolute top-2 right-2 flex gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
                     <ItemFormModal
                       slocs={slocs}
                       ihs={ihs}
diff --git a/src/components/catalogue/ItemFormModal.tsx b/src/components/catalogue/ItemFormModal.tsx
index f4d0ca7..c501b2e 100644
--- a/src/components/catalogue/ItemFormModal.tsx
+++ b/src/components/catalogue/ItemFormModal.tsx
@@ -303,7 +303,7 @@ export default function ItemFormModal({
                 )}
               />
 
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <FormField
                   control={form.control}
                   name="itemQty"
@@ -340,7 +340,7 @@ export default function ItemFormModal({
                 />
               </div>
 
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <FormField
                   control={form.control}
                   name="itemSloc"
@@ -475,12 +475,12 @@ export default function ItemFormModal({
                 )}
               />
 
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <FormField
                   control={form.control}
                   name="itemUnloanable"
                   render={({ field }) => (
-                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-3 sm:p-4">
                       <FormControl>
                         <Checkbox
                           checked={field.value === true}
@@ -502,7 +502,7 @@ export default function ItemFormModal({
                   control={form.control}
                   name="itemExpendable"
                   render={({ field }) => (
-                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-3 sm:p-4">
                       <FormControl>
                         <Checkbox
                           checked={field.value === true}
diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx
new file mode 100644
index 0000000..6827dbe
--- /dev/null
+++ b/src/components/layout/MobileNav.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+
+interface MobileNavProps {
+  children: React.ReactNode;
+}
+
+export function MobileNav({ children }: MobileNavProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="md:hidden">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setOpen(true)}
+        aria-label="Open menu"
+      >
+        <Menu className="h-5 w-5" />
+      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent side="right" className="w-[280px] p-6">
+          <SheetHeader className="sr-only">
+            <SheetTitle>Navigation Menu</SheetTitle>
+            <SheetDescription>App navigation and user actions</SheetDescription>
+          </SheetHeader>
+          <div className="mt-6 flex flex-col gap-4">
+            {children}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 24d48b6..17c87b7 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -4,12 +4,21 @@ import { getSession } from '@/lib/auth/session';
 import { UserMenu } from '@/components/auth/UserMenu';
 import { LoginModal } from '@/components/auth/LoginModal';
 import { DevRoleDropdown } from '@/components/auth/DevRoleDropdown';
+import { MobileNav } from './MobileNav';
 
 export async function Navbar() {
   const session = await getSession();
   const botUsername = process.env.TELEGRAM_BOT_USERNAME;
   const isDev = process.env.NODE_ENV === 'development';
 
+  const authContent = isDev ? (
+    <DevRoleDropdown currentRole={session?.user?.role} />
+  ) : session ? (
+    <UserMenu user={session.user} />
+  ) : (
+    botUsername && <LoginModal botUsername={botUsername} />
+  );
+
   return (
     <nav className="sticky top-0 z-50 w-full border-b bg-white shadow-lg">
       <div className="flex items-center justify-between px-4 py-2">
@@ -19,16 +28,15 @@ export async function Navbar() {
           NUSC LMS
         </Link>
 
-        {/* Dev role dropdown (local only) | User Menu or Login */}
-        <div className="flex items-center gap-4">
-          {isDev ? (
-            <DevRoleDropdown currentRole={session?.user?.role} />
-          ) : session ? (
-            <UserMenu user={session.user} />
-          ) : (
-            botUsername && <LoginModal botUsername={botUsername} />
-          )}
+        {/* Desktop auth controls */}
+        <div className="hidden md:flex items-center gap-4">
+          {authContent}
         </div>
+
+        {/* Mobile menu */}
+        <MobileNav>
+          {authContent}
+        </MobileNav>
       </div>
     </nav>
   );
diff --git a/src/components/loans/LoanFormModal.tsx b/src/components/loans/LoanFormModal.tsx
index c651d15..1a4ca30 100644
--- a/src/components/loans/LoanFormModal.tsx
+++ b/src/components/loans/LoanFormModal.tsx
@@ -263,7 +263,7 @@ export function LoanFormModal({
                     {triggerElement}
                 </DialogTrigger>
             )}
-            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-2xl w-[calc(100vw-2rem)] max-h-[90vh] overflow-y-auto">
                 {/* Success State after creating */}
                 {createdLoanRefNo !== null ? (
                     <>
@@ -307,7 +307,7 @@ export function LoanFormModal({
 
                         {/* Requester Section - only for add mode */}
                         {mode === "add" ? (
-                            <div className="space-y-4 border p-4 rounded-md">
+                            <div className="space-y-4 border p-3 sm:p-4 rounded-md">
                                 <div className="flex justify-between items-center">
                                     <h3 className="font-semibold text-sm text-foreground/80">
                                         {form.watch("newRequester") ? "New Requester" : "Requester"}
@@ -341,7 +341,7 @@ export function LoanFormModal({
                                 />
                             </div>
                         ) : loan && (
-                            <div className="space-y-2 border p-4 rounded-md bg-muted/20">
+                            <div className="space-y-2 border p-3 sm:p-4 rounded-md bg-muted/20">
                                 <h3 className="font-semibold text-sm text-foreground/80">Requester</h3>
                                 <div className="text-sm">
                                     <span className="font-medium">
@@ -356,7 +356,7 @@ export function LoanFormModal({
                         )}
 
                         {/* Loan Details */}
-                        <div className="space-y-4 border p-4 rounded-md">
+                        <div className="space-y-4 border p-3 sm:p-4 rounded-md">
                             <h3 className="font-semibold text-sm text-foreground/80">Loan Details</h3>
                             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                 <FormField
@@ -441,7 +441,7 @@ export function LoanFormModal({
                         </div>
 
                         {/* Items Section */}
-                        <div className="space-y-4 border p-4 rounded-md bg-muted/10">
+                        <div className="space-y-4 border p-3 sm:p-4 rounded-md bg-muted/10">
                             <h3 className="font-semibold text-sm text-foreground/80">Items</h3>
 
                             <ItemSelector 
@@ -456,9 +456,9 @@ export function LoanFormModal({
                                     const totalQty = getTotalQty(item.itemId);
                                     const isOverLimit = item.loanQty > totalQty;
                                     return (
-                                        <div key={idx} className="flex justify-between items-center p-3 bg-background border rounded shadow-sm">
-                                            <div className="flex-1">
-                                                <div className="font-medium text-sm">{itemInfo?.itemDesc || "Unknown Item"}</div>
+                                        <div key={idx} className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 p-3 bg-background border rounded shadow-sm">
+                                            <div className="flex-1 min-w-0">
+                                                <div className="font-medium text-sm truncate">{itemInfo?.itemDesc || "Unknown Item"}</div>
                                                 <div className="text-xs text-muted-foreground">
                                                     {isOverLimit ? (
                                                         <span className="text-destructive">Exceeds total ({totalQty})</span>
@@ -467,7 +467,7 @@ export function LoanFormModal({
                                                     )}
                                                 </div>
                                             </div>
-                                            <div className="flex items-center gap-3">
+                                            <div className="flex items-center gap-3 shrink-0">
                                                 <div className="flex items-center gap-2">
                                                     <label className="text-xs text-muted-foreground">Qty:</label>
                                                     <Input
@@ -479,11 +479,11 @@ export function LoanFormModal({
                                                         className={`w-20 h-8 ${isOverLimit ? 'border-destructive' : ''}`}
                                                     />
                                                 </div>
-                                                <Button 
+                                                <Button
                                                     type="button"
-                                                    size="icon" 
-                                                    variant="ghost" 
-                                                    className="h-8 w-8 text-destructive" 
+                                                    size="icon"
+                                                    variant="ghost"
+                                                    className="h-8 w-8 text-destructive"
                                                     onClick={() => removeItem(idx)}
                                                 >
                                                     <Trash2 className="h-4 w-4" />
diff --git a/src/components/loans/LoansTable.tsx b/src/components/loans/LoansTable.tsx
index 05c2eed..87c39bb 100644
--- a/src/components/loans/LoansTable.tsx
+++ b/src/components/loans/LoansTable.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useTransition, useMemo } from "react";
 import { format } from "date-fns";
-import { Eye, CheckCircle, AlertCircle, Clock, XCircle, Search, Trash2, Package } from "lucide-react";
+import { Eye, CheckCircle, AlertCircle, Clock, XCircle, Search, Trash2, Package, Calendar } from "lucide-react";
 import { toast } from "sonner";
 
 import {
@@ -89,14 +89,14 @@ export function LoansTable({ data, items }: LoansTableProps) {
           const updatedDetails = selectedLoan.loanDetails.map(d =>
             d.loanDetailId === detailId ? { ...d, loanItemStatus: returnedStatus } : d
           );
-          
+
           // Check if all items are now returned/rejected
-          const allReturned = updatedDetails.every(d => 
-            d.loanItemStatus === LoanItemStatus.RETURNED || 
-            d.loanItemStatus === LoanItemStatus.RETURNED_LATE || 
+          const allReturned = updatedDetails.every(d =>
+            d.loanItemStatus === LoanItemStatus.RETURNED ||
+            d.loanItemStatus === LoanItemStatus.RETURNED_LATE ||
             d.loanItemStatus === LoanItemStatus.REJECTED
           );
-          
+
           setSelectedLoan({
             ...selectedLoan,
             loanDetails: updatedDetails,
@@ -116,8 +116,8 @@ export function LoansTable({ data, items }: LoansTableProps) {
       if (result.success) {
         toast.success("Loan approved and stock deducted");
         // Update local state - keep popup open with new status
-        setSelectedLoan(prev => prev ? { 
-          ...prev, 
+        setSelectedLoan(prev => prev ? {
+          ...prev,
           loanRequestStatus: LoanRequestStatus.ONGOING,
           // Also update all item statuses to ON_LOAN
           loanDetails: prev.loanDetails.map(d => ({
@@ -138,8 +138,8 @@ export function LoansTable({ data, items }: LoansTableProps) {
       if (result.success) {
         toast.success("Loan rejected");
         // Update local state - keep popup open with new status
-        setSelectedLoan(prev => prev ? { 
-          ...prev, 
+        setSelectedLoan(prev => prev ? {
+          ...prev,
           loanRequestStatus: LoanRequestStatus.REJECTED,
           // Also update all item statuses to REJECTED
           loanDetails: prev.loanDetails.map(d => ({
@@ -171,15 +171,15 @@ export function LoansTable({ data, items }: LoansTableProps) {
     const searchLower = search.toLowerCase();
     return data.filter(loan => {
       const requesterName = `${loan.requester.firstName}${loan.requester.lastName ? ` ${loan.requester.lastName}` : ''}`;
-      
+
       // Search by requester name, NUSNET, ref no
       const matchesBasicSearch =
         requesterName.toLowerCase().includes(searchLower) ||
         (loan.requester.nusnetId && loan.requester.nusnetId.toLowerCase().includes(searchLower)) ||
         loan.refNo.toString().includes(search);
-      
+
       // Search by item name or item ID
-      const matchesItemSearch = loan.loanDetails.some(detail => 
+      const matchesItemSearch = loan.loanDetails.some(detail =>
         detail.item.itemDesc.toLowerCase().includes(searchLower) ||
         detail.itemId.toString().includes(search)
       );
@@ -195,8 +195,9 @@ export function LoansTable({ data, items }: LoansTableProps) {
 
   return (
     <>
-      <div className="flex justify-between items-center mb-4 flex-wrap gap-4">
-        <div className="relative w-full max-w-[350px]">
+      {/* Search & Filters */}
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-3">
+        <div className="relative w-full sm:max-w-[350px]">
           <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
           <Input
             placeholder="Search by requester, ref #, or item name..."
@@ -205,14 +206,14 @@ export function LoansTable({ data, items }: LoansTableProps) {
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-        <div className="flex gap-2 flex-wrap">
+        <div className="flex gap-1.5 sm:gap-2 flex-wrap">
           {statusOptions.map(status => (
             <button
               key={status}
               onClick={() => setFilterStatus(status)}
-              className={`h-9 rounded-md px-4 transition-colors capitalize ${
-                filterStatus === status 
-                  ? "bg-[#0C2C47] text-white" 
+              className={`h-8 sm:h-9 rounded-md px-2.5 sm:px-4 text-xs sm:text-sm transition-colors capitalize ${
+                filterStatus === status
+                  ? "bg-[#0C2C47] text-white"
                   : "bg-gray-100 text-gray-700 hover:bg-gray-200"
               }`}
             >
@@ -222,7 +223,8 @@ export function LoansTable({ data, items }: LoansTableProps) {
         </div>
       </div>
 
-      <div className="rounded-md border">
+      {/* Desktop Table */}
+      <div className="hidden md:block rounded-md border">
         <Table>
           <TableHeader>
             <TableRow>
@@ -291,15 +293,15 @@ export function LoansTable({ data, items }: LoansTableProps) {
                           <TooltipContent>View details</TooltipContent>
                         </Tooltip>
                       </TooltipProvider>
-                      
+
                       {loan.loanRequestStatus === LoanRequestStatus.PENDING && (
                         <>
                           <LoanFormModal loan={loan} items={items} mode="edit" />
-                          
+
                           <TooltipProvider>
                             <Tooltip>
-                              <AlertDialog 
-                                open={deleteDialogOpen && deletingRefNo === loan.refNo} 
+                              <AlertDialog
+                                open={deleteDialogOpen && deletingRefNo === loan.refNo}
                                 onOpenChange={(open) => {
                                   if (!isDeleting) {
                                     setDeleteDialogOpen(open);
@@ -358,9 +360,117 @@ export function LoansTable({ data, items }: LoansTableProps) {
         </Table>
       </div>
 
-      {/* Details Modal */}
+      {/* Mobile Card View */}
+      <div className="md:hidden space-y-3">
+        {filteredData.length === 0 ? (
+          <div className="py-12 text-center text-muted-foreground">
+            No loans found.
+          </div>
+        ) : (
+          filteredData.map((loan) => (
+            <div
+              key={loan.refNo}
+              className="rounded-lg border bg-white p-4 active:bg-muted/50 transition-colors"
+              onClick={() => setSelectedLoan(loan)}
+            >
+              {/* Top row: Ref + Status */}
+              <div className="flex items-center justify-between mb-2">
+                <span className="font-semibold text-sm">#{loan.refNo}</span>
+                <StatusBadge status={loan.loanRequestStatus} />
+              </div>
+
+              {/* Requester */}
+              <div className="mb-2">
+                <div className="font-medium text-sm">
+                  {loan.requester.firstName}{loan.requester.lastName ? ` ${loan.requester.lastName}` : ''}
+                </div>
+                <div className="text-xs text-muted-foreground">@{loan.requester.telegramHandle}</div>
+                {loan.organisation && (
+                  <div className="text-xs text-muted-foreground">{loan.organisation}</div>
+                )}
+              </div>
+
+              {/* Items preview */}
+              <div className="mb-2 space-y-1">
+                {loan.loanDetails.slice(0, 2).map((detail) => (
+                  <div key={detail.loanDetailId} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Package className="h-3 w-3 shrink-0" />
+                    <span className="truncate">{detail.item.itemDesc}</span>
+                    <span className="shrink-0">x{detail.loanQty}</span>
+                  </div>
+                ))}
+                {loan.loanDetails.length > 2 && (
+                  <span className="text-xs text-muted-foreground">+{loan.loanDetails.length - 2} more</span>
+                )}
+              </div>
+
+              {/* Period */}
+              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Calendar className="h-3 w-3 shrink-0" />
+                <span>{format(new Date(loan.loanDateStart), "dd MMM")} - {format(new Date(loan.loanDateEnd), "dd MMM")}</span>
+                {loan.loanRequestStatus === LoanRequestStatus.ONGOING && new Date() > new Date(loan.loanDateEnd) && (
+                  <span className="text-destructive font-medium ml-1">Overdue</span>
+                )}
+              </div>
+
+              {/* Actions for pending loans */}
+              {loan.loanRequestStatus === LoanRequestStatus.PENDING && (
+                <div className="flex gap-2 mt-3 pt-3 border-t" onClick={(e) => e.stopPropagation()}>
+                  <LoanFormModal loan={loan} items={items} mode="edit" />
+                  <AlertDialog
+                    open={deleteDialogOpen && deletingRefNo === loan.refNo}
+                    onOpenChange={(open) => {
+                      if (!isDeleting) {
+                        setDeleteDialogOpen(open);
+                        if (open) setDeletingRefNo(loan.refNo);
+                      }
+                    }}
+                  >
+                    <AlertDialogTrigger asChild>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="text-destructive hover:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Delete Loan Request</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          Are you sure you want to delete loan #{loan.refNo}? This action cannot be undone.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+                        <Button
+                          onClick={() => handleDelete(loan.refNo)}
+                          disabled={isDeleting}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                        >
+                          {isDeleting ? (
+                            <div className="flex items-center gap-2">
+                              <Spinner className="size-4" />
+                              <span>Deleting...</span>
+                            </div>
+                          ) : (
+                            "Delete"
+                          )}
+                        </Button>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Details Modal — Item 5: responsive */}
       <Dialog open={!!selectedLoan} onOpenChange={(open) => !open && setSelectedLoan(null)}>
-        <DialogContent className="max-w-3xl">
+        <DialogContent className="max-w-3xl w-[calc(100vw-2rem)] max-h-[90vh] overflow-y-auto">
           <DialogHeader>
             <div className="flex justify-between items-center pr-8">
               <DialogTitle>Loan Details #{selectedLoan?.refNo}</DialogTitle>
@@ -372,17 +482,17 @@ export function LoansTable({ data, items }: LoansTableProps) {
           </DialogHeader>
 
           <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-2 gap-4 text-sm bg-muted/20 p-4 rounded-md">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm bg-muted/20 p-3 sm:p-4 rounded-md">
               <div>
                 <span className="font-semibold block text-muted-foreground">Requester</span>
-                <div className="text-lg">{selectedLoan?.requester.firstName}{selectedLoan?.requester.lastName ? ` ${selectedLoan.requester.lastName}` : ''}</div>
+                <div className="text-base sm:text-lg">{selectedLoan?.requester.firstName}{selectedLoan?.requester.lastName ? ` ${selectedLoan.requester.lastName}` : ''}</div>
                 {selectedLoan?.requester.nusnetId && (
                   <div className="text-sm text-muted-foreground">{selectedLoan.requester.nusnetId}</div>
                 )}
               </div>
               <div>
                 <span className="font-semibold block text-muted-foreground">Period</span>
-                <div className="text-lg">
+                <div className="text-base sm:text-lg">
                   {selectedLoan && format(new Date(selectedLoan.loanDateStart), "dd MMM")} - {selectedLoan && format(new Date(selectedLoan.loanDateEnd), "dd MMM yyyy")}
                 </div>
                 {/* Lateness Check */}
@@ -397,21 +507,21 @@ export function LoansTable({ data, items }: LoansTableProps) {
             {/* Approval Actions */}
             {selectedLoan?.loanRequestStatus === LoanRequestStatus.PENDING && (
               canApproveLoan(selectedLoan) ? (
-                <div className="flex gap-2 p-4 bg-blue-50/50 border border-blue-100 rounded-md items-center justify-between">
+                <div className="flex flex-col sm:flex-row gap-2 p-3 sm:p-4 bg-blue-50/50 border border-blue-100 rounded-md sm:items-center sm:justify-between">
                   <div className="text-sm text-blue-800">
                     This request is <strong>Pending Approval</strong>. Approving will mark items as on loan.
                   </div>
-                  <div className="flex gap-2">
+                  <div className="flex gap-2 shrink-0">
                     <Button variant="destructive" size="sm" onClick={() => handleReject(selectedLoan.refNo)} disabled={isPending}>Reject</Button>
                     <Button className="bg-blue-600 hover:bg-blue-700" size="sm" onClick={() => handleApprove(selectedLoan.refNo)} disabled={isPending}>Approve Loan</Button>
                   </div>
                 </div>
               ) : (
-                <div className="flex gap-2 p-4 bg-red-50 border border-red-200 rounded-md items-center justify-between">
+                <div className="flex flex-col sm:flex-row gap-2 p-3 sm:p-4 bg-red-50 border border-red-200 rounded-md sm:items-center sm:justify-between">
                   <div className="text-sm text-red-800">
                     <strong>Cannot approve:</strong> Some items have insufficient available stock. See details below.
                   </div>
-                  <div className="flex gap-2">
+                  <div className="flex gap-2 shrink-0">
                     <Button variant="destructive" size="sm" onClick={() => handleReject(selectedLoan.refNo)} disabled={isPending}>Reject</Button>
                     <Button className="bg-gray-400 cursor-not-allowed" size="sm" disabled>Approve Loan</Button>
                   </div>
@@ -419,7 +529,8 @@ export function LoansTable({ data, items }: LoansTableProps) {
               )
             )}
 
-            <div className="border rounded-md">
+            {/* Items — desktop table */}
+            <div className="hidden sm:block border rounded-md overflow-x-auto">
               <Table>
                 <TableHeader>
                   <TableRow>
@@ -436,7 +547,7 @@ export function LoansTable({ data, items }: LoansTableProps) {
                   {selectedLoan?.loanDetails.map((detail) => {
                     const { available, sufficient } = getItemAvailability(detail.itemId, detail.loanQty);
                     const showAvailability = selectedLoan.loanRequestStatus === LoanRequestStatus.PENDING;
-                    
+
                     return (
                       <TableRow key={detail.loanDetailId} className={showAvailability && !sufficient ? "bg-red-50" : ""}>
                         <TableCell>
@@ -475,6 +586,50 @@ export function LoansTable({ data, items }: LoansTableProps) {
                 </TableBody>
               </Table>
             </div>
+
+            {/* Items — mobile card list */}
+            <div className="sm:hidden space-y-2">
+              {selectedLoan?.loanDetails.map((detail) => {
+                const { available, sufficient } = getItemAvailability(detail.itemId, detail.loanQty);
+                const showAvailability = selectedLoan.loanRequestStatus === LoanRequestStatus.PENDING;
+
+                return (
+                  <div
+                    key={detail.loanDetailId}
+                    className={`rounded-md border p-3 ${showAvailability && !sufficient ? "bg-red-50 border-red-200" : ""}`}
+                  >
+                    <div className="flex items-start justify-between gap-2 mb-1">
+                      <div className="min-w-0">
+                        <div className="font-medium text-sm truncate">{detail.item.itemDesc}</div>
+                        <div className="text-xs text-muted-foreground">ID: {detail.itemId}</div>
+                      </div>
+                      <ItemStatusBadge status={detail.loanItemStatus} />
+                    </div>
+                    <div className="flex items-center justify-between mt-2">
+                      <div className="text-xs text-muted-foreground">
+                        Qty: {detail.loanQty}
+                        {showAvailability && (
+                          <span className={sufficient ? " text-green-600" : " text-red-600 font-medium"}>
+                            {" "}(avail: {available}{!sufficient ? " — insufficient" : ""})
+                          </span>
+                        )}
+                      </div>
+                      {selectedLoan.loanRequestStatus === LoanRequestStatus.ONGOING && detail.loanItemStatus === LoanItemStatus.ON_LOAN && (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="h-7 text-xs"
+                          onClick={() => handleReturnItem(detail.loanDetailId)}
+                          disabled={isPending}
+                        >
+                          {isPending ? "..." : "Return"}
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
           </div>
         </DialogContent>
       </Dialog>
@@ -513,4 +668,3 @@ function ItemStatusBadge({ status }: { status: LoanItemStatus }) {
       return <Badge variant="outline" className="text-xs">{status}</Badge>;
   }
 }
-
diff --git a/src/components/loans/RequesterSelector.tsx b/src/components/loans/RequesterSelector.tsx
index 87f4f66..46d92fc 100644
--- a/src/components/loans/RequesterSelector.tsx
+++ b/src/components/loans/RequesterSelector.tsx
@@ -82,7 +82,7 @@ export function RequesterSelector({ requesters, value, onChange, onNewDetailsCha
                 className="space-y-3"
                 onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
             >
-                <div className="grid grid-cols-2 gap-3">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                     <div className="space-y-1">
                         <Label className={cn(errors?.firstName && "text-destructive")}>First Name *</Label>
                         <Input 
@@ -100,7 +100,7 @@ export function RequesterSelector({ requesters, value, onChange, onNewDetailsCha
                         <Input value={newDetails.lastName} onChange={(e) => handleNewChange("lastName", e.target.value)} placeholder="Doe" />
                     </div>
                 </div>
-                <div className="grid grid-cols-2 gap-3">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                     <div className="space-y-1">
                         <Label className={cn(errors?.telegramHandle && "text-destructive")}>Telegram Handle *</Label>
                         <Input 
diff --git a/src/components/users/GroupsView.tsx b/src/components/users/GroupsView.tsx
index fc91a04..6c3ba30 100644
--- a/src/components/users/GroupsView.tsx
+++ b/src/components/users/GroupsView.tsx
@@ -145,32 +145,33 @@ export function GroupsView({ groups, users, onRefresh, canManage = false }: Grou
                         <div className="flex items-center">
                             <button
                                 onClick={() => toggleGroup(group.ihId)}
-                                className="flex-1 flex items-center justify-between p-4 hover:bg-muted/50 transition-colors text-left min-w-0"
+                                className="flex-1 flex items-center justify-between p-3 md:p-4 hover:bg-muted/50 transition-colors text-left min-w-0"
                             >
-                                <div className="flex items-center gap-3">
+                                <div className="flex items-center gap-2 md:gap-3 min-w-0">
                                     {isExpanded ? (
-                                        <ChevronDown className="h-5 w-5 text-muted-foreground shrink-0" />
+                                        <ChevronDown className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground shrink-0" />
                                     ) : (
-                                        <ChevronRight className="h-5 w-5 text-muted-foreground shrink-0" />
+                                        <ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground shrink-0" />
                                     )}
                                     <div className="flex items-center gap-2 min-w-0">
-                                        <Users className="h-5 w-5 text-muted-foreground shrink-0" />
-                                        <span className="font-medium truncate">{group.ihName}</span>
+                                        <Users className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground shrink-0" />
+                                        <span className="font-medium truncate text-sm md:text-base">{group.ihName}</span>
                                     </div>
-                                    <Badge variant="outline" className="text-xs shrink-0">
+                                    <Badge variant="outline" className="text-xs shrink-0 hidden sm:inline-flex">
                                         {group.ihType}
                                     </Badge>
                                 </div>
-                                <div className="flex items-center gap-3 shrink-0 ml-2">
+                                <div className="flex items-center gap-2 md:gap-3 shrink-0 ml-2">
                                     {primaryMember && (
-                                        <span className="text-sm text-muted-foreground flex items-center gap-1">
+                                        <span className="text-xs md:text-sm text-muted-foreground items-center gap-1 hidden sm:flex">
                                             <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                                             {primaryMember.user.firstName}
                                             {primaryMember.user.lastName ? ` ${primaryMember.user.lastName}` : ""}
                                         </span>
                                     )}
-                                    <Badge variant="secondary">
-                                        {group.members.length} member{group.members.length !== 1 ? "s" : ""}
+                                    <Badge variant="secondary" className="text-xs">
+                                        {group.members.length}
+                                        <span className="hidden sm:inline"> member{group.members.length !== 1 ? "s" : ""}</span>
                                     </Badge>
                                 </div>
                             </button>
@@ -262,22 +263,22 @@ export function GroupsView({ groups, users, onRefresh, canManage = false }: Grou
                                             return (
                                                 <div
                                                     key={member.userId}
-                                                    className="flex items-center justify-between p-3 hover:bg-muted/30"
+                                                    className="flex items-center justify-between p-2.5 md:p-3 hover:bg-muted/30"
                                                 >
-                                                    <div className="flex items-center gap-3">
-                                                        <div>
-                                                            <div className="flex items-center gap-2">
-                                                                <span className="font-medium">
+                                                    <div className="flex items-center gap-2 md:gap-3 min-w-0">
+                                                        <div className="min-w-0">
+                                                            <div className="flex items-center gap-2 flex-wrap">
+                                                                <span className="font-medium text-sm md:text-base">
                                                                     {fullName}
                                                                 </span>
                                                                 {member.isPrimary && (
                                                                     <Badge className="bg-yellow-100 text-yellow-800 text-xs">
                                                                         <Star className="h-3 w-3 mr-1 fill-yellow-600" />
-                                                                        Primary POC
+                                                                        <span className="hidden sm:inline">Primary </span>POC
                                                                     </Badge>
                                                                 )}
                                                             </div>
-                                                            <div className="text-sm text-muted-foreground">
+                                                            <div className="text-xs md:text-sm text-muted-foreground truncate">
                                                                 @{member.user.telegramHandle}
                                                             </div>
                                                         </div>
@@ -387,7 +388,7 @@ function AddMemberPopover({
             <PopoverTrigger asChild disabled={disabled}>
                 {resolvedTrigger}
             </PopoverTrigger>
-            <PopoverContent className="w-[280px] p-0 translate-x-[4.75rem]" align="end">
+            <PopoverContent className="w-[280px] p-0" align="end">
                 <Command>
                     <CommandInput placeholder="Search users..." />
                     <CommandList>
diff --git a/src/components/users/ManageUsers.tsx b/src/components/users/ManageUsers.tsx
index de30f59..a697d0e 100644
--- a/src/components/users/ManageUsers.tsx
+++ b/src/components/users/ManageUsers.tsx
@@ -32,12 +32,12 @@ export default function ManageUsers({ users, groupIHs, userRole, canManage }: Ma
     }, [router]);
 
     return (
-        <div className="min-h-screen w-full bg-[#0C2C47] p-8">
+        <div className="min-h-screen w-full bg-[#0C2C47] p-4 md:p-8">
             <DashboardNav userRole={userRole} />
             {/* Header */}
-            <div className="mb-8 flex items-center justify-between">
+            <div className="mb-6 md:mb-8 flex items-center justify-between">
                 <div>
-                    <h1 className="mb-2 text-4xl font-bold text-white">Manage Users</h1>
+                    <h1 className="mb-1 md:mb-2 text-2xl md:text-4xl font-bold text-white">Manage Users</h1>
                     <p className="text-white/80">
                         {viewMode === "individual"
                             ? `${users.length} user${users.length !== 1 ? "s" : ""}`
diff --git a/src/components/users/UsersTable.tsx b/src/components/users/UsersTable.tsx
index 07e943a..31a687c 100644
--- a/src/components/users/UsersTable.tsx
+++ b/src/components/users/UsersTable.tsx
@@ -130,141 +130,210 @@ export function UsersTable({ users, groups, onRefresh, canManage = false, actorR
         );
     }
 
+    const DeleteButton = ({ user }: { user: UserWithDetails }) => (
+        <TooltipProvider>
+            <Tooltip>
+                <AlertDialog
+                    open={deleteDialogOpen && deletingId === user.userId}
+                    onOpenChange={(open) => {
+                        if (!isDeleting) {
+                            setDeleteDialogOpen(open);
+                            if (open) setDeletingId(user.userId);
+                        }
+                    }}
+                >
+                    <TooltipTrigger asChild>
+                        <AlertDialogTrigger asChild>
+                            <span tabIndex={canDeleteUser(user) ? -1 : 0}>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8 text-destructive hover:text-destructive disabled:text-muted-foreground"
+                                    disabled={!canDeleteUser(user)}
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </Button>
+                            </span>
+                        </AlertDialogTrigger>
+                    </TooltipTrigger>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>Delete User</AlertDialogTitle>
+                            <AlertDialogDescription>
+                                Are you sure you want to delete{" "}
+                                <strong>{getFullName(user)}</strong>? This action
+                                cannot be undone.
+                            </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+                            <Button
+                                onClick={() => handleDelete(user.userId)}
+                                disabled={isDeleting}
+                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                            >
+                                {isDeleting ? (
+                                    <div className="flex items-center gap-2">
+                                        <Spinner className="size-4" />
+                                        <span>Deleting...</span>
+                                    </div>
+                                ) : (
+                                    "Delete"
+                                )}
+                            </Button>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+                <TooltipContent>
+                    <p>{getDeleteDisabledReason(user)}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+
     return (
-        <div className="rounded-lg border bg-white overflow-hidden">
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Name</TableHead>
-                        <TableHead>Telegram</TableHead>
-                        <TableHead>NUSNET</TableHead>
-                        <TableHead>Role</TableHead>
-                        <TableHead>Groups</TableHead>
-                        {canManage && <TableHead className="text-right">Actions</TableHead>}
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {users.map((user) => (
-                        <TableRow key={user.userId}>
-                            <TableCell className="font-medium">
-                                {getFullName(user)}
-                            </TableCell>
-                            <TableCell>
-                                <span className="text-muted-foreground">@</span>
-                                {user.telegramHandle}
-                            </TableCell>
-                            <TableCell>
-                                {user.nusnetId || (
-                                    <span className="text-muted-foreground">-</span>
+        <>
+            {/* Desktop Table */}
+            <div className="hidden md:block rounded-lg border bg-white overflow-hidden">
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Name</TableHead>
+                            <TableHead>Telegram</TableHead>
+                            <TableHead>NUSNET</TableHead>
+                            <TableHead>Role</TableHead>
+                            <TableHead>Groups</TableHead>
+                            {canManage && <TableHead className="text-right">Actions</TableHead>}
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {users.map((user) => (
+                            <TableRow key={user.userId}>
+                                <TableCell className="font-medium">
+                                    {getFullName(user)}
+                                </TableCell>
+                                <TableCell>
+                                    <span className="text-muted-foreground">@</span>
+                                    {user.telegramHandle}
+                                </TableCell>
+                                <TableCell>
+                                    {user.nusnetId || (
+                                        <span className="text-muted-foreground">-</span>
+                                    )}
+                                </TableCell>
+                                <TableCell>
+                                    <Badge
+                                        variant="secondary"
+                                        className={roleColors[user.role] || ""}
+                                    >
+                                        {user.role}
+                                    </Badge>
+                                </TableCell>
+                                <TableCell>
+                                    {getUserGroups(user).length > 0 ? (
+                                        <div className="flex flex-wrap gap-1">
+                                            {getUserGroups(user).slice(0, 2).map((group) => (
+                                                <Badge
+                                                    key={group.ihId}
+                                                    variant="outline"
+                                                    className="text-xs"
+                                                >
+                                                    {group.ihName}
+                                                </Badge>
+                                            ))}
+                                            {getUserGroups(user).length > 2 && (
+                                                <Badge variant="outline" className="text-xs">
+                                                    +{getUserGroups(user).length - 2}
+                                                </Badge>
+                                            )}
+                                        </div>
+                                    ) : (
+                                        <span className="text-muted-foreground">-</span>
+                                    )}
+                                </TableCell>
+                                {canManage && (
+                                    <TableCell className="text-right">
+                                        <div className="flex justify-end gap-1">
+                                            {canEditUser(user) && (
+                                                <UserFormModal
+                                                    user={user}
+                                                    groups={groups}
+                                                    mode="edit"
+                                                    onSuccess={onRefresh}
+                                                    actorRole={actorRole}
+                                                />
+                                            )}
+                                            <DeleteButton user={user} />
+                                        </div>
+                                    </TableCell>
                                 )}
-                            </TableCell>
-                            <TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+
+            {/* Mobile Card View */}
+            <div className="md:hidden space-y-3">
+                {users.map((user) => {
+                    const userGroups = getUserGroups(user);
+                    return (
+                        <div key={user.userId} className="rounded-lg border bg-white p-4">
+                            {/* Name + Role */}
+                            <div className="flex items-start justify-between gap-2 mb-2">
+                                <div className="min-w-0">
+                                    <div className="font-medium text-sm">{getFullName(user)}</div>
+                                    <div className="text-xs text-muted-foreground">@{user.telegramHandle}</div>
+                                </div>
                                 <Badge
                                     variant="secondary"
-                                    className={roleColors[user.role] || ""}
+                                    className={`${roleColors[user.role] || ""} shrink-0`}
                                 >
                                     {user.role}
                                 </Badge>
-                            </TableCell>
-                            <TableCell>
-                                {getUserGroups(user).length > 0 ? (
-                                    <div className="flex flex-wrap gap-1">
-                                        {getUserGroups(user).slice(0, 2).map((group) => (
-                                            <Badge
-                                                key={group.ihId}
-                                                variant="outline"
-                                                className="text-xs"
-                                            >
-                                                {group.ihName}
-                                            </Badge>
-                                        ))}
-                                        {getUserGroups(user).length > 2 && (
-                                            <Badge variant="outline" className="text-xs">
-                                                +{getUserGroups(user).length - 2}
-                                            </Badge>
-                                        )}
-                                    </div>
-                                ) : (
-                                    <span className="text-muted-foreground">-</span>
-                                )}
-                            </TableCell>
+                            </div>
+
+                            {/* NUSNET */}
+                            {user.nusnetId && (
+                                <div className="text-xs text-muted-foreground mb-2">
+                                    NUSNET: {user.nusnetId}
+                                </div>
+                            )}
+
+                            {/* Groups */}
+                            {userGroups.length > 0 && (
+                                <div className="flex flex-wrap gap-1 mb-2">
+                                    {userGroups.map((group) => (
+                                        <Badge
+                                            key={group.ihId}
+                                            variant="outline"
+                                            className="text-xs"
+                                        >
+                                            {group.ihName}
+                                        </Badge>
+                                    ))}
+                                </div>
+                            )}
+
+                            {/* Actions */}
                             {canManage && (
-                                <TableCell className="text-right">
-                                    <div className="flex justify-end gap-1">
-                                        {canEditUser(user) && (
-                                            <UserFormModal
-                                                user={user}
-                                                groups={groups}
-                                                mode="edit"
-                                                onSuccess={onRefresh}
-                                                actorRole={actorRole}
-                                            />
-                                        )}
-                                        <TooltipProvider>
-                                            <Tooltip>
-                                                <AlertDialog
-                                                    open={deleteDialogOpen && deletingId === user.userId}
-                                                    onOpenChange={(open) => {
-                                                        if (!isDeleting) {
-                                                            setDeleteDialogOpen(open);
-                                                            if (open) setDeletingId(user.userId);
-                                                        }
-                                                    }}
-                                                >
-                                                    <TooltipTrigger asChild>
-                                                        <AlertDialogTrigger asChild>
-                                                            <span tabIndex={canDeleteUser(user) ? -1 : 0}>
-                                                                <Button
-                                                                    variant="ghost"
-                                                                    size="icon"
-                                                                    className="h-8 w-8 text-destructive hover:text-destructive disabled:text-muted-foreground"
-                                                                    disabled={!canDeleteUser(user)}
-                                                                >
-                                                                    <Trash2 className="h-4 w-4" />
-                                                                </Button>
-                                                            </span>
-                                                        </AlertDialogTrigger>
-                                                    </TooltipTrigger>
-                                                    <AlertDialogContent>
-                                                        <AlertDialogHeader>
-                                                            <AlertDialogTitle>Delete User</AlertDialogTitle>
-                                                            <AlertDialogDescription>
-                                                                Are you sure you want to delete{" "}
-                                                                <strong>{getFullName(user)}</strong>? This action
-                                                                cannot be undone.
-                                                            </AlertDialogDescription>
-                                                        </AlertDialogHeader>
-                                                        <AlertDialogFooter>
-                                                            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-                                                            <Button
-                                                                onClick={() => handleDelete(user.userId)}
-                                                                disabled={isDeleting}
-                                                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                                                            >
-                                                                {isDeleting ? (
-                                                                    <div className="flex items-center gap-2">
-                                                                        <Spinner className="size-4" />
-                                                                        <span>Deleting...</span>
-                                                                    </div>
-                                                                ) : (
-                                                                    "Delete"
-                                                                )}
-                                                            </Button>
-                                                        </AlertDialogFooter>
-                                                    </AlertDialogContent>
-                                                </AlertDialog>
-                                                <TooltipContent>
-                                                    <p>{getDeleteDisabledReason(user)}</p>
-                                                </TooltipContent>
-                                            </Tooltip>
-                                        </TooltipProvider>
-                                    </div>
-                                </TableCell>
+                                <div className="flex gap-1 pt-2 border-t mt-2">
+                                    {canEditUser(user) && (
+                                        <UserFormModal
+                                            user={user}
+                                            groups={groups}
+                                            mode="edit"
+                                            onSuccess={onRefresh}
+                                            actorRole={actorRole}
+                                        />
+                                    )}
+                                    <DeleteButton user={user} />
+                                </div>
                             )}
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </>
     );
 }
diff --git a/tsconfig.json b/tsconfig.json
index a29dde2..2c24f6f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -40,4 +40,4 @@
   "exclude": [
     "node_modules"
   ]
-}
\ No newline at end of file
+}