diff --git a/components/card/MarkdownRenderer.client.vue b/components/card/MarkdownRenderer.client.vue
index 56073ab..097f8c3 100644
--- a/components/card/MarkdownRenderer.client.vue
+++ b/components/card/MarkdownRenderer.client.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
 	interface Props {
 		content: string
+		state: string
 	}
 
 	const props = defineProps<Props>()
-	const parsedMarkdown = stringToMarkdown(props.content)
+
+	const description = useDescription()
+	const parsedMarkdown = computed(() => {
+		return stringToMarkdown(description.value)
+	})
 </script>
 
 <template>
-	<div class="h-content bg-secondary overflow-y-scroll p-4">
+	<div class="bg-secondary h-full w-full overflow-y-scroll p-4">
 		<div
-			class="prose prose-invert overflow-scroll"
+			class="prose prose-invert h-full max-h-full"
 			v-html="parsedMarkdown">
 		</div>
 	</div>
diff --git a/composables/note.ts b/composables/note.ts
index bfd6033..0a38c8c 100644
--- a/composables/note.ts
+++ b/composables/note.ts
@@ -24,4 +24,6 @@ const submitNote = async (
 const useNote = () =>
 	useState<Note>('note', () => Object({ title: '', description: '' }))
 
-export { submitNote, useNote }
+const useDescription = () => useState<string>('description', () => '')
+
+export { submitNote, useNote, useDescription }