diff --git a/com.twin.app.shoptime/src/views/HomePanel/EventPopUpBanner/EventPopUpBanner.jsx b/com.twin.app.shoptime/src/views/HomePanel/EventPopUpBanner/EventPopUpBanner.jsx
new file mode 100644
index 00000000..b238c747
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/HomePanel/EventPopUpBanner/EventPopUpBanner.jsx
@@ -0,0 +1,42 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import $L from "@enact/i18n/$L";
+
+import TPopUp from "../../../components/TPopUp/TPopUp";
+import css from "../EventPopUpBanner/EventPopUpBanner.module.less";
+
+export default function EventPopUpBanner({
+  eventPopInfo,
+  isEventPopupOpen = true,
+}) {
+  const [eventPopUpOpen, setEventPopUpOpen] = useState(false);
+
+  useEffect(() => {
+    setEventPopUpOpen(isEventPopupOpen);
+  }, [isEventPopupOpen]);
+
+  const handleApply = useCallback(() => {
+    console.log("handleApply");
+  }, []);
+
+  return (
+    <TPopUp
+      kind="eventBannerPopup"
+      open={eventPopUpOpen}
+      onClose={() => {
+        setEventPopUpOpen(false);
+      }}
+      onClick={handleApply}
+      hasButton
+      button1Text={$L("Apply Now")}
+      button2Text={$L("Skip")}
+      className={css.eventBannerPopup}
+    >
+      {eventPopInfo && (
+        <p>
+          <img src={eventPopInfo.evntImgUrl} alt="eventpopupbanner" />
+        </p>
+      )}
+    </TPopUp>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/HomePanel/EventPopUpBanner/EventPopUpBanner.module.less b/com.twin.app.shoptime/src/views/HomePanel/EventPopUpBanner/EventPopUpBanner.module.less
new file mode 100644
index 00000000..36b7e099
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/HomePanel/EventPopUpBanner/EventPopUpBanner.module.less
@@ -0,0 +1,2 @@
+.eventBannerPopup {
+}