diff --git a/base.css b/base.css
deleted file mode 100644
index e69de29..0000000
diff --git a/package-lock.json b/package-lock.json
index 0b4b26f..5905dba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@vueuse/core": "^11.1.0",
         "pinia": "^2.2.4",
+        "pinyin-pro": "^3.25.0",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
       },
@@ -3162,6 +3163,11 @@
         }
       }
     },
+    "node_modules/pinyin-pro": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/pinyin-pro/-/pinyin-pro-3.25.0.tgz",
+      "integrity": "sha512-MpwQPa9Ry+1vVHrsRgfJTvbtoMn0Gk529OZEWqN+O/iiSOqnd2dbKrDMaX87n7YvVPhy2W1/sKakK9zheYNWeg=="
+    },
     "node_modules/postcss": {
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
diff --git a/package.json b/package.json
index 94122a2..3aa292d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@vueuse/core": "^11.1.0",
     "pinia": "^2.2.4",
+    "pinyin-pro": "^3.25.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },
diff --git a/src/App.vue b/src/App.vue
index 0fde92a..4b997d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,13 +20,17 @@ import Footer from './components/Footer.vue'
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  align-items: center; /* Center children horizontally */
 }
 
 .main-content {
-  flex: 1;
-  padding: 20px;
+  flex: 1; /* Uncomment this to make it take available vertical space */
+  display: flex;
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+  width: 100%;
   max-width: 1200px;
+  padding: 20px;
   margin: 0 auto;
-  width: 100%;
 }
 </style>
diff --git a/src/assets/base.css b/src/assets/base.css
new file mode 100644
index 0000000..3961295
--- /dev/null
+++ b/src/assets/base.css
@@ -0,0 +1,159 @@
+/* Import Google Handwriting Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
+
+:root {
+  /* Casual Handwriting */
+  --handwriting-casual: 'Caveat', cursive;
+  --handwriting-notes: 'Kalam', cursive;
+  --handwriting-personal: 'Shadows Into Light', cursive;
+  --handwriting-friendly: 'Indie Flower', cursive;
+
+  /* Formal/Elegant Handwriting */
+  --handwriting-elegant: 'Dancing Script', cursive;
+  --handwriting-fancy: 'Satisfy', cursive;
+  --handwriting-neat: 'Homemade Apple', cursive;
+
+  /* Special Styles */
+  --handwriting-marker: 'Permanent Marker', cursive;
+  --handwriting-child: 'Patrick Hand', cursive;
+  --handwriting-messy: 'Reenie Beanie', cursive;
+}
+
+/* Font Weight Variables */
+:root {
+  --hw-light: 300;
+  --hw-regular: 400;
+  --hw-medium: 500;
+  --hw-semibold: 600;
+  --hw-bold: 700;
+}
+
+/* Utility Classes for Different Handwriting Styles */
+.handwriting-casual {
+  font-family: var(--handwriting-casual);
+  font-weight: var(--hw-regular);
+  line-height: 1.6;
+  letter-spacing: 0.5px;
+}
+
+.handwriting-notes {
+  font-family: var(--handwriting-notes);
+  font-weight: var(--hw-regular);
+  line-height: 1.5;
+  letter-spacing: 0.3px;
+}
+
+.handwriting-personal {
+  font-family: var(--handwriting-personal);
+  line-height: 1.6;
+  letter-spacing: 0.8px;
+}
+
+.handwriting-friendly {
+  font-family: var(--handwriting-friendly);
+  font-weight: var(--hw-bold);
+  line-height: 1.5;
+  letter-spacing: 0.5px;
+}
+
+.handwriting-elegant {
+  font-family: var(--handwriting-elegant);
+  font-weight: var(--hw-regular);
+  line-height: 1.6;
+  letter-spacing: 0.5px;
+}
+
+.handwriting-fancy {
+  font-family: var(--handwriting-fancy);
+  line-height: 1.4;
+  letter-spacing: 0.3px;
+}
+
+.handwriting-neat {
+  font-family: var(--handwriting-neat);
+  line-height: 1.8;
+  letter-spacing: 0.2px;
+}
+
+.handwriting-marker {
+  font-family: var(--handwriting-marker);
+  line-height: 1.4;
+  letter-spacing: 1px;
+}
+
+.handwriting-child {
+  font-family: var(--handwriting-child);
+  line-height: 1.5;
+  letter-spacing: 0.5px;
+}
+
+.handwriting-messy {
+  font-family: var(--handwriting-messy);
+  line-height: 1.6;
+  letter-spacing: 0.8px;
+}
+
+/* Size Variants */
+.hw-text-sm {
+  font-size: 1rem;
+}
+
+.hw-text-md {
+  font-size: 1.25rem;
+}
+
+.hw-text-lg {
+  font-size: 1.5rem;
+}
+
+.hw-text-xl {
+  font-size: 2rem;
+}
+
+/* Optional: Add some ink-like effects */
+.ink-effect {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+/* Optional: Add paper texture background */
+.paper-bg {
+  background-color: #fff;
+  background-image: linear-gradient(
+    0deg,
+    transparent 24%,
+    rgba(0, 0, 0, 0.05) 25%,
+    rgba(0, 0, 0, 0.05) 26%,
+    transparent 27%,
+    transparent 74%,
+    rgba(0, 0, 0, 0.05) 75%,
+    rgba(0, 0, 0, 0.05) 76%,
+    transparent 77%,
+    transparent
+  );
+  background-size: 50px 50px;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 768px) {
+  .hw-text-sm {
+    font-size: 0.875rem;
+  }
+  .hw-text-md {
+    font-size: 1.125rem;
+  }
+  .hw-text-lg {
+    font-size: 1.25rem;
+  }
+  .hw-text-xl {
+    font-size: 1.75rem;
+  }
+}
diff --git a/src/assets/main.css b/src/assets/main.css
index 36fb845..4bef972 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,7 +1,11 @@
 @import './base.css';
 
+html,
+body {
+  font-family: var(--handwriting-friendly);
+}
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
@@ -20,16 +24,3 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index a8b55ad..cbbbf8c 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -56,6 +56,7 @@ const currentYear = computed(() => new Date().getFullYear())
 }
 
 .footer-container {
+  width: 1000px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index de19d41..87f5d13 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,7 +1,7 @@
 <template>
   <header class="header">
     <nav class="nav-container">
-      <RouterLink to="/" class="logo"> Chinese Writing Assistant </RouterLink>
+      <RouterLink to="/" class="logo"> Writing Assistant </RouterLink>
       <div class="nav-links">
         <RouterLink to="/" class="nav-link">Home</RouterLink>
         <RouterLink to="/about" class="nav-link">About</RouterLink>
@@ -24,6 +24,8 @@ import { RouterLink } from 'vue-router'
 
 <style scoped>
 .header {
+  max-width: 1200px;
+  width: 1000px;
   background-color: #2c3e50;
   color: white;
   padding: 1rem;
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index c31b174..af9ff1b 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -3,14 +3,19 @@
     <h1>About Chinese Writing Assistant</h1>
     <p>
       A tool to help learners master Chinese character writing with proper
-      stroke order and beginner-friendly fonts.
+      stroke order and beginner-friendly fonts. I wanted to make this web app as
+      a personal app with features that I wanted to have when I started learning
+      Chinese. And I am using as well. While using it I thought it would be
+      better if other chinese learner could also use it. So I made it a public
+      app.
+      <br /><br />Have fun learning chinese using this app.
     </p>
   </div>
 </template>
 
 <style scoped>
 .about {
-  max-width: 800px;
+  /* max-width: 800px; */
   margin: 0 auto;
   padding: 2rem;
 }
diff --git a/src/views/FontConverter.vue b/src/views/FontConverter.vue
index e920c9a..12eca4a 100644
--- a/src/views/FontConverter.vue
+++ b/src/views/FontConverter.vue
@@ -58,23 +58,43 @@
               class="comparison-block"
             >
               <p class="block-number">Block {{ index + 1 }}</p>
-              <div
-                class="converted-text"
-                :style="{
-                  fontFamily: getFontFamily,
-                  fontSize: `${fontSize}px`,
-                }"
-              >
-                {{ block }}
-              </div>
-              <div
-                class="original-text"
-                :style="{
-                  fontFamily: fonts.regular,
-                  fontSize: `${fontSize}px`,
-                }"
-              >
-                {{ block }}
+              <div class="line-container">
+                <div
+                  v-for="(line, lineIndex) in splitIntoLines(block)"
+                  :key="lineIndex"
+                  class="text-line"
+                >
+                  <div class="character-container">
+                    <div
+                      v-for="(char, charIndex) in line"
+                      :key="charIndex"
+                      class="character-column"
+                      :class="{ punctuation: isPunctuation(char) }"
+                    >
+                      <div
+                        class="character converted-text"
+                        :style="{
+                          fontFamily: getFontFamily,
+                          fontSize: `${fontSize}px`,
+                        }"
+                      >
+                        {{ char }}
+                      </div>
+                      <div class="pinyin-text" v-if="!isPunctuation(char)">
+                        {{ getPinyinForChar(char) }}
+                      </div>
+                      <div
+                        class="character original-text"
+                        :style="{
+                          fontFamily: fonts.regular,
+                          fontSize: `${fontSize}px`,
+                        }"
+                      >
+                        {{ char }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </template>
@@ -89,6 +109,7 @@
 
 <script>
 import { ref, computed } from 'vue'
+import { pinyin } from 'pinyin-pro'
 
 export default {
   name: 'FontConverter',
@@ -109,12 +130,10 @@ export default {
     const textBlocks = computed(() => {
       if (!inputText.value) return []
 
-      // Split text into sentences using multiple delimiters
       const sentences =
         inputText.value.match(/[^。.!?！？]+[。.!?！？]+/g) || []
-
-      // Handle any remaining text that doesn't end with a delimiter
       const remainingText = inputText.value.match(/[^。.!?！？]+$/)
+
       if (remainingText) {
         sentences.push(remainingText[0])
       }
@@ -122,6 +141,27 @@ export default {
       return sentences.filter(sentence => sentence.trim())
     })
 
+    const splitIntoLines = text => {
+      return text
+        .split('，')
+        .map(line => line.trim())
+        .filter(line => line)
+    }
+
+    const isPunctuation = char => {
+      const punctuationRegex = /[《》【】（）！？。，、：；'"『』「」]/
+      return punctuationRegex.test(char)
+    }
+
+    const getPinyinForChar = char => {
+      if (isPunctuation(char)) return ''
+      return pinyin(char, {
+        toneType: 'symbol',
+        type: 'array',
+        nonZh: 'consecutive',
+      })[0]
+    }
+
     return {
       inputText,
       selectedFont,
@@ -129,6 +169,9 @@ export default {
       getFontFamily,
       textBlocks,
       fonts,
+      splitIntoLines,
+      isPunctuation,
+      getPinyinForChar,
     }
   },
 }
@@ -149,7 +192,7 @@ export default {
   flex-direction: column;
   gap: 2rem;
   padding: 1rem;
-  /* max-width: 1400px; */
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -191,10 +234,6 @@ export default {
   gap: 1rem;
 }
 
-.comparison-section {
-  width: 100%;
-}
-
 .text-input {
   width: 100%;
   min-height: 300px;
@@ -229,24 +268,60 @@ export default {
   background-color: #f9f9f9;
 }
 
-.block-number {
-  font-size: 0.875rem;
-  color: #666;
-  margin-bottom: 0.5rem;
+.line-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 
-.converted-text {
-  margin-bottom: 1rem;
+.text-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
   padding: 0.5rem;
   background-color: white;
   border-radius: 4px;
 }
 
-.original-text {
+.character-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.character-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 2em;
+  padding: 0.25rem;
+}
+
+.character-column.punctuation {
+  min-width: 1em;
+}
+
+.character {
+  text-align: center;
+  line-height: 1.2;
+  min-height: 1.2em;
+}
+
+.pinyin-text {
+  font-size: 0.8em;
+  color: #2563eb;
+  text-align: center;
+  font-family: Arial, sans-serif;
+  min-height: 1.2em;
+  line-height: 1.2;
+}
+
+.block-number {
+  font-size: 0.875rem;
   color: #666;
-  padding: 0.5rem;
-  background-color: white;
-  border-radius: 4px;
+  margin-bottom: 0.5rem;
 }
 
 .font-selector,
@@ -274,19 +349,9 @@ export default {
     width: 100%;
     grid-template-columns: 1fr;
   }
-}
-
-@media (max-width: 768px) {
-  .controls-container {
-    flex-direction: row; /* Keeps controls in a row on mobile */
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
 
-  .font-selector,
-  .size-selector {
-    flex: 1;
-    min-width: 200px;
+  .character-column {
+    min-width: 1.5em;
   }
 }
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0b04887..8389e0b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -105,7 +105,7 @@
 
 <style scoped>
 .home {
-  width: 100%;
+  width: 80%;
 }
 
 /* Hero Section */
diff --git a/test.txt b/test.txt
new file mode 100644
index 0000000..dbfa8f1
--- /dev/null
+++ b/test.txt
@@ -0,0 +1,41 @@
+中国清朝时期历时约150余年历经6位皇帝在位期间建造的「圆明园」皇家宫廷建筑群之四十景建筑群介绍：（17）鸿慈永祜又称安佑宫，
+位于圆明园西北隅，
+皇家祖祠。
+仿景山寿皇殿建造，
+建于乾隆七年，
+完全仿建故宫太庙。
+园内规格最高的建筑，
+黄色琉璃瓦重檐歇山顶，
+九楹，
+黄琉璃瓦。
+殿内中为康熙帝神像，
+东为雍正帝，
+西为乾隆帝。
+殿门前为两道琉璃牌坊，
+各有华表一对。
+（18）汇芳书院，
+在鸿慈永祜之东，
+平面为眉月形，
+内有抒藻轩、涵远楼、随安室，
+隔溪有“断桥残雪”，
+仿杭州西湖十景。
+（19）日天琳宇，
+在汇芳书院之南，
+为佛堂。
+有中前楼、中后楼、西前楼、西后楼，
+前后楼间有穿堂，
+各楼之间以天桥相连。
+中楼前有八角亭“楞严坛”，
+东有瑞应宫。
+
+（20）澹泊宁静宫殿的外型是一个汉字的形状：“田”。
+“田”的意为耕地，
+农业是封建帝国的命脉，
+皇帝每年都要在这儿举行犁田仪式。
+位于日天琳宇东南，
+东为曙光楼，
+北为翠扶楼，
+西门外为多稼轩，
+东为观稼轩、稻香亭，
+东北为溪山不尽和兰溪隐玉，
+西南为水精域、静香屋、招鹤磴、互妙楼。