diff --git a/src/components/buttons/IconButton.tsx b/src/components/buttons/IconButton.tsx
index cc1845e..7fbe79a 100644
--- a/src/components/buttons/IconButton.tsx
+++ b/src/components/buttons/IconButton.tsx
@@ -2,8 +2,8 @@ import Image from 'next/future/image';
 import { PropsWithChildren } from 'react';
 
 export interface IconButtonProps {
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   classes?: string;
   onClick?: () => void;
   disabled?: boolean;
@@ -13,7 +13,8 @@ export interface IconButtonProps {
 }
 
 export function IconButton(props: PropsWithChildren<IconButtonProps>) {
-  const { width, height, classes, onClick, imgSrc, disabled, title, passThruProps } = props;
+  const { width, height, classes, onClick, imgSrc, disabled, title, children, passThruProps } =
+    props;
 
   const base = 'flex items-center justify-center transition-all';
   const onHover = 'hover:opacity-70';
@@ -31,6 +32,7 @@ export function IconButton(props: PropsWithChildren<IconButtonProps>) {
       {...passThruProps}
     >
       <Image src={imgSrc} alt={title || ''} width={width} height={height} />
+      {children}
     </button>
   );
 }
diff --git a/src/components/icons/BigChevron.tsx b/src/components/icons/BigChevron.tsx
new file mode 100644
index 0000000..92399f0
--- /dev/null
+++ b/src/components/icons/BigChevron.tsx
@@ -0,0 +1,49 @@
+import { memo } from 'react';
+
+import { Color } from '../../styles/Color';
+
+interface Props {
+  width?: string | number;
+  height?: string | number;
+  direction: 'n' | 'e' | 's' | 'w';
+  color?: string;
+  classes?: string;
+}
+
+function _BigChevron({ width, height, direction, color, classes }: Props) {
+  let directionClass;
+  switch (direction) {
+    case 'n':
+      directionClass = '-rotate-90';
+      break;
+    case 'e':
+      directionClass = '';
+      break;
+    case 's':
+      directionClass = 'rotate-90';
+      break;
+    case 'w':
+      directionClass = 'rotate-180';
+      break;
+    default:
+      throw new Error(`Invalid chevron direction ${direction}`);
+  }
+
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="1.2 1 139.1 322"
+      width={width}
+      height={height}
+      className={`${directionClass} ${classes}`}
+    >
+      <path
+        d="M6.3 1h61.3a20 20 0 0 1 18.7 13L140 158.3a5 5 0 0 1 0 3.4l-.3.9-53.5 147.2A20 20 0 0 1 67.4 323H6.2a5 5 0 0 1-4.7-6.6l55.2-158.1L1.7 7.7A5 5 0 0 1 6.2 1Z"
+        fill={color || Color.primaryBlack}
+      ></path>
+    </svg>
+  );
+}
+
+export const BigChevron = memo(_BigChevron);
diff --git a/src/components/input/SelectField.tsx b/src/components/input/SelectField.tsx
index 70ebcd0..a551092 100644
--- a/src/components/input/SelectField.tsx
+++ b/src/components/input/SelectField.tsx
@@ -19,7 +19,7 @@ export function SelectField(props: Props) {
 
   return (
     <select
-      className={`px-2 py-1 text-sm border border-gray-500 rounded bg-transparent invalid:text-gray-400 ${
+      className={`px-2 py-1 text-sm border border-gray-400 rounded bg-transparent invalid:text-gray-400 ${
         classes || ''
       }`}
       {...passThruProps}
diff --git a/src/components/nav/Footer.tsx b/src/components/nav/Footer.tsx
index 859b4f1..e480591 100644
--- a/src/components/nav/Footer.tsx
+++ b/src/components/nav/Footer.tsx
@@ -1,55 +1,79 @@
 import Image from 'next/future/image';
+import Link from 'next/link';
 
 import { links } from '../../consts/links';
-import Book from '../../images/icons/book.svg';
-import Briefcase from '../../images/icons/briefcase.svg';
-import InfoCircle from '../../images/icons/info-circle.svg';
 import Discord from '../../images/logos/discord.svg';
 import Github from '../../images/logos/github.svg';
 import Hyperlane from '../../images/logos/hyperlane-logo.svg';
+import Medium from '../../images/logos/medium.svg';
 import Twitter from '../../images/logos/twitter.svg';
 
 export function Footer() {
   return (
-    <footer className="mt-3 px-4 py-4 sm:pl-6 sm:pr-8 opacity-80">
-      <div className="flex justify-between items-center">
+    <footer className="mt-2 px-4 py-6 sm:px-10 opacity-80">
+      <div className="flex flex-col sm:flex-row sm:justify-between items-center gap-6 sm:gap-0">
         <div className="flex items-center">
           <div className="flex scale-90 sm:scale-100">
-            <Image src={Hyperlane} width={52} height={52} alt="" />
+            <Image src={Hyperlane} width={56} height={56} alt="" />
           </div>
           <div className="flex flex-col ml-3">
-            <p className="text-sm font-light">
+            <p className="text-sm font-light leading-5">
               <span className="text-base font-medium">Hyperlane</span> is the platform
               <br />
               for developers building
               <br />
-              the interchain universe
+              the interchain universe.
             </p>
           </div>
         </div>
-        <div className="grid grid-rows-2 grid-cols-3 gap-y-4 gap-x-5 md:gap-x-8">
-          <FooterIconLink to={links.twitter} imgSrc={Twitter} text="Twitter" />
-          <FooterIconLink to={links.docs} imgSrc={Book} text="Docs" />
-          <FooterIconLink to={links.home} imgSrc={InfoCircle} text="About" />
-          <FooterIconLink to={links.discord} imgSrc={Discord} text="Discord" />
-          <FooterIconLink to={links.github} imgSrc={Github} text="Github" />
-          <FooterIconLink to={links.jobs} imgSrc={Briefcase} text="Jobs" />
+        <div className="flex">
+          <div className="flex flex-col">
+            <FooterLink href={links.home} text="About" />
+            <FooterLink href={links.docs} text="Docs" />
+            <FooterLink href={links.chains} text="Chains" />
+            <FooterLink href={links.jobs} text="Jobs" />
+          </div>
+          <div className="flex flex-col ml-24 sm:ml-16">
+            <FooterIconLink href={links.twitter} imgSrc={Twitter} text="Twitter" />
+            <FooterIconLink href={links.discord} imgSrc={Discord} text="Discord" />
+            <FooterIconLink href={links.github} imgSrc={Github} text="Github" />
+            <FooterIconLink href={links.blog} imgSrc={Medium} text="Blog" />
+          </div>
         </div>
       </div>
     </footer>
   );
 }
 
-function FooterIconLink({ to, imgSrc, text }: { to: string; imgSrc: any; text: string }) {
+function FooterLink({ href, text }: { href: string; text: string }) {
+  const aClasses =
+    'mt-1.5 text-sm hover:underline underline-offset-4 hover:opacity-70 transition-all';
+
+  if (href[0] === '/') {
+    return (
+      <Link href={href}>
+        <a className={aClasses}>{text}</a>
+      </Link>
+    );
+  } else {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className={aClasses}>
+        {text}
+      </a>
+    );
+  }
+}
+
+function FooterIconLink({ href, imgSrc, text }: { href: string; imgSrc: any; text: string }) {
   return (
     <a
-      href={to}
+      href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex items-center hover:underline hover:opacity-70 transition-all"
+      className="mt-1.5 flex items-center hover:underline underline-offset-4 hover:opacity-70 transition-all"
     >
-      <Image src={imgSrc} alt={text} width={18} height={18} />
-      <span className="hidden sm:inline ml-2 text-sm">{text}</span>
+      <Image src={imgSrc} width={18} height={18} alt="" />
+      <span className="ml-2.5 text-sm">{text}</span>
     </a>
   );
 }
diff --git a/src/components/nav/Header.tsx b/src/components/nav/Header.tsx
index feac733..24ce17e 100644
--- a/src/components/nav/Header.tsx
+++ b/src/components/nav/Header.tsx
@@ -18,20 +18,22 @@ export function Header({ pathName }: { pathName: string }) {
   };
 
   return (
-    <header className="p-2 sm:py-3 sm:pl-6 sm:pr-10 w-full">
+    <header className="px-2 pt-4 pb-3 sm:pt-5 sm:pb-3 sm:pl-6 sm:pr-10 w-full">
       <div className="flex items-center justify-between">
         <Link href="/">
           <a className="flex items-center">
             <div className="flex items-center scale-90 sm:scale-100">
-              <Image src={Logo} width={24} height={28} alt="" />
-              <Image src={Name} width={124} height={28} alt="Hyperlane" className="ml-2 pt-px" />
-              <div className="font-serif text-[1.85rem] text-blue-500 ml-2">Explorer</div>
+              <Image src={Logo} width={22} height={22} alt="" />
+              <Image src={Name} width={110} height={22} alt="Hyperlane" className="ml-2 pt-1" />
+              <div className="font-serif text-[1.8rem] xs:text-[1.65rem] leading-[1.2rem] text-blue-500 ml-2">
+                Explorer
+              </div>
             </div>
           </a>
         </Link>
         <nav className="hidden sm:flex sm:space-x-8 sm:items-center md:space-x-10">
           <Link href="/">
-            <a className={styles.navLink + (pathName === '/' ? ' underline' : '')}>Home</a>
+            <a className={styles.navLink}>Home</a>
           </Link>
           <Link href="/debugger">
             <a className={styles.navLink + (pathName === '/debugger' ? ' underline' : '')}>
@@ -96,7 +98,7 @@ function DropdownItemContent({ icon, text }: { icon: any; text: string }) {
 
 const styles = {
   navLink:
-    'flex items-center tracking-wide text-gray-600 text-[0.95rem] hover:underline hover:opacity-70 decoration-2 underline-offset-[6px] transition-all',
+    'pt-px flex items-center tracking-wide text-gray-600 text-[0.95rem] hover:underline hover:opacity-80 active:opacity-70 decoration-2 underline-offset-[6px] transition-all',
   dropdownContainer: 'dropdown-menu w-[7.5rem] mt-1 mr-px bg-gray-50',
   dropdownOption:
     'flex items-center cursor-pointer p-2 mt-1 rounded text-gray-600 hover:underline decoration-2 underline-offset-4 transition-all',
diff --git a/src/consts/links.ts b/src/consts/links.ts
index 1c46e22..8a6e131 100644
--- a/src/consts/links.ts
+++ b/src/consts/links.ts
@@ -3,6 +3,8 @@ export const links = {
   discord: 'https://discord.gg/VK9ZUy3aTV',
   github: 'https://github.com/hyperlane-xyz',
   docs: 'https://docs.hyperlane.xyz/hyperlane-docs',
+  chains: 'https://docs.hyperlane.xyz/hyperlane-docs/developers/domains',
   jobs: 'https://jobs.lever.co/Hyperlane',
   twitter: 'https://twitter.com/hyperlane_xyz',
+  blog: 'https://medium.com/hyperlane',
 };
diff --git a/src/images/logos/discord-alt.svg b/src/images/logos/discord-alt.svg
new file mode 100644
index 0000000..69b452f
--- /dev/null
+++ b/src/images/logos/discord-alt.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 55"><g clip-path="url(#a)"><path d="M60.1 4.9A58.5 58.5 0 0 0 45.4.5l-1.8 3.7a54 54 0 0 0-16.2 0 37.4 37.4 0 0 0-2-3.8A58.4 58.4 0 0 0 10.7 5 60 60 0 0 0 .4 45.6a58.9 58.9 0 0 0 18 8.8 42 42 0 0 0 3.6-5.9l-.1-.3c-2-.7-3.8-1.6-5.6-2.6a.2.2 0 0 1 0-.4 30.3 30.3 0 0 0 1.3-.9 42 42 0 0 0 36 0l1 1c.2 0 .2.2 0 .3-1.7 1-3.6 1.9-5.5 2.6a47.2 47.2 0 0 0 3.8 6.3 58.7 58.7 0 0 0 17.8-9.1A59.5 59.5 0 0 0 60 4.9ZM23.7 37.3c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Zm23.6 0c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Z" fill="#010101"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h71v55H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/images/logos/github copy.svg b/src/images/logos/github copy.svg
new file mode 100644
index 0000000..bb4e45c
--- /dev/null
+++ b/src/images/logos/github copy.svg	
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+</svg>
\ No newline at end of file
diff --git a/src/images/logos/medium.svg b/src/images/logos/medium.svg
new file mode 100644
index 0000000..11be42c
--- /dev/null
+++ b/src/images/logos/medium.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 3 24 19.1"><path d="M2.8 6.9c0-.3 0-.6-.3-.8L.3 3.4V3h7l5.3 11.8L17.4 3H24v.4l-2 1.8c0 .2-.2.4-.1.6v13.5c0 .2 0 .4.2.5l1.9 1.8v.5h-9.5v-.5l2-1.8c.2-.2.2-.3.2-.6V8.3L11.3 22h-.7L4.3 8.3v9.2c0 .4 0 .8.3 1l2.5 3.1v.4H0v-.4l2.5-3c.3-.3.4-.7.3-1.1V6.9z"/></svg>
\ No newline at end of file