diff --git a/bun.lock b/bun.lock
index 31870ae..ea40b5f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -23,6 +23,7 @@
         "@tauri-apps/plugin-dialog": "^2.4.0",
         "@tauri-apps/plugin-opener": "^2",
         "@tauri-apps/plugin-sql": "~2",
+        "@vueuse/core": "^14.0.0",
         "fuse.js": "^7.1.0",
         "marked": "^16.3.0",
         "shiki": "^3.13.0",
@@ -296,6 +297,8 @@
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
+    "@types/web-bluetooth": ["@types/web-bluetooth@0.0.21", "", {}, "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="],
+
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
 
     "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.1", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ=="],
@@ -318,6 +321,12 @@
 
     "@vue/shared": ["@vue/shared@3.5.22", "", {}, "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w=="],
 
+    "@vueuse/core": ["@vueuse/core@14.0.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.0.0", "@vueuse/shared": "14.0.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ=="],
+
+    "@vueuse/metadata": ["@vueuse/metadata@14.0.0", "", {}, "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA=="],
+
+    "@vueuse/shared": ["@vueuse/shared@14.0.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw=="],
+
     "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
diff --git a/desktop/package.json b/desktop/package.json
index 9aa0599..3a901e0 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -14,6 +14,7 @@
     "@tauri-apps/plugin-dialog": "^2.4.0",
     "@tauri-apps/plugin-opener": "^2",
     "@tauri-apps/plugin-sql": "~2",
+    "@vueuse/core": "^14.0.0",
     "fuse.js": "^7.1.0",
     "marked": "^16.3.0",
     "shiki": "^3.13.0",
diff --git a/desktop/src/components/ContentEditable.vue b/desktop/src/components/ContentEditable.vue
deleted file mode 100644
index 350b95e..0000000
--- a/desktop/src/components/ContentEditable.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from 'vue';
-
-interface Props {
-  modelValue: string;
-  placeholder?: string;
-  minHeight?: string;
-  disabled?: boolean;
-  autofocus?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: '',
-  minHeight: '120px',
-  disabled: false,
-  autofocus: false,
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string];
-  keydown: [event: KeyboardEvent];
-}>();
-
-const editableRef = ref<HTMLDivElement | null>(null);
-const showPlaceholder = ref(true);
-
-const handleInput = () => {
-  if (!editableRef.value) return;
-
-  const text = editableRef.value.innerText;
-  showPlaceholder.value = text.length === 0;
-  emit('update:modelValue', text);
-};
-
-const handleKeydown = (e: KeyboardEvent) => {
-  emit('keydown', e);
-};
-
-const updateContent = (newValue: string) => {
-  if (!editableRef.value) return;
-
-  // Only update if different to avoid cursor jumping
-  if (editableRef.value.innerText !== newValue) {
-    editableRef.value.innerText = newValue;
-  }
-
-  showPlaceholder.value = newValue.trim().length === 0;
-};
-
-// Focus if autofocus is enabled
-onMounted(() => {
-  if (props.autofocus && editableRef.value) {
-    nextTick(() => {
-      editableRef.value?.focus();
-    });
-  }
-
-  // Initialize placeholder state
-  updateContent(props.modelValue);
-});
-
-// Watch for external changes to modelValue
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    updateContent(newValue);
-  },
-);
-
-// Expose focus method for parent components
-defineExpose({
-  focus: () => editableRef.value?.focus(),
-});
-</script>
-
-<template>
-  <div class="content-editable-wrapper">
-    <div
-      ref="editableRef"
-      contenteditable
-      @input="handleInput"
-      @keydown="handleKeydown"
-      :class="['content-editable', { 'content-editable-disabled': disabled }]"
-      :style="{ minHeight }"
-      :aria-disabled="disabled"
-      role="textbox"
-      aria-multiline="true"
-    ></div>
-    <div v-if="showPlaceholder" class="placeholder">{{ placeholder }}</div>
-  </div>
-</template>
-
-<style scoped>
-.content-editable-wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.content-editable {
-  width: 100%;
-  background-color: transparent;
-  color: var(--color-text-primary);
-  border: 2px solid var(--color-border);
-  font-size: 1rem;
-  line-height: 1.6;
-  transition:
-    border-color 0.2s,
-    background-color 0.2s;
-  border-radius: 0.5rem;
-  padding: 0.75rem;
-  outline: none;
-  box-sizing: border-box;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-.content-editable:empty:before {
-  content: '';
-}
-
-.placeholder {
-  position: absolute;
-  top: 0.75rem;
-  left: 0.75rem;
-  color: var(--color-text-secondary);
-  pointer-events: none;
-  font-size: 1rem;
-  line-height: 1.6;
-}
-
-.content-editable:hover:not(.content-editable-disabled) {
-  border-color: var(--color-border-hover);
-  background-color: var(--color-surface);
-}
-
-.content-editable:focus:not(.content-editable-disabled),
-.content-editable:focus-visible:not(.content-editable-disabled) {
-  border-color: var(--color-border-active);
-}
-
-.content-editable-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  user-select: none;
-}
-
-.content-editable-disabled[contenteditable] {
-  -webkit-user-modify: read-only;
-}
-</style>
diff --git a/desktop/src/components/NoteCreator.vue b/desktop/src/components/NoteCreator.vue
index baedbe1..5be1150 100644
--- a/desktop/src/components/NoteCreator.vue
+++ b/desktop/src/components/NoteCreator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import Button from './Button.vue';
-import ContentEditable from './ContentEditable.vue';
+import Textarea from './Textarea.vue';
 
 const noteContent = ref('');
 
@@ -16,6 +16,7 @@ const canPost = computed(() => {
 });
 
 const createNote = () => {
+  console.log(noteContent.value);
   if (canPost.value) {
     emit('create', noteContent.value);
     noteContent.value = '';
@@ -32,11 +33,12 @@ const handleKeydown = (e: KeyboardEvent) => {
 <template>
   <div class="note-creator">
     <!-- Input Area -->
-    <ContentEditable
+    <Textarea
+      class="textarea"
       v-model="noteContent"
       @keydown="handleKeydown"
-      placeholder="Share your thoughts..."
-      min-height="120px"
+      placeholder="What's on your mind?"
+      :rows="2"
     />
 
     <!-- Actions -->
diff --git a/desktop/src/components/NoteItem.vue b/desktop/src/components/NoteItem.vue
index 4873b01..1df5bee 100644
--- a/desktop/src/components/NoteItem.vue
+++ b/desktop/src/components/NoteItem.vue
@@ -2,7 +2,7 @@
 import { ref, onMounted, watch } from 'vue';
 import { renderMarkdown } from '../utils/markdown';
 import Button from './Button.vue';
-import ContentEditable from './ContentEditable.vue';
+import Textarea from './Textarea.vue';
 import ConfirmModal from './ConfirmModal.vue';
 import '../styles/markdown.css';
 
@@ -210,7 +210,7 @@ const formatDate = (date: Date) => {
       ></div>
 
       <div v-if="isEditing" class="edit-container">
-        <ContentEditable
+        <Textarea
           v-model="editContent"
           @keydown="handleEditKeydown"
           autofocus
diff --git a/desktop/src/components/Textarea.vue b/desktop/src/components/Textarea.vue
new file mode 100644
index 0000000..1e0dfeb
--- /dev/null
+++ b/desktop/src/components/Textarea.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useTextareaAutosize } from '@vueuse/core';
+
+interface Props {
+  modelValue: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autofocus?: boolean;
+  rows?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '',
+  disabled: false,
+  autofocus: false,
+  rows: 2,
+  modelValue: '',
+});
+
+const { textarea, input } = useTextareaAutosize({
+  styleProp: 'minHeight',
+  input: props.modelValue,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  keydown: [event: KeyboardEvent];
+}>();
+
+const handleInput = (e: Event) => {
+  const target = e.target as HTMLTextAreaElement;
+  emit('update:modelValue', target.value);
+};
+
+const handleKeydown = (e: KeyboardEvent) => {
+  emit('keydown', e);
+};
+</script>
+
+<template>
+  <textarea
+    ref="textarea"
+    v-model="input"
+    @input="handleInput"
+    @keydown="handleKeydown"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :autofocus="autofocus"
+    :rows="rows"
+    class="textarea"
+  ></textarea>
+</template>
+
+<style scoped>
+.textarea {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  width: 100%;
+  background-color: transparent;
+  color: var(--color-text-primary);
+  border: 2px solid var(--color-border);
+  font-size: 1rem;
+  line-height: 1.6;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  outline: none;
+  box-sizing: border-box;
+  font-family: inherit;
+  resize: none;
+  overflow-y: hidden;
+}
+
+.textarea::-webkit-scrollbar {
+  display: none;
+}
+
+.textarea::placeholder {
+  color: var(--color-text-secondary);
+  opacity: 1;
+}
+
+.textarea:hover:not(:disabled) {
+  border-color: var(--color-border-hover);
+  background-color: var(--color-surface);
+}
+
+.textarea:focus:not(:disabled),
+.textarea:focus-visible:not(:disabled) {
+  border-color: var(--color-border-active);
+}
+
+.textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  user-select: none;
+}
+</style>