diff --git a/eventmesh-dashboard/.gitignore b/eventmesh-dashboard/.gitignore
index d423e860ee..8453b69998 100644
--- a/eventmesh-dashboard/.gitignore
+++ b/eventmesh-dashboard/.gitignore
@@ -124,3 +124,9 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# VS code settings
+.vscode
+
+# Yarn lock
+yarn.lock
\ No newline at end of file
diff --git a/eventmesh-dashboard/components/Sidebar.tsx b/eventmesh-dashboard/components/Sidebar.tsx
deleted file mode 100644
index dd75092763..0000000000
--- a/eventmesh-dashboard/components/Sidebar.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/jsx-props-no-spreading */
-import React, { ReactNode } from 'react';
-import {
-  IconButton,
-  Box,
-  CloseButton,
-  Flex,
-  Icon,
-  useColorModeValue,
-  Link,
-  Drawer,
-  DrawerContent,
-  Text,
-  useDisclosure,
-  BoxProps,
-  FlexProps,
-} from '@chakra-ui/react';
-import {
-  FiList,
-  FiGrid,
-  FiServer,
-  FiDatabase,
-  FiMenu,
-} from 'react-icons/fi';
-import { IconType } from 'react-icons';
-
-interface LinkItemProps {
-  name: string;
-  icon: IconType;
-  href: string;
-}
-
-const LinkItems: Array<LinkItemProps> = [
-  { name: 'Overview', icon: FiList, href: '/' },
-  { name: 'Metrics', icon: FiMenu, href: '/metrics' },
-  { name: 'Registry', icon: FiDatabase, href: '/registry' },
-  { name: 'TCP Client', icon: FiServer, href: '/tcp' },
-  { name: 'HTTP Client', icon: FiServer, href: '/http' },
-  { name: 'gRPC Client', icon: FiServer, href: '/grpc' },
-  { name: 'Topic', icon: FiGrid, href: '/topic' },
-  { name: 'Event', icon: FiDatabase, href: '/event' },
-];
-
-interface NavItemProps extends FlexProps {
-  icon: IconType;
-  href: string;
-  children: string | number;
-}
-
-const NavItem = ({
-  icon, href, children, ...rest
-}: NavItemProps) => (
-  <Link
-    href={href}
-    style={{ textDecoration: 'none' }}
-    _focus={{ boxShadow: 'none' }}
-  >
-    <Flex
-      align="center"
-      p="4"
-      mx="4"
-      borderRadius="lg"
-      role="group"
-      cursor="pointer"
-      _hover={{
-        bg: 'blue.500',
-        color: 'white',
-      }}
-      {...rest}
-    >
-      {icon && (
-      <Icon
-        mr="4"
-        fontSize="16"
-        _groupHover={{
-          color: 'white',
-        }}
-        as={icon}
-      />
-      )}
-      {children}
-    </Flex>
-  </Link>
-);
-
-interface SidebarProps extends BoxProps {
-  onClose: () => void;
-}
-
-const SidebarContent = ({ onClose, ...rest }: SidebarProps) => (
-  <Box
-    bg={useColorModeValue('white', 'gray.900')}
-    borderRight="1px"
-    borderRightColor={useColorModeValue('gray.200', 'gray.700')}
-    w={{ base: 'full', md: 60 }}
-    pos="fixed"
-    h="full"
-    {...rest}
-  >
-    <Flex h="20" alignItems="center" mx="8" justifyContent="space-between">
-      <Text fontSize="2xl" fontWeight="bold">
-        EventMesh
-      </Text>
-      <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
-    </Flex>
-    {LinkItems.map((link) => (
-      <NavItem key={link.name} href={link.href} icon={link.icon}>
-        {link.name}
-      </NavItem>
-    ))}
-  </Box>
-);
-
-interface MobileProps extends FlexProps {
-  onOpen: () => void;
-}
-
-const MobileNav = ({ onOpen }: MobileProps) => (
-  <Flex
-    ml={{ base: 0, md: 60 }}
-    px={{ base: 4, md: 24 }}
-    height="20"
-    alignItems="center"
-    bg={useColorModeValue('white', 'gray.900')}
-    borderBottomWidth="1px"
-    borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
-    justifyContent="flex-start"
-    display={{ base: 'flex', md: 'none' }}
-  >
-    <IconButton
-      variant="outline"
-      onClick={onOpen}
-      aria-label="open menu"
-      icon={<FiMenu />}
-    />
-
-    <Text fontSize="2xl" ml="8" fontWeight="bold">
-      EventMesh
-    </Text>
-  </Flex>
-);
-
-const Sidebar = ({ children }: { children: ReactNode }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  return (
-    <Box minH="100vh" bg={useColorModeValue('gray.100', 'gray.900')}>
-      <SidebarContent
-        onClose={() => onClose}
-        display={{ base: 'none', md: 'block' }}
-      />
-      <Drawer
-        autoFocus={false}
-        isOpen={isOpen}
-        placement="left"
-        onClose={onClose}
-        returnFocusOnClose={false}
-        onOverlayClick={onClose}
-        size="full"
-      >
-        <DrawerContent>
-          <SidebarContent onClose={onClose} />
-        </DrawerContent>
-      </Drawer>
-
-      <MobileNav onOpen={onOpen} />
-      <Box ml={{ base: 0, md: 60 }} p="4">
-        {children}
-      </Box>
-    </Box>
-  );
-};
-
-export default Sidebar;
diff --git a/eventmesh-dashboard/components/navigation/MenuItem.tsx b/eventmesh-dashboard/components/navigation/MenuItem.tsx
new file mode 100644
index 0000000000..1ed3f9b554
--- /dev/null
+++ b/eventmesh-dashboard/components/navigation/MenuItem.tsx
@@ -0,0 +1,98 @@
+import React, { FC, ReactNode } from 'react';
+import {
+  Flex, FlexProps, Link, Text,
+} from '@chakra-ui/react';
+
+interface MenuItemProps extends FlexProps {
+  key: string;
+  selected: boolean;
+  active: boolean;
+  href: string;
+  children: string | number;
+  setActiveName: (name: string) => void;
+}
+
+export const MenuItem = ({
+  selected,
+  active,
+  href,
+  children,
+  setActiveName,
+}: MenuItemProps) => (
+  <Link
+    position="relative"
+    href={href}
+    h="8"
+    mt={1.5}
+    mb={1.5}
+    ml={3}
+    mr={3}
+    boxSizing="border-box"
+    style={{ textDecoration: 'none' }}
+    _focus={{ boxShadow: 'none' }}
+    onMouseOver={() => setActiveName(children.toString())}
+    onMouseOut={() => setActiveName('')}
+  >
+    <Flex
+      position="absolute"
+      zIndex={2}
+      w="full"
+      h="full"
+      p="6"
+      borderRadius="lg"
+      align="center"
+      role="group"
+      cursor="pointer"
+      fontSize="md"
+      transition="color 0.15s, background-color 0.15s"
+      color={selected || active ? '#2a62ad' : 'current'}
+      fontWeight={selected ? 'bolder' : 'none'}
+      bgColor={selected || active ? '#dce5fe' : 'none'}
+      wordBreak="break-word"
+      overflowWrap="normal"
+    >
+      {children}
+    </Flex>
+    {/* <Box
+      position="absolute"
+      zIndex={1}
+      p={selected || active ? '4' : 0}
+      borderRadius="lg"
+      role="group"
+      cursor="pointer"
+      transition="width 0.3s, opacity 0.4s"
+      bgGradient="linear(28deg,#2a4cad, #2a6bad, #28c9ff)"
+      h="100%"
+      w={selected || active ? '100%' : '0'}
+      opacity={selected || active ? 1 : 0}
+    /> */}
+  </Link>
+);
+
+export const MenuGroupItem: FC<{ name: string; children: ReactNode }> = (
+  props,
+) => {
+  const { name, children } = props;
+  return (
+    <Flex
+      flexDirection="column"
+      w="full"
+      justifyContent="center"
+      alignContent="center"
+    >
+      {name && (
+        <Text
+          mt={5}
+          mb="2"
+          pl="6"
+          fontSize="xs"
+          color="#a2b5d8"
+          fontWeight="bold"
+        >
+          {name.toUpperCase()}
+        </Text>
+      )}
+      {children}
+    </Flex>
+  );
+};
diff --git a/eventmesh-dashboard/components/navigation/Menus.tsx b/eventmesh-dashboard/components/navigation/Menus.tsx
new file mode 100644
index 0000000000..4df43c0118
--- /dev/null
+++ b/eventmesh-dashboard/components/navigation/Menus.tsx
@@ -0,0 +1,160 @@
+import React, { FC, ReactNode, useState } from 'react';
+import {
+  Box,
+  BoxProps,
+  Button,
+  Flex,
+  useColorModeValue,
+  Image,
+} from '@chakra-ui/react';
+import { IconType } from 'react-icons';
+import { ArrowBackIcon } from '@chakra-ui/icons';
+
+import { useRouter } from 'next/router';
+
+import {
+  FiList, FiGrid, FiServer, FiDatabase, FiMenu,
+} from 'react-icons/fi';
+import LogoImg from '../../static/images/logo.png';
+import { MenuItem, MenuGroupItem } from './MenuItem';
+
+const Menus: Array<{
+  group?: string;
+  name: string;
+  icon: IconType;
+  href: string;
+  subPath?:string[]
+}> = [
+  { name: 'Overview', icon: FiList, href: '/' },
+  { name: 'Metrics', icon: FiMenu, href: '/metrics' },
+  { name: 'Registry', icon: FiDatabase, href: '/registry' },
+  { name: 'Topic', icon: FiGrid, href: '/topic' },
+  { name: 'Event', icon: FiDatabase, href: '/event' },
+  {
+    group: 'Workflow',
+    name: 'Workflows',
+    icon: FiServer,
+    href: '/workflows',
+    subPath: ['/workflows/create'],
+  },
+  {
+    group: 'Workflow',
+    name: 'Event Catalogs',
+    icon: FiServer,
+    href: '/eventCatalogs',
+  },
+  {
+    group: 'Clients',
+    name: 'TCP',
+    icon: FiServer,
+    href: '/tcp',
+  },
+  {
+    group: 'Clients',
+    name: 'HTTP',
+    icon: FiServer,
+    href: '/http',
+  },
+  {
+    group: 'Clients',
+    name: 'gRPC',
+    icon: FiServer,
+    href: '/grpc',
+  },
+];
+
+interface MenuProps extends BoxProps {
+  onClose: () => void;
+}
+interface IGroupItem {
+  name?: string;
+  children: ReactNode[];
+}
+
+const NavMenu: FC<MenuProps> = ({ display = {}, onClose }) => {
+  const router = useRouter();
+  const [curMenu, setCurMenu] = useState('');
+  const curRoute = router.pathname;
+
+  const MenuByGroup = Menus.reduce<{
+    [groupName: string]: IGroupItem;
+  }>(
+    (groupItems, item) => {
+      const {
+        group, name, href, subPath,
+      } = item;
+      const menuItem = (
+        <MenuItem
+          key={`menu_item_${name}`}
+          selected={curRoute === href || (subPath?.includes(curRoute) ?? false)}
+          active={curMenu === group}
+          href={href}
+          setActiveName={(selectedName:string) => setCurMenu(selectedName)}
+        >
+          {name}
+        </MenuItem>
+      );
+
+      if (!group) {
+        groupItems.topMenu.children.push(menuItem);
+        return groupItems;
+      }
+
+      if (!groupItems[group]) {
+        groupItems[group] = { name: group, children: [] };
+      }
+      groupItems[group].children.push(menuItem);
+
+      return groupItems;
+    },
+    { topMenu: { children: [] } },
+  );
+
+  return (
+    <Box
+      display={display}
+      pos="fixed"
+      w={{ base: 'full', md: 60 }}
+      borderRight="1px"
+      borderRightColor={useColorModeValue('gray.200', 'gray.700')}
+      h="full"
+      bg={useColorModeValue('white', 'gray.900')}
+      boxShadow="base"
+    >
+      <Flex
+        mt={{ base: 5, md: 10 }}
+        mb={{ base: 5, md: 10 }}
+        alignItems={{ base: 'space-between', md: 'center' }}
+        justifyContent={{ base: 'space-between', md: 'center' }}
+        w={{ base: 'full' }}
+      >
+        <Image
+          display={{ base: 'none', md: 'block' }}
+          w={100}
+          src={LogoImg.src}
+          alt="Dan Abramov"
+        />
+        <Button
+          display={{ base: 'block', md: 'none' }}
+          w={{ base: 'full' }}
+          size="lg"
+          textAlign="left"
+          onClick={onClose}
+        >
+          <ArrowBackIcon mr={2} />
+          Back
+        </Button>
+      </Flex>
+
+      <Flex flexDirection="column" alignItems="center">
+        {Object.entries(MenuByGroup).map((groupItem) => (
+          <MenuGroupItem key={`group_item_${groupItem[1].name}`} name={groupItem[1].name ?? ''}>
+            {groupItem[1].children}
+          </MenuGroupItem>
+        ))}
+      </Flex>
+    </Box>
+  );
+};
+
+export default NavMenu;
diff --git a/eventmesh-dashboard/components/navigation/MenusMobile.tsx b/eventmesh-dashboard/components/navigation/MenusMobile.tsx
new file mode 100644
index 0000000000..be083b9804
--- /dev/null
+++ b/eventmesh-dashboard/components/navigation/MenusMobile.tsx
@@ -0,0 +1,39 @@
+import {
+  IconButton,
+  Flex,
+  useColorModeValue,
+  Text,
+  FlexProps,
+} from '@chakra-ui/react';
+import { FiMenu } from 'react-icons/fi';
+
+interface MobileProps extends FlexProps {
+  onOpen: () => void;
+}
+
+const MobileNav = ({ onOpen }: MobileProps) => (
+  <Flex
+    ml={{ base: 0, md: 60 }}
+    px={{ base: 4, md: 24 }}
+    height="20"
+    alignItems="center"
+    bg={useColorModeValue('white', 'gray.900')}
+    borderBottomWidth="1px"
+    borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
+    justifyContent="flex-start"
+    display={{ base: 'flex', md: 'none' }}
+  >
+    <IconButton
+      variant="outline"
+      onClick={onOpen}
+      aria-label="open menu"
+      icon={<FiMenu />}
+    />
+
+    <Text fontSize="2xl" ml="8" fontWeight="bold">
+      EventMesh
+    </Text>
+  </Flex>
+);
+
+export default MobileNav;
diff --git a/eventmesh-dashboard/components/navigation/Sidebar.tsx b/eventmesh-dashboard/components/navigation/Sidebar.tsx
new file mode 100644
index 0000000000..e8e349b23b
--- /dev/null
+++ b/eventmesh-dashboard/components/navigation/Sidebar.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { FC, ReactNode } from 'react';
+import {
+  Box,
+  useColorModeValue,
+  Drawer,
+  DrawerContent,
+  useDisclosure,
+} from '@chakra-ui/react';
+import Menus from './Menus';
+import MenusMobile from './MenusMobile';
+
+const Sidebar: FC<{ children: ReactNode }> = ({ children }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <Box minH="100vh" bg={useColorModeValue('gray.100', 'gray.900')}>
+        <Menus
+          display={{ base: 'none', md: 'block' }}
+          onClose={() => onClose}
+        />
+        <MenusMobile onOpen={onOpen} />
+        <Box ml={{ base: 0, md: 60 }} p="4">
+          {children}
+        </Box>
+      </Box>
+      <Drawer
+        autoFocus={false}
+        isOpen={isOpen}
+        placement="left"
+        onClose={onClose}
+        returnFocusOnClose={false}
+        onOverlayClick={onClose}
+        size="full"
+      >
+        <DrawerContent>
+          <Menus onClose={onClose} />
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default Sidebar;
diff --git a/eventmesh-dashboard/package.json b/eventmesh-dashboard/package.json
index 8617a49e93..6d8ae58caa 100644
--- a/eventmesh-dashboard/package.json
+++ b/eventmesh-dashboard/package.json
@@ -9,10 +9,12 @@
     "lint": "eslint . --cache --fix --ext .ts,.tsx"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.15",
     "@chakra-ui/react": "^2.1.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@fontsource/inter": "^4.5.10",
+    "@monaco-editor/react": "^4.4.6",
     "axios": "^0.27.2",
     "cloudevents": "^6.0.2",
     "framer-motion": "^6.3.6",
diff --git a/eventmesh-dashboard/pages/_app.tsx b/eventmesh-dashboard/pages/_app.tsx
index a8dda2f86f..6095173752 100644
--- a/eventmesh-dashboard/pages/_app.tsx
+++ b/eventmesh-dashboard/pages/_app.tsx
@@ -21,7 +21,7 @@
 import '@fontsource/inter';
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import type { AppProps } from 'next/app';
-import Sidebar from '../components/Sidebar';
+import Sidebar from '../components/navigation/Sidebar';
 import { AppProvider } from '../context/context';
 
 const theme = extendTheme({
diff --git a/eventmesh-dashboard/pages/workflows/create.tsx b/eventmesh-dashboard/pages/workflows/create.tsx
new file mode 100644
index 0000000000..41ed21bf7b
--- /dev/null
+++ b/eventmesh-dashboard/pages/workflows/create.tsx
@@ -0,0 +1,93 @@
+import React, { useRef } from 'react';
+import Head from 'next/head';
+import type { NextPage } from 'next';
+
+import {
+  Stack,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Grid,
+  GridItem,
+  FormControl,
+  FormLabel,
+  Input,
+  Button,
+  Textarea,
+} from '@chakra-ui/react';
+
+import Editor from '@monaco-editor/react';
+import { useRouter } from 'next/router';
+
+const Workflows: NextPage = () => {
+  const editorRef = useRef(null);
+  const router = useRouter();
+
+  const handleEditorDidMount = (editor: any) => {
+    // here is the editor instance
+    // you can store it in `useRef` for further usage
+    console.log('hhh');
+    editorRef.current = editor;
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Create Workflow | Apache EventMesh Dashboard</title>
+      </Head>
+      <Breadcrumb mb={2}>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/workflows">Workflows</BreadcrumbLink>
+        </BreadcrumbItem>
+
+        <BreadcrumbItem>
+          <BreadcrumbLink>Create</BreadcrumbLink>
+        </BreadcrumbItem>
+      </Breadcrumb>
+      <Grid
+        w="full"
+        h="calc(100vh - 56px)"
+        bg="white"
+        borderWidth="1px"
+        borderRadius="md"
+        p="6"
+        templateColumns="320px 1fr"
+        gap={6}
+      >
+        <GridItem h="full" display="flex">
+          <Stack w="full" direction="column">
+            <FormControl isRequired>
+              <FormLabel>Workflow name</FormLabel>
+              <Input placeholder="Please input" />
+            </FormControl>
+
+            <FormControl mt={5}>
+              <FormLabel>Description</FormLabel>
+              <Textarea minH={240} placeholder="Optional" />
+            </FormControl>
+            <Stack
+              direction="row"
+              spacing={2}
+              h="full"
+              pb="2"
+              alignItems="flex-end"
+            >
+              <Button colorScheme="blue">Save</Button>
+              <Button variant="outline" onClick={() => router.push('/workflows')}>Cancel</Button>
+            </Stack>
+          </Stack>
+        </GridItem>
+        <GridItem h="full" bgColor="blackAlpha.50">
+          <Editor
+            height="100%"
+            defaultLanguage="yaml"
+            defaultValue="# Compose your workflow here"
+            onMount={handleEditorDidMount}
+            theme="vs-dark"
+          />
+        </GridItem>
+      </Grid>
+    </>
+  );
+};
+export default Workflows;
diff --git a/eventmesh-dashboard/pages/workflows/details.tsx b/eventmesh-dashboard/pages/workflows/details.tsx
new file mode 100644
index 0000000000..383ce15ca8
--- /dev/null
+++ b/eventmesh-dashboard/pages/workflows/details.tsx
@@ -0,0 +1,93 @@
+import React, { useRef } from 'react';
+import Head from 'next/head';
+import type { NextPage } from 'next';
+
+import {
+  Stack,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Grid,
+  GridItem,
+  FormControl,
+  FormLabel,
+  Input,
+  Button,
+  Textarea,
+} from '@chakra-ui/react';
+
+import Editor from '@monaco-editor/react';
+import { useRouter } from 'next/router';
+
+const Workflows: NextPage = () => {
+  const router = useRouter();
+  const editorRef = useRef(null);
+
+  const handleEditorDidMount = (editor: any) => {
+    // here is the editor instance
+    // you can store it in `useRef` for further usage
+    console.log('hhh');
+    editorRef.current = editor;
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Create Workflow | Apache EventMesh Dashboard</title>
+      </Head>
+      <Breadcrumb mb={2}>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/workflows">Workflows</BreadcrumbLink>
+        </BreadcrumbItem>
+
+        <BreadcrumbItem>
+          <BreadcrumbLink>Create</BreadcrumbLink>
+        </BreadcrumbItem>
+      </Breadcrumb>
+      <Grid
+        w="full"
+        h="calc(100vh - 56px)"
+        bg="white"
+        borderWidth="1px"
+        borderRadius="md"
+        p="6"
+        templateColumns="320px 1fr"
+        gap={6}
+      >
+        <GridItem h="full" display="flex">
+          <Stack w="full" direction="column">
+            <FormControl isRequired>
+              <FormLabel>Workflow name</FormLabel>
+              <Input placeholder="Please input" />
+            </FormControl>
+
+            <FormControl mt={5}>
+              <FormLabel>Description</FormLabel>
+              <Textarea minH={240} placeholder="Optional" />
+            </FormControl>
+            <Stack
+              direction="row"
+              spacing={2}
+              h="full"
+              pb="2"
+              alignItems="flex-end"
+            >
+              <Button colorScheme="blue">Save</Button>
+              <Button variant="outline">Cancel</Button>
+            </Stack>
+          </Stack>
+        </GridItem>
+        <GridItem h="full" bgColor="blackAlpha.50">
+          <Editor
+            height="100%"
+            defaultLanguage="yaml"
+            defaultValue="# Compose your workflow here"
+            onMount={handleEditorDidMount}
+            theme="vs-dark"
+          />
+        </GridItem>
+      </Grid>
+    </>
+  );
+};
+export default Workflows;
diff --git a/eventmesh-dashboard/pages/workflows/index.ts b/eventmesh-dashboard/pages/workflows/index.ts
new file mode 100644
index 0000000000..65c2a28315
--- /dev/null
+++ b/eventmesh-dashboard/pages/workflows/index.ts
@@ -0,0 +1,3 @@
+import Workflow from './workflows';
+
+export default Workflow;
diff --git a/eventmesh-dashboard/pages/workflows/workflows.tsx b/eventmesh-dashboard/pages/workflows/workflows.tsx
new file mode 100644
index 0000000000..8e3ee54846
--- /dev/null
+++ b/eventmesh-dashboard/pages/workflows/workflows.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import Head from 'next/head';
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+
+import {
+  Divider,
+  Button,
+  Flex,
+  Input,
+  Stack,
+  Select,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+} from '@chakra-ui/react';
+
+const Workflows: NextPage = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      <Head>
+        <title>Workflows | Apache EventMesh Dashboard</title>
+      </Head>
+      <Flex
+        w="full"
+        h="full"
+        bg="white"
+        flexDirection="column"
+        borderWidth="1px"
+        borderRadius="md"
+        overflow="hidden"
+        p="6"
+      >
+        <Flex w="full" justifyContent="space-between" mt="2" mb="2">
+          <Button
+            size="md"
+            backgroundColor="#2a62ad"
+            color="white"
+            _hover={{ bg: '#dce5fe', color: '#2a62ad' }}
+            onClick={() => router.push('/workflows/create')}
+          >
+            Create Wokrflow
+          </Button>
+          <Stack direction="row" spacing="2">
+            <Input size="md" placeholder="Workflow name" />
+            <Select size="md" placeholder="Status">
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+              <option value="option3">Option 3</option>
+              <option value="option3">Option 3</option>
+            </Select>
+            <Button size="md" w="60" colorScheme="blue" variant="outline">
+              Refresh
+            </Button>
+          </Stack>
+        </Flex>
+        <Divider mt="15" mb="15" orientation="horizontal" />
+        <TableContainer>
+          <Table variant="simple" size="sm">
+            <Thead>
+              <Tr>
+                <Th>Name</Th>
+                <Th>Created At</Th>
+                <Th>Status</Th>
+                <Th>Logs</Th>
+                <Th isNumeric>Total Instance</Th>
+                <Th isNumeric>Running</Th>
+                <Th isNumeric>Failed</Th>
+                <Th isNumeric>Timeout</Th>
+                <Th isNumeric>Aborted</Th>
+                <Th>Actions</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              <Tr>
+                <Td>
+                  <Button size="sm" colorScheme="blue" variant="ghost">
+                    HelloWorld
+                  </Button>
+                </Td>
+                <Td>2022-12-1 12:10:12</Td>
+                <Td>Active</Td>
+                <Td>On</Td>
+                <Td isNumeric>3</Td>
+                <Td isNumeric>1</Td>
+                <Td isNumeric>1</Td>
+                <Td isNumeric>0</Td>
+                <Td isNumeric>1</Td>
+                <Td>
+                  <Button size="sm" colorScheme="blue" variant="ghost">
+                    Execute
+                  </Button>
+                  <Button size="sm" colorScheme="blue" variant="ghost">
+                    Edit
+                  </Button>
+                  <Button size="sm" colorScheme="blue" variant="ghost">
+                    Delete
+                  </Button>
+                </Td>
+              </Tr>
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Flex>
+    </>
+  );
+};
+
+export default Workflows;
diff --git a/eventmesh-dashboard/static/images/logo.png b/eventmesh-dashboard/static/images/logo.png
new file mode 100644
index 0000000000..e8545510d1
Binary files /dev/null and b/eventmesh-dashboard/static/images/logo.png differ