diff --git a/Top.js b/Top.js
index 184dd2a..bde8d8d 100644
--- a/Top.js
+++ b/Top.js
@@ -21,12 +21,8 @@ export const Top = ({ navigationRef }) => {
   const { navigate, addListener } = useNavigation();
 
   //地図用
-  const { setMapsStationData, injectJavaScript, setInjectJavaScript } =
-    useTrainMenu();
+  const { injectJavaScript, setInjectJavaScript } = useTrainMenu();
 
-  useEffect(() => {
-    getStationList2().then(setMapsStationData);
-  }, []);
   const [mapSwitch, setMapSwitch] = React.useState("false");
 
   useEffect(() => {
@@ -34,7 +30,6 @@ export const Top = ({ navigationRef }) => {
     ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" });
   }, []);
 
-
   const goToFavoriteList = () => navigate("favoriteList");
 
   useEffect(() => {
@@ -42,7 +37,6 @@ export const Top = ({ navigationRef }) => {
     return unsubscribe;
   }, [{ navigate, addListener }]);
 
-
   const goToTrainMenu = () => {
     if (navigationRef.current?.getCurrentRoute().name == "Apps") {
       if (mapSwitch == "true") {
diff --git a/components/ActionSheetComponents/EachTrainInfoCore.js b/components/ActionSheetComponents/EachTrainInfoCore.js
index 5c334dc..645fac0 100644
--- a/components/ActionSheetComponents/EachTrainInfoCore.js
+++ b/components/ActionSheetComponents/EachTrainInfoCore.js
@@ -34,6 +34,7 @@ import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecial
 import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
 import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
 import { useStationList } from "../../stateBox/useStationList";
+import { HeaderText } from "./EachTrainInfoCore/HeaderText";
 
 export const EachTrainInfoCore = ({
   actionSheetRef,
@@ -278,36 +279,16 @@ export const EachTrainInfoCore = ({
           />
         </View>
       )}
-      <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
-        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-          {trainName}
-        </Text>
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-          {showHeadStation.map((d) => `${headStation[d].id} + `)}
-          {data.trainNum}
-          {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
-        </Text>
-
-        {data.limited != undefined &&
-          getType(data.limited.split(":")[0]) &&
-          !data.limited.split(":")[1].match("サンポート") && (
-            <Ionicons
-              name="subway"
-              color="white"
-              size={30}
-              style={{ margin: 5 }}
-              onPress={() => {
-                LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
-                navigate("trainbase", {
-                  info: "train.html?tn=" + data.trainNum,
-                  from,
-                });
-                SheetManager.hide("EachTrainInfo");
-              }}
-            />
-          )}
-      </View>
+      <HeaderText
+        data={data}
+        trainData={trainData}
+        showHeadStation={showHeadStation}
+        showTailStation={showTailStation}
+        headStation={headStation}
+        tailStation={tailStation}
+        navigate={navigate}
+        from={from}
+      />
       <DynamicHeaderScrollView
         from={from}
         styles={styles}
diff --git a/components/Apps.js b/components/Apps.js
index d37ea2a..e48523a 100644
--- a/components/Apps.js
+++ b/components/Apps.js
@@ -24,6 +24,10 @@ import { EachTrainInfoCore } from "../components/ActionSheetComponents/EachTrain
 import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { AppsWebView } from "./Apps/WebView";
+import { NewMenu } from "./Apps/NewMenu";
+import { MapsButton } from "./Apps/MapsButton";
+import { ReloadButton } from "./Apps/ReloadButton";
+import { LandscapeBackButton } from "./Apps/LandscapeBackButton";
 import { useStationList } from "../stateBox/useStationList";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
@@ -186,194 +190,3 @@ export default function Apps() {
     </View>
   );
 }
-const NewMenu = ({ LoadError }) => {
-  const { webview } = useCurrentTrain();
-  const { width } = useWindowDimensions();
-  return (
-    <View
-      style={{
-        position: "absolute",
-        top,
-        width,
-        height: 54,
-        backgroundColor: "#0099CC",
-        borderColor: "white",
-        borderStyle: "solid",
-        borderWidth: 1,
-        alignContent: "center",
-        alignSelf: "center",
-        alignItems: "center",
-        flexDirection: "row",
-      }}
-    >
-      <TouchableOpacity
-        activeOpacity={1}
-        style={{
-          flex: 1,
-          height: 54,
-          backgroundColor: "#0099CC",
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: 1,
-          borderRightWidth: 0,
-          alignContent: "center",
-          alignSelf: "center",
-          alignItems: "center",
-          flexDirection: "row",
-        }}
-        onPress={() => {
-          webview.current?.injectJavaScript(`AccordionClassEvent()`);
-        }}
-      >
-        <>
-          <View
-            style={{
-              width: 54,
-              height: 54,
-              backgroundColor: "#0099CC",
-              borderColor: "white",
-              borderStyle: "solid",
-              borderWidth: 1,
-              alignContent: "center",
-              alignSelf: "center",
-              alignItems: "center",
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Ionicons name="menu" color="white" size={30} />
-            <View style={{ flex: 1 }} />
-          </View>
-          <View style={{ flex: 1 }} />
-          <Text style={{ color: "white", fontSize: 20 }}>メニュー</Text>
-          <View style={{ flex: 1 }}></View>
-        </>
-      </TouchableOpacity>
-
-      <TouchableOpacity
-        onPress={() => Updates.reloadAsync()}
-        style={{
-          width: 54,
-          height: 54,
-          backgroundColor: LoadError ? "red" : "#0099CC",
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: 1,
-          alignContent: "center",
-          alignSelf: "center",
-          alignItems: "center",
-        }}
-      >
-        <View style={{ flex: 1 }} />
-        <Ionicons name="reload" color="white" size={30} />
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
-    </View>
-  );
-};
-const MapsButton = ({ onPress, mapSwitch }) => {
-  const styles = {
-    touch: {
-      position: "absolute",
-      top,
-      left: 10,
-      width: 50,
-      height: 50,
-      backgroundColor: "#0099CC",
-      borderColor: "white",
-      borderStyle: "solid",
-      borderWidth: 1,
-      borderRadius: 50,
-      alignContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: mapSwitch,
-    },
-    text: {
-      textAlign: "center",
-      width: "auto",
-      height: "auto",
-      textAlignVertical: "center",
-      fontWeight: "bold",
-      color: "white",
-      fontSize: 20,
-    },
-  };
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.touch}>
-      <View style={{ flex: 1 }} />
-      <Text style={styles.text}>≡</Text>
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};
-
-const LandscapeBackButton = ({ onPress }) => {
-  const styles = {
-    touch: {
-      position: "absolute",
-      left: 10,
-      width: 50,
-      height: 50,
-      backgroundColor: "#0099CC",
-      borderColor: "white",
-      borderStyle: "solid",
-      borderWidth: 1,
-      borderRadius: 50,
-      alignContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: "flex",
-    },
-    text: {
-      textAlign: "center",
-      width: "auto",
-      height: "auto",
-      textAlignVertical: "center",
-      fontWeight: "bold",
-      color: "white",
-    },
-  };
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.touch}>
-      <View style={{ flex: 1 }} />
-      <Ionicons name="arrow-back" color="white" size={30} />
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};
-
-const ReloadButton = ({ onPress, mapSwitch, LoadError = false, right }) => {
-  const styles = {
-    touch: {
-      position: "absolute",
-      top,
-      right: 10 + right,
-      width: 50,
-      height: 50,
-      backgroundColor: LoadError ? "red" : "#0099CC",
-      borderColor: "white",
-      borderStyle: "solid",
-      borderWidth: 1,
-      borderRadius: 50,
-      alignContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: mapSwitch,
-    },
-    text: {
-      textAlign: "center",
-      width: "auto",
-      height: "auto",
-      textAlignVertical: "center",
-      fontWeight: "bold",
-      color: "white",
-    },
-  };
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.touch}>
-      <View style={{ flex: 1 }} />
-      <Ionicons name="reload" color="white" size={30} />
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};
diff --git a/stateBox/useTrainMenu.js b/stateBox/useTrainMenu.js
index efbc979..ca42c26 100644
--- a/stateBox/useTrainMenu.js
+++ b/stateBox/useTrainMenu.js
@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { getStationList2 } from "../lib/getStationList2";
 const initialState = {
   selectedLine: undefined,
   setSelectedLine: () => {},
@@ -18,6 +19,10 @@ export const TrainMenuProvider = ({ children }) => {
   const [selectedLine, setSelectedLine] = useState(undefined);
   const [mapsStationData, setMapsStationData] = useState(undefined);
   const [injectJavaScript, setInjectJavaScript] = useState();
+  
+  useEffect(() => {
+    getStationList2().then(setMapsStationData);
+  }, []);
 
   return (
     <TrainMenuContext.Provider