diff --git a/apps/tangle-dapp/app/blueprints/loading.tsx b/apps/tangle-dapp/app/blueprints/loading.tsx
new file mode 100644
index 0000000000..0621a59da8
--- /dev/null
+++ b/apps/tangle-dapp/app/blueprints/loading.tsx
@@ -0,0 +1,24 @@
+import TopBanner from '@webb-tools/tangle-shared-ui/components/blueprints/TopBanner';
+import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
+import type { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const LoadingPage: FC = () => {
+  return (
+    <div className="space-y-5">
+      <TopBanner />
+
+      <div
+        className={twMerge(
+          'grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3',
+        )}
+      >
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <SkeletonLoader key={idx} className="h-80" />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LoadingPage;
diff --git a/apps/tangle-dapp/app/bridge/loading.tsx b/apps/tangle-dapp/app/bridge/loading.tsx
new file mode 100644
index 0000000000..df44dd05db
--- /dev/null
+++ b/apps/tangle-dapp/app/bridge/loading.tsx
@@ -0,0 +1,64 @@
+import { ArrowRight } from '@webb-tools/icons/ArrowRight';
+import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import { Label } from '@webb-tools/webb-ui-components/components/Label';
+import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
+import { type FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const Loading: FC = () => {
+  // TODO: Using the container style when PR https://github.com/tangle-network/dapp/pull/2664 is merged
+  return (
+    <div
+      className={twMerge(
+        'max-w-[640px] min-h-[580px] bg-mono-0 dark:bg-mono-190 p-5 md:p-8 rounded-xl',
+        'shadow-webb-lg dark:shadow-webb-lg-dark',
+        'flex flex-col justify-between w-full mx-auto',
+      )}
+    >
+      <div className="flex flex-col gap-10">
+        <div className="flex flex-col items-center justify-center md:flex-row md:justify-between md:items-end md:gap-3">
+          {/* Source Chain Selector */}
+          <div className="w-full space-y-2 md:flex-1">
+            <Label
+              className="font-bold text-mono-120 dark:text-mono-120"
+              htmlFor="bridge-source-chain-selector"
+            >
+              From
+            </Label>
+
+            <SkeletonLoader className="w-full h-16" />
+          </div>
+
+          <ArrowRight
+            size="lg"
+            className="mt-5 rotate-90 md:rotate-0 md:mt-0 md:mb-5"
+          />
+
+          {/* Destination Chain Selector */}
+          <div className="w-full space-y-2 md:flex-1">
+            <Label
+              className="font-bold text-mono-120 dark:text-mono-120"
+              htmlFor="bridge-destination-chain-selector"
+            >
+              To
+            </Label>
+
+            <SkeletonLoader className="w-full h-16" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <SkeletonLoader className="w-full h-[72px]" />
+
+          <SkeletonLoader className="w-full h-4 ml-auto max-w-24" />
+        </div>
+
+        <SkeletonLoader className="w-full h-[72px]" />
+      </div>
+
+      <Button isFullWidth isLoading loadingText="Loading..." />
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/apps/tangle-dapp/app/liquid-staking/loading.tsx b/apps/tangle-dapp/app/liquid-staking/loading.tsx
new file mode 100644
index 0000000000..8256c9a9d9
--- /dev/null
+++ b/apps/tangle-dapp/app/liquid-staking/loading.tsx
@@ -0,0 +1,14 @@
+import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
+import type { FC } from 'react';
+
+const LoadingPage: FC = () => {
+  return (
+    <div className="w-full max-w-lg mx-auto space-y-4">
+      <SkeletonLoader className="w-full h-11 rounded-2xl" />
+
+      <SkeletonLoader className="w-full h-[448px] rounded-2xl" />
+    </div>
+  );
+};
+
+export default LoadingPage;
diff --git a/apps/tangle-dapp/app/restake/AnimatedPageWrapper.tsx b/apps/tangle-dapp/app/restake/AnimatedPageWrapper.tsx
new file mode 100644
index 0000000000..eaa2ad1ba8
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/AnimatedPageWrapper.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { HTMLMotionProps, motion } from 'framer-motion';
+import { forwardRef, PropsWithChildren } from 'react';
+
+export type AnimatedPageWrapperProps = HTMLMotionProps<'div'>;
+
+const AnimatedPageWrapper = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<AnimatedPageWrapperProps>
+>(({ children, ...props }, ref) => {
+  return (
+    <motion.div
+      ref={ref}
+      style={{ transformOrigin: 'left' }}
+      initial={{ opacity: 0, flex: 'none', width: '0%' }}
+      animate={{ opacity: 1, flex: '1 1 0%', width: '100%' }}
+      transition={{ duration: 0.3, delay: 0.3 }}
+      exit={{ opacity: 0, flex: 'none', width: '0%' }}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+});
+
+AnimatedPageWrapper.displayName = 'AnimatedPageWrapper';
+
+export default AnimatedPageWrapper;
diff --git a/apps/tangle-dapp/app/restake/AnimatedTable.tsx b/apps/tangle-dapp/app/restake/AnimatedTable.tsx
new file mode 100644
index 0000000000..08eeeace7a
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/AnimatedTable.tsx
@@ -0,0 +1,34 @@
+import cx from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { PropsWithChildren } from 'react';
+
+export type AnimatedTableProps = PropsWithChildren & {
+  isTableOpen?: boolean;
+  isMediumScreen?: boolean;
+};
+
+export function AnimatedTable({
+  children,
+  isMediumScreen,
+  isTableOpen,
+}: AnimatedTableProps) {
+  return (
+    <AnimatePresence>
+      {(!isMediumScreen || isTableOpen) && (
+        <motion.div
+          key="unstake-request-table"
+          className={cx(
+            'w-full max-w-lg origin-[0_0_0]',
+            isTableOpen && isMediumScreen ? 'mr-auto ml-0' : 'mx-auto',
+          )}
+          transition={{ duration: 0.15 }}
+          initial={{ opacity: 0, scale: 0 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0 }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/apps/tangle-dapp/app/restake/ExpandTableButton.tsx b/apps/tangle-dapp/app/restake/ExpandTableButton.tsx
new file mode 100644
index 0000000000..7268d87aec
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/ExpandTableButton.tsx
@@ -0,0 +1,70 @@
+import { DoubleArrowRightIcon } from '@radix-ui/react-icons';
+import { TooltipTrigger } from '@radix-ui/react-tooltip';
+import IconButton from '@webb-tools/webb-ui-components/components/buttons/IconButton';
+import {
+  Tooltip,
+  TooltipBody,
+} from '@webb-tools/webb-ui-components/components/Tooltip';
+import type { ComponentProps, ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export enum NotificationVariant {
+  PENDING = 'pending',
+  SUCCESS = 'success',
+}
+
+export type ExpandTableButtonProps = ComponentProps<'button'> & {
+  notificationVariant?: NotificationVariant;
+  tooltipContent?: ReactNode;
+};
+
+const colorClasses = {
+  [NotificationVariant.PENDING]: {
+    back: twMerge('bg-amber-400'),
+    front: twMerge('bg-amber-500'),
+  },
+  [NotificationVariant.SUCCESS]: {
+    back: twMerge('bg-green-400'),
+    front: twMerge('bg-green-500'),
+  },
+} as const satisfies Record<
+  NotificationVariant,
+  { back: string; front: string }
+>;
+
+export function ExpandTableButton({
+  notificationVariant,
+  tooltipContent,
+  ...props
+}: ExpandTableButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <IconButton {...props}>
+          <DoubleArrowRightIcon />
+
+          {notificationVariant && (
+            <>
+              <span className="absolute top-0 right-0 flex w-2 h-2 -mt-0.5 -mr-0.5">
+                <span
+                  className={twMerge(
+                    'absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping',
+                    colorClasses[notificationVariant].back,
+                  )}
+                />
+                <span
+                  className={twMerge(
+                    'relative inline-flex w-2 h-2 rounded-full',
+                    colorClasses[notificationVariant].front,
+                  )}
+                />
+              </span>
+            </>
+          )}
+        </IconButton>
+      </TooltipTrigger>
+
+      <TooltipBody>{tooltipContent}</TooltipBody>
+    </Tooltip>
+  );
+}
diff --git a/apps/tangle-dapp/app/restake/LoadingPage.tsx b/apps/tangle-dapp/app/restake/LoadingPage.tsx
new file mode 100644
index 0000000000..d48fa1f676
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/LoadingPage.tsx
@@ -0,0 +1,39 @@
+import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import { Card } from '@webb-tools/webb-ui-components/components/Card';
+import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
+import { FC } from 'react';
+
+import RestakeTabs from './RestakeTabs';
+import StyleContainer from './StyleContainer';
+
+const LoadingPage: FC = () => {
+  return (
+    <StyleContainer>
+      <RestakeTabs />
+
+      <Card withShadow className="space-y-4">
+        <SkeletonLoader className="w-full h-36 rounded-xl" />
+
+        <div className="p-3 space-y-2">
+          <div className="flex items-center justify-between">
+            <SkeletonLoader className="flex-none w-20 h-6 rounded-xl" />
+
+            <SkeletonLoader className="flex-none w-12 h-6 rounded-xl" />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <SkeletonLoader className="flex-none w-20 h-6 rounded-xl" />
+
+            <SkeletonLoader className="flex-none w-12 h-6 rounded-xl" />
+          </div>
+        </div>
+
+        <Button isFullWidth isLoading loadingText="Loading...">
+          Loading...
+        </Button>
+      </Card>
+    </StyleContainer>
+  );
+};
+
+export default LoadingPage;
diff --git a/apps/tangle-dapp/app/restake/StyleContainer.tsx b/apps/tangle-dapp/app/restake/StyleContainer.tsx
new file mode 100644
index 0000000000..b0edef2561
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/StyleContainer.tsx
@@ -0,0 +1,21 @@
+import { ComponentProps, forwardRef, PropsWithChildren } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const StyleContainer = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<ComponentProps<'div'>>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      className={twMerge('w-full max-w-lg mx-auto', className)}
+    >
+      {children}
+    </div>
+  );
+});
+
+StyleContainer.displayName = 'StyleContainer';
+
+export default StyleContainer;
diff --git a/apps/tangle-dapp/app/restake/deposit/layout.tsx b/apps/tangle-dapp/app/restake/deposit/layout.tsx
deleted file mode 100644
index 64ad4ce10e..0000000000
--- a/apps/tangle-dapp/app/restake/deposit/layout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-
-import RestakeTabs from '../RestakeTabs';
-
-export const dynamic = 'force-static';
-
-const layout = ({ children }: PropsWithChildren) => {
-  return (
-    <div className="w-full max-w-lg mx-auto ">
-      <RestakeTabs />
-
-      {children}
-    </div>
-  );
-};
-
-export default layout;
diff --git a/apps/tangle-dapp/app/restake/deposit/loading.tsx b/apps/tangle-dapp/app/restake/deposit/loading.tsx
new file mode 100644
index 0000000000..0079e3b575
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/deposit/loading.tsx
@@ -0,0 +1,7 @@
+import LoadingPage from '../LoadingPage';
+
+const Page = () => {
+  return <LoadingPage />;
+};
+
+export default Page;
diff --git a/apps/tangle-dapp/app/restake/deposit/page.tsx b/apps/tangle-dapp/app/restake/deposit/page.tsx
index c54915d55a..c710cfa6ff 100644
--- a/apps/tangle-dapp/app/restake/deposit/page.tsx
+++ b/apps/tangle-dapp/app/restake/deposit/page.tsx
@@ -1,7 +1,14 @@
+import RestakeTabs from '../RestakeTabs';
+import StyleContainer from '../StyleContainer';
 import DepositForm from './DepositForm';
 
 export const dynamic = 'force-static';
 
 export default function DepositPage() {
-  return <DepositForm />;
+  return (
+    <StyleContainer>
+      <RestakeTabs />
+      <DepositForm />
+    </StyleContainer>
+  );
 }
diff --git a/apps/tangle-dapp/app/restake/OperatorsTable.tsx b/apps/tangle-dapp/app/restake/overview/OperatorsTable.tsx
similarity index 89%
rename from apps/tangle-dapp/app/restake/OperatorsTable.tsx
rename to apps/tangle-dapp/app/restake/overview/OperatorsTable.tsx
index bed4dd47a7..bac7ffa607 100644
--- a/apps/tangle-dapp/app/restake/OperatorsTable.tsx
+++ b/apps/tangle-dapp/app/restake/overview/OperatorsTable.tsx
@@ -5,10 +5,10 @@ import type { OperatorMap } from '@webb-tools/tangle-shared-ui/types/restake';
 import { Input } from '@webb-tools/webb-ui-components/components/Input';
 import { type ComponentProps, type FC, useMemo, useState } from 'react';
 
-import OperatorsTableUI from '../../components/tables/Operators';
-import { useRestakeContext } from '../../context/RestakeContext';
-import useIdentities from '../../data/useIdentities';
-import { delegationsToVaultTokens } from './utils';
+import OperatorsTableUI from '../../../components/tables/Operators';
+import { useRestakeContext } from '../../../context/RestakeContext';
+import useIdentities from '../../../data/useIdentities';
+import { delegationsToVaultTokens } from '../utils';
 
 type OperatorUI = NonNullable<
   ComponentProps<typeof OperatorsTableUI>['data']
diff --git a/apps/tangle-dapp/app/restake/TableTabs.tsx b/apps/tangle-dapp/app/restake/overview/TableTabs.tsx
similarity index 92%
rename from apps/tangle-dapp/app/restake/TableTabs.tsx
rename to apps/tangle-dapp/app/restake/overview/TableTabs.tsx
index 1ee8d605c3..bcee7038af 100644
--- a/apps/tangle-dapp/app/restake/TableTabs.tsx
+++ b/apps/tangle-dapp/app/restake/overview/TableTabs.tsx
@@ -6,11 +6,11 @@ import { TableAndChartTabs } from '@webb-tools/webb-ui-components/components/Tab
 import { TabContent } from '@webb-tools/webb-ui-components/components/Tabs/TabContent';
 import { type ComponentProps, type FC, useMemo } from 'react';
 
-import VaultAssetsTable from '../../components/tables/VaultAssets';
-import VaultsTable from '../../components/tables/Vaults';
-import { useRestakeContext } from '../../context/RestakeContext';
-import useRestakeRewardConfig from '../../data/restake/useRestakeRewardConfig';
-import type { DelegatorInfo } from '../../types/restake';
+import VaultAssetsTable from '../../../components/tables/VaultAssets';
+import VaultsTable from '../../../components/tables/Vaults';
+import { useRestakeContext } from '../../../context/RestakeContext';
+import useRestakeRewardConfig from '../../../data/restake/useRestakeRewardConfig';
+import type { DelegatorInfo } from '../../../types/restake';
 import OperatorsTable from './OperatorsTable';
 
 const RESTAKE_VAULTS_TAB = 'Restake Vaults';
diff --git a/apps/tangle-dapp/app/restake/overview/loading.tsx b/apps/tangle-dapp/app/restake/overview/loading.tsx
new file mode 100644
index 0000000000..6fad6a447d
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/overview/loading.tsx
@@ -0,0 +1,73 @@
+import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import {
+  Card,
+  CardVariant,
+} from '@webb-tools/webb-ui-components/components/Card';
+import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
+import { TANGLE_DOCS_RESTAKING_URL } from '@webb-tools/webb-ui-components/constants';
+import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+import type { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { CONTENT } from './shared';
+
+const LoadingPage: FC = () => {
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col gap-5 md:flex-row">
+        <Card
+          variant={CardVariant.GLASS}
+          className={twMerge(
+            'justify-between min-h-60',
+            '[background:linear-gradient(79deg,_#b6b8dd_8.85%,_#d9ddf2_55.91%,_#dbbdcd_127.36%),_#fff]',
+            'dark:[background:linear-gradient(79deg,_rgba(30,_32,_65,_0.8)_8.85%,_rgba(38,_52,_116,_0.8)_55.91%,_rgba(113,_61,_89,_0.8)_127.36%)]',
+          )}
+        >
+          <Typography
+            variant="body1"
+            className="text-mono-200 dark:text-mono-0 max-w-[510px] pb-3"
+          >
+            {CONTENT.OVERVIEW}
+          </Typography>
+
+          <div className="flex justify-end gap-6 pt-3 border-t border-mono-0 dark:border-mono-140">
+            <SkeletonLoader className="w-full h-11" />
+
+            <SkeletonLoader className="w-full h-11" />
+          </div>
+        </Card>
+
+        <Card
+          variant={CardVariant.GLASS}
+          className={twMerge('min-h-60, md:max-w-[442px] justify-between')}
+        >
+          <div>
+            <Typography
+              variant="body1"
+              fw="bold"
+              className="text-mono-200 dark:text-mono-0 mb-2.5"
+            >
+              How it works
+            </Typography>
+
+            <Typography variant="body1">{CONTENT.HOW_IT_WORKS}</Typography>
+          </div>
+
+          <Button
+            href={TANGLE_DOCS_RESTAKING_URL}
+            target="_blank"
+            variant="link"
+            size="sm"
+            className="inline-block ml-auto"
+          >
+            Read more
+          </Button>
+        </Card>
+      </div>
+
+      <SkeletonLoader className="w-full h-64" />
+    </div>
+  );
+};
+
+export default LoadingPage;
diff --git a/apps/tangle-dapp/app/restake/overview/page.tsx b/apps/tangle-dapp/app/restake/overview/page.tsx
new file mode 100644
index 0000000000..2ed5deffe1
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/overview/page.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
+import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import {
+  Card,
+  CardVariant,
+} from '@webb-tools/webb-ui-components/components/Card';
+import { TANGLE_DOCS_RESTAKING_URL } from '@webb-tools/webb-ui-components/constants';
+import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+import { twMerge } from 'tailwind-merge';
+
+import StatItem from '../../../components/StatItem';
+import useRestakeDelegatorInfo from '../../../data/restake/useRestakeDelegatorInfo';
+import useRestakeTVL from '../../../data/restake/useRestakeTVL';
+import getTVLToDisplay from '../../../utils/getTVLToDisplay';
+import { CONTENT } from './shared';
+import TableTabs from './TableTabs';
+
+export const dynamic = 'force-static';
+
+export default function RestakePage() {
+  const { delegatorInfo } = useRestakeDelegatorInfo();
+  const { operatorMap } = useRestakeOperatorMap();
+
+  const {
+    delegatorTVL,
+    operatorConcentration,
+    operatorTVL,
+    vaultTVL,
+    totalDelegatorTVL,
+    totalNetworkTVL,
+  } = useRestakeTVL(operatorMap, delegatorInfo);
+
+  return (
+    <>
+      <div className="space-y-5">
+        <div className="flex flex-col gap-5 md:flex-row">
+          <Card
+            variant={CardVariant.GLASS}
+            className={twMerge(
+              'justify-between min-h-60',
+              '[background:linear-gradient(79deg,_#b6b8dd_8.85%,_#d9ddf2_55.91%,_#dbbdcd_127.36%),_#fff]',
+              'dark:[background:linear-gradient(79deg,_rgba(30,_32,_65,_0.8)_8.85%,_rgba(38,_52,_116,_0.8)_55.91%,_rgba(113,_61,_89,_0.8)_127.36%)]',
+            )}
+          >
+            <Typography
+              variant="body1"
+              className="text-mono-200 dark:text-mono-0 max-w-[510px] pb-3"
+            >
+              {CONTENT.OVERVIEW}
+            </Typography>
+
+            <div className="flex justify-end gap-6 pt-3 border-t border-mono-0 dark:border-mono-140">
+              <StatItem
+                title={getTVLToDisplay(totalDelegatorTVL)}
+                subtitle="My Total Restaked"
+              />
+
+              <StatItem
+                title={getTVLToDisplay(totalNetworkTVL)}
+                subtitle="Network TVL"
+              />
+            </div>
+          </Card>
+
+          <Card
+            variant={CardVariant.GLASS}
+            className={twMerge('min-h-60', 'md:max-w-[442px] justify-between')}
+          >
+            <div>
+              <Typography
+                variant="body1"
+                fw="bold"
+                className="text-mono-200 dark:text-mono-0 mb-2.5"
+              >
+                How it works
+              </Typography>
+
+              <Typography variant="body1">{CONTENT.HOW_IT_WORKS}</Typography>
+            </div>
+
+            <Button
+              href={TANGLE_DOCS_RESTAKING_URL}
+              target="_blank"
+              variant="link"
+              size="sm"
+              className="inline-block ml-auto"
+            >
+              Read more
+            </Button>
+          </Card>
+        </div>
+
+        <TableTabs
+          delegatorTVL={delegatorTVL}
+          operatorMap={operatorMap}
+          delegatorInfo={delegatorInfo}
+          operatorTVL={operatorTVL}
+          vaultTVL={vaultTVL}
+          operatorConcentration={operatorConcentration}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/apps/tangle-dapp/app/restake/overview/shared.tsx b/apps/tangle-dapp/app/restake/overview/shared.tsx
new file mode 100644
index 0000000000..b320b831fa
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/overview/shared.tsx
@@ -0,0 +1,10 @@
+export const CONTENT = {
+  OVERVIEW: (
+    <>
+      Operators on Tangle provide computation resources to power AVS Blueprints.
+      <b>&nbsp;Deposit and Delegate liquidity to earn yields.</b>
+    </>
+  ),
+  HOW_IT_WORKS:
+    'Tangle combines restaking with omnichain assets to provide a multi-asset crypto-economically secured compute infrastructure.',
+} as const;
diff --git a/apps/tangle-dapp/app/restake/page.tsx b/apps/tangle-dapp/app/restake/page.tsx
index 9849306f87..b1a11cef4f 100644
--- a/apps/tangle-dapp/app/restake/page.tsx
+++ b/apps/tangle-dapp/app/restake/page.tsx
@@ -1,122 +1,9 @@
-'use client';
+import { redirect } from 'next/navigation';
 
-import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
-import {
-  Card,
-  CardVariant,
-  TANGLE_DOCS_RESTAKING_URL,
-} from '@webb-tools/webb-ui-components';
-import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
-import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
-import { twMerge } from 'tailwind-merge';
-
-import StatItem from '../../components/StatItem';
-import useRestakeDelegatorInfo from '../../data/restake/useRestakeDelegatorInfo';
-import useRestakeTVL from '../../data/restake/useRestakeTVL';
-import getTVLToDisplay from '../../utils/getTVLToDisplay';
-import TableTabs from './TableTabs';
+import { PagePath } from '../../types';
 
 export const dynamic = 'force-static';
 
-const CONTENT = {
-  OVERVIEW: (
-    <>
-      Operators on Tangle provide computation resources to power AVS Blueprints.
-      <b>&nbsp;Deposit and Delegate liquidity to earn yields.</b>
-    </>
-  ),
-  HOW_IT_WORKS:
-    'Tangle combines restaking with omnichain assets to provide a multi-asset crypto-economically secured compute infrastructure.',
-} as const;
-
-const minHeightClsx = 'min-h-[233px]';
-
 export default function RestakePage() {
-  const { delegatorInfo } = useRestakeDelegatorInfo();
-  const { operatorMap } = useRestakeOperatorMap();
-
-  const {
-    delegatorTVL,
-    operatorConcentration,
-    operatorTVL,
-    vaultTVL,
-    totalDelegatorTVL,
-    totalNetworkTVL,
-  } = useRestakeTVL(operatorMap, delegatorInfo);
-
-  return (
-    <>
-      <div className="space-y-5">
-        <div className="flex flex-col gap-5 md:flex-row">
-          <Card
-            variant={CardVariant.GLASS}
-            className={twMerge(
-              'justify-between',
-              minHeightClsx,
-              '[background:linear-gradient(79deg,_#b6b8dd_8.85%,_#d9ddf2_55.91%,_#dbbdcd_127.36%),_#fff]',
-              'dark:[background:linear-gradient(79deg,_rgba(30,_32,_65,_0.8)_8.85%,_rgba(38,_52,_116,_0.8)_55.91%,_rgba(113,_61,_89,_0.8)_127.36%)]',
-            )}
-          >
-            <Typography
-              variant="body1"
-              className="text-mono-200 dark:text-mono-0 max-w-[510px] pb-3"
-            >
-              {CONTENT.OVERVIEW}
-            </Typography>
-
-            <div className="flex justify-end gap-6 pt-3 border-t border-mono-0 dark:border-mono-140">
-              <StatItem
-                title={getTVLToDisplay(totalDelegatorTVL)}
-                subtitle="My Total Restaked"
-              />
-
-              <StatItem
-                title={getTVLToDisplay(totalNetworkTVL)}
-                subtitle="Network TVL"
-              />
-            </div>
-          </Card>
-
-          <Card
-            variant={CardVariant.GLASS}
-            className={twMerge(
-              minHeightClsx,
-              'md:max-w-[442px] justify-between',
-            )}
-          >
-            <div>
-              <Typography
-                variant="body1"
-                fw="bold"
-                className="text-mono-200 dark:text-mono-0 mb-2.5"
-              >
-                How it works
-              </Typography>
-
-              <Typography variant="body1">{CONTENT.HOW_IT_WORKS}</Typography>
-            </div>
-
-            <Button
-              href={TANGLE_DOCS_RESTAKING_URL}
-              target="_blank"
-              variant="link"
-              size="sm"
-              className="inline-block ml-auto"
-            >
-              Read more
-            </Button>
-          </Card>
-        </div>
-
-        <TableTabs
-          delegatorTVL={delegatorTVL}
-          operatorMap={operatorMap}
-          delegatorInfo={delegatorInfo}
-          operatorTVL={operatorTVL}
-          vaultTVL={vaultTVL}
-          operatorConcentration={operatorConcentration}
-        />
-      </div>
-    </>
-  );
+  return redirect(PagePath.RESTAKE_OVERVIEW);
 }
diff --git a/apps/tangle-dapp/app/restake/stake/Info.tsx b/apps/tangle-dapp/app/restake/stake/Info.tsx
index dda7d15367..e1f626fb2f 100644
--- a/apps/tangle-dapp/app/restake/stake/Info.tsx
+++ b/apps/tangle-dapp/app/restake/stake/Info.tsx
@@ -1,34 +1,35 @@
 import isDefined from '@webb-tools/dapp-types/utils/isDefined';
-import FeeDetails from '@webb-tools/webb-ui-components/components/FeeDetails';
 import { memo } from 'react';
 
+import DetailsContainer from '../../../components/DetailsContainer';
+import DetailItem from '../../../components/LiquidStaking/stakeAndUnstake/DetailItem';
 import useRestakeConsts from '../../../data/restake/useRestakeConsts';
 
 const Info = memo(() => {
   const { leaveDelegatorsDelay, delegationBondLessDelay } = useRestakeConsts();
 
   return (
-    <FeeDetails
-      isDisabledBgColor
-      disabled
-      isDefaultOpen
-      items={[
-        {
-          name: 'Unstake period',
-          info: 'Number of rounds that delegators remain bonded before the exit request is executable.',
-          value: isDefined(leaveDelegatorsDelay)
-            ? `${leaveDelegatorsDelay} rounds`
-            : leaveDelegatorsDelay,
-        },
-        {
-          name: 'Bond less delay',
-          info: 'Number of rounds that delegation bond less requests must wait before being executable.',
-          value: isDefined(delegationBondLessDelay)
-            ? `${delegationBondLessDelay} rounds`
-            : delegationBondLessDelay,
-        },
-      ]}
-    />
+    <DetailsContainer>
+      <DetailItem
+        title="Unstake period"
+        tooltip="Number of sessions that delegators remain bonded before the exit request is executable."
+        value={
+          isDefined(leaveDelegatorsDelay)
+            ? `${leaveDelegatorsDelay} sessions`
+            : leaveDelegatorsDelay
+        }
+      />
+
+      <DetailItem
+        title="Bond less delay"
+        tooltip="Number of sessions that delegation bond less requests must wait before being executable."
+        value={
+          isDefined(delegationBondLessDelay)
+            ? `${delegationBondLessDelay} sessions`
+            : delegationBondLessDelay
+        }
+      />
+    </DetailsContainer>
   );
 });
 
diff --git a/apps/tangle-dapp/app/restake/stake/layout.tsx b/apps/tangle-dapp/app/restake/stake/layout.tsx
deleted file mode 100644
index 64ad4ce10e..0000000000
--- a/apps/tangle-dapp/app/restake/stake/layout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-
-import RestakeTabs from '../RestakeTabs';
-
-export const dynamic = 'force-static';
-
-const layout = ({ children }: PropsWithChildren) => {
-  return (
-    <div className="w-full max-w-lg mx-auto ">
-      <RestakeTabs />
-
-      {children}
-    </div>
-  );
-};
-
-export default layout;
diff --git a/apps/tangle-dapp/app/restake/stake/loading.tsx b/apps/tangle-dapp/app/restake/stake/loading.tsx
new file mode 100644
index 0000000000..0079e3b575
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/stake/loading.tsx
@@ -0,0 +1,7 @@
+import LoadingPage from '../LoadingPage';
+
+const Page = () => {
+  return <LoadingPage />;
+};
+
+export default Page;
diff --git a/apps/tangle-dapp/app/restake/stake/page.tsx b/apps/tangle-dapp/app/restake/stake/page.tsx
index 70a78f4403..58bf694c77 100644
--- a/apps/tangle-dapp/app/restake/stake/page.tsx
+++ b/apps/tangle-dapp/app/restake/stake/page.tsx
@@ -42,6 +42,8 @@ import type { DelegationFormFields } from '../../../types/restake';
 import AssetList from '../AssetList';
 import Form from '../Form';
 import ModalContent from '../ModalContent';
+import RestakeTabs from '../RestakeTabs';
+import StyleContainer from '../StyleContainer';
 import SupportedChainModal from '../SupportedChainModal';
 import useSwitchChain from '../useSwitchChain';
 import ActionButton from './ActionButton';
@@ -253,70 +255,74 @@ export default function Page() {
   );
 
   return (
-    <Card withShadow>
-      <Form onSubmit={handleSubmit(onSubmit)}>
-        <div className="flex flex-col h-full space-y-4 grow">
-          <StakeInput
-            amountError={errors.amount?.message}
-            delegatorInfo={delegatorInfo}
-            openAssetModal={openAssetModal}
-            openOperatorModal={openOperatorModal}
-            register={register}
-            setValue={setValue}
-            watch={watch}
-          />
-
-          <div className="flex flex-col justify-between gap-4 grow">
-            <Info />
-
-            <ActionButton
-              errors={errors}
-              isValid={isValid}
-              openChainModal={openChainModal}
+    <StyleContainer>
+      <RestakeTabs />
+
+      <Card withShadow>
+        <Form onSubmit={handleSubmit(onSubmit)}>
+          <div className="flex flex-col h-full space-y-4 grow">
+            <StakeInput
+              amountError={errors.amount?.message}
+              delegatorInfo={delegatorInfo}
+              openAssetModal={openAssetModal}
+              openOperatorModal={openOperatorModal}
+              register={register}
+              setValue={setValue}
               watch={watch}
-              isSubmitting={isSubmitting}
             />
+
+            <div className="flex flex-col justify-between gap-4 grow">
+              <Info />
+
+              <ActionButton
+                errors={errors}
+                isValid={isValid}
+                openChainModal={openChainModal}
+                watch={watch}
+                isSubmitting={isSubmitting}
+              />
+            </div>
           </div>
-        </div>
-
-        <Modal>
-          <ModalContent
-            isOpen={isAssetModalOpen}
-            title="Select Asset"
-            description="Select the asset you want to delegate"
-            onInteractOutside={closeAssetModal}
-          >
-            <AssetList
-              selectTokens={selectableTokens}
-              onChange={handleAssetChange}
-              onClose={closeAssetModal}
-              renderEmpty={EmptyAsset}
-            />
-          </ModalContent>
-
-          <ModalContent
-            isOpen={isOperatorModalOpen}
-            title="Select Operator"
-            description="Select the operator you want to stake with"
-            onInteractOutside={closeOperatorModal}
-          >
-            <OperatorList
-              operators={operators}
-              operatorMap={operatorMap}
-              operatorIdentities={operatorIdentities}
-              onSelectOperator={handleOnSelectOperator}
-              onClose={closeOperatorModal}
+
+          <Modal>
+            <ModalContent
+              isOpen={isAssetModalOpen}
+              title="Select Asset"
+              description="Select the asset you want to delegate"
+              onInteractOutside={closeAssetModal}
+            >
+              <AssetList
+                selectTokens={selectableTokens}
+                onChange={handleAssetChange}
+                onClose={closeAssetModal}
+                renderEmpty={EmptyAsset}
+              />
+            </ModalContent>
+
+            <ModalContent
+              isOpen={isOperatorModalOpen}
+              title="Select Operator"
+              description="Select the operator you want to stake with"
+              onInteractOutside={closeOperatorModal}
+            >
+              <OperatorList
+                operators={operators}
+                operatorMap={operatorMap}
+                operatorIdentities={operatorIdentities}
+                onSelectOperator={handleOnSelectOperator}
+                onClose={closeOperatorModal}
+              />
+            </ModalContent>
+
+            <SupportedChainModal
+              isOpen={isChainModalOpen}
+              onClose={closeChainModal}
+              onChainChange={handleChainChange}
             />
-          </ModalContent>
-
-          <SupportedChainModal
-            isOpen={isChainModalOpen}
-            onClose={closeChainModal}
-            onChainChange={handleChainChange}
-          />
-        </Modal>
-      </Form>
-    </Card>
+          </Modal>
+        </Form>
+      </Card>
+    </StyleContainer>
   );
 }
 
diff --git a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx
index b295bbdc90..9f0eed8638 100644
--- a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx
+++ b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx
@@ -169,7 +169,7 @@ const UnstakeRequestTable = ({
     <>
       <Table variant={TableVariant.DEFAULT} tableProps={table} isPaginated />
 
-      <div className="flex items-center gap-3">
+      <div className="grid grid-cols-2 gap-3">
         <UnstakeRequestTableActions
           allRequests={Object.values(dataWithId)}
           selectedRequests={selectedRequests}
diff --git a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTableActions.tsx b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTableActions.tsx
index 71d0ed91ba..e3a2d2190f 100644
--- a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTableActions.tsx
+++ b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTableActions.tsx
@@ -96,7 +96,6 @@ const UnstakeRequestTableActions = ({
   return (
     <>
       <Button
-        className="flex-1"
         isLoading={isCanceling}
         loadingText="Canceling..."
         isDisabled={!canCancelUnstake || isExecuting}
@@ -108,7 +107,6 @@ const UnstakeRequestTableActions = ({
       </Button>
 
       <Button
-        className="flex-1"
         isLoading={isExecuting}
         loadingText="Executing..."
         isDisabled={!canExecuteUnstake || isCanceling}
diff --git a/apps/tangle-dapp/app/restake/unstake/loading.tsx b/apps/tangle-dapp/app/restake/unstake/loading.tsx
new file mode 100644
index 0000000000..0079e3b575
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/unstake/loading.tsx
@@ -0,0 +1,7 @@
+import LoadingPage from '../LoadingPage';
+
+const Page = () => {
+  return <LoadingPage />;
+};
+
+export default Page;
diff --git a/apps/tangle-dapp/app/restake/unstake/page.tsx b/apps/tangle-dapp/app/restake/unstake/page.tsx
index 0d9887465d..3a190f37e9 100644
--- a/apps/tangle-dapp/app/restake/unstake/page.tsx
+++ b/apps/tangle-dapp/app/restake/unstake/page.tsx
@@ -1,18 +1,24 @@
 'use client';
 
+import { Cross1Icon } from '@radix-ui/react-icons';
 import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
 import { calculateTypedChainId } from '@webb-tools/dapp-types/TypedChainId';
 import isDefined from '@webb-tools/dapp-types/utils/isDefined';
 import LockFillIcon from '@webb-tools/icons/LockFillIcon';
 import { LockLineIcon } from '@webb-tools/icons/LockLineIcon';
-import { Card } from '@webb-tools/webb-ui-components';
+import {
+  Card,
+  IconButton,
+  useBreakpointValue,
+} from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { Modal } from '@webb-tools/webb-ui-components/components/Modal';
 import type { TextFieldInputProps } from '@webb-tools/webb-ui-components/components/TextField/types';
 import { TransactionInputCard } from '@webb-tools/webb-ui-components/components/TransactionInputCard';
 import { useModal } from '@webb-tools/webb-ui-components/hooks/useModal';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import cx from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { type SubmitHandler, useForm } from 'react-hook-form';
 import { formatUnits, parseUnits } from 'viem';
 
@@ -36,8 +42,11 @@ import type { UnstakeFormFields } from '../../../types/restake';
 import decimalsToStep from '../../../utils/decimalsToStep';
 import { getAmountValidation } from '../../../utils/getAmountValidation';
 import ActionButtonBase from '../ActionButtonBase';
+import { AnimatedTable } from '../AnimatedTable';
 import AssetPlaceholder from '../AssetPlaceholder';
+import { ExpandTableButton } from '../ExpandTableButton';
 import RestakeTabs from '../RestakeTabs';
+import StyleContainer from '../StyleContainer';
 import SupportedChainModal from '../SupportedChainModal';
 import useSwitchChain from '../useSwitchChain';
 import TxInfo from './TxInfo';
@@ -47,6 +56,11 @@ import UnstakeRequestTable from './UnstakeRequestTable';
 export const dynamic = 'force-static';
 
 const Page = () => {
+  const [isUnstakeRequestTableOpen, setIsUnstakeRequestTableOpen] =
+    useState(false);
+
+  const isMediumScreen = useBreakpointValue('md', true, false);
+
   const {
     register,
     setValue: setFormValue,
@@ -226,11 +240,30 @@ const Page = () => {
   );
 
   return (
-    <div className="grid items-start grid-cols-1 gap-4 sm:grid-cols-2 justify-stretch">
-      <div className="max-w-lg">
+    <div
+      className={cx(
+        'grid gap-4 place-content-center',
+        !isMediumScreen ? 'grid-cols-1' : 'grid-flow-col auto-cols-fr',
+      )}
+    >
+      <StyleContainer
+        className={cx(
+          isUnstakeRequestTableOpen && isMediumScreen
+            ? 'ml-auto mr-0'
+            : 'mx-auto',
+        )}
+      >
         <RestakeTabs />
 
-        <Card withShadow>
+        <Card withShadow className="relative">
+          {!isUnstakeRequestTableOpen && isMediumScreen && (
+            <ExpandTableButton
+              className="absolute top-0 -right-10"
+              tooltipContent="Open unstake requests table"
+              onClick={() => setIsUnstakeRequestTableOpen(true)}
+            />
+          )}
+
           <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
             <TransactionInputCard.Root tokenSymbol={selectedAsset?.symbol}>
               <TransactionInputCard.Header>
@@ -318,19 +351,33 @@ const Page = () => {
             </ActionButtonBase>
           </form>
         </Card>
-      </div>
-
-      {/** Hardcoded for the margin top to ensure the component is align to same card content */}
-      <RestakeDetailCard.Root className="max-w-lg sm:mt-[61px]">
-        {unstakeRequests.length > 0 ? (
-          <UnstakeRequestTable
-            operatorIdentities={operatorIdentities}
-            unstakeRequests={unstakeRequests}
-          />
-        ) : (
-          <>
-            <RestakeDetailCard.Header title="No Unstake Requests" />
-
+      </StyleContainer>
+
+      <AnimatedTable
+        isTableOpen={isUnstakeRequestTableOpen}
+        isMediumScreen={isMediumScreen}
+      >
+        <RestakeDetailCard.Root className="md:mt-[61px]">
+          <div className="flex items-center justify-between">
+            <RestakeDetailCard.Header
+              title={
+                unstakeRequests.length > 0
+                  ? 'Unstake Requests'
+                  : 'No Unstake Requests'
+              }
+            />
+
+            <IconButton onClick={() => setIsUnstakeRequestTableOpen(false)}>
+              <Cross1Icon />
+            </IconButton>
+          </div>
+
+          {unstakeRequests.length > 0 ? (
+            <UnstakeRequestTable
+              operatorIdentities={operatorIdentities}
+              unstakeRequests={unstakeRequests}
+            />
+          ) : (
             <Typography
               variant="body2"
               className="text-mono-120 dark:text-mono-100"
@@ -339,9 +386,9 @@ const Page = () => {
               has been processed. To unstake your tokens go to the unstake tab
               to schedule a request.
             </Typography>
-          </>
-        )}
-      </RestakeDetailCard.Root>
+          )}
+        </RestakeDetailCard.Root>
+      </AnimatedTable>
 
       <Modal>
         <UnstakeModal
diff --git a/apps/tangle-dapp/app/restake/withdraw/TxInfo.tsx b/apps/tangle-dapp/app/restake/withdraw/TxInfo.tsx
index 690f46edf3..ef685fdaa7 100644
--- a/apps/tangle-dapp/app/restake/withdraw/TxInfo.tsx
+++ b/apps/tangle-dapp/app/restake/withdraw/TxInfo.tsx
@@ -1,30 +1,28 @@
-import FeeDetails from '@webb-tools/webb-ui-components/components/FeeDetails';
-import type { FeeItem } from '@webb-tools/webb-ui-components/components/FeeDetails/types';
-import { useMemo } from 'react';
+import isDefined from '@webb-tools/dapp-types/utils/isDefined';
+import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 
+import DetailsContainer from '../../../components/DetailsContainer';
+import DetailItem from '../../../components/LiquidStaking/stakeAndUnstake/DetailItem';
 import useRestakeConsts from '../../../data/restake/useRestakeConsts';
 
 const TxInfo = () => {
   const { leaveDelegatorsDelay } = useRestakeConsts();
 
-  const items = useMemo<FeeItem[]>(
-    () => [
-      // TOOD: Add fee value
-      {
-        name: 'Fee',
-      },
-      {
-        name: 'Withdraw Delay',
-        value:
-          typeof leaveDelegatorsDelay === 'number'
-            ? `${leaveDelegatorsDelay} rounds`
-            : null,
-      },
-    ],
-    [leaveDelegatorsDelay],
-  );
+  return (
+    <DetailsContainer>
+      {/* TODO: Add fee value */}
+      <DetailItem title="Fee" value={EMPTY_VALUE_PLACEHOLDER} />
 
-  return <FeeDetails isDisabledBgColor disabled isDefaultOpen items={items} />;
+      <DetailItem
+        title="Withdraw delay"
+        value={
+          isDefined(leaveDelegatorsDelay)
+            ? `${leaveDelegatorsDelay} sessions`
+            : leaveDelegatorsDelay
+        }
+      />
+    </DetailsContainer>
+  );
 };
 
 export default TxInfo;
diff --git a/apps/tangle-dapp/app/restake/withdraw/loading.tsx b/apps/tangle-dapp/app/restake/withdraw/loading.tsx
new file mode 100644
index 0000000000..0079e3b575
--- /dev/null
+++ b/apps/tangle-dapp/app/restake/withdraw/loading.tsx
@@ -0,0 +1,7 @@
+import LoadingPage from '../LoadingPage';
+
+const Page = () => {
+  return <LoadingPage />;
+};
+
+export default Page;
diff --git a/apps/tangle-dapp/app/restake/withdraw/page.tsx b/apps/tangle-dapp/app/restake/withdraw/page.tsx
index aeacbe4845..a9301db48d 100644
--- a/apps/tangle-dapp/app/restake/withdraw/page.tsx
+++ b/apps/tangle-dapp/app/restake/withdraw/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Cross1Icon } from '@radix-ui/react-icons';
 import { useWebContext } from '@webb-tools/api-provider-environment/webb-context';
 import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
 import { calculateTypedChainId } from '@webb-tools/dapp-types/TypedChainId';
@@ -7,14 +8,19 @@ import isDefined from '@webb-tools/dapp-types/utils/isDefined';
 import { ChainIcon } from '@webb-tools/icons/ChainIcon';
 import LockFillIcon from '@webb-tools/icons/LockFillIcon';
 import { LockLineIcon } from '@webb-tools/icons/LockLineIcon';
-import { Card } from '@webb-tools/webb-ui-components';
+import {
+  Card,
+  IconButton,
+  useBreakpointValue,
+} from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { Modal } from '@webb-tools/webb-ui-components/components/Modal';
 import type { TextFieldInputProps } from '@webb-tools/webb-ui-components/components/TextField/types';
 import { TransactionInputCard } from '@webb-tools/webb-ui-components/components/TransactionInputCard';
 import { useModal } from '@webb-tools/webb-ui-components/hooks/useModal';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import cx from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { type SubmitHandler, useForm } from 'react-hook-form';
 import { formatUnits, parseUnits } from 'viem';
 
@@ -36,8 +42,11 @@ import type { WithdrawFormFields } from '../../../types/restake';
 import decimalsToStep from '../../../utils/decimalsToStep';
 import { getAmountValidation } from '../../../utils/getAmountValidation';
 import ActionButtonBase from '../ActionButtonBase';
+import { AnimatedTable } from '../AnimatedTable';
 import AssetPlaceholder from '../AssetPlaceholder';
+import { ExpandTableButton } from '../ExpandTableButton';
 import RestakeTabs from '../RestakeTabs';
+import StyleContainer from '../StyleContainer';
 import SupportedChainModal from '../SupportedChainModal';
 import useSwitchChain from '../useSwitchChain';
 import TxInfo from './TxInfo';
@@ -75,6 +84,11 @@ const Page = () => {
     close: closeChainModal,
   } = useModal();
 
+  const [isWithdrawRequestTableOpen, setIsWithdrawRequestTableOpen] =
+    useState(false);
+
+  const isMediumScreen = useBreakpointValue('md', true, false);
+
   // Register form fields on mount
   useEffect(() => {
     register('assetId', { required: true });
@@ -198,11 +212,30 @@ const Page = () => {
   );
 
   return (
-    <div className="grid items-start grid-cols-1 gap-4 sm:grid-cols-2 justify-stretch">
-      <div className="max-w-lg">
+    <div
+      className={cx(
+        'grid gap-4 place-content-center',
+        !isMediumScreen ? 'grid-cols-1' : 'grid-flow-col auto-cols-fr',
+      )}
+    >
+      <StyleContainer
+        className={cx(
+          isWithdrawRequestTableOpen && isMediumScreen
+            ? 'ml-auto mr-0'
+            : 'mx-auto',
+        )}
+      >
         <RestakeTabs />
 
-        <Card withShadow>
+        <Card withShadow className="relative">
+          {!isWithdrawRequestTableOpen && isMediumScreen && (
+            <ExpandTableButton
+              className="absolute top-0 -right-10"
+              tooltipContent="Open withdraw requests table"
+              onClick={() => setIsWithdrawRequestTableOpen(true)}
+            />
+          )}
+
           <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
             <TransactionInputCard.Root tokenSymbol={selectedAsset?.symbol}>
               <TransactionInputCard.Header>
@@ -293,16 +326,30 @@ const Page = () => {
             </ActionButtonBase>
           </form>
         </Card>
-      </div>
-
-      {/** Hardcoded for the margin top to ensure the component is align to same card content */}
-      <RestakeDetailCard.Root className="max-w-lg sm:mt-[61px]">
-        {withdrawRequests.length > 0 ? (
-          <WithdrawRequestTable withdrawRequests={withdrawRequests} />
-        ) : (
-          <>
-            <RestakeDetailCard.Header title="No withdraw requests found" />
-
+      </StyleContainer>
+
+      <AnimatedTable
+        isTableOpen={isWithdrawRequestTableOpen}
+        isMediumScreen={isMediumScreen}
+      >
+        <RestakeDetailCard.Root className="md:mt-[61px]">
+          <div className="flex items-center justify-between">
+            <RestakeDetailCard.Header
+              title={
+                withdrawRequests.length > 0
+                  ? 'Withdraw Requests'
+                  : 'No Withdraw Requests'
+              }
+            />
+
+            <IconButton onClick={() => setIsWithdrawRequestTableOpen(false)}>
+              <Cross1Icon />
+            </IconButton>
+          </div>
+
+          {withdrawRequests.length > 0 ? (
+            <WithdrawRequestTable withdrawRequests={withdrawRequests} />
+          ) : (
             <Typography
               variant="body2"
               className="text-mono-120 dark:text-mono-100"
@@ -311,9 +358,9 @@ const Page = () => {
               schedule is completed. To unstake your tokens go to the unstake
               tab to schedule request.
             </Typography>
-          </>
-        )}
-      </RestakeDetailCard.Root>
+          )}
+        </RestakeDetailCard.Root>
+      </AnimatedTable>
 
       <Modal>
         <WithdrawModal
diff --git a/apps/tangle-dapp/types/index.ts b/apps/tangle-dapp/types/index.ts
index 988be6df66..92f0c5d390 100755
--- a/apps/tangle-dapp/types/index.ts
+++ b/apps/tangle-dapp/types/index.ts
@@ -12,6 +12,7 @@ export enum PagePath {
   BLUEPRINTS = '/blueprints',
   SERVICES = '/services',
   RESTAKE = '/restake',
+  RESTAKE_OVERVIEW = '/restake/overview',
   RESTAKE_DEPOSIT = '/restake/deposit',
   RESTAKE_STAKE = '/restake/stake',
   RESTAKE_OPERATOR = '/restake/operators',
diff --git a/libs/tangle-shared-ui/src/context/PolkadotApiContext.tsx b/libs/tangle-shared-ui/src/context/PolkadotApiContext.tsx
index e1bbfc20db..605478fed7 100644
--- a/libs/tangle-shared-ui/src/context/PolkadotApiContext.tsx
+++ b/libs/tangle-shared-ui/src/context/PolkadotApiContext.tsx
@@ -32,15 +32,27 @@ export type PolkadotApiContextProps = Prettify<{
 
 const DEFAULT_ENDPOINT = useNetworkStore.getState().rpcEndpoint;
 
-const DEFAULT_API_PROMISE = new ApiPromise({
-  provider: new WsProvider(DEFAULT_ENDPOINT),
-  noInitWarn: true,
-});
+const DEFAULT_API_PROMISE = (() => {
+  try {
+    return new ApiPromise({
+      provider: new WsProvider(DEFAULT_ENDPOINT),
+      noInitWarn: true,
+    });
+  } catch {
+    return new ApiPromise();
+  }
+})();
 
-const DEFAULT_API_RX = new ApiRx({
-  provider: new WsProvider(DEFAULT_ENDPOINT),
-  noInitWarn: true,
-});
+const DEFAULT_API_RX = (() => {
+  try {
+    return new ApiRx({
+      provider: new WsProvider(DEFAULT_ENDPOINT),
+      noInitWarn: true,
+    });
+  } catch {
+    return new ApiRx();
+  }
+})();
 
 export const PolkadotApiContext = createContext<PolkadotApiContextProps>({
   apiPromise: DEFAULT_API_PROMISE,