diff --git a/typing-app/src/components/molecules/UserCard.tsx b/typing-app/src/components/molecules/UserCard.tsx
index 05bf0ee..c39e0ab 100644
--- a/typing-app/src/components/molecules/UserCard.tsx
+++ b/typing-app/src/components/molecules/UserCard.tsx
@@ -9,17 +9,15 @@ interface UserCardPresenterProps {
 
 export const UserCardPresenter = ({ user }: UserCardPresenterProps) => {
   return (
-    <Box bg="blue.600" p={5}>
-      <HStack spacing={4}>
-        <Avatar src={ "https://www.shizuoka.ac.jp/cms/files/shizudai/MASTER/0100/uISrbYCb_VL033_r03.png" } maxW="100px" borderRadius="0" />
-        <VStack align="start">
-          <Text fontSize="lg" fontWeight="bold" color="white">
-            名前: {user ? user.handleName : "ログインしていません"}
-          </Text>
-          <Text color="white">学籍番号: {user ? user.studentNumber : "未ログイン"}</Text>
-        </VStack>
-      </HStack>
-    </Box>
+    <HStack spacing={4} bg="blue.600">
+      <Avatar src={"https://www.shizuoka.ac.jp/cms/files/shizudai/MASTER/0100/uISrbYCb_VL033_r03.png"} boxSize="100px" borderRadius="0" />
+      <VStack align="start" paddingRight="8px">
+        <Text fontSize="lg" fontWeight="bold" color="white">
+          名前: {user ? user.handleName : "ログインしていません"}
+        </Text>
+        <Text color="white">学籍番号: {user ? user.studentNumber : "未ログイン"}</Text>
+      </VStack>
+    </HStack>
   );
 };