diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
index 088bc33..424fea0 100644
--- a/src/app/design-system/page.tsx
+++ b/src/app/design-system/page.tsx
@@ -11,6 +11,7 @@ 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';
+import Keep from '@/shared/components/keep/Keep';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -148,6 +149,10 @@ function Page() {
           <Share />
           <Share variants="community" />
         </div>
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium border-b pb-1">keep</h3>
+          <Keep />
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/assets/icons/keep_36.svg b/src/shared/assets/icons/keep_36.svg
index 363fdcb..a24cacc 100644
--- a/src/shared/assets/icons/keep_36.svg
+++ b/src/shared/assets/icons/keep_36.svg
@@ -1,4 +1,4 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="36" height="36" viewBox="0 0 36 36" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_418_213)">
 <g filter="url(#filter0_d_418_213)">
 <path d="M6.67601 20.3623L17.3153 30.3568C17.6398 30.6616 17.802 30.814 18 30.814C18.198 30.814 18.3602 30.6616 18.6847 30.3568L29.324 20.3623C32.2582 17.6059 32.6146 13.0699 30.1467 9.8891L29.6827 9.29102C26.7304 5.48587 20.8044 6.12402 18.73 10.4705C18.437 11.0844 17.563 11.0844 17.27 10.4705C15.1956 6.12402 9.26958 5.48587 6.31732 9.29102L5.85328 9.8891C3.38542 13.0699 3.74174 17.6059 6.67601 20.3623Z" fill="white" fill-opacity="0.5" shape-rendering="crispEdges"/>
@@ -10,7 +10,6 @@
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset/>
-<feGaussianBlur stdDeviation="4"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_418_213"/>
diff --git a/src/shared/assets/icons/keep_active_36.svg b/src/shared/assets/icons/keep_active_36.svg
index 6c54f4c..1045102 100644
--- a/src/shared/assets/icons/keep_active_36.svg
+++ b/src/shared/assets/icons/keep_active_36.svg
@@ -1,4 +1,4 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="36" height="36" viewBox="0 0 36 36" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_418_283)">
 <g filter="url(#filter0_d_418_283)">
 <path d="M6.67601 20.3623L17.3153 30.3568C17.6398 30.6616 17.802 30.814 18 30.814C18.198 30.814 18.3602 30.6616 18.6847 30.3568L29.324 20.3623C32.2582 17.6059 32.6146 13.0699 30.1467 9.8891L29.6827 9.29102C26.7304 5.48587 20.8044 6.12402 18.73 10.4705C18.437 11.0844 17.563 11.0844 17.27 10.4705C15.1956 6.12402 9.26958 5.48587 6.31732 9.29102L5.85328 9.8891C3.38542 13.0699 3.74174 17.6059 6.67601 20.3623Z" fill="#FFFFE6"/>
@@ -11,7 +11,6 @@
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset/>
-<feGaussianBlur stdDeviation="4"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_418_283"/>
diff --git a/src/shared/components/keep/Keep.tsx b/src/shared/components/keep/Keep.tsx
new file mode 100644
index 0000000..2e9f49d
--- /dev/null
+++ b/src/shared/components/keep/Keep.tsx
@@ -0,0 +1,35 @@
+import KeepIcon from '@/shared/assets/icons/keep_36.svg';
+import KeepIconActive from '@/shared/assets/icons/keep_active_36.svg';
+
+import { useState } from 'react';
+function Keep() {
+  const [isClick, setIsClick] = useState(false);
+  const handleClick = () => {
+    setIsClick(!isClick);
+  };
+
+  return (
+    <button type="button" onClick={handleClick} aria-label="킵 버튼">
+      {isClick ? (
+        <KeepIcon
+          fill="transparent"
+          className="[filter:drop-shadow(0_0_8px_rgba(255,255,255,0.8))] [&_*]:duration-100 hover:[&_*]:fill-secondary/60"
+          aria-hidden
+        />
+      ) : (
+        <KeepIconActive
+          fill="transparent"
+          className="   
+          [filter:drop-shadow(0_0_8px_rgba(255,255,255,0.8))]
+         [&_*]:duration-200
+         &_g>g>path[stroke]]:stroke-black
+          [&_g>path[fill='black']]:black
+          hover:[&_g>g>path]:fill-secondary/60
+          "
+          aria-hidden
+        />
+      )}
+    </button>
+  );
+}
+export default Keep;