diff --git a/app/assets/stylesheets/sticky-nav.scss b/app/assets/stylesheets/sticky-nav.scss
index 641020aa3..22d7f3d04 100644
--- a/app/assets/stylesheets/sticky-nav.scss
+++ b/app/assets/stylesheets/sticky-nav.scss
@@ -116,7 +116,7 @@
     margin-left: 2px;
     font-family: $monospace;
     .row{
-      padding: calc(5px + 0.2vw) 0px;
+      padding: calc(3px + 0.1vw) 0px;
       display: inline-block;
       width: 96%;
     }
diff --git a/app/controllers/html_variants_controller.rb b/app/controllers/html_variants_controller.rb
index 45dc1b5b7..01806bd23 100644
--- a/app/controllers/html_variants_controller.rb
+++ b/app/controllers/html_variants_controller.rb
@@ -3,9 +3,13 @@ class HtmlVariantsController < ApplicationController
 
   def index
     authorize HtmlVariant
-    @user_variants = current_user.html_variants.order("created_at DESC")
-    @all_published_variants = HtmlVariant.where(published: true).order("created_at DESC")
-    @preview_path = Article.where(featured: true, published: true).order("published_at DESC").first&.path.to_s
+    @html_variants = if params[:state] == "mine"
+                       current_user.html_variants.order("created_at DESC").includes(:user)
+                     elsif params[:state] == "admin"
+                       HtmlVariant.where(published: true).order("created_at DESC").includes(:user)
+                     else
+                       HtmlVariant.where(published: true, approved: true).order("success_rate DESC").includes(:user)
+                     end
   end
 
   def new
@@ -13,11 +17,19 @@ class HtmlVariantsController < ApplicationController
     @html_variant = HtmlVariant.new
     if params[:fork_id]
       @fork = HtmlVariant.find(params[:fork_id])
-      @html_variant.name = @fork.name + " FORK"
+      @html_variant.name = @fork.name + " FORK-#{rand(10000)}"
       @html_variant.html = @fork.html
     end
   end
 
+  def show
+    @story_show = true
+    @@article_show = true
+    @html_variant = HtmlVariant.find(params[:id])
+    authorize @html_variant
+    render layout: false
+  end
+
   def edit
     @html_variant = HtmlVariant.find(params[:id])
     authorize @html_variant
@@ -29,7 +41,8 @@ class HtmlVariantsController < ApplicationController
     @html_variant.group = "article_show_sidebar_cta"
     @html_variant.user_id = current_user.id
     if @html_variant.save
-      redirect_to "/html_variants"
+      flash[:success] = "HTML Variant Created"
+      redirect_to "/html_variants/#{@html_variant.id}/edit"
     else
       render :new
     end
@@ -39,7 +52,8 @@ class HtmlVariantsController < ApplicationController
     @html_variant = HtmlVariant.find(params[:id])
     authorize @html_variant
     if @html_variant.update(html_variant_params)
-      redirect_to "/html_variants"
+      flash[:success] = "HTML Variant Updated"
+      redirect_to "/html_variants/#{@html_variant.id}/edit"
     else
       render :edit
     end
diff --git a/app/models/html_variant.rb b/app/models/html_variant.rb
index 86f6134e9..da6e2da40 100644
--- a/app/models/html_variant.rb
+++ b/app/models/html_variant.rb
@@ -7,6 +7,7 @@ class HtmlVariant < ApplicationRecord
   belongs_to :user, optional: true
   has_many :html_variant_trials
   has_many :html_variant_successes
+  before_save :prefix_all_images
 
   def calculate_success_rate!
     self.success_rate = html_variant_successes.size.to_f / (html_variant_trials.size * 10.0) # x10 because we only capture every 10th
@@ -37,4 +38,46 @@ class HtmlVariant < ApplicationRecord
       errors.add(:base, "cannot change once published and approved")
     end
   end
+
+  def prefix_all_images
+    # wrap with Cloudinary or allow if from giphy or githubusercontent.com
+    doc = Nokogiri::HTML.fragment(html)
+    doc.css("img").each do |img|
+      src = img.attr("src")
+      next unless src
+      # allow image to render as-is
+      img["src"] = if giphy_img?(src)
+                     src.gsub("https://media.", "https://i.")
+                   else
+                     img_of_size(src, 420)
+                   end
+    end
+    self.html = doc.to_html
+  end
+
+  def giphy_img?(source)
+    uri = URI.parse(source)
+    return false if uri.scheme != "https"
+    return false if uri.userinfo || uri.fragment || uri.query
+    return false if uri.host != "media.giphy.com" && uri.host != "i.giphy.com"
+    return false if uri.port != 443 # I think it has to be this if its https?
+
+    uri.path.ends_with?(".gif")
+  end
+
+  def img_of_size(source, width = 420)
+    quality = if source && (source.include? ".gif")
+                66
+              else
+                "auto"
+              end
+    cl_image_path(source,
+      type: "fetch",
+      width: width,
+      crop: "limit",
+      quality: quality,
+      flags: "progressive",
+      fetch_format: "auto",
+      sign_url: true).gsub(",", "%2C")
+  end
 end
diff --git a/app/views/articles/_sticky_nav.html.erb b/app/views/articles/_sticky_nav.html.erb
index ca538ba55..8f6b40c1e 100644
--- a/app/views/articles/_sticky_nav.html.erb
+++ b/app/views/articles/_sticky_nav.html.erb
@@ -46,7 +46,7 @@
       <%= follow_button(@actor) %>
     </div>
     <% if @actor.class.name == "User" %>
-      <%= render "articles/user_metadata" %>
+      <%= render "articles/user_metadata", context: "sidebar" %>
     <% elsif @actor.class.name == "Organization" && @actor.approved_and_filled_out_cta? %>
       <div class="primary-sticky-nav-org-summary">
         <%= @actor.cta_processed_html.html_safe %>
diff --git a/app/views/articles/_user_metadata.html.erb b/app/views/articles/_user_metadata.html.erb
index 4ed35444d..8ac99dec3 100644
--- a/app/views/articles/_user_metadata.html.erb
+++ b/app/views/articles/_user_metadata.html.erb
@@ -50,7 +50,7 @@
           .user-profile-header {min-height: 398px;}
         </style>
       <% end %>
-      <% if @user.email_public %>
+      <% if @user.email_public && context != "sidebar" %>
         <div class="row">
           <div class="key">
             email
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index 2de506a2e..60fd8298e 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -174,7 +174,7 @@
         </p>
       </div>
     </div>
-    <%= render "articles/user_metadata" %>
+    <%= render "articles/user_metadata", context: "profile" %>
   </div>
 <% elsif @tag %>
   <style>
diff --git a/app/views/html_variants/_form.html.erb b/app/views/html_variants/_form.html.erb
index e4d2312ca..b2468601d 100644
--- a/app/views/html_variants/_form.html.erb
+++ b/app/views/html_variants/_form.html.erb
@@ -1,3 +1,8 @@
+<% flash.each do |key, value| %>
+  <div class="flash flash-<%= key %>"><%= value %></div>
+<% end %>
+
+
 <% if @html_variant.errors.any? %>
   <div id="error_explanation">
     <h2><%= pluralize(@html_variant.errors.count, "error") %> prohibited this block from being saved:</h2>
@@ -18,9 +23,17 @@
   <% end %>
   <%= f.label :html %>
   <%= f.text_area :html, placeholder: 'HTML to be shown. Make sure all CSS is properly scoped, and all HTML tags are closed, etc. Manditory field.' %>
-  <%= f.label :published %>
-  <%= f.check_box :published %>
-  <%= f.label :target_tag %>
-  <%= f.text_field :target_tag, placeholder: 'One tag, e.g. javascript. Optional targeting.' %>
+  <div class="form-sub-details">
+    <%= f.label :published %>
+    <%= f.check_box :published %>
+    <%= f.label :target_tag %>
+    <%= f.text_field :target_tag, placeholder: 'One tag, e.g. javascript. Optional targeting.' %>
+  </div>
   <%= f.submit %>
+<% end %>
+<% if @html_variant.html.present? %>
+  <h1 style="text-align:center;">Preview:</h1>
+  <div class="html-variant-wrapper" style="width: 310px;margin:20px auto;">
+    <%= @html_variant.html.html_safe %>
+  </div>
 <% end %>
\ No newline at end of file
diff --git a/app/views/html_variants/_page_styles.html.erb b/app/views/html_variants/_page_styles.html.erb
index f3ee523e4..542a9096a 100644
--- a/app/views/html_variants/_page_styles.html.erb
+++ b/app/views/html_variants/_page_styles.html.erb
@@ -1,14 +1,36 @@
 <style>
   .html-variants-page {
     margin: 100px auto;
-    width: 800px;
+    width: 1100px;
     max-width: 96%;
+    overflow: hidden;
   }
+  .html-variants-page nav a {
+    display: inline-block;
+    padding: 5px 12px;
+    border-radius: 3px;
+    color: blue;
+  }
+  .html-variants-page nav a.selected {
+    background: blue;
+    color: white;
+    font-size: 1.1em;
+    font-weight: bold;
+  }
+
   h1 a {
     border: 1px solid black;
     padding: 10px 40px;
     border-radius: 100px;
   }
+  .flash {
+    background: green;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 3px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
   input, textarea {
     width: 100%;
     font-size: 20px;
@@ -25,6 +47,17 @@
   }
   textarea {
     height: calc(100vh - 500px);
+    font-size: 0.8em;
+    overflow-x: scroll;
+    overflow-wrap: normal;
+  }
+  .form-sub-details input {
+    display: inline-block;
+    max-width: 40%;
+    margin-left: 1%;
+  }
+  .form-sub-details input[type="checkbox"] {
+    max-width: 5%;
   }
   #error_explanation {
     margin-bottom: 20px;
@@ -33,16 +66,28 @@
     border: 1px solid black;
     padding: 15px 15px 5px;
     border-radius: 3px;
-    margin-bottom: 15px;
+    margin: 15px;
+    width: 450px;
+    height: 550px;
+    float: left;
+    overflow: hidden;
+    position: relative;
   }
   .html-variants-page-single-variant h3 {
     margin-top: 0px;
+    font-size:1.3em;
 
   }
+  .html-variants-page-single-variant iframe {
+    border: 0px;
+    width: 310px;
+    height: 350px;
+  }
   .html-variants-page-single-variant-details {
-    margin: 5px 0px 0px;
-    padding: 10px 0px;
+    padding: 10px;
     border-top: 1px solid gray;
+    position: absolute;
+    bottom:0;left:0;right:0;
   }
   .pill {
     padding: 3px 10px;
diff --git a/app/views/html_variants/_single_html_variant.html.erb b/app/views/html_variants/_single_html_variant.html.erb
index b040d2c68..df961d9be 100644
--- a/app/views/html_variants/_single_html_variant.html.erb
+++ b/app/views/html_variants/_single_html_variant.html.erb
@@ -1,18 +1,18 @@
     <div class="html-variants-page-single-variant">
+      @<%= html_variant.user.username %>:
       <h3>
         <%= html_variant.name %>
       </h3>
-      <%= html_variant.html %>
+      <iframe src="/html_variants/<%= html_variant.id %>"></iframe>
       <div class="html-variants-page-single-variant-details">
         <% if html_variant.published %>
          <span class='pill published'>published</span>
          <a class='pill' href="/html_variants/new?fork_id=<%= html_variant.id %>">fork</a>
         <% else %>
-         <a class='pill' href="/html_variants/<%= html_variant.id %>/edit">edit</a>
+         <a class='pill' href="/html_variants/<%= html_variant.id %>/edit">view/edit</a>
         <% end %>
-        <a class='pill' href="<%= @preview_path %>?html_variant_id=<%= html_variant.id %>&state=<%= html_variant.updated_at.to_i %>" target="_blank">preview</a>
         <% if html_variant.approved %>
-         <span class='pill approved'>approved</span>
+         <span class='pill approved'><%= html_variant.success_rate %></span>
         <% elsif admin %>
           <%= form_for(html_variant) do |f| %>
             <%= f.hidden_field :approved, value: "true" %>
diff --git a/app/views/html_variants/edit.html.erb b/app/views/html_variants/edit.html.erb
index 8d7f70d63..0170339a3 100644
--- a/app/views/html_variants/edit.html.erb
+++ b/app/views/html_variants/edit.html.erb
@@ -1,6 +1,7 @@
 <%= render "page_styles" %>
 
 <div class="html-variants-page" >
+  <div><a href="/html_variants">👈 View All</a>
   <h1><%= @html_variant.name %></h1>
   <%= render "form" %>
 </div>
diff --git a/app/views/html_variants/index.html.erb b/app/views/html_variants/index.html.erb
index ca7465f2e..1adc36b47 100644
--- a/app/views/html_variants/index.html.erb
+++ b/app/views/html_variants/index.html.erb
@@ -4,12 +4,19 @@
   <h1>
     HTML Variants <a href="/html_variants/new">New</a>
   </h1>
-  <h2>Your HTML Variants</h2>
-  <% @user_variants.each do |html_variant| %>
-    <%= render "single_html_variant", html_variant: html_variant, admin: false %>
+  <nav>
+    <a href="/html_variants" class="<%= "selected" if params[:state].blank? %>">Leaderboard</a>
+    <a href="/html_variants?state=mine" class="<%= "selected" if params[:state] == "mine" %>">Mine</a>
+  </nav>
+  <% if params[:state] == "mine" %>
+    <h2>My Entries</h2>
+  <% elsif  params[:state] == "admin" %>
+    <h2>All Published Entries</h2>
+  <% else %>
+    <h2>Leaderboard</h2>
   <% end %>
-  <h2>All Published</h2>
-  <% @all_published_variants.each do |html_variant| %>
-    <%= render "single_html_variant", html_variant: html_variant, admin: true %>
+  <% @html_variants.each do |html_variant| %>
+    <%= render "single_html_variant", html_variant: html_variant, admin: params[:state] == "admin" %>
   <% end %>
 </div>
+
diff --git a/app/views/html_variants/new.html.erb b/app/views/html_variants/new.html.erb
index e12a44994..2877089fa 100644
--- a/app/views/html_variants/new.html.erb
+++ b/app/views/html_variants/new.html.erb
@@ -1,5 +1,5 @@
 <%= render "page_styles" %>
-
 <div class="html-variants-page" >
+  <div><a href="/html_variants">👈 View All</a>
   <%= render "form" %>
 </div>
diff --git a/app/views/html_variants/show.html.erb b/app/views/html_variants/show.html.erb
new file mode 100644
index 000000000..3da7cc719
--- /dev/null
+++ b/app/views/html_variants/show.html.erb
@@ -0,0 +1,9 @@
+<%= render "layouts/styles" %>
+<style>
+  body{padding-top: 20px !important; }
+</style>
+<div class="primary-sticky-nav">
+  <div class="html-variant-wrapper">
+    <%= @html_variant.html.html_safe %>
+  </div>
+</div>
\ No newline at end of file