diff --git a/apps/cyberstorm-remix/app/c/Community.css b/apps/cyberstorm-remix/app/c/Community.css
index 1548c945b..1d5d40e0d 100644
--- a/apps/cyberstorm-remix/app/c/Community.css
+++ b/apps/cyberstorm-remix/app/c/Community.css
@@ -26,7 +26,7 @@
     align-items: center;
     align-self: stretch;
     justify-content: center;
-    height: 12.5rem;
+    max-height: 12.5rem;
     border-radius: 0.5rem;
     overflow-y: hidden;
     transition: height 2s;
@@ -36,6 +36,10 @@
       background: var(--color-ui-surface-1);
       opacity: 0.8;
     }
+
+    .skeleton {
+      height: 12.5rem;
+    }
   }
 
   .community__background--packagePage {
@@ -47,12 +51,14 @@
     }
   }
 
-  .community__content-header {
+  .community__content-header-wrapper {
     z-index: 1;
     display: flex;
+    flex-wrap: wrap;
     gap: 1.5rem;
-    align-items: flex-end;
+    place-items: flex-end stretch;
     align-self: stretch;
+    justify-content: space-between;
     height: max-content;
     margin-top: -1rem;
     padding-left: 1rem;
@@ -62,6 +68,16 @@
       visibility 1s 0s;
   }
 
+  .community__content-header {
+    display: flex;
+    flex-grow: 1;
+    gap: 1.5rem;
+    align-items: flex-end;
+    align-self: stretch;
+    min-width: 75%;
+    height: max-content;
+  }
+
   .community__content-header--hide {
     height: 0;
     visibility: collapse;
@@ -101,11 +117,10 @@
   .community__content-header-content {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     gap: 0.75rem;
     align-items: flex-start;
     justify-content: center;
-    width: 100%;
-    height: 5rem;
   }
 
   .community__header-info {
@@ -115,16 +130,26 @@
     gap: 0.25rem;
     align-items: flex-start;
     align-self: stretch;
-    width: 40%;
+    min-width: 60%;
+    max-width: 100%;
+
+    > h1 {
+      line-height: 80%;
+      overflow-wrap: anywhere;
+    }
   }
 
   .community__header-meta {
     display: flex;
-    flex: 0 1 0;
+    flex: 0 1 60%;
     gap: 1.5rem;
     align-items: center;
-    width: 60%;
-    min-height: 16px;
+    min-width: 60%;
+    height: 16px;
+
+    > .skeleton {
+      height: 1rem;
+    }
   }
 
   .community__small-image {
@@ -151,7 +176,7 @@
   .community__meta {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
   }
 
@@ -169,9 +194,36 @@
     }
   }
 
+  @media (width >= 41rem) {
+    .community__background {
+      height: 12.5rem;
+    }
+  }
+
+  @media (width < 41rem) {
+    .community__background {
+      .skeleton {
+        height: 8rem;
+      }
+    }
+
+    .community__header {
+      gap: 1rem;
+    }
+
+    .community__content-header-wrapper {
+      margin-top: 0;
+      padding-left: 0;
+    }
+
+    .community__game-icon {
+      display: none;
+    }
+  }
+
   @media (width <= 48rem) {
     .community__meta {
-      gap: var(--gap-xxs);
+      gap: var(--gap-2xs);
     }
 
     .community__item {
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
index ade0f3bcf..c89b611a4 100644
--- a/apps/cyberstorm-remix/app/c/community.tsx
+++ b/apps/cyberstorm-remix/app/c/community.tsx
@@ -39,8 +39,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
         sessionId: undefined,
       };
     });
-    const community = dapper.getCommunity(params.communityId);
-
+    const community = await dapper.getCommunity(params.communityId);
     return {
       community: community,
     };
@@ -152,91 +151,99 @@ export default function Community() {
 
           <div
             className={classnames(
-              "community__content-header",
+              "community__content-header-wrapper",
               isSubPath ? "community__content-header--hide" : null
             )}
           >
-            <div className="community__game-icon">
-              <div className="community__game-icon-tinified">
-                <Suspense fallback={<SkeletonBox />}>
-                  <Await resolve={community}>
-                    {(resolvedValue) =>
-                      resolvedValue.community_icon_url ? (
-                        <img
-                          src={resolvedValue.community_icon_url}
-                          alt={resolvedValue.name}
-                        />
-                      ) : null
-                    }
-                  </Await>
-                </Suspense>
+            <div className="community__content-header">
+              <div className="community__game-icon">
+                <div className="community__game-icon-tinified">
+                  <Suspense fallback={<SkeletonBox />}>
+                    <Await resolve={community}>
+                      {(resolvedValue) =>
+                        resolvedValue.community_icon_url ? (
+                          <img
+                            src={resolvedValue.community_icon_url}
+                            alt={resolvedValue.name}
+                          />
+                        ) : null
+                      }
+                    </Await>
+                  </Suspense>
+                </div>
               </div>
-            </div>
-            <div className="community__content-header-content">
-              <div className="community__header-info">
-                <Suspense fallback={<SkeletonBox />}>
-                  <Await resolve={community}>
-                    {(resolvedValue) => (
-                      <Heading
-                        csLevel={"1"}
-                        csSize={"3"}
-                        csVariant="primary"
-                        mode="display"
-                      >
-                        {resolvedValue.name}
-                      </Heading>
-                    )}
-                  </Await>
-                </Suspense>
-              </div>
-              <div className="community__header-meta">
-                <Suspense fallback={<SkeletonBox />}>
-                  <Await resolve={community}>
-                    {(resolvedValue) =>
-                      resolvedValue.wiki_url ? (
-                        <NewLink
-                          primitiveType="link"
-                          href={resolvedValue.wiki_url}
-                          csVariant="cyber"
-                          rootClasses="community__item"
-                        >
-                          <NewIcon csMode="inline" noWrapper>
-                            <FontAwesomeIcon icon={faBook} />
-                          </NewIcon>
-                          <span>Modding Wiki</span>
-                          <NewIcon csMode="inline" noWrapper>
-                            <FontAwesomeIcon icon={faArrowUpRight} />
-                          </NewIcon>
-                        </NewLink>
-                      ) : null
-                    }
-                  </Await>
-                </Suspense>
-                <Suspense fallback={<SkeletonBox />}>
-                  <Await resolve={community}>
-                    {(resolvedValue) =>
-                      resolvedValue.discord_url ? (
-                        <NewLink
-                          primitiveType="link"
-                          href={resolvedValue.discord_url}
-                          csVariant="cyber"
-                          rootClasses="community__item"
+              <div className="community__content-header-content">
+                <div className="community__header-info">
+                  <Suspense fallback={<SkeletonBox />}>
+                    <Await resolve={community}>
+                      {(resolvedValue) => (
+                        <Heading
+                          csLevel={"1"}
+                          csSize={"3"}
+                          csVariant="primary"
+                          mode="display"
                         >
-                          <NewIcon csMode="inline" noWrapper>
-                            <FontAwesomeIcon icon={faDiscord} />
-                          </NewIcon>
-                          <span>Modding Discord</span>
-                          <NewIcon csMode="inline" noWrapper>
-                            <FontAwesomeIcon icon={faArrowUpRight} />
-                          </NewIcon>
-                        </NewLink>
-                      ) : null
-                    }
-                  </Await>
-                </Suspense>
+                          {resolvedValue.name}
+                        </Heading>
+                      )}
+                    </Await>
+                  </Suspense>
+                </div>
+                <div className="community__header-meta">
+                  <Suspense fallback={<SkeletonBox />}>
+                    <Await resolve={community}>
+                      {(resolvedValue) =>
+                        resolvedValue.wiki_url ? (
+                          <NewLink
+                            primitiveType="link"
+                            href={resolvedValue.wiki_url}
+                            csVariant="cyber"
+                            rootClasses="community__item"
+                          >
+                            <NewIcon csMode="inline" noWrapper>
+                              <FontAwesomeIcon icon={faBook} />
+                            </NewIcon>
+                            <span>Modding Wiki</span>
+                            <NewIcon csMode="inline" noWrapper>
+                              <FontAwesomeIcon icon={faArrowUpRight} />
+                            </NewIcon>
+                          </NewLink>
+                        ) : null
+                      }
+                    </Await>
+                  </Suspense>
+                  <Suspense fallback={<SkeletonBox />}>
+                    <Await resolve={community}>
+                      {(resolvedValue) =>
+                        resolvedValue.discord_url ? (
+                          <NewLink
+                            primitiveType="link"
+                            href={resolvedValue.discord_url}
+                            csVariant="cyber"
+                            rootClasses="community__item"
+                          >
+                            <NewIcon csMode="inline" noWrapper>
+                              <FontAwesomeIcon icon={faDiscord} />
+                            </NewIcon>
+                            <span>Modding Discord</span>
+                            <NewIcon csMode="inline" noWrapper>
+                              <FontAwesomeIcon icon={faArrowUpRight} />
+                            </NewIcon>
+                          </NewLink>
+                        ) : null
+                      }
+                    </Await>
+                  </Suspense>
+                </div>
               </div>
             </div>
-            <NewButton csSize="big" csVariant="accent">
+            <NewButton
+              csSize="big"
+              csVariant="accent"
+              primitiveType="cyberstormLink"
+              linkId="PackageUpload"
+              rootClasses="community__upload-button"
+            >
               <NewIcon noWrapper csMode="inline">
                 <FontAwesomeIcon icon={faDownload} />
               </NewIcon>
diff --git a/apps/cyberstorm-remix/app/c/tabs/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/c/tabs/PackageSearch/PackageSearch.tsx
index 2cf8be887..71b1b0a0c 100644
--- a/apps/cyberstorm-remix/app/c/tabs/PackageSearch/PackageSearch.tsx
+++ b/apps/cyberstorm-remix/app/c/tabs/PackageSearch/PackageSearch.tsx
@@ -1,4 +1,3 @@
-import type { LoaderFunctionArgs } from "react-router";
 import { useLoaderData, useOutletContext } from "react-router";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
 import { PackageOrderOptions } from "~/commonComponents/PackageSearch/components/PackageOrder";
@@ -8,8 +7,9 @@ import {
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
 import { OutletContextShape } from "~/root";
+import { Route } from "./+types/PackageSearch";
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ params, request }: Route.LoaderArgs) {
   if (params.communityId) {
     const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
     const dapper = new DapperTs(() => {
@@ -28,11 +28,11 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     const section = searchParams.get("section");
     const nsfw = searchParams.get("nsfw");
     const deprecated = searchParams.get("deprecated");
-    const filters = dapper.getCommunityFilters(params.communityId);
+    const filters = await dapper.getCommunityFilters(params.communityId);
 
     return {
       filters: filters,
-      listings: dapper.getPackageListings(
+      listings: await dapper.getPackageListings(
         {
           kind: "community",
           communityId: params.communityId,
@@ -51,7 +51,10 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   throw new Response("Community not found", { status: 404 });
 }
 
-export async function clientLoader({ request, params }: LoaderFunctionArgs) {
+export async function clientLoader({
+  request,
+  params,
+}: Route.ClientLoaderArgs) {
   if (params.communityId) {
     const tools = getSessionTools();
     const dapper = new DapperTs(() => {
diff --git a/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css b/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css
index 25af9390e..f5f80bba8 100644
--- a/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css
+++ b/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css
@@ -16,30 +16,49 @@
       transition: var(--animation-duration-xs);
       user-select: none;
 
+      > span {
+        display: inline-flex;
+        flex-wrap: nowrap;
+        gap: 0.75rem;
+        align-items: center;
+      }
+
       &.checkbox-list__label--off {
         color: var(--color-text-secondary);
 
         svg {
           --icon-color: var(--color-surface-a8);
         }
+
+        .checkbox-list__exclude-button svg {
+          --icon-color: transparent;
+        }
       }
 
       &.checkbox-list__label--include {
         color: var(--color-cyber-green-7);
         font-weight: var(--font-weight-bold);
 
-        svg {
+        .checkbox-list__checkbox-button svg {
           --icon-color: var(--color-cyber-green-7);
         }
+
+        .checkbox-list__exclude-button svg {
+          --icon-color: transparent;
+        }
       }
 
       &.checkbox-list__label--exclude {
         color: var(--color-accent-red-7);
         font-weight: var(--font-weight-bold);
 
-        svg {
+        .checkbox-list__exclude-button svg {
           --icon-color: var(--color-accent-red-7);
         }
+
+        .checkbox-list__checkbox-button svg {
+          --icon-color: var(--color-surface-a8);
+        }
       }
 
       &:hover {
@@ -57,22 +76,30 @@
         &.checkbox-list__label--include {
           color: var(--color-cyber-green-8);
 
-          svg {
+          .checkbox-list__checkbox-button svg {
             --icon-color: var(--color-cyber-green-8);
           }
+
+          .checkbox-list__exclude-button svg {
+            --icon-color: var(--color-accent-red-8);
+          }
         }
 
         &.checkbox-list__label--exclude {
           color: var(--color-accent-red-8);
 
-          svg {
+          .checkbox-list__checkbox-button svg {
+            --icon-color: var(--color-surface-a10);
+          }
+
+          .checkbox-list__exclude-button svg {
             --icon-color: var(--color-accent-red-8);
           }
         }
       }
     }
 
-    .checkbox-list__checkbox {
+    .checkbox-list__icon {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -83,6 +110,17 @@
 
       background-color: transparent;
       transition: ease-out var(--animation-duration-xs);
+
+      &.checkbox-list__exclude-button {
+        --icon-inline-size: var(--space-16);
+
+        width: var(--space-20);
+        height: var(--space-20);
+
+        &:hover {
+          --icon-color: var(--color-accent-red-8);
+        }
+      }
     }
   }
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx b/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx
index 1e7ef018d..468b8e062 100644
--- a/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx
@@ -1,12 +1,12 @@
 import {
+  faBan,
   faSquare,
   faSquareCheck,
-  faSquareXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import "./CheckboxList.css";
-import { CycleButton, NewIcon } from "@thunderstore/cyberstorm";
+import { Actionable, NewIcon } from "@thunderstore/cyberstorm";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 import { resolveTriState } from "~/commonComponents/utils";
 import { TRISTATE } from "~/commonComponents/types";
@@ -45,28 +45,48 @@ export const CheckboxList = memo(function CheckboxList(props: Props) {
                 "checkbox-list__label",
                 `checkbox-list__label--${cs}`
               )}
+              htmlFor={`checkbox-list__checkbox__${item.label}`}
             >
-              {item.label}
-              <CycleButton
-                onInteract={() => {
-                  item.setStateFunc(nextStateResolve(item.state));
-                }}
-                rootClasses="checkbox-list__checkbox"
-                value={`checkbox-list__label--${cs}`}
-                noState
-              >
-                <NewIcon csMode="inline" noWrapper>
-                  <FontAwesomeIcon
-                    icon={
-                      cs === "include"
-                        ? faSquareCheck
-                        : cs === "exclude"
-                          ? faSquareXmark
-                          : faSquare
+              <span>
+                <Actionable
+                  primitiveType={"button"}
+                  onClick={() => {
+                    if (typeof item.state === "string") {
+                      item.setStateFunc(
+                        item.state !== "include" ? "include" : "off"
+                      );
+                    } else {
+                      item.setStateFunc(!item.state);
                     }
-                  />
-                </NewIcon>
-              </CycleButton>
+                  }}
+                  rootClasses="checkbox-list__icon checkbox-list__checkbox-button"
+                  id={`checkbox-list__checkbox__${item.label}`}
+                >
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon
+                      icon={cs === "include" ? faSquareCheck : faSquare}
+                    />
+                  </NewIcon>
+                </Actionable>
+                {item.label}
+              </span>
+              {typeof item.state === "string" && (
+                <Actionable
+                  primitiveType={"button"}
+                  onClick={() => {
+                    if (item.state === "exclude") {
+                      item.setStateFunc("off");
+                    } else {
+                      item.setStateFunc("exclude");
+                    }
+                  }}
+                  rootClasses="checkbox-list__icon checkbox-list__exclude-button"
+                >
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon icon={faBan} />
+                  </NewIcon>
+                </Actionable>
+              )}
             </label>
           </li>
         );
diff --git a/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.css b/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.css
index 126fd96de..1099eb8d4 100644
--- a/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.css
+++ b/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.css
@@ -3,8 +3,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    align-items: flex-start;
-    align-self: stretch;
+    align-items: stretch;
     padding: 0.5rem;
     border-radius: var(--Radius-md, 0.5rem);
     font-size: var(--font-size-body-md);
diff --git a/apps/cyberstorm-remix/app/commonComponents/Connection/Connection.css b/apps/cyberstorm-remix/app/commonComponents/Connection/Connection.css
index 982599319..2496be7ba 100644
--- a/apps/cyberstorm-remix/app/commonComponents/Connection/Connection.css
+++ b/apps/cyberstorm-remix/app/commonComponents/Connection/Connection.css
@@ -1,7 +1,7 @@
 @layer nimbus-components {
   .connection {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
     align-self: stretch;
     padding: var(--space-16) var(--space-32);
@@ -48,7 +48,7 @@
 
   .connection__actions {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
     justify-content: flex-end;
   }
@@ -56,7 +56,7 @@
   .connection__description {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxxs);
+    gap: var(--gap-3xs);
     align-items: flex-end;
     justify-content: center;
   }
diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
index dc80f1e21..718fd0109 100644
--- a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
+++ b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
@@ -21,7 +21,7 @@
   .footer__links-wrapper {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     justify-content: space-between;
     margin-left: 3.5rem;
   }
@@ -47,7 +47,7 @@
   .footer__icon-links {
     display: flex;
     flex-shrink: 0;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     justify-content: center;
   }
 
@@ -181,7 +181,7 @@
   .footnote__inner {
     display: flex;
     flex-grow: 1;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     max-width: calc(var(--footer-half-width) * 2);
     margin-right: 3.5rem;
     margin-left: 3.5rem;
@@ -191,7 +191,7 @@
     display: flex;
     flex: 1 0 0;
     flex-wrap: wrap;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: flex-start;
 
     > a {
@@ -240,7 +240,7 @@
       display: flex;
       flex-flow: column wrap;
       flex-shrink: 0;
-      gap: var(--gap-xxxl);
+      gap: var(--gap-3xl);
       justify-content: space-between;
       max-width: unset;
       margin-left: unset;
diff --git a/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css b/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css
index b8e2e5b3f..787069f08 100644
--- a/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css
+++ b/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css
@@ -29,7 +29,7 @@
 
   .listing-dependency__title {
     display: flex;
-    gap: var(--gap-xxs);
+    gap: var(--gap-2xs);
     align-items: center;
     align-self: stretch;
     font-weight: var(--font-weight-regular);
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css
index d16f40b92..31218c261 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css
@@ -46,11 +46,17 @@
 
   .package-search__pagination {
     display: flex;
-    gap: var(--gap-xxs);
+    gap: var(--gap-2xs);
     align-items: center;
     align-self: stretch;
     justify-content: center;
     padding-top: var(--space-40);
+
+    > .skeleton {
+      width: 100%;
+      max-width: 20rem;
+      height: 2.5rem;
+    }
   }
 
   .package-search__search-params {
@@ -102,8 +108,14 @@
   .package-search__results {
     display: flex;
     flex: 1;
-    gap: var(--gap-xxs);
+    gap: var(--gap-2xs);
     align-items: center;
+    justify-content: flex-end;
+
+    .skeleton {
+      width: 18ch;
+      height: 1rem;
+    }
   }
 
   .package-search__packages {
@@ -120,6 +132,10 @@
     grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
     gap: var(--gap-sm);
     width: 100%;
+
+    > .skeleton {
+      height: 30rem;
+    }
   }
 
   @media (width <= 48rem) {
@@ -145,6 +161,7 @@
   @media (width <= 475px) {
     .package-search {
       flex-direction: column;
+      gap: 0.25rem;
     }
 
     .package-search__sidebar {
@@ -153,8 +170,13 @@
       width: 100%;
     }
 
+    .package-search__filters {
+      width: unset;
+    }
+
     .package-search__tools {
       flex-direction: column;
+      gap: 0.5rem;
       align-items: stretch;
     }
 
@@ -165,9 +187,14 @@
 
     .package-search__grid {
       grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+
+      > .skeleton {
+        height: 28rem;
+      }
     }
 
     .package-search__content {
+      gap: 0.5rem;
       align-self: stretch;
     }
   }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
index 6ebe0e050..c063cd317 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
@@ -5,7 +5,7 @@ import {
   PackageListings,
   Section,
 } from "@thunderstore/dapper/types";
-import { Suspense, useEffect, useRef, useState } from "react";
+import { memo, Suspense, useEffect, useRef, useState } from "react";
 import { useDebounce } from "use-debounce";
 
 import "./PackageSearch.css";
@@ -16,6 +16,7 @@ import {
   NewButton,
   NewPagination,
   NewTextInput,
+  SkeletonBox,
 } from "@thunderstore/cyberstorm";
 import { Await, useNavigationType, useSearchParams } from "react-router";
 import { PackageCount } from "./components/PackageCount/PackageCount";
@@ -35,12 +36,13 @@ import {
   RequestConfig,
 } from "@thunderstore/thunderstore-api";
 import { DapperTs } from "@thunderstore/dapper-ts";
+import { isPromise } from "cyberstorm/utils/typeChecks";
 
 const PER_PAGE = 20;
 
 interface Props {
-  listings: Promise<PackageListings>;
-  filters: Promise<CommunityFilters>;
+  listings: Promise<PackageListings> | PackageListings;
+  filters: Promise<CommunityFilters> | CommunityFilters;
   config: () => RequestConfig;
   currentUser?: CurrentUser;
   dapper: DapperTs;
@@ -148,34 +150,26 @@ const compareSearchParamBlobs = (
 export function PackageSearch(props: Props) {
   const { listings, filters, config, currentUser, dapper } = props;
 
-  // const navigation = useNavigation();
-
   const navigationType = useNavigationType();
 
-  // const listingsAndFiltersMemo = useMemo(
-  //   () => Promise.all([listings, filters]),
-  //   [listings, filters]
-  // );
+  // This exists to resolve insert the initial sections and categories on server-side
+  // so that we don't have to await the clientLoader to get the options, to then be able to
+  // do the initial fetch
+  const possibleFilters = isPromise(filters) ? undefined : filters;
 
-  const [sortedSections, setSortedSections] =
-    useState<CommunityFilters["sections"]>();
-  const [categories, setCategories] = useState<CategorySelection[]>();
+  const [sortedSections, setSortedSections] = useState<
+    CommunityFilters["sections"] | undefined
+  >(possibleFilters?.sections);
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [categories, setCategories] = useState<CategorySelection[] | undefined>(
+    possibleFilters?.package_categories
+      .sort((a, b) => a.slug.localeCompare(b.slug))
+      .map((c) => ({ ...c, selection: "off" }))
+  );
 
-  // filters.then((resolvedFilters) => {
-  //   // Set sorted sections
-  //   setSortedSections(
-  //     resolvedFilters.sections.sort((a, b) => b.priority - a.priority)
-  //   );
-  //   // Set current "initial" categories
-  //   const categories: CategorySelection[] = resolvedFilters.package_categories
-  //     .sort((a, b) => a.slug.localeCompare(b.slug))
-  //     .map((c) => ({ ...c, selection: "off" }));
-  //   setCategories(categories);
-  // });
+  const [searchParams, setSearchParams] = useSearchParams();
 
-  const initialParams = searchParamsToBlob(searchParams);
+  const initialParams = searchParamsToBlob(searchParams, sortedSections);
 
   const [searchParamsBlob, setSearchParamsBlob] =
     useState<SearchParamsType>(initialParams);
@@ -184,6 +178,37 @@ export function PackageSearch(props: Props) {
     searchParams.get("page") ? Number(searchParams.get("page")) : 1
   );
 
+  const categoriesRef = useRef<
+    undefined | Awaited<Promise<CommunityFilters>>["package_categories"]
+  >(undefined);
+
+  useEffect(() => {
+    if (isPromise(filters)) {
+      // On mount, resolve filters promise and set sections and categories states
+      filters.then((resolvedFilters) => {
+        // Set sorted sections
+        setSortedSections(
+          resolvedFilters.sections.sort((a, b) => b.priority - a.priority)
+        );
+        if (sortedSections && sortedSections.length !== 0) {
+          setSearchParamsBlob((prev) => ({
+            ...prev,
+            section: sortedSections[0].uuid,
+          }));
+        }
+        if (resolvedFilters.package_categories !== categoriesRef.current) {
+          // Set current "initial" categories
+          const categories: CategorySelection[] =
+            resolvedFilters.package_categories
+              .sort((a, b) => a.slug.localeCompare(b.slug))
+              .map((c) => ({ ...c, selection: "off" }));
+          setCategories(categories);
+          categoriesRef.current = resolvedFilters.package_categories;
+        }
+      });
+    }
+  }, []);
+
   // Categories start
 
   const parsedCategories = parseCategories(
@@ -307,38 +332,30 @@ export function PackageSearch(props: Props) {
           resetPage = true;
         }
         // Section
-        // Because of the first section being a empty value, the logic check is a bit funky
-
-        // If no section in search params, delete
-        if (sortedSections && sortedSections.length === 0)
-          searchParams.delete("section");
-
-        // If new section is empty, delete (defaults to first)
-        if (debouncedSearchParamsBlob.section === "")
-          searchParams.delete("section");
-
-        // If new section is the first one, delete. And reset page number if section is different from last render.
         if (
-          sortedSections &&
-          debouncedSearchParamsBlob.section === sortedSections[0]?.uuid
+          debouncedSearchParamsBlob.section === "" ||
+          (sortedSections && sortedSections.length === 0)
         ) {
-          if (
-            searchParamsBlobRef.current.section !==
-            debouncedSearchParamsBlob.section
-          ) {
-            resetPage = true;
-          }
           searchParams.delete("section");
+        } else {
+          if (sortedSections && sortedSections.length !== 0) {
+            if (debouncedSearchParamsBlob.section === sortedSections[0]?.uuid) {
+              // If the first one, ensure the search param isn't set as it's defaulted to the first one in SearchParmsToBlob function.
+              searchParams.delete("section");
+            } else {
+              searchParams.set("section", debouncedSearchParamsBlob.section);
+            }
+          } else {
+            // This else is for completeness
+            searchParams.delete("section");
+          }
         }
 
-        // If new section is different and not the first one, set it.
+        // Reset page if section has changed
         if (
-          sortedSections &&
           searchParamsBlobRef.current.section !==
-            debouncedSearchParamsBlob.section &&
-          debouncedSearchParamsBlob.section !== sortedSections[0]?.uuid
+          debouncedSearchParamsBlob.section
         ) {
-          searchParams.set("section", debouncedSearchParamsBlob.section);
           resetPage = true;
         }
 
@@ -470,7 +487,11 @@ export function PackageSearch(props: Props) {
                     priority: -999999999,
                   },
                 ]}
-                selected={searchParamsBlob.section ?? sortedSections[0]?.uuid}
+                selected={
+                  searchParamsBlob.section === ""
+                    ? sortedSections[0]?.uuid
+                    : searchParamsBlob.section
+                }
                 setSelected={setParamsBlobValue(
                   setSearchParamsBlob,
                   searchParamsBlob,
@@ -581,13 +602,7 @@ export function PackageSearch(props: Props) {
               </div>
             </div>
             <div className="package-search__results">
-              <Suspense
-                fallback={
-                  <span>
-                    <span>Loading...</span>
-                  </span>
-                }
-              >
+              <Suspense fallback={<SkeletonBox />}>
                 <Await resolve={listings}>
                   {(resolvedValue) => (
                     <PackageCount
@@ -603,13 +618,7 @@ export function PackageSearch(props: Props) {
           </div>
         </div>
         <div className="package-search__packages">
-          <Suspense
-            fallback={
-              <span>
-                <span>Loading...</span>
-              </span>
-            }
-          >
+          <Suspense fallback={<PackageSearchPackagesSkeleton />}>
             <Await resolve={listings}>
               {(resolvedValue) => (
                 <>
@@ -686,13 +695,7 @@ export function PackageSearch(props: Props) {
           </Suspense>
         </div>
         <div className="package-search__pagination">
-          <Suspense
-            fallback={
-              <span>
-                <span>Loading...</span>
-              </span>
-            }
-          >
+          <Suspense fallback={<SkeletonBox />}>
             <Await resolve={listings}>
               {(resolvedValue) => (
                 <NewPagination
@@ -770,9 +773,6 @@ const resetParams = (
     includedCategories: "",
     excludedCategories: "",
   });
-  // setOrdering(order);
-  // setPage(1);
-  // setSearchValue("");
 };
 
 const clearAll =
@@ -784,3 +784,15 @@ const clearAll =
       excludedCategories: "",
     });
 // End setters
+
+const PackageSearchPackagesSkeleton = memo(
+  function PackageSearchPackagesSkeleton() {
+    return (
+      <div className="package-search__grid">
+        {Array.from({ length: 12 }).map((_, index) => (
+          <SkeletonBox key={index} />
+        ))}
+      </div>
+    );
+  }
+);
diff --git a/apps/cyberstorm-remix/app/communities/Communities.css b/apps/cyberstorm-remix/app/communities/Communities.css
index 13224fec1..ad7868656 100644
--- a/apps/cyberstorm-remix/app/communities/Communities.css
+++ b/apps/cyberstorm-remix/app/communities/Communities.css
@@ -12,7 +12,7 @@
   .communities__content {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -38,7 +38,7 @@
     display: grid;
     flex-flow: row wrap;
     grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
-    gap: var(--gap-xxxxxxxl) var(--gap-xl);
+    gap: var(--gap-7xl) var(--gap-xl);
     width: 100%;
   }
 
@@ -77,6 +77,12 @@
     }
   }
 
+  @media (width <= 41rem) {
+    .communities__communities-list {
+      gap: var(--gap-3xl) var(--gap-xl);
+    }
+  }
+
   @media (width <= 39rem) {
     .communities__tools {
       flex-direction: column;
diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
index 4707d2b05..709e5f561 100644
--- a/apps/cyberstorm-remix/app/communities/communities.tsx
+++ b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -175,6 +175,7 @@ export default function CommunitiesPage() {
             leftIcon={<FontAwesomeIcon icon={faSearch} />}
             type="search"
             rootClasses="communities__search"
+            csSize="small"
           />
           <span className="container container--x">
             <NewSelect
diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx
index 76e11222b..8db343bcb 100644
--- a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx
+++ b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx
@@ -1,14 +1,11 @@
-import type { LoaderFunctionArgs, MetaFunction } from "react-router";
-import { useLoaderData, useOutletContext } from "react-router";
+import { Await, useLoaderData, useOutletContext } from "react-router";
 import {
   formatToDisplayName,
-  NewBreadCrumbs,
-  NewBreadCrumbsLink,
   NewLink,
+  SkeletonBox,
 } from "@thunderstore/cyberstorm";
 import "./Dependants.css";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
-import { ApiError } from "@thunderstore/thunderstore-api";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import { PackageOrderOptions } from "../../commonComponents/PackageSearch/components/PackageOrder";
 import { OutletContextShape } from "../../root";
@@ -17,229 +14,159 @@ import {
   getPublicEnvVariables,
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
+import { Route } from "./+types/Dependants";
+import { Suspense } from "react";
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  return [
-    { title: data?.community.name },
-    { name: "description", content: `Mods for ${data?.community.name}` },
-  ];
-};
-
-export async function loader({ request, params }: LoaderFunctionArgs) {
-  if (params.communityId && params.namespaceId && params.packageId) {
-    try {
-      const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
-      const dapper = new DapperTs(() => {
-        return {
-          apiHost: publicEnvVariables.VITE_API_URL,
-          sessionId: undefined,
-        };
-      });
-      const searchParams = new URL(request.url).searchParams;
-      const ordering =
-        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
-      const page = searchParams.get("page");
-      const search = searchParams.get("search");
-      const includedCategories = searchParams.get("includedCategories");
-      const excludedCategories = searchParams.get("excludedCategories");
-      const section = searchParams.get("section");
-      const nsfw = searchParams.get("nsfw");
-      const deprecated = searchParams.get("deprecated");
-      const community = await dapper.getCommunity(params.communityId);
-      const filters = await dapper.getCommunityFilters(params.communityId);
-      const sortedSections = filters.sections.sort(
-        (a, b) => b.priority - a.priority
-      );
+export async function loader({ params, request }: Route.LoaderArgs) {
+  if (params.communityId && params.packageId && params.namespaceId) {
+    const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
+    const dapper = new DapperTs(() => {
       return {
-        community: community,
-        filters: filters,
-        listing: await dapper.getPackageListingDetails(
-          params.communityId,
-          params.namespaceId,
-          params.packageId
-        ),
-        listings: await dapper.getPackageListings(
-          {
-            kind: "package-dependants",
-            communityId: params.communityId,
-            namespaceId: params.namespaceId,
-            packageName: params.packageId,
-          },
-          ordering ?? "",
-          page === null ? undefined : Number(page),
-          search ?? "",
-          includedCategories?.split(",") ?? undefined,
-          excludedCategories?.split(",") ?? undefined,
-          section
-            ? section === "all"
-              ? ""
-              : section
-            : sortedSections && sortedSections[0]
-              ? sortedSections[0].uuid
-              : "",
-          nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false
-        ),
-        sortedSections: sortedSections,
+        apiHost: publicEnvVariables.VITE_API_URL,
+        sessionId: undefined,
       };
-    } catch (error) {
-      if (error instanceof ApiError) {
-        throw new Response("Package not found", { status: 404 });
-      } else {
-        throw error;
-      }
-    }
+    });
+    const searchParams = new URL(request.url).searchParams;
+    const ordering =
+      searchParams.get("ordering") ?? PackageOrderOptions.Updated;
+    const page = searchParams.get("page");
+    const search = searchParams.get("search");
+    const includedCategories = searchParams.get("includedCategories");
+    const excludedCategories = searchParams.get("excludedCategories");
+    const section = searchParams.get("section");
+    const nsfw = searchParams.get("nsfw");
+    const deprecated = searchParams.get("deprecated");
+    const filters = await dapper.getCommunityFilters(params.communityId);
+
+    return {
+      community: dapper.getCommunity(params.communityId),
+      listing: dapper.getPackageListingDetails(
+        params.communityId,
+        params.namespaceId,
+        params.packageId
+      ),
+      filters: filters,
+      listings: await dapper.getPackageListings(
+        {
+          kind: "package-dependants",
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+          packageName: params.packageId,
+        },
+        ordering ?? "",
+        page === null ? undefined : Number(page),
+        search ?? "",
+        includedCategories?.split(",") ?? undefined,
+        excludedCategories?.split(",") ?? undefined,
+        section ? (section === "all" ? "" : section) : "",
+        nsfw === "true" ? true : false,
+        deprecated === "true" ? true : false
+      ),
+    };
   }
-  throw new Response("Package not found", { status: 404 });
+  throw new Response("Community not found", { status: 404 });
 }
 
-export async function clientLoader({ request, params }: LoaderFunctionArgs) {
-  if (params.communityId && params.namespaceId && params.packageId) {
-    try {
-      const tools = getSessionTools();
-      const dapper = new DapperTs(() => {
-        return {
-          apiHost: tools?.getConfig().apiHost,
-          sessionId: tools?.getConfig().sessionId,
-        };
-      });
-      const searchParams = new URL(request.url).searchParams;
-      const ordering =
-        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
-      const page = searchParams.get("page");
-      const search = searchParams.get("search");
-      const includedCategories = searchParams.get("includedCategories");
-      const excludedCategories = searchParams.get("excludedCategories");
-      const section = searchParams.get("section");
-      const nsfw = searchParams.get("nsfw");
-      const deprecated = searchParams.get("deprecated");
-      const community = await dapper.getCommunity(params.communityId);
-      const filters = await dapper.getCommunityFilters(params.communityId);
-      const sortedSections = filters.sections.sort(
-        (a, b) => b.priority - a.priority
-      );
+export async function clientLoader({
+  request,
+  params,
+}: Route.ClientLoaderArgs) {
+  if (params.communityId && params.packageId && params.namespaceId) {
+    const tools = getSessionTools();
+    const dapper = new DapperTs(() => {
       return {
-        community: community,
-        filters: filters,
-        listing: await dapper.getPackageListingDetails(
-          params.communityId,
-          params.namespaceId,
-          params.packageId
-        ),
-        listings: await dapper.getPackageListings(
-          {
-            kind: "package-dependants",
-            communityId: params.communityId,
-            namespaceId: params.namespaceId,
-            packageName: params.packageId,
-          },
-          ordering ?? "",
-          page === null ? undefined : Number(page),
-          search ?? "",
-          includedCategories?.split(",") ?? undefined,
-          excludedCategories?.split(",") ?? undefined,
-          section
-            ? section === "all"
-              ? ""
-              : section
-            : sortedSections && sortedSections[0]
-              ? sortedSections[0].uuid
-              : "",
-          nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false
-        ),
-        sortedSections: sortedSections,
+        apiHost: tools?.getConfig().apiHost,
+        sessionId: tools?.getConfig().sessionId,
       };
-    } catch (error) {
-      if (error instanceof ApiError) {
-        throw new Response("Package not found", { status: 404 });
-      } else {
-        throw error;
-      }
-    }
+    });
+    const searchParams = new URL(request.url).searchParams;
+    const ordering =
+      searchParams.get("ordering") ?? PackageOrderOptions.Updated;
+    const page = searchParams.get("page");
+    const search = searchParams.get("search");
+    const includedCategories = searchParams.get("includedCategories");
+    const excludedCategories = searchParams.get("excludedCategories");
+    const section = searchParams.get("section");
+    const nsfw = searchParams.get("nsfw");
+    const deprecated = searchParams.get("deprecated");
+    const filters = dapper.getCommunityFilters(params.communityId);
+    return {
+      community: dapper.getCommunity(params.communityId),
+      listing: dapper.getPackageListingDetails(
+        params.communityId,
+        params.namespaceId,
+        params.packageId
+      ),
+      filters: filters,
+      listings: dapper.getPackageListings(
+        {
+          kind: "package-dependants",
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+          packageName: params.packageId,
+        },
+        ordering ?? "",
+        page === null ? undefined : Number(page),
+        search ?? "",
+        includedCategories?.split(",") ?? undefined,
+        excludedCategories?.split(",") ?? undefined,
+        section ? (section === "all" ? "" : section) : "",
+        nsfw === "true" ? true : false,
+        deprecated === "true" ? true : false
+      ),
+    };
   }
-  throw new Response("Package not found", { status: 404 });
+  throw new Response("Community not found", { status: 404 });
 }
 
 export default function Dependants() {
-  const { community, filters, listing, listings, sortedSections } =
-    useLoaderData<typeof loader | typeof clientLoader>();
+  const { filters, listing, listings } = useLoaderData<
+    typeof loader | typeof clientLoader
+  >();
 
   const outletContext = useOutletContext() as OutletContextShape;
 
   return (
     <>
-      <NewBreadCrumbs>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Communities"
-          csVariant="cyber"
-        >
-          Communities
-        </NewBreadCrumbsLink>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Community"
-          community={community.identifier}
-          csVariant="cyber"
-        >
-          {community.name}
-        </NewBreadCrumbsLink>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Team"
-          community={community.identifier}
-          team={listing.namespace}
-          csVariant="cyber"
-        >
-          {listing.namespace}
-        </NewBreadCrumbsLink>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Package"
-          community={listing.community_identifier}
-          namespace={listing.namespace}
-          package={listing.name}
-          csVariant="cyber"
-        >
-          {formatToDisplayName(listing.name)}
-        </NewBreadCrumbsLink>
-        <span>
-          <span>Dependants</span>
-        </span>
-      </NewBreadCrumbs>
       <section className="dependants">
-        <PageHeader headingLevel="1" headingSize="3">
-          Mods that depend on{" "}
-          <NewLink
-            primitiveType="cyberstormLink"
-            linkId="Package"
-            community={listing.community_identifier}
-            namespace={listing.namespace}
-            package={listing.name}
-            csVariant="cyber"
-          >
-            {formatToDisplayName(listing.name)}
-          </NewLink>
-          {" by "}
-          <NewLink
-            primitiveType="cyberstormLink"
-            linkId="Team"
-            community={listing.community_identifier}
-            team={listing.namespace}
-            csVariant="cyber"
-          >
-            {listing.namespace}
-          </NewLink>
-        </PageHeader>
-        <PackageSearch
-          listings={listings}
-          packageCategories={filters.package_categories}
-          sections={sortedSections}
-          config={outletContext.requestConfig}
-          currentUser={outletContext.currentUser}
-          dapper={outletContext.dapper}
-        />
+        <Suspense fallback={<SkeletonBox />}>
+          <Await resolve={listing}>
+            {(resolvedValue) => (
+              <PageHeader headingLevel="1" headingSize="3">
+                Mods that depend on{" "}
+                <NewLink
+                  primitiveType="cyberstormLink"
+                  linkId="Package"
+                  community={resolvedValue.community_identifier}
+                  namespace={resolvedValue.namespace}
+                  package={resolvedValue.name}
+                  csVariant="cyber"
+                >
+                  {formatToDisplayName(resolvedValue.name)}
+                </NewLink>
+                {" by "}
+                <NewLink
+                  primitiveType="cyberstormLink"
+                  linkId="Team"
+                  community={resolvedValue.community_identifier}
+                  team={resolvedValue.namespace}
+                  csVariant="cyber"
+                >
+                  {resolvedValue.namespace}
+                </NewLink>
+              </PageHeader>
+            )}
+          </Await>
+        </Suspense>
+        <>
+          <PackageSearch
+            listings={listings}
+            filters={filters}
+            config={outletContext.requestConfig}
+            currentUser={outletContext.currentUser}
+            dapper={outletContext.dapper}
+          />
+        </>
       </section>
     </>
   );
diff --git a/apps/cyberstorm-remix/app/p/packageEdit.css b/apps/cyberstorm-remix/app/p/packageEdit.css
index f5c8a93e3..0ba9d6f4f 100644
--- a/apps/cyberstorm-remix/app/p/packageEdit.css
+++ b/apps/cyberstorm-remix/app/p/packageEdit.css
@@ -1,7 +1,7 @@
 @layer nimbus-layout {
   .package-edit__main {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
     align-self: stretch;
   }
diff --git a/apps/cyberstorm-remix/app/p/packageEdit.tsx b/apps/cyberstorm-remix/app/p/packageEdit.tsx
index 1ccf2704e..a146434af 100644
--- a/apps/cyberstorm-remix/app/p/packageEdit.tsx
+++ b/apps/cyberstorm-remix/app/p/packageEdit.tsx
@@ -2,8 +2,6 @@ import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { useLoaderData, useOutletContext, useRevalidator } from "react-router";
 import {
   NewAlert,
-  NewBreadCrumbs,
-  NewBreadCrumbsLink,
   NewButton,
   NewIcon,
   NewSelectSearch,
@@ -237,45 +235,6 @@ export default function PackageListing() {
 
   return (
     <>
-      <NewBreadCrumbs>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Communities"
-          csVariant="cyber"
-        >
-          Communities
-        </NewBreadCrumbsLink>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Community"
-          community={community.identifier}
-          csVariant="cyber"
-        >
-          {community.name}
-        </NewBreadCrumbsLink>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Team"
-          community={community.identifier}
-          team={listing.namespace}
-          csVariant="cyber"
-        >
-          {listing.namespace}
-        </NewBreadCrumbsLink>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Package"
-          community={community.identifier}
-          namespace={listing.namespace}
-          package={listing.name}
-          csVariant="cyber"
-        >
-          {listing.name}
-        </NewBreadCrumbsLink>
-        <span>
-          <span>Edit package</span>
-        </span>
-      </NewBreadCrumbs>
       <PageHeader headingLevel="1" headingSize="2">
         Edit package
       </PageHeader>
diff --git a/apps/cyberstorm-remix/app/p/packageListing.css b/apps/cyberstorm-remix/app/p/packageListing.css
index a5e6c41f3..2e9ccdfb6 100644
--- a/apps/cyberstorm-remix/app/p/packageListing.css
+++ b/apps/cyberstorm-remix/app/p/packageListing.css
@@ -1,7 +1,7 @@
 @layer nimbus-layout {
   .package-listing__main {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -129,7 +129,7 @@
     display: flex;
     flex: 1 0 0;
     flex-direction: column;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -188,7 +188,7 @@
   .package-listing-sidebar__meta {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxxs);
+    gap: var(--gap-3xs);
     align-items: flex-start;
     align-self: stretch;
 
@@ -203,7 +203,7 @@
 
   .package-listing-sidebar__item {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
     align-self: stretch;
     padding: var(--space-8) var(--space-12);
@@ -294,6 +294,21 @@
     width: 100%;
   }
 
+  @media (width < 41rem) {
+    .package-listing__actions {
+      position: unset;
+      top: unset;
+      right: unset;
+      display: flex;
+      flex: 1 1 0;
+    }
+
+    .package-listing-management-tools {
+      flex: 1 1 0;
+      flex-flow: row wrap;
+    }
+  }
+
   /* Sidebar narrow/wide switch breakpoint */
   @media (width <= 990px) {
     .package-listing-sidebar {
diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/Required.css b/apps/cyberstorm-remix/app/p/tabs/Required/Required.css
index b71878a7a..c446dac8a 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Required/Required.css
+++ b/apps/cyberstorm-remix/app/p/tabs/Required/Required.css
@@ -29,7 +29,7 @@
   .package-required__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxxs);
+    gap: var(--gap-3xs);
     align-items: flex-start;
     align-self: stretch;
     padding-bottom: var(--space-32);
diff --git a/apps/cyberstorm-remix/app/p/team/Team.tsx b/apps/cyberstorm-remix/app/p/team/Team.tsx
index 0f66077de..aa80d6847 100644
--- a/apps/cyberstorm-remix/app/p/team/Team.tsx
+++ b/apps/cyberstorm-remix/app/p/team/Team.tsx
@@ -1,9 +1,6 @@
-import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { useLoaderData, useOutletContext } from "react-router";
-import { NewBreadCrumbs, NewBreadCrumbsLink } from "@thunderstore/cyberstorm";
 import "./Team.css";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
-import { ApiError } from "@thunderstore/thunderstore-api";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import { PackageOrderOptions } from "../../commonComponents/PackageSearch/components/PackageOrder";
 import { OutletContextShape } from "../../root";
@@ -12,142 +9,100 @@ import {
   getPublicEnvVariables,
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
+import { Route } from "./+types/Team";
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  return [
-    { title: data?.community.name },
-    { name: "description", content: `Mods for ${data?.community.name}` },
-  ];
-};
-
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ params, request }: Route.LoaderArgs) {
   if (params.communityId && params.namespaceId) {
-    try {
-      const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
-      const dapper = new DapperTs(() => {
-        return {
-          apiHost: publicEnvVariables.VITE_API_URL,
-          sessionId: undefined,
-        };
-      });
-      const searchParams = new URL(request.url).searchParams;
-      const ordering =
-        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
-      const page = searchParams.get("page");
-      const search = searchParams.get("search");
-      const includedCategories = searchParams.get("includedCategories");
-      const excludedCategories = searchParams.get("excludedCategories");
-      const section = searchParams.get("section");
-      const nsfw = searchParams.get("nsfw");
-      const deprecated = searchParams.get("deprecated");
-      const community = await dapper.getCommunity(params.communityId);
-      const filters = await dapper.getCommunityFilters(params.communityId);
-      const sortedSections = filters.sections.sort(
-        (a, b) => b.priority - a.priority
-      );
+    const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
+    const dapper = new DapperTs(() => {
       return {
-        community: community,
-        team: params.namespaceId,
-        filters: filters,
-        listings: await dapper.getPackageListings(
-          {
-            kind: "namespace",
-            communityId: params.communityId,
-            namespaceId: params.namespaceId,
-          },
-          ordering ?? "",
-          page === null ? undefined : Number(page),
-          search ?? "",
-          includedCategories?.split(",") ?? undefined,
-          excludedCategories?.split(",") ?? undefined,
-          section
-            ? section === "all"
-              ? ""
-              : section
-            : sortedSections && sortedSections[0]
-              ? sortedSections[0].uuid
-              : "",
-          nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false
-        ),
-        sortedSections: sortedSections,
+        apiHost: publicEnvVariables.VITE_API_URL,
+        sessionId: undefined,
       };
-    } catch (error) {
-      if (error instanceof ApiError) {
-        throw new Response("Package not found", { status: 404 });
-      } else {
-        throw error;
-      }
-    }
+    });
+    const searchParams = new URL(request.url).searchParams;
+    const ordering =
+      searchParams.get("ordering") ?? PackageOrderOptions.Updated;
+    const page = searchParams.get("page");
+    const search = searchParams.get("search");
+    const includedCategories = searchParams.get("includedCategories");
+    const excludedCategories = searchParams.get("excludedCategories");
+    const section = searchParams.get("section");
+    const nsfw = searchParams.get("nsfw");
+    const deprecated = searchParams.get("deprecated");
+    const filters = await dapper.getCommunityFilters(params.communityId);
+
+    return {
+      teamId: params.namespaceId,
+      filters: filters,
+      listings: await dapper.getPackageListings(
+        {
+          kind: "namespace",
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+        },
+        ordering ?? "",
+        page === null ? undefined : Number(page),
+        search ?? "",
+        includedCategories?.split(",") ?? undefined,
+        excludedCategories?.split(",") ?? undefined,
+        section ? (section === "all" ? "" : section) : "",
+        nsfw === "true" ? true : false,
+        deprecated === "true" ? true : false
+      ),
+    };
   }
-  throw new Response("Package not found", { status: 404 });
+  throw new Response("Community not found", { status: 404 });
 }
 
-export async function clientLoader({ request, params }: LoaderFunctionArgs) {
+export async function clientLoader({
+  request,
+  params,
+}: Route.ClientLoaderArgs) {
   if (params.communityId && params.namespaceId) {
-    try {
-      const tools = getSessionTools();
-      const dapper = new DapperTs(() => {
-        return {
-          apiHost: tools?.getConfig().apiHost,
-          sessionId: tools?.getConfig().sessionId,
-        };
-      });
-      const searchParams = new URL(request.url).searchParams;
-      const ordering =
-        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
-      const page = searchParams.get("page");
-      const search = searchParams.get("search");
-      const includedCategories = searchParams.get("includedCategories");
-      const excludedCategories = searchParams.get("excludedCategories");
-      const section = searchParams.get("section");
-      const nsfw = searchParams.get("nsfw");
-      const deprecated = searchParams.get("deprecated");
-      const community = await dapper.getCommunity(params.communityId);
-      const filters = await dapper.getCommunityFilters(params.communityId);
-      const sortedSections = filters.sections.sort(
-        (a, b) => b.priority - a.priority
-      );
+    const tools = getSessionTools();
+    const dapper = new DapperTs(() => {
       return {
-        community: community,
-        team: params.namespaceId,
-        filters: filters,
-        listings: await dapper.getPackageListings(
-          {
-            kind: "namespace",
-            communityId: params.communityId,
-            namespaceId: params.namespaceId,
-          },
-          ordering ?? "",
-          page === null ? undefined : Number(page),
-          search ?? "",
-          includedCategories?.split(",") ?? undefined,
-          excludedCategories?.split(",") ?? undefined,
-          section
-            ? section === "all"
-              ? ""
-              : section
-            : sortedSections && sortedSections[0]
-              ? sortedSections[0].uuid
-              : "",
-          nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false
-        ),
-        sortedSections: sortedSections,
+        apiHost: tools?.getConfig().apiHost,
+        sessionId: tools?.getConfig().sessionId,
       };
-    } catch (error) {
-      if (error instanceof ApiError) {
-        throw new Response("Package not found", { status: 404 });
-      } else {
-        throw error;
-      }
-    }
+    });
+    const searchParams = new URL(request.url).searchParams;
+    const ordering =
+      searchParams.get("ordering") ?? PackageOrderOptions.Updated;
+    const page = searchParams.get("page");
+    const search = searchParams.get("search");
+    const includedCategories = searchParams.get("includedCategories");
+    const excludedCategories = searchParams.get("excludedCategories");
+    const section = searchParams.get("section");
+    const nsfw = searchParams.get("nsfw");
+    const deprecated = searchParams.get("deprecated");
+    const filters = dapper.getCommunityFilters(params.communityId);
+    return {
+      teamId: params.namespaceId,
+      filters: filters,
+      listings: dapper.getPackageListings(
+        {
+          kind: "namespace",
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+        },
+        ordering ?? "",
+        page === null ? undefined : Number(page),
+        search ?? "",
+        includedCategories?.split(",") ?? undefined,
+        excludedCategories?.split(",") ?? undefined,
+        section ? (section === "all" ? "" : section) : "",
+        nsfw === "true" ? true : false,
+        deprecated === "true" ? true : false
+      ),
+    };
   }
-  throw new Response("Package not found", { status: 404 });
+  throw new Response("Community not found", { status: 404 });
 }
 
 export default function Team() {
-  const { community, team, filters, listings, sortedSections } = useLoaderData<
+  const { filters, listings, teamId } = useLoaderData<
     typeof loader | typeof clientLoader
   >();
 
@@ -155,38 +110,19 @@ export default function Team() {
 
   return (
     <>
-      <NewBreadCrumbs>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Communities"
-          csVariant="cyber"
-        >
-          Communities
-        </NewBreadCrumbsLink>
-        <NewBreadCrumbsLink
-          primitiveType="cyberstormLink"
-          linkId="Community"
-          community={community.identifier}
-          csVariant="cyber"
-        >
-          {community.name}
-        </NewBreadCrumbsLink>
-        <span>
-          <span>{team}</span>
-        </span>
-      </NewBreadCrumbs>
       <section className="team">
         <PageHeader headingLevel="1" headingSize="3">
-          Mods uploaded by {team}
+          Mods uploaded by {teamId}
         </PageHeader>
-        <PackageSearch
-          listings={listings}
-          packageCategories={filters.package_categories}
-          sections={sortedSections}
-          config={outletContext.requestConfig}
-          currentUser={outletContext.currentUser}
-          dapper={outletContext.dapper}
-        />
+        <>
+          <PackageSearch
+            listings={listings}
+            filters={filters}
+            config={outletContext.requestConfig}
+            currentUser={outletContext.currentUser}
+            dapper={outletContext.dapper}
+          />
+        </>
       </section>
     </>
   );
diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
index eb091d430..1b5d5840b 100644
--- a/apps/cyberstorm-remix/app/root.tsx
+++ b/apps/cyberstorm-remix/app/root.tsx
@@ -9,6 +9,7 @@ import {
   Scripts,
   ScrollRestoration,
   ShouldRevalidateFunctionArgs,
+  UIMatch,
   isRouteErrorResponse,
   useLoaderData,
   useLocation,
@@ -49,7 +50,6 @@ import {
   publicEnvVariablesType,
 } from "cyberstorm/security/publicEnvVariables";
 import { StorageManager } from "@thunderstore/ts-api-react/src/storage";
-import { isPromise } from "cyberstorm/utils/typeChecks";
 
 // REMIX TODO: https://remix.run/docs/en/main/route/links
 // export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
@@ -220,8 +220,24 @@ export function Layout({ children }: { children: React.ReactNode }) {
   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")
@@ -284,114 +300,78 @@ export function Layout({ children }: { children: React.ReactNode }) {
                     <section className="container container--y container--full layout__content">
                       {/* Breadcrumbs are build progressively */}
                       <NewBreadCrumbs>
+                        {/* Upload */}
+                        {uploadPage ? (
+                          <span>
+                            <span>Upload</span>
+                          </span>
+                        ) : null}
                         {/* Communities page */}
-                        {communitiesPage || communityPage ? (
-                          <NewBreadCrumbsLink
-                            primitiveType="cyberstormLink"
-                            linkId="Communities"
-                            csVariant="cyber"
-                          >
-                            Communities
-                          </NewBreadCrumbsLink>
+                        {communitiesPage ||
+                        communityPage ||
+                        packageDependantsPage ||
+                        packageTeamPage ? (
+                          communityPage ||
+                          packageDependantsPage ||
+                          packageTeamPage ? (
+                            <NewBreadCrumbsLink
+                              primitiveType="cyberstormLink"
+                              linkId="Communities"
+                              csVariant="cyber"
+                            >
+                              Communities
+                            </NewBreadCrumbsLink>
+                          ) : (
+                            <span>
+                              <span>Communities</span>
+                            </span>
+                          )
                         ) : null}
                         {/* Community page */}
-                        {communityPage &&
-                        isRecord(communityPage.data) &&
-                        Object.prototype.hasOwnProperty.call(
-                          communityPage.data,
-                          "community"
-                        ) &&
-                        isPromise(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 matches[matches.length - 1] ===
-                                  communityPage ? (
-                                  <span>
-                                    <span>
-                                      {icon}
-                                      {label}
-                                    </span>
-                                  </span>
-                                ) : (
-                                  <NewBreadCrumbsLink
-                                    primitiveType="cyberstormLink"
-                                    linkId="Community"
-                                    community={communityPage.params.communityId}
-                                    csVariant="cyber"
-                                  >
-                                    {icon}
-                                    {label}
-                                  </NewBreadCrumbsLink>
-                                );
-                              }}
-                            </Await>
-                          </Suspense>
-                        ) : null}
+                        {getCommunityBreadcrumb(
+                          communityPage ||
+                            packageListingPage ||
+                            packageDependantsPage ||
+                            packageTeamPage,
+                          Boolean(packageListingPage) ||
+                            Boolean(packageDependantsPage) ||
+                            Boolean(packageTeamPage)
+                        )}
                         {/* Package listing page */}
-                        {packageListingPage &&
-                        isRecord(packageListingPage.data) &&
-                        Object.prototype.hasOwnProperty.call(
-                          packageListingPage.data,
-                          "listing"
-                        ) &&
-                        isPromise(packageListingPage.data.listing) ? (
-                          <Suspense
-                            fallback={
-                              <span>
-                                <span>Loading...</span>
-                              </span>
-                            }
-                          >
-                            <Await resolve={packageListingPage.data.listing}>
-                              {(resolvedValue) => {
-                                let label = undefined;
-                                if (isRecord(resolvedValue)) {
-                                  label =
-                                    Object.prototype.hasOwnProperty.call(
-                                      resolvedValue,
-                                      "name"
-                                    ) && typeof resolvedValue.name === "string"
-                                      ? resolvedValue.name
-                                      : packageListingPage.params.packageId;
-                                }
-                                return (
-                                  <span>
-                                    <span>{label}</span>
-                                  </span>
-                                );
-                              }}
-                            </Await>
-                          </Suspense>
+                        {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>
                       {children}
@@ -568,3 +548,106 @@ function BetaButtonInit() {
 
   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/routes.ts b/apps/cyberstorm-remix/app/routes.ts
index 68b4cea2e..cda5def83 100644
--- a/apps/cyberstorm-remix/app/routes.ts
+++ b/apps/cyberstorm-remix/app/routes.ts
@@ -13,10 +13,13 @@ export default [
 
   route("/communities", "./communities/communities.tsx"),
   route("/c/:communityId", "c/community.tsx", [
-    route("", "c/tabs/PackageSearch/PackageSearch.tsx", { index: true }),
+    route("/c/:communityId/", "c/tabs/PackageSearch/PackageSearch.tsx"),
     ...prefix("p", [
       route(":namespaceId/:packageId", "p/packageListing.tsx", [
-        route("", "p/tabs/Readme/Readme.tsx", { index: true }),
+        route(
+          "/c/:communityId/p/:namespaceId/:packageId/",
+          "p/tabs/Readme/Readme.tsx"
+        ),
         route("required", "p/tabs/Required/Required.tsx"),
         route("changelog", "p/tabs/Changelog/Changelog.tsx"),
         route("versions", "p/tabs/Versions/Versions.tsx"),
@@ -28,15 +31,15 @@ export default [
             route("/:slug/edit", "p/tabs/Wiki/WikiPageEdit.tsx"),
           ]),
         ]),
-        route("edit", "p/packageEdit.tsx"),
       ]),
-      route(
-        ":namespaceId/:packageId/dependants",
-        "p/dependants/Dependants.tsx"
-      ),
-      route(":namespaceId", "p/team/Team.tsx"),
+      route(":namespaceId/:packageId/edit", "p/packageEdit.tsx"),
     ]),
   ]),
+  route(
+    "/c/:communityId/p/:namespaceId/:packageId/dependants",
+    "p/dependants/Dependants.tsx"
+  ),
+  route("/c/:communityId/p/:namespaceId", "p/team/Team.tsx"),
   route(
     "/package/create/docs",
     "tools/package-format-docs/packageFormatDocs.tsx"
diff --git a/apps/cyberstorm-remix/app/settings/teams/Teams.css b/apps/cyberstorm-remix/app/settings/teams/Teams.css
index 33892da32..4df457ed8 100644
--- a/apps/cyberstorm-remix/app/settings/teams/Teams.css
+++ b/apps/cyberstorm-remix/app/settings/teams/Teams.css
@@ -21,7 +21,7 @@
   .create-team-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
index 6c5bccc2c..19a50be02 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
@@ -19,7 +19,7 @@
   .add-member-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -73,7 +73,7 @@
   .remove-member-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.css
index c07d0dd09..a39d9c96e 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.css
@@ -7,7 +7,7 @@
   .leave-team-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -24,7 +24,7 @@
   .disband-team-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
diff --git a/apps/cyberstorm-remix/app/settings/user/Account/Account.css b/apps/cyberstorm-remix/app/settings/user/Account/Account.css
index 8a222b6ca..2ba30dfd6 100644
--- a/apps/cyberstorm-remix/app/settings/user/Account/Account.css
+++ b/apps/cyberstorm-remix/app/settings/user/Account/Account.css
@@ -2,7 +2,7 @@
   .user-account__delete-user-form {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
     justify-content: center;
diff --git a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css
index ae5847771..0610eea67 100644
--- a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css
+++ b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css
@@ -41,7 +41,7 @@
   @media (width <= 475px) {
     .manifest-validator__row {
       flex-direction: column;
-      gap: var(--gap-xxxl);
+      gap: var(--gap-3xl);
     }
 
     .manifest-validator__content {
diff --git a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx
index edbc715dd..f0ceef115 100644
--- a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx
+++ b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx
@@ -1,7 +1,6 @@
 import {
   CodeInput,
   NewAlert,
-  NewBreadCrumbs,
   NewSelect,
   isRecord,
   isStringArray,
@@ -75,11 +74,6 @@ export default function ManifestValidator() {
 
   return (
     <>
-      <NewBreadCrumbs>
-        <span>
-          <span>Manifest Validator</span>
-        </span>
-      </NewBreadCrumbs>
       <PageHeader headingLevel="1" headingSize="2">
         Manifest Validator
       </PageHeader>
diff --git a/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css b/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css
index 6a826dea8..f6b03b198 100644
--- a/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css
+++ b/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css
@@ -1,6 +1,6 @@
 @layer nimbus-layout {
   .markdown-preview {
-    gap: var(--gap-xxxxxxxl);
+    gap: var(--gap-7xl);
   }
 
   .markdown-preview__row {
@@ -57,7 +57,7 @@
   @media (width <= 475px) {
     .markdown-preview__row {
       flex-direction: column;
-      gap: var(--gap-xxxl);
+      gap: var(--gap-3xl);
     }
 
     .markdown-preview__content {
diff --git a/apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx b/apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx
index 109a9d3be..27eb3e7cd 100644
--- a/apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx
+++ b/apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx
@@ -1,6 +1,6 @@
 import { useOutletContext } from "react-router";
 import "./MarkdownPreview.css";
-import { CodeInput, NewBreadCrumbs, isRecord } from "@thunderstore/cyberstorm";
+import { CodeInput, isRecord } from "@thunderstore/cyberstorm";
 import {
   isApiError,
   RequestConfig,
@@ -54,11 +54,6 @@ export default function MarkdownPreview() {
 
   return (
     <>
-      <NewBreadCrumbs>
-        <span>
-          <span>Markdown Preview</span>
-        </span>
-      </NewBreadCrumbs>
       <PageHeader headingLevel="1" headingSize="2">
         Markdown Preview
       </PageHeader>
diff --git a/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css b/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css
index 330279266..7513d8735 100644
--- a/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css
+++ b/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css
@@ -1,6 +1,6 @@
 @layer nimbus-layout {
   .package-format-docs {
-    gap: var(--gap-xxxxxl);
+    gap: var(--gap-5xl);
   }
 
   .package-format-docs__title {
diff --git a/apps/cyberstorm-remix/app/tools/package-format-docs/packageFormatDocs.tsx b/apps/cyberstorm-remix/app/tools/package-format-docs/packageFormatDocs.tsx
index 0aef7e819..da356a5aa 100644
--- a/apps/cyberstorm-remix/app/tools/package-format-docs/packageFormatDocs.tsx
+++ b/apps/cyberstorm-remix/app/tools/package-format-docs/packageFormatDocs.tsx
@@ -1,22 +1,12 @@
 import "./PackageFormatDocs.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
-import {
-  CodeBox,
-  NewBreadCrumbs,
-  NewIcon,
-  NewTable,
-} from "@thunderstore/cyberstorm";
+import { CodeBox, NewIcon, NewTable } from "@thunderstore/cyberstorm";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 
 export default function PackageFormatDocs() {
   return (
     <>
-      <NewBreadCrumbs>
-        <span>
-          <span>Package Format Docs</span>
-        </span>
-      </NewBreadCrumbs>
       <PageHeader headingLevel="1" headingSize="2">
         Package Format Docs
       </PageHeader>
diff --git a/apps/cyberstorm-remix/app/upload/Upload.css b/apps/cyberstorm-remix/app/upload/Upload.css
index 12fcdca9a..e33b18032 100644
--- a/apps/cyberstorm-remix/app/upload/Upload.css
+++ b/apps/cyberstorm-remix/app/upload/Upload.css
@@ -1,6 +1,6 @@
 @layer nimbus-layout {
   .upload {
-    gap: var(--gap-xxxxxxxl);
+    gap: var(--gap-7xl);
   }
 
   .upload__row {
@@ -173,7 +173,7 @@
   @media (width <= 475px) {
     .upload__row {
       flex-direction: column;
-      gap: var(--gap-xxxl);
+      gap: var(--gap-3xl);
     }
 
     .upload__content {
diff --git a/apps/cyberstorm-remix/app/upload/upload.tsx b/apps/cyberstorm-remix/app/upload/upload.tsx
index 1fa5277b5..c63566c0c 100644
--- a/apps/cyberstorm-remix/app/upload/upload.tsx
+++ b/apps/cyberstorm-remix/app/upload/upload.tsx
@@ -1,6 +1,5 @@
 import "./Upload.css";
 import {
-  NewBreadCrumbs,
   NewButton,
   NewIcon,
   NewSelectSearch,
@@ -366,11 +365,6 @@ export default function Upload() {
 
   return (
     <>
-      <NewBreadCrumbs>
-        <span>
-          <span>Upload</span>
-        </span>
-      </NewBreadCrumbs>
       <PageHeader headingLevel="1" headingSize="2">
         Upload package
       </PageHeader>
diff --git a/packages/cyberstorm-theme/src/components/TextInput/TextInput.css b/packages/cyberstorm-theme/src/components/TextInput/TextInput.css
index 0aca729a4..95cff966b 100644
--- a/packages/cyberstorm-theme/src/components/TextInput/TextInput.css
+++ b/packages/cyberstorm-theme/src/components/TextInput/TextInput.css
@@ -35,14 +35,14 @@
 
   .text-input:where(.text-input--size--default) {
     --text-input-height: var(--input-md-height);
-    --text-input-padding: var(--space-10)
-      calc(var(--space-16) + var(--right-padding-bonus, 0px)) var(--space-10)
+    --text-input-padding: var(--space-12)
+      calc(var(--space-16) + var(--right-padding-bonus, 0px)) var(--space-12)
       calc(var(--space-16) + var(--left-padding-bonus, 0px));
   }
 
   .text-input:where(.text-input--size--small) {
     --text-input-height: var(--input-sm-height);
-    --text-input-padding: var(--space-8)
+    --text-input-padding: var(--space-10)
       calc(var(--space-16) + var(--right-padding-bonus, 0px)) var(--space-10)
       calc(var(--space-16) + var(--left-padding-bonus, 0px));
   }
diff --git a/packages/cyberstorm-theme/src/components/componentsColors.css b/packages/cyberstorm-theme/src/components/componentsColors.css
index 279b0bf2e..7f0604a23 100644
--- a/packages/cyberstorm-theme/src/components/componentsColors.css
+++ b/packages/cyberstorm-theme/src/components/componentsColors.css
@@ -1,7 +1,7 @@
 @layer theme-components-colors {
   /* These variables are copied from Figma with the plugin variables2css */
   :root {
-    --ad-bg-color--default: var(--color-surface-4);
+    --ad-bg-color--default: var(--color-nightsky-4);
     --ad-text-color--default: var(--color-text-tertiary);
     --alert-danger-bg-color--default: var(--color-accent-red-2);
     --alert-danger-border-color--default: var(--color-accent-red-7);
@@ -19,9 +19,9 @@
     --alert-warning-border-color--default: var(--color-accent-yellow-7);
     --alert-warning-icon-color--default: var(--color-accent-yellow-7);
     --alert-warning-text-color--default: var(--color-accent-yellow-11);
-    --breadcrumb-item-bg-color--current: var(--color-surface-8);
-    --breadcrumb-item-bg-color--default: var(--color-surface-6);
-    --breadcrumb-item-bg-color--hover: var(--color-surface-8);
+    --breadcrumb-item-bg-color--current: var(--color-nightsky-5);
+    --breadcrumb-item-bg-color--default: var(--color-nightsky-6);
+    --breadcrumb-item-bg-color--hover: var(--color-nightsky-8);
     --breadcrumb-item-text-color--current: var(--color-text-primary);
     --breadcrumb-item-text-color--default: var(--color-cyber-green-7);
     --breadcrumb-item-text-color--hover: var(--color-cyber-green-7);
@@ -52,18 +52,18 @@
     --button-info-text-color--active: var(--color-accent-blue-11);
     --button-info-text-color--default: var(--color-accent-blue-11);
     --button-info-text-color--hover: var(--color-accent-blue-11);
-    --button-primary-bg-color--active: #4d2bab;
-    --button-primary-bg-color--default: #623bce;
-    --button-primary-bg-color--hover: #6c44da;
+    --button-primary-bg-color--active: hsl(256deg 60% 42%);
+    --button-primary-bg-color--default: hsl(256deg 60% 52%);
+    --button-primary-bg-color--hover: hsl(256deg 67% 56%);
     --button-primary-icon-color--active: var(--color-text-primary);
     --button-primary-icon-color--default: var(--color-text-primary);
     --button-primary-icon-color--hover: var(--color-text-primary);
     --button-primary-text-color--active: var(--color-text-primary);
     --button-primary-text-color--default: var(--color-text-primary);
     --button-primary-text-color--hover: var(--color-text-primary);
-    --button-secondary-bg-color--active: var(--color-surface-a7);
-    --button-secondary-bg-color--default: var(--color-surface-a8);
-    --button-secondary-bg-color--hover: var(--color-surface-a9);
+    --button-secondary-bg-color--active: var(--color-nightsky-a7);
+    --button-secondary-bg-color--default: var(--color-nightsky-a8);
+    --button-secondary-bg-color--hover: var(--color-nightsky-a9);
     --button-secondary-icon-color--active: var(--color-text-primary);
     --button-secondary-icon-color--default: var(--color-text-primary);
     --button-secondary-icon-color--hover: var(--color-text-primary);
@@ -150,9 +150,9 @@
     --card-package-fullwidth-hover-background-color: var(--color-surface-a6);
     --card-package-secondary-background-color: rgb(63 63 136 / 0.55);
     --card-package-secondary-hover-background-color: rgb(63 63 136 / 0.55);
-    --checkbox-bg-color--active: var(--color-surface-a10);
-    --checkbox-bg-color--default: var(--color-surface-a8);
-    --checkbox-bg-color--hover: var(--color-surface-a10);
+    --checkbox-bg-color--active: var(--color-nightsky-a10);
+    --checkbox-bg-color--default: var(--color-nightsky-a8);
+    --checkbox-bg-color--hover: var(--color-nightsky-a10);
     --checkbox-bg-color--selected: var(--color-cyber-green-7);
     --code-input-wrapper-bg-color--default: rgb(59 63 125 / 0.24);
     --code-input-wrapper-border-color--default: var(--color-surface-8);
@@ -166,23 +166,26 @@
     --validation-bar-border-top-color--failure: var(--color-accent-red-7);
     --validation-bar-background-color--failure: var(--color-accent-red-2);
     --validation-bar-color--failure: var(--color-accent-red-7);
-    --divider-bg-color: var(--color-surface-a6);
+    --divider-bg-color: var(--color-nightsky-a6);
+    --code-bg-color--default: var(--color-ui-surface-3);
+    --code-border-color--default: var(--color-ui-element-1);
+    --code-text-color--default: var(--color-text-primary);
     --dropdown-bg-color--default: var(--color-surface-4);
     --dropdown-border-color--default: var(--color-surface-a6);
-    --dropdown-item-bg-color--default: #0000;
-    --dropdown-item-bg-color--hover: var(--color-surface-a7);
+    --dropdown-item-bg-color--default: hsl(0deg 0 0% / 0);
+    --dropdown-item-bg-color--hover: var(--color-nightsky-a7);
     --dropdown-item-icon-color--default: var(--color-text-tertiary);
     --dropdown-item-icon-color--hover: var(--color-text-primary);
     --dropdown-item-text-color--default: var(--color-text-primary);
     --dropdown-item-text-color--hover: var(--color-text-primary);
-    --dropdown-item-danger-bg-color--default: #0000;
+    --dropdown-item-danger-bg-color--default: hsl(0deg 0 0% / 0);
     --dropdown-item-danger-bg-color--hover: var(--color-accent-red-6);
     --dropdown-item-danger-icon-color--default: var(--color-accent-red-7);
-    --dropdown-item-danger-icon-color--hover: #fff;
+    --dropdown-item-danger-icon-color--hover: hsl(0deg 0 100%);
     --dropdown-item-danger-text-color--default: var(--color-accent-red-7);
-    --dropdown-item-danger-text-color--hover: #fff;
-    --dropdown-item-disabled-bg-color--default: #0000;
-    --dropdown-item-disabled-bg-color--hover: #0000;
+    --dropdown-item-danger-text-color--hover: hsl(0deg 0 100%);
+    --dropdown-item-disabled-bg-color--default: hsl(0deg 0 0% / 0);
+    --dropdown-item-disabled-bg-color--hover: hsl(0deg 0 0% / 0);
     --dropdown-item-disabled-icon-color--default: var(--color-text-tertiary);
     --dropdown-item-disabled-icon-color--hover: var(--color-text-tertiary);
     --dropdown-item-disabled-text-color--default: var(--color-text-tertiary);
@@ -255,12 +258,14 @@
     --icon-cyber-color--default: var(--color-cyber-green-7);
     --image-primary-color--default: hsl(240deg 42% 45%);
     --image-primary-background-color--default: var(--color-surface-a4);
-    --input-bg-color--default: var(--color-surface-a4);
-    --input-bg-color--focus: var(--color-surface-1);
-    --input-bg-color--hover: var(--color-surface-a6);
-    --input-border-color--default: var(--color-surface-a10);
+    --icon-button-accent-color--default: var(--color-text-accent);
+    --icon-button-muted-color--default: var(--color-text-tertiary);
+    --input-bg-color--default: var(--color-nightsky-a4);
+    --input-bg-color--focus: var(--color-nightsky-1);
+    --input-bg-color--hover: var(--color-nightsky-a6);
+    --input-border-color--default: var(--color-nightsky-a10);
     --input-border-color--focus: var(--color-cyber-green-7);
-    --input-border-color--hover: var(--color-surface-a10);
+    --input-border-color--hover: var(--color-nightsky-a10);
     --input-icon-color--default: var(--color-text-tertiary);
     --input-icon-color--focus: var(--color-text-secondary);
     --input-icon-color--hover: var(--color-text-tertiary);
@@ -268,8 +273,8 @@
     --input-text-color--default: var(--color-text-secondary);
     --input-text-color--focus: var(--color-text-primary);
     --input-text-color--hover: var(--color-text-secondary);
-    --kbd-bg-color--default: #0000;
-    --kbd-border-color--default: var(--color-surface-a10);
+    --kbd-bg-color--default: hsl(0deg 0 0% / 0);
+    --kbd-border-color--default: var(--color-nightsky-a10);
     --kbd-text-color--default: var(--color-text-tertiary);
     --link-primary-color--default: var(--color-text-accent);
     --link-primary-color--hover: var(--color-text-primary);
@@ -279,24 +284,27 @@
     --menu-primary-color--hover: var(--color-text-primary);
     --meta-item-icon-color--default: var(--color-text-tertiary);
     --meta-item-text-color--default: var(--color-text-tertiary);
-    --modal-bg-color--default: var(--color-surface-2);
-    --modal-border-color--default: var(--color-surface-7);
-    --modal-box-shadow--default: var(--shadow-lg);
+    --modal-bg-color--default: var(--color-nightsky-3);
+    --modal-border-color--default: var(--color-nightsky-a6);
     --modal-text-color--default: var(--color-text-secondary);
-    --pagination-item-bg-color--active: var(--color-surface-a6);
-    --pagination-item-bg-color--current: #623bce;
-    --pagination-item-bg-color--default: var(--color-surface-a7);
-    --pagination-item-bg-color--hover: var(--color-surface-a8);
+    --pagination-item-bg-color--active: var(--color-nightsky-a6);
+    --pagination-item-bg-color--current: hsl(256deg 60% 52%);
+    --pagination-item-bg-color--default: var(--color-nightsky-a7);
+    --pagination-item-bg-color--hover: var(--color-nightsky-a8);
+    --pagination-item-icon-color--active: var(--color-text-primary);
+    --pagination-item-icon-color--current: var(--color-text-primary);
+    --pagination-item-icon-color--default: var(--color-text-secondary);
+    --pagination-item-icon-color--hover: var(--color-text-primary);
     --pagination-item-text-color--active: var(--color-text-primary);
     --pagination-item-text-color--current: var(--color-text-primary);
     --pagination-item-text-color--default: var(--color-text-secondary);
     --pagination-item-text-color--hover: var(--color-text-primary);
-    --pre-bg-color--default: var(--color-surface-1);
-    --pre-border-color--default: var(--color-surface-a10);
+    --pre-bg-color--default: var(--color-ui-surface-1);
+    --pre-border-color--default: var(--color-ui-element-1);
     --pre-text-color--default: var(--color-text-primary);
-    --radio-bg-color--active: var(--color-surface-a10);
-    --radio-bg-color--default: var(--color-surface-a8);
-    --radio-bg-color--hover: var(--color-surface-a10);
+    --radio-bg-color--active: var(--color-nightsky-a10);
+    --radio-bg-color--default: var(--color-nightsky-a8);
+    --radio-bg-color--hover: var(--color-nightsky-a10);
     --radio-bg-color--selected: var(--color-cyber-green-7);
     --select-bg-color--default: var(--color-surface-4);
     --select-border-color--default: var(--color-surface-a6);
@@ -330,8 +338,8 @@
     --table-bg-color--default: var(--color-surface-4);
     --tab-nav-item-border-color--active: var(--color-surface-9);
     --tab-nav-item-border-color--current: var(--color-cyber-green-7);
-    --tab-nav-item-border-color--default: #0000;
-    --tab-nav-item-border-color--hover: var(--color-surface-9);
+    --tab-nav-item-border-color--default: hsl(0deg 0 0% / 0);
+    --tab-nav-item-border-color--hover: var(--color-nightsky-9);
     --tab-nav-item-icon-color--active: var(--color-text-secondary);
     --tab-nav-item-icon-color--current: var(--color-cyber-green-7);
     --tab-nav-item-icon-color--default: var(--color-text-tertiary);
@@ -344,54 +352,62 @@
     --tab-nav-item-text-color--current: var(--color-cyber-green-7);
     --tab-nav-item-text-color--default: var(--color-text-tertiary);
     --tab-nav-item-text-color--hover: var(--color-text-primary);
-    --tag-dark-blue-bg-color--default: var(--color-accent-blue-2);
-    --tag-dark-blue-bg-color--hover: var(--color-accent-blue-3);
-    --tag-dark-blue-icon-color--default: var(--color-accent-blue-9);
-    --tag-dark-blue-icon-color--hover: var(--color-accent-blue-9);
-    --tag-dark-blue-text-color--default: var(--color-accent-blue-9);
-    --tag-dark-blue-text-color--hover: var(--color-accent-blue-9);
-    --tag-dark-green-bg-color--default: var(--color-accent-green-2);
-    --tag-dark-green-bg-color--hover: var(--color-accent-green-3);
-    --tag-dark-green-icon-color--default: var(--color-accent-green-9);
-    --tag-dark-green-icon-color--hover: var(--color-accent-green-9);
-    --tag-dark-green-text-color--default: var(--color-accent-green-9);
-    --tag-dark-green-text-color--hover: var(--color-accent-green-9);
-    --tag-dark-orange-bg-color--default: var(--color-accent-orange-2);
-    --tag-dark-orange-bg-color--hover: var(--color-accent-orange-3);
-    --tag-dark-orange-icon-color--default: var(--color-accent-orange-9);
-    --tag-dark-orange-icon-color--hover: var(--color-accent-orange-9);
-    --tag-dark-orange-text-color--default: var(--color-accent-orange-9);
-    --tag-dark-orange-text-color--hover: var(--color-accent-orange-9);
-    --tag-dark-pink-bg-color--default: var(--color-accent-pink-2);
-    --tag-dark-pink-bg-color--hover: var(--color-accent-pink-3);
-    --tag-dark-pink-icon-color--default: var(--color-accent-pink-9);
-    --tag-dark-pink-icon-color--hover: var(--color-accent-pink-9);
-    --tag-dark-pink-text-color--default: var(--color-accent-pink-9);
-    --tag-dark-pink-text-color--hover: var(--color-accent-pink-9);
-    --tag-dark-primary-bg-color--default: var(--color-surface-8);
-    --tag-dark-primary-bg-color--hover: var(--color-surface-9);
+    --table-border-color--default: var(--color-nightsky-8);
+    --table-cell-bg-color--default: hsl(0deg 0 100%);
+    --table-cell-border-color--default: hsl(0deg 0 100%);
+    --table-header-bg-color--default: hsl(0deg 0 100%);
+    --table-header-bg-color--hover: hsl(0deg 0 100%);
+    --table-header-text-color--default: var(--color-text-accent);
+    --table-row-bg-color--default: var(--color-nightsky-a5);
+    --table-row-bg-color--hover: var(--color-nightsky-a6);
+    --tag-dark-blue-bg-color--default: var(--color-accent-blue-3);
+    --tag-dark-blue-bg-color--hover: var(--color-accent-blue-4);
+    --tag-dark-blue-icon-color--default: var(--color-accent-blue-10);
+    --tag-dark-blue-icon-color--hover: var(--color-accent-blue-11);
+    --tag-dark-blue-text-color--default: var(--color-accent-blue-10);
+    --tag-dark-blue-text-color--hover: var(--color-accent-blue-11);
+    --tag-dark-green-bg-color--default: var(--color-accent-green-3);
+    --tag-dark-green-bg-color--hover: var(--color-accent-green-4);
+    --tag-dark-green-icon-color--default: var(--color-accent-green-10);
+    --tag-dark-green-icon-color--hover: var(--color-accent-green-11);
+    --tag-dark-green-text-color--default: var(--color-accent-green-10);
+    --tag-dark-green-text-color--hover: var(--color-accent-green-11);
+    --tag-dark-orange-bg-color--default: var(--color-accent-orange-3);
+    --tag-dark-orange-bg-color--hover: var(--color-accent-orange-4);
+    --tag-dark-orange-icon-color--default: var(--color-accent-orange-10);
+    --tag-dark-orange-icon-color--hover: var(--color-accent-orange-11);
+    --tag-dark-orange-text-color--default: var(--color-accent-orange-10);
+    --tag-dark-orange-text-color--hover: var(--color-accent-orange-11);
+    --tag-dark-pink-bg-color--default: var(--color-accent-pink-3);
+    --tag-dark-pink-bg-color--hover: var(--color-accent-pink-4);
+    --tag-dark-pink-icon-color--default: var(--color-accent-pink-10);
+    --tag-dark-pink-icon-color--hover: var(--color-accent-pink-11);
+    --tag-dark-pink-text-color--default: var(--color-accent-pink-10);
+    --tag-dark-pink-text-color--hover: var(--color-accent-pink-11);
+    --tag-dark-primary-bg-color--default: var(--color-nightsky-a8);
+    --tag-dark-primary-bg-color--hover: var(--color-nightsky-a9);
     --tag-dark-primary-icon-color--default: var(--color-text-primary);
     --tag-dark-primary-icon-color--hover: var(--color-text-primary);
     --tag-dark-primary-text-color--default: var(--color-text-primary);
     --tag-dark-primary-text-color--hover: var(--color-text-primary);
-    --tag-dark-purple-bg-color--default: var(--color-accent-purple-2);
-    --tag-dark-purple-bg-color--hover: var(--color-accent-purple-3);
-    --tag-dark-purple-icon-color--default: var(--color-accent-purple-9);
-    --tag-dark-purple-icon-color--hover: var(--color-accent-purple-9);
-    --tag-dark-purple-text-color--default: var(--color-accent-purple-9);
-    --tag-dark-purple-text-color--hover: var(--color-accent-purple-9);
-    --tag-dark-red-bg-color--default: var(--color-accent-red-2);
-    --tag-dark-red-bg-color--hover: var(--color-accent-red-3);
-    --tag-dark-red-icon-color--default: var(--color-accent-red-9);
-    --tag-dark-red-icon-color--hover: var(--color-accent-red-9);
-    --tag-dark-red-text-color--default: var(--color-accent-red-9);
-    --tag-dark-red-text-color--hover: var(--color-accent-red-9);
-    --tag-dark-yellow-bg-color--default: var(--color-accent-yellow-2);
-    --tag-dark-yellow-bg-color--hover: var(--color-accent-yellow-3);
-    --tag-dark-yellow-icon-color--default: var(--color-accent-yellow-9);
-    --tag-dark-yellow-icon-color--hover: var(--color-accent-yellow-9);
-    --tag-dark-yellow-text-color--default: var(--color-accent-yellow-9);
-    --tag-dark-yellow-text-color--hover: var(--color-accent-yellow-9);
+    --tag-dark-purple-bg-color--default: var(--color-accent-purple-3);
+    --tag-dark-purple-bg-color--hover: var(--color-accent-purple-4);
+    --tag-dark-purple-icon-color--default: var(--color-accent-purple-10);
+    --tag-dark-purple-icon-color--hover: var(--color-accent-purple-11);
+    --tag-dark-purple-text-color--default: var(--color-accent-purple-10);
+    --tag-dark-purple-text-color--hover: var(--color-accent-purple-11);
+    --tag-dark-red-bg-color--default: var(--color-accent-red-3);
+    --tag-dark-red-bg-color--hover: var(--color-accent-red-4);
+    --tag-dark-red-icon-color--default: var(--color-accent-red-10);
+    --tag-dark-red-icon-color--hover: var(--color-accent-red-11);
+    --tag-dark-red-text-color--default: var(--color-accent-red-10);
+    --tag-dark-red-text-color--hover: var(--color-accent-red-11);
+    --tag-dark-yellow-bg-color--default: var(--color-accent-yellow-3);
+    --tag-dark-yellow-bg-color--hover: var(--color-accent-yellow-4);
+    --tag-dark-yellow-icon-color--default: var(--color-accent-yellow-10);
+    --tag-dark-yellow-icon-color--hover: var(--color-accent-yellow-11);
+    --tag-dark-yellow-text-color--default: var(--color-accent-yellow-10);
+    --tag-dark-yellow-text-color--hover: var(--color-accent-yellow-11);
     --tag-light-blue-bg-color--default: var(--color-accent-blue-7);
     --tag-light-blue-bg-color--hover: var(--color-accent-blue-8);
     --tag-light-blue-icon-color--default: var(--color-accent-blue-1);
@@ -416,8 +432,8 @@
     --tag-light-pink-icon-color--hover: var(--color-accent-pink-1);
     --tag-light-pink-text-color--default: var(--color-accent-pink-1);
     --tag-light-pink-text-color--hover: var(--color-accent-pink-1);
-    --tag-light-primary-bg-color--default: var(--color-surface-10);
-    --tag-light-primary-bg-color--hover: #5a5abf;
+    --tag-light-primary-bg-color--default: var(--color-nightsky-10);
+    --tag-light-primary-bg-color--hover: hsl(240deg 44% 55%);
     --tag-light-primary-icon-color--default: var(--color-text-primary);
     --tag-light-primary-icon-color--hover: var(--color-text-primary);
     --tag-light-primary-text-color--default: var(--color-text-primary);
@@ -447,7 +463,7 @@
     --toast-danger-icon-color--default: var(--color-accent-red-7);
     --toast-danger-text-color--default: var(--color-accent-red-11);
     --toast-default-bg-color--default: var(--color-surface-6);
-    --toast-default-border-color--default: #5d5a9f;
+    --toast-default-border-color--default: hsl(243deg 28% 49%);
     --toast-default-close-color--default: var(--color-text-tertiary);
     --toast-default-close-color--hover: var(--color-text-secondary);
     --toast-default-icon-color--default: var(--color-text-accent);
@@ -470,7 +486,7 @@
     --toast-warning-close-color--hover: var(--color-accent-yellow-10);
     --toast-warning-icon-color--default: var(--color-accent-yellow-7);
     --toast-warning-text-color--default: var(--color-accent-yellow-11);
-    --tooltip-bg-color--default: var(--color-surface-8);
+    --tooltip-bg-color--default: var(--color-nightsky-8);
     --tooltip-text-color--default: var(--color-text-primary);
   }
 }
diff --git a/packages/cyberstorm-theme/src/components/componentsSizes.css b/packages/cyberstorm-theme/src/components/componentsSizes.css
index f60e2f349..5f602ea31 100644
--- a/packages/cyberstorm-theme/src/components/componentsSizes.css
+++ b/packages/cyberstorm-theme/src/components/componentsSizes.css
@@ -15,17 +15,17 @@
     --button-lg-font-size: var(--font-size-body-lg);
     --button-lg-gap: var(--space-16);
     --button-lg-padding-inline: var(--space-16);
-    --button-lg-height: 2.75rem;
+    --button-lg-height: 2.5rem;
     --button-lg-icon-inline-size: 1em;
-    --button-lg-icon-inline-size--only-icon: var(--font-size-body-lg);
+    --button-lg-icon-inline-size--only-icon: 1rem;
     --button-md-border-radius: var(--radius-md);
     --button-md-padding-block: 0rem;
     --button-md-font-size: var(--font-size-body-md);
     --button-md-gap: var(--space-16);
     --button-md-padding-inline: var(--space-16);
-    --button-md-height: 2.75rem;
+    --button-md-height: 2.5rem;
     --button-md-icon-inline-size: 1em;
-    --button-md-icon-inline-size--only-icon: var(--font-size-body-lg);
+    --button-md-icon-inline-size--only-icon: 1rem;
     --button-sm-border-radius: var(--radius-md);
     --button-sm-padding-block: 0rem;
     --button-sm-gap: var(--space-12);
@@ -33,7 +33,7 @@
     --button-sm-font-size: var(--font-size-body-md);
     --button-sm-height: 2.25rem;
     --button-sm-icon-inline-size: 1em;
-    --button-sm-icon-inline-size--only-icon: var(--font-size-body-lg);
+    --button-sm-icon-inline-size--only-icon: 1rem;
     --button-xs-border-radius: var(--radius-md);
     --button-xs-padding-block: 0rem;
     --button-xs-font-size: var(--font-size-body-sm);
@@ -41,7 +41,7 @@
     --button-xs-padding-inline: var(--space-12);
     --button-xs-height: 1.875rem;
     --button-xs-icon-inline-size: 1em;
-    --button-xs-icon-inline-size--only-icon: var(--font-size-body-lg);
+    --button-xs-icon-inline-size--only-icon: 0.875rem;
     --card-package-shared-border-radius: var(--radius-md);
     --card-package-shared--author-font-weight: var(--font-weight-regular);
     --card-package-shared--prefix-padding-right: var(--space-4);
@@ -50,7 +50,7 @@
     --card-package-shared--description-font-style: normal;
     --card-package-shared--description-font-weight: var(--font-weight-regular);
     --card-package-shared--description-line-height: var(--line-height-md);
-    --card-package-shared--tags-gap: var(--gap-xxs);
+    --card-package-shared--tags-gap: var(--gap-2xs);
     --card-package-shared--footer-gap: var(--gap-sm);
     --card-package-md-card--image-wrapper-border-bottom-left-radius: 0;
     --card-package-md-card--image-wrapper-border-bottom-right-radius: 0;
@@ -78,7 +78,7 @@
       --radius-md
     );
     --card-package-md-featured--content-padding: var(--space-16) var(--space-24);
-    --card-package-md-featured--info-gap: var(--gap-xxxs);
+    --card-package-md-featured--info-gap: var(--gap-3xs);
     --card-package-md-featured--title-font-size: 1.313rem;
     --card-package-md-featured--title-line-height: 160%;
     --card-package-md-featured--author-font-size: var(--font-size-body-md);
@@ -142,7 +142,7 @@
     --divider-height: 0.063rem;
     --divider-md-margin: 0.25rem 0rem;
     --input-md-border-radius: var(--radius-md);
-    --input-md-height: 2.75rem;
+    --input-md-height: 2.5rem;
     --input-sm-border-radius: var(--radius-md);
     --input-sm-height: 2.25rem;
     --meta-item-16-font-size: var(--font-size-body-lg, 1rem);
@@ -200,23 +200,23 @@
     --switch-knob-sm-border-radius: var(--radius-full);
     --tab-nav-item-border-style--default: solid;
     --tag-md-border-radius: var(--radius-md);
-    --tag-md-padding-block: var(--space-4);
-    --tag-md-gap: var(--space-6);
-    --tag-md-padding-inline: var(--space-8);
     --tag-md-font-size: var(--font-size-body-md);
+    --tag-md-gap: var(--space-6);
     --tag-md-height: 1.875rem;
+    --tag-md-padding-block: var(--space-4);
+    --tag-md-padding-inline: var(--space-8);
     --tag-sm-border-radius: var(--radius-md);
-    --tag-sm-padding-block: var(--space-4);
-    --tag-sm-gap: var(--space-6);
-    --tag-sm-padding-inline: var(--space-6);
     --tag-sm-font-size: var(--font-size-body-sm);
+    --tag-sm-gap: var(--space-6);
     --tag-sm-height: 1.5rem;
+    --tag-sm-padding-block: var(--space-4);
+    --tag-sm-padding-inline: var(--space-6);
     --tag-xs-border-radius: var(--radius-md);
+    --tag-xs-font-size: var(--font-size-body-xs);
     --tag-xs-gap: var(--space-4);
+    --tag-xs-height: var(--space-20);
     --tag-xs-padding-block: var(--space-4);
     --tag-xs-padding-inline: var(--space-6);
-    --tag-xs-font-size: var(--font-size-body-xs);
-    --tag-xs-height: var(--space-20);
     --toast-md-gap: var(--space-16);
     --toast-md-padding-block: var(--space-16);
     --toast-md-padding-inline: var(--space-24);
diff --git a/packages/cyberstorm-theme/src/styles/colors.css b/packages/cyberstorm-theme/src/styles/colors.css
index 7f62da99d..78851b593 100644
--- a/packages/cyberstorm-theme/src/styles/colors.css
+++ b/packages/cyberstorm-theme/src/styles/colors.css
@@ -13,8 +13,10 @@
     /* Misc */
     --color-crown: var(--color-accent-yellow-5);
     --animation-timing-1: cubic-bezier(0.16, 1, 0.3, 1);
-    --shadow-lg: 0px 0px 4px 0px rgb(0 0 0 / 0.4),
-      0px 6px 8px 0px rgb(0 0 0 / 0.5);
+    --shadow-lg: 0 0 4px 0 rgb(0 0 0 / 0.4), 0 6px 8px 0 rgb(0 0 0 / 0.5);
+    --shadow-md: 0 0 4px 0 rgb(0 0 0 / 0.4), 0 4px 8px 0 rgb(0 0 0 / 0.4);
+    --shadow-sm: 0 0 1px 0 rgb(0 0 0 / 0.4), 0 1px 2px 0 rgb(0 0 0 / 0.9);
+    --shadow-xl: 0 0 4px 0 rgb(0 0 0 / 0.4), 0 12px 32px 0 rgb(0 0 0 / 0.5);
     --dropshadow-default: drop-shadow(0 1px 1px #0d0d21);
     --textshadow-default: 0 1px 1px #0d0d21;
 
diff --git a/packages/cyberstorm-theme/src/styles/globals.css b/packages/cyberstorm-theme/src/styles/globals.css
index 9cbe32565..e6c4f0c50 100644
--- a/packages/cyberstorm-theme/src/styles/globals.css
+++ b/packages/cyberstorm-theme/src/styles/globals.css
@@ -27,18 +27,19 @@
 
     /* Space affecting layout values */
 
-    --gap-xxxs: var(--space-2);
-    --gap-xxs: var(--space-4);
+    --gap-3xs: var(--space-2);
+    --gap-2xs: var(--space-4);
     --gap-xs: var(--space-8);
     --gap-sm: var(--space-12);
     --gap-md: var(--space-16);
+    --gap-lg: var(--space-20);
     --gap-xl: var(--space-24);
-    --gap-xxl: var(--space-28);
-    --gap-xxxl: var(--space-32);
-    --gap-xxxxl: var(--space-36);
-    --gap-xxxxxl: var(--space-40);
-    --gap-xxxxxxl: var(--space-44);
-    --gap-xxxxxxxl: var(--space-48);
+    --gap-2xl: var(--space-28);
+    --gap-3xl: var(--space-32);
+    --gap-4xl: var(--space-36);
+    --gap-5xl: var(--space-40);
+    --gap-6xl: var(--space-44);
+    --gap-7xl: var(--space-48);
     --page-margin: 16rem;
     --page-margin-top: 25px;
 
diff --git a/packages/cyberstorm-theme/src/styles/layout.css b/packages/cyberstorm-theme/src/styles/layout.css
index 1aafae6bb..1fbe0fc10 100644
--- a/packages/cyberstorm-theme/src/styles/layout.css
+++ b/packages/cyberstorm-theme/src/styles/layout.css
@@ -2,7 +2,7 @@
   :root {
     --section-bg: var(--color-surface-2);
     --section-border-radius: var(--radius-sm);
-    --section-gap: var(--gap-xxs);
+    --section-gap: var(--gap-2xs);
   }
 
   /* CONTAINER, basically flex wrapper utility class */
diff --git a/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css b/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
index a80d36d1f..17045185c 100644
--- a/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
+++ b/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-xxxxxxxl);
+  gap: var(--gap-7xl);
 }
 
 .inputContainer {
diff --git a/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css b/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
index 94685b9c8..049214e8d 100644
--- a/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
+++ b/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-xxxxxxxl);
+  gap: var(--gap-7xl);
 }
 
 .inputContainer {
diff --git a/packages/cyberstorm/src/newComponents/Drawer/Drawer.css b/packages/cyberstorm/src/newComponents/Drawer/Drawer.css
index d939f57d9..f20f513d2 100644
--- a/packages/cyberstorm/src/newComponents/Drawer/Drawer.css
+++ b/packages/cyberstorm/src/newComponents/Drawer/Drawer.css
@@ -30,7 +30,7 @@
 
   .drawer__fake-backdrop {
     width: 100%;
-    height: 10%;
+    height: 40%;
     background: transparent;
   }
 
@@ -43,7 +43,7 @@
 
     width: 100%;
     height: max-content;
-    max-height: 90%;
+    max-height: 60%;
     border: var(--drawer-border);
 
     border-radius: var(--drawer-border-radius);
diff --git a/packages/cyberstorm/src/newComponents/EmptyState/EmptyState.css b/packages/cyberstorm/src/newComponents/EmptyState/EmptyState.css
index 53cecdace..5800a00a5 100644
--- a/packages/cyberstorm/src/newComponents/EmptyState/EmptyState.css
+++ b/packages/cyberstorm/src/newComponents/EmptyState/EmptyState.css
@@ -1,7 +1,7 @@
 .empty-state {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-xxxl);
+  gap: var(--gap-3xl);
   color: var(--color-text--default);
 }
 
diff --git a/packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.css b/packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.css
index 804b5d9ee..9947f584c 100644
--- a/packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.css
+++ b/packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.css
@@ -136,7 +136,7 @@
     z-index: 9999;
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxs);
+    gap: var(--gap-2xs);
     width: 100%;
     min-height: 1.5rem;
     max-height: 12rem;
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
index e3a7689f1..f9fcdb060 100644
--- a/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
+++ b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
@@ -77,32 +77,32 @@ export const TextInput = memo(function TextInput(props: TextInputProps) {
           {leftIcon}
         </NewIcon>
       ) : null}
-      {csSize === "default" ? (
+      {csSize === "textarea" ? (
         <Input
-          {...(fProps as InputTextInputProps)}
-          primitiveType={"textInput"}
+          {...(fProps as InputTextAreaProps)}
+          primitiveType={"textArea"}
           rootClasses={classnames(
             "text-input",
             leftIcon ? "text-input--has-left-icon" : null,
             clearValue ? "text-input--has-clear-value" : null,
             ...componentClasses("text-input", csVariant, csSize, csModifiers)
           )}
-          ref={inputRef}
+          ref={textareaRef}
           onKeyDown={onEnter}
         >
           {children}
         </Input>
       ) : (
         <Input
-          {...(fProps as InputTextAreaProps)}
-          primitiveType={"textArea"}
+          {...(fProps as InputTextInputProps)}
+          primitiveType={"textInput"}
           rootClasses={classnames(
             "text-input",
             leftIcon ? "text-input--has-left-icon" : null,
             clearValue ? "text-input--has-clear-value" : null,
             ...componentClasses("text-input", csVariant, csSize, csModifiers)
           )}
-          ref={textareaRef}
+          ref={inputRef}
           onKeyDown={onEnter}
         >
           {children}