diff --git a/client/layouts/button-with-icon/Cover.jsx b/client/layouts/button-with-icon/Cover.jsx
index 93ae6bd..84853c6 100644
--- a/client/layouts/button-with-icon/Cover.jsx
+++ b/client/layouts/button-with-icon/Cover.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Dot from '../../placeholders/Dot';
+import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -9,7 +9,7 @@ const Cover = () => {
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
                 <div className="w-100 h2 flex flex-row items-center ba b--black-30 br2 ph1">
-                    <div className="mr1"><Dot /></div>
+                    <div className="mr1"><Circle /></div>
                     <Rectangle />
                 </div>
             </div>
diff --git a/client/layouts/button-with-icon/Details.jsx b/client/layouts/button-with-icon/Details.jsx
index 60312ff..56951f0 100644
--- a/client/layouts/button-with-icon/Details.jsx
+++ b/client/layouts/button-with-icon/Details.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import DetailsLayout from '../../DetailsLayout';
-import Dot from '../../placeholders/Dot';
 import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
 import useDocumentTitle from '../../useDocumentTitle';
@@ -18,7 +18,7 @@ const Details = () => {
                     <div className="h-100 flex flex-column items-center justify-center">
                         <div className="w5">
                             <button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
-                                <div className="mr2"><Dot size={32} /></div>
+                                <div className="mr2"><Circle size={32} /></div>
                                 <Rectangle />
                             </button>
                         </div>
diff --git a/client/layouts/centering/Cover.jsx b/client/layouts/centering/Cover.jsx
index f1e218a..528259b 100644
--- a/client/layouts/centering/Cover.jsx
+++ b/client/layouts/centering/Cover.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Dot from '../../placeholders/Dot';
+import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
@@ -8,7 +8,7 @@ const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
-                <Dot />
+                <Circle />
                 <div className="w-50 mv1">
                     <Line />
                 </div>
diff --git a/client/layouts/centering/Details.jsx b/client/layouts/centering/Details.jsx
index a62a134..05e55d5 100644
--- a/client/layouts/centering/Details.jsx
+++ b/client/layouts/centering/Details.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import Dot from '../../placeholders/Dot';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
 import useDocumentTitle from '../../useDocumentTitle';
@@ -16,7 +16,7 @@ const Details = () => {
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">
-                        <Dot size={64} />
+                        <Circle size={64} />
                         <div className="w-40 mt3"><Rectangle /></div>
                         <div className="w-30 mt2"><Rectangle /></div>
                         <div className="w-20 mt2"><Rectangle /></div>
diff --git a/client/layouts/split-screen/Cover.jsx b/client/layouts/split-screen/Cover.jsx
index 1bb95fd..d31076e 100644
--- a/client/layouts/split-screen/Cover.jsx
+++ b/client/layouts/split-screen/Cover.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Dot from '../../placeholders/Dot';
+import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
@@ -9,7 +9,7 @@ const Cover = () => {
         <Frame>
             <div className="h-100 flex">
                 <div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
-                    <div className="mb1"><Dot /></div>
+                    <div className="mb1"><Circle /></div>
                 </div>
                 <div className="flex flex-column justify-center" style={{ flex: 1 }}>
                     <div className="pa2">
diff --git a/client/layouts/split-screen/Details.jsx b/client/layouts/split-screen/Details.jsx
index eeae275..2f445d9 100644
--- a/client/layouts/split-screen/Details.jsx
+++ b/client/layouts/split-screen/Details.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
-import Dot from '../../placeholders/Dot';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
 import useDocumentTitle from '../../useDocumentTitle';
@@ -18,7 +18,7 @@ const Details = () => {
                 content={
                     <div className="h-100 flex">
                         <div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
-                            <div className="mb3"><Dot size={128} /></div>
+                            <div className="mb3"><Circle size={128} /></div>
                             <div className="w-60"><Rectangle /></div>
                         </div>
                         <div className="flex flex-column justify-center" style={{ flex: 1 }}>
diff --git a/client/placeholders/Dot.jsx b/client/placeholders/Circle.jsx
similarity index 79%
rename from client/placeholders/Dot.jsx
rename to client/placeholders/Circle.jsx
index 7267be8..df64689 100644
--- a/client/placeholders/Dot.jsx
+++ b/client/placeholders/Circle.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Dot = ({ size = 16 }) => {
+const Circle = ({ size = 16 }) => {
     return (
         <div
             className="bg-black-30 br-pill"
@@ -12,4 +12,4 @@ const Dot = ({ size = 16 }) => {
     );
 };
 
-export default Dot;
+export default Circle;