diff --git a/block_func.js b/block_func.js
new file mode 100644
index 0000000..4cc20ff
--- /dev/null
+++ b/block_func.js
@@ -0,0 +1,177 @@
+function displayCv(inputCvId, inputAccessKey) {
+    fetch(`check_auth.php?cvId=${inputCvId}`)
+        .then(response => response.json())
+        .then(data => {
+            if (data){
+                const visible = data.visible;
+                const accessKey = data.accessKey;
+                if (visible === 0) {
+                    document.getElementById('tableSections').innerText = 'This cv is in private session.';
+                }
+                else if (visible === 1) {
+                    displaySection(inputCvId);
+                }
+                else if (visible === 2) {
+                    if (accessKey === inputAccessKey) {
+                        displaySection(inputCvId);
+                    }
+                    else {
+                        document.getElementById('tableSections').innerText = 'Missing accessKey.';
+                    }
+                }
+                else {
+                    document.getElementById('tableSections').innerText = 'Invalid cvId.';
+                }
+            }
+            else {
+                document.getElementById('tableSections').innerText = 'Invalid cvId.';
+            }
+        })
+        .catch(error => {
+            console.error('Error checking profile permission:', error);
+        });
+}
+
+function displaySection(cvId) {
+    const sections = ['profile', 'education', 'publication', 'project', 'other', 'volunteer', 'awards', 'skills'];
+    sections.forEach(tableName => {
+        const titleId = tableName + 'Title';
+        const displayId = tableName + 'Data';
+        const sectionHTML = `
+                    <h2 id="${titleId}"></h2>
+                    <ul id="${displayId}"></ul>
+                `;
+        document.getElementById('tableSections').innerHTML += sectionHTML;
+        fetchTitle(cvId, tableName, titleId);
+        fetchConfig(cvId, tableName, displayId, titleId);
+    });
+}
+
+function fetchTitle(cvId, tableName, titleId) {
+    fetch(`fetch_title.php?cvId=${cvId}&tableName=${tableName}`)
+        .then(response => response.json())
+        .then(fetchedTitleName => {
+            const title = document.getElementById(titleId);
+            title.innerHTML = fetchedTitleName;
+        })
+        .catch(error => {
+            console.error('Error fetching title name:', error);
+        });
+}
+
+function fetchConfig(cvId, tableName, displayId, titleId) {
+    const configMapping = {
+        "defaultProfileLayout": defaultProfileLayout,
+        "defaultContentLayout": defaultContentLayout,
+    };
+    fetch(`fetch_config.php?cvId=${cvId}&tableName=${tableName}`)
+        .then(response => response.json())
+        .then(fetchedConfigName => {
+            // Look up the corresponding configuration object
+            const config = configMapping[fetchedConfigName];
+            if (config) {
+                applyConfig(config, displayId);
+            }
+            displayBlockData(cvId, tableName, displayId, titleId, config);
+        })
+        .catch(error => console.error('Error fetching config name:', error));
+}
+
+function applyConfig(config, displayId) {
+    const sectionElement = document.getElementById(displayId);
+    if (sectionElement && config) {
+        for (const tableStyleKey in config.additionalBlockStyles) {
+            if (config.additionalBlockStyles.hasOwnProperty(tableStyleKey)) {
+                sectionElement.style[tableStyleKey] = config.additionalBlockStyles[tableStyleKey];
+            }
+        }
+        const h2Element = sectionElement.querySelector('h2');
+        if (h2Element) {
+            for (const titleStyleKey in config.titleStyles) {
+                if (config.titleStyles.hasOwnProperty(titleStyleKey)) {
+                    h2Element.style[titleStyleKey] = config.titleStyles[titleStyleKey];
+                }
+            }
+        }
+    }
+    else {
+        console.error(`Section element with ID ${displayId} not found.`);
+    }
+}
+
+function displayBlockData(cvId, tableName, displayId, titleId, sectionConfigs) {
+    // Additional hidden columns
+    let hiddenColumns = ['id', 'cid', 'uid', 'owner', 'visible', 'passwd', 'sequence', 'accessKey'];
+
+    // Fetch column names from the specified table
+    fetch(`fetch_block.php?cvId=${cvId}&tableName=${tableName}`)
+        .then(response => response.json())
+        .then(data => {
+            const tableData = document.getElementById(displayId);
+            const title = document.getElementById(titleId);
+            if (data.length === 0) {
+                tableData.style.display = 'none'; // Hide the display area if no data is retrieved
+                title.style.display = 'none'; // Hide the title if no data is retrieved
+                return;
+            }
+            tableData.innerHTML = ""; // Clear existing list
+
+            const config = sectionConfigs && sectionConfigs[tableName] ? sectionConfigs[tableName] : {};
+            let isFirstRow = true;
+
+            data.forEach(row => {
+                const tableRow = document.createElement('tr');
+                const lineBreak = document.createElement("br");
+                let cellData = "";
+
+                // Populate the table row with table information based on configuration
+                for (const key in row) {
+                    if (row.hasOwnProperty(key) && !hiddenColumns.includes(key) && row[key] !== null && row[key] !== '') {
+                        const tableCell = document.createElement('td');
+
+                        // Retrieve configuration for the current key
+                        const configKey = config[key];
+                        const prefixStyle = configKey && configKey.prefixStyle ? `style='${configKey.prefixStyle}'` : '';
+                        const dataStyle = configKey && configKey.dataStyle ? `style='${configKey.dataStyle}'` : '';
+                        const dataSameLine = configKey && configKey.dataSameLine;
+                        const dataTableStyle = configKey && configKey.dataTableStyle ? configKey.dataTableStyle : '';
+
+                        // Display data without column name
+                        if (config.invisiblePrefixes && config.invisiblePrefixes.includes(key)) {
+                            cellData += `<span ${dataStyle}>${row[key]}</span>`;
+                        }
+                        else {
+                            // Display data with column name
+                            const prefixTag = prefixStyle ? `<span ${prefixStyle}>${key}:</span>` : `<strong>${key}:</strong>`;
+                            cellData += `${prefixTag} <span ${dataStyle}>${row[key]}</span>`;
+                        }
+
+                        if (!dataSameLine){
+                            tableCell.innerHTML = cellData; // Set the innerHTML of the table cell
+                            tableRow.appendChild(tableCell); // Append the table cell to the table row
+                            cellData = ""; // CLear cell data
+                        }
+                        // Apply dataTableStyle to the table cell
+                        tableCell.setAttribute('style', dataTableStyle);
+                    }
+                }
+
+                // Apply any additional styles to the table row
+                for (const styleKey in blockStyles) {
+                    if (blockStyles.hasOwnProperty(styleKey)) {
+                        tableRow.style[styleKey] = blockStyles[styleKey];
+                    }
+                }
+
+                // Append the table row to the tableData element
+                if (!isFirstRow) {
+                    tableData.appendChild(lineBreak);
+                }
+                else {
+                    isFirstRow = false;
+                }
+                tableData.appendChild(tableRow);
+            });
+        })
+        .catch(error => console.error('Error fetching table information:', error));
+}
diff --git a/block_layouts.js b/block_layouts.js
new file mode 100644
index 0000000..a9f226a
--- /dev/null
+++ b/block_layouts.js
@@ -0,0 +1,91 @@
+// Attributes: prefixStyle, dataStyle, dataSameLine, dataTableStyle, invisiblePrefixes
+
+const blockStyles = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+};
+
+const defaultProfileLayout = {
+    profile: {
+        firstName: {
+            dataSameLine: true,
+            dataStyle: 'font-size: 30px; font-weight: bold; padding-right: 5px;',
+            dataTableStyle: 'position: relative;',
+        },
+        lastName: {
+            dataStyle: 'font-size: 30px; font-weight: bold;',
+            dataTableStyle: 'position: relative;',
+        },
+        invisiblePrefixes: ['firstName', 'lastName', 'email', 'status'],
+    },
+    backgroundColor: null,
+};
+
+const defaultContentLayout = {
+    education: {
+        name: {
+            dataStyle: 'font-weight: bold;',
+            dataTableStyle: 'position: relative;',
+        },
+        invisiblePrefixes: ['name'],
+    },
+    publication: {
+        name: {
+            dataStyle: 'font-weight: bold;',
+            dataTableStyle: 'position: relative;',
+        },
+        invisiblePrefixes: ['name'],
+        backgroundColor: null,
+    },
+    project: {
+        name: {
+            dataStyle: 'font-weight: bold;',
+            dataTableStyle: 'position: relative;',
+        },
+        role: {
+            dataStyle: 'font-style: italic;',
+        },
+        invisiblePrefixes: ['name', 'info', 'role'],
+    },
+    other: {
+        name: {
+            dataStyle: 'font-weight: bold;',
+            dataTableStyle: 'position: relative;',
+        },
+        role: {
+            dataStyle: 'font-style: italic;',
+        },
+        invisiblePrefixes: ['name', 'info', 'role'],
+    },
+    volunteer: {
+        name: {
+            dataStyle: 'font-weight: bold;',
+            dataTableStyle: 'position: relative;',
+        },
+        invisiblePrefixes: ['name', 'info'],
+    },
+    awards: {
+        name: {
+            dataStyle: 'font-weight: bold;',
+            dataTableStyle: 'position: relative;',
+        },
+        invisiblePrefixes: ['name'],
+    },
+    skills: {
+        name: {
+            dataStyle: 'font-weight: bold;',
+            dataTableStyle: 'position: relative;',
+        },
+        invisiblePrefixes: ['name', 'info'],
+    },
+    titleStyles:{
+        Color: '#007bff',
+    },
+    additionalBlockStyles: {
+        padding: '5px',
+        backgroundColor: 'lightblue',
+        borderColor: '#ccc',
+        borderRadius: '8px',
+    },
+};
diff --git a/blocks.css b/blocks.css
new file mode 100644
index 0000000..5d4230d
--- /dev/null
+++ b/blocks.css
@@ -0,0 +1,20 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    margin-bottom: 20px;
+}
+
+li {
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+}
+
+strong {
+    color: #007bff;
+}
diff --git a/check_auth.php b/check_auth.php
new file mode 100644
index 0000000..4968232
--- /dev/null
+++ b/check_auth.php
@@ -0,0 +1,22 @@
+<?php
+include 'connectDB.php';
+
+$cvId = $_GET['cvId'];
+
+$sql = "SELECT visible, accessKey FROM `profile` WHERE `cid` = ?";
+$stmt = $conn->prepare($sql);
+$stmt->bind_param("i", $cvId);
+$stmt->execute();
+$result = $stmt->get_result();
+
+if ($result->num_rows > 0) {
+    $row = $result->fetch_assoc();
+    echo json_encode($row);
+}
+else {
+    echo json_encode(null);
+}
+
+$stmt->close();
+$conn->close();
+?>
diff --git a/connectDB.php b/connectDB.php
new file mode 100644
index 0000000..31f8de2
--- /dev/null
+++ b/connectDB.php
@@ -0,0 +1,15 @@
+<?php
+    $servername = "localhost";
+    $username 	= "cvsys";
+    $password 	= "kSD2Af2MrpPXPnAe";
+    $db		    = "cvsys";
+
+    // Create connection
+    $conn = new mysqli($servername, $username, $password, $db);
+
+    // Check connection
+    if ($conn->connect_error) {
+        die("Connection failed: " . $conn->connect_error);
+    }
+    //echo "Connected successfully";
+?>
diff --git a/fetch_block.php b/fetch_block.php
new file mode 100644
index 0000000..cab9b08
--- /dev/null
+++ b/fetch_block.php
@@ -0,0 +1,28 @@
+<?php
+include 'connectDB.php';
+
+$cvId = $_GET['cvId'];
+$tableName = $_GET['tableName'];
+
+if ($tableName == 'profile'){
+    // visible: 0-private; 1-public; 2-authentication
+    $sql = "SELECT * FROM `profile` WHERE cid = $cvId AND (visible = 1 OR visible = 2)";
+}
+else{
+    $sql = "SELECT * FROM `$tableName` WHERE owner = $cvId and visible = 1 GROUP BY (sequence)";
+}
+
+$result = $conn->query($sql);
+$tableData = [];
+
+if ($result->num_rows > 0) {
+    // Loop through each row of the result set
+    while ($row = $result->fetch_assoc()) {
+        // Add each row to the $tableData array
+        $tableData[] = $row;
+    }
+}
+
+echo json_encode($tableData);
+$conn->close();
+?>
diff --git a/fetch_config.php b/fetch_config.php
new file mode 100644
index 0000000..53b7d8b
--- /dev/null
+++ b/fetch_config.php
@@ -0,0 +1,19 @@
+<?php
+include 'connectDB.php';
+
+$cvId = $_GET['cvId'];
+$tableName = $_GET['tableName'];
+
+$sql = "SELECT `$tableName` FROM `config` WHERE `owner` = $cvId";
+
+$result = $conn->query($sql);
+
+if ($result->num_rows > 0) {
+    $row = $result->fetch_assoc();
+    echo json_encode($row[$tableName]);
+} else {
+    echo json_encode(null);
+}
+
+$conn->close();
+?>
diff --git a/fetch_title.php b/fetch_title.php
new file mode 100644
index 0000000..4a83331
--- /dev/null
+++ b/fetch_title.php
@@ -0,0 +1,19 @@
+<?php
+include 'connectDB.php';
+
+$cvId = $_GET['cvId'];
+$tableName = $_GET['tableName'];
+
+$sql = "SELECT `$tableName` FROM `title` WHERE `owner` = $cvId";
+
+$result = $conn->query($sql);
+
+if ($result->num_rows > 0) {
+    $row = $result->fetch_assoc();
+    echo json_encode($row[$tableName]);
+} else {
+    echo json_encode('');
+}
+
+$conn->close();
+?>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..01afd79
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="blocks.css">
+    <title>Table Information</title>
+</head>
+<body>
+
+<div id="tableSections"></div>
+
+<script src="block_func.js"></script>
+<script src="block_layouts.js"></script>
+<script>
+    window.onload = function() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const inputCvId = urlParams.get('cvId');
+        const inputAccessKey = urlParams.get('accessKey');
+        if (inputCvId) {
+            displayCv(inputCvId, inputAccessKey);
+        }
+        else {
+            document.getElementById('tableSections').innerText = 'No cvId provided.';
+        }
+    };
+</script>
+
+</body>
+</html>
diff --git a/readme.txt b/readme.txt
new file mode 100644
index 0000000..57f1f31
--- /dev/null
+++ b/readme.txt
@@ -0,0 +1,30 @@
+Variables:
+id - idex of the table: int, auto-increment, not null, primary key
+uid - user id: int, auto-increment, not null, primary key
+name - name of the item: varchar(255), not null
+passwd - user password: varchar(255), not null
+avatar - user avatar: longblob, null
+email - user email: varchar(100), null
+contact - user contact, can be physical or url: varchar(255), null
+status - educational status, including degree or job information of the user: varchar(50), null
+interest - user interests: varchar(255), null
+descrip - user description: text, null
+owner - id of the owner: int, not null
+issue_date - issue date of the item: date, not null
+start_date - start date of the item: date, not null
+end_date - end date of the item: date, not null
+founder - award/honor issue organization or project founder: varchar(255), not null
+info - more information: text, null
+visible - visibility of the item: int, 1, not null
+location - university location: varchar(255), not null
+major - user major: varchar(100), not null
+cgpa - user cgpa: float(5,2), not null
+gpa_scale - user gpa scale:  float(5,2), not null
+gpa_info - more information about user gpa: varchar(50), null
+coursework - user coursework: text, null
+role - user role in this item: varchar(100), not null
+author - authors of the publication: varchar(255), not null
+url - url of the item: varchar(255), null
+
+Functions:
+block(table_name, user_id)