diff --git a/ui/src/alerting/components/AlertingIndex.scss b/ui/src/alerting/components/AlertingIndex.scss
index 40a8cec2c6c..143ca7d8987 100644
--- a/ui/src/alerting/components/AlertingIndex.scss
+++ b/ui/src/alerting/components/AlertingIndex.scss
@@ -30,7 +30,7 @@
 */
 
 .alerting-first-time {
-  border: $ix-border solid $c-ocean;
+  border: $ix-border solid $c-sapphire;
 
   h1,
   h5 {
@@ -43,9 +43,9 @@
   }
 
   h5 {
-    margin-bottom: 0;
     line-height: 1.5em;
     font-weight: 500;
+    margin-bottom: 1.5em;
 
     strong {
       font-weight: 900;
diff --git a/ui/src/alerting/components/CheckCards.tsx b/ui/src/alerting/components/CheckCards.tsx
index 3dcbf3d9e62..83ff90eb94d 100644
--- a/ui/src/alerting/components/CheckCards.tsx
+++ b/ui/src/alerting/components/CheckCards.tsx
@@ -3,7 +3,15 @@ import React, {FunctionComponent} from 'react'
 
 //Components
 import CheckCard from 'src/alerting/components/CheckCard'
-import {EmptyState, ResourceList, Panel, Gradients} from '@influxdata/clockface'
+import {
+  EmptyState,
+  ResourceList,
+  Panel,
+  Gradients,
+  Button,
+  IconFont,
+  ComponentColor,
+} from '@influxdata/clockface'
 
 // Types
 import {Check} from 'src/types'
@@ -12,18 +20,23 @@ import {ComponentSize} from '@influxdata/clockface'
 interface Props {
   checks: Check[]
   showFirstTimeWidget: boolean
+  onCreateCheck: () => void
 }
 
 const CheckCards: FunctionComponent<Props> = ({
   checks,
   showFirstTimeWidget,
+  onCreateCheck,
 }) => {
   return (
     <>
       <ResourceList>
         <ResourceList.Body
           emptyState={
-            <EmptyChecksList showFirstTimeWidget={showFirstTimeWidget} />
+            <EmptyChecksList
+              showFirstTimeWidget={showFirstTimeWidget}
+              onCreateCheck={onCreateCheck}
+            />
           }
         >
           {checks.map(check => (
@@ -37,15 +50,17 @@ const CheckCards: FunctionComponent<Props> = ({
 
 interface EmptyProps {
   showFirstTimeWidget: boolean
+  onCreateCheck: () => void
 }
 
 const EmptyChecksList: FunctionComponent<EmptyProps> = ({
   showFirstTimeWidget,
+  onCreateCheck,
 }) => {
   if (showFirstTimeWidget) {
     return (
       <Panel
-        gradient={Gradients.GundamPilot}
+        gradient={Gradients.PolarExpress}
         size={ComponentSize.Large}
         className="alerting-first-time"
       >
@@ -58,8 +73,15 @@ const EmptyChecksList: FunctionComponent<EmptyProps> = ({
           <h5>
             Welcome to our new Monitoring & Alerting feature!
             <br />
-            Try creating a <strong>Check</strong> to get started
+            To get started try creating a Check:
           </h5>
+          <Button
+            size={ComponentSize.Medium}
+            color={ComponentColor.Primary}
+            onClick={onCreateCheck}
+            text="Create a Check"
+            icon={IconFont.Plus}
+          />
         </Panel.Body>
       </Panel>
     )
diff --git a/ui/src/alerting/components/ChecksColumn.tsx b/ui/src/alerting/components/ChecksColumn.tsx
index fa230e8c012..16f89fba72a 100644
--- a/ui/src/alerting/components/ChecksColumn.tsx
+++ b/ui/src/alerting/components/ChecksColumn.tsx
@@ -65,6 +65,7 @@ const ChecksColumn: FunctionComponent<Props> = ({
       <CheckCards
         checks={checks}
         showFirstTimeWidget={noAlertingResourcesExist}
+        onCreateCheck={handleClick}
       />
     </AlertsColumnHeader>
   )
diff --git a/ui/src/alerting/components/builder/AlertBuilder.scss b/ui/src/alerting/components/builder/AlertBuilder.scss
index 81ef581382c..c9a83b6695c 100644
--- a/ui/src/alerting/components/builder/AlertBuilder.scss
+++ b/ui/src/alerting/components/builder/AlertBuilder.scss
@@ -24,7 +24,7 @@
     height: auto;
   }
   textarea {
-    height: 180px;
+    height: 90px;
   }
 }
 
diff --git a/ui/src/alerting/components/builder/ThresholdConditions.tsx b/ui/src/alerting/components/builder/ThresholdConditions.tsx
index b7d4e574af0..f52f6fb83e7 100644
--- a/ui/src/alerting/components/builder/ThresholdConditions.tsx
+++ b/ui/src/alerting/components/builder/ThresholdConditions.tsx
@@ -20,10 +20,10 @@ const ThresholdConditions: FC<Props> = ({check}) => {
   }
   return (
     <>
-      <ThresholdCondition level="OK" threshold={thresholds['OK']} />
-      <ThresholdCondition level="INFO" threshold={thresholds['INFO']} />
-      <ThresholdCondition level="WARN" threshold={thresholds['WARN']} />
       <ThresholdCondition level="CRIT" threshold={thresholds['CRIT']} />
+      <ThresholdCondition level="WARN" threshold={thresholds['WARN']} />
+      <ThresholdCondition level="INFO" threshold={thresholds['INFO']} />
+      <ThresholdCondition level="OK" threshold={thresholds['OK']} />
     </>
   )
 }
diff --git a/ui/src/alerting/components/endpoints/AuthMethodTypeDropdown.tsx b/ui/src/alerting/components/endpoints/AuthMethodTypeDropdown.tsx
index 18af4466d82..40b11d8b8cc 100644
--- a/ui/src/alerting/components/endpoints/AuthMethodTypeDropdown.tsx
+++ b/ui/src/alerting/components/endpoints/AuthMethodTypeDropdown.tsx
@@ -63,7 +63,6 @@ const AuthMethodTypeDropdown: FC<Props> = ({selectedType, onSelectType}) => {
     <Dropdown
       button={button}
       menu={menu}
-      widthPixels={160}
       testID="http-authMethod-change--dropdown"
     />
   )
diff --git a/ui/src/alerting/components/endpoints/EditEndpointOverlay.tsx b/ui/src/alerting/components/endpoints/EditEndpointOverlay.tsx
index 25d835fabdc..eef417cbd16 100644
--- a/ui/src/alerting/components/endpoints/EditEndpointOverlay.tsx
+++ b/ui/src/alerting/components/endpoints/EditEndpointOverlay.tsx
@@ -52,6 +52,7 @@ const EditEndpointOverlay: FC<Props> = ({
           <Overlay.Body />
           <EndpointOverlayContents
             onSave={handleEditEndpoint}
+            onCancel={handleDismiss}
             saveButtonText="Edit Notification Endpoint"
           />
         </Overlay.Container>
diff --git a/ui/src/alerting/components/endpoints/EndpointOptionsHTTP.tsx b/ui/src/alerting/components/endpoints/EndpointOptionsHTTP.tsx
index 87f4648f33d..f079c6b0b7c 100644
--- a/ui/src/alerting/components/endpoints/EndpointOptionsHTTP.tsx
+++ b/ui/src/alerting/components/endpoints/EndpointOptionsHTTP.tsx
@@ -2,7 +2,15 @@
 import React, {FC, ChangeEvent} from 'react'
 
 // Components
-import {Input, FormElement, InputType, TextArea} from '@influxdata/clockface'
+import {
+  Input,
+  FormElement,
+  InputType,
+  TextArea,
+  Panel,
+  Grid,
+  Columns,
+} from '@influxdata/clockface'
 import MethodTypeDropdown from 'src/alerting/components/endpoints/MethodTypeDropdown'
 import AuthMethodTypeDropdown from 'src/alerting/components/endpoints/AuthMethodTypeDropdown'
 
@@ -33,66 +41,95 @@ const EndpointOptionsHTTP: FC<Props> = ({
   onChangeParameter,
 }) => {
   return (
-    <>
-      <FormElement label="URL">
-        <Input name="url" value={url} onChange={onChange} required={true} />
-      </FormElement>
-      <FormElement label="HTTP method">
-        <MethodTypeDropdown
-          onSelectType={onChangeParameter('method')}
-          selectedType={method}
-        />
-      </FormElement>
-      <FormElement label="auth method">
-        <AuthMethodTypeDropdown
-          onSelectType={onChangeParameter('authMethod')}
-          selectedType={authMethod}
-        />
-      </FormElement>
-      {authMethod === 'bearer' && (
-        <FormElement label="Token">
-          <Input
-            name="token"
-            value={token}
-            onChange={onChange}
-            type={InputType.Password}
-          />
-        </FormElement>
-      )}
-      {authMethod === 'basic' && (
-        <>
-          <FormElement label="username">
-            <Input
-              name="username"
-              value={username}
-              onChange={onChange}
-              type={
-                username && username.includes('secret: ')
-                  ? InputType.Password
-                  : InputType.Text
-              }
-            />
-          </FormElement>
-          <FormElement label="password">
-            <Input
-              name="password"
-              value={password}
-              type={InputType.Password}
-              onChange={onChange}
-            />
-          </FormElement>
-        </>
-      )}
-      <FormElement label="Content Template">
-        <TextArea
-          rows={2}
-          className="endpoint-description--textarea"
-          name="contentTemplate"
-          value={contentTemplate}
-          onChange={onChange}
-        />
-      </FormElement>
-    </>
+    <Panel>
+      <Panel.Header>
+        <Panel.Title>HTTP Options</Panel.Title>
+      </Panel.Header>
+      <Panel.Body>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column widthSM={Columns.Six}>
+              <FormElement label="HTTP Method">
+                <MethodTypeDropdown
+                  onSelectType={onChangeParameter('method')}
+                  selectedType={method}
+                />
+              </FormElement>
+            </Grid.Column>
+            <Grid.Column widthSM={Columns.Six}>
+              <FormElement label="Auth Method">
+                <AuthMethodTypeDropdown
+                  onSelectType={onChangeParameter('authMethod')}
+                  selectedType={authMethod}
+                />
+              </FormElement>
+            </Grid.Column>
+            <Grid.Column widthXS={Columns.Twelve}>
+              <FormElement label="URL">
+                <Input
+                  name="url"
+                  value={url}
+                  onChange={onChange}
+                  required={true}
+                />
+              </FormElement>
+            </Grid.Column>
+
+            {authMethod === 'bearer' && (
+              <Grid.Column widthXS={Columns.Twelve}>
+                <FormElement label="Token">
+                  <Input
+                    name="token"
+                    value={token}
+                    onChange={onChange}
+                    type={InputType.Password}
+                  />
+                </FormElement>
+              </Grid.Column>
+            )}
+            {authMethod === 'basic' && (
+              <>
+                <Grid.Column widthSM={Columns.Six}>
+                  <FormElement label="Username">
+                    <Input
+                      name="username"
+                      value={username}
+                      onChange={onChange}
+                      type={
+                        username && username.includes('secret: ')
+                          ? InputType.Password
+                          : InputType.Text
+                      }
+                    />
+                  </FormElement>
+                </Grid.Column>
+                <Grid.Column widthSM={Columns.Six}>
+                  <FormElement label="Password">
+                    <Input
+                      name="password"
+                      value={password}
+                      type={InputType.Password}
+                      onChange={onChange}
+                    />
+                  </FormElement>
+                </Grid.Column>
+              </>
+            )}
+            <Grid.Column widthXS={Columns.Twelve}>
+              <FormElement label="Content Template">
+                <TextArea
+                  rows={2}
+                  className="endpoint-description--textarea"
+                  name="contentTemplate"
+                  value={contentTemplate}
+                  onChange={onChange}
+                />
+              </FormElement>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Panel.Body>
+    </Panel>
   )
 }
 
diff --git a/ui/src/alerting/components/endpoints/EndpointOptionsPagerDuty.tsx b/ui/src/alerting/components/endpoints/EndpointOptionsPagerDuty.tsx
index 2e76ae29d6e..37225987e64 100644
--- a/ui/src/alerting/components/endpoints/EndpointOptionsPagerDuty.tsx
+++ b/ui/src/alerting/components/endpoints/EndpointOptionsPagerDuty.tsx
@@ -2,7 +2,7 @@
 import React, {FC, ChangeEvent} from 'react'
 
 // Components
-import {Input, FormElement, InputType} from '@influxdata/clockface'
+import {Input, FormElement, InputType, Panel, Grid} from '@influxdata/clockface'
 
 interface Props {
   url: string
@@ -12,25 +12,38 @@ interface Props {
 
 const EndpointOptionsPagerDuty: FC<Props> = ({url, routingKey, onChange}) => {
   return (
-    <>
-      <FormElement label="URL">
-        <Input
-          name="url"
-          value={url}
-          testID="pagerduty-url"
-          onChange={onChange}
-        />
-      </FormElement>
-      <FormElement label="Routing Key">
-        <Input
-          name="routingKey"
-          value={routingKey}
-          testID="pagerduty-routing-key"
-          onChange={onChange}
-          type={InputType.Password}
-        />
-      </FormElement>
-    </>
+    <Panel>
+      <Panel.Header>
+        <Panel.Title>Pagerduty Options</Panel.Title>
+      </Panel.Header>
+      <Panel.Body>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column>
+              <FormElement label="URL">
+                <Input
+                  name="url"
+                  value={url}
+                  testID="pagerduty-url"
+                  onChange={onChange}
+                />
+              </FormElement>
+            </Grid.Column>
+            <Grid.Column>
+              <FormElement label="Routing Key">
+                <Input
+                  name="routingKey"
+                  value={routingKey}
+                  testID="pagerduty-routing-key"
+                  onChange={onChange}
+                  type={InputType.Password}
+                />
+              </FormElement>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Panel.Body>
+    </Panel>
   )
 }
 
diff --git a/ui/src/alerting/components/endpoints/EndpointOptionsSlack.tsx b/ui/src/alerting/components/endpoints/EndpointOptionsSlack.tsx
index 320501bfadd..4d8792971d0 100644
--- a/ui/src/alerting/components/endpoints/EndpointOptionsSlack.tsx
+++ b/ui/src/alerting/components/endpoints/EndpointOptionsSlack.tsx
@@ -2,7 +2,14 @@
 import React, {FC, ChangeEvent} from 'react'
 
 // Components
-import {Input, FormElement, InputType} from '@influxdata/clockface'
+import {
+  Input,
+  FormElement,
+  InputType,
+  Panel,
+  Grid,
+  Columns,
+} from '@influxdata/clockface'
 
 interface Props {
   url: string
@@ -12,20 +19,38 @@ interface Props {
 
 const EndpointOptionsSlack: FC<Props> = ({url, token, onChange}) => {
   return (
-    <>
-      <FormElement label="URL">
-        <Input name="url" value={url} testID="slack-url" onChange={onChange} />
-      </FormElement>
-      <FormElement label="Token">
-        <Input
-          name="token"
-          value={token}
-          testID="slack-token"
-          onChange={onChange}
-          type={InputType.Password}
-        />
-      </FormElement>
-    </>
+    <Panel>
+      <Panel.Header>
+        <Panel.Title>Slack Options</Panel.Title>
+      </Panel.Header>
+      <Panel.Body>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column widthXS={Columns.Twelve}>
+              <FormElement label="URL">
+                <Input
+                  name="url"
+                  value={url}
+                  testID="slack-url"
+                  onChange={onChange}
+                />
+              </FormElement>
+            </Grid.Column>
+            <Grid.Column widthXS={Columns.Twelve}>
+              <FormElement label="Token">
+                <Input
+                  name="token"
+                  value={token}
+                  testID="slack-token"
+                  onChange={onChange}
+                  type={InputType.Password}
+                />
+              </FormElement>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Panel.Body>
+    </Panel>
   )
 }
 
diff --git a/ui/src/alerting/components/endpoints/EndpointOverlay.reducer.ts b/ui/src/alerting/components/endpoints/EndpointOverlay.reducer.ts
index 8b762fb5992..559e6623a88 100644
--- a/ui/src/alerting/components/endpoints/EndpointOverlay.reducer.ts
+++ b/ui/src/alerting/components/endpoints/EndpointOverlay.reducer.ts
@@ -1,8 +1,10 @@
 // Types
 import {NotificationEndpoint} from 'src/types'
+import {DEFAULT_ENDPOINT_URLS} from 'src/alerting/constants'
 
 export type Action =
   | {type: 'UPDATE_ENDPOINT'; endpoint: NotificationEndpoint}
+  | {type: 'UPDATE_ENDPOINT_TYPE'; endpoint: NotificationEndpoint}
   | {type: 'DELETE_ENDPOINT'; endpointID: string}
 
 export type EndpointState = NotificationEndpoint
@@ -13,6 +15,19 @@ export const reducer = (state: EndpointState, action: Action) => {
       const {endpoint} = action
       return {...state, ...endpoint}
     }
+    case 'UPDATE_ENDPOINT_TYPE': {
+      const {endpoint} = action
+
+      if (!endpoint.url || state.type !== endpoint.type) {
+        return {
+          ...state,
+          ...endpoint,
+          url: DEFAULT_ENDPOINT_URLS[endpoint.type],
+        }
+      }
+
+      return {...state, ...endpoint}
+    }
     case 'DELETE_ENDPOINT': {
       return state
     }
diff --git a/ui/src/alerting/components/endpoints/EndpointOverlay.scss b/ui/src/alerting/components/endpoints/EndpointOverlay.scss
deleted file mode 100644
index 2e82a21c42e..00000000000
--- a/ui/src/alerting/components/endpoints/EndpointOverlay.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.endpoint-overlay-footer--error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: $c-fire;
-  font-size: $ix-text-base;
-  font-weight: 600;
-  margin: $ix-marg-c 0;
-}
diff --git a/ui/src/alerting/components/endpoints/EndpointOverlayContents.tsx b/ui/src/alerting/components/endpoints/EndpointOverlayContents.tsx
index 5eaeb22a57c..ab743fa05c3 100644
--- a/ui/src/alerting/components/endpoints/EndpointOverlayContents.tsx
+++ b/ui/src/alerting/components/endpoints/EndpointOverlayContents.tsx
@@ -1,8 +1,18 @@
 // Libraries
-import React, {FC, ChangeEvent} from 'react'
+import React, {FC, ChangeEvent, useState} from 'react'
 
 // Components
-import {Grid, Form, Panel, Input, TextArea} from '@influxdata/clockface'
+import {
+  Grid,
+  Form,
+  Input,
+  TextArea,
+  Overlay,
+  Columns,
+  Alert,
+  ComponentColor,
+  IconFont,
+} from '@influxdata/clockface'
 import EndpointOptions from 'src/alerting/components/endpoints/EndpointOptions'
 import EndpointTypeDropdown from 'src/alerting/components/endpoints/EndpointTypeDropdown'
 import EndpointOverlayFooter from 'src/alerting/components/endpoints/EndpointOverlayFooter'
@@ -15,11 +25,18 @@ import {NotificationEndpointType, NotificationEndpoint} from 'src/types'
 
 interface Props {
   onSave: (endpoint: NotificationEndpoint) => Promise<void>
+  onCancel: () => void
   saveButtonText: string
 }
 
-const EndpointOverlayContents: FC<Props> = ({onSave, saveButtonText}) => {
+const EndpointOverlayContents: FC<Props> = ({
+  onSave,
+  saveButtonText,
+  onCancel,
+}) => {
   const [endpoint, dispatch] = useEndpointReducer()
+  const [errorMessage, setErrorMessage] = useState<string>(null)
+
   const handleChange = (
     e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -39,58 +56,81 @@ const EndpointOverlayContents: FC<Props> = ({onSave, saveButtonText}) => {
 
   const handleSelectType = (type: NotificationEndpointType) => {
     dispatch({
-      type: 'UPDATE_ENDPOINT',
+      type: 'UPDATE_ENDPOINT_TYPE',
       endpoint: {...endpoint, type},
     })
   }
 
   return (
-    <Grid>
-      <Form>
-        <Grid.Row>
-          <Grid.Column>
-            <Panel>
-              <Panel.Body>
-                <Form.Element label="Name">
-                  <Input
-                    testID="endpoint-name--input"
-                    placeholder="Name this endpoint"
-                    value={endpoint.name}
-                    name="name"
-                    onChange={handleChange}
-                  />
-                </Form.Element>
-                <Form.Element label="Description">
-                  <TextArea
-                    rows={1}
-                    className="endpoint-description--textarea"
-                    testID="endpoint-description--textarea"
-                    name="description"
-                    value={endpoint.description}
-                    onChange={handleChange}
-                  />
-                </Form.Element>
-                <Form.Element label="Destination">
-                  <EndpointTypeDropdown
-                    onSelectType={handleSelectType}
-                    selectedType={endpoint.type}
-                  />
-                </Form.Element>
-                <EndpointOptions
-                  endpoint={endpoint}
+    <Form>
+      <Overlay.Body>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column widthSM={Columns.Six}>
+              <Form.Element label="Destination">
+                <EndpointTypeDropdown
+                  onSelectType={handleSelectType}
+                  selectedType={endpoint.type}
+                />
+              </Form.Element>
+            </Grid.Column>
+            <Grid.Column widthSM={Columns.Six}>
+              <Form.Element label="Name">
+                <Input
+                  testID="endpoint-name--input"
+                  placeholder="Name this endpoint"
+                  value={endpoint.name}
+                  name="name"
                   onChange={handleChange}
-                  onChangeParameter={handleChangeParameter}
                 />
-                <EndpointOverlayFooter
-                  onSave={onSave}
-                  saveButtonText={saveButtonText}
+              </Form.Element>
+            </Grid.Column>
+            <Grid.Column widthSM={Columns.Twelve}>
+              <Form.Element label="Description">
+                <TextArea
+                  rows={1}
+                  className="endpoint-description--textarea"
+                  testID="endpoint-description--textarea"
+                  name="description"
+                  value={endpoint.description}
+                  onChange={handleChange}
                 />
-              </Panel.Body>
-            </Panel>
-          </Grid.Column>
-        </Grid.Row>
-      </Form>
-    </Grid>
+              </Form.Element>
+            </Grid.Column>
+            <Grid.Column widthSM={Columns.Twelve}>
+              <EndpointOptions
+                endpoint={endpoint}
+                onChange={handleChange}
+                onChangeParameter={handleChangeParameter}
+              />
+            </Grid.Column>
+            <Grid.Column
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                minHeight: '43px',
+              }}
+            >
+              {errorMessage && (
+                <Alert
+                  color={ComponentColor.Danger}
+                  icon={IconFont.AlertTriangle}
+                  style={{width: 'auto', marginTop: '8px'}}
+                >
+                  {errorMessage}
+                </Alert>
+              )}
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Overlay.Body>
+      <EndpointOverlayFooter
+        onSave={onSave}
+        onCancel={onCancel}
+        saveButtonText={saveButtonText}
+        onSetErrorMessage={setErrorMessage}
+      />
+    </Form>
   )
 }
 
diff --git a/ui/src/alerting/components/endpoints/EndpointOverlayFooter.tsx b/ui/src/alerting/components/endpoints/EndpointOverlayFooter.tsx
index 1d98cfb5f20..fc13771a4f0 100644
--- a/ui/src/alerting/components/endpoints/EndpointOverlayFooter.tsx
+++ b/ui/src/alerting/components/endpoints/EndpointOverlayFooter.tsx
@@ -3,12 +3,10 @@ import React, {useState, FC} from 'react'
 
 // Components
 import {
-  Form,
-  Grid,
   Button,
-  Columns,
   ComponentColor,
   ComponentStatus,
+  Overlay,
 } from '@influxdata/clockface'
 
 // Hooks
@@ -20,13 +18,19 @@ import {NotificationEndpoint, RemoteDataState} from 'src/types'
 interface Props {
   saveButtonText: string
   onSave: (endpoint: NotificationEndpoint) => Promise<void>
+  onCancel: () => void
+  onSetErrorMessage: (error: string) => void
 }
 
-const EndpointOverlayFooter: FC<Props> = ({saveButtonText, onSave}) => {
+const EndpointOverlayFooter: FC<Props> = ({
+  saveButtonText,
+  onSave,
+  onCancel,
+  onSetErrorMessage,
+}) => {
   const endpoint = useEndpointState()
 
   const [saveStatus, setSaveStatus] = useState(RemoteDataState.NotStarted)
-  const [errorMessage, setErrorMessage] = useState<string>(null)
 
   const handleSave = async () => {
     if (saveStatus === RemoteDataState.Loading) {
@@ -35,12 +39,12 @@ const EndpointOverlayFooter: FC<Props> = ({saveButtonText, onSave}) => {
 
     try {
       setSaveStatus(RemoteDataState.Loading)
-      setErrorMessage(null)
+      onSetErrorMessage(null)
 
       await onSave(endpoint)
     } catch (e) {
       setSaveStatus(RemoteDataState.Error)
-      setErrorMessage(e.message)
+      onSetErrorMessage(e.message)
     }
   }
 
@@ -50,24 +54,20 @@ const EndpointOverlayFooter: FC<Props> = ({saveButtonText, onSave}) => {
       : ComponentStatus.Default
 
   return (
-    <>
-      <Grid.Row>
-        <Grid.Column widthXS={Columns.Twelve}>
-          {errorMessage && (
-            <div className="endpoint-overlay-footer--error">{errorMessage}</div>
-          )}
-          <Form.Footer className="endpoint-overlay-footer">
-            <Button
-              testID="endpoint-save--button"
-              onClick={handleSave}
-              text={saveButtonText}
-              status={buttonStatus}
-              color={ComponentColor.Primary}
-            />
-          </Form.Footer>
-        </Grid.Column>
-      </Grid.Row>
-    </>
+    <Overlay.Footer>
+      <Button
+        testID="endpoint-cancel--button"
+        onClick={onCancel}
+        text="Cancel"
+      />
+      <Button
+        testID="endpoint-save--button"
+        onClick={handleSave}
+        text={saveButtonText}
+        status={buttonStatus}
+        color={ComponentColor.Primary}
+      />
+    </Overlay.Footer>
   )
 }
 
diff --git a/ui/src/alerting/components/endpoints/EndpointTypeDropdown.tsx b/ui/src/alerting/components/endpoints/EndpointTypeDropdown.tsx
index 0902729171e..ca5a478d937 100644
--- a/ui/src/alerting/components/endpoints/EndpointTypeDropdown.tsx
+++ b/ui/src/alerting/components/endpoints/EndpointTypeDropdown.tsx
@@ -60,12 +60,7 @@ const EndpointTypeDropdown: FC<Props> = ({selectedType, onSelectType}) => {
   )
 
   return (
-    <Dropdown
-      button={button}
-      menu={menu}
-      widthPixels={160}
-      testID="endpoint-change--dropdown"
-    />
+    <Dropdown button={button} menu={menu} testID="endpoint-change--dropdown" />
   )
 }
 
diff --git a/ui/src/alerting/components/endpoints/MethodTypeDropdown.tsx b/ui/src/alerting/components/endpoints/MethodTypeDropdown.tsx
index 4ff93edbf43..3c1ab7989f5 100644
--- a/ui/src/alerting/components/endpoints/MethodTypeDropdown.tsx
+++ b/ui/src/alerting/components/endpoints/MethodTypeDropdown.tsx
@@ -18,11 +18,7 @@ interface Props {
   onSelectType: (type: HTTPMethodType) => void
 }
 
-const types: MethodType[] = [
-  {name: 'POST', type: 'POST', id: 'POST'},
-  {name: 'GET', type: 'GET', id: 'GET'},
-  {name: 'PUT', type: 'PUT', id: 'PUT'},
-]
+const types: MethodType[] = [{name: 'POST', type: 'POST', id: 'POST'}]
 
 const MethodTypeDropdown: FC<Props> = ({selectedType, onSelectType}) => {
   const items = types.map(({id, type, name}) => (
@@ -61,7 +57,6 @@ const MethodTypeDropdown: FC<Props> = ({selectedType, onSelectType}) => {
     <Dropdown
       button={button}
       menu={menu}
-      widthPixels={160}
       testID="http-method-change--dropdown"
     />
   )
diff --git a/ui/src/alerting/components/endpoints/NewEndpointOverlay.tsx b/ui/src/alerting/components/endpoints/NewEndpointOverlay.tsx
index 9e485d5cdd1..2aca04da627 100644
--- a/ui/src/alerting/components/endpoints/NewEndpointOverlay.tsx
+++ b/ui/src/alerting/components/endpoints/NewEndpointOverlay.tsx
@@ -38,14 +38,14 @@ const NewRuleOverlay: FC<Props> = ({params, router, onCreateEndpoint}) => {
   return (
     <EndpointOverlayProvider initialState={initialState}>
       <Overlay visible={true}>
-        <Overlay.Container maxWidth={600}>
+        <Overlay.Container maxWidth={666}>
           <Overlay.Header
             title="Create a Notification Endpoint"
             onDismiss={handleDismiss}
           />
-          <Overlay.Body />
           <EndpointOverlayContents
             onSave={handleCreateEndpoint}
+            onCancel={handleDismiss}
             saveButtonText="Create Notification Endpoint"
           />
         </Overlay.Container>
diff --git a/ui/src/alerting/constants/index.ts b/ui/src/alerting/constants/index.ts
index c97fb9d8f10..d0ad2e81d0f 100644
--- a/ui/src/alerting/constants/index.ts
+++ b/ui/src/alerting/constants/index.ts
@@ -132,6 +132,12 @@ export const NEW_TAG_RULE_DRAFT: TagRuleDraft = {
   },
 }
 
+export const DEFAULT_ENDPOINT_URLS = {
+  slack: 'https://slack.com/api/chat.postMessage',
+  pagerduty: 'https://events.pagerduty.com/v2/enqueue',
+  http: 'https://www.example.com/endpoint',
+}
+
 export const NEW_ENDPOINT_DRAFT: NotificationEndpoint = {
   name: 'Name this Endpoint',
   method: 'POST',
@@ -140,7 +146,7 @@ export const NEW_ENDPOINT_DRAFT: NotificationEndpoint = {
   status: 'active',
   type: 'http',
   token: '',
-  url: '',
+  url: DEFAULT_ENDPOINT_URLS['http'],
 }
 
 export const NEW_ENDPOINT_FIXTURES: NotificationEndpoint[] = [
diff --git a/ui/src/alerting/reducers/notifications/endpoints.ts b/ui/src/alerting/reducers/notifications/endpoints.ts
index 6fe1bcf34d7..0faed7a445e 100644
--- a/ui/src/alerting/reducers/notifications/endpoints.ts
+++ b/ui/src/alerting/reducers/notifications/endpoints.ts
@@ -48,6 +48,7 @@ export default (
         draftState.list[index] = endpoint
         return
       }
+
       case 'REMOVE_ENDPOINT': {
         const {endpointID} = action
 
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index d7014da3cdf..949769e6635 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -123,7 +123,6 @@
 @import 'src/alerting/components/LevelTableField.scss';
 @import 'src/alerting/components/SentTableField.scss';
 @import 'src/alerting/components/notifications/RuleOverlayFooter.scss';
-@import 'src/alerting/components/endpoints/EndpointOverlay.scss';
 @import 'src/alerting/components/SearchBar.scss';
 
 // External