diff --git a/r2/r2/public/static/compact/domain.png b/r2/r2/public/static/compact/domain.png
new file mode 100644
index 000000000..43f3c368e
Binary files /dev/null and b/r2/r2/public/static/compact/domain.png differ
diff --git a/r2/r2/public/static/compact/email.png b/r2/r2/public/static/compact/email.png
new file mode 100644
index 000000000..b5453df9c
Binary files /dev/null and b/r2/r2/public/static/compact/email.png differ
diff --git a/r2/r2/public/static/compact/options-active.png b/r2/r2/public/static/compact/options-active.png
new file mode 100644
index 000000000..9fcee548b
Binary files /dev/null and b/r2/r2/public/static/compact/options-active.png differ
diff --git a/r2/r2/public/static/compact/options.png b/r2/r2/public/static/compact/options.png
new file mode 100644
index 000000000..f9d5fc6b4
Binary files /dev/null and b/r2/r2/public/static/compact/options.png differ
diff --git a/r2/r2/public/static/compact/report.png b/r2/r2/public/static/compact/report.png
new file mode 100644
index 000000000..6119b822c
Binary files /dev/null and b/r2/r2/public/static/compact/report.png differ
diff --git a/r2/r2/public/static/compact/save.png b/r2/r2/public/static/compact/save.png
new file mode 100644
index 000000000..fdce50ed3
Binary files /dev/null and b/r2/r2/public/static/compact/save.png differ
diff --git a/r2/r2/public/static/compact/selftext-active.png b/r2/r2/public/static/compact/selftext-active.png
new file mode 100644
index 000000000..77c2b8c3d
Binary files /dev/null and b/r2/r2/public/static/compact/selftext-active.png differ
diff --git a/r2/r2/public/static/compact/selftext.png b/r2/r2/public/static/compact/selftext.png
new file mode 100644
index 000000000..85b6a9cbc
Binary files /dev/null and b/r2/r2/public/static/compact/selftext.png differ
diff --git a/r2/r2/public/static/compact/unsave.png b/r2/r2/public/static/compact/unsave.png
new file mode 100644
index 000000000..1c69b080a
Binary files /dev/null and b/r2/r2/public/static/compact/unsave.png differ
diff --git a/r2/r2/public/static/css/compact.scss b/r2/r2/public/static/css/compact.scss
index bed88cfc1..099b4b420 100644
--- a/r2/r2/public/static/css/compact.scss
+++ b/r2/r2/public/static/css/compact.scss
@@ -1,29 +1,13 @@
+//Requires Compass and Sass to compile properly
+//gem install haml
+//gem install compass
 /* mixins */
 
-@mixin rounded($radius) {
-    border-radius: $radius;
-    -moz-border-radius: $radius;
-    -webkit-border-radius: $radius;
-    -khtml-border-radius: $radius;
-}
+@import "compass/css3";
 
-@mixin vertical_gradient($from, $to) { 
+@mixin vertical_gradient($from, $to) {
     background-color: ($from + $to) / 2;
-    background: -moz-linear-gradient(-90deg, $from, $to);
-    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
-    background: -khtml-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
-}
-@mixin box-shadow($shadow) {
-    -webkit-box-shadow: $shadow;
-    -moz-box-shadow: $shadow;
-    box-shadow: $shadow;
-}
-
-@mixin border_box { 
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    -khtml-box-sizing: border-box;
+    @include background(linear-gradient(top, $from, $to));
 }
 
 /* meat */
@@ -50,7 +34,7 @@ textarea {
 }
 /*UI stuff*/
 .button, .button:visited {
-    @include rounded(6px);
+    @include border-radius(6px);
     @include vertical_gradient(#BFD0E0, #80A2C4);
 
     height: 30px; line-height: 30px;
@@ -66,7 +50,7 @@ textarea {
     text-shadow: 0px 1px 1px rgba(255,255,255,.1), 0px -1px 1px rgba(0,0,0,.4);
     background-color: #80A2C4;
     border: 1px solid #517191;
-    @include box-shadow( "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1)" );
+    @include box-shadow(inset 0px 1px 0px hsla(0,0%,100%,.75), 0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) );
 }
 .button:active, .button[selected], .button.active,
 /*Vote toolbar styles*/.button.upmod, .button.downmod
@@ -87,7 +71,7 @@ button.button {
 }
 
 .small_button, .small_button:visited {
-    @include rounded(6px);
+    @include border-radius(6px);
     @include vertical_gradient(#BFD0E0, #80A2C4);
 
    line-height: 20px;
@@ -110,7 +94,7 @@ button.button {
 
 
 .group_button {
-    @include rounded(0);
+    @include border-radius(0);
     border-left: 1px solid hsl(211, 40%, 75%);
     border-right: 1px solid hsl(211, 28%, 37%);
 }
@@ -133,29 +117,26 @@ button.button {
     border-right: 1px solid hsl(210, 28%, 44%);
 }
 
-/*Options triangle popups*/
-.triangle_link {
+/*Options popups*/
+.options_link {
     font-size: x-small;
-    margin: none;
-    display: block;
-    float: right;
     clear: left;
     margin: 2px 0px 0px 10px;
-}
-
-.triangle_link.button { 
-    color: white;
-    margin-bottom: 2px;
-    padding: 3px;
-    line-height: normal;
-    height: auto;
+    display: inline-block;
+    width: 30px; height: 30px;
     position: absolute;
-    bottom: 2px;
-    right: 2px;
+    top: 35px;
+    right: 10px;
+    background: url('/static/compact/options.png') no-repeat;
+
+    &.active {
+        background:  url('/static/compact/options-active.png');
+    }
 }
 
 
-.message .triangle_link, .comment .triangle_link {  
+
+.message .options_link, .comment .options_link {  
     border-bottom-left-radius: 8px 8px;
     border-bottom-right-radius: 0px 0px;
     border-top-left-radius: 0px 0px;
@@ -169,8 +150,8 @@ button.button {
     top: -1px;
 }
 
-.message .triangle_link .button_contents,
-.comment .triangle_link .button_contents {
+.message .options_link .button_contents,
+.comment .options_link .button_contents {
     background: url(/static/compact/mobilesprite2.png) no-repeat -51px -2px;
     display: inline-block;
     height: 16px;
@@ -178,102 +159,62 @@ button.button {
     width: 16px;
 }
 
-.options_triangle_parent {
-    position: relative;
-}
-.options_triangle {
-   margin: 15px -5px 5px 0px;
-   position: absolute;
-   top: -3px;
-   z-index: 1000;
-   right: 0;
+/*Options expando*/
 
-	
-}
-.options_triangle:before {
-   content:"\00a0";
-   display:block; /* reduce the damage in FF3.0 */
-   position:absolute;
-   z-index:-2;
-   top:-29px;
-   right:15px;
-   width:0;
-   height:0;
-   border-width:15px 10px;
-   border-style:solid;
-   border-color:transparent transparent hsl(0, 0%, 60%);
-}
-.options_triangle:after {
-   content:"\00a0";
-   display:block; /* reduce the damage in FF3.0 */
-   position:absolute;
-   z-index:1001;
-   top:-28px;
-   right:15px;
-   width:0;
-   height:0;
-   border-width:15px 10px;
-   border-style:solid;
-   border-color:transparent transparent hsl(235,1%,94%);
-}
-.options_triangle.left-side:before {  
-   left:15px;
-}
-.options_triangle.left-side:after {
-   left:15px;
-}
-
-
-.options_triangle.hidden {
+.link .options_expando {
+    background: hsl(210,35%,20%);
+    margin:  5px -5px -1px;
+    border-top:  1px solid hsl(210,35%,10%);
     display: none;
+    padding: 10px;
+    @include box-orient(horizontal);
+    @include box-align(center);
+    @include box-pack(center);
+    @include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
+    text-shadow: 0px -1px 0px hsla(0,0%,0%,.8);
+
+    a {
+        display: block;
+        color: white;
+        font-size: 11px;
+        padding: {
+            left: 5px;
+            right: 5px;
+        }
+        
+    }
+
+    &.expanded {
+        @include display-box;
+    }
 }
 
-.options_triangle.left-side { 
-    left: 0px;
-    right: auto; 
+.email-icon, .report-icon, .save-icon, .unsave-icon, .domain-icon {
+    display: block;
+    width: 24px;
+    height: 24px;
+    margin: {
+        left: auto;
+        right: auto;
+        bottom: 5px;
+    }
+}
+.email-icon {
+    background:  url('/static/compact/email.png') no-repeat;
+}
+.report-icon {
+    background: url('/static/compact/report.png') no-repeat;
+}
+.save-icon {
+    background: url('/static/compact/save.png') no-repeat;
+}
+.unsave-icon {
+    background: url('/static/compact/unsave.png') no-repeat;
+}
+.domain-icon {
+    background: url('/static/compact/domain.png') no-repeat;
 }
 
-.message .options_triangle,
-.comment .options_triangle {
-    width: auto;
-    right: -3px; 
-    top: -3px; 
-}
-.message .options_triangle:before { 
-    right: 7px;
-}
-.comment .options_triangle:before {
-    right: 7px;
-}
-
-.message .options_triangle:after { 
-    right: 7px;
-}
-.comment .options_triangle:after {
-    right: 7px;
-}
-/* Triangle buttons */
-.options_triangle .button {
-    @include vertical_gradient(hsl(235,1%,94%), hsl(236,2%,85%));
-    color: hsl(0,0%,30%);
-    text-shadow: hsla(0,0%,100%,.6) 0px 1px 0px;
-    border: 1px solid hsl(0,0%,60%);
-    border-left: 1px solid hsl(0, 0%, 85%);
-    border-right: 1px solid hsl(0, 0%, 50%);
-}
-.options_triangle .button:hover, .options_triangle .button:active, .options_triangle .button:focus {
-    @include vertical_gradient(hsl(210, 35%, 81%), hsl(210, 37%, 64%));
-    border-left: 1px solid hsl(211, 40%, 75%);
-    border-right: 1px solid hsl(212, 28%, 37%);
-    color: white;
-    text-shadow: hsla(0, 100%, 100%, 0.0976563) 0px 1px 1px, hsla(0, 0%, 0%, 0.398438) 0px -1px 1px;
-}
-.options_triangle .button:first-child {
-    border-left: 1px solid hsl(0,0%,60%);	
-}
-.options_triangle .button:last-child {
-    border-right: 1px solid hsl(0,0%,60%);
-}
 /*Toolbar*/
 #topbar {
     height: 45px;
@@ -281,7 +222,7 @@ button.button {
     background-color: #A8C4E0;
     @include vertical_gradient(#CEE3F8, #A8C4E0);
     border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7;
-    @include border_box;
+    @include box-sizing(border-box);
     padding: 0px 10px 10px;
 }
 #topbar > h1 {
@@ -378,7 +319,7 @@ body[orient="landscape"] > #topbar > h1 {
 
 /*Subtoolbar (eg hot)*/
 .subtoolbar {
-    @include border_box;
+    @include box-sizing(border-box);
     height: 32px;
     @include vertical_gradient(white, #ccc);
     border-bottom: 1px solid #bbb;
@@ -409,7 +350,7 @@ body[orient="landscape"] > #topbar > h1 {
     @include vertical_gradient(#ddd, #aaa);
     /* no color-stop outside of webkit */
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(.4,#ddd), to(#aaa));
-    @include rounded(8px);
+    @include border-radius(8px);
     border: 1px solid #aaa;
     padding-top: 2px; 
     padding-bottom: 1px; 
@@ -438,12 +379,12 @@ body[orient="landscape"] > #topbar > h1 {
 }
 /*Links*/
 .link {
-    min-height: 60px;
+    min-height: 70px;
     border-bottom: 1px solid #999; 
     border-top: 1px solid #ddd;
     padding: 5px 5px;
     padding-bottom: 0px; 
-    @include border_box;
+    @include box-sizing(border-box);
     background: rgba(255,255,255,.6);
     position: relative;
 }
@@ -577,16 +518,18 @@ body[orient="landscape"] > #topbar > h1 {
 /*Expando*/
 .link  .expando-button {
     float: left;
+    display: block;
     height: auto; line-height: inherit;
     margin: 3px 5px 2px 0;
-    color: white; 
-}
-.link > .expando-button.video {
-    font-size: 15px;
-}
-.link > .expando-button.expanded {
-    @include vertical_gradient(#7E8994, #80A2C4);
+    width: 30px;
+    height: 30px;
+    background: url('/static/compact/selftext.png');
+
+    &.expanded {
+        background:  url('/static/compact/selftext-active.png');
+    }
 }
+
 .link > .expando {
     clear: both;
     margin: 5px 0; 
@@ -594,7 +537,7 @@ body[orient="landscape"] > #topbar > h1 {
     border: 1px solid #999;
     @include vertical_gradient(#ddd, #aaa);
     padding: 5px;
-    @include rounded(8px);
+    @include border-radius(8px);
     font-size: 11px;
 }
 
@@ -612,7 +555,7 @@ body[orient="landscape"] > #topbar > h1 {
 /* Comment count */
 .commentcount {
     float: right;
-    margin: 5px 1px 5px 5px;
+    margin: 5px 1px 45px 5px;
     width: 45px;
     text-align: right;
 }
@@ -622,7 +565,7 @@ body[orient="landscape"] > #topbar > h1 {
     margin: 0; padding: 3px 10px;
     text-decoration: none;
     text-shadow: 0px 1px 1px rgba(255,255,255,.1), 0px -1px 1px rgba(0,0,0,.4);
-    @include rounded(10px);
+    @include border-radius(10px);
     @include vertical_gradient(#BFD0E0, #80A2C4);
     border: 1px solid #517191;
     @include box-shadow( " 0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) ");
@@ -652,15 +595,15 @@ body[orient="landscape"] > #topbar > h1 {
     background: white;
     margin:  0 10px 5px;
     border: 1px solid rgb(217,217,217);
-    @include rounded(8px)
+    @include border-radius(8px)
 }
 .commentarea > .usertext textarea {
     margin: 0; padding: 5px;
     width: 100%;
     height: 100px;
     border: none;
-    @include border_box;
-    @include rounded(8px);
+    @include box-sizing(border-box);
+    @include border-radius(8px);
     border-bottom: 1px solid rgb(217,217,217);
 
 }
@@ -735,8 +678,8 @@ padding: 5px;
     border: 1px solid rgb(217,217,217);
     width: 100%;
     min-height: 100px;
-    @include rounded(5px);
-    @include border_box;
+    @include border-radius(5px);
+    @include box-sizing(border-box);
 }
 .child form.usertext.cloneable {
 	margin: 5px;
@@ -747,7 +690,7 @@ padding: 5px;
     background: white;
     border: 1px solid rgb(217,217,217);
     margin: 10px;
-    @include rounded(8px)
+    @include border-radius(8px)
 }
 .comment > .midcol {
     float: left;
@@ -796,7 +739,7 @@ padding: 5px;
     position: relative; 
     border: 1px solid rgb(217,217,217);
     margin: 10px;
-    @include rounded(8px)
+    @include border-radius(8px)
 }
 .message > .midcol {
     float: left;
@@ -813,7 +756,7 @@ padding: 5px;
     /* TODO */
     margin-right: 10px;
     padding: 2px 5px;
-    @include rounded(15px);
+    @include border-radius(15px);
 }
 .message .correspondent a {
     text-decoration: none;
@@ -870,7 +813,7 @@ padding: 5px;
 
 .subreddit { 
     background-color: white;
-    @include rounded(5px);
+    @include border-radius(5px);
     margin: 5px; 
 }
 
@@ -968,9 +911,9 @@ padding: 5px;
 	font-weight: bold;
 }
 #compose-message input[type="text"] {
-    @include border_box;
+    @include box-sizing(border-box);
     border: 1px solid rgb(117,117,117);
-    @include rounded(5px);
+    @include border-radius(5px);
     margin-bottom: 5px;
     padding: 5px;
     width: 100%;
@@ -999,7 +942,7 @@ padding: 5px;
    border: rgb(81, 113, 145) 2px solid;
    background: white;
    @include box-shadow( 0px 0px 5px rgba(81, 113, 145,.6));
-    @include rounded(5px);
+    @include border-radius(5px);
    font-size: 1.5em; font-weight: bold
 }
 .thing_suboption_popup {
@@ -1010,7 +953,7 @@ padding: 5px;
    border: rgb(81, 113, 145) 2px solid;
    background: white;
    @include box-shadow( 0px 0px 8px rgba(81, 113, 145,.6));
-    @include rounded(5px);
+    @include border-radius(5px);
 }
 .thing_options_popup  a {
     display: block;
@@ -1095,11 +1038,11 @@ padding: 5px;
 #login_login input[type="text"], #login_login input[type="password"], #login_reg input[type="text"], #login_reg input[type="password"] {
     width: 100%;
     margin: 0 0 5px;
-    @include rounded(5px);
+    @include border-radius(5px);
     border: 1px solid rgb(117,117,117); /*It was the coins fault!*/
     font-size:17px;
     padding: 5px;
-    @include border_box;
+    @include box-sizing(border-box);
 }
 #login_login > div > ul li input[type="checkbox"] + label, #login_reg > div > ul li input[type="checkbox"] + label {
 	display: inline;
@@ -1151,9 +1094,9 @@ body.toolbar {
 }
 /*Close toolbar button*/
 .toolbar .close {
-    @include border_box;
+    @include box-sizing(border-box);
     @include vertical_gradient(hsl(3, 68%, 77%), hsl(4, 33%, 48%));
-    @include rounded(30px);
+    @include border-radius(30px);
 
     border: 1px solid hsl(4, 33%, 40%) ;
     bottom: -13px;
@@ -1201,7 +1144,7 @@ body.toolbar {
     position: absolute;
     top: 75px;
     left: 0;
-    @include rounded(30px);
+    @include border-radius(30px);
     background-color: white;
     text-align: left;
     z-index: 1001;
@@ -1250,7 +1193,7 @@ body.toolbar {
 }
 #newlink .tabmenu li a {
 	width: 100%; height: 100%;
-    @include border_box;
+    @include box-sizing(border-box);
 	display: block;
 	padding: 5px;
 	color: hsl(0, 0%, 30%);
@@ -1289,16 +1232,16 @@ body.toolbar {
     padding: 0px 5px;
 }
 #newlink .roundfield-content textarea {
-    @include border_box;
+    @include box-sizing(border-box);
     width: 100%;
     height: 5em;
-    @include rounded(5px);
+    @include border-radius(5px);
 }
 #newlink .roundfield-content input[type="text"], #newlink .roundfield-content input[type="url"] {
-    @include border_box;
+    @include box-sizing(border-box);
 	width: 100%;
 	height: 2em;
-    @include rounded(5px);
+    @include border-radius(5px);
 }
 #newlink .title {
 	font-weight: bold;
@@ -1320,14 +1263,14 @@ body.toolbar {
     background: hsl(0, 0%, 90%);
     border: 1px solid hsl(0, 0%, 50%);
     padding: 8px;
-    @include rounded(8px);
+    @include border-radius(8px);
 }
 #suggested-reddits ul li {
 	display: inline;
 }
 #suggested-reddits ul li a {
     @include vertical_gradient(hsl(210, 35%, 81%), hsl(210, 37%, 64%));
-    @include rounded(10px);
+    @include border-radius(10px);
     display: inline-block;
     margin: 5px;
     padding: 3px 7px;
@@ -1401,7 +1344,7 @@ body.toolbar {
     background-color: white;
     padding: 10px;
     margin: 10px; 
-    @include rounded(10px);
+    @include border-radius(10px);
 }
 
 .instructions h1 { 
@@ -1417,7 +1360,7 @@ body.toolbar {
 .instructions img { 
     width: 290px;
     margin-left: 15px; 
-    @include rounded(10px);
+    @include border-radius(10px);
     border: 1px solid #888;
 }
 
@@ -1432,7 +1375,7 @@ body.toolbar {
     max-width: 280px;
     padding: 10px;
     background-color: white;
-    @include rounded(10px);
+    @include border-radius(10px);
     margin: 10px auto; 
 }
 
diff --git a/r2/r2/public/static/js/compact.js b/r2/r2/public/static/js/compact.js
index dc8d01434..ccaf8abe3 100644
--- a/r2/r2/public/static/js/compact.js
+++ b/r2/r2/public/static/js/compact.js
@@ -1,5 +1,12 @@
 /*This hides the url bar on mobile*/
 (function($) {
+    /*
+    Creates an element on the body that works to create a modal box
+    The callback function runs when the cover is clicked
+    Use it, for example, to hide your modal box.
+
+    It is kind of tricky to use on mobile platforms, subject to many odd bugs, likely caused by the way mobile platforms handle z-index
+    */
     function tool_cover(callback) {
         var toolcover = $("#toolcover");
         if (toolcover.length == 0) {
@@ -7,149 +14,149 @@
             toolcover = $("#toolcover");
         }
         toolcover.css("height", $(document).height())
-            .show().one("click", function() {
-            $(this).hide();
-            if (callback) callback();
-            return false; 
-        });
-    };
+                .show().one("click", function() {
+                    $(this).hide();
+                    if (callback) callback();
+                    return false;
+                });
+    }
+
+    ;
     $.fn.show_toolbar = function() {
         var tb = this;
-        tool_cover(function() { $(tb).hide(); });
         $(this).show();
     };
-    $.fn.hide_toolbar = function() {
-        $("#toolcover").click();
-    };
     $.unsafe_orig = $.unsafe;
     $.unsafe = function(text) {
         /* inverts websafe filtering of reddit app. */
         text = $.unsafe_orig(text);
-        if(typeof(text) == "string") {
+        if (typeof(text) == "string") {
             /* space compress the result */
             text = text.replace(/[\s]+/g, " ")
-                .replace(/> +/g, ">")
-                .replace(/ +</g, "<");
+                    .replace(/> +/g, ">")
+                    .replace(/ +</g, "<");
         }
         return (text || "");
     }
 })(jQuery);
 
 $(function() {
-    if($(window).scrollTop() == 0) {
+    if ($(window).scrollTop() == 0) {
         $(window).scrollTop(1);
-    };
+    }
+    ;
     /* Top menu dropdown*/
-    $('#topmenu_toggle').click ( function() {
+    $('#topmenu_toggle').click(function() {
         $(this).toggleClass("active");
         $('#top_menu').toggle();
         return false;
     });
+    //Self text expando
     $('.expando-button').live('click', function() {
         $(this).toggleClass("expanded");
         $(this).thing().find(".expando").toggle();
         return false;
     });
+    //Help expando
     $('.help-toggle').live('click', function() {
         $(this).toggleClass("expanded");
         $(this).parent().siblings(".markhelp-parent").toggle();
         return false;
     });
-   /*Options dropdown for each comment */
-   $('.thing_options_link').live('click', function() {
-       $(this).toggleClass("active");
-       $(this).siblings(".thing_options_popup_container")
-           .toggleClass("hidden");
-       $(this).siblings(".thing_options_popup_container")
-           .find(".thing_suboption_popup_container").addClass("hidden");
-       return false;
-   });
-   /*Sub-menus. This can be replicated infinitely.*/
-   $('.thing_suboption_link').live('click', function() {
-       $(this).prev(".thing_suboption_popup_container").toggleClass("hidden");
-       return false;
-   });
-   /*Collapse menu on click of .option_close*/
-   $('.thing_option_close').live('click', function() {
-       $(this).parents(".thing_options_popup_container,.thing_suboption_popup_container").addClass("hidden");
-       return false;
-   });
-   /*Added expansion to text-area (like facebook/Buzz/Twitter)*/
-   /*$('.usertext textarea').autoResize({
-           animate: false,
-               extraSpace : 20
-               });*/
 
-   $(".options_triangle .button").live("click", function(evt) {
-       $(this).parents(".options_triangle").hide_toolbar();
-   });
-   $('.triangle_link').live('click', function(evt) {
-       $(this).siblings(".options_triangle_parent")
-           .children(".options_triangle").show_toolbar();
-       return false;
-   });
-   /* the iphone doesn't play nice with live() unless there is already a registered click function.  That's sad */
-   $(".thing").click(function() {});
+    //Options expando
+    $('.options_link').live('click', function(evt) {
 
-   $(".link").live("click", function(evt) {
-       if(evt && evt.target && $(evt.target).hasClass("thing")) {
-           $(this).find(".triangle_link").click();
-           return false;
-       }
-   });
+        if (! $(this).siblings(".options_expando").hasClass('expanded')) {
+            $('.options_expando.expanded').each(function() { //Collapse any other open ones
+                $(this).removeClass('expanded');
+            });
+            $('.options_link.active').each(function() {
+               $(this).removeClass('active');
+            });
+            $(this).siblings(".options_expando").addClass('expanded'); //Expand this one
+            $(this).addClass('active');
+        } else {
+             $(this).siblings(".options_expando").removeClass('expanded'); //Just collapse this one
+             $(this).removeClass('active');
+        }
+        return false;
+    });
+    //Save button state transition
+    $(".save-button").live("click", function() {
+        $(this).toggle();
+        $(this).siblings(".unsave-button").toggle();
+    });
+    $(".unsave-button").live("click", function() {
+        $(this).toggle();
+        $(this).siblings(".save-button").toggle();
+    });
+    /* the iphone doesn't play nice with live() unless there is already a registered click function.  That's sad */
+    $(".thing").click(function() {
+    });
+
+    $(".link").live("click", function(evt) {
+        if (evt && evt.target && $(evt.target).hasClass("thing")) {
+            $(this).find(".options_link").click();
+            return false;
+        }
+    });
+    //Comment options
     $(".comment > .entry, .message > .entry").live("click", function(evt) {
         var foo = (evt) ? $(evt.target) : null;
         var thing = $(this).parent();
-        if(thing.hasClass("active")) {
+        if (thing.hasClass("active")) {
             thing.removeClass("active");
             return false;
-        } 
+        }
         /* collapsed messages/comments should uncolapse */
-        else if(thing.hasClass("collapsed")) {
+        else if (thing.hasClass("collapsed")) {
             thing.removeClass("collapsed");
             return false;
-        } 
+        }
         /* unread messages should be marked read */
-        else if(thing.hasClass("unread") || thing.hasClass("new")) {
+        else if (thing.hasClass("unread") || thing.hasClass("new")) {
             read_thing(thing);
             return false;
         }
         /* otherwise, fire a menu */
-        else if(foo &&
-                foo.filter("a").length == 0 && 
-                !foo.hasClass("arrow") && 
-                !foo.hasClass("button") && 
+        else if (foo &&
+                foo.filter("a").length == 0 &&
+                !foo.hasClass("arrow") &&
+                !foo.hasClass("button") &&
                 foo.filter("textarea").length == 0) {
-            thing.find(".triangle_link:first").click();
+            thing.find(".options_link:first").click();
             return false;
         }
-       });
-   /*Finally*/
-    $('a[href=#]').live('click', function() { return false; } );
+    });
+    /*Finally*/
+    $('a[href=#]').live('click', function() {
+        return false;
+    });
 });
 
 $(function() {
-        var eut = edit_usertext;
-        edit_user_text = function(what) {
-            $(what).parent().parent().toggleClass('hidden');
-            return eut(what);
-        };
+    var eut = edit_usertext;
+    edit_user_text = function(what) {
+        $(what).parent().parent().toggleClass('hidden');
+        return eut(what);
+    };
 
-    });
+});
 
 function showcover() {
     $.request("new_captcha");
     $(".login-popup:first").fadeIn()
-        .find(".popup").css("top", $(window).scrollTop() + 75).end()
-        .find(".cover").css("height", $(document).height()).end()
-        .find("form input[name=reason]").val(reason || "");
+            .find(".popup").css("top", $(window).scrollTop() + 75).end()
+            .find(".cover").css("height", $(document).height()).end()
+            .find("form input[name=reason]").attr("value", (reason || ""));
     return false;
 }
 
 function hidecover(where) {
     $(where).parents(".cover-overlay").fadeOut();
     return false;
-};
+}
 
 function show_edit_usertext(form) {
     var edit = form.find(".usertext-edit");
@@ -160,8 +167,8 @@ function show_edit_usertext(form) {
     edit.show();
 
     form
-        .find(".cancel, .save").show().end()
-        .find(".help-toggle").show().end();
+            .find(".cancel, .save").show().end()
+            .find(".help-toggle").show().end();
 
     textarea.focus();
 }
@@ -172,33 +179,34 @@ function fetch_more() {
 
     var o = document.location;
     var path = o.pathname.split(".");
-    if (path[path.length-1].indexOf('/') == -1) {
+    if (path[path.length - 1].indexOf('/') == -1) {
         path = path.slice(0, -1).join('.');
     } else {
         path = o.pathname;
     }
     var apath = o.protocol + "//" + o.host + path + ".json-compact" + o.search;
     var last = $("#siteTable").find(".thing:last");
-    apath += ((document.location.search) ? "&" : "?") + 
-        "after=" + last.thing_id();
+    apath += ((document.location.search) ? "&" : "?") +
+            "after=" + last.thing_id();
 
     if (last.find(".rank").length)
         "&count=" + parseInt(last.find(".rank").html())
 
     $.getJSON(apath, function(res) {
-            $.insert_things(res.data, true);
-            $(".thing").click(function() {});
-            /* remove the loading image */
-            $("#siteTable").next(".loading").remove();
-            if (res && res.data.length == 0) {
-                $(window).unbind("scroll");
-            }
+        $.insert_things(res.data, true);
+        $(".thing").click(function() {
         });
+        /* remove the loading image */
+        $("#siteTable").next(".loading").remove();
+        if (res && res.data.length == 0) {
+            $(window).unbind("scroll");
+        }
+    });
 }
 
 function toggle_collapse(elem) {
     $(elem).thing().addClass("collapsed").addClass("active")
-        .find('.thing_option_close:first').click();
-    return false; 
+            .find('.thing_option_close:first').click();
+    return false;
 }
 
diff --git a/r2/r2/templates/link.compact b/r2/r2/templates/link.compact
index e3bc3dab5..aa9ab84f4 100644
--- a/r2/r2/templates/link.compact
+++ b/r2/r2/templates/link.compact
@@ -23,12 +23,12 @@
    from r2.lib.template_helpers import add_sr
    import urllib
    from r2.lib.filters import _force_unicode, _force_utf8
-   from r2.lib.template_helpers import add_sr
  %>
 <%namespace file="printable.compact" import="delete_report_buttons"/>
 <%namespace file="printable.html" import="arrow, score"/>
 <%namespace file="link.html" import="tagline"/>
 <%namespace file="utils.html" import="plain_link" />
+<%namespace file="printablebuttons.html" import="state_button" />
 
 <div class="thing link id-${thing._fullname}">
   <span class="rank" style="width:${thing.numcolmargin};">
@@ -68,16 +68,14 @@
     <a href="${url}">${thing.title}</a>
     </p>
     %if thing.link_child and not c.permalink_page and thing.link_child.css_style.strip(' ') != 'video':
-      <a href="javascript:void(0)" class="expando-button collapsed button 
-                  ${thing.link_child.css_style}">
-          Aa
-      </a>
+      <a href="javascript:void(0)" class="expando-button collapsed
+                  ${thing.link_child.css_style}"></a>
     %endif
     <div class="tagline">
       ${tagline()}
     </div>
     </div>
-    <a href="javascript:void(0)" class="triangle_link button">Options</a>
+    <a href="javascript:void(0)" class="options_link"></a>
     <%
        expand = thing.link_child and thing.link_child.expand
      %>
@@ -86,7 +84,7 @@
       ${thing.link_child.content()}
     %endif
   </div>
-  <div class="clear options_triangle_parent">
+  <div class="clear options_expando hidden">
     <% 
        subject = "[reddit] I wanted to share this link with you"
        body = """%(user)s shared a link with you from reddit (http://www.reddit.com/):
@@ -106,16 +104,40 @@ there's also a discussion going on here:
        title = _force_unicode(thing.title)
        tweet = "%s %s" % (title[0:(139-len(url))], url)
        %>
-      <div class="options_triangle hidden">
-        <a href="mailto:?subject=${urllib.quote(_force_utf8(subject))}&body=${urllib.quote(_force_utf8(body))}" class="group_button button">Email</a>
-        <a href="http://twitter.com/home?status=${tweet}" class="group_button button">Tweet</a>
-        <a href="javascript:void(0)"  onclick="return change_state(this, 'report', hide_thing)"  class="group_button button">Report</a>
+
+        <a href="mailto:?subject=${urllib.quote(_force_utf8(subject))}&body=${urllib.quote(_force_utf8(body))}" ><div class="email-icon"></div>Email</a>
+        <a href="javascript:void(0)"  onclick="return change_state(this, 'report', hide_thing)" ><div class="report-icon"></div>Report</a>
+        ${self.save_button()}
         %if not thing.is_self:
-         <span class="button group_button">
-           ${plain_link(thing.domain, thing.domain_path, _sr_path = False)}
-         </span>
+           <a href="${thing.domain_path}"><div class="domain-icon"></div>${thing.domain}</a>
         %endif
-      </div>
+      
 
   </div>
 </div>
+
+<%def name="save_button()">
+    %if c.user_is_loggedin:
+        %if thing.saved:
+            <a href="#" class="unsave-button" onclick="change_state(this, 'unsave', unsave_thing, true)"><div class="unsave-icon"></div>Unsave</a>
+            <a href="#" class="save-button" style="display: none;" onclick="change_state(this, 'save', save_thing, true)"><div class="save-icon"></div>Save</a>
+        %else:
+            <a href="#" class="unsave-button" style="display: none" onclick="change_state(this, 'unsave', unsave_thing, true)"><div class="unsave-icon"></div>Unsave</a>
+            <a href="#" class="save-button" onclick="change_state(this, 'save', save_thing, true)"><div class="save-icon"></div>Save</a>
+        %endif
+    %endif
+
+
+
+<%doc>
+%if thing.is_loggedin:
+    %if thing.saved:
+       ${printablebuttons.state_button("unsave", _("unsave"), \
+          "return change_state(this, 'unsave', unsave_thing);", _("unsaved"))}
+    %else:
+       ${printablebuttons.state_button("save", _("save"), \
+          "return change_state(this, 'save', save_thing);", _("saved"))}
+    %endif
+  %endif
+</%doc>
+</%def>
\ No newline at end of file