diff --git a/package.json b/package.json
index 8904143..02171d4 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "nd-front",
   "version": "0.1.0",
   "private": true,
-  "proxy": "https://10.200.11.221:8000",
+  "proxy": "https://192.168.35.83:8000",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
diff --git a/public/img/studydo.png b/public/img/studydo.png
new file mode 100644
index 0000000..8bdd7d9
Binary files /dev/null and b/public/img/studydo.png differ
diff --git a/src/components/AllStudy.js b/src/components/AllStudy.js
index c91758b..fb8a318 100644
--- a/src/components/AllStudy.js
+++ b/src/components/AllStudy.js
@@ -3,6 +3,54 @@ import styled from 'styled-components';
 import axios from 'axios';
 import {Card,Button} from 'react-bootstrap';
 
+const Container = styled.div`
+  padding: 20px;
+`;
+
+//
+const Ranking_font = styled.div`
+    font-size: xx-large;
+    font-weight: bold;
+`;
+//
+
+const Date_font = styled.div`
+    font-size: large;
+    font-weight: bold;
+    text-align: center; 
+`;
+
+const ContentBox = styled.div`
+    display: flex;
+    gap: 0.25rem;
+    
+    align-items: center;
+    grid-area: content;
+    justify-content: center;
+`;
+const Content1 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: left;
+    width: 30%;
+    height: 100%;
+`;
+const Content2 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: left;
+    width: 50%;
+    height: 100%;
+    font-size: large;
+`;
+const Content3 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+`;
+
 const StudiesComp = (props) => {
     const study = props.study;
 
@@ -45,17 +93,39 @@ const StudiesComp = (props) => {
                 <Card.Body>
                     <Card.Title>{study.title}</Card.Title>
                     <Card.Text>
-                        목표 시간: {study.target_time} <br/>
-                        멤버 수: {study.member_number} <br/>
-                        하루 벌금: {study.penalty} <br/>
-                        스터디 정보: {study.info} <br/>
-                        방장이름: {study.leader} <br/>
-                        스터디 아이디: {study.id} <br/>
+                    <ContentBox>
+                        <Content1>방장</Content1>
+                        <Content2>{study.leader}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+                    <ContentBox>
+                        <Content1>목표 시간</Content1>
+                        <Content2>{study.target_time}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <ContentBox>
+                        <Content1>하루 벌금</Content1>
+                        <Content2>{study.penalty}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <ContentBox>
+                        <Content1>멤버 수</Content1>
+                        <Content2>{study.member_number}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+                    <ContentBox>
+                        <Content1>스터디 정보</Content1>
+                        <Content2>{study.info}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
                     </Card.Text>
                     {
                         (study.is_recruit === true)?
                         <>
-                            <Button onClick={() => {fetchJoin()}}>JOIN</Button>
+                            <Button variant="dark" onClick={() => {fetchJoin()}}>JOIN</Button>
                         </>
                         : null
                     }
diff --git a/src/components/MyStudy.js b/src/components/MyStudy.js
index 3bf991f..dd0f962 100644
--- a/src/components/MyStudy.js
+++ b/src/components/MyStudy.js
@@ -3,6 +3,55 @@ import { withRouter } from 'react-router';
 import {createBrowserHistory} from 'history';
 import axios from 'axios';
 import {Card,Button} from 'react-bootstrap';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  padding: 20px;
+`;
+
+//
+const Ranking_font = styled.div`
+    font-size: xx-large;
+    font-weight: bold;
+`;
+//
+
+const Date_font = styled.div`
+    font-size: large;
+    font-weight: bold;
+    text-align: center; 
+`;
+
+const ContentBox = styled.div`
+    display: flex;
+    gap: 0.25rem;
+    
+    align-items: center;
+    grid-area: content;
+    justify-content: center;
+`;
+const Content1 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: left;
+    width: 30%;
+    height: 100%;
+`;
+const Content2 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: left;
+    width: 50%;
+    height: 100%;
+    font-size: large;
+`;
+const Content3 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+`;
 
 const MyStudy = (props) => {
     const mystudy = props.mystudy;
@@ -65,20 +114,51 @@ const MyStudy = (props) => {
                 <Card.Header>{mystudy.topic}</Card.Header>
                 <Card.Body>
                     <Card.Title>{mystudy.title}</Card.Title>
+                    
                     <Card.Text>
-                        목표 시간: {mystudy.target_time} <br/>
+                    <ContentBox>
+                        <Content1>방장</Content1>
+                        <Content2>{mystudy.leader}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+                    <ContentBox>
+                        <Content1>목표 시간</Content1>
+                        <Content2>{mystudy.target_time}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <ContentBox>
+                        <Content1>하루 벌금</Content1>
+                        <Content2>{mystudy.penalty}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <ContentBox>
+                        <Content1>멤버 수</Content1>
+                        <Content2>{mystudy.member_number}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+                    <ContentBox>
+                        <Content1>스터디 정보</Content1>
+                        <Content2>{mystudy.info}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+
+                    {/* 목표 시간:  {mystudy.target_time} <br/>
                         멤버 수: {mystudy.member_number} <br/>
                         하루 벌금: {mystudy.penalty} <br/>
                         스터디 정보: {mystudy.info} <br/>
                         방장이름: {mystudy.leader} <br/>
-                        스터디 아이디: {mystudy.id} <br/>
+                        스터디 아이디: {mystudy.id} <br/> */}
                     </Card.Text>
+                   
                     {
                         (mystudy.is_recruit===false)?
                         <>
-                            <Button size="sm" onClick={() => {fetchRoom()}}>공부 시작</Button>
+                            <Button size="sm" variant="dark" onClick={() => {fetchRoom()}}>공부 시작</Button>
                             &nbsp;
-                            <Button size="sm" onClick={() => {enterManage()}}>관리</Button>
+                            <Button size="sm" variant="dark" onClick={() => {enterManage()}}>관리</Button>
                             &nbsp; 
                         </>
                         :
diff --git a/src/components/Room.js b/src/components/Room.js
index e4d4dca..124def8 100644
--- a/src/components/Room.js
+++ b/src/components/Room.js
@@ -99,7 +99,7 @@ const Room = (props) => {
 //         socketRef.current = io.connect("https://10.200.11.221:8000"); //현재 커넥트 정보 저장 
 //         console.log(socketRef.current) 
 // =======
-        socketRef.current = io.connect("https://192.168.0.28:8000"); //현재 커넥트 정보 저장  
+        socketRef.current = io.connect("https://192.168.35.64:8000"); //현재 커넥트 정보 저장  
 // >>>>>>> main
         
         navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: false })
@@ -216,7 +216,7 @@ const Room = (props) => {
 // =======
                 var response; 
                 if(mode) { //자동 측정 on 모드
-                    response = await fetch('https://192.168.0.28:5000/image', { //https://223.131.223.239:5000/image
+                    response = await fetch('https://192.168.35.64:5000/image', { //https://223.131.223.239:5000/image
                     method: "POST",
                     body: formData,
                     signal: abortController.signal,
diff --git a/src/components/auth/AuthForm.js b/src/components/auth/AuthForm.js
index e1bd020..27d5b0b 100644
--- a/src/components/auth/AuthForm.js
+++ b/src/components/auth/AuthForm.js
@@ -2,7 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
-import Button from '../common/Button';
+import Button_2 from '../common/Button_2';
+// import {Card,Button} from 'react-bootstrap';
 /*
 회원가입, 로그인 폼을 보여주는 component
 */
@@ -87,13 +88,20 @@ const AuthForm = ({type,form,onChange,onSubmit}) => {
                         value={form.passwordConfirm}
                     />
                 )}
-                <Button cyan fullWidth style={{marginTop: '1rem'}}>{text}</Button>
+                {/* <Button_2 cyan fullWidth style={{marginTop: '1rem'}}>{text}</Button_2> */}
+                <Button_2 >{text}</Button_2>
+                {/* <br/> */}
+                {/* <div className="d-grid gap-2">
+                <Button variant="warning" size="lg">{text}</Button>
+                </div> */}
             </form>
             <Footer>
                 {
                     type ==='login'?
                     (
+                        <>
                         <Link to= '/register'>회원가입</Link>
+                        </>
                     ):
                     (
                         <Link to= '/login'>로그인</Link>
diff --git a/src/components/auth/AuthTemplate.js b/src/components/auth/AuthTemplate.js
index 7c4bc8c..bf71481 100644
--- a/src/components/auth/AuthTemplate.js
+++ b/src/components/auth/AuthTemplate.js
@@ -39,7 +39,9 @@ const AuthTemplate = ({children}) => {
         <AuthTemplateBlock>
             <WhiteBox>
                 <div className='logo-area'>
-                    <Link to = '/'>STUDY.DO</Link>
+                    <Link to = '/'>
+                    <img src="img/studydo.png" width="130px" height="40px"/>
+                    </Link>
                 </div>
                 {children}
             </WhiteBox>
diff --git a/src/components/common/Button.js b/src/components/common/Button_2.js
similarity index 86%
rename from src/components/common/Button.js
rename to src/components/common/Button_2.js
index 75bb91a..5bc9bf6 100644
--- a/src/components/common/Button.js
+++ b/src/components/common/Button_2.js
@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import palette from '../../lib/styles/palette';
 import { withRouter } from 'react-router-dom';
+import { Button } from 'react-bootstrap';
 
 const StyledButton = styled.button`
     border:nond;
@@ -34,7 +35,7 @@ const StyledButton = styled.button`
 `;
 
 //{...props}쓴 이유 : Button이 받아 오는 props를 모두 StyledButton에 전달한다.
-const Button = ({ to, history, ...rest }) => {
+const Button_2 = ({ to, history, ...rest }) => {
     const onClick = e => {
         // to가 있다면 to로 페이지 이동
         if (to) {
@@ -45,8 +46,10 @@ const Button = ({ to, history, ...rest }) => {
         }
     };
     return (
+        <div className="d-grid gap-2">
         <StyledButton {...rest} onClick={onClick} />
+        </div>
     );
 };
 
-export default withRouter(Button);
\ No newline at end of file
+export default withRouter(Button_2);
\ No newline at end of file
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
index 975631f..57c268a 100644
--- a/src/components/common/Header.js
+++ b/src/components/common/Header.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from './Button';
+// import Button from './Button_2';
 import font from '../../css/font.css'
 import { Nav, Navbar,Container,Offcanvas,NavDropdown,Form,FormControl } from 'react-bootstrap';
 import '../../App.css'
diff --git a/src/components/manage/Penalty.js b/src/components/manage/Penalty.js
index af3d3fb..78f63a3 100644
--- a/src/components/manage/Penalty.js
+++ b/src/components/manage/Penalty.js
@@ -24,6 +24,7 @@ const Penalty = (props) => {
         setLoading(false);
     }
 
+
     useEffect(()=>{
         fetchPenalty();
     },[]);
@@ -36,7 +37,7 @@ const Penalty = (props) => {
             {
                 penalty.map(function(penalty,i){
                     return(
-                        <PenaltyCard penalty={penalty} i={i} key={i}/>
+                        <PenaltyCard penalty={penalty} studyID={studyID} i={i} key={i}/>
                     )
                 })
             }
diff --git a/src/components/manage/PenaltyCard.js b/src/components/manage/PenaltyCard.js
index b0610ad..92ec50e 100644
--- a/src/components/manage/PenaltyCard.js
+++ b/src/components/manage/PenaltyCard.js
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect, useState }  from 'react';
 import {Card, Button} from 'react-bootstrap';
 import styled from 'styled-components';
+import axios from 'axios';
 
 const ContentBox = styled.div`
     display: flex;
@@ -35,6 +36,52 @@ const Content3 = styled.div`
 
 const PenaltyCard = (props) => {
     const penalty = props.penalty;
+    const studyID = props.studyID;
+    console.log('스터디아이디~',studyID);
+
+    const URL_leader = '/api/studies/'+studyID+'/leader';
+    const URL = '/api/studies/'+studyID+'/penalty';
+    const [loading,setLoading] = useState(false);
+    const [leader ,setLeader] = useState(null);
+
+    const fetchLeader = async () => {
+        try{
+            setLoading(true);
+            setLeader(null);
+            const response = await axios.get(URL_leader);
+            console.log(response);
+            setLeader(response.data.leader);
+        }catch (e){
+            console.log(e)
+        }
+        setLoading(false);
+
+    }
+
+    const userID = localStorage.getItem('user');
+    console.log('userID:',userID)
+
+    const fetchPen = async () => {
+        try {
+            console.log(URL)
+            const response = await axios.post(URL,{user_id:userID, penalty_user_id:penalty.user_id});
+            if(response.data.code === "200"){
+                alert('정산 완료');
+                var location = window.location;
+                location.reload();
+            }
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    useEffect(()=>{
+        fetchLeader();
+    },[]);
+
+    if(loading) return <div>loading...</div>;
+    if(!leader) return null;
+
     return (
         <div>
             <br/>
@@ -46,9 +93,9 @@ const PenaltyCard = (props) => {
                         <Content1>{penalty.total_penalty}원</Content1>
                         <Content2></Content2>
                         {
-                            (localStorage.getItem('user')===penalty.user_id)?
+                            (localStorage.getItem('user')===leader)?
                             <>
-                                <Content3><Button variant="primary">정산</Button></Content3>
+                                <Content3><Button variant="dark" onClick={()=>{fetchPen()}}>정산</Button></Content3>
                             </>
                             : 
                             <>
diff --git a/src/pages/PostListPage.js b/src/pages/PostListPage.js
index d678a1b..7164d21 100644
--- a/src/pages/PostListPage.js
+++ b/src/pages/PostListPage.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import Button from '../components/common/Button';
+// import Button from '../components/common/Button';
 import HeaderContainer from '../containers/common/HeaderContainer';
 
 const PostListPage = () => {
diff --git a/src/pages/StudyCreatePage/StudyCreate.js b/src/pages/StudyCreatePage/StudyCreate.js
index 1079306..622ebb8 100644
--- a/src/pages/StudyCreatePage/StudyCreate.js
+++ b/src/pages/StudyCreatePage/StudyCreate.js
@@ -127,7 +127,7 @@ const StudyCreate = (props) => {
           </Form.Group>
 
           <div className="d-grid gap-2">
-          <Button variant="primary" size="lg" type ="submit" disabled={submitting}>
+          <Button variant="warning" size="lg" type ="submit" disabled={submitting}>
             Submit
           </Button>
           </div>