diff --git a/apps/cyberstorm-remix/app/c/Community.css b/apps/cyberstorm-remix/app/c/Community.css
index 1548c945b..1d5d40e0d 100644
--- a/apps/cyberstorm-remix/app/c/Community.css
+++ b/apps/cyberstorm-remix/app/c/Community.css
@@ -26,7 +26,7 @@
     align-items: center;
     align-self: stretch;
     justify-content: center;
-    height: 12.5rem;
+    max-height: 12.5rem;
     border-radius: 0.5rem;
     overflow-y: hidden;
     transition: height 2s;
@@ -36,6 +36,10 @@
       background: var(--color-ui-surface-1);
       opacity: 0.8;
     }
+
+    .skeleton {
+      height: 12.5rem;
+    }
   }
 
   .community__background--packagePage {
@@ -47,12 +51,14 @@
     }
   }
 
-  .community__content-header {
+  .community__content-header-wrapper {
     z-index: 1;
     display: flex;
+    flex-wrap: wrap;
     gap: 1.5rem;
-    align-items: flex-end;
+    place-items: flex-end stretch;
     align-self: stretch;
+    justify-content: space-between;
     height: max-content;
     margin-top: -1rem;
     padding-left: 1rem;
@@ -62,6 +68,16 @@
       visibility 1s 0s;
   }
 
+  .community__content-header {
+    display: flex;
+    flex-grow: 1;
+    gap: 1.5rem;
+    align-items: flex-end;
+    align-self: stretch;
+    min-width: 75%;
+    height: max-content;
+  }
+
   .community__content-header--hide {
     height: 0;
     visibility: collapse;
@@ -101,11 +117,10 @@
   .community__content-header-content {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     gap: 0.75rem;
     align-items: flex-start;
     justify-content: center;
-    width: 100%;
-    height: 5rem;
   }
 
   .community__header-info {
@@ -115,16 +130,26 @@
     gap: 0.25rem;
     align-items: flex-start;
     align-self: stretch;
-    width: 40%;
+    min-width: 60%;
+    max-width: 100%;
+
+    > h1 {
+      line-height: 80%;
+      overflow-wrap: anywhere;
+    }
   }
 
   .community__header-meta {
     display: flex;
-    flex: 0 1 0;
+    flex: 0 1 60%;
     gap: 1.5rem;
     align-items: center;
-    width: 60%;
-    min-height: 16px;
+    min-width: 60%;
+    height: 16px;
+
+    > .skeleton {
+      height: 1rem;
+    }
   }
 
   .community__small-image {
@@ -151,7 +176,7 @@
   .community__meta {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
   }
 
@@ -169,9 +194,36 @@
     }
   }
 
+  @media (width >= 41rem) {
+    .community__background {
+      height: 12.5rem;
+    }
+  }
+
+  @media (width < 41rem) {
+    .community__background {
+      .skeleton {
+        height: 8rem;
+      }
+    }
+
+    .community__header {
+      gap: 1rem;
+    }
+
+    .community__content-header-wrapper {
+      margin-top: 0;
+      padding-left: 0;
+    }
+
+    .community__game-icon {
+      display: none;
+    }
+  }
+
   @media (width <= 48rem) {
     .community__meta {
-      gap: var(--gap-xxs);
+      gap: var(--gap-2xs);
     }
 
     .community__item {
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
index 2a8041fce..c89b611a4 100644
--- a/apps/cyberstorm-remix/app/c/community.tsx
+++ b/apps/cyberstorm-remix/app/c/community.tsx
@@ -151,88 +151,90 @@ export default function Community() {
 
           <div
             className={classnames(
-              "community__content-header",
+              "community__content-header-wrapper",
               isSubPath ? "community__content-header--hide" : null
             )}
           >
-            <div className="community__game-icon">
-              <div className="community__game-icon-tinified">
-                <Suspense fallback={<SkeletonBox />}>
-                  <Await resolve={community}>
-                    {(resolvedValue) =>
-                      resolvedValue.community_icon_url ? (
-                        <img
-                          src={resolvedValue.community_icon_url}
-                          alt={resolvedValue.name}
-                        />
-                      ) : null
-                    }
-                  </Await>
-                </Suspense>
+            <div className="community__content-header">
+              <div className="community__game-icon">
+                <div className="community__game-icon-tinified">
+                  <Suspense fallback={<SkeletonBox />}>
+                    <Await resolve={community}>
+                      {(resolvedValue) =>
+                        resolvedValue.community_icon_url ? (
+                          <img
+                            src={resolvedValue.community_icon_url}
+                            alt={resolvedValue.name}
+                          />
+                        ) : null
+                      }
+                    </Await>
+                  </Suspense>
+                </div>
               </div>
-            </div>
-            <div className="community__content-header-content">
-              <div className="community__header-info">
-                <Suspense fallback={<SkeletonBox />}>
-                  <Await resolve={community}>
-                    {(resolvedValue) => (
-                      <Heading
-                        csLevel={"1"}
-                        csSize={"3"}
-                        csVariant="primary"
-                        mode="display"
-                      >
-                        {resolvedValue.name}
-                      </Heading>
-                    )}
-                  </Await>
-                </Suspense>
-              </div>
-              <div className="community__header-meta">
-                <Suspense fallback={<SkeletonBox />}>
-                  <Await resolve={community}>
-                    {(resolvedValue) =>
-                      resolvedValue.wiki_url ? (
-                        <NewLink
-                          primitiveType="link"
-                          href={resolvedValue.wiki_url}
-                          csVariant="cyber"
-                          rootClasses="community__item"
-                        >
-                          <NewIcon csMode="inline" noWrapper>
-                            <FontAwesomeIcon icon={faBook} />
-                          </NewIcon>
-                          <span>Modding Wiki</span>
-                          <NewIcon csMode="inline" noWrapper>
-                            <FontAwesomeIcon icon={faArrowUpRight} />
-                          </NewIcon>
-                        </NewLink>
-                      ) : null
-                    }
-                  </Await>
-                </Suspense>
-                <Suspense fallback={<SkeletonBox />}>
-                  <Await resolve={community}>
-                    {(resolvedValue) =>
-                      resolvedValue.discord_url ? (
-                        <NewLink
-                          primitiveType="link"
-                          href={resolvedValue.discord_url}
-                          csVariant="cyber"
-                          rootClasses="community__item"
+              <div className="community__content-header-content">
+                <div className="community__header-info">
+                  <Suspense fallback={<SkeletonBox />}>
+                    <Await resolve={community}>
+                      {(resolvedValue) => (
+                        <Heading
+                          csLevel={"1"}
+                          csSize={"3"}
+                          csVariant="primary"
+                          mode="display"
                         >
-                          <NewIcon csMode="inline" noWrapper>
-                            <FontAwesomeIcon icon={faDiscord} />
-                          </NewIcon>
-                          <span>Modding Discord</span>
-                          <NewIcon csMode="inline" noWrapper>
-                            <FontAwesomeIcon icon={faArrowUpRight} />
-                          </NewIcon>
-                        </NewLink>
-                      ) : null
-                    }
-                  </Await>
-                </Suspense>
+                          {resolvedValue.name}
+                        </Heading>
+                      )}
+                    </Await>
+                  </Suspense>
+                </div>
+                <div className="community__header-meta">
+                  <Suspense fallback={<SkeletonBox />}>
+                    <Await resolve={community}>
+                      {(resolvedValue) =>
+                        resolvedValue.wiki_url ? (
+                          <NewLink
+                            primitiveType="link"
+                            href={resolvedValue.wiki_url}
+                            csVariant="cyber"
+                            rootClasses="community__item"
+                          >
+                            <NewIcon csMode="inline" noWrapper>
+                              <FontAwesomeIcon icon={faBook} />
+                            </NewIcon>
+                            <span>Modding Wiki</span>
+                            <NewIcon csMode="inline" noWrapper>
+                              <FontAwesomeIcon icon={faArrowUpRight} />
+                            </NewIcon>
+                          </NewLink>
+                        ) : null
+                      }
+                    </Await>
+                  </Suspense>
+                  <Suspense fallback={<SkeletonBox />}>
+                    <Await resolve={community}>
+                      {(resolvedValue) =>
+                        resolvedValue.discord_url ? (
+                          <NewLink
+                            primitiveType="link"
+                            href={resolvedValue.discord_url}
+                            csVariant="cyber"
+                            rootClasses="community__item"
+                          >
+                            <NewIcon csMode="inline" noWrapper>
+                              <FontAwesomeIcon icon={faDiscord} />
+                            </NewIcon>
+                            <span>Modding Discord</span>
+                            <NewIcon csMode="inline" noWrapper>
+                              <FontAwesomeIcon icon={faArrowUpRight} />
+                            </NewIcon>
+                          </NewLink>
+                        ) : null
+                      }
+                    </Await>
+                  </Suspense>
+                </div>
               </div>
             </div>
             <NewButton
@@ -240,6 +242,7 @@ export default function Community() {
               csVariant="accent"
               primitiveType="cyberstormLink"
               linkId="PackageUpload"
+              rootClasses="community__upload-button"
             >
               <NewIcon noWrapper csMode="inline">
                 <FontAwesomeIcon icon={faDownload} />
diff --git a/apps/cyberstorm-remix/app/commonComponents/Connection/Connection.css b/apps/cyberstorm-remix/app/commonComponents/Connection/Connection.css
index 982599319..2496be7ba 100644
--- a/apps/cyberstorm-remix/app/commonComponents/Connection/Connection.css
+++ b/apps/cyberstorm-remix/app/commonComponents/Connection/Connection.css
@@ -1,7 +1,7 @@
 @layer nimbus-components {
   .connection {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
     align-self: stretch;
     padding: var(--space-16) var(--space-32);
@@ -48,7 +48,7 @@
 
   .connection__actions {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
     justify-content: flex-end;
   }
@@ -56,7 +56,7 @@
   .connection__description {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxxs);
+    gap: var(--gap-3xs);
     align-items: flex-end;
     justify-content: center;
   }
diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
index dc80f1e21..718fd0109 100644
--- a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
+++ b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
@@ -21,7 +21,7 @@
   .footer__links-wrapper {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     justify-content: space-between;
     margin-left: 3.5rem;
   }
@@ -47,7 +47,7 @@
   .footer__icon-links {
     display: flex;
     flex-shrink: 0;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     justify-content: center;
   }
 
@@ -181,7 +181,7 @@
   .footnote__inner {
     display: flex;
     flex-grow: 1;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     max-width: calc(var(--footer-half-width) * 2);
     margin-right: 3.5rem;
     margin-left: 3.5rem;
@@ -191,7 +191,7 @@
     display: flex;
     flex: 1 0 0;
     flex-wrap: wrap;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: flex-start;
 
     > a {
@@ -240,7 +240,7 @@
       display: flex;
       flex-flow: column wrap;
       flex-shrink: 0;
-      gap: var(--gap-xxxl);
+      gap: var(--gap-3xl);
       justify-content: space-between;
       max-width: unset;
       margin-left: unset;
diff --git a/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css b/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css
index b8e2e5b3f..787069f08 100644
--- a/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css
+++ b/apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css
@@ -29,7 +29,7 @@
 
   .listing-dependency__title {
     display: flex;
-    gap: var(--gap-xxs);
+    gap: var(--gap-2xs);
     align-items: center;
     align-self: stretch;
     font-weight: var(--font-weight-regular);
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css
index 55c096871..31218c261 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css
@@ -46,7 +46,7 @@
 
   .package-search__pagination {
     display: flex;
-    gap: var(--gap-xxs);
+    gap: var(--gap-2xs);
     align-items: center;
     align-self: stretch;
     justify-content: center;
@@ -108,7 +108,7 @@
   .package-search__results {
     display: flex;
     flex: 1;
-    gap: var(--gap-xxs);
+    gap: var(--gap-2xs);
     align-items: center;
     justify-content: flex-end;
 
@@ -161,6 +161,7 @@
   @media (width <= 475px) {
     .package-search {
       flex-direction: column;
+      gap: 0.25rem;
     }
 
     .package-search__sidebar {
@@ -169,8 +170,13 @@
       width: 100%;
     }
 
+    .package-search__filters {
+      width: unset;
+    }
+
     .package-search__tools {
       flex-direction: column;
+      gap: 0.5rem;
       align-items: stretch;
     }
 
@@ -188,6 +194,7 @@
     }
 
     .package-search__content {
+      gap: 0.5rem;
       align-self: stretch;
     }
   }
diff --git a/apps/cyberstorm-remix/app/communities/Communities.css b/apps/cyberstorm-remix/app/communities/Communities.css
index 13224fec1..ad7868656 100644
--- a/apps/cyberstorm-remix/app/communities/Communities.css
+++ b/apps/cyberstorm-remix/app/communities/Communities.css
@@ -12,7 +12,7 @@
   .communities__content {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -38,7 +38,7 @@
     display: grid;
     flex-flow: row wrap;
     grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
-    gap: var(--gap-xxxxxxxl) var(--gap-xl);
+    gap: var(--gap-7xl) var(--gap-xl);
     width: 100%;
   }
 
@@ -77,6 +77,12 @@
     }
   }
 
+  @media (width <= 41rem) {
+    .communities__communities-list {
+      gap: var(--gap-3xl) var(--gap-xl);
+    }
+  }
+
   @media (width <= 39rem) {
     .communities__tools {
       flex-direction: column;
diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
index 4707d2b05..709e5f561 100644
--- a/apps/cyberstorm-remix/app/communities/communities.tsx
+++ b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -175,6 +175,7 @@ export default function CommunitiesPage() {
             leftIcon={<FontAwesomeIcon icon={faSearch} />}
             type="search"
             rootClasses="communities__search"
+            csSize="small"
           />
           <span className="container container--x">
             <NewSelect
diff --git a/apps/cyberstorm-remix/app/p/packageEdit.css b/apps/cyberstorm-remix/app/p/packageEdit.css
index f5c8a93e3..0ba9d6f4f 100644
--- a/apps/cyberstorm-remix/app/p/packageEdit.css
+++ b/apps/cyberstorm-remix/app/p/packageEdit.css
@@ -1,7 +1,7 @@
 @layer nimbus-layout {
   .package-edit__main {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
     align-self: stretch;
   }
diff --git a/apps/cyberstorm-remix/app/p/packageListing.css b/apps/cyberstorm-remix/app/p/packageListing.css
index a5e6c41f3..2e9ccdfb6 100644
--- a/apps/cyberstorm-remix/app/p/packageListing.css
+++ b/apps/cyberstorm-remix/app/p/packageListing.css
@@ -1,7 +1,7 @@
 @layer nimbus-layout {
   .package-listing__main {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -129,7 +129,7 @@
     display: flex;
     flex: 1 0 0;
     flex-direction: column;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -188,7 +188,7 @@
   .package-listing-sidebar__meta {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxxs);
+    gap: var(--gap-3xs);
     align-items: flex-start;
     align-self: stretch;
 
@@ -203,7 +203,7 @@
 
   .package-listing-sidebar__item {
     display: flex;
-    gap: var(--gap-xxxl);
+    gap: var(--gap-3xl);
     align-items: center;
     align-self: stretch;
     padding: var(--space-8) var(--space-12);
@@ -294,6 +294,21 @@
     width: 100%;
   }
 
+  @media (width < 41rem) {
+    .package-listing__actions {
+      position: unset;
+      top: unset;
+      right: unset;
+      display: flex;
+      flex: 1 1 0;
+    }
+
+    .package-listing-management-tools {
+      flex: 1 1 0;
+      flex-flow: row wrap;
+    }
+  }
+
   /* Sidebar narrow/wide switch breakpoint */
   @media (width <= 990px) {
     .package-listing-sidebar {
diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/Required.css b/apps/cyberstorm-remix/app/p/tabs/Required/Required.css
index b71878a7a..c446dac8a 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Required/Required.css
+++ b/apps/cyberstorm-remix/app/p/tabs/Required/Required.css
@@ -29,7 +29,7 @@
   .package-required__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxxs);
+    gap: var(--gap-3xs);
     align-items: flex-start;
     align-self: stretch;
     padding-bottom: var(--space-32);
diff --git a/apps/cyberstorm-remix/app/settings/teams/Teams.css b/apps/cyberstorm-remix/app/settings/teams/Teams.css
index 33892da32..4df457ed8 100644
--- a/apps/cyberstorm-remix/app/settings/teams/Teams.css
+++ b/apps/cyberstorm-remix/app/settings/teams/Teams.css
@@ -21,7 +21,7 @@
   .create-team-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
index 6c5bccc2c..19a50be02 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
@@ -19,7 +19,7 @@
   .add-member-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -73,7 +73,7 @@
   .remove-member-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.css
index c07d0dd09..a39d9c96e 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.css
@@ -7,7 +7,7 @@
   .leave-team-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
@@ -24,7 +24,7 @@
   .disband-team-form__body {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
   }
diff --git a/apps/cyberstorm-remix/app/settings/user/Account/Account.css b/apps/cyberstorm-remix/app/settings/user/Account/Account.css
index 8a222b6ca..2ba30dfd6 100644
--- a/apps/cyberstorm-remix/app/settings/user/Account/Account.css
+++ b/apps/cyberstorm-remix/app/settings/user/Account/Account.css
@@ -2,7 +2,7 @@
   .user-account__delete-user-form {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxl);
+    gap: var(--gap-2xl);
     align-items: flex-start;
     align-self: stretch;
     justify-content: center;
diff --git a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css
index ae5847771..0610eea67 100644
--- a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css
+++ b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css
@@ -41,7 +41,7 @@
   @media (width <= 475px) {
     .manifest-validator__row {
       flex-direction: column;
-      gap: var(--gap-xxxl);
+      gap: var(--gap-3xl);
     }
 
     .manifest-validator__content {
diff --git a/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css b/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css
index 6a826dea8..f6b03b198 100644
--- a/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css
+++ b/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css
@@ -1,6 +1,6 @@
 @layer nimbus-layout {
   .markdown-preview {
-    gap: var(--gap-xxxxxxxl);
+    gap: var(--gap-7xl);
   }
 
   .markdown-preview__row {
@@ -57,7 +57,7 @@
   @media (width <= 475px) {
     .markdown-preview__row {
       flex-direction: column;
-      gap: var(--gap-xxxl);
+      gap: var(--gap-3xl);
     }
 
     .markdown-preview__content {
diff --git a/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css b/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css
index 330279266..7513d8735 100644
--- a/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css
+++ b/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css
@@ -1,6 +1,6 @@
 @layer nimbus-layout {
   .package-format-docs {
-    gap: var(--gap-xxxxxl);
+    gap: var(--gap-5xl);
   }
 
   .package-format-docs__title {
diff --git a/apps/cyberstorm-remix/app/upload/Upload.css b/apps/cyberstorm-remix/app/upload/Upload.css
index 12fcdca9a..e33b18032 100644
--- a/apps/cyberstorm-remix/app/upload/Upload.css
+++ b/apps/cyberstorm-remix/app/upload/Upload.css
@@ -1,6 +1,6 @@
 @layer nimbus-layout {
   .upload {
-    gap: var(--gap-xxxxxxxl);
+    gap: var(--gap-7xl);
   }
 
   .upload__row {
@@ -173,7 +173,7 @@
   @media (width <= 475px) {
     .upload__row {
       flex-direction: column;
-      gap: var(--gap-xxxl);
+      gap: var(--gap-3xl);
     }
 
     .upload__content {
diff --git a/packages/cyberstorm-theme/src/components/TextInput/TextInput.css b/packages/cyberstorm-theme/src/components/TextInput/TextInput.css
index 0aca729a4..95cff966b 100644
--- a/packages/cyberstorm-theme/src/components/TextInput/TextInput.css
+++ b/packages/cyberstorm-theme/src/components/TextInput/TextInput.css
@@ -35,14 +35,14 @@
 
   .text-input:where(.text-input--size--default) {
     --text-input-height: var(--input-md-height);
-    --text-input-padding: var(--space-10)
-      calc(var(--space-16) + var(--right-padding-bonus, 0px)) var(--space-10)
+    --text-input-padding: var(--space-12)
+      calc(var(--space-16) + var(--right-padding-bonus, 0px)) var(--space-12)
       calc(var(--space-16) + var(--left-padding-bonus, 0px));
   }
 
   .text-input:where(.text-input--size--small) {
     --text-input-height: var(--input-sm-height);
-    --text-input-padding: var(--space-8)
+    --text-input-padding: var(--space-10)
       calc(var(--space-16) + var(--right-padding-bonus, 0px)) var(--space-10)
       calc(var(--space-16) + var(--left-padding-bonus, 0px));
   }
diff --git a/packages/cyberstorm-theme/src/components/componentsColors.css b/packages/cyberstorm-theme/src/components/componentsColors.css
index 279b0bf2e..7f0604a23 100644
--- a/packages/cyberstorm-theme/src/components/componentsColors.css
+++ b/packages/cyberstorm-theme/src/components/componentsColors.css
@@ -1,7 +1,7 @@
 @layer theme-components-colors {
   /* These variables are copied from Figma with the plugin variables2css */
   :root {
-    --ad-bg-color--default: var(--color-surface-4);
+    --ad-bg-color--default: var(--color-nightsky-4);
     --ad-text-color--default: var(--color-text-tertiary);
     --alert-danger-bg-color--default: var(--color-accent-red-2);
     --alert-danger-border-color--default: var(--color-accent-red-7);
@@ -19,9 +19,9 @@
     --alert-warning-border-color--default: var(--color-accent-yellow-7);
     --alert-warning-icon-color--default: var(--color-accent-yellow-7);
     --alert-warning-text-color--default: var(--color-accent-yellow-11);
-    --breadcrumb-item-bg-color--current: var(--color-surface-8);
-    --breadcrumb-item-bg-color--default: var(--color-surface-6);
-    --breadcrumb-item-bg-color--hover: var(--color-surface-8);
+    --breadcrumb-item-bg-color--current: var(--color-nightsky-5);
+    --breadcrumb-item-bg-color--default: var(--color-nightsky-6);
+    --breadcrumb-item-bg-color--hover: var(--color-nightsky-8);
     --breadcrumb-item-text-color--current: var(--color-text-primary);
     --breadcrumb-item-text-color--default: var(--color-cyber-green-7);
     --breadcrumb-item-text-color--hover: var(--color-cyber-green-7);
@@ -52,18 +52,18 @@
     --button-info-text-color--active: var(--color-accent-blue-11);
     --button-info-text-color--default: var(--color-accent-blue-11);
     --button-info-text-color--hover: var(--color-accent-blue-11);
-    --button-primary-bg-color--active: #4d2bab;
-    --button-primary-bg-color--default: #623bce;
-    --button-primary-bg-color--hover: #6c44da;
+    --button-primary-bg-color--active: hsl(256deg 60% 42%);
+    --button-primary-bg-color--default: hsl(256deg 60% 52%);
+    --button-primary-bg-color--hover: hsl(256deg 67% 56%);
     --button-primary-icon-color--active: var(--color-text-primary);
     --button-primary-icon-color--default: var(--color-text-primary);
     --button-primary-icon-color--hover: var(--color-text-primary);
     --button-primary-text-color--active: var(--color-text-primary);
     --button-primary-text-color--default: var(--color-text-primary);
     --button-primary-text-color--hover: var(--color-text-primary);
-    --button-secondary-bg-color--active: var(--color-surface-a7);
-    --button-secondary-bg-color--default: var(--color-surface-a8);
-    --button-secondary-bg-color--hover: var(--color-surface-a9);
+    --button-secondary-bg-color--active: var(--color-nightsky-a7);
+    --button-secondary-bg-color--default: var(--color-nightsky-a8);
+    --button-secondary-bg-color--hover: var(--color-nightsky-a9);
     --button-secondary-icon-color--active: var(--color-text-primary);
     --button-secondary-icon-color--default: var(--color-text-primary);
     --button-secondary-icon-color--hover: var(--color-text-primary);
@@ -150,9 +150,9 @@
     --card-package-fullwidth-hover-background-color: var(--color-surface-a6);
     --card-package-secondary-background-color: rgb(63 63 136 / 0.55);
     --card-package-secondary-hover-background-color: rgb(63 63 136 / 0.55);
-    --checkbox-bg-color--active: var(--color-surface-a10);
-    --checkbox-bg-color--default: var(--color-surface-a8);
-    --checkbox-bg-color--hover: var(--color-surface-a10);
+    --checkbox-bg-color--active: var(--color-nightsky-a10);
+    --checkbox-bg-color--default: var(--color-nightsky-a8);
+    --checkbox-bg-color--hover: var(--color-nightsky-a10);
     --checkbox-bg-color--selected: var(--color-cyber-green-7);
     --code-input-wrapper-bg-color--default: rgb(59 63 125 / 0.24);
     --code-input-wrapper-border-color--default: var(--color-surface-8);
@@ -166,23 +166,26 @@
     --validation-bar-border-top-color--failure: var(--color-accent-red-7);
     --validation-bar-background-color--failure: var(--color-accent-red-2);
     --validation-bar-color--failure: var(--color-accent-red-7);
-    --divider-bg-color: var(--color-surface-a6);
+    --divider-bg-color: var(--color-nightsky-a6);
+    --code-bg-color--default: var(--color-ui-surface-3);
+    --code-border-color--default: var(--color-ui-element-1);
+    --code-text-color--default: var(--color-text-primary);
     --dropdown-bg-color--default: var(--color-surface-4);
     --dropdown-border-color--default: var(--color-surface-a6);
-    --dropdown-item-bg-color--default: #0000;
-    --dropdown-item-bg-color--hover: var(--color-surface-a7);
+    --dropdown-item-bg-color--default: hsl(0deg 0 0% / 0);
+    --dropdown-item-bg-color--hover: var(--color-nightsky-a7);
     --dropdown-item-icon-color--default: var(--color-text-tertiary);
     --dropdown-item-icon-color--hover: var(--color-text-primary);
     --dropdown-item-text-color--default: var(--color-text-primary);
     --dropdown-item-text-color--hover: var(--color-text-primary);
-    --dropdown-item-danger-bg-color--default: #0000;
+    --dropdown-item-danger-bg-color--default: hsl(0deg 0 0% / 0);
     --dropdown-item-danger-bg-color--hover: var(--color-accent-red-6);
     --dropdown-item-danger-icon-color--default: var(--color-accent-red-7);
-    --dropdown-item-danger-icon-color--hover: #fff;
+    --dropdown-item-danger-icon-color--hover: hsl(0deg 0 100%);
     --dropdown-item-danger-text-color--default: var(--color-accent-red-7);
-    --dropdown-item-danger-text-color--hover: #fff;
-    --dropdown-item-disabled-bg-color--default: #0000;
-    --dropdown-item-disabled-bg-color--hover: #0000;
+    --dropdown-item-danger-text-color--hover: hsl(0deg 0 100%);
+    --dropdown-item-disabled-bg-color--default: hsl(0deg 0 0% / 0);
+    --dropdown-item-disabled-bg-color--hover: hsl(0deg 0 0% / 0);
     --dropdown-item-disabled-icon-color--default: var(--color-text-tertiary);
     --dropdown-item-disabled-icon-color--hover: var(--color-text-tertiary);
     --dropdown-item-disabled-text-color--default: var(--color-text-tertiary);
@@ -255,12 +258,14 @@
     --icon-cyber-color--default: var(--color-cyber-green-7);
     --image-primary-color--default: hsl(240deg 42% 45%);
     --image-primary-background-color--default: var(--color-surface-a4);
-    --input-bg-color--default: var(--color-surface-a4);
-    --input-bg-color--focus: var(--color-surface-1);
-    --input-bg-color--hover: var(--color-surface-a6);
-    --input-border-color--default: var(--color-surface-a10);
+    --icon-button-accent-color--default: var(--color-text-accent);
+    --icon-button-muted-color--default: var(--color-text-tertiary);
+    --input-bg-color--default: var(--color-nightsky-a4);
+    --input-bg-color--focus: var(--color-nightsky-1);
+    --input-bg-color--hover: var(--color-nightsky-a6);
+    --input-border-color--default: var(--color-nightsky-a10);
     --input-border-color--focus: var(--color-cyber-green-7);
-    --input-border-color--hover: var(--color-surface-a10);
+    --input-border-color--hover: var(--color-nightsky-a10);
     --input-icon-color--default: var(--color-text-tertiary);
     --input-icon-color--focus: var(--color-text-secondary);
     --input-icon-color--hover: var(--color-text-tertiary);
@@ -268,8 +273,8 @@
     --input-text-color--default: var(--color-text-secondary);
     --input-text-color--focus: var(--color-text-primary);
     --input-text-color--hover: var(--color-text-secondary);
-    --kbd-bg-color--default: #0000;
-    --kbd-border-color--default: var(--color-surface-a10);
+    --kbd-bg-color--default: hsl(0deg 0 0% / 0);
+    --kbd-border-color--default: var(--color-nightsky-a10);
     --kbd-text-color--default: var(--color-text-tertiary);
     --link-primary-color--default: var(--color-text-accent);
     --link-primary-color--hover: var(--color-text-primary);
@@ -279,24 +284,27 @@
     --menu-primary-color--hover: var(--color-text-primary);
     --meta-item-icon-color--default: var(--color-text-tertiary);
     --meta-item-text-color--default: var(--color-text-tertiary);
-    --modal-bg-color--default: var(--color-surface-2);
-    --modal-border-color--default: var(--color-surface-7);
-    --modal-box-shadow--default: var(--shadow-lg);
+    --modal-bg-color--default: var(--color-nightsky-3);
+    --modal-border-color--default: var(--color-nightsky-a6);
     --modal-text-color--default: var(--color-text-secondary);
-    --pagination-item-bg-color--active: var(--color-surface-a6);
-    --pagination-item-bg-color--current: #623bce;
-    --pagination-item-bg-color--default: var(--color-surface-a7);
-    --pagination-item-bg-color--hover: var(--color-surface-a8);
+    --pagination-item-bg-color--active: var(--color-nightsky-a6);
+    --pagination-item-bg-color--current: hsl(256deg 60% 52%);
+    --pagination-item-bg-color--default: var(--color-nightsky-a7);
+    --pagination-item-bg-color--hover: var(--color-nightsky-a8);
+    --pagination-item-icon-color--active: var(--color-text-primary);
+    --pagination-item-icon-color--current: var(--color-text-primary);
+    --pagination-item-icon-color--default: var(--color-text-secondary);
+    --pagination-item-icon-color--hover: var(--color-text-primary);
     --pagination-item-text-color--active: var(--color-text-primary);
     --pagination-item-text-color--current: var(--color-text-primary);
     --pagination-item-text-color--default: var(--color-text-secondary);
     --pagination-item-text-color--hover: var(--color-text-primary);
-    --pre-bg-color--default: var(--color-surface-1);
-    --pre-border-color--default: var(--color-surface-a10);
+    --pre-bg-color--default: var(--color-ui-surface-1);
+    --pre-border-color--default: var(--color-ui-element-1);
     --pre-text-color--default: var(--color-text-primary);
-    --radio-bg-color--active: var(--color-surface-a10);
-    --radio-bg-color--default: var(--color-surface-a8);
-    --radio-bg-color--hover: var(--color-surface-a10);
+    --radio-bg-color--active: var(--color-nightsky-a10);
+    --radio-bg-color--default: var(--color-nightsky-a8);
+    --radio-bg-color--hover: var(--color-nightsky-a10);
     --radio-bg-color--selected: var(--color-cyber-green-7);
     --select-bg-color--default: var(--color-surface-4);
     --select-border-color--default: var(--color-surface-a6);
@@ -330,8 +338,8 @@
     --table-bg-color--default: var(--color-surface-4);
     --tab-nav-item-border-color--active: var(--color-surface-9);
     --tab-nav-item-border-color--current: var(--color-cyber-green-7);
-    --tab-nav-item-border-color--default: #0000;
-    --tab-nav-item-border-color--hover: var(--color-surface-9);
+    --tab-nav-item-border-color--default: hsl(0deg 0 0% / 0);
+    --tab-nav-item-border-color--hover: var(--color-nightsky-9);
     --tab-nav-item-icon-color--active: var(--color-text-secondary);
     --tab-nav-item-icon-color--current: var(--color-cyber-green-7);
     --tab-nav-item-icon-color--default: var(--color-text-tertiary);
@@ -344,54 +352,62 @@
     --tab-nav-item-text-color--current: var(--color-cyber-green-7);
     --tab-nav-item-text-color--default: var(--color-text-tertiary);
     --tab-nav-item-text-color--hover: var(--color-text-primary);
-    --tag-dark-blue-bg-color--default: var(--color-accent-blue-2);
-    --tag-dark-blue-bg-color--hover: var(--color-accent-blue-3);
-    --tag-dark-blue-icon-color--default: var(--color-accent-blue-9);
-    --tag-dark-blue-icon-color--hover: var(--color-accent-blue-9);
-    --tag-dark-blue-text-color--default: var(--color-accent-blue-9);
-    --tag-dark-blue-text-color--hover: var(--color-accent-blue-9);
-    --tag-dark-green-bg-color--default: var(--color-accent-green-2);
-    --tag-dark-green-bg-color--hover: var(--color-accent-green-3);
-    --tag-dark-green-icon-color--default: var(--color-accent-green-9);
-    --tag-dark-green-icon-color--hover: var(--color-accent-green-9);
-    --tag-dark-green-text-color--default: var(--color-accent-green-9);
-    --tag-dark-green-text-color--hover: var(--color-accent-green-9);
-    --tag-dark-orange-bg-color--default: var(--color-accent-orange-2);
-    --tag-dark-orange-bg-color--hover: var(--color-accent-orange-3);
-    --tag-dark-orange-icon-color--default: var(--color-accent-orange-9);
-    --tag-dark-orange-icon-color--hover: var(--color-accent-orange-9);
-    --tag-dark-orange-text-color--default: var(--color-accent-orange-9);
-    --tag-dark-orange-text-color--hover: var(--color-accent-orange-9);
-    --tag-dark-pink-bg-color--default: var(--color-accent-pink-2);
-    --tag-dark-pink-bg-color--hover: var(--color-accent-pink-3);
-    --tag-dark-pink-icon-color--default: var(--color-accent-pink-9);
-    --tag-dark-pink-icon-color--hover: var(--color-accent-pink-9);
-    --tag-dark-pink-text-color--default: var(--color-accent-pink-9);
-    --tag-dark-pink-text-color--hover: var(--color-accent-pink-9);
-    --tag-dark-primary-bg-color--default: var(--color-surface-8);
-    --tag-dark-primary-bg-color--hover: var(--color-surface-9);
+    --table-border-color--default: var(--color-nightsky-8);
+    --table-cell-bg-color--default: hsl(0deg 0 100%);
+    --table-cell-border-color--default: hsl(0deg 0 100%);
+    --table-header-bg-color--default: hsl(0deg 0 100%);
+    --table-header-bg-color--hover: hsl(0deg 0 100%);
+    --table-header-text-color--default: var(--color-text-accent);
+    --table-row-bg-color--default: var(--color-nightsky-a5);
+    --table-row-bg-color--hover: var(--color-nightsky-a6);
+    --tag-dark-blue-bg-color--default: var(--color-accent-blue-3);
+    --tag-dark-blue-bg-color--hover: var(--color-accent-blue-4);
+    --tag-dark-blue-icon-color--default: var(--color-accent-blue-10);
+    --tag-dark-blue-icon-color--hover: var(--color-accent-blue-11);
+    --tag-dark-blue-text-color--default: var(--color-accent-blue-10);
+    --tag-dark-blue-text-color--hover: var(--color-accent-blue-11);
+    --tag-dark-green-bg-color--default: var(--color-accent-green-3);
+    --tag-dark-green-bg-color--hover: var(--color-accent-green-4);
+    --tag-dark-green-icon-color--default: var(--color-accent-green-10);
+    --tag-dark-green-icon-color--hover: var(--color-accent-green-11);
+    --tag-dark-green-text-color--default: var(--color-accent-green-10);
+    --tag-dark-green-text-color--hover: var(--color-accent-green-11);
+    --tag-dark-orange-bg-color--default: var(--color-accent-orange-3);
+    --tag-dark-orange-bg-color--hover: var(--color-accent-orange-4);
+    --tag-dark-orange-icon-color--default: var(--color-accent-orange-10);
+    --tag-dark-orange-icon-color--hover: var(--color-accent-orange-11);
+    --tag-dark-orange-text-color--default: var(--color-accent-orange-10);
+    --tag-dark-orange-text-color--hover: var(--color-accent-orange-11);
+    --tag-dark-pink-bg-color--default: var(--color-accent-pink-3);
+    --tag-dark-pink-bg-color--hover: var(--color-accent-pink-4);
+    --tag-dark-pink-icon-color--default: var(--color-accent-pink-10);
+    --tag-dark-pink-icon-color--hover: var(--color-accent-pink-11);
+    --tag-dark-pink-text-color--default: var(--color-accent-pink-10);
+    --tag-dark-pink-text-color--hover: var(--color-accent-pink-11);
+    --tag-dark-primary-bg-color--default: var(--color-nightsky-a8);
+    --tag-dark-primary-bg-color--hover: var(--color-nightsky-a9);
     --tag-dark-primary-icon-color--default: var(--color-text-primary);
     --tag-dark-primary-icon-color--hover: var(--color-text-primary);
     --tag-dark-primary-text-color--default: var(--color-text-primary);
     --tag-dark-primary-text-color--hover: var(--color-text-primary);
-    --tag-dark-purple-bg-color--default: var(--color-accent-purple-2);
-    --tag-dark-purple-bg-color--hover: var(--color-accent-purple-3);
-    --tag-dark-purple-icon-color--default: var(--color-accent-purple-9);
-    --tag-dark-purple-icon-color--hover: var(--color-accent-purple-9);
-    --tag-dark-purple-text-color--default: var(--color-accent-purple-9);
-    --tag-dark-purple-text-color--hover: var(--color-accent-purple-9);
-    --tag-dark-red-bg-color--default: var(--color-accent-red-2);
-    --tag-dark-red-bg-color--hover: var(--color-accent-red-3);
-    --tag-dark-red-icon-color--default: var(--color-accent-red-9);
-    --tag-dark-red-icon-color--hover: var(--color-accent-red-9);
-    --tag-dark-red-text-color--default: var(--color-accent-red-9);
-    --tag-dark-red-text-color--hover: var(--color-accent-red-9);
-    --tag-dark-yellow-bg-color--default: var(--color-accent-yellow-2);
-    --tag-dark-yellow-bg-color--hover: var(--color-accent-yellow-3);
-    --tag-dark-yellow-icon-color--default: var(--color-accent-yellow-9);
-    --tag-dark-yellow-icon-color--hover: var(--color-accent-yellow-9);
-    --tag-dark-yellow-text-color--default: var(--color-accent-yellow-9);
-    --tag-dark-yellow-text-color--hover: var(--color-accent-yellow-9);
+    --tag-dark-purple-bg-color--default: var(--color-accent-purple-3);
+    --tag-dark-purple-bg-color--hover: var(--color-accent-purple-4);
+    --tag-dark-purple-icon-color--default: var(--color-accent-purple-10);
+    --tag-dark-purple-icon-color--hover: var(--color-accent-purple-11);
+    --tag-dark-purple-text-color--default: var(--color-accent-purple-10);
+    --tag-dark-purple-text-color--hover: var(--color-accent-purple-11);
+    --tag-dark-red-bg-color--default: var(--color-accent-red-3);
+    --tag-dark-red-bg-color--hover: var(--color-accent-red-4);
+    --tag-dark-red-icon-color--default: var(--color-accent-red-10);
+    --tag-dark-red-icon-color--hover: var(--color-accent-red-11);
+    --tag-dark-red-text-color--default: var(--color-accent-red-10);
+    --tag-dark-red-text-color--hover: var(--color-accent-red-11);
+    --tag-dark-yellow-bg-color--default: var(--color-accent-yellow-3);
+    --tag-dark-yellow-bg-color--hover: var(--color-accent-yellow-4);
+    --tag-dark-yellow-icon-color--default: var(--color-accent-yellow-10);
+    --tag-dark-yellow-icon-color--hover: var(--color-accent-yellow-11);
+    --tag-dark-yellow-text-color--default: var(--color-accent-yellow-10);
+    --tag-dark-yellow-text-color--hover: var(--color-accent-yellow-11);
     --tag-light-blue-bg-color--default: var(--color-accent-blue-7);
     --tag-light-blue-bg-color--hover: var(--color-accent-blue-8);
     --tag-light-blue-icon-color--default: var(--color-accent-blue-1);
@@ -416,8 +432,8 @@
     --tag-light-pink-icon-color--hover: var(--color-accent-pink-1);
     --tag-light-pink-text-color--default: var(--color-accent-pink-1);
     --tag-light-pink-text-color--hover: var(--color-accent-pink-1);
-    --tag-light-primary-bg-color--default: var(--color-surface-10);
-    --tag-light-primary-bg-color--hover: #5a5abf;
+    --tag-light-primary-bg-color--default: var(--color-nightsky-10);
+    --tag-light-primary-bg-color--hover: hsl(240deg 44% 55%);
     --tag-light-primary-icon-color--default: var(--color-text-primary);
     --tag-light-primary-icon-color--hover: var(--color-text-primary);
     --tag-light-primary-text-color--default: var(--color-text-primary);
@@ -447,7 +463,7 @@
     --toast-danger-icon-color--default: var(--color-accent-red-7);
     --toast-danger-text-color--default: var(--color-accent-red-11);
     --toast-default-bg-color--default: var(--color-surface-6);
-    --toast-default-border-color--default: #5d5a9f;
+    --toast-default-border-color--default: hsl(243deg 28% 49%);
     --toast-default-close-color--default: var(--color-text-tertiary);
     --toast-default-close-color--hover: var(--color-text-secondary);
     --toast-default-icon-color--default: var(--color-text-accent);
@@ -470,7 +486,7 @@
     --toast-warning-close-color--hover: var(--color-accent-yellow-10);
     --toast-warning-icon-color--default: var(--color-accent-yellow-7);
     --toast-warning-text-color--default: var(--color-accent-yellow-11);
-    --tooltip-bg-color--default: var(--color-surface-8);
+    --tooltip-bg-color--default: var(--color-nightsky-8);
     --tooltip-text-color--default: var(--color-text-primary);
   }
 }
diff --git a/packages/cyberstorm-theme/src/components/componentsSizes.css b/packages/cyberstorm-theme/src/components/componentsSizes.css
index f60e2f349..5f602ea31 100644
--- a/packages/cyberstorm-theme/src/components/componentsSizes.css
+++ b/packages/cyberstorm-theme/src/components/componentsSizes.css
@@ -15,17 +15,17 @@
     --button-lg-font-size: var(--font-size-body-lg);
     --button-lg-gap: var(--space-16);
     --button-lg-padding-inline: var(--space-16);
-    --button-lg-height: 2.75rem;
+    --button-lg-height: 2.5rem;
     --button-lg-icon-inline-size: 1em;
-    --button-lg-icon-inline-size--only-icon: var(--font-size-body-lg);
+    --button-lg-icon-inline-size--only-icon: 1rem;
     --button-md-border-radius: var(--radius-md);
     --button-md-padding-block: 0rem;
     --button-md-font-size: var(--font-size-body-md);
     --button-md-gap: var(--space-16);
     --button-md-padding-inline: var(--space-16);
-    --button-md-height: 2.75rem;
+    --button-md-height: 2.5rem;
     --button-md-icon-inline-size: 1em;
-    --button-md-icon-inline-size--only-icon: var(--font-size-body-lg);
+    --button-md-icon-inline-size--only-icon: 1rem;
     --button-sm-border-radius: var(--radius-md);
     --button-sm-padding-block: 0rem;
     --button-sm-gap: var(--space-12);
@@ -33,7 +33,7 @@
     --button-sm-font-size: var(--font-size-body-md);
     --button-sm-height: 2.25rem;
     --button-sm-icon-inline-size: 1em;
-    --button-sm-icon-inline-size--only-icon: var(--font-size-body-lg);
+    --button-sm-icon-inline-size--only-icon: 1rem;
     --button-xs-border-radius: var(--radius-md);
     --button-xs-padding-block: 0rem;
     --button-xs-font-size: var(--font-size-body-sm);
@@ -41,7 +41,7 @@
     --button-xs-padding-inline: var(--space-12);
     --button-xs-height: 1.875rem;
     --button-xs-icon-inline-size: 1em;
-    --button-xs-icon-inline-size--only-icon: var(--font-size-body-lg);
+    --button-xs-icon-inline-size--only-icon: 0.875rem;
     --card-package-shared-border-radius: var(--radius-md);
     --card-package-shared--author-font-weight: var(--font-weight-regular);
     --card-package-shared--prefix-padding-right: var(--space-4);
@@ -50,7 +50,7 @@
     --card-package-shared--description-font-style: normal;
     --card-package-shared--description-font-weight: var(--font-weight-regular);
     --card-package-shared--description-line-height: var(--line-height-md);
-    --card-package-shared--tags-gap: var(--gap-xxs);
+    --card-package-shared--tags-gap: var(--gap-2xs);
     --card-package-shared--footer-gap: var(--gap-sm);
     --card-package-md-card--image-wrapper-border-bottom-left-radius: 0;
     --card-package-md-card--image-wrapper-border-bottom-right-radius: 0;
@@ -78,7 +78,7 @@
       --radius-md
     );
     --card-package-md-featured--content-padding: var(--space-16) var(--space-24);
-    --card-package-md-featured--info-gap: var(--gap-xxxs);
+    --card-package-md-featured--info-gap: var(--gap-3xs);
     --card-package-md-featured--title-font-size: 1.313rem;
     --card-package-md-featured--title-line-height: 160%;
     --card-package-md-featured--author-font-size: var(--font-size-body-md);
@@ -142,7 +142,7 @@
     --divider-height: 0.063rem;
     --divider-md-margin: 0.25rem 0rem;
     --input-md-border-radius: var(--radius-md);
-    --input-md-height: 2.75rem;
+    --input-md-height: 2.5rem;
     --input-sm-border-radius: var(--radius-md);
     --input-sm-height: 2.25rem;
     --meta-item-16-font-size: var(--font-size-body-lg, 1rem);
@@ -200,23 +200,23 @@
     --switch-knob-sm-border-radius: var(--radius-full);
     --tab-nav-item-border-style--default: solid;
     --tag-md-border-radius: var(--radius-md);
-    --tag-md-padding-block: var(--space-4);
-    --tag-md-gap: var(--space-6);
-    --tag-md-padding-inline: var(--space-8);
     --tag-md-font-size: var(--font-size-body-md);
+    --tag-md-gap: var(--space-6);
     --tag-md-height: 1.875rem;
+    --tag-md-padding-block: var(--space-4);
+    --tag-md-padding-inline: var(--space-8);
     --tag-sm-border-radius: var(--radius-md);
-    --tag-sm-padding-block: var(--space-4);
-    --tag-sm-gap: var(--space-6);
-    --tag-sm-padding-inline: var(--space-6);
     --tag-sm-font-size: var(--font-size-body-sm);
+    --tag-sm-gap: var(--space-6);
     --tag-sm-height: 1.5rem;
+    --tag-sm-padding-block: var(--space-4);
+    --tag-sm-padding-inline: var(--space-6);
     --tag-xs-border-radius: var(--radius-md);
+    --tag-xs-font-size: var(--font-size-body-xs);
     --tag-xs-gap: var(--space-4);
+    --tag-xs-height: var(--space-20);
     --tag-xs-padding-block: var(--space-4);
     --tag-xs-padding-inline: var(--space-6);
-    --tag-xs-font-size: var(--font-size-body-xs);
-    --tag-xs-height: var(--space-20);
     --toast-md-gap: var(--space-16);
     --toast-md-padding-block: var(--space-16);
     --toast-md-padding-inline: var(--space-24);
diff --git a/packages/cyberstorm-theme/src/styles/colors.css b/packages/cyberstorm-theme/src/styles/colors.css
index 7f62da99d..78851b593 100644
--- a/packages/cyberstorm-theme/src/styles/colors.css
+++ b/packages/cyberstorm-theme/src/styles/colors.css
@@ -13,8 +13,10 @@
     /* Misc */
     --color-crown: var(--color-accent-yellow-5);
     --animation-timing-1: cubic-bezier(0.16, 1, 0.3, 1);
-    --shadow-lg: 0px 0px 4px 0px rgb(0 0 0 / 0.4),
-      0px 6px 8px 0px rgb(0 0 0 / 0.5);
+    --shadow-lg: 0 0 4px 0 rgb(0 0 0 / 0.4), 0 6px 8px 0 rgb(0 0 0 / 0.5);
+    --shadow-md: 0 0 4px 0 rgb(0 0 0 / 0.4), 0 4px 8px 0 rgb(0 0 0 / 0.4);
+    --shadow-sm: 0 0 1px 0 rgb(0 0 0 / 0.4), 0 1px 2px 0 rgb(0 0 0 / 0.9);
+    --shadow-xl: 0 0 4px 0 rgb(0 0 0 / 0.4), 0 12px 32px 0 rgb(0 0 0 / 0.5);
     --dropshadow-default: drop-shadow(0 1px 1px #0d0d21);
     --textshadow-default: 0 1px 1px #0d0d21;
 
diff --git a/packages/cyberstorm-theme/src/styles/globals.css b/packages/cyberstorm-theme/src/styles/globals.css
index 9cbe32565..e6c4f0c50 100644
--- a/packages/cyberstorm-theme/src/styles/globals.css
+++ b/packages/cyberstorm-theme/src/styles/globals.css
@@ -27,18 +27,19 @@
 
     /* Space affecting layout values */
 
-    --gap-xxxs: var(--space-2);
-    --gap-xxs: var(--space-4);
+    --gap-3xs: var(--space-2);
+    --gap-2xs: var(--space-4);
     --gap-xs: var(--space-8);
     --gap-sm: var(--space-12);
     --gap-md: var(--space-16);
+    --gap-lg: var(--space-20);
     --gap-xl: var(--space-24);
-    --gap-xxl: var(--space-28);
-    --gap-xxxl: var(--space-32);
-    --gap-xxxxl: var(--space-36);
-    --gap-xxxxxl: var(--space-40);
-    --gap-xxxxxxl: var(--space-44);
-    --gap-xxxxxxxl: var(--space-48);
+    --gap-2xl: var(--space-28);
+    --gap-3xl: var(--space-32);
+    --gap-4xl: var(--space-36);
+    --gap-5xl: var(--space-40);
+    --gap-6xl: var(--space-44);
+    --gap-7xl: var(--space-48);
     --page-margin: 16rem;
     --page-margin-top: 25px;
 
diff --git a/packages/cyberstorm-theme/src/styles/layout.css b/packages/cyberstorm-theme/src/styles/layout.css
index 1aafae6bb..1fbe0fc10 100644
--- a/packages/cyberstorm-theme/src/styles/layout.css
+++ b/packages/cyberstorm-theme/src/styles/layout.css
@@ -2,7 +2,7 @@
   :root {
     --section-bg: var(--color-surface-2);
     --section-border-radius: var(--radius-sm);
-    --section-gap: var(--gap-xxs);
+    --section-gap: var(--gap-2xs);
   }
 
   /* CONTAINER, basically flex wrapper utility class */
diff --git a/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css b/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
index a80d36d1f..17045185c 100644
--- a/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
+++ b/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-xxxxxxxl);
+  gap: var(--gap-7xl);
 }
 
 .inputContainer {
diff --git a/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css b/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
index 94685b9c8..049214e8d 100644
--- a/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
+++ b/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-xxxxxxxl);
+  gap: var(--gap-7xl);
 }
 
 .inputContainer {
diff --git a/packages/cyberstorm/src/newComponents/Drawer/Drawer.css b/packages/cyberstorm/src/newComponents/Drawer/Drawer.css
index d939f57d9..f20f513d2 100644
--- a/packages/cyberstorm/src/newComponents/Drawer/Drawer.css
+++ b/packages/cyberstorm/src/newComponents/Drawer/Drawer.css
@@ -30,7 +30,7 @@
 
   .drawer__fake-backdrop {
     width: 100%;
-    height: 10%;
+    height: 40%;
     background: transparent;
   }
 
@@ -43,7 +43,7 @@
 
     width: 100%;
     height: max-content;
-    max-height: 90%;
+    max-height: 60%;
     border: var(--drawer-border);
 
     border-radius: var(--drawer-border-radius);
diff --git a/packages/cyberstorm/src/newComponents/EmptyState/EmptyState.css b/packages/cyberstorm/src/newComponents/EmptyState/EmptyState.css
index 53cecdace..5800a00a5 100644
--- a/packages/cyberstorm/src/newComponents/EmptyState/EmptyState.css
+++ b/packages/cyberstorm/src/newComponents/EmptyState/EmptyState.css
@@ -1,7 +1,7 @@
 .empty-state {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-xxxl);
+  gap: var(--gap-3xl);
   color: var(--color-text--default);
 }
 
diff --git a/packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.css b/packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.css
index 804b5d9ee..9947f584c 100644
--- a/packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.css
+++ b/packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.css
@@ -136,7 +136,7 @@
     z-index: 9999;
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xxs);
+    gap: var(--gap-2xs);
     width: 100%;
     min-height: 1.5rem;
     max-height: 12rem;
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
index e3a7689f1..f9fcdb060 100644
--- a/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
+++ b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
@@ -77,32 +77,32 @@ export const TextInput = memo(function TextInput(props: TextInputProps) {
           {leftIcon}
         </NewIcon>
       ) : null}
-      {csSize === "default" ? (
+      {csSize === "textarea" ? (
         <Input
-          {...(fProps as InputTextInputProps)}
-          primitiveType={"textInput"}
+          {...(fProps as InputTextAreaProps)}
+          primitiveType={"textArea"}
           rootClasses={classnames(
             "text-input",
             leftIcon ? "text-input--has-left-icon" : null,
             clearValue ? "text-input--has-clear-value" : null,
             ...componentClasses("text-input", csVariant, csSize, csModifiers)
           )}
-          ref={inputRef}
+          ref={textareaRef}
           onKeyDown={onEnter}
         >
           {children}
         </Input>
       ) : (
         <Input
-          {...(fProps as InputTextAreaProps)}
-          primitiveType={"textArea"}
+          {...(fProps as InputTextInputProps)}
+          primitiveType={"textInput"}
           rootClasses={classnames(
             "text-input",
             leftIcon ? "text-input--has-left-icon" : null,
             clearValue ? "text-input--has-clear-value" : null,
             ...componentClasses("text-input", csVariant, csSize, csModifiers)
           )}
-          ref={textareaRef}
+          ref={inputRef}
           onKeyDown={onEnter}
         >
           {children}