diff --git a/6 b/6
new file mode 100644
index 00000000..e69de29b
diff --git a/browser/components/BoardShowPage/Card/CardBadges/CardLabel.sass b/browser/components/BoardShowPage/Card/CardBadges/CardLabel.sass
index e233b09e..53d3d219 100644
--- a/browser/components/BoardShowPage/Card/CardBadges/CardLabel.sass
+++ b/browser/components/BoardShowPage/Card/CardBadges/CardLabel.sass
@@ -11,6 +11,7 @@
   &:hover
     cursor: pointer
   &-text
+    min-height: 2em
     font-weight: bolder
     font-size: 80%
     padding: 0.4em 0.5em
diff --git a/browser/components/BoardShowPage/LabelMain.js b/browser/components/BoardShowPage/LabelMain.js
new file mode 100644
index 00000000..3f1fd414
--- /dev/null
+++ b/browser/components/BoardShowPage/LabelMain.js
@@ -0,0 +1,239 @@
+// import React, {Component} from 'react'
+// import CardLabel from './Card/CardBadges/CardLabel'
+// import ColorBox from './ColorBox'
+// import Link from '../Link'
+// import Form from '../Form'
+// import Icon from '../Icon'
+// import Button from '../Button'
+// import ConfirmationButton from '../ConfirmationButton'
+// import ActionsMenuPane from '../ActionsMenuPane'
+// import boardStore from '../../stores/boardStore'
+// import commands from '../../commands'
+// import './Card/LabelMenu.sass'
+//
+// export default class MainLabelPanel extends Component {
+//
+//   static propTypes = {
+//     card: React.PropTypes.object.isRequired,
+//     board: React.PropTypes.object.isRequired,
+//     // TODO: onClose: React.PropTypes.func.isRequired
+//
+//   }
+//
+//
+//   //TODO: translate this constructor taken from LabelMenu for these components
+//   constructor(props){
+//     super(props)
+//     this.state = {
+//       null: null
+//     }
+//     this.editLabel = this.editLabel.bind(this)
+//   }
+//
+//   editLabel(labelId){
+//     this.setState({editingLabel: labelId})
+//   }
+//
+//
+//
+//   editLabel(labelId, event){
+//     event.preventDefault()
+//     this.props.editLabel(labelId)
+//     this.props.goToPane('Create Label Pane')()
+//   }
+//
+//
+//   addOrRemoveLabel(labelId, event) {
+//     event.preventDefault()
+//     commands.addOrRemoveLabel(this.props.card.id, labelId)
+//   }
+//
+//   render() {
+//     const { card, board } = this.props
+//     const boardLabels = board.labels.map( label => {
+//       const checked = card.label_ids.includes(label.id)
+//       return <LabelRow
+//         key={label.id}
+//         checked={checked}
+//         label={label}
+//         onEdit={this.editLabel.bind(this, label.id)}
+//         onClick={this.addOrRemoveLabel.bind(this, label.id)}
+//       />
+//     })
+//
+//     return <ActionsMenuPane
+//       heading="Labels"
+//       onClose={this.props.onClose}
+//       className="LabelMenu-MainLabelPane"
+//     >
+//       <div className="LabelMenu-labels">
+//         {boardLabels}
+//       </div>
+//       <div className="LabelMenu-controls">
+//         <Link className="LabelMenu-button" onClick={this.props.goToPane('Create Label Pane')}>
+//           Create Label
+//         </Link>
+//       </div>
+//     </ActionsMenuPane>
+//   }
+// }
+//
+// const LabelRow = (props) => {
+//   const {label, onClick, onEdit, checked} = props
+//
+//   return <div className="LabelMenu-LabelRow">
+//     <div className="LabelMenu-LabelRow-box" onClick={onClick}>
+//       <CardLabel key={label.id} color={label.color} text={label.text} checked={checked}/>
+//     </div>
+//     <Link onClick={onEdit} className="LabelMenu-LabelRow-edit"><Icon type="pencil" /></Link>
+//   </div>
+// }
+//
+// export class CreateLabelPanel extends Component {
+//
+//   constructor(props) {
+//     super(props)
+//     this.state = {}
+//
+//     if (props.state.editingLabel === null){
+//       this.state.labelText = ''
+//       this.state.labelColor = '#98A0A4'
+//     } else {
+//       const label = this.labelBeingEdited(props)
+//       this.state.labelText = label.text
+//       this.state.labelColor = label.color
+//     }
+//
+//     this.deleteLabel = this.deleteLabel.bind(this)
+//     this.changeColor = this.changeColor.bind(this)
+//     this.createOrEditLabel = this.createOrEditLabel.bind(this)
+//     this.handleChange = this.handleChange.bind(this)
+//     this.goBack = this.goBack.bind(this)
+//   }
+//
+//   labelBeingEdited(props=this.props){
+//     return this.isEditing(props) &&
+//       props.board.labels.find(label => label.id === props.state.editingLabel)
+//   }
+//
+//   isEditing(props=this.props){
+//     return typeof props.state.editingLabel === 'number'
+//   }
+//
+//   goBack(){
+//     this.props.goToPane('Main Label Pane')()
+//   }
+//
+//   deleteLabel(event) {
+//     if (event) event.preventDefault()
+//     commands.deleteLabel(this.props.board.id, this.props.state.editingLabel).then(this.goBack)
+//   }
+//
+//   changeColor(event) {
+//     if (event) event.preventDefault()
+//     this.setState({labelColor: event.target.attributes.color.value})
+//   }
+//
+//   createOrEditLabel(event){
+//     if (event) event.preventDefault()
+//     this.isEditing() ? this.updateLabel() : this.createLabel()
+//   }
+//
+//   updateLabel(){
+//     commands.updateLabel(
+//       this.props.board.id,
+//       this.props.state.editingLabel,
+//       {
+//         text: this.state.labelText,
+//         color: this.state.labelColor
+//       }
+//     )
+//       .then(this.goBack)
+//   }
+//
+//   createLabel(){
+//     commands.createLabel(this.props.board.id, {
+//       text: this.state.labelText,
+//       color:this.state.labelColor,
+//       cardId: this.props.card.id,
+//     }).then(this.goBack)
+//   }
+//
+//   handleChange(event) {
+//     this.setState({labelText: event.target.value})
+//   }
+//
+//   render() {
+//     const labelBeingEdited = this.labelBeingEdited()
+//     const header = this.isEditing() ? "Edit Label" : "Create Label"
+//
+//     const colorBoxes = colors.map(color => {
+//       const checked = (this.state.labelColor===color) ? true : false
+//       return <div
+//         key={color}
+//         className="LabelMenu-CreateLabelPanel-colorbox">
+//         <ColorBox
+//           checked={checked}
+//           color={color}
+//           boardId={this.props.board.id}
+//           onClick={this.changeColor}
+//           onClose={this.props.onClose}
+//         />
+//       </div>
+//     })
+//
+//     const deleteButton = this.isEditing() ?
+//       <ConfirmationButton
+//         className="LabelMenu-CreateLabelPanel-button"
+//         onConfirm={this.deleteLabel}
+//         type="danger"
+//         submit={false}
+//         title={`Delete Label`}
+//         message={`Are you sure you want to delete the "${labelBeingEdited.text}" label?`}
+//         buttonName="Delete"
+//       >
+//         Delete
+//       </ConfirmationButton> : null
+//
+//     return <ActionsMenuPane
+//       heading={header}
+//       board={this.props.board}
+//       card={this.props.card}
+//       onClose={this.props.onClose}
+//       onBack={this.goBack}
+//       className="LabelMenu-CreateLabelPanel"
+//     >
+//       <Form
+//         method="post"
+//         onSubmit={this.createOrEditLabel}
+//         className="LabelMenu-CreateLabelPanel-Form"
+//       >
+//         <input type="text" placeholder="Card Text" value={this.state.labelText} onChange={this.handleChange}/>
+//         <div className="LabelMenu-CreateLabelPanel-colors">{colorBoxes}</div>
+//         <br/>
+//         <div className="LabelMenu-CreateLabelPanel-controls">
+//           <Button
+//             className="LabelMenu-CreateLabelPanel-button"
+//             type="primary"
+//             submit={true}
+//           >
+//             Save
+//           </Button>
+//           {deleteButton}
+//         </div>
+//       </Form>
+//     </ActionsMenuPane>
+//   }
+// }
+//
+// const colors = [
+//   "#0079bf",
+//   "#d8a359",
+//   "#70a95d",
+//   "#bc6858",
+//   "#9d7cae",
+//   "#d478a4",
+//   "#6cc885",
+//   "#30bbd3",
+//   "#98a0a4"
+// ]
diff --git a/browser/components/BoardShowPage/LabelsPane.js b/browser/components/BoardShowPage/LabelsPane.js
new file mode 100644
index 00000000..79dd6bfb
--- /dev/null
+++ b/browser/components/BoardShowPage/LabelsPane.js
@@ -0,0 +1,30 @@
+// import React, { Component, PropTypes } from 'react'
+// import CardLabel from './Card/CardBadges/CardLabel'
+
+
+// // This component is designed to be given to ActionsMenu
+// export default class LabelsPane extends Component {
+
+//   static propTypes = {
+//     board: PropTypes.object.isRequired,
+//   }
+
+//   render(){
+//     const { board } = this.props
+
+//     const labels = board.labels.map( label => {
+//       return <Label key={label.id} label={label} />
+//     })
+
+//     return <div className="LabelsPane">
+//       {labels}
+//     </div>
+//   }
+
+// }
+
+
+// const Label = ({label}) =>
+//   <div className="LabelsPane-Label">
+//     <CardLabel key={label.id} color={label.color} text={label.text} checked={false}/>
+//   </div>
diff --git a/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js b/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js
new file mode 100644
index 00000000..7f8557b1
--- /dev/null
+++ b/browser/components/BoardShowPage/MenuSideBar/LabelsPane.js
@@ -0,0 +1,64 @@
+import React, { Component, PropTypes } from 'react'
+import CardLabel from '../Card/CardBadges/CardLabel'
+import SearchBar from './SearchBar'
+import PopoverMenuButton from '../../PopoverMenuButton'
+import './LabelsPane.sass'
+
+
+// This component is designed to be given to ActionsMenu
+export default class LabelsPane extends Component {
+
+  static propTypes = {
+    board: PropTypes.object.isRequired,
+  }
+
+  constructor(props){
+    super(props)
+
+    // states for this component
+    this.state = {
+      searchTerm: '',
+    }
+    // bind properties like this:
+    this.setSearchTerm = this.setSearchTerm.bind(this)
+  }
+
+  setSearchTerm(event) {
+    this.setState({
+      searchTerm: event.target.value
+    })
+  }
+
+  render(){
+    const { board } = this.props
+
+    const labels = board.labels.map( label => {
+      return <CardLabel
+        key={label.id}
+        className="CardLabel"
+        color={label.color}
+        text={label.text}
+        checked={false}
+      />
+    })
+
+    return <div className="BoardShowPage-MenuSideBar-LabelsPane">
+      <SearchBar
+        type="text"
+        className="BoardShowPage-MenuSideBar-LabelsPane-SearchBox"
+        placeholder="Placeholder for searching unarchive."
+        value={this.state.searchTerm}
+        onChange={this.setSearchTerm}
+      />
+
+      {labels}
+
+   <PopoverMenuButton
+    className="BoardShowPage-RenameBoardButton"
+    type="invisible"
+    popover={labels} />
+
+    </div>
+  }
+
+}
diff --git a/browser/components/BoardShowPage/MenuSideBar/LabelsPane.sass b/browser/components/BoardShowPage/MenuSideBar/LabelsPane.sass
new file mode 100644
index 00000000..5042cccd
--- /dev/null
+++ b/browser/components/BoardShowPage/MenuSideBar/LabelsPane.sass
@@ -0,0 +1,2 @@
+.CardLabel
+  	margin-bottom: 1em
diff --git a/browser/components/BoardShowPage/MenuSideBar/SearchBar.js b/browser/components/BoardShowPage/MenuSideBar/SearchBar.js
new file mode 100644
index 00000000..2ccdc4e1
--- /dev/null
+++ b/browser/components/BoardShowPage/MenuSideBar/SearchBar.js
@@ -0,0 +1,20 @@
+import React, { Component, PropTypes } from 'react'
+import Link from '../../Link'
+
+const SearchBar = (props) => {
+  const className = `BoardShowPage-MenuSideBar-SearchBar ${props.className||''}`
+    return <input
+      type="text"
+      className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
+      placeholder="Search archive..."
+      value={props.value}
+      onChange={props.onChange}
+    />
+  }
+
+SearchBar.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+}
+
+module.exports = SearchBar
diff --git a/browser/components/BoardShowPage/MenuSideBar/SearchBar.sass b/browser/components/BoardShowPage/MenuSideBar/SearchBar.sass
new file mode 100644
index 00000000..5516f9e6
--- /dev/null
+++ b/browser/components/BoardShowPage/MenuSideBar/SearchBar.sass
@@ -0,0 +1,13 @@
+.ToggleDisplay
+  padding-left: 15px
+  padding-right: 50px
+  position: relative
+  user-select: none
+  font-size: 14px
+  min-width: 9em
+  &:active
+    background: #CDD2D4
+    color: #4d4d4d
+  &:hover
+    background: #D6DADC
+    color: #4d4d4d
diff --git a/browser/components/BoardShowPage/MenuSideBar/Unarchive.js b/browser/components/BoardShowPage/MenuSideBar/Unarchive.js
index 9ef55388..13c15456 100644
--- a/browser/components/BoardShowPage/MenuSideBar/Unarchive.js
+++ b/browser/components/BoardShowPage/MenuSideBar/Unarchive.js
@@ -7,6 +7,8 @@ import ConfirmationLink from '../../ConfirmationLink'
 import Icon from '../../Icon'
 import Button from '../../Button'
 import commands from '../../../commands'
+import SearchBar from './SearchBar'
+import './SearchBar.sass'
 
 
 export default class Unarchive extends Component {
@@ -18,8 +20,8 @@ export default class Unarchive extends Component {
   constructor(props){
     super(props)
     this.state = {
-      searchTerm: '',
-      display: 'Cards'
+      display: 'Cards',
+      searchTerm: ''
     }
     this.setSearchTerm = this.setSearchTerm.bind(this)
     this.toggleDisplay = this.toggleDisplay.bind(this)
@@ -27,7 +29,7 @@ export default class Unarchive extends Component {
 
   setSearchTerm(event){
     const searchTerm = event.target.value
-    this.setState({searchTerm: searchTerm})
+    this.setState({searchTerm})
   }
 
   toggleDisplay(){
@@ -44,15 +46,17 @@ export default class Unarchive extends Component {
       <ArchivedCards board={board} searchTerm={this.state.searchTerm} className="BoardShowPage-MenuSideBar-ArchivedItems-List" /> :
       <ArchivedLists board={board} searchTerm={this.state.searchTerm} className="BoardShowPage-MenuSideBar-ArchivedItems-List"/>
     return (<div className="BoardShowPage-MenuSideBar-ArchivedItems">
-        <span className="BoardShowPage-MenuSideBar-ArchivedItems-Header" > <input
-          type="text"
-          className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
-          placeholder="Search archive..."
-          value={this.state.searchTerm}
-          onChange={this.setSearchTerm}
-        />
-      <Link onClick={this.toggleDisplay} className="BoardShowPage-MenuSideBar-ArchivedItems-ToggleDisplay">{toggleButtonText}</Link>
-      </span>
+      <SearchBar
+        type="text"
+        // className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
+        placeholder="Placeholder for searching unarchive."
+        value={this.state.searchTerm}
+        onChange={this.setSearchTerm}
+      />
+      <Link
+        onClick={this.toggleDisplay}
+        className="ToggleDisplay">{toggleButtonText}
+      </Link>
       {toggleDisplayStatus}
     </div>
   )
diff --git a/browser/components/BoardShowPage/MenuSideBar/index.js b/browser/components/BoardShowPage/MenuSideBar/index.js
index a12dd2ab..cae0f7c1 100644
--- a/browser/components/BoardShowPage/MenuSideBar/index.js
+++ b/browser/components/BoardShowPage/MenuSideBar/index.js
@@ -10,6 +10,7 @@ import List from '../List'
 import Unarchive from './Unarchive'
 import InviteByEmailPopover from '../../InviteByEmailPopover'
 import Avatar from '../../Avatar'
+import LabelsPane from './LabelsPane'
 import './index.sass'
 
 // panes
@@ -293,11 +294,11 @@ const SettingsPane = ({board, onClose, gotoPane, goBack}) =>
     <div>Settings Label TBD</div>
   </Pane>
 
-
-const LabelsPane = ({board, onClose, gotoPane, goBack}) =>
-  <Pane name="Labels">
-    <div>Labels Panel</div>
-  </Pane>
+// TODO: how to use the labelspane component
+// const LabelsPane = ({board, onClose, gotoPane, goBack}) =>
+  // <Pane name="Labels">
+  //   <div>Labels Panel</div>
+  // </Pane>
 
 
 const DownloadBoardButton = (props) => {
diff --git a/browser/components/BoardShowPage/MenuSideBar/index.sass b/browser/components/BoardShowPage/MenuSideBar/index.sass
index 41b9044b..d66b1a8e 100644
--- a/browser/components/BoardShowPage/MenuSideBar/index.sass
+++ b/browser/components/BoardShowPage/MenuSideBar/index.sass
@@ -198,10 +198,9 @@
     display: flex
     overflow-y: scroll
     overflow-x: hidden
-    flex-direction: column
+    flex-direction: row
     flex-wrap: nowrap
     padding: 0 10px
-    min-height: 30%
     &-Header
       display: flex
       align-items: flex-start
@@ -235,10 +234,12 @@
 
     &-item
       margin-top: 8px
+
     &-list
       margin-right: 200px
 
 
+
     &-UnarchiveButton
       left: 10px
       top: 0px
diff --git a/browser/components/PopoverMenuButton.js b/browser/components/PopoverMenuButton.js
index 824d27c5..895e3a11 100644
--- a/browser/components/PopoverMenuButton.js
+++ b/browser/components/PopoverMenuButton.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Button from './Button'
 import ToggleComponent from './ToggleComponent'
+// import PopoverMenuButton from './PopoverMenuButton'
 
 export default class PopoverMenuButton extends ToggleComponent {