diff --git a/components/card/MarkdownRenderer.client.vue b/components/card/MarkdownRenderer.client.vue
deleted file mode 100644
index 339a4db..0000000
--- a/components/card/MarkdownRenderer.client.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-	interface Props {
-		content: string
-		state: string
-	}
-
-	const props = defineProps<Props>()
-
-	const description = useDescription()
-	const parsedMarkdown = computed(() => {
-		return stringToMarkdown(description.value)
-	})
-</script>
-
-<template>
-	<div class="bg-secondary h-full min-h-screen w-full overflow-y-scroll p-4">
-		<div
-			class="prose prose-invert h-full max-h-full"
-			v-html="parsedMarkdown">
-		</div>
-	</div>
-</template>
diff --git a/components/card/MarkdownRenderer.vue b/components/card/MarkdownRenderer.vue
new file mode 100644
index 0000000..27c3598
--- /dev/null
+++ b/components/card/MarkdownRenderer.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const note = useNote()
+const parsedMarkdown = computed(() => {
+    return stringToMarkdown(note.value.description)
+})
+</script>
+
+<template>
+    <div class="bg-secondary flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll p-4">
+        <div class="h-full max-h-full w-full" v-html="parsedMarkdown">
+        </div>
+    </div>
+</template>
+
+<style scoped>
+:deep(*) {
+    @apply text-[#E6EDF3];
+}
+
+:deep(h1),
+:deep(h2),
+:deep(h3),
+:deep(h4),
+:deep(h5),
+:deep(h6) {
+    @apply border-lightgray border-b pb-2;
+}
+
+:deep(h1) {
+    @apply text-4xl;
+}
+
+:deep(h2) {
+    @apply text-2xl;
+}
+
+:deep(h3) {
+    @apply text-lg;
+}
+
+:deep(h4) {
+    @apply text-base;
+}
+
+:deep(h5) {
+    @apply text-sm;
+}
+
+:deep(h6) {
+    @apply text-xs;
+}
+
+:deep(li input) {
+    @apply my-0;
+}
+
+:deep(pre) {
+    @apply bg-lightgray;
+}
+</style>
diff --git a/composables/markdown.ts b/composables/markdown.ts
index e692f5e..04660b7 100644
--- a/composables/markdown.ts
+++ b/composables/markdown.ts
@@ -2,11 +2,11 @@ import { micromark } from 'micromark'
 import { gfm, gfmHtml } from 'micromark-extension-gfm'
 
 const stringToMarkdown = (string: string) => {
-	const parsedMarkdown = micromark(string, {
-		extensions: [gfm()],
-		htmlExtensions: [gfmHtml()],
-	})
-	return parsedMarkdown
+    const parsedMarkdown = micromark(string, {
+        extensions: [gfm()],
+        htmlExtensions: [gfmHtml()],
+    })
+    return parsedMarkdown
 }
 
 export { stringToMarkdown }