diff --git a/assets/DOPFoundationLogo.png b/assets/DOPFoundationLogo.png
new file mode 100644
index 0000000..e44e3e7
Binary files /dev/null and b/assets/DOPFoundationLogo.png differ
diff --git a/assets/DPSoftware2.png b/assets/DPSoftware2.png
new file mode 100644
index 0000000..fb808f9
Binary files /dev/null and b/assets/DPSoftware2.png differ
diff --git a/blocks/Advanced_Peripherals/block_design.json b/blocks/Advanced_Peripherals/block_design.json
index 476aa3e..4d6de07 100644
--- a/blocks/Advanced_Peripherals/block_design.json
+++ b/blocks/Advanced_Peripherals/block_design.json
@@ -218,7 +218,7 @@
         "tooltip": "Send message formatted to player chat"
     },
     "advanced_peripherals_chatbox_send_toast_formatted_to_player": {
-        "message0": "Chatbox %1 toast send %2 and title %3 to player %4\nPrefix %5 Brackets %6 Bracket color %7 Range %8",
+        "message0": "Chatbox %1 toast send formatted json %2 and title %3 to player %4\nPrefix %5 Brackets %6 Bracket color %7 Range %8",
         "args0": [
             {
                 "type": "input_value",
@@ -227,7 +227,7 @@
             },
             {
                 "type": "input_value",
-                "name": "TEXT",
+                "name": "JSON",
                 "check": "String"
             },
             {
@@ -1508,5 +1508,301 @@
         "nextStatement": null,
         "colour": 200,
         "tooltip": "Sets the redstone level output on the given side to the given power level. (0-15)"    
+    },
+
+    "advanced_peripherals_mc_beacon_get_level": {
+        "message0": "Get level from beacon %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "BEACON",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Number",
+        "colour": 200,
+        "tooltip": "Returns the level of the Beacon."    
+    },
+    "advanced_peripherals_mc_beacon_get_primary_effect": {
+        "message0": "Get primary effect from beacon %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "BEACON",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "String",
+        "colour": 200,
+        "tooltip": "Returns the registry name of the beacon's primary effect."    
+    },
+    "advanced_peripherals_mc_beacon_get_secondary_effect": {
+        "message0": "Get secondary secondary effect from beacon %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "BEACON",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "String",
+        "colour": 200,
+        "tooltip": "Returns the registry name of the beacon's secondary effect."    
+    },
+
+    "advanced_peripherals_mc_note_block_play_note": {
+        "message0": "Play current note sound at note block %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "NOTEBLOCK",
+                "check": "Peripheral"
+            }
+        ],
+        "previousStatement": null,
+        "nextStatement": null,
+        "colour": 200,
+        "tooltip": "Plays the Note Block's current note sound."    
+    },
+    "advanced_peripherals_mc_note_block_get_note": {
+        "message0": "Get current note from note block %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "NOTEBLOCK",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Number",
+        "colour": 200,
+        "tooltip": "Returns the index for the Note Block's current note. A number from 0 to 24."    
+    },
+    "advanced_peripherals_mc_note_block_change_note_by": {
+        "message0": "Change note to %1 at note block %2",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "TO",
+                "check": "Number"
+            },
+            {
+                "type": "input_value",
+                "name": "NOTEBLOCK",
+                "check": "Peripheral"
+            }
+        ],
+        "previousStatement": null,
+        "nextStatement": null,
+        "colour": 200,
+        "tooltip": "Changes the Note Block's note to the given note. note must be a number from 0 to 24."    
+    },
+    "advanced_peripherals_mc_note_block_change_note": {
+        "message0": "Change note by 1 at note block %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "NOTEBLOCK",
+                "check": "Peripheral"
+            }
+        ],
+        "previousStatement": null,
+        "nextStatement": null,
+        "colour": 200,
+        "tooltip": "Increments the Note Block's note to the next available note."    
+    },
+
+    "advanced_peripherals_botania_flowers_get_mana": {
+        "message0": "Get mana from flower %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "FLOWER",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Number",
+        "colour": 200,
+        "tooltip": "Returns the amount of mana stored in the flower."    
+    },
+    "advanced_peripherals_botania_flowers_get_max_mana": {
+        "message0": "Get max mana from flower %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "FLOWER",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Number",
+        "colour": 200,
+        "tooltip": "Returns the maximum amount of mana that the flower can hold."    
+    },
+    "advanced_peripherals_botania_flowers_is_floating": {
+        "message0": "Is flower %1 floating",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "FLOWER",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Boolean",
+        "colour": 200,
+        "tooltip": "Returns true if the flower is a floating flower.",   
+        "inputsInline": true
+    },
+    "advanced_peripherals_botania_flowers_is_on_enchanted_soil": {
+        "message0": "Is flower %1 on enchanted soil",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "FLOWER",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Boolean",
+        "colour": 200,
+        "tooltip": "Returns true if the flower is placed on enchanted soil.",   
+        "inputsInline": true
+    },
+    "advanced_peripherals_botania_flowers_is_empty": {
+        "message0": "Is flower %1 empty",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "FLOWER",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Boolean",
+        "colour": 200,
+        "tooltip": "Returns true if the Flower is empty.",   
+        "inputsInline": true
+    },
+    "advanced_peripherals_botania_flowers_is_full": {
+        "message0": "Is flower %1 full",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "FLOWER",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Boolean",
+        "colour": 200,
+        "tooltip": "Returns true if the Flower is full.",   
+        "inputsInline": true
+    },
+
+    "advanced_peripherals_botania_mana_pool_get_mana": {
+        "message0": "Get mana from pool %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "POOL",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Number",
+        "colour": 200,
+        "tooltip": "Returns the amount of mana stored in the pool."
+    },
+    "advanced_peripherals_botania_mana_pool_get_max_mana": {
+        "message0": "Get max mana from pool %1",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "POOL",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Number",
+        "colour": 200,
+        "tooltip": "Returns the maximum amount of mana that the pool can hold."
+    },
+    "advanced_peripherals_botania_mana_pool_get_mana_needed": {
+        "message0": "Get amount of mana is pool %1 needed to fill full",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "POOL",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Number",
+        "colour": 200,
+        "tooltip": "Returns the amount of mana needed to fill the pool. Equivalent to getMaxMana() - getMana().",
+        "inputsInline": true
+    },
+    "advanced_peripherals_botania_mana_pool_is_empty": {
+        "message0": "Is pool %1 empty",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "POOL",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Boolean",
+        "colour": 200,
+        "tooltip": "Returns true if the Mana Pool is empty.",
+        "inputsInline": true
+    },
+    "advanced_peripherals_botania_mana_pool_is_full": {
+        "message0": "Is pool %1 full",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "POOL",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Boolean",
+        "colour": 200,
+        "tooltip": "Returns true if the Mana Pool is full.",
+        "inputsInline": true
+    },
+    "advanced_peripherals_botania_mana_pool_can_charge_item": {
+        "message0": "Can pool %1 change item",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "POOL",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Boolean",
+        "colour": 200,
+        "tooltip": "Returns true if mode of the Mana Pool is set to charge the items on it.",
+        "inputsInline": true
+    },
+    "advanced_peripherals_botania_mana_pool_has_items": {
+        "message0": "Is pool %1 has item",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "POOL",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Boolean",
+        "colour": 200,
+        "tooltip": "Returns true if the Mana Pool has at least one item on it.",
+        "inputsInline": true
+    },
+    "advanced_peripherals_botania_mana_pool_get_items": {
+        "message0": "get items from pool %1 ",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "POOL",
+                "check": "Peripheral"
+            }
+        ],
+        "output": "Array",
+        "colour": 200,
+        "tooltip": "Returns a table with the items lying on the Mana Pool."
     }
+
+
 }
diff --git a/blocks/Advanced_Peripherals/generator.js b/blocks/Advanced_Peripherals/generator.js
index 275d6f1..f88f56f 100644
--- a/blocks/Advanced_Peripherals/generator.js
+++ b/blocks/Advanced_Peripherals/generator.js
@@ -552,4 +552,139 @@ luaGenerator.forBlock['advanced_peripherals_redstone_integrator_set_analog_outpu
     var integrator = generator.valueToCode(block, 'INTEGRATOR', generator.ORDER_ATOMIC);
 
     return `${integrator}.setOutput("${side}", ${power})\n`;
+};
+
+// Generator for Minecraft: Beacon
+
+luaGenerator.forBlock['advanced_peripherals_mc_beacon_get_level'] = function(block, generator) {
+    var beacon = generator.valueToCode(block, 'BEACON', generator.ORDER_ATOMIC);
+
+    return [`${beacon}.getLevel()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_mc_beacon_get_primary_effect'] = function(block, generator) {
+    var beacon = generator.valueToCode(block, 'BEACON', generator.ORDER_ATOMIC);
+
+    return [`${beacon}.getPrimaryEffect()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_mc_beacon_get_secondary_effect'] = function(block, generator) {
+    var beacon = generator.valueToCode(block, 'BEACON', generator.ORDER_ATOMIC);
+
+    return [`${beacon}.getSecondaryEffect()`, luaGenerator.ORDER_NONE];
+};
+
+// Generator for Minecraft: Note Block
+
+luaGenerator.forBlock['advanced_peripherals_mc_note_block_play_note'] = function(block, generator) {
+    var noteblock = generator.valueToCode(block, 'NOTEBLOCK', generator.ORDER_ATOMIC);
+
+    return `${noteblock}.playNote()\n`;
+};
+
+luaGenerator.forBlock['advanced_peripherals_mc_note_block_get_note'] = function(block, generator) {
+    var noteblock = generator.valueToCode(block, 'NOTEBLOCK', generator.ORDER_ATOMIC);
+
+    return [`${beacon}.getNote()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_mc_note_block_change_note_by'] = function(block, generator) {
+    var to = generator.valueToCode(block, 'TO', generator.ORDER_ATOMIC); 
+    var noteblock = generator.valueToCode(block, 'NOTEBLOCK', generator.ORDER_ATOMIC);
+
+    return `${noteblock}.changeNoteBy(${to})\n`;
+};
+
+luaGenerator.forBlock['advanced_peripherals_mc_note_block_change_note'] = function(block, generator) {
+    var noteblock = generator.valueToCode(block, 'NOTEBLOCK', generator.ORDER_ATOMIC);
+
+    return `${noteblock}.changeNote()\n`;
+};
+
+// Generator for Botania: Flowers
+
+luaGenerator.forBlock['advanced_peripherals_botania_flowers_get_mana'] = function(block, generator) {
+    var flower = generator.valueToCode(block, 'FLOWER', generator.ORDER_ATOMIC);
+
+    return [`${flower}.getMana()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_flowers_get_max_mana'] = function(block, generator) {
+    var flower = generator.valueToCode(block, 'FLOWER', generator.ORDER_ATOMIC);
+
+    return [`${flower}.getMaxMana()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_flowers_is_floating'] = function(block, generator) {
+    var flower = generator.valueToCode(block, 'FLOWER', generator.ORDER_ATOMIC);
+
+    return [`${flower}.isFloating()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_flowers_is_on_enchanted_soil'] = function(block, generator) {
+    var flower = generator.valueToCode(block, 'FLOWER', generator.ORDER_ATOMIC);
+
+    return [`${flower}.isOnEnchantedSoil()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_flowers_is_empty'] = function(block, generator) {
+    var flower = generator.valueToCode(block, 'FLOWER', generator.ORDER_ATOMIC);
+
+    return [`${flower}.isEmpty()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_flowers_is_full'] = function(block, generator) {
+    var flower = generator.valueToCode(block, 'FLOWER', generator.ORDER_ATOMIC);
+
+    return [`${flower}.isFull()`, luaGenerator.ORDER_NONE];
+};
+
+// Generator for Botania: Mana Pool
+
+luaGenerator.forBlock['advanced_peripherals_botania_mana_pool_get_mana'] = function(block, generator) {
+    var pool = generator.valueToCode(block, 'POOL', generator.ORDER_ATOMIC);
+
+    return [`${pool}.getMana()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_mana_pool_get_max_mana'] = function(block, generator) {
+    var pool = generator.valueToCode(block, 'POOL', generator.ORDER_ATOMIC);
+
+    return [`${pool}.getMaxMana()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_mana_pool_get_mana_needed'] = function(block, generator) {
+    var pool = generator.valueToCode(block, 'POOL', generator.ORDER_ATOMIC);
+
+    return [`${pool}.getManaNeeded()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_mana_pool_is_empty'] = function(block, generator) {
+    var pool = generator.valueToCode(block, 'POOL', generator.ORDER_ATOMIC);
+
+    return [`${pool}.isEmpty()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_mana_pool_is_full'] = function(block, generator) {
+    var pool = generator.valueToCode(block, 'POOL', generator.ORDER_ATOMIC);
+
+    return [`${pool}.isFull()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_mana_pool_can_charge_item'] = function(block, generator) {
+    var pool = generator.valueToCode(block, 'POOL', generator.ORDER_ATOMIC);
+
+    return [`${pool}.canChargeItem()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_mana_pool_has_items'] = function(block, generator) {
+    var pool = generator.valueToCode(block, 'POOL', generator.ORDER_ATOMIC);
+
+    return [`${pool}.hasItems()`, luaGenerator.ORDER_NONE];
+};
+
+luaGenerator.forBlock['advanced_peripherals_botania_mana_pool_get_items'] = function(block, generator) {
+    var pool = generator.valueToCode(block, 'POOL', generator.ORDER_ATOMIC);
+
+    return [`${pool}.getItems()`, luaGenerator.ORDER_NONE];
 };
\ No newline at end of file
diff --git a/blocks/Advanced_Peripherals/index.json b/blocks/Advanced_Peripherals/index.json
index b7cc662..23619a0 100644
--- a/blocks/Advanced_Peripherals/index.json
+++ b/blocks/Advanced_Peripherals/index.json
@@ -2,7 +2,7 @@
     "name": "Advanced Peripherals",
     "author": "DPSoftware Foundation",
     "description": "Advanced Peripherals is a mod that adds many useful extensions for CC:Tweaked.",
-    "version": "1.0.0",
+    "version": "1.2",
     "category": "Mod",
     "keyword": "mod",
     "license": "GPL-3.0-or-later",
diff --git a/blocks/Advanced_Peripherals/toolbox.xml b/blocks/Advanced_Peripherals/toolbox.xml
index 44a3587..223abfb 100644
--- a/blocks/Advanced_Peripherals/toolbox.xml
+++ b/blocks/Advanced_Peripherals/toolbox.xml
@@ -45,7 +45,7 @@
                 <shadow type="logic_null"></shadow>
             </value>
         </block>
-        <block type="advanced_peripherals_chatbox_send_message_to_player">
+        <block type="advanced_peripherals_chatbox_send_toast_to_player">
             <value name="TEXT">
                 <shadow type="text">
                     <field name="TEXT">Hello, world!</field>
@@ -107,6 +107,30 @@
                 <shadow type="logic_null"></shadow>
             </value>
         </block>
+		<block type="advanced_peripherals_chatbox_send_toast_formatted_to_player">
+			<value name="TITLE">
+                <shadow type="text">
+                    <field name="TEXT">Hi</field>
+                </shadow>
+            </value>
+            <value name="PLAYER">
+                <shadow type="text">
+                    <field name="TEXT">Player</field>
+                </shadow>
+            </value>
+            <value name="PREFIX">
+                <shadow type="logic_null"></shadow>
+            </value>
+            <value name="BRACKET">
+                <shadow type="logic_null"></shadow>
+            </value>
+            <value name="BRACKETCOLOR">
+                <shadow type="logic_null"></shadow>
+            </value>
+            <value name="RANGE">
+                <shadow type="logic_null"></shadow>
+            </value>
+        </block>
 
         <label text="Energy Detector"></label>
         <block type="advanced_peripherals_energy_detector_get_transfer_rate"></block>
@@ -462,5 +486,41 @@
         <label text="RS Bridge"></label>
 
         <label text="Colony Integrator"></label>
+
+        <label text="Minecraft: Beacon"></label>
+        <block type="advanced_peripherals_mc_beacon_get_level"></block>
+        <block type="advanced_peripherals_mc_beacon_get_primary_effect"></block>
+        <block type="advanced_peripherals_mc_beacon_get_secondary_effect"></block>
+
+        <label text="Minecraft: Note Block"></label>
+        <block type="advanced_peripherals_mc_note_block_play_note"></block>
+        <block type="advanced_peripherals_mc_note_block_get_note"></block>
+        <block type="advanced_peripherals_mc_note_block_change_note_by">
+            <value name="TO">
+                <shadow type="math_number">
+                    <field name="NUM">0</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="advanced_peripherals_mc_note_block_change_note"></block>
+
+        <label text="Botania: Flowers"></label>
+        <block type="advanced_peripherals_botania_flowers_get_mana"></block>
+        <block type="advanced_peripherals_botania_flowers_get_max_mana"></block>
+        <block type="advanced_peripherals_botania_flowers_is_floating"></block>
+        <block type="advanced_peripherals_botania_flowers_is_on_enchanted_soil"></block>
+        <block type="advanced_peripherals_botania_flowers_is_empty"></block>
+        <block type="advanced_peripherals_botania_flowers_is_full"></block>
+
+        <label text="Botania: Mana Pool"></label>
+        <block type="advanced_peripherals_botania_mana_pool_get_mana"></block>
+        <block type="advanced_peripherals_botania_mana_pool_get_max_mana"></block>
+        <block type="advanced_peripherals_botania_mana_pool_get_mana_needed"></block>
+        <block type="advanced_peripherals_botania_mana_pool_is_empty"></block>
+        <block type="advanced_peripherals_botania_mana_pool_is_full"></block>
+        <block type="advanced_peripherals_botania_mana_pool_can_charge_item"></block>
+        <block type="advanced_peripherals_botania_mana_pool_has_items"></block>
+        <block type="advanced_peripherals_botania_mana_pool_get_items"></block>
+
     </category>
 </xml>
diff --git a/index.js b/index.js
index dcbdd75..f2aead9 100644
--- a/index.js
+++ b/index.js
@@ -7,10 +7,11 @@ const pino = require('pino')
 const pretty = require('pino-pretty');
 const https = require('node:https');
 const LocalStorage = require('node-localstorage').LocalStorage
+
 const ipc = ipcMain
 
 const logger = pino(pretty())
-const localStorage = new LocalStorage('.');
+const localStorage = new LocalStorage('./data');
 
 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
 
@@ -111,46 +112,51 @@ app.whenReady().then(async () => {
         logger.error('Error in update check:', error);
     }
 
-    logger.info("Version in github: " + gitver)
     logger.info("Current version: " + version)
+    logger.info("Version in github: " + gitver)
+    
 
     const normalizedAppVersion = normalizeVersion(version);
-    const normalizedReleaseVersion = normalizeVersion(gitver);
 
-    if (normalizedAppVersion >= normalizedReleaseVersion) {
-        logger.info("Software is up-to-date.");
+    if (!gitver) {
+        logger.error("Can't check update")
     } else {
-        logger.info("A new update is available: " + gitver)
-        var is_not_skip_update = localStorage.getItem('skip_update_version') != normalizedAppVersion;
-        var is_ignore = localStorage.getItem('ignore_update');
-        if (is_ignore || is_not_skip_update) {
-            const result = dialog.showMessageBoxSync({
-                type: 'question',
-                buttons: ['Update', 'Ignore', 'Skip'],
-                defaultId: 0,
-                title: 'Update Available',
-                message: `A new version (${gitver}) is available. Do you want to update now?`,
-                detail: 'Click "Update" to go to the release page, "Ignore" to ignore this update, or "Skip" to skip this version.'
-            });
-            switch (result.response) {
-                case 0: // 'Update'
-                    (async () => {
-                        try {
-                            const { default: open } = await import('open');
-                        
-                            await open('https://github.com/DPSoftware-Foundation/ccIDE/releases/latest');
-                            console.log('URL opened in default browser');
-                        } catch (err) {
-                            console.error('Error opening URL:', err);
-                        }
-                    })();
-                    break;
-                case 1: // 'Ignore'
-                    localStorage.setItem('ignore_update', true);
-                    break;
-                case 2: // 'Skip'
-                    localStorage.setItem('skip_update_version', normalizedReleaseVersion);
-                    break;
+        const normalizedReleaseVersion = normalizeVersion(gitver);
+        if (normalizedAppVersion >= normalizedReleaseVersion) {
+            logger.info("Software is up-to-date.");
+        } else {
+            logger.info("A new update is available: " + gitver)
+            var is_not_skip_update = localStorage.getItem('skip_update_version') != normalizedAppVersion;
+            var is_ignore = localStorage.getItem('ignore_update');
+            if (is_ignore || is_not_skip_update) {
+                const result = dialog.showMessageBoxSync({
+                    type: 'question',
+                    buttons: ['Update', 'Ignore', 'Skip'],
+                    defaultId: 0,
+                    title: 'Update Available',
+                    message: `A new version (${gitver}) is available. Do you want to update now?`,
+                    detail: 'Click "Update" to go to the release page, "Ignore" to ignore this update, or "Skip" to skip this version.'
+                });
+                switch (result.response) {
+                    case 0: // 'Update'
+                        (async () => {
+                            try {
+                                const { default: open } = await import('open');
+                            
+                                await open('https://github.com/DPSoftware-Foundation/ccIDE/releases/latest');
+                                console.log('URL opened in default browser');
+                            } catch (err) {
+                                console.error('Error opening URL:', err);
+                            }
+                        })();
+                        break;
+                    case 1: // 'Ignore'
+                        localStorage.setItem('ignore_update', true);
+                        break;
+                    case 2: // 'Skip'
+                        localStorage.setItem('skip_update_version', normalizedReleaseVersion);
+                        break;
+                }
             }
         }
     }
@@ -168,7 +174,7 @@ app.whenReady().then(async () => {
             enableRemoteModule: true,
             contextIsolation: false,
         },
-        show: false,
+        //show: false,
         center: true,
     })
     
diff --git a/package-lock.json b/package-lock.json
index 598ba0d..081d813 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
   "name": "ccide",
-  "version": "1.4",
+  "version": "1.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ccide",
-      "version": "1.4",
+      "version": "1.5",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@blockly/plugin-workspace-search": "^9.0.5",
+        "@blockly/theme-dark": "^7.0.7",
         "@electron/remote": "^2.1.2",
         "blockly": "^11.1.1",
         "bootstrap": "^5.3.3",
@@ -18,6 +19,8 @@
         "open": "^10.1.0",
         "pino": "^9.3.2",
         "pino-pretty": "^11.2.2",
+        "toastify-js": "^1.12.0",
+        "unzipper": "^0.12.3",
         "xmldom": "^0.6.0"
       },
       "devDependencies": {
@@ -35,6 +38,18 @@
         "blockly": "^11.0.0"
       }
     },
+    "node_modules/@blockly/theme-dark": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@blockly/theme-dark/-/theme-dark-7.0.7.tgz",
+      "integrity": "sha512-p6urK/fLyzLhrHcSo1DhEvRkasyJjBYDpBPgPipAqGNJRlLR1pbNoBRcrpv3RzTgKIKbA0TeawsWHrHOXG0S/w==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.17.0"
+      },
+      "peerDependencies": {
+        "blockly": "^11.0.0"
+      }
+    },
     "node_modules/@electron/get": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.3.tgz",
@@ -209,6 +224,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "license": "MIT"
+    },
     "node_modules/boolean": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
@@ -330,6 +351,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cssstyle": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
@@ -500,6 +527,45 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "optional": true
     },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/duplexer2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/duplexer2/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/duplexer2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/electron": {
       "version": "31.1.0",
       "resolved": "https://registry.npmjs.org/electron/-/electron-31.1.0.tgz",
@@ -946,6 +1012,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -996,6 +1068,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/joycon": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
@@ -1130,6 +1208,12 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+      "license": "MIT"
+    },
     "node_modules/node-localstorage": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/node-localstorage/-/node-localstorage-3.0.5.tgz",
@@ -1290,6 +1374,12 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/process-warning": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-4.0.0.tgz",
@@ -1576,6 +1666,12 @@
         "real-require": "^0.2.0"
       }
     },
+    "node_modules/toastify-js": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
+      "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ==",
+      "license": "MIT"
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -1634,6 +1730,54 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/unzipper": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.12.3.tgz",
+      "integrity": "sha512-PZ8hTS+AqcGxsaQntl3IRBw65QrBI6lxzqDEL7IAo/XCEqRTKGfOX56Vea5TH9SZczRVxuzk1re04z/YjuYCJA==",
+      "license": "MIT",
+      "dependencies": {
+        "bluebird": "~3.7.2",
+        "duplexer2": "~0.1.4",
+        "fs-extra": "^11.2.0",
+        "graceful-fs": "^4.2.2",
+        "node-int64": "^0.4.0"
+      }
+    },
+    "node_modules/unzipper/node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/unzipper/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/unzipper/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/url-parse": {
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
@@ -1643,6 +1787,12 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -1768,6 +1918,12 @@
       "integrity": "sha512-T6LGwXLtsrVi7LjcuRjHLu4uQGniu9GUBwBCka9/WfkpuUIp6LQSU5DzEhJvGrt7UHiadDaEbcIi82lTfwqV9w==",
       "requires": {}
     },
+    "@blockly/theme-dark": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@blockly/theme-dark/-/theme-dark-7.0.7.tgz",
+      "integrity": "sha512-p6urK/fLyzLhrHcSo1DhEvRkasyJjBYDpBPgPipAqGNJRlLR1pbNoBRcrpv3RzTgKIKbA0TeawsWHrHOXG0S/w==",
+      "requires": {}
+    },
     "@electron/get": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.3.tgz",
@@ -1896,6 +2052,11 @@
         "jsdom": "23.0.0"
       }
     },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
     "boolean": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
@@ -1970,6 +2131,11 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "cssstyle": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
@@ -2077,6 +2243,43 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "optional": true
     },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "requires": {
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.8",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+          "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "electron": {
       "version": "31.1.0",
       "resolved": "https://registry.npmjs.org/electron/-/electron-31.1.0.tgz",
@@ -2385,6 +2588,11 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
     },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
     "is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -2411,6 +2619,11 @@
         "is-inside-container": "^1.0.0"
       }
     },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "joycon": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
@@ -2513,6 +2726,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
+    },
     "node-localstorage": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/node-localstorage/-/node-localstorage-3.0.5.tgz",
@@ -2637,6 +2855,11 @@
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
     },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "process-warning": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-4.0.0.tgz",
@@ -2846,6 +3069,11 @@
         "real-require": "^0.2.0"
       }
     },
+    "toastify-js": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
+      "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
+    },
     "tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -2888,6 +3116,44 @@
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
     },
+    "unzipper": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.12.3.tgz",
+      "integrity": "sha512-PZ8hTS+AqcGxsaQntl3IRBw65QrBI6lxzqDEL7IAo/XCEqRTKGfOX56Vea5TH9SZczRVxuzk1re04z/YjuYCJA==",
+      "requires": {
+        "bluebird": "~3.7.2",
+        "duplexer2": "~0.1.4",
+        "fs-extra": "^11.2.0",
+        "graceful-fs": "^4.2.2",
+        "node-int64": "^0.4.0"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "11.2.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+          "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+          "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="
+        }
+      }
+    },
     "url-parse": {
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
@@ -2897,6 +3163,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/package.json b/package.json
index e14893d..afe123d 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@blockly/plugin-workspace-search": "^9.0.5",
+    "@blockly/theme-dark": "^7.0.7",
     "@electron/remote": "^2.1.2",
     "blockly": "^11.1.1",
     "bootstrap": "^5.3.3",
@@ -23,6 +24,8 @@
     "open": "^10.1.0",
     "pino": "^9.3.2",
     "pino-pretty": "^11.2.2",
+    "toastify-js": "^1.12.0",
+    "unzipper": "^0.12.3",
     "xmldom": "^0.6.0"
   }
 }
diff --git a/src/blocksmanager.js b/src/blocksmanager.js
index 0309b2b..04d69e1 100644
--- a/src/blocksmanager.js
+++ b/src/blocksmanager.js
@@ -1,11 +1,103 @@
 const fs = require('fs');
 const path = require('path');
+const https = require('https');
+const unzipper = require('unzipper');
 const { DOMParser, XMLSerializer } = require('xmldom');
 
 const peripheralsfolder = path.join(__dirname, "../blocks"); 
 
 const fallbackImagePath = path.join(__dirname, '..', 'assets', 'noimagefallback.png'); // Path to fallback image
 
+let progressBar = document.getElementById('progressBarloading');
+let blocks_url = "https://cdn.damp11113.xyz/file/zip/ccide/blockslastest.zip?dl=1"
+
+function isBlocksFolderEmpty() {
+    try {
+        const files = fs.readdirSync(peripheralsfolder);
+        return files.length === 0; // Returns true if the folder is empty
+    } catch (err) {
+        console.error('Error reading folder:', err);
+        return false; // Return false or handle error as needed
+    }
+}
+
+async function downloadBlocks() {
+    try {
+        progressBar.style.display = 'inline-block';
+        // Create the output directory if it doesn't exist
+        if (!fs.existsSync(peripheralsfolder)) {
+            fs.mkdirSync(peripheralsfolder, { recursive: true });
+        }
+
+        console.log('Downloading blocks...');
+
+        const zipFilePath = path.join(peripheralsfolder, 'blocks.zip');
+
+        // Download the file as a Promise
+        await new Promise((resolve, reject) => {
+            https.get(blocks_url, (response) => {
+                if (response.statusCode !== 200) {
+                    reject(new Error(`Download failed with status code ${response.statusCode}`));
+                    return;
+                }
+
+                const totalBytes = parseInt(response.headers['content-length'], 10);
+                let downloadedBytes = 0;
+
+                const file = fs.createWriteStream(zipFilePath);
+
+                response.on('data', (chunk) => {
+                    downloadedBytes += chunk.length;
+                    const percentCompleted = Math.round((downloadedBytes / totalBytes) * 100);
+                    progressBar.value = percentCompleted;
+                    progressBar.innerText = percentCompleted + '%'; // Fallback text
+                    process.stdout.write(`Download progress: ${percentCompleted}%\r`);
+                });
+
+                response.pipe(file);
+
+                file.on('finish', () => {
+                    file.close();
+                    console.log('\nFile downloaded successfully.');
+                    resolve();
+                });
+
+                file.on('error', (error) => {
+                    fs.unlinkSync(zipFilePath);
+                    reject(error);
+                });
+            }).on('error', (error) => {
+                reject(error);
+            });
+        });
+
+        console.log('Unzipping file...');
+        
+        // Unzip the file as a Promise
+        await new Promise((resolve, reject) => {
+            fs.createReadStream(zipFilePath)
+                .pipe(unzipper.Extract({ path: peripheralsfolder }))
+                .on('close', () => {
+                    console.log('File unzipped successfully.');
+                    fs.unlinkSync(zipFilePath); // Delete the zip file after extraction
+                    console.log('Zip file deleted.');
+
+                    console.log('Downloaded blocks');
+                    progressBar.style.display = 'none';
+                    resolve();
+                })
+                .on('error', (error) => {
+                    reject(error);
+                });
+        });
+
+
+
+    } catch (error) {
+        console.error('Error downloading or unzipping file:', error);
+    }
+}
+
 
 const defineicon = {
     computer: {
@@ -76,7 +168,7 @@ function loadperipheral(workspace, currenttoolbar, peripherals, usedlibinproject
             const newxml = mergeXml(currenttoolbar, toolbar);
             workspace.updateToolbox(newxml);
 
-            document.getElementById('statusMessage').textContent = `Loaded ${peripherals}`;
+            fireNotify(`Loaded ${peripherals}`, "success")
 
             // Synchronously require generator.js
             require(generatorfilePath); // This will execute generator.js if it's a Node.js module
@@ -86,7 +178,7 @@ function loadperipheral(workspace, currenttoolbar, peripherals, usedlibinproject
 
             return newxml;
         } catch (e) {
-            document.getElementById('statusMessage').textContent = `Can't Import ${peripherals}: ${e}`;
+            fireNotify(`Can't Import ${peripherals}: ${e}`, "error")
             ipc.send("error", `Can't Import ${peripherals}: ${e}`);
         }
     } else {
@@ -125,7 +217,6 @@ function addimageiconinfo(div, src, tiptool) {
 
 function scanindex() {
     let foundedpackages = 0;
-    document.getElementById('statusMessage').textContent = "Scanning Packages...";
     // clear all item in libcontainer
     document.getElementById('libcontainer').innerHTML = "";
 
@@ -230,14 +321,12 @@ function scanindex() {
         });
     });
 
-    document.getElementById('statusMessage').textContent = `Founded ${foundedpackages} Packages`;
-    setTimeout(() => {
-        document.getElementById('statusMessage').textContent = `Ready`;
-    }, 1000);
+    fireNotify(`Founded ${foundedpackages} Packages`, "success")
 }
 
-
 module.exports = {
     loadperipheral,
-    scanindex
+    scanindex,
+    isBlocksFolderEmpty,
+    downloadBlocks
 }
\ No newline at end of file
diff --git a/src/ccRemote.js b/src/ccRemote.js
index edbe7a6..79a4ddc 100644
--- a/src/ccRemote.js
+++ b/src/ccRemote.js
@@ -9,14 +9,13 @@ class CCRemote {
 
         console.log("Remote server is started");
 
+        fireNotify("Computer isn't connect", "warning", "https://github.com/DPSoftware-Foundation/ccIDE#install-remote-code-into-computercraft")
+
         this.socket.on('connection', (ws) => {
             document.getElementById("navbar-button-computer-disconnect").disabled = false;
             document.getElementById("navbar-button-computer-run").disabled = false;
 
-            document.getElementById('statusMessage').textContent = "Computer connected";
-            setTimeout(() => {
-                document.getElementById('statusMessage').textContent = `Ready`;
-            }, 1000);
+            fireNotify("Computer connected", "success")
 
             console.log('WebSocket connection established.');
 
@@ -34,10 +33,7 @@ class CCRemote {
                 document.getElementById("navbar-button-computer-disconnect").disabled = true;
                 document.getElementById("navbar-button-computer-run").disabled = true;
 
-                document.getElementById('statusMessage').textContent = "Computer disconnected";
-                setTimeout(() => {
-                    document.getElementById('statusMessage').textContent = `Ready`;
-                }, 1000);
+                fireNotify("Computer disconnected", "warning")
             });
 
             ws.on('error', (error) => {
diff --git a/src/index.html b/src/index.html
index 3bfddac..bf0002f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,137 +3,150 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <script>
-        const {shell} = require('electron');
-    </script>
-    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
-	<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="styles.css" />
-</head>
-<body>
-    <!-- Navigation bar -->
-    <nav id="navbar">
-        <!--
-        <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Computer Types" style="background-color: #0087bd;">
-            <svg viewBox="0 0 24 24"><path d="M6 4h12v1h3v2h-3v2h3v2h-3v2h3v2h-3v2h3v2h-3v1H6v-1H3v-2h3v-2H3v-2h3v-2H3V9h3V7H3V5h3V4m5 11v3h1v-3h-1m2 0v3h1v-3h-1m2 0v3h1v-3h-1z" /></svg>
-        </button>
-        -->
-        <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Packages Managers" style="background-color: #0087bd;" onclick="openlibraryselect()">
-            <svg viewBox="0 0 24 24"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9M12 4.15l-1.89 1.07L16 8.61l1.96-1.11L12 4.15M6.04 7.5 12 10.85l1.96-1.1-5.88-3.4L6.04 7.5M5 15.91l6 3.38v-6.71L5 9.21v6.7m14 0v-6.7l-6 3.37v6.71l6-3.38z" /></svg>
-        </button>
-        <!-- 
-        <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Preview code" style="background-color: #0087bd; margin-left: auto; position: absolute; right: 115px;">
-            <svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z" /></svg>
-        </button>
-        -->
-        <button class="navbar-button" id="navbar-button-computer-disconnect" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Disconnect Client" style="background-color: #bd0000; margin-left: auto; position: absolute; right: 65px;" onclick="clientexit()" disabled>
-            <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .89-2 2v4h2V5h14v14H5v-4H3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-8.92 12.58L11.5 17l5-5-5-5-1.42 1.41L12.67 11H3v2h9.67l-2.59 2.58z" /></svg>
-        </button>
-        <button class="navbar-button" id="navbar-button-computer-run" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Run" style="background-color: #10bd00; margin-left: auto;" onclick="gencode()" disabled>
-            <svg viewBox="0 0 24 24"><path d="M8 5.14v14l11-7-11-7z" /></svg>
-        </button>
-    </nav>
+    <div class="loading-area">
+        <div id="loadingContent">
+            <div class="loader"></div>
+            <br>
+            <h3>Please wait...</h3>
+            <h5 id="loadingstatus"></h5>
+            <progress id="progressBarloading" value="0" max="100"></progress>
 
-    <!-- Blockly workspace container -->
-    <section id="blocklyContainer">
-        <div id="blocklyDiv"></div>
-    </section>
 
-    <!-- Status bar -->
-    <div id="statusBar">
-        <p id="statusMessage">Initializing...</p>
-    </div>
-
-    <div class="popup" id="upload-popup">
-        <div class="popup-content">
-            <button type="button" class="btn-close float-end" aria-label="Close" id="uploadCloseBtn"></button>
-            <div class="upload-progress-container" style="text-align: center;">
-                <div class="progress-container">
-                    <div class="progress" id="progress"></div>
-                    <div class="circle active">
-                        <svg viewBox="0 0 24 24"><path d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2 2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3h2z" /></svg>
-                    </div>
-                    <div class="circle">
-                        <svg viewBox="0 0 24 24"><path d="m5.5 4.14-1 1.72L15 12 4.5 18.14l1 1.72L19 12 5.5 4.14z" /></svg>
-                    </div>
-                    <div class="circle">
-                        <svg viewBox="0 0 24 24"><path d="M9 16v-6H5l7-7 7 7h-4v6H9m-4 4v-2h14v2H5z" /></svg>
-                    </div>
-                    <div class="circle">
-                        <svg viewBox="0 0 24 24"><path d="m20 22-3.86-1.55c.7-1.53 1.2-3.11 1.51-4.72L20 22M7.86 20.45 4 22l2.35-6.27c.31 1.61.81 3.19 1.51 4.72M12 2s5 2 5 10c0 3.1-.75 5.75-1.67 7.83A2 2 0 0 1 13.5 21h-3a2 2 0 0 1-1.83-1.17C7.76 17.75 7 15.1 7 12c0-8 5-10 5-10m0 10c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" /></svg>
-                    </div>
-                </div>
-                <p id="upload-status"></p>
-            </div>
-        </div>
-    </div>
-
-    <div class="popup" id="about-popup">
-        <div class="popup-content">
-            <button type="button" class="btn-close float-end" aria-label="Close" id="aboutCloseBtn"></button>
-            <h2>ccIDE</h2>
-            <p>
-                ccIDE is an integrated development environment designed for coding Lua scripts
-                for ComputerCraft. It provides a user-friendly interface for creating and managing
-                projects, designing custom blocks, and debugging scripts efficiently.
-            </p>
-            <p>
-                Developed by DPSoftware Foundation, ccIDE aims to streamline the development
-                process for ComputerCraft programmers, offering features like block-based coding,
-                real-time collaboration, and seamless integration with ComputerCraft environments.
-            </p>
-            <p>
-                Visit <a href="https://damp11113.xyz/dpsoftware/ccide">ccIDE Website</a> for more information and updates.
-            </p>
-            <div class="license">
-                &copy; 2024 DPSoftware Foundation. Licensed under GPL v3.
-            </div>
-            <style>
-                .license {
-                    font-size: 14px;
-                    color: #888;
-                    text-align: center;
-                    margin-top: 20px;
-                }
-            </style>
-        </div>
-    </div>
-
-    <div class="popup" id="library-popup" style="overflow-y:hidden;">
-        <div class="popup-content p-3" style="max-width: 1280px; position: relative; margin-top: 100px;">
-            <button type="button" class="btn-close" aria-label="Close" id="libraryCloseBtn" style="position: absolute; top: 10px; right: 10px;"></button>
-            <h3>Packages Managers</h3>
-            <div class="library-content">
-                <div id="libcontainer">
-                    <div class="library-item overflow-auto library-container" data-libraryfolder="name">
-                        <img src="image.jpg" class="libimage" onerror="this.onerror=null;this.src='../assets/noimagefallback.png'; this.alt='No Image Available';">
-                        <div class="library-details">
-                            <h3>Title [v1.0 by Author]</h3>
-                            <p>Library description goes here.</p>
-                            <img src="../assets/basic_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Basic Computer">
-                            <img src="../assets/adv_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Computer">
-                            <img src="../assets/command_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Command Computer">
-                            <img src="../assets/pocket_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Pocket Computer">
-                            <img src="../assets/adv_pocket_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Pocket Computer">
-                            <img src="../assets/turtle.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Basic Turtle">
-                            <img src="../assets/adv_turtle.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Turtle">
-                            <img src="../assets/peripheral.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Peripheral">
-                            <img src="../assets/library.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Library">
-                            <img src="../assets/network-require.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Network Require">
-                        </div>
-                    </div>
-                    
-                </div>
-            </div>
-            <div class="button-container">
-                <button type="button" class="btn btn-success btn-sm" id="packageman-import-btn">Import Packages</button>
-                <button type="button" class="btn btn-warning btn-sm" onclick='scanindex()'>Refetch Packages</button>
-                <button type="button" class="btn btn-primary btn-sm" onclick='shell.openExternal("https://damp11113.xyz/dpsoftware/ccide/library")'>Download Packages</button>
+            <div class="dpclogoload">
+                <img src="../assets/DPSoftware2.png" style="width: 25%;"/>
             </div>
         </div>
     </div>
     
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../node_modules/toastify-js/src/toastify.css">
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+</head>
+<body>
+    
+    <div class="content-area">
+        <!-- Navigation bar -->
+        <nav id="navbar">
+            <!--
+            <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Computer Types" style="background-color: #0087bd;">
+                <svg viewBox="0 0 24 24"><path d="M6 4h12v1h3v2h-3v2h3v2h-3v2h3v2h-3v2h3v2h-3v1H6v-1H3v-2h3v-2H3v-2h3v-2H3V9h3V7H3V5h3V4m5 11v3h1v-3h-1m2 0v3h1v-3h-1m2 0v3h1v-3h-1z" /></svg>
+            </button>
+            -->
+            <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Packages Managers" style="background-color: #0087bd;" onclick="openlibraryselect()">
+                <svg viewBox="0 0 24 24"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9M12 4.15l-1.89 1.07L16 8.61l1.96-1.11L12 4.15M6.04 7.5 12 10.85l1.96-1.1-5.88-3.4L6.04 7.5M5 15.91l6 3.38v-6.71L5 9.21v6.7m14 0v-6.7l-6 3.37v6.71l6-3.38z" /></svg>
+            </button>
+            <!-- 
+            <button class="navbar-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Preview code" style="background-color: #0087bd; margin-left: auto; position: absolute; right: 115px;">
+                <svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z" /></svg>
+            </button>
+            -->
+            <button class="navbar-button" id="navbar-button-computer-disconnect" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Disconnect Client" style="background-color: #bd0000; margin-left: auto; position: absolute; right: 65px;" onclick="clientexit()" disabled>
+                <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .89-2 2v4h2V5h14v14H5v-4H3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-8.92 12.58L11.5 17l5-5-5-5-1.42 1.41L12.67 11H3v2h9.67l-2.59 2.58z" /></svg>
+            </button>
+            <button class="navbar-button" id="navbar-button-computer-run" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Run" style="background-color: #10bd00; margin-left: auto;" onclick="gencode()" disabled>
+                <svg viewBox="0 0 24 24"><path d="M8 5.14v14l11-7-11-7z" /></svg>
+            </button>
+        </nav>
+
+        <!-- Blockly workspace container -->
+        <section id="blocklyContainer">
+            <div id="blocklyDiv"></div>
+        </section>
+
+        <div class="popup" id="upload-popup">
+            <div class="popup-content">
+                <button type="button" class="btn-close float-end" aria-label="Close" id="uploadCloseBtn"></button>
+                <div class="upload-progress-container" style="text-align: center;">
+                    <div class="progress-container">
+                        <div class="progress" id="progress"></div>
+                        <div class="circle active">
+                            <svg viewBox="0 0 24 24"><path d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2 2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3h2z" /></svg>
+                        </div>
+                        <div class="circle">
+                            <svg viewBox="0 0 24 24"><path d="m5.5 4.14-1 1.72L15 12 4.5 18.14l1 1.72L19 12 5.5 4.14z" /></svg>
+                        </div>
+                        <div class="circle">
+                            <svg viewBox="0 0 24 24"><path d="M9 16v-6H5l7-7 7 7h-4v6H9m-4 4v-2h14v2H5z" /></svg>
+                        </div>
+                        <div class="circle">
+                            <svg viewBox="0 0 24 24"><path d="m20 22-3.86-1.55c.7-1.53 1.2-3.11 1.51-4.72L20 22M7.86 20.45 4 22l2.35-6.27c.31 1.61.81 3.19 1.51 4.72M12 2s5 2 5 10c0 3.1-.75 5.75-1.67 7.83A2 2 0 0 1 13.5 21h-3a2 2 0 0 1-1.83-1.17C7.76 17.75 7 15.1 7 12c0-8 5-10 5-10m0 10c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" /></svg>
+                        </div>
+                    </div>
+                    <p id="upload-status"></p>
+                </div>
+            </div>
+        </div>
+
+        <div class="popup" id="about-popup">
+            <div class="popup-content">
+                <button type="button" class="btn-close float-end" aria-label="Close" id="aboutCloseBtn"></button>
+                <h2>ccIDE</h2>
+                <p>
+                    ccIDE is an integrated development environment designed for coding Lua scripts
+                    for ComputerCraft. It provides a user-friendly interface for creating and managing
+                    projects, designing custom blocks, and debugging scripts efficiently.
+                </p>
+                <p>
+                    Developed by DPSoftware Foundation, ccIDE aims to streamline the development
+                    process for ComputerCraft programmers, offering features like block-based coding,
+                    real-time collaboration, and seamless integration with ComputerCraft environments.
+                </p>
+                <p>
+                    Visit <a href="https://damp11113.xyz/dpsoftware/ccide">ccIDE Website</a> for more information and updates.
+                </p>
+                <div class="license">
+                    &copy; 2024 DPSoftware Foundation. Licensed under GPL v3.
+                </div>
+                <style>
+                    .license {
+                        font-size: 14px;
+                        color: #888;
+                        text-align: center;
+                        margin-top: 20px;
+                    }
+                </style>
+            </div>
+        </div>
+
+        <div class="popup" id="library-popup" style="overflow-y:hidden;">
+            <div class="popup-content p-3" style="max-width: 1280px; position: relative; margin-top: 100px;">
+                <button type="button" class="btn-close" aria-label="Close" id="libraryCloseBtn" style="position: absolute; top: 10px; right: 10px;"></button>
+                <h3>Packages Managers</h3>
+                <div class="library-content">
+                    <div id="libcontainer">
+                        <div class="library-item overflow-auto library-container" data-libraryfolder="name">
+                            <img src="image.jpg" class="libimage" onerror="this.onerror=null;this.src='../assets/noimagefallback.png'; this.alt='No Image Available';">
+                            <div class="library-details">
+                                <h3>Title [v1.0 by Author]</h3>
+                                <p>Library description goes here.</p>
+                                <img src="../assets/basic_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Basic Computer">
+                                <img src="../assets/adv_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Computer">
+                                <img src="../assets/command_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Command Computer">
+                                <img src="../assets/pocket_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Pocket Computer">
+                                <img src="../assets/adv_pocket_computer.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Pocket Computer">
+                                <img src="../assets/turtle.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Basic Turtle">
+                                <img src="../assets/adv_turtle.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Advanced Turtle">
+                                <img src="../assets/peripheral.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Peripheral">
+                                <img src="../assets/library.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Library">
+                                <img src="../assets/network-require.png" class="libimageicon" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Network Require">
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+                <div class="button-container">
+                    <button type="button" class="btn btn-success btn-sm" id="packageman-import-btn">Import Packages</button>
+                    <button type="button" class="btn btn-warning btn-sm" onclick='scanindex()'>Refetch Packages</button>
+                    <button type="button" class="btn btn-primary btn-sm" onclick='downloadBlocks()'>Download Packages</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const {shell} = require('electron');
+    </script>
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="frontend.js"></script>
     <script src="index.js"></script>
     <script src="codegen.js"></script>
diff --git a/src/index.js b/src/index.js
index 6570f51..2c9c302 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,14 +20,43 @@ console.originalLog = console.log;
 console.log = function (...args) {
     ipc.send("update-log-status", ...args)
     console.originalLog(...args)
+    document.getElementById("loadingstatus").textContent = args.join(' ');
 };
 
 console.log("Importing module...")
 const fs = require('fs');
 const path = require('path');
-const { loadperipheral, scanindex } = require("./blocksmanager");
+const { loadperipheral, scanindex, isBlocksFolderEmpty, downloadBlocks } = require("./blocksmanager");
 const Blockly = require('blockly');
 const { WorkspaceSearch } = require("@blockly/plugin-workspace-search")
+const Toastify = require('toastify-js');
+
+function fireNotify(text, status, destination, duration=3000) {
+    let color;
+    if (status == "success") {
+        color = "#a5dc86"
+    } else if (status == "warning") {
+        color = "#f8bb86"
+    } else if (status == "error") {
+        color = "#f27474"
+    } else if (status == "info") {
+        color = "#3fc3ee"
+    } 
+
+    Toastify({
+        text: text,
+        duration: duration,
+        destination: destination,
+        newWindow: true,
+        close: true,
+        gravity: "top", // `top` or `bottom`
+        position: "right", // `left`, `center` or `right`
+        stopOnFocus: true, // Prevents dismissing of toast on hover
+        style: {
+            background: color,
+        }
+    }).showToast();
+}
 
 let isprojectsaved = false;
 let isprojectopened = false;
@@ -39,6 +68,24 @@ Blockly.utils.colour.setHsvSaturation(0.9)
 let originaltoolbar = fs.readFileSync(path.join(__dirname, "toolbox.xml"), 'utf8');
 
 try {
+    const theme = Blockly.Theme.defineTheme('themeName', {
+        base: Blockly.Themes.Classic,
+        componentStyles: {
+            workspaceBackgroundColour: "#1e1e1e",
+            toolboxBackgroundColour: "blackBackground",
+            toolboxForegroundColour: "#fff",
+            flyoutBackgroundColour: "#252526",
+            flyoutForegroundColour: "#ccc",
+            flyoutOpacity: 1,
+            scrollbarColour: "#797979",
+            insertionMarkerColour: "#fff",
+            insertionMarkerOpacity: .3,
+            scrollbarOpacity: .4,
+            cursorColour: "#d0d0d0",
+            blackBackground: "#333"
+        }
+    });
+
     var workspace = Blockly.inject('blocklyDiv', {
         toolbox: originaltoolbar,
         trashcan: true,
@@ -56,7 +103,8 @@ try {
             minScale: 0.1,
             scaleSpeed: 1.1,
             pinch: true
-        }
+        },
+        theme: theme
     });
 
     const workspaceSearch = new WorkspaceSearch(workspace);
@@ -67,27 +115,6 @@ try {
     ipc.send("erroronstart", `Error on initializing workspace: ${e}`)
 }
 
-try {
-    console.log("Importing system library...")
-    const sysmodulejson = fs.readFileSync(path.join(__dirname, "module_block_design.json"), 'utf8');
-    const blocksJson = JSON.parse(sysmodulejson);
-    for (const blockId in blocksJson) {
-        if (blocksJson.hasOwnProperty(blockId)) {
-            Blockly.Blocks[blockId] = {
-                init: function() {
-                    this.jsonInit(blocksJson[blockId]);
-                }
-            };
-        }
-    }
-    require("./module_generator")
-
-    console.log("Scanning library...")
-    scanindex();
-} catch (e) {
-    ipc.send("erroronstart", `Error on loading block: ${e}`)
-}
-
 console.log("Initializing event...")
 
 ipc.on('export-lua-request', (event) => {    
@@ -98,7 +125,7 @@ ipc.on('export-lua-request', (event) => {
 // Save workspace
 ipc.on('save-workspace-request', (event) => {
     console.log("Saving project...")
-    document.getElementById('statusMessage').textContent = `Saving...`;
+    fireNotify(`Saving...`, "warning")
     const state = Blockly.serialization.workspaces.save(workspace);
     const data = {
         "usedlibrary": usedlibinproject,
@@ -120,28 +147,21 @@ ipc.on('load-workspace', (event, json) => {
                 const packagefolder = libinproject[i]
                 if (!usedlibinproject.includes(packagefolder)) {
                     try {
-                        originaltoolbar = loadperipheral(workspace, originaltoolbar, packagefolder);
+                        originaltoolbar = loadperipheral(workspace, originaltoolbar, packagefolder, usedlibinproject);
                         usedlibinproject.push(packagefolder);
                     } catch (e) {
-                        document.getElementById('statusMessage').textContent = `Can't Import ${usedlibinproject[i]}: ${e}`;
-                        setTimeout(() => {
-                            document.getElementById('statusMessage').textContent = `Ready`;
-                        }, 1000);
+                        fireNotify(`Can't Import ${usedlibinproject[i]}: ${e}`, "error")
                     }
+                    
                 }
             }
-            setTimeout(() => {
-                Blockly.serialization.workspaces.load(data.content, workspace);
-                isprojectsaved = true
-                document.getElementById('statusMessage').textContent = `Project Loaded`;
-            }, 100);
+            Blockly.serialization.workspaces.load(data.content, workspace);
+            isprojectsaved = true
+            fireNotify(`Project Loaded`, "success")
         } 
     } catch (e) {
-        document.getElementById('statusMessage').textContent = `Can't Load Project: ${e}`;
+        fireNotify(`Can't Load Project: ${e}`, "error")
     }
-    setTimeout(() => {
-        document.getElementById('statusMessage').textContent = `Ready`;
-    }, 1000);
 })
 
 ipc.on('workspace-saved', (event, success) => {
@@ -149,10 +169,7 @@ ipc.on('workspace-saved', (event, success) => {
     if (!isprojectopened) {
         isprojectopened = true;
     }
-    document.getElementById('statusMessage').textContent = `Project Saved`;
-    setTimeout(() => {
-        document.getElementById('statusMessage').textContent = `Ready`;
-    }, 1000);
+    fireNotify(`Project Saved`, "success")
 });
 
 ipc.on("open-about", () => {
@@ -186,19 +203,53 @@ document.getElementById("packageman-import-btn").addEventListener('click', () =>
     selectedItems.forEach(item => {
         const packagefolder = item.getAttribute('data-libraryfolder');
         originaltoolbar = loadperipheral(workspace, originaltoolbar, packagefolder, usedlibinproject);
+        fireNotify(`Loaded ${packagefolder}`, "success")
     });
-    setTimeout(() => {
-        document.getElementById('statusMessage').textContent = `Ready`;
-    }, 1000);
 });
 
-// Ensure Blockly container is shown after the workspace is injected
-console.log("Finished")
-setTimeout(() => {
-    ipc.send("ready")
-}, 500);
+async function InitializingBlock() {
+    try {
+        console.log("Importing system library...");
+        const sysmodulejson = fs.readFileSync(path.join(__dirname, "module_block_design.json"), 'utf8');
+        const blocksJson = JSON.parse(sysmodulejson);
 
-document.getElementById('statusMessage').textContent = "Computer isn't connect";
-setTimeout(() => {
-    document.getElementById('statusMessage').textContent = `Ready`;
-}, 10000);
\ No newline at end of file
+        for (const blockId in blocksJson) {
+            if (blocksJson.hasOwnProperty(blockId)) {
+                Blockly.Blocks[blockId] = {
+                    init: function() {
+                        this.jsonInit(blocksJson[blockId]);
+                    }
+                };
+            }
+        }
+        require("./module_generator");
+
+        console.log("Check library folder...");
+        if (isBlocksFolderEmpty()) {
+            await downloadBlocks(); 
+        } 
+        scanindex();
+
+
+    } catch (e) {
+        ipc.send("erroronstart", `Error on loading block: ${e}`);
+    }
+
+    // Ensure Blockly container is shown after the workspace is injected
+    console.log("Finished")
+    setTimeout(() => {
+        ipc.send("ready")
+        // Hide loading area
+        const loadingArea = document.querySelector('.loading-area');
+        loadingArea.style.opacity = '0';
+        loadingArea.style.visibility = 'hidden';
+        loadingArea.style.display = 'none';
+        
+        // Show content area
+        const contentArea = document.querySelector('.content-area');
+        contentArea.style.opacity = '1';
+        contentArea.style.visibility = 'visible';
+    }, 500);
+}
+
+InitializingBlock();
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 2e07b8b..aee4baa 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,12 +5,78 @@
 
 body {
     background-color: #212121;
-    margin: 0;
+    overflow: hidden; /* Hide scrollbars */
+}
+
+.content-area {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.loading-area {
+    color: #cacaca;
+    position: absolute;
+    z-index: 400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: calc(100% - 22px);
+}
+
+#progressBarloading {
+    display: none; /* Initially hidden */
+}
+
+#loadingContent {
+    position: relative;
     display: flex;
     flex-direction: column;
-    height: 100vh;
-    font-family: 'Noto Sans', sans-serif;
-    overflow: hidden; /* Hide scrollbars */
+    align-items: center;
+    justify-content: center;
+}
+
+.loader {
+    width: 90px;
+    height: 14px;
+    box-shadow: 0 3px 0 #fff;
+    position: relative;
+    clip-path: inset(-40px 0 -5px)
+}
+
+.loader:before {
+    content: "";
+    position: absolute;
+    inset: auto calc(50% - 17px) 0;
+    height: 50px;
+    --g:no-repeat linear-gradient(#ccc 0 0);
+    background: var(--g),var(--g),var(--g),var(--g);
+    background-size: 16px 14px;
+    animation:
+    l7-1 2s infinite linear,
+    l7-2 2s infinite linear;
+}
+@keyframes l7-1 {
+    0%,
+    100%  {background-position: 0 -50px,100% -50px}
+    17.5% {background-position: 0 100%,100% -50px,0 -50px,100% -50px}
+    35%   {background-position: 0 100%,100% 100% ,0 -50px,100% -50px}
+    52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% -50px}
+    70%,
+    98%  {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% calc(100% - 16px)}
+}
+@keyframes l7-2 {
+    0%,70% {transform:translate(0)}
+    100%  {transform:translate(200%)}
+}
+
+.dpclogoload {
+    display: flex; /* Enable flexbox */
+    justify-content: center; /* Center horizontally */
+    position: fixed; /* Fixed position */
+    bottom: 30px; /* Adjust as necessary */
+    z-index: 20; /* Ensure it appears above other content */
+    width: 100%; /* Ensure the div takes full width */
 }
 
 #navbar {
@@ -66,20 +132,6 @@ body {
     bottom: 0;
 }
 
-#statusBar {
-    height: 3vh; /* Set the height of the status bar */
-    background-color: #333;
-    color: #ffffff;
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-#statusMessage {
-    margin: 0;
-}
-
 /* Styles for the upload-popup container */
 .popup {
     display: none; /* Hide initially */