diff --git a/index.js b/index.js
index 7512de7..52ea5da 100644
--- a/index.js
+++ b/index.js
@@ -18,6 +18,7 @@ app.set('view engine', 'ejs');
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({extended: false}));
 
+//ID, PS 등록 하는 곳 (register)
 app.get('/register', function(req,res) {
     res.render('register');
 });
@@ -35,6 +36,7 @@ app.post('/register', function(req,res) {
     });
 });
 
+//로그인 하는 곳 
 app.get('/login', function(req,res) {
     res.render('login');
 });
@@ -47,7 +49,7 @@ app.post('/login', function(req,res) {
             console.log(error);
         }
         if (!Object.keys(results).length)
-            res.render('fail');
+            res.render('fail-login');
         else 
             res.render('successful-login', {username});
     });
@@ -55,14 +57,60 @@ app.post('/login', function(req,res) {
 
 
 
-// 글 작성 페이지
-app.get('/create', (req, res) => {
-    res.render('create');
+//게시물 보는 곳
+app.get('/Home', function(req, res) {
+    connection.query('SELECT * FROM posts', function(error, results) {
+        if (error) {
+            console.log(error);
+            return;
+        }
+        res.render('Home', { posts: results }); // Home.ejs에 게시물 목록 전달
+    });
 });
 
-// 글 작성 처리
 
 
+// 글 작성하는 곳 
+app.get('/create-post', function(req, res) {
+    res.render('create-post');
+});
+
+app.post('/create-post', function(req, res) {
+    const { title, content } = req.body;
+
+    connection.query(
+        `INSERT INTO posts (title, content) VALUES (?, ?)`,
+        [title, content],
+        function(error, results) {
+            if (error) {
+                console.log(error);
+                return;
+            }
+            console.log('Post created:', results.insertId);
+            res.redirect('/Home'); // 작성 후 홈 페이지로 리다이렉트
+        }
+    );
+});
+
+
+
+//글 작성 후 Home에 각각 버튼으로 게시물 보임. 
+app.get('/', (req, res) => {
+    res.render('home', { posts });
+  });
+  
+  app.get('/create-post', (req, res) => {
+    res.render('create-post');
+  });
+  
+  app.post('/create-post', (req, res) => {
+    const { title, content } = req.body;
+    posts.push({ title, content });
+    res.redirect('/Home');
+  });
+
+//글 버튼 클릭 시 수정...할 수 있을까?
+
 // 글 삭제 처리
 
 
diff --git a/views/Home.ejs b/views/Home.ejs
new file mode 100644
index 0000000..0f1d042
--- /dev/null
+++ b/views/Home.ejs
@@ -0,0 +1,100 @@
+<!-- 글 게시판 -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+    body {
+      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+    }
+
+    .CreatedPosts {
+      color:white;
+      font-size:80px;
+      font-weight: 700;
+      margin-left: 20px;
+    }
+
+    .posts-container {
+      background-color: white;
+      border-radius: 10px;
+      padding: 60px 110px; /* 상하좌우 패딩 조정 */
+      max-width: 700px; /* 컨테이너 최대 너비 조정 */
+      margin-left: 20px; /* 왼쪽 여백 추가 */
+    }
+
+    .posts-container:hover {
+      background-color: lightgray;
+    }
+    .post-title {
+      font-size: 50px;
+      font-weight: 700;
+      /* position: relative; */
+    }
+
+    /* .posts-content {
+      font-size: 30px;
+      font-weight: 500;
+      text-align: end;
+      position: relative;
+      left: -20px;
+    } */
+
+    .writepost {
+      background-color: midnightblue;
+      border-radius: 30px;
+      padding: 12px 34px;
+      position: relative;
+      left: 1540px;
+      top: -90px;
+    }
+
+    .writepost:hover {
+      background-color: #102b77;
+    }
+
+    .write {
+      color: white;
+      font-size: 20px;
+      font-weight: 500;
+      text-decoration: none;
+    }
+
+    .write:hover {
+      color: white;
+    }
+
+    </style>
+</head>
+
+<body>
+<div class="CreatedPosts">Created Posts</div>
+
+<button class="writepost">
+  <a href="/create-post" class="write">글쓰기</a>
+</button>
+
+<br><br>
+
+<div class="posts-container">
+  <ul>
+    <% if (posts && posts.length > 0) { %>
+      <% posts.forEach(function(post) { %>
+        <div class="post-box">
+          <div class="post-title"><%= post.title %></div>
+          <div class="post-content"><%= post.content %></div>
+        </div>
+      <% }); %>
+    <% } else { %>
+      <div class="no-posts">No posts available.</div>
+    <% } %>
+  </ul>
+</button>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/views/create-post.ejs b/views/create-post.ejs
new file mode 100644
index 0000000..f1a2dd3
--- /dev/null
+++ b/views/create-post.ejs
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+    body {
+      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+    }
+
+    </style>
+</head>
+<body>
+    <!-- create-post.ejs -->
+
+
+    <form action="/create-post" method="post">
+        <input type="text" name="title" placeholder="Title">
+        <textarea name="content" placeholder="Content"></textarea>
+        <button type="submit">Save</button>
+      </form>
+      
+</body>
+</html>
\ No newline at end of file
diff --git a/views/delete-post.ejs b/views/delete-post.ejs
new file mode 100644
index 0000000..24ba452
--- /dev/null
+++ b/views/delete-post.ejs
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Delete Post</title>
+</head>
+<body>
+    <h1>Delete Post</h1>
+    
+</body>
+</html>
diff --git a/views/login.ejs b/views/login.ejs
index ad3182b..bcafe66 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -4,15 +4,109 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Login</title>
+
+    <style>
+    body {
+      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+
+    .LoginText {
+      color: midnightblue;
+      font-size: 60px;
+      font-weight: 700;
+      padding: 20px 0;
+    }
+
+    #LoginPage {
+      background-color: white;
+      text-align: center;
+      border-radius: 10px;
+      padding: 100px;
+      max-width: 400px;
+      position: relative;
+      bottom: auto;
+    }
+
+    .field {
+      padding-bottom: 20px;
+    }
+
+    .input {
+      border-radius: 5px;
+      background-color: #e9e9f7;
+      padding: 10px;
+      width: 100%;
+      color: midnightblue;
+      border: 1px solid rgb(34, 34, 100);
+      font-size: 15px;
+    }
+
+    .input:focus-visible {
+      outline: 1px solid rgb(34, 34, 100);
+    }
+
+    .input::placeholder {
+      color: midnightblue;
+      opacity: 0.5;
+      font-size: 20px;
+    }
+
+    label {
+      color: midnightblue;
+      font-size: 14px;
+      font-weight: 800;
+      display: block;
+      padding-bottom: 4px;
+      text-align: start;
+    }
+
+    .submit {
+      background-color: #00509D;
+      margin-top: 20px;
+      font-size: 20px;
+      padding: 15px 20px;
+      height: auto;
+      font-weight: 500;
+      color: white;
+      border: none;
+      border-radius: 10px;
+    }
+
+    .submit:hover {
+      background-color: #003f88;
+    }
+
+
+    </style>
+
 </head>
+
 <body>
-    <h1>Login</h1>
+  <div id="LoginPage">
+    <div class="LoginText">✅Login</div>
+    
+    <form action="/login" method="post" class="loginform">
+      <div class="field">
+        <label for="username">Username</label>
+        <input class="input" name="username" type="text" placeholder="Username" id="username">
+      </div>
+    
+      <div class="field">
+        <label for="password">Password</label>
+        <input class="input" name="user_password" type="password" placeholder="Password" id="password">
+      </div>
+      <button type="submit" class="submit">signin</button>
 
-    <form action="/login" method="post">
-        <h3>username</h3> <input name="username" type="text">
-        <h3>password</h3> <input name="password" type="password">
-        <button type="submit">submit</button>
+      
     </form>
+  </div>
 </body>
+
+
 </html>
\ No newline at end of file
diff --git a/views/patch-post.ejs b/views/patch-post.ejs
new file mode 100644
index 0000000..76e7153
--- /dev/null
+++ b/views/patch-post.ejs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Edit Post</title>
+</head>
+<body>
+    <h1>Edit Post</h1>
+</body>
+</html>
diff --git a/views/register.ejs b/views/register.ejs
index 706a431..50eb529 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -5,14 +5,101 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+
+    <style>
+    body {
+      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+
+    .RegisterText {
+      color: midnightblue;
+      font-size: 60px;
+      font-weight: 700;
+      padding: 20px 0;
+    }
+
+    #RegisterPage {
+      background-color: white;
+      text-align: center;
+      border-radius: 10px;
+      padding: 100px;
+      max-width: 400px;
+      position: relative;
+      bottom: auto;
+    }
+
+    .field {
+      padding-bottom: 20px;
+    }
+
+    .input {
+      border-radius: 5px;
+      background-color: #e9e9f7;
+      padding: 10px;
+      width: 100%;
+      color: midnightblue;
+      border: 1px solid rgb(34, 34, 100);
+      font-size: 15px;
+    }
+
+    .input:focus-visible {
+      outline: 1px solid rgb(34, 34, 100);
+    }
+
+    .input::placeholder {
+      color: midnightblue;
+      opacity: 0.5;
+      font-size: 20px;
+    }
+
+    label {
+      color: midnightblue;
+      font-size: 14px;
+      font-weight: 800;
+      display: block;
+      padding-bottom: 4px;
+      text-align: start;
+    }
+
+    .submit {
+      background-color: #00509D;
+      margin-top: 20px;
+      font-size: 20px;
+      padding: 15px 20px;
+      height: auto;
+      font-weight: 500;
+      color: white;
+      border: none;
+      border-radius: 10px;
+    }
+
+    .submit:hover {
+      background-color: #003f88;
+    }
+
+    </style>
 </head>
 <body>
-    <h1>Register</h1>
-
-    <form action="/register" method="post">
-        <h3>username</h3> <input name="username" type="text">
-        <h3>password</h3> <input name="password" type="password">
-        <button type="submit">submit</button>
-    </form>
+    <div id="RegisterPage">
+        <div class="RegisterText">✅Register</div>
+        
+        <form action="/register" method="post" class="registerform">
+          <div class="field">
+            <label for="username">Username</label>
+            <input class="input" name="username" type="text" placeholder="Username" id="username">
+          </div>
+        
+          <div class="field">
+            <label for="password">Password</label>
+            <input class="input" name="user_password" type="password" placeholder="Password" id="password">
+          </div>
+          <button type="submit" class="submit">submit</button>
+        </form>
+      </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/successful-login.ejs b/views/successful-login.ejs
index 84723a5..828e0d9 100644
--- a/views/successful-login.ejs
+++ b/views/successful-login.ejs
@@ -5,8 +5,24 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+
+    <style>
+        body {
+            background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+            display: flex;
+            justify-content: center;
+            font-size: 50px;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+    </style>
 </head>
 <body>
-    <h1>Hello! <%= username %>!</h1>
+    <h1>Hello <%= username %>!👋</h1>
+    
+    <button class="gotHome">
+        <a href="/Home">go to Mypage</a>
+    </button>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/successful-register.ejs b/views/successful-register.ejs
index 17dc39c..fcb5995 100644
--- a/views/successful-register.ejs
+++ b/views/successful-register.ejs
@@ -5,9 +5,24 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+
+    <style>
+    body {
+      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+    </style>
 </head>
 <body>
     <h1>Success!</h1>
+    <br>
+    <button class="gotoLogin">
+        <a href="/login">go to Login Page</a>
+    </button>
 
     <form action="/register" method></form>
 </body>
