diff --git a/src/components/settingComponents/generalPage.jsx b/src/components/settingComponents/generalPage.jsx
index de55bbf..48c217f 100644
--- a/src/components/settingComponents/generalPage.jsx
+++ b/src/components/settingComponents/generalPage.jsx
@@ -11,7 +11,7 @@ import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import Markdown from 'react-markdown';
+import { MarkdownViewer } from '@/components/MarkdownViewer';
 import { Context } from '@/context';
 import { useContext } from 'react';
 import { CheckIcon } from '@heroicons/react/20/solid';
@@ -691,7 +691,7 @@ export default function General() {
                     Bio Preview
                   </label>
                   <div className="mt-2 rounded-lg bg-neutral-800 p-4 text-white">
-                    <Markdown>{tempBio}</Markdown>
+                    <MarkdownViewer content={tempBio}></MarkdownViewer>
                   </div>
                 </div>
               )}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index a663aa3..4c1b538 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -34,11 +34,7 @@
 
 @layer utilities {
   .markdown {
-    @apply break-words;
-  }
-  
-  .markdown p {
-    @apply leading-10;
+    @apply break-words space-y-2;
   }
 
   .markdown h1 {
@@ -70,7 +66,7 @@
   }
 
   .markdown p {
-    @apply leading-8;
+    @apply leading-7;
   }
 
   .markdown underline {
@@ -94,7 +90,7 @@
   }
 
   .markdown li {
-    @apply leading-10 pl-2 marker:font-bold;
+    @apply leading-7 pl-2 marker:font-bold;
   }
 
   .markdown blockquote {