diff --git a/resources/js/api/mutations.ts b/resources/js/api/mutations.ts
index 0e8f3659..e3307040 100644
--- a/resources/js/api/mutations.ts
+++ b/resources/js/api/mutations.ts
@@ -70,6 +70,14 @@ import FillListing from '~/graphql/mutation/marketplace/FillListing';
 import PlaceBid from '~/graphql/mutation/marketplace/PlaceBid';
 import FinalizeAuction from '~/graphql/mutation/marketplace/FinalizeAuction';
 
+import CreateTokenGroup from '~/graphql/mutation/token-group/CreateTokenGroup';
+import DestroyTokenGroup from '~/graphql/mutation/token-group/DestroyTokenGroup';
+import AddTokenToGroup from '~/graphql/mutation/token-group/AddTokenToGroup';
+import RemoveTokenFromGroup from '~/graphql/mutation/token-group/RemoveTokenFromGroup';
+import SetTokenGroups from '~/graphql/mutation/token-group/SetTokenGroups';
+import SetTokenGroupAttribute from '~/graphql/mutation/token-group/SetTokenGroupAttribute';
+import RemoveTokenGroupAttribute from '~/graphql/mutation/token-group/RemoveTokenGroupAttribute';
+
 export default {
     CreateCollection,
     ApproveCollection,
@@ -142,4 +150,12 @@ export default {
     FillListing,
     PlaceBid,
     FinalizeAuction,
+
+    CreateTokenGroup,
+    DestroyTokenGroup,
+    AddTokenToGroup,
+    RemoveTokenFromGroup,
+    SetTokenGroups,
+    SetTokenGroupAttribute,
+    RemoveTokenGroupAttribute,
 };
diff --git a/resources/js/api/queries.ts b/resources/js/api/queries.ts
index d3507391..c2558fd4 100644
--- a/resources/js/api/queries.ts
+++ b/resources/js/api/queries.ts
@@ -30,6 +30,9 @@ import GetSales from '~/graphql/query/marketplace/GetSales';
 import GetBlocks from '~/graphql/query/marketplace/GetBlocks';
 import GetBanners from '~/graphql/query/GetBanners';
 
+import GetTokenGroup from '~/graphql/query/token-group/GetTokenGroup';
+import GetTokenGroups from '~/graphql/query/token-group/GetTokenGroups';
+
 export default {
     GetTransaction,
     GetCollections,
@@ -62,4 +65,7 @@ export default {
     GetSales,
     GetBlocks,
     GetBanners,
+
+    GetTokenGroup,
+    GetTokenGroups,
 };
diff --git a/resources/js/api/token-group.ts b/resources/js/api/token-group.ts
new file mode 100644
index 00000000..09d2f87e
--- /dev/null
+++ b/resources/js/api/token-group.ts
@@ -0,0 +1,137 @@
+import { ApiService } from '.';
+import mutations from './mutations';
+import queries from './queries';
+
+export class TokenGroupApi {
+    static async getTokenGroup(collectionId: string, tokenGroupId: string) {
+        const data = {
+            query: queries.GetTokenGroup,
+            variables: {
+                collectionId,
+                tokenGroupId,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+
+    static async getTokenGroups(collectionId: string | null = null, after: string | null = null) {
+        const data = {
+            query: queries.GetTokenGroups,
+            variables: {
+                collectionId,
+                after,
+                first: 20,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+
+    static async createTokenGroup(tokenGroupData: Record<string, unknown>) {
+        const data = {
+            query: mutations.CreateTokenGroup,
+            variables: {
+                collectionId: tokenGroupData.collectionId,
+                signingAccount: tokenGroupData.signingAccount,
+                idempotencyKey: tokenGroupData.idempotencyKey,
+                skipValidation: tokenGroupData.skipValidation,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+
+    static async destroyTokenGroup(tokenGroupData: Record<string, unknown>) {
+        const data = {
+            query: mutations.DestroyTokenGroup,
+            variables: {
+                tokenGroupId: tokenGroupData.tokenGroupId,
+                signingAccount: tokenGroupData.signingAccount,
+                idempotencyKey: tokenGroupData.idempotencyKey,
+                skipValidation: tokenGroupData.skipValidation,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+
+    static async addTokenToGroup(tokenGroupData: Record<string, unknown>) {
+        const data = {
+            query: mutations.AddTokenToGroup,
+            variables: {
+                collectionId: tokenGroupData.collectionId,
+                tokenId: tokenGroupData.tokenId,
+                tokenGroupId: tokenGroupData.tokenGroupId,
+                signingAccount: tokenGroupData.signingAccount,
+                idempotencyKey: tokenGroupData.idempotencyKey,
+                skipValidation: tokenGroupData.skipValidation,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+
+    static async removeTokenFromGroup(tokenGroupData: Record<string, unknown>) {
+        const data = {
+            query: mutations.RemoveTokenFromGroup,
+            variables: {
+                collectionId: tokenGroupData.collectionId,
+                tokenId: tokenGroupData.tokenId,
+                tokenGroupId: tokenGroupData.tokenGroupId,
+                signingAccount: tokenGroupData.signingAccount,
+                idempotencyKey: tokenGroupData.idempotencyKey,
+                skipValidation: tokenGroupData.skipValidation,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+
+    static async setTokenGroups(tokenGroupData: Record<string, unknown>) {
+        const data = {
+            query: mutations.SetTokenGroups,
+            variables: {
+                collectionId: tokenGroupData.collectionId,
+                tokenId: tokenGroupData.tokenId,
+                tokenGroups: tokenGroupData.tokenGroups,
+                signingAccount: tokenGroupData.signingAccount,
+                idempotencyKey: tokenGroupData.idempotencyKey,
+                skipValidation: tokenGroupData.skipValidation,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+
+    static async setTokenGroupAttribute(tokenGroupData: Record<string, unknown>) {
+        const data = {
+            query: mutations.SetTokenGroupAttribute,
+            variables: {
+                tokenGroupId: tokenGroupData.tokenGroupId,
+                key: tokenGroupData.key,
+                value: tokenGroupData.value,
+                signingAccount: tokenGroupData.signingAccount,
+                idempotencyKey: tokenGroupData.idempotencyKey,
+                skipValidation: tokenGroupData.skipValidation,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+
+    static async removeTokenGroupAttribute(tokenGroupData: Record<string, unknown>) {
+        const data = {
+            query: mutations.RemoveTokenGroupAttribute,
+            variables: {
+                tokenGroupId: tokenGroupData.tokenGroupId,
+                key: tokenGroupData.key,
+                signingAccount: tokenGroupData.signingAccount,
+                idempotencyKey: tokenGroupData.idempotencyKey,
+                skipValidation: tokenGroupData.skipValidation,
+            },
+        };
+
+        return ApiService.sendPlatformRequest(data);
+    }
+}
diff --git a/resources/js/components/pages/TokenGroups.vue b/resources/js/components/pages/TokenGroups.vue
new file mode 100644
index 00000000..ec7751df
--- /dev/null
+++ b/resources/js/components/pages/TokenGroups.vue
@@ -0,0 +1,267 @@
+<template>
+    <div
+        class="px-4 sm:px-6 lg:px-8 bg-light-surface-primary dark:bg-dark-surface-primary m-4 sm:m-8 shadow rounded-lg overflow-y-auto h-full transition-all"
+    >
+        <div class="mt-4 flow-root">
+            <div class="sm:-mx-6 lg:-mx-8 transition-all">
+                <div class="flex lg:flex-row flex-col-reverse justify-between">
+                    <div class="min-w-0 mb-2 w-full lg:w-2/3 py-2 sm:px-6 lg:px-8 transition-all">
+                        <FormInput
+                            v-model="searchCollectionInput"
+                            name="searchInput"
+                            label="Collection ID"
+                            type="number"
+                            placeholder="Filter by collection ID"
+                            @input-change="searchChange"
+                        />
+                    </div>
+                    <div class="flex gap-2 sm:px-6 lg:px-8 py-2 mb-2 items-end">
+                        <Btn
+                            primary
+                            dusk="createTokenGroupBtn"
+                            @click="openModalSlide('CreateTokenGroupSlideover', {})"
+                        >
+                            Create Token Group
+                        </Btn>
+                    </div>
+                </div>
+                <LoadingContent
+                    class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
+                    :is-loading="isLoading"
+                >
+                    <table
+                        id="tokenGroupsTable"
+                        class="min-w-full divide-y divide-light-stroke dark:divide-dark-stroke"
+                        v-if="tokenGroups.items?.length"
+                    >
+                        <thead>
+                            <tr>
+                                <th
+                                    scope="col"
+                                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-3"
+                                >
+                                    Group ID
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-3"
+                                >
+                                    Collection ID
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Tokens
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Attributes
+                                </th>
+                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-light-surface-primary dark:bg-dark-surface-primary">
+                            <tr
+                                v-for="(group, idx) in tokenGroups.items"
+                                :key="idx"
+                                :class="
+                                    idx % 2 === 0
+                                        ? undefined
+                                        : 'bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50'
+                                "
+                            >
+                                <td
+                                    class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-light-content-strong dark:text-dark-content-strong sm:pl-3"
+                                >
+                                    <span
+                                        class="cursor-pointer"
+                                        @click="openModalSlide('DetailsTokenGroupSlideover', group)"
+                                    >
+                                        {{ `#${group.id}` }}
+                                    </span>
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    #{{ group.collectionId }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ group.tokensCount }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ group.attributesCount }}
+                                </td>
+                                <td
+                                    class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3 flex justify-end"
+                                >
+                                    <DropdownMenu
+                                        :actions="actions"
+                                        @clicked="($event) => openModalSlide($event, group)"
+                                    />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <NoItems v-else />
+                </LoadingContent>
+                <LoadingCircle v-if="isPaginationLoading" class="mx-auto py-4" />
+                <div ref="paginatorRef"></div>
+            </div>
+        </div>
+        <Slideover :open="modalSlide" @close="closeModalSlide" :item="slideComponent" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, Ref } from 'vue';
+import { TokenGroupApi } from '~/api/token-group';
+import { DTOTokenGroupFactory as DTOFactory } from '~/factory/token-group';
+import DropdownMenu from '~/components/DropdownMenu.vue';
+import LoadingCircle from '~/components/LoadingCircle.vue';
+import LoadingContent from '~/components/LoadingContent.vue';
+import Slideover from '~/components/Slideover.vue';
+import debounce from 'lodash/debounce';
+import { snackbarErrors } from '~/util';
+import { TransactionState } from '~/types/types.enums';
+import snackbar, { events } from '~/util/snackbar';
+import FormInput from '~/components/FormInput.vue';
+import NoItems from '~/components/NoItems.vue';
+import Btn from '~/components/Btn.vue';
+
+const isLoading = ref(false);
+const isPaginationLoading = ref(false);
+const tokenGroups: Ref<{
+    items: {
+        id: string;
+        collectionId: string;
+        tokensCount: number;
+        attributesCount: number;
+        attributes: { key: string; value: string }[];
+        tokens: { token: { tokenId: string }; position: number }[];
+    }[];
+    cursor: string | null;
+}> = ref({
+    items: [],
+    cursor: null,
+});
+const paginatorRef = ref();
+const modalSlide = ref(false);
+const slideComponent = ref();
+const searchCollectionInput = ref('');
+
+const actions = [
+    {
+        key: 'details',
+        name: 'Details',
+        component: 'DetailsTokenGroupSlideover',
+    },
+    {
+        key: 'add-token',
+        name: 'Add Token',
+        component: 'AddTokenToGroupSlideover',
+    },
+    {
+        key: 'remove-token',
+        name: 'Remove Token',
+        component: 'RemoveTokenFromGroupSlideover',
+    },
+    {
+        key: 'attributes',
+        name: 'Attributes',
+        component: 'AttributesTokenGroupSlideover',
+    },
+    {
+        key: 'destroy',
+        name: 'Destroy',
+        component: 'DestroyTokenGroupSlideover',
+    },
+];
+
+const debouncedSearch = debounce(async () => {
+    await getTokenGroups();
+}, 1000);
+
+const searchChange = (e) => {
+    if (e.target.value !== undefined) {
+        debouncedSearch();
+    } else {
+        debouncedSearch.cancel();
+        getTokenGroups();
+    }
+};
+
+const getTokenGroups = async () => {
+    try {
+        isLoading.value = true;
+        const collectionId = searchCollectionInput.value || null;
+        const res = await TokenGroupApi.getTokenGroups(collectionId);
+        tokenGroups.value = DTOFactory.forTokenGroups(res);
+    } catch (e) {
+        tokenGroups.value.items = [];
+        if (snackbarErrors(e)) return;
+        snackbar.error({
+            title: 'Token Groups',
+            text: 'Error while fetching token groups',
+        });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const loadMoreWithObserver = () => {
+    const observer = new IntersectionObserver(
+        async (entries) => {
+            if (entries[0].isIntersecting) {
+                try {
+                    if (!tokenGroups.value.cursor || isPaginationLoading.value) return;
+                    isPaginationLoading.value = true;
+                    const collectionId = searchCollectionInput.value || null;
+                    const res = await TokenGroupApi.getTokenGroups(collectionId, tokenGroups.value.cursor);
+                    const data = DTOFactory.forTokenGroups(res);
+                    tokenGroups.value = {
+                        items: [...tokenGroups.value.items, ...data.items],
+                        cursor: data.cursor,
+                    };
+                    isPaginationLoading.value = false;
+                } catch {
+                    isPaginationLoading.value = false;
+                }
+            }
+        },
+        { root: null, rootMargin: '0px', threshold: 1.0 }
+    );
+    observer.observe(paginatorRef.value);
+};
+
+const openModalSlide = (componentName: string, group: any) => {
+    slideComponent.value = { componentName, componentPath: 'token-group', ...group };
+    modalSlide.value = true;
+};
+
+const closeModalSlide = () => {
+    modalSlide.value = false;
+    setTimeout(() => {
+        slideComponent.value = null;
+    }, 500);
+};
+
+const openTransactionSlide = async (transactionId: string) => {
+    if (modalSlide.value) closeModalSlide();
+    setTimeout(() => {
+        openModalSlide('DetailsTransactionSlideover', { id: transactionId, state: TransactionState.PENDING });
+    }, 600);
+};
+
+onMounted(async () => {
+    getTokenGroups();
+    loadMoreWithObserver();
+    events.on('transaction', openTransactionSlide);
+});
+</script>
diff --git a/resources/js/components/slideovers/token-group/AddTokenToGroupSlideover.vue b/resources/js/components/slideovers/token-group/AddTokenToGroupSlideover.vue
new file mode 100644
index 00000000..25e022de
--- /dev/null
+++ b/resources/js/components/slideovers/token-group/AddTokenToGroupSlideover.vue
@@ -0,0 +1,163 @@
+<template>
+    <Form
+        ref="formRef"
+        class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
+        :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
+        @submit="addTokenToGroup"
+    >
+        <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
+            Add Token to Group
+        </h3>
+        <div class="h-0 flex-1 overflow-y-auto">
+            <div class="flex flex-1 flex-col justify-between">
+                <div class="divide-y divide-light-stroke dark:divide-dark-stroke px-4 sm:px-6">
+                    <div class="space-y-6 pt-6 pb-5">
+                        <FormInput
+                            v-model="tokenGroupId"
+                            name="tokenGroupId"
+                            label="Token Group ID"
+                            description="The ID of the token group to add the token to."
+                            type="number"
+                            disabled
+                            required
+                        />
+                        <FormInput
+                            v-model="collectionId"
+                            name="collectionId"
+                            label="Collection ID"
+                            description="The ID of the collection the token belongs to."
+                            type="number"
+                            required
+                        />
+                        <TokenIdInput
+                            v-model="tokenId"
+                            name="tokenId"
+                            label="Token ID"
+                            description="The ID of the token to add to the group."
+                            required
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="signingAccount"
+                            name="signingAccount"
+                            label="Signing Account"
+                            description="The wallet used to sign and broadcast the transaction. By default, this is the wallet daemon."
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="idempotencyKey"
+                            name="idempotencyKey"
+                            label="Idempotency Key"
+                            description="The idempotency key to set. It is recommended to use a UUID for this."
+                            tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
+                            readmore="Idempotency Key"
+                        />
+                        <FormCheckbox
+                            v-if="useAppStore().advanced"
+                            v-model="skipValidation"
+                            name="skipValidation"
+                            label="Skip validation"
+                            description="Skip all validation rules, use with caution. Defaults to false."
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex space-x-3 flex-shrink-0 justify-end px-4 py-4">
+            <Btn @click="closeSlide">Cancel</Btn>
+            <Btn :loading="isLoading" :disabled="isLoading" primary is-submit>Add Token</Btn>
+        </div>
+    </Form>
+</template>
+
+<script setup lang="ts">
+import { Form } from 'vee-validate';
+import * as yup from 'yup';
+import { ref, Ref } from 'vue';
+import FormInput from '~/components/FormInput.vue';
+import FormCheckbox from '~/components/FormCheckbox.vue';
+import TokenIdInput from '~/components/TokenIdInput.vue';
+import Btn from '~/components/Btn.vue';
+import { TokenGroupApi } from '~/api/token-group';
+import snackbar from '~/util/snackbar';
+import { formatData, formatToken, snackbarErrors } from '~/util';
+import { useAppStore } from '~/store';
+import { collectionIdRequiredSchema, stringNotRequiredSchema, booleanNotRequiredSchema } from '~/util/schemas';
+import { TokenIdSelectType } from '~/types/types.enums';
+import { TokenIdType } from '~/types/types.interface';
+
+const emit = defineEmits(['close']);
+
+const props = withDefaults(
+    defineProps<{
+        item?: {
+            id: string;
+            collectionId: string;
+        };
+    }>(),
+    { item: undefined }
+);
+
+const isLoading = ref(false);
+const tokenGroupId = ref(props.item?.id);
+const collectionId = ref(props.item?.collectionId ?? '');
+const tokenId: Ref<TokenIdType> = ref({ tokenId: '', tokenType: TokenIdSelectType.Integer });
+const idempotencyKey = ref('');
+const skipValidation = ref(false);
+const formRef = ref();
+const signingAccount = ref('');
+
+const validation = yup.object({
+    tokenGroupId: yup.number().typeError('Token Group ID must be a number').required(),
+    collectionId: collectionIdRequiredSchema,
+    tokenId: stringNotRequiredSchema,
+    idempotencyKey: stringNotRequiredSchema,
+    skipValidation: booleanNotRequiredSchema,
+});
+
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
+const addTokenToGroup = async () => {
+    await formRef.value?.validate();
+    if (!formRef.value?.getMeta().valid) return;
+
+    try {
+        isLoading.value = true;
+        const res = await TokenGroupApi.addTokenToGroup(
+            formatData({
+                collectionId: collectionId.value,
+                tokenId: formatToken(tokenId.value),
+                tokenGroupId: props.item?.id,
+                signingAccount: signingAccount.value,
+                idempotencyKey: idempotencyKey.value,
+                skipValidation: skipValidation.value,
+            })
+        );
+
+        const id = res.data?.AddTokenToGroup?.id;
+        if (id) {
+            snackbar.success({
+                title: 'Token added to group',
+                text: `Token added with transaction id ${id}`,
+                event: id,
+            });
+            closeSlide();
+        }
+    } catch (e) {
+        if (snackbarErrors(e)) return;
+        snackbar.error({ title: 'Add token to group', text: 'Adding token to group failed' });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const closeSlide = () => {
+    emit('close');
+};
+</script>
diff --git a/resources/js/components/slideovers/token-group/AttributesTokenGroupSlideover.vue b/resources/js/components/slideovers/token-group/AttributesTokenGroupSlideover.vue
new file mode 100644
index 00000000..a575dd6f
--- /dev/null
+++ b/resources/js/components/slideovers/token-group/AttributesTokenGroupSlideover.vue
@@ -0,0 +1,236 @@
+<template>
+    <Form
+        ref="formRef"
+        class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
+        :validation-schema="validation"
+        @submit="formAction"
+    >
+        <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
+            Token Group Attributes
+        </h3>
+        <div class="h-0 flex-1 overflow-y-auto">
+            <div class="flex flex-1 flex-col justify-between">
+                <RadioGroupButton
+                    class="px-4 sm:px-6 pt-6 w-full"
+                    v-model="attributeAction"
+                    label="Select"
+                    :items="attributeActions"
+                    :cols="attributeActions.length"
+                />
+                <div class="divide-y divide-light-stroke dark:divide-dark-stroke px-4 sm:px-6">
+                    <div class="space-y-6 pt-6 pb-5">
+                        <FormInput v-model="attributeAction" name="attributeAction" class="hidden" />
+                        <FormInput
+                            v-model="tokenGroupId"
+                            name="tokenGroupId"
+                            label="Token Group ID"
+                            description="The ID of the token group."
+                            type="number"
+                            disabled
+                            required
+                        />
+                        <FormInput
+                            v-if="attributeAction === 'set'"
+                            v-model="key"
+                            name="key"
+                            label="Key"
+                            description="The attribute key."
+                            required
+                        />
+                        <FormSelect
+                            v-if="attributeAction === 'remove'"
+                            :options="itemAttributesKeys"
+                            v-model="key"
+                            name="key"
+                            label="Key"
+                            description="The attribute key to remove."
+                            required
+                        />
+                        <FormInput
+                            v-if="attributeAction === 'set'"
+                            v-model="value"
+                            name="value"
+                            label="Value"
+                            description="The attribute value."
+                            required
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="signingAccount"
+                            name="signingAccount"
+                            label="Signing Account"
+                            description="The wallet used to sign and broadcast the transaction. By default, this is the wallet daemon."
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="idempotencyKey"
+                            name="idempotencyKey"
+                            label="Idempotency Key"
+                            description="The idempotency key to set. It is recommended to use a UUID for this."
+                            tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
+                            readmore="Idempotency Key"
+                        />
+                        <FormCheckbox
+                            v-if="useAppStore().advanced"
+                            v-model="skipValidation"
+                            name="skipValidation"
+                            label="Skip validation"
+                            description="Skip all validation rules, use with caution. Defaults to false."
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex space-x-3 flex-shrink-0 justify-end px-4 py-4">
+            <Btn @click="closeSlide">Cancel</Btn>
+            <Btn :loading="isLoading" :disabled="isLoading" primary is-submit>
+                {{ attributeActions.find((a) => a.value === attributeAction)?.btnText }}
+            </Btn>
+        </div>
+    </Form>
+</template>
+
+<script setup lang="ts">
+import { Form } from 'vee-validate';
+import * as yup from 'yup';
+import { ref } from 'vue';
+import FormInput from '~/components/FormInput.vue';
+import FormCheckbox from '~/components/FormCheckbox.vue';
+import FormSelect from '~/components/FormSelect.vue';
+import RadioGroupButton from '~/components/RadioGroupButton.vue';
+import Btn from '~/components/Btn.vue';
+import { TokenGroupApi } from '~/api/token-group';
+import snackbar from '~/util/snackbar';
+import { formatData, snackbarErrors } from '~/util';
+import { useAppStore } from '~/store';
+
+const emit = defineEmits(['close']);
+
+const props = withDefaults(
+    defineProps<{
+        item?: {
+            id: string;
+            attributes: { key: string; value: string }[];
+        };
+    }>(),
+    { item: undefined }
+);
+
+const isLoading = ref(false);
+const tokenGroupId = ref(props.item?.id);
+const key = ref('');
+const value = ref('');
+const idempotencyKey = ref('');
+const skipValidation = ref(false);
+const formRef = ref();
+const signingAccount = ref('');
+const attributeAction = ref('set');
+
+const itemAttributesKeys = props.item?.attributes?.map((a) => a.key) ?? [];
+
+const attributeActions = [
+    {
+        key: 'btn-set',
+        label: 'Set',
+        value: 'set',
+        btnText: 'Set Attribute',
+        action: () => setAttribute(),
+    },
+    {
+        key: 'btn-remove',
+        label: 'Remove',
+        value: 'remove',
+        btnText: 'Remove Attribute',
+        action: () => removeAttribute(),
+    },
+];
+
+const formAction = () => {
+    const action = attributeActions.find((a) => a.value === attributeAction.value);
+    if (action) action.action();
+};
+
+const validation = yup.object({
+    tokenGroupId: yup.number().typeError('Token Group ID must be a number').required(),
+    attributeAction: yup.string().nullable(),
+    key: yup.string().required(),
+    value: yup.string().when('attributeAction', {
+        is: 'set',
+        then: () => yup.string().required(),
+        otherwise: () => yup.string().nullable().notRequired(),
+    }),
+    idempotencyKey: yup.string().nullable(),
+    skipValidation: yup.boolean().default(false),
+});
+
+const setAttribute = async () => {
+    await formRef.value?.validate();
+    if (!formRef.value?.getMeta().valid) return;
+
+    try {
+        isLoading.value = true;
+        const res = await TokenGroupApi.setTokenGroupAttribute(
+            formatData({
+                tokenGroupId: props.item?.id,
+                key: key.value,
+                value: value.value,
+                signingAccount: signingAccount.value,
+                idempotencyKey: idempotencyKey.value,
+                skipValidation: skipValidation.value,
+            })
+        );
+
+        const id = res.data?.SetTokenGroupAttribute?.id;
+        if (id) {
+            snackbar.success({
+                title: 'Token group attribute set',
+                text: `Attribute set with transaction id ${id}`,
+                event: id,
+            });
+            closeSlide();
+        }
+    } catch (e) {
+        if (snackbarErrors(e)) return;
+        snackbar.error({ title: 'Set attribute', text: 'Setting attribute failed' });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const removeAttribute = async () => {
+    await formRef.value?.validate();
+    if (!formRef.value?.getMeta().valid) return;
+
+    try {
+        isLoading.value = true;
+        const res = await TokenGroupApi.removeTokenGroupAttribute(
+            formatData({
+                tokenGroupId: props.item?.id,
+                key: key.value,
+                signingAccount: signingAccount.value,
+                idempotencyKey: idempotencyKey.value,
+                skipValidation: skipValidation.value,
+            })
+        );
+
+        const id = res.data?.RemoveTokenGroupAttribute?.id;
+        if (id) {
+            snackbar.success({
+                title: 'Token group attribute removed',
+                text: `Attribute removed with transaction id ${id}`,
+                event: id,
+            });
+            closeSlide();
+        }
+    } catch (e) {
+        if (snackbarErrors(e)) return;
+        snackbar.error({ title: 'Remove attribute', text: 'Removing attribute failed' });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const closeSlide = () => {
+    emit('close');
+};
+</script>
diff --git a/resources/js/components/slideovers/token-group/CreateTokenGroupSlideover.vue b/resources/js/components/slideovers/token-group/CreateTokenGroupSlideover.vue
new file mode 100644
index 00000000..ef332909
--- /dev/null
+++ b/resources/js/components/slideovers/token-group/CreateTokenGroupSlideover.vue
@@ -0,0 +1,131 @@
+<template>
+    <Form
+        ref="formRef"
+        class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
+        :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
+        @submit="createTokenGroup"
+    >
+        <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
+            Create Token Group
+        </h3>
+        <div class="h-0 flex-1 overflow-y-auto">
+            <div class="flex flex-1 flex-col justify-between">
+                <div class="divide-y divide-light-stroke dark:divide-dark-stroke px-4 sm:px-6">
+                    <div class="space-y-6 pt-6 pb-5">
+                        <FormInput
+                            v-model="collectionId"
+                            name="collectionId"
+                            label="Collection ID"
+                            description="The ID of the collection to create the token group in."
+                            type="number"
+                            required
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="signingAccount"
+                            name="signingAccount"
+                            label="Signing Account"
+                            description="The wallet used to sign and broadcast the transaction. By default, this is the wallet daemon."
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="idempotencyKey"
+                            name="idempotencyKey"
+                            label="Idempotency Key"
+                            description="The idempotency key to set. It is recommended to use a UUID for this."
+                            tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
+                            readmore="Idempotency Key"
+                        />
+                        <FormCheckbox
+                            v-if="useAppStore().advanced"
+                            v-model="skipValidation"
+                            name="skipValidation"
+                            label="Skip validation"
+                            description="Skip all validation rules, use with caution. Defaults to false."
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex space-x-3 flex-shrink-0 justify-end px-4 py-4">
+            <Btn @click="closeSlide">Cancel</Btn>
+            <Btn :loading="isLoading" :disabled="isLoading" primary is-submit>Create</Btn>
+        </div>
+    </Form>
+</template>
+
+<script setup lang="ts">
+import { Form } from 'vee-validate';
+import * as yup from 'yup';
+import { ref } from 'vue';
+import FormInput from '~/components/FormInput.vue';
+import FormCheckbox from '~/components/FormCheckbox.vue';
+import Btn from '~/components/Btn.vue';
+import { TokenGroupApi } from '~/api/token-group';
+import snackbar from '~/util/snackbar';
+import { formatData, snackbarErrors } from '~/util';
+import { useAppStore } from '~/store';
+import { collectionIdRequiredSchema, stringNotRequiredSchema, booleanNotRequiredSchema } from '~/util/schemas';
+
+const emit = defineEmits(['close']);
+
+const isLoading = ref(false);
+const collectionId = ref('');
+const idempotencyKey = ref('');
+const skipValidation = ref(false);
+const formRef = ref();
+const signingAccount = ref('');
+
+const validation = yup.object({
+    collectionId: collectionIdRequiredSchema,
+    idempotencyKey: stringNotRequiredSchema,
+    skipValidation: booleanNotRequiredSchema,
+});
+
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
+const createTokenGroup = async () => {
+    await formRef.value?.validate();
+    if (!formRef.value?.getMeta().valid) return;
+
+    try {
+        isLoading.value = true;
+        const res = await TokenGroupApi.createTokenGroup(
+            formatData({
+                collectionId: collectionId.value,
+                signingAccount: signingAccount.value,
+                idempotencyKey: idempotencyKey.value,
+                skipValidation: skipValidation.value,
+            })
+        );
+
+        const id = res.data?.CreateTokenGroup?.id;
+        if (id) {
+            snackbar.success({
+                title: 'Token group created',
+                text: `Token group created with transaction id ${id}`,
+                event: id,
+            });
+            closeSlide();
+        }
+    } catch (e) {
+        if (snackbarErrors(e)) return;
+        snackbar.error({
+            title: 'Token group creation',
+            text: 'Token group creation failed',
+        });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const closeSlide = () => {
+    emit('close');
+};
+</script>
diff --git a/resources/js/components/slideovers/token-group/DestroyTokenGroupSlideover.vue b/resources/js/components/slideovers/token-group/DestroyTokenGroupSlideover.vue
new file mode 100644
index 00000000..60bc0943
--- /dev/null
+++ b/resources/js/components/slideovers/token-group/DestroyTokenGroupSlideover.vue
@@ -0,0 +1,141 @@
+<template>
+    <Form
+        ref="formRef"
+        class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
+        :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
+        @submit="destroyTokenGroup"
+    >
+        <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
+            Destroy Token Group
+        </h3>
+        <div class="h-0 flex-1 overflow-y-auto">
+            <div class="flex flex-1 flex-col justify-between">
+                <div class="divide-y divide-light-stroke dark:divide-dark-stroke px-4 sm:px-6">
+                    <div class="space-y-6 pt-6 pb-5">
+                        <FormInput
+                            v-model="tokenGroupId"
+                            name="tokenGroupId"
+                            label="Token Group ID"
+                            description="The ID of the token group to destroy."
+                            type="number"
+                            disabled
+                            required
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="signingAccount"
+                            name="signingAccount"
+                            label="Signing Account"
+                            description="The wallet used to sign and broadcast the transaction. By default, this is the wallet daemon."
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="idempotencyKey"
+                            name="idempotencyKey"
+                            label="Idempotency Key"
+                            description="The idempotency key to set. It is recommended to use a UUID for this."
+                            tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
+                            readmore="Idempotency Key"
+                        />
+                        <FormCheckbox
+                            v-if="useAppStore().advanced"
+                            v-model="skipValidation"
+                            name="skipValidation"
+                            label="Skip validation"
+                            description="Skip all validation rules, use with caution. Defaults to false."
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex space-x-3 flex-shrink-0 justify-end px-4 py-4">
+            <Btn @click="closeSlide">Cancel</Btn>
+            <Btn :loading="isLoading" :disabled="isLoading" primary is-submit>Destroy</Btn>
+        </div>
+    </Form>
+</template>
+
+<script setup lang="ts">
+import { Form } from 'vee-validate';
+import * as yup from 'yup';
+import { ref } from 'vue';
+import FormInput from '~/components/FormInput.vue';
+import FormCheckbox from '~/components/FormCheckbox.vue';
+import Btn from '~/components/Btn.vue';
+import { TokenGroupApi } from '~/api/token-group';
+import snackbar from '~/util/snackbar';
+import { formatData, snackbarErrors } from '~/util';
+import { useAppStore } from '~/store';
+import { stringNotRequiredSchema, booleanNotRequiredSchema } from '~/util/schemas';
+
+const emit = defineEmits(['close']);
+
+const props = withDefaults(
+    defineProps<{
+        item?: {
+            id: string;
+        };
+    }>(),
+    { item: undefined }
+);
+
+const isLoading = ref(false);
+const tokenGroupId = ref(props.item?.id);
+const idempotencyKey = ref('');
+const skipValidation = ref(false);
+const formRef = ref();
+const signingAccount = ref('');
+
+const validation = yup.object({
+    tokenGroupId: yup.number().typeError('Token Group ID must be a number').required(),
+    idempotencyKey: stringNotRequiredSchema,
+    skipValidation: booleanNotRequiredSchema,
+});
+
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
+const destroyTokenGroup = async () => {
+    await formRef.value?.validate();
+    if (!formRef.value?.getMeta().valid) return;
+
+    try {
+        isLoading.value = true;
+        const res = await TokenGroupApi.destroyTokenGroup(
+            formatData({
+                tokenGroupId: props.item?.id,
+                signingAccount: signingAccount.value,
+                idempotencyKey: idempotencyKey.value,
+                skipValidation: skipValidation.value,
+            })
+        );
+
+        const id = res.data?.DestroyTokenGroup?.id;
+        if (id) {
+            snackbar.success({
+                title: 'Token group destroyed',
+                text: `Token group destroyed with transaction id ${id}`,
+                event: id,
+            });
+            closeSlide();
+        }
+    } catch (e) {
+        if (snackbarErrors(e)) return;
+        snackbar.error({
+            title: 'Token group destroy',
+            text: 'Token group destroy failed',
+        });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const closeSlide = () => {
+    emit('close');
+};
+</script>
diff --git a/resources/js/components/slideovers/token-group/DetailsTokenGroupSlideover.vue b/resources/js/components/slideovers/token-group/DetailsTokenGroupSlideover.vue
new file mode 100644
index 00000000..2848922b
--- /dev/null
+++ b/resources/js/components/slideovers/token-group/DetailsTokenGroupSlideover.vue
@@ -0,0 +1,126 @@
+<template>
+    <div
+        class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
+        v-if="item"
+    >
+        <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
+            Token Group Details
+        </h3>
+        <div class="h-0 flex-1 overflow-y-auto">
+            <div class="flex flex-1 flex-col justify-between">
+                <div class="px-4 sm:px-6">
+                    <div class="space-y-2 pt-4 pb-3">
+                        <dt class="text-base font-medium text-light-content dark:text-dark-content">Group ID</dt>
+                        <dd class="mt-1 text-sm text-light-content-strong dark:text-dark-content-strong">
+                            {{ item.id }}
+                        </dd>
+                    </div>
+
+                    <div class="space-y-2 pt-4 pb-3">
+                        <dt class="text-base font-medium text-light-content dark:text-dark-content">Collection ID</dt>
+                        <dd class="mt-1 text-sm text-light-content-strong dark:text-dark-content-strong">
+                            {{ item.collectionId }}
+                        </dd>
+                    </div>
+
+                    <div v-if="item.tokens?.length" class="space-y-2 pt-4 pb-3 overflow-x-scroll">
+                        <dt class="text-base font-medium text-light-content dark:text-dark-content">
+                            Tokens ({{ item.tokens.length }})
+                        </dt>
+                        <table class="divide-y divide-light-stroke dark:divide-dark-stroke">
+                            <thead>
+                                <tr class="divide-x divide-light-stroke dark:divide-dark-stroke">
+                                    <th
+                                        scope="col"
+                                        class="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-0"
+                                    >
+                                        Token ID
+                                    </th>
+                                    <th
+                                        scope="col"
+                                        class="px-4 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                    >
+                                        Position
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody
+                                class="divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary"
+                            >
+                                <tr
+                                    v-for="(entry, idx) in item.tokens"
+                                    :key="idx"
+                                    class="divide-x divide-light-stroke dark:divide-dark-stroke"
+                                >
+                                    <td
+                                        class="py-4 pl-4 pr-4 text-sm font-medium text-light-content-strong dark:text-dark-content-strong sm:pl-0"
+                                    >
+                                        {{ entry.token?.tokenId }}
+                                    </td>
+                                    <td class="p-4 text-sm text-light-content dark:text-dark-content">
+                                        {{ entry.position ?? '-' }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div v-else class="space-y-2 pt-4 pb-3">
+                        <dt class="text-base font-medium text-light-content dark:text-dark-content">Tokens</dt>
+                        <dd class="mt-1 text-sm text-light-content-strong dark:text-dark-content-strong">None</dd>
+                    </div>
+
+                    <div v-if="item.attributes?.length" class="space-y-2 pt-4 pb-3 overflow-x-scroll">
+                        <dt class="text-base font-medium text-light-content dark:text-dark-content">Attributes</dt>
+                        <table class="divide-y divide-light-stroke dark:divide-dark-stroke">
+                            <thead>
+                                <tr class="divide-x divide-light-stroke dark:divide-dark-stroke">
+                                    <th
+                                        scope="col"
+                                        class="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-0"
+                                    >
+                                        Key
+                                    </th>
+                                    <th
+                                        scope="col"
+                                        class="px-4 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                    >
+                                        Value
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody
+                                class="divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary"
+                            >
+                                <tr
+                                    v-for="(attribute, idx) in item.attributes"
+                                    :key="idx"
+                                    class="divide-x divide-light-stroke dark:divide-dark-stroke"
+                                >
+                                    <td
+                                        class="py-4 pl-4 pr-4 text-sm font-medium text-light-content-strong dark:text-dark-content-strong sm:pl-0 break-words"
+                                    >
+                                        {{ attribute.key }}
+                                    </td>
+                                    <td class="p-4 text-sm text-light-content dark:text-dark-content break-words">
+                                        {{ attribute.value }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    item?: {
+        id: string;
+        collectionId: string;
+        tokens: { token: { tokenId: string }; position: number }[];
+        attributes: { key: string; value: string }[];
+    };
+}>();
+</script>
diff --git a/resources/js/components/slideovers/token-group/RemoveTokenFromGroupSlideover.vue b/resources/js/components/slideovers/token-group/RemoveTokenFromGroupSlideover.vue
new file mode 100644
index 00000000..7725adb8
--- /dev/null
+++ b/resources/js/components/slideovers/token-group/RemoveTokenFromGroupSlideover.vue
@@ -0,0 +1,163 @@
+<template>
+    <Form
+        ref="formRef"
+        class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
+        :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
+        @submit="removeTokenFromGroup"
+    >
+        <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
+            Remove Token from Group
+        </h3>
+        <div class="h-0 flex-1 overflow-y-auto">
+            <div class="flex flex-1 flex-col justify-between">
+                <div class="divide-y divide-light-stroke dark:divide-dark-stroke px-4 sm:px-6">
+                    <div class="space-y-6 pt-6 pb-5">
+                        <FormInput
+                            v-model="tokenGroupId"
+                            name="tokenGroupId"
+                            label="Token Group ID"
+                            description="The ID of the token group to remove the token from."
+                            type="number"
+                            disabled
+                            required
+                        />
+                        <FormInput
+                            v-model="collectionId"
+                            name="collectionId"
+                            label="Collection ID"
+                            description="The ID of the collection the token belongs to."
+                            type="number"
+                            required
+                        />
+                        <TokenIdInput
+                            v-model="tokenId"
+                            name="tokenId"
+                            label="Token ID"
+                            description="The ID of the token to remove from the group."
+                            required
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="signingAccount"
+                            name="signingAccount"
+                            label="Signing Account"
+                            description="The wallet used to sign and broadcast the transaction. By default, this is the wallet daemon."
+                        />
+                        <FormInput
+                            v-if="useAppStore().advanced"
+                            v-model="idempotencyKey"
+                            name="idempotencyKey"
+                            label="Idempotency Key"
+                            description="The idempotency key to set. It is recommended to use a UUID for this."
+                            tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
+                            readmore="Idempotency Key"
+                        />
+                        <FormCheckbox
+                            v-if="useAppStore().advanced"
+                            v-model="skipValidation"
+                            name="skipValidation"
+                            label="Skip validation"
+                            description="Skip all validation rules, use with caution. Defaults to false."
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex space-x-3 flex-shrink-0 justify-end px-4 py-4">
+            <Btn @click="closeSlide">Cancel</Btn>
+            <Btn :loading="isLoading" :disabled="isLoading" primary is-submit>Remove Token</Btn>
+        </div>
+    </Form>
+</template>
+
+<script setup lang="ts">
+import { Form } from 'vee-validate';
+import * as yup from 'yup';
+import { ref, Ref } from 'vue';
+import FormInput from '~/components/FormInput.vue';
+import FormCheckbox from '~/components/FormCheckbox.vue';
+import TokenIdInput from '~/components/TokenIdInput.vue';
+import Btn from '~/components/Btn.vue';
+import { TokenGroupApi } from '~/api/token-group';
+import snackbar from '~/util/snackbar';
+import { formatData, formatToken, snackbarErrors } from '~/util';
+import { useAppStore } from '~/store';
+import { collectionIdRequiredSchema, stringNotRequiredSchema, booleanNotRequiredSchema } from '~/util/schemas';
+import { TokenIdSelectType } from '~/types/types.enums';
+import { TokenIdType } from '~/types/types.interface';
+
+const emit = defineEmits(['close']);
+
+const props = withDefaults(
+    defineProps<{
+        item?: {
+            id: string;
+            collectionId: string;
+        };
+    }>(),
+    { item: undefined }
+);
+
+const isLoading = ref(false);
+const tokenGroupId = ref(props.item?.id);
+const collectionId = ref(props.item?.collectionId ?? '');
+const tokenId: Ref<TokenIdType> = ref({ tokenId: '', tokenType: TokenIdSelectType.Integer });
+const idempotencyKey = ref('');
+const skipValidation = ref(false);
+const formRef = ref();
+const signingAccount = ref('');
+
+const validation = yup.object({
+    tokenGroupId: yup.number().typeError('Token Group ID must be a number').required(),
+    collectionId: collectionIdRequiredSchema,
+    tokenId: stringNotRequiredSchema,
+    idempotencyKey: stringNotRequiredSchema,
+    skipValidation: booleanNotRequiredSchema,
+});
+
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
+const removeTokenFromGroup = async () => {
+    await formRef.value?.validate();
+    if (!formRef.value?.getMeta().valid) return;
+
+    try {
+        isLoading.value = true;
+        const res = await TokenGroupApi.removeTokenFromGroup(
+            formatData({
+                collectionId: collectionId.value,
+                tokenId: formatToken(tokenId.value),
+                tokenGroupId: props.item?.id,
+                signingAccount: signingAccount.value,
+                idempotencyKey: idempotencyKey.value,
+                skipValidation: skipValidation.value,
+            })
+        );
+
+        const id = res.data?.RemoveTokenFromGroup?.id;
+        if (id) {
+            snackbar.success({
+                title: 'Token removed from group',
+                text: `Token removed with transaction id ${id}`,
+                event: id,
+            });
+            closeSlide();
+        }
+    } catch (e) {
+        if (snackbarErrors(e)) return;
+        snackbar.error({ title: 'Remove token from group', text: 'Removing token from group failed' });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const closeSlide = () => {
+    emit('close');
+};
+</script>
diff --git a/resources/js/factory/token-group.ts b/resources/js/factory/token-group.ts
new file mode 100644
index 00000000..3b13cbbd
--- /dev/null
+++ b/resources/js/factory/token-group.ts
@@ -0,0 +1,30 @@
+export class DTOTokenGroupFactory {
+    public static buildTokenGroup(tokenGroup: any) {
+        return {
+            ...tokenGroup,
+            collectionId: tokenGroup.collection?.collectionId,
+            tokensCount: tokenGroup.tokens?.length ?? 0,
+            attributesCount: tokenGroup.attributes?.length ?? 0,
+        };
+    }
+
+    public static forTokenGroups(tokenGroupsData: any) {
+        const tokenGroups = tokenGroupsData.data.GetTokenGroups;
+
+        return {
+            items: tokenGroups?.edges?.map((edge: any) => {
+                return DTOTokenGroupFactory.buildTokenGroup(edge.node);
+            }),
+            cursor: tokenGroups.pageInfo?.hasNextPage ? tokenGroups.pageInfo.endCursor : null,
+        };
+    }
+
+    public static forTokenGroup(tokenGroupData: any) {
+        const tokenGroup = tokenGroupData.data.GetTokenGroup;
+
+        return {
+            items: [DTOTokenGroupFactory.buildTokenGroup(tokenGroup)],
+            cursor: null,
+        };
+    }
+}
diff --git a/resources/js/graphql/mutation/token-group/AddTokenToGroup.ts b/resources/js/graphql/mutation/token-group/AddTokenToGroup.ts
new file mode 100644
index 00000000..957cebe3
--- /dev/null
+++ b/resources/js/graphql/mutation/token-group/AddTokenToGroup.ts
@@ -0,0 +1,12 @@
+export default `mutation AddTokenToGroup($collectionId: BigInt!, $tokenId: EncodableTokenIdInput!, $tokenGroupId: BigInt!, $signingAccount: String, $idempotencyKey: String, $skipValidation: Boolean! = false) {
+    AddTokenToGroup(
+      collectionId: $collectionId
+      tokenId: $tokenId
+      tokenGroupId: $tokenGroupId
+      signingAccount: $signingAccount
+      idempotencyKey: $idempotencyKey
+      skipValidation: $skipValidation
+    ) {
+      id
+    }
+}`;
diff --git a/resources/js/graphql/mutation/token-group/CreateTokenGroup.ts b/resources/js/graphql/mutation/token-group/CreateTokenGroup.ts
new file mode 100644
index 00000000..23a498e3
--- /dev/null
+++ b/resources/js/graphql/mutation/token-group/CreateTokenGroup.ts
@@ -0,0 +1,10 @@
+export default `mutation CreateTokenGroup($collectionId: BigInt!, $signingAccount: String, $idempotencyKey: String, $skipValidation: Boolean! = false) {
+    CreateTokenGroup(
+      collectionId: $collectionId
+      signingAccount: $signingAccount
+      idempotencyKey: $idempotencyKey
+      skipValidation: $skipValidation
+    ) {
+      id
+    }
+}`;
diff --git a/resources/js/graphql/mutation/token-group/DestroyTokenGroup.ts b/resources/js/graphql/mutation/token-group/DestroyTokenGroup.ts
new file mode 100644
index 00000000..01e65fe7
--- /dev/null
+++ b/resources/js/graphql/mutation/token-group/DestroyTokenGroup.ts
@@ -0,0 +1,10 @@
+export default `mutation DestroyTokenGroup($tokenGroupId: BigInt!, $signingAccount: String, $idempotencyKey: String, $skipValidation: Boolean! = false) {
+    DestroyTokenGroup(
+      tokenGroupId: $tokenGroupId
+      signingAccount: $signingAccount
+      idempotencyKey: $idempotencyKey
+      skipValidation: $skipValidation
+    ) {
+      id
+    }
+}`;
diff --git a/resources/js/graphql/mutation/token-group/RemoveTokenFromGroup.ts b/resources/js/graphql/mutation/token-group/RemoveTokenFromGroup.ts
new file mode 100644
index 00000000..6549a4a5
--- /dev/null
+++ b/resources/js/graphql/mutation/token-group/RemoveTokenFromGroup.ts
@@ -0,0 +1,12 @@
+export default `mutation RemoveTokenFromGroup($collectionId: BigInt!, $tokenId: EncodableTokenIdInput!, $tokenGroupId: BigInt!, $signingAccount: String, $idempotencyKey: String, $skipValidation: Boolean! = false) {
+    RemoveTokenFromGroup(
+      collectionId: $collectionId
+      tokenId: $tokenId
+      tokenGroupId: $tokenGroupId
+      signingAccount: $signingAccount
+      idempotencyKey: $idempotencyKey
+      skipValidation: $skipValidation
+    ) {
+      id
+    }
+}`;
diff --git a/resources/js/graphql/mutation/token-group/RemoveTokenGroupAttribute.ts b/resources/js/graphql/mutation/token-group/RemoveTokenGroupAttribute.ts
new file mode 100644
index 00000000..acdbf9c0
--- /dev/null
+++ b/resources/js/graphql/mutation/token-group/RemoveTokenGroupAttribute.ts
@@ -0,0 +1,11 @@
+export default `mutation RemoveTokenGroupAttribute($tokenGroupId: BigInt!, $key: String!, $signingAccount: String, $idempotencyKey: String, $skipValidation: Boolean! = false) {
+    RemoveTokenGroupAttribute(
+      tokenGroupId: $tokenGroupId
+      key: $key
+      signingAccount: $signingAccount
+      idempotencyKey: $idempotencyKey
+      skipValidation: $skipValidation
+    ) {
+      id
+    }
+}`;
diff --git a/resources/js/graphql/mutation/token-group/SetTokenGroupAttribute.ts b/resources/js/graphql/mutation/token-group/SetTokenGroupAttribute.ts
new file mode 100644
index 00000000..f7591e30
--- /dev/null
+++ b/resources/js/graphql/mutation/token-group/SetTokenGroupAttribute.ts
@@ -0,0 +1,12 @@
+export default `mutation SetTokenGroupAttribute($tokenGroupId: BigInt!, $key: String!, $value: String!, $signingAccount: String, $idempotencyKey: String, $skipValidation: Boolean! = false) {
+    SetTokenGroupAttribute(
+      tokenGroupId: $tokenGroupId
+      key: $key
+      value: $value
+      signingAccount: $signingAccount
+      idempotencyKey: $idempotencyKey
+      skipValidation: $skipValidation
+    ) {
+      id
+    }
+}`;
diff --git a/resources/js/graphql/mutation/token-group/SetTokenGroups.ts b/resources/js/graphql/mutation/token-group/SetTokenGroups.ts
new file mode 100644
index 00000000..69521d2f
--- /dev/null
+++ b/resources/js/graphql/mutation/token-group/SetTokenGroups.ts
@@ -0,0 +1,12 @@
+export default `mutation SetTokenGroups($collectionId: BigInt!, $tokenId: EncodableTokenIdInput!, $tokenGroups: [BigInt!]!, $signingAccount: String, $idempotencyKey: String, $skipValidation: Boolean! = false) {
+    SetTokenGroups(
+      collectionId: $collectionId
+      tokenId: $tokenId
+      tokenGroups: $tokenGroups
+      signingAccount: $signingAccount
+      idempotencyKey: $idempotencyKey
+      skipValidation: $skipValidation
+    ) {
+      id
+    }
+}`;
diff --git a/resources/js/graphql/query/token-group/GetTokenGroup.ts b/resources/js/graphql/query/token-group/GetTokenGroup.ts
new file mode 100644
index 00000000..3a65aa2b
--- /dev/null
+++ b/resources/js/graphql/query/token-group/GetTokenGroup.ts
@@ -0,0 +1,18 @@
+export default `query GetTokenGroup($collectionId: BigInt!, $tokenGroupId: BigInt!) {
+    GetTokenGroup(collectionId: $collectionId, tokenGroupId: $tokenGroupId) {
+        id
+        collection {
+            collectionId
+        }
+        attributes {
+            key
+            value
+        }
+        tokens {
+            token {
+                tokenId
+            }
+            position
+        }
+    }
+}`;
diff --git a/resources/js/graphql/query/token-group/GetTokenGroups.ts b/resources/js/graphql/query/token-group/GetTokenGroups.ts
new file mode 100644
index 00000000..87044a58
--- /dev/null
+++ b/resources/js/graphql/query/token-group/GetTokenGroups.ts
@@ -0,0 +1,27 @@
+export default `query GetTokenGroups($collectionId: BigInt, $after: String, $first: Int) {
+    GetTokenGroups(collectionId: $collectionId, after: $after, first: $first) {
+        edges {
+            node {
+                id
+                collection {
+                    collectionId
+                }
+                attributes {
+                    key
+                    value
+                }
+                tokens {
+                    token {
+                        tokenId
+                    }
+                    position
+                }
+            }
+            cursor
+        }
+        pageInfo {
+            hasNextPage
+            endCursor
+        }
+    }
+}`;
diff --git a/resources/js/router/index.ts b/resources/js/router/index.ts
index f59bfc63..1a9307fb 100644
--- a/resources/js/router/index.ts
+++ b/resources/js/router/index.ts
@@ -34,6 +34,15 @@ const routes = [
             requiresToken: true,
         },
     },
+    {
+        path: '/token-groups',
+        name: 'platform.token-groups',
+        component: () => import('../components/pages/TokenGroups.vue'),
+        meta: {
+            requiresAuth: true,
+            requiresToken: true,
+        },
+    },
     {
         path: '/transactions',
         name: 'platform.transactions',
diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
index 5cb40607..88d9b7f1 100644
--- a/resources/js/store/index.ts
+++ b/resources/js/store/index.ts
@@ -29,6 +29,7 @@ export const useAppStore = defineStore('app', {
         navigations: [
             { name: 'Collections', to: { name: 'platform.collections' }, pos: 1 },
             { name: 'Tokens', to: { name: 'platform.tokens' }, pos: 2 },
+            { name: 'Token Groups', to: { name: 'platform.token-groups' }, pos: 3 },
             { name: 'Transactions', to: { name: 'platform.transactions' }, count: true, pos: 6 },
             { name: 'Wallets', to: { name: 'platform.wallets' }, pos: 7 },
         ],