diff --git a/doc/getting-started-ko.md b/doc/getting-started-ko.md
index 694918b4..cf73e2e3 100644
--- a/doc/getting-started-ko.md
+++ b/doc/getting-started-ko.md
@@ -31,14 +31,11 @@ view → engine → vscode 순서대로 빌드를 시작합니다.
     ![](./getting-started-ko/3.png)
    ![](./getting-started-ko/4.png)
 
-4. debug mode 로 실행된 vscode(githru의 vscode패키지) 의 settings 에 진입합니다. (단축키 : `ctrl + ,`)
-   ![](./getting-started-ko/5.png)
+4. debug mode 로 실행된 vscode(githru의 vscode패키지) 의 하단 상태표시줄에 "githru" 텍스트 버튼을 통해 githru 화면에 진입합니다.  
+   ![](./getting-started-ko/7.png)
 
-5. settings 화면에서 "githru" 검색을 통해 githru 설정화면에 진입한 다음,  
-   githru engine 에서 사용할 github access token 를 입력합니다.  
-   (토큰 발급 참고자료 : https://docs.github.com/ko/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)  
-    ![](./getting-started-ko/6.png)
+5. "확장 'githru-vscode-ext'은(는) GitHub을(를) 사용하여 로그인하려고 합니다."라는 메시지가 뜨면, "허용" 버튼을 클릭하고 외부 페이지에서 GitHub 로그인합니다.
+   ![](./getting-started-ko/login-popup.png)
 
-6. debug mode 로 실행된 vscode(githru의 vscode패키지) 의 하단 상태표시줄에 "githru" 텍스트 버튼을 통해 githru 화면에 진입합니다.  
-   ![](./getting-started-ko/7.png)
+6. 로그인이 완료되면, vscode(githru의 vscode패키지) 에서 githru 화면이 뜹니다.
    ![](./getting-started-ko/8.png)
diff --git a/doc/getting-started-ko/5.png b/doc/getting-started-ko/5.png
deleted file mode 100644
index 10de33ad..00000000
Binary files a/doc/getting-started-ko/5.png and /dev/null differ
diff --git a/doc/getting-started-ko/6.png b/doc/getting-started-ko/6.png
deleted file mode 100644
index 9b3ceea3..00000000
Binary files a/doc/getting-started-ko/6.png and /dev/null differ
diff --git a/doc/getting-started-ko/login-popup.png b/doc/getting-started-ko/login-popup.png
new file mode 100644
index 00000000..a2b99838
Binary files /dev/null and b/doc/getting-started-ko/login-popup.png differ
diff --git a/packages/analysis-engine/.gitignore b/packages/analysis-engine/.gitignore
index 0e75fe55..6667779e 100644
--- a/packages/analysis-engine/.gitignore
+++ b/packages/analysis-engine/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
 coverage
+.env
diff --git a/packages/analysis-engine/src/index.ts b/packages/analysis-engine/src/index.ts
index 582769a2..f6de204b 100644
--- a/packages/analysis-engine/src/index.ts
+++ b/packages/analysis-engine/src/index.ts
@@ -75,7 +75,8 @@ export class AnalysisEngine {
     if (this.isDebugMode) console.log("stemDict: ", stemDict);
     const csmDict = buildCSMDict(commitDict, stemDict, this.baseBranchName, pullRequests);
     if (this.isDebugMode) console.log("csmDict: ", csmDict);
-    const geminiCommitSummary = await getSummary(commitRaws?.slice(-10) ?? []);
+    const nodes = stemDict.get(this.baseBranchName)?.nodes?.map(({commit}) => commit);
+    const geminiCommitSummary = await getSummary(nodes ? nodes?.slice(-10) : []);
     if (this.isDebugMode) console.log("GeminiCommitSummary: ", geminiCommitSummary);
 
     return {
diff --git a/packages/analysis-engine/src/summary.ts b/packages/analysis-engine/src/summary.ts
index 628eeb98..2b91fe4f 100644
--- a/packages/analysis-engine/src/summary.ts
+++ b/packages/analysis-engine/src/summary.ts
@@ -4,9 +4,8 @@ const apiKey = process.env.GEMENI_API_KEY || '';
 const apiUrl = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=";
 
 export async function getSummary(csmNodes: CommitRaw[]) {
-  const commitMessages = csmNodes.map((csmNode) => csmNode.message).join(', ');
+  const commitMessages = csmNodes.map((csmNode) => csmNode.message.split('\n')[0]).join(', ');
 
-  console.log(commitMessages, 'apiKey');
   try {
     const response = await fetch(apiUrl + apiKey, {
       method: "POST",
diff --git a/packages/view/src/components/FilteredClusters/index.ts b/packages/view/src/components/FilteredClusters/index.ts
deleted file mode 100644
index 671668dc..00000000
--- a/packages/view/src/components/FilteredClusters/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FilteredClusters } from "./FilteredClusters";
diff --git a/packages/view/src/components/FilteredClusters/FilteredClusters.scss b/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss
similarity index 100%
rename from packages/view/src/components/FilteredClusters/FilteredClusters.scss
rename to packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss
diff --git a/packages/view/src/components/FilteredClusters/FilteredClusters.tsx b/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.tsx
similarity index 54%
rename from packages/view/src/components/FilteredClusters/FilteredClusters.tsx
rename to packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.tsx
index 27cccc7b..d4cf7499 100644
--- a/packages/view/src/components/FilteredClusters/FilteredClusters.tsx
+++ b/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.tsx
@@ -9,21 +9,21 @@ import { selectedDataUpdater } from "components/VerticalClusterList/VerticalClus
 import { getInitData, getClusterById } from "components/VerticalClusterList/Summary/Summary.util";
 import { useGlobalData } from "hooks";
 
-import "./FilteredClusters.scss";
+import "./SelectedClusterGroup.scss";
 
-const FilteredClusters = () => {
+const SelectedClusterGroup = () => {
   const { selectedData, setSelectedData } = useGlobalData();
   const selectedClusters = getInitData(selectedData);
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const isOpen = Boolean(anchorEl);
+  const [menuAnchorElement, setMenuAnchorElement] = useState<null | HTMLElement>(null);
+  const isOpen = Boolean(menuAnchorElement);
 
-  const openSelectedList = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
+  const openClusterGroup = (event: MouseEvent<HTMLButtonElement>) => {
+    setMenuAnchorElement(event.currentTarget);
   };
 
-  const closeSelectedList = () => {
-    setAnchorEl(null);
+  const closeClusterGroup = () => {
+    setMenuAnchorElement(null);
   };
 
   const deselectCluster = (clusterId: number) => () => {
@@ -34,39 +34,37 @@ const FilteredClusters = () => {
   return (
     <div className="selected__content">
       <Button
-        id="selected-list-button"
-        aria-controls={isOpen ? "selected-list" : undefined}
+        id="cluster-group-button"
+        aria-controls={isOpen ? "cluster-group-box" : undefined}
         aria-expanded={isOpen ? "true" : undefined}
         aria-haspopup="true"
         sx={{ color: "inherit", padding: 0, textTransform: "none" }}
-        onClick={openSelectedList}
+        onClick={openClusterGroup}
       >
-        <p>Clusters</p>
+        <p>Selected Nodes</p>
         <ArrowDropDownRoundedIcon />
       </Button>
       <Menu
         className="selected__cluster"
-        id="selected-list"
-        anchorEl={anchorEl}
+        id="cluster-group-box"
+        anchorEl={menuAnchorElement}
         open={isOpen}
         MenuListProps={{
-          "aria-labelledby": "selected-list-button",
+          "aria-labelledby": "cluster-group-button",
         }}
-        onClose={closeSelectedList}
+        onClose={closeClusterGroup}
       >
-        {selectedClusters.map((selectedCluster) => {
-          return (
-            <li key={selectedCluster.clusterId}>
-              <Chip
-                label={selectedCluster.summary.content.message}
-                onDelete={deselectCluster(selectedCluster.clusterId)}
-              />
-            </li>
-          );
-        })}
+        {selectedClusters.map((selectedCluster) => (
+          <li key={selectedCluster.clusterId}>
+            <Chip
+              label={selectedCluster.summary.content.message}
+              onDelete={deselectCluster(selectedCluster.clusterId)}
+            />
+          </li>
+        ))}
       </Menu>
     </div>
   );
 };
 
-export default FilteredClusters;
+export default SelectedClusterGroup;
diff --git a/packages/view/src/components/SelectedClusterGroup/index.ts b/packages/view/src/components/SelectedClusterGroup/index.ts
new file mode 100644
index 00000000..10c8fe6e
--- /dev/null
+++ b/packages/view/src/components/SelectedClusterGroup/index.ts
@@ -0,0 +1 @@
+export { default as SelectedClusterGroup } from "./SelectedClusterGroup";
diff --git a/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx b/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
index 6b012933..340914a3 100644
--- a/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
+++ b/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
@@ -1,6 +1,6 @@
 import { useGlobalData } from "hooks";
 import { FilteredAuthors } from "components/FilteredAuthors";
-import { FilteredClusters } from "components/FilteredClusters";
+import { SelectedClusterGroup } from "components/SelectedClusterGroup";
 
 import { Summary } from "./Summary";
 
@@ -14,7 +14,7 @@ const VerticalClusterList = () => {
       {selectedData.length > 0 && (
         <div className="selected__container">
           <FilteredAuthors />
-          <FilteredClusters />
+          <SelectedClusterGroup />
         </div>
       )}
       <Summary />
diff --git a/packages/view/tests/home.spec.ts b/packages/view/tests/home.spec.ts
index cec3199d..fcca19f8 100644
--- a/packages/view/tests/home.spec.ts
+++ b/packages/view/tests/home.spec.ts
@@ -10,10 +10,9 @@ test.describe("home", () => {
     await expect(page).toHaveTitle(/Githru/);
   });
 
-  test("when click cluster", async ({ page }) => {
-    await page.waitForSelector("[data-testid=cluster-graph__container]", { state: "attached" });
-
-    const childContainers = await page.$$("[data-testid=cluster-graph__container]");
+  test("opens detail container on cluster click", async ({ page }) => {
+    await page.waitForSelector(".cluster-graph__container", { state: "attached" });
+    const childContainers = await page.$$(".cluster-graph__container");
 
     if (childContainers.length > CLICK_INDEX) {
       await childContainers[CLICK_INDEX].scrollIntoViewIfNeeded();
@@ -23,22 +22,9 @@ test.describe("home", () => {
     }
 
     // waiting for changing
-    await page.waitForTimeout(1000);
-
-    const newChildContainers = await page.$$("[data-testid=cluster-graph__container]");
-
-    const targetIndexForCheck = CLICK_INDEX + 1;
-    const transformPositionForCheck = 10 + targetIndexForCheck * 50 + 220;
-    if (newChildContainers.length > targetIndexForCheck) {
-      const transformValue = await newChildContainers[targetIndexForCheck].getAttribute("transform");
+    await page.waitForTimeout(10000);
 
-      if (transformValue !== null) {
-        expect(transformValue).toBe(`translate(2, ${transformPositionForCheck})`);
-      } else {
-        throw new Error("Transform attribute not found");
-      }
-    } else {
-      throw new Error("Not enough child containers found");
-    }
+    const detailContainer = await page.waitForSelector(".detail__container");
+    expect(detailContainer).toBeTruthy();
   });
 });
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
index b027ac0e..c89d12d1 100644
--- a/packages/vscode/package.json
+++ b/packages/vscode/package.json
@@ -62,11 +62,6 @@
     "configuration": {
       "title": "Githru",
       "properties": {
-        "githru.github.token": {
-          "type": "string",
-          "default": "",
-          "description": "Insert your GitHub Token for GitHub API."
-        },
         "githru.color.primary": {
           "type": "string",
           "default": "#ff8272",