diff --git a/frontend/packages/api_client/src/models/OpenEdXInstanceConfig.ts b/frontend/packages/api_client/src/models/OpenEdXInstanceConfig.ts
index 5b823d59c..8a2f639f6 100644
--- a/frontend/packages/api_client/src/models/OpenEdXInstanceConfig.ts
+++ b/frontend/packages/api_client/src/models/OpenEdXInstanceConfig.ts
@@ -130,6 +130,12 @@ export interface OpenEdXInstanceConfig {
      * @memberof OpenEdXInstanceConfig
      */
     readonly isEmailVerified?: boolean;
+    /**
+     * State of DNS config verfication for external_domain
+     * @type {string}
+     * @memberof OpenEdXInstanceConfig
+     */
+    readonly dnsConfigurationState?: OpenEdXInstanceConfigDnsConfigurationStateEnum;
 }
 
 export function OpenEdXInstanceConfigFromJSON(json: any): OpenEdXInstanceConfig {
@@ -158,6 +164,7 @@ export function OpenEdXInstanceConfigFromJSONTyped(json: any, ignoreDiscriminato
         'draftStaticContentOverrides': !exists(json, 'draft_static_content_overrides') ? undefined : StaticContentOverridesFromJSON(json['draft_static_content_overrides']),
         'staticPagesEnabled': !exists(json, 'static_pages_enabled') ? undefined : json['static_pages_enabled'],
         'isEmailVerified': !exists(json, 'is_email_verified') ? undefined : json['is_email_verified'],
+        'dnsConfigurationState': !exists(json, 'dns_configuration_state') ? undefined : json['dns_configuration_state'],
     };
 }
 
@@ -181,4 +188,15 @@ export function OpenEdXInstanceConfigToJSON(value?: OpenEdXInstanceConfig | null
     };
 }
 
+/**
+* @export
+* @enum {string}
+*/
+export enum OpenEdXInstanceConfigDnsConfigurationStateEnum {
+    Verified = 'verified',
+    Pending = 'pending',
+    Failed = 'failed',
+    NotRequired = 'not_required'
+}
+
 
diff --git a/frontend/packages/api_client/src/models/OpenEdXInstanceConfigUpdate.ts b/frontend/packages/api_client/src/models/OpenEdXInstanceConfigUpdate.ts
index 25cdde1be..e23dcdf59 100644
--- a/frontend/packages/api_client/src/models/OpenEdXInstanceConfigUpdate.ts
+++ b/frontend/packages/api_client/src/models/OpenEdXInstanceConfigUpdate.ts
@@ -118,6 +118,12 @@ export interface OpenEdXInstanceConfigUpdate {
      * @memberof OpenEdXInstanceConfigUpdate
      */
     readonly staticPagesEnabled?: string;
+    /**
+     * State of DNS config verfication for external_domain
+     * @type {string}
+     * @memberof OpenEdXInstanceConfigUpdate
+     */
+    readonly dnsConfigurationState?: OpenEdXInstanceConfigUpdateDnsConfigurationStateEnum;
 }
 
 export function OpenEdXInstanceConfigUpdateFromJSON(json: any): OpenEdXInstanceConfigUpdate {
@@ -144,6 +150,7 @@ export function OpenEdXInstanceConfigUpdateFromJSONTyped(json: any, ignoreDiscri
         'heroCoverImage': !exists(json, 'hero_cover_image') ? undefined : json['hero_cover_image'],
         'draftStaticContentOverrides': !exists(json, 'draft_static_content_overrides') ? undefined : StaticContentOverridesFromJSON(json['draft_static_content_overrides']),
         'staticPagesEnabled': !exists(json, 'static_pages_enabled') ? undefined : json['static_pages_enabled'],
+        'dnsConfigurationState': !exists(json, 'dns_configuration_state') ? undefined : json['dns_configuration_state'],
     };
 }
 
@@ -167,4 +174,15 @@ export function OpenEdXInstanceConfigUpdateToJSON(value?: OpenEdXInstanceConfigU
     };
 }
 
+/**
+* @export
+* @enum {string}
+*/
+export enum OpenEdXInstanceConfigUpdateDnsConfigurationStateEnum {
+    Verified = 'verified',
+    Pending = 'pending',
+    Failed = 'failed',
+    NotRequired = 'not_required'
+}
+
 
diff --git a/frontend/src/console/actions.ts b/frontend/src/console/actions.ts
index b1cce020e..353cc577b 100644
--- a/frontend/src/console/actions.ts
+++ b/frontend/src/console/actions.ts
@@ -340,13 +340,16 @@ export const updateFieldValue = (
         }
       });
     }
-  } catch {
-    dispatch({
-      type: Types.UPDATE_INSTANCE_INFO_FAILURE,
-      data: {
-        [fieldName]: value
-      }
-    });
+  } catch (e) {
+    try {
+      const error = await e.json();
+      dispatch({
+        type: Types.UPDATE_INSTANCE_INFO_FAILURE,
+        data: sanitizeErrorFeedback(error)
+      });
+    } catch {
+      dispatch(push(ROUTES.Error.UNKNOWN_ERROR));
+    }
   }
 };
 
diff --git a/frontend/src/console/components/AddDomainModalButton/AddDomainModalButton.spec.tsx b/frontend/src/console/components/AddDomainModalButton/AddDomainModalButton.spec.tsx
new file mode 100644
index 000000000..eb64233be
--- /dev/null
+++ b/frontend/src/console/components/AddDomainModalButton/AddDomainModalButton.spec.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { setupComponentForTesting } from "utils/testing";
+import { AddDomainButton } from './AddDomainModalButton';
+
+it('renders without crashing', () => {
+  const tree = setupComponentForTesting(
+    <AddDomainButton />,
+    {
+      console: {
+        loading: false,
+        activeInstance: {
+          data: {
+            id: 1,
+            instanceName: "test",
+            subdomain: "test",
+            draftThemeConfig: {
+              version: 1,
+              mainColor: "#444444",
+              linkColor: "#FFAAFF"
+            },
+            draftStaticContentOverrides: {
+              homepageOverlayHtml: "Test overlay",
+            }
+          },
+          feedback: [],
+          loading: ['draftThemeConfig'],
+          deployment: null,
+        },
+      }
+    }
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders null when externalDomain in data', () => {
+  const tree = setupComponentForTesting(
+    <AddDomainButton />,
+    {
+      console: {
+        loading: false,
+        activeInstance: {
+          data: {
+            id: 1,
+            instanceName: "test",
+            externalDomain: 'example.com',
+            subdomain: "test",
+            draftThemeConfig: {
+              version: 1,
+              mainColor: "#444444",
+              linkColor: "#FFAAFF"
+            },
+            draftStaticContentOverrides: {
+              homepageOverlayHtml: "Test overlay",
+            }
+          },
+          feedback: [],
+          loading: ['draftThemeConfig'],
+          deployment: null,
+        },
+      }
+    }
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+})
diff --git a/frontend/src/console/components/AddDomainModalButton/AddDomainModalButton.tsx b/frontend/src/console/components/AddDomainModalButton/AddDomainModalButton.tsx
new file mode 100644
index 000000000..2803fb894
--- /dev/null
+++ b/frontend/src/console/components/AddDomainModalButton/AddDomainModalButton.tsx
@@ -0,0 +1,278 @@
+import { InstancesModel } from 'console/models';
+import * as React from 'react';
+import { Button, Col, Container, Form, Modal, Row } from 'react-bootstrap';
+import { RootState } from 'global/state';
+import { connect } from 'react-redux';
+import { TextInputField } from 'ui/components';
+import { WrappedMessage } from 'utils/intl';
+import { updateFieldValue, clearErrorMessage } from 'console/actions';
+import { SUPPORT_LINK } from 'global/constants';
+import messages from './displayMessages';
+import './styles.scss';
+
+interface State {
+  showModal: boolean;
+  externalDomain?: string;
+  domainRightsAggrement: boolean;
+  additionalFeeAggrement: boolean;
+}
+
+interface ActionProps {
+  updateFieldValue: Function;
+  clearErrorMessage: Function;
+}
+
+interface StateProps extends InstancesModel {}
+
+interface Props extends StateProps, ActionProps {}
+
+class AddDomainButtonComponent extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      showModal: false,
+      externalDomain: '',
+      domainRightsAggrement: false,
+      additionalFeeAggrement: false
+    };
+
+    if (props.activeInstance.data) {
+      this.state = {
+        showModal: false,
+        externalDomain: props.activeInstance.data.externalDomain,
+        domainRightsAggrement: false,
+        additionalFeeAggrement: false
+      };
+    }
+  }
+
+  public componentDidUpdate(prevProps: Props) {
+    const instance = prevProps.activeInstance;
+    if (!instance.data) {
+      this.handleHide();
+    } else if (
+      prevProps.activeInstance!.data!.externalDomain !==
+      this.props.activeInstance!.data!.externalDomain
+    ) {
+      this.handleHide();
+    }
+  }
+
+  private handleShow = () => {
+    this.setState({
+      showModal: true
+    });
+  };
+
+  private handleHide = () => {
+    this.setState({
+      showModal: false
+    });
+  };
+
+  private handleClose = () => {
+    this.setState({
+      showModal: false
+    });
+  };
+
+  private toggleDomainRights = () => {
+    this.setState(prevState => ({
+      domainRightsAggrement: !prevState.domainRightsAggrement
+    }));
+  };
+
+  private toggleAdditionalFee = () => {
+    this.setState(prevState => ({
+      additionalFeeAggrement: !prevState.additionalFeeAggrement
+    }));
+  };
+
+  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    this.props.clearErrorMessage('externalDomain');
+    this.setState({
+      externalDomain: value
+    });
+  };
+
+  private handleUpdateExternalDomain = () => {
+    const instance = this.props.activeInstance;
+    if (instance.data) {
+      this.props.updateFieldValue(
+        instance.data.id,
+        'externalDomain',
+        this.state.externalDomain
+      );
+    }
+  };
+
+  public render() {
+    const instance = this.props.activeInstance;
+
+    // Do not render if instance data is not present or if externalDomain is present
+    // in instance data.
+    if (!instance.data || (instance.data && instance.data.externalDomain)) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Button className="addBtn" size="lg" onClick={this.handleShow}>
+          <WrappedMessage messages={messages} id="buttonText" />
+        </Button>
+
+        <Modal
+          size="lg"
+          show={this.state.showModal}
+          onClose={this.handleClose}
+          onHide={this.handleClose}
+          centered
+        >
+          <Modal.Header className="add-domain-modal-header" closeButton />
+          <Modal.Body>
+            <Container className="add-domain-modal">
+              <h2>
+                <WrappedMessage messages={messages} id="modalTitle" />
+              </h2>
+              <Row>
+                <Col className="add-domain-modal-description">
+                  <p>
+                    <span>
+                      <WrappedMessage
+                        messages={messages}
+                        id="modalDescriptionOne"
+                      />
+                    </span>
+                    <a
+                      href="https://www.gandi.net/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <WrappedMessage
+                        messages={messages}
+                        id="gandiDomainText"
+                      />
+                    </a>
+                    <span>
+                      <WrappedMessage
+                        messages={messages}
+                        id="modalDescriptionTwo"
+                      />
+                    </span>
+                  </p>
+                </Col>
+              </Row>
+              <Row>
+                <Col lg={8}>
+                  <TextInputField
+                    value={this.state.externalDomain}
+                    onChange={this.handleChange}
+                    type="domain"
+                    messages={messages}
+                    fieldName="externalDomain"
+                    autoComplete="off"
+                  />
+                  {instance.feedback.externalDomain ? (
+                    <div className="domain-error">
+                      <p className="error-msg">
+                        <i className="fas fa-exclamation-triangle pr-2" />
+                        <WrappedMessage
+                          messages={messages}
+                          id="domainErrorMessage"
+                        />
+                      </p>
+                      <p className="error-detail">
+                        <WrappedMessage
+                          messages={messages}
+                          id="domainErrorDescription1"
+                        />
+                        <a href={SUPPORT_LINK}>
+                          <WrappedMessage
+                            messages={messages}
+                            id="contactSupport"
+                          />
+                        </a>
+                        <WrappedMessage
+                          messages={messages}
+                          id="domainErrorDescription2"
+                        />
+                      </p>
+                    </div>
+                  ) : null}
+                </Col>
+              </Row>
+              <Form.Group>
+                <Form.Check type="checkbox" className="d-flex my-3">
+                  <Form.Check.Input
+                    type="checkbox"
+                    checked={this.state.domainRightsAggrement}
+                    onChange={this.toggleDomainRights}
+                  />
+                  <Form.Check.Label className="checkbox-label">
+                    <WrappedMessage
+                      messages={messages}
+                      id="domainRightsAgreement"
+                    />
+                  </Form.Check.Label>
+                </Form.Check>
+                <Form.Check type="checkbox" className="d-flex my-3">
+                  <Form.Check.Input
+                    type="checkbox"
+                    checked={this.state.additionalFeeAggrement}
+                    onChange={this.toggleAdditionalFee}
+                  />
+                  <Form.Check.Label className="checkbox-label">
+                    <WrappedMessage
+                      messages={messages}
+                      id="additionalFeeAgreement"
+                    />
+                  </Form.Check.Label>
+                </Form.Check>
+              </Form.Group>
+              <div className="d-flex flex-row">
+                <div className="verify-btn">
+                  <Button
+                    size="lg"
+                    variant="primary"
+                    disabled={
+                      !(
+                        this.state.additionalFeeAggrement &&
+                        this.state.domainRightsAggrement &&
+                        !!this.state.externalDomain
+                      )
+                    }
+                    onClick={this.handleUpdateExternalDomain}
+                  >
+                    <WrappedMessage messages={messages} id="addDomainBtn" />
+                  </Button>
+                </div>
+                <div>
+                  <Button
+                    size="lg"
+                    variant="outline-primary"
+                    onClick={this.handleHide}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            </Container>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export const AddDomainButton = connect<
+  StateProps,
+  ActionProps,
+  {},
+  Props,
+  RootState
+>((state: RootState) => state.console, {
+  updateFieldValue,
+  clearErrorMessage
+})(AddDomainButtonComponent);
diff --git a/frontend/src/console/components/AddDomainModalButton/__snapshots__/AddDomainModalButton.spec.tsx.snap b/frontend/src/console/components/AddDomainModalButton/__snapshots__/AddDomainModalButton.spec.tsx.snap
new file mode 100644
index 000000000..ba3a59aa1
--- /dev/null
+++ b/frontend/src/console/components/AddDomainModalButton/__snapshots__/AddDomainModalButton.spec.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders null when externalDomain in data 1`] = `null`;
+
+exports[`renders without crashing 1`] = `
+<div>
+  <button
+    className="addBtn btn btn-primary btn-lg"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Add custom domain (€25/month)
+  </button>
+</div>
+`;
diff --git a/frontend/src/console/components/AddDomainModalButton/displayMessages.ts b/frontend/src/console/components/AddDomainModalButton/displayMessages.ts
new file mode 100644
index 000000000..d28a625bc
--- /dev/null
+++ b/frontend/src/console/components/AddDomainModalButton/displayMessages.ts
@@ -0,0 +1,59 @@
+const messages = {
+  buttonText: {
+    defaultMessage: 'Add custom domain (€25/month)',
+    description: 'Button for adding custom domain'
+  },
+  modalTitle: {
+    defaultMessage: 'Add a Custom Domain',
+    description: 'Title for custom domain modal'
+  },
+  modalDescriptionOne: {
+    defaultMessage:
+      "Add your domain name below. If you don't have a domain yet, we recommend you go to ",
+    description: ''
+  },
+  gandiDomainText: {
+    defaultMessage: 'Gandi.net',
+    description: ''
+  },
+  modalDescriptionTwo: {
+    defaultMessage:
+      ' to order one. Then complete this step once you have a domain.',
+    description: ''
+  },
+  externalDomain: {
+    defaultMessage: 'Domain Name',
+    description: 'Domain name input field'
+  },
+  addDomainBtn: {
+    defaultMessage: 'Add Domain',
+    description: 'Submit button to add domain'
+  },
+  domainRightsAgreement: {
+    defaultMessage: 'I certify that I have the rights to use this domain',
+    description: ''
+  },
+  additionalFeeAgreement: {
+    defaultMessage: 'I agree to the additional monthly fee of €25',
+    description: ''
+  },
+  domainErrorMessage: {
+    defaultMessage: 'Invalid domain name',
+    description: ''
+  },
+  domainErrorDescription1: {
+    defaultMessage:
+      "We couldnt recognize you domain name. If you're sure it's valid, please ",
+    description: ''
+  },
+  contantSupport: {
+    defaultMessage: 'contant support',
+    description: ''
+  },
+  domainErrorDescription2: {
+    defaultMessage: ' for assistance.',
+    description: ''
+  }
+};
+
+export default messages;
diff --git a/frontend/src/console/components/AddDomainModalButton/index.ts b/frontend/src/console/components/AddDomainModalButton/index.ts
new file mode 100644
index 000000000..351a1dae5
--- /dev/null
+++ b/frontend/src/console/components/AddDomainModalButton/index.ts
@@ -0,0 +1 @@
+export * from './AddDomainModalButton';
diff --git a/frontend/src/console/components/AddDomainModalButton/styles.scss b/frontend/src/console/components/AddDomainModalButton/styles.scss
new file mode 100644
index 000000000..f6d342a6a
--- /dev/null
+++ b/frontend/src/console/components/AddDomainModalButton/styles.scss
@@ -0,0 +1,37 @@
+@import "~styles/theme";
+
+.checkbox-label {
+  font-size: 16px;
+  color: $dark-2;
+}
+
+.add-domain-modal {
+  padding: 35px;
+
+  h2 {
+    color: $dark-1;
+  }
+
+  .add-domain-modal-description {
+    color: $dark-2;
+
+    a {
+      color: $link-blue;
+    }
+  }
+
+  .domain-error {
+    font-size: 16px;
+    .error-msg {
+      color: $alert-red-3;
+      margin-bottom: 0.5rem;
+    }
+    a {
+      color: $link-blue;
+    }
+  }
+
+  button {
+    font-size: 12px;
+  }
+}
diff --git a/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap b/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
index b542b83d4..e8df44b85 100644
--- a/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
+++ b/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
@@ -241,11 +241,9 @@ exports[`Console Page Correctly renders loading page 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
@@ -554,11 +552,9 @@ exports[`Console Page Correctly renders page with data 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
@@ -823,11 +819,9 @@ exports[`Console Page Correctly renders page with email not verified alert 1`] =
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap b/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap
index 6d585ca38..53d6e3a73 100644
--- a/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap
+++ b/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap
@@ -229,11 +229,9 @@ exports[`renders without crashing 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/console/components/CustomizationSideMenu/CustomizationSideMenu.tsx b/frontend/src/console/components/CustomizationSideMenu/CustomizationSideMenu.tsx
index 84f0cce66..eab933073 100644
--- a/frontend/src/console/components/CustomizationSideMenu/CustomizationSideMenu.tsx
+++ b/frontend/src/console/components/CustomizationSideMenu/CustomizationSideMenu.tsx
@@ -99,14 +99,7 @@ export const CustomizationSideMenu: React.FC = () => {
               <NavLink exact to={ROUTES.Console.INSTANCE_SETTINGS_GENERAL}>
                 <WrappedMessage messages={messages} id="linkGeneral" />
               </NavLink>
-              <NavLink
-                exact
-                to=""
-                className="disabled"
-                onClick={e => {
-                  e.preventDefault();
-                }}
-              >
+              <NavLink exact to={ROUTES.Console.INSTANCE_SETTINGS_DOMAIN}>
                 <WrappedMessage messages={messages} id="linkDomain" />
               </NavLink>
             </Nav>
diff --git a/frontend/src/console/components/CustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap b/frontend/src/console/components/CustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
index 8f7e78d46..2dbc4b64f 100644
--- a/frontend/src/console/components/CustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
+++ b/frontend/src/console/components/CustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
@@ -179,11 +179,9 @@ exports[`Custom Side Menu Page Renders with correct accordion expanded, and with
             General
           </a>
           <a
-            aria-current="page"
-            className="disabled active"
-            href="/"
+            aria-current={null}
+            href="/console/settings/domain"
             onClick={[Function]}
-            style={Object {}}
           >
             Domain
           </a>
diff --git a/frontend/src/console/components/DomainItem/DomainItem.spec.tsx b/frontend/src/console/components/DomainItem/DomainItem.spec.tsx
new file mode 100644
index 000000000..fc3c5308c
--- /dev/null
+++ b/frontend/src/console/components/DomainItem/DomainItem.spec.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { setupComponentForTesting } from "utils/testing";
+import { OpenEdXInstanceConfigUpdateDnsConfigurationStateEnum as DnsStateEnum } from 'ocim-client';
+import { DomainListItem } from './DomainItem';
+
+it('renders correctly for subdomains', () => {
+  const props = {
+    domainName: 'test.opencraft.hosting',
+    isExternal: false
+  }
+  const tree = setupComponentForTesting(
+    <DomainListItem {...props}/>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+it('renders correctly for unverified external domains', () => {
+  const props = {
+    domainName: 'example.com',
+    isExternal: true,
+    dnsState: DnsStateEnum.Failed,
+  }
+  const tree = setupComponentForTesting(<DomainListItem {...props}/>).toJSON();
+  expect(tree).toMatchSnapshot();
+})
+
+it('renders correctly for verified external domains', () => {
+  const props = {
+    domainName: 'example.com',
+    isExternal: true,
+    dnsState: DnsStateEnum.Verified,
+  }
+  const tree = setupComponentForTesting(<DomainListItem {...props}/>).toJSON();
+  expect(tree).toMatchSnapshot();
+})
diff --git a/frontend/src/console/components/DomainItem/DomainItem.tsx b/frontend/src/console/components/DomainItem/DomainItem.tsx
new file mode 100644
index 000000000..ff67121f3
--- /dev/null
+++ b/frontend/src/console/components/DomainItem/DomainItem.tsx
@@ -0,0 +1,197 @@
+import { EXTERNAL_DOMAIN_CNAME_VALUE } from 'global/constants';
+import { OpenEdXInstanceConfigUpdateDnsConfigurationStateEnum as DnsStateEnum } from 'ocim-client';
+import * as React from 'react';
+import {
+  Button,
+  Col,
+  Container,
+  Dropdown,
+  Modal,
+  Row,
+  Table
+} from 'react-bootstrap';
+import DropdownMenu from 'react-bootstrap/DropdownMenu';
+import { WrappedMessage } from 'utils/intl';
+import messages from './displayMessages';
+import './styles.scss';
+
+interface State {
+  title: string;
+  subtitle: string;
+  // extra state to manage the empty title and subtitle and rendering
+  renderBool: boolean;
+}
+
+interface Props {
+  domainName?: string;
+  isExternal: boolean;
+  dnsState?: DnsStateEnum;
+  onDelete?: Function;
+}
+
+interface DropdownButtonPropType {
+  children?: React.ReactNode;
+  onClick?: React.MouseEventHandler;
+}
+
+interface DomainConfigHelpProps {
+  domainName?: string;
+}
+
+const DomainConfigHelp: React.FC<DomainConfigHelpProps> = (
+  props: DomainConfigHelpProps
+) => {
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        className="d-flex flex-column justify-content-center align-items-center check-dns-btn"
+        onClick={e => {
+          e.preventDefault();
+          setShow(true);
+        }}
+      >
+        <div className="d-flex flex-row">
+          <div className="dns-config-icon">
+            <i className="fas fa-exclamation-triangle" />
+          </div>
+          <div className="dns-config">Check DNS Configuration</div>
+        </div>
+      </button>
+      <Modal onHide={() => setShow(false)} show={show} centered size="lg">
+        <Modal.Header className="dns-config-help-modal-header" closeButton />
+        <Modal.Body>
+          <Container className="dns-config-help-modal">
+            <h2>
+              <WrappedMessage messages={messages} id="helpTitle" />
+            </h2>
+            <Row>
+              <Col className="dns-config-help-modal-description">
+                <p>
+                  <WrappedMessage messages={messages} id="helpDescription" />
+                </p>
+              </Col>
+            </Row>
+            <Table bordered>
+              <thead>
+                <tr>
+                  <th>NAME</th>
+                  <th>TYPE</th>
+                  <th>VALUE</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{props.domainName}</td>
+                  <td>CNAME</td>
+                  <td>{EXTERNAL_DOMAIN_CNAME_VALUE}</td>
+                </tr>
+                <tr>
+                  <td>
+                    *.
+                    {props.domainName}
+                  </td>
+                  <td>CNAME</td>
+                  <td>{EXTERNAL_DOMAIN_CNAME_VALUE}</td>
+                </tr>
+              </tbody>
+            </Table>
+            <div className="d-flex flex-row">
+              <div>
+                <Button
+                  size="lg"
+                  className="addBtn"
+                  variant="primary"
+                  onClick={() => setShow(false)}
+                >
+                  I have made these changes
+                </Button>
+              </div>
+            </div>
+          </Container>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export class DomainListItem extends React.PureComponent<Props, State> {
+  private getDropdown() {
+    const customToggle = React.forwardRef<null, DropdownButtonPropType>(
+      ({ children, onClick }, ref) => {
+        return (
+          <button
+            type="button"
+            className="options-dropdown-toggle d-flex flex-row"
+            ref={ref}
+            onClick={e => {
+              e.preventDefault();
+              if (onClick) {
+                onClick(e);
+              }
+            }}
+          >
+            {children}
+            <i className="dropdown-toggle-caret fas fa-angle-down" />
+          </button>
+        );
+      }
+    );
+
+    return (
+      <Dropdown className="d-flex flex-column align-items-center justify-content-center">
+        <Dropdown.Toggle as={customToggle} id="domain-dropdown">
+          <span>Options</span>
+        </Dropdown.Toggle>
+
+        <DropdownMenu alignRight>
+          <Dropdown.Item
+            onClick={(event: any) => {
+              event.preventDefault();
+              if (this.props.onDelete) {
+                this.props.onDelete();
+              }
+            }}
+          >
+            Delete Domain
+          </Dropdown.Item>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+
+  public render() {
+    // Determine the color of the domain name text based on DNS config status
+    let domainColor: string = 'color-green';
+    if (
+      this.props.isExternal &&
+      this.props.dnsState !== DnsStateEnum.Verified
+    ) {
+      domainColor = '';
+    }
+
+    return (
+      <ul className="domain-list">
+        <li className={`list-item ${domainColor}`}>
+          <div className="d-flex flex-wrap justify-content-between">
+            <div>
+              <div>{this.props.domainName}</div>
+              {this.props.isExternal ? (
+                <div className="domain-type">Primary Domain</div>
+              ) : (
+                <div className="domain-type">Default Subdomain</div>
+              )}
+            </div>
+            {this.props.isExternal &&
+            this.props.dnsState !== DnsStateEnum.Verified ? (
+              <DomainConfigHelp domainName={this.props.domainName} />
+            ) : null}
+            {this.props.isExternal ? this.getDropdown() : null}
+          </div>
+        </li>
+      </ul>
+    );
+  }
+}
diff --git a/frontend/src/console/components/DomainItem/__snapshots__/DomainItem.spec.tsx.snap b/frontend/src/console/components/DomainItem/__snapshots__/DomainItem.spec.tsx.snap
new file mode 100644
index 000000000..fa2d0142d
--- /dev/null
+++ b/frontend/src/console/components/DomainItem/__snapshots__/DomainItem.spec.tsx.snap
@@ -0,0 +1,132 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly for subdomains 1`] = `
+<ul
+  className="domain-list"
+>
+  <li
+    className="list-item color-green"
+  >
+    <div
+      className="d-flex flex-wrap justify-content-between"
+    >
+      <div>
+        <div>
+          test.opencraft.hosting
+        </div>
+        <div
+          className="domain-type"
+        >
+          Default Subdomain
+        </div>
+      </div>
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`renders correctly for unverified external domains 1`] = `
+<ul
+  className="domain-list"
+>
+  <li
+    className="list-item "
+  >
+    <div
+      className="d-flex flex-wrap justify-content-between"
+    >
+      <div>
+        <div>
+          example.com
+        </div>
+        <div
+          className="domain-type"
+        >
+          Primary Domain
+        </div>
+      </div>
+      <button
+        className="d-flex flex-column justify-content-center align-items-center check-dns-btn"
+        onClick={[Function]}
+        type="button"
+      >
+        <div
+          className="d-flex flex-row"
+        >
+          <div
+            className="dns-config-icon"
+          >
+            <i
+              className="fas fa-exclamation-triangle"
+            />
+          </div>
+          <div
+            className="dns-config"
+          >
+            Check DNS Configuration
+          </div>
+        </div>
+      </button>
+      <div
+        className="d-flex flex-column align-items-center justify-content-center dropdown"
+        onKeyDown={[Function]}
+      >
+        <button
+          className="options-dropdown-toggle d-flex flex-row"
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            Options
+          </span>
+          <i
+            className="dropdown-toggle-caret fas fa-angle-down"
+          />
+        </button>
+      </div>
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`renders correctly for verified external domains 1`] = `
+<ul
+  className="domain-list"
+>
+  <li
+    className="list-item color-green"
+  >
+    <div
+      className="d-flex flex-wrap justify-content-between"
+    >
+      <div>
+        <div>
+          example.com
+        </div>
+        <div
+          className="domain-type"
+        >
+          Primary Domain
+        </div>
+      </div>
+      <div
+        className="d-flex flex-column align-items-center justify-content-center dropdown"
+        onKeyDown={[Function]}
+      >
+        <button
+          className="options-dropdown-toggle d-flex flex-row"
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            Options
+          </span>
+          <i
+            className="dropdown-toggle-caret fas fa-angle-down"
+          />
+        </button>
+      </div>
+    </div>
+  </li>
+</ul>
+`;
diff --git a/frontend/src/console/components/DomainItem/displayMessages.ts b/frontend/src/console/components/DomainItem/displayMessages.ts
new file mode 100644
index 000000000..064c9cdc0
--- /dev/null
+++ b/frontend/src/console/components/DomainItem/displayMessages.ts
@@ -0,0 +1,14 @@
+const messages = {
+  helpTitle: {
+    defaultMessage: 'DNS Configuration',
+    description: 'Title for DNS configuration help modal'
+  },
+  helpDescription: {
+    defaultMessage:
+      'This table shows you the DNS entries needed to connect your domain.' +
+      ' Log in to your domain provider to manage these settings.',
+    description: 'Description for DNS configuration help modal'
+  }
+};
+
+export default messages;
diff --git a/frontend/src/console/components/DomainItem/index.ts b/frontend/src/console/components/DomainItem/index.ts
new file mode 100644
index 000000000..1c1c38fde
--- /dev/null
+++ b/frontend/src/console/components/DomainItem/index.ts
@@ -0,0 +1 @@
+export * from './DomainItem';
diff --git a/frontend/src/console/components/DomainItem/styles.scss b/frontend/src/console/components/DomainItem/styles.scss
new file mode 100644
index 000000000..19964511d
--- /dev/null
+++ b/frontend/src/console/components/DomainItem/styles.scss
@@ -0,0 +1,99 @@
+@import "~styles/theme";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+.list-item {
+  margin: 20px 0px;
+  font-size: 18px;
+
+  &.color-green {
+    color: $green;
+  }
+
+  .domain-type {
+    color: $secondary-2;
+    font-size: 14px;
+  }
+
+  .dns-config-icon {
+    color: $alert-yellow-3;
+  }
+
+  .dns-config {
+    color: $secondary-2;
+    font-size: 16px;
+    margin-left: 10px;
+    border-bottom: 1px black solid;
+  }
+
+  .check-dns-btn {
+    flex-grow: 1;
+    text-decoration: none;
+    appearance: none;
+    border: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    background-color: inherit;
+  }
+}
+
+.options-dropdown-toggle {
+  display: inline-flex;
+  border-radius: 0.375rem;
+  justify-content: center;
+  background-color: white;
+  color: black;
+  font-size: 16px;
+  padding: 0.5rem 1rem;
+
+  .dropdown-toggle-caret {
+    margin-left: 0.375rem;
+  }
+}
+
+.options-dropdown-toggle:focus {
+  border: blue solid 2px;
+}
+
+.options-dropdown-toggle::after {
+  content: none;
+}
+
+.dns-config-help-modal{
+  padding: 35px;
+
+  .dns-config-help-modal-description {
+    color: $dark-2;
+    font-size: 16px;
+    max-width: 716px
+  }
+
+  h2 {
+    color: $dark-1;
+    font-size: 30px;
+    text-align: left;
+    font-weight: 600;
+    font-family: $playfair-font;
+  }
+
+  table {
+    font-size: 16px;
+  }
+
+  button {
+    font-size: 14px;
+  }
+}
+
+.dns-config-help-modal-header{
+  display: block;
+  position: absolute;
+  right: 0px;
+  border: none;
+  cursor: pointer;
+  z-index: 10;
+  padding-right: 25px;
+}
diff --git a/frontend/src/console/components/DomainSettings/DomainSettings.spec.tsx b/frontend/src/console/components/DomainSettings/DomainSettings.spec.tsx
new file mode 100644
index 000000000..6f0de95d4
--- /dev/null
+++ b/frontend/src/console/components/DomainSettings/DomainSettings.spec.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { setupComponentForTesting } from "utils/testing";
+import { DomainSettings } from './DomainSettings';
+
+it('renders correctly for no externalDomain', () => {
+  const tree = setupComponentForTesting(<DomainSettings />,
+    {
+      console: {
+        loading: false,
+        activeInstance: {
+          data: {
+            id: 1,
+            instanceName: "test",
+            subdomain: "test",
+            draftThemeConfig: {
+              version: 1,
+              mainColor: "#444444",
+              linkColor: "#FFAAFF"
+            },
+            draftStaticContentOverrides: {
+              homepageOverlayHtml: "Test overlay",
+            }
+          },
+          feedback: {},
+          loading: [],
+          deployment: null,
+        },
+        instances: [{
+          id: 1,
+          instanceName: "test",
+          subdomain: "test",
+        }]
+      }
+    }).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders correctly if external domain is present', () => {
+  const tree = setupComponentForTesting(<DomainSettings />,
+    {
+      console: {
+        loading: false,
+        activeInstance: {
+          data: {
+            id: 1,
+            instanceName: "test",
+            externalDomain: 'example.com',
+            subdomain: "test",
+            dnsConfigurationState: 'verified',
+            draftThemeConfig: {
+              version: 1,
+              mainColor: "#444444",
+              linkColor: "#FFAAFF"
+            },
+            draftStaticContentOverrides: {
+              homepageOverlayHtml: "Test overlay",
+            }
+          },
+          feedback: {},
+          loading: [],
+          deployment: null,
+        },
+        instances: [{
+          id: 1,
+          instanceName: "test",
+          subdomain: "test",
+        }]
+      }
+    }).toJSON();
+  expect(tree).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/frontend/src/console/components/DomainSettings/DomainSettings.tsx b/frontend/src/console/components/DomainSettings/DomainSettings.tsx
new file mode 100644
index 000000000..ac4e67967
--- /dev/null
+++ b/frontend/src/console/components/DomainSettings/DomainSettings.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { InstancesModel } from 'console/models';
+import { ConsolePage, PreviewBox } from 'newConsole/components';
+import { WrappedMessage } from 'utils/intl';
+import { Col, Container, Row } from 'react-bootstrap';
+import { RootState } from 'global/state';
+import { connect } from 'react-redux';
+import './styles.scss';
+import { INTERNAL_DOMAIN_NAME } from 'global/constants';
+import { updateFieldValue } from 'console/actions';
+import { DomainListItem } from '../DomainItem';
+import messages from './displayMessages';
+import { AddDomainButton } from '../AddDomainModalButton';
+
+interface State {
+  title: string;
+  subtitle: string;
+  // extra state to manage the empty title and subtitle and rendering
+  renderBool: boolean;
+}
+
+interface ActionProps {
+  updateFieldValue: Function;
+}
+
+interface StateProps extends InstancesModel {}
+
+interface Props extends StateProps, ActionProps {}
+
+export class DomainSettingsComponent extends React.PureComponent<Props, State> {
+  private deleteExternalDomain = () => {
+    const instance = this.props.activeInstance;
+    if (instance.data) {
+      this.props.updateFieldValue(instance.data.id, 'externalDomain', null);
+    }
+  };
+
+  public render() {
+    let subdomain;
+    let externalDomain;
+    let dnsConfigState;
+    let externalDomainComponent;
+    const instance = this.props.activeInstance;
+    if (instance && instance.data) {
+      subdomain = instance.data.subdomain;
+      externalDomain = instance.data.externalDomain;
+      dnsConfigState = instance.data.dnsConfigurationState;
+    }
+
+    if (externalDomain) {
+      externalDomainComponent = (
+        <>
+          <hr />
+          <DomainListItem
+            domainName={externalDomain}
+            isExternal
+            dnsState={dnsConfigState}
+            onDelete={this.deleteExternalDomain}
+          />
+        </>
+      );
+    } else {
+      externalDomainComponent = <AddDomainButton />;
+    }
+
+    return (
+      <ConsolePage contentLoading={false} showSideBarEditComponent={false}>
+        <PreviewBox>
+          <Container className="domain-settings-container">
+            <h2>
+              <WrappedMessage messages={messages} id="title" />
+            </h2>
+            <Row>
+              <Col className="domain-settings-description">
+                <p>
+                  <WrappedMessage messages={messages} id="description" />
+                </p>
+              </Col>
+            </Row>
+            <div>
+              <DomainListItem
+                domainName={subdomain + INTERNAL_DOMAIN_NAME}
+                isExternal={false}
+              />
+              {externalDomainComponent}
+            </div>
+          </Container>
+        </PreviewBox>
+      </ConsolePage>
+    );
+  }
+}
+
+export const DomainSettings = connect<
+  StateProps,
+  ActionProps,
+  {},
+  Props,
+  RootState
+>((state: RootState) => state.console, {
+  updateFieldValue
+})(DomainSettingsComponent);
diff --git a/frontend/src/console/components/DomainSettings/__snapshots__/DomainSettings.spec.tsx.snap b/frontend/src/console/components/DomainSettings/__snapshots__/DomainSettings.spec.tsx.snap
new file mode 100644
index 000000000..cd1690356
--- /dev/null
+++ b/frontend/src/console/components/DomainSettings/__snapshots__/DomainSettings.spec.tsx.snap
@@ -0,0 +1,639 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly for no externalDomain 1`] = `
+<div
+  className="console-page"
+>
+  <div
+    className="d-flex justify-content-center align-middle email-activation-alert"
+  >
+    <i
+      className="alert-icon fas fa-exclamation-triangle fa-xs"
+    />
+    One of your email addresses is pending confirmation. Please confirm it to begin managing your Open edX instance.
+  </div>
+  <div
+    className="new-console-page-container"
+  >
+    <div
+      className="new-console-page-content row"
+    >
+      <div
+        className="pr-4 pl-0 container-fluid"
+      >
+        <div
+          className="justify-content-center m-0 row"
+        >
+          <div
+            className="p-0 m-0 col-md-3"
+          >
+            <div
+              className="new-customization-menu accordion"
+            >
+              <div
+                className="card"
+              >
+                <div
+                  className="card-header"
+                  onClick={[Function]}
+                  variant="link"
+                >
+                  Theme
+                </div>
+                <div
+                  aria-expanded={null}
+                  className="collapse show"
+                >
+                  <div
+                    className="card-body"
+                  >
+                    <div
+                      className="flex-column nav card-header-undefined"
+                      onKeyDown={[Function]}
+                    >
+                      <a
+                        aria-current={null}
+                        href="/console/theming/preview-and-colors"
+                        onClick={[Function]}
+                      >
+                        Colors
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/logos"
+                        onClick={[Function]}
+                      >
+                        Logos
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/buttons"
+                        onClick={[Function]}
+                      >
+                        Buttons
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/navigation"
+                        onClick={[Function]}
+                      >
+                        Navigation
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/footer"
+                        onClick={[Function]}
+                      >
+                        Footer
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/hero"
+                        onClick={[Function]}
+                      >
+                        Hero
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="card"
+              >
+                <div
+                  className="card-header"
+                  onClick={[Function]}
+                  variant="link"
+                >
+                  Custom Pages
+                </div>
+                <div
+                  aria-expanded={null}
+                  className="collapse"
+                >
+                  <div
+                    className="card-body"
+                  >
+                    <div
+                      className="flex-column nav card-header-undefined"
+                      onKeyDown={[Function]}
+                    >
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/about"
+                        onClick={[Function]}
+                      >
+                        About
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/contact"
+                        onClick={[Function]}
+                      >
+                        Contact
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/donate"
+                        onClick={[Function]}
+                      >
+                        Donate
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/tos"
+                        onClick={[Function]}
+                      >
+                        Terms of Service
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/honor"
+                        onClick={[Function]}
+                      >
+                        Honor Code
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/privacy"
+                        onClick={[Function]}
+                      >
+                        Privacy Policy
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="card"
+              >
+                <div
+                  className="card-header"
+                  onClick={[Function]}
+                  variant="link"
+                >
+                  Instance Settings
+                </div>
+                <div
+                  aria-expanded={null}
+                  className="collapse"
+                >
+                  <div
+                    className="card-body"
+                  >
+                    <div
+                      className="flex-column nav card-header-undefined"
+                      onKeyDown={[Function]}
+                    >
+                      <a
+                        aria-current={null}
+                        href="/console/settings/general"
+                        onClick={[Function]}
+                      >
+                        General
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/settings/domain"
+                        onClick={[Function]}
+                      >
+                        Domain
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="card"
+              >
+                <div
+                  className="card-header"
+                  onClick={[Function]}
+                  variant="link"
+                >
+                  Courses (Studio)
+                </div>
+                <div
+                  aria-expanded={null}
+                  className="collapse"
+                >
+                  <div
+                    className="card-body"
+                  >
+                    <div
+                      className="flex-column nav card-header-undefined"
+                      onKeyDown={[Function]}
+                    >
+                      <a
+                        aria-current={null}
+                        href="/console/courses/manage"
+                        onClick={[Function]}
+                      >
+                        Manage
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="pr-0 col-md-9"
+          >
+            <div
+              className="w-100 preview-box card"
+            >
+              <div
+                className="domain-settings-container container"
+              >
+                <h2>
+                  Domain Settings
+                </h2>
+                <div
+                  className="row"
+                >
+                  <div
+                    className="domain-settings-description col"
+                  >
+                    <p>
+                      By default, your site is always accessible via an OpenCraft subdomain. Custom domains allow users to access your site via non-OpenCraft domain names. A custom domain increase your monthly OpenCraft bill by €25.
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <ul
+                    className="domain-list"
+                  >
+                    <li
+                      className="list-item color-green"
+                    >
+                      <div
+                        className="d-flex flex-wrap justify-content-between"
+                      >
+                        <div>
+                          <div>
+                            test.opencraft.hosting
+                          </div>
+                          <div
+                            className="domain-type"
+                          >
+                            Default Subdomain
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                  <div>
+                    <button
+                      className="addBtn btn btn-primary btn-lg"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      Add custom domain (€25/month)
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders correctly if external domain is present 1`] = `
+<div
+  className="console-page"
+>
+  <div
+    className="d-flex justify-content-center align-middle email-activation-alert"
+  >
+    <i
+      className="alert-icon fas fa-exclamation-triangle fa-xs"
+    />
+    One of your email addresses is pending confirmation. Please confirm it to begin managing your Open edX instance.
+  </div>
+  <div
+    className="new-console-page-container"
+  >
+    <div
+      className="new-console-page-content row"
+    >
+      <div
+        className="pr-4 pl-0 container-fluid"
+      >
+        <div
+          className="justify-content-center m-0 row"
+        >
+          <div
+            className="p-0 m-0 col-md-3"
+          >
+            <div
+              className="new-customization-menu accordion"
+            >
+              <div
+                className="card"
+              >
+                <div
+                  className="card-header"
+                  onClick={[Function]}
+                  variant="link"
+                >
+                  Theme
+                </div>
+                <div
+                  aria-expanded={null}
+                  className="collapse show"
+                >
+                  <div
+                    className="card-body"
+                  >
+                    <div
+                      className="flex-column nav card-header-undefined"
+                      onKeyDown={[Function]}
+                    >
+                      <a
+                        aria-current={null}
+                        href="/console/theming/preview-and-colors"
+                        onClick={[Function]}
+                      >
+                        Colors
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/logos"
+                        onClick={[Function]}
+                      >
+                        Logos
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/buttons"
+                        onClick={[Function]}
+                      >
+                        Buttons
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/navigation"
+                        onClick={[Function]}
+                      >
+                        Navigation
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/footer"
+                        onClick={[Function]}
+                      >
+                        Footer
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/theming/hero"
+                        onClick={[Function]}
+                      >
+                        Hero
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="card"
+              >
+                <div
+                  className="card-header"
+                  onClick={[Function]}
+                  variant="link"
+                >
+                  Custom Pages
+                </div>
+                <div
+                  aria-expanded={null}
+                  className="collapse"
+                >
+                  <div
+                    className="card-body"
+                  >
+                    <div
+                      className="flex-column nav card-header-undefined"
+                      onKeyDown={[Function]}
+                    >
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/about"
+                        onClick={[Function]}
+                      >
+                        About
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/contact"
+                        onClick={[Function]}
+                      >
+                        Contact
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/donate"
+                        onClick={[Function]}
+                      >
+                        Donate
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/tos"
+                        onClick={[Function]}
+                      >
+                        Terms of Service
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/honor"
+                        onClick={[Function]}
+                      >
+                        Honor Code
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/custom-pages/privacy"
+                        onClick={[Function]}
+                      >
+                        Privacy Policy
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="card"
+              >
+                <div
+                  className="card-header"
+                  onClick={[Function]}
+                  variant="link"
+                >
+                  Instance Settings
+                </div>
+                <div
+                  aria-expanded={null}
+                  className="collapse"
+                >
+                  <div
+                    className="card-body"
+                  >
+                    <div
+                      className="flex-column nav card-header-undefined"
+                      onKeyDown={[Function]}
+                    >
+                      <a
+                        aria-current={null}
+                        href="/console/settings/general"
+                        onClick={[Function]}
+                      >
+                        General
+                      </a>
+                      <a
+                        aria-current={null}
+                        href="/console/settings/domain"
+                        onClick={[Function]}
+                      >
+                        Domain
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="card"
+              >
+                <div
+                  className="card-header"
+                  onClick={[Function]}
+                  variant="link"
+                >
+                  Courses (Studio)
+                </div>
+                <div
+                  aria-expanded={null}
+                  className="collapse"
+                >
+                  <div
+                    className="card-body"
+                  >
+                    <div
+                      className="flex-column nav card-header-undefined"
+                      onKeyDown={[Function]}
+                    >
+                      <a
+                        aria-current={null}
+                        href="/console/courses/manage"
+                        onClick={[Function]}
+                      >
+                        Manage
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="pr-0 col-md-9"
+          >
+            <div
+              className="w-100 preview-box card"
+            >
+              <div
+                className="domain-settings-container container"
+              >
+                <h2>
+                  Domain Settings
+                </h2>
+                <div
+                  className="row"
+                >
+                  <div
+                    className="domain-settings-description col"
+                  >
+                    <p>
+                      By default, your site is always accessible via an OpenCraft subdomain. Custom domains allow users to access your site via non-OpenCraft domain names. A custom domain increase your monthly OpenCraft bill by €25.
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <ul
+                    className="domain-list"
+                  >
+                    <li
+                      className="list-item color-green"
+                    >
+                      <div
+                        className="d-flex flex-wrap justify-content-between"
+                      >
+                        <div>
+                          <div>
+                            test.opencraft.hosting
+                          </div>
+                          <div
+                            className="domain-type"
+                          >
+                            Default Subdomain
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                  <hr />
+                  <ul
+                    className="domain-list"
+                  >
+                    <li
+                      className="list-item color-green"
+                    >
+                      <div
+                        className="d-flex flex-wrap justify-content-between"
+                      >
+                        <div>
+                          <div>
+                            example.com
+                          </div>
+                          <div
+                            className="domain-type"
+                          >
+                            Primary Domain
+                          </div>
+                        </div>
+                        <div
+                          className="d-flex flex-column align-items-center justify-content-center dropdown"
+                          onKeyDown={[Function]}
+                        >
+                          <button
+                            className="options-dropdown-toggle d-flex flex-row"
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Options
+                            </span>
+                            <i
+                              className="dropdown-toggle-caret fas fa-angle-down"
+                            />
+                          </button>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/frontend/src/console/components/DomainSettings/displayMessages.ts b/frontend/src/console/components/DomainSettings/displayMessages.ts
new file mode 100644
index 000000000..0dd2422d2
--- /dev/null
+++ b/frontend/src/console/components/DomainSettings/displayMessages.ts
@@ -0,0 +1,15 @@
+const messages = {
+  title: {
+    defaultMessage: 'Domain Settings',
+    description: 'Title of the page'
+  },
+  description: {
+    defaultMessage:
+      'By default, your site is always accessible via an OpenCraft subdomain.' +
+      ' Custom domains allow users to access your site via non-OpenCraft domain names.' +
+      ' A custom domain increase your monthly OpenCraft bill by €25.',
+    description: 'Page Explanation'
+  }
+};
+
+export default messages;
diff --git a/frontend/src/console/components/DomainSettings/index.ts b/frontend/src/console/components/DomainSettings/index.ts
new file mode 100644
index 000000000..85b9ea1f9
--- /dev/null
+++ b/frontend/src/console/components/DomainSettings/index.ts
@@ -0,0 +1 @@
+export * from './DomainSettings';
diff --git a/frontend/src/console/components/DomainSettings/styles.scss b/frontend/src/console/components/DomainSettings/styles.scss
new file mode 100644
index 000000000..202422a62
--- /dev/null
+++ b/frontend/src/console/components/DomainSettings/styles.scss
@@ -0,0 +1,64 @@
+@import "~styles/theme";
+
+.domain-settings-container {
+  font-family: $chivo-font;
+  padding: 45px;
+
+  .domain-settings-description {
+    color: $dark-2;
+    font-size: 16px;
+    max-width: 716px;
+  }
+
+  h2 {
+    color: $dark-1;
+    font-size: 30px;
+    text-align: left;
+    font-weight: 600;
+    font-family: $playfair-font;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .addBtn {
+    font-size: 14px;
+  }
+}
+
+.add-domain-modal-header {
+  display: block;
+  position: absolute;
+  right: 0px;
+  border: none;
+  cursor: pointer;
+  z-index: 10;
+  padding-right: 25px;
+}
+
+.add-domain-modal {
+  padding: 10px;
+
+  .add-domain-modal-description {
+    color: #797979;
+    font-size: 16px;
+    max-width: 716px
+  }
+
+  h2 {
+    color: #000000;
+    font-size: 30px;
+    text-align: left;
+    font-weight: 600;
+    font-family: $playfair-font;
+  }
+
+  .verify-btn {
+    margin-right: 0.375rem;
+  }
+}
+
+.modal-content {
+  border-radius:4px;
+}
\ No newline at end of file
diff --git a/frontend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap b/frontend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap
index 6d585ca38..53d6e3a73 100644
--- a/frontend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap
+++ b/frontend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap
@@ -229,11 +229,9 @@ exports[`renders without crashing 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap b/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap
index 8d34e3839..513dc6157 100644
--- a/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap
+++ b/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap
@@ -241,11 +241,9 @@ exports[`renders without crashing 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap b/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap
index 8d34e3839..513dc6157 100644
--- a/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap
+++ b/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap
@@ -241,11 +241,9 @@ exports[`renders without crashing 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap b/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap
index 8d34e3839..513dc6157 100644
--- a/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap
+++ b/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap
@@ -241,11 +241,9 @@ exports[`renders without crashing 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap b/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap
index 418238297..731cb780f 100644
--- a/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap
+++ b/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap
@@ -205,11 +205,9 @@ exports[`Theme preview and colors page Render theme settings page when instance
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
@@ -478,11 +476,9 @@ exports[`Theme preview and colors page Render theme settings page with theme set
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
@@ -1278,11 +1274,9 @@ exports[`Theme preview and colors page Render theme settings page with theme set
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
@@ -2114,11 +2108,9 @@ exports[`Theme preview and colors page renders without crashing 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/console/components/index.ts b/frontend/src/console/components/index.ts
index 53e3c59b1..660657d5b 100644
--- a/frontend/src/console/components/index.ts
+++ b/frontend/src/console/components/index.ts
@@ -43,3 +43,9 @@ export * from './ButtonStyles';
 export * from './CourseOutlinePreview';
 
 export * from './CustomizableCourseTab';
+
+export * from './DomainSettings';
+
+export * from './DomainItem';
+
+export * from './AddDomainModalButton';
diff --git a/frontend/src/console/models.ts b/frontend/src/console/models.ts
index 760276c73..96aae37f6 100644
--- a/frontend/src/console/models.ts
+++ b/frontend/src/console/models.ts
@@ -2,7 +2,8 @@ import {
   OpenEdXInstanceDeploymentStatusStatusEnum,
   OpenEdXInstanceDeploymentStatusDeploymentTypeEnum,
   StaticContentOverrides,
-  ThemeSchema
+  ThemeSchema,
+  OpenEdXInstanceConfigUpdateDnsConfigurationStateEnum
 } from 'ocim-client';
 
 export interface InstanceSettingsModel {
@@ -20,6 +21,8 @@ export interface InstanceSettingsModel {
   logo?: string;
   favicon?: string;
   heroCoverImage: null | string;
+  externalDomain?: string;
+  dnsConfigurationState?: OpenEdXInstanceConfigUpdateDnsConfigurationStateEnum;
 }
 
 export interface DeploymentNotificationModel {
diff --git a/frontend/src/global/constants.ts b/frontend/src/global/constants.ts
index 9ee44c588..36f09386e 100644
--- a/frontend/src/global/constants.ts
+++ b/frontend/src/global/constants.ts
@@ -33,6 +33,9 @@ export const MATOMO_MY_DOMAIN = process.env.REACT_APP_MATOMO_MY_DOMAIN || '';
 export const MATOMO_ALIAS_DOMAIN =
   process.env.REACT_APP_MATOMO_ALIAS_DOMAIN || '';
 
+export const EXTERNAL_DOMAIN_CNAME_VALUE =
+  process.env.EXTERNAL_DOMAIN_CNAME_VALUE || 'haproxy.net.opencraft.hosting';
+
 export interface StringIndexedArray {
   [key: string]: any;
 }
@@ -65,6 +68,7 @@ export const ROUTES = {
     THEME_NAVIGATION: '/console/theming/navigation',
     THEME_FOOTER: '/console/theming/footer',
     INSTANCE_SETTINGS_GENERAL: '/console/settings/general',
+    INSTANCE_SETTINGS_DOMAIN: '/console/settings/domain',
     HERO: '/console/theming/hero',
     COURSES: '/console/courses/manage'
   },
diff --git a/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap b/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap
index 6d585ca38..53d6e3a73 100644
--- a/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap
+++ b/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap
@@ -229,11 +229,9 @@ exports[`renders without crashing 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/newConsole/components/newConsolePage/__snapshots__/ConsolePage.spec.tsx.snap b/frontend/src/newConsole/components/newConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
index 12ae5bb06..416d31c17 100644
--- a/frontend/src/newConsole/components/newConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
+++ b/frontend/src/newConsole/components/newConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
@@ -337,11 +337,9 @@ exports[`Console Page Correctly renders loading page 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
@@ -634,11 +632,9 @@ exports[`Console Page Correctly renders page with data 1`] = `
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
@@ -887,11 +883,9 @@ exports[`Console Page Correctly renders page with email not verified alert 1`] =
                         General
                       </a>
                       <a
-                        aria-current="page"
-                        className="disabled active"
-                        href="/"
+                        aria-current={null}
+                        href="/console/settings/domain"
                         onClick={[Function]}
-                        style={Object {}}
                       >
                         Domain
                       </a>
diff --git a/frontend/src/newConsole/components/newCustomizationSideMenu/CustomizationSideMenu.tsx b/frontend/src/newConsole/components/newCustomizationSideMenu/CustomizationSideMenu.tsx
index 3fe451110..1cdc2ddc9 100644
--- a/frontend/src/newConsole/components/newCustomizationSideMenu/CustomizationSideMenu.tsx
+++ b/frontend/src/newConsole/components/newCustomizationSideMenu/CustomizationSideMenu.tsx
@@ -93,14 +93,7 @@ export const CustomizationSideMenu: React.FC = () => {
               <NavLink exact to={ROUTES.Console.INSTANCE_SETTINGS_GENERAL}>
                 <WrappedMessage messages={messages} id="linkGeneral" />
               </NavLink>
-              <NavLink
-                exact
-                to=""
-                className="disabled"
-                onClick={e => {
-                  e.preventDefault();
-                }}
-              >
+              <NavLink exact to={ROUTES.Console.INSTANCE_SETTINGS_DOMAIN}>
                 <WrappedMessage messages={messages} id="linkDomain" />
               </NavLink>
             </Nav>
diff --git a/frontend/src/newConsole/components/newCustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap b/frontend/src/newConsole/components/newCustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
index 64dc63cad..d8bb26e67 100644
--- a/frontend/src/newConsole/components/newCustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
+++ b/frontend/src/newConsole/components/newCustomizationSideMenu/__snapshots__/CustomizationSideMenu.spec.tsx.snap
@@ -167,11 +167,9 @@ exports[`Custom Side Menu Page Renders with correct accordion expanded, and with
             General
           </a>
           <a
-            aria-current="page"
-            className="disabled active"
-            href="/"
+            aria-current={null}
+            href="/console/settings/domain"
             onClick={[Function]}
-            style={Object {}}
           >
             Domain
           </a>
diff --git a/frontend/src/routes/console.tsx b/frontend/src/routes/console.tsx
index 12ed214f8..eaa4176dd 100644
--- a/frontend/src/routes/console.tsx
+++ b/frontend/src/routes/console.tsx
@@ -6,7 +6,8 @@ import {
   InstanceSettings,
   NoticeBoard,
   CustomPages,
-  CoursesManage
+  CoursesManage,
+  DomainSettings
 } from 'console/components';
 import {
   ButtonsCustomization,
@@ -26,6 +27,10 @@ export const ConsoleRoutes = () => {
         path={ROUTES.Console.INSTANCE_SETTINGS_GENERAL}
         component={InstanceSettings}
       />
+      <PrivateRoute
+        path={ROUTES.Console.INSTANCE_SETTINGS_DOMAIN}
+        component={DomainSettings}
+      />
       <PrivateRoute
         path={ROUTES.Console.NOTICE_BOARD}
         component={NoticeBoard}
diff --git a/frontend/src/styles/_theme.scss b/frontend/src/styles/_theme.scss
index a78c02233..c4132fd86 100644
--- a/frontend/src/styles/_theme.scss
+++ b/frontend/src/styles/_theme.scss
@@ -9,11 +9,18 @@ $light-blue-2: #b6cdd7;
 $light-blue-3: #e2ebef;
 $console-bg: #f0f5f7;
 $light-gray: #f4f6f7;
+$green: #239000;
+$link-blue: #1a6ebb;
 
 $alert-red: #ffe6e6;
 $alert-red-2: #fdc7c7;
+$alert-red-3: #ca0c1b;
 $alert-yellow-1: #fff3cd;
 $alert-yellow-2: #856404;
+$alert-yellow-3: #f6bc02;
+
+$dark-1: #1e4c59;
+$dark-2: #0f1f24;
 
 $theme-colors: (
   "primary": $primary-1,
diff --git a/registration/api/v2/serializers.py b/registration/api/v2/serializers.py
index ea292213c..8c5cfd5fd 100644
--- a/registration/api/v2/serializers.py
+++ b/registration/api/v2/serializers.py
@@ -371,10 +371,11 @@ def validate_external_domain(self, value):
         """
         Prevent users from registering with an external domain which was or currently in use.
         """
+        initial_domain = self.initial_data.get("external_domain")
         is_new_instance = self.instance is None
-        is_changed = not is_new_instance and self.instance.external_domain != self.initial_data.get("external_domain")
+        is_changed = not is_new_instance and self.instance.external_domain != initial_domain
 
-        if is_new_instance or is_changed:
+        if (is_new_instance or is_changed) and initial_domain is not None:
             validate_available_external_domain(value)
 
         return value
@@ -423,7 +424,8 @@ class Meta:
             "hero_cover_image",
             "draft_static_content_overrides",
             "static_pages_enabled",
-            "is_email_verified"
+            "is_email_verified",
+            "dns_configuration_state"
         )
         read_only_fields = [
             "logo",