diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 5bdb9eff6..6498990e0 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -9,7 +9,7 @@ repos:
       - id: mixed-line-ending
         args: [--fix=lf]
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: "v2.7.1"
+    rev: "v3.1.0"
     hooks:
       - id: prettier
         exclude_types: [markdown, yaml]
diff --git a/apps/cyberstorm-remix/app/Error.module.css b/apps/cyberstorm-remix/app/Error.module.css
index d5bd2945a..2d9f0249c 100644
--- a/apps/cyberstorm-remix/app/Error.module.css
+++ b/apps/cyberstorm-remix/app/Error.module.css
@@ -10,7 +10,7 @@
 }
 
 .description {
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
   font-weight: var(--font-weight-semibold);
   line-height: 1;
 }
diff --git a/apps/cyberstorm-remix/app/c/Community.css b/apps/cyberstorm-remix/app/c/Community.css
new file mode 100644
index 000000000..fafe91f11
--- /dev/null
+++ b/apps/cyberstorm-remix/app/c/Community.css
@@ -0,0 +1,38 @@
+@layer nimbus-layout {
+  .nimbus-community__metaitem {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    color: var(--Meta-item-text-color--default, #c6c3ff);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+
+    & > svg {
+      inline-size: var(--space-16);
+    }
+  }
+
+  .nimbus-community__metalink {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+
+    & > svg {
+      inline-size: var(--space-16);
+    }
+  }
+
+  @media (width <= 30rem) {
+    .nimbus-community__metaitem {
+      font-size: var(--font-size-body-sm);
+    }
+
+    .nimbus-community__metaitem__text {
+      display: none;
+    }
+  }
+}
diff --git a/apps/cyberstorm-remix/app/c/CommunityCard.module.css b/apps/cyberstorm-remix/app/c/CommunityCard.css
similarity index 72%
rename from apps/cyberstorm-remix/app/c/CommunityCard.module.css
rename to apps/cyberstorm-remix/app/c/CommunityCard.css
index 451271e30..fad42b831 100644
--- a/apps/cyberstorm-remix/app/c/CommunityCard.module.css
+++ b/apps/cyberstorm-remix/app/c/CommunityCard.css
@@ -1,14 +1,14 @@
-.root {
+.nimbus-communitycard {
   display: flex;
   flex-direction: row;
   gap: var(--space-32);
 }
 
-.image {
+.nimbus-communitycard__image {
   flex: 0 0 9rem;
 }
 
-.info {
+.nimbus-communitycard__info {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
@@ -16,37 +16,31 @@
 }
 
 @media (width <= 30rem) {
-  .root {
+  .nimbus-communitycard {
     gap: var(--space-16);
+    padding: var(--space-8) 0;
+  }
+
+  .nimbus-communitycard__info > h1 {
+    --display-font-size: 21px;
+  }
+
+  .nimbus-communitycard__image {
+    flex: 0 0 5rem;
   }
 }
 
-.meta {
+.nimbus-communitycard__meta {
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   gap: var(--space-16);
   padding-top: var(--space-16);
 }
 
-.skeletonImage {
-  height: 12rem;
-  aspect-ratio: 3/4;
-}
-
-.skeletonTitle {
-  width: 22rem;
-  height: 2.875rem;
-}
-
-.skeletonMetas {
-  width: 6.5rem;
-  height: 1rem;
-}
-
-.backgroundImg {
+.nimbus-communitycard__backgroundimg {
   --w: 56vw;
 
-  position: absolute;
+  position: fixed;
   top: calc(-1 * (var(--header-height) + var(--content-padding-top-desktop)));
   right: 0;
 
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
index b642fab01..17ad8b91d 100644
--- a/apps/cyberstorm-remix/app/c/community.tsx
+++ b/apps/cyberstorm-remix/app/c/community.tsx
@@ -1,15 +1,14 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import {
-  BreadCrumbs,
-  Button,
-  CollapsibleText,
-  CyberstormLink,
-  ImageWithFallback,
-  MetaItem,
-  Title,
+  Heading,
+  Image,
+  NewBreadCrumbs,
+  NewIcon,
+  NewLink,
 } from "@thunderstore/cyberstorm";
-import styles from "./CommunityCard.module.css";
+import "./Community.css";
+import "./CommunityCard.css";
 import { formatInteger } from "@thunderstore/cyberstorm/src/utils/utils";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
@@ -18,9 +17,12 @@ import {
   faBoxOpen,
   faDownload,
   faArrowUpRightFromSquare,
+  faBook,
 } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { ApiError } from "@thunderstore/thunderstore-api";
+import { CollapsibleText } from "~/commonComponents/CollapsibleText/CollapsibleText";
+import { PackageOrderOptions } from "~/commonComponents/PackageSearch/PackageOrder";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -34,7 +36,8 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     try {
       const dapper = await getDapper();
       const searchParams = new URL(request.url).searchParams;
-      const order = searchParams.get("order");
+      const ordering =
+        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
       const page = searchParams.get("page");
       const search = searchParams.get("search");
       const includedCategories = searchParams.get("includedCategories");
@@ -42,12 +45,6 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
-      const created_recent = searchParams.get("created_recent");
-      const updated_recent = searchParams.get("updated_recent");
-      const created_after = searchParams.get("created_after");
-      const created_before = searchParams.get("created_before");
-      const updated_after = searchParams.get("updated_after");
-      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -56,20 +53,14 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
             kind: "community",
             communityId: params.communityId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false,
-          created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          deprecated === "true" ? true : false
         ),
       };
     } catch (error) {
@@ -89,7 +80,8 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
     try {
       const dapper = await getDapper(true);
       const searchParams = new URL(request.url).searchParams;
-      const order = searchParams.get("order");
+      const ordering =
+        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
       const page = searchParams.get("page");
       const search = searchParams.get("search");
       const includedCategories = searchParams.get("includedCategories");
@@ -97,12 +89,6 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
-      const created_recent = searchParams.get("created_recent");
-      const updated_recent = searchParams.get("updated_recent");
-      const created_after = searchParams.get("created_after");
-      const created_before = searchParams.get("created_before");
-      const updated_after = searchParams.get("updated_after");
-      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -111,20 +97,14 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
             kind: "community",
             communityId: params.communityId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false,
-          created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          deprecated === "true" ? true : false
         ),
       };
     } catch (error) {
@@ -146,74 +126,109 @@ export default function Community() {
 
   return (
     <>
-      {community.background_image_url ? (
+      {community.nimbus_background_image_url ? (
         <div
-          className={styles.backgroundImg}
+          className="nimbus-communitycard__backgroundimg"
           style={{
-            backgroundImage: `url(${community.background_image_url})`,
+            backgroundImage: `url(${community.nimbus_background_image_url})`,
           }}
         />
       ) : null}
-      <BreadCrumbs>
-        <CyberstormLink linkId="Communities">Communities</CyberstormLink>
-        <CyberstormLink linkId="Community" community={community.identifier}>
+      <NewBreadCrumbs rootClasses="nimbus-root__breadcrumbs">
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Communities"
+          csVariant="cyber"
+        >
+          Communities
+        </NewLink>
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Community"
+          community={community.identifier}
+        >
           {community.name}
-        </CyberstormLink>
-      </BreadCrumbs>
-      <header className="project-root__page-header">
-        <div className={styles.root}>
-          <div className={styles.image}>
-            <ImageWithFallback
-              src={community.cover_image_url}
-              type="community"
-            />
+        </NewLink>
+      </NewBreadCrumbs>
+      <header className="nimbus-root__page-header">
+        <div className="nimbus-communitycard">
+          <div className="nimbus-communitycard__image">
+            <Image src={community.cover_image_url} cardType="community" />
           </div>
-          <div className={styles.info}>
-            <Title text={community.name} />
+          <div className="nimbus-communitycard__info">
+            <Heading csLevel="1" csSize="2" csVariant="primary" mode="display">
+              {community.name}
+            </Heading>
             {community.description ? (
               <CollapsibleText text={community.description} maxLength={85} />
             ) : null}
-            <div className={styles.meta}>
+            <div className="nimbus-communitycard__meta">
               {[
-                <MetaItem
-                  key="meta-packages"
-                  label={`${formatInteger(
-                    community.total_package_count
-                  )} packages`}
-                  icon={<FontAwesomeIcon icon={faBoxOpen} />}
-                  colorScheme="accent"
-                  size="bold_large"
-                />,
-                <MetaItem
+                <div className="nimbus-community__metaitem" key="meta-packages">
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon icon={faBoxOpen} />
+                  </NewIcon>
+                  {formatInteger(community.total_package_count)}
+                  <span className="nimbus-community__metaitem__text">
+                    packages
+                  </span>
+                </div>,
+                <div
+                  className="nimbus-community__metaitem"
                   key="meta-downloads"
-                  label={`${formatInteger(
-                    community.total_download_count
-                  )} downloads`}
-                  icon={<FontAwesomeIcon icon={faDownload} />}
-                  colorScheme="accent"
-                  size="bold_large"
-                />,
+                >
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon icon={faDownload} />
+                  </NewIcon>
+                  {formatInteger(community.total_download_count)}
+                  <span className="nimbus-community__metaitem__text">
+                    downloads
+                  </span>
+                </div>,
+                community.wiki_url ? (
+                  <NewLink
+                    primitiveType="link"
+                    href={community.wiki_url}
+                    key="meta-wiki"
+                    csVariant="cyber"
+                    rootClasses="nimbus-community__metalink"
+                  >
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faBook} />
+                    </NewIcon>
+                    <span className="nimbus-community__metaitem__text">
+                      Modding wiki
+                    </span>
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+                    </NewIcon>
+                  </NewLink>
+                ) : null,
                 community.discord_url ? (
-                  <a key="meta-link" href="{community.discord_url}">
-                    <Button.Root colorScheme="transparentPrimary">
-                      <Button.ButtonIcon>
-                        <FontAwesomeIcon icon={faDiscord} />
-                      </Button.ButtonIcon>
-                      <Button.ButtonLabel>
-                        Join our community
-                      </Button.ButtonLabel>
-                      <Button.ButtonIcon>
-                        <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                      </Button.ButtonIcon>
-                    </Button.Root>
-                  </a>
+                  <NewLink
+                    primitiveType="link"
+                    href={community.discord_url}
+                    key="meta-discord"
+                    csVariant="cyber"
+                    rootClasses="nimbus-community__metalink"
+                  >
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faDiscord} />
+                    </NewIcon>
+                    <span className="nimbus-community__metaitem__text">
+                      Join our community
+                    </span>
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+                    </NewIcon>
+                  </NewLink>
                 ) : null,
               ]}
             </div>
           </div>
         </div>
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <PackageSearch
           listings={listings}
           packageCategories={filters.package_categories}
diff --git a/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css
new file mode 100644
index 000000000..a0fffa61e
--- /dev/null
+++ b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css
@@ -0,0 +1,35 @@
+.nimbus-commoncomponents-collapsibletext {
+  display: block;
+}
+
+.nimbus-commoncomponents-collapsibletext__text {
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-lg);
+  line-height: var(--line-height-md);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 1px #0d0d21;
+
+  /* white-space: pre-wrap; */
+}
+
+.nimbus-commoncomponents-collapsibletext__opened {
+  white-space: normal;
+}
+
+.nimbus-commoncomponents-collapsibletext__show {
+  color: var(--color-text-accent);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-md);
+  line-height: normal;
+  background-color: transparent;
+}
+
+@media (width <= 30rem) {
+  .nimbus-commoncomponents-collapsibletext__text {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height--s);
+  }
+}
diff --git a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.tsx b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx
similarity index 54%
rename from packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.tsx
rename to apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx
index ac70c2834..c5469426a 100644
--- a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx
@@ -1,6 +1,5 @@
-"use client";
-import { classnames } from "../../utils/utils";
-import styles from "./CollapsibleText.module.css";
+import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import "./CollapsibleText.css";
 import { ReactElement, useState } from "react";
 
 export interface CollapsibleTextProps {
@@ -9,9 +8,6 @@ export interface CollapsibleTextProps {
   meta?: ReactElement[];
 }
 
-/**
- * Cyberstorm CollapsibleText
- */
 export function CollapsibleText(props: CollapsibleTextProps) {
   const { text = "", maxLength = 80 } = props;
 
@@ -19,12 +15,20 @@ export function CollapsibleText(props: CollapsibleTextProps) {
   const [opened, setOpened] = useState(!textIsTooLong);
 
   return (
-    <div className={styles.root}>
-      <p className={classnames(styles.text, opened ? styles.opened : null)}>
+    <div className="nimbus-commoncomponents-collapsibletext">
+      <p
+        className={classnames(
+          "nimbus-commoncomponents-collapsibletext__text",
+          opened ? "nimbus-commoncomponents-collapsibletext__opened" : null
+        )}
+      >
         {text}
       </p>
       {textIsTooLong ? (
-        <button className={styles.show} onClick={() => setOpened(!opened)}>
+        <button
+          className="nimbus-commoncomponents-collapsibletext__show"
+          onClick={() => setOpened(!opened)}
+        >
           {opened ? "Show less" : "Show more"}
         </button>
       ) : null}
diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
index db3d46898..60809c38e 100644
--- a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
+++ b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
@@ -1,39 +1,39 @@
-@layer project-layout {
-  .project-footer {
+@layer nimbus-layout {
+  .nimbus-footer {
     width: 100%;
 
     --border: var(--space-px) solid #27275d;
   }
 
   @media (width <= 63.5rem) {
-    .project-footer__item {
+    .nimbus-footer__item {
       padding-right: 1.5rem;
       padding-left: 1.5rem;
     }
   }
 
-  .project-footer__main {
+  .nimbus-footer__main {
     display: flex;
     flex-direction: column;
   }
 
-  .project-footer__section {
+  .nimbus-footer__section {
     display: flex;
     flex-direction: column;
   }
 
-  .project-footer__item {
+  .nimbus-footer__item {
     display: flex;
     flex: 1;
     border-top: var(--border);
   }
 
-  .project-footer__extra {
+  .nimbus-footer__extra {
     position: relative;
     order: -1;
   }
 
-  .project-footer__extra::before {
+  .nimbus-footer__extra::before {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -51,22 +51,22 @@
     aspect-ratio: 5/1;
   }
 
-  .project-footer__inner {
+  .nimbus-footer__inner {
     display: flex;
     flex: 1;
     padding-block: var(--space-32);
     width: 100%;
   }
 
-  .project-footer__adwrapper .project-footer__inner {
+  .nimbus-footer__adwrapper .nimbus-footer__inner {
     padding-bottom: 0;
   }
 
-  .project-footer__company {
+  .nimbus-footer__company {
     order: 2;
   }
 
-  .project-footer__footnote {
+  .nimbus-footer__footnote {
     padding-block: var(--space-32);
     padding-block-end: 5.5rem;
 
@@ -74,7 +74,7 @@
     --link-color-hover: var(--color-text-primary);
   }
 
-  .project-footer__footnotecopyright {
+  .nimbus-footer__footnotecopyright {
     color: rgb(197 194 255 / 0.6) !important;
     font-weight: var(--font-weight-regular);
     font-size: var(--font-size-body-sm);
@@ -82,7 +82,7 @@
     text-align: center;
   }
 
-  .project-footer__footnoteinner {
+  .nimbus-footer__footnoteinner {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
@@ -94,27 +94,27 @@
     margin-inline: auto;
   }
 
-  .project-footer__nav {
+  .nimbus-footer__nav {
     display: flex;
     gap: var(--space-40);
     justify-content: center;
     width: 100%;
   }
 
-  .project-footer__navsection {
+  .nimbus-footer__navsection {
     display: flex;
     flex-direction: column;
     gap: var(--space-24);
   }
 
-  .project-footer__ad {
+  .nimbus-footer__ad {
     display: flex;
     flex-direction: column;
     gap: var(--space-32);
     max-width: 100%;
   }
 
-  .project-footer__adtext {
+  .nimbus-footer__adtext {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -122,7 +122,7 @@
     padding-bottom: 1rem;
   }
 
-  .project-footer__addescription {
+  .nimbus-footer__addescription {
     max-width: 29rem;
     color: var(--color-text-accent);
     font-weight: 400;
@@ -130,11 +130,11 @@
     line-height: var(--line-height-md);
   }
 
-  .project-footer__getmanagerbutton {
+  .nimbus-footer__getmanagerbutton {
     width: fit-content;
   }
 
-  .project-footer__img {
+  .nimbus-footer__img {
     position: relative;
     aspect-ratio: 2.5/1;
     object-fit: cover;
@@ -142,24 +142,24 @@
     box-shadow: -36px -36px 40px 0 rgb(0 0 0 / 0.35);
   }
 
-  .project-footer__logoandlinks {
+  .nimbus-footer__logoandlinks {
     display: flex;
     flex-direction: column;
     gap: var(--gap-xxxl);
     align-items: center;
   }
 
-  .project-footer__logo {
+  .nimbus-footer__logo {
     height: 2rem;
   }
 
-  .project-footer__iconlinks {
+  .nimbus-footer__iconlinks {
     display: flex;
     gap: 30px;
     color: var(--color-text-accent);
   }
 
-  .project-footer__iconlink {
+  .nimbus-footer__iconlink {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -167,14 +167,14 @@
     border-radius: var(--radius-md);
   }
 
-  .project-footer__footerpageslinks {
+  .nimbus-footer__footerpageslinks {
     display: flex;
     gap: var(--gap-xxxl);
     font-weight: var(--font-weight-regular);
     font-size: var(--font-size-body-sm);
   }
 
-  .project-footer__footerlist {
+  .nimbus-footer__footerlist {
     display: flex;
     flex-direction: column;
     gap: var(--gap-xs);
@@ -183,83 +183,87 @@
     list-style-type: none;
   }
 
-  .project-footer__info {
+  .nimbus-footer__opensource {
+    color: var(--color-text-accent);
+  }
+
+  .nimbus-footer__info {
     --link-color: var(--color-text-accent);
     --link-color-hover: var(--color-text-primary);
   }
 
   @media (width >= calc(63.5rem + 1px)) {
-    .project-footer__logoandlinks {
+    .nimbus-footer__logoandlinks {
       flex-direction: row;
       justify-content: space-between;
     }
   }
 
   @media (width >= calc(63.5rem + 1px)) {
-    .project-footer__main {
+    .nimbus-footer__main {
       flex-direction: row;
     }
 
-    .project-footer__section {
+    .nimbus-footer__section {
       flex: 0 0 50%;
     }
 
-    .project-footer__info .project-footer__item {
+    .nimbus-footer__info .nimbus-footer__item {
       justify-content: flex-end;
     }
 
-    .project-footer__inner {
+    .nimbus-footer__inner {
       flex: 0 1 45rem;
       padding-block: 4.5rem;
     }
 
-    .project-footer__company .project-footer__inner,
-    .project-footer__linkswrapper .project-footer__inner {
+    .nimbus-footer__company .nimbus-footer__inner,
+    .nimbus-footer__linkswrapper .nimbus-footer__inner {
       padding-right: 3.5rem;
     }
 
-    .project-footer__company {
+    .nimbus-footer__company {
       align-items: center;
       order: 0;
     }
 
-    .project-footer__extra {
+    .nimbus-footer__extra {
       order: 0;
       border-left: var(--border);
     }
 
-    .project-footer__adwrapper .project-footer__inner {
+    .nimbus-footer__adwrapper .nimbus-footer__inner {
       padding-top: 5rem;
       padding-bottom: 0;
       padding-left: 5rem;
     }
 
-    .project-footer__logoandlinks,
-    .project-footer__navlinks {
+    .nimbus-footer__logoandlinks,
+    .nimbus-footer__navlinks {
       margin-left: 4.5rem;
     }
 
-    .project-footer__footnote {
+    .nimbus-footer__footnote {
       padding-block-end: var(--space-32);
     }
 
-    .project-footer__nav {
+    .nimbus-footer__nav {
       gap: 7rem;
       justify-content: flex-start;
     }
 
-    .project-footer__footnoteinner {
+    .nimbus-footer__footnoteinner {
       flex-direction: row;
       justify-content: space-between;
     }
 
-    .project-footer__ad {
+    .nimbus-footer__ad {
       padding-right: 3.125rem;
     }
   }
 
   @media (width <= 23.25rem) {
-    .project-footer__nav {
+    .nimbus-footer__nav {
       flex-flow: wrap;
       justify-content: flex-start;
     }
diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx
index dc0ecf5fc..f44e555c0 100644
--- a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx
@@ -8,7 +8,7 @@ import {
 import { ThunderstoreLogoHorizontal } from "@thunderstore/cyberstorm/src/svg/svg";
 import {
   Heading,
-  LinkButton,
+  NewButton,
   NewIcon,
   NewLink,
 } from "@thunderstore/cyberstorm/src";
@@ -22,20 +22,20 @@ const GITHUB_URL = "https://github.com/thunderstore-io";
  */
 export function Footer() {
   return (
-    <footer className="project-footer" aria-label="Footer">
-      <div className="project-footer__main">
-        <div className="project-footer__section project-footer__info">
-          <div className="project-footer__item project-footer__company">
-            <div className="project-footer__inner project-footer__logoandlinks">
-              <NewIcon csVariant="accent" wrapperClasses="project-footer__logo">
+    <footer className="nimbus-footer" aria-label="Footer">
+      <div className="nimbus-footer__main">
+        <div className="nimbus-footer__section nimbus-footer__info">
+          <div className="nimbus-footer__item nimbus-footer__company">
+            <div className="nimbus-footer__inner nimbus-footer__logoandlinks">
+              <NewIcon csVariant="accent" wrapperClasses="nimbus-footer__logo">
                 <ThunderstoreLogoHorizontal />
               </NewIcon>
-              <div className="project-footer__iconlinks">
+              <div className="nimbus-footer__iconlinks">
                 <NewLink
                   primitiveType="link"
                   tooltipText="Join our Discord"
                   href={DISCORD_URL}
-                  rootClasses="project-footer__iconlink"
+                  rootClasses="nimbus-footer__iconlink"
                   aria-label="Invite link to Thunderstores Discord server"
                 >
                   <NewIcon noWrapper>
@@ -46,7 +46,7 @@ export function Footer() {
                   primitiveType="link"
                   tooltipText="Check out our GitHub"
                   href={GITHUB_URL}
-                  rootClasses="project-footer__iconlink"
+                  rootClasses="nimbus-footer__iconlink"
                   aria-label="Link to Thunderstores Github"
                 >
                   <NewIcon noWrapper>
@@ -56,10 +56,10 @@ export function Footer() {
               </div>
             </div>
           </div>
-          <div className="project-footer__item project-footer__linkswrapper">
-            <div className="project-footer__inner project-footer__navlinks">
-              <nav className="project-footer__nav" aria-label="Footer links">
-                <div className="project-footer__navsection">
+          <div className="nimbus-footer__item nimbus-footer__linkswrapper">
+            <div className="nimbus-footer__inner nimbus-footer__navlinks">
+              <nav className="nimbus-footer__nav" aria-label="Footer links">
+                <div className="nimbus-footer__navsection">
                   <Heading
                     csVariant="primary"
                     mode="heading"
@@ -68,7 +68,7 @@ export function Footer() {
                   >
                     Thunderstore
                   </Heading>
-                  <ul className="project-footer__footerlist">
+                  <ul className="nimbus-footer__footerlist">
                     <li>
                       <NewLink
                         primitiveType="cyberstormLink"
@@ -79,7 +79,7 @@ export function Footer() {
                     </li>
                   </ul>
                 </div>
-                <div className="project-footer__navsection">
+                <div className="nimbus-footer__navsection">
                   <Heading
                     csVariant="primary"
                     mode="heading"
@@ -88,7 +88,7 @@ export function Footer() {
                   >
                     Developers
                   </Heading>
-                  <ul className="project-footer__footerlist">
+                  <ul className="nimbus-footer__footerlist">
                     <li>
                       <NewLink primitiveType="link" href="/api/docs">
                         API Documentation
@@ -133,38 +133,38 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="project-footer__section project-footer__extra">
-          <div className="project-footer__item project-footer__adwrapper">
-            <div className="project-footer__inner">
-              <div className="project-footer__ad">
-                <div className="project-footer__adtext">
+        <div className="nimbus-footer__section nimbus-footer__extra">
+          <div className="nimbus-footer__item nimbus-footer__adwrapper">
+            <div className="nimbus-footer__inner">
+              <div className="nimbus-footer__ad">
+                <div className="nimbus-footer__adtext">
                   <Heading mode="display" csLevel="2" csSize="3">
                     Thunderstore Mod Manager
                   </Heading>
-                  <div className="project-footer__addescription">
+                  <div className="nimbus-footer__addescription">
                     You are prepared. Download Thunderstore Mod Manager for
                     desktop and enter a world of Thunder{" "}
                     <NewIcon csMode="inline" noWrapper>
                       <FontAwesomeIcon icon={faBoltLightning} />
                     </NewIcon>
                   </div>
-                  <LinkButton
+                  <NewButton
                     primitiveType="link"
                     href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
                     csSize="big"
                     csVariant="accent"
-                    rootClasses="project-footer__getmanagerbutton"
+                    rootClasses="nimbus-footer__getmanagerbutton"
                   >
                     Get Manager
                     <NewIcon csMode="inline" noWrapper>
                       <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </NewIcon>
-                  </LinkButton>
+                  </NewButton>
                 </div>
                 <img
                   alt="Screenshot of the Thunderstore Mod Manager"
                   src={AD_IMAGE_SRC}
-                  className="project-footer__img"
+                  className="nimbus-footer__img"
                 />
               </div>
             </div>
@@ -172,9 +172,9 @@ export function Footer() {
         </div>
       </div>
 
-      <div className="project-footer__item project-footer__footnote">
-        <div className="project-footer__footnoteinner">
-          <div className="project-footer__footerpageslinks">
+      <div className="nimbus-footer__item nimbus-footer__footnote">
+        <div className="nimbus-footer__footnoteinner">
+          <div className="nimbus-footer__footerpageslinks">
             <NewLink
               primitiveType="link"
               href="https://pages.thunderstore.io/p/contact-us"
@@ -191,13 +191,13 @@ export function Footer() {
               News
             </NewLink>
           </div>
-          <div className="project-footer__footnotecopyright">
+          <div className="nimbus-footer__footnotecopyright">
             © 2024 Thunderstore and contributors. This page is{" "}
             <NewLink
               primitiveType="link"
               href="https://github.com/thunderstore-io/thunderstore-ui/"
               aria-label="This page is open source, link to Thunderstore UIs Github page"
-              rootClasses="project-footer__opensource"
+              rootClasses="nimbus-footer__opensource"
             >
               open-source ❤
             </NewLink>
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
index b7899581a..8c54a1778 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
@@ -1,16 +1,15 @@
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Dispatch, SetStateAction } from "react";
 
 import styles from "./CategoryTagCloud.module.css";
 import { CategorySelection, CATEGORY_STATES } from "../types";
-import { Button } from "@thunderstore/cyberstorm";
+import { NewButton, NewIcon, NewTag } from "@thunderstore/cyberstorm";
 
 const OFF = CATEGORY_STATES[0];
 
 interface Props {
   categories: CategorySelection[];
-  setCategories: Dispatch<SetStateAction<CategorySelection[]>>;
+  setCategories: (v: CategorySelection[]) => void;
 }
 
 /**
@@ -35,26 +34,33 @@ export const CategoryTagCloud = (props: Props) => {
   return (
     <div className={styles.root}>
       {visible.map((c) => (
-        <Button.Root
+        <NewTag
+          csMode="button"
           key={c.slug}
           onClick={() => clearCategory(c.id)}
-          colorScheme={c.selection === "exclude" ? "danger" : "default"}
-          paddingSize="small"
-          style={{ gap: "0.5rem" }}
+          csVariant={c.selection === "exclude" ? "red" : "primary"}
+          csSize="medium"
+          csModifiers={
+            c.selection === "exclude" ? ["dark", "hoverable"] : undefined
+          }
         >
-          <Button.ButtonLabel>{c.name}</Button.ButtonLabel>
-          <Button.ButtonIcon>
+          {c.name}
+          <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faXmark} className={styles.icon} />
-          </Button.ButtonIcon>
-        </Button.Root>
+          </NewIcon>
+        </NewTag>
       ))}
-      <Button.Root
+      <NewButton
         onClick={clearAll}
-        colorScheme="transparentTertiary"
-        paddingSize="small"
+        csVariant="secondary"
+        csSize="xsmall"
+        csModifiers={["ghost"]}
       >
-        <Button.ButtonLabel>Clear all</Button.ButtonLabel>
-      </Button.Root>
+        Clear all
+        <NewIcon csMode="inline" noWrapper>
+          <FontAwesomeIcon icon={faXmark} className={styles.icon} />
+        </NewIcon>
+      </NewButton>
     </div>
   );
 };
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx
index 4b24faf4d..a05f488dd 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx
@@ -1,16 +1,19 @@
-import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import {
+  faSquare,
+  faSquareCheck,
+  faSquareXmark,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Checkbox from "@radix-ui/react-checkbox";
-import { Dispatch, SetStateAction } from "react";
 
 import styles from "./FilterMenu.module.css";
 import { CategorySelection, CATEGORY_STATES as STATES } from "../types";
-import { Icon } from "@thunderstore/cyberstorm";
+import { NewIcon } from "@thunderstore/cyberstorm";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 interface Props {
   categories: CategorySelection[];
-  setCategories: Dispatch<SetStateAction<CategorySelection[]>>;
+  setCategories: (v: CategorySelection[]) => void;
 }
 
 /**
@@ -28,24 +31,27 @@ export const CategoryMenu = (props: Props) => {
       <ol className={styles.list}>
         {categories.map((c) => (
           <li key={c.slug}>
-            <label
-              className={classnames(
-                styles.label,
-                c.selection !== "off" ? styles[c.selection] : undefined
-              )}
-            >
+            <label className={classnames(styles.label, styles[c.selection])}>
               <Checkbox.Root
                 checked={c.selection !== "off"}
                 onCheckedChange={() => toggleCategory(c.id)}
                 className={styles.checkbox}
               >
-                <Checkbox.Indicator>
-                  <Icon>
+                {c.selection === "off" ? (
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon icon={faSquare} />
+                  </NewIcon>
+                ) : null}
+                <Checkbox.Indicator asChild>
+                  <NewIcon csMode="inline" noWrapper>
                     <FontAwesomeIcon
-                      icon={c.selection === "include" ? faCheck : faXmark}
-                      className={styles.icon}
+                      icon={
+                        c.selection === "include"
+                          ? faSquareCheck
+                          : faSquareXmark
+                      }
                     />
-                  </Icon>
+                  </NewIcon>
                 </Checkbox.Indicator>
               </Checkbox.Root>
               {c.name}
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
index 592807e87..957b2df2a 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
@@ -4,94 +4,11 @@
   font-size: var(--font-size-body-lg);
 }
 
-.header,
-.empty {
-  padding: var(--space-8) var(--space-12);
-  font-weight: var(--font-weight-boldest);
-  font-size: var(--font-size-body-xxxxl);
-}
-
 .header {
   display: flex;
+  gap: var(--gap-md);
   justify-content: space-between;
-}
-
-.list {
-  list-style: none;
-}
-
-.label {
-  display: flex;
-  gap: var(--gap-sm);
-  align-items: center;
   padding: var(--space-8) var(--space-12);
-  border-radius: var(--radius-md);
-  color: var(--color-text--secondary);
   font-weight: var(--font-weight-bold);
-  cursor: pointer;
-  transition: var(--animation-duration-xs);
-  user-select: none;
-
-  --mark-color: var(--old--color-accent-purple-6);
-}
-
-.label:hover {
-  background-color: var(--color-surface-4);
-
-  --mark-color: var(--old--color-accent-purple-2);
-}
-
-.checkbox {
-  width: var(--space-18);
-  height: var(--space-18);
-  border-radius: var(--radius-xs);
-  background-color: var(--mark-color);
-  transition: ease-out var(--animation-duration-xs);
-}
-
-.label:hover .checkbox {
-  --mark-color: #4343a3;
-}
-
-.label.include,
-.label.include .checkbox {
-  color: var(--color-highlight);
-
-  --mark-color: var(--color-highlight);
-}
-
-.label.exclude,
-.label.exclude .checkbox {
-  color: var(--color-danger);
-
-  --mark-color: var(--color-danger);
-}
-
-.icon {
-  height: var(--space-16);
-  color: var(--color-surface-0);
-}
-
-.radio {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--space-16);
-  height: var(--space-16);
-  border: var(--space-2) solid var(--color-surface-7);
-  border-radius: var(--radius-md);
-  background-color: transparent;
-  transition: ease-out var(--animation-duration-xs);
-}
-
-.radio.radioSelected {
-  border-color: var(--mark-color);
-}
-
-.radioIndicator {
-  display: block;
-  width: var(--space-6);
-  height: var(--space-6);
-  border-radius: 50%;
-  background-color: var(--mark-color);
+  font-size: var(--font-size-body-lg);
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx
index 76e30be37..18763a2f7 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./CollapsibleMenu.module.css";
-import { Icon } from "@thunderstore/cyberstorm";
+import { NewIcon } from "@thunderstore/cyberstorm";
 
 interface Props extends PropsWithChildren {
   headerTitle: string;
@@ -19,9 +19,9 @@ export const CollapsibleMenu = (props: Props) => {
     <details className={styles.root} open={defaultOpen}>
       <summary className={styles.header}>
         {headerTitle}
-        <Icon inline>
+        <NewIcon csMode="inline" noWrapper>
           <FontAwesomeIcon icon={faCaretDown} />
-        </Icon>
+        </NewIcon>
       </summary>
       {children}
     </details>
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
index 3d7ed801e..ab90c0885 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
@@ -1,91 +1,89 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  font-size: var(--font-size-body-lg);
-}
-
-.header,
-.empty {
-  padding: var(--space-8) var(--space-12);
-  font-size: var(--font-size-body-lg);
-}
-
-.list {
-  list-style: none;
-}
-
 .label {
   display: flex;
   gap: var(--gap-sm);
   align-items: center;
   padding: var(--space-8) var(--space-12);
   border-radius: var(--radius-md);
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-bold);
   cursor: pointer;
   transition: var(--animation-duration-xs);
   user-select: none;
-
-  --mark-color: var(--old--color-accent-purple-6);
 }
 
 .label:hover {
   background-color: var(--color-surface-4);
-
-  --mark-color: var(--old--color-accent-purple-2);
 }
 
-.checkbox {
-  width: var(--space-18);
-  height: var(--space-18);
-  border-radius: var(--radius-xs);
-  background-color: var(--mark-color);
+/* RADIO GROUP */
+.radio {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-16);
+  height: var(--space-16);
+  background-color: transparent;
   transition: ease-out var(--animation-duration-xs);
+
+  & > svg {
+    --icon-color: var(--color-surface-a8);
+  }
 }
 
-.label:hover .checkbox {
-  --mark-color: #4343a3;
+.radioIndicator {
+  position: absolute;
+  display: block;
+  width: var(--space-16);
+  height: var(--space-16);
 }
 
-.label.include,
-.label.include .checkbox {
-  color: var(--color-highlight);
+.radioSelected {
+  & > .radioIndicator {
+    --icon-color: var(--color-cyber-green-7);
+  }
 
-  --mark-color: var(--color-highlight);
+  & > .radioSelected__baseicon {
+    --icon-color: transparent;
+  }
 }
 
-.label.exclude,
-.label.exclude .checkbox {
-  color: var(--color-danger);
-
-  --mark-color: var(--color-danger);
+.selected {
+  color: var(--color-cyber-green-7);
 }
 
-.icon {
-  height: var(--space-16);
-  color: var(--color-surface-0);
+/* CATEGORY MENU */
+.list {
+  list-style: none;
 }
 
-.radio {
+.checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--space-16);
-  height: var(--space-16);
-  border: var(--space-2) solid var(--color-surface-7);
-  border-radius: var(--radius-md);
+  width: var(--space-18);
+  height: var(--space-18);
   background-color: transparent;
   transition: ease-out var(--animation-duration-xs);
 }
 
-.radio.radioSelected {
-  border-color: var(--mark-color);
+.off {
+  & > button > svg {
+    --icon-color: var(--color-surface-a7);
+  }
 }
 
-.radioIndicator {
-  display: block;
-  width: var(--space-6);
-  height: var(--space-6);
-  border-radius: 50%;
-  background-color: var(--mark-color);
+.include {
+  color: var(--color-cyber-green-7);
+
+  & > button > svg {
+    --icon-color: var(--color-cyber-green-7);
+  }
+}
+
+.exclude {
+  color: var(--color-accent-red-5);
+
+  & > button > svg {
+    --icon-color: var(--color-accent-red-5);
+  }
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx
index a05a294e8..e5e319dae 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx
@@ -1,24 +1,23 @@
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faSquare, faSquareCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Checkbox from "@radix-ui/react-checkbox";
-import { Dispatch, SetStateAction } from "react";
 
 import styles from "./FilterMenu.module.css";
-import { Icon } from "@thunderstore/cyberstorm";
+import { NewIcon } from "@thunderstore/cyberstorm";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 interface Props {
   deprecated: boolean;
-  setDeprecated: Dispatch<SetStateAction<boolean>>;
+  setDeprecated: (v: boolean) => void;
   nsfw: boolean;
-  setNsfw: Dispatch<SetStateAction<boolean>>;
+  setNsfw: (v: boolean) => void;
 }
 
 /**
  * Allow filtering packages by other attributes on PackageSearch.
  */
 export const OthersMenu = (props: Props) => {
-  const filters: [boolean, Dispatch<SetStateAction<boolean>>, string][] = [
+  const filters: [boolean, (v: boolean) => void, string][] = [
     [props.nsfw, props.setNsfw, "NSFW"],
     [props.deprecated, props.setDeprecated, "Deprecated"],
   ];
@@ -30,7 +29,7 @@ export const OthersMenu = (props: Props) => {
           <label
             className={classnames(
               styles.label,
-              checked ? styles.include : null
+              checked ? styles.include : styles.off
             )}
           >
             <Checkbox.Root
@@ -38,11 +37,9 @@ export const OthersMenu = (props: Props) => {
               onCheckedChange={() => setChecked(!checked)}
               className={styles.checkbox}
             >
-              <Checkbox.Indicator>
-                <Icon>
-                  <FontAwesomeIcon icon={faCheck} className={styles.icon} />
-                </Icon>
-              </Checkbox.Indicator>
+              <NewIcon csMode="inline" noWrapper>
+                <FontAwesomeIcon icon={checked ? faSquareCheck : faSquare} />
+              </NewIcon>
             </Checkbox.Root>
             {label}
           </label>
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/SectionMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/SectionMenu.tsx
index 24200b314..0d4cf2d02 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/SectionMenu.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/SectionMenu.tsx
@@ -1,14 +1,15 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import { Section } from "@thunderstore/dapper/types";
-import { Dispatch, SetStateAction } from "react";
-
+import { faCircle, faCircleDot } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./FilterMenu.module.css";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import { NewIcon } from "@thunderstore/cyberstorm";
 
 interface Props {
   allSections: Section[];
   selected: string;
-  setSelected: Dispatch<SetStateAction<string>>;
+  setSelected: (v: string) => void;
 }
 
 /**
@@ -24,7 +25,7 @@ export const SectionMenu = (props: Props) => {
           key={s.slug}
           className={classnames(
             styles.label,
-            s.uuid === selected ? styles.include : null
+            s.uuid === selected ? styles.selected : null
           )}
         >
           <RadioGroup.Item
@@ -34,7 +35,22 @@ export const SectionMenu = (props: Props) => {
               s.uuid === selected ? styles.radioSelected : null
             )}
           >
-            <RadioGroup.Indicator className={styles.radioIndicator} />
+            <NewIcon
+              csMode="inline"
+              noWrapper
+              rootClasses={styles.radioSelected__baseicon}
+            >
+              <FontAwesomeIcon icon={faCircle} />
+            </NewIcon>
+            <RadioGroup.Indicator asChild>
+              <NewIcon
+                csMode="inline"
+                noWrapper
+                rootClasses={styles.radioIndicator}
+              >
+                <FontAwesomeIcon icon={faCircleDot} />
+              </NewIcon>
+            </RadioGroup.Indicator>
           </RadioGroup.Item>
           {s.name}
         </label>
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
index 94373bfee..aa658a902 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
@@ -7,12 +7,13 @@
 .top {
   display: flex;
   flex-direction: row-reverse;
+  gap: var(--gap-md);
   align-items: center;
   justify-content: space-between;
 }
 
 .packageCount {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-size: var(--font-size-body-lg);
 }
 
@@ -24,7 +25,7 @@
 }
 
 .sortByText {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-body-lg);
   white-space: nowrap;
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx
index b5bf952e4..236ee413d 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx
@@ -5,17 +5,16 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faHandSparkles } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Dispatch, SetStateAction } from "react";
 
-import { Select } from "@thunderstore/cyberstorm";
+import { NewSelect } from "@thunderstore/cyberstorm";
 
 interface Props {
-  order: PackageOrderOptions;
-  setOrder: Dispatch<SetStateAction<PackageOrderOptions>>;
+  order: PackageOrderOptionsType;
+  setOrder: (val: PackageOrderOptionsType) => void;
 }
 
 export const PackageOrder = (props: Props) => (
-  <Select
+  <NewSelect
     options={selectOptions}
     value={props.order}
     onChange={props.setOrder}
@@ -29,6 +28,7 @@ export enum PackageOrderOptions {
   Rated = "top-rated",
   Updated = "last-updated",
 }
+export type PackageOrderOptionsType = `${PackageOrderOptions}`;
 
 const selectOptions = [
   {
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageRecent.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageRecent.tsx
deleted file mode 100644
index 8b9817e78..000000000
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageRecent.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-
-import { Select } from "@thunderstore/cyberstorm";
-
-interface Props {
-  value: PackageRecentOptions;
-  setValue: Dispatch<SetStateAction<PackageRecentOptions>>;
-  id: string;
-}
-
-export const PackageRecent = (props: Props) => (
-  <Select
-    options={selectOptions}
-    value={props.value}
-    onChange={props.setValue}
-    id={props.id}
-  />
-);
-
-export enum PackageRecentOptions {
-  OneDay = "1",
-  TwoDays = "2",
-  SevenDays = "7",
-  ThirtyDays = "30",
-  ThreeHundredSixtyFiveDays = "365",
-  AllTime = "0",
-}
-
-const selectOptions = [
-  {
-    value: PackageRecentOptions.OneDay,
-    label: "1 Day",
-  },
-  {
-    value: PackageRecentOptions.TwoDays,
-    label: "2 Days",
-  },
-  {
-    value: PackageRecentOptions.SevenDays,
-    label: "7 Days",
-  },
-  {
-    value: PackageRecentOptions.ThirtyDays,
-    label: "30 Days",
-  },
-  {
-    value: PackageRecentOptions.ThreeHundredSixtyFiveDays,
-    label: "365 Days",
-  },
-  {
-    value: PackageRecentOptions.AllTime,
-    label: "All time",
-  },
-];
-
-PackageRecent.displayName = "PackageRecent";
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
index 2621f75ed..7c76ab526 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
@@ -6,6 +6,11 @@
   gap: var(--gap-xxxl);
 }
 
+.content {
+  flex-basis: min-content;
+  width: 100%;
+}
+
 .contentWrapper {
   display: flex;
   flex-direction: row;
@@ -15,94 +20,77 @@
 
 .sidebar {
   position: sticky;
-  top: var(--header-height);
+  top: calc(var(--header-height) + 1rem);
   display: flex;
   flex-basis: 20%;
   flex-direction: column;
   gap: var(--gap-md);
+  max-height: calc(90vh - var(--header-height));
+  padding-right: var(--space-8);
+  overflow-y: auto;
+
+  /* Slightly modified version of this https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ */
+
+  /* to make it a bit clearer that the sidebar is scrollable */
+  background:
+  /* Shadow Cover TOP */ linear-gradient(
+        var(--body-bg-color) 30%,
+        rgb(255 255 255 / 0)
+      )
+      center top,
+    /* Shadow Cover BOTTOM */
+      linear-gradient(rgb(255 255 255 / 0), var(--body-bg-color) 70%) center
+      bottom,
+    /* Shadow TOP */
+      radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0))
+      center top,
+    /* Shadow BOTTOM */
+      radial-gradient(
+        farthest-side at 50% 100%,
+        rgb(0 0 0 / 0.2),
+        rgb(0 0 0 / 0)
+      )
+      center bottom;
+
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+}
+
+@media (width <= 63.5rem) {
+  .sidebar {
+    flex-basis: 30%;
+  }
 }
 
 .sidebarIsHidden {
   display: none;
 }
 
-.skeletonSearch {
-  width: auto;
-  height: 2.75rem;
-}
-
-.skeletonFilters {
-  height: 18rem;
-}
-
-.skeletonContent {
-  height: 38rem;
-}
-
 .dateFilterHeader {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-body-lg);
   white-space: nowrap;
 }
 
-.dateFilterInputs {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.dateFilterInputsSet {
-  display: flex;
-  flex-direction: column;
-  max-width: fit-content;
-}
-
-.dateFilterInput {
+.searchWrapper {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  padding: var(--space-10) var(--space-14);
-  border: var(--border-width--2) solid var(--border-color);
-
-  border-radius: var(--radius-md);
-  color: var(--color-text--tertiary);
-  font-weight: var(--font-weight-medium);
-
-  font-size: var(--font-size-body-xxxxl);
-  line-height: normal;
-  background-color: var(--color-surface-4);
-  outline: none;
-  transition: ease-out var(--animation-duration-lg);
-
-  --border-color: transparent;
-}
-
-.dateFilterInput:hover {
-  --border-color: var(--color-border--highlight);
-}
-
-.dateFilterInput:focus-within {
-  color: var(--color-text--default);
-  background-color: var(--color-black);
-
-  --border-color: var(--color-border--highlight);
-}
-
-.dateFilterInput::placeholder {
-  color: var(--color-text--tertiary);
+  gap: var(--gap-md);
 }
 
-.searchWrapper {
+.searchRowItemGroup {
   display: flex;
   flex-direction: row;
-  gap: 1rem;
+  gap: var(--gap-md);
+  width: 100%;
 }
 
 .searchRowItemWrapper {
   display: flex;
   flex-direction: column;
+  gap: var(--gap-xs);
 }
 
 .searchInputWrapper {
@@ -110,18 +98,31 @@
 }
 
 .searchText {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-body-lg);
+  font-size: var(--font-size-body-md);
   white-space: nowrap;
 }
 
-.sortByButton {
-  --border-color: transparent;
+@media (width <= 30rem) {
+  .searchWrapper {
+    flex-direction: column;
+  }
 
-  border: var(--border-width--2) solid var(--border-color);
-}
+  .hideOnMobile {
+    display: none;
+  }
+
+  .contentWrapper {
+    flex-direction: column;
+  }
 
-.sortByButton:hover {
-  --border-color: var(--color-border--highlight);
+  .sidebar {
+    position: static;
+    top: 0;
+    max-height: max-content;
+    background: transparent;
+    background-size: contain;
+    background-attachment: scroll;
+  }
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
index e1f6a1ddf..a364c5948 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
@@ -1,12 +1,15 @@
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import { faXmark, faSliders } from "@fortawesome/free-solid-svg-icons";
+import {
+  faSearch,
+  faXmark,
+  faSliders,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   PackageCategory,
   PackageListings,
   Section,
 } from "@thunderstore/dapper/types";
-import { useDeferredValue, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useDebounce } from "use-debounce";
 
 import { CategoryTagCloud } from "./CategoryTagCloud/CategoryTagCloud";
@@ -17,17 +20,25 @@ import styles from "./PackageSearch.module.css";
 import packageListStyles from "./PackageList.module.css";
 import { CategorySelection } from "./types";
 import {
-  Button,
-  PackageCard,
-  Pagination,
-  TextInput,
+  CardPackage,
+  NewButton,
+  NewIcon,
+  NewPagination,
+  NewTextInput,
 } from "@thunderstore/cyberstorm";
-import { useNavigation, useSearchParams } from "@remix-run/react";
+import {
+  useNavigation,
+  useNavigationType,
+  useSearchParams,
+} from "@remix-run/react";
 import { StalenessIndicator } from "@thunderstore/cyberstorm/src/components/StalenessIndicator/StalenessIndicator";
 import { PackageCount } from "./PackageCount";
-import { PackageOrder, PackageOrderOptions } from "./PackageOrder";
+import {
+  PackageOrder,
+  PackageOrderOptions,
+  PackageOrderOptionsType,
+} from "./PackageOrder";
 import { CollapsibleMenu } from "./FilterMenus/CollapsibleMenu";
-import { PackageRecent, PackageRecentOptions } from "./PackageRecent";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 const PER_PAGE = 20;
@@ -45,232 +56,201 @@ export function PackageSearch(props: Props) {
   const { listings, packageCategories: allCategories, sections } = props;
   const allSections = sections.sort((a, b) => a.priority - b.priority);
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  // const [searchParams, setSearchParams] = useSearchParams();
   const navigation = useNavigation();
 
-  const [searchValue, setSearchValue] = useState(
-    searchParams.getAll("search").join(" ")
-  );
+  // REMIX START
 
-  const [categories, setCategories] = useState<CategorySelection[]>(
-    allCategories
-      .sort((a, b) => a.slug.localeCompare(b.slug))
-      .map((c) => ({ ...c, selection: "off" }))
-  );
-  const [section, setSection] = useState(allSections[0]?.uuid ?? "");
-  const [deprecated, setDeprecated] = useState(false);
-  const [nsfw, setNsfw] = useState(false);
-  const [page, setPage] = useState(1);
-  const [order, setOrder] = useState(PackageOrderOptions.Updated);
-  const [recentUpload, setRecentUpload] = useState(
-    PackageRecentOptions.AllTime
-  );
-  const [recentUpdate, setRecentUpdate] = useState(
-    PackageRecentOptions.AllTime
-  );
-  const [createdAfter, setCreatedAfter] = useState("");
-  const [createdBefore, setCreatedBefore] = useState("");
-  const [updatedAfter, setUpdatedAfter] = useState("");
-  const [updatedBefore, setUpdatedBefore] = useState("");
+  const navigationType = useNavigationType();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  // TODO: Disabled until we can figure out how a proper way to display skeletons
+  // const navigation = useNavigation();
 
-  const deferredCategories = useDeferredValue(categories);
-  const deferredDeprecated = useDeferredValue(deprecated);
-  const deferredNsfw = useDeferredValue(nsfw);
-  const deferredSection = useDeferredValue(section);
+  // Order start
+  const changeOrder = (v: PackageOrderOptionsType) => {
+    if (v === PackageOrderOptions.Updated) {
+      searchParams.delete("ordering");
+    } else {
+      searchParams.set("ordering", v);
+    }
+    setSearchParams(searchParams);
+  };
+  // Order end
 
-  const deferredPage = useDeferredValue(page);
-  const deferredOrder = useDeferredValue(order);
-  const deferredRecentUpload = useDeferredValue(recentUpload);
-  const deferredRecentUpdate = useDeferredValue(recentUpdate);
+  // Search start
+  const [searchValue, setSearchValue] = useState(
+    searchParams.getAll("search").join(" ")
+  );
 
-  const deferredIncludedCategories = deferredCategories
-    .filter((c) => c.selection === "include")
-    .map((c) => c.id);
-  const deferredExcludedCategories = deferredCategories
-    .filter((c) => c.selection === "exclude")
-    .map((c) => c.id);
+  useEffect(() => {
+    if (navigationType === "POP") {
+      setSearchValue(searchParams.getAll("search").join(" "));
+    }
+  }, [searchParams]);
 
   const [debouncedSearchValue] = useDebounce(searchValue, 300, {
     maxWait: 300,
   });
 
-  const deferredCreatedAfter = useDeferredValue(createdAfter);
-  const deferredCreatedBefore = useDeferredValue(createdBefore);
-  const deferredUpdatedAfter = useDeferredValue(updatedAfter);
-  const deferredUpdatedBefore = useDeferredValue(updatedBefore);
-
   useEffect(() => {
     if (debouncedSearchValue === "") {
       searchParams.delete("search");
+      setSearchParams(searchParams, { replace: true });
     } else {
       searchParams.set("search", debouncedSearchValue);
+      setSearchParams(searchParams, { replace: true });
     }
+  }, [debouncedSearchValue]);
+  // Search end
 
-    if (deferredDeprecated === false) {
+  // Section start
+  const setSection = (v: string) => {
+    if (allSections.length === 0 || v === allSections[0]?.uuid) {
+      searchParams.delete("section");
+    } else {
+      searchParams.set("section", v);
+    }
+    setSearchParams(searchParams);
+  };
+  // Section end
+
+  // Deprecated start
+  const setDeprecated = (v: boolean) => {
+    if (v === false) {
       searchParams.delete("deprecated");
     } else {
       searchParams.set("deprecated", "true");
     }
+    setSearchParams(searchParams);
+  };
+  // Deprecated end
 
-    if (deferredNsfw === false) {
+  // NSFW start
+  const setNsfw = (v: boolean) => {
+    if (v === false) {
       searchParams.delete("nsfw");
     } else {
       searchParams.set("nsfw", "true");
     }
+    setSearchParams(searchParams);
+  };
+  // NSFW end
 
-    if (deferredSection === allSections[0]?.uuid) {
-      searchParams.delete("section");
+  // Page(number) start
+  const setPage = (v: number) => {
+    if (v === 1) {
+      searchParams.delete("page");
     } else {
-      searchParams.set("section", deferredSection);
+      searchParams.set("page", String(v));
     }
-
-    if (deferredIncludedCategories.length === 0) {
+    setSearchParams(searchParams);
+  };
+  // Page(number) end
+
+  // Categories start
+  const categories: CategorySelection[] = allCategories
+    .sort((a, b) => a.slug.localeCompare(b.slug))
+    .map((c) => ({ ...c, selection: "off" }));
+
+  const setCategories = (v: CategorySelection[]) => {
+    const includedCategories = v
+      .filter((c) => c.selection === "include")
+      .map((c) => c.id);
+    if (includedCategories.length === 0) {
       searchParams.delete("includedCategories");
     } else {
-      searchParams.set(
-        "includedCategories",
-        deferredIncludedCategories.join(",")
-      );
+      searchParams.set("includedCategories", includedCategories.join(","));
     }
-
-    if (deferredExcludedCategories.length === 0) {
+    const excludedCategories = v
+      .filter((c) => c.selection === "exclude")
+      .map((c) => c.id);
+    if (excludedCategories.length === 0) {
       searchParams.delete("excludedCategories");
     } else {
-      searchParams.set(
-        "excludedCategories",
-        deferredExcludedCategories.join(",")
-      );
+      searchParams.set("excludedCategories", excludedCategories.join(","));
     }
-
-    if (deferredPage === 1) {
-      searchParams.delete("page");
-    } else {
-      searchParams.set("page", String(deferredPage));
-    }
-
-    if (deferredOrder === PackageOrderOptions.Updated) {
-      searchParams.delete("order");
-    } else {
-      searchParams.set("order", deferredOrder);
-    }
-
-    if (deferredRecentUpload === PackageRecentOptions.AllTime) {
-      searchParams.delete("created_recent");
-    } else {
-      searchParams.set("created_recent", deferredRecentUpload);
-    }
-
-    if (deferredRecentUpdate === PackageRecentOptions.AllTime) {
-      searchParams.delete("updated_recent");
-    } else {
-      searchParams.set("updated_recent", deferredRecentUpdate);
-    }
-
-    if (deferredCreatedAfter === "") {
-      searchParams.delete("created_after");
-    } else {
-      searchParams.set("created_after", deferredCreatedAfter);
-    }
-
-    if (deferredCreatedBefore === "") {
-      searchParams.delete("created_before");
-    } else {
-      searchParams.set("created_before", deferredCreatedBefore);
-    }
-
-    if (deferredUpdatedAfter === "") {
-      searchParams.delete("updated_after");
-    } else {
-      searchParams.set("updated_after", deferredUpdatedAfter);
-    }
-
-    if (deferredUpdatedBefore === "") {
-      searchParams.delete("updated_before");
-    } else {
-      searchParams.set("updated_before", deferredUpdatedBefore);
-    }
-
     setSearchParams(searchParams);
-  }, [
-    debouncedSearchValue,
-    deferredDeprecated,
-    deferredNsfw,
-    deferredSection,
-    deferredCategories,
-    deferredPage,
-    deferredOrder,
-    deferredCreatedAfter,
-    deferredCreatedBefore,
-    deferredUpdatedAfter,
-    deferredUpdatedBefore,
-    deferredRecentUpload,
-    deferredRecentUpdate,
-  ]);
+  };
+  // Categories end
+
+  function parseCategories(
+    includedCategories: string,
+    excludedCategories: string
+  ): CategorySelection[] {
+    const iCArr = includedCategories.split(",");
+    const eCArr = excludedCategories.split(",");
+    return categories.map((c) =>
+      iCArr.includes(c.id)
+        ? { ...c, selection: "include" }
+        : eCArr.includes(c.id)
+          ? { ...c, selection: "exclude" }
+          : c
+    );
+  }
 
   const [isFiltersVisible, setIsFiltersVisible] = useState(true);
 
   return (
     <div className={styles.root}>
       <div className={styles.searchWrapper}>
-        <div className={styles.searchRowItemWrapper}>
-          <label className={styles.searchText} htmlFor="packageOrder">
-            Sort by
-          </label>
-          <Button.Root
-            iconAlignment="side"
-            colorScheme="primary"
-            paddingSize="largeBorderCompensated"
-            onClick={() => setIsFiltersVisible(!isFiltersVisible)}
+        <div className={styles.searchRowItemGroup}>
+          <div className={styles.searchRowItemWrapper}>
+            <label
+              className={classnames(styles.searchText, styles.hideOnMobile)}
+              htmlFor="filtersMenuToggle"
+            >
+              Filters
+            </label>
+            <NewButton
+              onClick={() => setIsFiltersVisible(!isFiltersVisible)}
+              id="filtersMenuToggle"
+            >
+              <NewIcon csMode="inline" noWrapper>
+                <FontAwesomeIcon
+                  icon={isFiltersVisible ? faXmark : faSliders}
+                />
+              </NewIcon>
+              <span className={styles.hideOnMobile}>
+                {isFiltersVisible ? "Close" : "Open"}
+              </span>
+            </NewButton>
+          </div>
+          <div
+            className={classnames(
+              styles.searchInputWrapper,
+              styles.searchRowItemWrapper
+            )}
           >
-            <Button.ButtonIcon>
-              <FontAwesomeIcon icon={isFiltersVisible ? faXmark : faSliders} />
-            </Button.ButtonIcon>
-            <Button.ButtonLabel>
-              {isFiltersVisible ? "Close" : "Open"}
-            </Button.ButtonLabel>
-          </Button.Root>
-        </div>
-        <div
-          className={classnames(
-            styles.searchInputWrapper,
-            styles.searchRowItemWrapper
-          )}
-        >
-          <label className={styles.searchText} htmlFor="searchInput">
-            Search
-          </label>
-          <TextInput
-            placeholder="Filter Mods..."
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faSearch} />}
-            id="searchInput"
-          />
+            <label
+              className={classnames(styles.searchText, styles.hideOnMobile)}
+              htmlFor="searchInput"
+            >
+              Search
+            </label>
+            <NewTextInput
+              placeholder="Filter Mods..."
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              leftIcon={<FontAwesomeIcon icon={faSearch} />}
+              id="searchInput"
+              type="search"
+            />
+          </div>
         </div>
         <div className={styles.searchRowItemWrapper}>
-          <label className={styles.searchText} htmlFor="packageOrder">
+          <label
+            className={classnames(styles.searchText, styles.hideOnMobile)}
+            htmlFor="packageOrder"
+          >
             Sort by
           </label>
-          <PackageOrder order={order} setOrder={setOrder} />
-        </div>
-        <div className={styles.searchRowItemWrapper}>
-          <label className={styles.searchText} htmlFor="packageRecentUpload">
-            Upload time
-          </label>
-          <PackageRecent
-            id={"packageRecentUpload"}
-            value={recentUpload}
-            setValue={setRecentUpload}
-          />
-        </div>
-        <div className={styles.searchRowItemWrapper}>
-          <label className={styles.searchText} htmlFor="packageRecentUpdate">
-            Update time
-          </label>
-          <PackageRecent
-            id={"packageRecentUpdate"}
-            value={recentUpdate}
-            setValue={setRecentUpdate}
+          <PackageOrder
+            order={
+              (searchParams.get("ordering") as PackageOrderOptions) ??
+              PackageOrderOptions.Updated
+            }
+            setOrder={changeOrder}
           />
         </div>
       </div>
@@ -283,74 +263,11 @@ export function PackageSearch(props: Props) {
           )}
           id="desktopSidebar"
         >
-          <CollapsibleMenu headerTitle="Date filters" defaultOpen={false}>
-            <div className={styles.dateFilterInputs}>
-              <div className={styles.dateFilterInputsSet}>
-                <label
-                  className={styles.dateFilterHeader}
-                  htmlFor="updatedAfter"
-                >
-                  Updated after
-                </label>
-                <input
-                  type="date"
-                  className={styles.dateFilterInput}
-                  onChange={(e) => setUpdatedAfter(e.target.value)}
-                  id="updatedAfter"
-                />
-              </div>
-              <div className={styles.dateFilterInputsSet}>
-                <label
-                  className={styles.dateFilterHeader}
-                  htmlFor="updatedBefore"
-                >
-                  Updated before
-                </label>
-                <input
-                  type="date"
-                  className={styles.dateFilterInput}
-                  onChange={(e) => setUpdatedBefore(e.target.value)}
-                  id="updatedBefore"
-                />
-              </div>
-            </div>
-            <div className={styles.dateFilterInputs}>
-              <div className={styles.dateFilterInputsSet}>
-                <label
-                  className={styles.dateFilterHeader}
-                  htmlFor="createdAfter"
-                >
-                  Created after
-                </label>
-                <input
-                  type="date"
-                  className={styles.dateFilterInput}
-                  onChange={(e) => setCreatedAfter(e.target.value)}
-                  id="createdAfter"
-                />
-              </div>
-              <div className={styles.dateFilterInputsSet}>
-                <label
-                  className={styles.dateFilterHeader}
-                  htmlFor="createdBefore"
-                >
-                  Created before
-                </label>
-                <input
-                  type="date"
-                  className={styles.dateFilterInput}
-                  onChange={(e) => setCreatedBefore(e.target.value)}
-                  id="createdBefore"
-                />
-              </div>
-            </div>
-          </CollapsibleMenu>
-
           {allSections.length > 0 ? (
             <CollapsibleMenu headerTitle="Sections" defaultOpen>
               <SectionMenu
                 allSections={allSections}
-                selected={section}
+                selected={searchParams.get("section") ?? allSections[0]?.uuid}
                 setSelected={setSection}
               />
             </CollapsibleMenu>
@@ -358,16 +275,19 @@ export function PackageSearch(props: Props) {
 
           <CollapsibleMenu headerTitle="Categories" defaultOpen>
             <CategoryMenu
-              categories={categories}
+              categories={parseCategories(
+                searchParams.get("includedCategories") ?? "",
+                searchParams.get("excludedCategories") ?? ""
+              )}
               setCategories={setCategories}
             />
           </CollapsibleMenu>
 
           <CollapsibleMenu headerTitle="Other filters" defaultOpen>
             <OthersMenu
-              deprecated={deprecated}
+              deprecated={searchParams.get("deprecated") ? true : false}
               setDeprecated={setDeprecated}
-              nsfw={nsfw}
+              nsfw={searchParams.get("nsfw") ? true : false}
               setNsfw={setNsfw}
             />
           </CollapsibleMenu>
@@ -380,14 +300,21 @@ export function PackageSearch(props: Props) {
                 isStale={navigation.state === "loading" ? true : false}
               >
                 <PackageCount
-                  page={page}
+                  page={
+                    searchParams.get("page")
+                      ? Number(searchParams.get("page"))
+                      : 1
+                  }
                   pageSize={PER_PAGE}
                   searchQuery={debouncedSearchValue}
                   totalCount={listings.count}
                 />
               </StalenessIndicator>
               <CategoryTagCloud
-                categories={categories}
+                categories={parseCategories(
+                  searchParams.get("includedCategories") ?? "",
+                  searchParams.get("excludedCategories") ?? ""
+                )}
                 setCategories={setCategories}
               />
             </div>
@@ -402,14 +329,18 @@ export function PackageSearch(props: Props) {
               )}
             >
               {listings.results.map((p) => (
-                <PackageCard key={`${p.namespace}-${p.name}`} package={p} />
+                <CardPackage key={`${p.namespace}-${p.name}`} packageData={p} />
               ))}
             </StalenessIndicator>
             <StalenessIndicator
               isStale={navigation.state === "loading" ? true : false}
             >
-              <Pagination
-                currentPage={page}
+              <NewPagination
+                currentPage={
+                  searchParams.get("page")
+                    ? Number(searchParams.get("page"))
+                    : 1
+                }
                 onPageChange={setPage}
                 pageSize={PER_PAGE}
                 siblingCount={2}
diff --git a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.tsx b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.tsx
index b6d79267f..d1a8171ad 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.tsx
@@ -1,6 +1,7 @@
-import { CollapsibleText, Title } from "@thunderstore/cyberstorm";
+import { Title } from "@thunderstore/cyberstorm";
 import styles from "./PageHeader.module.css";
 import { ReactElement } from "react";
+import { CollapsibleText } from "../CollapsibleText/CollapsibleText";
 
 export interface PageHeaderProps {
   image?: ReactElement;
diff --git a/apps/cyberstorm-remix/app/communities/Communities.module.css b/apps/cyberstorm-remix/app/communities/Communities.module.css
deleted file mode 100644
index 072d6230c..000000000
--- a/apps/cyberstorm-remix/app/communities/Communities.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@media (width <= 40rem) {
-  .breadcrumbs {
-    display: none;
-  }
-}
diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
index 3822b31d1..b941231be 100644
--- a/apps/cyberstorm-remix/app/communities/communities.tsx
+++ b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -9,7 +9,6 @@ import {
   NewTextInput,
   NewSelect,
 } from "@thunderstore/cyberstorm";
-import styles from "./Communities.module.css";
 import searchAndOrderStyles from "./SearchAndOrder.module.css";
 import communitiesListStyles from "./CommunityList.module.css";
 import { useState, useEffect } from "react";
@@ -126,15 +125,15 @@ export default function CommunitiesPage() {
 
   return (
     <>
-      <NewBreadCrumbs rootClasses={styles.breadcrumbs}>
+      <NewBreadCrumbs rootClasses="nimbus-root__breadcrumbs">
         Communities
       </NewBreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <Heading csLevel="1" csSize="2" csVariant="primary" mode="display">
           Communities
         </Heading>
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <div className={searchAndOrderStyles.root}>
           <div className={searchAndOrderStyles.searchTextInput}>
             <label htmlFor="communitiesSearchInput">Search</label>
diff --git a/apps/cyberstorm-remix/app/namespace/namespace.tsx b/apps/cyberstorm-remix/app/namespace/namespace.tsx
index 8cebde875..366d2627d 100644
--- a/apps/cyberstorm-remix/app/namespace/namespace.tsx
+++ b/apps/cyberstorm-remix/app/namespace/namespace.tsx
@@ -128,7 +128,7 @@ export default function Community() {
           {community.name}
         </CyberstormLink>
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <div className={styles.root}>
           <div className={styles.image}>
             <ImageWithFallback
@@ -181,7 +181,7 @@ export default function Community() {
           </div>
         </div>
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <PackageSearch
           listings={listings}
           packageCategories={filters.package_categories}
diff --git a/apps/cyberstorm-remix/app/p/Tabs.module.css b/apps/cyberstorm-remix/app/p/Tabs.module.css
index f042799a6..4da2f8775 100644
--- a/apps/cyberstorm-remix/app/p/Tabs.module.css
+++ b/apps/cyberstorm-remix/app/p/Tabs.module.css
@@ -46,7 +46,7 @@
 }
 
 .button:not(.active, :disabled):hover > .icon {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .label {
diff --git a/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css b/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
index 5a78ba448..319e72923 100644
--- a/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
+++ b/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
@@ -7,7 +7,7 @@
 
 .countDescription {
   padding: 0 var(--space-8);
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-size: var(--font-size-body-lg);
 }
 
@@ -37,7 +37,7 @@
 
 .itemDescription {
   overflow: hidden;
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
   white-space: nowrap;
diff --git a/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css b/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css
index fcb5d5279..d0538bfeb 100644
--- a/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css
+++ b/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css
@@ -14,7 +14,7 @@
 }
 
 .description {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
@@ -34,7 +34,7 @@
 
 .preferredVersion {
   padding-top: var(--space-6);
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-md);
   line-height: var(--line-height--s);
diff --git a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
index 2371ae6dd..d3ab015df 100644
--- a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
+++ b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
@@ -20,7 +20,7 @@
 }
 
 .itemDescription {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx
index 5a0a75b6e..d800fbd5c 100644
--- a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx
+++ b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx
@@ -26,12 +26,6 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
-      const created_recent = searchParams.get("created_recent");
-      const updated_recent = searchParams.get("updated_recent");
-      const created_after = searchParams.get("created_after");
-      const created_before = searchParams.get("created_before");
-      const updated_after = searchParams.get("updated_after");
-      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -54,13 +48,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false,
-          created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          deprecated === "true" ? true : false
         ),
       };
     } catch (error) {
@@ -88,12 +76,6 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
-      const created_recent = searchParams.get("created_recent");
-      const updated_recent = searchParams.get("updated_recent");
-      const created_after = searchParams.get("created_after");
-      const created_before = searchParams.get("created_before");
-      const updated_after = searchParams.get("updated_after");
-      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -116,13 +98,7 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false,
-          created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          deprecated === "true" ? true : false
         ),
       };
     } catch (error) {
@@ -144,11 +120,11 @@ export default function Community() {
 
   return (
     <>
-      {community.background_image_url ? (
+      {community.nimbus_background_image_url ? (
         <div
           className={styles.backgroundImg}
           style={{
-            backgroundImage: `url(${community.background_image_url})`,
+            backgroundImage: `url(${community.nimbus_background_image_url})`,
           }}
         />
       ) : null}
@@ -170,7 +146,7 @@ export default function Community() {
         </CyberstormLink>
         Dependants
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <div className={styles.root}>
           <div className={styles.header}>
             Mods that depend on{" "}
@@ -193,7 +169,7 @@ export default function Community() {
           </div>
         </div>
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <PackageSearch
           listings={listings}
           packageCategories={filters.package_categories}
diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
index 4daa46791..a050736b6 100644
--- a/apps/cyberstorm-remix/app/p/packageListing.tsx
+++ b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -199,12 +199,12 @@ export default function Community() {
   const currentTab = location.pathname.endsWith("/changelog")
     ? "changelog"
     : location.pathname.endsWith("/versions")
-    ? "versions"
-    : location.pathname.endsWith("/wiki")
-    ? "wiki"
-    : location.pathname.endsWith("/source")
-    ? "source"
-    : "details";
+      ? "versions"
+      : location.pathname.endsWith("/wiki")
+        ? "wiki"
+        : location.pathname.endsWith("/source")
+          ? "source"
+          : "details";
 
   return (
     <>
@@ -218,7 +218,7 @@ export default function Community() {
         </CyberstormLink>
         {listing.name}
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <div className={headerStyles.packageInfo}>
           <PageHeader
             title={listing.name}
@@ -298,7 +298,7 @@ export default function Community() {
           </div>
         </div>
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <div className={styles.packageContainer}>
           <div className={tabsStyles.root}>
             <div className={tabsStyles.buttons}>
diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
index e51f376c2..6ee5cf9e8 100644
--- a/apps/cyberstorm-remix/app/root.tsx
+++ b/apps/cyberstorm-remix/app/root.tsx
@@ -128,12 +128,12 @@ function Root() {
   const shouldShowAds = location.pathname.startsWith("/teams")
     ? false
     : location.pathname.startsWith("/settings")
-    ? false
-    : location.pathname.startsWith("/package/create")
-    ? false
-    : location.pathname.startsWith("/tools")
-    ? false
-    : true;
+      ? false
+      : location.pathname.startsWith("/package/create")
+        ? false
+        : location.pathname.startsWith("/tools")
+          ? false
+          : true;
 
   const isHydrated = useHydrated();
   const startsHydrated = useRef(isHydrated);
@@ -197,7 +197,7 @@ function Root() {
           <LinkingProvider value={LinkLibrary}>
             <Toast.Provider toastDuration={10000}>
               <RadixTooltip delayDuration={300}>
-                <div className="project-root">
+                <div className="nimbus-root">
                   {/* REMIX TODO: For whatever reason the Navigation seems to cause suspense boundary errors. Couldn't find a reason why */}
                   <Navigation
                     hydrationCheck={!startsHydrated.current && isHydrated}
@@ -209,12 +209,12 @@ function Root() {
                   ) : (
                     <MobileUserPopoverContent />
                   )}
-                  <section className="project-root__content">
-                    <div className="project-root__side-containers" />
-                    <div className="project-root__middle-container">
+                  <section className="nimbus-root__content">
+                    <div className="nimbus-root__side-containers" />
+                    <div className="nimbus-root__middle-container">
                       <Outlet />
                     </div>
-                    <div className="project-root__side-containers">
+                    <div className="nimbus-root__side-containers">
                       {shouldShowAds
                         ? adContainerIds.map((cid, k_i) => (
                             <AdContainer key={k_i} containerId={cid} />
@@ -269,29 +269,29 @@ export function ErrorBoundary() {
         <LinkingProvider value={LinkLibrary}>
           <Toast.Provider toastDuration={10000}>
             <RadixTooltip delayDuration={300}>
-              <div className="project-root">
+              <div className="nimbus-root">
                 {/* <Navigation user={getEmptyUser} /> */}
-                <section className="project-root__content">
-                  <div className="project-root__side-containers" />
-                  <div className="project-root__middle-container">
-                    <div className="project-error">
+                <section className="nimbus-root__content">
+                  <div className="nimbus-root__side-containers" />
+                  <div className="nimbus-root__middle-container">
+                    <div className="nimbus-error">
                       <div
-                        className="project-error__glitch"
+                        className="nimbus-error__glitch"
                         data-text={isResponseError ? error.status : 500}
                       >
                         <span>{isResponseError ? error.status : 500}</span>
                       </div>
-                      <div className="project-error__description">
+                      <div className="nimbus-error__description">
                         {isResponseError ? error.data : "Internal server error"}
                       </div>
                       {!isResponseError && (
-                        <div className="project-error__flavor">
+                        <div className="nimbus-error__flavor">
                           Beep boop. Server something error happens.
                         </div>
                       )}
                     </div>
                   </div>
-                  <div className="project-root__side-containers"></div>
+                  <div className="nimbus-root__side-containers"></div>
                 </section>
                 <Footer />
               </div>
diff --git a/apps/cyberstorm-remix/app/settings/teams/Teams.tsx b/apps/cyberstorm-remix/app/settings/teams/Teams.tsx
index ea6660694..c2bfb6bec 100644
--- a/apps/cyberstorm-remix/app/settings/teams/Teams.tsx
+++ b/apps/cyberstorm-remix/app/settings/teams/Teams.tsx
@@ -62,10 +62,10 @@ export default function Teams() {
       <BreadCrumbs>
         <CyberstormLink linkId="Teams">Teams</CyberstormLink>
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <PageHeader title="Teams" />
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <SettingItem
           title="Teams"
           description="Manage your teams"
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css b/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css
index f042799a6..4da2f8775 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css
@@ -46,7 +46,7 @@
 }
 
 .button:not(.active, :disabled):hover > .icon {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .label {
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css
index 160960bb7..3cd1135d5 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css
@@ -41,7 +41,7 @@
 }
 
 .description {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css
index f183fb271..9bd4f4be1 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css
@@ -16,7 +16,7 @@
 }
 
 .description {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/teamSettings.tsx b/apps/cyberstorm-remix/app/settings/teams/team/teamSettings.tsx
index c96229d4f..39909781f 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/teamSettings.tsx
+++ b/apps/cyberstorm-remix/app/settings/teams/team/teamSettings.tsx
@@ -53,10 +53,10 @@ export default function Community() {
   const currentTab = location.pathname.endsWith("/settings")
     ? "settings"
     : location.pathname.endsWith("/members")
-    ? "members"
-    : location.pathname.endsWith("/service-accounts")
-    ? "service-accounts"
-    : "profile";
+      ? "members"
+      : location.pathname.endsWith("/service-accounts")
+        ? "service-accounts"
+        : "profile";
 
   return (
     <>
@@ -64,12 +64,12 @@ export default function Community() {
         <CyberstormLink linkId="Teams">Teams</CyberstormLink>
         {team.name}
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <div className={styles.header}>
           <PageHeader title="Teams" />
         </div>
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <div className={styles.teamContainer}>
           <div className={tabsStyles.root}>
             <div className={tabsStyles.buttons}>
diff --git a/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css b/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
index e919e8d0b..cb394239d 100644
--- a/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
+++ b/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
@@ -78,7 +78,7 @@
 }
 
 .connectedAsDescription {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-lg);
   line-height: 1;
diff --git a/apps/cyberstorm-remix/app/settings/user/Settings.tsx b/apps/cyberstorm-remix/app/settings/user/Settings.tsx
index 40d60db58..188576f5d 100644
--- a/apps/cyberstorm-remix/app/settings/user/Settings.tsx
+++ b/apps/cyberstorm-remix/app/settings/user/Settings.tsx
@@ -35,12 +35,12 @@ export default function Community() {
       <BreadCrumbs>
         <CyberstormLink linkId="Settings">Settings</CyberstormLink>
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <div className={styles.header}>
           <PageHeader title="Settings" />
         </div>
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <div className={styles.tabContent}>
           <div className={tabsStyles.root}>
             <div className={tabsStyles.buttons}>
diff --git a/apps/cyberstorm-remix/app/settings/user/Tabs.module.css b/apps/cyberstorm-remix/app/settings/user/Tabs.module.css
index f042799a6..4da2f8775 100644
--- a/apps/cyberstorm-remix/app/settings/user/Tabs.module.css
+++ b/apps/cyberstorm-remix/app/settings/user/Tabs.module.css
@@ -46,7 +46,7 @@
 }
 
 .button:not(.active, :disabled):hover > .icon {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .label {
diff --git a/apps/cyberstorm-remix/app/styles/error.css b/apps/cyberstorm-remix/app/styles/error.css
index ae6e07eca..e672d88c6 100644
--- a/apps/cyberstorm-remix/app/styles/error.css
+++ b/apps/cyberstorm-remix/app/styles/error.css
@@ -1,5 +1,5 @@
-@layer project-layout {
-  .project-error {
+@layer nimbus-layout {
+  .nimbus-error {
     display: flex;
     flex-direction: column;
     gap: var(--space-32);
@@ -10,20 +10,20 @@
     --glitch-color-2: var(--old--color-accent-pink-50);
   }
 
-  .project-error__description {
-    color: var(--color-text--accent);
+  .nimbus-error__description {
+    color: var(--color-text-accent);
     font-weight: var(--font-weight-semibold);
     line-height: 1;
   }
 
-  .project-error__flavor {
+  .nimbus-error__flavor {
     font-weight: var(--font-weight-bold);
     font-size: var(--space-32);
     line-height: 1;
     text-align: center;
   }
 
-  .project-error__glitch {
+  .nimbus-error__glitch {
     position: relative;
     margin-top: var(--space-32);
     margin-bottom: var(--space-48);
@@ -32,35 +32,37 @@
     line-height: 1;
   }
 
-  .project-error__glitch::before,
-  .project-error__glitch::after {
+  .nimbus-error__glitch::before,
+  .nimbus-error__glitch::after {
     position: absolute;
     z-index: -1;
     width: 110%;
     content: attr(data-text);
   }
 
-  .project-error__glitch::before {
+  .nimbus-error__glitch::before {
     top: 10px;
     left: 15px;
     color: var(--glitch-color-1);
-    animation: project-error-paths 5s step-end infinite,
-      project-error-opacity 5s step-end infinite,
-      project-error-font 8s step-end infinite,
-      project-error-movement 10s step-end infinite;
+    animation:
+      nimbus-error-paths 5s step-end infinite,
+      nimbus-error-opacity 5s step-end infinite,
+      nimbus-error-font 8s step-end infinite,
+      nimbus-error-movement 10s step-end infinite;
   }
 
-  .project-error__glitch::after {
+  .nimbus-error__glitch::after {
     top: 5px;
     left: -10px;
     color: var(--glitch-color-2);
-    animation: project-error-paths 5s step-end infinite,
-      project-error-opacity 5s step-end infinite,
-      project-error-font 7s step-end infinite,
-      project-error-movement 8s step-end infinite;
+    animation:
+      nimbus-error-paths 5s step-end infinite,
+      nimbus-error-opacity 5s step-end infinite,
+      nimbus-error-font 7s step-end infinite,
+      nimbus-error-movement 8s step-end infinite;
   }
 
-  @keyframes project-error-paths {
+  @keyframes nimbus-error-paths {
     0% {
       clip-path: polygon(
         0% 43%,
@@ -312,7 +314,7 @@
     }
   }
 
-  @keyframes project-error-movement {
+  @keyframes nimbus-error-movement {
     0% {
       top: 0;
       left: -20px;
@@ -339,7 +341,7 @@
     }
   }
 
-  @keyframes project-error-opacity {
+  @keyframes nimbus-error-opacity {
     0% {
       opacity: 0.1;
     }
@@ -374,7 +376,7 @@
     }
   }
 
-  @keyframes project-error-font {
+  @keyframes nimbus-error-font {
     0% {
       color: var(--glitch-color-1);
       font-weight: 100;
@@ -401,7 +403,7 @@
     }
   }
 
-  .project-error__glitch span {
+  .nimbus-error__glitch span {
     animation: paths 5s step-end infinite;
   }
 }
diff --git a/apps/cyberstorm-remix/app/styles/index.css b/apps/cyberstorm-remix/app/styles/index.css
index 23ba7001a..fa4c5c506 100644
--- a/apps/cyberstorm-remix/app/styles/index.css
+++ b/apps/cyberstorm-remix/app/styles/index.css
@@ -1,4 +1,4 @@
-@layer utils, components, colors, theme, theme-components, project-layout, project-overrides;
+@layer utils, components, colors, theme, theme-components, nimbus-layout, nimbus-overrides;
 
 @import "layout.css";
 @import "overrides.css";
diff --git a/apps/cyberstorm-remix/app/styles/layout.css b/apps/cyberstorm-remix/app/styles/layout.css
index 1b0cc5638..804290be1 100644
--- a/apps/cyberstorm-remix/app/styles/layout.css
+++ b/apps/cyberstorm-remix/app/styles/layout.css
@@ -1,17 +1,17 @@
-@layer project-layout {
+@layer nimbus-layout {
   :root {
     /* Header dimensions */
     --header-height: 3.5rem;
     --content-padding-top-desktop: 2rem;
   }
 
-  .project-root {
+  .nimbus-root {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
   }
 
-  .project-root__content {
+  .nimbus-root__content {
     display: flex;
     flex: 1;
     flex-direction: row;
@@ -23,7 +23,7 @@
     padding: var(--content-padding-top-desktop) 1rem 6rem;
   }
 
-  .project-root__middle-container {
+  .nimbus-root__middle-container {
     position: relative;
     display: flex;
     flex: 1 1 auto;
@@ -33,7 +33,7 @@
     max-width: 83.5rem;
   }
 
-  .project-root__side-containers {
+  .nimbus-root__side-containers {
     position: sticky;
     top: var(--header-height);
     display: flex;
@@ -45,55 +45,61 @@
     padding-top: 1rem;
   }
 
-  .project-root__page-header {
+  .nimbus-root__page-header {
     padding: 0;
   }
 
-  .project-root__page-body {
+  .nimbus-root__page-body {
     display: flex;
     flex-direction: column;
   }
 
-  .project-root__layout-sidebar {
+  .nimbus-root__layout-sidebar {
     display: flex;
     flex-direction: column;
     gap: 2rem;
   }
 
-  .project-root__main {
+  .nimbus-root__main {
     display: flex;
     flex-direction: column;
     gap: 2rem;
   }
 
   @media (width >= 60rem) {
-    .project-root__layout-sidebar {
+    .nimbus-root__layout-sidebar {
       flex-flow: row wrap;
     }
 
-    .project-root__sidebar {
+    .nimbus-root__sidebar {
       flex: 0 1 16rem;
     }
 
-    .project-root__main {
+    .nimbus-root__main {
       flex: 1;
     }
 
-    .project-root__fullwidth {
+    .nimbus-root__fullwidth {
       flex: 0 0 100%;
     }
 
-    .project-root__page-header {
+    .nimbus-root__page-header {
       padding: 2.5rem 0;
     }
 
-    .project-root__middle-container {
+    .nimbus-root__middle-container {
       gap: 0;
     }
   }
 
   @media (width <= 92.125rem) {
-    .project-root__side-containers {
+    .nimbus-root__side-containers {
+      display: none;
+    }
+  }
+
+  @media (width <= 40rem) {
+    .nimbus-root__breadcrumbs {
       display: none;
     }
   }
diff --git a/apps/cyberstorm-remix/app/styles/overrides.css b/apps/cyberstorm-remix/app/styles/overrides.css
index b6a5cb70e..29a00512f 100644
--- a/apps/cyberstorm-remix/app/styles/overrides.css
+++ b/apps/cyberstorm-remix/app/styles/overrides.css
@@ -1,5 +1,5 @@
-@layer project-overrides {
+@layer nimbus-overrides {
   :root {
-    --project-not-used-token: black;
+    --nimbus-not-used-token: black;
   }
 }
diff --git a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx
index 3d127828b..3ff917a95 100644
--- a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx
+++ b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx
@@ -75,10 +75,10 @@ export default function ManifestValidator() {
           Manifest Validator
         </CyberstormLink>
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <PageHeader title="Manifest Validator" />
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <SettingItem
           title="Manifest Validator"
           description="Select a team to validate a package"
diff --git a/apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx b/apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx
index 2564be04e..408f2fdf0 100644
--- a/apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx
+++ b/apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx
@@ -60,10 +60,10 @@ export default function MarkdownPreview() {
           Markdown Preview
         </CyberstormLink>
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <PageHeader title="Markdown Preview" />
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <div className={styles.root}>
           <SettingItem
             title="Markdown input"
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 9474d1cee..d49c64969 100644
--- a/apps/cyberstorm-remix/app/tools/package-format-docs/packageFormatDocs.tsx
+++ b/apps/cyberstorm-remix/app/tools/package-format-docs/packageFormatDocs.tsx
@@ -18,10 +18,10 @@ export default function PackageFormatDocs() {
           Package Format Docs
         </CyberstormLink>
       </BreadCrumbs>
-      <header className="project-root__page-header">
+      <header className="nimbus-root__page-header">
         <PageHeader title="Package Format Docs" />
       </header>
-      <main className="project-root__main">
+      <main className="nimbus-root__main">
         <div className={styles.root}>
           <p>
             A valid package is a zip file that contains the following files:
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
index 5a02413db..0a9802cd6 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
@@ -9,7 +9,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./Navigation.module.css";
 import {
   Menu,
-  LinkButton,
   NewLink,
   NewIcon,
   Avatar,
@@ -54,7 +53,7 @@ export function Navigation(props: {
               <ThunderstoreLogo />
             </NewIcon>
           </NewLink>
-          <LinkButton
+          <NewButton
             primitiveType="cyberstormLink"
             linkId="Communities"
             csSize="big"
@@ -62,11 +61,11 @@ export function Navigation(props: {
             csModifiers={["ghost"]}
           >
             Communities
-          </LinkButton>
+          </NewButton>
           <DevelopersDropDown />
         </nav>
         <div className={styles.headerRightSide}>
-          <LinkButton
+          <NewButton
             primitiveType="link"
             href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
             csSize="medium"
@@ -75,7 +74,7 @@ export function Navigation(props: {
             aria-label="Get Thunderstore Mod Manager App"
           >
             Get App
-          </LinkButton>
+          </NewButton>
           {/* Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint */}
           {/* {hydrationCheck && currentUser ? (
             <DesktopUserDropdown user={currentUser} />
diff --git a/apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx b/apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx
index e35077367..3f999bb45 100644
--- a/apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx
@@ -15,9 +15,10 @@ const defaultCommunity = {
   name: "Risk of Rain 2",
   identifier: "",
   description: "",
+  wiki_url: "",
   discord_url: "",
   datetime_created: "",
-  background_image_url: "",
+  nimbus_background_image_url: "",
   cover_image_url: "",
   icon_url: "",
   total_download_count: 0,
diff --git a/apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
index 847700399..1490773f6 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
@@ -20,129 +20,184 @@ const meta = {
 const defaultArgs = {};
 
 const Template: StoryFn<typeof NewButton> = () => {
-  const Buttons = ButtonSizesList.map((size) => {
-    const variantBlock = ButtonVariantsList.map((variant) => {
-      const modifierBlock = ButtonModifiersList.map((modifier) => {
+  function genButtons(isLink: boolean) {
+    const Buttons = ButtonSizesList.map((size) => {
+      const variantBlock = ButtonVariantsList.map((variant) => {
+        const modifierBlock = ButtonModifiersList.map((modifier) => {
+          return isLink ? (
+            <NewButton
+              primitiveType={"link"}
+              href="https://example.com"
+              key={`${size}-${variant}-${modifier}`}
+              csVariant={variant}
+              csSize={size}
+              csModifiers={[modifier]}
+            >
+              {size}-{variant}-{modifier}
+              <NewIcon csMode={"inline"} noWrapper>
+                <FontAwesomeIcon icon={faChevronDown} />
+              </NewIcon>
+            </NewButton>
+          ) : (
+            <NewButton
+              key={`${size}-${variant}-${modifier}`}
+              csVariant={variant}
+              csSize={size}
+              csModifiers={[modifier]}
+            >
+              {size}-{variant}-{modifier}
+              <NewIcon csMode={"inline"} noWrapper>
+                <FontAwesomeIcon icon={faChevronDown} />
+              </NewIcon>
+            </NewButton>
+          );
+        });
         return (
-          <NewButton
-            key={`${size}-${variant}-${modifier}`}
-            csVariant={variant}
-            csSize={size}
-            csModifiers={[modifier]}
+          <div
+            key={`${size}-${variant}`}
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: "0.5rem",
+            }}
           >
-            {size}-{variant}-{modifier}
-            <NewIcon csMode={"inline"} noWrapper>
-              <FontAwesomeIcon icon={faChevronDown} />
-            </NewIcon>
-          </NewButton>
+            {isLink ? (
+              <NewButton
+                primitiveType={"link"}
+                href="https://example.com"
+                key={`${size}-${variant}-noModifier`}
+                csVariant={variant}
+                csSize={size}
+              >
+                {size}-{variant}-noModifier
+                <NewIcon csMode={"inline"} noWrapper>
+                  <FontAwesomeIcon icon={faChevronDown} />
+                </NewIcon>
+              </NewButton>
+            ) : (
+              <NewButton
+                key={`${size}-${variant}-noModifier`}
+                csVariant={variant}
+                csSize={size}
+              >
+                {size}-{variant}-noModifier
+                <NewIcon csMode={"inline"} noWrapper>
+                  <FontAwesomeIcon icon={faChevronDown} />
+                </NewIcon>
+              </NewButton>
+            )}
+            {modifierBlock}
+          </div>
         );
       });
       return (
         <div
-          key={`${size}-${variant}`}
+          key={`${size}`}
           style={{
             display: "flex",
-            flexDirection: "row",
+            flexDirection: "column",
             gap: "0.5rem",
           }}
         >
-          <NewButton
-            key={`${size}-${variant}-noModifier`}
-            csVariant={variant}
-            csSize={size}
-          >
-            {size}-{variant}-noModifier
-            <NewIcon csMode={"inline"} noWrapper>
-              <FontAwesomeIcon icon={faChevronDown} />
-            </NewIcon>
-          </NewButton>
-          {modifierBlock}
+          {variantBlock}
         </div>
       );
     });
+
     return (
       <div
-        key={`${size}`}
         style={{
           display: "flex",
           flexDirection: "column",
           gap: "0.5rem",
         }}
       >
-        {variantBlock}
+        {Buttons}
       </div>
     );
-  });
+  }
 
-  const buttonOptions = (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.5rem",
-      }}
-    >
-      {Buttons}
-    </div>
-  );
-
-  const IconButtons = IconButtonSizesList.map((size) => {
-    const variantBlock = IconButtonVariantsList.map((variant) => {
-      const modifierBlock = IconButtonModifiersList.map((modifier) => {
+  function genIconButtons(isLink: boolean) {
+    const IconButtons = IconButtonSizesList.map((size) => {
+      const variantBlock = IconButtonVariantsList.map((variant) => {
+        const modifierBlock = IconButtonModifiersList.map((modifier) => {
+          return isLink ? (
+            <NewButton
+              primitiveType={"link"}
+              href="https://example.com"
+              key={`${size}-${variant}-${modifier}`}
+              csVariant={variant}
+              csSize={size}
+              csModifiers={[modifier]}
+              icon={faChevronDown}
+            />
+          ) : (
+            <NewButton
+              key={`${size}-${variant}-${modifier}`}
+              csVariant={variant}
+              csSize={size}
+              csModifiers={[modifier]}
+              icon={faChevronDown}
+            />
+          );
+        });
         return (
-          <NewButton
-            key={`${size}-${variant}-${modifier}`}
-            csVariant={variant}
-            csSize={size}
-            csModifiers={[modifier]}
-            icon={faChevronDown}
-          />
+          <div
+            key={`${size}-${variant}`}
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: "0.5rem",
+            }}
+          >
+            {isLink ? (
+              <NewButton
+                primitiveType={"link"}
+                href="https://example.com"
+                key={`${size}-${variant}-noModifier`}
+                csVariant={variant}
+                csSize={size}
+                icon={faChevronDown}
+              />
+            ) : (
+              <NewButton
+                key={`${size}-${variant}-noModifier`}
+                csVariant={variant}
+                csSize={size}
+                icon={faChevronDown}
+              />
+            )}
+
+            {modifierBlock}
+          </div>
         );
       });
       return (
         <div
-          key={`${size}-${variant}`}
+          key={`${size}`}
           style={{
             display: "flex",
-            flexDirection: "row",
+            flexDirection: "column",
             gap: "0.5rem",
           }}
         >
-          <NewButton
-            key={`${size}-${variant}-noModifier`}
-            csVariant={variant}
-            csSize={size}
-            icon={faChevronDown}
-          />
-          {modifierBlock}
+          {variantBlock}
         </div>
       );
     });
+
     return (
       <div
-        key={`${size}`}
         style={{
           display: "flex",
           flexDirection: "column",
           gap: "0.5rem",
         }}
       >
-        {variantBlock}
+        {IconButtons}
       </div>
     );
-  });
-
-  const iconButtonOptions = (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.5rem",
-      }}
-    >
-      {IconButtons}
-    </div>
-  );
+  }
 
   return (
     <div
@@ -153,8 +208,10 @@ const Template: StoryFn<typeof NewButton> = () => {
         gap: "0.5rem",
       }}
     >
-      {buttonOptions}
-      {iconButtonOptions}
+      {genButtons(false)}
+      {genIconButtons(false)}
+      {genButtons(true)}
+      {genIconButtons(true)}
     </div>
   );
 };
diff --git a/apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx
index b97f526e3..352f143fb 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx
@@ -15,9 +15,10 @@ const defaultCommunity = {
   name: "Risk of Rain 2",
   identifier: "",
   description: "",
+  wiki_url: "",
   discord_url: "",
   datetime_created: "",
-  background_image_url: "",
+  nimbus_background_image_url: "",
   cover_image_url: "",
   icon_url: "",
   total_download_count: 0,
diff --git a/apps/cyberstorm-storybook/stories/newComponents/LinkButton.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/LinkButton.stories.tsx
deleted file mode 100644
index fbaad0454..000000000
--- a/apps/cyberstorm-storybook/stories/newComponents/LinkButton.stories.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import { StoryFn, Meta } from "@storybook/react";
-import { LinkButton, NewIcon } from "@thunderstore/cyberstorm";
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-
-const meta = {
-  title: "LinkButton",
-  component: LinkButton,
-} as Meta<typeof LinkButton>;
-
-const defaultArgs = {};
-
-const Template: StoryFn<typeof LinkButton> = (args) => (
-  <div
-    style={{
-      display: "flex",
-      flexDirection: "row",
-      gap: "0.5rem",
-    }}
-  >
-    <div
-      style={{
-        width: "12rem",
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.5rem",
-      }}
-    >
-      <LinkButton {...args} primitiveType="link" href="https://example.com">
-        default
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        tooltipText="tooltip text"
-        {...args}
-        primitiveType="link"
-        href="https://example.com"
-      >
-        tooltipDefault
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="primary"
-        {...args}
-        primitiveType="link"
-        href="https://example.com"
-      >
-        primary
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="secondary"
-        csModifiers={["ghost"]}
-        {...args}
-        primitiveType="link"
-        href="https://example.com"
-      >
-        tertiary
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="accent"
-        {...args}
-        primitiveType="link"
-        href="https://example.com"
-      >
-        accent
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="success"
-        {...args}
-        primitiveType="link"
-        href="https://example.com"
-      >
-        success
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="warning"
-        {...args}
-        primitiveType="link"
-        href="https://example.com"
-      >
-        warning
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="danger"
-        {...args}
-        primitiveType="link"
-        href="https://example.com"
-      >
-        danger
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="special"
-        {...args}
-        primitiveType="link"
-        href="https://example.com"
-      >
-        specialGreen
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-    </div>
-    <div
-      style={{
-        width: "12rem",
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.5rem",
-      }}
-    >
-      <LinkButton {...args} primitiveType="cyberstormLink" linkId="Communities">
-        default
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        tooltipText="tooltip text"
-        {...args}
-        primitiveType="cyberstormLink"
-        linkId="Communities"
-      >
-        tooltipDefault
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="primary"
-        {...args}
-        primitiveType="cyberstormLink"
-        linkId="Communities"
-      >
-        primary
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="secondary"
-        csModifiers={["ghost"]}
-        {...args}
-        primitiveType="cyberstormLink"
-        linkId="Communities"
-      >
-        tertiary
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="accent"
-        {...args}
-        primitiveType="cyberstormLink"
-        linkId="Communities"
-      >
-        accent
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="success"
-        {...args}
-        primitiveType="cyberstormLink"
-        linkId="Communities"
-      >
-        success
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="warning"
-        {...args}
-        primitiveType="cyberstormLink"
-        linkId="Communities"
-      >
-        warning
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="danger"
-        {...args}
-        primitiveType="cyberstormLink"
-        linkId="Communities"
-      >
-        danger
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-      <LinkButton
-        csVariant="special"
-        {...args}
-        primitiveType="cyberstormLink"
-        linkId="Communities"
-      >
-        specialGreen
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </LinkButton>
-    </div>
-  </div>
-);
-
-const DefaultLinkButton = Template.bind({});
-DefaultLinkButton.args = defaultArgs;
-
-export { meta as default, DefaultLinkButton as LinkButtons };
diff --git a/package.json b/package.json
index cd5b9b68d..c24bdebaf 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "eslint-plugin-react": "^7.36.1",
     "globals": "^15.10.0",
     "plop": "^4.0.1",
-    "prettier": "^3.3.3",
+    "prettier": "3.1.0",
     "stylelint": "^16.9.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^36.0.1",
diff --git a/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css b/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css
index bc623cb5b..e52f5739f 100644
--- a/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css
@@ -12,7 +12,7 @@
 }
 
 .dialogText {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css b/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css
index cfc816cce..b91d89188 100644
--- a/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css
@@ -12,7 +12,7 @@
 }
 
 .dialogText {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css b/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css
index 8c1f64a7c..5cde564a9 100644
--- a/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css
@@ -12,7 +12,7 @@
 }
 
 .dialogText {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css b/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css
index a584c78a9..bf8d548e7 100644
--- a/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css
@@ -12,7 +12,7 @@
 }
 
 .dialogText {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css b/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css
index 5005218c3..ac0831cd9 100644
--- a/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css
@@ -12,7 +12,7 @@
 }
 
 .dialogText {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css b/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css
index 6f4f81b5c..e0d1c672a 100644
--- a/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css
@@ -12,7 +12,7 @@
 }
 
 .dialogText {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css b/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css
index a584c78a9..bf8d548e7 100644
--- a/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css
@@ -12,7 +12,7 @@
 }
 
 .dialogText {
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
diff --git a/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css b/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
index ffeddf005..a8e855a59 100644
--- a/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
@@ -78,7 +78,7 @@
 }
 
 .connectedAsDescription {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-lg);
   line-height: 1;
diff --git a/packages/cyberstorm-theme/src/components/Pagination/Pagination.css b/packages/cyberstorm-theme/src/components/Pagination/Pagination.css
new file mode 100644
index 000000000..49804dea1
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Pagination/Pagination.css
@@ -0,0 +1,44 @@
+@layer theme-components {
+  .ts-pagination {
+    --pagination-gap: var(--gap-xs);
+  }
+
+  /* VARIANTS STATELESS */
+  .ts-pagination__item {
+    --pagination-item-height: var(--space-36);
+    --pagination-item-padding: var(--space-8) var(--space-12);
+    --pagination-item-font-weight: var(--font-weight-regular);
+    --pagination-item-border-radius: var(--radius-md);
+    --pagination-item-font-size: var(--font-size-body-lg);
+    --pagination-item-text-color: var(--pagination-item-text-color--default);
+    --pagination-item-background: var(--pagination-item-bg-color--default);
+
+    &:hover {
+      --pagination-item-text-color: var(--pagination-item-text-color--hover);
+      --pagination-item-background: var(--pagination-item-bg-color--hover);
+    }
+
+    &:active,
+    &.ts-pagination__item--selected {
+      --pagination-item-text-color: var(--pagination-item-text-color--current);
+      --pagination-item-background: var(--pagination-item-bg-color--current);
+
+      &:hover {
+        --pagination-item-text-color: var(
+          --pagination-item-text-color--current
+        );
+        --pagination-item-background: var(--pagination-item-bg-color--current);
+      }
+    }
+  }
+
+  /* TOKENS */
+  :root {
+    --pagination-item-bg-color--current: hsl(256deg 60% 52%);
+    --pagination-item-bg-color--default: var(--color-surface-a5);
+    --pagination-item-bg-color--hover: var(--color-surface-a8);
+    --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);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Tag/Tag.css b/packages/cyberstorm-theme/src/components/Tag/Tag.css
index 397d6788f..c1b9578df 100644
--- a/packages/cyberstorm-theme/src/components/Tag/Tag.css
+++ b/packages/cyberstorm-theme/src/components/Tag/Tag.css
@@ -6,19 +6,19 @@
   }
 
   /* SIZES */
-  .ts-tag:where(.ts-size--small) {
-    --tag-gap: var(--gap-xxs);
+  .ts-tag:where(.ts-size--medium) {
+    --tag-gap: var(--tag-md-gap);
     --tag-padding-block: var(--tag-md-padding-block);
     --tag-padding-inline: var(--tag-md-padding-inline);
-    --tag-border-radius: 6px;
+    --tag-border-radius: var(--tag-md-border-radius);
     --tag-font-size: var(--tag-md-font-size);
   }
 
-  .ts-tag:where(.ts-size--medium) {
-    --tag-gap: var(--space-8);
+  .ts-tag:where(.ts-size--small) {
+    --tag-gap: var(--tag-xs-gap);
     --tag-padding-block: var(--tag-xs-padding-block);
     --tag-padding-inline: var(--tag-xs-padding-inline);
-    --tag-border-radius: var(--radius-md);
+    --tag-border-radius: var(--tag-xs-border-radius);
     --tag-font-size: var(--tag-xs-font-size);
   }
 
@@ -249,11 +249,15 @@
     --tag-light-yellow-bg-color--hover: var(--color-accent-yellow-8);
     --tag-light-yellow-text-color--default: var(--color-accent-yellow-1);
     --tag-light-yellow-text-color--hover: var(--color-accent-yellow-1);
+    --tag-md-border-radius: var(--radius-full);
+    --tag-md-font-size: var(--font-size-body-xs);
+    --tag-md-gap: var(--gap-xs);
     --tag-md-padding-block: var(--space-6);
     --tag-md-padding-inline: var(--space-8);
-    --tag-md-font-size: var(--font-size-body-sm);
+    --tag-xs-border-radius: var(--radius-full);
+    --tag-xs-font-size: var(--font-size-body-xs);
+    --tag-xs-gap: var(--gap-xxs);
     --tag-xs-padding-block: var(--space-4);
     --tag-xs-padding-inline: var(--space-6);
-    --tag-xs-font-size: var(--font-size-body-sm);
   }
 }
diff --git a/packages/cyberstorm-theme/src/index.tsx b/packages/cyberstorm-theme/src/index.tsx
index 1e8a5c3cd..6f9e7b4b9 100644
--- a/packages/cyberstorm-theme/src/index.tsx
+++ b/packages/cyberstorm-theme/src/index.tsx
@@ -14,3 +14,4 @@ import "./components/Tag/Tag.css";
 import "./components/Link/Link.css";
 import "./components/Image/Image.css";
 import "./components/AdContainer/AdContainer.css";
+import "./components/Pagination/Pagination.css";
diff --git a/packages/cyberstorm-theme/src/styles/colors.css b/packages/cyberstorm-theme/src/styles/colors.css
index a0b503bb6..1b15fa30b 100644
--- a/packages/cyberstorm-theme/src/styles/colors.css
+++ b/packages/cyberstorm-theme/src/styles/colors.css
@@ -13,7 +13,8 @@
     /* Misc */
     --color-crown: var(--color-accent-yellow-5);
     --animation-timing-1: cubic-bezier(0.16, 1, 0.3, 1);
-    --shadow-lg: 0 12px 24px 5px hsl(0deg 0 0% / 0.65);
+    --shadow-lg: 0px 0px 4px 0px rgb(0 0 0 / 0.4),
+      0px 6px 8px 0px rgb(0 0 0 / 0.5);
     --color-text-a--default: var(--color-cyber-green-7);
     --color-text-a--hover: var(--color-cyber-green-6);
 
diff --git a/packages/cyberstorm-theme/src/styles/fonts/HubotSans.ttf b/packages/cyberstorm-theme/src/styles/fonts/HubotSans.ttf
deleted file mode 100644
index 2b74a40d2..000000000
Binary files a/packages/cyberstorm-theme/src/styles/fonts/HubotSans.ttf and /dev/null differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/Inter.ttf b/packages/cyberstorm-theme/src/styles/fonts/Inter.ttf
deleted file mode 100644
index 1cb674b74..000000000
Binary files a/packages/cyberstorm-theme/src/styles/fonts/Inter.ttf and /dev/null differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/Sora.ttf b/packages/cyberstorm-theme/src/styles/fonts/Sora.ttf
deleted file mode 100644
index f3e34ded1..000000000
Binary files a/packages/cyberstorm-theme/src/styles/fonts/Sora.ttf and /dev/null differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Black.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Black.woff2
new file mode 100644
index 000000000..a3aaa8fcc
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Black.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-BlackItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-BlackItalic.woff2
new file mode 100644
index 000000000..368f88508
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-BlackItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Bold.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Bold.woff2
new file mode 100644
index 000000000..b143f6921
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Bold.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-BoldItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-BoldItalic.woff2
new file mode 100644
index 000000000..a0f88fd1e
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-BoldItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraBold.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraBold.woff2
new file mode 100644
index 000000000..289406b17
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraBold.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraBoldItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraBoldItalic.woff2
new file mode 100644
index 000000000..65b402ed2
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraBoldItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraLight.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraLight.woff2
new file mode 100644
index 000000000..d9c1ac4f7
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraLight.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraLightItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraLightItalic.woff2
new file mode 100644
index 000000000..55e9e35b3
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-ExtraLightItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Italic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Italic.woff2
new file mode 100644
index 000000000..16d62e33b
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Italic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Light.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Light.woff2
new file mode 100644
index 000000000..802d23325
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Light.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-LightItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-LightItalic.woff2
new file mode 100644
index 000000000..74d9aaa9c
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-LightItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Medium.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Medium.woff2
new file mode 100644
index 000000000..444b4a86b
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Medium.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-MediumItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-MediumItalic.woff2
new file mode 100644
index 000000000..9d9262231
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-MediumItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Regular.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Regular.woff2
new file mode 100644
index 000000000..af3a6d395
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-Regular.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-SemiBold.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-SemiBold.woff2
new file mode 100644
index 000000000..cb53b06e5
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-SemiBold.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-SemiBoldItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-SemiBoldItalic.woff2
new file mode 100644
index 000000000..013102798
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/HubotSans-SemiBoldItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/hubot-sans.css b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/hubot-sans.css
new file mode 100644
index 000000000..1324c6901
--- /dev/null
+++ b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/hubot-sans.css
@@ -0,0 +1,81 @@
+@layer utils {
+  @font-face {
+    font-weight: 400;
+    font-family: Hubot-Sans;
+    font-style: normal;
+    src: url("HubotSans-Regular.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 500;
+    font-family: Hubot-Sans;
+    font-style: normal;
+    src: url("HubotSans-Medium.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 600;
+    font-family: Hubot-Sans;
+    font-style: normal;
+    src: url("HubotSans-SemiBold.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 700;
+    font-family: Hubot-Sans;
+    font-style: normal;
+    src: url("HubotSans-Bold.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 800;
+    font-family: Hubot-Sans;
+    font-style: normal;
+    src: url("HubotSans-ExtraBold.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 400;
+    font-family: Hubot-Sans;
+    font-style: italic;
+    src: url("HubotSans-Italic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 500;
+    font-family: Hubot-Sans;
+    font-style: italic;
+    src: url("HubotSans-MediumItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 600;
+    font-family: Hubot-Sans;
+    font-style: italic;
+    src: url("HubotSans-SemiBoldItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 700;
+    font-family: Hubot-Sans;
+    font-style: italic;
+    src: url("HubotSans-BoldItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 800;
+    font-family: Hubot-Sans;
+    font-style: italic;
+    src: url("HubotSans-ExtraBoldItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+}
diff --git a/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/hubot-sansDeferred.css b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/hubot-sansDeferred.css
new file mode 100644
index 000000000..169fe20b3
--- /dev/null
+++ b/packages/cyberstorm-theme/src/styles/fonts/hubot-sans/hubot-sansDeferred.css
@@ -0,0 +1,49 @@
+@layer utils {
+  @font-face {
+    font-weight: 200;
+    font-family: Hubot-Sans;
+    font-style: normal;
+    src: url("HubotSans-ExtraLight.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 300;
+    font-family: Hubot-Sans;
+    font-style: normal;
+    src: url("HubotSans-Light.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 900;
+    font-family: Hubot-Sans;
+    font-style: normal;
+    src: url("HubotSans-Black.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 200;
+    font-family: Hubot-Sans;
+    font-style: italic;
+    src: url("HubotSans-ExtraLightItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 300;
+    font-family: Hubot-Sans;
+    font-style: italic;
+    src: url("HubotSans-LightItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 900;
+    font-family: Hubot-Sans;
+    font-style: italic;
+    src: url("HubotSans-BlackItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+}
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Black.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Black.woff2
new file mode 100644
index 000000000..18b35db75
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Black.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-BlackItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-BlackItalic.woff2
new file mode 100644
index 000000000..02c9d8ecc
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-BlackItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Bold.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Bold.woff2
new file mode 100644
index 000000000..0f1b15763
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Bold.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-BoldItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-BoldItalic.woff2
new file mode 100644
index 000000000..bc50f24c8
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-BoldItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraBold.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraBold.woff2
new file mode 100644
index 000000000..b1133688a
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraBold.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraBoldItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraBoldItalic.woff2
new file mode 100644
index 000000000..a5b76ca8d
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraBoldItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraLight.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraLight.woff2
new file mode 100644
index 000000000..1d77ae8d0
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraLight.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraLightItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraLightItalic.woff2
new file mode 100644
index 000000000..8c6849209
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ExtraLightItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Italic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Italic.woff2
new file mode 100644
index 000000000..4c24ce281
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Italic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Light.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Light.woff2
new file mode 100644
index 000000000..dbe61437a
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Light.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-LightItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-LightItalic.woff2
new file mode 100644
index 000000000..a40d04215
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-LightItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Medium.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Medium.woff2
new file mode 100644
index 000000000..0fd2ee737
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Medium.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-MediumItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-MediumItalic.woff2
new file mode 100644
index 000000000..96767155d
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-MediumItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Regular.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Regular.woff2
new file mode 100644
index 000000000..b8699af29
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Regular.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-SemiBold.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-SemiBold.woff2
new file mode 100644
index 000000000..95c48b184
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-SemiBold.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-SemiBoldItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-SemiBoldItalic.woff2
new file mode 100644
index 000000000..ddfe19e83
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-SemiBoldItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Thin.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Thin.woff2
new file mode 100644
index 000000000..07909608c
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-Thin.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ThinItalic.woff2 b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ThinItalic.woff2
new file mode 100644
index 000000000..a7bf21380
Binary files /dev/null and b/packages/cyberstorm-theme/src/styles/fonts/inter/Inter-ThinItalic.woff2 differ
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/inter.css b/packages/cyberstorm-theme/src/styles/fonts/inter/inter.css
new file mode 100644
index 000000000..def8e6fbb
--- /dev/null
+++ b/packages/cyberstorm-theme/src/styles/fonts/inter/inter.css
@@ -0,0 +1,81 @@
+@layer utils {
+  @font-face {
+    font-weight: 400;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-Regular.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 500;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-Medium.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 600;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-SemiBold.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 700;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-Bold.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 800;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-ExtraBold.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 400;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-Italic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 500;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-MediumItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 600;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-SemiBoldItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 700;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-BoldItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 800;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-ExtraBoldItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+}
diff --git a/packages/cyberstorm-theme/src/styles/fonts/inter/interDeferred.css b/packages/cyberstorm-theme/src/styles/fonts/inter/interDeferred.css
new file mode 100644
index 000000000..5da1172d2
--- /dev/null
+++ b/packages/cyberstorm-theme/src/styles/fonts/inter/interDeferred.css
@@ -0,0 +1,65 @@
+@layer utils {
+  @font-face {
+    font-weight: 100;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-Thin.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 200;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-ExtraLight.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 300;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-Light.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 900;
+    font-family: Inter;
+    font-style: normal;
+    src: url("Inter-Black.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 100;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-ThinItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 200;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-ExtraLightItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 300;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-LightItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-weight: 900;
+    font-family: Inter;
+    font-style: italic;
+    src: url("Inter-BlackItalic.woff2") format("woff2");
+    font-display: swap;
+  }
+}
diff --git a/packages/cyberstorm-theme/src/styles/typography.css b/packages/cyberstorm-theme/src/styles/typography.css
index d546f9c6e..20619a4fa 100644
--- a/packages/cyberstorm-theme/src/styles/typography.css
+++ b/packages/cyberstorm-theme/src/styles/typography.css
@@ -1,3 +1,8 @@
+@import "./fonts/inter/inter.css";
+@import "./fonts/inter/interDeferred.css";
+@import "./fonts/hubot-sans/hubot-sans.css";
+@import "./fonts/hubot-sans/hubot-sansDeferred.css";
+
 @layer utils {
   :root {
     --line-height-auto: normal;
@@ -22,7 +27,10 @@
     --font-family--hubot: hubot-sans, sans-serif;
 
     font-synthesis: none;
-    font-feature-settings: "liga" 1, "calt" 1; /* workaround for bug in Chrome, dunno if still present or not */
+    font-feature-settings:
+      "liga" 1,
+      "calt" 1; /* workaround for bug in Chrome, dunno if still present or not */
+
     scrollbar-color: var(--color-surface-8) var(--color-surface-1);
 
     --font-body: normal var(--font-size-body-lg) var(--font-family--inter);
@@ -48,22 +56,4 @@
     color: var(--color-text-a--hover);
     text-decoration: underline;
   }
-
-  @font-face {
-    font-weight: 100 1000;
-    font-family: Sora;
-    src: url("./fonts/Sora.ttf") format("truetype-variations");
-  }
-
-  @font-face {
-    font-weight: 100 1000;
-    font-family: Inter;
-    src: url("./fonts/Inter.ttf") format("truetype-variations");
-  }
-
-  @font-face {
-    font-weight: 200 900;
-    font-family: Hubot-Sans;
-    src: url("./fonts/HubotSans.ttf") format("truetype-variations");
-  }
 }
diff --git a/packages/cyberstorm/src/components/Button/Button.module.css b/packages/cyberstorm/src/components/Button/Button.module.css
index 1be521d45..70d01952d 100644
--- a/packages/cyberstorm/src/components/Button/Button.module.css
+++ b/packages/cyberstorm/src/components/Button/Button.module.css
@@ -220,7 +220,7 @@
 
 .button__transparentDanger {
   --bg-color: transparent;
-  --text-color: var(--color-text--accent);
+  --text-color: var(--color-text-accent);
 }
 
 .button__transparentDanger:hover {
@@ -230,7 +230,7 @@
 
 .button__transparentTertiary {
   --bg-color: transparent;
-  --text-color: var(--color-text--tertiary);
+  --text-color: var(--color-text-tertiary);
 }
 
 .button__transparentTertiary:hover {
@@ -248,12 +248,12 @@
 }
 
 .button__transparentAccent {
-  --text-color: var(--color-text--accent);
+  --text-color: var(--color-text-accent);
   --bg-color: transparent;
 }
 
 .button__transparentAccent:hover {
-  --text-color: var(--color-text--accent);
+  --text-color: var(--color-text-accent);
   --bg-color: var(--old--color-surface-7);
 }
 
diff --git a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css b/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css
deleted file mode 100644
index e80689bc5..000000000
--- a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.root {
-  display: block;
-}
-
-.text {
-  overflow: hidden;
-  color: var(--color-text--secondary);
-  font-size: var(--font-size-body-xxxxl);
-  line-height: var(--line-height--l);
-  white-space: pre-wrap;
-  text-overflow: ellipsis;
-}
-
-.opened {
-  white-space: normal;
-}
-
-@media (width <= 30rem) {
-  .text {
-    font-size: var(--font-size-body-md);
-    line-height: var(--line-height--s);
-  }
-}
-
-.show {
-  color: var(--color-text--accent);
-  font-weight: var(--font-weight-bold);
-  font-size: 0.875rem;
-  line-height: normal;
-  background-color: transparent;
-}
diff --git a/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css b/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css
index b9bdef679..4535e42bc 100644
--- a/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css
+++ b/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css
@@ -1,6 +1,6 @@
 .copy {
   all: unset;
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .root:hover .copy {
diff --git a/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css b/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css
index 250b29c54..737b4db51 100644
--- a/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css
+++ b/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css
@@ -10,7 +10,7 @@
   cursor: pointer;
 
   --text-color: var(--color-text--default);
-  --icon-color: var(--color-text--accent);
+  --icon-color: var(--color-text-accent);
 }
 
 .root:hover {
diff --git a/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css b/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css
index 5c89ae9b7..8f934275d 100644
--- a/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css
+++ b/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css
@@ -14,5 +14,5 @@
 
 .label {
   flex-shrink: 0;
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
 }
diff --git a/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css b/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css
index c6e7eb69d..38d4f868b 100644
--- a/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css
+++ b/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css
@@ -34,11 +34,11 @@
 }
 
 .metaItem__accent {
-  --text-color: var(--color-text--accent);
+  --text-color: var(--color-text-accent);
 }
 
 .metaItem__tertiary {
-  --text-color: var(--color-text--tertiary);
+  --text-color: var(--color-text-tertiary);
 }
 
 .metaItem__medium {
diff --git a/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css b/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css
index f84e19c9d..0c2e57e4e 100644
--- a/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css
+++ b/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css
@@ -6,7 +6,7 @@
   justify-content: flex-end;
   width: auto;
   min-height: 6rem;
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .selected {
@@ -21,7 +21,7 @@
   flex-direction: column;
   width: auto;
   height: 2.75rem;
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .inputContainer {
@@ -60,7 +60,7 @@
 }
 
 .input::placeholder {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .inputContainer[data-color="red"] {
diff --git a/packages/cyberstorm/src/components/NewTabs/Tabs.module.css b/packages/cyberstorm/src/components/NewTabs/Tabs.module.css
index f042799a6..4da2f8775 100644
--- a/packages/cyberstorm/src/components/NewTabs/Tabs.module.css
+++ b/packages/cyberstorm/src/components/NewTabs/Tabs.module.css
@@ -46,7 +46,7 @@
 }
 
 .button:not(.active, :disabled):hover > .icon {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .label {
diff --git a/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css b/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css
index d1723b7b8..dfced0bc5 100644
--- a/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css
+++ b/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css
@@ -12,7 +12,7 @@
 .root:focus-within,
 .root:hover {
   background-color: #23234d;
-  box-shadow: 0 12px 24px 5px rgb(0 0 0 / 0.65);
+  box-shadow: var(--shadow-lg);
 }
 
 .imageWrapper {
@@ -87,14 +87,14 @@
 
 .author_prefix {
   padding-right: var(--space-4);
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 /* Styles for PackageCard's description */
 .description {
   display: -webkit-box;
   overflow: hidden;
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font: var(--font-body);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-lg);
@@ -106,7 +106,7 @@
 
 /* Styles for PackageCard's "Last updated" info */
 .lastUpdated {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font: var(--font-body);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-md);
diff --git a/packages/cyberstorm/src/components/PackageCard/PackageCard.tsx b/packages/cyberstorm/src/components/PackageCard/PackageCard.tsx
index 5b4a684fc..5da3790ec 100644
--- a/packages/cyberstorm/src/components/PackageCard/PackageCard.tsx
+++ b/packages/cyberstorm/src/components/PackageCard/PackageCard.tsx
@@ -129,7 +129,7 @@ function getPackageFlags(packageData: PackageListing) {
   if (isNew) {
     flagList.push(
       <Tag
-        key="flag_nsfw"
+        key="flag_new"
         label="New"
         colorScheme="green"
         leftIcon={<FontAwesomeIcon icon={faBomb} />}
diff --git a/packages/cyberstorm/src/components/Pagination/Pagination.module.css b/packages/cyberstorm/src/components/Pagination/Pagination.module.css
index ece8075e1..a8be6f373 100644
--- a/packages/cyberstorm/src/components/Pagination/Pagination.module.css
+++ b/packages/cyberstorm/src/components/Pagination/Pagination.module.css
@@ -20,7 +20,7 @@
 
   padding: var(--space-8) var(--space-8);
   border-radius: var(--radius-md);
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
 
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height--18);
diff --git a/packages/cyberstorm/src/components/Pagination/Pagination.tsx b/packages/cyberstorm/src/components/Pagination/Pagination.tsx
index 595367bca..84b2d195c 100644
--- a/packages/cyberstorm/src/components/Pagination/Pagination.tsx
+++ b/packages/cyberstorm/src/components/Pagination/Pagination.tsx
@@ -1,13 +1,12 @@
 import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Dispatch, SetStateAction } from "react";
 import { classnames, range } from "../../utils/utils";
 import styles from "./Pagination.module.css";
 import { PaginationButton } from "./PaginationButton";
 
 export interface PaginationProps {
   currentPage: number;
-  onPageChange: Dispatch<SetStateAction<number>>;
+  onPageChange: (v: number) => void;
   totalCount: number;
   pageSize: number;
   disabled?: boolean;
diff --git a/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css b/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css
index 6f9c33ad2..3954f0b95 100644
--- a/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css
+++ b/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css
@@ -10,7 +10,7 @@
 
   padding: var(--space-8) var(--space-8);
   border-radius: var(--radius-md);
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   background-color: var(--bg-color);
 
   --bg-color: var(--color-surface-4);
diff --git a/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css b/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css
index f84e19c9d..0c2e57e4e 100644
--- a/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css
+++ b/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css
@@ -6,7 +6,7 @@
   justify-content: flex-end;
   width: auto;
   min-height: 6rem;
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .selected {
@@ -21,7 +21,7 @@
   flex-direction: column;
   width: auto;
   height: 2.75rem;
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .inputContainer {
@@ -60,7 +60,7 @@
 }
 
 .input::placeholder {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .inputContainer[data-color="red"] {
diff --git a/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css b/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
index 2f2e7830c..777eb0243 100644
--- a/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
+++ b/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
@@ -24,7 +24,7 @@
 }
 
 .leftColumnDescription {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
diff --git a/packages/cyberstorm/src/components/Table/Table.module.css b/packages/cyberstorm/src/components/Table/Table.module.css
index 6569a156a..c38c89560 100644
--- a/packages/cyberstorm/src/components/Table/Table.module.css
+++ b/packages/cyberstorm/src/components/Table/Table.module.css
@@ -98,7 +98,7 @@
   width: fit-content;
   margin: 0 var(--space-24) var(--space-16) var(--space-24);
   border-radius: var(--radius-md);
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
   font-weight: var(--font-weight-bold);
   font-size: var(--space-14);
   line-height: normal;
@@ -140,7 +140,7 @@
   display: flex;
   align-items: center;
   padding: var(--space-16) var(--space-24);
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height--l);
 }
@@ -172,7 +172,7 @@
   width: fit-content;
   margin: 0 var(--space-24) var(--space-8) var(--space-24);
   border-radius: var(--radius-md);
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
   font-weight: var(--font-weight-bold);
   font-size: var(--space-14);
   line-height: var(--line-height-lg);
@@ -210,7 +210,7 @@
   display: flex;
   align-items: center;
   padding: 0.425rem var(--space-24);
-  color: var(--color-text--secondary);
+  color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height--l);
 }
diff --git a/packages/cyberstorm/src/components/Tabs/TabsButton.module.css b/packages/cyberstorm/src/components/Tabs/TabsButton.module.css
index 73634082e..76dcb1cdd 100644
--- a/packages/cyberstorm/src/components/Tabs/TabsButton.module.css
+++ b/packages/cyberstorm/src/components/Tabs/TabsButton.module.css
@@ -32,7 +32,7 @@
 }
 
 .button__default:hover > .icon {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .button__default:hover {
diff --git a/packages/cyberstorm/src/components/Tag/Tag.module.css b/packages/cyberstorm/src/components/Tag/Tag.module.css
index c929e50af..d434d8bd2 100644
--- a/packages/cyberstorm/src/components/Tag/Tag.module.css
+++ b/packages/cyberstorm/src/components/Tag/Tag.module.css
@@ -20,7 +20,7 @@
   --text-color: var(--color-text--default);
   --bg-color: var(--color-surface-5);
   --border-color: var(--color-surface-9);
-  --icon-color: var(--color-text--tertiary);
+  --icon-color: var(--color-text-tertiary);
 }
 
 .label {
@@ -60,7 +60,7 @@
 
 .tag__borderless_removable {
   --border-color: transparent;
-  --text-color: var(--color-text--secondary);
+  --text-color: var(--color-text-secondary);
 
   text-transform: uppercase;
 }
@@ -107,7 +107,7 @@
 .tag__simple {
   --bg-color: var(--color-surface-4);
   --border-color: transparent;
-  --text-color: var(--color-text--tertiary);
+  --text-color: var(--color-text-tertiary);
 }
 
 .tag__success {
diff --git a/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css b/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css
index 78381bc65..9ce26bfd8 100644
--- a/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css
+++ b/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css
@@ -31,5 +31,5 @@
 }
 
 .root::placeholder {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
diff --git a/packages/cyberstorm/src/components/TextInput/TextInput.module.css b/packages/cyberstorm/src/components/TextInput/TextInput.module.css
index 045f65051..4dd5af019 100644
--- a/packages/cyberstorm/src/components/TextInput/TextInput.module.css
+++ b/packages/cyberstorm/src/components/TextInput/TextInput.module.css
@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   width: auto;
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .root > input {
@@ -42,7 +42,7 @@
 }
 
 .input::placeholder {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .input[data-color="red"] {
@@ -72,7 +72,7 @@
 .leftIcon {
   position: absolute;
   margin: var(--space-10) var(--space-16);
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
   line-height: normal;
   pointer-events: none;
 }
@@ -80,7 +80,7 @@
 .rightIcon {
   position: absolute;
   padding: var(--space-14) var(--space-16);
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .clearValueButton {
diff --git a/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css b/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css
index 7ce7f5073..1a8b706fa 100644
--- a/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css
+++ b/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css
@@ -28,5 +28,5 @@
 }
 
 .icon {
-  color: var(--color-text--tertiary);
+  color: var(--color-text-tertiary);
 }
diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts
index cf661385f..b82a160e9 100644
--- a/packages/cyberstorm/src/index.ts
+++ b/packages/cyberstorm/src/index.ts
@@ -72,7 +72,6 @@ export { CommunityCardSkeleton } from "./components/CommunityCard/CommunityCardS
 export { range } from "./utils/utils";
 export { SettingItem } from "./components/SettingItem/SettingItem";
 export { ImageWithFallback } from "./components/ImageWithFallback/ImageWithFallback";
-export { CollapsibleText } from "./components/CollapsibleText/CollapsibleText";
 export { SkeletonBox } from "./components/SkeletonBox/SkeletonBox";
 export { isNode, isRecord, isStringArray } from "./utils/type_guards";
 
@@ -105,8 +104,8 @@ export { Menu } from "./newComponents/Menu/Menu";
 export { Modal } from "./newComponents/Modal/Modal";
 export { Heading } from "./newComponents/Heading/Heading";
 export { CardCommunity } from "./newComponents/Card/CardCommunity/CardCommunity";
+export { CardPackage } from "./newComponents/Card/CardPackage/CardPackage";
 export { Link as NewLink } from "./newComponents/Link/Link/Link";
-export { LinkButton } from "./newComponents/Link/LinkButton/LinkButton";
 export { Button as NewButton } from "./newComponents/Button/Button";
 export { BreadCrumbs as NewBreadCrumbs } from "./newComponents/BreadCrumbs/BreadCrumbs";
 export { TextInput as NewTextInput } from "./newComponents/TextInput/TextInput";
@@ -116,6 +115,7 @@ export {
 } from "./newComponents/Select/Select";
 export { Icon as NewIcon } from "./newComponents/Icon/Icon";
 export { Tag as NewTag } from "./newComponents/Tag/Tag";
+export { Pagination as NewPagination } from "./newComponents/Pagination/Pagination";
 export {
   DropDown as NewDropDown,
   DropDownItem as NewDropDownItem,
diff --git a/packages/cyberstorm/src/newComponents/Button/Button.css b/packages/cyberstorm/src/newComponents/Button/Button.css
index 9d592929e..49a2742ed 100644
--- a/packages/cyberstorm/src/newComponents/Button/Button.css
+++ b/packages/cyberstorm/src/newComponents/Button/Button.css
@@ -18,6 +18,7 @@
     font-weight: var(--button-font-weight);
     font-size: var(--button-font-size);
     line-height: var(--button-line-height);
+    white-space: nowrap;
 
     text-align: center;
     text-decoration: none;
diff --git a/packages/cyberstorm/src/newComponents/Button/Button.tsx b/packages/cyberstorm/src/newComponents/Button/Button.tsx
index c388a1361..3ff4d56dd 100644
--- a/packages/cyberstorm/src/newComponents/Button/Button.tsx
+++ b/packages/cyberstorm/src/newComponents/Button/Button.tsx
@@ -5,6 +5,8 @@ import { classnames, componentClasses } from "../../utils/utils";
 import {
   ActionableButtonProps,
   Actionable,
+  ActionableCyberstormLinkProps,
+  ActionableLinkProps,
 } from "../../primitiveComponents/Actionable/Actionable";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -18,78 +20,97 @@ import {
   IconButtonSizes,
 } from "@thunderstore/cyberstorm-theme/src/components";
 
-interface ButtonProps extends Omit<ActionableButtonProps, "primitiveType"> {
+interface IButton {
   csVariant?: ButtonVariants;
   csSize?: ButtonSizes;
   csModifiers?: ButtonModifiers[];
 }
 
-interface IconButtonProps
-  extends Omit<ActionableButtonProps, "primitiveType" | "children"> {
+interface IIconButton {
   csVariant?: IconButtonVariants;
   csSize?: IconButtonSizes;
   csModifiers?: IconButtonModifiers[];
   icon: IconProp;
 }
 
-export type ButtonComponentProps =
-  | ({ icon?: false } & ButtonProps)
-  | ({ icon: IconProp } & IconButtonProps);
-
-// TODO: Add style support for disabled
-export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
-  (props: ButtonComponentProps, forwardedRef) => {
-    const { rootClasses, icon, ...forwardedProps } = props;
+interface ButtonButton extends IButton, ActionableButtonProps {}
+interface ButtonLinkButton extends IButton, ActionableLinkProps {}
+interface ButtonCyberstormLinkButton
+  extends IButton,
+    ActionableCyberstormLinkProps {}
 
-    if (icon) {
-      const {
-        csVariant = "primary",
-        csSize = "medium",
-        csModifiers,
-        ...fProps
-      } = forwardedProps as IconButtonProps;
+interface IconButtonButton extends IIconButton, ActionableButtonProps {}
+interface IconButtonLinkButton extends IIconButton, ActionableLinkProps {}
+interface IconButtonCyberstormLinkButton
+  extends IIconButton,
+    ActionableCyberstormLinkProps {}
 
-      return (
-        <Actionable
-          primitiveType="button"
-          {...fProps}
-          rootClasses={classnames(
-            "ts-iconbutton",
-            ...componentClasses(csVariant, csSize, csModifiers),
-            rootClasses
-          )}
-          ref={forwardedRef}
-        >
-          <NewIcon csMode="inline" noWrapper rootClasses="ts-iconbutton__icon">
-            <FontAwesomeIcon icon={icon} />
-          </NewIcon>
-        </Actionable>
-      );
-    }
+export type ButtonComponentProps =
+  | (Omit<ButtonButton, "primitiveType"> & {
+      icon?: false;
+      primitiveType?: "button";
+    })
+  | (ButtonLinkButton & { icon?: false; primitiveType: "link" })
+  | (ButtonCyberstormLinkButton & {
+      icon?: false;
+      primitiveType: "cyberstormLink";
+    })
+  | (Omit<IconButtonButton, "primitiveType"> & {
+      icon: IconProp;
+      primitiveType?: "button";
+    })
+  | (IconButtonLinkButton & { icon: IconProp; primitiveType: "link" })
+  | (IconButtonCyberstormLinkButton & {
+      icon: IconProp;
+      primitiveType: "cyberstormLink";
+    });
 
-    const {
-      children,
-      csVariant = "primary",
-      csSize = "medium",
-      csModifiers,
-      ...fProps
-    } = forwardedProps as ButtonProps;
+// TODO: Add style support for disabled
+export const Button = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  ButtonComponentProps
+>((props: ButtonComponentProps, forwardedRef) => {
+  const {
+    children,
+    rootClasses,
+    csVariant = "primary",
+    csSize = "medium",
+    csModifiers,
+    icon,
+    ...forwardedProps
+  } = props;
 
+  if (icon) {
     return (
       <Actionable
-        primitiveType="button"
-        {...fProps}
+        {...forwardedProps}
         rootClasses={classnames(
-          "ts-button",
+          "ts-iconbutton",
           ...componentClasses(csVariant, csSize, csModifiers),
           rootClasses
         )}
         ref={forwardedRef}
       >
-        {children}
+        <NewIcon csMode="inline" noWrapper rootClasses="ts-iconbutton__icon">
+          <FontAwesomeIcon icon={icon} />
+        </NewIcon>
       </Actionable>
     );
   }
-);
+
+  return (
+    <Actionable
+      {...forwardedProps}
+      rootClasses={classnames(
+        "ts-button",
+        ...componentClasses(csVariant, csSize, csModifiers),
+        rootClasses
+      )}
+      ref={forwardedRef}
+    >
+      {children}
+    </Actionable>
+  );
+});
 
 Button.displayName = "Button";
diff --git a/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.css b/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.css
new file mode 100644
index 000000000..9c85cb64a
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.css
@@ -0,0 +1,162 @@
+@layer components {
+  .ts-cardpackage {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+    border-radius: var(--radius-md);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-lg);
+    background: var(--color-surface-a4);
+  }
+
+  .ts-cardpackage:has(:focus-visible) {
+    border-radius: var(--radius-md);
+    outline: 0.2rem solid var(--color-cyber-green-5);
+    outline-offset: 0.5rem;
+  }
+
+  .ts-cardpackage > .ts-cardpackage__imagewrapper {
+    position: relative;
+    width: 100%;
+    padding-bottom: 100%;
+    overflow: hidden;
+    transition: var(--animation-duration-md);
+  }
+
+  .ts-cardpackage:hover .ts-cardpackage__imagewrapper {
+    filter: brightness(1.2);
+  }
+
+  .ts-cardpackage > .ts-cardpackage__imagewrapper > div {
+    transform-origin: bottom;
+  }
+
+  .ts-cardpackage:hover .ts-cardpackage__imagewrapper > div,
+  .ts-cardpackage:focus-within .ts-cardpackage__imagewrapper > div {
+    transform: scale(1.035);
+  }
+
+  .ts-cardpackage > .ts-cardpackage__content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    align-self: stretch;
+    height: 100%;
+    padding: 16px;
+  }
+
+  .ts-cardpackage__tag {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    flex-flow: row-reverse;
+    flex-wrap: wrap;
+    gap: var(--space-8);
+    margin: var(--space-8);
+  }
+
+  /* Title */
+  .ts-cardpackage__title {
+    width: 100%;
+
+    overflow: hidden;
+    color: var(--color-text--default);
+    font: var(--font-body);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-xxxxl);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    --link-color: var(--color-text-primary);
+  }
+
+  .ts-cardpackage__title:focus-visible {
+    outline: none !important;
+  }
+
+  /* Author */
+  .ts-cardpackage__author {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    color: var(--color-text-accent);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-body-md);
+    font-size: var(--font-size-body-sm);
+    line-height: 1;
+    text-decoration: none;
+  }
+
+  .ts-cardpackage__author__link {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .ts-cardpackage__author__prefix {
+    padding-right: var(--space-4);
+    color: var(--color-text-tertiary);
+  }
+
+  /* Description */
+  .ts-cardpackage__description {
+    display: -webkit-box;
+    width: 100%;
+    overflow: hidden;
+    color: var(--color-text-secondary);
+    font: var(--font-body);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-body-lg);
+    line-height: var(--line-height-lg);
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  /* Tags */
+  .ts-cardpackage__categoryWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-content: flex-start;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  /* Footer */
+  .ts-cardpackage__footer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    align-self: stretch;
+    margin-top: auto;
+    padding-top: 6px;
+  }
+
+  .ts-cardpackage__footer__metaItemWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px 24px;
+    align-content: center;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .ts-cardpackage__footer__metaitem {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    color: var(--color-text-accent);
+    font-size: var(--font-size-body-sm);
+  }
+
+  .ts-cardpackage__footer__updatetext {
+    color: var(--color-text-tertiary);
+    font-weight: 400;
+    font-size: var(--font-size-body-sm, 12px);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx b/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx
new file mode 100644
index 000000000..5dd399bb7
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx
@@ -0,0 +1,179 @@
+import {
+  faDownload,
+  faThumbTack,
+  faWarning,
+  faBomb,
+  faThumbsUp,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PackageListing } from "@thunderstore/dapper/types";
+
+import { numberWithSpaces, formatInteger } from "../../../utils/utils";
+import { NewLink, NewIcon, Image, NewTag } from "../../..";
+import { TooltipWrapper } from "../../../primitiveComponents/utils/utils";
+import "./CardPackage.css";
+
+interface Props {
+  packageData: PackageListing;
+}
+
+export function CardPackage(props: Props) {
+  const { packageData } = props;
+  const updateTimeDelta = Math.round(
+    (Date.now() - Date.parse(packageData.last_updated)) / 86400000
+  );
+  const isNew = updateTimeDelta < 3;
+
+  return (
+    <div className="ts-cardpackage">
+      {packageData.is_pinned ||
+      packageData.is_nsfw ||
+      packageData.is_deprecated ||
+      isNew ? (
+        <div className="ts-cardpackage__tag">
+          {packageData.is_pinned ? (
+            <NewTag csModifiers={["dark"]} csVariant="blue">
+              <NewIcon noWrapper csMode="inline">
+                <FontAwesomeIcon icon={faThumbTack} />
+              </NewIcon>
+              Pinned
+            </NewTag>
+          ) : null}
+          {packageData.is_nsfw ? (
+            <NewTag csModifiers={["dark"]} csVariant="yellow">
+              <NewIcon noWrapper csMode="inline">
+                <FontAwesomeIcon icon={faWarning} />
+              </NewIcon>
+              Deprecated
+            </NewTag>
+          ) : null}
+          {packageData.is_deprecated ? (
+            <NewTag csModifiers={["dark"]} csVariant="pink">
+              <NewIcon noWrapper csMode="inline">
+                <FontAwesomeIcon icon={faBomb} />
+              </NewIcon>
+              NSFW
+            </NewTag>
+          ) : null}
+          {isNew ? (
+            <NewTag csModifiers={["dark"]} csVariant="green">
+              <NewIcon noWrapper csMode="inline">
+                <FontAwesomeIcon icon={faBomb} />
+              </NewIcon>
+              New
+            </NewTag>
+          ) : null}
+        </div>
+      ) : undefined}
+      <NewLink
+        primitiveType="cyberstormLink"
+        tabIndex={-1}
+        linkId="Package"
+        community={packageData.community_identifier}
+        namespace={packageData.namespace}
+        package={packageData.name}
+        title={`${packageData.name} by ${packageData.namespace}`}
+      >
+        <Image
+          src={packageData.icon_url}
+          cardType="package"
+          rootClasses="ts-cardpackage__imagewrapper"
+          square
+        />
+      </NewLink>
+
+      <div className="ts-cardpackage__content">
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Package"
+          community={packageData.community_identifier}
+          namespace={packageData.namespace}
+          package={packageData.name}
+          rootClasses="ts-cardpackage__title"
+          title={packageData.name}
+        >
+          {packageData.name}
+        </NewLink>
+
+        <div className="ts-cardpackage__author">
+          <span className="ts-cardpackage__author__prefix">by</span>
+          <NewLink
+            primitiveType="cyberstormLink"
+            linkId="Team"
+            community={packageData.community_identifier}
+            team={packageData.namespace}
+            title={packageData.namespace}
+            rootClasses="ts-cardpackage__author__link"
+          >
+            {packageData.namespace}
+          </NewLink>
+        </div>
+
+        {packageData.description ? (
+          <p className="ts-cardpackage__description">
+            {packageData.description}
+          </p>
+        ) : null}
+
+        {packageData.categories.length ? (
+          <div className="ts-cardpackage__categoryWrapper">
+            {packageData.categories.map((c, index) => (
+              <NewTag
+                key={`category_${c}_${index}`}
+                csVariant="primary"
+                csSize="small"
+                csModifiers={["dark", "hoverable"]}
+              >
+                {c.name}
+              </NewTag>
+            ))}
+          </div>
+        ) : null}
+
+        <div className="ts-cardpackage__footer">
+          <div className="ts-cardpackage__footer__metaItemWrapper">
+            <TooltipWrapper
+              tooltipText={`${numberWithSpaces(
+                packageData.download_count
+              )} Downloads`}
+            >
+              <div className="ts-cardpackage__footer__metaitem">
+                <NewIcon csMode="inline" noWrapper>
+                  <FontAwesomeIcon icon={faDownload} />
+                </NewIcon>
+                {formatInteger(packageData.download_count)}
+              </div>
+            </TooltipWrapper>
+            {/* <TooltipWrapper
+              tooltipText={`Latest version: TODO ADD FIELD TO ENDPOINT`}
+            >
+              <div className="ts-cardpackage__footer__metaitem">
+                <NewIcon csMode="inline" noWrapper>
+                  <FontAwesomeIcon icon={faCodeBranch} />
+                </NewIcon>
+                TODO
+              </div>
+            </TooltipWrapper> */}
+            <TooltipWrapper
+              tooltipText={`${numberWithSpaces(
+                packageData.rating_count
+              )} Upvotes`}
+            >
+              <div className="ts-cardpackage__footer__metaitem">
+                <NewIcon csMode="inline" noWrapper>
+                  <FontAwesomeIcon icon={faThumbsUp} />
+                </NewIcon>
+                {formatInteger(packageData.rating_count)}
+              </div>
+            </TooltipWrapper>
+          </div>
+          <span className="ts-cardpackage__footer__updatetext">
+            Last updated: {updateTimeDelta} days ago
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CardPackage.displayName = "CardPackage";
diff --git a/packages/cyberstorm/src/newComponents/Image/Image.css b/packages/cyberstorm/src/newComponents/Image/Image.css
index d3e11842f..f7ae84635 100644
--- a/packages/cyberstorm/src/newComponents/Image/Image.css
+++ b/packages/cyberstorm/src/newComponents/Image/Image.css
@@ -1,5 +1,6 @@
 @layer components {
   .ts-image {
+    width: inherit;
     object-fit: cover;
     aspect-ratio: var(--aspect-ratio);
   }
@@ -24,12 +25,15 @@
     justify-content: center;
     border-radius: var(--radius-md);
     overflow: hidden;
-    color: var(--image__wrapper-color);
-    background-color: var(--image__wrapper-bg-color);
     transition: var(--animation-duration-sm) ease-out;
     aspect-ratio: var(--aspect-ratio);
   }
 
+  .ts-image__wrapper--noimage {
+    color: var(--image__wrapper-color);
+    background-color: var(--image__wrapper-bg-color);
+  }
+
   .ts-image__content {
     display: flex;
     align-items: center;
diff --git a/packages/cyberstorm/src/newComponents/Image/Image.tsx b/packages/cyberstorm/src/newComponents/Image/Image.tsx
index 95dbe8250..03ad02e0f 100644
--- a/packages/cyberstorm/src/newComponents/Image/Image.tsx
+++ b/packages/cyberstorm/src/newComponents/Image/Image.tsx
@@ -42,6 +42,7 @@ export const Image = React.forwardRef<HTMLDivElement, ImageProps>(
         primitiveType="window"
         rootClasses={classnames(
           "ts-image__wrapper",
+          src ? undefined : "ts-image__wrapper--noimage",
           ...componentClasses(csVariant, undefined, undefined),
           rootClasses,
           square ? "ts-image--issquare" : "ts-image--is3by4"
diff --git a/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx b/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx
index 35584a5ae..f25774d1d 100644
--- a/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx
+++ b/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx
@@ -25,7 +25,11 @@ export const Link = React.forwardRef<
     <Actionable
       {...forwardedProps}
       rootClasses={classnames(
-        csVariant === "primary" ? "ts-link ts-variant--primary" : "ts-link",
+        csVariant === "primary"
+          ? "ts-link ts-variant--primary"
+          : csVariant === "cyber"
+            ? "ts-link ts-variant--cyber"
+            : "ts-link",
         rootClasses
       )}
       ref={forwardedRef}
diff --git a/packages/cyberstorm/src/newComponents/Link/LinkButton/Button.css b/packages/cyberstorm/src/newComponents/Link/LinkButton/Button.css
deleted file mode 100644
index ebd9eae46..000000000
--- a/packages/cyberstorm/src/newComponents/Link/LinkButton/Button.css
+++ /dev/null
@@ -1,26 +0,0 @@
-@layer components {
-  .ts-button {
-    display: flex;
-    flex: none;
-    flex-direction: row;
-    gap: var(--button-gap);
-    align-items: center;
-
-    height: var(--button-height);
-
-    padding: var(--button-padding);
-
-    border: var(--button-border);
-    border-color: var(--button-border-color);
-    border-radius: var(--button-border-radius);
-    color: var(--button-text-color);
-
-    font-weight: var(--button-font-weight);
-    font-size: var(--button-font-size);
-    line-height: var(--button-line-height);
-
-    text-align: center;
-    background-color: var(--button-background-color);
-    user-select: none;
-  }
-}
diff --git a/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx b/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
deleted file mode 100644
index e643d0cb3..000000000
--- a/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  Actionable,
-  ActionableCyberstormLinkProps,
-  ActionableLinkProps,
-} from "../../../primitiveComponents/Actionable/Actionable";
-import React from "react";
-import { classnames, componentClasses } from "../../../utils/utils";
-import {
-  ButtonVariants,
-  ButtonSizes,
-  ButtonModifiers,
-} from "@thunderstore/cyberstorm-theme/src/components";
-
-interface LinkButtonProps extends ActionableLinkProps {
-  csVariant?: ButtonVariants;
-  csSize?: ButtonSizes;
-  csModifiers?: ButtonModifiers[];
-}
-
-interface CyberstormLinkButtonProps extends ActionableCyberstormLinkProps {
-  csVariant?: ButtonVariants;
-  csSize?: ButtonSizes;
-  csModifiers?: ButtonModifiers[];
-}
-
-// TODO: Add style support for disabled
-export const LinkButton = React.forwardRef<
-  HTMLAnchorElement,
-  LinkButtonProps | CyberstormLinkButtonProps
->((props: LinkButtonProps | CyberstormLinkButtonProps, forwardedRef) => {
-  const {
-    children,
-    rootClasses,
-    csVariant = "primary",
-    csSize = "meedium",
-    csModifiers,
-    ...forwardedProps
-  } = props;
-
-  return (
-    <Actionable
-      {...forwardedProps}
-      rootClasses={classnames(
-        "ts-button",
-        ...componentClasses(csVariant, csSize, csModifiers),
-        rootClasses
-      )}
-      ref={forwardedRef}
-    >
-      {children}
-    </Actionable>
-  );
-});
-
-LinkButton.displayName = "LinkButton";
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal.css b/packages/cyberstorm/src/newComponents/Modal/Modal.css
index 8db2b38b1..7501eeb37 100644
--- a/packages/cyberstorm/src/newComponents/Modal/Modal.css
+++ b/packages/cyberstorm/src/newComponents/Modal/Modal.css
@@ -6,6 +6,7 @@
     border: 1px solid var(--color-6);
     border-radius: var(--frame-modal-border-radius);
     background: var(--color-2);
+    box-shadow: var(--shadow-lg);
     transform: translate(-50%, -50%);
   }
 
diff --git a/packages/cyberstorm/src/newComponents/Pagination/Pagination.css b/packages/cyberstorm/src/newComponents/Pagination/Pagination.css
new file mode 100644
index 000000000..297b032f6
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Pagination/Pagination.css
@@ -0,0 +1,30 @@
+/* List */
+.ts-pagination {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--pagination-gap);
+  align-items: center;
+  justify-content: center;
+  list-style: none;
+}
+
+.ts-pagination--disabled {
+  pointer-events: none;
+}
+
+/* Item */
+.ts-pagination__item {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: var(--gap-xs);
+  align-items: center;
+  justify-content: center;
+  min-width: var(--pagination-item-height);
+  height: var(--pagination-item-height);
+  padding: var(--pagination-item-padding);
+
+  border-radius: var(--pagination-item-border-radius);
+  color: var(--pagination-item-text-color);
+  font-weight: var(--pagination-item-font-weight);
+  background: var(--pagination-item-background);
+}
diff --git a/packages/cyberstorm/src/newComponents/Pagination/Pagination.tsx b/packages/cyberstorm/src/newComponents/Pagination/Pagination.tsx
new file mode 100644
index 000000000..52dbf09c2
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Pagination/Pagination.tsx
@@ -0,0 +1,147 @@
+import "./Pagination.css";
+import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { classnames, range } from "../../utils/utils";
+import React from "react";
+import { Actionable } from "../../primitiveComponents/Actionable/Actionable";
+import { NewIcon } from "../..";
+
+export interface PaginationProps {
+  currentPage: number;
+  onPageChange: (v: number) => void;
+  totalCount: number;
+  pageSize: number;
+  siblingCount: number;
+}
+
+export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  (props: PaginationProps, forwardedRef) => {
+    const {
+      currentPage,
+      onPageChange,
+      totalCount,
+      pageSize,
+      siblingCount = 1,
+    } = props;
+
+    if (totalCount === 0) {
+      return null;
+    }
+
+    const totalPageCount = Math.ceil(
+      totalCount / (pageSize > 0 ? pageSize : 1)
+    );
+
+    const buttons = [];
+
+    const leftmostSibling = Math.max(currentPage - siblingCount, 1);
+    const rightmostSibling = Math.min(
+      currentPage + siblingCount,
+      totalPageCount
+    );
+
+    if (currentPage > 1) {
+      buttons.push(
+        <Actionable
+          key="page-previous"
+          primitiveType="button"
+          onClick={() => onPageChange(decreaseCurrentPage(currentPage))}
+          rootClasses="ts-pagination__item"
+        >
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </NewIcon>
+          Previous
+        </Actionable>
+      );
+    }
+    if (leftmostSibling > 1) {
+      buttons.push(
+        <Actionable
+          key="page-1"
+          primitiveType="button"
+          onClick={() => onPageChange(1)}
+          rootClasses="ts-pagination__item"
+        >
+          1
+        </Actionable>
+      );
+      buttons.push(
+        <span key="page-ellipsis-left" className="ts-pagination__item">
+          {"…"}
+        </span>
+      );
+    }
+
+    range(leftmostSibling, rightmostSibling).forEach((pageNumber) => {
+      buttons.push(
+        <Actionable
+          key={`page-${pageNumber}`}
+          primitiveType="button"
+          onClick={() => onPageChange(pageNumber)}
+          rootClasses={classnames(
+            "ts-pagination__item",
+            currentPage === pageNumber
+              ? "ts-pagination__item--selected"
+              : undefined
+          )}
+        >
+          {pageNumber}
+        </Actionable>
+      );
+    });
+
+    if (rightmostSibling < totalPageCount) {
+      buttons.push(
+        <span key="page-ellipsis-right" className="ts-pagination__item">
+          {"…"}
+        </span>
+      );
+      buttons.push(
+        <Actionable
+          key={`page-${totalPageCount}`}
+          primitiveType="button"
+          onClick={() => onPageChange(totalPageCount)}
+          rootClasses="ts-pagination__item"
+        >
+          {totalPageCount}
+        </Actionable>
+      );
+    }
+    if (currentPage !== totalPageCount) {
+      buttons.push(
+        <Actionable
+          key="page-next"
+          primitiveType="button"
+          onClick={() =>
+            onPageChange(increaseCurrentPage(currentPage, totalPageCount))
+          }
+          rootClasses="ts-pagination__item"
+        >
+          Next
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faArrowRight} />
+          </NewIcon>
+        </Actionable>
+      );
+    }
+
+    return (
+      <nav aria-label="Pagination" ref={forwardedRef} className="ts-pagination">
+        {buttons}
+      </nav>
+    );
+  }
+);
+
+Pagination.displayName = "Pagination";
+
+function decreaseCurrentPage(currentPage: number) {
+  const newPage = currentPage - 1;
+  return newPage > 0 ? newPage : 1;
+}
+
+function increaseCurrentPage(currentPage: number, totalPageCount: number) {
+  const newPage = currentPage + 1;
+  return newPage <= totalPageCount ? newPage : totalPageCount;
+}
diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
index f825ff206..9bfcdaee7 100644
--- a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
+++ b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
@@ -7,39 +7,67 @@ import {
   TagSizes,
   TagVariants,
 } from "@thunderstore/cyberstorm-theme/src/components";
+import {
+  Actionable,
+  ActionableButtonProps,
+} from "../../primitiveComponents/Actionable/Actionable";
 
-interface TagProps extends Omit<FrameWindowProps, "primitiveType"> {
+interface TagProps
+  extends Omit<FrameWindowProps | ActionableButtonProps, "primitiveType"> {
+  csMode?: "tag" | "button";
   csVariant?: TagVariants;
   csSize?: TagSizes;
   csModifiers?: TagModifiers[];
 }
 
-export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
-  (props: TagProps, forwardedRef) => {
-    const {
-      children,
-      rootClasses,
-      csVariant = "primary",
-      csSize = "medium",
-      csModifiers,
-      ...forwardedProps
-    } = props;
-    const fProps = forwardedProps as FrameWindowProps;
+export const Tag = React.forwardRef<
+  HTMLDivElement | HTMLButtonElement,
+  TagProps
+>((props: TagProps, forwardedRef) => {
+  const {
+    csMode = "tag",
+    children,
+    rootClasses,
+    csVariant = "primary",
+    csSize = "medium",
+    csModifiers,
+    ...forwardedProps
+  } = props;
+
+  if (csMode === "button") {
+    const fProps = forwardedProps as ActionableButtonProps;
+    const fRef = forwardedRef as React.ForwardedRef<HTMLButtonElement>;
     return (
-      <Frame
+      <Actionable
         {...fProps}
-        primitiveType={"window"}
+        primitiveType={"button"}
         rootClasses={classnames(
           "ts-tag",
           ...componentClasses(csVariant, csSize, csModifiers),
           rootClasses
         )}
-        ref={forwardedRef}
+        ref={fRef}
       >
         {children}
-      </Frame>
+      </Actionable>
     );
   }
-);
+
+  const fProps = forwardedProps as FrameWindowProps;
+  return (
+    <Frame
+      {...fProps}
+      primitiveType={"window"}
+      rootClasses={classnames(
+        "ts-tag",
+        ...componentClasses(csVariant, csSize, csModifiers),
+        rootClasses
+      )}
+      ref={forwardedRef}
+    >
+      {children}
+    </Frame>
+  );
+});
 
 Tag.displayName = "Tag";
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.css b/packages/cyberstorm/src/newComponents/TextInput/TextInput.css
index 69bca9df1..adeb0141c 100644
--- a/packages/cyberstorm/src/newComponents/TextInput/TextInput.css
+++ b/packages/cyberstorm/src/newComponents/TextInput/TextInput.css
@@ -40,14 +40,17 @@
   .ts-textinput__lefticon {
     position: var(--ts-textinput__lefticon-position);
     margin: var(--ts-textinput__lefticon-margin);
-    color: var(--ts-textinput__lefticon-color);
+
+    --icon-color: var(--ts-textinput__lefticon-color);
+
     pointer-events: none;
   }
 
   .ts-textinput__righticon {
     position: var(--ts-textinput__righticon-position);
     padding: var(--ts-textinput__righticon-padding);
-    color: var(--ts-textinput__righticon-color);
+
+    --icon-color: var(--ts-textinput__righticon-color);
   }
 
   .ts-textinput__clearvaluebutton {
diff --git a/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx b/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx
index 318414587..cd94a920e 100644
--- a/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx
@@ -9,7 +9,7 @@ import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
 export interface ActionableButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     PrimitiveComponentDefaultProps {
-  primitiveType: "button";
+  primitiveType?: "button";
 }
 
 export interface ActionableLinkProps
@@ -47,7 +47,7 @@ export const Actionable = React.forwardRef<
       ...forwardedProps
     } = props;
 
-    if (primitiveType === "button") {
+    if (primitiveType === "button" || primitiveType === undefined) {
       const fRef = forwardedRef as React.ForwardedRef<HTMLButtonElement>;
       const fProps = forwardedProps as ActionableButtonProps;
 
diff --git a/packages/dapper-fake/src/fakers/community.ts b/packages/dapper-fake/src/fakers/community.ts
index 10c43bc08..3c10d0011 100644
--- a/packages/dapper-fake/src/fakers/community.ts
+++ b/packages/dapper-fake/src/fakers/community.ts
@@ -16,9 +16,10 @@ export const getFakeCommunity = async (communityId: string) => {
     name: faker.word.words(3),
     identifier: communityId,
     description: faker.helpers.maybe(() => faker.word.words(5)) ?? null,
+    wiki_url: faker.helpers.maybe(() => faker.internet.url()) ?? null,
     discord_url: faker.helpers.maybe(() => faker.internet.url()) ?? null,
     datetime_created: faker.date.past().toISOString(),
-    background_image_url:
+    nimbus_background_image_url:
       faker.helpers.maybe(() => getFakeImg(1080, 492), { probability: 0.9 }) ??
       null,
     icon_url:
diff --git a/packages/dapper-ts/src/methods/communities.ts b/packages/dapper-ts/src/methods/communities.ts
index 6e6db410c..dc5a904ab 100644
--- a/packages/dapper-ts/src/methods/communities.ts
+++ b/packages/dapper-ts/src/methods/communities.ts
@@ -12,9 +12,10 @@ const communitySchema = z.object({
   name: z.string().nonempty(),
   identifier: z.string().nonempty(),
   description: z.string().nullable(),
+  wiki_url: z.string().nullable(),
   discord_url: z.string().nullable(),
   datetime_created: z.string().datetime(),
-  background_image_url: z.string().url().nullable(),
+  nimbus_background_image_url: z.string().url().nullable(),
   cover_image_url: z.string().url().nullable(),
   icon_url: z.string().url().nullable(),
   total_download_count: z.number().int(),
diff --git a/packages/dapper-ts/src/methods/packageListings.ts b/packages/dapper-ts/src/methods/packageListings.ts
index 397660329..6addbc9e3 100644
--- a/packages/dapper-ts/src/methods/packageListings.ts
+++ b/packages/dapper-ts/src/methods/packageListings.ts
@@ -41,13 +41,7 @@ export async function getPackageListings(
   excludedCategories: string[] = [],
   section = "",
   nsfw = false,
-  deprecated = false,
-  created_recent = "",
-  updated_recent = "",
-  created_after = "",
-  created_before = "",
-  updated_after = "",
-  updated_before = ""
+  deprecated = false
 ) {
   const options: PackageListingQueryParams = {
     ordering,
@@ -58,12 +52,6 @@ export async function getPackageListings(
     section,
     nsfw,
     deprecated,
-    created_recent,
-    updated_recent,
-    created_after,
-    created_before,
-    updated_after,
-    updated_before,
   };
   let data;
 
diff --git a/packages/dapper/src/types/community.ts b/packages/dapper/src/types/community.ts
index 6dd713dfd..6799f9daf 100644
--- a/packages/dapper/src/types/community.ts
+++ b/packages/dapper/src/types/community.ts
@@ -4,9 +4,10 @@ export interface Community {
   name: string;
   identifier: string;
   description: string | null;
+  wiki_url: string | null;
   discord_url: string | null;
   datetime_created: string;
-  background_image_url: string | null;
+  nimbus_background_image_url: string | null;
   cover_image_url: string | null;
   icon_url: string | null;
   total_download_count: number;
diff --git a/packages/thunderstore-api/src/fetch/communityPackageListings.ts b/packages/thunderstore-api/src/fetch/communityPackageListings.ts
index 3d665a77b..145b8464f 100644
--- a/packages/thunderstore-api/src/fetch/communityPackageListings.ts
+++ b/packages/thunderstore-api/src/fetch/communityPackageListings.ts
@@ -19,12 +19,6 @@ export async function fetchCommunityPackageListings(
     { key: "section", value: options?.section },
     { key: "nsfw", value: options?.nsfw, impotent: false },
     { key: "deprecated", value: options?.deprecated, impotent: false },
-    { key: "created_recent", value: options?.created_recent },
-    { key: "updated_recent", value: options?.updated_recent },
-    { key: "created_after", value: options?.created_after },
-    { key: "created_before", value: options?.created_before },
-    { key: "updated_after", value: options?.updated_after },
-    { key: "updated_before", value: options?.updated_before },
   ];
   const query = serializeQueryString(queryParams);
 
diff --git a/packages/thunderstore-api/src/fetch/namespacePackageListings.ts b/packages/thunderstore-api/src/fetch/namespacePackageListings.ts
index d8897c1ab..1e388ca03 100644
--- a/packages/thunderstore-api/src/fetch/namespacePackageListings.ts
+++ b/packages/thunderstore-api/src/fetch/namespacePackageListings.ts
@@ -20,12 +20,6 @@ export async function fetchNamespacePackageListings(
     { key: "section", value: options?.section },
     { key: "nsfw", value: options?.nsfw, impotent: false },
     { key: "deprecated", value: options?.deprecated, impotent: false },
-    { key: "created_recent", value: options?.created_recent },
-    { key: "updated_recent", value: options?.updated_recent },
-    { key: "created_after", value: options?.created_after },
-    { key: "created_before", value: options?.created_before },
-    { key: "updated_after", value: options?.updated_after },
-    { key: "updated_before", value: options?.updated_before },
   ];
   const query = serializeQueryString(queryParams);
 
diff --git a/packages/thunderstore-api/src/fetch/packageDependantsListings.ts b/packages/thunderstore-api/src/fetch/packageDependantsListings.ts
index 7636b8ebb..ccfb2bdfb 100644
--- a/packages/thunderstore-api/src/fetch/packageDependantsListings.ts
+++ b/packages/thunderstore-api/src/fetch/packageDependantsListings.ts
@@ -24,12 +24,6 @@ export async function fetchPackageDependantsListings(
     { key: "section", value: options?.section },
     { key: "nsfw", value: options?.nsfw, impotent: false },
     { key: "deprecated", value: options?.deprecated, impotent: false },
-    { key: "created_recent", value: options?.created_recent },
-    { key: "updated_recent", value: options?.updated_recent },
-    { key: "created_after", value: options?.created_after },
-    { key: "created_before", value: options?.created_before },
-    { key: "updated_after", value: options?.updated_after },
-    { key: "updated_before", value: options?.updated_before },
   ];
   const query = serializeQueryString(queryParams);
 
diff --git a/packages/thunderstore-api/src/types/index.ts b/packages/thunderstore-api/src/types/index.ts
index 68fd98466..aa49a599d 100644
--- a/packages/thunderstore-api/src/types/index.ts
+++ b/packages/thunderstore-api/src/types/index.ts
@@ -23,16 +23,5 @@ export interface PackageListingQueryParams {
   nsfw: boolean;
   /** Should deprecated packages be included (by default they're not) */
   deprecated: boolean;
-  // Amount of days that the package must be created on or after
-  created_recent: string;
-  // Amount of days that the package must be updated on or after
-  updated_recent: string;
-  // Date that the package must be created ON or AFTER
-  created_after: string;
-  // Date that the package must be created ON or BEFORE
-  created_before: string;
-  // Date when the package has to been last updated ON or AFTER
-  updated_after: string;
-  // Date when the package has to been last updated ON or BEFORE
-  updated_before: string;
+  // Disabled until the UX for date filtering is resolved
 }
diff --git a/tools/cyberstorm-playwright/tests/community.spec.ts b/tools/cyberstorm-playwright/tests/community.spec.ts
new file mode 100644
index 000000000..b249b63ea
--- /dev/null
+++ b/tools/cyberstorm-playwright/tests/community.spec.ts
@@ -0,0 +1,10 @@
+// import { test, expect } from "@chromatic-com/playwright";
+import { test } from "@playwright/test";
+
+import percySnapshot from "@percy/playwright";
+
+test("community page", async ({ page }) => {
+  await page.goto("http://localhost:3000/c/test-community-1");
+  // await expect(page).toHaveScreenshot({ fullPage: true });
+  await percySnapshot(page, "Community");
+});
diff --git a/yarn.lock b/yarn.lock
index a96cbe9d2..eaf48aa2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12519,16 +12519,16 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.0.tgz#c6d16474a5f764ea1a4a373c593b779697744d5e"
+  integrity sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==
+
 prettier@^2.7.1:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
-prettier@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
-  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
-
 pretty-error@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"