diff --git a/src/App.css b/src/App.css
index c98e261..5afb373 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,6 +13,49 @@
   stroke: #0366d6;
 }
 
+.twitch .twitch-video {
+  padding-top: 56.25%;
+  position: relative;
+  height: 0;
+}
+
+.twitch .twitch-video iframe {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.twitch .twitch-chat {
+  height: 400px;
+}
+
+.twitch .twitch-chat iframe {
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (min-width: 850px) {
+  .twitch {
+    position: relative;
+  }
+
+  .twitch .twitch-video {
+    width: 75%;
+    padding-top: 42.1875%;
+  }
+
+  .twitch .twitch-chat {
+    width: 25%;
+    height: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+
 a {
   text-decoration: none;
 }
diff --git a/src/App.js b/src/App.js
index 6512f61..4ccac35 100644
--- a/src/App.js
+++ b/src/App.js
@@ -123,33 +123,26 @@ function Header({gitHub, adminLinks}) {
 }
 
 function TwitchStream() {
-  const asyncHero = useAsync(channelStatus, []);
-
   return (
-    <div style={{padding: 24}}>
-      <iframe
-        src="https://player.twitch.tv/?channel=bdougieYO"
-        frameborder="0"
-        allowfullscreen="true"
-        scrolling="no"
-        height="378"
-        width="620"></iframe>
-      {asyncHero.loading && <div>Loading</div>}
-      {asyncHero.error && <div>Error: {asyncHero.error.message}</div>}
-      {asyncHero.result && asyncHero.result.twitchTv.makeRestCall.get.jsonBody.stream && (
+    <div class="twitch">
+      <div class="twitch-video">
+        <iframe
+          src="https://player.twitch.tv/?channel=bdougieYO&mutualfun.live&autoplay=false"
+          frameborder="0"
+          allowFullScreen="true"
+          scrolling="no"
+          height="100%"
+          width="100%"></iframe>
+      </div>
+      <div class="twitch-chat">
         <iframe
-          frameborder="<frameborder width>"
-          scrolling="<scrolling>"
+          frameborder="0"
+          scrolling="no"
           id="bdougieYO>"
           src="https://www.twitch.tv/embed/bdougieYO/chat?parent=mutualfun.live"
-          height="378"
-          width="620"></iframe>
-      )}
-      <a
-        style={{padding: 24}}
-        href="https://www.twitch.tv/bdougieyo?tt_content=text_link&tt_medium=live_embed">
-        Watch bdougieYO on Twitch
-      </a>
+          height="100%"
+          width="100%"></iframe>
+      </div>
     </div>
   );
 }
@@ -222,6 +215,7 @@ class ErrorBoundary extends React.Component<{children: *}, {error: ?Error}> {
 }
 
 function PostsRoot({preloadedQuery}: {preloadedQuery: any}) {
+  const asyncHero = useAsync(channelStatus, []);
   const data: App_QueryResponse = usePreloadedQuery<App_QueryResponse>(
     postsRootQuery,
     preloadedQuery,
@@ -233,7 +227,11 @@ function PostsRoot({preloadedQuery}: {preloadedQuery: any}) {
     return (
       <>
         <Header gitHub={data.gitHub} adminLinks={[]} />
-        <TwitchStream />
+        {asyncHero.error && <div>Error: {asyncHero.error.message}</div>}
+        {asyncHero.result &&
+          asyncHero.result.twitchTv.makeRestCall.get.jsonBody.stream && (
+            <TwitchStream />
+          )}
         <Posts repository={respository} />
       </>
     );