diff --git a/packages/frontend/.env b/packages/frontend/.env
index f2dda9ed6..641a67225 100644
--- a/packages/frontend/.env
+++ b/packages/frontend/.env
@@ -1,2 +1,13 @@
 NEXT_PUBLIC_API_URL=https://testnet.platform-explorer.pshenmic.dev
 NEXT_PUBLIC_BASE_URL=https://testnet.platform-explorer.com
+
+NEXT_PUBLIC_MAINNET_BASE_URL=https://platform-explorer.com
+NEXT_PUBLIC_TESTNET_BASE_URL=https://testnet.platform-explorer.com
+
+NEXT_PUBLIC_MAINNET_INSIGHT_URL=https://insight.dash.org/insight
+NEXT_PUBLIC_TESTNET_INSIGHT_URL=http://insight.testnet.networks.dash.org/insight
+
+NEXT_PUBLIC_MAINNET_PLATFORM_EXPLORER_DATA_CONTRACT_IDENTITY=''
+NEXT_PUBLIC_TESTNET_PLATFORM_EXPLORER_DATA_CONTRACT_IDENTITY=49GmYeGAk9s6nnuFLJd1KXVKoXtsvA7WdGacGHDAMbLJ
+
+NEXT_PUBLIC_VOTING_DATA_CONTRACT_ID=GWRSAVFMjXx8HpQFaNJMqBV7MBgMK4br5UESsB4S31Ec
\ No newline at end of file
diff --git a/packages/frontend/src/app/Providers.js b/packages/frontend/src/app/Providers.js
deleted file mode 100644
index 5d222ad4d..000000000
--- a/packages/frontend/src/app/Providers.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client'
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { NuqsAdapter } from 'nuqs/adapters/next/app'
-
-const queryClient = new QueryClient()
-
-export const Providers = ({ children }) => {
-  return (
-    <NuqsAdapter>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </NuqsAdapter>
-  )
-}
diff --git a/packages/frontend/src/app/block/[hash]/Block.js b/packages/frontend/src/app/block/[hash]/Block.js
index b32112dc8..e2827bb00 100644
--- a/packages/frontend/src/app/block/[hash]/Block.js
+++ b/packages/frontend/src/app/block/[hash]/Block.js
@@ -10,8 +10,9 @@ import { Container, Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/r
 import { BlockDigestCard, BlockTotalCard, QuorumMembersList } from '../../../components/blocks'
 import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { networks } from '../../../constants/networks'
 import { QuorumInfo } from '../../../components/blocks/quorum'
+import { useActiveNetwork } from 'src/contexts'
+
 import './Block.scss'
 
 const tabs = [
@@ -28,9 +29,7 @@ function Block ({ hash }) {
   const [rate, setRate] = useState({ data: {}, loading: true, error: false })
   const [status, setStatus] = useState({ data: {}, loading: true, error: false })
   const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 ? tabs.indexOf(defaultTabName.toLowerCase()) : 0)
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
-  const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl)
-  const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null
+  const { l1explorerBaseUrl } = useActiveNetwork()
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
diff --git a/packages/frontend/src/app/dataContracts/DataContracts.js b/packages/frontend/src/app/dataContracts/DataContracts.js
index 6265f6e36..512f9965b 100644
--- a/packages/frontend/src/app/dataContracts/DataContracts.js
+++ b/packages/frontend/src/app/dataContracts/DataContracts.js
@@ -8,6 +8,7 @@ import PageSizeSelector from '../../components/pageSizeSelector/PageSizeSelector
 import { useQuery } from '@tanstack/react-query'
 import { useQueryState, parseAsInteger } from 'nuqs'
 import { normalizePagination } from '@utils/table'
+
 import {
   Container,
   Heading,
diff --git a/packages/frontend/src/app/layout.js b/packages/frontend/src/app/layout.js
index 429ce0179..ab924f20a 100644
--- a/packages/frontend/src/app/layout.js
+++ b/packages/frontend/src/app/layout.js
@@ -1,5 +1,13 @@
 import RootComponent from '../components/layout/RootComponent'
-import { Providers } from './Providers'
+import {
+  Montserrat,
+  Open_Sans as OpenSans,
+  Roboto_Mono as RobotoMono
+} from 'next/font/google'
+
+const montserrat = Montserrat({ subsets: ['latin'], variable: '--font-montserrat' })
+const openSans = OpenSans({ subsets: ['latin'], variable: '--font-open-sans' })
+const robotoMono = RobotoMono({ subsets: ['latin'], variable: '--font-roboto-mono' })
 
 export const viewport = {
   width: 'device-width',
@@ -13,11 +21,10 @@ export default function RootLayout ({ children }) {
       lang='en'
       data-theme='dark'
       style={{ colorScheme: 'dark' }}
-    >
+      className={`${montserrat.variable} ${robotoMono.variable} ${openSans.variable}`}
+      >
       <body className={'chakra-ui-dark'}>
-        <Providers>
-          <RootComponent>{children}</RootComponent>
-        </Providers>
+        <RootComponent>{children}</RootComponent>
       </body>
     </html>
   )
diff --git a/packages/frontend/src/app/transaction/[hash]/components/PayoutAddress.js b/packages/frontend/src/app/transaction/[hash]/components/PayoutAddress.js
index dbf1d63d4..b008af8ea 100644
--- a/packages/frontend/src/app/transaction/[hash]/components/PayoutAddress.js
+++ b/packages/frontend/src/app/transaction/[hash]/components/PayoutAddress.js
@@ -3,18 +3,14 @@ import { ValueCard } from '@components/cards'
 import { useEffect, useState } from 'react'
 import * as Api from '@utils/Api'
 import { fetchHandlerSuccess, fetchHandlerError } from '@utils'
-import { networks } from '../../../../constants/networks'
 import { ValueContainer } from '@components/ui/containers'
+import { useActiveNetwork } from 'src/contexts'
 
 import styles from './PayoutAddress.module.scss'
 
-const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
-const activeNetwork = networks.find(
-  (network) => network.explorerBaseUrl === baseUrl
-)
-const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null
-
 export const PayoutAddress = ({ outputScript, loading, identity }) => {
+  const { l1explorerBaseUrl } = useActiveNetwork()
+
   const [validator, setValidator] = useState({
     data: {},
     loading: true,
diff --git a/packages/frontend/src/app/transaction/[hash]/components/Transaction.js b/packages/frontend/src/app/transaction/[hash]/components/Transaction.js
index 3352aa354..63c874634 100644
--- a/packages/frontend/src/app/transaction/[hash]/components/Transaction.js
+++ b/packages/frontend/src/app/transaction/[hash]/components/Transaction.js
@@ -21,20 +21,15 @@ import {
   TransactionStatusBadge
 } from '../../../../components/transactions'
 import { ErrorMessageBlock } from '../../../../components/Errors'
-import { networks } from '../../../../constants/networks'
 import { useBreadcrumbs } from '../../../../contexts/BreadcrumbsContext'
 import { useDecodedSTQuery, useRateQuery, useTransactionQuery } from './hooks'
 import { useParams } from 'next/navigation'
+import { useActiveNetwork } from 'src/contexts'
 
 import './transaction.scss'
 
-const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
-const activeNetwork = networks.find(
-  (network) => network.explorerBaseUrl === baseUrl
-)
-const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null
-
 export const Transaction = () => {
+  const { l1explorerBaseUrl } = useActiveNetwork()
   const { hash } = useParams()
   const { setBreadcrumbs } = useBreadcrumbs()
   const transaction = useTransactionQuery()
diff --git a/packages/frontend/src/app/transaction/[hash]/components/TransactionType/AssetLockProof.js b/packages/frontend/src/app/transaction/[hash]/components/TransactionType/AssetLockProof.js
index 9d8a3e305..050804f67 100644
--- a/packages/frontend/src/app/transaction/[hash]/components/TransactionType/AssetLockProof.js
+++ b/packages/frontend/src/app/transaction/[hash]/components/TransactionType/AssetLockProof.js
@@ -1,19 +1,16 @@
-import { networks } from '../../../../../constants/networks'
 import { CopyButton } from '../../../../../components/ui/Buttons'
 import { InfoLine, Identifier } from '@components/data'
 import { ValueCard } from '@components/cards'
 import { ValueContainer } from '@components/ui/containers'
-
-const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
-const activeNetwork = networks.find(
-  (network) => network.explorerBaseUrl === baseUrl
-)
-const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null
+import { useActiveNetwork } from 'src/contexts'
 
 export const AssetLockProof = ({
   assetLockProof: { fundingCoreTx, instantLock },
   loading
-}) => (
+}) => {
+  const { l1explorerBaseUrl } = useActiveNetwork()
+
+  return (
   <>
     {instantLock && (
       <InfoLine
@@ -60,4 +57,5 @@ export const AssetLockProof = ({
       />
     )}
   </>
-)
+  )
+}
diff --git a/packages/frontend/src/app/transaction/[hash]/components/TransactionType/TokenConfiguration/DistType.module.scss b/packages/frontend/src/app/transaction/[hash]/components/TransactionType/TokenConfiguration/DistType.module.scss
index 07e444b9e..8c5c7fa52 100644
--- a/packages/frontend/src/app/transaction/[hash]/components/TransactionType/TokenConfiguration/DistType.module.scss
+++ b/packages/frontend/src/app/transaction/[hash]/components/TransactionType/TokenConfiguration/DistType.module.scss
@@ -17,7 +17,7 @@
     .container {
       width: fit-content;
       padding: 6px 10px;
-      background-color: #2e393d;
+      background-color: var(--chakra-colors-gray-800);
 
       .title {
         font-family: $font-mono;
diff --git a/packages/frontend/src/app/validator/[hash]/Validator.js b/packages/frontend/src/app/validator/[hash]/Validator.js
index 2f0b39c49..ae0b90c86 100644
--- a/packages/frontend/src/app/validator/[hash]/Validator.js
+++ b/packages/frontend/src/app/validator/[hash]/Validator.js
@@ -17,7 +17,6 @@ import { HorisontalSeparator } from '../../../components/ui/separators'
 import { ValidatorCard } from '../../../components/validators'
 import { CircleIcon } from '../../../components/ui/icons'
 import { RateTooltip } from '../../../components/ui/Tooltips'
-import { networks } from '../../../constants/networks'
 import { WithdrawalsList } from '../../../components/transfers'
 import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext'
 import { defaultChartConfig } from '../../../components/charts/config'
@@ -25,6 +24,8 @@ import {
   Badge,
   Tabs, TabList, TabPanels, Tab, TabPanel
 } from '@chakra-ui/react'
+import { useActiveNetwork } from 'src/contexts'
+
 import './ValidatorPage.scss'
 
 function Validator ({ hash }) {
@@ -37,9 +38,7 @@ function Validator ({ hash }) {
   const [transactions, setTransactions] = useState({ data: {}, props: { currentPage: 0 }, loading: true, error: false })
   const [withdrawals, setWithdrawals] = useState({ data: {}, props: { currentPage: 0 }, loading: true, error: false })
   const [activeChartTab, setActiveChartTab] = useState(0)
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
-  const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl)
-  const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null
+  const { l1explorerBaseUrl } = useActiveNetwork()
   const [timespan, setTimespan] = useState(defaultChartConfig.timespan.values[defaultChartConfig.timespan.defaultIndex])
 
   useEffect(() => {
diff --git a/packages/frontend/src/components/blocks/BlocksListItem.js b/packages/frontend/src/components/blocks/BlocksListItem.js
index 339cd8741..b97329775 100644
--- a/packages/frontend/src/components/blocks/BlocksListItem.js
+++ b/packages/frontend/src/components/blocks/BlocksListItem.js
@@ -6,6 +6,7 @@ import { Badge, Grid, GridItem } from '@chakra-ui/react'
 import { BlockIcon } from '../ui/icons'
 import { LinkContainer } from '../ui/containers'
 import { useRouter } from 'next/navigation'
+
 import './BlocksListItem.scss'
 
 function BlocksListItem ({ block, absoluteDate }) {
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/DataContractModal.js b/packages/frontend/src/components/dataContracts/DataContractModal/DataContractModal.js
new file mode 100644
index 000000000..b126a677d
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/DataContractModal.js
@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+import { FORM_MODE_ENUM } from './constants'
+import { NameScreen } from './NameScreen'
+import { InitialScreen } from './InitialScreen'
+import { KeywordsScreen } from './KeywordsScreen'
+import { Modal } from '@components/ui/Modal'
+
+const MODE_PROPS = {
+  [FORM_MODE_ENUM.INITIAL]: {
+    title: 'Edit Data Contract Information',
+    Content: InitialScreen
+  },
+  [FORM_MODE_ENUM.NAME_EDIT]: {
+    title: 'Edit Data Contract Name',
+    Content: NameScreen
+  },
+  [FORM_MODE_ENUM.KEYWORDS_EDIT]: {
+    title: 'Edit Data Contract Description and Keywords',
+    Content: KeywordsScreen
+  }
+}
+
+export const DataContractModal = ({ isOpen, ...props }) => {
+  const [mode, setMode] = useState(FORM_MODE_ENUM.INITIAL)
+  const { title, Content } = MODE_PROPS[mode]
+
+  useEffect(() => {
+    setMode(FORM_MODE_ENUM.INITIAL)
+  }, [isOpen])
+
+  return (
+    <Modal title={title}>
+      <Content
+        setMode={setMode}
+        {...props}
+      />
+    </Modal>
+  )
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/InitialScreen.js b/packages/frontend/src/components/dataContracts/DataContractModal/InitialScreen.js
new file mode 100644
index 000000000..fce0c590e
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/InitialScreen.js
@@ -0,0 +1,41 @@
+import { SignatureIcon, DocumentIcon } from '@components/ui/icons'
+import { FORM_MODE_ENUM } from './constants'
+
+import styles from './InitialScreen.module.scss'
+
+export const InitialScreen = ({ setMode }) => (
+  <div className={styles.root}>
+    <span className={styles.description}>
+      Select what information you would like to edit. You can change Data
+      Contract Name or Description with Keywords. Notice you can only change the
+      name once every 15 minutes
+    </span>
+
+    <div className={styles.controls}>
+      <button
+        className={styles.card}
+        onClick={() => setMode(FORM_MODE_ENUM.NAME_EDIT)}
+      >
+        <SignatureIcon
+          w='48px'
+          h='34px'
+        />
+        <span className={styles.name}>
+          Edit Data Contract <strong className={styles.mark}>Name</strong>
+        </span>
+      </button>
+      <button
+        className={styles.card}
+        onClick={() => setMode(FORM_MODE_ENUM.KEYWORDS_EDIT)}
+      >
+        <DocumentIcon
+          h='26px'
+          w='33px'
+        />
+        <span className={styles.name}>
+          Edit <strong className={styles.mark}>Description and Keywords</strong>
+        </span>
+      </button>
+    </div>
+  </div>
+)
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/InitialScreen.module.scss b/packages/frontend/src/components/dataContracts/DataContractModal/InitialScreen.module.scss
new file mode 100644
index 000000000..1749f99e8
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/InitialScreen.module.scss
@@ -0,0 +1,52 @@
+@import 'variables';
+
+.root {
+  .description {
+    font-family: $font-mono;
+    color: var(--chakra-colors-gray-250);
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 110%;
+  }
+
+  .controls {
+    margin-top: 24px;
+    display: flex;
+    gap: 12px;
+
+    .card {
+      max-width: 294px;
+      width: 100%;
+      height: 125px;
+      background-color: var(--chakra-colors-gray-800);
+      border-radius: 24px;
+      border: #2e393d80 solid 1px;
+      padding: 24px 24px 27px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      transition: background-color ease-in .2;
+
+      &:hover {
+        background-color: var(--chakra-colors-gray-700);
+      }
+
+      &:active {
+        background-color: var(--chakra-colors-gray-600);
+      }
+
+      .name {
+        width: fit-content;
+        font-family: $font-mono;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 130%;
+
+        .mark {
+          font-weight: 400;
+          color: $color-brand-normal;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/KeywordsScreen.js b/packages/frontend/src/components/dataContracts/DataContractModal/KeywordsScreen.js
new file mode 100644
index 000000000..9f531d58a
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/KeywordsScreen.js
@@ -0,0 +1,131 @@
+import { Divider, Input, Textarea, FormControl } from '@chakra-ui/react'
+import { useId, useState } from 'react'
+import { cva } from 'class-variance-authority'
+
+import styles from './KeywordsScreen.module.scss'
+
+const button = cva([styles.btn])
+
+export const KeywordsScreen = ({ onChangeDescription }) => {
+  const [form, setForm] = useState({ description: '', keywords: '' })
+  const [errors, setErrors] = useState({ keywords: null })
+  const id = useId()
+
+  const validateKeywords = (value) => {
+    if (!value.trim()) {
+      return null
+    }
+
+    const keywordsRegex = /^[a-zA-Zа-яА-Я0-9]+(\s*,\s*[a-zA-Zа-яА-Я0-9]+)*$/
+
+    if (!keywordsRegex.test(value)) {
+      return 'Please enter words separated by commas only'
+    }
+
+    const keywordsArray = value.split(',').map(item => item.trim())
+    if (keywordsArray.some(item => item === '')) {
+      return 'Please remove empty entries between commas'
+    }
+
+    return null
+  }
+
+  const handleKeywordsChange = (value) => {
+    setForm((prev) => ({ ...prev, keywords: value }))
+
+    const error = validateKeywords(value)
+    setErrors((prev) => ({ ...prev, keywords: error }))
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+
+    const keywordsError = validateKeywords(form.keywords)
+
+    if (keywordsError) {
+      setErrors((prev) => ({ ...prev, keywords: keywordsError }))
+      return
+    }
+
+    const keywordsArray = form.keywords
+      .split(',')
+      .map(item => item.trim())
+      .filter(item => item.length > 0)
+
+    const formData = {
+      description: form.description,
+      keywords: keywordsArray
+    }
+
+    onChangeDescription(formData)
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.divider}>
+        <Divider />
+      </div>
+      <form
+        id='data-contract-keywords-form'
+        className={styles.form}
+        onSubmit={handleSubmit}
+      >
+        <div className={styles.field}>
+          <label
+            className={styles.label}
+            htmlFor={`${id}-description`}
+          >
+            Description:
+          </label>
+
+          <Textarea
+            className={styles.input}
+            placeholder='Enter Description...'
+            id={`${id}-description`}
+            value={form.description}
+            onChange={(e) =>
+              setForm((prev) => ({ ...prev, description: e.target.value }))
+            }
+            resize='none'
+            rows={4}
+          />
+        </div>
+        <div className={styles.field}>
+          <label
+            className={styles.label}
+            htmlFor={`${id}-keywords`}
+          >
+            Keywords:
+          </label>
+          <FormControl className={styles.input} isInvalid={!!errors.keywords}>
+            <Input
+              placeholder='Enter Keywords Separated With Comma...'
+              id={`${id}-keywords`}
+              value={form.keywords}
+              onChange={(e) => handleKeywordsChange(e.target.value)}
+              onBlur={() => {
+                const error = validateKeywords(form.keywords)
+                setErrors((prev) => ({ ...prev, keywords: error }))
+              }}
+            />
+          </FormControl>
+        </div>
+      </form>
+      <div className={styles.controls}>
+        <button
+          className={button({ className: styles.cancel })}
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          className={button({ className: styles.submit })}
+          form='data-contract-keywords-form'
+          type="submit"
+        >
+          Submit Changes
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/KeywordsScreen.module.scss b/packages/frontend/src/components/dataContracts/DataContractModal/KeywordsScreen.module.scss
new file mode 100644
index 000000000..f5b0a5d6e
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/KeywordsScreen.module.scss
@@ -0,0 +1,76 @@
+@import 'variables';
+
+.root {
+  max-width: 648px;
+  width: 100%;
+
+  .divider {
+    padding: 20px 0;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin-top: 14px;
+
+    .field {
+      display: flex;
+      align-items: center;
+
+      .label {
+        font-family: $font-mono;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 110%;
+        flex: 1;
+        color: var(--chakra-colors-gray-250);
+      }
+
+      .input {
+        max-width: 396px;
+      }
+    }
+  }
+
+  .controls {
+    margin-top: 24px;
+    margin-bottom: 6px;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+
+    .btn {
+      max-width: 294px;
+      width: 100%;
+      border-radius: $border-radius-def;
+      padding: 12px;
+      transition: all ease-in 0.2;
+
+      &.cancel {
+        background-color: rgba(var(--chakra-colors-gray-250-rgb), 0.1);
+
+        &:hover {
+          background-color: rgba(var(--chakra-colors-gray-250-rgb), 0.3);
+        }
+
+        &:active {
+          background-color: rgba(var(--chakra-colors-gray-250-rgb), 0.5);
+        }
+      }
+
+      &.submit {
+        background-color: $color-brand-normal;
+
+        &:hover {
+          background-color: $color-brand-light;
+        }
+
+        &:active {
+          background-color: var(--chakra-colors-gray-50);
+          color: $color-brand-normal;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/NameScreen.js b/packages/frontend/src/components/dataContracts/DataContractModal/NameScreen.js
new file mode 100644
index 000000000..44a399c39
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/NameScreen.js
@@ -0,0 +1,51 @@
+import { Divider, Input } from '@chakra-ui/react'
+import { useState } from 'react'
+import { cva } from 'class-variance-authority'
+
+import styles from './NameScreen.module.scss'
+
+const button = cva([styles.btn])
+
+export const NameScreen = ({ onChangeName }) => {
+  const [form, setForm] = useState({ name: '' })
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.divider}>
+        <Divider />
+      </div>
+      <form
+        className={styles.form}
+        id='data-contract-name-form'
+        onSubmit={(e) => {
+          e.preventDefault()
+          onChangeName(form)
+        }}
+      >
+        <label
+          className={styles.label}
+          wallet='data-contract-name'
+        >
+          Data Contract Name:
+        </label>
+        <Input
+          placeholder='Enter Name...'
+          id='data-contract-name'
+          value={form.name}
+          className={styles.input}
+          onChange={(e) => setForm({ name: e.target.value })}
+        />
+      </form>
+      <div className={styles.controls}>
+        <button className={button({ className: styles.cancel })}>Cancel</button>
+        <button
+          type='submit'
+          className={button({ className: styles.submit })}
+          form='data-contract-name-form'
+        >
+          Submit Changes
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/NameScreen.module.scss b/packages/frontend/src/components/dataContracts/DataContractModal/NameScreen.module.scss
new file mode 100644
index 000000000..aa4692733
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/NameScreen.module.scss
@@ -0,0 +1,70 @@
+@import 'variables';
+
+.root {
+  max-width: 648px;
+  width: 100%;
+
+  .divider {
+    padding: 20px 0;
+  }
+
+  .form {
+    display: flex;
+    align-items: baseline;
+    margin-top: 14px;
+
+    .label {
+      font-family: $font-mono;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 110%;
+      flex: 1;
+      color: var(--chakra-colors-gray-250);
+    }
+
+    .input {
+      max-width: 396px;
+    }
+  }
+
+  .controls {
+    margin-top: 24px;
+    margin-bottom: 6px;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+
+    .btn {
+      max-width: 294px;
+      width: 100%;
+      border-radius: $border-radius-def;
+      padding: 12px;
+      transition: all ease-in .2;
+
+      &.cancel {
+        background-color: rgba(var(--chakra-colors-gray-250-rgb), 0.1);
+
+        &:hover {
+          background-color: rgba(var(--chakra-colors-gray-250-rgb), 0.3);
+        }
+
+        &:active {
+          background-color: rgba(var(--chakra-colors-gray-250-rgb), 0.5);
+        }
+      }
+
+      &.submit {
+        background-color: $color-brand-normal;
+
+        &:hover {
+          background-color: $color-brand-light;
+        }
+
+        &:active {
+          background-color: var(--chakra-colors-gray-50);
+          color: $color-brand-normal;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/constants.js b/packages/frontend/src/components/dataContracts/DataContractModal/constants.js
new file mode 100644
index 000000000..71bd02de5
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/constants.js
@@ -0,0 +1,5 @@
+export const FORM_MODE_ENUM = {
+  INITIAL: 'INITIAL',
+  NAME_EDIT: 'NAME_EDIT',
+  KEYWORDS_EDIT: 'KEYWORDS_EDIT'
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/index.js b/packages/frontend/src/components/dataContracts/DataContractModal/index.js
new file mode 100644
index 000000000..b4fb76d97
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/index.js
@@ -0,0 +1 @@
+export * from './DataContractModal'
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/useDataContractUpdate.js b/packages/frontend/src/components/dataContracts/DataContractModal/useDataContractUpdate.js
new file mode 100644
index 000000000..d7b4e3088
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/useDataContractUpdate.js
@@ -0,0 +1,110 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { useActiveNetwork, useWallet } from 'src/contexts'
+
+const DOCUMENT_TYPE = 'dataContracts'
+
+export const useDataContractUpdate = ({
+  owner,
+  defaultName,
+  dataContractId
+}) => {
+  const sdk = window.dashPlatformSDK
+  const signer = window.dashPlatformExtension.signer
+  const { connectWallet, connected } = useWallet()
+  const [isDisabled, setDisabled] = useState(true)
+  const { dataContractPE } = useActiveNetwork()
+  const queryClient = useQueryClient()
+
+  const handleChangeName = async (name) => {
+    if (!connected.current) {
+      await connectWallet()
+    }
+
+    try {
+      const dataContractsFields = {
+        name,
+        identifier: dataContractId
+      }
+
+      const document = await sdk.documents.create(
+        dataContractPE,
+        DOCUMENT_TYPE,
+        dataContractsFields,
+        owner
+      )
+      const nonce = await sdk.identities.getIdentityContractNonce(
+        owner,
+        dataContractPE
+      )
+      const params = { identityContractNonce: nonce + 1n }
+
+      const stateTransition = await sdk.documents.createStateTransition(
+        document,
+        'create',
+        params
+      )
+      await signer.signAndBroadcast(stateTransition)
+
+      await new Promise(resolve => setTimeout(resolve, 2000))
+
+      queryClient.invalidateQueries({
+        queryKey: ['dataContract']
+      })
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  const handleChangeDescription = async ({ description, keywords }) => {
+    if (!connected.current) {
+      await connectWallet()
+    }
+
+    try {
+      const dataContract = await sdk.dataContracts.getDataContractByIdentifier(
+        dataContractId
+      )
+      const nonce = await sdk.identities.getIdentityContractNonce(
+        owner,
+        dataContractId
+      )
+
+      dataContract.keywords = keywords
+      dataContract.description = description
+      dataContract.version = dataContract.version + 1
+
+      const stateTransition = await sdk.dataContracts.createStateTransition(dataContract, 'update', nonce + 1n)
+
+      await signer.signAndBroadcast(stateTransition)
+
+      await new Promise(resolve => setTimeout(resolve, 2000))
+
+      queryClient.invalidateQueries({
+        queryKey: ['dataContract']
+      })
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  useEffect(() => {
+    const validate = ({ identities }) => {
+      const validIdentity = identities.find(
+        ({ identifier }) => identifier === owner
+      )
+
+      const isDisabledEdit =
+        defaultName && validIdentity !== -1 && dataContractId !== dataContractPE
+
+      setDisabled(isDisabledEdit)
+    }
+    connectWallet(validate)
+  }, [])
+
+  return {
+    handleChangeName,
+    handleChangeDescription,
+    isDisabled
+  }
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractModal/useEditValidation.js b/packages/frontend/src/components/dataContracts/DataContractModal/useEditValidation.js
new file mode 100644
index 000000000..bdf87c43e
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractModal/useEditValidation.js
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import { checkPlatformExtension, ExtensionStatusEnum } from '../../../util/extension'
+
+export const EditControlState = {
+  INIT_INVALID: 'INIT_INVALID',
+  USER_HAS_NO_EXTENSION: 'USER_HAS_NO_EXTENSION',
+  USER_HAS_NO_WALLET: 'USER_HAS_NO_WALLET',
+  VALID: 'VALID'
+}
+
+export const useEditValidation = ({ wallet }) => {
+  const isExtensionConnected = checkPlatformExtension() === ExtensionStatusEnum.CONNECTED
+
+  const [editValidateState, setEditValidate] = useState(EditControlState.INIT_INVALID)
+
+  useEffect(() => {
+    if (editValidateState === EditControlState.INIT_INVALID) {
+      return
+    }
+
+    if (editValidateState === EditControlState.USER_HAS_NO_EXTENSION) {
+      return
+    }
+
+    if (editValidateState === EditControlState.USER_HAS_NO_WALLET) {
+      return null
+    }
+  }, [wallet.currentIdentity, editValidateState, wallet?.walletInfo?.identities])
+
+  useEffect(() => {
+    if (!isExtensionConnected) {
+      setEditValidate(EditControlState.USER_HAS_NO_EXTENSION)
+
+      return
+    }
+
+    if (!wallet.connected.current) {
+      setEditValidate(EditControlState.USER_HAS_NO_WALLET)
+      wallet.connectWallet()
+
+      return
+    }
+
+    setEditValidate(EditControlState.VALID)
+  }, [wallet, isExtensionConnected])
+
+  return { editValidateState, isEditVisible: editValidateState === EditControlState.VALID }
+}
diff --git a/packages/frontend/src/components/dataContracts/DataContractTitle.js b/packages/frontend/src/components/dataContracts/DataContractTitle.js
new file mode 100644
index 000000000..d76ba2667
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractTitle.js
@@ -0,0 +1,72 @@
+import { useModal } from '@components/ui/Modal'
+import { DataContractModal } from './DataContractModal'
+import { useDataContractUpdate } from './DataContractModal/useDataContractUpdate'
+
+const withTitle = (Content) => {
+  const Title = (props) => {
+    const { dataContract } = props
+
+    if (!dataContract?.name) {
+      return null
+    }
+    return (
+      <div className='DataContractTotalCard__TitleContainer'>
+        <div className={'DataContractTotalCard__Title'}>
+          {dataContract.name}
+        </div>
+        <Content {...props} />
+      </div>
+    )
+  }
+
+  return Title
+}
+
+export const DataContractTitle = withTitle(({ dataContract }) => {
+  const { isOpen, handleOpen, handleClose } = useModal()
+
+  const { handleChangeName, handleChangeDescription, isDisabled } =
+    useDataContractUpdate({
+      owner: dataContract.owner.identifier,
+      dataContractId: dataContract.identifier,
+      defaultName: dataContract.name
+    })
+
+  const handleDataContractChangeName = ({ name }) => {
+    try {
+      handleChangeName(name)
+      handleClose()
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  const handleDataContractChangeDescription = ({ keywords, description }) => {
+    try {
+      handleChangeDescription({ keywords, description })
+      handleClose()
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  if (!isDisabled) {
+    return null
+  }
+
+  return (
+    <>
+      <button
+        className={'DataContractTotalCard__Edit'}
+        onClick={handleOpen}
+      >
+        Edit
+      </button>
+      <DataContractModal
+        isOpen={isOpen}
+        onChangeName={handleDataContractChangeName}
+        onChangeDescription={handleDataContractChangeDescription}
+      />
+    </>
+  )
+})
diff --git a/packages/frontend/src/components/dataContracts/DataContractTotalCard.js b/packages/frontend/src/components/dataContracts/DataContractTotalCard.js
index f3f989e75..407442cb1 100644
--- a/packages/frontend/src/components/dataContracts/DataContractTotalCard.js
+++ b/packages/frontend/src/components/dataContracts/DataContractTotalCard.js
@@ -3,6 +3,8 @@ import { Alias, CreditsBlock, DateBlock, Identifier, InfoLine } from '../data'
 import { HorisontalSeparator } from '../ui/separators'
 import { ValueCard } from '../cards'
 import { findActiveAlias } from '../../util'
+import { DataContractTitle } from './DataContractTitle'
+
 import './DataContractTotalCard.scss'
 
 function DataContractTotalCard ({ dataContract, rate, className }) {
@@ -10,12 +12,7 @@ function DataContractTotalCard ({ dataContract, rate, className }) {
 
   return (
     <div className={`InfoBlock InfoBlock--Gradient DataContractTotalCard ${dataContract.loading ? 'DataContractTotalCard--Loading' : ''} ${className || ''}`}>
-      {dataContract.data?.name &&
-        <div className={'DataContractTotalCard__Title'}>
-          {dataContract.data.name}
-        </div>
-      }
-
+      <DataContractTitle dataContract={dataContract.data} />
       <div className={'DataContractTotalCard__Header'}>
         <div className={'DataContractTotalCard__HeaderLines'}>
           <InfoLine
diff --git a/packages/frontend/src/components/dataContracts/DataContractTotalCard.scss b/packages/frontend/src/components/dataContracts/DataContractTotalCard.scss
index a09c4e7a9..731e053a2 100644
--- a/packages/frontend/src/components/dataContracts/DataContractTotalCard.scss
+++ b/packages/frontend/src/components/dataContracts/DataContractTotalCard.scss
@@ -4,22 +4,58 @@
 .DataContractTotalCard {
   @include mixins.TotalCard();
 
+  &__TitleContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  &__Edit {
+    background: rgba(var(--chakra-colors-brand-normal-rgb), 0.2);
+    color:  $color-brand-normal;
+    font-family: $font-mono;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 130%;
+    transition: all ease-in .2;
+
+    &:hover {
+      background: rgba(var(--chakra-colors-brand-normal-rgb), 0.5);
+      color: var(--chakra-colors-white-50);
+    }
+
+    &:active {
+      background: rgba(var(--chakra-colors-brand-normal-rgb), 1);
+      color: var(--chakra-colors-white-50);
+    }
+  }
+
   &__Title {
     font-weight: 700;
     font-size: 0.875rem;
     margin-bottom: 0.875rem;
+    font-family: var(--font-montserrat);
+    font-weight: 800;
+    font-style: Italic;
+    font-size: 14px;
+    line-height: 120%;
+    text-transform: uppercase;
+    margin: 0 0 22px;
   }
 
   &__HeaderLines {
     width: 100%;
   }
 
-  &__Identifier, &__Owner {
+  &__Identifier,
+  &__Owner {
     .InfoLine__Value {
       width: 100%;
       text-align: right;
       overflow: hidden;
-      
+
       .Identifier {
         justify-content: flex-end;
       }
@@ -72,4 +108,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/frontend/src/components/documents/DocumentsList.js b/packages/frontend/src/components/documents/DocumentsList.js
index 03a5fcd5a..b86ac26e8 100644
--- a/packages/frontend/src/components/documents/DocumentsList.js
+++ b/packages/frontend/src/components/documents/DocumentsList.js
@@ -50,7 +50,7 @@ export default function DocumentsList ({
           className={'DocumentsList__Pagination'}
           onPageChange={pagination.onPageChange}
           pageCount={pagination.pageCount}
-          forcePage={pagination.forcePage}
+          forcePage={pagination.forcePage - 1}
           justify={true}
         />
       }
diff --git a/packages/frontend/src/components/identities/IdentityDigestCard.js b/packages/frontend/src/components/identities/IdentityDigestCard.js
index b952d898e..78891389f 100644
--- a/packages/frontend/src/components/identities/IdentityDigestCard.js
+++ b/packages/frontend/src/components/identities/IdentityDigestCard.js
@@ -2,13 +2,12 @@ import { CreditsBlock, DateBlock, Identifier, InfoLine } from '../data'
 import Link from 'next/link'
 import { ValueContainer } from '../ui/containers'
 import { LoadingLine } from '../loading'
-import { networks } from '../../constants/networks'
+import { useActiveNetwork } from 'src/contexts'
+
 import './IdentityDigestCard.scss'
 
 function IdentityDigestCard ({ identity, rate, className }) {
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
-  const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl)
-  const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null
+  const { l1explorerBaseUrl } = useActiveNetwork()
 
   return (
     <div className={`IdentityDigestCard ${className || ''} ${identity.loading ? 'IdentityDigestCard--Loading' : ''}`}>
diff --git a/packages/frontend/src/components/layout/RootComponent.js b/packages/frontend/src/components/layout/RootComponent.js
index 6d45dbd16..3e92f229e 100644
--- a/packages/frontend/src/components/layout/RootComponent.js
+++ b/packages/frontend/src/components/layout/RootComponent.js
@@ -1,27 +1,32 @@
 'use client'
 
-import { ChakraProvider, localStorageManager } from '@chakra-ui/react'
-import { BreadcrumbsProvider } from '../../contexts/BreadcrumbsContext'
-import { useEffect } from 'react'
-import theme from '../../styles/theme'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { NetworkProvider, BreadcrumbsProvider, ThemeProvider, ModalProvider, WalletProvider, QueryProvider } from 'src/contexts'
 import Navbar from './navbar/Navbar'
 import Footer from './footer'
 import Background from './Background'
+
 import '../../styles/theme.scss'
 
 export default function RootComponent ({ children }) {
-  useEffect(() => {
-    localStorage.setItem('chakra-ui-color-mode', theme.initialColorMode)
-  }, [])
-
   return (
-    <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
-      <Background snow={false}/>
-      <BreadcrumbsProvider>
-        <Navbar/>
-        {children}
-      </BreadcrumbsProvider>
-      <Footer/>
-    </ChakraProvider>
+    <NuqsAdapter>
+      <NetworkProvider>
+        <QueryProvider>
+          <WalletProvider>
+            <ThemeProvider>
+              <ModalProvider>
+                <Background snow={false}/>
+                <BreadcrumbsProvider>
+                  <Navbar/>
+                  {children}
+                </BreadcrumbsProvider>
+                <Footer/>
+              </ModalProvider>
+            </ThemeProvider>
+          </WalletProvider>
+        </QueryProvider>
+      </NetworkProvider>
+    </NuqsAdapter>
   )
 }
diff --git a/packages/frontend/src/components/layout/navbar/NetworkSelect.js b/packages/frontend/src/components/layout/navbar/NetworkSelect.js
index b39216145..3d94e3767 100644
--- a/packages/frontend/src/components/layout/navbar/NetworkSelect.js
+++ b/packages/frontend/src/components/layout/navbar/NetworkSelect.js
@@ -1,13 +1,14 @@
 'use client'
 
 import { useState } from 'react'
-import './NetworkSelect.scss'
 import Dropdown from './Dropdown'
 import { networks } from '../../../constants/networks'
+import { useActiveNetwork } from 'src/contexts'
+
+import './NetworkSelect.scss'
 
 function NetworkSelect () {
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
-  const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl)
+  const { name: network } = useActiveNetwork()
   const [showDropdown, setShowDropdown] = useState(false)
 
   return (
@@ -17,7 +18,7 @@ function NetworkSelect () {
         className={'NetworkSelect__Button'}
         onMouseEnter={() => setShowDropdown(true)}
       >
-        {activeNetwork?.name || ''}
+        {network || ''}
         <svg
           className={`NetworkSelect__Button--Arrow ${showDropdown ? 'NetworkSelect__Button--ArrowActive' : ''}`}
           width={'10'}
@@ -30,7 +31,7 @@ function NetworkSelect () {
         </svg>
       </button>
       <div className={`NetworkSelect__DropdownWrapper ${showDropdown ? 'NetworkSelect__DropdownWrapperActive' : ''}`}>
-        <Dropdown active={activeNetwork?.name} data={networks} />
+        <Dropdown active={network} data={networks} />
       </div>
     </div>
   )
diff --git a/packages/frontend/src/components/modalWindow/index.js b/packages/frontend/src/components/modalWindow/index.js
deleted file mode 100644
index 53a0576cd..000000000
--- a/packages/frontend/src/components/modalWindow/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  ModalCloseButton,
-  Text
-} from '@chakra-ui/react'
-
-export default function ModalWindow ({ open, text, setShowModal }) {
-  if (!open) return <></>
-
-  return (
-    <Modal
-        isOpen={open}
-        onClose={() => setShowModal(false)}
-    >
-        <ModalOverlay/>
-        <ModalContent containerProps={{ alignItems: 'center' }}>
-            <ModalCloseButton/>
-            <ModalBody py={20}>
-                <Text textAlign={['left', 'center']}>{ text }</Text>
-            </ModalBody>
-        </ModalContent>
-    </Modal>
-  )
-}
diff --git a/packages/frontend/src/components/tokens/TokensList.js b/packages/frontend/src/components/tokens/TokensList.js
index 685b096c3..8cb5e2053 100644
--- a/packages/frontend/src/components/tokens/TokensList.js
+++ b/packages/frontend/src/components/tokens/TokensList.js
@@ -95,7 +95,7 @@ function TokensList ({
           className={'TokensList__Pagination'}
           onPageChange={pagination.onPageChange}
           pageCount={pagination.pageCount}
-          forcePage={pagination.forcePage}
+          forcePage={pagination.forcePage - 1}
           justify={true}
         />
       )}
diff --git a/packages/frontend/src/components/transactions/TransactionsList.js b/packages/frontend/src/components/transactions/TransactionsList.js
index 64412957c..9fd0c5727 100644
--- a/packages/frontend/src/components/transactions/TransactionsList.js
+++ b/packages/frontend/src/components/transactions/TransactionsList.js
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import TransactionsListItem from './TransactionsListItem'
-import { EmptyListMessage } from '../ui/lists'
+import { EmptyListMessage } from '@ui/lists'
 import { Grid, GridItem } from '@chakra-ui/react'
 import { LoadingList } from '../loading'
 import Pagination from '../pagination'
@@ -97,7 +97,7 @@ export default function TransactionsList ({
           className={'TransactionsList__Pagination'}
           onPageChange={pagination.onPageChange}
           pageCount={pagination.pageCount}
-          forcePage={pagination.forcePage}
+          forcePage={pagination.forcePage - 1}
           justify={true}
         />
       }
diff --git a/packages/frontend/src/components/ui/Modal/Modal.js b/packages/frontend/src/components/ui/Modal/Modal.js
new file mode 100644
index 000000000..8efdb67a8
--- /dev/null
+++ b/packages/frontend/src/components/ui/Modal/Modal.js
@@ -0,0 +1,14 @@
+import { createPortal } from 'react-dom'
+import { ModalLayout } from './ModalLayout'
+import { useModalRef } from 'src/contexts/ModalContext'
+import { useModal } from './useModal'
+
+export const Modal = ({ children, ...props }) => {
+  const { modalRef } = useModalRef()
+  const { handleClose } = useModal()
+
+  return createPortal(
+    <ModalLayout ref={modalRef} onClose={handleClose} {...props}>{children}</ModalLayout>,
+    document.body
+  )
+}
diff --git a/packages/frontend/src/components/ui/Modal/Modal.module.scss b/packages/frontend/src/components/ui/Modal/Modal.module.scss
new file mode 100644
index 000000000..358f3e14e
--- /dev/null
+++ b/packages/frontend/src/components/ui/Modal/Modal.module.scss
@@ -0,0 +1,31 @@
+.dialog {
+  background-color: #181f22;
+  max-width: 648px;
+  width: 100%;
+
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+
+    .title,
+    #modal-title {
+      font-family: var(--font-montserrat);
+      font-weight: 700;
+      font-style: Bold;
+      font-size: 14px;
+      line-height: 120%;
+      margin: 0;
+    }
+
+  }
+
+  .content {
+    margin-top: 14px;
+  }
+
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
diff --git a/packages/frontend/src/components/ui/Modal/ModalLayout.js b/packages/frontend/src/components/ui/Modal/ModalLayout.js
new file mode 100644
index 000000000..780da13ea
--- /dev/null
+++ b/packages/frontend/src/components/ui/Modal/ModalLayout.js
@@ -0,0 +1,27 @@
+import { forwardRef } from 'react'
+import { CloseButton } from '@chakra-ui/react'
+import { cva } from 'class-variance-authority'
+
+import styles from './Modal.module.scss'
+
+const modalStyles = cva([styles.dialog, 'InfoBlock', 'InfoBlock--Gradient'])
+
+export const ModalLayout = forwardRef(({ children, title, onClose }, ref) => (
+  <dialog
+    role='dialog'
+    aria-labelledby='modal-title'
+    aria-modal='true'
+    className={modalStyles()}
+    ref={ref}
+  >
+    <div className={styles.header}>
+        <h2 id="modal-title" className={styles.title} >{title}</h2>
+        <CloseButton onClick={onClose} />
+    </div>
+    <div className={styles.content}>
+        {children}
+    </div>
+  </dialog>
+))
+
+ModalLayout.displayName = 'ModalLayout'
diff --git a/packages/frontend/src/components/ui/Modal/index.js b/packages/frontend/src/components/ui/Modal/index.js
new file mode 100644
index 000000000..7aabc227b
--- /dev/null
+++ b/packages/frontend/src/components/ui/Modal/index.js
@@ -0,0 +1,2 @@
+export * from './Modal'
+export * from './useModal'
diff --git a/packages/frontend/src/components/ui/Modal/useModal.js b/packages/frontend/src/components/ui/Modal/useModal.js
new file mode 100644
index 000000000..23ac60f96
--- /dev/null
+++ b/packages/frontend/src/components/ui/Modal/useModal.js
@@ -0,0 +1,25 @@
+import { useSyncExternalStore } from 'react'
+import { useModalRef } from 'src/contexts/ModalContext'
+
+export const useModal = () => {
+  const { modalRef } = useModalRef()
+  const handleClose = () => modalRef.current?.close()
+  const handleOpen = () => modalRef.current?.showModal()
+
+  const isOpen = useSyncExternalStore(
+    (onStoreChange) => {
+      const observer = new MutationObserver(onStoreChange)
+      if (modalRef.current) {
+        observer.observe(modalRef.current, { attributes: true, attributeFilter: ['open'] })
+      }
+      return () => observer.disconnect()
+    },
+    () => modalRef.current?.open ?? false
+  )
+
+  return {
+    isOpen,
+    handleClose,
+    handleOpen
+  }
+}
diff --git a/packages/frontend/src/components/ui/Switcher/Switcher.js b/packages/frontend/src/components/ui/Switcher/Switcher.js
new file mode 100644
index 000000000..0d136def7
--- /dev/null
+++ b/packages/frontend/src/components/ui/Switcher/Switcher.js
@@ -0,0 +1,25 @@
+import './Switcher.scss'
+
+function Switcher ({ options = [], onChange, defaultValue }) {
+  if (!options?.length) return <></>
+  if (!onChange) onChange = () => {}
+
+  return (
+    <div className={'Switcher'} onChange={e => onChange(e.target.value)}>
+      {options.map((option, i) => (
+        <label className={'Switcher__Option'} key={i}>
+          <input
+            type={'radio'}
+            name={'switcher'}
+            value={option.title}
+            defaultChecked={String(defaultValue).toLowerCase() === String(option.title).toLowerCase() || (!defaultValue && i === 0)}/>
+          <span className={'Switcher__OptionTitle'}>{option.title}</span>
+        </label>
+      ))}
+    </div>
+  )
+}
+
+export {
+  Switcher
+}
diff --git a/packages/frontend/src/components/ui/Switcher.scss b/packages/frontend/src/components/ui/Switcher/Switcher.scss
similarity index 91%
rename from packages/frontend/src/components/ui/Switcher.scss
rename to packages/frontend/src/components/ui/Switcher/Switcher.scss
index 305f20847..b093d71e6 100644
--- a/packages/frontend/src/components/ui/Switcher.scss
+++ b/packages/frontend/src/components/ui/Switcher/Switcher.scss
@@ -1,5 +1,5 @@
-@use '../../styles/mixins.scss';
-@import '../../styles/variables.scss';
+@use '../../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
 
 .Switcher {
   width: max-content;
diff --git a/packages/frontend/src/components/ui/Switcher/index.js b/packages/frontend/src/components/ui/Switcher/index.js
new file mode 100644
index 000000000..8d5bf78e7
--- /dev/null
+++ b/packages/frontend/src/components/ui/Switcher/index.js
@@ -0,0 +1 @@
+export * from './Switcher'
diff --git a/packages/frontend/src/components/ui/index.js b/packages/frontend/src/components/ui/index.js
index 0d136def7..8d5bf78e7 100644
--- a/packages/frontend/src/components/ui/index.js
+++ b/packages/frontend/src/components/ui/index.js
@@ -1,25 +1 @@
-import './Switcher.scss'
-
-function Switcher ({ options = [], onChange, defaultValue }) {
-  if (!options?.length) return <></>
-  if (!onChange) onChange = () => {}
-
-  return (
-    <div className={'Switcher'} onChange={e => onChange(e.target.value)}>
-      {options.map((option, i) => (
-        <label className={'Switcher__Option'} key={i}>
-          <input
-            type={'radio'}
-            name={'switcher'}
-            value={option.title}
-            defaultChecked={String(defaultValue).toLowerCase() === String(option.title).toLowerCase() || (!defaultValue && i === 0)}/>
-          <span className={'Switcher__OptionTitle'}>{option.title}</span>
-        </label>
-      ))}
-    </div>
-  )
-}
-
-export {
-  Switcher
-}
+export * from './Switcher'
diff --git a/packages/frontend/src/constants/networks.js b/packages/frontend/src/constants/networks.js
index 0d4642c5a..d72748de1 100644
--- a/packages/frontend/src/constants/networks.js
+++ b/packages/frontend/src/constants/networks.js
@@ -1,16 +1,30 @@
-export const networks = [
-  {
-    name: 'mainnet',
+export const NETWORKS_ENUM = {
+  MAINNET: 'mainnet',
+  TESTNET: 'testnet'
+}
+
+export const NETWORK_OPTIONS = {
+  [NETWORKS_ENUM.MAINNET]: {
+    name: NETWORKS_ENUM.MAINNET,
     subname: '',
     disabled: false,
-    explorerBaseUrl: 'https://platform-explorer.com',
-    l1explorerBaseUrl: 'https://insight.dash.org/insight'
+    explorerBaseUrl: process.env.NEXT_PUBLIC_MAINNET_BASE_URL,
+    l1explorerBaseUrl: process.env.NEXT_PUBLIC_MAINNET_INSIGHT_URL,
+    dataContractPE:
+      process.env.NEXT_PUBLIC_MAINNET_PLATFORM_EXPLORER_DATA_CONTRACT_IDENTITY
   },
-  {
-    name: 'testnet',
+  [NETWORKS_ENUM.TESTNET]: {
+    name: NETWORKS_ENUM.TESTNET,
     subname: '',
     disabled: false,
-    explorerBaseUrl: 'https://testnet.platform-explorer.com',
-    l1explorerBaseUrl: 'http://insight.testnet.networks.dash.org/insight'
+    explorerBaseUrl: process.env.NEXT_PUBLIC_TESTNET_BASE_URL,
+    l1explorerBaseUrl: process.env.NEXT_PUBLIC_TESTNET_INSIGHT_URL,
+    dataContractPE:
+      process.env.NEXT_PUBLIC_TESTNET_PLATFORM_EXPLORER_DATA_CONTRACT_IDENTITY
   }
+}
+
+export const networks = [
+  NETWORK_OPTIONS[NETWORKS_ENUM.MAINNET],
+  NETWORK_OPTIONS[NETWORKS_ENUM.TESTNET]
 ]
diff --git a/packages/frontend/src/contexts/BreadcrumbsContext.js b/packages/frontend/src/contexts/BreadcrumbsContext.js
index b561d95c3..439d70451 100644
--- a/packages/frontend/src/contexts/BreadcrumbsContext.js
+++ b/packages/frontend/src/contexts/BreadcrumbsContext.js
@@ -1,3 +1,5 @@
+'use client'
+
 import { createContext, useContext, useState } from 'react'
 
 const BreadcrumbsContext = createContext({})
diff --git a/packages/frontend/src/contexts/ModalContext.js b/packages/frontend/src/contexts/ModalContext.js
new file mode 100644
index 000000000..c2e44d0f0
--- /dev/null
+++ b/packages/frontend/src/contexts/ModalContext.js
@@ -0,0 +1,16 @@
+'use client'
+
+import { createContext, useContext, useRef } from 'react'
+
+const ModalContext = createContext({})
+export const useModalRef = () => useContext(ModalContext)
+
+export const ModalProvider = ({ children }) => {
+  const modalRef = useRef(null)
+
+  return (
+    <ModalContext.Provider value={{ modalRef }}>
+      {children}
+    </ModalContext.Provider>
+  )
+}
diff --git a/packages/frontend/src/contexts/NetworkProvider.js b/packages/frontend/src/contexts/NetworkProvider.js
new file mode 100644
index 000000000..0dcc65324
--- /dev/null
+++ b/packages/frontend/src/contexts/NetworkProvider.js
@@ -0,0 +1,32 @@
+'use client'
+
+import { createContext, useContext, useEffect } from 'react'
+import { NETWORK_OPTIONS, NETWORKS_ENUM } from 'src/constants/networks'
+
+const NetworkContext = createContext({})
+
+export const NetworkProvider = ({ children }) => {
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
+  const network =
+    NETWORK_OPTIONS[NETWORKS_ENUM.MAINNET].explorerBaseUrl === baseUrl
+      ? NETWORKS_ENUM.MAINNET
+      : NETWORKS_ENUM.TESTNET
+
+  useEffect(() => {
+    const sdk = window.dashPlatformSDK
+    if (!sdk) {
+      console.log('Dash Platform SDK is not initialized')
+      return
+    }
+
+    sdk.setNetwork(network)
+  }, [network])
+
+  return (
+    <NetworkContext.Provider value={NETWORK_OPTIONS[network]}>
+      {children}
+    </NetworkContext.Provider>
+  )
+}
+
+export const useActiveNetwork = () => useContext(NetworkContext)
diff --git a/packages/frontend/src/contexts/QueryProvider.js b/packages/frontend/src/contexts/QueryProvider.js
new file mode 100644
index 000000000..f6be723ec
--- /dev/null
+++ b/packages/frontend/src/contexts/QueryProvider.js
@@ -0,0 +1,14 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
+
+export const QueryProvider = ({ children }) => {
+  const [queryClient] = useState(() => new QueryClient())
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
+}
diff --git a/packages/frontend/src/contexts/ThemeProvider.js b/packages/frontend/src/contexts/ThemeProvider.js
new file mode 100644
index 000000000..1d9475261
--- /dev/null
+++ b/packages/frontend/src/contexts/ThemeProvider.js
@@ -0,0 +1,20 @@
+'use client'
+
+import { ChakraProvider, localStorageManager } from '@chakra-ui/react'
+import { useEffect } from 'react'
+import theme from 'src/styles/theme'
+
+export const ThemeProvider = ({ children }) => {
+  useEffect(() => {
+    localStorage.setItem('chakra-ui-color-mode', theme.initialColorMode)
+  }, [])
+
+  return (
+    <ChakraProvider
+      theme={theme}
+      colorModeManager={localStorageManager}
+    >
+      {children}
+    </ChakraProvider>
+  )
+}
diff --git a/packages/frontend/src/contexts/WalletProvider.js b/packages/frontend/src/contexts/WalletProvider.js
new file mode 100644
index 000000000..3b675a3b7
--- /dev/null
+++ b/packages/frontend/src/contexts/WalletProvider.js
@@ -0,0 +1,41 @@
+'use client'
+
+import { createContext, useContext, useState, useRef } from 'react'
+
+const WalletContext = createContext({})
+
+export const WalletProvider = ({ children }) => {
+  const connected = useRef(false)
+  const [error, setError] = useState(null)
+  const [walletInfo, setWalletInfo] = useState(null)
+
+  const connectWallet = async (cb) => {
+    if (!window.dashPlatformExtension) {
+      return setError('Dash Platform Extension is not installed')
+    }
+
+    const { dashPlatformExtension } = window
+
+    try {
+      const wallet = await dashPlatformExtension.signer.connect()
+      const current = wallet.identities.find(
+        ({ identifier }) => identifier === wallet.currentIdentity
+      )
+      connected.current = true
+      setWalletInfo({ identities: wallet.identities, current })
+      setError(null)
+      cb(wallet)
+    } catch (e) {
+      setError(e)
+      console.log(e)
+    }
+  }
+
+  return (
+    <WalletContext.Provider value={{ connectWallet, connected, walletInfo, error }}>
+      {children}
+    </WalletContext.Provider>
+  )
+}
+
+export const useWallet = () => useContext(WalletContext)
diff --git a/packages/frontend/src/contexts/index.js b/packages/frontend/src/contexts/index.js
new file mode 100644
index 000000000..db7ba72e1
--- /dev/null
+++ b/packages/frontend/src/contexts/index.js
@@ -0,0 +1,6 @@
+export * from './BreadcrumbsContext'
+export * from './NetworkProvider'
+export * from './ThemeProvider'
+export * from './ModalContext'
+export * from './WalletProvider'
+export * from './QueryProvider'
diff --git a/packages/frontend/src/styles/components/Textarea.js b/packages/frontend/src/styles/components/Textarea.js
new file mode 100644
index 000000000..f1bc09f2f
--- /dev/null
+++ b/packages/frontend/src/styles/components/Textarea.js
@@ -0,0 +1,21 @@
+const Textarea = {
+  baseStyle: {
+    fontSize: '0.75rem',
+    fontFamily: 'mono',
+    borderRadius: '10px',
+    fontWeight: '400',
+    transition: '.1s',
+    border: '1px solid #39454C',
+    _focus: {
+      borderColor: 'blue.500',
+      boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)'
+    }
+  },
+  variants: {
+    outline: {
+      bg: 'rgba(var(--chakra-colors-gray-800-rgb), 0.5)'
+    }
+  }
+}
+
+export default Textarea
diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js
index e6995a93d..37410bf70 100644
--- a/packages/frontend/src/styles/theme.js
+++ b/packages/frontend/src/styles/theme.js
@@ -8,15 +8,7 @@ import Progress from './components/Progress'
 import Popover from './components/Popover'
 import Tooltip from './components/Tooltip'
 import Input from './components/Input'
-import {
-  Montserrat,
-  Open_Sans as OpenSans,
-  Roboto_Mono as RobotoMono
-} from 'next/font/google'
-
-const montserrat = Montserrat({ subsets: ['latin'] })
-const openSans = OpenSans({ subsets: ['latin'] })
-const robotoMono = RobotoMono({ subsets: ['latin'] })
+import Textarea from './components/Textarea'
 
 export const theme = extendTheme({
   config: {
@@ -28,9 +20,9 @@ export const theme = extendTheme({
     '3xl': '120em' // 1920px
   },
   fonts: {
-    heading: montserrat.style.fontFamily,
-    body: openSans.style.fontFamily,
-    mono: robotoMono.style.fontFamily
+    heading: 'var(--font-montserrat)',
+    body: 'var(--font-open-sans)',
+    mono: 'var(--font-roboto-mono)'
   },
   space: {
     px: '1px',
@@ -79,7 +71,10 @@ export const theme = extendTheme({
     Modal: {
       baseStyle: {
         dialog: {
-          background: 'gray.800'
+          bg: 'transparent',
+          boxShadow: 'none',
+          border: 'none',
+          p: 0
         }
       }
     },
@@ -95,7 +90,8 @@ export const theme = extendTheme({
     Progress,
     Popover,
     Tooltip,
-    Input
+    Input,
+    Textarea
   }
 })
 
diff --git a/packages/frontend/src/util/extension.js b/packages/frontend/src/util/extension.js
new file mode 100644
index 000000000..223eb3958
--- /dev/null
+++ b/packages/frontend/src/util/extension.js
@@ -0,0 +1,6 @@
+export const ExtensionStatusEnum = {
+  CONNECTED: 'CONNECTED',
+  NONE: 'NONE'
+}
+
+export const checkPlatformExtension = () => window?.dashPlatformExtension ? ExtensionStatusEnum.CONNECTED : ExtensionStatusEnum.NONE