diff --git a/src/blockpuzzle/components/ArrowIcon.tsx b/src/blockpuzzle/components/ArrowIcon.tsx
new file mode 100644
index 0000000..7304371
--- /dev/null
+++ b/src/blockpuzzle/components/ArrowIcon.tsx
@@ -0,0 +1,23 @@
+import classNames from "classnames";
+
+interface IconProps {
+  className?: string;
+}
+
+const ArrowIcon = ({ className }: IconProps) => {
+  return (
+    <svg
+      className={classNames("h-[32px] w-[32px] text-white group-active:text-black", className)}
+      fill="currentColor"
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      enable-background="new 0 0 512 512"
+    >
+      <polygon points="289.7,341.3 289.7,0 204.3,0 204.3,341.3 33.7,170.7 33.7,298.7 247,512 460.3,298.7 460.3,170.7 " />
+    </svg>
+  );
+};
+
+export default ArrowIcon
diff --git a/src/blockpuzzle/components/Game.tsx b/src/blockpuzzle/components/Game.tsx
index c96286c..e8aaa3c 100644
--- a/src/blockpuzzle/components/Game.tsx
+++ b/src/blockpuzzle/components/Game.tsx
@@ -70,10 +70,10 @@ const Game = forwardRef<HTMLDivElement, GameProps>(function Game(props, ref) {
                   </Fragment>
                 ))
             )}
+            <Gamepad />
           </div>
         )}
       </div>
-      <Gamepad />
     </>
   );
 });
diff --git a/src/blockpuzzle/components/Gamepad.tsx b/src/blockpuzzle/components/Gamepad.tsx
index f2e95fa..5a7281d 100644
--- a/src/blockpuzzle/components/Gamepad.tsx
+++ b/src/blockpuzzle/components/Gamepad.tsx
@@ -1,12 +1,14 @@
-import { useCallback, useEffect, useRef } from "react";
+import { MouseEvent, useEffect, useRef } from "react";
 import { acceptedKeys, idleInput } from "../constants";
 import { useGameStore } from "./GameClient";
 import { GameInput } from "../types";
-import { clearInterval } from "timers";
+import ArrowIcon from "./ArrowIcon"
 import { timeout } from "../tools";
+import RotateIcon from "./RotateIcon";
+import React from "react";
 
 const buttonStyle =
-  "border-white border-[1px] rounded aspect-square text-center align-middle w-[64px] first:mr-3 flex justify-center items-center text-[32px] active:bg-white active:text-black select-none";
+  "border-white border-[1px] rounded aspect-square text-center align-middle w-[64px] first:mr-3 flex justify-center items-center text-[32px] active:bg-white active:text-black select-none group";
 
 const isMobile = () => {
   return navigator.userAgent.match(/mobile|iphone|android|ipad/i);
@@ -64,7 +66,7 @@ const Gamepad = () => {
           while (isPressed) {
             input(inputObj);
 
-            await timeout(33);
+            await timeout(16);
           }
         },
         end: () => {
@@ -102,7 +104,9 @@ const Gamepad = () => {
     };
   }, [input]);
 
-  const handleClick = (inputObj: GameInput) => () => {
+  const handleClick = (inputObj: GameInput) => (event: MouseEvent) => {
+    event.stopPropagation();
+
     if (isMobile() && inputObj.up) {
       input(inputObj);
     }
@@ -118,25 +122,25 @@ const Gamepad = () => {
   const downClick = handleClick({ ...idleInput, down: true });
 
   return (
-    <div className="flex justify-between w-full mt-2">
+    <div className="flex justify-between w-full mt-2 absolute -bottom-[80px]">
       <div className="flex">
         <button ref={leftRef} className={buttonStyle} onClick={leftClick}>
-          &lsaquo;
+          <ArrowIcon className="rotate-90"/>
         </button>
         <button ref={rightRef} className={buttonStyle} onClick={rightClick}>
-          &rsaquo;
+          <ArrowIcon className="-rotate-90" />
         </button>
       </div>
       <div className="flex">
         <button ref={upRef} className={buttonStyle} onClick={upClick}>
-          &#x27F3;
+          <RotateIcon />
         </button>
         <button ref={downRef} className={buttonStyle} onClick={downClick}>
-          &#x2304;
+          <ArrowIcon />
         </button>
       </div>
     </div>
   );
 };
 
-export default Gamepad;
+export default React.memo(Gamepad);
diff --git a/src/blockpuzzle/components/RotateIcon.tsx b/src/blockpuzzle/components/RotateIcon.tsx
new file mode 100644
index 0000000..b16fd73
--- /dev/null
+++ b/src/blockpuzzle/components/RotateIcon.tsx
@@ -0,0 +1,32 @@
+import classNames from "classnames";
+
+interface IconProps {
+  className?: string;
+}
+
+const RotateIcon = ({ className }: IconProps) => {
+  return (
+    <svg
+      className={classNames("h-[32px] w-[32px] text-white group-active:text-black",  className)}
+      viewBox="-0.5 0 25 25"
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14 10.55L18 14.55L22 10.55"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15.65 18.08C14.3398 19.387 12.6171 20.1993 10.7752 20.3786C8.93336 20.558 7.0863 20.0931 5.54864 19.0634C4.01099 18.0337 2.87786 16.5028 2.34232 14.7314C1.80677 12.96 1.90192 11.0577 2.61154 9.34859C3.32116 7.63947 4.60135 6.22926 6.23407 5.35811C7.86679 4.48697 9.75103 4.20879 11.5658 4.571C13.3806 4.93321 15.0137 5.91327 16.1869 7.34444C17.3601 8.77561 18.0009 10.5693 18 12.4199V14.1499"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RotateIcon;
diff --git a/src/blockpuzzle/game.ts b/src/blockpuzzle/game.ts
index 75705ba..d4ae187 100644
--- a/src/blockpuzzle/game.ts
+++ b/src/blockpuzzle/game.ts
@@ -369,7 +369,7 @@ export function clearCompleteRows(state: State) {
 
     return {
       grid: newGrid,
-      score: state.score + scorePerRow * fullRows.length * fullRows. length,
+      score: state.score + state.level * scorePerRow * fullRows.length * fullRows.length,
     };
   }
 
diff --git a/src/blockpuzzle/store.ts b/src/blockpuzzle/store.ts
index 557b3d2..e2c23ed 100644
--- a/src/blockpuzzle/store.ts
+++ b/src/blockpuzzle/store.ts
@@ -72,14 +72,10 @@ const store: (callbacks: GameCallbacks) => StateCreator<State & Actions> =
       return spawnBag;
     };
 
-    const limitedMove = throttle((input: GameInput) => get().move(input), 100, {
-      leading: true,
-    });
-
-    const limitedDrop = throttle(() => get().drop(), 50, { leading: true });
-    const limitedRotate = throttle(() => get().rotateClockwise(), 150, {
-      leading: true,
-    });
+    const limitedMove = throttle((input: GameInput) => get().move(input), 50);
+
+    const limitedDrop = throttle(() => get().drop(), 30);
+    const limitedRotate = throttle(() => get().rotateClockwise(), 100);
 
     return {
       ...getInitialState(),