diff --git a/src/components/header.js b/src/components/header.js
index b6290c129..1232d8f03 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -108,7 +108,7 @@ const navigation = [
             {
                 text: "Join the community",
                 subtext: "Social channels",
-                url: "/#join-our-global-community",
+                url: "/community/",
                 icon: "menu/forum.svg",
                 type: 'internal'
             },
diff --git a/src/components/modules/community-item.js b/src/components/modules/community-item.js
new file mode 100644
index 000000000..5158f4e77
--- /dev/null
+++ b/src/components/modules/community-item.js
@@ -0,0 +1,43 @@
+import React from "react";
+import Image from "../imageComponent";
+import { Link } from "gatsby";
+
+export default function CommunityItem({ imageClass, content, className }) {
+	if (content.type === "internal") {
+		return (
+			<div className={className}>
+				<div className={`community-item`}>
+					<div className='link-wrapper'>
+						<Link className='link' to={`${content.url}`}>
+							<div className={`logo-container ${imageClass}`}>
+								<Image alt={content.title} filename={content.image} />
+							</div>
+						</Link>
+					</div>
+					<div className='text-box'>
+						<div className={"title"}>{content.title}</div>
+						{content.text && <div className={"text"}>{content.text}</div>}
+					</div>
+				</div>
+			</div>
+		);
+	} else if (content.type === "external" || content.type === undefined) {
+		return (
+			<div className={className}>
+				<div className={`community-item`}>
+					<div className='link-wrapper'>
+						<a className='link' href={content.url} target={"_blank"} rel={"noreferrer"} aria-label={content.text}>
+							<div className={`logo-container ${imageClass}`}>
+								<Image alt={content.title} filename={content.image} />
+							</div>
+						</a>
+					</div>
+					<div className='text-box'>
+						<div className={"title"}>{content.title}</div>
+						{content.text && <div className={"text"}>{content.text}</div>}
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
diff --git a/src/datas/community/content.js b/src/datas/community/content.js
new file mode 100644
index 000000000..d4d28d6f9
--- /dev/null
+++ b/src/datas/community/content.js
@@ -0,0 +1,21 @@
+export const FooterBoxes = [
+    {
+        title: 'Join our global community',
+        text: 'View job openings and career opportunities in our ecosystem.',
+        button: {
+            text: 'Current openings',
+            href: 'https://celestia.pallet.com/jobs',
+            id: 'operator',
+            type: 'simple'
+        }
+    },{
+        title: 'Build on our developer beta',
+        text: 'Join a growing modular ecosystem of developers building on testnet.',
+        button: {
+            text: 'Get started',
+            href: 'https://docs.celestia.org/',
+            id: 'operator',
+            type: 'simple'
+        }
+    }
+]
\ No newline at end of file
diff --git a/src/datas/community/ecosystem.js b/src/datas/community/ecosystem.js
new file mode 100644
index 000000000..069bfe12a
--- /dev/null
+++ b/src/datas/community/ecosystem.js
@@ -0,0 +1,11 @@
+export const ecosystem = {
+	title: "Ecosystem",
+	text: "Discover a wide range of apps and services built in the Celestia ecosystem.",
+	image: "community/ecosystem.png",
+	button: {
+		text: "Dive in",
+		class: "simple",
+		type: "internal",
+		url: "/ecosystem/",
+	},
+};
diff --git a/src/datas/community/explore.js b/src/datas/community/explore.js
new file mode 100644
index 000000000..7315d2202
--- /dev/null
+++ b/src/datas/community/explore.js
@@ -0,0 +1,38 @@
+export const explore = {
+	title: "Explore",
+	description: "Keep up with new resources and content.",
+	items: [
+        {
+			id: 1,
+			title: "Youtube",
+			text: "A library of tutorials, guides, and ecosystem interviews.",
+			image: "community/youtube.png",
+			type: "external",
+			url: "https://www.youtube.com/channel/UCLlvAEzXBFZ-P3zS6BF2Bjg",
+		},
+        {
+			id: 2,
+			title: "Podcast",
+			text: "Interviews and talks in audio form.",
+			image: "community/podcast.png",
+			type: "external",
+			url: "https://podcast.celestia.org/",
+		},
+        {
+			id: 3,
+			title: "Resources",
+			text: "A collection of videos, podcasts, and blog posts.",
+			image: "community/resources.png",
+			type: "external",
+			url: "https://celestia.org/resources/",
+		},
+        {
+			id: 4,
+			title: "Blog",
+			text: "News and updates from Celestia Labs.",
+			image: "community/blog.png",
+			type: "external",
+			url: "https://blog.celestia.org/",
+		},
+	],
+};
diff --git a/src/datas/community/hero-data.js b/src/datas/community/hero-data.js
new file mode 100644
index 000000000..dd105b784
--- /dev/null
+++ b/src/datas/community/hero-data.js
@@ -0,0 +1,18 @@
+export const heroData = {
+	title: "Celestia Community",
+	text: "Discover community hubs, discussion forums, and resources that are used by the global Celestia community.",
+	buttons: [
+    		{
+        	  text: "Build Modular",
+        	  class: "simple",
+        	  type: "internal",
+        	  url: "/",
+    		},
+    		{
+      		  text: "Ask a question",
+      		  class: "white",
+      		  type: "internal",
+      		  url: "/",
+    		},
+	],
+};
diff --git a/src/datas/community/social-channels.js b/src/datas/community/social-channels.js
new file mode 100644
index 000000000..d2ad58d52
--- /dev/null
+++ b/src/datas/community/social-channels.js
@@ -0,0 +1,54 @@
+export const socialChannels = {
+	title: "Social channels",
+	description: "Communication channels for the community, discussions, updates, and news.",
+	items: [
+        {
+			id: 1,
+			title: "Twitter",
+			text: "The latest news and updates.",
+			image: "community/twitter.png",
+			type: "external",
+			url: "https://twitter.com/CelestiaOrg",
+		},
+        {
+			id: 2,
+			title: "Discord",
+			text: "A hub for developers, node operators, and enthusiasts.",
+			image: "community/discord.png",
+			type: "external",
+			url: "https://discord.com/invite/YsnTPcSfWQ",
+		},
+        {
+			id: 3,
+			title: "Telegram",
+			text: "Chat with the worldwide community.",
+			image: "community/telegram.png",
+			type: "external",
+			url: "https://t.me/CelestiaCommunity",
+		},
+        {
+			id: 4,
+			title: "Reddit",
+			text: "The Celestia community on Reddit.",
+			image: "community/reddit.png",
+			type: "external",
+			url: "https://www.reddit.com/r/CelestiaNetwork/",
+		},
+        {
+			id: 5,
+			title: "Github",
+			text: "Developer discussions and protocol contributions.",
+			image: "community/github.png",
+			type: "external",
+			url: "https://github.com/celestiaorg",
+		},
+        {
+			id: 6,
+			title: "Forum",
+			text: "Ask questions and engage in research discussions.",
+			image: "community/forum.png",
+			type: "external",
+			url: "https://forum.celestia.org/",
+		},
+	],
+};
diff --git a/src/images/community/blog.png b/src/images/community/blog.png
new file mode 100644
index 000000000..a9e0d4c11
Binary files /dev/null and b/src/images/community/blog.png differ
diff --git a/src/images/community/community.png b/src/images/community/community.png
new file mode 100644
index 000000000..232dbdab2
Binary files /dev/null and b/src/images/community/community.png differ
diff --git a/src/images/community/discord.png b/src/images/community/discord.png
new file mode 100644
index 000000000..357ad5687
Binary files /dev/null and b/src/images/community/discord.png differ
diff --git a/src/images/community/ecosystem.png b/src/images/community/ecosystem.png
new file mode 100644
index 000000000..35c32346c
Binary files /dev/null and b/src/images/community/ecosystem.png differ
diff --git a/src/images/community/forum.png b/src/images/community/forum.png
new file mode 100644
index 000000000..e423f4a16
Binary files /dev/null and b/src/images/community/forum.png differ
diff --git a/src/images/community/github.png b/src/images/community/github.png
new file mode 100644
index 000000000..d1db16532
Binary files /dev/null and b/src/images/community/github.png differ
diff --git a/src/images/community/podcast.png b/src/images/community/podcast.png
new file mode 100644
index 000000000..29cce0a63
Binary files /dev/null and b/src/images/community/podcast.png differ
diff --git a/src/images/community/reddit.png b/src/images/community/reddit.png
new file mode 100644
index 000000000..870df3688
Binary files /dev/null and b/src/images/community/reddit.png differ
diff --git a/src/images/community/resources.png b/src/images/community/resources.png
new file mode 100644
index 000000000..748372269
Binary files /dev/null and b/src/images/community/resources.png differ
diff --git a/src/images/community/telegram.png b/src/images/community/telegram.png
new file mode 100644
index 000000000..4a676fc11
Binary files /dev/null and b/src/images/community/telegram.png differ
diff --git a/src/images/community/twitter.png b/src/images/community/twitter.png
new file mode 100644
index 000000000..d08de2290
Binary files /dev/null and b/src/images/community/twitter.png differ
diff --git a/src/images/community/youtube.png b/src/images/community/youtube.png
new file mode 100644
index 000000000..b084d5e6a
Binary files /dev/null and b/src/images/community/youtube.png differ
diff --git a/src/pages/community.js b/src/pages/community.js
new file mode 100644
index 000000000..16e49d1ec
--- /dev/null
+++ b/src/pages/community.js
@@ -0,0 +1,94 @@
+import * as React from "react";
+
+import { heroData } from "../datas/community/hero-data";
+import { socialChannels } from "../datas/community/social-channels";
+import { explore } from "../datas/community/explore";
+import { ecosystem } from "../datas/community/ecosystem";
+import { FooterBoxes } from "../datas/community/content";
+import Layout from "../components/layout";
+import { Helmet } from "react-helmet";
+import CommunityItem from "../components/modules/community-item";
+import Button from "../components/buttons/button";
+import Image from "../components/imageComponent";
+
+const Community = () => {
+	return (
+		<Layout footerBoxes={FooterBoxes}>
+			<Helmet>
+				<title>Celestia - Community</title>
+			</Helmet>
+			<div className={"community"}>
+				<main>
+					<section className='hero'>
+						<div className={"container"}>
+							<h1 className={"main mb-3 mb-md-4"}>{heroData.title}</h1>
+							<div className={"row"}>
+								<div className={"col-auto"}>
+									<div className={"subtitle"} dangerouslySetInnerHTML={{ __html: heroData.text }} />
+									{/* {heroData.buttons.map((button, index) => (
+										<Button key={index} class={button.class} type={button.type} text={button.text} url={button.url} />
+									))} */}
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className='social-channels'>
+						<div className={"container"}>
+							<div className={"row flex-wrap align-items-center justify-content-between gx-5"}>
+								<div className='col-12 col-lg-6 col-xl-4 mb-5 mb-lg-0'>
+									<h2 className={"title with-decor"}>{socialChannels.title}</h2>
+									{socialChannels.description && <div className={"description"}>{socialChannels.description}</div>}
+								</div>
+								<div className='col-12 col-lg-6 col-xl-6'>
+									<div className='gx-3 gy-4 gy-md-3 row'>
+										{socialChannels.items.map(function (item) {
+											return <CommunityItem className='icon-card-wrapper col-6 col-md-6' key={item.id} content={item} />;
+										})}
+									</div>
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className='explore'>
+						<div className={"container"}>
+							<div className={"row flex-wrap-reverse flex-lg-wrap align-items-center justify-content-between gx-5"}>
+								<div className='col-12 col-lg-6 col-xl-6'>
+									<div className='gx-3 gy-4 gy-md-3 row'>
+										{explore.items.map(function (item) {
+											return <CommunityItem className='icon-card-wrapper col-6 col-md-6' key={item.id} content={item} />;
+										})}
+									</div>
+								</div>
+								<div className='col-12 col-lg-6 col-xl-4 mb-5 mb-lg-0'>
+									<h2 className={"title with-decor"}>{explore.title}</h2>
+									{explore.description && <div className={"description"}>{explore.description}</div>}
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className={"ecosystem"}>
+						<div className={"container"}>
+							<div className={"row justify-content-between align-items-center gx-5 gy-3"}>
+								<div className={"col-12 col-lg-6 col-xl-5 mb-4 mb-lg-0"}>
+									<div className="image-wrapper">
+										<Image style={{ width: `100%` }} alt={ecosystem.title} filename={ecosystem.image} />
+									</div>
+								</div>
+								<div className={"col-12 col-lg-6 col-xl-6 "}>
+									<h2 className='title'>{ecosystem.title}</h2>
+									<p className="text">{ecosystem.text}</p>
+									<Button class={ecosystem.button.class} type={ecosystem.button.type} text={ecosystem.button.text} url={ecosystem.button.url} />
+								</div>
+							</div>
+						</div>
+					</section>
+				</main>
+			</div>
+		</Layout>
+	);
+};
+
+export default Community;
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 295d3be44..ce15033ab 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -24,6 +24,7 @@
 @import "modules/roadmapItem.scss";
 @import "modules/learn.scss";
 @import "modules/press-item.scss";
+@import "modules/community-item.scss";
 
 @import "pages/page-home.scss";
 @import "pages/page-resouces.scss";
@@ -34,6 +35,7 @@
 @import "pages/page-what-is-celestia.scss";
 @import "pages/page-ecosystem";
 @import "pages/page-press.scss";
+@import "pages/page-community.scss";
 
 @import "components/team.scss";
 @import "components/technology.scss";
diff --git a/src/scss/modules/community-item.scss b/src/scss/modules/community-item.scss
new file mode 100644
index 000000000..36990fe40
--- /dev/null
+++ b/src/scss/modules/community-item.scss
@@ -0,0 +1,105 @@
+.community-item {
+	border-radius: 12px;
+	padding: 10px 0px;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	@include media-breakpoint-down(md) {
+		padding: 0px;
+	}
+
+	.logo-container {
+		width: 60px;
+		height: 60px;
+		align-items: center;
+		display: flex;
+
+		.gatsby-image-wrapper {
+			height: auto;
+			width: 60px;
+		}
+
+		img {
+			max-height: 100%;
+		}
+	}
+
+	.title {
+		font-family: $ruberoid;
+		font-weight: bold;
+		font-size: 28px;
+		color: #000000;
+		letter-spacing: 0;
+		margin-top: 32px;
+		@include media-breakpoint-down(md) {
+			margin-top: 24px;
+		}
+	}
+	.text {
+		font-family: $inter;
+		font-weight: 300;
+		font-size: 14px;
+		color: #393939;
+		letter-spacing: 0;
+		line-height: 20px;
+		margin-top: 26px;
+		max-width: 450px;
+	}
+	
+	.link-wrapper {
+		.link {
+			font-family: $ruberoid;
+			font-style: normal;
+			font-weight: 700;
+			font-size: 14px;
+			line-height: 1em;
+			padding: 8px 0;
+			margin: -8px 0;
+			color: #000000;
+			transition: all 0.2s ease-in-out;
+			&:hover {
+				color: #393939;
+				& svg {
+					margin-left: 16px;
+				}
+			}
+		}
+		svg {
+			margin-left: 8px;
+			transition: all 0.2s ease-in-out;
+			will-change: margin;
+		}
+	}
+
+	@include media-breakpoint-down(md) {
+		display: block;
+	}
+
+	& .logo-container {
+		margin-right: 20px;
+		margin-top: 0;
+
+		&.top {
+			align-self: flex-start;
+		}
+		&.center {
+			align-self: center;
+		}
+	}
+
+	& .title {
+		margin-top: 0;
+		@include media-breakpoint-down(md) {
+			margin-top: 24px;
+		}
+	}
+
+	& .text {
+		margin-top: 4px;
+	}
+
+	& .text-box {
+		display: block;
+	}
+}
diff --git a/src/scss/pages/page-community.scss b/src/scss/pages/page-community.scss
new file mode 100644
index 000000000..1f29cc4a0
--- /dev/null
+++ b/src/scss/pages/page-community.scss
@@ -0,0 +1,213 @@
+.community {
+	position: relative;
+	background: url(../images/BG/technology.png) no-repeat scroll top 400px right transparent;
+	background-size: 600px;
+
+	@include media-breakpoint-down(xl) {
+		background-position: top 520px right;
+		background-size: 600px;
+	}
+	@include media-breakpoint-down(lg) {
+		background-position: top 250px right;
+		background-size: 800px;
+	}
+	@include media-breakpoint-down(md) {
+		background-position: top 600px right;
+		background-size: 600px;
+	}
+	@include media-breakpoint-down(sm) {
+		background-position: -100px 250px;
+		background-size: 800px;
+	}
+	&:before {
+		background: url(../images/community/community.png) no-repeat scroll top right transparent;
+		background-size: contain;
+		top: 30px;
+		right: 0;
+		left: 55%;
+		position: absolute;
+		content: "";
+		width: 560px;
+		height: 560px;
+		z-index: 0;
+
+		@include media-breakpoint-down(xl) {
+			width: 480px;
+			height: 480px;
+			top: 30px;
+			right: 60px;
+			left: unset;
+		}
+		@include media-breakpoint-down(lg) {
+			width: 380px;
+			height: 380px;
+			top: 70px;
+			right: 50px;
+		}
+		@include media-breakpoint-down(md) {
+			width: 72%;
+			height: 72%;
+			max-width: 450px;
+			right: unset;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+	}
+
+	main {
+		padding-top: 100px;
+		background: url(../images/BG/home.png) no-repeat scroll top 1000px left transparent;
+		background-size: 600px;
+
+		@include media-breakpoint-down(xl) {
+			background-position: top 1000px left;
+			background-size: 600px;
+		}
+		@include media-breakpoint-down(lg) {
+			background-position: top 1600px left;
+			background-size: 600px;
+		}
+		@include media-breakpoint-down(md) {
+			background-position: top 1700px left;
+			background-size: 800px;
+		}
+		@include media-breakpoint-down(sm) {
+			background-position: top 1800px left;
+			background-size: 600px;
+		}
+	}
+	section {
+		padding-top: 50px;
+		padding-bottom: 50px;
+		@include media-breakpoint-down(sm) {
+			padding-top: 40px;
+			padding-bottom: 40px;
+		}
+	}
+
+	.main {
+		max-width: 600px;
+		@include media-breakpoint-down(lg) {
+			max-width: 350px;
+		}
+		@include media-breakpoint-down(md) {
+			max-width: 100%;
+		}
+		@include media-breakpoint-down(sm) {
+			max-width: 100%;
+		}
+	}
+
+	.subtitle {
+		font-family: $ruberoid;
+		font-weight: 500;
+		font-size: 18px;
+		color: #000000;
+		letter-spacing: 0;
+		line-height: 25px;
+		margin-bottom: 30px;
+		max-width: 400px;
+		@include media-breakpoint-down(sm) {
+			max-width: 100%;
+		}
+	}
+
+	.description {
+		font-family: $inter;
+		font-weight: 300;
+		font-size: 16px;
+		color: #000000;
+		letter-spacing: 0;
+		line-height: 24px;
+		margin-top: 22px;
+		max-width: 400px;
+		@include media-breakpoint-down(sm) {
+			max-width: 100%;
+		}
+	}
+
+	.hero {
+		@include media-breakpoint-down(md) {
+			padding-top: 455px;
+		}
+		@include media-breakpoint-down(sm) {
+			padding-top: 70vw;
+		}
+	}
+
+	.social-channels {
+		padding-top: 100px;
+		@include media-breakpoint-down(md) {
+			padding-top: 60px;
+		}
+		.title {
+			max-width: 452px;
+		}
+	}
+
+	.explore {
+		padding-top: 70px;
+		padding-bottom: 60px;
+		.title {
+			max-width: 452px;
+		}
+	}
+
+	.ecosystem {
+		padding-bottom: 100px;
+		@include media-breakpoint-down(md) {
+			padding-bottom: 70px;
+		}
+		.title {
+			max-width: 452px;
+			margin-bottom: 30px;
+			@include media-breakpoint-down(md) {
+				margin-bottom: 16px;
+			}
+		}
+		.text {
+			margin-bottom: 30px;
+		}
+		.image-wrapper {
+			margin-left: auto;
+			margin-right: auto;
+			@include media-breakpoint-down(lg) {
+				max-width: 70%;
+			}
+			@include media-breakpoint-down(md) {
+				max-width: 80%;
+			}
+			@include media-breakpoint-down(sm) {
+				max-width: 90%;
+			}
+		}
+	}
+
+	.connect,
+	.concepts,
+	.faqs {
+		.description {
+			max-width: 350px;
+			@include media-breakpoint-down(sm) {
+				max-width: 100%;
+			}
+		}
+	}
+
+	.button-simple,
+	.button-white,
+	.button-icon,
+	.button-external {
+		margin-right: 20px;
+		@include media-breakpoint-down(sm) {
+			margin-bottom: 20px;
+		}
+	}
+
+	.min-width-50 {
+		min-width: 50%;
+	}
+	.min-width-33 {
+		min-width: 33%;
+	}
+}