diff --git a/apps/docs/pages/guides/integrations/illa.mdx b/apps/docs/pages/guides/integrations/illa.mdx
new file mode 100644
index 00000000000..13c3db98127
--- /dev/null
+++ b/apps/docs/pages/guides/integrations/illa.mdx
@@ -0,0 +1,102 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+    id: 'illa',
+    title: 'ILLA',
+    description:
+        'Get started with Supabase and ILLA, a low-code platform for developers that enables the rapid development and deployment of internal tools.',
+}
+
+This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Supabase in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about ILLA and give it a try, visit their website at [https://www.illacloud.com/](https://www.illacloud.com/). Let's begin!
+
+### Step 1: Set up your Back end on Supabase
+
+On the [Supabase dashboard](https://app.supabase.com/projects), click `New project` and set the name to adminPanel.
+
+![Create Supabase Project for ILLA Admin Panel](/docs/img/guides/integrations/illa/supabase-illa-project.png)
+
+Create a new table by clicking on the `Create a new table` .
+
+Supabase offers a variety of options for populating tables with data, including writing queries, creating schemas through a user interface, and uploading CSV files.
+
+![Create Supabase Table for ILLA Admin Panel](/docs/img/guides/integrations/illa/supabase-table-1.png)
+
+![Config Supabase Table for ILLA Admin Panel](/docs/img/guides/integrations/illa/supabase-table-2.png)
+
+Fill out the info in the table. The database is now set up.
+
+### Step 2: Build UI on ILLA Builder
+
+On [ILLA Builder](https://fast-try.illacloud.com/), click Create New to create a new application.
+
+![Create new project on ILLA Builder](/docs/img/guides/integrations/illa/supabase-illa-create-project.png)
+
+Drag components from the `Insert` panel to the canvas.
+
+Select the components on the canvas and configure the property on the `Inspect` panel.
+
+As seen in the below screenshot, we have built a simple admin panel.
+
+![Build UI with ILLA Builder](/docs/img/guides/integrations/illa/supabase-illa-UI.png)
+
+### Step 3: Connect to Supabase and config CRUD
+
+Note down the database connection information under [Project Settings](https://app.supabase.com/project/hdcfnsxpwwgboqomdrhp/settings/database) in Supabase.
+
+![Note information in supabase](/docs/img/guides/integrations/illa/supabase-information.png)
+
+In the Action List, click `+ New` and select Supabase DB.
+
+![Connect ILLA to Supabase](/docs/img/guides/integrations/illa/supabase-illa-connect.png)
+
+Fill out the form to connect to your Supabase instance. Test connection and save resource.
+
+![Config Supabase in ILLA](/docs/img/guides/integrations/illa/supabase-illa-connect-2.png)
+
+Click `Create Action` to create an action with the Supabase resource and config your CRUD.
+
+![Select Supabase resource in ILLA](/docs/img/guides/integrations/illa/supabase-illa-select.png)
+
+Use {{ to get the front-end input data. The following is an example of the User Management page in the Admin Panel.
+
+Search for a user by the name inputted in input1
+
+```
+SELECT *
+FROM user
+WHERE name = "{{input1.value}}"
+;
+```
+
+Update user data. Update user information when id matches
+
+```
+UPDATE user
+SET name = "{{input3.value}}"
+, email = "{{input4.value}}"
+WHERE id="{{input2.value}}"
+;
+```
+
+Insert user data
+
+```
+INSERT INTO user VALUES("{{input5.value}}","{{input6.value}}","{{input7.value}}");
+```
+
+Delete a user by id
+
+```
+DELETE FROM user WHERE id = "{{input2.value}}";
+```
+
+### Step 4: Show data on components
+Configure the properties of components with {{ . For example:
+
+![Show Supabase data on ILLA components](/docs/img/guides/integrations/illa/supabase-illa-show-data.png)
+
+## Resources
+
+- [Supabase official website](https://supabase.com/)
+- [Supabase GitHub](https://github.com/supabase/supabase)
+- [Supabase documentation](https://supabase.com/docs)
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-illa-UI.png b/apps/docs/public/img/guides/integrations/illa/supabase-illa-UI.png
new file mode 100644
index 00000000000..e90b8ae8ee3
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-illa-UI.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-illa-connect-2.png b/apps/docs/public/img/guides/integrations/illa/supabase-illa-connect-2.png
new file mode 100644
index 00000000000..61c3219b625
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-illa-connect-2.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-illa-connect.png b/apps/docs/public/img/guides/integrations/illa/supabase-illa-connect.png
new file mode 100644
index 00000000000..b1787ee8473
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-illa-connect.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-illa-create-project.png b/apps/docs/public/img/guides/integrations/illa/supabase-illa-create-project.png
new file mode 100644
index 00000000000..d04b4c5f5a7
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-illa-create-project.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-illa-project.png b/apps/docs/public/img/guides/integrations/illa/supabase-illa-project.png
new file mode 100644
index 00000000000..ffbd1876873
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-illa-project.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-illa-select.png b/apps/docs/public/img/guides/integrations/illa/supabase-illa-select.png
new file mode 100644
index 00000000000..f6160065d70
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-illa-select.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-illa-show-data.png b/apps/docs/public/img/guides/integrations/illa/supabase-illa-show-data.png
new file mode 100644
index 00000000000..87db66800a9
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-illa-show-data.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-information.png b/apps/docs/public/img/guides/integrations/illa/supabase-information.png
new file mode 100644
index 00000000000..8becd5e3ab9
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-information.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-table-1.png b/apps/docs/public/img/guides/integrations/illa/supabase-table-1.png
new file mode 100644
index 00000000000..1452c0a3289
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-table-1.png differ
diff --git a/apps/docs/public/img/guides/integrations/illa/supabase-table-2.png b/apps/docs/public/img/guides/integrations/illa/supabase-table-2.png
new file mode 100644
index 00000000000..94d8711c6d5
Binary files /dev/null and b/apps/docs/public/img/guides/integrations/illa/supabase-table-2.png differ