diff --git a/components/AndroidWidget/widget-task-handler.jsx b/components/AndroidWidget/widget-task-handler.jsx
index 0acfb19..42fc7ff 100644
--- a/components/AndroidWidget/widget-task-handler.jsx
+++ b/components/AndroidWidget/widget-task-handler.jsx
@@ -8,14 +8,9 @@ const nameToWidget = {
   JR_shikoku_train_info: TraInfoEXWidget,
 };
 
-export async function widgetTaskHandler(props) {
-  const widgetInfo = props.widgetInfo;
-  const Widget = nameToWidget[widgetInfo.widgetName];
+export const getDelayData = async () => {
+  // Fetch data from the server
   const time = dayjs().format("HH:mm");
-  ToastAndroid.show(
-    `Widget Action: ${props.widgetAction} ${time}`,
-    ToastAndroid.SHORT
-  );
   const delayString = await fetch(
     "https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec"
   )
@@ -27,6 +22,16 @@ export async function widgetTaskHandler(props) {
       return null;
     });
   ToastAndroid.show(`${delayString}`, ToastAndroid.SHORT);
+  return { time, delayString };
+};
+export async function widgetTaskHandler(props) {
+  const widgetInfo = props.widgetInfo;
+  const Widget = nameToWidget[widgetInfo.widgetName];
+  ToastAndroid.show(
+    `Widget Action: ${JSON.stringify(props.widgetInfo.widgetId)}`,
+    ToastAndroid.SHORT
+  );
+  const { time, delayString } = await getDelayData();
   switch (props.widgetAction) {
     case "WIDGET_ADDED":
     case "WIDGET_UPDATE":
diff --git a/components/Settings/SettingTopPage.js b/components/Settings/SettingTopPage.js
index 490caf0..8eb06b8 100644
--- a/components/Settings/SettingTopPage.js
+++ b/components/Settings/SettingTopPage.js
@@ -167,6 +167,34 @@ export const SettingTopPage = ({
               {">"}
             </Text>
           </ListItem>
+          <ListItem
+            style={{ flexDirection: "row" }}
+            onPress={() => navigate("WidgetSettings")}
+          >
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              ウィジェット設定
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              {">"}
+            </Text>
+          </ListItem>
           <ListItem
             style={{ flexDirection: "row" }}
             onPress={() =>
diff --git a/components/Settings/WidgetSettings.js b/components/Settings/WidgetSettings.js
new file mode 100644
index 0000000..31cefa6
--- /dev/null
+++ b/components/Settings/WidgetSettings.js
@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { SwitchArea } from "../atom/SwitchArea";
+import { CheckBox } from "react-native-elements";
+import { TripleSwitchArea } from "../atom/TripleSwitchArea";
+import { getWidgetInfo, WidgetPreview } from "react-native-android-widget";
+import { TraInfoEXWidget } from "../AndroidWidget/TraInfoEXWidget";
+import { getDelayData } from "../AndroidWidget/widget-task-handler";
+import { ListItem } from "native-base";
+
+export const WidgetSettings = ({ navigate }) => {
+  const widgetInfo = getWidgetInfo("JR_shikoku_train_info");
+  const [widgetList, setWidgetList] = useState([]);
+  useEffect(() => {
+    widgetInfo.then((s) => {
+      if (s.length > 0) {
+        setWidgetList(s);
+        s.forEach((element) => {
+          console.log(element);
+        });
+      }
+    });
+  }, []);
+
+  const [time, setTime] = useState(time);
+  const [delayString, setDelayString] = useState(delayString);
+  useEffect(() => {
+    getDelayData().then(({ time, delayString }) => {
+      setTime(time);
+      setDelayString(delayString);
+    });
+  }, []);
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+        <View style={{ flex: 1 }}>
+          <TouchableOpacity
+            onPress={() => navigate("settingTopPage")}
+            style={{
+              flexDirection: "column",
+              flex: 1,
+            }}
+          >
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                fontSize: 20,
+                fontWeight: "bold",
+                textAlign: "left",
+                textAlignVertical: "center",
+                color: "white",
+                padding: 10,
+              }}
+            >
+              ＜ 設定
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+        </View>
+
+        <Text
+          style={{
+            fontSize: 20,
+            fontWeight: "bold",
+            textAlign: "center",
+            color: "white",
+            padding: 10,
+          }}
+        >
+          ウィジェット設定
+        </Text>
+        <View style={{ flex: 1 }}></View>
+      </View>
+      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
+        <View style={{ alignContent: "center", alignItems: "center" }}>
+          <View
+            style={{
+              borderRadius: 15,
+              borderColor: "black",
+              borderWidth: 5,
+              borderStyle: "solid",
+              overflow: "hidden",
+              margin: 10,
+            }}
+          >
+            <WidgetPreview
+              renderWidget={() => (
+                <TraInfoEXWidget time={time} delayString={delayString} />
+              )}
+              width={400}
+              height={250}
+            />
+          </View>
+        </View>
+        <ListItem key={"default"}>
+          <Text
+            style={{
+              fontSize: 20,
+              alignItems: "center",
+              alignContent: "center",
+              textAlign: "center",
+              textAlignVertical: "center",
+              marginRight: 10,
+            }}
+          >
+            ID
+          </Text>
+          <Text
+            style={{
+              fontSize: 20,
+              alignItems: "center",
+              alignContent: "center",
+              textAlign: "center",
+              textAlignVertical: "center",
+            }}
+          >
+            名前
+          </Text>
+        </ListItem>
+        {widgetList.map((widget) => (
+          <ListItem key={widget.widgetId}>
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+                marginRight: 10,
+              }}
+            >
+              {widget.widgetId}
+            </Text>
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              {widget.widgetName}
+            </Text>
+          </ListItem>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const SimpleSwitch = ({ bool, setBool, str }) => (
+  <View style={{ flexDirection: "row" }}>
+    <CheckBox
+      checked={bool == "true" ? true : false}
+      checkedColor="red"
+      onPress={() => setBool(bool == "true" ? "false" : "true")}
+      containerStyle={{
+        flex: 1,
+        backgroundColor: "#00000000",
+        borderColor: "white",
+        alignContent: "center",
+      }}
+      textStyle={{ fontSize: 20, fontWeight: "normal" }}
+      title={str}
+    />
+  </View>
+);
diff --git a/components/Settings/settings.js b/components/Settings/settings.js
index fbeb3ba..03d4fb1 100644
--- a/components/Settings/settings.js
+++ b/components/Settings/settings.js
@@ -20,6 +20,7 @@ import { Switch } from "react-native-elements";
 import AutoHeightImage from "react-native-auto-height-image";
 import { SettingTopPage } from "./SettingTopPage";
 import { LayoutSettings } from "./LayoutSettings";
+import { WidgetSettings } from "./WidgetSettings";
 
 const Stack = createStackNavigator();
 export default function Setting(props) {
@@ -123,6 +124,18 @@ export default function Setting(props) {
           />
         )}
       </Stack.Screen>
+      <Stack.Screen
+        name="WidgetSettings"
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      >
+        {(props) => <WidgetSettings {...props} navigate={navigate} />}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }