diff --git a/docfiles/script-page.css b/docfiles/script-page.css
new file mode 100644
index 000000000000..e96170bdb179
--- /dev/null
+++ b/docfiles/script-page.css
@@ -0,0 +1,147 @@
+body#root {
+    font-size: 12pt;
+    display: flex;
+    flex-direction: column;
+}
+
+body#root.share-page {
+    font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+body#root.share-page #pagemenu .ui.header {
+    font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-weight: 500;
+}
+
+body#root.share-page #pagemenu {
+    height: 4rem;
+    min-height: 4rem !important;
+}
+
+body#root.share-page .left.menu {
+    align-items: center;
+}
+
+body#root.share-page .ui.mini.image.mclogo {
+    width: 45px;
+    max-height: 45px;
+}
+
+.page-header {
+    flex-grow: 0;
+}
+
+.mainbody {
+    margin-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+#page-header-wrapper {
+    display: flex;
+    flex-direction: row;
+    height: 4rem;
+    min-height: 4rem !important;
+}
+
+.page-header-item {
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+
+.page-header-content {
+    /* aligns with edge of embedded simulator */
+    padding-left: 10px;
+    max-width: 50%;
+    flex-shrink: 1;
+}
+
+.page-header-content .ui.header {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.show-code-toggle {
+    flex-grow: 1;
+    padding-left: 1rem;
+}
+
+.no-grow {
+    flex-grow: 0;
+}
+
+.ui.container.script-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.script-embed {
+    width: 100%;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    flex-grow: 1;
+}
+
+.script-bookend {
+    flex-grow: 0;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+.script-frame {
+    width: 100%;
+    height: 100%;
+}
+
+.script-info {
+    width: 100%;
+}
+
+#abuse-message {
+    padding: 0 !important;
+    margin-bottom: 0.2em;
+}
+
+.ui.header:first-child {
+    margin-top: 0.2rem !important;
+}
+
+.abuse.content {
+    color: #333;
+    padding: 0.5rem;
+}
+@media only screen and (max-width: 1144px) {
+    .ui.container.mainbody {
+        padding-left: 0!important;
+        padding-right: 0!important;
+        margin-left: auto!important;
+        margin-right: auto!important;
+    }
+}
+
+/* tablet */
+@media only screen and (max-width: 768px) {
+    body#root.share-page #pagemenu {
+        height: 2.8rem;
+        min-height: 2.8rem !important;
+    }
+    .ui.container.mainbody, .page-header .ui.container {
+        margin: 0 !important;
+    }
+}
+
+@media only screen and (min-width: 769px) {
+    .ui.container.mainbody, .page-header .ui.container {
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    .mainbody {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+}
diff --git a/docfiles/script.html b/docfiles/script.html
index 16d43eaa4698..a6078478e49c 100644
--- a/docfiles/script.html
+++ b/docfiles/script.html
@@ -4,63 +4,145 @@
 <head>
     <meta charset="UTF-8">
     <title>@name@</title>
-    <meta name="Description" content="@description@" />
 
     <!-- @include meta.html -->
-    <!-- @include head.html -->
+    <!-- @include scripthead.html -->
 
     <link rel="alternate" type="application/json+oembed" href="@oembedurl@&format=json" />
     <link rel="alternate" type="text/xml+oembed" href="@oembedurl@&format=xml" />
 </head>
 
-<body id='root' class='root'>
+<body id='root' class='root expandIt share-page'>
 
-
-    <!-- @include pageheader.html -->
+    <div class="showDesktop page-header">
+        <div class="ui container">
+            <div id="page-header-wrapper">
+                <div class="page-header-item page-header-content no-grow">
+                    <h2 class="ui item header">@title@</h2>
+                </div>
+                <div class="page-header-item show-code-toggle">
+                    <a href="/@versionsuff@#pub:@id@" class="ui tiny button">Edit Code</a>
+                </div>
+                <div class="page-header-item no-grow">
+                    <a href="https://makecode.com/" title="Go to Microsoft MakeCode"
+                        aria-label="Microsoft MakeCode Logo" role="menuitem" target="blank" rel="noopener"
+                        class="ui item logo organization">
+                        <img class="ui logo portrait hide" src="./static/Microsoft-logo_rgb_c-gray.png"
+                            alt="Microsoft MakeCode Logo">
+                        <img class="ui mini image portrait only" src="./static/Microsoft-logo_rgb_c-gray-square.png"
+                            alt="Microsoft MakeCode Logo">
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
     <!-- @include macros.html -->
     <aside id=main-container class=box>
         @BODY@
     </aside>
 
+    <div class="ui main container mainbody script-content">
+        <iframe id="embed-frame" class="script-embed" src="/@versionsuff@#sandbox:@id@"
+            sandbox="allow-popups allow-forms allow-scripts allow-same-origin" frameborder="0"></iframe>
+        <div class="script-bookend">
+            <div id="abuse-message" class="ui tiny blue message">
+                <div class="ui grid padded">
+                    <div class="abuse content">
+                        <p>
+                            The content above is provided by a user, and is not endorsed by Microsoft.
+                            <a style='text-decoration:underline' id="abuse" href="#">Report abuse</a> if you think it's
+                            not appropriate.
+                        </p>
+                    </div>
+                </div>
+            </div>
 
+            <div class="ui small modal" id='abusemodal'>
+                <div class="header">Report abuse</div>
+                <div class="content">
+                    <div class="ui form">
+                        <div class="field">
+                            <label>Why do you find it offensive?</label>
+                            <textarea id='abusetext' rows="2"></textarea>
+                        </div>
+                    </div>
+                </div>
+                <div class="actions">
+                    <div class="ui ok button violet">
+                        <i class='ui flag icon'></i> Submit
+                    </div>
+                    <div class="ui cancel button">
+                        <i class='ui cancel icon'></i> Cancel
+                    </div>
+                </div>
+            </div>
 
-    <div class="ui main container mainbody">
-
-        @breadcrumb@
-
-        <!-- @include abuse.html -->
-        <h1 class="ui header">
-            <div class="ui content">
-                @title@ 
-                <!-- @ifdef editbutton -->
-                <a href="/#pub:@id@" class="ui primary button">Edit</a>
-                <!-- @endif -->
-                <div class='sub header humantime' data-time="@time@">@humantime@</span>
+            <div class="ui small modal" id='abusedone'>
+                <div class="header">Report sent</div>
+                <div class="content">
+                    <p>
+                        Thank you for helping keep Microsoft MakeCode a friendly place!
+                    </p>
+                </div>
+                <div class="actions">
+                    <div class="ui ok green button">
+                        <i class='ui trophy icon'></i> OK
+                    </div>
+                </div>
             </div>
-        </h1>
-        <p class="ui content description">
-            @description@
-        </p>
 
-        <div class="ui container">
-            <div style="position:relative;height:0;padding-bottom:70%;overflow:hidden;">
-                <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="/@versionsuff@#sandbox:@id@" sandbox="allow-popups allow-forms allow-scripts allow-same-origin"
-                    frameborder="0"></iframe>
+
+            <script>
+                $(function () {
+                    var id = "@id@";
+                    var now = Math.round(Date.now() / 1000);
+                    $(".humantime").each(function () {
+                        $(this).text(
+                            describetime(now, parseInt($(this).data("time")))
+                        )
+                    })
+                    $("#abuse").click(function () {
+                        $("#abusemodal")
+                            .modal({
+                                onApprove: function () {
+                                    $.ajax({
+                                        type: 'POST',
+                                        url: '/api/@id@/abusereports',
+                                        data: JSON.stringify({
+                                            text: $('#abusetext').val()
+                                        }),
+                                        success: function () {
+                                            $("#abusedone").modal("show");
+                                        },
+                                        contentType: "application/json",
+                                        dataType: 'json'
+                                    });
+                                }
+                            })
+                            .modal("show");
+                    })
+                })
+            </script>
+        </div>
+        <div class="script-bookend">
+            <div style="text-align: center;">
+
+                <div class="ui container horizontal mini link list">
+                    <!-- <a class="ui item " href="https://makecode.com/contact " target="_blank " rel="noopener ">Contact Us</a> -->
+                    <a class="ui item " href="https://makecode.com/privacy " target="_blank " rel="noopener ">Privacy
+                        &amp; Cookies</a>
+                    <a class="ui item " href="https://makecode.com/termsofuse " target="_blank " rel="noopener "> Terms
+                        Of Use</a>
+                    <a class="ui item " href="https://makecode.com/trademarks " target="_blank "
+                        rel="noopener ">Trademarks</a>
+                    <div class="ui item ">© 2019 Microsoft</div>
+                </div>
             </div>
         </div>
 
         @body@
-
     </div>
 
-
-<script>
-const script = @JSON@;
-// do something with it
-</script>
-
-    <!-- @include footer.html -->
-    <!-- @include langpicker.html -->
     <!-- @include tracking.html -->
 </body>
 
diff --git a/docfiles/scripthead.html b/docfiles/scripthead.html
new file mode 100644
index 000000000000..c242d419283a
--- /dev/null
+++ b/docfiles/scripthead.html
@@ -0,0 +1,17 @@
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+<meta name="viewport"
+    content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+<meta name="Description" content="@description@" />
+<link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/doccdn/semantic.css" />
+<link id="blocklycss" data-rtl="/blb/rtlblockly.css" rel="stylesheet" href="/doccdn/blockly.css" />
+<link rel="stylesheet" href="/docfiles/style.css" />
+<link rel="stylesheet" href="/docfiles/vs.css" />
+<link rel="stylesheet" href="/docfiles/target.css" />
+<link rel="stylesheet" href="/docfiles/script-page.css" />
+
+<script src="/doccdn/jquery.js"></script>
+<script src="/doccdn/semantic.js"></script>
+
+<style>
+    @targetstyle@
+</style>
\ No newline at end of file
