From d2f3ec880c492e3f3671ca2f6b268de12fdbe174 Mon Sep 17 00:00:00 2001
From: Nathan Richards <DNR500@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:37:40 +0200
Subject: [PATCH] feat: changing height and present widget better for mobile
 (#276)

Co-authored-by: Eugene Chybisov <18644653+chybisov@users.noreply.github.com>
---
 packages/widget-playground-vite/index.html    |   2 +-
 .../src/components/Card/Card.style.tsx        |   8 +
 .../DesignControls/ColorControls.tsx          |   6 +-
 .../DesignControls/DesignControls.style.tsx   |  50 +++-
 .../DesignControls/LayoutControls.tsx         | 275 ++++++++++++++++++
 .../BookmarkStoreControls.tsx                 |  79 +++++
 .../DevViewToggleControl.tsx                  |  39 +++
 .../HeaderAndFooterControls.tsx               |  87 ++++++
 .../PlaygroundSettingsControl.tsx             |  24 ++
 .../ViewportColorSelector.tsx}                |  26 +-
 .../PlaygroundSettingsControl/index.ts        |   1 +
 .../DesignControls/VariantControl.tsx         |  41 ++-
 .../DrawerControls/DesignControls/index.ts    |   1 +
 .../DrawerControls/DrawerControls.tsx         |   2 +
 .../src/components/Mock/index.tsx             |  11 +
 .../components/Widget/WidgetView.style.tsx    |  52 +++-
 .../components/Widget/WidgetViewContainer.tsx |  56 +++-
 packages/widget-playground/src/hooks/index.ts |   1 +
 .../widget-playground/src/hooks/useDevView.ts |  30 ++
 .../themeOverrides/body.ts                    |  10 +
 .../themeOverrides/dark.ts                    |   4 +-
 .../themeOverrides/light.ts                   |   5 +-
 .../src/store/editTools/EditToolsProvider.tsx |  16 +-
 .../store/editTools/createEditToolsStore.ts   |  46 +++
 .../src/store/editTools/index.ts              |   2 +
 .../src/store/editTools/types.ts              |  19 ++
 .../store/editTools/useEditToolsActions.ts    |   5 +
 .../editTools/useHeaderAndFooterToolValues.ts |  19 ++
 .../src/store/editTools/useLayoutValues.ts    |  13 +
 .../widgetConfig/createWidgetConfigStore.ts   |  22 ++
 .../src/store/widgetConfig/types.ts           |   3 +
 .../store/widgetConfig/useConfigActions.ts    |   2 +
 .../widgetConfig/utils/getConfigOutput.ts     |  16 +-
 .../widget/src/components/AppContainer.tsx    |  94 ++++--
 .../src/components/Header/Header.style.ts     |  39 ++-
 .../widget/src/components/Header/Header.tsx   |  11 +
 .../components/Routes/RoutesExpanded.style.ts |  35 ++-
 .../src/components/Routes/RoutesExpanded.tsx  |  17 +-
 .../src/components/TokenList/TokenList.tsx    |   3 +-
 .../widget/src/components/TokenList/types.ts  |   1 +
 packages/widget/src/config/constants.ts       |   1 +
 packages/widget/src/hooks/useContentHeight.ts |  53 ----
 .../widget/src/hooks/useSetContentHeight.ts   |  24 ++
 packages/widget/src/index.ts                  |   1 +
 .../pages/SelectTokenPage/SelectTokenPage.tsx |  36 +--
 .../SelectTokenPage/useTokenListHeight.ts     | 112 +++++++
 .../src/pages/SendToWallet/BookmarksPage.tsx  |  18 +-
 .../SendToWallet/SendToWalletPage.style.tsx   |  30 +-
 .../pages/SendToWallet/SendToWalletPage.tsx   |  75 ++---
 .../TransactionDetailsPage.tsx                |   1 -
 .../ExchangeRateBottomSheet.tsx               |   2 +-
 .../TransactionPage/StatusBottomSheet.tsx     |   2 +-
 .../TransactionPage/TokenValueBottomSheet.tsx |   2 +-
 packages/widget/src/themes/createTheme.ts     |   1 +
 packages/widget/src/themes/types.ts           |   2 +
 packages/widget/src/types/widget.ts           |   2 +
 56 files changed, 1322 insertions(+), 213 deletions(-)
 create mode 100644 packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx
 create mode 100644 packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/BookmarkStoreControls.tsx
 create mode 100644 packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/DevViewToggleControl.tsx
 create mode 100644 packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/HeaderAndFooterControls.tsx
 create mode 100644 packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx
 rename packages/widget-playground/src/components/DrawerControls/DesignControls/{PlaygroundSettingsControl.tsx => PlaygroundSettingsControl/ViewportColorSelector.tsx} (60%)
 create mode 100644 packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/index.ts
 create mode 100644 packages/widget-playground/src/components/Mock/index.tsx
 create mode 100644 packages/widget-playground/src/hooks/useDevView.ts
 create mode 100644 packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/body.ts
 create mode 100644 packages/widget-playground/src/store/editTools/useHeaderAndFooterToolValues.ts
 create mode 100644 packages/widget-playground/src/store/editTools/useLayoutValues.ts
 create mode 100644 packages/widget/src/config/constants.ts
 delete mode 100644 packages/widget/src/hooks/useContentHeight.ts
 create mode 100644 packages/widget/src/hooks/useSetContentHeight.ts
 create mode 100644 packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts

diff --git a/packages/widget-playground-vite/index.html b/packages/widget-playground-vite/index.html
index ff82c49c2..4733bd9a1 100644
--- a/packages/widget-playground-vite/index.html
+++ b/packages/widget-playground-vite/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="/favicon.png" />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="apple-touch-icon" href="/logo192.png" />
 
     <!--
diff --git a/packages/widget-playground/src/components/Card/Card.style.tsx b/packages/widget-playground/src/components/Card/Card.style.tsx
index c393781f5..c256ac08c 100644
--- a/packages/widget-playground/src/components/Card/Card.style.tsx
+++ b/packages/widget-playground/src/components/Card/Card.style.tsx
@@ -96,6 +96,14 @@ export const CardRowContainer = styled(Box)(({ theme }) => ({
   padding: theme.spacing(2),
 }));
 
+export const CardRowColumn = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  padding: 0,
+}));
+
 export const CardValue = styled(Typography)({
   lineHeight: '1.25',
   fontWeight: 500,
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx
index 83bb0f757..f59e70ebd 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx
@@ -4,8 +4,8 @@ import { safe6DigitHexColor } from '../../../utils';
 import { ExpandableCard } from '../../Card';
 import {
   CapitalizeFirstLetter,
+  ColorControlContainer,
   ColorInput,
-  ColorSelectorContainer,
   ColorSwatch,
   ColorSwatches,
 } from './DesignControls.style';
@@ -57,7 +57,7 @@ const ColorSelector = ({
   const { setColor } = useConfigActions();
 
   return colorValue ? (
-    <ColorSelectorContainer {...rest}>
+    <ColorControlContainer {...rest}>
       <CapitalizeFirstLetter>{colorName}</CapitalizeFirstLetter>
       <ColorInput
         aria-label={`${colorName} color selection`}
@@ -65,7 +65,7 @@ const ColorSelector = ({
         value={safe6DigitHexColor(colorValue).toUpperCase()}
         onChange={(e) => setColor(colorPath, e.target.value)}
       />
-    </ColorSelectorContainer>
+    </ColorControlContainer>
   ) : null;
 };
 
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx
index 17ecd617e..a9665aa88 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx
@@ -21,6 +21,7 @@ import { autocompleteClasses } from '@mui/material/Autocomplete';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import { alpha, styled } from '@mui/material/styles';
 import { getCardFieldsetBackgroundColor } from '../../../utils';
+import { CardRowContainer } from '../../Card';
 import { autocompletePopperZIndex } from '../DrawerControls.style';
 
 export const TabButtonsContainer = styled(Box)(({ theme }) => ({
@@ -100,6 +101,31 @@ export const TabCustomInput = styled(InputBase)<TabButtonProps>(({
   };
 });
 
+export const Input = styled(InputBase)(({ theme }) => {
+  return {
+    minHeight: 56,
+    width: '100%',
+
+    [`.${inputBaseClasses.input}`]: {
+      minHeight: 56,
+      width: '100%',
+      padding: 0,
+      textAlign: 'center',
+      '&::placeholder': {
+        fontSize: '1rem',
+        fontWeight: 400,
+        opacity: 0.5,
+      },
+      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+        display: 'none',
+      },
+    },
+    backgroundColor: getCardFieldsetBackgroundColor(theme),
+    borderRadius: theme.shape.borderRadiusSecondary,
+    boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+  };
+});
+
 export const ColorSwatches = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'flex-end',
@@ -121,7 +147,7 @@ export const ColorSwatch = styled(
   content: '" "',
 }));
 
-export const ColorSelectorContainer = styled(Box)(({ theme }) => ({
+export const ControlContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -130,10 +156,26 @@ export const ColorSelectorContainer = styled(Box)(({ theme }) => ({
     theme.shape.borderRadius,
     theme.shape.borderRadiusSecondary,
   ),
-  padding: theme.spacing(0.5),
-  paddingLeft: theme.spacing(2.5),
+  padding: theme.spacing(0.5, 2.5),
   gap: theme.spacing(0.5),
-  height: '3.5rem',
+  minHeight: theme.spacing(7),
+}));
+
+export const ColorControlContainer = styled(ControlContainer)(({ theme }) => ({
+  height: theme.spacing(7),
+  paddingRight: theme.spacing(0.5),
+}));
+
+export const PlaygroundControlsContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(1),
+}));
+
+export const ControlRowContainer = styled(CardRowContainer)(({ theme }) => ({
+  paddingLeft: 0,
+  paddingRight: 0,
 }));
 
 export const ColorInput = styled(InputBase)<InputBaseProps>(
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx
new file mode 100644
index 000000000..4411fa821
--- /dev/null
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx
@@ -0,0 +1,275 @@
+import { defaultMaxHeight } from '@lifi/widget';
+import { MenuItem, type SelectChangeEvent } from '@mui/material';
+import type { CSSProperties } from 'react';
+import { type ChangeEventHandler, useEffect, useId, useState } from 'react';
+import {
+  type Layout,
+  useConfig,
+  useConfigActions,
+  useConfigVariant,
+  useEditToolsActions,
+  useHeaderAndFooterToolValues,
+  useLayoutValues,
+} from '../../../store';
+import {
+  CardRowColumn,
+  CardRowContainer,
+  CardValue,
+  ExpandableCard,
+} from '../../Card';
+import { popperZIndex } from '../DrawerControls.style';
+import {
+  CapitalizeFirstLetter,
+  ControlRowContainer,
+  Input,
+  Select,
+} from './DesignControls.style';
+
+interface LayoutOption {
+  id: Layout;
+  name: string;
+}
+
+const layoutOptions: LayoutOption[] = [
+  {
+    id: 'default',
+    name: 'Default',
+  },
+  {
+    id: 'restricted-max-height',
+    name: 'Restricted Max Height',
+  },
+  {
+    id: 'restricted-height',
+    name: 'Restricted Height',
+  },
+  {
+    id: 'full-height',
+    name: 'Full Height',
+  },
+];
+
+interface InputLabel {
+  [key: string]: string;
+}
+
+const inputLabel: InputLabel = {
+  'restricted-height': 'Set height',
+  'restricted-max-height': 'Set max height',
+};
+
+const layoutsWithHeightControls: Layout[] = [
+  'restricted-height',
+  'restricted-max-height',
+];
+
+const getLayoutMode = (container?: CSSProperties) => {
+  let layoutMode: Layout = 'default';
+  if (
+    container &&
+    container?.display === 'flex' &&
+    container?.height === '100%'
+  ) {
+    layoutMode = 'full-height';
+  } else if (container && Number.isFinite(container?.height)) {
+    layoutMode = 'restricted-height';
+  } else if (container && Number.isFinite(container?.maxHeight)) {
+    layoutMode = 'restricted-max-height';
+  }
+  return layoutMode;
+};
+
+export const LayoutControls = () => {
+  const inputId = useId();
+  const { config } = useConfig();
+
+  const { variant } = useConfigVariant();
+  const { showMockHeader } = useHeaderAndFooterToolValues();
+  const { setHeader, setContainer, getCurrentConfigTheme, setVariant } =
+    useConfigActions();
+
+  const { selectedLayoutId } = useLayoutValues();
+  const { setSelectedLayoutId } = useEditToolsActions();
+  const [heightValue, setHeightValue] = useState<number | undefined>();
+
+  useEffect(() => {
+    setSelectedLayoutId(getLayoutMode(config?.theme?.container));
+  }, [config?.theme?.container, setSelectedLayoutId]);
+
+  const handleSelectChange = (event: SelectChangeEvent<any>) => {
+    const newLayoutId = event.target.value;
+
+    switch (newLayoutId) {
+      case 'restricted-height':
+        setHeader();
+
+        const heightContainer = {
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          height: defaultMaxHeight,
+          display: undefined,
+          maxHeight: undefined,
+        };
+        delete heightContainer.display;
+        delete heightContainer.maxHeight;
+
+        setContainer(heightContainer);
+
+        break;
+      case 'restricted-max-height':
+        setHeader();
+
+        const maxHeightContainer = {
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          maxHeight: defaultMaxHeight,
+          display: undefined,
+          height: undefined,
+        };
+        delete maxHeightContainer.display;
+        delete maxHeightContainer.height;
+
+        setContainer(maxHeightContainer);
+
+        break;
+      case 'full-height':
+        setVariant('compact');
+
+        setHeader({
+          position: 'fixed',
+          top: showMockHeader ? 48 : 0,
+        });
+
+        const fullHeightContainer = {
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          display: 'flex',
+          height: '100%',
+          maxHeight: undefined,
+        };
+        delete fullHeightContainer.maxHeight;
+
+        setContainer(fullHeightContainer);
+        break;
+      default:
+        setHeightValue(undefined);
+        setHeader();
+
+        const defaultContainer = {
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          maxHeight: undefined,
+          display: undefined,
+          height: undefined,
+        };
+        delete defaultContainer.display;
+        delete defaultContainer.height;
+        delete defaultContainer.maxHeight;
+
+        setContainer(defaultContainer);
+    }
+  };
+
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    const valueConvertedToNumber = parseInt(e.target.value, 10);
+    const height = Number.isFinite(valueConvertedToNumber)
+      ? valueConvertedToNumber
+      : undefined;
+
+    setHeightValue(height);
+
+    switch (selectedLayoutId) {
+      case 'restricted-height':
+        if (getCurrentConfigTheme()?.header) {
+          setHeader();
+        }
+
+        if (height && height >= defaultMaxHeight) {
+          const containerWithMaxHeight = {
+            ...(getCurrentConfigTheme()?.container ?? {}),
+            height,
+          };
+
+          setContainer(containerWithMaxHeight);
+        }
+        break;
+      case 'restricted-max-height':
+      default:
+        if (getCurrentConfigTheme()?.header) {
+          setHeader();
+        }
+
+        if (height && height >= defaultMaxHeight) {
+          const newContainer = {
+            ...(getCurrentConfigTheme()?.container ?? {}),
+            maxHeight: height,
+          };
+
+          setContainer(newContainer);
+        }
+
+        if (!height) {
+          const newContainer = {
+            ...(getCurrentConfigTheme()?.container ?? {}),
+            maxHeight: defaultMaxHeight,
+          };
+
+          setContainer(newContainer);
+        }
+    }
+  };
+
+  return (
+    <ExpandableCard
+      title="Layout"
+      value={
+        <CardValue sx={{ textTransform: 'capitalize' }}>
+          {layoutOptions.find((option) => option.id === selectedLayoutId)
+            ?.name || ''}
+        </CardValue>
+      }
+    >
+      <ControlRowContainer
+        sx={selectedLayoutId !== 'default' ? { paddingBottom: 0 } : undefined}
+      >
+        <Select
+          value={selectedLayoutId ?? ''}
+          onChange={handleSelectChange}
+          aria-label="Layout"
+          MenuProps={{ sx: { zIndex: popperZIndex } }}
+          disabled={variant === 'drawer'}
+        >
+          {layoutOptions?.map(({ name, id }: LayoutOption) => {
+            return (
+              <MenuItem value={id} key={id}>
+                {name}
+              </MenuItem>
+            );
+          })}
+        </Select>
+      </ControlRowContainer>
+      {layoutsWithHeightControls.includes(selectedLayoutId) ? (
+        <CardRowContainer>
+          <CardRowColumn>
+            <label htmlFor={inputId}>{inputLabel[selectedLayoutId]}</label>
+            {(heightValue && heightValue < defaultMaxHeight) || !heightValue ? (
+              <CapitalizeFirstLetter variant="caption">
+                {`${defaultMaxHeight}px minimum`}
+              </CapitalizeFirstLetter>
+            ) : null}
+          </CardRowColumn>
+          <Input
+            id={inputId}
+            type="number"
+            value={heightValue ?? ''}
+            placeholder={`${defaultMaxHeight}`}
+            onChange={handleInputChange}
+          />
+        </CardRowContainer>
+      ) : null}
+      {selectedLayoutId === 'full-height' ? (
+        <ControlRowContainer>
+          <CapitalizeFirstLetter variant="caption" sx={{ paddingLeft: 1 }}>
+            full height should be used with the compact variant
+          </CapitalizeFirstLetter>
+        </ControlRowContainer>
+      ) : null}
+    </ExpandableCard>
+  );
+};
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/BookmarkStoreControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/BookmarkStoreControls.tsx
new file mode 100644
index 000000000..152b42b4d
--- /dev/null
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/BookmarkStoreControls.tsx
@@ -0,0 +1,79 @@
+import { ChainType } from '@lifi/types';
+import type { BookmarkProps } from '@lifi/widget/stores/bookmarks/types';
+import { Box, Button } from '@mui/material';
+import { useDevView } from '../../../../hooks';
+import {
+  CapitalizeFirstLetter,
+  ColorControlContainer,
+} from '../DesignControls.style';
+
+interface StoreProp {
+  state: BookmarkProps;
+  version: number;
+}
+
+const store = {
+  state: {
+    bookmarks: [],
+    recentWallets: [],
+  },
+  version: 0,
+};
+
+// This function will populate the bookmarks with fake wallet data.
+// These are not real wallet addresses and this data is only used to check
+// the visual appearance of the bookmark list
+const fillBookmarks = (store: StoreProp, num: number) => {
+  for (let i = 0; i < num; i++) {
+    store.state.bookmarks.push({
+      name: `asdf ${i}`,
+      address: `0x29DaCdF7cCaDf4eE67c923b4C22255A4B2494e${i}`,
+      chainType: ChainType.EVM,
+    });
+  }
+
+  return store;
+};
+
+// This function will populate the recent wallets with fake wallet data.
+// These are not real wallet addresses and this data is only used to check
+// the visual appearance of the recent wallets list
+const fillRecents = (store: StoreProp, num: number) => {
+  for (let i = 0; i < num; i++) {
+    store.state.recentWallets.push({
+      address: `0x29DaCdF7cCaDf4eE67c923b4C22255A4B2494e${i}`,
+      chainType: ChainType.EVM,
+    });
+  }
+
+  return store;
+};
+
+export const BookmarkStoreControls = () => {
+  const { isDevView } = useDevView();
+
+  const handleFill = () => {
+    const newState = fillRecents(fillBookmarks(store, 50), 50);
+    localStorage.setItem('li.fi-bookmarks', JSON.stringify(newState));
+    window.location.reload();
+  };
+
+  const handleEmpty = () => {
+    localStorage.setItem('li.fi-bookmarks', JSON.stringify(store));
+    window.location.reload();
+  };
+
+  return isDevView ? (
+    <ColorControlContainer>
+      <CapitalizeFirstLetter>Bookmark store</CapitalizeFirstLetter>
+      <Box sx={{ display: 'flex', gap: 1, pr: 1 }}>
+        <Button variant="contained" onClick={handleFill}>
+          Fill
+        </Button>
+        <Button variant="contained" onClick={handleEmpty}>
+          Empty
+        </Button>
+      </Box>
+    </ColorControlContainer>
+  ) : null;
+};
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/DevViewToggleControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/DevViewToggleControl.tsx
new file mode 100644
index 000000000..efbb55637
--- /dev/null
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/DevViewToggleControl.tsx
@@ -0,0 +1,39 @@
+import { useDevView } from '../../../../hooks';
+import { CardRowColumn } from '../../../Card';
+import { Switch } from '../../../Switch';
+import {
+  CapitalizeFirstLetter,
+  ControlContainer,
+  ControlRowContainer,
+} from '../DesignControls.style';
+
+export const DevViewToggleControls = () => {
+  const { isDevView, toggleDevView } = useDevView();
+
+  const handleToggleDevView: (
+    _: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => void = (_, checked) => {
+    toggleDevView();
+  };
+
+  return (
+    <ControlContainer>
+      <CardRowColumn>
+        <ControlRowContainer sx={{ paddingBottom: 0 }}>
+          Dev view
+          <Switch
+            checked={isDevView}
+            onChange={handleToggleDevView}
+            aria-label="Show the mock header"
+          />
+        </ControlRowContainer>
+        <ControlRowContainer sx={{ paddingTop: 0, paddingBottom: 1 }}>
+          <CapitalizeFirstLetter variant="caption">
+            Enables experimental playground controls
+          </CapitalizeFirstLetter>
+        </ControlRowContainer>
+      </CardRowColumn>
+    </ControlContainer>
+  );
+};
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/HeaderAndFooterControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/HeaderAndFooterControls.tsx
new file mode 100644
index 000000000..a98be3580
--- /dev/null
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/HeaderAndFooterControls.tsx
@@ -0,0 +1,87 @@
+import {
+  useConfig,
+  useConfigActions,
+  useEditToolsActions,
+  useHeaderAndFooterToolValues,
+} from '../../../../store';
+import { CardRowColumn } from '../../../Card';
+import { Switch } from '../../../Switch';
+import { ControlContainer, ControlRowContainer } from '../DesignControls.style';
+
+export const HeaderAndFooterControls = () => {
+  const { showMockHeader, showMockFooter, isFooterFixed } =
+    useHeaderAndFooterToolValues();
+  const { setHeaderVisibility, setFooterVisibility, setFixedFooter } =
+    useEditToolsActions();
+  const { setHeader } = useConfigActions();
+
+  const { config } = useConfig();
+
+  const handleHeaderVisibilityChange: (
+    _: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => void = (_, checked) => {
+    setHeaderVisibility(checked);
+
+    if (config?.theme?.header?.position === 'fixed') {
+      setHeader({ position: 'fixed', top: checked ? 48 : 0 });
+    }
+  };
+
+  const handleFooterVisibilityChange: (
+    _: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => void = (_, checked) => {
+    setFooterVisibility(checked);
+    if (!checked) {
+      setFixedFooter(false);
+    }
+  };
+
+  const handleFooterFixedChange: (
+    _: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => void = (_, checked) => {
+    setFixedFooter(checked);
+    if (checked) {
+      setFooterVisibility(true);
+    }
+  };
+
+  const showControls =
+    config?.theme?.container?.display === 'flex' &&
+    config?.theme?.container?.height === '100%';
+
+  return showControls ? (
+    <>
+      <ControlContainer>
+        Show mock header
+        <Switch
+          checked={showMockHeader}
+          onChange={handleHeaderVisibilityChange}
+          aria-label="Show the mock header"
+        />
+      </ControlContainer>
+      <ControlContainer>
+        <CardRowColumn>
+          <ControlRowContainer>
+            Show mock footer
+            <Switch
+              checked={showMockFooter}
+              onChange={handleFooterVisibilityChange}
+              aria-label="Show the mock footer"
+            />
+          </ControlRowContainer>
+          <ControlRowContainer sx={{ paddingTop: 0 }}>
+            Make footer fixed
+            <Switch
+              checked={isFooterFixed}
+              onChange={handleFooterFixedChange}
+              aria-label="Show the mock footer"
+            />
+          </ControlRowContainer>
+        </CardRowColumn>
+      </ControlContainer>
+    </>
+  ) : null;
+};
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx
new file mode 100644
index 000000000..e518cb83a
--- /dev/null
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx
@@ -0,0 +1,24 @@
+import SettingsIcon from '@mui/icons-material/Settings';
+import { ExpandableCard } from '../../../Card';
+import { PlaygroundControlsContainer } from '../DesignControls.style';
+import { BookmarkStoreControls } from './BookmarkStoreControls';
+import { DevViewToggleControls } from './DevViewToggleControl';
+import { HeaderAndFooterControls } from './HeaderAndFooterControls';
+import { ViewportColorSelector } from './ViewportColorSelector';
+
+export const PlaygroundSettingsControl = () => {
+  return (
+    <ExpandableCard
+      title={'Playground settings'}
+      value={<SettingsIcon />}
+      alwaysShowTitleValue
+    >
+      <PlaygroundControlsContainer>
+        <ViewportColorSelector />
+        <HeaderAndFooterControls />
+        <DevViewToggleControls />
+        <BookmarkStoreControls />
+      </PlaygroundControlsContainer>
+    </ExpandableCard>
+  );
+};
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/ViewportColorSelector.tsx
similarity index 60%
rename from packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx
rename to packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/ViewportColorSelector.tsx
index c188f056d..73fd06fbc 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/ViewportColorSelector.tsx
@@ -1,29 +1,15 @@
-import SettingsIcon from '@mui/icons-material/Settings';
 import type { BoxProps } from '@mui/material';
 import { useTheme } from '@mui/material';
 import {
   useEditToolsActions,
   usePlaygroundSettingValues,
-} from '../../../store';
-import { safe6DigitHexColor } from '../../../utils';
-import { ExpandableCard } from '../../Card';
+} from '../../../../store';
+import { safe6DigitHexColor } from '../../../../utils';
 import {
   CapitalizeFirstLetter,
+  ColorControlContainer,
   ColorInput,
-  ColorSelectorContainer,
-} from './DesignControls.style';
-
-export const PlaygroundSettingsControl = () => {
-  return (
-    <ExpandableCard
-      title={'Playground settings'}
-      value={<SettingsIcon />}
-      alwaysShowTitleValue
-    >
-      <ViewportColorSelector sx={{ marginTop: 1 }} />
-    </ExpandableCard>
-  );
-};
+} from '../DesignControls.style';
 
 export const ViewportColorSelector = ({ ...rest }: BoxProps) => {
   const theme = useTheme();
@@ -36,7 +22,7 @@ export const ViewportColorSelector = ({ ...rest }: BoxProps) => {
       : theme.palette.common.black;
 
   return (
-    <ColorSelectorContainer {...rest}>
+    <ColorControlContainer {...rest}>
       <CapitalizeFirstLetter>Viewport background</CapitalizeFirstLetter>
       <ColorInput
         aria-label={`Viewport background color selection`}
@@ -44,6 +30,6 @@ export const ViewportColorSelector = ({ ...rest }: BoxProps) => {
         value={safe6DigitHexColor(viewportColor || defaultColor)}
         onChange={(e) => setViewportBackgroundColor(e.target.value)}
       />
-    </ColorSelectorContainer>
+    </ColorControlContainer>
   );
 };
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/index.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/index.ts
new file mode 100644
index 000000000..da1462bd4
--- /dev/null
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/index.ts
@@ -0,0 +1 @@
+export * from './PlaygroundSettingsControl';
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx
index 5ea5ed6d8..ca1ed8f75 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx
@@ -6,9 +6,48 @@ import { Tab, Tabs } from '../../Tabs';
 
 export const VariantControl = () => {
   const { variant } = useConfigVariant();
-  const { setVariant } = useConfigActions();
+  const { setVariant, setHeader, setContainer, getCurrentConfigTheme } =
+    useConfigActions();
+
   const handleVariantChange = (_: SyntheticEvent, value: WidgetVariant) => {
     setVariant(value);
+
+    switch (value) {
+      case 'drawer':
+        setHeader();
+
+        const containerForDrawer = {
+          ...getCurrentConfigTheme()?.container,
+          maxHeight: undefined,
+          display: undefined,
+          height: undefined,
+        };
+
+        delete containerForDrawer.display;
+        delete containerForDrawer.height;
+        delete containerForDrawer.maxHeight;
+
+        setContainer(containerForDrawer);
+        break;
+      case 'wide':
+        setHeader();
+
+        const containerForWide = {
+          ...getCurrentConfigTheme()?.container,
+        };
+
+        if (
+          containerForWide.display === 'flex' &&
+          containerForWide.height === '100%'
+        ) {
+          delete containerForWide.display;
+          delete containerForWide.height;
+        }
+
+        setContainer(containerForWide);
+        break;
+      default:
+    }
   };
 
   return (
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/index.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/index.ts
index 094e6c362..9d7d768f1 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/index.ts
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/index.ts
@@ -4,6 +4,7 @@ export * from './CardRadiusControl';
 export * from './ColorControls';
 export * from './DesignControls.style';
 export * from './FontsControl';
+export * from './LayoutControls';
 export * from './PlaygroundSettingsControl';
 export * from './SkeletonControl';
 export * from './SubvariantControl';
diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx
index c670ecba8..5b85e3af5 100644
--- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx
@@ -19,6 +19,7 @@ import {
   CardRadiusControl,
   ColorControl,
   FontsControl,
+  LayoutControls,
   PlaygroundSettingsControl,
   SkeletonControl,
   SubvariantControl,
@@ -123,6 +124,7 @@ export const DrawerControls = () => {
                   <ButtonRadiusControl />
                   <WalletManagementControl />
                   <SkeletonControl />
+                  <LayoutControls />
                 </WidgetConfigControls>
                 <PlaygroundSettingsControl />
               </ExpandableCardAccordion>
diff --git a/packages/widget-playground/src/components/Mock/index.tsx b/packages/widget-playground/src/components/Mock/index.tsx
new file mode 100644
index 000000000..5148964dc
--- /dev/null
+++ b/packages/widget-playground/src/components/Mock/index.tsx
@@ -0,0 +1,11 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const MockElement = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  width: '100%',
+  height: 48,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
index 5a29d7e54..232dcc9bb 100644
--- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
+++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
@@ -1,4 +1,5 @@
-import type { Theme } from '@mui/material';
+import { defaultMaxHeight } from '@lifi/widget';
+import type { BoxProps, Theme } from '@mui/material';
 import {
   Box,
   Button,
@@ -7,6 +8,7 @@ import {
 } from '@mui/material';
 import { buttonClasses } from '@mui/material/Button';
 import { alpha, styled } from '@mui/material/styles';
+import type { CSSProperties } from 'react';
 import { drawerZIndex } from '../DrawerControls';
 
 export const FloatingToolsContainer = styled(Box)(({ theme }) => ({
@@ -14,16 +16,48 @@ export const FloatingToolsContainer = styled(Box)(({ theme }) => ({
   gap: theme.spacing(2),
   position: 'absolute',
   zIndex: drawerZIndex,
-  padding: theme.spacing(3),
+  padding: theme.spacing(3, 0, 0, 3),
 }));
 
-export const WidgetContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexGrow: 1,
-  alignItems: 'center',
-  justifyContent: 'center',
-  paddingTop: theme.spacing(6),
-}));
+interface WidgetContainerProps extends BoxProps {
+  removePaddingTop?: boolean;
+  alignTop?: boolean;
+}
+
+export const WidgetContainer = styled(Box, {
+  shouldForwardProp: (prop) =>
+    !['removePaddingTop', 'alignTop'].includes(prop as string),
+})<WidgetContainerProps>(({ theme, removePaddingTop, alignTop }) => {
+  return {
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: alignTop ? 'flex-start' : 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    paddingTop: removePaddingTop ? 0 : theme.spacing(6),
+  };
+});
+
+interface WidgetContainerRowProps extends BoxProps {
+  alignTop?: boolean;
+  widgetContainer?: CSSProperties;
+}
+
+export const WidgetContainerRow = styled(Box, {
+  shouldForwardProp: (prop) =>
+    !['alignTop', 'widgetContainer'].includes(prop as string),
+})<WidgetContainerRowProps>(({ theme, alignTop, widgetContainer }) => {
+  return {
+    display: 'flex',
+    alignItems: alignTop ? 'flex-start' : 'center',
+    flexGrow: 1,
+    width: '100%',
+    maxHeight:
+      widgetContainer?.maxHeight || !widgetContainer?.height
+        ? (widgetContainer?.maxHeight ?? defaultMaxHeight)
+        : 'none',
+  };
+});
 
 const floatingToolButtonColors = (theme: Theme) => ({
   color: theme.palette.text.primary,
diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
index b3ca1cedb..7e48f1693 100644
--- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
+++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
@@ -4,32 +4,49 @@ import { ConnectButton } from '@rainbow-me/rainbowkit';
 import type { PropsWithChildren } from 'react';
 import { ExternalWalletProvider } from '../../providers';
 import {
+  type Layout,
   useConfig,
   useDrawerToolValues,
   useEditToolsActions,
+  useHeaderAndFooterToolValues,
+  useLayoutValues,
 } from '../../store';
+import { MockElement } from '../Mock';
 import { ToggleDrawerButton } from './ToggleDrawerButton';
 import {
   DrawerOpenButton,
   FloatingToolsContainer,
   Main,
   WidgetContainer,
+  WidgetContainerRow,
 } from './WidgetView.style';
 
 interface WidgetViewContainerProps extends PropsWithChildren {
   toggleDrawer?(): void;
 }
 
+const topAlignedLayouts: Layout[] = ['default', 'restricted-max-height'];
+
 export function WidgetViewContainer({
   children,
   toggleDrawer,
 }: WidgetViewContainerProps) {
   const { config } = useConfig();
   const { isDrawerOpen, drawerWidth } = useDrawerToolValues();
+  const { selectedLayoutId } = useLayoutValues();
   const { setDrawerOpen } = useEditToolsActions();
+  const { showMockHeader, showMockFooter, isFooterFixed } =
+    useHeaderAndFooterToolValues();
 
   const isWalletManagementExternal = !!config?.walletConfig;
 
+  const isFullHeightLayout =
+    config?.theme?.container?.height === '100%' &&
+    config?.theme?.container?.display === 'flex';
+
+  const showHeader = isFullHeightLayout && showMockHeader;
+  const showFooter = isFullHeightLayout && showMockFooter;
+
   return (
     <Main open={isDrawerOpen} drawerWidth={drawerWidth}>
       <ExternalWalletProvider isExternalProvider={isWalletManagementExternal}>
@@ -48,7 +65,44 @@ export function WidgetViewContainer({
             <ToggleDrawerButton onClick={toggleDrawer} />
           ) : null}
         </FloatingToolsContainer>
-        <WidgetContainer>{children}</WidgetContainer>
+        <WidgetContainer
+          removePaddingTop={
+            (config?.theme?.container?.height === '100%' && !showHeader) ||
+            (config?.theme?.container?.display === 'flex' && !showHeader)
+          }
+          alignTop={config?.theme?.container?.display === 'flex'}
+        >
+          {showHeader ? (
+            <MockElement sx={{ position: 'fixed', zIndex: 1, top: 0 }}>
+              Mock header
+            </MockElement>
+          ) : null}
+          <WidgetContainerRow
+            sx={
+              isFullHeightLayout && isFooterFixed
+                ? { marginBottom: 6 }
+                : undefined
+            }
+            alignTop={
+              config?.theme?.container?.display === 'flex' ||
+              topAlignedLayouts.includes(selectedLayoutId)
+            }
+            widgetContainer={config?.theme?.container}
+          >
+            {children}
+          </WidgetContainerRow>
+          {showFooter ? (
+            <MockElement
+              sx={
+                isFullHeightLayout && isFooterFixed
+                  ? { position: 'fixed', zIndex: 1, bottom: 0 }
+                  : undefined
+              }
+            >
+              Mock footer
+            </MockElement>
+          ) : null}
+        </WidgetContainer>
       </ExternalWalletProvider>
     </Main>
   );
diff --git a/packages/widget-playground/src/hooks/index.ts b/packages/widget-playground/src/hooks/index.ts
index 3dbb8f020..24a3fc558 100644
--- a/packages/widget-playground/src/hooks/index.ts
+++ b/packages/widget-playground/src/hooks/index.ts
@@ -1 +1,2 @@
+export * from './useDevView';
 export * from './useThemeMode';
diff --git a/packages/widget-playground/src/hooks/useDevView.ts b/packages/widget-playground/src/hooks/useDevView.ts
new file mode 100644
index 000000000..d669aee0a
--- /dev/null
+++ b/packages/widget-playground/src/hooks/useDevView.ts
@@ -0,0 +1,30 @@
+import { shallow } from 'zustand/shallow';
+import { useEditToolsActions, useEditToolsStore } from '../store';
+
+const queryStringKey = 'devView';
+
+const setQueryStringParam = (value: boolean) => {
+  const url = new URL(window.location.href);
+  if (value) {
+    url.searchParams.set(queryStringKey, value.toString());
+  } else {
+    url.searchParams.delete(queryStringKey);
+  }
+  window.history.pushState(null, '', url.toString());
+};
+
+export const useDevView = () => {
+  const [isDevView] = useEditToolsStore((store) => [store.isDevView], shallow);
+  const { setIsDevView } = useEditToolsActions();
+
+  const toggleDevView = () => {
+    const newDevViewValue = !isDevView;
+    setQueryStringParam(newDevViewValue);
+    setIsDevView(newDevViewValue);
+  };
+
+  return {
+    isDevView,
+    toggleDevView,
+  };
+};
diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/body.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/body.ts
new file mode 100644
index 000000000..36ac2d604
--- /dev/null
+++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/body.ts
@@ -0,0 +1,10 @@
+export const body = {
+  display: 'flex',
+  overscrollBehavior: 'none',
+  '@supports (height: 100dvh)': {
+    minHeight: '100dvh',
+  },
+  '@supports not (height: 100dvh)': {
+    minHeight: '100vh',
+  },
+};
diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/dark.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/dark.ts
index 9596fe253..c194a926b 100644
--- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/dark.ts
+++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/dark.ts
@@ -1,5 +1,6 @@
 import type { WidgetTheme } from '@lifi/widget';
 import type { Theme } from '@mui/material';
+import { body } from './body';
 
 export const darkPalette = {
   mode: 'dark',
@@ -33,8 +34,7 @@ export const darkComponents = {
   MuiCssBaseline: {
     styleOverrides: (theme: WidgetTheme & Theme) => ({
       body: {
-        display: 'flex',
-        minHeight: '100vh',
+        ...body,
         backgroundColor:
           theme.playground?.background || theme.palette?.common?.black,
       },
diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts
index 89fbbda75..f0d8c88a5 100644
--- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts
+++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts
@@ -1,4 +1,6 @@
 import type { WidgetTheme } from '@lifi/widget';
+import { body } from './body';
+
 export const lightPalette = {
   mode: 'light',
   text: {
@@ -13,8 +15,7 @@ export const lightComponents = {
   MuiCssBaseline: {
     styleOverrides: (theme: WidgetTheme) => ({
       body: {
-        display: 'flex',
-        minHeight: '100vh',
+        ...body,
         backgroundColor:
           theme.playground?.background || theme.palette?.grey?.[100],
       },
diff --git a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx
index 3b3e84233..4a70101b1 100644
--- a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx
+++ b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx
@@ -1,10 +1,18 @@
 import type { FC, PropsWithChildren } from 'react';
-import { createContext, useContext, useRef } from 'react';
+import { createContext, useContext, useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useConfigActions } from '../widgetConfig';
 import { createEditToolsStore } from './createEditToolsStore';
 import type { ToolsState, ToolsStore } from './types';
 
+const getIsDevViewQueryStringParam = () => {
+  if (typeof window !== 'undefined') {
+    const urlParams = new URLSearchParams(window.location.search);
+    return !!urlParams.get('devView') || false;
+  }
+  return false;
+};
+
 export const EditToolsContext = createContext<ToolsStore | null>(null);
 
 export const EditToolsProvider: FC<PropsWithChildren> = ({ children }) => {
@@ -15,6 +23,12 @@ export const EditToolsProvider: FC<PropsWithChildren> = ({ children }) => {
     storeRef.current = createEditToolsStore(getCurrentThemePreset());
   }
 
+  useEffect(() => {
+    if (storeRef.current) {
+      storeRef.current.getState().setIsDevView(getIsDevViewQueryStringParam());
+    }
+  }, [storeRef]);
+
   return (
     <EditToolsContext.Provider value={storeRef.current}>
       {children}
diff --git a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts
index 902d3aa86..5a70725f2 100644
--- a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts
+++ b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts
@@ -27,6 +27,15 @@ export const createEditToolsStore = (initialTheme?: WidgetTheme) =>
           show: false,
           sideBySide: false,
         },
+        headerAndFooterControl: {
+          showMockHeader: false,
+          showMockFooter: false,
+          isFooterFixed: false,
+        },
+        layoutControl: {
+          selectedLayoutId: 'default',
+        },
+        isDevView: false,
         setDrawerOpen: (open) => {
           set({
             drawer: {
@@ -105,6 +114,43 @@ export const createEditToolsStore = (initialTheme?: WidgetTheme) =>
             },
           });
         },
+        setHeaderVisibility: (show) => {
+          set({
+            headerAndFooterControl: {
+              ...get().headerAndFooterControl,
+              showMockHeader: show,
+            },
+          });
+        },
+        setFooterVisibility: (show) => {
+          set({
+            headerAndFooterControl: {
+              ...get().headerAndFooterControl,
+              showMockFooter: show,
+            },
+          });
+        },
+        setFixedFooter: (isFixed) => {
+          set({
+            headerAndFooterControl: {
+              ...get().headerAndFooterControl,
+              isFooterFixed: isFixed,
+            },
+          });
+        },
+        setSelectedLayoutId: (selectedLayoutId) => {
+          set({
+            layoutControl: {
+              ...get().layoutControl,
+              selectedLayoutId,
+            },
+          });
+        },
+        setIsDevView: (isDevView) => {
+          set({
+            isDevView,
+          });
+        },
       }),
       {
         name: 'li.fi-playground-tools',
diff --git a/packages/widget-playground/src/store/editTools/index.ts b/packages/widget-playground/src/store/editTools/index.ts
index c8fa73934..38a5d428b 100644
--- a/packages/widget-playground/src/store/editTools/index.ts
+++ b/packages/widget-playground/src/store/editTools/index.ts
@@ -5,5 +5,7 @@ export * from './useCodeToolValues';
 export * from './useDrawerToolValues';
 export * from './useEditToolsActions';
 export * from './useFontToolValues';
+export * from './useHeaderAndFooterToolValues';
+export * from './useLayoutValues';
 export * from './usePlaygroundSettingValues';
 export * from './useSkeletonToolValues';
diff --git a/packages/widget-playground/src/store/editTools/types.ts b/packages/widget-playground/src/store/editTools/types.ts
index f6934cb79..29eadcd5c 100644
--- a/packages/widget-playground/src/store/editTools/types.ts
+++ b/packages/widget-playground/src/store/editTools/types.ts
@@ -5,6 +5,11 @@ import type { Font } from '../../providers';
 
 type ControlType = 'design' | 'code';
 type CodeControlTab = 'config' | 'examples';
+export type Layout =
+  | 'default'
+  | 'restricted-height'
+  | 'restricted-max-height'
+  | 'full-height';
 
 export type ThemeAppearances =
   | {
@@ -46,6 +51,15 @@ export interface EditToolsValues {
     show: boolean;
     sideBySide: boolean;
   };
+  headerAndFooterControl: {
+    showMockHeader: boolean;
+    showMockFooter: boolean;
+    isFooterFixed: boolean;
+  };
+  layoutControl: {
+    selectedLayoutId: Layout;
+  };
+  isDevView: boolean;
 }
 
 export interface EditToolsActions {
@@ -58,6 +72,11 @@ export interface EditToolsActions {
   setViewportBackgroundColor: (color: string | undefined) => void;
   setSkeletonShow: (show: boolean) => void;
   setSkeletonSideBySide: (sideBySide: boolean) => void;
+  setHeaderVisibility: (show: boolean) => void;
+  setFooterVisibility: (show: boolean) => void;
+  setFixedFooter: (isFixed: boolean) => void;
+  setSelectedLayoutId: (layoutId: Layout) => void;
+  setIsDevView: (isDevView: boolean) => void;
 }
 
 export type ToolsState = EditToolsValues & EditToolsActions;
diff --git a/packages/widget-playground/src/store/editTools/useEditToolsActions.ts b/packages/widget-playground/src/store/editTools/useEditToolsActions.ts
index 26805e3ad..ace89fbf3 100644
--- a/packages/widget-playground/src/store/editTools/useEditToolsActions.ts
+++ b/packages/widget-playground/src/store/editTools/useEditToolsActions.ts
@@ -13,6 +13,11 @@ export const useEditToolsActions = () => {
       setViewportBackgroundColor: state.setViewportBackgroundColor,
       setSkeletonShow: state.setSkeletonShow,
       setSkeletonSideBySide: state.setSkeletonSideBySide,
+      setHeaderVisibility: state.setHeaderVisibility,
+      setFooterVisibility: state.setFooterVisibility,
+      setFixedFooter: state.setFixedFooter,
+      setSelectedLayoutId: state.setSelectedLayoutId,
+      setIsDevView: state.setIsDevView,
     }),
     shallow,
   );
diff --git a/packages/widget-playground/src/store/editTools/useHeaderAndFooterToolValues.ts b/packages/widget-playground/src/store/editTools/useHeaderAndFooterToolValues.ts
new file mode 100644
index 000000000..2a394dce7
--- /dev/null
+++ b/packages/widget-playground/src/store/editTools/useHeaderAndFooterToolValues.ts
@@ -0,0 +1,19 @@
+import { shallow } from 'zustand/shallow';
+import { useEditToolsStore } from './EditToolsProvider';
+
+export const useHeaderAndFooterToolValues = () => {
+  const [showMockHeader, showMockFooter, isFooterFixed] = useEditToolsStore(
+    (store) => [
+      store.headerAndFooterControl.showMockHeader,
+      store.headerAndFooterControl.showMockFooter,
+      store.headerAndFooterControl.isFooterFixed,
+    ],
+    shallow,
+  );
+
+  return {
+    showMockHeader,
+    showMockFooter,
+    isFooterFixed,
+  };
+};
diff --git a/packages/widget-playground/src/store/editTools/useLayoutValues.ts b/packages/widget-playground/src/store/editTools/useLayoutValues.ts
new file mode 100644
index 000000000..cda128314
--- /dev/null
+++ b/packages/widget-playground/src/store/editTools/useLayoutValues.ts
@@ -0,0 +1,13 @@
+import { shallow } from 'zustand/shallow';
+import { useEditToolsStore } from './EditToolsProvider';
+
+export const useLayoutValues = () => {
+  const [selectedLayoutId] = useEditToolsStore(
+    (store) => [store.layoutControl.selectedLayoutId],
+    shallow,
+  );
+
+  return {
+    selectedLayoutId,
+  };
+};
diff --git a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts
index cd6876ea7..03b8b3fce 100644
--- a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts
+++ b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts
@@ -196,6 +196,28 @@ export const createWidgetConfigStore = (
         getCurrentConfigTheme: () => {
           return get().config?.theme;
         },
+        setHeader: (header) => {
+          set({
+            config: {
+              ...get().config,
+              theme: {
+                ...get().config?.theme,
+                header,
+              },
+            },
+          });
+        },
+        setContainer: (container) => {
+          set({
+            config: {
+              ...get().config,
+              theme: {
+                ...get().config?.theme,
+                container,
+              },
+            },
+          });
+        },
       }),
       {
         name: 'li.fi-playground-config',
diff --git a/packages/widget-playground/src/store/widgetConfig/types.ts b/packages/widget-playground/src/store/widgetConfig/types.ts
index 8c2431b0a..b1f2fb2e7 100644
--- a/packages/widget-playground/src/store/widgetConfig/types.ts
+++ b/packages/widget-playground/src/store/widgetConfig/types.ts
@@ -6,6 +6,7 @@ import type {
   WidgetVariant,
   WidgetWalletConfig,
 } from '@lifi/widget';
+import type { CSSProperties } from 'react';
 import type { StoreApi } from 'zustand';
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
 import type { ThemeItem } from '../editTools/types';
@@ -35,6 +36,8 @@ export interface WidgetConfigActions {
   setAvailableThemes: (themeItems: ThemeItem[]) => void;
   getCurrentThemePreset: (useDarkMode?: boolean) => WidgetTheme | undefined;
   getCurrentConfigTheme: () => WidgetTheme | undefined;
+  setHeader: (header?: CSSProperties) => void;
+  setContainer: (container?: CSSProperties) => void;
 }
 
 export type WidgetConfigState = WidgetConfigValues & WidgetConfigActions;
diff --git a/packages/widget-playground/src/store/widgetConfig/useConfigActions.ts b/packages/widget-playground/src/store/widgetConfig/useConfigActions.ts
index 4e73b237b..bc786f57d 100644
--- a/packages/widget-playground/src/store/widgetConfig/useConfigActions.ts
+++ b/packages/widget-playground/src/store/widgetConfig/useConfigActions.ts
@@ -19,6 +19,8 @@ export const useConfigActions = () => {
       setConfigTheme: state.setConfigTheme,
       getCurrentThemePreset: state.getCurrentThemePreset,
       getCurrentConfigTheme: state.getCurrentConfigTheme,
+      setHeader: state.setHeader,
+      setContainer: state.setContainer,
     }),
     shallow,
   );
diff --git a/packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts b/packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts
index 48a59febc..b309fbbd2 100644
--- a/packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts
+++ b/packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts
@@ -1,4 +1,5 @@
 import type { WidgetConfig, WidgetTheme } from '@lifi/widget';
+import { defaultMaxHeight } from '@lifi/widget';
 
 export const getConfigOutput = (
   config: Partial<WidgetConfig>,
@@ -11,7 +12,20 @@ export const getConfigOutput = (
     ...(config.appearance ? { appearance: config.appearance } : {}),
     ...(theme
       ? {
-          theme,
+          theme: {
+            ...theme,
+            ...(theme.container
+              ? {
+                  container: {
+                    ...theme.container,
+                    ...(theme.container.maxHeight &&
+                    theme.container.maxHeight !== defaultMaxHeight
+                      ? { maxHeight: theme.container.maxHeight }
+                      : { maxHeight: undefined }),
+                  },
+                }
+              : {}),
+          },
         }
       : {}),
     ...(config.walletConfig ? { walletConfig: config.walletConfig } : {}),
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
index e35216af5..ef653d386 100644
--- a/packages/widget/src/components/AppContainer.tsx
+++ b/packages/widget/src/components/AppContainer.tsx
@@ -1,60 +1,105 @@
 import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
 import type { PropsWithChildren } from 'react';
+import {
+  maxHeaderHeight,
+  minHeaderHeight,
+} from '../components/Header/Header.js';
+import { defaultMaxHeight } from '../config/constants.js';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import type { WidgetVariant } from '../types/widget.js';
 import { ElementId, createElementId } from '../utils/elements.js';
 
-export const maxHeight = 682;
-
 export const AppExpandedContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ variant }) => ({
+})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'start',
   flex: 1,
-  height: variant === 'drawer' ? 'none' : maxHeight,
+  height:
+    variant === 'drawer'
+      ? 'none'
+      : theme.container?.display === 'flex'
+        ? '100%'
+        : theme.container?.maxHeight
+          ? 'auto'
+          : theme.container?.height || 'auto',
 }));
 
 export const RelativeContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
-  position: 'relative',
-  boxSizing: 'content-box',
-  width: '100%',
-  minWidth: theme.breakpoints.values.xs,
-  maxWidth: theme.breakpoints.values.sm,
-  maxHeight: variant === 'drawer' ? 'none' : maxHeight,
-  background: theme.palette.background.default,
-  overflow: 'auto',
-  flex: 1,
-  zIndex: 0,
-  ...theme.container,
-}));
+})<{ variant?: WidgetVariant }>(({ theme, variant }) => {
+  const container = { ...theme.container };
+
+  if (variant === 'drawer') {
+    container.height = '100%';
+  }
+
+  return {
+    position: 'relative',
+    boxSizing: 'content-box',
+    width: '100%',
+    minWidth: theme.breakpoints.values.xs,
+    maxWidth: theme.breakpoints.values.sm,
+    background: theme.palette.background.default,
+    overflow: 'auto',
+    flex: 1,
+    zIndex: 0,
+    ...container,
+    maxHeight:
+      variant === 'drawer'
+        ? 'none'
+        : theme.container?.display === 'flex' && !theme.container?.height
+          ? '100%'
+          : theme.container?.maxHeight
+            ? theme.container?.maxHeight
+            : theme.container?.height || defaultMaxHeight,
+  };
+});
+
+interface CssBaselineContainerProps {
+  variant?: WidgetVariant;
+  paddingTopAdjustment: number;
+}
 
 const CssBaselineContainer = styled(ScopedCssBaseline, {
-  shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ variant }) => ({
+  shouldForwardProp: (prop) =>
+    !['variant', 'paddingTopAdjustment'].includes(prop as string),
+})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => ({
   display: 'flex',
   flex: 1,
   flexDirection: 'column',
   overflowX: 'clip',
   margin: 0,
   width: '100%',
-  maxHeight: variant === 'drawer' ? 'none' : maxHeight,
+  maxHeight:
+    variant === 'drawer' || theme.container?.display === 'flex'
+      ? 'none'
+      : theme.container?.maxHeight
+        ? theme.container?.maxHeight
+        : theme.container?.height || defaultMaxHeight,
   overflowY: 'auto',
-  height: '100%',
+  height: theme.container?.display === 'flex' ? 'auto' : '100%',
+  paddingTop: paddingTopAdjustment,
 }));
 
-export const FlexContainer = styled(Container)({
+export const FlexContainer = styled(Container)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-});
+}));
 
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   // const ref = useRef<HTMLDivElement>(null);
-  const { variant, elementId } = useWidgetConfig();
+  const { variant, elementId, hiddenUI, theme } = useWidgetConfig();
+
+  const positionFixedAdjustment =
+    theme?.header?.position === 'fixed'
+      ? hiddenUI?.includes('walletMenu')
+        ? minHeaderHeight
+        : maxHeaderHeight
+      : 0;
+
   return (
     <RelativeContainer
       variant={variant}
@@ -64,6 +109,7 @@ export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
         id={createElementId(ElementId.ScrollableContainer, elementId)}
         variant={variant}
         enableColorScheme
+        paddingTopAdjustment={positionFixedAdjustment}
         // ref={ref}
       >
         <FlexContainer disableGutters>{children}</FlexContainer>
diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts
index 2bcaaca79..f42b02ed4 100644
--- a/packages/widget/src/components/Header/Header.style.ts
+++ b/packages/widget/src/components/Header/Header.style.ts
@@ -20,17 +20,34 @@ export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
 
 export const Container = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'sticky',
-})<{ sticky?: boolean }>(({ theme, sticky }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  backgroundColor: theme.palette.background.default,
-  backdropFilter: 'blur(12px)',
-  position: sticky ? 'sticky' : 'relative',
-  top: 0,
-  zIndex: 1200,
-  gap: theme.spacing(0.5),
-  padding: theme.spacing(1.5, 3, 1.5, 3),
-}));
+})<{ sticky?: boolean }>(({ theme, sticky }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: theme.palette.background.default,
+    backdropFilter: 'blur(12px)',
+    position: sticky ? 'sticky' : 'relative',
+    top: 0,
+    zIndex: 1200,
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1.5, 3, 1.5, 3),
+    overflow: 'auto',
+    ...theme.header,
+    ...(theme.header?.position === 'fixed'
+      ? {
+          minWidth: theme.breakpoints.values.xs,
+          maxWidth: theme.breakpoints.values.sm,
+          width: '100%',
+        }
+      : {}),
+  };
+});
+
+export const ContainerPlaceholder = styled(Box)(({ theme }) => {
+  return {
+    ...(theme.header?.position === 'fixed' ? {} : { display: 'none' }),
+  };
+});
 
 export const WalletButton = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'subvariant',
diff --git a/packages/widget/src/components/Header/Header.tsx b/packages/widget/src/components/Header/Header.tsx
index 5b8aad99b..8830b31bb 100644
--- a/packages/widget/src/components/Header/Header.tsx
+++ b/packages/widget/src/components/Header/Header.tsx
@@ -1,19 +1,30 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { ElementId, createElementId } from '../../utils/elements.js';
 import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
 import { Container } from './Header.style.js';
 import { NavigationHeader } from './NavigationHeader.js';
 import { WalletHeader } from './WalletHeader.js';
 
+export const minHeaderHeight = 64;
+export const maxHeaderHeight = 108;
+
 export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { pathname } = useLocation();
   const elementId = useDefaultElementId();
+  const { hiddenUI } = useWidgetConfig();
+
+  const headerHeight = hiddenUI?.includes('walletMenu')
+    ? minHeaderHeight
+    : maxHeaderHeight;
+
   return (
     <Container
       id={createElementId(ElementId.Header, elementId)}
       sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}
+      maxHeight={headerHeight}
     >
       {children}
     </Container>
diff --git a/packages/widget/src/components/Routes/RoutesExpanded.style.ts b/packages/widget/src/components/Routes/RoutesExpanded.style.ts
index c1e3e7ea0..ba9de077b 100644
--- a/packages/widget/src/components/Routes/RoutesExpanded.style.ts
+++ b/packages/widget/src/components/Routes/RoutesExpanded.style.ts
@@ -1,9 +1,20 @@
-import { Box, ScopedCssBaseline, styled } from '@mui/material';
-import { maxHeight } from '../AppContainer.js';
+import type { ScopedCssBaselineProps } from '@mui/material';
+import { Box, Collapse, Grow, ScopedCssBaseline, styled } from '@mui/material';
+import { defaultMaxHeight } from '../../config/constants.js';
 
 export const CollapseContainer = styled(Box)(({ theme }) => ({
-  height: maxHeight,
   zIndex: 0,
+  ...(theme.container.display === 'flex'
+    ? { display: 'flex', maxHeight: '100%' }
+    : { height: 'auto' }),
+}));
+
+export const RoutesExpandedCollapse = styled(Collapse)(({ theme }) => ({
+  ...(theme.container?.display === 'flex' ? { height: '100%' } : {}),
+}));
+
+export const RouteTopLevelGrow = styled(Grow)(({ theme }) => ({
+  ...(theme.container?.display === 'flex' ? { height: '100%' } : {}),
 }));
 
 export const ScrollableContainer = styled(Box)({
@@ -15,14 +26,28 @@ export const ScrollableContainer = styled(Box)({
   flexDirection: 'column',
 });
 
-export const Container = styled(ScopedCssBaseline)(({ theme }) => ({
+interface ContainerProps extends ScopedCssBaselineProps {
+  minimumHeight: boolean;
+}
+
+export const Container = styled(ScopedCssBaseline, {
+  shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
+})<ContainerProps>(({ theme, minimumHeight }) => ({
   backgroundColor: theme.palette.background.default,
   overflow: 'auto',
   width: 436,
-  maxHeight,
   marginLeft: theme.spacing(3),
   display: 'flex',
   flexDirection: 'column',
+  ...(theme.container?.display !== 'flex'
+    ? {
+        maxHeight:
+          theme.container?.maxHeight ??
+          theme.container?.height ??
+          defaultMaxHeight,
+        ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
+      }
+    : { height: minimumHeight ? 'auto' : '100%' }),
   ...theme.container,
 }));
 
diff --git a/packages/widget/src/components/Routes/RoutesExpanded.tsx b/packages/widget/src/components/Routes/RoutesExpanded.tsx
index 91fc91ad1..0438d91a7 100644
--- a/packages/widget/src/components/Routes/RoutesExpanded.tsx
+++ b/packages/widget/src/components/Routes/RoutesExpanded.tsx
@@ -22,6 +22,8 @@ import {
   CollapseContainer,
   Container,
   Header,
+  RouteTopLevelGrow,
+  RoutesExpandedCollapse,
   ScrollableContainer,
 } from './RoutesExpanded.style.js';
 
@@ -45,11 +47,16 @@ export const RoutesExpanded = () => {
   return (
     <CollapseContainer>
       <Collapse timeout={timeout} in={match} orientation="horizontal">
-        <Grow timeout={timeout} in={match} mountOnEnter unmountOnExit>
+        <RouteTopLevelGrow
+          timeout={timeout}
+          in={match}
+          mountOnEnter
+          unmountOnExit
+        >
           <div>
             <RoutesExpandedElement />
           </div>
-        </Grow>
+        </RouteTopLevelGrow>
       </Collapse>
     </CollapseContainer>
   );
@@ -112,14 +119,14 @@ export const RoutesExpandedElement = () => {
   }, [emitter, expanded]);
 
   return (
-    <Collapse
+    <RoutesExpandedCollapse
       timeout={timeout.enter}
       in={expanded}
       orientation="horizontal"
       onExited={onExit}
     >
       <Grow timeout={timeout.enter} in={expanded} mountOnEnter unmountOnExit>
-        <Container enableColorScheme>
+        <Container enableColorScheme minimumHeight={isLoading}>
           <ScrollableContainer>
             <Header>
               <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
@@ -163,6 +170,6 @@ export const RoutesExpandedElement = () => {
           </ScrollableContainer>
         </Container>
       </Grow>
-    </Collapse>
+    </RoutesExpandedCollapse>
   );
 };
diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx
index bf97e6f37..48074e128 100644
--- a/packages/widget/src/components/TokenList/TokenList.tsx
+++ b/packages/widget/src/components/TokenList/TokenList.tsx
@@ -1,6 +1,5 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
-import { useRef } from 'react';
 import { useAccount } from '../../hooks/useAccount.js';
 import { useChain } from '../../hooks/useChain.js';
 import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
@@ -17,10 +16,10 @@ import { filteredTokensComparator } from './utils.js';
 
 export const TokenList: FC<TokenListProps> = ({
   formType,
+  parentRef,
   height,
   onClick,
 }) => {
-  const parentRef = useRef<HTMLUListElement | null>(null);
   const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
   const [tokenSearchFilter]: string[] = useDebouncedWatch(
     320,
diff --git a/packages/widget/src/components/TokenList/types.ts b/packages/widget/src/components/TokenList/types.ts
index e7e3b1229..a18dbd557 100644
--- a/packages/widget/src/components/TokenList/types.ts
+++ b/packages/widget/src/components/TokenList/types.ts
@@ -5,6 +5,7 @@ import type { FormType } from '../../stores/form/types.js';
 import type { TokenAmount } from '../../types/token.js';
 
 export interface TokenListProps {
+  parentRef: MutableRefObject<HTMLElement | null>;
   formType: FormType;
   height: number;
   onClick?(): void;
diff --git a/packages/widget/src/config/constants.ts b/packages/widget/src/config/constants.ts
new file mode 100644
index 000000000..08bd898b8
--- /dev/null
+++ b/packages/widget/src/config/constants.ts
@@ -0,0 +1 @@
+export const defaultMaxHeight = 682;
diff --git a/packages/widget/src/hooks/useContentHeight.ts b/packages/widget/src/hooks/useContentHeight.ts
deleted file mode 100644
index 26560a9f6..000000000
--- a/packages/widget/src/hooks/useContentHeight.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { MutableRefObject } from 'react';
-import { useLayoutEffect, useState } from 'react';
-import { ElementId, createElementId } from '../utils/elements.js';
-import { useDefaultElementId } from './useDefaultElementId.js';
-import { getScrollableContainer } from './useScrollableContainer.js';
-
-const getContentHeight = (elementId: string) => {
-  const containerElement = document.getElementById(
-    createElementId(ElementId.ScrollableContainer, elementId),
-  );
-  const headerElement = document.getElementById(
-    createElementId(ElementId.Header, elementId),
-  );
-  if (!containerElement || !headerElement) {
-    console.warn(
-      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`,
-    );
-    return 0;
-  }
-  const { height: containerHeight } = containerElement.getBoundingClientRect();
-  const { height: headerHeight } = headerElement.getBoundingClientRect();
-  return containerHeight - headerHeight;
-};
-
-export const useContentHeight = () => {
-  const elementId = useDefaultElementId();
-  const [contentHeight, setContentHeight] = useState<number>(0);
-  useLayoutEffect(() => {
-    setContentHeight(getContentHeight(elementId));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return contentHeight;
-};
-
-export const useSetContentHeight = (
-  ref: MutableRefObject<HTMLElement | undefined>,
-) => {
-  const elementId = useDefaultElementId();
-  useLayoutEffect(() => {
-    const scrollableContainer = getScrollableContainer(elementId);
-    if (
-      !scrollableContainer ||
-      !ref.current ||
-      ref.current?.clientHeight <= scrollableContainer?.clientHeight
-    ) {
-      return;
-    }
-    scrollableContainer.style.height = `${ref.current.clientHeight}px`;
-    return () => {
-      scrollableContainer.style.removeProperty('height');
-    };
-  }, [elementId, ref]);
-};
diff --git a/packages/widget/src/hooks/useSetContentHeight.ts b/packages/widget/src/hooks/useSetContentHeight.ts
new file mode 100644
index 000000000..8cfd1db7c
--- /dev/null
+++ b/packages/widget/src/hooks/useSetContentHeight.ts
@@ -0,0 +1,24 @@
+import type { MutableRefObject } from 'react';
+import { useLayoutEffect } from 'react';
+import { useDefaultElementId } from './useDefaultElementId.js';
+import { getScrollableContainer } from './useScrollableContainer.js';
+
+export const useSetContentHeight = (
+  ref: MutableRefObject<HTMLElement | undefined>,
+) => {
+  const elementId = useDefaultElementId();
+  useLayoutEffect(() => {
+    const scrollableContainer = getScrollableContainer(elementId);
+    if (
+      !scrollableContainer ||
+      !ref.current ||
+      ref.current?.clientHeight <= scrollableContainer?.clientHeight
+    ) {
+      return;
+    }
+    scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+    return () => {
+      scrollableContainer.style.removeProperty('height');
+    };
+  }, [elementId, ref]);
+};
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index 490512ba4..325d12c19 100644
--- a/packages/widget/src/index.ts
+++ b/packages/widget/src/index.ts
@@ -6,6 +6,7 @@ export * from './components/ContractComponent/NFT/NFT.js';
 export * from './components/ContractComponent/NFT/NFTBase.js';
 export * from './components/ContractComponent/NFT/types.js';
 export * from './components/Skeleton/WidgetSkeleton.js';
+export { defaultMaxHeight } from './config/constants.js';
 export * from './config/version.js';
 export { useAccount } from './hooks/useAccount.js';
 export { useAvailableChains } from './hooks/useAvailableChains.js';
diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx
index 8736891b8..31411e1aa 100644
--- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx
+++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx
@@ -1,11 +1,10 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { TokenList } from '../../components/TokenList/TokenList.js';
-import { useContentHeight } from '../../hooks/useContentHeight.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js';
@@ -13,15 +12,18 @@ import { useSwapOnly } from '../../hooks/useSwapOnly.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import type { FormTypeProps } from '../../stores/form/types.js';
 import { SearchTokenInput } from './SearchTokenInput.js';
-
-const minTokenListHeight = 360;
+import { useTokenListHeight } from './useTokenListHeight.js';
 
 export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   useScrollableOverflowHidden();
   const { navigateBack } = useNavigateBack();
   const headerRef = useRef<HTMLElement>(null);
-  const contentHeight = useContentHeight();
-  const [tokenListHeight, setTokenListHeight] = useState(0);
+  const listParentRef = useRef<HTMLUListElement | null>(null);
+  const { tokenListHeight, minListHeight } = useTokenListHeight({
+    listParentRef,
+    headerRef,
+  });
+
   const swapOnly = useSwapOnly();
 
   const { subvariant } = useWidgetConfig();
@@ -35,15 +37,6 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
 
   useHeader(title);
 
-  useLayoutEffect(() => {
-    setTokenListHeight(
-      Math.max(
-        contentHeight - (headerRef.current?.offsetHeight ?? 0),
-        minTokenListHeight,
-      ),
-    );
-  }, [contentHeight]);
-
   const hideChainSelect = swapOnly && formType === 'to';
 
   return (
@@ -54,11 +47,14 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
           <SearchTokenInput />
         </Box>
       </Box>
-      <TokenList
-        height={tokenListHeight}
-        onClick={navigateBack}
-        formType={formType}
-      />
+      <Box height={minListHeight}>
+        <TokenList
+          parentRef={listParentRef}
+          height={tokenListHeight}
+          onClick={navigateBack}
+          formType={formType}
+        />
+      </Box>
     </PageContainer>
   );
 };
diff --git a/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts b/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts
new file mode 100644
index 000000000..ba34abf7a
--- /dev/null
+++ b/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts
@@ -0,0 +1,112 @@
+import { useTheme } from '@mui/material';
+import type { MutableRefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { ElementId, createElementId } from '../../utils/elements.js';
+
+const debounce = (func: Function, timeout = 300) => {
+  let timer: ReturnType<typeof setTimeout>;
+  return (...args: any[]) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, timeout);
+  };
+};
+
+const getContentHeight = (
+  elementId: string,
+  listParentRef: MutableRefObject<HTMLUListElement | null>,
+) => {
+  const containerElement = document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId),
+  );
+
+  const headerElement = document.getElementById(
+    createElementId(ElementId.Header, elementId),
+  );
+
+  const listParentElement = listParentRef?.current;
+
+  let oldHeight;
+
+  // This covers the case where in full height flex mode when the browser height is reduced
+  // - this allows the virtualised token list to be made smaller
+  if (listParentElement) {
+    oldHeight = listParentElement.style.height;
+    listParentElement.style.height = '0';
+  }
+
+  if (!containerElement || !headerElement) {
+    console.warn(
+      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`,
+    );
+    return 0;
+  }
+  const { height: containerHeight } = containerElement.getBoundingClientRect();
+  const { height: headerHeight } = headerElement.getBoundingClientRect();
+
+  // This covers the case where in full height flex mode when the browser height is reduced the
+  // - this allows the virtualised token list to be set to minimum size
+  if (listParentElement && oldHeight) {
+    listParentElement.style.height = oldHeight;
+  }
+
+  return containerHeight - headerHeight;
+};
+
+interface UseContentHeightProps {
+  listParentRef: MutableRefObject<HTMLUListElement | null>;
+  headerRef: MutableRefObject<HTMLElement | null>;
+}
+
+export const minTokenListHeight = 360;
+export const minMobileTokenListHeight = 160;
+
+export const useTokenListHeight = ({
+  listParentRef,
+  headerRef,
+}: UseContentHeightProps) => {
+  const elementId = useDefaultElementId();
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const theme = useTheme();
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      setContentHeight(getContentHeight(elementId, listParentRef));
+    };
+
+    const processResize = debounce(() => handleResize(), 40);
+
+    const appContainer = document.getElementById(
+      createElementId(ElementId.AppExpandedContainer, elementId),
+    );
+
+    let resizeObserver: ResizeObserver;
+    if (appContainer) {
+      resizeObserver = new ResizeObserver(processResize);
+      resizeObserver.observe(appContainer);
+    }
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [elementId, listParentRef]);
+
+  const minListHeight =
+    theme.container?.height === '100%'
+      ? minMobileTokenListHeight
+      : minTokenListHeight;
+
+  const tokenListHeight = Math.max(
+    contentHeight - (headerRef.current?.offsetHeight ?? 0),
+    minListHeight,
+  );
+
+  return {
+    minListHeight,
+    tokenListHeight,
+  };
+};
diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx
index 6cd675b76..ab1e7bc56 100644
--- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx
+++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx
@@ -9,6 +9,7 @@ import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
 import { useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { ListItemButton } from '../../components/ListItem//ListItemButton.js';
@@ -17,6 +18,7 @@ import { Menu } from '../../components/Menu.js';
 import { useChains } from '../../hooks/useChains.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import type { Bookmark } from '../../stores/bookmarks/types.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
@@ -28,9 +30,9 @@ import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { EmptyListIndicator } from './EmptyListIndicator.js';
 import {
   BookmarkButtonContainer,
-  ListContainer,
+  BookmarksListContainer,
+  FullHeightAdjustablePageContainer,
   OptionsMenuButton,
-  SendToWalletPageContainer,
 } from './SendToWalletPage.style.js';
 
 export const BookmarksPage = () => {
@@ -45,6 +47,7 @@ export const BookmarksPage = () => {
   const navigate = useNavigate();
   const { setFieldValue } = useFieldActions();
   const { setSendToWallet } = useSendToWalletActions();
+  const { variant } = useWidgetConfig();
 
   useHeader(t(`header.bookmarkedWallets`));
 
@@ -102,8 +105,11 @@ export const BookmarksPage = () => {
   };
 
   return (
-    <SendToWalletPageContainer disableGutters>
-      <ListContainer>
+    <FullHeightAdjustablePageContainer
+      disableGutters
+      enableFullHeight={variant !== 'drawer'}
+    >
+      <BookmarksListContainer>
         {bookmarks.map((bookmark) => (
           <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
             <ListItemButton
@@ -178,7 +184,7 @@ export const BookmarksPage = () => {
             {t('button.delete')}
           </MenuItem>
         </Menu>
-      </ListContainer>
+      </BookmarksListContainer>
       <BookmarkButtonContainer>
         <Button variant="contained" onClick={handleAddBookmark}>
           {t('sendToWallet.addBookmark')}
@@ -188,6 +194,6 @@ export const BookmarksPage = () => {
         ref={bookmarkAddressSheetRef}
         onAddBookmark={addBookmark}
       />
-    </SendToWalletPageContainer>
+    </FullHeightAdjustablePageContainer>
   );
 };
diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx
index 035103939..a59b10c82 100644
--- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx
+++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx
@@ -38,6 +38,22 @@ export const SendToWalletPageContainer = styled(
   gap: theme.spacing(1),
 }));
 
+interface FullHeightAdjustablePageContainerProps extends PageContainerProps {
+  enableFullHeight?: boolean;
+}
+
+export const FullHeightAdjustablePageContainer = styled(
+  SendToWalletPageContainer,
+)<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
+  justifyContent: 'space-between',
+  ...(enableFullHeight && theme.container?.height === '100%'
+    ? {
+        justifyContent: 'space-between',
+        height: '100%',
+      }
+    : {}),
+}));
+
 export const SendToWalletCard = styled(InputCard)({
   display: 'flex',
   flexDirection: 'column',
@@ -92,21 +108,25 @@ export const SheetAddressContainer = styled(Box)(() => ({
 export const ListContainer = styled(List)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
+  padding: 0,
   minHeight: 400,
-  paddingTop: 0,
-  paddingBottom: theme.spacing(1.5),
+}));
+
+export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
+  ...(theme.container?.height === '100%'
+    ? { minHeight: 360, height: 360, flexGrow: 1, overflow: 'auto' }
+    : { minHeight: 440 }),
 }));
 
 export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
   background: theme.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
-  flexGrow: 1,
-  position: 'sticky',
   bottom: 0,
   padding: theme.spacing(0, 3, 3),
-  marginBottom: theme.spacing(-5.25),
   zIndex: 2,
+  position: 'sticky',
+  width: '100%',
 }));
 
 export const EmptyContainer = styled(Box)(({ theme }) => ({
diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
index f00bf3b23..f06e0a24f 100644
--- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
+++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
@@ -1,5 +1,5 @@
 import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
-import { Tooltip, Typography } from '@mui/material';
+import { Box, Tooltip, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +15,7 @@ import {
 import { useChain } from '../../hooks/useChain.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import type { Bookmark } from '../../stores/bookmarks/types.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
@@ -25,10 +26,10 @@ import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
 import {
   AddressInput,
+  FullHeightAdjustablePageContainer,
   SendToWalletButtonRow,
   SendToWalletCard,
   SendToWalletIconButton,
-  SendToWalletPageContainer,
   ValidationAlert,
 } from './SendToWalletPage.style.js';
 
@@ -59,6 +60,7 @@ export const SendToWalletPage = () => {
   const { chain: toChain } = useChain(toChainId);
   const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false);
   const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false);
+  const { variant } = useWidgetConfig();
 
   useHeader(t(`header.sendToWallet`));
 
@@ -181,7 +183,10 @@ export const SendToWalletPage = () => {
   });
 
   return (
-    <SendToWalletPageContainer bottomGutters>
+    <FullHeightAdjustablePageContainer
+      bottomGutters
+      enableFullHeight={variant !== 'drawer'}
+    >
       <SendToWalletCard
         type={errorMessage ? 'error' : 'default'}
         sx={{
@@ -238,35 +243,39 @@ export const SendToWalletPage = () => {
           onAddBookmark={handleAddBookmark}
         />
       </SendToWalletCard>
-      <CardButton
-        title={t('header.recentWallets')}
-        icon={<History />}
-        onClick={handleRecentWalletsClick}
-      >
-        {!!recentWallets.length && (
-          <Typography color="text.secondary">{recentWallets.length}</Typography>
-        )}
-      </CardButton>
-      <CardButton
-        title={t('sendToWallet.connectedWallets')}
-        icon={<Wallet />}
-        onClick={handleConnectedWalletsClick}
-      >
-        {!!connectedWallets.length && (
-          <Typography color="text.secondary">
-            {connectedWallets.length}
-          </Typography>
-        )}
-      </CardButton>
-      <CardButton
-        title={t('header.bookmarkedWallets')}
-        icon={<TurnedIn />}
-        onClick={handleBookmarkedWalletsClick}
-      >
-        {!!bookmarks.length && (
-          <Typography color="text.secondary">{bookmarks.length}</Typography>
-        )}
-      </CardButton>
-    </SendToWalletPageContainer>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+        <CardButton
+          title={t('header.recentWallets')}
+          icon={<History />}
+          onClick={handleRecentWalletsClick}
+        >
+          {!!recentWallets.length && (
+            <Typography color="text.secondary">
+              {recentWallets.length}
+            </Typography>
+          )}
+        </CardButton>
+        <CardButton
+          title={t('sendToWallet.connectedWallets')}
+          icon={<Wallet />}
+          onClick={handleConnectedWalletsClick}
+        >
+          {!!connectedWallets.length && (
+            <Typography color="text.secondary">
+              {connectedWallets.length}
+            </Typography>
+          )}
+        </CardButton>
+        <CardButton
+          title={t('header.bookmarkedWallets')}
+          icon={<TurnedIn />}
+          onClick={handleBookmarkedWalletsClick}
+        >
+          {!!bookmarks.length && (
+            <Typography color="text.secondary">{bookmarks.length}</Typography>
+          )}
+        </CardButton>
+      </Box>
+    </FullHeightAdjustablePageContainer>
   );
 };
diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx
index 798ed233a..a4e2840fd 100644
--- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx
+++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx
@@ -89,7 +89,6 @@ export const TransactionDetailsPage: React.FC = () => {
       <Box
         sx={{
           display: 'flex',
-          flex: 1,
           justifyContent: 'space-between',
         }}
         pb={1}
diff --git a/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx
index c6490af42..407ad8dc4 100644
--- a/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx
+++ b/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx
@@ -12,7 +12,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
 import { formatTokenAmount } from '../../utils/format.js';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
 
diff --git a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx
index f3d30303d..56c7f4f6f 100644
--- a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx
+++ b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx
@@ -12,9 +12,9 @@ import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { Token } from '../../components/Token/Token.js';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { useSetContentHeight } from '../../hooks/useContentHeight.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { getProcessMessage } from '../../hooks/useProcessMessage.js';
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
 import { useTokenBalance } from '../../hooks/useTokenBalance.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
diff --git a/packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx
index 22ce0142b..2916412aa 100644
--- a/packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx
+++ b/packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js';
-import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
 import { calculateValueLossPercentage } from './utils.js';
diff --git a/packages/widget/src/themes/createTheme.ts b/packages/widget/src/themes/createTheme.ts
index 8a166026b..f26588973 100644
--- a/packages/widget/src/themes/createTheme.ts
+++ b/packages/widget/src/themes/createTheme.ts
@@ -65,6 +65,7 @@ export const createTheme = (
 
   return createMuiTheme({
     container: widgetTheme.container,
+    header: widgetTheme.header,
     navigation: {
       edge: true,
       ...widgetTheme.navigation,
diff --git a/packages/widget/src/themes/types.ts b/packages/widget/src/themes/types.ts
index e7fef87fd..dd06bd27f 100644
--- a/packages/widget/src/themes/types.ts
+++ b/packages/widget/src/themes/types.ts
@@ -26,11 +26,13 @@ declare module '@mui/material/styles' {
   interface Theme {
     shape: Shape;
     container: CSSProperties;
+    header: CSSProperties;
     navigation: NavigationProps;
   }
   interface ThemeOptions {
     shape?: Partial<Shape>;
     container?: CSSProperties;
+    header?: CSSProperties;
     navigation?: NavigationProps;
   }
   interface ComponentNameToClassKey {
diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts
index c838da701..1701ad1a4 100644
--- a/packages/widget/src/types/widget.ts
+++ b/packages/widget/src/types/widget.ts
@@ -54,6 +54,7 @@ export type WidgetThemeComponents = Pick<
   | 'MuiInputCard'
   | 'MuiTabs'
 >;
+
 export type WidgetTheme = {
   palette?: Pick<
     PaletteOptions,
@@ -63,6 +64,7 @@ export type WidgetTheme = {
   typography?: TypographyOptions;
   components?: WidgetThemeComponents;
   container?: CSSProperties;
+  header?: CSSProperties;
   playground?: CSSProperties;
   navigation?: NavigationProps;
 };