diff --git a/devices/surface/index-draft.md b/devices/surface/index-draft.md
new file mode 100644
index 0000000000..7fc6e200fe
--- /dev/null
+++ b/devices/surface/index-draft.md
@@ -0,0 +1,211 @@
+--- 
+layout: HubPage
+hide_bc: true
+description: Office documentation for admins & IT professionals
+ms.author: robmazz
+author: robmazz
+ms.topic: hub-page
+keywords: Microsoft 365, Microsoft 365 Enterprise, Microsoft 365 documentation, Office 365, Windows 10 Enterprise, EMS, Enterprise Mobility + Security, enterprise
+localization_priority: Normal
+audience: microsoft-business
+ms.prod: microsoft-365-enterprise
+title: Microsoft 365 Enterprise documentation and resources
+description: Learn about the product documentation and resources available for Microsoft 365 Enterprise IT admins, information workers, and partners.
+---
+<div id="main" class="v2">
+    <div class="container">
+        <h1>Microsoft 365 Enterprise documentation and resources</h1>
+        <P>Learn how to plan, deploy, and use Microsoft Office 365, Windows 10, and Enterprise Mobility + Security together in your organization. These services provide an integrated and secure infrastructure that enables teamwork and unlocks creativity.</p>
+        <P></p>
+        <ul class="pivots">
+            <li>
+                <a href="#home"></a>
+                <ul id="home">
+                    <li>
+                        <a href="#home-all"></a>
+                        <ul id="home-all" class="cardsF">
+                            <li>
+                                <div class="cardSize">
+                                    <div class="cardPadding">
+                                        <div class="card">
+                                            <div class="cardImageOuter">
+                                                <div class="cardImage">
+                                                    <img src="https://docs.microsoft.com/office/media/icons/blocks-blue.svg" alt="Building blocks" />
+                                                </div>
+                                            </div>
+                                            <div class="cardText">
+                                                <h3>Explore</h3>
+                                                <P><a href="microsoft-365-overview.md" target="_blank">Overview</a></p>
+                                                <P><a href="https://docs.microsoft.com/Office365/Enterprise/microsoft-cloud-it-architecture-resources" target="_blank">Architecture models</a></p>
+                                                <P><a href="http://Microsoft365.com/it" target="_blank">Microsoft 365 for IT</a></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="cardSize">
+                                    <div class="cardPadding">
+                                        <div class="card">
+                                            <div class="cardImageOuter">
+                                                <div class="cardImage">
+                                                    <img src="https://docs.microsoft.com/office/media/icons/deploy-blue.svg" alt="Deploy arrow" />
+                                                </div>
+                                            </div>
+                                            <div class="cardText">
+                                                <h3>Deploy</h3>
+                                                <P><a href="https://www.microsoft.com/fasttrack/microsoft-365" target="_blank">FastTrack</a></p>
+                                                <P><a href="deploy-microsoft-365-enterprise.md" target="_blank">Deployment guide</a></p>
+                                                <P><a href="https://aka.ms/howtoshift" target="_blank">Modern Desktop deployment</a></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="cardSize">
+                                    <div class="cardPadding">
+                                        <div class="card">
+                                            <div class="cardImageOuter">
+                                                <div class="cardImage">
+                                                    <img src="https://docs.microsoft.com/office/media/icons/security-blue.svg" alt="A shield with an exclamation mark" />
+                                                </div>
+                                            </div>
+                                            <div class="cardText">
+                                                <h3>Manage security &amp; compliance</h3>
+                                                <P><a href="https://docs.microsoft.com/microsoft-365/compliance/compliance-solutions-overview" target="_blank">Compliance solutions</a></p>
+                                                <P><a href="https://docs.microsoft.com/Office365/SecurityCompliance/" target="_blank">Office 365 Security &amp; Compliance</a></p>
+                                                <P><a href="microsoft-365-policies-configurations.md" target="_blank">Identity &amp; device access</a></p>
+                                                <P><a href="https://docs.microsoft.com/windows/security/threat-protection/index" target="_blank">Windows Defender ATP</a></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li> 
+                            <li>
+                                <div class="cardSize">
+                                    <div class="cardPadding">
+                                        <div class="card">
+                                            <div class="cardImageOuter">
+                                                <div class="cardImage">
+                                                    <img src="https://docs.microsoft.com/office/media/icons/education-tutorial-blue.svg" alt="Graduation cap" />
+                                                </div>
+                                            </div>
+                                            <div class="cardText">
+                                                <h3>Train your users</h3>
+                                                <P><a href="https://support.office.com/office-training-center" target="_blank">Office 365</a></p>
+                                                <P><a href="https://www.microsoft.com/itpro/windows-10/end-user-readiness" target="_blank">Windows 10</a></p>
+                                                <P><a href="https://docs.microsoft.com/intune-user-help/use-managed-devices-to-get-work-done" target="_blank">Intune &amp; Company Portal app</a></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li> 
+                            <li>
+                                <div class="cardSize">
+                                    <div class="cardPadding">
+                                        <div class="card">
+                                            <div class="cardImageOuter">
+                                                <div class="cardImage">
+                                                    <img src="https://docs.microsoft.com/media/logos/logo_Office.svg" alt="Office logo" />
+                                                </div>
+                                            </div>
+                                            <div class="cardText">
+                                                <h3>Manage Office 365</h3>
+                                                <P><a href="https://docs.microsoft.com/office365/enterprise/" target="_blank">Office 365 Enterprise</a></p>
+                                                <P><a href="https://support.office.com/office365admin" target="_blank">Office 365 Business</a></p>
+                                                <P><a href="https://docs.microsoft.com/DeployOffice/deployment-guide-for-office-365-proplus" target="_blank">Office 365 ProPlus</a></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="cardSize">
+                                    <div class="cardPadding">
+                                        <div class="card">
+                                            <div class="cardImageOuter">
+                                                <div class="cardImage">
+                                                    <img src="https://docs.microsoft.com/office/media/icons/lock-protected-blue.svg" alt="Lock protected" />
+                                                </div>
+                                            </div>
+                                            <div class="cardText">
+                                                <h3>Manage Enterprise Mobility + Security</h3>
+                                                <P><a href="https://docs.microsoft.com/cloud-app-security/what-is-cloud-app-security" target="_blank">Microsoft Cloud App Security</a></p>
+                                                <P><a href="https://docs.microsoft.com/intune/index" target="_blank">Microsoft Intune</a></p>                              <P><a href="https://docs.microsoft.com/azure/active-directory" target="_blank">Azure Active Directory</a></p>
+                                                <P><a href="https://docs.microsoft.com/azure/information-protection/" target="_blank">Azure Information Protection</a></p>
+                                                <P><a href="https://docs.microsoft.com/azure-advanced-threat-protection/" target="_blank">Azure Advanced Threat Protection</a></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="fullSpan">
+                              <hr />
+                              <br>
+                              <ul class="cardsF panelContent singlePanelContent" style="display:flex!important;">
+                                    <li>
+                                        <div class="cardSize">
+                                            <div class="cardPadding">
+                                                <div class="card">
+                                                    <div class="cardImageOuter">
+                                                        <div class="cardImage">
+                                                            <img src="https://docs.microsoft.com/office/media/icons/developer-blue.svg" alt="Code, developer" />
+                                                        </div>
+                                                    </div>
+                                                    <div class="cardText">
+                                                        <h3>Develop for Microsoft 365</h3>
+                                                        <P><a href="https://developer.microsoft.com/office" target="_blank">Office 365 Dev Center</a></p>
+                                                        <P><a href="https://developer.microsoft.com/windows/enterprise" target="_blank">Windows Dev Center</a></p>
+                                                        <P><a href="https://developer.microsoft.com/graph" target="_blank">Microsoft Graph</a></p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <div class="cardSize">
+                                            <div class="cardPadding">
+                                                <div class="card">
+                                                    <div class="cardImageOuter">
+                                                        <div class="cardImage">
+                                                            <img src="https://docs.microsoft.com/office/media/icons/caret-right-blue.svg" alt="More arrow" />
+                                                        </div>
+                                                    </div>
+                                                    <div class="cardText">
+                                                        <h3>Other Microsoft 365 products</h3>
+                                                        <P><a href="https://docs.microsoft.com/microsoft-365/business/" target="_blank">Microsoft 365 Business</a></p>
+                                                        <P><a href="https://docs.microsoft.com/education/" target="_blank">Microsoft 365 Education</a></p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </li> 
+                                    <li>
+                                        <div class="cardSize">
+                                            <div class="cardPadding">
+                                                <div class="card">
+                                                    <div class="cardImageOuter">
+                                                        <div class="cardImage">
+                                                            <img src="https://docs.microsoft.com/office/media/icons/chat.svg" alt="Chat" />
+                                                        </div>
+                                                    </div>
+                                                    <div class="cardText">
+                                                        <h3>Need support?</h3>
+                                                        <P><a href="https://azure.microsoft.com/support/options/" target="_blank">Azure</a></p>
+                                                        <P><a href="https://support.office.com/article/Contact-support-for-business-products-Admin-Help-32a17ca7-6fa0-4870-8a8d-e25ba4ccfd4b" target="_blank">Office 365</a></p>
+                                                        <P><a href="http://support.microsoft.com/products/windows" target="_blank">Windows 10</a></p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </li>
+                              </ul>
+                            </li>
+                       </ul>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file