diff --git a/src/prices.html b/src/prices.html
index 982f31a..47c3767 100644
--- a/src/prices.html
+++ b/src/prices.html
@@ -1,11 +1,23 @@
- Core Computing
+ Prețuri - Core Computing
-
+
+
diff --git a/src/prices/vps.json b/src/prices/vps.json
new file mode 100644
index 0000000..5e534fa
--- /dev/null
+++ b/src/prices/vps.json
@@ -0,0 +1,11 @@
+{
+ "columns": ["vCPU", "Memorie", "Transfer de date", "SSD", "preț/oră"],
+ "units": ["", "MB", "GB", "GB", "ron"],
+ "data": [
+ [1, 512, 512, 20, 0.03],
+ [1, 1024, 512, 20, 0.04],
+ [2, 1024, 1024, 40, 0.08],
+ [4, 4096, 4096, 100, 1.5],
+ [8, 8192, 8192, 512, 6]
+ ]
+}
diff --git a/src/script/components/app-price-table.js b/src/script/components/app-price-table.js
new file mode 100644
index 0000000..e0e1a55
--- /dev/null
+++ b/src/script/components/app-price-table.js
@@ -0,0 +1,60 @@
+import styles from '!raw-loader!sass-loader!./styles/app-price-table.scss';
+
+class AppPriceTable extends HTMLElement {
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ fetch(this.dataset.content)
+ .then(response => response.json())
+ .then(data => {
+ const root = this.attachShadow({ mode: 'open' });
+
+ const style = document.createElement('style');
+ style.textContent = styles;
+ root.appendChild(style);
+
+ const table = document.createElement('table');
+ table.className = 'table';
+ table.cellSpacing = 0;
+
+ const thead = document.createElement('thead');
+
+ const theadRow = document.createElement('tr');
+
+ data.columns.forEach(column => {
+ const col = document.createElement('th');
+ col.innerText = column;
+ theadRow.appendChild(col);
+ });
+
+ thead.appendChild(theadRow);
+ table.appendChild(thead);
+
+ const tbody = document.createElement('tbody');
+
+ data.data.forEach(item => {
+ const row = document.createElement('tr');
+
+ item.forEach((field, i) => {
+ const cell = document.createElement('td');
+ cell.innerText = field + ' ' + data.units[i];
+ row.appendChild(cell);
+ });
+
+ tbody.appendChild(row);
+ });
+
+ table.appendChild(tbody);
+
+ root.appendChild(table);
+ });
+ }
+
+ static get observedAttributes() {
+ return ['data-content'];
+ }
+}
+
+customElements.define('app-price-table', AppPriceTable);
diff --git a/src/script/components/styles/app-price-table.scss b/src/script/components/styles/app-price-table.scss
new file mode 100644
index 0000000..ac554cd
--- /dev/null
+++ b/src/script/components/styles/app-price-table.scss
@@ -0,0 +1,28 @@
+.table {
+ width: 100%;
+
+ & > thead {
+ & > tr {
+ & > th {
+ padding: 15px 0;
+ border-bottom: 2px solid #015082;
+ font-size: 20px;
+ line-height: 27px;
+ font-weight: bold;
+ color: #0072bc;
+ text-align: left;
+ }
+ }
+ }
+
+ & > tbody {
+ & > tr {
+ & > td {
+ padding: 15px 0;
+ border-bottom: 1px solid #0072bc;
+ font-size: 20px;
+ line-height: 27px;
+ }
+ }
+ }
+}
diff --git a/src/script/index.js b/src/script/index.js
index 87f5cc8..ab68adb 100644
--- a/src/script/index.js
+++ b/src/script/index.js
@@ -5,9 +5,11 @@ import '../style/main.scss';
import '../style/index.scss';
import '../style/about.scss';
import '../style/services.scss';
+import '../style/prices.scss';
// load components
import './components/app-header';
import './components/app-button';
import './components/app-service-menu';
import './components/app-service-header';
+import './components/app-price-table';
diff --git a/src/style/prices.scss b/src/style/prices.scss
new file mode 100644
index 0000000..1335704
--- /dev/null
+++ b/src/style/prices.scss
@@ -0,0 +1,15 @@
+.prices {
+ &_content {
+ margin-top: 70px;
+ padding: 20px;
+ }
+
+ &_header {
+ font-size: 36px;
+ line-height: 48px;
+ font-weight: bold;
+ margin-left: 30px;
+ margin-top: 60px;
+ margin-bottom: 15px;
+ }
+}