diff --git a/content/about/index.md b/content/about/index.md
index ce4befe53..bcfb74904 100644
--- a/content/about/index.md
+++ b/content/about/index.md
@@ -318,14 +318,31 @@ Market Cap
 </div>
 
 </a>
+
 {% end %}
 
 
+
+
+<!-- section 5  -->
+
+
+
+{% hovevision() %}
+
+## **Vision**
+
+{% end %}
+
 </div>
 
 
+
+
 <style>
 
+
+
   .green{
 
     background-color:#58CF77 !important;
diff --git a/static/images/vision1.png b/static/images/vision1.png
new file mode 100644
index 000000000..bf2d35cf4
Binary files /dev/null and b/static/images/vision1.png differ
diff --git a/static/images/vision2.png b/static/images/vision2.png
new file mode 100644
index 000000000..5b6ca4ada
Binary files /dev/null and b/static/images/vision2.png differ
diff --git a/static/images/vision3.png b/static/images/vision3.png
new file mode 100644
index 000000000..c29b95a62
Binary files /dev/null and b/static/images/vision3.png differ
diff --git a/static/images/vision4.png b/static/images/vision4.png
new file mode 100644
index 000000000..7eed4f9b4
Binary files /dev/null and b/static/images/vision4.png differ
diff --git a/templates/shortcodes/hovevision.html b/templates/shortcodes/hovevision.html
new file mode 100644
index 000000000..d66550a53
--- /dev/null
+++ b/templates/shortcodes/hovevision.html
@@ -0,0 +1,49 @@
+
+<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:py-20 py-8">
+    <div class="w-full md:w-1/3">
+     <h1 class="font-medium">The Vision</h1>
+     <h3 class="blue font-normal">Pioneering. Empowering.</h3>
+    </div>
+    <div class="w-full md:w-2/3">
+        <div class="flex flex-wrap justify-center md:justify-end">
+            <div class="relative my-6 mx-2">
+                <img class="w-full object-cover rounded-md" src="images/vision1.png" alt="Random image">
+                <div class="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
+            </div>
+            <div class="relative my-6 mx-2">
+                <img class="w-full object-cover rounded-md" src="images/vision2.png" alt="Random image">
+                <div class="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
+            </div>
+            <div class="relative my-6 mx-2">
+                <img class="w-full object-cover rounded-md" src="images/vision3.png" alt="Random image">
+                <div class="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
+            </div>
+            <div class="relative my-6 mx-2">
+                <img class="w-full object-cover rounded-md" src="images/vision4.png" alt="Random image">
+                <div class="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+
+
+
+<style>
+
+    .test2{
+        background-color: rgba(224, 224, 224, 0);
+
+        
+    }
+
+    .test2:hover{ 
+        background-color: rgba(224, 224, 224, 0.8);
+        animation-duration: 200;
+        
+    }
+</style>
+
+