diff --git a/docs/changelog/7.x.x.txt b/docs/changelog/7.x.x.txt
index 3464ef087..9f353fff2 100644
--- a/docs/changelog/7.x.x.txt
+++ b/docs/changelog/7.x.x.txt
@@ -1,4 +1,5 @@
 7.10.7
+ - rfe #10521: Use monospaced font in template edit textarea
  - rfe #12016: add more functionality to story_loop
  - Added a Preview button the the Template asset's edit page
  - fixed #12009: Export JS errors in IE7
diff --git a/lib/WebGUI/Form/Codearea.pm b/lib/WebGUI/Form/Codearea.pm
index bfdeab57f..c191363f8 100644
--- a/lib/WebGUI/Form/Codearea.pm
+++ b/lib/WebGUI/Form/Codearea.pm
@@ -100,4 +100,37 @@ sub getName {
     return WebGUI::International->new($session, 'WebGUI')->get('codearea');
 }
 
+#-------------------------------------------------------------------
+
+=head2 headTags
+
+Includes script files for the code area
+
+=cut
+
+sub headTags {
+    my $self    = shift;
+    my $session = $self->session;
+    $self->SUPER::headTags(@_);
+    $session->style->setScript(
+        $session->url->extras('yui-webgui/build/codeArea/codeArea-min.js')
+    );
+}
+
+#-------------------------------------------------------------------
+
+=head2 toHtml
+
+Add some javascript to fix hitting the tab key.
+
+=cut
+
+sub toHtml {
+    my $self = shift;
+    $self->headTags;
+    my $id = $self->get('id');
+    return $self->SUPER::toHtml(@_)
+        . qq{<script>new YAHOO.WebGUI.CodeArea('$id').render()</script>};
+}
+
 1;
diff --git a/www/extras/yui-webgui/build/codeArea/codeArea-min.js b/www/extras/yui-webgui/build/codeArea/codeArea-min.js
new file mode 100644
index 000000000..485331149
--- /dev/null
+++ b/www/extras/yui-webgui/build/codeArea/codeArea-min.js
@@ -0,0 +1,2 @@
+(function(){var b,g=YAHOO.util.Event;YAHOO.namespace("YAHOO.WebGUI");YAHOO.WebGUI.CodeArea=function(a){this.el=a};b=YAHOO.WebGUI.CodeArea.prototype;b.draw=function(){var a=this.el;if(typeof a==="string")a=this.el=document.getElementById(a);a.style.fontFamily="monospace"};b.render=function(){this.draw();this.bind()};b.bind=function(){(new YAHOO.util.KeyListener(this.el,{keys:9},{fn:this.onTab,scope:this,correctScope:true})).enable()};b.onTab=function(a,c){a=this.el;c=c[1];var f=a.selectionStart,d=
+a.selectionEnd,h=a.scrollTop,e=a.value;d=e.slice(0,f)+"\t"+e.slice(d,e.length);a.value=d;a.selectionStart=a.selectionEnd=f+1;a.scrollTop=h;g.stopEvent(c)}})();
diff --git a/www/extras/yui-webgui/build/codeArea/codeArea.js b/www/extras/yui-webgui/build/codeArea/codeArea.js
new file mode 100644
index 000000000..1a1847ac8
--- /dev/null
+++ b/www/extras/yui-webgui/build/codeArea/codeArea.js
@@ -0,0 +1,45 @@
+/*global YAHOO, document */
+
+(function () {
+    var proto, event = YAHOO.util.Event;
+
+    YAHOO.namespace('YAHOO.WebGUI');
+    YAHOO.WebGUI.CodeArea = function (el) {
+        this.el = el;
+    };
+
+    proto = YAHOO.WebGUI.CodeArea.prototype;
+    proto.draw = function () {
+        var el = this.el;
+        if (typeof el === 'string') {
+            el = this.el = document.getElementById(el);
+        }
+        el.style.fontFamily = 'monospace';
+    };
+    proto.render = function () {
+        this.draw();
+        this.bind();
+    };
+    proto.bind = function () {
+        new YAHOO.util.KeyListener(this.el, { keys: 9 }, {
+            fn           : this.onTab,
+            scope        : this,
+            correctScope : true
+        }).enable();
+    };
+    proto.onTab = function (type, args) {
+        var el = this.el,
+        e      = args[1],
+        start  = el.selectionStart,
+        end    = el.selectionEnd,
+        top    = el.scrollTop,
+        old    = el.value,
+        str    = old.slice(0, start) + '\t' + old.slice(end, old.length);
+
+        el.value          = str;
+        el.selectionStart = el.selectionEnd = start + 1;
+        el.scrollTop      = top;
+
+        event.stopEvent(e);
+    };
+}());