Bring supabase guide instructions in line with updated video

Author: benitav

images/installation/create-new-instance.png

@@ -6,6 +6,7 @@ sidebarTitle: Overview
 
 import CreateCloudInstance from '/snippets/create-cloud-instance.mdx';
 import SupabaseConnection from '/snippets/supabase-database-connection.mdx';
+import ConfigureSyncRules from '/snippets/configure-sync-rules.mdx';
 
 <Frame caption="Video walkthrough of the integration guide.">
   <iframe width="1005" height="420" src="https://www.youtube.com/embed/Xg5FTYGPn5U?si=4TjdYEACDR2g98yh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></Frame>
@@ -118,35 +119,7 @@ create publication powersync for table public.lists, public.todos;
 <SupabaseConnection />
 
 ### Configure Sync Rules
-
-[Sync Rules](/usage/sync-rules) allow developers to control which data gets synced to which user devices using a SQL-like syntax in a YAML file. For the demo app, we're going to specify that each user can only see their own to-do lists and list items.
-
-1. To update your sync rules, open the `sync-rules.yaml` file.
-
-<Frame>
-  <img src="/images/integration-5.png" />
-</Frame>
-
-2. Replace the `sync-rules.yaml` file's contents with the below:
-
-```yaml
-bucket_definitions:
-  user_lists:
-    # Separate bucket per To-Do list
-    parameters: select id as list_id from lists where owner_id = request.user_id()
-    data:
-      - select * from lists where id = bucket.list_id
-      - select * from todos where list_id = bucket.list_id
-```
-
-3. In the top right, click **"Validate sync rules"** and ensure there are no errors. This validates your sync rules against your Postgres database.
-4. In the top right, click **"Deploy sync rules"** and select your instance.
-5. Confirm in the dialog and wait a couple of minutes for the deployment to complete.
-
-<Tip>
-- For additional information on PowerSync's Sync Rules, refer to the [Sync Rules](/usage/sync-rules) documentation.
-- If you're wondering how Sync Rules relate to Supabase Postgres [RLS](https://supabase.com/docs/guides/auth/row-level-security), see [this subsection](/integration-guides/supabase-+-powersync/rls-and-sync-rules). 
-</Tip>
+<ConfigureSyncRules />
 
 ## Test Everything (Using Our Demo App)
 

images/installation/edit-instance.png

@@ -0,0 +1,27 @@
+[Sync Rules](/usage/sync-rules) allow developers to control which data gets synced to which user devices using a SQL-like syntax in a YAML file. For the demo app, we're going to specify that each user can only see their own to-do lists and list items.
+
+1. The final step is to replace the Sync Rules file's contents with the below:
+
+```yaml
+bucket_definitions:
+  user_lists:
+    # Separate bucket per To-Do list
+    parameters: select id as list_id from lists where owner_id = request.user_id()
+    data:
+      - select * from lists where id = bucket.list_id
+      - select * from todos where list_id = bucket.list_id
+```
+
+<Frame>
+  <img src="/images/installation/overview-sync-rules.png" />
+</Frame>
+
+3. Click **"Validate sync rules"** and ensure there are no errors. This validates your sync rules against your Postgres database.
+4. Click **"Save and deploy"** to deploy your Sync Rules.
+
+<Tip>
+- Your Sync Rules can be updated by navigating to the **Manage instances** workspace and selecting the `sync-rules.yaml` file.
+  <img src="/images/installation/update-sync-rules.png" width="60%" />
+- For additional information on PowerSync's Sync Rules, refer to the [Sync Rules](/usage/sync-rules) documentation.
+- If you're wondering how Sync Rules relate to Supabase Postgres [RLS](https://supabase.com/docs/guides/auth/row-level-security), see [this subsection](/integration-guides/supabase-+-powersync/rls-and-sync-rules). 
+</Tip>