Rendering templates from nested routes in Ember JS

I'm trying to render a template from a nested route using an {{outlet}} tag. I can't seem to think of what I may be doing wrong.

Router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('support', function() {
    this.route('terms');
  });
});

export default Router;

support.hbs

<div class="container mtx pbxl of-auto">
  <div class="col-s-3">
    <ul class="list pan mtn">
      <li class="db mbs f5">{{#link-to 'support' class="light-blue link"}}Terms of Service{{/link-to}}</li>
      <li class="db mbs f5 light-blue">Upcoming Features</li>
      <li class="db mbs f5 light-blue">Contact Us</li>
      <li class="db mbs f5 light-blue">Support</li>
    </ul>
  </div>
  <div class="col-s-7">
    {{outlet}}
  </div>
</div>

terms.hbs

<div class="db light-blue lh-copy">
Donec at orci vel erat lobortis mollis. Sed et velit leo. In rutrum dictum elit in venenatis. Aenean suscipit ut ex non luctus. Integer feugiat purus quis nibh egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.
</div>

These are the 3 pieces of the puzzle as far as I know. The support.hbs template is rendering fine, but the outlet is not renderings the terms.hbs template.

Any idea what I might be doing wrong?