diff --git a/components/Menu/SimpleDot.tsx b/components/Menu/SimpleDot.tsx
new file mode 100644
index 0000000..b201bad
--- /dev/null
+++ b/components/Menu/SimpleDot.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { TouchableOpacity } from "react-native";
+type SimpleDotProps = {
+  active: boolean;
+  onPress: () => void;
+};
+export const SimpleDot: FC<SimpleDotProps> = (props) => {
+  const { active, onPress } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        width: 20,
+        marginHorizontal: 2,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+      onPress={onPress}
+    >
+      <Ionicons
+        name="ellipse"
+        size={active ? 20 : 14}
+        color={active ? "#00b8ff" : "#00b8ff55"}
+      />
+    </TouchableOpacity>
+  );
+};
diff --git a/components/Menu/StationPagination.tsx b/components/Menu/StationPagination.tsx
index 1a1d036..fe1bb5b 100644
--- a/components/Menu/StationPagination.tsx
+++ b/components/Menu/StationPagination.tsx
@@ -17,40 +17,6 @@ type StationProps = {
   lat: number;
   lng: number;
 };
-type StationPaginationProps = {
-  entries: StationProps[][];
-  activeSlide: number;
-  carouselRef: any;
-  setSelectedCurrentStation: React.Dispatch<React.SetStateAction<number>>;
-  dotButton: boolean;
-};
-
-export const Paginations: FC<StationPaginationProps> = (props) => {
-  const { entries, setSelectedCurrentStation } = props;
-  return (
-    <StationNumberMaker
-      currentStations={entries}
-      setSelectedCurrentStation={setSelectedCurrentStation}
-    />
-  );
-};
-type StationNumberMakerProps = {
-  currentStations: StationProps[][];
-  setSelectedCurrentStation: React.Dispatch<React.SetStateAction<number>>;
-  active?: boolean;
-  index?: number;
-};
-export const StationNumberMaker: FC<StationNumberMakerProps> = (props) => {
-  const { currentStations, active, index, setSelectedCurrentStation } = props;
-  return (
-    <StationNumber
-      currentStation={currentStations[index]}
-      active={active}
-      onPress={() => setSelectedCurrentStation(index)}
-      key={currentStations[index][0].StationNumber}
-    />
-  );
-};
 type StationNumberProps = {
   currentStation: StationProps[];
   active: boolean;
@@ -68,41 +34,42 @@ export const StationNumber: FC<StationNumberProps> = (props) => {
   const lineID = data[animation].StationNumber.slice(0, 1);
   const lineName = data[animation].StationNumber.slice(1);
   const size = active ? 24 : 18;
-  const margin = active ? 3 : 6;
-  const border = active ? 2 : 1;
   return (
-    <>
+    <TouchableOpacity
+    onPress={onPress} style={{
+      width: 28,
+      height:24,
+      alignContent:"center",
+      alignItems:"center",
+      justifyContent:"center",
+      position:"relative",
+    }}>
       {active && (
-        <View style={{ position: "relative", width: 0, height: 0 }}>
           <View
             style={{
               flex: 1,
               position: "absolute",
               width: 28,
               height: 28,
-              marginLeft: 1,
-              marginRight: 1,
+              marginHorizontal:1,
               borderRadius: 22,
               borderColor: "black",
               borderWidth: 2,
-              left: 0,
-              top: -14,
+              left: -1,
+              top: -2,
+              zIndex:10
             }}
           />
-        </View>
       )}
-      <TouchableOpacity
-        onPress={onPress}
+      <View
         style={{
           alignContent: "center",
           alignItems: "center",
           width: size,
           height: size,
-          marginLeft: margin,
-          marginRight: margin,
           borderColor: lineColorList[lineID],
           backgroundColor: "white",
-          borderWidth: border,
+          borderWidth: active ? 2 : 1,
           borderRadius: 22,
         }}
         key={currentStation[0].StationNumber + lineID}
@@ -122,7 +89,7 @@ export const StationNumber: FC<StationNumberProps> = (props) => {
           {lineID + "\n" + lineName}
         </Text>
         <View style={{ flex: 1 }} />
-      </TouchableOpacity>
-    </>
+      </View>
+    </TouchableOpacity>
   );
 };
diff --git a/menu.js b/menu.js
index 61ec88e..0aca506 100644
--- a/menu.js
+++ b/menu.js
@@ -36,6 +36,7 @@ import { useStationList } from "./stateBox/useStationList";
 import { StationNumber } from "./components/Menu/StationPagination";
 import lineColorList from "./assets/originData/lineColorList";
 import { AS } from "./storageControl";
+import { SimpleDot } from "./components/Menu/SimpleDot";
 
 export default function Menu({ getCurrentTrain }) {
   const { navigate } = useNavigation();
@@ -244,13 +245,26 @@ export default function Menu({ getCurrentTrain }) {
             >
               {originalStationList &&
                 allStationData.map((d, index) => {
-                  return (
-                    <StationNumber
-                      currentStation={d}
-                      active={index == selectedCurrentStation}
-                      onPress={() => setSelectedCurrentStation(index)}
-                    />
-                  );
+                  const active = index == selectedCurrentStation;
+                  const numberIndex = d[0].StationNumber;
+                  if (dotButton) {
+                    return (
+                      <StationNumber
+                        onPress={() => setSelectedCurrentStation(index)}
+                        currentStation={d}
+                        active={active}
+                        index={numberIndex}
+                      />
+                    );
+                  } else {
+                    return (
+                      <SimpleDot
+                        onPress={() => setSelectedCurrentStation(index)}
+                        active={active}
+                        index={numberIndex}
+                      />
+                    );
+                  }
                 })}
             </View>
           </View>