diff --git a/packages/app/src/systems/Ecosystem/components/FeaturedProjects/animations.css b/packages/app/src/systems/Ecosystem/components/FeaturedProjects/CSS/animations.css
similarity index 100%
rename from packages/app/src/systems/Ecosystem/components/FeaturedProjects/animations.css
rename to packages/app/src/systems/Ecosystem/components/FeaturedProjects/CSS/animations.css
diff --git a/packages/app/src/systems/Ecosystem/components/FeaturedProjects/FeaturedProjects.tsx b/packages/app/src/systems/Ecosystem/components/FeaturedProjects/FeaturedProjects.tsx
index cd6846ff..02b01c4b 100644
--- a/packages/app/src/systems/Ecosystem/components/FeaturedProjects/FeaturedProjects.tsx
+++ b/packages/app/src/systems/Ecosystem/components/FeaturedProjects/FeaturedProjects.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import type { Project } from '../../types';
 import { ProjectDetailPanel } from '../ProjectDetailPanel';
 
-import './animations.css';
+import './CSS/animations.css';
 import CardComponent from './CardComponent';
 import { styles } from './styles';
 
diff --git a/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/ProjectDetailPanel.tsx b/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/ProjectDetailPanel.tsx
index 420944c7..1aab62d6 100644
--- a/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/ProjectDetailPanel.tsx
+++ b/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/ProjectDetailPanel.tsx
@@ -1,4 +1,3 @@
-import { cssObj } from '@fuel-ui/css';
 import { Badge, Box, Button, Alert, TagCloseButton } from '@fuel-ui/react';
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
@@ -7,6 +6,8 @@ import type { Project } from '../../types';
 import { ProjectBanner } from '../ProjectBanner';
 import { ProjectImage } from '../ProjectImage';
 
+import { styles } from './styles';
+
 type ProjectDetailPanelProps = {
   project: Project;
   onClose: () => void;
@@ -52,253 +53,104 @@ const ProjectDetailPanel: FC<ProjectDetailPanelProps> = ({
   return (
     <>
       {isPanelVisible && (
-        <Box
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            zIndex: 999,
-            transition: 'backdropFilter 0.5s ease',
-          }}
-        ></Box>
-      )}
-      <Box ref={panelRef} css={styles.panelStyle} data-mobile={isMobileView}>
-        <Box>
-          <ProjectBanner
-            name={project.name}
-            banner={project.banner}
-            style={{
-              backgroundSize: 'contain',
-              backgroundRepeat: 'no-repeat',
-              backgroundPosition: 'center',
-              width: '100%',
-              height: '200px',
-              objectFit: 'cover',
-              objectPosition: 'center',
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              zIndex: 1,
-              borderBottom: '1px solid #2E2E2E',
-            }}
-          />
-          <Box css={styles.closeButton}>
-            <TagCloseButton onPress={onClose} />
+        <Box ref={panelRef} css={styles.panelStyle} data-mobile={isMobileView}>
+          <Box>
+            <ProjectBanner
+              name={project.name}
+              banner={project.banner}
+              style={styles.banner}
+            />
+            <Box css={styles.closeButton}>
+              <TagCloseButton onPress={onClose} />
+            </Box>
           </Box>
-        </Box>
-        <Box css={styles.imageContainer}>
-          <Box css={styles.image}>
-            <ProjectImage name={project.name} image={project.image} />
+          <Box css={styles.imageContainer}>
+            <Box css={styles.image}>
+              <ProjectImage name={project.name} image={project.image} />
+            </Box>
           </Box>
-        </Box>
 
-        <h1
-          style={{
-            fontSize: '24px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: '10px',
-            position: 'relative',
-            marginTop: '130px',
-          }}
-        >
-          {project.name}
-        </h1>
-        <Box
-          style={{
-            display: 'flex',
-            gap: '10px',
-            marginBottom: '10px',
-            flexWrap: 'wrap',
-            position: 'relative',
-          }}
-        >
-          {project.tags?.map((tag, index) => (
-            <Badge
-              key={index}
-              variant="outlined"
-              style={{
-                fontSize: 'small',
-                fontWeight: '500',
-                position: 'relative',
-              }}
-            >
-              {tag}
-            </Badge>
-          ))}
-        </Box>
-        {project.url && (
-          <Button
-            as="a"
-            href={project.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            variant="solid"
-            size="sm"
-            leftIcon="ExternalLink"
-            color="intentsBase8"
-            intent="info"
-            css={styles.websiteButton}
-          >
-            Visit Website
-          </Button>
-        )}
-
-        <p style={{ fontSize: '16px', marginBottom: '20px' }}>
-          {project.description}
-        </p>
-        <Alert status="info">
-          <Alert.Description style={{ fontSize: '13px' }}>
-            This content is provided by the app developers. Links and content
-            are not verified nor endorsed by Fuel. If you have any questions,
-            please contact the project directly.
-          </Alert.Description>
-        </Alert>
-        <h2
-          style={{
-            fontSize: '18px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: '10px',
-            position: 'relative',
-          }}
-        >
-          Socials
-        </h2>
-        <Box css={styles.socials}>
-          {project.twitter && (
-            <Button
-              as="a"
-              href={project.twitter}
-              target="_blank"
-              rel="noopener noreferrer"
-              size="sm"
-              intent="error"
-              variant="ghost"
-              leftIcon={'BrandX'}
-            >
-              Twitter
-            </Button>
-          )}
-          {project.github && (
-            <Button
-              as="a"
-              href={project.github}
-              target="_blank"
-              rel="noopener noreferrer"
-              size="sm"
-              leftIcon={'BrandGithub'}
-              variant="ghost"
-            >
-              GitHub
-            </Button>
-          )}
-          {project.discord && (
+          <h1 style={styles.h1}>{project.name}</h1>
+          <Box style={styles.tagBox}>
+            {project.tags?.map((tag, index) => (
+              <Badge key={index} variant="outlined" style={styles.badge}>
+                {tag}
+              </Badge>
+            ))}
+          </Box>
+          {project.url && (
             <Button
               as="a"
-              href={project.discord}
+              href={project.url}
               target="_blank"
               rel="noopener noreferrer"
+              variant="solid"
               size="sm"
+              leftIcon="ExternalLink"
+              color="intentsBase8"
               intent="info"
-              leftIcon={'BrandDiscord'}
-              variant="ghost"
+              css={styles.websiteButton}
             >
-              Discord
+              Visit Website
             </Button>
           )}
+
+          <p style={styles.paragraph}>{project.description}</p>
+          <Alert status="info">
+            <Alert.Description style={{ fontSize: '13px' }}>
+              This content is provided by the app developers. Links and content
+              are not verified nor endorsed by Fuel. If you have any questions,
+              please contact the project directly.
+            </Alert.Description>
+          </Alert>
+          <h2 style={styles.h2}>Socials</h2>
+          <Box css={styles.socials}>
+            {project.twitter && (
+              <Button
+                as="a"
+                href={project.twitter}
+                target="_blank"
+                rel="noopener noreferrer"
+                size="sm"
+                intent="error"
+                variant="ghost"
+                leftIcon={'BrandX'}
+              >
+                Twitter
+              </Button>
+            )}
+            {project.github && (
+              <Button
+                as="a"
+                href={project.github}
+                target="_blank"
+                rel="noopener noreferrer"
+                size="sm"
+                leftIcon={'BrandGithub'}
+                variant="ghost"
+              >
+                GitHub
+              </Button>
+            )}
+            {project.discord && (
+              <Button
+                as="a"
+                href={project.discord}
+                target="_blank"
+                rel="noopener noreferrer"
+                size="sm"
+                intent="info"
+                leftIcon={'BrandDiscord'}
+                variant="ghost"
+              >
+                Discord
+              </Button>
+            )}
+          </Box>
         </Box>
-      </Box>
+      )}
     </>
   );
 };
 
-const styles = {
-  panelStyle: cssObj({
-    flexDirection: 'column',
-    alignItems: 'start',
-    position: 'fixed',
-    right: 0,
-    top: 0,
-    height: '95%',
-    width: '50%',
-    backgroundColor: '$intentsBase1',
-    padding: '30px',
-    overflowY: 'auto',
-    zIndex: 1000,
-    borderLeft: '0.5px solid #2E2E2E',
-    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.6)',
-    '&[data-mobile="true"]': {
-      width: '85%',
-      overflowY: 'scroll',
-    },
-  }),
-  closeButton: cssObj({
-    display: 'flex',
-    position: 'fixed',
-    top: 15,
-    right: 15,
-    backgroundColor: '$intentsBase3',
-    borderRadius: '$md',
-    height: '25px',
-    width: '25px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 4,
-  }),
-  imageContainer: cssObj({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '110px',
-    height: '110px',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    marginBottom: '20px',
-    position: 'relative',
-    border: '1px solid $intentsBase8',
-    backgroundColor: '$intentsBase1',
-    top: '110px',
-    zIndex: 2,
-  }),
-  image: cssObj({
-    position: 'relative',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: '6.5px',
-    transform: 'scale(285%)',
-  }),
-  backgroundImage: cssObj({
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    height: '275px',
-    width: '100%',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    zIndex: 1,
-    borderBottom: '1px solid #2E2E2E',
-  }),
-  websiteButton: cssObj({
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    overflow: 'hidden',
-    position: 'absolute',
-    top: '182.5px',
-    right: '25px',
-    zIndex: 2,
-  }),
-  socials: cssObj({
-    display: 'flex',
-    flexDirection: 'row',
-    gap: '10px',
-    marginBottom: '25px',
-  }),
-};
-
 export default ProjectDetailPanel;
diff --git a/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/styles.tsx b/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/styles.tsx
new file mode 100644
index 00000000..5870b1ab
--- /dev/null
+++ b/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/styles.tsx
@@ -0,0 +1,132 @@
+import { cssObj } from '@fuel-ui/css';
+
+export const styles = {
+  panelStyle: cssObj({
+    flexDirection: 'column',
+    alignItems: 'start',
+    position: 'fixed',
+    right: 0,
+    top: 0,
+    height: '95%',
+    width: '50%',
+    backgroundColor: '$intentsBase1',
+    padding: '30px',
+    overflowY: 'auto',
+    zIndex: 1000,
+    borderLeft: '0.5px solid #2E2E2E',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.6)',
+    '&[data-mobile="true"]': {
+      width: '85%',
+      overflowY: 'scroll',
+    },
+  }),
+  closeButton: cssObj({
+    display: 'flex',
+    position: 'fixed',
+    top: 15,
+    right: 15,
+    backgroundColor: '$intentsBase3',
+    borderRadius: '$md',
+    height: '25px',
+    width: '25px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 4,
+  }),
+  imageContainer: cssObj({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '110px',
+    height: '110px',
+    borderRadius: '12px',
+    overflow: 'hidden',
+    marginBottom: '20px',
+    position: 'relative',
+    border: '1px solid $intentsBase8',
+    backgroundColor: '$intentsBase1',
+    top: '110px',
+    zIndex: 2,
+  }),
+  image: cssObj({
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: '6.5px',
+    transform: 'scale(285%)',
+  }),
+  backgroundImage: cssObj({
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    height: '275px',
+    width: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 1,
+    borderBottom: '1px solid #2E2E2E',
+  }),
+  websiteButton: cssObj({
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    overflow: 'hidden',
+    position: 'absolute',
+    top: '182.5px',
+    right: '25px',
+    zIndex: 2,
+  }),
+  socials: cssObj({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '10px',
+    marginBottom: '25px',
+  }),
+  badge: cssObj({
+    fontSize: 'small',
+    fontWeight: '500',
+    position: 'relative',
+  }),
+  h1: cssObj({
+    fontSize: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '10px',
+    position: 'relative',
+    marginTop: '130px',
+  }),
+  h2: cssObj({
+    fontSize: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '10px',
+    position: 'relative',
+  }),
+  tagBox: cssObj({
+    display: 'flex',
+    gap: '10px',
+    marginBottom: '10px',
+    flexWrap: 'wrap',
+    position: 'relative',
+  }),
+  banner: cssObj({
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    width: '100%',
+    height: '200px',
+    objectFit: 'cover',
+    objectPosition: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 1,
+    borderBottom: '1px solid #2E2E2E',
+  }),
+  paragraph: cssObj({
+    fontSize: '16px',
+    marginBottom: '20px',
+  }),
+};
diff --git a/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx b/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx
index 702c1fc0..84208cdd 100644
--- a/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx
+++ b/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx
@@ -1,4 +1,3 @@
-import { cssObj } from '@fuel-ui/css';
 import { Box, Card, Button, Text } from '@fuel-ui/react';
 import { motion } from 'framer-motion';
 import { type FC } from 'react';
@@ -10,6 +9,7 @@ import { ProjectDetailPanel } from '../ProjectDetailPanel';
 import { ProjectImage } from '../ProjectImage';
 
 import { ProjectItemLoader } from './ProjectItemLoader';
+import { styles } from './styles';
 
 const MotionCard = motion(Card);
 
@@ -119,14 +119,7 @@ export const ProjectItem: ProjectItemComponent = ({
               {'Building'}
             </Button>
           )}
-          <Box
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              gap: '10px',
-              marginLeft: 'auto',
-            }}
-          >
+          <Box style={styles.boxBottom}>
             {twitter && (
               <Button
                 as="a"
@@ -181,108 +174,4 @@ export const ProjectItem: ProjectItemComponent = ({
   );
 };
 
-const styles = {
-  card: cssObj({
-    transition: 'transform 0.2s ease-in-out, border 0.2s ease-in-out',
-    display: 'flex',
-    flexDirection: 'column',
-    '&:hover': {
-      textDecoration: 'none !important',
-      border: '1px solid $intentsBase8',
-      backgroundImage:
-        'linear-gradient($transparent, rgb(15, 15, 15)) !important',
-      'html[class="fuel_light-theme"] &': {
-        backgroundImage:
-          'linear-gradient($transparent, rgb(245, 245, 245)) !important',
-      },
-    },
-  }),
-  image: cssObj({
-    height: '40px',
-    width: '40px',
-    border: '1px solid $intentsBase8',
-    borderRadius: '$sm',
-    overflow: 'hidden',
-  }),
-  cardFooter: cssObj({
-    flex: '0 0 20px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  }),
-  details: cssObj({
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  }),
-
-  link: cssObj({
-    textDecoration: 'underline',
-    padding: '0',
-    pointerEvents: 'none',
-  }),
-  dot: cssObj({
-    width: '$1',
-    height: '$1',
-    borderRadius: '50%',
-    border: '1px solid #A9F6D5',
-    background: '#00F58C',
-    boxShadow: '0px 0px 4px 0px #00F58C',
-  }),
-  dotBuilding: cssObj({
-    width: '$1',
-    height: '$1',
-    borderRadius: '50%',
-    border: '1px solid #E5C06F',
-    background: '#F3B42C',
-    boxShadow: '0px 0px 4px 0px #F3B42C',
-  }),
-  tag: cssObj({
-    color: '$intentsBase12',
-    borderRadius: '$sm',
-    padding: '0 $1',
-    backgroundColor: '$gray5',
-    marginRight: '8px',
-  }),
-  title: cssObj({
-    width: '100%',
-    fontWeight: 'bold',
-  }),
-  body: cssObj({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: '$4',
-    justifyContent: 'flex-start',
-    padding: '$6',
-    flex: '1 1 auto',
-    minHeight: '95px',
-  }),
-  statusContainer: cssObj({
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    flexWrap: 'wrap',
-    marginTop: 'auto',
-  }),
-  panelVisible: cssObj({
-    position: 'fixed',
-    right: 0,
-    top: 0,
-    height: '100%',
-    width: '100%',
-    animation: 'slideIn 0.5s forwards',
-  }),
-
-  panelHidden: cssObj({
-    position: 'fixed',
-    right: 0,
-    top: 0,
-    height: '100%',
-    width: '100%',
-    animation: 'slideOut 0.5s forwards',
-  }),
-};
-
 ProjectItem.Loader = ProjectItemLoader;
diff --git a/packages/app/src/systems/Ecosystem/components/ProjectItem/styles.tsx b/packages/app/src/systems/Ecosystem/components/ProjectItem/styles.tsx
new file mode 100644
index 00000000..1a281390
--- /dev/null
+++ b/packages/app/src/systems/Ecosystem/components/ProjectItem/styles.tsx
@@ -0,0 +1,110 @@
+import { cssObj } from '@fuel-ui/css';
+
+export const styles = {
+  card: cssObj({
+    transition: 'transform 0.2s ease-in-out, border 0.2s ease-in-out',
+    display: 'flex',
+    flexDirection: 'column',
+    '&:hover': {
+      textDecoration: 'none !important',
+      border: '1px solid $intentsBase8',
+      backgroundImage:
+        'linear-gradient($transparent, rgb(15, 15, 15)) !important',
+      'html[class="fuel_light-theme"] &': {
+        backgroundImage:
+          'linear-gradient($transparent, rgb(245, 245, 245)) !important',
+      },
+    },
+  }),
+  image: cssObj({
+    height: '40px',
+    width: '40px',
+    border: '1px solid $intentsBase8',
+    borderRadius: '$sm',
+    overflow: 'hidden',
+  }),
+  cardFooter: cssObj({
+    flex: '0 0 20px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  }),
+  details: cssObj({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  }),
+
+  link: cssObj({
+    textDecoration: 'underline',
+    padding: '0',
+    pointerEvents: 'none',
+  }),
+  dot: cssObj({
+    width: '$1',
+    height: '$1',
+    borderRadius: '50%',
+    border: '1px solid #A9F6D5',
+    background: '#00F58C',
+    boxShadow: '0px 0px 4px 0px #00F58C',
+  }),
+  dotBuilding: cssObj({
+    width: '$1',
+    height: '$1',
+    borderRadius: '50%',
+    border: '1px solid #E5C06F',
+    background: '#F3B42C',
+    boxShadow: '0px 0px 4px 0px #F3B42C',
+  }),
+  tag: cssObj({
+    color: '$intentsBase12',
+    borderRadius: '$sm',
+    padding: '0 $1',
+    backgroundColor: '$gray5',
+    marginRight: '8px',
+  }),
+  title: cssObj({
+    width: '100%',
+    fontWeight: 'bold',
+  }),
+  body: cssObj({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: '$4',
+    justifyContent: 'flex-start',
+    padding: '$6',
+    flex: '1 1 auto',
+    minHeight: '95px',
+  }),
+  statusContainer: cssObj({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    flexWrap: 'wrap',
+    marginTop: 'auto',
+  }),
+  panelVisible: cssObj({
+    position: 'fixed',
+    right: 0,
+    top: 0,
+    height: '100%',
+    width: '100%',
+    animation: 'slideIn 0.5s forwards !important',
+  }),
+  panelHidden: cssObj({
+    position: 'fixed',
+    right: 0,
+    top: 0,
+    height: '100%',
+    width: '100%',
+    animation: 'slideOut 0.5s forwards !important',
+  }),
+  boxBottom: cssObj({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '10px',
+    marginLeft: 'auto',
+  }),
+};