diff --git a/src/components/main/Scrolls.tsx b/src/components/main/Scrolls.tsx
index 900c6046..8b3cf143 100644
--- a/src/components/main/Scrolls.tsx
+++ b/src/components/main/Scrolls.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ScrollMenu } from 'react-horizontal-scrolling-menu';
-import { useQuery } from 'react-query';
-import axios from 'axios';
 import { LeftArrow, RightArrow } from './Arrow';
 import Block from './Block';
+import useRooms from '../../hooks/useRooms';
 import blockInterface from '../../interface/block.interface';
 import TagStore from '../../stores/tagStore';
 
 export default function Scrolls() {
   const { tag } = TagStore();
-
-  const { isLoading, error, data } = useQuery('roomData', async () => {
-    const { data } = await axios.get('https://xn--hq1br4kwqt.com/api/v1/rooms');
-    return data;
-  });
-
+  const { isLoading, error, data } = useRooms();
   if (isLoading)
     return <div style={{ color: 'white', fontSize: '5rem' }}>loading....</div>;
 
diff --git a/src/hooks/useRooms.ts b/src/hooks/useRooms.ts
new file mode 100644
index 00000000..d2018fe2
--- /dev/null
+++ b/src/hooks/useRooms.ts
@@ -0,0 +1,11 @@
+import { useQuery } from 'react-query';
+import axios from 'axios';
+
+const getRooms = async () => {
+  const { data } = await axios.get('https://xn--hq1br4kwqt.com/api/v1/rooms');
+  return data;
+};
+
+export default function useRooms() {
+  return useQuery(['roomData', 'getAll'], getRooms);
+}