diff --git a/class/AssignStudentView.php b/class/AssignStudentView.php
index 45ee303d..1590598a 100644
--- a/class/AssignStudentView.php
+++ b/class/AssignStudentView.php
@@ -42,6 +42,7 @@ public function show()
 
         javascript('jquery');
         javascript('modules/hms/assign_student');
+        javascriptMod('hms', 'student_assign');
 
         $tpl = array();
         $tpl['TERM'] = Term::getPrintableSelectedTerm();
@@ -78,112 +79,22 @@ public function show()
 
         $hallList = HMS_Residence_Hall::getHallsWithVacanciesArray(Term::getSelectedTerm());
 
-        $form->addDropBox('residence_hall', $hallList);
 
-        if ($pre_populate) {
-            $form->setMatch('residence_hall', $hall->id);
-        } else {
-            $form->setMatch('residence_hall', 0);
-        }
-        $form->setLabel('residence_hall', 'Residence hall: ');
-        $form->addCssClass('residence_hall', 'form-control');
-
-        if ($pre_populate) {
-            $form->addDropBox('floor', $hall->get_floors_array());
-            $form->setMatch('floor', $floor->id);
-        } else {
-            $form->addDropBox('floor', array(0 => ''));
+        $prepop = array();
+        if($pre_populate)
+        {
+          $prepop = array('hall_id'=> $hall->id, 'floor_id' => $floor->id, 'room_id' => $room->id, 'bed_id' => $this->bed->id);
         }
-        $form->setLabel('floor', 'Floor: ');
-        $form->addCssClass('floor', 'form-control');
 
-        if ($pre_populate) {
-            $form->addDropBox('room', $floor->get_rooms_array());
-            $form->setMatch('room', $room->id);
-        } else {
-            $form->addDropBox('room', array(0 => ''));
-        }
-        $form->setLabel('room', 'Room: ');
-        $form->addCssClass('room', 'form-control');
-
-        if ($pre_populate) {
-            $form->addDropBox('bed', $room->get_beds_array());
-            $form->setMatch('bed', $this->bed->id);
-            $show_bed_drop = true;
-        } else {
-            $form->addDropBox('bed', array(0 => ''));
-            $show_bed_drop = false;
-        }
-        $form->setLabel('bed', 'Bed: ');
-        $form->addCssClass('bed', 'form-control');
-
-        if ($show_bed_drop) {
-            $tpl['BED_STYLE'] = '';
-            $tpl['LINK_STYLE'] = 'display: none';
-        } else {
-            $tpl['BED_STYLE'] = 'display: none';
-            $tpl['LINK_STYLE'] = '';
-        }
-
-        $form->addDropBox('meal_plan', array(
-                BANNER_MEAL_LOW   => 'Low',
-                BANNER_MEAL_STD   => 'Standard',
-                BANNER_MEAL_HIGH  => 'High',
-                BANNER_MEAL_SUPER => 'Super',
-                BANNER_MEAL_NONE  => 'None',
-                // 4 Week Meal Plan Removed according to ticket #709
-                // BANNER_MEAL_4WEEK => 'Summer (4 weeks)',
-                BANNER_MEAL_5WEEK => 'Summer (5 weeks)'));
-        $form->setLabel('meal_plan', 'Meal plan: ');
-        $form->addCssClass('meal_plan', 'form-control');
-
-        // If the username was passed in, and that student has a meal plan
-        // pre-select the student's chosen meal plan
         if (isset($this->application)) {
-            $form->setMatch('meal_plan', $this->application->getMealPlan());
+            $meal_plan = array('meal_plan' => $this->application->getMealPlan());
         } else {
             // Otherwise, select 'standard' meal plan
-            $form->setMatch('meal_plan', BANNER_MEAL_STD);
+            $meal_plan = array('meal_plan' => BANNER_MEAL_STD);
         }
 
-        // "Assignment Type", see defines.php for declarations
-        $form->addDropBox('assignment_type', array(
-                -1                           => 'Choose assignment type...',
-                ASSIGN_ADMIN                 => 'Administrative',
-                ASSIGN_APPEALS               => 'Appeals',
-                ASSIGN_LOTTERY	             => 'Lottery',
-                ASSIGN_FR   	             => 'Freshmen',
-                ASSIGN_TRANSFER              => 'Transfer',
-                ASSIGN_APH                   => 'APH',
-                ASSIGN_RLC_FRESHMEN          => 'RLC Freshmen',
-                ASSIGN_RLC_TRANSFER          => 'RLC Transfer',
-                ASSIGN_RLC_CONTINUING        => 'RLC Continuing',
-                ASSIGN_HONORS_FRESHMEN       => 'Honors Freshmen',
-                ASSIGN_HONORS_CONTINUING     => 'Honors Continuing',
-                ASSIGN_LLC_FRESHMEN          => 'LLC Freshmen',
-                ASSIGN_LLC_CONTINUING        => 'LLC Continuing',
-                ASSIGN_INTL                  => 'International',
-                ASSIGN_RA                    => 'RA',
-                ASSIGN_RA_ROOMMATE           => 'RA Roommate',
-                ASSIGN_MEDICAL_FRESHMEN      => 'Medical Freshmen',
-                ASSIGN_MEDICAL_CONTINUING    => 'Medical Continuing',
-                //ASSIGN_MEDICAL               => 'Medical',
-                ASSIGN_SPECIAL_FRESHMEN      => 'Special Needs Freshmen',
-                ASSIGN_SEPCIAL_CONTINUING    => 'Special Needs Continuing',
-                //ASSIGN_SPECIAL               => 'Special Needs',
-                ASSIGN_RHA                   => 'RHA/NRHH',
-                ASSIGN_SCHOLARS              => 'Diversity & Plemmons Scholars'
-                        ));
-
-        $form->setMatch('assignment_type', -1);
-        $form->setLabel('assignment_type', 'Assignment Type: ');
-        $form->addCssClass('assignment_type', 'form-control');
-
-        if ($pre_populate) {
-            $form->addHidden('use_bed', 'true');
-        } else {
-            $form->addHidden('use_bed', 'false');
-        }
+        $tpl['PREPOPULATE'] = json_encode($prepop);
+        $tpl['MEAL_PLAN'] = json_encode($meal_plan);
 
         $form->addTextarea('note');
         $form->setLabel('note', 'Note: ');
diff --git a/class/ResidenceHallMenu.php b/class/ResidenceHallMenu.php
index fccf2af1..3cecb7b0 100644
--- a/class/ResidenceHallMenu.php
+++ b/class/ResidenceHallMenu.php
@@ -17,24 +17,6 @@ public function __construct()
                 $residenceHallCmd->setOnSelectCmd(CommandFactory::getCommand('EditResidenceHallView'));
                 $this->addCommand('Edit a residence hall', $residenceHallCmd);
             }
-            if(Current_User::allow('hms', 'floor_view')){
-                $floorCmd = CommandFactory::getCommand('SelectFloor');
-                $floorCmd->setTitle('Edit a Floor');
-                $floorCmd->setOnSelectCmd(CommandFactory::getCommand('EditFloorView'));
-                $this->addCommand('Edit a floor', $floorCmd);
-            }
-            if(Current_User::allow('hms', 'room_view')){
-                $roomCmd = CommandFactory::getCommand('SelectRoom');
-                $roomCmd->setTitle('Edit a Room');
-                $roomCmd->setOnSelectCmd(CommandFactory::getCommand('EditRoomView'));
-                $this->addCommand('Edit a room', $roomCmd);
-            }
-            if(Current_User::allow('hms', 'bed_view')){
-                $bedCmd = CommandFactory::getCommand('SelectBed');
-                $bedCmd->setTitle('Edit a Bed');
-                $bedCmd->setOnSelectCmd(CommandFactory::getCommand('EditBedView'));
-                $this->addCommand('Edit a bed', $bedCmd);
-            }
         }
     }
 
diff --git a/class/SelectHallView.php b/class/SelectHallView.php
index 777a62e3..7c70e649 100644
--- a/class/SelectHallView.php
+++ b/class/SelectHallView.php
@@ -23,6 +23,9 @@ public function show()
     {
         $tpl = array();
 
+        javascript('jquery');
+        javascriptMod('hms', 'hall_editor');
+
         $tpl['TITLE']   = $this->title;
         $tpl['TERM']    = Term::getPrintableSelectedTerm();
 
diff --git a/class/command/AjaxGetBedsCommand.php b/class/command/AjaxGetBedsCommand.php
index 39cd9850..59f083a3 100644
--- a/class/command/AjaxGetBedsCommand.php
+++ b/class/command/AjaxGetBedsCommand.php
@@ -7,7 +7,7 @@ class AjaxGetBedsCommand extends Command {
     private $roomId;
 
     public function getRequestVars(){
-        return array('action'=>'AjaxGetFloors');
+        return array('action'=>'AjaxGetBeds');
     }
 
     public function execute(CommandContext $context)
@@ -19,20 +19,18 @@ public function execute(CommandContext $context)
 
         $room = new HMS_Room($context->get('roomId'));
 
-        $beds = $room->get_beds();
+        $bedsResult = $room->get_beds();
 
-        $json_beds = array();
-        $json_beds[0] = 'Select...';
+        $beds = array();
+        $i = 0;
 
-        foreach ($beds as $bed){
-            if($bed->room_change_reserved != 0){
-                //Cannot assign to reserved rooms
-                continue;
-            }
-            $json_beds[$bed->id] = $bed->bed_letter;
+        foreach ($bedsResult as $bed)
+        {
+            $beds[$i]['bed_letter'] = strtoupper($bed->getBedroomLabel()) . $bed->getLetter();
+            $beds[$i]['bed_id'] = $bed->getId();
+            $i++;
         }
 
-        $context->setContent(json_encode($json_beds));
+        $context->setContent(json_encode($beds));
     }
 }
-
diff --git a/class/command/AjaxGetFloorsCommand.php b/class/command/AjaxGetFloorsCommand.php
index 48d1cd9f..2d2af3c1 100644
--- a/class/command/AjaxGetFloorsCommand.php
+++ b/class/command/AjaxGetFloorsCommand.php
@@ -19,26 +19,21 @@ public function execute(CommandContext $context)
 
         $hall = new HMS_Residence_Hall($context->get('hallId'));
 
-        $floors = $hall->get_floors();
-
-        #test($floors, 1);
-         
-        $json_floors = array();
-        $json_floors[0] = 'Select...';
-
-        foreach ($floors as $floor){
-            unset($text);
-
-            $text = $floor->floor_number;
-
-            if($hall->gender_type == COED && $floor->gender_type != COED){
-                $text .= (' (' . HMS_Util::formatGender($floor->gender_type) . ')');
-            }
-
-            $json_floors[$floor->id] = $text;
+        $floorsResult = $hall->getFloors();
+
+        $floors = array();
+        $i = 0;
+
+        foreach ($floorsResult as $floor)
+        {
+          if(!empty($floor->get_rooms()))
+          {
+            $floors[$i]['floor_number'] = $floor->getFloorNumber();
+            $floors[$i]['floor_id'] = $floor->getId();
+            $i++;
+          }
         }
 
-        $context->setContent(json_encode($json_floors));
+        $context->setContent(json_encode($floors));
     }
 }
-
diff --git a/class/command/AjaxGetHallsCommand.php b/class/command/AjaxGetHallsCommand.php
new file mode 100644
index 00000000..a9b5c402
--- /dev/null
+++ b/class/command/AjaxGetHallsCommand.php
@@ -0,0 +1,34 @@
+<?php
+
+PHPWS_Core::initModClass('hms', 'Command.php');
+
+class AjaxGetHallsCommand extends Command {
+
+    private $floorId;
+
+    public function getRequestVars(){
+        return array('action'=>'AjaxGetHalls');
+    }
+
+    public function execute(CommandContext $context)
+    {
+        PHPWS_Core::initModClass('hms', 'HMS_Floor.php');
+
+        $term = Term::getSelectedTerm();
+
+        $hallsResults = ResidenceHallFactory::getHallsForTerm($term);
+
+        $halls = array();
+
+        $i = 0;
+
+        foreach ($hallsResults as $hall)
+        {
+          $halls[$i]['hall_name'] = $hall->getHallName();
+          $halls[$i]['hall_id'] = $hall->getId();
+          $i++;
+        }
+
+        $context->setContent(json_encode($halls));
+    }
+}
diff --git a/class/command/AjaxGetRoomsCommand.php b/class/command/AjaxGetRoomsCommand.php
index 79604d4a..9078447f 100644
--- a/class/command/AjaxGetRoomsCommand.php
+++ b/class/command/AjaxGetRoomsCommand.php
@@ -7,7 +7,7 @@ class AjaxGetRoomsCommand extends Command {
     private $floorId;
 
     public function getRequestVars(){
-        return array('action'=>'AjaxGetFloors');
+        return array('action'=>'AjaxGetRooms');
     }
 
     public function execute(CommandContext $context)
@@ -19,16 +19,68 @@ public function execute(CommandContext $context)
 
         $floor = new HMS_Floor($context->get('floorId'));
 
-        $rooms = $floor->get_rooms();
+        $roomsResult = $floor->get_rooms();
 
-        $json_rooms = array();
-        $json_rooms[0] = 'Select...';
+        $rooms = array();
+        $i = 0;
 
-        foreach ($rooms as $room){
-            $json_rooms[$room->id] = $room->room_number;
+        foreach ($roomsResult as $room)
+        {
+          $text = $room->getRoomNumber();
+
+          if($floor->gender_type == COED){
+              $text .= (' (' . HMS_Util::formatGender($room->gender_type) . ')');
+          }
+
+          if($room->ra == 1){
+              $text .= (' (RA)');
+          }
+
+          if($room->reserved == 1)
+          {
+              $text .= (' (Reserved)');
+          }
+
+          if($room->offline == 1)
+          {
+              $text .= (' (Offline)');
+          }
+
+          if($room->private == 1)
+          {
+              $text .= (' (Private)');
+          }
+
+          if($room->overflow == 1)
+          {
+              $text .= (' (Overflow)');
+          }
+
+          if($room->parlor == 1)
+          {
+              $text .= (' (Parlor)');
+          }
+
+          if($room->ada == 1)
+          {
+              $text .= (' (ADA)');
+          }
+
+          if($room->hearing_impaired == 1)
+          {
+              $text .= (' (Hearing Impaired)');
+          }
+
+          if($room->bath_en_suite)
+          {
+              $text .= (' (Bath En Suite)');
+          }
+
+          $rooms[$i]['room_number'] = $text;
+          $rooms[$i]['room_id'] = $room->getId();
+          $i++;
         }
 
-        $context->setContent(json_encode($json_rooms));
+        $context->setContent(json_encode($rooms));
     }
 }
-
diff --git a/class/command/AssignStudentCommand.php b/class/command/AssignStudentCommand.php
index 4026546c..3793a2d0 100644
--- a/class/command/AssignStudentCommand.php
+++ b/class/command/AssignStudentCommand.php
@@ -82,6 +82,8 @@ public function getRequestVars()
 
     public function execute(CommandContext $context)
     {
+
+
         if(!UserStatus::isAdmin() || !Current_User::allow('hms', 'assignment_maintenance')){
             PHPWS_Core::initModClass('hms', 'exception/PermissionException.php');
             throw new PermissionException('You do not have permission to assign students.');
@@ -98,10 +100,12 @@ public function execute(CommandContext $context)
         // NB: Username must be all lowercase
         $username = strtolower(trim($context->get('username')));
         $term = Term::getSelectedTerm();
+        $bed = $context->get('bed');
 
         // Setup command to redirect to in case of error
         $errorCmd = CommandFactory::getCommand('ShowAssignStudent');
         $errorCmd->setUsername($username);
+        $errorCmd->setBedId($bed);
 
         /***
          * Input Sanity Checking
@@ -215,7 +219,7 @@ public function execute(CommandContext $context)
         }
 
         // Actually try to make the assignment, decide whether to use the room id or the bed id
-        $bed = $context->get('bed');
+
         try {
             if(isset($bed) && $bed != 0){
                 HMS_Assignment::assignStudent($student, $term, NULL, $bed, $context->get('meal_plan'), $context->get('note'), false, $context->get('assignment_type'));
diff --git a/javascript/hall_editor/HallEditor.jsx b/javascript/hall_editor/HallEditor.jsx
new file mode 100644
index 00000000..5fed5bcb
--- /dev/null
+++ b/javascript/hall_editor/HallEditor.jsx
@@ -0,0 +1,353 @@
+//The top level component class that holds the state and handles the server requests.
+var HallEditorBox = React.createClass({
+  //Sets the initial state of the class
+  getInitialState: function() {
+    return {halls: [], floors: [], rooms: [], beds: [], hallId: 0, floorId: 0, roomId: 0, bedId: 0};
+  },
+  //Resets the states of all the lower level dropdowns and then gets the floors for the hall chosen
+  chooseHall: function(hallIdToGet)
+  {
+    this.setState({hallId: hallIdToGet, floors: [], floorId: 0, rooms: [], roomId: 0, beds: [], bedId: 0});
+    this.getFloors(hallIdToGet);
+  },
+  //Resets the states for the room and bed, so that the relevant components are updated, and then gets the rooms for the floor chosen
+  chooseFloor: function(floorIdToGet)
+  {
+    this.setState({floorId: floorIdToGet, rooms: [], roomId: 0, beds: [], bedId: 0});
+    this.getRooms(floorIdToGet);
+  },
+  //Resets the bed's state, so it can be passed ot the relevant components, and then gets the beds for the room chosen
+  chooseRoom: function(roomIdToGet)
+  {
+    this.setState({roomId: roomIdToGet, beds: [], bedId: 0});
+    this.getBeds(roomIdToGet);
+  },
+  //Sets the state of the bedId which is passed to the relevant components
+  chooseBed: function(bedIdToSet)
+  {
+    this.setState({bedId: bedIdToSet});
+  },
+  //Grabs the appropriate data on initial mount
+  componentWillMount: function()
+  {
+    this.getHalls();
+  },
+  //Takes care of the ajax request for getting all the active halls
+  getHalls: function()
+  {
+    $.ajax({
+      url: 'index.php?module=hms&action=AjaxGetHalls',
+      type: 'GET',
+      dataType: 'json',
+      success: function(data)
+      {
+        this.setState({halls: data});
+      }.bind(this),
+      error: function(xhr, status, err)
+      {
+        alert(err.toString())
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  //Takes care of the ajax request for getting all the halls with rooms on them
+  getFloors: function(hallId)
+  {
+    $.ajax({
+      url: 'index.php?module=hms&action=AjaxGetFloors&hallId='+hallId,
+      type: 'GET',
+      dataType: 'json',
+      success: function(data)
+      {
+        this.setState({floors: data});
+      }.bind(this),
+      error: function(xhr, status, err)
+      {
+        alert(err.toString())
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  //Takes care of the ajax request for getting all the rooms on a floor
+  getRooms: function(floorId)
+  {
+    $.ajax({
+      url: 'index.php?module=hms&action=AjaxGetRooms&floorId='+floorId,
+      type: 'GET',
+      dataType: 'json',
+      success: function(data)
+      {
+        this.setState({rooms: data});
+      }.bind(this),
+      error: function(xhr, status, err)
+      {
+        alert(err.toString())
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  //Takes care of the ajax request for retrieving the beds in a room+
+  getBeds: function(roomId)
+  {
+    $.ajax({
+      url: 'index.php?module=hms&action=AjaxGetBeds&roomId='+roomId,
+      type: 'GET',
+      dataType: 'json',
+      success: function(data)
+      {
+        this.setState({beds: data});
+      }.bind(this),
+      error: function(xhr, status, err)
+      {
+        alert(err.toString())
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  //Renders all the components and passes the appropriate state values to them
+  render: function()
+  {
+    return (
+      <div className="form-group col-md-6">
+        <HallBox halls={this.state.halls} hallId={this.state.hallId} floorId={this.state.floorId} changed={this.chooseHall}/>
+        <FloorBox floors={this.state.floors} floorId={this.state.floorId} roomId={this.state.roomId} changed={this.chooseFloor}/>
+        <RoomBox rooms={this.state.rooms} roomId={this.state.roomId} bedId={this.state.bedId} changed={this.chooseRoom}/>
+        <BedBox beds={this.state.beds} bedId={this.state.bedId} changed={this.chooseBed}/>
+      </div>
+    );
+  }
+});
+
+
+//The react class responsible for taking care of the creation of the dropdown and button
+//for the Halls
+var HallBox = React.createClass({
+  change: function() {
+    var hallId = parseInt(this.refs.hallChoices.getDOMNode().value);
+    this.props.changed(hallId);
+  },
+  render: function() {
+    var options = Array({hall_id:0, hall_name: "Select..."});
+    var data = this.props.halls;
+    for(i = 0; i < data.length; i++)
+    {
+      options.push(data[i]);
+    }
+    var selectOptions = options.map(function(node){
+        return (<option value={node.hall_id}>{node.hall_name}</option>);
+    });
+    return (
+      <div className="form-group">
+        <label>Residence Hall</label>
+        <div className="row">
+          <div className="col-md-8">
+            <select onChange={this.change} className="form-control" ref="hallChoices">
+              {selectOptions}
+            </select>
+          </div>
+          <HallButton id={this.props.hallId} floorId={this.props.floorId} go={this.go}/>
+        </div>
+      </div>
+    );
+  }
+});
+
+
+//The react class responsible for taking care of the logic for creating the button
+var HallButton = React.createClass({
+  render: function(){
+    if(this.props.id != 0 && !this.props.floorId)
+    {
+      var link = 'index.php?module=hms&action=EditResidenceHallView&hallId='+this.props.id;
+      return(<div>
+        <a href={link} className="btn btn-md btn-success">Edit Hall</a>
+      </div>);
+    }
+    else {
+      return(<div></div>);
+    }
+  }
+});
+
+
+//The react class responsible for taking care of the creation of the dropdown and button
+//for the Floors
+var FloorBox = React.createClass({
+  change: function() {
+    var floorId = this.refs.floorChoices.getDOMNode().value;
+    this.props.changed(floorId);
+  },
+  render: function() {
+    if(this.props.floors[0] == undefined)
+    {
+      return (<div></div>);
+    }
+    else
+    {
+      var options = Array({floor_id:0, floor_number: "Select..."});
+      var data = this.props.floors;
+      for(i = 0; i < data.length; i++)
+      {
+        options.push(data[i]);
+      }
+      var selectOptions = options.map(function(node){
+          return (<option value={node.floor_id}>{node.floor_number}</option>);
+      });
+      return (
+        <div className="form-group">
+          <label>Floor</label>
+          <div className="row">
+            <div className="col-md-8">
+              <select onChange={this.change} className="form-control" ref="floorChoices">
+                {selectOptions}
+              </select>
+            </div>
+            <FloorButton id={this.props.floorId} roomId={this.props.roomId}/>
+          </div>
+        </div>
+      );
+    }
+  }
+});
+
+
+//The react class responsible for taking care of the logic for creating the button
+var FloorButton = React.createClass({
+  render: function(){
+    if(this.props.id != 0 && !this.props.roomId)
+    {
+      var link = 'index.php?module=hms&action=EditFloorView&floor='+this.props.id;
+      return(<div>
+        <a href={link} className="btn btn-md btn-success">Edit Floor</a>
+      </div>);
+    }
+    else {
+      return(<div></div>);
+    }
+  }
+});
+
+
+//The react class responsible for taking care of the creation of the dropdown and button
+//for the Rooms
+var RoomBox = React.createClass({
+  change: function() {
+    var roomId = this.refs.roomChoices.getDOMNode().value;
+    this.props.changed(roomId);
+  },
+  render: function() {
+    if(this.props.rooms[0] == undefined)
+    {
+      return (<div></div>);
+    }
+    else
+    {
+      var options = Array({room_id:0, room_number: "Select..."});
+      var data = this.props.rooms;
+      for(i = 0; i < data.length; i++)
+      {
+        options.push(data[i]);
+      }
+      var selectOptions = options.map(function(node){
+            return (<option value={node.room_id}>{node.room_number}</option>);
+      });
+      return (
+        <div className="form-group">
+          <label>Room</label>
+          <div className="row">
+            <div className="col-md-8">
+              <select onChange={this.change} className="form-control" ref="roomChoices">
+                {selectOptions}
+              </select>
+            </div>
+            <RoomButton id={this.props.roomId} bedId={this.props.bedId}/>
+          </div>
+        </div>
+      );
+    }
+  }
+});
+
+
+//The react class responsible for taking care of the logic for creating the button
+var RoomButton = React.createClass({
+  render: function(){
+    if(this.props.id != 0 && !this.props.bedId)
+    {
+      var link = 'index.php?module=hms&action=EditRoomView&room='+this.props.id;
+      return(<div>
+        <a href={link} className="btn btn-md btn-success">Edit Room</a>
+      </div>);
+    }
+    else {
+      return(<div></div>);
+    }
+  }
+});
+
+
+
+//The react class responsible for taking care of the creation of the dropdown and button
+//for the Beds
+var BedBox = React.createClass({
+  change: function() {
+    var bedId = this.refs.bedChoices.getDOMNode().value;
+    this.props.changed(bedId);
+  },
+  render: function() {
+    if(this.props.beds[0] == undefined)
+    {
+      return (<div></div>);
+    }
+    else
+    {
+      var options = Array({bed_id:0, bed_letter: "Select..."});
+      var data = this.props.beds;
+      for(i = 0; i < data.length; i++)
+      {
+        options.push(data[i]);
+      }
+      var selectOptions = options.map(function(node){
+          return (<option value={node.bed_id}>{node.bed_letter}</option>);
+      });
+      return (
+        <div className="form-group">
+          <label>Bed</label>
+          <div className="row">
+            <div className="col-md-8">
+              <select onChange={this.change} className="form-control" ref="bedChoices">
+                {selectOptions}
+              </select>
+            </div>
+            <BedButton id={this.props.bedId}/>
+          </div>
+        </div>
+      );
+    }
+  }
+});
+
+
+//The react class responsible for taking care of the logic for creating the button
+var BedButton = React.createClass({
+  render: function(){
+
+    if(this.props.id != 0)
+    {
+      var link = 'index.php?module=hms&action=EditBedView&bed='+this.props.id;
+      return(<div>
+        <a href={link} className="btn btn-md btn-success">Edit Bed</a>
+      </div>);
+    }
+    else {
+      return(<div></div>);
+    }
+  }
+});
+
+
+//Inserts all the react components within the giving element.
+React.render(
+  <HallEditorBox/>,
+  document.getElementById('HallPicker')
+);
diff --git a/javascript/hall_editor/head.js b/javascript/hall_editor/head.js
new file mode 100644
index 00000000..c75cd249
--- /dev/null
+++ b/javascript/hall_editor/head.js
@@ -0,0 +1,3 @@
+<script src="https://fb.me/react-0.13.1.js"></script>
+<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
+<script type="text/jsx" src="mod/hms/javascript/hall_editor/HallEditor.jsx"></script>
diff --git a/javascript/student_assign/AssignStudent.jsx b/javascript/student_assign/AssignStudent.jsx
new file mode 100644
index 00000000..c370fe67
--- /dev/null
+++ b/javascript/student_assign/AssignStudent.jsx
@@ -0,0 +1,391 @@
+//The top level component class that holds the state and handles the server requests.
+var HallEditorBox = React.createClass({
+  //Sets the initial state of the class
+  getInitialState: function() {
+    return {halls: [], floors: [], rooms: [], beds: [], hallId: 0, floorId: 0, roomId: 0, bedId: 0, meal_plan: "1"};
+  },
+  //Resets the states of all the lower level dropdowns and then gets the floors for the hall chosen
+  chooseHall: function(hallIdToGet)
+  {
+    this.setState({hallId: hallIdToGet, floors: [], floorId: 0, rooms: [], roomId: 0, beds: [], bedId: 0});
+    this.getFloors(hallIdToGet);
+  },
+  //Resets the states for the room and bed, so that the relevant components are updated, and then gets the rooms for the floor chosen
+  chooseFloor: function(floorIdToGet)
+  {
+    this.setState({floorId: floorIdToGet, rooms: [], roomId: 0, beds: [], bedId: 0});
+    this.getRooms(floorIdToGet);
+  },
+  //Resets the bed's state, so it can be passed ot the relevant components, and then gets the beds for the room chosen
+  chooseRoom: function(roomIdToGet)
+  {
+    this.setState({roomId: roomIdToGet, beds: [], bedId: 0});
+    this.getBeds(roomIdToGet);
+  },
+  //Sets the state of the bedId which is passed to the relevant components
+  chooseBed: function(bedIdToSet)
+  {
+    this.setState({bedId: bedIdToSet});
+  },
+  // //Grabs the appropriate data on initial mount
+  componentWillMount: function()
+  {
+    this.getHalls();
+    this.setState({meal_plan: mealPlan.meal_plan});
+    if(prepopulate.bed_id)
+    {
+      this.getFloors(prepopulate.hall_id);
+      this.getRooms(prepopulate.floor_id);
+      this.getBeds(prepopulate.room_id);
+      this.setState({hallId: prepopulate.hall_id});
+      this.setState({floorId: prepopulate.floor_id});
+      this.setState({roomId: prepopulate.room_id});
+      this.setState({bedId: prepopulate.bed_id});
+    }
+  },
+  // //Takes care of the ajax request for getting all the active halls
+  getHalls: function()
+  {
+    $.ajax({
+      url: 'index.php?module=hms&action=AjaxGetHalls',
+      type: 'GET',
+      dataType: 'json',
+      success: function(data)
+      {
+        this.setState({halls: data});
+      }.bind(this),
+      error: function(xhr, status, err)
+      {
+        alert(err.toString())
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  //Takes care of the ajax request for getting all the halls with rooms on them
+  getFloors: function(hallId)
+  {
+    $.ajax({
+      url: 'index.php?module=hms&action=AjaxGetFloors&hallId='+hallId,
+      type: 'GET',
+      dataType: 'json',
+      success: function(data)
+      {
+        this.setState({floors: data});
+      }.bind(this),
+      error: function(xhr, status, err)
+      {
+        alert(err.toString())
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  //Takes care of the ajax request for getting all the rooms on a floor
+  getRooms: function(floorId)
+  {
+    $.ajax({
+      url: 'index.php?module=hms&action=AjaxGetRooms&floorId='+floorId,
+      type: 'GET',
+      dataType: 'json',
+      success: function(data)
+      {
+        this.setState({rooms: data});
+      }.bind(this),
+      error: function(xhr, status, err)
+      {
+        alert(err.toString())
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  //Takes care of the ajax request for retrieving the beds in a room+
+  getBeds: function(roomId)
+  {
+    $.ajax({
+      url: 'index.php?module=hms&action=AjaxGetBeds&roomId='+roomId,
+      type: 'GET',
+      dataType: 'json',
+      success: function(data)
+      {
+        this.setState({beds: data});
+      }.bind(this),
+      error: function(xhr, status, err)
+      {
+        alert(err.toString())
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  //Renders all the components and passes the appropriate state values to them
+  render: function()
+  {
+    return (
+
+      <div>
+        <HallBox halls={this.state.halls} hallId={this.state.hallId} changed={this.chooseHall}/>
+        <FloorBox floors={this.state.floors} floorId={this.state.floorId} changed={this.chooseFloor}/>
+        <RoomBox rooms={this.state.rooms} roomId={this.state.roomId} changed={this.chooseRoom}/>
+        <BedBox beds={this.state.beds} bedId={this.state.bedId} changed={this.chooseBed}/>
+        <MealPlanBox mealPlan={this.state.meal_plan}/>
+        <AssignTypeBox/>
+      </div>
+
+    );
+  }
+});
+
+//The react class responsible for taking care of the creation of the dropdown
+//for the Halls
+var HallBox = React.createClass({
+  change: function() {
+    var hallId = parseInt(this.refs.hallChoices.getDOMNode().value);
+    this.props.changed(hallId);
+  },
+  render: function() {
+    var options = Array({hall_id:0, hall_name: "Select..."});
+    var data = this.props.halls;
+    var preSelectId = this.props.hallId;
+    for(i = 0; i < data.length; i++)
+    {
+      options.push(data[i]);
+    }
+    var selectOptions = options.map(function(node){
+      if(node.hall_id == preSelectId)
+      {
+        return (<option selected="selected" value={node.hall_id}>{node.hall_name}</option>)
+      }
+      else
+      {
+        return (<option value={node.hall_id}>{node.hall_name}</option>);
+      }
+    });
+    return (
+      <div className="form-group">
+        <label id="phpws_form_residence_hall-label" class="select-label" for="phpws_form_residence_hall">
+          Residence Hall
+        </label>
+        <select id="phpws_form_residence_hall" onChange={this.change} className="form-control" name="residence_hall" ref="hallChoices">
+          {selectOptions}
+        </select>
+      </div>
+    );
+  }
+});
+
+//The react class responsible for taking care of the creation of the dropdown
+//for the Floors
+var FloorBox = React.createClass({
+  change: function() {
+    var floorId = this.refs.floorChoices.getDOMNode().value;
+    this.props.changed(floorId);
+  },
+  render: function() {
+    if(this.props.floors[0] == undefined)
+    {
+      return (<div></div>);
+    }
+    else
+    {
+      var options = Array({floor_id:0, floor_number: "Select..."});
+      var data = this.props.floors;
+      var preSelectId = this.props.floorId;
+      for(i = 0; i < data.length; i++)
+      {
+        options.push(data[i]);
+      }
+      var selectOptions = options.map(function(node){
+          if(node.floor_id == preSelectId)
+          {
+            return (<option selected="selected" value={node.floor_id}>{node.floor_number}</option>);
+          }
+          else
+          {
+            return (<option value={node.floor_id}>{node.floor_number}</option>);
+          }
+      });
+      return (
+        <div className="form-group">
+          <label id="phpws_form_floor-label" class="select-label" for="form_form_floor">
+            Floor
+          </label>
+          <select id="phpws_form_floor" onChange={this.change} className="form-control" name="floor" ref="floorChoices">
+            {selectOptions}
+          </select>
+        </div>
+      );
+    }
+  }
+});
+
+//The react class responsible for taking care of the creation of the dropdown
+//for the Rooms
+var RoomBox = React.createClass({
+  change: function() {
+    var roomId = this.refs.roomChoices.getDOMNode().value;
+    this.props.changed(roomId);
+  },
+  render: function() {
+    if(this.props.rooms[0] == undefined)
+    {
+      return (<div></div>);
+    }
+    else
+    {
+      var options = Array({room_id:0, room_number: "Select..."});
+      var data = this.props.rooms;
+      var preSelectId = this.props.roomId;
+      for(i = 0; i < data.length; i++)
+      {
+        options.push(data[i]);
+      }
+      var selectOptions = options.map(function(node){
+        if(node.room_id == preSelectId)
+        {
+          return (<option selected="selected"value={node.room_id}>{node.room_number}</option>);
+        }
+        else
+        {
+          return (<option value={node.room_id}>{node.room_number}</option>);
+        }
+
+      });
+      return (
+        <div className="form-group">
+          <label id="phpws_form_room-label" class="select-label" for="phpws_form_room">
+            Room
+          </label>
+          <select id="phpws_form_room" onChange={this.change} className="form-control" name="room" ref="roomChoices">
+            {selectOptions}
+          </select>
+        </div>
+      );
+    }
+  }
+});
+
+//The react class responsible for taking care of the creation of the dropdown
+//for the Beds
+var BedBox = React.createClass({
+  change: function() {
+    var bedId = this.refs.bedChoices.getDOMNode().value;
+    this.props.changed(bedId);
+  },
+  render: function() {
+    if(this.props.beds[0] == undefined)
+    {
+      return (<div></div>);
+    }
+    else
+    {
+      var options = Array({bed_id:0, bed_letter: "Select..."});
+      var data = this.props.beds;
+      var preSelectId = this.props.bedId;
+      for(i = 0; i < data.length; i++)
+      {
+        options.push(data[i]);
+      }
+      var selectOptions = options.map(function(node){
+        if(node.bed_id == preSelectId)
+        {
+          return (<option selected="selected" value={node.bed_id}>{node.bed_letter}</option>);
+        }
+        else
+        {
+          return (<option value={node.bed_id}>{node.bed_letter}</option>);
+        }
+
+      });
+      return (
+        <div className="form-group">
+          <label id="phpws_form_bed-label" class="select-label" for="phpws_form_bed">
+            Bed
+          </label>
+          <select id="phpws_form_bed" onChange={this.change} className="form-control" name="bed" ref="bedChoices">
+            {selectOptions}
+          </select>
+        </div>
+      );
+    }
+  }
+});
+
+
+//The react class responsible for taking care of the creation of the dropdown
+//for the meal plan
+var MealPlanBox = React.createClass({
+  render: function() {
+    var options = Array({plan_id:"2", plan_option: "Low"}, {plan_id: "1", plan_option: "Standard"},
+                        {plan_id: "0", plan_option: "High"}, {plan_id: "8", plan_option: "Super"},
+                        {plan_id: "-1", plan_option: "None"}, {plan_id: "S5", plan_option: "Summer (5 weeks)"});
+    var preSelectId = this.props.mealPlan;
+    console.log(this.props.mealPlan)
+    var selectOptions = options.map(function(node){
+      if(node.plan_id == preSelectId)
+      {
+        return (<option selected="selected" value={node.plan_id}>{node.plan_option}</option>);
+      }
+      else
+      {
+        return (<option value={node.plan_id}>{node.plan_option}</option>);
+      }
+    });
+    return (
+      <div className="form-group">
+          <label id="phpws_form_meal_plan-label" class="select-label" for="phpws_form_meal_plan">
+            Meal Plan:
+          </label>
+          <select defaultValue={this.props.mealPlan} id="phpws_form_meal_plan" className="form-control" name="meal_plan" ref="mealChoices">
+            {selectOptions}
+          </select>
+      </div>
+    );
+  }
+});
+
+
+//The react class responsible for taking care of the creation of the dropdown
+//for the Assignment type
+var AssignTypeBox = React.createClass({
+  change: function() {
+    var choice = this.refs.typeChoices.getDOMNode().value;
+    this.props.changed(choice);
+  },
+  render: function() {
+    return (
+      <div className="form-group">
+        <label id="phpws_form_assignment_type-label" class="select-label" for="phpws_form_assignment_type">Assignment Type:</label>
+        <select id="phpws_form_assignment_type" onChange={this.change} className="form-control" name="assignment_type" ref="typeChoices">
+              <option selected="selected" value="-1">Choose assignment type...</option>
+              <option value="admin">Administrative</option>
+              <option value="appeals">Appeals</option>
+              <option value="lottery">Lottery</option>
+              <option value="freshmen">Freshmen</option>
+              <option value="transfer">Transfer</option>
+              <option value="aph">APH</option>
+              <option value="rlc_freshmen">RLC Freshmen</option>
+              <option value="rlc_transfer">RLC Transfer</option>
+              <option value="rlc_continuing">RLC Continuing</option>
+              <option value="honors_freshmen">Honors Freshmen</option>
+              <option value="honors_continuing">Honors Continuing</option>
+              <option value="llc_freshmen">LLC Freshmen</option>
+              <option value="llc_continuing">LLC Continuing</option>
+              <option value="international">International</option>
+              <option value="ra">RA</option>
+              <option value="ra_roommate">RA Roommate</option>
+              <option value="medical_freshmen">Medical Freshmen</option>
+              <option value="medical_continuing">Medical Continuing</option>
+              <option value="special_freshmen">Special Needs Freshmen</option>
+              <option value="special_continuing">Special Needs Continuing</option>
+              <option value="rha">RHA/NRHH</option>
+              <option value="scholars">Diversity & Plemmons Scholars</option>
+        </select>
+      </div>
+    );
+  }
+});
+
+
+//Inserts all the react components within the giving element.
+React.render(
+  <HallEditorBox/>,
+  document.getElementById('StudentAssigner')
+);
diff --git a/javascript/student_assign/head.js b/javascript/student_assign/head.js
new file mode 100644
index 00000000..77c05629
--- /dev/null
+++ b/javascript/student_assign/head.js
@@ -0,0 +1,3 @@
+<script src="https://fb.me/react-0.13.1.js"></script>
+<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
+<script type="text/jsx" src="mod/hms/javascript/student_assign/AssignStudent.jsx"></script>
diff --git a/templates/admin/assignStudent.tpl b/templates/admin/assignStudent.tpl
index 7872db45..2b6b0ec7 100644
--- a/templates/admin/assignStudent.tpl
+++ b/templates/admin/assignStudent.tpl
@@ -11,40 +11,12 @@
             <span class="input-group-addon">@appstate.edu</span>
         </div>
 
-        <div class="form-group">
-            {RESIDENCE_HALL_LABEL}
-            {RESIDENCE_HALL}
-        </div>
-
-        <div class="form-group">
-            {FLOOR_LABEL}
-            {FLOOR}
-        </div>
+        <script>
+          var prepopulate = {PREPOPULATE};
+          var mealPlan = {MEAL_PLAN};
+        </script>
 
-        <div class="form-group">
-            {ROOM_LABEL}
-            {ROOM}
-        </div>
-
-        <div class="form-group">
-            {BED_LABEL}
-            {BED}
-        </div>
-
-        <div>
-            <p class="help-block">
-                <a href="javascript:showBedDrop();">Show bed</a>
-            </p>
-        </div>
-
-        <div class="form-group">
-            {MEAL_PLAN_LABEL}
-            {MEAL_PLAN}
-        </div>
-
-        <div class="form-group">
-            {ASSIGNMENT_TYPE_LABEL}
-            {ASSIGNMENT_TYPE}
+        <div id="StudentAssigner">
         </div>
 
         <div class="form-group">
diff --git a/templates/admin/select_residence_hall.tpl b/templates/admin/select_residence_hall.tpl
index ee29bb0a..2d519673 100644
--- a/templates/admin/select_residence_hall.tpl
+++ b/templates/admin/select_residence_hall.tpl
@@ -1,17 +1,4 @@
 <h1>{TITLE} <small>{TERM}</small></h1>
 
-<div class="row">
-    <div class="col-md-3">
-        {START_FORM}
-
-        <div class="form-group">
-            <label for="{HALLID_ID}">Residence Hall</label>
-            {HALLID}
-        </div>
-
-        <div class="form-group">
-            <button type="submit" class="btn btn-success pull-right">Choose Hall</button>
-        </div>
-        {END_FORM}
-    </div>
+<div id="HallPicker">
 </div>