diff --git a/public/LeftLadder.png b/public/LeftLadder.png
deleted file mode 100644
index 49360fb7..00000000
Binary files a/public/LeftLadder.png and /dev/null differ
diff --git a/public/LeftLadder.svg b/public/LeftLadder.svg
new file mode 100644
index 00000000..50a810c3
--- /dev/null
+++ b/public/LeftLadder.svg
@@ -0,0 +1,16 @@
+<svg width="36" height="490" viewBox="0 0 36 490" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="25.8873" y="36.3733" width="9.58783" height="453.504" rx="2" fill="#C4C4C4"/>
+<rect y="0.898438" width="9.58783" height="471.721" rx="2" fill="#C4C4C4"/>
+<path d="M6.23212 38.291L27.8047 62.2606" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 150.469L27.8047 174.438" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 258.811L27.8047 282.781" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 370.989L27.8047 394.958" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 75.6836L27.8047 99.6532" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 187.861L27.8047 211.831" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 296.204L27.8047 320.174" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 408.381L27.8047 432.351" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 113.076L27.8047 137.045" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 225.254L27.8047 249.223" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 333.596L27.8047 357.566" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 445.774L27.8047 469.744" stroke="#C4C4C4" stroke-width="5"/>
+</svg>
diff --git a/public/RightLadder.png b/public/RightLadder.png
deleted file mode 100644
index 807d7bd9..00000000
Binary files a/public/RightLadder.png and /dev/null differ
diff --git a/public/RightLadder.svg b/public/RightLadder.svg
new file mode 100644
index 00000000..ba5f2a55
--- /dev/null
+++ b/public/RightLadder.svg
@@ -0,0 +1,16 @@
+<svg width="36" height="490" viewBox="0 0 36 490" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="9.58783" height="453.504" rx="2" transform="matrix(-1 0 0 1 10.1129 36.3733)" fill="#C4C4C4"/>
+<rect width="9.58783" height="471.721" rx="2" transform="matrix(-1 0 0 1 36 0.898438)" fill="#C4C4C4"/>
+<path d="M29.7678 38.291L8.19514 62.2606" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 150.469L8.19514 174.438" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 258.811L8.19514 282.781" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 370.989L8.19514 394.958" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 75.6836L8.19514 99.6532" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 187.861L8.19514 211.831" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 296.204L8.19514 320.174" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 408.381L8.19514 432.351" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 113.076L8.19514 137.045" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 225.254L8.19514 249.223" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 333.596L8.19514 357.566" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 445.774L8.19514 469.744" stroke="#C4C4C4" stroke-width="5"/>
+</svg>
diff --git a/src/pages/Demo.tsx b/src/pages/Demo.tsx
index fbab7a21..29b4914a 100644
--- a/src/pages/Demo.tsx
+++ b/src/pages/Demo.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
-import LeftLadder from '../../public/LeftLadder.png';
+import LeftLadder from '../../public/LeftLadder.svg';
 import Pipi from '../../public/Pipi.svg';
-import RightLadder from '../../public/RightLadder.png';
+import RightLadder from '../../public/RightLadder.svg';
 import AppWrapper from '../components/AppWrapper';
 import Box from '../components/Box';
 import Grid from '../components/Grid';
diff --git a/src/styles/Demo.scss b/src/styles/Demo.scss
index e90e7211..966900e1 100644
--- a/src/styles/Demo.scss
+++ b/src/styles/Demo.scss
@@ -50,6 +50,7 @@ p {
 }
 
 .wrap {
+  align-items: flex-end;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;