diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
index 159ea546..83271c3d 100644
--- a/ui/app/layout.tsx
+++ b/ui/app/layout.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import type { Metadata } from "next";
 import { Inter, Yanone_Kaffeesatz } from "next/font/google";
+import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import HeaderPadding from "@/components/HeaderPadding";
 import "./globals.css";
@@ -85,6 +86,8 @@ export default function RootLayout({
         <Header className="tw-fixed tw-top-0 tw-z-10" />
         <HeaderPadding />
         <main className="tw-grow">{children}</main>
+        <Footer />
+        <div id="portal" />
       </body>
     </html>
   );
diff --git a/ui/app/page.tsx b/ui/app/page.tsx
index 7583f374..2934b3f0 100644
--- a/ui/app/page.tsx
+++ b/ui/app/page.tsx
@@ -1,9 +1,47 @@
+import MetaImg from "@/public/meta.jpg";
+import Article from "@/components/Article";
+import Banner from "@/components/Banner";
+import Button from "@/components/Button";
 import Container from "@/components/Container";
 
 export default function Home() {
   return (
-    <Container>
-      <p>hello world</p>
-    </Container>
+    <>
+      <Banner src={MetaImg} />
+      <Container>
+        <Article>
+          <section>
+            <h1>sciwork 是什麼？</h1>
+            <p>
+              The sciwork is a community for researchers and engineers to share
+              and discuss computer code for scientific, numerical, and
+              engineering work. We believe in the power of openness, and use
+              open source as a means to advance software development for
+              computational sciences.
+            </p>
+            <p>
+              As information technology blending in every aspect of human
+              activities, proficient use of programming languages is a
+              prerequisite for conducting most research and engineering work. As
+              the practitioners observed, the work evolved into a hierarchy of
+              skills that take years to acquire. We need a thorough
+              understanding of the problem to solve as well as the mastery of
+              computer programming to deliver reliable solution. It is overly
+              challenging since either of both is already complicated. Sciwork
+              would like to get involved in the global effort to solve the issue
+              of code development entangling with science and engineering.
+            </p>
+            <p>
+              Our activities include but are not limited to coding sprints,
+              hands-on tutorials, and technical talks and conferences (ex,
+              sciwork 2023), on-line or off-line. You are welcome to join us!
+            </p>
+            <Button variant="action" to="https://sciwork.dev">
+              前往 sciwork 官網
+            </Button>
+          </section>
+        </Article>
+      </Container>
+    </>
   );
 }
diff --git a/ui/components/Article.tsx b/ui/components/Article.tsx
new file mode 100644
index 00000000..b59cf849
--- /dev/null
+++ b/ui/components/Article.tsx
@@ -0,0 +1,18 @@
+import Container from "@/components/Container";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Article = ({ children }: Props) => {
+  return (
+    <Container
+      as="article"
+      className="tw-prose tw-mb-12 tw-mt-2 tw-max-w-none prose-headings:tw-font-yk prose-headings:tw-font-normal tablet:tw-mb-32 tablet:tw-mt-10"
+    >
+      {children}
+    </Container>
+  );
+};
+
+export default Article;
diff --git a/ui/components/Banner.tsx b/ui/components/Banner.tsx
new file mode 100644
index 00000000..ddb821ed
--- /dev/null
+++ b/ui/components/Banner.tsx
@@ -0,0 +1,20 @@
+import Image, { StaticImageData } from "next/image";
+
+type Props = {
+  src: string | StaticImageData;
+};
+
+const Banner = ({ src }: Props) => {
+  return (
+    <div className="tw-relative tw-w-full tablet:tw-h-[500px] tw-h-96">
+      <Image
+        className="tw-object-center tw-object-cover"
+        src={src}
+        alt="Banner"
+        fill
+      />
+    </div>
+  );
+};
+
+export default Banner;
diff --git a/ui/components/Button.tsx b/ui/components/Button.tsx
new file mode 100644
index 00000000..64500714
--- /dev/null
+++ b/ui/components/Button.tsx
@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import NextLink, { LinkProps as InternalLinkProps } from 'next/link';
+import { HTMLProps, MouseEvent } from 'react';
+
+type Props = {
+  className?: string;
+  variant?: 'default' | 'action';
+  children: React.ReactNode;
+  to?: string;
+  onClick?: () => void;
+};
+
+const Button = ({
+  className,
+  variant = 'default',
+  children,
+  to,
+  onClick,
+  ...rest
+}: Props & HTMLProps<HTMLButtonElement>) => {
+  let Component: any = to ? NextLink : 'button';
+  let props:
+    | {
+        href?: string;
+        onClick?: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+      }
+    | InternalLinkProps = {};
+
+  if (to) {
+    props['href'] = to;
+  }
+
+  if (onClick) {
+    props['onClick'] = onClick;
+  }
+
+  return (
+    <Component
+      className={clsx(
+        'tw-px-4 tw-pb-2 tw-pt-3 tw-font-yk tw-text-lg tw-font-normal tw-no-underline tw-outline-none focus:tw-ring-2 tablet:tw-text-lg',
+        className,
+        {
+          'tw-rounded-md tw-text-neutral-950 hover:tw-ring-1 hover:tw-ring-neutral-400':
+            variant === 'default',
+          'tw-rounded-full tw-bg-yellow-300 tw-text-black hover:tw-bg-yellow-400':
+            variant === 'action',
+        },
+      )}
+      {...props}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default Button;
diff --git a/ui/components/Drawer.tsx b/ui/components/Drawer.tsx
new file mode 100644
index 00000000..e91b157a
--- /dev/null
+++ b/ui/components/Drawer.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { Transition, TransitionChild } from "@headlessui/react";
+import { MouseEvent, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+type Props = {
+  show: boolean;
+  onClick: (e: MouseEvent<HTMLDivElement>) => void;
+  children: React.ReactNode;
+};
+
+const Drawer = ({ show, onClick, children }: Props) => {
+  const ref = useRef<Element | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    ref.current = document.querySelector<HTMLElement>("#portal");
+    setMounted(true);
+  }, []);
+
+  if (!mounted || !ref.current) return null;
+
+  return createPortal(
+    <Transition show={show}>
+      <TransitionChild>
+        <div
+          className="tw-fixed tw-inset-0 tw-z-10 tw-bg-black tw-transition-opacity tw-ease-linear tw-duration-300 tw-opacity-50 data-[closed]:tw-opacity-0"
+          onClick={onClick}
+        />
+      </TransitionChild>
+      <TransitionChild
+        as="div"
+        className="tw-fixed tw-left-0 tw-top-0 tw-z-50 tw-h-screen tw-min-w-[300px] tw-bg-gray-200"
+        enter="tw-transition tw-ease-in-out tw-duration-300 tw-transform"
+        enterFrom="-tw-translate-x-full"
+        enterTo="tw-translate-x-0"
+        leave="tw-transition tw-ease-in-out tw-duration-300 tw-transform"
+        leaveFrom="tw-translate-x-0"
+        leaveTo="-tw-translate-x-full"
+      >
+        {children}
+      </TransitionChild>
+    </Transition>,
+    ref.current,
+  );
+};
+
+export default Drawer;
diff --git a/ui/components/DrawerLink.tsx b/ui/components/DrawerLink.tsx
new file mode 100644
index 00000000..794b0adb
--- /dev/null
+++ b/ui/components/DrawerLink.tsx
@@ -0,0 +1,19 @@
+import NextLink from 'next/link';
+
+const DrawerLink = ({
+  children,
+  to,
+}: {
+  children: React.ReactNode;
+  to: string;
+}) => {
+  return (
+    <NextLink className="tw-block tw-w-full tw-font-yk" href={to}>
+      <div className="tw-px-8 tw-py-2 tw-text-2xl tw-font-medium tw-leading-loose tw-text-black hover:tw-text-sky-600">
+        {children}
+      </div>
+    </NextLink>
+  );
+};
+
+export default DrawerLink;
diff --git a/ui/components/Footer.tsx b/ui/components/Footer.tsx
new file mode 100644
index 00000000..c9f7e043
--- /dev/null
+++ b/ui/components/Footer.tsx
@@ -0,0 +1,53 @@
+import {
+  faDiscord,
+  faSquareFacebook,
+  faTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+import Container from "@/components/Container";
+import SocialLink from "@/components/SocialLink";
+
+const Footer = () => {
+  return (
+    <footer className="tw-w-full">
+      <Container className=" tw-bg-sky-950 tw-text-white tw-py-10">
+        <div className="tw-flex tw-flex-row">
+          <div className="tw-basis-1/2">
+            <h2 className="tw-text-3xl tw-font-yk">Follow us</h2>
+            <div className="tw-my-2">
+              <SocialLink
+                icon={faTwitter}
+                to="https://twitter.com/intent/tweet?screen_name=sciwork&ref_src=twsrc%5Etfw"
+              >
+                @sciwork
+              </SocialLink>
+              <SocialLink icon={faDiscord} to="https://discord.gg/6MAkFrD">
+                Discord
+              </SocialLink>
+              <SocialLink
+                icon={faSquareFacebook}
+                to="https://www.facebook.com/sciworkdev"
+              >
+                Facebook
+              </SocialLink>
+            </div>
+          </div>
+          <div className="tw-basis-1/2">
+            <h2 className="tw-text-3xl tw-font-yk">Contact us</h2>
+            <div className="tw-my-2">
+              <a
+                className="hover:tw-cursor-pointer hover:tw-text-sky-600"
+                target="_blank"
+                href="mailto:contact@sciwork.dev"
+              >
+                contact@sciwork.dev
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="tw-mt-8">Website is powered by Next.js.</div>
+      </Container>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/ui/components/Header.tsx b/ui/components/Header.tsx
index a80ee27c..606bf4a8 100644
--- a/ui/components/Header.tsx
+++ b/ui/components/Header.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import routes from "@/configurations/routes";
 import Logo from "@/components/Logo";
+import MobileNavigator from "@/components/MobileNavigator";
 import NavLink from "@/components/NavLink";
 
 type Props = {
@@ -17,6 +18,9 @@ const Header = ({ className }: Props) => {
         role="navigation"
       >
         <div className="tw-grow">
+          <div className="desktop:tw-hidden">
+            <MobileNavigator />
+          </div>
           <div className="tw-hidden tw-pt-2 desktop:tw-block">
             <Logo variant="light" />
           </div>
diff --git a/ui/components/MobileNavigator.tsx b/ui/components/MobileNavigator.tsx
new file mode 100644
index 00000000..4357ffab
--- /dev/null
+++ b/ui/components/MobileNavigator.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import routes from "@/configurations/routes";
+import Button from "@/components/Button";
+import Drawer from "@/components/Drawer";
+import DrawerLink from "@/components/DrawerLink";
+import Logo from "@/components/Logo";
+
+const MobileNavigator = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const toggleMenu = () => setIsMenuOpen((prev) => !prev);
+  return (
+    <>
+      <div className="tw-flex tw-justify-between tw-items-center">
+        <Logo variant="light" />
+        <Button onClick={toggleMenu} className="tw-pb-4">
+          <FontAwesomeIcon className="tw-text-black" icon={faBars} />
+        </Button>
+      </div>
+      <Drawer show={isMenuOpen} onClick={toggleMenu}>
+        <div
+          className="tw-border-b tw-px-4 tw-pb-2 tw-pt-3 tw-h-20 tw-flex tw-items-center"
+          onClick={toggleMenu}
+        >
+          <Logo variant="light" />
+        </div>
+        <div onClick={toggleMenu}>
+          {routes
+            .filter((route) => !route.disabled)
+            .map((route) => (
+              <DrawerLink key={route.path} to={route.path}>
+                {route.name}
+              </DrawerLink>
+            ))}
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+export default MobileNavigator;
diff --git a/ui/components/SocialLink.tsx b/ui/components/SocialLink.tsx
new file mode 100644
index 00000000..9416311e
--- /dev/null
+++ b/ui/components/SocialLink.tsx
@@ -0,0 +1,26 @@
+import NextLink from "next/link";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  icon: IconProp;
+  to: string;
+  children?: React.ReactNode;
+};
+
+const SocialLink = ({ icon, to, children }: Props) => {
+  return (
+    <NextLink
+      className="tw-text-white tw-flex tw-items-center hover:tw-text-sky-600"
+      href={to}
+      target="_blank"
+    >
+      <div className="fa-layers fa-fw fa-3x">
+        <FontAwesomeIcon icon={icon} transform="shrink-8" />
+      </div>
+      {children}
+    </NextLink>
+  );
+};
+
+export default SocialLink;
diff --git a/ui/package.json b/ui/package.json
index 8ee9e61f..75979818 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,6 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@headlessui/react": "^2.1.2",
     "@tailwindcss/typography": "^0.5.13",
     "clsx": "^2.1.1",
     "next": "14.2.4",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index dd0fa28f..c5292ebb 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -162,6 +162,85 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.4.tgz#0140cf5091c8dee602bff9da5ab330840ff91df6"
+  integrity sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.4"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.7.tgz#85d22f731fcc5b209db504478fb1df5116a83015"
+  integrity sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.4"
+
+"@floating-ui/react-dom@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0"
+  integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/react@^0.26.16":
+  version "0.26.19"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.19.tgz#e3c713bec8a7264caa6f8195e0865f9210f483a1"
+  integrity sha512-Jk6zITdjjIvjO/VdQFvpRaD3qPwOHH6AoDHxjhpy+oK4KFgaSP871HYWUAPdnLmx1gQ+w/pB312co3tVml+BXA==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.1"
+    "@floating-ui/utils" "^0.2.4"
+    tabbable "^6.0.0"
+
+"@floating-ui/utils@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.4.tgz#1d459cee5031893a08a0e064c406ad2130cced7c"
+  integrity sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==
+
+"@fortawesome/fontawesome-common-types@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz#31ab07ca6a06358c5de4d295d4711b675006163f"
+  integrity sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==
+
+"@fortawesome/fontawesome-svg-core@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz#2a24c32ef92136e98eae2ff334a27145188295ff"
+  integrity sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.6.0"
+
+"@fortawesome/free-brands-svg-icons@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz#2797f2cc66d21e7e47fa64e680b8835e8d30e825"
+  integrity sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.6.0"
+
+"@fortawesome/free-solid-svg-icons@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz#061751ca43be4c4d814f0adbda8f006164ec9f3b"
+  integrity sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.6.0"
+
+"@fortawesome/react-fontawesome@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
+  integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
+  dependencies:
+    prop-types "^15.8.1"
+
+"@headlessui/react@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-2.1.2.tgz#3ca9378d7d0db6aefdb135f957815790786214ef"
+  integrity sha512-Kb3hgk9gRNRcTZktBrKdHhF3xFhYkca1Rk6e1/im2ENf83dgN54orMW0uSKTXFnUpZOUFZ+wcY05LlipwgZIFQ==
+  dependencies:
+    "@floating-ui/react" "^0.26.16"
+    "@react-aria/focus" "^3.17.1"
+    "@react-aria/interactions" "^3.21.3"
+    "@tanstack/react-virtual" "^3.8.1"
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -308,6 +387,57 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@react-aria/focus@^3.17.1":
+  version "3.17.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.17.1.tgz#c796a188120421e2fedf438cadacdf463c77ad29"
+  integrity sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ==
+  dependencies:
+    "@react-aria/interactions" "^3.21.3"
+    "@react-aria/utils" "^3.24.1"
+    "@react-types/shared" "^3.23.1"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
+"@react-aria/interactions@^3.21.3":
+  version "3.21.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.21.3.tgz#a2a3e354a8b894bed7a46e1143453f397f2538d7"
+  integrity sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==
+  dependencies:
+    "@react-aria/ssr" "^3.9.4"
+    "@react-aria/utils" "^3.24.1"
+    "@react-types/shared" "^3.23.1"
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/ssr@^3.9.4":
+  version "3.9.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.4.tgz#9da8b10342c156e816dbfa4c9e713b21f274d7ab"
+  integrity sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/utils@^3.24.1":
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.24.1.tgz#9d16023f07c23c41793c9030a9bd203a9c8cf0a7"
+  integrity sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==
+  dependencies:
+    "@react-aria/ssr" "^3.9.4"
+    "@react-stately/utils" "^3.10.1"
+    "@react-types/shared" "^3.23.1"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
+"@react-stately/utils@^3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.10.1.tgz#dc8685b4994bef0dc10c37b024074be8afbfba62"
+  integrity sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-types/shared@^3.23.1":
+  version "3.23.1"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.23.1.tgz#2f23c81d819d0ef376df3cd4c944be4d6bce84c3"
+  integrity sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==
+
 "@rushstack/eslint-patch@^1.3.3":
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz#391d528054f758f81e53210f1a1eebcf1a8b1d20"
@@ -326,6 +456,13 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.12"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.12.tgz#37aaca95284019eb5d2207101249435659709f4b"
+  integrity sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==
+  dependencies:
+    tslib "^2.4.0"
+
 "@tailwindcss/typography@^0.5.13":
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.13.tgz#cd788a4fa4d0ca2506e242d512f377b22c1f7932"
@@ -336,6 +473,18 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
+"@tanstack/react-virtual@^3.8.1":
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.8.3.tgz#3455fd7e259655ab555ac130b5ac59c3eeae98bc"
+  integrity sha512-9ICwbDUUzN99CJIGc373i8NLoj6zFTKI2Hlcmo0+lCSAhPQ5mxq4dGOMKmLYoEFyHcGQ64Bd6ZVbnPpM6lNK5w==
+  dependencies:
+    "@tanstack/virtual-core" "3.8.3"
+
+"@tanstack/virtual-core@3.8.3":
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.8.3.tgz#9db61ab2a96e43d9e035b1cfd82eeede6d52f171"
+  integrity sha512-vd2A2TnM5lbnWZnHi9B+L2gPtkSeOtJOAw358JqokIH1+v2J7vUAzFVPwB/wrye12RFOurffXu33plm4uQ+JBQ==
+
 "@trivago/prettier-plugin-sort-imports@^4.3.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz#725f411646b3942193a37041c84e0b2116339789"
@@ -740,7 +889,7 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^2.1.1:
+clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -2733,6 +2882,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tabbable@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 tailwindcss@^3.4.1:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"