diff --git a/.vscode/settings.json b/.vscode/settings.json
index 74865d2..5f2498d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "tailwindCSS.files.exclude": [
     "**/.git/**",
diff --git a/pages/about.vue b/pages/about.vue
index 3509eb0..6fda4e6 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -12,11 +12,11 @@ defineOgImage()
               Al Asad Nur Riyad
             </h1>
 
-            <div class="my-3 space-x-3 pb-10">
+            <div class="my-3 space-x-2 md:space-x-3 pb-10">
               <NuxtLink
                 to="https://github.com/nurRiyad"
                 target="_blank"
-                class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
+                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="Github"
               >
                 <Icon name="fa:github" size="1em" />
@@ -24,7 +24,7 @@ defineOgImage()
               <NuxtLink
                 to="https://www.linkedin.com/in/nur-riyad/"
                 target="_blank"
-                class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
+                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="LinkedIn"
               >
                 <Icon name="fa:linkedin-square" size="1em" />
@@ -32,7 +32,7 @@ defineOgImage()
               <NuxtLink
                 to="https://twitter.com/qdnvubp"
                 target="_blank"
-                class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
+                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="Twitter"
               >
                 <Icon name="fa:twitter-square" size="1em" />
@@ -40,14 +40,14 @@ defineOgImage()
               <NuxtLink
                 to="https://stackoverflow.com/users/16781395/nur-riyad"
                 target="_blank"
-                class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
+                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="StackOverflow"
               >
                 <Icon name="fa:stack-overflow" size="1em" />
               </NuxtLink>
             </div>
           </div>
-          <div class="sm:hidden block col-span-3 pb-5 dark:bg-slate-700 dark:text-[#F1F2F4]">
+          <div class="sm:hidden block col-span-3 pb-5 dark:text-[#F1F2F4]">
             <NuxtImg
               src="/riyad.jpg"
               width="125"