diff --git a/.gitignore b/.gitignore
index 378add6..ef85a37 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,5 @@ yarn-error.log
 .DS_Store
 /cypress/screenshots/
 /cypress/videos/
-target
\ No newline at end of file
+target
+.eslintcache
\ No newline at end of file
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index eccd773..18321a8 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -1,7 +1,7 @@
 {
   "id": "queryInsightsDashboards",
   "version": "1.0.0",
-  "opensearchDashboardsVersion": "opensearchDashboards",
+  "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
   "requiredPlugins": ["navigation"],
diff --git a/public/application.tsx b/public/application.tsx
index b6d5e84..5b6ec41 100644
--- a/public/application.tsx
+++ b/public/application.tsx
@@ -1,21 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { HashRouter as Router } from 'react-router-dom';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
-import { AppPluginStartDependencies } from './types';
 import { QueryInsightsDashboardsApp } from './components/app';
 
-export const renderApp = (
-  { notifications, http }: CoreStart,
-  { navigation }: AppPluginStartDependencies,
-  { appBasePath, element }: AppMountParameters
-) => {
+export const renderApp = (core: CoreStart, { element }: AppMountParameters) => {
   ReactDOM.render(
-    <QueryInsightsDashboardsApp
-      basename={appBasePath}
-      notifications={notifications}
-      http={http}
-      navigation={navigation}
-    />,
+    <Router>
+      <QueryInsightsDashboardsApp core={core} />
+    </Router>,
     element
   );
 
diff --git a/public/components/__snapshots__/app.test.tsx.snap b/public/components/__snapshots__/app.test.tsx.snap
deleted file mode 100644
index 8d17b89..0000000
--- a/public/components/__snapshots__/app.test.tsx.snap
+++ /dev/null
@@ -1,69 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
-<div>
-  <div
-    class="euiPage euiPage--paddingMedium euiPage--grow euiPage--restrictWidth-custom"
-    style="max-width: 1000px;"
-  >
-    <main
-      class="euiPageBody euiPageBody--borderRadiusNone"
-    >
-      <header
-        class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
-      >
-        <h1
-          class="euiTitle euiTitle--large"
-        >
-          query-insights-dashboards
-        </h1>
-      </header>
-      <div
-        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
-        role="main"
-      >
-        <div
-          class="euiPageContentHeader euiPageContentHeader--responsive"
-        >
-          <h2
-            class="euiTitle euiTitle--medium"
-          >
-            Congratulations, you have successfully created a new OpenSearch Dashboards Plugin!
-          </h2>
-        </div>
-        <div
-          class="euiPageContentBody"
-        >
-          <div
-            class="euiText euiText--medium"
-          >
-            <p>
-              Look through the generated code and check out the plugin development documentation.
-            </p>
-            <hr
-              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-            />
-            <p>
-              Last timestamp: Unknown
-            </p>
-            <button
-              class="euiButton euiButton--primary euiButton--small"
-              type="primary"
-            >
-              <span
-                class="euiButtonContent euiButton__content"
-              >
-                <span
-                  class="euiButton__text"
-                >
-                  Get data
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </main>
-  </div>
-</div>
-`;
diff --git a/public/components/app.test.tsx b/public/components/app.test.tsx
index a04360b..8e494ca 100644
--- a/public/components/app.test.tsx
+++ b/public/components/app.test.tsx
@@ -6,6 +6,8 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
+import { coreMock } from '../../../../src/core/public/mocks';
+import { MemoryRouter as Router } from 'react-router-dom';
 import { QueryInsightsDashboardsApp } from './app';
 
 describe('<QueryInsightsDashboardsApp /> spec', () => {
@@ -15,18 +17,22 @@ describe('<QueryInsightsDashboardsApp /> spec', () => {
         serverBasePath: '/app/opensearch-dashboards',
       },
     };
+    const coreStart = coreMock.createStart();
 
     const { container } = render(
-      <QueryInsightsDashboardsApp
-        basename="/"
-        http={mockHttpStart as any}
-        navigation={
-          {
-            ui: { TopNavMenu: () => null },
-          } as any
-        }
-        notifications={{} as any}
-      />
+      <Router>
+        <QueryInsightsDashboardsApp
+          basename="/"
+          core={coreStart}
+          http={mockHttpStart as any}
+          navigation={
+            {
+              ui: { TopNavMenu: () => null },
+            } as any
+          }
+          notifications={{} as any}
+        />
+      </Router>
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/public/components/app.tsx b/public/components/app.tsx
index 0e3d6c1..603d189 100644
--- a/public/components/app.tsx
+++ b/public/components/app.tsx
@@ -1,119 +1,8 @@
-import React, { useState } from 'react';
-import { i18n } from '@osd/i18n';
-import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-import {
-  EuiButton,
-  EuiHorizontalRule,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageHeader,
-  EuiTitle,
-  EuiText,
-} from '@elastic/eui';
-
+import React from 'react';
+import { Route } from 'react-router-dom';
+import TopNQueries from '../pages/TopNQueries/TopNQueries';
 import { CoreStart } from '../../../../src/core/public';
-import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
-
-import { PLUGIN_ID, PLUGIN_NAME } from '../../common';
-
-interface QueryInsightsDashboardsAppDeps {
-  basename: string;
-  notifications: CoreStart['notifications'];
-  http: CoreStart['http'];
-  navigation: NavigationPublicPluginStart;
-}
-
-export const QueryInsightsDashboardsApp = ({
-  basename,
-  notifications,
-  http,
-  navigation,
-}: QueryInsightsDashboardsAppDeps) => {
-  // Use React hooks to manage state.
-  const [timestamp, setTimestamp] = useState<string | undefined>();
-
-  const onClickHandler = () => {
-    // Use the core http service to make a response to the server API.
-    http.get('/api/query_insights_dashboards/example').then((res) => {
-      setTimestamp(res.time);
-      // Use the core notifications service to display a success message.
-      notifications.toasts.addSuccess(
-        i18n.translate('queryInsightsDashboards.dataUpdated', {
-          defaultMessage: 'Data updated',
-        })
-      );
-    });
-  };
 
-  // Render the application DOM.
-  // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
-  return (
-    <Router basename={basename}>
-      <I18nProvider>
-        <>
-          <navigation.ui.TopNavMenu
-            appName={PLUGIN_ID}
-            showSearchBar={true}
-            useDefaultBehaviors={true}
-          />
-          <EuiPage restrictWidth="1000px">
-            <EuiPageBody component="main">
-              <EuiPageHeader>
-                <EuiTitle size="l">
-                  <h1>
-                    <FormattedMessage
-                      id="queryInsightsDashboards.helloWorldText"
-                      defaultMessage="{name}"
-                      values={{ name: PLUGIN_NAME }}
-                    />
-                  </h1>
-                </EuiTitle>
-              </EuiPageHeader>
-              <EuiPageContent>
-                <EuiPageContentHeader>
-                  <EuiTitle>
-                    <h2>
-                      <FormattedMessage
-                        id="queryInsightsDashboards.congratulationsTitle"
-                        defaultMessage="Congratulations, you have successfully created a new OpenSearch Dashboards Plugin!"
-                      />
-                    </h2>
-                  </EuiTitle>
-                </EuiPageContentHeader>
-                <EuiPageContentBody>
-                  <EuiText>
-                    <p>
-                      <FormattedMessage
-                        id="queryInsightsDashboards.content"
-                        defaultMessage="Look through the generated code and check out the plugin development documentation."
-                      />
-                    </p>
-                    <EuiHorizontalRule />
-                    <p>
-                      <FormattedMessage
-                        id="queryInsightsDashboards.timestampText"
-                        defaultMessage="Last timestamp: {time}"
-                        values={{ time: timestamp ? timestamp : 'Unknown' }}
-                      />
-                    </p>
-                    <EuiButton type="primary" size="s" onClick={onClickHandler}>
-                      <FormattedMessage
-                        id="queryInsightsDashboards.buttonText"
-                        defaultMessage="Get data"
-                      />
-                    </EuiButton>
-                  </EuiText>
-                </EuiPageContentBody>
-              </EuiPageContent>
-            </EuiPageBody>
-          </EuiPage>
-        </>
-      </I18nProvider>
-    </Router>
-  );
+export const QueryInsightsDashboardsApp = ({ core }: { core: CoreStart }) => {
+  return <Route render={() => <TopNQueries core={core} />} />;
 };
diff --git a/public/pages/QueryInsights/QueryInsights.tsx b/public/pages/QueryInsights/QueryInsights.tsx
new file mode 100644
index 0000000..4cdde26
--- /dev/null
+++ b/public/pages/QueryInsights/QueryInsights.tsx
@@ -0,0 +1,218 @@
+import React, { useEffect, useState } from 'react';
+import { EuiBasicTableColumn, EuiInMemoryTable, EuiSuperDatePicker } from '@elastic/eui';
+import { useHistory, useLocation } from 'react-router-dom';
+import { CoreStart } from '../../../../../src/core/public';
+import { QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
+
+const TIMESTAMP_FIELD = 'timestamp';
+const LATENCY_FIELD = 'latency';
+const CPU_FIELD = 'cpu';
+const MEMORY_FIELD = 'memory';
+const INDICES_FIELD = 'indices';
+const SEARCH_TYPE_FIELD = 'search_type';
+const NODE_ID_FIELD = 'node_id';
+const TOTAL_SHARDS_FIELD = 'total_shards';
+const METRIC_DEFAULT_MSG = 'Not enabled';
+
+const QueryInsights = ({
+  queries,
+  loading,
+  onTimeChange,
+  recentlyUsedRanges,
+  currStart,
+  currEnd,
+  core,
+}: {
+  queries: any[];
+  loading: boolean;
+  onTimeChange: any;
+  recentlyUsedRanges: any[];
+  currStart: string;
+  currEnd: string;
+  core: CoreStart;
+}) => {
+  const history = useHistory();
+  const location = useLocation();
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
+
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([
+      {
+        text: 'Query insights',
+        href: QUERY_INSIGHTS,
+        onClick: (e) => {
+          e.preventDefault();
+          history.push(QUERY_INSIGHTS);
+        },
+      },
+    ]);
+  }, [core.chrome, history, location]);
+
+  const convertTime = (unixTime: number) => {
+    const date = new Date(unixTime);
+    const loc = date.toDateString().split(' ');
+    return `${loc[1]} ${loc[2]}, ${loc[3]} @ ${date.toLocaleTimeString('en-US')}`;
+  };
+
+  const cols: Array<EuiBasicTableColumn<any>> = [
+    {
+      // Make into flyout instead?
+      name: 'Timestamp',
+      render: (query: any) => {
+        return <span>{convertTime(query.timestamp)}</span>;
+      },
+      sortable: (query) => query.timestamp,
+      truncateText: true,
+    },
+    {
+      field: LATENCY_FIELD,
+      name: 'Latency',
+      render: (latency: number) =>
+        typeof latency !== 'undefined' ? `${latency} ms` : `${METRIC_DEFAULT_MSG}`,
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: CPU_FIELD,
+      name: 'CPU usage',
+      render: (cpu: number) => (typeof cpu !== 'undefined' ? `${cpu} ns` : `${METRIC_DEFAULT_MSG}`),
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: MEMORY_FIELD,
+      name: 'Memory',
+      render: (memory: number) =>
+        typeof memory !== 'undefined' ? `${memory} B` : `${METRIC_DEFAULT_MSG}`,
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: INDICES_FIELD,
+      name: 'Indices',
+      render: (indices: string[]) => Array.from(new Set(indices.flat())).join(', '),
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: SEARCH_TYPE_FIELD,
+      name: 'Search type',
+      render: (searchType: string) => searchType.replaceAll('_', ' '),
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: NODE_ID_FIELD,
+      name: 'Coordinator node ID',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: TOTAL_SHARDS_FIELD,
+      name: 'Total shards',
+      sortable: true,
+      truncateText: true,
+    },
+  ];
+
+  const onRefresh = async ({ start, end }: { start: string; end: string }) => {
+    onTimeChange({ start, end });
+  };
+
+  const filterDuplicates = (options: any[]) =>
+    options.filter(
+      (value, index, self) => index === self.findIndex((t) => t.value === value.value)
+    );
+
+  return (
+    <EuiInMemoryTable
+      items={queries}
+      columns={cols}
+      sorting={{
+        sort: {
+          field: TIMESTAMP_FIELD,
+          direction: 'desc',
+        },
+      }}
+      onTableChange={({ page: { index } }) => setPagination({ pageIndex: index })}
+      pagination={pagination}
+      loading={loading}
+      search={{
+        box: {
+          placeholder: 'Search queries',
+          schema: false,
+        },
+        filters: [
+          {
+            type: 'field_value_selection',
+            field: INDICES_FIELD,
+            name: 'Indices',
+            multiSelect: true,
+            options: filterDuplicates(
+              queries.map((query) => {
+                const values = Array.from(new Set(query[INDICES_FIELD].flat()));
+                return {
+                  value: values.join(','),
+                  name: values.join(','),
+                  view: values.join(', '),
+                };
+              })
+            ),
+          },
+          {
+            type: 'field_value_selection',
+            field: SEARCH_TYPE_FIELD,
+            name: 'Search type',
+            multiSelect: false,
+            options: filterDuplicates(
+              queries.map((query) => ({
+                value: query[SEARCH_TYPE_FIELD],
+                name: query[SEARCH_TYPE_FIELD],
+                view: query[SEARCH_TYPE_FIELD],
+              }))
+            ),
+          },
+          {
+            type: 'field_value_selection',
+            field: NODE_ID_FIELD,
+            name: 'Coordinator node ID',
+            multiSelect: true,
+            options: filterDuplicates(
+              queries.map((query) => ({
+                value: query[NODE_ID_FIELD],
+                name: query[NODE_ID_FIELD],
+                view: query[NODE_ID_FIELD].replaceAll('_', ' '),
+              }))
+            ),
+          },
+        ],
+        toolsRight: [
+          <EuiSuperDatePicker
+            start={currStart}
+            end={currEnd}
+            onTimeChange={onTimeChange}
+            recentlyUsedRanges={recentlyUsedRanges}
+            onRefresh={onRefresh}
+            updateButtonProps={{ fill: false }}
+          />,
+        ],
+      }}
+      executeQueryOptions={{
+        defaultFields: [
+          TIMESTAMP_FIELD,
+          LATENCY_FIELD,
+          CPU_FIELD,
+          MEMORY_FIELD,
+          INDICES_FIELD,
+          SEARCH_TYPE_FIELD,
+          NODE_ID_FIELD,
+          TOTAL_SHARDS_FIELD,
+        ],
+      }}
+      allowNeutralSort={false}
+    />
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default QueryInsights;
diff --git a/public/pages/TopNQueries/TopNQueries.tsx b/public/pages/TopNQueries/TopNQueries.tsx
new file mode 100644
index 0000000..5089e1a
--- /dev/null
+++ b/public/pages/TopNQueries/TopNQueries.tsx
@@ -0,0 +1,113 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
+import { EuiTab, EuiTabs, EuiTitle, EuiSpacer } from '@elastic/eui';
+import QueryInsights from '../QueryInsights/QueryInsights';
+import { CoreStart } from '../../../../../src/core/public';
+
+export const QUERY_INSIGHTS = '/queryInsights';
+
+export interface MetricSettings {
+  isEnabled: boolean;
+  currTopN: string;
+  currWindowSize: string;
+  currTimeUnit: string;
+}
+
+const TopNQueries = ({ core }: { core: CoreStart }) => {
+  const history = useHistory();
+  const location = useLocation();
+  const [loading, setLoading] = useState(false);
+  const [currStart, setStart] = useState('now-1d');
+  const [currEnd, setEnd] = useState('now');
+  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState([
+    { start: currStart, end: currEnd },
+  ]);
+
+  const [queries, setQueries] = useState<any[]>([]);
+
+  const tabs: Array<{ id: string; name: string; route: string }> = [
+    {
+      id: 'topNQueries',
+      name: 'Top N queries',
+      route: QUERY_INSIGHTS,
+    },
+  ];
+
+  const onSelectedTabChanged = (route: string) => {
+    const { pathname: currPathname } = location;
+    if (!currPathname.includes(route)) {
+      history.push(route);
+    }
+  };
+
+  const renderTab = (tab: { route: string; id: string; name: string }) => (
+    <EuiTab
+      onClick={() => onSelectedTabChanged(tab.route)}
+      isSelected={location.pathname.includes(tab.route)}
+      key={tab.id}
+    >
+      {tab.name}
+    </EuiTab>
+  );
+
+  const retrieveQueries = useCallback(async (start: string, end: string) => {
+    try {
+      setLoading(true);
+      const noDuplicates: any[] = [];
+      setQueries(noDuplicates);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error retrieving queries:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const onTimeChange = ({ start, end }: { start: string; end: string }) => {
+    const usedRange = recentlyUsedRanges.filter(
+      (range) => !(range.start === start && range.end === end)
+    );
+    usedRange.unshift({ start, end });
+    setStart(start);
+    setEnd(end);
+    setRecentlyUsedRanges(usedRange.length > 10 ? usedRange.slice(0, 9) : usedRange);
+    retrieveQueries(start, end);
+  };
+
+  useEffect(() => {
+    onTimeChange({ start: currStart, end: currEnd });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currStart, currEnd]);
+
+  useEffect(() => {
+    retrieveQueries(currStart, currEnd);
+  }, [currStart, currEnd, retrieveQueries]);
+
+  return (
+    <div style={{ padding: '35px 35px' }}>
+      <Switch>
+        <Route exact path={QUERY_INSIGHTS}>
+          <EuiTitle size="l">
+            <h1>Query insights - Top N queries</h1>
+          </EuiTitle>
+          <EuiSpacer size="l" />
+          <EuiTabs>{tabs.map(renderTab)}</EuiTabs>
+          <EuiSpacer size="l" />
+          <QueryInsights
+            queries={queries}
+            loading={loading}
+            onTimeChange={onTimeChange}
+            recentlyUsedRanges={recentlyUsedRanges}
+            currStart={currStart}
+            currEnd={currEnd}
+            core={core}
+          />
+        </Route>
+        <Redirect to={QUERY_INSIGHTS} />
+      </Switch>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default TopNQueries;
diff --git a/public/plugin.ts b/public/plugin.ts
index 5c7178d..6dd0032 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -1,10 +1,6 @@
 import { i18n } from '@osd/i18n';
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
-import {
-  QueryInsightsDashboardsPluginSetup,
-  QueryInsightsDashboardsPluginStart,
-  AppPluginStartDependencies,
-} from './types';
+import { QueryInsightsDashboardsPluginSetup, QueryInsightsDashboardsPluginStart } from './types';
 import { PLUGIN_NAME } from '../common';
 
 export class QueryInsightsDashboardsPlugin
@@ -12,15 +8,23 @@ export class QueryInsightsDashboardsPlugin
   public setup(core: CoreSetup): QueryInsightsDashboardsPluginSetup {
     // Register an application into the side navigation menu
     core.application.register({
-      id: 'queryInsightsDashboards',
-      title: PLUGIN_NAME,
+      id: PLUGIN_NAME,
+      title: 'Query Insights',
+      // @ts-ignore
+      description: 'OpenSearch Dashboards Query Insights Plugin',
+      category: {
+        id: 'opensearch',
+        label: 'OpenSearch Plugins',
+        order: 2000,
+      },
+      order: 5000,
       async mount(params: AppMountParameters) {
         // Load application bundle
         const { renderApp } = await import('./application');
         // Get start services as specified in opensearch_dashboards.json
-        const [coreStart, depsStart] = await core.getStartServices();
+        const [coreStart] = await core.getStartServices();
         // Render the application
-        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params);
+        return renderApp(coreStart, params);
       },
     });