diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js
index 97b436b..0151b6f 100644
--- a/components/ActionSheetComponents/EachTrainInfo.js
+++ b/components/ActionSheetComponents/EachTrainInfo.js
@@ -460,13 +460,12 @@ export const EachTrainInfo = (props) => {
               openTrainInfo={openTrainInfo}
             />
           )}
-
           <ScrollView
             {...scrollHandlers}
             style={{
               backgroundColor: "white",
             }}
-            stickyHeaderIndices={[0]}
+            stickyHeaderIndices={[1]}
             scrollEventThrottle={16}
             onScroll={Animated.event(
               [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
@@ -475,56 +474,72 @@ export const EachTrainInfo = (props) => {
           >
             <View
               style={{
-                alignItems: "center",
-                backgroundColor: "white",
-                flexDirection: "row",
+                height: from == "AllTrainDiagramView" ? 0 : 120,
+                flexDirection: "column",
               }}
-              index={0}
+            />
+            <View
+              style={{
+                height: from == "AllTrainDiagramView" ? "auto" : 120,
+                flexDirection: "column",
+              }}
+              index={1}
             >
+              <View style={{ flex: 1 }} />
               <View
                 style={{
-                  padding: 8,
+                  alignItems: "center",
+                  backgroundColor: "white",
                   flexDirection: "row",
-                  borderBottomWidth: 1,
-                  borderBottomColor: "#f0f0f0",
-                  flex: 1,
                 }}
+                index={0}
               >
-                <Text style={{ fontSize: 20 }}>停車駅</Text>
-                <View style={{ flex: 1 }} />
-                <View style={{ flexDirection: "row" }}>
-                  {!isNaN(currentTrainData?.delay) &&
-                    currentTrainData?.delay != 0 && (
-                      <Text
-                        style={{
-                          fontSize: 15,
-                          color: "black",
-                          position: "absolute",
-                          right: 110,
-                          textAlign: "right",
-                          textDecorationLine: "line-through",
-                        }}
-                      >
-                        (定刻)
-                      </Text>
-                    )}
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: isNaN(currentTrainData?.delay)
-                        ? "black"
-                        : currentTrainData?.delay == 0
-                        ? "black"
-                        : "red",
-                      width: 60,
-                    }}
-                  >
-                    見込
-                  </Text>
-                  <Text style={{ fontSize: 20, width: 50 }}></Text>
+                <View
+                  style={{
+                    padding: 8,
+                    flexDirection: "row",
+                    borderBottomWidth: 1,
+                    borderBottomColor: "#f0f0f0",
+                    flex: 1,
+                  }}
+                >
+                  <Text style={{ fontSize: 20 }}>停車駅</Text>
+                  <View style={{ flex: 1 }} />
+                  <View style={{ flexDirection: "row" }}>
+                    {!isNaN(currentTrainData?.delay) &&
+                      currentTrainData?.delay != 0 && (
+                        <Text
+                          style={{
+                            fontSize: 15,
+                            color: "black",
+                            position: "absolute",
+                            right: 110,
+                            textAlign: "right",
+                            textDecorationLine: "line-through",
+                          }}
+                        >
+                          (定刻)
+                        </Text>
+                      )}
+                    <Text
+                      style={{
+                        fontSize: 20,
+                        color: isNaN(currentTrainData?.delay)
+                          ? "black"
+                          : currentTrainData?.delay == 0
+                          ? "black"
+                          : "red",
+                        width: 60,
+                      }}
+                    >
+                      見込
+                    </Text>
+                    <Text style={{ fontSize: 20, width: 50 }}></Text>
+                  </View>
                 </View>
               </View>
             </View>
+
             {headStation && !isConcatNear && (
               <TouchableOpacity
                 onPress={() => openBackTrainInfo(headStation)}
diff --git a/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js b/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js
index fc2170f..d02dc7b 100644
--- a/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js
+++ b/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js
@@ -1,6 +1,10 @@
 import * as React from "react";
 import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
 import { TrainDataView } from "./TrainDataView";
+import {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
 
 const Max_Header_Height = 200;
 const Min_Header_Height = 80;
@@ -13,28 +17,36 @@ export const DynamicHeader = ({
   openTrainInfo,
 }) => {
   const animatedHeaderHeight = animHeaderValue.interpolate({
-    inputRange: [0, Scroll_Distance],
+    inputRange: [Min_Header_Height, Scroll_Distance],
     outputRange: [Max_Header_Height, 0],
     extrapolate: "clamp",
   });
   const animatedHeaderHeight2 = animHeaderValue.interpolate({
     inputRange: [0, Scroll_Distance],
-    outputRange: [0, Min_Header_Height],
+    outputRange: [Max_Header_Height, Min_Header_Height],
     extrapolate: "clamp",
   });
-  const animateHeaderBackgroundColor = animHeaderValue.interpolate({
-    inputRange: [0, Max_Header_Height - Min_Header_Height],
-    outputRange: ["blue", "red"],
+  const animatedHeaderVisible = animHeaderValue.interpolate({
+    inputRange: [Min_Header_Height, Scroll_Distance],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderVisible2 = animHeaderValue.interpolate({
+    inputRange: [Min_Header_Height, Scroll_Distance],
+    outputRange: [0, 1],
     extrapolate: "clamp",
   });
   return (
-    <>
+    <View style={{ position: "relative" }}>
       <Animated.View
         style={[
           styles.header,
           {
-            height: animatedHeaderHeight,
-            // backgroundColor: animateHeaderBackgroundColor,
+            height: 200,
+            backgroundColor: "#0099CC",
+            opacity: animatedHeaderVisible,
+
+            top: 0,
           },
         ]}
       >
@@ -145,8 +157,10 @@ export const DynamicHeader = ({
           styles.header,
           {
             height: animatedHeaderHeight2,
-            //backgroundColor: animateHeaderBackgroundColor,
+            backgroundColor: "#0099CC",
             margin: 0,
+            top: 0,
+            opacity: animatedHeaderVisible2,
           },
         ]}
       >
@@ -254,7 +268,7 @@ export const DynamicHeader = ({
             </View> */}
         </ScrollView>
       </Animated.View>
-    </>
+    </View>
   );
 };
 const styles = StyleSheet.create({
@@ -264,6 +278,9 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     //paddingTop: 10,
+    position: "absolute",
+    zIndex: 1,
+    backgroundColor: "f0f0f0",
   },
   headerText: {
     color: "#fff",