diff --git a/src/App.tsx b/src/App.tsx
index fd12fcd..0fa1110 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import Aoc2105 from "./includes/Aoc2105"; // New
 import Aoc2003 from "./includes/Aoc2003"; // New New
 // import Aoc2011 from "./includes/Aoc2011"; // New New New
 import Aoc1908 from "./includes/Aoc1908";
+import Aoc1818 from "./includes/Aoc1818";
 import Aoc1810 from "./includes/Aoc1810";
 // import Aoc1803 from "./includes/Aoc1803"; // New New
 import Aoc1802 from "./includes/Aoc1802";
@@ -33,6 +34,7 @@ const routes: { [key: string]: TargetRoute } = {
   2003: Aoc2003,
   // 2011: Aoc2011,
   1908: Aoc1908,
+  1818: Aoc1818,
   1810: Aoc1810,
   // 1803: Aoc1803,
   1802: Aoc1802,
diff --git a/src/includes/Aoc1810.tsx b/src/includes/Aoc1810.tsx
index fd44dcb..932e995 100644
--- a/src/includes/Aoc1810.tsx
+++ b/src/includes/Aoc1810.tsx
@@ -52,7 +52,7 @@ var Aoc1810 = () => {
       let offset = 100
 
       if (lox + offset > hix && loy + offset > hiy) {
-        let temp:string[] = [' --- ' + i.toString() + ' --- ']
+        let temp:string[] = ['\n --- Step no. ' + i.toString() + ' --- \n']
         // console.log(i)
 
         let r = loy - 1
@@ -102,7 +102,7 @@ var Aoc1810 = () => {
               {/* <span>Part 1: {p1 ? p1 : "(empty)"} </span> */}
               {/* <span>Part 2: {p2 ? p2 : "(empty)"} </span> */}
               <div className='res-field-1810-image'>
-                {images ? images.map(line => line.join('\n')).join('\n\n') : "No data available."}
+                {images ? images.map(line => line.join('\n')).join('\n') : "No data available."}
               </div>
             </div>
           </div>
diff --git a/src/includes/Aoc1818.tsx b/src/includes/Aoc1818.tsx
new file mode 100644
index 0000000..8181ce0
--- /dev/null
+++ b/src/includes/Aoc1818.tsx
@@ -0,0 +1,164 @@
+import { useState, useEffect } from "react"
+import {
+  FetchData,
+  // LenNStrsFromLine,
+  // Deepcopy2DArray,
+} from "../helpers/Helpers"
+
+const suffixes = ['in', 'alt']
+const choice = suffixes[Math.floor(Math.random() * suffixes.length)]
+const URL:string = "https://raw.githubusercontent.com/nuoxoxo/in/main/aoc/1818." + choice
+
+var Aoc1818 = () => {
+  const [lines, setLines] = useState<string[]>([])
+  const [p1, p1setter] = useState<number>(0)
+  const [p2, p2setter] = useState<number>(0)
+  const [image, setImage] = useState<string[][]>([])
+
+  const handleData = async () => {
+
+    try {
+      const raws = await FetchData(URL)
+      setLines(raws)
+    } catch (error: any) {
+      console.error("Error fetching data: ", error)
+    }
+  }
+
+  const Solver = (limit: number, lines: string[]): [number, string[][]] => {
+
+    if (lines === undefined || lines[0] === undefined)
+      return []
+    let res:number = 0
+    let g:string[][] = []
+    for (let line of lines) {
+        let temp:string[] = []
+        for (let c of line) {
+            temp.push(c)
+        }
+        g.push(temp)
+    }
+    let R:number = g.length
+    let C:number = g[0].length
+    let D:Record<string, number> = {}
+
+    let ll = -1
+    let r, c
+    while (++ll < limit) {
+        // console.log(ll)
+        let temp:string[][] = []
+        r = -1
+        while (++r < R) {
+            let tmp:string[] = []
+            c = -1
+            while (++c < C) {
+                tmp.push(' ')
+            }
+            temp.push(tmp)
+        }
+        r = -1
+        while (++r < R) {
+            c = -1
+            while (++c < C) {
+                let [T, L] = [0, 0]
+                let dr = -2
+                while (++dr < 2) {
+                    let dc = -2
+                    while (++dc < 2) {
+                        if (dr === 0 && dc === 0)
+                            continue
+                        let rr = r + dr
+                        let cc = c + dc
+                        if (rr < 0 || rr > R - 1 || cc < 0 || cc > C - 1)
+                            continue
+                        if (g[rr][cc] === '|') {
+                            ++T
+                        } else if (g[rr][cc] === '#') {
+                            ++L
+                        }
+                    }
+                }
+                if (g[r][c] === '.') {
+                    temp[r][c] = T > 2 ? '|' : '.'
+                } else if (g[r][c] === '|') {
+                    temp[r][c] = L < 3 ? '|' : '#'
+                } else {
+                    temp[r][c] = T > 0 && L > 0 ? '#' : '.'
+                }
+            }
+        }
+        r = -1
+        while (++r < R)
+            g[r] = [...temp[r]]
+        let key:string = g.map(line => line.join('')).join('')
+        if (D.hasOwnProperty(key)) {
+            ll += Math.floor((limit - ll) / (ll - D[key])) * (ll - D[key])
+            if (ll > limit -1)
+                break
+        } else {
+            D[key] = ll
+        }
+        let [T, L] = [0, 0]
+        r = -1
+        while (++r < R) {
+            c = -1
+            while (++c < C) {
+                if (g[r][c] === '|') {
+                    ++T
+                } else if (g[r][c] === '#') {
+                    ++L
+                }
+            }
+        }
+        // res = `iteration no. ${ll}, lumbers: ${L}, trees: ${T}, res: ${L * T}`
+        res = L * T
+    }
+    return [ res, g ]
+  }
+
+  const Setter = () => {
+    let res1 = Solver(10, lines)
+    p1setter(res1[0])
+    setImage(res1[1])
+    let res2 = Solver(Math.floor(1e9), lines)
+    p2setter(res2[0])
+    setImage(res2[1])
+  }
+
+  useEffect(() => {
+    handleData()
+  }, [])
+
+  useEffect(() => {
+    Setter()
+  }, [lines])
+
+  return (
+    <>
+      {lines ? (
+        <>
+
+          <div className="playground">
+            <div className="field res-field">
+              <span>--- 1818 Day 18: Settlers of The North Pole ---</span>
+              <span>Part 1: {p1 ? p1 : "(empty)"} </span>
+              <span>Part 2: {p2 ? p2 : "(empty)"} </span>
+              <div className="field data-field data-field-1818">
+                { image ? image.join("\n") : "No data available." }
+              </div>
+            </div>
+          </div>
+
+          <div className="field data-field data-field-1818">
+            { lines ? lines.join("\n") : "No data available." }
+          </div>
+
+        </>
+      ) : (
+        <p>Loading data...</p>
+      )}
+    </>
+  )
+}
+
+export default Aoc1818
diff --git a/src/includes/Aoc2212.tsx b/src/includes/Aoc2212.tsx
index 49499fe..495e358 100644
--- a/src/includes/Aoc2212.tsx
+++ b/src/includes/Aoc2212.tsx
@@ -13,11 +13,10 @@ const denseSymbol = 'x'//symbolArr[Math.floor(Math.random() * symbolArr.length)]
 const density:number = 170
 
 var Aoc2212 = () => {
-  const [lines, setLines] = useState<string[]>([])
 
+  const [lines, setLines] = useState<string[]>([])
   const [p1, setP1] = useState<number>(0)
   const [p1Grid, setP1Grid] = useState<string[]>([])
-
   const [p2, setP2] = useState<number>(0)
   const [p2Grid, setP2Grid] = useState<string[]>([])
   const [P2Path, setP2Path] = useState<string[]>([])
@@ -242,7 +241,7 @@ var Aoc2212 = () => {
       {lines ? (
         <>
         {/* <div className='playground playground-2212'> */}
-          <div className="field res-field">
+          <div className="field res-field res-field-2212">
             <span>--- 2022 Day 12: Hill Climbing Algorithm ---</span>
             <span>Part 1: {p1}</span>
             <span>Part 2: {p2}</span>
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 2709a2b..11ad464 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -227,6 +227,8 @@ body {
 
 .playground-2212 {
   flex-direction: column;
+  color:$CREAM-YELLO;
+  @include animation-rainbow-rotate;
 }
 .playground-2212-alt {
   flex-direction: column;
@@ -254,8 +256,14 @@ body {
   flex-direction: column;
 }
 
-.res-field-2210-result {
-  font-size: $TextSize-05;
+/*
+.res-field-2212 {
+  justify-content: center;
+  align-items: center;
+}
+*/
+
+.res-field-2210 {
   display: flex;
   flex-direction: column;
 }