diff --git a/src/common/classes.js b/src/common/classes.js
index c00f489f3..0672377fb 100644
--- a/src/common/classes.js
+++ b/src/common/classes.js
@@ -72,6 +72,7 @@ const CLASSES = {
   PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION: 'preferences-page__inside-content--sms-integration',
   PREFERENCES_PAGE_INSIDE_CONTENT_ROLES_FORM: 'preferences-page__inside-content--roles-form',
   PREFERENCES_PAGE_INSIDE_CONTENT_BRANCHES: 'preferences-page__inside-content--branches',
+  PREFERENCES_PAGE_INSIDE_CONTENT_WAREHOUSES: 'preferences-page__inside-content--warehouses',
 
   FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',
 
diff --git a/src/containers/Preferences/Branches/Branches.js b/src/containers/Preferences/Branches/Branches.js
index af93b014c..e7b434354 100644
--- a/src/containers/Preferences/Branches/Branches.js
+++ b/src/containers/Preferences/Branches/Branches.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
 
 import BranchesDataTable from './BranchesDataTable';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
diff --git a/src/containers/Preferences/Branches/BranchesDataTable.js b/src/containers/Preferences/Branches/BranchesDataTable.js
index abdab2a13..1a47a03d8 100644
--- a/src/containers/Preferences/Branches/BranchesDataTable.js
+++ b/src/containers/Preferences/Branches/BranchesDataTable.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { DataTable } from 'components';
+import 'style/pages/Preferences/branchesList.scss';
+
+import { DataTable, Card } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import BranchesEmptyStatus from './BranchesEmptyStatus';
 import { useBranchesTableColumns, ActionsMenu } from './components';
@@ -43,23 +45,27 @@ function BranchesDataTable({
   }
 
   return (
-    <BranchesTable
-      columns={columns}
-      data={branches}
-      loading={isBranchesLoading}
-      headerLoading={isBranchesLoading}
-      progressBarLoading={isBranchesFetching}
-      TableLoadingRenderer={TableSkeletonRows}
-      noInitialFetch={true}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onEdit: handleEditBranch,
-        onDelete: handleDeleteBranch,
-      }}
-    />
+    <BranchesTableCard>
+      <DataTable
+        columns={columns}
+        data={branches}
+        loading={isBranchesLoading}
+        headerLoading={isBranchesLoading}
+        progressBarLoading={isBranchesFetching}
+        TableLoadingRenderer={TableSkeletonRows}
+        noInitialFetch={true}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onEdit: handleEditBranch,
+          onDelete: handleDeleteBranch,
+        }}
+      />
+    </BranchesTableCard>
   );
 }
 
 export default compose(withDialogActions, withAlertActions)(BranchesDataTable);
 
-const BranchesTable = styled(DataTable)``;
+const BranchesTableCard = styled(Card)`
+  padding: 0;
+`;
diff --git a/src/containers/Preferences/Branches/BranchesProvider.js b/src/containers/Preferences/Branches/BranchesProvider.js
index eb6f47f3a..da17ca418 100644
--- a/src/containers/Preferences/Branches/BranchesProvider.js
+++ b/src/containers/Preferences/Branches/BranchesProvider.js
@@ -1,8 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { Card } from 'components';
 import { useBranches } from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
@@ -33,16 +31,10 @@ function BranchesProvider({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_BRANCHES,
       )}
     >
-      <BrachesPreferencesCard>
-        <BranchesContext.Provider value={provider} {...props} />
-      </BrachesPreferencesCard>
+      <BranchesContext.Provider value={provider} {...props} />
     </div>
   );
 }
 
 const useBranchesContext = () => React.useContext(BranchesContext);
 export { BranchesProvider, useBranchesContext };
-
-const BrachesPreferencesCard = styled(Card)`
-  padding: 0;
-`;
diff --git a/src/containers/Preferences/Warehouses/WarehousesList.js b/src/containers/Preferences/Warehouses/WarehousesList.js
index fc6051b3a..d23f20632 100644
--- a/src/containers/Preferences/Warehouses/WarehousesList.js
+++ b/src/containers/Preferences/Warehouses/WarehousesList.js
@@ -1,5 +1,8 @@
 import React from 'react';
+import styled from 'styled-components';
 import intl from 'react-intl-universal';
+
+import '../../../style/pages/Preferences/warehousesList.scss';
 import Warehouses from './Warehouses';
 import WarehousesEmptyStatus from './WarehousesEmptyStatus';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -18,7 +21,17 @@ function WarehousesList({
   //   return <WarehousesEmptyStatus />;
   // }
 
-  return <Warehouses />;
+  return (
+    <WarehousesListRoot>
+      <Warehouses />
+    </WarehousesListRoot>
+  );
 }
 
 export default compose(withDashboardActions)(WarehousesList);
+
+const WarehousesListRoot = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px;
+`;
diff --git a/src/containers/Preferences/Warehouses/WarehousesProvider.js b/src/containers/Preferences/Warehouses/WarehousesProvider.js
index 3b2320431..bbcfdcf38 100644
--- a/src/containers/Preferences/Warehouses/WarehousesProvider.js
+++ b/src/containers/Preferences/Warehouses/WarehousesProvider.js
@@ -21,14 +21,19 @@ function WarehousesProvider({ ...props }) {
   };
 
   return (
-    <div className={classNames(CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT)}>
-      <WarehousePreference>
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_WAREHOUSES,
+      )}
+    >
+      <React.Fragment>
         {isWarehouesLoading ? (
           <PreferencesPageLoader />
         ) : (
           <WarehousesContext.Provider value={provider} {...props} />
         )}
-      </WarehousePreference>
+      </React.Fragment>
     </div>
   );
 }
@@ -37,8 +42,4 @@ const useWarehousesContext = () => React.useContext(WarehousesContext);
 
 export { WarehousesProvider, useWarehousesContext };
 
-const WarehousePreference = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 15px;
-`;
+const WarehousePreference = styled.div``;
diff --git a/src/style/pages/Preferences/branchesList.scss b/src/style/pages/Preferences/branchesList.scss
new file mode 100644
index 000000000..ffdfaa9a0
--- /dev/null
+++ b/src/style/pages/Preferences/branchesList.scss
@@ -0,0 +1,6 @@
+// Branches List.
+// ---------------------------------
+.preferences-page__inside-content--branches {
+  height: 100%;
+
+}
diff --git a/src/style/pages/Preferences/warehousesList.scss b/src/style/pages/Preferences/warehousesList.scss
new file mode 100644
index 000000000..f80a690a1
--- /dev/null
+++ b/src/style/pages/Preferences/warehousesList.scss
@@ -0,0 +1,5 @@
+// warehouses List.
+// ---------------------------------
+.preferences-page__inside-content--warehouses {
+  height: 100%;
+}