diff --git a/src/app/diary/[id]/loading.tsx b/src/app/diary/[id]/loading.tsx
index c3f25c0a..2e5e7ade 100644
--- a/src/app/diary/[id]/loading.tsx
+++ b/src/app/diary/[id]/loading.tsx
@@ -1,10 +1,15 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import DiaryViewerSkeleton from "@/components/skeleton/diary/detail/DiaryViewerSkeleton";
 
 export default function Loading() {
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="여행 일기" second="일기 상세" />
+      <Breadcrumbs
+        categories={[
+          { label: "여행 일기", href: "/diary/list" },
+          { label: "일기 상세", href: "" },
+        ]}
+      />
       <DiaryViewerSkeleton />
     </div>
   );
diff --git a/src/app/diary/[id]/page.tsx b/src/app/diary/[id]/page.tsx
index 3045cb4b..6ed5b9d5 100644
--- a/src/app/diary/[id]/page.tsx
+++ b/src/app/diary/[id]/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import DiaryViewerContainer from "@/containers/diary/detail/DiaryViewerContainer";
 import { GetDiaryResponseDto } from "@/types/DiaryDto";
 import { cookies } from "next/headers";
@@ -46,7 +46,12 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="여행 일기" second="일기 상세" />
+      <Breadcrumbs
+        categories={[
+          { label: "여행 일기", href: "/diary/list" },
+          { label: "일기 상세", href: "" },
+        ]}
+      />
       <DiaryViewerContainer data={data} />
     </div>
   );
diff --git a/src/app/diary/edit/[id]/page.tsx b/src/app/diary/edit/[id]/page.tsx
index 5977df65..ee016f79 100644
--- a/src/app/diary/edit/[id]/page.tsx
+++ b/src/app/diary/edit/[id]/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import DiaryEditorContainer from "@/containers/diary/edit/DiaryEditorContainer";
 import { GetDiaryResponseDto } from "@/types/DiaryDto";
 import { cookies } from "next/headers";
@@ -46,7 +46,12 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="여행 일기" second="일기 수정하기" />
+      <Breadcrumbs
+        categories={[
+          { label: "여행 일기", href: "/diary/list" },
+          { label: "일기 수정하기", href: "" },
+        ]}
+      />
       <DiaryEditorContainer diaryData={data} />
     </div>
   );
diff --git a/src/app/diary/write/page.tsx b/src/app/diary/write/page.tsx
index 0ec8152c..e256131a 100644
--- a/src/app/diary/write/page.tsx
+++ b/src/app/diary/write/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import DiaryEditorContainer from "@/containers/diary/write/DiaryEditorContainer";
 import { Metadata } from "next";
 
@@ -10,7 +10,12 @@ export const metadata: Metadata = {
 export default function page() {
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="여행 일기" second="일기 등록하기" />
+      <Breadcrumbs
+        categories={[
+          { label: "여행 일기", href: "/diary/list" },
+          { label: "일기 등록하기", href: "" },
+        ]}
+      />
       <DiaryEditorContainer />
     </div>
   );
diff --git a/src/app/gathering/write/page.tsx b/src/app/gathering/write/page.tsx
index eccf6beb..d1a5a434 100644
--- a/src/app/gathering/write/page.tsx
+++ b/src/app/gathering/write/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function page() {
   return (
-    <div className={"min-h-[calc(100vh-25rem)] w-full pb-[2rem] pt-[2rem]"}>
+    <div className={"min-h-[calc(100vh-25rem)] w-full pb-[2rem]"}>
       <GatheringWriteContainer />
     </div>
   );
diff --git a/src/app/informations/(detail)/[id]/loading.tsx b/src/app/informations/(detail)/[id]/loading.tsx
index 64ae5258..8a9a51a1 100644
--- a/src/app/informations/(detail)/[id]/loading.tsx
+++ b/src/app/informations/(detail)/[id]/loading.tsx
@@ -1,11 +1,19 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationViewerSkeleton from "@/components/skeleton/informations/detail/InformationViewerSkeleton";
 import RecommendationListSkeleton from "@/components/skeleton/informations/detail/RecommendationListSkeleton";
 
 export default function Loading() {
   return (
     <div className="flex flex-col items-center">
-      <PagePath first="정보" second="정보 상세" />
+      <Breadcrumbs
+        categories={[
+          {
+            label: "정보",
+            href: "/informations/list?page=1&parentCategoryId=1",
+          },
+          { label: "정보 상세", href: "" },
+        ]}
+      />
       <InformationViewerSkeleton />
       <RecommendationListSkeleton />
     </div>
diff --git a/src/app/informations/(detail)/[id]/page.tsx b/src/app/informations/(detail)/[id]/page.tsx
index 6b58c810..621aab36 100644
--- a/src/app/informations/(detail)/[id]/page.tsx
+++ b/src/app/informations/(detail)/[id]/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationViewer from "@/components/informations/detail/InformationViewer";
 import RecommendationList from "@/components/informations/detail/RecommendationList";
 import { InformationDetailDto } from "@/types/InformationDto";
@@ -51,7 +51,15 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="정보" second="정보 상세" />
+      <Breadcrumbs
+        categories={[
+          {
+            label: "정보",
+            href: "/informations/list?page=1&parentCategoryId=1",
+          },
+          { label: "정보 상세", href: "" },
+        ]}
+      />
       <InformationViewer informationId={informationId} data={data} />
       <RecommendationList data={data} />
     </div>
diff --git a/src/app/informations/edit/[id]/page.tsx b/src/app/informations/edit/[id]/page.tsx
index 8162c645..57362848 100644
--- a/src/app/informations/edit/[id]/page.tsx
+++ b/src/app/informations/edit/[id]/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationEditorContainer from "@/containers/informations/edit/InformationEditorContainer";
 import { InformationDetailDto } from "@/types/InformationDto";
 
@@ -45,7 +45,15 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex flex-col items-center">
-      <PagePath first="정보" second="정보 수정하기" />
+      <Breadcrumbs
+        categories={[
+          {
+            label: "정보",
+            href: "/informations/list?page=1&parentCategoryId=1",
+          },
+          { label: "정보 수정하기", href: "" },
+        ]}
+      />
       <InformationEditorContainer informationId={informationId} data={data} />
     </div>
   );
diff --git a/src/app/informations/write/page.tsx b/src/app/informations/write/page.tsx
index dbc1c405..07ece1d8 100644
--- a/src/app/informations/write/page.tsx
+++ b/src/app/informations/write/page.tsx
@@ -1,4 +1,4 @@
-import PagePath from "@/components/common/PagePath";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationEditorContainer from "@/containers/informations/write/InformationEditorContainer";
 import { Metadata } from "next";
 
@@ -10,7 +10,15 @@ export const metadata: Metadata = {
 export default function page() {
   return (
     <div className="flex w-full flex-col items-center">
-      <PagePath first="정보" second={"정보 등록하기"} />
+      <Breadcrumbs
+        categories={[
+          {
+            label: "정보",
+            href: "/informations/list?page=1&parentCategoryId=1",
+          },
+          { label: "정보 등록하기", href: "" },
+        ]}
+      />
       <InformationEditorContainer />
     </div>
   );
diff --git a/src/components/common/Breadcrumb.tsx b/src/components/common/Breadcrumb.tsx
index 30ecd109..09a8a579 100644
--- a/src/components/common/Breadcrumb.tsx
+++ b/src/components/common/Breadcrumb.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { FC } from "react";
+import { IoIosArrowForward } from "react-icons/io";
 
 interface Category {
   label: string;
@@ -20,37 +21,31 @@ interface BreadcrumbsProps {
       { label: "질문 등록하기", href: "" },
     ];
 */
-    
 
-const Breadcrumbs: FC<BreadcrumbsProps> = ({
-  categories,
-}) => {
+const Breadcrumbs: FC<BreadcrumbsProps> = ({ categories }) => {
   return (
-      <nav className="flex items-center gap-[.5rem] text-[0.75rem] text-gray2 mb-4">
-        <div className="text-gray1">
-          <Link href={"/"}>
-            <Image
-              src={"/home-icon.svg"}
-              alt={"home-icon-image"}
-              width={10}
-              height={10}
-            />
-          </Link>
+    <nav className="flex w-full items-center gap-[.25rem] py-10 text-xs text-gray2">
+      <div className="text-gray1">
+        <Link href={"/"}>
+          <Image
+            src={"/home-icon.svg"}
+            alt={"home-icon-image"}
+            width={12}
+            height={12}
+          />
+        </Link>
+      </div>
+      {categories.map((i, index) => (
+        <div key={index} className={"flex flex-row items-center gap-[.25rem]"}>
+          <IoIosArrowForward />
+          {categories.length == index + 1 ? (
+            <span className="font-semibold text-gray1"> {i.label} </span>
+          ) : (
+            <Link href={i.href}> {i.label} </Link>
+          )}
         </div>
-        {
-        categories.map((i,index) => 
-            <div className={"flex gap-[.5rem]"}>
-                <div> {">"} </div>
-                {
-              categories.length == index + 1 ? 
-              <span className="text-black font-semibold"> {i.label} </span>
-              :
-              <Link href={i.href}> {i.label} </Link>
-                }
-            </div>
-        )    
-        }
-      </nav>
+      ))}
+    </nav>
   );
 };
 
diff --git a/src/components/common/PagePath.tsx b/src/components/common/PagePath.tsx
deleted file mode 100644
index 1c01d53a..00000000
--- a/src/components/common/PagePath.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IoIosArrowForward } from "react-icons/io";
-import { IoHome } from "react-icons/io5";
-
-interface Props {
-  first: string;
-  second: string;
-}
-
-const PagePath = ({ first, second }: Props) => {
-  return (
-    <div className="flex w-full flex-row items-center gap-1 py-10 text-xs font-medium text-gray2 dark:text-slate-400">
-      <IoHome />
-      <IoIosArrowForward />
-      <p>{first}</p>
-      <IoIosArrowForward />
-      <p className="font-semibold text-gray1 dark:text-slate-200">{second}</p>
-    </div>
-  );
-};
-
-export default PagePath;
diff --git a/src/components/gathering/editor/GatheringEditor.tsx b/src/components/gathering/editor/GatheringEditor.tsx
index 82fc6bb5..17b7e354 100644
--- a/src/components/gathering/editor/GatheringEditor.tsx
+++ b/src/components/gathering/editor/GatheringEditor.tsx
@@ -12,6 +12,7 @@ import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import { useFormContext } from "react-hook-form";
 import GatheringEditorTimeContainer from "./GatheringEditorTimeContainer";
+import Breadcrumbs from "@/components/common/Breadcrumb";
 
 interface IGatheringEditorEditProps {
   isEdit: true;
@@ -35,28 +36,14 @@ const GatheringEditor = (props: IGatheringEditorProps) => {
 
   return (
     <div className={"flex w-full max-w-[60rem] flex-col"}>
-      <div className="flex gap-[.25rem] text-[.625rem] text-gray2">
-        <div className="text-gray1">
-          <Link href={"/"}>
-            <Image
-              src={"/home-icon.svg"}
-              alt={"home-icon-image"}
-              width={10}
-              height={10}
-            />
-          </Link>
-        </div>
-        <div> {">"} </div>
-        <div>
-          <Link href={"/gathering"}> 모임 </Link>
-        </div>
-        <div> {">"} </div>
-        <div className={"font-bold text-gray1"}>
-          {props.isEdit ? "모임 수정하기" : "모임 등록하기"}
-        </div>
-      </div>
+      <Breadcrumbs
+        categories={[
+          { label: "모임", href: "/gathering" },
+          { label: props.isEdit ? "모임 수정하기" : "모임 등록하기", href: "" },
+        ]}
+      />
       <div className="flex flex-col gap-[1.5rem]">
-        <h1 className={"pt-[2.25rem] text-3xl font-semibold"}>
+        <h1 className={"text-3xl font-semibold"}>
           {props.isEdit ? "모임 수정하기" : "모임 등록하기"}
         </h1>
         <p>