diff --git a/next.config.mjs b/next.config.mjs
index c7615d2..0c0fa0a 100755
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,9 +2,9 @@
 const nextConfig = {
   // output: 'export',
   compiler: {
-    removeConsole: {
-      exclude: ['error'],
-    },
+    // removeConsole: {
+    //   exclude: ['error'],
+    // },
   },
   async rewrites() {
     return [
diff --git a/src/app/globals.css b/src/app/globals.css
index b293933..7903e56 100755
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -135,4 +135,5 @@ body {
 
 td, th {
   border-color: var(--chakra-colors-bg) !important;
+  vertical-align: top;
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f8e00e2..f572357 100755
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -65,7 +65,7 @@ export default function Home() {
   }
 
   function handleTabsChange(index: number) {
-    if (index === 1) {
+    if (index === 0) {
       setRoute('pools');
     } else {
       setRoute('strategies');
@@ -80,9 +80,9 @@ export default function Home() {
     (async () => {
       const tab = searchParams.get('tab');
       if (tab === 'pools') {
-        setTabIndex(1);
-      } else {
         setTabIndex(0);
+      } else {
+        setTabIndex(1);
       }
     })();
   }, [searchParams]);
@@ -184,19 +184,19 @@ export default function Home() {
             color="light_grey"
             _selected={{ color: 'purple' }}
             onClick={() => {
-              mixpanel.track('Strategies opened');
+              mixpanel.track('All pools clicked');
             }}
           >
-            Strategies✨
+            Find yields
           </Tab>
           <Tab
             color="light_grey"
             _selected={{ color: 'purple' }}
             onClick={() => {
-              mixpanel.track('All pools clicked');
+              mixpanel.track('Strategies opened');
             }}
           >
-            Find yields
+            Strategies✨
           </Tab>
         </TabList>
         <TabIndicator
@@ -208,10 +208,10 @@ export default function Home() {
         />
         <TabPanels>
           <TabPanel bg="highlight" width={'100%'} float={'left'}>
-            <Strategies />
+            <Pools />
           </TabPanel>
           <TabPanel bg="highlight" float={'left'} width={'100%'}>
-            <Pools />
+            <Strategies />
           </TabPanel>
         </TabPanels>
       </Tabs>
diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx
index 48308e2..2a25ee8 100755
--- a/src/components/Filters.tsx
+++ b/src/components/Filters.tsx
@@ -1,217 +1,400 @@
 import React from 'react';
-import Select, { StylesConfig } from 'react-select';
-import * as chroma from 'chroma.ts';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import {
-  Accordion,
-  AccordionButton,
-  AccordionItem,
-  AccordionPanel,
+  Avatar,
+  AvatarBadge,
+  AvatarGroup,
   Box,
-  Stack,
+  HStack,
+  IconButton,
+  Tag,
+  TagLabel,
   Text,
+  Tooltip,
 } from '@chakra-ui/react';
-import { HamburgerIcon } from '@chakra-ui/icons';
-import { ALL_FILTER, filters, updateFiltersAtom } from '@/store/protocols';
-
-export interface Option {
-  readonly value: string;
-  readonly label: string;
-  readonly color: string;
-  readonly isFixed?: boolean;
-  readonly isDisabled?: boolean;
-}
+import { CheckIcon, CloseIcon } from '@chakra-ui/icons';
+import {
+  ALL_FILTER,
+  filterAtoms,
+  filters,
+  updateFiltersAtom,
+} from '@/store/protocols';
+import { getTokenInfoFromName } from '@/utils';
+import { Category, PoolType } from '@/store/pools';
 
-const colourStyles: StylesConfig<Option, true> = {
-  control: (styles) => ({
-    ...styles,
-    padding: '10px 0',
-    backgroundColor: 'var(--chakra-colors-bg)',
-    borderColor: 'var(--chakra-colors-bg)',
-  }),
-  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
-    const color = chroma.color(data.color);
-    return {
-      ...styles,
-      backgroundColor: 'var(--chakra-colors-bg)',
-      color: isDisabled
-        ? '#ccc'
-        : isSelected
-          ? chroma.contrast(color, 'white') > 2
-            ? 'white'
-            : 'black'
-          : data.color,
-      cursor: isDisabled ? 'not-allowed' : 'default',
-
-      ':active': {
-        ...styles[':active'],
-        backgroundColor: !isDisabled
-          ? isSelected
-            ? data.color
-            : color.alpha(0.3).css()
-          : undefined,
-      },
-    };
-  },
-  container: (styles) => {
-    return {
-      ...styles,
-      width: '100%',
-    };
-  },
-  dropdownIndicator: (styles) => {
-    return {
-      ...styles,
-      color: 'var(--chakra-colors-purple)',
-    };
-  },
-  clearIndicator: (styles) => {
-    return {
-      ...styles,
-      color: 'var(--chakra-colors-purple)',
-    };
-  },
-  indicatorSeparator: (styles) => {
-    return {
-      ...styles,
-      backgroundColor: 'var(--chakra-colors-purple)',
-    };
-  },
-  menu: (styles) => {
-    return {
-      ...styles,
-      backgroundColor: 'var(--chakra-colors-highlight)',
-    };
-  },
-  multiValue: (styles, { data }) => {
-    const color = chroma.color(data.color);
-    return {
-      ...styles,
-      fontWeight: 'bold',
-      backgroundColor: 'none',
-      borderColor: color.alpha(0.7).css(),
-      borderWidth: '1px',
-      borderRadius: '5px',
-    };
-  },
-  multiValueLabel: (styles, { data }) => ({
-    ...styles,
-    color: data.color,
-  }),
-  multiValueRemove: (styles, { data }) => ({
-    ...styles,
-    color: data.color,
-    ':hover': {
-      backgroundColor: data.color,
-      color: 'white',
-    },
-  }),
-};
-
-export default function Filters() {
-  // const colors: readonly string[] = ['#00B8D9', '#407cd5', '#7967e5', '#FF5630',
-  // '#FF8B00','#FFC400', '#36B37E', '#00875A', '#253858', '#666666']
-
-  const colors = ['rgba(132, 132, 195, 1)'];
-  const updateFilters = useSetAtom(updateFiltersAtom);
+export function ProtocolFilters() {
+  const protocolsFilter = useAtomValue(filterAtoms.protocolsAtom);
 
-  const protocolOptions: readonly Option[] = filters.protocols.map(
-    (p, index) => {
-      return { value: p, label: p, color: colors[index % colors.length] };
-    },
-  );
+  function isProtocolSelected(protocolName: string) {
+    return (
+      protocolsFilter.includes(ALL_FILTER) ||
+      protocolsFilter.includes(protocolName)
+    );
+  }
 
-  const categories: readonly Option[] = filters.categories.map((p, index) => {
-    return { value: p, label: p, color: colors[index % colors.length] };
-  });
+  function atleastOneProtocolSelected() {
+    return protocolsFilter.length > 0;
+  }
+  const updateFilters = useSetAtom(updateFiltersAtom);
 
-  const poolTypes: readonly Option[] = filters.types.map((p, index) => {
-    return { value: p, label: p, color: colors[index % colors.length] };
-  });
   return (
-    <Accordion allowToggle>
-      <AccordionItem borderTop="0px" borderBottom="1px" borderColor={'bg'}>
-        <h2>
-          <AccordionButton fontWeight={'bold'}>
-            <Box
-              as="span"
-              flex="1"
-              textAlign="right"
-              color="purple"
-              marginRight="10px"
-            >
-              Filters
-            </Box>
-            <HamburgerIcon color="purple" />
-          </AccordionButton>
-        </h2>
-        <AccordionPanel pb={4} bg="highlight" overflow={'visible'}>
-          <Text color="purple" fontSize={'14px'} width="100%">
-            Protocols:
-          </Text>
-          <Select
-            closeMenuOnSelect={false}
-            defaultValue={[...protocolOptions]}
-            isMulti
-            placeholder="Select Protocols"
-            options={protocolOptions}
-            styles={colourStyles}
-            onChange={(x, b) => {
-              console.log(x, Array.isArray(x), b);
-              if (filters.protocols.length === x.length) {
-                updateFilters('protocols', [ALL_FILTER]);
-              } else {
-                updateFilters(
-                  'protocols',
-                  x.map((p) => p.value),
-                );
+    <Box width={'100%'}>
+      {filters.protocols.map((p) => (
+        <Tag
+          size="lg"
+          borderRadius="full"
+          padding={'2px'}
+          bg="color1"
+          marginRight={'10px'}
+          marginBottom={'10px'}
+          as="button"
+          onClick={() => {
+            console.log('clicked', p.name);
+            // generated list of protocols selected. All means array of all protocols.
+            const selectedProtocols = protocolsFilter.includes(ALL_FILTER)
+              ? filters.protocols.map((p) => p.name)
+              : protocolsFilter;
+
+            let updatedProtocols = [];
+            if (selectedProtocols.includes(p.name)) {
+              updatedProtocols = selectedProtocols.filter((x) => x !== p.name);
+            } else {
+              updatedProtocols = [...selectedProtocols, p.name];
+            }
+            if (updatedProtocols.length === filters.protocols.length) {
+              updatedProtocols = [ALL_FILTER];
+            }
+            console.log('updateFilters', updatedProtocols);
+            updateFilters('protocols', updatedProtocols);
+          }}
+          key={p.name}
+          _hover={{
+            boxShadow: '0px 0px 5px var(--chakra-colors-color1)',
+          }}
+        >
+          <Tooltip label={p.name}>
+            <Avatar
+              src={`${p.logo}`}
+              border={'1px solid var(--chakra-colors-bg)'}
+              size="sm"
+              name={p.name}
+              filter={
+                isProtocolSelected(p.name)
+                  ? 'none'
+                  : 'grayscale(100%) sepia(20%) hue-rotate(210deg) brightness(1.2) invert(0.2)'
               }
+            />
+          </Tooltip>
+        </Tag>
+      ))}
+
+      {/* Clear all or select all button */}
+      <Tag
+        size="lg"
+        borderRadius="full"
+        padding={'2px'}
+        bg="bg"
+        marginRight={'5px'}
+        as="button"
+        marginTop={'1px'}
+      >
+        <Tooltip
+          label={
+            atleastOneProtocolSelected()
+              ? 'Clear all DApps'
+              : 'Select all DApps'
+          }
+        >
+          <IconButton
+            isRound={true}
+            size={'sm'}
+            variant="solid"
+            bg={atleastOneProtocolSelected() ? 'bg' : 'purple'}
+            color={atleastOneProtocolSelected() ? 'purple' : 'bg'}
+            fontSize="10px"
+            aria-label={
+              atleastOneProtocolSelected() ? 'Clear all' : 'Select all'
+            }
+            icon={atleastOneProtocolSelected() ? <CloseIcon /> : <CheckIcon />}
+            onClick={() => {
+              updateFilters(
+                'protocols',
+                atleastOneProtocolSelected() ? [] : [ALL_FILTER],
+              );
+            }}
+            _hover={{
+              bg: atleastOneProtocolSelected() ? 'bg' : 'purple',
+              boxShadow: '0px 0px 5px var(--chakra-colors-color1)',
             }}
           />
+        </Tooltip>
+      </Tag>
+    </Box>
+  );
+}
+
+export function CategoryFilters() {
+  const updateFilters = useSetAtom(updateFiltersAtom);
+  const categoriesFilter = useAtomValue(filterAtoms.categoriesAtom);
+  const riskLevelFilters = useAtomValue(filterAtoms.riskAtom);
+  const poolTypeFilters = useAtomValue(filterAtoms.typesAtom);
+
+  function updateCategory(category: Category) {
+    const existingCategories = categoriesFilter.includes(ALL_FILTER)
+      ? []
+      : categoriesFilter;
+    console.log('filter34', 'categories', existingCategories);
+    if (existingCategories.includes(category)) {
+      const newFilters = existingCategories.filter(
+        (x) => x !== category.valueOf(),
+      );
+      updateFilters(
+        'categories',
+        newFilters.length === 0 ? [ALL_FILTER] : newFilters,
+      );
+    } else {
+      updateFilters('categories', [...existingCategories, category.valueOf()]);
+    }
+  }
+
+  function updateRiskLevel(riskLevels: string[]) {
+    let existingRiskLevels = riskLevelFilters.includes(ALL_FILTER)
+      ? []
+      : riskLevelFilters;
+    console.log('filter34', 'riskLevels', existingRiskLevels);
+    riskLevels.map((riskLevel) => {
+      if (existingRiskLevels.includes(riskLevel)) {
+        const newFilters = existingRiskLevels.filter((x) => x !== riskLevel);
+        existingRiskLevels =
+          newFilters.length === 0 ? [ALL_FILTER] : newFilters;
+        updateFilters('risk', existingRiskLevels);
+      } else {
+        existingRiskLevels = [...existingRiskLevels, riskLevel];
+        updateFilters('risk', existingRiskLevels);
+      }
+    });
+  }
+
+  function updatePoolType(types: PoolType[]) {
+    let existingPoolTypes = poolTypeFilters.includes(ALL_FILTER)
+      ? []
+      : poolTypeFilters;
+    console.log('filter34', 'poolType', existingPoolTypes);
+    types.map((type) => {
+      if (existingPoolTypes.includes(type.valueOf())) {
+        const newFilters = existingPoolTypes.filter(
+          (x) => x !== type.valueOf(),
+        );
+        existingPoolTypes = newFilters.length === 0 ? [ALL_FILTER] : newFilters;
+        updateFilters('poolTypes', existingPoolTypes);
+      } else {
+        existingPoolTypes = [...existingPoolTypes, type.valueOf()];
+        updateFilters('poolTypes', existingPoolTypes);
+      }
+    });
+  }
+
+  function isLowRisk() {
+    return riskLevelFilters.includes('1') || riskLevelFilters.includes('2');
+  }
+
+  return (
+    <Box width={'100%'}>
+      {/* Stable pools */}
+      <Tag
+        size="lg"
+        borderRadius="full"
+        mr={'10px'}
+        padding={'6px 10px'}
+        as={'button'}
+        onClick={() => {
+          updateCategory(Category.Stable);
+        }}
+        bg={
+          categoriesFilter.includes(Category.Stable.valueOf())
+            ? 'purple'
+            : 'color1'
+        }
+        marginBottom={'10px'}
+      >
+        <AvatarGroup size={'xs'} spacing={'-15px'} mr={'5px'}>
+          <Avatar
+            src={getTokenInfoFromName('USDC').logo}
+            name="USDC"
+            key={'USDC'}
+          />
+          <Avatar
+            src={getTokenInfoFromName('USDT').logo}
+            name="USDC"
+            key={'USDT'}
+          />
+        </AvatarGroup>
+        <TagLabel
+          color={
+            categoriesFilter.includes(Category.Stable.valueOf())
+              ? 'bg'
+              : 'color2'
+          }
+        >
+          {Category.Stable.valueOf()}
+        </TagLabel>
+      </Tag>
+
+      {/* STRK pools */}
+      <Tag
+        size="lg"
+        borderRadius="full"
+        mr={'10px'}
+        padding={'6px 10px'}
+        as={'button'}
+        onClick={() => {
+          updateCategory(Category.STRK);
+        }}
+        bg={
+          categoriesFilter.includes(Category.STRK.valueOf())
+            ? 'purple'
+            : 'color1'
+        }
+        marginBottom={'10px'}
+      >
+        <AvatarGroup size={'xs'} spacing={'-15px'} mr={'5px'}>
+          <Avatar
+            src={getTokenInfoFromName('STRK').logo}
+            name="STRK"
+            key={'STRK'}
+          />
+        </AvatarGroup>
+        <TagLabel
+          color={
+            categoriesFilter.includes(Category.STRK.valueOf()) ? 'bg' : 'color2'
+          }
+        >
+          {Category.STRK.valueOf()}
+        </TagLabel>
+      </Tag>
+
+      {/* Low risk pools */}
+      <Tag
+        size="lg"
+        borderRadius="full"
+        mr={'10px'}
+        padding={'6px 10px'}
+        as={'button'}
+        onClick={() => {
+          updateRiskLevel(['1', '2']);
+        }}
+        bg={isLowRisk() ? 'purple' : 'color1'}
+        marginBottom={'10px'}
+      >
+        <AvatarGroup size={'xs'} spacing={'-15px'} mr={'5px'}>
+          {['USDC', 'USDT', 'STRK', 'ETH'].map((token, index) => (
+            <Avatar
+              src={getTokenInfoFromName(token).logo}
+              name={token}
+              key={token}
+            >
+              {index == 0 && <AvatarBadge boxSize="1.25em" bg="green.500" />}
+            </Avatar>
+          ))}
+        </AvatarGroup>
+        <TagLabel color={isLowRisk() ? 'bg' : 'color2'}>Low risk</TagLabel>
+      </Tag>
+
+      {/* DEXes */}
+      <Tag
+        size="lg"
+        borderRadius="full"
+        mr={'10px'}
+        padding={'8px 10px'}
+        as={'button'}
+        onClick={() => {
+          updatePoolType([PoolType.DEXV2, PoolType.DEXV3]);
+        }}
+        bg={
+          poolTypeFilters.includes(PoolType.DEXV2.valueOf()) ||
+          poolTypeFilters.includes(PoolType.DEXV3.valueOf())
+            ? 'purple'
+            : 'color1'
+        }
+        marginBottom={'10px'}
+      >
+        <TagLabel
+          color={
+            poolTypeFilters.includes(PoolType.DEXV2.valueOf()) ||
+            poolTypeFilters.includes(PoolType.DEXV3.valueOf())
+              ? 'bg'
+              : 'color2'
+          }
+        >
+          DEX Pools
+        </TagLabel>
+      </Tag>
+
+      {/* Lending */}
+      <Tag
+        size="lg"
+        borderRadius="full"
+        mr={'10px'}
+        padding={'8px 10px'}
+        as={'button'}
+        onClick={() => {
+          updatePoolType([PoolType.Lending]);
+        }}
+        bg={poolTypeFilters.includes(PoolType.Lending) ? 'purple' : 'color1'}
+        marginBottom={'10px'}
+      >
+        <TagLabel
+          color={poolTypeFilters.includes(PoolType.Lending) ? 'bg' : 'color2'}
+        >
+          Lending Pools
+        </TagLabel>
+      </Tag>
+
+      {/* Derivatives */}
+      <Tag
+        size="lg"
+        borderRadius="full"
+        mr={'10px'}
+        padding={'8px 10px'}
+        as={'button'}
+        onClick={() => {
+          updatePoolType([PoolType.Derivatives]);
+        }}
+        bg={
+          poolTypeFilters.includes(PoolType.Derivatives) ? 'purple' : 'color1'
+        }
+        marginBottom={'10px'}
+      >
+        <TagLabel
+          color={
+            poolTypeFilters.includes(PoolType.Derivatives) ? 'bg' : 'color2'
+          }
+        >
+          Derivative Pools
+        </TagLabel>
+      </Tag>
 
-          <Stack marginTop={'5px'} direction={{ base: 'column', md: 'row' }}>
-            <Box width={{ base: '100%', md: '50%' }}>
-              <Text color="purple" fontSize={'14px'} width="100%">
-                Categories:
-              </Text>
-              <Select
-                closeMenuOnSelect={false}
-                defaultValue={[...categories]}
-                isMulti
-                placeholder="Select Categories"
-                options={categories}
-                styles={colourStyles}
-                onChange={(x, b) => {
-                  console.log(x, Array.isArray(x), b);
-                  updateFilters(
-                    'categories',
-                    x.map((p) => p.value),
-                  );
-                }}
-              />
-            </Box>
-            <Box width={{ base: '100%', md: '50%' }}>
-              <Text color="purple" fontSize={'14px'} width="100%">
-                Protocol types:
-              </Text>
-              <Select
-                closeMenuOnSelect={false}
-                defaultValue={[...poolTypes]}
-                isMulti
-                placeholder="Select Pool types"
-                options={poolTypes}
-                styles={colourStyles}
-                onChange={(x, b) => {
-                  updateFilters(
-                    'poolTypes',
-                    x.map((p) => p.value),
-                  );
-                }}
-              />
-            </Box>
-          </Stack>
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
+      {/* Reset */}
+      <Tag
+        size="lg"
+        bg="color1"
+        borderRadius="full"
+        mr={'10px'}
+        padding={'8px 10px'}
+        as={'button'}
+        onClick={() => {
+          updateFilters('categories', [ALL_FILTER]);
+          updateFilters('risk', [ALL_FILTER]);
+          updateFilters('poolTypes', [ALL_FILTER]);
+        }}
+        marginBottom={'10px'}
+      >
+        <TagLabel color={'color2'}>
+          <HStack>
+            <Text>Reset</Text> <CloseIcon fontSize={'10px'} />
+          </HStack>
+        </TagLabel>
+      </Tag>
+    </Box>
   );
 }
diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx
index f77375e..da02b3d 100755
--- a/src/components/Pools.tsx
+++ b/src/components/Pools.tsx
@@ -1,25 +1,19 @@
 'use client';
 
-import { PoolInfo } from '@/store/pools';
 import {
-  Avatar,
-  AvatarGroup,
   Box,
-  Card,
-  CardBody,
   Container,
-  Flex,
-  HStack,
-  Heading,
-  LinkOverlay,
   Skeleton,
-  Spinner,
   Stack,
+  Table,
+  Tbody,
   Text,
-  Tooltip,
+  Th,
+  Thead,
+  Tr,
 } from '@chakra-ui/react';
 import { useAtomValue } from 'jotai';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   Pagination,
   PaginationContainer,
@@ -29,13 +23,13 @@ import {
   PaginationPage,
   PaginationPageGroup,
 } from '@ajna/pagination';
-import Filters from '@/components/Filters';
-import mixpanel from 'mixpanel-browser';
+import { CategoryFilters, ProtocolFilters } from '@/components/Filters';
 import {
   allPoolsAtomUnSorted,
   filteredPools,
   sortPoolsAtom,
 } from '@/store/protocols';
+import YieldCard from './YieldCard';
 
 export default function Pools() {
   const allPools = useAtomValue(allPoolsAtomUnSorted);
@@ -53,150 +47,18 @@ export default function Pools() {
 
   const sortedPools = useAtomValue(sortPoolsAtom);
 
-  useEffect(() => {
-    console.log('sortedPools', sortedPools);
-  }, [sortedPools]);
-  useEffect(() => {
-    console.log('pages', currentPage, setCurrentPage, pagesCount, pages);
-  }, [currentPage, setCurrentPage, pagesCount, pages]);
-
-  function GetRiskLevel(poolName: string) {
-    let color = '';
-    let bgColor = '';
-    let count = 0;
-    let tooltipLabel = '';
-    const checkToken = (tokens: string[]) => {
-      const regex = new RegExp(tokens.join('|'), 'i');
-      return regex.test(poolName.toLowerCase());
-    };
-
-    if (checkToken(['eth', 'strk'])) {
-      color = 'rgba(255, 146, 0, 1)';
-      bgColor = 'rgba(255, 146, 0, 0.3)';
-      count = 3;
-      tooltipLabel = 'Medium risk';
-    } else if (checkToken(['usdt', 'usdc'])) {
-      color = 'rgba(131, 241, 77, 1)';
-      bgColor = 'rgba(131, 241, 77, 0.3)';
-      count = 1;
-      tooltipLabel = 'Low risk';
-    } else {
-      color = 'rgba(255, 32, 32, 1)';
-      bgColor = 'rgba(255, 32, 32, 0.3)';
-      count = 5;
-      tooltipLabel = 'High risk';
-    }
-
-    return (
-      <>
-        <Box>
-          <Tooltip hasArrow label={tooltipLabel} bg="gray.300" color="black">
-            <Box
-              width={'50%'}
-              marginTop={'0px'}
-              position={'relative'}
-              display={{ base: 'none', md: 'flex' }}
-              flexDirection={'column'}
-              alignItems={'center'}
-              justifyContent={'flex-start'}
-            >
-              <Box
-                width={'100%'}
-                display="flex"
-                alignItems="center"
-                justifyContent={{ base: 'flex-start', md: 'center' }}
-                padding={'4px'}
-                height={'100%'}
-                position={'relative'}
-              >
-                <Stack direction="row" spacing={1}>
-                  {[...Array(5)].map((_, index) => (
-                    <Box
-                      key={index}
-                      width="4px"
-                      height="18px"
-                      borderRadius="md"
-                      bg={index < count ? color : '#29335C'}
-                    />
-                  ))}
-                </Stack>
-              </Box>
-              <Box
-                position={'absolute'}
-                backgroundColor={bgColor}
-                opacity={0.3}
-                filter={'blur(30.549999237060547px)'}
-                right={{ base: '-50', md: '-37px' }}
-                bottom={'-80px'}
-                width={'94px'}
-                height={'94px'}
-                zIndex={0}
-              />
-            </Box>
-          </Tooltip>
-        </Box>
-      </>
-    );
-  }
-
-  function getAPRWithToolTip(pool: PoolInfo) {
-    const tip = (
-      <Box width={'300px'}>
-        {pool.aprSplits.map((split) => {
-          if (split.apr === 0) {
-            return (
-              <Text key={split.title}>
-                {split.title}: {split.description}
-              </Text>
-            );
-          }
-          return (
-            <Flex width={'100%'} key={split.title}>
-              <Text key="1" width={'70%'}>
-                {split.title}{' '}
-                {split.description ? `(${split.description})` : ''}
-              </Text>
-              <Text fontSize={'xs'} width={'30%'} textAlign={'right'} key="2">
-                {split.apr === 'Err' ? split.apr : (split.apr * 100).toFixed(2)}
-                %
-              </Text>
-            </Flex>
-          );
-        })}
-      </Box>
-    );
-    return (
-      <Tooltip hasArrow label={tip} bg="gray.300" color="black">
-        <Box
-          width={{ base: '100%', md: '50%' }}
-          marginRight={'0px'}
-          marginLeft={{ base: 'auto', md: '0px' }}
-          display={'flex'}
-          justifyContent={{ base: 'flex-end', md: 'center' }}
-        >
-          {pool.isLoading && <Spinner />}
-          {!pool.isLoading && (
-            <>
-              <Text
-                textAlign={{ base: 'right', md: 'center' }}
-                color="cyan"
-                fontSize={'20px'}
-                fontWeight={'bolder'}
-              >
-                {(pool.apr * 100).toFixed(2)}%
-              </Text>
-            </>
-          )}
-        </Box>
-      </Tooltip>
-    );
-  }
-
   return (
     <Box float="left" width={'100%'}>
-      <Filters />
-      {
-        <Container width={'100%'} float={'left'} padding="0px">
+      <ProtocolFilters />
+      <Box width={'100%'} marginTop={'10px'}>
+        <Box width={{ base: '100%', md: '70%' }} float={'left'}>
+          <CategoryFilters />
+        </Box>
+        <Container
+          float={'left'}
+          padding="0px"
+          width={{ base: '100%', md: '30%' }}
+        >
           <Pagination
             pagesCount={pagesCount}
             currentPage={currentPage}
@@ -231,169 +93,35 @@ export default function Pools() {
             </PaginationContainer>
           </Pagination>
         </Container>
-      }
+      </Box>
 
       <Container width="100%" float={'left'} padding={'0px'} marginTop={'10px'}>
-        <Card variant={'filled'} bg="opacity_50p" color={'color2'}>
-          <CardBody paddingTop={'5px'} paddingBottom={'5px'}>
-            <HStack width={'100%'}>
-              <Stack
-                direction={{ base: 'column', md: 'row' }}
-                width={{ base: '50%', md: '60%' }}
-              >
-                <Heading
-                  width={{ base: '50%', md: '33%' }}
-                  size={{ base: 'xs', md: 'md' }}
-                >
-                  Pool
-                </Heading>
-                <Heading
-                  width={'50%'}
-                  size="md"
-                  textAlign={'center'}
-                  display={{ base: 'none', md: 'block' }}
-                >
-                  STRK APY(%)
-                </Heading>
-              </Stack>
-              <Stack
-                direction={{ base: 'column', md: 'row' }}
-                width={{ base: '50%', md: '40%' }}
-              >
-                <Heading
-                  width={'100%'}
-                  size="xs"
-                  textAlign={'right'}
-                  display={{ base: 'block', md: 'none' }}
-                >
-                  STRK APY(%)
-                </Heading>
-                <Heading
-                  width={'50%'}
-                  size="md"
-                  textAlign={'center'}
-                  display={{ base: 'none', md: 'block' }}
-                >
-                  Risk
-                </Heading>
-                <Heading
-                  width={{ base: '100%', md: '50%' }}
-                  size={{ base: 'xs', md: 'md' }}
-                  textAlign={'right'}
-                >
-                  TVL($)
-                </Heading>
-              </Stack>
-            </HStack>
-          </CardBody>
-        </Card>
-        {pools.length > 0 && (
-          <Stack spacing="4" position={'relative'}>
-            {pools.map((pool, index) => (
-              <Card
-                key={`${pool.pool.name}_${pool.protocol.name}`}
-                variant={'filled'}
-                borderRadius={'4px'}
-                textStyle="custom"
-                overflowY={'hidden'}
-                bg={index % 2 === 0 ? 'color1_50p' : 'color2_50p'}
-                color="white"
-              >
-                <CardBody
-                  padding={{ base: '15px', md: '20px 32px' }}
-                  minHeight={'100px'}
-                  display={'flex'}
-                  alignItems={'center'}
-                >
-                  <HStack
-                    width={'100%'}
-                    alignItems={{ base: 'flex-start', md: 'center' }}
-                    justifyContent={'space-between'}
-                  >
-                    <Stack
-                      direction={{ base: 'column', md: 'row' }}
-                      width={{ base: '50%', md: '60%' }}
-                      alignItems={{ base: 'flex-start', md: 'center' }}
-                    >
-                      <Box
-                        width={{ base: '100%', md: '50%' }}
-                        position={'relative'}
-                      >
-                        <LinkOverlay
-                          href={pool.protocol.link}
-                          width={'100%'}
-                          borderWidth={'0px'}
-                          target="_blank"
-                          onClick={() => {
-                            mixpanel.track('Pool clicked', {
-                              pool: pool.pool.name,
-                              protocol: pool.protocol.name,
-                              yield: pool.apr,
-                            });
-                          }}
-                        >
-                          <Flex alignItems={'center'}>
-                            <AvatarGroup size="xs" max={2} marginRight={'10px'}>
-                              {pool.pool.logos.map((logo) => (
-                                <Avatar key={logo} src={logo} />
-                              ))}
-                            </AvatarGroup>
-                            <Heading size="xs">{pool.pool.name}</Heading>
-                          </Flex>
-                          <Heading
-                            size="xs"
-                            marginTop={'12px'}
-                            color="color1_light"
-                            display={'flex'}
-                          >
-                            <Avatar
-                              size="2xs"
-                              bg={'black'}
-                              name="Dan Abrahmov"
-                              src={pool.protocol.logo}
-                              marginRight={'6px'}
-                            />
-                            <Text fontWeight={600} color="grey_text">
-                              {pool.protocol.name}
-                            </Text>
-                          </Heading>
-                        </LinkOverlay>
-                      </Box>
-                      <Box
-                        width={'20%'}
-                        display={{ base: 'none', md: 'block' }}
-                      >
-                        {getAPRWithToolTip(pool)}
-                      </Box>
-                    </Stack>
-                    <Stack
-                      direction={{ base: 'column', md: 'row' }}
-                      width={{ base: '50%', md: '30%' }}
-                      alignItems={{ base: 'flex-start', md: 'center' }}
-                      justifyContent={'space-between'}
-                    >
-                      <Box
-                        width={'100%'}
-                        display={{ base: 'block', md: 'none' }}
-                        justifyContent={'flex-end'}
-                      >
-                        {getAPRWithToolTip(pool)}
-                      </Box>
-                      {GetRiskLevel(pool.pool.name)}
-                      <Text
-                        width={{ base: '100%', md: '50%' }}
-                        textAlign={'right'}
-                        fontWeight={600}
-                      >
-                        ${Math.round(pool.tvl).toLocaleString()}
-                      </Text>
-                    </Stack>
-                  </HStack>
-                </CardBody>
-              </Card>
-            ))}
-          </Stack>
-        )}
+        <Table variant="simple">
+          <Thead display={{ base: 'none', md: 'table-header-group' }}>
+            <Tr fontSize={'18px'} color={'white'} bg="bg">
+              <Th>Pool name</Th>
+              <Th textAlign={'right'}>APY</Th>
+              <Th textAlign={'right'}>Risk</Th>
+              <Th textAlign={'right'}>TVL</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {allPools.length > 0 && (
+              <>
+                {pools.map((pool, index) => {
+                  return (
+                    <YieldCard
+                      key={pool.pool.id}
+                      pool={pool}
+                      index={index}
+                      showProtocolName={true}
+                    />
+                  );
+                })}
+              </>
+            )}
+          </Tbody>
+        </Table>
         {allPools.length > 0 && pools.length === 0 && (
           <Box padding="10px 0" width={'100%'} float={'left'}>
             <Text color="light_grey" textAlign={'center'}>
diff --git a/src/components/Strategies.tsx b/src/components/Strategies.tsx
index 789dbfe..a428809 100755
--- a/src/components/Strategies.tsx
+++ b/src/components/Strategies.tsx
@@ -1,47 +1,30 @@
 import CONSTANTS from '@/constants';
-import { StrategyInfo, strategiesAtom } from '@/store/strategies.atoms';
-import { getDisplayCurrencyAmount } from '@/utils';
-import { AddIcon } from '@chakra-ui/icons';
+import { strategiesAtom } from '@/store/strategies.atoms';
 import {
-  Avatar,
-  Badge,
   Box,
-  Button,
   Container,
-  Grid,
-  GridItem,
-  HStack,
-  Heading,
-  Icon,
-  Image,
   Link,
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverTrigger,
   Skeleton,
   Stack,
   Table,
   Tbody,
-  Td,
   Text,
   Th,
   Thead,
-  Tooltip,
   Tr,
 } from '@chakra-ui/react';
 import { useAtomValue } from 'jotai';
-import React from 'react';
-import mixpanel from 'mixpanel-browser';
+import React, { useMemo } from 'react';
 import TVL from './TVL';
-import shield from '@/assets/shield.svg';
 import { userStatsAtom } from '@/store/utils.atoms';
-import { IStrategyProps, StrategyLiveStatus } from '@/strategies/IStrategy';
-import { allPoolsAtomUnSorted } from '@/store/protocols';
-import { FaWallet } from 'react-icons/fa';
+import {
+  allPoolsAtomUnSorted,
+  filteredPools,
+  sortPoolsAtom,
+} from '@/store/protocols';
 import { addressAtom } from '@/store/claims.atoms';
+import { usePagination } from '@ajna/pagination';
+import { YieldStrategyCard } from './YieldCard';
 
 export default function Strategies() {
   const allPools = useAtomValue(allPoolsAtomUnSorted);
@@ -49,361 +32,19 @@ export default function Strategies() {
   const { data: userData } = useAtomValue(userStatsAtom);
   const address = useAtomValue(addressAtom);
 
-  function getStratCardBg(strat: IStrategyProps, index: number) {
-    if (
-      strat.liveStatus == StrategyLiveStatus.ACTIVE ||
-      strat.liveStatus == StrategyLiveStatus.NEW
-    ) {
-      return index % 2 === 0 ? 'color1_50p' : 'color2_50p';
-    }
-    return 'bg';
-  }
-
-  function getStratCardBgHover(strat: IStrategyProps, index: number) {
-    if (strat.liveStatus == StrategyLiveStatus.ACTIVE) {
-      return index % 2 === 0 ? 'color1_65p' : 'color2_65p';
-    }
-    return 'bg';
-  }
-
-  function getStratCardBadgeBg(strat: IStrategyProps) {
-    if (strat.liveStatus === StrategyLiveStatus.NEW) {
-      return 'cyan';
-    } else if (strat.liveStatus === StrategyLiveStatus.COMING_SOON) {
-      return 'yellow';
-    }
-    return 'bg';
-  }
-
-  function DepositButton(strat: StrategyInfo) {
-    // const { isOpen, onOpen, onClose } = useDisclosure()
-    return (
-      <Box>
-        <Avatar size="xs" src={strat.holdingTokens[0].logo} />
-        <Box
-          float={'left'}
-          marginTop={{ base: '7px', md: '15px' }}
-          width={{ base: 'calc(100% - 40px)', md: 'calc(100% - 80px)' }}
-          opacity={'0.5'}
-          fontSize={'15px'}
-        >
-          {strat.description}
-        </Box>
-        <Popover>
-          <PopoverTrigger>
-            <Button
-              variant={'solid'}
-              size={'sm'}
-              bg="highlight"
-              color="cyan"
-              float={'right'}
-              marginTop={'10px'}
-              _hover={{
-                backgroundColor: 'bg',
-              }}
-              onClick={() => {
-                mixpanel.track('Click one click deposit', { name: strat.name });
-              }}
-            >
-              <AddIcon />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent bg="highlight" borderColor={'highlight'}>
-            <PopoverArrow />
-            <PopoverCloseButton />
-            <PopoverBody marginTop={'20px'}>
-              <Text fontSize={'14px'}>
-                Thanks for showing interest in{' '}
-                <b>`One Click Deposit` feature</b>. We are developing this as
-                you read this message and will be available soon. The button is
-                to let you know that we will be supporting this soon. 😎
-              </Text>
-
-              <Text fontSize={'14px'} color="light_grey" marginTop={'10px'}>
-                <b>
-                  Join our Telegram group to get instant updates. Link on the
-                  top.
-                </b>
-              </Text>
-            </PopoverBody>
-          </PopoverContent>
-        </Popover>
-      </Box>
-    );
-  }
+  const _filteredPools = useAtomValue(filteredPools);
+  const ITEMS_PER_PAGE = 15;
+  const { currentPage, setCurrentPage, pagesCount, pages } = usePagination({
+    pagesCount: Math.floor(_filteredPools.length / ITEMS_PER_PAGE) + 1,
+    initialState: { currentPage: 1 },
+  });
 
-  function GetRiskLevel(riskFactor: number) {
-    let color = '';
-    let bgColor = '';
-    let count = 0;
-    let tooltipLabel = '';
+  const pools = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    return _filteredPools.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+  }, [_filteredPools, currentPage]);
 
-    if (riskFactor <= 2) {
-      color = 'rgba(131, 241, 77, 1)';
-      bgColor = 'rgba(131, 241, 77, 0.3)';
-      count = 1;
-      tooltipLabel = 'Low risk';
-    } else if (riskFactor < 4) {
-      color = 'rgba(255, 146, 0, 1)';
-      bgColor = 'rgba(255, 146, 0, 0.3)';
-      count = 3;
-      tooltipLabel = 'Medium risk';
-    } else {
-      color = 'rgba(255, 32, 32, 1)';
-      bgColor = 'rgba(255, 32, 32, 0.3)';
-      count = 5;
-      tooltipLabel = 'High risk';
-    }
-
-    return (
-      <Box
-        width="100%"
-        display="flex"
-        justifyContent={'flex-end'}
-        alignContent={'flex-end'}
-      >
-        <Tooltip hasArrow label={tooltipLabel} bg="gray.300" color="black">
-          <Box
-            position={'relative'}
-            display={'flex'}
-            flexDirection={'column'}
-            alignSelf={{ base: 'left', md: 'center' }}
-            justifyContent={'flex-start'}
-          >
-            <Box
-              width={'100%'}
-              display="flex"
-              alignItems="center"
-              justifyContent={{ base: 'flex-start', md: 'center' }}
-              padding={'4px 0px'}
-              height={'100%'}
-              position={'relative'}
-            >
-              <Stack direction="row" spacing={1}>
-                {[...Array(5)].map((_, index) => (
-                  <Box
-                    key={index}
-                    width="4px"
-                    height="18px"
-                    borderRadius="md"
-                    bg={
-                      index < count ? color : 'var(--chakra-colors-opacity_50p)'
-                    }
-                  />
-                ))}
-              </Stack>
-            </Box>
-            <Box
-              position={'absolute'}
-              backgroundColor={bgColor}
-              opacity={0.3}
-              filter={'blur(30.549999237060547px)'}
-              right={{ base: '-50', md: '-37px' }}
-              bottom={'-80px'}
-              width={'94px'}
-              height={'94px'}
-              zIndex={0}
-            />
-          </Box>
-        </Tooltip>
-      </Box>
-    );
-  }
-
-  function getStrategyWiseInfo(id: string) {
-    const amount = userData?.strategyWise.find((item) => item.id === id);
-    return amount?.usdValue ? amount?.usdValue : 0;
-  }
-
-  function StrategyCard(props: { strat: StrategyInfo; index: number }) {
-    const { strat, index } = props;
-
-    return (
-      <Tr
-        color={'white'}
-        bg={index % 2 == 0 ? 'color1_50p' : 'color2_50p'}
-        display={{ base: 'none', md: 'table-row' }}
-      >
-        <Td>
-          <StrategyInfo strat={strat} />
-        </Td>
-        <Td>
-          <StrategyAPY strat={strat} />
-        </Td>
-        <Td>{GetRiskLevel(strat.riskFactor)}</Td>
-        <Td>
-          <StrategyTVL strat={strat} />
-        </Td>
-      </Tr>
-    );
-  }
-
-  function StrategyInfo(props: { strat: IStrategyProps }) {
-    const { strat } = props;
-    return (
-      <HStack spacing={2}>
-        <Avatar size={'xs'} src={strat.holdingTokens[0].logo} />
-        <Heading size="sm" marginTop={'2px'}>
-          {strat.name}
-        </Heading>
-        {strat.liveStatus != StrategyLiveStatus.ACTIVE && (
-          <Badge
-            ml="1"
-            bg={getStratCardBadgeBg(strat)}
-            fontFamily={'sans-serif'}
-            padding="2px 8px"
-            textTransform="capitalize"
-            fontWeight={500}
-          >
-            {strat.liveStatus.valueOf()}
-          </Badge>
-        )}
-        {strat.isLive() && (
-          <Tooltip label="Audited smart contract. Click to view the audit report.">
-            <Link href={CONSTANTS.AUDIT_REPORT} target="_blank">
-              <Box
-                width={'24px'}
-                height={'24px'}
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                backgroundColor={'rgba(0, 0, 0, 0.2)'}
-                borderRadius={'50%'}
-              >
-                <Image src={shield.src} alt="badge" />
-              </Box>
-            </Link>
-          </Tooltip>
-        )}
-      </HStack>
-    );
-  }
-
-  function StrategyAPY(props: { strat: IStrategyProps }) {
-    const { strat } = props;
-    return (
-      <Box width={'100%'} marginBottom={'5px'}>
-        <Tooltip label="Includes fees & rewards earning potential">
-          <Text textAlign={'right'} color="#fff" fontWeight={600}>
-            {(strat.netYield * 100).toFixed(2)}%
-          </Text>
-        </Tooltip>
-        <Tooltip label="Shows the increased capital efficiency of investments compared to direct deposit in popular lending protocols">
-          <Box width={'100%'}>
-            <Box float={'right'} display={'flex'} fontSize={'13px'}>
-              <Text color="#FCC01E" textAlign={'right'}>
-                ⚡
-              </Text>
-              <Text
-                width="100%"
-                color="cyan"
-                textAlign={'right'}
-                fontWeight={600}
-              >
-                {strat.leverage.toFixed(1)}X
-              </Text>
-            </Box>
-          </Box>
-        </Tooltip>
-      </Box>
-    );
-  }
-
-  function StrategyTVL(props: { strat: IStrategyProps }) {
-    const { strat } = props;
-    const tvlInfo = useAtomValue(props.strat.tvlAtom);
-
-    return (
-      <Box
-        width={'100%'}
-        textAlign={'right'}
-        fontWeight={600}
-        display={'flex'}
-        flexDirection={'column'}
-        justifyContent={'center'}
-        alignItems={'flex-end'}
-      >
-        {strat.isLive() && (
-          <Text>
-            ${getDisplayCurrencyAmount(tvlInfo.data?.usdValue || 0, 0)}
-          </Text>
-        )}
-        {!strat.isLive() && <Text>-</Text>}
-        {address && strat.isLive() && (
-          <Box
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-            borderRadius={'20px'}
-            color="grey_text"
-            fontSize={'12px'}
-          >
-            <>
-              <Tooltip label="Your deposits">
-                <Text width={'100%'} textAlign={'right'} fontWeight={600}>
-                  <Icon as={FaWallet} marginRight={'5px'} marginTop={'-2px'} />$
-                  {Math.round(getStrategyWiseInfo(strat.id)).toLocaleString()}
-                </Text>
-              </Tooltip>
-            </>
-          </Box>
-        )}
-      </Box>
-    );
-  }
-
-  function StrategyMobileCard(props: { strat: StrategyInfo; index: number }) {
-    const { strat, index } = props;
-    return (
-      <Grid
-        color={'white'}
-        bg={index % 2 == 0 ? 'color1_50p' : 'color2_50p'}
-        templateColumns={'repeat(3, 1fr)'}
-        templateRows={'repeat(3, 1fr)'}
-        display={{ base: 'grid', md: 'none' }}
-        padding={'20px'}
-        gap={2}
-        borderBottom={'1px solid var(--chakra-colors-bg)'}
-      >
-        <GridItem colSpan={3}>
-          <StrategyInfo strat={strat} />
-        </GridItem>
-        <GridItem colSpan={1} rowSpan={2}>
-          <Text
-            textAlign={'right'}
-            color={'color2'}
-            fontWeight={'bold'}
-            fontSize={'13px'}
-          >
-            APY
-          </Text>
-          <StrategyAPY strat={strat} />
-        </GridItem>
-        <GridItem colSpan={1} rowSpan={2}>
-          <Text
-            textAlign={'right'}
-            color={'color2'}
-            fontWeight={'bold'}
-            fontSize={'13px'}
-          >
-            RISK
-          </Text>
-          {GetRiskLevel(strat.riskFactor)}
-        </GridItem>
-        <GridItem colSpan={1} rowSpan={2}>
-          <Text
-            textAlign={'right'}
-            color={'color2'}
-            fontWeight={'bold'}
-            fontSize={'13px'}
-          >
-            TVL
-          </Text>
-          <StrategyTVL strat={strat} />
-        </GridItem>
-      </Grid>
-    );
-  }
+  const sortedPools = useAtomValue(sortPoolsAtom);
 
   return (
     <Container width="100%" float={'left'} padding={'0px'} marginTop={'10px'}>
@@ -430,12 +71,15 @@ export default function Strategies() {
         <Tbody>
           {allPools.length > 0 && strategies.length > 0 && (
             <>
-              {strategies.map((strat, index) => (
-                <>
-                  <StrategyCard strat={strat} index={index} />
-                  <StrategyMobileCard strat={strat} index={index} />
-                </>
-              ))}
+              {strategies.map((strat, index) => {
+                return (
+                  <YieldStrategyCard
+                    key={strat.id}
+                    strat={strat}
+                    index={index}
+                  />
+                );
+              })}
             </>
           )}
         </Tbody>
diff --git a/src/components/YieldCard.tsx b/src/components/YieldCard.tsx
new file mode 100644
index 0000000..f87b35c
--- /dev/null
+++ b/src/components/YieldCard.tsx
@@ -0,0 +1,462 @@
+import CONSTANTS from '@/constants';
+import { PoolInfo } from '@/store/pools';
+import {
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Box,
+  Flex,
+  Grid,
+  GridItem,
+  Heading,
+  HStack,
+  Icon,
+  Image,
+  Link,
+  Spinner,
+  Stack,
+  Td,
+  Text,
+  Tooltip,
+  Tr,
+} from '@chakra-ui/react';
+import shield from '@/assets/shield.svg';
+import { IStrategyProps, StrategyLiveStatus } from '@/strategies/IStrategy';
+import { useAtomValue } from 'jotai';
+import { getDisplayCurrencyAmount } from '@/utils';
+import { addressAtom } from '@/store/claims.atoms';
+import { FaWallet } from 'react-icons/fa';
+import { UserStats, userStatsAtom } from '@/store/utils.atoms';
+import { getPoolInfoFromStrategy } from '@/store/protocols';
+
+interface YieldCardProps {
+  pool: PoolInfo;
+  index: number;
+  showProtocolName?: boolean;
+}
+
+function getStratCardBg(status: StrategyLiveStatus, index: number) {
+  if (status == StrategyLiveStatus.ACTIVE || status == StrategyLiveStatus.NEW) {
+    return index % 2 === 0 ? 'color1_50p' : 'color2_50p';
+  }
+  return 'bg';
+}
+
+function getStratCardBadgeBg(status: StrategyLiveStatus) {
+  if (status === StrategyLiveStatus.NEW) {
+    return 'cyan';
+  } else if (status === StrategyLiveStatus.COMING_SOON) {
+    return 'yellow';
+  }
+  return 'bg';
+}
+
+function StrategyInfo(props: YieldCardProps) {
+  const { pool } = props;
+  return (
+    <Box>
+      <HStack spacing={2}>
+        <AvatarGroup size="xs" max={2} marginRight={'10px'}>
+          {pool.pool.logos.map((logo) => (
+            <Avatar key={logo} src={logo} />
+          ))}
+        </AvatarGroup>
+        <Box>
+          <HStack spacing={2}>
+            <Heading size="sm" marginTop={'2px'}>
+              {pool.pool.name}
+            </Heading>
+            {pool.additional &&
+              pool.additional.tags
+                .filter((tag) => tag != StrategyLiveStatus.ACTIVE)
+                .map((tag) => {
+                  return (
+                    <Badge
+                      ml="1"
+                      bg={getStratCardBadgeBg(tag)}
+                      fontFamily={'sans-serif'}
+                      padding="2px 8px"
+                      textTransform="capitalize"
+                      fontWeight={500}
+                      key={tag}
+                    >
+                      {tag}
+                    </Badge>
+                  );
+                })}
+            ;
+            {pool.additional && pool.additional.isAudited && (
+              <Tooltip label="Audited smart contract. Click to view the audit report.">
+                <Link href={CONSTANTS.AUDIT_REPORT} target="_blank">
+                  <Box
+                    width={'24px'}
+                    height={'24px'}
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    backgroundColor={'rgba(0, 0, 0, 0.2)'}
+                    borderRadius={'50%'}
+                  >
+                    <Image src={shield.src} alt="badge" />
+                  </Box>
+                </Link>
+              </Tooltip>
+            )}
+          </HStack>
+          {props.showProtocolName && (
+            <HStack marginTop={'5px'} spacing={1}>
+              <Avatar size={'2xs'} src={pool.protocol.logo} />
+              <Heading size="xs" marginTop={'2px'} color={'light_grey'}>
+                {pool.protocol.name}
+              </Heading>
+            </HStack>
+          )}
+        </Box>
+      </HStack>
+    </Box>
+  );
+}
+
+function getAPRWithToolTip(pool: PoolInfo) {
+  const tip = (
+    <Box width={'300px'}>
+      {pool.aprSplits.map((split) => {
+        if (split.apr === 0) {
+          return (
+            <Text key={split.title}>
+              {split.title}: {split.description}
+            </Text>
+          );
+        }
+        return (
+          <Flex width={'100%'} key={split.title}>
+            <Text key="1" width={'70%'}>
+              {split.title} {split.description ? `(${split.description})` : ''}
+            </Text>
+            <Text fontSize={'xs'} width={'30%'} textAlign={'right'} key="2">
+              {split.apr === 'Err' ? split.apr : (split.apr * 100).toFixed(2)}%
+            </Text>
+          </Flex>
+        );
+      })}
+    </Box>
+  );
+  return (
+    <Tooltip hasArrow label={tip} bg="gray.300" color="black">
+      <Box
+        width={'100%'}
+        marginRight={'0px'}
+        marginLeft={'auto'}
+        display={'flex'}
+        justifyContent={'flex-end'}
+      >
+        {pool.isLoading && <Spinner />}
+        {!pool.isLoading && (
+          <>
+            <Text
+              textAlign={'right'}
+              color="white"
+              fontSize={'16px'}
+              fontWeight={'bolder'}
+            >
+              {(pool.apr * 100).toFixed(2)}%
+            </Text>
+          </>
+        )}
+      </Box>
+    </Tooltip>
+  );
+}
+
+function StrategyAPY(props: YieldCardProps) {
+  const { pool } = props;
+  return (
+    <Box width={'100%'} marginBottom={'5px'}>
+      {getAPRWithToolTip(pool)}
+      {pool.additional && pool.additional.leverage && (
+        <Tooltip label="Shows the increased capital efficiency of investments compared to direct deposit in popular lending protocols">
+          <Box width={'100%'}>
+            <Box float={'right'} display={'flex'} fontSize={'13px'}>
+              <Text color="#FCC01E" textAlign={'right'}>
+                ⚡
+              </Text>
+              <Text
+                width="100%"
+                color="cyan"
+                textAlign={'right'}
+                fontWeight={600}
+              >
+                {pool.additional.leverage.toFixed(1)}X
+              </Text>
+            </Box>
+          </Box>
+        </Tooltip>
+      )}
+    </Box>
+  );
+}
+
+function isLive(status: StrategyLiveStatus) {
+  return (
+    status === StrategyLiveStatus.ACTIVE || status === StrategyLiveStatus.NEW
+  );
+}
+
+function getStrategyWiseInfo(
+  userData: UserStats | null | undefined,
+  id: string,
+) {
+  const amount = userData?.strategyWise.find((item) => item.id === id);
+  return amount?.usdValue ? amount?.usdValue : 0;
+}
+
+function StrategyTVL(props: YieldCardProps) {
+  const { pool } = props;
+  const address = useAtomValue(addressAtom);
+  const { data: userData } = useAtomValue(userStatsAtom);
+
+  const isPoolLive =
+    pool.additional &&
+    pool.additional.tags[0] &&
+    isLive(pool.additional.tags[0]);
+  return (
+    <Box
+      width={'100%'}
+      textAlign={'right'}
+      fontWeight={600}
+      display={'flex'}
+      flexDirection={'column'}
+      justifyContent={'center'}
+      alignItems={'flex-end'}
+    >
+      {isPoolLive && (
+        <Text fontSize={'16px'}>
+          ${getDisplayCurrencyAmount(pool.tvl || 0, 0)}
+        </Text>
+      )}
+      {!isPoolLive && <Text>-</Text>}
+      {address && isPoolLive && pool.protocol.name == 'STRKFarm' && (
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          borderRadius={'20px'}
+          color="grey_text"
+          fontSize={'12px'}
+        >
+          <>
+            <Tooltip label="Your deposits in this STRKFarm strategy">
+              <Text width={'100%'} textAlign={'right'} fontWeight={600}>
+                <Icon as={FaWallet} marginRight={'5px'} marginTop={'-2px'} />$
+                {Math.round(
+                  getStrategyWiseInfo(userData, pool.pool.id),
+                ).toLocaleString()}
+              </Text>
+            </Tooltip>
+          </>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function GetRiskLevel(riskFactor: number) {
+  let color = '';
+  let bgColor = '';
+  let count = 0;
+  let tooltipLabel = '';
+
+  if (riskFactor <= 2) {
+    color = 'rgba(131, 241, 77, 1)';
+    bgColor = 'rgba(131, 241, 77, 0.3)';
+    count = 1;
+    tooltipLabel = 'Low risk';
+  } else if (riskFactor < 4) {
+    color = 'rgba(255, 146, 0, 1)';
+    bgColor = 'rgba(255, 146, 0, 0.3)';
+    count = 3;
+    tooltipLabel = 'Medium risk';
+  } else {
+    color = 'rgba(255, 32, 32, 1)';
+    bgColor = 'rgba(255, 32, 32, 0.3)';
+    count = 5;
+    tooltipLabel = 'High risk';
+  }
+
+  return (
+    <Box
+      width="100%"
+      display="flex"
+      justifyContent={'flex-end'}
+      alignContent={'flex-end'}
+    >
+      <Tooltip
+        hasArrow
+        label={`${tooltipLabel}. We currently assess only impermanent loss risk: stable pairs/pools are low risk, volatile multi-token pools are medium risk. More factors will be added soon.`}
+        bg="gray.300"
+        color="black"
+      >
+        <Box
+          position={'relative'}
+          display={'flex'}
+          flexDirection={'column'}
+          alignSelf={{ base: 'left', md: 'center' }}
+          justifyContent={'flex-start'}
+        >
+          <Box
+            width={'100%'}
+            display="flex"
+            alignItems="center"
+            justifyContent={{ base: 'flex-start', md: 'center' }}
+            padding={'4px 0px'}
+            height={'100%'}
+            position={'relative'}
+          >
+            <Stack direction="row" spacing={1}>
+              {[...Array(5)].map((_, index) => (
+                <Box
+                  key={index}
+                  width="4px"
+                  height="18px"
+                  borderRadius="md"
+                  bg={
+                    index < count ? color : 'var(--chakra-colors-opacity_50p)'
+                  }
+                />
+              ))}
+            </Stack>
+          </Box>
+          <Box
+            position={'absolute'}
+            backgroundColor={bgColor}
+            opacity={0.3}
+            filter={'blur(30.549999237060547px)'}
+            right={{ base: '-50', md: '-37px' }}
+            bottom={'-80px'}
+            width={'94px'}
+            height={'94px'}
+            zIndex={0}
+          />
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+}
+
+function StrategyMobileCard(props: YieldCardProps) {
+  const { pool, index } = props;
+  return (
+    <Grid
+      color={'white'}
+      bg={getStratCardBg(
+        pool.additional?.tags[0] || StrategyLiveStatus.ACTIVE,
+        index,
+      )}
+      templateColumns={'repeat(3, 1fr)'}
+      templateRows={
+        props.showProtocolName ? 'repeat(4, 1fr)' : 'repeat(3, 1fr)'
+      }
+      display={{ base: 'grid', md: 'none' }}
+      padding={'20px'}
+      gap={2}
+      borderBottom={'1px solid var(--chakra-colors-bg)'}
+    >
+      <GridItem colSpan={3} rowSpan={props.showProtocolName ? 2 : 1}>
+        <StrategyInfo
+          pool={pool}
+          index={index}
+          showProtocolName={props.showProtocolName}
+        />
+      </GridItem>
+      <GridItem colSpan={1} rowSpan={2}>
+        <Text
+          textAlign={'right'}
+          color={'color2'}
+          fontWeight={'bold'}
+          fontSize={'13px'}
+        >
+          APY
+        </Text>
+        <StrategyAPY pool={pool} index={index} />
+      </GridItem>
+      <GridItem colSpan={1} rowSpan={2}>
+        <Text
+          textAlign={'right'}
+          color={'color2'}
+          fontWeight={'bold'}
+          fontSize={'13px'}
+        >
+          RISK
+        </Text>
+        {pool.additional?.riskFactor
+          ? GetRiskLevel(pool.additional?.riskFactor)
+          : '-'}
+      </GridItem>
+      <GridItem colSpan={1} rowSpan={2}>
+        <Text
+          textAlign={'right'}
+          color={'color2'}
+          fontWeight={'bold'}
+          fontSize={'13px'}
+        >
+          TVL
+        </Text>
+        <StrategyTVL pool={pool} index={index} />
+      </GridItem>
+    </Grid>
+  );
+}
+
+export default function YieldCard(props: YieldCardProps) {
+  const { pool, index } = props;
+
+  return (
+    <>
+      <Tr
+        color={'white'}
+        bg={index % 2 == 0 ? 'color1_50p' : 'color2_50p'}
+        display={{ base: 'none', md: 'table-row' }}
+        as="a"
+        href={pool.protocol.link}
+        target="_blank"
+      >
+        <Td>
+          <StrategyInfo
+            pool={pool}
+            index={index}
+            showProtocolName={props.showProtocolName}
+          />
+        </Td>
+        <Td>
+          <StrategyAPY pool={pool} index={index} />
+        </Td>
+        <Td>
+          {pool.additional?.riskFactor
+            ? GetRiskLevel(pool.additional?.riskFactor)
+            : '-'}
+        </Td>
+        <Td>
+          <StrategyTVL pool={pool} index={index} />
+        </Td>
+      </Tr>
+      <StrategyMobileCard
+        pool={pool}
+        index={index}
+        showProtocolName={props.showProtocolName}
+      />
+    </>
+  );
+}
+
+export function YieldStrategyCard(props: {
+  strat: IStrategyProps;
+  index: number;
+}) {
+  const tvlInfo = useAtomValue(props.strat.tvlAtom);
+  const pool = getPoolInfoFromStrategy(
+    props.strat,
+    tvlInfo.data?.usdValue || 0,
+  );
+
+  return <YieldCard pool={pool} index={props.index} showProtocolName={false} />;
+}
diff --git a/src/store/IDapp.store.ts b/src/store/IDapp.store.ts
index d4aff39..bd995b9 100755
--- a/src/store/IDapp.store.ts
+++ b/src/store/IDapp.store.ts
@@ -75,4 +75,12 @@ export class IDapp<BaseAPYT> {
     // return !poolName.includes('DAI') && !poolName.includes('WSTETH') && !poolName.includes('BTC');
     return supportedPools.includes(poolName);
   }
+
+  getPoolId(protocol: string, poolName: string) {
+    return getPoolId(protocol, poolName);
+  }
+}
+
+export function getPoolId(protocol: string, poolName: string) {
+  return `${protocol.toLowerCase().replaceAll(' ', '_')}__${poolName.toLowerCase().replaceAll(' ', '_')}`;
 }
diff --git a/src/store/carmine.store.ts b/src/store/carmine.store.ts
index afce7de..525fe58 100755
--- a/src/store/carmine.store.ts
+++ b/src/store/carmine.store.ts
@@ -4,6 +4,7 @@ import { atom } from 'jotai';
 import { PoolInfo, ProtocolAtoms } from './pools';
 import { Jediswap } from './jedi.store';
 import { atomWithQuery } from 'jotai-tanstack-query';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 const poolConfigs = [
   { name: 'STRK/USDC Call Pool (STRK)', tokenA: 'STRK', tokenB: 'USDC' },
@@ -34,6 +35,7 @@ export class Carmine extends Jediswap {
         if (!poolData || !poolData.data) return;
 
         let category: Category;
+        const riskFactor = 3;
         if (config.name.endsWith('(USDC)')) {
           category = Category.Stable;
         } else if (config.name.endsWith('(STRK)')) {
@@ -55,6 +57,7 @@ export class Carmine extends Jediswap {
 
         const poolInfo: PoolInfo = {
           pool: {
+            id: this.getPoolId(this.name, config.name),
             name: config.name,
             logos: [logo1, logo2],
           },
@@ -86,6 +89,11 @@ export class Carmine extends Jediswap {
             borrowFactor: 0,
             apr: 0,
           },
+          additional: {
+            tags: [StrategyLiveStatus.ACTIVE],
+            isAudited: false, // TODO: Update this
+            riskFactor,
+          },
         };
         pools.push(poolInfo);
       });
diff --git a/src/store/ekobu.store.ts b/src/store/ekobu.store.ts
index 636fdeb..792bd2a 100755
--- a/src/store/ekobu.store.ts
+++ b/src/store/ekobu.store.ts
@@ -11,6 +11,7 @@ import {
   ProtocolAtoms,
   StrkDexIncentivesAtom,
 } from './pools';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 const _fetcher = async (...args: any[]) => {
   return fetch(args[0], args[1]).then((res) => res.json());
@@ -110,8 +111,10 @@ export class Ekubo extends IDapp<EkuboBaseAprDoc> {
         .forEach((poolName) => {
           const arr = myData[poolName];
           let category = Category.Others;
+          let riskFactor = 3;
           if (poolName === 'USDC/USDT') {
             category = Category.Stable;
+            riskFactor = 0.5;
           } else if (poolName.includes('STRK')) {
             category = Category.STRK;
           }
@@ -122,6 +125,7 @@ export class Ekubo extends IDapp<EkuboBaseAprDoc> {
 
           const poolInfo: PoolInfo = {
             pool: {
+              id: this.getPoolId(this.name, poolName),
               name: poolName,
               logos: [logo1, logo2],
             },
@@ -148,6 +152,11 @@ export class Ekubo extends IDapp<EkuboBaseAprDoc> {
               borrowFactor: 0,
               apr: 0,
             },
+            additional: {
+              tags: [StrategyLiveStatus.ACTIVE],
+              riskFactor,
+              isAudited: false, // TODO: Update this
+            },
           };
 
           const { rewardAPY } = this.getBaseAPY(poolInfo, baseInfo);
diff --git a/src/store/haiko.store.ts b/src/store/haiko.store.ts
index 40ab86e..8483a78 100755
--- a/src/store/haiko.store.ts
+++ b/src/store/haiko.store.ts
@@ -11,6 +11,7 @@ import {
 import { atom } from 'jotai';
 import { AtomWithQueryResult, atomWithQuery } from 'jotai-tanstack-query';
 import { IDapp } from './IDapp.store';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 type Token = {
   address: string;
@@ -61,8 +62,10 @@ export class Haiko extends IDapp<Pool[]> {
         .forEach((poolName) => {
           const arr = myData[poolName];
           let category = Category.Others;
+          let riskFactor = 3;
           if (poolName === 'USDC/USDT') {
             category = Category.Stable;
+            riskFactor = 0.5;
           } else if (poolName.includes('STRK')) {
             category = Category.STRK;
           }
@@ -73,6 +76,7 @@ export class Haiko extends IDapp<Pool[]> {
 
           const poolInfo: PoolInfo = {
             pool: {
+              id: this.getPoolId(this.name, poolName),
               name: poolName,
               logos: [logo1, logo2],
             },
@@ -99,6 +103,11 @@ export class Haiko extends IDapp<Pool[]> {
               borrowFactor: 0,
               apr: 0,
             },
+            additional: {
+              tags: [StrategyLiveStatus.ACTIVE],
+              isAudited: false, // TODO: Update this
+              riskFactor,
+            },
           };
           pools.push(poolInfo);
         });
diff --git a/src/store/hashstack.store.ts b/src/store/hashstack.store.ts
index 19203a5..4d32a3d 100755
--- a/src/store/hashstack.store.ts
+++ b/src/store/hashstack.store.ts
@@ -10,6 +10,7 @@ import { atom } from 'jotai';
 import { IDapp } from './IDapp.store';
 import { LendingSpace } from './lending.base';
 import { AtomWithQueryResult } from 'jotai-tanstack-query';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 export class Hashstack extends IDapp<LendingSpace.MyBaseAprDoc[]> {
   name = 'Hashstack';
@@ -39,6 +40,7 @@ export class Hashstack extends IDapp<LendingSpace.MyBaseAprDoc[]> {
 
         const poolInfo: PoolInfo = {
           pool: {
+            id: this.getPoolId(this.name, poolName),
             name: poolName,
             logos: [logo1],
           },
@@ -70,6 +72,11 @@ export class Hashstack extends IDapp<LendingSpace.MyBaseAprDoc[]> {
             borrowFactor: 0,
             apr: 0,
           },
+          additional: {
+            tags: [StrategyLiveStatus.ACTIVE],
+            isAudited: false, // TODO: Update this
+            riskFactor: 0.5,
+          },
         };
         pools.push(poolInfo);
       });
diff --git a/src/store/jedi.store.ts b/src/store/jedi.store.ts
index 8c6c0b1..fac01af 100755
--- a/src/store/jedi.store.ts
+++ b/src/store/jedi.store.ts
@@ -12,6 +12,7 @@ import { atom } from 'jotai';
 import { IDapp } from './IDapp.store';
 import { AtomWithQueryResult, atomWithQuery } from 'jotai-tanstack-query';
 import { BlockInfo, getBlock } from './utils.atoms';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 interface MyBaseAprDoc {
   id: string;
@@ -45,12 +46,12 @@ export class Jediswap extends IDapp<string> {
           const arr = myData[poolName];
           let category = Category.Others;
 
+          let riskFactor = 3;
           if (poolName === 'USDC/USDT') {
             category = Category.Stable;
+            riskFactor = 0.5;
           } else if (poolName.includes('STRK')) {
             category = Category.STRK;
-          } else if (poolName.includes('DEGEN')) {
-            category = Category.Degen;
           }
 
           const tokens: TokenName[] = <TokenName[]>poolName.split('/');
@@ -58,6 +59,7 @@ export class Jediswap extends IDapp<string> {
           const logo2 = CONSTANTS.LOGOS[tokens[1]];
           const poolInfo: PoolInfo = {
             pool: {
+              id: this.getPoolId(this.name, poolName),
               name: poolName,
               logos: [logo1, logo2],
             },
@@ -84,6 +86,11 @@ export class Jediswap extends IDapp<string> {
               borrowFactor: 0,
               apr: 0,
             },
+            additional: {
+              riskFactor,
+              tags: [StrategyLiveStatus.ACTIVE],
+              isAudited: false, // TODO: Update this
+            },
           };
           pools.push(poolInfo);
         });
diff --git a/src/store/lending.base.ts b/src/store/lending.base.ts
index 1e4921c..11179fc 100755
--- a/src/store/lending.base.ts
+++ b/src/store/lending.base.ts
@@ -1,7 +1,8 @@
 import CONSTANTS, { TokenName } from '@/constants';
 import { APRSplit, Category, PoolInfo, PoolMetadata, PoolType } from './pools';
 import { AtomWithQueryResult } from 'jotai-tanstack-query';
-import { StrategyAction } from '@/strategies/IStrategy';
+import { StrategyAction, StrategyLiveStatus } from '@/strategies/IStrategy';
+import { getPoolId } from './IDapp.store';
 
 export namespace LendingSpace {
   export interface MyBaseAprDoc {
@@ -66,6 +67,7 @@ export namespace LendingSpace {
 
         const poolInfo: PoolInfo = {
           pool: {
+            id: getPoolId(info.name, poolName),
             name: poolName,
             logos: [logo1],
           },
@@ -92,6 +94,11 @@ export namespace LendingSpace {
           lending: {
             collateralFactor: 0,
           },
+          additional: {
+            tags: [StrategyLiveStatus.ACTIVE],
+            isAudited: false, // TODO: Update this
+            riskFactor: 0.5,
+          },
         };
         pools.push(poolInfo);
       });
diff --git a/src/store/myswap.store.ts b/src/store/myswap.store.ts
index 615e1fe..bcf4d8c 100755
--- a/src/store/myswap.store.ts
+++ b/src/store/myswap.store.ts
@@ -11,6 +11,7 @@ import { atom } from 'jotai';
 import { IDapp } from './IDapp.store';
 import CONSTANTS, { TokenName } from '@/constants';
 import { AtomWithQueryResult, atomWithQuery } from 'jotai-tanstack-query';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 interface Token {
   symbol: string;
@@ -76,8 +77,10 @@ export class MySwap extends IDapp<IndexedPoolData> {
         .forEach((poolName) => {
           const arr = myData[poolName];
           let category = Category.Others;
+          let riskFactor = 3;
           if (poolName === 'USDC/USDT') {
             category = Category.Stable;
+            riskFactor = 0.5;
           } else if (poolName.includes('STRK')) {
             category = Category.STRK;
           }
@@ -88,6 +91,7 @@ export class MySwap extends IDapp<IndexedPoolData> {
 
           const poolInfo: PoolInfo = {
             pool: {
+              id: this.getPoolId(this.name, poolName),
               name: poolName,
               logos: [logo1, logo2],
             },
@@ -114,6 +118,11 @@ export class MySwap extends IDapp<IndexedPoolData> {
               borrowFactor: 0,
               apr: 0,
             },
+            additional: {
+              tags: [StrategyLiveStatus.ACTIVE],
+              isAudited: false, // TODO: Update this
+              riskFactor,
+            },
           };
           pools.push(poolInfo);
         });
diff --git a/src/store/nostradegen.store.ts b/src/store/nostradegen.store.ts
index cf62bda..5a58325 100755
--- a/src/store/nostradegen.store.ts
+++ b/src/store/nostradegen.store.ts
@@ -3,9 +3,10 @@ import { Category, PoolType } from './pools';
 import { atom } from 'jotai';
 import { PoolInfo, ProtocolAtoms, StrkIncentivesAtom } from './pools';
 import { Jediswap } from './jedi.store';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 export class NostraDegen extends Jediswap {
-  name = 'Nostra DEGEN';
+  name = 'Nostra';
   link = 'https://app.nostra.finance/pools';
   logo =
     'https://static-assets-8zct.onrender.com/integrations/nostra/logo_dark.jpg';
@@ -19,16 +20,20 @@ export class NostraDegen extends Jediswap {
       Object.entries(myData)
         .filter(([_, poolData]: any) => poolData.isDegen)
         .forEach(([poolName, poolData]: any) => {
-          const category = Category.Others;
           const tokens: TokenName[] = [poolData.tokenA, poolData.tokenB];
           const logo1 = CONSTANTS.LOGOS[tokens[0]];
           const logo2 = CONSTANTS.LOGOS[tokens[1]];
           const baseApr =
             poolData.baseApr === '0' ? 0.0 : parseFloat(poolData.baseApr);
           const rewardApr = parseFloat(poolData.rewardApr);
+          const isStrkPool = poolData.id.includes('STRK');
+          const category = isStrkPool ? Category.STRK : Category.Others;
+
+          const _poolName = poolData.id;
           const poolInfo: PoolInfo = {
             pool: {
-              name: poolData.id.slice(0, -6),
+              id: this.getPoolId(this.name, _poolName),
+              name: _poolName,
               logos: [logo1, logo2],
             },
             protocol: {
@@ -59,6 +64,11 @@ export class NostraDegen extends Jediswap {
               borrowFactor: 0,
               apr: 0,
             },
+            additional: {
+              tags: [StrategyLiveStatus.ACTIVE],
+              isAudited: false, // TODO: Update this
+              riskFactor: 3,
+            },
           };
           pools.push(poolInfo);
         });
diff --git a/src/store/nostradex.store.ts b/src/store/nostradex.store.ts
index d2b9b78..aa17ed0 100755
--- a/src/store/nostradex.store.ts
+++ b/src/store/nostradex.store.ts
@@ -3,9 +3,10 @@ import { Category, PoolType } from './pools';
 import { atom } from 'jotai';
 import { PoolInfo, ProtocolAtoms, StrkIncentivesAtom } from './pools';
 import { Jediswap } from './jedi.store';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 export class NostraDex extends Jediswap {
-  name = 'Nostra DEX';
+  name = 'Nostra';
   link = 'https://app.nostra.finance/pools';
   logo =
     'https://static-assets-8zct.onrender.com/integrations/nostra/logo_dark.jpg';
@@ -17,22 +18,32 @@ export class NostraDex extends Jediswap {
       if (!myData) return [];
       const pools: PoolInfo[] = [];
 
+      const supportedPools = ['ETH-USDC', 'STRK-ETH', 'STRK-USDC', 'USDC-USDT'];
       // Filter and map only the required pools
       Object.values(myData)
         .filter((poolData: any) => {
           const id = poolData.id;
-          return id === 'ETH-USDC' || id === 'STRK-ETH' || id === 'STRK-USDC';
+          return supportedPools.includes(id);
         })
         .forEach((poolData: any) => {
-          const category = Category.Others;
           const tokens: TokenName[] = [poolData.tokenA, poolData.tokenB];
           const logo1 = CONSTANTS.LOGOS[tokens[0]];
           const logo2 = CONSTANTS.LOGOS[tokens[1]];
           const baseApr =
             poolData.baseApr === '0' ? 0.0 : parseFloat(poolData.baseApr);
           const rewardApr = parseFloat(poolData.rewardApr);
+
+          let category = Category.Others;
+          let riskFactor = 3;
+          if (poolData.id === 'USDC-USDT') {
+            category = Category.Stable;
+            riskFactor = 0.5;
+          } else if (poolData.id.includes('STRK')) {
+            category = Category.STRK;
+          }
           const poolInfo: PoolInfo = {
             pool: {
+              id: this.getPoolId(this.name, poolData.id.slice(0, -6)),
               name: poolData.id,
               logos: [logo1, logo2],
             },
@@ -64,6 +75,11 @@ export class NostraDex extends Jediswap {
               borrowFactor: 0,
               apr: 0,
             },
+            additional: {
+              riskFactor,
+              tags: [StrategyLiveStatus.ACTIVE],
+              isAudited: false, // TODO: Update this
+            },
           };
           pools.push(poolInfo);
         });
diff --git a/src/store/nostralending.store.ts b/src/store/nostralending.store.ts
index 05f0426..1963c2d 100755
--- a/src/store/nostralending.store.ts
+++ b/src/store/nostralending.store.ts
@@ -64,7 +64,7 @@ const PoolAddresses: { [token: string]: NostraPoolFactor } = {
 };
 
 export class NostraLending extends IDapp<LendingSpace.MyBaseAprDoc[]> {
-  name = 'Nostra Money Markets';
+  name = 'Nostra';
   link = 'https://app.nostra.finance/';
   logo =
     'https://static-assets-8zct.onrender.com/integrations/nostra/logo_dark.jpg';
diff --git a/src/store/pools.ts b/src/store/pools.ts
index 52f9e62..e6c0d60 100755
--- a/src/store/pools.ts
+++ b/src/store/pools.ts
@@ -3,11 +3,11 @@ import { Atom, atom } from 'jotai';
 import { AtomWithQueryResult, atomWithQuery } from 'jotai-tanstack-query';
 import { CustomAtomWithQueryResult } from '@/utils/customAtomWithQuery';
 import { customAtomWithFetch } from '@/utils/customAtomWithFetch';
+import { StrategyLiveStatus } from '@/strategies/IStrategy';
 
 export enum Category {
   Stable = 'Stable Pools',
   STRK = 'STRK Pools',
-  Degen = 'MetaStable Pools',
   Others = 'Others',
 }
 
@@ -36,6 +36,7 @@ export interface PoolMetadata {
 
 export interface PoolInfo extends PoolMetadata {
   pool: {
+    id: string;
     name: string;
     logos: string[];
   };
@@ -50,6 +51,12 @@ export interface PoolInfo extends PoolMetadata {
   category: Category;
   type: PoolType;
   isLoading?: boolean;
+  additional: {
+    leverage?: number;
+    riskFactor: number;
+    tags: StrategyLiveStatus[];
+    isAudited: boolean;
+  };
 }
 
 export interface ProtocolAtoms {
diff --git a/src/store/protocols.ts b/src/store/protocols.ts
index 41e29ca..859fc99 100644
--- a/src/store/protocols.ts
+++ b/src/store/protocols.ts
@@ -3,7 +3,6 @@ import HaikoAtoms, { haiko } from './haiko.store';
 import HashstackAtoms, { hashstack } from './hashstack.store';
 import JediAtoms, { jedi } from './jedi.store';
 import MySwapAtoms, { mySwap } from './myswap.store';
-import NimboraAtoms, { nimbora } from './nimbora.store';
 import NostraDexAtoms, { nostraDex } from './nostradex.store';
 import NostraDegenAtoms, { nostraDegen } from './nostradegen.store';
 import NostraLendingAtoms, { nostraLending } from './nostralending.store';
@@ -14,6 +13,9 @@ import ZkLendAtoms, { zkLend } from './zklend.store';
 import CarmineAtoms, { carmine } from './carmine.store';
 import { atom } from 'jotai';
 import { Category, PoolInfo, PoolType } from './pools';
+import { strategiesAtom } from './strategies.atoms';
+import strkfarmLogo from '@public/logo.png';
+import { IStrategyProps } from '@/strategies/IStrategy';
 
 export const PROTOCOLS = [
   {
@@ -81,24 +83,38 @@ export const PROTOCOLS = [
     class: hashstack,
     atoms: HashstackAtoms,
   },
-  {
-    name: nimbora.name,
-    class: nimbora,
-    atoms: NimboraAtoms,
-  },
+  // {
+  //   name: nimbora.name,
+  //   class: nimbora,
+  //   atoms: NimboraAtoms,
+  // }
 ];
 
 export const ALL_FILTER = 'All';
+
+const allProtocols = [
+  {
+    name: 'STRKFarm',
+    logo: strkfarmLogo.src,
+  },
+  ...PROTOCOLS.map((p) => ({
+    name: p.name,
+    logo: p.class.logo,
+  })),
+];
 export const filters = {
   categories: [...Object.values(Category)],
   types: [...Object.values(PoolType)],
-  protocols: [...PROTOCOLS.map((p) => p.name)],
+  protocols: allProtocols.filter(
+    (p, index) => allProtocols.findIndex((_p) => _p.name == p.name) == index,
+  ),
 };
 
 export const filterAtoms = {
   categoriesAtom: atom([ALL_FILTER]),
   typesAtom: atom([ALL_FILTER]),
   protocolsAtom: atom([ALL_FILTER]),
+  riskAtom: atom([ALL_FILTER]),
 };
 
 export const updateFiltersAtom = atom(
@@ -106,15 +122,18 @@ export const updateFiltersAtom = atom(
   (
     get,
     set,
-    type: 'categories' | 'poolTypes' | 'protocols',
+    type: 'categories' | 'poolTypes' | 'protocols' | 'risk',
     newOptions: string[],
   ) => {
+    console.log(`filter33`, type, newOptions);
     if (type === 'categories') {
       set(filterAtoms.categoriesAtom, newOptions);
     } else if (type === 'poolTypes') {
       set(filterAtoms.typesAtom, newOptions);
     } else if (type === 'protocols') {
       set(filterAtoms.protocolsAtom, newOptions);
+    } else if (type === 'risk') {
+      set(filterAtoms.riskAtom, newOptions);
     }
   },
 );
@@ -127,21 +146,88 @@ export const allPoolsAtomUnSorted = atom((get) => {
   );
 });
 
+export function getPoolInfoFromStrategy(
+  strat: IStrategyProps,
+  tvlInfo: number,
+): PoolInfo {
+  let category = Category.Others;
+  if (strat.name.includes('STRK')) {
+    category = Category.STRK;
+  } else if (strat.name.includes('USDC')) {
+    category = Category.Stable;
+  }
+  return {
+    pool: {
+      id: strat.id,
+      name: strat.name,
+      logos: [strat.holdingTokens[0].logo],
+    },
+    protocol: {
+      name: 'STRKFarm',
+      link: `/strategy/${strat.id}`,
+      logo: strkfarmLogo.src,
+    },
+    tvl: tvlInfo,
+    apr: strat.netYield,
+    aprSplits: [
+      {
+        apr: strat.netYield,
+        title: 'Net Yield',
+        description: 'Includes fees & Defi spring rewards',
+      },
+    ],
+    category,
+    type: PoolType.Derivatives,
+    borrow: {
+      apr: 0,
+      borrowFactor: 0,
+    },
+    lending: {
+      collateralFactor: 0,
+    },
+    additional: {
+      riskFactor: strat.riskFactor,
+      tags: [strat.liveStatus],
+      isAudited: true,
+      leverage: strat.leverage,
+    },
+  };
+}
+
+export const allPoolsAtomWithStrategiesUnSorted = atom((get) => {
+  const pools: PoolInfo[] = get(allPoolsAtomUnSorted);
+  const strategies = get(strategiesAtom);
+  const strategyPools: PoolInfo[] = strategies.map((strategy) => {
+    const tvlInfo = get(strategy.tvlAtom);
+    return getPoolInfoFromStrategy(strategy, tvlInfo.data?.usdValue || 0);
+  });
+  return strategyPools.concat(pools);
+});
+
 // const allPoolsAtom = atom<PoolInfo[]>([]);
 
-const SORT_OPTIONS = ['APR', 'TVL'];
+const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'];
 
 export const sortAtom = atom(SORT_OPTIONS[0]);
 
 export const sortPoolsAtom = atom((get) => {
-  const pools = get(allPoolsAtomUnSorted);
+  const pools = get(allPoolsAtomWithStrategiesUnSorted);
   console.log('pre sort', pools);
   const sortOption = get(sortAtom);
   pools.sort((a, b) => {
-    if (sortOption === SORT_OPTIONS[1]) {
+    if (sortOption === SORT_OPTIONS[2]) {
       return b.tvl - a.tvl;
+    } else if (sortOption === SORT_OPTIONS[3]) {
+      return b.additional.riskFactor - a.additional.riskFactor;
+    } else if (sortOption === SORT_OPTIONS[1]) {
+      return b.apr - a.apr;
     }
-    return b.apr - a.apr;
+    // sort by risk factor, then sort by apr
+    // rounding to sync with risk signals shown on UI
+    return (
+      Math.round(a.additional.riskFactor) -
+        Math.round(b.additional.riskFactor) || b.apr - a.apr
+    );
   });
   return pools;
 });
@@ -151,6 +237,8 @@ export const filteredPools = atom((get) => {
   const categories = get(filterAtoms.categoriesAtom);
   const types = get(filterAtoms.typesAtom);
   const protocols = get(filterAtoms.protocolsAtom);
+  const riskLevels = get(filterAtoms.riskAtom);
+  console.log(`risk_levels`, riskLevels);
   return pools
     .filter((pool) => {
       // category filter
@@ -169,5 +257,16 @@ export const filteredPools = atom((get) => {
       if (protocols.includes(ALL_FILTER)) return true;
       if (protocols.includes(pool.protocol.name)) return true;
       return false;
+    })
+    .filter((pool) => {
+      // risk filter
+      if (riskLevels.includes(ALL_FILTER)) return true;
+      if (
+        riskLevels.includes(
+          Math.round(pool.additional.riskFactor).toFixed(0).toString(),
+        )
+      )
+        return true;
+      return false;
     });
 });
diff --git a/src/store/strategies.atoms.ts b/src/store/strategies.atoms.ts
index 7be4a04..6cf7b1d 100755
--- a/src/store/strategies.atoms.ts
+++ b/src/store/strategies.atoms.ts
@@ -94,14 +94,12 @@ export const STRATEGIES_INFO = getStrategies();
 export const strategiesAtom = atom<StrategyInfo[]>((get) => {
   const strategies = getStrategies();
   const allPools = get(allPoolsAtomUnSorted);
-  const filteredPools = allPools.filter(
-    (p) =>
-      p.protocol.name === 'zkLend' ||
-      p.protocol.name === 'Nostra Money Markets',
+  const requiredPools = allPools.filter(
+    (p) => p.protocol.name === 'zkLend' || p.protocol.name === 'Nostra',
   );
 
   for (const s of strategies) {
-    s.solve(filteredPools, '1000');
+    s.solve(requiredPools, '1000');
   }
 
   strategies.sort((a, b) => {
diff --git a/src/store/utils.atoms.ts b/src/store/utils.atoms.ts
index 5a916ac..7c78f45 100755
--- a/src/store/utils.atoms.ts
+++ b/src/store/utils.atoms.ts
@@ -82,7 +82,7 @@ interface StrategyWise {
   amount: string;
 }
 
-interface UserStats {
+export interface UserStats {
   holdingsUSD: number;
   strategyWise: StrategyWise[];
 }