diff --git a/package.json b/package.json
index 5de9fa00..c5c83b08 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "ag-grid-react": "^30.2.0",
     "axios": "^1.5.1",
     "calendar-in-react": "^1.0.5",
+    "chalk": "^5.3.0",
     "date-fns": "^2.30.0",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
@@ -82,5 +83,12 @@
   "_id": "fe-teachercan@0.0.0",
   "msw": {
     "workerDirectory": "public"
+  },
+  "resolutions": {
+    "strip-ansi": "6.0.1",
+    "string-width": "4.2.2",
+    "wrap-ansi": "7.0.0"
   }
 }
+
+
diff --git a/src/pages/Tools/RandomPick/RandomPickModal/index.tsx b/src/pages/Tools/RandomPick/RandomPickModal/index.tsx
index 2d631347..334bf980 100644
--- a/src/pages/Tools/RandomPick/RandomPickModal/index.tsx
+++ b/src/pages/Tools/RandomPick/RandomPickModal/index.tsx
@@ -19,6 +19,8 @@ export type RandomPickSetting = {
 
 type RandomPickModalProps = {
   randomPickSetting: RandomPickSetting;
+  media: string;
+  style?: React.CSSProperties;
 };
 
 function RandomPickModal({ randomPickSetting }: RandomPickModalProps) {
diff --git a/src/pages/Tools/RandomPick/RandomPickModal/style.ts b/src/pages/Tools/RandomPick/RandomPickModal/style.ts
index f78076fd..08ca2564 100644
--- a/src/pages/Tools/RandomPick/RandomPickModal/style.ts
+++ b/src/pages/Tools/RandomPick/RandomPickModal/style.ts
@@ -6,7 +6,7 @@ import theme from '@Styles/theme';
 export const ModalContainer = styled.div`
   padding: 5px;
   display: flex; /* Use flexbox */
-  align-items: center; /* Align items vertically */
+  align-items: center;
 `;
 
 export const SmallButtonWrapper = styled.div`
@@ -23,7 +23,6 @@ export const SmallButton = styled.button<{ isOnClick?: boolean }>`
   display: flex;
   border-radius: 2px;
   margin-right: 8px;
-  padding: 4px;
 `;
 
 export const IconWrapper = styled.span`
@@ -34,12 +33,11 @@ export const IconWrapper = styled.span`
 
 export const ListSpan = styled.span`
   margin: 5px;
-
   border-radius: 2px;
   min-height: 24px;
   min-width: 96px;
   padding: 8px;
-  color: black;
+  color: 'black';
 `;
 
 export const ListSelect = styled.select`
@@ -52,12 +50,11 @@ export const ListSelect = styled.select`
   }
 
   &:focus {
-    border-color: ${({ theme }) => theme.border.primary};
+    border-color: ${({ theme }) => theme.accentText};
   }
   align-items: center;
   text-align: center;
   padding: 8px 12px;
-  margin-left: 5px;
 `;
 
 export const BigBsShield = styled(BsShieldExclamation)`
diff --git a/src/pages/Tools/RandomPick/index.tsx b/src/pages/Tools/RandomPick/index.tsx
index 12a05361..f1e00cc0 100644
--- a/src/pages/Tools/RandomPick/index.tsx
+++ b/src/pages/Tools/RandomPick/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { AiOutlineUserAdd, AiFillSetting } from 'react-icons/ai';
 import { css } from 'styled-components';
 
+import useMedia from '@Hooks/useMedia';
 import useModal from '@Hooks/useModal';
 
 import Button from '@Components/Button';
@@ -14,6 +15,7 @@ import { MOCK_STUDENTS_LISTS } from './mock';
 import * as S from './style';
 
 function RandomPick() {
+  const media = useMedia();
   const [randomPickSetting, setRandomPickSetting] = useState<RandomPickSetting>(
     {
       studentsListId: undefined,
@@ -44,6 +46,10 @@ function RandomPick() {
     setbackground('white');
   };
 
+  const lightGreen = 'rgb(23, 142, 23)';
+  const darkGreen = 'rgb(20, 84, 13)';
+  const darkYellow = 'rgb(236, 230, 204)';
+
   const handlePick = () => {
     //학생 명단 셔플하기
     for (let i = studentsList.length - 1; i >= 0; i--) {
@@ -106,77 +112,107 @@ function RandomPick() {
 
   return (
     <S.Layout>
-      <S.RandomResult
-        backgroundImage={
-          background == 'wood' ? woodbackground : whitebackground
-        }
-      >
-        <S.SelectBackgroundButtonWrapper justifyContent="space-between">
-          <S.WoodBackgroundButton
-            onClick={toggleWoodBackground}
-            backgroundColor="#007200"
-            hoverBackground="#14540d"
-            textColor="white"
-          >
-            G
-          </S.WoodBackgroundButton>
-          <S.WoodBackgroundButton
-            onClick={toggleWhiteBackground}
-            backgroundColor="white"
-            hoverBackground="#ece6cc"
-            textColor="black"
+      {media === 'mobile' ? (
+        <>
+          {/* <Mobile
+            randomPickSetting={randomPickSetting}
+            studentsList={studentsList}
+            pickedStudents={pickedStudents}
+            handleConfirm={handleConfirm}
+            handlePick={handlePick}
+          /> */}
+        </>
+      ) : (
+        <>
+          <S.RandomResult
+            media={media}
+            backgroundImage={
+              background == 'wood' ? woodbackground : whitebackground
+            }
           >
-            W
-          </S.WoodBackgroundButton>
-        </S.SelectBackgroundButtonWrapper>
-        <S.ResultWrapper color={background == 'wood' ? 'white' : 'black'}>
-          {pickedStudents.length !== 0 && (
-            <p>
-              <S.ResultSpan>{pickedStudents.join('    ')}</S.ResultSpan>
-            </p>
-          )}
-
-          {!localStorage.getItem('random-pick-setting') && (
-            <p>학생 목록을 선택하세요</p>
-          )}
-
-          {studentsList.length === 0 &&
-            localStorage.getItem('random-pick-setting') && (
-              <>
+            <S.SelectBackgroundButtonWrapper justifyContent="space-between">
+              <S.WoodBackgroundButton
+                media={media}
+                onClick={toggleWoodBackground}
+                backgroundColor={lightGreen}
+                hoverBackground={darkGreen}
+                textColor="white"
+              >
+                G
+              </S.WoodBackgroundButton>
+              <S.WoodBackgroundButton
+                media={media}
+                onClick={toggleWhiteBackground}
+                backgroundColor="white"
+                hoverBackground={darkYellow}
+                textColor="black"
+              >
+                W
+              </S.WoodBackgroundButton>
+            </S.SelectBackgroundButtonWrapper>
+            <S.ResultWrapper color={background == 'wood' ? 'white' : 'black'}>
+              {pickedStudents.length !== 0 && (
                 <p>
-                  모든 학생을 선정했습니다. 확인을 누르면 처음부터 다시 선정할
-                  수 있습니다.
+                  <S.ResultSpan media={media}>
+                    {pickedStudents.join('    ')}
+                  </S.ResultSpan>
                 </p>
-
-                <Button
-                  onClick={handleConfirm}
-                  $style={css`
-                    margin: 20px;
-                  `}
-                >
-                  확인
-                </Button>
-              </>
-            )}
-        </S.ResultWrapper>
-        <S.ButtonWrapper>
-          <Button size="lg">
-            <AiOutlineUserAdd />
-            <div onClick={handlePick}>뽑기</div>
-          </Button>
-          <Button
-            size="lg"
-            onClick={() => {
-              openModal(
-                <RandomPickModal randomPickSetting={randomPickSetting} />,
-              );
-            }}
-          >
-            <AiFillSetting />
-            <div>설정</div>
-          </Button>
-        </S.ButtonWrapper>
-      </S.RandomResult>
+              )}
+
+              {!localStorage.getItem('random-pick-setting') && (
+                <S.CheckParagraph media={media}>
+                  학생 목록을 선택하세요
+                </S.CheckParagraph>
+              )}
+
+              {studentsList.length === 0 &&
+                localStorage.getItem('random-pick-setting') && (
+                  <>
+                    <S.CheckParagraph media={media}>
+                      모든 학생을 선정했습니다. 확인을 누르면 처음부터 다시
+                      선정할 수 있습니다.
+                    </S.CheckParagraph>
+
+                    <Button
+                      onClick={handleConfirm}
+                      $style={css`
+                        margin: 20px;
+                      `}
+                      size={media === 'tablet' ? 'sm' : 'lg'}
+                    >
+                      확인
+                    </Button>
+                  </>
+                )}
+            </S.ResultWrapper>
+            <S.ButtonWrapper>
+              <Button
+                onClick={handlePick}
+                size={media === 'tablet' ? 'sm' : 'lg'}
+              >
+                <AiOutlineUserAdd />
+                뽑기
+              </Button>
+              <Button
+                size={media === 'tablet' ? 'sm' : 'lg'}
+                onClick={() => {
+                  {
+                    openModal(
+                      <RandomPickModal
+                        randomPickSetting={randomPickSetting}
+                        media={media}
+                      />,
+                    );
+                  }
+                }}
+              >
+                <AiFillSetting />
+                설정
+              </Button>
+            </S.ButtonWrapper>
+          </S.RandomResult>
+        </>
+      )}
     </S.Layout>
   );
 }
diff --git a/src/pages/Tools/RandomPick/style.ts b/src/pages/Tools/RandomPick/style.ts
index e7eb9e2a..be4e2145 100644
--- a/src/pages/Tools/RandomPick/style.ts
+++ b/src/pages/Tools/RandomPick/style.ts
@@ -7,7 +7,8 @@ import { flexCustom } from '@Styles/common';
 import theme from '@Styles/theme';
 
 type RandomResultLayoutProps = {
-  backgroundImage: string;
+  backgroundImage?: string;
+  media: string;
 };
 
 export const Layout = styled.div`
@@ -25,7 +26,8 @@ export const RandomResult = styled.div<RandomResultLayoutProps>`
   aspect-ratio: 5/3;
   margin: auto;
   border-radius: 10px;
-  background-image: url(${(props) => props.backgroundImage});
+  background-image: ${(props) =>
+    props.media !== 'mobile' ? `url(${props.backgroundImage})` : 'none'};
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
@@ -36,7 +38,7 @@ export const ChoosedComponentsContainer = styled.div`
   ${flexCustom('row', 'center', 'flex-start')}
   width: 100%;
   max-width: 720px;
-  border: 3px solid ${theme.color.primary[500]};
+  border: 3px solid ${theme.color.primary};
   border-radius: 3px;
   margin: 20px 0 20px 0;
   padding: 16px;
@@ -65,19 +67,19 @@ export const BackgroundButtonContainer = styled.div`
   ${flexCustom('row', 'center', 'center')}
 `;
 
-interface backgroundButtonProps {
+type backgroundButtonProps = {
   backgroundColor: string;
   hoverBackground: string;
   textColor: string;
-}
+  media: string;
+};
 
 export const WoodBackgroundButton = styled(Button)<backgroundButtonProps>`
   ${flexCustom('row', 'center', 'center')}
-  width: 24px;
-  min-width: 24px;
-  height: 24px;
-  margin: 8px 4px;
+  width: ${(props) => (props.media === 'tablet' ? '20px' : '28px')};
+  margin: 12px 12px 8px 0px;
   border-radius: 50%;
+  padding: 0px;
   background-color: ${(props) => props.backgroundColor};
   border-color: ${(props) => props.backgroundColor};
   color: ${(props) => props.textColor};
@@ -88,6 +90,7 @@ export const WoodBackgroundButton = styled(Button)<backgroundButtonProps>`
   &:active {
     background-color: ${(props) => props.hoverBackground};
   }
+  font-size: ${(props) => (props.media === 'tablet' ? 'smaller' : 'large')};
 `;
 
 export const ResultWrapper = styled.div<ResultWrapperProps>`
@@ -98,13 +101,21 @@ export const ResultWrapper = styled.div<ResultWrapperProps>`
   text-align: center;
 `;
 
-export const ResultSpan = styled.span`
+type ResultSpanProps = {
+  media: string;
+};
+
+export const ResultSpan = styled.span<ResultSpanProps>`
   display: inline-block;
   text-align: center;
   font-size: 3.6rem;
   max-width: 840px;
   word-break: break-all;
-  /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, gold 50%); */
+  font-size: ${(props) => (props.media === 'tablet' ? 'large' : {})};
+`;
+
+export const CheckParagraph = styled.p<ResultSpanProps>`
+  font-size: ${(props) => (props.media === 'tablet' ? 'large' : {})};
 `;
 
 export const ButtonWrapper = styled.div`
@@ -115,8 +126,6 @@ export const ButtonWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
-
-  display: flex;
   gap: 10px;
 
   margin: 10px;
diff --git a/yarn.lock b/yarn.lock
index 976a7667..bc3ff5b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3262,11 +3262,6 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-regex@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
-  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
-
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -3286,7 +3281,7 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-ansi-styles@^6.0.0, ansi-styles@^6.1.0:
+ansi-styles@^6.0.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
@@ -3737,7 +3732,7 @@ cfb@~1.2.1:
     adler-32 "~1.3.0"
     crc-32 "~1.2.0"
 
-chalk@5.3.0:
+chalk@5.3.0, chalk@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385"
   integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==
@@ -4320,11 +4315,6 @@ duplexify@^3.5.0, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
-eastasianwidth@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
-  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
-
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -7968,7 +7958,7 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7977,14 +7967,14 @@ string-argv@0.3.2:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
-  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+string-width@4.2.2, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3, string-width@^5.0.0, string-width@^5.1.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
+  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
   dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^9.2.2"
-    strip-ansi "^7.0.1"
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
 
 string.prototype.matchall@^4.0.8:
   version "4.0.10"
@@ -8042,20 +8032,13 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
-  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
-  dependencies:
-    ansi-regex "^6.0.1"
-
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -8772,7 +8755,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@7.0.0, wrap-ansi@^6.0.1, wrap-ansi@^7.0.0, wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -8781,24 +8764,6 @@ wordwrap@^1.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^6.0.1:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
-  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
-  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
-  dependencies:
-    ansi-styles "^6.1.0"
-    string-width "^5.0.1"
-    strip-ansi "^7.0.1"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"