diff --git a/public/css/podcast_player.css b/public/css/podcast_player.css
index 1d0cd79a..b6707772 100644
--- a/public/css/podcast_player.css
+++ b/public/css/podcast_player.css
@@ -1,5 +1,6 @@
 .player {
-  border: 1px solid #8d8d8d;
+  inset: 0;
+  border: 1px solid #d7d7d7;
   background-color: white;
   margin-bottom: 20px;
   max-width: 800px;
@@ -7,6 +8,7 @@
   color: #8d8d8d;
   position: relative;
 }
+
 .player:after {
   content: "";
   display: table;
@@ -18,6 +20,7 @@
   padding: 10px;
   border-bottom: 1px solid #8d8d8d;
 }
+
 .meta-container .podcast-title {
   font-size: 20px;
   font-weight: 400;
@@ -34,6 +37,7 @@
   font-family: "Raleway", sans-serif;
   font-weight: 600;
 }
+
 .branding span {
   font-size: 0.85em;
 }
@@ -47,11 +51,15 @@
   padding: 20px;
   display: inline-block;
 }
+
 .time-container:after {
   content: "";
   display: table;
-  clear: both; }
-.time-container .current-time, .time-container .duration {
+  clear: both;
+}
+
+.time-container .current-time,
+.time-container .duration {
   display: inline-block;
   margin: 0 5px;
 }
@@ -62,14 +70,17 @@
 @media screen and (max-width: 39.9375em) {
   .player img.album-art {
     width: 30%;
-    float:left;
+    float: left;
   }
+
   .meta-container {
     padding: 10px 20px;
   }
+
   .podcast-description {
     display: inline-block;
   }
+
   .time-container {
     width: 100%;
   }
@@ -82,17 +93,21 @@
   .player img.album-art {
     width: 160px;
     height: 160px;
-    float:left;
+    float: left;
   }
+
   .meta-container {
     width: calc(100% - 160px)
   }
+
   .meta-container .podcast-title {
     max-width: calc(100% - 150px);
   }
+
   .podcast-description {
     display: none;
   }
+
   .time-container {
     width: calc(100% - 160px)
   }
@@ -113,13 +128,16 @@
   vertical-align: middle;
   background-color: #8d8d8d;
 }
+
 .amplitude-song-played-progress {
   width: calc(100% - 210px);
 }
+
 .amplitude-play-pause.amplitude-paused {
   background: url("../images/podcast_player/play.svg");
   background-size: cover;
 }
+
 .amplitude-play-pause.amplitude-playing {
   background: url("../images/podcast_player/pause.svg");
   background-size: cover;
@@ -133,11 +151,13 @@
     width: 100%;
     border-top: 1px solid #8d8d8d;
   }
+
   .branding {
     font-size: 20px;
   }
 
 }
+
 /*
   Large Player Only
 */
@@ -145,6 +165,7 @@
   .meta-container {
     width: calc(100% - 160px);
   }
+
   progress.amplitude-podcast-played-progress {
     width: 60%;
   }
@@ -191,11 +212,71 @@ progress[value]::-webkit-progress-value {
     width: 100%;
     max-width: 100%;
   }
-  img.album-art, .meta-container, .branding, .podcast-description {
+
+  img.album-art,
+  .meta-container,
+  .branding,
+  .podcast-description {
     display: none;
   }
+
   .time-container {
     width: 100%;
   }
 
 }
+
+/* Site embed size player */
+@media (min-width: 500px) and (max-height: 121px) and (min-height: 119px) {
+  .player {
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    border: 0;
+  }
+
+  .player img.album-art {
+    height: 120px;
+    width: 120px;
+    float: left;
+    inset: 0;
+    border: 1px solid rgba(0, 0, 0, 0.075);
+  }
+
+  img.album-art,
+  .meta-container {
+    display: inline-block;
+    inset: 0;
+    border-right: 1px solid rgba(0, 0, 0, 0.075);
+  }
+
+  .branding,
+  .podcast-description {
+    display: none;
+  }
+
+  .meta-container,
+  .time-container {
+    width: calc(100% - 120px);
+    padding: 18px;
+    float: right;
+  }
+
+  .meta-container {
+    padding: 9px;
+    border-top: 1px solid #d7d7d7;
+    border-bottom: 1px solid rgb(233, 233, 233);
+    display: block;
+
+    div.podcast-title {
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .time-container {
+    border-bottom: 1px solid #d7d7d7;
+  }
+}
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index b5f049af..de7514b8 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -136,6 +136,7 @@ footer {
     }
   }
 }
+
 // User page styling.
 .user-img {
   //border: #e1e1e1 7px solid;
@@ -190,12 +191,13 @@ footer {
 }
 
 .uryplayer-podcast-embed {
-  height: 75px;
-  width: 500px;
+  height: 120px;
   max-width: 100%;
 }
+
 .uryplayer-podcast-code {
-  height: 70px;
+  resize: vertical;
+  min-height: 2em;
   width: 100%;
 }
 
@@ -245,6 +247,7 @@ footer {
 // Responsive: Portrait tablets and up
 
 @media screen and (min-width: 768px) {
+
   // Remove the padding we set earlier
   .header {
     padding-right: 0;
@@ -357,8 +360,17 @@ footer {
   font-size: 0.8em;
 }
 
-.podcast.card {
+.podcast-card {
+  background: #FCFCFC;
   color: #555;
+  border-radius: 1em;
+  overflow: hidden;
+}
+
+// Podcasts list page
+.podcast-list-img {
+  border-radius: 0.4rem;
+  overflow: hidden;
 }
 
 // Styling for responsive map
@@ -398,21 +410,23 @@ body {
   flex-direction: column;
 }
 
-.mainPageGrowingSpacer{
+.mainPageGrowingSpacer {
   flex-grow: 1;
   background-color: $off-white-color;
 }
 
-.container-padded{
+.container-padded {
   border-bottom: 2rem solid transparent;
   margin-top: -2rem;
   border-radius: $border-curve-radius $border-curve-radius 0 0;
   padding-top: 2rem;
 }
-.pageTitleImage{
+
+.pageTitleImage {
   max-inline-size: 90%;
   max-height: 15rem;
 }
+
 .teams-banner {
   background: url("/images/drone-banner.jpg") center center no-repeat;
   background-size: cover;
@@ -426,4 +440,4 @@ body {
     // Remove the height of the nav bar roughly 60px
     padding: calc(5em + 60px) 0 5em;
   }
-}
+}
\ No newline at end of file
diff --git a/views/podcast.tmpl b/views/podcast.tmpl
index 886f0336..7fca0ba4 100644
--- a/views/podcast.tmpl
+++ b/views/podcast.tmpl
@@ -1,4 +1,5 @@
-{{define "title"}}{{.PageContext.ShortName}} | {{.PageContext.ODName}} | {{with .PageData}} {{.Podcast.Title}} {{end}} Podcast {{end}}
+{{define "title"}}{{.PageContext.ShortName}} | {{.PageContext.ODName}} | {{with .PageData}} {{.Podcast.Title}} {{end}}
+Podcast {{end}}
 
 {{define "open-graph"}}
 <meta name="twitter:card" content="summary">
@@ -9,115 +10,109 @@
 {{if .PageData.Podcast.Photo}}
 <meta property="og:image" content="{{.PageContext.FullURL}}{{url .PageData.Podcast.Photo}}">
 {{else}}
-<meta property="og:image" content="{{.PageContext.FullURL}}{{url "/images/open_graph-general.jpg"}}">
+<meta property="og:image" content="{{.PageContext.FullURL}}{{url " /images/open_graph-general.jpg"}}">
 {{end}}
 <meta property="og:type" content="website">
-<meta property="og:url" content="{{.PageContext.FullURL}}{{url "/podcasts/"}}{{.PageData.Podcast.PodcastID}}">
+<meta property="og:url" content="{{.PageContext.FullURL}}{{url " /podcasts/"}}{{.PageData.Podcast.PodcastID}}">
 <meta property="og:description" content="{{ stripHtml .PageData.Podcast.Description}}">
 {{end}}
 
 {{define "content"}}
 
-  <div class="container-fluid on-demand">
-    <div class="container container-padded">
-        <div class="row align-items-end text-center">
-          <div class="col">
-            <h1 class="display-5 header-title">
-                <a href="{{url "/ontap/"}}" title="Go back to {{.PageContext.ODName}}">
-                  {{- .PageContext.ShortName }} {{.PageContext.ODName -}}
-                </a>
-            </h1>
-            <h2 class="display-4">
-              Podcast
-            </h3>
-          </div>
-        </div>
+<div class="container-fluid current-next">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-11 col-md-10 py-2 podcast-card text-center text-lg-left">
+        <h2>
+          <a href="/ontap/" title="Goto {{.PageContext.ShortName}} {{.PageContext.ODName}}">
+            {{- .PageContext.ShortName}} {{.PageContext.ODName -}}
+          </a>: Podcast
+        </h2>
+        <iframe width="100%" src="player/" class="uryplayer-podcast-embed" frameborder="0"></iframe>
+        <a href="/podcasts/" title="Goto {{.PageContext.ShortName}} Podcasts">Listen to more podcasts on demand...</a>
+      </div>
     </div>
   </div>
+</div>
 
-  {{with .PageData}}
-  <div class="container-fluid bg-off-white container-padded">
-    <div class="container container-padded">
-      <div class="row">
-        <div class="col-12 col-lg-3">
-          <img class="img-fluid show-img" src='
+{{with .PageData}}
+<div class="container-fluid bg-off-white container-padded">
+  <div class="container p-3">
+    <div class="row">
+      <div class="col-12 col-sm-5 col-lg-3">
+        <img class="img-fluid show-img" src='
             {{if .Podcast.Photo}}
               {{$.PageContext.FullURL}}{{.Podcast.Photo}}
             {{else}}
               {{url "/images/default_show_profile.png"}}
             {{end}}
           ' alt="{{.Podcast.Title}} Logo">
-        </div>
-        <div class="col-12 col-lg-9">
-          <h1>{{.Podcast.Title}}</h1>
-          {{if .Podcast.Show}}
-            <h3>
-              Brought to you by
-              <a href="{{url "/schedule/shows/"}}{{.Podcast.Show.ShowID}}">
-                {{.Podcast.Show.Title}}
-              </a>
-            </h3>
-          {{end}}
-          <h5 class="text-muted">{{.Podcast.Time.Format "Monday, _2 Jan 2006"}}</h5>
-          <hr>
-          <iframe src="player/" class="uryplayer-podcast-embed" frameborder="0">
-          </iframe>
-          <hr>
-          <h2>Description</h2>
-          <p>{{html .Podcast.Description}}</p>
-          <hr>
-  {{end}}
-          <div class="row justify-content-between">
-            <div class="col-auto mr-auto mw-100 overflow-hidden mb-3">
-              <span class="h5 mg-right-5">Embed Podcast:</span>
-              <a data-toggle="collapse" href="#collapseEmbedCode" role="button" aria-expanded="false" aria-controls="collapseEmbedCode">View Code</a>
-            </div>
-            <div class="col-auto mr-auto mw-100 mb-3 share-links">
-              <span class="h5 mg-right-5">Share:</span>
-              <a href="#"
-                  data-type="twitter"
-                  data-url='{{.PageContext.FullURL}}{{url "/podcasts/"}}{{.PageData.Podcast.PodcastID}}/'
-                  {{if .PageData.Podcast.Photo}}
-                      data-media="{{.PageContext.FullURL}}{{.PageData.Podcast.Photo}}"
-                  {{end}}
-                  data-description="Checkout {{.PageData.Podcast.Title}} on {{.PageContext.LongName}}"
-                  data-via="{{.PageContext.MainTwitter}}"
-                  class="prettySocial fab fa-twitter">
-              </a>
-
-              <a href="#"
-                  data-type="facebook"
-                  data-url='{{.PageContext.FullURL}}{{url "/podcasts/"}}{{.PageData.Podcast.PodcastID}}/'
-                  data-title="{{.PageData.Podcast.Title}} | {{.PageContext.ShortName}}"
-                  data-description="{{.PageData.Podcast.Description}}"
-                  {{if .PageData.Podcast.Photo}}
-                      data-media="{{.PageContext.FullURL}}{{.PageData.Podcast.Photo}}"
-                  {{end}}
-                  class="prettySocial fab fa-facebook">
-              </a>
-            </div>
+      </div>
+      <div class="col-12 col-sm-7 col-lg-9">
+        <h1>{{.Podcast.Title}}</h1>
+        {{if .Podcast.Show}}
+        <h3>
+          Brought to you by
+          <a href='{{url " /schedule/shows/"}}{{.Podcast.Show.ShowID}}'>
+            {{.Podcast.Show.Title}}
+          </a>
+        </h3>
+        {{end}}
+        <h5 class="h3 text-muted">{{.Podcast.Time.Format "Monday, _2 Jan 2006"}}</h5>
+        <hr>
+        <h2>Description</h2>
+        <p>{{html .Podcast.Description}}</p>
+        <hr>
+        {{end}}
+        <div class="row justify-content-between">
+          <div class="col-auto mr-auto mw-100 overflow-hidden mb-3">
+            <span class="h5 mg-right-5">Embed Podcast:</span>
+            <a class="h5" data-toggle="collapse" href="#collapseEmbedCode" role="button" aria-expanded="false"
+              aria-controls="collapseEmbedCode" onclick="toggleShowHide()" id="showHideButton">Show code</a>
+          </div>
+          <div class="col-auto share-links">
+            <span class="h5 mg-right-5">Share:</span>
+            <a href="#" data-type="twitter"
+              data-url='{{.PageContext.FullURL}}{{url "/podcasts/"}}{{.PageData.Podcast.PodcastID}}/' {{if
+              .PageData.Podcast.Photo}} data-media="{{.PageContext.FullURL}}{{.PageData.Podcast.Photo}}" {{end}}
+              data-description="Checkout {{.PageData.Podcast.Title}} on {{.PageContext.LongName}}"
+              data-via="{{.PageContext.MainTwitter}}" class="prettySocial fab fa-twitter">
+            </a>
+            <a href="#" data-type="facebook"
+              data-url='{{.PageContext.FullURL}}{{url "/podcasts/"}}{{.PageData.Podcast.PodcastID}}/'
+              data-title="{{.PageData.Podcast.Title}} | {{.PageContext.ShortName}}"
+              data-description="{{.PageData.Podcast.Description}}" {{if .PageData.Podcast.Photo}}
+              data-media="{{.PageContext.FullURL}}{{.PageData.Podcast.Photo}}" {{end}}
+              class="prettySocial fab fa-facebook">
+            </a>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-  <div class="container-fluid bg-third collapse container-padded" id="collapseEmbedCode">
-    <div class="container container-padded">
-      <h2>Embed this podcast...</h2>
-      <div class="row">
-        <div class="col-12 col-lg-6">
-          <p>Want to put our podcast on your blog or website? Just copy the HTML code below...</p>
-          <textarea class="uryplayer-podcast-code" readonly="readonly" onclick="this.focus(); this.select();" style="border: none;" type="text" cols="30"><iframe width=&quot;500&quot; height=&quot;500&quot; src=&quot;{{$.PageContext.FullURL}}/podcasts/{{.PageData.Podcast.PodcastID}}/player/&quot; frameborder=&quot;0&quot; allowfullscreen > </iframe>
-          </textarea>
+        <div class="collapse" id="collapseEmbedCode">
+          <p>If you want to put our podcast on your blog or website, just <a href="#copybutton" role="button"
+              id="copybutton" onclick="copyIFrame()">copy</a> the HTML code below...</p>
+          <textarea class="uryplayer-podcast-code" readonly="readonly" onclick="this.focus(); this.select();"
+            type="text" rows="1"
+            cols="30"><iframe width=&quot;500&quot; height=&quot;500&quot; src=&quot;{{$.PageContext.FullURL}}/podcasts/{{.PageData.Podcast.PodcastID}}/player/&quot; frameborder=&quot;0&quot; allowfullscreen ></iframe></textarea>
         </div>
       </div>
     </div>
   </div>
+</div>
 {{end}}
 {{define "footer-scripts"}}
 <script src='{{url "/js/show.js"}}?ver={{ .PageContext.CacheBuster }}'></script>
 <script src='{{url "/js/jquery.prettySocial.min.js"}}?ver={{ .PageContext.CacheBuster }}'></script>
 <script type="text/javascript" class="source">
   $(".prettySocial").prettySocial();
+  var codeShown = false;
+
+  function copyIFrame() {
+    navigator.clipboard.writeText("<iframe width=\";500\"; height=\";500\"; src=\";{{$.PageContext.FullURL}}/podcasts/{{.PageData.Podcast.PodcastID}}/player/\"; frameborder=\";0\"; allowfullscreen ></iframe>");
+  }
+  function toggleShowHide() {
+    var link = document.getElementById("showHideButton")
+    codeShown ? link.innerHTML = "Show code" : link.innerHTML = "Hide code";
+    codeShown = !codeShown;
+  }
 </script>
 {{end}}
diff --git a/views/podcasts.tmpl b/views/podcasts.tmpl
index 90f8656e..66585d2a 100644
--- a/views/podcasts.tmpl
+++ b/views/podcasts.tmpl
@@ -2,34 +2,29 @@
 
 {{define "content"}}
 
-<div class="container-fluid on-demand">
-		<div class="container container-padded">
-				<div class="row align-items-end text-center">
-					<div class="col">
-						<h1 class="display-5 header-title">
-								<a href='{{url "/ontap/"}}' title="Go back to {{.PageContext.ODName}}">
-									{{- .PageContext.ShortName }} {{.PageContext.ODName -}}
-								</a>
-            </h1>
-            <h2 class="display-3">
-              Podcasts
-            </h3>
-					</div>
-				</div>
-		</div>
+<div class="container-fluid header-medium on-demand">
+  <div class="container">
+    <div class="row align-items-center text-center">
+      <div class="col">
+        <a href="/ontap" title="Goto {{.PageContext.ShortName}} {{.PageContext.ODName}}">
+        <img class="pageTitleImage" src="/images/OnTap.svg"/></a>
+        <h2 class="display-5">The power of podcasts in the palm of your hand.</h2>
+      </div>
+    </div>
   </div>
+</div>
 
 {{with .PageData}}
 <div class="container-fluid podcasts-container container-padded bg-white">
   <nav class="row nav justify-content-between">
     <span>
       <a class="nav-link
-        {{if gt .PageNumber 1}}
+        {{if eq .PageNumber 1}}
           disabled
         {{end}}
       " href='{{url "/podcasts/"}}page/{{.PageNumberPrev}}'>&larr; Previous page</a>
       <a class="nav-link
-      {{if gt .PageNumber 1}}
+      {{if eq .PageNumber 1}}
         disabled
       {{end}}
       " href='{{url "/podcasts/"}}'>Latest</a>
@@ -47,13 +42,13 @@
   {{range .Podcasts}}
   <div class="row">
     <div class="mobile-hide col-12 col-md-3 col-lg-2">
-      <img class="img-fluid" src='
+    <a href="{{.MicrositeLink.URL}}/"><img class="img-fluid podcast-list-img" src='
         {{if .Photo}}
               {{$.PageContext.FullURL}}{{.Photo}}
         {{else}}
               {{url "/images/default_show_profile.png"}}
         {{end}}
-      ' alt="{{.Title}} Logo">
+      ' alt="{{.Title}} Logo"></a>
     </div>
     <div class="col-12 col-md-9 col-lg-10">
       <h4>
@@ -75,12 +70,12 @@
   <nav class="row nav justify-content-between">
     <span>
       <a class="nav-link
-        {{if gt .PageNumber 1}}
+        {{if eq .PageNumber 1}}
           disabled
         {{end}}
       " href='{{url "/podcasts/"}}page/{{.PageNumberPrev}}'>&larr; Previous page</a>
       <a class="nav-link
-      {{if gt .PageNumber 1}}
+      {{if eq .PageNumber 1}}
         disabled
       {{end}}
       " href='{{url "/podcasts/"}}'>Latest</a>