diff --git a/frontend/src/pages/MainPage/MainPage.style.ts b/frontend/src/pages/MainPage/MainPage.style.ts
index 2e6cd5a2d..9b054ccbd 100644
--- a/frontend/src/pages/MainPage/MainPage.style.ts
+++ b/frontend/src/pages/MainPage/MainPage.style.ts
@@ -1,3 +1,4 @@
+import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
 import { css, Theme } from '@emotion/react';
 
 export const headerButton = css`
@@ -14,5 +15,8 @@ export const headerLeft = css`
 
 export const ModalContent = (props: { theme: Theme }) => css`
   ${props.theme.typography.s1}
-  margin: 5rem;
+  width: 100vw;
+  max-width: calc(${DISPLAY_MAX_WIDTH} * 0.8);
+  margin-bottom: 4rem;
+  padding-right: 60px;
 `;
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index 28fb25aa8..140b522b0 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -187,7 +187,8 @@ export default function MainPage() {
           <Modal onClose={handleModalClose}>
             <div css={S.ModalContent({ theme })}>
               알림을 허용하시면 모임에 대한 알림을 받을 수 있습니다.
-              <br /> 우측 상단에 알림 버튼을 눌러주세요
+              <br />
+              우측 상단의 알림 버튼을 눌러주세요.
             </div>
             <Button shape="bar" onClick={handleModalClose}>
               닫기