diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/Variables.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/Variables.tsx
index 724ef70b..8e56f265 100644
--- a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/Variables.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/Variables.tsx
@@ -25,10 +25,6 @@ export const dirCharToJapanese = {
   W: '左',
 };
 
-const penStateJapanese = (penDown: boolean): string => {
-  return penDown ? 'おいている' : 'あげている';
-};
-
 export const Variables: React.FC<VariablesProps> = ({ traceItemVars }) => {
   const characterVars = [];
   const otherVars = [];
@@ -51,7 +47,6 @@ export const Variables: React.FC<VariablesProps> = ({ traceItemVars }) => {
               <Th>変数名</Th>
               <Th>線の色</Th>
               <Th>向き</Th>
-              <Th>ペンの状態</Th>
             </Tr>
           </Thead>
           <Tbody>
@@ -62,7 +57,6 @@ export const Variables: React.FC<VariablesProps> = ({ traceItemVars }) => {
                   <Box bg={charToColor[variable.value.color as keyof typeof charToColor]} h="20px" w="20px" />
                 </Td>
                 <Td>{dirCharToJapanese[variable.value.dir as keyof typeof dirCharToJapanese]}</Td>
-                <Td>{penStateJapanese(variable.value.pen)}</Td>
               </Tr>
             ))}
           </Tbody>
diff --git a/src/components/molecules/TurtleGraphicsController.tsx b/src/components/molecules/TurtleGraphicsController.tsx
index d017d975..111b9dff 100644
--- a/src/components/molecules/TurtleGraphicsController.tsx
+++ b/src/components/molecules/TurtleGraphicsController.tsx
@@ -1,8 +1,10 @@
 'use client';
 
 import React from 'react';
+import { FaArrowRotateRight, FaArrowRotateLeft, FaTrashCan } from 'react-icons/fa6';
 
-import { Box, Button, HStack, VStack } from '../../infrastructures/useClient/chakra';
+import { TURTLE_GRAPHICS_GRID_ROWS as GRID_ROWS, TURTLE_GRAPHICS_GRID_SIZE as GRID_SIZE } from '../../constants';
+import { Box, Button, HStack, IconButton, VStack } from '../../infrastructures/useClient/chakra';
 import type { CharacterTrace } from '../../problems/traceProgram';
 import type { SelectedCell } from '../../types';
 
@@ -15,16 +17,12 @@ interface TurtleGraphicsControllerProps {
   handleClickCharacterTurnRightButton: () => void;
   handleClickCharacterMoveForwardButton: () => void;
   handleClickCharacterMoveBackwardButton: () => void;
-  handleClickCharacterPenUpButton: () => void;
-  handleClickCharacterPenDownButton: () => void;
 }
 
 export const TurtleGraphicsController: React.FC<TurtleGraphicsControllerProps> = ({
   handleAddCharacterButton,
   handleClickCharacterMoveBackwardButton,
   handleClickCharacterMoveForwardButton,
-  handleClickCharacterPenDownButton,
-  handleClickCharacterPenUpButton,
   handleClickCharacterTurnLeftButton,
   handleClickCharacterTurnRightButton,
   handleRemoveCharacterButton,
@@ -32,34 +30,50 @@ export const TurtleGraphicsController: React.FC<TurtleGraphicsControllerProps> =
   selectedCharacter,
 }) => {
   return (
-    <VStack justifyContent="center" marginTop="4" spacing="4">
+    <VStack align="center" justifyContent="center" marginTop="4" spacing="4" zIndex="10">
       {selectedCharacter && (
-        <>
+        <VStack
+          alignItems="center"
+          left={selectedCharacter.x * GRID_SIZE + GRID_SIZE / 2 + 'px'}
+          position="absolute"
+          top={(GRID_ROWS - selectedCharacter.y) * GRID_SIZE + GRID_SIZE / 4 + 'px'}
+          transform="translate(-50%, 0%)"
+        >
           <HStack>
-            <Button onClick={() => handleClickCharacterTurnLeftButton()}>⤹</Button>
-            <Button onClick={() => handleClickCharacterTurnRightButton()}>⤵</Button>
+            <IconButton
+              aria-label="Turn Left"
+              icon={<FaArrowRotateLeft />}
+              onClick={() => handleClickCharacterTurnLeftButton()}
+            />
+            <IconButton
+              aria-label="Turn Right"
+              icon={<FaArrowRotateRight />}
+              onClick={() => handleClickCharacterTurnRightButton()}
+            />
           </HStack>
           <HStack>
             <Button onClick={() => handleClickCharacterMoveForwardButton()}>前に進む</Button>
-            <Button onClick={() => handleClickCharacterMoveBackwardButton()}>後ろに戻る</Button>
-          </HStack>
-          <HStack>
-            <Button border={selectedCharacter.pen ? '' : '1px'} onClick={() => handleClickCharacterPenUpButton()}>
-              ペンを上げる
-            </Button>
-            <Button border={selectedCharacter.pen ? '1px' : ''} onClick={() => handleClickCharacterPenDownButton()}>
-              ペンを下ろす
-            </Button>
+            <Button onClick={() => handleClickCharacterMoveBackwardButton()}>後に戻る</Button>
           </HStack>
           <Box>
-            <Button onClick={() => handleRemoveCharacterButton(selectedCharacter)}>削除する</Button>
+            <IconButton
+              aria-label="Remove"
+              colorScheme="red"
+              icon={<FaTrashCan />}
+              onClick={() => handleRemoveCharacterButton(selectedCharacter)}
+            />
           </Box>
-        </>
+        </VStack>
       )}
 
       {selectedCell && (
         <HStack>
-          <Box>
+          <Box
+            left={selectedCell.x * GRID_SIZE + GRID_SIZE / 2 + 'px'}
+            position="absolute"
+            top={(GRID_ROWS - selectedCell.y) * GRID_SIZE + GRID_SIZE / 4 + 'px'}
+            transform="translate(-50%, 0%)"
+          >
             <Button onClick={() => handleAddCharacterButton()}>キャラクターを追加する</Button>
           </Box>
         </HStack>
diff --git a/src/components/organisms/TurtleGraphics.tsx b/src/components/organisms/TurtleGraphics.tsx
index fdd2fbb1..88995c80 100644
--- a/src/components/organisms/TurtleGraphics.tsx
+++ b/src/components/organisms/TurtleGraphics.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import { FaArrowRotateLeft, FaArrowRotateRight, FaTrashCan } from 'react-icons/fa6';
 
 import {
   TURTLE_GRAPHICS_DEFAULT_COLOR as DEFAULT_COLOR,
@@ -8,7 +9,7 @@ import {
   TURTLE_GRAPHICS_GRID_ROWS as GRID_ROWS,
   TURTLE_GRAPHICS_GRID_SIZE as GRID_SIZE,
 } from '../../constants';
-import { Box, Grid, GridItem, Image } from '../../infrastructures/useClient/chakra';
+import { Box, Button, Grid, GridItem, HStack, IconButton, Image, VStack } from '../../infrastructures/useClient/chakra';
 import type { Problem } from '../../problems/generateProblem';
 import { type CharacterTrace, charToColor, type TraceItem } from '../../problems/traceProgram';
 import type { ColorChar, SelectedCell } from '../../types';
@@ -148,9 +149,7 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
       }
 
       const updatedCharacter = { ...selectedCharacter, x: updatedX, y: updatedY };
-      if (selectedCharacter.pen) {
-        updateCellColor(updatedCharacter.color as ColorChar, updatedCharacter.x, updatedCharacter.y);
-      }
+      updateCellColor(updatedCharacter.color as ColorChar, updatedCharacter.x, updatedCharacter.y);
       updateCharacters(updatedCharacter);
     };
 
@@ -166,9 +165,7 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
       }
 
       const updatedCharacter = { ...selectedCharacter, x: updatedX, y: updatedY };
-      if (selectedCharacter.pen) {
-        updateCellColor('.' as ColorChar, selectedCharacter.x, selectedCharacter.y);
-      }
+      updateCellColor('.' as ColorChar, selectedCharacter.x, selectedCharacter.y);
       updateCharacters(updatedCharacter);
     };
 
@@ -192,21 +189,6 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
       updateCharacters(updatedCharacter);
     };
 
-    const handleClickCharacterPenUpButton = (): void => {
-      if (!selectedCharacter) return;
-
-      selectedCharacter.pen = false;
-      updateCharacters(selectedCharacter);
-    };
-
-    const handleClickCharacterPenDownButton = (): void => {
-      if (!selectedCharacter) return;
-
-      selectedCharacter.pen = true;
-      updateCellColor(selectedCharacter.color as ColorChar, selectedCharacter.x, selectedCharacter.y);
-      updateCharacters(selectedCharacter);
-    };
-
     const handleAddCharacterButton = (): void => {
       if (!selectedCell) return;
 
@@ -215,7 +197,6 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
         y: selectedCell.y,
         color: DEFAULT_COLOR,
         dir: 'N',
-        pen: true,
       };
 
       setCharacters((prevCharacters) => [...prevCharacters, newTurtle]);
@@ -248,67 +229,90 @@ export const TurtleGraphics = forwardRef<TurtleGraphicsHandle, TurtleGraphicsPro
     };
 
     return (
-      <Box className="turtle-graphics-container">
-        <Grid
-          position="relative"
-          templateColumns={`repeat(${GRID_COLUMNS}, ${GRID_SIZE}px)`}
-          templateRows={`repeat(${GRID_ROWS}, ${GRID_SIZE}px)`}
-        >
-          {[...board]
-            .reverse()
-            .map((columns, rowIndex) =>
-              columns.map((color, columnIndex) => (
-                <GridItem
-                  key={columnIndex}
-                  backgroundColor={charToColor[color]}
-                  borderColor="black"
-                  borderWidth={
-                    selectedCell?.x === columnIndex && selectedCell?.y === GRID_ROWS - rowIndex - 1 ? '2px' : '0.5px'
-                  }
-                  className="grid-cell"
-                  onClick={() => handleClickCell(columnIndex, GRID_ROWS - rowIndex - 1)}
-                  onContextMenu={(e) => handleContextMenu(e, columnIndex, GRID_ROWS - rowIndex - 1)}
-                />
-              ))
-            )}
-          {characters.map((character) => (
-            <Box
-              key={'character' + character.x + character.y}
-              borderColor={selectedCharacter?.color === character.color ? 'black' : 'transparent'}
-              borderWidth="2px"
-              bottom={character.y * GRID_SIZE + 'px'}
-              h={GRID_SIZE + 'px'}
-              left={character.x * GRID_SIZE + 'px'}
-              position="absolute"
-              w={GRID_SIZE + 'px'}
-              onClick={() => handleClickCharacter(character)}
-              onContextMenu={(e) => handleContextMenu(e, character.x, character.y)}
-            >
-              <Box p="0.2rem" transform={charToRotateStyle[character.dir as keyof typeof charToRotateStyle]}>
-                <Image
-                  alt={'character' + character.x + character.y}
-                  src={`/character/${charToColor[character.color as keyof typeof charToColor]}.png`}
-                  width={GRID_SIZE}
-                />
-              </Box>
-            </Box>
-          ))}
-        </Grid>
-        {isEnableOperation && (
-          <TurtleGraphicsController
-            handleAddCharacterButton={handleAddCharacterButton}
-            handleClickCharacterMoveBackwardButton={handleClickCharacterMoveBackwardButton}
-            handleClickCharacterMoveForwardButton={handleClickCharacterMoveForwardButton}
-            handleClickCharacterPenDownButton={handleClickCharacterPenDownButton}
-            handleClickCharacterPenUpButton={handleClickCharacterPenUpButton}
-            handleClickCharacterTurnLeftButton={handleClickCharacterTurnLeftButton}
-            handleClickCharacterTurnRightButton={handleClickCharacterTurnRightButton}
-            handleRemoveCharacterButton={handleRemoveCharacterButton}
-            selectedCell={selectedCell}
-            selectedCharacter={selectedCharacter}
-          />
+      <VStack>
+        {selectedCharacter && (
+          <HStack>
+            <IconButton
+              aria-label="Turn Left"
+              icon={<FaArrowRotateLeft />}
+              onClick={() => handleClickCharacterTurnLeftButton()}
+            />
+            <IconButton
+              aria-label="Turn Right"
+              icon={<FaArrowRotateRight />}
+              onClick={() => handleClickCharacterTurnRightButton()}
+            />
+            <Button onClick={() => handleClickCharacterMoveForwardButton()}>前に進む</Button>
+            <Button onClick={() => handleClickCharacterMoveBackwardButton()}>後に戻る</Button>
+            {/* <Button onClick={() => handleRemoveCharacterButton(selectedCharacter)}>削除する</Button> */}
+            <IconButton
+              aria-label="Remove"
+              colorScheme="red"
+              icon={<FaTrashCan />}
+              onClick={() => handleRemoveCharacterButton(selectedCharacter)}
+            />
+          </HStack>
         )}
-      </Box>
+        <Box className="turtle-graphics-container">
+          <Grid
+            position="relative"
+            templateColumns={`repeat(${GRID_COLUMNS}, ${GRID_SIZE}px)`}
+            templateRows={`repeat(${GRID_ROWS}, ${GRID_SIZE}px)`}
+          >
+            {[...board]
+              .reverse()
+              .map((columns, rowIndex) =>
+                columns.map((color, columnIndex) => (
+                  <GridItem
+                    key={columnIndex}
+                    backgroundColor={charToColor[color]}
+                    borderColor="black"
+                    borderWidth={
+                      selectedCell?.x === columnIndex && selectedCell?.y === GRID_ROWS - rowIndex - 1 ? '2px' : '0.5px'
+                    }
+                    className="grid-cell"
+                    onClick={() => handleClickCell(columnIndex, GRID_ROWS - rowIndex - 1)}
+                    onContextMenu={(e) => handleContextMenu(e, columnIndex, GRID_ROWS - rowIndex - 1)}
+                  />
+                ))
+              )}
+            {characters.map((character) => (
+              <Box
+                key={'character' + character.x + character.y}
+                borderColor={selectedCharacter?.color === character.color ? 'black' : 'transparent'}
+                borderWidth="2px"
+                h={GRID_SIZE + 'px'}
+                left={character.x * GRID_SIZE + 'px'}
+                position="absolute"
+                top={(GRID_ROWS - character.y - 1) * GRID_SIZE + 'px'}
+                w={GRID_SIZE + 'px'}
+                onClick={() => handleClickCharacter(character)}
+                onContextMenu={(e) => handleContextMenu(e, character.x, character.y)}
+              >
+                <Box p="0.2rem" transform={charToRotateStyle[character.dir as keyof typeof charToRotateStyle]}>
+                  <Image
+                    alt={'character' + character.x + character.y}
+                    src={`/character/${charToColor[character.color as keyof typeof charToColor]}.png`}
+                    width={GRID_SIZE}
+                  />
+                </Box>
+              </Box>
+            ))}
+            {isEnableOperation && (
+              <TurtleGraphicsController
+                handleAddCharacterButton={handleAddCharacterButton}
+                handleClickCharacterMoveBackwardButton={handleClickCharacterMoveBackwardButton}
+                handleClickCharacterMoveForwardButton={handleClickCharacterMoveForwardButton}
+                handleClickCharacterTurnLeftButton={handleClickCharacterTurnLeftButton}
+                handleClickCharacterTurnRightButton={handleClickCharacterTurnRightButton}
+                handleRemoveCharacterButton={handleRemoveCharacterButton}
+                selectedCell={selectedCell}
+                selectedCharacter={selectedCharacter}
+              />
+            )}
+          </Grid>
+        </Box>
+      </VStack>
     );
   }
 );
diff --git a/src/problems/traceProgram.ts b/src/problems/traceProgram.ts
index 68e0e703..41136be5 100644
--- a/src/problems/traceProgram.ts
+++ b/src/problems/traceProgram.ts
@@ -16,8 +16,6 @@ export interface CharacterTrace {
   color: string;
   /** 方向を表現する1文字 */
   dir: string;
-  /** ペンが床に触れているか否か */
-  pen: boolean;
 }
 
 export interface TraceItem {
@@ -61,14 +59,11 @@ export function traceProgram(instrumented: string, rawDisplayProgram: string, la
     let replaced = false;
     const newLine = line
       .replace(/for\s*\(([^;]*);\s*([^;]*);/, (_, init, cond) => `for (${init}; checkForCond(${cond}, ${statementId});`)
-      .replaceAll(
-        /\.(set|forward|penDown|penUp|turnRight|turnLeft)\(([^\n;]*)\)(;|\)\s*{)/g,
-        (_, methodName, args, tail) => {
-          replaced = true;
-          const delimiter = args === '' ? '' : ', ';
-          return `.${methodName}(${args}${delimiter}${statementId})${tail}`;
-        }
-      )
+      .replaceAll(/\.(set|forward|turnRight|turnLeft)\(([^\n;]*)\)(;|\)\s*{)/g, (_, methodName, args, tail) => {
+        replaced = true;
+        const delimiter = args === '' ? '' : ', ';
+        return `.${methodName}(${args}${delimiter}${statementId})${tail}`;
+      })
       .replace(/\/\/\s*CP.*/, () => {
         checkpointSids.push(statementId);
         return '';
@@ -126,7 +121,6 @@ class Character {
     this.y = y;
     this.color = color;
     this.dir = 'N';
-    this.pen = true;
     board[this.y][this.x] = this.color;
   }
   forward(sid) {
@@ -136,15 +130,7 @@ class Character {
     if (this.x < 0 || ${GRID_COLUMNS} <= this.x || this.y < 0 || ${GRID_ROWS} <= this.y) {
       throw new Error('Out of bounds');
     }
-    if (this.pen) board[this.y][this.x] = this.color;
-    addTrace(sid);
-  }
-  penDown(sid) {
-    this.pen = true;
-    addTrace(sid);
-  }
-  penUp(sid) {
-    this.pen = false;
+	  board[this.y][this.x] = this.color;
     addTrace(sid);
   }
   turnRight(sid) {
diff --git a/tests/traceCode.test.ts b/tests/traceCode.test.ts
index 4696e216..ec277c33 100644
--- a/tests/traceCode.test.ts
+++ b/tests/traceCode.test.ts
@@ -12,7 +12,6 @@ const defaultCharacter: CharacterTrace = {
   y: cy,
   color: '#',
   dir: 'N',
-  pen: true,
 };
 
 test.each([