diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index a8df07c..15eeb4c 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -2,9 +2,9 @@ name: CI Testing
 
 on:
   push:
-    branches: [ main ]
+    branches: [ main, UTS ]
   pull_request:
-    branches: [ main ]
+    branches: [ main, UTS ]
 
 jobs:
   test:
diff --git a/package-lock.json b/package-lock.json
index fc98b1e..f69eb56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1904,25 +1904,24 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@protobufjs/codegen": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
-      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.5.tgz",
+      "integrity": "sha512-zgXFLzW3Ap33e6d0Wlj4MGIm6Ce8O89n/apUaGNB/jx+hw+ruWEp7EwGUshdLKVRCxZW12fp9r40E1mQrf/34g==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@protobufjs/eventemitter": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
-      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.1.tgz",
+      "integrity": "sha512-vW1GmwMZNnL+gMRaovlh9yZX74kc+TTU3FObkkurpMaRtBfLP3ldjS9KQWlwZgraRE0+dheEEoAxdzcJQ8eXZg==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@protobufjs/fetch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
-      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.1.tgz",
+      "integrity": "sha512-GpptLrs57adMSuHi3VNj0mAF8dwh36LMaYF6XyJ6JMWlVsc+t42tm1HSEDmOs3A8fC9yyeisgLhsTVQokOZ0zw==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@protobufjs/aspromise": "^1.1.1",
-        "@protobufjs/inquire": "^1.1.0"
+        "@protobufjs/aspromise": "^1.1.1"
       }
     },
     "node_modules/@protobufjs/float": {
@@ -1932,9 +1931,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@protobufjs/inquire": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
-      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.2.tgz",
+      "integrity": "sha512-pa0vFRuws4wkvaXKK1uXZMAwAX4/t8ANaJo45iw/oQHNQ9q5xUzwgFmVJGXiga2BeN+zpX7Vf9vmsiIa2J+MUw==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@protobufjs/path": {
@@ -1950,9 +1949,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@protobufjs/utf8": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
-      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.1.tgz",
+      "integrity": "sha512-oOAWABowe8EAbMyWKM0tYDKi8Yaox52D+HWZhAIJqQXbqe0xI/GV7FhLWqlEKreMkfDjshR5FKgi3mnle0h6Eg==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@rtsao/scc": {
@@ -2502,9 +2501,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5793,9 +5792,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
       "funding": [
         {
           "type": "github",
@@ -6290,9 +6289,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.9",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
-      "integrity": "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==",
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
       "dev": true,
       "funding": [
         {
@@ -6310,7 +6309,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -6369,24 +6368,24 @@
       }
     },
     "node_modules/protobufjs": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
-      "integrity": "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.2.tgz",
+      "integrity": "sha512-N9EiLovGEQOJSPF26Ij7qUGvahfEnq0eeYZ02aigIedkmz1qZSwjnP9SBITHJuF/6MYbIW4HDN8zdYjsjqJKXQ==",
       "hasInstallScript": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "@protobufjs/aspromise": "^1.1.2",
         "@protobufjs/base64": "^1.1.2",
-        "@protobufjs/codegen": "^2.0.4",
-        "@protobufjs/eventemitter": "^1.1.0",
-        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/codegen": "^2.0.5",
+        "@protobufjs/eventemitter": "^1.1.1",
+        "@protobufjs/fetch": "^1.1.1",
         "@protobufjs/float": "^1.0.2",
-        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/inquire": "^1.1.2",
         "@protobufjs/path": "^1.1.2",
         "@protobufjs/pool": "^1.1.0",
-        "@protobufjs/utf8": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.1",
         "@types/node": ">=13.7.0",
-        "long": "^5.0.0"
+        "long": "^5.3.2"
       },
       "engines": {
         "node": ">=12.0.0"
diff --git a/src/components/dashboard/BinCard.tsx b/src/components/dashboard/BinCard.tsx
index 707ebb0..93d7438 100644
--- a/src/components/dashboard/BinCard.tsx
+++ b/src/components/dashboard/BinCard.tsx
@@ -40,21 +40,21 @@ export default function BinCard({ id, gedung, lantai, ruang, level, capacity, st
 
   return (
     <Link href={`/monitoring/${id}`}>
-      <div className="group cursor-pointer rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition-all hover:border-emerald-300 sm:p-6">
+      <div className="group cursor-pointer rounded-2xl border border-gray-100 bg-white p-3 shadow-sm transition-all hover:border-emerald-300 sm:p-5">
         {/* Header: ID & Status Wifi */}
-        <div className="mb-5 flex items-start justify-between gap-3 sm:mb-6">
-          <div>
-            <h3 className="text-lg font-black uppercase leading-none text-gray-800 transition-colors group-hover:text-emerald-600 sm:text-xl">
+        <div className="mb-3 flex flex-wrap items-start justify-between gap-1.5 sm:mb-5 sm:gap-3">
+          <div className="min-w-0 flex-1">
+            <h3 className="text-sm font-black uppercase leading-none text-gray-800 transition-colors group-hover:text-emerald-600 sm:text-lg md:text-xl">
               {id}
             </h3>
-            <div className="flex items-center gap-1 text-gray-400 text-[10px] mt-2 font-medium">
+            <div className="flex items-center gap-1 text-gray-400 text-[9px] mt-1.5 font-medium sm:mt-2 sm:text-[10px]">
               <FiMapPin size={10} className="shrink-0" />
-            <span className="max-w-[180px] truncate sm:max-w-full">{gedung} - {lantai} {ruang ? `• ${ruang}` : ''}</span>
+              <span className="max-w-[150px] truncate sm:max-w-full">{gedung} - {lantai} {ruang ? `• ${ruang}` : ''}</span>
+            </div>
           </div>
-          </div>
-          <div className="flex items-center gap-2">
+          <div className="ml-auto flex items-center gap-1.5 whitespace-nowrap">
             {isOnline ? <FiWifi className="text-green-400" size={16}/> : <FiWifiOff className="text-gray-300" size={16}/>}
-            <span className={`rounded-lg px-2 py-1 text-[10px] font-bold uppercase ${theme.bgLabel} ${theme.text}`}>
+            <span className={`rounded-lg px-1.5 py-0.5 text-[8px] font-bold uppercase ${theme.bgLabel} ${theme.text} sm:px-2 sm:py-1 sm:text-[10px]`}>
               {theme.label}
             </span>
           </div>
@@ -63,27 +63,27 @@ export default function BinCard({ id, gedung, lantai, ruang, level, capacity, st
         {/* Progress Bar Level Isi */}
         <div className="space-y-2">
           <div className="flex justify-between items-end">
-            <span className="text-xs text-gray-400 font-medium tracking-tight">Level Isi</span>
-            <span className={`text-lg font-black sm:text-xl ${theme.text}`}>
+            <span className="text-[11px] text-gray-400 font-medium tracking-tight sm:text-xs">Level Isi</span>
+            <span className={`text-sm font-black sm:text-lg md:text-xl ${theme.text}`}>
               {isOnline ? `${level}%` : '--'}
             </span>
           </div>
           
-          <div className="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
+          <div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden sm:h-2.5">
             <div 
               className={`h-full transition-all duration-1000 ${theme.color}`}
               style={{ width: `${isOnline ? (level > 100 ? 100 : level < 0 ? 0 : level) : 0}%` }}
             />
           </div>
 
-          <div className="flex justify-between text-[9px] font-bold text-gray-400 uppercase mt-1 tracking-widest">
+          <div className="flex justify-between text-[8px] font-bold text-gray-400 uppercase mt-1 tracking-widest sm:text-[9px]">
             <span>0L</span>
             <span>{capacity}L</span>
           </div>
         </div>
 
         {/* Footer Card */}
-        <div className="mt-5 flex items-center justify-between border-t border-gray-50 pt-4 text-[10px] text-gray-400">
+        <div className="mt-3 flex items-center justify-between border-t border-gray-50 pt-2 text-[8px] text-gray-400 sm:mt-5 sm:pt-4 sm:text-[10px]">
           <div className="flex items-center gap-1.5">
             <FiClock size={12} />
             <span>Update: {getLastUpdateLabel(lastUpdate)}</span>
diff --git a/src/components/dashboard/StatCard.tsx b/src/components/dashboard/StatCard.tsx
index 3209294..be2ac78 100644
--- a/src/components/dashboard/StatCard.tsx
+++ b/src/components/dashboard/StatCard.tsx
@@ -7,15 +7,15 @@ interface StatCardProps {
 
 export default function StatCard({ title, value, icon, textColor }: StatCardProps) {
   return (
-    <div className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm flex flex-col justify-between h-32">
+    <div className="bg-white p-3 rounded-2xl border border-gray-100 shadow-sm flex flex-col justify-between h-24 sm:h-32 sm:p-6">
       <div className="flex justify-between items-start">
-        <span className="text-gray-500 font-medium text-sm">{title}</span>
+        <span className="text-gray-500 font-medium text-xs sm:text-sm">{title}</span>
         <div className={textColor}>
           {icon}
         </div>
       </div>
-      <div className="mt-4">
-        <span className={`text-4xl font-bold ${textColor}`} suppressHydrationWarning>
+      <div className="mt-2 sm:mt-4">
+        <span className={`text-2xl font-bold ${textColor} sm:text-4xl`} suppressHydrationWarning>
           {value}
         </span>
       </div>
diff --git a/src/components/layout/PageContainer.tsx b/src/components/layout/PageContainer.tsx
index 6d69d4f..baf034b 100644
--- a/src/components/layout/PageContainer.tsx
+++ b/src/components/layout/PageContainer.tsx
@@ -7,7 +7,7 @@ interface PageContainerProps {
 
 export default function PageContainer({ children, className = '' }: PageContainerProps) {
   return (
-    <div className={`mx-auto min-h-screen w-full max-w-[1440px] space-y-6 px-0 py-0 font-sans text-left sm:space-y-8 ${className}`}>
+    <div className={`mx-auto min-h-screen w-full max-w-[1440px] space-y-3 px-0 py-0 font-sans text-left sm:space-y-6 lg:space-y-8 ${className}`}>
       {children}
     </div>
   );
diff --git a/src/components/layout/PageHeader.tsx b/src/components/layout/PageHeader.tsx
index 8f4e3fd..7fc5766 100644
--- a/src/components/layout/PageHeader.tsx
+++ b/src/components/layout/PageHeader.tsx
@@ -8,12 +8,12 @@ interface PageHeaderProps {
 
 export default function PageHeader({ title, subtitle, className = '' }: PageHeaderProps) {
   return (
-    <div className={`flex flex-col gap-1 ${className}`}>
-      <h1 className="text-2xl lg:text-3xl font-black text-gray-800 tracking-tight">
+    <div className={`flex flex-col gap-0.5 sm:gap-1 ${className}`}>
+      <h1 className="text-xl sm:text-2xl lg:text-3xl font-black text-gray-800 tracking-tight">
         {title}
       </h1>
       {subtitle && (
-        <p className="text-sm text-gray-400">
+        <p className="text-xs text-gray-400 sm:text-sm">
           {subtitle}
         </p>
       )}
diff --git a/src/components/layout/navbar/index.tsx b/src/components/layout/navbar/index.tsx
index b56b8e5..6e9c36b 100644
--- a/src/components/layout/navbar/index.tsx
+++ b/src/components/layout/navbar/index.tsx
@@ -34,27 +34,33 @@ export default function Navbar({ onMenuClick }: NavbarProps) {
   }, []);
 
   return (
-    <header className="flex flex-col gap-4 px-4 py-4 sm:px-6 lg:h-20 lg:flex-row lg:items-center lg:justify-between lg:px-8">
-      <div className="flex items-center justify-between gap-3 lg:hidden">
+    <header className="grid grid-cols-[auto,1fr,auto] items-center gap-2 px-2 py-2 sm:gap-4 sm:px-5 sm:py-4 lg:h-20 lg:flex lg:flex-row lg:items-center lg:justify-between lg:px-8">
+      <div className="col-span-2 flex items-center justify-between gap-1.5 sm:gap-2">
         <button
           onClick={onMenuClick || (() => {})}
-          className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white text-gray-700 shadow-sm transition hover:bg-gray-50"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-700 shadow-sm transition hover:bg-gray-50 sm:h-10 sm:w-10 sm:rounded-xl"
           aria-label="Buka menu"
         >
           <FiMenu />
         </button>
-        <div className="min-w-0 flex-1 text-right">
-              <p className="truncate text-sm font-bold text-gray-800">{userName}</p>
-          <p className="text-xs capitalize text-gray-400">{userRole}</p>
+        <div className="flex items-center gap-4 text-gray-500">
+          <button onClick={handleBellClick} className="relative hover:text-emerald-500 cursor-pointer transition-colors group">
+            <FiBell size={20} />
+            {notificationCount > 0 && (
+              <span className="absolute -top-1 -right-1 bg-red-500 text-white text-[8px] w-4 h-4 flex items-center justify-center rounded-full border-2 border-[#F9FAFB] font-bold group-hover:bg-red-600 transition-colors">
+                {notificationCount > 9 ? "9+" : notificationCount}
+              </span>
+            )}
+          </button>
         </div>
       </div>
 
       {/* Search Bar Group */}
-      <div className="relative w-full lg:max-w-2xl">
+      <div className="col-span-full row-start-2 relative w-full mt-1 sm:mt-0 lg:row-start-auto lg:col-span-auto lg:max-w-2xl">
         {/* 2. Gunakan Conditional Rendering */}
         {!shouldHideSearch ? (
           <>
-            <span className="absolute inset-y-0 left-4 flex items-center text-gray-400">
+            <span className="absolute inset-y-0 left-3 flex items-center text-gray-400 sm:left-4">
               <FiSearch />
             </span>
             <input
@@ -62,40 +68,29 @@ export default function Navbar({ onMenuClick }: NavbarProps) {
               placeholder="Search bins, locations..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full rounded-full border-none bg-white py-2.5 pl-12 pr-4 text-sm shadow-soft outline-none transition-all focus:ring-2 focus:ring-emerald-500"
+              className="w-full rounded-full border-none bg-white py-1.5 pl-9 pr-2 text-[11px] shadow-soft outline-none transition-all focus:ring-2 focus:ring-emerald-500 sm:py-2.5 sm:pl-12 sm:pr-4 sm:text-sm"
             />
           </>
         ) : (
           /* Bisa dikosongkan atau ganti jadi Breadcrumb/Judul Kecil */
-          <div className="h-10"></div>
+          <div className="h-9 sm:h-10"></div>
         )}
       </div>
 
       {/* Sisi Kanan (Bell, Profile, dll) tetap muncul di semua page */}
       {/* Right Side Icons & Profile */}
-      <div className="flex items-center justify-between gap-4 sm:justify-end lg:gap-6">
-        <div className="flex items-center gap-4 text-gray-500">
-          <button onClick={handleBellClick} className="relative hover:text-emerald-500 cursor-pointer transition-colors group">
-            <FiBell size={20} />
-            {notificationCount > 0 && (
-              <span className="absolute -top-1 -right-1 bg-red-500 text-white text-[8px] w-4 h-4 flex items-center justify-center rounded-full border-2 border-[#F9FAFB] font-bold group-hover:bg-red-600 transition-colors">
-                {notificationCount > 9 ? "9+" : notificationCount}
-              </span>
-            )}
-          </button>
-        </div>
-
+      <div className="col-start-3 row-start-1 flex items-center justify-end gap-1.5 sm:gap-4 lg:gap-6">
         {/* User Profile */}
-        <div className="flex items-center gap-3 border-l pl-4 sm:pl-6 border-gray-200">
+        <div className="flex items-center gap-1.5 border-l pl-2 sm:gap-3 sm:pl-6 border-gray-200">
           <button onClick={() => router.push("/profile")} className="flex items-center gap-3 hover:opacity-80 transition">
             <div className="hidden text-right sm:block">
-              <p className="text-sm font-bold text-gray-800">{userName}</p>
-              <p className="text-xs text-gray-400 capitalize">{userRole}</p>
+              <p className="text-xs font-bold text-gray-800 sm:text-sm">{userName}</p>
+              <p className="text-[11px] text-gray-400 capitalize sm:text-xs">{userRole}</p>
             </div>
             {session?.user?.image ? (
-              <img src={session.user.image} alt="avatar" className="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm" />
+              <img src={session.user.image} alt="avatar" className="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm sm:h-10 sm:w-10" />
             ) : (
-              <div className="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center text-emerald-600 font-bold border-2 border-white shadow-sm">
+              <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center text-emerald-600 font-bold text-xs border-2 border-white shadow-sm sm:h-10 sm:w-10 sm:text-sm">
                 {(session?.user?.name || "").split(" ").map((n: string) => n[0]).slice(0,2).join("")}
               </div>
             )}
diff --git a/src/components/layout/sidebar/index.tsx b/src/components/layout/sidebar/index.tsx
index fc68817..afa0a35 100644
--- a/src/components/layout/sidebar/index.tsx
+++ b/src/components/layout/sidebar/index.tsx
@@ -32,38 +32,38 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
 
   return (
     <aside
-      className={`fixed inset-y-0 left-0 z-40 flex h-full w-72 flex-col justify-between border-r border-gray-100 bg-white p-4 shadow-2xl transition-transform duration-300 lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:w-64 lg:shadow-none ${
+      className={`fixed inset-y-0 left-0 z-40 flex h-full w-56 flex-col justify-between border-r border-gray-100 bg-white p-2.5 shadow-2xl transition-transform duration-300 sm:w-72 sm:p-4 lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:w-64 lg:shadow-none ${
         isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
       }`}
     >
       <div className="flex min-h-0 flex-1 flex-col">
-        <div className="mb-8 flex items-center justify-between gap-3 px-2">
+        <div className="mb-4 flex items-center justify-between gap-1.5 px-0.5 sm:mb-8 sm:gap-3 sm:px-2">
           <div className="flex items-center gap-1">
-            <Image src="/img/logotrashware1.png" alt="Trashware Logo" width={50} height={50} className="object-contain" />
+            <Image src="/img/logotrashware1.png" alt="Trashware Logo" width={40} height={40} className="object-contain sm:w-[50px] sm:h-[50px]" />
             <div>
-              <h2 className="text-lg font-bold leading-tight text-gray-800">TrashWare</h2>
-              <p className="text-[10px] font-medium uppercase tracking-widest text-gray-400">IoT Monitoring</p>
+              <h2 className="text-sm font-bold leading-tight text-gray-800 sm:text-lg">TrashWare</h2>
+              <p className="text-[9px] font-medium uppercase tracking-widest text-gray-400 sm:text-[10px]">IoT Monitoring</p>
             </div>
           </div>
 
-          <button onClick={onClose} className="rounded-full p-2 text-gray-400 transition hover:bg-gray-50 hover:text-gray-700 lg:hidden">
+          <button onClick={onClose} className="rounded-full p-1.5 text-gray-400 transition hover:bg-gray-50 hover:text-gray-700 lg:hidden sm:p-2">
             <FiX size={18} />
           </button>
         </div>
 
-        <nav className="space-y-1 overflow-y-auto">
+        <nav className="space-y-0.5 overflow-y-auto sm:space-y-1">
           {menuItems.map((item) => {
             if (!role || !item.role.includes(role)) return null;
 
             return (
               <Link key={item.path} href={item.path} onClick={onClose}>
                 <div
-                  className={`flex items-center gap-3 rounded-xl px-4 py-3 cursor-pointer transition-all ${
+                  className={`flex items-center gap-2 rounded-lg px-2.5 py-2 cursor-pointer transition-all sm:gap-3 sm:rounded-xl sm:px-4 sm:py-3 ${
                     router.pathname === item.path ? "bg-emerald-50 text-emerald-600 font-semibold" : "text-gray-400 hover:bg-gray-50 hover:text-gray-600"
                   }`}
                 >
                   {item.icon}
-                  <span className="text-sm">{item.name}</span>
+                  <span className="text-[13px] sm:text-sm">{item.name}</span>
                 </div>
               </Link>
             );
@@ -71,10 +71,10 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
         </nav>
       </div>
 
-      <div className="space-y-1 border-t border-gray-50 pt-4">
-        <div onClick={handleLogout} className="flex cursor-pointer items-center gap-3 rounded-xl bg-red-500 px-4 py-3 text-white transition hover:bg-red-600">
+      <div className="space-y-1 border-t border-gray-50 pt-2.5 sm:pt-4">
+        <div onClick={handleLogout} className="flex cursor-pointer items-center gap-2.5 rounded-lg bg-red-500 px-2.5 py-2 text-white transition hover:bg-red-600 sm:gap-3 sm:rounded-xl sm:px-4 sm:py-3">
           <FiLogOut />
-          <span className="text-sm">Logout</span>
+          <span className="text-[13px] sm:text-sm">Logout</span>
         </div>
       </div>
     </aside>
diff --git a/src/components/notifications/NotificationItem.tsx b/src/components/notifications/NotificationItem.tsx
index b157c7b..c74ce72 100644
--- a/src/components/notifications/NotificationItem.tsx
+++ b/src/components/notifications/NotificationItem.tsx
@@ -53,19 +53,19 @@ export default function NotificationItem({
   const IconComponent = styles.icon;
 
   return (
-    <div className="flex flex-col gap-4 p-4 bg-white border-b border-gray-100 transition hover:bg-gray-50 sm:flex-row sm:items-start">
+    <div className="flex flex-col gap-3 p-3 bg-white border-b border-gray-100 transition hover:bg-gray-50 sm:flex-row sm:items-start sm:p-4">
       {/* Icon */}
-      <div className={`${styles.bgColor} p-3 rounded-full shrink-0 mt-1`}>
+      <div className={`${styles.bgColor} p-2.5 rounded-full shrink-0 mt-1 sm:p-3`}>
         <IconComponent className={`${styles.iconColor} text-lg`} />
       </div>
 
       {/* Content */}
       <div className="flex-1 min-w-0">
-        <h3 className="font-bold text-gray-900 text-sm">
+        <h3 className="font-bold text-gray-900 text-xs sm:text-sm">
           {notification.gedung} - {notification.lantai} - {notification.ruang}
         </h3>
-        <p className="text-gray-600 text-sm mt-1">{notification.description}</p>
-        <p className="text-gray-400 text-xs mt-2 flex items-center gap-1">
+        <p className="text-gray-600 text-xs mt-1 sm:text-sm">{notification.description}</p>
+        <p className="text-gray-400 text-[11px] mt-1.5 flex items-center gap-1 sm:mt-2 sm:text-xs">
           ⏱ {formatTime(notification.timestamp)}
         </p>
       </div>
@@ -74,12 +74,12 @@ export default function NotificationItem({
       {notification.status === 'baru' ? (
         <button
           onClick={() => onMarkAsRead(notification.id)}
-          className="w-full shrink-0 rounded-lg bg-blue-500 px-4 py-1.5 text-sm font-semibold text-white transition hover:bg-blue-600 sm:w-auto"
+          className="w-full shrink-0 rounded-lg bg-blue-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-blue-600 sm:w-auto sm:text-sm"
         >
           Baru
         </button>
       ) : (
-        <div className="w-full shrink-0 rounded-lg bg-gray-200 px-4 py-1.5 text-sm font-semibold text-gray-600 sm:w-auto">
+        <div className="w-full shrink-0 rounded-lg bg-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 sm:w-auto sm:text-sm">
           Dibaca
         </div>
       )}
diff --git a/src/components/notifications/NotificationList.tsx b/src/components/notifications/NotificationList.tsx
index a1d1ff2..45634fd 100644
--- a/src/components/notifications/NotificationList.tsx
+++ b/src/components/notifications/NotificationList.tsx
@@ -34,9 +34,9 @@ export default function NotificationList({
   ];
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4 sm:space-y-6">
       {/* Bagian Header yang diubah menggunakan PageHeader */}
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
         <PageHeader 
           title="Notifikasi" 
           subtitle={`${counts.baru} notifikasi belum dibaca`} 
@@ -45,7 +45,7 @@ export default function NotificationList({
         <button
           onClick={onMarkAllAsRead}
           disabled={counts.baru === 0}
-          className="inline-flex items-center gap-2 rounded-lg border-2 border-gray-300 px-4 py-2 font-semibold text-gray-700 transition hover:border-gray-400 hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50"
+          className="inline-flex items-center gap-2 rounded-lg border-2 border-gray-300 px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:border-gray-400 hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 sm:px-4 sm:py-2"
         >
           <span>✓</span>
           Tandai Semua Dibaca
@@ -53,12 +53,12 @@ export default function NotificationList({
       </div>
 
       {/* Filter Tabs - Tetap sesuai desain asli Anda */}
-      <div className="flex w-full gap-3 overflow-x-auto rounded-2xl bg-gray-100 p-2 sm:w-fit">
+      <div className="flex w-full gap-2 overflow-x-auto rounded-2xl bg-gray-100 p-1.5 sm:w-fit sm:p-2">
         {filterOptions.map((option) => (
           <button
             key={option.value}
             onClick={() => onFilterChange(option.value)}
-            className={`whitespace-nowrap rounded-xl px-6 py-2.5 text-sm font-semibold transition ${
+            className={`whitespace-nowrap rounded-xl px-4 py-2 text-xs font-semibold transition sm:px-6 sm:py-2.5 sm:text-sm ${
               filter === option.value
                 ? 'bg-white text-gray-900 shadow-sm'
                 : 'bg-transparent text-gray-600 hover:text-gray-900'
@@ -71,11 +71,11 @@ export default function NotificationList({
 
       {/* Notification List Content - Tetap sesuai desain asli Anda */}
       {loading ? (
-        <div className="bg-white rounded-2xl border border-gray-100 p-8 text-center">
+        <div className="bg-white rounded-2xl border border-gray-100 p-6 text-center sm:p-8">
           <p className="text-gray-500">Loading notifikasi...</p>
         </div>
       ) : notifications.length === 0 ? (
-        <div className="bg-white rounded-2xl border border-gray-100 p-8 text-center">
+        <div className="bg-white rounded-2xl border border-gray-100 p-6 text-center sm:p-8">
           <p className="text-gray-500">Tidak ada notifikasi</p>
         </div>
       ) : (
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b13772c..dd3f6b8 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -33,7 +33,7 @@ export default function App({ Component, pageProps }: AppProps) {
             )}
             <div className="flex min-w-0 flex-1 flex-col">
               <Navbar onMenuClick={() => setIsMobileNavOpen(true)} />
-              <main className="min-w-0 px-4 pb-6 sm:px-6 lg:px-8 lg:pb-8">
+              <main className="min-w-0 px-2 pb-3 sm:px-5 sm:pb-6 lg:px-8 lg:pb-8">
                 <Component {...pageProps} />
               </main>
             </div>
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index f9f08b1..76e6d0c 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -45,32 +45,32 @@ export default function ProfilePage() {
   const profileData = profile || session?.user;
 
   return (
-    <div className="p-4 sm:p-8">
-      <div className="mx-auto max-w-2xl rounded-2xl border border-gray-100 bg-white p-5 shadow-sm sm:p-8">
+    <div className="p-3 sm:p-6">
+      <div className="mx-auto max-w-2xl rounded-2xl border border-gray-100 bg-white p-4 shadow-sm sm:p-6">
         {loading ? (
           <div className="flex items-center justify-center py-12">
             <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-emerald-500"></div>
           </div>
         ) : (
           <>
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-6">
               {profileData?.image ? (
-                <img src={profileData.image} alt="avatar" className="w-24 h-24 rounded-full object-cover" />
+                <img src={profileData.image} alt="avatar" className="w-20 h-20 rounded-full object-cover sm:h-24 sm:w-24" />
               ) : (
-                <div className="w-24 h-24 rounded-full bg-emerald-100 flex items-center justify-center text-3xl font-bold text-emerald-600">{(profileData?.name || "").split(" ").map((n:string)=>n[0]).slice(0,2).join("")}</div>
+                <div className="w-20 h-20 rounded-full bg-emerald-100 flex items-center justify-center text-2xl font-bold text-emerald-600 sm:h-24 sm:w-24 sm:text-3xl">{(profileData?.name || "").split(" ").map((n:string)=>n[0]).slice(0,2).join("")}</div>
               )}
               <div>
-                <h2 className="text-2xl font-bold text-gray-800">{profileData?.name}</h2>
-                <p className="text-sm text-gray-500 mt-1">{profileData?.email}</p>
-                {profileData?.phone && <p className="text-sm text-gray-500">Telepon: {profileData.phone}</p>}
+                <h2 className="text-xl font-bold text-gray-800 sm:text-2xl">{profileData?.name}</h2>
+                <p className="text-xs text-gray-500 mt-0.5 sm:mt-1 sm:text-sm">{profileData?.email}</p>
+                {profileData?.phone && <p className="text-xs text-gray-500 sm:text-sm">Telepon: {profileData.phone}</p>}
               </div>
             </div>
 
-            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
-              <button onClick={() => setOpen(true)} className="rounded-xl bg-emerald-600 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-700">
+            <div className="mt-6 flex flex-col gap-2 sm:mt-8 sm:flex-row sm:gap-3">
+              <button onClick={() => setOpen(true)} className="rounded-xl bg-emerald-600 px-4 py-2.5 text-xs font-semibold text-white transition-colors hover:bg-emerald-700 sm:px-6 sm:py-3 sm:text-sm">
                 Edit Profile
               </button>
-              <button onClick={() => setPasswordOpen(true)} className="rounded-xl border border-gray-200 px-6 py-3 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50">
+              <button onClick={() => setPasswordOpen(true)} className="rounded-xl border border-gray-200 px-4 py-2.5 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-50 sm:px-6 sm:py-3 sm:text-sm">
                 Ganti Password
               </button>
             </div>
diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx
index a2a0caa..118f119 100644
--- a/src/views/dashboard/index.tsx
+++ b/src/views/dashboard/index.tsx
@@ -54,7 +54,7 @@ export default function DashboardView() {
       />
 
       {/* 1. StatCard */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-2 sm:gap-4 xl:grid-cols-5">
         <StatCard title="Total Bin" value={stats.total} textColor="text-gray-800" icon={<FiTrash2/>} />
         <StatCard title="Kosong" value={stats.empty} textColor="text-emerald-500" icon={<FiCheckCircle/>} />
         <StatCard title="Hampir Penuh" value={stats.nearlyFull} textColor="text-orange-400" icon={<FiAlertTriangle/>} />
@@ -64,12 +64,12 @@ export default function DashboardView() {
 
       {/* 2. Banner Perhatian */}
       {(stats.full > 0 || stats.nearlyFull > 0) && (
-        <div className="bg-red-50 border border-red-100 p-5 rounded-2xl flex flex-col gap-1 animate-in fade-in slide-in-from-top-4 duration-500">
-          <div className="flex items-center gap-2 text-red-700 font-bold text-sm">
+        <div className="bg-red-50 border border-red-100 p-3 rounded-2xl flex flex-col gap-0.5 animate-in fade-in slide-in-from-top-4 duration-500 sm:p-5 sm:gap-1">
+          <div className="flex items-center gap-2 text-red-700 font-bold text-xs sm:text-sm">
             <FiAlertTriangle />
             <span>Perhatian! {stats.full} tempat sampah penuh, {stats.nearlyFull} hampir penuh</span>
           </div>
-          <p className="text-red-600 text-xs italic">Segera bersihkan untuk menjaga kebersihan kampus.</p>
+          <p className="text-red-600 text-[11px] italic sm:text-xs">Segera bersihkan untuk menjaga kebersihan kampus.</p>
         </div>
       )}
 
@@ -105,24 +105,24 @@ export default function DashboardView() {
       </div> */}
 
       {/* 4. Prioritas Pengambilan - Leaderboard */}
-      <div className="mt-8">
-        <div className="mb-4 flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
-          <h2 className="text-lg font-black text-gray-800">Prioritas Pengambilan</h2>
+      <div className="mt-4 sm:mt-8">
+        <div className="mb-2 flex flex-col gap-0.5 sm:mb-4 sm:flex-row sm:items-end sm:justify-between sm:gap-1">
+          <h2 className="text-base font-black text-gray-800 sm:text-lg">Prioritas Pengambilan</h2>
           <p className="text-xs text-gray-400">Berdasarkan lamanya sampah penuh dan belum diambil</p>
         </div>
 
-        <div className="space-y-3">
+        <div className="grid grid-cols-2 gap-2 sm:gap-4 lg:grid-cols-1">
           {(() => {
             const ranking = getPickupPriorityRanking(bins, historyRecords).slice(0, 10);
 
             if (!ranking || ranking.length === 0) return (
-              <div className="py-6 text-center text-gray-400 italic text-sm">Tidak ada prioritas saat ini</div>
+              <div className="col-span-2 py-6 text-center text-gray-400 italic text-sm lg:col-span-1">Tidak ada prioritas saat ini</div>
             );
 
             return ranking.map((r, idx) => (
-              <div key={r.id} className="flex flex-col gap-4 rounded-xl border border-gray-100 bg-white p-4 shadow-sm transition-all hover:border-red-300 hover:shadow-md sm:flex-row sm:items-center">
+              <div key={r.id} className="flex flex-col gap-2 rounded-xl border border-gray-100 bg-white p-2.5 shadow-sm transition-all hover:border-red-300 hover:shadow-md sm:flex-row sm:items-center sm:gap-4 sm:p-4">
                 {/* Rank Badge */}
-                <div className={`flex items-center justify-center w-12 h-12 rounded-full font-bold text-white text-lg flex-shrink-0 ${
+                <div className={`flex items-center justify-center w-8 h-8 rounded-full font-bold text-white text-sm flex-shrink-0 sm:h-12 sm:w-12 sm:text-lg ${
                   idx === 0 ? 'bg-red-600' :
                   idx === 1 ? 'bg-orange-500' :
                   idx === 2 ? 'bg-amber-500' :
@@ -137,7 +137,7 @@ export default function DashboardView() {
                   <div className="text-xs text-gray-500 mt-1">ID: {r.binId}</div>
                   
                   {/* Capacity Bar */}
-                  <div className="mt-2">
+                  <div className="mt-1.5 sm:mt-2">
                     <div className="flex justify-between items-center mb-1">
                       <span className="text-xs font-medium text-gray-500">Level Isi</span>
                       <span className="text-xs font-bold text-red-500">{r.capacity}%</span>
@@ -167,7 +167,7 @@ export default function DashboardView() {
 
                 {/* Priority Label */}
                 <div className="flex-shrink-0 self-start sm:self-auto">
-                  <div className={`text-xs font-bold px-3 py-2 rounded-lg text-center ${
+                  <div className={`text-xs font-bold px-3 py-1.5 rounded-lg text-center sm:py-2 ${
                     r.priorityLabel === 'High' ? 'bg-red-100 text-red-600' :
                     r.priorityLabel === 'Medium' ? 'bg-orange-100 text-orange-600' :
                     'bg-yellow-100 text-yellow-600'
diff --git a/src/views/history/index.tsx b/src/views/history/index.tsx
index 94305e5..6d90110 100644
--- a/src/views/history/index.tsx
+++ b/src/views/history/index.tsx
@@ -55,14 +55,14 @@ export default function HistoryView() {
   if (loading) return <div className="py-8 text-center text-gray-500">Memuat log riwayat sampah...</div>;
 
   return (
-    <div className="space-y-6 py-2">
-      <h1 className="text-2xl font-bold text-gray-800">Analitik Bin</h1>
+    <div className="space-y-3 py-1 sm:space-y-6 sm:py-2">
+      <h1 className="text-xl font-bold text-gray-800 sm:text-2xl">Analitik Bin</h1>
 
-      <section className="flex flex-col gap-4 lg:flex-row lg:flex-wrap">
+      <section className="flex flex-col gap-2 sm:gap-4 lg:flex-row lg:flex-wrap">
         <select
           value={selectedLocation}
           onChange={(e) => setSelectedLocation(e.target.value)}
-          className="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700 outline-none transition focus:border-emerald-400 lg:min-w-[280px]"
+          className="w-full rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-[11px] text-gray-700 outline-none transition focus:border-emerald-400 sm:py-2.5 sm:text-sm lg:min-w-[280px]"
         >
           {LOCATION_OPTIONS.map((loc) => (
             <option key={loc} value={loc}>
@@ -71,76 +71,76 @@ export default function HistoryView() {
           ))}
         </select>
 
-        <div className="flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs text-gray-600">
+        <div className="flex flex-wrap items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 text-[11px] text-gray-600 sm:text-xs">
           <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="bg-transparent outline-none" />
           <span>sampai</span>
           <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="bg-transparent outline-none" />
         </div>
       </section>
 
-      <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
-        <article className="rounded-2xl border border-gray-200 bg-white p-7">
-          <div className="mb-8 flex items-center justify-between">
+      <section className="grid grid-cols-2 gap-2 sm:gap-4 xl:grid-cols-3">
+        <article className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
+          <div className="mb-4 flex items-center justify-between sm:mb-8">
             <p className="font-semibold text-gray-700">Rata-rata Kapasitas</p>
             <FiBarChart2 className="text-emerald-500" size={28} />
           </div>
-          <p className="text-5xl font-bold text-gray-900">{chartData.length > 0 ? chartData[chartData.length - 1].avg : 0}%</p>
-          <p className="mt-2 text-sm text-gray-600">Berdasarkan data filter terakhir</p>
+          <p className="text-3xl font-bold text-gray-900 sm:text-5xl">{chartData.length > 0 ? chartData[chartData.length - 1].avg : 0}%</p>
+          <p className="mt-1.5 text-xs text-gray-600 sm:mt-2 sm:text-sm">Berdasarkan data filter terakhir</p>
         </article>
 
-        <article className="rounded-2xl border border-gray-200 bg-white p-7">
-          <div className="mb-8 flex items-center justify-between">
+        <article className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
+          <div className="mb-4 flex items-center justify-between sm:mb-8">
             <p className="font-semibold text-gray-700">Total Aktivitas</p>
             <FiList className="text-blue-500" size={28} />
           </div>
-          <p className="text-5xl font-bold text-gray-900">{filteredRecords.length}</p>
-          <p className="mt-2 text-sm text-gray-600">Jumlah log yang tercatat</p>
+          <p className="text-3xl font-bold text-gray-900 sm:text-5xl">{filteredRecords.length}</p>
+          <p className="mt-1.5 text-xs text-gray-600 sm:mt-2 sm:text-sm">Jumlah log yang tercatat</p>
         </article>
 
-        <article className="rounded-2xl border border-gray-200 bg-white p-7">
-          <div className="mb-8 flex items-center justify-between">
+        <article className="col-span-2 rounded-2xl border border-gray-200 bg-white p-4 xl:col-span-1 sm:p-7">
+          <div className="mb-4 flex items-center justify-between sm:mb-8">
             <p className="font-semibold text-gray-700">Log Terbaru</p>
             <FiMapPin className="text-amber-500" size={28} />
           </div>
-          <p className="text-2xl font-bold text-gray-900">{latestRecord ? latestRecord.location : '-'}</p>
-          <p className="mt-2 text-sm text-gray-600">{latestRecord ? `BIN: ${shortenId(latestRecord.binId)}` : 'BIN: -'}</p>
+          <p className="text-xl font-bold text-gray-900 sm:text-2xl">{latestRecord ? latestRecord.location : '-'}</p>
+          <p className="mt-1.5 text-xs text-gray-600 sm:mt-2 sm:text-sm">{latestRecord ? `BIN: ${shortenId(latestRecord.binId)}` : 'BIN: -'}</p>
         </article>
       </section>
 
-      <section className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <article className="rounded-2xl border border-gray-200 bg-white p-7">
+      <section className="grid grid-cols-1 gap-2 sm:gap-4 lg:grid-cols-2">
+        <article className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
           <p className="font-semibold text-gray-700">Jam Sibuk</p>
-          <p className="mt-3 text-3xl font-bold text-gray-900">{peakHour ? peakHour.label : '-'}</p>
-          <p className="mt-2 text-sm text-gray-600">{peakHour ? `${peakHour.count} log pada jam ini` : 'Belum ada data log'}</p>
+          <p className="mt-2 text-2xl font-bold text-gray-900 sm:mt-3 sm:text-3xl">{peakHour ? peakHour.label : '-'}</p>
+          <p className="mt-1.5 text-xs text-gray-600 sm:mt-2 sm:text-sm">{peakHour ? `${peakHour.count} log pada jam ini` : 'Belum ada data log'}</p>
         </article>
 
-        <article className="rounded-2xl border border-gray-200 bg-white p-7">
+        <article className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
           <p className="font-semibold text-gray-700">Top Lokasi Sering Penuh</p>
           {topFullLocations.length > 0 ? (
             <div className="mt-4 space-y-3">
               {topFullLocations.map((item, index) => (
-                <div key={item.location} className="flex items-center justify-between rounded-xl bg-amber-50 px-4 py-3">
-                  <p className="text-sm font-medium text-gray-800">
+                <div key={item.location} className="flex items-center justify-between rounded-xl bg-amber-50 px-3 py-2.5 sm:px-4 sm:py-3">
+                  <p className="text-xs font-medium text-gray-800 sm:text-sm">
                     {index + 1}. {item.location}
                   </p>
-                  <p className="text-sm font-bold text-amber-700">{item.count}x</p>
+                  <p className="text-xs font-bold text-amber-700 sm:text-sm">{item.count}x</p>
                 </div>
               ))}
             </div>
           ) : (
-            <p className="mt-3 text-sm text-gray-600">Belum ada lokasi dengan kapasitas {FULL_THRESHOLD}% ke atas.</p>
+            <p className="mt-2 text-xs text-gray-600 sm:mt-3 sm:text-sm">Belum ada lokasi dengan kapasitas {FULL_THRESHOLD}% ke atas.</p>
           )}
         </article>
       </section>
 
-      <section className="rounded-2xl border border-gray-200 bg-white p-7">
-        <h2 className="mb-6 text-2xl font-bold text-gray-800">Tren Kapasitas Sampah</h2>
+      <section className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
+        <h2 className="mb-3 text-lg font-bold text-gray-800 sm:mb-6 sm:text-2xl">Tren Kapasitas Sampah</h2>
         <TrendChart chartData={chartData} chartPoints={chartPoints} />
       </section>
 
-      <section className="rounded-2xl border border-emerald-100 bg-emerald-50 p-6 text-emerald-800">
-        <h3 className="mb-2 text-lg font-bold">Tentang Dashboard Analitik</h3>
-        <p className="text-sm leading-relaxed">
+      <section className="rounded-2xl border border-emerald-100 bg-emerald-50 p-3 text-emerald-800 sm:p-6">
+        <h3 className="mb-2 text-base font-bold sm:text-lg">Tentang Dashboard Analitik</h3>
+        <p className="text-xs leading-relaxed sm:text-sm">
           Dashboard ini menampilkan analisis real-time pengisian sampah di seluruh lokasi. Gunakan filter <strong>lokasi</strong> dan <strong>tanggal</strong> untuk melihat metrik spesifik. 
           Pantau <strong>Jam Sibuk</strong> untuk mengetahui periode puncak pengumpulan, dan <strong>Top Lokasi Sering Penuh</strong> untuk prioritas pengangkutan. Grafik tren membantu merencanakan jadwal maintenance yang lebih efisien.
         </p>
diff --git a/src/views/manage/index.tsx b/src/views/manage/index.tsx
index fd71a92..66ebcf8 100644
--- a/src/views/manage/index.tsx
+++ b/src/views/manage/index.tsx
@@ -49,14 +49,14 @@ export default function ManageView() {
   return (
     <PageContainer>
       {/* Header Section menggunakan PageHeader */}
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-2.5 md:flex-row md:items-center md:justify-between sm:gap-3">
         <PageHeader 
           title="Manage Bin" 
           subtitle="Monitoring infrastruktur dan status perangkat real-time" 
         />
         <button 
           onClick={() => { setSelectedBin(null); setModalOpen(true); }} 
-          className="flex items-center gap-2 bg-[#00D26A] text-white px-5 py-2.5 rounded-xl font-bold shadow-lg shadow-emerald-50 hover:bg-[#00b95d] transition-all active:scale-95"
+          className="flex w-full items-center justify-center gap-2 bg-[#00D26A] text-white px-4 py-2 rounded-xl text-sm font-bold shadow-lg shadow-emerald-50 hover:bg-[#00b95d] transition-all active:scale-95 sm:w-auto sm:px-5 sm:py-2.5"
         >
           <FiPlus strokeWidth={3} /> Tambah Bin
         </button>
@@ -130,7 +130,7 @@ export default function ManageView() {
         </div>
       </div>
 
-      <div className="space-y-4 sm:hidden">
+      <div className="space-y-2 sm:hidden">
         {filteredBins.length === 0 ? (
           <div className="rounded-3xl border border-dashed border-gray-200 bg-white p-8 text-center text-gray-400 italic">
             Data bin tidak ditemukan.
@@ -141,33 +141,33 @@ export default function ManageView() {
             const isOnline = bin.status === 'on';
 
             return (
-              <div key={bin.firestoreId} className="rounded-3xl border border-gray-100 bg-white p-4 shadow-sm">
-                <div className="flex items-start justify-between gap-3">
+              <div key={bin.firestoreId} className="rounded-2xl border border-gray-100 bg-white p-2.5 shadow-sm sm:rounded-3xl sm:p-3">
+                <div className="flex items-start justify-between gap-2.5">
                   <div>
                     <p className="text-xs font-bold uppercase tracking-wider text-emerald-600">{bin.id}</p>
-                    <h3 className="mt-1 text-base font-bold text-gray-800">{bin.gedung}</h3>
-                    <p className="text-sm text-gray-500">{bin.lantai} · {bin.ruang}</p>
+                    <h3 className="mt-1 text-sm font-bold text-gray-800 sm:text-base">{bin.gedung}</h3>
+                    <p className="text-xs text-gray-500 sm:text-sm">{bin.lantai} · {bin.ruang}</p>
                   </div>
-                  <span className={`rounded-lg px-2.5 py-1 text-[10px] font-black uppercase tracking-widest border ${
+                  <span className={`rounded-lg px-2 py-0.5 text-[9px] font-black uppercase tracking-widest border sm:px-2.5 sm:py-1 sm:text-[10px] ${
                     isOnline ? 'border-emerald-200 text-emerald-500 bg-emerald-50' : 'border-red-200 text-red-500 bg-red-50'
                   }`}>
                     {bin.status || 'OFF'}
                   </span>
                 </div>
 
-                <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
-                  <div className="rounded-2xl bg-gray-50 p-3">
-                    <p className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Kapasitas</p>
+                <div className="mt-3 grid grid-cols-2 gap-1.5 text-sm sm:gap-2">
+                  <div className="rounded-xl bg-gray-50 p-2 sm:rounded-2xl sm:p-2.5">
+                    <p className="text-[9px] font-bold uppercase tracking-widest text-gray-400">Kapasitas</p>
                     <p className="mt-1 font-bold text-gray-700">{bin.capacity}L</p>
                   </div>
-                  <div className="rounded-2xl bg-gray-50 p-3">
-                    <p className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Level</p>
+                  <div className="rounded-xl bg-gray-50 p-2 sm:rounded-2xl sm:p-2.5">
+                    <p className="text-[9px] font-bold uppercase tracking-widest text-gray-400">Level</p>
                     <p className="mt-1 font-bold text-gray-700">{level}%</p>
                   </div>
                 </div>
 
-                <div className="mt-3 flex items-center justify-between gap-3">
-                  <span className={`rounded-xl px-3 py-1.5 text-[11px] font-bold text-white ${
+                <div className="mt-2 flex items-center justify-between gap-2 sm:mt-3 sm:gap-3">
+                  <span className={`rounded-xl px-2.5 py-1 text-[10px] font-bold text-white ${
                     level >= 90 ? 'bg-[#FF3B30]' : 
                     level >= 70 ? 'bg-[#FFCC00]' : 
                     level > 0 ? 'bg-[#00D26A]' : 'bg-gray-400'
@@ -176,10 +176,10 @@ export default function ManageView() {
                   </span>
 
                   <div className="flex gap-1">
-                    <button onClick={() => { setSelectedBin(bin); setModalOpen(true); }} className="rounded-xl p-2 text-gray-400 transition-all hover:text-blue-500">
+                    <button onClick={() => { setSelectedBin(bin); setModalOpen(true); }} className="rounded-xl p-1.5 text-gray-400 transition-all hover:text-blue-500">
                       <FiEdit2 size={16} />
                     </button>
-                    <button onClick={() => handleDelete(bin.firestoreId!)} className="rounded-xl p-2 text-gray-400 transition-all hover:text-red-500">
+                    <button onClick={() => handleDelete(bin.firestoreId!)} className="rounded-xl p-1.5 text-gray-400 transition-all hover:text-red-500">
                       <FiTrash2 size={16} />
                     </button>
                   </div>
diff --git a/src/views/monitoring/ActionView.tsx b/src/views/monitoring/ActionView.tsx
index 8b152d9..f47ce93 100644
--- a/src/views/monitoring/ActionView.tsx
+++ b/src/views/monitoring/ActionView.tsx
@@ -137,7 +137,7 @@ export default function ActionView({ id }: { id: string }) {
     <PageContainer>
       <button 
         onClick={() => router.back()} 
-        className="flex items-center gap-2 text-gray-500 mb-6 font-bold text-sm hover:text-gray-900 transition-colors"
+        className="flex items-center gap-2 text-gray-500 mb-3 font-bold text-xs hover:text-gray-900 transition-colors sm:mb-6 sm:text-sm"
       >
         <FiArrowLeft /> Kembali
       </button>
@@ -147,63 +147,63 @@ export default function ActionView({ id }: { id: string }) {
         subtitle="Verifikasi dilakukan otomatis melalui pencocokan data sensor IoT Trashware." 
       />
 
-      <div className="mx-auto mt-8 max-w-xl overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-2xl sm:rounded-[40px]">
-        <div className="space-y-6 p-5 sm:space-y-8 sm:p-10">
+      <div className="mx-auto mt-4 max-w-xl overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-2xl sm:mt-8 sm:rounded-[40px]">
+        <div className="space-y-3 p-3.5 sm:space-y-6 sm:p-8 lg:p-10">
           
           {/* Section: Petugas */}
-          <div className="flex items-center gap-4 p-5 bg-emerald-50 rounded-[24px] border border-emerald-100">
-            <div className="w-14 h-14 bg-emerald-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-200">
+          <div className="flex items-center gap-2.5 p-3 bg-emerald-50 rounded-2xl border border-emerald-100 sm:gap-4 sm:p-5 sm:rounded-[24px]">
+            <div className="w-10 h-10 bg-emerald-500 text-white rounded-xl flex items-center justify-center shadow-lg shadow-emerald-200 sm:h-14 sm:w-14 sm:rounded-2xl">
               <FiUser size={28} />
             </div>
             <div>
-              <p className="text-[10px] font-black text-emerald-600 uppercase tracking-[0.2em]">Petugas Penjemputan</p>
-              <p className="font-extrabold text-gray-800 text-lg">{session?.user?.name || 'Loading...'}</p>
+              <p className="text-[9px] font-black text-emerald-600 uppercase tracking-[0.2em] sm:text-[10px]">Petugas Penjemputan</p>
+              <p className="font-extrabold text-gray-800 text-base sm:text-lg">{session?.user?.name || 'Loading...'}</p>
             </div>
           </div>
 
           {/* Section: Level Comparison */}
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6">
-            <div className="p-6 bg-gray-50 rounded-[24px] border border-gray-100">
-              <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2 flex items-center gap-2">
+          <div className="grid grid-cols-2 gap-2 sm:gap-6">
+            <div className="p-3 bg-gray-50 rounded-2xl border border-gray-100 sm:p-6 sm:rounded-[24px]">
+              <p className="text-[9px] font-bold text-gray-400 uppercase tracking-widest mb-2 flex items-center gap-2 sm:text-[10px]">
                 <FiBarChart2 /> Level Awal
               </p>
-              <p className="font-black text-2xl text-gray-400 tracking-tighter">
+              <p className="font-black text-lg text-gray-400 tracking-tighter sm:text-2xl">
                 {initialLevel !== null ? `${initialLevel}%` : '--%'}
               </p>
             </div>
-            <div className="p-6 bg-emerald-50/30 rounded-[24px] border border-emerald-100/50">
-              <p className="text-[10px] font-bold text-emerald-600 uppercase tracking-widest mb-2 flex items-center gap-2">
+            <div className="p-3 bg-emerald-50/30 rounded-2xl border border-emerald-100/50 sm:p-6 sm:rounded-[24px]">
+              <p className="text-[9px] font-bold text-emerald-600 uppercase tracking-widest mb-2 flex items-center gap-2 sm:text-[10px]">
                 <FiBarChart2 /> Real-time
               </p>
-              <p className={`font-black text-2xl tracking-tighter ${binData && binData.level < 20 ? 'text-emerald-500' : 'text-orange-500'}`}>
+              <p className={`font-black text-lg tracking-tighter sm:text-2xl ${binData && binData.level < 20 ? 'text-emerald-500' : 'text-orange-500'}`}>
                 {binData ? `${binData.level}%` : '--%'}
               </p>
             </div>
           </div>
 
           {/* Section: Lokasi */}
-          <div className="rounded-[24px] border-2 border-dashed border-gray-100 bg-white p-5 sm:p-6">
+          <div className="rounded-2xl border-2 border-dashed border-gray-100 bg-white p-3 sm:p-6 sm:rounded-[24px]">
             <div className="flex items-center gap-2 mb-2 text-gray-400">
               <FiMapPin />
-              <p className="text-[10px] font-bold uppercase tracking-widest">Titik Unit</p>
+              <p className="text-[9px] font-bold uppercase tracking-widest sm:text-[10px]">Titik Unit</p>
             </div>
             <p className="font-bold text-gray-700">
               {binData ? `${binData.gedung}, ${binData.lantai}` : 'Memuat lokasi...'}
             </p>
-            <p className="text-sm text-gray-400 font-medium italic">
+            <p className="text-xs text-gray-400 font-medium italic sm:text-sm">
               {binData?.ruang || 'Mencari detail ruang...'}
             </p>
           </div>
 
           {/* Feedback Messages */}
           {message && (
-            <div className={`p-5 rounded-2xl flex items-start gap-4 animate-in fade-in zoom-in duration-300 ${
+            <div className={`p-4 rounded-2xl flex items-start gap-3 animate-in fade-in zoom-in duration-300 sm:p-5 sm:gap-4 ${
               message.type === 'success' 
                 ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' 
                 : 'bg-red-50 text-red-700 border border-red-100'
             }`}>
               {message.type === 'success' ? <FiCheckCircle size={20} className="mt-1 shrink-0" /> : <FiAlertCircle size={20} className="mt-1 shrink-0" />}
-              <p className="text-sm font-black leading-tight">{message.text}</p>
+              <p className="text-xs font-black leading-tight sm:text-sm">{message.text}</p>
             </div>
           )}
 
@@ -211,7 +211,7 @@ export default function ActionView({ id }: { id: string }) {
           <button
             onClick={handleApproveAction}
             disabled={isButtonDisabled}
-            className={`w-full py-6 rounded-[28px] font-black text-xl flex items-center justify-center gap-3 transition-all active:scale-95 shadow-xl
+            className={`w-full py-3 rounded-2xl font-black text-base flex items-center justify-center gap-2.5 transition-all active:scale-95 shadow-xl sm:py-6 sm:text-xl sm:rounded-[28px] sm:gap-3
               ${isButtonDisabled && !message
                 ? 'bg-gray-100 text-gray-300 cursor-not-allowed shadow-none' 
                 : 'bg-gray-900 hover:bg-black text-white shadow-gray-200'}`}
@@ -225,7 +225,7 @@ export default function ActionView({ id }: { id: string }) {
             )}
           </button>
 
-          <p className="px-2 text-center text-[10px] font-bold uppercase tracking-tight text-gray-400 sm:px-6">
+          <p className="px-2 text-center text-[9px] font-bold uppercase tracking-tight text-gray-400 sm:px-6 sm:text-[10px]">
             Verifikasi ini akan mencatat log aktivitas petugas dan memperbarui status pada dashboard admin.
           </p>
         </div>
diff --git a/src/views/monitoring/index.tsx b/src/views/monitoring/index.tsx
index 95f1dee..30e5d0d 100644
--- a/src/views/monitoring/index.tsx
+++ b/src/views/monitoring/index.tsx
@@ -63,16 +63,16 @@ export default function MonitoringView() {
       />
 
       {/* Filter Bar */}
-      <div className="flex flex-col gap-4 bg-white p-4 rounded-2xl border border-gray-100 shadow-sm md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-2 bg-white p-2.5 rounded-2xl border border-gray-100 shadow-sm md:flex-row md:items-center md:justify-between sm:gap-3 sm:p-4">
         <div className="flex items-center gap-2 text-gray-500">
           <FiFilter className="text-emerald-500" />
-          <span className="text-sm font-medium">Filter Tampilan:</span>
+          <span className="text-xs font-medium sm:text-sm">Filter Tampilan:</span>
         </div>
 
         <select 
           value={statusFilter}
           onChange={(e) => setStatusFilter(e.target.value)}
-          className="w-full cursor-pointer rounded-xl border-none bg-gray-50 p-2.5 text-sm font-bold text-gray-700 outline-none transition-all focus:ring-2 focus:ring-emerald-500 md:w-56"
+          className="w-full cursor-pointer rounded-xl border-none bg-gray-50 p-2 text-[11px] font-bold text-gray-700 outline-none transition-all focus:ring-2 focus:ring-emerald-500 sm:p-2.5 sm:text-sm md:w-56"
         >
           <option>Semua Status</option>
           <option>Penuh</option>
@@ -84,16 +84,16 @@ export default function MonitoringView() {
       </div>
 
       {/* Stats Info */}
-      <div className="flex items-center gap-2 px-2">
+      <div className="flex items-center gap-2 px-1">
         <FiInfo className="text-gray-400" size={14} />
-        <p className="text-[11px] text-gray-400 font-bold uppercase tracking-wider">
+        <p className="text-[10px] text-gray-400 font-bold uppercase tracking-wider sm:text-[11px]">
           Menampilkan {filteredBins.length} dari {bins.length} tempat sampah
         </p>
       </div>
 
       {/* Grid Monitoring */}
       {filteredBins.length > 0 ? (
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-2 sm:gap-4 xl:grid-cols-3">
           {filteredBins.map((bin) => (
             <BinCard
               key={bin.firestoreId}
@@ -108,7 +108,7 @@ export default function MonitoringView() {
           ))}
         </div>
       ) : (
-        <div className="bg-white rounded-3xl p-20 text-center border border-dashed border-gray-200">
+        <div className="bg-white rounded-3xl p-6 text-center border border-dashed border-gray-200 sm:p-20">
           <p className="text-gray-400 italic">Tidak ada tempat sampah yang cocok dengan filter ini.</p>
         </div>
       )}