diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index bc627b9b5..2248d6531 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -984,7 +984,7 @@ for Accounting integrations'
               <br />
               <a
                 href='mailto:info@json-schema.org'
-                className='border-b border-black dark:border-white'
+                className='border-b border-black dark:border-white inline-block transition-transform duration-300 hover:scale-105 hover:-translate-y-0.5'
               >
                 Email us
               </a>{' '}
diff --git a/pages/tools/index.page.tsx b/pages/tools/index.page.tsx
index 5b9bb194e..40d40dd13 100644
--- a/pages/tools/index.page.tsx
+++ b/pages/tools/index.page.tsx
@@ -122,16 +122,21 @@ export default function ToolingPage({
   } = useToolsTransform(toolingData);
 
   return (
-    <SectionContext.Provider value='tools'>
+    <SectionContext.Provider value={'tools'}>
       <Head>
         <title>JSON Schema - Tools</title>
       </Head>
-      <div className='mx-auto w-full max-w-[1400px] min-h-screen flex flex-col items-center'>
+
+      <div
+        className={
+          'mx-auto w-full max-w-[1400px] min-h-screen flex flex-col items-center'
+        }
+      >
         <div
-          className='bg-primary w-full h-12 mt-[4.5rem] relative lg:hidden px-8 flex justify-between items-center'
-          onClick={() => {
-            setIsSidebarOpen((prev) => !prev);
-          }}
+          className={
+            'bg-primary w-full h-12 mt-[4.5rem] relative lg:hidden px-8 flex justify-between items-center'
+          }
+          onClick={() => setIsSidebarOpen((prev) => !prev)}
         >
           <h3 className='text-white'>{numberOfTools} Tools</h3>
 
@@ -140,29 +145,36 @@ export default function ToolingPage({
               transform: `${isSidebarOpen ? 'rotate(180deg)' : 'rotate(0)'}`,
               transition: 'transform 0.2s linear',
             }}
-            xmlns='http://www.w3.org/2000/svg'
+            xmlns={'http://www.w3.org/2000/svg'}
             height='24'
             viewBox='0 0 256 512'
           >
             <path
-              d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'
-              fill='#ffffff'
+              d={
+                'M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'
+              }
+              fill={'#ffffff'}
             />
           </svg>
         </div>
 
-        <div className='grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12 min-h-screen'>
+        {/* FIX 1: mx → px, and overflow-x-hidden */}
+        <div
+          className={
+            'w-full grid grid-cols-1 lg:grid-cols-4 px-4 md:px-12 min-h-screen overflow-x-hidden'
+          }
+        >
           <div
             className={`
-    lg:fixed absolute top-0 lg:top-0 left-0 lg:left-auto
-    mt-0 lg:mt-20
-    w-screen lg:w-auto
-    bg-white dark:bg-slate-800 lg:bg-transparent
-    transition-transform lg:transform-none duration-300 lg:duration-0 ease-in-out
-    z-5
-    ${isSidebarOpen ? '-translate-x-0' : '-translate-x-full'}
-    ${isMobile && isSidebarOpen ? 'overflow-hidden' : 'overflow-y-auto lg:overflow-y-hidden'}
-  `}
+              lg:fixed absolute top-0 lg:top-0 left-0 lg:left-auto
+              mt-0 lg:mt-20
+              w-full max-w-full lg:w-auto overflow-x-hidden
+              bg-white dark:bg-slate-800 lg:bg-transparent
+              transition-transform lg:transform-none duration-300 lg:duration-0 ease-in-out
+              z-5
+              ${isSidebarOpen ? '-translate-x-0' : '-translate-x-full'}
+              ${isMobile && isSidebarOpen ? 'overflow-hidden' : 'overflow-y-auto lg:overflow-y-hidden'}
+            `}
             style={{
               height: isMobile
                 ? isSidebarOpen
@@ -176,16 +188,25 @@ export default function ToolingPage({
               top: '4.5rem',
             }}
           >
-            <div className='h-full flex flex-col'>
-              <div className='flex-1 overflow-y-auto scrollbar-hidden min-h-0 px-2 lg:px-0 pb-2'>
-                <div className='hidden lg:block pt-8'>
-                  <h1 className='text-h1mobile md:text-h1 font-bold lg:ml-4'>
+            <div className={'h-full flex flex-col'}>
+              <div
+                className={
+                  'flex-1 overflow-y-auto scrollbar-hidden min-h-0 px-2 lg:px-0 pb-2'
+                }
+              >
+                <div className={'hidden lg:block pt-8'}>
+                  <h1 className={'text-h1mobile md:text-h1 font-bold lg:ml-4'}>
                     {numberOfTools}
                   </h1>
-                  <div className='text-xl text-slate-900 dark:text-slate-300 font-bold lg:ml-6 mb-4'>
+                  <div
+                    className={
+                      'text-xl text-slate-900 dark:text-slate-300 font-bold lg:ml-6 mb-4'
+                    }
+                  >
                     Tools
                   </div>
                 </div>
+
                 <Sidebar
                   filterCriteria={filterCriteria}
                   transform={transform}
@@ -198,61 +219,82 @@ export default function ToolingPage({
           </div>
 
           <main
-            className={`md:col-span-3 lg:mt-20 lg:w-full mx-4 md:mx-0 lg:!ml-[20px] ${isSidebarOpen ? 'hidden lg:block' : ''}`}
+            className={`md:col-span-3 lg:mt-20 lg:w-full mx-4 md:mx-0 lg:!ml-[20px] ${
+              isSidebarOpen ? 'hidden lg:block' : ''
+            }`}
           >
             <Headline1>JSON Schema Tooling</Headline1>
-            <p className='text-slate-600 block leading-7 pb-1 dark:text-slate-300'>
+            <p
+              className={
+                'text-slate-600 block leading-7 pb-1 dark:text-slate-300'
+              }
+            >
               Toolings below are written in different languages, and support
               part, or all, of at least one recent version of the specification.
             </p>
-            <p className='text-slate-600 block leading-7 pb-4 dark:text-slate-300'>
+            <p
+              className={
+                'text-slate-600 block leading-7 pb-4 dark:text-slate-300'
+              }
+            >
               Listing does not signify a recommendation or endorsement of any
               kind.
             </p>
-            <div className='flex flex-row items-center gap-2 w-full'>
-              <div className='flex items-center justify-center gap-2 w-1/2'>
+
+            <div className={'flex flex-row items-center gap-2 w-full'}>
+              <div className={'flex items-center justify-center gap-2 w-1/2'}>
                 <Link
-                  className='flex-none max-w-full'
+                  className={'flex-none max-w-full'}
                   href='https://github.com/json-schema-org/website/issues/new?assignees=&labels=Status%3A+Triage&template=adding-your-tooling.yml'
                   target='_blank'
                   rel='noreferrer'
                 >
                   <Image
                     src='/img/tools/adding_your_tool.png'
-                    className='rounded-sm'
+                    className={'rounded-sm'}
                     height={68}
                     width={190}
                     alt='adding your tool'
                   />
                 </Link>
-                <p className='hidden lg:block text-slate-600 dark:text-slate-300 px-4'>
+                <p
+                  className={
+                    'hidden lg:block text-slate-600 dark:text-slate-300 px-4'
+                  }
+                >
                   Raise an issue to get your tool added or updated in the
                   tooling table.
                 </p>
               </div>
 
-              <div className='flex items-center justify-center gap-2 w-1/2'>
+              <div className={'flex items-center justify-center gap-2 w-1/2'}>
                 <Link
-                  className='flex-none max-w-full'
+                  className={'flex-none max-w-full'}
                   href='https://bowtie.report'
                   target='_blank'
                   rel='noreferrer'
                 >
                   <Image
                     src='/img/tools/try_bowtie.png'
-                    className='rounded-sm'
+                    className={'rounded-sm'}
                     height={68}
                     width={190}
                     alt='try bowtie'
                   />
                 </Link>
-                <p className='hidden lg:block text-slate-600 dark:text-slate-300 px-4'>
+                <p
+                  className={
+                    'hidden lg:block text-slate-600 dark:text-slate-300 px-4'
+                  }
+                >
                   Bowtie is a meta-validator for JSON Schema implementations and
                   it provides compliance reports.
                 </p>
               </div>
             </div>
+
             <GroupByMenu transform={transform} setTransform={setTransform} />
+
             <ToolingTable
               toolsByGroup={toolsByGroup}
               transform={transform}
