diff --git a/src/components/InputCopyable.vue b/src/components/InputCopyable.vue
index 0c689097..db26f458 100644
--- a/src/components/InputCopyable.vue
+++ b/src/components/InputCopyable.vue
@@ -11,7 +11,7 @@ const { copy } = useClipboard({ source: value });
 
 function onCopyClicked() {
   copy();
-  tooltipText.value = 'Copied !';
+  tooltipText.value = 'Copied!';
 
   setTimeout(() => {
     tooltipText.value = 'Copy to clipboard';
diff --git a/src/tools/case-converter/case-converter.vue b/src/tools/case-converter/case-converter.vue
index 1a2e3af0..e43744ca 100644
--- a/src/tools/case-converter/case-converter.vue
+++ b/src/tools/case-converter/case-converter.vue
@@ -19,62 +19,88 @@ const baseConfig = {
 };
 
 const input = ref('lorem ipsum dolor sit amet');
+
+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="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',
   },
 });