diff --git a/src/app/components/Embed.js b/src/app/components/Embed.js
index 72fad465eb32a20c1fe892dfc5ce0724ecab73b8..d6a154c84deacce9ab9030524444c9f6e7a7d6ed 100644
--- a/src/app/components/Embed.js
+++ b/src/app/components/Embed.js
@@ -31,22 +31,24 @@ export default function Embed({ open, onClose, learningObject }) {
             onClose={onClose}
             className="flex justify-center place-items-center m-6"
         >
-            <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg outline outline-1 outline-ice-HC-white">
-                <div className="flex justify-center text-xl font-bold text-darkGray-HC-white m-5">Recurso Incorporado</div>
+            <div className="flex flex-col bg-ice-HC-dark p-6 max-md:p-0 rounded-lg outline outline-1 outline-ice-HC-white max-sm:p-[30px] max-sm:px-[20%]">
+                <div className="flex justify-center text-xl font-bold text-darkGray-HC-white m-5 items-center">Recurso Incorporado</div>
 
-                <div className="flex flex-row justify-center">
-                    <ResourcePreview learningObject={learningObject} setSource={setSource} />
-                    <div className="flex w-[600px] items-center text-darkGray-HC-white justify-center m-5 outline outline-1 outline-darkGray-HC-white rounded-lg p-5">
+                <div className="flex flex-row ">
+                    <div className="flex max-md:justify-center max-lg:hidden">
+                        <ResourcePreview learningObject={learningObject} setSource={setSource} />
+                    </div>
+                    <div className="flex w-[450px] max-md:w-[450px] max-sm:hidden items-center text-darkGray-HC-white justify-center m-5 outline outline-1 outline-darkGray-HC-white rounded-lg p-[50px] ">
                         {iframe}
                     </div>
                 </div>
 
                 <div className="flex flex-col p-3 justify-end">
-                    <div className="flex text-base font-bold text-darkGray-HC-white justify-end">
+                    <div className="flex text-base font-bold text-darkGray-HC-white justify-end max-md:justify-center">
                         <Button
                             disableElevation
                             variant="outlined"
-                            className="border text-lg normal-case text-darkGray-HC-white hover:bg-darkGray-HC-white hover:text-white-HC-dark border-lightGray-HC-white"
+                            className="border text-lg normal-case text-darkGray-HC-white-underline hover:bg-darkGray-HC-white hover:text-white-HC-dark border-lightGray-HC-white"
                             onClick={() => {
                                 navigator.clipboard.writeText(iframe);
                                 setCopied(true);
diff --git a/src/app/components/ShareModal.js b/src/app/components/ShareModal.js
index a53f0b7717f16cbe00d0e122a859594a7bc51f83..a90e8d326f7b2ae26ed5ddef9df4a38d96030344 100644
--- a/src/app/components/ShareModal.js
+++ b/src/app/components/ShareModal.js
@@ -46,7 +46,7 @@ export default function ShareModal({ open, onClose, learningObject, title, type,
       }}
     >
       <div>
-        <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg items-center outline outline-1 outline-ice-HC-white">
+        <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg items-center outline outline-1 outline-ice-HC-white max-sm:">
           <div className="text-xl font-bold text-darkGray-HC-white">{title}</div>
           <div className="p-3 mt-2 flex flex-col sm:flex-row">
             <div className='flex flex-wrap gap-4 justify-center'>