diff --git a/templates/assets/css/box.css b/templates/assets/css/box.css
index c1512de..4ab5bcb 100644
--- a/templates/assets/css/box.css
+++ b/templates/assets/css/box.css
@@ -1,9 +1,9 @@
- /* Test */
- /* only load with child template */
+
 
  .mobile_placeholder {
     display: flex;
     justify-content: center;
+    box-sizing: border-box;
 }
 
 .open {
@@ -18,22 +18,23 @@
   border-image: linear-gradient(#BDD4E7, #8693AB) 30;
 }
 
-.open .box {
-  /* background-image: url('/assets/img/spider_out_bw.webp'); */
+/* .open .box {
+  background-image: url('/assets/img/spider_out_bw.webp'); 
   background-size: cover;
   background-repeat: no-repeat;
   height: inherit;
   width: inherit;
   opacity: 20%;
   grid-row: 1/5;
-}
+} */
 
 .content {
   height: inherit;
   width: inherit;
   display: grid;
-  grid-template-rows: .5fr .25fr 1fr .45fr;
+  grid-template-rows: .35fr .25fr 1fr .45fr;
   max-width: inherit;
+  max-height: inherit;
 }
 
 .content h2 {
@@ -60,7 +61,7 @@
   font-size: 1.5vh;
   text-align: center;
   line-height: 3.5vh;
-  margin-top: 2vh;
+  margin: 2vh 2vw;
 }
 
 .content a {
@@ -88,8 +89,16 @@
   background-size: 200% 100%;
   background-position: left bottom;
   border: .5vw solid #8693AB;
+  color: #BDD4E7;
 }
 
+.content a:active {
+  background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%);
+  background-size: 100% 120%;
+  background-position: left bottom;
+  border: .25vw solid #8693AB;
+  color: #BDD4E7;
+}
 
 
 .close {
@@ -99,7 +108,7 @@
     color: #e5e7e6;
     position: fixed;
     top: 15vh;
-    left: 80vw;
+    left: 70vw;
 }
 
 input {
@@ -110,37 +119,62 @@ input {
     cursor: pointer;
     position: fixed;
     top: 15vh;
-    left: 80vw;
+    left: 70vw;
 }
 
-input:checked ~ .open {
-    display: none;
-}
 
-input:checked ~ .close {
-  display: none;
+@keyframes shine {
+  0% {
+      stroke: url('#myGradient');
+
+     
+      }
+      50% {
+        stroke: url('#myGradient2');
+        
+      }
+      100% {
+          stroke: url('#myGradient');
+  }
 }
 
+
 input:hover ~ .close  {
   animation: shine 4s ease-in forwards;
 
 }
 
-@keyframes shine {
+input:active ~ .close  {
+  animation: shine 4s ease-in forwards;
+
+}
+
+/* test */
+
+@keyframes shine2 {
   0% {
-      stroke: url('#myGradient');
+      stroke: #8693AB;
+  
+  }
 
-     
-      }
+  25% {
+    stroke:#BDD4E7;
+  }
       50% {
-        stroke: url('#myGradient2');
+        stroke: #8693AB;
         
       }
+  75% {
+        stroke:#BDD4E7;
+  }
+
       100% {
-          stroke: url('#myGradient');
+          stroke: #8693AB
   }
 }
 
+
+
 @media (min-height: 750px) {
   .open {
     max-height: 60vh;
@@ -153,10 +187,66 @@ input:hover ~ .close  {
   }
 }
 
-@media (min-height: 880px) {
+@media (min-height: 800px) and (max-width: 768px) {
   .open {
     max-height: 45vh;
   }
+
+  h2 {
+    font-size: 3.25vh !important;
+    margin: 3vh 0 2vh 0 !important;
+  }
+
+  h3 {
+    font-size: 1.5vh !important;
+    line-height: 2.5vh !important;
+  }
+
+  p {
+    font-size: 1.05vh !important;
+  line-height: 2.5vh !important;
+  }
+
+  a {
+    font-size: 1.45vh !important;
+  }
+}
+
+@media (min-height: 840px) and (max-width: 1080px)  {
+
+  h2 {
+      font-size: 3.25vh !important;
+      margin: 3vh 0 2vh 0 !important;
+  }
+
+  h3 {
+    font-size: 1.5vh !important;
+    line-height: 2.5vh !important;
+  }
+
+  p {
+    font-size: 1.05vh !important;
+  line-height: 2.5vh !important;
+  }
+
+  .content a {
+    font-size: 1.45vh !important;
+    margin: 0 !important;
+    width: 15vw !important;
+    height: 3.5vh !important;
+    border: .25vw solid #000;
+  }
+}
+
+
+@media (min-height: 1020px) and (max-width: 768px) {
+  p {
+    font-size: 1.25vh !important;
+  }
+
+  a {
+    margin-top: 0 !important;
+  }
 }
 
 @media (min-height: 1000px) {
@@ -177,6 +267,39 @@ input:hover ~ .close  {
   max-width: inherit;
 }
 
+@media (min-width: 768px) {
+  input:hover ~ .close  {
+    animation: shine2 3s ease-in forwards;
+  
+  }
+}
+
+@media (min-width: 1000px) {
+
+  .open {
+    max-width: 35vw;
+    top: 20vh;
+    right: 10vw;
+  }
+
+  .close {
+    top: 10vh;
+    left: 75vw;
+  }
+
+  input {
+    height: 10vh;
+    top: 10vh;
+    left: 80vw;
+  }
+
+
+}
+
+
+
+
+
 
 
 
diff --git a/templates/assets/css/nojs_net.css b/templates/assets/css/nojs_net.css
index 9df04cc..040d718 100644
--- a/templates/assets/css/nojs_net.css
+++ b/templates/assets/css/nojs_net.css
@@ -25,17 +25,17 @@ svg {
 .nodes:active, .nodes:hover {
    
     animation: svg_pulse 2s ease-in-out forwards; 
-    
 }
 
-#circle_one:active {
-    opacity: 100% !important;
-}
+
+
+
 
  @keyframes svg_pulse {
     0% {
        transform: scale(1);
        stroke: #8693AB;
+       fill-opacity: 100%;
     }
 
     20% {
@@ -54,6 +54,7 @@ svg {
     100% {
         transform: scale(1);
         stroke: #8693AB;
+        fill-opacity: 100%;
     }
 }
 
@@ -78,6 +79,16 @@ svg {
   
 }
 
+.group_1:hover > #edge_11 {
+    animation: glowing 2s ease-in forwards;
+  
+}
+
+.group_1:active > #edge_11 {
+    animation: glowing 2s ease-in forwards;
+  
+}
+
 
 .group_2:hover > #edge_3 {
     animation: glowing 2s ease-in forwards;
@@ -129,6 +140,18 @@ svg {
     animation: glowing 2s ease-in forwards;
 }
 
+
+.group_3:hover > #edge_10 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_3:active > #edge_10 {
+    animation: glowing 2s ease-in forwards;
+}
+
+
+
+
 .group_4:hover > #edge_9 {
     animation: glowing 2s ease-in forwards;
 }
@@ -162,14 +185,62 @@ svg {
   }
 
 
+
+@media (min-width: 0 ) {
+    #tablet {
+        display: none;
+    }
+}
+
+
 @media (min-width: 768px) {
     svg {
-        max-height: 100vh;
-        max-width: 65vw;
-      
+        max-height: 70vh;
+        width: 100vw;
+    }
+
+    #mobile {
+        display: none;
+    }
+
+    #tablet {
+        display: block;
+    }
+}
+
+
+@media (min-width: 768px) {
+    svg {
+        max-height: 70vh;
+        width: 100vw;
     }
 }
 
+
+@media (min-width: 1000px) {
+    svg {
+        max-height: 77.5vh;
+        width: 50vw;
+        margin-left: 10vw;
+    }
+
+}
+
+
+@media (min-height: 1070px) {
+    svg {
+        max-height: 64vh;
+    }
+}
+
+@media (min-height: 840px) and (max-width: 768px)  {
+    svg {
+        max-height: 70vh;
+        top: 15vh;
+    }
+}
+
+
  
     
 
diff --git a/templates/index.html b/templates/index.html
index 6b6b2db..599666e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -98,7 +98,104 @@
 
 </div>
 
-<!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->
+
+<!--Tablet & Desktop -->
+<div id="tablet">
+    <svg id="a" width="768" height="1024" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+        <defs>
+            <pattern id="tekla" height="100%" width="100%">
+                <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="rootwork" height="100%" width="100%">
+                <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="cyberb" height="100%" width="100%">
+                <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="kaosk" height="100%" width="100%">
+                <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="hempium" height="100%" width="100%">
+                <image href="/assets/img/hemp.webp" width="30" height="45"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="machinalala" height="100%" width="100%">
+                <image href="/assets/img/boat_construction.webp" width="26" height="31"></image>
+            </pattern>  
+        </defs>
+
+        <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
+        <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
+        
+        <g class="group_1">
+            <path id="edge_1" class="edges" d="m-10 20 l90 15 " stroke-width="2.6458"/>
+            <path id="edge_2" class="edges" d="m-10 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
+            <path id="edge_11" class="edges" d="m-5 30 l80 55"/>
+            <a href="/robot">
+                <ellipse id="circle_one" class="nodes" cx="0" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#tekla)" fill-opacity="1"/>
+            </a>
+        </g>
+        
+        <g class="group_2">
+        <path id="edge_3" class="edges" d="m-10 70 l80 -30" stroke-width="2.6458"/>
+        <path id="edge_6" class="edges" d="m75 40 l -60 65" stroke-width=".52917"/>
+        <path id="edge_4" class="edges" d="m70 85 l5 -50" stroke-width="3.4396"/>
+        <path id="edge_5" class="edges" d="m90 100 l -10 -60" stroke-width=".48836px"/>
+        <a href="/app">
+            <circle id="circle_2" class="nodes" cx="80" cy="35" r="13" style="paint-order:fill stroke markers" fill="url(#rootwork)"/>
+        </a>
+        </g>
+
+        <g class="group_3">
+            <path id="edge_10" class="edges" d="m20 95.5 l-35 -25"/>
+            <path id="edge_7" class="edges" d="m1 75 l70 3" stroke-width=".52917"/>
+            <path id="edge_8" class="edges" d="m-1 77.5 l90 30"/>
+           
+            
+            <a href="/virtual">
+                <circle id="circle_3" class="nodes" cx="-10" cy="70" r="13" style="paint-order: fill stroke markers" fill="url(#cyberb)"/>
+            </a>
+        </g>
+
+        <g class="group_4">
+            <path id="edge_9" class="edges" d="m75 87.5 l10 10"/>
+            <circle id="circle_4" class="nodes" cx="70" cy="80" r="12" style="paint-order: fill stroke markers" fill="url(#kaosk)"/>
+        </g>
+
+        <g class="group_5">
+        
+            <a id="link_1" href="/spider" style="paint-order: fill stroke markers">
+                <circle id="circle_5" class="nodes" cx="20.734" cy="102.5" r="12.5" style="paint-order: fill stroke markers" fill="url(#hempium)"/>
+            </a>
+        </g>
+
+        <circle id="circle_6" class="nodes" cx="90" cy="105" r="12" style="paint-order: fill stroke markers" fill="url(#machinalala)"/>
+    </g>
+
+    <g fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".12003">
+    </g>
+    </g>
+    </svg>
+
+{% block child %} {% endblock %}
+
+</div>
+
 
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/tekla.html b/templates/tekla.html
index f1df695..b5bbc70 100644
--- a/templates/tekla.html
+++ b/templates/tekla.html
@@ -17,13 +17,14 @@
                         <stop offset="95%" stop-color="#8693AB" />
                     </linearGradient>
                 </defs>
+
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
             </svg>
         </form>
     <div class="open">
         {# Test - add language handling#}
-        <div class="box">
-        </div>
+        <!-- <div class="box">
+        </div> -->
         <div class="content">
             <h2>Tekla</h2>
             <h3>Automatic Biodynamic Gardening for Everyone</h3>