diff --git a/assets/src/api.ts b/assets/src/api.ts
index 2cf87a67c..76afbc18d 100644
--- a/assets/src/api.ts
+++ b/assets/src/api.ts
@@ -175,6 +175,24 @@ export const fetchCustomer = async (id: string, token = getAccessToken()) => {
     .then((res) => res.body.data);
 };
 
+export const updateCustomer = async (
+  id : string,
+  updates: any,
+  token = getAccessToken()
+) => {
+  if (!token) {
+    throw new Error('Invalid token!');
+  }
+
+  return request
+    .put(`/api/customers/${id}`)
+    .set('Authorization', token)
+    .send({
+      customer: updates,
+    })
+    .then((res) => res.body.data);
+};
+
 export const createNewConversation = async (
   accountId: string,
   customerId: string
diff --git a/assets/src/components/customers/CustomerDetailsModal.tsx b/assets/src/components/customers/CustomerDetailsModal.tsx
index fe503db78..a31580f10 100644
--- a/assets/src/components/customers/CustomerDetailsModal.tsx
+++ b/assets/src/components/customers/CustomerDetailsModal.tsx
@@ -3,7 +3,10 @@ import {Box, Flex} from 'theme-ui';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import {capitalize} from 'lodash';
-import {Button, Modal, Paragraph, Text} from '../common';
+import {Button, Modal, Paragraph, Text, Input} from '../common';
+import * as API from '../../api';
+import {Customer} from '../../types';
+import logger from '../../logger';
 
 // TODO: create date utility methods so we don't have to do this everywhere
 dayjs.extend(utc);
@@ -11,7 +14,7 @@ dayjs.extend(utc);
 export const CustomerMetadataSection = ({
   metadata,
 }: {
-  metadata: Record<string, string>;
+  metadata?: Record<string, string>;
 }) => {
   return !metadata ? null : (
     <React.Fragment>
@@ -43,134 +46,270 @@ export const CustomerMetadataSection = ({
   );
 };
 
-export const CustomerDetailsContent = ({customer}: {customer: any}) => {
-  const {
-    email,
-    name,
-    browser,
-    os,
-    phone,
-    external_id: externalId,
-    created_at: createdAt,
-    updated_at: lastUpdatedAt,
-    current_url: lastSeenUrl,
-    ip: lastIpAddress,
-    metadata,
-    time_zone,
-  } = customer;
-  return (
-    <Box>
-      <Box mb={2}>
-        <Box>
-          <Text strong>Name</Text>
-        </Box>
+type Props = {
+  customer: Customer;
+  isVisible?: boolean;
+  onClose: () => void;
+  onUpdate: (data: any) => Promise<void>;
+};
 
-        <Paragraph>{name || 'Unknown'}</Paragraph>
-      </Box>
+type State = {
+  updates: any;
+  isEditing: boolean;
+  isSaving: boolean;
+};
 
-      <Flex sx={{justifyContent: 'space-between'}}>
-        <Box mb={2} sx={{flex: 1}}>
-          <Box>
-            <Text strong>Email</Text>
-          </Box>
+class CustomerDetailsModal extends React.Component<Props, State> {
+  state: State = {
+    updates: this.getInitialUpdates(),
+    isEditing: false,
+    isSaving: false,
+  };
 
-          <Paragraph>{email || 'Unknown'}</Paragraph>
-        </Box>
-        <Box mb={2} sx={{flex: 1}}>
-          <Box>
-            <Text strong>Phone</Text>
-          </Box>
+  getInitialUpdates() {
+    const {customer} = this.props;
+    const editableFieldsWhitelist: Array<keyof Customer> = [
+      'name',
+      'email',
+      'phone',
+    ];
 
-          <Paragraph>{phone || 'Unknown'}</Paragraph>
-        </Box>
-      </Flex>
-      <Flex>
-        <Box mb={2} sx={{flex: 1}}>
-          <Box>
-            <Text strong>ID</Text>
-          </Box>
+    return editableFieldsWhitelist.reduce((acc, field) => {
+      return {...acc, [field]: customer[field] || null};
+    }, {});
+  }
 
-          <Paragraph>{externalId || 'Unknown'}</Paragraph>
-        </Box>
-        <Box mb={2} sx={{flex: 1}}>
-          <Box>
-            <Text strong>Time zone</Text>
-          </Box>
+  handleStartEditing = () => {
+    this.setState({isEditing: true});
+  };
 
-          <Paragraph>{time_zone || 'Unknown'}</Paragraph>
-        </Box>
-      </Flex>
-      <Box mb={2}>
-        <Box>
-          <Text strong>Device information</Text>
-        </Box>
+  handleCancelEdit = () => {
+    this.setState({
+      updates: this.getInitialUpdates(),
+      isEditing: false,
+    });
+  };
 
-        <Paragraph>
-          {[lastIpAddress, os, browser].join(' · ') || 'N/A'}
-        </Paragraph>
-      </Box>
+  handleEditCustomer = (updates: any) => {
+    this.setState({updates: {...this.state.updates, ...updates}});
+  };
+
+  handleChangeName = (e: any) => {
+    this.handleEditCustomer({name: e.target.value});
+  };
+
+  handleChangeEmail = (e: any) => {
+    this.handleEditCustomer({email: e.target.value});
+  };
+
+  handleChangePhone = (e: any) => {
+    this.handleEditCustomer({phone: e.target.value});
+  };
+
+  handleSaveUpdates = async () => {
+    this.setState({isSaving: true});
+
+    const {customer, onUpdate} = this.props;
+    const {updates} = this.state;
+    const {id: customerId} = customer;
+
+    try {
+      const result = await API.updateCustomer(customerId, updates);
+
+      await onUpdate(result);
+    } catch (err) {
+      logger.error('Failed to update customer', err);
+    }
 
-      <Box mb={2}>
+    this.handleCancelEdit();
+    this.setState({isSaving: false});
+  };
+
+  onModalClose = () => {
+    this.handleCancelEdit();
+    this.props.onClose();
+  };
+
+  render() {
+    const {customer, isVisible} = this.props;
+    const {isEditing, isSaving, updates} = this.state;
+    const {
+      browser,
+      os,
+      email,
+      name,
+      phone,
+      external_id: externalId,
+      created_at: createdAt,
+      updated_at: lastUpdatedAt,
+      current_url: lastSeenUrl,
+      ip: lastIpAddress,
+      metadata,
+      time_zone,
+    } = customer;
+
+    return (
+      <Modal
+        title="Customer details"
+        visible={isVisible}
+        onCancel={this.onModalClose}
+        onOk={this.onModalClose}
+        footer={
+          isEditing ? (
+            <Flex sx={{justifyContent: 'space-between'}}>
+              <Button onClick={this.onModalClose}>Close</Button>
+              <Flex>
+                <Button onClick={this.handleCancelEdit}>Cancel</Button>
+                <Button
+                  loading={isSaving}
+                  type="primary"
+                  onClick={this.handleSaveUpdates}
+                >
+                  Save
+                </Button>
+              </Flex>
+            </Flex>
+          ) : (
+            <Flex sx={{justifyContent: 'space-between'}}>
+              <Button onClick={this.onModalClose}>Close</Button>
+              <Button type="primary" onClick={this.handleStartEditing}>
+                Edit
+              </Button>
+            </Flex>
+          )
+        }
+      >
         <Box>
-          <Text strong>Last visited URL</Text>
-        </Box>
+          <Box mb={2}>
+            <Box>
+              <Text strong>Name</Text>
+            </Box>
+            {!isEditing ? (
+              <Paragraph>{name || 'Unknown'}</Paragraph>
+            ) : (
+              <Box pr={2} mb={12}>
+                <Input
+                  style={{marginBottom: -8}}
+                  id="name"
+                  type="text"
+                  size="small"
+                  value={updates.name}
+                  onChange={this.handleChangeName}
+                />
+              </Box>
+            )}
+          </Box>
 
-        {lastSeenUrl ? (
-          <a href={lastSeenUrl} target="_blank" rel="noopener noreferrer">
-            {lastSeenUrl}
-          </a>
-        ) : (
-          <Paragraph>N/A</Paragraph>
-        )}
-      </Box>
+          <Flex sx={{justifyContent: 'space-between'}}>
+            <Box mb={2} sx={{flex: 1}}>
+              <Box>
+                <Text strong>Email</Text>
+              </Box>
+              {!isEditing ? (
+                <Paragraph>{email || 'Unknown'}</Paragraph>
+              ) : (
+                <Box pr={2} mb={12}>
+                  <Input
+                    id="email"
+                    type="text"
+                    size="small"
+                    value={updates.email}
+                    onChange={this.handleChangeEmail}
+                  />
+                </Box>
+              )}
+            </Box>
+            <Box mb={2} sx={{flex: 1}}>
+              <Box>
+                <Text strong>Phone</Text>
+              </Box>
+              {!isEditing ? (
+                <Paragraph>{phone || 'Unknown'}</Paragraph>
+              ) : (
+                <Box pr={2} mb={12}>
+                  <Input
+                    id="phone"
+                    type="text"
+                    size="small"
+                    value={updates.phone}
+                    onChange={this.handleChangePhone}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Flex>
+
+          <Flex>
+            <Box mb={2} sx={{flex: 1}}>
+              <Box>
+                <Text strong>ID</Text>
+              </Box>
 
-      <Flex sx={{justifyContent: 'space-between'}}>
-        <Box mb={2} sx={{flex: 1}}>
-          <Box>
-            <Text strong>First seen</Text>
+              <Paragraph>{externalId || 'Unknown'}</Paragraph>
+            </Box>
+            <Box mb={2} sx={{flex: 1}}>
+              <Box>
+                <Text strong>Time zone</Text>
+              </Box>
+
+              <Paragraph>{time_zone || 'Unknown'}</Paragraph>
+            </Box>
+          </Flex>
+          <Box mb={2}>
+            <Box>
+              <Text strong>Device information</Text>
+            </Box>
+
+            <Paragraph>
+              {[lastIpAddress, os, browser].join(' · ') || 'N/A'}
+            </Paragraph>
           </Box>
 
-          <Paragraph>
-            {createdAt ? dayjs.utc(createdAt).format('MMMM DD, YYYY') : 'N/A'}
-          </Paragraph>
-        </Box>
+          <Box mb={2}>
+            <Box>
+              <Text strong>Last visited URL</Text>
+            </Box>
 
-        <Box mb={2} sx={{flex: 1}}>
-          <Box>
-            <Text strong>Last seen</Text>
+            {lastSeenUrl ? (
+              <a href={lastSeenUrl} target="_blank" rel="noopener noreferrer">
+                {lastSeenUrl}
+              </a>
+            ) : (
+              <Paragraph>N/A</Paragraph>
+            )}
           </Box>
 
-          <Paragraph>
-            {lastUpdatedAt
-              ? dayjs.utc(lastUpdatedAt).format('MMMM DD, YYYY')
-              : 'N/A'}
-          </Paragraph>
-        </Box>
-      </Flex>
+          <Flex sx={{justifyContent: 'space-between'}}>
+            <Box mb={2} sx={{flex: 1}}>
+              <Box>
+                <Text strong>First seen</Text>
+              </Box>
 
-      <CustomerMetadataSection metadata={metadata} />
-    </Box>
-  );
-};
+              <Paragraph>
+                {createdAt
+                  ? dayjs.utc(createdAt).format('MMMM DD, YYYY')
+                  : 'N/A'}
+              </Paragraph>
+            </Box>
 
-type Props = {
-  customer: any;
-  isVisible?: boolean;
-  onClose: () => void;
-};
+            <Box mb={2} sx={{flex: 1}}>
+              <Box>
+                <Text strong>Last seen</Text>
+              </Box>
 
-const CustomerDetailsModal = ({customer, isVisible, onClose}: Props) => {
-  return (
-    <Modal
-      title="Customer details"
-      visible={isVisible}
-      onCancel={onClose}
-      onOk={onClose}
-      footer={<Button onClick={onClose}>Close</Button>}
-    >
-      <CustomerDetailsContent customer={customer} />
-    </Modal>
-  );
-};
+              <Paragraph>
+                {lastUpdatedAt
+                  ? dayjs.utc(lastUpdatedAt).format('MMMM DD, YYYY')
+                  : 'N/A'}
+              </Paragraph>
+            </Box>
+          </Flex>
+
+          <CustomerMetadataSection metadata={metadata} />
+        </Box>
+      </Modal>
+    );
+  }
+}
 
 export default CustomerDetailsModal;
diff --git a/assets/src/components/customers/CustomersPage.tsx b/assets/src/components/customers/CustomersPage.tsx
index 7f2b0d20f..053873c1f 100644
--- a/assets/src/components/customers/CustomersPage.tsx
+++ b/assets/src/components/customers/CustomersPage.tsx
@@ -12,6 +12,7 @@ type Props = {
 };
 type State = {
   loading: boolean;
+  refreshing: boolean;
   selectedCustomerId: string | null;
   customers: Array<any>;
 };
@@ -19,6 +20,7 @@ type State = {
 class CustomersPage extends React.Component<Props, State> {
   state: State = {
     loading: true,
+    refreshing: false,
     selectedCustomerId: null,
     customers: [],
   };
@@ -35,9 +37,23 @@ class CustomersPage extends React.Component<Props, State> {
     }
   }
 
+  handleRefreshCustomers = async () => {
+    this.setState({refreshing: true});
+
+    try {
+      const customers = await API.fetchCustomers();
+
+      this.setState({customers, refreshing: false});
+    } catch (err) {
+      logger.error('Error refreshing customers!', err);
+
+      this.setState({refreshing: false});
+    }
+  };
+
   render() {
     const {currentlyOnline} = this.props;
-    const {loading, customers = []} = this.state;
+    const {loading, refreshing, customers = []} = this.state;
 
     if (loading) {
       return (
@@ -78,8 +94,10 @@ class CustomersPage extends React.Component<Props, State> {
           </Box>
 
           <CustomersTable
+            loading={refreshing}
             customers={customers}
             currentlyOnline={currentlyOnline}
+            onUpdate={this.handleRefreshCustomers}
           />
         </Box>
       </Box>
diff --git a/assets/src/components/customers/CustomersTable.tsx b/assets/src/components/customers/CustomersTable.tsx
index 645aa0043..ebd27c14c 100644
--- a/assets/src/components/customers/CustomersTable.tsx
+++ b/assets/src/components/customers/CustomersTable.tsx
@@ -9,11 +9,15 @@ import CustomerDetailsModal from './CustomerDetailsModal';
 dayjs.extend(utc);
 
 const CustomersTable = ({
+  loading,
   customers,
   currentlyOnline,
+  onUpdate,
 }: {
+  loading?: boolean;
   customers: Array<any>;
   currentlyOnline: any;
+  onUpdate: () => Promise<void>;
 }) => {
   const [selectedCustomerId, setSelectedCustomerId] = React.useState(null);
 
@@ -119,6 +123,7 @@ const CustomersTable = ({
               customer={record}
               isVisible={selectedCustomerId === record.id}
               onClose={() => setSelectedCustomerId(null)}
+              onUpdate={onUpdate}
             />
           </>
         );
@@ -126,7 +131,7 @@ const CustomersTable = ({
     },
   ];
 
-  return <Table dataSource={data} columns={columns} />;
+  return <Table loading={loading} dataSource={data} columns={columns} />;
 };
 
 export default CustomersTable;
diff --git a/assets/src/logger.tsx b/assets/src/logger.tsx
index 6844f6de4..1197e8e52 100644
--- a/assets/src/logger.tsx
+++ b/assets/src/logger.tsx
@@ -64,6 +64,7 @@ export class Logger {
   }
 
   error(...args: any) {
+    // TODO: capture these errors in Sentry?
     console.error(...args);
     this.callback('error', ...args);
   }
diff --git a/assets/src/types.ts b/assets/src/types.ts
index b0dbe30dc..cdb41ff57 100644
--- a/assets/src/types.ts
+++ b/assets/src/types.ts
@@ -21,7 +21,7 @@ export type Customer = {
   host?: string;
   ip?: string;
   last_seen?: string;
-  metadata?: object;
+  metadata?: any;
   os?: string;
   pathname?: string;
   phone?: number;