diff --git a/components/ui/button/Button.vue b/components/ui/button/Button.vue
index 17dc84d..52459d9 100644
--- a/components/ui/button/Button.vue
+++ b/components/ui/button/Button.vue
@@ -1,20 +1,3 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { type ButtonVariants, buttonVariants } from '.'
-
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
-})
-</script>
-
 <template>
   <Primitive
     :as="as"
@@ -24,3 +7,20 @@ const props = withDefaults(defineProps<Props>(), {
     <slot />
   </Primitive>
 </template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Primitive, type PrimitiveProps } from 'reka-ui';
+import { type ButtonVariants, buttonVariants } from '.';
+import { cn } from '@/lib/utils';
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant'];
+  size?: ButtonVariants['size'];
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+});
+</script>
diff --git a/components/ui/button/index.ts b/components/ui/button/index.ts
index aa6014c..80cd812 100644
--- a/components/ui/button/index.ts
+++ b/components/ui/button/index.ts
@@ -1,6 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority'
+import { type VariantProps, cva } from 'class-variance-authority';
 
-export { default as Button } from './Button.vue'
+export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
@@ -30,6 +30,6 @@ export const buttonVariants = cva(
       size: 'default',
     },
   },
-)
+);
 
-export type ButtonVariants = VariantProps<typeof buttonVariants>
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
diff --git a/components/ui/calendar/Calendar.vue b/components/ui/calendar/Calendar.vue
index abd7691..4a0da43 100644
--- a/components/ui/calendar/Calendar.vue
+++ b/components/ui/calendar/Calendar.vue
@@ -1,22 +1,3 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
-
-const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<CalendarRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
 <template>
   <CalendarRoot
     v-slot="{ grid, weekDays }"
@@ -58,3 +39,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     </div>
   </CalendarRoot>
 </template>
+
+<script lang="ts" setup>
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>();
+
+const emits = defineEmits<CalendarRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
diff --git a/components/ui/calendar/CalendarCell.vue b/components/ui/calendar/CalendarCell.vue
index 2bf95fc..56bb2c9 100644
--- a/components/ui/calendar/CalendarCell.vue
+++ b/components/ui/calendar/CalendarCell.vue
@@ -1,19 +1,3 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
 <template>
   <CalendarCell
     :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)"
@@ -22,3 +6,19 @@ const forwardedProps = useForwardProps(delegatedProps)
     <slot />
   </CalendarCell>
 </template>
+
+<script lang="ts" setup>
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
diff --git a/components/ui/calendar/CalendarCellTrigger.vue b/components/ui/calendar/CalendarCellTrigger.vue
index 57a3190..6c2cd79 100644
--- a/components/ui/calendar/CalendarCellTrigger.vue
+++ b/components/ui/calendar/CalendarCellTrigger.vue
@@ -1,20 +1,3 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
 <template>
   <CalendarCellTrigger
     :class="cn(
@@ -36,3 +19,20 @@ const forwardedProps = useForwardProps(delegatedProps)
     <slot />
   </CalendarCellTrigger>
 </template>
+
+<script lang="ts" setup>
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
diff --git a/components/ui/calendar/CalendarGrid.vue b/components/ui/calendar/CalendarGrid.vue
index e0e6d56..f0e24aa 100644
--- a/components/ui/calendar/CalendarGrid.vue
+++ b/components/ui/calendar/CalendarGrid.vue
@@ -1,19 +1,3 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
 <template>
   <CalendarGrid
     :class="cn('w-full border-collapse space-y-1', props.class)"
@@ -22,3 +6,19 @@ const forwardedProps = useForwardProps(delegatedProps)
     <slot />
   </CalendarGrid>
 </template>
+
+<script lang="ts" setup>
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
diff --git a/components/ui/calendar/CalendarGridBody.vue b/components/ui/calendar/CalendarGridBody.vue
index d746afc..17cf4ed 100644
--- a/components/ui/calendar/CalendarGridBody.vue
+++ b/components/ui/calendar/CalendarGridBody.vue
@@ -1,11 +1,11 @@
-<script lang="ts" setup>
-import { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui'
-
-const props = defineProps<CalendarGridBodyProps>()
-</script>
-
 <template>
   <CalendarGridBody v-bind="props">
     <slot />
   </CalendarGridBody>
 </template>
+
+<script lang="ts" setup>
+import { CalendarGridBody, type CalendarGridBodyProps } from 'reka-ui';
+
+const props = defineProps<CalendarGridBodyProps>();
+</script>
diff --git a/components/ui/calendar/CalendarGridHead.vue b/components/ui/calendar/CalendarGridHead.vue
index e590ff9..fb8961f 100644
--- a/components/ui/calendar/CalendarGridHead.vue
+++ b/components/ui/calendar/CalendarGridHead.vue
@@ -1,12 +1,12 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'
-
-const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()
-</script>
-
 <template>
   <CalendarGridHead v-bind="props">
     <slot />
   </CalendarGridHead>
 </template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui';
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>();
+</script>
diff --git a/components/ui/calendar/CalendarGridRow.vue b/components/ui/calendar/CalendarGridRow.vue
index bfd91e6..0df26a5 100644
--- a/components/ui/calendar/CalendarGridRow.vue
+++ b/components/ui/calendar/CalendarGridRow.vue
@@ -1,21 +1,21 @@
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
+
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
-
-<template>
-  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
-    <slot />
-  </CalendarGridRow>
-</template>
diff --git a/components/ui/calendar/CalendarHeadCell.vue b/components/ui/calendar/CalendarHeadCell.vue
index edbc52b..c7757f8 100644
--- a/components/ui/calendar/CalendarHeadCell.vue
+++ b/components/ui/calendar/CalendarHeadCell.vue
@@ -1,21 +1,21 @@
+<template>
+  <CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
+
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
-
-<template>
-  <CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
-    <slot />
-  </CalendarHeadCell>
-</template>
diff --git a/components/ui/calendar/CalendarHeader.vue b/components/ui/calendar/CalendarHeader.vue
index 3e716f0..4c05688 100644
--- a/components/ui/calendar/CalendarHeader.vue
+++ b/components/ui/calendar/CalendarHeader.vue
@@ -1,21 +1,21 @@
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
+
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
-
-<template>
-  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
-    <slot />
-  </CalendarHeader>
-</template>
diff --git a/components/ui/calendar/CalendarHeading.vue b/components/ui/calendar/CalendarHeading.vue
index f20acf5..ca7d721 100644
--- a/components/ui/calendar/CalendarHeading.vue
+++ b/components/ui/calendar/CalendarHeading.vue
@@ -1,23 +1,3 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
-
-defineSlots<{
-  default: (props: { headingValue: string }) => any
-}>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
 <template>
   <CalendarHeading
     v-slot="{ headingValue }"
@@ -29,3 +9,23 @@ const forwardedProps = useForwardProps(delegatedProps)
     </slot>
   </CalendarHeading>
 </template>
+
+<script lang="ts" setup>
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any;
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
diff --git a/components/ui/calendar/CalendarNextButton.vue b/components/ui/calendar/CalendarNextButton.vue
index 172d549..a385bdc 100644
--- a/components/ui/calendar/CalendarNextButton.vue
+++ b/components/ui/calendar/CalendarNextButton.vue
@@ -1,21 +1,3 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
-import { ChevronRightIcon } from '@radix-icons/vue'
-import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
 <template>
   <CalendarNext
     :class="cn(
@@ -30,3 +12,21 @@ const forwardedProps = useForwardProps(delegatedProps)
     </slot>
   </CalendarNext>
 </template>
+
+<script lang="ts" setup>
+import { ChevronRightIcon } from '@radix-icons/vue';
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { buttonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
diff --git a/components/ui/calendar/CalendarPrevButton.vue b/components/ui/calendar/CalendarPrevButton.vue
index dcc4517..c4d6d69 100644
--- a/components/ui/calendar/CalendarPrevButton.vue
+++ b/components/ui/calendar/CalendarPrevButton.vue
@@ -1,21 +1,3 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
-import { ChevronLeftIcon } from '@radix-icons/vue'
-import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
 <template>
   <CalendarPrev
     :class="cn(
@@ -30,3 +12,21 @@ const forwardedProps = useForwardProps(delegatedProps)
     </slot>
   </CalendarPrev>
 </template>
+
+<script lang="ts" setup>
+import { ChevronLeftIcon } from '@radix-icons/vue';
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui';
+import { type HTMLAttributes, computed } from 'vue';
+import { buttonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
diff --git a/components/ui/calendar/index.ts b/components/ui/calendar/index.ts
index 5239a1b..f8209a1 100644
--- a/components/ui/calendar/index.ts
+++ b/components/ui/calendar/index.ts
@@ -1,12 +1,12 @@
-export { default as Calendar } from './Calendar.vue'
-export { default as CalendarCell } from './CalendarCell.vue'
-export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
-export { default as CalendarGrid } from './CalendarGrid.vue'
-export { default as CalendarGridBody } from './CalendarGridBody.vue'
-export { default as CalendarGridHead } from './CalendarGridHead.vue'
-export { default as CalendarGridRow } from './CalendarGridRow.vue'
-export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
-export { default as CalendarHeader } from './CalendarHeader.vue'
-export { default as CalendarHeading } from './CalendarHeading.vue'
-export { default as CalendarNextButton } from './CalendarNextButton.vue'
-export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
+export { default as Calendar } from './Calendar.vue';
+export { default as CalendarCell } from './CalendarCell.vue';
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue';
+export { default as CalendarGrid } from './CalendarGrid.vue';
+export { default as CalendarGridBody } from './CalendarGridBody.vue';
+export { default as CalendarGridHead } from './CalendarGridHead.vue';
+export { default as CalendarGridRow } from './CalendarGridRow.vue';
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue';
+export { default as CalendarHeader } from './CalendarHeader.vue';
+export { default as CalendarHeading } from './CalendarHeading.vue';
+export { default as CalendarNextButton } from './CalendarNextButton.vue';
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue';
diff --git a/lib/utils.ts b/lib/utils.ts
index 4c51992..b9032c0 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,15 +1,15 @@
-import type { Updater } from '@tanstack/vue-table'
-import type { Ref } from 'vue'
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import type { Updater } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value
     = typeof updaterOrValue === 'function'
       ? updaterOrValue(ref.value)
-      : updaterOrValue
+      : updaterOrValue;
 }
diff --git a/pages/content/index.vue b/pages/content/index.vue
index 5c9a941..0dfe54d 100644
--- a/pages/content/index.vue
+++ b/pages/content/index.vue
@@ -121,12 +121,12 @@
                     </DialogContent>
                   </Dialog>
                 </TableCell>
-                <TableCell class="flex item-center justify-center mt-2">
+                <TableCell class="flex justify-left mt-2">
                   <Badge :variant="TransState(content.state).color">
                     {{ TransState(content.state).text }}
                     <!-- { `bg-[${TransState(content.state).color}]` }}{ -->
                   </Badge>
-                  <Dialog class="w-[40vw]">
+                  <Dialog>
                     <DialogTrigger as-child>
                       <!-- 现在是审核按钮 -->
                       <BookmarkCheck
diff --git a/pages/device.vue b/pages/device.vue
index a546596..1bfd806 100644
--- a/pages/device.vue
+++ b/pages/device.vue
@@ -232,7 +232,7 @@ import {
   Users,
 } from 'lucide-vue-next';
 import { toast } from 'vue-sonner';
-import { computed, reactive, ref, unref } from 'vue';
+import { reactive, ref } from 'vue';
 import {
   Dialog,
   DialogClose,
diff --git a/server/trpc/controllers/device.ts b/server/trpc/controllers/device.ts
index b225ca5..1bdad53 100644
--- a/server/trpc/controllers/device.ts
+++ b/server/trpc/controllers/device.ts
@@ -21,6 +21,7 @@ export class DeviceController {
       .where(eq(devices.id, id));
     return '设备名修改成功';
   }
+
   async bindProgram(id: number, programId: number) {
     await db.update(devices)
       .set({ programId })