diff --git a/web/components/ProfileCard.tsx b/web/components/ProfileCard.tsx
index ece43bc7..03968364 100644
--- a/web/components/ProfileCard.tsx
+++ b/web/components/ProfileCard.tsx
@@ -92,7 +92,7 @@ export function ProfileCard(props: ProfileCardProps) {
               <Tag
                 key={index}
                 text={tag}
-                variant="outline"
+                variant="primary"
                 // className="justify-self-stretch"
                 // style={{ maxWidth: "calc(50% - 0.125rem)" }}
               />
diff --git a/web/components/atomic/Button.tsx b/web/components/atomic/Button.tsx
index d1128d90..3638b497 100644
--- a/web/components/atomic/Button.tsx
+++ b/web/components/atomic/Button.tsx
@@ -27,7 +27,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   loading?: boolean;
   rounded?: boolean;
   floating?: boolean;
-  variant?: "cta" | "primary" | "outline" | "secondary";
+  variant?: "cta" | "primary" | "outline" | "secondary" | "lime";
   size?: "small" | "medium" | "auto";
 };
 
@@ -69,11 +69,18 @@ export const Button = ({
     ["text-gray-400"]: disabled,
   });
 
+  const limeStyles = classNames({
+    ["border border-lime-400"]: true,
+    ["bg-lime-500 hover:bg-lime-400 text-green-900"]: !disabled,
+    ["border-gray-500 text-gray-500 bg-lime-200"]: disabled,
+  });
+
   const styles = classNames({
     [ctaStyles]: variant === "cta",
     [primaryStyles]: variant === "primary",
     [outlineStyles]: variant === "outline",
     [secondaryStyles]: variant === "secondary",
+    [limeStyles]: variant === "lime",
     ["transition flex items-center whitespace-nowrap"]: true,
     ["px-8 py-2"]: size === "medium",
     ["px-6 py-1.5 text-sm"]: size === "small",
diff --git a/web/components/buttons/IconButton.tsx b/web/components/buttons/IconButton.tsx
index f11a4c1c..8f531a14 100644
--- a/web/components/buttons/IconButton.tsx
+++ b/web/components/buttons/IconButton.tsx
@@ -4,11 +4,11 @@ import classNames from "classnames";
 
 import { BxCheck } from "../../generated/icons/regular";
 
-type EditButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   icon?: React.ReactNode;
 };
 
-export function IconButton(props: EditButtonProps) {
+export function IconButton(props: IconButtonProps) {
   const { className, icon } = props;
 
   const styles = classNames({
diff --git a/web/components/common/Tag.tsx b/web/components/common/Tag.tsx
index d148e05e..992e5938 100644
--- a/web/components/common/Tag.tsx
+++ b/web/components/common/Tag.tsx
@@ -9,7 +9,7 @@ export interface TagProps {
   text: string;
   onDeleteClick?: () => void;
   renderRightIcon?: () => React.ReactNode;
-  variant?: "primary" | "outline" | "olive";
+  variant?: "primary" | "outline" | "olive" | "light";
   className?: string;
   style?: React.CSSProperties;
 }
@@ -27,15 +27,17 @@ export function Tag(props: TagProps) {
     "rounded-full flex items-center px-3 py-1 overflow-hidden": true,
     "bg-lime-200": variant === "primary",
     "bg-olive-200": variant === "olive",
+    "bg-lime-100": variant === "light",
     "bg-white border border-lime-700": variant === "outline",
     [`${className}`]: true,
   });
 
   const tagStyles = classNames({
-    "whitespace-nowrap text-xs truncate": true,
+    "whitespace-nowrap text-sm truncate": true,
     "text-olive-700": variant === "primary",
     "text-olive-800": variant === "olive",
     "text-lime-700": variant === "outline",
+    "text-gray-600": variant === "light",
   });
 
   const [isOverflowed, setIsOverflow] = useState(false);
@@ -58,7 +60,7 @@ export function Tag(props: TagProps) {
       <div className={tagContainerStyles} style={style}>
         <div
           className={tagStyles}
-          style={{ fontWeight: 500 }}
+          // style={{ fontWeight: 500 }}
           ref={textElementRef}
         >
           {text}
diff --git a/web/components/navbar/Dropdown.tsx b/web/components/navbar/Dropdown.tsx
index 41a3fd82..81777d6c 100644
--- a/web/components/navbar/Dropdown.tsx
+++ b/web/components/navbar/Dropdown.tsx
@@ -44,7 +44,7 @@ export function Dropdown() {
     <Menu as="div" className="relative inline-block text-left">
       {({ open }) => {
         const caretStyles = classNames({
-          "h-7 w-7 transition": true,
+          "h-4 w-4 transition text-gray-700": true,
           "rotate-180": open,
         });
 
@@ -191,16 +191,16 @@ export function Dropdown() {
               </Menu.Items>
             </Transition>
 
-            <div>
+            <div className="flex items-end">
               <Menu.Button className="focus:outline-none">
-                <div className="flex items-center gap-2">
-                  <Text className="mr-1">
+                <div className="flex items-start gap-0.5">
+                  {/* <Text className="mr-1" variant="body2">
                     {userData?.first_name} {userData?.last_name}
-                  </Text>
+                  </Text> */}
                   <ProfileImage
                     src={img}
                     alt="Profile image"
-                    className="h-10 w-10"
+                    className="h-8 w-8"
                   />
                   <BxCaretDown className={caretStyles} />
                 </div>
diff --git a/web/components/navbar/Navbar.tsx b/web/components/navbar/Navbar.tsx
index 9716f7ce..85c33542 100644
--- a/web/components/navbar/Navbar.tsx
+++ b/web/components/navbar/Navbar.tsx
@@ -1,6 +1,8 @@
-import { SVGProps, useState } from "react";
+import { ButtonHTMLAttributes, SVGProps, useState } from "react";
 
 import { Transition } from "@headlessui/react";
+import classNames from "classnames";
+import { ChatBubble, Community, Megaphone, Settings } from "iconoir-react";
 import { useAtom } from "jotai";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -210,6 +212,28 @@ function MobileNavbar() {
   );
 }
 
+type IconTabProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  icon?: React.ReactNode;
+  selected?: boolean;
+};
+
+function IconTab(props: IconTabProps) {
+  const { icon, children, selected, ...rest } = props;
+
+  return (
+    <button
+      className={classNames({
+        "border-b-2 px-3 py-2": true,
+        "border-green-700": selected,
+        "border-transparent": !selected,
+      })}
+      {...rest}
+    >
+      {icon}
+    </button>
+  );
+}
+
 function DesktopNavbar() {
   const router = useRouter();
   const { currentSpace, fetchingCurrentSpace } = useCurrentSpace();
@@ -219,9 +243,11 @@ function DesktopNavbar() {
   const isMember = currentProfileHasRole(Profile_Role_Enum.Member);
 
   const arr = router.asPath.split("/");
-  const isInAdminDashboard = arr.includes("admin");
+  const isInAdminDashboard = arr[3] === "admin";
   const spaceSlug = useQueryParam("slug", "string");
   const isHome = arr[arr.length - 1] === spaceSlug;
+  const isInChatPage = arr[3] === "chat";
+  const isInAnnouncementsPage = arr[3] === "announcements";
 
   const [notificationsCount] = useAtom(notificationsCountAtom);
   const [announcementNotificationsCount] = useAtom(
@@ -229,94 +255,149 @@ function DesktopNavbar() {
   );
 
   return (
-    <SidePadding>
-      <div className="flex items-center justify-between pt-12">
-        <div className="flex">
-          {fetchingCurrentProfile ? (
-            <LoadingPlaceholderRect className="h-10 w-64" />
-          ) : !isMember ? (
-            <Link href="/" passHref>
-              <img
-                src={"/assets/canopy_logo.svg"}
-                className="h-10 cursor-pointer"
-                alt="Canopy Logo"
-                draggable={false}
-              />
-            </Link>
-          ) : (
-            // <SpaceDropdown />
-            <Text variant="heading4">{currentSpace?.name}</Text>
-          )}
-          {!isHome && spaceSlug && (
-            <Button
-              size="small"
-              className={"ml-6 flex items-center"}
-              onClick={() => {
-                router.push(`/space/${spaceSlug}`);
-              }}
-            >
-              <BxsHome className="mr-2 h-5 w-5" />
-              <Text variant="body1">Directory Homepage</Text>
-            </Button>
-          )}
-          {isAdmin && isHome && (
-            <Button
-              size="small"
-              className={"ml-6 flex items-center"}
-              onClick={() => {
-                router.push(`/space/${spaceSlug}/admin`);
-              }}
-            >
-              <BxsCog className="mr-2 h-5 w-5" />
-              <Text variant="body1">Admin Dashboard</Text>
-            </Button>
-          )}
-        </div>
-        <div className="flex items-center gap-4">
-          {spaceSlug && (
-            <div className="flex gap-2">
-              <Tooltip content="Messages" delayMs={[500, 0]} placement="bottom">
-                <div>
-                  <Link href={`/space/${spaceSlug}/chat`} passHref>
-                    <a className="relative">
-                      {notificationsCount > 0 ? (
-                        <NumberBadge
-                          className="absolute -top-0.5 -right-1"
-                          number={notificationsCount}
-                        />
-                      ) : null}
-                      <IconButton
-                        icon={<BxMessageDetail className="h-6 w-6" />}
-                      />
-                    </a>
-                  </Link>
-                </div>
-              </Tooltip>
-              <Tooltip
-                content="Announcements"
-                delayMs={[500, 0]}
-                placement="bottom"
+    <div className="w-full border-b-2 bg-white ">
+      <SidePadding>
+        <div className="grid grid-cols-3 pt-6">
+          <div className="mb-2.5 flex items-end">
+            {fetchingCurrentProfile ? (
+              <LoadingPlaceholderRect className="h-10 w-64" />
+            ) : !isMember ? (
+              <Link href="/" passHref>
+                <img
+                  src={"/assets/canopy_logo.svg"}
+                  className="h-10 cursor-pointer"
+                  alt="Canopy Logo"
+                  draggable={false}
+                />
+              </Link>
+            ) : (
+              // <SpaceDropdown />
+              <Text variant="subheading1" bold>
+                {currentSpace?.name}
+              </Text>
+            )}
+            {/* {!isHome && spaceSlug && (
+              <Button
+                size="small"
+                className={"ml-6 flex items-center"}
+                onClick={() => {
+                  router.push(`/space/${spaceSlug}`);
+                }}
+              >
+                <BxsHome className="mr-2 h-5 w-5" />
+                <Text variant="body1">Directory Homepage</Text>
+              </Button>
+            )} */}
+            {/* {isAdmin && isHome && (
+              <Button
+                size="small"
+                className={"ml-6 flex items-center"}
+                onClick={() => {
+                  router.push(`/space/${spaceSlug}/admin`);
+                }}
               >
-                <div>
-                  <Link href={`/space/${spaceSlug}/announcements`} passHref>
-                    <a className="relative">
-                      {announcementNotificationsCount > 0 ? (
-                        <NumberBadge
-                          number={announcementNotificationsCount}
-                          className="absolute -top-0.5 -right-1"
+                <BxsCog className="mr-2 h-5 w-5" />
+                <Text variant="body1">Admin Dashboard</Text>
+              </Button>
+            )} */}
+          </div>
+          <div className="flex translate-y-px items-end justify-center gap-4">
+            {spaceSlug && (
+              <div className="flex gap-2">
+                <Tooltip
+                  content="Profiles"
+                  // delayMs={[500, 0]}
+                  placement="bottom"
+                >
+                  <div>
+                    <Link href={`/space/${spaceSlug}`} passHref>
+                      <a className="relative">
+                        <IconTab
+                          selected={isHome}
+                          icon={<Community className="h-6 w-6" />}
                         />
-                      ) : null}
-                      <IconButton icon={<BxMegaphone className="h-6 w-6" />} />
-                    </a>
-                  </Link>
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          <Dropdown />
+                      </a>
+                    </Link>
+                  </div>
+                </Tooltip>
+
+                <Tooltip
+                  content="Announcements"
+                  // delayMs={[500, 0]}
+                  placement="bottom"
+                >
+                  <div>
+                    <Link href={`/space/${spaceSlug}/announcements`} passHref>
+                      <a className="relative">
+                        {announcementNotificationsCount > 0 ? (
+                          <NumberBadge
+                            number={announcementNotificationsCount}
+                            className="absolute -top-0.5 -right-1"
+                          />
+                        ) : null}
+                        <IconTab
+                          selected={isInAnnouncementsPage}
+                          icon={<Megaphone className="h-6 w-6" />}
+                        />
+                      </a>
+                    </Link>
+                  </div>
+                </Tooltip>
+                <Tooltip
+                  content="Messages"
+                  // delayMs={[500, 0]}
+                  placement="bottom"
+                >
+                  <div>
+                    <Link href={`/space/${spaceSlug}/chat`} passHref>
+                      <a className="relative">
+                        {notificationsCount > 0 ? (
+                          <NumberBadge
+                            className="absolute -top-0.5 -right-1"
+                            number={notificationsCount}
+                          />
+                        ) : null}
+                        <IconTab
+                          selected={isInChatPage}
+                          icon={<ChatBubble className="h-6 w-6" />}
+                        />
+                      </a>
+                    </Link>
+                  </div>
+                </Tooltip>
+                {isAdmin && (
+                  <Tooltip
+                    content="Admin Dashboard"
+                    // delayMs={[500, 0]}
+                    placement="bottom"
+                  >
+                    <div>
+                      <Link href={`/space/${spaceSlug}/admin`} passHref>
+                        <a className="relative">
+                          {notificationsCount > 0 ? (
+                            <NumberBadge
+                              className="absolute -top-0.5 -right-1"
+                              number={notificationsCount}
+                            />
+                          ) : null}
+                          <IconTab
+                            selected={isInAdminDashboard}
+                            icon={<Settings className="h-6 w-6" />}
+                          />
+                        </a>
+                      </Link>
+                    </div>
+                  </Tooltip>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="mb-2 flex items-end justify-end">
+            <Dropdown />
+          </div>
         </div>
-      </div>
-    </SidePadding>
+      </SidePadding>
+    </div>
   );
 }
 
diff --git a/web/components/space-homepage/SpaceSplashPage.tsx b/web/components/space-homepage/SpaceSplashPage.tsx
index 6aad3e56..bce66ddc 100644
--- a/web/components/space-homepage/SpaceSplashPage.tsx
+++ b/web/components/space-homepage/SpaceSplashPage.tsx
@@ -12,16 +12,17 @@ export function SpaceSplashPage() {
   const { currentSpace, fetchingCurrentSpace } = useCurrentSpace();
 
   return (
-    <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
-      <div className="hidden flex-1 flex-col sm:flex">
+    <div className="flex flex-col gap-8 rounded-md border bg-white sm:flex-row sm:items-center">
+      <div className="hidden flex-1 flex-col px-8 sm:flex">
         <Text
-          variant="heading1"
+          variant="heading2"
+          medium
           className="text-gray-900"
           loading={!currentSpace?.name}
         >
           {currentSpace?.name}
         </Text>
-        <div className="h-12"></div>
+        <div className="h-4"></div>
         {!currentSpace ? (
           <LoadingPlaceholderRect className="h-12 w-64" />
         ) : (
diff --git a/web/package-lock.json b/web/package-lock.json
index a3735fd8..dc2ba4d2 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -42,6 +42,7 @@
         "fuse.js": "^6.6.2",
         "graphql": "^16.3.0",
         "graphql-ws": "^5.10.2",
+        "iconoir-react": "^6.10.0",
         "install": "^0.13.0",
         "is-mobile": "^3.1.1",
         "jotai": "^1.8.5",
@@ -8324,6 +8325,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/iconoir-react": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/iconoir-react/-/iconoir-react-6.10.0.tgz",
+      "integrity": "sha512-gau34HMBa+XwCyIK4GzIYbBCVWWadaSjBVX4CQecqwAZfSDI3FPp7AWLZ40FRGuvGmiUpWz+g0P/T/CQlzOTEw==",
+      "peerDependencies": {
+        "react": "^16.8.6 || ^17 || ^18"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -21734,6 +21743,12 @@
         "debug": "4"
       }
     },
+    "iconoir-react": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/iconoir-react/-/iconoir-react-6.10.0.tgz",
+      "integrity": "sha512-gau34HMBa+XwCyIK4GzIYbBCVWWadaSjBVX4CQecqwAZfSDI3FPp7AWLZ40FRGuvGmiUpWz+g0P/T/CQlzOTEw==",
+      "requires": {}
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
diff --git a/web/package.json b/web/package.json
index 391567ab..87146b68 100644
--- a/web/package.json
+++ b/web/package.json
@@ -47,6 +47,7 @@
     "fuse.js": "^6.6.2",
     "graphql": "^16.3.0",
     "graphql-ws": "^5.10.2",
+    "iconoir-react": "^6.10.0",
     "install": "^0.13.0",
     "is-mobile": "^3.1.1",
     "jotai": "^1.8.5",
diff --git a/web/pages/space/[slug]/index.tsx b/web/pages/space/[slug]/index.tsx
index 6bfa4357..4e573560 100644
--- a/web/pages/space/[slug]/index.tsx
+++ b/web/pages/space/[slug]/index.tsx
@@ -51,7 +51,7 @@ function CollapsibleTipsBar() {
 
   return (
     <div className={styles}>
-      <div className="relative w-full border-b border-gray-600 bg-lime-100 py-8 text-green-800">
+      <div className="relative w-full border-b border-t border-gray-600 bg-lime-100 py-8 text-green-800">
         <SidePadding className="">
           <div className="grid-rows grid gap-4 sm:grid-cols-3 sm:gap-12">
             <IconTip
@@ -94,14 +94,14 @@ const SpaceHomepage: CustomPage = () => {
       <div className="bg-olive-100">
         <Navbar />
       </div>
-      <SidePadding className="flex flex-col items-center border-b border-gray-600 bg-olive-100">
-        <div className="sm:h-16"></div>
+      <SidePadding className="flex flex-col items-center bg-gray-50">
+        <div className="sm:h-8"></div>
         <SpaceSplashPage />
-        <div className="h-8 sm:hidden"></div>
+        <div className="h-4"></div>
       </SidePadding>
       <CollapsibleTipsBar />
       <SidePadding className="min-h-[calc(100dvh)] bg-gray-50">
-        <div className="h-16"></div>
+        <div className="h-4"></div>
         <SpaceLandingPage />
         <div className="h-16"></div>
       </SidePadding>
diff --git a/web/pages/space/[slug]/profile/[profileId].tsx b/web/pages/space/[slug]/profile/[profileId].tsx
index afe629c6..1dfeb4f9 100644
--- a/web/pages/space/[slug]/profile/[profileId].tsx
+++ b/web/pages/space/[slug]/profile/[profileId].tsx
@@ -260,7 +260,7 @@ const ProfilePage: CustomPage = () => {
     listing?.profile_listing_to_space_tags.map((item) => item.space_tag_id)
   );
 
-  router;
+  const fullName = getFullNameOfUser(profileData?.profile_by_pk?.user);
 
   return (
     <div>
@@ -279,64 +279,68 @@ const ProfilePage: CustomPage = () => {
         </button>
         <div className="h-8"></div>
 
-        <div className="flex w-full flex-col rounded-lg border border-black bg-white pb-12">
-          <div className="h-16 rounded-t-lg bg-olive-100 sm:h-32"></div>
-          <div className="-mt-4 px-4 sm:-mt-8 sm:px-20">
+        <div className="flex w-full flex-col rounded-lg border border-green-900 bg-white pb-12">
+          <div className="h-16 rounded-t-lg border-b border-green-900 bg-olive-100 sm:h-36"></div>
+          <div className="-mt-4 px-4 sm:-mt-24 sm:px-12">
             <div className="flex flex-wrap items-center justify-between gap-4">
-              <div className="flex items-center gap-6 sm:gap-12">
+              <div className="flex items-start gap-6 sm:gap-12">
                 <ProfileImage
                   src={listing?.profile_listing_image?.image.url}
-                  alt={`${first_name} ${last_name}`}
-                  className="h-24 w-24 sm:h-48 sm:w-48"
+                  alt={fullName}
+                  className="h-24 w-24 sm:h-64 sm:w-64"
                 />
-                <div className="mt-4 flex flex-col">
+                <div className="mt-8 flex flex-col sm:mt-32">
                   <Text variant="heading3" mobileVariant="heading4">
-                    {first_name} {last_name}
+                    {fullName}
                   </Text>
-                  <div className="h-1"></div>
-                  <Text variant="body1">{listing?.headline}</Text>
+                  <div className="h-2"></div>
+                  <Text variant="subheading2">{listing?.headline}</Text>
                 </div>
               </div>
-              {isMyProfile ? (
-                <Link href={`/space/${spaceSlug}/account/profile`} passHref>
-                  <a>
-                    <Button rounded>
-                      <BxEdit className="-ml-2 mr-2 h-5 w-5" />
-                      Edit profile
-                    </Button>
-                  </a>
-                </Link>
-              ) : (
-                <div className="flex items-center">
-                  <Button
-                    rounded
-                    className="flex items-center"
-                    onClick={() => {
-                      if (isLoggedIn) {
-                        const dmChatRoomId =
-                          profileData?.profile_to_chat_room?.find(
-                            (room) =>
-                              room.chat_room.profile_to_chat_rooms.length === 2
-                          )?.chat_room_id;
-                        if (dmChatRoomId) {
-                          router.push(
-                            `/space/${spaceSlug}/chat/${dmChatRoomId}`
-                          );
+              <div className="mt-12">
+                {isMyProfile ? (
+                  <Link href={`/space/${spaceSlug}/account/profile`} passHref>
+                    <a>
+                      <Button rounded variant="lime">
+                        <BxEdit className="-ml-2 mr-2 h-5 w-5" />
+                        Edit profile
+                      </Button>
+                    </a>
+                  </Link>
+                ) : (
+                  <div className="flex items-center">
+                    <Button
+                      rounded
+                      variant="lime"
+                      className="flex items-center"
+                      onClick={() => {
+                        if (isLoggedIn) {
+                          const dmChatRoomId =
+                            profileData?.profile_to_chat_room?.find(
+                              (room) =>
+                                room.chat_room.profile_to_chat_rooms.length ===
+                                2
+                            )?.chat_room_id;
+                          if (dmChatRoomId) {
+                            router.push(
+                              `/space/${spaceSlug}/chat/${dmChatRoomId}`
+                            );
+                          } else {
+                            handlers.open();
+                          }
                         } else {
-                          handlers.open();
+                          loginModalHandlers.open();
                         }
-                      } else {
-                        loginModalHandlers.open();
-                      }
-                    }}
-                    disabled={isMyProfile}
-                  >
-                    <BxMessageDetail className="-ml-2 mr-2 h-5 w-5" />
-                    Message
-                  </Button>
-                  <ProfilePageDropdown />
-                </div>
-              )}
+                      }}
+                      disabled={isMyProfile}
+                    >
+                      <BxMessageDetail className="-ml-2 mr-2 h-5 w-5" />
+                      Message
+                    </Button>
+                    <ProfilePageDropdown />
+                  </div>
+                )}
+              </div>
             </div>
             <div className="h-16"></div>
 
@@ -385,41 +389,50 @@ const ProfilePage: CustomPage = () => {
                 </div> */}
               </div>
               <div>
-                <div className="flex flex-col gap-8 rounded-md border-olive-700 sm:border sm:p-6">
-                  {currentSpace?.space_tag_categories.map((category) => {
-                    const tags = category.space_tags.filter((tag) =>
-                      profileTagIds.has(tag.id)
-                    );
-                    return (
-                      <div key={category.id}>
-                        <Text
-                          variant="heading4"
-                          mobileVariant="subheading1"
-                          className="text-green-800"
-                        >
-                          {category.title}
-                        </Text>
-                        <div className="h-4"></div>
-                        <div className="flex flex-wrap gap-2">
-                          {tags.length > 0 ? (
-                            tags.map((tag) => {
-                              return (
-                                <Tag key={tag.id} text={tag.label ?? ""} />
-                              );
-                            })
-                          ) : (
-                            <Text
-                              variant="body1"
-                              className="text-gray-700"
-                              italic
-                            >
-                              No tags
-                            </Text>
-                          )}
+                <div className=" rounded-md border-olive-700 sm:border sm:p-6">
+                  <Text
+                    variant="heading4"
+                    mobileVariant="subheading1"
+                    className="text-green-800"
+                  >
+                    Tags
+                  </Text>
+                  <div className="h-4"></div>
+                  <div className="flex flex-col gap-4">
+                    {currentSpace?.space_tag_categories.map((category) => {
+                      const tags = category.space_tags.filter((tag) =>
+                        profileTagIds.has(tag.id)
+                      );
+                      return (
+                        <div key={category.id} className="grid grid-cols-3">
+                          <Text
+                            variant="body1"
+                            mobileVariant="subheading2"
+                            className="text-green-500"
+                          >
+                            {category.title}
+                          </Text>
+                          <div className="col-span-2 flex flex-wrap items-start gap-1.5">
+                            {tags.length > 0 ? (
+                              tags.map((tag) => {
+                                return (
+                                  <Tag key={tag.id} text={tag.label ?? ""} />
+                                );
+                              })
+                            ) : (
+                              <Text
+                                variant="body1"
+                                className="text-gray-700"
+                                italic
+                              >
+                                No tags
+                              </Text>
+                            )}
+                          </div>
                         </div>
-                      </div>
-                    );
-                  })}
+                      );
+                    })}
+                  </div>
                 </div>
                 <div className="h-8"></div>
                 <div className="rounded-md border-olive-700 sm:border sm:p-6">
@@ -431,14 +444,13 @@ const ProfilePage: CustomPage = () => {
                     Profiles
                   </Text>
                   <div className="h-4"></div>
-                  <Text>{email}</Text>
-                  <div className="h-4"></div>
 
                   <ProfileSocialsDisplay
                     profileListingId={listing?.id ?? ""}
                     email={email}
                   />
-
+                  <div className="h-4"></div>
+                  <Text>{email}</Text>
                   <div className="flex"></div>
                 </div>
               </div>
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 4d5730b5..55c49b9e 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -12,7 +12,7 @@
 /* Input slider */
 
 .slider-thumb::-webkit-slider-thumb {
-  @apply appearance-none w-4 h-4 rounded-full cursor-pointer bg-white shadow-md;
+  @apply h-4 w-4 cursor-pointer appearance-none rounded-full bg-white shadow-md;
   border: 0.5px solid lightgray;
 }
 
@@ -33,7 +33,7 @@
 }
 
 .ProseMirror p {
-  @apply text-body2;
+  @apply text-body1;
 
   display: block;
   margin-block-start: 0.5rem;
@@ -44,7 +44,7 @@
 
 .ProseMirror h1 {
   @apply text-heading4;
-  
+
   display: block;
   margin-block-start: 0.5rem;
   margin-block-end: 0.5rem;
@@ -80,7 +80,7 @@
 }
 
 .swiper-pagination-bullet {
-  @apply h-3 w-3 rounded-full border border-green-700 mx-2;
+  @apply mx-2 h-3 w-3 rounded-full border border-green-700;
   display: inline-block;
 }
 
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 3737e066..27f07046 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -25,7 +25,7 @@ module.exports = {
         height: "height",
       },
       fontFamily: {
-        sans: ["Rubik", ...defaultTheme.fontFamily.sans],
+        sans: ["Open Sans", ...defaultTheme.fontFamily.sans],
       },
 
       spacing: {