diff --git a/x-pack/legacy/plugins/fleet/public/index.tsx b/x-pack/legacy/plugins/fleet/public/index.tsx
index fc640783cf6c9..17d3b072bf29f 100644
--- a/x-pack/legacy/plugins/fleet/public/index.tsx
+++ b/x-pack/legacy/plugins/fleet/public/index.tsx
@@ -20,7 +20,7 @@ async function startApp(libs: FrontendLibs) {
     <I18nContext>
       <HashRouter basename="/fleet">
         <LibsContext.Provider value={libs}>
-          <AppRoutes libs={libs} />
+          <AppRoutes />
         </LibsContext.Provider>
       </HashRouter>
     </I18nContext>,
diff --git a/x-pack/legacy/plugins/fleet/public/pages/agent_details/components/details_section.tsx b/x-pack/legacy/plugins/fleet/public/pages/agent_details/components/details_section.tsx
index 3214bd970839a..dea3a8397cf16 100644
--- a/x-pack/legacy/plugins/fleet/public/pages/agent_details/components/details_section.tsx
+++ b/x-pack/legacy/plugins/fleet/public/pages/agent_details/components/details_section.tsx
@@ -91,7 +91,10 @@ export const AgentDetailSection: SFC<Props> = ({ agent, onClickUnenroll, unenrol
         <EuiFlexItem grow={false}>
           <EuiTitle size="l">
             <h1>
-              <FormattedMessage id="xpack.fleet.agentDetails.title" defaultMessage="Agent Detail" />
+              <FormattedMessage
+                id="xpack.fleet.agentDetails.agentDetailsTitle"
+                defaultMessage="Agent detail"
+              />
             </h1>
           </EuiTitle>
         </EuiFlexItem>
@@ -101,7 +104,10 @@ export const AgentDetailSection: SFC<Props> = ({ agent, onClickUnenroll, unenrol
             isLoading={unenrollment.loading}
             onClick={onClickUnenroll}
           >
-            <FormattedMessage id="xpack.fleet.agentDetails.unenroll" defaultMessage="Unenroll" />
+            <FormattedMessage
+              id="xpack.fleet.agentDetails.unenrollButtonText"
+              defaultMessage="Unenroll"
+            />
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/x-pack/legacy/plugins/fleet/public/pages/agent_details/components/metadata_form.tsx b/x-pack/legacy/plugins/fleet/public/pages/agent_details/components/metadata_form.tsx
index 1fb5a776b7f94..95cd02fdf3466 100644
--- a/x-pack/legacy/plugins/fleet/public/pages/agent_details/components/metadata_form.tsx
+++ b/x-pack/legacy/plugins/fleet/public/pages/agent_details/components/metadata_form.tsx
@@ -159,7 +159,7 @@ export const MetadataForm: SFC<{ agent: Agent }> = ({ agent }) => {
                 <EuiFormRow hasEmptyLabelSpace>
                   <EuiButton isLoading={form.state.isLoading} type={'submit'}>
                     <FormattedMessage
-                      id="xpack.fleet.metadataForm.submitButton"
+                      id="xpack.fleet.metadataForm.submitButtonText"
                       defaultMessage="Add"
                     />
                   </EuiButton>
diff --git a/x-pack/legacy/plugins/fleet/public/routes.tsx b/x-pack/legacy/plugins/fleet/public/routes.tsx
index 384317e2d3f75..2b20e1daaf799 100644
--- a/x-pack/legacy/plugins/fleet/public/routes.tsx
+++ b/x-pack/legacy/plugins/fleet/public/routes.tsx
@@ -5,77 +5,70 @@
  */
 
 import { get } from 'lodash';
-import React, { Component } from 'react';
+import React, { useState, useEffect, SFC } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { Loading } from './components/loading';
 import { ChildRoutes } from './components/navigation/child_routes';
 import { URLStateProps, WithURLState } from './hooks/with_url_state';
-import { FrontendLibs } from './lib/types';
 import { routeMap } from './pages';
+import { useLibs } from './hooks/use_libs';
 
-interface RouterProps {
-  libs: FrontendLibs;
-}
+function useWaitUntilFrameworkReady() {
+  const libs = useLibs();
+  const [isLoading, setIsLoading] = useState(true);
 
-interface RouterState {
-  loading: boolean;
-}
+  const waitUntilReady = async () => {
+    try {
+      await libs.framework.waitUntilFrameworkReady();
+    } catch (e) {
+      // Silently swallow error
+    }
+    setIsLoading(false);
+  };
 
-export class AppRoutes extends Component<RouterProps, RouterState> {
-  constructor(props: RouterProps) {
-    super(props);
-    this.state = {
-      loading: true,
-    };
-  }
+  useEffect(() => {
+    waitUntilReady();
+  }, []);
 
-  public async componentWillMount() {
-    if (this.state.loading === true) {
-      try {
-        await this.props.libs.framework.waitUntilFrameworkReady();
-      } catch (e) {
-        // Silently swallow error
-      }
+  return { isLoading };
+}
 
-      this.setState({
-        loading: false,
-      });
-    }
+export const AppRoutes: SFC = () => {
+  const { isLoading } = useWaitUntilFrameworkReady();
+  const libs = useLibs();
+
+  if (isLoading === true) {
+    return <Loading />;
   }
 
-  public render() {
-    if (this.state.loading === true) {
-      return <Loading />;
-    }
+  return (
+    <React.Fragment>
+      {/* Redirects mapping */}
+      <Switch>
+        {/* License check (UI displays when license exists but is expired) */}
+        {get(libs.framework.info, 'license.expired', true) && (
+          <Route
+            render={props =>
+              !props.location.pathname.includes('/error') ? (
+                <Redirect to="/error/invalid_license" />
+              ) : null
+            }
+          />
+        )}
 
-    return (
-      <React.Fragment>
-        {/* Redirects mapping */}
-        <Switch>
-          {/* License check (UI displays when license exists but is expired) */}
-          {get(this.props.libs.framework.info, 'license.expired', true) && (
-            <Route
-              render={props =>
-                !props.location.pathname.includes('/error') ? (
-                  <Redirect to="/error/invalid_license" />
-                ) : null
-              }
-            />
-          )}
+        {!libs.framework.capabilities.read && (
+          <Route
+            render={props =>
+              !props.location.pathname.includes('/error') ? (
+                <Redirect to="/error/no_access" />
+              ) : null
+            }
+          />
+        )}
 
-          {!this.props.libs.framework.capabilities.read && (
-            <Route
-              render={props =>
-                !props.location.pathname.includes('/error') ? (
-                  <Redirect to="/error/no_access" />
-                ) : null
-              }
-            />
-          )}
-
-          {/* Ensure security is eanabled for elastic and kibana */}
-          {/* TODO: Disabled for now as we don't have this info set up on backend yet */}
-          {/* {!get(this.props.libs.framework.info, 'security.enabled', true) && (
+        {/* Ensure security is eanabled for elastic and kibana */}
+        {/* TODO: Disabled for now as we don't have this info set up on backend yet */}
+        {/* {!get(this.props.libs.framework.info, 'security.enabled', true) && (
             <Route
               render={props =>
                 !props.location.pathname.includes('/error') ? (
@@ -85,15 +78,14 @@ export class AppRoutes extends Component<RouterProps, RouterState> {
             />
           )} */}
 
-          {/* This app does not make use of a homepage. The main page is agents list */}
-          <Route path="/" exact={true} render={() => <Redirect to="/agents" />} />
-        </Switch>
+        {/* This app does not make use of a homepage. The main page is agents list */}
+        <Route path="/" exact={true} render={() => <Redirect to="/agents" />} />
+      </Switch>
 
-        {/* Render routes from the FS */}
-        <WithURLState>
-          {(URLProps: URLStateProps) => <ChildRoutes routes={routeMap} {...URLProps} />}
-        </WithURLState>
-      </React.Fragment>
-    );
-  }
-}
+      {/* Render routes from the FS */}
+      <WithURLState>
+        {(URLProps: URLStateProps) => <ChildRoutes routes={routeMap} {...URLProps} />}
+      </WithURLState>
+    </React.Fragment>
+  );
+};