diff --git a/App.tsx b/App.tsx
index 86a21ae..bc59c49 100644
--- a/App.tsx
+++ b/App.tsx
@@ -98,8 +98,8 @@ export default function App(): ReactElement {
 
 export type RootStackParamList = {
   Home: undefined;
-  Room: { id: number };
-  CreateRoom: undefined;
+  Room: { roomid: string; endpoint: string };
+  CreateRoom: { endpoint: string };
   RoomList: undefined;
   EditDeck: undefined;
   Preferences: undefined;
diff --git a/src/screens/create-room/index.tsx b/src/screens/create-room/index.tsx
index b3c4cb9..432716c 100644
--- a/src/screens/create-room/index.tsx
+++ b/src/screens/create-room/index.tsx
@@ -1,44 +1,54 @@
-import React, { ReactElement } from "react";
-import {
-  StyleSheet,
-  View,
-  Text,
-  Button,
-  ScrollView,
-  TextInput,
-} from "react-native";
+import React, { ReactElement, useEffect, useRef } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import { Button, Input } from "react-native-elements";
 import { StackNavigationProp } from "@react-navigation/stack";
+import { RouteProp } from "@react-navigation/native";
 import { RootStackParamList } from "../../../App";
-import { gql, useMutation } from "@apollo/client";
 import { Formik } from "formik";
 import * as Yup from "yup";
 
-const CREATE_ROOM = gql`
-  mutation CreateRoom($name: String!, $player: String!) {
-    createRoom(name: $name, player: $player) {
-      id
-      name
-      players
-    }
-  }
-`;
-
 export default function CreateRoomScreen({
+  route,
   navigation,
 }: {
+  route: CreateRoomScreenRouteProp;
   navigation: CreateRoomScreenNavigationProp;
 }): ReactElement {
-  const [createRoom] = useMutation(CREATE_ROOM, {
-    onCompleted: (data) => {
-      console.log(data.createRoom.id);
-      navigation.navigate("Room", { id: data.createRoom.id });
-    },
-  });
+  // const [createRoom] = useMutation(CREATE_ROOM, {
+  //   onCompleted: (data) => {
+  //     console.log(data.createRoom.id);
+  //     navigation.navigate("Room", { id: data.createRoom.id });
+  //   },
+  // });
+  const { endpoint } = route.params;
+  const websocket = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    websocket.current = new WebSocket(`ws://${endpoint}/ws`);
+    websocket.current.onmessage = (event) => {
+      if (event.data.startsWith("{")) {
+        const json = JSON.parse(event.data);
+        if (json.status === "ok") {
+          navigation.navigate("Room", {
+            roomid: json.data.id,
+            endpoint: endpoint,
+          });
+        }
+      }
+    };
+    return () => {
+      if (websocket.current != null) {
+        websocket.current.close();
+      }
+    };
+  }, []);
 
   const onSubmit = async (values: { name: string }) => {
     // データ送信
     console.log(values);
-    createRoom({ variables: { name: values.name, player: "piypiyo" } });
+    if (websocket.current != null) {
+      websocket.current.send(`/create ${values.name}`);
+    }
   };
 
   const schema = Yup.object().shape({
@@ -48,51 +58,50 @@ export default function CreateRoomScreen({
       .required("ルーム名を入力してください"),
   });
   return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <View>
-        <Formik
-          initialValues={{
-            name: "",
-          }}
-          validateOnMount
-          validationSchema={schema}
-          onSubmit={(values) => onSubmit(values)}
-        >
-          {({
-            handleSubmit,
-            handleChange,
-            handleBlur,
-            isValid,
-            isSubmitting,
-            values,
-            errors,
-            touched,
-          }) => (
-            <>
-              <View>
-                {errors.name && touched.name ? (
-                  <Text>{errors.name}</Text>
-                ) : null}
-                <TextInput
-                  value={values.name}
-                  onChangeText={handleChange("name")}
-                  onBlur={handleBlur("name")}
-                  placeholder="ルーム名を入力してください"
-                />
-              </View>
-              <Button
-                title="Submit"
-                onPress={() => handleSubmit()}
-                disabled={!isValid || isSubmitting}
-              />
-            </>
-          )}
-        </Formik>
-      </View>
-    </ScrollView>
+    <View style={styles.container}>
+      <Formik
+        initialValues={{
+          name: "",
+        }}
+        validateOnMount
+        validationSchema={schema}
+        onSubmit={(values) => onSubmit(values)}
+      >
+        {({
+          handleSubmit,
+          handleChange,
+          handleBlur,
+          isValid,
+          isSubmitting,
+          values,
+          errors,
+          touched,
+        }) => (
+          <>
+            <View>
+              {errors.name && touched.name ? <Text>{errors.name}</Text> : null}
+            </View>
+            <Input
+              label="新規ルーム名"
+              value={values.name}
+              onChangeText={handleChange("name")}
+              onBlur={handleBlur("name")}
+              placeholder="ルーム名を入力してください"
+            />
+            <Button
+              title="Submit"
+              onPress={() => handleSubmit()}
+              disabled={!isValid || isSubmitting}
+              style={styles.button}
+            />
+          </>
+        )}
+      </Formik>
+    </View>
   );
 }
 
+type CreateRoomScreenRouteProp = RouteProp<RootStackParamList, "CreateRoom">;
 type CreateRoomScreenNavigationProp = StackNavigationProp<
   RootStackParamList,
   "CreateRoom"
@@ -105,4 +114,5 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  button: { margin: 10 },
 });
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
index 319019d..3911bf9 100644
--- a/src/screens/home/index.tsx
+++ b/src/screens/home/index.tsx
@@ -1,10 +1,10 @@
 import { StatusBar } from "expo-status-bar";
 import React, { ReactElement, useState, useEffect } from "react";
-import { StyleSheet, View, TextInput } from "react-native";
+import { StyleSheet, View } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { Text } from "react-native-elements";
+import { Input } from "react-native-elements";
 
-const DEFAULT_ENDPOINT = "127.0.0.1";
+export const DEFAULT_ENDPOINT = "127.0.0.1";
 export default function HomeScreen(): ReactElement {
   const [endpoint, setEndpoint] = useState(DEFAULT_ENDPOINT);
   useEffect(() => {
@@ -34,8 +34,8 @@ export default function HomeScreen(): ReactElement {
   // TODO ユーザーに関する情報（ユーザーアイコン，ユーザーネーム）の実装
   return (
     <View style={styles.container}>
-      <Text>サーバーアドレス</Text>
-      <TextInput
+      <Input
+        label="サーバーアドレス"
         style={styles.input}
         onChangeText={(input) => setEndpoint(input)}
         value={endpoint}
@@ -52,7 +52,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   input: {
-    width: "50%",
     borderWidth: 1,
     borderColor: "#ccc",
   },
diff --git a/src/screens/room-list/index.tsx b/src/screens/room-list/index.tsx
index 3b77f46..ad1037d 100644
--- a/src/screens/room-list/index.tsx
+++ b/src/screens/room-list/index.tsx
@@ -1,65 +1,102 @@
-import React, { ReactElement, useState, useEffect } from "react";
-import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native";
-import { SearchBar, ListItem } from "react-native-elements";
+import React, { ReactElement, useState, useEffect, useRef } from "react";
+import {
+  StyleSheet,
+  SafeAreaView,
+  FlatList,
+  ActivityIndicator,
+  RefreshControl,
+} from "react-native";
+import { SearchBar, ListItem, Icon } from "react-native-elements";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../../../App";
-import { gql, useQuery, useMutation } from "@apollo/client";
 import { FloatingAction } from "react-native-floating-action";
-import { Icon } from "react-native-elements";
+import { useIsFocused } from "@react-navigation/native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { DEFAULT_ENDPOINT } from "../home/index";
 
-const ROOMS_QUERY = gql`
-  query {
-    rooms {
-      id
-      name
-    }
-  }
-`;
-
-const ENTER_ROOM = gql`
-  mutation EnterRoom($player: String!, $roomId: Int!) {
-    enterRoom(player: $player, roomId: $roomId) {
-      id
-      name
-      players
-    }
-  }
-`;
+type Room = { name: string; id: string; num: number };
+type RoomList = Room[];
 
 export default function RoomListScreen({
   navigation,
 }: {
   navigation: RoomListScreenNavigationProp;
 }): ReactElement {
-  const [isLoading, setLoading] = useState(true);
-  const [displayData, setDisplayData] = useState([]);
-  const [result, setResult] = useState([]);
-  const [text, setText] = useState("");
-  const { data, loading, error } = useQuery(ROOMS_QUERY);
-  const [enterRoom] = useMutation(ENTER_ROOM, {
-    onCompleted: (data) => {
-      console.log(data.enterRoom.id);
-      navigation.navigate("Room", { id: data.enterRoom.id });
-    },
-  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [displayData, setDisplayData] = useState<RoomList>([]);
+  const [searchInput, setSearchInput] = useState("");
+  const isFocused = useIsFocused();
+  const [endpoint, setEndPoint] = useState<string>(DEFAULT_ENDPOINT);
+  const [roomListData, setRoomListData] = useState<RoomList>([]);
+  const [updated, setUpdated] = useState(false);
+  const websocket = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    if (updated) {
+      websocket.current = new WebSocket(`ws://${endpoint}/ws`);
+      websocket.current.onopen = () => {
+        console.log("opened");
+        if (websocket.current != null) {
+          websocket.current.send("/list");
+        }
+      };
+      websocket.current.onmessage = (event) => {
+        console.log(event.data);
+        if (event.data.startsWith("{")) {
+          const json = JSON.parse(event.data);
+          setRoomListData(json.data.rooms);
+        }
+      };
+      return () => {
+        if (websocket.current != null) {
+          websocket.current.close();
+        }
+      };
+    }
+  }, [updated]);
+
+  const getEndPoint = async () => {
+    let endpointFromPreferences = DEFAULT_ENDPOINT;
+    try {
+      endpointFromPreferences =
+        (await AsyncStorage.getItem("@endpoint")) || DEFAULT_ENDPOINT;
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setEndPoint(endpointFromPreferences);
+      setUpdated(true);
+    }
+  };
 
   useEffect(() => {
-    if (typeof data != "undefined") {
-      setDisplayData(data.rooms);
-      setResult(data.rooms);
-      setLoading(loading);
+    if (isFocused) {
+      setIsLoading(true);
+      getEndPoint();
     }
-  }, [data]);
+    return () => {
+      setUpdated(false);
+      console.log("set updated false");
+    };
+  }, [isFocused]);
+
+  useEffect(() => {
+    if (typeof roomListData != "undefined") {
+      setDisplayData(roomListData);
+      setIsLoading(false);
+    }
+  }, [roomListData]);
 
   const handlePress: (id: string) => void = (id) => {
-    enterRoom({ variables: { player: "", roomId: parseInt(id) } });
+    if (websocket.current != null) {
+      navigation.navigate("Room", { roomid: id, endpoint: endpoint });
+    }
   };
 
   const searchFilter = (text: string) => {
-    setLoading(true);
-    setText(text);
-    const newData = result.filter((item: { name: string; id: string }) => {
-      const itemData = `${item.name.toUpperCase()} ${item.id.toUpperCase()}`;
+    setIsLoading(true);
+    setSearchInput(text);
+    const newData = roomListData.filter((item: Room) => {
+      const itemData = `${item.name.toUpperCase()} ${item.id}`;
 
       const textData = text.toUpperCase();
 
@@ -67,13 +104,12 @@ export default function RoomListScreen({
     });
 
     setDisplayData(newData);
-    setLoading(false);
+    setIsLoading(false);
   };
 
-  const keyExtractor = (_item: { name: string; id: string }, index: number) =>
-    index.toString();
+  const keyExtractor = (_item: Room, index: number) => index.toString();
 
-  const renderItem = ({ item }: { item: { name: string; id: string } }) => (
+  const renderItem = ({ item }: { item: Room }) => (
     <ListItem bottomDivider onPress={() => handlePress(item.id)}>
       <ListItem.Content>
         <ListItem.Title style={styles.title}>{item.name}</ListItem.Title>
@@ -91,16 +127,31 @@ export default function RoomListScreen({
     },
   ];
 
-  if (error) console.log(error.message);
+  const onRefresh = () => {
+    if (
+      websocket.current != null &&
+      websocket.current.readyState == WebSocket.OPEN
+    ) {
+      websocket.current.send("/list");
+    }
+  };
+
+  const onPressFloadtingActionIcons = (name: string | undefined) => {
+    switch (name) {
+      case "createRoom":
+        navigation.navigate("CreateRoom", { endpoint: endpoint });
+        break;
+    }
+  };
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <SearchBar
         placeholder="ルーム検索"
         lightTheme
         onChangeText={(text) => searchFilter(text)}
         autoCorrect={false}
-        value={text}
+        value={searchInput}
       />
       {isLoading ? (
         <ActivityIndicator />
@@ -109,15 +160,18 @@ export default function RoomListScreen({
           keyExtractor={keyExtractor}
           data={displayData}
           renderItem={renderItem}
+          refreshControl={
+            <RefreshControl refreshing={isLoading} onRefresh={onRefresh} />
+          }
         />
       )}
       <FloatingAction
-        overrideWithAction={true}
+        // overrideWithAction={true}
         actions={floadtingActions}
         color={"#03A9F4"}
-        onPressItem={() => navigation.navigate("CreateRoom")}
+        onPressItem={onPressFloadtingActionIcons}
       />
-    </View>
+    </SafeAreaView>
   );
 }
 
diff --git a/src/screens/room/index.tsx b/src/screens/room/index.tsx
index 184a322..4f8ff57 100644
--- a/src/screens/room/index.tsx
+++ b/src/screens/room/index.tsx
@@ -1,13 +1,17 @@
 import React, { ReactElement, useRef, useEffect } from "react";
 import { StyleSheet, View, Text, Animated, PanResponder } from "react-native";
 // import { StackNavigationProp } from "@react-navigation/stack";
-// import { RouteProp } from "@react-navigation/native";
-// import { RootStackParamList } from "../../../App";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { RouteProp } from "@react-navigation/native";
+import { RootStackParamList } from "../../../App";
 
-export default function RoomScreen(): ReactElement {
+export default function RoomScreen({
+  route,
+}: {
+  route: RoomScreenRouteProp;
+}): ReactElement {
+  const { roomid, endpoint } = route.params;
   const pan = useRef(new Animated.ValueXY()).current;
-  const socket = useRef<WebSocket | null>(null);
+  const websocket = useRef<WebSocket | null>(null);
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: () => true,
@@ -27,37 +31,45 @@ export default function RoomScreen(): ReactElement {
       }),
       onPanResponderRelease: () => {
         pan.flattenOffset();
-        if (socket.current != null) {
-          // ポジションをjsonとしてサーバに送信
-          socket.current.send(JSON.stringify(pan));
+        // ポジションをjsonとしてサーバに送信
+        if (
+          websocket.current != null &&
+          websocket.current.readyState == WebSocket.OPEN
+        ) {
+          websocket.current.send(JSON.stringify(pan));
         }
       },
     })
   ).current;
 
   useEffect(() => {
-    (async () => {
-      try {
-        const endpointFromPreferences = await AsyncStorage.getItem("@endpoint");
-        if (endpointFromPreferences == null) {
-          socket.current = new WebSocket("ws://127.0.0.1/ws");
-        } else {
-          socket.current = new WebSocket(`ws://${endpointFromPreferences}/ws`);
+    try {
+      websocket.current = new WebSocket(`ws://${endpoint}/ws`);
+      websocket.current.onopen = () => {
+        // ルーム入室
+        websocket.current?.send(`/join ${roomid}`);
+      };
+      // イベント受け取り
+      websocket.current.onmessage = (event) => {
+        console.log("received event:" + event.data);
+        if (event.data.startsWith('{"x')) {
+          // TODO サーバ側ですべてjson parsableになるよう実装
+          const data = JSON.parse(event.data);
+          pan.setValue({ x: data.x, y: data.y });
+        } else if (event.data == "Someone joined") {
+          // TODO 3人以上のとき、2人以上から送られてくることになり、危険
+          websocket.current?.send(JSON.stringify(pan));
         }
-        // イベント受け取り
-        socket.current.onmessage = (event) => {
-          console.log("received event:" + event.data);
-          if (event.data.startsWith("{")) {
-            // TODO サーバ側ですべてjson parsableになるよう実装
-            const data = JSON.parse(event.data);
-            pan.setValue({ x: data.x, y: data.y });
-          }
-        };
-      } catch (error) {
-        // 設定読み込みエラー
-        console.log(error);
+      };
+    } catch (error) {
+      // 設定読み込みエラー
+      console.log(error);
+    }
+    return () => {
+      if (websocket.current != null) {
+        websocket.current.close();
       }
-    })();
+    };
   }, []);
 
   // TODO WebSocket接続エラーの対応
@@ -76,7 +88,7 @@ export default function RoomScreen(): ReactElement {
   );
 }
 
-// type RoomScreenRouteProp = RouteProp<RootStackParamList, "Room">;
+type RoomScreenRouteProp = RouteProp<RootStackParamList, "Room">;
 // type RoomScreenNavigationProp = StackNavigationProp<RootStackParamList, "Room">;
 
 const styles = StyleSheet.create({