diff --git a/site/src/components/awesome-header.html b/site/src/components/awesome-header.html
index d11be20..371a2ee 100644
--- a/site/src/components/awesome-header.html
+++ b/site/src/components/awesome-header.html
@@ -1,14 +1,31 @@
-<header
-  style="
+<header class="my-header">
+  <h1><slot /></h1>
+  <slot name="description" />
+</header>
+
+<style>
+  .my-header {
     border-radius: 5px;
     background: linear-gradient(45deg, #3054bf, #416fff);
     color: white;
     margin: 1em 0;
     padding: 1em;
-  "
->
-  <a style="color: white" href="/">
-    <h1><slot /></h1>
-  </a>
-  <slot name="description" />
-</header>
+
+    & a {
+      color: white;
+    }
+  }
+
+  @media only screen and (max-device-width: 376px) {
+    .my-header {
+      & h1 {
+        font-size: 1.5em;
+        line-clamp: 1;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;  
+        overflow: hidden;
+      }
+    }
+  }
+</style>
diff --git a/site/src/components/call-to-action.html b/site/src/components/call-to-action.html
index bc3c1ba..4738cd5 100644
--- a/site/src/components/call-to-action.html
+++ b/site/src/components/call-to-action.html
@@ -11,7 +11,6 @@
   display: flex;
   gap: 1em;
   justify-content: center;
-  padding: 1em;
   margin: 1em 0;
   width: 100%;
 
@@ -19,12 +18,27 @@
     border: 1px solid var(--color-primary);
     padding: 0.75em;
     border-radius: 5px;
+    text-align: center;
 
     &#primary {
-        background-color: var(--color-primary);
+        background: #3054bf;
         color: white;
         text-decoration: none;
+        width: 40%;
     }
+
+
   }
+
 }
+
+    @media only screen and (max-device-width: 376px) {
+      .call-to-action {
+        flex-direction: column;
+        & a:not(#primary) {
+          padding: 0.5em;
+        }
+      }
+
+    }
 </style>
\ No newline at end of file
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 31e131c..3bf4438 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -27,16 +27,12 @@
     <main>
       <section style="font-size: larger;">
         <p>
-          Our
-          <a href="https://www.npmjs.com/package/web-component-base">
-            tiny package
-          </a>
-          provides zero-dependency, ~600 Bytes (minified & gzipped), JS base class
-          for creating reactive custom elements easily.
+          Our <a href="https://www.npmjs.com/package/web-component-base">tiny package</a> provides a zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily.
         </p>
         <call-to-action />
       </section>
-      <section>
+      <hr style="margin: 2em 0;" />
+      <section style="font-size: large;">
         <p>
           When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.
         </p>
@@ -65,7 +61,7 @@ customElements.define(&quot;my-counter&quot;, Counter);
     <my-footer>
       <!-- <p>View page <a href="https://github.com/ayoayco/web-component-base/blob/main/site/src/pages/index.html">source code</a></p> -->
       <span>This site is built with
-        <a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework framework
+        <a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework framework;
       </span><br />
       <span>
         A project by <a href="{{ author.url }}">{{ author.name }}</a>