diff --git a/.env b/.env
index 3bd7fcaf..a8e7c2c1 100644
--- a/.env
+++ b/.env
@@ -5,7 +5,8 @@ VITE_UNFINISHED_FEATURES=true
 VITE_SENTRY_URL=https://c8aaaee7201f46ca9cd8d16eacc28ee0@o1154841.ingest.sentry.io/6234797
 
 VITE_MAINNET_DEX_BACKEND_URL=https://dex-backend-mainnet.prd.service.aepps.com/
-VITE_TESTNET_DEX_BACKEND_URL=https://dex-backend-testnet.prd.service.aepps.com/
+# VITE_TESTNET_DEX_BACKEND_URL=https://dex-backend-testnet.prd.service.aepps.com/
+VITE_TESTNET_DEX_BACKEND_URL=http://localhost:3000
 
 VITE_DEX_BACKEND_FETCH_TIMEOUT=500           #if skipped or 0 a default value of 2000 will be applied
 VITE_DEX_BACKEND_FETCH_INTERVAL=2000         #if skipped or 0 a default value of 2000 will be applied
diff --git a/package-lock.json b/package-lock.json
index 4932fcd3..fe8e2d70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,8 @@
         "@vueuse/head": "^2.0.0",
         "bignumber.js": "^9.1.2",
         "chart.js": "^4.4.3",
+        "chartjs-adapter-date-fns": "^3.0.0",
+        "date-fns": "^3.6.0",
         "dex-contracts-v2": "github:aeternity/dex-contracts-v2#69f800fece02da1444af7f0d6622fec356a15496",
         "node-polyfill-webpack-plugin": "^3.0.0",
         "vue": "^3.4.19",
@@ -32,6 +34,7 @@
         "@vue/eslint-config-airbnb": "^8.0.0",
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/test-utils": "^2.4.4",
+        "autoprefixer": "^10.4.19",
         "cypress": "^13.6.4",
         "eslint": "^8.2.0",
         "eslint-plugin-cypress": "^2.15.1",
@@ -39,12 +42,14 @@
         "eslint-plugin-vue": "^9.21.1",
         "file-loader": "^6.2.0",
         "jsdom": "^24.0.0",
+        "postcss": "^8.4.38",
         "prettier": "^3.2.5",
         "sass": "^1.70.0",
         "start-server-and-test": "^2.0.3",
         "stylelint": "^16.2.1",
         "stylelint-config-recommended-vue": "^1.5.0",
         "stylelint-config-standard-scss": "^13.0.0",
+        "tailwindcss": "^3.4.4",
         "vite": "^5.1.3",
         "vite-svg-loader": "^5.1.0",
         "vitest": "^1.2.2"
@@ -141,6 +146,18 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@azure/abort-controller": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz",
@@ -1153,7 +1170,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "peer": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -1167,7 +1183,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1176,7 +1191,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1200,7 +1214,6 @@
       "version": "0.3.22",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
       "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
-      "peer": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -2502,6 +2515,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -2847,6 +2866,43 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz",
@@ -3135,9 +3191,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.22.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
-      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -3152,10 +3208,9 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
-        "caniuse-lite": "^1.0.30001580",
-        "electron-to-chromium": "^1.4.648",
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
         "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
@@ -3279,10 +3334,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001587",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
-      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
+      "version": "1.0.30001629",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz",
+      "integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==",
       "funding": [
         {
           "type": "opencollective",
@@ -3296,8 +3360,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "peer": true
+      ]
     },
     "node_modules/canonicalize": {
       "version": "2.0.0",
@@ -3353,6 +3416,15 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs-adapter-date-fns": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
+      "integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
+      "peerDependencies": {
+        "chart.js": ">=2.8.0",
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/check-error": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
@@ -4091,6 +4163,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@@ -4228,6 +4309,12 @@
         "fs": "^0.0.1-security"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/diff-sequences": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
@@ -4264,6 +4351,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -4431,10 +4524,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.667",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.667.tgz",
-      "integrity": "sha512-66L3pLlWhTNVUhnmSA5+qDM3fwnXsM6KAqE36e2w4KN0g6pkEtlT5bs41FQtQwVwKnfhNBXiWRLPs30HSxd7Kw==",
-      "peer": true
+      "version": "1.4.792",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.792.tgz",
+      "integrity": "sha512-rkg5/N3L+Y844JyfgPUyuKK0Hk0efo3JNxUDKvz3HgP6EmN4rNGhr2D8boLsfTV/hGo7ZGAL8djw+jlg99zQyA=="
     },
     "node_modules/elliptic": {
       "version": "6.5.4",
@@ -4759,7 +4851,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
       "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -5994,6 +6085,19 @@
         "node": ">= 0.12"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/from": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
@@ -7237,6 +7341,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.3",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.3.tgz",
+      "integrity": "sha512-uy2bNX5zQ+tESe+TiC7ilGRz8AtRGmnJH55NC5S0nSUjvvvM2hJHmefHErugGXN4pNv4Qx7vLsnNw9qJ9mtIsw==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/joi": {
       "version": "17.12.1",
       "resolved": "https://registry.npmjs.org/joi/-/joi-17.12.1.tgz",
@@ -7591,6 +7704,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -8084,6 +8206,17 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -8222,8 +8355,7 @@
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "peer": true
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/nopt": {
       "version": "7.2.0",
@@ -8249,6 +8381,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -8298,6 +8439,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -8598,16 +8748,16 @@
       "dev": true
     },
     "node_modules/path-scurry": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
-      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dev": true,
       "dependencies": {
-        "lru-cache": "^9.1.1 || ^10.0.0",
+        "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=16 || 14 >=14.18"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -8717,6 +8867,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
@@ -8729,9 +8888,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -8749,7 +8908,7 @@
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -8778,12 +8937,114 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
+      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
     "node_modules/postcss-media-query-parser": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
       "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
       "dev": true
     },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-resolve-nested-selector": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
@@ -9092,6 +9353,15 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz",
@@ -9620,9 +9890,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10372,6 +10642,110 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
+      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/jackspeak": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -10634,6 +11008,43 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -10768,6 +11179,27 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/throttleit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
@@ -10878,6 +11310,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -11133,7 +11571,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -12054,6 +12491,18 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/yaml": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.3.tgz",
+      "integrity": "sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==",
+      "dev": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index da36dce5..02e40e14 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "@vueuse/head": "^2.0.0",
     "bignumber.js": "^9.1.2",
     "chart.js": "^4.4.3",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "date-fns": "^3.6.0",
     "dex-contracts-v2": "github:aeternity/dex-contracts-v2#69f800fece02da1444af7f0d6622fec356a15496",
     "node-polyfill-webpack-plugin": "^3.0.0",
     "vue": "^3.4.19",
@@ -41,6 +43,7 @@
     "@vue/eslint-config-airbnb": "^8.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/test-utils": "^2.4.4",
+    "autoprefixer": "^10.4.19",
     "cypress": "^13.6.4",
     "eslint": "^8.2.0",
     "eslint-plugin-cypress": "^2.15.1",
@@ -48,12 +51,14 @@
     "eslint-plugin-vue": "^9.21.1",
     "file-loader": "^6.2.0",
     "jsdom": "^24.0.0",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "sass": "^1.70.0",
     "start-server-and-test": "^2.0.3",
     "stylelint": "^16.2.1",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^13.0.0",
+    "tailwindcss": "^3.4.4",
     "vite": "^5.1.3",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^1.2.2"
diff --git a/src/App.vue b/src/App.vue
index dae73b04..77425f72 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -93,14 +93,15 @@ export default {
       // TODO
     }
 
-    if (query.address) {
-      await this.$store.dispatch('connectDefaultWallet', query);
-      delete query.address;
-      delete query.networkId;
-      this.$router.replace({ query });
-    } else if (this.wallet && this.address) {
-      await this.$store.dispatch('connectWallet', { info: this.wallet });
-    }
+    // TODO reenable
+    // if (query.address) {
+    //   await this.$store.dispatch('connectDefaultWallet', query);
+    //   delete query.address;
+    //   delete query.networkId;
+    //   this.$router.replace({ query });
+    // } else if (this.wallet && this.address) {
+    //   await this.$store.dispatch('connectWallet', { info: this.wallet });
+    // }
     if (
       this.$isMobile &&
       !query.address &&
diff --git a/src/components/explore/PriceHistoryGraph.vue b/src/components/explore/PriceHistoryGraph.vue
new file mode 100644
index 00000000..df75062b
--- /dev/null
+++ b/src/components/explore/PriceHistoryGraph.vue
@@ -0,0 +1,117 @@
+<template>
+  <Line :data="data" :options="options" />
+  <div class="flex gap-2">
+    <ButtonDefault
+      v-for="time in Object.keys(timeFrames)"
+      :key="time"
+      class="p-6 block"
+      fill="light"
+      @click="changeTimeFrame(time)"
+    >
+      {{ time }}
+    </ButtonDefault>
+  </div>
+</template>
+
+<script>
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale,
+} from 'chart.js';
+import { Line } from 'vue-chartjs';
+import 'chartjs-adapter-date-fns';
+import ButtonDefault from '@/components/ButtonDefault.vue';
+
+const TIME_FRAMES = {
+  '1H': 1,
+  '1D': 24,
+  '1W': 24 * 7,
+  '1M': 24 * 30,
+  '1Y': 24 * 365,
+  MAX: Infinity,
+};
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale,
+  LineElement,
+);
+
+export default {
+  name: 'PriceHistoryGraph',
+  components: {
+    ButtonDefault,
+    Line,
+  },
+  props: {
+    priceData: { type: Array, required: true },
+  },
+  data() {
+    return {
+      selectedTimeFrame: 'MAX',
+      timeFrames: TIME_FRAMES,
+      options: {
+        legend: {
+          labels: {
+            fontColor: 'blue',
+            fontSize: 18,
+          },
+        },
+        responsive: true,
+        scales: {
+          x: {
+            type: 'time',
+          },
+        },
+      },
+    };
+  },
+  computed: {
+    data() {
+      // filter data based on selected time
+      const filteredData = this.priceData.filter(
+        (d) => d.x > Date.now() - 1000 * 60 * 60 * this.timeFrames[this.selectedTimeFrame],
+      );
+
+      return {
+        labels: filteredData.map((d) => Number(d.x)),
+        datasets: [
+          {
+            label: 'Price',
+            data: filteredData.map((d) => d.y),
+            borderColor: 'rgb(0 255 157 / 80%)',
+            fill: false,
+            cubicInterpolationMode: 'monotone',
+            tension: 0.4,
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    changeTimeFrame(newTimeFrame) {
+      this.selectedTimeFrame = newTimeFrame;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.button-default {
+  padding: 5px;
+  border-radius: 25px;
+  width: 50px;
+}
+</style>
diff --git a/src/components/explore/StatElement.vue b/src/components/explore/StatElement.vue
new file mode 100644
index 00000000..ceaace7c
--- /dev/null
+++ b/src/components/explore/StatElement.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-col text-left">
+    <div class="text-xs">{{ title }}</div>
+    <div class="flex flex-row">
+      <div class="text-xl">{{ value }}</div>
+      <div v-if="change" class="text-xs">{{ change }}</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'StatElement',
+  props: {
+    title: { type: String, required: true },
+    value: { type: String, required: true },
+    change: { type: String, required: false, default: null },
+  },
+};
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/explore/StyledGraph.vue b/src/components/explore/StyledGraph.vue
deleted file mode 100644
index 9cca9a07..00000000
--- a/src/components/explore/StyledGraph.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <Bar :data="data" :options="options" />
-</template>
-
-<script>
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-} from 'chart.js';
-import { Bar } from 'vue-chartjs';
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-export default {
-  name: 'App',
-  components: {
-    Bar,
-  },
-  data() {
-    return {
-      data: {
-        labels: ['January', 'February', 'March'],
-        datasets: [{ data: [40, 20, 12] }],
-      },
-      options: {
-        responsive: true,
-      },
-    };
-  },
-};
-</script>
diff --git a/src/components/explore/TransactionTable.vue b/src/components/explore/TransactionTable.vue
new file mode 100644
index 00000000..d227e046
--- /dev/null
+++ b/src/components/explore/TransactionTable.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="relative overflow-x-auto">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      <thead class="text-xs text-gray-700 uppercase">
+        <tr>
+          <th scope="col" class="px-6 py-3"></th>
+          <th scope="col" class="px-6 py-3">USD</th>
+          <th scope="col" class="px-6 py-3">{{ token0?.symbol }} Amount</th>
+          <th scope="col" class="px-6 py-3">{{ token1?.symbol }} Amount</th>
+          <th scope="col" class="px-6 py-3">Account</th>
+          <th scope="col" class="px-6 py-3">Time</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="tx in reversedTransactions"
+          :key="tx.transactionHash"
+          class="border-b border-b-gray-700"
+        >
+          <th
+            scope="row"
+            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+          >
+            <a
+              :href="`${activeNetwork.explorerUrl}/transactions/${tx.transactionHash}`"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ typeToText(tx.type, tx.deltaReserve0, tx.deltaReserve1) }}
+            </a>
+          </th>
+          <td class="px-6 py-4">0</td>
+          <td class="px-6 py-4">
+            {{
+              new BigNumber(tx.deltaReserve0)
+                .div(new BigNumber(10).pow(token0.decimals))
+                .abs()
+                .toFixed(4)
+            }}
+            {{ token0.symbol }}
+          </td>
+          <td class="px-6 py-4">
+            {{
+              new BigNumber(tx.deltaReserve1)
+                .div(new BigNumber(10).pow(token1.decimals))
+                .abs()
+                .toFixed(4)
+            }}
+            {{ token1.symbol }}
+          </td>
+          <td class="px-6 py-4">ak_tbd</td>
+          <td class="px-6 py-4">
+            {{
+              formatDistance(new Date(Number(tx.microBlockTime)), new Date(), { addSuffix: true })
+            }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { formatDistance } from 'date-fns';
+import { mapGetters } from 'vuex';
+import BigNumber from 'bignumber.js';
+
+export default {
+  name: 'TransactionTable',
+  props: {
+    transactions: {
+      type: Array,
+      required: true,
+    },
+    token0: {
+      type: Object,
+      required: true,
+    },
+    token1: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      txs: [
+        {
+          pairAddress: 'ct_2aj54uGyEebTj3zquptVunU1HALzbDDrbrN6LouQgujgJuAsEX',
+          type: 'CreatePair',
+          reserve0: '0',
+          reserve1: '0',
+          deltaReserve0: '0',
+          deltaReserve1: '0',
+          aeUsdPrice: '0.024174',
+          height: 822999,
+          microBlockHash: 'mh_2rxtGPoxFTR7VRcVru9JEL8QzV9qmQ2YJnrb3av64LqMe17aJZ',
+          microBlockTime: '1692892137863',
+          transactionHash: 'th_Qc4JX2M2dUWACdbqStvi1Dtp3QMvvrUyn113xQdj2xaXnupe6',
+          transactionIndex: '0',
+          logIndex: 0,
+        },
+      ],
+    };
+  },
+  computed: {
+    BigNumber() {
+      return BigNumber;
+    },
+    ...mapGetters(['activeNetwork']),
+    reversedTransactions() {
+      return this.transactions.slice().reverse();
+    },
+  },
+  methods: {
+    formatDistance,
+    typeToText(eventType, delta0) {
+      switch (eventType) {
+        case 'CreatePair':
+          return 'Create Pair';
+        case 'PairMint':
+          return 'Add Liquidity';
+        case 'PairBurn':
+          return 'Remove Liquidity';
+        case 'SwapTokens':
+          return `Swap ${delta0 < 0 ? this.token1.symbol : this.token0.symbol} for ${delta0 > 0 ? this.token1.symbol : this.token0.symbol}`;
+        default:
+          return eventType;
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/lib/constants.js b/src/lib/constants.js
index 7225cf66..d6debaf2 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -15,55 +15,56 @@ export const MIN_DEADLINE = 1;
 export const MAX_DEADLINE = 1000;
 
 export const DEFAULT_NETWORKS = [
-  {
-    url: 'https://mainnet.aeternity.io',
-    middlewareUrl: 'https://mainnet.aeternity.io/mdw',
-    explorerUrl: 'https://explorer.aeternity.io',
-    name: 'Mainnet',
-    networkId: 'ae_mainnet',
-    networkName: 'mainnet',
-    factoryAddress: 'ct_2mfj3FoZxnhkSw5RZMcP8BfPoB1QR4QiYGNCdkAvLZ1zfF6paW',
-    routerAddress: 'ct_azbNZ1XrPjXfqBqbAh1ffLNTQ1sbnuUDFvJrXjYz7JQA1saQ3',
-    waeAddress: 'ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa',
-    dexBackendUrl: import.meta.env.VITE_MAINNET_DEX_BACKEND_URL,
-    tokens: [
-      {
-        contract_id: 'ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa',
-        decimals: MAGNITUDE,
-        name: 'AE',
-        symbol: 'AE',
-        is_ae: true,
-      },
-      {
-        contract_id: 'ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa',
-        decimals: MAGNITUDE,
-        name: 'Wrapped AE',
-        symbol: 'WAE',
-        is_ae: false,
-      },
-      {
-        contract_id: 'ct_KeTvHnhU85vuuQMMZocaiYkPL9tkoavDRT3Jsy47LK2YqLHYb',
-        decimals: MAGNITUDE,
-        name: 'WeTrue Token',
-        symbol: 'WTT',
-        is_ae: false,
-      },
-      {
-        contract_id: 'ct_7UfopTwsRuLGFEcsScbYgQ6YnySXuyMxQWhw6fjycnzS5Nyzq',
-        decimals: MAGNITUDE,
-        name: 'AeBox Coin',
-        symbol: 'ABC',
-        is_ae: false,
-      },
-      {
-        contract_id: 'ct_2uny6n3qLA1kgboiK4GBYmmdbQKvCCcgU2VvfrVwLiCc5gPFuP',
-        decimals: MAGNITUDE,
-        name: 'Regenerates Points Token',
-        symbol: 'RPT',
-        is_ae: false,
-      },
-    ],
-  },
+  // TODO reenable
+  // {
+  //   url: 'https://mainnet.aeternity.io',
+  //   middlewareUrl: 'https://mainnet.aeternity.io/mdw',
+  //   explorerUrl: 'https://explorer.aeternity.io',
+  //   name: 'Mainnet',
+  //   networkId: 'ae_mainnet',
+  //   networkName: 'mainnet',
+  //   factoryAddress: 'ct_2mfj3FoZxnhkSw5RZMcP8BfPoB1QR4QiYGNCdkAvLZ1zfF6paW',
+  //   routerAddress: 'ct_azbNZ1XrPjXfqBqbAh1ffLNTQ1sbnuUDFvJrXjYz7JQA1saQ3',
+  //   waeAddress: 'ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa',
+  //   dexBackendUrl: import.meta.env.VITE_MAINNET_DEX_BACKEND_URL,
+  //   tokens: [
+  //     {
+  //       contract_id: 'ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa',
+  //       decimals: MAGNITUDE,
+  //       name: 'AE',
+  //       symbol: 'AE',
+  //       is_ae: true,
+  //     },
+  //     {
+  //       contract_id: 'ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa',
+  //       decimals: MAGNITUDE,
+  //       name: 'Wrapped AE',
+  //       symbol: 'WAE',
+  //       is_ae: false,
+  //     },
+  //     {
+  //       contract_id: 'ct_KeTvHnhU85vuuQMMZocaiYkPL9tkoavDRT3Jsy47LK2YqLHYb',
+  //       decimals: MAGNITUDE,
+  //       name: 'WeTrue Token',
+  //       symbol: 'WTT',
+  //       is_ae: false,
+  //     },
+  //     {
+  //       contract_id: 'ct_7UfopTwsRuLGFEcsScbYgQ6YnySXuyMxQWhw6fjycnzS5Nyzq',
+  //       decimals: MAGNITUDE,
+  //       name: 'AeBox Coin',
+  //       symbol: 'ABC',
+  //       is_ae: false,
+  //     },
+  //     {
+  //       contract_id: 'ct_2uny6n3qLA1kgboiK4GBYmmdbQKvCCcgU2VvfrVwLiCc5gPFuP',
+  //       decimals: MAGNITUDE,
+  //       name: 'Regenerates Points Token',
+  //       symbol: 'RPT',
+  //       is_ae: false,
+  //     },
+  //   ],
+  // },
   {
     url: 'https://testnet.aeternity.io',
     middlewareUrl: 'https://testnet.aeternity.io/mdw',
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 548782ec..4fcd6c00 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -3,6 +3,11 @@ import BigNumber from 'bignumber.js';
 import dexContractsErrorMessages from 'dex-contracts-v2/build/errors';
 import dexUiErrorMessages from '@/lib/errors';
 
+// eslint-disable-next-line no-extend-native,func-names
+BigInt.prototype.toJSON = function () {
+  return this.toString();
+};
+
 const errorMessages = {
   ...dexContractsErrorMessages,
   ...dexUiErrorMessages,
@@ -188,3 +193,6 @@ export const handleCallError = ({ returnType, returnValue }, instance) => {
  */
 export const isDexBackendDisabled =
   import.meta.env.VITE_DISABLE_DEX_BACKEND && JSON.parse(import.meta.env.VITE_DISABLE_DEX_BACKEND);
+
+export const shortenAddress = (address, lengthStart = 6, lengthEnd = 3) =>
+  address ? `${address.slice(0, lengthStart)}...${address.slice(-lengthEnd)}` : '';
diff --git a/src/router/index.js b/src/router/index.js
index f04e8d0d..98af12de 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import AddLiquidity from '../views/AddLiquidity.vue';
 import RemoveLiquidity from '../views/RemoveLiquidity.vue';
 import NotFound from '../views/NotFound.vue';
 import TokenDetailView from '../views/TokenDetailView.vue';
+import PoolDetailView from '../views/PoolDetailView.vue';
 
 const routes = [
   {
@@ -72,7 +73,7 @@ const routes = [
       {
         path: 'pools/:id',
         name: 'pool-detail',
-        component: ExploreView,
+        component: PoolDetailView,
       },
     ],
   },
diff --git a/src/store/modules/dexBackend.js b/src/store/modules/dexBackend.js
index 6e9b091f..7bb1d5be 100644
--- a/src/store/modules/dexBackend.js
+++ b/src/store/modules/dexBackend.js
@@ -118,10 +118,18 @@ export default {
       return up;
     },
 
-    async fetchPairDetails({ getters: { getPairInfo }, dispatch }, { tokenA, tokenB }) {
-      const pair = getPairInfo({ tokenA, tokenB });
-      if (!pair) return null;
-      const resp = await dispatch('safeFetch', { url: `pairs/by-address/${pair.address}` });
+    async fetchPairDetails(
+      { getters: { getPairInfo }, dispatch },
+      { pairAddress, tokenA, tokenB },
+    ) {
+      let pair;
+      if (!pairAddress) {
+        pair = getPairInfo({ tokenA, tokenB });
+        if (!pair) return null;
+      }
+      const resp = await dispatch('safeFetch', {
+        url: `pairs/by-address/${pairAddress || pair.address}`,
+      });
       return (
         resp && {
           ...resp,
@@ -158,5 +166,14 @@ export default {
       commit('setPairs', pairs);
       return pairs;
     },
+
+    async fetchHistory({ dispatch }, options) {
+      const queryString = new URLSearchParams({
+        limit: 100,
+        offset: 0,
+        ...options,
+      }).toString();
+      return dispatch('safeFetch', { url: `history/liquidity?${queryString}` });
+    },
   },
 };
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 87d39fc4..5150adcc 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -2,6 +2,10 @@
 @use './mixins.scss';
 @use './display-utilities.scss';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
   font-family: variables.$font-sans;
   box-sizing: border-box;
diff --git a/src/views/ExploreView.vue b/src/views/ExploreView.vue
index 76deb26d..0a2779c8 100644
--- a/src/views/ExploreView.vue
+++ b/src/views/ExploreView.vue
@@ -5,7 +5,7 @@
 </template>
 <script>
 import { defineComponent } from 'vue';
-import StyledGraph from '@/components/explore/StyledGraph.vue';
+import StyledGraph from '@/components/explore/PriceHistoryGraph.vue';
 
 export default defineComponent({
   components: { StyledGraph },
diff --git a/src/views/PoolDetailView.vue b/src/views/PoolDetailView.vue
new file mode 100644
index 00000000..f6368c8f
--- /dev/null
+++ b/src/views/PoolDetailView.vue
@@ -0,0 +1,189 @@
+<template>
+  <ExploreWrapper>
+    <div class="flex flex-row p-6 items-center">
+      <span v-if="pairId" class="logo"><AddressAvatar :address="pairId" /></span>
+      <h1 class="text-2xl">{{ pair?.token0.symbol }} / {{ pair?.token1.symbol }}</h1>
+    </div>
+    <div class="flex">
+      <div class="flex-1 flex-auto p-6">
+        <PriceHistoryGraph :price-data="graphData" />
+      </div>
+      <div class="flex flex-col flex-auto">
+        <div class="flex flex-row mx-2 gap-2">
+          <ButtonDefault
+            fill="light"
+            @click="$router.push({ name: 'swap', params: { id: pairId } })"
+          >
+            {{ $t('swap') }}
+          </ButtonDefault>
+          <ButtonDefault
+            fill="light"
+            @click="$router.push({ name: 'pool', params: { id: pairId } })"
+          >
+            {{ $t('add-liquidity') }}
+          </ButtonDefault>
+        </div>
+        <div>
+          <StatElement title="TVL" value="" />
+          <StatElement title="Volume (24h)" value="0" />
+          <StatElement title="Fees (24h)" value="0" />
+        </div>
+      </div>
+    </div>
+    <div class="border-2 border-gray-800"></div>
+    <div>
+      <h2 class="text-2xl text-left p-4 pb-0">Transactions</h2>
+      <TransactionTable
+        v-if="pair && history"
+        :transactions="history"
+        :token0="pair?.token0"
+        :token1="pair?.token1"
+      ></TransactionTable>
+    </div>
+
+    <div class="border-2 border-gray-800"></div>
+    <div>
+      <h2 class="text-2xl text-left p-4 pb-0">Pair Information</h2>
+      <div class="flex flex-row gap-12 w-full text-left p-4">
+        <div>
+          <div>Pair Name</div>
+          <div>{{ pair?.token0.symbol }} / {{ pair?.token1.symbol }}</div>
+        </div>
+        <div>
+          <div>Pair Address</div>
+          <div>
+            <a
+              v-if="activeNetwork"
+              class="flex gap-2"
+              :href="`${activeNetwork.explorerUrl}/contracts/${pairId}`"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ shortenAddress(pairId) }}
+              <ExternalLinkIcon aria-hidden="true" />
+              <span class="sr-only">External link</span>
+            </a>
+          </div>
+        </div>
+        <div>
+          <div>{{ pair?.token0?.symbol }} Address</div>
+          <div>
+            <a
+              v-if="activeNetwork"
+              class="flex gap-2"
+              :href="`${activeNetwork.explorerUrl}/contracts/${pair?.token0?.address}`"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ shortenAddress(pair?.token0?.address) }}
+              <ExternalLinkIcon aria-hidden="true" />
+              <span class="sr-only">External link</span>
+            </a>
+          </div>
+        </div>
+        <div>
+          <div>{{ pair?.token1?.symbol }} Address</div>
+          <div>
+            <a
+              v-if="activeNetwork"
+              class="flex gap-2"
+              :href="`${activeNetwork.explorerUrl}/contracts/${pair?.token1?.address}`"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ shortenAddress(pair?.token1?.address) }}
+              <ExternalLinkIcon aria-hidden="true" />
+              <span class="sr-only">External link</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ExploreWrapper>
+</template>
+<script>
+import { defineComponent } from 'vue';
+import ExploreWrapper from '@/components/explore/ExploreWrapper.vue';
+import AddressAvatar from '@/components/AddressAvatar.vue';
+import PriceHistoryGraph from '@/components/explore/PriceHistoryGraph.vue';
+import ButtonDefault from '@/components/ButtonDefault.vue';
+import StatElement from '@/components/explore/StatElement.vue';
+import { shortenAddress } from '@/lib/utils';
+import { mapGetters } from 'vuex';
+import ExternalLinkIcon from '@/assets/external-link.svg';
+import TransactionTable from '@/components/explore/TransactionTable.vue';
+
+export default defineComponent({
+  components: {
+    TransactionTable,
+    ExternalLinkIcon,
+    StatElement,
+    ButtonDefault,
+    PriceHistoryGraph,
+    AddressAvatar,
+    ExploreWrapper,
+  },
+  data() {
+    return {
+      pairId: null,
+      pair: null,
+      history: [],
+      graphData: [],
+    };
+  },
+  computed: {
+    ...mapGetters(['activeNetwork']),
+  },
+  async mounted() {
+    // extract param from URL
+    this.pairId = this.$route.params.id;
+
+    // Fetch pair info
+    this.pair = await this.$store.dispatch('backend/fetchPairDetails', {
+      pairAddress: this.pairId,
+    });
+
+    // Fetch pair price history
+    this.history = await this.$store.dispatch('backend/fetchHistory', {
+      pairAddress: this.pairId,
+    });
+    this.graphData = this.history
+      .map((h) => ({
+        x: h.microBlockTime,
+        y: h.reserve0 / h.reserve1,
+      }))
+      .filter((h) => h.y > 0);
+  },
+  methods: { shortenAddress },
+});
+</script>
+<style lang="scss" scoped>
+.logo {
+  margin-right: 10px;
+  img {
+    width: 45px;
+    height: 45px;
+  }
+}
+.header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: 20px;
+  h1 {
+    font-size: 24px;
+    font-weight: 500;
+  }
+}
+.button-default {
+  margin-top: 20px;
+  padding: 16px;
+  font-size: 20px;
+  width: 100%;
+}
+svg {
+  width: 18px;
+  height: 18px;
+  margin-top: 3px;
+}
+</style>
diff --git a/src/views/TokenDetailView.vue b/src/views/TokenDetailView.vue
index 2438cfc4..19b88abd 100644
--- a/src/views/TokenDetailView.vue
+++ b/src/views/TokenDetailView.vue
@@ -1,9 +1,9 @@
 <template>
   <ExploreWrapper>
     <div>BREADCRUMB</div>
-    <div>
-      <span>LOGO</span>
-      AE / Aeternity
+    <div class="header">
+      <span v-if="tokenId" class="logo"><AddressAvatar :address="tokenId" /></span>
+      <h1>{{ metaInfo?.symbol }} / {{ metaInfo?.name }}</h1>
     </div>
     <!-- Graph that shows price over time -->
     <!-- Stats -->
@@ -14,12 +14,44 @@
 <script>
 import { defineComponent } from 'vue';
 import ExploreWrapper from '@/components/explore/ExploreWrapper.vue';
+import AddressAvatar from '@/components/AddressAvatar.vue';
 
 export default defineComponent({
-  components: { ExploreWrapper },
-  mounted() {
-    // Fetch data
+  components: { AddressAvatar, ExploreWrapper },
+  data() {
+    return {
+      tokenId: null,
+      metaInfo: null,
+    };
+  },
+  async mounted() {
+    // extract param from URL
+    this.tokenId = this.$route.params.id;
+
+    // Fetch token meta info
+    const token = await this.$store.dispatch('aeternity/getTokenInstanceMetaInfo', this.tokenId);
+    this.metaInfo = token.decodedResult;
+
+    // Fetch token price history
   },
 });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.logo {
+  margin-right: 10px;
+  img {
+    width: 45px;
+    height: 45px;
+  }
+}
+.header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: 20px;
+  h1 {
+    font-size: 24px;
+    font-weight: 500;
+  }
+}
+</style>