diff --git a/src/components/accounts/List.js b/src/components/accounts/List.js
index c8eb96f..a96156e 100644
--- a/src/components/accounts/List.js
+++ b/src/components/accounts/List.js
@@ -1,73 +1,79 @@
-import React from 'react';
-import { View } from 'react-native';
+import React from 'react'
+import { View } from 'react-native'
 // import { StyledView, RowView, TitleText, ArrowIcon, SectionView} from './ListCards.styles';
-import { StyledView, RowView, TitleText, ArrowIcon, SectionView} from '../../infrastructure/styledComponents/styledComonents';
-import { theme } from '../../infrastructure/theme';
-
+import {
+   StyledView,
+   RowView,
+   TitleText,
+   ArrowIcon,
+   SectionView,
+} from '../../infrastructure/styledComponents/styledComonents'
+import { theme } from '../../infrastructure/theme'
 
 const ButtonCard = ({ title }) => {
-  return (
-    <StyledView>
-      <RowView>
-        <TitleText>{title}</TitleText>
-        <ArrowIcon name="arrow-forward-ios" size={24} color={theme.colors.icon.orange} />
-      </RowView>
-    </StyledView>
-  );
-};
+   return (
+      <StyledView>
+         <RowView>
+            <TitleText>{title}</TitleText>
+            <ArrowIcon
+               name="arrow-forward-ios"
+               size={24}
+               color={theme.colors.icon.orange}
+            />
+         </RowView>
+      </StyledView>
+   )
+}
 
 const List = (props) => {
-  // const title = props.title;
-  const exerciseButtons = [
-    { title: 'Edit Exercises'},
-    { title: 'Edit Categories'},
-    { title: 'Edit Workouts'},
-    { title: 'Workout History Log'},
-    { title: 'Weight (lb / kg)'},
-    { title: 'Set a Goal'},
-    { title: 'Set a Challenge'},
-    { title: 'Edit Categories'},
-    { title: 'Edit Categories'},
-    { title: 'Edit Categories'},
-  ];
-  const profileButtons = [
-    { title: 'My Profile'},
-    { title: 'My Trophies'},
-  ];
-  const notificationButtons = [
-    { title: 'Notifications'},
-    { title: 'Security and Privacy'},
-    { title: 'Delete Account'},
-  ];
-  const helpSupportButtons = [
-    { title: 'Help and Support'},
-    { title: 'Send Feedback'},
-  ];
+   // const title = props.title;
+   const exerciseButtons = [
+      { title: 'Edit Exercises' },
+      { title: 'Edit Categories' },
+      { title: 'Edit Workouts' },
+      { title: 'Workout History Log' },
+      { title: 'Weight (lb / kg)' },
+      { title: 'Set a Goal' },
+      { title: 'Set a Challenge' },
+      { title: 'Edit Categories' },
+      { title: 'Edit Categories' },
+      { title: 'Edit Categories' },
+   ]
+   const profileButtons = [{ title: 'My Profile' }, { title: 'My Trophies' }]
+   const notificationButtons = [
+      { title: 'Notifications' },
+      { title: 'Security and Privacy' },
+      { title: 'Delete Account' },
+   ]
+   const helpSupportButtons = [
+      { title: 'Help and Support' },
+      { title: 'Send Feedback' },
+   ]
 
-  return (
-    <View>
-      <SectionView>
-        {exerciseButtons.map((button, index) => (
-          <ButtonCard key={index} {...button} />
-        ))}
-      </SectionView>
-      <SectionView>
-        {profileButtons.map((button, index) => (
-          <ButtonCard key={index} {...button} />
-        ))}
-      </SectionView>
-      <SectionView>
-        {notificationButtons.map((button, index) => (
-          <ButtonCard key={index} {...button} />
-        ))}
-      </SectionView>
-      <SectionView>
-        {helpSupportButtons.map((button, index) => (
-          <ButtonCard key={index} {...button} />
-        ))}
-      </SectionView>
-    </View>
-  );
-};
+   return (
+      <View>
+         <SectionView>
+            {exerciseButtons.map((button, index) => (
+               <ButtonCard key={index} {...button} />
+            ))}
+         </SectionView>
+         <SectionView>
+            {profileButtons.map((button, index) => (
+               <ButtonCard key={index} {...button} />
+            ))}
+         </SectionView>
+         <SectionView>
+            {notificationButtons.map((button, index) => (
+               <ButtonCard key={index} {...button} />
+            ))}
+         </SectionView>
+         <SectionView>
+            {helpSupportButtons.map((button, index) => (
+               <ButtonCard key={index} {...button} />
+            ))}
+         </SectionView>
+      </View>
+   )
+}
 
-export default List;
+export default List
diff --git a/src/components/accounts/ListCards.styles.js b/src/components/accounts/ListCards.styles.js
index 02b25a9..77d923b 100644
--- a/src/components/accounts/ListCards.styles.js
+++ b/src/components/accounts/ListCards.styles.js
@@ -1,37 +1,37 @@
-import styled from 'styled-components/native';
-import { Text, View } from 'react-native';
-import { theme } from '../../infrastructure/theme';
-import { MaterialIcons } from '@expo/vector-icons';
+import styled from 'styled-components/native'
+import { Text, View } from 'react-native'
+import { theme } from '../../infrastructure/theme'
+import { MaterialIcons } from '@expo/vector-icons'
 
 export const StyledView = styled(View)`
-  background-color: ${theme.colors.background.neutral[2]};
-  margin: 5px;
-  margin-left: 8px;
-  border-radius: 20px;
-  border-width: 1px;
-  border-color: ${theme.colors.borders.neutral};
-  padding: 10px;
-  padding-bottom: 10px;
-  padding-left: 20px;
-`;
+   background-color: ${theme.colors.background.neutral[2]};
+   margin: 5px;
+   margin-left: 8px;
+   border-radius: 20px;
+   border-width: 1px;
+   border-color: ${theme.colors.borders.neutral};
+   padding: 10px;
+   padding-bottom: 10px;
+   padding-left: 20px;
+`
 
 export const RowView = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+`
 export const SectionView = styled(View)`
-  margin-top: 6px;
-  margin-bottom: 6px;
-`;
+   margin-top: 6px;
+   margin-bottom: 6px;
+`
 
 export const TitleText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 18px;
-  font-weight: 600;
-  padding-bottom: 0;
-  margin-bottom: 0;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 18px;
+   font-weight: 600;
+   padding-bottom: 0;
+   margin-bottom: 0;
+`
 
 export const ArrowIcon = styled(MaterialIcons)`
-  align-self: center;
-`;
\ No newline at end of file
+   align-self: center;
+`
diff --git a/src/components/card/ProgressBar.js b/src/components/card/ProgressBar.js
index 9d3a371..f468e2e 100644
--- a/src/components/card/ProgressBar.js
+++ b/src/components/card/ProgressBar.js
@@ -1,28 +1,34 @@
-import React from 'react';
-import { ProgressBarContainer, StyledLinearGradient, IconButtonContainer, AddRemoveIconButtonContainer, StyledIonicons } from './progressBar.styles';
-import { theme } from '../../infrastructure/theme';
+import React from 'react'
+import {
+   ProgressBarContainer,
+   StyledLinearGradient,
+   IconButtonContainer,
+   AddRemoveIconButtonContainer,
+   StyledIonicons,
+} from './progressBar.styles'
+import { theme } from '../../infrastructure/theme'
 
 const ProgressBar = () => {
-  return (
-    <ProgressBarContainer>
-      <StyledLinearGradient
-        colors={[
-          theme.colors.progress.start,
-          theme.colors.progress.middle,
-          theme.colors.progress.end,
-        ]}
-        locations={[0, 0.5104, 0.9531]}
-        start={{ x: 0, y: 0.5 }}
-        end={{ x: 1, y: 0.5 }}
-      />
-      <IconButtonContainer>
-        <StyledIonicons name="remove" />
-      </IconButtonContainer>
-      <AddRemoveIconButtonContainer>
-        <StyledIonicons name="add" />
-      </AddRemoveIconButtonContainer>
-    </ProgressBarContainer>
-  );
-};
+   return (
+      <ProgressBarContainer>
+         <StyledLinearGradient
+            colors={[
+               theme.colors.progress.start,
+               theme.colors.progress.middle,
+               theme.colors.progress.end,
+            ]}
+            locations={[0, 0.5104, 0.9531]}
+            start={{ x: 0, y: 0.5 }}
+            end={{ x: 1, y: 0.5 }}
+         />
+         <IconButtonContainer>
+            <StyledIonicons name="remove" />
+         </IconButtonContainer>
+         <AddRemoveIconButtonContainer>
+            <StyledIonicons name="add" />
+         </AddRemoveIconButtonContainer>
+      </ProgressBarContainer>
+   )
+}
 
-export default ProgressBar;
+export default ProgressBar
diff --git a/src/components/card/progressBar.styles.js b/src/components/card/progressBar.styles.js
index c40d15d..f34d59f 100644
--- a/src/components/card/progressBar.styles.js
+++ b/src/components/card/progressBar.styles.js
@@ -1,38 +1,38 @@
-import styled from 'styled-components/native';
-import { View } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import { theme } from '../../infrastructure/theme';
+import styled from 'styled-components/native'
+import { View } from 'react-native'
+import { Ionicons } from '@expo/vector-icons'
+import { LinearGradient } from 'expo-linear-gradient'
+import { theme } from '../../infrastructure/theme'
 
 export const ProgressBarContainer = styled(View)`
-  padding-top: 10px;
-  flex-direction: row;
-  gap: 5px;
-  align-items: center;
-  justify-content: space-between;
-`;
+   padding-top: 10px;
+   flex-direction: row;
+   gap: 5px;
+   align-items: center;
+   justify-content: space-between;
+`
 
 export const StyledLinearGradient = styled(LinearGradient)`
-  border-radius: 10px;
-  height: 25px;
-  width: 243px;
-  border-width: 2px;
-  border-color: ${theme.colors.borders.neutral};
-`;
+   border-radius: 10px;
+   height: 25px;
+   width: 243px;
+   border-width: 2px;
+   border-color: ${theme.colors.borders.neutral};
+`
 
 export const IconButtonContainer = styled(View)`
-  padding: 1px;
-  border-width: 1px;
-  border-color: ${theme.colors.borders.neutral};
-  border-radius: 100px;
-  background-color: ${theme.colors.background.neutral[2]};
-`;
+   padding: 1px;
+   border-width: 1px;
+   border-color: ${theme.colors.borders.neutral};
+   border-radius: 100px;
+   background-color: ${theme.colors.background.neutral[2]};
+`
 
 export const AddRemoveIconButtonContainer = styled(IconButtonContainer)`
-  background-color: ${theme.colors.background.neutral[0]};
-`;
+   background-color: ${theme.colors.background.neutral[0]};
+`
 
 export const StyledIonicons = styled(Ionicons)`
-  font-size: 25px;
-  color: ${theme.colors.text.neutral};
-`;
+   font-size: 25px;
+   color: ${theme.colors.text.neutral};
+`
diff --git a/src/components/challenges/ChallengesCards.js b/src/components/challenges/ChallengesCards.js
index ba6b2bd..800ab6c 100644
--- a/src/components/challenges/ChallengesCards.js
+++ b/src/components/challenges/ChallengesCards.js
@@ -1,41 +1,56 @@
-import React from 'react';
-import { View } from 'react-native';
-import { StyledView, RowView, TitleText, WorkoutNameText, DescriptionText, ProgressBarView } from './challengesCards.styles';
-import ProgressBar from '../card/ProgressBar';
-import SectionHeader from '../screen/SectionHeader';
+import React from 'react'
+import { View } from 'react-native'
+import {
+   StyledView,
+   RowView,
+   TitleText,
+   WorkoutNameText,
+   DescriptionText,
+   ProgressBarView,
+} from './challengesCards.styles'
+import ProgressBar from '../card/ProgressBar'
+import SectionHeader from '../screen/SectionHeader'
 
 const WorkoutCard = ({ title, workoutName, description }) => {
-  return (
-    <StyledView>
-      <RowView>
-        <TitleText>{title}</TitleText>
-        <WorkoutNameText>{workoutName}</WorkoutNameText>
-      </RowView>
-      <RowView>
-        <DescriptionText>{description}</DescriptionText>
-      </RowView>
-      <ProgressBarView>
-        <ProgressBar />
-      </ProgressBarView>
-    </StyledView>
-  );
-};
+   return (
+      <StyledView>
+         <RowView>
+            <TitleText>{title}</TitleText>
+            <WorkoutNameText>{workoutName}</WorkoutNameText>
+         </RowView>
+         <RowView>
+            <DescriptionText>{description}</DescriptionText>
+         </RowView>
+         <ProgressBarView>
+            <ProgressBar />
+         </ProgressBarView>
+      </StyledView>
+   )
+}
 
 const ChallengesCards = (props) => {
-  const title = props.title;
-  const workoutData = [
-    { title: '30 day Streak', workoutName: 'Workout 1', description: 'Description 1' },
-    { title: '60 day Streak', workoutName: 'Workout 2', description: 'Description 2' },
-  ];
+   const title = props.title
+   const workoutData = [
+      {
+         title: '30 day Streak',
+         workoutName: 'Workout 1',
+         description: 'Description 1',
+      },
+      {
+         title: '60 day Streak',
+         workoutName: 'Workout 2',
+         description: 'Description 2',
+      },
+   ]
 
-  return (
-    <View>
-      <SectionHeader title={title} />
-      {workoutData.map((workout, index) => (
-        <WorkoutCard key={index} {...workout} />
-      ))}
-    </View>
-  );
-};
+   return (
+      <View>
+         <SectionHeader title={title} />
+         {workoutData.map((workout, index) => (
+            <WorkoutCard key={index} {...workout} />
+         ))}
+      </View>
+   )
+}
 
-export default ChallengesCards;
+export default ChallengesCards
diff --git a/src/components/challenges/challengesCards.styles.js b/src/components/challenges/challengesCards.styles.js
index ceed858..1fd7974 100644
--- a/src/components/challenges/challengesCards.styles.js
+++ b/src/components/challenges/challengesCards.styles.js
@@ -1,48 +1,48 @@
-import styled from 'styled-components/native';
-import { Text, View } from 'react-native';
-import { theme } from '../../infrastructure/theme';
+import styled from 'styled-components/native'
+import { Text, View } from 'react-native'
+import { theme } from '../../infrastructure/theme'
 
 export const StyledView = styled(View)`
-  background-color: ${theme.colors.background.neutral[2]};
-  margin: 6px;
-  margin-left: 6px;
-  border-radius: 20px;
-  border-width: 1px;
-  border-color: ${theme.colors.borders.neutral};
-  padding: 10px;
-  padding-bottom: 10px;
-  padding-left: 20px;
-`;
+   background-color: ${theme.colors.background.neutral[2]};
+   margin: 6px;
+   margin-left: 6px;
+   border-radius: 20px;
+   border-width: 1px;
+   border-color: ${theme.colors.borders.neutral};
+   padding: 10px;
+   padding-bottom: 10px;
+   padding-left: 20px;
+`
 
 export const RowView = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+`
 
 export const TitleText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 16px;
-  font-weight: 600;
-  padding-bottom: 0;
-  margin-bottom: 0;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 16px;
+   font-weight: 600;
+   padding-bottom: 0;
+   margin-bottom: 0;
+`
 
 export const WorkoutNameText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 14px;
-  font-weight: 600;
-  padding-bottom: 0;
-  margin-bottom: 0;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 14px;
+   font-weight: 600;
+   padding-bottom: 0;
+   margin-bottom: 0;
+`
 
 export const DescriptionText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 14px;
-  font-weight: 600;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 14px;
+   font-weight: 600;
+`
 
 export const ProgressBarView = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+   align-items: center;
+`
diff --git a/src/components/currentWorkouts/WorkoutCard.styles.js b/src/components/currentWorkouts/WorkoutCard.styles.js
index 23bc5ce..c92b483 100644
--- a/src/components/currentWorkouts/WorkoutCard.styles.js
+++ b/src/components/currentWorkouts/WorkoutCard.styles.js
@@ -1,58 +1,58 @@
-import styled from 'styled-components/native';
-import { Text, View } from 'react-native';
-import { theme } from '../../infrastructure/theme';
-import { MaterialIcons } from '@expo/vector-icons';
+import styled from 'styled-components/native'
+import { Text, View } from 'react-native'
+import { theme } from '../../infrastructure/theme'
+import { MaterialIcons } from '@expo/vector-icons'
 
 export const StyledView = styled(View)`
-  background-color: ${theme.colors.background.neutral[2]};
-  margin: 10px;
-  margin-left: 6px;
-  border-width: 1px;
-  border-color: ${theme.colors.borders.neutral};
-  border-radius: 20px;
-  padding: 10px;
-  padding-left: 20px;
-  margin-bottom: 5px;
-`;
+   background-color: ${theme.colors.background.neutral[2]};
+   margin: 10px;
+   margin-left: 6px;
+   border-width: 1px;
+   border-color: ${theme.colors.borders.neutral};
+   border-radius: 20px;
+   padding: 10px;
+   padding-left: 20px;
+   margin-bottom: 5px;
+`
 
 export const TitleText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 16px;
-  font-weight: 600;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 16px;
+   font-weight: 600;
+`
 
 export const InfoContainer = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+   align-items: center;
+`
 
 export const DifficultyText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 14px;
-  font-weight: 600;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 14px;
+   font-weight: 600;
+`
 
 export const DurationContainer = styled(View)`
-  flex-direction: row;
-  justify-content: space-around;
-`;
+   flex-direction: row;
+   justify-content: space-around;
+`
 
 export const DurationText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  padding-right: 27px;
-  font-size: 14px;
-  font-weight: 600;
-`;
+   color: ${theme.colors.text.neutral};
+   padding-right: 27px;
+   font-size: 14px;
+   font-weight: 600;
+`
 
 export const ArrowIcon = styled(MaterialIcons)`
-  align-self: center;
-`;
+   align-self: center;
+`
 
 export const DaysText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 14px;
-  font-weight: 600;
-  padding-top: 10px;
-  padding-bottom: 10px;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 14px;
+   font-weight: 600;
+   padding-top: 10px;
+   padding-bottom: 10px;
+`
diff --git a/src/components/currentWorkouts/WorkoutList.js b/src/components/currentWorkouts/WorkoutList.js
index d19eafa..6dc215f 100644
--- a/src/components/currentWorkouts/WorkoutList.js
+++ b/src/components/currentWorkouts/WorkoutList.js
@@ -1,40 +1,63 @@
-import React from 'react';
-import { View } from 'react-native';
-import { StyledView, TitleText, InfoContainer, DifficultyText, DurationContainer, DurationText, ArrowIcon, DaysText } from './WorkoutCard.styles';
-import SectionHeader from '../screen/SectionHeader';
-import { theme } from '../../infrastructure/theme';
+import React from 'react'
+import { View } from 'react-native'
+import {
+   StyledView,
+   TitleText,
+   InfoContainer,
+   DifficultyText,
+   DurationContainer,
+   DurationText,
+   ArrowIcon,
+   DaysText,
+} from './WorkoutCard.styles'
+import SectionHeader from '../screen/SectionHeader'
+import { theme } from '../../infrastructure/theme'
 
 const WorkoutCard = ({ title, difficulty, duration, days }) => {
-  return (
-    <StyledView>
-      <TitleText>{title}</TitleText>
-      <InfoContainer>
-        <DifficultyText>{difficulty}</DifficultyText>
-        <DurationContainer>
-          <DurationText>{duration}</DurationText>
-          <ArrowIcon name="arrow-forward-ios" size={24} color={theme.colors.icon.orange} />
-        </DurationContainer>
-      </InfoContainer>
-      <DaysText>{days}</DaysText>
-    </StyledView>
-  );
-};
+   return (
+      <StyledView>
+         <TitleText>{title}</TitleText>
+         <InfoContainer>
+            <DifficultyText>{difficulty}</DifficultyText>
+            <DurationContainer>
+               <DurationText>{duration}</DurationText>
+               <ArrowIcon
+                  name="arrow-forward-ios"
+                  size={24}
+                  color={theme.colors.icon.orange}
+               />
+            </DurationContainer>
+         </InfoContainer>
+         <DaysText>{days}</DaysText>
+      </StyledView>
+   )
+}
 
 const WorkoutList = (props) => {
-  const title = props.title;
-  const workoutData = [
-    { title: 'The Ultimate upperbody', difficulty: 'begginer', duration: '15m 45sec', days: 'MON, WED, FRI' },
-    { title: 'The Ultimate upperbody', difficulty: 'expert', duration: '15m 45sec', days: 'MON, WED, THR' },
-  ];
+   const title = props.title
+   const workoutData = [
+      {
+         title: 'The Ultimate upperbody',
+         difficulty: 'begginer',
+         duration: '15m 45sec',
+         days: 'MON, WED, FRI',
+      },
+      {
+         title: 'The Ultimate upperbody',
+         difficulty: 'expert',
+         duration: '15m 45sec',
+         days: 'MON, WED, THR',
+      },
+   ]
 
-  return (
-    <View>
-      <SectionHeader title={title} />
-      {workoutData.map((workout, index) => (
-        <WorkoutCard key={index} {...workout} />
-      ))}
-    </View>
-  );
-};
+   return (
+      <View>
+         <SectionHeader title={title} />
+         {workoutData.map((workout, index) => (
+            <WorkoutCard key={index} {...workout} />
+         ))}
+      </View>
+   )
+}
 
-export default WorkoutList;
+export default WorkoutList
diff --git a/src/components/dashboard/Calandar.styles.js b/src/components/dashboard/Calandar.styles.js
index a5a2716..ff32e1f 100644
--- a/src/components/dashboard/Calandar.styles.js
+++ b/src/components/dashboard/Calandar.styles.js
@@ -1,52 +1,52 @@
-import styled from 'styled-components/native';
-import { Text, View } from 'react-native';
-import { Feather } from '@expo/vector-icons';
-import { theme } from '../../infrastructure/theme';
+import styled from 'styled-components/native'
+import { Text, View } from 'react-native'
+import { Feather } from '@expo/vector-icons'
+import { theme } from '../../infrastructure/theme'
 
 export const StyledView = styled(View)`
-  background-color: ${theme.colors.background.neutral[2]};
-`;
+   background-color: ${theme.colors.background.neutral[2]};
+`
 
 export const TodayContainer = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-  padding-top: 15px;
-  padding-right: 19px;
-  padding-bottom: 17px;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+   padding-top: 15px;
+   padding-right: 19px;
+   padding-bottom: 17px;
+`
 
 export const TodayText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  align-self: center;
-  font-size: 16px;
-  font-weight: 600;
-  padding-left: 11px;
-`;
+   color: ${theme.colors.text.neutral};
+   align-self: center;
+   font-size: 16px;
+   font-weight: 600;
+   padding-left: 11px;
+`
 
 export const CalendarIcon = styled(Feather)`
-  align-self: center;
-`;
+   align-self: center;
+`
 
 export const DaysOfWeekContainer = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-  padding-bottom: 20px;
-  padding-left: 4px;
-  padding-right: 4px;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+   padding-bottom: 20px;
+   padding-left: 4px;
+   padding-right: 4px;
+`
 
 export const CalendarDayContainer = styled(View)`
-  height: 80px;
-  border-width: 2px;
-  border-color: ${theme.colors.borders.neutral};
-  border-radius: 20px;
-  align-items: center;
-  justify-content: space-evenly;
-`;
+   height: 80px;
+   border-width: 2px;
+   border-color: ${theme.colors.borders.neutral};
+   border-radius: 20px;
+   align-items: center;
+   justify-content: space-evenly;
+`
 
 export const CalendarDayText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 16px;
-  font-weight: 600;
-  padding: 5px;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 16px;
+   font-weight: 600;
+   padding: 5px;
+`
diff --git a/src/components/dashboard/Calendar.js b/src/components/dashboard/Calendar.js
index 6049801..15f17e8 100644
--- a/src/components/dashboard/Calendar.js
+++ b/src/components/dashboard/Calendar.js
@@ -1,52 +1,68 @@
-import React from 'react';
-import { theme } from '../../infrastructure/theme';
-import { StyledView, TodayContainer, TodayText, CalendarIcon, DaysOfWeekContainer, CalendarDayContainer, CalendarDayText } from './Calandar.styles';
+import React from 'react'
+import { theme } from '../../infrastructure/theme'
+import {
+   StyledView,
+   TodayContainer,
+   TodayText,
+   CalendarIcon,
+   DaysOfWeekContainer,
+   CalendarDayContainer,
+   CalendarDayText,
+} from './Calandar.styles'
 
 const CalendarDay = ({ day, date, backgroundColor }) => {
-  return (
-    <CalendarDayContainer style={{ backgroundColor }}>
-      <CalendarDayText>{day}</CalendarDayText>
-      <CalendarDayText>{date}</CalendarDayText>
-    </CalendarDayContainer>
-  );
-};
+   return (
+      <CalendarDayContainer style={{ backgroundColor }}>
+         <CalendarDayText>{day}</CalendarDayText>
+         <CalendarDayText>{date}</CalendarDayText>
+      </CalendarDayContainer>
+   )
+}
 
 const Calendar = (props) => {
-  const daysOfWeek = ['SUN', 'MON', 'TUE', 'WED', 'THU', ' FRI ', 'SAT'];
+   const daysOfWeek = ['SUN', 'MON', 'TUE', 'WED', 'THU', ' FRI ', 'SAT']
 
-  const currentDate = new Date();
-  const currentDayIndex = currentDate.getDay();
+   const currentDate = new Date()
+   const currentDayIndex = currentDate.getDay()
 
-  const weekDates = Array.from({ length: 7 }, (_, i) => {
-    const day = new Date();
-    day.setDate(currentDate.getDate() - currentDayIndex + i);
-    return day.getDate();
-  });
+   const weekDates = Array.from({ length: 7 }, (_, i) => {
+      const day = new Date()
+      day.setDate(currentDate.getDate() - currentDayIndex + i)
+      return day.getDate()
+   })
 
-  const formattedDate = new Intl.DateTimeFormat('en-US', {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  }).format(currentDate);
+   const formattedDate = new Intl.DateTimeFormat('en-US', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+   }).format(currentDate)
 
-  return (
-    <StyledView>
-      <TodayContainer>
-        <TodayText>{`Today, ${formattedDate}`}</TodayText>
-        <CalendarIcon name="calendar" size={24} color={theme.colors.icon.tertiary} />
-      </TodayContainer>
-      <DaysOfWeekContainer>
-        {daysOfWeek.map((day, index) => (
-          <CalendarDay
-            key={index}
-            day={day}
-            date={weekDates[index]}
-            backgroundColor={index === currentDayIndex ? theme.colors.calendar.current.workout : theme.colors.calendar.noWorkout}
-          />
-        ))}
-      </DaysOfWeekContainer>
-    </StyledView>
-  );
-};
+   return (
+      <StyledView>
+         <TodayContainer>
+            <TodayText>{`Today, ${formattedDate}`}</TodayText>
+            <CalendarIcon
+               name="calendar"
+               size={24}
+               color={theme.colors.icon.tertiary}
+            />
+         </TodayContainer>
+         <DaysOfWeekContainer>
+            {daysOfWeek.map((day, index) => (
+               <CalendarDay
+                  key={index}
+                  day={day}
+                  date={weekDates[index]}
+                  backgroundColor={
+                     index === currentDayIndex
+                        ? theme.colors.calendar.current.workout
+                        : theme.colors.calendar.noWorkout
+                  }
+               />
+            ))}
+         </DaysOfWeekContainer>
+      </StyledView>
+   )
+}
 
-export default Calendar;
+export default Calendar
diff --git a/src/components/goals/GoalsCard.js b/src/components/goals/GoalsCard.js
index 31addd1..07174a5 100644
--- a/src/components/goals/GoalsCard.js
+++ b/src/components/goals/GoalsCard.js
@@ -1,29 +1,36 @@
-import React from 'react';
-import { StyledView, RowView, GoalText, WeightText, DescriptionText, ProgressBarView } from './GoalsCard.styles';
-import { View } from 'react-native';
-import ProgressBar from '../card/ProgressBar';
-import SectionHeader from '../screen/SectionHeader';
+import React from 'react'
+import {
+   StyledView,
+   RowView,
+   GoalText,
+   WeightText,
+   DescriptionText,
+   ProgressBarView,
+} from './GoalsCard.styles'
+import { View } from 'react-native'
+import ProgressBar from '../card/ProgressBar'
+import SectionHeader from '../screen/SectionHeader'
 
 const GoalsCard = (props) => {
-  const title = props.title;
+   const title = props.title
 
-  return (
-    <View>
-      <SectionHeader title={title} />
-      <StyledView>
-        <RowView>
-          <GoalText>Goal: Name</GoalText>
-          <WeightText>220 lbs</WeightText>
-        </RowView>
-        <RowView>
-          <DescriptionText>Description of 40 characters</DescriptionText>
-        </RowView>
-        <ProgressBarView>
-          <ProgressBar />
-        </ProgressBarView>
-      </StyledView>
-    </View>
-  );
-};
+   return (
+      <View>
+         <SectionHeader title={title} />
+         <StyledView>
+            <RowView>
+               <GoalText>Goal: Name</GoalText>
+               <WeightText>220 lbs</WeightText>
+            </RowView>
+            <RowView>
+               <DescriptionText>Description of 40 characters</DescriptionText>
+            </RowView>
+            <ProgressBarView>
+               <ProgressBar />
+            </ProgressBarView>
+         </StyledView>
+      </View>
+   )
+}
 
-export default GoalsCard;
+export default GoalsCard
diff --git a/src/components/goals/GoalsCard.styles.js b/src/components/goals/GoalsCard.styles.js
index 686f210..41a3ca6 100644
--- a/src/components/goals/GoalsCard.styles.js
+++ b/src/components/goals/GoalsCard.styles.js
@@ -1,48 +1,48 @@
-import styled from 'styled-components/native';
-import { Text, View } from 'react-native';
-import { theme } from '../../infrastructure/theme';
+import styled from 'styled-components/native'
+import { Text, View } from 'react-native'
+import { theme } from '../../infrastructure/theme'
 
 export const StyledView = styled(View)`
-  background-color: ${theme.colors.background.neutral[2]};
-  margin: 6px;
-  margin-left: 6px;
-  border-radius: 20px;
-  border-width: 1px;
-  border-color: ${theme.colors.borders.neutral};
-  padding: 10px;
-  padding-bottom: 10px;
-  padding-left: 20px;
-`;
+   background-color: ${theme.colors.background.neutral[2]};
+   margin: 6px;
+   margin-left: 6px;
+   border-radius: 20px;
+   border-width: 1px;
+   border-color: ${theme.colors.borders.neutral};
+   padding: 10px;
+   padding-bottom: 10px;
+   padding-left: 20px;
+`
 
 export const RowView = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+`
 
 export const GoalText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 16px;
-  font-weight: 600;
-  padding-bottom: 0;
-  margin-bottom: 0;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 16px;
+   font-weight: 600;
+   padding-bottom: 0;
+   margin-bottom: 0;
+`
 
 export const WeightText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 14px;
-  font-weight: 600;
-  padding-bottom: 0;
-  margin-bottom: 0;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 14px;
+   font-weight: 600;
+   padding-bottom: 0;
+   margin-bottom: 0;
+`
 
 export const DescriptionText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 14px;
-  font-weight: 600;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 14px;
+   font-weight: 600;
+`
 
 export const ProgressBarView = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+   align-items: center;
+`
diff --git a/src/components/screen/SectionHeader.js b/src/components/screen/SectionHeader.js
index 023c0f6..e07adbb 100644
--- a/src/components/screen/SectionHeader.js
+++ b/src/components/screen/SectionHeader.js
@@ -6,21 +6,27 @@ import { theme } from '../../infrastructure/theme'
 const SectionHeader = (props) => {
    return (
       <View
-      style={{
-         flexDirection: 'row',
-         justifyContent: 'space-between',
-         alignItems: 'center',
-         paddingTop: 20,
-         paddingLeft: 27,
-         paddingRight: 19,
-         paddingBottom: 20,
-      }}
-   >
-      <Text style={{ color: theme.colors.text.neutral, fontSize: 20, fontWeight: 600 }}>
-         {props.title}
-      </Text>
-      <Ionicons name="add" size={30} color= {theme.colors.icon.orange} />
-   </View>
+         style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingTop: 20,
+            paddingLeft: 27,
+            paddingRight: 19,
+            paddingBottom: 20,
+         }}
+      >
+         <Text
+            style={{
+               color: theme.colors.text.neutral,
+               fontSize: 20,
+               fontWeight: 600,
+            }}
+         >
+            {props.title}
+         </Text>
+         <Ionicons name="add" size={30} color={theme.colors.icon.orange} />
+      </View>
    )
 }
 
diff --git a/src/components/section/Header.js b/src/components/section/Header.js
index 5752355..5911547 100644
--- a/src/components/section/Header.js
+++ b/src/components/section/Header.js
@@ -4,32 +4,38 @@ import { theme } from '../../infrastructure/theme'
 
 const Header = (props) => {
    return (
-         <View
+      <View
+         style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingLeft: 17,
+            paddingTop: 5,
+            paddingBottom: 20,
+            paddingRight: 17,
+         }}
+      >
+         <Ionicons
+            style={{ color: theme.colors.icon.neutral, fontWeight: 600 }}
+            name="ios-arrow-back"
+            size={24}
+         />
+         <Text
             style={{
-               flexDirection: 'row',
-               justifyContent: 'space-between',
-               alignItems: 'center',
-               paddingLeft: 17,
-               paddingTop: 5,
-               paddingBottom: 20,
-               paddingRight: 17,
+               color: theme.colors.text.neutral,
+               fontSize: 24,
+               fontWeight: 600,
             }}
          >
-            <Ionicons
-               style={{ color: theme.colors.icon.neutral, fontWeight: 600 }}
-               name="ios-arrow-back"
-               size={24}
-            />
-            <Text style={{ color: theme.colors.text.neutral, fontSize: 24, fontWeight: 600 }}>
-               {props.title}
-            </Text>
-            <Ionicons
-               style={{ color: theme.colors.icon.neutral }}
-               name="settings-outline"
-               size={24}
-            />
-         </View>)
-
+            {props.title}
+         </Text>
+         <Ionicons
+            style={{ color: theme.colors.icon.neutral }}
+            name="settings-outline"
+            size={24}
+         />
+      </View>
+   )
 }
 
 export default Header
diff --git a/src/infrastructure/styledComponents/styledComonents.js b/src/infrastructure/styledComponents/styledComonents.js
index 20d6d17..136a9f8 100644
--- a/src/infrastructure/styledComponents/styledComonents.js
+++ b/src/infrastructure/styledComponents/styledComonents.js
@@ -1,8 +1,8 @@
 import { styled } from 'styled-components'
 import { theme } from '../theme'
 // import styled from 'styled-components/native';
-import { Text, View } from 'react-native';
-import { MaterialIcons } from '@expo/vector-icons';
+import { Text, View } from 'react-native'
+import { MaterialIcons } from '@expo/vector-icons'
 
 export const CenteredView = styled.View`
    flex: 1;
@@ -19,34 +19,34 @@ export const Body = styled.Text`
 `
 
 export const StyledView = styled(View)`
-  background-color: ${theme.colors.background.neutral[2]};
-  margin: 5px;
-  margin-left: 8px;
-  border-radius: 20px;
-  border-width: 1px;
-  border-color: ${theme.colors.borders.neutral};
-  padding: 10px;
-  padding-bottom: 10px;
-  padding-left: 20px;
-`;
+   background-color: ${theme.colors.background.neutral[2]};
+   margin: 5px;
+   margin-left: 8px;
+   border-radius: 20px;
+   border-width: 1px;
+   border-color: ${theme.colors.borders.neutral};
+   padding: 10px;
+   padding-bottom: 10px;
+   padding-left: 20px;
+`
 
 export const RowView = styled(View)`
-  flex-direction: row;
-  justify-content: space-between;
-`;
+   flex-direction: row;
+   justify-content: space-between;
+`
 export const SectionView = styled(View)`
-  margin-top: 6px;
-  margin-bottom: 6px;
-`;
+   margin-top: 6px;
+   margin-bottom: 6px;
+`
 
 export const TitleText = styled(Text)`
-  color: ${theme.colors.text.neutral};
-  font-size: 18px;
-  font-weight: 600;
-  padding-bottom: 0;
-  margin-bottom: 0;
-`;
+   color: ${theme.colors.text.neutral};
+   font-size: 18px;
+   font-weight: 600;
+   padding-bottom: 0;
+   margin-bottom: 0;
+`
 
 export const ArrowIcon = styled(MaterialIcons)`
-  align-self: center;
-`;
\ No newline at end of file
+   align-self: center;
+`
diff --git a/src/infrastructure/theme/colors.js b/src/infrastructure/theme/colors.js
index f38747b..a96eddc 100644
--- a/src/infrastructure/theme/colors.js
+++ b/src/infrastructure/theme/colors.js
@@ -1,25 +1,25 @@
 const tertiary = [
-// shade of lavender or light purple. It's a relatively pale and pastel shade of purple with a hint of blue. This color is often used in design for its soft and calming appearance. 
-"#B080FF",
+   // shade of lavender or light purple. It's a relatively pale and pastel shade of purple with a hint of blue. This color is often used in design for its soft and calming appearance.
+   '#B080FF',
 
-// The color "#FF6E00" is a vivid shade of orange. It is a warm and energetic color often associated with attributes such as enthusiasm, creativity, and warmth
-"#FF9346",
+   // The color "#FF6E00" is a vivid shade of orange. It is a warm and energetic color often associated with attributes such as enthusiasm, creativity, and warmth
+   '#FF9346',
 
-"#FF6E00"
+   '#FF6E00',
 ]
 const neutral = [
-   "#2E2E2E",
-//  "#2E2E2E": This is a very dark gray, almost black. It's a neutral color often used for text or background elements to create a high contrast, especially in web design.
-   "#3B3B3B", 
-// "#3B3B3B": Similar to the previous color, it's also a very dark gray, slightly lighter than the first one. It's another neutral color used for creating contrast and depth in design.
-   "#474747", 
-// "#474747": This color is a medium to dark gray, often used for background elements where a darker but not too heavy shade of gray is needed.
-   "#A5A5A5", 
-// "#A5A5A5": This is a mid-tone gray, a more neutral and balanced shade of gray. It's often used for various design elements and backgrounds where a neutral and non-distracting color is desired.
-   "EFEFEF"]
+   '#2E2E2E',
+   //  "#2E2E2E": This is a very dark gray, almost black. It's a neutral color often used for text or background elements to create a high contrast, especially in web design.
+   '#3B3B3B',
+   // "#3B3B3B": Similar to the previous color, it's also a very dark gray, slightly lighter than the first one. It's another neutral color used for creating contrast and depth in design.
+   '#474747',
+   // "#474747": This color is a medium to dark gray, often used for background elements where a darker but not too heavy shade of gray is needed.
+   '#A5A5A5',
+   // "#A5A5A5": This is a mid-tone gray, a more neutral and balanced shade of gray. It's often used for various design elements and backgrounds where a neutral and non-distracting color is desired.
+   'EFEFEF',
+]
 // "EFEFEF": This color is a very light gray, almost white. It's a soft and subtle shade, often used as a neutral background color in design, providing a clean and modern look.
 
-
 export const colors = {
    ui: {
       secondary: '#757575',
@@ -30,7 +30,7 @@ export const colors = {
    progress: {
       start: '#46D61A',
       middle: '#C7F3BA',
-      end: '#D9D9D900'
+      end: '#D9D9D900',
    },
    calendar: {
       current: {
@@ -39,7 +39,7 @@ export const colors = {
          noWorkout: neutral[3],
       },
       pastWorkout: tertiary[0],
-      noWorkout: "#2E2E2E",
+      noWorkout: '#2E2E2E',
    },
 
    icon: {
@@ -53,6 +53,6 @@ export const colors = {
       neutral: '#F7F7F7',
    },
    borders: {
-      neutral: '#A5A5A5'
-   }
+      neutral: '#A5A5A5',
+   },
 }
diff --git a/src/screens/account/account.screen.js b/src/screens/account/account.screen.js
index 689b712..d3f423c 100644
--- a/src/screens/account/account.screen.js
+++ b/src/screens/account/account.screen.js
@@ -11,10 +11,15 @@ import Header from '../../components/section/Header'
 const AccountScreen = () => {
    return (
       <SafeArea>
-         <View style={{ flex: 1, backgroundColor: theme.colors.background.neutral[0] }}>
-            <Header title="Account"/>
+         <View
+            style={{
+               flex: 1,
+               backgroundColor: theme.colors.background.neutral[0],
+            }}
+         >
+            <Header title="Account" />
             <ScrollView>
-            <List/>
+               <List />
             </ScrollView>
          </View>
       </SafeArea>
diff --git a/src/screens/dashboard/DashboardMain.js b/src/screens/dashboard/DashboardMain.js
index 69f9994..a133867 100644
--- a/src/screens/dashboard/DashboardMain.js
+++ b/src/screens/dashboard/DashboardMain.js
@@ -10,13 +10,18 @@ import SectionHeader from '../../components/screen/SectionHeader'
 
 const DashboardMain = () => {
    return (
-      <View style={{ flex: 1, backgroundColor: theme.colors.background.neutral[0] }}>
-         <Header title="Dashboard"/>
+      <View
+         style={{
+            flex: 1,
+            backgroundColor: theme.colors.background.neutral[0],
+         }}
+      >
+         <Header title="Dashboard" />
          <ScrollView>
-            <Calendar/>
-            <WorkoutList title="Current"/>
-            <GoalsCard title="Goals"/>
-            <ChallengesCards title="Challenges"/>
+            <Calendar />
+            <WorkoutList title="Current" />
+            <GoalsCard title="Goals" />
+            <ChallengesCards title="Challenges" />
          </ScrollView>
       </View>
    )