diff --git a/src/Corporation/ui/BaseReactComponent.js b/src/Corporation/ui/BaseReactComponent.js
deleted file mode 100644
index b3da9a6fc..000000000
--- a/src/Corporation/ui/BaseReactComponent.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// Base class for React Components for Corporation UI
-// Contains a few helper functions that let derived classes easily
-// access Corporation properties
-import React from "react";
-
-const Component = React.Component;
-
-export class BaseReactComponent extends Component {
-    corp() {
-        return this.props.corp;
-    }
-
-    eventHandler() {
-        return this.props.eventHandler;
-    }
-
-    routing() {
-        return this.props.routing;
-    }
-}
diff --git a/src/Corporation/ui/Industry.jsx b/src/Corporation/ui/Industry.jsx
deleted file mode 100644
index 4b5988c1d..000000000
--- a/src/Corporation/ui/Industry.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-// React Component for managing the Corporation's Industry UI
-// This Industry component does NOT include the city tabs at the top
-import React from "react";
-import { BaseReactComponent }       from "./BaseReactComponent";
-
-import { IndustryOffice } from "./IndustryOffice";
-import { IndustryOverview } from "./IndustryOverview";
-import { IndustryWarehouse } from "./IndustryWarehouse";
-
-export class Industry extends BaseReactComponent {
-    constructor(props) {
-        if (props.currentCity == null) {
-            throw new Error(`Industry component constructed without 'city' prop`);
-        }
-
-        super(props);
-    }
-
-    render() {
-        return (
-            <div>
-            <div className={"cmpy-mgmt-industry-left-panel"}>
-                <IndustryOverview
-                    routing={this.props.routing}
-                    eventHandler={this.props.eventHandler}
-                    corp={this.props.corp}
-                    currentCity={this.props.currentCity}
-                />
-                <IndustryOffice {...this.props} />
-            </div>
-
-            <div className={"cmpy-mgmt-industry-right-panel"}>
-                <IndustryWarehouse
-                    corp={this.props.corp}
-                    routing={this.props.routing}
-                    currentCity={this.props.currentCity}
-                    eventHandler={this.props.eventHandler}
-                />
-            </div>
-            </div>
-        )
-
-    }
-}
diff --git a/src/Corporation/ui/Industry.tsx b/src/Corporation/ui/Industry.tsx
new file mode 100644
index 000000000..ef2dac622
--- /dev/null
+++ b/src/Corporation/ui/Industry.tsx
@@ -0,0 +1,40 @@
+// React Component for managing the Corporation's Industry UI
+// This Industry component does NOT include the city tabs at the top
+import React from "react";
+
+import { IndustryOffice } from "./IndustryOffice";
+import { IndustryOverview } from "./IndustryOverview";
+import { IndustryWarehouse } from "./IndustryWarehouse";
+
+interface IProps {
+    routing: any;
+    eventHandler: any;
+    corp: any;
+    currentCity: string;
+}
+
+export function Industry(props: IProps): React.ReactElement {
+    return (
+        <div>
+            <div className={"cmpy-mgmt-industry-left-panel"}>
+                <IndustryOverview
+                    routing={props.routing}
+                    eventHandler={props.eventHandler}
+                    corp={props.corp}
+                    currentCity={props.currentCity} />
+                <IndustryOffice 
+                    routing={props.routing}
+                    eventHandler={props.eventHandler}
+                    corp={props.corp}
+                    currentCity={props.currentCity} />
+            </div>
+            <div className={"cmpy-mgmt-industry-right-panel"}>
+                <IndustryWarehouse
+                    corp={props.corp}
+                    routing={props.routing}
+                    currentCity={props.currentCity}
+                    eventHandler={props.eventHandler} />
+            </div>
+        </div>
+    )
+}
diff --git a/src/Corporation/ui/MainPanel.jsx b/src/Corporation/ui/MainPanel.jsx
deleted file mode 100644
index 5ed4cad31..000000000
--- a/src/Corporation/ui/MainPanel.jsx
+++ /dev/null
@@ -1,106 +0,0 @@
-// React Component for the element that contains the actual info/data
-// for the Corporation UI. This panel lies below the header tabs and will
-// be filled with whatever is needed based on the routing/navigation
-import React from "react";
-import { BaseReactComponent } from "./BaseReactComponent";
-
-import { CityTabs } from "./CityTabs";
-import { Industry } from "./Industry";
-import { Overview } from "./Overview";
-
-import { OfficeSpace } from "../OfficeSpace";
-
-import { CityName } from "../../Locations/data/CityNames";
-
-export class MainPanel extends BaseReactComponent {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            division: "",
-            city: CityName.Sector12,
-        }
-    }
-
-    // We can pass this setter to child components
-    changeCityState(newCity) {
-        if (Object.values(CityName).includes(newCity)) {
-            this.state.city = newCity;
-        } else {
-            console.error(`Tried to change MainPanel's city state to an invalid city: ${newCity}`);
-        }
-    }
-
-    // Determines what UI content to render based on routing
-    renderContent() {
-        if (this.routing().isOnOverviewPage()) {
-            // Corporation overview Content
-            return this.renderOverviewPage();
-        } else {
-            // Division content
-
-            // First, check if we're at a new division. If so, we need to reset the city to Sector-12
-            // Otherwise, just switch the 'city' state
-            const currentDivision = this.routing().current();
-            if (currentDivision !== this.state.division) {
-                this.state.division = currentDivision;
-                this.state.city = CityName.Sector12;
-            }
-
-            return this.renderDivisionPage();
-        }
-    }
-
-    renderOverviewPage() {
-        return (
-            <div id="cmpy-mgmt-panel">
-                <Overview {...this.props} />
-            </div>
-        )
-    }
-
-    renderDivisionPage() {
-        // Note: Division is the same thing as Industry...I wasn't consistent with naming
-        const division = this.routing().currentDivision;
-        if (division == null) {
-            throw new Error(`Routing does not hold reference to the current Industry`);
-        }
-
-        // City tabs
-        const onClicks = {};
-        for (const cityName in division.offices) {
-            if (division.offices[cityName] instanceof OfficeSpace) {
-                onClicks[cityName] = () => {
-                    this.state.city = cityName;
-                    this.corp().rerender();
-                }
-            }
-        }
-
-        const cityTabs = (
-            <CityTabs
-                {...this.props}
-                corp={this.props.corp}
-                city={this.state.city}
-                onClicks={onClicks}
-                cityStateSetter={this.changeCityState.bind(this)}
-            />
-        )
-
-        // Rest of Industry UI
-        const industry = (
-            <Industry {...this.props} currentCity={this.state.city} />
-        )
-
-        return (
-            <div id="cmpy-mgmt-panel">
-                {cityTabs}
-                {industry}
-            </div>
-        )
-    }
-
-    render() {
-        return this.renderContent();
-    }
-}
diff --git a/src/Corporation/ui/MainPanel.tsx b/src/Corporation/ui/MainPanel.tsx
new file mode 100644
index 000000000..c46acf65f
--- /dev/null
+++ b/src/Corporation/ui/MainPanel.tsx
@@ -0,0 +1,93 @@
+// React Component for the element that contains the actual info/data
+// for the Corporation UI. This panel lies below the header tabs and will
+// be filled with whatever is needed based on the routing/navigation
+import React, { useState } from "react";
+
+import { CityTabs } from "./CityTabs";
+import { Industry } from "./Industry";
+import { Overview } from "./Overview";
+
+import { OfficeSpace } from "../OfficeSpace";
+
+import { CityName } from "../../Locations/data/CityNames";
+
+interface IProps {
+    corp: any;
+    eventHandler: any;
+    routing: any;
+}
+
+export function MainPanel(props: IProps): React.ReactElement {
+    const [division, setDivision] = useState("");
+    const [city, setCity] = useState<string>(CityName.Sector12);
+
+    // We can pass this setter to child components
+    function changeCityState(newCity: string): void {
+        if (Object.values(CityName).includes(newCity as CityName)) {
+            setCity(newCity);
+        } else {
+            console.error(`Tried to change MainPanel's city state to an invalid city: ${newCity}`);
+        }
+    }
+
+    function renderOverviewPage() {
+        return (
+            <div id="cmpy-mgmt-panel">
+                <Overview {...props} />
+            </div>
+        )
+    }
+
+    function renderDivisionPage() {
+        // Note: Division is the same thing as Industry...I wasn't consistent with naming
+        const division = props.routing.currentDivision;
+        if (division == null) {
+            throw new Error(`Routing does not hold reference to the current Industry`);
+        }
+
+        // City tabs
+        const onClicks: { [key: string]: () => void } = {};
+        for (const cityName in division.offices) {
+            if (division.offices[cityName] instanceof OfficeSpace) {
+                onClicks[cityName] = () => {
+                    setCity(cityName);
+                    props.corp.rerender();
+                }
+            }
+        }
+
+        const cityTabs = (
+            <CityTabs
+                {...props}
+                corp={props.corp}
+                city={city}
+                onClicks={onClicks}
+                cityStateSetter={changeCityState}
+            />
+        )
+
+        return (
+            <div id="cmpy-mgmt-panel">
+                {cityTabs}
+                <Industry {...props} currentCity={city} />
+            </div>
+        )
+    }
+
+    if (props.routing.isOnOverviewPage()) {
+        // Corporation overview Content
+        return renderOverviewPage();
+    } else {
+        // Division content
+
+        // First, check if we're at a new division. If so, we need to reset the city to Sector-12
+        // Otherwise, just switch the 'city' state
+        const currentDivision = props.routing.current();
+        if (currentDivision !== division) {
+            setDivision(currentDivision);
+            setCity(CityName.Sector12);
+        }
+
+        return renderDivisionPage();
+    }
+}
diff --git a/src/Corporation/ui/Root.jsx b/src/Corporation/ui/Root.jsx
deleted file mode 100644
index b9071646a..000000000
--- a/src/Corporation/ui/Root.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-// Root React Component for the Corporation UI
-import React from "react";
-import { BaseReactComponent } from "./BaseReactComponent";
-
-import { HeaderTabs } from "./HeaderTabs";
-import { MainPanel } from "./MainPanel";
-
-export class CorporationRoot extends BaseReactComponent {
-    render() {
-        return (
-            <div>
-                <HeaderTabs corp={this.props.corp} eventHandler={this.props.eventHandler} routing={this.props.routing} />
-                <MainPanel {...this.props} />
-            </div>
-        )
-    }
-}
diff --git a/src/Corporation/ui/Root.tsx b/src/Corporation/ui/Root.tsx
new file mode 100644
index 000000000..7c3294390
--- /dev/null
+++ b/src/Corporation/ui/Root.tsx
@@ -0,0 +1,20 @@
+// Root React Component for the Corporation UI
+import React from "react";
+
+import { HeaderTabs } from "./HeaderTabs";
+import { MainPanel } from "./MainPanel";
+
+interface IProps {
+    corp: any;
+    eventHandler: any;
+    routing: any;
+}
+
+export function CorporationRoot(props: IProps): React.ReactElement {
+    return (
+        <div>
+            <HeaderTabs corp={props.corp} eventHandler={props.eventHandler} routing={props.routing} />
+            <MainPanel corp={props.corp} eventHandler={props.eventHandler} routing={props.routing} />
+        </div>
+    )
+}