diff --git a/Answers to technical questions.md b/Answers to technical questions.md
new file mode 100644
index 0000000..2e359d9
--- /dev/null
+++ b/Answers to technical questions.md	
@@ -0,0 +1,50 @@
+# Answers to Technical Questions
+
+### 1. How long did you spend on the coding test? What would you add to your solution if you had more time?
+* **Time Spent:** I spent approximately 2 and a half days working on this evaluation. This included setting up the MySQL database layer, creating a reliable PHP MVC folder architecture to handle slide records, implementing the administrative CRUD dashboards, and refining the frontend interface for pixel-perfect responsiveness matching both desktop and mobile target mockups.
+
+* **Production-Grade Features Already Implemented:**
+    1. **Robust Validation Layer (Create & Edit):** Implemented thorough data sanitization using `trim()` alongside mandatory required string tracking. I also added strict browser-side validation blocks (`required` and explicit asset input `accept` parameters) to guide user entries.
+    2. **Deep Binary Image Inspections:** Implemented server-side security using PHP's `finfo` extension to analyze the underlying binary magic bytes of file uploads, safely blocking malicious or corrupted injections from breaking layouts regardless of their renamed file extension.
+    3. **Atomic File Swapping Operations:** Built a safe file-swapping pipeline during record adjustments that ensures older slide assets are *only* pruned from disk (`unlink()`) once the new image upload and MySQL database transactions succeed completely. If a transaction fails, it auto-rolls back file transfers to save space and prevent broken carousel links.
+    4. **UX Destructive Safeguards:** Wired JavaScript confirmation dialog interceptors on all dashboard element removal controls to protect against unintended record purging.
+    5. **Separation of Concerns:** Externalized frontend interactive JavaScript controllers into detached component assets (`main.js`), eliminating script parsing overhead from server-side markup trees.
+    6. **De-coupled Asset Management:** Externalized all custom presentation layers into a dedicated stylesheet layout (`style.css`). This strict separation reduces template overhead, enables native browser asset caching, and radically maximizes Cumulative Layout Shift (CLS) performance scores.
+
+* **What I would add with more time:**
+    1. **Architecture Upgrade (React & Framework Integration):** If given more time, I would refactor the front-end architecture of this module into a single, cohesive **React.js application**. Instead of server-side PHP loops rendering the static containers, I would create a highly optimized, state-driven reusable component layout. It would dynamically pull database slides through a lightweight **asynchronous Ajax API layer** hosted on an optimized **Laravel**, **CodeIgniter**, or **Yii** REST API controller endpoint. This structural separation would completely eliminate layout flickering, enable smooth fluid layout translations, and drastically decouple the front-end presentation from our core server layer.
+
+---
+
+### 2. How would you track down a performance issue in production? Have you ever had to do this?
+Yes, tracking down latency and system bottlenecks in production requires a highly structured, multi-tier diagnostic approach across the entire stack:
+
+* **Database Tier (PostgreSQL / MySQL):** I look for unoptimized queries, missing foreign key indexes, or heavy sequential table scans. In PostgreSQL, I run `EXPLAIN ANALYZE` on slower queries to track execution tree costs. In MySQL, I utilize the Slow Query Log and implement connection pooling to handle heavy user traffic efficiently.
+* **Backend Application Tier (Laravel / CodeIgniter / Yii):** I profile execution timelines using specialized ecosystem tooling (e.g., Laravel Telescope, debug bars, or Xdebug profiling logs). Common bottlenecks often include "N+1 query problems" which I resolve using eager loading. I optimize performance by caching highly repetitive, static data queries using Redis or Memcached structures.
+* **Frontend Tier (React.js / Ajax / Asset Pipelines):** For client-side latency, I audit network operations in Chrome DevTools to check asynchronous Ajax payload sizes. In React, I prevent unnecessary re-renders of complex visual structures by optimizing the component architecture with hooks like `useMemo`, `useCallback`, and implementing lazy loading for large code splittings.
+* **Workflow & Error Isolation:** I track application issues through centralized error logging platforms and align bug resolutions systematically within our team's **Jira** sprint tracking boards.
+
+---
+
+### 3. Please describe yourself using JSON.
+```json
+{
+  "name": "Ashwini",
+  "role": "Full Stack Developer",
+  "professional_profile": {
+    "philosophy": "Detail-oriented engineer focused on writing highly optimized, clean, and reusable code structures following robust DRY and SOLID design principles.",
+    "methodologies": ["Agile/Scrum", "MVC Architecture", "Object-Oriented Programming (OOP)"]
+  },
+  "technical_skills": {
+    "backend_frameworks": ["Laravel", "CodeIgniter", "Yii", "PHP (Core & OOP)"],
+    "frontend_ecosystem": ["React.js", "JavaScript (ES6+)", "jQuery", "Ajax", "Bootstrap 5", "HTML5/CSS3"],
+    "databases_and_storage": ["PostgreSQL", "MySQL"],
+    "version_control": ["Git", "SVN"],
+    "project_management_tools": ["JIRA"]
+  },
+  "engineering_strengths": {
+    "optimization": "Database indexing, query profiling, caching strategies, and minifying asset payloads to enhance Core Web Vitals.",
+    "reusability": "Designing generic database service layers, building reusable React components, and abstracting shared utility helpers.",
+    "attention_to_detail": "Thorough edge-case testing, cross-browser CSS responsiveness, and strict adherence to Figma/design layout mockups."
+  }
+}
\ No newline at end of file
diff --git a/app/config/config.php b/app/config/config.php
new file mode 100644
index 0000000..d854310
--- /dev/null
+++ b/app/config/config.php
@@ -0,0 +1,19 @@
+<?php
+
+// =====================
+// APP SETTINGS
+// =====================
+define('BASE_URL', 'http://localhost/wpoet-test/public/');
+define('SITE_URL', 'http://localhost/wpoet-test/');
+
+define('UPLOAD_PATH', dirname(__DIR__, 2) . '/uploads/');
+define('UPLOAD_URL', 'http://localhost/wpoet-test/uploads/');
+define('ROOT_PATH', dirname(__DIR__, 2));
+
+// =====================
+// DATABASE SETTINGS
+// =====================
+define('DB_HOST', 'localhost');
+define('DB_NAME', 'wpoet_test');
+define('DB_USER', 'root');
+define('DB_PASS', '');
\ No newline at end of file
diff --git a/app/config/database.php b/app/config/database.php
new file mode 100644
index 0000000..e26ff2f
--- /dev/null
+++ b/app/config/database.php
@@ -0,0 +1,32 @@
+<?php
+
+require_once 'config.php';
+
+class Database
+{
+    private $connection;
+
+    public function connect()
+    {
+        $this->connection = null;
+
+        try {
+
+            $this->connection = new PDO(
+                "mysql:host=" . DB_HOST . ";dbname=" . DB_NAME,
+                DB_USER,
+                DB_PASS
+            );
+
+            $this->connection->setAttribute(
+                PDO::ATTR_ERRMODE,
+                PDO::ERRMODE_EXCEPTION
+            );
+
+        } catch (PDOException $e) {
+            die("Connection failed: " . $e->getMessage());
+        }
+
+        return $this->connection;
+    }
+}
\ No newline at end of file
diff --git a/app/controllers/SlideController.php b/app/controllers/SlideController.php
new file mode 100644
index 0000000..fb0dd47
--- /dev/null
+++ b/app/controllers/SlideController.php
@@ -0,0 +1,40 @@
+<?php
+
+require_once __DIR__ . '/../models/Slide.php';
+
+class SlideController
+{
+    private $slideModel;
+
+    public function __construct($db)
+    {
+        $this->slideModel = new Slide($db);
+    }
+
+    // GET ALL SLIDES (for frontend or admin list)
+    public function index()
+    {
+        return $this->slideModel->getAllSlides();
+    }
+
+    // CREATE SLIDE
+    public function store($data)
+    {
+        return $this->slideModel->createSlide($data);
+    }
+
+    public function getById($id)
+    {
+        return $this->slideModel->getSlideById($id);
+    }
+
+    public function update($data)
+    {
+        return $this->slideModel->updateSlide($data);
+    }
+
+    public function delete($id)
+    {
+        return $this->slideModel->deleteSlide($id);
+    }
+}
\ No newline at end of file
diff --git a/app/models/slide.php b/app/models/slide.php
new file mode 100644
index 0000000..ba9d0fe
--- /dev/null
+++ b/app/models/slide.php
@@ -0,0 +1,115 @@
+<?php
+
+class Slide
+{
+    private $connection;
+    private $table = "slides";
+
+    public function __construct($database)
+    {
+        $this->connection = $database;
+    }
+
+    // Get all slides
+    public function getAllSlides()
+    {
+        $query = "SELECT * FROM {$this->table} ORDER BY display_order ASC";
+
+        $statement = $this->connection->prepare($query);
+
+        $statement->execute();
+
+        return $statement->fetchAll(PDO::FETCH_ASSOC);
+    }
+
+    // Create slide
+    public function createSlide($data)
+    {
+        $query = "INSERT INTO {$this->table}
+        (
+            tab_title,
+            tag_line,
+            slide_title,
+            description,
+            button_text,
+            button_link,
+            image,
+            display_order
+        )
+        VALUES
+        (
+            :tab_title,
+            :tag_line,
+            :slide_title,
+            :description,
+            :button_text,
+            :button_link,
+            :image,
+            :display_order
+        )";
+
+        $statement = $this->connection->prepare($query);
+
+        return $statement->execute([
+
+            ':tab_title'     => $data['tab_title'],
+            ':tag_line'      => $data['tag_line'],
+            ':slide_title'   => $data['slide_title'],
+            ':description'   => $data['description'],
+            ':button_text'   => $data['button_text'],
+            ':button_link'   => $data['button_link'],
+            ':image'         => $data['image'],
+            ':display_order' => $data['display_order']
+
+        ]);
+    }
+
+    public function getSlideById($id)
+    {
+        $query = "SELECT * FROM slides WHERE id = :id";
+        $stmt = $this->connection->prepare($query);
+        $stmt->bindParam(':id', $id);
+        $stmt->execute();
+
+        return $stmt->fetch(PDO::FETCH_ASSOC);
+    }
+
+    public function updateSlide($data)
+    {
+        $query = "UPDATE slides SET
+            tab_title = :tab_title,
+            tag_line = :tag_line,
+            slide_title = :slide_title,
+            description = :description,
+            button_text = :button_text,
+            button_link = :button_link,
+            image = :image,
+            display_order = :display_order
+            WHERE id = :id";
+
+        $stmt = $this->connection->prepare($query);
+
+        return $stmt->execute([
+            ':tab_title'     => $data['tab_title'],
+            ':tag_line'      => $data['tag_line'],
+            ':slide_title'   => $data['slide_title'],
+            ':description'   => $data['description'],
+            ':button_text'   => $data['button_text'],
+            ':button_link'   => $data['button_link'],
+            ':image'         => $data['image'],
+            ':display_order' => $data['display_order'],
+            ':id'            => $data['id']
+        ]);
+    }
+
+    public function deleteSlide($id)
+    {
+        $query = "DELETE FROM slides WHERE id = :id";
+
+        $stmt = $this->connection->prepare($query);
+
+        return $stmt->execute([
+            ':id' => $id
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..2442b93
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,357 @@
+
+body {
+    margin: 0;
+    background: #072b4a; /* Matched to design dark blue */
+    font-family: Arial, sans-serif;
+}
+
+/* ====================================
+MAIN SECTION
+==================================== */
+.main-section {
+    padding: 60px 0;
+}
+
+.main-heading {
+    text-align: center;
+    color: #fff;
+    margin-bottom: 45px;
+}
+
+.main-heading h1 {
+    font-size: 42px;
+    font-weight: normal;
+    margin-bottom: 15px;
+}
+
+.main-heading p {
+    font-size: 16px;
+    color: #b0c4de;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.custom-container {
+    width: 100%;
+    max-width: 1140px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+/* ====================================
+DESKTOP SYSTEM (Widths >= 992px)
+==================================== */
+.desktop-view {
+    display: block;
+}
+
+.mobile-view {
+    display: none;
+}
+
+.main-wrapper {
+    display: flex;
+    height: 520px; 
+    background: #fff;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    overflow: hidden;
+}
+
+/* LEFT TABS */
+.tab-wrapper {
+    width: 28%;
+    background: #f4f5f7;
+    padding: 25px 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 5px;
+}
+
+.tab-item {
+    background: #fff;
+    padding: 18px 20px;
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+    cursor: pointer;
+    position: relative;
+    transition: 0.3s;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+}
+
+.tab-item.active {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+.tab-item.active::after {
+    content: '';
+    position: absolute;
+    right: -15px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left: 15px solid #74bfd0;
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent;
+    z-index: 10;
+}
+
+.tab-icon {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+}
+
+.tab-text {
+    flex-grow: 1;
+}
+
+/* TEAL CENTER SLIDER */
+.content-wrapper {
+    width: 37%;
+    background: #74bfd0;
+    height: 100%;
+}
+
+.content-slider {
+    height: 100%;
+}
+
+.content-slider .slick-list,
+.content-slider .slick-track,
+.content-slider .slick-slide > div {
+    height: 100%;
+}
+
+.slide-box {
+    height: 100%;
+    /* Increase padding to match design, but keep it tight at the top */
+    padding: 50px 40px; 
+    display: flex;
+    flex-direction: column;
+    /* CHANGE THIS FROM center TO flex-start */
+    justify-content: flex-start; 
+    color: #fff;
+}
+
+.slide-box h5 {
+    font-size: 11px;
+    text-transform: uppercase;
+    margin-bottom: 20px;
+    background: rgba(0, 0, 0, 0.15);
+    align-self: flex-start;
+    padding: 5px 12px;
+    letter-spacing: 1px;
+    font-weight: bold;
+    border-radius: 2px;
+}
+
+.slide-box h2 {
+    font-size: 32px;
+    line-height: 1.3;
+    margin-bottom: 25px;
+    font-weight: normal;
+}
+
+.slide-box .learn-more-link {
+    color: #fff;
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* RIGHT FRAMED IMAGE SLIDER */
+.image-wrapper {
+    width: 35%;
+    height: 100%;
+    background: #000;
+}
+
+.image-slider {
+    height: 100%;
+}
+
+.image-slider .slick-list,
+.image-slider .slick-track,
+.image-slider .slick-slide > div {
+    height: 100%;
+}
+
+.image-wrapper img {
+    width: 100%;
+    height: 100% !important;
+    object-fit: cover;
+    display: block;
+}
+
+.slick-dots {
+    bottom: 25px !important;
+}
+.slick-dots li button:before {
+    color: #fff !important;
+    opacity: 0.4;
+    font-size: 10px;
+}
+.slick-dots li.slick-active button:before {
+    color: #fff !important;
+    opacity: 1;
+}
+
+/* ====================================
+RESPONSIVE REFACTOR (Under 991px Viewport)
+==================================== */
+@media (max-width: 991px) {
+    .desktop-view {
+        display: none !important;
+    }
+
+    .mobile-view {
+        display: block !important;
+    }
+
+    .main-section {
+        padding: 40px 0;
+    }
+
+    .main-heading h1 {
+        font-size: 32px;
+    }
+
+    .mobile-card {
+        margin-bottom: 16px;
+        background: #fff;
+        border-radius: 6px;
+        overflow: hidden;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+    }
+
+    .mobile-tab {
+        padding: 16px 20px;
+        cursor: pointer;
+        background: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .mobile-tab-left {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+    }
+
+    .mobile-tab-left img {
+        width: 35px;
+        height: 35px;
+        object-fit: contain;
+    }
+
+    .mobile-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: #333;
+        margin: 0;
+    }
+
+    /* Icon box container sizing */
+    .mobile-icon {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .mobile-icon img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    .mobile-content {
+        position: relative;
+    }
+
+    /* Teal Top pointer triangle block */
+    .mobile-content::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        border-bottom: 10px solid #74bfd0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        z-index: 5;
+    }
+
+    /* Refactored layout with background fallbacks */
+    .mobile-slide {
+        /* Adjusted top padding to 40px to start text cleanly without a massive drop gap */
+        padding: 40px 25px 55px 25px; 
+        text-align: center;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        /* CHANGE THIS FROM center TO flex-start */
+        justify-content: flex-start; 
+        min-height: 340px;
+        position: relative;
+        z-index: 1;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+
+    /* Pure overlay layer to guarantee image visibility blends smoothly */
+    .mobile-slide::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(116, 191, 208, 0.92); /* Matches your design layout overlay tints */
+        z-index: -1;
+    }
+
+    .mobile-slide h5 {
+        font-size: 11px;
+        letter-spacing: 1px;
+        margin-bottom: 15px;
+        text-transform: uppercase;
+        background: rgba(0, 0, 0, 0.15);
+        padding: 5px 12px;
+        font-weight: bold;
+        display: inline-block;
+        border-radius: 2px;
+    }
+
+    .mobile-slide h2 {
+        font-size: 24px;
+        line-height: 1.4;
+        margin-bottom: 20px;
+        font-weight: normal;
+        max-width: 90%;
+    }
+
+    .mobile-slide .learn-more-link {
+        color: #fff;
+        text-decoration: none;
+        font-size: 16px;
+        font-weight: 500;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+    }
+}
diff --git a/assets/images/DL-communication.svg b/assets/images/DL-communication.svg
new file mode 100644
index 0000000..0088544
--- /dev/null
+++ b/assets/images/DL-communication.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="62px" height="62px" viewBox="0 0 62 62" enable-background="new 0 0 62 62" xml:space="preserve">
+<g>
+	<polyline fill="none" stroke="#696969" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+		52.83,33.465 52.83,1 9.169,1 9.169,33.465 	"/>
+	<path fill="none" stroke="#11324D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M52.83,21.994
+		l4.558,5.734v28.683c0,2.524-2.066,4.589-4.589,4.589H9.201c-2.525,0-4.589-2.065-4.589-4.589V27.729l4.589-5.735"/>
+	
+		<line fill="none" stroke="#11324D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="43.62" y1="44.938" x2="57.388" y2="27.728"/>
+	
+		<line fill="none" stroke="#11324D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="4.613" y1="27.729" x2="18.38" y2="44.938"/>
+	<path fill="none" stroke="#11324D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M57.201,57.691
+		L34.244,37.098c-1.785-1.785-4.706-1.785-6.49,0L4.798,57.691"/>
+	
+		<ellipse fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="34.957" cy="18.723" rx="2.473" ry="8.407"/>
+	
+		<line fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="34.957" y1="10.317" x2="17.685" y2="15.262"/>
+	
+		<line fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="34.957" y1="27.13" x2="17.685" y2="22.185"/>
+	<path fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M17.685,22.185
+		c-0.547,0-0.989-1.55-0.989-3.462c0-1.911,0.442-3.461,0.989-3.461"/>
+	<path fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M32.584,16.314
+		c1.097,0.253,1.914,1.236,1.914,2.409c0,1.172-0.816,2.154-1.91,2.409"/>
+	<path fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M16.632,21.132
+		c-1.097-0.253-1.914-1.235-1.914-2.409c0-1.173,0.816-2.154,1.91-2.408"/>
+	<path fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M28.07,25.387v2.967
+		c0,0.544-0.428,0.867-0.951,0.717l-5.021-1.434c-0.523-0.15-0.951-0.717-0.951-1.261v-2.967"/>
+	
+		<line fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="39.997" y1="12.789" x2="44.308" y2="11.269"/>
+	
+		<line fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="39.997" y1="24.68" x2="44.308" y2="26.2"/>
+	
+		<line fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="40.169" y1="18.724" x2="45.78" y2="18.724"/>
+</g>
+</svg>
diff --git a/assets/images/DL-learning.svg b/assets/images/DL-learning.svg
new file mode 100644
index 0000000..bfeb0b5
--- /dev/null
+++ b/assets/images/DL-learning.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="62px" height="62px" viewBox="0 0 62 62" enable-background="new 0 0 62 62" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M54.819,39.474c0,2.674-2.168,4.843-4.843,4.843c-2.674,0-4.842-2.169-4.842-4.843
+		c0-2.674,2.168-4.843,4.842-4.843C52.651,34.631,54.819,36.8,54.819,39.474"/>
+	
+		<circle fill="none" stroke="#696969" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="49.977" cy="39.474" r="4.843"/>
+	<path fill="#FFFFFF" d="M39.678,56.158c0-5.688,4.611-10.299,10.299-10.299c5.687,0,10.298,4.611,10.298,10.299H39.678z"/>
+	<path fill="none" stroke="#696969" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M39.678,56.158
+		c0-5.688,4.611-10.299,10.299-10.299c5.687,0,10.298,4.611,10.298,10.299H39.678z"/>
+	<path fill="#FFFFFF" d="M16.866,39.474c0,2.674-2.168,4.843-4.843,4.843c-2.674,0-4.842-2.169-4.842-4.843
+		c0-2.674,2.168-4.843,4.842-4.843C14.698,34.631,16.866,36.8,16.866,39.474"/>
+	
+		<circle fill="none" stroke="#696969" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="12.024" cy="39.474" r="4.843"/>
+	<path fill="#FFFFFF" d="M1.725,56.158c0-5.688,4.611-10.299,10.299-10.299c5.687,0,10.298,4.611,10.298,10.299H1.725z"/>
+	<path fill="none" stroke="#696969" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1.725,56.158
+		c0-5.688,4.611-10.299,10.299-10.299c5.687,0,10.298,4.611,10.298,10.299H1.725z"/>
+	<path fill="#FFFFFF" d="M35.843,44.317c0,2.674-2.168,4.843-4.843,4.843c-2.674,0-4.842-2.169-4.842-4.843
+		c0-2.674,2.168-4.843,4.842-4.843C33.675,39.474,35.843,41.643,35.843,44.317"/>
+	
+		<circle fill="none" stroke="#696969" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="31" cy="44.317" r="4.843"/>
+	<path fill="#FFFFFF" d="M20.702,61c0-5.688,4.611-10.299,10.299-10.299c5.687,0,10.298,4.611,10.298,10.299H20.702z"/>
+	<path fill="none" stroke="#696969" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M20.702,61
+		c0-5.688,4.611-10.299,10.299-10.299c5.687,0,10.298,4.611,10.298,10.299H20.702z"/>
+	<path fill="none" stroke="#11324D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M49.449,26.831
+		H12.551c-1.105,0-2-0.895-2-2V3c0-1.104,0.895-2,2-2h36.898c1.105,0,2,0.896,2,2v21.831C51.449,25.936,50.554,26.831,49.449,26.831
+		z"/>
+	
+		<rect x="13.78" y="4.253" fill="none" stroke="#696969" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="34.441" height="19.327"/>
+	
+		<line fill="none" stroke="#11324D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="34.523" y1="26.831" x2="34.523" y2="33.266"/>
+	
+		<line fill="none" stroke="#11324D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="27.478" y1="26.831" x2="27.478" y2="33.266"/>
+	
+		<line fill="none" stroke="#11324D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="22.198" y1="33.266" x2="39.803" y2="33.266"/>
+	<path fill="#FFFFFF" d="M26.795,11.264c0,1.974-1.6,3.575-3.575,3.575c-1.974,0-3.574-1.601-3.574-3.575
+		c0-1.974,1.6-3.575,3.574-3.575C25.195,7.689,26.795,9.29,26.795,11.264"/>
+	
+		<circle fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="23.22" cy="11.264" r="3.575"/>
+	<path fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M37.465,11.617
+		c-1.052-0.863-1.915,0.317-1.915,0.317c-3.168,4.688-11.083,4.145-11.083,4.145l-0.185-0.015c-0.396-0.076-0.611-0.087-1.062-0.087
+		c-4.199,0-7.602,3.403-7.602,7.602h13.715c0-0.331-0.057-0.95-0.057-0.95s-0.299-3.202,0.615-4.361
+		c2.474-0.308,5.758-1.242,7.574-3.929C37.465,14.339,38.72,12.647,37.465,11.617z"/>
+	
+		<line fill="none" stroke="#BA351E" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="37.465" y1="11.617" x2="44.23" y2="7.689"/>
+</g>
+</svg>
diff --git a/assets/images/DL-technology.svg b/assets/images/DL-technology.svg
new file mode 100644
index 0000000..59f2ea5
--- /dev/null
+++ b/assets/images/DL-technology.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="62px" height="62px" viewBox="0 0 62 62" enable-background="new 0 0 62 62" xml:space="preserve">
+<g>
+	
+		<path fill="none" stroke="#BA351E" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M44.458,11.629c0.001-0.038,0.011-0.072,0.011-0.11c0-4.663-3.78-8.443-8.444-8.443c-4.663,0-8.443,3.781-8.443,8.443
+		c0,0.109,0.027,0.21,0.032,0.317c-0.655-0.327-1.383-0.528-2.165-0.528c-2.694,0-4.878,2.183-4.878,4.878
+		c0,0.18,0.007,0.519-0.069,0.489c-0.309-0.122-1.165-0.489-1.733-0.489c-1.699,0-3.076,1.376-3.076,3.076
+		c0,1.699,1.377,3.076,3.076,3.076h24.599c2.987,0,5.41-2.422,5.41-5.41C48.778,14.314,46.923,12.134,44.458,11.629z"/>
+	
+		<line fill="none" stroke="#BA351E" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="32.235" y1="22.338" x2="32.235" y2="37.069"/>
+	
+		<path fill="none" stroke="#BA351E" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M26.597,22.338v7.201c0,1.317-1.068,2.386-2.386,2.386H10.125c-1.317,0-2.385,1.068-2.385,2.385v7.442"/>
+	
+		<path fill="none" stroke="#BA351E" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M37.802,22.338v7.201c0,1.317,1.068,2.386,2.386,2.386h14.086c1.317,0,2.385,1.068,2.385,2.385v9.061"/>
+	
+		<path fill="none" stroke="#11324D" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M44.368,54.565H20.103c-0.949,0-1.718-0.769-1.718-1.718V38.788c0-0.949,0.769-1.718,1.718-1.718h24.265
+		c0.949,0,1.718,0.77,1.718,1.718v14.059C46.086,53.796,45.317,54.565,44.368,54.565z"/>
+	
+		<rect x="20.572" y="39.272" fill="none" stroke="#696969" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="23.327" height="13.091"/>
+	
+		<line fill="none" stroke="#11324D" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="34.621" y1="54.565" x2="34.621" y2="58.924"/>
+	
+		<line fill="none" stroke="#11324D" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="29.849" y1="54.565" x2="29.849" y2="58.924"/>
+	
+		<line fill="none" stroke="#11324D" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.273" y1="58.924" x2="38.197" y2="58.924"/>
+	
+		<line fill="none" stroke="#696969" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="52.319" y1="45.406" x2="61" y2="45.406"/>
+	
+		<line fill="none" stroke="#696969" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="52.319" y1="56.195" x2="61" y2="56.195"/>
+	
+		<path fill="none" stroke="#11324D" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M60.141,58.924h-6.962c-0.474,0-0.859-0.385-0.859-0.859V44.23c0-0.474,0.385-0.859,0.859-0.859h6.962
+		c0.474,0,0.859,0.385,0.859,0.859v13.834C61,58.539,60.615,58.924,60.141,58.924z"/>
+	
+		<path fill="none" stroke="#11324D" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M13.62,58.924H1.859C1.385,58.924,1,58.539,1,58.065V42.612c0-0.474,0.385-0.859,0.859-0.859H13.62
+		c0.474,0,0.859,0.385,0.859,0.859v15.453C14.479,58.539,14.094,58.924,13.62,58.924z"/>
+	
+		<rect x="2.642" y="43.371" fill="none" stroke="#696969" stroke-width="0.8592" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="10.195" height="12.989"/>
+</g>
+</svg>
diff --git a/assets/images/arrow-right.svg b/assets/images/arrow-right.svg
new file mode 100644
index 0000000..37d307b
--- /dev/null
+++ b/assets/images/arrow-right.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<path d="M11,4l-0.883,0.883l3.492,3.492H2v1.25h11.608l-3.492,3.492L11,14l5-5L11,4z"/>
+</svg>
diff --git a/assets/images/minus-01.svg b/assets/images/minus-01.svg
new file mode 100644
index 0000000..a0639ca
--- /dev/null
+++ b/assets/images/minus-01.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill="none" d="M0,0h24v24H0V0z"/>
+<path fill="#C4351E" d="M7,11v2h10v-2H7z M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20
+	c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z"/>
+</svg>
diff --git a/assets/images/plus-01.svg b/assets/images/plus-01.svg
new file mode 100644
index 0000000..d80a766
--- /dev/null
+++ b/assets/images/plus-01.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill="none" d="M0,0h24v24H0V0z"/>
+<path fill="#C4351E" d="M13,7h-2v4H7v2h4v4h2v-4h4v-2h-4V7z M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z
+	 M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z"/>
+</svg>
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..535411f
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,64 @@
+$(document).ready(function(){
+    // Configuration object to avoid repeating settings
+    const slickOptions = {
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true
+    };
+
+    /* Initialize Content Slider */
+    $('.content-slider').slick({
+        ...slickOptions,
+        dots: true,
+        asNavFor: '.image-slider'
+    });
+
+    /* Initialize Image Slider */
+    $('.image-slider').slick({
+        ...slickOptions,
+        asNavFor: '.content-slider'
+    });
+
+    /* Sync Left Tabs with Slick Slide Shifts */
+    $('.tab-item').click(function(){
+        const slideIndex = $(this).data('slide');
+        $('.content-slider').slick('slickGoTo', parseInt(slideIndex));
+    });
+
+    /* Active Tab Class Management on Slide Change */
+    $('.content-slider').on('afterChange', function(event, slick, currentSlide){
+        $('.tab-item').removeClass('active');
+        $('.tab-item').extra = $(`.tab-item[data-slide="${currentSlide}"]`).addClass('active');
+    });
+
+    /* Mobile Accordion Execution Logic */
+    $('.mobile-tab').click(function(){
+        const $this = $(this);
+        const parent = $this.closest('.mobile-card');
+        const contentPanel = parent.find('.mobile-content');
+        
+        // Target specific icons
+        const currentIconContainer = $this.find('.mobile-icon');
+        const plusIcon = currentIconContainer.data('plus-src');
+        const minusIcon = currentIconContainer.data('minus-src');
+
+        // If clicked item is already open, close it
+        if (contentPanel.is(':visible')) {
+            contentPanel.slideUp();
+            currentIconContainer.find('img').attr('src', plusIcon);
+            return;
+        }
+
+        // Close all other open cards completely and reset their icon graphics to a plus sign
+        $('.mobile-content').slideUp();
+        $('.mobile-icon').each(function() {
+            const $iconBox = $(this);
+            $iconBox.find('img').attr('src', $iconBox.data('plus-src'));
+        });
+
+        // Open current targeted slide smoothly and switch icon to a minus sign
+        contentPanel.slideDown();
+        currentIconContainer.find('img').attr('src', minusIcon);
+    });
+});
\ No newline at end of file
diff --git a/database/database.sql b/database/database.sql
new file mode 100644
index 0000000..84a3a1b
--- /dev/null
+++ b/database/database.sql
@@ -0,0 +1,23 @@
+CREATE TABLE slides (
+
+    id INT AUTO_INCREMENT PRIMARY KEY,
+
+    tab_title VARCHAR(255) NOT NULL,
+
+    tag_line VARCHAR(255) NOT NULL,
+
+    slide_title VARCHAR(255) NOT NULL,
+
+    description TEXT NOT NULL,
+
+    button_text VARCHAR(100) NOT NULL,
+
+    button_link VARCHAR(255) NOT NULL,
+
+    image VARCHAR(255) NOT NULL,
+
+    display_order INT DEFAULT 0,
+
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+
+);
\ No newline at end of file
diff --git a/public/.htaccess b/public/.htaccess
new file mode 100644
index 0000000..cd8bc6f
--- /dev/null
+++ b/public/.htaccess
@@ -0,0 +1,10 @@
+RewriteEngine On
+
+# Force remove trailing slash
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^(.+)/$ /$1 [R=301,L]
+
+# Route /admin → /admin/
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^admin$ admin/index.php [L]
\ No newline at end of file
diff --git a/public/admin/create.php b/public/admin/create.php
new file mode 100644
index 0000000..62f3928
--- /dev/null
+++ b/public/admin/create.php
@@ -0,0 +1,159 @@
+<?php
+
+require_once '../../app/config/config.php';
+require_once '../../app/config/Database.php';
+require_once '../../app/controllers/SlideController.php';
+
+$database = new Database();
+$db = $database->connect();
+
+$controller = new SlideController($db);
+
+$message = "";
+
+/* =========================
+   FORM SUBMIT LOGIC
+========================= */
+if (isset($_POST['submit'])) {
+
+    $errors = [];
+    $imageName = "";
+
+    // 1. DATA SANITIZATION & EMPTY FIELDS VALIDATION
+    $tab_title     = trim($_POST['tab_title'] ?? '');
+    $tag_line      = trim($_POST['tag_line'] ?? '');
+    $slide_title   = trim($_POST['slide_title'] ?? '');
+    $description   = trim($_POST['description'] ?? '');
+    $button_text   = trim($_POST['button_text'] ?? '');
+    $button_link   = trim($_POST['button_link'] ?? '');
+    $display_order = trim($_POST['display_order'] ?? 0);
+
+    if (empty($tab_title))   { $errors[] = "Tab Title is required."; }
+    if (empty($tag_line))    { $errors[] = "Tag Line is required."; }
+    if (empty($slide_title)) { $errors[] = "Slide Title is required."; }
+
+    // 2. SECURE IMAGE UPLOAD VALIDATION
+    if (!empty($_FILES['image']['name'])) {
+        
+        // Check for internal upload errors
+        if ($_FILES['image']['error'] !== UPLOAD_ERR_OK) {
+            $errors[] = "An error occurred during the image upload.";
+        } else {
+            // Validate file type (MIME Type) to ensure it's an image
+            $fileTmpPath = $_FILES['image']['tmp_name'];
+            $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/svg+xml'];
+            
+            // Using finfo to check actual file content instead of just the extension
+            $finfo = new finfo(FILEINFO_MIME_TYPE);
+            $mimeType = $finfo->file($fileTmpPath);
+
+            if (!in_array($mimeType, $allowedMimeTypes)) {
+                $errors[] = "Invalid file format. Only JPG, PNG, and SVG formats are permitted.";
+            }
+
+            // Validate file size (optional, e.g., max 3MB)
+            $maxFileSize = 3 * 1024 * 1024; // 3 Megabytes
+            if ($_FILES['image']['size'] > $maxFileSize) {
+                $errors[] = "The uploaded image exceeds the maximum permitted size of 3MB.";
+            }
+        }
+
+        // If no file errors occurred, generate a sanitized filename and prepare upload path
+        if (empty($errors)) {
+            // Clean up original file name to avoid path traversal vulnerabilities
+            $cleanOriginalName = preg_replace("/[^a-zA-Z0-9\._-]/", "", $_FILES['image']['name']);
+            $imageName = time() . '_' . $cleanOriginalName;
+            $targetPath = UPLOAD_PATH . $imageName;
+        }
+    } else {
+        $errors[] = "Please upload a slide image asset.";
+    }
+
+    // 3. EXECUTION OR ERROR HANDLING
+    if (empty($errors)) {
+        
+        $data = [
+            'tab_title'     => $tab_title,
+            'tag_line'      => $tag_line,
+            'slide_title'   => $slide_title,
+            'description'   => $description,
+            'button_text'   => $button_text,
+            'button_link'   => $button_link,
+            'image'         => $imageName,
+            'display_order' => intval($display_order) // Force integer data type
+        ];
+
+        // Perform final file relocation safely right before database insert
+        if (move_uploaded_file($_FILES['image']['tmp_name'], $targetPath)) {
+            $result = $controller->store($data);
+
+            if ($result) {
+                header("Location: index.php");
+                exit;
+            } else {
+                // If DB storage fails, clean up the newly uploaded file to avoid dangling assets
+                if (file_exists($targetPath)) {
+                    unlink($targetPath);
+                }
+                $message = "Failed to write slide entry into the database.";
+            }
+        } else {
+            $message = "File system restriction: Could not transfer uploaded image to the storage directory.";
+        }
+    } else {
+        // Flatten array arrays to build a visual notification block for the dashboard view
+        $message = implode("<br>", $errors);
+    }
+}
+
+?>
+
+<!-- HTML STARTS HERE -->
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Add Slide</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+
+<div class="container mt-5">
+
+    <h2>Add New Slide</h2>
+
+    <?php if (!empty($message)): ?>
+        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+            <strong>Validation Error:</strong><br>
+            <?= $message; ?>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    <?php endif; ?>
+
+    <form method="POST" enctype="multipart/form-data">
+
+        <input type="text" name="tab_title" class="form-control mb-2" placeholder="Tab Title" required>
+
+        <input type="text" name="tag_line" class="form-control mb-2" placeholder="Tag Line" required>
+
+        <input type="text" name="slide_title" class="form-control mb-2" placeholder="Slide Title" required>
+
+        <textarea name="description" class="form-control mb-2"></textarea>
+
+        <input type="text" name="button_text" class="form-control mb-2">
+
+        <input type="text" name="button_link" class="form-control mb-2">
+
+        <input type="number" name="display_order" class="form-control mb-2" value="0">
+
+        <input type="file" name="image" class="form-control mb-3" accept="image/png, image/jpeg, image/jpg, image/svg+xml" required>
+
+        <button type="submit" name="submit" class="btn btn-success">Save</button>
+
+        <a href="index.php" class="btn btn-secondary">Back</a>
+
+    </form>
+
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/admin/delete.php b/public/admin/delete.php
new file mode 100644
index 0000000..7dfc4c4
--- /dev/null
+++ b/public/admin/delete.php
@@ -0,0 +1,63 @@
+<?php
+
+require_once '../../app/config/config.php';
+require_once '../../app/config/Database.php';
+require_once '../../app/controllers/SlideController.php';
+
+$database = new Database();
+$db = $database->connect();
+
+$controller = new SlideController($db);
+
+/*
+|--------------------------------------------------------------------------
+| GET ID
+|--------------------------------------------------------------------------
+*/
+
+$id = $_GET['id'] ?? null;
+
+if (!$id) {
+    header("Location: index.php");
+    exit;
+}
+
+/*
+|--------------------------------------------------------------------------
+| GET SINGLE RECORD
+|--------------------------------------------------------------------------
+*/
+
+$slide = $controller->getById($id);
+
+if (!$slide) {
+    header("Location: index.php");
+    exit;
+}
+
+/*
+|--------------------------------------------------------------------------
+| DELETE IMAGE FROM FOLDER
+|--------------------------------------------------------------------------
+*/
+
+$imagePath = "../../uploads/" . $slide['image'];
+
+if (!empty($slide['image']) && file_exists($imagePath)) {
+    unlink($imagePath);
+}
+
+/*
+|--------------------------------------------------------------------------
+| DELETE FROM DATABASE
+|--------------------------------------------------------------------------
+*/
+
+$result = $controller->delete($id);
+
+if ($result) {
+    header("Location: index.php");
+    exit;
+} else {
+    echo "Failed to delete record";
+}
\ No newline at end of file
diff --git a/public/admin/edit.php b/public/admin/edit.php
new file mode 100644
index 0000000..0813c8b
--- /dev/null
+++ b/public/admin/edit.php
@@ -0,0 +1,292 @@
+<?php
+
+require_once '../../app/config/config.php';
+require_once '../../app/config/Database.php';
+require_once '../../app/controllers/SlideController.php';
+
+$database = new Database();
+$db = $database->connect();
+
+$controller = new SlideController($db);
+
+/*
+|--------------------------------------------------------------------------
+| GET ID FROM URL
+|--------------------------------------------------------------------------
+*/
+
+$id = $_GET['id'] ?? null;
+
+if (!$id) {
+
+    header("Location: index.php");
+    exit;
+}
+
+/*
+|--------------------------------------------------------------------------
+| FETCH EXISTING SLIDE DATA
+|--------------------------------------------------------------------------
+*/
+
+$slide = $controller->getById($id);
+
+/*
+|--------------------------------------------------------------------------
+| UPDATE FORM SUBMIT
+|--------------------------------------------------------------------------
+*/
+
+if (isset($_POST['update'])) {
+
+    $errors = [];
+    $imageName = $slide['image']; // Default to keeping the old image name
+
+    // 1. DATA SANITIZATION & EMPTY REQUIRED FIELDS VALIDATION
+    $tab_title     = trim($_POST['tab_title'] ?? '');
+    $tag_line      = trim($_POST['tag_line'] ?? '');
+    $slide_title   = trim($_POST['slide_title'] ?? '');
+    $description   = trim($_POST['description'] ?? '');
+    $button_text   = trim($_POST['button_text'] ?? '');
+    $button_link   = trim($_POST['button_link'] ?? '');
+    $display_order = trim($_POST['display_order'] ?? 0);
+
+    if (empty($tab_title))   { $errors[] = "Tab Title cannot be left empty."; }
+    if (empty($tag_line))    { $errors[] = "Tag Line cannot be left empty."; }
+    if (empty($slide_title)) { $errors[] = "Slide Title cannot be left empty."; }
+
+    // 2. OPTIONAL NEW IMAGE UPLOAD SECURITY CHECK
+    $newImageUploaded = false;
+    if (!empty($_FILES['image']['name'])) {
+        
+        // Validate internal upload parameters
+        if ($_FILES['image']['error'] !== UPLOAD_ERR_OK) {
+            $errors[] = "An error occurred during the new image upload loop.";
+        } else {
+            // Confirm the underlying binary structure is a safe graphic format
+            $fileTmpPath = $_FILES['image']['tmp_name'];
+            $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/svg+xml'];
+            
+            $finfo = new finfo(FILEINFO_MIME_TYPE);
+            $mimeType = $finfo->file($fileTmpPath);
+
+            if (!in_array($mimeType, $allowedMimeTypes)) {
+                $errors[] = "Invalid file format. Only JPG, PNG, and SVG elements are permitted.";
+            }
+
+            // Size Constraint Enforcement (Max 3MB)
+            $maxFileSize = 3 * 1024 * 1024;
+            if ($_FILES['image']['size'] > $maxFileSize) {
+                $errors[] = "The uploaded file exceeds the 3MB storage configuration limit.";
+            }
+        }
+
+        // Prepare file details if no errors occurred
+        if (empty($errors)) {
+            $cleanOriginalName = preg_replace("/[^a-zA-Z0-9\._-]/", "", $_FILES['image']['name']);
+            $imageName = time() . '_' . $cleanOriginalName;
+            $targetPath = UPLOAD_PATH . $imageName;
+            $newImageUploaded = true;
+        }
+    }
+
+    // 3. DATABASE TRANSACTION & ATOMIC FILE SWAPPING
+    if (empty($errors)) {
+        
+        $data = [
+            'id'            => $id,
+            'tab_title'     => $tab_title,
+            'tag_line'      => $tag_line,
+            'slide_title'   => $slide_title,
+            'description'   => $description,
+            'button_text'   => $button_text,
+            'button_link'   => $button_link,
+            'image'         => $imageName,
+            'display_order' => intval($display_order) // Hard-cast to dynamic integer properties
+        ];
+
+        // Process file move if a brand new file payload was delivered
+        if ($newImageUploaded) {
+            if (move_uploaded_file($_FILES['image']['tmp_name'], $targetPath)) {
+                
+                // Execute database update layer via Controller
+                $result = $controller->update($data);
+
+                if ($result) {
+                    // CRUCIAL: Only delete the older asset if the new file is saved and DB transaction succeeds
+                    $oldImagePath = UPLOAD_PATH . $slide['image'];
+                    if (!empty($slide['image']) && file_exists($oldImagePath)) {
+                        unlink($oldImagePath);
+                    }
+                    
+                    header("Location: index.php");
+                    exit;
+                } else {
+                    // Fallback cleanup if query fails: remove dangling upload to save server space
+                    if (file_exists($targetPath)) {
+                        unlink($targetPath);
+                    }
+                    $message = "Database Error: Could not overwrite slide properties record.";
+                }
+            } else {
+                $message = "File system restriction: Write access denied on uploads directory destination.";
+            }
+        } else {
+            // Simple plain update routine execution when retaining original graphic structures
+            $result = $controller->update($data);
+            if ($result) {
+                header("Location: index.php");
+                exit;
+            } else {
+                $message = "Database Error: Slide record values could not be transformed.";
+            }
+        }
+    } else {
+        // Flatten array parameters out to pass to your Bootstrap alerting block placeholder
+        $message = implode("<br>", $errors);
+    }
+}
+?>
+
+
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <title>Edit Slide</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+<div class="container mt-5">
+
+    <h2>Edit Slide</h2>
+   <?php if (!empty($message)): ?>
+    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+        <strong>Update Rejected:</strong><br>
+        <?= $message; ?>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+<?php endif; ?>
+
+<form method="POST" enctype="multipart/form-data">
+
+    <div class="mb-3">
+        <label class="form-label fw-bold">Tab Title</label>
+        <input
+            type="text"
+            name="tab_title"
+            class="form-control"
+            value="<?= $slide['tab_title']; ?>"
+            required
+        >
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label fw-bold">Tag Line</label>
+        <input
+            type="text"
+            name="tag_line"
+            class="form-control"
+            value="<?= $slide['tag_line']; ?>"
+            required
+        >
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label fw-bold">Slide Title</label>
+        <input
+            type="text"
+            name="slide_title"
+            class="form-control"
+            value="<?= $slide['slide_title']; ?>"
+            required
+        >
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label">Description</label>
+        <textarea
+            name="description"
+            class="form-control"
+            rows="3"
+        ><?= $slide['description']; ?></textarea>
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label">Button Text</label>
+        <input
+            type="text"
+            name="button_text"
+            class="form-control"
+            value="<?= $slide['button_text']; ?>"
+        >
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label">Button Link</label>
+        <input
+            type="text"
+            name="button_link"
+            class="form-control"
+            value="<?= $slide['button_link']; ?>"
+        >
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label">Display Order</label>
+        <input
+            type="number"
+            name="display_order"
+            class="form-control"
+            value="<?= $slide['display_order']; ?>"
+        >
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label d-block">Current Image</label>
+        <img
+            src="<?= UPLOAD_URL . $slide['image']; ?>"
+            class="img-thumbnail"
+            width="120"
+            alt="Current Slide Graphic"
+        >
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label fw-bold">Upload New Image (Optional)</label>
+        <input
+            type="file"
+            name="image"
+            class="form-control"
+            accept="image/png, image/jpeg, image/jpg, image/svg+xml"
+        >
+        <div class="form-text text-muted">Leave empty to retain the current image. Only JPG, PNG, and SVG are supported.</div>
+    </div>
+
+    <div class="mt-4">
+        <button
+            type="submit"
+            name="update"
+            class="btn btn-primary px-4"
+        >
+            Update Slide
+        </button>
+
+        <a
+            href="index.php"
+            class="btn btn-secondary px-4"
+        >
+            Back
+        </a>
+    </div>
+
+</form>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/admin/index.php b/public/admin/index.php
new file mode 100644
index 0000000..e463d6a
--- /dev/null
+++ b/public/admin/index.php
@@ -0,0 +1,67 @@
+<?php
+require_once '../../app/config/config.php';
+require_once '../../app/config/Database.php';
+require_once '../../app/controllers/SlideController.php';
+
+$database = new Database();
+$db = $database->connect();
+
+$controller = new SlideController($db);
+$slides = $controller->index();
+
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Admin - Slides</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+
+<body>
+
+<div class="container mt-5">
+
+    <div class="d-flex justify-content-between mb-3">
+        <h2>Slides</h2>
+        <a href="create.php" class="btn btn-primary">+ Add Slide</a>
+    </div>
+
+    <table class="table table-bordered table-striped">
+
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Tab Title</th>
+                <th>Slide Title</th>
+                <th>Image</th>
+                <th>Action</th>
+            </tr>
+        </thead>
+
+        <tbody>
+
+        <?php foreach ($slides as $slide): ?>
+
+            <tr>
+                <td><?= $slide['id']; ?></td>
+                <td><?= $slide['tab_title']; ?></td>
+                <td><?= $slide['slide_title']; ?></td>
+                <td>
+                    <img src="<?= UPLOAD_URL . $slide['image']; ?>" width="80">
+                </td>
+                <td>
+                    <a href="edit.php?id=<?= $slide['id']; ?>" class="btn btn-warning btn-sm">Edit</a>
+                    <a href="delete.php?id=<?= $slide['id']; ?>" class="btn btn-danger btn-sm"
+                    onclick="return confirm('Are you sure you want to delete this slide? This action cannot be undone.')">
+                        Delete
+                    </a>
+                </td>
+            </tr>
+        <?php endforeach; ?>
+        </tbody>
+    </table>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..a89086a
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,144 @@
+<?php
+
+require_once '../app/config/config.php';
+require_once '../app/config/Database.php';
+require_once '../app/controllers/SlideController.php';
+
+$database = new Database();
+$db = $database->connect();
+
+$controller = new SlideController($db);
+
+$slides = $controller->index();
+
+/*
+GROUP TABS
+*/
+$tabs = [];
+foreach ($slides as $index => $slide) {
+    if (!isset($tabs[$slide['tab_title']])) {
+        $tabs[$slide['tab_title']] = $index;
+    }
+}
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WPoets Frontend</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
+    <link rel="stylesheet" href="<?=SITE_URL?>assets/css/style.css">
+</head>
+<body>
+
+<section class="main-section">
+    <div class="custom-container">
+
+        <div class="main-heading">
+            <h1>DelphianLogic in Action</h1>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</p>
+        </div>
+
+        <div class="desktop-view">
+            <div class="main-wrapper">
+
+                <div class="tab-wrapper">
+                    <?php
+                    $count = 0;
+                    foreach($tabs as $tab => $index):
+                        $icon_filename = 'DL-learning.svg';
+                        if (strpos(strtolower($tab), 'tech') !== false) {
+                            $icon_filename = 'DL-technology.svg';
+                        } elseif (strpos(strtolower($tab), 'comm') !== false) {
+                            $icon_filename = 'DL-communication.svg';
+                        }
+                    ?>
+                        <div class="tab-item <?= $count == 0 ? 'active' : '' ?>" data-slide="<?= $index ?>">
+                            <img src="<?=SITE_URL?>assets/images/<?= $icon_filename ?>" class="tab-icon" alt="Tab Icon">
+                            <span class="tab-text"><?= $tab ?></span>
+                        </div>
+                    <?php
+                    $count++;
+                    endforeach;
+                    ?>
+                </div>
+
+                <div class="content-wrapper">
+                    <div class="content-slider">
+                        <?php foreach($slides as $slide): ?>
+                            <div>
+                                <div class="slide-box">
+                                    <h5><?= $slide['tag_line'] ?></h5>
+                                    <h2><?= $slide['slide_title'] ?></h2>
+                                    <a href="<?= $slide['button_link'] ?>" class="learn-more-link">
+                                        <?= $slide['button_text'] ?> &rarr;
+                                    </a>
+                                </div>
+                            </div>
+                        <?php endforeach; ?>
+                    </div>
+                </div>
+
+                <div class="image-wrapper">
+                    <div class="image-slider">
+                        <?php foreach($slides as $slide): ?>
+                            <div>
+                                <img src="<?= UPLOAD_URL . $slide['image'] ?>" alt="Slide Production Showcase">
+                            </div>
+                        <?php endforeach; ?>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <div class="mobile-view">
+            <?php foreach($slides as $index => $slide): 
+                $mobile_icon_filename = 'DL-learning.svg';
+                if (strpos(strtolower($slide['tab_title']), 'tech') !== false) {
+                    $mobile_icon_filename = 'DL-technology.svg';
+                } elseif (strpos(strtolower($slide['tab_title']), 'comm') !== false) {
+                    $mobile_icon_filename = 'DL-communication.svg';
+                }
+            ?>
+                <div class="mobile-card">
+                    <div class="mobile-tab" data-slide="<?= $index ?>">
+                        <div class="mobile-tab-left">
+                            <img src="<?=SITE_URL?>assets/images/<?= $mobile_icon_filename ?>" alt="Category Icon">
+                            <h3 class="mobile-title"><?= $slide['tab_title'] ?></h3>
+                        </div>
+                        
+                        <div class="mobile-icon" data-minus-src="<?=SITE_URL?>assets/images/minus-01.svg" data-plus-src="<?=SITE_URL?>assets/images/plus-01.svg">
+                            <img src="<?=SITE_URL?>assets/images/<?= $index == 0 ? 'minus-01.svg' : 'plus-01.svg' ?>" alt="Toggle State Indicator">
+                        </div>
+                    </div>
+
+                    <div class="mobile-content" <?= $index != 0 ? 'style="display:none"' : '' ?>>
+                        <div class="mobile-slide" style="background-image: url('<?= UPLOAD_URL . $slide['image'] ?>');">
+                            <h5><?= $slide['tag_line'] ?></h5>
+                            <h2><?= $slide['slide_title'] ?></h2>
+                            <a href="<?= $slide['button_link'] ?>" class="learn-more-link">
+                                <?= $slide['button_text'] ?> &rarr;
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            <?php endforeach; ?>
+        </div>
+
+    </div>
+</section>
+
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+
+<script src="<?=SITE_URL?>assets/js/main.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/test.php b/public/test.php
new file mode 100644
index 0000000..7f82637
--- /dev/null
+++ b/public/test.php
@@ -0,0 +1,11 @@
+<?php
+require_once '../app/config/config.php';
+require_once '../app/config/Database.php';
+
+$database = new Database();
+
+$connection = $database->connect();
+
+if ($connection) {
+    echo "Database connected successfully";
+}
\ No newline at end of file
diff --git a/uploads/1780142052_DL-Learning-1.jpg b/uploads/1780142052_DL-Learning-1.jpg
new file mode 100644
index 0000000..755171f
Binary files /dev/null and b/uploads/1780142052_DL-Learning-1.jpg differ
diff --git a/uploads/1780142066_DL-Technology.jpg b/uploads/1780142066_DL-Technology.jpg
new file mode 100644
index 0000000..a8d4354
Binary files /dev/null and b/uploads/1780142066_DL-Technology.jpg differ
diff --git a/uploads/1780143115_DL-Communication.jpg b/uploads/1780143115_DL-Communication.jpg
new file mode 100644
index 0000000..51b3b5b
Binary files /dev/null and b/uploads/1780143115_DL-Communication.jpg differ