From 695887312c54112d3af8f3d2c3ada3fef5667fd0 Mon Sep 17 00:00:00 2001
From: Jan Jaroszczak <jan.jaroszczak@binarapps.com>
Date: Wed, 14 Feb 2024 09:37:03 +0100
Subject: [PATCH 01/19] Sole voter information page, without footer

---
 govtool/frontend/src/App.tsx                  |   5 +
 .../organisms/GovernanceActionDetailsCard.tsx |   4 +-
 .../components/organisms/SoleVoterInfo.tsx    | 108 +++++++++++++++++
 govtool/frontend/src/consts/paths.ts          |   1 +
 govtool/frontend/src/i18n/locales/en.ts       |   8 ++
 .../src/pages/RegisterAsSoleVoter.tsx         | 110 ++++++++++++++++++
 6 files changed, 234 insertions(+), 2 deletions(-)
 create mode 100644 govtool/frontend/src/components/organisms/SoleVoterInfo.tsx
 create mode 100644 govtool/frontend/src/pages/RegisterAsSoleVoter.tsx

diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx
index 91dab6356..d48e4d55a 100644
--- a/govtool/frontend/src/App.tsx
+++ b/govtool/frontend/src/App.tsx
@@ -30,6 +30,7 @@ import {
 } from "@utils";
 import { SetupInterceptors } from "./services";
 import { useGetDRepInfo, useWalletConnectionListener } from "./hooks";
+import { RegisterAsSoleVoter } from "./pages/RegisterAsSoleVoter";
 
 export default function App() {
   const { enable, setDRep, setIsDrepLoading } = useCardano();
@@ -115,6 +116,10 @@ export default function App() {
         </Route>
         <Route path={PATHS.delegateTodRep} element={<DelegateTodRep />} />
         <Route path={PATHS.registerAsdRep} element={<RegisterAsdRep />} />
+        <Route
+          path={PATHS.registerAsSoleVoter}
+          element={<RegisterAsSoleVoter />}
+        />
         <Route path={PATHS.stakeKeys} element={<ChooseStakeKey />} />
         <Route path={PATHS.updateMetadata} element={<UpdatedRepMetadata />} />
         <Route path="*" element={<ErrorPage />} />
diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
index af7861853..c4af9536c 100644
--- a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
+++ b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
@@ -164,7 +164,7 @@ export const GovernanceActionDetailsCard = ({
             <Typography color="neutralGray" variant="caption">
               {t("govActions.details")}
             </Typography>
-            {typeof details === "object" && details !== null ? (
+            {/* {typeof details === "object" && details !== null ? (
               Object.entries(details).map(([key, value]) => {
                 return (
                   <div key={key}>
@@ -179,7 +179,7 @@ export const GovernanceActionDetailsCard = ({
               >
                 {details}
               </Typography>
-            )}
+            )} */}
           </Box>
         </Box>
         <Button
diff --git a/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx b/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx
new file mode 100644
index 000000000..4eb34dafe
--- /dev/null
+++ b/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx
@@ -0,0 +1,108 @@
+import { useMemo } from "react";
+import { Box, Link } from "@mui/material";
+
+import { LoadingButton, Button, Typography } from "@atoms";
+import { theme } from "@/theme";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { Trans } from "react-i18next";
+import { openInNewTab } from "@/utils";
+import { useNavigate } from "react-router-dom";
+import { PATHS } from "@consts";
+
+export const SoleVoterInfo = () => {
+  const {
+    palette: { boxShadow2 },
+  } = theme;
+  const { isMobile, pagePadding, screenWidth } = useScreenDimension();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const renderBackButton = useMemo(() => {
+    return (
+      <Button
+        data-testid={"back-button"}
+        onClick={() => navigate(PATHS.dashboard)}
+        size="extraLarge"
+        sx={{
+          px: 6,
+          width: isMobile ? "100%" : "auto",
+        }}
+        variant="outlined"
+      >
+        {t("cancel")}
+      </Button>
+    );
+  }, [isMobile]);
+
+  const renderRegisterButton = useMemo(() => {
+    return (
+      <LoadingButton
+        data-testid={"register-button"}
+        // isLoading={isLoading}
+        onClick={() => {}}
+        sx={{
+          borderRadius: 50,
+          textTransform: "none",
+          px: 6,
+          width: isMobile ? "100%" : "auto",
+          height: 48,
+        }}
+        variant="contained"
+      >
+        {t("soleVoter.continueToRegister")}
+      </LoadingButton>
+    );
+  }, [
+    // isLoading,
+    isMobile,
+  ]);
+
+  return (
+    <Box
+      width={screenWidth < 768 ? "auto" : screenWidth < 1024 ? "60vw" : "45vw"}
+      boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
+      px={pagePadding}
+      py={isMobile ? 3 : 8}
+      borderRadius={"20px"}
+      mb={isMobile ? 0 : 6}
+      height="auto"
+    >
+      <Box display="flex" flexDirection="column">
+        <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
+          {t("soleVoter.heading")}
+        </Typography>
+        <Typography
+          fontWeight={400}
+          sx={{
+            mb: 7,
+            mt: isMobile ? 4 : 10,
+            textAlign: "center",
+            whiteSpace: "pre-line",
+          }}
+          variant="body1"
+        >
+          <Trans
+            i18nKey="soleVoter.description"
+            components={[
+              <Link
+                onClick={() => openInNewTab("https://sancho.network/")}
+                sx={{ cursor: "pointer" }}
+                key="0"
+              />,
+            ]}
+          />
+        </Typography>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection={isMobile ? "column" : "row"}
+        justifyContent="space-between"
+        mt={6}
+      >
+        {isMobile ? renderRegisterButton : renderBackButton}
+        <Box px={2} py={isMobile ? 1.5 : 0} />
+        {isMobile ? renderBackButton : renderRegisterButton}
+      </Box>
+    </Box>
+  );
+};
diff --git a/govtool/frontend/src/consts/paths.ts b/govtool/frontend/src/consts/paths.ts
index 645f4e695..8af3a6381 100644
--- a/govtool/frontend/src/consts/paths.ts
+++ b/govtool/frontend/src/consts/paths.ts
@@ -16,6 +16,7 @@ export const PATHS = {
   faqs: "/faqs",
   delegateTodRep: "/delegate",
   registerAsdRep: "/register",
+  registerAsSoleVoter: "/register_sole_voter",
   stakeKeys: "/stake_keys",
   updateMetadata: "/update_metadata",
 };
diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
index 876dd71b0..4ec1ba6ac 100644
--- a/govtool/frontend/src/i18n/locales/en.ts
+++ b/govtool/frontend/src/i18n/locales/en.ts
@@ -283,6 +283,13 @@ export const en = {
       showAll: "Show all",
       viewAll: "View all",
     },
+    soleVoter: {
+      becomeSoleVoter: "Become a Sole Voter",
+      continueToRegister: "Continue to register",
+      description:
+        "A Sole Voter is someone that can vote on any Governance Action with their own Voting Power, which is equal to the balance of ADA in their connected wallet. <0>Learn More</0> about Sole Voter.\n\nBecoming a Sole Voter will require a refundable deposit of <strong>₳2</strong>.\n\nYour deposit will be refunded if you either retire or delegate your voting power to someone else (a DRep)",
+      heading: "What this Means",
+    },
     system: {
       sanchoNet: "SanchoNet",
       sanchoNetIsBeta:
@@ -356,6 +363,7 @@ export const en = {
     abstain: "Abstain",
     back: "Back",
     backToList: "Back to the list",
+    backToDashboard: "Back to dashboard",
     cancel: "Cancel",
     clear: "Clear",
     confirm: "Confirm",
diff --git a/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx
new file mode 100644
index 000000000..370a5fefc
--- /dev/null
+++ b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx
@@ -0,0 +1,110 @@
+import { useEffect } from "react";
+import { Box, Link } from "@mui/material";
+
+import { Background, Typography } from "@atoms";
+import { ICONS, PATHS } from "@consts";
+import { DashboardTopNav, Footer } from "@organisms";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { useNavigate } from "react-router-dom";
+import { WALLET_LS_KEY, getItemFromLocalStorage } from "@/utils/localStorage";
+import { SoleVoterInfo } from "@/components/organisms/SoleVoterInfo";
+
+export const RegisterAsSoleVoter = () => {
+  const { isMobile, screenWidth } = useScreenDimension();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (
+      !getItemFromLocalStorage(`${WALLET_LS_KEY}_stake_key`) ||
+      !getItemFromLocalStorage(`${WALLET_LS_KEY}_name`)
+    ) {
+      navigate(PATHS.home);
+    }
+  }, []);
+
+  return (
+    <Background isReverted>
+      <Box display={"flex"} minHeight={"100vh"} flexDirection="column">
+        <DashboardTopNav
+          imageSRC={ICONS.appLogoIcon}
+          imageWidth={isMobile ? undefined : 42}
+          imageHeight={isMobile ? 24 : 35}
+          title={t("soleVoter.becomeSoleVoter")}
+        />
+
+        <Box
+          mt={isMobile ? 0 : 7}
+          height={isMobile ? "100%" : "auto"}
+          sx={{
+            marginTop: isMobile ? "97px" : "153px",
+            display: isMobile ? "flex" : "grid",
+            ...(isMobile && {
+              flexDirection: "column",
+            }),
+            ...(!isMobile && { gridTemplateColumns: "1fr auto 1fr" }),
+          }}
+        >
+          {isMobile && (
+            <Box borderBottom={1} borderColor={"#fff"}>
+              <Typography
+                variant="body2"
+                sx={{
+                  ml: 2,
+                  my: "26px",
+                  fontSize: "24px",
+                  fontWeight: 400,
+                }}
+              >
+                {t("soleVoter.becomeSoleVoter")}
+              </Typography>
+            </Box>
+          )}
+          <Link
+            data-testid={"back-to-list-link"}
+            sx={{
+              cursor: "pointer",
+              alignSelf: "flex-start",
+              display: "flex",
+              justifyContent: "center",
+              textDecoration: "none",
+              marginBottom: 3,
+              mt: isMobile ? 3 : "none",
+              mx: isMobile ? 2 : 1,
+            }}
+            onClick={() => navigate(PATHS.dashboard)}
+          >
+            <img
+              src={ICONS.arrowRightIcon}
+              alt="arrow"
+              style={{
+                marginRight: isMobile
+                  ? "12px"
+                  : screenWidth < 950
+                  ? "8px"
+                  : "12px",
+                transform: "rotate(180deg)",
+              }}
+            />
+            <Typography
+              variant="body2"
+              color="primary"
+              sx={{
+                display: "inline-block",
+                fontSize: isMobile
+                  ? "14px"
+                  : screenWidth < 950
+                  ? "12px"
+                  : "14px",
+              }}
+            >
+              {t("backToDashboard")}
+            </Typography>
+          </Link>
+          <SoleVoterInfo />
+        </Box>
+        {isMobile && <Footer />}
+      </Box>
+    </Background>
+  );
+};

From 4af09f9d60c7ebee1bb9c90f7175908f97de21a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:31:58 +0100
Subject: [PATCH 02/19] add image for sole voter

---
 .../public/images/GovActionsSoleVoter.png        | Bin 0 -> 4097 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 govtool/frontend/public/images/GovActionsSoleVoter.png

diff --git a/govtool/frontend/public/images/GovActionsSoleVoter.png b/govtool/frontend/public/images/GovActionsSoleVoter.png
new file mode 100644
index 0000000000000000000000000000000000000000..69048a4c322a99fc2098fe7efffd775246ed0620
GIT binary patch
literal 4097
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

literal 0
HcmV?d00001


From 9f9f073c7707820035b66e10143b7757f6e6325c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:32:44 +0100
Subject: [PATCH 03/19] change props and dashabord card sizes

---
 .../components/molecules/DashboardActionCard.tsx   | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
index 3d3e9fc26..90cfce5ca 100644
--- a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
+++ b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
@@ -18,9 +18,7 @@ type DashboardActionCardProps = {
   firstButtonIsLoading?: boolean;
   firstButtonLabel?: string;
   firstButtonVariant?: ButtonProps["variant"];
-  imageHeight?: number;
   imageURL?: string;
-  imageWidth?: number;
   inProgress?: boolean;
   isLoading?: boolean;
   secondButtonAction?: () => void;
@@ -62,17 +60,15 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
 
   return (
     <Box
-      mb={3}
-      p={3}
-      sx={{ boxShadow: `5px 5px 15px 5px ${boxShadow2}` }}
+      border={inProgress && !isLoading ? 1 : 0}
+      borderColor="accentOrange"
       borderRadius={3}
-      flex={1}
       display="flex"
+      flex={1}
       flexDirection="column"
-      border={inProgress && !isLoading ? 1 : 0}
-      borderColor="accentOrange"
+      p={3}
       position="relative"
-      maxWidth={440}
+      sx={{ boxShadow: `5px 5px 15px 5px ${boxShadow2}` }}
     >
       {inProgress && !isLoading && (
         <Box

From 521cd61d963ff63be77ef1091cbd48fd4a6c41e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:33:28 +0100
Subject: [PATCH 04/19] add sole voter into IMAGES

---
 govtool/frontend/src/consts/images.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/govtool/frontend/src/consts/images.ts b/govtool/frontend/src/consts/images.ts
index f9a098d4f..9d64fe9b2 100644
--- a/govtool/frontend/src/consts/images.ts
+++ b/govtool/frontend/src/consts/images.ts
@@ -3,6 +3,7 @@ export const IMAGES = {
   appLogoWithoutText: "/images/AppLogoWithoutText.png",
   errorPageImage: "/images/ErrorPageImage.png",
   heroImage: "/images/HeroImage.png",
+  soleVoterImage: "/images/GovActionsSoleVoter.png",
   govActionDelegateImage: "/images/GovActionDelegate.png",
   govActionRegisterImage: "/images/GovActionRegister.png",
   govActionListImage: "/images/GovActionList.png",

From b0e911daddb9b7416906bbd7bac27305e35c48fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:33:46 +0100
Subject: [PATCH 05/19] sort IMAGES asc

---
 govtool/frontend/src/consts/images.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/govtool/frontend/src/consts/images.ts b/govtool/frontend/src/consts/images.ts
index 9d64fe9b2..b74b473ea 100644
--- a/govtool/frontend/src/consts/images.ts
+++ b/govtool/frontend/src/consts/images.ts
@@ -1,16 +1,16 @@
 export const IMAGES = {
   appLogo: "/images/SanchoLogo.png",
   appLogoWithoutText: "/images/AppLogoWithoutText.png",
+  bgBlue: "/images/BGBlue.png",
+  bgOrange: "/images/BGOrange.png",
   errorPageImage: "/images/ErrorPageImage.png",
-  heroImage: "/images/HeroImage.png",
-  soleVoterImage: "/images/GovActionsSoleVoter.png",
+  govActionDefaultImage: "/images/GovActionDefault.png",
   govActionDelegateImage: "/images/GovActionDelegate.png",
-  govActionRegisterImage: "/images/GovActionRegister.png",
   govActionListImage: "/images/GovActionList.png",
-  govActionDefaultImage: "/images/GovActionDefault.png",
+  govActionRegisterImage: "/images/GovActionRegister.png",
+  heroImage: "/images/HeroImage.png",
+  soleVoterImage: "/images/GovActionsSoleVoter.png",
   successImage: "/images/Success.png",
   warningImage: "/images/Warning.png",
   warningYellowImage: "/images/WarningYellow.png",
-  bgOrange: "/images/BGOrange.png",
-  bgBlue: "/images/BGBlue.png",
 };

From 0dd76fb3b61f95f847ec7f85515b17d6671c7bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:34:04 +0100
Subject: [PATCH 06/19] add translations for sole voter card

---
 govtool/frontend/src/i18n/locales/en.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
index 4ec1ba6ac..cfc141969 100644
--- a/govtool/frontend/src/i18n/locales/en.ts
+++ b/govtool/frontend/src/i18n/locales/en.ts
@@ -72,6 +72,11 @@ export const en = {
         title: "Governance Actions",
         view: "View governance actions",
       },
+      cards: {
+        registerAsSoleVoterTitle: "Become a Sole Voter",
+        registerAsSoleVoterDescription:
+          "Vote on Governance Actions using your own voting power of ₳<strong>{{votingPower}}</strong>",
+      },
       registration: {
         changeMetadata: "Change metadata",
         connectToRegister: "Connect to register",

From 694c4d446cc382bc6e561becdb2cc2235d8ed5f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:34:28 +0100
Subject: [PATCH 07/19] change way to display cards on dashboard/ add sole
 voter card

---
 .../components/organisms/DashboardCards.tsx   | 327 +++++++++---------
 1 file changed, 164 insertions(+), 163 deletions(-)

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
index a4bde49da..8aa4cad6b 100644
--- a/govtool/frontend/src/components/organisms/DashboardCards.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { Box, CircularProgress, Typography } from "@mui/material";
+import { Box, CircularProgress } from "@mui/material";
 import { Trans } from "react-i18next";
 
 import { IMAGES, PATHS } from "@consts";
@@ -259,38 +259,6 @@ export const DashboardCards = () => {
     dRep?.wasRegistered,
   ]);
 
-  const renderGovActionSection = useCallback(() => {
-    return (
-      <>
-        <Typography fontSize={16} fontWeight={600} lineHeight={"24px"} my={3}>
-          {t("dashboard.headingTwo")}
-        </Typography>
-        <Box display={"flex"}>
-          <DashboardActionCard
-            dataTestidFirstButton="view-governance-actions-button"
-            description={t("dashboard.govActions.description")}
-            firstButtonAction={() =>
-              navigate(PATHS.dashboard_governance_actions)
-            }
-            firstButtonLabel={t(
-              `dashboard.govActions.${
-                dRep?.isRegistered ? "reviewAndVote" : "view"
-              }`
-            )}
-            imageURL={IMAGES.govActionListImage}
-            title={t("dashboard.govActions.title")}
-          />
-          {screenWidth < 1024 ? null : (
-            <>
-              <Box p={2} />
-              <Box flex={1} px={4} />
-            </>
-          )}
-        </Box>
-      </>
-    );
-  }, [screenWidth, isMobile, dRep?.isRegistered]);
-
   return isDrepLoading ? (
     <Box
       alignItems="center"
@@ -303,138 +271,171 @@ export const DashboardCards = () => {
     </Box>
   ) : (
     <Box
-      pl={screenWidth < 1024 ? 2 : screenWidth < 1440 ? 4 : 4}
-      pr={screenWidth < 1024 ? 2 : screenWidth < 1440 ? 8 : 29.5}
+      display="grid"
+      rowGap={3}
+      columnGap={4}
+      gridTemplateColumns={screenWidth < 1024 ? "1fr" : "1fr 1fr"}
+      px={screenWidth < 1024 ? 2 : screenWidth < 1440 ? 5 : 4}
+      py={3}
     >
-      {dRep?.isRegistered && renderGovActionSection()}
-      <Typography fontSize={16} fontWeight={600} lineHeight={"24px"} my={3}>
-        {t("dashboard.headingOne")}
-      </Typography>
-      <Box
-        display={"flex"}
-        flexDirection={screenWidth < 1024 ? "column" : "row"}
-      >
-        <DashboardActionCard
-          dataTestidFirstButton={
-            currentDelegation ? "change-dRep-button" : "delegate-button"
-          }
-          dataTestidSecondButton="delegate-learn-more-button"
-          dataTestidDrepIdBox="delegated-to-drep-id"
-          isLoading={isCurrentDelegationLoading || powerIsLoading}
-          description={
-            delegateTransaction?.transactionHash
-              ? progressDescription
-              : delegationDescription
-          }
-          dataTestidDelegationStatus={
-            delegateTransaction?.transactionHash
-              ? "voting-power-delegation-status-in-progress"
-              : `voting-power-delegation-status-${delegationStatusTestForId}`
-          }
-          firstButtonAction={() => navigateTo(PATHS.delegateTodRep)}
-          firstButtonLabel={
-            delegateTransaction?.transactionHash
-              ? ""
-              : currentDelegation
-              ? t("dashboard.delegation.changeDelegation")
-              : t("delegate")
-          }
-          imageHeight={55}
-          imageWidth={65}
-          firstButtonVariant={currentDelegation ? "outlined" : "contained"}
-          imageURL={IMAGES.govActionDelegateImage}
-          cardId={displayedDelegationId}
-          inProgress={!!delegateTransaction?.transactionHash}
-          cardTitle={t("dashboard.delegation.dRepDelegatedTo")}
-          secondButtonAction={
-            delegateTransaction?.transactionHash
-              ? () => openInNewTab("https://adanordic.com/latest_transactions")
-              : () =>
-                  openInNewTab(
-                    "https://docs.sanchogov.tools/faqs/ways-to-use-your-voting-power"
-                  )
-          }
-          secondButtonLabel={
-            delegateTransaction?.transactionHash
-              ? t("seeTransaction")
-              : currentDelegation
-              ? ""
-              : t("learnMore")
-          }
-          title={
-            delegateTransaction?.transactionHash ? (
-              t("dashboard.delegation.votingPowerDelegation")
-            ) : currentDelegation ? (
-              <Trans i18nKey="dashboard.delegation.yourVotingPowerIsDelegated" />
-            ) : (
-              t("dashboard.delegation.useYourVotingPower")
-            )
-          }
-        />
-        <Box width={24} />
-        <DashboardActionCard
-          dataTestidFirstButton={
-            dRep?.isRegistered ? "retire-button" : "register-button"
-          }
-          dataTestidDrepIdBox="my-drep-id"
-          firstButtonVariant={dRep?.isRegistered ? "outlined" : "contained"}
-          secondButtonVariant={
-            registerTransaction?.transactionHash
-              ? "outlined"
-              : dRep?.isRegistered
-              ? "text"
-              : "outlined"
-          }
-          dataTestidSecondButton={
-            dRep?.isRegistered
-              ? "change-metadata-button"
-              : "register-learn-more-button"
-          }
-          description={registrationCardDescription}
-          firstButtonAction={
-            dRep?.isRegistered
-              ? retireAsDrep
-              : () => navigateTo(PATHS.registerAsdRep)
-          }
-          firstButtonIsLoading={isRetirementLoading}
-          firstButtonLabel={
-            registerTransaction?.transactionHash
-              ? ""
-              : t(
-                  `dashboard.registration.${
-                    dRep?.isRegistered ? "retire" : "register"
-                  }`
+      {/* DELEGATION CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton={
+          currentDelegation ? "change-dRep-button" : "delegate-button"
+        }
+        dataTestidSecondButton="delegate-learn-more-button"
+        dataTestidDrepIdBox="delegated-to-drep-id"
+        isLoading={isCurrentDelegationLoading || powerIsLoading}
+        description={
+          delegateTransaction?.transactionHash
+            ? progressDescription
+            : delegationDescription
+        }
+        dataTestidDelegationStatus={
+          delegateTransaction?.transactionHash
+            ? "voting-power-delegation-status-in-progress"
+            : `voting-power-delegation-status-${delegationStatusTestForId}`
+        }
+        firstButtonAction={() => navigateTo(PATHS.delegateTodRep)}
+        firstButtonLabel={
+          delegateTransaction?.transactionHash
+            ? ""
+            : currentDelegation
+            ? t("dashboard.delegation.changeDelegation")
+            : t("delegate")
+        }
+        firstButtonVariant={currentDelegation ? "outlined" : "contained"}
+        imageURL={IMAGES.govActionDelegateImage}
+        cardId={displayedDelegationId}
+        inProgress={!!delegateTransaction?.transactionHash}
+        cardTitle={t("dashboard.delegation.dRepDelegatedTo")}
+        secondButtonAction={
+          delegateTransaction?.transactionHash
+            ? () => openInNewTab("https://adanordic.com/latest_transactions")
+            : () =>
+                openInNewTab(
+                  "https://docs.sanchogov.tools/faqs/ways-to-use-your-voting-power"
                 )
-          }
-          inProgress={!!registerTransaction?.transactionHash}
-          imageURL={IMAGES.govActionRegisterImage}
-          secondButtonAction={
-            registerTransaction?.transactionHash
-              ? () => openInNewTab("https://adanordic.com/latest_transactions")
-              : dRep?.isRegistered
-              ? () => {
-                  navigateTo(PATHS.updateMetadata);
-                }
-              : () =>
-                  openInNewTab(
-                    "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
-                  )
-          }
-          secondButtonLabel={
-            registerTransaction?.transactionHash
-              ? t("seeTransaction")
-              : dRep?.isRegistered
-              ? t("dashboard.registration.changeMetadata")
-              : t("learnMore")
-          }
-          cardId={dRep?.isRegistered || dRep?.wasRegistered ? dRepIDBech32 : ""}
-          cardTitle={
-            dRep?.isRegistered || dRep?.wasRegistered ? t("myDRepId") : ""
-          }
-          title={registrationCardTitle}
-        />
-      </Box>
-      {!dRep?.isRegistered && renderGovActionSection()}
+        }
+        secondButtonLabel={
+          delegateTransaction?.transactionHash
+            ? t("seeTransaction")
+            : currentDelegation
+            ? ""
+            : t("learnMore")
+        }
+        title={
+          delegateTransaction?.transactionHash ? (
+            t("dashboard.delegation.votingPowerDelegation")
+          ) : currentDelegation ? (
+            <Trans i18nKey="dashboard.delegation.yourVotingPowerIsDelegated" />
+          ) : (
+            t("dashboard.delegation.useYourVotingPower")
+          )
+        }
+      />
+      {/* DELEGATION CARD END*/}
+      {/* REGISTARTION AS DREP CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton={
+          dRep?.isRegistered ? "retire-button" : "register-button"
+        }
+        dataTestidDrepIdBox="my-drep-id"
+        firstButtonVariant={dRep?.isRegistered ? "outlined" : "contained"}
+        secondButtonVariant={
+          registerTransaction?.transactionHash
+            ? "outlined"
+            : dRep?.isRegistered
+            ? "text"
+            : "outlined"
+        }
+        dataTestidSecondButton={
+          dRep?.isRegistered
+            ? "change-metadata-button"
+            : "register-learn-more-button"
+        }
+        description={registrationCardDescription}
+        firstButtonAction={
+          dRep?.isRegistered
+            ? retireAsDrep
+            : () => navigateTo(PATHS.registerAsdRep)
+        }
+        firstButtonIsLoading={isRetirementLoading}
+        firstButtonLabel={
+          registerTransaction?.transactionHash
+            ? ""
+            : t(
+                `dashboard.registration.${
+                  dRep?.isRegistered ? "retire" : "register"
+                }`
+              )
+        }
+        inProgress={!!registerTransaction?.transactionHash}
+        imageURL={IMAGES.govActionRegisterImage}
+        secondButtonAction={
+          registerTransaction?.transactionHash
+            ? () => openInNewTab("https://adanordic.com/latest_transactions")
+            : dRep?.isRegistered
+            ? () => {
+                navigateTo(PATHS.updateMetadata);
+              }
+            : () =>
+                openInNewTab(
+                  "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
+                )
+        }
+        secondButtonLabel={
+          registerTransaction?.transactionHash
+            ? t("seeTransaction")
+            : dRep?.isRegistered
+            ? t("dashboard.registration.changeMetadata")
+            : t("learnMore")
+        }
+        cardId={dRep?.isRegistered || dRep?.wasRegistered ? dRepIDBech32 : ""}
+        cardTitle={
+          dRep?.isRegistered || dRep?.wasRegistered ? t("myDRepId") : ""
+        }
+        title={registrationCardTitle}
+      />
+      {/* DREP CARD END*/}
+      {/* SOLE VOTER CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton={"register-as-sole-voter-button"}
+        firstButtonVariant={"contained"}
+        secondButtonVariant={"outlined"}
+        dataTestidSecondButton={"learn-more-button"}
+        description={
+          <Trans
+            i18nKey="dashboard.cards.registerAsSoleVoterDescription"
+            values={{ votingPower }}
+          />
+        }
+        firstButtonAction={() => navigateTo(PATHS.registerAsSoleVoter)}
+        firstButtonLabel={t("dashboard.registration.register")}
+        imageURL={IMAGES.soleVoterImage}
+        secondButtonAction={() =>
+          openInNewTab(
+            "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
+          )
+        }
+        secondButtonLabel={t("learnMore")}
+        title={t("dashboard.cards.registerAsSoleVoterTitle")}
+      />
+      {/* REGISTARTION AS SOLE VOTER CARD END*/}
+      {/* GOV ACTIONS LIST CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton="view-governance-actions-button"
+        description={t("dashboard.govActions.description")}
+        firstButtonAction={() => navigate(PATHS.dashboard_governance_actions)}
+        firstButtonLabel={t(
+          `dashboard.govActions.${
+            dRep?.isRegistered ? "reviewAndVote" : "view"
+          }`
+        )}
+        imageURL={IMAGES.govActionListImage}
+        title={t("dashboard.govActions.title")}
+      />
+      {/* GOV ACTIONS LIST CARD END*/}
     </Box>
   );
 };

From b423888e9211cd3ed666cd938d7746e0e5197d3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:35:14 +0100
Subject: [PATCH 08/19] delete unnecessary code

---
 govtool/frontend/src/components/organisms/DashboardCards.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
index 8aa4cad6b..7e3ae3721 100644
--- a/govtool/frontend/src/components/organisms/DashboardCards.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -31,7 +31,7 @@ export const DashboardCards = () => {
   const navigate = useNavigate();
   const { currentDelegation, isCurrentDelegationLoading } =
     useGetAdaHolderCurrentDelegationQuery(stakeKey);
-  const { screenWidth, isMobile } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const [isRetirementLoading, setIsRetirementLoading] =
     useState<boolean>(false);

From 27a5ae619d470420250ded539ee665efad3acf45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:39:07 +0100
Subject: [PATCH 09/19] add feat to changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c21fa0e8..e37346d20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED`
 changes.
 
 ## [Unreleased]
+- Add Sole Voter card [Issue 141](https://github.com/IntersectMBO/govtool/issues/141)
 - Vitest unit tests added for utils functions [Issue 81](https://github.com/IntersectMBO/govtool/issues/81)
 - i18next library added to FE [Issue 80](https://github.com/IntersectMBO/govtool/issues/80)
 

From 11bd44108464e811814aa9a790b0075f51e33897 Mon Sep 17 00:00:00 2001
From: Jan Jaroszczak <jan.jaroszczak@binarapps.com>
Date: Wed, 14 Feb 2024 09:37:03 +0100
Subject: [PATCH 10/19] Sole voter information page, without footer

---
 govtool/frontend/src/App.tsx                  |   5 +
 .../organisms/GovernanceActionDetailsCard.tsx |   4 +-
 .../components/organisms/SoleVoterInfo.tsx    | 108 +++++++++++++++++
 govtool/frontend/src/consts/paths.ts          |   1 +
 govtool/frontend/src/i18n/locales/en.ts       |   8 ++
 .../src/pages/RegisterAsSoleVoter.tsx         | 110 ++++++++++++++++++
 6 files changed, 234 insertions(+), 2 deletions(-)
 create mode 100644 govtool/frontend/src/components/organisms/SoleVoterInfo.tsx
 create mode 100644 govtool/frontend/src/pages/RegisterAsSoleVoter.tsx

diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx
index 91dab6356..d48e4d55a 100644
--- a/govtool/frontend/src/App.tsx
+++ b/govtool/frontend/src/App.tsx
@@ -30,6 +30,7 @@ import {
 } from "@utils";
 import { SetupInterceptors } from "./services";
 import { useGetDRepInfo, useWalletConnectionListener } from "./hooks";
+import { RegisterAsSoleVoter } from "./pages/RegisterAsSoleVoter";
 
 export default function App() {
   const { enable, setDRep, setIsDrepLoading } = useCardano();
@@ -115,6 +116,10 @@ export default function App() {
         </Route>
         <Route path={PATHS.delegateTodRep} element={<DelegateTodRep />} />
         <Route path={PATHS.registerAsdRep} element={<RegisterAsdRep />} />
+        <Route
+          path={PATHS.registerAsSoleVoter}
+          element={<RegisterAsSoleVoter />}
+        />
         <Route path={PATHS.stakeKeys} element={<ChooseStakeKey />} />
         <Route path={PATHS.updateMetadata} element={<UpdatedRepMetadata />} />
         <Route path="*" element={<ErrorPage />} />
diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
index af7861853..c4af9536c 100644
--- a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
+++ b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
@@ -164,7 +164,7 @@ export const GovernanceActionDetailsCard = ({
             <Typography color="neutralGray" variant="caption">
               {t("govActions.details")}
             </Typography>
-            {typeof details === "object" && details !== null ? (
+            {/* {typeof details === "object" && details !== null ? (
               Object.entries(details).map(([key, value]) => {
                 return (
                   <div key={key}>
@@ -179,7 +179,7 @@ export const GovernanceActionDetailsCard = ({
               >
                 {details}
               </Typography>
-            )}
+            )} */}
           </Box>
         </Box>
         <Button
diff --git a/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx b/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx
new file mode 100644
index 000000000..4eb34dafe
--- /dev/null
+++ b/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx
@@ -0,0 +1,108 @@
+import { useMemo } from "react";
+import { Box, Link } from "@mui/material";
+
+import { LoadingButton, Button, Typography } from "@atoms";
+import { theme } from "@/theme";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { Trans } from "react-i18next";
+import { openInNewTab } from "@/utils";
+import { useNavigate } from "react-router-dom";
+import { PATHS } from "@consts";
+
+export const SoleVoterInfo = () => {
+  const {
+    palette: { boxShadow2 },
+  } = theme;
+  const { isMobile, pagePadding, screenWidth } = useScreenDimension();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const renderBackButton = useMemo(() => {
+    return (
+      <Button
+        data-testid={"back-button"}
+        onClick={() => navigate(PATHS.dashboard)}
+        size="extraLarge"
+        sx={{
+          px: 6,
+          width: isMobile ? "100%" : "auto",
+        }}
+        variant="outlined"
+      >
+        {t("cancel")}
+      </Button>
+    );
+  }, [isMobile]);
+
+  const renderRegisterButton = useMemo(() => {
+    return (
+      <LoadingButton
+        data-testid={"register-button"}
+        // isLoading={isLoading}
+        onClick={() => {}}
+        sx={{
+          borderRadius: 50,
+          textTransform: "none",
+          px: 6,
+          width: isMobile ? "100%" : "auto",
+          height: 48,
+        }}
+        variant="contained"
+      >
+        {t("soleVoter.continueToRegister")}
+      </LoadingButton>
+    );
+  }, [
+    // isLoading,
+    isMobile,
+  ]);
+
+  return (
+    <Box
+      width={screenWidth < 768 ? "auto" : screenWidth < 1024 ? "60vw" : "45vw"}
+      boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
+      px={pagePadding}
+      py={isMobile ? 3 : 8}
+      borderRadius={"20px"}
+      mb={isMobile ? 0 : 6}
+      height="auto"
+    >
+      <Box display="flex" flexDirection="column">
+        <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
+          {t("soleVoter.heading")}
+        </Typography>
+        <Typography
+          fontWeight={400}
+          sx={{
+            mb: 7,
+            mt: isMobile ? 4 : 10,
+            textAlign: "center",
+            whiteSpace: "pre-line",
+          }}
+          variant="body1"
+        >
+          <Trans
+            i18nKey="soleVoter.description"
+            components={[
+              <Link
+                onClick={() => openInNewTab("https://sancho.network/")}
+                sx={{ cursor: "pointer" }}
+                key="0"
+              />,
+            ]}
+          />
+        </Typography>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection={isMobile ? "column" : "row"}
+        justifyContent="space-between"
+        mt={6}
+      >
+        {isMobile ? renderRegisterButton : renderBackButton}
+        <Box px={2} py={isMobile ? 1.5 : 0} />
+        {isMobile ? renderBackButton : renderRegisterButton}
+      </Box>
+    </Box>
+  );
+};
diff --git a/govtool/frontend/src/consts/paths.ts b/govtool/frontend/src/consts/paths.ts
index 645f4e695..8af3a6381 100644
--- a/govtool/frontend/src/consts/paths.ts
+++ b/govtool/frontend/src/consts/paths.ts
@@ -16,6 +16,7 @@ export const PATHS = {
   faqs: "/faqs",
   delegateTodRep: "/delegate",
   registerAsdRep: "/register",
+  registerAsSoleVoter: "/register_sole_voter",
   stakeKeys: "/stake_keys",
   updateMetadata: "/update_metadata",
 };
diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
index aa6a71f3e..59da08cbd 100644
--- a/govtool/frontend/src/i18n/locales/en.ts
+++ b/govtool/frontend/src/i18n/locales/en.ts
@@ -283,6 +283,13 @@ export const en = {
       showAll: "Show all",
       viewAll: "View all",
     },
+    soleVoter: {
+      becomeSoleVoter: "Become a Sole Voter",
+      continueToRegister: "Continue to register",
+      description:
+        "A Sole Voter is someone that can vote on any Governance Action with their own Voting Power, which is equal to the balance of ADA in their connected wallet. <0>Learn More</0> about Sole Voter.\n\nBecoming a Sole Voter will require a refundable deposit of <strong>₳2</strong>.\n\nYour deposit will be refunded if you either retire or delegate your voting power to someone else (a DRep)",
+      heading: "What this Means",
+    },
     system: {
       sanchoNet: "SanchoNet",
       sanchoNetIsBeta:
@@ -356,6 +363,7 @@ export const en = {
     abstain: "Abstain",
     back: "Back",
     backToList: "Back to the list",
+    backToDashboard: "Back to dashboard",
     cancel: "Cancel",
     clear: "Clear",
     confirm: "Confirm",
diff --git a/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx
new file mode 100644
index 000000000..370a5fefc
--- /dev/null
+++ b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx
@@ -0,0 +1,110 @@
+import { useEffect } from "react";
+import { Box, Link } from "@mui/material";
+
+import { Background, Typography } from "@atoms";
+import { ICONS, PATHS } from "@consts";
+import { DashboardTopNav, Footer } from "@organisms";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { useNavigate } from "react-router-dom";
+import { WALLET_LS_KEY, getItemFromLocalStorage } from "@/utils/localStorage";
+import { SoleVoterInfo } from "@/components/organisms/SoleVoterInfo";
+
+export const RegisterAsSoleVoter = () => {
+  const { isMobile, screenWidth } = useScreenDimension();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (
+      !getItemFromLocalStorage(`${WALLET_LS_KEY}_stake_key`) ||
+      !getItemFromLocalStorage(`${WALLET_LS_KEY}_name`)
+    ) {
+      navigate(PATHS.home);
+    }
+  }, []);
+
+  return (
+    <Background isReverted>
+      <Box display={"flex"} minHeight={"100vh"} flexDirection="column">
+        <DashboardTopNav
+          imageSRC={ICONS.appLogoIcon}
+          imageWidth={isMobile ? undefined : 42}
+          imageHeight={isMobile ? 24 : 35}
+          title={t("soleVoter.becomeSoleVoter")}
+        />
+
+        <Box
+          mt={isMobile ? 0 : 7}
+          height={isMobile ? "100%" : "auto"}
+          sx={{
+            marginTop: isMobile ? "97px" : "153px",
+            display: isMobile ? "flex" : "grid",
+            ...(isMobile && {
+              flexDirection: "column",
+            }),
+            ...(!isMobile && { gridTemplateColumns: "1fr auto 1fr" }),
+          }}
+        >
+          {isMobile && (
+            <Box borderBottom={1} borderColor={"#fff"}>
+              <Typography
+                variant="body2"
+                sx={{
+                  ml: 2,
+                  my: "26px",
+                  fontSize: "24px",
+                  fontWeight: 400,
+                }}
+              >
+                {t("soleVoter.becomeSoleVoter")}
+              </Typography>
+            </Box>
+          )}
+          <Link
+            data-testid={"back-to-list-link"}
+            sx={{
+              cursor: "pointer",
+              alignSelf: "flex-start",
+              display: "flex",
+              justifyContent: "center",
+              textDecoration: "none",
+              marginBottom: 3,
+              mt: isMobile ? 3 : "none",
+              mx: isMobile ? 2 : 1,
+            }}
+            onClick={() => navigate(PATHS.dashboard)}
+          >
+            <img
+              src={ICONS.arrowRightIcon}
+              alt="arrow"
+              style={{
+                marginRight: isMobile
+                  ? "12px"
+                  : screenWidth < 950
+                  ? "8px"
+                  : "12px",
+                transform: "rotate(180deg)",
+              }}
+            />
+            <Typography
+              variant="body2"
+              color="primary"
+              sx={{
+                display: "inline-block",
+                fontSize: isMobile
+                  ? "14px"
+                  : screenWidth < 950
+                  ? "12px"
+                  : "14px",
+              }}
+            >
+              {t("backToDashboard")}
+            </Typography>
+          </Link>
+          <SoleVoterInfo />
+        </Box>
+        {isMobile && <Footer />}
+      </Box>
+    </Background>
+  );
+};

From 1d6728088699e1c0402623800f5b71b0d77960d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:31:58 +0100
Subject: [PATCH 11/19] add image for sole voter

---
 .../public/images/GovActionsSoleVoter.png        | Bin 0 -> 4097 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 govtool/frontend/public/images/GovActionsSoleVoter.png

diff --git a/govtool/frontend/public/images/GovActionsSoleVoter.png b/govtool/frontend/public/images/GovActionsSoleVoter.png
new file mode 100644
index 0000000000000000000000000000000000000000..69048a4c322a99fc2098fe7efffd775246ed0620
GIT binary patch
literal 4097
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

literal 0
HcmV?d00001


From 876dfa5d021e795276010d2a89bf4c0a09c1b6ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:32:44 +0100
Subject: [PATCH 12/19] change props and dashabord card sizes

---
 .../components/molecules/DashboardActionCard.tsx   | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
index 3d3e9fc26..90cfce5ca 100644
--- a/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
+++ b/govtool/frontend/src/components/molecules/DashboardActionCard.tsx
@@ -18,9 +18,7 @@ type DashboardActionCardProps = {
   firstButtonIsLoading?: boolean;
   firstButtonLabel?: string;
   firstButtonVariant?: ButtonProps["variant"];
-  imageHeight?: number;
   imageURL?: string;
-  imageWidth?: number;
   inProgress?: boolean;
   isLoading?: boolean;
   secondButtonAction?: () => void;
@@ -62,17 +60,15 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
 
   return (
     <Box
-      mb={3}
-      p={3}
-      sx={{ boxShadow: `5px 5px 15px 5px ${boxShadow2}` }}
+      border={inProgress && !isLoading ? 1 : 0}
+      borderColor="accentOrange"
       borderRadius={3}
-      flex={1}
       display="flex"
+      flex={1}
       flexDirection="column"
-      border={inProgress && !isLoading ? 1 : 0}
-      borderColor="accentOrange"
+      p={3}
       position="relative"
-      maxWidth={440}
+      sx={{ boxShadow: `5px 5px 15px 5px ${boxShadow2}` }}
     >
       {inProgress && !isLoading && (
         <Box

From a049895a249c49c07c2697437a5054df5670ffbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:33:28 +0100
Subject: [PATCH 13/19] add sole voter into IMAGES

---
 govtool/frontend/src/consts/images.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/govtool/frontend/src/consts/images.ts b/govtool/frontend/src/consts/images.ts
index f9a098d4f..9d64fe9b2 100644
--- a/govtool/frontend/src/consts/images.ts
+++ b/govtool/frontend/src/consts/images.ts
@@ -3,6 +3,7 @@ export const IMAGES = {
   appLogoWithoutText: "/images/AppLogoWithoutText.png",
   errorPageImage: "/images/ErrorPageImage.png",
   heroImage: "/images/HeroImage.png",
+  soleVoterImage: "/images/GovActionsSoleVoter.png",
   govActionDelegateImage: "/images/GovActionDelegate.png",
   govActionRegisterImage: "/images/GovActionRegister.png",
   govActionListImage: "/images/GovActionList.png",

From 0058e4b807a5a40ccb8b3ead6fcc7159f9396bef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:33:46 +0100
Subject: [PATCH 14/19] sort IMAGES asc

---
 govtool/frontend/src/consts/images.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/govtool/frontend/src/consts/images.ts b/govtool/frontend/src/consts/images.ts
index 9d64fe9b2..b74b473ea 100644
--- a/govtool/frontend/src/consts/images.ts
+++ b/govtool/frontend/src/consts/images.ts
@@ -1,16 +1,16 @@
 export const IMAGES = {
   appLogo: "/images/SanchoLogo.png",
   appLogoWithoutText: "/images/AppLogoWithoutText.png",
+  bgBlue: "/images/BGBlue.png",
+  bgOrange: "/images/BGOrange.png",
   errorPageImage: "/images/ErrorPageImage.png",
-  heroImage: "/images/HeroImage.png",
-  soleVoterImage: "/images/GovActionsSoleVoter.png",
+  govActionDefaultImage: "/images/GovActionDefault.png",
   govActionDelegateImage: "/images/GovActionDelegate.png",
-  govActionRegisterImage: "/images/GovActionRegister.png",
   govActionListImage: "/images/GovActionList.png",
-  govActionDefaultImage: "/images/GovActionDefault.png",
+  govActionRegisterImage: "/images/GovActionRegister.png",
+  heroImage: "/images/HeroImage.png",
+  soleVoterImage: "/images/GovActionsSoleVoter.png",
   successImage: "/images/Success.png",
   warningImage: "/images/Warning.png",
   warningYellowImage: "/images/WarningYellow.png",
-  bgOrange: "/images/BGOrange.png",
-  bgBlue: "/images/BGBlue.png",
 };

From 07de49f3fdef12c7147576b88a589ebcfd5bd375 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:34:04 +0100
Subject: [PATCH 15/19] add translations for sole voter card

---
 govtool/frontend/src/i18n/locales/en.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
index 59da08cbd..94271750a 100644
--- a/govtool/frontend/src/i18n/locales/en.ts
+++ b/govtool/frontend/src/i18n/locales/en.ts
@@ -72,6 +72,11 @@ export const en = {
         title: "Governance Actions",
         view: "View governance actions",
       },
+      cards: {
+        registerAsSoleVoterTitle: "Become a Sole Voter",
+        registerAsSoleVoterDescription:
+          "Vote on Governance Actions using your own voting power of ₳<strong>{{votingPower}}</strong>",
+      },
       registration: {
         changeMetadata: "Change metadata",
         connectToRegister: "Connect to register",

From dd8b7f04cc7ec4414a96f338de0b516bb92840a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:34:28 +0100
Subject: [PATCH 16/19] change way to display cards on dashboard/ add sole
 voter card

---
 .../components/organisms/DashboardCards.tsx   | 327 +++++++++---------
 1 file changed, 164 insertions(+), 163 deletions(-)

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
index a4bde49da..8aa4cad6b 100644
--- a/govtool/frontend/src/components/organisms/DashboardCards.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { Box, CircularProgress, Typography } from "@mui/material";
+import { Box, CircularProgress } from "@mui/material";
 import { Trans } from "react-i18next";
 
 import { IMAGES, PATHS } from "@consts";
@@ -259,38 +259,6 @@ export const DashboardCards = () => {
     dRep?.wasRegistered,
   ]);
 
-  const renderGovActionSection = useCallback(() => {
-    return (
-      <>
-        <Typography fontSize={16} fontWeight={600} lineHeight={"24px"} my={3}>
-          {t("dashboard.headingTwo")}
-        </Typography>
-        <Box display={"flex"}>
-          <DashboardActionCard
-            dataTestidFirstButton="view-governance-actions-button"
-            description={t("dashboard.govActions.description")}
-            firstButtonAction={() =>
-              navigate(PATHS.dashboard_governance_actions)
-            }
-            firstButtonLabel={t(
-              `dashboard.govActions.${
-                dRep?.isRegistered ? "reviewAndVote" : "view"
-              }`
-            )}
-            imageURL={IMAGES.govActionListImage}
-            title={t("dashboard.govActions.title")}
-          />
-          {screenWidth < 1024 ? null : (
-            <>
-              <Box p={2} />
-              <Box flex={1} px={4} />
-            </>
-          )}
-        </Box>
-      </>
-    );
-  }, [screenWidth, isMobile, dRep?.isRegistered]);
-
   return isDrepLoading ? (
     <Box
       alignItems="center"
@@ -303,138 +271,171 @@ export const DashboardCards = () => {
     </Box>
   ) : (
     <Box
-      pl={screenWidth < 1024 ? 2 : screenWidth < 1440 ? 4 : 4}
-      pr={screenWidth < 1024 ? 2 : screenWidth < 1440 ? 8 : 29.5}
+      display="grid"
+      rowGap={3}
+      columnGap={4}
+      gridTemplateColumns={screenWidth < 1024 ? "1fr" : "1fr 1fr"}
+      px={screenWidth < 1024 ? 2 : screenWidth < 1440 ? 5 : 4}
+      py={3}
     >
-      {dRep?.isRegistered && renderGovActionSection()}
-      <Typography fontSize={16} fontWeight={600} lineHeight={"24px"} my={3}>
-        {t("dashboard.headingOne")}
-      </Typography>
-      <Box
-        display={"flex"}
-        flexDirection={screenWidth < 1024 ? "column" : "row"}
-      >
-        <DashboardActionCard
-          dataTestidFirstButton={
-            currentDelegation ? "change-dRep-button" : "delegate-button"
-          }
-          dataTestidSecondButton="delegate-learn-more-button"
-          dataTestidDrepIdBox="delegated-to-drep-id"
-          isLoading={isCurrentDelegationLoading || powerIsLoading}
-          description={
-            delegateTransaction?.transactionHash
-              ? progressDescription
-              : delegationDescription
-          }
-          dataTestidDelegationStatus={
-            delegateTransaction?.transactionHash
-              ? "voting-power-delegation-status-in-progress"
-              : `voting-power-delegation-status-${delegationStatusTestForId}`
-          }
-          firstButtonAction={() => navigateTo(PATHS.delegateTodRep)}
-          firstButtonLabel={
-            delegateTransaction?.transactionHash
-              ? ""
-              : currentDelegation
-              ? t("dashboard.delegation.changeDelegation")
-              : t("delegate")
-          }
-          imageHeight={55}
-          imageWidth={65}
-          firstButtonVariant={currentDelegation ? "outlined" : "contained"}
-          imageURL={IMAGES.govActionDelegateImage}
-          cardId={displayedDelegationId}
-          inProgress={!!delegateTransaction?.transactionHash}
-          cardTitle={t("dashboard.delegation.dRepDelegatedTo")}
-          secondButtonAction={
-            delegateTransaction?.transactionHash
-              ? () => openInNewTab("https://adanordic.com/latest_transactions")
-              : () =>
-                  openInNewTab(
-                    "https://docs.sanchogov.tools/faqs/ways-to-use-your-voting-power"
-                  )
-          }
-          secondButtonLabel={
-            delegateTransaction?.transactionHash
-              ? t("seeTransaction")
-              : currentDelegation
-              ? ""
-              : t("learnMore")
-          }
-          title={
-            delegateTransaction?.transactionHash ? (
-              t("dashboard.delegation.votingPowerDelegation")
-            ) : currentDelegation ? (
-              <Trans i18nKey="dashboard.delegation.yourVotingPowerIsDelegated" />
-            ) : (
-              t("dashboard.delegation.useYourVotingPower")
-            )
-          }
-        />
-        <Box width={24} />
-        <DashboardActionCard
-          dataTestidFirstButton={
-            dRep?.isRegistered ? "retire-button" : "register-button"
-          }
-          dataTestidDrepIdBox="my-drep-id"
-          firstButtonVariant={dRep?.isRegistered ? "outlined" : "contained"}
-          secondButtonVariant={
-            registerTransaction?.transactionHash
-              ? "outlined"
-              : dRep?.isRegistered
-              ? "text"
-              : "outlined"
-          }
-          dataTestidSecondButton={
-            dRep?.isRegistered
-              ? "change-metadata-button"
-              : "register-learn-more-button"
-          }
-          description={registrationCardDescription}
-          firstButtonAction={
-            dRep?.isRegistered
-              ? retireAsDrep
-              : () => navigateTo(PATHS.registerAsdRep)
-          }
-          firstButtonIsLoading={isRetirementLoading}
-          firstButtonLabel={
-            registerTransaction?.transactionHash
-              ? ""
-              : t(
-                  `dashboard.registration.${
-                    dRep?.isRegistered ? "retire" : "register"
-                  }`
+      {/* DELEGATION CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton={
+          currentDelegation ? "change-dRep-button" : "delegate-button"
+        }
+        dataTestidSecondButton="delegate-learn-more-button"
+        dataTestidDrepIdBox="delegated-to-drep-id"
+        isLoading={isCurrentDelegationLoading || powerIsLoading}
+        description={
+          delegateTransaction?.transactionHash
+            ? progressDescription
+            : delegationDescription
+        }
+        dataTestidDelegationStatus={
+          delegateTransaction?.transactionHash
+            ? "voting-power-delegation-status-in-progress"
+            : `voting-power-delegation-status-${delegationStatusTestForId}`
+        }
+        firstButtonAction={() => navigateTo(PATHS.delegateTodRep)}
+        firstButtonLabel={
+          delegateTransaction?.transactionHash
+            ? ""
+            : currentDelegation
+            ? t("dashboard.delegation.changeDelegation")
+            : t("delegate")
+        }
+        firstButtonVariant={currentDelegation ? "outlined" : "contained"}
+        imageURL={IMAGES.govActionDelegateImage}
+        cardId={displayedDelegationId}
+        inProgress={!!delegateTransaction?.transactionHash}
+        cardTitle={t("dashboard.delegation.dRepDelegatedTo")}
+        secondButtonAction={
+          delegateTransaction?.transactionHash
+            ? () => openInNewTab("https://adanordic.com/latest_transactions")
+            : () =>
+                openInNewTab(
+                  "https://docs.sanchogov.tools/faqs/ways-to-use-your-voting-power"
                 )
-          }
-          inProgress={!!registerTransaction?.transactionHash}
-          imageURL={IMAGES.govActionRegisterImage}
-          secondButtonAction={
-            registerTransaction?.transactionHash
-              ? () => openInNewTab("https://adanordic.com/latest_transactions")
-              : dRep?.isRegistered
-              ? () => {
-                  navigateTo(PATHS.updateMetadata);
-                }
-              : () =>
-                  openInNewTab(
-                    "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
-                  )
-          }
-          secondButtonLabel={
-            registerTransaction?.transactionHash
-              ? t("seeTransaction")
-              : dRep?.isRegistered
-              ? t("dashboard.registration.changeMetadata")
-              : t("learnMore")
-          }
-          cardId={dRep?.isRegistered || dRep?.wasRegistered ? dRepIDBech32 : ""}
-          cardTitle={
-            dRep?.isRegistered || dRep?.wasRegistered ? t("myDRepId") : ""
-          }
-          title={registrationCardTitle}
-        />
-      </Box>
-      {!dRep?.isRegistered && renderGovActionSection()}
+        }
+        secondButtonLabel={
+          delegateTransaction?.transactionHash
+            ? t("seeTransaction")
+            : currentDelegation
+            ? ""
+            : t("learnMore")
+        }
+        title={
+          delegateTransaction?.transactionHash ? (
+            t("dashboard.delegation.votingPowerDelegation")
+          ) : currentDelegation ? (
+            <Trans i18nKey="dashboard.delegation.yourVotingPowerIsDelegated" />
+          ) : (
+            t("dashboard.delegation.useYourVotingPower")
+          )
+        }
+      />
+      {/* DELEGATION CARD END*/}
+      {/* REGISTARTION AS DREP CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton={
+          dRep?.isRegistered ? "retire-button" : "register-button"
+        }
+        dataTestidDrepIdBox="my-drep-id"
+        firstButtonVariant={dRep?.isRegistered ? "outlined" : "contained"}
+        secondButtonVariant={
+          registerTransaction?.transactionHash
+            ? "outlined"
+            : dRep?.isRegistered
+            ? "text"
+            : "outlined"
+        }
+        dataTestidSecondButton={
+          dRep?.isRegistered
+            ? "change-metadata-button"
+            : "register-learn-more-button"
+        }
+        description={registrationCardDescription}
+        firstButtonAction={
+          dRep?.isRegistered
+            ? retireAsDrep
+            : () => navigateTo(PATHS.registerAsdRep)
+        }
+        firstButtonIsLoading={isRetirementLoading}
+        firstButtonLabel={
+          registerTransaction?.transactionHash
+            ? ""
+            : t(
+                `dashboard.registration.${
+                  dRep?.isRegistered ? "retire" : "register"
+                }`
+              )
+        }
+        inProgress={!!registerTransaction?.transactionHash}
+        imageURL={IMAGES.govActionRegisterImage}
+        secondButtonAction={
+          registerTransaction?.transactionHash
+            ? () => openInNewTab("https://adanordic.com/latest_transactions")
+            : dRep?.isRegistered
+            ? () => {
+                navigateTo(PATHS.updateMetadata);
+              }
+            : () =>
+                openInNewTab(
+                  "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
+                )
+        }
+        secondButtonLabel={
+          registerTransaction?.transactionHash
+            ? t("seeTransaction")
+            : dRep?.isRegistered
+            ? t("dashboard.registration.changeMetadata")
+            : t("learnMore")
+        }
+        cardId={dRep?.isRegistered || dRep?.wasRegistered ? dRepIDBech32 : ""}
+        cardTitle={
+          dRep?.isRegistered || dRep?.wasRegistered ? t("myDRepId") : ""
+        }
+        title={registrationCardTitle}
+      />
+      {/* DREP CARD END*/}
+      {/* SOLE VOTER CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton={"register-as-sole-voter-button"}
+        firstButtonVariant={"contained"}
+        secondButtonVariant={"outlined"}
+        dataTestidSecondButton={"learn-more-button"}
+        description={
+          <Trans
+            i18nKey="dashboard.cards.registerAsSoleVoterDescription"
+            values={{ votingPower }}
+          />
+        }
+        firstButtonAction={() => navigateTo(PATHS.registerAsSoleVoter)}
+        firstButtonLabel={t("dashboard.registration.register")}
+        imageURL={IMAGES.soleVoterImage}
+        secondButtonAction={() =>
+          openInNewTab(
+            "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
+          )
+        }
+        secondButtonLabel={t("learnMore")}
+        title={t("dashboard.cards.registerAsSoleVoterTitle")}
+      />
+      {/* REGISTARTION AS SOLE VOTER CARD END*/}
+      {/* GOV ACTIONS LIST CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton="view-governance-actions-button"
+        description={t("dashboard.govActions.description")}
+        firstButtonAction={() => navigate(PATHS.dashboard_governance_actions)}
+        firstButtonLabel={t(
+          `dashboard.govActions.${
+            dRep?.isRegistered ? "reviewAndVote" : "view"
+          }`
+        )}
+        imageURL={IMAGES.govActionListImage}
+        title={t("dashboard.govActions.title")}
+      />
+      {/* GOV ACTIONS LIST CARD END*/}
     </Box>
   );
 };

From b319d9d82b5f9b3431166d75738218cb7018bdf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:35:14 +0100
Subject: [PATCH 17/19] delete unnecessary code

---
 govtool/frontend/src/components/organisms/DashboardCards.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
index 8aa4cad6b..7e3ae3721 100644
--- a/govtool/frontend/src/components/organisms/DashboardCards.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -31,7 +31,7 @@ export const DashboardCards = () => {
   const navigate = useNavigate();
   const { currentDelegation, isCurrentDelegationLoading } =
     useGetAdaHolderCurrentDelegationQuery(stakeKey);
-  const { screenWidth, isMobile } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const [isRetirementLoading, setIsRetirementLoading] =
     useState<boolean>(false);

From 68571dc83d544ee60fc9edb85473d42563eb400a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Fri, 16 Feb 2024 14:39:07 +0100
Subject: [PATCH 18/19] add feat to changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72b870526..68e09ce1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED`
 changes.
 
 ## [Unreleased]
+- Add Sole Voter card [Issue 141](https://github.com/IntersectMBO/govtool/issues/141)
 - Create Checkbox component. Improve Field and ControlledField [Issue 177](https://github.com/IntersectMBO/govtool/pull/177)
 - Vitest unit tests added for utils functions [Issue 81](https://github.com/IntersectMBO/govtool/issues/81)
 - i18next library added to FE [Issue 80](https://github.com/IntersectMBO/govtool/issues/80)

From 8b11487ca9c86c32318009ff798d18321ff42a93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Mon, 19 Feb 2024 11:34:05 +0100
Subject: [PATCH 19/19] update home cards

---
 .../src/components/molecules/ActionCard.tsx   |  1 -
 .../components/organisms/DashboardCards.tsx   |  8 +-
 .../src/components/organisms/Hero.tsx         | 34 ++++++-
 .../src/components/organisms/HomeCards.tsx    | 93 ++++++++++++++-----
 govtool/frontend/src/i18n/locales/en.ts       | 28 +++++-
 govtool/frontend/src/pages/Home.tsx           |  8 +-
 6 files changed, 135 insertions(+), 37 deletions(-)

diff --git a/govtool/frontend/src/components/molecules/ActionCard.tsx b/govtool/frontend/src/components/molecules/ActionCard.tsx
index 63fc9eb03..3418c6471 100644
--- a/govtool/frontend/src/components/molecules/ActionCard.tsx
+++ b/govtool/frontend/src/components/molecules/ActionCard.tsx
@@ -94,7 +94,6 @@ export const ActionCard: FC<ActionCardProps> = ({ ...props }) => {
           <Button
             data-testid={dataTestIdFirstButton}
             onClick={firstButtonAction}
-            size="large"
             sx={{
               width: MOBILE_AND_WIDE_CONDITION ? "100%" : "auto",
             }}
diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
index 7e3ae3721..87043a755 100644
--- a/govtool/frontend/src/components/organisms/DashboardCards.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -400,10 +400,10 @@ export const DashboardCards = () => {
       {/* DREP CARD END*/}
       {/* SOLE VOTER CARD */}
       <DashboardActionCard
-        dataTestidFirstButton={"register-as-sole-voter-button"}
-        firstButtonVariant={"contained"}
-        secondButtonVariant={"outlined"}
-        dataTestidSecondButton={"learn-more-button"}
+        dataTestidFirstButton="register-as-sole-voter-button"
+        firstButtonVariant="contained"
+        secondButtonVariant="outlined"
+        dataTestidSecondButton="learn-more-button"
         description={
           <Trans
             i18nKey="dashboard.cards.registerAsSoleVoterDescription"
diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx
index 4854f84bc..497f230e0 100644
--- a/govtool/frontend/src/components/organisms/Hero.tsx
+++ b/govtool/frontend/src/components/organisms/Hero.tsx
@@ -1,10 +1,13 @@
-import { Box } from "@mui/material";
+import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
+import { Trans } from "react-i18next";
+import { Box, Link } from "@mui/material";
 
 import { Button, Typography } from "@atoms";
 import { IMAGES, PATHS } from "@consts";
 import { useCardano, useModal } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
+import { openInNewTab } from "@utils";
 
 export const Hero = () => {
   const { isEnabled } = useCardano();
@@ -23,6 +26,12 @@ export const Hero = () => {
       ? 600
       : 720;
 
+  const onClickVotingPower = useCallback(
+    () =>
+      openInNewTab("https://docs.sanchogov.tools/faqs/what-is-voting-power"),
+    []
+  );
+
   return (
     <Box
       alignItems="center"
@@ -44,10 +53,29 @@ export const Hero = () => {
         </Typography>
         <Typography
           fontWeight={400}
-          sx={{ my: 4, ...(isMobile ? {} : { whiteSpace: "pre-line" }) }}
+          sx={{
+            maxWidth: 630,
+            my: 4,
+            ...(isMobile ? {} : { whiteSpace: "pre-line" }),
+          }}
           variant={isMobile ? "body2" : "title2"}
         >
-          {t("hero.description")}
+          <Trans
+            i18nKey={
+              screenWidth < 1024
+                ? "hero.description.mobile"
+                : "hero.description.wide"
+            }
+            components={[
+              <Link
+                data-testid="voting-power-link"
+                onClick={onClickVotingPower}
+                sx={{
+                  cursor: "pointer",
+                }}
+              ></Link>,
+            ]}
+          ></Trans>
         </Typography>
         <Button
           data-testid="hero-connect-wallet-button"
diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
index 66593a0ba..d8ca35a92 100644
--- a/govtool/frontend/src/components/organisms/HomeCards.tsx
+++ b/govtool/frontend/src/components/organisms/HomeCards.tsx
@@ -6,6 +6,7 @@ import { useModal } from "@context";
 import { ActionCard } from "@molecules";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
+import { useCallback } from "react";
 
 export const HomeCards = () => {
   const navigate = useNavigate();
@@ -13,6 +14,36 @@ export const HomeCards = () => {
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
 
+  const openWalletModal = useCallback(() => {
+    openModal({ type: "chooseWallet" });
+  }, [openModal]);
+
+  const onClickLearnMoreAboutDelegation = useCallback(
+    () =>
+      openInNewTab(
+        "https://docs.sanchogov.tools/faqs/ways-to-use-your-voting-power"
+      ),
+    []
+  );
+
+  const onClickLearnMoreAboutDRepRegistration = useCallback(
+    () =>
+      openInNewTab(
+        "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
+      ),
+    []
+  );
+
+  const onClickLearnMoreAboutSoleVoterRegistration = useCallback(
+    () => openInNewTab("https://www.google.com"),
+    []
+  );
+
+  const navigateToGovActions = useCallback(
+    () => navigate(PATHS.governance_actions),
+    [navigate]
+  );
+
   return (
     <Box
       columnGap={12}
@@ -35,60 +66,78 @@ export const HomeCards = () => {
         width={!isMobile && screenWidth < 1920 ? "90%" : "auto"}
         display="flex"
       >
+        {/* DELEGATE CARD */}
         <ActionCard
           dataTestIdFirstButton="delegate-connect-wallet-button"
           dataTestIdSecondButton="delegate-learn-more-button"
-          description={t("dashboard.delegation.description")}
-          firstButtonAction={() => openModal({ type: "chooseWallet" })}
-          firstButtonLabel={t("dashboard.delegation.connectToDelegate")}
+          description={t("home.cards.delegateDescription")}
+          firstButtonAction={openWalletModal}
+          firstButtonLabel={t("home.cards.delegateFirstButtonLabel")}
           imageHeight={80}
           imageURL={IMAGES.govActionDelegateImage}
           imageWidth={115}
-          secondButtonAction={() =>
-            openInNewTab(
-              "https://docs.sanchogov.tools/faqs/ways-to-use-your-voting-power"
-            )
-          }
+          secondButtonAction={onClickLearnMoreAboutDelegation}
           secondButtonLabel={t("learnMore")}
-          title={t("dashboard.delegation.useYourVotingPower")}
+          title={t("home.cards.delegateTitle")}
         />
+        {/* DELEGATE CARD END*/}
       </Box>
       <Box
         display="flex"
         width={!isMobile && screenWidth < 1920 ? "90%" : "auto"}
       >
+        {/* REGISTER AS DREP CARD */}
         <ActionCard
           dataTestIdFirstButton="register-connect-wallet-button"
           dataTestIdSecondButton="register-learn-more-button"
-          description={t("dashboard.registration.description")}
-          firstButtonAction={() => openModal({ type: "chooseWallet" })}
-          firstButtonLabel={t("dashboard.registration.connectToRegister")}
+          description={t("home.cards.registerAsDRepDescription")}
+          firstButtonAction={openWalletModal}
+          firstButtonLabel={t("home.cards.registerAsDRepFirstButtonLabel")}
           imageHeight={80}
           imageURL={IMAGES.govActionRegisterImage}
           imageWidth={70}
-          secondButtonAction={() =>
-            openInNewTab(
-              "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
-            )
-          }
+          secondButtonAction={onClickLearnMoreAboutDRepRegistration}
+          secondButtonLabel={t("learnMore")}
+          title={t("home.cards.registerAsDRepTitle")}
+        />
+        {/* REGISTER AS DREP CARD END */}
+      </Box>
+      <Box
+        display="flex"
+        width={!isMobile && screenWidth < 1920 ? "90%" : "auto"}
+      >
+        {/* REGISTER AS SOLE VOTER CARD */}
+        <ActionCard
+          dataTestIdFirstButton="register-as-sole-voter-button"
+          dataTestIdSecondButton="lear-more-about-sole-voter-button"
+          description={t("home.cards.registerAsSoleVoterDescription")}
+          firstButtonAction={openWalletModal}
+          firstButtonLabel={t("home.cards.registerAsSoleVoterFirstButtonLabel")}
+          imageHeight={84}
+          imageURL={IMAGES.soleVoterImage}
+          imageWidth={84}
+          secondButtonAction={onClickLearnMoreAboutSoleVoterRegistration}
           secondButtonLabel={t("learnMore")}
-          title={t("dashboard.registration.registerAsDRep")}
+          title={t("home.cards.registerAsSoleVoterTitle")}
         />
+        {/* REGISTER AS SOLE VOTER CARD END */}
       </Box>
       <Box
         display="flex"
         width={!isMobile && screenWidth < 1920 ? "90%" : "auto"}
       >
+        {/* GOV ACTIONS CARD */}
         <ActionCard
           dataTestIdFirstButton="move-to-governance-actions-button"
-          description={t("dashboard.govActions.description")}
-          firstButtonAction={() => navigate(PATHS.governance_actions)}
-          firstButtonLabel={t("dashboard.govActions.view")}
+          description={t("home.cards.governaneActionsDescription")}
+          firstButtonAction={navigateToGovActions}
+          firstButtonLabel={t("home.cards.governanceActionsFirstButtonLabel")}
           imageHeight={80}
           imageURL={IMAGES.govActionListImage}
           imageWidth={80}
-          title={t("dashboard.govActions.title")}
+          title={t("home.cards.governaneActionsTitle")}
         />
+        {/* GOV ACTIONS CARD */}
       </Box>
     </Box>
   );
diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
index 94271750a..1500512d6 100644
--- a/govtool/frontend/src/i18n/locales/en.ts
+++ b/govtool/frontend/src/i18n/locales/en.ts
@@ -102,6 +102,25 @@ export const en = {
         youAreRegistered: "You are Registered as a DRep",
       },
     },
+    home: {
+      cards: {
+        delegateDescription: "Find a DRep to vote on your behalf.",
+        delegateFirstButtonLabel: "View DRep Direcotry",
+        delegateTitle: "Delegate your Voting Power",
+        governaneActionsDescription:
+          "See all the Governance Actions submitted on chain. ",
+        governanceActionsFirstButtonLabel: "View Governance Actions",
+        governaneActionsTitle: "View Governance Actions",
+        registerAsDRepDescription:
+          "Accept delegated voting power from other ADA holders, and combine it with your own voting power. Vote with the accumulated Power on  Governance Actions.",
+        registerAsDRepFirstButtonLabel: "Connect to Register",
+        registerAsDRepTitle: "Become a DRep",
+        registerAsSoleVoterDescription:
+          "Vote on Governance Actions using your own voting power",
+        registerAsSoleVoterFirstButtonLabel: "Connect to Register",
+        registerAsSoleVoterTitle: "Become a Sole Voter",
+      },
+    },
     delegation: {
       description:
         "You can delegate your voting power to a DRep or to a pre-defined voting option.",
@@ -216,8 +235,11 @@ export const en = {
     },
     hero: {
       connectWallet: "Connect your wallet",
-      description:
-        "Interact with SanchoNet using GovTool - a friendly user\ninterface connected to SanchoNet. You can delegate\nyour voting power (tAda) or become a SanchoNet DRep\nto allow people to delegate voting power to you.",
+      description: {
+        mobile:
+          "You can either delegate your voting power or become a DRep to allow people to delegate voting power to you.",
+        wide: "Anyone with a wallet containing ADA can participate in governance on Sanchonet.\n\nYour ADA balance entitles you to an equal amount of Voting Power.\n\nFor more info see the guide entry for <0>Voting Power</0>.",
+      },
       headline: "SanchoNet \n Governance Tool",
     },
     menu: {
@@ -351,7 +373,7 @@ export const en = {
         "Can’t see your wallet? Check what wallets are currently compatible with GovTool ",
       chooseWallet: "Choose the wallet you want to connect with:",
       connect: "Connect",
-      connectWallet: "Connect wallet",
+      connectWallet: "Connect Wallet",
       connectYourWallet: "Connect your Wallet",
       connectYourWalletButton: "Connect your wallet",
       connectedWallet: "Connected Wallet:",
diff --git a/govtool/frontend/src/pages/Home.tsx b/govtool/frontend/src/pages/Home.tsx
index 6ca5689f2..25942471c 100644
--- a/govtool/frontend/src/pages/Home.tsx
+++ b/govtool/frontend/src/pages/Home.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { Box } from "@mui/material";
 
 import { Background } from "@atoms";
-import { Box } from "@mui/material";
-import { TopNav, Hero, Footer, HomeCards } from "@organisms";
+import { PATHS } from "@consts";
 import { useCardano } from "@context";
-import { PATHS } from "@/consts";
-import { WALLET_LS_KEY, getItemFromLocalStorage } from "@/utils/localStorage";
+import { TopNav, Hero, Footer, HomeCards } from "@organisms";
+import { WALLET_LS_KEY, getItemFromLocalStorage } from "@utils";
 
 export const Home = () => {
   const { isEnabled } = useCardano();