diff --git a/apps/bottle/src/app/profile/create/page.tsx b/apps/bottle/src/app/profile/create/page.tsx
index b659e77..6f50e62 100644
--- a/apps/bottle/src/app/profile/create/page.tsx
+++ b/apps/bottle/src/app/profile/create/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Header } from '@/components/common/header';
+import { Stepper } from '@/components/common/stepper';
 import { MBTI } from '@/components/profile/MBTI';
 import { Alcohol } from '@/components/profile/alcohol';
 import { Height } from '@/components/profile/height';
@@ -8,15 +9,14 @@ import { Interests } from '@/components/profile/interests';
 import { Job } from '@/components/profile/job';
 import { KakaoId } from '@/components/profile/kakao-id';
 import { Keywords } from '@/components/profile/keywords';
+import { ProfileLayout } from '@/components/profile/layout';
 import { Region } from '@/components/profile/region';
 import { Religion } from '@/components/profile/religion';
 import { Smoking } from '@/components/profile/smoking';
 import { useFunnel } from '@/features/funnel';
 import { createInit, POST } from '@/features/server';
 import { getClientSideTokens } from '@/features/server/clientSideTokens';
-import { Step } from '@/features/steps/StepContainer';
 import { Profile } from '@/models/profile';
-import { Asset } from '@bottlesteam/ui';
 import { useRouter } from 'next/navigation';
 import { CreateProfileProvider } from './CreateProfileProvider';
 
@@ -32,7 +32,9 @@ export default function CreateProfilePage() {
   const { onNextStep, currentStep, getValue, getValues } = useFunnel<CreateProfileFunnel>('/profile/create');
 
   const steps = [
-    <Step stepper={{ current: 1, max: MAX_STEPS }} key={2}>
+    <ProfileLayout key={1}>
+      <Header />
+      <Stepper current={1} max={MAX_STEPS} />
       <MBTI
         initialValue={getValue('mbti')}
         onNext={mbti => {
@@ -40,8 +42,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 2, max: MAX_STEPS }} key={3}>
+    </ProfileLayout>,
+    <ProfileLayout key={2}>
+      <Header onGoBack={router.back} />
+      <Stepper current={2} max={MAX_STEPS} />
       <Keywords
         initialValue={getValue('keyword')}
         onNext={keyword => {
@@ -49,8 +53,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 3, max: MAX_STEPS }} key={4}>
+    </ProfileLayout>,
+    <ProfileLayout key={3}>
+      <Header onGoBack={router.back} />
+      <Stepper current={3} max={MAX_STEPS} />
       <Interests
         initialValue={getValue('interest')}
         onNext={interest => {
@@ -58,8 +64,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 4, max: MAX_STEPS }} key={5}>
+    </ProfileLayout>,
+    <ProfileLayout key={4}>
+      <Header onGoBack={router.back} />
+      <Stepper current={4} max={MAX_STEPS} />
       <Job
         initialValue={getValue('job')}
         onNext={job => {
@@ -67,8 +75,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 5, max: MAX_STEPS }} key={6}>
+    </ProfileLayout>,
+    <ProfileLayout key={5}>
+      <Header onGoBack={router.back} />
+      <Stepper current={5} max={MAX_STEPS} />
       <Height
         initialValue={getValue('height')}
         onNext={height => {
@@ -76,8 +86,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 6, max: MAX_STEPS }} key={7}>
+    </ProfileLayout>,
+    <ProfileLayout key={6}>
+      <Header onGoBack={router.back} />
+      <Stepper current={6} max={MAX_STEPS} />
       <Smoking
         initialValue={getValue('smoking')}
         onNext={smoking => {
@@ -85,8 +97,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 7, max: MAX_STEPS }} key={8}>
+    </ProfileLayout>,
+    <ProfileLayout key={7}>
+      <Header onGoBack={router.back} />
+      <Stepper current={7} max={MAX_STEPS} />
       <Alcohol
         initialValue={getValue('alcohol')}
         onNext={alcohol => {
@@ -94,8 +108,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 8, max: MAX_STEPS }} key={9}>
+    </ProfileLayout>,
+    <ProfileLayout key={8}>
+      <Header onGoBack={router.back} />
+      <Stepper current={8} max={MAX_STEPS} />
       <Religion
         initialValue={getValue('religion')}
         onNext={religion => {
@@ -103,8 +119,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 9, max: MAX_STEPS }} key={10}>
+    </ProfileLayout>,
+    <ProfileLayout key={9}>
+      <Header onGoBack={router.back} />
+      <Stepper current={9} max={MAX_STEPS} />
       <Region
         initialValue={getValue('region')}
         onNext={region => {
@@ -112,8 +130,10 @@ export default function CreateProfilePage() {
         }}
         ctaButtonText="다음"
       />
-    </Step>,
-    <Step stepper={{ current: 10, max: MAX_STEPS }} key={11}>
+    </ProfileLayout>,
+    <ProfileLayout key={10}>
+      <Header onGoBack={router.back} />
+      <Stepper current={10} max={MAX_STEPS} />
       <KakaoId
         initialValue={getValue('kakaoId')}
         onNext={async kakaoId => {
@@ -124,21 +144,12 @@ export default function CreateProfilePage() {
           );
         }}
       />
-    </Step>,
+    </ProfileLayout>,
   ];
 
   return (
     <>
-      <CreateProfileProvider>
-        <Header>
-          {currentStep > 1 && (
-            <button style={{ background: 'none', border: 'none' }}>
-              <Asset onClick={() => router.back()} type="icon-arrow-left" aria-label="go-back-icon" />
-            </button>
-          )}
-        </Header>
-        {steps[currentStep - 1]}
-      </CreateProfileProvider>
+      <CreateProfileProvider>{steps[currentStep - 1]}</CreateProfileProvider>
     </>
   );
 }
diff --git a/apps/bottle/src/app/profile/edit/(items)/kakao-id/page.tsx b/apps/bottle/src/app/profile/edit/(items)/kakao-id/page.tsx
new file mode 100644
index 0000000..b11e81f
--- /dev/null
+++ b/apps/bottle/src/app/profile/edit/(items)/kakao-id/page.tsx
@@ -0,0 +1,3 @@
+export default function KakaoIdEditPage() {
+  return <></>;
+}
diff --git a/apps/bottle/src/components/common/header/index.tsx b/apps/bottle/src/components/common/header/index.tsx
index cb043ad..11173bd 100644
--- a/apps/bottle/src/components/common/header/index.tsx
+++ b/apps/bottle/src/components/common/header/index.tsx
@@ -1,10 +1,21 @@
+import { Asset } from '@bottlesteam/ui';
 import { ReactNode } from 'react';
 import { headerStyle } from './headerStyle.css';
 
 interface HeaderProps {
   children?: ReactNode;
+  onGoBack?: () => void;
 }
 
-export function Header({ children }: HeaderProps) {
-  return <header className={headerStyle}>{children}</header>;
+export function Header({ children, onGoBack }: HeaderProps) {
+  return (
+    <header className={headerStyle}>
+      {onGoBack != null && (
+        <button style={{ background: 'none', border: 'none' }}>
+          <Asset onClick={onGoBack} type="icon-arrow-left" aria-label="go-back-icon" />
+        </button>
+      )}
+      {children}
+    </header>
+  );
 }
diff --git a/apps/bottle/src/components/profile/layout/index.tsx b/apps/bottle/src/components/profile/layout/index.tsx
new file mode 100644
index 0000000..10b7949
--- /dev/null
+++ b/apps/bottle/src/components/profile/layout/index.tsx
@@ -0,0 +1,45 @@
+import { FixedBottomCTAButton, Paragraph, ParagraphProps, VariantOneProps } from '@bottlesteam/ui';
+import { ReactNode } from 'react';
+import { containerStyle } from './profileLayoutStyle.css';
+
+interface Props {
+  children: ReactNode;
+}
+
+function ProfileContainer({ children }: Props) {
+  return <div className={containerStyle}>{children}</div>;
+}
+
+function Title({ children, ...rest }: Omit<ParagraphProps, 'typography' | 'color'>) {
+  return (
+    <Paragraph typography="t1" color="black100" {...rest}>
+      {children}
+    </Paragraph>
+  );
+}
+
+function Description({ children, ...rest }: Omit<ParagraphProps, 'typography' | 'color'>) {
+  return (
+    <Paragraph typography="bo" color="neutral600" {...rest}>
+      {children}
+    </Paragraph>
+  );
+}
+function Subtitle({ children, ...rest }: Omit<ParagraphProps, 'typography' | 'color'>) {
+  return (
+    <Paragraph typography="st2" color="neutral600" {...rest}>
+      {children}
+    </Paragraph>
+  );
+}
+
+function FixedButton(props: VariantOneProps) {
+  return <FixedBottomCTAButton variant="one" {...props} />;
+}
+
+export const ProfileLayout = Object.assign(ProfileContainer, {
+  Title,
+  Description,
+  Subtitle,
+  FixedButton,
+});
diff --git a/apps/bottle/src/components/profile/layout/profileLayoutStyle.css.ts b/apps/bottle/src/components/profile/layout/profileLayoutStyle.css.ts
new file mode 100644
index 0000000..71aedd7
--- /dev/null
+++ b/apps/bottle/src/components/profile/layout/profileLayoutStyle.css.ts
@@ -0,0 +1,40 @@
+import { CTA_HEIGHT, spacings } from '@bottlesteam/ui';
+import { style } from '@vanilla-extract/css';
+
+/**
+ * NOTE: This is a trick to make sure that
+ * the Bottom CTA's gradient overlaps with the body of the Step Container.
+ */
+export const OVERLAP_HEIGHT = 20;
+export const CONTAINER_OFFSET_HEIGHT = CTA_HEIGHT;
+
+export const buttonContainer = style({
+  position: 'fixed',
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  height: `${CTA_HEIGHT}px`,
+  paddingTop: spacings.xl,
+  display: 'flex',
+  justifyContent: 'center',
+  background: 'linear-gradient(180deg, rgba(251, 251, 251, 0) 0%, #FBFBFB 25%)',
+});
+
+export const containerStyle = style({
+  height: `calc(100vh - ${CONTAINER_OFFSET_HEIGHT - OVERLAP_HEIGHT}px)`,
+  overflow: 'scroll',
+  msOverflowStyle: 'none',
+  scrollbarWidth: 'none',
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+});
+
+export const buttonStyle = style({
+  width: '100%',
+  '@media': {
+    'screen and (min-width: 500px)': {
+      width: '360px',
+    },
+  },
+});
diff --git a/apps/bottle/src/middleware.ts b/apps/bottle/src/middleware.ts
index 91d200b..8d86e11 100644
--- a/apps/bottle/src/middleware.ts
+++ b/apps/bottle/src/middleware.ts
@@ -20,24 +20,6 @@ export async function middleware(request: NextRequest) {
     return response;
   }
 
-  // FIXME: uncomment after app store approval
-  // if (String(url).includes('create-profile') && !String(url).includes('create-profile/bottle')) {
-  //   const tokens = getServerSideTokens();
-
-  //   try {
-  //     const userInfo = await GET<GetUserInfoData>(`/api/v1/profile/info`, tokens, createInit(tokens.accessToken));
-
-  //     console.log('[signInUp]', userInfo);
-
-  //     if (userInfo.signInUpStep === SignInUpState.SIGN_UP_APPLE_LOGIN_FINISHED) {
-  //       const response = NextResponse.redirect(`${String(url)}/bottle`);
-  //       return response;
-  //     }
-  //   } catch (error) {
-  //     const response = NextResponse.next();
-  //     return response;
-  //   }
-  // }
   const response = NextResponse.next();
   return response;
 }