diff --git a/.storybook/main.ts b/.storybook/main.ts
index 6d68d18..b539dfa 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,5 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
+import { defineConfig } from 'vite';
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
@@ -15,5 +17,12 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  viteFinal: (config) => {
+    config.define = {
+      ...config.define,
+      'process.env': process.env,
+    };
+    return config;
+  },
 };
 export default config;
diff --git a/src/lib/components/AlertError.stories.tsx b/src/lib/components/AlertError.stories.tsx
index 0d1aa20..b4c9e2f 100644
--- a/src/lib/components/AlertError.stories.tsx
+++ b/src/lib/components/AlertError.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import AlertError from "./AlertError";
 
 const meta: Meta<typeof AlertError> = {
-  title: "CSUI/AlertError",
+  title: "Components/AlertError",
   component: AlertError,
 };
 export default meta;
diff --git a/src/lib/components/AlertSuccess.stories.tsx b/src/lib/components/AlertSuccess.stories.tsx
index 669cc40..50c244b 100644
--- a/src/lib/components/AlertSuccess.stories.tsx
+++ b/src/lib/components/AlertSuccess.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import AlertSuccess from "./AlertSuccess";
 
 const meta: Meta<typeof AlertSuccess> = {
-  title: "CSUI/AlertSuccess",
+  title: "Components/AlertSuccess",
   component: AlertSuccess,
 };
 export default meta;
diff --git a/src/lib/components/Header.stories.tsx b/src/lib/components/Header.stories.tsx
deleted file mode 100644
index 0f0bc2d..0000000
--- a/src/lib/components/Header.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Header from "./Header";
-
-const meta = {
-  title: "Header",
-  component: Header,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof Header>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/src/lib/components/Header.tsx b/src/lib/components/Header.tsx
deleted file mode 100644
index c6c9b00..0000000
--- a/src/lib/components/Header.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-const Header = () => {
-  return (
-    <div className="navbar bg-base-100 border-b border-base-200">
-      <div className="flex-1 flex items-center gap-2">
-        <svg
-          className="w-5 h-5"
-          xmlns="http://www.w3.org/2000/svg"
-          width="48"
-          height="48"
-          viewBox="0 0 48 48"
-        >
-          <g
-            fill="none"
-            stroke="currentColor"
-            strokeLinejoin="round"
-            strokeWidth="4"
-          >
-            <path
-              strokeLinecap="round"
-              d="M36 8H13c-3 0-9 2-9 8s6 8 9 8h22c3 0 9 2 9 8s-6 8-9 8H12"
-            />
-            <path d="M40 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8ZM8 44a4 4 0 1 0 0-8a4 4 0 0 0 0 8Z" />
-          </g>
-        </svg>
-        <span className="text-2xl font-bold">Sky Follower Bridge</span>
-      </div>
-      <div className="flex-none">
-        <a
-          href="https://github.com/kawamataryo/sky-follower-bridge"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="btn btn-ghost"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            className="fill-current"
-          >
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-          </svg>
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default Header;
diff --git a/src/lib/components/MatchTypeFilter.stories.tsx b/src/lib/components/MatchTypeFilter.stories.tsx
deleted file mode 100644
index 2f0fb1b..0000000
--- a/src/lib/components/MatchTypeFilter.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { BSKY_USER_MATCH_TYPE } from "../constants";
-import MatchTypeFilter from "./MatchTypeFilter";
-
-const meta: Meta<typeof MatchTypeFilter> = {
-  title: "CSUI/MatchTypeFilter",
-  component: MatchTypeFilter,
-};
-export default meta;
-
-type Story = StoryObj<typeof MatchTypeFilter>;
-
-export const Default: Story = {
-  args: {
-    value: {
-      [BSKY_USER_MATCH_TYPE.HANDLE]: true,
-      [BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: false,
-      [BSKY_USER_MATCH_TYPE.DESCRIPTION]: true,
-    },
-    onChange: () => {},
-  },
-};
diff --git a/src/lib/components/MatchTypeFilter.tsx b/src/lib/components/MatchTypeFilter.tsx
deleted file mode 100644
index 19771a7..0000000
--- a/src/lib/components/MatchTypeFilter.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import type { MatchType } from "../../types";
-import { BSKY_USER_MATCH_TYPE, MATCH_TYPE_LABEL_AND_COLOR } from "../constants";
-
-export type MatchTypeFilterValue = {
-  [BSKY_USER_MATCH_TYPE.DESCRIPTION]: boolean;
-  [BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: boolean;
-  [BSKY_USER_MATCH_TYPE.HANDLE]: boolean;
-};
-
-export type props = {
-  value: MatchTypeFilterValue;
-  onChange: (key: MatchType) => void;
-};
-
-const MatchTypeFilter = ({ value, onChange }: props) => {
-  return (
-    <div className="flex gap-2 items-center">
-      {Object.keys(value).map((key: MatchType) => (
-        <div className="form-control" key={key}>
-          <label
-            htmlFor={key}
-            className={`badge badge-${
-              MATCH_TYPE_LABEL_AND_COLOR[key].color
-            } gap-1 cursor-pointer py-3 ${value[key] ? "" : "badge-outline"}`}
-          >
-            <input
-              type="checkbox"
-              id={key}
-              checked={value[key]}
-              onChange={() => onChange(key)}
-              className="checkbox checkbox-xs"
-            />
-            <span className="">{MATCH_TYPE_LABEL_AND_COLOR[key].label}</span>
-          </label>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default MatchTypeFilter;
diff --git a/src/lib/components/Modal.stories.tsx b/src/lib/components/Modal.stories.tsx
index f30b7a6..4017f28 100644
--- a/src/lib/components/Modal.stories.tsx
+++ b/src/lib/components/Modal.stories.tsx
@@ -1,13 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { useRef } from "react";
-import BlueskyIconSvg from "./Icons/BlueskyIconSvg";
 import Modal from "./Modal";
-import UserCard, { type Props as UserCardProps } from "./UserCard";
+import type { Props as UserCardProps } from "./UserCard";
 
-const meta: Meta<typeof UserCard> = {
-  title: "CSUI/Modal",
-  component: UserCard,
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
 };
 export default meta;
 
@@ -34,42 +33,6 @@ const DefaultTemplate: Story = {
   },
 };
 
-const ShowModalTemplate: Story = {
-  render: () => {
-    const modalRef = useRef<HTMLDialogElement>(null);
-
-    return (
-      <>
-        <button
-          type="button"
-          className="btn btn-primary"
-          onClick={() => modalRef.current?.showModal()}
-        >
-          open
-        </button>
-        <Modal anchorRef={modalRef} open>
-          <div className="flex justify-between">
-            <h1 className="text-xl font-bold">🔎 Find Bluesky Users</h1>
-            <div className="text-xl">34 / 160</div>
-          </div>
-          <div className="flex gap-1 items-center mt-3">
-            <p className="">Match type: </p>
-            <div className="badge badge-info">Same handle name</div>
-            <div className="badge badge-warning">Same display name</div>
-            <div className="badge badge-secondary">
-              Included handle name in description
-            </div>
-          </div>
-        </Modal>
-      </>
-    );
-  },
-};
-
 export const Default = {
   ...DefaultTemplate,
 };
-
-export const ShowModal = {
-  ...ShowModalTemplate,
-};
diff --git a/src/lib/components/Sidebar.stories.tsx b/src/lib/components/Sidebar.stories.tsx
index abb71fb..88a017a 100644
--- a/src/lib/components/Sidebar.stories.tsx
+++ b/src/lib/components/Sidebar.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BSKY_USER_MATCH_TYPE } from "../constants";
+import { ACTION_MODE, BSKY_USER_MATCH_TYPE } from "../constants";
 import Sidebar from "./Sidebar";
 
 const meta = {
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    detectedCount: 42,
+    detectedCount: 40,
     filterValue: {
       [BSKY_USER_MATCH_TYPE.HANDLE]: true,
       [BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: false,
@@ -25,6 +25,16 @@ export const Default: Story = {
     onChangeFilter: (key) => {
       console.log(`Filter changed: ${key}`);
     },
+    matchTypeStats: {
+      [BSKY_USER_MATCH_TYPE.HANDLE]: 10,
+      [BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: 10,
+      [BSKY_USER_MATCH_TYPE.DESCRIPTION]: 10,
+      [BSKY_USER_MATCH_TYPE.FOLLOWING]: 10,
+    },
+    actionAll: async () => {
+      console.log("actionAll");
+    },
+    actionMode: ACTION_MODE.FOLLOW,
   },
 };
 
@@ -40,5 +50,15 @@ export const NoDetections: Story = {
     onChangeFilter: (key) => {
       console.log(`Filter changed: ${key}`);
     },
+    matchTypeStats: {
+      [BSKY_USER_MATCH_TYPE.HANDLE]: 0,
+      [BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: 0,
+      [BSKY_USER_MATCH_TYPE.DESCRIPTION]: 0,
+      [BSKY_USER_MATCH_TYPE.FOLLOWING]: 0,
+    },
+    actionAll: async () => {
+      console.log("actionAll");
+    },
+    actionMode: ACTION_MODE.FOLLOW,
   },
 };
diff --git a/src/lib/components/Sidebar.tsx b/src/lib/components/Sidebar.tsx
index 3b36edf..537eb91 100644
--- a/src/lib/components/Sidebar.tsx
+++ b/src/lib/components/Sidebar.tsx
@@ -14,7 +14,7 @@ type Props = {
   onChangeFilter: (key: MatchType) => void;
   actionAll: () => Promise<void>;
   actionMode: (typeof ACTION_MODE)[keyof typeof ACTION_MODE];
-  matchTypeStats: Record<MatchType, number>;
+  matchTypeStats: Record<Exclude<MatchType, "none">, number>;
 };
 
 const Sidebar = ({
diff --git a/src/lib/components/UserCard.stories.tsx b/src/lib/components/UserCard.stories.tsx
index f211086..3826606 100644
--- a/src/lib/components/UserCard.stories.tsx
+++ b/src/lib/components/UserCard.stories.tsx
@@ -4,7 +4,7 @@ import { ACTION_MODE, BSKY_USER_MATCH_TYPE } from "../constants";
 import UserCard, { type Props } from "./UserCard";
 
 const meta: Meta<typeof UserCard> = {
-  title: "CSUI/UserCard",
+  title: "Components/UserCard",
   component: UserCard,
 };
 export default meta;
diff --git a/src/lib/components/UserCardSkelton.stories.tsx b/src/lib/components/UserCardSkelton.stories.tsx
index bdcd08c..97db534 100644
--- a/src/lib/components/UserCardSkelton.stories.tsx
+++ b/src/lib/components/UserCardSkelton.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import UserCardSkeleton from "./UserCardSkeleton";
 
 const meta: Meta<typeof UserCardSkeleton> = {
-  title: "CSUI/UserCardSkeleton",
+  title: "Components/UserCardSkeleton",
   component: UserCardSkeleton,
 };
 export default meta;