diff --git a/src/features/core/components/base-wrapper.tsx b/src/features/core/components/base-wrapper.tsx
index 05b2b50..85aee11 100644
--- a/src/features/core/components/base-wrapper.tsx
+++ b/src/features/core/components/base-wrapper.tsx
@@ -3,7 +3,7 @@
 import { Abstraxion, useModal } from "@burnt-labs/abstraxion";
 import Link from "next/link";
 
-import { basePath } from "@/constants";
+import { basePath, isTestnet } from "@/constants";
 
 import NavAccount from "./nav-account";
 
@@ -21,10 +21,20 @@ export default function RootLayout({
         style={{ borderBottom: "1px solid #333" }}
       >
         <div className="page-container m-auto flex h-[80px] flex-row items-center justify-between px-[16px]">
-          <div>
+          <div className="flex flex-row items-center">
             <Link className="cursor-pointer" href="/">
               <img alt="Xion Logo" src={`${basePath}/xion-logo.svg`} />
             </Link>
+            <span
+              className={[
+                "ml-[8px] translate-y-[4px] rounded-[4px] p-[4px] text-[12px] uppercase",
+                isTestnet
+                  ? "bg-chain-testnetBg text-chain-testnetFg"
+                  : "bg-chain-mainnetBg text-chain-mainnetFg",
+              ].join(" ")}
+            >
+              {isTestnet ? "Testnet" : "Mainnet"}
+            </span>
           </div>
           <NavAccount />
         </div>
diff --git a/src/features/core/components/base.tsx b/src/features/core/components/base.tsx
index 455974a..8e2ad13 100644
--- a/src/features/core/components/base.tsx
+++ b/src/features/core/components/base.tsx
@@ -199,7 +199,7 @@ type ButtonProps = React.DetailedHTMLProps<
   HTMLButtonElement
 > & {
   isLoading?: boolean;
-  variant?: "danger" | "default" | "success";
+  variant?: "danger-naked" | "danger" | "default" | "success";
 };
 
 export const Button = ({
@@ -212,6 +212,9 @@ export const Button = ({
     if (variant === "danger")
       return "text-danger disabled:text-typo-150 bg-[#D745061A]";
 
+    if (variant === "danger-naked")
+      return "text-danger disabled:text-typo-150 bg-transparent border-[1px] border-danger disabled:border-typo-150";
+
     if (variant === "success")
       return "bg-success text-black disabled:bg-green-400";
 
diff --git a/src/features/core/components/nav-account.tsx b/src/features/core/components/nav-account.tsx
index 4cc0645..33678e5 100644
--- a/src/features/core/components/nav-account.tsx
+++ b/src/features/core/components/nav-account.tsx
@@ -5,49 +5,51 @@ import {
   useAbstraxionSigningClient,
   useModal,
 } from "@burnt-labs/abstraxion";
-import { Button } from "@burnt-labs/ui";
 
-import { isTestnet } from "@/constants";
+import AddressShort from "@/features/staking/components/address-short";
 
 import { wallet } from "../lib/icons";
-import { ButtonPill, FloatingDropdown } from "./base";
+import { Button, ClipboardCopy, FloatingDropdown } from "./base";
 
 const Account = () => (
   <span className="flex flex-row items-center gap-[8px] rounded-[8px] bg-bg-600 px-[16px] py-[18px]">
     <span dangerouslySetInnerHTML={{ __html: wallet }} />
-    <span className="font-bold">Account</span>{" "}
-    <span
-      className={[
-        "rounded-[4px] p-[4px] text-[12px] uppercase",
-        isTestnet
-          ? "bg-chain-testnetBg text-chain-testnetFg"
-          : "bg-chain-mainnetBg text-chain-mainnetFg",
-      ].join(" ")}
-    >
-      {isTestnet ? "Testnet" : "Mainnet"}
-    </span>
   </span>
 );
 
 const NavAccount = () => {
   const [, setShowAbstraxion] = useModal();
-  const { isConnected } = useAbstraxionAccount();
+  const { data, isConnected } = useAbstraxionAccount();
   const { logout } = useAbstraxionSigningClient();
 
   return (
     <div className="cursor-pointer">
       {isConnected ? (
-        <FloatingDropdown Trigger={Account} id="nav-account">
-          <div className="flex items-center justify-center rounded-[16px] bg-bg-600 px-[24px] py-[12px]">
-            <ButtonPill
-              className="bg-transparent"
+        <FloatingDropdown
+          Trigger={Account}
+          id="nav-account"
+          placement="bottom-end"
+        >
+          <div className="flex flex-col gap-[32px] rounded-[16px] bg-bg-600 p-[24px]">
+            <div className="flex flex-col gap-[12px]">
+              <div className="text-[14px]">XION Address</div>
+              <div className="flex min-w-[250px] flex-row justify-between rounded-[8px] bg-[#000] px-[16px] py-[20px] text-[#fff]">
+                <AddressShort
+                  address={data.bech32Address}
+                  className="text-[16px] text-[#fff]"
+                />
+                <ClipboardCopy textToCopy={data.bech32Address} />
+              </div>
+            </div>
+            <Button
+              className="w-full flex-1 py-[8px] uppercase"
               onClick={() => {
                 logout?.();
               }}
-              variant="danger"
+              variant="danger-naked"
             >
               Log out
-            </ButtonPill>
+            </Button>
           </div>
         </FloatingDropdown>
       ) : (
diff --git a/src/features/core/components/table.tsx b/src/features/core/components/table.tsx
index 0437fbf..ecffd23 100644
--- a/src/features/core/components/table.tsx
+++ b/src/features/core/components/table.tsx
@@ -3,6 +3,7 @@ import type { PropsWithChildren } from "react";
 import { chevron } from "../lib/icons";
 
 type Props<SortMethod> = PropsWithChildren & {
+  mobile?: boolean;
   onSort?: (method: SortMethod) => void;
   rigthAlign?: boolean;
   sort?: SortMethod;
@@ -11,6 +12,7 @@ type Props<SortMethod> = PropsWithChildren & {
 
 export const HeaderTitleBase = <SortMethod extends string>({
   children,
+  mobile,
   onSort,
   rigthAlign,
   sort,
@@ -22,8 +24,9 @@ export const HeaderTitleBase = <SortMethod extends string>({
   return (
     <div
       className={[
-        "flex flex-row text-[14px] font-normal leading-[14px] tracking-wider",
+        "flex-row text-[14px] font-normal leading-[14px] tracking-wider",
         rigthAlign ? "justify-end" : "",
+        mobile ? "flex" : "hidden md:flex",
       ].join(" ")}
     >
       <button
diff --git a/src/features/staking/components/address-short.tsx b/src/features/staking/components/address-short.tsx
index 3ea414f..774a8a1 100644
--- a/src/features/staking/components/address-short.tsx
+++ b/src/features/staking/components/address-short.tsx
@@ -2,9 +2,10 @@ import { toast } from "react-toastify";
 
 type Props = {
   address: string;
+  className?: string;
 };
 
-const AddressShort = ({ address }: Props) => {
+const AddressShort = ({ address, className }: Props) => {
   if (!address) return null;
 
   const charsDisplayed = 7;
@@ -19,7 +20,10 @@ const AddressShort = ({ address }: Props) => {
 
   return (
     <button
-      className="cursor-pointer text-left text-[12px] font-normal leading-[20px] text-typo-200"
+      className={[
+        "cursor-pointer text-left text-[12px] font-normal leading-[20px] text-typo-200",
+        className,
+      ].join(" ")}
       onClick={() => {
         navigator.clipboard.writeText(address);
 
diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx
index da28cd8..86c3a7f 100644
--- a/src/features/staking/components/delegation-details.tsx
+++ b/src/features/staking/components/delegation-details.tsx
@@ -74,12 +74,11 @@ export const DetailsTrigger = ({
 const gridStyle = {
   gap: "16px",
   gridTemplateColumns: "1.5fr repeat(4, 1.05fr)",
-  minWidth: 1000,
   overflow: "auto",
 };
 
 const rowStyle =
-  "grid w-full items-center justify-between gap-2 p-2 mb-[16px] last:mb-[0px] bg-black rounded-[8px]";
+  "w-full items-center justify-between gap-2 p-2 mb-[16px] last:mb-[0px] bg-black rounded-[8px]";
 
 const wrapperStyle =
   "w-full overflow-auto rounded-[24px] bg-bg-600 pb-4 text-typo-100 px-[16px]";
@@ -116,87 +115,137 @@ const DelegationRowBase = ({
 
   const logo = useValidatorLogo(validator?.description.identity);
 
-  return (
-    <div className={rowStyle} style={gridStyle}>
-      <div className="flex flex-1 flex-row justify-start gap-4">
-        <ValidatorLogo logo={logo} />
-        <div className="flex flex-col justify-center gap-[2px] text-left">
-          <div className="max-w-[150px] overflow-hidden truncate text-[14px] font-bold leading-[20px] md:max-w-[250px]">
-            {validator?.description.moniker || ""}
-          </div>
-          <AddressShort address={validator?.operatorAddress || ""} />
-        </div>
-      </div>
-      <div className="text-right">
-        <TokenColors text={formatCoin(delegation.balance)} />
-      </div>
-      <div className="text-right">
-        {validator
-          ? formatCommission(validator.commission.commissionRates.rate, 0)
-          : ""}
-      </div>
-      <div className="text-right">
-        <TokenColors text={formatCoin(delegation.rewards)} />
-      </div>
-      <div className="flex flex-row items-center justify-end gap-[8px]">
-        <ButtonPill
-          disabled={
-            disabledProp || validator?.status !== BondStatus.BOND_STATUS_BONDED
-          }
+  const floatingDropdown = (isMobile: boolean) => (
+    <FloatingDropdown
+      Trigger={Menu}
+      id={`delegation-${index}-${isMobile.toString()}`}
+      placement="bottom-end"
+    >
+      <div
+        className={[
+          "flex-col gap-[12px] rounded-[8px] bg-bg-600 py-[4px]",
+          isMobile ? "flex md:hidden" : "hidden md:flex",
+        ].join(" ")}
+      >
+        <ButtonLink
+          disabled={!getCanClaimRewards(delegation?.rewards) || disabledProp}
+          onClick={() => {
+            if (!validator) return;
+
+            staking.dispatch(
+              setModalOpened({
+                content: {
+                  delegations: [delegation],
+                },
+                type: "rewards",
+              }),
+            );
+          }}
+        >
+          Claim rewards
+        </ButtonLink>
+        <ButtonLink
+          disabled={disabledProp}
           onClick={() => {
             if (!validator) return;
 
             staking.dispatch(
               setModalOpened({
                 content: { validator },
-                type: "delegate",
+                type: "undelegate",
               }),
             );
           }}
+          variant="danger"
         >
-          Delegate
-        </ButtonPill>
-        <FloatingDropdown Trigger={Menu} id={`delegation-${index}`}>
-          <div className="flex flex-col gap-[12px] rounded-[8px] bg-bg-600 py-[4px]">
-            <ButtonLink
-              disabled={
-                !getCanClaimRewards(delegation?.rewards) || disabledProp
-              }
-              onClick={() => {
-                if (!validator) return;
-
-                staking.dispatch(
-                  setModalOpened({
-                    content: {
-                      delegations: [delegation],
-                    },
-                    type: "rewards",
-                  }),
-                );
-              }}
-            >
-              Claim rewards
-            </ButtonLink>
-            <ButtonLink
-              disabled={disabledProp}
-              onClick={() => {
-                if (!validator) return;
-
-                staking.dispatch(
-                  setModalOpened({
-                    content: { validator },
-                    type: "undelegate",
-                  }),
-                );
-              }}
-              variant="danger"
-            >
-              Undelegate
-            </ButtonLink>
+          Undelegate
+        </ButtonLink>
+      </div>
+    </FloatingDropdown>
+  );
+
+  const delegateButtonProps = {
+    disabled:
+      disabledProp || validator?.status !== BondStatus.BOND_STATUS_BONDED,
+    onClick: () => {
+      if (!validator) return;
+
+      staking.dispatch(
+        setModalOpened({
+          content: { validator },
+          type: "delegate",
+        }),
+      );
+    },
+  };
+
+  return (
+    <>
+      <div
+        className={[rowStyle, "hidden min-w-[1000px] md:grid"].join(" ")}
+        style={gridStyle}
+      >
+        <div className="flex flex-1 flex-row justify-start gap-4">
+          <ValidatorLogo logo={logo} />
+          <div className="flex flex-col justify-center gap-[2px] text-left">
+            <div className="max-w-[150px] overflow-hidden truncate text-[14px] font-bold leading-[20px] md:max-w-[250px]">
+              {validator?.description.moniker || ""}
+            </div>
+            <AddressShort address={validator?.operatorAddress || ""} />
           </div>
-        </FloatingDropdown>
+        </div>
+        <div className="text-right">
+          <TokenColors text={formatCoin(delegation.balance)} />
+        </div>
+        <div className="text-right">
+          {validator
+            ? formatCommission(validator.commission.commissionRates.rate, 0)
+            : ""}
+        </div>
+        <div className="text-right">
+          <TokenColors text={formatCoin(delegation.rewards)} />
+        </div>
+        <div className="flex flex-row items-center justify-end gap-[8px]">
+          <ButtonPill {...delegateButtonProps}>Delegate</ButtonPill>
+          {floatingDropdown(false)}
+        </div>
       </div>
-    </div>
+      <div
+        className={[rowStyle, "flex w-full flex-col px-[16px] md:hidden"].join(
+          " ",
+        )}
+      >
+        <div className="flex w-full flex-1 flex-row justify-start gap-4">
+          <ValidatorLogo logo={logo} />
+          <div className="flex flex-col justify-center gap-[2px] text-left">
+            <div className="max-w-[150px] overflow-hidden truncate text-[14px] font-bold leading-[20px] md:max-w-[250px]">
+              {validator?.description.moniker || ""}
+            </div>
+            <AddressShort address={validator?.operatorAddress || ""} />
+          </div>
+        </div>
+        <div className="flex w-full flex-row justify-between">
+          <span>Staked amount</span>
+          <TokenColors text={formatCoin(delegation.balance)} />
+        </div>
+        {validator && (
+          <div className="flex w-full flex-row justify-between">
+            <span>Commission</span>
+            <span>
+              {formatCommission(validator.commission.commissionRates.rate, 0)}
+            </span>
+          </div>
+        )}
+        <div className="flex w-full flex-row justify-between">
+          <span>Rewards</span>
+          <TokenColors text={formatCoin(delegation.rewards)} />
+        </div>
+        <div className="flex w-full flex-row items-center justify-end gap-[8px] ">
+          <ButtonPill {...delegateButtonProps}>Delegate</ButtonPill>
+          {floatingDropdown(true)}
+        </div>
+      </div>
+    </>
   );
 };
 
@@ -226,41 +275,79 @@ const UnbondingRow = ({
     }
   }, [validatorAddress, staking]);
 
+  const cancelProps = {
+    disabled,
+    onClick: () => {
+      staking.dispatch(
+        setModalOpened({
+          content: { unbondings: [unbonding] },
+          type: "cancel-unstaking",
+        }),
+      );
+    },
+  };
+
   return (
-    <div className={rowStyle} style={gridStyle}>
-      <div className="flex flex-1 flex-row justify-start gap-4">
-        <ValidatorLogo logo={logo} />
-        <div className="flex flex-col justify-start gap-2 text-left">
-          <div className="text-[14px] font-bold leading-[20px]">
-            {validator?.description.moniker || ""}
+    <>
+      <div
+        className={[rowStyle, "hidden min-w-[1000px] md:grid"].join(" ")}
+        style={gridStyle}
+      >
+        <div className="flex flex-1 flex-row justify-start gap-4">
+          <ValidatorLogo logo={logo} />
+          <div className="flex flex-col justify-start gap-2 text-left">
+            <div className="text-[14px] font-bold leading-[20px]">
+              {validator?.description.moniker || ""}
+            </div>
+            <AddressShort address={validator?.operatorAddress || ""} />
           </div>
-          <AddressShort address={validator?.operatorAddress || ""} />
+        </div>
+        <div className="text-right">
+          <TokenColors text={formatCoin(unbonding.balance)} />
+        </div>
+        <div className="text-right">Unbonding</div>
+        <div className="text-right">
+          {formatUnbondingCompletionTime(unbonding.completionTime)}
+        </div>
+        <div className="text-right">
+          <ButtonPill {...cancelProps} variant="danger">
+            Cancel Unstake
+          </ButtonPill>
         </div>
       </div>
-      <div className="text-right">
-        <TokenColors text={formatCoin(unbonding.balance)} />
-      </div>
-      <div className="text-right">Unbonding</div>
-      <div className="text-right">
-        {formatUnbondingCompletionTime(unbonding.completionTime)}
-      </div>
-      <div className="text-right">
-        <ButtonPill
-          disabled={disabled}
-          onClick={() => {
-            staking.dispatch(
-              setModalOpened({
-                content: { unbondings: [unbonding] },
-                type: "cancel-unstaking",
-              }),
-            );
-          }}
-          variant="danger"
-        >
-          Cancel Unstake
-        </ButtonPill>
+      <div
+        className={[rowStyle, "flex w-full flex-col px-[16px] md:hidden"].join(
+          " ",
+        )}
+      >
+        <div className="flex w-full flex-1 flex-row justify-start gap-4">
+          <ValidatorLogo logo={logo} />
+          <div className="flex flex-col justify-start gap-2 text-left">
+            <div className="text-[14px] font-bold leading-[20px]">
+              {validator?.description.moniker || ""}
+            </div>
+            <AddressShort address={validator?.operatorAddress || ""} />
+          </div>
+        </div>
+        <div className="flex w-full flex-row justify-between">
+          <span>Amount</span>
+          <TokenColors text={formatCoin(unbonding.balance)} />
+        </div>
+        <div className="flex w-full flex-row justify-between">
+          <span>Status</span>
+          <span>Unbonding</span>
+        </div>
+        <div className="flex w-full flex-row justify-between">
+          <span>Completion</span>
+          {formatUnbondingCompletionTime(unbonding.completionTime)}
+        </div>
+        <div className="flex w-full flex-row justify-end">
+          <ButtonPill {...cancelProps} variant="danger">
+            Cancel Unstake
+          </ButtonPill>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
@@ -284,7 +371,7 @@ const DelegationHeaderTitle = HeaderTitleBase<DelegationSortMethod>;
 const UnbondingHeaderTitle = HeaderTitleBase<SortMethod>;
 
 const headerStyle =
-  "grid w-full items-center justify-between gap-2 py-4 px-2 uppercase";
+  "grid w-full items-center justify-between gap-2 py-4 px-2 uppercase md:min-w-[1000px]";
 
 const DelegationDetails = () => {
   const stakingRef = useStaking();
@@ -353,7 +440,9 @@ const DelegationDetails = () => {
           return (
             <div className={wrapperStyle}>
               <div className={headerStyle} style={gridStyle}>
-                <DelegationHeaderTitle>Delegations</DelegationHeaderTitle>
+                <DelegationHeaderTitle mobile>
+                  Delegations
+                </DelegationHeaderTitle>
                 <DelegationHeaderTitle
                   onSort={setDelegationsSortMethod}
                   rigthAlign
@@ -421,7 +510,7 @@ const DelegationDetails = () => {
           return (
             <div className={wrapperStyle}>
               <div className={headerStyle} style={gridStyle}>
-                <UnbondingHeaderTitle>Unstakings</UnbondingHeaderTitle>
+                <UnbondingHeaderTitle mobile>Unstakings</UnbondingHeaderTitle>
                 <UnbondingHeaderTitle
                   onSort={setUnbondingsSortMethod}
                   rigthAlign
diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx
index f232315..0c2b5bb 100644
--- a/src/features/staking/components/validators-table.tsx
+++ b/src/features/staking/components/validators-table.tsx
@@ -33,6 +33,7 @@ import {
   formatVotingPowerPerc,
 } from "../lib/formatters";
 import AddressShort from "./address-short";
+import { DivisorHorizontal } from "./divisor";
 import TokenColors from "./token-colors";
 
 const minGridWidth = 1000;
@@ -64,21 +65,81 @@ const ValidatorRow = ({
   const votingPowerPerc = getVotingPowerPerc(validator?.tokens, staking.state);
   const votingPowerPercStr = formatVotingPowerPerc(votingPowerPerc);
 
+  const stakedAmountEl = (
+    <TokenColors
+      text={formatCoin(
+        getXionCoinFromUXion(new BigNumber(validator.tokens)),
+        true,
+      )}
+    />
+  );
+
+  const commissionEl = formatCommission(
+    validator.commission.commissionRates.rate,
+    2,
+  );
+
+  const detailsEl = (
+    <NavLink href={`/validator?address=${validator.operatorAddress}`}>
+      Details
+    </NavLink>
+  );
+
   return (
-    <div
-      className="flex w-full flex-col items-center justify-between gap-0"
-      style={{
-        minWidth: minGridWidth,
-      }}
-    >
+    <>
       <div
-        className={[
-          "grid w-full items-center justify-between gap-2 p-4",
-          commonGridClasses,
-        ].join(" ")}
-        style={gridStyle}
+        className="hidden w-full flex-col items-center justify-between gap-0 md:flex"
+        style={{
+          minWidth: minGridWidth,
+        }}
       >
-        <div className="flex flex-1 flex-row justify-start gap-4">
+        <div
+          className={[
+            "grid w-full items-center justify-between gap-2 p-4",
+            commonGridClasses,
+          ].join(" ")}
+          style={gridStyle}
+        >
+          <div className="flex flex-1 flex-row justify-start gap-4">
+            <ValidatorLogo logo={logo} />
+            <div className="flex flex-col justify-center gap-[2px] text-left">
+              <div className="max-w-[150px] overflow-hidden truncate text-[14px] font-bold leading-[20px] md:max-w-[300px]">
+                {validator.description.moniker}
+              </div>
+              <AddressShort address={validator.operatorAddress} />
+            </div>
+            <div className="flex min-w-max flex-col items-center justify-center">
+              {getHasStakedInValidator(
+                validator.operatorAddress,
+                staking.state,
+              ) && (
+                <div className="rounded-[2px] bg-successBg px-[8px] py-[2px] text-[11px] font-medium leading-[16px] tracking-normal text-success">
+                  You staked
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="text-right">{stakedAmountEl}</div>
+          <div className="text-right">{commissionEl}</div>
+          {votingPowerPerc && (
+            <div className="text-right">{votingPowerPercStr}</div>
+          )}
+          <div className="text-right">{detailsEl}</div>
+          {onStake && (
+            <div>
+              <ButtonPill disabled={disabled} onClick={onStake}>
+                Delegate
+              </ButtonPill>
+            </div>
+          )}
+        </div>
+        <div
+          className="box-content h-[1px] bg-bg-500"
+          style={{ width: "calc(100% - 48px)" }}
+        />
+      </div>
+      <div className="flex w-full flex-col items-center justify-between gap-[8px] p-[16px] md:hidden">
+        <div className="flex w-full flex-row justify-start gap-4">
           <ValidatorLogo logo={logo} />
           <div className="flex flex-col justify-center gap-[2px] text-left">
             <div className="max-w-[150px] overflow-hidden truncate text-[14px] font-bold leading-[20px] md:max-w-[300px]">
@@ -97,38 +158,31 @@ const ValidatorRow = ({
             )}
           </div>
         </div>
-        <div className="text-right">
-          <TokenColors
-            text={formatCoin(
-              getXionCoinFromUXion(new BigNumber(validator.tokens)),
-              true,
-            )}
-          />
+        <div className="flex w-full flex-row justify-between">
+          <span>Staked Amount</span>
+          <span>{stakedAmountEl}</span>
         </div>
-        <div className="text-right">
-          {formatCommission(validator.commission.commissionRates.rate, 2)}
+        <div className="flex w-full flex-row justify-between">
+          <span>Commission</span>
+          <span>{commissionEl}</span>
         </div>
         {votingPowerPerc && (
-          <div className="text-right">{votingPowerPercStr}</div>
+          <div className="flex w-full flex-row justify-between">
+            <span>Voting Power</span>
+            <span>{votingPowerPercStr}</span>
+          </div>
         )}
-        <div className="text-right">
-          <NavLink href={`/validator?address=${validator.operatorAddress}`}>
-            Details
-          </NavLink>
-        </div>
-        {onStake && (
-          <div>
+        <div className="flex w-full flex-row items-center justify-end gap-[24px]">
+          {detailsEl}
+          {onStake && (
             <ButtonPill disabled={disabled} onClick={onStake}>
               Delegate
             </ButtonPill>
-          </div>
-        )}
+          )}
+        </div>
+        <DivisorHorizontal className="&:bg-[#ffffff10] mt-[24px]" />
       </div>
-      <div
-        className="box-content h-[1px] bg-bg-500"
-        style={{ width: "calc(100% - 48px)" }}
-      />
-    </div>
+    </>
   );
 };
 
@@ -269,12 +323,13 @@ const ValidatorsTable = () => {
       <div className="min-h-[100px] overflow-auto rounded-[24px] bg-bg-600 pb-4 text-typo-100">
         <div
           className={[
-            "grid w-full items-center justify-between gap-2 bg-bg-500 p-4 uppercase",
+            "hidden w-full items-center justify-between gap-2 bg-bg-500 p-4 uppercase md:grid",
             commonGridClasses,
           ].join(" ")}
           style={gridStyle}
         >
           <HeaderTitle
+            mobile
             onSort={setSortMethod}
             sort={sortMethod}
             sorting={["name-asc", "name-desc"]}
@@ -282,6 +337,7 @@ const ValidatorsTable = () => {
             Validator
           </HeaderTitle>
           <HeaderTitle
+            mobile
             onSort={setSortMethod}
             rigthAlign
             sort={sortMethod}
@@ -290,6 +346,7 @@ const ValidatorsTable = () => {
             <div className="text-right">Staked Amount</div>
           </HeaderTitle>
           <HeaderTitle
+            mobile
             onSort={setSortMethod}
             rigthAlign
             sort={sortMethod}
@@ -298,6 +355,7 @@ const ValidatorsTable = () => {
             <div className="text-right">Commission</div>
           </HeaderTitle>
           <HeaderTitle
+            mobile
             onSort={setSortMethod}
             rigthAlign
             sort={sortMethod}