diff --git a/apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx b/apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx
index 58fad686..1e64c953 100644
--- a/apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx
+++ b/apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx
@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { css } from '_panda/css';
 import type { Persona } from '@gitanimals/api';
+import { userQueries } from '@gitanimals/react-query';
 import { Button } from '@gitanimals/ui-panda';
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
@@ -16,9 +17,8 @@ import { useClientUser } from '@/utils/clientAuth';
 import { copyClipBoard } from '@/utils/copy';
 
 import { SelectPersonaList } from '../PersonaList';
-import { userQueries } from '@gitanimals/react-query';
 
-function FarmType() {
+export function FarmType() {
   const queryClient = useQueryClient();
   const t = useTranslations('Mypage');
 
@@ -76,55 +76,59 @@ function FarmType() {
   };
 
   return (
-    <>
-      <section className={farmSectionStyle}>
-        {name && (
-          <section className={selectPetContainerStyle}>
-            <h2 className="heading">{t('change-pet')}</h2>
-            <Button className="extend-button" onClick={() => setIsExtend((prev) => !prev)}>
-              {isExtend ? t('shrink-button') : t('extend-button')}
-            </Button>
-            <div className={selectPersonaListStyle}>
-              <SelectPersonaList
-                name={name}
-                loadingPersona={loadingPersona}
-                selectPersona={selectPersona}
-                onSelectPersona={onSelectPersona}
-                initSelectPersonas={initSelectPersonas}
-                isExtend={isExtend}
-              />
-            </div>
-          </section>
-        )}
-
-        <div>
-          <div className={farmStyle}>
-            <GitanimalsFarm imageKey={`${selectPersona.length}/${loading ? 'loading' : ''}`} sizes={[600, 300]} />
-          </div>
-          <Button onClick={onLinkCopy} mt={16} size="m">
-            {t('copy-link-title')}
-          </Button>
-        </div>
+    <div className={farmSectionStyle}>
+      <section className={selectPetContainerStyle}>
+        <h2 className="heading">{t('change-pet')}</h2>
+        <Button className="extend-button" onClick={() => setIsExtend((prev) => !prev)}>
+          {isExtend ? t('shrink-button') : t('extend-button')}
+        </Button>
+      </section>
+      <section className={isExtend ? flexGrowSectionStyle : ''}>
+        <SelectPersonaList
+          name={name}
+          loadingPersona={loadingPersona}
+          selectPersona={selectPersona}
+          onSelectPersona={onSelectPersona}
+          initSelectPersonas={initSelectPersonas}
+          isExtend={isExtend}
+        />
       </section>
-    </>
+
+      <div>
+        <div className={farmStyle}>
+          <GitanimalsFarm imageKey={`${selectPersona.length}/${loading ? 'loading' : ''}`} sizes={[600, 300]} />
+        </div>
+        <Button onClick={onLinkCopy} mt={16} size="m">
+          {t('copy-link-title')}
+        </Button>
+      </div>
+    </div>
   );
 }
 
-export default FarmType;
-
-const selectPersonaListStyle = css({
-  maxH: '400px',
-  overflowY: 'auto',
-  _mobile: {
-    maxH: '250px',
-  },
+const flexGrowSectionStyle = css({
+  flex: '1',
+  minHeight: '0',
+  overflow: 'auto',
+  display: 'flex',
+  flexWrap: 'wrap',
 });
 
 const farmSectionStyle = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: '40px',
-  padding: '40px 0',
+  width: '100%',
+  maxHeight: '100%',
+  py: 40,
+  gap: 24,
+
+  _mobile: {
+    background: 'none',
+    maxHeight: 'auto',
+    height: 'auto',
+    overflowY: 'auto',
+    borderRadius: 0,
+  },
 });
 
 const farmStyle = css({ borderRadius: '12px', overflow: 'hidden', width: 'fit-content' });
diff --git a/apps/web/src/app/[locale]/mypage/(github-custom)/OneType.tsx b/apps/web/src/app/[locale]/mypage/(github-custom)/OneType.tsx
index 391af40d..dcdd9aa9 100644
--- a/apps/web/src/app/[locale]/mypage/(github-custom)/OneType.tsx
+++ b/apps/web/src/app/[locale]/mypage/(github-custom)/OneType.tsx
@@ -41,48 +41,61 @@ export function OneType({}: Props) {
   };
 
   return (
-    <section className={sectionStyle}>
-      {name && (
-        <section className={selectPetContainerStyle}>
-          <h2 className="heading">{t('change-pet')}</h2>
-          <Button className="extend-button" onClick={() => setIsExtend((prev) => !prev)}>
-            {isExtend ? t('shrink-button') : t('extend-button')}
-          </Button>
-
-          <div className={selectPersonaListStyle}>
-            <SelectPersonaList
-              name={name}
-              selectPersona={selectPersona ? [selectPersona] : []}
-              onSelectPersona={(persona) => setSelectPersona(persona.id)}
-              isExtend={isExtend}
-            />
-          </div>
-        </section>
-      )}
+    <div className={sectionContianer}>
+      <section className={selectPetContainerStyle}>
+        <h2 className="heading">{t('change-pet')}</h2>
+        <Button className="extend-button" onClick={() => setIsExtend((prev) => !prev)}>
+          {isExtend ? t('shrink-button') : t('extend-button')}
+        </Button>
+      </section>
+
+      <section className={isExtend ? flexGrowSectionStyle : ''}>
+        <SelectPersonaList
+          name={name}
+          selectPersona={selectPersona ? [selectPersona] : []}
+          onSelectPersona={(persona) => setSelectPersona(persona.id)}
+          isExtend={isExtend}
+        />
+      </section>
 
       {/* TODO: 임시로 모바일에선 input 안보이게 처리 */}
       <SizeInputList onApply={(width, height) => setSizes({ width, height })} />
-      <div>
+      <section>
         <div className={lineContainerStyle} style={{ width: sizes.width, height: sizes.height }}>
           <GitanimalsLine sizes={[sizes.width, sizes.height]} petId={selectPersona} />
         </div>
         <Button onClick={onLinkCopy} mt={16} size="m">
           {t('copy-link-title')}
         </Button>
-      </div>
-    </section>
+      </section>
+    </div>
   );
 }
 
-// TODO: 임시 방편
-const selectPersonaListStyle = css({
-  maxH: '400px',
-  overflowY: 'auto',
+const sectionContianer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  maxHeight: '100%',
+  py: 40,
+
   _mobile: {
-    maxH: '250px',
+    background: 'none',
+    maxHeight: 'auto',
+    height: 'auto',
+    overflowY: 'auto',
+    borderRadius: 0,
   },
 });
 
+const flexGrowSectionStyle = css({
+  flex: '1',
+  minHeight: '0',
+  overflow: 'auto',
+  display: 'flex',
+  flexWrap: 'wrap',
+});
+
 const selectPetContainerStyle = css({
   position: 'relative',
   '& .heading': {
diff --git a/apps/web/src/app/[locale]/mypage/(github-custom)/page.tsx b/apps/web/src/app/[locale]/mypage/(github-custom)/page.tsx
index f1a3cf1b..9a60335c 100644
--- a/apps/web/src/app/[locale]/mypage/(github-custom)/page.tsx
+++ b/apps/web/src/app/[locale]/mypage/(github-custom)/page.tsx
@@ -1,13 +1,12 @@
-import type { ReactNode } from 'react';
-import { cx } from '_panda/css';
+import { css, cx } from '_panda/css';
 import { flex } from '_panda/patterns';
+import { ReactNode } from 'react';
+import { FarmType } from './FarmType';
+import { OneType } from './OneType';
 import { updateUrlSearchParams } from '@gitanimals/util-common';
 
 import { Link } from '@/i18n/routing';
 
-import FarmType from './FarmType';
-import { OneType } from './OneType';
-
 type TabType = '1-type' | 'farm-type';
 
 async function Mypage({
@@ -25,7 +24,7 @@ async function Mypage({
   };
 
   return (
-    <div>
+    <>
       <div className={tabListStyle}>
         <Link href={`/mypage?${updateUrlSearchParams(searchParams, 'type', '1-type')}`}>
           <button className={cx('tab-item', selectedType === '1-type' && 'selected')}>1 Type</button>
@@ -34,13 +33,17 @@ async function Mypage({
           <button className={cx('tab-item', selectedType === 'farm-type' && 'selected')}>Farm Type</button>
         </Link>
       </div>
-      <div>{MYPAGE_TAB_INNER_MAP[selectedType]}</div>
-    </div>
+      <div className={tabItemStyle}>{MYPAGE_TAB_INNER_MAP[selectedType]}</div>
+    </>
   );
 }
-
 export default Mypage;
 
+const tabItemStyle = css({
+  flex: 1,
+  overflow: 'hidden',
+});
+
 const tabListStyle = flex({
   gap: 12,
   _mobile: {
diff --git a/apps/web/src/app/[locale]/mypage/layout.tsx b/apps/web/src/app/[locale]/mypage/layout.tsx
index 9e268edf..387bfa22 100644
--- a/apps/web/src/app/[locale]/mypage/layout.tsx
+++ b/apps/web/src/app/[locale]/mypage/layout.tsx
@@ -8,32 +8,49 @@ import { ProfileSection } from './ProfileSection';
 
 async function MypageLayout({ children }: { children: React.ReactNode }) {
   return (
-    <>
-      <div className={cx(containerStyle)}>
-        <GNB />
-        <Image src="/mypage/bg-cloud.webp" alt="bg" width={2400} height={1367} className={bgStyle} draggable={false} />
-        <main className={mainStyle}>
-          <ProfileSection />
-          <section className={rightSectionStyle}>{children}</section>
-        </main>
+    <div className={containerStyle}>
+      <GNB />
+      <div className={mainStyle}>
+        <ProfileSection />
+        <div className={rightSectionStyle}>{children}</div>
       </div>
-    </>
+    </div>
   );
 }
 
 export default MypageLayout;
 
+const mainStyle = grid({
+  gap: 80,
+  gridTemplateColumns: '222px 1fr',
+  position: 'relative',
+  zIndex: 1,
+  margin: '120px 200px 0',
+
+  '@media (max-width: 1400px)': {
+    margin: '120px 100px 0',
+  },
+
+  // TODO : 중간 태블릿 정도도 대응하면 좋을 듯
+  _mobile: {
+    gridTemplateColumns: '1fr',
+    margin: '0 16px 0',
+    gap: 0,
+  },
+});
+
 const rightSectionStyle = css({
+  height: 'calc(100vh - 240px)',
+  overflow: 'hidden',
   width: '100%',
-  maxW: '1080px',
   borderRadius: 16,
   background: 'white.white_10',
   backdropFilter: 'blur(7px)',
-  minHeight: '700px',
-  height: 'calc(100vh - 240px)',
-  maxHeight: 'min(calc(100vh - 240px), 1000px)',
-  overflow: 'hidden',
+  maxHeight: '1400px',
   p: 40,
+  display: 'flex',
+  flexDirection: 'column',
+
   _mobile: {
     background: 'none',
     p: 0,
@@ -61,23 +78,3 @@ const bgStyle = css({
   marginTop: '86px',
   pointerEvents: 'none',
 });
-
-const mainStyle = grid({
-  gap: 80,
-  gridTemplateColumns: '222px 1fr',
-  position: 'relative',
-  zIndex: 1,
-  margin: '120px 200px 0',
-
-  '@media (max-width: 1400px)': {
-    margin: '120px 100px 0',
-  },
-
-  // TODO : 중간 태블릿 정도도 대응하면 좋을 듯
-
-  _mobile: {
-    gridTemplateColumns: '1fr',
-    margin: '0 16px 0',
-    gap: 0,
-  },
-});