diff --git a/frontend/components/ScannerSection.tsx b/frontend/components/ScannerSection.tsx
new file mode 100644
index 00000000..1f9e2e19
--- /dev/null
+++ b/frontend/components/ScannerSection.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { X, ArrowDownCircle, ArrowUpCircle, Trash2 } from 'lucide-react';
+import Scanner from '@/components/Scanner';
+import NewItemDialog from '@/components/NewItemDialog';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+interface ScannerSectionProps {
+  mode: string;
+  onModeChange: (mode: string) => void;
+  showScanner: boolean;
+  onShowScanner: (show: boolean) => void;
+  onScanSuccess: (result: any) => void;
+  onOCRMatch: (result: any) => void;
+  onAddItemClick: () => void;
+}
+
+export default function ScannerSection({
+  mode,
+  onModeChange,
+  showScanner,
+  onShowScanner,
+  onScanSuccess,
+  onOCRMatch,
+  onAddItemClick,
+}: ScannerSectionProps) {
+  return (
+    <div className="w-full px-1 space-y-6">
+      {/* Mode Switcher */}
+      <div className="flex p-1.5 bg-surface rounded-2xl shadow-inner w-full gap-1">
+        {[
+          { id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
+          { id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
+          { id: 'TRASH', label: 'Trash', icon: Trash2 }
+        ].map((m) => (
+          <button
+            key={m.id}
+            data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined}
+            onClick={() => onModeChange(m.id)}
+            className={cn(
+              "flex-1 py-3.5 rounded-xl text-xs sm:text-sm font-black transition-all flex items-center justify-center gap-3",
+              mode === m.id ? "bg-slate-800 text-primary shadow-lg ring-1 ring-primary/20" : "text-muted hover:text-secondary"
+            )}
+          >
+            <m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} />
+            <span className="truncate">{m.label}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Scanner Section */}
+      <section className="glass-card rounded-3xl p-6">
+        {showScanner ? (
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <h2 className="text-lg font-semibold">scanning...</h2>
+              <button
+                onClick={() => onShowScanner(false)}
+                className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-rose-500 transition-all active:scale-95"
+              >
+                <X size={18} />
+              </button>
+            </div>
+            <Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
+          </div>
+        ) : (
+          <NewItemDialog
+            onScannerClick={() => onShowScanner(true)}
+            onAddItemClick={onAddItemClick}
+          />
+        )}
+      </section>
+    </div>
+  );
+}