Info screen updates.

src/screens/InAppScreens/TravelsScreen/CountriesScreen/index.tsx

@@ -151,14 +151,14 @@ const CountriesScreen = () => {
     <PageWrapper>
       <Header
         label="Countries"
-        rightElement={
-          <TouchableOpacity
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.COUNTRIES_INFO as never)}
-            style={{ width: 30 }}
-          >
-            <InfoIcon />
-          </TouchableOpacity>
-        }
+        // rightElement={
+        //   <TouchableOpacity
+        //     onPress={() => navigation.navigate(NAVIGATION_PAGES.COUNTRIES_INFO as never)}
+        //     style={{ width: 30 }}
+        //   >
+        //     <InfoIcon />
+        //   </TouchableOpacity>
+        // }
       />
       <TouchableOpacity style={styles.megaSelector} onPress={() => setMegaSelectorVisible(true)}>
         <Text style={styles.megaButtonText}>{selectedMega.name}</Text>

src/screens/InAppScreens/TravelsScreen/DareScreen/index.tsx

@@ -118,14 +118,14 @@ const DareScreen = () => {
     <PageWrapper>
       <Header
         label="DARE"
-        rightElement={
-          <TouchableOpacity
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.DARE_INFO as never)}
-            style={{ width: 30 }}
-          >
-            <InfoIcon />
-          </TouchableOpacity>
-        }
+        // rightElement={
+        //   <TouchableOpacity
+        //     onPress={() => navigation.navigate(NAVIGATION_PAGES.DARE_INFO as never)}
+        //     style={{ width: 30 }}
+        //   >
+        //     <InfoIcon />
+        //   </TouchableOpacity>
+        // }
       />
       <TouchableOpacity style={styles.megaSelector} onPress={() => setMegaSelectorVisible(true)}>
         <Text style={styles.megaButtonText}>{selectedMega?.name}</Text>

src/screens/InAppScreens/TravelsScreen/EarthScreen/index.tsx

@@ -155,14 +155,14 @@ const EarthScreen = () => {
       <View style={styles.wrapper}>
         <Header
           label={'My Earth'}
-          rightElement={
-            <TouchableOpacity
-              onPress={() => navigation.navigate(NAVIGATION_PAGES.EARTH_INFO as never)}
-              style={{ width: 30 }}
-            >
-              <InfoIcon />
-            </TouchableOpacity>
-          }
+          // rightElement={
+          //   <TouchableOpacity
+          //     onPress={() => navigation.navigate(NAVIGATION_PAGES.EARTH_INFO as never)}
+          //     style={{ width: 30 }}
+          //   >
+          //     <InfoIcon />
+          //   </TouchableOpacity>
+          // }
         />
         {token && (
           <View style={styles.score}>

src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -197,14 +197,14 @@ const RegionsScreen = () => {
     <PageWrapper>
       <Header
         label="Regions"
-        rightElement={
-          <TouchableOpacity
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.REGIONS_INFO as never)}
-            style={{ width: 30 }}
-          >
-            <InfoIcon />
-          </TouchableOpacity>
-        }
+        // rightElement={
+        //   <TouchableOpacity
+        //     onPress={() => navigation.navigate(NAVIGATION_PAGES.REGIONS_INFO as never)}
+        //     style={{ width: 30 }}
+        //   >
+        //     <InfoIcon />
+        //   </TouchableOpacity>
+        // }
       />
       <TouchableOpacity style={styles.megaSelector} onPress={() => setMegaSelectorVisible(true)}>
         <Text style={styles.megaButtonText}>{selectedMega?.name}</Text>

src/screens/InAppScreens/TravelsScreen/TripsScreen/index.tsx

@@ -77,14 +77,14 @@ const TripsScreen = ({ route }: { route: any }) => {
     <PageWrapper>
       <Header
         label="Trips"
-        rightElement={
-          <TouchableOpacity
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.TRIPS_INFO as never)}
-            style={{ width: 30 }}
-          >
-            <InfoIcon />
-          </TouchableOpacity>
-        }
+        // rightElement={
+        //   <TouchableOpacity
+        //     onPress={() => navigation.navigate(NAVIGATION_PAGES.TRIPS_INFO as never)}
+        //     style={{ width: 30 }}
+        //   >
+        //     <InfoIcon />
+        //   </TouchableOpacity>
+        // }
       />
       <View style={styles.tabContainer}>
         <TouchableOpacity style={styles.regionSelector} onPress={() => setDatePickerVisible(true)}>

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -58,7 +58,7 @@ const TravelsScreen = () => {
         <View style={{ width: 30 }} />
         <Text style={styles.title}>Travels</Text>
         <TouchableOpacity
-          onPress={() => navigation.navigate(NAVIGATION_PAGES.DISCOVER_INFO as never)}
+          onPress={() => navigation.navigate(NAVIGATION_PAGES.PLAN_INFO as never)}
           style={{ width: 30 }}
         >
           <InfoIcon />

src/screens/InfoScreens/DiscoverInfoScreen/index.tsx

@@ -26,27 +26,22 @@ export const DiscoverInfoScreen: FC<Props> = ({ navigation }) => {
         >
           <View style={{ gap: 10 }}>
             <Text style={styles.title}>Use the map to explore</Text>
-            <View style={styles.infoBlock}>
-              <View style={styles.imgContainer}>
+            <View style={styles.row}>
                 <Image source={require('../../../../assets/images/map.jpeg')} style={styles.image} />
               </View>
-              <Text style={styles.text}>
+            <Text style={styles.text}>
                 Tap a region to see more details. Zoom the map to reveal our series.
               </Text>
-            </View>
           </View>
 
           <View style={{ gap: 10 }}>
-            <Text style={styles.title}>User Travels section</Text>
-            <View style={styles.infoBlock}>
-              <View style={[styles.imgContainer, { width: 80, height: 80 }]}>
-                <TravellersIcon fill={Colors.DARK_BLUE} />
-                <Text style={styles.imgText}>Travellers</Text>
-              </View>
-              <Text style={styles.text}>
-                Use our Travels section to explore information in a structured layout.
-              </Text>
-            </View>
+            <Text style={styles.title}>Use Travels section</Text>
+            <Text style={styles.text}>Use our Travels section to easily mark destinations as visited. This section provides structured lists of:</Text>
+            <Text style={styles.list}>• countries</Text>
+            <Text style={styles.list}>• NomadMania regions</Text>
+            <Text style={styles.list}>• DARE places</Text>
+            <Text style={styles.list}>• 70+ series</Text>
+            <Text style={styles.ending}>... and more.</Text>
           </View>
         </ScrollView>
       </ImageBackground>

src/screens/InfoScreens/DiscoverInfoScreen/styles.tsx

@@ -10,14 +10,19 @@ export const styles = StyleSheet.create({
     fontSize: 16,
     color: Colors.DARK_BLUE
   },
-  text: {
-    fontWeight: '600',
-    color: Colors.DARK_BLUE,
-    flex: 1
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom:0,
+    marginTop: 0
   },
+  text: { fontWeight: '400', color: Colors.BLACK, fontSize: 16, textAlign: 'justify' },
+  list: { fontWeight: '400', color: Colors.BLACK, fontSize: 16, marginLeft: 30, marginTop: -5 },
+  ending: { fontWeight: '400', color: Colors.BLACK, fontSize: 16, marginLeft: 30, marginTop: -5, textAlign: 'right' },
   imgContainer: {
-    width: 130,
-    height: 130,
+    width: '100%',
+    height: 'auto',
     borderRadius: 8,
     backgroundColor: Colors.WHITE,
     alignItems: 'center',
@@ -27,11 +32,12 @@ export const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.15,
     shadowRadius: 8,
-    elevation: 8
+    elevation: 8,
+    
   },
   image: {
-    width: 130,
-    height: 130,
+    width: 250,
+    height: 250,
     borderRadius: 8,
     borderWidth: 2,
     borderColor: Colors.WHITE

src/screens/InfoScreens/FirstStepsInfoScreen/index.tsx

@@ -4,6 +4,10 @@ import type { NavigationProp } from '@react-navigation/native';
 
 import { Header, PageWrapper } from '../../../components';
 import { styles } from './styles';
+import { Colors } from 'src/theme';
+import FlagsIcon from '../../../../assets/icons/travels-section/flags.svg';
+import RegionsIcon from '../../../../assets/icons/travels-section/regions.svg';
+import TripIcon from '../../../../assets/icons/travels-section/trip.svg';
 
 type Props = {
   navigation: NavigationProp<any>;
@@ -22,6 +26,43 @@ export const FirstStepsInfoScreen: FC<Props> = ({ navigation }) => {
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.contentContainerStyle}
         >
+          
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <FlagsIcon fill={Colors.ORANGE} />
+            </View>
+            <View style={styles.column}>
+            <Text style={styles.title}>Countries</Text>
+            <Text style={styles.subtitle}>... easiest way to start</Text>
+            </View>
+            
+          </View>
+          <Text style={styles.text}>Just mark the countries you've been to as visited. You can also idicate how long you stayed in each country.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <RegionsIcon fill={Colors.ORANGE} />
+            </View>
+            <View style={styles.column}>
+            <Text style={styles.title}>Regions</Text>
+            <Text style={styles.subtitle}>... create your travel map</Text>
+            </View>
+            
+          </View>
+          <Text style={styles.text}>Mark regions as visited; optionally set year of first and last visit to a region. The app will create your travel map with visited regions highlighted in orange.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <TripIcon fill={Colors.ORANGE} />
+            </View>
+            <View style={styles.column}>
+            <Text style={styles.title}>Trips</Text>
+            <Text style={styles.subtitle}>... your detailed travel log</Text>
+            </View>
+          </View>
+          <Text style={styles.text}>Add info about your every trip, with each trip having a start and end date, list of visited regions and your comment.</Text>
+          
+
         </ScrollView>
       </ImageBackground>
     </PageWrapper>

src/screens/InfoScreens/FirstStepsInfoScreen/styles.tsx

@@ -7,5 +7,37 @@ export const styles = StyleSheet.create({
   wrapper: {
     display: 'flex',
     height: '100%'
-  }
+  },
+  title: { paddingLeft: 10, fontWeight: '600', color: Colors.DARK_BLUE, fontSize: 18 },
+  subtitle: { paddingLeft: 10, fontWeight: '400', color: Colors.DARK_BLUE, fontSize: 16, fontStyle: 'italic' },
+  text: { paddingLeft: 10, fontWeight: '400', color: Colors.BLACK, marginBottom: 10, fontSize: 16, textAlign: 'justify' },
+  iconContainer: {
+    width: 50,
+    height: 50,
+    borderRadius: 8,
+    backgroundColor: Colors.WHITE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 3,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.15,
+    shadowRadius: 2,
+    elevation: 2,
+    margin: 15
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: -15,
+    marginTop: -10
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    marginBottom: -15,
+    marginTop: -10
+  },
 });

src/screens/InfoScreens/InfoScreen/index.tsx

@@ -24,20 +24,16 @@ export const InfoScreen: FC<Props> = ({ navigation }) => {
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.contentContainerStyle}
         >
-          <Text style={styles.title}>What is NomadMania...</Text>
+          <Text style={styles.title}>NomadMania</Text>
           <Text style={styles.text}>
-            Welcome to NomadMania, the ultimate hub for passionate travellers eager to explore the
-            world extensively and meaningfully, venturing beyond the ordinary and obvious. Our
-            vibrant community platform offers tools, information, and resources that empower your
-            extraordinary adventures.
+            The ultimate hub for passionate travellers.
           </Text>
 
           <View style={{ gap: 6 }}>
             <Text style={styles.subtitle}>Join our community</Text>
             <View style={styles.divider} />
             <Text style={styles.text}>
-              Check out our ranking and statistics, see where others are traveling meet with fellow
-              travelers on your trips or plan a joint expedition
+              Check out our ranking and statistics, see where others are traveling.
             </Text>
             <View style={styles.buttonsAndText}>
               <TouchableOpacity
@@ -52,7 +48,7 @@ export const InfoScreen: FC<Props> = ({ navigation }) => {
           <View style={{ gap: 6 }}>
             <Text style={styles.subtitle}>Discover the World</Text>
             <View style={styles.divider} />
-            <Text style={styles.text}>Find new travel destinations and points of interest</Text>
+            <Text style={styles.text}>Find new travel destinations and points of interest.</Text>
             <View style={styles.buttonsAndText}>
               <TouchableOpacity
                 style={styles.button}
@@ -67,7 +63,7 @@ export const InfoScreen: FC<Props> = ({ navigation }) => {
             <Text style={styles.subtitle}>Plan & track your travels</Text>
             <View style={styles.divider} />
             <Text style={styles.text}>
-              Tell us where you've been and where you're going and we will create your travel map
+              Tell us where you've been and we will create your travel map.
             </Text>
             <View style={styles.buttonsAndText}>
               <TouchableOpacity
@@ -83,7 +79,7 @@ export const InfoScreen: FC<Props> = ({ navigation }) => {
             <Text style={styles.subtitle}>First steps</Text>
             <View style={styles.divider} />
             <Text style={styles.text}>
-              Tell us where you've been and where you're going and we will create your travel map
+              It's easy to start using NomadMania.
             </Text>
             <View style={styles.buttonsAndText}>
               <TouchableOpacity

src/screens/InfoScreens/JoinInfoScreen/index.tsx

@@ -4,6 +4,15 @@ import type { NavigationProp } from '@react-navigation/native';
 
 import { Header, PageWrapper } from '../../../components';
 import { styles } from './styles';
+import { Colors } from 'src/theme';
+import UserGroupIcon from '../../../../assets/icons/user-group.svg';
+import CrownIcon from '../../../../assets/icons/crown.svg';
+import IDCardIcon from '../../../../assets/icons/id-card.svg';
+import StreetPeopleIcon from '../../../../assets/icons/street-view.svg';
+import ChartPieIcon from '../../../../assets/icons/chart-pie.svg';
+import MemoriamIcon from '../../../../assets/icons/monument.svg';
+import ScrollIcon from '../../../../assets/icons/scroll.svg';
+import TrophyIcon from '../../../../assets/icons/trophy.svg';
 
 type Props = {
   navigation: NavigationProp<any>;
@@ -12,7 +21,7 @@ type Props = {
 export const JoinInfoScreen: FC<Props> = ({ navigation }) => {
   return (
     <PageWrapper>
-      <Header label={'Join our community'} />
+      <Header label={'Our community'} />
       <ImageBackground
         style={styles.background}
         source={require('../../../../assets/images/nm-background.png')}
@@ -22,10 +31,72 @@ export const JoinInfoScreen: FC<Props> = ({ navigation }) => {
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.contentContainerStyle}
         >
-          <Text style={styles.text}>
-            Check out our ranking and statistics, see where others are traveling meet with fellow
-            travelers on your trips or plan a joint expedition
-          </Text>
+          
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <UserGroupIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Master ranking</Text>
+          </View>
+          <Text style={styles.text}>The list of our travellers who have at least 40 regions on our NM1301 Masterlist.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <CrownIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>UN masters</Text>
+          </View>
+          <Text style={styles.text}>These people have travelled to every United Nations Country, of which there are 193.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <IDCardIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>LPI ranking</Text>
+          </View>
+          <Text style={styles.text}>The Low Passport Index (LPI) ranking is conceived as a list of travellers who travel on passports which can be considered less 'privileged' in terms of freedom of entry to a number of places.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <StreetPeopleIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Series rankings</Text>
+          </View>
+          <Text style={styles.text}>Rankings for each of our series lists.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <ChartPieIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Statistics</Text>
+          </View>
+          <Text style={styles.text}>Our statistics based on our members' travels.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <MemoriamIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>In Memoriam ranking</Text>
+          </View>
+          <Text style={styles.text}>Ranking of deceased travellers.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <ScrollIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>In History ranking</Text>
+          </View>
+          <Text style={styles.text}>Ranking of famous historical figures.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+            <TrophyIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Triumphs</Text>
+          </View>
+          <Text style={styles.text}>Daily updates about our travellers' achievements</Text>
+          
+
         </ScrollView>
       </ImageBackground>
     </PageWrapper>

src/screens/InfoScreens/JoinInfoScreen/styles.tsx

@@ -8,5 +8,36 @@ export const styles = StyleSheet.create({
     display: 'flex',
     height: '100%'
   },
-  text: { fontWeight: '600', color: Colors.DARK_BLUE }
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: -15,
+    marginTop: -10
+  },
+  title: { paddingLeft: 10, fontWeight: '600', color: Colors.DARK_BLUE, fontSize: 18 },
+  text: { paddingLeft: 10, fontWeight: '400', color: Colors.BLACK, marginBottom: 10, fontSize: 16, textAlign: 'justify' },
+  iconContainer: {
+    width: 30,
+    height: 30,
+    borderRadius: 8,
+    backgroundColor: Colors.WHITE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 3,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.15,
+    shadowRadius: 2,
+    elevation: 2,
+    margin: 5
+  },
+  image: {
+    width: 130,
+    height: 130,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: Colors.WHITE
+  },
+  infoBlock: { flexDirection: 'row', gap: 8 },
 });

src/screens/InfoScreens/PlanInfoScreen/index.tsx

@@ -5,7 +5,21 @@ import type { NavigationProp } from '@react-navigation/native';
 import { Header, PageWrapper } from '../../../components';
 import { styles } from './styles';
 import { Colors } from 'src/theme';
-import FlagsSvg from 'assets/icons/travels-section/flags.svg';
+import UserGroupIcon from '../../../../assets/icons/user-group.svg';
+import CrownIcon from '../../../../assets/icons/crown.svg';
+import IDCardIcon from '../../../../assets/icons/id-card.svg';
+import StreetPeopleIcon from '../../../../assets/icons/street-view.svg';
+import ChartPieIcon from '../../../../assets/icons/chart-pie.svg';
+import MemoriamIcon from '../../../../assets/icons/monument.svg';
+import ScrollIcon from '../../../../assets/icons/scroll.svg';
+import TrophyIcon from '../../../../assets/icons/trophy.svg';
+import FlagsIcon from '../../../../assets/icons/travels-section/flags.svg';
+import RegionsIcon from '../../../../assets/icons/travels-section/regions.svg';
+import MapLocationIcon from '../../../../assets/icons/travels-section/map-location.svg';
+import SeriesIcon from '../../../../assets/icons/travels-section/series.svg';
+import EarthIcon from '../../../../assets/icons/travels-section/earth.svg';
+import TripIcon from '../../../../assets/icons/travels-section/trip.svg';
+import ImagesIcon from '../../../../assets/icons/travels-section/images.svg';
 
 type Props = {
   navigation: NavigationProp<any>;
@@ -24,28 +38,64 @@ export const PlanInfoScreen: FC<Props> = ({ navigation }) => {
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.contentContainerStyle}
         >
-          <Text style={[styles.text, { flex: 0 }]}>
-            Travels section is a structured way to record your visited countries / regions / points
-            of interest and to explore future destinations.
-          </Text>
-
-          <View>
-            <Text style={[styles.title, { marginBottom: 10 }]}>Countries</Text>
-            <View style={styles.infoBlock}>
-              <View style={styles.imgContainer}>
-                <FlagsSvg fill={Colors.ORANGE} />
-                <Text style={styles.imgText}>Countries</Text>
-              </View>
-              <Text style={styles.text}>
-                Countries give you the easiest way of recording your travels - just mark a country
-                as visited and it will be reflected in your UN score. You can also tell us how long
-                you stayed in a
-              </Text>
+          
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+              <FlagsIcon fill={Colors.ORANGE} />
             </View>
-            <Text style={[styles.text, { flex: 0 }]}>
-              country and this will influence your SLOW score. Read more about slow here
-            </Text>
+            <Text style={styles.title}>Countries</Text>
           </View>
+          <Text style={styles.text}>Mark the countries you've been to as visited. You can also idicate how long you stayed in each country. This will influence you UN score and your SLOW score.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+              <RegionsIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Regions</Text>
+          </View>
+          <Text style={styles.text}>Explore the list of NomadMania regions. You can indicate your first and last year of visit, the quality of your visit and how many times you've been to a region. This will influence your NM score as well as UN and UN+ scores.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+              <MapLocationIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>DARE</Text>
+          </View>
+          <Text style={styles.text}>Distinctive Alternative Remote Extremes is a novel list that can bring some new interest in the travel community and encourage travelers to go further. This will influence your DARE score.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+              <SeriesIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Series</Text>
+          </View>
+          <Text style={styles.text}>Explore 70+ series with various points of interest. Our must see items are in the Top of the tops series.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+              <EarthIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Earth</Text>
+          </View>
+          <Text style={styles.text}>A purely geographical measure of travel, Know Your Earth divides the world into 458 'pieces' based on 10 degree divisions of latitude and longitude.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+              <TripIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Trips</Text>
+          </View>
+          <Text style={styles.text}>Create your detailed travel log. Add info about your every trip, with each trip having a start and end date, list of visited regions and your comment.</Text>
+
+          <View style={styles.row}>
+            <View style={styles.iconContainer}>
+              <ImagesIcon fill={Colors.ORANGE} />
+            </View>
+            <Text style={styles.title}>Photos</Text>
+          </View>
+          <Text style={styles.text}>This is a place where you can upload your photos. Each photo can be assigned to a region or a DARE place.</Text>
+          
+
         </ScrollView>
       </ImageBackground>
     </PageWrapper>

src/screens/InfoScreens/PlanInfoScreen/styles.tsx

@@ -5,34 +5,36 @@ export const styles = StyleSheet.create({
   background: { height: '100%', flex: 1 },
   contentContainerStyle: { gap: 16, paddingBottom: 16 },
   wrapper: { height: '100%', display: 'flex' },
-  title: {
-    fontFamily: 'montserrat-700',
-    fontSize: 16,
-    color: Colors.DARK_BLUE
-  },
-  text: {
-    fontWeight: '600',
-    color: Colors.DARK_BLUE,
-    flex: 1
-  },
-  infoBlock: { flexDirection: 'row', gap: 8 },
-  imgContainer: {
-    width: 80,
-    height: 80,
+  title: { paddingLeft: 10, fontWeight: '600', color: Colors.DARK_BLUE, fontSize: 18 },
+  subtitle: { paddingLeft: 10, fontWeight: '400', color: Colors.DARK_BLUE, fontSize: 16, fontStyle: 'italic' },
+  text: { paddingLeft: 10, fontWeight: '400', color: Colors.BLACK, marginBottom: 10, fontSize: 16, textAlign: 'justify' },
+  iconContainer: {
+    width: 50,
+    height: 50,
     borderRadius: 8,
-    backgroundColor: Colors.FILL_LIGHT,
+    backgroundColor: Colors.WHITE,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 6,
+    gap: 3,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.15,
-    shadowRadius: 8,
-    elevation: 8
+    shadowRadius: 2,
+    elevation: 2,
+    margin: 15
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: -15,
+    marginTop: -10
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    marginBottom: -15,
+    marginTop: -10
   },
-  imgText: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: Colors.DARK_BLUE
-  }
 });

src/theme.ts

@@ -3,6 +3,7 @@ import Device from 'react-native-device-detection';
 import { StyleProp } from 'react-native';
 
 export enum Colors {
+  BLACK = '#000000',
   ORANGE = '#ED9334',
   DARK_BLUE = '#0F3F4F',
   WHITE = '#FFF',