diff --git a/src/lib/components/Tools.svelte b/src/lib/components/Tools.svelte
index eb671de..e5a7cd5 100644
--- a/src/lib/components/Tools.svelte
+++ b/src/lib/components/Tools.svelte
@@ -8,6 +8,8 @@
 		renderer: THREE.WebGLRenderer,
 		cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
 
+  const renderContainerId = 'render';
+
 	const toolsData = [
 		{ name: 'Git', info: 'Short note about Git and its usage.' },
 		{ name: 'DBeaver', info: 'Short note about DBeaver and its usage.' },
@@ -30,7 +32,10 @@
 
 		renderer = new THREE.WebGLRenderer();
 		renderer.setSize(window.innerWidth, window.innerHeight);
-		document.body.appendChild(renderer.domElement);
+		const renderContainer = document.getElementById(renderContainerId);
+		if (renderContainer) {
+			renderContainer.appendChild(renderer.domElement);
+		}
 
 		camera.position.z = 5;
 	};
@@ -87,3 +92,4 @@
 	};
 </script>
 
+<section id="render" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9e6523b..8f00eca 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 	import Navigation from '../lib/components/Navigation.svelte';
 	import Header from '$lib/components/Header.svelte';
 
-	export let routes = [
+	let routes = [
 		{ url: '/', label: 'Home' },
 		{ url: '/projects', label: 'Projects' },
 		{ url: '/tools', label: 'Tools' },
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index a842522..3d9fc8a 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -1,52 +1,6 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
-	import * as THREE from 'three';
+	import Tools from "$lib/components/Tools.svelte";
 
-	if (browser) {
-		let camera: THREE.PerspectiveCamera;
-		let scene: THREE.Scene;
-		let renderer: THREE.WebGLRenderer;
-		let cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
-
-		const renderContainerId = 'renderOne';
-
-		const init = () => {
-			scene = new THREE.Scene();
-			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-
-			renderer = new THREE.WebGLRenderer();
-			renderer.setSize(window.innerWidth, window.innerHeight);
-			const renderContainer = document.getElementById(renderContainerId);
-			if (renderContainer) {
-				renderContainer.appendChild(renderer.domElement);
-				console.log('success')
-			}
-
-			const geometry = new THREE.BoxGeometry(1, 1, 1);
-			const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
-			cube = new THREE.Mesh(geometry, material);
-			scene.add(cube);
-
-			camera.position.z = 5;
-		};
-
-		const render = () => {
-			renderer.clear();
-			renderer.render(scene, camera);
-		};
-
-		const animate = () => {
-			requestAnimationFrame(animate);
-
-			cube.rotation.x += 0.005;
-			cube.rotation.y += 0.005;
-
-			render();
-		};
-
-		init();
-		animate();
-	}
 </script>
 
 <svelte:head>
@@ -55,7 +9,7 @@
 
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">DevOps</h2>
-	<section id="renderOne"> </section>
+	<Tools />
 	<h2 class="text-3xl font-bold mb-8">MacOS</h2>
 	<h2 class="text-3xl font-bold mb-8">Other</h2>
 </main>