diff --git a/com.twin.app.shoptime/assets/img-service-bg@3x.png b/com.twin.app.shoptime/assets/img-service-bg@3x.png
new file mode 100644
index 00000000..6edf3b47
Binary files /dev/null and b/com.twin.app.shoptime/assets/img-service-bg@3x.png differ
diff --git a/com.twin.app.shoptime/assets/img-service-logo@3x.png b/com.twin.app.shoptime/assets/img-service-logo@3x.png
new file mode 100644
index 00000000..d3485ac3
Binary files /dev/null and b/com.twin.app.shoptime/assets/img-service-logo@3x.png differ
diff --git a/com.twin.app.shoptime/src/views/ServiceUnavailableNoticePanel/ServiceUnavailableNoticePanel.jsx b/com.twin.app.shoptime/src/views/ServiceUnavailableNoticePanel/ServiceUnavailableNoticePanel.jsx
new file mode 100644
index 00000000..900e3784
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/ServiceUnavailableNoticePanel/ServiceUnavailableNoticePanel.jsx
@@ -0,0 +1,55 @@
+import React, { useEffect, useCallback } from "react";
+import TButton, { TYPES } from "../../components/TButton/TButton";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spotlight from "@enact/spotlight";
+
+import TPanel from "../../components/TPanel/TPanel";
+import css from "./ServiceUnavailableNoticePanel.module.less";
+import { $L } from "../../utils/helperMethods";
+
+import ServiceLogoImage from "../../../assets/img-service-logo@3x.png";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+export default function ServiceUnavailableNoticePanel() {
+  const confirmExit = useCallback(() => {
+    if (typeof window === "object") {
+      if (window.PalmSystem) {
+        // gestureRelease();
+        window.close();
+      } else if (typeof window === "object") {
+        window.location.reload();
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    Spotlight.focus("exit");
+  }, []);
+
+  const description =
+    $L(`The service will be temporarily suspended due to system maintenance for approximately 1 minute.
+    We deeply apologize for the inconvenience.`);
+
+  return (
+    <TPanel className={css.panel} isTabActivated={false}>
+      <Container className={css.serviceLayout}>
+        <img src={ServiceLogoImage} className={css.serviceLogo} />
+        <div className={css.serviceDescription}>{description}</div>
+        <div className={css.bottomBtnLayer}>
+          <TButton
+            onClick={confirmExit}
+            spotlightId="exit"
+            type={TYPES.normal}
+            className={css.exitBtn}
+          >
+            {$L("EXIT")}
+          </TButton>
+        </div>
+      </Container>
+    </TPanel>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/ServiceUnavailableNoticePanel/ServiceUnavailableNoticePanel.module.less b/com.twin.app.shoptime/src/views/ServiceUnavailableNoticePanel/ServiceUnavailableNoticePanel.module.less
new file mode 100644
index 00000000..99e66ca3
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/ServiceUnavailableNoticePanel/ServiceUnavailableNoticePanel.module.less
@@ -0,0 +1,33 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.serviceLayout {
+  display: flex;
+  .flex(@direction: column);
+  font-family: @baseFont;
+  color: @COLOR_GRAY08;
+  width: 100%;
+  height: 100%;
+  background: url(../../../assets/img-service-bg@3x.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  .serviceLogo {
+    width: 340px;
+    height: 340px;
+  }
+
+  .serviceDescription {
+    margin: 58px 0 107px 0;
+    width: 1260px;
+    line-height: 38px;
+    text-align: center;
+    font-size: 30px;
+  }
+
+  .exitBtn {
+    width: 320px !important;
+    height: 78px;
+  }
+}