diff --git a/Apps.js b/Apps.js
index b43d46e..0f1830a 100644
--- a/Apps.js
+++ b/Apps.js
@@ -28,6 +28,7 @@ export function AppContainer() {
     "JR-Nishi": require("./assets/fonts/jr-nishi.otf"),
     Zou: require("./assets/fonts/DelaGothicOne-Regular.ttf"),
     "JNR-font": require("./assets/fonts/JNRfont_pict.ttf"),
+    "DiaPro": require("./assets/fonts/DiaPro-Regular.otf"),
   });
   return (
     <NavigationContainer ref={navigationRef}>
diff --git a/assets/fonts/DiaPro-Regular.otf b/assets/fonts/DiaPro-Regular.otf
new file mode 100644
index 0000000..ef300a8
Binary files /dev/null and b/assets/fonts/DiaPro-Regular.otf differ
diff --git a/components/StationDiagram/ListView.tsx b/components/StationDiagram/ListView.tsx
index 1709333..c2d5631 100644
--- a/components/StationDiagram/ListView.tsx
+++ b/components/StationDiagram/ListView.tsx
@@ -1,17 +1,17 @@
 import { FC } from "react";
 import { ListViewItem } from "@/components/StationDiagram/ListViewItem";
 import { View, Text, ScrollView } from "react-native";
-
+type hoge = {
+  trainNumber: string;
+  array: string;
+  name: string;
+  timeType: string;
+  time: string;
+};
 export const ListView: FC<{
-  data: {
-    trainNumber: string;
-    array: string;
-    name: string;
-    type: string;
-    time: string;
-  }[];
+  data: hoge[];
 }> = ({ data }) => {
-  const groupedData = {};
+  const groupedData: Record<string, hoge[]> = {};
   const groupKeys = [];
   data.forEach((item) => {
     const hour = item.time.split(":")[0];
diff --git a/components/StationDiagram/ListViewItem.tsx b/components/StationDiagram/ListViewItem.tsx
index 859cbf1..bb4396f 100644
--- a/components/StationDiagram/ListViewItem.tsx
+++ b/components/StationDiagram/ListViewItem.tsx
@@ -11,13 +11,16 @@ import { useNavigation } from "@react-navigation/native";
 import { lineList } from "@/lib/getStationList";
 import { useStationList } from "@/stateBox/useStationList";
 import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
+import { StationNumberMaker } from "../駅名表/StationNumberMaker";
+import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
+import lineColorList from "@/assets/originData/lineColorList";
 
 export const ListViewItem: FC<{
   d: {
     trainNumber: string;
     array: string;
     name: string;
-    type: string;
+    timeType: string;
     time: string;
   };
 }> = ({ d }) => {
@@ -33,9 +36,13 @@ export const ListViewItem: FC<{
       });
     }
   }, []);
-  const { color, name, data } = getTrainType({ type: trainData?.type, whiteMode: true });
-  const { originalStationList } = useStationList();
+  const { color, name, data } = getTrainType({
+    type: trainData?.type,
+    whiteMode: true,
+  });
   // 列車名、種別、フォントの取得
+    const { getStationDataFromName, stationList, originalStationList } =
+    useStationList();
   const [
     typeString,
     trainName,
@@ -45,7 +52,7 @@ export const ListViewItem: FC<{
     isEdit,
     uwasa,
     vehicleFormation,
-    trainInfoUrl,
+    trainInfoUrl,lineColor
   ] = useMemo(() => {
     const {
       type,
@@ -62,6 +69,11 @@ export const ListViewItem: FC<{
       d.trainNumber
     );
     const trainData = d.array.split("#").filter((d) => d !== "");
+    const station = getStationDataFromName(trainData[trainData.length - 1].split(",")[0]);
+    const lineColor =
+        station.length > 0
+          ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+          : "black";
     switch (true) {
       case trainData[trainData.length - 1] === undefined:
         return [
@@ -73,7 +85,7 @@ export const ListViewItem: FC<{
           isEdit,
           uwasa,
           vehicleFormation,
-          trainInfoUrl,
+          trainInfoUrl,lineColor
         ];
       default:
         // 行先がある場合は、行先を取得
@@ -88,7 +100,7 @@ export const ListViewItem: FC<{
           isEdit,
           uwasa,
           vehicleFormation,
-          trainInfoUrl,
+          trainInfoUrl,lineColor
         ];
     }
   }, [d.array]);
@@ -97,7 +109,7 @@ export const ListViewItem: FC<{
     .set("hour", timeArray[0])
     .set("minute", timeArray[1])
     .format("HH:mm");
-    
+
   const openStationACFromEachTrainInfo = async (stationName) => {
     await SheetManager.hide("EachTrainInfo");
     const findStationEachLine = (selectLine) => {
@@ -118,7 +130,7 @@ export const ListViewItem: FC<{
         //@ts-ignore
         useShow: () => SheetManager.show("StationDetailView", { payload }),
         onExit: () => SheetManager.hide("StationDetailView"),
-      };//@ts-ignore
+      }; //@ts-ignore
       setTimeout(() => SheetManager.show("StationDetailView", { payload }), 50);
     } else {
       SheetManager.hide("StationDetailView");
@@ -159,12 +171,14 @@ export const ListViewItem: FC<{
         borderStyle: "solid",
         borderColor: "darkgray",
         padding: 10,
-        opacity: d.type.includes("通") ? 0.5 : 1,
+        opacity: d.timeType?.includes("通") ? 0.5 : 1,
       }}
       onPress={() => openTrainInfo()}
     >
-      <View style={{ position: "relative" }}>
-        <Text style={{ fontSize: 30 }}>{formattedTime}</Text>
+      <View style={{ position: "relative", flex: 3 }}>
+        <Text style={{ fontSize: 30, fontFamily: "DiaPro" }}>
+          {formattedTime}
+        </Text>
         <Text
           style={{
             fontSize: 10,
@@ -174,10 +188,10 @@ export const ListViewItem: FC<{
             fontWeight: "bold",
           }}
         >
-          {d.type}
+          {d.timeType}
         </Text>
       </View>
-      <View style={{ flex: 1, flexDirection: "column" }}>
+      <View style={{ flex: 10, flexDirection: "column" }}>
         <View style={{ flexDirection: "row" }}>
           <Text
             style={{
@@ -214,16 +228,19 @@ export const ListViewItem: FC<{
             {trainData?.TrainNumber}
           </Text>
         </View>
-        <Text
-          style={{
-            fontSize: 15,
-            flex: 1,
-            paddingHorizontal: 10,
-            fontWeight: "bold",
-          }}
-        >
-          {trainName}
-        </Text>
+        <View style={{ flexDirection: "row", alignItems: "center", flex: 1 }}>
+          <Text
+            style={{
+              fontSize: 15,
+              flex: 1,
+              paddingHorizontal: 10,
+              fontWeight: "bold",
+              color: lineColor
+            }}
+          >
+            {trainName}
+          </Text>
+        </View>
       </View>
     </TouchableOpacity>
   );
diff --git a/components/StationDiagram/StationDiagramView.tsx b/components/StationDiagram/StationDiagramView.tsx
index bb0c1c6..97271a5 100644
--- a/components/StationDiagram/StationDiagramView.tsx
+++ b/components/StationDiagram/StationDiagramView.tsx
@@ -55,6 +55,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
   const { navigate, addListener, goBack, canGoBack } = useNavigation();
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
   const [input, setInput] = useState("");
+  const [displayMode, setDisplayMode] = useState<"list" | "grid">("list");
   const [selectedTypeList, setSelectedTypeList] = useState<trainTypeID[]>([
     "Normal",
     "OneMan",
@@ -128,6 +129,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               // //条件によってフィルタリング
               if (!threw && timeType && timeType.includes("通")) return;
               if (!showLastStop && timeType && timeType.includes("着")) return;
+              if(selectedTypeList.findIndex((item) => item === "SPCL") === -1){
+                if(d.match(/9\d\d\d[D,M,S]/)) return;
+              }
               if (
                 selectedTypeList.length > 0 &&
                 selectedTypeList.findIndex((item) => item === type) === -1
@@ -194,8 +198,11 @@ export const StationDiagramView: FC<props> = ({ route }) => {
       >
         {currentStation[0].Station_JP}駅 時刻表
       </Text>
-      {/* <ListView data={currentStationDiagram} /> */}
-      <ExGridView data={currentStationDiagram} />
+      {displayMode === "list" ? (
+        <ListView data={currentStationDiagram} />
+      ) : (
+        <ExGridView data={currentStationDiagram} />
+      )}
       {/* <Text
         style={{
           backgroundColor: "white",
@@ -361,6 +368,31 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               </Text>
             </TouchableOpacity>
           )}
+
+          <TouchableOpacity
+            style={{
+              alignItems: "center",
+              marginHorizontal: 5,
+              backgroundColor: "#ffffff00",
+              alignSelf: "center",
+              borderColor: "white",
+              borderWidth: 1,
+              borderRadius: 100,
+            }}
+            onPress={() => {
+              setDisplayMode(displayMode === "list" ? "grid" : "list");
+            }}
+          >
+            <Text
+              style={{
+                color: "white",
+                fontSize: 14,
+                margin: 5,
+              }}
+            >
+              {displayMode === "list" ? "横並びモード" : "リストモード"}
+            </Text>
+          </TouchableOpacity>
         </ScrollView>
         <View
           style={{