diff --git a/app/src/Scenes/Event.js b/app/src/Scenes/Event.js
index b03506f..10d44ea 100644
--- a/app/src/Scenes/Event.js
+++ b/app/src/Scenes/Event.js
@@ -1,9 +1,9 @@
 import React from "react";
 import Market from "../components/Market";
 import { useParams, Link } from "react-router-dom";
-import useEvent from "../hooks/useEvent";
 import formatStartTime from "../helpers/startTime";
 import OddsToggle from "../components/OddsToggle";
+import { useDebounce, useEvent, useStore, useMarkets } from "../hooks/";
 
 const INITIAL_MARKETS = 10;
 
@@ -11,11 +11,24 @@ const Event = () => {
   const { eventId } = useParams();
   const event = useEvent(eventId);
 
+  useMarkets(event);
+
+  const allMarkets = useDebounce(useStore("markets"), 10);
+
+  const orderedMarkets = React.useMemo(
+    () =>
+      Object.values(allMarkets)
+        .sort((a, b) => a.displayOrder > b.displayOrder)
+        .map(({ marketId }) => marketId)
+        .slice(0, INITIAL_MARKETS),
+    [allMarkets]
+  );
+
   if (!event) {
     return <div>Loading...</div>;
   }
 
-  const { markets, startTime } = event;
+  const { startTime } = event;
 
   return (
     <div className="c-full-event">
@@ -47,7 +60,7 @@ const Event = () => {
           <div className="c-full-event__meta-item">Request a Bet</div>
         )}
       </div>
-      {markets.slice(0, INITIAL_MARKETS).map(id => (
+      {orderedMarkets.slice(0, INITIAL_MARKETS).map(id => (
         <Market key={id} id={id} />
       ))}
     </div>
diff --git a/app/src/components/Market.js b/app/src/components/Market.js
index 8f900b7..3cf5ebf 100644
--- a/app/src/components/Market.js
+++ b/app/src/components/Market.js
@@ -1,6 +1,6 @@
 import React from "react";
 import Outcome from "./Outcome";
-import useMarket from "../hooks/useMarket";
+import { useMarket } from "../hooks/";
 
 const Market = ({ id }) => {
   const market = useMarket(id);
diff --git a/app/src/components/Outcome.js b/app/src/components/Outcome.js
index 2d453ed..532dd66 100644
--- a/app/src/components/Outcome.js
+++ b/app/src/components/Outcome.js
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import useOutcome from "../hooks/useOutcome";
+import { useOutcome } from "../hooks/";
 import { OddsContext } from "../App";
 
 const Outcome = ({ id }) => {
diff --git a/app/src/hooks/index.js b/app/src/hooks/index.js
new file mode 100644
index 0000000..191eaef
--- /dev/null
+++ b/app/src/hooks/index.js
@@ -0,0 +1,17 @@
+import useDebounce from "./useDebounce";
+import useEvent from "./useEvent";
+import useLiveEvents from "./useLiveEvents";
+import useMarket from "./useMarket";
+import useMarkets from "./useMarkets";
+import useOutcome from "./useOutcome";
+import useStore from "./useStore";
+
+export {
+  useDebounce,
+  useEvent,
+  useLiveEvents,
+  useMarket,
+  useMarkets,
+  useOutcome,
+  useStore
+};
diff --git a/app/src/hooks/useDebounce.js b/app/src/hooks/useDebounce.js
new file mode 100644
index 0000000..6abca43
--- /dev/null
+++ b/app/src/hooks/useDebounce.js
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;
diff --git a/app/src/hooks/useEvent.js b/app/src/hooks/useEvent.js
index c51b892..6472988 100644
--- a/app/src/hooks/useEvent.js
+++ b/app/src/hooks/useEvent.js
@@ -1,6 +1,6 @@
 import { useContext, useEffect } from "react";
 import { SocketContext } from "../App";
-import useStore from "./useStore";
+import { useStore } from "./";
 
 const useEvent = id => {
   const [socket] = useContext(SocketContext);
diff --git a/app/src/hooks/useLiveEvents.js b/app/src/hooks/useLiveEvents.js
index 26a346d..6870ee2 100644
--- a/app/src/hooks/useLiveEvents.js
+++ b/app/src/hooks/useLiveEvents.js
@@ -1,6 +1,6 @@
 import { useContext, useEffect } from "react";
 import { SocketContext } from "../App";
-import useStore from "./useStore";
+import { useStore } from "./";
 
 const useLiveEvents = () => {
   const [socket] = useContext(SocketContext);
diff --git a/app/src/hooks/useMarket.js b/app/src/hooks/useMarket.js
index 977c399..fbfcc7e 100644
--- a/app/src/hooks/useMarket.js
+++ b/app/src/hooks/useMarket.js
@@ -1,14 +1,16 @@
 import { useContext, useEffect } from "react";
 import { SocketContext } from "../App";
-import useStore from "./useStore";
+import { useStore } from "./";
 
 const useMarket = id => {
   const [socket] = useContext(SocketContext);
   const market = useStore("markets", id);
 
   useEffect(() => {
-    socket.send(JSON.stringify({ type: "getMarket", id }));
-  }, [id, socket]);
+    if (!market) {
+      socket.send(JSON.stringify({ type: "getMarket", id }));
+    }
+  }, [id, socket, market]);
 
   return market;
 };
diff --git a/app/src/hooks/useMarkets.js b/app/src/hooks/useMarkets.js
new file mode 100644
index 0000000..a240041
--- /dev/null
+++ b/app/src/hooks/useMarkets.js
@@ -0,0 +1,15 @@
+import { useContext, useEffect } from "react";
+import { SocketContext } from "../App";
+
+const useMarkets = event => {
+  const [socket] = useContext(SocketContext);
+
+  useEffect(() => {
+    if (!event) return;
+    event.markets.forEach(id =>
+      socket.send(JSON.stringify({ type: "getMarket", id }))
+    );
+  }, [event, socket]);
+};
+
+export default useMarkets;
diff --git a/app/src/hooks/useOutcome.js b/app/src/hooks/useOutcome.js
index d0281a0..d655c2a 100644
--- a/app/src/hooks/useOutcome.js
+++ b/app/src/hooks/useOutcome.js
@@ -1,6 +1,6 @@
 import { useContext, useEffect } from "react";
 import { SocketContext } from "../App";
-import useStore from "./useStore";
+import { useStore } from "./";
 
 const useOutcome = id => {
   const outcome = useStore("outcomes", id);