diff --git a/pages/complete/index.tsx b/pages/complete/index.tsx
new file mode 100644
index 0000000..171b1ef
--- /dev/null
+++ b/pages/complete/index.tsx
@@ -0,0 +1,180 @@
+import Image from "next/image";
+
+import styled from "styled-components";
+
+import { Logo } from "../../components/logo";
+import color from "../../styles/color";
+
+import AlertCircleOutlineIcon from "../../public/images/svg/alert-circle-outline.svg";
+import TwitterIcon from "../../public/images/svg/twitter-icon.svg";
+
+export default function CompletePage() {
+ return (
+
+
+
+
+ Your Name is Active Now!
+
+
+ Recipent
+ kingstarcookies.cosmos
+ available address
+
+
+
+
+
+
+
+
+ If you want to make that name address with same twitter account,
+ just go to home and start again.
+
+
+
+
+ SHARE MY NAME
+
+
+
+
+ );
+}
+
+const Container = styled.div`
+ width: 100vw;
+ height: 100vh;
+`;
+
+const MainContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ padding-top: 10.1rem;
+
+ color: white;
+`;
+
+const MainTitle = styled.div`
+ font-family: "Inter", serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 2rem;
+ line-height: 2rem;
+
+ padding: 1rem;
+`;
+
+const ContentContainer = styled.div`
+ width: 30rem;
+
+ margin-top: 1rem;
+ padding: 2rem 2rem;
+
+ background-color: ${color.grey["900"]};
+`;
+
+const RecipentContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ padding: 2rem;
+`;
+
+const RecipentTitle = styled.div`
+ font-family: "Inter", serif;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 1rem;
+ line-height: 1rem;
+
+ color: ${color.grey["400"]};
+`;
+
+const AddressContainer = styled.div`
+ font-family: "Inter", serif;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 0.9rem;
+ line-height: 0.9rem;
+
+ color: ${color.white};
+
+ padding: 1rem;
+
+ background-color: ${color.grey["600"]};
+`;
+
+const AvailableAddressText = styled.div`
+ font-family: "Inter", serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 0.75rem;
+ line-height: 0.75rem;
+
+ color: ${color.blue};
+`;
+
+const DescriptionContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+
+ gap: 1rem;
+
+ width: 30rem;
+
+ margin-top: 1.5rem;
+ padding: 1.5rem 2rem;
+
+ background-color: ${color.grey["900"]};
+`;
+
+const AlertIcon = styled.div`
+ position: relative;
+
+ width: 1.5rem;
+ height: 1.5rem;
+`;
+
+const DescriptionText = styled.div`
+ width: 100%;
+
+ font-family: "Inter", serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 0.8rem;
+ line-height: 0.8rem;
+
+ color: ${color.grey["400"]};
+`;
+
+const ShareButtonContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 0.625rem;
+
+ width: 20rem;
+ height: 5rem;
+
+ margin-top: 2.5rem;
+
+ cursor: pointer;
+ user-select: none;
+
+ background-color: ${color.grey["700"]};
+`;
+
+const ShareButtonText = styled.div`
+ font-family: "Inter", serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 1.25rem;
+ line-height: 1.25rem;
+
+ color: ${color.grey["100"]};
+`;
diff --git a/public/images/svg/alert-circle-outline.svg b/public/images/svg/alert-circle-outline.svg
new file mode 100644
index 0000000..cf93031
--- /dev/null
+++ b/public/images/svg/alert-circle-outline.svg
@@ -0,0 +1,5 @@
+
diff --git a/public/images/svg/twitter-icon.svg b/public/images/svg/twitter-icon.svg
new file mode 100644
index 0000000..42e39ca
--- /dev/null
+++ b/public/images/svg/twitter-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/styles/color.ts b/styles/color.ts
index bdf9128..02e86fa 100644
--- a/styles/color.ts
+++ b/styles/color.ts
@@ -6,6 +6,8 @@ const orange = {
400: "#442924",
};
+const blue = "#536EF8";
+
const white = "#FCFCFC";
const grey = {
100: "#A3A3A3",
@@ -25,6 +27,7 @@ const color = {
white,
black,
orange,
+ blue,
};
export default color;