diff --git a/src/App.tsx b/src/App.tsx
index 28c2406..64c3359 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import './App.css'
-import { CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
+import { CommentInput, CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
 import CommentHeader from './CommentHeader';
 import { Footer } from './Footer';
 import { GalleryContent } from './Gallery';
@@ -163,6 +163,7 @@ const comments: SubCommentData[] = [
 function App() {
   return (
     <div>
+      <div className='relative w-[1450px] mx-auto'>
       <main
         className='w-[1160px] m-[20px_auto_0]'
       >
@@ -198,6 +199,7 @@ function App() {
             }} />
           </CommentListContainer>
           <CommentPagination currentPage={1} maxPage={2} />
+          <CommentInput />
           <div style={{
             width: "840px",
           }}>
@@ -205,6 +207,7 @@ function App() {
           </div>
         </section>
       </main>
+      </div>
       <Footer />
     </div>
   )
diff --git a/src/Comment.tsx b/src/Comment.tsx
index 511c9ad..c9a17b8 100644
--- a/src/Comment.tsx
+++ b/src/Comment.tsx
@@ -1,6 +1,7 @@
 import { Separator } from "./Separator";
 import { AuthorData } from "./table";
 import { cn } from "./util/cn";
+import React, { useState } from 'react';
 
 interface CommentDataBase {
     id: number;
@@ -261,4 +262,209 @@ export const CommentPagination: React.FC<CommentPaginationProps> = ({
             </div>
         </div>
     );
-};
\ No newline at end of file
+};
+
+export function CommentInput() {
+    const [isNicknameTooltipVisible, setIsNicknameTooltipVisible] = useState(true); // Show initially based on HTML
+    const [isDcConInfoVisible, setIsDcConInfoVisible] = useState(false); // Hidden initially
+
+    // TODO: Implement state for input values
+    // const [nickname, setNickname] = useState('');
+    // const [password, setPassword] = useState('');
+    // const [comment, setComment] = useState('');
+
+    const toggleDcConInfo = () => setIsDcConInfoVisible(!isDcConInfoVisible);
+    const hideNicknameTooltip = () => setIsNicknameTooltipVisible(false);
+
+    return (
+        <div className="bg-custom-gray-very-light p-3 border-t-2 border-b-2 border-solid border-custom-blue-hover font-apple-dotum text-xs">
+            {/* Use flexbox for layout instead of floats */}
+            <div className="flex justify-between">
+
+                {/* Left Column: Nickname/Password */}
+                <div className="flex flex-col space-y-[5px]">
+                    {/* Nickname Input */}
+                    <div className="relative w-[140px] h-[30px] bg-white border border-custom-border-input">
+                        <label htmlFor="nickname" className="sr-only">닉네임</label>
+
+                        {/* Nickname Tooltip */}
+                        {isNicknameTooltipVisible && (
+                            <div className="absolute right-auto top-[-57px] left-[-14px] bg-custom-green-light rounded-[5px] shadow-tooltip z-[99]">
+                                <div className="relative py-[7px] pr-[28px] pl-[11px]">
+                                    <p className="text-white text-xs leading-4 whitespace-nowrap tracking-normal">
+                                        ㅇㅇ는 갤러리에서 권장하는 비회원 전용<br />
+                                        갤닉네임입니다. (삭제 시 닉네임 등록 가능)
+                                    </p>
+                                    <button
+                                        type="button"
+                                        onClick={hideNicknameTooltip}
+                                        className="absolute top-[10px] right-[10px] w-3 h-3 bg-sp-img bg-[-267px_-818px] cursor-pointer align-[-2px]"
+                                        aria-label="닫기"
+                                    >
+                                        <em className="sr-only">닫기</em>
+                                    </button>
+                                </div>
+                                <div
+                                    style={{
+                                        borderWidth: "9px 6px 0px 6px",
+                                        borderColor: "#98ca33 transparent",
+                                        top: "auto",
+                                        bottom: "-8px",
+                                        left: "33px",
+                                        right: "auto",
+                                        marginTop: "-6px",
+                                        borderStyle: "solid",
+                                        position: "absolute",
+                                    }}
+                                />
+                            </div>
+                        )}
+
+                        {/* Actual Input */}
+                        <input
+                            type="text"
+                            id="nickname"
+                            // value={nickname}
+                            // onChange={(e) => setNickname(e.target.value)}
+                            className="align-top text-xs font-apple w-[126px] h-[28px] leading-tight-29 py-[1px] px-[7px] text-custom-blue-dark border-none outline-none"
+                            placeholder="닉네임" // Use placeholder attribute
+                        />
+                        {/* Delete Button (Implement functionality if needed) */}
+                        <button type="button" className="absolute right-[7px] top-[7px] w-4 h-4 cursor-pointer align-middle">
+                            {/* Add icon here if needed, original HTML has no visible icon */}
+                            <span className="sr-only">삭제</span>
+                        </button>
+
+                        {/* Hidden 'Use Gallery Nickname' Button */}
+                        <button type="button" className="hidden absolute right-0 top-0 h-[30px] pr-2 text-xs font-apple-dotum underline text-custom-blue-dark cursor-pointer align-middle">
+                            갤닉네임 사용
+                        </button>
+                    </div>
+
+                    {/* Password Input */}
+                    <div className="relative w-[140px] h-[30px] bg-white border border-custom-border-input">
+                        <label htmlFor="password" className="sr-only">비밀번호</label>
+                        <input
+                            type="password"
+                            id="password"
+                            // value={password}
+                            // onChange={(e) => setPassword(e.target.value)}
+                            className="align-top text-xs font-apple w-[126px] h-[28px] leading-tight-29 py-[1px] px-[7px] border-none outline-none"
+                            placeholder="비밀번호" // Use placeholder attribute
+                        />
+                    </div>
+                </div>
+
+                {/* Right Column: Textarea and Buttons */}
+                {/* Calculate width: 100% - left column width - gap. Or use flex-grow */}
+                <div className="flex-grow ml-3"> {/* Adjust margin as needed */}
+                    {/* Textarea */}
+                    <div className="relative">
+                        <label
+                            htmlFor="comment"
+                            className="absolute left-0 top-0 p-[13px] text-xs text-custom-gray-medium leading-[18px] pointer-events-none" // Prevent label from blocking textarea
+                        >
+                            타인의 권리를 침해하거나 명예를 훼손하는 댓글은 운영원칙 및 관련 법률에 제재를 받을 수 있습니다.<br />
+                            Shift+Enter 키를 동시에 누르면 줄바꿈이 됩니다.
+                        </label>
+                        <textarea
+                            id="comment"
+                            // value={comment}
+                            // onChange={(e) => setComment(e.target.value)}
+                            className="align-middle text-[13px] font-apple w-full h-[78px] p-[13px] border border-custom-border-input bg-white text-custom-gray-dark leading-[18px] resize-none outline-none focus:bg-white" // Ensure bg is white on focus to hide label
+                        // Add logic to hide placeholder label when typing starts if needed
+                        />
+                    </div>
+
+                    {/* Buttons Row */}
+                    <div className="mt-2 flex justify-between items-center">
+                        {/* Left Buttons (DCCon) */}
+                        <div className="relative flex items-center">
+                            <button
+                                type="button"
+                                className="bg-white border border-custom-blue-dark text-custom-blue-dark font-bold text-xs w-[82px] h-[31px] px-[2px] leading-tight-29 rounded-2 flex items-center justify-center cursor-pointer ml-[3px]"
+                            >
+                                <em className="bg-sp-img inline-block w-6 h-[19px] mr-[5px] ml-[2px] bg-[-229px_0px] align-[-5px]"></em>
+                                디시콘
+                            </button>
+                            <button
+                                type="button"
+                                onClick={toggleDcConInfo}
+                                className="ml-1 mt-px cursor-pointer"
+                                aria-label="디시콘이란"
+                                aria-expanded={isDcConInfoVisible}
+                            >
+                                <em className="bg-sp-img inline-block w-[17px] h-[16px] bg-[-220px_-29px]"></em>
+                            </button>
+
+                            {/* DCCon/NFT Info Popup */}
+                            {isDcConInfoVisible && (
+                                <div className="absolute z-[4001] text-left border-t-2 border-custom-blue-hover border-r border-b border-l bg-white left-0 bottom-full mb-2 w-[518px]"> {/* Positioned above button */}
+                                    <div className="relative overflow-hidden text-custom-gray-dark leading-normal">
+                                        <div className="bg-custom-dropdown-title-bg relative w-full pt-[30px] pb-[27px]">
+                                            <span className="absolute top-[14px] left-[18px] text-xs text-custom-gray-dark font-bold">NFT 이벤트</span>
+                                            <div className="w-[320px] mx-auto">
+                                                {/* Placeholder for Image */}
+                                                <div className="bg-gray-300 w-[200px] h-[50px] mx-auto"> (Image Placeholder) </div>
+                                            </div>
+                                        </div>
+                                        <div className="mt-5 mx-[18px]">
+                                            <p className="text-xs text-custom-gray-dark font-bold">획득법</p>
+                                            <div className="mt-[6px]">
+                                                <h4 className="text-custom-blue-hover text-sm font-normal">① NFT 발행</h4>
+                                                <p className="ml-[18px] mt-1 text-xs">작성한 게시물을 NFT로 발행하면 <b className="font-bold text-custom-blue-hover">일주일</b> 동안 사용할 수 있습니다. (최초 1회)</p>
+                                                <div className="bg-custom-dropdown-bg ml-[18px] rounded-5 p-[6px_8px] mt-[10px] text-xs">
+                                                    <b className="text-custom-red-text mr-[6px]">꿀팁!</b>
+                                                    <span>발행 후 NFT를 구매할 수 있는 클레이를 받을 수 있어요.<a href="#" className="text-custom-dropdown-link underline ml-1">받으러 가기</a></span>
+                                                </div>
+                                            </div>
+                                            <div className="mt-[14px]">
+                                                <h4 className="text-custom-blue-hover text-sm font-normal">② NFT 구매</h4>
+                                                <p className="ml-[18px] mt-1 text-xs">다른 이용자의 NFT를 구매하면 <b className="font-bold text-custom-blue-hover">한 달</b> 동안 사용할 수 있습니다. (구매 시마다 갱신)</p>
+                                                <div className="bg-custom-dropdown-bg ml-[18px] rounded-5 p-[6px_8px] mt-[10px] text-xs">
+                                                    <b className="text-custom-red-text mr-[6px]">꿀팁!</b>
+                                                    <span>구매 후 클레이를 한 번 더 받을 수 있어요.<a href="#" className="text-custom-dropdown-link underline ml-1">받으러 가기</a></span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div className="mt-[22px] mx-[18px] border-t border-dashed border-custom-border-gray pt-4 mb-6">
+                                            <p className="text-xs text-custom-gray-dark font-bold">사용법</p>
+                                            <p className="mt-1 text-xs">디시콘에서
+                                                <span className="bg-custom-dropdown-link tracking-tighter inline-block px-[8px] h-[23px] leading-tight-23 text-white font-bold rounded-50 shadow-sm mx-1 align-middle">지갑연결</span>
+                                                시 바로 사용 가능합니다.
+                                            </p>
+                                        </div>
+                                        <button
+                                            type="button"
+                                            onClick={toggleDcConInfo}
+                                            className="absolute top-0 right-0 p-2 cursor-pointer" // Added padding for easier clicking
+                                            aria-label="닫기"
+                                        >
+                                            <em className="bg-sp-img bg-no-repeat inline-block w-5 h-5 bg-[-195px_-818px]"></em>
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Right Buttons (Register) */}
+                        <div className="flex">
+                            <button
+                                type="button" // Should be type="submit" if part of a form
+                                className="bg-custom-blue-hover border border-custom-blue-dark text-white font-bold text-xs w-[82px] h-[31px] px-[2px] leading-tight-29 rounded-2 cursor-pointer ml-[3px] shadow-register-button"
+                            >
+                                등록
+                            </button>
+                            <button
+                                type="button" // Should be type="submit" if part of a form
+                                className="bg-custom-blue-register-hover border border-custom-blue-dark text-white font-bold text-xs w-[85px] h-[31px] px-[2px] leading-tight-29 rounded-2 cursor-pointer ml-[3px] shadow-register-recommend-button"
+                            >
+                                등록+추천
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/index.css b/src/index.css
index 36b3cb8..9375590 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,13 +3,20 @@
 
 /* --- Extend Tailwind Theme using @theme --- */
 @theme {
+
     --color-custom-blue-dark: rgb(41 54 124);
+    --color-custom-blue-hover: rgb(59 72 144);
+    --color-custom-blue-register-hover: rgb(98 109 166);
     --color-custom-gray-dark: rgb(51 51 51);
     --color-custom-gray-medium: rgb(153 153 153);
     --color-custom-gray-light: rgb(238 238 238);
+    --color-custom-gray-very-light: rgb(250 250 250);
     --color-custom-green: rgb(0 153 51);
+    --color-custom-green-light: rgb(152 202 51);
     --color-custom-red-text: rgb(211 25 0);
     --color-custom-border-gray: rgb(204 204 204);
+    --color-custom-border-input: rgb(206 205 206);
+    --color-custom-dropdown-title-bg: rgb(243 247 255);
     --color-custom-dropdown-bg: rgb(243 243 243);
     --color-custom-dropdown-text: rgb(85 85 85);