diff --git a/src/App.js b/src/App.js
index 6e17e2d..a90f4e7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,25 +2,29 @@ import React, { Component } from 'react';
 import {
     Header,
     Container,
-    Menu,
 } from "semantic-ui-react";
 
+import TabBarContainer from "./features/tabs/TabBarContainer";
+
+
 import './App.css';
 
 class App extends Component {
     render() {
+        const tabs = [
+            {name : "unitInfo", label : "Unit Info"},
+            {name : "pilots", label : "Pilots"},
+            {name : "mechs", label : "Mechs"},
+            {name : "unitOrganization", label : "Unit Organization"}
+        ];
+
         return (
             <div className="App">
                 <div className="App-header">
                     <Header inverted as="h1">Project Mini-Mek</Header>
                 </div>
                 <Container>
-                    <Menu tabular>
-                        <Menu.Item name="unitInfo" active={true}>Unit Info</Menu.Item>
-                        <Menu.Item name="pilots" active={false}>Pilots</Menu.Item>
-                        <Menu.Item name="mechs" active={false}>Mechs</Menu.Item>
-                        <Menu.Item name="unitOrganization" active={false}>Unit Organization</Menu.Item>
-                    </Menu>
+                    <TabBarContainer tabs={tabs} size="massive" />
                 </Container>
             </div>
         );