diff --git a/app/lookup/[domain]/_components/results-tabs.tsx b/app/lookup/[domain]/_components/results-tabs.tsx
index b5682f3..7bb6fde 100644
--- a/app/lookup/[domain]/_components/results-tabs.tsx
+++ b/app/lookup/[domain]/_components/results-tabs.tsx
@@ -1,52 +1,40 @@
 'use client';
 
 import { OptionIcon } from 'lucide-react';
+import { motion } from 'motion/react';
 import Link from 'next/link';
 import { useRouter, useSelectedLayoutSegment } from 'next/navigation';
 import type { FC } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { ClientOnly } from '@/components/client-only';
-import { isAppleDevice } from '@/lib/utils';
+import { cn, isAppleDevice } from '@/lib/utils';
 
 type SingleTabProps = {
   label: string;
   href: string;
   selected: boolean;
-  shortcutNumber: number;
 };
 
-const SingleTab: FC<SingleTabProps> = ({
-  label,
-  href,
-  selected,
-  shortcutNumber,
-}) => (
+const SingleTab: FC<SingleTabProps> = ({ label, href, selected }) => (
   <li className="mr-2">
     <Link
       href={href}
-      className={
+      className={cn(
+        'relative inline-block w-max rounded-t-lg px-4 py-3 transition-colors',
         selected
-          ? 'relative inline-block w-max rounded-t-lg border-b-2 border-primary p-4 text-primary'
-          : 'relative inline-block w-max rounded-t-lg border-b-2 border-transparent p-4 hover:border-zinc-300 hover:text-zinc-600 dark:hover:text-zinc-300'
-      }
+          ? 'text-primary'
+          : 'text-zinc-600 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300',
+      )}
     >
-      {label}
-      <ClientOnly>
-        <span
-          className="pointer-events-none absolute bottom-0 left-1/2 hidden w-full -translate-x-1/2 translate-y-4 text-xs text-zinc-500 opacity-0 transition-all group-hover:translate-y-6 group-hover:opacity-100 dark:text-zinc-400 sm:block"
-          aria-hidden
-        >
-          {isAppleDevice() ? (
-            <>
-              <OptionIcon className="inline-block h-3 w-3" strokeWidth={3} />
-              {` + ${shortcutNumber}`}
-            </>
-          ) : (
-            `alt+${shortcutNumber}`
-          )}
-        </span>
-      </ClientOnly>
+      {selected && (
+        <motion.div
+          className="absolute inset-0 rounded-xl bg-white shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:bg-zinc-900 dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)]"
+          layoutId="activeTab"
+          transition={{ type: 'spring', stiffness: 750, damping: 60 }}
+        />
+      )}
+      <span className="relative">{label}</span>
     </Link>
   </li>
 );
@@ -68,39 +56,47 @@ export const ResultsTabs: FC<ResultsTabsProps> = ({ domain }) => {
   ]);
 
   return (
-    <div className="group mb-6 border-b border-zinc-950/10 text-center text-sm font-medium text-zinc-500">
-      <ul className="-mb-px flex flex-wrap">
+    <div className="group relative overflow-x-auto overflow-y-hidden rounded-xl text-center text-sm font-medium shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)]">
+      <ul className="-mb-px flex">
         <SingleTab
           label="DNS"
           href={`/lookup/${domain}`}
           selected={selectedSegment === '(dns)'}
-          shortcutNumber={1}
         />
         <SingleTab
           label="DNS Map"
           href={`/lookup/${domain}/map`}
           selected={selectedSegment === 'map'}
-          shortcutNumber={2}
         />
         <SingleTab
           label="Whois"
           href={`/lookup/${domain}/whois`}
           selected={selectedSegment === 'whois'}
-          shortcutNumber={3}
         />
         <SingleTab
           label="Certs"
           href={`/lookup/${domain}/certs`}
           selected={selectedSegment === 'certs'}
-          shortcutNumber={4}
         />
         <SingleTab
           label="Subdomains"
           href={`/lookup/${domain}/subdomains`}
           selected={selectedSegment === 'subdomains'}
-          shortcutNumber={5}
         />
       </ul>
+
+      <ClientOnly>
+        <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border border-zinc-200 bg-white px-1.5 font-mono text-[10px] font-medium opacity-100 dark:border-zinc-700 dark:bg-zinc-800 sm:flex">
+          {isAppleDevice() ? (
+            <>
+              <OptionIcon className="inline-block h-2 w-2" strokeWidth={3} />{' '}
+              1-5
+            </>
+          ) : (
+            'ctrl+1-5'
+          )}
+        </kbd>
+      </ClientOnly>
     </div>
   );
 };
diff --git a/app/lookup/[domain]/layout.tsx b/app/lookup/[domain]/layout.tsx
index 9568938..8ca27f9 100644
--- a/app/lookup/[domain]/layout.tsx
+++ b/app/lookup/[domain]/layout.tsx
@@ -90,12 +90,13 @@ const LookupLayout: FC<LookupLayoutProps> = async (props) => {
           <WhoisQuickInfo domain={domain} />
         </div>
 
+        <div className="container">
+          <ResultsTabs domain={domain} />
+        </div>
+
         <div className="flex flex-1 flex-col p-3">
-          <Card className="flex-1 pb-12">
-            <div className="container">
-              <ResultsTabs domain={domain} />
-              {children}
-            </div>
+          <Card className="flex-1 py-8">
+            <div className="container px-5">{children}</div>
           </Card>
         </div>
       </main>
diff --git a/package.json b/package.json
index 1798f12..bb0a3a6 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "lucide-react": "^0.456.0",
+    "motion": "^11.15.0",
     "ms": "^2.1.3",
     "natural-compare-lite": "^1.4.0",
     "next": "15.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec056d3..ed7fd8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       lucide-react:
         specifier: ^0.456.0
         version: 0.456.0(react@19.0.0)
+      motion:
+        specifier: ^11.15.0
+        version: 11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       ms:
         specifier: ^2.1.3
         version: 2.1.3
@@ -2700,6 +2703,20 @@ packages:
   frame-ticker@1.0.3:
     resolution: {integrity: sha512-E0X2u2JIvbEMrqEg5+4BpTqaD22OwojJI63K7MdKHdncjtAhGRbCR8nJCr2vwEt9NWBPCPcu70X9smPviEBy8Q==}
 
+  framer-motion@11.15.0:
+    resolution: {integrity: sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fromentries@1.3.2:
     resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==}
 
@@ -3141,6 +3158,26 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  motion-dom@11.14.3:
+    resolution: {integrity: sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==}
+
+  motion-utils@11.14.3:
+    resolution: {integrity: sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==}
+
+  motion@11.15.0:
+    resolution: {integrity: sha512-iZ7dwADQJWGsqsSkBhNHdI2LyYWU+hA1Nhy357wCLZq1yHxGImgt3l7Yv0HT/WOskcYDq9nxdedyl4zUv7UFFw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -6849,6 +6886,15 @@ snapshots:
     dependencies:
       simplesignal: 2.1.7
 
+  framer-motion@11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      motion-dom: 11.14.3
+      motion-utils: 11.14.3
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   fromentries@1.3.2: {}
 
   fsevents@2.3.3:
@@ -7251,6 +7297,18 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  motion-dom@11.14.3: {}
+
+  motion-utils@11.14.3: {}
+
+  motion@11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      framer-motion: 11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   ms@2.1.3: {}
 
   mz@2.7.0: