diff --git a/apps/mobile/.env.example b/apps/mobile/.env.example
index f4f974a9..56cacea1 100644
--- a/apps/mobile/.env.example
+++ b/apps/mobile/.env.example
@@ -22,4 +22,12 @@ EXPO_PUBLIC_DYNAMIC_API_KEY="DYNAMIC_API_KEY"
 EXPO_PUBLIC_LAYERSWAP_CLIENT_ID=""
 EXPO_PUBLIC_LAYERSWAP_API_KEY="API_KEY_LAYER_SWAP"
 
-EXPO_PUBLIC_GOOGLE_TAG_ID=
\ No newline at end of file
+EXPO_PUBLIC_GOOGLE_TAG_ID=
+
+
+# EKUBU API
+EXPO_PUBLIC_EKUBO_API="https://mainnet-api.ekubo.org"
+EXPO_PUBLIC_EKUBO_ROUTE_API="https://quoter-mainnet-api.ekubo.org"
+
+# AVNU API
+EXPO_PUBLIC_AVNU_API="https://starknet.api.avnu.fi"
\ No newline at end of file
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 00808c10..7b8233f7 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -2,7 +2,7 @@
   "name": "mobile",
   "version": "1.0.0",
   "main": "index.js",
-  "packageManager": "pnpm@8.15.9", 
+  "packageManager": "pnpm@8.15.9",
   "scripts": {
     "dev": "expo start",
     "build:web": "npx expo export --platform web",
@@ -10,10 +10,10 @@
     "start:tunnel": "expo start --tunnel",
     "android": "expo run:android",
     "build:android": "expo build:android",
-    "build:android:eas":"eas build -p android",
+    "build:android:eas": "eas build -p android",
     "ios": "expo run:ios",
     "build:ios": "expo build:ios",
-    "build:ios:eas":"eas build -p ios",
+    "build:ios:eas": "eas build -p ios",
     "web": "expo start --web",
     "postinstall": "patch-package",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
@@ -75,6 +75,7 @@
     "expo": "~51.0.28",
     "expo-application": "^5.9.1",
     "expo-auth-session": "^5.5.2",
+    "expo-av": "~14.0.7",
     "expo-camera": "^15.0.16",
     "expo-clipboard": "~6.0.3",
     "expo-constants": "^16.0.2",
@@ -146,4 +147,4 @@
     "typescript": "~5.3.3"
   },
   "private": true
-}
\ No newline at end of file
+}
diff --git a/apps/mobile/patches/@reown__appkit-siwe-react-native@1.0.0.patch b/apps/mobile/patches/@reown__appkit-siwe-react-native@1.0.0.patch
deleted file mode 100644
index 8b1044b7..00000000
Binary files a/apps/mobile/patches/@reown__appkit-siwe-react-native@1.0.0.patch and /dev/null differ
diff --git a/apps/mobile/src/app/Router.tsx b/apps/mobile/src/app/Router.tsx
index 9668c8d9..5016ffd2 100644
--- a/apps/mobile/src/app/Router.tsx
+++ b/apps/mobile/src/app/Router.tsx
@@ -15,6 +15,8 @@ import GroupChatGroupRequest from '../modules/Group/memberAction/ViewRequest';
 import GroupChat from '../modules/Group/message/GroupMessage';
 import AuthSidebar from '../modules/Layout/auth-sidebar';
 import Sidebar from '../modules/Layout/sidebar';
+import RightSidebar from '../modules/Layout/RightSideBar';
+import ShortVideosModule from '../modules/ShortVideos';
 // import RightSidebar from '../modules/Layout/RightSideBar';
 
 // Components
@@ -305,6 +307,8 @@ const MainNavigator: React.FC = () => {
       <MainStack.Screen name="ImportKeys" component={ImportKeys} />
 
       <MainStack.Screen name="Wallet" component={Wallet} />
+
+      <MainStack.Screen name="ShortVideos" component={ShortVideosModule} />
       <MainStack.Screen name="Onboarding" component={Onboarding} />
     </MainStack.Navigator>
   );
diff --git a/apps/mobile/src/app/Wrapper.tsx b/apps/mobile/src/app/Wrapper.tsx
index c4b3b7b9..0665036c 100644
--- a/apps/mobile/src/app/Wrapper.tsx
+++ b/apps/mobile/src/app/Wrapper.tsx
@@ -22,6 +22,7 @@ import {EVMProvider} from './EVMProvider';
 import {WalletModalEVMProvider} from '../context/WalletModalEvmProvider';
 import {CashuProvider} from '../providers/CashuProvider';
 import {dynamicClient} from './DynamicClient';
+import {SwapModalEVMProvider} from '../context/SwapModalProvider';
 
 const queryClient = new QueryClient({
   defaultOptions: {queries: {retry: 2}},
@@ -31,19 +32,21 @@ const ModalProviders = ({children}: {children: React.ReactNode}) => {
   return (
     <ToastProvider>
       <WalletModalEVMProvider>
-        <WalletModalProvider>
-          <TransactionModalProvider>
-            <TipModalProvider>
-              <TipModalStarknetProvider>
-                <TokenCreateModalProvider>
-                  <KeyModalProvider>
-                    <ModalParentProvider>{children}</ModalParentProvider>
-                  </KeyModalProvider>
-                </TokenCreateModalProvider>
-              </TipModalStarknetProvider>
-            </TipModalProvider>
-          </TransactionModalProvider>
-        </WalletModalProvider>
+        <SwapModalEVMProvider>
+          <WalletModalProvider>
+            <TransactionModalProvider>
+              <TipModalProvider>
+                <TipModalStarknetProvider>
+                  <TokenCreateModalProvider>
+                    <KeyModalProvider>
+                      <ModalParentProvider>{children}</ModalParentProvider>
+                    </KeyModalProvider>
+                  </TokenCreateModalProvider>
+                </TipModalStarknetProvider>
+              </TipModalProvider>
+            </TransactionModalProvider>
+          </WalletModalProvider>
+        </SwapModalEVMProvider>
       </WalletModalEVMProvider>
     </ToastProvider>
   );
diff --git a/apps/mobile/src/components/NostrVideo/index.tsx b/apps/mobile/src/components/NostrVideo/index.tsx
new file mode 100644
index 00000000..f2f5e813
--- /dev/null
+++ b/apps/mobile/src/components/NostrVideo/index.tsx
@@ -0,0 +1,80 @@
+import {NostrEvent} from '@nostr-dev-kit/ndk';
+import {ResizeMode, Video} from 'expo-av';
+import React, {useEffect, useState} from 'react';
+import {Pressable, TouchableOpacity, View} from 'react-native';
+
+import {BookmarkIcon, LikeIcon, RepostIcon} from '../../assets/icons';
+import {useStyles} from '../../hooks';
+import stylesheet from './styles';
+
+const NostrVideo = ({item, shouldPlay}: {shouldPlay: boolean; item: NostrEvent}) => {
+  const video = React.useRef<Video | null>(null);
+  const [status, setStatus] = useState<any>(null);
+  const styles = useStyles(stylesheet);
+
+  useEffect(() => {
+    if (!video.current) return;
+
+    if (shouldPlay) {
+      video.current.playAsync();
+    } else {
+      video.current.pauseAsync();
+      video.current.setPositionAsync(0);
+    }
+  }, [shouldPlay]);
+
+  const extractVideoURL = (event: NostrEvent) => {
+    return event?.tags?.find((tag) => tag?.[0] === 'url')?.[1] || '';
+  };
+
+  const handleLike = () => {
+    console.log('like');
+    //todo: integrate hook
+  };
+
+  const handleRepost = () => {
+    console.log('like');
+    //todo: integrate hook
+  };
+
+  const handleBookmark = () => {
+    console.log('like');
+    //todo: integrate hook
+  };
+
+  return (
+    <>
+      <Pressable
+        onPress={() =>
+          status.isPlaying ? video.current?.pauseAsync() : video.current?.playAsync()
+        }
+      >
+        <View style={styles.videoContainer}>
+          <Video
+            ref={video}
+            source={{uri: extractVideoURL(item)}}
+            style={styles.video}
+            isLooping
+            resizeMode={ResizeMode.COVER}
+            useNativeControls={false}
+            onPlaybackStatusUpdate={(status) => setStatus(() => status)}
+            videoStyle={styles.innerVideo}
+          />
+        </View>
+      </Pressable>
+      <View style={styles.actionsContainer}>
+        <TouchableOpacity onPress={handleLike}>
+          <LikeIcon width={20} height={20} color="white" />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={handleRepost}>
+          <RepostIcon width={20} height={20} color="white" />
+        </TouchableOpacity>
+        <TouchableOpacity style={{width: 15}} onPress={handleBookmark}>
+          <BookmarkIcon width={15} height={20} color="white" />
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+};
+
+export default NostrVideo;
diff --git a/apps/mobile/src/components/NostrVideo/styles.ts b/apps/mobile/src/components/NostrVideo/styles.ts
new file mode 100644
index 00000000..d2303ca3
--- /dev/null
+++ b/apps/mobile/src/components/NostrVideo/styles.ts
@@ -0,0 +1,26 @@
+import {Dimensions} from 'react-native';
+
+import {ThemedStyleSheet} from '../../styles';
+
+export default ThemedStyleSheet(() => ({
+  videoContainer: {
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height - 60,
+  },
+  video: {
+    width: '100%',
+    height: '100%',
+  },
+  innerVideo: {
+    height: Dimensions.get('window').height - 60,
+  },
+  actionsContainer: {
+    position: 'absolute',
+    right: 20,
+    bottom: 40,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 20,
+    alignItems: 'center',
+  },
+}));
diff --git a/apps/mobile/src/context/SwapModalProvider.tsx b/apps/mobile/src/context/SwapModalProvider.tsx
new file mode 100644
index 00000000..718fa4df
--- /dev/null
+++ b/apps/mobile/src/context/SwapModalProvider.tsx
@@ -0,0 +1,57 @@
+import {createContext, useCallback, useContext, useRef} from 'react';
+
+import {Modalize} from '../components';
+import TokenSwapView from '../modules/Swap';
+
+// Create a context for Swap
+export const SwapModalContext = createContext<{
+  showSwap: () => void;
+  hideSwap: () => void;
+} | null>(null);
+
+export const SwapModalEVMProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const modalizeRef = useRef<Modalize | any>(null);
+
+  const showSwap = useCallback(() => {
+    modalizeRef?.current.open();
+  }, []);
+
+  const hideSwap = useCallback(() => {
+    modalizeRef?.current.close();
+  }, [modalizeRef]);
+
+  return (
+    <SwapModalContext.Provider
+      value={{
+        showSwap,
+        hideSwap,
+      }}
+    >
+      {children}
+
+      <Modalize
+        modalStyle={{
+          maxWidth: 500,
+          width: '100%',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          marginBottom: 20,
+          borderRadius: 20,
+        }}
+        ref={modalizeRef}
+        adjustToContentHeight
+      >
+        <TokenSwapView showHeader />
+      </Modalize>
+    </SwapModalContext.Provider>
+  );
+};
+
+export const useSwapModal = () => {
+  const context = useContext(SwapModalContext);
+  if (!context) {
+    throw new Error('useSwap must be used within a SwapProvider');
+  }
+
+  return context;
+};
diff --git a/apps/mobile/src/modules/ShortVideos/index.tsx b/apps/mobile/src/modules/ShortVideos/index.tsx
new file mode 100644
index 00000000..fe911f9b
--- /dev/null
+++ b/apps/mobile/src/modules/ShortVideos/index.tsx
@@ -0,0 +1,60 @@
+import {NostrEvent} from '@nostr-dev-kit/ndk';
+import {useGetVideos} from 'afk_nostr_sdk';
+import React, {useRef, useState} from 'react';
+import {FlatList, Text, View} from 'react-native';
+
+import {InfoIcon} from '../../assets/icons';
+import NostrVideo from '../../components/NostrVideo';
+import {useStyles, useTheme} from '../../hooks';
+import {mockEvents} from '../../utils/dummyData';
+import stylesheet from './styles';
+
+const ShortVideosModule = () => {
+  const styles = useStyles(stylesheet);
+  const {theme} = useTheme();
+  const [currentViewableItemIndex, setCurrentViewableItemIndex] = useState(0);
+  const viewabilityConfig = {viewAreaCoveragePercentThreshold: 50};
+  const videos = useGetVideos();
+  const [videosEvents, setVideosEvents] = useState<NostrEvent[]>(
+    videos?.data?.pages?.flat() as NostrEvent[],
+  );
+
+  const fetchNostrEvents = async () => {
+    // This mock should be replaced with actual implementation (hook integration to get videos)
+    setVideosEvents(mockEvents);
+  };
+
+  const onViewableItemsChanged = ({viewableItems}: any) => {
+    if (viewableItems.length > 0) {
+      setCurrentViewableItemIndex(viewableItems[0].index ?? 0);
+    }
+  };
+
+  const viewabilityConfigCallbackPairs = useRef([{viewabilityConfig, onViewableItemsChanged}]);
+
+  return (
+    <View style={styles.container}>
+      {videosEvents.length > 0 ? (
+        <FlatList
+          style={styles.list}
+          data={videosEvents}
+          renderItem={({item, index}) => (
+            <NostrVideo item={item} shouldPlay={index === currentViewableItemIndex} />
+          )}
+          keyExtractor={(item, index) => item.content + index}
+          pagingEnabled
+          horizontal={false}
+          showsVerticalScrollIndicator={false}
+          viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
+        />
+      ) : (
+        <View style={styles.noDataContainer}>
+          <InfoIcon width={30} height={30} color={theme.colors.primary} />
+          <Text style={styles.noDataText}>No videos uploaded yet.</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default ShortVideosModule;
diff --git a/apps/mobile/src/modules/ShortVideos/styles.ts b/apps/mobile/src/modules/ShortVideos/styles.ts
new file mode 100644
index 00000000..4185cffd
--- /dev/null
+++ b/apps/mobile/src/modules/ShortVideos/styles.ts
@@ -0,0 +1,24 @@
+import {ThemedStyleSheet} from '../../styles';
+
+export default ThemedStyleSheet((theme) => ({
+  container: {
+    flex: 1,
+    height: '100%',
+  },
+  list: {
+    height: '100%',
+  },
+  noDataContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 20,
+    marginTop: 20,
+  },
+  noDataText: {
+    color: theme.colors.text,
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+}));
diff --git a/apps/mobile/src/modules/Swap/TokenSelection.tsx b/apps/mobile/src/modules/Swap/TokenSelection.tsx
new file mode 100644
index 00000000..0a6bfb07
--- /dev/null
+++ b/apps/mobile/src/modules/Swap/TokenSelection.tsx
@@ -0,0 +1,88 @@
+import {Feather} from '@expo/vector-icons';
+import React, {useCallback, useMemo, useState} from 'react';
+import {FlatList, Image, Modal, Text, TextInput, TouchableOpacity, View} from 'react-native';
+
+import {useStyles, useTheme} from '../../hooks';
+import {useGetEvmTokens} from '../../starknet/evm/hooks';
+import {IGetTokenReturnTypeObj} from '../../starknet/evm/types';
+import styleSheet from './styles';
+import {debounce} from './util';
+
+interface TokenSelectModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onSelect: (token: IGetTokenReturnTypeObj) => void;
+}
+
+const RenderTokenItem = ({
+  item,
+  onSelect,
+}: {
+  item: IGetTokenReturnTypeObj;
+  onSelect: (item: IGetTokenReturnTypeObj) => void;
+}) => {
+  const styles = useStyles(styleSheet);
+  return (
+    <TouchableOpacity style={styles.tokenItem} onPress={() => onSelect(item)}>
+      <Image source={{uri: item.logo_url}} style={styles.tokenLogo} />
+      <View style={styles.tokenInfo}>
+        <Text style={styles.tokenName}>{item.name}</Text>
+        <Text style={styles.tokenSymbol}>{item.symbol}</Text>
+      </View>
+      <Text style={styles.tokenDecimals}>{item.decimals}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default function TokenSelectModal({visible, onClose, onSelect}: TokenSelectModalProps) {
+  const theme = useTheme();
+  const styles = useStyles(styleSheet);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const {data: tokens, isLoading} = useGetEvmTokens({search: searchQuery});
+
+  const debouncedSearch = useMemo(() => debounce((text: string) => setSearchQuery(text), 300), []);
+
+  const handleSearchChange = useCallback(
+    (text: string) => {
+      debouncedSearch(text);
+    },
+    [debouncedSearch],
+  );
+
+  return (
+    <Modal visible={visible} animationType="fade" transparent={true}>
+      <View style={styles.modalContainer}>
+        <View style={styles.modalContent}>
+          <View style={styles.modalHeader}>
+            <Text style={styles.modalTitle}>Select Token</Text>
+            <TouchableOpacity onPress={onClose}>
+              <Feather name="x" size={24} color={theme.theme.colors.swap_text} />
+            </TouchableOpacity>
+          </View>
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Search tokens"
+            onChangeText={handleSearchChange}
+          />
+          {isLoading ? (
+            <View style={{height: 400}}>
+              <Text style={styles.loadingText}>Loading tokens...</Text>
+            </View>
+          ) : (
+            <FlatList
+              style={{maxHeight: 400, minHeight: 400}}
+              data={tokens}
+              renderItem={({item}) => <RenderTokenItem onSelect={onSelect} item={item} />}
+              keyExtractor={(item) => item.name}
+              initialNumToRender={10}
+              maxToRenderPerBatch={20}
+              windowSize={5}
+              removeClippedSubviews={true}
+            />
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+}
diff --git a/apps/mobile/src/modules/Swap/index.tsx b/apps/mobile/src/modules/Swap/index.tsx
new file mode 100644
index 00000000..546dea52
--- /dev/null
+++ b/apps/mobile/src/modules/Swap/index.tsx
@@ -0,0 +1,379 @@
+import {Feather} from '@expo/vector-icons';
+import {useAccount} from '@starknet-react/core';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
+import {Image, ScrollView, Text, TextInput, TouchableOpacity, View, ViewStyle} from 'react-native';
+
+import {WalletModalContext} from '../../context/WalletModal';
+import {useStyles, useTheme} from '../../hooks';
+import {useToast} from '../../hooks/modals';
+import {
+  useAvnuExecuteSwap,
+  useAvnuSwapBuildDataType,
+  useAvnuSwapCalldata,
+  useGetAvnuSwapQuoteDetails,
+  useGetEvmTokens,
+} from '../../starknet/evm/hooks';
+import styleSheet from './styles';
+import TokenSelectModal from './TokenSelection';
+import {formatToUSD, parseAmountToHex, parseUSD} from './util';
+interface Token {
+  symbol: string;
+  l2_token_address: string;
+  decimals: number;
+  logo_url: string;
+}
+
+export default function TokenSwapView({showHeader = false}: {showHeader?: boolean}) {
+  const {showToast} = useToast();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const walletModalContext = useContext(WalletModalContext);
+
+  const {address, isConnected, account} = useAccount();
+
+  const {data: tokens} = useGetEvmTokens();
+  const [toToken, setToToken] = useState<Token | null>(null);
+  const [toAmount, setToAmount] = useState<string>('0');
+  const [fromToken, setFromToken] = useState<Token | null>(null);
+  const [fromAmount, setFromAmount] = useState<string>('0');
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [activeInput, setActiveInput] = useState<'from' | 'to'>('from');
+  const [shouldRefetchQuote, setShouldRefetchQuote] = useState(false);
+
+  // Determine which amount and token to use based on activeInput and reversed state
+  const amount = activeInput === 'to' ? toAmount : fromAmount;
+
+  const token = activeInput === 'to' ? toToken : fromToken;
+  const otherToken = activeInput === 'to' ? fromToken : toToken;
+
+  //USD VALUES
+  const [estUsdValue, setEstUSDValue] = useState<string | any>('$0.00');
+
+  //Parse Amount
+  const sellAmount = parseUSD(amount);
+
+  //AVNU SWAP DETAILS
+  const {data: avnuSwapDetails, refetch} = useGetAvnuSwapQuoteDetails({
+    buyTokenAddress: otherToken?.l2_token_address as any,
+    sellAmount: amount !== '0' ? parseAmountToHex(sellAmount, fromToken?.decimals as any) : '',
+    sellTokenAddress: token?.l2_token_address as any,
+    size: 3,
+  });
+  const {mutate: mutateSwapCallData} = useAvnuSwapCalldata();
+
+  const {mutate: mutateExecuteSwap} = useAvnuExecuteSwap();
+  const {mutate: mutateSwapBuildDataType} = useAvnuSwapBuildDataType();
+
+  const theme = useTheme();
+  const styles = useStyles(styleSheet);
+
+  const updateAmounts = useCallback((newFromAmount: string, newToAmount: string) => {
+    setFromAmount(newFromAmount);
+    setToAmount(newToAmount);
+
+    setShouldRefetchQuote(true);
+  }, []);
+
+  useEffect(() => {
+    if (activeInput === 'from' && fromAmount === '') {
+      setEstUSDValue('$0.00');
+    }
+    if (activeInput === 'to' && toAmount === '') {
+      setEstUSDValue('$0.00');
+    }
+    function updateUSDValues() {
+      if (activeInput === 'from' && fromAmount !== '' && fromToken && avnuSwapDetails?.length) {
+        setEstUSDValue(formatToUSD(avnuSwapDetails[0].sellAmountInUsd));
+      } else if (activeInput === 'to' && toAmount !== '' && toToken && avnuSwapDetails?.length) {
+        setEstUSDValue(formatToUSD(avnuSwapDetails[0].buyAmountInUsd));
+      }
+    }
+    updateUSDValues();
+  }, [
+    fromToken,
+    fromAmount,
+    toToken,
+    toAmount,
+    activeInput,
+    avnuSwapDetails?.length,
+    avnuSwapDetails,
+  ]);
+
+  useEffect(() => {
+    if (tokens && tokens.length >= 5) {
+      setFromToken(tokens[4]);
+      setToToken(tokens[1]);
+    }
+  }, [tokens]);
+
+  useEffect(() => {
+    if (avnuSwapDetails) {
+      if (activeInput === 'from' && fromAmount !== '' && avnuSwapDetails?.length) {
+        setToAmount(formatToUSD(avnuSwapDetails[0].buyAmountInUsd));
+      } else if (activeInput === 'to' && toAmount !== '' && avnuSwapDetails?.length) {
+        setFromAmount(formatToUSD(avnuSwapDetails[0].sellAmountInUsd));
+      }
+      setShouldRefetchQuote(false);
+    }
+  }, [activeInput, fromAmount, toAmount, shouldRefetchQuote, avnuSwapDetails]);
+
+  const handleFromAmountChange = (value: string) => {
+    updateAmounts(value, '');
+    setActiveInput('from');
+  };
+
+  //: Disabled this for now
+  const handleToAmountChange = (value: string) => {
+    updateAmounts('', value);
+    setActiveInput('to');
+  };
+  //: Disabled this for now
+  const handleReverseSwap = () => {
+    setFromToken(toToken);
+    setToToken(fromToken);
+    updateAmounts(toAmount, fromAmount);
+    setActiveInput(activeInput === 'from' ? 'to' : 'from');
+    setShouldRefetchQuote(true);
+  };
+
+  const openModal = (input: 'from' | 'to') => {
+    setActiveInput(input);
+    setModalVisible(true);
+  };
+
+  const selectToken = (token: Token) => {
+    if (activeInput === 'from') {
+      setFromToken(token);
+    } else {
+      setToToken(token);
+    }
+    setModalVisible(false);
+    updateAmounts('0', '0');
+    setEstUSDValue('$0.00');
+  };
+
+  const handleExecute = async () => {
+    if (toAmount === '0' && fromAmount === '0') return;
+    setIsLoading(true);
+
+    // Refetch the quote to ensure we have the latest data
+    const freshQuote = await refetch();
+
+    mutateSwapCallData(
+      {
+        takerAddress: account?.address as string,
+        slippage: 0.05,
+        quoteId: freshQuote?.data?.length ? freshQuote.data[0].quoteId : '',
+        includeApprove: true,
+      },
+      {
+        async onSuccess(data) {
+          // Find the approve call and the swap call
+          const approveCall = data.calls.find((call) => call.entrypoint === 'approve');
+          const swapCall = data.calls.find(
+            (call) => call.entrypoint === 'swap' || call.entrypoint === 'multi_route_swap',
+          );
+
+          if (approveCall && swapCall) {
+            try {
+              // Execute both calls in a single transaction
+              const res = await account?.execute([
+                {
+                  contractAddress: approveCall.contractAddress,
+                  entrypoint: approveCall.entrypoint,
+                  calldata: approveCall.calldata,
+                },
+                {
+                  contractAddress: swapCall.contractAddress,
+                  entrypoint: swapCall.entrypoint,
+                  calldata: swapCall.calldata,
+                },
+              ]);
+              if (res?.transaction_hash) {
+                setIsLoading(false);
+                showToast({type: 'info', title: 'Swap Successfull'});
+              }
+            } catch (error) {
+              setIsLoading(false);
+              showToast({type: 'error', title: error.message});
+            }
+          }
+        },
+        onError(error) {
+          setIsLoading(false);
+          showToast({type: 'error', title: error.message});
+        },
+      },
+    );
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      {showHeader && (
+        <View
+          style={{
+            paddingBottom: 16,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignContent: 'flex-start',
+            justifyContent: 'flex-start',
+          }}
+        >
+          <Text style={{textAlign: 'left', fontSize: 24, color: theme.theme.colors.swap_text}}>
+            Swap Token
+          </Text>
+        </View>
+      )}
+      <View style={styles.swapCard}>
+        {/* From Token Input */}
+        <View style={styles.inputContainer}>
+          <View style={styles.labelContainer}>
+            <Text style={styles.label_dim}>From</Text>
+          </View>
+          <View style={styles.inputRow}>
+            <NumberInput
+              style={styles.input}
+              placeholder="0.0"
+              value={fromAmount}
+              disabled={isLoading}
+              onChangeText={handleFromAmountChange}
+            />
+
+            <TouchableOpacity style={styles.tokenSelect} onPress={() => openModal('from')}>
+              <View
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  gap: 4,
+                  alignItems: 'center',
+                }}
+              >
+                <Image
+                  source={{uri: fromToken?.logo_url}}
+                  style={{
+                    width: 22,
+                    height: 22,
+                  }}
+                />
+                <Text style={styles.tokenSelectText}>{fromToken?.symbol}</Text>
+              </View>
+              <Feather name="chevron-down" size={20} color={theme.theme.colors.swap_text} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.balanceEstimate}>
+            <Text style={styles.estimate}>≈ {estUsdValue}</Text>
+          </View>
+        </View>
+
+        <TouchableOpacity style={styles.reverseButton}>
+          <Feather name="arrow-down" size={20} color={theme.theme.colors.swap_primary} />
+        </TouchableOpacity>
+
+        {/* To Token Input */}
+        <View style={styles.inputContainer}>
+          <View style={styles.labelContainer}>
+            <Text style={styles.label_dim}>To</Text>
+          </View>
+          <View style={styles.inputRow}>
+            <NumberInput
+              style={styles.input}
+              placeholder="0.0"
+              value={toAmount}
+              onChangeText={() => console.log()}
+              disabled
+            />
+
+            <TouchableOpacity style={styles.tokenSelect} onPress={() => openModal('to')}>
+              <View
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  gap: 4,
+                  alignItems: 'center',
+                }}
+              >
+                <Image
+                  source={{uri: toToken?.logo_url}}
+                  style={{
+                    width: 22,
+                    height: 22,
+                  }}
+                />
+                <Text style={styles.tokenSelectText}>{toToken?.symbol}</Text>
+              </View>
+              <Feather name="chevron-down" size={20} color={theme.theme.colors.swap_text} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.balanceEstimate}>
+            <Text style={styles.estimate}>≈ {estUsdValue}</Text>
+          </View>
+        </View>
+
+        <View style={styles.infoContainer}>{/* Add swap info and other details if needed */}</View>
+
+        {isConnected ? (
+          <TouchableOpacity onPress={() => handleExecute()} style={styles.swapButton}>
+            <Text style={styles.swapButtonText}>{isLoading ? 'Swapping...' : 'Swap'}</Text>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity onPress={() => walletModalContext?.show()} style={styles.swapButton}>
+            <Text style={styles.swapButtonText}>Connect Wallet</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <TokenSelectModal
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+        onSelect={selectToken}
+      />
+    </ScrollView>
+  );
+}
+
+interface NumberInputProps {
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  style?: ViewStyle;
+  disabled?: boolean;
+}
+
+const NumberInput: React.FC<NumberInputProps> = ({
+  placeholder,
+  value,
+  onChangeText,
+  style,
+  disabled,
+}) => {
+  const [localValue, setLocalValue] = useState<string>(value);
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const handleChangeText = (text: string) => {
+    if (disabled) return;
+    const sanitizedText = text.replace(/[^0-9.]/g, '');
+    const parts = sanitizedText.split('.');
+    const formattedText = parts[0] + (parts.length > 1 ? '.' + parts[1].slice(0, 18) : '');
+    if (formattedText === '00' || formattedText.startsWith('00.') || formattedText === '.') {
+      return;
+    }
+    setLocalValue(formattedText);
+
+    onChangeText(formattedText);
+  };
+
+  return (
+    <TextInput
+      style={style}
+      placeholder={placeholder}
+      value={localValue}
+      onChangeText={handleChangeText}
+      keyboardType="decimal-pad"
+    />
+  );
+};
diff --git a/apps/mobile/src/modules/Swap/styles.ts b/apps/mobile/src/modules/Swap/styles.ts
new file mode 100644
index 00000000..5133e79d
--- /dev/null
+++ b/apps/mobile/src/modules/Swap/styles.ts
@@ -0,0 +1,215 @@
+import {ThemedStyleSheet} from '../../styles';
+
+export default ThemedStyleSheet((theme) => ({
+  container: {
+    // flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  swapCard: {
+    backgroundColor: theme.colors.swap_surface,
+    borderRadius: 16,
+    padding: 16,
+    width: '100%',
+
+    borderWidth: 1,
+    borderColor: theme.colors.divider,
+  },
+  inputContainer: {
+    backgroundColor: theme.colors.swap_cardBackground,
+    borderRadius: 12,
+    padding: 12,
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: 'semibold',
+    color: theme.colors.swap_text,
+  },
+  label_dim: {
+    fontSize: 16,
+    fontWeight: 'semibold',
+    color: theme.colors.swap_text_dim,
+  },
+  balance: {
+    fontSize: 14,
+    color: theme.colors.swap_textSecondary,
+    marginLeft: 'auto',
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  balanceEstimate: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+
+  input: {
+    flex: 1,
+    height: 48,
+    color: theme.colors.swap_inputText,
+    backgroundColor: 'transparent',
+    fontSize: 24,
+    fontWeight: 'bold',
+    // Remove focus styles
+    borderWidth: 0,
+    outlineWidth: 0,
+    padding: 0,
+    margin: 0,
+    borderColor: 'transparent',
+  },
+  tokenSelect: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    height: 34,
+    borderRadius: 20,
+    marginLeft: 'auto',
+    backgroundColor: theme.colors.swap_inputBackground,
+  },
+  tokenSelectText: {
+    color: theme.colors.swap_text,
+    fontWeight: 'bold',
+    marginRight: 8,
+  },
+  estimate: {
+    fontSize: 14,
+    color: theme.colors.swap_textSecondary,
+  },
+  reverseButton: {
+    // borderWidth: 1,
+    borderColor: 'white',
+    borderRadius: 100,
+    alignSelf: 'center',
+    alignItems: 'center',
+    flexShrink: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    marginVertical: -12,
+    backgroundColor: theme.colors.swap_surface,
+    width: 28,
+    height: 28,
+    zIndex: 9,
+    // marginVertical: 4,
+  },
+  infoContainer: {
+    marginTop: 10,
+    marginBottom: 24,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  infoLabel: {
+    color: theme.colors.swap_textSecondary,
+    fontSize: 14,
+  },
+  infoValue: {
+    color: theme.colors.swap_text,
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  infoSecondary: {
+    color: theme.colors.swap_textSecondary,
+    fontSize: 12,
+    textAlign: 'right',
+  },
+  swapButton: {
+    backgroundColor: theme.colors.swap_buttonBackground,
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  swapButtonText: {
+    color: theme.colors.swap_buttonText,
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    backgroundColor: theme.colors.swap_surface,
+    width: '100%',
+    maxWidth: 400,
+    margin: 'auto',
+    borderRadius: 20,
+    // borderTopRightRadius: 20,
+    paddingHorizontal: 16,
+    paddingBottom: 32,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 16,
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: theme.colors.swap_text,
+  },
+  searchInput: {
+    height: 40,
+    borderWidth: 1,
+    borderColor: theme.colors.swap_inputBorder,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    marginBottom: 16,
+    color: theme.colors.swap_inputText,
+    backgroundColor: theme.colors.swap_inputBackground,
+  },
+  tokenItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.swap_divider,
+  },
+  tokenInfo: {
+    flex: 1,
+  },
+  tokenName: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: theme.colors.swap_text,
+  },
+  tokenSymbol: {
+    fontSize: 14,
+    color: theme.colors.swap_textSecondary,
+  },
+  tokenBalance: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: theme.colors.swap_text,
+  },
+  tokenDecimals: {
+    fontSize: 14,
+    color: theme.colors.swap_text,
+  },
+  tokenLogo: {
+    width: 30,
+    height: 30,
+    marginRight: 10,
+    borderRadius: 15,
+  },
+  loadingText: {
+    textAlign: 'center',
+    marginTop: 20,
+    fontSize: 16,
+    color: theme.colors.text,
+  },
+}));
diff --git a/apps/mobile/src/modules/Swap/util.ts b/apps/mobile/src/modules/Swap/util.ts
new file mode 100644
index 00000000..43238fff
--- /dev/null
+++ b/apps/mobile/src/modules/Swap/util.ts
@@ -0,0 +1,42 @@
+import {parseUnits, toHex} from 'viem';
+
+export function formatToUSD(amount: any) {
+  // Format the result as USD with 2 decimal places
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(amount);
+}
+export function parseUSD(usdString: string) {
+  if (!usdString) {
+    return '0'; // or throw an error, depending on your requirements
+  }
+  // Remove the currency symbol and commas, then parse to float
+  const parsed = parseFloat(usdString.replace(/[$,]/g, '')).toString();
+  return parsed;
+}
+export function parseAmountToHex(amount: string, decimals: number): string {
+  const parsedUnits = parseUnits(amount, decimals);
+  return toHex(parsedUnits);
+}
+
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null;
+
+  return (...args: Parameters<T>) => {
+    const later = () => {
+      timeout = null;
+      func(...args);
+    };
+
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(later, wait);
+  };
+}
diff --git a/apps/mobile/src/screens/Defi/index.tsx b/apps/mobile/src/screens/Defi/index.tsx
index c11db3de..3bc78287 100644
--- a/apps/mobile/src/screens/Defi/index.tsx
+++ b/apps/mobile/src/screens/Defi/index.tsx
@@ -14,6 +14,7 @@ import {LayerswapView} from '../../modules/Bridge/layerswap';
 import {DefiScreenProps} from '../../types';
 import {SelectedTab, TABS_DEFI} from '../../types/tab';
 import stylesheet from './styles';
+import TokenSwapView from '../../modules/Swap';
 
 export const Defi: React.FC<DefiScreenProps> = ({navigation}) => {
   const styles = useStyles(stylesheet);
@@ -58,7 +59,7 @@ export const Defi: React.FC<DefiScreenProps> = ({navigation}) => {
             )}
             {selectedTab == SelectedTab.SWAP_AVNU && (
               <View style={{display: 'flex', alignItems: 'center'}}>
-                <TokenSwap onPress={() => console.log('pressed!')} />
+                <TokenSwapView />
               </View>
             )}
             {/* 
diff --git a/apps/mobile/src/starknet/evm/hooks.ts b/apps/mobile/src/starknet/evm/hooks.ts
new file mode 100644
index 00000000..7f26a460
--- /dev/null
+++ b/apps/mobile/src/starknet/evm/hooks.ts
@@ -0,0 +1,99 @@
+import {useMutation, useQuery} from '@tanstack/react-query';
+
+import {
+  buildAvnuSwapBuildTypeFn,
+  buildAvnuSwapCallDataFn,
+  executeAvnuSwapFn,
+  fetchEvmTokenFn,
+  fetchGetAvnuSwapQuoteFn,
+  fetchGetQuotePriceFn,
+  fetchGetSwapQuoteFn,
+} from './service';
+import {IAvnuQueryType, IQuotePrice, IQuoteSwapQuery} from './types';
+
+interface UseGetEvmTokensOptions {
+  search?: string;
+}
+
+export const useGetEvmTokens = (options?: UseGetEvmTokensOptions) => {
+  return useQuery({
+    queryKey: ['evmTokens', options?.search],
+    queryFn: () => fetchEvmTokenFn(),
+    select: (data) => {
+      if (!options?.search) {
+        return data;
+      }
+      const lowercasedSearch = options.search.toLowerCase();
+      return data.filter((token) => token.name.toLowerCase().includes(lowercasedSearch));
+    },
+  });
+};
+
+export const useGetSwapQuoteDetails = ({...options}: IQuoteSwapQuery) => {
+  return useQuery({
+    queryKey: [
+      'swapQuoteDetails',
+      options.otherToken,
+      options.token,
+      options.amount,
+      options.direction,
+    ],
+    queryFn: () => fetchGetSwapQuoteFn(options),
+  });
+};
+
+export const useGetSwapQuoteDetails2 = ({...options}: IQuoteSwapQuery) => {
+  const roundedAmount = Math.ceil(parseFloat(options.amount));
+  return useQuery({
+    queryKey: ['swapQuoteDetails', options.otherToken, options.token, options.amount],
+    queryFn: () => fetchGetSwapQuoteFn({...options, amount: roundedAmount as any}),
+    enabled: roundedAmount > 0, // Only execute if rounded amount is greater than 0
+  });
+};
+
+export const useGetQuotePrice = ({...options}: IQuotePrice) => {
+  return useQuery({
+    queryKey: ['quotePrice', options.period, options.baseToken, options.quoteToken],
+    queryFn: () => fetchGetQuotePriceFn(options),
+    enabled: options.baseToken ? true : false,
+  });
+};
+
+/**
+ * Avnu Hooks for fetching quotes swapping and executing swap.
+ */
+
+export const useAvnuSwapCalldata = () => {
+  return useMutation({
+    mutationKey: ['avnuSwapCallData'],
+    mutationFn: buildAvnuSwapCallDataFn,
+  });
+};
+
+export const useAvnuSwapBuildDataType = () => {
+  return useMutation({
+    mutationKey: ['avnuSwapBuildDataType'],
+    mutationFn: buildAvnuSwapBuildTypeFn,
+  });
+};
+
+export const useAvnuExecuteSwap = () => {
+  return useMutation({
+    mutationKey: ['avnuExecuteSwap'],
+    mutationFn: executeAvnuSwapFn,
+  });
+};
+
+export const useGetAvnuSwapQuoteDetails = ({...options}: IAvnuQueryType) => {
+  return useQuery({
+    queryKey: [
+      'AvnuQuoteDetails',
+      options.buyTokenAddress,
+      options.sellTokenAddress,
+      options.sellAmount,
+    ],
+    queryFn: () => fetchGetAvnuSwapQuoteFn(options),
+    enabled: options.sellAmount ? true : false,
+    refetchInterval: 10000, // Refetch every 10 seconds to keep quote fresh
+  });
+};
diff --git a/apps/mobile/src/starknet/evm/service.ts b/apps/mobile/src/starknet/evm/service.ts
new file mode 100644
index 00000000..4a1862bd
--- /dev/null
+++ b/apps/mobile/src/starknet/evm/service.ts
@@ -0,0 +1,173 @@
+import {} from '@avnu/avnu-sdk';
+import axios from 'axios';
+
+import {
+  IAvnuExecuteSwap,
+  IAvnuQueryType,
+  IAvnuSwapBuildDataTypeReturnTypeObj,
+  IAvnuSwapBuildTypedata,
+  IAvnuSwapCalldata,
+  IAvnuSwapCalldataReturnTypeObj,
+  IGetAvnuQuoteReturnTypeObj,
+  IGetPoolReturnTypeObj,
+  IGetQuoteReturnTypeObj,
+  IGetTokenReturnTypeObj,
+  IPriceReturnType,
+  IQuotePrice,
+  IQuoteSwapQuery,
+} from './types';
+
+const ekuboBaseUrl = process.env.EXPO_PUBLIC_EKUBO_API || 'https://mainnet-api.ekubo.org';
+const ekuboQuoteBaseUrl = process.env.EXPO_PUBLIC_EKUBO_ROUTE_API;
+const avnuApi = process.env.EXPO_PUBLIC_AVNU_API || 'https://starknet.api.avnu.fi';
+
+export const ApiEvmInstance = axios.create({
+  baseURL: ekuboBaseUrl,
+  timeout: 10_000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export const ApiEvmInstance2 = axios.create({
+  baseURL: avnuApi,
+  timeout: 10_000,
+  headers: {
+    'Content-Type': 'application/json',
+    'ask-signature': 'true',
+  },
+});
+
+/**
+ * AVNU APIS
+ * @param query
+ * @returns
+ */
+export const fetchGetAvnuSwapQuoteFn = async (
+  query: IAvnuQueryType,
+): Promise<IGetAvnuQuoteReturnTypeObj[]> => {
+  try {
+    const response = await ApiEvmInstance2.get(
+      `/swap/v2/quotes?sellTokenAddress=${query.sellTokenAddress}&buyTokenAddress=${query.buyTokenAddress}&sellAmount=${query.sellAmount}&integratorName=AVNU%20Portal`,
+    );
+    return response.data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+/**
+ * Use this for gas transaction which is default for now
+ * OnSuccess we execute tx with calldata
+ * @param payload
+ * @returns
+ */
+export const buildAvnuSwapCallDataFn = async (
+  payload: IAvnuSwapCalldata,
+): Promise<IAvnuSwapCalldataReturnTypeObj> => {
+  try {
+    const response = await ApiEvmInstance2.post(avnuApi + `/swap/v2/build`, payload);
+    return response.data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+/**
+ * We can use this for gasless transaction -->
+ * @param payload
+ * @returns
+ */
+export const buildAvnuSwapBuildTypeFn = async (
+  payload: IAvnuSwapBuildTypedata,
+): Promise<{data: IAvnuSwapBuildDataTypeReturnTypeObj; signature: any}> => {
+  try {
+    const response = await ApiEvmInstance2.post(avnuApi + `/swap/v2/build-typed-data`, payload);
+    // Extract the signature from the response headers
+    const signature = response.headers['signature'] || null;
+    return {
+      data: response.data,
+      signature,
+    };
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+/**
+ * We can use this when dealing with gasless transaction -->
+ * @param payload
+ * @returns
+ */
+export const executeAvnuSwapFn = async (
+  payload: IAvnuExecuteSwap,
+): Promise<IGetAvnuQuoteReturnTypeObj[]> => {
+  try {
+    const response = await ApiEvmInstance2.post(avnuApi + `/swap/v2/execute`, payload);
+    return response.data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+/**
+ * Ekubo APIS
+ * @returns
+ */
+
+export const fetchEvmTokenFn = async (): Promise<IGetTokenReturnTypeObj[]> => {
+  try {
+    const response = await ApiEvmInstance.get('/tokens');
+    return response.data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+/**
+ * Returns a quote for a swap or series of swaps to/from one token amount from/to another token
+ * Meaning /token/otherToken 1From token is === 0.00xx toToken
+ * @returns
+ */
+
+export const fetchGetSwapQuoteFn2 = async (
+  query: IQuoteSwapQuery,
+): Promise<IGetQuoteReturnTypeObj> => {
+  try {
+    const response = await ApiEvmInstance.get(
+      `/quote/${query.amount}/${query.token}/${query.otherToken}`,
+    );
+    return response.data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+/**
+ * Returns a quote for a swap or series of swaps to/from one token amount from/to another token
+ * Meaning /token/otherToken 1From token is === 0.00xx toToken
+ * @returns
+ */
+export const fetchGetSwapQuoteFn = async (
+  query: IQuoteSwapQuery,
+): Promise<IGetPoolReturnTypeObj> => {
+  try {
+    const response = await axios.get(
+      ekuboQuoteBaseUrl + `/${query.amount}/${query.token}/${query.otherToken}`,
+    );
+    return response.data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+export const fetchGetQuotePriceFn = async (query: IQuotePrice): Promise<IPriceReturnType> => {
+  try {
+    const response = await ApiEvmInstance.get(
+      `/price/${query.baseToken}/${query.quoteToken}?${query.atTime}&peroid=${query.period}`,
+    );
+    return response.data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
diff --git a/apps/mobile/src/starknet/evm/types.ts b/apps/mobile/src/starknet/evm/types.ts
new file mode 100644
index 00000000..191b922c
--- /dev/null
+++ b/apps/mobile/src/starknet/evm/types.ts
@@ -0,0 +1,234 @@
+export interface IGetTokenReturnTypeObj {
+  name: string;
+  symbol: string;
+  decimals: number;
+  l2_token_address: string;
+  sort_order: number;
+  total_supply: null;
+  logo_url: string;
+}
+
+export interface IAvnuSwapBuildDataTypeReturnTypeObj {
+  types: Types;
+  primaryType: string;
+  domain: Domain;
+  message: Message;
+}
+
+export interface IAvnuSwapBuildDataTypeReturnTypeObj {
+  signature: any;
+  types: Types;
+  primaryType: string;
+  domain: Domain;
+  message: Message;
+}
+
+export interface Domain {
+  name: ChainID;
+  version: ChainID;
+  chainId: ChainID;
+  revision: string;
+  separatorName$lib: string;
+}
+
+export interface ChainID {
+  content: string;
+  isString: boolean;
+}
+
+export interface Message {
+  values: AdditionalProp1[];
+  isEmpty: boolean;
+  size: number;
+  entries: Entry[];
+  keys: string[];
+  additionalProp1: AdditionalProp1;
+  additionalProp2: AdditionalProp1;
+  additionalProp3: AdditionalProp1;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface AdditionalProp1 {}
+
+export interface Entry {
+  value: AdditionalProp1;
+  key: string;
+}
+
+export interface Types {
+  additionalProp1: AdditionalProp[];
+  additionalProp2: AdditionalProp[];
+  additionalProp3: AdditionalProp[];
+}
+
+export interface AdditionalProp {
+  name: string;
+  type: string;
+}
+
+export interface IAvnuSwapCalldata {
+  quoteId: string;
+  takerAddress: string;
+  slippage: number;
+  includeApprove: boolean;
+}
+
+export interface IAvnuSwapBuildTypedata {
+  quoteId: string;
+  takerAddress: string;
+  slippage: number;
+  includeApprove: boolean;
+  gasTokenAddress?: string;
+  maxGasTokenAmount?: string;
+}
+
+export interface IAvnuSwapCalldataReturnTypeObj {
+  chainId: string;
+  calls: Call[];
+}
+
+export interface Call {
+  contractAddress: string;
+  entrypoint: string;
+  calldata: string[];
+}
+
+export interface IAvnuExecuteSwap {
+  quoteId: string;
+  signature: string[];
+}
+
+export interface IGetQuoteReturnTypeObj {
+  specifiedAmount: string;
+  amount: string;
+  route: Route[];
+}
+
+export interface IGetAvnuQuoteReturnTypeObj {
+  quoteId: string;
+  sellTokenAddress: string;
+  sellAmount: string;
+  sellAmountInUsd: number;
+  buyTokenAddress: string;
+  buyAmount: string;
+  buyAmountInUsd: number;
+  buyAmountWithoutFees: string;
+  buyAmountWithoutFeesInUsd: number;
+  estimatedAmount: boolean;
+  chainId: string;
+  blockNumber: string;
+  expiry: null;
+  routes: Route[];
+  gasFees: string;
+  gasFeesInUsd: number;
+  avnuFees: string;
+  avnuFeesInUsd: number;
+  avnuFeesBps: string;
+  integratorFees: string;
+  integratorFeesInUsd: number;
+  integratorFeesBps: string;
+  priceRatioUsd: number;
+  liquiditySource: string;
+  sellTokenPriceInUsd: number;
+  buyTokenPriceInUsd: number;
+  gasless: Gasless;
+  exactTokenTo: boolean;
+}
+
+export interface Gasless {
+  active: boolean;
+  gasTokenPrices: GasTokenPrice[];
+}
+
+export interface GasTokenPrice {
+  tokenAddress: string;
+  gasFeesInGasToken: string;
+  gasFeesInUsd: number;
+}
+
+export interface Route {
+  name: string;
+  address: string;
+  percent: number;
+  sellTokenAddress: string;
+  buyTokenAddress: string;
+  routeInfo: RouteInfo;
+  routes: any[];
+}
+
+export interface RouteInfo {
+  token0: string;
+  token1: string;
+  fee: string;
+  tickSpacing: string;
+  extension: string;
+}
+
+export interface IQuotePrice {
+  baseToken: string;
+  quoteToken: string;
+  atTime?: string;
+  period?: number;
+}
+export interface IPriceReturnType {
+  timestamp: number;
+  price: string;
+}
+export interface IAvnuQueryType {
+  sellTokenAddress: string;
+  buyTokenAddress: string;
+  sellAmount?: any;
+  buyAmount?: any;
+  takerAddress?: string;
+  size: number;
+}
+
+export interface IGetPoolReturnTypeObj {
+  total_calculated: string;
+  splits: Split[];
+}
+
+export interface Split {
+  amount_specified: string;
+  amount_calculated: string;
+  route: Route[];
+}
+
+export interface Route {
+  pool_key: PoolKey;
+  sqrt_ratio_limit: string;
+  skip_ahead: number;
+}
+
+export interface PoolKey {
+  token0: string;
+  token1: string;
+  fee: string;
+  tick_spacing: number;
+  extension: string;
+}
+export interface Route {
+  pool_key: PoolKey;
+  sqrt_ratio_limit: string;
+  skip_ahead: number;
+}
+
+export interface PoolKey {
+  token0: string;
+  token1: string;
+  fee: string;
+  tick_spacing: number;
+  extension: string;
+}
+export interface IQuoteSwapQuery {
+  token: string;
+  otherToken: string;
+  amount: string;
+  decimal: number;
+  direction: boolean;
+}
+
+export interface IQueryType {
+  page: number;
+  limit: number;
+}
diff --git a/apps/mobile/src/styles/Colors.tsx b/apps/mobile/src/styles/Colors.tsx
index 3a4ce85c..3e7574ad 100644
--- a/apps/mobile/src/styles/Colors.tsx
+++ b/apps/mobile/src/styles/Colors.tsx
@@ -24,6 +24,22 @@ export const LightTheme = {
     messageReplyCard: '#E0E0E0',
     messageReplyCardText: '#14142C',
 
+    //Swap
+    swap_background: '#F4F9FF',
+    swap_surface: '#FFFFFF',
+    swap_cardBackground: '#F0F0F0',
+    swap_inputBackground: '#FFFFFF',
+    swap_text: '#14142C',
+    swap_text_dim: '#14142C',
+    swap_textSecondary: '#6B6B8C',
+    swap_primary: '#4FA89B',
+    swap_inputText: '#14142C',
+    swap_inputBorder: '#DDDDEE',
+    swap_inputPlaceholder: '#A1A1C7',
+    swap_buttonBackground: '#4FA89B',
+    swap_buttonText: '#FFFFFF',
+    swap_divider: '#e4e4e7',
+
     // primary: '#EC796B',
     primary: '#4FA89B',
     primaryLight: 'rgba(236,185,107, 0.1)',
@@ -85,6 +101,22 @@ export const DarkTheme = {
     messageReplyCard: '#1F1F1F',
     messageReplyCardText: '#E0E0E0',
 
+    //Swap
+    swap_background: '#1A1A1A',
+    swap_surface: '#242424',
+    swap_cardBackground: '#2C2C2C',
+    swap_inputBackground: '#1F1F1F',
+    swap_text: '#FFFFFF',
+    swap_text_dim: '#eeeeee',
+    swap_textSecondary: '#A1A1C7',
+    swap_primary: '#4FA89B',
+    swap_inputText: '#FFFFFF',
+    swap_inputBorder: '#3A3A3A',
+    swap_inputPlaceholder: '#6B6B8C',
+    swap_buttonBackground: '#4FA89B',
+    swap_buttonText: '#FFFFFF',
+    swap_divider: '#3A3A3A',
+
     // primary: '#EC796B',
     primary: '#4FA89B',
     primaryLight: 'rgba(236,185,107, 0.1)',
diff --git a/apps/mobile/src/utils/dummyData.ts b/apps/mobile/src/utils/dummyData.ts
index ae067493..9c849cee 100644
--- a/apps/mobile/src/utils/dummyData.ts
+++ b/apps/mobile/src/utils/dummyData.ts
@@ -1,4 +1,6 @@
-import {Conversation} from '../types/messages';
+import {NostrEvent} from '@nostr-dev-kit/ndk';
+
+import {ConversationType as Conversation} from '../types/messages';
 
 export const conversationsData: Conversation[] = [
   {
@@ -223,3 +225,226 @@ export const conversationsData: Conversation[] = [
     messages: [],
   },
 ];
+
+export const mockEvents: NostrEvent[] = [
+  {
+    id: 'b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1',
+    pubkey: 'b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1',
+    created_at: 1696867200,
+    kind: 34236,
+    content: 'Tutorial: How to make the perfect cappuccino at home',
+    tags: [
+      ['d', '660f9511-f3a1-52e5-b827-557766551111'],
+      ['title', 'Perfect Home Cappuccino Tutorial'],
+      ['thumb', 'https://example.com/thumbnails/cappuccino_tutorial.jpg'],
+      ['published_at', '1696867200'],
+      [
+        'alt',
+        'Step-by-step video guide showing how to make a cappuccino using a home espresso machine',
+      ],
+      [
+        'url',
+        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
+      ],
+      ['m', 'video/mp4'],
+      ['x', '3dg35eba6gc1b41f37f94c3bd6a9f40f2c272f6d2ga536f84154473049c9935'],
+      ['size', '52428800'],
+      ['duration', '480'],
+      ['dim', '1920x1080'],
+      ['p', 'e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4', 'wss://relay.coffee.com'],
+      ['t', 'coffee'],
+      ['t', 'tutorial'],
+      ['t', 'cappuccino'],
+      ['r', 'https://example.com/blog/coffee-making-tips'],
+    ],
+  },
+  {
+    id: 'c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2',
+    pubkey: 'c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2',
+    created_at: 1696953600,
+    kind: 34235,
+    content: 'Drone footage of the Amazon rainforest',
+    tags: [
+      ['d', '770g0622-g4b2-63f6-c938-668877662222'],
+      ['title', 'Amazon Rainforest Aerial View'],
+      ['thumb', 'https://example.com/thumbnails/amazon_drone.jpg'],
+      ['published_at', '1696953600'],
+      [
+        'alt',
+        'Breathtaking aerial footage of the Amazon rainforest, showcasing its vast expanse and diverse ecosystem',
+      ],
+      ['url', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4'],
+      ['m', 'video/mp4'],
+      ['x', '4eh46fca7hd2c52g48ga5d4ce7bg51g3d383g7e3hb647g265584150da0a46'],
+      ['size', '104857600'],
+      ['duration', '300'],
+      ['dim', '3840x2160'],
+      ['p', 'f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4e5', 'wss://relay.nature.com'],
+      ['t', 'amazon'],
+      ['t', 'rainforest'],
+      ['t', 'drone'],
+      ['t', 'nature'],
+      ['r', 'https://example.com/article/amazon-conservation'],
+      ['content-warning', 'May contain scenes of deforestation'],
+    ],
+  },
+  {
+    id: 'd4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3',
+    pubkey: 'd4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3',
+    created_at: 1697040000,
+    kind: 34235,
+    content: 'Live stream recording: SpaceX Starship launch attempt',
+    tags: [
+      ['d', '880h1733-h5c3-74g7-d049-779988773333'],
+      ['title', 'SpaceX Starship Launch - Live Recording'],
+      ['thumb', 'https://example.com/thumbnails/spacex_starship.jpg'],
+      ['published_at', '1697040000'],
+      [
+        'alt',
+        'Recorded live stream of SpaceX Starship launch attempt, including pre-launch preparations and commentary',
+      ],
+      ['url', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'],
+      ['m', 'video/mp4'],
+      ['x', '5fi57gdb8ie3d63h59hb6e5df8ch62h4e494h8f4ic758h376695261eb1b57'],
+      ['size', '2147483648'],
+      ['duration', '7200'],
+      ['dim', '3840x2160'],
+      ['p', 'g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4e5f6', 'wss://relay.space.com'],
+      ['p', 'h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4e5f6g7', 'wss://relay.spacex.com'],
+      ['t', 'spacex'],
+      ['t', 'starship'],
+      ['t', 'space'],
+      ['t', 'livestream'],
+      ['r', 'https://www.spacex.com/launches/'],
+      [
+        'segment',
+        '0',
+        '600',
+        'Pre-launch preparations',
+        'https://example.com/thumbnails/spacex_prep.jpg',
+      ],
+      [
+        'segment',
+        '600',
+        '6600',
+        'Launch attempt',
+        'https://example.com/thumbnails/spacex_launch.jpg',
+      ],
+      [
+        'segment',
+        '6600',
+        '7200',
+        'Post-launch analysis',
+        'https://example.com/thumbnails/spacex_analysis.jpg',
+      ],
+    ],
+  },
+  {
+    id: 'd4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3',
+    pubkey: 'd4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3',
+    created_at: 1697040000,
+    kind: 34235,
+    content: 'Live stream recording: SpaceX Starship launch attempt',
+    tags: [
+      ['d', '880h1733-h5c3-74g7-d049-779988773333'],
+      ['title', 'SpaceX Starship Launch - Live Recording'],
+      ['thumb', 'https://example.com/thumbnails/spacex_starship.jpg'],
+      ['published_at', '1697040000'],
+      [
+        'alt',
+        'Recorded live stream of SpaceX Starship launch attempt, including pre-launch preparations and commentary',
+      ],
+      [
+        'url',
+        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+      ],
+      ['m', 'video/mp4'],
+      ['x', '5fi57gdb8ie3d63h59hb6e5df8ch62h4e494h8f4ic758h376695261eb1b57'],
+      ['size', '2147483648'],
+      ['duration', '7200'],
+      ['dim', '3840x2160'],
+      ['p', 'g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4e5f6', 'wss://relay.space.com'],
+      ['p', 'h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4e5f6g7', 'wss://relay.spacex.com'],
+      ['t', 'spacex'],
+      ['t', 'starship'],
+      ['t', 'space'],
+      ['t', 'livestream'],
+      ['r', 'https://www.spacex.com/launches/'],
+      [
+        'segment',
+        '0',
+        '600',
+        'Pre-launch preparations',
+        'https://example.com/thumbnails/spacex_prep.jpg',
+      ],
+      [
+        'segment',
+        '600',
+        '6600',
+        'Launch attempt',
+        'https://example.com/thumbnails/spacex_launch.jpg',
+      ],
+      [
+        'segment',
+        '6600',
+        '7200',
+        'Post-launch analysis',
+        'https://example.com/thumbnails/spacex_analysis.jpg',
+      ],
+    ],
+  },
+  {
+    id: 'd4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3',
+    pubkey: 'd4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3',
+    created_at: 1697040000,
+    kind: 34235,
+    content: 'Live stream recording: SpaceX Starship launch attempt',
+    tags: [
+      ['d', '880h1733-h5c3-74g7-d049-779988773333'],
+      ['title', 'SpaceX Starship Launch - Live Recording'],
+      ['thumb', 'https://example.com/thumbnails/spacex_starship.jpg'],
+      ['published_at', '1697040000'],
+      [
+        'alt',
+        'Recorded live stream of SpaceX Starship launch attempt, including pre-launch preparations and commentary',
+      ],
+      [
+        'url',
+        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
+      ],
+      ['m', 'video/mp4'],
+      ['x', '5fi57gdb8ie3d63h59hb6e5df8ch62h4e494h8f4ic758h376695261eb1b57'],
+      ['size', '2147483648'],
+      ['duration', '7200'],
+      ['dim', '3840x2160'],
+      ['p', 'g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4e5f6', 'wss://relay.space.com'],
+      ['p', 'h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a1b2c3d4e5f6g7', 'wss://relay.spacex.com'],
+      ['t', 'spacex'],
+      ['t', 'starship'],
+      ['t', 'space'],
+      ['t', 'livestream'],
+      ['r', 'https://www.spacex.com/launches/'],
+      [
+        'segment',
+        '0',
+        '600',
+        'Pre-launch preparations',
+        'https://example.com/thumbnails/spacex_prep.jpg',
+      ],
+      [
+        'segment',
+        '600',
+        '6600',
+        'Launch attempt',
+        'https://example.com/thumbnails/spacex_launch.jpg',
+      ],
+      [
+        'segment',
+        '6600',
+        '7200',
+        'Post-launch analysis',
+        'https://example.com/thumbnails/spacex_analysis.jpg',
+      ],
+    ],
+  },
+];