diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
index 25c818271..98b6a6879 100644
--- a/apps/cyberstorm-remix/app/root.tsx
+++ b/apps/cyberstorm-remix/app/root.tsx
@@ -1,7 +1,6 @@
 import "./styles/index.css";
 import "@thunderstore/cyberstorm-theme";
 import {
-  Await,
   Links,
   Meta,
   MetaFunction,
@@ -9,7 +8,6 @@ import {
   Scripts,
   ScrollRestoration,
   ShouldRevalidateFunctionArgs,
-  UIMatch,
   isRouteErrorResponse,
   useLoaderData,
   useLocation,
@@ -18,26 +16,12 @@ import {
   useRouteLoaderData,
 } from "react-router";
 // import { LinksFunction } from "@remix-run/react/dist/routeModules";
-import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
 
-import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
-import {
-  AdContainer,
-  isRecord,
-  LinkingProvider,
-  NewBreadCrumbs,
-  NewBreadCrumbsLink,
-} from "@thunderstore/cyberstorm";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import { CurrentUser } from "@thunderstore/dapper/types";
 
 import { captureRemixErrorBoundaryError, withSentry } from "@sentry/remix";
-import { memo, ReactNode, Suspense, useEffect, useRef } from "react";
-import { useHydrated } from "remix-utils/use-hydrated";
-import Toast from "@thunderstore/cyberstorm/src/newComponents/Toast";
-import { Footer } from "./commonComponents/Footer/Footer";
 import { RequestConfig } from "@thunderstore/thunderstore-api";
-import { NavigationWrapper } from "./commonComponents/Navigation/NavigationWrapper";
 import { NamespacedStorageManager } from "@thunderstore/ts-api-react";
 import {
   getSessionContext,
@@ -51,10 +35,20 @@ import {
 } from "cyberstorm/security/publicEnvVariables";
 import { StorageManager } from "@thunderstore/ts-api-react/src/storage";
 import { Route } from "./+types/root";
+import { LinkingProvider } from "@thunderstore/cyberstorm";
+import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
+import Toast from "@thunderstore/cyberstorm/src/newComponents/Toast";
+import { TooltipProvider } from "./rootRoute/tooltipProvider";
+import { NavigationWrapper } from "./commonComponents/Navigation/NavigationWrapper";
+import { BetaButtonInit } from "./rootRoute/betaButton";
+import { Ads, AdsInit } from "./rootRoute/nitroAds";
+import { Footer } from "./commonComponents/Footer/Footer";
+import { NimbusBreadcrumbs } from "./rootRoute/breadcrumbs";
 
 // REMIX TODO: https://remix.run/docs/en/main/route/links
 // export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
+/* Declaring window types that are present, because of certain parts of the application */
 declare global {
   interface Window {
     NIMBUS_PUBLIC_ENV: publicEnvVariablesType;
@@ -82,6 +76,7 @@ declare global {
   }
 }
 
+/* React router outlet context shape. This shape should be present on all pages. Pages might define additional context for their children */
 export type OutletContextShape = {
   currentUser: CurrentUser | undefined;
   requestConfig: () => RequestConfig;
@@ -99,6 +94,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
+/* Loaders start */
 export async function loader() {
   const publicEnvVariables = getPublicEnvVariables([
     "VITE_SITE_URL",
@@ -174,6 +170,9 @@ export async function clientLoader({ request }: Route.ClientLoaderArgs) {
 }
 
 export type RootLoadersType = typeof loader | typeof clientLoader;
+// Force hydration of client loader on the initial page load
+clientLoader.hydrate = true;
+/* Loaders end */
 
 // We want to force revalidation when session is stale
 // TODO: Currently when logging in, the revalidation wont be run on the redirect back to the page
@@ -202,10 +201,7 @@ export function shouldRevalidate({
   return sessionIsStale || defaultShouldRevalidate;
 }
 
-clientLoader.hydrate = true;
-
-const adContainerIds = ["right-column-1", "right-column-2", "right-column-3"];
-
+// Layout component to provide common UI around all pages
 export function Layout({ children }: { children: React.ReactNode }) {
   const data = useLoaderData<RootLoadersType>();
   let envVars = undefined;
@@ -243,49 +239,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
   //   splitPath.length > 5 && splitPath[1] === "c" && splitPath[3] === "p";
   const matches = useMatches();
 
-  const userSettingsPage = matches.find(
-    (m) => m.id === "settings/user/Settings"
-  );
-  const userSettingsAccountPage = matches.find(
-    (m) => m.id === "settings/user/Account/Account"
-  );
-  const teamsPage = matches.find((m) => m.id === "settings/teams/Teams");
-  const teamSettingsPage = matches.find(
-    (m) => m.id === "settings/teams/team/teamSettings"
-  );
-  const teamSettingsProfilePage = matches.find(
-    (m) => m.id === "settings/teams/team/tabs/Profile/Profile"
-  );
-  const teamSettingsMembersPage = matches.find(
-    (m) => m.id === "settings/teams/team/tabs/Members/Members"
-  );
-  const teamSettingsServiceAccountsPage = matches.find(
-    (m) => m.id === "settings/teams/team/tabs/ServiceAccounts/ServiceAccounts"
-  );
-  const teamSettingsSettingsPage = matches.find(
-    (m) => m.id === "settings/teams/team/tabs/Settings/Settings"
-  );
-  const communitiesPage = matches.find(
-    (m) => m.id === "communities/communities"
-  );
-  const uploadPage = matches.find((m) => m.id === "upload/upload");
-  const communityPage = matches.find((m) => m.id === "c/community");
-  const packageListingPage = matches.find((m) => m.id === "p/packageListing");
-  const packageEditPage = matches.find((m) => m.id === "p/packageEdit");
-  const packageDependantsPage = matches.find(
-    (m) => m.id === "p/dependants/Dependants"
-  );
-  const packageTeamPage = matches.find((m) => m.id === "p/team/Team");
-  const packageFormatDocsPage = matches.find(
-    (m) => m.id === "tools/package-format-docs/packageFormatDocs"
-  );
-  const manifestValidatorPage = matches.find(
-    (m) => m.id === "tools/manifest-validator/manifestValidator"
-  );
-  const markdownPreviewPage = matches.find(
-    (m) => m.id === "tools/markdown-preview/markdownPreview"
-  );
-
   const shouldShowAds = location.pathname.startsWith("/teams")
     ? false
     : location.pathname.startsWith("/settings")
@@ -346,161 +299,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
                 <div className="container container--x container--full island">
                   <main className="container container--x container--full island-item layout__main">
                     <section className="container container--y container--full layout__content">
-                      {/* Breadcrumbs are build progressively */}
-                      <NewBreadCrumbs>
-                        {/* User Settings */}
-                        {userSettingsPage ? (
-                          userSettingsAccountPage ? (
-                            <NewBreadCrumbsLink
-                              primitiveType="cyberstormLink"
-                              linkId="Settings"
-                              csVariant="cyber"
-                            >
-                              Settings
-                            </NewBreadCrumbsLink>
-                          ) : (
-                            <span>
-                              <span>Settings</span>
-                            </span>
-                          )
-                        ) : null}
-                        {/* User Settings account */}
-                        {userSettingsAccountPage ? (
-                          <span>
-                            <span>Account</span>
-                          </span>
-                        ) : null}
-                        {/* Teams */}
-                        {teamsPage || teamSettingsPage ? (
-                          <NewBreadCrumbsLink
-                            primitiveType="cyberstormLink"
-                            linkId="Teams"
-                            csVariant="cyber"
-                          >
-                            Teams
-                          </NewBreadCrumbsLink>
-                        ) : null}
-                        {/* Team settings */}
-                        {teamSettingsPage ? (
-                          <NewBreadCrumbsLink
-                            primitiveType="cyberstormLink"
-                            linkId="TeamSettings"
-                            csVariant="cyber"
-                            team={teamSettingsPage.params.namespaceId}
-                          >
-                            {teamSettingsPage.params.namespaceId}
-                          </NewBreadCrumbsLink>
-                        ) : null}
-                        {/* Team Settings Profile */}
-                        {teamSettingsProfilePage ? (
-                          <span>
-                            <span>Profile</span>
-                          </span>
-                        ) : null}
-                        {/* Team Settings Members */}
-                        {teamSettingsMembersPage ? (
-                          <span>
-                            <span>Members</span>
-                          </span>
-                        ) : null}
-                        {/* Team Settings Service Accounts */}
-                        {teamSettingsServiceAccountsPage ? (
-                          <span>
-                            <span>Service Accounts</span>
-                          </span>
-                        ) : null}
-                        {/* Team Settings Settings */}
-                        {teamSettingsSettingsPage ? (
-                          <span>
-                            <span>Settings</span>
-                          </span>
-                        ) : null}
-                        {/* Upload */}
-                        {uploadPage ? (
-                          <span>
-                            <span>Upload</span>
-                          </span>
-                        ) : null}
-                        {/* Communities page */}
-                        {communitiesPage ||
-                        communityPage ||
-                        packageDependantsPage ||
-                        packageTeamPage ? (
-                          communityPage ||
-                          packageDependantsPage ||
-                          packageTeamPage ? (
-                            <NewBreadCrumbsLink
-                              primitiveType="cyberstormLink"
-                              linkId="Communities"
-                              csVariant="cyber"
-                            >
-                              Communities
-                            </NewBreadCrumbsLink>
-                          ) : (
-                            <span>
-                              <span>Communities</span>
-                            </span>
-                          )
-                        ) : null}
-                        {/* Community page */}
-                        {getCommunityBreadcrumb(
-                          communityPage ||
-                            packageListingPage ||
-                            packageDependantsPage ||
-                            packageTeamPage,
-                          Boolean(packageListingPage) ||
-                            Boolean(packageDependantsPage) ||
-                            Boolean(packageTeamPage)
-                        )}
-                        {/* Package listing page */}
-                        {getPackageListingBreadcrumb(
-                          packageListingPage,
-                          packageEditPage,
-                          packageDependantsPage
-                        )}
-                        {packageEditPage ? (
-                          <span>
-                            <span>Edit package</span>
-                          </span>
-                        ) : null}
-                        {packageDependantsPage ? (
-                          <span>
-                            <span>Dependants</span>
-                          </span>
-                        ) : null}
-                        {packageTeamPage ? (
-                          <span>
-                            <span>{packageTeamPage.params.namespaceId}</span>
-                          </span>
-                        ) : null}
-                        {packageFormatDocsPage ? (
-                          <span>
-                            <span>Package Format Docs</span>
-                          </span>
-                        ) : null}
-                        {manifestValidatorPage ? (
-                          <span>
-                            <span>Manifest Validator</span>
-                          </span>
-                        ) : null}
-                        {markdownPreviewPage ? (
-                          <span>
-                            <span>Markdown Preview</span>
-                          </span>
-                        ) : null}
-                      </NewBreadCrumbs>
+                      <NimbusBreadcrumbs matches={matches} />
                       {children}
                     </section>
                   </main>
-                  {shouldShowAds ? (
-                    <div className="container container--y island-item layout__ads">
-                      <div className="container container--y layout__ads-inner">
-                        {adContainerIds.map((cid, k_i) => (
-                          <AdContainer key={k_i} containerId={cid} />
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
+                  <Ads shouldShow={shouldShowAds} />
                 </div>
                 <Footer />
                 {shouldShowAds ? <AdsInit /> : null}
@@ -516,14 +319,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-const TooltipProvider = memo(function TooltipProvider({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  return <RadixTooltip delayDuration={80}>{children}</RadixTooltip>;
-});
-
 function App() {
   const data = useRouteLoaderData<RootLoadersType>("root");
   const dapper = new DapperTs(() => {
@@ -545,21 +340,16 @@ function App() {
   );
 }
 
+// We wrap the App in Sentry's withSentry to catch errors and send them to Sentry
 export default withSentry(App);
 
-// REMIX TODO: We don't have any data available in the root ErrorBoundary, so we might want to change the designs
+// ErrorBoundary to catch errors in the app and display a friendly message
 export function ErrorBoundary() {
-  // REMIX TODO: We need to call the loader separately somehow to get the CurrentUser
-  // const loaderOutput = useLoaderData<RootLoadersType>();
-  // const parsedLoaderOutput: {
-  //   envStuff: { ENV: { PUBLIC_API_URL: string } };
-  //   sessionId: string | null;
-  //   currentUser: CurrentUser;
-  // } = JSON.parse(JSON.stringify(loaderOutput));
   const error = useRouteError();
   if (import.meta.env.PROD) {
     captureRemixErrorBoundaryError(error);
   } else if (import.meta.env.DEV) {
+    // In development mode, we log the error to the console
     console.log(error);
   }
   const isResponseError = isRouteErrorResponse(error);
@@ -582,187 +372,3 @@ export function ErrorBoundary() {
     </div>
   );
 }
-
-// Temporary solution for implementing ads
-// REMIX TODO: Move to dynamic html
-function AdsInit() {
-  const isHydrated = useHydrated();
-  const startsHydrated = useRef(isHydrated);
-
-  // This will be loaded 2 times in development because of:
-  // https://react.dev/reference/react/StrictMode
-  // If strict mode is removed from the entry.client.tsx, this should only run once
-  useEffect(() => {
-    if (!startsHydrated.current && isHydrated) return;
-    if (
-      typeof window !== "undefined" &&
-      typeof window.nitroAds === "undefined"
-    ) {
-      const $script = document.createElement("script");
-      $script.src = "https://s.nitropay.com/ads-785.js";
-      $script.setAttribute("async", "true");
-      $script.setAttribute("data-log-level", "silent");
-
-      document.body.append($script);
-
-      return () => $script.remove();
-    }
-  }, []);
-
-  const nitroAds = typeof window !== "undefined" ? window.nitroAds : undefined;
-  useEffect(() => {
-    if (nitroAds !== undefined && nitroAds.createAd !== undefined) {
-      adContainerIds.forEach((cid) => {
-        if (nitroAds !== undefined && nitroAds.createAd !== undefined) {
-          nitroAds.createAd(cid, {
-            demo: false,
-            format: "display",
-            refreshLimit: 0,
-            refreshTime: 30,
-            renderVisibleOnly: true,
-            refreshVisibleOnly: true,
-            sizes: [["300", "250"]],
-            report: {
-              enabled: true,
-              wording: "Report Ad",
-              position: "bottom-right",
-            },
-            mediaQuery: "(min-width: 1475px) and (min-height: 400px)",
-          });
-        }
-      });
-    }
-  }, [nitroAds]);
-
-  return <></>;
-}
-
-// Temporary solution for adding the beta button
-// REMIX TODO: Move to dynamic html
-function BetaButtonInit() {
-  const isHydrated = useHydrated();
-  const startsHydrated = useRef(isHydrated);
-  const hasRun = useRef(false);
-
-  // This will be loaded 2 times in development because of:
-  // https://react.dev/reference/react/StrictMode
-  // If strict mode is removed from the entry.client.tsx, this should only run once
-  useEffect(() => {
-    if ((!startsHydrated.current && isHydrated) || hasRun.current) return;
-    if (typeof window !== "undefined") {
-      const $script = document.createElement("script");
-      $script.src = "/cyberstorm-static/scripts/beta-switch.js";
-      $script.setAttribute("async", "true");
-
-      document.body.append($script);
-      hasRun.current = true;
-
-      return () => $script.remove();
-    }
-  }, []);
-
-  return <></>;
-}
-
-function getCommunityBreadcrumb(
-  communityPage: UIMatch | undefined,
-  isNotLast: boolean
-) {
-  if (!communityPage) return null;
-  return (
-    <>
-      {communityPage &&
-      isRecord(communityPage.data) &&
-      Object.prototype.hasOwnProperty.call(communityPage.data, "community") ? (
-        <Suspense
-          fallback={
-            <span>
-              <span>Loading...</span>
-            </span>
-          }
-        >
-          <Await resolve={communityPage.data.community}>
-            {(resolvedValue) => {
-              let label = undefined;
-              let icon = undefined;
-              if (isRecord(resolvedValue)) {
-                label =
-                  Object.prototype.hasOwnProperty.call(resolvedValue, "name") &&
-                  typeof resolvedValue.name === "string"
-                    ? resolvedValue.name
-                    : communityPage.params.communityId;
-                icon =
-                  Object.prototype.hasOwnProperty.call(
-                    resolvedValue,
-                    "community_icon_url"
-                  ) && typeof resolvedValue.community_icon_url === "string" ? (
-                    <img src={resolvedValue.community_icon_url} alt="" />
-                  ) : undefined;
-              }
-              return isNotLast ? (
-                <NewBreadCrumbsLink
-                  primitiveType="cyberstormLink"
-                  linkId="Community"
-                  community={communityPage.params.communityId}
-                  csVariant="cyber"
-                >
-                  {icon}
-                  {label}
-                </NewBreadCrumbsLink>
-              ) : (
-                <span>
-                  <span>
-                    {icon}
-                    {label}
-                  </span>
-                </span>
-              );
-            }}
-          </Await>
-        </Suspense>
-      ) : null}
-    </>
-  );
-}
-
-function getPackageListingBreadcrumb(
-  packageListingPage: UIMatch | undefined,
-  packageEditPage: UIMatch | undefined,
-  packageDependantsPage: UIMatch | undefined
-) {
-  if (!packageListingPage && !packageEditPage && !packageDependantsPage)
-    return null;
-  return (
-    <>
-      {packageListingPage ? (
-        <span>
-          <span>{packageListingPage.params.packageId}</span>
-        </span>
-      ) : null}
-      {packageEditPage ? (
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Package"
-          community={packageEditPage.params.communityId}
-          namespace={packageEditPage.params.namespaceId}
-          package={packageEditPage.params.packageId}
-          csVariant="cyber"
-        >
-          {packageEditPage.params.packageId}
-        </NewBreadCrumbsLink>
-      ) : null}
-      {packageDependantsPage ? (
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Package"
-          community={packageDependantsPage.params.communityId}
-          namespace={packageDependantsPage.params.namespaceId}
-          package={packageDependantsPage.params.packageId}
-          csVariant="cyber"
-        >
-          {packageDependantsPage.params.packageId}
-        </NewBreadCrumbsLink>
-      ) : null}
-    </>
-  );
-}
diff --git a/apps/cyberstorm-remix/app/rootRoute/betaButton.tsx b/apps/cyberstorm-remix/app/rootRoute/betaButton.tsx
new file mode 100644
index 000000000..f840e6ee9
--- /dev/null
+++ b/apps/cyberstorm-remix/app/rootRoute/betaButton.tsx
@@ -0,0 +1,30 @@
+// Temporary solution for adding the beta button
+
+import { useEffect, useRef } from "react";
+import { useHydrated } from "remix-utils/use-hydrated";
+
+// REMIX TODO: Move to dynamic html
+export function BetaButtonInit() {
+  const isHydrated = useHydrated();
+  const startsHydrated = useRef(isHydrated);
+  const hasRun = useRef(false);
+
+  // This will be loaded 2 times in development because of:
+  // https://react.dev/reference/react/StrictMode
+  // If strict mode is removed from the entry.client.tsx, this should only run once
+  useEffect(() => {
+    if ((!startsHydrated.current && isHydrated) || hasRun.current) return;
+    if (typeof window !== "undefined") {
+      const $script = document.createElement("script");
+      $script.src = "/cyberstorm-static/scripts/beta-switch.js";
+      $script.setAttribute("async", "true");
+
+      document.body.append($script);
+      hasRun.current = true;
+
+      return () => $script.remove();
+    }
+  }, []);
+
+  return <></>;
+}
diff --git a/apps/cyberstorm-remix/app/rootRoute/breadcrumbs.tsx b/apps/cyberstorm-remix/app/rootRoute/breadcrumbs.tsx
new file mode 100644
index 000000000..0e1d555ea
--- /dev/null
+++ b/apps/cyberstorm-remix/app/rootRoute/breadcrumbs.tsx
@@ -0,0 +1,197 @@
+import { NewBreadCrumbs, NewBreadCrumbsLink } from "@thunderstore/cyberstorm";
+import { useMatches } from "react-router";
+import { getCommunityBreadcrumb } from "./breadcrumbs/getCommunityBreadcrumb";
+import { getPackageListingBreadcrumb } from "./breadcrumbs/getPackageListingBreadcrumb";
+import { memo } from "react";
+
+/** Layout component to provide common UI around all pages */
+export const NimbusBreadcrumbs = memo(function NimbusBreadcrumbs(props: {
+  matches: ReturnType<typeof useMatches>;
+}) {
+  const { matches } = props;
+  const userSettingsPage = matches.find(
+    (m) => m.id === "settings/user/Settings"
+  );
+  const userSettingsAccountPage = matches.find(
+    (m) => m.id === "settings/user/Account/Account"
+  );
+  const teamsPage = matches.find((m) => m.id === "settings/teams/Teams");
+  const teamSettingsPage = matches.find(
+    (m) => m.id === "settings/teams/team/teamSettings"
+  );
+  const teamSettingsProfilePage = matches.find(
+    (m) => m.id === "settings/teams/team/tabs/Profile/Profile"
+  );
+  const teamSettingsMembersPage = matches.find(
+    (m) => m.id === "settings/teams/team/tabs/Members/Members"
+  );
+  const teamSettingsServiceAccountsPage = matches.find(
+    (m) => m.id === "settings/teams/team/tabs/ServiceAccounts/ServiceAccounts"
+  );
+  const teamSettingsSettingsPage = matches.find(
+    (m) => m.id === "settings/teams/team/tabs/Settings/Settings"
+  );
+  const communitiesPage = matches.find(
+    (m) => m.id === "communities/communities"
+  );
+  const uploadPage = matches.find((m) => m.id === "upload/upload");
+  const communityPage = matches.find((m) => m.id === "c/community");
+  const packageListingPage = matches.find((m) => m.id === "p/packageListing");
+  const packageEditPage = matches.find((m) => m.id === "p/packageEdit");
+  const packageDependantsPage = matches.find(
+    (m) => m.id === "p/dependants/Dependants"
+  );
+  const packageTeamPage = matches.find((m) => m.id === "p/team/Team");
+  const packageFormatDocsPage = matches.find(
+    (m) => m.id === "tools/package-format-docs/packageFormatDocs"
+  );
+  const manifestValidatorPage = matches.find(
+    (m) => m.id === "tools/manifest-validator/manifestValidator"
+  );
+  const markdownPreviewPage = matches.find(
+    (m) => m.id === "tools/markdown-preview/markdownPreview"
+  );
+
+  return (
+    <NewBreadCrumbs>
+      {/* User Settings */}
+      {userSettingsPage ? (
+        userSettingsAccountPage ? (
+          <NewBreadCrumbsLink
+            primitiveType="cyberstormLink"
+            linkId="Settings"
+            csVariant="cyber"
+          >
+            Settings
+          </NewBreadCrumbsLink>
+        ) : (
+          <span>
+            <span>Settings</span>
+          </span>
+        )
+      ) : null}
+      {/* User Settings account */}
+      {userSettingsAccountPage ? (
+        <span>
+          <span>Account</span>
+        </span>
+      ) : null}
+      {/* Teams */}
+      {teamsPage || teamSettingsPage ? (
+        <NewBreadCrumbsLink
+          primitiveType="cyberstormLink"
+          linkId="Teams"
+          csVariant="cyber"
+        >
+          Teams
+        </NewBreadCrumbsLink>
+      ) : null}
+      {/* Team settings */}
+      {teamSettingsPage ? (
+        <NewBreadCrumbsLink
+          primitiveType="cyberstormLink"
+          linkId="Team"
+          csVariant="cyber"
+          team={teamSettingsPage.params.namespaceId}
+        >
+          {teamSettingsPage.params.namespaceId}
+        </NewBreadCrumbsLink>
+      ) : null}
+      {/* Team Settings Profile */}
+      {teamSettingsProfilePage ? (
+        <span>
+          <span>Profile</span>
+        </span>
+      ) : null}
+      {/* Team Settings Members */}
+      {teamSettingsMembersPage ? (
+        <span>
+          <span>Members</span>
+        </span>
+      ) : null}
+      {/* Team Settings Service Accounts */}
+      {teamSettingsServiceAccountsPage ? (
+        <span>
+          <span>Service Accounts</span>
+        </span>
+      ) : null}
+      {/* Team Settings Settings */}
+      {teamSettingsSettingsPage ? (
+        <span>
+          <span>Settings</span>
+        </span>
+      ) : null}
+      {/* Upload */}
+      {uploadPage ? (
+        <span>
+          <span>Upload</span>
+        </span>
+      ) : null}
+      {/* Communities page */}
+      {communitiesPage ||
+      communityPage ||
+      packageDependantsPage ||
+      packageTeamPage ? (
+        communityPage || packageDependantsPage || packageTeamPage ? (
+          <NewBreadCrumbsLink
+            primitiveType="cyberstormLink"
+            linkId="Communities"
+            csVariant="cyber"
+          >
+            Communities
+          </NewBreadCrumbsLink>
+        ) : (
+          <span>
+            <span>Communities</span>
+          </span>
+        )
+      ) : null}
+      {/* Community page */}
+      {getCommunityBreadcrumb(
+        communityPage ||
+          packageListingPage ||
+          packageDependantsPage ||
+          packageTeamPage,
+        Boolean(packageListingPage) ||
+          Boolean(packageDependantsPage) ||
+          Boolean(packageTeamPage)
+      )}
+      {/* Package listing page */}
+      {getPackageListingBreadcrumb(
+        packageListingPage,
+        packageEditPage,
+        packageDependantsPage
+      )}
+      {packageEditPage ? (
+        <span>
+          <span>Edit package</span>
+        </span>
+      ) : null}
+      {packageDependantsPage ? (
+        <span>
+          <span>Dependants</span>
+        </span>
+      ) : null}
+      {packageTeamPage ? (
+        <span>
+          <span>{packageTeamPage.params.namespaceId}</span>
+        </span>
+      ) : null}
+      {packageFormatDocsPage ? (
+        <span>
+          <span>Package Format Docs</span>
+        </span>
+      ) : null}
+      {manifestValidatorPage ? (
+        <span>
+          <span>Manifest Validator</span>
+        </span>
+      ) : null}
+      {markdownPreviewPage ? (
+        <span>
+          <span>Markdown Preview</span>
+        </span>
+      ) : null}
+    </NewBreadCrumbs>
+  );
+});
diff --git a/apps/cyberstorm-remix/app/rootRoute/breadcrumbs/breadcrumbs.tsx b/apps/cyberstorm-remix/app/rootRoute/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/cyberstorm-remix/app/rootRoute/breadcrumbs/getCommunityBreadcrumb.tsx b/apps/cyberstorm-remix/app/rootRoute/breadcrumbs/getCommunityBreadcrumb.tsx
new file mode 100644
index 000000000..2d165a2cb
--- /dev/null
+++ b/apps/cyberstorm-remix/app/rootRoute/breadcrumbs/getCommunityBreadcrumb.tsx
@@ -0,0 +1,64 @@
+import { isRecord, NewBreadCrumbsLink } from "@thunderstore/cyberstorm";
+import { Suspense } from "react";
+import { Await, UIMatch } from "react-router";
+
+export function getCommunityBreadcrumb(
+  communityPage: UIMatch | undefined,
+  isNotLast: boolean
+) {
+  if (!communityPage) return null;
+  return (
+    <>
+      {communityPage &&
+      isRecord(communityPage.data) &&
+      Object.prototype.hasOwnProperty.call(communityPage.data, "community") ? (
+        <Suspense
+          fallback={
+            <span>
+              <span>Loading...</span>
+            </span>
+          }
+        >
+          <Await resolve={communityPage.data.community}>
+            {(resolvedValue) => {
+              let label = undefined;
+              let icon = undefined;
+              if (isRecord(resolvedValue)) {
+                label =
+                  Object.prototype.hasOwnProperty.call(resolvedValue, "name") &&
+                  typeof resolvedValue.name === "string"
+                    ? resolvedValue.name
+                    : communityPage.params.communityId;
+                icon =
+                  Object.prototype.hasOwnProperty.call(
+                    resolvedValue,
+                    "community_icon_url"
+                  ) && typeof resolvedValue.community_icon_url === "string" ? (
+                    <img src={resolvedValue.community_icon_url} alt="" />
+                  ) : undefined;
+              }
+              return isNotLast ? (
+                <NewBreadCrumbsLink
+                  primitiveType="cyberstormLink"
+                  linkId="Community"
+                  community={communityPage.params.communityId}
+                  csVariant="cyber"
+                >
+                  {icon}
+                  {label}
+                </NewBreadCrumbsLink>
+              ) : (
+                <span>
+                  <span>
+                    {icon}
+                    {label}
+                  </span>
+                </span>
+              );
+            }}
+          </Await>
+        </Suspense>
+      ) : null}
+    </>
+  );
+}
diff --git a/apps/cyberstorm-remix/app/rootRoute/breadcrumbs/getPackageListingBreadcrumb.tsx b/apps/cyberstorm-remix/app/rootRoute/breadcrumbs/getPackageListingBreadcrumb.tsx
new file mode 100644
index 000000000..9f23ab9aa
--- /dev/null
+++ b/apps/cyberstorm-remix/app/rootRoute/breadcrumbs/getPackageListingBreadcrumb.tsx
@@ -0,0 +1,44 @@
+import { NewBreadCrumbsLink } from "@thunderstore/cyberstorm";
+import { UIMatch } from "react-router";
+
+export function getPackageListingBreadcrumb(
+  packageListingPage: UIMatch | undefined,
+  packageEditPage: UIMatch | undefined,
+  packageDependantsPage: UIMatch | undefined
+) {
+  if (!packageListingPage && !packageEditPage && !packageDependantsPage)
+    return null;
+  return (
+    <>
+      {packageListingPage ? (
+        <span>
+          <span>{packageListingPage.params.packageId}</span>
+        </span>
+      ) : null}
+      {packageEditPage ? (
+        <NewBreadCrumbsLink
+          primitiveType="cyberstormLink"
+          linkId="Package"
+          community={packageEditPage.params.communityId}
+          namespace={packageEditPage.params.namespaceId}
+          package={packageEditPage.params.packageId}
+          csVariant="cyber"
+        >
+          {packageEditPage.params.packageId}
+        </NewBreadCrumbsLink>
+      ) : null}
+      {packageDependantsPage ? (
+        <NewBreadCrumbsLink
+          primitiveType="cyberstormLink"
+          linkId="Package"
+          community={packageDependantsPage.params.communityId}
+          namespace={packageDependantsPage.params.namespaceId}
+          package={packageDependantsPage.params.packageId}
+          csVariant="cyber"
+        >
+          {packageDependantsPage.params.packageId}
+        </NewBreadCrumbsLink>
+      ) : null}
+    </>
+  );
+}
diff --git a/apps/cyberstorm-remix/app/rootRoute/nitroAds.tsx b/apps/cyberstorm-remix/app/rootRoute/nitroAds.tsx
new file mode 100644
index 000000000..b77773c1f
--- /dev/null
+++ b/apps/cyberstorm-remix/app/rootRoute/nitroAds.tsx
@@ -0,0 +1,78 @@
+// Temporary solution for implementing ads
+
+import { AdContainer } from "@thunderstore/cyberstorm";
+import { memo, useEffect, useRef } from "react";
+import { useHydrated } from "remix-utils/use-hydrated";
+
+export const adContainerIds = [
+  "right-column-1",
+  "right-column-2",
+  "right-column-3",
+];
+
+// REMIX TODO: Move to dynamic html
+export function AdsInit() {
+  const isHydrated = useHydrated();
+  const startsHydrated = useRef(isHydrated);
+
+  // This will be loaded 2 times in development because of:
+  // https://react.dev/reference/react/StrictMode
+  // If strict mode is removed from the entry.client.tsx, this should only run once
+  useEffect(() => {
+    if (!startsHydrated.current && isHydrated) return;
+    if (
+      typeof window !== "undefined" &&
+      typeof window.nitroAds === "undefined"
+    ) {
+      const $script = document.createElement("script");
+      $script.src = "https://s.nitropay.com/ads-785.js";
+      $script.setAttribute("async", "true");
+      $script.setAttribute("data-log-level", "silent");
+
+      document.body.append($script);
+
+      return () => $script.remove();
+    }
+  }, []);
+
+  const nitroAds = typeof window !== "undefined" ? window.nitroAds : undefined;
+  useEffect(() => {
+    if (nitroAds !== undefined && nitroAds.createAd !== undefined) {
+      adContainerIds.forEach((cid) => {
+        if (nitroAds !== undefined && nitroAds.createAd !== undefined) {
+          nitroAds.createAd(cid, {
+            demo: false,
+            format: "display",
+            refreshLimit: 0,
+            refreshTime: 30,
+            renderVisibleOnly: true,
+            refreshVisibleOnly: true,
+            sizes: [["300", "250"]],
+            report: {
+              enabled: true,
+              wording: "Report Ad",
+              position: "bottom-right",
+            },
+            mediaQuery: "(min-width: 1475px) and (min-height: 400px)",
+          });
+        }
+      });
+    }
+  }, [nitroAds]);
+
+  return <></>;
+}
+
+export const Ads = memo(function Ads({ shouldShow }: { shouldShow: boolean }) {
+  if (!shouldShow) return null;
+
+  return (
+    <div className="container container--y island-item layout__ads">
+      <div className="container container--y layout__ads-inner">
+        {adContainerIds.map((cid, k_i) => (
+          <AdContainer key={k_i} containerId={cid} />
+        ))}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/cyberstorm-remix/app/rootRoute/tooltipProvider.tsx b/apps/cyberstorm-remix/app/rootRoute/tooltipProvider.tsx
new file mode 100644
index 000000000..85f181a9f
--- /dev/null
+++ b/apps/cyberstorm-remix/app/rootRoute/tooltipProvider.tsx
@@ -0,0 +1,10 @@
+import { memo, ReactNode } from "react";
+import { Provider } from "@radix-ui/react-tooltip";
+
+export const TooltipProvider = memo(function TooltipProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <Provider delayDuration={80}>{children}</Provider>;
+});