diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 81adfb7..67ff8d2 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,6 +1,7 @@
 ---
 import siteConfig from '@/site-config'
 import '@/styles/global.css'
+import '@/styles/prose.css'
 import '@/styles/dot.css'
 
 interface Props {
diff --git a/src/content/pages/page-1.md b/src/content/pages/page-1.md
index 340a51d..10c1c15 100644
--- a/src/content/pages/page-1.md
+++ b/src/content/pages/page-1.md
@@ -1,6 +1,33 @@
 ---
-title: Sponsor
-description: How to sponsor for me.
+title: Page Title
 ---
 
-Writing...
+The main content of your article
+
+## h2
+
+The main content of your article
+
+### h3
+
+The main content of your article
+
+#### h4
+
+The main content of your article
+
+##### h5
+
+The main content of your article
+
+###### h6
+
+The main content of your article
+
+| Field | Req | Description |
+| :---- | :-- | :-----------|
+| NAME | Yes | Displayed in header and footer. Used in SEO and RSS. |
+| EMAIL | Yes | Displayed in contact section. |
+| NUM_POSTS | Yes | Limit num of posts on home page. |
+| NUM_WORKS | Yes | Limit num of works on home page. |
+| NUM_PROJECTS | Yes | Limit num of projects on home page. |
diff --git a/src/content/pages/page-2.md b/src/content/pages/page-2.md
index 340a51d..87dad5e 100644
--- a/src/content/pages/page-2.md
+++ b/src/content/pages/page-2.md
@@ -1,6 +1,5 @@
 ---
-title: Sponsor
-description: How to sponsor for me.
+title: Page Title
 ---
 
 Writing...
diff --git a/src/site-config.ts b/src/site-config.ts
index 8ede02b..ce1a06b 100644
--- a/src/site-config.ts
+++ b/src/site-config.ts
@@ -90,15 +90,19 @@ export const siteConfig = {
   footer: {
     navLinks: [
       {
-        text: 'Sponsor to Me',
-        href: 'https://kaivanwong.me/sponsor/',
+        text: 'Page Title',
+        href: '/page-1',
       },
       {
-        text: 'Astro Website',
-        href: 'https://astro.build/',
+        text: 'Page Title',
+        href: '/page-2',
       },
       {
-        text: 'Theme page in Astro',
+        text: '404 Page',
+        href: '/404',
+      },
+      {
+        text: 'Vitesse Theme Link',
         href: 'https://astro.build/themes/details/vitesse-theme-for-astro/',
       },
       {
diff --git a/src/styles/global.css b/src/styles/global.css
index 5bb123c..430d7c5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -34,30 +34,10 @@ img {
   --at-apply: rd-1.5;
 }
 
-.prose {
-  --at-apply: mb-16 max-w-none min-h-60;
+article {
+  --at-apply: sm: min-h-38 min-h-28;
 }
 
 .prose-link i {
   --at-apply: text-sm mr-1;
 }
-
-.prose a {
-  --at-apply: prose-link;
-}
-
-.prose h1 {
-  --at-apply: text-9 mb-4 text-title;
-}
-
-.prose h2 {
-  --at-apply: mt-16 mb-4 text-6;
-}
-
-.prose h3 {
-  --at-apply: mt-10 mb-4 text-5;
-}
-
-article {
-  --at-apply: sm: min-h-38 min-h-28;
-}
diff --git a/src/styles/prose.css b/src/styles/prose.css
new file mode 100644
index 0000000..6317b8d
--- /dev/null
+++ b/src/styles/prose.css
@@ -0,0 +1,488 @@
+.prose {
+  --at-apply: mb-16 max-w-none sm: min-h-50vh min-h-38vh;
+}
+.prose {
+  max-width: 65ch;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+.prose [class~='lead'] {
+  color: #4b5563;
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+.prose a {
+  --at-apply: prose-link;
+}
+.prose strong {
+  font-weight: 600;
+}
+.prose ol[type='A'] {
+  --list-counter-style: upper-alpha;
+}
+.prose ol[type='a'] {
+  --list-counter-style: lower-alpha;
+}
+.prose ol[type='A s'] {
+  --list-counter-style: upper-alpha;
+}
+.prose ol[type='a s'] {
+  --list-counter-style: lower-alpha;
+}
+.prose ol[type='I'] {
+  --list-counter-style: upper-roman;
+}
+.prose ol[type='i'] {
+  --list-counter-style: lower-roman;
+}
+.prose ol[type='I s'] {
+  --list-counter-style: upper-roman;
+}
+.prose ol[type='i s'] {
+  --list-counter-style: lower-roman;
+}
+.prose ol[type='1'] {
+  --list-counter-style: decimal;
+}
+.prose ol > li {
+  position: relative;
+  padding-left: 1.75em;
+}
+.prose ol > li::before {
+  content: counter(list-item, var(--list-counter-style, decimal)) '.';
+  position: absolute;
+  font-weight: 400;
+  color: #6b7280;
+  left: 0;
+}
+.prose ul > li {
+  position: relative;
+  padding-left: 1.75em;
+}
+.prose ul > li::before {
+  content: '';
+  position: absolute;
+  background-color: #d1d5db;
+  border-radius: 50%;
+  width: 0.375em;
+  height: 0.375em;
+  top: calc(0.875em - 0.1875em);
+  left: 0.25em;
+}
+.prose hr {
+  border-color: rgba(125, 125, 125, 0.3);
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+.prose blockquote {
+  font-weight: 500;
+  font-style: italic;
+  color: inherit;
+  border-left-width: 0.25rem;
+  border-color: rgba(125, 125, 125, 0.3);
+  quotes: '\201C' '\201D' '\2018' '\2019';
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+.prose blockquote p:first-of-type::before {
+  content: open-quote;
+}
+.prose blockquote p:last-of-type::after {
+  content: close-quote;
+}
+.prose h1 {
+  font-weight: 800;
+  font-size: 2.25em;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+.prose h2 {
+  font-weight: 700;
+  font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.3333333;
+}
+.prose h3 {
+  color: inherit;
+  font-weight: 600;
+  font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+  opacity: 0.7;
+}
+.prose h4 {
+  color: inherit;
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+.prose figure figcaption {
+  color: #6b7280;
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+.prose code {
+  font-weight: 600;
+  font-size: 0.875em;
+}
+.prose code::before {
+  content: '`';
+}
+.prose code::after {
+  content: '`';
+}
+.prose a code {
+  color: #111827;
+}
+.prose pre {
+  color: #e5e7eb;
+  overflow-x: auto;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding-top: 0.8571429em;
+  padding-right: 1.1428571em;
+  padding-bottom: 0.8571429em;
+  padding-left: 1.1428571em;
+}
+.prose pre code {
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: 400;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+.prose pre code::before {
+  content: none;
+}
+.prose pre code::after {
+  content: none;
+}
+.prose table {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+.prose thead {
+  font-weight: 600;
+  border-bottom-width: 1px;
+  border-bottom-color: #8882;
+}
+.prose thead th {
+  vertical-align: bottom;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+.prose tbody tr {
+  border-bottom-width: 1px;
+  border-bottom-color: #8882;
+}
+.prose tbody tr:last-child {
+  border-bottom-width: 0;
+}
+.prose tbody td {
+  vertical-align: top;
+  padding-top: 0.5714286em;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+.prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+.prose img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+.prose video {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+.prose figure {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+.prose figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.prose h2 code {
+  font-size: 0.875em;
+}
+.prose h3 code {
+  font-size: 0.9em;
+}
+.prose ol {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  list-style-type: none;
+}
+.prose ul {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  list-style-type: none;
+}
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+.prose > ul > li p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+.prose > ol > li > *:first-child {
+  margin-top: 1.25em;
+}
+.prose > ol > li > *:last-child {
+  margin-bottom: 1.25em;
+}
+.prose ul ul,
+.prose ul ol,
+.prose ol ul,
+.prose ol ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+.prose hr + * {
+  margin-top: 0;
+}
+.prose h2 + * {
+  margin-top: 0;
+}
+.prose h3 + * {
+  margin-top: 0;
+}
+.prose h4 + * {
+  margin-top: 0;
+}
+.prose h6 {
+  text-transform: uppercase;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  opacity: 0.5;
+  font-weight: 500;
+  letter-spacing: 2px;
+}
+.prose thead th:first-child {
+  padding-left: 0;
+}
+.prose thead th:last-child {
+  padding-right: 0;
+}
+.prose tbody td:first-child {
+  padding-left: 0;
+}
+.prose tbody td:last-child {
+  padding-right: 0;
+}
+.prose > :first-child {
+  margin-top: 0;
+}
+.prose > :last-child {
+  margin-bottom: 0;
+}
+.prose em {
+  color: inherit;
+}
+.prose-sm {
+  font-size: 0.875rem;
+  line-height: 1.7142857;
+}
+.prose-sm p {
+  margin-top: 1.1428571em;
+  margin-bottom: 1.1428571em;
+}
+.prose-sm [class~='lead'] {
+  font-size: 1.2857143em;
+  line-height: 1.5555556;
+  margin-top: 0.8888889em;
+  margin-bottom: 0.8888889em;
+}
+.prose-sm blockquote {
+  margin-top: 1.3333333em;
+  margin-bottom: 1.3333333em;
+  padding-left: 1.1111111em;
+}
+.prose-sm h1 {
+  font-size: 2.1428571em;
+  margin-top: 0;
+  margin-bottom: 0.8em;
+  line-height: 1.2;
+}
+.prose-sm h2 {
+  font-size: 1.4285714em;
+  margin-top: 1.6em;
+  margin-bottom: 0.8em;
+  line-height: 1.4;
+}
+.prose-sm h3 {
+  font-size: 1.2857143em;
+  margin-top: 1.5555556em;
+  margin-bottom: 0.4444444em;
+  line-height: 1.5555556;
+}
+.prose-sm h4 {
+  margin-top: 1.4285714em;
+  margin-bottom: 0.5714286em;
+  line-height: 1.4285714;
+}
+.prose-sm img {
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+}
+.prose-sm video {
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+}
+.prose-sm figure {
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+}
+.prose-sm figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.prose-sm figure figcaption {
+  font-size: 0.8571429em;
+  line-height: 1.3333333;
+  margin-top: 0.6666667em;
+}
+.prose-sm code {
+  font-size: 0.8571429em;
+}
+.prose-sm h2 code {
+  font-size: 0.9em;
+}
+.prose-sm h3 code {
+  font-size: 0.8888889em;
+}
+.prose-sm pre {
+  font-size: 0.8571429em;
+  line-height: 1.6666667;
+  margin-top: 1.6666667em;
+  margin-bottom: 1.6666667em;
+  border-radius: 0.25rem;
+  padding-top: 0.6666667em;
+  padding-right: 1em;
+  padding-bottom: 0.6666667em;
+  padding-left: 1em;
+}
+.prose-sm ol {
+  margin-top: 1.1428571em;
+  margin-bottom: 1.1428571em;
+}
+.prose-sm ul {
+  margin-top: 1.1428571em;
+  margin-bottom: 1.1428571em;
+}
+.prose-sm li {
+  margin-top: 0.2857143em;
+  margin-bottom: 0.2857143em;
+}
+.prose-sm ol > li {
+  padding-left: 1.5714286em;
+}
+.prose-sm ol > li::before {
+  left: 0;
+}
+.prose-sm ul > li {
+  padding-left: 1.5714286em;
+}
+.prose-sm ul > li::before {
+  height: 0.3571429em;
+  width: 0.3571429em;
+  top: calc(0.8571429em - 0.1785714em);
+  left: 0.2142857em;
+}
+.prose-sm > ul > li p {
+  margin-top: 0.5714286em;
+  margin-bottom: 0.5714286em;
+}
+.prose-sm > ul > li > *:first-child {
+  margin-top: 1.1428571em;
+}
+.prose-sm > ul > li > *:last-child {
+  margin-bottom: 1.1428571em;
+}
+.prose-sm > ol > li > *:first-child {
+  margin-top: 1.1428571em;
+}
+.prose-sm > ol > li > *:last-child {
+  margin-bottom: 1.1428571em;
+}
+.prose-sm ul ul,
+.prose-sm ul ol,
+.prose-sm ol ul,
+.prose-sm ol ol {
+  margin-top: 0.5714286em;
+  margin-bottom: 0.5714286em;
+}
+.prose-sm hr {
+  margin-top: 2.8571429em;
+  margin-bottom: 2.8571429em;
+}
+.prose-sm hr + * {
+  margin-top: 0;
+}
+.prose-sm h2 + * {
+  margin-top: 0;
+}
+.prose-sm h3 + * {
+  margin-top: 0;
+}
+.prose-sm h4 + * {
+  margin-top: 0;
+}
+.prose-sm table {
+  font-size: 0.8571429em;
+  line-height: 1.5;
+}
+.prose-sm thead th {
+  padding-right: 1em;
+  padding-bottom: 0.6666667em;
+  padding-left: 1em;
+}
+.prose-sm thead th:first-child {
+  padding-left: 0;
+}
+.prose-sm thead th:last-child {
+  padding-right: 0;
+}
+.prose-sm tbody td {
+  padding-top: 0.6666667em;
+  padding-right: 1em;
+  padding-bottom: 0.6666667em;
+  padding-left: 1em;
+}
+.prose-sm tbody td:first-child {
+  padding-left: 0;
+}
+.prose-sm tbody td:last-child {
+  padding-right: 0;
+}
+.prose-sm > :first-child {
+  margin-top: 0;
+}
+.prose-sm > :last-child {
+  margin-bottom: 0;
+}