diff --git a/src/.babelrc b/src/.babelrc
index e69de29b..314da637 100644
--- a/src/.babelrc
+++ b/src/.babelrc
@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "@babel/preset-env",
+       ["@babel/preset-react", {"runtime": "automatic"}]
+    ]
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 7ca68b83..db0b5e56 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,13 @@
 import React, { Component } from 'react';
 import { Route } from 'react-router';
-import { Link } from 'react-router-dom';
 import { ConfigProvider, Layout, Menu, Icon } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
 import ErrorBoundary from './ErrorBoundary';
 import { Download, Trends } from './Graph/';
-
+import NavigationMenu from './components/NavigationMenu';
 import 'antd/dist/antd.css';
 import AdoptiumLogo from './Adoptiumlogo.svg';
 
-const { SubMenu } = Menu;
 const { Header, Content, Sider } = Layout;
 
 export default class extends Component {
@@ -36,20 +34,10 @@ export default class extends Component {
 					>
 						<Menu.Item key="1"><a href="https://adoptium.net/" style={{ height: '100%', display: 'flex' }}><img src={AdoptiumLogo} style={{height: '3.5em', paddingTop: '1em'}} /></a></Menu.Item>
 					</Menu>
-
 				</Header>
 				<Layout>
 					<Sider width={200} style={{ background: '#fff' }} trigger={null} collapsible collapsed={this.state.collapsed}>
-						<Menu
-							mode="inline"
-							defaultSelectedKeys={['1']}
-							defaultOpenKeys={['sub1']}
-							style={{ height: '100%', borderRight: 0, marginTop: 20 }}
-						>
-							<Menu.Item key="1"><Link to="/download"><Icon type="cloud-download" />Download</Link></Menu.Item>
-							<Menu.Item key="2"><Link to="/trends"><Icon type="line-chart" />Trends</Link></Menu.Item>
-
-						</Menu>
+						<NavigationMenu />
 					</Sider>
 					<Layout style={{ padding: '0 24px 24px' }}>
 						<ErrorBoundary>
diff --git a/src/components/NavigationMenu/index.tsx b/src/components/NavigationMenu/index.tsx
new file mode 100644
index 00000000..a394f663
--- /dev/null
+++ b/src/components/NavigationMenu/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Menu, Icon } from 'antd';
+import { Link } from 'react-router-dom';
+
+const NavigationMenu = (): JSX.Element => {
+    const location = useLocation();
+
+    const getSelectedKeysByUrl = () => {
+        if(location.pathname === '/') return ['1'];
+        else if(location.pathname === '/download') return ['1'];
+        else if(location.pathname === '/trends') return ['2'];
+    }
+
+    return (
+        <Menu
+            mode="inline"
+            defaultOpenKeys={['sub1']}
+            selectedKeys={getSelectedKeysByUrl()}
+            style={{ height: '100%', borderRight: 0, marginTop: 20 }}
+        >
+            <Menu.Item key="1"><Link to="/download"><Icon type="cloud-download" />Download</Link></Menu.Item>
+            <Menu.Item key="2"><Link to="/trends"><Icon type="line-chart" />Trends</Link></Menu.Item>
+        </Menu>
+        )
+}
+
+export default NavigationMenu;