diff --git a/components/portfolio/Breakdown.tsx b/components/portfolio/Breakdown.tsx
index a323321d0..0fb060dd2 100644
--- a/components/portfolio/Breakdown.tsx
+++ b/components/portfolio/Breakdown.tsx
@@ -113,13 +113,13 @@ export const BreakdownSlot = ({
 }: BreakdownSlotProps) => {
   return (
     <>
-      <h4 className="font-medium text-sky-600 text-ztg-12-150 mb-1">{title}</h4>
-      <div className="flex text-lg mb-1 items-center">
-        <div className="w-2/3 font-semibold text-ztg-16-150">
+      <h4 className="font-medium text-sky-600 text-xs mb-1">{title}</h4>
+      <div className="flex font-mono mb-1 items-center">
+        <div className="sm:w-2/3 font-semibold">
           {formatNumberLocalized(value.div(ZTG).toNumber())} ZTG
         </div>
         <div
-          className={`flex-1 w-1/3 text-ztg-14-120 ${
+          className={`hidden sm:block flex-1 w-1/3 ${
             changePercentage < 0.01
               ? "text-gray-800"
               : changePercentage < 0
@@ -130,7 +130,7 @@ export const BreakdownSlot = ({
           {Math.abs(changePercentage).toFixed(1)}%
         </div>
       </div>
-      <div className="text-sky-600 mb-1 text-ztg-14-150">
+      <div className="text-sky-600 font-mono mb-1 text-sm">
         $
         {formatNumberLocalized(
           usdZtgPrice?.mul(value.div(ZTG)).toNumber() ?? 0,
diff --git a/components/portfolio/MarketPositionHeader.tsx b/components/portfolio/MarketPositionHeader.tsx
index ed475d1a1..2bdc3bc3e 100644
--- a/components/portfolio/MarketPositionHeader.tsx
+++ b/components/portfolio/MarketPositionHeader.tsx
@@ -8,7 +8,7 @@ const MarketPositionHeader = ({
   question?: string;
 }) => {
   return (
-    <h3 className="text-ztg-16-150 mb-6 font-normal">
+    <h3 className="text-sm sm:text-base mb-5 font-normal">
       <Link href={`/markets/${marketId}`}>{question}</Link>
     </h3>
   );
diff --git a/components/portfolio/PortfolioIdentity.tsx b/components/portfolio/PortfolioIdentity.tsx
index 56a4fb9d8..2914b10c7 100644
--- a/components/portfolio/PortfolioIdentity.tsx
+++ b/components/portfolio/PortfolioIdentity.tsx
@@ -37,22 +37,22 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
   return (
     <>
       <div className="flex flex-col justify-center w-full gap-y-2 sm:gap-y-5 mb-5">
-        <div className="flex gap-2 sm:gap-5 flex-col sm:flex-row">
+        <div className="flex gap-5 flex-col sm:flex-row">
           <div>{address && <Avatar address={address} size={100} />}</div>
           <div className="flex flex-col justify-center">
-            <div className="flex items-center gap-2 mb-4">
+            <div className="flex items-center gap-2 mb-2">
               <div>
                 {isOwned && !hasIdentity && (
-                  <div className="-mb-3 font-extrabold text-xs text-gray-500">
+                  <div className="font-extrabold text-xs text-gray-500">
                     wallet name
                   </div>
                 )}
                 {isOwned && hasIdentity && (
-                  <div className="-mb-3 font-extrabold text-xs text-gray-500">
+                  <div className="font-extrabold text-xs text-gray-500">
                     on chain name
                   </div>
                 )}
-                <div className="font-extrabold text-[28px] sm:text-[38px]">
+                <div className="font-extrabold text-xl sm:text-4xl">
                   {name}{" "}
                 </div>
               </div>
@@ -68,25 +68,30 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
                 </div>
               )}
             </div>
-            <div className="text-ztg-12-150 sm:text-ztg-16-150">{address}</div>
+            <div className="hidden sm:block text-sm md:text-base">
+              {address}
+            </div>
+            <div className="sm:hidden text-sm">
+              {shortenAddress(address, 12, 26)}
+            </div>
           </div>
         </div>
-        <div className="flex flex-wrap gap-3 text-ztg-14-110 text-white">
+        <div className="flex flex-wrap gap-3 text-sm text-white">
           {identity?.twitter && (
             <a
-              className="flex items-center bg-twitter p-[8px] rounded-md"
+              className="flex items-center bg-twitter p-2 rounded-md"
               href={`https://twitter.com/${identity.twitter}`}
               target="_blank"
               rel="noreferrer"
             >
               <TwitterIcon fill="white" />
-              <span className="ml-ztg-10 ">{identity.twitter}</span>
+              <span className="ml-2.5 ">{identity.twitter}</span>
             </a>
           )}
           {identity?.discord && (
-            <div className="flex items-center bg-discord p-[8px] rounded-md">
+            <div className="flex items-center bg-discord p-2 rounded-md">
               <DiscordIcon fill="white" />
-              <span className="ml-ztg-10">{identity.discord}</span>
+              <span className="ml-2.5">{identity.discord}</span>
             </div>
           )}
           <Transition
@@ -98,7 +103,7 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
             leaveTo="opacity-0"
             show={isProxying}
           >
-            <div className="flex items-center gap-2  p-[8px] rounded-md bg-purple-600 text-white">
+            <div className="flex items-center gap-2 p-2 rounded-md bg-purple-600 text-white">
               <FaNetworkWired size={16} />
               Your are acting proxy for this account.
             </div>
diff --git a/components/ui/Table.tsx b/components/ui/Table.tsx
index d6bd47db5..38178f0e9 100644
--- a/components/ui/Table.tsx
+++ b/components/ui/Table.tsx
@@ -125,13 +125,11 @@ const Cell = ({
     isLoadingError: ztgIsLoadingError,
   } = useZtgPrice();
 
-  const base = `dark:text-white px-ztg-15 h-ztg-72 ${
-    onClick ? "cursor-pointer" : ""
-  }`;
+  const base = `dark:text-white px-4 h-16 ${onClick ? "cursor-pointer" : ""}`;
   const style = { height: `${rowHeight}px` };
   const skeletonElement = (
     <td
-      className={`font-semibold text-ztg-12-150 ${base}`}
+      className={`font-semibold text-xs ${base}`}
       onClick={onClick}
       style={style}
     >
@@ -149,7 +147,7 @@ const Cell = ({
     case "text":
       return (
         <td
-          className={`text-ztg-14-150 ${base}`}
+          className={`text-sm ${base}`}
           data-test="outcomeText"
           onClick={onClick}
           style={style}
@@ -160,7 +158,7 @@ const Cell = ({
     case "number":
       return (
         <td
-          className={`font-semibold text-ztg-12-150 ${base}`}
+          className={`font-semibold text-xs ${base}`}
           onClick={onClick}
           style={style}
         >
@@ -194,7 +192,7 @@ const Cell = ({
     case "paragraph":
       return (
         <td
-          className={` font-semibold text-ztg-12-150 text-left ${base}`}
+          className={`font-semibold text-xs text-left ${base}`}
           onClick={onClick}
           style={style}
         >
@@ -209,10 +207,10 @@ const Cell = ({
       ) {
         return (
           <td className={`${base} `} onClick={onClick} style={style}>
-            <div className="text-ztg-14-150 font-mediun mb-[2px]">
+            <div className="text-sm mb-0.5">
               {formatNumberLocalized(value.value)}
             </div>
-            <div className="text-ztg-12-150 font-light text-sky-600">
+            <div className="text-xs font-light text-sky-600">
               $
               {(
                 value.usdValue ?? (ztgPrice?.toNumber() ?? 0) * value.value
@@ -228,7 +226,7 @@ const Cell = ({
         <td className={` ${base}`} onClick={onClick} style={style}>
           <div className="flex items-center">
             <Avatar address={typeof value === "string" ? value : ""} />
-            <div className="font-semibold text-ztg-12-150 ml-ztg-10">
+            <div className="font-semibold text-xs ml-2.5">
               {typeof value === "string" ? value : ""}
             </div>
           </div>
@@ -239,10 +237,7 @@ const Cell = ({
         return (
           <td className={` ${base}`} onClick={onClick} style={style}>
             <div className="flex items-center">
-              <div
-                className="font-semibold text-ztg-16-150 uppercase"
-                data-test="tokenText"
-              >
+              <div className="font-semibold uppercase" data-test="tokenText">
                 {value.label}
               </div>
             </div>
@@ -255,11 +250,11 @@ const Cell = ({
           <td className={` ${base}`} onClick={onClick} style={style}>
             <div className="flex items-center">
               <img
-                className="rounded-ztg-5 w-ztg-40 h-ztg-40 mr-ztg-10"
+                className="rounded-md w-10 h-10 mr-2.5"
                 src={value.url}
                 loading="lazy"
               />
-              <span className="font-semibold text-ztg-10-150 text-sky-600 uppercase">
+              <span className="font-semibold text-xxs text-sky-600 uppercase">
                 {value.label}
               </span>
             </div>
@@ -268,11 +263,7 @@ const Cell = ({
       }
     case "percentage":
       return (
-        <td
-          className={`text-ztg-14-150 ${base}`}
-          onClick={onClick}
-          style={style}
-        >
+        <td className={`text-sm ${base}`} onClick={onClick} style={style}>
           <>{value}</>%
         </td>
       );
@@ -322,7 +313,7 @@ const Table = ({
   }, [loadMoreRef, loadMoreInView, loadMoreThresholdIndex, data]);
 
   const getHeaderClass = (column: TableColumn) => {
-    const base = "px-ztg-15 text-[13px] text-left font-medium";
+    const base = "px-4 text-xxs sm:text-xs text-left font-medium";
 
     if (column.alignment) {
       return `${column.alignment} ${base}`;
@@ -414,7 +405,7 @@ const Table = ({
               }
             >
               <thead>
-                <tr className="bg-light-gray h-[50px]">
+                <tr className="bg-light-gray h-12">
                   {renderColumns.map((column, index) => (
                     <th
                       key={index}
@@ -438,7 +429,7 @@ const Table = ({
                             role="button"
                             onClick={handleSortClick}
                             size={14}
-                            className="ml-ztg-8 cursor-pointer"
+                            className="ml-2 cursor-pointer"
                           />
                         ) : (
                           <></>
@@ -486,7 +477,7 @@ const Table = ({
                           : ""
                       }
                     ${rowColorClass}
-                    ${onRowClick ? "cursor-pointer" : ""} mx-ztg-5`}
+                    ${onRowClick ? "cursor-pointer" : ""} mx-1`}
                       onClick={() => handleRowClick(row)}
                     >
                       {row.cells
@@ -516,15 +507,13 @@ const Table = ({
             <div className="">
               {loadingMore &&
                 range(0, loadingNumber).map((index) => (
-                  <Skeleton key={index} height={80} className="mb-ztg-16" />
+                  <Skeleton key={index} height={80} className="mb-4" />
                 ))}
             </div>
 
             {!loadingMore && rows.length === 0 ? (
               <div className="w-full flex justify-center">
-                <div className="text-ztg-16-120 font-bold mt-ztg-60">
-                  {noDataMessage}
-                </div>
+                <div className="font-bold mt-14">{noDataMessage}</div>
               </div>
             ) : (
               <></>
@@ -534,9 +523,9 @@ const Table = ({
           {onPaginate ? <Paginator onPlusClicked={handlePlusClicked} /> : <></>}
 
           {onLoadMore && !hideLoadMore && (
-            <div className="flex justify-center mt-ztg-16 mb-ztg-20">
+            <div className="flex justify-center mt-4 mb-5">
               <div
-                className="uppercase text-sky-600 font-bold text-ztg-10-150"
+                className="uppercase text-sky-600 font-bold text-xs"
                 role="button"
                 onClick={handleLoadMore}
               >
diff --git a/lib/util/index.ts b/lib/util/index.ts
index ce2d44e37..7b68ac583 100644
--- a/lib/util/index.ts
+++ b/lib/util/index.ts
@@ -31,13 +31,12 @@ const hexChars = [
 export const formatNumberLocalized = (
   num: number | bigint,
   locale: string = "en-US",
+  maximumFractionDigits: number = 2,
 ) => {
   // Ensure displaying absolute zeros are unsigned(-), because javascript sucks sometimes.
   if (num === 0 || num === 0n) num = 0;
 
-  return new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(
-    num,
-  );
+  return new Intl.NumberFormat(locale, { maximumFractionDigits }).format(num);
 };
 
 export const isValidPolkadotAddress = (address: string) => {
diff --git a/pages/portfolio/[address].tsx b/pages/portfolio/[address].tsx
index d2f552152..4e5a148f4 100644
--- a/pages/portfolio/[address].tsx
+++ b/pages/portfolio/[address].tsx
@@ -12,7 +12,6 @@ import {
   MarketPositionsSkeleton,
 } from "components/portfolio/MarketPositions";
 import PortfolioIdentity from "components/portfolio/PortfolioIdentity";
-import { Loader } from "components/ui/Loader";
 import SubTabsList from "components/ui/SubTabsList";
 import PortfolioLayout from "layouts/PortfolioLayout";
 import { NextPageWithLayout } from "layouts/types";
@@ -20,9 +19,7 @@ import { usePortfolioPositions } from "lib/hooks/queries/usePortfolioPositions";
 import { useZtgPrice } from "lib/hooks/queries/useZtgPrice";
 import { useQueryParamState } from "lib/hooks/useQueryParamState";
 import { useCrossChainApis } from "lib/state/cross-chain";
-import { useDelayQueue } from "lib/state/delay-queue";
 import { isValidPolkadotAddress } from "lib/util";
-import { assetsAreEqual } from "lib/util/assets-are-equal";
 import { groupBy, range } from "lodash-es";
 import { useRouter } from "next/router";
 import NotFoundPage from "pages/404";
@@ -90,7 +87,7 @@ const Portfolio: NextPageWithLayout = () => {
   return (
     <div className="mt-8">
       {address && <PortfolioIdentity address={address} />}
-      <div className="mb-[40px]">
+      <div className="mb-12">
         <PortfolioBreakdown
           {...(breakdown ?? {
             loading: true,
@@ -116,14 +113,14 @@ const Portfolio: NextPageWithLayout = () => {
                 "Badges",
                 "History",
               ].map((title, index) => (
-                <Tab className="px-4" key={index}>
+                <Tab className="text-sm sm:text-xl" key={index}>
                   {({ selected }) => (
                     <div
-                      className={
+                      className={`${
                         selected
                           ? "font-semibold text-black transition-all"
                           : "text-sky-600 transition-all"
-                      }
+                      } ${index === 0 ? "px-0 pr-4" : "px-4"}`}
                     >
                       {title}
                     </div>
@@ -134,10 +131,10 @@ const Portfolio: NextPageWithLayout = () => {
           </div>
 
           <Tab.Panels>
-            <Tab.Panel className="mt-[40px]">
+            <Tab.Panel className="mt-12">
               {!marketPositionsByMarket || !ztgPrice ? (
                 range(0, 8).map((i) => (
-                  <MarketPositionsSkeleton className="mb-14" key={i} />
+                  <MarketPositionsSkeleton className="mb-8" key={i} />
                 ))
               ) : Object.values(marketPositionsByMarket).length > 0 ? (
                 Object.values(marketPositionsByMarket).map(
@@ -164,7 +161,7 @@ const Portfolio: NextPageWithLayout = () => {
                     return (
                       <MarketPositions
                         key={market.marketId}
-                        className="mb-14"
+                        className="mb-8"
                         market={market}
                         usdZtgPrice={ztgPrice}
                         positions={marketPositions.filter((position) =>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4d2deacb2..56567fc4c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -132,8 +132,8 @@ module.exports = {
           "0px 126px 50px rgba(0, 0, 0, 0.01), 0px 71px 43px rgba(0, 0, 0, 0.05), 0px 32px 32px rgba(0, 0, 0, 0.09), 0px 8px 17px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);",
       },
       fontSize: {
+        xxs: "0.625rem",
         "lg-2": ["1.375rem", "1.875rem"],
-        xxs: ["0.5625rem", "0.75rem"],
         "2.5xl": "1.75rem",
 
         // NEW