diff --git a/src/components/node/ImageSwitcher/index.tsx b/src/components/node/ImageSwitcher/index.tsx
new file mode 100644
index 00000000..16e76edf
--- /dev/null
+++ b/src/components/node/ImageSwitcher/index.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+
+const ImageSwitcher: FC<{}> = () => (
+
+);
+
+export { ImageSwitcher };
diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss
new file mode 100644
index 00000000..c997a5ff
--- /dev/null
+++ b/src/components/node/ImageSwitcher/styles.scss
@@ -0,0 +1,42 @@
+.wrap {
+ width: 100%;
+ height: 0;
+ position: relative;
+}
+
+.switcher {
+ position: absolute;
+ background: transparentize(black, 0.5);
+ display: flex;
+ right: $gap;
+ top: $gap;
+ border-radius: 24px;
+ padding: 0 3px;
+ flex-wrap: wrap;
+
+ & > div {
+ width: 30px;
+ height: 30px;
+ box-sizing: border-box;
+ opacity: .3;
+ cursor: pointer;
+ transition: opacity 0.25s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ &::after {
+ content: ' ';
+ display: block;
+ width: 14px;
+ height: 14px;
+ // background: white;
+ border-radius: 8px;
+ box-shadow: inset white 0 0 0 2px;
+ }
+ }
+}
diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx
index 1495db06..308fd984 100644
--- a/src/containers/examples/ImageExample/index.tsx
+++ b/src/containers/examples/ImageExample/index.tsx
@@ -8,13 +8,15 @@ import { Comment } from '~/components/node/Comment';
import { NodePanel } from '~/components/node/NodePanel';
import { NodeRelated } from '~/components/node/NodeRelated';
import { Tags } from '~/components/node/Tags';
-import { MenuButton } from '~/components/node/MenuButton';
import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { ImageSwitcher } from "~/components/node/ImageSwitcher";
interface IProps {}
const ImageExample: FC = () => (
+
+