diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 3fb40fdc8..427d8663a 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,13 +1,2 @@
-export { default as Button } from './button.svelte';
-export { default as InputEmail } from './inputEmail.svelte';
-export { default as InputPassword } from './inputPassword.svelte';
-export { default as InputText } from './inputText.svelte';
-export { default as InputNumber } from './inputNumber.svelte';
-export { default as InputBoolean } from './inputBoolean.svelte';
-export { default as InputTags } from './inputTags.svelte';
-export { default as InputFile } from './inputFile.svelte';
-export { default as InputCustomId } from './inputCustomId.svelte';
 export { default as Modal } from './modal.svelte';
-export { default as Table } from './table/table.svelte';
 export { default as Pagination } from './pagination.svelte';
-export * from './table';
diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index e0f11a427..2014288e1 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 
-	import { Button } from '.';
+	import { Button } from '$lib/elements/forms';
 
 	export let limit: number;
 	export let offset: number;
diff --git a/src/lib/components/button.svelte b/src/lib/elements/forms/button.svelte
similarity index 100%
rename from src/lib/components/button.svelte
rename to src/lib/elements/forms/button.svelte
diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
new file mode 100644
index 000000000..2cdda1952
--- /dev/null
+++ b/src/lib/elements/forms/index.ts
@@ -0,0 +1,9 @@
+export { default as Button } from './button.svelte';
+export { default as InputEmail } from './inputEmail.svelte';
+export { default as InputPassword } from './inputPassword.svelte';
+export { default as InputText } from './inputText.svelte';
+export { default as InputNumber } from './inputNumber.svelte';
+export { default as InputBoolean } from './inputBoolean.svelte';
+export { default as InputTags } from './inputTags.svelte';
+export { default as InputFile } from './inputFile.svelte';
+export { default as InputCustomId } from './inputCustomId.svelte';
diff --git a/src/lib/components/inputBoolean.svelte b/src/lib/elements/forms/inputBoolean.svelte
similarity index 100%
rename from src/lib/components/inputBoolean.svelte
rename to src/lib/elements/forms/inputBoolean.svelte
diff --git a/src/lib/components/inputCustomId.svelte b/src/lib/elements/forms/inputCustomId.svelte
similarity index 100%
rename from src/lib/components/inputCustomId.svelte
rename to src/lib/elements/forms/inputCustomId.svelte
diff --git a/src/lib/components/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
similarity index 100%
rename from src/lib/components/inputEmail.svelte
rename to src/lib/elements/forms/inputEmail.svelte
diff --git a/src/lib/components/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
similarity index 100%
rename from src/lib/components/inputFile.svelte
rename to src/lib/elements/forms/inputFile.svelte
diff --git a/src/lib/components/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
similarity index 100%
rename from src/lib/components/inputNumber.svelte
rename to src/lib/elements/forms/inputNumber.svelte
diff --git a/src/lib/components/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
similarity index 100%
rename from src/lib/components/inputPassword.svelte
rename to src/lib/elements/forms/inputPassword.svelte
diff --git a/src/lib/components/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
similarity index 100%
rename from src/lib/components/inputTags.svelte
rename to src/lib/elements/forms/inputTags.svelte
diff --git a/src/lib/components/inputText.svelte b/src/lib/elements/forms/inputText.svelte
similarity index 100%
rename from src/lib/components/inputText.svelte
rename to src/lib/elements/forms/inputText.svelte
diff --git a/src/lib/components/table/body.svelte b/src/lib/elements/table/body.svelte
similarity index 100%
rename from src/lib/components/table/body.svelte
rename to src/lib/elements/table/body.svelte
diff --git a/src/lib/components/table/cell.svelte b/src/lib/elements/table/cell.svelte
similarity index 100%
rename from src/lib/components/table/cell.svelte
rename to src/lib/elements/table/cell.svelte
diff --git a/src/lib/components/table/footer.svelte b/src/lib/elements/table/footer.svelte
similarity index 100%
rename from src/lib/components/table/footer.svelte
rename to src/lib/elements/table/footer.svelte
diff --git a/src/lib/components/table/header.svelte b/src/lib/elements/table/header.svelte
similarity index 100%
rename from src/lib/components/table/header.svelte
rename to src/lib/elements/table/header.svelte
diff --git a/src/lib/components/table/index.ts b/src/lib/elements/table/index.ts
similarity index 100%
rename from src/lib/components/table/index.ts
rename to src/lib/elements/table/index.ts
diff --git a/src/lib/components/table/row.svelte b/src/lib/elements/table/row.svelte
similarity index 100%
rename from src/lib/components/table/row.svelte
rename to src/lib/elements/table/row.svelte
diff --git a/src/lib/components/table/table.svelte b/src/lib/elements/table/table.svelte
similarity index 100%
rename from src/lib/components/table/table.svelte
rename to src/lib/elements/table/table.svelte
diff --git a/src/routes/console/[project]/database/[collection]/attributes.svelte b/src/routes/console/[project]/database/[collection]/attributes.svelte
index 027576ad1..840572d01 100644
--- a/src/routes/console/[project]/database/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/database/[collection]/attributes.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Table, TableCell, TableHeader, TableBody, TableRow, Button } from '$lib/components';
+	import { Button } from '$lib/elements/forms';
+	import { Table, TableCell, TableHeader, TableBody, TableRow } from '$lib/elements/table';
 	import Create from './attributes/_create.svelte';
 	import { collection } from './store';
 
diff --git a/src/routes/console/[project]/database/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/database/[collection]/attributes/_boolean.svelte
index d14085dea..ba08bbefa 100644
--- a/src/routes/console/[project]/database/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/database/[collection]/attributes/_boolean.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Button, InputText } from '$lib/components';
-	import InputBoolean from '$lib/components/inputBoolean.svelte';
+	import { Button, InputText, InputBoolean } from '$lib/elements/forms';
+
 	import { sdkForProject } from '$lib/stores/sdk';
 	import { collection } from '../store';
 
diff --git a/src/routes/console/[project]/database/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/database/[collection]/attributes/_integer.svelte
index 12a5a0c0d..dac9457cd 100644
--- a/src/routes/console/[project]/database/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/database/[collection]/attributes/_integer.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Button, InputNumber, InputText } from '$lib/components';
-	import InputBoolean from '$lib/components/inputBoolean.svelte';
+	import { Button, InputNumber, InputText, InputBoolean } from '$lib/elements/forms';
 	import { sdkForProject } from '$lib/stores/sdk';
 	import { collection } from '../store';
 
diff --git a/src/routes/console/[project]/database/[collection]/attributes/_string.svelte b/src/routes/console/[project]/database/[collection]/attributes/_string.svelte
index f3a324f4c..e99d9923c 100644
--- a/src/routes/console/[project]/database/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/database/[collection]/attributes/_string.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Button, InputNumber, InputText } from '$lib/components';
-	import InputBoolean from '$lib/components/inputBoolean.svelte';
+	import { Button, InputNumber, InputText, InputBoolean } from '$lib/elements/forms';
 	import { sdkForProject } from '$lib/stores/sdk';
 	import { collection } from '../store';
 
diff --git a/src/routes/console/[project]/database/[collection]/index.svelte b/src/routes/console/[project]/database/[collection]/index.svelte
index 34a66ec57..00d3299cb 100644
--- a/src/routes/console/[project]/database/[collection]/index.svelte
+++ b/src/routes/console/[project]/database/[collection]/index.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { sdkForProject } from '$lib/stores/sdk';
-	import { Table, TableHeader, TableRow, TableBody, TableCell, Pagination } from '$lib/components';
+	import { Table, TableRow, TableBody, TableHeader, TableCell } from '$lib/elements/table';
+	import { Pagination } from '$lib/components';
 	import { collection } from './store';
 
 	let offset = 0;
diff --git a/src/routes/console/[project]/database/_create.svelte b/src/routes/console/[project]/database/_create.svelte
index 606214c80..930e0b3a3 100644
--- a/src/routes/console/[project]/database/_create.svelte
+++ b/src/routes/console/[project]/database/_create.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Button from '$lib/components/button.svelte';
-	import InputFile from '$lib/components/inputFile.svelte';
-	import Modal from '$lib/components/modal.svelte';
+	import { Modal } from '$lib/components';
+	import { Button, InputFile } from '$lib/elements/forms';
+
 	import { sdkForProject } from '$lib/stores/sdk';
 	import { createEventDispatcher } from 'svelte';
 
diff --git a/src/routes/console/[project]/database/index.svelte b/src/routes/console/[project]/database/index.svelte
index de5430e60..98c5bc8f1 100644
--- a/src/routes/console/[project]/database/index.svelte
+++ b/src/routes/console/[project]/database/index.svelte
@@ -1,15 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { sdkForProject } from '$lib/stores/sdk';
-	import {
-		Table,
-		Button,
-		Pagination,
-		TableRow,
-		TableBody,
-		TableHeader,
-		TableCell
-	} from '$lib/components';
+	import { Table, TableRow, TableBody, TableHeader, TableCell } from '$lib/elements/table';
+	import { Button } from '$lib/elements/forms';
+	import { Pagination } from '$lib/components';
 	import Create from './_create.svelte';
 
 	let search = '';
diff --git a/src/routes/console/[project]/index.svelte b/src/routes/console/[project]/index.svelte
index a6ddddfd4..f500407fb 100644
--- a/src/routes/console/[project]/index.svelte
+++ b/src/routes/console/[project]/index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { Button } from '$lib/components';
+	import { Button } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
 	import type { Models } from 'src/sdk';
 	import { project } from './store';
diff --git a/src/routes/console/[project]/settings.svelte b/src/routes/console/[project]/settings.svelte
index 31dba3f25..f94136150 100644
--- a/src/routes/console/[project]/settings.svelte
+++ b/src/routes/console/[project]/settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, InputText } from '$lib/components';
+	import { Button, InputText } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
 	import { project } from './store';
 
diff --git a/src/routes/console/[project]/storage/[file].svelte b/src/routes/console/[project]/storage/[file].svelte
index 4b1a71754..f20430f4f 100644
--- a/src/routes/console/[project]/storage/[file].svelte
+++ b/src/routes/console/[project]/storage/[file].svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 
 	import { page } from '$app/stores';
-	import { Button } from '$lib/components';
+	import { Button } from '$lib/elements/forms';
 	import { sdkForProject } from '$lib/stores/sdk';
 
 	const request = sdkForProject.storage.getFile($page.params.file);
diff --git a/src/routes/console/[project]/storage/_create.svelte b/src/routes/console/[project]/storage/_create.svelte
index 820932d96..2d5ee4e3b 100644
--- a/src/routes/console/[project]/storage/_create.svelte
+++ b/src/routes/console/[project]/storage/_create.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import Button from '$lib/components/button.svelte';
-	import InputFile from '$lib/components/inputFile.svelte';
-	import InputTags from '$lib/components/inputTags.svelte';
-	import Modal from '$lib/components/modal.svelte';
+	import { InputTags, Button, InputFile } from '$lib/elements/forms';
+	import { Modal } from '$lib/components';
 	import { sdkForProject } from '$lib/stores/sdk';
 	import { createEventDispatcher } from 'svelte';
 
diff --git a/src/routes/console/[project]/storage/index.svelte b/src/routes/console/[project]/storage/index.svelte
index 5d5685c2b..1873fb61c 100644
--- a/src/routes/console/[project]/storage/index.svelte
+++ b/src/routes/console/[project]/storage/index.svelte
@@ -1,15 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { sdkForProject } from '$lib/stores/sdk';
-	import {
-		Table,
-		Button,
-		Pagination,
-		TableHeader,
-		TableCell,
-		TableBody,
-		TableRow
-	} from '$lib/components';
+	import { Button } from '$lib/elements/forms';
+	import { Pagination } from '$lib/components';
+	import { Table, TableHeader, TableCell, TableBody, TableRow } from '$lib/elements/table';
 	import Create from './_create.svelte';
 
 	let search = '';
diff --git a/src/routes/console/[project]/users/_create.svelte b/src/routes/console/[project]/users/_create.svelte
index 8daf33bd4..ab90dd648 100644
--- a/src/routes/console/[project]/users/_create.svelte
+++ b/src/routes/console/[project]/users/_create.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, InputPassword, InputEmail, InputText, Modal } from '$lib/components';
+	import { Modal } from '$lib/components';
+	import { Button, InputPassword, InputEmail, InputText } from '$lib/elements/forms';
 	import { sdkForProject } from '$lib/stores/sdk';
 	import { createEventDispatcher } from 'svelte';
 
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index 9e0e6a347..47448aafa 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -1,15 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { sdkForProject } from '$lib/stores/sdk';
-	import {
-		Table,
-		Button,
-		Pagination,
-		TableHeader,
-		TableBody,
-		TableRow,
-		TableCell
-	} from '$lib/components';
+	import { Pagination } from '$lib/components';
+	import { Button } from '$lib/elements/forms';
+	import { Table, TableHeader, TableBody, TableRow, TableCell } from '$lib/elements/table';
 	import Create from './_create.svelte';
 
 	let search = '';
diff --git a/src/routes/console/[project]/users/team/[team]/index.svelte b/src/routes/console/[project]/users/team/[team]/index.svelte
index 6bc426113..964207735 100644
--- a/src/routes/console/[project]/users/team/[team]/index.svelte
+++ b/src/routes/console/[project]/users/team/[team]/index.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 
 	import { page } from '$app/stores';
-	import { Button } from '$lib/components';
+	import { Button } from '$lib/elements/forms';
 	import { sdkForProject } from '$lib/stores/sdk';
 
 	const request = Promise.all([
diff --git a/src/routes/console/[project]/users/team/_create.svelte b/src/routes/console/[project]/users/team/_create.svelte
index f16d5e6ae..d0be79bac 100644
--- a/src/routes/console/[project]/users/team/_create.svelte
+++ b/src/routes/console/[project]/users/team/_create.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, InputText, Modal } from '$lib/components';
+	import { Modal } from '$lib/components';
+	import { InputText, Button } from '$lib/elements/forms';
 	import { sdkForProject } from '$lib/stores/sdk';
 	import { createEventDispatcher } from 'svelte';
 
diff --git a/src/routes/console/[project]/users/team/index.svelte b/src/routes/console/[project]/users/team/index.svelte
index 609b5a7b3..545e3dc84 100644
--- a/src/routes/console/[project]/users/team/index.svelte
+++ b/src/routes/console/[project]/users/team/index.svelte
@@ -1,15 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { sdkForProject } from '$lib/stores/sdk';
-	import {
-		Table,
-		Button,
-		Pagination,
-		TableHeader,
-		TableCell,
-		TableBody,
-		TableRow
-	} from '$lib/components';
+	import { Table, TableHeader, TableCell, TableBody, TableRow } from '$lib/elements/table';
+	import { Button } from '$lib/elements/forms';
+	import { Pagination } from '$lib/components';
 	import Create from './_create.svelte';
 
 	let search = '';
diff --git a/src/routes/console/[project]/users/user/[user]/activity.svelte b/src/routes/console/[project]/users/user/[user]/activity.svelte
index c6d1363b8..545673375 100644
--- a/src/routes/console/[project]/users/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/users/user/[user]/activity.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { Pagination, Table, TableBody, TableHeader, TableRow, TableCell } from '$lib/components';
+	import { Pagination } from '$lib/components';
+	import { Table, TableBody, TableHeader, TableRow, TableCell } from '$lib/elements/table';
 	import { sdkForProject } from '$lib/stores/sdk';
 
 	const getLogs = () => sdkForProject.users.getLogs($page.params.user);
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index 35f27d7c9..f3aa24e1b 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 
 	import { page } from '$app/stores';
-	import { Button } from '$lib/components';
+	import { Button } from '$lib/elements/forms';
 	import { sdkForProject } from '$lib/stores/sdk';
 
 	const request = sdkForProject.users.get($page.params.user);
diff --git a/src/routes/console/[project]/users/user/[user]/sessions.svelte b/src/routes/console/[project]/users/user/[user]/sessions.svelte
index 443c8a3ce..3038bbca1 100644
--- a/src/routes/console/[project]/users/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/sessions.svelte
@@ -1,14 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import {
-		Pagination,
-		Table,
-		TableCell,
-		TableHeader,
-		TableBody,
-		TableRow,
-		Button
-	} from '$lib/components';
+	import { Pagination } from '$lib/components';
+	import { Button } from '$lib/elements/forms';
+	import { Table, TableCell, TableHeader, TableBody, TableRow } from '$lib/elements/table';
 	import { sdkForProject } from '$lib/stores/sdk';
 
 	const getSessions = () => sdkForProject.users.getSessions($page.params.user);
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index 5d8903142..07ab40959 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Modal, InputText, Button } from '$lib/components';
+	import { Modal } from '$lib/components';
+	import { InputText, Button } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
 	import { createEventDispatcher } from 'svelte';
 
diff --git a/src/routes/console/_createProject.svelte b/src/routes/console/_createProject.svelte
index ca10c2748..d9aef14a2 100644
--- a/src/routes/console/_createProject.svelte
+++ b/src/routes/console/_createProject.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Modal, InputText, Button, InputCustomId } from '$lib/components';
+	import { Modal } from '$lib/components';
+	import { InputText, Button, InputCustomId } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
 	import { createEventDispatcher } from 'svelte';
 
diff --git a/src/routes/console/index.svelte b/src/routes/console/index.svelte
index 50f428f0c..05474ff0d 100644
--- a/src/routes/console/index.svelte
+++ b/src/routes/console/index.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from '$lib/components';
+	import { Button } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
 	import type { Models } from 'src/sdk';
 	import CreateOrganization from './_createOrganization.svelte';
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index d2141644b..8526d9314 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 
-	import { Button, InputEmail, InputPassword } from '$lib/components';
+	import { Button, InputEmail, InputPassword } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
 
 	let mail: string, pass: string;