diff --git a/devices/surface/images/Surface-Devices-400x140.svg b/devices/surface/images/Surface-Devices-400x140.svg
new file mode 100644
index 0000000000..9121e93531
--- /dev/null
+++ b/devices/surface/images/Surface-Devices-400x140.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 140"><defs><style>.cls-1{fill:#939393;}.cls-2{fill:#d8d8d8;}.cls-3{fill:#2f2f2f;}</style></defs><title>Surface-Devices-400x140</title><g id="Layer_2" data-name="Layer 2"><rect class="cls-1" x="75.66" y="15.04" width="128" height="88" rx="5"/><rect class="cls-1" x="116.66" y="119.14" width="50" height="4.81"/><path class="cls-1" d="M167.66,101l-.8,13.08a3.69,3.69,0,0,1-3.3,2.92h-45.2a2.8,2.8,0,0,1-2.8-2.8h0l-.9-13.2h-3v19h59V101Z"/><rect class="cls-2" x="79.66" y="19.04" width="120" height="80"/><path class="cls-1" d="M315.66,122V62.5A2.46,2.46,0,0,0,313.2,60H226.12a2.46,2.46,0,0,0-2.46,2.46h0V122Z"/><rect class="cls-2" x="226.66" y="63.04" width="86" height="53"/><path class="cls-1" d="M322.56,124H216.78c-3.53,0-4.1-5-4.1-5h114S325.29,124,322.56,124Z"/><rect class="cls-3" x="268.66" y="62.04" width="1" height="1"/></g></svg>
\ No newline at end of file
diff --git a/devices/surface/images/Surface-Hub-400x140.svg b/devices/surface/images/Surface-Hub-400x140.svg
new file mode 100644
index 0000000000..473fba1604
--- /dev/null
+++ b/devices/surface/images/Surface-Hub-400x140.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 140" style="enable-background:new 0 0 400 140;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#939393;}
+	.st1{fill:#C2C2C2;}
+	.st2{fill:#D8D8D8;}
+	.st3{opacity:0.2;fill:#2F2F2F;enable-background:new    ;}
+	.st4{opacity:0.2;enable-background:new    ;}
+	.st5{fill:#2F2F2F;}
+	.st6{fill:#808080;}
+	.st7{fill:#0078D4;}
+</style>
+<g id="Layer_1">
+</g>
+<g id="Layer_2">
+	<g>
+		<title>win_it-pro-6</title>
+		<g>
+			<rect x="84.5" y="8.5" class="st0" width="231" height="123"/>
+			<rect x="303.5" y="50.5" class="st1" width="11" height="80"/>
+			<rect x="85.5" y="50.5" class="st1" width="11" height="80"/>
+			<rect x="102.5" y="14.5" class="st2" width="195" height="111"/>
+			<rect x="303.5" y="8.5" class="st1" width="1" height="42"/>
+			<rect x="95.5" y="8.5" class="st1" width="1" height="42"/>
+			<circle class="st3" cx="90.5" cy="44.5" r="2"/>
+			<circle class="st3" cx="90.5" cy="55.5" r="2"/>
+			<circle class="st4" cx="309.5" cy="44.5" r="2"/>
+			<circle class="st4" cx="309.5" cy="55.5" r="2"/>
+		</g>
+	</g>
+	<g>
+		<title>DevicesLaptopTablet-blue</title>
+		<path class="st1" d="M371.9-633v10h4v-2.5c0-0.9,0.5-1.8,1.2-2.4l-0.2,0.1l0,0v-2.6h2v1.4l0,0l-0.2,0.1c0.3-0.1,0.6-0.2,0.9-0.2
+			h0.3v-2.4h2v2.4h8v-4L371.9-633z M375.9-624.5h-2v-5h2V-624.5z"/>
+		<path class="st5" d="M365.9-616.9c0,0.3,0.1,0.5,0.2,0.7c0.1,0.2,0.2,0.4,0.4,0.6c0.2,0.2,0.4,0.3,0.6,0.4
+			c0.2,0.1,0.5,0.2,0.7,0.2h8.1v-8h-4v-10h18v4h2v-6h-22v12.6l-3.3,3.5c-0.3,0.3-0.4,0.6-0.6,1C366-617.6,365.9-617.3,365.9-616.9z"
+			/>
+		<rect x="371.9" y="-623" class="st5" width="4" height="0"/>
+		<polygon class="st5" points="371.9,-633 389.9,-633 389.9,-633 		"/>
+		<path class="st5" d="M397.3-611.6c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.3,0.2-0.5,0.2-0.8v-12c0-0.3-0.1-0.5-0.2-0.8
+			c-0.1-0.2-0.3-0.4-0.4-0.6c-0.2-0.2-0.4-0.3-0.6-0.4c-0.2-0.1-0.5-0.2-0.8-0.2h-16c-0.4,0-0.7,0.1-1,0.3c-0.6,0.3-1,0.9-1,1.6
+			v10.1l0,0v2c0,0.3,0,0.5,0.2,0.8c0.1,0.2,0.2,0.5,0.4,0.6c0.2,0.2,0.4,0.3,0.6,0.4c0.2,0.1,0.5,0.2,0.8,0.2h16
+			c0.3,0,0.5,0,0.8-0.2C396.9-611.2,397.1-611.4,397.3-611.6z M395.9-613h-16v-12h16V-613z"/>
+		<path class="st1" d="M379.9-613h16v-12h-16V-613z M387.9-621.2h2v6.3h-2V-621.2z M384.9-618h2v3.2h-2V-618z M381.9-619.8h2v5h-2
+			V-619.8z"/>
+		<path class="st6" d="M378.9-630.3h-2v2.6l0,0l0.1-0.1l0.2-0.1c0.1-0.1,0.3-0.2,0.5-0.3h0.1c0.2-0.1,0.3-0.2,0.5-0.3l0.4-0.2h0.1
+			l0.2-0.2V-630.3z"/>
+		<path class="st6" d="M378.9-628.9l-0.2,0.1L378.9-628.9z"/>
+		<rect x="381.9" y="-619.8" class="st6" width="2" height="5"/>
+		<rect x="384.9" y="-618" class="st6" width="2" height="3.2"/>
+		<rect x="387.9" y="-621.2" class="st7" width="2" height="6.3"/>
+		<rect x="373.9" y="-629.5" class="st6" width="2" height="5"/>
+		<polygon class="st7" points="381.9,-631.3 379.9,-631.3 379.9,-629 379.9,-629 381.9,-629 381.9,-629 381.9,-629 		"/>
+		<rect x="379.9" y="-631.4" class="st7" width="2" height="0"/>
+	</g>
+</g>
+</svg>
diff --git a/devices/surface/images/Surface-Workplace-400x140.svg b/devices/surface/images/Surface-Workplace-400x140.svg
new file mode 100644
index 0000000000..9bb3779192
--- /dev/null
+++ b/devices/surface/images/Surface-Workplace-400x140.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 140" style="enable-background:new 0 0 400 140;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#2F2F2F;}
+	.st1{fill:#939393;}
+	.st2{fill:#C2C2C2;}
+</style>
+<title>SharePoint_Doc_3_400x140</title>
+<g>
+	<title>users_group</title>
+	<g>
+		<g id="SYMBOLS_1_">
+			<g id="users_group_1_">
+				<path class="st0" d="M108.6,127.9h36.2l0,0c0-9.8,2.4-19.5,6.9-28.2c-15.7-6.7-33.9,0.5-40.6,16.2
+					C109.5,119.6,108.6,123.7,108.6,127.9z"/>
+				<path class="st1" d="M173.1,95.8c-1.8,1.9-3.5,4-5,6.2c-1.5,2.3-2.8,4.7-4,7.2c-2.4,5.8-3.7,12-3.6,18.3h67.2
+					c0-11.9,4.6-23.3,12.8-31.9c-17.5-18.6-46.8-19.5-65.4-2c-0.7,0.6-1.3,1.3-2,2V95.8z"/>
+				<path class="st2" d="M274.2,96.6c-6.9,0-13.6,2.3-19,6.7c-2.2,1.7-4.1,3.7-5.8,5.9c-4,5.3-6.2,11.8-6.2,18.4h61.9
+					C305.2,110.5,291.3,96.6,274.2,96.6L274.2,96.6z"/>
+				<path class="st2" d="M272.9,89c0.4,0,0.9,0,1.3,0c0.5,0,0.9,0,1.3,0c10.1-0.7,17.9-9.1,17.9-19.2c0.1-10.7-8.5-19.5-19.3-19.5
+					c-10.7-0.1-19.5,8.5-19.5,19.3c-0.1,10.3,7.9,18.8,18.1,19.5L272.9,89z"/>
+				<path class="st1" d="M189.4,68.3c4.6,3.1,9.9,4.9,15.3,5.2c0.8,0,1.5,0.2,2.2,0.2c0.7,0,1.4,0,2.2-0.2c17-1.2,29.8-16,28.5-33
+					c-0.8-11.2-7.7-21.1-17.9-25.8l0,0c-8.1-3.8-17.5-3.8-25.6,0l0,0c-15.5,7-22.4,25.3-15.4,40.9C181.1,60.7,184.7,65.1,189.4,68.3
+					z"/>
+				<path class="st0" d="M139.5,42.9c-12.8-0.1-23.2,10.3-23.2,23c0,6.9,3,13.5,8.4,17.9c3.8,3.2,8.6,5.1,13.5,5.4
+					c0.4,0,0.9,0,1.3,0s0.9,0,1.3,0c12.2-0.8,21.7-10.9,21.7-23.1C162.6,53.3,152.3,42.9,139.5,42.9z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/devices/surface/index-new2.md b/devices/surface/index-new2.md
index 57f2a6dd91..409879b4cb 100644
--- a/devices/surface/index-new2.md
+++ b/devices/surface/index-new2.md
@@ -31,7 +31,7 @@ description: Learn about Microsoft Surface and Surface Hub devices.
                                             <div class="card">
                                                 <div class="cardImageOuter">
                                                     <div class="cardImage bgdAccent1"> 
-                                                            <img src="https://docs.microsoft.com/media/hubs/windows/win_it-pro-5.svg" alt="Surface Devices" />
+                                                            <img src="images/surface-devices-400x140.svg" alt="Surface Devices" />
                                                     </div>
                                                 </div>
                                                 <div class="cardText">
@@ -50,7 +50,7 @@ description: Learn about Microsoft Surface and Surface Hub devices.
                                             <div class="card">
                                                 <div class="cardImageOuter">
                                                     <div class="cardImage bgdAccent1"> 
-                                                        <img src="https://docs.microsoft.com/media/hubs/windows/win_it-pro-6.svg" alt="Surface Hub" />
+                                                        <img src="images/surface-hub-400x140.svg" alt="Surface Hub" />
                                                     </div>
                                                 </div>
                                                 <div class="cardText">
@@ -69,12 +69,12 @@ description: Learn about Microsoft Surface and Surface Hub devices.
                                             <div class="card">
                                                 <div class="cardImageOuter">
                                                     <div class="cardImage bgdAccent1"> 
-                                                        <img src="https://docs.microsoft.com/en-us//office/media/icons/small-business-blue.svg" alt="Surface for Business" />
+                                                        <img src="images/surface-workplace-400x140.svg" alt="Surface for Business" />
                                                     </div>
                                                 </div>
                                                 <div class="cardText">
                                                     <h3>Surface for Business</h3>
-                                                    <p>Learn about Surface devices for the modern workplace.</p>
+                                                    <p>Explore how Surface devices are transforming the modern workplace with people-centric design and flexible form factors, helping you get the most out of AI, big data, the cloud, and other foundational technologies.</p>
                                                 </div>
                                             </div>
                                         </div>