diff --git a/Components/Card.js b/Components/Card.js
index bab6153..4043894 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -2,15 +2,25 @@
 import Styles from '../styles/Components/card.module.css';
 import react from 'react'
 import { withRouter } from "next/router";
+import handleViewport from 'react-in-viewport';
 
 class Card extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            shown: false
+        }
+    }
+
+    animateIn() {
+        setTimeout(() => {
+            this.setState({shown: true});
+        }, this.props.delay * 200);
     }
 
     render() {
         return (
-            <div className={Styles.card} style={{
+            <div className={Styles.card + " " + (this.state.shown ? Styles.shown : null)} style={{
                 margin: "0"
             }} onClick={this.props.url ? () => { this.props.router.push(this.props.url)} : null}>
                 <div className={Styles.backgroundGradient} style={{
@@ -43,16 +53,46 @@
     }
 }
 
-class CardRow extends Component {
+class CardRowClass extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            shown: false
+        }
+    }
+
+    animate() {
+        const { inViewport } = this.props;
+        console.log(inViewport)
+        if (inViewport) {
+            this.setState({shown: true});
+            react.Children.toArray(
+                react.Children.toArray(this.props.children)[0]
+                .props.children).forEach((item) => {
+                    item.ref.current.animateIn();
+                }
+            );
+        }
     }
 
     render() {
+        if (!this.state.shown) this.animate()
+        else console.log("not animating")
         return (
             <div className={Styles.container}>
                 {
                     react.Children.toArray(this.props.children).map((item, index) => {
+                        item = <Card
+                            delay={index}
+                            title={item.props.title}
+                            subtext={item.props.subtext}
+                            wave={item.props.wave}
+                            gradient={item.props.gradient}
+                            icon={item.props.icon}
+                            buttons={item.props.buttons}
+                            buttonText={item.props.buttonText}
+                            url={item.props.url}
+                        />
                         return <div className={Styles.item} key={index}>{item}</div>
                     })
                 }
@@ -62,5 +102,6 @@
 }
 
 Card = withRouter(Card);
+const CardRow = handleViewport(CardRowClass, { rootMargin: '-1.0px' });
 
 export { Card, CardRow };
diff --git a/Components/ClicksForms/Question.js b/Components/ClicksForms/Question.js
index 25deeab..929622d 100644
--- a/Components/ClicksForms/Question.js
+++ b/Components/ClicksForms/Question.js
@@ -6,7 +6,7 @@
         super(props)
         this.state = {
             status: null,
-            answer: this.props.type == "multichoice" ? [] : null,
+            answer: this.props.type === "multichoice" ? [] : null,
             errorString: null,
         }
     }
@@ -71,7 +71,7 @@
                 }
                 break
             case 'multichoice':
-                if ( typeof answer != 'object' ) {
+                if ( typeof answer !== 'object' ) {
                     valid = null
                 } else if ( !answer.length ) {
                     valid = null
@@ -87,7 +87,7 @@
                 }
                 break
             case 'fileupload', 'date', 'time':
-                valid = answer != null ? true : null
+                valid = answer !== null ? true : null
                 break
         }
         this.setState({
@@ -98,7 +98,7 @@
     }
 
     render() {
-        let borderColor = this.state.status == false ? this.getCol("red") : this.getCol("default");
+        let borderColor = this.state.status === false ? this.getCol("red") : this.getCol("default");
         return (
             <div className={Styles.questionContainer} style={{
                 boxShadow: `0px 0px 10px ${borderColor}`,
diff --git a/Components/Header.js b/Components/Header.js
index 7e96ba6..ff46351 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -32,7 +32,7 @@
     function confetti() {
         if (!isAnimating && !isDisappointmentAnimating && props.index) {
             setClickTotal(clickTotal + 1);
-            if (clickTotal > 0 && Math.floor(Math.random() * 3) == 0) {
+            if (clickTotal > 0 && Math.floor(Math.random() * 3) === 0) {
                 disappointment();
             } else {
                 reward();
diff --git a/Components/Panels.js b/Components/Panels.js
index c6ae2f6..7aaa658 100644
--- a/Components/Panels.js
+++ b/Components/Panels.js
@@ -37,17 +37,17 @@
 
     calculateValidity() {
         this.children.map((item, index) => {
-            if ( index > 0 && item.props.halfSize && this.validity[index - 1] == 'half1' ) {
+            if ( index > 0 && item.props.halfSize && this.validity[index - 1] === 'half1' ) {
                 this.validity[index] = 'half2';
-            } else if ( index > 0 && !item.props.halfSize && this.validity[index - 1] == 'half1' ) {
+            } else if ( index > 0 && !item.props.halfSize && this.validity[index - 1] === 'half1' ) {
                 this.validity[index] = 'full';
                 this.validity[index - 1] = 'full';
-            } else if ( item.props.halfSize && !(index == this.props.children.length - 1) ) {
+            } else if ( item.props.halfSize && !(index === this.props.children.length - 1) ) {
                 this.validity[index] = 'half1';
-            } else if ( index == this.props.children.length - 1 && this.validity[index - 1] == 'half1' ) {
+            } else if ( index === this.props.children.length - 1 && this.validity[index - 1] === 'half1' ) {
                 this.validity[index] = 'full';
                 this.validity[index - 1] = 'full';
-            } else if ( index == this.props.children.length - 1 && this.validity[index - 1] == 'half2' ) {
+            } else if ( index === this.props.children.length - 1 && this.validity[index - 1] === 'half2' ) {
                 this.validity[index] = 'full';
             } else {
                 this.validity[index] = 'full';
@@ -60,9 +60,9 @@
             <div className={Styles.container}>
                 {
                     this.children.map((item, index) => {
-                        if ( this.validity[index] == 'full' ) {
+                        if ( this.validity[index] === 'full' ) {
                             return this.children[index]
-                        } else if ( this.validity[index] == 'half1' ) {
+                        } else if ( this.validity[index] === 'half1' ) {
                             return <div key={index} className={Styles.doublePanel}>
                                 {this.children[index]}
                                 {this.children[index + 1]}
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 616c14a..8001481 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -19,7 +19,7 @@
                 setColorMode(colorMode === 'light' ? 'dark' : 'light');
             }} href="#">
                 <img className={Styles.icon} alt="Theme" src={"https://assets.clicks.codes/web/icons/" + (
-                    colorMode == 'light' ? "light-white" : "dark"
+                    colorMode === 'light' ? "light-white" : "dark"
                 ) + ".svg"} />
             </a>
         </>