diff --git a/public/index.html b/public/index.html
index f3820be..bf1ff42 100644
--- a/public/index.html
+++ b/public/index.html
@@ -30,7 +30,7 @@
     <title>Tesla</title>
   
     <!-- Sets the status bar style to transparent -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   </head>
diff --git a/src/App.css b/src/App.css
index 1cd6b73..83d8303 100644
--- a/src/App.css
+++ b/src/App.css
@@ -309,6 +309,20 @@ html, body { width:100%;  overflow: hidden; }
   font-weight: 600;
 }
 
+/* .screenTooSmallError {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #343434;
+  z-index: 999999999;
+  border-radius: 3px;
+  color: #d0d0d0;
+  font-size: 16px;
+  text-align: center;
+  line-height: 16px;
+} */
+
 .small-screen-message {
   display: none;
   text-align: center;
@@ -333,7 +347,13 @@ html, body { width:100%;  overflow: hidden; }
     padding: 120px 5px;
     height: 100dvh;
   }
-  
+
+  .screenTooSmallError {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .small-screen-message {
     display: block;
   }
@@ -435,7 +455,6 @@ html, body { width:100%;  overflow: hidden; }
   }
 }
 
-
 /* -------------------- UTILITY CSS -------------------- */
 
 .no-select { 
@@ -445,6 +464,11 @@ html, body { width:100%;  overflow: hidden; }
   -ms-user-select: none;
 }
 
+.ctaBtn {
+  cursor: pointer;
+  box-sizing: content-box;
+}
+
 .ctaBtn:hover {
   transform: scale(1.05);
   filter: brightness(1.1);
diff --git a/src/App.js b/src/App.js
index 301d1de..89b1a33 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ import VolumeControl from './components/VolumeControl/VolumeControl';
 import TemperatureControl from './components/TemperatureControl/TemperatureControl';
 import BatteryStatus from './components/BatteryStatus/BatteryStatus';
 import GearSelect from './components/GearSelect/GearSelect';
+import ErrorScreen from './components/ErrorScreen/ErrorScreen';
 import { useDots } from './utils/dots';
 import './App.css';
 
@@ -322,6 +323,8 @@ function App() {
         {isLoading && <LoadingScreen />}
         <div id="displayBezel" ref={appContentRef} style={{display: isLoading ? 'none' : 'block'}}>
           <div className="displayWrapper">
+          {/* <div className="screenTooSmallError">I'm sorry Dave, I'm afraid I can't do that{dots}</div> */}
+            <ErrorScreen />
             <PanelGroup autoSaveId="example" direction="horizontal" className="horizontalPanelGroup">
               <Panel 
                 defaultSize={DEFAULT_LEFT_PANEL_SIZE}
@@ -401,7 +404,6 @@ function App() {
           </div>
         </div>
         <div className="small-screen-message">
-          I'm sorry Dave, I'm afraid I can't do that{dots}<br />
           Best viewed on a larger screen.<br />
           <span>For now, try turning your phone sideways.<br />
           At least until I tweak the mobile styles.</span>
diff --git a/src/components/ErrorScreen/ErrorScreen.css b/src/components/ErrorScreen/ErrorScreen.css
new file mode 100644
index 0000000..fad6255
--- /dev/null
+++ b/src/components/ErrorScreen/ErrorScreen.css
@@ -0,0 +1,278 @@
+.errorScreen {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #343434;
+    z-index: 999999999;
+    border-radius: 3px;
+    color: #d0d0d0;
+    font-size: 16px;
+    text-align: center;
+    line-height: 16px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.error-message {
+    position: relative;
+    top: 85px;
+    color: #000;
+    font-size: 20px;
+    font-weight: bold;
+}
+  
+@keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+  
+    100% {
+      opacity: 0;
+    }
+}
+  
+@-moz-keyframes pulse {
+    0% {
+      filter: alpha(opacity=100);
+      opacity: 1;
+    }
+  
+    100% {
+      filter: alpha(opacity=0);
+      opacity: 0;
+    }
+}
+  
+@-webkit-keyframes pulse {
+    0% {
+      filter: alpha(opacity=100);
+      opacity: 1;
+    }
+  
+    100% {
+      filter: alpha(opacity=0);
+      opacity: 0;
+    }
+}
+  
+@-ms-keyframes pulse {
+    0% {
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+      filter: alpha(opacity=100);
+      opacity: 1;
+    }
+  
+    100% {
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+      filter: alpha(opacity=0);
+      opacity: 0;
+    }
+}
+  
+@-o-keyframes pulse {
+    0% {
+      filter: alpha(opacity=100);
+      opacity: 1;
+    }
+  
+    100% {
+      filter: alpha(opacity=0);
+      opacity: 0;
+    }
+}
+  
+.-circular, 
+.hal-eye .__ring:before, 
+.hal-eye .__oculus .__iris {
+    border-radius: 100%;
+}
+  
+.hal {
+    height: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #adadad), color-stop(50%, #999999), color-stop(100%, #828282));
+    background-image: -webkit-linear-gradient(#adadad, #999999, #828282);
+    background-image: -moz-linear-gradient(#adadad, #999999, #828282);
+    background-image: -o-linear-gradient(#adadad, #999999, #828282);
+    background-image: linear-gradient(#adadad, #999999, #828282);
+}
+  
+.hal-eye {
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    top: 3%;
+    box-shadow: 0px 21px 5px rgba(0, 0, 0, 0.3);
+    height: 15em;
+    left: 50%;
+    margin: 0 0 0-7.5em;
+    position: relative;
+    width: 15em;
+}
+  
+.hal-eye .__ring {
+    height: 100%;
+    padding: 0.5em;
+    position: relative;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9a9a9), color-stop(20%, #ffffff), color-stop(40%, #595959), color-stop(65%, #b3b3b3), color-stop(100%, #666666));
+    background-image: -webkit-linear-gradient(#a9a9a9, #ffffff 20%, #595959 40%, #b3b3b3 65%, #666666);
+    background-image: -moz-linear-gradient(#a9a9a9, #ffffff 20%, #595959 40%, #b3b3b3 65%, #666666);
+    background-image: -o-linear-gradient(#a9a9a9, #ffffff 20%, #595959 40%, #b3b3b3 65%, #666666);
+    background-image: linear-gradient(#a9a9a9, #ffffff 20%, #595959 40%, #b3b3b3 65%, #666666);
+}
+  
+.hal-eye .__ring:before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(14%, #666666), color-stop(50%, #a9a9a9), color-stop(72%, #999999), color-stop(80%, #b7b7b7), color-stop(100%, #cccccc));
+    background-image: -webkit-linear-gradient(#737373, #666666 14%, #a9a9a9 50%, #999999 72%, #b7b7b7 80%, #cccccc);
+    background-image: -moz-linear-gradient(#737373, #666666 14%, #a9a9a9 50%, #999999 72%, #b7b7b7 80%, #cccccc);
+    background-image: -o-linear-gradient(#737373, #666666 14%, #a9a9a9 50%, #999999 72%, #b7b7b7 80%, #cccccc);
+    background-image: linear-gradient(#737373, #666666 14%, #a9a9a9 50%, #999999 72%, #b7b7b7 80%, #cccccc);
+}
+  
+.hal-eye .__oculus {
+    background-color: #000;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    height: 80%;
+    left: 50%;
+    margin: -40% 0 0 -40%;
+    position: absolute;
+    top: 50%;
+    width: 80%;
+}
+  
+.hal-eye .__oculus .__iris {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+}
+  
+.hal-eye .__oculus .__iris.-narrow {
+    background-image: radial-gradient(circle, #fff063 2%, #fa0c02 10%, #c80901 30%, #310200 55%, #000000 85%);
+    z-index: 1;
+}
+  
+.hal-eye .__oculus .__iris.-wide {
+    background-image: radial-gradient(circle, #fff063 5%, #fa0c02 15%, #c80901 40%, #0c0000 65%, #000000 85%);
+    -webkit-animation: pulse 2s ease-in-out infinite alternate;
+    -moz-animation: pulse 2s ease-in-out infinite alternate;
+    -ms-animation: pulse 2s ease-in-out infinite alternate;
+    -o-animation: pulse 2s ease-in-out infinite alternate;
+    animation: pulse 2s ease-in-out infinite alternate;
+    z-index: 2;
+}
+  
+.hal-eye .__highlight {
+    background-color: rgba(255, 255, 255, 0.12);
+    border-radius: 100%;
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.12);
+    height: 8%;
+    left: 50%;
+    margin-left: -12%;
+    position: absolute;
+    top: 6%;
+    width: 24%;
+}
+  
+.hal-eye .__highlight:before, .hal-eye .__highlight:after {
+    border-radius: 100%;
+    left: 50%;
+    position: absolute;
+}
+  
+.hal-eye .__highlight:before {
+    content: '';
+    display: block;
+    height: 50%;
+    width: 50%;
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
+    margin-left: -25%;
+    top: 130%;
+}
+  
+.hal-eye .__highlight:after {
+    content: '';
+    display: block;
+    height: 26%;
+    width: 26%;
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
+    margin-left: -13%;
+    top: 250%;
+}
+  
+.hal-eye .__highlight.-alpha {
+    left: 75%;
+    margin-left: 0;
+    top: 30%;
+    -webkit-transform: rotate(60deg);
+    -moz-transform: rotate(60deg);
+    -o-transform: rotate(60deg);
+    -ms-transform: rotate(60deg);
+    transform: rotate(60deg);
+}
+  
+.hal-eye .__highlight.-gamma {
+    left: 2%;
+    margin-left: 0;
+    top: 30%;
+    -webkit-transform: rotate(-60deg);
+    -moz-transform: rotate(-60deg);
+    -o-transform: rotate(-60deg);
+    -ms-transform: rotate(-60deg);
+    transform: rotate(-60deg);
+}
+    
+@media only screen and (min-width: 30em) {
+    .hal {
+      /* min-height: 37.5em; */
+    }
+  
+    .hal-eye {
+      height: 21.875em;
+      margin-left: -10.9375em;
+      width: 21.875em;
+    }
+  }
+  
+@media only screen and (min-width: 48em) {
+    .hal {
+      /* min-height: 50em; */
+    }
+  
+    .hal-eye {
+      height: 31.25em;
+      margin-left: -15.625em;
+      width: 31.25em;
+    }
+}
+
+@media screen and (max-width: 768px) {  
+    .errorScreen {
+        display: block;
+    }
+    .error-message {
+        top: 25px;
+        font-size: 12px;
+        font-weight: bold;
+    }
+    .hal {
+        height: 100%;
+        width: 100%;
+    }
+    .hal-eye {
+        top: 5%;
+        box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.3);
+        height: 8em;
+        left: 63%;
+        width: 8em;
+    }
+    .hal-eye .__ring {
+        height: 88%;
+    }
+}
\ No newline at end of file
diff --git a/src/components/ErrorScreen/ErrorScreen.js b/src/components/ErrorScreen/ErrorScreen.js
new file mode 100644
index 0000000..92057c7
--- /dev/null
+++ b/src/components/ErrorScreen/ErrorScreen.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useDots } from '../../utils/dots';
+import './ErrorScreen.css';
+
+
+export default function ErrorScreen() {
+    const dots = useDots();
+
+    return (      
+    <div id="page" className="errorScreen">
+      <div className="hal">
+        <div className="hal-eye -circular">
+          <div className="__ring -circular"></div>
+            <div className="__oculus -circular">
+            <div className="__iris -circular -narrow"></div>
+            <div className="__iris -circular -wide"></div>
+            <div className="__highlight -alpha"></div>
+            <div className="__highlight -beta"></div>
+            <div className="__highlight -gamma"></div>
+          </div>
+        </div>
+      <div className="error-message">I'm sorry, Dave. I'm afraid I can't do that{dots}</div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MusicPanel/MusicPanel.js b/src/components/MusicPanel/MusicPanel.js
index adf2bee..6357292 100644
--- a/src/components/MusicPanel/MusicPanel.js
+++ b/src/components/MusicPanel/MusicPanel.js
@@ -155,7 +155,7 @@ export function MusicPanel({ volume }) {
                         className="progressForeground" 
                         style={{width: `${(currentTime / duration) * 100}%`}}
                     >
-                        <div className="progressIndicator"></div>
+                        <div className="progressIndicator ctaBtn"></div>
                     </div>
                 </div>
                 <div className="timeCode">
@@ -164,23 +164,23 @@ export function MusicPanel({ volume }) {
             </div>
             <div className="musicBtnBar">
                 <button className="musicBtn" onClick={handlePrevious}>
-                    <img className="musicIcon" src={getImagePath("icon-music-previous.svg")} alt="Previous Track" />
+                    <img className="musicIcon ctaBtn" src={getImagePath("icon-music-previous.svg")} alt="Previous Track" />
                 </button>
                 <button className="musicBtn" onClick={togglePlayPause}>
                     <img 
-                        className="musicIcon" 
+                        className="musicIcon ctaBtn" 
                         src={isPlaying ? getImagePath("icon-music-pause.svg") : getImagePath("icon-music-play.svg")} 
                         alt="Play & Pause" 
                     />
                 </button>
                 <button className="musicBtn" onClick={handleNext}>
-                    <img className="musicIcon" src={getImagePath("icon-music-next.svg")} alt="Next Track" />
+                    <img className="musicIcon ctaBtn" src={getImagePath("icon-music-next.svg")} alt="Next Track" />
                 </button>
                 <button className="musicBtn">
-                    <img className="musicIcon" src={getImagePath("icon-settings.svg")} alt="Settings" />
+                    <img className="musicIcon ctaBtn" src={getImagePath("icon-settings.svg")} alt="Settings" />
                 </button>
                 <button className="musicBtn">
-                    <img className="musicIcon" src={getImagePath("icon-search.svg")} alt="Search" />
+                    <img className="musicIcon ctaBtn" src={getImagePath("icon-search.svg")} alt="Search" />
                 </button>
             </div>
         </div>