diff --git a/frontend/components/ui/Button.vue b/frontend/components/global/Button.vue
similarity index 100%
rename from frontend/components/ui/Button.vue
rename to frontend/components/global/Button.vue
diff --git a/frontend/components/ui/ColorCircle.vue b/frontend/components/global/ColorCircle.vue
similarity index 100%
rename from frontend/components/ui/ColorCircle.vue
rename to frontend/components/global/ColorCircle.vue
diff --git a/frontend/components/ui/Input.vue b/frontend/components/global/Input.vue
similarity index 100%
rename from frontend/components/ui/Input.vue
rename to frontend/components/global/Input.vue
diff --git a/frontend/components/ui/OtpInput.vue b/frontend/components/global/OtpInput.vue
similarity index 100%
rename from frontend/components/ui/OtpInput.vue
rename to frontend/components/global/OtpInput.vue
diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
new file mode 100644
index 0000000..4b90cf4
--- /dev/null
+++ b/frontend/components/global/Pagination.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts"></script>
+
+<template>
+    <PaginationRoot>
+        <PaginationList v-slot="{ items }">
+            <PaginationFirst />
+            <PaginationPrev />
+            <template v-for="(page, index) in items">
+                <PaginationListItem v-if="page.type === 'page'" :key="index" />
+                <PaginationEllipsis v-else :key="page.type" :index="index">
+                    &#8230;
+                </PaginationEllipsis>
+            </template>
+            <PaginationNext />
+            <PaginationLast />
+        </PaginationList>
+    </PaginationRoot>
+</template>
+
+<style scoped></style>
diff --git a/frontend/components/global/ProductColor.vue b/frontend/components/global/ProductColor.vue
index f500e02..8e23343 100644
--- a/frontend/components/global/ProductColor.vue
+++ b/frontend/components/global/ProductColor.vue
@@ -2,7 +2,7 @@
 
 // types
 
-import ColorCircle from "~/components/ui/ColorCircle.vue";
+import ColorCircle from "~/components/global/ColorCircle.vue";
 
 type Props = {
     colors: string[];
diff --git a/frontend/components/ui/Rate.vue b/frontend/components/global/Rate.vue
similarity index 100%
rename from frontend/components/ui/Rate.vue
rename to frontend/components/global/Rate.vue
diff --git a/frontend/components/ui/Tag.vue b/frontend/components/global/Tag.vue
similarity index 100%
rename from frontend/components/ui/Tag.vue
rename to frontend/components/global/Tag.vue
diff --git a/frontend/components/ui/ToastContainer/ToastBox.vue b/frontend/components/global/ToastContainer/ToastBox.vue
similarity index 100%
rename from frontend/components/ui/ToastContainer/ToastBox.vue
rename to frontend/components/global/ToastContainer/ToastBox.vue
diff --git a/frontend/components/ui/ToastContainer/index.vue b/frontend/components/global/ToastContainer/index.vue
similarity index 100%
rename from frontend/components/ui/ToastContainer/index.vue
rename to frontend/components/global/ToastContainer/index.vue
diff --git a/frontend/components/ui/Tooltip.vue b/frontend/components/global/Tooltip.vue
similarity index 100%
rename from frontend/components/ui/Tooltip.vue
rename to frontend/components/global/Tooltip.vue
diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index 9de0525..3b63c85 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 // import
 
-import Tag from "~/components/ui/Tag.vue";
-import Rate from "~/components/ui/Rate.vue";
-import ColorCircle from "~/components/ui/ColorCircle.vue";
+import Tag from "~/components/global/Tag.vue";
+import Rate from "~/components/global/Rate.vue";
+import ColorCircle from "~/components/global/ColorCircle.vue";
 
 // types
 
diff --git a/frontend/composables/useAuth.ts b/frontend/composables/api/auth/useAuth.ts
similarity index 100%
rename from frontend/composables/useAuth.ts
rename to frontend/composables/api/auth/useAuth.ts
diff --git a/frontend/composables/api/branch/useCreateBranch.ts b/frontend/composables/api/branch/useCreateBranch.ts
deleted file mode 100644
index 1d891b2..0000000
--- a/frontend/composables/api/branch/useCreateBranch.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// imports
-
-import { useMutation } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS } from "~/constants";
-
-// types
-
-export type CreateBranchRequest = {
-    name: string;
-    description: string;
-};
-
-// methods
-
-export const handleCreateBranch = async ({ name, description }: CreateBranchRequest) => {
-    const payload: CreateBranchRequest = {
-        name,
-        description,
-    };
-
-    await axios.post<CreateBranchRequest>(API_ENDPOINTS.branch.createBranch, payload);
-};
-
-// composable
-
-const useCreateBranch = () => {
-    return useMutation({
-        mutationFn: (data: CreateBranchRequest) => handleCreateBranch(data),
-    });
-};
-
-export default useCreateBranch;
diff --git a/frontend/composables/api/branch/useGetBranch.ts b/frontend/composables/api/branch/useGetBranch.ts
deleted file mode 100644
index 50228b2..0000000
--- a/frontend/composables/api/branch/useGetBranch.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// imports
-
-import { useQuery } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
-import type { ComputedRef } from "vue";
-
-// types
-
-export type GetBranchResponse = Branch;
-
-// methods
-
-export const handleGetBranch = async (
-    branchId: string,
-    page: string | undefined,
-    folderId: string | undefined,
-    sort: string | undefined,
-    signal: AbortSignal
-) => {
-
-    const { data } = await axios.get<GetBranchResponse>(`${API_ENDPOINTS.branch.get}/${branchId}`, {
-        signal,
-        params: {
-            sort_by: sort,
-            folder_id: folderId,
-            offset: ((!!page ? Number(page) : 1) * 20) - 20,
-            limit: 20
-        }
-    });
-    return data;
-};
-
-// composable
-
-const useGetBranch = (
-    branchId: ComputedRef<string>,
-    page: ComputedRef<string | undefined>,
-    folderId: ComputedRef<string | undefined>,
-    sort: ComputedRef<string | undefined>
-) => {
-    return useQuery({
-        queryKey: [QUERY_KEYS.branch, branchId, page, folderId, sort],
-        queryFn: ({ signal }) => handleGetBranch(
-            branchId.value,
-            page.value,
-            folderId.value,
-            sort.value,
-            signal
-        )
-    });
-};
-
-export default useGetBranch;
diff --git a/frontend/composables/api/branch/useGetBranches.ts b/frontend/composables/api/branch/useGetBranches.ts
deleted file mode 100644
index d665d7a..0000000
--- a/frontend/composables/api/branch/useGetBranches.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// imports
-
-import { useQuery } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
-
-// types
-
-export type GetBranchesResponse = Branch[];
-
-// methods
-
-export const handleGetBranches = async () => {
-    const { data } = await axios.get<GetBranchesResponse>(`${API_ENDPOINTS.branch.getAll}`);
-
-    return data;
-};
-
-// composable
-
-const useGetBranches = () => {
-    return useQuery({
-        staleTime: 60 * 1000,
-        queryKey: [QUERY_KEYS.branches],
-        queryFn: () => handleGetBranches()
-    });
-};
-
-export default useGetBranches;
diff --git a/frontend/composables/api/branch/useGetUserBranches.ts b/frontend/composables/api/branch/useGetUserBranches.ts
deleted file mode 100644
index 42d928e..0000000
--- a/frontend/composables/api/branch/useGetUserBranches.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// imports
-
-import { useQuery } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
-
-// types
-
-export type GetUserBranchesResponse = Branch[];
-
-// methods
-
-export const handleGetUserBranches = async () => {
-    const { data } = await axios.get<GetUserBranchesResponse>(
-        `${API_ENDPOINTS.branch.getUserBranches}`
-    );
-
-    return data;
-};
-
-// composable
-
-const useGetUserBranches = () => {
-    return useQuery({
-        staleTime: 60 * 1000,
-        queryKey: [QUERY_KEYS.userBranches],
-        queryFn: () => handleGetUserBranches(),
-    });
-};
-
-export default useGetUserBranches;
diff --git a/frontend/composables/api/chat/useCreateChatMessage.ts b/frontend/composables/api/chat/useCreateChatMessage.ts
deleted file mode 100644
index 87f5da6..0000000
--- a/frontend/composables/api/chat/useCreateChatMessage.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-// imports
-
-import { QueryClient, useMutation } from "@tanstack/vue-query";
-import type { InfiniteData } from "@tanstack/vue-query";
-import { API_ENDPOINTS, MUTATION_KEYS, QUERY_KEYS } from "~/constants";
-
-// types
-
-export type CreateChatMessageRequest = {
-    productId: string | number;
-    new_message: string;
-};
-
-export type CreateChatMessageResponse = Chat[]
-
-const useCreateChatMessage = (queryClient: QueryClient) => {
-
-    // state
-
-    const { $axios: axios } = useNuxtApp();
-
-    // method
-
-    const handleCreateChatMessage = async (variables: CreateChatMessageRequest) => {
-
-        const { data } = await axios.post<CreateChatMessageResponse>(`${API_ENDPOINTS.chat.new_message}/${variables.productId}`, variables);
-        return data;
-    };
-
-    return useMutation({
-        mutationKey: [MUTATION_KEYS.create_chat],
-        mutationFn: (variables: CreateChatMessageRequest) => handleCreateChatMessage(variables),
-        onMutate: (newMessage) => {
-            const prevData = queryClient.getQueriesData({ queryKey: [QUERY_KEYS.chat] });
-
-            queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>([QUERY_KEYS.chat], (oldData) => {
-                const lastPage = oldData!.pages[oldData!.pages.length - 1];
-
-                return {
-                    pages: [
-                        {
-                            count: lastPage.count,
-                            next: lastPage.next,
-                            previous: lastPage.previous,
-                            results: [
-                                {
-                                    id: Date.now(),
-                                    content: newMessage.new_message,
-                                    sender: "user"
-                                }
-                            ]
-                        },
-                        ...oldData!.pages
-                    ],
-                    pageParams: [
-                        ...oldData!.pageParams,
-                        {
-                            limit: 10,
-                            offset: 0
-                        }
-                    ]
-                };
-            });
-
-
-            return { prevData: prevData ? prevData[0][1] : undefined };
-        },
-        onSuccess: (response) => {
-
-            queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>([QUERY_KEYS.chat], (oldData) => {
-                if (oldData) {
-                    const lastPage = oldData!.pages[oldData!.pages.length - 1];
-
-                    return {
-                        pages: [
-                            {
-                                count: lastPage.count,
-                                next: lastPage.next,
-                                previous: lastPage.previous,
-                                results: {
-                                    ...response[0],
-                                    id: Date.now()
-                                }
-                            },
-                            ...oldData!.pages
-                        ],
-                        pageParams: [
-                            ...oldData!.pageParams,
-                            {
-                                limit: 10,
-                                offset: 0
-                            }
-                        ]
-                    };
-                }
-
-                return oldData;
-            });
-
-        },
-        onError: (err, newMessage, context) => {
-            if (context) {
-                queryClient.setQueryData(
-                    [QUERY_KEYS.chat],
-                    context.prevData
-                );
-            }
-        },
-        onSettled: (newMessage) => {
-            queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.chat] });
-        }
-    });
-};
-
-export default useCreateChatMessage;
diff --git a/frontend/composables/api/chat/useGetChat.ts b/frontend/composables/api/chat/useGetChat.ts
deleted file mode 100644
index 32a6da1..0000000
--- a/frontend/composables/api/chat/useGetChat.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-// imports
-
-import { useInfiniteQuery } from "@tanstack/vue-query";
-import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
-
-// types
-
-export type GetBranchResponse = ApiPaginated<Chat>;
-
-const useGetBranch = (
-    productId: string | number,
-    enabled: Ref<boolean>
-) => {
-
-    // state
-
-    const { $axios: axios } = useNuxtApp();
-
-    // method
-
-    const handleGetChat = async ({ productId, limit, offset }: {
-        productId: number | string,
-        limit: number,
-        offset: number
-    }) => {
-
-        const { data } = await axios.get<GetBranchResponse>(`${API_ENDPOINTS.chat.messages}/${productId}`, {
-            params: {
-                offset,
-                limit
-            },
-            headers: {
-                Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoyMTY3ODE2OTAwLCJpYXQiOjE3MzU4MTY5MDAsImp0aSI6ImQwN2E2Y2Y2NzgwZjRlNTE5NWIzOGQxMTAzYzU4NDQ3IiwidXNlcl9pZCI6NX0.slwd7ZSV7nUXEuDTYwwHUOo9ekCefwEEL4kVv2vSTFo`
-            }
-        });
-        return data;
-    };
-
-    return useInfiniteQuery({
-        enabled,
-        queryKey: [QUERY_KEYS.chat],
-        initialPageParam: {
-            limit: 10,
-            offset: 0
-        },
-        queryFn: ({ pageParam }) => handleGetChat({
-            limit: pageParam.limit,
-            offset: pageParam.offset,
-            productId: productId
-        }),
-        getNextPageParam: (lastPage, pages) => {
-            if (!lastPage.next) return undefined;
-
-            return {
-                limit: 10,
-                offset: pages.length * 10
-            };
-        }
-    });
-};
-
-export default useGetBranch;
diff --git a/frontend/composables/api/documents/useAddDoc.ts b/frontend/composables/api/documents/useAddDoc.ts
deleted file mode 100644
index ed1675f..0000000
--- a/frontend/composables/api/documents/useAddDoc.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// imports
-
-import { useMutation } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS } from "~/constants";
-
-// types
-
-export type AddDocRequest = {
-    name: string,
-    parent?: string,
-    branch: string | undefined,
-    type: {
-        title: "File" | "Folder",
-        icon: "bi:folder" | "bi:file-earmark"
-    },
-    content: File | undefined
-};
-
-// methods
-
-export const handleAddDoc = async (variables: AddDocRequest & { updateUploadProgress: (p: number) => void }) => {
-    const { data } = await axios.post<AddDocRequest>(`${API_ENDPOINTS.branch.getDoc}/`, {
-        ...variables,
-        type: variables.type.title.toLocaleLowerCase()
-    }, {
-        onUploadProgress: (progressEvent) => {
-            variables.updateUploadProgress(progressEvent.progress!);
-        },
-        headers: {
-            "Content-Type": "multipart/form-data"
-        }
-    });
-    return data;
-};
-
-// composable
-
-const useAddDoc = () => {
-    return useMutation({
-        mutationFn: (variables: AddDocRequest & { updateUploadProgress: (p: number) => void }) => handleAddDoc(variables)
-    });
-};
-
-export default useAddDoc;
diff --git a/frontend/composables/api/documents/useDeleteDoc.ts b/frontend/composables/api/documents/useDeleteDoc.ts
deleted file mode 100644
index d241169..0000000
--- a/frontend/composables/api/documents/useDeleteDoc.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// imports
-
-import { useMutation } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS } from "~/constants";
-
-// types
-
-export type DeleteDocRequest = {
-    id: number
-};
-
-// methods
-
-export const handleDeleteDoc = async ({ id }: { id: string | undefined }) => {
-    await axios.delete<DeleteDocRequest>(`${API_ENDPOINTS.branch.getDoc}/${id}`);
-};
-
-// composable
-
-const useDeleteDoc = (id: Ref<string | undefined>) => {
-    return useMutation({
-        mutationFn: () => handleDeleteDoc({ id: id.value })
-    });
-};
-
-export default useDeleteDoc;
diff --git a/frontend/composables/api/documents/useEditDoc.ts b/frontend/composables/api/documents/useEditDoc.ts
deleted file mode 100644
index 786962e..0000000
--- a/frontend/composables/api/documents/useEditDoc.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// imports
-
-import { useMutation } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS } from "~/constants";
-
-// types
-
-export type EditDocRequest = {
-    id: number
-};
-
-// methods
-
-export const handleEditDoc = async ({ id, name }: { id: string | undefined, name: string | undefined }) => {
-    await axios.patch<EditDocRequest>(`${API_ENDPOINTS.branch.getDoc}/${id}`, { name });
-};
-
-// composable
-
-const useEditDoc = (id: Ref<string | undefined>) => {
-    return useMutation({
-        mutationFn: ({ name }: { name: Ref<string | undefined> }) => {
-            return handleEditDoc({ id: id.value, name: name.value });
-        }
-    });
-};
-
-export default useEditDoc;
diff --git a/frontend/composables/api/documents/useGetDoc.ts b/frontend/composables/api/documents/useGetDoc.ts
deleted file mode 100644
index 582ab02..0000000
--- a/frontend/composables/api/documents/useGetDoc.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// imports
-
-import { useQuery } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
-
-// types
-
-export type GetDocResponse = DocumentStructure;
-
-// methods
-
-export const handleGetDoc = async (id : string | undefined) => {
-    const { data } = await axios.get<GetDocResponse>(`${API_ENDPOINTS.branch.getDoc}/${id}`);
-    return data;
-};
-
-// composable
-
-const useGetDoc = (id: ComputedRef<string | undefined>) => {
-
-    const enabled = computed(() => {
-        return !!id.value
-    });
-
-    return useQuery({
-        enabled,
-        queryKey: [QUERY_KEYS.document, id],
-        queryFn: () => handleGetDoc(id.value)
-    });
-};
-
-export default useGetDoc;
diff --git a/frontend/composables/api/documents/useMoveDoc.ts b/frontend/composables/api/documents/useMoveDoc.ts
deleted file mode 100644
index 91d26ce..0000000
--- a/frontend/composables/api/documents/useMoveDoc.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// imports
-
-import { useMutation } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS } from "~/constants";
-
-// types
-
-export type MoveDocRequest = {
-    itemsToMove: number[] | string[],
-    parent: number | string
-};
-
-// methods
-
-export const handleMoveDoc = async ({ itemsToMove, parent }: MoveDocRequest) => {
-    const apiUrl = `${API_ENDPOINTS.branch.moveDoc}?new_parent_id=${parent}&${itemsToMove.map(i => `patch_list=${i}&`)}`
-    const splittedUrl = apiUrl.split("");
-    splittedUrl.pop()
-
-    await axios.patch<MoveDocRequest>(splittedUrl.join("").replaceAll(",", ""));
-};
-
-// composable
-
-const useMoveDoc = () => {
-    return useMutation({
-        mutationFn: (variables: MoveDocRequest) => handleMoveDoc(variables)
-    });
-};
-
-export default useMoveDoc;
diff --git a/frontend/composables/api/documents/useReplyDoc.ts b/frontend/composables/api/documents/useReplyDoc.ts
deleted file mode 100644
index 774077d..0000000
--- a/frontend/composables/api/documents/useReplyDoc.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// imports
-
-import { useMutation } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS } from "~/constants";
-
-// types
-
-export type ReplyDocRequest = {
-    user_id: number;
-    message: string;
-    reply_id: number;
-};
-
-export type ReplyDocResponse = {
-    chat_id: number;
-};
-
-// methods
-
-export const handleReplyDoc = async ({ user_id, message, reply_id }: ReplyDocRequest) => {
-    const payload = {
-        user_id,
-        message,
-        item_id: reply_id,
-    };
-
-    const { data } = await axios.post<ReplyDocResponse>(API_ENDPOINTS.branch.replyDoc, payload);
-    return data;
-};
-
-// composable
-
-const useReplyDoc = () => {
-    return useMutation({
-        mutationFn: (data: ReplyDocRequest) => handleReplyDoc(data),
-    });
-};
-
-export default useReplyDoc;
diff --git a/frontend/composables/api/documents/useSearchFile.ts b/frontend/composables/api/documents/useSearchFile.ts
deleted file mode 100644
index 4563efe..0000000
--- a/frontend/composables/api/documents/useSearchFile.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-// imports
-
-import { useInfiniteQuery } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
-import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
-import type { ComputedRef } from "vue";
-
-// types
-
-export type SearchFileResponse = Branch;
-
-type HandlerProps = typeof initialPageParam & {
-    signal: AbortSignal,
-    search: string,
-    id: number | undefined;
-    sort: string | undefined;
-}
-
-// state
-
-const initialPageParam = {
-    limit: 10,
-    offset: 0
-};
-
-// methods
-
-export const handleSearchFile = async ({ search, offset, limit, id, signal, sort }: HandlerProps) => {
-    const { data } = await axios.get<SearchFileResponse>(`${API_ENDPOINTS.branch.get}/${id}`, {
-        params: {
-            offset,
-            limit,
-            search,
-            sort_by: sort
-        },
-        signal
-    });
-    return data;
-};
-
-// composable
-
-const useSearchFile = (search: Ref<string>, id: Ref<number | undefined>, sort: ComputedRef<string | undefined>) => {
-
-    const enabled = computed(() => {
-        return search.value.trim() != "" && !!id.value;
-    });
-
-    return useInfiniteQuery({
-        enabled,
-        retry: false,
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-        queryKey: [QUERY_KEYS.searchFile, search, id, sort],
-        queryFn: ({ pageParam, signal }) => handleSearchFile({
-            ...pageParam,
-            signal,
-            search: search.value,
-            sort: sort.value,
-            id: id.value
-        }),
-        initialPageParam,
-        getNextPageParam: (lastPage, pages) => {
-            const page = pages.length + 1;
-
-            const limit = initialPageParam.limit;
-
-            const nextPageParams = {
-                offset: page * limit - limit,
-                limit
-            };
-
-            return lastPage?.structure.next ? nextPageParams : undefined;
-        }
-    });
-};
-
-export default useSearchFile;
\ No newline at end of file
diff --git a/frontend/composables/useBaseUrl.ts b/frontend/composables/api/global/useBaseUrl.ts
similarity index 100%
rename from frontend/composables/useBaseUrl.ts
rename to frontend/composables/api/global/useBaseUrl.ts
diff --git a/frontend/composables/useImageColor.ts b/frontend/composables/api/global/useImageColor.ts
similarity index 100%
rename from frontend/composables/useImageColor.ts
rename to frontend/composables/api/global/useImageColor.ts
diff --git a/frontend/composables/useTimer.ts b/frontend/composables/api/global/useTimer.ts
similarity index 100%
rename from frontend/composables/useTimer.ts
rename to frontend/composables/api/global/useTimer.ts
diff --git a/frontend/composables/useToast.ts b/frontend/composables/api/global/useToast.ts
similarity index 100%
rename from frontend/composables/useToast.ts
rename to frontend/composables/api/global/useToast.ts
diff --git a/frontend/composables/api/products/useGetProducts.ts b/frontend/composables/api/products/useGetProducts.ts
new file mode 100644
index 0000000..e69de29