diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx
index ceb633f603e..0b7607f2978 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx
@@ -32,6 +32,7 @@ import classNames from 'classnames';
 import Loader from '@/v2/components/loader/loader';
 
 import './app.less';
+import NotFound from '@/v2/pages/notFound/notFound';
 
 const {
   Header, Content, Footer
@@ -39,7 +40,7 @@ const {
 
 interface IAppState {
   collapsed: boolean;
-  enableNewUI: boolean;
+  enableOldUI: boolean;
 }
 
 class App extends React.Component<Record<string, object>, IAppState> {
@@ -47,7 +48,7 @@ class App extends React.Component<Record<string, object>, IAppState> {
     super(props);
     this.state = {
       collapsed: false,
-      enableNewUI: false
+      enableOldUI: false
     };
   }
 
@@ -56,7 +57,7 @@ class App extends React.Component<Record<string, object>, IAppState> {
   };
 
   render() {
-    const { collapsed, enableNewUI } = this.state;
+    const { collapsed, enableOldUI } = this.state;
     const layoutClass = classNames('content-layout', { 'sidebar-collapsed': collapsed });
 
 
@@ -64,40 +65,46 @@ class App extends React.Component<Record<string, object>, IAppState> {
       <Router>
         <Layout style={{ minHeight: '100vh' }}>
           {
-            (enableNewUI)
-            ? <NavBarV2 collapsed={collapsed} onCollapse={this.onCollapse} />
-            : <NavBar collapsed={collapsed} onCollapse={this.onCollapse} />
+            (enableOldUI)
+              ? <NavBar collapsed={collapsed} onCollapse={this.onCollapse} />
+              : <NavBarV2 collapsed={collapsed} onCollapse={this.onCollapse} />
           }
           <Layout className={layoutClass}>
             <Header>
-              <div style={{ margin: '16px 0', display: 'flex', justifyContent: 'space-between' }}>
-                {(enableNewUI) ? <BreadcrumbsV2 /> : <Breadcrumbs />}
-                <AntDSwitch
-                  disabled={true}
-                  checkedChildren={<div style={{ paddingLeft: '2px' }}>New UI</div>}
-                  onChange={(checked: boolean) => {
-                    this.setState({
-                      enableNewUI: checked
-                    });
-                  }} />
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                {(enableOldUI) ? <Breadcrumbs /> : <BreadcrumbsV2 />}
+                <span>
+                  <span style={{ marginRight: '8px', color: '#515151'}}>Switch to</span>
+                  <AntDSwitch
+                    unCheckedChildren={<div style={{ paddingRight: '2px' }}>Old UI</div>}
+                    checkedChildren={<div style={{ paddingLeft: '2px' }}>New UI</div>}
+                    onChange={(checked: boolean) => {
+                      this.setState({
+                        enableOldUI: checked
+                      });
+                    }} />
+                </span>
               </div>
             </Header>
-            <Content style={(enableNewUI) ? {} : { margin: '0 16px 0', overflow: 'initial' }}>
-              <Switch>
-                <Route exact path='/'>
-                  <Redirect to='/Overview' />
-                </Route>
-                {(enableNewUI)
-                  ? <Suspense fallback={<Loader/>}>
-                    {routesV2.map(
+            <Content style={(enableOldUI) ? { margin: '0 16px 0', overflow: 'initial' } : {}}>
+              <Suspense fallback={<Loader />}>
+                <Switch>
+                  <Route exact path='/'>
+                    <Redirect to='/Overview' />
+                  </Route>
+                  {(enableOldUI)
+                    ? routes.map(
                       (route, index) => <MakeRouteWithSubRoutes key={index} {...route} />
-                    )}
-                  </Suspense>
-                  : routes.map(
-                    (route, index) => <MakeRouteWithSubRoutes key={index} {...route} />
-                  )
-                }
-              </Switch>
+                    )
+                    : routesV2.map(
+                      (route, index) => {
+                        return <MakeRouteWithSubRoutes key={index} {...route} />
+                      }
+                    )
+                  }
+                  <Route component={NotFound} />
+                </Switch>
+              </Suspense>
             </Content>
             <Footer style={{ textAlign: 'center' }} />
           </Layout>
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/notFound/notFound.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/notFound/notFound.tsx
new file mode 100644
index 00000000000..4664f99f2cc
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/notFound/notFound.tsx
@@ -0,0 +1,103 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import React from 'react';
+import { Button } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useHistory } from 'react-router-dom';
+
+// Declare SVG constant instead of importing a file to help loading
+const notFoundIcon = (
+  <svg width="100%" height="100%" viewBox="0 0 1080 1080" style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinecap: 'round', strokeLinejoin: 'round', strokeMiterlimit: 1.5 }}>
+    <g transform="matrix(1.44095,0,0,1.44095,-185.216,-251.373)">
+      <g transform="matrix(0.944978,0,0,0.914657,24.9329,68.941)">
+        <path d="M247.428,443.796C248.822,443.952 391.105,376.828 247.428,443.796C103.751,510.764 115.658,684.797 231.483,694.498C347.308,704.199 384.351,672.783 454.345,635.793C524.34,598.803 525.667,599.868 561.552,593.322C597.437,586.777 583.99,603.712 574.32,632.611C564.65,661.511 493.253,787.738 741.087,710.394C988.922,633.051 882.616,522.813 771.238,531.547C659.86,540.281 579.512,617.269 590.123,579.339C600.734,541.408 714.633,402.262 579.57,382.851C444.507,363.439 246.035,443.641 247.428,443.796Z" style={{ fill: 'rgb(9,209,118)', fillOpacity: 0.6, stroke: 'black', strokeOpacity: 0, strokeWidth: '8.96px' }} />
+      </g>
+      <g transform="matrix(0.644866,-1.18562e-16,-8.57454e-17,-0.27393,51.8343,793.841)">
+        <rect x="215.614" y="745.673" width="711.164" height="5.027" style={{ fill: 'rgb(4,15,66)', stroke: 'black', strokeOpacity: 0, strokeWidth: '16.81px' }} />
+      </g>
+      <g transform="matrix(0.0449181,2.51391e-16,-3.87546e-16,-0.298306,128.725,812.065)">
+        <rect x="215.614" y="745.673" width="711.164" height="5.027" style={{ fill: 'rgb(4,15,66)', stroke: 'black', strokeOpacity: 0, strokeWidth: '39.04px' }} />
+      </g>
+      <g transform="matrix(0.0536855,1.21321e-16,-4.8904e-18,0.178017,501.717,463.557)">
+        <rect x="215.614" y="745.673" width="711.164" height="5.027" style={{ fill: 'rgb(4,15,66)', stroke: 'black', strokeOpacity: 0, strokeWidth: '63.34px' }} />
+      </g>
+      <g transform="matrix(14.9468,0,0,14.9468,-2160.92,-6553.61)">
+        <g transform="matrix(24,0,0,24,170.176,478.583)">
+        </g>
+        <text x="156.406px" y="478.583px" style={{ fontFamily: 'Roboto-Bold, Roboto', fontWeight: 700, fontSize: '24px', fill: 'rgb(11,36,0)' }}>4</text>
+      </g>
+      <g transform="matrix(1.74862,0,0,1.74862,-357.721,-43.1954)">
+        <g transform="matrix(192,0,0,192,526.902,357.026)">
+        </g>
+        <text x="416.746px" y="357.026px" style={{ fontFamily: 'Roboto-Bold, Roboto', fontWeight: 700, fontSize: '192px', fill: 'rgb(11,36,0)' }}>0</text>
+      </g>
+      <g transform="matrix(21.2052,0,0,21.2052,-2759.51,-9389.18)">
+        <g transform="matrix(24,0,0,24,170.176,478.583)">
+        </g>
+        <text x="156.406px" y="478.583px" style={{ fontFamily: 'Roboto-Bold, Roboto', fontWeight: 700, fontSize: '24px', fill: 'rgb(11,36,0)' }}>4</text>
+      </g>
+      <g transform="matrix(1,0,0,1,-27,0)">
+        <g transform="matrix(1,0,0,0.589632,0,242.476)">
+          <path d="M617.69,423.839L617.69,589.68C617.69,590.339 617.375,590.874 616.986,590.874L615.578,590.874C615.19,590.874 614.874,590.339 614.874,589.68L614.874,423.839C614.874,423.18 615.19,422.645 615.578,422.645L616.986,422.645C617.375,422.645 617.69,423.18 617.69,423.839Z" style={{ fill: 'rgb(23,51,38)', stroke: 'rgb(43,43,43)', strokeOpacity: 0, strokeWidth: '0.85px' }} />
+        </g>
+        <g transform="matrix(0.851104,0.0593827,-0.0701034,1.00476,128.082,-24.3374)">
+          <path d="M601.027,497.013L640.442,497.013L648.218,502.656L641.04,509.834L600.77,509.834L601.027,497.013Z" style={{ fill: 'rgb(9,172,98)', stroke: 'rgb(43,43,43)', strokeOpacity: 0, strokeWidth: '0.74px' }} />
+        </g>
+        <g transform="matrix(-0.716372,0,0,1,1058.43,-0.0408301)">
+          <path d="M601.027,497.013L640.442,497.013L650.733,504.094L641.04,509.834L600.77,509.834L601.027,497.013Z" style={{ fill: 'rgb(0,166,91)', stroke: 'rgb(43,43,43)', strokeOpacity: 0, strokeWidth: '0.8px' }} />
+        </g>
+      </g>
+      <g transform="matrix(0.100667,0,0,0.100667,514.784,673.301)">
+        <g transform="matrix(22,0,0,22,1001.53,645.714)">
+        </g>
+        <text x="846.825px" y="645.714px" style={{ fontFamily: 'Roboto-Bold, Roboto', fontWeight: 700, fontSize: '22px', fill: 'rgb(108,217,156)' }}>de<tspan x="870.974px 881.931px " y="645.714px 645.714px ">va</tspan>bhishekpal</text>
+      </g>
+    </g>
+  </svg>
+)
+
+const contentStyles: React.CSSProperties = {
+  height: '80vh',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '20px',
+  fontSize: '18px',
+  color: '#8a8a8a',
+  fontWeight: 400
+}
+
+const NotFound: React.FC<{}> = () => {
+  const history = useHistory();
+
+  return (
+    <div style={contentStyles}>
+      <div style={{ width: '100%', height: '70%' }}> {notFoundIcon} </div>
+      The page you visited does not exist
+      <Button type='primary'
+        onClick={() => { history.goBack() }}>
+        <ArrowLeftOutlined />
+        Go Back
+      </Button>
+    </div>
+  )
+}
+
+export default NotFound;
\ No newline at end of file
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx
index 9f27b7cae76..c3ff1b97e3c 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx
@@ -17,6 +17,9 @@
  */
 import { lazy } from 'react';
 
+import { Heatmap } from '@/views/heatMap/heatmap';
+import NotFound from '@/v2/pages/notFound/notFound';
+
 const Overview = lazy(() => import('@/v2/pages/overview/overview'));
 const Volumes = lazy(() => import('@/v2/pages/volumes/volumes'))
 const Buckets = lazy(() => import('@/v2/pages/buckets/buckets'));
@@ -27,6 +30,7 @@ const Containers = lazy(() => import('@/v2/pages/containers/containers'));
 const Insights = lazy(() => import('@/v2/pages/insights/insights'));
 const OMDBInsights = lazy(() => import('@/v2/pages/insights/omInsights'));
 
+
 export const routesV2 = [
   {
     path: '/Overview',
@@ -63,5 +67,10 @@ export const routesV2 = [
   {
     path: '/Om',
     component: OMDBInsights
+  },
+  // TODO: Replace with V2 heatmap once rea
+  {
+    path: '/Heatmap',
+    component: Heatmap
   }
 ];