diff --git a/src/containers/Preferences/Warehouses/Warehouses.js b/src/containers/Preferences/Warehouses/Warehouses.js
new file mode 100644
index 000000000..18e8a1f36
--- /dev/null
+++ b/src/containers/Preferences/Warehouses/Warehouses.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ContextMenu2 } from '@blueprintjs/popover2';
+
+import WarehousesGridItems from './WarehousesGridItems';
+import { WarehouseContextMenu } from './components';
+import withAlertsActions from '../../Alert/withAlertActions';
+import withDialogActions from '../../Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const WAREHOUSE = [
+  {
+    title: 'Warehouse #1',
+    code: '1001',
+    city: 'City',
+    email: 'email@emial.com',
+    phone: '09xxxxxxxx',
+  },
+  {
+    title: 'Warehouse #2',
+    code: '100',
+    city: 'City',
+    email: 'email@emial.com',
+    phone: '09xxxxxxxx',
+  },
+  {
+    title: 'Warehouse #2',
+    code: '100',
+    city: 'City',
+    email: 'email@emial.com',
+    phone: '09xxxxxxxx',
+  },
+];
+
+/**
+ * Warehouses.
+ * @returns
+ */
+function Warehouses({
+  // #withAlertsActions
+  openAlert,
+  // #withDialogActions
+  openDialog,
+}) {
+  return (
+    <ContextMenu2 content={<WarehouseContextMenu />}>
+      <WarehouseGridWrap>
+        <WarehousesGridItems warehouses={WAREHOUSE} />
+      </WarehouseGridWrap>
+    </ContextMenu2>
+  );
+}
+
+export default compose(withAlertsActions, withDialogActions)(Warehouses);
+
+const WarehouseGridWrap = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px;
+`;
diff --git a/src/containers/Preferences/Warehouses/WarehousesGridItems.js b/src/containers/Preferences/Warehouses/WarehousesGridItems.js
new file mode 100644
index 000000000..74e7bd85a
--- /dev/null
+++ b/src/containers/Preferences/Warehouses/WarehousesGridItems.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+
+function WarehousesGrid({ warehouse }) {
+  return (
+    <WarehouseGrid>
+      <WarehouseTitle>{warehouse.title}</WarehouseTitle>
+      <WarehouseCode>{warehouse.code}</WarehouseCode>
+      <WarehouseInfoItem>{warehouse.city}</WarehouseInfoItem>
+      <WarehouseInfoItem>{warehouse.country}</WarehouseInfoItem>
+      <WarehouseInfoItem>{warehouse.email}</WarehouseInfoItem>
+      <WarehouseInfoItem>{warehouse.phone}</WarehouseInfoItem>
+    </WarehouseGrid>
+  );
+}
+
+/**
+ * Warehouse Grid.
+ * @returns
+ */
+function WarehousesGridItems({ warehouses }) {
+  return warehouses.map((warehouse) => (
+    <WarehousesGrid warehouse={warehouse} />
+  ));
+}
+export default WarehousesGridItems;
+
+const WarehouseGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 3px;
+  width: 300px; // 453px
+  height: 160px; //225px
+  background: #fff;
+  margin: 5px;
+  padding: 10px 12px;
+  border: 1px solid #c8cad0; //#CFD1D6
+  transition: all 0.1s ease-in-out;
+
+  &:hover {
+    border-color: #0153cc;
+  }
+`;
+
+const WarehouseTitle = styled.div`
+  font-size: 14px; //22px
+  font-style: inherit;
+  color: #000;
+  white-space: nowrap;
+  font-weight: 500;
+  line-height: 1;
+`;
+
+const WarehouseCode = styled.div`
+  display: inline-block;
+  font-size: 11px;
+  color: #6b7176;
+  margin: 4px 0px 15px;
+`;
+
+const WarehouseInfoItem = styled.div`
+  display: inline-block;
+  font-size: 12px;
+  color: #000;
+  line-height: 1.3rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+`;
diff --git a/src/containers/Preferences/Warehouses/WarehousesList.js b/src/containers/Preferences/Warehouses/WarehousesList.js
new file mode 100644
index 000000000..094e0d5d4
--- /dev/null
+++ b/src/containers/Preferences/Warehouses/WarehousesList.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import Warehouses from './Warehouses';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose } from 'utils';
+
+/**
+ * Warehouses List.
+ * @returns
+ */
+function WarehousesList({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('warehouses.label'));
+  }, [changePreferencesPageTitle]);
+
+  return <Warehouses />;
+}
+
+export default compose(withDashboardActions)(WarehousesList);
diff --git a/src/containers/Preferences/Warehouses/WarehousesProvider.js b/src/containers/Preferences/Warehouses/WarehousesProvider.js
new file mode 100644
index 000000000..c42465b91
--- /dev/null
+++ b/src/containers/Preferences/Warehouses/WarehousesProvider.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import styled from 'styled-components';
+
+const WarehousesContext = React.createContext();
+
+/**
+ * Warehouses data provider.
+ */
+function WarehousesProvider({ ...props }) {
+  // Provider state.
+  const provider = {};
+
+  return (
+    <div className={classNames(CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT)}>
+      <WarehousesContext.Provider value={provider} {...props} />
+    </div>
+  );
+}
+
+const useWarehousesContext = () => React.useContext(WarehousesContext);
+
+export { WarehousesProvider, useWarehousesContext };
diff --git a/src/containers/Preferences/Warehouses/components.js b/src/containers/Preferences/Warehouses/components.js
new file mode 100644
index 000000000..1ab35654b
--- /dev/null
+++ b/src/containers/Preferences/Warehouses/components.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
+import { If, Icon, Can } from '../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Warehouse context menu.
+ */
+export function WarehouseContextMenu({
+  onEditClick,
+  onDeleteClick,
+  onPrimary,
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('warehouses.action.edit_warehouse')}
+        onClick={safeCallback(onEditClick)}
+      />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('warehouses.action.make_as_parimary')}
+        onClick={safeCallback(onPrimary)}
+      />
+      <MenuDivider />
+      <MenuItem
+        text={intl.get('warehouses.action.delete_warehouse')}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDeleteClick)}
+      />
+    </Menu>
+  );
+}
diff --git a/src/containers/Preferences/Warehouses/index.js b/src/containers/Preferences/Warehouses/index.js
new file mode 100644
index 000000000..65ec45d5a
--- /dev/null
+++ b/src/containers/Preferences/Warehouses/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { WarehousesProvider } from './WarehousesProvider';
+import Warehouses from './WarehousesList';
+
+/**
+ * Warehouses Preferences.
+ * @returns
+ */
+export default function WarehousesPerences() {
+  return (
+    <WarehousesProvider>
+      <Warehouses />
+    </WarehousesProvider>
+  );
+}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 1746c370f..a78695c85 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1786,5 +1786,8 @@
   "warehouse_locations.label":"Warehouses Locations",
   "warehouse_locations.column.warehouse_name":"Warehouse name",
   "warehouse_locations.column.quantity":"Quantity",
-  "warehouse_locations.column.available_for_sale":"Available for sale"
+  "warehouse_locations.column.available_for_sale":"Available for sale",
+  "warehouses.action.edit_warehouse":"Edit Warehouse",
+  "warehouses.action.delete_warehouse":"Delete Warehouse",
+  "warehouses.action.make_as_parimary":"Mark as Primary"
 }
\ No newline at end of file
diff --git a/src/routes/preferences.js b/src/routes/preferences.js
index 9fc454ddd..b4200758e 100644
--- a/src/routes/preferences.js
+++ b/src/routes/preferences.js
@@ -7,6 +7,7 @@ import Currencies from 'containers/Preferences/Currencies/Currencies';
 import Item from 'containers/Preferences/Item';
 import SMSIntegration from '../containers/Preferences/SMSIntegration';
 import DefaultRoute from '../containers/Preferences/DefaultRoute';
+import Warehouses from '../containers/Preferences/Warehouses';
 
 const BASE_URL = '/preferences';
 
@@ -36,6 +37,11 @@ export default [
     component: Currencies,
     exact: true,
   },
+  {
+    path: `${BASE_URL}/warehouses`,
+    component: Warehouses,
+    exact: true,
+  },
   {
     path: `${BASE_URL}/accountant`,
     component: Accountant,