feat(frontend): Update fonts + updates to agent page (#8886)

Updates fonts on most pages to match the design more + updates the agent page, needs some more finishing up but nearly done ### Updated video showing most pages https://github.com/user-attachments/assets/d90de22f-f2bd-477c-b3e7-544b5a17f2b7 --------- Co-authored-by: SwiftyOS <craigswift13@gmail.com>
2026-04-08 03:00:28 -04:00 · 2024-12-09 15:01:18 +00:00
parent 6d6ed348fa
commit 14ecaf861e
19 changed files with 250 additions and 148 deletions
--- a/autogpt_platform/frontend/src/app/store/(user)/dashboard/page.tsx
+++ b/autogpt_platform/frontend/src/app/store/(user)/dashboard/page.tsx
@@ -100,22 +100,32 @@ export default function Page({
  }, []);

  return (
-    <main className="flex-1 px-6 py-8 md:px-10">
+    <main className="flex-1 py-8">
      {/* Header Section */}
-      <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div>
-          <h1 className="font-neue text-3xl font-medium leading-9 tracking-tight text-neutral-900 dark:text-neutral-100">
-            Submit a New Agent
+      <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+        <div className="space-y-6">
+          <h1 className="text-4xl font-medium text-neutral-900 dark:text-neutral-100">
+            Agent dashboard
          </h1>
-          <p className="mt-2 font-neue text-sm text-[#707070] dark:text-neutral-400">
-            Select from the list of agents you currently have, or upload from
-            your local machine.
-          </p>
+          <div className="space-y-2">
+            <h2 className="text-xl font-medium text-neutral-900 dark:text-neutral-100">
+              Submit a New Agent
+            </h2>
+            <p className="text-sm text-[#707070] dark:text-neutral-400">
+              Select from the list of agents you currently have, or upload from
+              your local machine.
+            </p>
+          </div>
        </div>
        <PublishAgentPopout
          trigger={
-            <Button variant="default" size="lg" onClick={onOpenPopout}>
-              Create New Agent
+            <Button
+              variant="default"
+              size="sm"
+              onClick={onOpenPopout}
+              className="h-9 rounded-full bg-black px-4 text-sm font-medium text-white hover:bg-neutral-700 dark:hover:bg-neutral-600"
+            >
+              Submit agent
            </Button>
          }
          openPopout={openPopout}
@@ -129,7 +139,7 @@ export default function Page({
      {/* Agents Section */}
      <div>
        <h2 className="mb-4 text-xl font-bold text-neutral-900 dark:text-neutral-100">
-          Your Agents
+          Your uploaded agents
        </h2>
        <AgentTable
          agents={
--- a/autogpt_platform/frontend/src/app/store/(user)/layout.tsx
+++ b/autogpt_platform/frontend/src/app/store/(user)/layout.tsx
@@ -17,7 +17,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen w-screen max-w-[1360px] flex-col lg:flex-row">
      <Sidebar linkGroups={sidebarLinkGroups} />
-      {children}
+      <div className="pl-4">
+        {children}
+      </div>
    </div>
  );
 }
--- a/autogpt_platform/frontend/src/app/store/search/page.tsx
+++ b/autogpt_platform/frontend/src/app/store/search/page.tsx
@@ -120,10 +120,10 @@ function SearchResults({
      <div className="mx-auto min-h-screen max-w-[1440px] px-10 lg:min-w-[1440px]">
        <div className="mt-8 flex items-center">
          <div className="flex-1">
-            <h2 className="font-['Poppins'] text-base font-medium text-neutral-800 dark:text-neutral-200">
+            <h2 className="font-geist text-base font-medium text-neutral-800 dark:text-neutral-200 leading-normal">
              Results for:
            </h2>
-            <h1 className="font-['Poppins'] text-2xl font-semibold text-neutral-800 dark:text-neutral-100">
+            <h1 className="font-poppins text-2xl font-semibold text-neutral-800 dark:text-neutral-100 leading-loose">
              {searchTerm}
            </h1>
          </div>
--- a/autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx
@@ -31,22 +31,22 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
  return (
    <div className="w-full max-w-[396px] px-4 sm:px-6 lg:w-[396px] lg:px-0">
      {/* Title */}
-      <div className="mb-3 w-full font-['Poppins'] text-2xl font-medium leading-normal text-neutral-900 dark:text-neutral-100 sm:text-3xl lg:mb-4 lg:text-[35px] lg:leading-10">
+      <div className="mb-3 w-full font-poppins text-2xl font-medium leading-normal text-neutral-900 dark:text-neutral-100 sm:text-3xl lg:mb-4 lg:text-[35px] lg:leading-10">
        {name}
      </div>

      {/* Creator */}
      <div className="mb-3 flex w-full items-center gap-1.5 lg:mb-4">
-        <div className="font-['Geist'] text-base font-normal text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
+        <div className="font-geist text-base font-normal text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
          by
        </div>
-        <div className="font-['Geist'] text-base font-medium text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
+        <div className="font-geist text-base font-medium text-neutral-800 dark:text-neutral-200 sm:text-lg lg:text-xl">
          {creator}
        </div>
      </div>

      {/* Short Description */}
-      <div className="mb-4 line-clamp-2 w-full font-['Geist'] text-base font-normal leading-normal text-neutral-600 dark:text-neutral-300 sm:text-lg lg:mb-6 lg:text-xl lg:leading-7">
+      <div className="mb-4 line-clamp-2 w-full font-geist text-base font-normal leading-normal text-neutral-600 dark:text-neutral-300 sm:text-lg lg:mb-6 lg:text-xl lg:leading-7">
        {shortDescription}
      </div>

@@ -54,7 +54,7 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
      <div className="mb-4 w-full lg:mb-6">
        <button className="inline-flex w-full items-center justify-center gap-2 rounded-[38px] bg-violet-600 px-4 py-3 transition-colors hover:bg-violet-700 sm:w-auto sm:gap-2.5 sm:px-5 sm:py-3.5 lg:px-6 lg:py-4">
          <IconPlay className="h-5 w-5 text-white sm:h-5 sm:w-5 lg:h-6 lg:w-6" />
-          <span className="font-['Poppins'] text-base font-medium text-neutral-50 sm:text-lg">
+          <span className="font-poppins text-base font-medium text-neutral-50 sm:text-lg">
            Run agent
          </span>
        </button>
@@ -63,12 +63,12 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
      {/* Rating and Runs */}
      <div className="mb-4 flex w-full items-center justify-between lg:mb-6">
        <div className="flex items-center gap-1.5 sm:gap-2">
-          <span className="whitespace-nowrap font-['Geist'] text-base font-semibold text-neutral-800 dark:text-neutral-200 sm:text-lg">
+          <span className="whitespace-nowrap font-geist text-base font-semibold text-neutral-800 dark:text-neutral-200 sm:text-lg">
            {rating.toFixed(1)}
          </span>
          <div className="flex gap-0.5">{StarRatingIcons(rating)}</div>
        </div>
-        <div className="whitespace-nowrap font-['Geist'] text-base font-semibold text-neutral-800 dark:text-neutral-200 sm:text-lg">
+        <div className="whitespace-nowrap font-geist text-base font-semibold text-neutral-800 dark:text-neutral-200 sm:text-lg">
          {runs.toLocaleString()} runs
        </div>
      </div>
@@ -81,7 +81,7 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
        <div className="mb-1.5 text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:mb-2 sm:text-sm">
          Description
        </div>
-        <div className="w-full whitespace-pre-line font-['Geist'] text-sm font-normal text-neutral-600 dark:text-neutral-300 sm:text-base">
+        <div className="w-full whitespace-pre-line font-geist text-sm font-normal text-neutral-600 dark:text-neutral-300 sm:text-base">
          {longDescription}
        </div>
      </div>
@@ -103,21 +103,6 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
        </div>
      </div>

-      {/* Rate Agent */}
-      <div className="mb-4 flex w-full flex-col gap-1.5 sm:gap-2 lg:mb-6">
-        <div className="text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:text-sm">
-          Rate agent
-        </div>
-        <div className="flex gap-1">
-          {[1, 2, 3, 4, 5].map((star) => (
-            <IconStar
-              key={star}
-              className="h-4 w-4 cursor-pointer text-neutral-300 hover:text-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-200 sm:h-5 sm:w-5"
-            />
-          ))}
-        </div>
-      </div>
-
      {/* Version History */}
      <div className="flex w-full flex-col gap-0.5 sm:gap-1">
        <div className="text-xs font-medium text-neutral-800 dark:text-neutral-200 sm:text-sm">
--- a/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx
@@ -21,14 +21,14 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
  };

  return (
-    <div className="relative mx-auto h-auto min-h-[300px] w-full max-w-[1360px] px-4 md:min-h-[400px] md:px-6 lg:h-[459px] lg:px-8">
+    <div className="relative mx-auto h-auto min-h-[300px] w-full max-w-[1360px] md:min-h-[400px] lg:h-[459px]">
      {/* Top border */}
      <div className="left-0 top-0 h-px w-full bg-gray-200 dark:bg-gray-700" />

      {/* Title */}
-      <div className="left-4 top-[26px] mb-4 pt-4 font-['Poppins'] text-base font-semibold leading-7 text-neutral-800 dark:text-neutral-200 md:left-6 md:text-lg lg:left-8">
+      <h2 className="mt-6 mb-8 text-2xl leading-7 text-neutral-800 dark:text-neutral-200">
        {title}
-      </div>
+      </h2>

      {/* Content Container */}
      <div className="absolute left-1/2 top-1/2 w-full max-w-[900px] -translate-x-1/2 -translate-y-1/2 px-4 pt-16 text-center md:px-6 md:pt-10 lg:px-0">
--- a/autogpt_platform/frontend/src/components/agptui/CreatorCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/CreatorCard.tsx
@@ -46,18 +46,17 @@ export const CreatorCard: React.FC<CreatorCardProps> = ({
        </div>
      </div>

-      <div className="flex flex-1 flex-col items-start justify-start self-stretch">
-        <div className="mb-1 self-stretch font-['Poppins'] text-2xl font-semibold leading-loose text-neutral-800 dark:text-neutral-200">
+      <div className="flex flex-col gap-2">
+        <h3 className="font-poppins text-2xl font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
          {creatorName}
-        </div>
-        <div className="line-clamp-2 self-stretch font-['Geist'] text-base font-normal leading-normal text-neutral-800 dark:text-neutral-200">
+        </h3>
+        <p className="font-geist text-sm font-normal leading-normal text-neutral-600 dark:text-neutral-400">
          {bio}
+        </p>
+        <div className="font-geist text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+          {agentsUploaded} agents
        </div>
      </div>
-
-      <div className="self-stretch font-['Geist'] text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
-        {agentsUploaded} agents
-      </div>
    </div>
  );
 };
--- a/autogpt_platform/frontend/src/components/agptui/CreditsCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/CreditsCard.tsx
@@ -25,10 +25,10 @@ const CreditsCard = ({ credits }: CreditsCardProps) => {
  return (
    <div className="inline-flex h-[60px] items-center gap-2.5 rounded-2xl bg-neutral-200 p-4 dark:bg-neutral-800">
      <div className="flex items-center gap-0.5">
-        <span className="font-['Poppins'] text-base font-semibold leading-7 text-neutral-900 dark:text-neutral-50">
+        <span className="p-ui-semibold text-base leading-7 text-neutral-900 dark:text-neutral-50">
          {currentCredits.toLocaleString()}
        </span>
-        <span className="pl-1 font-['Poppins'] text-base font-semibold leading-7 text-neutral-900 dark:text-neutral-50">
+        <span className="pl-1 p-ui text-base leading-7 text-neutral-900 dark:text-neutral-50">
          credits
        </span>
      </div>
--- a/autogpt_platform/frontend/src/components/agptui/FeaturedStoreCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/FeaturedStoreCard.tsx
@@ -34,16 +34,16 @@ export const FeaturedStoreCard: React.FC<FeaturedStoreCardProps> = ({
      data-testid="featured-store-card"
    >
      <div className="flex h-[188px] flex-col items-start justify-start gap-3 self-stretch">
-        <div className="self-stretch font-['Poppins'] text-[35px] font-medium leading-10 text-neutral-900 dark:text-neutral-100">
+        <h2 className="self-stretch font-poppins text-[35px] font-medium leading-10 text-neutral-900 dark:text-neutral-100">
          {agentName}
-        </div>
-        <div className="self-stretch font-['Geist'] text-xl font-normal leading-7 text-neutral-800 dark:text-neutral-200">
+        </h2>
+        <div className="self-stretch font-lead text-xl font-normal leading-7 text-neutral-800 dark:text-neutral-200">
          {subHeading}
        </div>
      </div>

      <div className="flex h-[489px] flex-col items-start justify-start gap-[18px] self-stretch">
-        <div className="self-stretch font-['Geist'] text-xl font-normal leading-7 text-neutral-800 dark:text-neutral-200">
+        <div className="self-stretch font-lead text-xl font-normal leading-7 text-neutral-800 dark:text-neutral-200">
          by {creatorName}
        </div>

@@ -56,7 +56,7 @@ export const FeaturedStoreCard: React.FC<FeaturedStoreCardProps> = ({
            className="rounded-xl transition-opacity duration-200 group-hover:opacity-0"
          />
          <div className="absolute inset-0 overflow-y-auto rounded-xl bg-white p-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 dark:bg-neutral-700">
-            <div className="font-['Geist'] text-base font-normal leading-normal text-neutral-800 dark:text-neutral-200">
+            <div className="font-geist text-base font-normal leading-normal text-neutral-800 dark:text-neutral-200">
              {description}
            </div>
          </div>
@@ -74,11 +74,11 @@ export const FeaturedStoreCard: React.FC<FeaturedStoreCardProps> = ({
        </div>

        <div className="inline-flex items-center justify-between self-stretch">
-          <div className="font-['Inter'] text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+          <div className="font-large-geist text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
            {runs.toLocaleString()} runs
          </div>
          <div className="flex items-center justify-start gap-[5px]">
-            <div className="font-['Inter'] text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+            <div className="font-large-geist text-lg font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
              {rating.toFixed(1)}
            </div>
            <div
--- a/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/Navbar.tsx
@@ -7,6 +7,10 @@ import {
  IconBuilder,
  IconMarketplace,
  IconLibrary,
+  IconMonitor,
+  IconBoxes,
+  IconShoppingCart,
+  IconLaptop,
 } from "@/components/ui/icons";
 import { MobileNavBar } from "./MobileNavBar";
 import { Button } from "./Button";
@@ -116,7 +120,9 @@ export const Navbar = async ({
                          ? IconType.Library
                          : link.name === "Build"
                            ? IconType.Builder
-                            : IconType.LayoutDashboard,
+                            : link.name === "Monitor"
+                              ? IconType.Monitor
+                              : IconType.LayoutDashboard,
                    text: link.name,
                    href: link.href,
                  })),
--- a/autogpt_platform/frontend/src/components/agptui/NavbarLink.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/NavbarLink.tsx
@@ -2,9 +2,10 @@
 import Link from "next/link";
 import {
  IconType,
-  IconMarketplace,
-  IconBuilder,
+  IconShoppingCart,
+  IconBoxes,
  IconLibrary,
+  IconLaptop,
 } from "@/components/ui/icons";
 import { usePathname } from "next/navigation";

@@ -27,12 +28,17 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
      } flex items-center justify-start gap-3`}
    >
      {href === "/store" && (
-        <IconMarketplace
+        <IconShoppingCart
          className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
        />
      )}
      {href === "/build" && (
-        <IconBuilder
+        <IconBoxes
+          className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
+        />
+      )}
+      {href === "/monitor" && (
+        <IconLaptop
          className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
        />
      )}
@@ -43,7 +49,7 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
      )}
      <Link href={href}>
        <div
-          className={`font-['Poppins'] text-xl font-medium leading-7 ${
+          className={`font-poppins text-xl font-medium leading-7 ${
            activeLink === href
              ? "text-neutral-50 dark:text-neutral-900"
              : "text-neutral-900 dark:text-neutral-50"
--- a/autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.tsx
@@ -9,7 +9,7 @@ import { Button } from "./Button";

 import { IconPersonFill } from "@/components/ui/icons";

-import AutoGPTServerAPI from "@/lib/autogpt-server-api/client";
+import { AutoGPTServerAPI } from "@/lib/autogpt-server-api/client";
 import { CreatorDetails, ProfileDetails } from "@/lib/autogpt-server-api/types";
 import { createClient } from "@/lib/supabase/client";
 import { Separator } from "@/components/ui/separator";
@@ -108,8 +108,8 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
  };

  return (
-    <div className="w-full min-w-[600px] px-4 sm:px-8">
-      <h1 className="mb-6 font-['Poppins'] text-[28px] font-medium text-neutral-900 dark:text-neutral-100 sm:mb-8 sm:text-[35px]">
+    <div className="w-full min-w-[800px] px-4 sm:px-8">
+      <h1 className="mb-6 font-circular text-[28px] font-normal text-neutral-900 dark:text-neutral-100 sm:mb-8 sm:text-[35px]">
        Profile
      </h1>

@@ -127,7 +127,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
              <IconPersonFill className="absolute left-[30px] top-[24px] h-[77.80px] w-[70.63px] text-[#7e7e7e] dark:text-[#999999]" />
            )}
          </div>
-          <label className="mt-11 inline-flex h-[43px] items-center justify-center rounded-[22px] border border-slate-900 bg-slate-900 px-4 py-2 font-['Geist'] text-sm font-medium leading-normal text-slate-50 transition-colors hover:bg-white hover:text-slate-900 dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-100">
+          <label className="mt-11 inline-flex h-[43px] items-center justify-center rounded-[22px] bg-[#15171A] px-6 py-2 font-circular text-sm font-normal text-white transition-colors hover:bg-[#2D2F34] dark:bg-white dark:text-[#15171A] dark:hover:bg-[#E5E5E5]">
            <input
              type="file"
              accept="image/*"
@@ -145,7 +145,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {

        <form className="space-y-4 sm:space-y-6" onSubmit={submitForm}>
          <div className="w-full">
-            <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950 dark:text-slate-50">
+            <label className="mb-1.5 block font-circular text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
              Display name
            </label>
            <div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
@@ -154,7 +154,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
                name="displayName"
                defaultValue={profileData.name}
                placeholder="Enter your display name"
-                className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none dark:text-[#999999]"
+                className="w-full border-none bg-transparent font-circular text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
                onChange={(e) => {
                  const newProfileData = {
                    ...profileData,
@@ -167,7 +167,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
          </div>

          <div className="w-full">
-            <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950 dark:text-slate-50">
+            <label className="mb-1.5 block font-circular text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
              Handle
            </label>
            <div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
@@ -176,7 +176,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
                name="handle"
                defaultValue={profileData.username}
                placeholder="@username"
-                className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none dark:text-[#999999]"
+                className="w-full border-none bg-transparent font-circular text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
                onChange={(e) => {
                  const newProfileData = {
                    ...profileData,
@@ -189,7 +189,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
          </div>

          <div className="w-full">
-            <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950 dark:text-slate-50">
+            <label className="mb-1.5 block font-circular text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
              Bio
            </label>
            <div className="h-[220px] rounded-2xl border border-slate-200 py-2.5 pl-4 pr-4 dark:border-slate-700 dark:bg-slate-800">
@@ -197,7 +197,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
                name="bio"
                defaultValue={profileData.description}
                placeholder="Tell us about yourself..."
-                className="h-full w-full resize-none border-none bg-transparent font-['Geist'] text-base font-normal text-[#666666] focus:outline-none dark:text-[#999999]"
+                className="h-full w-full resize-none border-none bg-transparent font-circular text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
                onChange={(e) => {
                  const newProfileData = {
                    ...profileData,
@@ -210,10 +210,10 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
          </div>

          <section className="mb-8">
-            <h2 className="mb-4 font-['Poppins'] text-lg font-semibold leading-7 text-neutral-500 dark:text-neutral-400">
+            <h2 className="mb-4 font-circular text-lg font-normal leading-7 text-neutral-700 dark:text-neutral-300">
              Your links
            </h2>
-            <p className="mb-6 font-['Geist'] text-base font-medium leading-tight text-slate-950 dark:text-slate-50">
+            <p className="mb-6 font-circular text-base font-normal leading-tight text-neutral-600 dark:text-neutral-400">
              You can display up to 5 links on your profile
            </p>

@@ -222,7 +222,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
                const link = profileData.links[linkNum - 1];
                return (
                  <div key={linkNum} className="w-full">
-                    <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950 dark:text-slate-50">
+                    <label className="mb-1.5 block font-circular text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
                      Link {linkNum}
                    </label>
                    <div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
@@ -231,7 +231,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
                        name={`link${linkNum}`}
                        placeholder="https://"
                        defaultValue={link || ""}
-                        className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none dark:text-[#999999]"
+                        className="w-full border-none bg-transparent font-circular text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
                        onChange={(e) => {
                          const newProfileData = {
                            ...profileData,
@@ -255,7 +255,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
            <Button
              type="button"
              variant="secondary"
-              className="h-[50px] rounded-[35px] bg-neutral-200 px-6 py-3 font-['Geist'] text-base font-medium text-neutral-800 transition-colors hover:bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:border-neutral-600 dark:hover:bg-neutral-600"
+              className="h-[50px] rounded-[35px] bg-neutral-200 px-6 py-3 font-circular text-base font-medium text-neutral-800 transition-colors hover:bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:border-neutral-600 dark:hover:bg-neutral-600"
              onClick={() => {
                setProfileData(profile);
              }}
@@ -266,7 +266,7 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
              type="submit"
              variant="default"
              disabled={isSubmitting}
-              className="h-[50px] rounded-[35px] bg-neutral-800 px-6 py-3 font-['Geist'] text-base font-medium text-white transition-colors hover:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-100"
+              className="h-[50px] rounded-[35px] bg-neutral-800 px-6 py-3 font-circular text-base font-medium text-white transition-colors hover:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-100"
              onClick={submitForm}
            >
              {isSubmitting ? "Saving..." : "Save changes"}
--- a/autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.tsx
@@ -64,12 +64,14 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
            />
          </button>
        </div>
-        <h2 className="mb-2 text-center font-['Poppins'] text-xl font-semibold leading-loose text-neutral-900 dark:text-neutral-100 sm:text-2xl">
-          Publish Agent
-        </h2>
-        <p className="text-center font-['Geist'] text-sm font-normal leading-7 text-neutral-600 dark:text-neutral-400 sm:text-base">
-          Select your project that you&apos;d like to publish
-        </p>
+        <div className="text-center">
+          <h3 className="font-poppins text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+            Publish Agent
+          </h3>
+          <p className="font-geist text-sm font-normal text-neutral-600 dark:text-neutral-400">
+            Select your project that you'd like to publish
+          </p>
+        </div>
      </div>

      {agents.length === 0 ? (
@@ -133,12 +135,12 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
                        />
                      </div>
                      <div className="p-3">
-                        <h3 className="font-['Geist'] text-sm font-medium leading-normal text-neutral-800 dark:text-neutral-100 sm:text-base">
+                        <p className="font-poppins text-base font-medium leading-normal text-neutral-800 dark:text-neutral-100 sm:text-base">
                          {agent.name}
-                        </h3>
-                        <p className="font-['Geist'] text-xs font-normal leading-[14px] text-neutral-500 dark:text-neutral-400 sm:text-sm">
-                          Edited {agent.lastEdited}
                        </p>
+                        <small className="font-geist text-xs font-normal leading-[14px] text-neutral-500 dark:text-neutral-400 sm:text-sm">
+                          Edited {agent.lastEdited}
+                        </small>
                      </div>
                    </div>
                  ))}
--- a/autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
@@ -142,10 +142,10 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
            />
          </button>
        </div>
-        <h2 className="text-center font-['Poppins'] text-2xl font-semibold leading-loose text-neutral-900 dark:text-neutral-100">
+        <h3 className="text-center h3-poppins text-2xl font-semibold leading-loose text-neutral-900 dark:text-neutral-100">
          Publish Agent
-        </h2>
-        <p className="text-center font-['Geist'] text-base font-normal leading-7 text-neutral-600 dark:text-neutral-400">
+        </h3>
+        <p className="text-center p text-base font-normal leading-7 text-neutral-600 dark:text-neutral-400">
          Write a bit of details about your agent
        </p>
      </div>
@@ -154,7 +154,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        <div className="space-y-1.5">
          <label
            htmlFor="title"
-            className="font-['Geist'] text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
+            className="text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
          >
            Title
          </label>
@@ -164,14 +164,14 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
            placeholder="Agent name"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
-            className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
+            className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 p-ui-medium text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
          />
        </div>

        <div className="space-y-1.5">
          <label
            htmlFor="subheader"
-            className="font-['Geist'] text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
+            className="text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
          >
            Subheader
          </label>
@@ -188,7 +188,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        <div className="space-y-1.5">
          <label
            htmlFor="slug"
-            className="font-['Geist'] text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
+            className="text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
          >
            Slug
          </label>
@@ -203,7 +203,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        </div>

        <div className="space-y-2.5">
-          <label className="font-['Geist'] text-sm font-medium leading-tight text-slate-950 dark:text-slate-300">
+          <label className="text-sm font-medium leading-tight text-slate-950 dark:text-slate-300">
            Thumbnail images
          </label>
          <div className="flex h-[350px] items-center justify-center overflow-hidden rounded-[20px] border border-neutral-300 p-2.5 dark:border-neutral-600">
@@ -295,11 +295,11 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        </div>

        <div className="space-y-1.5">
-          <label className="font-['Geist'] text-sm font-medium leading-tight text-slate-950 dark:text-slate-300">
+          <label className="text-sm font-medium leading-tight text-slate-950 dark:text-slate-300">
            AI image generator
          </label>
          <div className="flex items-center justify-between">
-            <p className="font-['Geist'] text-base font-normal leading-normal text-slate-700 dark:text-slate-400">
+            <p className="text-base font-normal leading-normal text-slate-700 dark:text-slate-400">
              You can use AI to generate a cover image for you
            </p>
            <Button
@@ -315,7 +315,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        <div className="space-y-1.5">
          <label
            htmlFor="youtube"
-            className="font-['Geist'] text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
+            className="text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
          >
            YouTube video link
          </label>
@@ -332,7 +332,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        <div className="space-y-1.5">
          <label
            htmlFor="category"
-            className="font-['Geist'] text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
+            className="text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
          >
            Category
          </label>
@@ -351,7 +351,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
        <div className="space-y-1.5">
          <label
            htmlFor="description"
-            className="font-['Geist'] text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
+            className="text-sm font-medium leading-tight text-slate-950 dark:text-slate-300"
          >
            Description
          </label>
--- a/autogpt_platform/frontend/src/components/agptui/SettingsInputForm.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/SettingsInputForm.tsx
@@ -64,7 +64,8 @@ export const SettingsInputForm = ({
        >
          My account
        </h2>
-        <div className="flex flex-col gap-7">
+        <div className="flex flex-col gap-7 max-w-[800px]">
+          {/* Password Input */}
          <div className="relative">
            <div className="flex flex-col gap-1.5">
              <label
@@ -78,12 +79,13 @@ export const SettingsInputForm = ({
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
-                className="w-full rounded-full border border-neutral-200 bg-transparent px-4 py-2.5 text-base text-slate-950 dark:border-neutral-700 dark:text-white"
+                className="w-full h-[50px] rounded-[35px] border border-neutral-200 bg-transparent px-6 py-3 text-base text-slate-950 dark:border-neutral-700 dark:text-white"
                aria-label="Password field"
              />
            </div>
          </div>

+          {/* Confirm Password Input */}
          <div className="relative">
            <div className="flex flex-col gap-1.5">
              <label
@@ -97,15 +99,10 @@ export const SettingsInputForm = ({
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
-                className="w-full rounded-full border border-neutral-200 bg-transparent px-4 py-2.5 text-base text-slate-950 dark:border-neutral-700 dark:text-white"
+                className="w-full h-[50px] rounded-[35px] border border-neutral-200 bg-transparent px-6 py-3 text-base text-slate-950 dark:border-neutral-700 dark:text-white"
                aria-label="Confirm Password field"
              />
            </div>
-            {!passwordsMatch && (
-              <p className="mt-1 text-sm text-red-500">
-                Passwords do not match
-              </p>
-            )}
          </div>
        </div>
      </section>
--- a/autogpt_platform/frontend/src/components/agptui/Sidebar.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/Sidebar.tsx
@@ -42,37 +42,37 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
            <div className="inline-flex h-[264px] flex-col items-start justify-start gap-6 p-3">
              <Link
                href="/store/dashboard"
-                className="inline-flex items-center justify-center gap-2.5 self-stretch rounded-xl px-7 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
+                className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
              >
                <IconDashboardLayout className="h-6 w-6" />
-                <div className="shrink grow basis-0 font-['Inter'] text-base font-medium leading-normal">
+                <div className="p-ui-medium text-base font-medium leading-normal">
                  Creator dashboard
                </div>
              </Link>
              <Link
                href="/integrations"
-                className="inline-flex items-center justify-center gap-2.5 self-stretch rounded-xl px-7 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
+                className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
              >
                <IconIntegrations className="h-6 w-6" />
-                <div className="shrink grow basis-0 font-['Inter'] text-base font-medium leading-normal">
+                <div className="p-ui-medium text-base font-medium leading-normal">
                  Integrations
                </div>
              </Link>
              <Link
                href="/store/profile"
-                className="inline-flex items-center justify-center gap-2.5 self-stretch rounded-xl px-7 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
+                className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
              >
                <IconProfile className="h-6 w-6" />
-                <div className="shrink grow basis-0 font-['Inter'] text-base font-medium leading-normal">
+                <div className="p-ui-medium text-base font-medium leading-normal">
                  Profile
                </div>
              </Link>
              <Link
                href="/store/settings"
-                className="inline-flex items-center justify-center gap-2.5 self-stretch rounded-xl px-7 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
+                className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
              >
                <IconSliders className="h-6 w-6" />
-                <div className="shrink grow basis-0 font-['Inter'] text-base font-medium leading-normal">
+                <div className="p-ui-medium text-base font-medium leading-normal">
                  Settings
                </div>
              </Link>
@@ -86,37 +86,37 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
          <div className="inline-flex h-[264px] flex-col items-start justify-start gap-6 p-3">
            <Link
              href="/store/dashboard"
-              className="inline-flex items-center justify-center gap-2.5 self-stretch rounded-xl px-7 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
+              className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
            >
              <IconDashboardLayout className="h-6 w-6" />
-              <div className="shrink grow basis-0 font-['Inter'] text-base font-medium leading-normal">
+              <div className="p-ui-medium text-base font-medium leading-normal">
                Agent dashboard
              </div>
            </Link>
            <Link
              href="/integrations"
-              className="inline-flex items-center justify-center gap-2.5 self-stretch rounded-xl px-7 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
+              className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
            >
              <IconIntegrations className="h-6 w-6" />
-              <div className="shrink grow basis-0 font-['Inter'] text-base font-medium leading-normal">
+              <div className="p-ui-medium text-base font-medium leading-normal">
                Integrations
              </div>
            </Link>
            <Link
              href="/store/profile"
-              className="inline-flex items-center justify-center gap-2.5 self-stretch rounded-xl px-7 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
+              className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
            >
              <IconProfile className="h-6 w-6" />
-              <div className="shrink grow basis-0 font-['Inter'] text-base font-medium leading-normal">
+              <div className="p-ui-medium text-base font-medium leading-normal">
                Profile
              </div>
            </Link>
            <Link
              href="/store/settings"
-              className="inline-flex items-center justify-center gap-2.5 self-stretch rounded-xl px-7 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
+              className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
            >
              <IconSliders className="h-6 w-6" />
-              <div className="shrink grow basis-0 font-['Inter'] text-base font-medium leading-normal">
+              <div className="p-ui-medium text-base font-medium leading-normal">
                Settings
              </div>
            </Link>
--- a/autogpt_platform/frontend/src/components/agptui/SortDropdown.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/SortDropdown.tsx
@@ -34,10 +34,10 @@ export const SortDropdown: React.FC<{
  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="flex items-center gap-1.5 focus:outline-none">
-        <span className="text-base font-medium text-neutral-800 dark:text-neutral-200">
+        <span className="text-base font-geist text-neutral-800 dark:text-neutral-200">
          Sort by
        </span>
-        <span className="text-base font-medium text-neutral-800 dark:text-neutral-200">
+        <span className="text-base font-geist text-neutral-800 dark:text-neutral-200">
          {selected.label}
        </span>
        <ChevronDownIcon className="h-4 w-4 text-neutral-800 dark:text-neutral-200" />
--- a/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/StoreCard.tsx
@@ -71,27 +71,27 @@ export const StoreCard: React.FC<StoreCardProps> = ({
      {/* Content Section */}
      <div className="w-full px-2 py-4">
        {/* Title and Creator */}
-        <h3 className="mb-2 font-['Poppins'] text-2xl font-semibold leading-tight text-[#272727] dark:text-neutral-100">
+        <h3 className="mb-2 font-poppins text-2xl font-semibold leading-tight text-[#272727] dark:text-neutral-100">
          {agentName}
        </h3>
        {!hideAvatar && creatorName && (
-          <p className="mb-4 font-['Geist'] text-base font-normal text-neutral-600 dark:text-neutral-400">
+          <p className="mb-4 font-lead text-base font-normal text-neutral-600 dark:text-neutral-400">
            by {creatorName}
          </p>
        )}

        {/* Description */}
-        <p className="mb-4 line-clamp-3 font-['Geist'] text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400">
+        <p className="mb-4 line-clamp-3 font-geist text-base font-normal leading-normal text-neutral-600 dark:text-neutral-400">
          {description}
        </p>

        {/* Stats Row */}
        <div className="flex items-center justify-between">
-          <div className="font-['Geist'] text-lg font-semibold text-neutral-800 dark:text-neutral-200">
+          <div className="font-geist text-lg font-semibold text-neutral-800 dark:text-neutral-200">
            {runs.toLocaleString()} runs
          </div>
          <div className="flex items-center gap-2">
-            <span className="font-['Geist'] text-lg font-semibold text-neutral-800 dark:text-neutral-200">
+            <span className="font-geist text-lg font-semibold text-neutral-800 dark:text-neutral-200">
              {rating.toFixed(1)}
            </span>
            <div
--- a/autogpt_platform/frontend/src/components/agptui/composite/HeroSection.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/HeroSection.tsx
@@ -17,23 +17,25 @@ export const HeroSection: React.FC = () => {
    <div className="mb-2 mt-8 flex flex-col items-center justify-center px-4 sm:mb-4 sm:mt-12 sm:px-6 md:mb-6 md:mt-16 lg:my-24 lg:px-8 xl:my-16">
      <div className="w-full max-w-3xl lg:max-w-4xl xl:max-w-5xl">
        <div className="8md:mb-8 mb-4 text-center">
-          <span className="font-['Poppins'] text-4xl font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50 md:text-5xl">
-            Explore AI agents built for{" "}
-          </span>
-          <span className="font-['Poppins'] text-4xl font-semibold leading-[54px] text-violet-600 dark:text-violet-400 md:text-5xl">
-            you
+          <h1 className="text-center">
+            <span className="font-poppins text-5xl font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50">
+              Explore AI agents built for{" "}
+            </span>
+            <span className="font-poppins text-5xl font-semibold leading-[54px] text-violet-600">
+              you
+            </span>
            <br />
-          </span>
-          <span className="font-['Poppins'] text-4xl font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50 md:text-5xl">
-            by the{" "}
-          </span>
-          <span className="font-['Poppins'] text-4xl font-semibold leading-[54px] text-blue-500 dark:text-blue-400 md:text-5xl">
-            community
-          </span>
+            <span className="font-poppins text-5xl font-semibold leading-[54px] text-neutral-950 dark:text-neutral-50">
+              by the{" "}
+            </span>
+            <span className="font-poppins text-5xl font-semibold leading-[54px] text-blue-500">
+              community
+            </span>
+          </h1>
        </div>
-        <div className="mb:text-2xl mb-6 text-center font-['Geist'] text-xl font-normal leading-loose text-neutral-700 dark:text-neutral-300 md:mb-12">
+        <h3 className="mb:text-2xl mb-6 text-center font-geist text-xl font-normal leading-loose text-neutral-700 dark:text-neutral-300 md:mb-12">
          Bringing you AI agents designed by thinkers from around the world
-        </div>
+        </h3>
        <div className="mb-4 flex justify-center sm:mb-5 md:mb-6">
          <SearchBar />
        </div>
--- a/autogpt_platform/frontend/src/components/ui/icons.tsx
+++ b/autogpt_platform/frontend/src/components/ui/icons.tsx
@@ -935,6 +935,99 @@ export const IconMarketplace = createIcon((props) => (
  </svg>
 ));

+/**
+ * Shopping Cart icon component.
+ *
+ * @component IconShoppingCart
+ * @param {IconProps} props - The props object containing additional attributes and event handlers for the icon.
+ * @returns {JSX.Element} - The shopping cart icon.
+ */
+export const IconShoppingCart = createIcon((props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-label="Shopping Cart Icon"
+    {...props}
+  >
+    <title>Shopping Cart</title>
+    <path d="M8.8696 22C9.42188 22 9.8696 21.5523 9.8696 21C9.8696 20.4477 9.42188 20 8.8696 20C8.31731 20 7.8696 20.4477 7.8696 21C7.8696 21.5523 8.31731 22 8.8696 22Z" />
+    <path d="M19.8696 22C20.4219 22 20.8696 21.5523 20.8696 21C20.8696 20.4477 20.4219 20 19.8696 20C19.3173 20 18.8696 20.4477 18.8696 21C18.8696 21.5523 19.3173 22 19.8696 22Z" />
+    <path d="M2.91959 2.04999H4.91959L7.57959 14.47C7.67716 14.9248 7.93026 15.3315 8.2953 15.6198C8.66034 15.9082 9.11449 16.0603 9.57959 16.05H19.3596C19.8148 16.0493 20.2561 15.8933 20.6106 15.6078C20.9652 15.3224 21.2117 14.9245 21.3096 14.48L22.9596 7.04999H5.98959" />
+  </svg>
+));
+
+/**
+ * Laptop icon component.
+ *
+ * @component IconLaptop
+ * @param {IconProps} props - The props object containing additional attributes and event handlers for the icon.
+ * @returns {JSX.Element} - The laptop icon.
+ */
+export const IconLaptop = createIcon((props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    aria-label="Laptop Icon"
+    {...props}
+  >
+    <title>Laptop</title>
+    <g id="icon/laptop">
+      <path
+        id="Vector"
+        d="M20.8696 16V7C20.8696 6.46957 20.6589 5.96086 20.2838 5.58579C19.9087 5.21071 19.4 5 18.8696 5H6.8696C6.33917 5 5.83046 5.21071 5.45539 5.58579C5.08032 5.96086 4.8696 6.46957 4.8696 7V16M20.8696 16H4.8696M20.8696 16L22.1496 18.55C22.2267 18.703 22.2632 18.8732 22.2556 19.0444C22.248 19.2155 22.1966 19.3818 22.1062 19.5274C22.0159 19.6729 21.8897 19.7928 21.7397 19.8756C21.5897 19.9584 21.4209 20.0012 21.2496 20H4.4896C4.31829 20.0012 4.14955 19.9584 3.99955 19.8756C3.84955 19.7928 3.72333 19.6729 3.63298 19.5274C3.54264 19.3818 3.4912 19.2155 3.4836 19.0444C3.47601 18.8732 3.51251 18.703 3.5896 18.55L4.8696 16"
+      />
+    </g>
+  </svg>
+));
+
+
+/**
+ * Boxes icon component.
+ *
+ * @component IconBoxes
+ * @param {IconProps} props - The props object containing additional attributes and event handlers for the icon.
+ * @returns {JSX.Element} - The boxes icon.
+ */
+export const IconBoxes = createIcon((props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-label="Boxes Icon"
+    {...props}
+  >
+    <title>Boxes</title>
+    <path d="M3.8396 12.92C3.54436 13.0974 3.29993 13.348 3.12999 13.6476C2.96005 13.9472 2.87035 14.2856 2.8696 14.63V17.87C2.87035 18.2144 2.96005 18.5528 3.12999 18.8524C3.29993 19.152 3.54436 19.4026 3.8396 19.58L6.8396 21.38C7.15066 21.5669 7.50671 21.6656 7.8696 21.6656C8.23249 21.6656 8.58853 21.5669 8.8996 21.38L12.8696 19V13.5L7.8696 10.5L3.8396 12.92Z" />
+    <path d="M7.8696 16.5L3.1296 13.65" />
+    <path d="M7.8696 16.5L12.8696 13.5" />
+    <path d="M7.8696 16.5V21.67" />
+    <path d="M12.8696 13.5V19L16.8396 21.38C17.1507 21.5669 17.5067 21.6656 17.8696 21.6656C18.2325 21.6656 18.5885 21.5669 18.8996 21.38L21.8996 19.58C22.1948 19.4026 22.4393 19.152 22.6092 18.8524C22.7792 18.5528 22.8688 18.2144 22.8696 17.87V14.63C22.8688 14.2856 22.7792 13.9472 22.6092 13.6476C22.4393 13.348 22.1948 13.0974 21.8996 12.92L17.8696 10.5L12.8696 13.5Z" />
+    <path d="M17.8696 16.5L12.8696 13.5" />
+    <path d="M17.8696 16.5L22.6096 13.65" />
+    <path d="M17.8696 16.5V21.67" />
+    <path d="M8.8396 4.41997C8.54436 4.59735 8.29993 4.84797 8.12999 5.14756C7.96005 5.44714 7.87035 5.78554 7.8696 6.12997V10.5L12.8696 13.5L17.8696 10.5V6.12997C17.8688 5.78554 17.7792 5.44714 17.6092 5.14756C17.4393 4.84797 17.1948 4.59735 16.8996 4.41997L13.8996 2.61997C13.5885 2.43308 13.2325 2.33435 12.8696 2.33435C12.5067 2.33435 12.1507 2.43308 11.8396 2.61997L8.8396 4.41997Z" />
+    <path d="M12.8696 8.00002L8.1296 5.15002" />
+    <path d="M12.8696 8.00002L17.6096 5.15002" />
+    <path d="M12.8696 13.5V8" />
+  </svg>
+));
+
 /**
 * Library icon component.
 *