diff --git a/src/main/resources/templates/article.html b/src/main/resources/templates/article.html
index 38939b5..a6d49c1 100644
--- a/src/main/resources/templates/article.html
+++ b/src/main/resources/templates/article.html
@@ -4,11 +4,83 @@
   <meta charset="UTF-8">
   <title>블로그 글</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+  <style>
+    body, html {
+      height: 100%;
+      margin: 0;
+      font-family: 'Helvetica Neue', Arial, sans-serif;
+      background: #f7f9fc;
+    }
+
+    .header-custom {
+      background: #6a82fb;
+      background: linear-gradient(to right, #fc5c7d, #6a82fb);
+      color: white;
+      padding: 3rem 0;
+      text-align: center;
+      margin-bottom: 2rem;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    .header-custom h1, .header-custom h4 {
+      margin: 0;
+      font-weight: 300;
+    }
+
+    .container {
+      margin-top: 2rem;
+    }
+
+    article {
+      background: white;
+      padding: 2rem;
+      border-radius: 1rem;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    header h1 {
+      font-size: 2rem;
+      font-weight: bold;
+      border-bottom: 2px solid #fc5c7d;
+      padding-bottom: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .text-muted {
+      color: #6c757d !important;
+    }
+
+    section p {
+      font-size: 1.2rem;
+      color: #333;
+      margin-bottom: 1rem;
+    }
+
+    .btn-primary {
+      background-color: #fc5c7d;
+      border: none;
+      transition: background-color 0.3s ease;
+    }
+
+    .btn-primary:hover {
+      background-color: #d4506c;
+    }
+
+    .btn-secondary {
+      background-color: #6a82fb;
+      border: none;
+      transition: background-color 0.3s ease;
+    }
+
+    .btn-secondary:hover {
+      background-color: #5563e7;
+    }
+  </style>
 </head>
 <body>
-<div class="p-5 mb-5 text-center</> bg-light">
-  <h1 class="mb-3">My Blog</h1>
-  <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
+<div class="header-custom">
+  <h1 class="mb-3">What's your story?</h1>
+  <h4 class="mb-3">당신의 이야기를 들려주세요!</h4>
 </div>
 
 <div class="container mt-5">
@@ -34,4 +106,5 @@ <h1 class="fw-bolder mb-1" th:text="${article.title}"></h1>
 </div>
 
 <script src="/js/article.js"></script>
-</body>
\ No newline at end of file
+</body>
+</html>
diff --git a/src/main/resources/templates/articleList.html b/src/main/resources/templates/articleList.html
index a34511f..bb86922 100644
--- a/src/main/resources/templates/articleList.html
+++ b/src/main/resources/templates/articleList.html
@@ -4,33 +4,116 @@
     <meta charset="UTF-8">
     <title>블로그 글 목록</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            background: #f7f9fc;
+        }
+
+        .header-custom {
+            background: #6a82fb;
+            background: linear-gradient(to right, #fc5c7d, #6a82fb);
+            color: white;
+            padding: 3rem 0;
+            text-align: center;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .header-custom h1, .header-custom h4 {
+            margin: 0;
+            font-weight: 300;
+        }
+
+        .container {
+            margin-top: 2rem;
+        }
+
+        .card {
+            margin-bottom: 1rem;
+            border: none;
+            border-radius: 1rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+        }
+
+        .card-header {
+            background: #6a82fb;
+            color: white;
+            border-radius: 1rem 1rem 0 0;
+            font-weight: bold;
+        }
+
+        .btn-custom {
+            background-color: #fc5c7d;
+            color: white;
+            border: none;
+            transition: background-color 0.3s ease;
+        }
+
+        .btn-custom:hover {
+            background-color: #d4506c;
+        }
+
+        .btn-logout {
+            background-color: #6a82fb;
+            color: white;
+            border: none;
+            margin-top: 2rem;
+            transition: background-color 0.3s ease;
+        }
+
+        .btn-logout:hover {
+            background-color: #5563e7;
+        }
+
+        @media (max-width: 768px) {
+            .header-custom h1 {
+                font-size: 2rem;
+            }
+
+            .header-custom h4 {
+                font-size: 1rem;
+            }
+        }
+    </style>
 </head>
 <body>
-<div class="p-5 mb-5 text-center</> bg-light">
-    <h1 class="mb-3">My Blog</h1>
-    <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
+<div class="header-custom">
+    <h1 class="mb-3">What's your story?</h1>
+    <h4 class="mb-3">당신의 이야기를 들려주세요!</h4>
 </div>
 
 <div class="container">
     <button type="button" id="create-btn"
             th:onclick="|location.href='@{/new-article}'|"
-            class="btn btn-secondary btn-sm mb-3">글 등록</button>
-    <div class="row-6" th:each="item : ${articles}">
-        <div class="card">
-            <div class="card-header" th:text="${item.id}">
-            </div>
-            <div class="card-body">
-                <h5 class="card-title" th:text="${item.title}"></h5>
-                <p class="card-text" th:text="${item.content}"></p>
-                <a th:href="@{/articles/{id}(id=${item.id})}" class="btn btn-primary">보러가기</a>
+            class="btn btn-custom btn-sm mb-3">글 등록</button>
+    <div class="row" th:each="item : ${articles}">
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-header" th:text="${item.id}"></div>
+                <div class="card-body">
+                    <h5 class="card-title" th:text="${item.title}"></h5>
+                    <p class="card-text" th:text="${item.content}"></p>
+                    <a th:href="@{/articles/{id}(id=${item.id})}" class="btn btn-primary">보러가기</a>
+                </div>
             </div>
         </div>
-        <br>
     </div>
 
-    <button type="button" class="btn btn-secondary" onclick="location.href='/logout'">로그아웃</button>
+    <button type="button" class="btn btn-logout" onclick="location.href='/logout'">로그아웃</button>
 </div>
 
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 <script src="/js/token.js"></script>
 <script src="/js/article.js"></script>
-</body>
\ No newline at end of file
+</body>
+</html>
diff --git a/src/main/resources/templates/newArticle.html b/src/main/resources/templates/newArticle.html
index f8923f1..c1a0a51 100644
--- a/src/main/resources/templates/newArticle.html
+++ b/src/main/resources/templates/newArticle.html
@@ -4,11 +4,82 @@
     <meta charset="UTF-8">
     <title>블로그 글</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            background: #f7f9fc;
+        }
+
+        .header-custom {
+            background: #6a82fb;
+            background: linear-gradient(to right, #fc5c7d, #6a82fb);
+            color: white;
+            padding: 3rem 0;
+            text-align: center;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .header-custom h1, .header-custom h4 {
+            margin: 0;
+            font-weight: 300;
+        }
+
+        .container {
+            margin-top: 2rem;
+        }
+
+        article {
+            background: white;
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        header input {
+            font-size: 1.5rem;
+            font-weight: bold;
+            border: none;
+            border-bottom: 2px solid #fc5c7d;
+            border-radius: 0;
+            box-shadow: none;
+            margin-bottom: 1rem;
+            transition: border-color 0.3s ease;
+        }
+
+        header input:focus {
+            border-color: #6a82fb;
+            box-shadow: none;
+        }
+
+        section textarea {
+            border: 2px solid #fc5c7d;
+            border-radius: 0.5rem;
+            transition: border-color 0.3s ease;
+        }
+
+        section textarea:focus {
+            border-color: #6a82fb;
+            box-shadow: none;
+        }
+
+        .btn-primary {
+            background-color: #fc5c7d;
+            border: none;
+            transition: background-color 0.3s ease;
+        }
+
+        .btn-primary:hover {
+            background-color: #d4506c;
+        }
+    </style>
 </head>
 <body>
-<div class="p-5 mb-5 text-center</> bg-light">
-    <h1 class="mb-3">My Blog</h1>
-    <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
+<div class="header-custom">
+    <h1 class="mb-3">What's your story?</h1>
+    <h4 class="mb-3">당신의 이야기를 들려주세요!</h4>
 </div>
 
 <div class="container mt-5">
@@ -31,4 +102,5 @@ <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
 </div>
 
 <script src="/js/article.js"></script>
-</body>
\ No newline at end of file
+</body>
+</html>
diff --git a/src/main/resources/templates/oauthLogin.html b/src/main/resources/templates/oauthLogin.html
index 047312f..913c25e 100644
--- a/src/main/resources/templates/oauthLogin.html
+++ b/src/main/resources/templates/oauthLogin.html
@@ -2,33 +2,94 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Title</title>
+  <title>Login</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
-
   <style>
+    body, html {
+      height: 100%;
+      margin: 0;
+      font-family: Arial, sans-serif;
+    }
+
     .gradient-custom {
-      background: #6a11cb;
-      background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
-      background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
+      background: #12c2e9;
+      background: -webkit-linear-gradient(to left, #f64f59, #c471ed, #12c2e9);
+      background: linear-gradient(to left, #f64f59, #c471ed, #12c2e9);
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .welcome-header {
+      position: absolute;
+      top: 5vh;
+      width: 100%;
+      text-align: center;
+      font-size: 8vh;
+      color: white;
+      font-weight: bold;
+      padding: 2vh;
+    }
+
+    .card {
+      background-color: rgba(255, 255, 255, 0.98);
+      border: none;
+      border-radius: 1.5rem;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
+      padding: 3vh;
+      width: 100%;
+      max-width: 30vw;
+      overflow: hidden;
+      margin-top: 10vh;
+    }
+
+    h2, p {
+      color: #333;
+    }
+
+    .btn-google {
+      background-color: #fff;
+      border-radius: 0.5rem;
+      padding: 0.5rem 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      margin-bottom: 2vh;
+    }
+
+    .btn-google img {
+      height: 4vh;
+      transition: transform 0.3s ease;
+    }
+
+    .btn-google:hover img {
+      transform: scale(1.1);
+    }
+
+    @media (max-width: 768px) {
+      .welcome-header {
+        font-size: 3vh;
+        padding: 1vh;
+      }
+
+      .card {
+        margin: 5vh;
+        max-width: 90vw;
+      }
     }
   </style>
 </head>
 <body class="gradient-custom">
-<section class="d-flex vh-100">
-  <div class="container-fluid row justify-content-center align-content-center">
-    <div class="card bg-dark" style="border-radius: 1rem;">
-      <div class="card-body p-5 text-center">
-        <h2 class="text-white">LOGIN</h2>
-        <p class="text-white-50 mt-2 mb-5">서비스 사용을 위해 로그인을 해주세요!</p>
-
-        <div class = "mb-2">
-          <a href="/oauth2/authorization/google">
-            <img src="/img/google.png">
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
+<div class="welcome-header">오늘 들려줄 이야기는 무엇인가요?</div>
+<div class="card text-center">
+  <h2>Login</h2>
+  <p class="mb-4">블로그를 이용하기 전에 로그인 해주세요!</p>
+  <a href="/oauth2/authorization/google" class="btn-google">
+    <img src="/img/google.png" alt="Login with Google">
+  </a>
+</div>
 </body>
-</html>
\ No newline at end of file
+</html>
