diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 774f749..10057f8 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -47,7 +47,7 @@ import { RouterLink } from 'vue-router'
 const currentYear = computed(() => new Date().getFullYear())
 </script>
 
-<style scoped>
+<!-- <style scoped>
 .footer {
   background-color: #2c3e50;
   color: white;
@@ -151,4 +151,132 @@ const currentYear = computed(() => new Date().getFullYear())
     text-align: center;
   }
 }
+</style> -->
+
+<style scoped>
+.footer {
+  background-color: #2c3e50;
+  color: white;
+  padding-top: 2rem;
+  margin-top: auto;
+}
+
+.footer-container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+
+.footer-section {
+  flex: 1;
+  min-width: 250px; /* Ensures a minimum width on larger screens */
+}
+
+.footer-title {
+  font-size: 1.5rem; /* Consider adjusting based on screen size */
+  margin-bottom: 1rem;
+  font-weight: bold;
+}
+
+.footer-subtitle {
+  font-size: 1.1rem; /* Adjust for smaller screens */
+  margin-bottom: 0.8rem;
+  color: #bbbbbb;
+}
+
+.footer-description {
+  color: #bbbbbb;
+  line-height: 1.6;
+}
+
+.footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.footer-link {
+  color: #bbbbbb;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-link:hover {
+  color: white;
+}
+
+.footer-bottom {
+  margin-top: 2rem;
+  padding: 1.5rem 0;
+  border-top: 1px solid #3d5266;
+}
+
+.footer-bottom .footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center; /* Center items vertically */
+}
+
+.copyright {
+  color: #bbbbbb;
+}
+
+.social-links {
+  display: flex;
+  gap: 1rem; /* Space between social icons */
+}
+
+.social-link {
+  color: #bbbbbb;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.social-link:hover {
+  color: white; /* On hover, change color */
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 1024px) {
+  /* Tablet and smaller desktops */
+  .footer-title {
+    font-size: 1.4rem; /* Slightly smaller title */
+  }
+
+  .footer-subtitle {
+    font-size: 1rem; /* Adjust subtitle size */
+  }
+}
+
+@media (max-width: 768px) {
+  /* Mobile devices */
+  .footer-container {
+    flex-direction: column; /* Stack sections vertically */
+    gap: 2rem; /* Space between sections */
+  }
+
+  .footer-section {
+    min-width: auto; /* Allow full width on mobile */
+    flex-basis: auto; /* Allow sections to grow/shrink */
+  }
+
+  .footer-title {
+    font-size: 1.3rem; /* Smaller title for mobile */
+  }
+
+  .footer-subtitle {
+    font-size: 0.9rem; /* Smaller subtitle for mobile */
+  }
+
+  .footer-bottom .footer-container {
+    flex-direction: column; /* Stack items in footer bottom */
+    gap: 0.5rem; /* Space between footer bottom items */
+    text-align: center; /* Center align text on mobile */
+  }
+}
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 771297b..e0191cb 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -22,7 +22,7 @@
 import { RouterLink } from 'vue-router'
 </script>
 
-<style scoped>
+<!-- <style scoped>
 .header {
   max-width: 1200px;
   width: 1000px;
@@ -62,4 +62,78 @@ import { RouterLink } from 'vue-router'
 .nav-link:hover {
   background-color: #34495e;
 }
+</style> -->
+<style scoped>
+.header {
+  max-width: 1200px;
+  width: 100%; /* Changed to 100% for better responsiveness */
+  background-color: #2c3e50;
+  color: white;
+  padding: 1rem;
+}
+
+.nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.8rem; /* Increased size for better visibility */
+  font-weight: bold;
+  color: white;
+  text-decoration: none;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1rem; /* Space between links */
+}
+
+.nav-link {
+  color: white;
+  text-decoration: none;
+  padding: 0.5rem 1rem; /* Consistent padding */
+  border-radius: 4px;
+  transition:
+    background-color 0.3s,
+    color 0.3s; /* Added color transition */
+}
+
+.nav-link:hover {
+  background-color: #34495e; /* Darker shade on hover */
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 1024px) {
+  /* Tablet and smaller desktops */
+  .logo {
+    font-size: 1.6rem; /* Slightly smaller logo */
+  }
+
+  .nav-link {
+    padding: 0.5rem; /* Adjust padding for smaller screens */
+  }
+}
+
+@media (max-width: 768px) {
+  /* Mobile devices */
+  .nav-container {
+    flex-direction: column; /* Stack items vertically */
+    align-items: flex-start; /* Align items to the start */
+  }
+
+  .nav-links {
+    flex-direction: column; /* Stack links vertically */
+    gap: 0.5rem; /* Reduce gap between links */
+    width: 100%; /* Full width for mobile navigation */
+  }
+
+  .nav-link {
+    width: 100%; /* Make links full width */
+    text-align: center; /* Center text in links */
+  }
+}
 </style>
diff --git a/src/views/FontConverter.vue b/src/views/FontConverter.vue
index 12eca4a..f85c547 100644
--- a/src/views/FontConverter.vue
+++ b/src/views/FontConverter.vue
@@ -26,7 +26,6 @@
     <div class="main-content">
       <div class="input-display-row">
         <div class="text-section">
-          <h2>Input Chinese Text</h2>
           <textarea
             v-model="inputText"
             placeholder="Enter Chinese text here..."
@@ -35,7 +34,6 @@
         </div>
 
         <div class="text-section">
-          <h2>Selected Font Display</h2>
           <div
             class="text-display"
             :style="{
@@ -177,7 +175,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<!-- <style scoped>
 @font-face {
   font-family: 'tegakizatsu';
   src: url('/fonts/tegakizatsu.ttf') format('truetype');
@@ -354,4 +352,195 @@ export default {
     min-width: 1.5em;
   }
 }
+</style> -->
+<style scoped>
+@font-face {
+  font-family: 'tegakizatsu';
+  src: url('/fonts/tegakizatsu.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'kaiti';
+  src: url('/fonts/kaiti.ttf') format('truetype');
+}
+
+.converter-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.controls-section {
+  position: sticky;
+  top: 0;
+  background-color: white;
+  z-index: 10;
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+}
+
+.controls-container {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.input-display-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  width: 100%;
+}
+
+.text-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.text-input {
+  width: 100%;
+  min-height: 300px;
+  padding: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.text-display {
+  min-height: 300px;
+  padding: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  white-space: pre-wrap;
+}
+
+.comparison-display {
+  padding: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.comparison-block {
+  margin-bottom: 2rem; /* Space between blocks */
+  padding: 1rem;
+  border: 1px solid #eee;
+}
+
+.line-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; /* Adjusted for better spacing */
+}
+
+.text-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: white;
+  border-radius: 0.25rem; /* Slightly smaller radius */
+}
+
+.character-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem; /* Increased gap for better spacing */
+  align-items: flex-start;
+}
+
+.character-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: auto; /* Allow flexibility */
+  padding: 0.25rem;
+}
+
+.character-column.punctuation {
+  min-width: auto; /* Allow flexibility */
+}
+
+.character {
+  text-align: center;
+  line-height: 1.2;
+  min-height: auto; /* Allow flexibility */
+}
+
+.pinyin-text {
+  font-size: 0.8em;
+  color: #2563eb;
+  text-align: center;
+  font-family: 'Arial', sans-serif;
+}
+
+.block-number {
+  font-size: 0.875rem;
+  color: #666;
+  margin-bottom: 0.5rem;
+}
+
+.font-selector,
+.size-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* Reduced gap for tighter layout */
+}
+
+.select-input {
+  padding: 0.5rem;
+  border-radius: 0.25rem; /* Smaller radius for inputs */
+  border: 0.5px solid #ddd; /* Slightly thinner border */
+}
+
+.placeholder-text {
+  color: #999;
+  text-align: center;
+  padding: 2rem;
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 1024px) {
+  /* Tablet and smaller desktops */
+
+  .input-display-row {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(250px, 1fr)
+    ); /* More responsive grid setup */
+  }
+
+  .character-column {
+    min-width: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  /* Mobile devices */
+
+  .controls-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .text-input,
+  .text-display,
+  .comparison-display {
+    min-height: auto;
+  }
+
+  .comparison-block {
+    margin-bottom: 0.5rem;
+  }
+}
 </style>