diff --git a/packages/frontend/src/components/topBar/Modal.tsx b/packages/frontend/src/components/topBar/Modal.tsx
index 105c3389..7d4c55ed 100644
--- a/packages/frontend/src/components/topBar/Modal.tsx
+++ b/packages/frontend/src/components/topBar/Modal.tsx
@@ -3,6 +3,7 @@ import { ReactNode, useCallback } from 'react'
 import styled from 'styled-components'
 import { CloseButton } from '@/components/buttons/CloseButton'
 import { Colors, hexOpacity } from '@/styles/colors'
+import { MediaQueries } from '@/styles/mediaQueries'
 
 export interface ModalProps {
   isShown: boolean | undefined
@@ -51,6 +52,13 @@ const Content = styled(Dialog.Content)`
   width: 408px;
   padding: 24px;
   background-color: ${Colors.White};
+
+  ${MediaQueries.small} {
+    width: 100%;
+    height: 100%;
+    padding: 48px 24px 32px;
+    row-gap: 32px;
+  }
 `
 
 const Header = styled.div`
diff --git a/packages/frontend/src/styles/mediaQueries.ts b/packages/frontend/src/styles/mediaQueries.ts
index 13d9b9c3..b9ae4e0d 100644
--- a/packages/frontend/src/styles/mediaQueries.ts
+++ b/packages/frontend/src/styles/mediaQueries.ts
@@ -1,6 +1,6 @@
 export const breakPoints = {
-  extraSmall: 320,
-  small: 360,
+  extraSmall: 360,
+  small: 430,
   medium: 768,
   large: 1024,
   extraLarge: 1440,