diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index 050a8483..e77b1148 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -9,8 +9,10 @@ import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"
 import { ProposalTableRow } from "modules/lite/explorer/components/ProposalTableRow"
 import { StyledDivider } from "modules/lite/explorer/components/ProposalList"
 import { Poll } from "models/Polls"
+import ReactPaginate from "react-paginate"
+import "../pages/DAOList/styles.css"
 
-const TableContainer = styled(ContentContainer)({
+const TableContainer = styled(Grid)({
   width: "100%"
 })
 
@@ -21,7 +23,6 @@ const TableHeader = styled(Grid)({
 
 const ProposalsFooter = styled(Grid)({
   padding: "16px 46px",
-  borderTop: ".6px solid rgba(125,140,139, 0.2)",
   minHeight: 34
 })
 
@@ -42,25 +43,24 @@ export const ProposalsList: React.FC<Props> = ({
   rightItem,
   liteProposals
 }) => {
+  const [currentPage, setCurrentPage] = useState(0)
   const [open, setopen] = useState(true)
+  const [offset, setOffset] = useState(0)
+
+  const pageCount = Math.ceil(proposals && liteProposals ? proposals.length + liteProposals.length / 16 : 0)
+
+  // Invoke when user click to request another page.
+  const handlePageClick = (event: { selected: number }) => {
+    if (proposals) {
+      const newOffset = (event.selected * 4) % proposals.length
+      setOffset(newOffset)
+      setCurrentPage(event.selected)
+    }
+  }
 
   return (
     <TableContainer item>
-      <Grid container direction="column" wrap={"nowrap"}>
-        <TableHeader item container justifyContent="space-between">
-          <Grid item>
-            <Typography variant="body2" style={{ fontWeight: "500" }} color="textPrimary">
-              {title}
-            </Typography>
-          </Grid>
-          {proposals.length && proposals.length > 0 ? (
-            <Grid item>
-              <IconButton aria-label="expand row" size="small" onClick={() => setopen(!open)}>
-                {open ? <KeyboardArrowUpIcon htmlColor="#FFF" /> : <KeyboardArrowDownIcon htmlColor="#FFF" />}
-              </IconButton>
-            </Grid>
-          ) : null}
-        </TableHeader>
+      <Grid container direction="column" wrap={"nowrap"} style={{ gap: 16 }}>
         {proposals.length && proposals.length > 0 ? (
           <Grid
             item
@@ -88,7 +88,6 @@ export const ProposalsList: React.FC<Props> = ({
               return (
                 <div key={`poll-${i}`}>
                   <ProposalTableRow poll={poll} />
-                  {liteProposals.length - 1 !== i ? <StyledDivider key={`divider-${i}`} /> : null}
                 </div>
               )
             })
@@ -115,6 +114,20 @@ export const ProposalsList: React.FC<Props> = ({
           </ProposalsFooter>
         )}
       </Grid>
+      {/* <Grid container direction="row" justifyContent="flex-end">
+        <ReactPaginate
+          previousLabel={"<"}
+          breakLabel="..."
+          nextLabel=">"
+          onPageChange={handlePageClick}
+          pageRangeDisplayed={4}
+          pageCount={pageCount}
+          renderOnZeroPageCount={null}
+          containerClassName={"pagination"}
+          activeClassName={"active"}
+          forcePage={currentPage}
+        />
+      </Grid> */}
     </TableContainer>
   )
 }
diff --git a/src/modules/explorer/components/StatusBadge.tsx b/src/modules/explorer/components/StatusBadge.tsx
index 5fa9579f..d203ea8c 100644
--- a/src/modules/explorer/components/StatusBadge.tsx
+++ b/src/modules/explorer/components/StatusBadge.tsx
@@ -6,8 +6,8 @@ const statusColors = (status: ProposalStatus | "all") => {
   switch (status) {
     case ProposalStatus.ACTIVE:
       return {
-        background: "#0085ff33",
-        color: "#0085FF",
+        background: "#2A4660",
+        color: "#85C4FF",
         text: "Active"
       }
     case ProposalStatus.PENDING:
@@ -30,8 +30,8 @@ const statusColors = (status: ProposalStatus | "all") => {
       }
     case ProposalStatus.REJECTED:
       return {
-        background: "#ff5a6433",
-        color: "#ff5a64",
+        background: "#513438",
+        color: "#FF8FA0",
         text: "Rejected"
       }
     case ProposalStatus.EXPIRED:
diff --git a/src/modules/explorer/pages/User/components/UserMovements.tsx b/src/modules/explorer/pages/User/components/UserMovements.tsx
index 086f1933..ace73457 100644
--- a/src/modules/explorer/pages/User/components/UserMovements.tsx
+++ b/src/modules/explorer/pages/User/components/UserMovements.tsx
@@ -283,11 +283,26 @@ export const UserMovements: React.FC<{
           </TabPanel>
           <TabPanel value={selectedTabVotes} index={1}>
             <Grid item style={{ marginTop: 38 }}>
-              {proposalsCreated && cycleInfo && (
+              {proposalsVoted && cycleInfo && (
                 <ProposalsList
+                  title={"Voting History"}
                   currentLevel={cycleInfo.currentLevel}
-                  proposals={proposalsCreated}
-                  title={"Proposals Posted"}
+                  proposals={proposalsVoted}
+                  rightItem={proposal => {
+                    const voteDecision = getVoteDecision(proposal)
+                    return (
+                      <Grid container>
+                        <Grid item>
+                          <VotedText color="textPrimary">Voted</VotedText>
+                        </Grid>
+                        <Grid item>
+                          <StatusText color={voteDecision ? "secondary" : "error"}>
+                            {voteDecision ? "YES" : "NO"}
+                          </StatusText>
+                        </Grid>
+                      </Grid>
+                    )
+                  }}
                   liteProposals={[]}
                 />
               )}
@@ -295,11 +310,26 @@ export const UserMovements: React.FC<{
           </TabPanel>
           <TabPanel value={selectedTabVotes} index={2}>
             <Grid item style={{ marginTop: 38 }}>
-              {proposalsCreated && cycleInfo && (
+              {pollsPosted && cycleInfo && (
                 <ProposalsList
+                  title={"Voting History"}
                   currentLevel={cycleInfo.currentLevel}
                   proposals={[]}
-                  title={"Proposals Posted"}
+                  rightItem={proposal => {
+                    const voteDecision = getVoteDecision(proposal)
+                    return (
+                      <Grid container>
+                        <Grid item>
+                          <VotedText color="textPrimary">Voted</VotedText>
+                        </Grid>
+                        <Grid item>
+                          <StatusText color={voteDecision ? "secondary" : "error"}>
+                            {voteDecision ? "YES" : "NO"}
+                          </StatusText>
+                        </Grid>
+                      </Grid>
+                    )
+                  }}
                   liteProposals={pollsPosted}
                 />
               )}
diff --git a/src/modules/explorer/pages/User/index.tsx b/src/modules/explorer/pages/User/index.tsx
index 44d1b4cf..dd595343 100644
--- a/src/modules/explorer/pages/User/index.tsx
+++ b/src/modules/explorer/pages/User/index.tsx
@@ -22,10 +22,11 @@ import { useTokenDelegationSupported } from "services/contracts/token/hooks/useT
 import { CopyButton } from "modules/common/CopyButton"
 import { UserMovements } from "./components/UserMovements"
 
-const ContentBlockItem = styled(Grid)({
-  padding: "35px 52px",
-  borderTop: `0.3px solid #4a4e4e`
-})
+const ContentBlockItem = styled(Grid)(({ theme }: { theme: Theme }) => ({
+  padding: "37px 42px",
+  background: theme.palette.primary.main,
+  borderRadius: 8
+}))
 
 const BalancesHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({
   minHeight: "178px",
diff --git a/src/modules/lite/explorer/components/ProposalList.tsx b/src/modules/lite/explorer/components/ProposalList.tsx
index c805e5e4..0d066605 100644
--- a/src/modules/lite/explorer/components/ProposalList.tsx
+++ b/src/modules/lite/explorer/components/ProposalList.tsx
@@ -15,11 +15,6 @@ export enum ProposalPopularity {
   POPULAR = "popular"
 }
 
-const ProposalListContainer = styled(Grid)(({ theme }) => ({
-  background: theme.palette.primary.main,
-  borderRadius: 8
-}))
-
 const Header = styled(Grid)({
   padding: "24px 41px"
 })
@@ -177,7 +172,7 @@ export const ProposalList: React.FC<{ polls: Poll[]; id: string | undefined; dao
   )
 
   return (
-    <ProposalListContainer container direction="column">
+    <Grid container direction="column" style={{ gap: 16 }}>
       <Header container justifyContent="space-between" alignItems="center">
         <Grid item xs={isMobileSmall ? 12 : 3}>
           <Title variant={"body2"} color="textPrimary">
@@ -206,13 +201,11 @@ export const ProposalList: React.FC<{ polls: Poll[]; id: string | undefined; dao
           />
         </Grid>
       </Header>
-      <StyledDivider />
       {communityPolls && communityPolls.length > 0 ? (
         communityPolls.map((poll, i) => {
           return (
             <div style={{ width: "inherit" }} key={`poll-${i}`}>
               <ProposalTableRow poll={poll} daoId={daoId} />
-              {communityPolls.length - 1 !== i ? <StyledDivider key={`divider-${i}`} /> : null}
             </div>
           )
         })
@@ -221,6 +214,6 @@ export const ProposalList: React.FC<{ polls: Poll[]; id: string | undefined; dao
           <NoProposalsText color="textPrimary">No proposals</NoProposalsText>
         </Header>
       )}
-    </ProposalListContainer>
+    </Grid>
   )
 }
diff --git a/src/modules/lite/explorer/components/ProposalTableRow.tsx b/src/modules/lite/explorer/components/ProposalTableRow.tsx
index 6900a603..8ccbe0b2 100644
--- a/src/modules/lite/explorer/components/ProposalTableRow.tsx
+++ b/src/modules/lite/explorer/components/ProposalTableRow.tsx
@@ -3,11 +3,9 @@ import { styled, Grid, Typography, useTheme, useMediaQuery, LinearProgress } fro
 import { RowContainer } from "./tables/RowContainer"
 import { ProposalStatus, TableStatusBadge } from "./ProposalTableRowStatusBadge"
 import { useHistory } from "react-router"
-import { Blockie } from "modules/common/Blockie"
-import { toShortAddress } from "services/contracts/utils"
 import { Poll } from "models/Polls"
 import ReactHtmlParser from "react-html-parser"
-
+import dayjs from "dayjs"
 export interface ProposalTableRowData {
   daoId?: string
   id: string
@@ -15,25 +13,24 @@ export interface ProposalTableRowData {
 
 const ArrowInfo = styled(Typography)(({ theme }) => ({
   fontFamily: "Roboto Flex",
-  fontWeight: 500,
+  fontWeight: 300,
   fontSize: 16,
+  color: "#bfc5ca",
   [theme.breakpoints.down("xs")]: {
     marginTop: 5
   }
 }))
 
-const Address = styled(Typography)({
-  marginLeft: 12
-})
-
-const BlockieContainer = styled(Grid)({
-  marginBottom: 19
+const Title = styled(Typography)({
+  fontWeight: 600,
+  fontSize: 18
 })
 
 const DescriptionText = styled(Typography)(({ theme }) => ({
   fontWeight: 300,
   fontSize: 18,
   width: "inherit",
+  color: "#BFC5CA",
   wordBreak: "break-word",
   [theme.breakpoints.down("sm")]: {
     fontSize: 16
@@ -48,37 +45,35 @@ export const ProposalTableRow: React.FC<{ poll: Poll; daoId?: string }> = ({ pol
 
   return (
     <RowContainer
+      style={{ background: "#2F3438", borderRadius: 8 }}
       item
       container
-      alignItems="center"
+      alignItems="baseline"
       onClick={() =>
         navigate.push(`/explorer/lite/dao/${poll.daoID}/community/proposal/${poll._id}`, { poll: poll, daoId: daoId })
       }
     >
-      <BlockieContainer container direction="row">
-        <Blockie address={"tz1bQgEea45ciBpYdFj4y4P3hNyDM8aMF6WB"} size={24} />
-        <Address color="textPrimary" variant="subtitle2">
-          {toShortAddress(poll.author)}
-        </Address>
-      </BlockieContainer>
-      <Grid container item style={{ gap: 25 }} xs={12} md={12} justifyContent={isMobile ? "center" : "flex-start"}>
-        <Typography variant="h4" color="textPrimary" align={isMobile ? "center" : "left"}>
+      <Grid container item style={{ gap: 16 }} xs={12} md={12} justifyContent={isMobile ? "center" : "flex-start"}>
+        <Title color="textPrimary" align={isMobile ? "center" : "left"}>
           {poll.name}
-        </Typography>
+        </Title>
+
+        <Grid container direction="row">
+          <DescriptionText>{ReactHtmlParser(poll.description)}</DescriptionText>
+        </Grid>
 
         <Grid
           container
           direction={isMobile ? "column" : "row"}
-          alignItems={isMobileSmall ? "center" : "flex-start"}
+          alignItems={isMobileSmall ? "center" : "center"}
           wrap="nowrap"
           style={{ gap: 18 }}
         >
           <TableStatusBadge status={poll.isActive || ProposalStatus.ACTIVE} />
           <ArrowInfo color="textPrimary">{poll.timeFormatted}</ArrowInfo>
-        </Grid>
-
-        <Grid>
-          <DescriptionText color="textPrimary">{ReactHtmlParser(poll.description)}</DescriptionText>
+          {poll.isActive === ProposalStatus.ACTIVE ? (
+            <ArrowInfo> • &nbsp; Created {dayjs(poll.startTime).format("LL")}</ArrowInfo>
+          ) : null}
         </Grid>
       </Grid>
     </RowContainer>
diff --git a/src/modules/lite/explorer/components/ProposalTableRowStatusBadge.tsx b/src/modules/lite/explorer/components/ProposalTableRowStatusBadge.tsx
index e09b2b52..6a3d2600 100644
--- a/src/modules/lite/explorer/components/ProposalTableRowStatusBadge.tsx
+++ b/src/modules/lite/explorer/components/ProposalTableRowStatusBadge.tsx
@@ -11,19 +11,19 @@ export enum ProposalStatus {
 
 const getStatusColor = (status: ProposalStatus, theme: Theme): string => {
   const statusToColor = {
-    [ProposalStatus.ACTIVE]: theme.palette.secondary.main,
-    [ProposalStatus.CLOSED]: "#7e496f"
+    [ProposalStatus.ACTIVE]: "#85c4ff",
+    [ProposalStatus.CLOSED]: "#cc8aff"
   }
 
   return statusToColor[status]
 }
 
 const Badge = styled(Grid)(({ status, theme }: { status: ProposalStatus; theme: Theme }) => ({
-  "borderRadius": 4,
+  "borderRadius": 50,
   "boxSizing": "border-box",
   "minWidth": 87,
   "textAlign": "center",
-  "padding": "2px 16px",
+  "padding": "4px 16px",
 
   "background": hexToRgba(getStatusColor(status, theme), 0.4),
   "color": getStatusColor(status, theme),
@@ -34,14 +34,15 @@ const Badge = styled(Grid)(({ status, theme }: { status: ProposalStatus; theme:
 
 const Text = styled(Typography)({
   fontWeight: 500,
-  fontSize: 16
+  fontSize: 16,
+  textTransform: "capitalize"
 })
 
 export const TableStatusBadge: React.FC<{ status: ProposalStatus } & GridProps> = ({ status }) => (
   <Badge status={status} theme={theme}>
     <Grid container alignItems="center" justifyContent="center">
       <Grid item>
-        <Text> {status.toUpperCase()} </Text>
+        <Text> {status} </Text>
       </Grid>
     </Grid>
   </Badge>
diff --git a/src/modules/lite/explorer/components/tables/RowContainer.tsx b/src/modules/lite/explorer/components/tables/RowContainer.tsx
index c1f4f713..f76b05fe 100644
--- a/src/modules/lite/explorer/components/tables/RowContainer.tsx
+++ b/src/modules/lite/explorer/components/tables/RowContainer.tsx
@@ -1,8 +1,8 @@
 import { Grid, styled } from "@material-ui/core"
 
 export const RowContainer = styled(Grid)(({ theme }) => ({
-  minHeight: 145,
-  padding: "44px 38px",
+  minHeight: 192,
+  padding: "37px 48px",
   cursor: "pointer",
   [theme.breakpoints.down("md")]: {
     padding: "34px 38px",
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 73b4cbc4..afcd26e3 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -21,7 +21,7 @@ export const theme = createTheme({
       contrastText: "#1C1F23"
     },
     text: {
-      primary: "#FFFFFF"
+      primary: "#FDFDFD"
     },
     error: {
       main: "#ED254E"
@@ -123,7 +123,7 @@ export const theme = createTheme({
     MuiStepLabel: {
       label: {
         "cursor": "pointer",
-        "color": "#fff",
+        "color": "#FDFDFD",
         "opacity": 0.5,
         "marginLeft": 15,
         "lineHeight": "40px",
@@ -138,11 +138,11 @@ export const theme = createTheme({
         }
       },
       active: {
-        color: "#fff !important",
+        color: "#FDFDFD !important",
         opacity: 1
       },
       completed: {
-        color: "#fff !important",
+        color: "#FDFDFD !important",
         opacity: 0.5,
         fontWeight: 300
       }
@@ -167,7 +167,7 @@ export const theme = createTheme({
         color: "#1C1F23 !important"
       },
       completed: {
-        color: "#fff !important"
+        color: "#FDFDFD !important"
       },
       root: {
         "height": 32,
@@ -176,7 +176,7 @@ export const theme = createTheme({
         "border": "1px solid #3D3D3D",
         "borderRadius": "50%",
         "&$active": {
-          "fill": "#fff",
+          "fill": "#FDFDFD",
           "border": "1px solid #3D3D3D",
           "borderRadius": "50%",
           "& $text": {
@@ -186,7 +186,7 @@ export const theme = createTheme({
         }
       },
       text: {
-        fill: "#fff"
+        fill: "#FDFDFD"
       }
     },
     MuiIconButton: {
@@ -262,12 +262,12 @@ export const theme = createTheme({
     MuiInputBase: {
       input: {
         textAlign: "center",
-        color: "#fff"
+        color: "#FDFDFD"
       }
     },
     MuiRadio: {
       root: {
-        color: "#fff"
+        color: "#FDFDFD"
       }
     },
     MuiDivider: {
@@ -309,7 +309,7 @@ export const theme = createTheme({
         textTransform: "capitalize"
       },
       icon: {
-        color: "#fff"
+        color: "#FDFDFD"
       }
     },
     MuiDialogContentText: {
@@ -335,7 +335,7 @@ export const theme = createTheme({
       track: {
         "borderRadius": "40px",
         "backgroundColor": "inherit",
-        "border": "1px solid #fff",
+        "border": "1px solid #FDFDFD",
         "opacity": 0.5,
         "$checked$checked + &": {
           opacity: 1,
@@ -352,7 +352,7 @@ export const theme = createTheme({
         }
       },
       colorSecondary: {
-        "color": "#fff",
+        "color": "#FDFDFD",
         "$checked$checked + &": {
           color: "#81FEB7"
         },
diff --git a/src/theme/legacy.ts b/src/theme/legacy.ts
index ee5e0fdc..51d86fe2 100644
--- a/src/theme/legacy.ts
+++ b/src/theme/legacy.ts
@@ -12,7 +12,7 @@ export const legacyTheme = createMuiTheme({
     },
     text: {
       primary: "#000000",
-      secondary: "#fff"
+      secondary: "#FDFDFD"
     },
     error: {
       main: "#ED254E"
@@ -91,7 +91,7 @@ export const legacyTheme = createMuiTheme({
         marginTop: -3
       },
       label: {
-        "color": "#fff",
+        "color": "#FDFDFD",
         "opacity": 0.5,
         "marginLeft": 15,
         "fontSize": 14,
@@ -110,11 +110,11 @@ export const legacyTheme = createMuiTheme({
         }
       },
       active: {
-        color: "#fff !important",
+        color: "#FDFDFD !important",
         opacity: 1
       },
       completed: {
-        color: "#fff !important",
+        color: "#FDFDFD !important",
         opacity: 0.5,
         fontWeight: 300
       }
@@ -130,7 +130,7 @@ export const legacyTheme = createMuiTheme({
         marginTop: -16
       },
       line: {
-        borderColor: "#fff",
+        borderColor: "#FDFDFD",
         opacity: 0.2
       },
       active: {
@@ -161,7 +161,7 @@ export const legacyTheme = createMuiTheme({
         color: "#1C1F23 !important"
       },
       completed: {
-        color: "#fff !important"
+        color: "#FDFDFD !important"
       },
       root: {
         "height": 32,
@@ -184,7 +184,7 @@ export const legacyTheme = createMuiTheme({
         }
       },
       text: {
-        fill: "#fff"
+        fill: "#FDFDFD"
       }
     },
     MuiInput: {
@@ -238,7 +238,7 @@ export const legacyTheme = createMuiTheme({
     MuiInputBase: {
       input: {
         textAlign: "start",
-        color: "#fff"
+        color: "#FDFDFD"
       },
       root: {
         fontWeight: 300
@@ -303,7 +303,7 @@ export const legacyTheme = createMuiTheme({
       track: {
         "borderRadius": "40px",
         "backgroundColor": "inherit",
-        "border": "1px solid #fff",
+        "border": "1px solid #FDFDFD",
         "opacity": 0.5,
         "$checked$checked + &": {
           opacity: 1,
@@ -319,7 +319,7 @@ export const legacyTheme = createMuiTheme({
         }
       },
       colorSecondary: {
-        "color": "#fff",
+        "color": "#FDFDFD",
         "$checked$checked + &": {
           color: "#81FEB7"
         },