diff --git a/src/app/[locale]/(dashboard)/dashboard/_components/AppsContent.tsx b/src/app/[locale]/(dashboard)/dashboard/_components/AppsContent.tsx
index c7e4030..a42b62f 100644
--- a/src/app/[locale]/(dashboard)/dashboard/_components/AppsContent.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/_components/AppsContent.tsx
@@ -17,7 +17,6 @@ import { AddYourAppButton } from "./AddYourAppButton";
 import { AppCard } from "./AppCard";
 import { AppMainnetToggle } from "./AppMainnetToggle";
 import { AppsCategoryFilter } from "./AppsCategoryFilter";
-import { AppsGrid } from "./AppsGrid";
 import { AppsSideBar } from "./AppsSideBar";
 import { AppsTable } from "./AppsTable";
 import { AppsTagsFilter } from "./AppsTagsFilter";
@@ -33,11 +32,10 @@ import "react-multi-carousel/lib/styles.css";
 import "./AppsContent.scss";
 
 interface AppsContentProps {
-  newLayout?: boolean;
   currentCategory?: string;
 }
 
-export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
+export function AppsContent({ currentCategory }: AppsContentProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const network = getNetwork(searchParams.get("network"));
@@ -186,10 +184,10 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
 
   return (
     <>
+      {/* Floating section on desktop */}
       <div
         className={classNames(
-          "hidden xl:fixed xl:flex left-[20%] right-[20%] top-8 justify-center flex-wrap gap-4 mx-4 z-10",
-          newLayout ? "top-24" : "top-8"
+          "hidden xl:fixed xl:flex left-[20%] right-[20%] top-8 justify-center flex-wrap gap-4 mx-4 z-10"
         )}
       >
         <div>
@@ -213,7 +211,6 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
         </div>
         <div className="min-w-[240px] xl:hidden">
           <AppsCategoryFilter
-            newLayout={newLayout}
             selected={filters.categories?.[0]}
             setSelected={(value) => {
               updateFilters({
@@ -237,7 +234,6 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
       <div className="h-full hidden lg:block shrink-0 fixed left-8 w-[240px]">
         <div className="hide-on-very-narrow-screen">
           <AppsSideBar
-            newLayout={newLayout}
             selected={filters.categories?.[0] ?? null}
             setSelected={(value) => {
               updateFilters({
@@ -248,7 +244,6 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
         </div>
         <div className="hidden show-on-very-narrow-screen">
           <AppsCategoryFilter
-            newLayout={newLayout}
             selected={filters.categories?.[0]}
             setSelected={(value) => {
               updateFilters({
@@ -265,10 +260,9 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
         <div className="hidden lg:block" />
 
         <div className="flex flex-col gap-8 w-full xl:mx-auto xl:pr-8 max-w-[2000px]">
-          <div className="mx-6 min-w-[240px] flex items-center lg:hidden flex-wrap gap-2">
+          <div className="mx-4 min-w-[240px] flex items-center lg:hidden flex-wrap gap-2">
             <div className="w-min">
               <AppsCategoryFilter
-                newLayout={newLayout}
                 selected={filters.categories?.[0]}
                 setSelected={(value) => {
                   updateFilters({
@@ -289,43 +283,48 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
             </div>
           </div>
 
-          <div className={classNames("flex flex-wrap gap-2 mx-6 xl:hidden")}>
-            <div>
-              <SearchInput
-                className="max-w-md"
-                placeholder="Search"
-                disabled={!isUnderDesktopWindowSize}
-                value={search}
-                onValueChange={setSearch}
-              />
-            </div>
-            <div>
-              <AppMainnetToggle
-                value={filters.network ?? "Both"}
-                onChange={(value) => {
-                  updateFilters({
-                    network: value,
-                  });
-                }}
-              />
-            </div>
-            <div className="hidden lg:block">
-              <AppsTagsFilter
-                selected={filters.tags}
-                setSelected={(value) => {
-                  updateFilters({
-                    tags: value,
-                  });
-                }}
-              />
+          <div
+            className={classNames(
+              "flex flex-wrap justify-between gap-4 mx-4 xl:hidden"
+            )}
+          >
+            <div className="flex flex-wrap gap-2">
+              <div>
+                <SearchInput
+                  className="max-w-md"
+                  placeholder="Search"
+                  disabled={!isUnderDesktopWindowSize}
+                  value={search}
+                  onValueChange={setSearch}
+                />
+              </div>
+              <div>
+                <AppMainnetToggle
+                  value={filters.network ?? "Both"}
+                  onChange={(value) => {
+                    updateFilters({
+                      network: value,
+                    });
+                  }}
+                />
+              </div>
+              <div className="hidden lg:block">
+                <AppsTagsFilter
+                  selected={filters.tags}
+                  setSelected={(value) => {
+                    updateFilters({
+                      tags: value,
+                    });
+                  }}
+                />
+              </div>
             </div>
           </div>
 
           <div
             className={classNames(
               "flex justify-between w-full flex-wrap gap-8",
-              hasActiveFilters(filters) && "hidden lg:flex",
-              newLayout ? "xl:pt-16" : ""
+              hasActiveFilters(filters) && "hidden lg:flex"
             )}
           >
             <div className="flex flex-col gap-2 mx-6">
@@ -345,7 +344,7 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
           <div className="flex gap-8 flex-col-reverse 2xl:flex-row">
             {/* Apps carousel & table */}
             <div className="flex-1 flex flex-col gap-12 overflow-x-hidden">
-              {!newLayout && !search && (
+              {!search && (
                 <div className="flex flex-col gap-4">
                   <div className="lg:pl-4">
                     <Carousel
@@ -392,46 +391,24 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
                   onLoadMore={() => setPage(page + 1)}
                   hasMore={page < Math.floor(filteredApps.length / 10)}
                 >
-                  {newLayout ? (
-                    <AppsGrid
-                      apps={appsToDisplay}
-                      featuredApps={inkFeaturedApps}
-                      noAppsFound={
-                        <NoAppsFound
-                          hasSearch={!!search}
-                          resetSearch={() => setSearch("")}
-                          hasActiveFilters={hasActiveFilters(filters)}
-                          resetFilters={() => {
-                            updateFilters({
-                              network: "Mainnet",
-                              categories: [],
-                              tags: [],
-                            });
-                          }}
-                        />
-                      }
-                      network={network}
-                    />
-                  ) : (
-                    <AppsTable
-                      apps={appsToDisplay}
-                      noAppsFound={
-                        <NoAppsFound
-                          hasSearch={!!search}
-                          resetSearch={() => setSearch("")}
-                          hasActiveFilters={hasActiveFilters(filters)}
-                          resetFilters={() => {
-                            updateFilters({
-                              network: "Mainnet",
-                              categories: [],
-                              tags: [],
-                            });
-                          }}
-                        />
-                      }
-                      network={network}
-                    />
-                  )}
+                  <AppsTable
+                    apps={appsToDisplay}
+                    noAppsFound={
+                      <NoAppsFound
+                        hasSearch={!!search}
+                        resetSearch={() => setSearch("")}
+                        hasActiveFilters={hasActiveFilters(filters)}
+                        resetFilters={() => {
+                          updateFilters({
+                            network: "Mainnet",
+                            categories: [],
+                            tags: [],
+                          });
+                        }}
+                      />
+                    }
+                    network={network}
+                  />
                 </InfiniteScrollContainer>
               </div>
 
diff --git a/src/app/[locale]/(dashboard)/dashboard/_components/AppsTable.tsx b/src/app/[locale]/(dashboard)/dashboard/_components/AppsTable.tsx
index 2d30a0f..f645f2e 100644
--- a/src/app/[locale]/(dashboard)/dashboard/_components/AppsTable.tsx
+++ b/src/app/[locale]/(dashboard)/dashboard/_components/AppsTable.tsx
@@ -1,14 +1,8 @@
-import React, {
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useState } from "react";
 import Image from "next/image";
 
 import { NoisyContainer } from "@/components/Noisy";
-import { classNames } from "@/util/classes";
+import { ScrollWithGradient } from "@/components/ScrollWithGradient";
 
 import { AppLinks } from "./AppLinks";
 import { InkApp, InkAppNetwork, mainUrl } from "./InkApp";
@@ -108,69 +102,3 @@ export const AppsTable: React.FC<{
     </div>
   );
 };
-
-const useScrollTracking = ({
-  scrollRef,
-  onPercent,
-}: {
-  scrollRef: React.RefObject<HTMLElement | null>;
-  onPercent: (pct: number, px: number) => void;
-}) => {
-  const [firstLoadDone, setFirstLoadDone] = useState(false);
-  const handleScroll = useCallback(() => {
-    if (!scrollRef.current) return;
-    const scrollElement = scrollRef.current;
-    const totalOverflow = scrollElement.scrollWidth - scrollElement.clientWidth;
-    const scrollPosition = scrollElement.scrollLeft;
-    onPercent((scrollPosition / totalOverflow) * 100, scrollPosition);
-  }, [scrollRef, onPercent]);
-
-  useEffect(() => {
-    if (!scrollRef.current) return;
-    const scrollElement = scrollRef.current;
-    window.addEventListener("resize", handleScroll);
-    scrollElement.addEventListener("scroll", handleScroll);
-    return () => {
-      scrollElement.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("resize", handleScroll);
-    };
-  }, [scrollRef, handleScroll]);
-  useEffect(() => {
-    if (!scrollRef.current) return;
-    if (firstLoadDone) return;
-    handleScroll();
-    setFirstLoadDone(true);
-  }, [scrollRef, handleScroll, firstLoadDone]);
-};
-
-const ScrollWithGradient: React.FC<
-  PropsWithChildren & {
-    className?: string;
-    onScroll?: (pct: number, px: number) => void;
-  }
-> = ({ className, children, onScroll: onPercent }) => {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  useScrollTracking({
-    scrollRef,
-    onPercent: (pct, px) => {
-      if (!scrollRef.current) return;
-      onPercent?.(pct, px);
-      scrollRef.current.style.setProperty(
-        "--tw-gradient-from-position",
-        `${Math.max(Math.min(pct + 60, 100), 80)}%`
-      );
-    },
-  });
-
-  return (
-    <div
-      className={classNames(
-        "overflow-x-scroll [mask:linear-gradient(to_right,_var(--tw-gradient-stops))] from-80% from-white to-transparent",
-        className
-      )}
-      ref={scrollRef}
-    >
-      {children}
-    </div>
-  );
-};
diff --git a/src/app/[locale]/_components/AboutContent/AboutContent.tsx b/src/app/[locale]/_components/AboutContent/AboutContent.tsx
index f4c78c8..732e7fd 100644
--- a/src/app/[locale]/_components/AboutContent/AboutContent.tsx
+++ b/src/app/[locale]/_components/AboutContent/AboutContent.tsx
@@ -127,8 +127,8 @@ export const AboutContent = () => {
             <div className="w-full sm:w-fit">
               <MainCallToActionButton
                 copy={{
-                  ctaLabel: t("bridge:cta"),
-                  discordCtaLabel: t("discord:cta"),
+                  bridgeNow: t("bridge:cta"),
+                  exploreApps: t("exploreApps:cta"),
                 }}
               />
             </div>
diff --git a/src/app/[locale]/_components/ContactContent/ContactContent.tsx b/src/app/[locale]/_components/ContactContent/ContactContent.tsx
index 695e17b..82c8487 100644
--- a/src/app/[locale]/_components/ContactContent/ContactContent.tsx
+++ b/src/app/[locale]/_components/ContactContent/ContactContent.tsx
@@ -29,8 +29,8 @@ export const ContactContent: React.FC<ContactContentProps> = ({}) => {
               <MainCallToActionButton
                 variant="spotlight"
                 copy={{
-                  ctaLabel: t("bridge:cta"),
-                  discordCtaLabel: t("discord:cta"),
+                  bridgeNow: t("bridge:cta"),
+                  exploreApps: t("exploreApps:cta"),
                 }}
               />
             </div>
diff --git a/src/app/[locale]/_components/DeveloperContent/DeveloperContent.tsx b/src/app/[locale]/_components/DeveloperContent/DeveloperContent.tsx
index e78d917..aa25e59 100644
--- a/src/app/[locale]/_components/DeveloperContent/DeveloperContent.tsx
+++ b/src/app/[locale]/_components/DeveloperContent/DeveloperContent.tsx
@@ -233,8 +233,8 @@ export const DeveloperContent = () => {
                   <div className="w-full sm:w-fit">
                     <MainCallToActionButton
                       copy={{
-                        ctaLabel: t("bridge:cta"),
-                        discordCtaLabel: t("discord:cta"),
+                        bridgeNow: t("bridge:cta"),
+                        exploreApps: t("exploreApps:cta"),
                       }}
                     />
                   </div>
diff --git a/src/app/[locale]/_components/MainCallToActionButton.tsx b/src/app/[locale]/_components/MainCallToActionButton.tsx
index aa10b52..0f46c6c 100644
--- a/src/app/[locale]/_components/MainCallToActionButton.tsx
+++ b/src/app/[locale]/_components/MainCallToActionButton.tsx
@@ -2,20 +2,19 @@
 import React from "react";
 import { Button, ButtonProps } from "@inkonchain/ink-kit";
 
-import { ArrowOnHover } from "@/components/ArrowOnHover";
 import { ButtonLink as LegacyButtonLink } from "@/components/Button/ButtonLink";
+import { AppsIcon } from "@/components/icons/Apps";
 import { BridgeIcon } from "@/components/icons/Bridge";
-import { DiscordIcon } from "@/components/icons/Discord";
 import { OnlyWithFeatureFlag } from "@/components/OnlyWithFeatureFlag";
 import { useRouterQuery } from "@/hooks/useRouterQuery";
-import { EXTERNAL_LINKS, Link } from "@/routing";
+import { Link } from "@/routing";
 import { classNames } from "@/util/classes";
 
 export interface MainCallToActionButtonProps {
   variant?: ButtonProps["variant"] | "spotlight";
   copy: {
-    ctaLabel: string;
-    discordCtaLabel: string;
+    bridgeNow: string;
+    exploreApps: string;
   };
   /** For some reason, the only button that should have a larger width is the main "hero" call to action button */
   isMainCallToAction?: boolean;
@@ -26,42 +25,40 @@ export const MainCallToActionButton: React.FC<MainCallToActionButtonProps> = (
 ) => {
   return (
     <OnlyWithFeatureFlag
-      flag="mainnet"
-      otherwise={<DiscordMainCallToActionButton {...props} />}
+      flag="newNav"
+      otherwise={<BridgeNowMainCallToActionButton {...props} />}
     >
-      <BridgeNowMainCallToActionButton {...props} />
+      <ExploreAppsMainCallToActionButton {...props} />
     </OnlyWithFeatureFlag>
   );
 };
 
-const DiscordMainCallToActionButton: React.FC<MainCallToActionButtonProps> = ({
-  variant = "primary",
-  copy,
-  isMainCallToAction = false,
-}) => {
+const BridgeNowMainCallToActionButton: React.FC<
+  MainCallToActionButtonProps
+> = ({ variant = "primary", copy, isMainCallToAction = false }) => {
+  const query = useRouterQuery();
   if (variant === "spotlight") {
     /** TODO: Remove this if the button component is updated to have this variant */
     return (
       <LegacyButtonLink
-        href={EXTERNAL_LINKS.discord}
-        target="_blank"
-        rel="noopener noreferrer"
+        href={{
+          pathname: "/dashboard",
+          query: {
+            ...Object.fromEntries(new URLSearchParams(query) || {}),
+            category: "bridge",
+          },
+        }}
         size="lg"
         variant={variant}
         className={classNames("group justify-center items-center", {
           "px-20": isMainCallToAction,
         })}
         icon={
-          <DiscordIcon className="shrink-0" size="icon-lg" enforce="inherit" />
+          <BridgeIcon className="shrink-0" size="icon-lg" enforce="inherit" />
         }
       >
-        <span
-          className={classNames(
-            `inline-flex items-center gap-1 whitespace-nowrap`
-          )}
-        >
-          <span>{copy.discordCtaLabel}</span>
-          <ArrowOnHover external enforce="inherit" />
+        <span className="inline-flex items-center gap-1 whitespace-nowrap">
+          {copy.bridgeNow}
         </span>
       </LegacyButtonLink>
     );
@@ -79,7 +76,7 @@ const DiscordMainCallToActionButton: React.FC<MainCallToActionButtonProps> = ({
         }
       )}
       iconLeft={
-        <DiscordIcon
+        <BridgeIcon
           className="shrink-0"
           size="icon-lg"
           enforce={variant !== "primary" ? "inherit" : "white"}
@@ -87,23 +84,23 @@ const DiscordMainCallToActionButton: React.FC<MainCallToActionButtonProps> = ({
       }
     >
       <Link
-        href={EXTERNAL_LINKS.discord}
-        target="_blank"
-        rel="noopener noreferrer"
+        href={{
+          pathname: "/dashboard",
+          query: {
+            ...Object.fromEntries(new URLSearchParams(query) || {}),
+            category: "bridge",
+          },
+        }}
       >
         <span className="inline-flex items-center gap-1 whitespace-nowrap">
-          <span>{copy.discordCtaLabel}</span>
-          <ArrowOnHover
-            external
-            enforce={variant !== "primary" ? "inherit" : "white"}
-          />
+          {copy.bridgeNow}
         </span>
       </Link>
     </Button>
   );
 };
 
-const BridgeNowMainCallToActionButton: React.FC<
+const ExploreAppsMainCallToActionButton: React.FC<
   MainCallToActionButtonProps
 > = ({ variant = "primary", copy, isMainCallToAction = false }) => {
   const query = useRouterQuery();
@@ -112,10 +109,9 @@ const BridgeNowMainCallToActionButton: React.FC<
     return (
       <LegacyButtonLink
         href={{
-          pathname: "/dashboard",
+          pathname: "/new/dashboard",
           query: {
             ...Object.fromEntries(new URLSearchParams(query) || {}),
-            category: "bridge",
           },
         }}
         size="lg"
@@ -124,11 +120,11 @@ const BridgeNowMainCallToActionButton: React.FC<
           "px-20": isMainCallToAction,
         })}
         icon={
-          <BridgeIcon className="shrink-0" size="icon-lg" enforce="inherit" />
+          <AppsIcon className="shrink-0" size="icon-lg" enforce="inherit" />
         }
       >
         <span className="inline-flex items-center gap-1 whitespace-nowrap">
-          {copy.ctaLabel}
+          {copy.exploreApps}
         </span>
       </LegacyButtonLink>
     );
@@ -146,7 +142,7 @@ const BridgeNowMainCallToActionButton: React.FC<
         }
       )}
       iconLeft={
-        <BridgeIcon
+        <AppsIcon
           className="shrink-0"
           size="icon-lg"
           enforce={variant !== "primary" ? "inherit" : "white"}
@@ -155,15 +151,14 @@ const BridgeNowMainCallToActionButton: React.FC<
     >
       <Link
         href={{
-          pathname: "/dashboard",
+          pathname: "/new/dashboard",
           query: {
             ...Object.fromEntries(new URLSearchParams(query) || {}),
-            category: "bridge",
           },
         }}
       >
         <span className="inline-flex items-center gap-1 whitespace-nowrap">
-          {copy.ctaLabel}
+          {copy.exploreApps}
         </span>
       </Link>
     </Button>
diff --git a/src/app/[locale]/_components/MainContent/MainContent.tsx b/src/app/[locale]/_components/MainContent/MainContent.tsx
index 3a8a367..3875a5a 100644
--- a/src/app/[locale]/_components/MainContent/MainContent.tsx
+++ b/src/app/[locale]/_components/MainContent/MainContent.tsx
@@ -38,37 +38,46 @@ export const MainContent: React.FC<{
       />
       <div className="flex flex-col items-center gap-5 sm:gap-6">
         <div className="flex gap-4 flex-col md:flex-row">
-          <MainCallToActionButton
-            copy={{
-              ctaLabel: t("bridge:cta"),
-              discordCtaLabel: t("discord:cta"),
-            }}
-            isMainCallToAction
-          />
-          <OnlyWithFeatureFlag flag="mainnet">
-            <Button
-              className="bg-blackMagic hover:shadow-blue-glow backdrop-blur-2xl hover:bg-blackMagic/80 dark:hover:bg-blackMagic/40 transition-all duration-300 text-white px-20"
-              iconLeft={<DotsIcon size="icon-lg" enforce="inherit" />}
-              size="lg"
-              asChild
-            >
-              <Link
-                href={{
-                  pathname: "/dashboard",
-                  query,
-                }}
-              >
-                {t("exploreApps:cta")}
-              </Link>
-            </Button>
+          <OnlyWithFeatureFlag
+            flag="newNav"
+            otherwise={
+              <>
+                <MainCallToActionButton
+                  copy={{
+                    bridgeNow: t("bridge:cta"),
+                    exploreApps: t("exploreApps:cta"),
+                  }}
+                  isMainCallToAction
+                />
+
+                <Button
+                  className="bg-blackMagic hover:shadow-blue-glow backdrop-blur-2xl hover:bg-blackMagic/80 dark:hover:bg-blackMagic/40 transition-all duration-300 text-white px-20"
+                  iconLeft={<DotsIcon size="icon-lg" enforce="inherit" />}
+                  size="lg"
+                  asChild
+                >
+                  <Link
+                    href={{
+                      pathname: "/dashboard",
+                      query,
+                    }}
+                  >
+                    {t("exploreApps:cta")}
+                  </Link>
+                </Button>
+              </>
+            }
+          >
+            <MainCallToActionButton
+              copy={{
+                bridgeNow: t("bridge:cta"),
+                exploreApps: t("exploreApps:cta"),
+              }}
+              isMainCallToAction
+            />
           </OnlyWithFeatureFlag>
         </div>
-        <OnlyWithFeatureFlag
-          flag="mainnet"
-          otherwise={<SocialLinksRow faded={true} includeDiscord={false} />}
-        >
-          <SocialLinksRow faded={true} />
-        </OnlyWithFeatureFlag>
+        <SocialLinksRow faded={true} />
       </div>
 
       <div className="flex flex-col gap-6 items-center sm:hidden">
diff --git a/src/app/[locale]/new/_components/SideNav.tsx b/src/app/[locale]/new/_components/SideNav.tsx
new file mode 100644
index 0000000..d443994
--- /dev/null
+++ b/src/app/[locale]/new/_components/SideNav.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { InkLayoutSideNav } from "@inkonchain/ink-kit";
+
+import { AppsIcon } from "@/components/icons/Apps";
+import { useRouterQuery } from "@/hooks/useRouterQuery";
+import { Link, usePathname } from "@/routing";
+
+export const SideNav = () => {
+  const path = usePathname();
+  const query = useRouterQuery();
+
+  if (path === "/new") {
+    return false;
+  }
+
+  return (
+    <InkLayoutSideNav
+      links={[
+        {
+          asChild: true,
+          children: (
+            <Link href={{ pathname: "/new/dashboard", query }}>Apps</Link>
+          ),
+          href: "/new/dashboard",
+          icon: <AppsIcon size="icon-lg" />,
+        },
+      ]}
+    />
+  );
+};
diff --git a/src/app/[locale]/new/dashboard/[category]/page.tsx b/src/app/[locale]/new/dashboard/[category]/page.tsx
index a176268..57d2897 100644
--- a/src/app/[locale]/new/dashboard/[category]/page.tsx
+++ b/src/app/[locale]/new/dashboard/[category]/page.tsx
@@ -5,7 +5,7 @@ import { AppSubmissionModalProvider } from "@/components/AppSubmissionModal/AppS
 import { JsonLd } from "@/components/JsonLd";
 import { PageView } from "@/components/PageView";
 
-import { AppsContent } from "../../../(dashboard)/dashboard/_components/AppsContent";
+import { AppsContent } from "../_components/AppsContent";
 
 export const metadata: Metadata = {
   title: "Ink Apps - Discover DeFi Applications on the Superchain",
@@ -31,7 +31,7 @@ export default async function AppsPage({
           }}
         />
         <PageView />
-        <AppsContent newLayout currentCategory={category} />
+        <AppsContent currentCategory={category} />
         <AppSubmissionModal />
       </>
     </AppSubmissionModalProvider>
diff --git a/src/app/[locale]/new/dashboard/_components/AppCard.tsx b/src/app/[locale]/new/dashboard/_components/AppCard.tsx
new file mode 100644
index 0000000..66e0590
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/AppCard.tsx
@@ -0,0 +1,113 @@
+import { useState } from "react";
+import Image from "next/image";
+
+import { FeaturedAppPill } from "@/app/[locale]/(dashboard)/dashboard/_components/FeaturedAppPill";
+import { ParallaxedHoverImage } from "@/components/ParallaxedHoverImage";
+import featuredApps from "@/generated/featured-apps.json";
+import { classNames } from "@/util/classes";
+
+import { AppLinks } from "../../../(dashboard)/dashboard/_components/AppLinks";
+
+import { InkApp, InkAppNetwork, mainUrl } from "./InkApp";
+
+function matchAppImageFileName(name: string): string {
+  // No whitespace, colons seems to be replaced with underscores.
+  // Check the exported Figma file and adjust to match them if necessary.
+  return name.replaceAll(/:/g, "_").replaceAll(/ /g, "");
+}
+
+export function AppCard({
+  app,
+  network,
+}: {
+  app: InkApp;
+  network: InkAppNetwork;
+}) {
+  const [originalClick, setOriginalClick] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const featuredAppSpecificImage = featuredApps.find(
+    (f) => f.name === app.name || f.name === matchAppImageFileName(app.name)
+  );
+  return (
+    <div
+      className={classNames(
+        "flex flex-col backdrop-blur-sm overflow-hidden dark:text-whiteMagic h-full bg-featuredCardPurple rounded-app-card"
+      )}
+    >
+      <div className="flex flex-col relative w-full">
+        <button
+          className="w-full aspect-[2/1] min-h-44 rounded-app-card overflow-hidden relative"
+          onTouchStart={(e) => {
+            if (e.touches.length > 0) {
+              setOriginalClick({
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+              });
+            }
+          }}
+          onTouchEnd={(e) => {
+            if (originalClick && e.touches.length > 0) {
+              const deltaX = e.touches[0].clientX - originalClick.x;
+              const deltaY = e.touches[0].clientY - originalClick.y;
+              if (Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10) {
+                window.open(mainUrl(app, network), "_blank");
+              }
+            }
+          }}
+          onMouseDown={(e) => {
+            setOriginalClick({ x: e.clientX, y: e.clientY });
+          }}
+          onMouseUp={(e) => {
+            if (originalClick) {
+              const deltaX = e.clientX - originalClick.x;
+              const deltaY = e.clientY - originalClick.y;
+              if (Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10) {
+                window.open(mainUrl(app, network), "_blank");
+              }
+            }
+          }}
+        >
+          <ParallaxedHoverImage
+            src={
+              featuredAppSpecificImage
+                ? featuredAppSpecificImage.url
+                : app.imageUrl
+            }
+            width={320}
+            height={160}
+            alt={app.name}
+          />
+          {app.tags.length > 0 && (
+            <div className="absolute top-6 right-6 pointer-events-none flex gap-2">
+              {app.tags.map((tag) => (
+                <FeaturedAppPill key={tag}>{tag}</FeaturedAppPill>
+              ))}
+            </div>
+          )}
+          {featuredAppSpecificImage && (
+            <div className="absolute bottom-6 left-6 pointer-events-none">
+              <Image
+                className="size-20 rounded-3xl shadow-md"
+                src={app.imageUrl || "/apps/app-icon-placeholder.png"}
+                alt={app.name}
+                width={80}
+                height={80}
+              />
+            </div>
+          )}
+        </button>
+      </div>
+
+      <div className="px-6 py-6 flex flex-col gap-4 w-full h-full">
+        <div className="tracking-tighter ink:text-h5 h-[15px]">{app.name}</div>
+        <div className="flex-1 text-body-3 opacity-80 dark:opacity-50">
+          {app.description}
+        </div>
+        <AppLinks links={app.links} network={network} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/new/dashboard/_components/AppLinks.tsx b/src/app/[locale]/new/dashboard/_components/AppLinks.tsx
new file mode 100644
index 0000000..35f63a9
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/AppLinks.tsx
@@ -0,0 +1 @@
+export * from "../../../(dashboard)/dashboard/_components/AppLinks";
diff --git a/src/app/[locale]/new/dashboard/_components/AppMainnetToggle.tsx b/src/app/[locale]/new/dashboard/_components/AppMainnetToggle.tsx
new file mode 100644
index 0000000..849befa
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/AppMainnetToggle.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from "@inkonchain/ink-kit";
+
+import { classNames } from "@/util/classes";
+
+import { InkAppNetwork } from "./InkApp";
+
+interface AppMainnetToggleProps {
+  value: InkAppNetwork;
+  onChange: (value: InkAppNetwork) => void;
+}
+
+const items = [
+  { label: "All networks", value: "Both" },
+  { label: "Mainnet", value: "Mainnet" },
+  { label: "Testnet", value: "Testnet" },
+] satisfies { label: string; value: InkAppNetwork }[];
+
+export function AppMainnetToggle({ value, onChange }: AppMainnetToggleProps) {
+  const selectedItem = items.find((item) => item.value === value) || items[0];
+
+  return (
+    <Listbox value={selectedItem} onChange={(option) => onChange(option.value)}>
+      <ListboxButton
+        variant="muted"
+        className="backdrop-blur-xl ink:text-body-3-bold w-[160px] whitespace-nowrap"
+      >
+        <span
+          className={classNames(
+            value !== "Mainnet" && "text-[var(--ink-text-default)]"
+          )}
+        >
+          {selectedItem.label}
+        </span>
+      </ListboxButton>
+      <ListboxOptions>
+        {items.map((item) => (
+          <ListboxOption key={item.value} value={item}>
+            {item.label}
+          </ListboxOption>
+        ))}
+      </ListboxOptions>
+    </Listbox>
+  );
+}
diff --git a/src/app/[locale]/new/dashboard/_components/AppsCategoryFilter.tsx b/src/app/[locale]/new/dashboard/_components/AppsCategoryFilter.tsx
new file mode 100644
index 0000000..526751f
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/AppsCategoryFilter.tsx
@@ -0,0 +1,61 @@
+import { useMemo } from "react";
+import { SegmentedControl } from "@inkonchain/ink-kit";
+
+import { ScrollWithGradient } from "@/components/ScrollWithGradient";
+import { useRouterQuery } from "@/hooks/useRouterQuery";
+import { Link } from "@/routing";
+
+import { appCategories } from "./categories";
+
+interface AppsCategoryFilterProps {
+  selected: string | undefined;
+  setSelected: (value: string | undefined) => void;
+}
+
+const ALL_CATEGORY = "all";
+
+export const AppsCategoryFilter = ({
+  selected,
+  setSelected,
+}: AppsCategoryFilterProps) => {
+  const query = useRouterQuery();
+  const options = useMemo(
+    () =>
+      appCategories.map((item) => ({
+        value: item.value || ALL_CATEGORY,
+        selectedByDefault:
+          selected === undefined
+            ? item.value === null
+            : selected === item.value,
+        asChild: true,
+        children: (
+          <Link
+            className="whitespace-nowrap"
+            href={{
+              pathname: `/new/dashboard/[category]`,
+              params: { category: item.value || "" },
+              query,
+            }}
+            onClick={(e) => {
+              e.preventDefault();
+            }}
+          >
+            {item.label}
+          </Link>
+        ),
+      })),
+    [selected, query]
+  );
+  return (
+    <ScrollWithGradient className="flex overflow-x-scroll max-w-[300px] md:max-w-[600px]">
+      <SegmentedControl
+        variant="primary"
+        variableTabWidth
+        options={options}
+        onOptionChange={(option) =>
+          setSelected(option.value === ALL_CATEGORY ? "" : option.value)
+        }
+      />
+    </ScrollWithGradient>
+  );
+};
diff --git a/src/app/[locale]/new/dashboard/_components/AppsContent.tsx b/src/app/[locale]/new/dashboard/_components/AppsContent.tsx
new file mode 100644
index 0000000..3ff5147
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/AppsContent.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { Button } from "@inkonchain/ink-kit";
+import { useSearchParams } from "next/navigation";
+
+import { InfiniteScrollContainer } from "@/components/InfiniteScrollContainer";
+import { useRouter } from "@/routing";
+
+import { AppsCategoryFilter } from "./AppsCategoryFilter";
+import { AppsGrid } from "./AppsGrid";
+import { AppsTagsFilter } from "./AppsTagsFilter";
+import {
+  InkAppFilters,
+  InkAppNetwork,
+  inkApps,
+  inkFeaturedApps,
+} from "./InkApp";
+
+interface AppsContentProps {
+  currentCategory?: string;
+}
+
+export function AppsContent({ currentCategory }: AppsContentProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const network = getNetwork(searchParams.get("network"));
+  const category = currentCategory || searchParams.get("category");
+  const tags = searchParams.get("tags");
+
+  const [page, setPage] = useState(0);
+  const [search, setSearch] = useState<string>("");
+  const [filters, setFilters] = useState<Omit<InkAppFilters, "search">>({
+    categories: category ? category.split(",") : [],
+    tags: tags ? tags.split(",") : [],
+    network: network ? network : "Mainnet",
+  });
+
+  const filteredAppsWithoutSearchTerms = useMemo(
+    () =>
+      inkApps.filter((app) => {
+        if (
+          filters.network === "Mainnet" &&
+          app.network !== "Mainnet" &&
+          app.network !== "Both"
+        )
+          return false;
+        if (
+          filters.network === "Testnet" &&
+          app.network !== "Testnet" &&
+          app.network !== "Both"
+        )
+          return false;
+
+        if (
+          filters.categories.length > 0 &&
+          !app.category.some((category) =>
+            filters.categories.includes(category.toLowerCase())
+          )
+        )
+          return false;
+
+        if (
+          filters.tags.length > 0 &&
+          !app.tags.some((tag) => filters.tags.includes(tag))
+        )
+          return false;
+
+        return true;
+      }),
+    [filters]
+  );
+
+  const filteredApps = useMemo(
+    () =>
+      filteredAppsWithoutSearchTerms.filter((app) => {
+        const searchTerm = search.toLowerCase();
+        if (
+          searchTerm &&
+          !app.name.toLowerCase().includes(searchTerm) &&
+          !app.description.toLowerCase().includes(searchTerm) &&
+          !app.category.some((category) =>
+            category.toLowerCase().includes(searchTerm)
+          ) &&
+          !app.tags.some((tag) => tag.toLowerCase().includes(searchTerm))
+        )
+          return false;
+        return true;
+      }),
+    [filteredAppsWithoutSearchTerms, search]
+  );
+
+  const updateSearchParams = useCallback(
+    (newParams: Record<string, string>) => {
+      const { network, category, tags, ...params } = Object.fromEntries(
+        searchParams.entries()
+      );
+      const { category: newCategory, ...newParamsToUpdate } = newParams;
+      const queryParams = new URLSearchParams({
+        ...params,
+        ...newParamsToUpdate,
+      });
+      // Doing this manually is *insanely* faster than using router.replace for some reason.
+      window.history.pushState(
+        "",
+        "",
+        `/new/dashboard${newCategory ? `/${newCategory}` : ""}?${queryParams}`
+      );
+    },
+    [searchParams]
+  );
+  const updateFilters = useCallback(
+    (newFilters: Partial<InkAppFilters>) => {
+      setFilters((prevFilters) => {
+        const mergedFilters = { ...prevFilters, ...newFilters };
+
+        updateSearchParams({
+          ...(mergedFilters.network && mergedFilters.network !== "Mainnet"
+            ? { network: mergedFilters.network }
+            : {}),
+          ...(mergedFilters.tags && mergedFilters.tags.length > 0
+            ? { tags: mergedFilters.tags.join(",") }
+            : {}),
+          ...(mergedFilters.categories && mergedFilters.categories.length > 0
+            ? { category: mergedFilters.categories[0] }
+            : {}),
+        });
+
+        setPage(0);
+        return mergedFilters;
+      });
+    },
+    [updateSearchParams]
+  );
+
+  const hasActiveFilters = (filters: InkAppFilters): boolean => {
+    return (
+      !!search ||
+      (filters.network && filters.network !== "Mainnet") ||
+      (filters.categories && filters.categories.length > 0) ||
+      (filters.tags && filters.tags.length > 0)
+    );
+  };
+
+  const appsToDisplay = useMemo(
+    () => filteredApps.slice(0, (page + 1) * 10),
+    [filteredApps, page]
+  );
+
+  return (
+    <>
+      <div className="flex flex-col gap-8 w-full max-w-[2000px]">
+        <div className="flex-1 mx-4 min-w-[240px] flex items-center justify-between gap-2">
+          <AppsCategoryFilter
+            selected={filters.categories?.[0]}
+            setSelected={(value) => {
+              updateFilters({
+                categories: value ? [value] : [],
+              });
+            }}
+          />
+          <div>
+            <AppsTagsFilter
+              selected={filters.tags}
+              setSelected={(value) => {
+                updateFilters({
+                  tags: value,
+                });
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Main flexbox */}
+        <div className="flex gap-8 flex-col-reverse 2xl:flex-row">
+          <div className="flex flex-col gap-4 w-full">
+            <InfiniteScrollContainer
+              className="flex px-4 pr-2 lg:pr-4 xl:pr-0"
+              onLoadMore={() => setPage(page + 1)}
+              hasMore={page < Math.floor(filteredApps.length / 10)}
+            >
+              <AppsGrid
+                apps={appsToDisplay}
+                featuredApps={inkFeaturedApps}
+                noAppsFound={
+                  <NoAppsFound
+                    hasSearch={!!search}
+                    resetSearch={() => setSearch("")}
+                    hasActiveFilters={hasActiveFilters(filters)}
+                    resetFilters={() => {
+                      updateFilters({
+                        network: "Mainnet",
+                        categories: [],
+                        tags: [],
+                      });
+                    }}
+                  />
+                }
+                network={network}
+              />
+            </InfiniteScrollContainer>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function getNetwork(networkSearchParam: string | null): InkAppNetwork {
+  if (networkSearchParam === "Both" || networkSearchParam === "Testnet") {
+    return networkSearchParam;
+  }
+
+  return "Mainnet";
+}
+
+function NoAppsFound({
+  hasSearch,
+  hasActiveFilters,
+  resetFilters,
+  resetSearch,
+}: {
+  hasSearch: boolean;
+  hasActiveFilters: boolean;
+  resetFilters: () => void;
+  resetSearch: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col items-center gap-6">
+        <div className="text-h5 font-bold text-blackMagic dark:text-whiteMagic">
+          No matches found
+        </div>
+        <div className="text-body-2 text-blackMagic/50 dark:text-whiteMagic/50 text-center">
+          {`Please change your keywords${
+            hasActiveFilters ? " or reset your filters" : ""
+          } and try again`}
+        </div>
+      </div>
+      {(hasActiveFilters || hasSearch) && (
+        <Button
+          variant="primary"
+          size="lg"
+          onClick={() => {
+            if (hasActiveFilters) {
+              resetFilters();
+            } else {
+              resetSearch();
+            }
+          }}
+        >
+          {hasActiveFilters ? "Reset Filters" : "Clear Keywords"}
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(dashboard)/dashboard/_components/AppsGrid.tsx b/src/app/[locale]/new/dashboard/_components/AppsGrid.tsx
similarity index 88%
rename from src/app/[locale]/(dashboard)/dashboard/_components/AppsGrid.tsx
rename to src/app/[locale]/new/dashboard/_components/AppsGrid.tsx
index 790d055..497b57f 100644
--- a/src/app/[locale]/(dashboard)/dashboard/_components/AppsGrid.tsx
+++ b/src/app/[locale]/new/dashboard/_components/AppsGrid.tsx
@@ -21,7 +21,7 @@ export const AppsGrid: React.FC<{
           {noAppsFound}
         </div>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 hd:grid-cols-4 gap-4 w-full">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 hd:grid-cols-4 gap-0.5 w-full">
           {featuredApps.map((app) => (
             <AppCard key={app.id} app={app} network={network} featured />
           ))}
@@ -45,7 +45,7 @@ function AppCard({
 }) {
   const t = useTranslations("dashboard");
   return (
-    <div className="flex flex-col gap-6 backdrop-blur-sm ink:bg-background-container rounded-2xl p-4 group">
+    <div className="flex flex-col gap-6 backdrop-blur-sm ink:bg-background-container p-4 group">
       <div className="flex w-full justify-between">
         <NoisyContainer className="bg-dapps-icon-gradient rounded-xl overflow-hidden size-16 shrink-0">
           <Image
@@ -58,7 +58,7 @@ function AppCard({
         </NoisyContainer>
         {featured && (
           <div>
-            <div className="ink:text-caption-2-bold p-2 dark:bg-featured-card-gradient-dark bg-featured-card-gradient text-whiteMagic dark:text-blackMagic rounded-xl">
+            <div className="ink:text-caption-2-bold px-2 py-1 ink:bg-background-container ink:text-text-on-secondary rounded-xl">
               {t("featured")}
             </div>
           </div>
@@ -66,7 +66,9 @@ function AppCard({
       </div>
       <div className="flex flex-col gap-4 flex-1">
         <div className="ink:text-h5">{app.name}</div>
-        <div className="flex-1 ink:text-body-3-regular">{app.description}</div>
+        <div className="flex-1 ink:text-body-3-regular ink:text-text-muted">
+          {app.description}
+        </div>
         <div className="relative">
           <div className="w-full opacity-0 group-hover:opacity-100 transition-opacity">
             <AppLinks links={app.links} network={network} />
diff --git a/src/app/[locale]/new/dashboard/_components/AppsTagsFilter.tsx b/src/app/[locale]/new/dashboard/_components/AppsTagsFilter.tsx
new file mode 100644
index 0000000..7f56b77
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/AppsTagsFilter.tsx
@@ -0,0 +1,102 @@
+import React, { useMemo } from "react";
+import {
+  Checkbox,
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from "@inkonchain/ink-kit";
+
+import { inkTags } from "./InkApp";
+
+interface AppsTagsFilterProps {
+  selected: string[] | undefined;
+  setSelected: (value: string[] | undefined) => void;
+}
+
+function capitalizeFirstLetter(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+const tags = inkTags
+  .map((tag) => ({
+    value: tag,
+    label: capitalizeFirstLetter(tag),
+  }))
+  .sort((a, b) => a.label.localeCompare(b.label));
+
+export const AppsTagsFilter: React.FC<AppsTagsFilterProps> = ({
+  selected,
+  setSelected,
+}) => {
+  const selectedTags = useMemo(
+    () => tags.filter((tag) => selected?.includes(tag.value)),
+    [selected]
+  );
+
+  const toggleAll = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (selectedTags.length > 0) {
+        setSelected([]);
+      } else {
+        setSelected(tags.map((t) => t.value));
+      }
+    },
+    [selectedTags, setSelected]
+  );
+
+  return (
+    <Listbox value={selected || []} onChange={setSelected} multiple>
+      <ListboxButton
+        className="whitespace-nowrap backdrop-blur-xl ink:text-body-3-bold w-[120px]"
+        variant="muted"
+      >
+        <div className="flex items-center gap-2">
+          <div>
+            {selectedTags.length === 0 ? (
+              <span>All Tags</span>
+            ) : (
+              <span className="text-[var(--ink-text-default)]">Tags</span>
+            )}
+          </div>
+          {selectedTags.length > 0 && (
+            <div className="text-xs bg-[var(--ink-text-default)] text-[var(--ink-background-light)] size-5 rounded-full flex items-center justify-center ink:text-caption-1-bold">
+              {selectedTags.length}
+            </div>
+          )}
+        </div>
+      </ListboxButton>
+      <ListboxOptions>
+        <ListboxOption
+          className="mb-1"
+          key="all"
+          value={null}
+          onClick={toggleAll}
+          iconLeft={
+            <Checkbox
+              checked={selectedTags.length === tags.length}
+              indeterminate={
+                selectedTags.length > 0 && selectedTags.length < tags.length
+                  ? true
+                  : undefined
+              }
+            />
+          }
+          iconRight={<></>}
+        >
+          Select all
+        </ListboxOption>
+        {tags.map((tag) => (
+          <ListboxOption key={tag.value} value={tag.value} iconRight={<></>}>
+            <div className="flex items-center gap-2">
+              <span>{tag.label}</span>
+            </div>
+          </ListboxOption>
+        ))}
+      </ListboxOptions>
+    </Listbox>
+  );
+};
diff --git a/src/app/[locale]/new/dashboard/_components/InkApp.ts b/src/app/[locale]/new/dashboard/_components/InkApp.ts
new file mode 100644
index 0000000..741990f
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/InkApp.ts
@@ -0,0 +1 @@
+export * from "../../../(dashboard)/dashboard/_components/InkApp";
diff --git a/src/app/[locale]/new/dashboard/_components/RoutedLayout.tsx b/src/app/[locale]/new/dashboard/_components/RoutedLayout.tsx
new file mode 100644
index 0000000..d3ef0f0
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/RoutedLayout.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Suspense } from "react";
+import { ConnectWallet, InkLayout } from "@inkonchain/ink-kit";
+import { usePathname } from "next/navigation";
+
+import { InkLogo, InkLogoImage } from "../../_components/InkLogo";
+import { MobileNav } from "../../_components/MobileNav";
+import { SideNav } from "../../_components/SideNav";
+import { TopNav } from "../../_components/TopNav";
+
+export function RoutedLayout({ children }: { children: React.ReactNode }) {
+  const path = usePathname();
+  return (
+    <InkLayout
+      mainIcon={
+        <Suspense fallback={<InkLogoImage />}>
+          <InkLogo />
+        </Suspense>
+      }
+      headerContent={<ConnectWallet />}
+      topNavigation={path === "/new" ? <TopNav /> : undefined}
+      mobileNavigation={MobileNav}
+      sideNavigation={path === "/new" ? undefined : <SideNav />}
+    >
+      {children}
+    </InkLayout>
+  );
+}
diff --git a/src/app/[locale]/new/dashboard/_components/TableRowPill.tsx b/src/app/[locale]/new/dashboard/_components/TableRowPill.tsx
new file mode 100644
index 0000000..5c6607f
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/TableRowPill.tsx
@@ -0,0 +1 @@
+export * from "../../../(dashboard)/dashboard/_components/TableRowPill";
diff --git a/src/app/[locale]/new/dashboard/_components/categories.tsx b/src/app/[locale]/new/dashboard/_components/categories.tsx
new file mode 100644
index 0000000..fbd917a
--- /dev/null
+++ b/src/app/[locale]/new/dashboard/_components/categories.tsx
@@ -0,0 +1,52 @@
+import { InkIcon } from "@inkonchain/ink-kit";
+
+import { AppsIcon } from "@/components/icons/Apps";
+import { BankIcon } from "@/components/icons/Bank";
+import { BlocksIcon } from "@/components/icons/Blocks";
+import { BridgeIcon } from "@/components/icons/Bridge";
+import { GlobeIcon } from "@/components/icons/Globe";
+import { UsersIcon } from "@/components/icons/Users";
+
+export const appCategories = [
+  {
+    value: null,
+    label: "All categories",
+    icon: <AppsIcon className="duration-0" enforce="inherit" size="icon-lg" />,
+  },
+  {
+    value: "bridge",
+    label: "Bridge",
+    icon: (
+      <BridgeIcon className="duration-0" enforce="inherit" size="icon-lg" />
+    ),
+  },
+  {
+    value: "defi",
+    label: "DeFi",
+    icon: <BankIcon className="duration-0" enforce="inherit" size="icon-lg" />,
+  },
+  {
+    value: "explorers",
+    label: "Explorers",
+    icon: <GlobeIcon className="duration-0" enforce="inherit" size="icon-lg" />,
+  },
+  {
+    value: "infra",
+    label: "Infrastructure",
+    icon: (
+      <BlocksIcon className="duration-0" enforce="inherit" size="icon-lg" />
+    ),
+  },
+  {
+    value: "on-ramps",
+    label: "On-ramps",
+    icon: (
+      <InkIcon.Wallet className="duration-0" enforce="inherit" size="icon-lg" />
+    ),
+  },
+  {
+    value: "social",
+    label: "Social",
+    icon: <UsersIcon className="duration-0" enforce="inherit" size="icon-lg" />,
+  },
+] as const;
diff --git a/src/app/[locale]/new/dashboard/page.tsx b/src/app/[locale]/new/dashboard/page.tsx
index a9520d4..ec98660 100644
--- a/src/app/[locale]/new/dashboard/page.tsx
+++ b/src/app/[locale]/new/dashboard/page.tsx
@@ -5,7 +5,7 @@ import { AppSubmissionModalProvider } from "@/components/AppSubmissionModal/AppS
 import { JsonLd } from "@/components/JsonLd";
 import { PageView } from "@/components/PageView";
 
-import { AppsContent } from "../../(dashboard)/dashboard/_components/AppsContent";
+import { AppsContent } from "./_components/AppsContent";
 
 export const metadata: Metadata = {
   title: "Ink Apps - Discover DeFi Applications on the Superchain",
@@ -26,7 +26,7 @@ export default function AppsPage() {
           }}
         />
         <PageView />
-        <AppsContent newLayout />
+        <AppsContent />
         <AppSubmissionModal />
       </>
     </AppSubmissionModalProvider>
diff --git a/src/app/[locale]/new/layout.tsx b/src/app/[locale]/new/layout.tsx
index 73eedbb..fe109d7 100644
--- a/src/app/[locale]/new/layout.tsx
+++ b/src/app/[locale]/new/layout.tsx
@@ -1,14 +1,11 @@
-import { Suspense } from "react";
-import { ConnectWallet, InkLayout } from "@inkonchain/ink-kit";
+import React from "react";
 
 import { Footer } from "@/components/Footer";
 import { OnlyWithFeatureFlag } from "@/components/OnlyWithFeatureFlag";
 import { routing } from "@/routing";
 
-import { InkLogo, InkLogoImage } from "./_components/InkLogo";
 import { MainPageBackground } from "./_components/MainPageBackground";
-import { MobileNav } from "./_components/MobileNav";
-import { TopNav } from "./_components/TopNav";
+import { RoutedLayout } from "./dashboard/_components/RoutedLayout";
 
 export async function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
@@ -21,23 +18,14 @@ export default async function InfoLayout({
 }) {
   return (
     <OnlyWithFeatureFlag flag="newNav">
-      <InkLayout
-        mainIcon={
-          <Suspense fallback={<InkLogoImage />}>
-            <InkLogo />
-          </Suspense>
-        }
-        headerContent={<ConnectWallet />}
-        topNavigation={<TopNav />}
-        mobileNavigation={MobileNav}
-      >
+      <RoutedLayout>
         <div className="flex-1 relative pt-24 sm:pt-0 sm:pb-12 pb-48">
           <div className="flex flex-col">{children}</div>
           <div>
             <Footer />
           </div>
         </div>
-      </InkLayout>
+      </RoutedLayout>
       <MainPageBackground />
     </OnlyWithFeatureFlag>
   );
diff --git a/src/components/ScrollWithGradient.tsx b/src/components/ScrollWithGradient.tsx
new file mode 100644
index 0000000..76b7cfc
--- /dev/null
+++ b/src/components/ScrollWithGradient.tsx
@@ -0,0 +1,75 @@
+import {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import { classNames } from "@/util/classes";
+
+const useScrollTracking = ({
+  scrollRef,
+  onPercent,
+}: {
+  scrollRef: React.RefObject<HTMLElement | null>;
+  onPercent: (pct: number, px: number) => void;
+}) => {
+  const [firstLoadDone, setFirstLoadDone] = useState(false);
+  const handleScroll = useCallback(() => {
+    if (!scrollRef.current) return;
+    const scrollElement = scrollRef.current;
+    const totalOverflow = scrollElement.scrollWidth - scrollElement.clientWidth;
+    const scrollPosition = scrollElement.scrollLeft;
+    onPercent((scrollPosition / totalOverflow) * 100, scrollPosition);
+  }, [scrollRef, onPercent]);
+
+  useEffect(() => {
+    if (!scrollRef.current) return;
+    const scrollElement = scrollRef.current;
+    window.addEventListener("resize", handleScroll);
+    scrollElement.addEventListener("scroll", handleScroll);
+    return () => {
+      scrollElement.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [scrollRef, handleScroll]);
+  useEffect(() => {
+    if (!scrollRef.current) return;
+    if (firstLoadDone) return;
+    handleScroll();
+    setFirstLoadDone(true);
+  }, [scrollRef, handleScroll, firstLoadDone]);
+};
+
+export const ScrollWithGradient: React.FC<
+  PropsWithChildren & {
+    className?: string;
+    onScroll?: (pct: number, px: number) => void;
+  }
+> = ({ className, children, onScroll: onPercent }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useScrollTracking({
+    scrollRef,
+    onPercent: (pct, px) => {
+      if (!scrollRef.current) return;
+      onPercent?.(pct, px);
+      scrollRef.current.style.setProperty(
+        "--tw-gradient-from-position",
+        `${Math.max(Math.min(pct + 60, 100), 80)}%`
+      );
+    },
+  });
+
+  return (
+    <div
+      className={classNames(
+        "overflow-x-scroll [mask:linear-gradient(to_right,_var(--tw-gradient-stops))] from-80% from-white to-transparent",
+        className
+      )}
+      ref={scrollRef}
+    >
+      {children}
+    </div>
+  );
+};