diff --git a/client/placeholders/Dot.jsx b/client/placeholders/Dot.jsx
new file mode 100644
index 0000000..abfb753
--- /dev/null
+++ b/client/placeholders/Dot.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Dot = () => {
+    return (
+        <div className="bg-black-30 br-pill w1 h1" />
+    );
+};
+
+export default Dot;
diff --git a/client/placeholders/Frame.jsx b/client/placeholders/Frame.jsx
new file mode 100644
index 0000000..fb1d17b
--- /dev/null
+++ b/client/placeholders/Frame.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Frame = ({ children }) => {
+    return (
+        <div
+            className="ba b--black-30 br2"
+            style={{
+                height: '100px',
+                width: '100px',
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Frame;
diff --git a/client/placeholders/Line.jsx b/client/placeholders/Line.jsx
new file mode 100644
index 0000000..7d41c57
--- /dev/null
+++ b/client/placeholders/Line.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Line = () => {
+    return (
+        <div
+            className="w-100 bg-black-30"
+            style={{ height: '1px' }}
+        />
+    );
+};
+
+export default Line;