diff --git a/.eslintrc.js b/.eslintrc.js
index ef87eb5..0b841ff 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = {
     root: true,
     parser: "@typescript-eslint/parser",
diff --git a/.gitignore b/.gitignore
index 51a965f..be93998 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,4 +18,5 @@ web-build/
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
\ No newline at end of file
+# @end expo-cli
+.idea/
\ No newline at end of file
diff --git a/app/(auth)/login.tsx b/app/(auth)/login.tsx
index 05134f2..62f2339 100644
--- a/app/(auth)/login.tsx
+++ b/app/(auth)/login.tsx
@@ -1,30 +1,37 @@
 import {View, SafeAreaView, TouchableOpacity, Text} from 'react-native';
-import React from "react";
+
+import React, { useState } from "react";
 import LoginSignupHeader from "@/components/LoginSignupHeader";
 import {CustomInput} from "@/components/elements/CustomInput";
 import CustomButton from "@/components/elements/CustomButton";
-import { router } from "expo-router"; // Make sure to import the router object
+import {router} from "expo-router";
 import {LoginSignupFooter} from "@/components/elements/LoginSignupFooter";
 
+
 export default function Login() {
+    const [login, setLogin] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+
     const handleSignupPress = () => {
-        router.push("/signup"); // Use the router object to navigate to the "/signup" route
+        router.push("/(tabs)/signup");
+    }
+    const handleFormSubmit = () => {
+        
     }
-
     return (
         <SafeAreaView className={"flex-1"}>
             <LoginSignupHeader/>
             <View className={"flex flex-col p-12 flex-1 justify-between"}>
                 <View>
-                    <CustomInput type={"email"} placeholder={"E-mail"}/>
-                    <CustomInput type={"password"} placeholder={"Hasło"}/>
+                    <CustomInput type={"email"} placeholder={"E-mail"} value={login} onChangeText={setLogin} />
+                    <CustomInput type={"password"} placeholder={"Hasło"} value={password} onChangeText={setPassword} />
                     <CustomButton title={"Zaloguj"} buttonType={"primary"}/>
                     <TouchableOpacity onPress={handleSignupPress} className="mt-4">
-                        <Text className="text-text text-center">Nie masz konta? Zarejestruj się!</Text>
-                    </TouchableOpacity>
-                </View>
+                        <Text className="hover:text-blue-500 hover:underline text-gray-200 text-center">Nie masz konta?
+                            Zarejestruj się!</Text>
+                    </TouchableOpacity></View>
                 <LoginSignupFooter/>
             </View>
         </SafeAreaView>
     );
-}
\ No newline at end of file
+}
diff --git a/app/(auth)/signup.tsx b/app/(auth)/signup.tsx
index 28e1036..5147e3e 100644
--- a/app/(auth)/signup.tsx
+++ b/app/(auth)/signup.tsx
@@ -1,27 +1,32 @@
 import {View, SafeAreaView, TouchableOpacity, Text} from 'react-native';
 
+import React, { useState } from "react";
 import LoginSignupHeader from "@/components/LoginSignupHeader";
 import {CustomInput} from "@/components/elements/CustomInput";
 import CustomButton from "@/components/elements/CustomButton";
-import {router} from "expo-router";
+import {router, useNavigation} from "expo-router";
 import {LoginSignupFooter} from "@/components/elements/LoginSignupFooter";
 
 
 export default function Signup() {
+    const [login, setLogin] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+    const [confirmPassword, setConfirmPassword] = useState<string>("");
     const handleSignupPress = () => {
-        router.push("/login")
+        router.push("/(tabs)/login");
     }
     return (
         <SafeAreaView className={"flex-1"}>
             <LoginSignupHeader/>
             <View className={"flex flex-col p-12 flex-1 justify-between"}>
                 <View>
-                    <CustomInput type={"email"} placeholder={"E-mail"}/>
-                    <CustomInput type={"password"} placeholder={"Hasło"}/>
-                    <CustomInput type={"password"} placeholder={"Powtórz hasło"}/>
+                    <CustomInput type={"email"} placeholder={"E-mail"} value={login} onChangeText={setLogin} />
+                    <CustomInput type={"password"} placeholder={"Hasło"} value={password} onChangeText={setPassword}/>
+                    <CustomInput type={"password"} placeholder={"Powtórz hasło"} value={confirmPassword} onChangeText={setConfirmPassword}/>
                     <CustomButton title={"Zarejestruj"} buttonType={"primary"}/>
                     <TouchableOpacity onPress={handleSignupPress} className="mt-4">
-                        <Text className="text-text text-center">Posiadasz konto? Zaloguj się!</Text>
+                        <Text className="hover:text-blue-500 hover:underline text-gray-200 text-center">Posiadasz konto?
+                            Zaloguj się!</Text>
                     </TouchableOpacity>
                 </View>
                 <LoginSignupFooter/>
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 712ac95..13a6398 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+/* eslint-disable @typescript-eslint/no-require-imports */
+import React, { useEffect, useState } from 'react';
 import { TextInput, ScrollView, Text, View, ImageBackground, Image } from 'react-native';
 import { collection, getDocs, orderBy, query, where } from "firebase/firestore"
 import { FIREBASE_DB } from '@/firebase.config';
@@ -7,6 +8,7 @@ import SectionText from '@/components/HomePage/SectionText';
 import ScrollCard from '@/components/HomePage/ScrollCard';
 import { Ionicons } from '@expo/vector-icons';
 import { router } from 'expo-router';
+import { ThemedView } from '@/components/ThemedView';
 
 const HomeScreen = () => {
   const [allTips, setAllTips] = useState<TipFields[]>([]);
@@ -88,7 +90,7 @@ const HomeScreen = () => {
   }
 
   return (
-    <View className="flex-1 bg-background">
+    <ThemedView className="flex-1 bg-background">
       <ScrollView bounces={true} showsVerticalScrollIndicator={false}>
         {/* Header Section */}
         <View style={{ overflow: 'hidden', borderBottomLeftRadius: 35, borderBottomRightRadius: 35 }}>
@@ -155,7 +157,7 @@ const HomeScreen = () => {
         </View>
 
       </ScrollView>
-    </View>
+    </ThemedView>
   );
 };
 
diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx
index 73f8b7f..66b4004 100644
--- a/app/(tabs)/settings.tsx
+++ b/app/(tabs)/settings.tsx
@@ -1,23 +1,42 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 import {SafeAreaView, Switch, Text, View, TouchableHighlight, Appearance, Image} from 'react-native';
 import React, {useEffect, useState} from "react";
 import {ThemedText} from '@/components/ThemedText';
 import {THEME_PREFERENCE_KEY} from "@/hooks/useColorScheme";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import CustomButton from '@/components/elements/CustomButton';
-import { router } from 'expo-router';
 
 export default function Settings() {
-    const [darkTheme, changeDarkToggle] = useState<boolean>(false);
-    const canChangeTheme = typeof (Appearance.setColorScheme) === "function";
+    const [darkTheme, setDarkTheme] = useState<boolean>(false);
+
+    const canChangeTheme = typeof Appearance.setColorScheme === "function";
+
+    useEffect(() => {
+        const fetchThemePreference = async () => {
+            try {
+                const storedTheme = await AsyncStorage.getItem(THEME_PREFERENCE_KEY);
+                if (storedTheme) {
+                    setDarkTheme(storedTheme === 'dark');
+                }
+            } catch (error) {
+                console.error("Failed to fetch theme preference:", error);
+            }
+        };
+
+        fetchThemePreference();
+    }, []);
+
     useEffect(() => {
-        if (canChangeTheme) Appearance.setColorScheme(darkTheme ? "dark" : "light");
+        if (canChangeTheme) {
+            Appearance.setColorScheme(darkTheme ? "dark" : "light");
+        }
         AsyncStorage.setItem(THEME_PREFERENCE_KEY, darkTheme ? "dark" : "light");
     }, [darkTheme]);
+
     return (
         <SafeAreaView className={"flex-1 p-12 mt-10"}>
             <View>
                 <Image  source={require('../../assets/images/logo-icon.png')} className={"w-full h-28 object-contain"} style={{ width: '100%', height: 112, resizeMode: 'contain' }}/>
-                <ThemedText type='title'>Ustawienia</ThemedText>
+                <ThemedText type='title' className='px-8'>Ustawienia</ThemedText>
                 <TouchableHighlight className={"mt-10 border-t border-primary border-b border-solid p-4"}>
                     <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
                         <Text className={`text-xl p-3 ${(darkTheme ? "text-white" : "text-text")}`}>Użyj ciemny motyw</Text>
@@ -34,7 +53,7 @@ export default function Settings() {
                             <Switch
                                 disabled={!canChangeTheme}
                                 value={darkTheme}
-                                onValueChange={changeDarkToggle}
+                                onValueChange={setDarkTheme}
                                 thumbColor={darkTheme ? "#ffffff" : "#f4f4f4"}
                                 trackColor={{
                                     false: "#d3d3d3",
@@ -47,8 +66,6 @@ export default function Settings() {
                             />
 
                         </View>
-                            <CustomButton title='login' buttonType='primary' handlePress={() => router.push('/login')}/>
-                            <CustomButton title='signup' buttonType='primary' handlePress={() => router.push('/signup')}/>
                     </View>
                 </TouchableHighlight>
             </View>
diff --git a/app/(tabs)/shop.tsx b/app/(tabs)/shop.tsx
index e751f92..eb7fd9b 100644
--- a/app/(tabs)/shop.tsx
+++ b/app/(tabs)/shop.tsx
@@ -1,10 +1,58 @@
-import { SafeAreaView, Text, View } from "react-native";
-
-function Shop() {
-    return <SafeAreaView>
-        <View>
-            <Text>Shop</Text>
-        </View>
-    </SafeAreaView>
+import {ImageBackground, ScrollView, Text, TextInput, View} from "react-native";
+import SectionText from "@/components/HomePage/SectionText";
+import ScrollCard from "@/components/HomePage/ScrollCard";
+import React, {useEffect, useState} from "react";
+import {collection, getDocs, query} from "firebase/firestore";
+import {FIREBASE_DB} from "@/firebase.config";
+import {shuffleArray} from "@/functions/shuffleArray";
+import {Ionicons} from "@expo/vector-icons";
+
+const Shop = () => {
+    const [shopItems, setShopItems] = useState<ShopItem[]>([]);
+    useEffect(() => {
+
+        const fetchItems = async () => {
+            const shopCollectionReference = collection(FIREBASE_DB, "shop");
+            const shopQuery = query(shopCollectionReference);
+            const querySnapshot = await getDocs(shopQuery);
+
+            const fetchedTips: ShopItem[] = querySnapshot.docs.map((doc) => ({
+                id: doc.id,
+                ...doc.data() as ShopItemData
+            }));
+
+            setShopItems(fetchedTips);
+        }
+        fetchItems();
+    }, []);
+    return <View className="mt-8">
+        <ScrollView bounces={true} showsVerticalScrollIndicator={false}>
+            <View style={{ overflow: 'hidden', borderBottomLeftRadius: 35, borderBottomRightRadius: 35 }}>
+                <ImageBackground
+                    source={require('@/assets/images/banner-image.png')}
+                    className="bg-[#63784f] pt-[85px] pb-14 px-8 flex gap-2"
+                    style={{ borderBottomLeftRadius: 35, borderBottomRightRadius: 35 }}
+                >
+                    <Text className="text-4xl tracking-widest font-bold text-secondary">
+                        Treebie
+                    </Text>
+                    <Text className="text-3xl tracking-widest font-bold text-secondary">
+                        Ucz się, działaj, zgarniaj
+                    </Text>
+
+                </ImageBackground>
+            </View>
+            <SectionText title='Sklep' containerStyles='px-8'/>
+
+            <ScrollView className="flex-row pl-8" horizontal showsHorizontalScrollIndicator={false} decelerationRate={0}
+                        snapToInterval={200} snapToAlignment={"start"} contentContainerClassName='pr-8'>
+                {shopItems.slice(0, 5).map((item) => {
+                    return <ScrollCard key={`all-${item.id}`} id={item.id} imageName='logo-icon-new.png'
+                                       title={item.name} containerStyle='mr-4' routeBase={"shop"} />
+                })}
+            </ScrollView>
+        </ScrollView>
+    </View>;
 }
+
 export default Shop;
\ No newline at end of file
diff --git a/app/(tabs)/tree.tsx b/app/(tabs)/tree.tsx
new file mode 100644
index 0000000..daeb9cb
--- /dev/null
+++ b/app/(tabs)/tree.tsx
@@ -0,0 +1,21 @@
+import { Feather } from '@expo/vector-icons'
+import React from 'react'
+import { SafeAreaView, Text, TouchableOpacity, View } from 'react-native'
+
+const tree = () => {
+    return (
+        <SafeAreaView>
+            <View className='flex flex-row justify-between px-8'>
+                <TouchableOpacity>
+                    <Feather name="shopping-bag" size={24} color="black" />
+                </TouchableOpacity>
+                
+                <TouchableOpacity>
+                    <Feather name="camera" size={24} color="black" />
+                </TouchableOpacity>
+            </View>
+        </SafeAreaView>
+    )
+}
+
+export default tree
\ No newline at end of file
diff --git a/app/(tabs)/welcome.tsx b/app/(tabs)/welcome.tsx
new file mode 100644
index 0000000..292f8ac
--- /dev/null
+++ b/app/(tabs)/welcome.tsx
@@ -0,0 +1,18 @@
+import {ThemedText} from "@/components/ThemedText";
+import {SafeAreaView} from "react-native-safe-area-context";
+import React from "react";
+import {ImageBackground} from "react-native";
+
+export default function Welcome(props: {}) {
+    return <SafeAreaView
+        className={""}>
+        <ImageBackground
+            source={require('@/assets/images/banner-image.png')}
+            className="bg-[#63784f] pt-[85px] pb-14 px-8 flex gap-2 items-center justify-center h-full bg-center bg-contain bg-repeat"
+            style={{borderBottomLeftRadius: 35, borderBottomRightRadius: 35}}
+        >
+            <ThemedText type={"title"} style={{ fontSize: 80, lineHeight: 85, fontWeight: 'bold' }}>Save</ThemedText>
+            <ThemedText type={"title"} style={{ fontSize: 80, lineHeight: 85, fontWeight: 'bold' }}>The</ThemedText>
+            <ThemedText type={"title"} style={{ fontSize: 80, lineHeight: 85, fontWeight: 'bold' }}>Planet</ThemedText></ImageBackground>
+    </SafeAreaView>;
+}
\ No newline at end of file
diff --git a/app/+not-found.tsx b/app/+not-found.tsx
index 963b04f..4103e59 100644
--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
+import React from 'react';
 
 export default function NotFoundScreen() {
   return (
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 8672935..8ad55c9 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -42,6 +42,7 @@ export default function RootLayout() {
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="tip/[id]/index" options={{ headerShown: false }} />
+        <Stack.Screen name="shop/[id]/index" options={{ headerShown: false }} />
         <Stack.Screen name="(auth)/login" options={{ headerShown: false }} />
         <Stack.Screen name="(auth)/signup" options={{ headerShown: false }} />
         <Stack.Screen name="ai/index" options={{ headerShown: false }} />
diff --git a/app/ai/index.tsx b/app/ai/index.tsx
index 7ed8c6b..cad359c 100644
--- a/app/ai/index.tsx
+++ b/app/ai/index.tsx
@@ -1,9 +1,11 @@
 import Message from '@/components/Ai/Message';
 import SkeletonMessage from '@/components/Ai/SkeletonMessage';
+import { ThemedText } from '@/components/ThemedText';
+import { useThemeColor } from '@/hooks/useThemeColor';
 import { Feather, Ionicons } from '@expo/vector-icons';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useEffect, useState } from 'react';
-import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, TextInput, TouchableOpacity, View } from 'react-native';
 
 const Index = () => {
     const userMessageParam = (useLocalSearchParams().text as string) || null;
@@ -78,8 +80,9 @@ const Index = () => {
         }
     }, [userMessageParam]);
 
+    const backgroundColor = useThemeColor({ light: "", dark: ""}, 'background');
     return (
-        <SafeAreaView className="flex-1 bg-background">
+        <SafeAreaView className="flex-1" style={[{ backgroundColor }]}>
             {/* Header */}
             <View className="flex-row items-center px-8 mt-2">
                 <TouchableOpacity
@@ -88,9 +91,9 @@ const Index = () => {
                 >
                     <Ionicons name="chevron-back-outline" size={18} color="white" />
                 </TouchableOpacity>
-                <Text className="text-4xl font-semibold text-gray-800">
+                <ThemedText className="text-4xl font-semibold text-gray-800">
                     Eco Chat
-                </Text>
+                </ThemedText>
             </View>
 
             {/* Scrollable Content */}
@@ -106,8 +109,8 @@ const Index = () => {
                 keyboardVerticalOffset={Platform.OS === 'ios' ? -20 : 0}
                 style={{ position: 'absolute', bottom: 0, width: '100%' }}
             >
-                <View className="pt-2 pb-6  border-t border-[#e0e0e0] bg-white">
-                    <View className="flex-row items-center bg-white rounded-lg p-4">
+                <View className="pt-2 pb-6  border-t border-[#e0e0e0]" style={[{ backgroundColor }]}>
+                    <View className="flex-row items-center rounded-lg p-4" style={[{ backgroundColor }]}>
                         <TextInput
                             className="flex-1 mx-2 text-gray-700"
                             placeholder="Zadaj pytanie ECO asystentowi"
@@ -117,7 +120,7 @@ const Index = () => {
                             onChangeText={text => setInputValue(text)}
                             editable={!isFetching}
                         />
-                        <Feather name="send" size={24} color="black" className="mr-2" onPress={() => handleSend()} />
+                        <Feather name="send" size={24} color="#202f11" className="mr-2" onPress={() => handleSend()} />
                     </View>
                 </View>
             </KeyboardAvoidingView>
diff --git a/app/all/index.tsx b/app/all/index.tsx
index 2f2aab0..3bd0b05 100644
--- a/app/all/index.tsx
+++ b/app/all/index.tsx
@@ -1,11 +1,13 @@
 import ScrollCard from '@/components/HomePage/ScrollCard';
+import { ThemedText } from '@/components/ThemedText';
 import { FIREBASE_DB } from '@/firebase.config';
 import { shuffleArray } from '@/functions/shuffleArray';
+import { useThemeColor } from '@/hooks/useThemeColor';
 import { Ionicons } from '@expo/vector-icons';
 import { router, useLocalSearchParams } from 'expo-router';
 import { collection, getDocs, orderBy, query, where } from 'firebase/firestore';
 import React, { useEffect, useState } from 'react';
-import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
 
 const Index = () => {
     const { allType } = useLocalSearchParams();
@@ -75,8 +77,10 @@ const Index = () => {
             ));
     }
 
+    const backgroundColor = useThemeColor({ light: "", dark: ""}, 'background');
+
     return (
-        <SafeAreaView className="flex-1 bg-background">
+        <SafeAreaView className="flex-1" style={[{ backgroundColor }]}>
             <View className="flex-row items-center px-8 mt-2">
                 <TouchableOpacity
                     className="p-3 rounded-lg bg-[#798156] mr-3"
@@ -84,9 +88,9 @@ const Index = () => {
                 >
                     <Ionicons name="chevron-back-outline" size={18} color="white" />
                 </TouchableOpacity>
-                <Text className="text-4xl font-semibold text-gray-800">
+                <ThemedText className="text-4xl font-semibold">
                     {allType === "liked" ? "Polubione" : "Wszystkie"}
-                </Text>
+                </ThemedText>
             </View>
             <ScrollView className="mt-8 px-8">
                 {displayTips()}
diff --git a/app/shop/[id]/index.tsx b/app/shop/[id]/index.tsx
new file mode 100644
index 0000000..a966f44
--- /dev/null
+++ b/app/shop/[id]/index.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { Image, ImageBackground, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import CustomButton from "@/components/elements/CustomButton";
+import { Ionicons } from "@expo/vector-icons";
+import { Href, router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { addDoc, collection, deleteDoc, doc, getDoc, getDocs, query, where } from "firebase/firestore";
+import { FIREBASE_DB } from "@/firebase.config";
+import TipListElement from "@/components/TipsPage/TipListElement";
+import React from "react";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+
+type TipFields = {
+    title: string;
+    description: string;
+    list: string[];
+};
+
+const Index = () => {
+    const local = useLocalSearchParams();
+    let redirect = "/shop"
+    if (local.redirect) {
+        redirect = local.redirect === "liked" ? "/shop?allType=liked" : "/shop?allType=all";
+    }
+    const [liked, setLiked] = useState(false);
+    const [item, setItem] = useState<ShopItem | undefined>(undefined);
+    const USERID = "1";
+
+    useEffect(() => {
+        const getData = async (id: string) => {
+            try {
+                const docRef = doc(FIREBASE_DB, "shop", id);
+                const res = await getDoc(docRef);
+                if (res.exists()) {
+                    setItem(res.data() as ShopItem);
+                } else {
+                    console.warn("No such document!");
+                }
+            } catch (error) {
+                console.error("Error fetching document: ", error);
+                router.replace("/(tabs)/");
+            }
+        };
+
+        
+        if (local.id) {
+            getData(local.id.toString());
+        }
+    }, [local.id]);
+
+    return (
+        <ThemedView className="flex-1">
+            <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
+                <View style={{ overflow: "hidden", borderBottomLeftRadius: 35, borderBottomRightRadius: 35 }}>
+                    <ImageBackground
+                        source={require("@/assets/images/banner-image.png")}
+                        className="bg-[#63784f] pt-[60px] pb-14 px-8 flex gap-2"
+                        style={{ borderBottomLeftRadius: 35, borderBottomRightRadius: 35 }}
+                    >
+                        <View className="flex-row justify-between">
+                            <TouchableOpacity
+                                className="p-4 rounded-2xl bg-[#798156]"
+                                onPress={() => router.replace(redirect as Href)}
+                            >
+                                <Ionicons name="chevron-back-outline" size={18} color="white" />
+                            </TouchableOpacity>
+                        </View>
+
+                        <Image source={require("@/assets/images/logo-icon-new.png")} className="w-full h-64" />
+                    </ImageBackground>
+                </View>
+
+                <View className="mt-8 px-8">
+                    <ThemedText className="text-3xl tracking-widest font-bold">
+                        {item?.name}
+                    </ThemedText>
+                </View>
+            </ScrollView>
+        </ThemedView>
+    );
+};
+
+export default Index;
diff --git a/app/shop/index.tsx b/app/shop/index.tsx
new file mode 100644
index 0000000..d6f6831
--- /dev/null
+++ b/app/shop/index.tsx
@@ -0,0 +1,64 @@
+import {SafeAreaView, ScrollView, Text, TouchableOpacity, View} from "react-native";
+import {router, useLocalSearchParams} from "expo-router";
+import {collection, getDocs, query} from "firebase/firestore";
+import {FIREBASE_DB} from "@/firebase.config";
+import {shuffleArray} from "@/functions/shuffleArray";
+import React, {useEffect, useState} from "react";
+import {Ionicons} from "@expo/vector-icons";
+import {ThemedText} from "@/components/ThemedText";
+import ScrollCard from "@/components/HomePage/ScrollCard";
+
+function Index() {
+    const [shopItems, setShopItems] = useState<ShopItem[]>([]);
+    const [displayShopItems, setDisplayShopItems] = useState<ShopItem[]>([]);
+    useEffect(() => {
+
+        const fetchItems = async () => {
+            const shopCollectionReference = collection(FIREBASE_DB, "shop");
+            const shopQuery = query(shopCollectionReference);
+            const querySnapshot = await getDocs(shopQuery);
+
+            const fetchedTips: ShopItem[] = querySnapshot.docs.map((doc) => ({
+                id: doc.id,
+                ...doc.data() as ShopItemData
+            }));
+
+            setShopItems(fetchedTips);
+            setDisplayShopItems(shuffleArray([...fetchedTips]).slice(0, 20));
+        }
+        fetchItems();
+    }, []);
+
+    function displayItems(): JSX.Element[] {
+        return displayShopItems
+            .reduce<ShopItem[][]>((rows, card, index) => {
+                if (index % 2 === 0) rows.push([]);
+                rows[rows.length - 1].push(card);
+                return rows;
+            }, [])
+            .map((row, rowIndex) => (
+                <View key={rowIndex} className="flex-row justify-between mt-7">
+                    {row.map((card) => (
+                        <ScrollCard key={card.id} id={card.id}
+                                    imageName={card.image} title={card.name}/>
+                    ))}
+                </View>
+            ));
+    }
+
+    return <SafeAreaView className="flex-1">
+        <View className="flex-row items-center px-8 mt-2">
+            <TouchableOpacity
+                className="p-3 rounded-lg bg-[#798156] mr-3"
+                onPress={() => router.replace("/shop")}
+            >
+                <Ionicons name="chevron-back-outline" size={18} color="white"/>
+            </TouchableOpacity>
+        </View>
+        <ScrollView className="mt-8 px-8">
+            {displayItems()}
+        </ScrollView>
+    </SafeAreaView>
+}
+
+export default Index;
\ No newline at end of file
diff --git a/app/tip/[id]/index.tsx b/app/tip/[id]/index.tsx
index ee0af78..694f23f 100644
--- a/app/tip/[id]/index.tsx
+++ b/app/tip/[id]/index.tsx
@@ -1,13 +1,15 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 import { Image, ImageBackground, ScrollView, Text, TouchableOpacity, View } from "react-native";
 import CustomButton from "@/components/elements/CustomButton";
 import { Ionicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
-
-
+import { Href, router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { addDoc, collection, deleteDoc, doc, getDoc, getDocs, query, where } from "firebase/firestore";
 import { FIREBASE_DB } from "@/firebase.config";
 import TipListElement from "@/components/TipsPage/TipListElement";
+import React from "react";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
 
 type TipFields = {
     title: string;
@@ -91,7 +93,7 @@ const Index = () => {
     };
 
     return (
-        <View className="flex-1 bg-background">
+        <ThemedView className="flex-1">
             <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
                 <View style={{ overflow: "hidden", borderBottomLeftRadius: 35, borderBottomRightRadius: 35 }}>
                     <ImageBackground
@@ -102,8 +104,7 @@ const Index = () => {
                         <View className="flex-row justify-between">
                             <TouchableOpacity
                                 className="p-4 rounded-2xl bg-[#798156]"
-                                //@ts-ignore
-                                onPress={() => router.replace(redirect)}
+                                onPress={() => router.replace(redirect as Href)}
                             >
                                 <Ionicons name="chevron-back-outline" size={18} color="white" />
                             </TouchableOpacity>
@@ -118,16 +119,16 @@ const Index = () => {
                 </View>
 
                 <View className="mt-8 px-8">
-                    <Text className="text-3xl tracking-widest font-bold text-text">
+                    <ThemedText className="text-3xl tracking-widest font-bold">
                         {tip?.title}
-                    </Text>
-                    <Text className="mt-2 font-light text-text opacity-80 leading-relaxed">
+                    </ThemedText>
+                    <ThemedText className="mt-2 font-light opacity-80 leading-relaxed">
                         {tip?.description}
-                    </Text>
+                    </ThemedText>
 
                     {tip?.list && (
                         <View>
-                            <Text className="text-xl mt-8 tracking-widest font-bold text-text">Some Tips</Text>
+                            <ThemedText className="text-xl mt-8 tracking-widest font-bold">Some Tips</ThemedText>
                             <View className="mt-4 gap-4 mb-16">
                                 {tip.list.map((dot, index) => (
                                     <TipListElement key={index} text={dot} image="" />
@@ -144,7 +145,7 @@ const Index = () => {
                 buttonType="primary"
                 textStyles="font-bold text-3xl"
             />
-        </View>
+        </ThemedView>
     );
 };
 
diff --git a/components/Ai/JumpingBubbles.tsx b/components/Ai/JumpingBubbles.tsx
index 2417692..df50940 100644
--- a/components/Ai/JumpingBubbles.tsx
+++ b/components/Ai/JumpingBubbles.tsx
@@ -9,17 +9,16 @@ const JumpingBubbles = () => {
 
     useEffect(() => {
         // Define the jumping animation
-        //@ts-ignore
-        const animateBubble = (bubble) => {
+        const animateBubble = (bubble: Animated.Value) => {
             return Animated.sequence([
                 Animated.timing(bubble, {
-                    toValue: 1.5, // Scale up
+                    toValue: 1.5,
                     duration: 300,
                     easing: Easing.ease,
                     useNativeDriver: true,
                 }),
                 Animated.timing(bubble, {
-                    toValue: 1, // Scale back down
+                    toValue: 1,
                     duration: 300,
                     easing: Easing.ease,
                     useNativeDriver: true,
@@ -27,7 +26,6 @@ const JumpingBubbles = () => {
             ]);
         };
 
-        // Start looping animation with delays for each bubble
         Animated.loop(
             Animated.stagger(150, [
                 animateBubble(bubble1),
diff --git a/components/HomePage/ScrollCard.tsx b/components/HomePage/ScrollCard.tsx
index 7a6d4b8..94f4999 100644
--- a/components/HomePage/ScrollCard.tsx
+++ b/components/HomePage/ScrollCard.tsx
@@ -1,23 +1,27 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import React from "react";
 import { Image, Text, View, TouchableOpacity } from "react-native";
-import { router } from "expo-router";
+import { Href, router } from "expo-router";
 
 interface ScrollCardProps {
     id: string;
     title: string;
     imageName: string;
     containerStyle?: string;
-    redirect?: string
+    redirect?: string;
+    routeBase?: string;
 }
 
-const ScrollCard = ({ id, title, imageName, containerStyle, redirect }: ScrollCardProps) => {
+const ScrollCard = ({ id, title, imageName, containerStyle, redirect, routeBase }: ScrollCardProps) => {
+    routeBase ??= "tip";
     const handlePress = () => {
-        //@ts-ignore
-        redirect ? router.push(`/tip/${id}?redirect=${redirect}`) : router.push(`/tip/${id}`)
+        const route: Href = redirect 
+        ? (`/${routeBase}/${id}?redirect=${redirect}` as Href) 
+        : (`/${routeBase}/${id}` as Href);
+    router.push(route);
     }
     return (
-        //@ts-ignore
         <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
-            {/* <View className="bg-[#f2f3ef] w-44 h-52 rounded-3xl justify-center items-center mr-4"> */}
             <View className={`bg-[#f2f3ef] w-44 h-52 rounded-3xl justify-center items-center ${containerStyle}`}>
                 <Image source={require(`@/assets/images/logo-icon-new.png`)} className="w-12 h-12" />
                 <Text className="mt-2 text-text font-medium text-left">{title}</Text>
diff --git a/components/HomePage/SectionText.tsx b/components/HomePage/SectionText.tsx
index a4e4d8e..94261e5 100644
--- a/components/HomePage/SectionText.tsx
+++ b/components/HomePage/SectionText.tsx
@@ -1,5 +1,7 @@
-import { router } from 'expo-router'
-import { Text, TouchableOpacity, View } from 'react-native'
+import { router, Href } from 'expo-router';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { ThemedText } from '../ThemedText';
+import React from 'react';
 
 interface SectionTextProps {
     title: string;
@@ -10,15 +12,14 @@ interface SectionTextProps {
 const SectionText = ({ title, route, containerStyles }: SectionTextProps) => {
     return (
         <View className={`flex-row justify-between items-center mb-4 ${containerStyles}`}>
-            <Text className="text-3xl font-medium text-gray-800">{title}</Text>
+            <ThemedText className="text-3xl font-medium">{title}</ThemedText>
             {route && (
-                //@ts-ignore
-                <TouchableOpacity onPress={() => router.push(route)}>
+                <TouchableOpacity onPress={() => router.push(route as Href)}>
                     <Text className='text-[#63784f]'>Zobacz więcej</Text>
                 </TouchableOpacity>
             )}
         </View>
-    )
-}
+    );
+};
 
-export default SectionText
\ No newline at end of file
+export default SectionText;
diff --git a/components/ThemedText.tsx b/components/ThemedText.tsx
index c0e1a78..5966b1a 100644
--- a/components/ThemedText.tsx
+++ b/components/ThemedText.tsx
@@ -1,4 +1,5 @@
 import { Text, type TextProps, StyleSheet } from 'react-native';
+import React from 'react';
 
 import { useThemeColor } from '@/hooks/useThemeColor';
 
@@ -21,7 +22,7 @@ export function ThemedText({
     <Text
       style={[
         { color },
-        type === 'default' ? styles.default : undefined,
+        type === 'default' && undefined,
         type === 'title' ? styles.title : undefined,
         type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
         type === 'subtitle' ? styles.subtitle : undefined,
@@ -34,10 +35,6 @@ export function ThemedText({
 }
 
 const styles = StyleSheet.create({
-  default: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
   defaultSemiBold: {
     fontSize: 16,
     lineHeight: 24,
diff --git a/components/ThemedView.tsx b/components/ThemedView.tsx
index 4d2cb09..d0526da 100644
--- a/components/ThemedView.tsx
+++ b/components/ThemedView.tsx
@@ -1,5 +1,5 @@
 import { View, type ViewProps } from 'react-native';
-
+import React from 'react';
 import { useThemeColor } from '@/hooks/useThemeColor';
 
 export type ThemedViewProps = ViewProps & {
diff --git a/components/TipsPage/TipListElement.tsx b/components/TipsPage/TipListElement.tsx
index c7f6e11..7973fba 100644
--- a/components/TipsPage/TipListElement.tsx
+++ b/components/TipsPage/TipListElement.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Image, Text, View } from 'react-native'
+import { ThemedText } from '../ThemedText';
 
 interface TipListElement {
     image: string;
@@ -13,9 +14,9 @@ const TipListElement = ({ image, text} : TipListElement) => {
             <View className="bg-[#f2f3ef] p-2 rounded-lg">
                 <Image source={require(`@/assets/images/logo-icon-new.png`)} className="w-6 h-6" />
             </View>
-            <Text className="font-light text-text opacity-80 leading-relaxed text-lg">
+            <ThemedText className="font-light opacity-80 leading-relaxed text-lg">
                 {text}
-            </Text>
+            </ThemedText>
         </View>
     )
 }
diff --git a/components/elements/CustomInput.tsx b/components/elements/CustomInput.tsx
index 9809917..fec5a43 100644
--- a/components/elements/CustomInput.tsx
+++ b/components/elements/CustomInput.tsx
@@ -1,4 +1,4 @@
-import {StyleSheet, View, TextInput} from "react-native";
+import { StyleSheet, View, TextInput, NativeSyntheticEvent, TextInputChangeEventData } from "react-native";
 import React from "react";
 
 type InputType = "text" | "password" | "email";
@@ -6,9 +6,11 @@ type InputType = "text" | "password" | "email";
 type CustomInputOptions = {
     type?: InputType,
     placeholder?: string,
+    value?: string,
+    onChangeText?: ((text: string) => void) | undefined
 };
 
-export function CustomInput({type, placeholder, ...rest}: Readonly<CustomInputOptions>) {
+export function CustomInput({ type, placeholder, value, onChangeText, ...rest }: Readonly<CustomInputOptions>) {
     if (type === undefined) type = "text";
     return (<View style={styles.container} {...rest}>
         <TextInput
@@ -17,6 +19,8 @@ export function CustomInput({type, placeholder, ...rest}: Readonly<CustomInputOp
             keyboardType={type === "email" ? "email-address" : "default"}
             placeholder={placeholder === undefined ? type.charAt(0).toUpperCase() + type.slice(1) : placeholder}
             autoCapitalize="none"
+            value={value}
+            onChangeText={onChangeText}
         />
     </View>);
 }
diff --git a/constants/Colors.ts b/constants/Colors.ts
index dfb581d..47e749e 100644
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -9,7 +9,7 @@ const tintColorDark = '#b7c892';
 export const Colors = {
   light: {
     text: '#202f11',
-    background: '#f8f2f3',
+    background: '#ffffff',
     tint: tintColorLight,
     icon: '#ae7e2d',
     primary: '#606c38',
diff --git a/firebase.config.tsx b/firebase.config.tsx
index 3bf8616..5910dc4 100644
--- a/firebase.config.tsx
+++ b/firebase.config.tsx
@@ -1,7 +1,6 @@
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
-import { Extrapolation } from "react-native-reanimated";
 
 const firebaseConfig = {
     apiKey: "***REMOVED***",
diff --git a/functions/shuffleArray.tsx b/functions/shuffleArray.tsx
index 75b6d94..93dc6de 100644
--- a/functions/shuffleArray.tsx
+++ b/functions/shuffleArray.tsx
@@ -1,7 +1,7 @@
-export const shuffleArray = (array : TipFields[]) => {
-    for (let i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [array[i], array[j]] = [array[j], array[i]];
-    }
-    return array;
-  };
\ No newline at end of file
+export function shuffleArray<T>(array: T[]): T[] {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+};
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 5d97931..7f4bfc3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable no-undef */
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   // NOTE: Update this to include the paths to all of your component files.
diff --git a/typing.d.ts b/typing.d.ts
index 2b52c41..2a03a3f 100644
--- a/typing.d.ts
+++ b/typing.d.ts
@@ -21,7 +21,14 @@ interface TipFields extends TipData {
 interface ChallengeFields extends ChallengeData {
     id: string;
 }
-
+interface ShopItemData {
+    name: string;
+    price: number;
+    image: string;
+}
+interface ShopItem extends ShopItemData {
+    id: string;
+}
 
 interface MessageType {
     message: string;