diff --git a/README.md b/README.md
index 9ef1cb4..2e88b6d 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,6 @@
 | 日语     | ja   | 是           |
 
 ![screen-shot-one](/.github/shot-1.png)
-![screen-shot-three](/.github/shot-3.png)
 ![screen-shot-two](/.github/shot-2.png)
+![screen-shot-three](/.github/shot-3.png)
 ![screen-shot-four](/.github/shot-4.png)
diff --git a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
index 71e4de3..26d32fb 100644
--- a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
+++ b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
@@ -13,6 +13,8 @@ import {
 import {
   ChartConfig,
   ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
@@ -228,6 +230,9 @@ export function NetworkChart({
                 />
               }
             />
+            {activeChart === defaultChart && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
             {activeChart !== defaultChart && (
               <Line
                 isAnimationActive={false}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
index 2ef5ebf..eaa0bee 100644
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -280,7 +280,7 @@ const ChartLegendContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "flex items-center justify-center gap-4",
+          "flex flex-wrap items-center justify-center gap-4",
           verticalAlign === "top" ? "pb-3" : "pt-3",
           className,
         )}
@@ -306,7 +306,7 @@ const ChartLegendContent = React.forwardRef<
                   }}
                 />
               )}
-              {itemConfig?.label}
+              {key}
             </div>
           );
         })}