diff --git a/public/ActivateButton.png b/public/ActivateButton.png
deleted file mode 100644
index 733c6555..00000000
Binary files a/public/ActivateButton.png and /dev/null differ
diff --git a/public/BackPage.png b/public/BackPage.png
deleted file mode 100644
index 37bc8b32..00000000
Binary files a/public/BackPage.png and /dev/null differ
diff --git a/public/CalmButton.png b/public/CalmButton.png
deleted file mode 100644
index 40d9770d..00000000
Binary files a/public/CalmButton.png and /dev/null differ
diff --git a/public/CyanButton.png b/public/CyanButton.png
deleted file mode 100644
index 3b8831a3..00000000
Binary files a/public/CyanButton.png and /dev/null differ
diff --git a/public/DisabledButton.png b/public/DisabledButton.png
deleted file mode 100644
index 3b3a52a7..00000000
Binary files a/public/DisabledButton.png and /dev/null differ
diff --git a/public/Google.png b/public/Google.png
deleted file mode 100644
index 1bf48b5b..00000000
Binary files a/public/Google.png and /dev/null differ
diff --git a/public/Google.svg b/public/Google.svg
new file mode 100644
index 00000000..513bd42e
--- /dev/null
+++ b/public/Google.svg
@@ -0,0 +1,13 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1857_28663)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.639 20.2042C28.639 19.566 28.5817 18.9524 28.4754 18.3633H19.999V21.8446H24.8427C24.634 22.9696 23.9999 23.9228 23.0468 24.561V26.8192H25.9554C27.6572 25.2524 28.639 22.9451 28.639 20.2042Z" fill="#4285F4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9995 29.0009C22.4295 29.0009 24.4668 28.195 25.9559 26.8205L23.0472 24.5623C22.2413 25.1023 21.2104 25.4214 19.9995 25.4214C17.6554 25.4214 15.6713 23.8382 14.9636 21.7109H11.9568V24.0428C13.4377 26.9841 16.4813 29.0009 19.9995 29.0009Z" fill="#34A853"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9638 21.7108C14.7838 21.1708 14.6816 20.594 14.6816 20.0008C14.6816 19.4076 14.7838 18.8308 14.9638 18.2908V15.959H11.957C11.3475 17.174 10.9998 18.5485 10.9998 20.0008C10.9998 21.4531 11.3475 22.8276 11.957 24.0426L14.9638 21.7108Z" fill="#FBBC05"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9995 14.5795C21.3209 14.5795 22.5072 15.0336 23.44 15.9255L26.0213 13.3441C24.4627 11.8918 22.4254 11 19.9995 11C16.4813 11 13.4377 13.0168 11.9568 15.9582L14.9636 18.29C15.6713 16.1627 17.6554 14.5795 19.9995 14.5795Z" fill="#EA4335"/>
+</g>
+<defs>
+<clipPath id="clip0_1857_28663">
+<rect x="11" y="11" width="18" height="18" rx="5.02175" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/GroupStrcatMake.png b/public/GroupStrcatMake.png
deleted file mode 100644
index ea8c9754..00000000
Binary files a/public/GroupStrcatMake.png and /dev/null differ
diff --git a/public/StrcatButton.png b/public/StrcatButton.png
deleted file mode 100644
index 9a938c57..00000000
Binary files a/public/StrcatButton.png and /dev/null differ
diff --git a/public/StrcatMake.png b/public/StrcatMake.png
deleted file mode 100644
index f7dd1829..00000000
Binary files a/public/StrcatMake.png and /dev/null differ
diff --git a/public/cats/calm/in.gif b/public/cats/calm/in.gif
new file mode 100644
index 00000000..aacdc1d4
Binary files /dev/null and b/public/cats/calm/in.gif differ
diff --git a/public/cats/calm/leftWall.gif b/public/cats/calm/leftWall.gif
new file mode 100644
index 00000000..2509602a
Binary files /dev/null and b/public/cats/calm/leftWall.gif differ
diff --git a/public/cats/calm/out.gif b/public/cats/calm/out.gif
new file mode 100644
index 00000000..b77bf3d6
Binary files /dev/null and b/public/cats/calm/out.gif differ
diff --git a/public/cats/calm/rightWall.gif b/public/cats/calm/rightWall.gif
new file mode 100644
index 00000000..082b6ebf
Binary files /dev/null and b/public/cats/calm/rightWall.gif differ
diff --git a/public/cats/calm/sit.gif b/public/cats/calm/sit.gif
new file mode 100644
index 00000000..4a4a77ec
Binary files /dev/null and b/public/cats/calm/sit.gif differ
diff --git a/public/cats/cyan/in.gif b/public/cats/cyan/in.gif
new file mode 100644
index 00000000..86fc0b32
Binary files /dev/null and b/public/cats/cyan/in.gif differ
diff --git a/public/cats/cyan/leftWall.gif b/public/cats/cyan/leftWall.gif
new file mode 100644
index 00000000..a27a8504
Binary files /dev/null and b/public/cats/cyan/leftWall.gif differ
diff --git a/public/cats/cyan/out.gif b/public/cats/cyan/out.gif
new file mode 100644
index 00000000..250bf4d9
Binary files /dev/null and b/public/cats/cyan/out.gif differ
diff --git a/public/cats/cyan/rightWall.gif b/public/cats/cyan/rightWall.gif
new file mode 100644
index 00000000..5201d7a5
Binary files /dev/null and b/public/cats/cyan/rightWall.gif differ
diff --git a/public/cats/cyan/sit.gif b/public/cats/cyan/sit.gif
new file mode 100644
index 00000000..52c8e4cc
Binary files /dev/null and b/public/cats/cyan/sit.gif differ
diff --git a/public/cats/green/in.gif b/public/cats/green/in.gif
new file mode 100644
index 00000000..684388da
Binary files /dev/null and b/public/cats/green/in.gif differ
diff --git a/public/cats/green/leftWall.gif b/public/cats/green/leftWall.gif
new file mode 100644
index 00000000..ce44592f
Binary files /dev/null and b/public/cats/green/leftWall.gif differ
diff --git a/public/cats/green/out.gif b/public/cats/green/out.gif
new file mode 100644
index 00000000..0a4ee068
Binary files /dev/null and b/public/cats/green/out.gif differ
diff --git a/public/cats/green/rightWall.gif b/public/cats/green/rightWall.gif
new file mode 100644
index 00000000..da80d52f
Binary files /dev/null and b/public/cats/green/rightWall.gif differ
diff --git a/public/cats/green/sit.gif b/public/cats/green/sit.gif
new file mode 100644
index 00000000..4e177045
Binary files /dev/null and b/public/cats/green/sit.gif differ
diff --git a/public/cats/strcat/in.gif b/public/cats/strcat/in.gif
new file mode 100644
index 00000000..987a7f9f
Binary files /dev/null and b/public/cats/strcat/in.gif differ
diff --git a/public/cats/strcat/leftWall.gif b/public/cats/strcat/leftWall.gif
new file mode 100644
index 00000000..1553ae0a
Binary files /dev/null and b/public/cats/strcat/leftWall.gif differ
diff --git a/public/cats/strcat/out.gif b/public/cats/strcat/out.gif
new file mode 100644
index 00000000..7f606a71
Binary files /dev/null and b/public/cats/strcat/out.gif differ
diff --git a/public/cats/strcat/rightWall.gif b/public/cats/strcat/rightWall.gif
new file mode 100644
index 00000000..6ae5864b
Binary files /dev/null and b/public/cats/strcat/rightWall.gif differ
diff --git a/public/cats/strcat/sit.gif b/public/cats/strcat/sit.gif
new file mode 100644
index 00000000..d5305194
Binary files /dev/null and b/public/cats/strcat/sit.gif differ
diff --git a/public/cats/strcat_basic_default.gif b/public/cats/strcat_basic_default.gif
deleted file mode 100644
index 9098b0bf..00000000
Binary files a/public/cats/strcat_basic_default.gif and /dev/null differ
diff --git a/public/cats/strcat_black.gif b/public/cats/strcat_black.gif
deleted file mode 100644
index aec7be6f..00000000
Binary files a/public/cats/strcat_black.gif and /dev/null differ
diff --git a/public/cats/strcat_scroll_default.gif b/public/cats/strcat_scroll_default.gif
deleted file mode 100644
index fa3d233c..00000000
Binary files a/public/cats/strcat_scroll_default.gif and /dev/null differ
diff --git a/public/cats/strcat_yellow.gif b/public/cats/strcat_yellow.gif
deleted file mode 100644
index 9fb3b796..00000000
Binary files a/public/cats/strcat_yellow.gif and /dev/null differ
diff --git a/public/greenButton.png b/public/greenButton.png
deleted file mode 100644
index 20729432..00000000
Binary files a/public/greenButton.png and /dev/null differ
diff --git a/public/kakao.png b/public/kakao.png
deleted file mode 100644
index 0cdd5df6..00000000
Binary files a/public/kakao.png and /dev/null differ
diff --git a/public/kakao.svg b/public/kakao.svg
new file mode 100644
index 00000000..e083ecbf
--- /dev/null
+++ b/public/kakao.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.0594 11.2422C14.788 11.2422 10.5369 14.6431 10.5369 18.7718C10.5369 21.4517 12.3053 23.7983 14.958 25.1383L14.0602 28.4916C14.0433 28.5419 14.0407 28.5958 14.0527 28.6474C14.0647 28.6991 14.0909 28.7464 14.1282 28.784C14.1827 28.8321 14.2528 28.8587 14.3255 28.8588C14.3857 28.854 14.4429 28.8302 14.4887 28.7908L18.3522 26.1858C18.9224 26.2645 19.4973 26.3053 20.073 26.3082C25.3376 26.3082 29.5956 22.9073 29.5956 18.7718C29.5956 14.6363 25.324 11.2422 20.0594 11.2422Z" fill="black"/>
+</svg>
diff --git a/public/strcatImage.png b/public/strcatImage.png
deleted file mode 100644
index f76690bc..00000000
Binary files a/public/strcatImage.png and /dev/null differ
diff --git a/src/app/create/group/page.tsx b/src/app/create/group/page.tsx
index 5c190e39..f5ea2efc 100644
--- a/src/app/create/group/page.tsx
+++ b/src/app/create/group/page.tsx
@@ -27,7 +27,9 @@ export default function Create() {
     );
     if (isConfirmed) {
       try {
-        const res = await axiosInstance.post(`/board-groups`, { title: title });
+        const res = await axiosInstance.post(`/board-groups`, {
+          title: `\/\/${title}`,
+        });
         router.push(`/group/${res.data}`);
       } catch (err) {
         const error = err as AxiosError;
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index a52c3f62..ee8bf967 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -38,7 +38,7 @@ export default function Create() {
     const data = {
       groupId: groupId,
       backgroundColor: Theme,
-      title: title,
+      title: `\/\/${title}`,
     };
     axiosInstance
       .post(`/boards`, data)
@@ -83,7 +83,7 @@ export default function Create() {
   return (
     <div className={`${Theme.background} h-full w-full`}>
       <div className="flex h-full w-full flex-col">
-        <div className="basis-1/1">
+        <div className="basis-1/12">
           <div className="flex h-full w-full flex-row">
             <div
               className=" basis-1/6 items-center justify-center pl-[24px] pt-[16px]"
@@ -102,21 +102,19 @@ export default function Create() {
           </div>
         </div>
         <div className="basis-2/12">
-          <div className="mt-10 flex flex-col items-center justify-center">
-            <div className="w-80">
-              <textarea
-                id="titleMessage"
-                rows={1}
-                value={title}
-                className={` w-full resize-none ${Theme.background} text-[22px] ${Theme.defaultText} outline-none placeholder:${Theme.defaultText}`}
-                placeholder="제목을 입력해주세요."
-                maxLength={30}
-                onChange={(e) => handleChangeTitle(e)}
-                onKeyDown={(e) => handleKeyDownTitle(e, title)}
-              />
-              <div className={`text-right ${ErrorFontColor}`}>
-                {title.length}/30
-              </div>
+          <div className="mt-10 flex w-full basis-3/12 flex-col items-center justify-center px-[24px]">
+            <textarea
+              id="titleMessage"
+              rows={1}
+              value={title}
+              className={` w-full resize-none ${Theme.background} text-[22px] ${Theme.defaultText} outline-none placeholder:${Theme.defaultText}`}
+              placeholder="제목을 입력해주세요."
+              maxLength={30}
+              onChange={(e) => handleChangeTitle(e)}
+              onKeyDown={(e) => handleKeyDownTitle(e, title)}
+            />
+            <div className={`w-full text-right text-[14px] ${ErrorFontColor}`}>
+              {title.length}/30
             </div>
           </div>
         </div>
@@ -132,11 +130,11 @@ export default function Create() {
           <ThemeChange />
         </div>
         <div className="basis-2/12">
-          <div className="mt-10 flex flex-row items-center justify-center">
+          <div className="mx-[24px] mt-10 flex flex-row items-center justify-center">
             <BottomButton
               height="h-[42px]"
               name="완료"
-              width="w-[312px]"
+              width="w-full"
               onClickHandler={() => handleConfirm()}
               disabled={buttonState}
               color={`${Theme.rightCTA}`}
diff --git a/src/app/group/[id]/page.tsx b/src/app/group/[id]/page.tsx
index ee2633c8..c94120bd 100644
--- a/src/app/group/[id]/page.tsx
+++ b/src/app/group/[id]/page.tsx
@@ -25,7 +25,7 @@ export default function Group({ params }: { params: { id: string } }) {
   const [observe] = useRecoilState(observeState);
   const [isOwner, setIsOwner] = useState<boolean>(false);
   const router = useRouter();
-  const scrollToId = (itemId: number) => {
+  const scrollToId = (itemId: string) => {
     const map = itemsRef.current;
     const node = map.get(itemId);
     const offset = node.offsetTop;
@@ -48,7 +48,7 @@ export default function Group({ params }: { params: { id: string } }) {
         setIsOwner(data.data.isOwner);
       })
       .catch((error) => {});
-  }, []);
+  }, [params.id]);
   return (
     <>
       <Drawer />
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 297733d4..49637e0e 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -29,42 +29,36 @@ export default function Login() {
             <div>로그인하고 스트링캣을 생성해보세요.</div>
           </div>
         </div>
-        <div className="basis-8/12"></div>
+        <div className="basis-9/12"></div>
         <div className="mx-[24px] basis-3/12">
-          <button
-            className="mt-3 flex h-12 w-full flex-row justify-center rounded-lg bg-yellow-300  "
+          <div
+            className="h-[45px] w-full rounded-lg bg-yellow-300  "
             onClick={onClickOAuthKakao}
           >
-            <div className=" basis-3/12"></div>
-            <div className="flex basis-52 flex-row items-center justify-center">
-              <Image
-                src="/kakao.png"
-                width={48}
-                height={48}
-                alt="kakao"
-                className="h-12"
-              />
-              <div className="h-full basis-32 text-left">카카오로 시작하기</div>
+            <div className="flex h-full w-full flex-row">
+              <div className="basis-2/12">
+                <Image src="/kakao.svg" width={48} height={48} alt="kakao" />
+              </div>
+              <div className="mt-[12px] basis-8/12 text-center text-[16px]">
+                카카오 시작하기
+              </div>
+              <div className="basis-2/12"></div>
             </div>
-            <div className="basis-3/12"></div>
-          </button>
-          <button
-            className="mt-3 flex h-12 w-full flex-row justify-center rounded-lg bg-neutral-200 "
+          </div>
+          <div
+            className="mt-[22px] h-[45px] w-full rounded-lg bg-neutral-200  "
             onClick={onClickOAuthGoogle}
           >
-            <div className=" basis-3/12"></div>
-            <div className="flex basis-52 flex-row items-center justify-center">
-              <Image
-                src="/google.png"
-                width={48}
-                height={48}
-                alt="google"
-                className="h-12"
-              />
-              <div className="h-full basis-32 text-left">구글로 시작하기</div>
+            <div className="flex h-full w-full flex-row">
+              <div className="basis-2/12">
+                <Image src="/google.svg" width={48} height={48} alt="google" />
+              </div>
+              <div className="mt-[12px] basis-8/12 text-center text-[16px]">
+                구글 시작하기
+              </div>
+              <div className="basis-2/12"></div>
             </div>
-            <div className="basis-3/12"></div>
-          </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/app/modal/page.tsx b/src/app/modal/page.tsx
index f66e03f8..8d528ca0 100644
--- a/src/app/modal/page.tsx
+++ b/src/app/modal/page.tsx
@@ -3,15 +3,15 @@
 import CatAnimation from '@/component/CatAnimation';
 import Error from '@/component/Modal/Error';
 import useModal from '@/hooks/useModal';
-import { catState } from '@/recoil/cat';
-import { catAction } from '@/types/cat';
+import { catAnimationState } from '@/recoil/catAnimation';
+import { catAction } from '@/types/animation';
 import { axiosInstance } from '@/utils/axios';
 import { confirm } from '@/utils/confirm';
 import { useRecoilState } from 'recoil';
 
 export default function Modal() {
   const [openModal, closeModal] = useModal();
-  const [, setCat] = useRecoilState(catState);
+  const [, setCat] = useRecoilState(catAnimationState);
 
   const handleConfirm = async () => {
     const result = await confirm('컨펌 메시지 글', openModal, closeModal);
@@ -29,7 +29,8 @@ export default function Modal() {
     const divLeft = div.getBoundingClientRect().left;
     const divTop = div.getBoundingClientRect().top;
     setCat({
-      catAction: catAction.exit,
+      src: '/cats/in.gif',
+      catAction: catAction.out,
       width: 50,
       height: 50,
       top: divTop,
@@ -43,7 +44,8 @@ export default function Modal() {
     const divBottom = div.getBoundingClientRect().bottom;
     const divRight = div.getBoundingClientRect().right;
     setCat({
-      catAction: catAction.exit,
+      src: '/cats/strcat/in.gif',
+      catAction: catAction.out,
       width: 50,
       height: 50,
       top: divBottom,
@@ -57,7 +59,8 @@ export default function Modal() {
     const divLeft = div.getBoundingClientRect().left;
     const divBottom = div.getBoundingClientRect().bottom;
     setCat({
-      catAction: catAction.scroll,
+      src: '/cats/strcat/in.gif',
+      catAction: catAction.out,
       width: 50,
       height: 50,
       top: divBottom + 50,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 16ef7dd1..85cf81fa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -41,7 +41,7 @@ export default function Home() {
             className={`mx-[24px] mt-[46px] text-[20px] ${Theme.defaultText}`}
           >
             <p>
-              {`// 스트링캣은 문자열을 끝없이 늘려 스크롤을 만들 수 있는 신개념
+              {`\/\/ 스트링캣은 문자열을 끝없이 늘려 스크롤을 만들 수 있는 신개념
               롤링페이퍼 서비스 입니다.`}
             </p>
             <p>소중한 사람에게 스트링캣을 남겨보세요!</p>
diff --git a/src/app/personal/[id]/page.tsx b/src/app/personal/[id]/page.tsx
index 30a287f3..4d284354 100644
--- a/src/app/personal/[id]/page.tsx
+++ b/src/app/personal/[id]/page.tsx
@@ -1,19 +1,22 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { axiosInstance } from '@/utils/axios';
 import StrcatBoard from '@/component/StrcatBoard';
 import BottomButton from '@/component/BottomButton';
 import ContentPhoto from '@/component/ContentPhoto';
 import { useRecoilState } from 'recoil';
 import { themeState } from '@/recoil/theme';
 import Drawer from '@/component/Drawer';
-import StrcatHeader from '@/component/StrcatHeader';
 import { observeState } from '@/recoil/observe';
 import { useRouter } from 'next/navigation';
 import { board } from '@/types/boards';
 import { scrollToAdd, setMap } from '@/utils/scrollTo';
-import { handleShare } from '@/utils/handleShare';
+import CatAnimation from '@/component/CatAnimation';
+import { catAction } from '@/types/animation';
+import { useCat } from '@/hooks/useCat';
+import ShareButton from '@/component/ShareButton';
+import { axiosInstance } from '@/utils/axios';
+import StrcatHeader from '@/component/StrcatHeader';
 
 export default function Personal({ params }: { params: { id: string } }) {
   const [board, setBoard] = useState<board[]>([]);
@@ -23,40 +26,50 @@ export default function Personal({ params }: { params: { id: string } }) {
   const [observe] = useRecoilState(observeState);
   const [theme] = useRecoilState(themeState);
   const router = useRouter();
+  const [runCatAnimati] = useCat();
   useEffect(() => {
-    //axios
     axiosInstance
       .get(`/boards/${params.id}`)
-      //.get(`/api/personal`)
+      // .get(`/api/personal`)
       .then((data) => {
         setBoard([data.data.board]);
         setIsOwner(data.data.isOwner);
       })
       .catch((error) => {});
-  }, []);
+  }, [params.id]);
 
   const handleClick = () => {
     setIsAdd(true);
     scrollToAdd(board[0].id, itemsRef);
   };
-  if (!board.length) return null;
+
+  useEffect(() => {
+    if (board) runCatAnimati('strcatCreate', catAction.sit, 10000);
+  }, [board]);
+
   return (
     <>
       <Drawer />
       <StrcatHeader />
+      <CatAnimation />
       <div
         className={`relative w-full  py-[24px] text-justify ${theme.background} pb-[500px]`}
       >
-        <StrcatBoard
-          board={board[0]}
-          ref={(node) => setMap(node, board[0], itemsRef)}
-          isAdd={isAdd}
-          setIsAdd={setIsAdd}
-        />
+        {board.length && (
+          <StrcatBoard
+            board={board[0]}
+            ref={(node) => setMap(node, board[0], itemsRef)}
+            isAdd={isAdd}
+            setIsAdd={setIsAdd}
+          />
+        )}
         {!isAdd &&
           (isOwner ? (
             <div className="fixed bottom-5 left-0 z-50 flex w-full items-center justify-center">
-              <div className="flex w-full max-w-md items-center justify-center px-[24px]">
+              <div
+                className="flex h-full w-full max-w-md items-center justify-center px-[24px] "
+                id="strcatCreate"
+              >
                 <BottomButton
                   height="h-[42px]"
                   name="저장"
@@ -86,7 +99,10 @@ export default function Personal({ params }: { params: { id: string } }) {
           ) : (
             <>
               <div className=" fixed bottom-0 left-0 z-50 flex w-full items-center justify-center">
-                <div className="flex w-full max-w-md items-center justify-center px-[24px] ">
+                <div
+                  className="flex w-full max-w-md items-center justify-center px-[24px] "
+                  id="strcatCreate"
+                >
                   <BottomButton
                     name="스트링캣 만들기"
                     height="h-[42px]"
@@ -107,13 +123,8 @@ export default function Personal({ params }: { params: { id: string } }) {
               </div>
             </>
           ))}
-        {!board[0].contents.length && !isAdd && (
-          <div
-            className="  h-32 w-32 bg-slate-200"
-            onClick={() => handleShare(`/personal/${params.id}`)}
-          >
-            공유하기
-          </div>
+        {board.length && !board[0].contents.length && !isAdd && (
+          <ShareButton params={params.id} />
         )}
         {!isAdd && <ContentPhoto />}
       </div>
diff --git a/src/component/CatAnimation.tsx b/src/component/CatAnimation.tsx
index d13d2dde..293873a4 100644
--- a/src/component/CatAnimation.tsx
+++ b/src/component/CatAnimation.tsx
@@ -1,27 +1,25 @@
-import { catState } from '@/recoil/cat';
-import { catAction } from '@/types/cat';
+import { catAnimationState } from '@/recoil/catAnimation';
 import Image from 'next/image';
 import { useRecoilState } from 'recoil';
 
 export default function CatAnimation() {
-  const [cat] = useRecoilState(catState);
+  const [catAnimation] = useRecoilState(catAnimationState);
 
   return (
     <div
-      className="fixed"
+      className="fixed z-[55]"
       style={{
-        width: `${cat.width}px`,
-        height: `${cat.height}px`,
-        top: `${cat.top - cat.width}px`,
-        left: `${cat.left}px`,
+        width: `${catAnimation.width}px`,
+        height: `${catAnimation.height}px`,
+        top: `${catAnimation.top}px`,
+        left: `${catAnimation.left}px`,
       }}
     >
-      {cat.catAction === catAction.exit && (
-        <Image alt="exit" src="/cats/strcat_basic_default.gif" fill />
-      )}
-      {cat.catAction === catAction.scroll && (
-        <Image alt="exit" src="/cats/strcat_scroll_default.gif" fill />
-      )}
+      <Image
+        alt={`${catAnimation.catAction}`}
+        src={`${catAnimation.src}`}
+        fill
+      />
     </div>
   );
 }
diff --git a/src/component/Drawer.tsx b/src/component/Drawer.tsx
index 89278e32..28d37573 100644
--- a/src/component/Drawer.tsx
+++ b/src/component/Drawer.tsx
@@ -50,7 +50,7 @@ export default function Drawer() {
 
   useEffect(() => {
     fetchData();
-  });
+  }, []);
 
   return (
     drawer &&
diff --git a/src/component/Icon/ModalBackground.tsx b/src/component/Icon/ModalBackground.tsx
new file mode 100644
index 00000000..c320c619
--- /dev/null
+++ b/src/component/Icon/ModalBackground.tsx
@@ -0,0 +1,12 @@
+export default function ModalBackground() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="312"
+      height="260"
+      fill="none"
+    >
+      <path fill="#fff" d="M0 256h309v4H0zM3 0h309v4H3zM0 4h312v252H0z" />
+    </svg>
+  );
+}
diff --git a/src/component/Icon/ModalClose.tsx b/src/component/Icon/ModalClose.tsx
new file mode 100644
index 00000000..08742e77
--- /dev/null
+++ b/src/component/Icon/ModalClose.tsx
@@ -0,0 +1,14 @@
+export default function ModalClose() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none">
+      <path
+        fill="#212121"
+        d="M14 13.5h1v1h1v1h1v1h-1v1h-1v-1h-1v-1h-1v-1h-2v1h-1v1H9v1H8v-1H7v-1h1v-1h1v-1h1v-2H9v-1H8v-1H7v-1h1v-1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v1h1v1h-1v1h-1v1h-1v2Z"
+      />
+      <path
+        fill="#212121"
+        d="M22 9.5v-2h-1v-2h-1v-1h-1v-1h-2v-1h-2v-1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1v-6h-1Zm-1 6h-1v2h-1v2h-2v1h-2v1H9v-1H7v-1H5v-2H4v-2H3v-6h1v-2h1v-2h2v-1h2v-1h6v1h2v1h2v2h1v2h1v6Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/component/Modal/Confirm.tsx b/src/component/Modal/Confirm.tsx
index 2bdd45f5..68c62c15 100644
--- a/src/component/Modal/Confirm.tsx
+++ b/src/component/Modal/Confirm.tsx
@@ -1,3 +1,8 @@
+import BottomButton from '@/component/BottomButton';
+import Image from 'next/image';
+import ModalClose from '../Icon/ModalClose';
+import ModalBackground from '../Icon/ModalBackground';
+
 interface Props {
   content: string;
   yes: () => void;
@@ -6,23 +11,35 @@ interface Props {
 
 export default function Confirm({ content, yes, no }: Props) {
   return (
-    <div className="flex h-full w-full flex-col bg-green-700">
-      <div className="flex h-[70%] items-center justify-center p-10 text-center text-2xl">
-        {content}
-      </div>
-      <div className="flex h-[30%] flex-row justify-around">
-        <button
-          className="h-[80%] basis-2/5 bg-amber-200 text-3xl"
-          onClick={yes}
-        >
-          예
-        </button>
-        <button
-          className="h-[80%] basis-2/5 bg-amber-200 text-3xl"
-          onClick={no}
-        >
-          아니요
-        </button>
+    <div className="flex  h-[260px] w-[312px] flex-col">
+      <ModalBackground />
+      <div className="felx felx-col absolute h-[312px] w-[312px] items-center justify-center">
+        <div className="flex w-full justify-end p-[16px]">
+          <div onClick={no}>
+            <ModalClose />
+          </div>
+        </div>
+        <div className=" flex h-[150px] items-center justify-center px-16">
+          <p>{content}</p>
+        </div>
+        <div className="flex flex-row justify-around">
+          <BottomButton
+            height="h-[42px]"
+            color="bg-[#A6A6A6]"
+            name="아니요"
+            width="basis-2/5"
+            onClickHandler={no}
+            disabled={false}
+          />
+          <BottomButton
+            height="h-[42px]"
+            color="bg-[#7CED43]"
+            name="예"
+            width="basis-2/5"
+            onClickHandler={yes}
+            disabled={false}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/component/Modal/index.tsx b/src/component/Modal/index.tsx
index 8f5807b4..f0c41f1a 100644
--- a/src/component/Modal/index.tsx
+++ b/src/component/Modal/index.tsx
@@ -15,9 +15,7 @@ export default function Modal() {
         className="fixed top-0 z-20 flex h-full w-full max-w-md items-center justify-center bg-slate-400/50"
         onClick={(e) => handleBackground(e, closeModal)}
       >
-        <div className="relative flex h-[50%] basis-4/5 flex-col items-center justify-center bg-red-300">
-          {modal.modalComponent}
-        </div>
+        {modal.modalComponent}
       </div>
     )
   );
diff --git a/src/component/ObserveContent.tsx b/src/component/ObserveContent.tsx
index 1a5acde3..7f92b0fc 100644
--- a/src/component/ObserveContent.tsx
+++ b/src/component/ObserveContent.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import { themeObj, themeState } from '@/recoil/theme';
 interface props {
   content: content;
-  boardId: number;
+  boardId: string;
   isAdd: boolean;
   boardTheme: 'strcat' | 'calm' | 'green' | 'cyan';
 }
diff --git a/src/component/ShareButton.tsx b/src/component/ShareButton.tsx
new file mode 100644
index 00000000..89caf35f
--- /dev/null
+++ b/src/component/ShareButton.tsx
@@ -0,0 +1,16 @@
+import { handleShare } from '@/utils/handleShare';
+
+interface Props {
+  params: string;
+}
+
+export default function ShareButton({ params }: Props) {
+  return (
+    <div
+      className="  h-32 w-32 bg-slate-200"
+      onClick={() => handleShare(`/personal/${params}`)}
+    >
+      공유하기
+    </div>
+  );
+}
diff --git a/src/component/StrcatBoard.tsx b/src/component/StrcatBoard.tsx
index 43794ba3..fc9deb25 100644
--- a/src/component/StrcatBoard.tsx
+++ b/src/component/StrcatBoard.tsx
@@ -27,8 +27,8 @@ const StrcatBoard = forwardRef<HTMLDivElement, Props>(function StrcatBoard(
   ref,
 ) {
   const [observe] = useRecoilState(observeState);
-  const [theme, setTheme] = useRecoilState(themeState);
-  const [content, setContent] = useState(board.contents);
+  const [theme] = useRecoilState(themeState);
+  const [content, setContent] = useState<content[]>([]);
   useEffect(() => {
     setContent(board.contents);
   }, [board]);
diff --git a/src/component/StrcatGroupTitle.tsx b/src/component/StrcatGroupTitle.tsx
index 6ec8d3dc..5e9d4d36 100644
--- a/src/component/StrcatGroupTitle.tsx
+++ b/src/component/StrcatGroupTitle.tsx
@@ -4,7 +4,7 @@ import Strcat from './Icon/Strcat';
 
 interface Props {
   board: board;
-  scrollToId: (arg0: number) => void;
+  scrollToId: (arg0: string) => void;
 }
 
 export default function StrcatGroupTitle({ board, scrollToId }: Props) {
diff --git a/src/component/StrcatHeader.tsx b/src/component/StrcatHeader.tsx
index 1add2353..393d6e28 100644
--- a/src/component/StrcatHeader.tsx
+++ b/src/component/StrcatHeader.tsx
@@ -1,34 +1,53 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { useLogin } from '@/hooks/useLogin';
-import { drawerState, themeState } from '@/recoil/state';
-import Link from 'next/link';
+import { catAction } from '@/types/animation';
 import { usePathname } from 'next/navigation';
-import { useEffect } from 'react';
+import Link from 'next/link';
 import { useRecoilState } from 'recoil';
-import { LogoCat, HeaderProfileCat, Outline } from './Icon/Header';
+import { drawerState, themeState } from '@/recoil/state';
+import { useCat } from '@/hooks/useCat';
+import { HeaderProfileCat, LogoCat, Outline } from './Icon/Header';
 
 export default function StrcatHeader() {
   const [isLogin, checkLogin] = useLogin();
   const pathName = usePathname();
   const [, setDrawer] = useRecoilState(drawerState);
   const [theme] = useRecoilState(themeState);
+  const [runCatAnimation] = useCat();
+  const [animationHeader, setAnimationHeader] = useState(false);
 
   useEffect(() => {
     checkLogin();
   }, []);
 
+  useEffect(() => {
+    if (
+      pathName.indexOf('/personal') === 0 ||
+      pathName.indexOf('/group') === 0
+    ) {
+      setTimeout(() => {
+        setAnimationHeader(true);
+        runCatAnimation('catHeader', catAction.out, 0);
+      }, 1000);
+    }
+  }, [pathName]);
+
   return (
     <div className="fixed top-0 z-10 w-full max-w-md">
       <div
         className={`flex h-[56px] flex-row items-center justify-between ${theme.background} px-[24px]`}
+        id="catHeader"
       >
-        <Link href="/" scroll={false}>
-          <LogoCat
-            bodyColor={theme.catTheme.headerCat}
-            eyeColor={theme.catTheme.headerCatEye}
-          />
-        </Link>
+        {!animationHeader && (
+          <Link href="/" scroll={false}>
+            <LogoCat
+              bodyColor={theme.catTheme.headerCat}
+              eyeColor={theme.catTheme.headerCatEye}
+            />
+          </Link>
+        )}
         <div className="basis-4/6"></div>
         {isLogin ? (
           <div onClick={() => setDrawer(true)}>
diff --git a/src/component/ThemeChange.tsx b/src/component/ThemeChange.tsx
index 6ca11fbf..8d68c61c 100644
--- a/src/component/ThemeChange.tsx
+++ b/src/component/ThemeChange.tsx
@@ -2,7 +2,12 @@
 
 import { useRecoilState } from 'recoil';
 import { calm, cyan, green, strcat, themeState } from '@/recoil/theme';
-import Image from 'next/image';
+import {
+  ThemeCalm,
+  ThemeCyan,
+  ThemeGreen,
+  ThemeStrcat,
+} from '@/component/Icon/Theme';
 
 export default function ThemeChange() {
   const [Theme, setTheme] = useRecoilState(themeState);
@@ -10,61 +15,44 @@ export default function ThemeChange() {
     setTheme(newTheme);
   };
   return (
-    <>
+    <div className="mx-[34px]">
       <div className="flex w-full flex-row items-center justify-center">
-        <div className="basis-8"></div>
-        <Image
-          src="/strcatButton.png"
-          width={52}
-          height={52}
-          alt="strcatButton"
-          className="mt-20 basis-14 "
+        <div
+          className="mt-20 basis-1/6 "
           onClick={() => handleThemeChange(strcat)}
-        />
-        <div className="basis-8"></div>
-        <Image
-          src="/CalmButton.png"
-          width={52}
-          height={52}
-          alt="CalmButton"
-          className="mt-20 basis-14"
+        >
+          <ThemeStrcat />
+          <div className={`${Theme.defaultText} `}>strcat</div>
+        </div>
+        <div className="basis-1/6"></div>
+        <div
+          className="mt-20 basis-1/6 "
           onClick={() => handleThemeChange(calm)}
-        />
-        <div className="basis-8"></div>
-        <Image
-          src="/GreenButton.png"
-          width={52}
-          height={52}
-          alt="GreenButton"
-          className="mt-20 basis-14"
+        >
+          <ThemeCalm />
+          <div className={`basis-1/6 text-center ${Theme.defaultText} `}>
+            Calm
+          </div>
+        </div>
+        <div className="basis-1/6"></div>
+        <div
+          className="mt-20 basis-1/6 "
           onClick={() => handleThemeChange(green)}
-        />
-        <div className="basis-8"></div>
-        <Image
-          src="/CyanButton.png"
-          width={52}
-          height={52}
-          alt="CyanButton"
-          className="mt-20 basis-14"
-          onClick={() => handleThemeChange(cyan)}
-        />
-        <div className="basis-8"></div>
-      </div>
-      <div className="flex w-full flex-row items-center justify-center">
-        <div className=" mt-9 basis-8"></div>
-        <div className={`basis-14 text-center ${Theme.defaultText} `}>
-          strcat
+        >
+          <ThemeGreen />
+          <div className={`basis-1/6 text-center ${Theme.defaultText} `}>
+            green
+          </div>
         </div>
-        <div className="basis-8"></div>
-        <div className={`basis-14 text-center ${Theme.defaultText} `}>Calm</div>
-        <div className="basis-8"></div>
-        <div className={`basis-14 text-center ${Theme.defaultText} `}>
-          green
+        <div className="basis-1/6"></div>
+        <div
+          className="mt-20 basis-1/6  "
+          onClick={() => handleThemeChange(cyan)}
+        >
+          <ThemeCyan />
+          <div className={`text-center ${Theme.defaultText} `}>Cyan</div>
         </div>
-        <div className="basis-8"></div>
-        <div className={`basis-14 text-center ${Theme.defaultText} `}>Cyan</div>
-        <div className="basis-8"></div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/hooks/useAnimation.ts b/src/hooks/useAnimation.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/hooks/useCat.ts b/src/hooks/useCat.ts
new file mode 100644
index 00000000..0945863d
--- /dev/null
+++ b/src/hooks/useCat.ts
@@ -0,0 +1,33 @@
+import { catAnimationState } from '@/recoil/catAnimation';
+import { themeState } from '@/recoil/theme';
+import { catAnimationDetail } from '@/types/animation';
+import { useRecoilState } from 'recoil';
+
+export const useCat = (): [
+  (element: string, catAction: string, second: number) => void,
+] => {
+  const [, setCatAnimation] = useRecoilState(catAnimationState);
+  const [theme] = useRecoilState(themeState);
+
+  const runCatAnimation = (
+    elementId: string,
+    catActionString: string,
+    time: number,
+  ) => {
+    setTimeout(() => {
+      const element = document.getElementById(elementId);
+      if (element === null) return;
+      const elementLeft = element.getBoundingClientRect().left;
+      const elementTop = element.getBoundingClientRect().top;
+      setCatAnimation({
+        src: `/cats/${theme.name}/${catActionString}.gif`,
+        catAction: catActionString,
+        width: catAnimationDetail[catActionString].width,
+        height: catAnimationDetail[catActionString].height,
+        top: elementTop + catAnimationDetail[catActionString].top,
+        left: elementLeft + catAnimationDetail[catActionString].left,
+      });
+    }, time);
+  };
+  return [runCatAnimation];
+};
diff --git a/src/recoil/cat.ts b/src/recoil/cat.ts
deleted file mode 100644
index a50a4e9f..00000000
--- a/src/recoil/cat.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cat, catAction } from '@/types/cat';
-import { atom } from 'recoil';
-
-const defaultCat: cat = {
-  catAction: catAction.none,
-  top: 0,
-  left: 0,
-  width: 0,
-  height: 0,
-};
-
-export const catState = atom<cat>({
-  key: 'catState',
-  default: defaultCat,
-});
diff --git a/src/recoil/catAnimation.ts b/src/recoil/catAnimation.ts
new file mode 100644
index 00000000..06e094b8
--- /dev/null
+++ b/src/recoil/catAnimation.ts
@@ -0,0 +1,16 @@
+import { catAction, catAnimation } from '@/types/animation';
+import { atom } from 'recoil';
+
+const defaultCat: catAnimation = {
+  src: '',
+  catAction: catAction.none,
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+};
+
+export const catAnimationState = atom<catAnimation>({
+  key: 'catState',
+  default: defaultCat,
+});
diff --git a/src/recoil/observe.ts b/src/recoil/observe.ts
index b1fde28e..3dc7465a 100644
--- a/src/recoil/observe.ts
+++ b/src/recoil/observe.ts
@@ -3,7 +3,7 @@ import { atom } from 'recoil';
 export const observeState = atom({
   key: 'observeState',
   default: {
-    boardId: 0,
+    boardId: '',
     contentId: 0,
     photoUrl: '',
     writer: '',
diff --git a/src/recoil/state.ts b/src/recoil/state.ts
index 54133948..96b0be96 100644
--- a/src/recoil/state.ts
+++ b/src/recoil/state.ts
@@ -1,4 +1,4 @@
-import { catState } from './cat';
+import { catAnimationState } from './catAnimation';
 import { drawerState } from './drawer';
 import { loginState } from './login';
 import { modalState } from './modal';
@@ -6,7 +6,7 @@ import { observeState } from './observe';
 import { themeState } from './theme';
 
 export {
-  catState,
+  catAnimationState,
   drawerState,
   loginState,
   modalState,
diff --git a/src/types/animation.ts b/src/types/animation.ts
new file mode 100644
index 00000000..5d84ee79
--- /dev/null
+++ b/src/types/animation.ts
@@ -0,0 +1,32 @@
+export const catAction = {
+  in: 'in',
+  out: 'out',
+  sit: 'sit',
+  leftWall: 'leftWall',
+  rightWall: 'rightWall',
+  none: 'none',
+};
+
+export interface catAnimation {
+  src: string;
+  catAction: string;
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+export const catAnimationDetail = {
+  [catAction.out]: {
+    width: 114,
+    height: 40,
+    top: 8,
+    left: 0,
+  },
+  [catAction.sit]: {
+    width: 40,
+    height: 40,
+    top: -40,
+    left: 200,
+  },
+};
diff --git a/src/types/boards.ts b/src/types/boards.ts
index b40661eb..bfccda2e 100644
--- a/src/types/boards.ts
+++ b/src/types/boards.ts
@@ -1,7 +1,7 @@
 import { content } from './content';
 
 export interface board {
-  id: number;
+  id: string;
   title: string;
   theme: 'strcat' | 'calm' | 'green' | 'cyan';
   contents: content[];
diff --git a/src/types/cat.ts b/src/types/cat.ts
deleted file mode 100644
index abaf2936..00000000
--- a/src/types/cat.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const catAction = {
-  exit: 'exit',
-  newContent: 'newContent',
-  scroll: 'scroll',
-  longText: 'longText',
-  none: 'none',
-};
-
-export interface cat {
-  catAction: string;
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-}
diff --git a/src/utils/scrollTo.ts b/src/utils/scrollTo.ts
index 5887c63d..68a5611c 100644
--- a/src/utils/scrollTo.ts
+++ b/src/utils/scrollTo.ts
@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
 import { board } from '@/types/boards';
 
 export const scrollToAdd = (
-  itemId: number,
+  itemId: string,
   itemsRef: MutableRefObject<Map<any, any>>,
 ) => {
   const map = itemsRef.current;