diff --git a/web/src/api/piped.ts b/web/src/api/piped.ts
index ca4241fb3f..7e995e674a 100644
--- a/web/src/api/piped.ts
+++ b/web/src/api/piped.ts
@@ -22,6 +22,8 @@ import {
   ListReleasedVersionsRequest,
   RestartPipedRequest,
   RestartPipedResponse,
+  ListDeprecatedNotesRequest,
+  ListDeprecatedNotesResponse,
 } from "pipecd/web/api_client/service_pb";
 
 export const getPipeds = ({
@@ -39,6 +41,16 @@ export const listReleasedVersions = (): Promise<
   return apiRequest(req, apiClient.listReleasedVersions);
 };
 
+export const listBreakingChanges = ({
+  projectId,
+}: ListDeprecatedNotesRequest.AsObject): Promise<
+  ListDeprecatedNotesResponse.AsObject
+> => {
+  const req = new ListDeprecatedNotesRequest();
+  req.setProjectId(projectId);
+  return apiRequest(req, apiClient.listDeprecatedNotes);
+};
+
 export const registerPiped = ({
   name,
   desc,
diff --git a/web/src/components/application-detail-page/application-detail/index.test.tsx b/web/src/components/application-detail-page/application-detail/index.test.tsx
index 40c779345e..3afb7a9106 100644
--- a/web/src/components/application-detail-page/application-detail/index.test.tsx
+++ b/web/src/components/application-detail-page/application-detail/index.test.tsx
@@ -69,6 +69,7 @@ const baseState: Partial<AppState> = {
     registeredPiped: null,
     updating: false,
     releasedVersions: [],
+    breakingChangesNote: "",
   },
 };
 
diff --git a/web/src/components/applications-page/edit-application-drawer/index.test.tsx b/web/src/components/applications-page/edit-application-drawer/index.test.tsx
index f09af810e1..74277ef7fc 100644
--- a/web/src/components/applications-page/edit-application-drawer/index.test.tsx
+++ b/web/src/components/applications-page/edit-application-drawer/index.test.tsx
@@ -38,6 +38,7 @@ const initialState = {
     registeredPiped: null,
     updating: false,
     releasedVersions: [],
+    breakingChangesNote: "",
   },
   applications: {
     loading: false,
diff --git a/web/src/components/deployments-detail-page/index.test.tsx b/web/src/components/deployments-detail-page/index.test.tsx
index 0a027475a4..022daf844d 100644
--- a/web/src/components/deployments-detail-page/index.test.tsx
+++ b/web/src/components/deployments-detail-page/index.test.tsx
@@ -28,6 +28,7 @@ describe("DeploymentDetailPage", () => {
         registeredPiped: null,
         updating: false,
         releasedVersions: [],
+        breakingChangesNote: "",
       },
     });
 
diff --git a/web/src/components/settings-page/piped/index.tsx b/web/src/components/settings-page/piped/index.tsx
index 5b85b75b0c..b4dbfd8354 100644
--- a/web/src/components/settings-page/piped/index.tsx
+++ b/web/src/components/settings-page/piped/index.tsx
@@ -42,6 +42,7 @@ import {
   restartPiped,
   fetchPipeds,
   fetchReleasedVersions,
+  fetchBreakingChanges,
   Piped,
   RegisteredPiped,
   selectAllPipeds,
@@ -95,6 +96,7 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
     enabled: true,
   });
   const dispatch = useAppDispatch();
+  const projectId = useAppSelector((state) => state.project.id);
   const pipeds = useAppSelector<Piped.AsObject[]>((state) =>
     selectFilteredPipeds(state, filterValues)
   );
@@ -103,10 +105,22 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
     dispatch(fetchReleasedVersions());
   }, [dispatch]);
 
+  useEffect(() => {
+    if (projectId) {
+      dispatch(fetchBreakingChanges({ projectId: projectId }));
+    }
+  }, [dispatch, projectId]);
+
   const releasedVersions = useAppSelector<string[]>(
     (state) => state.pipeds.releasedVersions
   );
 
+  const breakingChangesNote = useAppSelector<string | null>(
+    (state) => state.pipeds.breakingChangesNote
+  );
+  // TODO: Remove this console.log
+  console.log("[DEBUG]", breakingChangesNote);
+
   const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false);
   const handleUpgradeDialogClose = (): void => setIsUpgradeDialogOpen(false);
 
diff --git a/web/src/modules/pipeds/index.test.ts b/web/src/modules/pipeds/index.test.ts
index 570b2c1fe8..d2e6404a1c 100644
--- a/web/src/modules/pipeds/index.test.ts
+++ b/web/src/modules/pipeds/index.test.ts
@@ -14,6 +14,7 @@ const baseState = {
   registeredPiped: null,
   updating: false,
   releasedVersions: [],
+  breakingChangesNote: "",
 };
 
 describe("pipedsSlice reducer", () => {
diff --git a/web/src/modules/pipeds/index.ts b/web/src/modules/pipeds/index.ts
index 96ca67d011..68cb9c93a7 100644
--- a/web/src/modules/pipeds/index.ts
+++ b/web/src/modules/pipeds/index.ts
@@ -37,6 +37,16 @@ export const fetchReleasedVersions = createAsyncThunk<string[]>(
   }
 );
 
+export const fetchBreakingChanges = createAsyncThunk<
+  string,
+  { projectId: string }
+>(`${MODULE_NAME}/fetchBreakingChanges`, async (props) => {
+  const { notes } = await pipedsApi.listBreakingChanges({
+    projectId: props.projectId,
+  });
+  return notes;
+});
+
 export const fetchPipeds = createAsyncThunk<Piped.AsObject[], boolean>(
   `${MODULE_NAME}/fetchList`,
   async (withStatus: boolean) => {
@@ -120,10 +130,12 @@ export const pipedsSlice = createSlice({
     registeredPiped: RegisteredPiped | null;
     updating: boolean;
     releasedVersions: string[];
+    breakingChangesNote: string;
   }>({
     registeredPiped: null,
     updating: false,
     releasedVersions: [],
+    breakingChangesNote: "",
   }),
   reducers: {
     clearRegisteredPipedInfo(state) {
@@ -157,6 +169,9 @@ export const pipedsSlice = createSlice({
       })
       .addCase(fetchReleasedVersions.fulfilled, (state, action) => {
         state.releasedVersions = action.payload;
+      })
+      .addCase(fetchBreakingChanges.fulfilled, (state, action) => {
+        state.breakingChangesNote = action.payload;
       });
   },
 });