diff --git a/packages/web/src/components/AppFlowRow/index.tsx b/packages/web/src/components/AppFlowRow/index.tsx
index fb60610b..3ffc5a01 100644
--- a/packages/web/src/components/AppFlowRow/index.tsx
+++ b/packages/web/src/components/AppFlowRow/index.tsx
@@ -10,7 +10,6 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import { CardContent, Typography } from './style';
 
 type AppFlowRowProps = {
-  selected?: boolean;
   flow: any;
 }
 
@@ -18,6 +17,7 @@ const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong>
 
 function AppFlowRow(props: AppFlowRowProps) {
   const formatMessage = useFormatMessage();
+  const { flow } = props;
 
   return (
     <>
@@ -26,17 +26,7 @@ function AppFlowRow(props: AppFlowRowProps) {
           <CardContent>
             <Box>
               <Typography variant="h6">
-                A flow
-              </Typography>
-            </Box>
-
-            <Box>
-
-            </Box>
-
-            <Box sx={{ px: 2 }}>
-              <Typography variant="body2">
-                {formatMessage('connection.flowCount', { count: countTranslation(0) })}
+                {flow.name}
               </Typography>
             </Box>
 
diff --git a/packages/web/src/components/AppFlowRow/style.ts b/packages/web/src/components/AppFlowRow/style.ts
index 30f9967b..e3dbd30d 100644
--- a/packages/web/src/components/AppFlowRow/style.ts
+++ b/packages/web/src/components/AppFlowRow/style.ts
@@ -5,7 +5,7 @@ import MuiTypography from '@mui/material/Typography';
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
   display: 'grid',
   gridTemplateRows: 'auto',
-  gridTemplateColumns: '1fr auto auto auto',
+  gridTemplateColumns: '1fr auto',
   gridColumnGap: theme.spacing(2),
   alignItems: 'center',
 }));
diff --git a/packages/web/src/components/AppFlows/index.tsx b/packages/web/src/components/AppFlows/index.tsx
index ebc06cff..b43a2d4c 100644
--- a/packages/web/src/components/AppFlows/index.tsx
+++ b/packages/web/src/components/AppFlows/index.tsx
@@ -1,14 +1,21 @@
+import { useQuery } from '@apollo/client';
+import { GET_FLOWS } from 'graphql/queries/get-flows';
+
 import AppFlowRow from 'components/AppFlowRow';
+import type { Flow } from 'types/flow';
 
 type AppFlowsProps = {
   appKey: String;
 }
 
 export default function AppFlows(props: AppFlowsProps) {
+  const { data } = useQuery(GET_FLOWS);
+  const appFlows: Flow[] = data?.getFlows || [];
+
   return (
     <>
-      {Array.from(new Array(3)).map((item: any, index: number) => (
-        <AppFlowRow key={index} flow={item} />
+      {appFlows.map((appFlow: Flow) => (
+        <AppFlowRow key={appFlow.id} flow={appFlow} />
       ))}
     </>
   )
diff --git a/packages/web/src/graphql/queries/get-flows.ts b/packages/web/src/graphql/queries/get-flows.ts
new file mode 100644
index 00000000..660a209a
--- /dev/null
+++ b/packages/web/src/graphql/queries/get-flows.ts
@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const GET_FLOWS = gql`
+  query GetFlows {
+    getFlows {
+      id
+      name
+    }
+  }
+`;
\ No newline at end of file
diff --git a/packages/web/src/types/flow.ts b/packages/web/src/types/flow.ts
new file mode 100644
index 00000000..9f9fb32d
--- /dev/null
+++ b/packages/web/src/types/flow.ts
@@ -0,0 +1,4 @@
+export type Flow = {
+  id: string;
+  name: string;
+};