diff --git a/src/App.tsx b/src/App.tsx
index d484ff9..86e8693 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,11 +6,13 @@ import LandingSection from './sections/LandingSection';
 import './i18n';
 import ProjectsSection from './sections/ProjectsSection';
 import AboutSection from './sections/AboutSection';
+import AnimatedBg from './components/AnimatedBg';
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
       <>
+        <AnimatedBg />
         <GlobalStyles />
         <Navbar />
 
diff --git a/src/components/AnimatedBg.tsx b/src/components/AnimatedBg.tsx
new file mode 100644
index 0000000..84e166d
--- /dev/null
+++ b/src/components/AnimatedBg.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+import { StyledAnimatedBg } from './styles/AnimatedBg.styled';
+
+class AnimatedBgCanvas {
+  private canvasElement: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D | null;
+  private width = 0;
+  private height = 0;
+
+  constructor(canvasElement: HTMLCanvasElement) {
+    this.canvasElement = canvasElement;
+    this.ctx = canvasElement.getContext('2d');
+  }
+
+  clear() {
+    this.ctx!.clearRect(0, 0, this.width, this.height);
+  }
+
+  init() {
+    const canvasClientRect = this.canvasElement.getBoundingClientRect();
+
+    this.width = canvasClientRect.width;
+    this.height = canvasClientRect.height;
+
+    this.canvasElement.width = this.width;
+    this.canvasElement.height = this.height;
+  }
+
+  draw() {
+    this.clear();
+
+    this.ctx!.fillStyle = 'white';
+    this.ctx!.beginPath();
+    this.ctx!.arc(100, 100, 10, 0, Math.PI * 2);
+    this.ctx!.fill();
+  }
+}
+
+export default function AnimatedBg() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (canvasRef.current != null) {
+      const animatedCanvas = new AnimatedBgCanvas(canvasRef.current);
+
+      animatedCanvas.init();
+      animatedCanvas.draw();
+    }
+  }, []);
+
+  return <StyledAnimatedBg ref={canvasRef}></StyledAnimatedBg>;
+}
diff --git a/src/components/styles/AnimatedBg.styled.ts b/src/components/styles/AnimatedBg.styled.ts
new file mode 100644
index 0000000..f35dbae
--- /dev/null
+++ b/src/components/styles/AnimatedBg.styled.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const StyledAnimatedBg = styled.canvas`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+`;