diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index bdc76c811c..d592f1fb08 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -3,6 +3,12 @@
   margin: 40px;
 }
 
+//Problem selector requirements - TO DO: Marco -determine placement, integration for this
+.js .tabs .tab {
+  display: none;
+}
+//end problem selector reqs
+
 .main-column {
   clear: both;
   float: left;
@@ -143,8 +149,8 @@
 
           a {
             position: relative;            
-            border: 1px solid $darkGreen;
-            background: tint($green,20%);
+            border: 1px solid $lightBluishGrey2;
+            background: tint($mediumGrey,20%);
             color: #fff;            
             @include transition(background-color .15s);
 
@@ -154,13 +160,26 @@
           }
         }
 
+        .problem-type-tabs {
+          list-style-type: none;
+          width: 100%;
+
+          li {
+          }
+          a{
+            display: block;
+            width: 70px;
+            height:25px;
+          }
+        }
+
         .new-component-template {
           margin-bottom: 20px;
 
           li:last-child {
             a {
               border-radius: 0 0 3px 3px;
-              border-bottom: 1px solid $darkGreen;
+              border-bottom: 1px solid $mediumGrey;
             }
           }
 
@@ -180,13 +199,16 @@
             .name {
               float: left;
 
-              .ss-icon {
+              .problem-selector-icon {
                 @include transition(opacity .15s);
-                position: relative;
+                display: inline-block;
                 top: 1px;
-                font-size: 13px;
                 margin-right: 5px;
                 opacity: 0.5;
+                width: 17;
+                height: 21px;
+                vertical-align: middle;
+                background: url(../img/problem-selector-icons.png) no-repeat;
               }
             }
 
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 84f10fc2d1..79958612aa 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -31,6 +31,7 @@
     <script type="text/javascript" src="${static.url('js/vendor/markitup/sets/wiki/set.js')}"></script>
     <script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
     <script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
+    <script src="${static.url('js/vendor/jquery.tabs.js')}"></script>
 
     <%static:js group='main'/>
     <%static:js group='module-js'/>
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index f3a779604e..96028d65ef 100644
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -13,12 +13,20 @@
         state: '${unit_state}'
       })
     });
-  
+
+    $(document).ready(function() {
+      $('body').addClass('js');
+
+      // tabs
+      $('.tab-group').tabs();
+    });
+
     $('.new-component-template').each(function(){
         $emptyEditor = $(this).find('.empty');
         $(this).prepend($emptyEditor);
       });
     });
+
   </script>
 
 </%block>
@@ -56,38 +64,85 @@
               </div>
                 % for type, templates in sorted(component_templates.items()):
                 <div class="new-component-templates new-component-${type}">
-                    <h3 class="title">Select <span class="type">${type}</span> component type:</h3>
+                    <div class="tab-group">
+                      
+                      <ul class="problem-type-tabs nav-tabs">
+                        <li class="current">
+                          <a class="link-tab" href="#tab1">Standard</a>
+                        </li>
+                        <li>
+                          <a class="link-tab" href="#tab2">Advanced</a>
+                        </li>
+                      </ul>
+                      <div class="tabs">
+                        <div class="tab current" id="tab1">
+                          <ul class="new-component-template">
+                              <span> Tab 1 </span>
+                              % for name, location, has_markdown, is_empty in templates:
 
-                    <ul class="new-component-template">
-                        % for name, location, has_markdown, is_empty in templates:
+                                 % if is_empty:
+                                  <li class="editor-md empty">
+                                    <a href="#" data-location="${location}">
+                                      <span class="name"><i class="problem-selector-icons ss-symbolicons-block">&#xE714;</i> ${name}</span>
+                                    </a>
+                                  </li>
 
-                          % if is_empty:
-                            <li class="editor-md empty">
-                              <a href="#" data-location="${location}">
-                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
-                                <span class="editor-indicator">Simple <span class="sr">Editor</span></span>
-                              </a>
-                            </li>
+                                % elif has_markdown:
+                                  <li class="editor-md">
+                                    <a href="#" data-location="${location}">
+                                      <span class="name"><i class="problem-selector-icons ss-symbolicons-block">&#xE714;</i> ${name}</span>
+                                    </a>
+                                  </li>
 
-                          % elif has_markdown:
-                            <li class="editor-md">
-                              <a href="#" data-location="${location}">
-                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
-                                <span class="editor-indicator">Simple <span class="sr">Editor</span></span>
-                              </a>
-                            </li>
+                                % else:
+                                  <li class="editor-manual">
+                                    <a href="#" data-location="${location}">
+                                      <span class="name"><i class="problem-selector-icons ss-symbolicons-block">&#x1F527;</i> ${name}</span>
 
-                          % else:
-                            <li class="editor-manual">
-                              <a href="#" data-location="${location}">
-                                <span class="name"><i class="ss-icon ss-symbolicons-block">&#x1F527;</i> ${name}</span>
-                                <span class="editor-indicator">Advanced <span class="sr">Editor</span></span>
-                              </a>
-                            </li>
-                          % endif
+                                    </a>
+                                    
+                                  </li>
+                                % endif
 
-                        %endfor
-                    </ul>
+                              %endfor
+                          </ul>
+                        </div>
+                        <div class="tab" id="tab2">
+                          <ul class="new-component-template" id="tab2">
+                          <span> Tab 2 </span>
+                              % for name, location, has_markdown, is_empty in templates:
+
+                                 % if is_empty:
+                                  <li class="editor-md empty">
+                                    <a href="#" data-location="${location}">
+                                      <span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
+                                      <span class="editor-indicator">Simple <span class="sr">Editor</span></span>
+                                    </a>
+                                  </li>
+
+                                % elif has_markdown:
+                                  <li class="editor-md">
+                                    <a href="#" data-location="${location}">
+                                      <span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
+                                      <span class="editor-indicator">Simple <span class="sr">Editor</span></span>
+                                    </a>
+                                  </li>
+
+                                % else:
+                                  <li class="editor-manual">
+                                    <a href="#" data-location="${location}">
+                                      <span class="name"><i class="ss-icon ss-symbolicons-block">&#x1F527;</i> ${name}</span>
+                                      <span class="editor-indicator">Advanced <span class="sr">Editor</span></span>
+                                    </a>
+
+                                  </li>
+                                % endif
+
+                              %endfor
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
                     <a href="#" class="cancel-button">Cancel</a>
                 </div>
                 % endfor