diff --git a/src/components/ActiveCallButton/index.js b/src/components/ActiveCallButton/index.js
index 3b1dfa2e2a..30751aa80f 100644
--- a/src/components/ActiveCallButton/index.js
+++ b/src/components/ActiveCallButton/index.js
@@ -10,7 +10,8 @@ export default function ActiveCallButton(props) {
   const buttonClassName = classnames(
     styles.button,
     props.buttonClassName,
-    props.active ? styles.buttonActive : null
+    props.active ? styles.buttonActive : null,
+    props.disabled ? styles.buttonDisabled : null,
   );
   return (
     <div className={className}>
diff --git a/src/components/ActiveCallButton/styles.scss b/src/components/ActiveCallButton/styles.scss
index e9a6b8cc52..8127572a98 100644
--- a/src/components/ActiveCallButton/styles.scss
+++ b/src/components/ActiveCallButton/styles.scss
@@ -16,12 +16,37 @@
   margin-bottom: 2px;
 }
 
-.buttonActive {
-  background: $primary-color;
-}
-
 .buttonTitle {
   @include secondary-font;
   font-size: 12px;
   padding: 5px 0;
 }
+
+.buttonActive {
+  circle {
+    fill: $primary-color;
+    stroke: $primary-color;
+  }
+  path {
+    fill: #ffffff;
+  }
+}
+
+.buttonDisabled {
+  circle {
+    fill: $lightgray;
+    stroke: $gray;
+  }
+  path {
+    fill: $primary-color-highlight-solid;
+  }
+  g {
+    cursor: default;
+
+    &:hover {
+      circle {
+        stroke: $gray;
+      }
+    }
+  }
+}
diff --git a/src/components/ActiveCallPad/i18n/en-US.js b/src/components/ActiveCallPad/i18n/en-US.js
index 6d13fa2999..c48c0601c4 100644
--- a/src/components/ActiveCallPad/i18n/en-US.js
+++ b/src/components/ActiveCallPad/i18n/en-US.js
@@ -3,6 +3,7 @@ export default {
   mute: 'Mute',
   keypad: 'Keypad',
   hold: 'Hold',
+  onHold: 'On Hold',
   park: 'Park',
   stopRecord: 'Stop',
   record: 'Record',
diff --git a/src/components/ActiveCallPad/index.js b/src/components/ActiveCallPad/index.js
index 336f441e3e..9549ac7528 100644
--- a/src/components/ActiveCallPad/index.js
+++ b/src/components/ActiveCallPad/index.js
@@ -53,20 +53,25 @@ export default function ActiveCallPad(props) {
         <ActiveCallButton
           onClick={onHoldClicked}
           className={styles.callButton}
-          title={i18n.getString('hold', props.currentLocale)}
+          title={
+            props.isOnHold ?
+            i18n.getString('onHold', props.currentLocale) :
+            i18n.getString('hold', props.currentLocale)
+          }
           active={props.isOnHold}
           icon={HoldIcon}
         />
       </div>
       <div className={styles.buttonRow}>
         <ActiveCallButton
-          onClick={() => null}
+          onClick={props.isOnHold ? () => {} : () => {}}
           className={styles.callButton}
           title={i18n.getString('park', props.currentLocale)}
           icon={ParkIcon}
+          disabled={props.isOnHold}
         />
         <ActiveCallButton
-          onClick={onRecordClicked}
+          onClick={props.isOnHold ? () => {} : onRecordClicked}
           title={
             props.isOnRecord ?
               i18n.getString('stopRecord', props.currentLocale) :
@@ -75,6 +80,7 @@ export default function ActiveCallPad(props) {
           active={props.isOnRecord}
           className={styles.callButton}
           icon={RecordIcon}
+          disabled={props.isOnHold}
         />
         <ActiveCallButton
           onClick={props.onAdd}
@@ -91,10 +97,11 @@ export default function ActiveCallPad(props) {
           className={styles.callButton}
         />
         <ActiveCallButton
-          onClick={() => null}
+          onClick={props.isOnHold ? () => {} : () => {}}
           title={i18n.getString('flip', props.currentLocale)}
           icon={FlipIcon}
           className={styles.callButton}
+          disabled={props.isOnHold}
         />
       </div>
       <div className={styles.buttonRow}>
diff --git a/src/components/CircleButton/styles.scss b/src/components/CircleButton/styles.scss
index df0d98804a..5c34c2e863 100644
--- a/src/components/CircleButton/styles.scss
+++ b/src/components/CircleButton/styles.scss
@@ -37,7 +37,7 @@
   cursor: pointer;
 
   &:hover {
-    .circle {
+    circle {
       stroke: $primary-color-highlight-solid;
     }
     .noBorder {
diff --git a/src/components/WebphoneAlert/i18n/en-US.js b/src/components/WebphoneAlert/i18n/en-US.js
index d00d185f9a..e8e9dba4cb 100644
--- a/src/components/WebphoneAlert/i18n/en-US.js
+++ b/src/components/WebphoneAlert/i18n/en-US.js
@@ -8,4 +8,5 @@ export default {
   [webphoneErrors.getSipProvisionError]: 'You have no permission to send message.',
   [webphoneErrors.toVoiceMailError]: 'Cannot send call to voicemail due to internal error',
   [webphoneErrors.muteError]: 'Call cannot be muted at the moment.',
+  [webphoneErrors.holdError]: 'Call cannot be hold at the moment.',
 };
diff --git a/src/components/WebphoneAlert/index.js b/src/components/WebphoneAlert/index.js
index bf2de252f4..c50845e5e8 100644
--- a/src/components/WebphoneAlert/index.js
+++ b/src/components/WebphoneAlert/index.js
@@ -22,6 +22,7 @@ WebphoneAlert.handleMessage = ({ message }) => (
   (message === webphoneErrors.webphoneCountOverLimit) ||
   (message === webphoneErrors.notOutboundCallWithoutDL) ||
   (message === webphoneErrors.toVoiceMailError) ||
-  (message === webphoneErrors.muteError)
+  (message === webphoneErrors.muteError) ||
+  (message === webphoneErrors.holdError)
 );