diff --git a/assets/scripts/travis.coffee b/assets/scripts/travis.coffee
index 773a4c4e..93412937 100644
--- a/assets/scripts/travis.coffee
+++ b/assets/scripts/travis.coffee
@@ -192,6 +192,9 @@ Travis.Router.reopen
 Ember.LinkView.reopen
   loadingClass: 'loading_link'
 
+if Travis.config.pro
+  $('body').addClass('pro')
+
 require 'travis/ajax'
 require 'travis/adapter'
 require 'travis/adapters/env_vars'
diff --git a/assets/styles/charm.sass b/assets/styles/charm.sass
new file mode 100644
index 00000000..b359a82f
--- /dev/null
+++ b/assets/styles/charm.sass
@@ -0,0 +1,14 @@
+#CHARM_TAB
+  -webkit-transform: translateY(0) rotate(270deg) !important
+  -moz-transform: translateY(0) rotate(270deg) !important
+  transform: translateY(0) rotate(270deg) !important
+  background-image: url(/images/ui/charmtab.png)
+  margin-left: -135px !important
+  margin-top: -112px !important
+  top: 100% !important
+  left: 100% !important
+
+#CHARM_TAB:hover
+  -webkit-transform: translateY(-7px) rotate(270deg) !important
+  -moz-transform: translateY(-7px) rotate(270deg) !important
+  transform: translateY(-7px) rotate(270deg) !important
diff --git a/assets/styles/forms.scss b/assets/styles/forms.scss
new file mode 100644
index 00000000..5b25d75f
--- /dev/null
+++ b/assets/styles/forms.scss
@@ -0,0 +1,206 @@
+@import "compass";
+
+.pro {
+  form.subscription-form {
+    display: inline-block;
+    width: 900px;
+
+    h2 {
+      margin-bottom: 13px;
+    }
+    h3 {
+      margin: 24px 0 0 0;
+    }
+    p {
+      line-height: 160%;
+      font-size: 16px;
+      color: #666;
+    }
+    ul {
+      list-style-type: disc;
+      margin-left: 20px;
+
+      li {
+        margin: 0;
+      }
+    }
+    ul.footnotes {
+      margin: 36px 60px 0 85px;
+      list-style-type: none;
+    }
+    sup.required {
+      color: #c00;
+      font-size: 15px;
+    }
+    .message {
+      float: left;
+      display: none;
+      padding-left: 24px;
+      background: url(/images/spinner.gif) no-repeat left center;
+      color: #999;
+    }
+    .note {
+      font-size: 12px;
+      color: #666;
+      width: 840px;
+    }
+
+    & > div {
+      display: inline-block;
+      height: 1%;
+    }
+
+    fieldset + p {
+      clear: both;
+    }
+
+    fieldset {
+      padding: 0;
+      border: 0;
+      margin: 12px 36px 0 0;
+
+      &:nth-child(odd) {
+        margin-right: 0;
+      }
+      &.wide {
+        margin: 0;
+      }
+
+      legend {
+        padding-bottom: 10px;
+        color: #666;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .input {
+        position: relative;
+        height: 20px;
+        margin-bottom: 11px;
+      }
+
+      label {
+        float: left;
+        clear: both;
+        width: 100px;
+        margin-right: 14px;
+        padding-top: 5px;
+        line-height: 20px;
+        text-align: right;
+        font-size: 14px;
+        text-shadow: 2px 2px 0px #fff;
+        color: #666;
+
+        &.required:after {
+          content: '*';
+          top: 17px;
+          right: -10px;
+          padding-left: 3px;
+          color: #c00;
+        }
+      }
+      input, textarea, select {
+        float: left;
+        font-family: "Helvetica Neue", Helvetica, Arial;
+      }
+      input, textarea {
+        border: 1px solid #ddd;
+        font-size: 13px;
+        @include border-radius(1px);
+      }
+      input {
+        margin-top: 4px;
+        height: 20px;
+        width: 270px;
+        padding-left: 5px;
+      }
+      textarea {
+        margin-top: 8px;
+        height: 20px;
+        width: 270px;
+      }
+      &.wide textarea {
+        width: 740px;
+      }
+      select {
+        font-size: 14px;
+        margin-top: 5px;
+        height: 20px;
+      }
+      .boolean {
+        input {
+          margin: 8px 8px 0 86px;
+          width: auto;
+          clear: left;
+        }
+        label {
+          clear: none;
+          width: auto;
+          margin-top: 8px;
+          line-height: 16px;
+          text-align: left;
+          font-size: 12px;
+        }
+      }
+      .country select {
+        width: 275px;
+      }
+      .hint {
+        display: none;
+      }
+      p {
+        float: left;
+        width: 740px;
+        margin: 0 0 2px 0;
+        line-height: 41px;
+        font-size: 13px;
+        color: #666;
+      }
+    }
+
+    #comment fieldset {
+      margin-top: 12px;
+    }
+
+    .actions {
+      display: block;
+      clear: both;
+      height: 40px;
+      line-height: 60px;
+
+      input, a {
+        display: block;
+        float: left;
+        width: 184px;
+        height: 40px;
+        margin: 10px 20px 0 0px;
+        margin-left: 115px;
+        border: 0;
+        text-align: center;
+        line-height: 37px;
+        font-size: 20px;
+        text-decoration: none;
+        color: white;
+        text-shadow: 2px 2px 0 #666;
+        cursor: hand;
+        @include border-radius(6px);
+        background-color: #19A509;
+        @include background-image(linear-gradient(#3f9c33 0%, #348629 100%));
+        &:hover {
+          @include background-image(linear-gradient(#1CBE0A 0%, #158F07 100%));
+        }
+        &[disabled] {
+          @include background-image(linear-gradient(#ddd 0%, #ccc 100%));
+          color: #f6f6f6;
+          text-shadow: 2px 2px 0 #aaa;
+        }
+      }
+    }
+    .error, div.error > input {
+      border-color: #c00;
+    }
+    .tipsy {
+      margin-left: 20px;
+    }
+  }
+}
diff --git a/assets/styles/pro.sass b/assets/styles/pro.sass
new file mode 100644
index 00000000..dc247096
--- /dev/null
+++ b/assets/styles/pro.sass
@@ -0,0 +1,180 @@
+@import "_mixins/all"
+
+.pro
+  #log-container
+    padding-bottom: 1.2em
+
+  .tip
+    a
+      text-decoration: underline
+    p
+      margin-top: 12px
+      margin-bottom: 0px
+
+  #top
+    li.stats
+      display: none
+
+    .profile
+      margin-right: 5px
+
+    .legal
+      min-width: 110px
+      ul
+        margin-left: -20px
+        a
+          padding: 5px 35px
+
+  #github
+    display: none
+
+  #home #main
+    padding-right: 30px
+
+    #repository .github-stats
+      display: none
+
+    #empty
+      font-size: $font-size-big
+
+      h2
+        margin-bottom: 37px
+
+      ul
+        list-style-type: disc
+        padding-left: 18px
+
+      a
+        text-decoration: underline
+
+    .sponsor
+      display: none
+
+  #profile #main
+    .tabs .right
+      float: right
+    .tabs #tab_billing
+      margin-right: 0
+
+    .activate,
+    .activated
+      position: absolute
+      display: block
+      right: 0
+      margin: -20px 40px 0 0
+      padding-right: 25px
+
+      &:before
+        content: ""
+        position: absolute
+        top: 5px
+        right: 7px
+        width: 12px
+        height: 12px
+
+    .activate:before
+      background: inline-image('ui/activate.png') no-repeat 0 0
+
+    .activate:hover:before,
+    .activate:focus:before,
+    .activate:active:before
+      background-position: -12px 0
+
+    .activated
+      background: #44a057
+      border: 0
+      color: white
+
+    .activated:before
+      background: url(/images/ui/activated.png) no-repeat 0 0
+
+  #running-jobs
+    .jobs
+      margin: 5px 0 5px
+    .job
+      list-style-type: disc
+      list-style-position: inside
+    .slug
+      max-width: 150px
+      overflow: hidden
+      white-space: nowrap
+      text-overflow: ellipsis
+      display: inline-block
+      display: -moz-inline-stack
+    .group a
+      cursor: pointer
+
+  @import "_mixins/all"
+
+  #right
+    padding-bottom: 80px
+
+    h4
+      margin: 24px 0 0 0
+
+    ul
+      margin-top: 10px
+
+      li
+        word-wrap: break-word
+
+    .box
+      margin-top: 25px
+      margin-left: -3px
+      padding: 15px
+      border: 1px solid #e0e0e0
+      background-color: $color-bg-sidebar-box
+
+      h4
+        margin: 0
+      a
+        text-decoration: underline
+      li
+        list-style-type: square
+        margin-left: 15px
+
+    #queues
+      ul
+        margin: 5px 0 5px
+
+
+  #slider
+    position: absolute
+    height: 99%
+    top: 12px
+    left: 0
+    width: 10px
+    background-color: $color-bg-slider
+    cursor: pointer
+    background: transparent url(/images/ui/slider-closed.png) no-repeat 3px 38px
+    @include border-top-left-radius(4px)
+
+    &:hover
+      background-color: $color-border-slider-hover
+
+  .maximized
+    #slider
+      top: 45px
+
+  #right .show-more-jobs
+    text-decoration: underline
+    cursor: pointer
+
+  @mixin flex($grow, $shrink, $size)
+    -webkit-flex: $grow $shrink $size
+    flex:         $grow $shrink $size
+
+  #right
+    @include flex(1, 1, 300px)
+    max-width: 180px
+    padding: 25px 20px 80px 20px
+    background-color: #E9E9E7
+    border-left: 1px solid $color-border-normal
+
+  #settings li.env-var span.name
+    width: 210px
+
+  #settings li.env-var span.value
+    max-width: 265px
+  #settings
+    min-width: 675px