diff --git a/index.html b/index.html
index c9f1ca0..79a2f35 100644
--- a/index.html
+++ b/index.html
@@ -74,10 +74,10 @@
 
     <div id="documentation" class="hidden">
       <div id="documentation-page" class="flex flex-row">
-        <aside class="h-screen w-50 p-8 h-100 bg-neutral-900 text-white">
-          <nav class="space-y-8 text-xl">
+        <aside class="h-screen w-50 p-1 lg:p-8 h-100 bg-neutral-900 text-white">
+          <nav class="space-y-8 text-xl sm:text-lg">
             <div class="space-y-2">
-              <h2 class="font-semibold dark:text-gray-400">Basics</h2>
+              <h2 class="font-semibold text-gray-400">Basics</h2>
               <div class="flex flex-col">
                 <p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Introduction </p>
                 <p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
@@ -98,7 +98,7 @@
             </div>
          </nav>
         </aside>
-        <div id="documentation-content" class="h-screen mx-16 my-8 break-words overflow-y-scroll pb-32">
+        <div id="documentation-content" class="h-screen lg:mx-16 mx-2 lg:my-8 my-2 break-words overflow-y-scroll pb-32">
         </div>
       </div>
     </div>
diff --git a/src/main.ts b/src/main.ts
index 9632139..f21bdca 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,12 +28,12 @@ import showdown from "showdown";
 showdown.setFlavor("github");
 import showdownHighlight from "showdown-highlight";
 const classMap = {
-  h1: "text-white text-4xl ml-4 mx-4 my-4 mb-8 bg-neutral-900 rounded-lg py-2 px-2",
-  h2: "text-white text-3xl mx-4 my-4 mt-12 mb-6 bg-neutral-900 rounded-lg py-2 px-2",
+  h1: "text-white lg:text-4xl text-xl lg:ml-4 sml-2 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-8 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
+  h2: "text-white lg:text-3xl text-lg mx-4 mx-2 lg:my-4 my-2 lg:mt-12 mb-2 mb-6 bg-neutral-900 rounded-lg py-2 px-2",
   ul: "text-underline",
-  li: "ml-12 list-disc text-2xl text-white mx-4 my-4 leading-normal",
-  p: "text-2xl text-white mx-4 my-4 leading-normal",
-  a: "text-2xl text-orange-300",
+  li: "ml-12 list-disc text-2xl sm:text-base text-white mx-4 my-4 leading-normal",
+  p: "text-2xl sm:text-base text-white mx-4 my-4 leading-normal",
+  a: "text-2xl sm:text-base text-orange-300",
   code: "my-4 block whitespace-pre overflow-x-scroll",
   icode: "my-4 text-white font-mono bg-neutral-600",
   blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",