diff --git a/frontend/src/apis/garden.ts b/frontend/src/apis/garden.ts
new file mode 100644
index 000000000..649b0a226
--- /dev/null
+++ b/frontend/src/apis/garden.ts
@@ -0,0 +1,23 @@
+import type { GardenRegisterForm } from 'types/garden';
+import { BASE_URL } from 'constants/index';
+
+export const GARDEN_URL = `${BASE_URL}/garden`;
+
+const headers = {
+  'Content-Type': 'application/json',
+};
+
+const register = (form: GardenRegisterForm) => {
+  return fetch(GARDEN_URL, {
+    method: 'POST',
+    headers,
+    credentials: 'include',
+    body: JSON.stringify(form),
+  });
+};
+
+const GardenAPI = {
+  register,
+};
+
+export default GardenAPI;
diff --git a/frontend/src/components/@common/InlineRadio/InlineRadio.stories.tsx b/frontend/src/components/@common/InlineRadio/InlineRadio.stories.tsx
index 08ff7eb13..feaa81de3 100644
--- a/frontend/src/components/@common/InlineRadio/InlineRadio.stories.tsx
+++ b/frontend/src/components/@common/InlineRadio/InlineRadio.stories.tsx
@@ -22,8 +22,11 @@ const Wrapper = () => {
   return (
     <InlineRadio name="seasons" value={value} setValue={setValue}>
       <InlineRadio.Option value="봄" />
+      <span>|</span>
       <InlineRadio.Option value="여름" />
+      <span>|</span>
       <InlineRadio.Option value="가을" />
+      <span>|</span>
       <InlineRadio.Option value="겨울" />
     </InlineRadio>
   );
diff --git a/frontend/src/components/@common/InlineRadio/index.tsx b/frontend/src/components/@common/InlineRadio/index.ts
similarity index 100%
rename from frontend/src/components/@common/InlineRadio/index.tsx
rename to frontend/src/components/@common/InlineRadio/index.ts
diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Main.style.ts b/frontend/src/components/@common/InlineRadio/ingredients/Main.style.ts
index 62a335b09..862f2458f 100644
--- a/frontend/src/components/@common/InlineRadio/ingredients/Main.style.ts
+++ b/frontend/src/components/@common/InlineRadio/ingredients/Main.style.ts
@@ -4,8 +4,3 @@ export const Wrapper = styled.span`
   display: inline-flex;
   font-size: 1.8rem;
 `;
-
-export const Division = styled.p`
-  display: inline-flex;
-  align-items: center;
-`;
diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Main.tsx b/frontend/src/components/@common/InlineRadio/ingredients/Main.tsx
index b23b12990..ec25a7044 100644
--- a/frontend/src/components/@common/InlineRadio/ingredients/Main.tsx
+++ b/frontend/src/components/@common/InlineRadio/ingredients/Main.tsx
@@ -1,24 +1,12 @@
-import { Fragment } from 'react';
-import { Division, Wrapper } from './Main.style';
+import { Wrapper } from './Main.style';
 import RadioProvider, { RadioProviderProps } from 'contexts/radioContext';
-import getFilteredChildren from 'utils/getFilteredChildren';
-import Option from './Option';
 
 const Main = (props: RadioProviderProps) => {
   const { value, setValue, children, name } = props;
 
-  const options = getFilteredChildren(<Option value="" />, children);
-
   return (
     <RadioProvider value={value} setValue={setValue} name={name}>
-      <Wrapper>
-        {options.map((option, index) => (
-          <Fragment key={index}>
-            {option}
-            {index < options.length - 1 ? <Division aria-hidden="true">|</Division> : null}
-          </Fragment>
-        ))}
-      </Wrapper>
+      <Wrapper>{children}</Wrapper>
     </RadioProvider>
   );
 };
diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Option.style.ts b/frontend/src/components/@common/InlineRadio/ingredients/Option.style.ts
index 3944011ab..47948cfd0 100644
--- a/frontend/src/components/@common/InlineRadio/ingredients/Option.style.ts
+++ b/frontend/src/components/@common/InlineRadio/ingredients/Option.style.ts
@@ -13,9 +13,12 @@ export const HiddenRadio = styled.input`
 export const Label = styled.label`
   cursor: pointer;
   display: inline-block;
-  padding: 3px 13px;
 
   &:hover {
     font-weight: bold;
   }
 `;
+
+export const Content = styled.span`
+  display: inline-block;
+`;
diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Option.tsx b/frontend/src/components/@common/InlineRadio/ingredients/Option.tsx
index e9a41d4a9..6180ce62a 100644
--- a/frontend/src/components/@common/InlineRadio/ingredients/Option.tsx
+++ b/frontend/src/components/@common/InlineRadio/ingredients/Option.tsx
@@ -1,13 +1,13 @@
 import { useId } from 'react';
-import { HiddenRadio, Label } from './Option.style';
+import { HiddenRadio, Label, Content } from './Option.style';
 import { useRadioContext } from 'hooks/useRadioContext';
 
 interface OptionProps {
   value: string;
 }
 
-const Option = (props: OptionProps) => {
-  const { value } = props;
+const Option = (props: React.PropsWithChildren<OptionProps>) => {
+  const { value, children } = props;
   const { value: contextValue, setValue, name } = useRadioContext();
   const id = useId();
 
@@ -21,7 +21,7 @@ const Option = (props: OptionProps) => {
         checked={value === contextValue}
         onChange={() => setValue(value)}
       />
-      <span>{value}</span>
+      <Content>{children ? children : value}</Content>
     </Label>
   );
 };
diff --git a/frontend/src/components/dictionaryPlant/DictionaryPlantContent/DictionaryPlantContent.style.ts b/frontend/src/components/dictionaryPlant/DictionaryPlantContent/DictionaryPlantContent.style.ts
index 6f69b0c05..52fc55334 100644
--- a/frontend/src/components/dictionaryPlant/DictionaryPlantContent/DictionaryPlantContent.style.ts
+++ b/frontend/src/components/dictionaryPlant/DictionaryPlantContent/DictionaryPlantContent.style.ts
@@ -33,12 +33,13 @@ export const ContentBox = styled.section`
 
   width: 320px;
   margin: 0 auto;
-  div {
-    font: ${(props) => props.theme.font.dictContent};
+`;
+
+export const InformationTagBox = styled.div`
+  font: ${(props) => props.theme.font.dictContent};
 
-    p {
-      font: ${(props) => props.theme.font.dictTitle};
-    }
+  p {
+    font: ${(props) => props.theme.font.dictTitle};
   }
 `;
 
@@ -82,14 +83,12 @@ export const ManageInfoBox = styled.div`
   width: 100%;
   padding: 16px;
 
+  font: ${(props) => props.theme.font.dictContent};
+
   background: #ececec;
   border-radius: 8px;
 
-  p {
+  & > p {
     font: ${(props) => props.theme.font.dictTitle};
   }
-
-  span {
-    font: ${(props) => props.theme.font.dictContent};
-  }
 `;
diff --git a/frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx b/frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx
index a27899a5d..06dd1786c 100644
--- a/frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx
+++ b/frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx
@@ -7,6 +7,7 @@ import {
   ContentBox,
   FamilyName,
   HeaderBox,
+  InformationTagBox,
   ManageInfoBox,
   Name,
   PropBox,
@@ -49,15 +50,15 @@ const DictionaryPlantContent = (props: DictionaryPlantExtendCycles) => {
         </div>
       </HeaderBox>
       <ContentBox>
-        <div>
+        <InformationTagBox>
           <TagSwitch title="물 주기" optionMap={waterOptions} />
-        </div>
-        <div>
+        </InformationTagBox>
+        <InformationTagBox>
           <TagBox>
             <TagBox.Title>추천 장소</TagBox.Title>
             {place}
           </TagBox>
-        </div>
+        </InformationTagBox>
 
         <PropsBox>
           <PropBox>
@@ -154,11 +155,9 @@ const DictionaryPlantContent = (props: DictionaryPlantExtendCycles) => {
 
         <ManageInfoBox>
           <p>특별 관리 정보</p>
-          <span>
-            <SeeMoreContentBox>
-              {specialManageInfo !== NO_INFORMATION ? specialManageInfo : '관련 정보가 없어요😇'}
-            </SeeMoreContentBox>
-          </span>
+          <SeeMoreContentBox>
+            {specialManageInfo !== NO_INFORMATION ? specialManageInfo : '관련 정보가 없어요😇'}
+          </SeeMoreContentBox>
         </ManageInfoBox>
       </ContentBox>
     </>
diff --git a/frontend/src/components/dictionaryPlant/TagSwitch/TagSwitch.style.ts b/frontend/src/components/dictionaryPlant/TagSwitch/TagSwitch.style.ts
new file mode 100644
index 000000000..047acb90a
--- /dev/null
+++ b/frontend/src/components/dictionaryPlant/TagSwitch/TagSwitch.style.ts
@@ -0,0 +1,5 @@
+import { styled } from 'styled-components';
+
+export const Padding = styled.span`
+  padding: 3px 13px;
+`;
diff --git a/frontend/src/components/dictionaryPlant/TagSwitch/index.tsx b/frontend/src/components/dictionaryPlant/TagSwitch/index.tsx
index 57dd83847..8551f88b9 100644
--- a/frontend/src/components/dictionaryPlant/TagSwitch/index.tsx
+++ b/frontend/src/components/dictionaryPlant/TagSwitch/index.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useState, Fragment } from 'react';
 import InlineRadio from 'components/@common/InlineRadio';
 import { TagVariantType } from 'components/@common/Tag';
 import TagBox from 'components/dictionaryPlant/TagBox';
+import { Padding } from './TagSwitch.style';
 
 interface TagSwitchProps {
   title: string;
@@ -23,8 +24,13 @@ const TagSwitch = (props: TagSwitchProps) => {
       <TagBox.Title>
         {title}
         <InlineRadio name={title} value={selected} setValue={setSelected}>
-          {options.map((optionName) => (
-            <InlineRadio.Option key={optionName} value={optionName} />
+          {options.map((optionName, index) => (
+            <>
+              {index > 0 && <span>|</span>}
+              <Padding key={optionName}>
+                <InlineRadio.Option value={optionName} />
+              </Padding>
+            </>
           ))}
         </InlineRadio>
       </TagBox.Title>
diff --git a/frontend/src/components/garden/GardenPostItem/index.tsx b/frontend/src/components/garden/GardenPostItem/index.tsx
index 875a98b8d..008e2387f 100644
--- a/frontend/src/components/garden/GardenPostItem/index.tsx
+++ b/frontend/src/components/garden/GardenPostItem/index.tsx
@@ -50,7 +50,7 @@ const GardenPostItem = ({
       <TagArea>
         <DictionaryPlantTag>{dictionaryPlantName}</DictionaryPlantTag>
         <WaterCycleTag>물 주기: {petPlant.waterCycle}일</WaterCycleTag>
-        <ManageLevelTag>{manageLevel}에게 추천해요</ManageLevelTag>
+        {manageLevel !== '정보없음' && <ManageLevelTag>{manageLevel}에게 추천해요</ManageLevelTag>}
       </TagArea>
       <Environment>
         <EnvironmentItem>
diff --git a/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts b/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts
index 6e39f3123..caf17d441 100644
--- a/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts
+++ b/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
+import theme from 'style/theme.style';
 
 const singleLineText = css`
   overflow: hidden;
@@ -158,34 +159,62 @@ export const EnvironmentTitle = styled.span`
   border-radius: 50%;
 `;
 
-export const EditLink = styled(StyledLink)`
+export const ButtonArea = styled.div`
+  display: flex;
+  justify-content: space-between;
+  column-gap: 10px;
+`;
+
+const ButtonLink = styled(Link)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  margin-right: auto;
-  margin-left: 0;
+  width: 100%;
+  height: 36px;
 
-  font-size: 1.4rem;
-  color: ${({ theme }) => theme.color.grayDark};
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 1px;
 
-  transition: color 0.2s linear;
+  border-radius: 4px;
+`;
 
-  &:focus {
-    color: ${({ theme }) => theme.color.primary};
-  }
+export const PrimaryLink = styled(ButtonLink)`
+  color: ${({ theme }) => theme.color.background};
+  background: ${(props) => props.theme.color.primary};
+`;
+
+export const SecondaryLink = styled(ButtonLink)`
+  color: ${({ theme }) => theme.color.sub};
+  background: ${(props) => props.theme.color.background};
+  border: 1px solid ${({ theme }) => theme.color.primary};
 `;
 
-export const DeleteButton = styled.button`
+const tertiary = css`
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  font-size: 1.4rem;
-  color: ${({ theme }) => theme.color.grayDark};
+  font-size: 1.5rem;
+  color: ${theme.color.grayDark};
+  text-decoration: underline;
+`;
+
+export const TertiaryButton = styled.button`
+  ${tertiary}
+
+  &:focus,
+  &:hover {
+    color: ${theme.color.accent};
+  }
+`;
+
+export const TertiaryLink = styled(Link)`
+  ${tertiary}
 
   &:focus,
   &:hover {
-    color: ${({ theme }) => theme.color.accent};
+    color: ${theme.color.primary};
   }
 `;
diff --git a/frontend/src/components/petPlant/PetPlantDetail/index.tsx b/frontend/src/components/petPlant/PetPlantDetail/index.tsx
index 0c79e7286..f2d91c4b4 100644
--- a/frontend/src/components/petPlant/PetPlantDetail/index.tsx
+++ b/frontend/src/components/petPlant/PetPlantDetail/index.tsx
@@ -21,8 +21,10 @@ import {
   EnvironmentItem,
   TimelineLinkArea,
   TimelineLink,
-  EditLink,
-  DeleteButton,
+  PrimaryLink,
+  ButtonArea,
+  TertiaryButton,
+  TertiaryLink,
 } from './PetPlantDetail.style';
 import useDeletePetPlant from 'hooks/queries/petPlant/useDeletePetPlant';
 import usePetPlantDetails from 'hooks/queries/petPlant/usePetPlantDetails';
@@ -37,8 +39,8 @@ interface PetDetailsProps {
 
 const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
   const { data: petPlantDetails } = usePetPlantDetails(petPlantId);
+  const { mutate: deleteMutate } = useDeletePetPlant();
   const confirm = useConfirm();
-  const { mutate } = useDeletePetPlant();
 
   if (!petPlantDetails) return null;
 
@@ -46,7 +48,7 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
     id,
     imageUrl,
     nickname,
-    dictionaryPlant: { id: dictId, name: dictName },
+    dictionaryPlant: { id: dictionaryPlantId, name: dictionaryPlantName },
     birthDate,
     daySince,
     waterCycle,
@@ -66,7 +68,7 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
 
     if (!isConfirmed) return;
 
-    mutate(id);
+    deleteMutate(petPlantId);
   };
 
   const birthDateKorean = convertDateKorYear(birthDate);
@@ -79,16 +81,16 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
 
   return (
     <Wrapper>
-      <Image type="wide" src={imageUrl} alt={`${nickname}(${dictName})`} size="300px" />
+      <Image type="wide" src={imageUrl} alt={`${nickname}(${dictionaryPlantName})`} size="300px" />
       <Content>
         <TitleArea>
           <Title>
             {nickname}
             {isBirthday && <SvgFill icon="crown" aria-hidden="true" />}
           </Title>
-          <StyledLink to={generatePath(URL_PATH.dictDetail, { id: dictId.toString() })}>
+          <StyledLink to={generatePath(URL_PATH.dictDetail, { id: dictionaryPlantId.toString() })}>
             <SubTitle>
-              {dictName}
+              {dictionaryPlantName}
               <SvgStroke icon="dictionary" aria-hidden="true" color={theme.color.grayDark} />
             </SubTitle>
           </StyledLink>
@@ -179,14 +181,20 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
             {wind}
           </EnvironmentItem>
         </Environment>
-        <ExpandedTextBox>
-          <EditLink to={generatePath(URL_PATH.petEdit, { id: petPlantId.toString() })}>
+        <ButtonArea>
+          <TertiaryLink to={generatePath(URL_PATH.petEdit, { id: petPlantId.toString() })}>
             정보 수정하기
-          </EditLink>
-          <DeleteButton type="button" onClick={deletePetPlant}>
-            식물 삭제하기
-          </DeleteButton>
-        </ExpandedTextBox>
+          </TertiaryLink>
+          <TertiaryButton type="button" onClick={deletePetPlant}>
+            삭제하기
+          </TertiaryButton>
+        </ButtonArea>
+        <PrimaryLink
+          to={generatePath(URL_PATH.gardenRegisterForm, { id: petPlantId.toString() })}
+          state={{ nickname, dictionaryPlantName, imageUrl }}
+        >
+          모두의 정원에 기록하기
+        </PrimaryLink>
       </Content>
     </Wrapper>
   );
diff --git a/frontend/src/components/petPlant/PetPlantEditForm/PetPlantEditForm.style.ts b/frontend/src/components/petPlant/PetPlantEditForm/PetPlantEditForm.style.ts
index d43b67849..994de24e7 100644
--- a/frontend/src/components/petPlant/PetPlantEditForm/PetPlantEditForm.style.ts
+++ b/frontend/src/components/petPlant/PetPlantEditForm/PetPlantEditForm.style.ts
@@ -191,13 +191,13 @@ const Button = styled.button`
   justify-content: center;
 
   width: 100%;
-  height: 48px;
+  height: 36px;
 
-  font-size: 2rem;
-  font-weight: 700;
+  font-size: 1.5rem;
+  font-weight: 500;
   letter-spacing: 1px;
 
-  border-radius: 8px;
+  border-radius: 4px;
 
   &:disabled {
     cursor: not-allowed;
@@ -220,3 +220,14 @@ export const SecondaryButton = styled(Button)`
   background: ${(props) => props.theme.color.background};
   border: 1px solid ${({ theme }) => theme.color.primary};
 `;
+
+export const TertiaryButton = styled(Button)`
+  width: 70%;
+  color: ${({ theme }) => theme.color.grayDark};
+  text-decoration: underline;
+
+  &:focus,
+  &:hover {
+    color: ${({ theme }) => theme.color.accent};
+  }
+`;
diff --git a/frontend/src/components/petPlant/PetPlantEditForm/index.tsx b/frontend/src/components/petPlant/PetPlantEditForm/index.tsx
index 976cbc3c8..d8bff813c 100644
--- a/frontend/src/components/petPlant/PetPlantEditForm/index.tsx
+++ b/frontend/src/components/petPlant/PetPlantEditForm/index.tsx
@@ -1,6 +1,6 @@
 import type { PetPlantDetails } from 'types/petPlant';
 import { useId } from 'react';
-import { generatePath, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import DateInput from 'components/@common/DateInput';
 import Image from 'components/@common/Image';
 import ImageButton from 'components/@common/ImageButton';
@@ -40,7 +40,7 @@ import {
   isDateFormat,
   getDaysBetween,
 } from 'utils/date';
-import { NUMBER, OPTIONS, URL_PATH } from 'constants/index';
+import { NUMBER, OPTIONS } from 'constants/index';
 import theme from 'style/theme.style';
 
 const PetPlantEditForm = (props: PetPlantDetails) => {
@@ -133,10 +133,6 @@ const PetPlantEditForm = (props: PetPlantDetails) => {
     submit();
   };
 
-  const goToPetDetailsPage = () => {
-    navigate(generatePath(URL_PATH.petDetail, { id: petPlantId.toString() }), { replace: true });
-  };
-
   const setNickname: React.ChangeEventHandler<HTMLInputElement> = ({ target: { value } }) => {
     dispatch({ type: 'SET', key: 'nickname', maxLength: NUMBER.maxNicknameLength, value });
   };
@@ -357,7 +353,7 @@ const PetPlantEditForm = (props: PetPlantDetails) => {
           <PrimaryButton type="submit" onClick={handleSubmitClick} disabled={!isValidForm(form)}>
             저장하기
           </PrimaryButton>
-          <SecondaryButton type="button" role="link" onClick={goToPetDetailsPage}>
+          <SecondaryButton type="button" role="link" onClick={() => navigate(-1)}>
             취소하기
           </SecondaryButton>
         </ButtonArea>
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index e9e256feb..de09c74d1 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -12,7 +12,8 @@ export const URL_PATH = {
   petEdit: '/pet/:id/edit',
   petRegisterSearch: '/pet/register',
   petRegisterForm: '/pet/register/:id',
-  calendar: '/calendar',
+  gardenRegisterPick: '/garden/register',
+  gardenRegisterForm: '/garden/register/:id',
   reminder: '/reminder',
   login: '/login',
   authorization: '/authorization',
@@ -70,6 +71,7 @@ export const NUMBER = {
   maxCycleDate: 365,
   minCycleDate: 1,
   maxNicknameLength: 30,
+  maxGardenContentLength: 1000,
 } as const;
 
 export const STATUS_CODE = {
diff --git a/frontend/src/hooks/queries/garden/useGardenRegister.ts b/frontend/src/hooks/queries/garden/useGardenRegister.ts
new file mode 100644
index 000000000..77b4863c8
--- /dev/null
+++ b/frontend/src/hooks/queries/garden/useGardenRegister.ts
@@ -0,0 +1,33 @@
+import type { GardenRegisterForm } from 'types/garden';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import useAddToast from 'hooks/useAddToast';
+import GardenAPI from 'apis/garden';
+import noRetryIfUnauthorized from 'utils/noRetryIfUnauthorized';
+import throwOnInvalidStatus from 'utils/throwOnInvalidStatus';
+import { URL_PATH } from 'constants/index';
+
+const useRegisterPetPlant = () => {
+  const navigate = useNavigate();
+  const addToast = useAddToast();
+
+  return useMutation<void, Error, GardenRegisterForm>({
+    mutationFn: async (form) => {
+      const response = await GardenAPI.register(form);
+      throwOnInvalidStatus(response);
+    },
+
+    onSuccess: () => {
+      addToast('success', '게시글 등록에 성공했어요.');
+      navigate(URL_PATH.garden, { replace: true });
+    },
+
+    onError: () => {
+      addToast('error', '게시글 등록에 실패했어요.');
+    },
+
+    retry: noRetryIfUnauthorized,
+  });
+};
+
+export default useRegisterPetPlant;
diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts
index 383d21982..cfe0af969 100644
--- a/frontend/src/mocks/browser.ts
+++ b/frontend/src/mocks/browser.ts
@@ -1,10 +1,12 @@
 import { setupWorker } from 'msw';
 import { makeHandler } from './handlers';
 import dictionaryPlantRegistrationHandlers from './handlers/dictionaryPlantRegistration';
+import gardenHandlers from './handlers/garden';
 import historyHandlers from './handlers/historyHandlers';
 
 export const worker = setupWorker(
   ...makeHandler(0, 0),
   ...historyHandlers,
-  ...dictionaryPlantRegistrationHandlers
+  ...dictionaryPlantRegistrationHandlers,
+  ...gardenHandlers
 );
diff --git a/frontend/src/mocks/handlers/garden.ts b/frontend/src/mocks/handlers/garden.ts
new file mode 100644
index 000000000..96c7fe563
--- /dev/null
+++ b/frontend/src/mocks/handlers/garden.ts
@@ -0,0 +1,18 @@
+import type { GardenRegisterForm } from 'types/garden';
+import { rest } from 'msw';
+
+const GARDEN = '*/garden';
+
+const gardenHandlers = [
+  rest.post<GardenRegisterForm>(GARDEN, (req, res, ctx) => {
+    const { JSESSION } = req.cookies;
+
+    if (JSESSION === undefined) {
+      return res(ctx.delay(200), ctx.status(401), ctx.json({ message: '만료된 세션입니다.' }));
+    }
+
+    return res(ctx.delay(200), ctx.status(201));
+  }),
+];
+
+export default gardenHandlers;
diff --git a/frontend/src/mocks/storybookHandlers.ts b/frontend/src/mocks/storybookHandlers.ts
index b0609b4a4..5b02a31ba 100644
--- a/frontend/src/mocks/storybookHandlers.ts
+++ b/frontend/src/mocks/storybookHandlers.ts
@@ -14,10 +14,12 @@ export const storybookHandlers = [
   }),
 
   rest.get('*/dictionary-plants/:id', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(DICTIONARY_PLANT_DATA));
+    const { id } = req.params;
+    const data = { ...DICTIONARY_PLANT_DATA[(Number(id) + 1) % 2], id: Number(id) };
+    return res(ctx.status(200), ctx.json(data));
   }),
 
-  rest.post<NewPetPlantRequest>('*/pet-plants', async (req, res, ctx) => res(ctx.status(201))),
+  rest.post<NewPetPlantRequest>('*/pet-plants', (req, res, ctx) => res(ctx.status(201))),
 
   rest.get('*/pet-plants/:id', async (req, res, ctx) => {
     const { id } = req.params;
@@ -26,7 +28,7 @@ export const storybookHandlers = [
     return res(ctx.status(200), ctx.json(data));
   }),
 
-  rest.patch<EditPetPlantRequest>(`*/pet-plants/:id`, async (req, res, ctx) =>
-    res(ctx.status(200))
-  ),
+  rest.patch<EditPetPlantRequest>(`*/pet-plants/:id`, (req, res, ctx) => res(ctx.status(200))),
+
+  rest.post(`*/garden/register/:id`, (req, res, ctx) => res(ctx.delay(200), ctx.status(201))),
 ];
diff --git a/frontend/src/pages/DictionaryPlantDetail/DictionaryPlantDetail.stories.tsx b/frontend/src/pages/DictionaryPlantDetail/DictionaryPlantDetail.stories.tsx
index eafa76923..b4cb5f8bb 100644
--- a/frontend/src/pages/DictionaryPlantDetail/DictionaryPlantDetail.stories.tsx
+++ b/frontend/src/pages/DictionaryPlantDetail/DictionaryPlantDetail.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Suspense } from 'react';
 import Loading from 'pages/Loading';
-import DictionaryDetail from '.';
+import DictionaryPlantDetail from '.';
 
-const meta: Meta<typeof DictionaryDetail> = {
-  component: DictionaryDetail,
+const meta: Meta<typeof DictionaryPlantDetail> = {
+  component: DictionaryPlantDetail,
   parameters: {
     reactRouter: {
       routePath: '/dict/:id',
@@ -24,6 +24,6 @@ const meta: Meta<typeof DictionaryDetail> = {
 
 export default meta;
 
-type Story = StoryObj<typeof DictionaryDetail>;
+type Story = StoryObj<typeof DictionaryPlantDetail>;
 
 export const Default: Story = {};
diff --git a/frontend/src/pages/GardenRegister/Form/Form.style.ts b/frontend/src/pages/GardenRegister/Form/Form.style.ts
new file mode 100644
index 000000000..7713e999a
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/Form.style.ts
@@ -0,0 +1,5 @@
+import { styled } from 'styled-components';
+
+export const Main = styled.main`
+  margin-bottom: 80px;
+`;
diff --git a/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.stories.tsx b/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.stories.tsx
new file mode 100644
index 000000000..29e2e38b1
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Form from '.';
+
+const meta: Meta<typeof Form> = {
+  component: Form,
+  parameters: {
+    reactRouter: {
+      routePath: '/garden/register/:id',
+      routeParams: { id: '1' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Form>;
+
+export const Default: Story = {};
diff --git a/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.style.ts b/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.style.ts
new file mode 100644
index 000000000..e85e73d68
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.style.ts
@@ -0,0 +1,106 @@
+import { styled } from 'styled-components';
+
+interface TagProps {
+  selected: boolean;
+}
+
+export const Tag = styled.span<TagProps>`
+  display: inline-block;
+
+  margin-right: 10px;
+  padding: 8px 12px;
+
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: ${({ theme: { color } }) => color.sub};
+
+  background-repeat: no-repeat;
+  background-size: ${({ selected }) => (selected ? '100% 100%' : '0% 100%')};
+  border: solid 1.6px;
+  border-radius: 16px;
+
+  transition: all 0.3s;
+`;
+
+export const DarkTag = styled(Tag)`
+  color: ${({ selected, theme: { color } }) => (selected ? color.background : color.sub)};
+  background-image: ${({ theme: { color } }) => `linear-gradient(${color.sub}, ${color.sub})`};
+  border-color: ${({ theme: { color } }) => color.sub};
+`;
+
+export const GreenTag = styled(Tag)`
+  color: ${({ selected, theme: { color } }) =>
+    selected ? color.background : 'hsl(145, 77%, 38%)'};
+  background-image: linear-gradient(hsl(145, 77%, 38%), hsl(145, 77%, 38%));
+  border-color: hsl(145, 77%, 38%);
+`;
+
+export const BlueTag = styled(Tag)`
+  color: ${({ selected, theme: { color } }) =>
+    selected ? color.background : 'hsl(220, 77%, 38%)'};
+  background-image: linear-gradient(hsl(220, 77%, 38%), hsl(220, 77%, 38%));
+  border-color: hsl(220, 77%, 38%);
+`;
+
+export const RedTag = styled(Tag)`
+  color: ${({ selected, theme: { color } }) => (selected ? color.background : 'hsl(7, 77%, 50%)')};
+  background-image: linear-gradient(hsl(7, 77%, 50%), hsl(7, 77%, 50%));
+  border-color: hsl(7, 77%, 50%);
+`;
+
+export const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  row-gap: 50px;
+
+  width: 90%;
+  margin: 40px auto auto auto;
+`;
+
+export const Question = styled.p`
+  margin-bottom: 15px;
+  font-size: 1.4rem;
+`;
+
+export const QuestionLabel = styled.label`
+  display: block;
+  margin-bottom: 15px;
+  font-size: 1.4rem;
+`;
+
+export const TextArea = styled.textarea`
+  resize: vertical;
+
+  display: block;
+
+  width: 100%;
+  padding: 0.5rem;
+
+  border-radius: 4px;
+`;
+
+export const TextLengthNotice = styled.p`
+  margin-top: 10px;
+  font-size: 1.2rem;
+  text-align: right;
+`;
+
+export const Button = styled.button`
+  width: 100%;
+  height: 36px;
+
+  font-size: 1.4rem;
+  font-weight: 900;
+  line-height: 2.4rem;
+  color: ${({ theme }) => theme.color.background};
+  letter-spacing: 1px;
+
+  background: ${(props) => props.theme.color.primary};
+  border-radius: 8px;
+
+  &:disabled {
+    cursor: progress;
+    color: ${(props) => props.theme.color.sub + '40'};
+    background: ${(props) => props.theme.color.primary + '40'};
+  }
+`;
diff --git a/frontend/src/pages/GardenRegister/Form/FormSection/index.tsx b/frontend/src/pages/GardenRegister/Form/FormSection/index.tsx
new file mode 100644
index 000000000..b9f3ffd89
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/FormSection/index.tsx
@@ -0,0 +1,93 @@
+import { ManageLevel } from 'types/dictionaryPlant';
+import { PetPlantDetails } from 'types/petPlant';
+import React, { useState, useId } from 'react';
+import InlineRadio from 'components/@common/InlineRadio';
+import {
+  BlueTag,
+  Button,
+  DarkTag,
+  StyledForm,
+  GreenTag,
+  Question,
+  QuestionLabel,
+  RedTag,
+  TextArea,
+  TextLengthNotice,
+} from './FormSection.style';
+import useGardenRegister from 'hooks/queries/garden/useGardenRegister';
+import { isValidManageLevel } from 'utils/validate';
+import { NUMBER } from 'constants/index';
+
+interface FormSectionProps {
+  petPlantId: PetPlantDetails['id'];
+}
+
+const FormSection = (props: FormSectionProps) => {
+  const { petPlantId } = props;
+
+  const [manageLevel, setManageLevel] = useState<ManageLevel>('정보없음');
+  const [content, setContent] = useState('');
+  const contentId = useId();
+  const { mutate, isPending } = useGardenRegister();
+
+  const setGardenContent: React.ChangeEventHandler<HTMLTextAreaElement> = ({
+    target: { value },
+  }) => {
+    setContent(value.slice(0, NUMBER.maxGardenContentLength));
+  };
+
+  const isFormValid = () =>
+    isValidManageLevel(manageLevel) &&
+    content.trim().length > 0 &&
+    content.trim().length <= NUMBER.maxGardenContentLength;
+
+  const submit: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    event.preventDefault();
+    if (!isFormValid()) return;
+    mutate({ petPlantId, manageLevel, content });
+  };
+
+  return (
+    <StyledForm>
+      <div>
+        <Question>이 식물은 어떤 분에게 추천하시나요?</Question>
+        <InlineRadio
+          name="manage-level"
+          value={manageLevel}
+          setValue={setManageLevel as React.Dispatch<React.SetStateAction<string>>}
+        >
+          <InlineRadio.Option value="정보없음">
+            <DarkTag selected={manageLevel === '정보없음'}>선택안함</DarkTag>
+          </InlineRadio.Option>
+          <InlineRadio.Option value="초보자">
+            <GreenTag selected={manageLevel === '초보자'}>초보자</GreenTag>
+          </InlineRadio.Option>
+          <InlineRadio.Option value="경험자">
+            <BlueTag selected={manageLevel === '경험자'}>경험자</BlueTag>
+          </InlineRadio.Option>
+          <InlineRadio.Option value="전문가">
+            <RedTag selected={manageLevel === '전문가'}>전문가</RedTag>
+          </InlineRadio.Option>
+        </InlineRadio>
+      </div>
+      <div>
+        <QuestionLabel htmlFor={contentId}>내용을 입력해 주세요.</QuestionLabel>
+        <TextArea
+          id={contentId}
+          rows={5}
+          value={content}
+          onChange={setGardenContent}
+          maxLength={NUMBER.maxGardenContentLength}
+        />
+        <TextLengthNotice>
+          {content.length} / {NUMBER.maxGardenContentLength}자
+        </TextLengthNotice>
+      </div>
+      <Button type="submit" onClick={submit} disabled={isPending || !isFormValid()}>
+        기록하기
+      </Button>
+    </StyledForm>
+  );
+};
+
+export default FormSection;
diff --git a/frontend/src/pages/GardenRegister/Form/Profile/Profile.stories.tsx b/frontend/src/pages/GardenRegister/Form/Profile/Profile.stories.tsx
new file mode 100644
index 000000000..e2b7e8346
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/Profile/Profile.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Suspense } from 'react';
+import Loading from 'pages/Loading';
+import Profile from '.';
+
+const meta: Meta<typeof Profile> = {
+  component: Profile,
+
+  args: {
+    petPlantId: 1,
+  },
+
+  decorators: [
+    (Story) => (
+      <Suspense fallback={<Loading />}>
+        <Story />
+      </Suspense>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Profile>;
+
+/**
+ * 모두의 정원 기록하기 페이지에서 보여지는 이용자의 간략한 식물 환경 정보
+ */
+export const Default: Story = {};
diff --git a/frontend/src/pages/GardenRegister/Form/Profile/Profile.style.ts b/frontend/src/pages/GardenRegister/Form/Profile/Profile.style.ts
new file mode 100644
index 000000000..6a5840ee2
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/Profile/Profile.style.ts
@@ -0,0 +1,127 @@
+import type { CSSProperties } from 'react';
+import { Link } from 'react-router-dom';
+import { keyframes, styled } from 'styled-components';
+
+interface SkeletonItemProps {
+  width: CSSProperties['width'];
+  height: CSSProperties['height'];
+}
+
+export const Section = styled.section`
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+
+  max-width: 90%;
+  margin: 40px auto auto auto;
+  padding: 20px 30px;
+
+  border: 1px solid ${({ theme: { color } }) => color.grayLight};
+  border-radius: 4px;
+`;
+
+export const Title = styled.div`
+  display: flex;
+`;
+
+export const NameArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+
+  width: calc(100% - 130px);
+  margin-left: 20px;
+`;
+
+export const Nickname = styled.p`
+  overflow: hidden;
+
+  width: 100%;
+
+  font: ${({ theme }) => theme.font.dictTitle};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const DictionaryPlantName = styled.p`
+  overflow: hidden;
+
+  width: 100%;
+
+  font: ${({ theme }) => theme.font.dictContent};
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const Text = styled.p`
+  font: ${({ theme }) => theme.font.dictContent};
+  font-size: 1.6rem;
+`;
+
+export const PrimaryText = styled.strong`
+  font: ${({ theme }) => theme.font.dictContent};
+  font-size: 2.4rem;
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.primary};
+`;
+
+export const Environment = styled.section`
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  align-items: center;
+
+  width: 100%;
+  padding: 12px;
+
+  background-color: ${({ theme }) => theme.color.primary}13;
+  border-radius: 8px;
+`;
+
+export const EnvironmentItem = styled.p`
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+
+  width: 100%;
+
+  font-size: 1.2rem;
+`;
+
+export const EnvironmentTitle = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 24px;
+  height: 24px;
+
+  color: ${({ theme }) => theme.color.primary};
+
+  background: ${({ theme }) => theme.color.background};
+  border-radius: 50%;
+`;
+
+export const StyledLink = styled(Link)`
+  display: block;
+
+  margin-top: 10px;
+  margin-right: 5%;
+
+  text-align: end;
+  text-decoration: underline;
+`;
+
+const skeletonBackground = keyframes`
+  0%    { background-color: rgba(176, 176, 176, 0.1) }
+  50%   { background-color: rgba(176, 176, 176, 0.3) }
+  100%  { background-color: rgba(176, 176, 176, 0.1) }
+`;
+
+export const SkeletonItem = styled.div<SkeletonItemProps>`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  border-radius: 4px;
+  animation: ${skeletonBackground} 1s infinite;
+`;
diff --git a/frontend/src/pages/GardenRegister/Form/Profile/ProfileSkeleton.tsx b/frontend/src/pages/GardenRegister/Form/Profile/ProfileSkeleton.tsx
new file mode 100644
index 000000000..0bf5dec62
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/Profile/ProfileSkeleton.tsx
@@ -0,0 +1,37 @@
+import {
+  Text,
+  NameArea,
+  Section,
+  Environment,
+  Title,
+  StyledLink,
+  SkeletonItem,
+} from './Profile.style';
+
+const ProfileSkeleton = () => {
+  return (
+    <>
+      <Section>
+        <Title>
+          <SkeletonItem width="100px" height="100px" />
+          <NameArea>
+            <SkeletonItem width="100%" height="1.8rem" />
+            <SkeletonItem width="100%" height="1.4rem" />
+          </NameArea>
+        </Title>
+        <Text>
+          <SkeletonItem width="50%" height="2rem" />
+        </Text>
+        <Environment>
+          <SkeletonItem width="100%" height="2.4rem" />
+          <SkeletonItem width="100%" height="2.4rem" />
+          <SkeletonItem width="100%" height="2.4rem" />
+          <SkeletonItem width="100%" height="2.4rem" />
+        </Environment>
+      </Section>
+      <StyledLink to="">로딩중..</StyledLink>
+    </>
+  );
+};
+
+export default ProfileSkeleton;
diff --git a/frontend/src/pages/GardenRegister/Form/Profile/index.tsx b/frontend/src/pages/GardenRegister/Form/Profile/index.tsx
new file mode 100644
index 000000000..3e2e65554
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/Profile/index.tsx
@@ -0,0 +1,120 @@
+import { PetPlantDetails } from 'types/petPlant';
+import { generatePath } from 'react-router-dom';
+import Image from 'components/@common/Image';
+import SvgFill from 'components/@common/SvgIcons/SvgFill';
+import {
+  DictionaryPlantName,
+  Text,
+  NameArea,
+  Nickname,
+  PrimaryText,
+  Section,
+  Environment,
+  EnvironmentItem,
+  EnvironmentTitle,
+  Title,
+  StyledLink,
+} from './Profile.style';
+import usePetPlantDetails from 'hooks/queries/petPlant/usePetPlantDetails';
+import { URL_PATH } from 'constants/index';
+import theme from 'style/theme.style';
+
+interface ProfileProps {
+  petPlantId: PetPlantDetails['id'];
+}
+
+const ENVIRONMENT_ICON_SIZE = 16;
+
+const Profile = (props: ProfileProps) => {
+  const { petPlantId } = props;
+
+  const {
+    data: {
+      nickname,
+      imageUrl,
+      waterCycle,
+      location,
+      flowerpot,
+      light,
+      wind,
+      dictionaryPlant: { name: dictionaryPlantName },
+    },
+  } = usePetPlantDetails(petPlantId);
+
+  const {
+    color: { primary: primaryColor },
+  } = theme;
+
+  return (
+    <>
+      <Section>
+        <Title>
+          <Image type="square" size="100px" src={imageUrl} alt={`사랑스러운 ${nickname}`} />
+          <NameArea>
+            <Nickname>{nickname}</Nickname>
+            <DictionaryPlantName>{dictionaryPlantName}</DictionaryPlantName>
+          </NameArea>
+        </Title>
+        <Text>
+          물 주기: &nbsp;
+          <PrimaryText>{waterCycle}</PrimaryText> 일마다
+        </Text>
+        <Environment>
+          <EnvironmentItem>
+            <EnvironmentTitle>
+              <SvgFill
+                icon="house"
+                size={ENVIRONMENT_ICON_SIZE}
+                color={primaryColor}
+                aria-label="장소"
+                aria-describedby="반려 식물이 놓인 공간"
+              />
+            </EnvironmentTitle>
+            {location}
+          </EnvironmentItem>
+          <EnvironmentItem>
+            <EnvironmentTitle>
+              <SvgFill
+                icon="flowerpot"
+                size={ENVIRONMENT_ICON_SIZE}
+                color={primaryColor}
+                aria-label="화분"
+                aria-describedby="반려 식물이 담긴 화분의 재질"
+              />
+            </EnvironmentTitle>
+            {flowerpot}
+          </EnvironmentItem>
+          <EnvironmentItem>
+            <EnvironmentTitle>
+              <SvgFill
+                icon="sun"
+                color={primaryColor}
+                aria-label="채광"
+                aria-describedby="반려 식물이 빛을 얼마나 받고 있는지"
+                size={ENVIRONMENT_ICON_SIZE}
+              />
+            </EnvironmentTitle>
+            {light}
+          </EnvironmentItem>
+          <EnvironmentItem>
+            <EnvironmentTitle>
+              <SvgFill
+                icon="wind"
+                color={primaryColor}
+                aria-label="바람"
+                aria-describedby="반려 식물이 통풍이 잘 되는 위치인지"
+                size={ENVIRONMENT_ICON_SIZE}
+              />
+            </EnvironmentTitle>
+            {wind}
+          </EnvironmentItem>
+        </Environment>
+      </Section>
+      <StyledLink to={generatePath(URL_PATH.petEdit, { id: petPlantId.toString() })}>
+        정보 수정하러 가기
+      </StyledLink>
+    </>
+  );
+};
+
+export default Profile;
diff --git a/frontend/src/pages/GardenRegister/Form/index.tsx b/frontend/src/pages/GardenRegister/Form/index.tsx
new file mode 100644
index 000000000..1206caca8
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Form/index.tsx
@@ -0,0 +1,31 @@
+import { Suspense } from 'react';
+import { useParams } from 'react-router-dom';
+import ContentHeader from 'components/@common/ContentHeader';
+import Navbar from 'components/@common/Navbar';
+import { Main } from './Form.style';
+import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId';
+import FormSection from './FormSection';
+import Profile from './Profile';
+import ProfileSkeleton from './Profile/ProfileSkeleton';
+
+const GardenRegisterForm = () => {
+  useCheckSessionId();
+
+  const { id: petPlantId } = useParams();
+  if (!petPlantId) throw new Error('URL에 id가 없습니다.');
+
+  return (
+    <>
+      <ContentHeader title="모두의 정원에 기록하기" />
+      <Main>
+        <Suspense fallback={<ProfileSkeleton />}>
+          <Profile petPlantId={Number(petPlantId)} />
+        </Suspense>
+        <FormSection petPlantId={Number(petPlantId)} />
+      </Main>
+      <Navbar />
+    </>
+  );
+};
+
+export default GardenRegisterForm;
diff --git a/frontend/src/pages/GardenRegister/Pick/PetPlantPicker.style.ts b/frontend/src/pages/GardenRegister/Pick/PetPlantPicker.style.ts
new file mode 100644
index 000000000..c10fe78a7
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Pick/PetPlantPicker.style.ts
@@ -0,0 +1,8 @@
+import { styled } from 'styled-components';
+
+export const SubTitle = styled.h3`
+  margin-top: 30px;
+  font-size: 1.8rem;
+  font-weight: 500;
+  text-align: center;
+`;
diff --git a/frontend/src/pages/GardenRegister/Pick/index.tsx b/frontend/src/pages/GardenRegister/Pick/index.tsx
new file mode 100644
index 000000000..8baa2e7f4
--- /dev/null
+++ b/frontend/src/pages/GardenRegister/Pick/index.tsx
@@ -0,0 +1,37 @@
+import { Link, generatePath } from 'react-router-dom';
+import { CardList, Wrapper } from 'pages/PetPlantCardList/PetPlantCardList.style';
+import ContentHeader from 'components/@common/ContentHeader';
+import Navbar from 'components/@common/Navbar';
+import PetPlantCard from 'components/petPlant/PetPlantCard';
+import { SubTitle } from './PetPlantPicker.style';
+import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId';
+import usePetPlantCardList from 'hooks/queries/petPlant/usePetPlantCardList';
+import { URL_PATH } from 'constants/index';
+
+const PetPlantPicker = () => {
+  useCheckSessionId();
+  const { data: petPlantCardList } = usePetPlantCardList();
+
+  return (
+    <>
+      <ContentHeader title="모두의 정원에 기록하기" />
+      <SubTitle>반려 식물을 골라주세요.</SubTitle>
+      <Wrapper>
+        <CardList>
+          {petPlantCardList.map((petPlantItem) => (
+            <Link
+              key={petPlantItem.id}
+              to={generatePath(URL_PATH.gardenRegisterForm, { id: String(petPlantItem.id) })}
+              aria-label={`${petPlantItem.nickname} 게시글 작성하기`}
+            >
+              <PetPlantCard {...petPlantItem} />
+            </Link>
+          ))}
+        </CardList>
+      </Wrapper>
+      <Navbar />
+    </>
+  );
+};
+
+export default PetPlantPicker;
diff --git a/frontend/src/pages/PetPlantCardList/index.tsx b/frontend/src/pages/PetPlantCardList/index.tsx
index bf0cdded4..95b0ec9c5 100644
--- a/frontend/src/pages/PetPlantCardList/index.tsx
+++ b/frontend/src/pages/PetPlantCardList/index.tsx
@@ -1,7 +1,7 @@
 import { Link, generatePath } from 'react-router-dom';
 import ContentHeader from 'components/@common/ContentHeader';
 import Navbar from 'components/@common/Navbar';
-import PetCard from 'components/petPlant/PetPlantCard';
+import PetPlantCard from 'components/petPlant/PetPlantCard';
 import { CardList, RegisterButton, Wrapper } from './PetPlantCardList.style';
 import usePetPlantCardList from 'hooks/queries/petPlant/usePetPlantCardList';
 import { URL_PATH } from 'constants/index';
@@ -22,7 +22,7 @@ const PetPlantCardList = () => {
               to={generatePath(URL_PATH.petDetail, { id: String(petPlantCard.id) })}
               aria-label={`${petPlantCard.nickname} 상세로 이동`}
             >
-              <PetCard {...petPlantCard} />
+              <PetPlantCard {...petPlantCard} />
             </Link>
           ))}
         </CardList>
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 14deccf0f..5a8a1e621 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -3,6 +3,8 @@ import { createBrowserRouter } from 'react-router-dom';
 import DictionaryPlantDetail from 'pages/DictionaryPlantDetail';
 import DictionaryPlantSearch from 'pages/DictionaryPlantSearch';
 import NotFound from 'pages/Error/NotFound';
+import GardenRegisterForm from 'pages/GardenRegister/Form';
+import GardenRegisterPick from 'pages/GardenRegister/Pick';
 import Main from 'pages/Main';
 import NewDictionaryPlantRequest from 'pages/NewDictionaryPlantRequest';
 import PetPlantCardList from 'pages/PetPlantCardList';
@@ -79,6 +81,14 @@ const router = createBrowserRouter([
         path: URL_PATH.myPage,
         element: <MyPage />,
       },
+      {
+        path: URL_PATH.gardenRegisterPick,
+        element: <GardenRegisterPick />,
+      },
+      {
+        path: URL_PATH.gardenRegisterForm,
+        element: <GardenRegisterForm />,
+      },
       {
         path: URL_PATH.newDictionaryPlantRequest,
         element: <NewDictionaryPlantRequest />,
diff --git a/frontend/src/types/garden.ts b/frontend/src/types/garden.ts
index dcc5746b8..3f8d704f4 100644
--- a/frontend/src/types/garden.ts
+++ b/frontend/src/types/garden.ts
@@ -8,7 +8,7 @@ export interface GardenPostItem {
   createdAt: DateFormat;
   updatedAt: DateFormat;
   dictionaryPlantName: DictionaryPlant['name'];
-  manageLevel: Exclude<ManageLevel, '정보없음'>;
+  manageLevel: ManageLevel;
   petPlant: Pick<
     PetPlantDetails,
     | 'imageUrl'
@@ -21,3 +21,9 @@ export interface GardenPostItem {
     | 'waterCycle'
   >;
 }
+
+export interface GardenRegisterForm {
+  petPlantId: PetPlantDetails['id'];
+  content: GardenPostItem['content'];
+  manageLevel: ManageLevel;
+}
diff --git a/frontend/src/utils/validate.ts b/frontend/src/utils/validate.ts
index 51269a3f5..53d494bf4 100644
--- a/frontend/src/utils/validate.ts
+++ b/frontend/src/utils/validate.ts
@@ -1,3 +1,6 @@
+import type { ManageLevel } from 'types/dictionaryPlant';
+import { NO_INFORMATION } from 'constants/index';
+
 export const InputValidate = {
   /**
    * 값이 0~9로만 이루어진 숫자인지 확인합니다.
@@ -68,3 +71,19 @@ export const DateValidate = {
     return true;
   },
 };
+
+/**
+ * 주어진 문자열이 올바른 ManageLevel 타입인지 반환합니다.
+ * @param target 검사할 문자열
+ * @param allowNoInformation '정보없음'을 허용할지 여부를 나타내는 boolean. `default: true`
+ * @returns 입력이 '초보자', '경험자', '전문가', '정보없음' 중 하나인지 여부
+ */
+export const isValidManageLevel = (
+  target: string,
+  allowNoInformation = true
+): target is ManageLevel => {
+  const manageLevels = ['초보자', '경험자', '전문가'];
+  if (allowNoInformation) manageLevels.push(NO_INFORMATION);
+
+  return manageLevels.includes(target);
+};