diff --git a/templates/shortcodes/dev_resourses.html b/templates/shortcodes/dev_resourses.html
index 16d7191a2..955ca0c66 100644
--- a/templates/shortcodes/dev_resourses.html
+++ b/templates/shortcodes/dev_resourses.html
@@ -1,11 +1,15 @@
+{% if 'www_threefold_io' in config.base_url %}
+{% set url = 'developer/' %}
+{% elif '127.0.0.1:1111' in config.base_url %}
+{% set url = 'developer/' %}
+{% else %}
+{% set url = '' %}
+{% endif %}
 <div class="my-5 lg:my-40 lg:mx-40 mx-4">
     <div class="w-full text-center">
         <h2 class="lg:text-6xl uppercase font-normal leading-tight">
             WHERE WOULD YOU LIKE TO START?
         </h2>
-        {% if 'www_threefold_io' in config.base_url %}
-        <p>{{config.base_url}}</p>
-        {% endif %}
         <div class="max-w-4xl mb-10 py-2 text-xl mx-auto leading-tight tracking-wide">ThreeFold's open-source
             infrastructure has been built from the ground up on the Linux Kernel to create a fully decentralized
             Internet and Cloud. From a stateless operating system to new compute, storage and networking primitives, the
@@ -23,7 +27,7 @@
         bg-gray-100
       ">
             <a href="/developer/os">
-                <img src="operating_system.png" />
+                <img src={{ url ~ 'operating_system.png' }} />
                 <div class="font-bold text-xl py-5 mx-4 text-black">
                     Operating System
                 </div>
@@ -40,7 +44,7 @@
         bg-gray-100
       ">
             <a href="/developer/automation">
-                <img src="automation.png" />
+                <img src={{ url ~ 'automation.png' }} />
                 <div class="font-bold text-xl py-5 mx-4 text-black">
                     Autonomous Components
                 </div>
@@ -57,7 +61,7 @@
         bg-gray-100
       ">
             <a href="/developer/tooling">
-                <img src="tooling.png" />
+                <img src={{ url ~ 'tooling.png' }} />
                 <div class="font-bold text-xl py-5 mx-4 text-black">
                     Developer tooling
                 </div>
@@ -74,7 +78,7 @@
         bg-gray-100
       ">
             <a href="/developer/qsfs">
-                <img src="qsfs.png" />
+                <img src={{ url ~ 'qsfs.png' }} />
                 <div class="font-bold text-xl py-5 mx-4 text-black">
                     Quantum-Safe Storage
                 </div>
@@ -91,7 +95,7 @@
         bg-gray-100
       ">
             <a href="/developer/blockchain">
-                <img src="blockchain.png" />
+                <img src={{ url ~ 'blockchain.png' }} />
                 <div class="font-bold text-xl py-5 mx-4 text-black">
                     ThreeFold Blockchain
                 </div>
@@ -108,7 +112,7 @@
         bg-gray-100
       ">
             <a href="/developer/planetarynw">
-                <img src="planetary_network.jpg" />
+                <img src={{ url ~ 'planetary_network.jpg' }} />
                 <div class="font-bold text-xl py-5 mx-4 text-black">
                     Planetary Network
                 </div>