     catch
       # We shouldn't do anything.
 
-  render: ->
+  onSortChange: (name, ascending) ->
+    @setState update @state,
+      activeSort: $set: {name: name, ascending: ascending}
 
-    if @props.problems.length == 0
-      return <h4>No problems have been loaded. Click <a href='#'>here</a> to get started.</h4>
-
-    problems = _.filter @props.problems, ((problem) ->
+  filterProblems: (problems) ->
+    visibleProblems = _.filter problems, ((problem) ->
       @state.filterRegex.exec problem.name
     ).bind this
 
-    problemComponents = problems.map (problem, i) ->
-      <Col xs={6} lg={4} key={i}>
-        <Problem {...problem}/>
+    sortedProblems = _.sortBy visibleProblems, @state.activeSort.name
+    if @state.activeSort.ascending
+      sortedProblems
+    else
+      sortedProblems.reverse()
+
+  render: ->
+    <Row className="pad">
+      <Col xs={3} md={3}>
+        <Row>
+          <ProblemFilter onSortChange={@onSortChange} filter="" onFilterChange={@onFilterChange}/>
+        </Row>
+        <Row>
+          <ProblemClassifier/>
+        </Row>
       </Col>
-
-    filterDisplay =
-    <div className="row">
-      <Col xs={3}>
-        <h3>Challenges</h3>
+      <Col xs={9} md={9}>
+        <ProblemList problems={@filterProblems(@props.problems)}/>
       </Col>
-      <Col xs={9} className="pad">
-        <ProblemFilter filter="" onFilterChange={@onFilterChange}/>
-      </Col>
-    </div>
-
-    <div>
-      {filterDisplay}
-      {problemComponents}
-    </div>
+    </Row>


  render: ->
    glyph = <Glyphicon glyph="search"/>
    <Input type='text' className="form-control"
      ref="filter"
      label="Search"
      addonBefore={glyph}
      onChange={@onChange}
      value={@state.filter}/>

Problem = React.createClass
  getInitialState: ->

Panel = ReactBootstrap.Panel
Button = ReactBootstrap.Button
ButtonGroup = ReactBootstrap.ButtonGroup
Glyphicon = ReactBootstrap.Glyphicon
Col = ReactBootstrap.Col
Input = ReactBootstrap.Input
Label = ReactBootstrap.Label
PanelGroup = ReactBootstrap.PanelGroup
Row = ReactBootstrap.Row

update = React.addons.update

SortableButton = React.createClass
  propTypes:
    name: React.PropTypes.string.isRequired

  getInitialState: ->
    ascending: true
    focused: false

  #TODO: Needs reworked.
  handleClick: (e) ->
    if not @state.focused and false
      @setState update @state,
        focused: $set: true
    else
      @setState update @state,
        ascending: $set: !@state.ascending

     @props.onSortChange @props.name, !@state.ascending

  render: ->
    glyph = if @state.ascending then <Glyphicon glyph="chevron-up"/> else <Glyphicon glyph="chevron-down"/>
    <Button active={@props.active} onClick={@handleClick}>{@props.name} {glyph}</Button>

ProblemFilter = React.createClass
  propTypes:
