diff --git a/client/src/App.css b/client/src/App.css
index 9b6c41f2e4d7122fdb0d7a58e3e6358292f4321e..b5ce7dcf05f7e3cb3ecc9ba4635d878e4892d637 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -2,12 +2,32 @@
 
 body {
   font-family: "Noto Sans KR", sans-serif !important;
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+}
+
+#root {
+  width: 100%;
+  min-height: 100%;
+}
+
+#footer{
+  position: relative;
+  bottom: 1em;
+  padding-top: 2em;
+}
 
+.form-check-input{
+  cursor: pointer;
+  box-shadow: none !important;
 }
 
 .form-check-input:checked {
   background-color: #04AB70 !important;
-}
+  border: none;
+  }
 
 #btnlink {
   color: white !important;
@@ -56,7 +76,6 @@ body {
   width: 50%;
   height: 6em;
   object-fit: cover;
-
 }
 
 #socialLink {
@@ -70,6 +89,7 @@ body {
   width: fit-content;
 }
 
+
 @media (max-width: 767.98px) { 
   body {
     padding: 30px;
@@ -99,15 +119,16 @@ body {
     padding-left: 50px;
     padding-right: 50px;
     margin: auto;
-
   }
 
   .container-fluid {
     max-width: 1000px !important;
+    min-height: 90%;
+    
   }
+
   .container-fluid .row #stickyy {
     position: sticky !important;
-    position: -webkit-sticky; 
     top: 40px;
     width: fit-content;
     height: fit-content;
diff --git a/client/src/App.js b/client/src/App.js
index bdcdd06ad0b4f6f3b0d8529a1f48850bbfa44fbf..e366658d6c6d38e914d0ba61596afe7ef3c71160 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -7,6 +7,7 @@ import LoginPage from './pages/LoginPage';
 import LocalCodePage from './pages/LocalCodePage';
 import PrivateRoute from './utils/PrivateRoutes';
 import PageNotFound from './components/PageNotFound';
+import Footer from './components/Footer';
 
 
 function App() {
@@ -17,6 +18,7 @@ function App() {
         <Route exact path='/' component={Home} />
         <Route path='/signup' component={SignupPage} />
         <Route path='/login' component={LoginPage} />
+        <Route path='/loc' component={LocalCodePage} />
 
         <PrivateRoute path='/local_code'>
           <LocalCodePage />
@@ -24,6 +26,7 @@ function App() {
 
         <Route component={PageNotFound} />
       </Switch>
+      <Footer />
     </Router>
 
   );
diff --git a/client/src/components/Donation.js b/client/src/components/Donation.js
new file mode 100644
index 0000000000000000000000000000000000000000..fbea1f765c70115e0737942c2f47a0f49672da06
--- /dev/null
+++ b/client/src/components/Donation.js
@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react'
+import { Row, Card, Button, Col, Modal, } from 'react-bootstrap';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import '../App.css'
+
+function Donation() {
+    const cardstyled = {
+        margin: 'auto',
+        padding: '1em',
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        borderWidth: '3px',
+        borderRadius: '20px',
+        borderColor: 'rgb(110, 189, 142)',
+        color: '#04AB70'
+    }
+
+    const btnstyled2 = {
+        background: 'white',
+        margin: '1px',
+        maxWidth: 'fit-content',
+        borderWidth: '2px',
+        color: 'rgb(110, 189, 142)',
+        borderColor: 'rgba(195, 195, 195, 0.753)',
+        borderRadius: '20px',
+    }
+
+    const [donateShow, setDonateShow] = useState(false);
+    const [isCopyshow, setCopyShow] = useState(false);
+
+    const HandleClose = () => setDonateShow(false);
+
+    function clickAndTwoSec() {
+        return new Promise((resolve) => setTimeout(resolve, 2000))
+    }
+
+    useEffect(() => {
+        if (isCopyshow) {
+            clickAndTwoSec().then(() => {
+                setCopyShow(false);
+            });
+        }
+    }, [isCopyshow]);
+    // isCopyshow 가 바뀔 때만 effect를 재실행한다.
+
+    const handleClick = () => setCopyShow(true);
+
+    return (
+        <Row className='text-center w-100 my-2'>
+            <Card style={cardstyled}>
+                <Card.Title>
+                    <p>
+                        서버비용 후원하기
+                    </p>
+                </Card.Title>
+                <Card.Subtitle>
+                    이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
+                    서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
+                </Card.Subtitle>
+                <Row className='my-2 d-flex justify-content-center'>
+                    <Button variant='light' style={btnstyled2} onClick={() => setDonateShow(true)}>
+                        ♥ 후원하기
+                    </Button>
+                    <Modal
+                        size='md'
+                        show={donateShow}
+                        onHide={HandleClose}
+                        style={{ top: '80px', left: '1vw' }}
+                    >
+                        <Modal.Header className='d-flex justify-content-center'>
+                            <Modal.Title>
+                                ♥ Thank you for Donation ♥
+                            </Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            <Col className='d-flex justify-content-center text-center' style={{ flexDirection: 'column' }}>
+                                <Card style={{ color: 'rgb(109, 110, 109)', paddingTop: '10px' }}>
+                                    카카오뱅크
+                                    <CopyToClipboard text={'박상호 3333-16-7299769'}>
+                                        <p className='m-auto' style={btnstyled2} >
+                                            박상호 3333-16-7299769
+                                            <Button variant='light'
+                                                disabled={isCopyshow}
+                                                onClick={!isCopyshow ? handleClick : null}
+                                                style={{
+                                                    background: 'lightgray',
+                                                    margin: '5px',
+                                                    maxWidth: 'fit-content',
+                                                    borderWidth: '2px',
+                                                    fontSize: '14px',
+                                                    color: 'black',
+                                                    border: 'none',
+                                                    whiteSpace: 'nowrap'
+                                                }}>
+                                                {isCopyshow ? '복사 성공!' : '복사'}
+
+                                            </Button>
+                                        </p>
+                                    </CopyToClipboard>
+                                </Card>
+                            </Col>
+                        </Modal.Body>
+                        <Modal.Footer>
+                            <Button variant='light' style={btnstyled2} onClick={HandleClose}>
+                                닫기
+                            </Button>
+                        </Modal.Footer>
+
+                    </Modal>
+                </Row>
+                <Row className='d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column', fontSize: '0.8em' }}>
+                    
+                </Row>
+
+            </Card>
+        </Row>
+    )
+}
+
+export default Donation;
\ No newline at end of file
diff --git a/client/src/components/EueSuggest.js b/client/src/components/EueSuggest.js
index bc8d985773dc09721dff8d149f1e423fa4cc8d4a..7b5205e113ca5248be64593dc2b63b73a2c13378 100644
--- a/client/src/components/EueSuggest.js
+++ b/client/src/components/EueSuggest.js
@@ -14,6 +14,7 @@ function EueSuggest() {
         borderColor: 'rgb(110, 189, 142)',
         color: '#04AB70'
     }
+    
     const airUsing = localStorage.getItem('using-aircondition')
 
 
diff --git a/client/src/components/Footer.js b/client/src/components/Footer.js
index a6a346ec55c78adc2da17c7d566b12188ae1c75b..9c1edd7b5b37adc00eef306fbe493b3873be4974 100644
--- a/client/src/components/Footer.js
+++ b/client/src/components/Footer.js
@@ -1,125 +1,29 @@
-import React, { useEffect, useState } from 'react'
-import { Row, Card, Button, Col, Modal, } from 'react-bootstrap';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import React from 'react'
 import '../App.css'
+import { Container, Row, Col } from 'react-bootstrap';
 
-function Footer() {
-    const cardstyled = {
-        margin: 'auto',
-        padding: '1em',
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        borderWidth: '3px',
-        borderRadius: '20px',
-        borderColor: 'rgb(110, 189, 142)',
-        color: '#04AB70'
-    }
-
-    const btnstyled2 = {
-        background: 'white',
-        margin: '1px',
-        maxWidth: 'fit-content',
-        borderWidth: '2px',
-        color: 'rgb(110, 189, 142)',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
-        borderRadius: '20px',
-    }
-
-    const [donateShow, setDonateShow] = useState(false);
-    const [isCopyshow, setCopyShow] = useState(false);
-
-    const HandleClose = () => setDonateShow(false);
-
-    function clickAndTwoSec() {
-        return new Promise((resolve) => setTimeout(resolve, 2000))
-    }
 
-    useEffect(() => {
-        if (isCopyshow) {
-            clickAndTwoSec().then(() => {
-                setCopyShow(false);
-            });
-        }
-    }, [isCopyshow]);
-    // isCopyshow 가 바뀔 때만 effect를 재실행한다.
-
-    const handleClick = () => setCopyShow(true);
+function Footer() {
 
     return (
-        <Row className='text-center w-100 my-2'>
-            <Card style={cardstyled}>
-                <Card.Title>
-                    <p>
-                        서버비용 후원하기
-                    </p>
-                </Card.Title>
-                <Card.Subtitle>
-                    이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
-                    서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
-                </Card.Subtitle>
-                <Row className='my-2 d-flex justify-content-center'>
-                    <Button variant='light' style={btnstyled2} onClick={() => setDonateShow(true)}>
-                        ♥ 후원하기
-                    </Button>
-                    <Modal
-                        size='md'
-                        show={donateShow}
-                        onHide={HandleClose}
-                        style={{ top: '80px', left: '1vw' }}
-                    >
-                        <Modal.Header className='d-flex justify-content-center'>
-                            <Modal.Title>
-                                ♥ Thank you for Donation ♥
-                            </Modal.Title>
-                        </Modal.Header>
-                        <Modal.Body>
-                            <Col className='d-flex justify-content-center text-center' style={{ flexDirection: 'column' }}>
-                                <Card style={{ color: 'rgb(109, 110, 109)', paddingTop: '10px' }}>
-                                    카카오뱅크
-                                    <CopyToClipboard text={'박상호 3333-16-7299769'}>
-                                        <p className='m-auto' style={btnstyled2} >
-                                            박상호 3333-16-7299769
-                                            <Button variant='light'
-                                                disabled={isCopyshow}
-                                                onClick={!isCopyshow ? handleClick : null}
-                                                style={{
-                                                    background: 'lightgray',
-                                                    margin: '5px',
-                                                    maxWidth: 'fit-content',
-                                                    borderWidth: '2px',
-                                                    fontSize: '14px',
-                                                    color: 'black',
-                                                    border: 'none',
-                                                    whiteSpace: 'nowrap'
-                                                }}>
-                                                {isCopyshow ? '복사 성공!' : '복사'}
-
-                                            </Button>
-                                        </p>
-                                    </CopyToClipboard>
-                                </Card>
-                            </Col>
-                        </Modal.Body>
-                        <Modal.Footer>
-                            <Button variant='light' style={btnstyled2} onClick={HandleClose}>
-                                닫기
-                            </Button>
-                        </Modal.Footer>
-
-                    </Modal>
-                </Row>
-                <Row className='d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column', fontSize: '0.8em' }}>
-                    <Col>
-                        <a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d' style={{ color: 'rgb(110, 189, 142)' }}>TEAM EUE </a> : 안강민, 박상호, 박예은
-                    </Col>
-                    <Col>
-                        © 2021 TEAM EUE. All rights reserved
-                    </Col>
-                </Row>
-
-            </Card>
-        </Row>
+        <Container className='m-auto d-flex justify-content-center' id='footer'>
+            <Row className='m-auto d-flex justify-content-center text-center w-100'
+                style={{ fontSize: '0.8em' }}>
+                <hr />
+                <Col style={{ display: 'flex', color: 'gray', fontWeight: '300', alignItems: 'center', justifyContent: 'center' }}>
+                    © 2021 TEAM EUE. All rights reserved
+                </Col>
+                <Col>
+                    <a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d'
+                        style={{ color: '#04AB70', textDecoration: 'none', fontWeight: '300' }}>
+
+                        <strong>
+                            TEAM EUE
+                        </strong>
+                    </a> <br />안강민, 박상호, 박예은
+                </Col>
+            </Row>
+        </Container >
     )
 }
 
diff --git a/client/src/components/LocCodeChange.js b/client/src/components/LocCodeChange.js
index 1639ec9ccc996df757cd70804b46fcbeea6327c3..ce8b2714314af3ed247c26524cf8db754f5a687b 100644
--- a/client/src/components/LocCodeChange.js
+++ b/client/src/components/LocCodeChange.js
@@ -22,9 +22,11 @@ function LocCodeChange() {
     const inboxstyled = {
         display: 'flex',
         flexDirection: 'column',
+        maxWidth: '80%',
         justifyContent: 'center',
         margin: 'auto',
-        padding: '10px'
+        padding: '0.5em',
+        color: 'black'
     }
 
     const btnstyled2 = {
@@ -45,6 +47,7 @@ function LocCodeChange() {
     const sggSelect = document.getElementById('select-sgg')
     const emdSelect = document.getElementById('select-emd')
 
+
     function handleClickLoc() {
         if (doeSelect.options[doeSelect.selectedIndex].text !== '도' && sggSelect.options[sggSelect.selectedIndex].text !== '시군구' && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') {
             localStorage.setItem('code_doe', doeSelect.value)
@@ -116,10 +119,10 @@ function LocCodeChange() {
         <Row className='text-center w-100 my-2'>
             <Card style={cardstyled}>
                 <Card.Title id='impactTitle'>
-                    Local Code
+                    지역 코드
                 </Card.Title>
                 <Card.Subtitle style={{ fontWeight: 'lighter' }}>
-                    Please select a your region
+                    본인의 지역을 선택해주세요
                 </Card.Subtitle>
                 <hr />
                 <Card.Text className='m-0'>
@@ -170,16 +173,14 @@ function LocCodeChange() {
                             </Form.Group>
                         </Row>
                     </Form>
+                    <Row className='d-flex justify-content-center'>
+                        <Button
+                            variant='light' style={btnstyled2} onClick={handleClickLoc}>
+                            확인
+                        </Button>
+                    </Row>
                 </Card.Text>
-                <Row className='d-flex justify-content-center'>
-                    <Button
-                        variant='light' style={btnstyled2} onClick={handleClickLoc}>
-                        확인
-                    </Button>
-                </Row>
-
             </Card>
-
         </Row>
     )
 }
diff --git a/client/src/components/LoginComp.js b/client/src/components/LoginComp.js
index 68554b536ec5d60e3197f41ff956c28c0d7cc0af..7c95a4ded59c990d6aefd716647414927116909e 100644
--- a/client/src/components/LoginComp.js
+++ b/client/src/components/LoginComp.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import '../App.css'
-import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
+import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
 
 function LoginComp() {
@@ -23,7 +23,8 @@ function LoginComp() {
         maxWidth: '80%',
         justifyContent: 'center',
         margin: 'auto',
-        padding: '10px'
+        padding: '0.5em',
+        color: 'black'
     }
 
     const [emailSentAlert, setEmailSentAlert] = useState(false)
@@ -34,7 +35,7 @@ function LoginComp() {
     function CheckEmailSend() {
         localStorage.setItem('login_email_Address', emailAddress)
         const emailIs = localStorage.getItem('login_email_Address').split('@')[1]
-        if(emailIs) {
+        if (emailIs) {
             setAlertShow(true)
             setEmailSentAlert(false)
         }
@@ -89,9 +90,13 @@ function LoginComp() {
                     </Row>
 
                     <Form style={inboxstyled}>
-                        <Form.Group controlId="formBasicEmail">
+                        <FloatingLabel
+                            controlId="floatingInput"
+                            label="Email"
+                        >
                             <Form.Control type="email" placeholder="Email" onChange={handleChange} />
-                        </Form.Group>
+
+                        </FloatingLabel>
                         <Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend}>
                             LOGIN
                         </Button>
diff --git a/client/src/components/MainLayer.js b/client/src/components/MainLayer.js
index 6c16863d92a0b8de5f4527b0fbef250303188a16..45f97742a3cca380ba44a864825e658179f67f45 100644
--- a/client/src/components/MainLayer.js
+++ b/client/src/components/MainLayer.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import '../App.css'
 import UserInfo from './UserInfo';
 import { kakaoLogout } from '../utils/Oauth';
+import axios from 'axios';
 
 
 function MainLayer() {
@@ -13,10 +14,8 @@ function MainLayer() {
         color: 'rgba(195, 195, 195, 0.753)',
         borderRadius: '20px',
         borderWidth: '3px',
-        marginBottom: '1em',
         width: '100%',
         backgroundSize: 'contain',
-        margin: 'auto',
         textDecorationColor: 'none'
     }
 
@@ -45,21 +44,17 @@ function MainLayer() {
     useEffect(() => {
         const airUsingLocal = localStorage.getItem('using-aircondition')
         if (airUsingLocal === 'true') {
-            console.log('!!', airUsing);
-            console.log(airUsingLocal);
             return setAirUsing(true)
         }
         else {
-            console.log('%%', airUsing);
-            console.log(airUsingLocal);
             return setAirUsing(false)
         }
     });
 
     return (
         <Col>
-            <Row className='d-flex align-items-center m-auto w-100'>
-                <Link to='/' className=' m-auto'>
+            <Row className='d-flex align-items-center m-auto w-100 p-0'>
+                <Link to='/' className='p-0 m-auto'>
                     <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
                 </Link>
             </Row>
@@ -73,7 +68,7 @@ function MainLayer() {
                     key='checkbox' className="d-flex  justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
                     <Form.Check
                         type='switch'
-                        id='aircondition-checkbox'
+                        id='airconditioner'
                         label='에어컨 사용중'
                         onChange={aircondiCheck}
                         checked={airUsing}
diff --git a/client/src/components/NicknameChange.js b/client/src/components/NicknameChange.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a228502fbb2b326b974a428ecbd8e25c52994ab
--- /dev/null
+++ b/client/src/components/NicknameChange.js
@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react'
+import { Row, Card, Col, Form, Button, FloatingLabel } from 'react-bootstrap';
+
+function NicknameChange() {
+
+    const cardstyled = {
+        margin: 'auto',
+        padding: '1em',
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        borderWidth: '3px',
+        borderRadius: '20px',
+        borderColor: 'rgb(110, 189, 142)',
+        color: '#04AB70'
+    }
+
+    const inboxstyled = {
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: '80%',
+        justifyContent: 'center',
+        margin: 'auto',
+        padding: '0.5em',
+        color: 'black'
+    }
+
+    const exNick = localStorage.getItem('nickname')
+    console.log(exNick)
+
+    function handleChange ({ target: { value } }) {
+        localStorage.setItem('nickname', value)
+    }
+
+    function handleSubmit(event) {
+        event.preventDefault();
+        window.location.reload();
+    };
+
+
+    return (
+        <Row className='text-center w-100 my-2'>
+            <Card style={cardstyled}>
+                <Card.Title id='impactTitle'>
+                    닉네임 변경
+                </Card.Title>
+                <Card.Subtitle style={{ fontWeight: 'lighter' }}>
+                    새로운 닉네임으로 변경해보세요
+                </Card.Subtitle>
+                <hr />
+                <Card.Text className='m-0'>
+
+                    <Form style={inboxstyled} onSubmit={handleSubmit}>
+                        <FloatingLabel
+                            controlId="floatingInput"
+                            label="Nickname"
+                        >
+                            <Form.Control type="text" placeholder="닉네임 변경" id='nickname' onChange={handleChange} />
+                        </FloatingLabel>
+                        <Button variant='light' className='mt-3' id='formbtn' type='submit'>
+                            변 경
+                        </Button>
+                    </Form>
+
+
+
+                </Card.Text>
+
+            </Card>
+        </Row>
+    )
+}
+
+export default NicknameChange;
\ No newline at end of file
diff --git a/client/src/components/SignupComp.js b/client/src/components/SignupComp.js
index 3b2274f35e88c6ccc1383620901668c4ce362853..16fdc5fb50d516a922d2b4d5cee3a56ac2eb4492 100644
--- a/client/src/components/SignupComp.js
+++ b/client/src/components/SignupComp.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import '../App.css'
-import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
+import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
 
 function SignupComp() {
@@ -23,7 +23,8 @@ function SignupComp() {
         maxWidth: '80%',
         justifyContent: 'center',
         margin: 'auto',
-        padding: '1rem'
+        padding: '0.5em',
+        color: 'black'
     }
 
     const initValues = {
@@ -125,35 +126,36 @@ function SignupComp() {
                         }
                     </Row>
 
-                    <Form style={inboxstyled}
-                        onSubmit={handleSubmit}>
-                        <Form.Group controlId="username">
-                            <Row className='m-auto mb-1 d-flex justify-content-center'>
-                                <Form.Control
-                                    type="text"
-                                    name="name"
-                                    placeholder="Name"
-                                    value={formValues.name}
-                                    onChange={handleChange}
-                                    required
-                                />
-                            </Row>
-                            <Row>
-                                <p></p>
-                            </Row>
-                            <Row className='m-auto d-flex justify-content-center'>
-                                <Form.Control
-                                    type="email"
-                                    name="email"
-                                    placeholder="Email Address"
-                                    value={formValues.email}
-                                    onChange={handleChange}
-                                    required
-                                />
-                            </Row>
-                        </Form.Group>
-
-                        <Button variant='light' className='mt-3' id='formbtn' onClick={CheckUserExist}>
+                    <Form style={inboxstyled} onSubmit={handleSubmit}>
+                        <FloatingLabel
+                            controlId="floatingInput"
+                            label="Name"
+                            className='mb-3'
+                        >
+                            <Form.Control
+                                type="text"
+                                name="name"
+                                placeholder="Name"
+                                value={formValues.name}
+                                onChange={handleChange}
+                                required
+                            />
+                        </FloatingLabel>
+                        <FloatingLabel
+                            controlId="floatingInput"
+                            label="Email Address"
+                        >
+                            <Form.Control
+                                type="email"
+                                name="email"
+                                placeholder="Email Address"
+                                value={formValues.email}
+                                onChange={handleChange}
+                                required
+                            />
+                        </FloatingLabel>
+
+                        <Button variant='light' className='mt-3' id='formbtn' type='submit' onClick={CheckUserExist}>
                             {/* type="submit" */}
                             Sign Up
                         </Button>
diff --git a/client/src/components/UserInfo.js b/client/src/components/UserInfo.js
index be1c5dd23f5c1c6046feec2bd4e15233fa37495a..ba11756af3ce8223fd49b78927995b3ddf7a3c0a 100644
--- a/client/src/components/UserInfo.js
+++ b/client/src/components/UserInfo.js
@@ -40,7 +40,6 @@ function UserInfo() {
     }
 
     return (
-        <Row>
             <Col className='text-center pt-3 pb-2 px-0'>
                 <Card style={cardstyled} id='localName'>
                     <Card.Title>
@@ -95,7 +94,6 @@ function UserInfo() {
                     }
                 </Card>
             </Col>
-        </Row>
     )
 }
 export default UserInfo;
\ No newline at end of file
diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
index 9ae3eb656c2bd7e905fa212391b0b7dc6ab3713a..3a70f1f3f2bcb9cea829f4caf9651de16c6aaf8c 100644
--- a/client/src/pages/Home.js
+++ b/client/src/pages/Home.js
@@ -6,7 +6,7 @@ import '../App.css'
 import EueSuggest from '../components/EueSuggest';
 import ChartLine from '../components/ChartLine';
 import ChartDoughnut from '../components/ChartDoughnut';
-import Footer from './../components/Footer';
+import Donation from '../components/Donation';
 import axios from 'axios';
 
 
@@ -32,33 +32,31 @@ function Home() {
         padding: '0'
     }
 
-    axios({
-        method: 'get',
-        url: 'localhost:4500/loccode/doe'
-    }).then((res) => {
-        console.log(res)
-    })
+    const getusername = axios.get(`/api/user`)
+    console.log(getusername)
 
 
     return (
-        <Container fluid className='m-auto d-flex justify-content-center position-relative'>
-            <Row style={constyled} className='m-auto'>
-                <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
-                    <Row style={col1sty} className='m-auto'>
-                        <MainLayer />
+            <Container className='m-auto d-flex position-relative'
+                style={{ flexDirection: 'column' }} fluid>
+                <Row className='d-flex'>
+                    <Row style={constyled} className='m-auto'>
+                        <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
+                            <Row style={col1sty} className='m-auto'>
+                                <MainLayer />
+                            </Row>
+                        </Col>
+
+                        <Col md={6} style={col2sty}>
+                            {/* <TimeNow /> */}
+                            <EueSuggest />
+                            <ChartLine />
+                            <ChartDoughnut />
+                            <Donation />
+                        </Col>
                     </Row>
-                </Col>
-
-                <Col md={6} style={col2sty}>
-                        {/* <TimeNow /> */}
-                        <EueSuggest />
-                        <ChartLine />
-                        <ChartDoughnut />
-                        <Footer />
-                </Col>
-            </Row>
-        </Container>
-
+                </Row>
+            </Container>
     );
 }
 
diff --git a/client/src/pages/LocalCodePage.js b/client/src/pages/LocalCodePage.js
index 0627ed79bb0a0b72f3a60c1983f130dff7470fa9..c9e6b4b92ed7af1935850e682b90be257fc7cd51 100644
--- a/client/src/pages/LocalCodePage.js
+++ b/client/src/pages/LocalCodePage.js
@@ -3,6 +3,7 @@ import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import LocCodeChange from '../components/LocCodeChange';
+import NicknameChange from '../components/NicknameChange';
 
 function SignupPage() {
     const constyled = {
@@ -28,20 +29,23 @@ function SignupPage() {
 
 
     return (
-        <Container fluid className='m-auto d-flex justify-content-center position-relative'>
-            <Row style={constyled} className='m-auto'>
-                <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
-                    <Row style={col1sty} className='m-auto'>
-                        <MainLayer />
-                    </Row>
-                </Col>
-
-                <Col md={6} style={col2sty}>
+        <Container className='m-auto d-flex position-relative'
+            style={{ flexDirection: 'column' }} fluid>
+            <Row className='d-flex'>
+                <Row style={constyled} className='m-auto'>
+                    <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
+                        <Row style={col1sty} className='m-auto'>
+                            <MainLayer />
+                        </Row>
+                    </Col>
+
+                    <Col md={6} style={col2sty}>
+                        <NicknameChange />
                         <LocCodeChange />
-                </Col>
+                    </Col>
+                </Row>
             </Row>
         </Container>
-
     );
 }
 
diff --git a/client/src/pages/LoginPage.js b/client/src/pages/LoginPage.js
index ec2583aa367c6d63de429547ab1b758a7e29bf9a..8df19d8420d52d7b0e40c61538b0e9ab7cfd49bb 100644
--- a/client/src/pages/LoginPage.js
+++ b/client/src/pages/LoginPage.js
@@ -3,6 +3,7 @@ import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import LoginComp from '../components/LoginComp';
+import Footer from './../components/Footer';
 
 function SignupPage() {
     const constyled = {
@@ -28,18 +29,20 @@ function SignupPage() {
 
 
     return (
-        <Container fluid className='m-auto d-flex justify-content-center position-relative'>
-            <Row style={constyled} className='m-auto'>
-                <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
-                    <Row style={col1sty} className='m-auto'>
-                        <MainLayer />
-                    </Row>
-                </Col>
-
-                <Col md={6} style={col2sty}>
-
+        <Container className='m-auto d-flex position-relative'
+            style={{ flexDirection: 'column' }} fluid>
+            <Row className='d-flex'>
+                <Row style={constyled} className='m-auto'>
+                    <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
+                        <Row style={col1sty} className='m-auto'>
+                            <MainLayer />
+                        </Row>
+                    </Col>
+
+                    <Col md={6} style={col2sty}>
                         <LoginComp />
-                </Col>
+                    </Col>
+                </Row>
             </Row>
         </Container>
 
diff --git a/client/src/pages/SignupPage.js b/client/src/pages/SignupPage.js
index 95471ed5268ebcb1ed270c4eed66e345049363d9..78bdc7676d5150df7f29eb4a346bccb48d91d71e 100644
--- a/client/src/pages/SignupPage.js
+++ b/client/src/pages/SignupPage.js
@@ -3,6 +3,7 @@ import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import '../App.css'
 import SignupComp from '../components/SignupComp';
+import Footer from './../components/Footer';
 
 function SignupPage() {
     const constyled = {
@@ -28,17 +29,20 @@ function SignupPage() {
 
 
     return (
-        <Container fluid className='m-auto d-flex justify-content-center position-relative'>
-            <Row style={constyled} className='m-auto'>
-                <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
-                    <Row style={col1sty} className='m-auto'>
-                        <MainLayer />
-                    </Row>
-                </Col>
-
-                <Col md={6} style={col2sty}>
-                    <SignupComp />
-                </Col>
+        <Container className='m-auto d-flex position-relative'
+            style={{ flexDirection: 'column' }} fluid>
+            <Row className='d-flex'>
+                <Row style={constyled} className='m-auto'>
+                    <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
+                        <Row style={col1sty} className='m-auto'>
+                            <MainLayer />
+                        </Row>
+                    </Col>
+
+                    <Col md={6} style={col2sty}>
+                        <SignupComp />
+                    </Col>
+                </Row>
             </Row>
         </Container>
 
diff --git a/client/src/routes.js b/client/src/routes.js
index c39a355c768e8ee80de55d807b16df08209031e2..66ff67f2aa7c0da6bb0685f3ead1779d235ee908 100644
--- a/client/src/routes.js
+++ b/client/src/routes.js
@@ -4,3 +4,11 @@ export const routes = {
   login: 'login',
   localcode: '/local_code',
 }
+
+
+// post, put { body }
+// email :
+// nick_name :
+// using_aircon :
+// created_at :
+// loc_code