diff --git a/public/icons/ic_back.svg b/public/icons/ic_back.svg
new file mode 100644
index 000000000..253a47d7b
--- /dev/null
+++ b/public/icons/ic_back.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5332 3.6C6.03615 3.6 5.6332 4.00294 5.6332 4.5C5.6332 4.99706 6.03615 5.4 6.5332 5.4V3.6ZM6.5332 5.4H16.6665V3.6H6.5332V5.4ZM21.0999 9.83333V10.9H22.8999V9.83333H21.0999ZM16.6665 15.3333H6.5332V17.1333H16.6665V15.3333ZM21.0999 10.9C21.0999 13.3485 19.115 15.3333 16.6665 15.3333V17.1333C20.1091 17.1333 22.8999 14.3426 22.8999 10.9H21.0999ZM16.6665 5.4C19.115 5.4 21.0999 7.38487 21.0999 9.83333H22.8999C22.8999 6.39076 20.1091 3.6 16.6665 3.6V5.4Z" fill="white"/>
+<path d="M3 16.2333L10.2 12.5383L10.2 19.9284L3 16.2333Z" fill="white"/>
+</svg>
diff --git a/src/app/board/[id]/BoardDetail.jsx b/src/app/board/[id]/BoardDetail.jsx
index cceb65384..051001afd 100644
--- a/src/app/board/[id]/BoardDetail.jsx
+++ b/src/app/board/[id]/BoardDetail.jsx
@@ -1,12 +1,14 @@
 "use client";
 
 import ActionDropdown from "@/components/ActionDropdown";
+import { API_BASE_URL } from "@/lib/api";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import React from "react";
 
 const BoardDetail = ({ data }) => {
   const router = useRouter();
+
   const handleModify = () => {
     router.push(
       `/board/new?id=${data.id}&title=${encodeURIComponent(
@@ -16,17 +18,15 @@ const BoardDetail = ({ data }) => {
       )}&author=${encodeURIComponent(data.author)}`
     );
   };
+
   const handleDelete = async () => {
     try {
-      const res = await fetch(`http://localhost:4000/posts/${data.id}`, {
+      const res = await fetch(`${API_BASE_URL}/posts/${data.id}`, {
         method: "DELETE",
         // header 필요해? // 오답노트: 나중에 인가시에 필요
       });
 
-      if (!res.ok) {
-        alert("게시글 삭제에 실패했습니다.");
-        console.error(res.statusText);
-      }
+      if (!res.ok) throw new Error(`delete failed: ${res.statusText}`);
 
       alert("삭제가 완료되었습니다.");
       router.push("/board");
@@ -34,13 +34,14 @@ const BoardDetail = ({ data }) => {
       console.error(err);
     }
   };
+
   return (
-    <div>
+    <div className="pt-2">
       <div className="flex justify-between">
-        <div>{data.title}</div>
+        <div className="text-xl font-bold">{data.title}</div>
         <ActionDropdown onModify={handleModify} onDelete={handleDelete} />
       </div>
-      <div className="flex items-center gap-8">
+      <div className="flex items-center gap-8 my-4">
         <div className="flex items-center gap-4">
           <div>
             <Image
@@ -51,23 +52,25 @@ const BoardDetail = ({ data }) => {
             />
           </div>
           <div className="flex items-center gap-2">
-            <div>{data.author}</div>
-            <div>{data.createdAt.split("T")[0].replace(/-/g, ".")}</div>
+            <div className="text-lg text-gray-600">{data.author}</div>
+            <div className="text-sm text-gray-500">
+              {data.createdAt.split("T")[0].replace(/-/g, ". ")}
+            </div>
           </div>
         </div>
         <div className="w-px h-6 bg-gray-200"></div>
-        <div className="flex gap-1">
+        <div className="flex items-center gap-1 border  border-gray-300 rounded-full pl-2 pr-3 py-1 text-gray-500">
           <Image
             src="/icons/heart-inactive.svg"
             alt="Mark this post"
-            width={16}
-            height={16}
+            width={24}
+            height={24}
           />
           {data.likes}
         </div>
       </div>
       <hr className="border-t border-gray-200" />
-      <div>{data.content}</div>
+      <div className="mt-6 mb-8 text-lg">{data.content}</div>
     </div>
   );
 };
diff --git a/src/app/board/[id]/page.jsx b/src/app/board/[id]/page.jsx
index 379dfc628..a37dea5e1 100644
--- a/src/app/board/[id]/page.jsx
+++ b/src/app/board/[id]/page.jsx
@@ -1,11 +1,22 @@
 import React from "react";
 import BoardDetail from "./BoardDetail";
 import Comments from "@/app/components/comments";
+import { API_BASE_URL } from "@/lib/api";
+import { notFound } from "next/navigation";
 
 const BoardDetailPage = async ({ params }) => {
-  const { id } = await params; 
-  const res = await fetch(`http://localhost:4000/posts/${id}`);
-  const post = await res.json();
+  const { id } = await params;
+  let post;
+  try {
+    const res = await fetch(`${API_BASE_URL}/posts/${id}`);
+
+    if (!res.ok) notFound();
+
+    post = await res.json();
+  } catch (err) {
+    console.err("fetch failed: ", err);
+    return <>게시물 로드 중 문제가 발생했습니다.</>;
+  }
   return (
     <div>
       <BoardDetail data={post} />
diff --git a/src/app/board/_components/BestItem.jsx b/src/app/board/_components/BestItem.jsx
index fcca7e02f..269cd1b7c 100644
--- a/src/app/board/_components/BestItem.jsx
+++ b/src/app/board/_components/BestItem.jsx
@@ -4,15 +4,15 @@ import React from "react";
 
 const BestItem = ({ post }) => {
   const isoDate = post.createdAt;
-  const formatted = isoDate.split("T")[0].replace(/-/g, ".");
+  const formatted = isoDate.split("T")[0].replace(/-/g, ". ");
   return (
     <Link
       href={`/board/${post.id}`}
       className="rounded-lg bg-gray-50 px-6 pb-3 grow"
     >
       <Image src="/images/badge.svg" alt="" width={102} height={123} />
-      <div className="flex justify-between mt-4 mb-10">
-        <div>{post.title}</div>
+      <div className="flex justify-between my-4 gap-2">
+        <div className="text-gray-800 text-xl font-semibold">{post.title}</div>
         <Image
           src={post.thumbnail}
           alt="post thumbnail"
@@ -21,10 +21,10 @@ const BestItem = ({ post }) => {
           className="border border-gray-200 rounded-md"
         />
       </div>
-      <div className="flex justify-between">
+      <div className="flex justify-between text-sm">
         <div className="flex gap-2">
-          <div>{post.author}</div>
-          <div className="flex gap-1">
+          <div className="text-gray-600">{post.author}</div>
+          <div className="flex gap-1 text-gray-500">
             <Image
               src="/icons/heart-inactive.svg"
               alt="Mark this post"
@@ -34,7 +34,7 @@ const BestItem = ({ post }) => {
             {post.likes}
           </div>
         </div>
-        <div>{formatted}</div>
+        <div className="text-gray-400">{formatted}</div>
       </div>
     </Link>
   );
diff --git a/src/app/board/_components/BoardBest.jsx b/src/app/board/_components/BoardBest.jsx
index a08c8043c..4daf0b2e0 100644
--- a/src/app/board/_components/BoardBest.jsx
+++ b/src/app/board/_components/BoardBest.jsx
@@ -1,16 +1,20 @@
 import React from "react";
 import BestItem from "./BestItem";
+import { API_BASE_URL } from "@/lib/api";
 
 const BoardBest = async () => {
   const res = await fetch(
-    "http://localhost:4000/posts?_sort=likes&_order=asc&_limit=3"
+    `${API_BASE_URL}/posts?_sort=likes&_order=asc&_limit=3`
   );
   const posts = await res.json();
   return (
-    <div className="flex flex-1 gap-4">
-      {posts.map((post) => (
-        <BestItem key={post.id} post={post} />
-      ))}
+    <div className="flex flex-col gap-5">
+      <div className="text-xl font-bold text-gray-900">베스트 게시글</div>
+      <div className="flex flex-1 gap-4">
+        {posts.map((post) => (
+          <BestItem key={post.id} post={post} />
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/src/app/board/_components/BoardItem.jsx b/src/app/board/_components/BoardItem.jsx
index ee622d20b..ff515c337 100644
--- a/src/app/board/_components/BoardItem.jsx
+++ b/src/app/board/_components/BoardItem.jsx
@@ -6,7 +6,7 @@ const BoardItem = ({ post }) => {
   return (
     <Link href={`/board/${post.id}`} className="flex flex-col">
       <div className="flex justify-between">
-        <div className="text-xl">{post.title}</div>
+        <div className="text-xl text-gray-800 font-semibold">{post.title}</div>
         <Image
           src={post.thumbnail}
           width={72}
@@ -15,7 +15,7 @@ const BoardItem = ({ post }) => {
           className="border border-gray-200 rounded-md"
         />
       </div>
-      <div className="flex justify-between mt-4 mb-6">
+      <div className="flex justify-between mt-4 mb-6 text-sm">
         <div className="flex items-center gap-2">
           <Image
             src="/profile-default.svg"
@@ -23,17 +23,19 @@ const BoardItem = ({ post }) => {
             height={24}
             alt="click likes"
           />
-          <div>{post.author}</div>
-          <div>{post.createdAt.split("T")[0].replace(/-/g, ".")}</div>
+          <div className="text-gray-600">{post.author}</div>
+          <div className="text-gray-500">
+            {post.createdAt.split("T")[0].replace(/-/g, ". ")}
+          </div>
         </div>
-        <div className="flex gap-1">
+        <div className="flex gap-1 items-center">
           <Image
             src="/icons/heart-inactive.svg"
             width={24}
             height={24}
             alt="click likes"
           />
-          <div>{post.likes}</div>
+          <div className="text-gray-500">{post.likes}</div>
         </div>
       </div>
       <hr className="border-t border-gray-200" />
diff --git a/src/app/board/_components/BoardList.jsx b/src/app/board/_components/BoardList.jsx
index 88a51b358..19a8a1df2 100644
--- a/src/app/board/_components/BoardList.jsx
+++ b/src/app/board/_components/BoardList.jsx
@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import BoardItem from "./BoardItem";
 import Button from "@/app/components/Button";
 import Link from "next/link";
+import { API_BASE_URL } from "@/lib/api";
 
 const BoardList = () => {
   const [posts, setPosts] = useState([]);
@@ -16,11 +17,9 @@ const BoardList = () => {
         sort === "latest" ? "_sort=-createdAt" : "_sort=-likes";
 
       try {
-        const res = await fetch(`http://localhost:4000/posts?${sortParams}`);
+        const res = await fetch(`${API_BASE_URL}/posts?${sortParams}`);
 
-        if (!res.ok) {
-          throw new Error("response error: ", res.statusText);
-        }
+        if (!res.ok) throw new Error(`get failed: ${res.statusText}`);
 
         const data = await res.json();
         setPosts(data);
@@ -39,7 +38,7 @@ const BoardList = () => {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex justify-between items-center">
-        <h1 className="text-lg font-bold">게시글</h1>
+        <h1 className="text-xl font-bold text-gray-900">게시글</h1>
         <Link href="/board/new">
           <Button>글쓰기</Button>
         </Link>
diff --git a/src/app/board/new/BoardForm.jsx b/src/app/board/new/BoardForm.jsx
index c2f20d4b3..1827f1701 100644
--- a/src/app/board/new/BoardForm.jsx
+++ b/src/app/board/new/BoardForm.jsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Button from "@/app/components/Button";
+import { API_BASE_URL } from "@/lib/api";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useState } from "react";
 
@@ -23,9 +24,9 @@ const BoardForm = () => {
 
     try {
       const apiUrl = isModifyMode
-        ? `http://localhost:4000/posts/${modifyId}`
-        : "http://localhost:4000/posts";
-      const method = isModifyMode ? "PUT" : "POST";
+        ? `${API_BASE_URL}/posts/${modifyId}`
+        : `${API_BASE_URL}/posts`;
+      const method = isModifyMode ? "PATCH" : "POST";
 
       const res = await fetch(apiUrl, {
         method: method,
diff --git a/src/app/components/comments/_components/Item.jsx b/src/app/components/comments/_components/Item.jsx
index 5fc2de614..8638b2778 100644
--- a/src/app/components/comments/_components/Item.jsx
+++ b/src/app/components/comments/_components/Item.jsx
@@ -10,18 +10,18 @@ const Item = ({ data, onModify, onDelete }) => {
   const [modifyMode, setModifyMode] = useState(false);
 
   return (
-    <div>
+    <div className="flex flex-col gap-4 bg-gray-50 p-4 pb-3 border-b border-b-gray-200">
       {modifyMode ? (
-        <form className="flex flex-col">
-          <input
+        <form className="flex flex-col gap-4">
+          <textarea
             value={text}
             onChange={(e) => setText(e.target.value)}
-            className="bg-gray-100 p-4 rounded-lg"
+            className="bg-gray-100 p-4 rounded-lg resize-none"
           />
           <div className="flex justify-end gap-2">
             <button
               onClick={() => setModifyMode(false)}
-              className="px-6 py-2 rounded-lg text-white bg-gray-400"
+              className="px-6 py-2 text-gray-700"
             >
               취소
             </button>
@@ -46,13 +46,16 @@ const Item = ({ data, onModify, onDelete }) => {
           />
         </div>
       )}
-      <div className="flex gap-2">
+      <div className="flex gap-2 items-center">
         <Image src={data.profile} alt="writer image" width={40} height={40} />
         <div>
-          <div>{data.author}</div>
-          <div>{data.createdAt.split("T")[0].replace(/-/g, ".")}</div>
+          <div className="text-sm text-gray-500">{data.author}</div>
+          <div className="text-xs text-gray-400">
+            {data.createdAt.split("T")[0].replace(/-/g, ". ")}
+          </div>
         </div>
       </div>
+      {/* <hr className="border-t border-gray-200" /> */}
     </div>
   );
 };
diff --git a/src/app/components/comments/index.jsx b/src/app/components/comments/index.jsx
index 2e3cb4125..f375dbe74 100644
--- a/src/app/components/comments/index.jsx
+++ b/src/app/components/comments/index.jsx
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from "react";
 import Item from "./_components/Item";
 import Button from "../Button";
 import Image from "next/image";
+import Link from "next/link";
+import { API_BASE_URL } from "@/lib/api";
 
 const Comments = ({ id }) => {
   const [text, setText] = useState("");
@@ -12,10 +14,10 @@ const Comments = ({ id }) => {
   const getComments = async () => {
     try {
       const res = await fetch(
-        `http://localhost:4000/comments?postId=${id}&_sort=-createdAt`
+        `${API_BASE_URL}/comments?postId=${id}&_sort=-createdAt`
       );
 
-      if (!res.ok) throw new Error("get failed: ", res.statusText);
+      if (!res.ok) throw new Error(`get failed: ${res.statusText}`);
       const data = await res.json();
       setComments(data);
     } catch (err) {
@@ -25,7 +27,7 @@ const Comments = ({ id }) => {
 
   const postComment = async () => {
     try {
-      const res = await fetch(`http://localhost:4000/comments`, {
+      const res = await fetch(`${API_BASE_URL}/comments`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -39,7 +41,7 @@ const Comments = ({ id }) => {
         }),
       });
 
-      if (!res.ok) throw new Error("post failed: ", res.statusText);
+      if (!res.ok) throw new Error(`post failed: ${res.statusText}`);
     } catch (err) {
       console.error(err);
     }
@@ -47,7 +49,7 @@ const Comments = ({ id }) => {
 
   const patchComment = async (commentId, modifiedText) => {
     try {
-      const res = await fetch(`http://localhost:4000/comments/${commentId}`, {
+      const res = await fetch(`${API_BASE_URL}/comments/${commentId}`, {
         method: "PATCH",
         headers: {
           "Content-Type": "application/json",
@@ -57,7 +59,7 @@ const Comments = ({ id }) => {
         }),
       });
 
-      if (!res.ok) throw new Error("patch failed: ", res.statusText);
+      if (!res.ok) throw new Error(`patch failed: ${res.statusText}`);
 
       setComments((prevComments) =>
         prevComments.map((prevComment) =>
@@ -73,11 +75,11 @@ const Comments = ({ id }) => {
 
   const deleteComment = async (commentId) => {
     try {
-      const res = await fetch(`http://localhost:4000/comments/${commentId}`, {
+      const res = await fetch(`${API_BASE_URL}/comments/${commentId}`, {
         method: "DELETE",
       });
 
-      if (!res.ok) throw new Error("delete failed: ", res.statusText);
+      if (!res.ok) throw new Error(`delete failed: ${res.statusText}`);
 
       setComments((prevComments) =>
         prevComments.filter((prevComment) => prevComment.id !== commentId)
@@ -94,12 +96,12 @@ const Comments = ({ id }) => {
   return (
     <div>
       <form className="flex flex-col">
-        <label>댓글달기</label>
+        <label className="text-base font-semibold">댓글달기</label>
         <textarea
           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="댓글을 입력해주세요."
-          className="bg-gray-100 resize-none p-4 rounded-lg mt-2 mb-4"
+          className="bg-gray-100 resize-none p-4 rounded-lg mt-2 mb-5"
         />
         <div className="flex justify-end">
           <Button disabled={!text.trim()} onClick={postComment}>
@@ -107,23 +109,37 @@ const Comments = ({ id }) => {
           </Button>
         </div>
       </form>
-      {comments.length !== 0 ? (
-        comments.map((comment) => (
-          <Item
-            key={comment.id}
-            data={comment}
-            onModify={patchComment}
-            onDelete={deleteComment}
+      <div className="flex flex-col gap-6 mt-7 mb-16">
+        {comments.length !== 0 ? (
+          comments.map((comment) => (
+            <Item
+              key={comment.id}
+              data={comment}
+              onModify={patchComment}
+              onDelete={deleteComment}
+            />
+          ))
+        ) : (
+          <Image
+            src="/reply-empty.svg"
+            alt="There is no reply yet"
+            width={151}
+            height={208}
           />
-        ))
-      ) : (
+        )}
+      </div>
+      <Link
+        href="/board"
+        className="mx-auto w-fit flex gap-2 px-9 py-3 bg-blue-400 text-white rounded-full"
+      >
+        목록으로 돌아가기
         <Image
-          src="/reply-empty.svg"
-          alt="There is no reply yet"
-          width={151}
-          height={208}
+          src="/icons/ic_back.svg"
+          alt="back to board page"
+          width={24}
+          height={24}
         />
-      )}
+      </Link>
     </div>
   );
 };
diff --git a/src/app/globals.css b/src/app/globals.css
index 1508b67a6..33516a151 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -28,3 +28,10 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* globals.css에 추가할 경우 */
+button,
+a,
+[role="button"] {
+  cursor: pointer;
+}
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 19f59904e..da46c3e72 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -23,9 +23,9 @@ export default function RootLayout({ children }) {
     >
       <body>
         <Header />
-        <div className="max-w-300 mx-auto p-4 flex flex-col gap-4">
-          {children}
-        </div>
+        <main className="px-4">
+          <div className="max-w-300 mx-auto mt-6">{children}</div>
+        </main>
       </body>
     </html>
   );
diff --git a/src/components/ActionDropdown.jsx b/src/components/ActionDropdown.jsx
index b459ddc1f..512fe3874 100644
--- a/src/components/ActionDropdown.jsx
+++ b/src/components/ActionDropdown.jsx
@@ -1,35 +1,37 @@
 "use client";
 
-import Image from "next/image";
 import React, { useState } from "react";
 
 const ActionDropdown = ({ onModify, onDelete }) => {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <div>
-      <button onClick={() => setIsOpen((prev) => !prev)} className="relative">
-        {/* <Image
-          src="/icons/kebab.svg"
-          alt="modify or remove this post"
-          width={24}
-          height={24}
-        /> */}
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="w-6 h-6 flex items-center justify-center rounded-lg hover:bg-gray-100"
+      >
         ⋮
       </button>
       {isOpen ? (
-        <div className="bg-white absolute right-0">
-          <div onClick={onModify} className="rounded-t-lg border-black">
+        <div className="bg-white absolute right-0 mt-2 w-28 border border-gray-200 rounded-lg shadow-xs z-10">
+          <button
+            onClick={() => {
+              setIsOpen(false);
+              onModify();
+            }}
+            className="w-full text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-t-lg border-b border-gray-200"
+          >
             수정하기
-          </div>
-          <div
+          </button>
+          <button
             onClick={() => {
               setIsOpen(false);
               onDelete();
             }}
-            className="rounded-t-lg"
+            className="w-full text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-b-lg"
           >
             삭제하기
-          </div>
+          </button>
         </div>
       ) : null}
     </div>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 15c268647..fc2e17fba 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,23 +1,47 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 const Header = () => {
+  const pathname = usePathname();
   return (
-    <header className="border-b border-[#DFDFDF]">
-      <div className="mx-auto flex h-24 max-w-screen-lg items-center justify-between">
-        <Link href="/">
-          <Image
-            src="/logo-sm.svg"
-            alt="Back to Homepage"
-            width={153}
-            height={40}
-          />
-        </Link>
-        <div className="flex gap-4">
-          <Link href="/board">자유게시판</Link>
-          <Link href="/products">중고마켓</Link>
+    <header className="border-b border-gray-300 px-4 py-2">
+      <div className="mx-auto flex max-w-300 items-center justify-between">
+        <div className="flex items-center gap-6">
+          <Link href="/">
+            <Image
+              src="/logo-sm.svg"
+              alt="Back to Homepage"
+              width={153}
+              height={40}
+            />
+          </Link>
+          <div className="flex gap-4 font-bold text-gray-600">
+            <Link
+              href="/board"
+              className={pathname.startsWith("/board") ? "text-blue-500" : ""}
+            >
+              자유게시판
+            </Link>
+            <Link
+              href="/products"
+              className={
+                pathname.startsWith("/products") ? "text-blue-500" : ""
+              }
+            >
+              중고마켓
+            </Link>
+          </div>
         </div>
+        <Link
+          href=""
+          className="px-5 py-2 rounded-lg font-semibold text-white bg-blue-500"
+        >
+          로그인
+        </Link>
       </div>
     </header>
   );
diff --git a/src/lib/api.js b/src/lib/api.js
new file mode 100644
index 000000000..47f5d9bcf
--- /dev/null
+++ b/src/lib/api.js
@@ -0,0 +1 @@
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;