diff --git a/apps/portfolio/src/app/page.tsx b/apps/portfolio/src/app/page.tsx
index 3479f32..cb5f5a3 100644
--- a/apps/portfolio/src/app/page.tsx
+++ b/apps/portfolio/src/app/page.tsx
@@ -5,23 +5,30 @@ import type { Metadata } from "next"
 import Badge from "@/components/Badge"
 import ProjectCard from "@/components/ProjectCard"
 
-const projects: JSX.Element[] = []
-const skills: JSX.Element[] = portfolio.skills.map((slug) => {
-    return <Badge key={slug} slug={slug} />
-})
+function getSkills(): JSX.Element[] {
+    return portfolio.skills.map((slug) => {
+        return <Badge key={slug} slug={slug} />
+    })
+}
 
-for (const projectID in portfolio.projects) {
-    projects.push(
-        <ProjectCard
-            key={projectID}
-            projectID={projectID}
-            project={
-                portfolio.projects[
-                    projectID as keyof typeof portfolio.projects
-                ] as PortfolioProject
-            }
-        />
-    )
+function getProjects(): JSX.Element[] {
+    const projects = []
+
+    for (const projectID in portfolio.projects) {
+        projects.push(
+            <ProjectCard
+                key={projectID}
+                projectID={projectID}
+                project={
+                    portfolio.projects[
+                        projectID as keyof typeof portfolio.projects
+                    ] as PortfolioProject
+                }
+            />
+        )
+    }
+
+    return projects
 }
 
 export const metadata: Metadata = {
@@ -34,8 +41,8 @@ export default function Page() {
         <>
             <h1 className="mb-8">developomp's Portfolio</h1>
             <hr />
-            <div className="my-4 flex flex-wrap">{skills}</div>
-            <div className="projects">{projects}</div>
+            <div className="my-4 flex flex-wrap gap-2">{getSkills()}</div>
+            <div className="projects">{getProjects()}</div>
         </>
     )
 }
diff --git a/apps/portfolio/src/app/project/[id]/page.tsx b/apps/portfolio/src/app/project/[id]/page.tsx
index 47029d5..ac4cc64 100644
--- a/apps/portfolio/src/app/project/[id]/page.tsx
+++ b/apps/portfolio/src/app/project/[id]/page.tsx
@@ -76,7 +76,7 @@ export default async function Project({ params }: Props) {
                     <FontAwesomeIcon className="h-12" icon={faGithub} />
                 </Link>
             </div>
-            <div className="flex flex-wrap">
+            <div className="flex flex-wrap gap-2">
                 {data.badges.map((slug) => {
                     return <Badge key={slug} slug={slug} />
                 })}
diff --git a/apps/portfolio/src/components/Badge/Badge.tsx b/apps/portfolio/src/components/Badge/Badge.tsx
index 41acc85..d65758b 100644
--- a/apps/portfolio/src/components/Badge/Badge.tsx
+++ b/apps/portfolio/src/components/Badge/Badge.tsx
@@ -6,7 +6,7 @@ interface BadgeProps {
     slug: string
 }
 
-const sharedBadgeStyles = "mb-2 mr-2 flex w-fit items-center px-2 py-1 text-xs"
+const sharedBadgeStyles = "flex w-fit items-center px-2 py-1 text-xs"
 const sharedInnerBadgeStyles = "badge mr-1 inline-block w-6 align-middle"
 
 export default async function Badge({ slug }: BadgeProps) {
diff --git a/apps/portfolio/src/components/ProjectCard/ProjectCard.tsx b/apps/portfolio/src/components/ProjectCard/ProjectCard.tsx
index 8172852..492a4e0 100644
--- a/apps/portfolio/src/components/ProjectCard/ProjectCard.tsx
+++ b/apps/portfolio/src/components/ProjectCard/ProjectCard.tsx
@@ -22,7 +22,7 @@ export default function ProjectCard({ projectID, project }: ProjectCardProps) {
                     alt="project thumbnail"
                 />
 
-                <div className="flex flex-wrap">
+                <div className="flex flex-wrap gap-2">
                     {project.badges.map((badge) => (
                         <Badge key={badge} slug={badge} />
                     ))}