diff --git a/src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx b/src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx
index cccd7a04..70a7148f 100644
--- a/src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx
+++ b/src/view/ContractDetailView/ContractInteractionForm/ReadMethodsForm.tsx
@@ -1,17 +1,12 @@
 import { useEffect } from 'react'
 import { ContractInteractionProps } from '.'
-import {
-  Box,
-  CircularProgress,
-  Stack,
-  Typography,
-  FormHelperText
-} from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 import { MethodDocumentation } from '../MethodDocumentation'
 import { AbiParam } from '@/services/substrate/types'
 import { ButtonCall } from './styled'
 import { useContractCaller } from '@/hooks/useContractCaller'
-import { CopyBlock, atomOneDark } from 'react-code-blocks'
+import { getDecodedOutput } from '@/utils/contractExecResult'
+import { CopyToClipboardButton, StyledTextField } from '@/view/components'
 
 type Props = React.PropsWithChildren<
   Omit<ContractInteractionProps, 'type'> & {
@@ -49,11 +44,13 @@ export function ReadMethodsForm({
     >
       <Box minWidth="50%">
         <>
-          {abiParams.length > 0 && <Typography>Message to send</Typography>}
+          {abiParams.length > 0 && (
+            <Typography variant="overline">Message to send</Typography>
+          )}
           {children}
         </>
         <Box display="block">
-          <Typography variant="caption">Outcome</Typography>
+          <Typography variant="overline">Outcome</Typography>
         </Box>
 
         <Stack direction="row" justifyContent="space-between">
@@ -65,27 +62,36 @@ export function ReadMethodsForm({
               justifyContent: 'center'
             }}
           >
-            {caller.isSubmitting ? (
-              <CircularProgress color="primary" />
-            ) : (
-              <>
-                <CopyBlock
-                  text={outcome}
-                  language="text"
-                  theme={atomOneDark}
-                  showLineNumbers={false}
-                  codeBlock={true}
-                  wrapLongLines={true}
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: '1rem'
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center'
+                }}
+              >
+                <StyledTextField placeholder="0" value={outcome} />
+                <CopyToClipboardButton
+                  id="copy-contract-address"
+                  sx={{ marginLeft: '0.5rem' }}
+                  data={outcome}
                 />
-                {error && (
-                  <FormHelperText error id={`error-${abiMessage.method}`}>
-                    {error}
-                  </FormHelperText>
-                )}
-              </>
-            )}
+              </Box>
+              <ButtonCall
+                isLoading={caller.isSubmitting}
+                onClick={() => caller.send(inputData)}
+              >
+                Recall
+              </ButtonCall>
+            </Box>
           </Box>
-          <ButtonCall onClick={() => caller.send(inputData)}>Recall</ButtonCall>
         </Stack>
       </Box>
       <Box sx={{ maxWidth: '45%', minWidth: '40%' }}>
diff --git a/src/view/ContractDetailView/ContractInteractionForm/WriteMethodsForm.tsx b/src/view/ContractDetailView/ContractInteractionForm/WriteMethodsForm.tsx
index 3fe88540..ba565e8d 100644
--- a/src/view/ContractDetailView/ContractInteractionForm/WriteMethodsForm.tsx
+++ b/src/view/ContractDetailView/ContractInteractionForm/WriteMethodsForm.tsx
@@ -35,11 +35,13 @@ export function WriteMethodsForm({
     >
       <Box minWidth="50%">
         <>
-          {abiParams.length > 0 && <Typography>Message to send</Typography>}
+          {abiParams.length > 0 && (
+            <Typography variant="overline">Message to send</Typography>
+          )}
           {children}
         </>
         <Box display="block">
-          <Typography variant="caption">Outcome</Typography>
+          <Typography variant="overline">Outcome</Typography>
         </Box>
 
         <Stack direction="row" justifyContent="space-between">
diff --git a/src/view/ContractDetailView/ContractInteractionForm/styled.ts b/src/view/ContractDetailView/ContractInteractionForm/styled.ts
index f050ef78..4b3546f0 100644
--- a/src/view/ContractDetailView/ContractInteractionForm/styled.ts
+++ b/src/view/ContractDetailView/ContractInteractionForm/styled.ts
@@ -1,10 +1,17 @@
 import { LoadingButton, LoadingButtonProps } from '@/view/components'
-import styled from '@emotion/styled'
+import { styled } from '@mui/material/styles'
 
-export const ButtonCall = styled(LoadingButton)<LoadingButtonProps>(() => ({
-  fontSize: '1rem',
-  height: '2.5rem',
-  borderRadius: '1.5rem',
-  textTransform: 'none',
-  border: 'none'
-}))
+export const ButtonCall = styled(LoadingButton)<LoadingButtonProps>(
+  ({ theme }) => ({
+    fontSize: '1rem',
+    height: '2.5rem',
+    borderRadius: '1.5rem',
+    textTransform: 'none',
+    border: theme.palette.primary.main,
+    background: theme.palette.primary.main,
+    color: theme.palette.common.white,
+    '& .MuiCircularProgress-root': {
+      color: theme.palette.common.white
+    }
+  })
+)
diff --git a/src/view/ContractDetailView/ContractsTabInteraction.tsx b/src/view/ContractDetailView/ContractsTabInteraction.tsx
index 34fbe06c..9faccc18 100644
--- a/src/view/ContractDetailView/ContractsTabInteraction.tsx
+++ b/src/view/ContractDetailView/ContractsTabInteraction.tsx
@@ -10,7 +10,7 @@ import {
 import { useContractPromiseFromSource } from '@/hooks/useContractPromise'
 import { FallbackSpinner } from '@/components/FallbackSpinner'
 import { ContractPromise, Registry } from '@/services/substrate/types'
-import { ContractInteractionForm } from './ContractInteractionForm'
+import { ContractInteractionForm } from '@/view/ContractDetailView/ContractInteractionForm'
 
 const types: ContractTabType[] = ['Read Contract', 'Write Contract']
 const groupedIndex: Record<ContractTabType, keyof GroupedAbiMessages> = {
@@ -93,8 +93,8 @@ export function ContractsTabInteraction({ userContract }: Props) {
       <Box sx={{ width: '100%' }}>
         <BasicTabs
           options={[
-            `Read Contract (${sortedAbiMessages.nonMutating.length})`,
-            `Write Contract (${sortedAbiMessages.mutating.length})`
+            `Read (${sortedAbiMessages.nonMutating.length})`,
+            `Write (${sortedAbiMessages.mutating.length})`
           ]}
           onChange={handleChange}
         >
@@ -105,8 +105,8 @@ export function ContractsTabInteraction({ userContract }: Props) {
                   Learn more about your contract 🔁
                 </Typography>
                 <Typography variant="body1">
-                  Let&apos;start to work with your contract displaying each
-                  method.
+                  Explore the smart contract&apos;s data by selecting the
+                  desired information.
                 </Typography>
               </>
             ) : (
@@ -115,8 +115,8 @@ export function ContractsTabInteraction({ userContract }: Props) {
                   Interact with your contract 🔁
                 </Typography>
                 <Typography variant="body1">
-                  Let&apos;s start to work with your contract doing different
-                  querys.
+                  Select the method you want to execute and fill in the required
+                  parameters to perform a transaction.
                 </Typography>
               </>
             )}
diff --git a/src/view/ContractDetailView/MethodDocumentation.tsx b/src/view/ContractDetailView/MethodDocumentation.tsx
index ba14ec97..9bcde253 100644
--- a/src/view/ContractDetailView/MethodDocumentation.tsx
+++ b/src/view/ContractDetailView/MethodDocumentation.tsx
@@ -13,14 +13,13 @@ export function MethodDocumentation({ abiMessage }: Props) {
         borderColor: 'primary.main',
         borderRadius: '0.5rem',
         borderStyle: 'solid',
-        p: 2,
-        bgcolor: 'background.paper'
+        p: 2
       }}
     >
       <Typography variant="h5" component="h2" gutterBottom>
         {abiMessage.method}
       </Typography>
-      <Typography variant="body1">{abiMessage.docs}</Typography>
+      <Typography variant="caption">{abiMessage.docs}</Typography>
     </Box>
   )
 }
diff --git a/src/view/CustomContracts/detail/SkeletonContractDetail.tsx b/src/view/CustomContracts/detail/SkeletonContractDetail.tsx
index 94f9d676..ffbd118b 100644
--- a/src/view/CustomContracts/detail/SkeletonContractDetail.tsx
+++ b/src/view/CustomContracts/detail/SkeletonContractDetail.tsx
@@ -6,13 +6,25 @@ import MainContainer from '@/view/layout/MainContainer'
 export function ContractDetailSkeleton() {
   return (
     <MainContainer>
-      <Stack direction="row" justifyContent="space-between">
-        <MySkeleton variant="text" width={200} height={50} />
-        <MySkeleton variant="text" width={150} height={30} />
-      </Stack>
-      <Stack direction="row" spacing={2}>
-        <MySkeleton variant="text" width={300} height={30} />
+      <Stack direction="row" width={'100%'} justifyContent="space-between">
+        <Stack spacing={3}>
+          <MySkeleton variant="text" width={200} height={60} />
+        </Stack>
+        <Stack
+          direction="row"
+          width={'100%'}
+          spacing={3}
+          display="flex"
+          alignItems="center"
+          justifyContent="flex-end"
+        >
+          <MySkeleton variant="rounded" width={'22%'} height={35} />
+          <MySkeleton variant="rounded" width={'22%'} height={35} />
+        </Stack>
       </Stack>
+      <MySkeleton variant="text" width={400} height={30} />
+
+      <Stack direction="row" spacing={2}></Stack>
 
       <Box mt={4}>
         <Stack direction="row" width={'100%'} spacing={2}>
@@ -24,8 +36,8 @@ export function ContractDetailSkeleton() {
       </Box>
       <Box mt={8}>
         <Stack direction="row" width={'100%'} spacing={1}>
-          <MySkeleton variant="rectangular" width={'25%'} height={60} />
-          <MySkeleton variant="rectangular" width={'25%'} height={60} />
+          <MySkeleton variant="rectangular" width={'12%'} height={50} />
+          <MySkeleton variant="rectangular" width={'12%'} height={50} />
         </Stack>
         <MySkeleton variant="rectangular" height={350} />
       </Box>
diff --git a/src/view/components/Accordion/index.tsx b/src/view/components/Accordion/index.tsx
index 7ca16d4e..4156764c 100644
--- a/src/view/components/Accordion/index.tsx
+++ b/src/view/components/Accordion/index.tsx
@@ -33,7 +33,7 @@ export default function SimpleAccordion({
     }
 
   return (
-    <StyledAccordionContainer mt={8}>
+    <StyledAccordionContainer mt={6}>
       {elements.map(row => (
         <Accordion
           key={row.id}
diff --git a/src/view/components/CodeBlock/index.tsx b/src/view/components/CodeBlock/index.tsx
index be0ea242..7e64023d 100644
--- a/src/view/components/CodeBlock/index.tsx
+++ b/src/view/components/CodeBlock/index.tsx
@@ -30,17 +30,7 @@ export const CodeBlock: React.FC<PropsWithChildren<CodeBlockProps>> = ({
         ...sx
       }}
     >
-      <FormLabel
-        sx={{
-          marginTop: '-2em',
-          zIndex: 2,
-          position: 'absolute',
-          fontSize: '0.75em',
-          width: 'auto'
-        }}
-      >
-        {label}
-      </FormLabel>
+      <FormLabel>{label}</FormLabel>
       {_children}
     </Box>
   )
diff --git a/src/view/components/FactoryInputArgument/ArgBooleanSelect.tsx b/src/view/components/FactoryInputArgument/ArgBooleanSelect.tsx
index d61d0d21..edf66bf4 100644
--- a/src/view/components/FactoryInputArgument/ArgBooleanSelect.tsx
+++ b/src/view/components/FactoryInputArgument/ArgBooleanSelect.tsx
@@ -20,9 +20,18 @@ export function ArgBooleanSelect({
   return (
     <>
       <InputLabel>{label}</InputLabel>
-      <Select value={stringValue} onChange={handleChange} label={label}>
-        <MenuItem value="true">True</MenuItem>
-        <MenuItem value="false">False</MenuItem>
+      <Select
+        sx={{ color: 'white' }}
+        value={stringValue}
+        onChange={handleChange}
+        label={label}
+      >
+        <MenuItem sx={{ color: 'white' }} value="true">
+          True
+        </MenuItem>
+        <MenuItem sx={{ color: 'white' }} value="false">
+          False
+        </MenuItem>
       </Select>
     </>
   )
diff --git a/src/view/components/FactoryInputArgument/ArgEnum.tsx b/src/view/components/FactoryInputArgument/ArgEnum.tsx
index caf4ff9e..2260d36e 100644
--- a/src/view/components/FactoryInputArgument/ArgEnum.tsx
+++ b/src/view/components/FactoryInputArgument/ArgEnum.tsx
@@ -71,6 +71,7 @@ export function ArgEnum({
           />
         </InputLabel>
         <Select
+          sx={{ color: 'white' }}
           labelId="enum-select-label"
           value={variantIndex}
           onChange={event => setVariantIndex(event.target.value as number)}
@@ -82,7 +83,7 @@ export function ArgEnum({
           }
         >
           {variants.map(({ name }, index) => (
-            <MenuItem key={index} value={index}>
+            <MenuItem sx={{ color: 'white' }} key={index} value={index}>
               {name}
             </MenuItem>
           ))}
diff --git a/src/view/components/FactoryInputArgument/ArgInputBn.tsx b/src/view/components/FactoryInputArgument/ArgInputBn.tsx
index ca544353..37d723ab 100644
--- a/src/view/components/FactoryInputArgument/ArgInputBn.tsx
+++ b/src/view/components/FactoryInputArgument/ArgInputBn.tsx
@@ -1,9 +1,9 @@
-import { TextField } from '@mui/material'
 import BN from 'bn.js'
 import { useCallback, useState } from 'react'
 
 import { ArgumentComponentProps } from '@/domain/common/substrateInputTypes'
 import { getMinMax } from '@/services/substrate/utils'
+import { StyledTextField } from '../Input'
 
 type Props = ArgumentComponentProps<BN>
 
@@ -30,7 +30,7 @@ export function InputBn({
   )
 
   return (
-    <TextField
+    <StyledTextField
       onChange={handleChange}
       placeholder="Input a number"
       value={displayValue}
diff --git a/src/view/components/FactoryInputArgument/ArgTextField.tsx b/src/view/components/FactoryInputArgument/ArgTextField.tsx
index 23a866d1..2cdf1ffe 100644
--- a/src/view/components/FactoryInputArgument/ArgTextField.tsx
+++ b/src/view/components/FactoryInputArgument/ArgTextField.tsx
@@ -1,4 +1,4 @@
-import { TextField } from '@mui/material'
+import { StyledTextField } from '@/view/components'
 
 import { SimpleSpread } from '@/domain/common/utilityTsTypes'
 
@@ -30,8 +30,8 @@ export function ArgTextField({
   }
 
   return (
-    <div className={`w-full ${isError ? 'isError' : ''}`}>
-      <TextField
+    <>
+      <StyledTextField
         className={`w-full rounded text-sm ${
           isDisabled ? 'dark:text-gray-500' : ''
         } ${className}`}
@@ -47,6 +47,6 @@ export function ArgTextField({
         fullWidth
       />
       {children}
-    </div>
+    </>
   )
 }
diff --git a/src/view/components/Tabs/index.tsx b/src/view/components/Tabs/index.tsx
index baef1e53..37cfeb85 100644
--- a/src/view/components/Tabs/index.tsx
+++ b/src/view/components/Tabs/index.tsx
@@ -1,7 +1,5 @@
-import Box from '@mui/material/Box'
-import Tab from '@mui/material/Tab'
-import Tabs from '@mui/material/Tabs'
 import * as React from 'react'
+import { Box, Typography, Tab, Tabs } from '@mui/material'
 import { StyledTabsContainer } from './styled'
 
 interface TabPanelProps {
@@ -51,7 +49,11 @@ export default function BasicTabs(props: BasicTabsProps) {
     <StyledTabsContainer>
       <Tabs value={value} onChange={handleChange}>
         {props.options.map((option, index) => (
-          <Tab key={option} label={option} {...a11yProps(index)} />
+          <Tab
+            key={option}
+            label={<Typography variant="h5">{option}</Typography>}
+            {...a11yProps(index)}
+          />
         ))}
       </Tabs>
       <CustomTabPanel value={value} index={value}>
diff --git a/src/view/components/Tabs/styled.ts b/src/view/components/Tabs/styled.ts
index 2be6637a..c86e3334 100644
--- a/src/view/components/Tabs/styled.ts
+++ b/src/view/components/Tabs/styled.ts
@@ -4,19 +4,20 @@ export const StyledTabsContainer = styled(Box)(({ theme }) => ({
   '& .MuiTabs-root': {
     fontSize: '1.6rem',
     color: theme.palette.common.white,
-    borderBottom: '3px solid' + theme.palette.primary.main
+    borderBottom: '3px solid' + theme.palette.primary.main,
+    '& .Mui-selected': {
+      color: theme.palette.common.white,
+      backgroundColor: theme.palette.primary.main
+    }
   },
+
   '& .MuiTabs-root button': {
-    fontSize: '1.1rem',
-    padding: '0.7rem 1.7rem',
-    color: theme.palette.common.white,
-    fontWeight: '800'
-  },
-  '& .Mui-selected': {
+    padding: '0.7rem 1.8rem',
+    borderRadius: '0.5rem 0.5rem 0 0',
     color: theme.palette.common.white,
-    backgroundColor: theme.palette.primary.main,
-    borderRadius: '0.5rem 0.5rem 0 0'
+    backgroundColor: theme.palette.background.paper
   },
+
   '& .tab-content': {
     backgroundColor: theme.palette.background.paper,
     padding: '2rem'