diff --git a/js/adapt-aboutUs.js b/js/adapt-aboutUs.js
index 307e0f5..9f24081 100644
--- a/js/adapt-aboutUs.js
+++ b/js/adapt-aboutUs.js
@@ -5,47 +5,50 @@
  * Code was based on adapt-contrib-glossary and adapt-contrib-resources
  */
 
-define([
-    'core/js/adapt',
-    './adapt-aboutUsView'
-], function(Adapt, AboutUsView) {
+import Adapt from 'core/js/adapt'
+import AboutUsView from './adapt-aboutUsView'
 
-    function setupAboutUs(aboutUsModel, aboutUsItems, socialLinks) {
+class AboutUs extends Backbone.Controller {
+  initialize() {
+    this.listenTo(Adapt, 'app:dataReady', this.initAboutUs);
+  }
+  
+  setupAboutUs(model) {
+    const aboutUsModel = new Backbone.Model(model);
+    const itemsCollection = new Backbone.Collection(model.aboutUsItems);
+    const socialLinksCollection = new Backbone.Collection(model.socialLinks);
 
-        var aboutUsModel = new Backbone.Model(aboutUsModel);
-        var itemsCollection = new Backbone.Collection(aboutUsItems);
-        var socialLinksCollection = new Backbone.Collection(socialLinks);
+    const options = {
+      model: aboutUsModel,
+      collection: itemsCollection,
+      sociallinks: socialLinksCollection
+    };
 
-        var options = {
-            model: aboutUsModel,
-            collection: itemsCollection,
-            sociallinks: socialLinksCollection
-        };
+    Adapt.on('aboutUs:showAboutUs', function() {
+      Adapt.drawer.triggerCustomView(new AboutUsView(options).$el);
+    });
+  }
 
-        Adapt.on('aboutUs:showAboutUs', function() {
-            Adapt.drawer.triggerCustomView(new AboutUsView(options).$el);
-        });
-    }
+  initAboutUs() {
+    const courseAboutUs = Adapt.course.get('_aboutUs');
 
-    function initAboutUs() {
-        var courseAboutUs = Adapt.course.get('_aboutUs');
+    if (!courseAboutUs?._isEnabled) return;
 
-        if (!courseAboutUs || !courseAboutUs._isEnabled) {
-            return;
-        }
+    const { title, description, _drawerOrder = 0 } = courseAboutUs
 
-        var drawerObject = {
-            title: courseAboutUs.title,
-            description: courseAboutUs.description,
-            className: 'is-aboutus',
-            drawerOrder: courseAboutUs._drawerOrder || 0
-        };
+    const drawerObject = {
+      title,
+      description,
+      className: 'is-aboutus',
+      drawerOrder: _drawerOrder
+    };
 
-        Adapt.drawer.addItem(drawerObject, 'aboutUs:showAboutUs');
+    Adapt.drawer.addItem(drawerObject, 'aboutUs:showAboutUs');
 
-        setupAboutUs(courseAboutUs, courseAboutUs._aboutUsItems, courseAboutUs._socialLinks);
-    }
+    this.setupAboutUs(courseAboutUs);
+  }
+};
 
-    Adapt.on('app:dataReady', initAboutUs);
+const aboutUs = new AboutUs();
 
-});
+export default aboutUs
\ No newline at end of file
diff --git a/js/adapt-aboutUsItemView.js b/js/adapt-aboutUsItemView.js
deleted file mode 100644
index 38bfc59..0000000
--- a/js/adapt-aboutUsItemView.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- * adapt-aboutUs
- * License - https://github.com/adaptlearning/adapt_framework/blob/master/LICENSE
- * Maintainers - Chuck Lorenz <chuck.lorenz@clearlearning.tech>
- * Code was based on adapt-contrib-glossary and adapt-contrib-resources
- */
-
-define([
-    'core/js/adapt'
-], function(Adapt) {
-
-    var AboutUsItemView = Backbone.View.extend({
-
-        className: "aboutus__item",
-
-        attributes: {
-            role: 'listitem'
-        },
-
-        events: {
-            'click .js-aboutus-item-topic-click': 'onAboutUsItemClicked'
-        },
-
-        initialize: function() {
-            this.listenTo(Adapt, {
-                'remove drawer:closed': this.remove,
-                'aboutUs:descriptionOpen': this.descriptionOpen
-            });
-            this.setupModel();
-            this.listenTo(this.model, 'change:_isVisible', this.onAboutUsItemVisibilityChange);
-            this.render();
-        },
-
-        setupModel: function() {
-            this.model.set({
-                '_isVisible': true,
-                '_isDescriptionOpen': false
-            });
-        },
-
-        render: function() {
-            var template = Handlebars.templates['aboutUsItem'];
-            this.$el.html(template(this.model.toJSON()));
-            _.defer(_.bind(function() {
-                this.postRender();
-            }, this));
-            return this;
-        },
-
-        postRender: function() {
-            this.listenTo(Adapt, {
-                'drawer:openedItemView': this.remove,
-                'drawer:triggerCustomView': this.remove
-            });
-        },
-
-        onAboutUsItemClicked: function(event) {
-            event && event.preventDefault();
-            Adapt.trigger('aboutUs:descriptionOpen', this.model.cid);
-        },
-
-        toggleAboutUsItemDescription: function() {
-            if (this.model.get('_isDescriptionOpen')) {
-                this.hideAboutUsItemDescription();
-            } else {
-                this.showAboutUsItemDescription();
-            }
-        },
-
-        showAboutUsItemDescription: function() {
-            var $aboutUsItemTopic = this.$('.js-aboutus-item-topic-click');
-            var description = $aboutUsItemTopic.addClass('is-selected')
-                .siblings('.aboutus__item-body')
-                .slideDown(200, function() {
-                    Adapt.a11y.focusFirst(this.$el, {defer: true});
-                }.this);
-            $aboutUsItemTopic.attr('aria-expanded', true);
-            this.model.set('_isDescriptionOpen', true);
-        },
-
-        hideAboutUsItemDescription: function() {
-            this.$('.aboutus__item-body').stop(true, true)
-                .slideUp(200);
-            this.model.set('_isDescriptionOpen', false);
-
-            this.$('.js-aboutus-item-topic-click').removeClass('is-selected')
-                .attr('aria-expanded', false);
-        },
-
-        descriptionOpen: function(viewId) {
-            if (viewId === this.model.cid) {
-                this.toggleAboutUsItemDescription();
-            } else if (this.model.get('_isDescriptionOpen')) {
-                this.hideAboutUsItemDescription();
-            }
-        },
-
-        onAboutUsItemVisibilityChange: function() {
-            if (this.model.get('_isDescriptionOpen')) {
-                this.hideAboutUsItemDescription();
-            }
-            if (this.model.get('_isVisible')) {
-                this.$el.removeClass('u-display-none');
-            } else {
-                this.$el.addClass('u-display-none');
-            }
-        }
-
-    });
-
-    return AboutUsItemView;
-});
\ No newline at end of file
diff --git a/js/adapt-aboutUsSocialLinksView.js b/js/adapt-aboutUsSocialLinksView.js
deleted file mode 100644
index 70ac234..0000000
--- a/js/adapt-aboutUsSocialLinksView.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * adapt-aboutUs
- * License - https://github.com/adaptlearning/adapt_framework/blob/master/LICENSE
- * Maintainers - Chuck Lorenz <chuck.lorenz@clearlearning.tech>
- * Code was based on adapt-contrib-glossary and adapt-contrib-resources
- */
-
-define([
-    'core/js/adapt'
-], function(Adapt) {
-
-    var AboutUsSocialLinksView = Backbone.View.extend({
-
-        className: "aboutus__item",
-
-        attributes: {
-            role: 'listitem'
-        },
-
-        initialize: function() {
-            this.render();
-        },
-
-        render: function() {
-            var modelData = this.model;
-            var template = Handlebars.templates["aboutUsSocialLinks"];
-            this.$el.html(template(modelData));
-            _.defer(_.bind(function() {
-                this.postRender();
-            }, this));
-            return this;
-        },
-
-        postRender: function() {
-            this.listenTo(Adapt, 'drawer:openedItemView', this.remove);
-            this.listenTo(Adapt, 'drawer:triggerCustomView', this.remove);
-        }
-
-    });
-
-    return AboutUsSocialLinksView;
-});
diff --git a/js/adapt-aboutUsView.js b/js/adapt-aboutUsView.js
index 3be33dd..ecf8433 100644
--- a/js/adapt-aboutUsView.js
+++ b/js/adapt-aboutUsView.js
@@ -5,47 +5,30 @@
  * Code was based on adapt-contrib-glossary and adapt-contrib-resources
  */
 
-define([
-    'core/js/adapt',
-    './adapt-aboutUsItemView',
-    './adapt-aboutUsSocialLinksView'
-], function(Adapt, AboutUsItemView, SocialLinksView) {
-
-    var AboutUsView = Backbone.View.extend({
-
-        className: "aboutus",
-
-        initialize: function() {
-            this.listenTo(Adapt, 'remove drawer:closed', this.remove);
-            this.render();
-        },
-
-        render: function() {
-            var template = Handlebars.templates["aboutUs"];
-            this.$el.html(template(this.model.toJSON()));
-            this.renderAboutUsItems();
-            _.defer(_.bind(function() {
-                this.postRender();
-            }, this));
-            return this;
-        },
-
-        renderAboutUsItems: function() {
-            var $aboutUsItemContainer = this.$('.aboutus__items-container').empty();
-            _.each(this.collection.models, function(item, index) {
-                var itemView = new AboutUsItemView({model: item});
-                itemView.$el.appendTo($aboutUsItemContainer);
-            }, this);
-            new SocialLinksView({model: Adapt.course.get('_aboutUs')._socialLinks})
-                .$el.appendTo($aboutUsItemContainer);
-        },
-
-        postRender: function() {
-            this.listenTo(Adapt, 'drawer:openedItemView', this.remove);
-            this.listenTo(Adapt, 'drawer:triggerCustomView', this.remove);
-        }
-
+import Adapt from 'core/js/adapt';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { templates } from 'core/js/reactHelpers';
+
+class AboutUsView extends Backbone.View{
+  className() {
+    return 'aboutus'
+  }
+
+  initialize() {
+    this.listenTo(Adapt, 'remove drawer:closed', this.remove);
+    this.render()
+  }
+
+  render() {
+    ReactDOM.render(<templates.aboutUs {...this.model.toJSON()} />, this.el);
+
+    _.defer(() => {
+      Adapt.trigger('view:render', this);
     });
 
-    return AboutUsView;
-});
+    return this;
+    }
+  }
+
+export default AboutUsView;
\ No newline at end of file
diff --git a/less/aboutUs.less b/less/aboutUs.less
index 5074b4c..4a450b3 100644
--- a/less/aboutUs.less
+++ b/less/aboutUs.less
@@ -6,29 +6,27 @@
     padding: @item-padding;
     color: @drawer-item-inverted;
 
-        img {
-            display:inline-block;
+    img {
+      display:inline-block;
       margin-right: @item-margin;
-            vertical-align: middle;
+      vertical-align: middle;
       min-width: unset;
       max-width: unset;
     }
-        }
+  }
 
   &__headline {
-            display:inline-block;
-                    width:87%;
+    display:inline-block;
+    width:87%;
 
     &-inner {
       font-size: 1.4rem;
       font-weight: inherit;
       line-height: 1.4;
         }
-
     }
 
   &__items-container {
-        display:block;
-    }
-
+    display:block;
+  }
 }
diff --git a/less/aboutUsItem.less b/less/aboutUsItem.less
index f8521ae..5ee59f2 100644
--- a/less/aboutUsItem.less
+++ b/less/aboutUsItem.less
@@ -1,10 +1,9 @@
 .aboutus__item {
-        display:block;
+  display:block;
 
   .aboutus__item-body {
-        display:none;
     color: @drawer-item-inverted;
-            padding:@item-padding;
+    padding:@item-padding;
     border-bottom: 1px solid @drawer-item-hover;
   }
 
@@ -15,7 +14,6 @@
     .no-touch &:hover {
       color: @drawer-link-hover;
       .transition(color @duration ease-in);
-        }
     }
-
+  }
 }
diff --git a/less/aboutUsSocialLinks.less b/less/aboutUsSocialLinks.less
index f1dd60d..453b602 100644
--- a/less/aboutUsSocialLinks.less
+++ b/less/aboutUsSocialLinks.less
@@ -1,18 +1,17 @@
 @font-face {
-  font-family: 'adapt-aboutus';
-  src: url('fonts/adapt-aboutus.eot');
-  src: url('fonts/adapt-aboutus.eot') format('embedded-opentype'),
-  url('fonts/adapt-aboutus.woff') format('woff'),
-  url('fonts/adapt-aboutus.ttf') format('truetype'),
-  url('fonts/adapt-aboutus.svg') format('svg');
+  font-family: "adapt-aboutus";
+  src: url("fonts/adapt-aboutus.eot");
+  src: url("fonts/adapt-aboutus.eot") format("embedded-opentype"),
+    url("fonts/adapt-aboutus.woff") format("woff"),
+    url("fonts/adapt-aboutus.ttf") format("truetype"),
+    url("fonts/adapt-aboutus.svg") format("svg");
   font-weight: normal;
   font-style: normal;
 }
 
-
 .aboutus__sociallinks {
   display: flex;
-      padding:@item-padding;
+  padding: @item-padding;
 
   a {
     text-decoration: none;
@@ -20,106 +19,105 @@
 
   .icon:before {
     color: @drawer-icon-inverted;
-          display: inline-block;
-          font-family: 'adapt-aboutus';
+    display: inline-block;
+    font-family: "adapt-aboutus";
     font-size: 2rem;
     margin: 0 0.75rem 0.75rem 0;
 
-          .no-touch &:hover {
+    .no-touch &:hover {
       color: @drawer-icon-inverted-hover;
-          }
-      }
-
-      .icon-qq:before {
-        content: "\e900";
-      }
+    }
+  }
 
-      .icon-tengxun-weibo:before {
-        content: "\e901";
-      }
+  .icon-qq:before {
+    content: "\e900";
+  }
 
-      .icon-wechat:before {
-        content: "\e902";
-      }
+  .icon-tengxun-weibo:before {
+    content: "\e901";
+  }
 
-      .icon-sina-weibo:before {
-        content: "\e903";
-      }
+  .icon-wechat:before {
+    content: "\e902";
+  }
 
-      .icon-youku:before {
-        content: "\e904";
-      }
+  .icon-sina-weibo:before {
+    content: "\e903";
+  }
 
-      .icon-googleplus:before {
-          content: "\ea89";
-      }
+  .icon-youku:before {
+    content: "\e904";
+  }
 
-      .icon-facebook:before {
-          content: "\ea8d";
-      }
+  .icon-googleplus:before {
+    content: "\ea89";
+  }
 
-      .icon-instagram:before {
-          content: "\ea90";
-      }
+  .icon-facebook:before {
+    content: "\ea8d";
+  }
 
-      .icon-twitter:before {
-          content: "\ea92";
-      }
+  .icon-instagram:before {
+    content: "\ea90";
+  }
 
-      .icon-feed:before {
-          content: "\ea95";
-      }
+  .icon-twitter:before {
+    content: "\ea92";
+  }
 
-      .icon-youtube:before {
-          content: "\ea99";
-      }
+  .icon-feed:before {
+    content: "\ea95";
+  }
 
-      .icon-vimeo:before {
-          content: "\ea9d";
-      }
+  .icon-youtube:before {
+    content: "\ea99";
+  }
 
-      .icon-lanyrd:before {
-          content: "\ea9f";
-      }
+  .icon-vimeo:before {
+    content: "\ea9d";
+  }
 
-      .icon-flickr:before {
-          content: "\eaa2";
-      }
+  .icon-lanyrd:before {
+    content: "\ea9f";
+  }
 
-      .icon-picasa:before {
-          content: "\eaa5";
-      }
+  .icon-flickr:before {
+    content: "\eaa2";
+  }
 
-      .icon-deviantart:before {
-          content: "\eaac";
-      }
+  .icon-picasa:before {
+    content: "\eaa5";
+  }
 
-      .icon-steam:before {
-          content: "\eaae";
-      }
+  .icon-deviantart:before {
+    content: "\eaac";
+  }
 
-      .icon-blogger:before {
-          content: "\eaba";
-      }
+  .icon-steam:before {
+    content: "\eaae";
+  }
 
-      .icon-tumblr:before {
-          content: "\eabc";
-      }
+  .icon-blogger:before {
+    content: "\eaba";
+  }
 
-      .icon-soundcloud:before {
-          content: "\eac5";
-      }
+  .icon-tumblr:before {
+    content: "\eabc";
+  }
 
-      .icon-linkedin:before {
-          content: "\eac8";
-      }
+  .icon-soundcloud:before {
+    content: "\eac5";
+  }
 
-      .icon-pinterest:before {
-          content: "\ead1";
-      }
+  .icon-linkedin:before {
+    content: "\eac8";
+  }
 
-      .icon-xing:before {
-          content: "\ead2";
-      }
+  .icon-pinterest:before {
+    content: "\ead1";
+  }
 
+  .icon-xing:before {
+    content: "\ead2";
   }
+}
diff --git a/templates/aboutUs.hbs b/templates/aboutUs.hbs
deleted file mode 100644
index 7e7e3a3..0000000
--- a/templates/aboutUs.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-{{! Maintainer - Chuck Lorenz <chucklorenz@clearlearning.tech>}}
-<div class="aboutus__inner">
-    <div class="aboutus__header-container">
-        {{#if _graphic.src}}
-            <img src="{{_graphic.src}}" alt="{{_graphic.alt}}" />
-        {{/if}}
-        <div class="aboutus__headline">
-            <div class="aboutus__headline-inner" {{#unless _graphic.src}}width="100%"{{/unless}}>{{{headline}}}</div>
-        </div>
-    </div>
-    <div class="aboutus__items-container" role="list">
-    </div>
-</div>
\ No newline at end of file
diff --git a/templates/aboutUs.jsx b/templates/aboutUs.jsx
new file mode 100644
index 0000000..d677fbc
--- /dev/null
+++ b/templates/aboutUs.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { templates } from "core/js/reactHelpers";
+
+export default function AboutUs(props) {
+  const { _graphic, headline, _aboutUsItems, _socialLinks } = props;
+
+  return (
+    <div className="aboutus__inner">
+      <templates.header {...props} />
+      <div className="aboutus__header-container">
+        {_graphic?.src && <img src={_graphic.src} alt={_graphic.alt} />}
+        <div className="aboutus__headline">
+          <div
+            className="aboutus__headline-inner"
+            style={{ width: _graphic?.src ?? "100%" }}
+          >
+            {headline}
+          </div>
+        </div>
+      </div>
+      <div className="aboutus__items-container" role="list">
+        {_aboutUsItems.map((item) => (
+          <templates.aboutUsItem {...item} />
+        ))}
+        <templates.aboutUsSocialLinks socialLinks={_socialLinks} />
+      </div>
+    </div>
+  );
+}
diff --git a/templates/aboutUsItem.hbs b/templates/aboutUsItem.hbs
deleted file mode 100644
index 9b98fb3..0000000
--- a/templates/aboutUsItem.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<button class="aboutus__item-btn drawer__item-btn{{#if className}} {{className}}{{/if}} js-aboutus-item-topic-click"
-        aria-expanded="false" aria-label="{{{title}}}">
-    <div class="aboutus__item-title drawer__item-title">
-        <div class="aboutus__item-title-inner drawer__item-title-inner">
-            {{{title}}}
-    </div>
-    </div>
-</button>
-
-<div class="aboutus__item-body drawer__item-body" role="region" aria-label="{{{title}}}">
-    <div class="aboutus__item-body-inner drawer__item-body-inner">
-        {{{compile description}}}
-    </div>
-</div>
\ No newline at end of file
diff --git a/templates/aboutUsItem.jsx b/templates/aboutUsItem.jsx
new file mode 100644
index 0000000..2a35d26
--- /dev/null
+++ b/templates/aboutUsItem.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { classes, compile, html } from 'core/js/reactHelpers';
+
+export default function AboutUsItem (props) {
+    const {
+        className,
+        title,
+        description
+    } = props
+
+    const [descriptionOpen, setDescription] = useState(false)
+
+    function onAboutUsItemClicked(event) {
+      event && event.preventDefault();
+      setDescription(!descriptionOpen)
+    }
+
+    return (
+        <div className='aboutus__item' role='listitem'>
+            <button
+              className={classes(['aboutus__item-btn', 'drawer__item-btn', 'js-aboutus-item-topic-click'], className ? className : '', descriptionOpen ? 'is-selected' : '')}
+              aria-expanded={descriptionOpen}
+              aria-label={`${title}`}
+              onClick={(e) => onAboutUsItemClicked(e)}>
+                <div className='aboutus__item-title drawer__item-title'>
+                    <div className='aboutus__item-title-inner drawer__item-title-inner'>
+                        {title}
+                    </div>
+                </div>
+            </button>
+
+            <div className={classes(['aboutus__item-body', 'drawer__item-body'], !descriptionOpen ? 'u-display-none' : '')} role='region' aria-label={title}>
+                <div className='aboutus__item-body-inner drawer__item-body-inner'>
+                    { 
+                      descriptionOpen ? html(compile(description)) : ''
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/templates/aboutUsSocialLinks.hbs b/templates/aboutUsSocialLinks.hbs
deleted file mode 100644
index 1bce4ba..0000000
--- a/templates/aboutUsSocialLinks.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="aboutus__sociallinks" role="list">
-{{#each this}}
-    {{#if _link}}
-        <a href="{{{_link}}}" class="icon icon-{{lowercase _service}}"
-        target="_blank" title="Follow us on {{{_service}}}" aria-label="Follow us on {{{_service}}}"></a>
-    {{/if}}
-{{/each}}
-</div>
diff --git a/templates/aboutUsSocialLinks.jsx b/templates/aboutUsSocialLinks.jsx
new file mode 100644
index 0000000..3dea0a2
--- /dev/null
+++ b/templates/aboutUsSocialLinks.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default function AboutUsSocialLinks (props) {
+  const {
+    socialLinks
+  } = props
+
+  return (
+    <div className='aboutus__sociallinks' role='list'>
+      {socialLinks.map((socialLink) => (
+        !socialLink._link ? '' : (
+          <a
+            href={socialLink._link}
+            className={`icon icon-${socialLink._service?.toLowerCase()}`}
+            target='_blank'
+            title={`Follow us on ${socialLink._service}`}
+            aria-label={`Follow us on ${socialLink._service}`}
+          ></a>
+        )
+      ))}
+    </div>
+  )
+}