diff --git a/pkg/app/web/src/__fixtures__/dummy-application.ts b/pkg/app/web/src/__fixtures__/dummy-application.ts
index 1339d25ac2..71e246d509 100644
--- a/pkg/app/web/src/__fixtures__/dummy-application.ts
+++ b/pkg/app/web/src/__fixtures__/dummy-application.ts
@@ -9,7 +9,17 @@ export const dummyApplication: Application = {
   createdAt: 0,
   disabled: false,
   envId: dummyEnv.id,
-  gitPath: { configPath: "", configFilename: "", path: "dir/dir1", repoId: "repo-1", url: "" },
+  gitPath: {
+    configPath: "",
+    configFilename: "",
+    path: "dir/dir1",
+    url: "",
+    repo: {
+      id: "repo-1",
+      branch: "master",
+      remote: "xxx",
+    },
+  },
   kind: ApplicationKind.KUBERNETES,
   name: "DemoApp",
   pipedId: dummyPiped.id,
diff --git a/pkg/app/web/src/__fixtures__/dummy-deployment.ts b/pkg/app/web/src/__fixtures__/dummy-deployment.ts
index 8ab79d0e32..4113aa6faf 100644
--- a/pkg/app/web/src/__fixtures__/dummy-deployment.ts
+++ b/pkg/app/web/src/__fixtures__/dummy-deployment.ts
@@ -34,7 +34,17 @@ export const dummyDeployment: Deployment = {
   createdAt: 1,
   summary: "description",
   envId: dummyEnv.id,
-  gitPath: { configPath: "", configFilename: "", path: "", repoId: "", url: "" },
+  gitPath: {
+    configPath: "",
+    configFilename: "",
+    path: "",
+    url: "",
+    repo: {
+      id: "repo-1",
+      branch: "master",
+      remote: "xxx",
+    },
+  },
   kind: ApplicationKind.KUBERNETES,
   metadataMap: [],
 };
diff --git a/pkg/app/web/src/__fixtures__/dummy-piped.ts b/pkg/app/web/src/__fixtures__/dummy-piped.ts
index c347d12db6..5589239787 100644
--- a/pkg/app/web/src/__fixtures__/dummy-piped.ts
+++ b/pkg/app/web/src/__fixtures__/dummy-piped.ts
@@ -1,4 +1,4 @@
-import { Piped } from "../modules/pipeds";
+import { Piped, PipedModel } from "../modules/pipeds";
 
 export const dummyPiped: Piped = {
   cloudProvidersList: [],
@@ -8,9 +8,10 @@ export const dummyPiped: Piped = {
   id: "piped-1",
   name: "demo piped",
   projectId: "project-1",
-  repositoryIdsList: [],
+  repositoriesList: [],
   startedAt: 0,
   updatedAt: 0,
   version: "v0.1",
-  status: Piped_ONLINE,
+  status: PipedModel.ConnectionStatus.ONLINE,
+  keyHash: "12345",
 };
diff --git a/pkg/app/web/src/components/application-detail.stories.tsx b/pkg/app/web/src/components/application-detail.stories.tsx
index f6fc52287d..3f3b8e9531 100644
--- a/pkg/app/web/src/components/application-detail.stories.tsx
+++ b/pkg/app/web/src/components/application-detail.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { ApplicationSyncStatus } from "../../../../../bazel-bin/pkg/app/web/model/application_pb";
+import { ApplicationSyncStatus } from "pipe/pkg/app/web/model/application_pb";
 import { createStore } from "../../.storybook/redux-decorator";
 import { dummyApplication } from "../__fixtures__/dummy-application";
 import { dummyApplicationLiveState } from "../__fixtures__/dummy-application-live-state";
@@ -17,6 +17,7 @@ const dummyStore: Partial<AppState> = {
     syncing: {},
     disabling: {},
     adding: false,
+    loading: false,
   },
   environments: {
     entities: {
diff --git a/pkg/app/web/src/components/application-detail.tsx b/pkg/app/web/src/components/application-detail.tsx
index 2e0f8d4966..25830c0411 100644
--- a/pkg/app/web/src/components/application-detail.tsx
+++ b/pkg/app/web/src/components/application-detail.tsx
@@ -196,7 +196,9 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
 
           <LabeledText
             label="Git Path"
-            value={`${app.gitPath.repo !== undefined ? app.gitPath.repo.id : ""} - ${app.gitPath.path}${app.gitPath.configFilename}`}
+            value={`${
+              app.gitPath.repo !== undefined ? app.gitPath.repo.id : ""
+            } - ${app.gitPath.path}${app.gitPath.configFilename}`}
           />
         </div>
 
diff --git a/pkg/app/web/src/components/login-form.stories.tsx b/pkg/app/web/src/components/login-form.stories.tsx
index 4d8b370065..bc22cf76c3 100644
--- a/pkg/app/web/src/components/login-form.stories.tsx
+++ b/pkg/app/web/src/components/login-form.stories.tsx
@@ -1,9 +1,11 @@
 import React from "react";
 import { LoginForm } from "./login-form";
+import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 
 export default {
   title: "LoginForm",
   component: LoginForm,
+  decorators: [createDecoratorRedux({})],
 };
 
 export const overview: React.FC = () => <LoginForm />;
diff --git a/pkg/app/web/src/components/pipeline.stories.tsx b/pkg/app/web/src/components/pipeline.stories.tsx
index d57415adf4..26735738d1 100644
--- a/pkg/app/web/src/components/pipeline.stories.tsx
+++ b/pkg/app/web/src/components/pipeline.stories.tsx
@@ -20,7 +20,12 @@ const fakeDeployment: Deployment = {
   projectId: "debug-project",
   kind: 0,
   gitPath: {
-    repoId: "pipe-debug",
+    configPath: "",
+    repo: {
+      id: "pipe-debug",
+      branch: "master",
+      remote: "xxx",
+    },
     path: "k8s",
     configFilename: "",
     url: "",
diff --git a/pkg/app/web/src/modules/pipeds.ts b/pkg/app/web/src/modules/pipeds.ts
index c13854dd70..11d723f54b 100644
--- a/pkg/app/web/src/modules/pipeds.ts
+++ b/pkg/app/web/src/modules/pipeds.ts
@@ -91,3 +91,4 @@ export const pipedsSlice = createSlice({
 });
 
 export const { clearRegisteredPipedInfo } = pipedsSlice.actions;
+export { Piped as PipedModel } from "pipe/pkg/app/web/model/piped_pb";