diff --git a/apps/enji.dev/next.config.mjs b/apps/enji.dev/next.config.mjs
index f28cfbca..6d5b111a 100644
--- a/apps/enji.dev/next.config.mjs
+++ b/apps/enji.dev/next.config.mjs
@@ -11,6 +11,11 @@ const nextConfig = {
       destination: '/work/skills-and-tools',
       permanent: false,
     },
+    {
+      source: '/docs',
+      destination: '/docs/tailwindcss-accent',
+      permanent: false,
+    },
   ],
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
   reactStrictMode: true,
diff --git a/apps/enji.dev/src/components/Footer.tsx b/apps/enji.dev/src/components/Footer.tsx
index 489d809e..3147c91c 100644
--- a/apps/enji.dev/src/components/Footer.tsx
+++ b/apps/enji.dev/src/components/Footer.tsx
@@ -1,5 +1,13 @@
 import clsx from 'clsx';
 import { m } from 'framer-motion';
+import Link from 'next/link';
+
+import {
+  ExternalLink,
+  FigmaIcon,
+  GitHubIcon,
+  TwitterIcon,
+} from '@/components/Icons';
 
 import useLastUpdate from '@/hooks/useLastUpdate';
 
@@ -36,43 +44,211 @@ function LastUpdate() {
   );
 }
 
+interface FooterLinkProps {
+  title: string;
+  href: string;
+  label?: 'new' | 'soon';
+  isInternal?: boolean;
+}
+
+function FooterLink({
+  title,
+  href,
+  label = undefined,
+  isInternal = true,
+}: FooterLinkProps) {
+  if (label === 'soon') {
+    return (
+      <span className={clsx('footer-link footer-link--soon')}>
+        {title}
+        <span className={clsx('footer-link__label')}>{label}</span>
+      </span>
+    );
+  }
+
+  if (isInternal) {
+    return (
+      <Link href={href} className={clsx('footer-link')}>
+        {title}
+        {label && <span className={clsx('footer-link__label')}>{label}</span>}
+      </Link>
+    );
+  }
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className={clsx('footer-link')}
+    >
+      {title}
+      <ExternalLink className={clsx('h-3.5 w-3.5')} />
+      {label && <span className={clsx('footer-link__label')}>{label}</span>}
+    </a>
+  );
+}
+
+interface FooterGroupProps {
+  title: string;
+  links: Array<FooterLinkProps>;
+}
+
+function FooterGroup({ title, links }: FooterGroupProps) {
+  return (
+    <div className={clsx('flex-1')}>
+      <div
+        className={clsx(
+          'mb-2 px-2 text-[13px] text-slate-600',
+          'dark:text-slate-400'
+        )}
+      >
+        {title}
+      </div>
+      <ul className={clsx('flex flex-col')}>
+        {links.map(({ title: linkTitle, href, label, isInternal }) => (
+          <li key={href}>
+            <FooterLink
+              title={linkTitle}
+              href={href}
+              label={label}
+              isInternal={isInternal}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function FooterDescription() {
+  return (
+    <div className={clsx('max-w-[348px]')}>
+      <div
+        className={clsx(
+          'mb-3 text-[13px] text-slate-600',
+          'dark:text-slate-400'
+        )}
+      >
+        About Me
+      </div>
+      <p className={clsx('mb-4 font-normal')}>
+        I&apos;m Enji, a <strong>front-end developer</strong> who loves
+        intuitive, clean and modern UI design.
+      </p>
+      <ul className={clsx('-ml-2 flex gap-1')}>
+        <li>
+          <a
+            href="https://twitter.com/enjidev"
+            target="_blank"
+            rel="noreferrer"
+            className={clsx('flex h-9 w-9 items-center justify-center')}
+            aria-label="My Twitter profile"
+            title="My Twitter profile"
+          >
+            <TwitterIcon className={clsx('h-5 w-5')} />
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://github.com/enjidev"
+            target="_blank"
+            rel="noreferrer"
+            className={clsx('flex h-9 w-9 items-center justify-center')}
+            aria-label="My GitHub profile"
+            title="My GitHub profile"
+          >
+            <GitHubIcon className={clsx('h-5 w-5')} />
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://figma.com/@enjidev"
+            target="_blank"
+            rel="noreferrer"
+            className={clsx('flex h-9 w-9 items-center justify-center')}
+            aria-label="My Figma profile"
+            title="My Figma profile"
+          >
+            <FigmaIcon className={clsx('h-5 w-5')} />
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
 function Footer() {
   return (
     <footer
       className={clsx(
-        'background-grid background-grid--fade-in border-divider-light mt-24 pt-8 text-sm text-slate-900',
+        'background-grid background-grid--fade-in border-divider-light mt-24 pt-16 text-sm text-slate-900',
         'dark:border-divider-dark dark:text-slate-200'
       )}
     >
       <div className={clsx('content-wrapper')}>
         <div className={clsx('py-10 font-semibold')}>
-          <ul
-            className={clsx(
-              'flex flex-wrap justify-center gap-x-2 gap-y-1',
-              'lg:gap-x-4'
-            )}
-          >
-            <li>
-              <a
-                href="https://www.figma.com/community/file/1176392613303840973"
-                target="_blank"
-                rel="noreferrer"
-                className={clsx('block px-2 py-1')}
-              >
-                Design Concept
-              </a>
-            </li>
-            <li>
-              <a
-                href="https://github.com/enjidev/enji.dev"
-                target="_blank"
-                rel="noreferrer"
-                className={clsx('block px-2 py-1')}
-              >
-                Source Code
-              </a>
-            </li>
-          </ul>
+          <div className={clsx('flex flex-col-reverse gap-16', 'lg:flex-row')}>
+            <div className={clsx('flex-1')}>
+              <FooterDescription />
+            </div>
+            <div
+              className={clsx(
+                '-mx-2 flex flex-1 flex-col gap-8',
+                'sm:flex-row sm:gap-16 lg:mx-0'
+              )}
+            >
+              <div className={clsx('flex', 'sm:gap-16')}>
+                <FooterGroup
+                  title="Work"
+                  links={[
+                    { title: 'Contact', href: '/work/contact' },
+                    { title: 'Experience', href: '/work/experience' },
+                    {
+                      title: 'Services',
+                      href: '/work/services',
+                      label: 'soon',
+                    },
+                    {
+                      title: 'Skills and Tools',
+                      href: '/work/skills-and-tools',
+                    },
+                    { title: 'Studio', href: '/work/studio' },
+                  ]}
+                />
+                <FooterGroup
+                  title="Learn"
+                  links={[
+                    {
+                      title: 'Docs',
+                      href: '/docs',
+                    },
+                    {
+                      title: 'Personal Blog',
+                      href: '/blog',
+                    },
+                  ]}
+                />
+              </div>
+              <div className={clsx('flex', 'sm:gap-16')}>
+                <FooterGroup
+                  title="This Site"
+                  links={[
+                    {
+                      title: 'Design Concept',
+                      href: 'https://www.figma.com/community/file/1176392613303840973',
+                      isInternal: false,
+                    },
+                    {
+                      title: 'Source Code',
+                      href: 'https://github.com/enjidev/enji.dev',
+                      isInternal: false,
+                    },
+                  ]}
+                />
+              </div>
+            </div>
+          </div>
         </div>
         <div
           className={clsx(
diff --git a/apps/enji.dev/src/styles/components.css b/apps/enji.dev/src/styles/components.css
index 6cecb83a..f1081954 100644
--- a/apps/enji.dev/src/styles/components.css
+++ b/apps/enji.dev/src/styles/components.css
@@ -179,4 +179,19 @@
       @apply bg-accent-600/20 absolute bottom-1 left-0 right-0 z-[-1] h-2 origin-bottom scale-y-[.4] transition-transform content-[''];
     }
   }
+
+  .footer-link {
+    @apply flex h-8 items-center gap-2 whitespace-nowrap px-2 py-1 text-sm text-slate-900;
+    @apply dark:text-slate-200;
+
+    &__label {
+      @apply border-divider-light rounded-full border px-2 py-0 text-[10px] uppercase text-slate-900;
+      @apply dark:text-slate-200;
+    }
+
+    &--soon {
+      @apply cursor-not-allowed text-slate-600;
+      @apply dark:text-slate-400;
+    }
+  }
 }