diff --git a/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/Loading/index.tsx b/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/Loading/index.tsx
index 9afac96..aefb7c1 100644
--- a/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/Loading/index.tsx
+++ b/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/Loading/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box, Dialog as MuiDialog, Typography } from '@mui/material'
 import { useSelector } from 'react-redux'
-import { Oval as OvalLoader } from 'svg-loaders-react'
+import ClipLoader from "react-spinners/ClipLoader";
 
 import { RootState } from '../../../../../store'
 import { COLORS } from '../../../../../../core/theme/colors'
@@ -24,7 +24,7 @@ const Loading = () => {
             }}>
                 {message ?
                     <Box gap={2} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        {loadingSpinner ? <OvalLoader style={{ width: '60px', height: '60px', stroke: COLORS.LIGHT_BLUE[90] }} /> : null}
+                        {loadingSpinner ? <ClipLoader color={COLORS.LIGHT_BLUE[90]} cssOverride={{ width: '60px', height: '60px' }} /> : null}
                         <Typography variant='h5'>{message}</Typography>
                     </Box>
                     : null}
diff --git a/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/WalletSelector/index.tsx b/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/WalletSelector/index.tsx
index 4c8600c..16246b2 100644
--- a/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/WalletSelector/index.tsx
+++ b/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/WalletSelector/index.tsx
@@ -3,7 +3,7 @@ import { Box, Tooltip, Typography, Dialog as MuiDialog, MenuItem, Select } from
 import { LoadingButton } from '@mui/lab'
 import { ThreeDots as ThreeDotsLoading } from 'svg-loaders-react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Oval as OvalLoader } from 'svg-loaders-react'
+import ClipLoader from "react-spinners/ClipLoader";
 
 import {
   detectUserBrowser,
@@ -256,7 +256,7 @@ const WalletSelector = () => {
           </Typography>
           {selectChainId ?
             <Box gap={3} style={styles.btnsHolder}>
-              {loadSelectChainId ? <OvalLoader style={styles.ovalLoader} /> :
+              {loadSelectChainId ? <ClipLoader color={COLORS.LIGHT_BLUE[90]} cssOverride={styles.ovalLoader} /> :
                 <Fragment>
                   <Select
                     disableUnderline
@@ -337,7 +337,7 @@ const WalletSelector = () => {
             </Box>
             :
             <Box gap={3} style={styles.btnsHolder}>
-              {loadSelectChainId ? <OvalLoader style={styles.ovalLoader} /> :
+              {loadSelectChainId ? <ClipLoader color={COLORS.LIGHT_BLUE[90]} cssOverride={styles.ovalLoader} /> :
                 <Fragment>
                   {getSupportedWallets().map((wallet, idx) => {
                     return (
diff --git a/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/WalletSelector/styles.ts b/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/WalletSelector/styles.ts
index bdcb89a..d5121d5 100644
--- a/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/WalletSelector/styles.ts
+++ b/apps/frontend/src/core/presentation/components/Dialog/ModalComponents/WalletSelector/styles.ts
@@ -27,7 +27,6 @@ export const styles = {
         width: '50px',
         height: '50px',
         margin: '37px 0px',
-        stroke: COLORS.LIGHT_BLUE[90]
     },
     pluginWarning: {
         maxWidth: '550px',
diff --git a/apps/frontend/src/core/presentation/components/Layout/helpers.tsx b/apps/frontend/src/core/presentation/components/Layout/helpers.tsx
index f210f92..8683fa8 100644
--- a/apps/frontend/src/core/presentation/components/Layout/helpers.tsx
+++ b/apps/frontend/src/core/presentation/components/Layout/helpers.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import SVG from 'react-inlinesvg';
 import moment from "moment";
 import { Box, Divider } from '@mui/material';
 import { JdenticonConfig, toSvg } from 'jdenticon';
-import { Oval as OvalLoader } from 'svg-loaders-react'
+import ClipLoader from "react-spinners/ClipLoader";
 
 import { APP_DETAILS } from '../../../utilities/Constants';
 import { COLORS } from '../../../theme/colors';
@@ -282,6 +282,8 @@ export const SVG_FRAMES = {
     frame1674: frame1674
 }
 
+
 export const StyledPuffLoader = () => {
-    return <OvalLoader style={generalStyles.spinner} />
+    const override: CSSProperties = generalStyles.spinner;
+    return <ClipLoader color={COLORS.LIGHT_BLUE[90]} cssOverride={override} />
 }
diff --git a/apps/frontend/src/core/presentation/components/SearchBar/index.tsx b/apps/frontend/src/core/presentation/components/SearchBar/index.tsx
index c385082..ba66e30 100644
--- a/apps/frontend/src/core/presentation/components/SearchBar/index.tsx
+++ b/apps/frontend/src/core/presentation/components/SearchBar/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useEffect, useRef, useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
-import { Box, Divider, Fade, Input, MenuItem, Select, Tooltip, Typography } from "@mui/material"
+import { Box, Divider, Fade, Input, MenuItem, Select, SelectChangeEvent, Tooltip, Typography } from "@mui/material"
 import { CancelRounded } from '@mui/icons-material'
 import { getCosmosNetworkPrettyName } from "cudosjs"
 
@@ -17,14 +17,15 @@ const SearchBar = ({ networks, displayDataLength }: { networks: string[], displa
 
     const dispatch = useDispatch()
     const searchBar = useRef<HTMLInputElement>()
-    const chainSelector = useRef<HTMLInputElement>()
+    const chainSelector = useRef<HTMLDivElement>()
+    const hide = useRef<HTMLDivElement>()
     const { searchTerms, appliedFilter, ascendingOrder, chainFilter, activeSearch } = useSelector((state: RootState) => state.searchState)
     const [filterOpen, setFilterOpen] = useState<boolean>(false)
     const [displaySortingIcon, setDisplaySortingIcon] = useState<boolean>(true)
     const [dropDownOpen, setDropDownOpen] = useState<boolean>(false)
-    const [expandChainSelector, setExpandChainSelector] = useState<boolean>(false)
     const [showChainSelectorCloseIcon, setChainSelectorCloseIcon] = useState<boolean>(false)
     const [chainSelectorPlaceholder, setChainSelectorPlaceholder] = useState<string>('')
+    const [chainSelectorOpen, setChainSelectorOpen] = useState<boolean>(false)
 
     const [showSearchBarCloseIcon, setShowSearchBarCloseIcon] = useState<boolean>(false)
     const [expandSearchBar, setExpandSearchBar] = useState<boolean>(false)
@@ -32,6 +33,16 @@ const SearchBar = ({ networks, displayDataLength }: { networks: string[], displa
 
     const invalidSearch = expandSearchBar && !displayDataLength && !!searchTerms
 
+    const estimateStringWidth = (string: string, fontSize: string) => {
+        const element = document.createElement('span');
+        element.innerHTML = string;
+        element.style.fontSize = fontSize;
+        document.body.appendChild(element);
+        const width = element.getBoundingClientRect().width;
+        document.body.removeChild(element);
+        return width;
+    }
+
     const hasScrollbar = () => {
         return document.documentElement.scrollHeight > document.documentElement.clientHeight;
     };
@@ -58,30 +69,42 @@ const SearchBar = ({ networks, displayDataLength }: { networks: string[], displa
     }
 
     //CHAIN SELECTOR
-    const handleChainSelectorTransitionEnd = () => {
-        if (expandChainSelector) {
-            chainSelector.current?.click()
-            setChainSelectorCloseIcon(true)
-            setChainSelectorPlaceholder('Select Network')
+    const handleNetworkFilterChange = (e: SelectChangeEvent<string>, child: React.ReactNode) => {
+        if (hide.current) {
+            hide.current.style.opacity = '0'
         }
-    }
+        const width = estimateStringWidth(e.target.value, '16px');
+        dispatch(updateSearchState({ chainFilter: e.target.value }));
+        setTimeout(() => {
+            chainSelector.current.style.width = `${width + 80}px`;
 
-    const handleExpandChainSelector = () => {
-        setExpandChainSelector(true)
+        }, 200);
+        setTimeout(() => {
+            hide.current.style.opacity = '1'
+        }, 600)
     }
 
-    const handleShrinkChainSelector = () => {
-        if (expandChainSelector) {
-            setExpandChainSelector(false)
-            setChainSelectorCloseIcon(false)
+    const handleExpandChainSelector = () => {
+        if (!chainSelectorOpen) {
+            chainSelector.current.style.width = '195px'
             setTimeout(() => {
-                dispatch(updateSearchState({
-                    chainFilter: ''
-                }))
+                setChainSelectorCloseIcon(true)
+                setChainSelectorPlaceholder('Select Network')
+                setChainSelectorOpen(true)
             }, 300)
         }
     }
 
+    const handleShrinkChainSelector = () => {
+        dispatch(updateSearchState({ chainFilter: '' }))
+        setChainSelectorPlaceholder('')
+        setChainSelectorCloseIcon(false)
+        setChainSelectorOpen(false)
+        setTimeout(() => {
+            chainSelector.current.style.width = '48px'
+        }, 100)
+    }
+
     //SEARCH BAR
     const handleSearchBarTransitionEnd = () => {
         if (expandSearchBar) {
@@ -117,15 +140,6 @@ const SearchBar = ({ networks, displayDataLength }: { networks: string[], displa
         //eslint-disable-next-line
     }, [showSearchBarCloseIcon])
 
-    useEffect(() => {
-        if (!showChainSelectorCloseIcon) {
-            setChainSelectorPlaceholder('')
-            handleShrinkChainSelector()
-        }
-
-        //eslint-disable-next-line
-    }, [showChainSelectorCloseIcon])
-
     return (
         <Box sx={{ gap: '12px', display: 'flex', alignItems: 'center' }}>
             <Tooltip
@@ -166,21 +180,22 @@ const SearchBar = ({ networks, displayDataLength }: { networks: string[], displa
                 </Box>
             </Tooltip>
             <Box
-                onTransitionEnd={handleChainSelectorTransitionEnd}
+                ref={chainSelector}
                 onClick={handleExpandChainSelector}
                 gap={'10px'}
                 display={'flex'}
                 alignItems={'center'}
                 style={{ pointerEvents: invalidSearch ? 'none' : 'auto' }}
-                sx={styles.searchBar(expandChainSelector, false, "195px")}
+                sx={styles.chainSelector}
             >
-                <Box sx={{ display: 'flex', marginLeft: '-9px' }}>
+                <Box onClick={chainSelectorOpen ? () => setDropDownOpen(true) : null} sx={{ display: 'flex', marginLeft: '-9px' }}>
                     <SvgComponent
                         type={LAYOUT_CONTENT_TEXT.GlobusIcon}
                         style={{ color: invalidSearch ? '#88898c' : COLORS.STEEL_GRAY[20] }}
                     />
                 </Box>
                 <Select
+                    ref={hide}
                     disabled={invalidSearch || !networks.length}
                     MenuProps={styles.chainSelectorDropoDownMenuProps}
                     disableUnderline
@@ -201,10 +216,10 @@ const SearchBar = ({ networks, displayDataLength }: { networks: string[], displa
                     }
                     sx={styles.chainSelectorDropDown}
                     value={chainFilter}
-                    onChange={(e) => dispatch(updateSearchState({ chainFilter: e.target.value }))}
+                    onChange={handleNetworkFilterChange}
                     IconComponent={() => null}
-                    endAdornment={showChainSelectorCloseIcon ?
-                        <Box marginLeft={'-24px'} onClick={() => setChainSelectorCloseIcon(false)}>
+                    endAdornment={showChainSelectorCloseIcon && chainSelectorOpen ?
+                        <Box marginLeft={'-24px'} onClick={handleShrinkChainSelector}>
                             <CancelRounded sx={{ ...styles.cancelIcon, color: invalidSearch ? '#88898c' : COLORS.STEEL_GRAY[40] }} />
                         </Box>
                         : null}
diff --git a/apps/frontend/src/core/presentation/components/SearchBar/styles.ts b/apps/frontend/src/core/presentation/components/SearchBar/styles.ts
index b761f7d..f8593f6 100644
--- a/apps/frontend/src/core/presentation/components/SearchBar/styles.ts
+++ b/apps/frontend/src/core/presentation/components/SearchBar/styles.ts
@@ -26,9 +26,19 @@ export const styles = {
             padding: '15px 24px 15px 20px',
             height: '48px',
             border: noResult ? `1px solid ${COLORS.RED[60]}` : `1px solid ${COLORS.STEEL_GRAY[70]}`,
-            borderRadius: '64px'
+            borderRadius: '64px',
         }
     },
+    chainSelector: {
+        width: '48px',
+        cursor: 'pointer',
+        transition: 'width .4s ease-in-out',
+        padding: '15px 24px 15px 20px',
+        height: '48px',
+        border: `1px solid ${COLORS.STEEL_GRAY[70]}`,
+        borderRadius: '64px',
+
+    },
     menuItem: {
         height: '48px',
         borderRadius: '10px',
@@ -64,8 +74,6 @@ export const styles = {
                 background: COLORS.STEEL_GRAY[100],
                 borderRadius: '8px',
                 marginLeft: '-18px',
-                minWidth: '195px',
-                maxWidth: '195px'
             },
         },
     },
diff --git a/apps/frontend/src/core/utilities/ProjectUtils.tsx b/apps/frontend/src/core/utilities/ProjectUtils.tsx
index 6aa8a6c..c72d49e 100644
--- a/apps/frontend/src/core/utilities/ProjectUtils.tsx
+++ b/apps/frontend/src/core/utilities/ProjectUtils.tsx
@@ -38,8 +38,12 @@ export const handleLinkOut = (url: string) => {
   }
 }
 
-export const setBlobToB64Img = async (imgData: Blob, setter: React.Dispatch<React.SetStateAction<string>>) => {
-  const b64ImgString = await blobToBase64(imgData)
+export const setBlobToB64Img = async (imgData: Blob, setter: React.Dispatch<React.SetStateAction<string>>, thumbnail?: { MAX_WIDTH: number, MAX_HEIGHT: number }) => {
+  const b64ImgString = await blobToBase64(imgData) as string
+  if (thumbnail) {
+    createThumbnail(b64ImgString, thumbnail, setter);
+    return
+  }
   setter(b64ImgString as string)
 }
 
@@ -72,3 +76,116 @@ export const formatAddress = (text: string, sliceIndex: number): string => {
   }
   return `${text.slice(0, sliceIndex)}...${text.slice(len - 4, len)}`
 }
+
+const applySharpeningFilter = (
+  r: number,
+  g: number,
+  b: number,
+  alpha: number,
+  neighborPixels: [number, number, number, number][]
+) => {
+  const kernel = [
+    [-0.1, -0.1, -0.1],
+    [-0.1, 1.8, -0.1],
+    [-0.1, -0.1, -0.1],
+  ];
+
+  let rSharp = 0;
+  let gSharp = 0;
+  let bSharp = 0;
+
+  for (let i = 0; i < neighborPixels.length; i++) {
+    const [rNeighbor, gNeighbor, bNeighbor, alphaNeighbor] = neighborPixels[i];
+    const weight = kernel[Math.floor(i / 3)][i % 3];
+
+    rSharp += rNeighbor * weight;
+    gSharp += gNeighbor * weight;
+    bSharp += bNeighbor * weight;
+  }
+
+  rSharp = Math.max(0, Math.min(255, rSharp));
+  gSharp = Math.max(0, Math.min(255, gSharp));
+  bSharp = Math.max(0, Math.min(255, bSharp));
+
+  return [rSharp, gSharp, bSharp];
+};
+
+const getNeighborPixels = (data: Uint8ClampedArray, width: number, height: number, row: number, col: number) => {
+  const pixels: [number, number, number, number][] = [];
+
+  for (let i = row - 1; i <= row + 1; i++) {
+    for (let j = col - 1; j <= col + 1; j++) {
+      if (i >= 0 && i < height && j >= 0 && j < width) {
+        const pixelIndex = (i * width + j) * 4;
+        pixels.push([data[pixelIndex], data[pixelIndex + 1], data[pixelIndex + 2], data[pixelIndex + 3]]);
+      }
+    }
+  }
+
+  return pixels;
+};
+
+const sharpenImage = (imageData: ImageData) => {
+  const { data, width, height } = imageData;
+  const filteredData = new Uint8ClampedArray(data.length);
+
+  for (let i = 0; i < height; i++) {
+    for (let j = 0; j < width; j++) {
+      const pixelIndex = (i * width + j) * 4;
+      const r = data[pixelIndex];
+      const g = data[pixelIndex + 1];
+      const b = data[pixelIndex + 2];
+
+      const alpha = data[pixelIndex + 3];
+      const neighborPixels = getNeighborPixels(data, width, height, i, j);
+
+      const [rSharp, gSharp, bSharp] = applySharpeningFilter(r, g, b, alpha, neighborPixels);
+      filteredData[pixelIndex] = rSharp;
+      filteredData[pixelIndex + 1] = gSharp;
+      filteredData[pixelIndex + 2] = bSharp;
+      filteredData[pixelIndex + 3] = alpha;
+    }
+  }
+
+  return new ImageData(filteredData, width, height);
+};
+
+export const createThumbnail = (originalImg: string, target: { MAX_WIDTH: number, MAX_HEIGHT: number }, callback: React.Dispatch<React.SetStateAction<string>>) => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  const { MAX_WIDTH, MAX_HEIGHT } = target;
+
+  const img = new Image();
+  img.crossOrigin = 'anonymous';
+  img.onload = function () {
+    let width = img.width;
+    let height = img.height;
+
+    const aspectRatio = width / height;
+    const targetWidth = Math.min(MAX_WIDTH, width);
+    const targetHeight = Math.min(MAX_HEIGHT, height);
+
+    if (width > targetWidth || height > targetHeight) {
+      if (aspectRatio > 1) {
+        width = targetWidth;
+        height = width / aspectRatio;
+      } else {
+        height = targetHeight;
+        width = height * aspectRatio;
+      }
+    }
+
+    canvas.width = width;
+    canvas.height = height;
+    ctx.drawImage(img, 0, 0, width, height);
+
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const filteredData = sharpenImage(imageData);
+    ctx.putImageData(filteredData, 0, 0);
+
+    const dataUrl = canvas.toDataURL('image/png');
+    callback(dataUrl);
+  };
+  img.src = originalImg;
+};
diff --git a/apps/frontend/src/features/allowlists/presentation/components/Allowlist.tsx b/apps/frontend/src/features/allowlists/presentation/components/Allowlist.tsx
index bcd0696..a2379e5 100644
--- a/apps/frontend/src/features/allowlists/presentation/components/Allowlist.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/components/Allowlist.tsx
@@ -20,7 +20,6 @@ const Allowlist = ({ props }: { props: FetchedAllowlist }) => {
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [isSignedUp, setIsSignedUp] = useState<boolean>(false);
   const [expired, setExpired] = useState<boolean>(false);
-  const [remainingTime, setRemainingTime] = useState<number>(null)
   const [loading, setLoading] = useState<boolean>(true)
   const { connectedAddress } = useSelector((state: RootState) => state.userState);
   const [bannerPreview, setBannerPreview] = useState<string>('')
@@ -59,30 +58,21 @@ const Allowlist = ({ props }: { props: FetchedAllowlist }) => {
   }, [expired, isAdmin, isSignedUp])
 
   useEffect(() => {
-    const now = Date.now()
-    const end = props.end_date.valueOf()
+    const now = Date.now();
+    const end = props.end_date.valueOf();
 
-    if (now > end) {
-      setExpired(true)
-      return
-    }
+    let remainingTime = Math.abs(now - end);
+    setExpired(remainingTime <= 0);
 
-    setRemainingTime(Math.abs(now - end))
-    setExpired(false)
-  }, [])
-
-  useEffect(() => {
-    if (remainingTime === null) return
-
-    if (remainingTime > 0) {
-      setTimeout(() => {
-        setRemainingTime(remainingTime - 1000)
-      }, 1000)
-      return
-    }
+    const intervalId = setInterval(() => {
+      remainingTime -= 1000;
+      setExpired(remainingTime <= 0);
+    }, 1000);
 
-    setExpired(true)
-  }, [remainingTime])
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [props.end_date]);
 
   useEffect(() => {
     try {
@@ -143,7 +133,6 @@ const Allowlist = ({ props }: { props: FetchedAllowlist }) => {
                 allowListStyles.smallScreenPanel :
                 allowListStyles.panel}
           >
-            {/* <RemainingTimer time={remainingTime} /> */}
             {panelContentHandler()}
           </Box>
           {/* END-CONTENT */}
diff --git a/apps/frontend/src/features/allowlists/presentation/components/AllowlistCreationPreview.tsx b/apps/frontend/src/features/allowlists/presentation/components/AllowlistCreationPreview.tsx
index 2698e59..43e49fa 100644
--- a/apps/frontend/src/features/allowlists/presentation/components/AllowlistCreationPreview.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/components/AllowlistCreationPreview.tsx
@@ -104,7 +104,7 @@ export const AllowlistCreationPreview = () => {
                             <Typography sx={allowlistPreviewStyles.title}>
                                 {FIELD.title}
                             </Typography>
-                            <Typography sx={allowlistPreviewStyles.subTitle}>
+                            <Typography sx={allowlistPreviewStyles.subTitle} style={{ whiteSpace: FIELD.title === 'Description' ? 'pre-wrap' : undefined }}>
                                 {FIELD.subtitle}
                             </Typography>
                         </Box>
diff --git a/apps/frontend/src/features/allowlists/presentation/components/CreateAllowlistForm.tsx b/apps/frontend/src/features/allowlists/presentation/components/CreateAllowlistForm.tsx
index 801a4bc..eb295a7 100644
--- a/apps/frontend/src/features/allowlists/presentation/components/CreateAllowlistForm.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/components/CreateAllowlistForm.tsx
@@ -156,10 +156,12 @@ const CreateAllowlistForm = () => {
               variant='subtitle2'
               color={COLORS.STEEL_GRAY[20]}
             >
-              This image will be used as profile image on your allowlist page. 350 x 350 recommended.
+              This image will be used as profile image on your allowlist page. 350 x 350 recommended (max 0.3mb in size)
             </Typography>
             <Box sx={allowlistDetailsStyles.fileUploaderHolder}>
               <FileUploader
+                maxSize={0.3}
+                onSizeError={() => alert('Invalid size')}
                 handleChange={(file: Blob) => dispatch(updateAllowlistObject({ image: file }))}
                 types={acceptedImgTypes}
                 children={
@@ -195,9 +197,11 @@ const CreateAllowlistForm = () => {
               variant='subtitle2'
               color={COLORS.STEEL_GRAY[20]}
             >
-              This image will appear at the top of your allow list page. 1400 x 400 px recommended.            </Typography>
+              This image will appear at the top of your allow list page. 1400 x 400 px recommended. (max 0.5mb in size)           </Typography>
             <Box sx={allowlistDetailsStyles.bannerUploaderHolder}>
               <FileUploader
+                onSizeError={() => alert('Invalid')}
+                maxSize={0.5}
                 handleChange={(file: Blob) => dispatch(updateAllowlistObject({ banner_image: file }))}
                 types={acceptedImgTypes}
                 children={
diff --git a/apps/frontend/src/features/allowlists/presentation/components/GridCardContent.tsx b/apps/frontend/src/features/allowlists/presentation/components/GridCardContent.tsx
index 5dff88a..df89e0d 100644
--- a/apps/frontend/src/features/allowlists/presentation/components/GridCardContent.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/components/GridCardContent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { Oval as OvalLoader } from 'svg-loaders-react'
+import ClipLoader from "react-spinners/ClipLoader";
 import { Box, Typography } from "@mui/material"
 
 import { COLORS } from "../../../../core/theme/colors"
@@ -26,13 +26,13 @@ const GridCardContent = ({ allowlist, width }: { allowlist: FetchedAllowlist, wi
 
     useEffect(() => {
         if (allowlist.banner_image) {
-            setBlobToB64Img(allowlist.banner_image, setBanner)
+            setBlobToB64Img(allowlist.banner_image, setBanner, { MAX_WIDTH: 284, MAX_HEIGHT: 210 })
         } else {
             setBanner('')
         }
 
         if (allowlist.image) {
-            setBlobToB64Img(allowlist.image, setAvatar)
+            setBlobToB64Img(allowlist.image, setAvatar, { MAX_WIDTH: 128, MAX_HEIGHT: 128 })
         } else {
             setAvatar('')
         }
@@ -65,7 +65,7 @@ const GridCardContent = ({ allowlist, width }: { allowlist: FetchedAllowlist, wi
 
     return (
         <Box onClick={() => navigateToRoute(`/allowlist/${allowlist.url}`)} sx={{ ...generalStyles.gridDataBox, width: width, minWidth: width }}>
-            {contentLoaded() ? null : <OvalLoader style={{ stroke: COLORS.LIGHT_BLUE[90] }} />}
+            {contentLoaded() ? null : <ClipLoader color={COLORS.LIGHT_BLUE[90]} />}
             <Box sx={{ display: contentLoaded() ? 'flex' : 'none', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
                 <Box sx={generalStyles.imgHolder}>
                     <img
diff --git a/apps/frontend/src/features/allowlists/presentation/components/GridList.tsx b/apps/frontend/src/features/allowlists/presentation/components/GridList.tsx
index 9a0696b..04268a8 100644
--- a/apps/frontend/src/features/allowlists/presentation/components/GridList.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/components/GridList.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { useSelector } from 'react-redux';
 import { Box, Grid } from '@mui/material';
-import { Oval as OvalLoader } from 'svg-loaders-react'
+import ClipLoader from "react-spinners/ClipLoader";
 
 import { FetchedAllowlist } from "../../../../core/store/allowlist";
 import GridCardContent from './GridCardContent';
@@ -19,7 +19,7 @@ const GridList = ({ data, withCreateBox }) => {
   return (
     <Box sx={{ width: '100%' }}
     >
-      {activeSearch ? <OvalLoader style={{ position: 'absolute', top: '50%', left: '50%', stroke: COLORS.LIGHT_BLUE[90] }} /> :
+      {activeSearch ? <ClipLoader color={COLORS.LIGHT_BLUE[90]} cssOverride={{ position: 'absolute', top: '50%', left: '50%' }} /> :
         <Fragment>
           <Box sx={allowlistDetailsStyles.contentHolder} >
             <Grid container
diff --git a/apps/frontend/src/features/allowlists/presentation/components/UserView.tsx b/apps/frontend/src/features/allowlists/presentation/components/UserView.tsx
index 1aea77e..4fa9924 100644
--- a/apps/frontend/src/features/allowlists/presentation/components/UserView.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/components/UserView.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Box, Typography, Divider, Input, Button } from '@mui/material'
-import { Oval as OvalLoader } from 'svg-loaders-react'
+import ClipLoader from "react-spinners/ClipLoader";
 
 import { SvgComponent, LAYOUT_CONTENT_TEXT } from '../../../../core/presentation/components/Layout/helpers'
 import { COLORS } from '../../../../core/theme/colors'
@@ -75,7 +75,7 @@ const UserView = ({ props }: { props: FetchedAllowlist }) => {
             }
 
             //HANDLING TWITTER REQUIREMENTS
-            if (isTwitterRequired && !!connectedSocialMedia.twitter.id) {
+            if (isTwitterRequired && !!connectedSocialMedia.twitter?.id) {
                 //If page to follow
                 if (!!props.twitter_account_to_follow) {
                     const isFollowingAcc = await IS_FOLLOWING_TWITTER_ACCOUNT(connectedSocialMedia.twitter.id, props.twitter_account_to_follow)
@@ -206,7 +206,7 @@ const UserView = ({ props }: { props: FetchedAllowlist }) => {
         }
     }, [props.id, connectedAddress, connectedSocialMedia.discord.id, connectedSocialMedia.twitter.id])
 
-    return loading ? <OvalLoader style={{ stroke: COLORS.LIGHT_BLUE[90] }} /> : (
+    return loading ? <ClipLoader color={COLORS.LIGHT_BLUE[90]} /> : (
         <Fragment>
             <Dialog />
             <Box sx={allowListStyles.title} style={{ flexDirection: isUserJoined ? 'column-reverse' : 'column' }}>
diff --git a/apps/frontend/src/features/allowlists/presentation/components/helpers.tsx b/apps/frontend/src/features/allowlists/presentation/components/helpers.tsx
index cf3e93d..a25fd8a 100644
--- a/apps/frontend/src/features/allowlists/presentation/components/helpers.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/components/helpers.tsx
@@ -14,7 +14,7 @@ import useSocialMedia from "../../../../core/utilities/CustomHooks/useSocialMedi
 import { getTimeFromNumber } from "../../../../core/utilities/ProjectUtils";
 import { LinkBox } from "../../../../core/theme/helpers";
 import { updateModalState } from "../../../../core/store/modals";
-import { Oval as OvalLoader } from 'svg-loaders-react'
+import ClipLoader from "react-spinners/ClipLoader";
 
 import { headerStyles } from "../../../../core/presentation/components/Layout/styles";
 import { allowlistPreviewStyles, allowListStyles, menuStyles } from "./styles";
@@ -263,7 +263,7 @@ export const SocialMediaBoxes = ({
 
     const getCheckBox = (action: SocialMediaAction[]) => {
         if (ongoingEligibilityCheck) {
-            return <OvalLoader style={{ width: '24px', height: '24px', margin: '9px', stroke: COLORS.LIGHT_BLUE[90] }} />
+            return <ClipLoader color={COLORS.LIGHT_BLUE[90]} cssOverride={{ width: '24px', height: '24px', margin: '9px' }} />
         }
         return <Checkbox
             value={action}
diff --git a/apps/frontend/src/features/allowlists/presentation/pages/AllowlistPage.tsx b/apps/frontend/src/features/allowlists/presentation/pages/AllowlistPage.tsx
index 4fff48c..c6315f0 100644
--- a/apps/frontend/src/features/allowlists/presentation/pages/AllowlistPage.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/pages/AllowlistPage.tsx
@@ -20,8 +20,8 @@ function AllowlistPage() {
     if (loading) {
       return <StyledPuffLoader />
     }
-    if (Object.keys(allowlist || {}).length) {
-      return <Allowlist props={{ ...allowlist, end_date: new Date(allowlist.end_date) }} />
+    if (allowlist && Object.keys(allowlist).length) {
+      return <Allowlist props={allowlist} />
     }
   }, [loading, allowlist])
 
@@ -31,7 +31,7 @@ function AllowlistPage() {
       try {
         setLoading(true)
         const res = await GET_ALLOWLIST_DETAILS(id)
-        const data = res.data;
+        let data = res.data;
         delete data.createdAt;
         delete data.updatedAt;
         if (data.discord_invite_link) {
@@ -40,6 +40,7 @@ function AllowlistPage() {
             data.server_role = await getServerRoleNameByRoleId(data.discord_invite_link, data.server_role)
           }
         }
+        data = { ...data, end_date: new Date(data.end_date) }
         setAllowlist(data);
 
       } catch (error) {
diff --git a/apps/frontend/src/features/allowlists/presentation/pages/CreateAllowlist.tsx b/apps/frontend/src/features/allowlists/presentation/pages/CreateAllowlist.tsx
index 437fda1..76b1e2c 100644
--- a/apps/frontend/src/features/allowlists/presentation/pages/CreateAllowlist.tsx
+++ b/apps/frontend/src/features/allowlists/presentation/pages/CreateAllowlist.tsx
@@ -36,20 +36,22 @@ const CreateAllowlistPage = () => {
 
   const cleanUp = () => {
     dispatch(updateAllowlistObject(initialAllowlistState))
-    dispatch(updateUser({
-      connectedSocialMedia: {
-        twitter: {
-          id: connectedSocialMedia.twitter.id,
-          userName: connectedSocialMedia.twitter.userName,
-          guild: emptyGuildInfo
-        },
-        discord: {
-          id: connectedSocialMedia.discord.id,
-          userName: connectedSocialMedia.discord.userName,
-          guild: emptyGuildInfo
+    if (connectedSocialMedia && (connectedSocialMedia.twitter || connectedSocialMedia.discord)) {
+      dispatch(updateUser({
+        connectedSocialMedia: {
+          twitter: {
+            id: connectedSocialMedia.twitter ? connectedSocialMedia.twitter.id : '',
+            userName: connectedSocialMedia.twitter ? connectedSocialMedia.twitter.userName : '',
+            guild: emptyGuildInfo
+          },
+          discord: {
+            id: connectedSocialMedia.discord ? connectedSocialMedia.discord.id : '',
+            userName: connectedSocialMedia.discord ? connectedSocialMedia.discord.userName : '',
+            guild: emptyGuildInfo
+          }
         }
-      }
-    }))
+      }))
+    }
   }
 
   // CLEAN-UP
diff --git a/apps/frontend/src/features/allowlists/presentation/pages/styles.ts b/apps/frontend/src/features/allowlists/presentation/pages/styles.ts
index ebd6af6..770e70c 100644
--- a/apps/frontend/src/features/allowlists/presentation/pages/styles.ts
+++ b/apps/frontend/src/features/allowlists/presentation/pages/styles.ts
@@ -160,10 +160,8 @@ export const generalStyles = {
         background: COLORS.STEEL_GRAY[100]
     },
     spinner: {
-        width: '40px',
-        height: '80vh',
+        marginTop: '40vh',
         display: 'flex',
         alignSelf: 'center',
-        stroke: COLORS.LIGHT_BLUE[90]
     }
 }
diff --git a/apps/frontend/src/features/app-routes/presentation/components/Home/index.tsx b/apps/frontend/src/features/app-routes/presentation/components/Home/index.tsx
index 321ed3f..8c7fea0 100644
--- a/apps/frontend/src/features/app-routes/presentation/components/Home/index.tsx
+++ b/apps/frontend/src/features/app-routes/presentation/components/Home/index.tsx
@@ -1,25 +1,45 @@
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { Box } from '@mui/material';
+import ClipLoader from "react-spinners/ClipLoader";
 
-import Features from './Features';
-import MainCard from './MainCard';
-import LowerSection from './LowerSection';
+const FeaturesPreview = lazy(() => import('./Features'));
+const MainCardPreview = lazy(() => import('./MainCard'));
+const LowerSectionPreview = lazy(() => import('./LowerSection'));
 
 import { homeStyles } from './styles';
+import { COLORS } from '../../../../../core/theme/colors';
+import { GradientText } from '../../../../../core/theme/helpers';
 
+const InitialLoading = () => {
+  return (
+    <Box style={{
+      fontSize: '40px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '80vh'
+    }}>
+      <ClipLoader
+        color={COLORS.LIGHT_BLUE[90]}
+        loading={true}
+        size={35}
+        aria-label="Loading Spinner"
+        data-testid="loader"
+      />
+    </Box>
+  )
+}
 const Home = () => {
-
   return (
     <Box id='Home' gap={8} sx={homeStyles.holder}>
-      <Box
-        id='MainCardAndFeaturesHolder'
-        sx={homeStyles.mainCardAndFeadturesHolder}
-      >
-        <MainCard />
-        <Features />
-      </Box>
-      <LowerSection />
-    </Box>
+      <Suspense fallback={<InitialLoading />}>
+        <Box id='MainCardAndFeaturesHolder' sx={homeStyles.mainCardAndFeadturesHolder}>
+          <MainCardPreview />
+          <FeaturesPreview />
+        </Box>
+        <LowerSectionPreview />
+      </Suspense >
+    </Box >
   );
 };
 
diff --git a/package-lock.json b/package-lock.json
index fc7ed0f..a1f288a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
         "react-redux": "^8.0.2",
         "react-responsive": "^9.0.2",
         "react-scroll-parallax": "^3.3.2",
+        "react-spinners": "^0.13.8",
         "redux": "^4.2.0",
         "redux-persist": "^6.0.0",
         "reflect-metadata": "^0.1.13",
@@ -16629,6 +16630,15 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -32077,6 +32087,12 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "requires": {}
+    },
     "react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index 5f7f9e4..f3d95b2 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "react-redux": "^8.0.2",
     "react-responsive": "^9.0.2",
     "react-scroll-parallax": "^3.3.2",
+    "react-spinners": "^0.13.8",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
     "reflect-metadata": "^0.1.13",
diff --git a/webpack-frontend.config.js b/webpack-frontend.config.js
index 19209f9..34594f5 100644
--- a/webpack-frontend.config.js
+++ b/webpack-frontend.config.js
@@ -60,7 +60,25 @@ module.exports = function () {
         mode: process.env.NODE_ENV,
         externals: [],
         devtool: devTool,
-        optimization,
+        optimization: {
+            ...optimization,
+            splitChunks: {
+                chunks: 'all',
+                minSize: 30000,
+                maxSize: 100000,
+                minChunks: 1,
+                maxAsyncRequests: 5,
+                maxInitialRequests: 3,
+                automaticNameDelimiter: '~',
+                cacheGroups: {
+                    vendor: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: 'vendor',
+                        chunks: 'all',
+                    },
+                },
+            },
+        },
         entry: Path.join(srcPath, 'main.tsx'),
         output: {
             filename: '[name]-[fullhash].js',