diff --git a/src/components/FormattedText.tsx b/src/components/FormattedText.tsx
index 95fa2eeb..a0d02652 100644
--- a/src/components/FormattedText.tsx
+++ b/src/components/FormattedText.tsx
@@ -1,6 +1,6 @@
 import { Text } from 'tamagui'
 
-type TextElement = {
+export type TextElement = {
   text: string
   bold?: boolean
   italic?: boolean
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 8ce9c2e2..56eae101 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -5,6 +5,7 @@ export type IconProps = {
   width?: number
   height?: number
   style?: unknown
+  className?: string
 }
 
 const Icon = ({ source, width = 16, height = 16, ...props }: IconProps) => {
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 0b4eddad..84f14be5 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -2,9 +2,12 @@ import Icon from './Icon'
 import ReactButton from './ReactButton'
 
 type IconButtonProps = {
-  icon: string
   children: string
-  onClick: () => void
+  icon: string
+  style?: unknown
+  size?: string
+  fontSize?: string
+  onClick?: () => void
 }
 
 const IconButton = ({ icon, children, ...props }: IconButtonProps) => {
diff --git a/src/components/ReactButton.tsx b/src/components/ReactButton.tsx
index 2f5e6c18..e1fd1fec 100644
--- a/src/components/ReactButton.tsx
+++ b/src/components/ReactButton.tsx
@@ -6,7 +6,7 @@ type ReactButtonProps = {
   style?: unknown
   icon?: ReactNode
   size?: string
-  onClick: () => void
+  onClick?: () => void
 }
 
 const ReactButton = ({ children, ...props }: ReactButtonProps) => {
diff --git a/src/components/SubTitle.jsx b/src/components/SubTitle.tsx
similarity index 100%
rename from src/components/SubTitle.jsx
rename to src/components/SubTitle.tsx
diff --git a/src/components/Title.jsx b/src/components/Title.tsx
similarity index 100%
rename from src/components/Title.jsx
rename to src/components/Title.tsx
diff --git a/src/components/Titles.jsx b/src/components/Titles.tsx
similarity index 62%
rename from src/components/Titles.jsx
rename to src/components/Titles.tsx
index 5dba984b..93f872c2 100644
--- a/src/components/Titles.jsx
+++ b/src/components/Titles.tsx
@@ -1,9 +1,14 @@
 import { XStack, YStack } from 'tamagui'
-import { SubTitle } from './SubTitle'
-import { Title } from './Title'
-import { IconButton } from './IconButton'
+import Title from './Title'
+import SubTitle from './SubTitle'
+import IconButton from './IconButton'
 
-const Titles = ({ title, subtitle }) => {
+type TitlesProps = {
+  title: string
+  subtitle: string
+}
+
+const Titles = ({ title, subtitle }: TitlesProps) => {
   return (
     <YStack>
       <XStack justifyContent="space-between">
@@ -12,13 +17,14 @@ const Titles = ({ title, subtitle }) => {
           style={{
             backgroundColor: 'transparent',
             border: '1px solid #DCE0E5',
+            color: '#09101C',
           }}
-          color={'#09101C'}
           size={'$3'}
           icon={'/icons/reveal.png'}
-          text={'Advanced Settings'}
           fontSize={'$5'}
-        />
+        >
+          Advanced Settings
+        </IconButton>
       </XStack>
       <SubTitle color={'#09101C'}>{subtitle}</SubTitle>
     </YStack>