diff --git a/src/features/docs/view/Stoplight.tsx b/src/features/docs/view/Stoplight.tsx
index 7e0dd80b..9263e677 100644
--- a/src/features/docs/view/Stoplight.tsx
+++ b/src/features/docs/view/Stoplight.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react"
+import { Box } from "@mui/material"
 import { API } from "@stoplight/elements"
 import "@stoplight/elements/styles.min.css"
 import LoadingWrapper from "./LoadingWrapper"
 
-const Swagger = ({ url }: { url: string }) => {
+const Stoplight = ({ url }: { url: string }) => {
   // The Stoplight component does not provide a callback to let us know
   // when loading ends so in order to show our loading indicator, we load
   // the specification before showing the Stoplight component.
@@ -20,10 +21,40 @@ const Swagger = ({ url }: { url: string }) => {
   return (
     <LoadingWrapper showLoadingIndicator={isLoading}>
       {!isLoading && document &&
-        <API apiDescriptionDocument={document} router="hash" />
+        <ResponsiveStoplight document={document} />
       }
     </LoadingWrapper>
   )
 }
 
-export default Swagger
+const ResponsiveStoplight = ({ document }: { document: string }) => {
+  return (
+    <>
+      <Box sx={{
+        display: { xs: "block", sm: "none" },
+        width: "100%",
+        height: "100%",
+        padding: 2 
+      }}>
+        <API
+          apiDescriptionDocument={document}
+          router="hash"
+          layout="stacked"
+        />
+      </Box>
+      <Box sx={{
+        display: { xs: "none", sm: "block" },
+        width: "100%",
+        height: "100%",
+      }}>
+        <API
+          apiDescriptionDocument={document}
+          router="hash"
+          layout="sidebar"
+        />
+      </Box>
+    </>
+  )
+} 
+
+export default Stoplight