diff --git a/components/tools/ActionButton.tsx b/components/tools/ActionButton.tsx
index 9deb21d..b7122e6 100644
--- a/components/tools/ActionButton.tsx
+++ b/components/tools/ActionButton.tsx
@@ -1,5 +1,5 @@
 import { Box, BoxProps } from '@chakra-ui/react';
-import { FC, useCallback } from 'react';
+import { FC, useCallback, PropsWithChildren } from 'react';
 
 interface ActionButtonProps extends BoxProps {
   onClick: () => void;
@@ -7,7 +7,7 @@ interface ActionButtonProps extends BoxProps {
   disabled?: boolean;
 }
 
-export const ActionButton: FC<ActionButtonProps> = ({
+export const ActionButton: FC<PropsWithChildren<ActionButtonProps>> = ({
   children,
   onClick,
   isFullWidth = false,
diff --git a/components/tools/Authenticated.tsx b/components/tools/Authenticated.tsx
index cd11f69..cb49bc9 100644
--- a/components/tools/Authenticated.tsx
+++ b/components/tools/Authenticated.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, PropsWithChildren } from 'react';
 import { Spinner, Flex } from '@chakra-ui/react';
 import { useLoggingIn } from '../../hooks/auth/useLoggingIn';
 
@@ -8,7 +8,7 @@ interface AuthenticatedProps {
   spinnerCentered?: boolean;
 }
 
-export const Authenticated: FC<AuthenticatedProps> = ({
+export const Authenticated: FC<PropsWithChildren<AuthenticatedProps>> = ({
   children,
   fallback = null,
   noSpinner = false,
diff --git a/components/ui/CardWrapper.tsx b/components/ui/CardWrapper.tsx
index b6204a6..a94e9a3 100644
--- a/components/ui/CardWrapper.tsx
+++ b/components/ui/CardWrapper.tsx
@@ -1,7 +1,10 @@
 import { Flex, Box, chakra, FlexProps, BoxProps } from '@chakra-ui/react';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
-export const FlexCardWrapper: FC<FlexProps> = ({ children, ...props }) => {
+export const FlexCardWrapper: FC<PropsWithChildren<FlexProps>> = ({
+  children,
+  ...props
+}) => {
   const Wrapper = chakra(Flex, {
     baseStyle: {
       backgroundColor: 'dappTemplate.dark.darker',
@@ -18,7 +21,10 @@ export const FlexCardWrapper: FC<FlexProps> = ({ children, ...props }) => {
   return <Wrapper>{children}</Wrapper>;
 };
 
-export const CardWrapper: FC<BoxProps> = ({ children, ...props }) => {
+export const CardWrapper: FC<PropsWithChildren<BoxProps>> = ({
+  children,
+  ...props
+}) => {
   const Wrapper = chakra(Box, {
     baseStyle: {
       backgroundColor: 'dappTemplate.dark.darker',
diff --git a/components/ui/HeaderMenu.tsx b/components/ui/HeaderMenu.tsx
index 8777736..e63efdf 100644
--- a/components/ui/HeaderMenu.tsx
+++ b/components/ui/HeaderMenu.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Box } from '@chakra-ui/react';
 import { Logo } from './Logo';
 
-export const HeaderMenu: FC = ({ children }) => {
+export const HeaderMenu: FC<PropsWithChildren> = ({ children }) => {
   return (
     <Box
       display="flex"
diff --git a/components/ui/MainLayout.tsx b/components/ui/MainLayout.tsx
index 0f083c8..0d3abd5 100644
--- a/components/ui/MainLayout.tsx
+++ b/components/ui/MainLayout.tsx
@@ -1,9 +1,9 @@
 import { Container, Box } from '@chakra-ui/react';
-import { FC, memo } from 'react';
+import { FC, memo, PropsWithChildren } from 'react';
 import { MetaHead, MetaHeadProps } from './MetaHead';
 import { Footer } from './Footer';
 
-export const MainLayout: FC<MetaHeadProps> = memo(
+export const MainLayout: FC<PropsWithChildren<MetaHeadProps>> = memo(
   ({ children, metaTitle, metaDescription, metaImage, metaUrl }) => {
     return (
       <>