diff --git a/.github/workflows/e2eTests.yml b/.github/workflows/e2eTests.yml
new file mode 100644
index 00000000..a5d67c4b
--- /dev/null
+++ b/.github/workflows/e2eTests.yml
@@ -0,0 +1,29 @@
+name: E2E Tests - Playwright
+on:
+  pull_request:
+    branches: [main, master]
+jobs:
+  tests:
+    timeout-minutes: 600
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./packages/view
+    steps:
+      - uses: actions/checkout@v2  # v3 is not available as of my last update in January 2022
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.16.0
+
+      # Add Playwright GitHub Action
+      - name: Setup Playwright
+        uses: microsoft/playwright-github-action@v1
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: npx playwright install
+        run: npx playwright install
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
diff --git a/package-lock.json b/package-lock.json
index 9e0e1cc4..9de92fed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30434,7 +30434,7 @@
         "typescript": "^4.7.4",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "*",
+        "webpack-dev-server": "^4.15.1",
         "webpack-merge": "^5.8.0",
         "yarn": "^1.22.19"
       },
diff --git a/packages/view/src/App.tsx b/packages/view/src/App.tsx
index ee75c9b7..29e5da71 100644
--- a/packages/view/src/App.tsx
+++ b/packages/view/src/App.tsx
@@ -20,24 +20,24 @@ import type { IDESentEvents } from "types/IDESentEvents";
 const App = () => {
   const initRef = useRef<boolean>(false);
 
-  const { filteredData, fetchAnalyzedData, fetchBranchList, loading, setLoading } = useGlobalData();
+  const { filteredData, handleChangeAnalyzedData, handleChangeBranchList, loading, setLoading } = useGlobalData();
 
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
 
   useEffect(() => {
     if (initRef.current === false) {
       const callbacks: IDESentEvents = {
-        fetchAnalyzedData,
-        fetchBranchList,
+        handleChangeAnalyzedData,
+        handleChangeBranchList,
       };
 
       setLoading(true);
       ideAdapter.addIDESentEventListener(callbacks);
       ideAdapter.sendFetchAnalyzedDataMessage();
-      ideAdapter.sendGetBranchListMessage();
+      ideAdapter.sendFetchBranchListMessage();
       initRef.current = true;
     }
-  }, [fetchBranchList, fetchAnalyzedData, ideAdapter, setLoading]);
+  }, [handleChangeAnalyzedData, handleChangeBranchList, ideAdapter, setLoading]);
 
   if (loading) {
     return (
diff --git a/packages/view/src/components/BranchSelector/BranchSelector.tsx b/packages/view/src/components/BranchSelector/BranchSelector.tsx
index 1d9d45fb..bb58d927 100644
--- a/packages/view/src/components/BranchSelector/BranchSelector.tsx
+++ b/packages/view/src/components/BranchSelector/BranchSelector.tsx
@@ -2,12 +2,15 @@ import { type ChangeEventHandler } from "react";
 import "./BranchSelector.scss";
 
 import { useGlobalData } from "hooks";
+import { sendFetchAnalyzedDataCommand } from "services";
 
 const BranchSelector = () => {
-  const { branchList, selectedBranch } = useGlobalData();
+  const { branchList, selectedBranch, setSelectedBranch, setLoading } = useGlobalData();
+
   const handleChangeSelect: ChangeEventHandler<HTMLSelectElement> = (e) => {
-    // TODO - webview로 선택된 branch을 payload에 실어 sendFetchAnalyzedDataCommand 호출
-    console.log(e.target.value);
+    setSelectedBranch(e.target.value);
+    setLoading(true);
+    sendFetchAnalyzedDataCommand(e.target.value);
   };
 
   return (
@@ -18,7 +21,7 @@ const BranchSelector = () => {
         onChange={handleChangeSelect}
         value={selectedBranch}
       >
-        {branchList.map((option) => (
+        {branchList?.map((option) => (
           <option
             key={option}
             value={option}
diff --git a/packages/view/src/components/RefreshButton/RefreshButton.tsx b/packages/view/src/components/RefreshButton/RefreshButton.tsx
index 9c3ac2a9..d066e4ac 100644
--- a/packages/view/src/components/RefreshButton/RefreshButton.tsx
+++ b/packages/view/src/components/RefreshButton/RefreshButton.tsx
@@ -1,22 +1,19 @@
 import "reflect-metadata";
 import cn from "classnames";
-import { container } from "tsyringe";
 import { FiRefreshCcw } from "react-icons/fi";
 
 import { throttle } from "utils";
-import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
 
 import "./RefreshButton.scss";
+import { sendRefreshDataCommand } from "services";
 
 const RefreshButton = () => {
-  const { loading, setLoading } = useGlobalData();
+  const { loading, setLoading, selectedBranch } = useGlobalData();
 
   const refreshHandler = throttle(() => {
     setLoading(true);
-
-    const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
-    ideAdapter.sendFetchAnalyzedDataMessage();
+    sendRefreshDataCommand(selectedBranch);
   }, 3000);
 
   return (
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.const.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.const.ts
index 975f698c..8f4f1cc2 100644
--- a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.const.ts
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.const.ts
@@ -1,9 +1,11 @@
+import type { SVGMargin } from "./ClusterGraph.type";
+
 export const NODE_GAP = 10;
 export const CLUSTER_HEIGHT = 40;
 export const DETAIL_HEIGHT = 220;
 export const GRAPH_WIDTH = 80;
 export const SVG_WIDTH = GRAPH_WIDTH + 4;
-export const SVG_MARGIN = {
+export const SVG_MARGIN: SVGMargin = {
   right: 2,
   left: 2,
   top: 10,
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.hook.tsx b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.hook.tsx
index 51ff52b1..4cbcc96a 100644
--- a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.hook.tsx
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.hook.tsx
@@ -8,49 +8,9 @@ import type { ClusterNode } from "types";
 import { selectedDataUpdater } from "../VerticalClusterList.util";
 
 import { CLUSTER_HEIGHT, DETAIL_HEIGHT, GRAPH_WIDTH, NODE_GAP, SVG_MARGIN } from "./ClusterGraph.const";
-import type { ClusterGraphElement, SVGElementSelection } from "./ClusterGraph.type";
-import { getClusterPosition } from "./ClusterGraph.util";
-
-const drawClusterBox = (container: SVGElementSelection<SVGGElement>) => {
-  container
-    .append("rect")
-    .attr("class", "cluster-graph__cluster")
-    .attr("width", GRAPH_WIDTH)
-    .attr("height", CLUSTER_HEIGHT);
-};
-
-const drawDegreeBox = (container: SVGElementSelection<SVGGElement>) => {
-  const widthScale = d3.scaleLinear().range([0, GRAPH_WIDTH]).domain([0, 10]);
-  container
-    .append("rect")
-    .attr("class", "cluster-graph__degree")
-    .attr("width", (d) => widthScale(Math.min(d.clusterSize, 10)))
-    .attr("height", CLUSTER_HEIGHT)
-    .attr("x", (d) => (GRAPH_WIDTH - widthScale(Math.min(d.clusterSize, 10))) / 2);
-};
-
-const drawLink = (svgRef: RefObject<SVGSVGElement>, data: ClusterGraphElement[], detailElementHeight: number) => {
-  d3.select(svgRef.current)
-    .selectAll(".cluster-graph__link")
-    .data([
-      {
-        start: SVG_MARGIN.top,
-        end: (CLUSTER_HEIGHT + NODE_GAP) * data.length,
-        selected: {
-          prev: data[0].selected.prev,
-          current: data[0].selected.current,
-        },
-      },
-    ])
-    .join("line")
-    .attr("class", "cluster-graph__link")
-    .attr("x1", SVG_MARGIN.left + GRAPH_WIDTH / 2)
-    .attr("y1", (d) => d.start)
-    .attr("x2", SVG_MARGIN.left + GRAPH_WIDTH / 2)
-    .attr("y2", (d) => d.end + d.selected.prev.length * detailElementHeight)
-    .transition()
-    .attr("y2", (d) => d.end + d.selected.current.length * detailElementHeight);
-};
+import type { ClusterGraphElement } from "./ClusterGraph.type";
+import { destroyClusterGraph, drawClusterBox, drawCommitAmountCluster, drawTotalLine } from "./Draws";
+import { getTranslateAfterSelect } from "./ClusterGraph.util";
 
 const drawClusterGraph = (
   svgRef: RefObject<SVGSVGElement>,
@@ -65,26 +25,24 @@ const drawClusterGraph = (
     .join("g")
     .on("click", onClickCluster)
     .attr("class", "cluster-graph__container")
-    .attr("transform", (d, i) => getClusterPosition(d, i, detailElementHeight, true));
+    .attr("transform", (d, i) => getTranslateAfterSelect(d, i, detailElementHeight, true));
 
-  group.append("title").text((d) => d.clusterSize);
+  group.append("title").text((_, i) => `${i + 1}번째 container`);
 
   group
     .transition()
     .duration(0)
-    .attr("transform", (d, i) => getClusterPosition(d, i, detailElementHeight));
+    .attr("transform", (d, i) => getTranslateAfterSelect(d, i, detailElementHeight));
 
-  drawLink(svgRef, data, detailElementHeight);
-  drawClusterBox(group);
-  drawDegreeBox(group);
+  drawTotalLine(svgRef, data, detailElementHeight, SVG_MARGIN, CLUSTER_HEIGHT, NODE_GAP, GRAPH_WIDTH);
+  drawClusterBox(group, GRAPH_WIDTH, CLUSTER_HEIGHT);
+  drawCommitAmountCluster(group, GRAPH_WIDTH, CLUSTER_HEIGHT);
 };
 
-const destroyClusterGraph = (target: RefObject<SVGElement>) => d3.select(target.current).selectAll("*").remove();
-
 export const useHandleClusterGraph = ({
+  data,
   clusterSizes,
   selectedIndex,
-  data,
   setSelectedData,
 }: {
   clusterSizes: number[];
@@ -111,6 +69,7 @@ export const useHandleClusterGraph = ({
   );
   useEffect(() => {
     drawClusterGraph(svgRef, clusterGraphElements, DETAIL_HEIGHT, handleClickCluster);
+
     prevSelected.current = selectedIndex;
     return () => {
       destroyClusterGraph(svgRef);
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss
index 6e3dc778..1b144bde 100644
--- a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss
@@ -2,25 +2,25 @@
   cursor: pointer;
 
   &:hover {
-    .cluster-graph__cluster {
+    .cluster-graph-container__box {
       stroke-width: 3;
     }
   }
 
-  .cluster-graph__cluster {
+  .cluster-graph-container__box {
     rx: 5;
     stroke-width: 1;
     stroke: var(--primary-color);
     fill: transparent;
   }
 
-  .cluster-graph__degree {
+  .cluster-graph-container__commit-amount-cluster {
     rx: 5;
     fill: var(--primary-color);
   }
 }
 
-.cluster-graph__link {
+.cluster-graph__total-line {
   stroke: var(--primary-color);
   stroke-width: 1;
 }
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.type.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.type.ts
index abc08898..aaa7e60e 100644
--- a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.type.ts
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.type.ts
@@ -17,3 +17,5 @@ export type SVGElementSelection<T extends BaseType> = Selection<
   SVGSVGElement | null,
   unknown
 >;
+
+export type SVGMargin = { [key: string]: number };
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.test.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.test.ts
index 677b8ef6..27156c75 100644
--- a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.test.ts
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.test.ts
@@ -1,6 +1,6 @@
 import { fakeFirstClusterNode, fakePrev, fakePrev2, fakePrev3, fakePrev4 } from "../../../../tests/fakeAsset";
 
-import { getClusterSizes, getGraphHeight, getClusterPosition, getSelectedIndex } from "./ClusterGraph.util";
+import { getClusterSizes, getGraphHeight, getTranslateAfterSelect, getSelectedIndex } from "./ClusterGraph.util";
 import type { ClusterGraphElement } from "./ClusterGraph.type";
 
 const getClusterSizesResult = getClusterSizes(fakePrev);
@@ -41,9 +41,9 @@ const fakeClusterGraphElement: ClusterGraphElement = {
 };
 
 test("getClusterPosition", () => {
-  const resultPrev = getClusterPosition(fakeClusterGraphElement, 1, 1, true);
-  const resultCurrent = getClusterPosition(fakeClusterGraphElement, 1, 6, false);
-  const resultDiffI = getClusterPosition(fakeClusterGraphElement, 2, 3, true);
+  const resultPrev = getTranslateAfterSelect(fakeClusterGraphElement, 1, 1, true);
+  const resultCurrent = getTranslateAfterSelect(fakeClusterGraphElement, 1, 6, false);
+  const resultDiffI = getTranslateAfterSelect(fakeClusterGraphElement, 2, 3, true);
   expect(resultPrev).toBe("translate(2, 61)");
   expect(resultCurrent).toBe("translate(2, 60)");
   expect(resultDiffI).toBe("translate(2, 116)");
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.ts
index 41f20575..643bfef3 100644
--- a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.ts
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.ts
@@ -11,7 +11,12 @@ export function getGraphHeight(clusterSizes: number[]) {
   return clusterSizes.length * CLUSTER_HEIGHT + clusterSizes.length * NODE_GAP + NODE_GAP;
 }
 
-export function getClusterPosition(d: ClusterGraphElement, i: number, detailElementHeight: number, isPrev = false) {
+export function getTranslateAfterSelect(
+  d: ClusterGraphElement,
+  i: number,
+  detailElementHeight: number,
+  isPrev = false
+) {
   const selected = isPrev ? d.selected.prev : d.selected.current;
   const selectedLength = selected.filter((selectedIdx) => selectedIdx < i).length;
   const margin = selectedLength * detailElementHeight;
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/destroyClusterGraph.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/destroyClusterGraph.ts
new file mode 100644
index 00000000..6b9fbcda
--- /dev/null
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/destroyClusterGraph.ts
@@ -0,0 +1,4 @@
+import type { RefObject } from "react";
+import * as d3 from "d3";
+
+export const destroyClusterGraph = (target: RefObject<SVGElement>) => d3.select(target.current).selectAll("*").remove();
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawClusterBox.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawClusterBox.ts
new file mode 100644
index 00000000..3d2b013d
--- /dev/null
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawClusterBox.ts
@@ -0,0 +1,13 @@
+import type { SVGElementSelection } from "../ClusterGraph.type";
+
+export const drawClusterBox = (
+  container: SVGElementSelection<SVGGElement>,
+  graphWidth: number,
+  clusterHeight: number
+) => {
+  container
+    .append("rect")
+    .attr("class", "cluster-graph-container__box")
+    .attr("width", graphWidth)
+    .attr("height", clusterHeight);
+};
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawCommitAmountCluster.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawCommitAmountCluster.ts
new file mode 100644
index 00000000..5785be51
--- /dev/null
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawCommitAmountCluster.ts
@@ -0,0 +1,17 @@
+import * as d3 from "d3";
+
+import type { SVGElementSelection } from "../ClusterGraph.type";
+
+export const drawCommitAmountCluster = (
+  container: SVGElementSelection<SVGGElement>,
+  graphHeight: number,
+  clusterHeight: number
+) => {
+  const widthScale = d3.scaleLinear().range([0, graphHeight]).domain([0, 10]);
+  container
+    .append("rect")
+    .attr("class", "cluster-graph-container__commit-amount-cluster")
+    .attr("width", (d) => widthScale(Math.min(d.clusterSize, 10)))
+    .attr("height", clusterHeight)
+    .attr("x", (d) => (graphHeight - widthScale(Math.min(d.clusterSize, 10))) / 2);
+};
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawTotalLine.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawTotalLine.ts
new file mode 100644
index 00000000..ea8870e1
--- /dev/null
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawTotalLine.ts
@@ -0,0 +1,37 @@
+import type { RefObject } from "react";
+import * as d3 from "d3";
+
+import type { ClusterGraphElement, SVGMargin } from "../ClusterGraph.type";
+
+export const drawTotalLine = (
+  svgRef: RefObject<SVGSVGElement>,
+  data: ClusterGraphElement[],
+  detailElementHeight: number,
+  svgMargin: SVGMargin,
+  clusterHeight: number,
+  nodeGap: number,
+  graphWidth: number
+) => {
+  const lineData = [
+    {
+      start: svgMargin.top,
+      end: (clusterHeight + nodeGap) * data.length,
+      selected: {
+        prev: data[0].selected.prev,
+        current: data[0].selected.current,
+      },
+    },
+  ];
+
+  d3.select(svgRef.current)
+    .selectAll(".cluster-graph__total-line")
+    .data(lineData)
+    .join("line")
+    .attr("class", "cluster-graph__total-line")
+    .attr("x1", svgMargin.left + graphWidth / 2)
+    .attr("y1", (d) => d.start)
+    .attr("x2", svgMargin.left + graphWidth / 2)
+    .attr("y2", (d) => d.end + d.selected.prev.length * detailElementHeight)
+    .transition()
+    .attr("y2", (d) => d.end + d.selected.current.length * detailElementHeight);
+};
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/index.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/index.ts
new file mode 100644
index 00000000..cd6a89ff
--- /dev/null
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/index.ts
@@ -0,0 +1,4 @@
+export * from "./drawClusterBox";
+export * from "./drawCommitAmountCluster";
+export * from "./drawTotalLine";
+export * from "./destroyClusterGraph";
diff --git a/packages/view/src/context/GlobalDataProvider.tsx b/packages/view/src/context/GlobalDataProvider.tsx
index 96db1f8c..6a3ace09 100644
--- a/packages/view/src/context/GlobalDataProvider.tsx
+++ b/packages/view/src/context/GlobalDataProvider.tsx
@@ -13,14 +13,14 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
   const [filteredRange, setFilteredRange] = useState<DateFilterRange>(undefined);
 
   const [branchList, setBranchList] = useState<string[]>([]);
-  // TODO 초기에 base branch를 fetch해서 적용
-  const [selectedBranch, setSelectedBranch] = useState<string>("main");
+  const [selectedBranch, setSelectedBranch] = useState<string>(branchList?.[0]);
 
-  const fetchBranchList = (branchList: string[]) => {
-    setBranchList(branchList);
+  const handleChangeBranchList = (branches: { branchList: string[]; head: string | null }) => {
+    setSelectedBranch((prev) => (!prev && branches.head ? branches.head : prev));
+    setBranchList(branches.branchList);
   };
 
-  const fetchAnalyzedData = (analyzedData: ClusterNode[]) => {
+  const handleChangeAnalyzedData = (analyzedData: ClusterNode[]) => {
     setData(analyzedData);
     setFilteredData([...analyzedData.reverse()]);
     setSelectedData([]);
@@ -42,8 +42,8 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
       setBranchList,
       selectedBranch,
       setSelectedBranch,
-      fetchAnalyzedData,
-      fetchBranchList,
+      handleChangeAnalyzedData,
+      handleChangeBranchList,
     }),
     [data, filteredRange, filteredData, selectedData, branchList, selectedBranch, loading]
   );
diff --git a/packages/view/src/ide/FakeIDEAdapter.ts b/packages/view/src/ide/FakeIDEAdapter.ts
index 8b73c18d..7c9616f6 100644
--- a/packages/view/src/ide/FakeIDEAdapter.ts
+++ b/packages/view/src/ide/FakeIDEAdapter.ts
@@ -14,9 +14,7 @@ export default class FakeIDEAdapter implements IDEPort {
     const onReceiveMessage = (e: IDEMessageEvent): void => {
       const responseMessage = e.data;
       const { command, payload } = responseMessage;
-            const { command, payload } = responseMessage;
-            const payloadData = command && payload ? JSON.parse(payload) : payload;
-
+      
       switch (command) {
         case "fetchAnalyzedData":
           return events.handleChangeAnalyzedData(payload ? JSON.parse(payload) : undefined);
@@ -24,12 +22,6 @@ export default class FakeIDEAdapter implements IDEPort {
           return events.handleChangeBranchList(payload ? JSON.parse(payload) : undefined);
         default:
           console.log("Unknown Message");
-      }
-          return events.fetchAnalyzedData(payloadData);
-        case "getBranchList":
-          return events.fetchBranchList(payloadData);
-        default:
-          console.log("Unknown Message");
       }
     };
 
@@ -54,9 +46,9 @@ export default class FakeIDEAdapter implements IDEPort {
     }, 3000);
   }
 
-  public sendGetBranchListMessage() {
+  public sendFetchBranchListMessage() {
     const message: IDEMessage = {
-      command: "getBranchList",
+      command: "fetchBranchList",
     };
     this.sendMessageToMe(message);
   }
@@ -78,7 +70,7 @@ export default class FakeIDEAdapter implements IDEPort {
           command,
           payload: JSON.stringify(fakeData),
         };
-      case "getBranchList":
+      case "fetchBranchList":
         return {
           command,
           payload: JSON.stringify(fakeBranchList),
diff --git a/packages/view/src/ide/IDEPort.ts b/packages/view/src/ide/IDEPort.ts
index 6af9d062..5f13595f 100644
--- a/packages/view/src/ide/IDEPort.ts
+++ b/packages/view/src/ide/IDEPort.ts
@@ -9,6 +9,6 @@ export default interface IDEPort {
   addIDESentEventListener: (apiCallbacks: IDESentEvents) => void;
   sendRefreshDataMessage: (payload?: string) => void;
   sendFetchAnalyzedDataMessage: (payload?: string) => void;
-  sendGetBranchListMessage: () => void;
+  sendFetchBranchListMessage: () => void;
   setPrimaryColor: (color: string) => void;
 }
diff --git a/packages/view/src/ide/VSCodeIDEAdapter.ts b/packages/view/src/ide/VSCodeIDEAdapter.ts
index 0946a198..bee344a9 100644
--- a/packages/view/src/ide/VSCodeIDEAdapter.ts
+++ b/packages/view/src/ide/VSCodeIDEAdapter.ts
@@ -16,9 +16,9 @@ export default class VSCodeIDEAdapter implements IDEPort {
 
       switch (command) {
         case "fetchAnalyzedData":
-          return events.fetchAnalyzedData(payloadData);
-        case "getBranchList":
-          return events.fetchBranchList(payloadData);
+          return events.handleChangeAnalyzedData(payloadData);
+        case "fetchBranchList":
+          return events.handleChangeBranchList(payloadData);
         default:
           console.log("Unknown Message");
       }
@@ -26,25 +26,25 @@ export default class VSCodeIDEAdapter implements IDEPort {
     window.addEventListener("message", onReceiveMessage);
   }
 
-  public sendRefreshDataMessage(payload?: string) {
+  public sendRefreshDataMessage(baseBranch?: string) {
     const message: IDEMessage = {
       command: "refresh",
-      payload,
+      payload: JSON.stringify(baseBranch),
     };
     this.sendMessageToIDE(message);
   }
 
-  public sendFetchAnalyzedDataMessage(payload?: string) {
+  public sendFetchAnalyzedDataMessage(baseBranch?: string) {
     const message: IDEMessage = {
       command: "fetchAnalyzedData",
-      payload,
+      payload: JSON.stringify(baseBranch),
     };
     this.sendMessageToIDE(message);
   }
 
-  public sendGetBranchListMessage() {
+  public sendFetchBranchListMessage() {
     const message: IDEMessage = {
-      command: "getBranchList",
+      command: "fetchBranchList",
     };
     this.sendMessageToIDE(message);
   }
diff --git a/packages/view/src/services/index.ts b/packages/view/src/services/index.ts
index ac8340a5..ac523f27 100644
--- a/packages/view/src/services/index.ts
+++ b/packages/view/src/services/index.ts
@@ -7,12 +7,18 @@ export const setPrimaryColor = (color: string) => {
   ideAdapter.setPrimaryColor(color);
 };
 
-export const sendFetchAnalyzedDataCommand = () => {
+export const sendFetchAnalyzedDataCommand = (selectedBranch?: string) => {
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
-  ideAdapter.sendFetchAnalyzedDataMessage();
+  ideAdapter.sendFetchAnalyzedDataMessage(selectedBranch);
 };
 
-export const sendRefreshDataCommand = () => {
+export const sendRefreshDataCommand = (selectedBranch?: string) => {
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
-  ideAdapter.sendRefreshDataMessage();
+  ideAdapter.sendRefreshDataMessage(selectedBranch);
+  ideAdapter.sendFetchBranchListMessage();
+};
+
+export const sendFetchBranchListCommand = () => {
+  const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
+  ideAdapter.sendFetchBranchListMessage();
 };
diff --git a/packages/view/src/types/Commit.ts b/packages/view/src/types/Commit.ts
new file mode 100644
index 00000000..76ceba06
--- /dev/null
+++ b/packages/view/src/types/Commit.ts
@@ -0,0 +1,14 @@
+import type { DiffStatistics } from "./DiffStatistics";
+import type { GitHubUser } from "./GitHubUser";
+
+export type Commit = {
+  id: string;
+  parentIds: string[];
+  author: GitHubUser;
+  committer: GitHubUser;
+  authorDate: string;
+  commitDate: string;
+  diffStatistics: DiffStatistics;
+  message: string;
+  // fill necessary properties...
+};
diff --git a/packages/view/src/types/CommitMessageType.ts b/packages/view/src/types/CommitMessageType.ts
new file mode 100644
index 00000000..c8c6e19f
--- /dev/null
+++ b/packages/view/src/types/CommitMessageType.ts
@@ -0,0 +1,22 @@
+// This file here is all identical to 'types/CommitMessageType.ts' in 'analysis-engine'.
+// Since the commit is originally imported from b, this file can be changed when b changes.
+// You can create types derived from this code.
+// However, design so that errors do not occur even if this code is changed.
+export const CommitMessageTypeList = [
+  "build",
+  "chore",
+  "ci",
+  "docs",
+  "feat",
+  "fix",
+  "pert",
+  "refactor",
+  "revert",
+  "style",
+  "test",
+  "", // default - 명시된 타입이 없거나 commitLint rule을 따르지 않은 경우
+];
+
+const COMMIT_MESSAGE_TYPE = [...CommitMessageTypeList] as const;
+
+export type CommitMessageType = (typeof COMMIT_MESSAGE_TYPE)[number];
diff --git a/packages/view/src/types/CommitTypes.temp.ts b/packages/view/src/types/CommitTypes.temp.ts
deleted file mode 100644
index 37c0e5a4..00000000
--- a/packages/view/src/types/CommitTypes.temp.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// TODO: Entire types will be imported from analysis-engine
-export const CommitMessageTypeList = [
-  "build",
-  "chore",
-  "ci",
-  "docs",
-  "feat",
-  "fix",
-  "pert",
-  "refactor",
-  "revert",
-  "style",
-  "test",
-  "", // default - 명시된 타입이 없거나 commitLint rule을 따르지 않은 경우
-];
-
-const COMMIT_MESSAGE_TYPE = [...CommitMessageTypeList] as const;
-
-export type CommitMessageType = (typeof COMMIT_MESSAGE_TYPE)[number];
-
-// todo: engine DifferenceStatistic 와 통일
-export type DiffStatistics = {
-  changedFileCount: number;
-  insertions: number;
-  deletions: number;
-  files: {
-    [id: string]: {
-      insertions: number;
-      deletions: number;
-    };
-  };
-};
-
-// todo: engine GitUser 와 통일
-export type GitHubUser = {
-  id: string;
-  names: string[];
-  emails: string[];
-};
-
-export type Commit = {
-  id: string;
-  parentIds: string[];
-  author: GitHubUser;
-  committer: GitHubUser;
-  authorDate: string;
-  commitDate: string;
-  diffStatistics: DiffStatistics;
-  message: string;
-  // fill necessary properties...
-};
diff --git a/packages/view/src/types/DiffStatistics.ts b/packages/view/src/types/DiffStatistics.ts
new file mode 100644
index 00000000..f1b4882e
--- /dev/null
+++ b/packages/view/src/types/DiffStatistics.ts
@@ -0,0 +1,11 @@
+export type DiffStatistics = {
+  changedFileCount: number;
+  insertions: number;
+  deletions: number;
+  files: {
+    [id: string]: {
+      insertions: number;
+      deletions: number;
+    };
+  };
+};
diff --git a/packages/view/src/types/GitHubUser.ts b/packages/view/src/types/GitHubUser.ts
new file mode 100644
index 00000000..e0e0b96d
--- /dev/null
+++ b/packages/view/src/types/GitHubUser.ts
@@ -0,0 +1,5 @@
+export type GitHubUser = {
+  id: string;
+  names: string[];
+  emails: string[];
+};
diff --git a/packages/view/src/types/IDEMessage.ts b/packages/view/src/types/IDEMessage.ts
index 1088f118..fe2deb2b 100644
--- a/packages/view/src/types/IDEMessage.ts
+++ b/packages/view/src/types/IDEMessage.ts
@@ -7,4 +7,9 @@ export interface IDEMessageEvent extends MessageEvent {
   data: IDEMessage;
 }
 
-export type IDEMessageCommandNames = "refresh" | "fetchAnalyzedData" | "getBranchList" | "updatePrimaryColor";
+export type IDEMessageCommandNames =
+  | "refresh"
+  | "fetchAnalyzedData"
+  | "fetchBranchList"
+  | "fetchCurrentBranch"
+  | "updatePrimaryColor";
diff --git a/packages/view/src/types/IDESentEvents.ts b/packages/view/src/types/IDESentEvents.ts
index 8fb03ab0..65def9df 100644
--- a/packages/view/src/types/IDESentEvents.ts
+++ b/packages/view/src/types/IDESentEvents.ts
@@ -2,6 +2,6 @@ import type { ClusterNode } from "types";
 
 // triggered by ide response
 export type IDESentEvents = {
-  fetchAnalyzedData: (analyzedData: ClusterNode[]) => void;
-  fetchBranchList: (branchList: string[]) => void;
+  handleChangeAnalyzedData: (analyzedData: ClusterNode[]) => void;
+  handleChangeBranchList: (branches: { branchList: string[]; head: string | null }) => void;
 };
diff --git a/packages/view/src/types/Nodes.ts b/packages/view/src/types/Nodes.ts
index dce9c3ae..7f22b342 100644
--- a/packages/view/src/types/Nodes.ts
+++ b/packages/view/src/types/Nodes.ts
@@ -1,6 +1,6 @@
 import type { NODE_TYPES } from "constants/constants";
 
-import type { Commit } from "./CommitTypes.temp";
+import type { Commit } from "./Commit";
 
 export type NodeTypeName = (typeof NODE_TYPES)[number];
 
diff --git a/packages/view/tests/home.spec.ts b/packages/view/tests/home.spec.ts
index 1b07f42c..2eb4d76b 100644
--- a/packages/view/tests/home.spec.ts
+++ b/packages/view/tests/home.spec.ts
@@ -8,17 +8,4 @@ test.describe("home", () => {
   test("has title", async ({ page }) => {
     await expect(page).toHaveTitle(/Githru/);
   });
-
-  test("check BranchSelector", async ({ page }) => {
-    await expect(page.getByText("Branches:")).toBeVisible();
-
-    const options = await page.locator("section").getByRole("combobox").locator("option");
-    const optionValues = await options.evaluateAll((elements) =>
-      elements.map((option) => (option as HTMLOptionElement).value)
-    );
-
-    expect(optionValues).toContain("dev");
-    expect(optionValues).toContain("feat");
-    expect(optionValues).toContain("edit");
-  });
 });
diff --git a/packages/vscode/src/extension.ts b/packages/vscode/src/extension.ts
index 7f7cc0c6..b902b0b4 100644
--- a/packages/vscode/src/extension.ts
+++ b/packages/vscode/src/extension.ts
@@ -6,7 +6,15 @@ import { Credentials } from "./credentials";
 import { GithubTokenUndefinedError, WorkspacePathUndefinedError } from "./errors/ExtensionError";
 import { getGithubToken, setGithubToken } from "./setting-repository";
 import { mapClusterNodesFrom } from "./utils/csm.mapper";
-import { findGit, getBaseBranchName, getBranchNames, getGitConfig, getGitLog, getRepo } from "./utils/git.util";
+import {
+  findGit,
+  getBranches,
+  getCurrentBranchName,
+  getDefaultBranchName,
+  getGitConfig,
+  getGitLog,
+  getRepo,
+} from "./utils/git.util";
 import WebviewLoader from "./webview-loader";
 
 let myStatusBarItem: vscode.StatusBarItem;
@@ -38,18 +46,17 @@ export async function activate(context: vscode.ExtensionContext) {
         throw new GithubTokenUndefinedError("Cannot find your GitHub token. Retrying github authentication...");
       }
 
-      const fetchBranchList = async () => {
-        const storedBranchList = context.workspaceState.get<string[]>("branchList") ?? [];
-        context.workspaceState.update(
-          "branchList",
-          (await getBranchNames(gitPath, currentWorkspacePath)) ?? storedBranchList
-        );
-        return context.workspaceState.get<string[]>("branchList") ?? storedBranchList;
+      const fetchBranches = async () => await getBranches(gitPath, currentWorkspacePath);
+      const fetchCurrentBranch = async () => {
+        let branchName = await getCurrentBranchName(gitPath, currentWorkspacePath);
+        if (!branchName) {
+          const branchList = (await fetchBranches()).branchList;
+          branchName = getDefaultBranchName(branchList);
+        }
+        return branchName;
       };
 
-      const branchNames = await fetchBranchList();
-      const initialBaseBranchName = getBaseBranchName(branchNames);
-
+      const initialBaseBranchName = await fetchCurrentBranch();
       const fetchClusterNodes = async (baseBranchName = initialBaseBranchName) => {
         const gitLog = await getGitLog(gitPath, currentWorkspacePath);
         const gitConfig = await getGitConfig(gitPath, currentWorkspacePath, "origin");
@@ -67,7 +74,11 @@ export async function activate(context: vscode.ExtensionContext) {
         return clusterNodes;
       };
 
-      const webLoader = new WebviewLoader(extensionPath, context, fetchClusterNodes, fetchBranchList);
+      const webLoader = new WebviewLoader(extensionPath, context, {
+        fetchClusterNodes,
+        fetchBranches,
+        fetchCurrentBranch,
+      });
 
       subscriptions.push(webLoader);
       vscode.window.showInformationMessage("Hello Githru");
diff --git a/packages/vscode/src/types/CSMDictionary.ts b/packages/vscode/src/types/CSMDictionary.ts
new file mode 100644
index 00000000..ecef1797
--- /dev/null
+++ b/packages/vscode/src/types/CSMDictionary.ts
@@ -0,0 +1,10 @@
+import type { StemCommitNode } from "./StemCommitNode";
+
+interface CSMNode {
+  base: StemCommitNode;
+  source: StemCommitNode[];
+}
+
+export interface CSMDictionary {
+  [branch: string]: CSMNode[];
+}
diff --git a/packages/vscode/src/types/Commit.ts b/packages/vscode/src/types/Commit.ts
new file mode 100644
index 00000000..838afac1
--- /dev/null
+++ b/packages/vscode/src/types/Commit.ts
@@ -0,0 +1,16 @@
+import type { DiffStatistics } from "./DiffStatistics";
+import type { GitHubUser } from "./GitHubUser";
+
+export type Commit = {
+  id: string;
+  parentIds: string[];
+  author: GitHubUser;
+  committer: GitHubUser;
+  authorDate: string;
+  commitDate: string;
+  diffStatistics: DiffStatistics;
+  message: string;
+  tags: string[];
+  releaseTags: string[];
+  // fill necessary properties...
+};
diff --git a/packages/vscode/src/types/CommitMessageType.ts b/packages/vscode/src/types/CommitMessageType.ts
new file mode 100644
index 00000000..56225cbc
--- /dev/null
+++ b/packages/vscode/src/types/CommitMessageType.ts
@@ -0,0 +1,17 @@
+export const CommitMessageTypeList = [
+  "build",
+  "chore",
+  "ci",
+  "docs",
+  "feat",
+  "fix",
+  "pert",
+  "refactor",
+  "revert",
+  "style",
+  "test",
+];
+
+const COMMIT_MESSAGE_TYPE = [...CommitMessageTypeList] as const;
+
+export type CommitMessageType = (typeof COMMIT_MESSAGE_TYPE)[number];
diff --git a/packages/vscode/src/types/DiffStatistics.ts b/packages/vscode/src/types/DiffStatistics.ts
new file mode 100644
index 00000000..f1b4882e
--- /dev/null
+++ b/packages/vscode/src/types/DiffStatistics.ts
@@ -0,0 +1,11 @@
+export type DiffStatistics = {
+  changedFileCount: number;
+  insertions: number;
+  deletions: number;
+  files: {
+    [id: string]: {
+      insertions: number;
+      deletions: number;
+    };
+  };
+};
diff --git a/packages/vscode/src/types/DifferenceStatistic.ts b/packages/vscode/src/types/DifferenceStatistic.ts
new file mode 100644
index 00000000..d29ca62d
--- /dev/null
+++ b/packages/vscode/src/types/DifferenceStatistic.ts
@@ -0,0 +1,12 @@
+interface FileChanged {
+  [path: string]: {
+    insertionCount: number;
+    deletionCount: number;
+  };
+}
+
+export interface DifferenceStatistic {
+  totalInsertionCount: number;
+  totalDeletionCount: number;
+  fileDictionary: FileChanged;
+}
diff --git a/packages/vscode/src/types/GitHubUser.ts b/packages/vscode/src/types/GitHubUser.ts
new file mode 100644
index 00000000..e0e0b96d
--- /dev/null
+++ b/packages/vscode/src/types/GitHubUser.ts
@@ -0,0 +1,5 @@
+export type GitHubUser = {
+  id: string;
+  names: string[];
+  emails: string[];
+};
diff --git a/packages/vscode/src/types/Node.ts b/packages/vscode/src/types/Node.ts
new file mode 100644
index 00000000..de6f9c7a
--- /dev/null
+++ b/packages/vscode/src/types/Node.ts
@@ -0,0 +1,28 @@
+import type { Commit } from "./Commit";
+
+const NODE_TYPE_NAME = ["COMMIT", "CLUSTER"] as const;
+type NodeTypeName = (typeof NODE_TYPE_NAME)[number];
+
+type NodeBase = {
+  nodeTypeName: NodeTypeName;
+  // isRootNode: boolean;
+  // isLeafNode: boolean;
+
+  // getParents: () => NodeType[];
+};
+
+// Node = Commit + analyzed Data as node
+export type CommitNode = NodeBase & {
+  nodeTypeName: "COMMIT";
+  commit: Commit;
+  // seq: number;
+  clusterId: number; // 동일한 Cluster 내부 commit 참조 id
+  // hasMajorTag: boolean;
+  // hasMinorTag: boolean;
+  // isMergeCommit: boolean;
+};
+
+export type ClusterNode = NodeBase & {
+  nodeTypeName: "CLUSTER";
+  commitNodeList: CommitNode[];
+};
diff --git a/packages/vscode/src/types/StemCommitNode.ts b/packages/vscode/src/types/StemCommitNode.ts
new file mode 100644
index 00000000..a3376b75
--- /dev/null
+++ b/packages/vscode/src/types/StemCommitNode.ts
@@ -0,0 +1,28 @@
+import type { CommitMessageType } from "./CommitMessageType";
+import type { DifferenceStatistic } from "./DifferenceStatistic";
+
+interface GitUser {
+  name: string;
+  email: string;
+}
+
+interface CommitRaw {
+  sequence: number;
+  id: string;
+  parents: string[];
+  branches: string[];
+  tags: string[];
+  author: GitUser;
+  authorDate: Date;
+  committer: GitUser;
+  committerDate: Date;
+  message: string;
+  differenceStatistic: DifferenceStatistic;
+  commitMessageType: CommitMessageType;
+}
+
+export interface StemCommitNode {
+  // 순회 이전에는 stemId가 존재하지 않음.
+  stemId?: string;
+  commit: CommitRaw;
+}
diff --git a/packages/vscode/src/utils/NodeTypes.temps.ts b/packages/vscode/src/utils/NodeTypes.temps.ts
deleted file mode 100644
index b5112265..00000000
--- a/packages/vscode/src/utils/NodeTypes.temps.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-// TODO: Entire types will be imported from analysis-engine
-
-// todo: engine ComitRaw 와 통일
-// Holds just commit log raw data
-export type CommitRaw = {
-  id: string;
-  parents: string[];
-  message: string;
-  author: string;
-  authorDate: string;
-  committer: string;
-  date: string;
-  tags: string[];
-  branches: string[];
-
-  // fill necessary properties...
-};
-
-// todo: engine DifferenceStatistic 와 통일
-export type DiffStatistics = {
-  changedFileCount: number;
-  insertions: number;
-  deletions: number;
-  files: {
-    [id: string]: {
-      insertions: number;
-      deletions: number;
-    };
-  };
-};
-
-// todo: engine GitUser 와 통일
-export type GitHubUser = {
-  id: string;
-  names: string[];
-  emails: string[];
-};
-
-export type Commit = {
-  id: string;
-  parentIds: string[];
-  author: GitHubUser;
-  committer: GitHubUser;
-  authorDate: string;
-  commitDate: string;
-  diffStatistics: DiffStatistics;
-  message: string;
-  tags: string[];
-  releaseTags: string[];
-  // fill necessary properties...
-};
-
-export const NODE_TYPE_NAME = ["COMMIT", "CLUSTER"] as const;
-export type NodeTypeName = (typeof NODE_TYPE_NAME)[number];
-
-export type NodeBase = {
-  nodeTypeName: NodeTypeName;
-  // isRootNode: boolean;
-  // isLeafNode: boolean;
-
-  // getParents: () => NodeType[];
-};
-
-export type NodeType = CommitNode | ClusterNode;
-
-// Node = Commit + analyzed Data as node
-export type CommitNode = NodeBase & {
-  nodeTypeName: "COMMIT";
-  commit: Commit;
-  // seq: number;
-  clusterId: number; // 동일한 Cluster 내부 commit 참조 id
-  // hasMajorTag: boolean;
-  // hasMinorTag: boolean;
-  // isMergeCommit: boolean;
-};
-
-export type ClusterNode = NodeBase & {
-  nodeTypeName: "CLUSTER";
-  commitNodeList: CommitNode[];
-};
diff --git a/packages/vscode/src/utils/csm.mapper.ts b/packages/vscode/src/utils/csm.mapper.ts
index 88654622..f9738ef0 100644
--- a/packages/vscode/src/utils/csm.mapper.ts
+++ b/packages/vscode/src/utils/csm.mapper.ts
@@ -1,10 +1,8 @@
-import type {
-  CommitNode as StemCommitNode,
-  CSMDictionary,
-  DifferenceStatistic,
-} from "@githru-vscode-ext/analysis-engine/src/types";
-
-import type { ClusterNode, CommitNode, DiffStatistics } from "./NodeTypes.temps";
+import type { CSMDictionary } from "../types/CSMDictionary";
+import type { DifferenceStatistic } from "../types/DifferenceStatistic";
+import type { DiffStatistics } from "../types/DiffStatistics";
+import type { ClusterNode, CommitNode } from "../types/Node";
+import type { StemCommitNode } from "../types/StemCommitNode";
 
 /**
  * engine DifferenceStatistic → view DiffStatistics
@@ -34,7 +32,7 @@ const mapDiffStatisticsFrom = (params: { differenceStatistic: DifferenceStatisti
 const mapCommitNodeListFrom = (params: { commits: StemCommitNode[]; clusterId: number }): CommitNode[] => {
   const { commits, clusterId } = params;
   return commits.map(({ commit }) => {
-    const releaseTags=commit.tags.filter(tag=>tag.startsWith('v')||/^[0-9.]+$/.test(tag));
+    const releaseTags = commit.tags.filter((tag) => tag.startsWith("v") || /^[0-9.]+$/.test(tag));
     return {
       nodeTypeName: "COMMIT" as const,
       commit: {
@@ -63,7 +61,7 @@ const mapCommitNodeListFrom = (params: { commits: StemCommitNode[]; clusterId: n
       // hasMajorTag: false,
       // hasMinorTag: false,
       clusterId,
-    }
+    };
   });
 };
 
diff --git a/packages/vscode/src/utils/git.util.ts b/packages/vscode/src/utils/git.util.ts
index ed1a6e7d..552fa5bc 100644
--- a/packages/vscode/src/utils/git.util.ts
+++ b/packages/vscode/src/utils/git.util.ts
@@ -222,42 +222,57 @@ export const getRepo = (gitRemoteConfig: string) => {
   return { owner, repo };
 };
 
-export async function getBranchNames(path: string, repo: string): Promise<string[]> {
-  return new Promise((resolve, reject) => {
-    resolveSpawnOutput(
-      cp.spawn(path, ["branch", "-a"], {
-        cwd: repo,
-        env: Object.assign({}, process.env),
-      })
-    ).then((values) => {
-      const [status, stdout, stderr] = values;
-      if (status.code === 0) {
-        const branches = stdout
-          .toString()
-          .split("\n")
-          .map((name) =>
-            name
-              .replace("*", "") // delete * prefix
-              .replace("remotes/", "") // delete remotes/ prifix
-              .replace(/(.*) -> (?:.*)/g, "$1") // remote HEAD parsing
-              .trim()
-          )
-          .filter((name) => !!name);
-        resolve(branches);
-      } else {
-        reject(stderr);
-      }
-    });
-  });
-}
+export async function getBranches(
+  path: string,
+  repo: string
+): Promise<{
+  branchList: string[];
+  head: string | null;
+}> {
+  let head = null;
+  const branchList = [];
+
+  const [status, stdout, stderr] = await resolveSpawnOutput(
+    cp.spawn(path, ["branch", "-a"], {
+      cwd: repo,
+      env: Object.assign({}, process.env),
+    })
+  );
 
-export function getBaseBranchName(branchNames: string[]): string {
-  for (const name of branchNames) {
-    if (name === "main") {
-      return "main";
-    } else if (name === "master") {
-      return "master";
+  if (status.code !== 0) throw stderr;
+
+  const branches = stdout.toString().split(/\r\n|\r|\n/g);
+  for (let branch of branches) {
+    branch = branch
+      .trim()
+      .replace(/(.*) -> (?:.*)/g, "$1")
+      .replace("remotes/", "");
+    if (branch.startsWith("* ")) {
+      if (branch.includes("HEAD detached")) continue;
+      branch = branch.replace("* ", "");
+      head = branch;
     }
+    branchList.push(branch);
   }
-  return branchNames[0];
+
+  if (!head) head = getDefaultBranchName(branchList);
+
+  return { branchList, head };
+}
+
+export function getDefaultBranchName(branchList: string[]): string {
+  const branchSet = new Set(branchList);
+  return branchSet.has("main") ? "main" : branchSet.has("master") ? "master" : branchList?.[0];
+}
+
+export async function getCurrentBranchName(path: string, repo: string): Promise<string> {
+  const [status, stdout, stderr] = await resolveSpawnOutput(
+    cp.spawn(path, ["branch", "--show-current"], {
+      cwd: repo,
+      env: Object.assign({}, process.env),
+    })
+  );
+
+  if (status.code !== 0) throw stderr;
+  return stdout.toString().trim();
 }
diff --git a/packages/vscode/src/webview-loader.ts b/packages/vscode/src/webview-loader.ts
index 4c04a3c9..5cdca944 100644
--- a/packages/vscode/src/webview-loader.ts
+++ b/packages/vscode/src/webview-loader.ts
@@ -12,9 +12,9 @@ export default class WebviewLoader implements vscode.Disposable {
   constructor(
     private readonly extensionPath: string,
     context: vscode.ExtensionContext,
-    parseCommit: (baseBranchName?: string) => Promise<ClusterNode[]>,
-    parseBranches: () => Promise<string[]>
+    fetcher: GithruFetcherMap
   ) {
+    const { fetchClusterNodes, fetchBranches, fetchCurrentBranch } = fetcher;
     const viewColumn = vscode.ViewColumn.One;
 
     this._panel = vscode.window.createWebviewPanel("WebviewLoader", "githru-view", viewColumn, {
@@ -26,35 +26,36 @@ export default class WebviewLoader implements vscode.Disposable {
     const icon_path = vscode.Uri.file(path.join(this.extensionPath, "images", "logo.png"));
     this._panel.iconPath = icon_path;
 
-    this._panel.webview.onDidReceiveMessage(async (message: { command: string; payload: unknown }) => {
+    this._panel.webview.onDidReceiveMessage(async (message: { command: string; payload?: string }) => {
       const { command, payload } = message;
 
       if (command === "fetchAnalyzedData" || command === "refresh") {
-        const storedAnalyzedData = context.workspaceState.get<ClusterNode[]>(ANALYZE_DATA_KEY);
+        const baseBranchName = (payload && JSON.parse(payload)) ?? (await fetchCurrentBranch());
+        const storedAnalyzedData = context.workspaceState.get<ClusterNode[]>(`${ANALYZE_DATA_KEY}_${baseBranchName}`);
         const resMessage = {
           command,
           payload: storedAnalyzedData,
         };
 
         if (!storedAnalyzedData) {
-          const baseBranchName = payload ? JSON.parse(payload as string) : undefined;
-          const data = await parseCommit(baseBranchName);
-          context.workspaceState.update(ANALYZE_DATA_KEY, data);
-          resMessage.payload = data;
+          const analyzedData = await fetchClusterNodes(baseBranchName);
+          context.workspaceState.update(`${ANALYZE_DATA_KEY}_${baseBranchName}`, analyzedData);
+          resMessage.payload = analyzedData;
         }
 
         await this.respondToMessage(resMessage);
       }
 
-      if (command === "getBranchList") {
-        const branches = await parseBranches();
+      if (command === "fetchBranchList") {
+        const branches = await fetchBranches();
         await this.respondToMessage({
           ...message,
           payload: branches,
         });
       }
+
       if (command === "updatePrimaryColor") {
-        const colorCode = JSON.parse(payload as string);
+        const colorCode = payload && JSON.parse(payload);
         if (colorCode.primary) {
           setPrimaryColor(colorCode.primary);
         }
@@ -107,3 +108,10 @@ export default class WebviewLoader implements vscode.Disposable {
     return returnString;
   }
 }
+
+type GithruFetcher<D = unknown, P extends unknown[] = []> = (...params: P) => Promise<D>;
+type GithruFetcherMap = {
+  fetchClusterNodes: GithruFetcher<ClusterNode[], [string]>;
+  fetchBranches: GithruFetcher<{ branchList: string[]; head: string | null }>;
+  fetchCurrentBranch: GithruFetcher<string>;
+};