diff --git a/app.rb b/app.rb
index 429c7475..846e4a87 100644
--- a/app.rb
+++ b/app.rb
@@ -433,6 +433,13 @@ get '/browse/?' do
   erb :browse
 end
 
+get '/surf/:username' do |username|
+  @site = Site.select(:id, :username, :title, :domain, :views).where(username: username).first
+  @title = @site.title
+  not_found if @site.nil?
+  erb :'surf', layout: false
+end
+
 get '/api' do
   @title = 'Developers API'
   erb :'api'
diff --git a/public/img/topbar-cat.png b/public/img/topbar-cat.png
new file mode 100644
index 00000000..fd50cc89
Binary files /dev/null and b/public/img/topbar-cat.png differ
diff --git a/public/img/topbar-close.png b/public/img/topbar-close.png
new file mode 100644
index 00000000..ece12379
Binary files /dev/null and b/public/img/topbar-close.png differ
diff --git a/views/_share.erb b/views/_share.erb
new file mode 100644
index 00000000..98e598d5
--- /dev/null
+++ b/views/_share.erb
@@ -0,0 +1,15 @@
+<a href="/site/<%= site.username %>.rss"><span>RSS/Atom Feed</span></a>
+<br>
+<a href="http://facebook.com/sharer.php?u=<%= Rack::Utils.build_query(u: "http://#{site.host}") %>" target="_blank">Facebook</a>
+<br>
+<a href="https://twitter.com/intent/tweet?<%= Rack::Utils.build_query(text: "#{site.title}: http://#{site.host}") %>">Twitter</a>
+<br>
+<a href="http://www.reddit.com/submit?<%= Rack::Utils.build_query(title: "#{site.title}", url: "http://#{site.host}" )%>" target="_blank">Reddit</a>
+<br>
+<a href="http://www.tumblr.com/share?<%= Rack::Utils.build_query(v: 3, u: "http://#{site.host}", t: "#{site.title}") %>" target="_blank">Tumblr</a>
+<br>
+<a href="http://www.stumbleupon.com/submit?<%= Rack::Utils.build_query(url: "http://#{site.host}", title: "#{site.title}") %>" target="_blank">StumbleUpon</a>
+<br>
+<a href="http://del.icio.us/post?<%= Rack::Utils.build_query(url: "http://#{site.host}", title: "#{site.title}") %>" target="_blank">Del.ici.ous</a>
+<br>
+<a href="https://plus.google.com/share?<%= Rack::Utils.build_query(url: "http://#{site.host}") %>" target="_blank">Google+</a>
\ No newline at end of file
diff --git a/views/browse.erb b/views/browse.erb
index 41659937..d0bab66b 100644
--- a/views/browse.erb
+++ b/views/browse.erb
@@ -64,13 +64,13 @@
   <ul class="row website-Gallery content int-Gall">
     <% @sites.each do |site| %>
       <li>
-        <a href="//<%= site.host %>" class="neo-Screen-Shot" target="_blank" title="<%= site.title %>">
+        <a href="/surf/<%= site.username %>" class="neo-Screen-Shot" target="_blank" title="<%= site.title %>">
           <span class="img-Holder" style="background:url(<%= site.screenshot_url('index.html', '540x405') %>) no-repeat;">
             <img src="/img/placeholder.png" alt="<%= site.title %>" />
           </span>
         </a>
         <div class="title">
-          <a href="//<%= site.host %>" title="<%= site.title %>"><%= site.title.shorten(30) %></a>
+          <a href="/surf/<%= site.username %>" title="<%= site.title %>"><%= site.title.shorten(30) %></a>
         </div>
         <div class="site-info">
           <div class="username">
diff --git a/views/site.erb b/views/site.erb
index 3833ca41..ba750837 100644
--- a/views/site.erb
+++ b/views/site.erb
@@ -14,13 +14,13 @@
     <div class="col col-50 signup-Area large">
       <div class="signup-Form">
   	  <fieldset class="content">
-        <a href="//<%= site.host %>" class="screenshot" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a>
+        <a href="/surf/<%= site.username %>" class="screenshot" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a>
 	    </fieldset>
       </div>
     </div>
     <div class="col col-50">
       <h2 class="eps title-with-badge"><span><%= site.title %></span> <% if site.supporter? && !site.ended_supporter? %><a href="/plan" class="supporter-badge" title="Neocities Supporter"></a> <% end %></h2>
-      <p class="site-url"><a href="//<%= site.host %>"><%= site.host %></a></p>
+      <p class="site-url"><a href="/surf/<%= site.username %>"><%= site.host %></a></p>
       <div class="stats">
         <div class="stat"><strong><%= site.views_english %></strong> <span>views</span></div>
         <div class="stat"><strong><%= site.hits_english %></strong> <span>hits</span></div>
@@ -44,24 +44,7 @@
           <!-- <a href="#" class="btn-Action tip"><span>Tip</span></a> -->
         <% end %>
 
-        <a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='
-
-          <a href="/site/<%= site.username %>.rss"><span>RSS/Atom Feed</span></a>
-          <br>
-          <a href="http://facebook.com/sharer.php?u=<%= Rack::Utils.build_query(u: "http://#{site.host}") %>" target="_blank">Facebook</a>
-          <br>
-          <a href="https://twitter.com/intent/tweet?<%= Rack::Utils.build_query(text: "#{site.title}: http://#{site.host}") %>">Twitter</a>
-          <br>
-          <a href="http://www.reddit.com/submit?<%= Rack::Utils.build_query(title: "#{site.title}", url: "http://#{site.host}" )%>" target="_blank">Reddit</a>
-          <br>
-          <a href="http://www.tumblr.com/share?<%= Rack::Utils.build_query(v: 3, u: "http://#{site.host}", t: "#{site.title}") %>" target="_blank">Tumblr</a>
-          <br>
-          <a href="http://www.stumbleupon.com/submit?<%= Rack::Utils.build_query(url: "http://#{site.host}", title: "#{site.title}") %>" target="_blank">StumbleUpon</a>
-          <br>
-          <a href="http://del.icio.us/post?<%= Rack::Utils.build_query(url: "http://#{site.host}", title: "#{site.title}") %>" target="_blank">Del.ici.ous</a>
-          <br>
-          <a href="https://plus.google.com/share?<%= Rack::Utils.build_query(url: "http://#{site.host}") %>" target="_blank">Google+</a>
-        '>
+        <a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: site} %>'>
          <i class="fa fa-share-alt"></i> <span>Share</span></a>
       </div>
     </div>
diff --git a/views/surf.erb b/views/surf.erb
new file mode 100644
index 00000000..be5bc069
--- /dev/null
+++ b/views/surf.erb
@@ -0,0 +1,122 @@
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <% if @title %>
+      <title><%= @title %> - Neocities</title>
+    <% else %>
+      <title>Neocities</title>
+    <% end %>
+    <link href="/css/font-awesome.css" rel="stylesheet">
+    <link href="/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    html {
+      height: 100%; 
+    }
+    body {
+      height: 100%;
+      width: 100%;
+      font-family: "Lucida Grande", helvetica, verdana, sans-serif;
+      font-size: 12px;
+      overflow: hidden;
+    }
+    #logo {
+      background: url(/img/topbar-cat.png) no-repeat 1px -1px;
+      width: 30px;
+      height: 29px;
+      position: absolute;
+      display: block;
+    }
+    #website-frame {
+      width: 100%;
+      height: 100%;
+    }
+    #top-bar {
+      background: #3B3B3B;
+      color: #cecece;
+      float: left;
+      width: 100%;
+      padding: 6px 0;
+    }
+    #top-bar ul {
+      list-style: none;
+    }
+    #top-bar li {
+      float: left;
+      margin-left: 20px;  
+    }
+    #top-bar a {
+      color: #cecece;
+      text-decoration: none;
+    }
+    #top-bar a:hover {
+      color: #fff;
+    }
+    #top-bar input {
+      border: 0;
+      background: #555;
+      color:white;
+      width: 120px;
+      padding: 1px 5px;
+      
+    }
+    ::-webkit-input-placeholder { font-style: italic; }
+    :-moz-placeholder { font-style: italic; }
+    ::-moz-placeholder { font-style: italic; }
+    :-ms-input-placeholder { font-style: italic; }
+    #top-bar .browse-actions {
+      margin-left: 20px;
+    }
+    #top-bar .site-actions {
+      float: right;
+      margin-right: 9px;
+    }
+    #top-bar .close {
+      background: url(/img/topbar-close.png) no-repeat;
+      width: 13px;
+      height: 13px;
+      background-size: 13px;
+      margin-top: 1px;
+      float: left;
+    }
+    #top-bar .invisible a {
+      color: #3B3B3B;
+    }
+    </style>
+  </head>
+  <body>
+  <a href="/" id="logo"></a>
+  <div id="top-bar">
+    <ul class="browse-actions">
+      <li><a href="/">Neocities</a></li>
+      <li><input type="text" placeholder="Browse by tag..." /></li>
+      <li><a href=""><i class="fa fa-caret-left"></i> Prev</a></li>
+      <li><a href="">Next <i class="fa fa-caret-right"></i></a></li>
+    </ul>
+    <ul class="site-actions">
+      <li><a href="/site/<%= @site.username %>"><i class="fa fa-user"></i> <strong><%= @site.username %></strong></a></li>
+      <li><a href=""><i class="fa fa-plus"></i> Follow</a></li>
+      <li>
+        <a href="" id="shareButton" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: @site} %>' onclick="return false">
+          <i class="fa fa-share-alt"></i> Share
+        </a>
+      </li>
+      <li><a class="close" href="//<%= @site.host %>" alt="close" title="close"></a></li>
+    </ul>
+  
+  </div>
+  <iframe src="//<%= @site.host %>" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" id="website-frame" name="website-frame"></iframe>
+
+  <script src="/js/jquery-1.11.0.min.js"></script>
+  <script src="/js/bootstrap.min.js"></script>
+  <script>
+    $(function() {
+      $('#shareButton').popover({html: true})
+    })
+  </script>
+  </body>
+</html>
\ No newline at end of file