diff --git a/src/atom/sticker.ts b/src/atom/sticker.ts
index 17a7ac2..6be1c81 100644
--- a/src/atom/sticker.ts
+++ b/src/atom/sticker.ts
@@ -4,3 +4,8 @@ export const stickerState = atom<string>({
   key: "stickerState",
   default: ""
 })
+
+export const stickerIsCircleState = atom<boolean>({
+  key: "stickerIsCircleState",
+  default: false
+})
diff --git a/src/components/modal/trimModal.tsx b/src/components/modal/trimModal.tsx
index aeafb75..e5d2d59 100644
--- a/src/components/modal/trimModal.tsx
+++ b/src/components/modal/trimModal.tsx
@@ -2,6 +2,9 @@ import React, { useCallback, useEffect, useState } from "react"
 import { RoundedButton, RoundedDivSize } from "../Button/RoundButton"
 import Cropper from "react-easy-crop"
 import Modal from "react-modal"
+import { stickerIsCircleState } from "../../atom/sticker"
+import { useSetRecoilState } from "recoil"
+import { Sticker } from "../../pages/sticker-select"
 
 type props = {
   isOpen: boolean
@@ -38,9 +41,7 @@ export const TrimModal: React.FC<props> = ({
   const [crop, setCrop] = useState<Coordinate>({ x: 0, y: 0 })
   const aspect = 1
   const [isCircle, setIsCircle] = useState<boolean>(false)
-  const [croppedImageIsCircle, setCroppedImageIsCircle] = useState<boolean>(false)
   const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)
-  const [croppedImage, setCroppedImage] = useState(null)
 
   // Cropperに渡す関数
   const onZoomChange = (zoom) => {
@@ -149,17 +150,17 @@ export const TrimModal: React.FC<props> = ({
   const cropImage = useCallback(async () => {
     try {
       const croppedImage = await getCroppedImg(image, croppedAreaPixels, rotation)
-      setCroppedImage(croppedImage)
-      imageSetter(croppedImage)
+      const croppedImageSticker: Sticker = {
+        src: croppedImage as string,
+        isCircle: isCircle
+      }
+      imageSetter(croppedImageSticker)
       isOpenSetter(false)
+      setIsCircle(false)
     } catch (e) {
       console.error(e)
     }
-  }, [croppedAreaPixels, rotation])
-
-  useEffect(() => {
-    setCroppedImageIsCircle(isCircle)
-  }, [croppedImage])
+  }, [croppedAreaPixels, rotation, isCircle])
 
   return (
     <Modal isOpen={isOpen}>
diff --git a/src/pages/settlement/index.tsx b/src/pages/settlement/index.tsx
index 60a785f..fb8a5b7 100644
--- a/src/pages/settlement/index.tsx
+++ b/src/pages/settlement/index.tsx
@@ -194,7 +194,7 @@ const CardForm: React.VFC<{}> = () => {
       setLoading(false)
       return
     } else {
-      router.replace({ pathname: "/sticker-edit", query: { settlement: true } })
+      router.push({ pathname: "/sticker-edit", query: { settlement: true } })
       console.log("決済完了")
     }
 
diff --git a/src/pages/sticker-edit/index.tsx b/src/pages/sticker-edit/index.tsx
index 8a6dcbd..8016cde 100644
--- a/src/pages/sticker-edit/index.tsx
+++ b/src/pages/sticker-edit/index.tsx
@@ -3,39 +3,23 @@ import { useInteractJS } from "../../hooks"
 import { RoundedButton, RoundedDivSize } from "../../components/Button/RoundButton"
 import NextImage from "next/image"
 import { Toast, ToastType } from "../../components/toast"
-import { auth } from "../../utils/firebase"
 import Header from "../../components/header"
 import { Footer } from "../../components/Footer"
-import { useRecoilState, useRecoilValue } from "recoil"
-import { stickerState } from "../../atom/sticker"
+import { useRecoilValue } from "recoil"
+import { stickerIsCircleState, stickerState } from "../../atom/sticker"
 import { useRouter } from "next/router"
 
 const Index: React.VFC<{}> = () => {
   //TODO: FIXME
   const sticker = useRecoilValue(stickerState)
+  const stickerIsCircle = useRecoilValue(stickerIsCircleState)
   const router = useRouter()
   const [toastMessage, setToastMessage] = useState<string>("")
   const [toastType, setToastType] = useState<ToastType>(ToastType.Notification)
   const [toastState, setToastState] = useState<boolean>(false)
-
-  useEffect(() => {
-    if (router.query.settlement) {
-      setToastType(ToastType.Notification)
-      setToastMessage("決済が完了しました")
-      setToastState(true)
-    }
-  }, [])
-
-  useEffect(() => {
-    console.log(auth.currentUser)
-  })
-
   const interact = useInteractJS()
-  const [preview, setPreview] = useState("/logo/logo.svg")
-  const handleChangeFile = (e) => {
-    const { files } = e.target
-    setPreview(window.URL.createObjectURL(files[0]))
-  }
+  const [preview, setPreview] = useState(sticker)
+
   // contextを状態として持つ
   const [context, setContext] = useState(null)
   // コンポーネントの初期化完了後コンポーネント状態にコンテキストを登録
@@ -49,6 +33,14 @@ const Index: React.VFC<{}> = () => {
     console.log(sticker)
   }, [])
 
+  useEffect(() => {
+    if (router.query.settlement) {
+      setToastType(ToastType.Notification)
+      setToastMessage("決済が完了しました")
+      setToastState(true)
+    }
+  }, [])
+
   const createImage = (url) =>
     new Promise<HTMLImageElement>((resolve, reject) => {
       const image = new Image()
@@ -78,10 +70,23 @@ const Index: React.VFC<{}> = () => {
     const img = new Image()
     img.src = preview
     img.onload = () => {
+      context.save()
       let e = document.getElementById("scope")
       const scopeWidth = parseFloat(window.getComputedStyle(e).width)
 
       const diff = (interact.width - scopeWidth) / 2
+
+      if (stickerIsCircle) {
+        context.strokeStyle = "rgba(100, 100, 100, 0)"
+        const radius = interact.width / 2
+        const x = (interact.position.x * 816) / canvasWidth - diff + radius
+        const y = (interact.position.y * 571) / canvasHeight - diff + radius
+        context.beginPath()
+        context.arc(x, y, radius, 0, 2 * Math.PI)
+        context.stroke()
+        context.clip()
+      }
+
       context.drawImage(
         img,
         (interact.position.x * 816) / canvasWidth - diff,
@@ -89,6 +94,9 @@ const Index: React.VFC<{}> = () => {
         interact.width,
         interact.height
       )
+
+      context.restore()
+      console.log("restore")
     }
   }
 
@@ -159,7 +167,13 @@ const Index: React.VFC<{}> = () => {
 
             <div className="shadow-lg rounded-lg relative w-32 h-32 flex items-center justify-center">
               <div className="w-20 h-20 m-auto">
-                <img src={preview} width={80} height={80} />
+                <img
+                  src={preview}
+                  width={80}
+                  height={80}
+                  className={stickerIsCircle ? "rounded-full" : ""}
+                  alt="ステッカー"
+                />
               </div>
             </div>
           </div>
diff --git a/src/pages/sticker-select/index.tsx b/src/pages/sticker-select/index.tsx
index 75be286..39ddbd9 100644
--- a/src/pages/sticker-select/index.tsx
+++ b/src/pages/sticker-select/index.tsx
@@ -1,25 +1,27 @@
 import React, { ChangeEvent, useEffect, useState } from "react"
 import Image from "next/image"
-import { RoundedButton, RoundedDivSize } from "../../components/Button/RoundButton"
+import { RoundedButton, RoundedDiv, RoundedDivSize } from "../../components/Button/RoundButton"
 import Header from "../../components/header"
 import { Footer } from "../../components/Footer"
 import { TrimModal } from "../../components/modal/trimModal"
-import { stickerState } from "../../atom/sticker"
-import { useRecoilValue, useSetRecoilState } from "recoil"
-import { useRouter } from "next/router"
+import { stickerIsCircleState, stickerState } from "../../atom/sticker"
+import { useSetRecoilState } from "recoil"
+import Link from "next/link"
 
-const Index: React.VFC<{}> = () => {
-  const router = useRouter()
-  const inputOnChange = () => {}
+export type Sticker = {
+  src: string
+  isCircle: boolean
+}
 
+const Index: React.VFC<{}> = () => {
   const [image, setImage] = useState<string>()
   const [index, setIndex] = useState(0)
   const [croppedImage, setCroppedImage] = useState()
-  const [imageList, setImageList] = useState<Array<string>>([])
+  const [imageList, setImageList] = useState<Array<Sticker>>([])
   const [isOpen, setIsOpen] = useState<boolean>(false)
 
   const setSticker = useSetRecoilState(stickerState)
-  const sticker = useRecoilValue(stickerState)
+  const setStickerIsCircle = useSetRecoilState(stickerIsCircleState)
 
   useEffect(() => {
     if (croppedImage != undefined) {
@@ -45,11 +47,12 @@ const Index: React.VFC<{}> = () => {
     }
   }
 
-  const settlementOnClick = () => {
-    // TODO: FIXME
-    setSticker(imageList[index])
-    router.push("/settlement")
-  }
+  useEffect(() => {
+    if (imageList.length > 0) {
+      setSticker(imageList[index].src)
+      setStickerIsCircle(imageList[index].isCircle)
+    }
+  }, [imageList, index])
 
   return (
     <>
@@ -76,7 +79,12 @@ const Index: React.VFC<{}> = () => {
                     }}
                   >
                     <div className="w-20 h-20 m-auto">
-                      <img src={img} width={80} height={80} />
+                      <img
+                        src={img.src}
+                        width={80}
+                        height={80}
+                        className={img.isCircle ? "rounded-full" : ""}
+                      />
                     </div>
 
                     <div className="absolute w-8 h-8 -top-3 -left-3">
@@ -91,7 +99,12 @@ const Index: React.VFC<{}> = () => {
                     }}
                   >
                     <div className="w-20 h-20 m-auto">
-                      <img src={img} width={80} height={80} />
+                      <img
+                        src={img.src}
+                        width={80}
+                        height={80}
+                        className={img.isCircle ? "rounded-full" : ""}
+                      />
                     </div>
                   </div>
                 )
@@ -125,14 +138,11 @@ const Index: React.VFC<{}> = () => {
             </div>
           </div>
           {/*end upload button*/}
-
-          <div className="xl:w-1/3 lg:w-1/2 md:w-2/3 w-full mx-auto flex justify-between">
-            <RoundedButton
-              size={RoundedDivSize.M}
-              onClick={() => settlementOnClick()}
-              text={"決済へ進む"}
-            />
-          </div>
+          <Link href="/settlement">
+            <div className="xl:w-1/3 lg:w-1/2 md:w-2/3 w-full mx-auto flex justify-between">
+              <RoundedDiv size={RoundedDivSize.M} text={"決済へ進む"} isDisabled={false} />
+            </div>
+          </Link>
         </div>
 
         <TrimModal
diff --git a/src/pages/supporters/index.tsx b/src/pages/supporters/index.tsx
index 0b2660e..beb44a0 100644
--- a/src/pages/supporters/index.tsx
+++ b/src/pages/supporters/index.tsx
@@ -2,8 +2,9 @@ import React from "react"
 import Header from "../../components/header"
 import { SupportersList } from "../../components/SupportersList"
 import { SupporterMock } from "../test/supportersList"
-import { RoundedButton, RoundedDivSize } from "../../components/Button/RoundButton"
+import { RoundedButton, RoundedDiv, RoundedDivSize } from "../../components/Button/RoundButton"
 import { Footer } from "../../components/Footer"
+import Link from "next/link"
 
 const Index: React.VFC = () => {
   return (
@@ -19,9 +20,11 @@ const Index: React.VFC = () => {
             好きなデザインを作って応援できます
           </p>
           <div className="flex justify-center">
-            <div className="mx-auto xl:w-1/3 lg:w-1/2 md:w-2/3 w-full">
-              <RoundedButton size={RoundedDivSize.M} onClick={() => {}} text="応援する" />
-            </div>
+            <Link href="/sticker-select">
+              <div className="mx-auto xl:w-1/3 lg:w-1/2 md:w-2/3 w-full">
+                <RoundedDiv size={RoundedDivSize.M} text="応援する" isDisabled={false} />
+              </div>
+            </Link>
           </div>
         </div>
         <SupportersList users={SupporterMock} />
diff --git a/yarn.lock b/yarn.lock
index 19d8eb4..c357f0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -519,6 +519,14 @@
   resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.8.tgz#098da479de9c5ac9c8ba97d113746b7dcd9c2204"
   integrity sha512-qU2QfnN7r8AU4mSd2W3XmRtR0d35R1PReIT9b5YzpNLX9S0OQgNBLrEEFyXpa9alq/9h6wYNIwPCVAsknF5uZw==
 
+"@mrmlnc/readdir-enhanced@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+  integrity sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==
+  dependencies:
+    call-me-maybe "^1.0.1"
+    glob-to-regexp "^0.3.0"
+
 "@next/env@10.0.9":
   version "10.0.9"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.9.tgz#455fd364c8a5ee012b2cd4406d5294164990706d"
@@ -1810,6 +1818,11 @@ detective@^5.2.0:
     defined "^1.0.0"
     minimist "^1.1.1"
 
+dialog-polyfill@^0.4.7:
+  version "0.4.10"
+  resolved "https://registry.yarnpkg.com/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz#c4ea68a0deed4abb59a6a2a025c548b278cd532e"
+  integrity sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw==
+
 didyoumean@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff"
@@ -2254,6 +2267,11 @@ execa@^4.0.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 expand-brackets@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
@@ -2472,6 +2490,14 @@ firebase@^8.3.0:
     "@firebase/storage" "0.4.4"
     "@firebase/util" "0.4.0"
 
+firebaseui@^4.1.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/firebaseui/-/firebaseui-4.8.0.tgz#74c10a30db17f2cbfe020c91b97d5e3c6e8efbbc"
+  integrity sha512-DG8CD+969JHMailhOm8nKo+eJlumIHex0TH18eJeTo0Q2KEt5m/b61S1ky4bavK/nGmLJBRECJytq09/pwhZ0A==
+  dependencies:
+    dialog-polyfill "^0.4.7"
+    material-design-lite "^1.2.0"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -3426,7 +3452,7 @@ long@^4.0.0:
   resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
   integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -3466,6 +3492,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-design-lite@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/material-design-lite/-/material-design-lite-1.3.0.tgz#d004ce3fee99a1eeb74a78b8a325134a5f1171d3"
+  integrity sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM=
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -4300,7 +4331,7 @@ promise-polyfill@8.1.3:
   resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116"
   integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==
 
-prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4455,6 +4486,13 @@ react-fast-compare@^3.1.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-firebaseui@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-firebaseui/-/react-firebaseui-4.1.0.tgz#fbd8381432b53b58ce56ee86df81e2a6e40af7b6"
+  integrity sha512-Y5pAom+W6/R5xZeF4xdvYiP7tObo7GDGWra1Pf2td+FxhtXtGQXQTKdW5Rs4js5zIuN0A3fApZzO+3sa1MHl9Q==
+  dependencies:
+    firebaseui "^4.1.0"
+
 react-helmet@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
@@ -4470,6 +4508,21 @@ react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-modal@^3.12.1:
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.12.1.tgz#38c33f70d81c33d02ff1ed115530443a3dc2afd3"
+  integrity sha512-WGuXn7Fq31PbFJwtWmOk+jFtGC7E9tJVbFX0lts8ZoS5EPi9+WWylUJWLKKVm3H4GlQ7ZxY7R6tLlbSIBQ5oZA==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.5.10"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-refresh@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -4567,6 +4620,11 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.1.3.tgz#3926b29ece8748967a0ff6c10516aca436cf4ae8"
+  integrity sha512-/Rm7wN7jqCjhtFK1TgtK0V115SUXNu6d4QYvwxWNLydib0QChSmpB6U8CaHoRPS0MFWtAIsD/IFjpbfk/OYm7Q==
+
 reduce-css-calc@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
@@ -5470,6 +5528,13 @@ vm-browserify@1.1.2, vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.1.1.tgz#e99630550fca07df9f90a06056987baa40a689c7"