diff --git a/CHANGELOG.md b/CHANGELOG.md
index 105071165..06e6e2364 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Not released
 
+- AppBar: Add support for custom branding [#792](https://github.com/CartoDB/carto-react/pull/792)
+
 ## 2.2
 
 ### 2.2.13 (2023-10-16)
diff --git a/packages/react-ui/src/components/organisms/AppBar/AppBar.d.ts b/packages/react-ui/src/components/organisms/AppBar/AppBar.d.ts
index fac6ebd29..072a2ac1c 100644
--- a/packages/react-ui/src/components/organisms/AppBar/AppBar.d.ts
+++ b/packages/react-ui/src/components/organisms/AppBar/AppBar.d.ts
@@ -9,6 +9,8 @@ export type AppBarTypeMap<D extends React.ElementType<any> = 'header'> = MuiAppB
     secondaryText?: React.ReactNode;
     onClickMenu?: (event: React.MouseEvent) => void;
     showBurgerMenu?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
   },
   D
 >;
diff --git a/packages/react-ui/src/components/organisms/AppBar/AppBar.js b/packages/react-ui/src/components/organisms/AppBar/AppBar.js
index 591f99a9a..e4dde2bed 100644
--- a/packages/react-ui/src/components/organisms/AppBar/AppBar.js
+++ b/packages/react-ui/src/components/organisms/AppBar/AppBar.js
@@ -3,11 +3,24 @@ import PropTypes from 'prop-types';
 import { AppBar as MuiAppBar, Toolbar } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-import BurguerMenu from './BurguerMenu';
+import BurgerMenu from './BurgerMenu';
 import BrandLogo from './BrandLogo';
 import BrandText from './BrandText';
 import SecondaryText from './SecondaryText';
 
+const Root = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => !['backgroundColor', 'textColor'].includes(prop)
+})(({ backgroundColor, textColor, theme }) => ({
+  backgroundColor: backgroundColor || theme.palette.brand.navyBlue,
+
+  '& .MuiTypography-root': {
+    color: textColor || theme.palette.common.white
+  },
+  '& .MuiIconButton-root path': {
+    fill: textColor || theme.palette.common.white
+  }
+}));
+
 const BrandElements = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
@@ -34,21 +47,25 @@ const AppBar = ({
   secondaryText,
   showBurgerMenu,
   onClickMenu,
+  backgroundColor,
+  textColor,
   ...otherProps
 }) => {
   return (
-    <MuiAppBar {...otherProps}>
+    <Root backgroundColor={backgroundColor} textColor={textColor} {...otherProps}>
       <Toolbar>
         <BrandElements>
-          {showBurgerMenu && <BurguerMenu onClickMenu={onClickMenu} />}
+          {showBurgerMenu && (
+            <BurgerMenu onClickMenu={onClickMenu} iconColor={textColor} />
+          )}
           {brandLogo && <BrandLogo logo={brandLogo} />}
-          {brandText && <BrandText text={brandText} />}
-          {secondaryText && <SecondaryText text={secondaryText} />}
+          {brandText && <BrandText text={brandText} textColor={textColor} />}
+          {secondaryText && <SecondaryText text={secondaryText} textColor={textColor} />}
         </BrandElements>
 
         <Content>{children}</Content>
       </Toolbar>
-    </MuiAppBar>
+    </Root>
   );
 };
 
@@ -61,7 +78,9 @@ AppBar.propTypes = {
   brandText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   secondaryText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   onClickMenu: PropTypes.func,
-  showBurgerMenu: PropTypes.bool
+  showBurgerMenu: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  textColor: PropTypes.string
 };
 
 export default AppBar;
diff --git a/packages/react-ui/src/components/organisms/AppBar/BrandText.js b/packages/react-ui/src/components/organisms/AppBar/BrandText.js
index e337174cf..374adf4ae 100644
--- a/packages/react-ui/src/components/organisms/AppBar/BrandText.js
+++ b/packages/react-ui/src/components/organisms/AppBar/BrandText.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 
 import Typography from '../../atoms/Typography';
 
@@ -9,9 +9,15 @@ const Text = styled(Typography)({
   whiteSpace: 'nowrap'
 });
 
-export default function BrandText({ text }) {
+export default function BrandText({ text, textColor }) {
+  const theme = useTheme();
+
   return (
-    <Text component='span' variant='subtitle1'>
+    <Text
+      component='span'
+      variant='subtitle1'
+      textColor={textColor || theme.palette.common.white}
+    >
       {text}
     </Text>
   );
diff --git a/packages/react-ui/src/components/organisms/AppBar/BurgerMenu.js b/packages/react-ui/src/components/organisms/AppBar/BurgerMenu.js
new file mode 100644
index 000000000..a6750a268
--- /dev/null
+++ b/packages/react-ui/src/components/organisms/AppBar/BurgerMenu.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Divider, Hidden, IconButton } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+import { MenuOutlined } from '@mui/icons-material';
+
+import { APPBAR_SIZE } from '../../../theme/themeConstants';
+
+const Menu = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  height: APPBAR_SIZE,
+  marginRight: theme.spacing(1.5)
+}));
+
+const MenuButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== 'iconColor'
+})(({ iconColor, theme }) => ({
+  marginRight: theme.spacing(1),
+
+  '&.MuiButtonBase-root svg path': {
+    fill: iconColor || theme.palette.background.paper
+  }
+}));
+
+const MenuDivider = styled(Divider, {
+  shouldForwardProp: (prop) => prop !== 'color'
+})(({ color, theme }) => ({
+  ...(color && {
+    borderColor: alpha(color, 0.12)
+  })
+}));
+
+export default function BurgerMenu({ onClickMenu, iconColor }) {
+  return (
+    <Hidden mdUp>
+      <Menu>
+        <MenuButton onClick={onClickMenu} iconColor={iconColor}>
+          <MenuOutlined />
+        </MenuButton>
+        <MenuDivider orientation='vertical' flexItem light color={iconColor} />
+      </Menu>
+    </Hidden>
+  );
+}
diff --git a/packages/react-ui/src/components/organisms/AppBar/BurguerMenu.js b/packages/react-ui/src/components/organisms/AppBar/BurguerMenu.js
deleted file mode 100644
index 110cd971a..000000000
--- a/packages/react-ui/src/components/organisms/AppBar/BurguerMenu.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { Divider, Hidden, IconButton } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { MenuOutlined } from '@mui/icons-material';
-
-import { APPBAR_SIZE } from '../../../theme/themeConstants';
-
-const Menu = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  height: APPBAR_SIZE,
-  marginRight: theme.spacing(1.5)
-}));
-
-const MenuButton = styled(IconButton)(({ theme }) => ({
-  marginRight: theme.spacing(1),
-
-  '&.MuiButtonBase-root svg path': {
-    fill: theme.palette.background.paper
-  }
-}));
-
-export default function BurguerMenu({ onClickMenu }) {
-  return (
-    <Hidden mdUp>
-      <Menu>
-        <MenuButton onClick={onClickMenu}>
-          <MenuOutlined />
-        </MenuButton>
-        <Divider orientation='vertical' flexItem light />
-      </Menu>
-    </Hidden>
-  );
-}
diff --git a/packages/react-ui/src/components/organisms/AppBar/SecondaryText.js b/packages/react-ui/src/components/organisms/AppBar/SecondaryText.js
index fe3e5c91a..de224eb07 100644
--- a/packages/react-ui/src/components/organisms/AppBar/SecondaryText.js
+++ b/packages/react-ui/src/components/organisms/AppBar/SecondaryText.js
@@ -1,21 +1,32 @@
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 
 import Typography from '../../atoms/Typography';
 
-const Text = styled(Typography)(({ theme }) => ({
+const Text = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'textColor'
+})(({ textColor, theme }) => ({
   display: 'flex',
   alignItems: 'center',
+
   '&::before': {
     content: '"/"',
     margin: theme.spacing(0, 1),
-    color: theme.palette.white[60]
+    opacity: 0.6,
+    color: textColor || theme.palette.common.white
   }
 }));
 
-export default function SecondaryText({ text }) {
+export default function SecondaryText({ text, textColor }) {
+  const theme = useTheme();
+
   return (
-    <Text component='span' variant='body2' weight='strong'>
+    <Text
+      component='span'
+      variant='body2'
+      weight='strong'
+      textColor={textColor || theme.palette.common.white}
+    >
       {text}
     </Text>
   );
diff --git a/packages/react-ui/src/theme/sections/components/surfaces.js b/packages/react-ui/src/theme/sections/components/surfaces.js
index b134c1c37..1d94adb19 100644
--- a/packages/react-ui/src/theme/sections/components/surfaces.js
+++ b/packages/react-ui/src/theme/sections/components/surfaces.js
@@ -21,12 +21,6 @@ export const surfacesOverrides = {
           padding: theme.spacing(0, 1),
           minHeight: APPBAR_SIZE
         },
-        '& .MuiTypography-root': {
-          color: theme.palette.common.white
-        },
-        '& .MuiIconButton-root path': {
-          fill: theme.palette.common.white
-        },
         '& .MuiAvatar-root': {
           width: theme.spacing(4),
           height: theme.spacing(4)
diff --git a/packages/react-ui/storybook/assets/carto-logo-dark.svg b/packages/react-ui/storybook/assets/carto-logo-dark.svg
new file mode 100644
index 000000000..66e7d0654
--- /dev/null
+++ b/packages/react-ui/storybook/assets/carto-logo-dark.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#2C3032">
+            <g transform="translate(-61 -10) translate(61 10)">
+                <path d="M14.03 28C21.746 28 28 21.732 28 14S21.746 0 14.03 0C6.315 0 .06 6.268.06 14s6.255 14 13.97 14z" opacity=".2"/>
+                <ellipse cx="14.03" cy="14" rx="4.657" ry="4.667"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/react-ui/storybook/stories/molecules/Table.stories.js b/packages/react-ui/storybook/stories/molecules/Table.stories.js
index 7523be687..842fd841c 100644
--- a/packages/react-ui/storybook/stories/molecules/Table.stories.js
+++ b/packages/react-ui/storybook/stories/molecules/Table.stories.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   Chip,
@@ -11,7 +11,9 @@ import {
   TableBody,
   Table,
   IconButton,
-  MenuItem
+  MenuItem,
+  TableFooter,
+  TablePagination
 } from '@mui/material';
 import SelectField from '../../../src/components/atoms/SelectField';
 import { MoreVertOutlined } from '@mui/icons-material';
@@ -52,7 +54,15 @@ const rows = [
 const options = {
   title: 'Molecules/Table',
   component: Table,
-  argTypes: {},
+  argTypes: {
+    size: {
+      defaultValue: 'medium',
+      control: {
+        type: 'select',
+        options: ['medium', 'small']
+      }
+    }
+  },
   parameters: {
     design: {
       type: 'figma',
@@ -69,7 +79,7 @@ export default options;
 const PlaygroundTemplate = (args) => {
   return (
     <TableContainer>
-      <Table aria-label='simple table'>
+      <Table {...args} aria-label='simple table'>
         <TableHead>
           <TableRow>
             <TableCell>#</TableCell>
@@ -145,7 +155,7 @@ const PlaygroundTemplate = (args) => {
 const ScrollTemplate = (args) => (
   <Box sx={{ width: '100%', overflow: 'hidden' }}>
     <TableContainer sx={{ maxWidth: 440, maxHeight: 300 }}>
-      <Table aria-label='simple table'>
+      <Table {...args} aria-label='simple table'>
         <TableHead>
           <TableRow>
             <TableCell>#</TableCell>
@@ -218,8 +228,110 @@ const ScrollTemplate = (args) => (
   </Box>
 );
 
+const PaginationTemplate = (args) => {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  return (
+    <TableContainer>
+      <Table {...args} aria-label='simple table'>
+        <TableHead>
+          <TableRow>
+            <TableCell>#</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Type</TableCell>
+            <TableCell>Mode</TableCell>
+            <TableCell>Description</TableCell>
+            <TableCell>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow hover key={index}>
+              <TableCell component='th' scope='row'>
+                {index + 1}
+              </TableCell>
+              <TableCell sx={{ maxWidth: 160 }}>
+                {index === 1 ? (
+                  <Tooltip title={row.name}>
+                    <Typography variant='inherit' noWrap>
+                      {row.name}
+                    </Typography>
+                  </Tooltip>
+                ) : (
+                  row.name
+                )}
+              </TableCell>
+              <TableCell>
+                <Chip size='small' color='default' label={row.type} />
+              </TableCell>
+              <TableCell>
+                <SelectField
+                  size='small'
+                  placeholder='Placeholder'
+                  onChange={() => void 0}
+                  value={[]}
+                >
+                  {[...Array(3)].map((item, index) => {
+                    const itemText = `${index + 1}`;
+
+                    return (
+                      <MenuItem key={index} value={itemText}>
+                        {itemText}
+                      </MenuItem>
+                    );
+                  })}
+                </SelectField>
+              </TableCell>
+              <TableCell sx={{ maxWidth: 160 }}>
+                {index === 3 ? (
+                  <Tooltip title={row.description}>
+                    <Typography variant='inherit' noWrap>
+                      {row.description}
+                    </Typography>
+                  </Tooltip>
+                ) : (
+                  row.description
+                )}
+              </TableCell>
+              <TableCell padding='checkbox'>
+                <IconButton size='small'>
+                  <MoreVertOutlined />
+                </IconButton>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              count={100}
+              page={page}
+              onPageChange={handleChangePage}
+              rowsPerPage={rowsPerPage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+  );
+};
+
 export const Playground = PlaygroundTemplate.bind({});
 Playground.args = {};
 
 export const Scroll = ScrollTemplate.bind({});
 ScrollTemplate.args = {};
+
+export const WithPagination = PaginationTemplate.bind({});
+PaginationTemplate.args = {};
diff --git a/packages/react-ui/storybook/stories/organisms/AppBar.stories.js b/packages/react-ui/storybook/stories/organisms/AppBar.stories.js
index 96ffff376..177e73abf 100644
--- a/packages/react-ui/storybook/stories/organisms/AppBar.stories.js
+++ b/packages/react-ui/storybook/stories/organisms/AppBar.stories.js
@@ -73,7 +73,7 @@ const CustomTemplate = (args) => {
         <Grid container justifyContent='flex-end' spacing={2}>
           <Grid item>
             <IconButton onClick={handleClick}>
-              <CheckCircleOutline />
+              <CheckCircleOutline className='doNotFillIcon' />
             </IconButton>
             <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
               <MenuItem onClick={handleClose}>Profile</MenuItem>
@@ -129,4 +129,12 @@ Basic.args = { ...commonArgs };
 export const Composition = CustomTemplate.bind({});
 Composition.args = { ...commonArgs };
 
+export const CustomBranding = Template.bind({});
+CustomBranding.args = {
+  ...commonArgs,
+  brandLogo: <img src='/carto-logo-dark.svg' alt='' />,
+  backgroundColor: '#e1e3e4',
+  textColor: '#024D9E'
+};
+
 export const Guide = DocTemplate.bind({});