diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
index 4ff97c2..1a528f3 100644
--- a/frontend/pages/product/[id].vue
+++ b/frontend/pages/product/[id].vue
@@ -1,9 +1,20 @@
 <script lang="ts" setup>
 
+// import
+
 import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
 import useGetProduct from "~/composables/api/product/useGetProduct";
 import useGetComments from "~/composables/api/product/useGetComments";
 
+// type
+
+export type ProductVariantProvideType = {
+    selectedVariant: Ref<ProductVariant>,
+    changeSelectedVariant: (value: ProductVariant) => void
+}
+
+// state
+
 const route = useRoute();
 
 const id = route.params.id as string | undefined;
@@ -12,6 +23,15 @@ const page = ref(1);
 const { suspense: suspenseProduct } = useGetProduct(id);
 const { suspense: suspenseComments } = useGetComments(id, page);
 
+const selectedVariant = ref<ProductVariant>();
+
+// provide / inject
+
+provide("productVariant", {
+    selectedVariant,
+    changeSelectedVariant: (value: ProductVariant) => selectedVariant.value = value
+});
+
 // ssr
 
 const productResponse = await suspenseProduct();
@@ -27,7 +47,7 @@ if (productResponse.isError || commentsResponse.isError) {
 </script>
 
 <template>
-    <div class="w-full flex flex-col gap-20">
+    <div class="w-full flex flex-col ">
         <ProductHero />
         <ProductVideo />
         <ProductComments />