diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
index fd97690..fcdfd70 100644
--- a/src/app/design-system/page.tsx
+++ b/src/app/design-system/page.tsx
@@ -7,7 +7,6 @@ import { useState } from 'react';
 import { customToast } from '@/shared/components/toast/CustomToastUtils';
 import ModalLayout from '@/shared/components/modalPop/ModalLayout';
 import ConfirmPop from '@/shared/components/modalPop/ConfirmPop';
-import ChatInput from '@/shared/components/InputBox/ChatInput';
 import SelectBox from '@/shared/components/InputBox/SelectBox';
 import LikeBtn from '@/shared/components/like/LikeBtn';
 import Share from '@/shared/components/share/Share';
@@ -34,7 +33,6 @@ function Page() {
           <Input placeholder="내용을 입력해주세요." id="test" variant="search" />
           <Input placeholder="칵테일을 검색해 보세요" id="test" variant="comment" />
           <Input placeholder="내용을 입력해주세요." id="test" size="lg" />
-          <ChatInput placeholder="내용을 입력해주세요" id="test" />
         </div>
 
         {/* select */}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1915389..16084e3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import '@/shared/styles/global.css';
 import { Toaster } from 'react-hot-toast';
-import ScrollTopBtn from '@/shared/components/scrollTop/ScrollTopBtn';
 import Header from '@/shared/components/header/Header';
-import Footer from '@/shared/components/footer/Footer';
+import FooterWrapper from '@/shared/components/footer/FooterWrapper';
+import ScrollTopBtnWrapper from '@/shared/components/scrollTop/ScrollTopBtnWrapper';
 export const metadata: Metadata = {
   title: 'SSOUL',
   description: '칵테일을 좋아하는 사람들을 위한 서비스',
@@ -22,7 +22,7 @@ export default function RootLayout({
           <div id="observer-target" className="h-[0.5px]"></div>
           {children}
         </main>
-        <Footer />
+        <FooterWrapper />
 
         <div id="modal-root"></div>
         <Toaster
@@ -36,7 +36,7 @@ export default function RootLayout({
           }}
         />
 
-        <ScrollTopBtn />
+        <ScrollTopBtnWrapper />
       </body>
     </html>
   );
diff --git a/src/app/recommend/components/ChatCocktailCard.tsx b/src/app/recommend/components/ChatCocktailCard.tsx
new file mode 100644
index 0000000..19b6c4a
--- /dev/null
+++ b/src/app/recommend/components/ChatCocktailCard.tsx
@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import Dummy from '@/shared/assets/images/dummy/exampleCocktail.png';
+import Link from 'next/link';
+import Keep from '@/shared/components/keep/Keep';
+
+function ChatCocktailCard() {
+  return (
+    <div className="relative flex flex-col w-full min-w-[200px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
+      <Link href="/" className="block relative">
+        <div className="relative w-full h-[200px]">
+          <Image src={Dummy} fill className="object-cover" alt="칵테일 이름" />
+        </div>
+
+        <div className="p-3 flex flex-col gap-1 text-center">
+          <strong className="text-black text-lg">{'진피즈'}</strong>
+          <span className="text-gray-500 text-sm">+ 상세보기</span>
+        </div>
+      </Link>
+      <Keep className="absolute top-2 right-2 z-50" />
+    </div>
+  );
+}
+export default ChatCocktailCard;
diff --git a/src/app/recommend/components/ChatForm.tsx b/src/app/recommend/components/ChatForm.tsx
new file mode 100644
index 0000000..78e6a9a
--- /dev/null
+++ b/src/app/recommend/components/ChatForm.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import Send from '@/shared/assets/icons/send_36.svg';
+import { keyDown } from '@/shared/utills/keyDown';
+import { useState } from 'react';
+
+function ChatForm() {
+  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    const target = e.currentTarget;
+
+    if (target.value == '') {
+      target.style.height = '';
+    }
+    target.style.height = `${target.scrollHeight}px`;
+  };
+
+  return (
+    <div className="fixed left-0 bottom-0 w-full px-3 py-4 bg-primary">
+      <form onSubmit={(e) => e.preventDefault()}>
+        <div className="flex items-end w-full gap-2">
+          <label htmlFor="chatInput" className="sr-only">
+            질문 입력창
+          </label>
+          <textarea
+            id="chatInput"
+            name="chatInput"
+            onKeyDown={(e) => keyDown(e)}
+            onInput={(e) => handleInput(e)}
+            placeholder="칵테일 추천 질문을 입력해주세요."
+            className="w-[calc(100%-3rem)] md:w-[calc(100%-3.75rem)] px-4 py-2 md:py-3.5 rounded-lg h-[40px] md:h-[52px] max-h-[160px] md:max-h-[280px] bg-white text-primary placeholder:text-gray-dark resize-none outline-none"
+          />
+          <button
+            type="button"
+            aria-label="보내기"
+            className="flex-center w-10 md:w-13 h-10 md:h-13 rounded-xl border-1 border-white bg-secondary/20"
+          >
+            <Send className="text-secondary" />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+export default ChatForm;
diff --git a/src/app/recommend/components/ChatRadio.tsx b/src/app/recommend/components/ChatRadio.tsx
new file mode 100644
index 0000000..c42de30
--- /dev/null
+++ b/src/app/recommend/components/ChatRadio.tsx
@@ -0,0 +1,42 @@
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface RadioGroupProps {
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+}
+
+function ChatRadio({ options, value, onChange }: RadioGroupProps) {
+  return (
+    <div role="radiogroup" className="flex flex-col gap-3 mt-5">
+      {options.map((opt) => (
+        <label
+          htmlFor={`radio-${opt.value}`}
+          key={opt.value}
+          className="flex items-center gap-2 cursor-pointer"
+        >
+          <input
+            id={`radio-${opt.value}`}
+            type="radio"
+            name="radio-group"
+            value={opt.value}
+            checked={value === opt.value}
+            onChange={() => onChange(opt.value)}
+            className="sr-only"
+          />
+          <span
+            className={`w-full rounded-3xl px-2 py-1 text-center transition-colors duration-150
+      ${value === opt.value ? 'bg-secondary shadow-[inset_0_0_6px_rgba(255,196,1,1)]' : 'bg-gray-dark/30'} 
+      hover:bg-secondary/100 `}
+          >
+            <span>{opt.label}</span>
+          </span>
+        </label>
+      ))}
+    </div>
+  );
+}
+export default ChatRadio;
diff --git a/src/app/recommend/components/MyChat.tsx b/src/app/recommend/components/MyChat.tsx
new file mode 100644
index 0000000..1d56a31
--- /dev/null
+++ b/src/app/recommend/components/MyChat.tsx
@@ -0,0 +1,39 @@
+interface Message {
+  id: string;
+  sender: 'ssury' | 'user';
+  text: string;
+  type?: 'radio' | 'text';
+}
+
+// 메시지 (연속 메시지)
+const messages: Message[] = [
+  {
+    id: '1',
+    sender: 'user',
+    text: '냥냥냥글자가길어지면 어케될까요 너무너무너무 궁금해요 하하하하하하하하하하하하하하하하하하ㅏ',
+  },
+  { id: '2', sender: 'user', text: '배고파요' },
+];
+
+function MyChat() {
+  return (
+    <article aria-label="내 메시지" className="flex flex-col items-end">
+      <header className="w-fit">
+        <strong>나</strong>
+      </header>
+
+      {/* 메시지 그룹 */}
+      <div className="flex flex-col items-end gap-3 mt-3 pr-3 max-w-[80%]">
+        {messages.map((msg) => (
+          <div
+            key={msg.id}
+            className="w-fit min-w-[120px] p-3 rounded-2xl rounded-tr-none bg-tertiary text-white"
+          >
+            <p className="whitespace-pre-line">{msg.text}</p>
+          </div>
+        ))}
+      </div>
+    </article>
+  );
+}
+export default MyChat;
diff --git a/src/app/recommend/components/SsuryChat.tsx b/src/app/recommend/components/SsuryChat.tsx
new file mode 100644
index 0000000..fa4b620
--- /dev/null
+++ b/src/app/recommend/components/SsuryChat.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import Ssury from '@/shared/assets/ssury/ssury_shaker.webp';
+import Image from 'next/image';
+import { useState } from 'react';
+import ChatRadio from './ChatRadio';
+import ChatCocktailCard from './ChatCocktailCard';
+
+interface Message {
+  id: string;
+  text?: string;
+  type?: 'radio' | 'text' | 'recommend';
+}
+
+function SsuryChat() {
+  const [selected, setSelected] = useState('option1');
+
+  // radio 옵션
+  const options = [
+    { label: '옵션 1', value: 'option1' },
+    { label: '옵션 2', value: 'option2' },
+    { label: '옵션 3', value: 'option3' },
+  ];
+
+  // 메시지 (연속 메시지)
+  const messages: Message[] = [
+    {
+      id: '1',
+      text: '안녕하세요, 바텐더 쑤리에요. \n 취향에 맞는 칵테일을 추천해드릴게요!',
+    },
+    {
+      id: '2',
+      text: '어떤 유형으로 찾아드릴까요?',
+      type: 'radio',
+    },
+    {
+      id: '3',
+      type: 'recommend',
+    },
+  ];
+
+  return (
+    <article aria-label="취향추천 챗봇 메시지" className="">
+      <header className="flex items-end">
+        <div className="relative w-15 md:w-20 h-15 md:h-20">
+          <Image
+            src={Ssury}
+            alt="쑤리아바타"
+            width={80}
+            height={80}
+            className="object-cover w-15 h-15"
+          />
+        </div>
+        <strong>쑤리</strong>
+      </header>
+
+      {/* 메시지 그룹 */}
+      <div className="flex flex-col gap-3 mt-3 pl-3">
+        {messages.map((msg) => (
+          <div key={msg.id}>
+            {msg.type === 'recommend' ? (
+              <ul className="inline-grid grid-cols-1 sm:grid-cols-3 gap-2 justify-start">
+                <li>
+                  <ChatCocktailCard />
+                </li>
+                <li>
+                  <ChatCocktailCard />
+                </li>
+                <li>
+                  <ChatCocktailCard />
+                </li>
+              </ul>
+            ) : (
+              <div className="flex flex-col w-fit max-w-[80%] min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black">
+                {msg.text && <p className="whitespace-pre-line">{msg.text}</p>}
+
+                {/* radio */}
+                {msg.type === 'radio' && (
+                  <ChatRadio options={options} value={selected} onChange={setSelected} />
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </article>
+  );
+}
+export default SsuryChat;
diff --git a/src/app/recommend/page.tsx b/src/app/recommend/page.tsx
index bd0283e..e8575e9 100644
--- a/src/app/recommend/page.tsx
+++ b/src/app/recommend/page.tsx
@@ -1,4 +1,23 @@
+import Bg from '@/shared/assets/images/recommend_bg.webp';
+import ChatForm from './components/ChatForm';
+import SsuryChat from './components/SsuryChat';
+import MyChat from './components/MyChat';
+
 function Page() {
-  return <div>recommend</div>;
+  return (
+    <div
+      className="relative bg-repeat-y bg-top bg-auto w-full flex"
+      style={{ backgroundImage: `url(${Bg.src})` }}
+    >
+      <h1 className="sr-only">취향추천하기</h1>
+      <div className="page-layout max-w-1024 py-12 ">
+        <div className="flex flex-col gap-10 pb-20">
+          <SsuryChat />
+          <MyChat></MyChat>
+        </div>
+      </div>
+      <ChatForm />
+    </div>
+  );
 }
 export default Page;
diff --git a/src/shared/assets/icons/send_36.svg b/src/shared/assets/icons/send_36.svg
index 03aad19..ae67e42 100644
--- a/src/shared/assets/icons/send_36.svg
+++ b/src/shared/assets/icons/send_36.svg
@@ -1,3 +1,3 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.2051 7.26489C27.8609 6.71296 28.689 6.43725 29.126 6.87427C29.5627 7.31133 29.2872 8.13962 28.7354 9.79517L22.8975 27.3079C22.1131 29.6609 21.7207 30.838 21 30.8381C20.2792 30.8381 19.8869 29.6611 19.1025 27.3079L16.8535 20.5598L23.207 14.2073C23.5975 13.8168 23.5974 13.1838 23.207 12.7932C22.8165 12.4027 22.1835 12.4027 21.793 12.7932L15.4395 19.1467L8.69238 16.8977C6.33941 16.1134 5.16235 15.7209 5.16211 15.0002C5.16211 14.2795 6.33917 13.8872 8.69238 13.1028L26.2051 7.26489Z" fill="#FFFFE6"/>
+<path d="M26.2051 7.26489C27.8609 6.71296 28.689 6.43725 29.126 6.87427C29.5627 7.31133 29.2872 8.13962 28.7354 9.79517L22.8975 27.3079C22.1131 29.6609 21.7207 30.838 21 30.8381C20.2792 30.8381 19.8869 29.6611 19.1025 27.3079L16.8535 20.5598L23.207 14.2073C23.5975 13.8168 23.5974 13.1838 23.207 12.7932C22.8165 12.4027 22.1835 12.4027 21.793 12.7932L15.4395 19.1467L8.69238 16.8977C6.33941 16.1134 5.16235 15.7209 5.16211 15.0002C5.16211 14.2795 6.33917 13.8872 8.69238 13.1028L26.2051 7.26489Z" fill="currentColor"/>
 </svg>
diff --git a/src/shared/assets/images/recommend_bg.webp b/src/shared/assets/images/recommend_bg.webp
new file mode 100644
index 0000000..0f7617b
Binary files /dev/null and b/src/shared/assets/images/recommend_bg.webp differ
diff --git a/src/shared/components/InputBox/ChatInput.tsx b/src/shared/components/InputBox/ChatInput.tsx
deleted file mode 100644
index c539780..0000000
--- a/src/shared/components/InputBox/ChatInput.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { keyDown } from '@/shared/utills/keyDown';
-import { Ref } from 'react';
-
-interface Props {
-  id: string;
-  placeholder: string;
-  className?: string;
-  ref?: Ref<HTMLTextAreaElement | null>;
-}
-
-function ChatInput({ id, placeholder, className, ref }: Props) {
-  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    const target = e.currentTarget;
-
-    if (target.value == '') {
-      target.style.height = '';
-    }
-    target.style.height = `${target.scrollHeight}px`;
-  };
-
-  return (
-    <div>
-      <label htmlFor={id} className="sr-only">
-        입력창
-      </label>
-      <textarea
-        id={id}
-        name={id}
-        ref={ref}
-        onKeyDown={(e) => keyDown(e)}
-        onInput={(e) => handleInput(e)}
-        placeholder={placeholder}
-        className={` px-4 py-1 rounded-lg h-13 bg-white text-primary leading-11 placeholder:text-gray-dark resize-none outline-none ${className}`}
-      />
-    </div>
-  );
-}
-export default ChatInput;
diff --git a/src/shared/components/footer/FooterWrapper.tsx b/src/shared/components/footer/FooterWrapper.tsx
new file mode 100644
index 0000000..4a05dc0
--- /dev/null
+++ b/src/shared/components/footer/FooterWrapper.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Footer from './Footer';
+
+export default function FooterWrapper() {
+  const pathname = usePathname();
+  const showFooter = pathname !== '/recommend';
+
+  return showFooter ? <Footer /> : null;
+}
diff --git a/src/shared/components/keep/Keep.tsx b/src/shared/components/keep/Keep.tsx
index 6d45f56..fb7fd18 100644
--- a/src/shared/components/keep/Keep.tsx
+++ b/src/shared/components/keep/Keep.tsx
@@ -8,7 +8,8 @@ interface Props {
 
 function Keep({ className }: Props) {
   const [isClick, setIsClick] = useState(false);
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     setIsClick(!isClick);
   };
 
diff --git a/src/shared/components/scrollTop/ScrollTopBtnWrapper.tsx b/src/shared/components/scrollTop/ScrollTopBtnWrapper.tsx
new file mode 100644
index 0000000..16b543f
--- /dev/null
+++ b/src/shared/components/scrollTop/ScrollTopBtnWrapper.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import ScrollTopBtn from './ScrollTopBtn';
+
+function ScrollTopBtnWrapper() {
+  const pathname = usePathname();
+  const showScroll = pathname !== '/recommend';
+
+  return showScroll ? <ScrollTopBtn /> : null;
+}
+export default ScrollTopBtnWrapper;
diff --git a/src/shared/styles/_utilities.css b/src/shared/styles/_utilities.css
index a7045fb..7846bf0 100644
--- a/src/shared/styles/_utilities.css
+++ b/src/shared/styles/_utilities.css
@@ -23,7 +23,7 @@
 
   /* 페이지 레이아웃 기본 값 */
   .page-layout {
-    @apply flex-1 w-full px-4 mx-auto;
+    @apply flex-1 w-full px-3 mx-auto;
   }
 
   /* max-width 별 */