diff --git a/src/pages/support/Connect.jsx b/src/pages/support/Connect.jsx
index 61b5f582..31a19dfd 100644
--- a/src/pages/support/Connect.jsx
+++ b/src/pages/support/Connect.jsx
@@ -1,7 +1,21 @@
 import React from "react";
 
 const Connect = () => {
-  return <div>Connect</div>;
+  return  <div className="misc-wrapper">
+  <h2 className="mb-2 mx-2">Coming Soon!</h2>
+  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
+  Thank you for your patience!</p>
+  <div className="mt-4">
+      <img
+          src="../assets/img/illustrations/girl-doing-yoga-light.png"
+          alt="girl-doing-yoga-light"
+          aria-label="Girl doing yoga light"
+          width="500"
+          className="img-fluid"
+          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
+          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
+  </div>
+</div>;
 };
 
 export default Connect;
diff --git a/src/pages/support/Documentation.jsx b/src/pages/support/Documentation.jsx
index b3f447aa..fad15f99 100644
--- a/src/pages/support/Documentation.jsx
+++ b/src/pages/support/Documentation.jsx
@@ -1,7 +1,21 @@
 import React from "react";
 
 const Documentation = () => {
-  return <div>Documentation</div>;
+  return  <div className="misc-wrapper">
+  <h2 className="mb-2 mx-2">Coming Soon!</h2>
+  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
+  Thank you for your patience!</p>
+  <div className="mt-4">
+      <img
+          src="../assets/img/illustrations/girl-doing-yoga-light.png"
+          alt="girl-doing-yoga-light"
+          aria-label="Girl doing yoga light"
+          width="500"
+          className="img-fluid"
+          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
+          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
+  </div>
+</div>;
 };
 
 export default Documentation;
diff --git a/src/pages/support/Support.jsx b/src/pages/support/Support.jsx
index ca3f1779..aac9a4b5 100644
--- a/src/pages/support/Support.jsx
+++ b/src/pages/support/Support.jsx
@@ -1,7 +1,21 @@
 import React from "react";
 
 const Support = () => {
-  return <div>Support</div>;
+  return  <div className="misc-wrapper">
+  <h2 className="mb-2 mx-2">Coming Soon!</h2>
+  <p className="mb-4 mx-2">We're currently working on this feature and will have it ready shortly.
+  Thank you for your patience!</p>
+  <div className="mt-4">
+      <img
+          src="../assets/img/illustrations/girl-doing-yoga-light.png"
+          alt="girl-doing-yoga-light"
+          aria-label="Girl doing yoga light"
+          width="500"
+          className="img-fluid"
+          data-app-dark-img="illustrations/girl-doing-yoga-dark.png"
+          data-app-light-img="illustrations/girl-doing-yoga-light.png" />
+  </div>
+</div>;
 };
 
 export default Support;