diff --git a/modalscope-home/components/FilterAndSortPanel/index.module.less b/modalscope-home/components/FilterAndSortPanel/index.module.less
new file mode 100644
index 0000000..ec7f883
--- /dev/null
+++ b/modalscope-home/components/FilterAndSortPanel/index.module.less
@@ -0,0 +1,162 @@
+@border-radius-base: 2px;
+@color-1: #f4f7fb;
+@color-2: #624afb;
+@color-3: #6149fa;
+@color-4: #8082a0;
+@color-5: #3b29b0;
+@color-6: #ca632f;
+@color-7: #27254a;
+@color-8: #fdfdfd;
+@font-size-base: 14px;
+@font-size-sm: 12px;
+@margin-xs: 8px;
+
+.wrapper {
+  margin-top: 10px;
+  padding: 2px 20px 20px;
+  background-color: @color-8;
+}
+
+.containerSection {
+  display: flex;
+  flex-direction: column;
+}
+
+.contentWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.optionsContainer {
+  display: flex;
+  align-items: center;
+}
+
+.allButton {
+  min-width: 64px;
+  height: 32px;
+  border-width: 1px;
+  border-color: @color-2;
+  background-color: @color-1;
+  color: @color-3;
+}
+
+.programmaticCreation {
+  margin-left: 20px;
+  white-space: nowrap;
+  color: @color-4;
+  font-size: @font-size-base;
+}
+
+.interactiveCreation {
+  margin-left: 40px;
+  white-space: nowrap;
+  color: @color-4;
+  font-size: @font-size-base;
+}
+
+.searchInput {
+  width: 378px;
+}
+
+.iconZoomOut {
+  color: @color-3;
+  font-size: @font-size-sm;
+}
+
+.tagSection {
+  display: flex;
+  align-items: center;
+  margin-top: 18px;
+  gap: 34px;
+}
+
+.fieldLabel {
+  white-space: nowrap;
+  color: @color-4;
+  font-size: @font-size-base;
+}
+
+.multiModalTag {
+  margin-left: 10px;
+  color: @color-5;
+  font-size: @font-size-base;
+}
+
+.naturalLanguageProcessingButton {
+  max-width: 104px;
+  height: 24px;
+  margin-left: @margin-xs;
+  border-radius: 7px;
+  background-color: @color-1;
+  color: @color-5;
+}
+
+.autoMLTag {
+  margin-left: @margin-xs;
+  color: @color-5;
+  font-size: @font-size-base;
+}
+
+.careerTag {
+  margin-left: 14px;
+  color: @color-6;
+  font-size: @font-size-base;
+}
+
+.educationTag {
+  margin-left: 10px;
+  color: @color-6;
+  font-size: @font-size-base;
+}
+
+.marketingTag {
+  margin-left: @margin-xs;
+  color: @color-6;
+  font-size: @font-size-base;
+}
+
+.iconDropdown {
+  color: @color-6;
+  font-size: 6px;
+}
+
+.gpuDeployButton {
+  height: 28px;
+  background-color: @color-1;
+}
+
+.buttonContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gpuImage {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: @border-radius-base;
+}
+
+.buttonText {
+  margin-left: 2px;
+  font-size: @font-size-base;
+}
+
+.gpuLabel {
+  color: @color-3;
+}
+
+.deploymentSpace {
+  color: @color-7;
+}
+
+.spaceImage {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  margin-left: @margin-xs;
+  border-radius: @border-radius-base;
+}
diff --git a/modalscope-home/components/FilterAndSortPanel/index.tsx b/modalscope-home/components/FilterAndSortPanel/index.tsx
new file mode 100644
index 0000000..f6e1c54
--- /dev/null
+++ b/modalscope-home/components/FilterAndSortPanel/index.tsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { Button, Input, Tag } from 'antd';
+import { ZoomOutOutlined, CaretDownFilled } from '@ant-design/icons';
+
+import styles from './index.module.less';
+
+const FilterAndSortPanel: React.FC = () => {
+  const [inputPlaceholderValue, setInputPlaceholderValue] = useState('');
+
+  const onAllItemsClick = () => {};
+
+  const onNlpTitleClick = () => {};
+
+  const onGpuDeploySpaceClick = () => {};
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.containerSection}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.optionsContainer}>
+            <Button onClick={onAllItemsClick} className={styles.allButton}>
+              全部
+            </Button>
+            <span className={styles.programmaticCreation}>编程式创建</span>
+            <span className={styles.interactiveCreation}>交互式创建</span>
+          </div>
+          <div className={styles.optionsContainer}>
+            <Input
+              disabled
+              placeholder="请输入内容（共4043个）"
+              prefix={<ZoomOutOutlined className={styles.iconZoomOut} />}
+              value={inputPlaceholderValue}
+              onChange={e => {
+                setInputPlaceholderValue(e.target.value);
+              }}
+              className={styles.searchInput}
+            />
+            <span className={styles.programmaticCreation}>综合排序化</span>
+          </div>
+        </div>
+        <div className={styles.tagSection}>
+          <div className={styles.optionsContainer}>
+            <span className={styles.fieldLabel}>领域:</span>
+            <Tag color="rgb(244,247,251)" className={styles.multiModalTag}>
+              多模态
+            </Tag>
+            <Tag color="rgb(244,247,251)" className={styles.multiModalTag}>
+              计算机视觉
+            </Tag>
+            <Button
+              size="small"
+              onClick={onNlpTitleClick}
+              className={styles.naturalLanguageProcessingButton}
+            >
+              自然语言处理
+            </Button>
+            <Tag color="rgb(244,247,251)" className={styles.multiModalTag}>
+              语音
+            </Tag>
+            <Tag color="rgb(244,247,251)" className={styles.autoMLTag}>
+              AutoML
+            </Tag>
+          </div>
+          <div className={styles.optionsContainer}>
+            <span className={styles.fieldLabel}>场景：</span>
+            <Tag color="rgb(244,247,251)" className={styles.careerTag}>
+              职场
+            </Tag>
+            <Tag color="rgb(243,245,249)" className={styles.educationTag}>
+              教育
+            </Tag>
+            <Tag color="rgb(244,247,251)" className={styles.marketingTag}>
+              营销
+            </Tag>
+            <Tag color="rgb(244,247,251)" className={styles.marketingTag}>
+              生活
+            </Tag>
+            <Tag color="rgb(244,247,251)" className={styles.marketingTag}>
+              情感
+            </Tag>
+            <Tag
+              color="rgb(244,247,251)"
+              icon={<CaretDownFilled className={styles.iconDropdown} />}
+              className={styles.marketingTag}
+            >
+              更多
+            </Tag>
+          </div>
+          <Button
+            shape="round"
+            onClick={onGpuDeploySpaceClick}
+            className={styles.gpuDeployButton}
+          >
+            <div className={styles.buttonContent}>
+              <img
+                alt=""
+                src="https://weavefox.alipay.com/assets/3812eb39-b1a4-43d3-96ad-49f149cc2a7e.png"
+                className={styles.gpuImage}
+              />
+              <span className={styles.buttonText}>
+                <span className={styles.gpuLabel}>GPU</span>
+                <span className={styles.deploymentSpace}>部署创空间</span>
+              </span>
+              <img
+                alt=""
+                src="https://weavefox.alipay.com/assets/a1d8573b-90da-4a6e-9e97-515caa43b167.png"
+                className={styles.spaceImage}
+              />
+            </div>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterAndSortPanel;
diff --git a/modalscope-home/components/HomePage/index.module.less b/modalscope-home/components/HomePage/index.module.less
new file mode 100644
index 0000000..53138b8
--- /dev/null
+++ b/modalscope-home/components/HomePage/index.module.less
@@ -0,0 +1,160 @@
+@border-radius-base: 2px;
+@color-1: #27254a;
+@color-2: #8082a0;
+@color-3: #e8e9ed;
+@color-4: #fdfdfd;
+@font-size-base: 14px;
+@font-size-lg: 16px;
+@margin-xs: 8px;
+@margin-xss: 4px;
+@padding-sm: 12px;
+
+.wrapper {
+  margin-left: 6px;
+  padding: 2px @padding-sm;
+  background-color: @color-4;
+}
+
+.mainContainer {
+  display: flex;
+}
+
+.headerSection {
+  display: flex;
+  align-items: center;
+  align-self: center;
+}
+
+.logoImage {
+  flex-shrink: 0;
+  width: 45px;
+  height: 22px;
+  border-radius: 3px;
+}
+
+.siteTitle {
+  flex: 1;
+  margin-left: 6px;
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-base;
+  font-weight: bold;
+}
+
+.homeLink {
+  align-self: center;
+  margin-left: 50px;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.modelLibraryLink {
+  align-self: center;
+  margin-left: 30px;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.datasetLink {
+  align-self: center;
+  margin-left: 32px;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.creationSpaceLink {
+  align-self: center;
+  margin-left: 32px;
+  color: @color-1;
+  font-size: @font-size-base;
+  font-weight: bold;
+}
+
+.aigcZoneLink {
+  align-self: center;
+  margin-left: 60px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.documentationCenterLink {
+  align-self: center;
+  margin-left: 35px;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.profileImage {
+  flex-shrink: 0;
+  align-self: center;
+  width: 8px;
+  height: 8px;
+  margin-left: @margin-xss;
+  border-radius: @border-radius-base;
+}
+
+.emptyDiv {
+  width: 6px;
+  min-height: 12px;
+  margin-top: 14px;
+  margin-left: 15px;
+  background-color: @color-3;
+}
+
+.githubIcon {
+  align-self: center;
+  margin-left: 15px;
+  color: @color-2;
+  font-size: @font-size-lg;
+}
+
+.githubText {
+  align-self: center;
+  margin-left: 5px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.thumbnailImage {
+  flex-shrink: 0;
+  align-self: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 160px;
+  border-radius: 9px;
+}
+
+.thumbnailImageAlt {
+  flex-shrink: 0;
+  align-self: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 20px;
+  border-radius: 6px;
+}
+
+.zoomOutIcon {
+  align-self: center;
+  margin-left: 25px;
+  color: @color-2;
+  font-size: @font-size-lg;
+}
+
+.searchPlaceholder {
+  align-self: center;
+  margin-left: @margin-xs;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.thumbnailImageSecondary {
+  flex-shrink: 0;
+  align-self: center;
+  width: 50px;
+  height: 40px;
+  margin-left: 50px;
+  border-radius: 3px;
+}
diff --git a/modalscope-home/components/HomePage/index.tsx b/modalscope-home/components/HomePage/index.tsx
new file mode 100644
index 0000000..e156336
--- /dev/null
+++ b/modalscope-home/components/HomePage/index.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { GithubOutlined, ZoomOutOutlined } from '@ant-design/icons';
+
+import styles from './index.module.less';
+
+const HomePage: React.FC = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.mainContainer}>
+        <div className={styles.headerSection}>
+          <img
+            alt=""
+            src="https://weavefox.alipay.com/assets/69105798-2070-41ee-9e4c-53711abd6d6a.png"
+            className={styles.logoImage}
+          />
+          <span className={styles.siteTitle}>1odei5cope</span>
+        </div>
+        <span className={styles.homeLink}>首页</span>
+        <span className={styles.modelLibraryLink}>模型库</span>
+        <span className={styles.datasetLink}>数据集</span>
+        <span className={styles.creationSpaceLink}>创空间</span>
+        <span className={styles.aigcZoneLink}>AIGC专区</span>
+        <span className={styles.documentationCenterLink}>文档中心</span>
+        <span className={styles.datasetLink}>社区</span>
+        <img
+          alt=""
+          src="https://weavefox.alipay.com/assets/57660610-d7be-4d6a-a87a-8bcd2e48f21a.png"
+          className={styles.profileImage}
+        />
+        <div className={styles.emptyDiv} />
+        <GithubOutlined className={styles.githubIcon} />
+        <span className={styles.githubText}>GitHub</span>
+        <img
+          alt=""
+          src="https://weavefox.alipay.com/assets/fb77fdd4-0d3e-4ffc-95f4-b7f259252f86.png"
+          className={styles.thumbnailImage}
+        />
+        <img
+          alt=""
+          src="https://weavefox.alipay.com/assets/d691d03b-ac69-44b6-96f5-6d1d9579cdf0.png"
+          className={styles.thumbnailImageAlt}
+        />
+        <ZoomOutOutlined className={styles.zoomOutIcon} />
+        <span className={styles.searchPlaceholder}>搜索您...</span>
+        <img
+          alt=""
+          src="https://weavefox.alipay.com/assets/8205c090-a777-4ae2-af34-63012862ea43.png"
+          className={styles.thumbnailImageSecondary}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/modalscope-home/components/ProductGallery/index.module.less b/modalscope-home/components/ProductGallery/index.module.less
new file mode 100644
index 0000000..535ce9e
--- /dev/null
+++ b/modalscope-home/components/ProductGallery/index.module.less
@@ -0,0 +1,362 @@
+@border-radius-base: 2px;
+@color-1: #27254a;
+@color-2: #8082a0;
+@color-3: #e8e9ed;
+@color-4: #f4f7fb;
+@color-5: #7e6fda;
+@color-6: #454c5a;
+@color-7: #f3f5f9;
+@color-8: #fdfdfd;
+@font-size-base: 14px;
+@margin-md: 16px;
+@margin-sm: 12px;
+@margin-xs: 8px;
+@padding-md: 16px;
+@padding-sm: 12px;
+
+.wrapper {
+  flex: 1;
+  margin-top: 10px;
+  padding: 2px @padding-sm @padding-md 20px;
+  background-color: @color-8;
+}
+
+.productContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.productHeader {
+  display: flex;
+  align-items: center;
+}
+
+.featuredLabel {
+  color: @color-1;
+  font-size: @font-size-base;
+}
+
+.thumbnailImage {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-left: 6px;
+  border-radius: 3px;
+}
+
+.productBody {
+  display: flex;
+  flex: 1;
+  margin-top: @margin-sm;
+}
+
+.productRow {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -12px;
+  margin-left: -12px;
+  row-gap: 24px;
+}
+
+.productColumn {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 50%;
+  max-width: 50%;
+  padding-right: @padding-sm;
+  padding-left: @padding-sm;
+}
+
+.productItem {
+  display: flex;
+  flex-direction: column;
+  padding: 18px @padding-md;
+  border-radius: 16px;
+  background-color: @color-4;
+}
+
+.modelBattleImage {
+  flex-shrink: 0;
+  width: 374px;
+  height: 208px;
+  border-radius: 10px;
+}
+
+.productName {
+  margin-top: @margin-md;
+  margin-right: 5px;
+  margin-left: 5px;
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-base;
+  font-weight: bold;
+}
+
+.productDetails {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 40px;
+}
+
+.productStats {
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+}
+
+.statsIcon {
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  border-radius: 4px;
+}
+
+.statsTitle {
+  flex: 1;
+  margin-left: 6px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.updateInfo {
+  display: flex;
+  margin-right: 2px;
+}
+
+.updateDate {
+  align-self: center;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.viewsWrapper {
+  width: 2px;
+  min-height: 14px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: 6px;
+  background-color: @color-3;
+}
+
+.viewCount {
+  align-self: center;
+  margin-left: 10px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.likesWrapper {
+  width: 1px;
+  min-height: 14px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: 10px;
+  background-color: @color-3;
+}
+
+.likeIcon {
+  flex-shrink: 0;
+  align-self: center;
+  width: 10px;
+  height: 10px;
+  margin-left: @margin-sm;
+  border-radius: @border-radius-base;
+}
+
+.likeCount {
+  align-self: center;
+  margin-left: 6px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.commentItem {
+  display: flex;
+  flex-direction: column;
+  padding: 22px 18px 18px;
+  border-radius: 15px;
+  background-color: @color-4;
+}
+
+.commentThumbnail {
+  flex-shrink: 0;
+  width: 370px;
+  height: 206px;
+  border-radius: 9px;
+}
+
+.commentTitle {
+  align-self: flex-start;
+  margin-top: 15px;
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-base;
+  font-weight: bold;
+}
+
+.commentDetails {
+  display: flex;
+  margin-top: 42px;
+}
+
+.commentIcon {
+  flex-shrink: 0;
+  align-self: center;
+  width: 15px;
+  height: 15px;
+  margin-left: 2px;
+  border-radius: 6px;
+}
+
+.commentUpdate {
+  align-self: center;
+  margin-left: 72px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.commentViews {
+  width: 1px;
+  min-height: 14px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: 6px;
+  background-color: @color-3;
+}
+
+.commentViewCount {
+  align-self: center;
+  margin-left: @margin-sm;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.commentLikes {
+  width: 2px;
+  min-height: 14px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: 10px;
+  background-color: @color-3;
+}
+
+.commentLikeIcon {
+  flex-shrink: 0;
+  align-self: center;
+  width: 10px;
+  height: 10px;
+  margin-left: 10px;
+  border-radius: @border-radius-base;
+}
+
+.commentReplies {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  margin-left: 25px;
+  padding: 18px;
+  border-radius: 18px;
+  background-color: @color-7;
+}
+
+.storySection {
+  display: flex;
+  margin-top: @margin-md;
+}
+
+.storyItem {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+}
+
+.storyTitle {
+  align-self: flex-start;
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-base;
+  font-weight: bold;
+}
+
+.tagSection {
+  display: flex;
+  align-items: center;
+  margin-top: @margin-xs;
+  gap: 6px;
+}
+
+.visionTag {
+  border-color: @color-5;
+  color: @color-5;
+  font-size: @font-size-base;
+}
+
+.anyStoryTag {
+  color: @color-6;
+  font-size: @font-size-base;
+}
+
+.additionalInfo {
+  display: flex;
+  align-items: center;
+  margin-top: @margin-sm;
+}
+
+.labImage {
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  border-radius: 7px;
+}
+
+.labName {
+  margin-left: 6px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.dateUpdated {
+  margin-left: 80px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.extraContent {
+  width: 2px;
+  min-height: 12px;
+  margin-top: 66px;
+  margin-left: 6px;
+  background-color: @color-3;
+}
+
+.viewCount2 {
+  margin-top: 64px;
+  margin-left: @margin-sm;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.separatorDiv {
+  width: 2px;
+  min-height: 12px;
+  margin-top: 68px;
+  margin-left: @margin-xs;
+  background-color: @color-3;
+}
+
+.commentCount {
+  margin-top: 64px;
+  margin-left: @margin-sm;
+  color: @color-2;
+  font-size: @font-size-base;
+}
diff --git a/modalscope-home/components/ProductGallery/index.tsx b/modalscope-home/components/ProductGallery/index.tsx
new file mode 100644
index 0000000..817bbfd
--- /dev/null
+++ b/modalscope-home/components/ProductGallery/index.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { Tag } from 'antd';
+
+import styles from './index.module.less';
+
+const ProductGallery: React.FC = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.productContainer}>
+        <div className={styles.productHeader}>
+          <span className={styles.featuredLabel}>精选</span>
+          <img
+            alt=""
+            src="https://weavefox.alipay.com/assets/99faa23c-3342-44c0-8c88-c67151519db5.png"
+            className={styles.thumbnailImage}
+          />
+        </div>
+        <div className={styles.productBody}>
+          <div className={styles.productRow}>
+            <div className={styles.productColumn}>
+              <div className={styles.productItem}>
+                <img
+                  alt=""
+                  src="https://weavefox.alipay.com/assets/b42c10e8-0338-4c91-862f-055444eebea3.png"
+                  className={styles.modelBattleImage}
+                />
+                <span className={styles.productName}>
+                  推理模型大作战(QwQ-32B vs DeepSeek-R1)
+                </span>
+                <div className={styles.productDetails}>
+                  <div className={styles.productStats}>
+                    <img
+                      alt=""
+                      src="https://weavefox.alipay.com/assets/1185fef4-f78f-40c7-933d-5bdca493c2cf.png"
+                      className={styles.statsIcon}
+                    />
+                    <span className={styles.statsTitle}>为AI成魔</span>
+                  </div>
+                  <div className={styles.updateInfo}>
+                    <span className={styles.updateDate}>2025.03.10更新</span>
+                    <div className={styles.viewsWrapper} />
+                    <span className={styles.viewCount}>18.9k</span>
+                    <div className={styles.likesWrapper} />
+                    <img
+                      alt=""
+                      src="https://weavefox.alipay.com/assets/078c8e6c-d062-4c30-8214-399bf0d6a6a8.png"
+                      className={styles.likeIcon}
+                    />
+                    <span className={styles.likeCount}>74</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className={styles.productColumn}>
+              <div className={styles.commentItem}>
+                <img
+                  alt=""
+                  src="https://weavefox.alipay.com/assets/a74968ef-4ddb-4fd1-bf5c-0f1ae825d7e6.png"
+                  className={styles.commentThumbnail}
+                />
+                <span className={styles.commentTitle}>
+                  通义万相Wan2.1视频生成
+                </span>
+                <div className={styles.commentDetails}>
+                  <img
+                    alt=""
+                    src="https://weavefox.alipay.com/assets/385589f3-258d-460f-9dfc-e3b705ceff27.png"
+                    className={styles.commentIcon}
+                  />
+                  <span className={styles.likeCount}>通义万相</span>
+                  <span className={styles.commentUpdate}>2025.02.26更新</span>
+                  <div className={styles.commentViews} />
+                  <span className={styles.commentViewCount}>210.0k</span>
+                  <div className={styles.commentLikes} />
+                  <img
+                    alt=""
+                    src="https://weavefox.alipay.com/assets/4c69b5ea-e1ac-4ebc-a141-20c531572e09.png"
+                    className={styles.commentLikeIcon}
+                  />
+                  <span className={styles.likeCount}>771</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={styles.commentReplies}>
+            <img
+              alt=""
+              src="https://weavefox.alipay.com/assets/ab78ea15-33c7-4655-a36d-c85f33109211.png"
+              className={styles.commentThumbnail}
+            />
+            <div className={styles.storySection}>
+              <div className={styles.storyItem}>
+                <span className={styles.storyTitle}>AI故事随心绘-AnyStory</span>
+                <div className={styles.tagSection}>
+                  <Tag color="rgb(253,253,253)" className={styles.visionTag}>
+                    计算机视觉
+                  </Tag>
+                  <Tag color="rgb(253,253,253)" className={styles.visionTag}>
+                    多模态
+                  </Tag>
+                  <Tag color="rgb(251,251,251)" className={styles.anyStoryTag}>
+                    AnyStory
+                  </Tag>
+                </div>
+                <div className={styles.additionalInfo}>
+                  <img
+                    alt=""
+                    src="https://weavefox.alipay.com/assets/dc7b47b2-943c-4687-83bc-a7cd270a80da.png"
+                    className={styles.labImage}
+                  />
+                  <span className={styles.labName}>通义实验室</span>
+                  <span className={styles.dateUpdated}>2025.03.19更新</span>
+                </div>
+              </div>
+              <div className={styles.extraContent} />
+              <span className={styles.viewCount2}>· 1.9k</span>
+              <div className={styles.separatorDiv} />
+              <span className={styles.commentCount}>20</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductGallery;
diff --git a/modalscope-home/components/SpaceCreationGuide/index.module.less b/modalscope-home/components/SpaceCreationGuide/index.module.less
new file mode 100644
index 0000000..2caf867
--- /dev/null
+++ b/modalscope-home/components/SpaceCreationGuide/index.module.less
@@ -0,0 +1,141 @@
+@border-radius-base: 2px;
+@color-1: #27254a;
+@color-2: #8082a0;
+@color-3: #b0a5f6;
+@color-4: #aea3f7;
+@color-5: #f3f5f9;
+@color-6: #6149fa;
+@color-7: #f4f7fb;
+@color-8: #fdfdfd;
+@font-size-base: 14px;
+@margin-md: 16px;
+@padding-md: 16px;
+@padding-xs: 8px;
+
+.wrapper {
+  margin-top: @margin-md;
+  padding: @padding-xs @padding-xs 14px 14px;
+  background-color: @color-8;
+}
+
+.spaceContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.headerSection {
+  display: flex;
+  align-items: center;
+}
+
+.headerImage {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-left: 2px;
+  border-radius: @border-radius-base;
+}
+
+.headerTitle {
+  flex: 1;
+  margin-left: 10px;
+  white-space: nowrap;
+  color: @color-1;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.contentWrapper {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  padding: @padding-md 28px @padding-md 32px;
+  border-radius: 10px;
+  background-color: @color-7;
+}
+
+.stepOneImage {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 3px;
+}
+
+.stepOneDetails {
+  display: flex;
+  flex-direction: column;
+  margin-left: @margin-md;
+}
+
+.stepOneTitle {
+  align-self: flex-start;
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-base;
+  font-weight: bold;
+}
+
+.stepOneDescription {
+  margin-top: 2px;
+  white-space: nowrap;
+  color: @color-2;
+  font-size: @font-size-base;
+}
+
+.minusIcon {
+  margin-left: 18px;
+  color: @color-3;
+  font-size: 10px;
+}
+
+.stepTwoImage {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  margin-left: 46px;
+  border-radius: 3px;
+}
+
+.stepTwoDetails {
+  display: flex;
+  flex-direction: column;
+  margin-left: 18px;
+}
+
+.stepThreeImage {
+  flex-shrink: 0;
+  width: 22px;
+  height: 10px;
+  margin-left: 6px;
+  border-radius: 3px;
+}
+
+.stepFourImage {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  margin-left: 36px;
+  border-radius: 3px;
+}
+
+.arrowIndicator {
+  margin-left: 78px;
+  white-space: nowrap;
+  color: @color-4;
+  font-size: @font-size-base;
+}
+
+.stepFourImage2 {
+  flex-shrink: 0;
+  width: 38px;
+  height: 38px;
+  margin-left: 36px;
+  border-radius: 3px;
+}
+
+.createButton {
+  height: 32px;
+  margin-left: @margin-md;
+  background-color: @color-5;
+  color: @color-6;
+}
diff --git a/modalscope-home/components/SpaceCreationGuide/index.tsx b/modalscope-home/components/SpaceCreationGuide/index.tsx
new file mode 100644
index 0000000..4a75c49
--- /dev/null
+++ b/modalscope-home/components/SpaceCreationGuide/index.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { MinusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+
+import styles from './index.module.less';
+
+const SpaceCreationGuide: React.FC = () => {
+  const onCreateBtnClick = () => {};
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.spaceContainer}>
+        <div className={styles.headerSection}>
+          <img
+            alt=""
+            src="https://weavefox.alipay.com/assets/73c13dd8-1b4f-4707-9e08-23bd8d6f0683.png"
+            className={styles.headerImage}
+          />
+          <span className={styles.headerTitle}>创空间</span>
+        </div>
+        <div className={styles.contentWrapper}>
+          <img
+            alt=""
+            src="https://weavefox.alipay.com/assets/df7e1bb8-9dad-4de4-a40a-2110835ec7d0.png"
+            className={styles.stepOneImage}
+          />
+          <div className={styles.stepOneDetails}>
+            <span className={styles.stepOneTitle}>创建空间</span>
+            <span className={styles.stepOneDescription}>
+              输入基础信息快速完成空间创建
+            </span>
+          </div>
+          <MinusOutlined className={styles.minusIcon} />
+          <img
+            alt=""
+            src="https://weavefox.alipay.com/assets/39c002dd-5faa-42c6-a348-b554cb7425a0.png"
+            className={styles.stepTwoImage}
+          />
+          <div className={styles.stepTwoDetails}>
+            <span className={styles.stepOneTitle}>搭建应用</span>
+            <span className={styles.stepOneDescription}>
+              基于平台模型与可视化SDK几行...
+            </span>
+          </div>
+          <img
+            alt=""
+            src="https://weavefox.alipay.com/assets/df520a9c-b8ac-493e-8a6a-26e91942c7b8.png"
+            className={styles.stepThreeImage}
+          />
+          <img
+            alt=""
+            src="https://weavefox.alipay.com/assets/16cc4d99-c29f-4586-93ba-bd6c86524d6d.png"
+            className={styles.stepFourImage}
+          />
+          <div className={styles.stepTwoDetails}>
+            <span className={styles.stepOneTitle}>发布空间</span>
+            <span className={styles.stepOneDescription}>
+              平台环境支持一键发布
+            </span>
+          </div>
+          <span className={styles.arrowIndicator}>→</span>
+          <img
+            alt=""
+            src="https://weavefox.alipay.com/assets/0cd5bf7a-48c5-45d9-86e4-6d958a766bf8.png"
+            className={styles.stepFourImage2}
+          />
+          <div className={styles.stepTwoDetails}>
+            <span className={styles.stepOneTitle}>分享创意</span>
+            <span className={styles.stepOneDescription}>
+              将您的创空间分享给您的朋友吧
+            </span>
+          </div>
+          <Button onClick={onCreateBtnClick} className={styles.createButton}>
+            我要创建
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SpaceCreationGuide;
diff --git a/modalscope-home/index.module.less b/modalscope-home/index.module.less
new file mode 100644
index 0000000..b9ca38c
--- /dev/null
+++ b/modalscope-home/index.module.less
@@ -0,0 +1,8 @@
+@padding-sm: 12px;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 1355px;
+  padding: 5px @padding-sm;
+}
diff --git a/modalscope-home/index.tsx b/modalscope-home/index.tsx
new file mode 100644
index 0000000..b2f1749
--- /dev/null
+++ b/modalscope-home/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import FilterAndSortPanel from './components/FilterAndSortPanel';
+import HomePage from './components/HomePage';
+import ProductGallery from './components/ProductGallery';
+import SpaceCreationGuide from './components/SpaceCreationGuide';
+
+import styles from './index.module.less';
+
+const MyPageComponent: React.FC = () => {
+  return (
+    <div className={styles.wrapper}>
+      <HomePage />
+      <SpaceCreationGuide />
+      <FilterAndSortPanel />
+      <ProductGallery />
+    </div>
+  );
+};
+
+export default MyPageComponent;