diff --git a/.github/workflows/common.yml b/.github/workflows/common.yml
index 073d007..16be699 100644
--- a/.github/workflows/common.yml
+++ b/.github/workflows/common.yml
@@ -32,6 +32,8 @@ jobs:
           VALIDATE_JAVASCRIPT_STANDARD: false
           VALIDATE_JSON: false
           VALIDATE_CHECKOV: false
+          VALIDATE_CSS: false
+          VALIDATE_HTML: false
           LINTER_RULES_PATH: /
           JAVASCRIPT_ES_CONFIG_FILE: eslint.config.js
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 8a4dd20..41fcbdf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,8 @@
 
 # Node JS
 node_modules/
+
+public/images
+*precompiled.js
+
+
diff --git a/package-lock.json b/package-lock.json
index a49e04b..38ac0c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "express": "^4.21.0",
+        "handlebars": "^4.7.8",
         "morgan": "^1.10.0"
       },
       "devDependencies": {
@@ -1318,6 +1319,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -1871,6 +1893,15 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/morgan": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
@@ -1936,6 +1967,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "license": "MIT"
+    },
     "node_modules/npm-run-path": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@@ -2528,6 +2565,15 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -2699,6 +2745,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/uglify-js": {
+      "version": "3.19.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -2762,6 +2821,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
+      "license": "MIT"
+    },
     "node_modules/wrap-ansi": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
diff --git a/package.json b/package.json
index 3f81b54..c9f06e0 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "husky && husky install",
+    "prestart": "npm run compile:templates",
     "start": "DEBUG=* && node ./server/server.js",
+    "compile:templates": "handlebars public/components/Cards/cards.hbs -f public/components/Cards/cards.precompiled.js",
     "lint": "eslint . --fix && prettier --write ."
   },
   "author": "",
@@ -27,6 +29,7 @@
   },
   "dependencies": {
     "express": "^4.21.0",
+    "handlebars": "^4.7.8",
     "morgan": "^1.10.0"
   }
 }
diff --git a/public/components/Cards/cards.css b/public/components/Cards/cards.css
new file mode 100644
index 0000000..106e9f7
--- /dev/null
+++ b/public/components/Cards/cards.css
@@ -0,0 +1,57 @@
+@import '/public/variables.css';
+
+.card {
+  background-color: var(--main-color);
+  display: flex;
+  padding: var(--space-xs);
+  width: 100%;
+  min-height: var(--card-min-height);
+  max-height: var(--card-max-height);
+  gap: var(--space-xs);
+  border-radius: var(--border-radius-m);
+}
+
+.card-img {
+  min-width: var(--card-img-min-width);
+  max-width: var(--card-img-max-width);
+  height: var(--card-img-height);
+  overflow: hidden;
+  position: relative;
+  border-radius: var(--border-radius-m);
+}
+
+.card-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.card-content {
+  padding-bottom: var(--space-xs);
+  overflow: hidden;
+}
+
+.card-content p {
+  line-height: var(--line-height-s);
+  font-family: var(--text-font);
+  margin-top: var(--space-null);
+}
+
+.card-content__header {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--text-size-xl);
+  margin-bottom: var(--space-m);
+}
+
+.card-content__text {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-size);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 95%;
+  overflow: hidden;
+}
diff --git a/public/components/Cards/cards.hbs b/public/components/Cards/cards.hbs
new file mode 100644
index 0000000..79de907
--- /dev/null
+++ b/public/components/Cards/cards.hbs
@@ -0,0 +1,13 @@
+{{#each items}}
+  <div class='card'>
+    {{#if imageUrl}}
+    <div class="card-img">
+        <img src="{{imageUrl}}">
+    </div>
+    {{/if}}
+    <div class='card-content'>
+      <p class='card-content__header'>{{title}}</p>
+      <p class='card-content__text'>{{description}}</p>
+    </div>
+  </div>
+{{/each}}
diff --git a/public/components/Cards/cards.js b/public/components/Cards/cards.js
new file mode 100644
index 0000000..0c7024f
--- /dev/null
+++ b/public/components/Cards/cards.js
@@ -0,0 +1,11 @@
+export default class Cards {
+  constructor(parent, items) {
+    this.parent = parent;
+    this.items = items;
+  }
+
+  render() {
+    const template = Handlebars.templates['cards.hbs'];
+    this.parent.innerHTML = template({ items: this.items });
+  }
+}
diff --git a/public/index.css b/public/index.css
new file mode 100644
index 0000000..65dac6c
--- /dev/null
+++ b/public/index.css
@@ -0,0 +1,23 @@
+@import './components/Cards/cards.css';
+@import './variables.css';
+
+body {
+  margin: 0;
+  background-color: var(--background-color);
+}
+
+.main-content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.main-content__feed {
+  margin: var(--space-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin-left: var(--main-content-feed-margin-left);
+  margin-right: var(--main-content-feed-margin-right);
+  max-width: var(--main-content-feed-max-width);
+}
diff --git a/public/index.html b/public/index.html
index 86cd0d9..2585e07 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,25 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <title>Hello World!</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>DEAD VC.RU</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="index.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <h1>Hello World!</h1>
+    <main class="main-content">
+      <div class="main-content__feed"></div>
+    </main>
+
+    <script src="/handlebars/dist/handlebars.runtime.js"></script>
+    <script src="./components/Cards/cards.precompiled.js"></script>
+    <script type="module" src="index.js"></script>
   </body>
 </html>
diff --git a/public/index.js b/public/index.js
new file mode 100644
index 0000000..745174a
--- /dev/null
+++ b/public/index.js
@@ -0,0 +1,49 @@
+import Cards from './components/Cards/cards.js';
+
+const cardsCollection = [
+  {
+    title: 'What is Lorem Ipsum? What is Lorem Ipsum?',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
+      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
+      `,
+    imageUrl: 'images/1.jpg',
+  },
+  {
+    title: 'title2',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      `,
+  },
+  {
+    title: 'title3',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
+      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 text1 
+      text1 text text1 text1 text1 text1 text1 text1 text`,
+    imageUrl: 'images/1.jpg',
+  },
+  {
+    title: 'title4',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      `,
+  },
+  {
+    title: 'title3',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
+      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 text1 
+      text1 text text1 text1 text1 text1 text1 text1 text`,
+    imageUrl: 'images/1.jpg',
+  },
+];
+
+const feed = document.querySelector('.main-content__feed');
+const cards = new Cards(feed, cardsCollection);
+cards.render();
diff --git a/public/variables.css b/public/variables.css
new file mode 100644
index 0000000..4e44ba7
--- /dev/null
+++ b/public/variables.css
@@ -0,0 +1,46 @@
+:root {
+  --background-color: #edeef0;
+  --accent-color: #9950f6;
+  --main-color: #ffffff;
+  --hover-color: #551aa0;
+  --active-color: #b47cfb;
+  --disabled-color: #dbbfff;
+
+  --text-color: #000000;
+  --text-font: 'Play', sans-serif;
+
+  --space-null: 0px;
+  --space-xxs: 5px;
+  --space-xs: 10px;
+  --space-s: 15px;
+  --space-m: 20px;
+  --space-l: 25px;
+
+  --border-radius-s: 5px;
+  --border-radius-m: 10px;
+  --border-radius-l: 15px;
+
+  --font-weight-thin: 100;
+  --font-weight-semibold: 300;
+  --font-weight-bold: 600;
+
+  --text-size-xs: 12px;
+  --text-size: 16px;
+  --text-size-l: 18px;
+  --text-size-xl: 20px;
+  --text-size-h2: 24px;
+  --text-size-h1: 40px;
+
+  --line-height-s: 1.4;
+  --line-height-m: 1.6;
+  --line-height-l: 1.8;
+
+  --card-min-height: 120px;
+  --card-max-height: 150px;
+  --card-img-min-width: 150px;
+  --card-img-max-width: 150px;
+  --card-img-height: 150px;
+  --main-content-feed-margin-left: 30vw;
+  --main-content-feed-margin-right: 30vw;
+  --main-content-feed-max-width: 500px;
+}
diff --git a/server/server.js b/server/server.js
index 30e0de7..14ba49a 100644
--- a/server/server.js
+++ b/server/server.js
@@ -8,7 +8,8 @@ const app = express();
 app.use(morgan('dev'));
 app.use(express.static(path.resolve(__dirname, '..', 'public')));
 app.use(express.static(path.resolve(__dirname, '..', 'node_modules')));
-app.use(express.static(path.resolve(__dirname, 'images')));
+app.use(express.static(path.resolve(__dirname, '..', 'images')));
+app.use(express.static(path.resolve(__dirname, '..', 'components')));
 
 const port = process.env.PORT || 3000;