diff --git a/fe/src/components/ui/box/index.ts b/fe/src/components/ui/box/index.ts
index 99af555..1582e30 100644
--- a/fe/src/components/ui/box/index.ts
+++ b/fe/src/components/ui/box/index.ts
@@ -1 +1 @@
-export { default as Box } from "./Box.vue";
+export { default as Box } from "./box.vue";
diff --git a/fe/src/docs/pages/box.vue b/fe/src/docs/pages/box.vue
index d7bd998..3c1213b 100644
--- a/fe/src/docs/pages/box.vue
+++ b/fe/src/docs/pages/box.vue
@@ -45,7 +45,7 @@ import {
     <SectionContent>
       Copy and paste the following code into your project.
     </SectionContent>
-    <PreviewCode title="components/ui/box/Box.vue">
+    <PreviewCode title="components/ui/box/box.vue">
       {{ `
       <script lang="ts" setup>
 import { cn } from "@mykopkb/core/utils/cn";
@@ -80,7 +80,7 @@ const {
     </PreviewCode>
     <PreviewCode title="components/ui/box/index.ts">
       {{ `
-      export { default as Box } from "./Box.vue";
+      export { default as Box } from "./box.vue";
       ` }}
     </PreviewCode>
     <SectionContent>