diff --git a/background.webm b/background.webm
new file mode 100644
index 0000000..eeef25e
Binary files /dev/null and b/background.webm differ
diff --git a/index.html b/index.html
index d7d72c9..4669f4a 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,8 @@
   </head>
   <body>
     <!--HORS VUE-->
+    <canvas id="canvas"></canvas>
+    <video autoplay muted loop src="./background.webm" id="background"></video>
     <div id="mainContainer">
       <div class="uiStyle" id="topBar">
         <div class="left">
diff --git a/src/App.vue b/src/App.vue
index 8bad7d2..8e4dedb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,6 +60,9 @@
 
 <script>
   import { dataStorage } from './dataExchange.js'
+
+  import { cuteAndCyber } from './artAndTexture.js'
+
   export default {
     name : 'App',
     computed: {
@@ -92,6 +95,7 @@
       }
     },
     mounted(){
+      cuteAndCyber();
       console.log("Vue root app is fully loaded!");
     }
   };
diff --git a/src/artAndTexture.js b/src/artAndTexture.js
new file mode 100644
index 0000000..baec584
--- /dev/null
+++ b/src/artAndTexture.js
@@ -0,0 +1,147 @@
+import { lolState } from './lolStatus.js'
+
+const arr = []
+for (let i = 0; i < 256; i++){
+  arr.push(i)
+}
+
+function createPermTable(){
+  let data = [...arr]
+  //console.log('base :', arr)
+  for (let i = data.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [data[i], data[j]] = [data[j], data[i]];
+  }
+  //console.log('result :', permutationTable)
+    return data
+}
+
+const perm = createPermTable();
+const p = [...perm, ...perm];
+
+const F2 = 0.5 * (Math.sqrt(3) - 1); // Skew factor for 2D
+const G2 = (3 - Math.sqrt(3)) / 6;   // Unskew factor for 2D
+const scale = 0.7
+
+const target = document.querySelector('#canvas');
+
+const ctx = target.getContext('2d');
+
+// 12 gradient vectors for 2D Simplex Noise
+const grad3 = [
+  [1, 1], [-1, 1], [1, -1], [-1, -1],
+  [1, 0], [-1, 0], [0, 1], [0, -1],
+  [1, 2], [-1, 2], [2, 1], [-2, 1]
+];
+
+function simplex(x, y) {
+  // Step 1: Skew input coordinates to simplex grid
+  const s = (x + y) * F2; // Skew factor
+  const i = Math.floor(x + s); // Simplex grid i
+  const j = Math.floor(y + s); // Simplex grid j
+
+  // Step 2: Unskew to get (x0, y0) in Cartesian space (distance to (i,j))
+  const t = (i + j) * G2;
+  const x0 = x - (i - t); // Unskewed x in [0,1)
+  const y0 = y - (j - t); // Unskewed y in [0,1)
+
+  // Step 3: Determine which simplex (triangle) the point is in
+  let i1, j1; // Offsets for the other two simplex vertices
+  if (x0 > y0) {
+    i1 = 1; j1 = 0; // Lower triangle (x0 > y0)
+  } else {
+    i1 = 0; j1 = 1; // Upper triangle (x0 ≤ y0)
+  }
+
+  // Step 4: Coordinates of the other two simplex vertices
+  const x1 = x0 - i1 + G2; // Distance to (i+i1, j+j1)
+  const y1 = y0 - j1 + G2;
+  const x2 = x0 - 1 + 2 * G2; // Distance to (i+1, j+1)
+  const y2 = y0 - 1 + 2 * G2;
+
+  // Step 5: Hash indices for the 3 simplex vertices
+  const ii = i & 255;
+  const jj = j & 255;
+  const gi0 = p[ii + p[jj]] % 12;    // (i,j) gradient index
+  const gi1 = p[ii + i1 + p[jj + j1]] % 12; // (i+i1,j+j1) gradient index
+  const gi2 = p[ii + 1 + p[jj + 1]] % 12;  // (i+1,j+1) gradient index
+
+  // Step 6: Compute contributions from each vertex
+  let t0 = 0.5 - x0 * x0 - y0 * y0; // Falloff (t^4 fade)
+  const n0 = t0 < 0 ? 0 : Math.pow(t0, 4) * (grad3[gi0][0] * x0 + grad3[gi0][1] * y0);
+
+  let t1 = 0.5 - x1 * x1 - y1 * y1;
+  const n1 = t1 < 0 ? 0 : Math.pow(t1, 4) * (grad3[gi1][0] * x1 + grad3[gi1][1] * y1);
+
+  let t2 = 0.5 - x2 * x2 - y2 * y2;
+  const n2 = t2 < 0 ? 0 : Math.pow(t2, 4) * (grad3[gi2][0] * x2 + grad3[gi2][1] * y2);
+
+  // Step 7: Sum contributions and normalize (2D Simplex ranges ~[-1, 1])
+  return 70 * (n0 + n1 + n2); // 70 scales to ~[-1, 1]
+}
+
+function analogLikeNoise(){
+  let tH = target.height;
+  let tW = target.width;
+  //console.log('window dimensions :', tH, tW)
+  const img = ctx.createImageData(tW, tH);
+  let offset = 0;
+  let index = 0;
+  let brightness = 0;
+
+  for(let x = 0; x<tW; x++){
+    const sx = x * scale + offset
+    for(let y = 0; y<tH; y++){
+      let lum = Math.random()*200
+
+      //img.data[index++] = lum;
+      index++
+      img.data[index++] = lum;
+      img.data[index++] = lum;
+      img.data[index++] = 255;
+      }
+    }
+  ctx.putImageData(img, 0, 0);
+
+  offset ++;
+  if(offset>1024){
+    offset = 0;
+  }
+}
+
+let time = 0
+
+function scanlines(){
+  time += 0.05;
+  let tH = target.height;
+  let tW = target.width;
+  //console.log('window dimensions :', tH, tW)
+  const img = ctx.createImageData(tW, tH);
+  let index = 0;
+
+  for(let y = 0; y<tH; y++){
+    for(let x = 0; x<tW; x++){
+      let lum = (Math.sin(y*2 - time *2) * 50) +128;
+
+      //img.data[index++] = lum;
+      index++;
+      img.data[index++] = lum + Math.random()*16;
+      //img.data[index++] = lum + Math.random()*32;
+      index++
+      img.data[index++] = 255;
+      }
+    }
+  ctx.putImageData(img, 0, 0);
+}
+
+export function cuteAndCyber(){
+  if(!(lolState.isOpen)){
+    document.querySelector('#background').style.visibility = 'hidden';
+    analogLikeNoise();
+    requestAnimationFrame(cuteAndCyber);
+  }else{
+    scanlines();
+    document.querySelector('#background').style.visibility = 'visible';
+    requestAnimationFrame(cuteAndCyber);
+  }
+}
diff --git a/src/style.css b/src/style.css
index 0478f4b..5c11cd0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -138,6 +138,34 @@ html, body{
   scrollbar-color: var(--back-color) var(--main-color);
   scrollbar-width: thin;
   z-index: -33;
+
+}
+
+#canvas{
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  z-index: -2;
+  opacity: .25;
+}
+
+#background{
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: auto;
+  height: 200%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 1;
+  visibility: hidden;
+  filter: contrast(200%) saturate(333%) grayscale();
+  transform: rotate(180deg);
+  mix-blend-mode: difference;
 }
 
 #mainContainer{
@@ -169,6 +197,7 @@ html, body{
 .textBtnStyle:hover{
   background-color: var(--main-color);
   color: var(--back-color);
+  font-weight: bold;
 }
 
 .iconBtnStyle{
@@ -457,6 +486,7 @@ html, body{
           line-height: 1em;
           text-transform: uppercase;
           padding-left: 13.12px;
+          mix-blend-mode: exclusion;
 
           #hackerLogo{
             width: 77px;
@@ -650,7 +680,7 @@ html, body{
         #aboutText{
           width: 60%;
           height: auto;
-          padding-left: 4.44px;
+          padding-left: 13.12px;
           padding-right: 13.12px;
           padding-bottom: 13.12px;
           overflow-y: scroll;
@@ -660,6 +690,7 @@ html, body{
           }
           @media(min-width: 1300px){
             height: 50vh;
+            padding-left: 33px;
           }
 
                 p{
