diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..8b09300
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "python.analysis.typeCheckingMode": "basic",
+  "[python]": {
+    "editor.defaultFormatter": "charliermarsh.ruff",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.ruff": "explicit",
+      "source.organizeImports.ruff": "explicit"
+    }
+  }
+}
diff --git a/assets/web-ui.png b/assets/web-ui.png
new file mode 100644
index 0000000..383fffc
Binary files /dev/null and b/assets/web-ui.png differ
diff --git a/requirements.txt b/requirements.txt
index f2312a7..852269e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -3,3 +3,4 @@ langchain-google-genai>=2.0.8
 pyperclip
 gradio
 langchain-ollama
+
diff --git a/src/utils/utils.py b/src/utils/utils.py
index 024bb1a..d79e0f7 100644
--- a/src/utils/utils.py
+++ b/src/utils/utils.py
@@ -189,4 +189,4 @@ def encode_image(img_path):
         return None
     with open(img_path, "rb") as fin:
         image_data = base64.b64encode(fin.read()).decode("utf-8")
-    return image_data
+    return image_data
\ No newline at end of file
diff --git a/webui.py b/webui.py
index e416b0b..712e787 100644
--- a/webui.py
+++ b/webui.py
@@ -467,7 +467,7 @@ def create_ui(theme_name="Ocean"):
                     run_button = gr.Button("▶️ Run Agent", variant="primary", scale=2)
                     stop_button = gr.Button("⏹️ Stop", variant="stop", scale=1)
 
-            with gr.TabItem("🎬 Recordings", id=5):
+            with gr.TabItem("📊 Results", id=5):
                 recording_display = gr.Video(label="Latest Recording")
 
                 with gr.Group():
@@ -490,6 +490,28 @@ def create_ui(theme_name="Ocean"):
                             model_thoughts_output = gr.Textbox(
                                 label="Model Thoughts", lines=3, show_label=True
                             )
+            
+            with gr.TabItem("🎥 Recordings", id=6):
+                def list_recordings(save_recording_path):
+                    if not os.path.exists(save_recording_path):
+                        return []
+                    recordings = glob.glob(os.path.join(save_recording_path, "*.[mM][pP]4")) + glob.glob(os.path.join(save_recording_path, "*.[wW][eE][bB][mM]"))
+                    return recordings
+
+                recordings_gallery = gr.Gallery(
+                    label="Recordings",
+                    value=list_recordings("./tmp/record_videos"),
+                    columns=3,
+                    height="auto",
+                    object_fit="contain"
+                )
+
+                refresh_button = gr.Button("🔄 Refresh Recordings", variant="secondary")
+                refresh_button.click(
+                    fn=list_recordings,
+                    inputs=save_recording_path,
+                    outputs=recordings_gallery
+                )
 
         # Attach the callback to the LLM provider dropdown
         llm_provider.change(
@@ -526,4 +548,4 @@ def main():
     demo.launch(server_name=args.ip, server_port=args.port)
 
 if __name__ == '__main__':
-    main()
+    main()
\ No newline at end of file