diff --git a/.env.dev b/.env.dev
new file mode 100644
index 0000000000000000000000000000000000000000..2ed15c3007c7c2e7df64232fc86d1b892c58f3de
--- /dev/null
+++ b/.env.dev
@@ -0,0 +1 @@
+REDWOOD_ENV_API_URL=https://localhost:8080
diff --git a/.env.example b/.env.example
deleted file mode 100644
index 2a2de6c026ca9d5315dd84ae3eea5088e9fe8784..0000000000000000000000000000000000000000
--- a/.env.example
+++ /dev/null
@@ -1,4 +0,0 @@
-# DATABASE_URL=file:./dev.db
-# TEST_DATABASE_URL=file:./.redwood/test.db
-# PRISMA_HIDE_UPDATE_MESSAGE=true
-# LOG_LEVEL=trace
diff --git a/web/package.json b/web/package.json
index b54fce17e31c383c59712cdc59e2df0b11873da7..4ec5c55b72a71e50d7a29860af6acf4e583c19ff 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,10 +17,12 @@
     "@redwoodjs/forms": "6.5.1",
     "@redwoodjs/router": "6.5.1",
     "@redwoodjs/web": "6.5.1",
+    "axios": "^1.6.7",
     "framer-motion": "^9",
     "prop-types": "15.8.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-query": "^3.39.3"
   },
   "devDependencies": {
     "@chakra-ui/storybook-addon": "^5.1.0",
@@ -29,10 +31,13 @@
     "@types/react-dom": "18.2.15"
   },
   "scripts": {
-    "start": "rw dev",
+    "start_new": "yarn run copy-env && rw dev",
+    "start_aux": "rw",
     "test": "rw test a",
     "test:watch": "rw test --watch",
     "test-coverage": "rw test a --no-watch --collect-coverage",
-    "storybook": "rw storybook"
+    "storybook": "rw storybook",
+    "build-storybook": "rw storybook --build",
+    "copy-env": "node -e 'require(\"./scripts/copy-env\").run(\"dev\")'"
   }
 }
diff --git a/web/public/env.js b/web/public/env.js
new file mode 100644
index 0000000000000000000000000000000000000000..dae11de18343839a36a9d6c0c66119823f6cb33e
--- /dev/null
+++ b/web/public/env.js
@@ -0,0 +1 @@
+window.env = {"REDWOOD_ENV_API_URL":"http://localhost:8080"};
\ No newline at end of file
diff --git a/web/scripts/copy-env.js b/web/scripts/copy-env.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1c276cadaaefc49af89ba2a50354a3037316403
--- /dev/null
+++ b/web/scripts/copy-env.js
@@ -0,0 +1,38 @@
+const fs = require('fs')
+const dotenv = require('dotenv')
+
+const PREFIX = 'window.env = '
+const POSTFIX = ';'
+
+const convertFile = (source, destination) => {
+  const file = fs.readFileSync(source)
+
+  const config = dotenv.parse(file)
+  const configJsonString = JSON.stringify(config)
+  const output = PREFIX + configJsonString + POSTFIX
+
+  fs.writeFile(destination, output, (err) => {
+    if (err) {
+      throw err
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`Converted ${source} to ${destination}`)
+  })
+}
+
+const run = (stage) => {
+  switch (stage) {
+    case 'dev':
+      convertFile('../.env', 'public/env.js')
+      break
+    case 'prod':
+      convertFile('.env.staging', 'public/env.staging.js')
+      convertFile('.env.production', `public/env.${process.env.CIRCLE_SHA1}.js`)
+      break
+    default:
+      console.error('unknown stage', stage)
+  }
+}
+
+module.exports.run = run
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 37c729cf7c2304bc1a9320f53fee043fbf0f393c..170f0c31da1630895d5696100dfb633b4ae3147f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -2,24 +2,27 @@ import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'
 import * as theme from 'config/chakra.config'
 
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
-import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import { DevFatalError } from './pages/fatal-error'
 import Routes from './Routes'
+import { QueryClient, QueryClientProvider } from 'react-query'
 
 const extendedTheme = extendTheme(theme)
 
-const App = () => (
-  <FatalErrorBoundary page={DevFatalError}>
-    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <ColorModeScript />
-      <ChakraProvider theme={extendedTheme}>
-        <RedwoodApolloProvider>
-          <Routes />
-        </RedwoodApolloProvider>
-      </ChakraProvider>
-    </RedwoodProvider>
-  </FatalErrorBoundary>
-)
+const App = () => {
+  const queryClient = new QueryClient()
 
+  return (
+    <FatalErrorBoundary page={DevFatalError}>
+      <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+        <ColorModeScript />
+        <QueryClientProvider client={queryClient}>
+          <ChakraProvider theme={extendedTheme}>
+            <Routes />
+          </ChakraProvider>
+        </QueryClientProvider>
+      </RedwoodProvider>
+    </FatalErrorBoundary>
+  )
+}
 export default App
diff --git a/web/src/pages/Patterns/patterns.tsx b/web/src/pages/Patterns/patterns.tsx
index 8b490a1f31ffce14d28e3a6cd2de043cfac94134..1b019f8e0347efa8e17d591851659af507eb51a0 100644
--- a/web/src/pages/Patterns/patterns.tsx
+++ b/web/src/pages/Patterns/patterns.tsx
@@ -21,10 +21,15 @@ import { FaEdit, FaEye, FaPlus, FaTrash } from 'react-icons/fa'
 import { Link, routes } from '@redwoodjs/router'
 import { patterns } from '.'
 import { Pattern } from 'src/models'
+import { GetPatternsQuery } from './query-builder'
 
 const tableHeaders = ['Titulo', 'Descripcion', '#Implementaciones', '']
 
-export const Patterns = () => {
+export const Patterns: React.FC = () => {
+  const patternsQuery = GetPatternsQuery.useQuery({})
+
+  console.log({ status: patternsQuery.status, data: patternsQuery.data })
+
   return (
     <VStack alignItems="flex-start" spacing="0">
       <Heading as="h2" px="6">
diff --git a/web/src/pages/Patterns/query-builder/get-patterns-query.ts b/web/src/pages/Patterns/query-builder/get-patterns-query.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9604fadb87ea16bc231bf8e6bde79d55cc848008
--- /dev/null
+++ b/web/src/pages/Patterns/query-builder/get-patterns-query.ts
@@ -0,0 +1,27 @@
+import { AxiosError } from 'axios'
+import { useQuery as useRQ, UseQueryOptions } from 'react-query'
+
+import { Pattern } from 'src/models'
+import axiosService from 'src/services/axios-service'
+
+export namespace GetPatternsQuery {
+  export type Params = {}
+
+  export type Response = Pattern[]
+
+  export const key = ['patterns']
+
+  export const getKey = (params: Params) => [...key, params]
+
+  export const queryFn = (_params: Params) =>
+    axiosService.get<Response>(`/pattern/`).then((res) => res.data)
+
+  export const useQuery = <Select = Response>(
+    params: Params,
+    options: UseQueryOptions<Response, AxiosError, Select> = {}
+  ) => {
+    return useRQ(getKey(params), () => queryFn(params), {
+      ...options,
+    })
+  }
+}
diff --git a/web/src/pages/Patterns/query-builder/index.ts b/web/src/pages/Patterns/query-builder/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..249cf9fcf15b7179cc6112df7a166671c51f3dab
--- /dev/null
+++ b/web/src/pages/Patterns/query-builder/index.ts
@@ -0,0 +1 @@
+export * from './get-patterns-query'
diff --git a/web/src/services/axios-service.ts b/web/src/services/axios-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b2a8426be68670d238914ade4440b38cb50f92e
--- /dev/null
+++ b/web/src/services/axios-service.ts
@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+const axiosService = axios.create({
+  baseURL: process.env.REDWOOD_ENV_API_URL || 'https://localhost:8080',
+})
+
+export default axiosService
diff --git a/yarn.lock b/yarn.lock
index 540f92dfb1ba4d2f38d7f732e1145550abae1af6..06ce6d860ffcfe824c925a2997803aa9fa3a61e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1683,6 +1683,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2":
+  version: 7.24.0
+  resolution: "@babel/runtime@npm:7.24.0"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 3495eed727bf4a4f84c35bb51ab53317ae38f4bbc3b1d0a8303751f9dfa0ce6f5fb2afced72b76c3dd0d8bb2ccb84787559a4dee9886291a36b26f02f0f759b4
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.22.15, @babel/template@npm:^7.3.3":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -10200,6 +10209,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.6.7":
+  version: 1.6.7
+  resolution: "axios@npm:1.6.7"
+  dependencies:
+    follow-redirects: ^1.15.4
+    form-data: ^4.0.0
+    proxy-from-env: ^1.1.0
+  checksum: 131bf8e62eee48ca4bd84e6101f211961bf6a21a33b95e5dfb3983d5a2fe50d9fffde0b57668d7ce6f65063d3dc10f2212cbcb554f75cfca99da1c73b210358d
+  languageName: node
+  linkType: hard
+
 "axobject-query@npm:^3.2.1":
   version: 3.2.1
   resolution: "axobject-query@npm:3.2.1"
@@ -10556,7 +10576,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"big-integer@npm:^1.6.44":
+"big-integer@npm:^1.6.16, big-integer@npm:^1.6.44":
   version: 1.6.52
   resolution: "big-integer@npm:1.6.52"
   checksum: 9604224b4c2ab3c43c075d92da15863077a9f59e5d4205f4e7e76acd0cd47e8d469ec5e5dba8d9b32aa233951893b29329ca56ac80c20ce094b4a647a66abae0
@@ -10735,6 +10755,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"broadcast-channel@npm:^3.4.1":
+  version: 3.7.0
+  resolution: "broadcast-channel@npm:3.7.0"
+  dependencies:
+    "@babel/runtime": ^7.7.2
+    detect-node: ^2.1.0
+    js-sha3: 0.8.0
+    microseconds: 0.2.0
+    nano-time: 1.0.0
+    oblivious-set: 1.0.0
+    rimraf: 3.0.2
+    unload: 2.2.0
+  checksum: 95978446f24c685be666f5508a91350bcd4075c08feda929d26c0c678fb24bd421901f19fa8d36cb6f5ed480a334072f3bdce48fa177a8cb29793d88693911cc
+  languageName: node
+  linkType: hard
+
 "brorand@npm:^1.0.1, brorand@npm:^1.1.0":
   version: 1.1.0
   resolution: "brorand@npm:1.1.0"
@@ -12729,7 +12765,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-node@npm:^2.0.4":
+"detect-node@npm:^2.0.4, detect-node@npm:^2.1.0":
   version: 2.1.0
   resolution: "detect-node@npm:2.1.0"
   checksum: f039f601790f2e9d4654e499913259a798b1f5246ae24f86ab5e8bd4aaf3bce50484234c494f11fb00aecb0c6e2733aa7b1cf3f530865640b65fbbd65b2c4e09
@@ -14652,6 +14688,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.15.4":
+  version: 1.15.5
+  resolution: "follow-redirects@npm:1.15.5"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 418d71688ceaf109dfd6f85f747a0c75de30afe43a294caa211def77f02ef19865b547dfb73fde82b751e1cc507c06c754120b848fe5a7400b0a669766df7615
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -17303,6 +17349,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-sha3@npm:0.8.0":
+  version: 0.8.0
+  resolution: "js-sha3@npm:0.8.0"
+  checksum: 43a21dc7967c871bd2c46cb1c2ae97441a97169f324e509f382d43330d8f75cf2c96dba7c806ab08a425765a9c847efdd4bffbac2d99c3a4f3de6c0218f40533
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -18284,6 +18337,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"match-sorter@npm:^6.0.2":
+  version: 6.3.4
+  resolution: "match-sorter@npm:6.3.4"
+  dependencies:
+    "@babel/runtime": ^7.23.8
+    remove-accents: 0.5.0
+  checksum: 35d2a6b6df003c677d9ec87ecd4683657638f5bce856f43f9cf90b03e357ed2f09813ebbac759defa7e7438706936dd34dc2bfe1a18771f7d2541f14d639b4ad
+  languageName: node
+  linkType: hard
+
 "md5.js@npm:^1.3.4":
   version: 1.3.5
   resolution: "md5.js@npm:1.3.5"
@@ -18448,6 +18511,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"microseconds@npm:0.2.0":
+  version: 0.2.0
+  resolution: "microseconds@npm:0.2.0"
+  checksum: 59dfae1c696c0bacd79603c4df7cd0dcc9e091b7c5556aaca9b0832017d3c0b40ad8f57ca25e0ee5709ef1973404448c4a2fea6c9c1fad7d9e197ff5c1c9c2d5
+  languageName: node
+  linkType: hard
+
 "miller-rabin@npm:^4.0.0":
   version: 4.0.1
   resolution: "miller-rabin@npm:4.0.1"
@@ -18880,6 +18950,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nano-time@npm:1.0.0":
+  version: 1.0.0
+  resolution: "nano-time@npm:1.0.0"
+  dependencies:
+    big-integer: ^1.6.16
+  checksum: 3bd12e0bcd30867178afdbe8053b3dde5fdd1c665ecd348bf879863049344fbaf05cbb1d7806a825b91efbca011ee115eee52e76fb38b7da9c97931cd9e61f15
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -19319,6 +19398,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"oblivious-set@npm:1.0.0":
+  version: 1.0.0
+  resolution: "oblivious-set@npm:1.0.0"
+  checksum: ca8640474ea1e1feb3b5c98d42f5649f114ac4513ef84774e724f22fc7e529f1de3e7f26a0d9593097ab8942ca0bb8c241f7c1bd63c3e33047dd49de3aca9805
+  languageName: node
+  linkType: hard
+
 "obuf@npm:^1.0.0, obuf@npm:^1.1.2":
   version: 1.1.2
   resolution: "obuf@npm:1.1.2"
@@ -20579,7 +20665,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proxy-from-env@npm:^1.0.0":
+"proxy-from-env@npm:^1.0.0, proxy-from-env@npm:^1.1.0":
   version: 1.1.0
   resolution: "proxy-from-env@npm:1.1.0"
   checksum: fe7dd8b1bdbbbea18d1459107729c3e4a2243ca870d26d34c2c1bcd3e4425b7bcc5112362df2d93cc7fb9746f6142b5e272fd1cc5c86ddf8580175186f6ad42b
@@ -21017,6 +21103,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-query@npm:^3.39.3":
+  version: 3.39.3
+  resolution: "react-query@npm:3.39.3"
+  dependencies:
+    "@babel/runtime": ^7.5.5
+    broadcast-channel: ^3.4.1
+    match-sorter: ^6.0.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: 319045ef31b9b02aa9b5446169a8c6f95cfe49406466b819cc85e41c29bfe5032d3732577efe56511278db41514772375d416a3e3976e8967c6e0972ff04dd2e
+  languageName: node
+  linkType: hard
+
 "react-refresh@npm:0.14.0, react-refresh@npm:^0.14.0":
   version: 0.14.0
   resolution: "react-refresh@npm:0.14.0"
@@ -21407,6 +21511,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remove-accents@npm:0.5.0":
+  version: 0.5.0
+  resolution: "remove-accents@npm:0.5.0"
+  checksum: a75321aa1b53d9abe82637115a492770bfe42bb38ed258be748bf6795871202bc8b4badff22013494a7029f5a241057ad8d3f72adf67884dbe15a9e37e87adc4
+  languageName: node
+  linkType: hard
+
 "remove-trailing-separator@npm:^1.0.1":
   version: 1.1.0
   resolution: "remove-trailing-separator@npm:1.1.0"
@@ -21670,6 +21781,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rimraf@npm:3.0.2, rimraf@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "rimraf@npm:3.0.2"
+  dependencies:
+    glob: ^7.1.3
+  bin:
+    rimraf: bin.js
+  checksum: 9cb7757acb489bd83757ba1a274ab545eafd75598a9d817e0c3f8b164238dd90eba50d6b848bd4dcc5f3040912e882dc7ba71653e35af660d77b25c381d402e8
+  languageName: node
+  linkType: hard
+
 "rimraf@npm:5.0.5":
   version: 5.0.5
   resolution: "rimraf@npm:5.0.5"
@@ -21692,17 +21814,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "rimraf@npm:3.0.2"
-  dependencies:
-    glob: ^7.1.3
-  bin:
-    rimraf: bin.js
-  checksum: 9cb7757acb489bd83757ba1a274ab545eafd75598a9d817e0c3f8b164238dd90eba50d6b848bd4dcc5f3040912e882dc7ba71653e35af660d77b25c381d402e8
-  languageName: node
-  linkType: hard
-
 "rimraf@npm:~2.6.2":
   version: 2.6.3
   resolution: "rimraf@npm:2.6.3"
@@ -24008,6 +24119,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unload@npm:2.2.0":
+  version: 2.2.0
+  resolution: "unload@npm:2.2.0"
+  dependencies:
+    "@babel/runtime": ^7.6.2
+    detect-node: ^2.0.4
+  checksum: 0a4f86b502e7aa35d39c27373ebeaad4f2b7da793fb3d6308e5337aab541885cfe7b339ea4a1963477bf73fddabd5d69f4f47023dad71224b4b4a25611ef7dd8
+  languageName: node
+  linkType: hard
+
 "unpipe@npm:1.0.0, unpipe@npm:~1.0.0":
   version: 1.0.0
   resolution: "unpipe@npm:1.0.0"
@@ -24523,10 +24644,12 @@ __metadata:
     "@redwoodjs/web": 6.5.1
     "@types/react": 18.2.37
     "@types/react-dom": 18.2.15
+    axios: ^1.6.7
     framer-motion: ^9
     prop-types: 15.8.1
     react: 18.2.0
     react-dom: 18.2.0
+    react-query: ^3.39.3
   languageName: unknown
   linkType: soft