diff --git a/packages/app/src/app/(embed)/bridge/embed/buy/page.tsx b/packages/app/src/app/(embed)/bridge/embed/buy/page.tsx
index a4140dd6d..562379118 100644
--- a/packages/app/src/app/(embed)/bridge/embed/buy/page.tsx
+++ b/packages/app/src/app/(embed)/bridge/embed/buy/page.tsx
@@ -2,7 +2,7 @@ import { PathnameEnum } from '@/bridge/constants';
 
 import EmbedPageWrapper from '../EmbedPageWrapper';
 
-export default async function EmbeddedBuyPage({
+export default function EmbeddedBuyPage({
   searchParams,
 }: {
   searchParams: {
diff --git a/packages/app/src/app/(embed)/bridge/embed/page.tsx b/packages/app/src/app/(embed)/bridge/embed/page.tsx
index 6e966e0bb..eb711fbaa 100644
--- a/packages/app/src/app/(embed)/bridge/embed/page.tsx
+++ b/packages/app/src/app/(embed)/bridge/embed/page.tsx
@@ -2,7 +2,7 @@ import { PathnameEnum } from '@/bridge/constants';
 
 import EmbedPageWrapper from './EmbedPageWrapper';
 
-export default async function EmbededPage({
+export default function EmbededPage({
   searchParams,
 }: {
   searchParams: {
diff --git a/packages/app/src/app/(with-sidebar)/(portal)/bookmarks/page.tsx b/packages/app/src/app/(with-sidebar)/(portal)/bookmarks/page.tsx
index c870ddc74..aafca62ff 100644
--- a/packages/app/src/app/(with-sidebar)/(portal)/bookmarks/page.tsx
+++ b/packages/app/src/app/(with-sidebar)/(portal)/bookmarks/page.tsx
@@ -1,11 +1,4 @@
-import dynamic from 'next/dynamic';
-
-const MyProjects = dynamic(
-  () => import('@/portal/components/MyProjects').then((mod) => mod.MyProjects),
-  {
-    ssr: false,
-  },
-);
+import { MyProjects } from '@/portal/components/MyProjects';
 
 export default function Page() {
   return <MyProjects />;
diff --git a/packages/app/src/app/(with-sidebar)/bridge/buy/page.tsx b/packages/app/src/app/(with-sidebar)/bridge/buy/page.tsx
index f95ae70af..b7ab90c0e 100644
--- a/packages/app/src/app/(with-sidebar)/bridge/buy/page.tsx
+++ b/packages/app/src/app/(with-sidebar)/bridge/buy/page.tsx
@@ -14,6 +14,6 @@ export const metadata: Metadata = {
     "On-ramp directly to Arbitrum with one of several third party providers. Built to scale Ethereum, Arbitrum brings you 10x lower costs while inheriting Ethereum's security model. Arbitrum is a Layer 2 Optimistic Rollup.",
 };
 
-export default async function BridgeBuyPage({ searchParams }: Props) {
+export default function BridgeBuyPage({ searchParams }: Props) {
   return <BridgePageWrapper searchParams={searchParams} redirectPath={PathnameEnum.BUY} />;
 }
diff --git a/packages/app/src/app/(with-sidebar)/bridge/page.tsx b/packages/app/src/app/(with-sidebar)/bridge/page.tsx
index ef731eb6b..bef3ea7b2 100644
--- a/packages/app/src/app/(with-sidebar)/bridge/page.tsx
+++ b/packages/app/src/app/(with-sidebar)/bridge/page.tsx
@@ -10,7 +10,7 @@ type Props = {
   searchParams: { [key: string]: string | string[] | undefined };
 };
 
-export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
+export function generateMetadata({ searchParams }: Props): Metadata {
   const sourceChainSlug = (
     typeof searchParams.sourceChain === 'string' ? searchParams.sourceChain : 'ethereum'
   ) as ChainKeyQueryParam;
@@ -70,6 +70,6 @@ export async function generateMetadata({ searchParams }: Props): Promise<Metadat
   };
 }
 
-export default async function BridgePage({ searchParams }: Props) {
+export default function BridgePage({ searchParams }: Props) {
   return <BridgePageWrapper searchParams={searchParams} redirectPath={PathnameEnum.BRIDGE} />;
 }
diff --git a/packages/portal/components/Arcade/ArcadeWeekPlan.tsx b/packages/portal/components/Arcade/ArcadeWeekPlan.tsx
index 038f06641..a4cce272e 100644
--- a/packages/portal/components/Arcade/ArcadeWeekPlan.tsx
+++ b/packages/portal/components/Arcade/ArcadeWeekPlan.tsx
@@ -1,18 +1,14 @@
 import { LockClosedIcon } from '@heroicons/react/24/outline';
-import dynamic from 'next/dynamic';
 import { PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { formatDate, parseDateInEasternTime } from '@/common/dateUtils';
 import { ARCADE_LOCKED_PROJECT_DETAILS, getProjectDetailsById } from '@/common/projects';
+import Countdown from '@/components/Countdown';
 
 import { ArcadeProjectWithMissionLink } from './ArcadeProjectWithMissionLink';
 import { ArcadeWeeklyPlan } from './plans';
 
-const Countdown = dynamic(() => import('@/components/Countdown'), {
-  ssr: false,
-});
-
 export const ArcadeLabel = ({ children }: PropsWithChildren) => {
   return <div className="mt-3 text-lg text-white">{children}</div>;
 };
diff --git a/packages/portal/components/Community/CommunityEvents.tsx b/packages/portal/components/Community/CommunityEvents.tsx
index a23cd902d..4c75f7c3e 100644
--- a/packages/portal/components/Community/CommunityEvents.tsx
+++ b/packages/portal/components/Community/CommunityEvents.tsx
@@ -1,13 +1,7 @@
-import dynamic from 'next/dynamic';
-
 import { ArbitrumWebsiteNotionCmsRow } from '@/common/types';
 import { CalendarCard } from '@/components/CalendarCard';
-import { LoadingPlaceholderCarousel } from '@/components/Carousel/LoadingPlaceholderCarousel';
 
-const Carousel = dynamic(() => import('@/components/Carousel/Carousel'), {
-  ssr: false,
-  loading: LoadingPlaceholderCarousel,
-});
+import Carousel from '../Carousel/Carousel';
 
 export const CommunityEvents = ({
   calendarEvents,
diff --git a/packages/portal/components/CommunitySpotlight.tsx b/packages/portal/components/CommunitySpotlight.tsx
index af42e1c9b..23c297a24 100644
--- a/packages/portal/components/CommunitySpotlight.tsx
+++ b/packages/portal/components/CommunitySpotlight.tsx
@@ -1,19 +1,13 @@
-import dynamic from 'next/dynamic';
 import { PropsWithChildren } from 'react';
 
 import { getOrbitChainDetailsById } from '@/common/orbitChains';
 import { getProjectDetailsById } from '@/common/projects';
 import { EntityType } from '@/common/types';
 
-import { LoadingPlaceholderCarousel } from './Carousel/LoadingPlaceholderCarousel';
+import Carousel from './Carousel/Carousel';
 import { OrbitItemBox } from './OrbitItemBox';
 import { ProjectItemBox } from './ProjectItemBox';
 
-const Carousel = dynamic(() => import('@/components/Carousel/Carousel'), {
-  ssr: false,
-  loading: LoadingPlaceholderCarousel,
-});
-
 const TitleWrapper = ({
   title,
   children,
diff --git a/packages/portal/components/HomePage/HeroBanner.tsx b/packages/portal/components/HomePage/HeroBanner.tsx
index 0fabb54ca..786e44302 100644
--- a/packages/portal/components/HomePage/HeroBanner.tsx
+++ b/packages/portal/components/HomePage/HeroBanner.tsx
@@ -43,10 +43,10 @@ export const HeroBanner = () => {
       <div className="absolute left-0 top-0 z-10 h-full w-full bg-gradient-to-t from-[#491BCA] from-[65%] to-transparent md:from-[35%] lg:bg-gradient-to-r lg:to-[90%]" />
 
       <div className="absolute left-[-30px] top-[-10px] flex h-full min-w-[600px] scale-110 flex-wrap gap-2 lg:left-auto lg:right-[-50px]">
-        {projectsToHighlight.map((project) => {
+        {projectsToHighlight.map((project, index) => {
           return (
             <Image
-              key={project.slug}
+              key={`${project.slug}-${index}`}
               alt={`${project.title} logo`}
               src={project.images.logoUrl}
               width={60}
diff --git a/packages/portal/components/HomePage/Resources.tsx b/packages/portal/components/HomePage/Resources.tsx
index 03a9bea00..b935d4f4f 100644
--- a/packages/portal/components/HomePage/Resources.tsx
+++ b/packages/portal/components/HomePage/Resources.tsx
@@ -1,14 +1,9 @@
-import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { twMerge } from 'tailwind-merge';
 
 import { Card, CardType } from '@/components/Card';
-import { LoadingPlaceholderCarousel } from '@/components/Carousel/LoadingPlaceholderCarousel';
 
-const Carousel = dynamic(() => import('@/components/Carousel/Carousel'), {
-  ssr: false,
-  loading: LoadingPlaceholderCarousel,
-});
+import Carousel from '../Carousel/Carousel';
 
 const ResourceCard = ({
   name,
diff --git a/packages/portal/components/ProjectItemBox.tsx b/packages/portal/components/ProjectItemBox.tsx
index 4f7a9baad..00cd52126 100644
--- a/packages/portal/components/ProjectItemBox.tsx
+++ b/packages/portal/components/ProjectItemBox.tsx
@@ -113,157 +113,159 @@ const ItemContent = ({
   };
 
   return (
-    <button
-      className={twMerge(
-        'relative flex h-full w-full flex-col p-4 hover:opacity-100',
-        isSpotlightMode
-          ? 'group box-border overflow-hidden rounded-lg border border-white/10 p-0'
-          : 'gap-2',
-      )}
-      aria-label={`${title} Website`}
-      onClick={handleProjectClick}
-    >
+    <div className="relative h-full w-full transition-opacity hover:opacity-100 group-hover:opacity-100">
       <BookmarkButton
         displayMode={displayMode}
         onClick={handleBookmarkButtonClick}
         isBookmarked={isBookmarked}
         isSpotlightMode={isSpotlightMode}
       />
-      {/* Show cover-pic with the tile if it's a spotlight mode */}
-      {isSpotlightMode && images.bannerUrl && (
-        <div
-          className="absolute top-0 h-full w-full bg-cover bg-top bg-no-repeat opacity-70 transition-all duration-300 group-hover:opacity-90 lg:bg-center"
-          style={{ backgroundImage: `url(${images.bannerUrl})` }}
-        />
-      )}{' '}
-      {/* Normal project contents */}
-      <div
+      <button
         className={twMerge(
-          'flex w-full flex-row gap-2',
+          'relative flex h-full w-full flex-col p-4',
           isSpotlightMode
-            ? 'z-10 h-full w-full flex-col justify-end gap-3 bg-gradient-to-t from-black/70 to-transparent p-4 transition-all duration-300 group-hover:to-black/50'
-            : '',
-          isPreviewMode ? 'items-center gap-4' : '',
-          isCompactMode ? 'gap-3' : '',
+            ? 'group box-border overflow-hidden rounded-lg border border-white/10 p-0'
+            : 'gap-2',
         )}
+        aria-label={`${title} Website`}
+        onClick={handleProjectClick}
       >
-        {/* Logos */}
-        <div className="flex shrink-0 grow-0 flex-col gap-2 overflow-hidden bg-cover bg-center">
-          {/* Project logo */}
-
+        {/* Show cover-pic with the tile if it's a spotlight mode */}
+        {isSpotlightMode && images.bannerUrl && (
           <div
-            className={twMerge(
-              'relative inline-block max-w-[70px] overflow-hidden rounded-md',
-              isSpotlightMode ? 'h-[45px] w-[45px]' : 'bg-white p-[1px]',
-              isCompactMode ? 'h-[40px] w-[40px]' : '',
-            )}
-          >
-            <div className="[&:hover_span]:opacity-100">
-              <Image
-                alt={`${title} logo`}
-                src={images.logoUrl}
-                width={isCompactMode ? 40 : isSpotlightMode ? 45 : 60}
-                height={isCompactMode ? 40 : isSpotlightMode ? 45 : 60}
-                className="rounded-md"
-              />
-            </div>
-
-            {project.meta.isArbitrumNative && (
-              <span
-                className={twMerge(
-                  'mt-[1px] flex cursor-help flex-wrap whitespace-break-spaces rounded-md rounded-t-none bg-ocl-blue px-0 py-[5px] text-[10px]',
-                )}
-                style={{
-                  width: isCompactMode ? '40px' : isSpotlightMode ? '45px' : '60px',
-                }}
-              >
-                <Tooltip
-                  content={
-                    <p className="text-xs">
-                      Arbitrum Native - Projects that either operate exclusively on Arbitrum or
-                      launched on Arbitrum as one of their primary deployments.
-                    </p>
-                  }
-                >
-                  Arbitrum Native
-                </Tooltip>
-              </span>
-            )}
-          </div>
-        </div>
+            className="absolute top-0 h-full w-full bg-cover bg-top bg-no-repeat opacity-70 transition-all duration-300 group-hover:opacity-90 lg:bg-center"
+            style={{ backgroundImage: `url(${images.bannerUrl})` }}
+          />
+        )}{' '}
+        {/* Normal project contents */}
+        <div
+          className={twMerge(
+            'flex w-full flex-row gap-2',
+            isSpotlightMode
+              ? 'z-10 h-full w-full flex-col justify-end gap-3 bg-gradient-to-t from-black/70 to-transparent p-4 transition-all duration-300 group-hover:to-black/50'
+              : '',
+            isPreviewMode ? 'items-center gap-4' : '',
+            isCompactMode ? 'gap-3' : '',
+          )}
+        >
+          {/* Logos */}
+          <div className="flex shrink-0 grow-0 flex-col gap-2 overflow-hidden bg-cover bg-center">
+            {/* Project logo */}
 
-        {/* Content */}
-        <div className={twMerge('relative grow text-left', isSpotlightMode ? 'grow-0' : '')}>
-          <div
-            className={twMerge(
-              'flex flex-col gap-3 px-2',
-              isSpotlightMode || isPreviewMode || isCompactMode ? 'gap-1 px-0' : '',
-            )}
-          >
-            <h5
+            <div
               className={twMerge(
-                'relative flex items-center gap-2 text-left text-lg font-semibold leading-7',
-                isPreviewMode ? 'text-base' : '',
-                isCompactMode ? 'text-sm' : '',
+                'relative inline-block max-w-[70px] overflow-hidden rounded-md',
+                isSpotlightMode ? 'h-[45px] w-[45px]' : 'bg-white p-[1px]',
+                isCompactMode ? 'h-[40px] w-[40px]' : '',
               )}
             >
-              {title}
-            </h5>
-            <p
+              <div className="[&:hover_span]:opacity-100">
+                <Image
+                  alt={`${title} logo`}
+                  src={images.logoUrl}
+                  width={isCompactMode ? 40 : isSpotlightMode ? 45 : 60}
+                  height={isCompactMode ? 40 : isSpotlightMode ? 45 : 60}
+                  className="rounded-md"
+                />
+              </div>
+
+              {project.meta.isArbitrumNative && (
+                <span
+                  className={twMerge(
+                    'mt-[1px] flex cursor-help flex-wrap whitespace-break-spaces rounded-md rounded-t-none bg-ocl-blue px-0 py-[5px] text-[10px]',
+                  )}
+                  style={{
+                    width: isCompactMode ? '40px' : isSpotlightMode ? '45px' : '60px',
+                  }}
+                >
+                  <Tooltip
+                    content={
+                      <p className="text-xs">
+                        Arbitrum Native - Projects that either operate exclusively on Arbitrum or
+                        launched on Arbitrum as one of their primary deployments.
+                      </p>
+                    }
+                  >
+                    Arbitrum Native
+                  </Tooltip>
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className={twMerge('relative grow text-left', isSpotlightMode ? 'grow-0' : '')}>
+            <div
               className={twMerge(
-                'text-sm opacity-70',
-                isSpotlightMode || isPreviewMode ? 'line-clamp-2 opacity-100' : 'line-clamp-3',
-                isPreviewMode && 'max-w-[90%]',
-                isCompactMode && 'hidden',
+                'flex flex-col gap-3 px-2',
+                isSpotlightMode || isPreviewMode || isCompactMode ? 'gap-1 px-0' : '',
               )}
             >
-              {displayMode === 'reward-spotlight' && project.liveIncentives?.rewards
-                ? `Claim ARB rewards on ${project.chains[0]} from ${formatOptionalDate(
-                    project.liveIncentives?.startDate ?? null,
-                    'MMM DD',
-                  )}.`
-                : description}
-            </p>
-
-            {displayMode === 'reward-spotlight' && project.liveIncentives?.rewards && (
-              <span className="z-20 mt-2 w-fit rounded-md bg-black p-1 px-2 font-mono text-xs text-white">
-                {project.liveIncentives.rewards / 1000}k ARB Rewards
-              </span>
-            )}
-
-            {!isSpotlightMode && (
-              <p
+              <h5
                 className={twMerge(
-                  'flex flex-wrap justify-start gap-3 text-center leading-6 text-gray-700',
-                  isPreviewMode ? 'absolute right-0 top-0 font-mono uppercase' : '',
-                  isCompactMode ? 'gap-1' : '',
+                  'relative flex items-center gap-2 text-left text-lg font-semibold leading-7',
+                  isPreviewMode ? 'text-base' : '',
+                  isCompactMode ? 'text-sm' : '',
                 )}
               >
-                {!meta.isLive && !isPreviewMode && !isCompactMode && (
-                  <span className="inline-flex items-start justify-start gap-2 break-words rounded bg-orange px-1.5 py-0.5 text-xs font-normal text-dark-lime">
-                    Coming Soon
-                  </span>
+                {title}
+              </h5>
+              <p
+                className={twMerge(
+                  'text-sm opacity-70',
+                  isSpotlightMode || isPreviewMode ? 'line-clamp-2 opacity-100' : 'line-clamp-3',
+                  isPreviewMode && 'max-w-[90%]',
+                  isCompactMode && 'hidden',
                 )}
-                {subcategories.slice(0, isPreviewMode ? 1 : 2).map((subcategory) => (
-                  <span
-                    key={subcategory.id}
-                    className={twMerge(
-                      'inline-flex items-start justify-start gap-2 truncate break-words rounded bg-black px-1.5 py-0.5 text-xs font-normal text-white/60',
-                      isCompactMode ? 'bg-white/25 text-white' : '',
-                    )}
-                  >
-                    {isPreviewMode
-                      ? subcategory.title.split(' ')[0] // this is to show only the first word of the subcategory in preview mode. eg. 'Infra & Tools (Others)' becomes 'Infra'
-                      : // this is to break the title after /, i.e. Lending/Borrowing, which is considered as one word by CSS
-                        subcategory.title.replaceAll('/', ' / ')}
-                  </span>
-                ))}
+              >
+                {displayMode === 'reward-spotlight' && project.liveIncentives?.rewards
+                  ? `Claim ARB rewards on ${project.chains[0]} from ${formatOptionalDate(
+                      project.liveIncentives?.startDate ?? null,
+                      'MMM DD',
+                    )}.`
+                  : description}
               </p>
-            )}
+
+              {displayMode === 'reward-spotlight' && project.liveIncentives?.rewards && (
+                <span className="z-20 mt-2 w-fit rounded-md bg-black p-1 px-2 font-mono text-xs text-white">
+                  {project.liveIncentives.rewards / 1000}k ARB Rewards
+                </span>
+              )}
+
+              {!isSpotlightMode && (
+                <p
+                  className={twMerge(
+                    'flex flex-wrap justify-start gap-3 text-center leading-6 text-gray-700',
+                    isPreviewMode ? 'absolute right-0 top-0 font-mono uppercase' : '',
+                    isCompactMode ? 'gap-1' : '',
+                  )}
+                >
+                  {!meta.isLive && !isPreviewMode && !isCompactMode && (
+                    <span className="inline-flex items-start justify-start gap-2 break-words rounded bg-orange px-1.5 py-0.5 text-xs font-normal text-dark-lime">
+                      Coming Soon
+                    </span>
+                  )}
+                  {subcategories.slice(0, isPreviewMode ? 1 : 2).map((subcategory) => (
+                    <span
+                      key={subcategory.id}
+                      className={twMerge(
+                        'inline-flex items-start justify-start gap-2 truncate break-words rounded bg-black px-1.5 py-0.5 text-xs font-normal text-white/60',
+                        isCompactMode ? 'bg-white/25 text-white' : '',
+                      )}
+                    >
+                      {isPreviewMode
+                        ? subcategory.title.split(' ')[0] // this is to show only the first word of the subcategory in preview mode. eg. 'Infra & Tools (Others)' becomes 'Infra'
+                        : // this is to break the title after /, i.e. Lending/Borrowing, which is considered as one word by CSS
+                          subcategory.title.replaceAll('/', ' / ')}
+                    </span>
+                  ))}
+                </p>
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </button>
+      </button>
+    </div>
   );
 };
 
@@ -282,8 +284,8 @@ const ItemBoxLayout = ({
   return (
     <div
       className={twMerge(
-        'h-full min-h-[150px] w-full overflow-hidden rounded-md bg-default-black hover:bg-default-black-hover',
-        project.meta.isLive ? '' : ' opacity-80',
+        'group h-full min-h-[150px] w-full overflow-hidden rounded-md bg-default-black hover:bg-default-black-hover',
+        project.meta.isLive ? '' : 'opacity-80',
         displayMode === 'bookmarked' && 'lg:h-[160px]',
         isSpotlightMode && 'h-[200px] rounded-lg',
         isPreviewMode && 'h-fit min-h-[100px]',
diff --git a/packages/portal/components/ProjectPanel/SimilarProjects.tsx b/packages/portal/components/ProjectPanel/SimilarProjects.tsx
index f773dd7bd..8d8257de2 100644
--- a/packages/portal/components/ProjectPanel/SimilarProjects.tsx
+++ b/packages/portal/components/ProjectPanel/SimilarProjects.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { CHAINS, getChainSlugFromTitle } from '@/common/chains';
@@ -68,7 +69,7 @@ export const SimilarProjects = ({
       {/* <hr className="border-white/40" /> */}
       <div className="flex flex-col gap-4" onClick={similarProjectsClicked}>
         {similarProjects.map((project, index) => (
-          <>
+          <React.Fragment key={project.slug}>
             <ProjectItemBox
               key={`similar-${project.id}`}
               lazyload={false}
@@ -77,7 +78,7 @@ export const SimilarProjects = ({
               displayMode="compact"
             />
             {index < similarProjects.length - 1 && <hr className="border-white/20" />}
-          </>
+          </React.Fragment>
         ))}
       </div>
     </div>
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 01d6f3cbe..70ac3bc97 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -19,7 +19,7 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/app/*": ["./packages/portal/app/*"],
+      "@/app/*": ["./packages/app/*"],
       "@/common/*": ["./packages/portal/common/*"],
       "@/components/*": ["./packages/portal/components/*"],
       "@/hooks/*": ["./packages/portal/hooks/*"],