diff --git a/govtool/frontend/public/icons/Separator.svg b/govtool/frontend/public/icons/Separator.svg
deleted file mode 100644
index e6edeb0dd..000000000
--- a/govtool/frontend/public/icons/Separator.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="2" height="16" viewBox="0 0 2 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 0.5V15.5" stroke="#242232" stroke-width="0.5"/>
-</svg>
diff --git a/govtool/frontend/src/components/atoms/CopyButton.tsx b/govtool/frontend/src/components/atoms/CopyButton.tsx
index 2783d0fb7..021d5fcc0 100644
--- a/govtool/frontend/src/components/atoms/CopyButton.tsx
+++ b/govtool/frontend/src/components/atoms/CopyButton.tsx
@@ -4,11 +4,11 @@ import { ICONS } from "@consts";
 import { useSnackbar } from "@context";
 import { useTranslation } from "@hooks";
 
-interface Props {
+type Props = {
   isChecked?: boolean;
   text: string;
   variant?: "blueThin" | "blue";
-}
+};
 
 export const CopyButton = ({ isChecked, text, variant }: Props) => {
   const { addSuccessAlert } = useSnackbar();
diff --git a/govtool/frontend/src/components/atoms/IconLink.tsx b/govtool/frontend/src/components/atoms/IconLink.tsx
deleted file mode 100644
index 0c12fcd1e..000000000
--- a/govtool/frontend/src/components/atoms/IconLink.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Box } from "@mui/material";
-
-import { Typography } from "@atoms";
-import { openInNewTab } from "@utils";
-import { ICONS } from "@consts";
-
-type IconLinkProps = {
-  label: string;
-  navTo: string;
-  isSmall?: boolean;
-};
-
-export const IconLink = ({ label, navTo, isSmall }: IconLinkProps) => {
-  const openLink = () => openInNewTab(navTo);
-
-  return (
-    <Box
-      onClick={openLink}
-      sx={{
-        alignItems: "center",
-        cursor: "pointer",
-        display: "flex",
-        flexDirection: "row",
-        overflow: "hidden",
-      }}
-    >
-      <img alt="link" height={16} src={ICONS.link} width={16} />
-      <Typography
-        color="primary"
-        fontWeight={400}
-        sx={{
-          ml: 0.5,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          ...(isSmall && {
-            fontSize: 14,
-            lineHeight: "20px",
-          }),
-        }}
-      >
-        {label}
-      </Typography>
-    </Box>
-  );
-};
diff --git a/govtool/frontend/src/components/atoms/Radio.tsx b/govtool/frontend/src/components/atoms/Radio.tsx
index f93e68ec3..d997c1b58 100644
--- a/govtool/frontend/src/components/atoms/Radio.tsx
+++ b/govtool/frontend/src/components/atoms/Radio.tsx
@@ -3,6 +3,7 @@ import { Box } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { theme } from "@/theme";
 
 type RadioProps = {
   isChecked: boolean;
@@ -43,8 +44,7 @@ export const Radio = ({ ...props }: RadioProps) => {
       borderColor={isChecked ? "specialCyanBorder" : undefined}
       sx={[
         {
-          boxShadow:
-            "0px 1px 2px 0px rgba(0, 51, 173, 0.08), 0px 1px 6px 1px rgba(0, 51, 173, 0.15)",
+          boxShadow: theme.shadows[1],
 
           "&:hover": {
             color: "blue",
diff --git a/govtool/frontend/src/components/atoms/Tooltip.tsx b/govtool/frontend/src/components/atoms/Tooltip.tsx
index 4e2ccdc51..dd8d8dc23 100644
--- a/govtool/frontend/src/components/atoms/Tooltip.tsx
+++ b/govtool/frontend/src/components/atoms/Tooltip.tsx
@@ -1,12 +1,7 @@
 import { styled } from "@mui/material";
 import * as TooltipMUI from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-
-export type TooltipProps = Omit<TooltipMUI.TooltipProps, "title"> & {
-  heading?: string;
-  paragraphOne?: string;
-  paragraphTwo?: string;
-};
+import { TooltipProps } from "@atoms";
 
 const StyledTooltip = styled(
   ({ className, ...props }: TooltipMUI.TooltipProps) => (
diff --git a/govtool/frontend/src/components/atoms/index.ts b/govtool/frontend/src/components/atoms/index.ts
index 1939a0971..6fa848bac 100644
--- a/govtool/frontend/src/components/atoms/index.ts
+++ b/govtool/frontend/src/components/atoms/index.ts
@@ -9,7 +9,6 @@ export * from "./ExternalModalButton";
 export * from "./FormErrorMessage";
 export * from "./FormHelpfulText";
 export * from "./HighlightedText";
-export * from "./IconLink";
 export * from "./InfoText";
 export * from "./Input";
 export * from "./Link";
@@ -21,7 +20,6 @@ export * from "./modal/ModalWrapper";
 export * from "./Radio";
 export * from "./ScrollToManage";
 export * from "./ScrollToTop";
-export * from "./SliderArrow";
 export * from "./Spacer";
 export * from "./StakeRadio";
 export * from "./TextArea";
diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
index 34f0fdf14..ff2e603b8 100644
--- a/govtool/frontend/src/components/atoms/types.ts
+++ b/govtool/frontend/src/components/atoms/types.ts
@@ -7,6 +7,7 @@ import {
   TextareaAutosizeProps,
   SxProps,
 } from "@mui/material";
+import * as TooltipMUI from "@mui/material/Tooltip";
 
 export type ButtonProps = Omit<MUIButtonProps, "size"> & {
   size?: "small" | "medium" | "large" | "extraLarge";
@@ -71,3 +72,9 @@ export type InfoTextProps = {
   label: string;
   sx?: SxProps;
 };
+
+export type TooltipProps = Omit<TooltipMUI.TooltipProps, "title"> & {
+  heading?: string;
+  paragraphOne?: string;
+  paragraphTwo?: string;
+};
diff --git a/govtool/frontend/src/components/molecules/Breadcrumbs.tsx b/govtool/frontend/src/components/molecules/Breadcrumbs.tsx
index 435d56e3d..8a9e564a2 100644
--- a/govtool/frontend/src/components/molecules/Breadcrumbs.tsx
+++ b/govtool/frontend/src/components/molecules/Breadcrumbs.tsx
@@ -1,7 +1,7 @@
 import { NavLink, To } from "react-router-dom";
 import { Box } from "@mui/material";
+import Divider from "@mui/material/Divider";
 
-import { ICONS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { Typography } from "@atoms";
 
@@ -40,7 +40,12 @@ export const Breadcrumbs = ({
           {elementOne}
         </Typography>
       </NavLink>
-      <img src={ICONS.separator} alt="separator" style={{ margin: "0 6px" }} />
+      <Divider
+        orientation="vertical"
+        flexItem
+        color="textBlack"
+        sx={{ margin: "0 6px" }}
+      />
       <Typography
         variant="caption"
         sx={{
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
index 29bb4dad4..cbb17ac4b 100644
--- a/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
@@ -20,25 +20,24 @@ import {
 const mockedLongText =
   "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, distinctio culpa minus eaque illo quidem voluptates quisquam mollitia consequuntur ex, sequi saepe? Ad ex adipisci molestiae sed.";
 
-interface ActionTypeProps
-  extends Omit<
-    ActionType,
-    | "yesVotes"
-    | "noVotes"
-    | "abstainVotes"
-    | "metadataHash"
-    | "url"
-    | "details"
-    | "id"
-    | "txHash"
-    | "index"
-  > {
+type ActionTypeProps = Omit<
+  ActionType,
+  | "yesVotes"
+  | "noVotes"
+  | "abstainVotes"
+  | "metadataHash"
+  | "url"
+  | "details"
+  | "id"
+  | "txHash"
+  | "index"
+> & {
   txHash: string;
   index: number;
   isDataMissing: boolean;
   onClick?: () => void;
   inProgress?: boolean;
-}
+};
 
 export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
   const {
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx
index 51186d699..94517a9ca 100644
--- a/govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx
@@ -40,99 +40,97 @@ export const GovernanceActionCardElement = ({
   >
     <Box
       sx={{
-          display: "flex",
-          alignItems: "center",
-          mb: "4px",
-        }}
+        display: "flex",
+        alignItems: "center",
+        mb: "4px",
+      }}
     >
       <Typography
         sx={{
-            fontSize: isSliderCard ? 12 : 14,
-            fontWeight: isSliderCard ? 500 : 600,
-            lineHeight: isSliderCard ? "16px" : "20px",
-            color: "neutralGray",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-          }}
+          fontSize: isSliderCard ? 12 : 14,
+          fontWeight: isSliderCard ? 500 : 600,
+          lineHeight: isSliderCard ? "16px" : "20px",
+          color: "neutralGray",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
       >
         {label}
       </Typography>
       {tooltipProps && (
-      <Tooltip
-        heading={tooltipProps?.heading}
-        paragraphOne={tooltipProps?.paragraphOne}
-        placement="bottom-end"
-        arrow
-        {...tooltipProps}
-      >
-        <InfoOutlinedIcon
-          style={{}}
-          sx={{ ml: 0.7, mb: 0.1, color: "#ADAEAD", fontSize: "small" }}
-        />
-      </Tooltip>
-        )}
+        <Tooltip
+          heading={tooltipProps?.heading}
+          paragraphOne={tooltipProps?.paragraphOne}
+          placement="bottom-end"
+          arrow
+          {...tooltipProps}
+        >
+          <InfoOutlinedIcon
+            sx={{ ml: 0.7, mb: 0.1, color: "#ADAEAD", fontSize: "small" }}
+          />
+        </Tooltip>
+      )}
     </Box>
     <Box display="flex">
       {textVariant === "pill" ? (
         <Box
           sx={{
-              padding: "6px 18px",
-              overflow: "hidden",
-              bgcolor: "lightBlue",
-              borderRadius: 100,
-            }}
+            padding: "6px 18px",
+            overflow: "hidden",
+            bgcolor: "lightBlue",
+            borderRadius: 100,
+          }}
         >
           <Typography
             variant="caption"
             sx={{
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
           >
             {text}
           </Typography>
         </Box>
-        ) : (
-          <Box
+      ) : (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            overflow: "hidden",
+          }}
+        >
+          <Typography
             sx={{
-              display: "flex",
-              alignItems: "center",
-              overflow: "hidden",
+              fontSize: isSliderCard ? 14 : 16,
+              fontWeight: 400,
+              lineHeight: isSliderCard ? "20px" : "24px",
+              ...(textVariant === "oneLine" && { whiteSpace: "nowrap" }),
+              ...((textVariant === "oneLine" || textVariant === "twoLines") && {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }),
+              ...(textVariant === "twoLines" && {
+                display: "-webkit-box",
+                WebkitBoxOrient: "vertical",
+                WebkitLineClamp: 2,
+                whiteSpace: "normal",
+              }),
+              ...(isCopyButton && {
+                color: "primaryBlue",
+              }),
             }}
           >
-            <Typography
-              sx={{
-                fontSize: isSliderCard ? 14 : 16,
-                fontWeight: 400,
-                lineHeight: isSliderCard ? "20px" : "24px",
-                ...(textVariant === "oneLine" && { whiteSpace: "nowrap" }),
-                ...((textVariant === "oneLine" ||
-                  textVariant === "twoLines") && {
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                }),
-                ...(textVariant === "twoLines" && {
-                  display: "-webkit-box",
-                  WebkitBoxOrient: "vertical",
-                  WebkitLineClamp: 2,
-                  whiteSpace: "normal",
-                }),
-                ...(isCopyButton && {
-                  color: "primaryBlue",
-                }),
-              }}
-            >
-              {text}
-            </Typography>
-            {isCopyButton && (
-              <Box ml={1}>
-                <CopyButton text={text} variant="blueThin" />
-              </Box>
-            )}
-          </Box>
-        )}
+            {text}
+          </Typography>
+          {isCopyButton && (
+            <Box ml={1}>
+              <CopyButton text={text} variant="blueThin" />
+            </Box>
+          )}
+        </Box>
+      )}
     </Box>
   </Box>
-  );
+);
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCardMyVote.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCardMyVote.tsx
index 0a53fbfe6..c1dde83ec 100644
--- a/govtool/frontend/src/components/molecules/GovernanceActionCardMyVote.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceActionCardMyVote.tsx
@@ -5,7 +5,11 @@ import { openInNewTab } from "@utils";
 import { useTranslation } from "@hooks";
 import { Vote } from "@models";
 
-export const GovernanceActionCardMyVote = ({ vote }: { vote: Vote }) => {
+type Props = {
+  vote: Vote;
+};
+
+export const GovernanceActionCardMyVote = ({ vote }: Props) => {
   const { t } = useTranslation();
 
   return (
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx
index 8fdb99397..8028668be 100644
--- a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx
@@ -1,7 +1,10 @@
 import { Box } from "@mui/material";
 
-import { IconLink, Typography } from "@atoms";
+import { Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
+import { LinkWithIcon } from "@molecules";
+import { openInNewTab } from "@/utils";
+import { ICONS } from "@/consts";
 
 // TODO: When BE is ready, pass links as props
 const LINKS = [
@@ -41,7 +44,13 @@ export const GovernanceActionDetailsCardLinks = () => {
         }}
       >
         {LINKS.map((link) => (
-          <IconLink key={link} label={link} navTo={link} isSmall />
+          <LinkWithIcon
+            key={link}
+            label={link}
+            onClick={() => openInNewTab(link)}
+            icon={<img alt="link" src={ICONS.link} />}
+            cutWithEllipsis
+          />
         ))}
       </Box>
     </>
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx b/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx
index 05746f111..89542217d 100644
--- a/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx
@@ -8,7 +8,7 @@ import {
 } from "@mui/material";
 
 import { GOVERNANCE_ACTIONS_FILTERS } from "@consts";
-import { useTranslation } from "@hooks";
+import { useScreenDimension, useTranslation } from "@hooks";
 
 interface Props {
   chosenFilters: string[];
@@ -36,6 +36,7 @@ export const GovernanceActionsFilters = ({
   );
 
   const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
 
   return (
     <Box
@@ -49,6 +50,8 @@ export const GovernanceActionsFilters = ({
         padding: "12px 0px",
         width: "auto",
         zIndex: "1",
+        right: isMobile ? "73px" : "141px",
+        top: isMobile ? "274px" : "200px",
       }}
     >
       <FormLabel
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx b/govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx
index 95fa648db..d43688af8 100644
--- a/govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx
@@ -9,7 +9,7 @@ import {
 } from "@mui/material";
 
 import { GOVERNANCE_ACTIONS_SORTING } from "@consts";
-import { useTranslation } from "@hooks";
+import { useScreenDimension, useTranslation } from "@hooks";
 
 interface Props {
   chosenSorting: string;
@@ -21,6 +21,7 @@ export const GovernanceActionsSorting = ({
   setChosenSorting,
 }: Props) => {
   const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
 
   return (
     <Box
@@ -34,6 +35,8 @@ export const GovernanceActionsSorting = ({
         padding: "12px 0px",
         width: "auto",
         zIndex: "1",
+        right: isMobile ? "17px" : "29px",
+        top: isMobile ? "274px" : "200px",
       }}
     >
       <FormControl>
diff --git a/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx b/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx
index 7e9f140be..7e5a6aa2b 100644
--- a/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx
@@ -22,11 +22,11 @@ import {
 const mockedLongText =
   "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, distinctio culpa minus eaque illo quidem voluptates quisquam mollitia consequuntur ex, sequi saepe? Ad ex adipisci molestiae sed.";
 
-interface Props {
+type Props = {
   votedProposal: VotedProposal;
   isDataMissing: boolean;
   inProgress?: boolean;
-}
+};
 
 export const GovernanceVotedOnCard = ({
   votedProposal,
diff --git a/govtool/frontend/src/components/molecules/LinkWithIcon.tsx b/govtool/frontend/src/components/molecules/LinkWithIcon.tsx
index ab12e106c..ecfa97b16 100644
--- a/govtool/frontend/src/components/molecules/LinkWithIcon.tsx
+++ b/govtool/frontend/src/components/molecules/LinkWithIcon.tsx
@@ -10,6 +10,7 @@ export const LinkWithIcon = ({
   onClick,
   icon,
   sx,
+  cutWithEllipsis,
 }: LinkWithIconProps) => (
   <Box
     data-testid={`${label.split(" ").join("-")}-link`}
@@ -18,6 +19,10 @@ export const LinkWithIcon = ({
       cursor: "pointer",
       display: "flex",
       width: "fit-content",
+      ...(cutWithEllipsis && {
+        overflow: "hidden",
+        width: "auto",
+      }),
       ...sx,
     }}
     onClick={onClick}
@@ -26,8 +31,15 @@ export const LinkWithIcon = ({
     <Typography
       color="primary"
       fontWeight={400}
-      sx={{ ml: 0.5 }}
       variant="body2"
+      sx={{
+        ml: 0.5,
+        ...(cutWithEllipsis && {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }),
+      }}
     >
       {label}
     </Typography>
diff --git a/govtool/frontend/src/components/molecules/OrderActionsChip.tsx b/govtool/frontend/src/components/molecules/OrderActionsChip.tsx
index 3bddbd6dd..037a68cd4 100644
--- a/govtool/frontend/src/components/molecules/OrderActionsChip.tsx
+++ b/govtool/frontend/src/components/molecules/OrderActionsChip.tsx
@@ -1,12 +1,12 @@
 import { Dispatch, SetStateAction } from "react";
 import { Box } from "@mui/material";
 
-import { useTranslation } from "@hooks";
+import { useScreenDimension, useTranslation } from "@hooks";
 import { Typography } from "@atoms";
 import { ICONS } from "@consts";
 import { theme } from "@/theme";
 
-interface Props {
+type Props = {
   filtersOpen?: boolean;
   setFiltersOpen?: Dispatch<SetStateAction<boolean>>;
   chosenFiltersLength?: number;
@@ -14,10 +14,11 @@ interface Props {
   setSortOpen: Dispatch<SetStateAction<boolean>>;
   sortingActive: boolean;
   isFiltering?: boolean;
-}
+};
 
 export const OrderActionsChip = (props: Props) => {
   const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
 
   const {
     palette: { secondary },
@@ -34,7 +35,13 @@ export const OrderActionsChip = (props: Props) => {
   } = props;
 
   return (
-    <Box display="flex" width="min-content" alignItems="center" ml="8px">
+    <Box
+      display="flex"
+      width="min-content"
+      alignItems="center"
+      ml="8px"
+      gap={isMobile ? "8px" : "24px"}
+    >
       {isFiltering && (
         <Box
           sx={{
@@ -43,6 +50,11 @@ export const OrderActionsChip = (props: Props) => {
             alignItems: "center",
             justifyContent: "center",
             cursor: "pointer",
+            ...(!isMobile && {
+              background: filtersOpen ? secondary.main : "transparent",
+              borderRadius: "99px",
+              padding: "12px 14px",
+            }),
           }}
           onClick={() => {
             setSortOpen(false);
@@ -56,24 +68,30 @@ export const OrderActionsChip = (props: Props) => {
             alt="filter"
             src={filtersOpen ? ICONS.filterWhiteIcon : ICONS.filterIcon}
             style={{
-              background: filtersOpen ? secondary.main : "transparent",
               borderRadius: "100%",
-              padding: "14px",
+              marginRight: "8px",
               overflow: "visible",
               height: 20,
               width: 20,
               objectFit: "contain",
+              ...(isMobile && {
+                background: filtersOpen ? secondary.main : "transparent",
+                padding: "14px",
+                marginRight: "0",
+              }),
             }}
           />
-          <Typography
-            variant="body1"
-            sx={{
-              color: "primaryBlue",
-              fontWeight: 500,
-            }}
-          >
-            {t("filter")}
-          </Typography>
+          {!isMobile && (
+            <Typography
+              variant="body1"
+              sx={{
+                color: filtersOpen ? "white" : "primaryBlue",
+                fontWeight: 500,
+              }}
+            >
+              {t("filter")}
+            </Typography>
+          )}
           {!filtersOpen && chosenFiltersLength > 0 && (
             <Box
               sx={{
@@ -86,7 +104,7 @@ export const OrderActionsChip = (props: Props) => {
                 height: "16px",
                 justifyContent: "center",
                 position: "absolute",
-                left: "32px",
+                right: "-3px",
                 top: "0",
                 width: "16px",
               }}
@@ -105,6 +123,11 @@ export const OrderActionsChip = (props: Props) => {
           alignItems: "center",
           justifyContent: "center",
           cursor: "pointer",
+          ...(!isMobile && {
+            background: sortOpen ? secondary.main : "transparent",
+            borderRadius: "99px",
+            padding: "12px 14px",
+          }),
         }}
         onClick={() => {
           if (isFiltering) {
@@ -118,23 +141,29 @@ export const OrderActionsChip = (props: Props) => {
           alt="sort"
           src={sortOpen ? ICONS.sortWhiteIcon : ICONS.sortIcon}
           style={{
-            background: sortOpen ? secondary.main : "transparent",
             borderRadius: "100%",
-            padding: "14px",
-            height: 24,
-            width: 24,
+            marginRight: "8px",
+            height: 20,
+            width: 20,
             objectFit: "contain",
+            ...(isMobile && {
+              background: sortOpen ? secondary.main : "transparent",
+              padding: "14px",
+              marginRight: "0",
+            }),
           }}
         />
-        <Typography
-          variant="body1"
-          sx={{
-            color: "primaryBlue",
-            fontWeight: 500,
-          }}
-        >
-          {t("sort")}
-        </Typography>
+        {!isMobile && (
+          <Typography
+            variant="body1"
+            sx={{
+              color: sortOpen ? "white" : "primaryBlue",
+              fontWeight: 500,
+            }}
+          >
+            {t("sort")}
+          </Typography>
+        )}
         {!sortOpen && sortingActive && (
           <Box
             sx={{
@@ -147,7 +176,7 @@ export const OrderActionsChip = (props: Props) => {
               height: "16px",
               justifyContent: "center",
               position: "absolute",
-              left: "36px",
+              right: "-3px",
               top: "0",
               width: "16px",
             }}
diff --git a/govtool/frontend/src/components/atoms/SliderArrow.tsx b/govtool/frontend/src/components/molecules/SliderArrow.tsx
similarity index 97%
rename from govtool/frontend/src/components/atoms/SliderArrow.tsx
rename to govtool/frontend/src/components/molecules/SliderArrow.tsx
index d48fcbec8..b4b079d48 100644
--- a/govtool/frontend/src/components/atoms/SliderArrow.tsx
+++ b/govtool/frontend/src/components/molecules/SliderArrow.tsx
@@ -3,11 +3,11 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 import { theme } from "@/theme";
 
-interface SliderArrowProps {
+type SliderArrowProps = {
   disabled: boolean;
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   left?: boolean;
-}
+};
 
 export const SliderArrow = ({ disabled, onClick, left }: SliderArrowProps) => {
   const {
diff --git a/govtool/frontend/src/components/molecules/SliderArrows.tsx b/govtool/frontend/src/components/molecules/SliderArrows.tsx
index c481836ae..6d5f9e7a6 100644
--- a/govtool/frontend/src/components/molecules/SliderArrows.tsx
+++ b/govtool/frontend/src/components/molecules/SliderArrows.tsx
@@ -1,5 +1,5 @@
 import { KeenSliderHooks, KeenSliderInstance } from "keen-slider/react";
-import { SliderArrow } from "@atoms";
+import { SliderArrow } from "@molecules";
 import { Box } from "@mui/material";
 
 type SliderArrowsProps = {
@@ -16,34 +16,31 @@ export const SliderArrows = ({
   currentSlide,
   instanceRef,
   itemsPerView,
-}: SliderArrowsProps) => (
-  <>
-    {instanceRef.current && (
-      <Box
-        sx={{
-          display: "flex",
-          gap: "4px",
+}: SliderArrowsProps) =>
+  instanceRef.current && (
+    <Box
+      sx={{
+        display: "flex",
+        gap: "4px",
+      }}
+    >
+      <SliderArrow
+        left
+        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+          e.stopPropagation();
+          instanceRef.current?.prev();
         }}
-      >
-        <SliderArrow
-          left
-          onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-            e.stopPropagation();
-            instanceRef.current?.prev();
-          }}
-          disabled={currentSlide === 0}
-        />
-        <SliderArrow
-          onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-            e.stopPropagation();
-            instanceRef.current?.next();
-          }}
-          disabled={
-            currentSlide + itemsPerView >=
-            instanceRef.current.track.details.slides.length
-          }
-        />
-      </Box>
-    )}
-  </>
-);
+        disabled={currentSlide === 0}
+      />
+      <SliderArrow
+        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+          e.stopPropagation();
+          instanceRef.current?.next();
+        }}
+        disabled={
+          currentSlide + itemsPerView >=
+          instanceRef.current.track.details.slides.length
+        }
+      />
+    </Box>
+  );
diff --git a/govtool/frontend/src/components/molecules/VotesSubmitted.tsx b/govtool/frontend/src/components/molecules/VotesSubmitted.tsx
index f24b11c73..1e4ba2347 100644
--- a/govtool/frontend/src/components/molecules/VotesSubmitted.tsx
+++ b/govtool/frontend/src/components/molecules/VotesSubmitted.tsx
@@ -5,11 +5,11 @@ import { VotePill } from "@atoms";
 import { useTranslation } from "@hooks";
 import { correctAdaFormat } from "@/utils/adaFormat";
 
-interface Props {
+type Props = {
   yesVotes: number;
   noVotes: number;
   abstainVotes: number;
-}
+};
 
 export const VotesSubmitted = ({ yesVotes, noVotes, abstainVotes }: Props) => {
   const { t } = useTranslation();
diff --git a/govtool/frontend/src/components/molecules/index.ts b/govtool/frontend/src/components/molecules/index.ts
index 0947666fb..78d4f0563 100644
--- a/govtool/frontend/src/components/molecules/index.ts
+++ b/govtool/frontend/src/components/molecules/index.ts
@@ -25,6 +25,7 @@ export * from "./GovernanceVotedOnCard";
 export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";
 export * from "./Share";
+export * from "./SliderArrow";
 export * from "./SliderArrows";
 export * from "./Step";
 export * from "./VoteActionForm";
diff --git a/govtool/frontend/src/components/molecules/types.ts b/govtool/frontend/src/components/molecules/types.ts
index 0ed7df185..dbe0db33c 100644
--- a/govtool/frontend/src/components/molecules/types.ts
+++ b/govtool/frontend/src/components/molecules/types.ts
@@ -5,6 +5,7 @@ export type LinkWithIconProps = {
   onClick: () => void;
   icon?: JSX.Element;
   sx?: SxProps;
+  cutWithEllipsis?: boolean;
 };
 
 export type StepProps = {
diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx
index 8db0e5603..480de270c 100644
--- a/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx
@@ -110,8 +110,6 @@ export const DashboardGovernanceActionDetails = () => {
             }
             // TODO: Add data validation
             isDataMissing={isDataMissing}
-            // TODO: To decide if we want to keep it when metadate BE is ready
-            // details={state ? state.details : data.proposal.details}
             expiryDate={
               state
                 ? formatDisplayDate(state.expiryDate)
diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx
index 2ff29ba3e..f9b22bc1e 100644
--- a/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx
@@ -16,11 +16,11 @@ import {
   DashboardGovernanceActionsVotedOn,
 } from "@organisms";
 
-interface TabPanelProps {
+type TabPanelProps = {
   children?: React.ReactNode;
   index: number;
   value: number;
-}
+};
 
 const defaultCategories = GOVERNANCE_ACTIONS_FILTERS.map(
   (category) => category.key,
diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx
index 6c46c7f5b..5f8758cd2 100644
--- a/govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx
@@ -12,11 +12,11 @@ import { getProposalTypeLabel } from "@/utils/getProposalTypeLabel";
 import { getFullGovActionId } from "@/utils";
 import { useCardano } from "@/context";
 
-interface DashboardGovernanceActionsVotedOnProps {
+type DashboardGovernanceActionsVotedOnProps = {
   filters: string[];
   searchPhrase?: string;
   sorting: string;
-}
+};
 
 export const DashboardGovernanceActionsVotedOn = ({
   filters,
diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
index 4c3cdec67..f6fabab7b 100644
--- a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
+++ b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
@@ -10,7 +10,6 @@ import { useState } from "react";
 type GovernanceActionDetailsCardProps = {
   abstainVotes: number;
   createdDate: string;
-  // details: unknown;
   expiryDate: string;
   noVotes: number;
   type: string;
@@ -27,7 +26,6 @@ type GovernanceActionDetailsCardProps = {
 export const GovernanceActionDetailsCard = ({
   abstainVotes,
   createdDate,
-  // details,
   expiryDate,
   noVotes,
   type,
diff --git a/govtool/frontend/src/components/organisms/Slider.tsx b/govtool/frontend/src/components/organisms/Slider.tsx
index 1394a70b5..6be504364 100644
--- a/govtool/frontend/src/components/organisms/Slider.tsx
+++ b/govtool/frontend/src/components/organisms/Slider.tsx
@@ -58,6 +58,10 @@ export const Slider = ({
 
   const isShowArrows = useMemo(
     () =>
+      // Arrows are to be show only on desktop view.
+      // 268 - side menu width; 40 - distance needed from the left on
+      // disconnected wallet (no side menu); 350 - gov action card width;
+      // other values are for paddings and margins
       screenWidth <
       (onDashboard ? 268 : 40) + 28 + dataLength * 350 + 20 * dataLength - 5,
     [screenWidth, dataLength],
diff --git a/govtool/frontend/src/consts/icons.ts b/govtool/frontend/src/consts/icons.ts
index d1d237ced..dfabf260d 100644
--- a/govtool/frontend/src/consts/icons.ts
+++ b/govtool/frontend/src/consts/icons.ts
@@ -26,7 +26,6 @@ export const ICONS = {
   guidesIcon: "/icons/Guides.svg",
   helpIcon: "/icons/Help.svg",
   link: "/icons/Link.svg",
-  separator: "/icons/Separator.svg",
   share: "/icons/Share.svg",
   sortActiveIcon: "/icons/SortActive.svg",
   sortIcon: "/icons/Sort.svg",
diff --git a/govtool/frontend/src/pages/GovernanceActionDetails.tsx b/govtool/frontend/src/pages/GovernanceActionDetails.tsx
index 8fc1055bc..c914ce978 100644
--- a/govtool/frontend/src/pages/GovernanceActionDetails.tsx
+++ b/govtool/frontend/src/pages/GovernanceActionDetails.tsx
@@ -136,8 +136,6 @@ export const GovernanceActionDetails = () => {
                   }
                   // TODO: Add data validation
                   isDataMissing={isDataMissing}
-                  // TODO: To decide if we want to keep it when metadate BE is ready
-                  // details={state ? state.details : data.proposal.details}
                   expiryDate={
                     state
                       ? formatDisplayDate(state.expiryDate)
diff --git a/govtool/frontend/src/theme.ts b/govtool/frontend/src/theme.ts
index 83cd35489..7b9bd2331 100644
--- a/govtool/frontend/src/theme.ts
+++ b/govtool/frontend/src/theme.ts
@@ -9,57 +9,6 @@ import {
   successGreen,
 } from "./consts";
 
-declare module "@mui/material/styles" {
-  interface Palette {
-    accentOrange: string;
-    accentYellow: string;
-    arcticWhite: string;
-    boxShadow1: string;
-    boxShadow2: string;
-    errorRed: string;
-    highlightBlue: string;
-    inputRed: string;
-    negativeRed: string;
-    neutralGray: string;
-    orangeDark: string;
-    neutralWhite: string;
-    positiveGreen: string;
-    primaryBlue: string;
-    secondaryBlue: string;
-    specialCyan: string;
-    specialCyanBorder: string;
-    lightBlue: string;
-    textBlack: string;
-    textGray: string;
-    lightOrange: string;
-    fadedPurple: string;
-  }
-  interface PaletteOptions {
-    accentOrange: string;
-    accentYellow: string;
-    arcticWhite: string;
-    boxShadow1: string;
-    boxShadow2: string;
-    errorRed: string;
-    highlightBlue: string;
-    orangeDark: string;
-    inputRed: string;
-    negativeRed: string;
-    neutralGray: string;
-    neutralWhite: string;
-    positiveGreen: string;
-    primaryBlue: string;
-    secondaryBlue: string;
-    specialCyan: string;
-    specialCyanBorder: string;
-    lightBlue: string;
-    textBlack: string;
-    textGray: string;
-    lightOrange: string;
-    fadedPurple: string;
-  }
-}
-
 export type Theme = typeof theme;
 
 export const theme = createTheme({
diff --git a/govtool/frontend/src/types/@mui.d.ts b/govtool/frontend/src/types/@mui.d.ts
index c8ea5da12..e83f05e7e 100644
--- a/govtool/frontend/src/types/@mui.d.ts
+++ b/govtool/frontend/src/types/@mui.d.ts
@@ -16,8 +16,10 @@ declare module "@mui/material/styles" {
   interface PaletteOptions extends MuiPalette {
     accentOrange: string;
     accentYellow: string;
+    arcticWhite: string;
     boxShadow1: string;
     boxShadow2: string;
+    errorRed: string;
     highlightBlue: string;
     inputRed: string;
     negativeRed: string;
diff --git a/govtool/frontend/src/utils/getProposalTypeLabel.ts b/govtool/frontend/src/utils/getProposalTypeLabel.ts
index 0064dd602..7a3dcccdc 100644
--- a/govtool/frontend/src/utils/getProposalTypeLabel.ts
+++ b/govtool/frontend/src/utils/getProposalTypeLabel.ts
@@ -4,5 +4,6 @@ export const getProposalTypeLabel = (type: string) => {
   const label = GOVERNANCE_ACTIONS_FILTERS.find((i) => i.key === type)?.label;
   return label || type;
 };
+
 export const getProposalTypeNoEmptySpaces = (type: string) =>
   getProposalTypeLabel(type).replace(/ /g, "");
diff --git a/govtool/frontend/src/utils/tests/getProposalTypeNoEmptySpaces.test.ts b/govtool/frontend/src/utils/tests/getProposalTypeNoEmptySpaces.test.ts
new file mode 100644
index 000000000..4ec64fe92
--- /dev/null
+++ b/govtool/frontend/src/utils/tests/getProposalTypeNoEmptySpaces.test.ts
@@ -0,0 +1,25 @@
+import { getProposalTypeNoEmptySpaces } from "..";
+
+describe("getProposalTypeNoEmptySpaces", () => {
+  it("returns correct label with no spaces for a known type", () => {
+    const type = "NoConfidence";
+    const expectedLabel = "NoConfidence";
+    expect(getProposalTypeNoEmptySpaces(type)).toBe(expectedLabel);
+  });
+
+  it("returns correct label with no spaces for another known type", () => {
+    const type = "ParameterChange";
+    const expectedLabel = "ProtocolParameterChanges";
+    expect(getProposalTypeNoEmptySpaces(type)).toBe(expectedLabel);
+  });
+
+  it("returns the type itself with no spaces removed when no matching key is found", () => {
+    const type = "UnknownType";
+    expect(getProposalTypeNoEmptySpaces(type)).toBe(type);
+  });
+
+  it("returns an empty string when given an empty string", () => {
+    const type = "";
+    expect(getProposalTypeNoEmptySpaces(type)).toBe(type);
+  });
+});