diff --git a/com.twin.app.shoptime/src/components/TopButton/TopButton.jsx b/com.twin.app.shoptime/src/components/TopButton/TopButton.jsx
index 9a18180e..c6ef0bb7 100644
--- a/com.twin.app.shoptime/src/components/TopButton/TopButton.jsx
+++ b/com.twin.app.shoptime/src/components/TopButton/TopButton.jsx
@@ -1,25 +1,47 @@
-import React, {
-  memo,
-  useCallback,
-} from 'react';
+import React, { memo, useCallback, useState } from "react";
 
-import Spotlight from '@enact/spotlight';
-import Spottable from '@enact/spotlight/Spottable';
+import Spotlight from "@enact/spotlight";
+import Spottable from "@enact/spotlight/Spottable";
 
-import css from './TopButton.module.less';
+import css from "./TopButton.module.less";
 
 const SpottableComponent = Spottable("button");
 
-export default memo(function TopButton({ className, targetId, ...rest }) {
+export default memo(function TopButton({
+  className,
+  onTopButtonBlur,
+  onTopButtonClick,
+  onTopButtonFocus,
+  targetId,
+  ...rest
+}) {
+  const [_, setIsFocused] = useState(false);
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    onTopButtonBlur && onTopButtonBlur();
+  }, [onTopButtonBlur]);
+
   const handleClick = useCallback(() => {
-    targetId && Spotlight.focus(targetId);
-  }, [targetId]);
+    if (targetId) {
+      Spotlight.focus(targetId);
+    }
+
+    onTopButtonClick && onTopButtonClick();
+  }, [onTopButtonClick, targetId]);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    onTopButtonFocus && onTopButtonFocus();
+  }, [onTopButtonFocus]);
 
   return (
     <div className={css.container}>
       <SpottableComponent
         className={className && className}
+        onBlur={handleBlur}
         onClick={handleClick}
+        onFocus={handleFocus}
         {...rest}
       />
     </div>