diff --git a/frontend/README.md b/frontend/README.md
index 3c4fd2f..ec6de00 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,54 +1,10 @@
 # React + TypeScript + Vite
 
-```js
-npm run dev
-```
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+### 설치 및 실행
+```bash
+# 의존성 설치
+npm install
 
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+# 개발 서버 실행
+npm run dev
+```
\ No newline at end of file
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 5de2b5e..7b6d507 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -16,7 +16,7 @@ export const Navbar = ({ style, link = "/" }: NavbarProps) => {
       style={style}
     >
       {/* 내부 컨텐츠 컨테이너 */}
-      <div className="max-w-[1280px] mx-auto flex items-center justify-between">
+      <div className="ml-0 flex items-center">
         <Link to={link}>
           {/* 로고 컨테이너 - 호버/클릭 애니메이션 적용 */}
           <motion.div
diff --git a/frontend/src/pages/Drawing.tsx b/frontend/src/pages/Drawing.tsx
index 6b9588d..c9b3431 100644
--- a/frontend/src/pages/Drawing.tsx
+++ b/frontend/src/pages/Drawing.tsx
@@ -41,6 +41,15 @@ export default function Drawing() {
   // 캔버스 참조
   const canvasRef = useRef<ReactSketchCanvasRef>(null);
 
+  // Blob URL 메모리 정리 (cleanup)
+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
   // type 유효성 검사
   const validateType = (param: string | undefined): DrawingType => {
     if (!param || !['house', 'tree', 'person'].includes(param)) {
@@ -99,6 +108,8 @@ export default function Drawing() {
   // 파일 처리 함수
   const handleFileChange = (file: File) => {
     setUploadedFile(file);
+    const previewURL = URL.createObjectURL(file); // Blob URL 생성 (미리보기)
+    setPreviewUrl(previewURL);
   };
 
   const handleDragOver = (e: React.DragEvent) => {
@@ -230,9 +241,9 @@ export default function Drawing() {
             </motion.div>
 
             {/* 그리기/업로드 영역 */}
-            <div className="relative w-[900px] h-[500px] mx-auto">
+            <div className="relative w-full max-w-[900px] h-[500px] mx-auto overflow-hidden">
               {mode === 'draw' ? (
-                <div className="drawing-container relative">
+                <div className="drawing-container relative w-full h-full">
                   {/* ToolBar 컴포넌트 */}
                   <motion.div 
                     className="tools-container"
@@ -273,7 +284,7 @@ export default function Drawing() {
                   )}
 
                   {/* 캔버스 */}
-                  <div className="drawing-area">
+                  <div className="drawing-area w-full h-full">
                     <ReactSketchCanvas
                       ref={canvasRef}
                       width="100%"
@@ -287,7 +298,7 @@ export default function Drawing() {
               ) : (
                 // 업로드 모드
                 <div 
-                  className={`upload-area ${isDragging ? 'dragging' : ''}`}
+                  className={`upload-area w-full h-full ${isDragging ? 'dragging' : ''}`}
                   onDragOver={handleDragOver}
                   onDragLeave={handleDragLeave}
                   onDrop={handleDrop}
@@ -307,9 +318,9 @@ export default function Drawing() {
                           setUploadedFile(null);
                           setPreviewUrl(null);
                         }}
-                        className="absolute -top-3 -right-3 w-8 h-8 bg-white rounded-full 
+                        className="absolute -top-1 -right-1 w-8 h-8 bg-white rounded-full 
                                   flex items-center justify-center shadow-md hover:bg-gray-100 
-                                  transition-all duration-200 border border-gray-200 z-10"
+                                  transition-all duration-200 border border-gray-200 z-[1000]"
                       >
                         ❌
                       </button>
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 71964c4..4a77cd5 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,73 +1,155 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { motion, useMotionValue, useSpring } from 'framer-motion';
 import { Navbar } from '../components/Navbar';
 import noiseImage from '../assets/images/noise.png';
 
+// 자석 효과 설정
+const SPRING_CONFIG = { damping: 100, stiffness: 400 };
+const MAX_DISTANCE = 0.5;
 
-const Home: React.FC = () => {
-  const circleRef = useRef<HTMLDivElement>(null);
-  const innerCircleRef = useRef<HTMLDivElement>(null);
-  const textRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
+// 자석 효과 버튼 컴포넌트
+const MagneticButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const buttonRef = useRef<HTMLDivElement>(null);
+  const springX = useSpring(x, SPRING_CONFIG);
+  const springY = useSpring(y, SPRING_CONFIG);
 
-  // 'layer in view' 트리거 효과 (IntersectionObserver 사용)
   useEffect(() => {
-    const textElement = textRef.current;
-    const buttonElement = buttonRef.current;
+    const calculateDistance = (e: MouseEvent) => {
+      if (buttonRef.current) {
+        const rect = buttonRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const distanceX = e.clientX - centerX;
+        const distanceY = e.clientY - centerY;
 
-    if (textElement && buttonElement) {
-      const observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            textElement.classList.add('in-view'); // 애니메이션 트리거
-            buttonElement.classList.add('in-view'); // 버튼 애니메이션 트리거
-          }
-        });
-      }, { threshold: 0.5 }); // 50% 보였을 때 트리거
+        if (isHovered) {
+          x.set(distanceX * MAX_DISTANCE);
+          y.set(distanceY * MAX_DISTANCE);
+        } else {
+          x.set(0);
+          y.set(0);
+        }
+      }
+    };
 
-      observer.observe(textElement);
+    document.addEventListener("mousemove", calculateDistance);
+    return () => document.removeEventListener("mousemove", calculateDistance);
+  }, [isHovered, x, y]);
 
-      return () => {
-        if (textElement) {
-          observer.unobserve(textElement);
-        }
-      };
-    }
-  }, []);
+  return (
+    <motion.div
+      ref={buttonRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        x: springX,
+        y: springY,
+      }}
+    >
+      <button
+        onClick={onClick}
+        className="py-3.5 px-9 text-white rounded-full text-xl shadow-lg transition-colors duration-200"
+        style={{
+          backgroundColor: '#0D3272',
+          opacity: 1,
+          zIndex: 2,
+        }}
+      >
+        심리 분석 하러 가기
+      </button>
+    </motion.div>
+  );
+};
+
+const Home: React.FC = () => {
+  const circleRef = useRef<HTMLDivElement>(null);
+  const innerCircleRef = useRef<HTMLDivElement>(null);
 
   return (
     <div className="relative w-full h-screen bg-white overflow-visible">
       {/* 원형 배경 */}
-      <div
+      <motion.div
         ref={circleRef}
         className="absolute rounded-full overflow-hidden"
+        initial={{ opacity: 0, scale: 1 }}
+        animate={{ 
+          opacity: 1, 
+          scale: 0.8,
+          rotateZ: 360 // 360도 회전 애니메이션
+        }}
+        transition={{
+          // 불투명도 애니메이션
+          opacity: { 
+            duration: 2, 
+            ease: [0.29, 0, 1, 0.69],
+            delay: 0 
+          },
+          scale: { 
+            // 크기 애니메이션
+            duration: 2, 
+            ease: [0.29, 0, 1, 0.69],
+            delay: 0 
+          },
+          // 회전 애니메이션
+          rotateZ: {
+            duration: 6,
+            ease: [0, 0, 1, 1],
+            repeat: Infinity,
+            repeatType: "loop"
+          }
+        }}
+        whileInView={{
+          opacity: 1,
+          scale: 1,
+          transition: {
+            duration: 2.1,
+            ease: [0.98, 0.27, 0.56, 1],
+            delay: 0.1
+          }
+        }}
+        viewport={{ once: true }}
         style={{
-          width: '1400px', // 너비
+          width: '1300px', // 너비
           height: '1000px', // 높이
-          top: '-400px', // 위치
-          left: '50%', // 좌우 중앙 정렬
-          transform: 'translateX(-50%) perspective(1200px) scale(0.8)', // 중앙 정렬, perspective, scale
+          top: '-770px', // 위치
+          left: 0,
+          right: 0,
+          margin: '0 auto',  
           background: 'conic-gradient(from 0deg at 50% 50%, #ff8000, #ffc300)', // conic gradient
           filter: 'blur(100px)', // Blur 효과 추가
           transition: 'transform 0.8s ease', // 부드러운 트랜지션 효과
           opacity: 1, // 불투명도
         }}
       >
-        {/* 배경 이미지 추가 */}
-        <div
+        <motion.div
+          animate={{ 
+            rotateZ: 360,
+            scale: [0.8, 1, 0.8]
+          }}
+          transition={{
+            duration: 6,
+            ease: "linear",
+            repeat: Infinity,
+            repeatType: "mirror"
+          }}
           style={{
-            backgroundImage: noiseImage, // public 폴더에 저장된 이미지 경로 사용
+            backgroundImage: `url(${noiseImage})`, // public 폴더에 저장된 이미지 경로 사용
             backgroundRepeat: 'repeat', // 타일 방식으로 반복
             backgroundSize: '100%', // 크기를 100%로 맞추기
             opacity: 0.1, // 반투명 처리
-            backgroundBlendMode: 'color-dodge', // 블렌딩 모드 설정
+            mixBlendMode: 'overlay',
             width: '100%',
             height: '100%',
             position: 'absolute',
             top: '0',
             left: '0',
+            transformOrigin: 'center center',
           }}
         />
-      </div>
+      </motion.div>
 
       {/* 전체 화면 밝기 조정 (배경 밝게 설정) */}
       <div
@@ -77,59 +159,64 @@ const Home: React.FC = () => {
           opacity: 1, // opacity 1로 설정
           overflow: 'visible', // overflow visible 설정
         }}
-      ></div>
+      />
 
-      {/* 새로운 원형 배경 */}
-      <div
+      {/* 흰색 원형 배경 애니메이션 */}
+      <motion.div
         ref={innerCircleRef}
-        className="absolute opacity-0 transition-opacity duration-1000 ease-in-out"
+        initial={{ y: -200, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 1, ease: "easeOut" }} // 1초동안 부드러운 트랜지션 
+        className="absolute"
         style={{
           top: '-524px', // 고정된 위치
-          left: '50%', // 좌우 중앙 정렬
-          transform: 'translateX(-50%)', // 좌우 정확히 가운데 정렬
+          left: 0,
+          right: 0,
+          margin: '0 auto',
           width: '736px', // 고정 크기
           height: '736px', // 고정 크기
           backgroundColor: '#FFFFFF', // 흰색 배경
-          opacity: 1, // 시작 시 opacity 0으로 설정
           borderRadius: '50%', // 원형 모양
           zIndex: 1,
-          
         }}
       />
+
       {/* 상단 네비게이션 바 */}
-            <div className="fixed top-0 left-0 w-full z-50">
-              <Navbar link="/" />
-            </div>
+      <div className="fixed top-0 left-0 w-full z-50">
+          <Navbar link="/" />
+      </div>
 
-      
       {/* Heading Text - 'HTP Test' */}
-      <div
-        ref={textRef}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1.2, duration: 0.8 }} // 1.2초 지연 후 0.8초 동안 페이드인 
         className="absolute w-full text-center"
         style={{
           top: '50%', // 텍스트가 중앙에 오도록
           left: '50%',
           transform: 'translate(-50%, -50%)', // 중앙 정렬
           fontFamily: 'Sansita Swashed, sans-serif', // 폰트 설정
-          fontWeight: 'regular', // 폰트 두께
+          fontWeight: '300', // 폰트 두께
           fontStyle: 'italic', // 이탤릭체 적용
           color: '#3B3B3B', // 텍스트 색상
-          fontSize: '64px', // 텍스트 크기 설정
+          fontSize: '96px', // 텍스트 크기 설정
           lineHeight: '1.2',
           width: '1216px', // 너비 설정
           whiteSpace: 'pre-wrap',
           wordWrap: 'break-word',
-          opacity: 1, // 바로 보이도록 설정 (애니메이션 없음)
-          transition: 'none', // 애니메이션 없애기
+          zIndex: 2,
         }}
       >
         HTP Test
-      </div>
+      </motion.div>
 
-      {/* 추가 텍스트 - "집-나무-사람 그림으로 심리를 분석해보세요!" */}
-      <div
-        ref={textRef}
-        className="absolute w-full text-center opacity-0 translate-y-10 transition-all duration-1000 ease-out"
+      {/* 부가 설명 텍스트 - "집-나무-사람 그림으로 심리를 분석해보세요!" */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1.8, duration: 0.8 }} // 1.8초 지연 후 0.8초 동안 페이드인 
+        className="absolute w-full text-center"
         style={{
           top: 'calc(50% + 100px)', // 텍스트 위치는 HTP Test 아래로
           left: '50%',
@@ -137,28 +224,27 @@ const Home: React.FC = () => {
           fontFamily: 'Satashi, sans-serif', // 폰트 설정
           color: '#3B3B3B',
           fontSize: '24px', // 텍스트 크기 설정
-          opacity: 1, // 시작 시 opacity 0으로 설정
+          zIndex: 2,
         }}
       >
         집-나무-사람 그림으로 심리를 분석해보세요!
-      </div>
+      </motion.div>
 
       {/* 버튼 */}
-      <button
-        ref={buttonRef}
-        onClick={() => window.location.href = '/select'} // 페이지 이동
-        className="absolute mt-8 py-3 px-12 text-white rounded-full text-xl shadow-lg hover:bg-blue-600 transition-colors duration-200"
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 2.6, duration: 0.8 }} // 2.6초 지연 후 0.8초 동안 페이드인 
+        className="absolute"
         style={{
-          backgroundColor: '#0D3272', // 버튼 색상 변경
-          top: 'calc(50% + 180px)', // 버튼은 텍스트 아래에 위치
+          top: 'calc(50% + 180px)',
           left: '50%',
-          transform: 'translateX(-50%)', // 좌우 중앙 정렬
-          opacity: 1, // 바로 보이도록 설정
-          zIndex: 2, // 버튼이 다른 요소들 위에 오도록 설정
+          transform: 'translateX(-50%)',
+          zIndex: 2,
         }}
       >
-        심리 분석 하러 가기
-      </button>
+      <MagneticButton onClick={() => window.location.href = '/select'} /> 
+      </motion.div>
     </div>
   );
 };
diff --git a/frontend/src/styles/pages/drawing.css b/frontend/src/styles/pages/drawing.css
index 1d8c327..77d4702 100644
--- a/frontend/src/styles/pages/drawing.css
+++ b/frontend/src/styles/pages/drawing.css
@@ -1,279 +1,281 @@
 .drawing-page-container {
-    width: 100%;
-    max-width: 1100px;
-    padding: 2.5rem 4rem 4rem 4rem; 
-    margin-top: -1rem;
-    background: linear-gradient(180deg, #DE523A 0%, #FA8E41 100%);
-    border-radius: 32px;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-    position: relative;
-    overflow: hidden;
+  width: 100%;
+  max-width: 1100px;
+  padding: 2.5rem 4rem 4rem 4rem; 
+  margin: -1rem auto 0;
+  background: linear-gradient(180deg, #DE523A 0%, #FA8E41 100%);
+  border-radius: 32px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
 }
-  
-  /* Noise texture overlay */
-  .drawing-page-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('../../assets/images/noise.png');
-    background-repeat: repeat;
-    opacity: 0.1;
-    mix-blend-mode: overlay;
-    pointer-events: none;
-    z-index: 3;
-  }
-  
-  /* Conic Animation 1 */
-  .conic-animation-1 {
-    position: absolute;
-    top: -469px;
-    bottom: 27px;
-    left: 187px;
-    right: 187px;
-    width: 823px;
-    height: 823px;
-    border-radius: 50%;
-    background: conic-gradient(from 0deg, #FFFFFF, #FFF3D4, #FFD54F);
-    opacity: 1;
-    mix-blend-mode: overlay;
-    filter: blur(100px);
-    transform-style: preserve-3d;
-    perspective: 1200px;
-    z-index: 1;
-  }
-  
-  .conic-animation-1::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: inherit;
-    border-radius: inherit;
-    transform: scale(0.8);
-    opacity: 1;
-    animation: mirrorEffect1 3s linear infinite;
-  }
-  
-  /* Conic Animation 2 */
-  .conic-animation-2 {
-    position: absolute;
-    top: -469px;
-    bottom: 27px;
-    left: 187px;
-    right: 187px;
-    width: 823px;
-    height: 823px;
-    border-radius: 50%;
-    background: conic-gradient(from 0deg, #FFE5B4, #FFA640, #E65C12);
-    opacity: 1;
-    filter: blur(100px);
-    transform-style: preserve-3d;
-    perspective: 1200px;
-    z-index: 2;
+
+/* Noise texture overlay */
+.drawing-page-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('../../assets/images/noise.png');
+  background-repeat: repeat;
+  opacity: 0.1;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  z-index: 3;
+}
+
+/* Conic Animation 1 */
+.conic-animation-1 {
+  position: absolute;
+  top: -469px;
+  bottom: 27px;
+  left: 187px;
+  right: 187px;
+  width: 823px;
+  height: 823px;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, #FFFFFF, #FFF3D4, #FFD54F);
+  opacity: 1;
+  mix-blend-mode: overlay;
+  filter: blur(100px);
+  transform-style: preserve-3d;
+  perspective: 1200px;
+  z-index: 1;
+}
+
+.conic-animation-1::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: inherit;
+  border-radius: inherit;
+  transform: scale(0.8);
+  opacity: 1;
+  animation: mirrorEffect1 3s linear infinite;
+}
+
+/* Conic Animation 2 */
+.conic-animation-2 {
+  position: absolute;
+  top: -469px;
+  bottom: 27px;
+  left: 187px;
+  right: 187px;
+  width: 823px;
+  height: 823px;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, #FFE5B4, #FFA640, #E65C12);
+  opacity: 1;
+  filter: blur(100px);
+  transform-style: preserve-3d;
+  perspective: 1200px;
+  z-index: 2;
+}
+
+.conic-animation-2::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: inherit;
+  border-radius: inherit;
+  transform: scale(0.8);
+  opacity: 1;
+  animation: mirrorEffect2 3s linear infinite;
+}
+
+@keyframes mirrorEffect1 {
+  0% {
+    transform: scale(0.8) rotate(0deg);
   }
-  
-  .conic-animation-2::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: inherit;
-    border-radius: inherit;
-    transform: scale(0.8);
-    opacity: 1;
-    animation: mirrorEffect2 3s linear infinite;
+  100% {
+    transform: scale(0.8) rotate(360deg);
   }
-  
-  @keyframes mirrorEffect1 {
-    0% {
-      transform: scale(0.8) rotate(0deg);
-    }
-    100% {
-      transform: scale(0.8) rotate(360deg);
-    }
+}
+
+@keyframes mirrorEffect2 {
+  0% {
+    transform: scale(0.8) rotate(0deg);
   }
-  
-  @keyframes mirrorEffect2 {
-    0% {
-      transform: scale(0.8) rotate(0deg);
-    }
-    100% {
-      transform: scale(0.8) rotate(360deg);
-    }
+  100% {
+    transform: scale(0.8) rotate(360deg);
   }
-  
-  /* Content z-index hierarchy */
-  .drawing-page-container h1,
-  .drawing-page-container .flex.justify-center.gap-4 {
-    position: relative;
-    z-index: 10;
+}
+
+/* Content z-index hierarchy */
+.drawing-page-container h1,
+.drawing-page-container .flex.justify-center.gap-4 {
+  position: relative;
+  z-index: 10;
+}
+
+.drawing-container,
+.upload-area {
+  position: relative;
+  width: 100%;         
+  max-width: 900px;    
+  height: 500px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 30px;
+  z-index: 5;
+}
+
+.drawing-container {
+  overflow: visible;
+}
+
+.drawing-area {
+  width: 100%;
+  height: 100%;
+  border-radius: 30px;
+  overflow: hidden;
+}
+
+.pen-cursor {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E") 0 24, auto !important;
+}
+
+.drawing-area canvas[data-tool="eraser"] {
+  cursor: default !important;
+}
+
+.tools-container {
+  position: absolute;
+  right: 16px;  
+  top: -50px;   
+  display: flex;
+  flex-direction: row; 
+  gap: 8px;
+  z-index: 6;
+}
+
+.tool-button {
+  width: 36px;  
+  height: 36px;
+  background: white;
+  border-radius: 8px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.tool-button.active {
+  background-color: white;
+  color: #DE523A;
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.tool-button:not(.active) {
+  background-color: rgba(255, 255, 255, 0.9);
+  color: #666;
+}
+
+.tool-button:not(.active):hover {
+  background-color: white;
+  transform: scale(1.05);
+}
+
+.drawing-container {
+  overflow: visible;
+}
+
+.drawing-area {
+  width: 100%;
+  height: 100%;
+  border-radius: 30px;
+  overflow: hidden;
+}
+
+.upload-area {
+  position: relative;
+  width: 900px;
+  height: 500px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 30px;
+  border: 2px dashed #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  cursor: pointer;
+  z-index: 5;
+}
+
+.upload-preview-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-area.dragging {
+  border-color: #DE523A;
+  background-color: rgba(255, 255, 255, 0.98);
+}
+
+.upload-area img,
+.upload-area label,
+.upload-area button {
+  z-index: 5;
+}
+
+.submit-button {
+  width: 180px;
+  height: 40px;
+  background-color: #ED7926;
+  color: #FFFFFF;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s;
+  position: relative;
+  z-index: 10;
+  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.25);
+  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
+}
+
+.submit-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0px 12px 10px -10px rgba(0, 0, 0, 0.25);
+  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
+}
+
+.submit-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+@media (max-width: 1024px) {
+  .drawing-page-container {
+    margin: 0 1rem;
+     padding: 2rem;
   }
-  
+
   .drawing-container,
   .upload-area {
-    position: relative;
-    width: 900px;
-    height: 500px;
-    margin: 0 auto;
-    background: white;
-    border-radius: 30px;
-    z-index: 5;
-  }
-  
-  .drawing-container {
-    overflow: visible;
-  }
-  
-  .drawing-area {
     width: 100%;
-    height: 100%;
-    border-radius: 30px;
-    overflow: hidden;
-  }
-
-  .pen-cursor {
-    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E") 0 24, auto !important;
-  }
-  
-  .drawing-area canvas[data-tool="eraser"] {
-    cursor: default !important;
+    max-width: 1000px;
   }
+}
 
-  .tools-container {
-    position: absolute;
-    right: 16px;  
-    top: -50px;   
-    display: flex;
-    flex-direction: row; 
-    gap: 8px;
-    z-index: 6;
-  }
-  
-  .tool-button {
-    width: 36px;  
-    height: 36px;
-    background: white;
-    border-radius: 8px;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .tool-button.active {
-    background-color: white;
-    color: #DE523A;
-    transform: scale(1.1);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  }
-  
-  .tool-button:not(.active) {
-    background-color: rgba(255, 255, 255, 0.9);
-    color: #666;
-  }
-  
-  .tool-button:not(.active):hover {
-    background-color: white;
-    transform: scale(1.05);
-  }
-  
-  .drawing-container {
-    overflow: visible;
-  }
-  
-  .drawing-area {
-    width: 100%;
-    height: 100%;
-    border-radius: 30px;
-    overflow: hidden;
-  }
-  
+@media (max-width: 768px) {
+  .drawing-container,
   .upload-area {
-    position: relative;
-    width: 900px;
-    height: 500px;
-    margin: 0 auto;
-    background: white;
-    border-radius: 30px;
-    border: 2px dashed #e5e7eb;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    cursor: pointer;
-    z-index: 5;
-  }
-  
-  .upload-preview-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .upload-area.dragging {
-    border-color: #DE523A;
-    background-color: rgba(255, 255, 255, 0.98);
-  }
-  
-  .upload-area img,
-  .upload-area label,
-  .upload-area button {
-    z-index: 5;
-  }
-  
- .submit-button {
-    width: 180px;
-    height: 40px;
-    background-color: #ED7926;
-    color: #FFFFFF;
-    border-radius: 8px;
-    font-weight: 500;
-    transition: all 0.2s;
-    position: relative;
-    z-index: 10;
-    box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.25);
-    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
-  }
-  
-  .submit-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0px 12px 10px -10px rgba(0, 0, 0, 0.25);
-    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
-  }
-  
-  .submit-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none;
-  }
-  
-@media (max-width: 1024px) {
-    .drawing-page-container {
-      margin: 0 1rem;
-    }
-  
-    .drawing-container,
-    .upload-area {
-      width: 100%;
-      max-width: 1000px;
-    }
+    height: 450px;  
   }
-  
-  @media (max-width: 768px) {
-    .drawing-container,
-    .upload-area {
-      height: 450px;  
-    }
-  }
\ No newline at end of file
+}
\ No newline at end of file