diff --git a/petstore/petstoreapp/soulmachines-react-app/src/components/ContentCardSwitch.js b/petstore/petstoreapp/soulmachines-react-app/src/components/ContentCardSwitch.js
index 15655e27..d4a4f0a6 100644
--- a/petstore/petstoreapp/soulmachines-react-app/src/components/ContentCardSwitch.js
+++ b/petstore/petstoreapp/soulmachines-react-app/src/components/ContentCardSwitch.js
@@ -6,6 +6,7 @@ import Markdown from './ContentCards/Markdown';
 import Link from './ContentCards/Link';
 import Image from './ContentCards/Image';
 import Video from './ContentCards/Video';
+import ButtonWithImage from './ContentCards/ButtonWithImage';
 import { setActiveCards, animateCamera } from '../store/sm/index';
 import ImageCarousel from './ContentCards/ImageCarousel';
 
@@ -47,6 +48,10 @@ function ContentCardSwitch({
       element: Video,
       removeOnClick: false,
     },
+    buttonWithImage: {
+      element: ButtonWithImage,
+      removeOnClick: false,
+    },
   };
 
   if ('type' in card === false) {
diff --git a/petstore/petstoreapp/soulmachines-react-app/src/components/ContentCards/ButtonWithImage.js b/petstore/petstoreapp/soulmachines-react-app/src/components/ContentCards/ButtonWithImage.js
new file mode 100644
index 00000000..accaa28e
--- /dev/null
+++ b/petstore/petstoreapp/soulmachines-react-app/src/components/ContentCards/ButtonWithImage.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+function ButtonWithImage({ data, className }) {
+  const {
+    title, imageUrl, description, imageAltText, buttonText,
+  } = data;
+  return (
+    <div className={className}>
+      <div className="card">
+        <div className="d-flex justify-content-center">
+          <img src={imageUrl} alt={imageAltText || description} />
+        </div>
+        <div className="card-body">
+          <h5>{title}</h5>
+          <p>{description}</p>
+          <div className="d-flex justify-content-center">
+            {/* open ButtonWithImage in new tab */}
+            <button type="button">
+              {buttonText}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ButtonWithImage.propTypes = {
+  data: PropTypes.objectOf({
+    title: PropTypes.string.isRequired,
+    imageUrl: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    imageAltText: PropTypes.string,
+    buttonText: PropTypes.string,
+  }).isRequired,
+  className: PropTypes.string.isRequired,
+};
+
+export default styled(ButtonWithImage)`
+  width: 20rem;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+`;
+
+// {
+//   "type": "buttonWithImage",
+//   "id": "buttonWithImage",
+//   "data": {
+//     "title": "Soul Machines",
+//     "imageUrl": "https://www.soulmachines.com/wp-content/uploads/cropped-sm-favicon-180x180.png",
+//     "description":"Soul Machines is the leader in astonishing AGI",
+//     "imageAltText": "some text",
+//     "buttonText": "push me"
+//   }
+// }
diff --git a/petstore/petstoreapp/soulmachines-react-app/src/routes/DPChat.js b/petstore/petstoreapp/soulmachines-react-app/src/routes/DPChat.js
index fd7f761b..7e532044 100644
--- a/petstore/petstoreapp/soulmachines-react-app/src/routes/DPChat.js
+++ b/petstore/petstoreapp/soulmachines-react-app/src/routes/DPChat.js
@@ -109,7 +109,7 @@ function DPChat({
         {/* middle row */}
         <div
           className="row d-flex justify-content-end align-items-center flex-grow-1 ps-3 pe-3"
-          style={{ overflow: 'scroll' }}
+          style={{ overflow: 'hidden' }}
           ref={ccDisplaRef}
         >
           <div className="col col-md-5 d-flex align-items-end align-items-md-center" style={{ height: `${ccDisplayHeight}px` || 'auto' }}>