diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 2b90f9b9..0accb5ee 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -562,17 +562,18 @@ export default function Home() {
                   </span>
                 </div>
               )}
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2" data-testid={!isOnline ? "offline-indicator" : undefined}>
                 <div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} />
-                <span className={`text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`}>
+                <span className={`text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`} data-testid={!isOnline ? "offline-sync-indicator" : undefined}>
                   Sync: {isOnline ? 'Active' : 'Offline'}
                 </span>
               </div>
             </div>
             <div className="flex items-center gap-2">
-              <button 
-                onClick={handleSync} 
+              <button
+                onClick={handleSync}
                 disabled={syncing}
+                data-testid="manual-sync-button"
                 className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-white transition-all active:scale-95 disabled:opacity-50"
               >
                 <RefreshCw size={18} className={syncing ? "animate-spin text-primary" : ""} />
@@ -668,13 +669,13 @@ export default function Home() {
 
         {/* Stock Adjustment Overlay */}
         {selectedItem && (
-          <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
+          <div data-testid="stock-adjustment-form" className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
             <div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
               <div className="flex justify-between items-center mb-6">
                 <h3 className="text-xl font-black tracking-tight flex items-center gap-2">
-                  {isEditing ? "Edit Metadata" : selectedItem.name}
+                  <span data-testid="adjustment-item-name">{isEditing ? "Edit Metadata" : selectedItem.name}</span>
                   {!isEditing && (
-                    <span className="text-[11px] bg-slate-800 text-secondary px-2 py-0.5 rounded-md font-black tracking-tight shadow-sm border border-slate-700/50">
+                    <span data-testid="current-quantity" className="text-[11px] bg-slate-800 text-secondary px-2 py-0.5 rounded-md font-black tracking-tight shadow-sm border border-slate-700/50">
                       In Stock: {selectedItem.quantity}
                     </span>
                   )}
@@ -704,6 +705,7 @@ export default function Home() {
                       setSelectedItem(null);
                       setIsEditing(false);
                     }}
+                    data-testid="adjustment-cancel"
                     className="p-2 hover:bg-slate-800 rounded-full"
                   >
                     <X size={20} />
@@ -907,6 +909,7 @@ export default function Home() {
 
               <button
                 onClick={isEditing ? handleUpdateItem : handleAdjustStock}
+                data-testid="adjustment-submit"
                 className={cn(
                   "w-full py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-2xl",
                   isEditing ? "bg-slate-100 text-slate-900" : (