           value={@state.filter}/>
       </Col>
       <Col xs={12}>
-        <SortableButton name="score" onSortChange={@props.onSortChange}/>
-        <SortableButton name="name" onSortChange={@props.onSortChange}/>
-        <SortableButton name="category" onSortChange={@props.onSortChange}/>
+        <SortableButtonGroup key={@props.activeSort} activeSort={@props.activeSort}
+          onSortChange={@props.onSortChange} data={["name", "category", "score"]}/>
       </Col>
     </Panel>
 

  getInitialState: ->
    filterRegex: /.*/
    activeSort:
      name: "score"
      ascending: true
    problemClassifier: [
      {name: "all", func: (problem) -> true}

    <Panel bsStyle={panelStyle} header={problemHeader} footer={problemFooter} collapsible
      expanded={@state.expanded} onSelect={@handleExpand}>
      <Row>
        <Col md={4}>
          <h4>Score: {@props.score}</h4>
          {submissionDisplay}
        </Col>
        <Col md={8}>
          <h4>
            {@props.author}
            {if @props.organization then " @ "+@props.organization}
          </h4>
          <hr/>
          <CollapsibleInformation title="Description">
            <p className="problem-description">{@props.description}</p>
          </CollapsibleInformation>
          <CollapsibleInformation title="Hints">
            <ProblemHintTable hints={@props.hints}/>
          </CollapsibleInformation>
          <CollapsibleInformation title="Instance Flags">
            <ProblemFlagTable instances={@props.instances}/>
          </CollapsibleInformation>
