diff --git a/FrontEnd/pages/RecipePage.tsx b/FrontEnd/pages/RecipePage.tsx
index 9f4765c..c340bd7 100644
--- a/FrontEnd/pages/RecipePage.tsx
+++ b/FrontEnd/pages/RecipePage.tsx
@@ -69,6 +69,11 @@ export const RecipePage: React.FC = () => {
             const recipeData = JSON.parse(recipeStr);
             setEditedRecipe(recipeData);
             setHasChanges(false);
+
+            // Update recipes list with loaded data for preview
+            setRecipes(prev => prev.map(recipe =>
+                recipe.name === r.name ? { ...recipe, ...recipeData } : recipe
+            ));
         } catch (e) {
             console.error("Failed to load recipe details", e);
             alert("Failed to load recipe details");
@@ -195,8 +200,47 @@ export const RecipePage: React.FC = () => {
                                             : 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/20'}
                                     `}
                                 >
-                                    <div className="font-bold text-sm mb-1">{r.name}</div>
-                                    <div className="text-[10px] font-mono opacity-60 flex items-center gap-2">
+                                    <div className="font-bold text-sm mb-2">{r.name}</div>
+
+                                    {/* Motion Model */}
+                                    {r.Motion && (
+                                        <div className="text-[10px] font-mono opacity-70 mb-1">
+                                            <span className="text-slate-500">Motion:</span> <span className="text-neon-green">{r.Motion}</span>
+                                        </div>
+                                    )}
+
+                                    {/* Barcode Types */}
+                                    {(r.BCD_1D !== undefined || r.BCD_QR !== undefined || r.BCD_DM !== undefined) && (
+                                        <div className="flex gap-1 mb-1">
+                                            {r.BCD_1D && (
+                                                <span className="text-[9px] px-1.5 py-0.5 bg-neon-green/20 text-neon-green rounded border border-neon-green/30">1D</span>
+                                            )}
+                                            {r.BCD_QR && (
+                                                <span className="text-[9px] px-1.5 py-0.5 bg-neon-blue/20 text-neon-blue rounded border border-neon-blue/30">QR</span>
+                                            )}
+                                            {r.BCD_DM && (
+                                                <span className="text-[9px] px-1.5 py-0.5 bg-neon-yellow/20 text-neon-yellow rounded border border-neon-yellow/30">DM</span>
+                                            )}
+                                        </div>
+                                    )}
+
+                                    {/* Feature Flags */}
+                                    {(r.DisableCamera || r.DisablePrinter || (r.AutoOutConveyor && r.AutoOutConveyor > 0)) && (
+                                        <div className="flex flex-wrap gap-1 mb-1">
+                                            {r.DisableCamera && (
+                                                <span className="text-[8px] px-1 py-0.5 bg-red-500/20 text-red-400 rounded">No Cam</span>
+                                            )}
+                                            {r.DisablePrinter && (
+                                                <span className="text-[8px] px-1 py-0.5 bg-red-500/20 text-red-400 rounded">No Print</span>
+                                            )}
+                                            {r.AutoOutConveyor && r.AutoOutConveyor > 0 && (
+                                                <span className="text-[8px] px-1 py-0.5 bg-purple-500/20 text-purple-400 rounded">Auto Out</span>
+                                            )}
+                                        </div>
+                                    )}
+
+                                    {/* Last Modified */}
+                                    <div className="text-[10px] font-mono opacity-50 flex items-center gap-1 mt-2 pt-2 border-t border-white/5">
                                         <Calendar className="w-3 h-3" /> {r.lastModified}
                                     </div>
                                 </div>
diff --git a/FrontEnd/types.ts b/FrontEnd/types.ts
index f82257a..9209b2c 100644
--- a/FrontEnd/types.ts
+++ b/FrontEnd/types.ts
@@ -19,6 +19,14 @@ export interface Recipe {
   id: string;
   name: string;
   lastModified: string;
+  Motion?: string;
+  BCD_1D?: boolean;
+  BCD_QR?: boolean;
+  BCD_DM?: boolean;
+  DisableCamera?: boolean;
+  DisablePrinter?: boolean;
+  AutoOutConveyor?: number;
+  [key: string]: any;
 }
 
 export interface IOPoint {