diff --git a/src/css/custom.css b/src/css/custom.css
index d995eae..6714a75 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,24 +6,40 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #FF6405; /* Яркий оранжевый */
-  --ifm-color-primary-dark: #FA8C01; /* Оранжево-жёлтый */
-  --ifm-color-primary-darker: #577700; /* Тёмно-зелёный */
-  --ifm-color-primary-darkest: #082400; /* Очень тёмный зелёный */
-  --ifm-color-primary-light: #A0A600; /* Яркий зелёный */
-  --ifm-color-primary-lighter: #B5BD00; /* Светло-зелёный */
-  --ifm-color-primary-lightest: #CDD500; /* Очень светлый зелёный */
+  --ifm-color-primary: #FF6405;
+  --ifm-color-primary-dark: #FA8C01;
+  --ifm-color-primary-darker: #577700;
+  --ifm-color-primary-darkest: #082400;
+  --ifm-color-primary-light: #A0A600;
+  --ifm-color-primary-lighter: #B5BD00;
+  --ifm-color-primary-lightest: #CDD500;
+  
+  --ifm-color-background: #F9F9F9;
+  --ifm-color-text: #333333;
+  --ifm-color-text-light: #666666;
+  
+  --ifm-color-border: #DDDDDD;
+  --ifm-color-badge-background: rgba(255, 100, 5, 0.1);
+  
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(255, 100, 5, 0.1); /* Подсветка кода */
+  --docusaurus-highlighted-code-line-bg: rgba(255, 100, 5, 0.1);
 }
 
 [data-theme='dark'] {
-  --ifm-color-primary: #FF6405; /* Яркий оранжевый */
-  --ifm-color-primary-dark: #FA8C01; /* Оранжево-жёлтый */
-  --ifm-color-primary-darker: #577700; /* Тёмно-зелёный */
-  --ifm-color-primary-darkest: #082400; /* Очень тёмный зелёный */
-  --ifm-color-primary-light: #A0A600; /* Яркий зелёный */
-  --ifm-color-primary-lighter: #B5BD00; /* Светло-зелёный */
-  --ifm-color-primary-lightest: #CDD500; /* Очень светлый зелёный */
-  --docusaurus-highlighted-code-line-bg: rgba(255, 100, 5, 0.3); /* Подсветка кода в темной теме */
+  --ifm-color-primary: #FF6405;
+  --ifm-color-primary-dark: #FA8C01;
+  --ifm-color-primary-darker: #577700;
+  --ifm-color-primary-darkest: #082400;
+  --ifm-color-primary-light: #A0A600;
+  --ifm-color-primary-lighter: #B5BD00;
+  --ifm-color-primary-lightest: #CDD500;
+  
+  --ifm-color-background: #2B2B2B;
+  --ifm-color-text: #FFFFFF;
+  --ifm-color-text-light: #B0B0B0;
+  
+  --ifm-color-border: #444444;
+  --ifm-color-badge-background: rgba(255, 100, 5, 0.3);
+  
+  --docusaurus-highlighted-code-line-bg: rgba(255, 100, 5, 0.3);
 }
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..26535ea 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,23 +1,112 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
 .heroBanner {
-  padding: 4rem 0;
+  padding: 8vh 0;
   text-align: center;
-  position: relative;
-  overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
+.repoList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 2vw;
+  gap: 1rem;
+}
+
+.shortDesc {
+  font-size: 1rem;
+  color: var(--ifm-color-text-light);
+}
+
+.repoCard {
+  background: var(--ifm-color-background);
+  border: 1px solid var(--ifm-color-border);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem;
+  width: calc(25vw - 2rem);
+  max-width: 500px;
+  min-width: 280px;
+  box-shadow: var(--ifm-box-shadow);
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.repoCard:hover {
+  transform: scale(1.02);
+}
+
+.repoCard h2 {
+  margin-bottom: 0.8rem;
+  font-size: 1.2rem;
+  color: var(--ifm-color-text);
+}
+
+.repoCard p {
+  margin: 0.2rem 0;
+}
+
+.repoCard::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--ifm-color-primary);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.badges img {
+  max-width: none;
+  height: auto;
+}
+
+@media (max-width: 768px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 6vh 0;
+  }
+
+  .repoCard {
+    width: 100vw;
+    margin: 1rem 0;
+    padding: 1rem;
+  }
+
+  .repoCard h2 {
+    font-size: 1.1rem;
+  }
+
+  .shortDesc {
+    font-size: 0.9rem;
+  }
+
+  .repoList {
+    padding: 1vw;
   }
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+@media (max-width: 480px) {
+  .heroBanner {
+    padding: 5vh 0;
+  }
+
+  .repoCard {
+    width: 90vw;
+    margin: 1rem 0.5rem;
+    padding: 0.8rem;
+  }
+
+  .repoCard h2 {
+    font-size: 1rem;
+  }
+
+  .shortDesc {
+    font-size: 0.85rem;
+  }
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 968ae3a..203eab2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,13 +2,59 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
-
 import styles from './index.module.css';
+import repositoriesData from '@site/static/repositories.json';
+
+interface Repository {
+  username: string;
+  repo: string;
+  name: string;
+  description: string;
+  downloads: number;
+  stars: number;
+  latestRelease: {
+    version: string;
+    date: string;
+  };
+}
+
+function RepositoryCard({ repo }: { repo: Repository }) {
+  return (
+    <div className={clsx(styles.repoCard, 'card')}>
+      <a href={`https://github.com/${repo.username}/${repo.repo}`} target="_blank" rel="noopener noreferrer">
+        <h2 className="card__title">{repo.repo}</h2>
+      </a>
+      <p className={styles.shortDesc}>{repo.description}</p>
+      <div className={styles.badges}>
+        <a href={`https://github.com/${repo.username}/${repo.repo}/releases`} target="_blank" rel="noopener noreferrer">
+          <img 
+            src={`https://img.shields.io/github/v/release/${repo.username}/${repo.repo}?include_prereleases&style=for-the-badge`} 
+            alt="Latest Release" 
+          />
+        </a>
+        <a href={`https://github.com/${repo.username}/${repo.repo}/releases`} target="_blank" rel="noopener noreferrer">
+          <img 
+            src={`https://img.shields.io/github/downloads/${repo.username}/${repo.repo}/total?style=for-the-badge`} 
+            alt="Downloads" 
+          />
+        </a>
+        {/* <a href={`https://github.com/${repo.username}/${repo.repo}/stargazers`} target="_blank" rel="noopener noreferrer">
+          <img 
+            src={`https://img.shields.io/badge/Stars-${repo.stars.toLocaleString()}-yellow?style=for-the-badge`} 
+            alt="Stars" 
+          />
+        </a> */}
+      </div>
+    </div>
+  );
+}
+
+
+
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
@@ -29,15 +75,19 @@ function HomepageHeader() {
 }
 
 export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
+  const repositories: Repository[] = repositoriesData;
+
   return (
     <Layout
-      // title={`${siteConfig.title}`}
       description="Enhanced HLDS with bug fixes and new features to expand functionality.">
       <HomepageHeader />
-      {/* <main>
-        <HomepageFeatures />
-      </main> */}
+      <main>
+        <div className={styles.repoList}>
+          {repositories.map((repo, index) => (
+            <RepositoryCard key={index} repo={repo} />
+          ))}
+        </div>
+      </main>
     </Layout>
   );
 }