changed color and font to pull from global theme

src/components/Buttons/ArrowButton/ArrowButton.styled.js

 height: 18px;
 & path {
     ${props => props.disabled && `
-    stroke: ${selectedTheme.iconStrokeDisabledColor}
+    stroke: ${selectedTheme.colors.iconStrokeDisabledColor}
     `}
 }
 `
 export const ArrowContainer = styled(IconButton)`
-border: 1px solid ${selectedTheme.primaryPurple};
+border: 1px solid ${selectedTheme.colors.primaryPurple};
 border-radius: 100%;
 min-width: 40px;
 width: 40px;
 margin-bottom: auto;
 transition: 0.2s all ease;
 &:hover {
-    background-color: ${selectedTheme.primaryPurple};
+    background-color: ${selectedTheme.colors.primaryPurple};
     & svg path {
         stroke: white;
     }
 }
 ${props => props.disabled && `
-    border 1px solid ${selectedTheme.iconStrokeDisabledColor};
+    border 1px solid ${selectedTheme.colors.iconStrokeDisabledColor};
     &:hover {
         background-color: inherit;
         & svg path {
-            stroke: ${selectedTheme.iconStrokeDisabledColor};
+            stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
         }
     }
     & svg path {
-        stroke: ${selectedTheme.iconStrokeDisabledColor};
+        stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
         transition: 0.2s all ease;
         
     }

src/components/Buttons/IconButton/IconButton.styled.js

             stroke: ${props.iconcolor};
         }
     `}
-    border: ${props => props.border ? "1px solid " + selectedTheme.backgroundSponsoredColor : "none"}
+    border: ${props => props.border ? "1px solid " + selectedTheme.colors.backgroundSponsoredColor : "none"}
 `

src/components/Buttons/PrimaryButton/PrimaryButton.js

 import React from "react";
 import PropTypes from "prop-types";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import {
   PrimaryButtonContainer,
   PrimaryButtonStyled,
 } from "./PrimaryButton.styled";
+import selectedTheme from "../../../themes";
 
 export const PrimaryButton = (props) => {
   return (
 };
 
 PrimaryButton.defaultProps = {
-  font: TextFont,
+  font: selectedTheme.fonts.textFont,
 };

src/components/Buttons/PrimaryButton/PrimaryButton.styled.js

 export const PrimaryButtonStyled = styled(Button)`
   background-color: ${(props) =>
     props.disabled
-      ? selectedTheme.primaryPurpleDisabled
+      ? selectedTheme.colors.primaryPurpleDisabled
       : props.variant === "contained"
       ? props.buttoncolor
       : "transparent"} !important;
     props.variant === "outlined" ? props.buttoncolor : "transparent"};
   color: ${(props) =>
     props.disabled
-      ? selectedTheme.primaryTextDisabled
+      ? selectedTheme.colors.primaryTextDisabled
       : props.textcolor} !important;
   box-shadow: 0 0 0 0;
   font-size: 12px;
     box-shadow: 0 0 0 0;
   }
   &:disabled {
-    background-color: ${selectedTheme.primaryPurpleDisabled};
+    background-color: ${selectedTheme.colors.primaryPurpleDisabled};
     color: ${(props) => props.textcolor};
   }
 `;

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { Label } from "../../CheckBox/Label";
 import Select from "../../Select/Select";
 
   align-items: center;
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
   font-weight: 700;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
   margin-bottom: 40px;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const CreateOfferFormContainer = styled(Box)`
 `;
 export const RegisterAltText = styled(Typography)`
   font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.fonts.textFont};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;
     font-size: 12px;
     font-weight: 600;
     line-height: 20px;
-    color: ${selectedTheme.primaryGrayText};
+    color: ${selectedTheme.colors.primaryGrayText};
     cursor: auto;
     letter-spacing: 0.2px;
   }

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.js

         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         //   disabled={
         //     formik.values.username.length === 0 ||

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.styled.js

 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 import { Label } from "../../../CheckBox/Label";
 import { TextField } from "../../../TextFields/TextField/TextField";
 
 export const CreateOfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
   font-weight: 700;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
   margin-bottom: 40px;
   position: relative;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 18px;
 `;
 export const CreateOfferFormContainer = styled(Box)`
     font-size: 12px;
     font-weight: 600;
     line-height: 20px;
-    color: ${selectedTheme.primaryGrayText};
+    color: ${selectedTheme.colors.primaryGrayText};
     cursor: auto;
     letter-spacing: 0.2px;
   }

src/components/Cards/FilterCard/FilterCard.js

 import qs from "query-string";
 import { useTranslation } from "react-i18next";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 const FilterCard = () => {
   const [appliedFilters, setAppliedFilters] = useState([]);
     <FilterCardContainer>
       <Header>
         <Title>{t("filters.title")}</Title>
-        <Link to="#" textsize={"12px"} font={TextFont} onClick={clearFilters}>
+        <Link to="#" textsize={"12px"} font={selectedTheme.fonts.textFont} onClick={clearFilters}>
           {t("filters.cancel")}
         </Link>
       </Header>
           variant="outlined"
           fullWidth
           onClick={handleFilters}
-          textcolor={selectedTheme.primaryPurple}
-          font={TextFont}
+          textcolor={selectedTheme.colors.primaryPurple}
+          font={selectedTheme.fonts.textFont}
           style={{
             fontWeight: "600",
             fontSize: "12px",
-            borderColor: selectedTheme.primaryPurple,
+            borderColor: selectedTheme.colors.primaryPurple,
           }}
         >
           {t("filters.usefilters")}

src/components/Cards/FilterCard/FilterCard.styled.js

 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FilterCardContainer = styled(Box)`
   position: fixed;
   font-size: 24px;
   line-height: 33px;
   font-weight: 700;
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   position: relative;
 `;
 export const Header = styled(Box)`
     padding-top: 7px;
   }
   & div button:hover {
-    background-color: ${selectedTheme.primaryPurple} !important;
-    color: ${selectedTheme.primaryBackgroundColor} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
+    color: ${selectedTheme.colors.primaryBackgroundColor} !important;
   }
 `;
 export const ContentContainer = styled(Box)`

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.js

 import PropTypes from "prop-types";
 import DropdownList from "../../../../Dropdown/DropdownList/DropdownList";
 import selectedTheme from "../../../../../themes";
-import {TextFont} from "../../../../../themes/primaryTheme/primaryThemeFonts"
 import IconWithNumber from "../../../../Icon/IconWithNumber/IconWithNumber";
 import { ReactComponent as DropdownDown } from "../../../../../assets/images/svg/down-arrow.svg";
 import { ReactComponent as DropdownUp } from "../../../../../assets/images/svg/up-arrow.svg";
       title={props.title}
       textcolor={
         props.filters.length > 0
-          ? selectedTheme.primaryPurple
-          : selectedTheme.primaryText
+          ? selectedTheme.colors.primaryPurple
+          : selectedTheme.colors.primaryText
       }
       dropdownIcon={
         <IconWithNumber number={props.filters.length}>
       fullWidth
       setIsOpened={setIsOpened}
       toggleIconStyles={{
-        backgroundColor: isOpened ?  "white" : selectedTheme.primaryIconBackgroundColor,
+        backgroundColor: isOpened ?  "white" : selectedTheme.colors.primaryIconBackgroundColor,
       }}
       headerOptions={
         <React.Fragment>
             value={toSearch}
             onChange={(event) => setToSearch(event.target.value)}
             textsize={"12px"}
-            font={TextFont}
+            font={selectedTheme.fonts.textFont}
             fullWidth
             height={"40px"}
             containerStyle={{ marginTop: "6px" }}

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.styled.js

 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../../themes";
-import { TextFont } from "../../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const SelectedItemsContainer = styled(Box)`
   display: flex;
 `;
 export const SelectedItem = styled(Box)`
   margin-top: 2px;
-  background-color: ${selectedTheme.primaryPurple};
+  background-color: ${selectedTheme.colors.primaryPurple};
   border-radius: 8px;
   color: white;
   padding-left: 8px;
   padding-right: 6px;
   line-height: 12px;
   letter-spacing: 0.02em;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
   cursor: pointer;
   margin-right: 3px;
   width: 21px;
   height: 21px;
   &:hover {
-    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   }
 `;

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.js

 import DropdownItem from "../../../../Dropdown/DropdownItem/DropdownItem";
 import RadioButton from "../../../../Radio/Button/RadioButton";
 import RadioGroup from "../../../../Radio/Group/RadioGroup";
-import { TextFont } from "../../../../../themes/primaryTheme/primaryThemeFonts";
 
 const FilterRadioDropdown = (props) => {
   const [toSearch, setToSearch] = useState("");
       title={props.title}
       textcolor={
         props.selected !== 0
-          ? selectedTheme.primaryPurple
-          : selectedTheme.primaryText
+          ? selectedTheme.colors.primaryPurple
+          : selectedTheme.colors.primaryText
       }
       dropdownIcon={props.icon}
       toggleIconClosed={<DropdownDown />}
       fullWidth
       setIsOpened={setIsOpened}
       toggleIconStyles={{
-        backgroundColor: isOpened ?  "white" : selectedTheme.primaryIconBackgroundColor,
+        backgroundColor: isOpened ?  "white" : selectedTheme.colors.primaryIconBackgroundColor,
       }}
       headerOptions={
         <React.Fragment>
             value={toSearch}
             onChange={(event) => setToSearch(event.target.value)}
             textsize={"12px"}
-            font={TextFont}
+            font={selectedTheme.fonts.textFont}
             fullWidth
             height={"40px"}
             containerStyle={{ marginTop: "6px" }}

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.styled.js

     width: 21px;
     height: 21px;
     &:hover {
-        background-color: ${selectedTheme.primaryIconBackgroundColor};
+        background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
     }
 `

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

       <OfferInfo>
         <Info>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+          <InfoIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="16px">
               <Category width={"14px"} />
             </InfoIcon>
           <InfoText>{offerMock.category}</InfoText>
           </InfoGroup>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+          <InfoIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="16px">
               <Subcategory width={"14px"} />
             </InfoIcon>
           <InfoText>{offerMock.subcategory}</InfoText>
           </InfoGroup>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+          <InfoIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="16px">
           <Quantity width={"22px"} height={"16px"} />
             </InfoIcon>
           <InfoText>{props.offer.condition}</InfoText>
         <React.Fragment>
           <CheckButton
             variant={props.sponsored ? "contained" : "outlined"}
-            buttoncolor={selectedTheme.primaryPurple}
-            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
+            buttoncolor={selectedTheme.colors.primaryPurple}
+            textcolor={props.sponsored ? "white" : selectedTheme.colors.primaryPurple}
             style={{fontWeight: "600"}}
           >
             Trampi

src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 //import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
   width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
   box-sizing: border-box;
   margin: 10px 0;
-  border: 1px solid ${selectedTheme.borderNormal};
+  border: 1px solid ${selectedTheme.colors.borderNormal};
   background-color: ${(props) =>
-    props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"};
+    props.sponsored === 'true' ? selectedTheme.colors.backgroundSponsoredColor : "white"};
   border-radius: 4px;
   padding: 18px;
   max-width: 2000px;
     gap:4px;
 `;
 export const PostDate = styled(Typography)`
-font-family: ${TextFont};
+font-family: ${selectedTheme.fonts.textFont};
 font-size: 12px;
-color: ${selectedTheme.primaryText};
+color: ${selectedTheme.colors.primaryText};
 `;
 export const Info = styled(Box)`
     display:flex;
     align-items:center;
 `;
 export const InfoText = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   text-transform: capitalize;
 `;
 export const OfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   flex: 1;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
   padding: 0 72px;
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
   padding: 0 72px;
 `;
 export const OfferCategory = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 33%;
 `;
 export const OfferPackage = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferViews = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   max-width: calc(100% - 230px);
   max-height: 120px;
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   position: relative;
   bottom: 9px;
   right: 9px;
   &:hover button {
-    background-color: ${selectedTheme.primaryPurple} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
     color: white !important;
   }
 `;

src/components/Cards/OfferCard/OfferCard.js

 
           <CheckButton
             variant={props.sponsored ? "contained" : "outlined"}
-            buttoncolor={selectedTheme.primaryPurple}
-            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
+            buttoncolor={selectedTheme.colors.primaryPurple}
+            textcolor={props.sponsored ? "white" : selectedTheme.colors.primaryPurple}
             style={{fontWeight: "600"}}
             onClick = {() => routeToItem(props.offer._id)}
           >

src/components/Cards/OfferCard/OfferCard.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
   box-sizing: border-box;
   margin: 10px 0;
   background-color: ${(props) =>
-    props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"};
+    props.sponsored === 'true' ? selectedTheme.colors.backgroundSponsoredColor : "white"};
   border-radius: 4px;
   ${(props) =>
     props.sponsored === 'true' &&
-    `border: 1px solid ${selectedTheme.borderSponsoredColor};`}
+    `border: 1px solid ${selectedTheme.colors.borderSponsoredColor};`}
   padding: 16px;
   max-width: 2000px;
   height: 180px;
   margin-left: 18px;
 `;
 export const OfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   flex: 1;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
 `;
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
   gap: 1rem;
 `;
 export const OfferCategory = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   @media (max-width: 1000px) {
   }
 `;
 export const OfferPackage = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 export const OfferViews = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   @media (max-width: 1200px) {
   }
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   max-width: calc(100% - 230px);
   max-height: 120px;
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   position: relative;
   bottom: 9px;
   right: 9px;
   &:hover button {
-    background-color: ${selectedTheme.primaryPurple} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
     color: white !important;
   }
   @media (max-width: 650px) {
   position: absolute;
   top: 10px;
   right: 10px;
-  background-color: ${selectedTheme.primaryIconBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;

src/components/CheckBox/CheckBox.js

 };
 
 CheckBox.defaultProps = {
-  color: selectedTheme.primaryPurple,
+  color: selectedTheme.colors.primaryPurple,
 };

src/components/CheckBox/CheckBox.styled.js

 import { Box, Checkbox, FormControlLabel } from "@mui/material";
 import styled from "styled-components";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
+import selectedTheme from "../../themes";
 
 export const CheckBoxContainer = styled(Box)`
   ${(props) =>
     `}
   margin-right: 0;
   & label {
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 12px;
   }
   & span:nth-child(1) svg {

src/components/CheckBox/Label.styled.js

 import { Box, FormLabel } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const LabelContainer = styled(Box)`
     display: flex;
 `
 
 export const LeftLabel = styled(FormLabel)`
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 200px;
     flex: 1;
     cursor: pointer;
-    color: ${selectedTheme.primaryText};
+    color: ${selectedTheme.colors.primaryText};
 `
 export const RightLabel = styled(FormLabel)`
     margin-left: 10px;
     white-space: nowrap;
     max-width: 100px;
     cursor: pointer;
-    color: ${selectedTheme.primaryText};
-    font-family: ${TextFont};
+    color: ${selectedTheme.colors.primaryText};
+    font-family: ${selectedTheme.fonts.textFont};
 
 `

src/components/Dropdown/DropdownItem/DropdownItem.styled.js

 import { Box } from "@mui/material";
 import styled from "styled-components";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
+import selectedTheme from "../../../themes";
 
 export const DropdownItemContainer = styled(Box)`
 `
 
 export const DropdownItemStyled = styled(Box)`
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
 `

src/components/Dropdown/DropdownList/DropdownList.styled.js

 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 
 export const DropdownListContainer = styled(Box)`
   padding-bottom: 10px;
   padding-top: 5px;
   padding-right: 0.9rem;
-  font-family: ${TextFont};
-  color: ${props => props.textcolor ? props.textcolor : selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${props => props.textcolor ? props.textcolor : selectedTheme.colors.primaryText};
 `;
 
 export const ToggleIconOpened = styled(IconButton)`
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   & span {
     ${props => props.backgroundColor ? `background-color: ${props.backgroundColor}` : ``}
   }
 
 export const ToggleIconClosed = styled(IconButton)`
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   & span {
     ${props => props.backgroundColor ? `background-color: ${props.backgroundColor}` : ``}
   }

src/components/Icon/IconWithNumber/IconWithNumber.styled.js

 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
+
 
 export const IconWithNumberContainer = styled(Box)`
     position: relative;
 `
 export const Number = styled(Box)`
-    background-color: ${selectedTheme.primaryPurple};
+    background-color: ${selectedTheme.colors.primaryPurple};
     border-radius: 100%;
     color: white;
     position: absolute;
     font-size: 10px;
     bottom: 0;
     right: -5px;
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
 `

src/components/ImagePicker/ImagePicker.styled.js

   border-radius: 4px;
   position: relative;
   cursor: pointer;
-  background-color: ${selectedTheme.imagePickerBackground};
+  background-color: ${selectedTheme.colors.imagePickerBackground};
   background-image: linear-gradient(
       to right,
-      ${selectedTheme.primaryPurple} 50%,
+      ${selectedTheme.colors.primaryPurple} 50%,
       rgba(255, 255, 255, 0) 0%
     ),
     linear-gradient(
-      ${selectedTheme.primaryPurple} 50%,
+      ${selectedTheme.colors.primaryPurple} 50%,
       rgba(255, 255, 255, 0) 0%
     ),
     linear-gradient(
       to right,
-      ${selectedTheme.primaryPurple} 50%,
+      ${selectedTheme.colors.primaryPurple} 50%,
       rgba(255, 255, 255, 0) 0%
     ),
     linear-gradient(
-      ${selectedTheme.primaryPurple} 50%,
+      ${selectedTheme.colors.primaryPurple} 50%,
       rgba(255, 255, 255, 0) 0%
     );
   background-position: bottom, right, top, left;
     props.hasImage &&
     `
     background-image: none;
-    border: 1px solid ${selectedTheme.primaryPurple};
+    border: 1px solid ${selectedTheme.colors.primaryPurple};
   `}
 `;
 export const AddIcon = styled(Plus)`
   flex-direction: row;
   display: flex;
   & div {
-    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
     border-radius: 100px;
     display: flex;
     flex: 1;

src/components/ItemDetails/Header/Header.styled.js

 import { Box, Link, Typography} from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const HeaderContainer = styled(Box)`
     margin-top: 20px;
     gap:12px;
 `
 export const HeaderText = styled(Typography) `
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     line-height: 22px;
     font-size: 16px;
-    color: ${selectedTheme.primaryPurple};
+    color: ${selectedTheme.colors.primaryPurple};
     text-decoration: underline;
 `

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

         <OfferDetails>
          <OfferTitle>{author.title}</OfferTitle>
          <DetailContainer>
-           <DetailIcon color={selectedTheme.iconStrokeColor} component="span" size="22px">
+           <DetailIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="22px">
               <PIB width={"22px"} />
             </DetailIcon>
           <DetailText>PIB - {author.pib}</DetailText>
          </DetailContainer>
          <DetailContainer>
-            <DetailIcon color={selectedTheme.iconStrokeColor} component="span" size="22px">
+            <DetailIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="22px">
               <Category width={"22px"} />
             </DetailIcon>
           <DetailText>{author.location}</DetailText>

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.styled.js

 import { Box, Grid, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
   box-sizing: border-box;
   margin: 10px 0;
   background-color: ${(props) =>
-    props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"};
+    props.sponsored === 'true' ? selectedTheme.colors.backgroundSponsoredColor : "white"};
   border-radius: 4px;
-  border: 1px solid ${selectedTheme.borderNormal};
+  border: 1px solid ${selectedTheme.colors.borderNormal};
   max-width: 2000px;
   position: relative;
 `;
     flex-direction: row;
     align-items: center;
     gap:7px;
-    font-family: ${TextFont};
-    color: ${selectedTheme.primaryText};
+    font-family: ${selectedTheme.fonts.textFont};
+    color: ${selectedTheme.colors.primaryText};
     line-height: 16px;
     font-size: 12px;
 `;
     gap:18px;
 `;
 export const HeaderDetails = styled(Box)`
-    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   `;
 export const BottomDetails = styled(Box)`
   max-width:fit-content;
 `;
 export const OfferTitle = styled(Typography)`
   margin-bottom:12px;
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryPurple};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
 `;
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
 `;
 export const OfferLocation = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 export const OfferPIB = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 `;
 
 export const StatusText = styled(Grid)`
-font-family: ${TextFont};
-color: ${selectedTheme.primaryText};
+font-family: ${selectedTheme.fonts.textFont};
+color: ${selectedTheme.colors.primaryText};
 `
 export const OfferCategory = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 33%;
 `;
 export const OfferPackage = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferViews = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   max-width: calc(100% - 230px);
   max-height: 120px;
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 16px;
   position: relative;
   bottom: 9px;
   right: 9px;
   &:hover button {
-    background-color: ${selectedTheme.primaryPurple} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
     color: white !important;
   }
 `;
   position: absolute;
   top: 10px;
   right: 10px;
-  background-color: ${selectedTheme.primaryPurple};
+  background-color: ${selectedTheme.colors.primaryPurple};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;

src/components/Link/Link.styled.js

 
 export const LinkStyled = styled(Link)`
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-family: ${(props) => props.font};
   font-style: normal;
   font-weight: 400;

src/components/MarketPlace/Header/Header.js

           <HeaderButton
             iconColor={
               props.isGrid
-                ? selectedTheme.iconStrokeColor
-                : selectedTheme.primaryPurple
+                ? selectedTheme.colors.iconStrokeColor
+                : selectedTheme.colors.primaryPurple
             }
             onClick={() => props.setIsGrid(false)}
           >
           <HeaderButton
             iconColor={
               props.isGrid
-                ? selectedTheme.primaryPurple
-                : selectedTheme.iconStrokeColor
+                ? selectedTheme.colors.primaryPurple
+                : selectedTheme.colors.iconStrokeColor
             }
             onClick={() => props.setIsGrid(true)}
           >

src/components/MarketPlace/Header/Header.styled.js

 import selectedTheme from "../../../themes";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import Select from "../../Select/Select";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const HeaderContainer = styled(Box)`
     margin-top: 20px;
     align-items: center;
 `
 export const HeaderLocation = styled(Box)`
-    font-family: ${TextFont};
-    color: ${selectedTheme.primaryPurple};
+    font-family: ${selectedTheme.fonts.textFont};
+    color: ${selectedTheme.colors.primaryPurple};
     font-weight: 700;
     line-height: 22px;
     font-size: 16px;
 export const HeaderSelect = styled(Select)`
     width: 210px;
     height: 35px;
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     margin-top: 3px;
     font-weight: 400;
     position: relative;
     }
 `
 export const SelectItem = styled(MenuItem)`
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
 `
 export const IconStyled = styled(Box)`
     position: relative;
     display: flex;
     justify-content: space-between;
     margin-right: 40px;
-`
+`

src/components/Radio/Button/RadioButton.styled.js

 import { Box, FormControlLabel, Radio } from "@mui/material";
 import styled from "styled-components";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
+import selectedTheme from "../../../themes";
 
 export const RadioButtonContainer = styled(Box)`
   ${(props) =>
     `}
   margin-right: 0;
   & label {
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 12px;
   }
   & span:nth-child(1) svg {

src/components/Scroller/HorizontalScroller.styled.js

     overflow: hidden;
 `
 export const Arrow = styled(IconButton)`
-    border: 1px solid ${selectedTheme.primaryPurple};
+    border: 1px solid ${selectedTheme.colors.primaryPurple};
     border-radius: 100%;
     min-width: 40px;
     width: 40px;
     margin-bottom: auto;
     transition: 0.2s all ease;
     &:hover {
-        background-color: ${selectedTheme.primaryPurple};
+        background-color: ${selectedTheme.colors.primaryPurple};
         & svg path {
             stroke: white;
         }
     }
     ${props => props.disabled && `
-        border 1px solid ${selectedTheme.iconStrokeDisabledColor};
+        border 1px solid ${selectedTheme.colors.iconStrokeDisabledColor};
         & svg path {
-            stroke: ${selectedTheme.iconStrokeDisabledColor};
+            stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
             transition: 0.2s all ease;
             
         }
     height: 18px;
     & path {
         ${props => props.disabled && `
-        stroke: ${selectedTheme.iconStrokeDisabledColor}
+        stroke: ${selectedTheme.colors.iconStrokeDisabledColor}
         `}
     }
 `

src/components/Select/Option/Option.styled.js

 import selectedTheme from "../../../themes";
 
 export const OptionStyled = styled(MenuItem)`
-    background-color: ${props => props.selected ? selectedTheme.primaryPurple : "white"} !important;
-    color: ${props => props.selected ? "white" : selectedTheme.selectOptionTextColor};
+    background-color: ${props => props.selected ? selectedTheme.colors.primaryPurple : "white"} !important;
+    color: ${props => props.selected ? "white" : selectedTheme.colors.selectOptionTextColor};
     margin:2px 9px;
     border-radius: 4px;
     &:hover {
-        background-color: ${selectedTheme.primaryPurple} !important;
+        background-color: ${selectedTheme.colors.primaryPurple} !important;
         color: white;
     }
 `

src/components/Select/Select.styled.js

 import { Box, Select } from "@mui/material";
 import styled from "styled-components";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
+import selectedTheme from "../../themes";
 
 export const SelectStyled = styled(Select)`
     width: ${props => props.width};
     padding: 2px;
     font-size: 16px;
     font-weight: 600;
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
 `
 export const SelectIcon = styled(Box)`
     position: relative;

src/components/StepProgress/StepProgress.styled.js

 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const StepProgressContainer = styled(Box)`
   display: flex;
 export const StepBar = styled(Box)`
   flex: 0 0 35px;
   background-color: ${(props) =>
-    props.done ? selectedTheme.primaryPurple : selectedTheme.primaryDarkGrayText};
+    props.done ? selectedTheme.colors.primaryPurple : selectedTheme.colors.primaryDarkGrayText};
   border-radius: 100%;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   text-align: center;
   border: 5px solid
-    ${(props) => (props.current || props.done ? selectedTheme.primaryPurple : "white")};
+    ${(props) => (props.current || props.done ? selectedTheme.colors.primaryPurple : "white")};
   padding-top: 2px;
   line-height: 19px;
   margin-left: -2px;
 export const Progress = styled(Box)`
   height: 9px;
   width: ${(props) => (props.done ? "100%" : "0")};
-  background-color: ${selectedTheme.primaryPurple};
+  background-color: ${selectedTheme.colors.primaryPurple};
   transition: width 1s;
 `;

src/components/TextFields/TextField/TextField.styled.js

 `;
 
 export const TextFieldStyled = styled(TextField)`
-  background-color: ${selectedTheme.primaryBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryBackgroundColor};
   width: ${(props) => props.width};
   font-style: ${(props) =>
     props.italicplaceholder === "true" ? "italic" : "normal"};

src/components/UserReviewsCard/UserReviewsCard.js

                 <ListItemAvatar sx={{ mt: 0 }}>
                   <Avatar alt={review.name} src="/static/images/avatar/1.jpg" />
                 </ListItemAvatar>
-                <Typography sx={{ color: selectedTheme.primaryPurple }}>
+                <Typography sx={{ color: selectedTheme.colors.primaryPurple }}>
                   <b>{review.name}</b>
                 </Typography>
               </ListItem>

src/pages/CreateOffer/CreateOffer.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const CreateOfferContainer = styled(Container)`
   margin-top: 0px;
   align-items: center;
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
   font-weight: 700;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
   margin-bottom: 40px;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const CreateOfferFormContainer = styled(Box)`
   height: 216px;
 `;
 export const RegisterAltText = styled(Typography)`
-  font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;

src/pages/ForgotPasswordPage/ForgotPassword.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const ForgotPasswordPageContainer = styled(Container)`
   margin-top: 200px;
   }
 `;
 export const ForgotPasswordTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
 `;
 export const ForgotPasswordDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const FormContainer = styled(Box)`
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   top: -7px;
   font-size: 14px;
 `
 export const LoginAltText = styled(Typography)`
-  font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.js

           variant="contained"
           height="48px"
           fullWidth
-          buttoncolor={selectedTheme.primaryPurple}
+          buttoncolor={selectedTheme.colors.primaryPurple}
           textcolor="white"
           onClick={navigateLogin}
         >

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const MailSentContainer = styled(Container)`
   margin-top: 300px;
   }
 `;
 export const Title = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   width: 328px;
   height: 33px;
   text-align: center;
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 6px;
 `;
 export const Description = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 279px;
   font-style: normal;
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 36px;
 `;
 export const FormContainer = styled(Box)`
   height: 216px;
 `;
 export const StandardText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 16px;
   padding-right: 6px;
   line-height: 14px;

src/pages/ForgotPasswordPage/ForgotPasswordPage.js

           variant="contained"
           height="48px"
           fullWidth
-          buttoncolor={selectedTheme.primaryPurple}
+          buttoncolor={selectedTheme.colors.primaryPurple}
           textcolor="white"
           disabled={formik.values.email?.length === 0}
         >

src/pages/HomePage/HomePage.styled.js

   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: ${selectedTheme.offerBackgroundColor};
+  background-color: ${selectedTheme.colors.offerBackgroundColor};
 `;
 export const GridStyled = styled(Grid)`
   

src/pages/ItemDetailsPage/ItemDetailsPage.styled.js

   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: ${selectedTheme.offerBackgroundColor};
+  background-color: ${selectedTheme.colors.offerBackgroundColor};
 `;
 export const GridStyled = styled(Grid)`
   

src/pages/LoginPage/Login.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const LoginPageContainer = styled(Container)`
   margin-top: 150px;
   }
 `;
 export const LoginTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
 `;
 export const LoginDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const LoginFormContainer = styled(Box)`
   height: 216px;
 `;
 export const RegisterAltText = styled(Typography)`
-  font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   top: -12px;
   height: 20px;

src/pages/LoginPage/LoginPage.js

           variant="contained"
           height="48px"
           fullWidth
-          buttoncolor={selectedTheme.primaryPurple}
+          buttoncolor={selectedTheme.colors.primaryPurple}
           textcolor="white"
           disabled={
             formik.values.email.length === 0 ||

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js

         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.mail.length === 0 ||

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.styled.js

 import { Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   font-size: 12px;
   width: 100%;
   text-align: left;
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   top: -7px;
   font-size: 14px;

src/pages/RegisterPages/Register/Register.styled.js

 import styled from "styled-components";
 import ImagePicker from "../../../components/ImagePicker/ImagePicker";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { ReactComponent as ProfilePictureSVG } from "../../../assets/images/profile-picture.svg";
 
 export const RegisterPageContainer = styled(Container)`
   }
 `;
 export const RegisterTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 34px;
   @media (max-height: 800px) {
     margin-top: 26px;
   }
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
   @media (max-height: 800px) {
     margin-bottom: 14px;
 `;
 export const LoginAltText = styled(Typography)`
   font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;
   }
 `;
 export const FooterText = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   color: #505050;
   text-align: center;
   width: 330px;
 export const ProfileImagePicker = styled(ImagePicker)`
   background: none;
   margin: 36px;
-  background: ${selectedTheme.primaryIconBackgroundColor};
+  background: ${selectedTheme.colors.primaryIconBackgroundColor};
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%235A3984FF' stroke-width='2' stroke-dasharray='7%2c 12' stroke-dashoffset='44' stroke-linecap='square'/%3e%3c/svg%3e");
   border-radius: 100px;
   overflow: hidden;

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.js

         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.PIB.length === 0 ||

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.styled.js

 import { Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 12px;
   width: 100%;
   text-align: left;
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   top: -7px;
   font-size: 14px;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js

         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.location.length === 0 &&

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

 import {  Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 12px;
   width: 100%;
   text-align: left;

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.styled.js

 import { Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const RegisterSuccessfulContainer = styled(Container)`
   margin-top: 300px;
   padding: 0;
 `;
 export const RegisterTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 430px;
   text-align: center;
   flex: 1;
   font-weight: 400;
   font-size: 39px;
   line-height: 48px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 32px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 36px;
   width: 430px;
   font-style: normal;
   display: block;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;

src/pages/ResetPasswordPage/ResetPasswordPage.js

           variant="contained"
           height="48px"
           fullWidth
-          buttoncolor={selectedTheme.primaryPurple}
+          buttoncolor={selectedTheme.colors.primaryPurple}
           textcolor="white"
           disabled={
             formik.values.password.length < 8 ||

src/pages/ResetPasswordPage/ResetPasswordPage.styled.js

 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const ResetPasswordPageContainer = styled(Container)`
   margin-top: 200px;
   }
 `;
 export const ResetPasswordTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
 `;
 export const ResetPasswordDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 270px;
   font-style: normal;
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const FormContainer = styled(Box)`
   justify-content: center;
 `;
 export const FooterText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   padding-right: 6px;
   text-align: center;
   width: 340px;

src/themes/index.js

-import { primaryThemeColors } from "./primaryTheme/primaryThemeColors";
+import primary from "./primaryTheme/primaryTheme";
+
 
 let selectedThemeNumber = 0;
 
 const getTheme = () => {
     if (selectedThemeNumber === 0) {
-        return {...primaryThemeColors}
+        return {...primary}
     }
 }
 

src/themes/primaryTheme/base.js

 import { createGlobalStyle } from "styled-components";
 import { pxToRemMd } from "./helper";
-import { TextFont } from "./primaryThemeFonts";
+import selectedTheme from "..";
 import { variables } from './variables';
 
 
 blockquote,
 th,
 td {
-  ${TextFont}
+  ${selectedTheme.fonts.textFont}
 }
 
 p {

src/themes/primaryTheme/primaryTheme.js

+const primary = {
+    colors : {
+        primaryPurple: "#5A3984",
+        primaryYellow: "#f7b126",
+        primaryPurpleDisabled: "#4D4D4D",
+        primaryBackgroundColor: "#F1F1F1",
+        primaryTextDisabled: "#F1F1F1",
+        primaryText: "#4D4D4D",
+        primaryGrayText: "#818181",
+        primaryDarkGrayText: "#DCDCDC",
+        primaryIconBackgroundColor: "#E4E4E4",
+        borderNormal: "#D4D4D4",
+        borderSponsoredColor: "#E5D0FF",
+        backgroundSponsoredColor: "#F5EDFF",
+        offerBackgroundColor: "#F5F5F5",
+        selectOptionTextColor: "#1D1D1D",
+        primaryDarkText: "#505050",
+        iconStrokeColor: "#8C8C8C",
+        iconStrokeDisabledColor: "#818181"
+    },
+     fonts : {
+        textFont: "Open Sans",
+        titleFont: "Josefin Sans"
+    }
+}
+
+export default primary;
+ 

src/themes/primaryTheme/primaryThemeColors.js

-export const primaryThemeColors = {
-    primaryPurple: "#5A3984",
-    primaryYellow: "#f7b126",
-    primaryPurpleDisabled: "#4D4D4D",
-    primaryBackgroundColor: "#F1F1F1",
-    primaryTextDisabled: "#F1F1F1",
-    primaryText: "#4D4D4D",
-    primaryGrayText: "#818181",
-    primaryDarkGrayText: "#DCDCDC",
-    primaryIconBackgroundColor: "#E4E4E4",
-    borderNormal: "#D4D4D4",
-    borderSponsoredColor: "#E5D0FF",
-    backgroundSponsoredColor: "#F5EDFF",
-    offerBackgroundColor: "#F5F5F5",
-    selectOptionTextColor: "#1D1D1D",
-    primaryDarkText: "#505050",
-    iconStrokeColor: "#8C8C8C",
-    iconStrokeDisabledColor: "#818181"
-}

src/themes/primaryTheme/primaryThemeFonts.js

-import { css } from "styled-components";
-
-export const TextFont = css`
-    font-family: "Open Sans";
-`;
-
-export const AppTitle = css`
-    font-famili: "Josefin Sans";
-`;
+export const primaryThemeFonts = {
+    textFont: "OpenSans",
+    titleFont: "Josefin Sans"
+}

src/themes/primaryTheme/variables.js

 export const variables = {
+    font:{
+      textFont: "Open Sans"
+    },
     typography: {
       p: {
         large: {