diff --git a/src/tools/case-converter/case-converter.vue b/src/tools/case-converter/case-converter.vue
index cca06063..e43744ca 100644
--- a/src/tools/case-converter/case-converter.vue
+++ b/src/tools/case-converter/case-converter.vue
@@ -20,66 +20,87 @@ const baseConfig = {
 
 const input = ref('lorem ipsum dolor sit amet');
 
-// Using noCase to convert to lowercase and uppercase to ensure consistent splitting
-const toLowerCase = (str: string) => noCase(str, baseConfig).toLocaleLowerCase();
-const toUpperCase = (str: string) => noCase(str, baseConfig).toLocaleUpperCase();
+const formats = computed(() => [
+  {
+    label: 'Lowercase:',
+    value: noCase(input.value, baseConfig).toLocaleLowerCase(),
+  },
+  {
+    label: 'Uppercase:',
+    value: noCase(input.value, baseConfig).toLocaleUpperCase(),
+  },
+  {
+    label: 'Camelcase:',
+    value: camelCase(input.value, baseConfig),
+  },
+  {
+    label: 'Capitalcase:',
+    value: capitalCase(input.value, baseConfig),
+  },
+  {
+    label: 'Constantcase:',
+    value: constantCase(input.value, baseConfig),
+  },
+  {
+    label: 'Dotcase:',
+    value: dotCase(input.value, baseConfig),
+  },
+  {
+    label: 'Headercase:',
+    value: headerCase(input.value, baseConfig),
+  },
+  {
+    label: 'Nocase:',
+    value: noCase(input.value, baseConfig),
+  },
+  {
+    label: 'Paramcase:',
+    value: paramCase(input.value, baseConfig),
+  },
+  {
+    label: 'Pascalcase:',
+    value: pascalCase(input.value, baseConfig),
+  },
+  {
+    label: 'Pathcase:',
+    value: pathCase(input.value, baseConfig),
+  },
+  {
+    label: 'Sentencecase:',
+    value: sentenceCase(input.value, baseConfig),
+  },
+  {
+    label: 'Snakecase:',
+    value: snakeCase(input.value, baseConfig),
+  },
+]);
+
+const inputLabelAlignmentConfig = {
+  labelPosition: 'left',
+  labelWidth: '120px',
+  labelAlign: 'right',
+};
 </script>
 
 <template>
   <c-card>
-    <n-form label-width="120" label-placement="left" :show-feedback="false">
-      <c-input-text
-        v-model:value="input" label="Your string" label-position="left" label-width="120px"
-        label-align="right" placeholder="Your string..." raw-text
-      />
+    <c-input-text
+      v-model:value="input"
+      label="Your string:"
+      placeholder="Your string..."
+      raw-text
+      v-bind="inputLabelAlignmentConfig"
+    />
 
-      <n-divider />
+    <div divider my-16px />
 
-      <n-form-item label="Lowercase:">
-        <InputCopyable :value="toLowerCase(input)" />
-      </n-form-item>
-      <n-form-item label="Uppercase:">
-        <InputCopyable :value="toUpperCase(input)" />
-      </n-form-item>
-      <n-form-item label="Camelcase:">
-        <InputCopyable :value="camelCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Capitalcase:">
-        <InputCopyable :value="capitalCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Constantcase:">
-        <InputCopyable :value="constantCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Dotcase:">
-        <InputCopyable :value="dotCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Headercase:">
-        <InputCopyable :value="headerCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Nocase:">
-        <InputCopyable :value="noCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Paramcase:">
-        <InputCopyable :value="paramCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Pascalcase:">
-        <InputCopyable :value="pascalCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Pathcase:">
-        <InputCopyable :value="pathCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Sentencecase:">
-        <InputCopyable :value="sentenceCase(input, baseConfig)" />
-      </n-form-item>
-      <n-form-item label="Snakecase:">
-        <InputCopyable :value="snakeCase(input, baseConfig)" />
-      </n-form-item>
-    </n-form>
+    <InputCopyable
+      v-for="format in formats"
+      :key="format.label"
+      :value="format.value"
+      :label="format.label"
+      v-bind="inputLabelAlignmentConfig"
+      mb-1
+    />
   </c-card>
 </template>
-
-<style lang="less" scoped>
-.n-form-item {
-  margin: 5px 0;
-}
-</style>
diff --git a/unocss.config.ts b/unocss.config.ts
index 0ce8f705..6da68739 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -19,5 +19,6 @@ export default defineConfig({
   },
   shortcuts: {
     'pretty-scrollbar': 'scrollbar scrollbar-rounded scrollbar-thumb-color-gray-300 scrollbar-track-color-gray-100 dark:scrollbar-thumb-color-#424242 dark:scrollbar-track-color-#686868',
+    'divider': 'h-1px bg-current op-10',
   },
 });