diff --git a/pages/login/index.tsx b/pages/login/index.tsx
index 1def5f9..9e4cff0 100644
--- a/pages/login/index.tsx
+++ b/pages/login/index.tsx
@@ -1,28 +1,25 @@
-import { Box, Grid } from '@mui/material';
+import Image from 'next/image';
+import cloudImage from 'src/assets/images/cloud.png';
 import LoginBox from 'src/components/User/LoginBox';
 
 export default function LoginPage() {
   return (
-    <Box
-      sx={{
-        width: '100%',
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
         height: '100vh',
-        backgroundColor: '#F5F8FC',
-        paddingTop: '100px',
       }}
     >
-      <Grid container alignItems="center">
-        <Grid item xs={9}>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-            }}
-          >
-            <LoginBox />
-          </div>
-        </Grid>
-      </Grid>
-    </Box>
+      <Image
+        src={cloudImage}
+        alt="background"
+        fill
+        objectFit="cover"
+        objectPosition="center"
+      />
+      <LoginBox />
+    </div>
   );
 }
diff --git a/pages/register/index.tsx b/pages/register/index.tsx
index 7c32bd1..4b311f3 100644
--- a/pages/register/index.tsx
+++ b/pages/register/index.tsx
@@ -1,17 +1,25 @@
-import { Box } from '@mui/material';
-import TemperatureBox from 'src/components/MainLayout/InfoBox/Temperature';
+import Image from 'next/image';
+import cloudImage from 'src/assets/images/cloud.png';
 import RegisterBox from 'src/components/User/RegisterBox';
 
 export default function RegisterPage() {
   return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      sx={{ width: '100%', height: '100vh', backgroundColor: '#F5F8FC' }}
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+      }}
     >
-      <TemperatureBox />
+      <Image
+        src={cloudImage}
+        alt="background"
+        fill
+        objectFit="cover"
+        objectPosition="center"
+      />
       <RegisterBox />
-    </Box>
+    </div>
   );
 }
diff --git a/src/assets/images/cloud.png b/src/assets/images/cloud.png
new file mode 100644
index 0000000..9bb5a84
Binary files /dev/null and b/src/assets/images/cloud.png differ
diff --git a/src/assets/images/user.png b/src/assets/images/user.png
index c72985e..a5bb254 100644
Binary files a/src/assets/images/user.png and b/src/assets/images/user.png differ
diff --git a/src/components/MainLayout/InfoBox/Temperature.tsx b/src/components/MainLayout/InfoBox/Temperature.tsx
deleted file mode 100644
index d890f56..0000000
--- a/src/components/MainLayout/InfoBox/Temperature.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Box, Tooltip, Typography } from '@mui/material';
-import lottie from 'lottie-web';
-import { useEffect, useRef, useState } from 'react';
-
-import weatherSky from '../../../assets/data/weatherSky';
-import { WeatherType } from '../../../utils/types';
-import useWeatherDataStore from '../../../utils/zustand/weather/WeatherDataStore';
-
-type WeatherProps = {
-  weatherData: WeatherType | undefined;
-};
-
-const WeatherSkyLottie = ({ weatherData }: WeatherProps) => {
-  // weatherData에 따라 다른 애니메이션 데이터를 선택
-  const getAnimationData = () => {
-    if (weatherData?.sky === 'SUNNY') {
-      return require('../../../assets/lotties/weather/sunny.json');
-    } else if (weatherData?.sky === 'CLOUDY') {
-      return require('../../../assets/lotties/weather/cloudy.json');
-    } else if (weatherData?.sky === 'OVERCAST') {
-      return require('../../../assets/lotties/weather/rainy.json');
-    } else if (weatherData?.sky === 'SNOWY') {
-      return require('../../../assets/lotties/weather/snow.json');
-    }
-    // 기본값으로 사용할 애니메이션 데이터
-    return require('../../../assets/lotties/weather/sunny.json');
-  };
-
-  const animationData = getAnimationData();
-  // const animationData = require('../../assets/lotties/allRain.json');
-
-  //lottie
-  const element = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const animation = lottie.loadAnimation({
-      container: element.current as HTMLDivElement,
-      renderer: 'svg',
-      loop: true,
-      autoplay: true,
-      animationData: animationData,
-    });
-
-    return () => {
-      animation.destroy(); // lottie-web 인스턴스 제거
-    };
-  }, [weatherData]);
-  return (
-    <Tooltip title={weatherSky(weatherData?.sky)} arrow>
-      <Box ref={element} style={{ height: 350 }}></Box>
-    </Tooltip>
-  );
-};
-
-export default function TemperatureBox() {
-  const { weatherData } = useWeatherDataStore();
-
-  const [windChill, setWindChill] = useState<number>(0);
-
-  useEffect(() => {
-    setWindChill(weatherData.windChill | 0);
-  }, [weatherData]);
-
-  return (
-    <Box sx={{ marginLeft: 11, marginBottom: 10, marginRight: 16 }}>
-      <WeatherSkyLottie weatherData={weatherData} />
-      <Typography
-        display="flex"
-        justifyContent="center"
-        fontSize="25pt"
-        sx={{ mt: 1 }}
-      >
-        {windChill} °C
-      </Typography>
-    </Box>
-  );
-}
diff --git a/src/components/User/InputBox.tsx b/src/components/User/InputBox.tsx
index 1e3ea3a..a55e2aa 100644
--- a/src/components/User/InputBox.tsx
+++ b/src/components/User/InputBox.tsx
@@ -14,8 +14,8 @@ export default function InputBox({ type, value, onChange, onKeyPress }: Props) {
       sx={{
         border: '1px solid #ccc',
         borderRadius: '0.4rem',
-        width: '73%',
-        height: '2.5rem',
+        width: '65%',
+        height: '0.4rem',
         display: 'flex',
         alignItems: 'center',
         padding: '1rem', // 내부 여백
diff --git a/src/components/User/LoginBox.tsx b/src/components/User/LoginBox.tsx
index 84fcc3b..8665344 100644
--- a/src/components/User/LoginBox.tsx
+++ b/src/components/User/LoginBox.tsx
@@ -1,11 +1,11 @@
-import { Box, Card } from '@mui/material';
+import { Card } from '@mui/material';
 import Image from 'next/image';
 import router from 'next/router';
 import { useState } from 'react';
 import useCheckAuth from 'src/api/hook/CheckAuthHook';
 import { useLogin } from 'src/api/hook/UserHook';
 
-import logo from '../../assets/images/bang.png';
+import logoUrl from '../../../public/title-logo.png';
 import InputBox from './InputBox';
 import QuestionLink from './QuestionLink';
 import SubmitButton from './SubmitButton';
@@ -56,19 +56,20 @@ export default function LoginBox() {
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'column',
+        zIndex: 1,
+        backgroundColor: 'rgba(255, 255, 255, 0.8)',
       }}
     >
-      <Box sx={{ px: 1.5 }}>
-        <Image height={50} src={logo} alt="logo" />
-      </Box>
-      <div
+      <Image
+        src={logoUrl}
+        alt="logo"
         style={{
-          fontSize: '2rem',
-          marginBottom: '3.5rem',
+          width: '19rem',
+          height: '4rem',
+          marginBottom: '5rem',
+          marginTop: '1rem',
         }}
-      >
-        Fashion Cloud
-      </div>
+      />
       <UserLabel label="이메일*" />
       <InputBox
         value={email}
diff --git a/src/components/User/RegisterBox.tsx b/src/components/User/RegisterBox.tsx
index 3431c4a..73ec320 100644
--- a/src/components/User/RegisterBox.tsx
+++ b/src/components/User/RegisterBox.tsx
@@ -4,6 +4,7 @@ import router from 'next/router';
 import { useState } from 'react';
 import { useSignup } from 'src/api/hook/UserHook';
 
+import logoUrl from '../../../public/title-logo.png';
 import userImage from '../../assets/images/user.png';
 import InputBox from './InputBox';
 import QuestionLink from './QuestionLink';
@@ -45,21 +46,30 @@ export default function RegisterBox() {
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'column',
+        zIndex: 1,
+        backgroundColor: 'rgba(255, 255, 255, 0.8)',
       }}
     >
+      <Image
+        style={{
+          width: '19rem',
+          height: '4rem',
+          marginBottom: '1rem',
+          marginTop: '1rem',
+        }}
+        src={logoUrl}
+        alt="logo"
+      />
       <div
         style={{
-          fontSize: '2rem',
+          position: 'relative',
         }}
       >
-        Fashion Cloud
-      </div>
-      <div style={{ position: 'relative' }}>
         <Image
           alt="사용자 프로필 사진"
           src={userImage}
-          width={120}
-          height={120}
+          width={115}
+          height={110}
         />
         <button
           style={{
@@ -68,7 +78,7 @@ export default function RegisterBox() {
             cursor: 'pointer',
             width: '28px',
             height: '28px',
-            bottom: '18px',
+            bottom: '9px',
             right: '18px',
             border: 'none',
             color: 'white',
diff --git a/src/components/common/MainDrawer.tsx b/src/components/common/MainDrawer.tsx
index 118505b..403d018 100644
--- a/src/components/common/MainDrawer.tsx
+++ b/src/components/common/MainDrawer.tsx
@@ -55,6 +55,10 @@ const MiniDrawer = styled(Drawer, {
 export default function MainDrawer() {
   const { pathname } = useRouter();
 
+  if (pathname === '/login' || pathname === '/register') {
+    return null;
+  }
+
   const Menus = [
     { title: 'Home', src: '/', icon: <HomeIcon style={{ fontSize: 30 }} /> },
     {