diff --git a/devices/surface/index-new.md b/devices/surface/index-new.md
new file mode 100644
index 0000000000..480967a3f6
--- /dev/null
+++ b/devices/surface/index-new.md
@@ -0,0 +1,137 @@
+--- 
+title: Microsoft Surface documentation and resources
+layout: HubPage
+hide_bc: true
+description: Surface and Surface Hub documentation for admins & IT professionals
+author: robmazz
+ms.author: robmazz
+manager: laurawi
+ms.topic: hub-page
+keywords: Microsoft Surface, Microsoft Surface Hub, Surface documentation
+localization_priority: Normal
+audience: ITPro
+ms.prod: Surface
+description: Learn about Microsoft Surface and Surface Hub devices.
+---
+<div id="main" class="v2">
+    <div class="container">
+        <h1>Product name</h1>
+        <p>Log a <a href="https://aka.ms/maxart">MAX ART</a> bug to request card images.</p>
+        <ul class="pivots">
+            <li>
+                <a href="#home"></a>
+                <ul id="home">
+                    <li>
+                        <a href="#home-all"></a>
+                        <ul id="home-all" class="cardsC">
+                            <li>
+                                <a href="https://technet.microsoft.com/en-us/library/gg293124.aspx">
+                                    <div class="cardSize">
+                                        <div class="cardPadding">
+                                            <div class="card">
+                                                <div class="cardImageOuter">
+                                                    <div class="cardImage bgdAccent1"> 
+                                                        <img src="https://docs.microsoft.com/en-us/office/media/hub-tiles/OfficeAdmins400x140.svg" alt="Office admins" />
+                                                    </div>
+                                                </div>
+                                                <div class="cardText">
+                                                    <h3>Card name</h3>
+                                                    <p>Description text.</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/SkypeForBusiness/skype-for-business-online">
+                                    <div class="cardSize">
+                                        <div class="cardPadding">
+                                            <div class="card">
+                                                <div class="cardImageOuter">
+                                                    <div class="cardImage bgdAccent1"> 
+                                                        <img src="https://docs.microsoft.com/en-us/office/media/hub-tiles/OfficeAdmins400x140.svg" alt="Office admins" />
+                                                    </div>
+                                                </div>
+                                                <div class="cardText">
+                                                    <h3>Card name</h3>
+                                                    <p>Description text.</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/powershell/skype/intro">
+                                    <div class="cardSize">
+                                        <div class="cardPadding">
+                                            <div class="card">
+                                                <div class="cardImageOuter">
+                                                    <div class="cardImage bgdAccent1"> 
+                                                        <img src="https://docs.microsoft.com/en-us/office/media/hub-tiles/OfficeAdmins400x140.svg" alt="Office admins" />
+                                                    </div>
+                                                </div>
+                                                <div class="cardText">
+                                                    <h3>Card name</h3>
+                                                    <p>Description text.</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</div>
+
+---
+
+<ul class="panelContent cardsW">
+    <li>
+        <div class="cardSize">
+            <div class="cardPadding">
+                <div class="card">
+                    <div class="cardText">
+                        <h3>Technical specifications</h3>
+                         <P><a href="https://www.microsoft.com/surface/devices/surface-pro/tech-specs" target="_blank">Surface Pro</a></p>
+                         <P><a href="https://www.microsoft.com/p/surface-book-2/8mcpzjjcc98c?activetab=pivot:techspecstab" target="_blank">Surface Book</a></p>
+                         <P><a href="https://www.microsoft.com/surface/devices/surface-studio/tech-specs" target="_blank">Surface Studio</a><p>
+                         <P><a href="https://www.microsoft.com/surface/devices/surface-go/tech-specs" target="_blank">Surface Go</a></p>
+                         <P><a href="https://www.microsoft.com/surface/devices/surface-laptop/tech-specs" target="_blank">Surface Laptop 2</a></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+    <li>
+        <div class="cardSize">
+            <div class="cardPadding">
+                <div class="card">
+                    <div class="cardText">
+                        <h3>Integrate with Surface devices</h3>
+                        <p>NEED UPDATE</p>
+                        <p>NEED UPDATE</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+    <li>
+        <div class="cardSize">
+            <div class="cardPadding">
+                <div class="card">
+                    <div class="cardText">
+                        <h3>Community</h3>
+                        <p><a href="https://techcommunity.microsoft.com/t5/Surface-IT-Pro-Blog/bg-p/SurfaceITPro" target="_blank">Surface IT Pro blog</a></p>
+                        <p><a href="https://techcommunity.microsoft.com/t5/Surface-Devices/ct-p/SurfaceDevices" target="_blank">Surface Devices Tech Community</a></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/devices/surface/index-new2.md b/devices/surface/index-new2.md
new file mode 100644
index 0000000000..8a5972efe7
--- /dev/null
+++ b/devices/surface/index-new2.md
@@ -0,0 +1,160 @@
+--- 
+title: Microsoft Surface documentation and resources
+layout: HubPage
+hide_bc: true
+description: Surface and Surface Hub documentation for admins & IT professionals
+author: robmazz
+ms.author: robmazz
+manager: laurawi
+ms.topic: hub-page
+keywords: Microsoft Surface, Microsoft Surface Hub, Surface documentation
+localization_priority: Normal
+audience: ITPro
+ms.prod: Surface
+description: Learn about Microsoft Surface and Surface Hub devices.
+---
+<div id="main" class="v2">
+    <div class="container">
+        <h1>Product name</h1>
+        <p>Log a <a href="https://aka.ms/maxart">MAX ART</a> bug to request card images.</p>
+        <ul class="pivots">
+            <li>
+                <a href="#home"></a>
+                <ul id="home">
+                    <li>
+                        <a href="#home-all"></a>
+                        <ul id="home-all" class="cardsK">
+                            <li>
+                                    <div class="cardSize">
+                                        <div class="cardPadding">
+                                            <div class="card">
+                                                <div class="cardImageOuter">
+                                                    <div class="cardImage bgdAccent1"> 
+                                                        <a href="https://technet.microsoft.com/en-us/library/gg293124.aspx">
+                                                            <img src="https://docs.microsoft.com/en-us/office/media/hub-tiles/OfficeAdmins400x140.svg" alt="Office admins" />
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                                <div class="cardText">
+                                                    <h3>Card name</h3>
+                                                    <p>Description</p>
+                                                    <p><a href="">Link name</a></p>
+                                                    <p><a href="">Link name</a></p>
+                                                    <p><a href="">Link name</a></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/SkypeForBusiness/skype-for-business-online">
+                                    <div class="cardSize">
+                                        <div class="cardPadding">
+                                            <div class="card">
+                                                <div class="cardImageOuter">
+                                                    <div class="cardImage bgdAccent1"> 
+                                                        <img src="https://docs.microsoft.com/en-us/office/media/hub-tiles/OfficeAdmins400x140.svg" alt="Office admins" />
+                                                    </div>
+                                                </div>
+                                                <div class="cardText">
+                                                    <h3>Card name</h3>
+                                                    <p>Description</p>
+                                                    <p><a href="">Link name</a></p>
+                                                    <p><a href="">Link name</a></p>
+                                                    <p><a href="">Link name</a></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/powershell/skype/intro">
+                                    <div class="cardSize">
+                                        <div class="cardPadding">
+                                            <div class="card">
+                                                <div class="cardImageOuter">
+                                                    <div class="cardImage bgdAccent1"> 
+                                                        <img src="https://docs.microsoft.com/en-us/office/media/hub-tiles/OfficeAdmins400x140.svg" alt="Office admins" />
+                                                    </div>
+                                                </div>
+                                                <div class="cardText">
+                                                    <h3>Card name</h3>
+                                                    <p>Description</p>
+                                                    <p><a href="">Link name</a></p>
+                                                    <p><a href="">Link name</a></p>
+                                                    <p><a href="">Link name</a></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="fullSpan">
+                              <hr />
+                              <br>
+                              <ul class="cardsFTitle panelContent singlePanelContent" style="display:flex!important;">
+                                    <li>
+                                        <a href="  ">
+                                        <div class="cardSize">
+                                            <div class="cardPadding">
+                                                <div class="card">
+                                                    <div class="cardImageOuter">
+                                                        <div class="cardImage">
+                                                            <img src="https://docs.microsoft.com/en-us/office/media/icons/get-started.svg" alt="Get started" />
+                                                        </div>
+                                                    </div>
+                                                    <div class="cardText">
+                                                        <h3>Link name</h3>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="  ">
+                                        <div class="cardSize">
+                                            <div class="cardPadding">
+                                                <div class="card">
+                                                    <div class="cardImageOuter">
+                                                        <div class="cardImage">
+                                                            <img src="https://docs.microsoft.com/en-us/office/media/icons/chat.svg" alt="Chat" />
+                                                        </div>
+                                                    </div>
+                                                    <div class="cardText">
+                                                        <h3>Link name</h3>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="  ">
+                                        <div class="cardSize">
+                                            <div class="cardPadding">
+                                                <div class="card">
+                                                    <div class="cardImageOuter">
+                                                        <div class="cardImage">
+                                                            <img src="https://docs.microsoft.com/en-us/office/media/icons/user-accounts.svg" alt="User account" />
+                                                        </div>
+                                                    </div>
+                                                    <div class="cardText">
+                                                        <h3>Link name</h3>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</div>