diff --git a/src/components/Dashboard/ProcessView.tsx b/src/components/Dashboard/ProcessView.tsx
index 27cff0d09..bfc0de7cb 100644
--- a/src/components/Dashboard/ProcessView.tsx
+++ b/src/components/Dashboard/ProcessView.tsx
@@ -47,7 +47,7 @@ import { Routes } from '~src/router/routes'
 export const ProcessView = () => {
   const { setTitle, setBack } = useOutletContext<DashboardLayoutContext>()
   const { id, election, participation, turnout } = useElection()
-  const { ReadMoreMarkdownWrapper } = useReadMoreMarkdown('rgba(242, 242, 242, 0)', 'rgba(242, 242, 242, 1)', 600, 20)
+  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(600, 20)
 
   const votingLink = `${document.location.origin}${generatePath(Routes.processes.view, { id })}`
   const { hasCopied, onCopy } = useClipboard(votingLink)
@@ -66,9 +66,16 @@ export const ProcessView = () => {
         <ElectionSchedule showRemaining as={Tag} />
         <ElectionTitle variant='contents-title' />
         {election instanceof PublishedElection && election.description && (
-          <ReadMoreMarkdownWrapper from='rgba(250, 250, 250, 0)' to='rgba(250, 250, 250, 1)'>
-            <ElectionDescription mb={0} fontSize='lg' lineHeight={1.5} color='process.description' />
-          </ReadMoreMarkdownWrapper>
+          <>
+            <ReadMoreMarkdownWrapper
+              from={'var(--chakra-colors-dashboard-read_more-from)'}
+              toLight={'var(--chakra-colors-dashboard-read_more-to-light)'}
+              toDark={'var(--chakra-colors-dashboard-read_more-to-dark)'}
+            >
+              <ElectionDescription mb={0} fontSize='lg' lineHeight={1.5} color='process.description' />
+            </ReadMoreMarkdownWrapper>
+            <ReadMoreMarkdownButton alignSelf='center' />
+          </>
         )}
 
         {/* Calendar */}
diff --git a/src/components/Layout/use-read-more.tsx b/src/components/Layout/use-read-more.tsx
index 2934bb0b9..dc93072b1 100644
--- a/src/components/Layout/use-read-more.tsx
+++ b/src/components/Layout/use-read-more.tsx
@@ -1,18 +1,19 @@
 import { Box, Button } from '@chakra-ui/react'
-import { useEffect, useRef, useState } from 'react'
+import { ReactNode, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-export const useReadMoreMarkdown = (
-  colorFrom: string,
-  colorTo: string,
-  containerMaxHeightPx: number,
-  tantPerCentGradient?: number
-) => {
+interface ReadMoreMarkdownWrapperProps {
+  children: ReactNode
+  from?: string
+  toLight?: string
+  toDark?: string
+}
+
+export const useReadMoreMarkdown = (containerMaxHeightPx: number, tantPerCentGradient?: number) => {
   const { t } = useTranslation()
   const containerRef = useRef<HTMLDivElement>(null)
   const [isTruncated, setIsTruncated] = useState(false)
   const [readMore, setReadMore] = useState(false)
-
   const handleReadMore = () => setReadMore((prev) => !prev)
 
   useEffect(() => {
@@ -26,32 +27,40 @@ export const useReadMoreMarkdown = (
     }
   }, [])
 
-  const ReadMoreMarkdownWrapper = ({ children, from, to, ...props }: any) => (
-    <Box
-      {...props}
-      ref={containerRef}
-      position='relative'
-      height={readMore ? `${containerMaxHeightPx}px` : 'auto'}
-      overflow='hidden'
-      sx={{
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          height: isTruncated
-            ? `${(containerMaxHeightPx * (tantPerCentGradient ? tantPerCentGradient : containerMaxHeightPx)) / 100}px`
-            : '0',
-          width: '100%',
-          bottom: 0,
-          background:
-            isTruncated && readMore
-              ? `linear-gradient(to bottom, ${from ? from : colorFrom} 0%, ${to ? to : colorTo} 100%)`
-              : '',
-        },
-      }}
-    >
-      {children}
-    </Box>
-  )
+  const ReadMoreMarkdownWrapper = ({
+    children,
+    from = 'var(--chakra-colors-read_more-from)',
+    toLight = 'var(--chakra-colors-read_more-to-light)',
+    toDark = 'var(--chakra-colors-read_more-to-dark)',
+    ...props
+  }: ReadMoreMarkdownWrapperProps) => {
+    return (
+      <Box
+        {...props}
+        ref={containerRef}
+        position='relative'
+        height={readMore ? `${containerMaxHeightPx}px` : 'auto'}
+        overflow='hidden'
+      >
+        <Box
+          position='absolute'
+          height={
+            isTruncated
+              ? `${(containerMaxHeightPx * (tantPerCentGradient ? tantPerCentGradient : containerMaxHeightPx)) / 100}px`
+              : 0
+          }
+          w='full'
+          bottom={0}
+          pointerEvents='none'
+          background={isTruncated && readMore ? `linear-gradient(to bottom, ${from} 0%, ${toLight} 100%)` : 'none'}
+          _dark={{
+            background: isTruncated && readMore ? `linear-gradient(to bottom, ${from} 0%, ${toDark} 100%)` : 'none',
+          }}
+        ></Box>
+        {children}
+      </Box>
+    )
+  }
   const ReadMoreMarkdownButton = ({ ...props }: any) =>
     isTruncated ? (
       <Button onClick={handleReadMore} variant='' color='read_more' {...props}>
diff --git a/src/components/Organization/Header.tsx b/src/components/Organization/Header.tsx
index a55b62fc1..ce5b7dfc6 100644
--- a/src/components/Organization/Header.tsx
+++ b/src/components/Organization/Header.tsx
@@ -13,11 +13,7 @@ const OrganizationHeader = () => {
   const { organization } = useOrganization()
   const { account } = useClient()
 
-  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(
-    'rgba(242, 242, 242, 0)',
-    'rgba(242, 242, 242, 1)',
-    110
-  )
+  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(600, 20)
 
   const { containerRef, isTruncated, readMore, handleReadMore } = useReadMoreTitle()
 
@@ -98,7 +94,7 @@ const OrganizationHeader = () => {
           <ReadMoreMarkdownWrapper>
             <OrganizationDescription fontSize='lg' lineHeight={1.7} />
           </ReadMoreMarkdownWrapper>
-          <ReadMoreMarkdownButton colorScheme='primary' alignSelf='center' />
+          <ReadMoreMarkdownButton alignSelf='center' />
         </Flex>
         <AddressBtn />
       </Flex>
diff --git a/src/components/Process/Aside.tsx b/src/components/Process/Aside.tsx
index 6b78d808c..2445100ac 100644
--- a/src/components/Process/Aside.tsx
+++ b/src/components/Process/Aside.tsx
@@ -64,14 +64,7 @@ const ProcessAside = () => {
           </Text>
 
           {showVoters && !showVotes && (
-            <Box
-              className='brand-theme'
-              display='flex'
-              flexDirection='row'
-              justifyContent='center'
-              alignItems='center'
-              gap={2}
-            >
+            <Box display='flex' flexDirection='row' justifyContent='center' alignItems='center' gap={2}>
               <Trans
                 i18nKey='aside.votes'
                 components={{
@@ -84,12 +77,12 @@ const ProcessAside = () => {
           )}
 
           {showVotes && (
-            <Flex className='brand-theme' direction='column' justifyContent='center' alignItems='center' gap={2}>
+            <Flex direction='column' justifyContent='center' alignItems='center' gap={2}>
               <Flex direction={'row'} justifyContent='center' alignItems='center' gap={2}>
                 <Trans
                   i18nKey='aside.votes_weight'
                   components={{
-                    span: <Text as='span' fontWeight='bold' fontSize='xl3' textAlign='center' lineHeight={1} />,
+                    span: <Text as='span' fontWeight='bold' fontSize='3xl' textAlign='center' lineHeight={1} />,
                     text: <Text fontSize='xl' textAlign='center' lineHeight={1.3} />,
                   }}
                   count={votes}
@@ -159,30 +152,10 @@ const ProcessAside = () => {
         )}
       </Card>
       {(connected || isConnected) && (
-        <Box
-          alignSelf='center'
-          sx={{
-            '& button': {
-              color: 'process.spreadsheet.disconnect_color_desktop',
-              bgColor: 'transparent',
-              borderColor: 'transparent',
-
-              _before: {
-                bgColor: 'transparent',
-              },
-              _after: {
-                bgColor: 'transparent',
-              },
-            },
-          }}
-          mb={{ base: 10, md: 0 }}
-        >
+        <Box alignSelf='center' mb={{ base: 10, md: 0 }}>
           {connected && <SpreadsheetAccess />}
           {isConnected && election?.get('census.type') !== 'spreadsheet' && (
             <Button
-              variant='text'
-              textDecor='underline'
-              _hover={{ textDecor: 'none' }}
               onClick={() => {
                 disconnect()
                 clear()
diff --git a/src/components/Process/CardDetailed.tsx b/src/components/Process/CardDetailed.tsx
index 1c4635325..61064ec77 100644
--- a/src/components/Process/CardDetailed.tsx
+++ b/src/components/Process/CardDetailed.tsx
@@ -66,7 +66,7 @@ const ProcessDetailedCardTitle = () => {
 const ProcessDetailedCardDescription = () => {
   const { election } = useElection()
   const { t } = useTranslation()
-  const { ReadMoreMarkdownWrapper } = useReadMoreMarkdown('rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)', 100)
+  const { ReadMoreMarkdownWrapper } = useReadMoreMarkdown(100)
 
   if (election instanceof InvalidElection) {
     return null
diff --git a/src/components/Process/Header.tsx b/src/components/Process/Header.tsx
index 5dfd05836..f8f98434e 100644
--- a/src/components/Process/Header.tsx
+++ b/src/components/Process/Header.tsx
@@ -1,20 +1,15 @@
 import { InfoIcon, WarningIcon } from '@chakra-ui/icons'
-import { Box, Button, Flex, Icon, Image, Text, Tooltip } from '@chakra-ui/react'
-import {
-  ElectionDescription,
-  ElectionSchedule,
-  ElectionStatusBadge,
-  ElectionTitle,
-  OrganizationName,
-} from '@vocdoni/chakra-components'
+import { Box, Flex, Icon, IconButton, Image, Text, Tooltip } from '@chakra-ui/react'
+import { ElectionDescription, ElectionSchedule, ElectionStatusBadge, ElectionTitle } from '@vocdoni/chakra-components'
 import { useClient, useElection, useOrganization } from '@vocdoni/react-providers'
-import { CensusType, ElectionStatus, InvalidElection, PublishedElection, Strategy } from '@vocdoni/sdk'
+import { CensusType, ElectionStatus, ensure0x, InvalidElection, PublishedElection, Strategy } from '@vocdoni/sdk'
 import { ReactNode, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { MdKeyboardArrowLeft } from 'react-icons/md'
+import { generatePath, Link as ReactRouterLink } from 'react-router-dom'
 import { useReadMoreMarkdown } from '~components/Layout/use-read-more'
 import { ShareModalButton } from '~components/Share'
-import { GoBack } from '~theme/icons'
+import { Routes } from '~src/router/routes'
 import { ActionsMenu } from './ActionsMenu'
 import { StampIcon } from './Census/StampIcon'
 import { CreatedBy } from './CreatedBy'
@@ -28,12 +23,7 @@ const ProcessHeader = () => {
   const { organization, loaded } = useOrganization()
   const { account, client } = useClient()
   const [censusInfo, setCensusInfo] = useState<CensusInfo>()
-  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(
-    'rgba(242, 242, 242, 0)',
-    'rgba(242, 242, 242, 1)',
-    600,
-    20
-  )
+  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(600, 20)
   const strategy = useStrategy()
 
   // Get the census info to show the total size if the maxCensusSize is less than the total size
@@ -56,46 +46,44 @@ const ProcessHeader = () => {
   const showTotalCensusSize = censusInfo?.size && election?.maxCensusSize && election.maxCensusSize < censusInfo.size
 
   return (
-    <Box mb={10}>
+    <Box>
       {showOrgInformation && (
-        <Button as={Link} to={`/organization/0x${election?.organizationId}`} variant='go-back' mt={5}>
-          <GoBack />
-          <OrganizationName as='span' />
-        </Button>
+        <IconButton
+          as={ReactRouterLink}
+          to={generatePath(Routes.organization, { address: ensure0x(election?.organizationId) })}
+          aria-label='Back'
+          icon={<MdKeyboardArrowLeft />}
+        />
       )}
       {election?.header && (
         <Box w='100%' mx='auto' maxH='300px' my='30px' overflow='hidden'>
           <Image src={election?.header} w='100%' h='auto' objectFit='cover' />
         </Box>
       )}
-      <Flex direction={{ base: 'column', lg2: 'row' }} mb={7} gap={10}>
-        <Box flex={{ lg2: '1 1 80%' }}>
-          <ElectionTitle fontSize='heading' textAlign='left' my={5} />
+      <Flex direction={{ base: 'column', xl2: 'row' }} mb={7} gap={10}>
+        <Box flex={{ xl2: '1 1 80%' }}>
+          <ElectionTitle fontSize='4xl' textAlign='left' my={5} />
           <Flex flexDirection={{ base: 'column', xl: 'row' }} mb={4} justifyContent='space-between'>
-            <Flex gap={4} flexDirection={{ base: 'column', xl: 'row' }} alignItems={{ base: 'start', xl: 'center' }}>
+            <Flex gap={2} flexDirection={{ base: 'column', xl: 'row' }} alignItems={{ base: 'start', xl: 'center' }}>
               <Flex gap={3} justifyContent={'space-between'} w={{ base: '100%', xl: 'fit-content' }}>
-                <Flex gap={3} alignItems='center'>
-                  <Text as='span' color='process.label' fontSize='text-sm'>
+                <Flex gap={2} alignItems='center'>
+                  <Text as='span' color='process.label'>
                     {t('process.state')}
                   </Text>
-                  <ElectionStatusBadge fontSize='text-sm' />
+                  <ElectionStatusBadge />
                 </Flex>
-                <Box display={{ base: 'flex', xl: 'none' }} fontSize='text-sm'>
+                <Box display={{ base: 'flex', xl: 'none' }}>
                   <ShareModalButton
                     caption={t('share.election_share_text')}
                     text={t('share.election_share_btn_text')}
                   />
                 </Box>
               </Flex>
-              <Flex
-                flexDirection={{ base: 'column', xl: 'row' }}
-                alignItems={{ base: 'start', xl: 'center' }}
-                gap={{ xl: 3 }}
-              >
-                <Text as='span' color='process.label' fontSize='text-sm'>
+              <Flex flexDirection='row' alignItems='center' gap={1} flexWrap='wrap'>
+                <Text as='span' color='process.label'>
                   {t('process.schedule')}
                 </Text>
-                <ElectionSchedule textAlign='left' color='process.info_title' fontSize='text-sm' />
+                <ElectionSchedule textAlign='left' color='process.info_title' />
               </Flex>
             </Flex>
             <Box display={{ base: 'none', xl: 'flex' }}>
@@ -104,34 +92,33 @@ const ProcessHeader = () => {
           </Flex>
           <Flex flexDirection='column'>
             {!election?.description?.default.length && (
-              <Text textAlign='center' mt={5} color='process.no_description'>
+              <Text textAlign='center' mt={5} color='process.description'>
                 {t('process.no_description')}
               </Text>
             )}
             <Box className='md-sizes'>
-              <ReadMoreMarkdownWrapper from='rgba(250, 250, 250, 0)' to='rgba(250, 250, 250, 1)'>
+              <ReadMoreMarkdownWrapper>
                 <ElectionDescription mb={0} fontSize='lg' lineHeight={1.5} color='process.description' />
               </ReadMoreMarkdownWrapper>
             </Box>
-            <ReadMoreMarkdownButton colorScheme='primary' alignSelf='center' fontSize='text' />
+            <ReadMoreMarkdownButton colorScheme='primary' alignSelf='center' />
           </Flex>
         </Box>
 
         <Flex
-          flex={{ lg2: '1 1 20%' }}
+          flex={{ xl2: '1 1 20%' }}
           position='relative'
-          flexDirection={{ base: 'row', lg2: 'column' }}
+          flexDirection={{ base: 'row', xl2: 'column' }}
           alignItems='start'
           flexWrap='wrap'
-          justifyContent='start'
-          gap={{ base: 4, sm: 6, md: 8, lg: 4 }}
+          justifyContent={{ base: 'center', xl2: 'start' }}
+          gap={{ base: 4, sm: 10, xl2: 4 }}
           opacity={0.85}
           _hover={{
             opacity: 1,
           }}
-          fontSize='text-sm'
         >
-          <Box flexDir='row' display='flex' justifyContent='space-between' w={{ lg2: 'full' }}>
+          <Box flexDir='row' display='flex' justifyContent='space-between' w={{ xl2: 'full' }}>
             {election?.status !== ElectionStatus.CANCELED ? (
               <ProcessDate />
             ) : (
@@ -149,7 +136,7 @@ const ProcessHeader = () => {
           )}
           <Box cursor='help'>
             <Text fontWeight='bold'>
-              {t('process.census')} {showTotalCensusSize && <InfoIcon color='process_create.alert_info.color' ml={1} />}
+              {t('process.census')} {showTotalCensusSize && <InfoIcon ml={1} />}
             </Text>
             {showTotalCensusSize ? (
               <Tooltip
@@ -186,7 +173,7 @@ const ProcessHeader = () => {
             </>
           )}
           {showOrgInformation && (
-            <Box w={{ lg2: 'full' }}>
+            <Box w={{ xl2: 'full' }}>
               <Text fontWeight='bold' mb={1}>
                 {t('process.created_by')}
               </Text>
@@ -200,10 +187,9 @@ const ProcessHeader = () => {
                     flexWrap: 'wrap',
                   },
                   '& p strong': {
-                    maxW: { base: '100%', md: '220px', md2: '250px' },
+                    maxW: { base: '100%', md: '220px', xl2: '120px' },
                     isTruncated: true,
                     mr: 1,
-                    color: 'process.created_by',
                   },
                 }}
               />
diff --git a/src/components/Process/View.tsx b/src/components/Process/View.tsx
index 9a8b426a9..2395179d4 100644
--- a/src/components/Process/View.tsx
+++ b/src/components/Process/View.tsx
@@ -106,8 +106,19 @@ export const ProcessView = () => {
   }, [formErrors])
 
   return (
-    <Box>
-      <Box className='site-wrapper' mb={44}>
+    <Box
+      position='relative'
+      width='full'
+      m='0 auto'
+      maxW='1920px'
+      px={{
+        base: '10px',
+        sm: '20px',
+        md: '80px',
+      }}
+      mb={{ base: 10, md: 20 }}
+    >
+      <Box>
         <Header />
 
         {election instanceof PublishedElection && election?.streamUri && (
@@ -115,7 +126,7 @@ export const ProcessView = () => {
             maxW={{ base: '800px', lg: videoTop ? '400px' : '800px' }}
             ml={videoTop ? 'auto' : 'none'}
             position={{ base: 'unset', lg: 'sticky' }}
-            top={{ base: 0, lg2: 20 }}
+            top={{ base: 0, xl2: 20 }}
             zIndex={100}
           >
             <AspectRatio ref={videoRef} ratio={16 / 9}>
@@ -124,26 +135,23 @@ export const ProcessView = () => {
           </Box>
         )}
 
-        <Flex direction={{ base: 'column', lg2: 'row' }} alignItems='start' gap={{ lg2: 10 }} mt={20}>
+        <Flex direction={{ base: 'column', xl2: 'row' }} alignItems='start' gap={{ xl2: 10 }} mt={{ xl2: 10 }}>
           <Tabs
-            order={{ base: 2, lg2: 1 }}
+            order={{ base: 2, xl2: 1 }}
             variant='process'
             index={tabIndex}
             onChange={handleTabsChange}
-            flexGrow={0}
-            flexShrink={0}
-            flexBasis={{ base: '100%', md: '60%', lg: '65%', lg2: '70%', xl2: '75%' }}
-            w='full'
+            flex={{ xl2: '1 1 80%' }}
           >
             <TabList>
-              <Tab fontSize='text'>{t('process.questions')}</Tab>
+              <Tab>{t('process.questions')}</Tab>
               {election instanceof PublishedElection && election?.status !== ElectionStatus.CANCELED && (
-                <Tab fontSize='text'>{t('process.results')}</Tab>
+                <Tab>{t('process.results')}</Tab>
               )}
             </TabList>
             <TabPanels>
               <TabPanel>
-                <Box ref={electionRef} className='md-sizes' mb='100px' pt='25px'>
+                <Box ref={electionRef} pt='25px'>
                   <ElectionQuestions
                     onInvalid={(args) => {
                       setFormErrors(args)
@@ -151,40 +159,33 @@ export const ProcessView = () => {
                     confirmContents={(election, answers) => <ConfirmVoteModal election={election} answers={answers} />}
                   />
                 </Box>
-                <Box position='sticky' bottom={0} left={0} pb={1} pt={1} display={{ base: 'none', lg2: 'block' }}>
+                <Box position='sticky' bottom={0} left={0} pb={1} pt={1} display={{ base: 'none', xl2: 'block' }}>
                   <VoteButton setQuestionsTab={setQuestionsTab} />
                 </Box>
               </TabPanel>
-              <TabPanel mb={20}>
+              <TabPanel>
                 <ElectionResults />
               </TabPanel>
             </TabPanels>
           </Tabs>
           <Flex
-            flexGrow={1}
+            flex={{ xl2: '1 1 20%' }}
             flexDirection='column'
-            alignItems={{ base: 'center', lg2: 'start' }}
-            order={{ base: 1, lg2: 2 }}
+            alignItems={{ base: 'center', xl2: 'start' }}
+            order={{ base: 1, xl2: 2 }}
             gap={0}
-            mx={{ base: 'auto', lg2: 0 }}
-            position={{ lg2: 'sticky' }}
+            mx={{ base: 'auto', xl2: 0 }}
+            position={{ xl2: 'sticky' }}
             top={'300px'}
-            mt={10}
-            maxW={{ lg2: '290px' }}
+            mt={1}
+            maxW={{ xl2: '290px' }}
             mb={10}
           >
             <ProcessAside />
           </Flex>
         </Flex>
       </Box>
-      <Box
-        position='sticky'
-        bottom={0}
-        left={0}
-        bgColor='process.aside.aside_footer_mbl_border'
-        pt={1}
-        display={{ base: 'block', lg2: 'none' }}
-      >
+      <Box position='sticky' bottom={0} left={0} pt={1} display={{ base: 'block', xl2: 'none' }}>
         <VoteButton setQuestionsTab={setQuestionsTab} />
       </Box>
       <VotingVoteModal />
@@ -281,7 +282,7 @@ const ConfirmVoteModal = ({ election, answers }: { election: PublishedElection;
           overflowY='scroll'
           boxShadow='rgba(128, 128, 128, 0.42) 1px 1px 1px 1px'
           px={2}
-          borderRadius='lg2'
+          borderRadius='xl2'
         >
           {election.questions.map((q, i) => (
             <Box key={i}>
diff --git a/src/elements/Layout.tsx b/src/elements/Layout.tsx
index 939a12849..b0dcfa73a 100644
--- a/src/elements/Layout.tsx
+++ b/src/elements/Layout.tsx
@@ -7,7 +7,16 @@ const Layout = () => {
   const location = useLocation()
 
   return (
-    <Flex position='relative' flexDirection='column' minH='100vh' mx='auto' bgColor='bg'>
+    <Flex
+      position='relative'
+      flexDirection='column'
+      minH='100vh'
+      mx='auto'
+      bgColor={'process_view.bg_light'}
+      _dark={{
+        bgColor: 'process_view.bg_dark',
+      }}
+    >
       <HStack as='header' position='sticky' top={0} w='full' backdropFilter='blur(40px)' zIndex={30}>
         <Navbar />
       </HStack>
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index f99d57e37..8c153d0e4 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -5,6 +5,7 @@ export const colorsBase = {
     grayish: '#2B2A33',
     dark: '#1A202C',
   },
+  gradient: 'linear-gradient(to right, #546E39, #2E441A)',
   gray: {
     light: '#E2E8F0',
     normal: '#718096',
@@ -15,6 +16,7 @@ export const colorsBase = {
     pure: '#ffffff',
     dark: '#F5F5F7',
     alpha: 'whiteAlpha.300',
+    from_read_more: 'rgba(245, 245, 247, 0)',
   },
   yellow: '#FFB116',
 }
@@ -51,6 +53,13 @@ export const colors = {
       bg_checked_light: colorsBase.white.pure,
       bg_checked_dark: colorsBase.blue.dark,
     },
+    read_more: {
+      from: colorsBase.white.from_read_more,
+      to: {
+        light: colorsBase.white.pure,
+        dark: colorsBase.blue.grayish,
+      },
+    },
     sidebar: {
       bg: {
         light: colorsBase.white.pure,
@@ -153,6 +162,58 @@ export const colors = {
     },
   },
   org_text_secondary: colorsBase.gray.normal,
+
+  process: {
+    aside: {
+      bg: colorsBase.gradient,
+      color: colorsBase.white.pure,
+      vote_btn_color: colorsBase.black,
+      vote_btn_bg: colorsBase.primary,
+      verify_link: colorsBase.white.pure,
+    },
+    canceled: colorsBase.primary,
+    info_title: colorsBase.primary,
+    label: colorsBase.gray.normal,
+    questions: {
+      alert: {
+        bg: colorsBase.primary,
+        color: colorsBase.white.pure,
+        link_color: colorsBase.black,
+        link_bg: colorsBase.white.pure,
+      },
+      question_selected: {
+        bg: colorsBase.primary,
+        color: colorsBase.white.pure,
+      },
+      hover: {
+        light: colorsBase.white.pure,
+        dark: colorsBase.blue.grayish,
+      },
+      disabled: {
+        light: colorsBase.white.pure,
+        dark: colorsBase.blue.grayish,
+      },
+      title: {
+        ligth: colorsBase.primary,
+        dark: colorsBase.white.pure,
+      },
+    },
+    paused: colorsBase.primary,
+    results: {
+      alert_bg: colorsBase.primary,
+      alert_color: colorsBase.white.pure,
+      bg: colorsBase.gray.light,
+      description: colorsBase.gray.normal,
+      progressbar_bg: colorsBase.gray.light,
+      title: colorsBase.primary,
+    },
+    tabs: {
+      active_bg: colorsBase.gray.light,
+      hover_bg: colorsBase.gray.light,
+      border_bottom_list: colorsBase.gray.light,
+    },
+  },
+
   process_create: {
     bg: {
       dark: colorsBase.blue.dark,
@@ -174,7 +235,17 @@ export const colors = {
     text_secondary: colorsBase.gray.normal,
     question_index: colorsBase.primary,
   },
-
+  process_view: {
+    bg_light: colorsBase.white.dark,
+    bg_dark: colorsBase.blue.dark,
+  },
+  read_more: {
+    from: colorsBase.white.from_read_more,
+    to: {
+      light: colorsBase.white.dark,
+      dark: colorsBase.blue.dark,
+    },
+  },
   tab: {
     variant: {
       card: {
diff --git a/src/theme/components/Questions.ts b/src/theme/components/Questions.ts
new file mode 100644
index 000000000..66b1f3455
--- /dev/null
+++ b/src/theme/components/Questions.ts
@@ -0,0 +1,210 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { questionsAnatomy } from '@vocdoni/chakra-components'
+import checkIcon from '/assets/check-icon.png'
+
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(questionsAnatomy)
+
+const baseStyle = definePartsStyle({
+  alert: {
+    px: { base: 3, sm: 5 },
+    py: 7,
+    mb: '30px',
+    borderRadius: '8px',
+    color: 'process.questions.alert.color',
+    bgColor: 'process.questions.alert.bg',
+    display: 'grid',
+    columnGap: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gridTemplateColumns: 'auto 1fr',
+    gridTemplateRows: 'auto auto',
+    boxShadow: 'var(--box-shadow-darker)',
+    border: 'none',
+
+    '& span': {
+      color: 'white',
+      ml: { base: 2, lg: 10, xl: 2 },
+      gridRow: '1/3',
+      gridColumn: '1/2',
+    },
+  },
+
+  alertTitle: {
+    fontSize: 'lg',
+    mb: 3,
+  },
+
+  alertDescription: {
+    display: 'flex',
+    gap: 2,
+    flexDirection: { base: 'column', lg2: 'row' },
+    justifyContent: 'center',
+    alignItems: { md: 'center' },
+    whiteSpace: { base: 'pre-wrap', lg2: 'nowrap' },
+  },
+
+  alertLink: {
+    display: 'block',
+    w: '100%',
+    px: 2,
+    py: 1,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    color: 'process.questions.alert.link_color',
+    backgroundColor: 'process.questions.alert.link_bg',
+    borderRadius: 'md',
+    fontSize: 'sm',
+
+    _hover: {
+      textDecoration: 'none',
+    },
+  },
+
+  wrapper: {
+    '& > form': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 10,
+    },
+  },
+
+  question: {
+    width: { base: 'full', xl: '80%' },
+    m: 0,
+    mx: 'auto',
+
+    '& > div': {
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+    },
+  },
+
+  title: {
+    display: 'block',
+    textAlign: 'start',
+    lineHeight: 1.3,
+    fontSize: 'xl !important',
+    color: 'process.questions.title.light',
+
+    _dark: {
+      color: 'process.questions.title.dark',
+    },
+  },
+
+  description: {
+    px: 1,
+    color: 'process.questions.description',
+    textAlign: 'start',
+    fontSize: 'md !important',
+
+    '& a': {
+      textDecoration: 'underline',
+    },
+
+    _dark: {
+      color: 'process.questions.title.dark',
+    },
+  },
+
+  stack: {
+    '& label': {
+      borderRadius: 'lg',
+      overflow: 'hidden',
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      w: { lg2: '99%' },
+      _hover: {
+        bgColor: 'process.questions.hover.light',
+
+        _dark: {
+          bgColor: 'process.questions.hover.dark',
+        },
+      },
+
+      '& span:nth-of-type(1)': {
+        display: { base: 'none', md: 'block' },
+        position: 'absolute',
+        width: '30px',
+        height: '30px',
+        background: 'transparent',
+        ml: '10px',
+        borderRadius: 'none',
+
+        '&[data-checked=""]': {
+          '&:before': {
+            display: 'none',
+            bgColor: 'transparent',
+          },
+
+          background: 'process.questions.question_selected.bg',
+          borderColor: 'white',
+          borderWidth: '1px',
+          bgSize: '15px',
+          bgRepeat: 'no-repeat',
+          bgPosition: 'center',
+          bgImage: checkIcon,
+
+          _hover: {
+            border: 'none',
+            background: 'process.questions.question_selected.bg',
+            borderColor: 'process.questions.question_selected.bg',
+            bgSize: '15px',
+            bgRepeat: 'no-repeat',
+            bgPosition: 'center',
+            bgImage: checkIcon,
+          },
+        },
+
+        '&[data-disabled=""]': {
+          bgColor: 'process.questions.disabled.light',
+          border: 'none',
+
+          _dark: {
+            bgColor: 'process.questions.disabled.dark',
+          },
+        },
+      },
+      '& span:nth-of-type(2)': {
+        p: 2,
+        pl: { md: 12 },
+        m: 0,
+        border: '1px solid lightgray',
+        w: '100%',
+        borderRadius: 'lg',
+      },
+
+      '& input:checked ~ span:nth-of-type(2)': {
+        color: 'process.questions.question_selected.color',
+        bgColor: 'process.questions.question_selected.bg',
+        w: '100%',
+      },
+    },
+  },
+
+  radio: {
+    borderRadius: 'full !important',
+  },
+
+  checkbox: {
+    // Checkbox label style
+    '& span:nth-of-type(2)': {
+      display: 'flex',
+      flexDir: 'row',
+      justifyContent: 'space-between',
+      justifyItems: 'center',
+      alignItems: 'center',
+    },
+  },
+
+  error: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+})
+
+export const ElectionQuestions = defineMultiStyleConfig({
+  baseStyle,
+})
diff --git a/src/theme/components/Tabs.ts b/src/theme/components/Tabs.ts
index 46114c17f..5b688e193 100644
--- a/src/theme/components/Tabs.ts
+++ b/src/theme/components/Tabs.ts
@@ -109,9 +109,43 @@ const card = definePartsStyle({
     p: 0,
   },
 })
+const process = definePartsStyle({
+  root: {},
+  tabpanel: {
+    px: { base: 0, sm: 4 },
+    mb: 0,
+  },
+  tab: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    color: 'process.tabs.color',
+    fontWeight: 'normal',
+    borderTopRadius: 'md',
+    fontSize: 'lg',
+
+    _hover: {
+      bgColor: 'process.tabs.hover',
+    },
+    _active: {
+      bgColor: 'process.tabs.active_bg',
+    },
+    _selected: {
+      fontWeight: 'bold',
+      borderBottom: '1px solid',
+    },
+  },
+  tablist: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottom: '1px solid',
+    borderColor: 'process.tabs.border_bottom_list',
+  },
+})
 
 const variants = {
   card,
+  process,
 }
 
 export const Tabs = defineMultiStyleConfig({ variants })
diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts
index 771ed6cc7..3c06ed9a1 100644
--- a/src/theme/components/card.ts
+++ b/src/theme/components/card.ts
@@ -485,5 +485,23 @@ export const Card = defineMultiStyleConfig({
         },
       },
     },
+    aside: {
+      container: {
+        direction: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        px: { base: 6, xl2: 8 },
+        py: { base: 6, xl2: 8 },
+        w: 'full',
+        gap: 4,
+        mt: { md: 7 },
+        mb: { base: 7, xl2: 0 },
+        color: 'process.aside.color',
+        background: 'process.aside.bg',
+        boxShadow: 'var(--box-shadow-banner)',
+        borderRadius: 'lg',
+        fontSize: 'text',
+      },
+    },
   },
 })
diff --git a/src/theme/components/results.ts b/src/theme/components/results.ts
new file mode 100644
index 000000000..a5632b094
--- /dev/null
+++ b/src/theme/components/results.ts
@@ -0,0 +1,92 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { resultsAnatomy } from '@vocdoni/chakra-components'
+
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(resultsAnatomy)
+
+const baseStyle = definePartsStyle({
+  question: {
+    p: 4,
+    width: { base: 'full', xl: '80%' },
+    m: 0,
+    mx: 'auto',
+
+    '& > div:nth-of-type(1)': {
+      '& > p': {
+        fontSize: 'xl2',
+        mb: 5,
+        lineHeight: 1.3,
+        textAlign: 'start',
+      },
+    },
+    '& > div:nth-of-type(2) > div': {
+      display: 'flex',
+      flexDirection: { base: 'column', md: 'row' },
+      alignItems: { base: 'center', md: 'start' },
+      gap: 3,
+      mb: 5,
+
+      '& p:nth-of-type(1)': {
+        maxW: '100%',
+        flexBasis: '33%',
+        flexGrow: 1,
+        color: 'process.results.description',
+      },
+      '& p:nth-of-type(2)': {
+        mx: 4,
+      },
+      '& div': {
+        w: 'full',
+        flexBasis: '33%',
+        flexGrow: 0,
+        flexShrink: 0,
+        h: 6,
+        borderRadius: 'md',
+        bgColor: 'results.progressbar_bg',
+        overflow: 'hidden',
+        position: 'relative',
+
+        '& div': {
+          h: 6,
+          background: {
+            base: `linear-gradient(to right, #789D53 0%, #546E39 50%, #2E441A 100%) left/var(--p,100%) fixed;`,
+            md: `linear-gradient(to right, #789D53 65%, #546E39 79.5%, #2E441A 94%) left/var(--p,100%) fixed;`,
+            xl: `linear-gradient(to right, #789D53 46%, #546E39 56%, #2E441A 66%) left/var(--p,100%) fixed;`,
+          },
+        },
+      },
+
+      '& > div:nth-of-type(2) > div:last-of-type': {
+        mb: 0,
+      },
+    },
+  },
+
+  secret: {
+    px: 8,
+    py: 8,
+    my: 4,
+    color: 'process.results.alert_color',
+    bgColor: 'process.results.alert_bg',
+    borderRadius: 'lg',
+    whiteSpace: 'wrap',
+  },
+
+  title: {
+    fontWeight: 700,
+    fontSize: 'xl',
+    lineHeight: 7,
+    color: 'process.results.title',
+    textAlign: { base: 'center', md: 'start' },
+    mb: 3,
+  },
+
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+  },
+})
+
+export const ElectionResults = defineMultiStyleConfig({
+  baseStyle,
+})
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 02836fa9e..04b508658 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,4 +1,4 @@
-import { ColorMode, extendTheme } from '@chakra-ui/react'
+import { ColorMode, extendTheme, textDecoration } from '@chakra-ui/react'
 import { darkTheme, lightTheme } from '@rainbow-me/rainbowkit'
 import { theme as vtheme } from '@vocdoni/chakra-components'
 import { breakpoints } from './breakpoints'
@@ -21,6 +21,8 @@ import { Text } from './components/text'
 import { Textarea } from './components/textarea'
 import { editor } from './editor'
 import { spacing } from './space'
+import { ElectionQuestions } from './components/Questions'
+import { ElectionResults } from './components/results'
 
 export const theme = extendTheme(vtheme, {
   config: {
@@ -37,6 +39,42 @@ export const theme = extendTheme(vtheme, {
       '.brand-gradient': {
         bgGradient: 'linear-gradient(to bottom, #B5F492, #338B93)',
       },
+      '.md-sizes': {
+        '& :first-of-type': {
+          mt: 0,
+        },
+        'h2[level="1"]': {
+          fontSize: '26px',
+        },
+        'h2[level="2"]': {
+          fontSize: '23px',
+        },
+        'h3[level="3"]': {
+          fontSize: '20px',
+        },
+        p: {
+          fontSize: '18px',
+        },
+        li: {
+          fontSize: '18px',
+        },
+        'li:last-of-type': {
+          mb: '20px',
+        },
+        ul: {
+          fontSize: '18px',
+        },
+        ol: {
+          fontSize: '18px',
+        },
+        a: {
+          fontSize: '18px',
+          textDecoration: 'underline',
+        },
+        pre: {
+          'white-space': 'pre-wrap',
+        },
+      },
     },
   },
   components: {
@@ -46,6 +84,8 @@ export const theme = extendTheme(vtheme, {
     Card,
     Checkbox,
     ElectionTitle,
+    ElectionQuestions,
+    ElectionResults,
     Form,
     Heading,
     Input,