diff --git a/.storybook/main.js b/.storybook/main.js
index 98cc11aa9..b7c1cda1c 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -29,6 +29,7 @@ module.exports = {
       '@flyteconsole/locale': path.resolve(__dirname, '../packages/basics/locale/src'),
       '@flyteconsole/ui-atoms': path.resolve(__dirname, '../packages/composites/ui-atoms/src'),
       '@flyteconsole/components': path.resolve(__dirname, '../packages/plugins/components/src'),
+      '@flyteconsole/flyte-api': path.resolve(__dirname, '../packages/plugins/flyte-api/src'),
     };
 
     return config;
diff --git a/jest.config.js b/jest.config.js
index bfcf060b8..f2e406cd7 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -8,10 +8,10 @@ module.exports = {
 
   setupFilesAfterEnv: ['./script/test/jest-setup.ts'],
   projects: [
-    '<rootDir>/packages/basics/locale',
-    '<rootDir>/packages/composites/ui-atoms',
-    '<rootDir>/packages/plugins/components',
-    '<rootDir>/packages/zapp/console',
+    '<rootDir>/packages/basics/*',
+    '<rootDir>/packages/composites/*',
+    '<rootDir>/packages/plugins/*',
+    '<rootDir>/packages/zapp/*',
   ],
 
   coverageDirectory: '<rootDir>/.coverage',
diff --git a/packages/plugins/flyte-api/README.md b/packages/plugins/flyte-api/README.md
new file mode 100644
index 000000000..b8c09ddd5
--- /dev/null
+++ b/packages/plugins/flyte-api/README.md
@@ -0,0 +1 @@
+This is a flyte-API package for flyteconsole plugin system
diff --git a/packages/plugins/flyte-api/jest.config.js b/packages/plugins/flyte-api/jest.config.js
new file mode 100644
index 000000000..ecb112b22
--- /dev/null
+++ b/packages/plugins/flyte-api/jest.config.js
@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+const sharedConfig = require('../../../script/test/jest.base.js');
+
+module.exports = {
+  ...sharedConfig,
+};
diff --git a/packages/plugins/flyte-api/package.json b/packages/plugins/flyte-api/package.json
new file mode 100644
index 000000000..10d551800
--- /dev/null
+++ b/packages/plugins/flyte-api/package.json
@@ -0,0 +1,35 @@
+{
+    "name": "@flyteconsole/flyte-api",
+    "version": "0.0.1-rc.1",
+    "description": "FlyteConsole plugin to allow access FlyteAPI",
+    "main": "./dist/index.js",
+    "module": "./lib/esm/index.js",
+    "types": "./lib/esm/index.d.ts",
+    "license": "Apache-2.0",
+    "private": false,
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "scripts": {
+        "build": "yarn build:esm && yarn build:cjs",
+        "build:esm": "tsc --module esnext --outDir lib/esm --project ./tsconfig.build.json",
+        "build:cjs": "tsc --project ./tsconfig.build.json",
+        "test": "NODE_ENV=test jest"
+    },
+    "dependencies": {
+        "@material-ui/core": "^4.0.0",
+        "@material-ui/icons": "^4.0.0",
+        "classnames": "^2.3.1"
+    },
+    "peerDependencies": {
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1"
+    },
+    "devDependencies": {
+        "@types/react": "^16.9.34",
+        "@types/react-dom": "^16.9.7",
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1"
+    }
+}
diff --git a/packages/plugins/flyte-api/src/Sample/index.tsx b/packages/plugins/flyte-api/src/Sample/index.tsx
new file mode 100644
index 000000000..7be98984d
--- /dev/null
+++ b/packages/plugins/flyte-api/src/Sample/index.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { AppBar, Toolbar, IconButton, makeStyles, Theme } from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  spacer: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+}));
+
+export interface SampleComponentProps {
+  useCustomContent?: boolean; // rename to show that it is a backNavigation
+  className?: string;
+}
+
+/** Contains all content in the top navbar of the application. */
+export const SampleComponent = (props: SampleComponentProps) => {
+  const styles = useStyles();
+
+  return (
+    <AppBar
+      color="secondary"
+      elevation={0}
+      id="navbar"
+      position="fixed"
+      className={props.className as string}
+    >
+      <Toolbar>
+        <div className={styles.spacer} />
+        {' Sample Text '}
+        <div className={styles.spacer} />
+        <IconButton edge="start" className={styles.menuButton} color="inherit" aria-label="menu">
+          <MenuIcon />
+        </IconButton>
+      </Toolbar>
+    </AppBar>
+  );
+};
diff --git a/packages/plugins/flyte-api/src/Sample/sample.stories.tsx b/packages/plugins/flyte-api/src/Sample/sample.stories.tsx
new file mode 100644
index 000000000..12b58a5e6
--- /dev/null
+++ b/packages/plugins/flyte-api/src/Sample/sample.stories.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+import { SampleComponent } from '.';
+
+export default {
+  title: 'Flyte-API/Sample',
+  component: SampleComponent,
+} as ComponentMeta<typeof SampleComponent>;
+
+const useStyles = makeStyles((_theme: Theme) => ({
+  updatedOne: {
+    backgroundColor: 'lightblue',
+    color: 'black',
+  },
+  updatedTwo: {
+    backgroundColor: 'black',
+    color: 'yellow',
+  },
+}));
+
+const Template: ComponentStory<typeof SampleComponent> = () => <SampleComponent />;
+export const Primary = Template.bind({});
+
+export const Secondary: ComponentStory<typeof SampleComponent> = () => {
+  const styles = useStyles();
+  return <SampleComponent className={styles.updatedOne} />;
+};
+
+export const Tertiary: ComponentStory<typeof SampleComponent> = () => {
+  const styles = useStyles();
+  return <SampleComponent className={styles.updatedTwo} />;
+};
diff --git a/packages/plugins/flyte-api/src/Sample/sample.test.tsx b/packages/plugins/flyte-api/src/Sample/sample.test.tsx
new file mode 100644
index 000000000..e6728d223
--- /dev/null
+++ b/packages/plugins/flyte-api/src/Sample/sample.test.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SampleComponent } from './index';
+
+describe('add function', () => {
+  it('SampleComponent is rendered contains correct text', () => {
+    render(<SampleComponent />);
+    const text = screen.getByText('Sample Text');
+    expect(text).toBeInTheDocument();
+  });
+});
diff --git a/packages/plugins/flyte-api/src/index.ts b/packages/plugins/flyte-api/src/index.ts
new file mode 100644
index 000000000..21c680758
--- /dev/null
+++ b/packages/plugins/flyte-api/src/index.ts
@@ -0,0 +1 @@
+export { SampleComponent } from './Sample';
diff --git a/packages/plugins/flyte-api/tsconfig.build.json b/packages/plugins/flyte-api/tsconfig.build.json
new file mode 100644
index 000000000..30f9e4e65
--- /dev/null
+++ b/packages/plugins/flyte-api/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+    "extends": "./tsconfig.json",
+    "exclude": [
+        // files excluded from the build, we can not put it inro default tsconfig
+        // as it will screw VSCode IntelliSence
+        "**/test",
+        "**/mocks",
+        "**/__mocks__",
+        "**/__stories__",
+        "**/*.spec.*",
+        "**/*.test.*",
+        "**/*.mock.*",
+        "**/*.stories.*"
+    ],
+    "references": []
+}
diff --git a/packages/plugins/flyte-api/tsconfig.json b/packages/plugins/flyte-api/tsconfig.json
new file mode 100644
index 000000000..c535f41d8
--- /dev/null
+++ b/packages/plugins/flyte-api/tsconfig.json
@@ -0,0 +1,9 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "./dist"
+    },
+    "references": [],
+    "include": ["src/**/*"]
+}
diff --git a/packages/zapp/console/src/routes/NavBarRouter.tsx b/packages/zapp/console/src/routes/NavBarRouter.tsx
index 76d7f6e5a..4b820e695 100644
--- a/packages/zapp/console/src/routes/NavBarRouter.tsx
+++ b/packages/zapp/console/src/routes/NavBarRouter.tsx
@@ -1,5 +1,4 @@
 import { NavBar } from 'components/Navigation/NavBar';
-// import { NavBar as NewNavBar } from '@flyteconsole/components';
 import * as React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { Routes } from './routes';
@@ -11,7 +10,6 @@ export const NavBarRouter: React.FC<{}> = () => (
   <>
     <Switch>
       <Route path={Routes.ExecutionDetails.path} component={CustomNavBar} />
-      {/* <Route component={NewNavBar} /> */}
       <Route component={NavBar} />
     </Switch>
   </>
diff --git a/packages/zapp/console/tsconfig.build.json b/packages/zapp/console/tsconfig.build.json
index ec0791e92..0276c1861 100644
--- a/packages/zapp/console/tsconfig.build.json
+++ b/packages/zapp/console/tsconfig.build.json
@@ -15,6 +15,7 @@
     "references": [
         { "path": "../../basics/locale/tsconfig.build.json" },
         { "path": "../../composites/ui-atoms/tsconfig.build.json" },
-        { "path": "../../plugins/components/tsconfig.build.json" }
+        { "path": "../../plugins/components/tsconfig.build.json" },
+        { "path": "../../plugins/flyte-api/tsconfig.build.json" }
     ]
 }
diff --git a/packages/zapp/console/tsconfig.json b/packages/zapp/console/tsconfig.json
index e3dfdb756..1ca3ba136 100644
--- a/packages/zapp/console/tsconfig.json
+++ b/packages/zapp/console/tsconfig.json
@@ -20,7 +20,8 @@
     "references": [
         { "path": "../../basics/locale" },
         { "path": "../../composites/ui-atoms" },
-        { "path": "../../plugins/components" }
+        { "path": "../../plugins/components" },
+        { "path": "../../plugins/flyte-api" }
     ],
     "include": ["src/**/*"]
 }
diff --git a/packages/zapp/console/webpack.common.config.ts b/packages/zapp/console/webpack.common.config.ts
index 70e4cf4ff..4b7b1212a 100644
--- a/packages/zapp/console/webpack.common.config.ts
+++ b/packages/zapp/console/webpack.common.config.ts
@@ -3,7 +3,7 @@
 import chalk from 'chalk';
 import * as path from 'path';
 import * as webpack from 'webpack';
-import { processEnv as env, ASSETS_PATH as publicPath, processEnv } from './env';
+import { processEnv as env, ASSETS_PATH as publicPath } from './env';
 
 const { StatsWriterPlugin } = require('webpack-stats-plugin');
 const FavIconWebpackPlugin = require('favicons-webpack-plugin');
@@ -95,6 +95,7 @@ const resolve = {
     '@flyteconsole/locale': path.resolve(__dirname, '../../basics/locale/src'),
     '@flyteconsole/ui-atoms': path.resolve(__dirname, '../../composites/ui-atoms/src'),
     '@flyteconsole/components': path.resolve(__dirname, '../../plugins/components/src'),
+    '@flyteconsole/flyte-api': path.resolve(__dirname, '../../plugins/flyte-api/src'),
   },
 };