diff --git a/src/components/PrimaryFeatures.jsx b/src/components/PrimaryFeatures.jsx
index b7f1562..3990a1a 100644
--- a/src/components/PrimaryFeatures.jsx
+++ b/src/components/PrimaryFeatures.jsx
@@ -73,13 +73,13 @@ export function PrimaryFeatures() {
         </div>
         <Tab.Group
           as="div"
-          className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
+          className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0 padding-adjust"
           vertical={tabOrientation === 'vertical'}
         >
           {({ selectedIndex }) => (
             <>
               <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 md:overflow-x-auto md:px-2 lg:col-span-5">
-                <Tab.List className="relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
+                <Tab.List className="relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal whitespace-adjust ">
                   {features.map((feature, featureIndex) => (
                     <div
                       key={feature.title}
@@ -93,7 +93,7 @@ export function PrimaryFeatures() {
                       <h3>
                         <Tab
                           className={clsx(
-                            'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
+                            'font-display text-lg [&:not(:focus-visible)]:focus:outline-none font-adjust',
                             selectedIndex === featureIndex
                               ? 'text-emerald-600 lg:text-white'
                               : 'text-emerald-300 hover:text-white lg:text-white'
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index b509cbc..b862034 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -28,4 +28,61 @@
 /* Gap between columns */
 .column-gap-6 {
   column-gap: 1.5rem;  
+}
+
+@media(max-width: 1020px){
+  .whitespace-adjust{
+    white-space: pre-wrap;
+    /* column-gap: 0;
+    font-size: 1rem; */
+  }
+}
+
+@media(max-width: 689px){
+  .whitespace-adjust{
+    column-gap: 0;
+  }
+}
+
+@media(max-width: 628px){
+  .font-adjust{
+    font-size: 1rem;
+  }
+}
+
+@media(max-width: 573px){
+  .font-adjust{
+    font-size: 0.75rem;
+  }
+}
+
+@media(max-width: 474px){
+  .font-adjust{
+    line-height: 1rem;  
+  }
+}
+
+@media(max-width: 474px){
+  .padding-adjust{
+    margin-top: 0;
+    padding-top: 15px;
+  }
+}
+
+@media(max-width: 400px){
+  .padding-adjust{
+    padding-top: 0px;
+  }
+}
+
+@media (max-width: 1023px) {
+  .break-inside-avoid .tweet-actions_like__ebkiV, .break-inside-avoid .tweet-actions_reply__SSjP_, .break-inside-avoid .tweet-actions_copy__9eB3J {
+  margin-right: 0.5rem;
+}
+}
+
+@media (max-width: 320px) {
+  .break-inside-avoid .tweet-actions_like__ebkiV, .break-inside-avoid .tweet-actions_reply__SSjP_, .break-inside-avoid .tweet-actions_copy__9eB3J {
+    margin-right: 0.45rem;
+  }
 }
\ No newline at end of file