diff --git a/package.json b/package.json
index 0fda0a7..041fdf7 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "react-toastify": "^10.0.4",
     "zustand": "^4.5.0",
     "wowds-tokens": "^0.0.9",
-    "wowds-ui": "^0.1.7",
+    "wowds-ui": "^0.1.8",
     "wowds-icons": "^0.1.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4687c3b..5980945 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,8 +57,8 @@ dependencies:
     specifier: ^0.0.9
     version: 0.0.9
   wowds-ui:
-    specifier: ^0.1.7
-    version: 0.1.7(next@14.2.4)(react@18.2.0)
+    specifier: ^0.1.8
+    version: 0.1.8(next@14.2.4)(react-dom@18.2.0)(react@18.2.0)
   zustand:
     specifier: ^4.5.0
     version: 4.5.1(@types/react@18.2.58)(react@18.2.0)
@@ -7574,6 +7574,21 @@ packages:
     dependencies:
       js-tokens: 4.0.0
 
+  /lottie-react@2.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      lottie-web: 5.12.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /lottie-web@5.12.2:
+    resolution: {integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==}
+    dev: false
+
   /loupe@2.3.7:
     resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
     dependencies:
@@ -10001,15 +10016,18 @@ packages:
     resolution: {integrity: sha512-fMGyb92sZ1iSf0TGSabQVym/MWsYyfetgBBNbZ0K6eGfESKtZF8AM1aDYRODmwyPkPSnt0SmOtRWMDxnPsnCqg==}
     dev: false
 
-  /wowds-ui@0.1.7(next@14.2.4)(react@18.2.0):
-    resolution: {integrity: sha512-ls2SnsTVfZpF2IOVu1N0FSo+XdGtlxtp+YOTwdd/l2lLX+Mh99/HKLsH6Q36p+yRF9zu0iiHv5dIlX790jvkOg==}
+  /wowds-ui@0.1.8(next@14.2.4)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-a6DSdxoQxZPRMkFodbY1GKYWxzuzCpSAir5WAKU0lPO3cmTmK1ILLXqlI+lANfI9fRAzCZDY9RoX5vdBl9yz7A==}
     peerDependencies:
       next: ^14.1.1
       react: ^18.2.0
     dependencies:
+      lottie-react: 2.4.0(react-dom@18.2.0)(react@18.2.0)
       next: 14.2.4(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0)(sass@1.71.1)
       react: 18.2.0
       wowds-icons: 0.1.1
+    transitivePeerDependencies:
+      - react-dom
     dev: false
 
   /wrap-ansi@7.0.0:
diff --git a/src/components/auth/DepartmentSelect.tsx b/src/components/auth/DepartmentSelect.tsx
index 7c00368..a54256e 100644
--- a/src/components/auth/DepartmentSelect.tsx
+++ b/src/components/auth/DepartmentSelect.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import { useGetDepartmentList } from '@/hooks/query';
 import { Control, Controller } from 'react-hook-form';
 import DropDown from 'wowds-ui/DropDown';
@@ -32,28 +33,35 @@ const DepartmentSelect = ({ control }: DepartmentSelectProps) => {
         }
       }}
       render={({ field }) => (
-        <DropDown
-          {...field}
-          label="학과"
-          placeholder="선택하세요"
-          onChange={({ selectedValue }) => {
-            field.onChange(selectedValue);
-          }}>
-          <React.Fragment key={`${field}-option`}>
-            {departmentList.map((department, index) => {
-              return (
-                <DropDownOption
-                  key={`${index}-dropdownOption`}
-                  text={department.name}
-                  value={department.code}
-                />
-              );
-            })}
-          </React.Fragment>
-        </DropDown>
+        <InputFormWrapper>
+          <DropDown
+            {...field}
+            label="학과"
+            placeholder="선택하세요"
+            onChange={({ selectedValue }) => {
+              field.onChange(selectedValue);
+            }}>
+            <React.Fragment key={`${field}-option`}>
+              {departmentList.map((department, index) => {
+                return (
+                  <DropDownOption
+                    key={`${index}-dropdownOption`}
+                    text={department.name}
+                    value={department.code}
+                  />
+                );
+              })}
+            </React.Fragment>
+          </DropDown>
+        </InputFormWrapper>
       )}
     />
   );
 };
 
 export default DepartmentSelect;
+
+const InputFormWrapper = styled.div`
+  height: 84.8px;
+  width: 100%;
+`;
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 220db89..71bf333 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -75,7 +75,7 @@ export const SignUp = () => {
         style={{
           display: 'flex',
           flexDirection: 'column',
-          gap: '24px',
+          gap: '10px',
           width: '100%'
         }}>
         <Controller
@@ -93,16 +93,18 @@ export const SignUp = () => {
             }
           }}
           render={({ field, fieldState }) => (
-            <TextField
-              label="이름"
-              error={fieldState.invalid}
-              ref={field.ref}
-              value={field.value}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              helperText={fieldState.error?.message}
-              placeholder="내용을 입력하세요"
-            />
+            <InputFormWrapper>
+              <TextField
+                label="이름"
+                error={fieldState.invalid}
+                ref={field.ref}
+                value={field.value}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                helperText={fieldState.error?.message}
+                placeholder="내용을 입력하세요"
+              />
+            </InputFormWrapper>
           )}
         />
         <Controller
@@ -121,16 +123,18 @@ export const SignUp = () => {
           }}
           render={({ field, fieldState }) => {
             return (
-              <TextField
-                label="학번"
-                error={fieldState.invalid}
-                ref={field.ref}
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-                helperText={fieldState.error?.message}
-                placeholder="내용을 입력하세요"
-              />
+              <InputFormWrapper>
+                <TextField
+                  label="학번"
+                  error={fieldState.invalid}
+                  ref={field.ref}
+                  value={field.value}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  helperText={fieldState.error?.message}
+                  placeholder="내용을 입력하세요"
+                />
+              </InputFormWrapper>
             );
           }}
         />
@@ -153,16 +157,18 @@ export const SignUp = () => {
             }
           }}
           render={({ field, fieldState }) => (
-            <TextField
-              label="전화번호"
-              error={fieldState.invalid}
-              ref={field.ref}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              value={formatPhoneNumberInProgress(field.value)}
-              helperText={fieldState.error?.message}
-              placeholder="내용을 입력하세요"
-            />
+            <InputFormWrapper>
+              <TextField
+                label="전화번호"
+                error={fieldState.invalid}
+                ref={field.ref}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                value={formatPhoneNumberInProgress(field.value)}
+                helperText={fieldState.error?.message}
+                placeholder="내용을 입력하세요"
+              />
+            </InputFormWrapper>
           )}
         />
         <Suspense fallback={<LoadingForm label="학과" />}>
@@ -205,22 +211,36 @@ export const SignUp = () => {
               }
             }}
             render={({ field }) => (
-              <DropDown
-                placeholder="선택하세요"
-                onChange={({ selectedValue }) => {
-                  field.onChange(selectedValue);
-                }}
-                defaultValue=""
-                value={field.value}
-                style={{ marginTop: '15px', flex: 1, width: '10rem' }}>
-                <DropDownOption text="@gmail.com" value="@gmail.com" />
-                <DropDownOption text="@naver.com" value="@naver.com" />
-                <DropDownOption
-                  text="@g.hongik.ac.kr"
-                  value="@g.hongik.ac.kr"
-                />
-                <DropDownOption text="@daum.net" value="@daum.net" />
-              </DropDown>
+              <TextFieldWrapper>
+                <DropDown
+                  placeholder="선택하세요"
+                  {...field}
+                  onChange={({ selectedValue }) => {
+                    field.onChange(selectedValue);
+                  }}
+                  style={{ marginTop: '22px', flex: 1, width: '100%' }}>
+                  <DropDownOption
+                    key="gmail"
+                    text="@gmail.com"
+                    value="@gmail.com"
+                  />
+                  <DropDownOption
+                    key="naver"
+                    text="@naver.com"
+                    value="@naver.com"
+                  />
+                  <DropDownOption
+                    key="hongik"
+                    text="@g.hongik.ac.kr"
+                    value="@g.hongik.ac.kr"
+                  />
+                  <DropDownOption
+                    key="daum"
+                    text="@daum.net"
+                    value="@daum.net"
+                  />
+                </DropDown>
+              </TextFieldWrapper>
             )}
           />
         </EmailFieldWrapper>
@@ -231,6 +251,9 @@ export const SignUp = () => {
           align="center"
           css={css`
             margin-top: 16px;
+            @media (max-height: 750px) {
+              bottom: 0rem;
+            }
             position: absolute;
             bottom: 1.75rem;
             width: 100%;
@@ -316,6 +339,9 @@ export const SignUp = () => {
 const Container = styled(Flex)`
   position: relative;
   flex-direction: column;
+  @media (max-height: 765px) {
+    min-height: 105vh;
+  }
   min-height: calc(100vh - 54px);
   justify-content: flex-start;
   background-color: ${color.mono50};
@@ -346,8 +372,14 @@ const GuideLink = styled(Link)<{ color?: colorKey }>`
   }
 `;
 
+const InputFormWrapper = styled.div`
+  height: 84.8px;
+  width: 100%;
+`;
+
 const TextFieldWrapper = styled.div`
   flex: 1;
+  height: 84.8px;
   width: 50%;
 `;