diff --git a/exercise/SvgLinePractice/SvgLine.tsx b/exercise/SvgLinePractice/SvgLine.tsx
deleted file mode 100644
index 9d25d012..00000000
--- a/exercise/SvgLinePractice/SvgLine.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const SvgLine = () => {
-  return (
-    <svg width={500} height={300}>
-      <text x="50" y="50" fill="black">
-        Draw a line here!
-      </text>
-    </svg>
-  );
-};
diff --git a/exercise/SvgRectanglePractice/SvgRectangle.tsx b/exercise/SvgMultipleCirclesPractice/SvgMultipleCircles.tsx
similarity index 55%
rename from exercise/SvgRectanglePractice/SvgRectangle.tsx
rename to exercise/SvgMultipleCirclesPractice/SvgMultipleCircles.tsx
index b8aaeda5..6fa5d3fe 100644
--- a/exercise/SvgRectanglePractice/SvgRectangle.tsx
+++ b/exercise/SvgMultipleCirclesPractice/SvgMultipleCircles.tsx
@@ -1,9 +1,7 @@
 export const SvgRectangle = () => {
   return (
     <svg width={500} height={300}>
-      <text x="50" y="50" fill="black">
-        Draw a rect here!
-      </text>
+      {/* Add some circles here! */}
     </svg>
   );
 };
diff --git a/exercise/SvgTextSolution/index.js b/exercise/SvgMultipleCirclesPractice/index.js
similarity index 55%
rename from exercise/SvgTextSolution/index.js
rename to exercise/SvgMultipleCirclesPractice/index.js
index 390bb151..1ece0eb9 100644
--- a/exercise/SvgTextSolution/index.js
+++ b/exercise/SvgMultipleCirclesPractice/index.js
@@ -1,6 +1,6 @@
 // File used to render something in codesandbox only
 import ReactDOM from 'react-dom';
-import { SvgText } from './SvgText';
+import { SvgMultipleCircles } from './SvgMultipleCircles';
 
 const rootElement = document.getElementById('root');
-ReactDOM.render(<SvgText />, rootElement);
+ReactDOM.render(<SvgMultipleCircles />, rootElement);
diff --git a/exercise/SvgLinePractice/package.json b/exercise/SvgMultipleCirclesPractice/package.json
similarity index 100%
rename from exercise/SvgLinePractice/package.json
rename to exercise/SvgMultipleCirclesPractice/package.json
diff --git a/exercise/SvgMultipleCirclesSolution/SvgMultipleCircles.tsx b/exercise/SvgMultipleCirclesSolution/SvgMultipleCircles.tsx
new file mode 100644
index 00000000..deaf764e
--- /dev/null
+++ b/exercise/SvgMultipleCirclesSolution/SvgMultipleCircles.tsx
@@ -0,0 +1,11 @@
+export const SvgRectangle = () => {
+  const numbers = [...Array(10).keys()];
+
+  return (
+    <svg width={500} height={300}>
+      {numbers.map((i) => {
+        return <circle key={i} cx={50 + i * 40} cy={150} r={20} fill="blue" />;
+      })}
+    </svg>
+  );
+};
diff --git a/exercise/SvgLineSolution/index.js b/exercise/SvgMultipleCirclesSolution/index.js
similarity index 55%
rename from exercise/SvgLineSolution/index.js
rename to exercise/SvgMultipleCirclesSolution/index.js
index d5fa2b85..1ece0eb9 100644
--- a/exercise/SvgLineSolution/index.js
+++ b/exercise/SvgMultipleCirclesSolution/index.js
@@ -1,6 +1,6 @@
 // File used to render something in codesandbox only
 import ReactDOM from 'react-dom';
-import { SvgLine } from './SvgLine';
+import { SvgMultipleCircles } from './SvgMultipleCircles';
 
 const rootElement = document.getElementById('root');
-ReactDOM.render(<SvgLine />, rootElement);
+ReactDOM.render(<SvgMultipleCircles />, rootElement);
diff --git a/exercise/SvgLineSolution/package.json b/exercise/SvgMultipleCirclesSolution/package.json
similarity index 100%
rename from exercise/SvgLineSolution/package.json
rename to exercise/SvgMultipleCirclesSolution/package.json
diff --git a/exercise/SvgRectangleSolution/index.js b/exercise/SvgRectangleSolution/index.js
deleted file mode 100644
index af913339..00000000
--- a/exercise/SvgRectangleSolution/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// File used to render something in codesandbox only
-import ReactDOM from 'react-dom';
-import { SvgRectangle } from './SvgRectangle';
-
-const rootElement = document.getElementById('root');
-ReactDOM.render(<SvgRectangle />, rootElement);
diff --git a/exercise/SvgTextPractice/SvgText.tsx b/exercise/SvgTextPractice/SvgText.tsx
deleted file mode 100644
index b125e8ce..00000000
--- a/exercise/SvgTextPractice/SvgText.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const SvgText = () => {
-  return <svg width={500} height={300}></svg>;
-};
diff --git a/exercise/SvgTextSolution/package.json b/exercise/SvgTextSolution/package.json
deleted file mode 100644
index ac08117a..00000000
--- a/exercise/SvgTextSolution/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "pie-chart-basic",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "main": "index.js",
-  "dependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-scripts": "4.0.0"
-  },
-  "devDependencies": {
-    "@babel/runtime": "7.13.8",
-    "typescript": "4.1.3"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
diff --git a/pages/course/svg/main-svg-elements.tsx b/pages/course/svg/main-svg-elements.tsx
index be767837..ec4df246 100644
--- a/pages/course/svg/main-svg-elements.tsx
+++ b/pages/course/svg/main-svg-elements.tsx
@@ -6,7 +6,6 @@ import { CodeSandbox } from '@/component/CodeSandbox';
 import { CodeBlock } from '@/component/UI/CodeBlock';
 import { ExerciseAccordion } from '@/component/ExerciseAccordion';
 import Link from 'next/link';
-import { Badge } from '@/component/UI/badge';
 
 const previousURL = '/course/svg/introduction';
 const currentURL = '/course/svg/main-svg-elements';
@@ -35,12 +34,13 @@ export default function Home() {
         description={
           <>
             <p>
-              In the previous lesson we learnt what SVG is and how to draw a
+              In the previous lesson, we learned about SVG and how to draw a
               circle with it.
             </p>
             <p>
-              We'll need other shapes to make graphs: rectangle, text, segment.
-              Let's see how to make them too.
+              To create comprehensive graphs, we'll also need{' '}
+              <b>other shapes</b> such as rectangles, text, and lines. Let's
+              explore how to create these as well.
             </p>
           </>
         }
@@ -123,10 +123,14 @@ export default function Home() {
 
       <h2>Circle</h2>
       <p>
-        SVG circles are created using the <code>&lt;circle&gt;</code> element,
-        which requires the center coordinates and radius as attributes. The{' '}
-        <code>cx</code> and <code>cy</code> attributes specify the center point,
-        while the <code>r</code> attribute determines the radius of the circle.
+        We talked about them already, but remember that SVG circles are created
+        using the <code>&lt;circle&gt;</code> element, which requires the{' '}
+        <b>center coordinates</b> and <b>radius</b> as attributes.
+      </p>
+      <p>
+        The <code>cx</code> and <code>cy</code> attributes specify the center
+        point, while the <code>r</code> attribute determines the radius of the
+        circle.
       </p>
       <p>
         For example, this code will draw a red circle with a center at (50,50)
@@ -150,7 +154,8 @@ export default function Home() {
         exercises={[
           {
             title: <span>Draw 2 circles</span>,
-            description: <p>Do this and this mate</p>,
+            whyItMatters: <p>Do this and this mate</p>,
+            toDo: <p>Do this</p>,
             practiceSandbox: 'SvgCircle',
             solutionSandbox: 'SvgRectangle',
           },
@@ -181,8 +186,8 @@ export default function Home() {
                 <li>Change the circle position at each iteration</li>
               </ul>
             ),
-            practiceSandbox: 'SvgCircle',
-            solutionSandbox: 'SvgRectangle',
+            practiceSandbox: 'SvgMultipleCirclesPractice',
+            solutionSandbox: 'SvgMultipleCirclesSolution',
           },
         ]}
       />
diff --git a/exercise/SvgLineSolution/SvgLine.tsx b/viz/SvgLine/SvgLine.tsx
similarity index 100%
rename from exercise/SvgLineSolution/SvgLine.tsx
rename to viz/SvgLine/SvgLine.tsx
diff --git a/exercise/SvgLinePractice/index.js b/viz/SvgLine/index.js
similarity index 100%
rename from exercise/SvgLinePractice/index.js
rename to viz/SvgLine/index.js
diff --git a/exercise/SvgRectanglePractice/package.json b/viz/SvgLine/package.json
similarity index 100%
rename from exercise/SvgRectanglePractice/package.json
rename to viz/SvgLine/package.json
diff --git a/exercise/SvgRectangleSolution/SvgRectangle.tsx b/viz/SvgRectangle/SvgRectangle.tsx
similarity index 100%
rename from exercise/SvgRectangleSolution/SvgRectangle.tsx
rename to viz/SvgRectangle/SvgRectangle.tsx
diff --git a/exercise/SvgRectanglePractice/index.js b/viz/SvgRectangle/index.js
similarity index 100%
rename from exercise/SvgRectanglePractice/index.js
rename to viz/SvgRectangle/index.js
diff --git a/exercise/SvgRectangleSolution/package.json b/viz/SvgRectangle/package.json
similarity index 100%
rename from exercise/SvgRectangleSolution/package.json
rename to viz/SvgRectangle/package.json
diff --git a/exercise/SvgTextSolution/SvgText.tsx b/viz/SvgText/SvgText.tsx
similarity index 100%
rename from exercise/SvgTextSolution/SvgText.tsx
rename to viz/SvgText/SvgText.tsx
diff --git a/exercise/SvgTextPractice/index.js b/viz/SvgText/index.js
similarity index 100%
rename from exercise/SvgTextPractice/index.js
rename to viz/SvgText/index.js
diff --git a/exercise/SvgTextPractice/package.json b/viz/SvgText/package.json
similarity index 100%
rename from exercise/SvgTextPractice/package.json
rename to viz/SvgText/package.json