diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000..f1d00af
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,11 @@
+{
+  "image": "node:14",
+  "containerUser": "node",
+  "extensions": [
+    "editorconfig.editorconfig",
+    "me-dutour-mathieu.vscode-github-actions"
+  ],
+  "mounts": [
+    "source=${localEnv:HOME}${localEnv:USERPROFILE}/.npmrc,target=/home/node/.npmrc,type=bind,consistency=cached"
+  ]
+}
\ No newline at end of file
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..3f999da
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,3 @@
+[*]
+indent_size = 2
+indent_style = space
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index cac0e10..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "editor.formatOnSave": true
-}
\ No newline at end of file
diff --git a/custom.d.ts b/custom.d.ts
index 8155c1b..afe6050 100644
--- a/custom.d.ts
+++ b/custom.d.ts
@@ -4,7 +4,12 @@ declare module '*.svg' {
 }
 
 declare module '*.css' {
-  const content: any;
+  const content: string;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: Record<string, string>;
   export default content;
 }
 
diff --git a/figma.d.ts b/figma.d.ts
deleted file mode 100644
index e55f9bd..0000000
--- a/figma.d.ts
+++ /dev/null
@@ -1,857 +0,0 @@
-// https://www.figma.com/plugin-docs/api/typings/
-// Figma Plugin API version 1, update 14
-
-declare global {
-  // Global variable with Figma's plugin API.
-  const figma: PluginAPI;
-  const __html__: string;
-
-  interface PluginAPI {
-    readonly apiVersion: '1.0.0';
-    readonly command: string;
-    readonly viewport: ViewportAPI;
-    closePlugin(message?: string): void;
-
-    notify(message: string, options?: NotificationOptions): NotificationHandler;
-
-    showUI(html: string, options?: ShowUIOptions): void;
-    readonly ui: UIAPI;
-
-    readonly clientStorage: ClientStorageAPI;
-
-    getNodeById(id: string): BaseNode | null;
-    getStyleById(id: string): BaseStyle | null;
-
-    readonly root: DocumentNode;
-    currentPage: PageNode;
-
-    on(type: 'selectionchange' | 'currentpagechange' | 'close', callback: () => void): void;
-    once(type: 'selectionchange' | 'currentpagechange' | 'close', callback: () => void): void;
-    off(type: 'selectionchange' | 'currentpagechange' | 'close', callback: () => void): void;
-
-    readonly mixed: unique symbol;
-
-    createRectangle(): RectangleNode;
-    createLine(): LineNode;
-    createEllipse(): EllipseNode;
-    createPolygon(): PolygonNode;
-    createStar(): StarNode;
-    createVector(): VectorNode;
-    createText(): TextNode;
-    createFrame(): FrameNode;
-    createComponent(): ComponentNode;
-    createPage(): PageNode;
-    createSlice(): SliceNode;
-    /**
-     * [DEPRECATED]: This API often fails to create a valid boolean operation. Use figma.union, figma.subtract, figma.intersect and figma.exclude instead.
-     */
-    createBooleanOperation(): BooleanOperationNode;
-
-    createPaintStyle(): PaintStyle;
-    createTextStyle(): TextStyle;
-    createEffectStyle(): EffectStyle;
-    createGridStyle(): GridStyle;
-
-    // The styles are returned in the same order as displayed in the UI. Only
-    // local styles are returned. Never styles from team library.
-    getLocalPaintStyles(): PaintStyle[];
-    getLocalTextStyles(): TextStyle[];
-    getLocalEffectStyles(): EffectStyle[];
-    getLocalGridStyles(): GridStyle[];
-
-    importComponentByKeyAsync(key: string): Promise<ComponentNode>;
-    importStyleByKeyAsync(key: string): Promise<BaseStyle>;
-
-    listAvailableFontsAsync(): Promise<Font[]>;
-    loadFontAsync(fontName: FontName): Promise<void>;
-    readonly hasMissingFont: boolean;
-
-    createNodeFromSvg(svg: string): FrameNode;
-
-    createImage(data: Uint8Array): Image;
-    getImageByHash(hash: string): Image;
-
-    group(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): GroupNode;
-    flatten(nodes: ReadonlyArray<BaseNode>, parent?: BaseNode & ChildrenMixin, index?: number): VectorNode;
-
-    union(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode;
-    subtract(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode;
-    intersect(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode;
-    exclude(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode;
-  }
-
-  interface ClientStorageAPI {
-    getAsync(key: string): Promise<any | undefined>;
-    setAsync(key: string, value: any): Promise<void>;
-  }
-
-  interface NotificationOptions {
-    timeout?: number;
-  }
-
-  interface NotificationHandler {
-    cancel: () => void;
-  }
-
-  interface ShowUIOptions {
-    visible?: boolean;
-    width?: number;
-    height?: number;
-  }
-
-  interface UIPostMessageOptions {
-    origin?: string;
-  }
-
-  interface OnMessageProperties {
-    origin: string;
-  }
-
-  type MessageEventHandler = (pluginMessage: any, props: OnMessageProperties) => void;
-
-  interface UIAPI {
-    show(): void;
-    hide(): void;
-    resize(width: number, height: number): void;
-    close(): void;
-
-    postMessage(pluginMessage: any, options?: UIPostMessageOptions): void;
-    onmessage: MessageEventHandler | undefined;
-    on(type: 'message', callback: MessageEventHandler): void;
-    once(type: 'message', callback: MessageEventHandler): void;
-    off(type: 'message', callback: MessageEventHandler): void;
-  }
-
-  interface ViewportAPI {
-    center: Vector;
-    zoom: number;
-    scrollAndZoomIntoView(nodes: ReadonlyArray<BaseNode>): void;
-    readonly bounds: Rect;
-  }
-
-  ////////////////////////////////////////////////////////////////////////////////
-  // Datatypes
-
-  type Transform = [[number, number, number], [number, number, number]];
-
-  interface Vector {
-    readonly x: number;
-    readonly y: number;
-  }
-
-  interface Rect {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-  }
-
-  interface RGB {
-    readonly r: number;
-    readonly g: number;
-    readonly b: number;
-  }
-
-  interface RGBA {
-    readonly r: number;
-    readonly g: number;
-    readonly b: number;
-    readonly a: number;
-  }
-
-  interface FontName {
-    readonly family: string;
-    readonly style: string;
-  }
-
-  type TextCase = 'ORIGINAL' | 'UPPER' | 'LOWER' | 'TITLE';
-
-  type TextDecoration = 'NONE' | 'UNDERLINE' | 'STRIKETHROUGH';
-
-  interface ArcData {
-    readonly startingAngle: number;
-    readonly endingAngle: number;
-    readonly innerRadius: number;
-  }
-
-  interface ShadowEffect {
-    readonly type: 'DROP_SHADOW' | 'INNER_SHADOW';
-    readonly color: RGBA;
-    readonly offset: Vector;
-    readonly radius: number;
-    readonly visible: boolean;
-    readonly blendMode: BlendMode;
-  }
-
-  interface BlurEffect {
-    readonly type: 'LAYER_BLUR' | 'BACKGROUND_BLUR';
-    readonly radius: number;
-    readonly visible: boolean;
-  }
-
-  type Effect = ShadowEffect | BlurEffect;
-
-  type ConstraintType = 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'SCALE';
-
-  interface Constraints {
-    readonly horizontal: ConstraintType;
-    readonly vertical: ConstraintType;
-  }
-
-  interface ColorStop {
-    readonly position: number;
-    readonly color: RGBA;
-  }
-
-  interface ImageFilters {
-    readonly exposure?: number;
-    readonly contrast?: number;
-    readonly saturation?: number;
-    readonly temperature?: number;
-    readonly tint?: number;
-    readonly highlights?: number;
-    readonly shadows?: number;
-  }
-
-  interface SolidPaint {
-    readonly type: 'SOLID';
-    readonly color: RGB;
-
-    readonly visible?: boolean;
-    readonly opacity?: number;
-    readonly blendMode?: BlendMode;
-  }
-
-  interface GradientPaint {
-    readonly type: 'GRADIENT_LINEAR' | 'GRADIENT_RADIAL' | 'GRADIENT_ANGULAR' | 'GRADIENT_DIAMOND';
-    readonly gradientTransform: Transform;
-    readonly gradientStops: ReadonlyArray<ColorStop>;
-
-    readonly visible?: boolean;
-    readonly opacity?: number;
-    readonly blendMode?: BlendMode;
-  }
-
-  interface ImagePaint {
-    readonly type: 'IMAGE';
-    readonly scaleMode: 'FILL' | 'FIT' | 'CROP' | 'TILE';
-    readonly imageHash: string | null;
-    readonly imageTransform?: Transform; // setting for "CROP"
-    readonly scalingFactor?: number; // setting for "TILE"
-    readonly filters?: ImageFilters;
-
-    readonly visible?: boolean;
-    readonly opacity?: number;
-    readonly blendMode?: BlendMode;
-  }
-
-  type Paint = SolidPaint | GradientPaint | ImagePaint;
-
-  interface Guide {
-    readonly axis: 'X' | 'Y';
-    readonly offset: number;
-  }
-
-  interface RowsColsLayoutGrid {
-    readonly pattern: 'ROWS' | 'COLUMNS';
-    readonly alignment: 'MIN' | 'MAX' | 'STRETCH' | 'CENTER';
-    readonly gutterSize: number;
-
-    readonly count: number; // Infinity when "Auto" is set in the UI
-    readonly sectionSize?: number; // Not set for alignment: "STRETCH"
-    readonly offset?: number; // Not set for alignment: "CENTER"
-
-    readonly visible?: boolean;
-    readonly color?: RGBA;
-  }
-
-  interface GridLayoutGrid {
-    readonly pattern: 'GRID';
-    readonly sectionSize: number;
-
-    readonly visible?: boolean;
-    readonly color?: RGBA;
-  }
-
-  type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid;
-
-  interface ExportSettingsConstraints {
-    readonly type: 'SCALE' | 'WIDTH' | 'HEIGHT';
-    readonly value: number;
-  }
-
-  interface ExportSettingsImage {
-    readonly format: 'JPG' | 'PNG';
-    readonly contentsOnly?: boolean; // defaults to true
-    readonly suffix?: string;
-    readonly constraint?: ExportSettingsConstraints;
-  }
-
-  interface ExportSettingsSVG {
-    readonly format: 'SVG';
-    readonly contentsOnly?: boolean; // defaults to true
-    readonly suffix?: string;
-    readonly svgOutlineText?: boolean; // defaults to true
-    readonly svgIdAttribute?: boolean; // defaults to false
-    readonly svgSimplifyStroke?: boolean; // defaults to true
-  }
-
-  interface ExportSettingsPDF {
-    readonly format: 'PDF';
-    readonly contentsOnly?: boolean; // defaults to true
-    readonly suffix?: string;
-  }
-
-  type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF;
-
-  type WindingRule = 'NONZERO' | 'EVENODD';
-
-  interface VectorVertex {
-    readonly x: number;
-    readonly y: number;
-    readonly strokeCap?: StrokeCap;
-    readonly strokeJoin?: StrokeJoin;
-    readonly cornerRadius?: number;
-    readonly handleMirroring?: HandleMirroring;
-  }
-
-  interface VectorSegment {
-    readonly start: number;
-    readonly end: number;
-    readonly tangentStart?: Vector; // Defaults to { x: 0, y: 0 }
-    readonly tangentEnd?: Vector; // Defaults to { x: 0, y: 0 }
-  }
-
-  interface VectorRegion {
-    readonly windingRule: WindingRule;
-    readonly loops: ReadonlyArray<ReadonlyArray<number>>;
-  }
-
-  interface VectorNetwork {
-    readonly vertices: ReadonlyArray<VectorVertex>;
-    readonly segments: ReadonlyArray<VectorSegment>;
-    readonly regions?: ReadonlyArray<VectorRegion>; // Defaults to []
-  }
-
-  interface VectorPath {
-    readonly windingRule: WindingRule | 'NONE';
-    readonly data: string;
-  }
-
-  type VectorPaths = ReadonlyArray<VectorPath>;
-
-  interface LetterSpacing {
-    readonly value: number;
-    readonly unit: 'PIXELS' | 'PERCENT';
-  }
-
-  type LineHeight =
-    | {
-        readonly value: number;
-        readonly unit: 'PIXELS' | 'PERCENT';
-      }
-    | {
-        readonly unit: 'AUTO';
-      };
-
-  type BlendMode =
-    | 'PASS_THROUGH'
-    | 'NORMAL'
-    | 'DARKEN'
-    | 'MULTIPLY'
-    | 'LINEAR_BURN'
-    | 'COLOR_BURN'
-    | 'LIGHTEN'
-    | 'SCREEN'
-    | 'LINEAR_DODGE'
-    | 'COLOR_DODGE'
-    | 'OVERLAY'
-    | 'SOFT_LIGHT'
-    | 'HARD_LIGHT'
-    | 'DIFFERENCE'
-    | 'EXCLUSION'
-    | 'HUE'
-    | 'SATURATION'
-    | 'COLOR'
-    | 'LUMINOSITY';
-
-  interface Font {
-    fontName: FontName;
-  }
-
-  type Reaction = {action: Action; trigger: Trigger};
-
-  type Action =
-    | {readonly type: 'BACK' | 'CLOSE'}
-    | {readonly type: 'URL'; url: string}
-    | {
-        readonly type: 'NODE';
-        readonly destinationId: string | null;
-        readonly navigation: Navigation;
-        readonly transition: Transition | null;
-        readonly preserveScrollPosition: boolean;
-
-        // Only present if navigation == "OVERLAY" and the destination uses
-        // overlay position type "RELATIVE"
-        readonly overlayRelativePosition?: Vector;
-      };
-
-  interface SimpleTransition {
-    readonly type: 'DISSOLVE' | 'SMART_ANIMATE';
-    readonly easing: Easing;
-    readonly duration: number;
-  }
-
-  interface DirectionalTransition {
-    readonly type: 'MOVE_IN' | 'MOVE_OUT' | 'PUSH' | 'SLIDE_IN' | 'SLIDE_OUT';
-    readonly direction: 'LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM';
-    readonly matchLayers: boolean;
-
-    readonly easing: Easing;
-    readonly duration: number;
-  }
-
-  type Transition = SimpleTransition | DirectionalTransition;
-
-  type Trigger =
-    | {readonly type: 'ON_CLICK' | 'ON_HOVER' | 'ON_PRESS' | 'ON_DRAG'}
-    | {readonly type: 'AFTER_TIMEOUT'; readonly timeout: number}
-    | {readonly type: 'MOUSE_ENTER' | 'MOUSE_LEAVE' | 'MOUSE_UP' | 'MOUSE_DOWN'; readonly delay: number};
-
-  type Navigation = 'NAVIGATE' | 'SWAP' | 'OVERLAY';
-
-  interface Easing {
-    readonly type: 'EASE_IN' | 'EASE_OUT' | 'EASE_IN_AND_OUT' | 'LINEAR';
-  }
-
-  type OverflowDirection = 'NONE' | 'HORIZONTAL' | 'VERTICAL' | 'BOTH';
-
-  type OverlayPositionType =
-    | 'CENTER'
-    | 'TOP_LEFT'
-    | 'TOP_CENTER'
-    | 'TOP_RIGHT'
-    | 'BOTTOM_LEFT'
-    | 'BOTTOM_CENTER'
-    | 'BOTTOM_RIGHT'
-    | 'MANUAL';
-
-  type OverlayBackground = {readonly type: 'NONE'} | {readonly type: 'SOLID_COLOR'; readonly color: RGBA};
-
-  type OverlayBackgroundInteraction = 'NONE' | 'CLOSE_ON_CLICK_OUTSIDE';
-
-  ////////////////////////////////////////////////////////////////////////////////
-  // Mixins
-
-  interface BaseNodeMixin {
-    readonly id: string;
-    readonly parent: (BaseNode & ChildrenMixin) | null;
-    name: string; // Note: setting this also sets `autoRename` to false on TextNodes
-    readonly removed: boolean;
-    toString(): string;
-    remove(): void;
-
-    getPluginData(key: string): string;
-    setPluginData(key: string, value: string): void;
-
-    // Namespace is a string that must be at least 3 alphanumeric characters, and should
-    // be a name related to your plugin. Other plugins will be able to read this data.
-    getSharedPluginData(namespace: string, key: string): string;
-    setSharedPluginData(namespace: string, key: string, value: string): void;
-    setRelaunchData(data: {[command: string]: /* description */ string}): void;
-  }
-
-  interface SceneNodeMixin {
-    visible: boolean;
-    locked: boolean;
-  }
-
-  interface ChildrenMixin {
-    readonly children: ReadonlyArray<SceneNode>;
-
-    appendChild(child: SceneNode): void;
-    insertChild(index: number, child: SceneNode): void;
-
-    findChildren(callback?: (node: SceneNode) => boolean): SceneNode[];
-    findChild(callback: (node: SceneNode) => boolean): SceneNode | null;
-
-    /**
-     * If you only need to search immediate children, it is much faster
-     * to call node.children.filter(callback) or node.findChildren(callback)
-     */
-    findAll(callback?: (node: SceneNode) => boolean): SceneNode[];
-
-    /**
-     * If you only need to search immediate children, it is much faster
-     * to call node.children.find(callback) or node.findChild(callback)
-     */
-    findOne(callback: (node: SceneNode) => boolean): SceneNode | null;
-  }
-
-  interface ConstraintMixin {
-    constraints: Constraints;
-  }
-
-  interface LayoutMixin {
-    readonly absoluteTransform: Transform;
-    relativeTransform: Transform;
-    x: number;
-    y: number;
-    rotation: number; // In degrees
-
-    readonly width: number;
-    readonly height: number;
-    constrainProportions: boolean;
-
-    layoutAlign: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH'; // applicable only inside auto-layout frames
-
-    resize(width: number, height: number): void;
-    resizeWithoutConstraints(width: number, height: number): void;
-  }
-
-  interface BlendMixin {
-    opacity: number;
-    blendMode: BlendMode;
-    isMask: boolean;
-    effects: ReadonlyArray<Effect>;
-    effectStyleId: string;
-  }
-
-  interface ContainerMixin {
-    expanded: boolean;
-    backgrounds: ReadonlyArray<Paint>; // DEPRECATED: use 'fills' instead
-    backgroundStyleId: string; // DEPRECATED: use 'fillStyleId' instead
-  }
-
-  type StrokeCap = 'NONE' | 'ROUND' | 'SQUARE' | 'ARROW_LINES' | 'ARROW_EQUILATERAL';
-  type StrokeJoin = 'MITER' | 'BEVEL' | 'ROUND';
-  type HandleMirroring = 'NONE' | 'ANGLE' | 'ANGLE_AND_LENGTH';
-
-  interface GeometryMixin {
-    fills: ReadonlyArray<Paint> | PluginAPI['mixed'];
-    strokes: ReadonlyArray<Paint>;
-    strokeWeight: number;
-    strokeMiterLimit: number;
-    strokeAlign: 'CENTER' | 'INSIDE' | 'OUTSIDE';
-    strokeCap: StrokeCap | PluginAPI['mixed'];
-    strokeJoin: StrokeJoin | PluginAPI['mixed'];
-    dashPattern: ReadonlyArray<number>;
-    fillStyleId: string | PluginAPI['mixed'];
-    strokeStyleId: string;
-    outlineStroke(): VectorNode | null;
-  }
-
-  interface CornerMixin {
-    cornerRadius: number | PluginAPI['mixed'];
-    cornerSmoothing: number;
-  }
-
-  interface RectangleCornerMixin {
-    topLeftRadius: number;
-    topRightRadius: number;
-    bottomLeftRadius: number;
-    bottomRightRadius: number;
-  }
-
-  interface ExportMixin {
-    exportSettings: ReadonlyArray<ExportSettings>;
-    exportAsync(settings?: ExportSettings): Promise<Uint8Array>; // Defaults to PNG format
-  }
-
-  interface ReactionMixin {
-    readonly reactions: ReadonlyArray<Reaction>;
-  }
-
-  interface DefaultShapeMixin
-    extends BaseNodeMixin,
-      SceneNodeMixin,
-      ReactionMixin,
-      BlendMixin,
-      GeometryMixin,
-      LayoutMixin,
-      ExportMixin {}
-
-  interface DefaultFrameMixin
-    extends BaseNodeMixin,
-      SceneNodeMixin,
-      ReactionMixin,
-      ChildrenMixin,
-      ContainerMixin,
-      GeometryMixin,
-      CornerMixin,
-      RectangleCornerMixin,
-      BlendMixin,
-      ConstraintMixin,
-      LayoutMixin,
-      ExportMixin {
-    layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
-    counterAxisSizingMode: 'FIXED' | 'AUTO'; // applicable only if layoutMode != "NONE"
-    horizontalPadding: number; // applicable only if layoutMode != "NONE"
-    verticalPadding: number; // applicable only if layoutMode != "NONE"
-    itemSpacing: number; // applicable only if layoutMode != "NONE"
-
-    layoutGrids: ReadonlyArray<LayoutGrid>;
-    gridStyleId: string;
-    clipsContent: boolean;
-    guides: ReadonlyArray<Guide>;
-
-    overflowDirection: OverflowDirection;
-    numberOfFixedChildren: number;
-
-    readonly overlayPositionType: OverlayPositionType;
-    readonly overlayBackground: OverlayBackground;
-    readonly overlayBackgroundInteraction: OverlayBackgroundInteraction;
-  }
-
-  ////////////////////////////////////////////////////////////////////////////////
-  // Nodes
-
-  interface DocumentNode extends BaseNodeMixin {
-    readonly type: 'DOCUMENT';
-
-    readonly children: ReadonlyArray<PageNode>;
-
-    appendChild(child: PageNode): void;
-    insertChild(index: number, child: PageNode): void;
-    findChildren(callback?: (node: PageNode) => boolean): Array<PageNode>;
-    findChild(callback: (node: PageNode) => boolean): PageNode | null;
-
-    /**
-     * If you only need to search immediate children, it is much faster
-     * to call node.children.filter(callback) or node.findChildren(callback)
-     */
-    findAll(callback?: (node: PageNode | SceneNode) => boolean): Array<PageNode | SceneNode>;
-
-    /**
-     * If you only need to search immediate children, it is much faster
-     * to call node.children.find(callback) or node.findChild(callback)
-     */
-    findOne(callback: (node: PageNode | SceneNode) => boolean): PageNode | SceneNode | null;
-  }
-
-  interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
-    readonly type: 'PAGE';
-    clone(): PageNode;
-
-    guides: ReadonlyArray<Guide>;
-    selection: ReadonlyArray<SceneNode>;
-    selectedTextRange: {node: TextNode; start: number; end: number} | null;
-
-    backgrounds: ReadonlyArray<Paint>;
-
-    readonly prototypeStartNode: FrameNode | GroupNode | ComponentNode | InstanceNode | null;
-  }
-
-  interface FrameNode extends DefaultFrameMixin {
-    readonly type: 'FRAME';
-    clone(): FrameNode;
-  }
-
-  interface GroupNode
-    extends BaseNodeMixin,
-      SceneNodeMixin,
-      ReactionMixin,
-      ChildrenMixin,
-      ContainerMixin,
-      BlendMixin,
-      LayoutMixin,
-      ExportMixin {
-    readonly type: 'GROUP';
-    clone(): GroupNode;
-  }
-
-  interface SliceNode extends BaseNodeMixin, SceneNodeMixin, LayoutMixin, ExportMixin {
-    readonly type: 'SLICE';
-    clone(): SliceNode;
-  }
-
-  interface RectangleNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin, RectangleCornerMixin {
-    readonly type: 'RECTANGLE';
-    clone(): RectangleNode;
-  }
-
-  interface LineNode extends DefaultShapeMixin, ConstraintMixin {
-    readonly type: 'LINE';
-    clone(): LineNode;
-  }
-
-  interface EllipseNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
-    readonly type: 'ELLIPSE';
-    clone(): EllipseNode;
-    arcData: ArcData;
-  }
-
-  interface PolygonNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
-    readonly type: 'POLYGON';
-    clone(): PolygonNode;
-    pointCount: number;
-  }
-
-  interface StarNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
-    readonly type: 'STAR';
-    clone(): StarNode;
-    pointCount: number;
-    innerRadius: number;
-  }
-
-  interface VectorNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
-    readonly type: 'VECTOR';
-    clone(): VectorNode;
-    vectorNetwork: VectorNetwork;
-    vectorPaths: VectorPaths;
-    handleMirroring: HandleMirroring | PluginAPI['mixed'];
-  }
-
-  interface TextNode extends DefaultShapeMixin, ConstraintMixin {
-    readonly type: 'TEXT';
-    clone(): TextNode;
-    readonly hasMissingFont: boolean;
-    textAlignHorizontal: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFIED';
-    textAlignVertical: 'TOP' | 'CENTER' | 'BOTTOM';
-    textAutoResize: 'NONE' | 'WIDTH_AND_HEIGHT' | 'HEIGHT';
-    paragraphIndent: number;
-    paragraphSpacing: number;
-    autoRename: boolean;
-
-    textStyleId: string | PluginAPI['mixed'];
-    fontSize: number | PluginAPI['mixed'];
-    fontName: FontName | PluginAPI['mixed'];
-    textCase: TextCase | PluginAPI['mixed'];
-    textDecoration: TextDecoration | PluginAPI['mixed'];
-    letterSpacing: LetterSpacing | PluginAPI['mixed'];
-    lineHeight: LineHeight | PluginAPI['mixed'];
-
-    characters: string;
-    insertCharacters(start: number, characters: string, useStyle?: 'BEFORE' | 'AFTER'): void;
-    deleteCharacters(start: number, end: number): void;
-
-    getRangeFontSize(start: number, end: number): number | PluginAPI['mixed'];
-    setRangeFontSize(start: number, end: number, value: number): void;
-    getRangeFontName(start: number, end: number): FontName | PluginAPI['mixed'];
-    setRangeFontName(start: number, end: number, value: FontName): void;
-    getRangeTextCase(start: number, end: number): TextCase | PluginAPI['mixed'];
-    setRangeTextCase(start: number, end: number, value: TextCase): void;
-    getRangeTextDecoration(start: number, end: number): TextDecoration | PluginAPI['mixed'];
-    setRangeTextDecoration(start: number, end: number, value: TextDecoration): void;
-    getRangeLetterSpacing(start: number, end: number): LetterSpacing | PluginAPI['mixed'];
-    setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void;
-    getRangeLineHeight(start: number, end: number): LineHeight | PluginAPI['mixed'];
-    setRangeLineHeight(start: number, end: number, value: LineHeight): void;
-    getRangeFills(start: number, end: number): Paint[] | PluginAPI['mixed'];
-    setRangeFills(start: number, end: number, value: Paint[]): void;
-    getRangeTextStyleId(start: number, end: number): string | PluginAPI['mixed'];
-    setRangeTextStyleId(start: number, end: number, value: string): void;
-    getRangeFillStyleId(start: number, end: number): string | PluginAPI['mixed'];
-    setRangeFillStyleId(start: number, end: number, value: string): void;
-  }
-
-  interface ComponentNode extends DefaultFrameMixin {
-    readonly type: 'COMPONENT';
-    clone(): ComponentNode;
-
-    createInstance(): InstanceNode;
-    description: string;
-    readonly remote: boolean;
-    readonly key: string; // The key to use with "importComponentByKeyAsync"
-  }
-
-  interface InstanceNode extends DefaultFrameMixin {
-    readonly type: 'INSTANCE';
-    clone(): InstanceNode;
-    masterComponent: ComponentNode;
-    scaleFactor: number;
-  }
-
-  interface BooleanOperationNode extends DefaultShapeMixin, ChildrenMixin, CornerMixin {
-    readonly type: 'BOOLEAN_OPERATION';
-    clone(): BooleanOperationNode;
-    booleanOperation: 'UNION' | 'INTERSECT' | 'SUBTRACT' | 'EXCLUDE';
-
-    expanded: boolean;
-  }
-
-  type BaseNode = DocumentNode | PageNode | SceneNode;
-
-  type SceneNode =
-    | SliceNode
-    | FrameNode
-    | GroupNode
-    | ComponentNode
-    | InstanceNode
-    | BooleanOperationNode
-    | VectorNode
-    | StarNode
-    | LineNode
-    | EllipseNode
-    | PolygonNode
-    | RectangleNode
-    | TextNode;
-
-  type NodeType =
-    | 'DOCUMENT'
-    | 'PAGE'
-    | 'SLICE'
-    | 'FRAME'
-    | 'GROUP'
-    | 'COMPONENT'
-    | 'INSTANCE'
-    | 'BOOLEAN_OPERATION'
-    | 'VECTOR'
-    | 'STAR'
-    | 'LINE'
-    | 'ELLIPSE'
-    | 'POLYGON'
-    | 'RECTANGLE'
-    | 'TEXT';
-
-  ////////////////////////////////////////////////////////////////////////////////
-  // Styles
-  type StyleType = 'PAINT' | 'TEXT' | 'EFFECT' | 'GRID';
-
-  interface BaseStyle {
-    readonly id: string;
-    readonly type: StyleType;
-    name: string;
-    description: string;
-    remote: boolean;
-    readonly key: string; // The key to use with "importStyleByKeyAsync"
-    remove(): void;
-  }
-
-  interface PaintStyle extends BaseStyle {
-    type: 'PAINT';
-    paints: ReadonlyArray<Paint>;
-  }
-
-  interface TextStyle extends BaseStyle {
-    type: 'TEXT';
-    fontSize: number;
-    textDecoration: TextDecoration;
-    fontName: FontName;
-    letterSpacing: LetterSpacing;
-    lineHeight: LineHeight;
-    paragraphIndent: number;
-    paragraphSpacing: number;
-    textCase: TextCase;
-  }
-
-  interface EffectStyle extends BaseStyle {
-    type: 'EFFECT';
-    effects: ReadonlyArray<Effect>;
-  }
-
-  interface GridStyle extends BaseStyle {
-    type: 'GRID';
-    layoutGrids: ReadonlyArray<LayoutGrid>;
-  }
-
-  ////////////////////////////////////////////////////////////////////////////////
-  // Other
-
-  interface Image {
-    readonly hash: string;
-    getBytesAsync(): Promise<Uint8Array>;
-  }
-} // declare global
-
-export {};
diff --git a/package.json b/package.json
index 0ee0b7e..488ca78 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pexels-figma",
-  "version": "11.0.1",
+  "version": "2.0.0",
   "description": "A Figma plugin to insert photos from Pexels.",
   "homepage": "https://www.figma.com/community/plugin/829802086526281657/Pexels",
   "license": "ISC",
@@ -12,17 +12,26 @@
   "author": "Craig Dennis <craig@simplebitdesign.com> (https://craigmdennis.com)",
   "dependencies": {
     "@closeio/use-infinite-scroll": "^1.0.0",
+    "@pexels/figma": "^2.7.9",
+    "@pexels/types": "^2.7.9",
+    "@pexels/utils": "^2.7.9",
+    "@pexels/icons": "^2.7.9",
     "babel-plugin-styled-components": "^1.10.7",
-    "figma-plugin-ds": "^0.1.8",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "framer-motion": "^4.1.17",
+    "pexels": "^1.2.1",
+    "qs": "^6.10.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-intersection-observer": "^8.26.1",
-    "react-loading-skeleton": "^2.0.1"
+    "react-loading-skeleton": "^2.0.1",
+    "swr": "^0.5.6"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.9.5",
+    "@figma/plugin-typings": "^1.26.0",
     "@svgr/webpack": "^5.3.1",
     "@types/node": "^13.13.0",
+    "@types/qs": "^6.9.6",
     "@types/react": "^16.8.24",
     "@types/react-dom": "^16.8.5",
     "copy-webpack-plugin": "^5.1.1",
@@ -33,6 +42,8 @@
     "husky": "^3.0.2",
     "lint-staged": "^9.2.1",
     "prettier": "^1.18.2",
+    "sass": "^1.35.1",
+    "sass-loader": "^10.1.0",
     "serialize-javascript": "^3.1.0",
     "style-loader": "^1.2.0",
     "ts-loader": "^6.0.4",
diff --git a/src/api/fetchers.ts b/src/api/fetchers.ts
new file mode 100644
index 0000000..5da2233
--- /dev/null
+++ b/src/api/fetchers.ts
@@ -0,0 +1,92 @@
+import * as qs from 'qs';
+import { KeyLoader, useSWRInfinite } from 'swr';
+import { createClient, ErrorResponse } from 'pexels';
+import { ImageColor, ImageSize, Orientation } from '../constants';
+
+type TRawPexelsClient = ReturnType<typeof createClient>;
+type TSearchFn = TRawPexelsClient['photos']['search'];
+type TCuratedFn = TRawPexelsClient['photos']['curated'];
+
+type TPexelsClient = {
+  photos: {
+    search: (params: Parameters<TSearchFn>[0] & {
+      orientation?: Orientation;
+      color?: ImageColor;
+      size?: ImageSize;
+    }) => ReturnType<TSearchFn>;
+    curated: TCuratedFn;
+  };
+}
+
+const pexelsClient: TPexelsClient = {
+  photos: {
+    search: async (params) => {
+      const baseUrl = 'https://api.pexels.com/v1/search';
+      const apiUrl = `${baseUrl}?${qs.stringify(params)}`;
+      const response = await fetch(apiUrl, {
+        headers: {
+          authorization: `Bearer ${process.env.API_KEY}`
+        }
+      });
+      return await response.json();
+    },
+    curated: async (params) => {
+      const baseUrl = 'https://api.pexels.com/v1/curated';
+      const apiUrl = `${baseUrl}?${qs.stringify(params)}`;
+      const response = await fetch(apiUrl, {
+        headers: {
+          authorization: `Bearer ${process.env.API_KEY}`
+        }
+      });
+      return await response.json();
+    }
+  }
+};
+
+const isErrorResponse = <O>(input: O | ErrorResponse): input is ErrorResponse => {
+  if ('error' in input) return true;
+  return false;
+}
+
+const getKeyFactory = <K extends string, O extends { [k in K]?: any }>(name: string, listKey: K, transform?: (...args: any[]) => any[]): KeyLoader<O> => {
+  return (pageIndex: number, previousPageData?: O | null) => {
+    if (previousPageData && !previousPageData[listKey].length) return null;
+    const keys = [name, pageIndex];
+    return transform ? transform(...keys) : keys;
+  };
+}
+
+export const usePhotosSearch = (opts: Parameters<TPexelsClient['photos']['search']>[0]) => {
+  type TPhotosSearchType = ReturnType<typeof pexelsClient.photos.search> extends Promise<infer V> ? V : any;
+  type FetcherDataType = Exclude<TPhotosSearchType, ErrorResponse>;
+
+  const { query, orientation, color, size } = opts;
+  const keyLoader = getKeyFactory<'photos', FetcherDataType>('photosSearch', 'photos', (...args: any[]) => ([...args, query.replace(/[^a-zA-Z_-]/g, '-'), orientation, color, size]));
+  const fetcher = async (_: string, pageIndex: number): Promise<FetcherDataType> => {
+    const res = await pexelsClient.photos.search({
+      page: pageIndex + 1,
+      query: encodeURIComponent(query),
+      orientation: orientation !== Orientation.ALL ? orientation : undefined,
+      size: size !== ImageSize.ALL ? size : undefined,
+      color: color !== ImageColor.ALL ? color : undefined,
+    });
+    if (isErrorResponse(res)) throw new Error(res.error);
+    return res;
+  };
+
+  return useSWRInfinite<FetcherDataType>(keyLoader, fetcher);
+}
+
+export const usePhotosCurated = () => {
+  type TPhotosCuratedType = ReturnType<typeof pexelsClient.photos.curated> extends Promise<infer V> ? V : any;
+  type FetcherDataType = Exclude<TPhotosCuratedType, ErrorResponse>;
+
+  const keyLoader = getKeyFactory<'photos', FetcherDataType>('photosSearch', 'photos', (...args: any[]) => ([...args]));
+  const fetcher = async (_: string, pageIndex: number): Promise<FetcherDataType> => {
+    const res = await pexelsClient.photos.curated({ page: pageIndex + 1 });
+    if (isErrorResponse(res)) throw new Error(res.error);
+    return res;
+  };
+
+  return useSWRInfinite<FetcherDataType>(keyLoader, fetcher);
+}
\ No newline at end of file
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..f1fedd9
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1 @@
+export * from './fetchers';
\ No newline at end of file
diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
deleted file mode 100644
index c85fb89..0000000
--- a/src/app/components/App.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import '../styles/ui.css';
-import 'figma-plugin-ds/dist/figma-plugin-ds.css';
-import Footer from './Footer';
-import Gallery from './Gallery';
-
-const App = ({}) => {
-  return (
-    <React.Fragment>
-      <Gallery />
-      <Footer />
-    </React.Fragment>
-  );
-};
-
-export default App;
diff --git a/src/app/components/App/App.tsx b/src/app/components/App/App.tsx
new file mode 100644
index 0000000..1783c09
--- /dev/null
+++ b/src/app/components/App/App.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Tabs } from '@pexels/figma';
+import { Pages } from '../../../constants';
+import { SearchPage } from '../SearchPage';
+import { HistoryPage } from '../HistoryPage';
+
+export const App: React.FC = ({  }) => {
+  const [selectedTab, setSelectedTab] = React.useState(Pages.SEARCH);
+
+  const onSelect = React.useCallback((t: Pages) => {
+    setSelectedTab(t);
+  }, [selectedTab]);
+
+  return (
+    <>
+      <Tabs selectedTab={selectedTab} onSelect={onSelect}>
+        <Tabs.Tab
+          id={Pages.SEARCH}
+          title="Search"
+        />
+        <Tabs.Tab
+          id={Pages.HISTORY}
+          title="History"
+        />
+      </Tabs>
+      {(selectedTab === Pages.SEARCH) && (
+        <SearchPage />
+      )}
+      {(selectedTab === Pages.HISTORY) && (
+        <HistoryPage />
+      )}
+    </>
+  );
+};
diff --git a/src/app/components/App/index.ts b/src/app/components/App/index.ts
new file mode 100644
index 0000000..9342f37
--- /dev/null
+++ b/src/app/components/App/index.ts
@@ -0,0 +1 @@
+export * from './App';
\ No newline at end of file
diff --git a/src/app/components/ColorSelect/ColorSelect.module.scss b/src/app/components/ColorSelect/ColorSelect.module.scss
new file mode 100644
index 0000000..23d54fb
--- /dev/null
+++ b/src/app/components/ColorSelect/ColorSelect.module.scss
@@ -0,0 +1,13 @@
+.colorOption {
+  display: grid;
+  grid-template-columns: 2rem 1fr;
+  gap: 1.2rem;
+  align-items: center;
+
+  .color {
+    border-radius: 1rem;
+    width: 2rem;
+    height: 2rem;
+    border: .12rem solid var(--color--alto);
+  }
+}
\ No newline at end of file
diff --git a/src/app/components/ColorSelect/ColorSelect.tsx b/src/app/components/ColorSelect/ColorSelect.tsx
new file mode 100644
index 0000000..00334d9
--- /dev/null
+++ b/src/app/components/ColorSelect/ColorSelect.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import styles from './ColorSelect.module.scss';
+import { Select } from '@pexels/figma';
+import { ImageColor } from '../../../constants';
+
+type Props = {
+  selected: ImageColor;
+  onSelect: (value: ImageColor) => void;
+}
+
+const HexColorMap = {
+  [ImageColor.ALL]: '#ffffff',
+  [ImageColor.BLACK]: '#000000',
+  [ImageColor.RED]: '#FF6A6A',
+  [ImageColor.ORANGE]: '#FFBC6D',
+  [ImageColor.YELLOW]: '#F6FF89',
+  [ImageColor.GREEN]: '#8CF1B4',
+  [ImageColor.TURQUOISE]: '#80F0E3',
+  [ImageColor.BLUE]: '#6998F2',
+  [ImageColor.VIOLET]: '#B770EF',
+  [ImageColor.PINK]: '#FFCFFD',
+  [ImageColor.BROWN]: '#C0AF82',
+  [ImageColor.GRAY]: '#B5B5B5',
+  [ImageColor.WHITE]: '#ffffff',
+}
+
+export const ColorSelect: React.FC<Props> = ({ selected, onSelect }) => {
+  const options = React.useMemo(() => ([
+    { label: 'All Colors', value: ImageColor.ALL },
+    { label: 'Black', value: ImageColor.BLACK },
+    { label: 'Red', value: ImageColor.RED },
+    { label: 'Orange', value: ImageColor.ORANGE },
+    { label: 'Yellow', value: ImageColor.YELLOW },
+    { label: 'Green', value: ImageColor.GREEN },
+    { label: 'Turqouise', value: ImageColor.TURQUOISE },
+    { label: 'Blue', value: ImageColor.BLUE },
+    { label: 'Violet', value: ImageColor.VIOLET },
+    { label: 'Pink', value: ImageColor.PINK },
+    { label: 'Brown', value: ImageColor.BROWN },
+    { label: 'Gray', value: ImageColor.GRAY },
+    { label: 'White', value: ImageColor.WHITE },
+  ]), []);
+
+  const onRenderOption = React.useCallback((option: typeof options[number]) => {
+    return (
+      <div className={styles.colorOption}>
+        <div className={styles.color} style={{ backgroundColor: HexColorMap[option.value] }} />
+        <div>{option.label}</div>
+      </div>
+    )
+  }, []);
+
+  return (
+    <Select
+      id="orientation"
+      defaultValue={ImageColor.ALL}
+      options={options}
+      selected={selected}
+      alignment="right"
+      maxHeight={300}
+      renderOption={onRenderOption}
+      onSelect={onSelect}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/app/components/ColorSelect/index.ts b/src/app/components/ColorSelect/index.ts
new file mode 100644
index 0000000..28bc9af
--- /dev/null
+++ b/src/app/components/ColorSelect/index.ts
@@ -0,0 +1 @@
+export * from './ColorSelect';
\ No newline at end of file
diff --git a/src/app/components/CuratedMediaList/CuratedMediaList.module.scss b/src/app/components/CuratedMediaList/CuratedMediaList.module.scss
new file mode 100644
index 0000000..7772818
--- /dev/null
+++ b/src/app/components/CuratedMediaList/CuratedMediaList.module.scss
@@ -0,0 +1,14 @@
+.title {
+  font-size: 1.7rem;
+  font-weight: 500;
+  font-family: var(--font-family--sans);
+  color: var(--color--mine-shaft);
+  line-height: 17/48;
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20rem;
+}
\ No newline at end of file
diff --git a/src/app/components/CuratedMediaList/CuratedMediaList.tsx b/src/app/components/CuratedMediaList/CuratedMediaList.tsx
new file mode 100644
index 0000000..8a6a778
--- /dev/null
+++ b/src/app/components/CuratedMediaList/CuratedMediaList.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Button, MediaList, LoadMoreTrigger, InfiniteLoader } from '@pexels/figma';
+import { LoopIcon } from '@pexels/icons';
+import styles from './CuratedMediaList.module.scss';
+import { usePhotosCurated } from '../../../api';
+import { postPluginMessage } from '../../utils/post-plugin-message';
+import { Media } from '@pexels/types';
+import { photoToMediaObject } from '@pexels/utils';
+import { insertMedia } from '../../utils/insert-media';
+import randomNumber from '../../utils/random-number';
+
+export const CuratedMediaList: React.FC = () => {
+  const [downloading, setDownloading] = React.useState(-1);
+  const { error, data, size, setSize } = usePhotosCurated();
+  const showLoadMore = React.useMemo(() => !error && data && size === data.length, [data, size, error]);
+  const photos = React.useMemo(() => {
+    return (data ?? []).reduce<Media[]>((acc, v) => {
+      return acc.concat(v.photos.map(p => photoToMediaObject(p)));
+    }, []);
+  }, [data]);
+
+  const onRandomClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(async () => {
+    const rng = randomNumber(photos.length);
+    const media = photos[rng];
+    setDownloading(media.id);
+    await insertMedia(media);
+    setDownloading(-1);
+  }, [photos]);
+
+  const onMediaClick = React.useCallback(async (media: Media) => {
+    setDownloading(media.id);
+    await insertMedia(media);
+    setDownloading(-1);
+  }, []);
+
+  const onLoadMore = React.useCallback(() => {
+    setSize(size + 1);
+  }, [size]);
+
+  React.useEffect(() => {
+    if (error && typeof error === 'object' && 'message' in error) {
+      const msg = String(error.message);
+      postPluginMessage({
+        type: 'notice',
+        message: { text: msg },
+      });
+    }
+  }, [error]);
+
+  return (
+    <>
+      <p className={styles.title}>Popular Images</p>
+      <Button
+        disabled={downloading !== -1}
+        loading={downloading !== -1}
+        theme="primary"
+        icon={<LoopIcon />}
+        onClick={onRandomClick}
+      >
+        Insert random image
+      </Button>
+      <MediaList
+        media={photos}
+        onMediaClick={onMediaClick}
+        isDownloading={downloading === -1 ? false : downloading}
+      />
+      {(showLoadMore) ? (
+        <LoadMoreTrigger
+          onLoadMore={onLoadMore}
+        />
+      ) : (
+        <div className={styles.loader}>
+          <InfiniteLoader />
+        </div>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/CuratedMediaList/index.ts b/src/app/components/CuratedMediaList/index.ts
new file mode 100644
index 0000000..b78a789
--- /dev/null
+++ b/src/app/components/CuratedMediaList/index.ts
@@ -0,0 +1 @@
+export * from './CuratedMediaList';
\ No newline at end of file
diff --git a/src/app/components/EmptyState.tsx b/src/app/components/EmptyState.tsx
deleted file mode 100644
index 9d5f652..0000000
--- a/src/app/components/EmptyState.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import IconPhotos from '../assets/icon-photos.svg';
-
-const EmptyState = (props) => {
-  return (
-    <div className="empty">
-      <div className="empty__image">
-        <IconPhotos />
-      </div>
-      <h1 className="empty__title">No Results</h1>
-      <p>
-        No photos matched "<span>{props.searchTerm}</span>".
-      </p>
-      <p>Please try another search term.</p>
-      {/* <button onClick={props.onClick} id="curated" className="button button--secondary empty__button">
-        Show Curated Photos
-      </button> */}
-    </div>
-  );
-};
-
-export default EmptyState;
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
deleted file mode 100644
index 99ca0ed..0000000
--- a/src/app/components/Footer.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-const Footer = () => {
-  return (
-    <div className="footer">
-      <p className="type type--small type--normal">
-        Photos provided by{' '}
-        <a title="Visit Pexels.com" target="_blank" href="https://pexels.com?ref=figma">
-          Pexels
-        </a>
-        .
-      </p>
-    </div>
-  );
-};
-
-export default Footer;
diff --git a/src/app/components/Gallery.tsx b/src/app/components/Gallery.tsx
deleted file mode 100644
index 526a6f8..0000000
--- a/src/app/components/Gallery.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from 'react';
-import useInfiniteScroll from '@closeio/use-infinite-scroll';
-import Skeleton from 'react-loading-skeleton';
-import Photo from './Photo';
-import SearchBar from './SearchBar';
-import EmptyState from './EmptyState';
-import randomNumber from '../utils/random-number';
-import handleErrors from '../utils/handle-errors';
-
-const Gallery = (props) => {
-  // Constants
-  const HEIGHT = 140;
-  const WIDTH = 199;
-  const PHOTOS_PER_PAGE = 30;
-  const URL = 'https://api.pexels.com/v1/';
-
-  // States
-  const [loading, setLoading] = React.useState(true);
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const [photos, setPhotos] = React.useState([]);
-  const [hasMore, setHasMore] = React.useState(false);
-  const [pageNumber, setPageNumber] = React.useState(randomNumber);
-  const [endpoint, setEndpoint] = React.useState(`curated?`);
-  const [initialLoad, setInitialLoad] = React.useState(true);
-
-  // Infinite Scroll
-  const [page, loaderRef, scrollerRef] = useInfiniteScroll({hasMore});
-
-  // Initiate data fetching
-  React.useEffect(() => {
-    (async () => {
-      await fetch(`${URL}${endpoint}&per_page=${PHOTOS_PER_PAGE}&page=${pageNumber}`, {
-        headers: {Authorization: process.env.API_KEY},
-      })
-        .then(handleErrors)
-        .then((response) => response.json())
-        .then((data) => {
-          // Update the page number after we've loaded the previous
-          setPageNumber((prev) => prev + 1);
-
-          // Check to see if there are more pages
-          setHasMore(pageNumber * PHOTOS_PER_PAGE <= data.total_results);
-
-          // Combine the previous array of photos with the new data
-          setPhotos((prev) => [...prev, ...data.photos]);
-
-          // No longer loeading
-          setLoading(false);
-        })
-        .catch((error) => console.log(error));
-    })();
-  }, [page, searchTerm]);
-
-  // When the seach is submitted in <SearchBar />
-  const handleSearchSubmit = (term) => {
-    // Clear the curated photos
-    setPhotos([]);
-    setEndpoint(`search?query=${term}`);
-    setInitialLoad(false);
-    setLoading(true);
-    setSearchTerm(term);
-    setPageNumber(1);
-  };
-
-  // Create the gallery of Photos
-  const gallery = photos.map((photo, i) => {
-    return (
-      <Photo key={i} photo={photo} onError={props.onError} onInsert={props.onInsert} height={HEIGHT} width={WIDTH} />
-    );
-  });
-
-  // Show an initial group of fake images while the API request takes place
-  return (
-    <React.Fragment>
-      <SearchBar onUserSubmit={handleSearchSubmit} />
-      {loading && (
-        <div className="skeleton">
-          <Skeleton count={8} height={HEIGHT} />
-        </div>
-      )}
-
-      {!photos.length && !initialLoad && !loading && <EmptyState searchTerm={searchTerm} />}
-
-      <div id="gallery" className="gallery" ref={scrollerRef}>
-        {gallery}
-        {hasMore && (
-          <div className="infinite-scroll-loader" ref={loaderRef}>
-            Loading more photos&hellip;
-          </div>
-        )}
-      </div>
-    </React.Fragment>
-  );
-};
-
-export default Gallery;
diff --git a/src/app/components/HistoryPage/HistoryPage.module.scss b/src/app/components/HistoryPage/HistoryPage.module.scss
new file mode 100644
index 0000000..41fcac4
--- /dev/null
+++ b/src/app/components/HistoryPage/HistoryPage.module.scss
@@ -0,0 +1,6 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--3);
+  padding: var(--space--3);
+}
\ No newline at end of file
diff --git a/src/app/components/HistoryPage/HistoryPage.tsx b/src/app/components/HistoryPage/HistoryPage.tsx
new file mode 100644
index 0000000..48c27d6
--- /dev/null
+++ b/src/app/components/HistoryPage/HistoryPage.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import styles from './HistoryPage.module.scss';
+import { useUiMessage } from '../../hooks';
+import { TMediaHistoryChangedMessage } from '../../utils/post-ui-message';
+import { NoResults, MediaList, Button } from '@pexels/figma';
+import { Media } from '@pexels/types';
+import { LoopIcon } from '@pexels/icons';
+import { insertMedia } from '../../utils/insert-media';
+import randomNumber from '../../utils/random-number';
+
+export const HistoryPage: React.FC = () => {
+  const [downloading, setDownloading] = React.useState(-1);
+  const recent = useUiMessage<TMediaHistoryChangedMessage>('media-history-changed', true);
+  const reversed = React.useMemo(() => (
+    recent ? [...recent.message.media].reverse() : []
+  ), [recent]);
+
+  const onRandomClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(async () => {
+    const rng = randomNumber(reversed.length);
+    console.log(rng);
+    const media = reversed[rng];
+    setDownloading(media.id);
+    await insertMedia(media);
+    setDownloading(-1);
+  }, [reversed]);
+
+  const onMediaClick = React.useCallback(async (media: Media) => {
+    setDownloading(media.id);
+    await insertMedia(media);
+    setDownloading(-1);
+  }, []);
+
+  if (reversed.length === 0) {
+    return (
+      <NoResults>
+        No recent images
+      </NoResults>
+    )
+  }
+
+  return (
+    <div className={styles.page}>
+      <Button
+        disabled={downloading !== -1}
+        loading={downloading !== -1}
+        theme="primary"
+        icon={<LoopIcon />}
+        onClick={onRandomClick}
+      >
+        Insert random image
+      </Button>
+      <MediaList
+        media={reversed}
+        isDownloading={downloading}
+        onMediaClick={onMediaClick}
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/app/components/HistoryPage/index.ts b/src/app/components/HistoryPage/index.ts
new file mode 100644
index 0000000..c7bf1cc
--- /dev/null
+++ b/src/app/components/HistoryPage/index.ts
@@ -0,0 +1 @@
+export * from './HistoryPage';
\ No newline at end of file
diff --git a/src/app/components/ImageSizeSelect/ImageSizeSelect.tsx b/src/app/components/ImageSizeSelect/ImageSizeSelect.tsx
new file mode 100644
index 0000000..60da9cd
--- /dev/null
+++ b/src/app/components/ImageSizeSelect/ImageSizeSelect.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Select } from '@pexels/figma';
+import { ImageSize } from '../../../constants';
+
+type Props = {
+  selected: ImageSize;
+  onSelect: (value: ImageSize) => void;
+}
+
+export const ImageSizeSelect: React.FC<Props> = ({ selected, onSelect }) => {
+  const options = React.useMemo(() => ([
+    { label: 'All Sizes', value: ImageSize.ALL },
+    { label: 'Large', value: ImageSize.LARGE },
+    { label: 'Medium', value: ImageSize.MEDIUM },
+    { label: 'Small', value: ImageSize.SMALL },
+  ]), []);
+
+  return (
+    <Select
+      id="imageSize"
+      defaultValue={ImageSize.ALL}
+      options={options}
+      selected={selected}
+      onSelect={onSelect}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/app/components/ImageSizeSelect/index.ts b/src/app/components/ImageSizeSelect/index.ts
new file mode 100644
index 0000000..42fab7a
--- /dev/null
+++ b/src/app/components/ImageSizeSelect/index.ts
@@ -0,0 +1 @@
+export * from './ImageSizeSelect';
\ No newline at end of file
diff --git a/src/app/components/OrientationSelect/OrientationSelect.tsx b/src/app/components/OrientationSelect/OrientationSelect.tsx
new file mode 100644
index 0000000..3ede138
--- /dev/null
+++ b/src/app/components/OrientationSelect/OrientationSelect.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Select } from '@pexels/figma';
+import { Orientation } from '../../../constants';
+
+type Props = {
+  selected: Orientation;
+  onSelect: (value: Orientation) => void;
+}
+
+export const OrientationSelect: React.FC<Props> = ({ selected, onSelect }) => {
+  const options = React.useMemo(() => ([
+    { label: 'All orientations', value: Orientation.ALL },
+    { label: 'Portrait', value: Orientation.PORTRAIT },
+    { label: 'Landscape', value: Orientation.LANDSCAPE },
+    { label: 'Square', value: Orientation.SQUARE },
+  ]), []);
+
+  return (
+    <Select
+      id="orientation"
+      defaultValue={Orientation.ALL}
+      options={options}
+      selected={selected}
+      onSelect={onSelect}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/app/components/OrientationSelect/index.ts b/src/app/components/OrientationSelect/index.ts
new file mode 100644
index 0000000..977e0a2
--- /dev/null
+++ b/src/app/components/OrientationSelect/index.ts
@@ -0,0 +1 @@
+export * from './OrientationSelect';
\ No newline at end of file
diff --git a/src/app/components/Photo.tsx b/src/app/components/Photo.tsx
deleted file mode 100644
index cdf5f67..0000000
--- a/src/app/components/Photo.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from 'react';
-import Skeleton from 'react-loading-skeleton';
-import IconCamera from '../assets/icon-camera.svg';
-import handleErrors from '../utils/handle-errors';
-
-const Photo = (props) => {
-  const {photo, width = 199, height = 140} = props;
-
-  const [imageLoaded, setImageLoaded] = React.useState(false);
-
-  // Update the state when the image has loaded
-  const handleImageLoaded = () => {
-    setImageLoaded(true);
-  };
-
-  // Create the photo in figma
-  const handleClickedPhoto = React.useCallback(() => {
-    parent.postMessage(
-      {
-        pluginMessage: {
-          type: 'notice',
-          message: {text: 'Downloading Photo...', timeout: 30000},
-        },
-      },
-      '*',
-    );
-
-    // Get the clicked image
-    const clickedImage = event.srcElement as HTMLImageElement;
-
-    // Get the original URL stored as a data attribute
-    const insertURL = clickedImage.dataset.insertUrl;
-
-    // Fetch the image
-    fetch(insertURL)
-      .then(handleErrors)
-      .then((response) => response.arrayBuffer())
-      .then((buffer) => {
-        // Send data to the pligin code
-        parent.postMessage(
-          {
-            pluginMessage: {
-              type: 'imageHash',
-              message: {
-                data: new Uint8Array(buffer),
-                width: photo.width,
-                height: photo.height,
-                photographer: photo.photographer,
-              },
-            },
-          },
-          '*',
-        );
-      })
-      .catch((error) => console.log(error));
-  }, []);
-
-  // If the image hasn't loaded then show an empty state
-  return (
-    <React.Fragment>
-      {!imageLoaded && <Skeleton height={height} />}
-      <figure style={{height}} className={`gallery__image ${imageLoaded ? 'is-loaded' : ''}`}>
-        <img
-          onLoad={handleImageLoaded}
-          onClick={handleClickedPhoto}
-          src={photo.src.tiny}
-          alt={`Photo by ${photo.photographer}`}
-          title={`Photo by ${photo.photographer}`}
-          data-insert-url={photo.src.large2x}
-          width={width}
-          height={height}
-        />
-        <div className="gallery__overlay">
-          <IconCamera />
-          <a
-            title={`Visit ${photo.photographer} on Pexels`}
-            target="_blank"
-            className="gallery__photographer"
-            href={photo.photographer_url}>
-            {photo.photographer}
-          </a>
-        </div>
-      </figure>
-    </React.Fragment>
-  );
-};
-
-export default Photo;
diff --git a/src/app/components/SearchBar.tsx b/src/app/components/SearchBar.tsx
deleted file mode 100644
index fc7d2b6..0000000
--- a/src/app/components/SearchBar.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from 'react';
-
-const SearchBar = (props) => {
-  // Set the state to an empty string
-  const [value, setValue] = React.useState('');
-  const textInput = React.useRef(null);
-
-  // Needs an change event handler or the input is readobnly
-  const onInputChange = React.useCallback(
-    (event) => {
-      setValue(event.target.value);
-    },
-    [value],
-  );
-
-  // Apply focus to the currently referenced input
-  const focus = () => {
-    textInput.current.focus();
-  };
-
-  // Use useCallback to optimize child re-rendering
-  // Need to pass the properties in the array at the end of the function
-  // to only run when they change
-  const onSearchSubmit = React.useCallback(
-    (event) => {
-      // Prevent the form from submitting
-      event.preventDefault();
-
-      // If the search term isn't empty
-      // TODO: IF the value is the same as the previous submission
-      if (value !== '') {
-        // Send the value to the parent component
-        props.onUserSubmit(value);
-      }
-    },
-    [value],
-  );
-
-  // Focus the plugin when it first runs
-  React.useEffect(() => focus(), []);
-
-  return (
-    <form id="search-container" className="search" onSubmit={onSearchSubmit}>
-      <div className="input input--with-icon">
-        <div className="icon icon--search icon--black-3"></div>
-        <input
-          id="search"
-          ref={textInput}
-          value={value}
-          onChange={onInputChange}
-          type="search"
-          className="input__field"
-          placeholder="Type your search and hit return..."
-        />
-      </div>
-    </form>
-  );
-};
-
-export default SearchBar;
diff --git a/src/app/components/SearchBar/SearchBar.module.scss b/src/app/components/SearchBar/SearchBar.module.scss
new file mode 100644
index 0000000..68c4cac
--- /dev/null
+++ b/src/app/components/SearchBar/SearchBar.module.scss
@@ -0,0 +1,9 @@
+.searchbar {
+  display: flex;
+  gap: var(--space--2);
+  margin-bottom: 0;
+
+  label {
+    flex-grow: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/app/components/SearchBar/SearchBar.tsx b/src/app/components/SearchBar/SearchBar.tsx
new file mode 100644
index 0000000..8986ccc
--- /dev/null
+++ b/src/app/components/SearchBar/SearchBar.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './SearchBar.module.scss';
+import { Button, Input } from '@pexels/figma';
+import { SearchIcon } from '@pexels/icons';
+
+type Props = {
+  value: string;
+  onChange: (v: string) => void;
+  onSubmit: (v: string) => void;
+}
+
+export const SearchBar: React.FC<Props> = ({ value, onChange, onSubmit }) => {
+  const onInput = React.useCallback<React.FormEventHandler<HTMLInputElement>>((event) => {
+    onChange(event.currentTarget.value);
+  }, [value, onChange]);
+
+  const onFormSubmit = React.useCallback<React.FormEventHandler<HTMLFormElement>>((event) => {
+    event.preventDefault();
+    onSubmit(value);
+  }, [value, onSubmit]);
+
+  return (
+    <form
+      className={styles.searchbar}
+      onSubmit={onFormSubmit}
+    >
+      <Input
+        value={value}
+        icon={<SearchIcon />}
+        onInput={onInput}
+        placeholder="Search for free photos"
+      />
+      <Button>Search</Button>
+    </form>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/SearchBar/index.ts b/src/app/components/SearchBar/index.ts
new file mode 100644
index 0000000..b44a7af
--- /dev/null
+++ b/src/app/components/SearchBar/index.ts
@@ -0,0 +1 @@
+export * from './SearchBar';
\ No newline at end of file
diff --git a/src/app/components/SearchPage/SearchPage.module.scss b/src/app/components/SearchPage/SearchPage.module.scss
new file mode 100644
index 0000000..41fcac4
--- /dev/null
+++ b/src/app/components/SearchPage/SearchPage.module.scss
@@ -0,0 +1,6 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--3);
+  padding: var(--space--3);
+}
\ No newline at end of file
diff --git a/src/app/components/SearchPage/SearchPage.tsx b/src/app/components/SearchPage/SearchPage.tsx
new file mode 100644
index 0000000..85d16a8
--- /dev/null
+++ b/src/app/components/SearchPage/SearchPage.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './SearchPage.module.scss';
+import { Tags } from '../../../constants';
+import { TagsGrid } from '@pexels/figma';
+import { Tag } from '@pexels/types';
+import { SearchBar } from '../SearchBar';
+import { CuratedMediaList } from '../CuratedMediaList';
+import { SearchedMediaList } from '../SearchedMediaList';
+
+export const SearchPage: React.FC = () => {
+  const [searchInputValue, setSearchInputValue] = React.useState('');
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const onTagClick = React.useCallback((t: Tag) => {
+    setSearchInputValue(t.query);
+    setSearchQuery(t.query);
+  }, []);
+
+  return (
+    <div className={styles.page}>
+      <SearchBar
+        value={searchInputValue}
+        onChange={setSearchInputValue}
+        onSubmit={setSearchQuery}
+      />
+
+      {(!searchQuery) && (
+        <TagsGrid
+          tags={Tags}
+          onTagClick={onTagClick}
+        />
+      )}
+
+      {(!searchQuery) && (
+        <CuratedMediaList />
+      )}
+
+      {(!!searchQuery) && (
+        <SearchedMediaList query={searchQuery} />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/SearchPage/index.ts b/src/app/components/SearchPage/index.ts
new file mode 100644
index 0000000..c451c85
--- /dev/null
+++ b/src/app/components/SearchPage/index.ts
@@ -0,0 +1 @@
+export * from './SearchPage';
\ No newline at end of file
diff --git a/src/app/components/SearchedMediaList/SearchedMediaList.module.scss b/src/app/components/SearchedMediaList/SearchedMediaList.module.scss
new file mode 100644
index 0000000..68f0930
--- /dev/null
+++ b/src/app/components/SearchedMediaList/SearchedMediaList.module.scss
@@ -0,0 +1,13 @@
+.filters {
+  position: relative;
+  display: flex;
+  gap: var(--space--3);
+  z-index: 2;
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20rem;
+}
\ No newline at end of file
diff --git a/src/app/components/SearchedMediaList/SearchedMediaList.tsx b/src/app/components/SearchedMediaList/SearchedMediaList.tsx
new file mode 100644
index 0000000..b52f442
--- /dev/null
+++ b/src/app/components/SearchedMediaList/SearchedMediaList.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import styles from './SearchedMediaList.module.scss';
+import { Button, MediaList, LoadMoreTrigger, InfiniteLoader } from '@pexels/figma';
+import { LoopIcon } from '@pexels/icons';
+import { usePhotosSearch } from '../../../api';
+import { postPluginMessage } from '../../utils/post-plugin-message';
+import { Media } from '@pexels/types';
+import { photoToMediaObject } from '@pexels/utils';
+import { OrientationSelect } from '../OrientationSelect';
+import { ImageSizeSelect } from '../ImageSizeSelect';
+import { ColorSelect } from '../ColorSelect';
+import { Orientation, ImageSize, ImageColor } from '../../../constants';
+import { insertMedia } from '../../utils/insert-media';
+import randomNumber from '../../utils/random-number';
+
+type Props = {
+  query: string;
+}
+
+export const SearchedMediaList: React.FC<Props> = ({ query }) => {
+  const [downloading, setDownloading] = React.useState(-1);
+  const [orientation, setOrientation] = React.useState(Orientation.ALL);
+  const [imageSize, setImageSize] = React.useState(ImageSize.ALL);
+  const [imageColor, setImageColor] = React.useState(ImageColor.ALL);
+  const searchParams = React.useMemo(() => ({ query, orientation, size: imageSize, color: imageColor }), [query, orientation, imageSize, imageColor]);
+  const { error, data, size, setSize } = usePhotosSearch(searchParams);
+
+  const showLoadMore = React.useMemo(() => !error && data && size === data.length, [data, size, error]);
+  const photos = React.useMemo(() => {
+    return (data ?? []).reduce<Media[]>((acc, v) => {
+      return acc.concat(v.photos.map(p => photoToMediaObject(p)));
+    }, []);
+  }, [data]);
+
+  const onRandomClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(async () => {
+    const rng = randomNumber(photos.length);
+    const media = photos[rng];
+    setDownloading(media.id);
+    await insertMedia(media);
+    setDownloading(-1);
+  }, [photos]);
+
+  const onMediaClick = React.useCallback(async (media: Media) => {
+    setDownloading(media.id);
+    await insertMedia(media);
+    setDownloading(-1);
+  }, []);
+
+  const onLoadMore = React.useCallback(() => {
+    setSize(size + 1);
+  }, [size, searchParams]);
+
+  React.useEffect(() => {
+    if (error && typeof error === 'object' && 'message' in error) {
+      const msg = String(error.message);
+      postPluginMessage({
+        type: 'notice',
+        message: { text: msg },
+      });
+    }
+  }, [error]);
+
+  return (
+    <>
+      <div className={styles.filters}>
+        <OrientationSelect
+          selected={orientation}
+          onSelect={setOrientation}
+        />
+        <ImageSizeSelect
+          selected={imageSize}
+          onSelect={setImageSize}
+        />
+        <ColorSelect
+          selected={imageColor}
+          onSelect={setImageColor}
+        />
+      </div>
+      <Button
+        disabled={downloading !== -1}
+        loading={downloading !== -1}
+        theme="primary"
+        icon={<LoopIcon />}
+        onClick={onRandomClick}
+      >
+        Insert random image
+      </Button>
+      <MediaList
+        media={photos}
+        onMediaClick={onMediaClick}
+        isDownloading={downloading === -1 ? false : downloading}
+      />
+      {(showLoadMore) ? (
+        <LoadMoreTrigger
+          onLoadMore={onLoadMore}
+        />
+      ) : (
+        <div className={styles.loader}>
+          <InfiniteLoader />
+        </div>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/components/SearchedMediaList/index.ts b/src/app/components/SearchedMediaList/index.ts
new file mode 100644
index 0000000..f693a20
--- /dev/null
+++ b/src/app/components/SearchedMediaList/index.ts
@@ -0,0 +1 @@
+export * from './SearchedMediaList';
\ No newline at end of file
diff --git a/src/app/hooks/index.ts b/src/app/hooks/index.ts
new file mode 100644
index 0000000..9ed6c97
--- /dev/null
+++ b/src/app/hooks/index.ts
@@ -0,0 +1 @@
+export * from './usePluginMessage';
\ No newline at end of file
diff --git a/src/app/hooks/usePluginMessage.ts b/src/app/hooks/usePluginMessage.ts
new file mode 100644
index 0000000..daa5e81
--- /dev/null
+++ b/src/app/hooks/usePluginMessage.ts
@@ -0,0 +1,55 @@
+import React from 'react';
+import { TUIMessage } from '../utils/post-ui-message';
+
+type TListener = (message: TUIMessage) => void;
+class MessageStack {
+  public static listeners: TListener[] = [];
+  public static stack: TUIMessage[] = [];
+
+  public static push(message: TUIMessage) {
+    MessageStack.stack.push(message);
+    MessageStack.listeners.forEach(l => l(message));
+  }
+
+  public static on(listener: TListener) {
+    MessageStack.listeners.push(listener);
+    return () => {
+      MessageStack.listeners = MessageStack.listeners.filter(l => l !== listener);
+    }
+  }
+}
+
+window.addEventListener('message', (event) => {
+  const data = event.data as {
+    pluginId: string;
+    pluginMessage: TUIMessage;
+  };
+  MessageStack.push(data.pluginMessage);
+});
+
+export function useUiMessage<T extends TUIMessage>(type: T['type'], includeHistory = true) {
+  const [message, setMessage] = React.useState<T | null>(
+    includeHistory
+      ? (() => {
+        const filtered = MessageStack.stack.filter(m => m.type === type) as T[];
+        if (filtered.length > 0) {
+          return filtered[filtered.length - 1];
+        }
+        return null;
+      })()
+      : null
+  );
+
+  React.useEffect(() => {
+    const onMessage = (msg: TUIMessage) => {
+      if (msg.type === type) {
+        setMessage(msg as T);
+      }
+    }
+
+    const unlisten = MessageStack.on(onMessage);
+    return () => unlisten();
+  }, [type, includeHistory]);
+
+  return message;
+}
diff --git a/src/app/index.tsx b/src/app/index.tsx
index a030830..f2737c5 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,5 +1,6 @@
+import '@pexels/figma/lib/index.css';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './components/App';
+import { App } from './components/App';
 
 ReactDOM.render(<App />, document.getElementById('react-page'));
diff --git a/src/app/styles/ui.css b/src/app/styles/ui.css
deleted file mode 100644
index 594ccfe..0000000
--- a/src/app/styles/ui.css
+++ /dev/null
@@ -1,273 +0,0 @@
-:root {
-  --figma-hud: #222222;
-  --figma-blue: #18a0fb;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-html {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Inter', sans-serif;
-  font-weight: 400;
-  letter-spacing: 0.005em;
-  color: var(--figma-hud);
-  padding: 0;
-  margin: 0;
-  font-size: 100%;
-  line-height: 1.25;
-  text-align: left;
-  overflow: hidden;
-  height: 100vh;
-  letter-spacing: 0.005em;
-}
-
-a {
-  color: var(--figma-blue);
-  text-decoration: none;
-}
-
-a:hover,
-a:focus {
-  text-decoration: underline;
-}
-
-figure {
-  display: block;
-  margin: 0;
-  padding: 0;
-}
-
-.visually-hidden:not(:focus):not(:active) {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-  clip: rect(1px, 1px, 1px, 1px);
-  white-space: nowrap; /* added line */
-}
-
-.gallery,
-.skeleton > span {
-  margin: -1px 0;
-  padding: 0;
-  list-style: none;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: min-content 1fr;
-  gap: 2px;
-  -webkit-overflow-scrolling: touch;
-  flex: 1;
-}
-
-.gallery {
-  overflow-y: auto;
-}
-
-.react-loading-skeleton {
-  border-radius: 0 !important;
-}
-
-.skeleton {
-  position: relative;
-  overflow: hidden;
-}
-
-.gallery__image {
-  cursor: pointer;
-  position: relative;
-  background-color: #f2f2f2;
-  display: none;
-}
-
-.gallery__image.is-loaded {
-  display: block;
-}
-
-.gallery__image:before {
-  content: '';
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 56px;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
-  opacity: 0;
-  transition: opacity 0.2s;
-  z-index: 1;
-}
-
-.gallery__image > img {
-  opacity: 0.9;
-  transition: opacity 0.2s;
-}
-
-.gallery__image:hover > img,
-.gallery__image:hover > .gallery__overlay,
-.gallery__image:hover:before {
-  opacity: 1;
-}
-
-.gallery__image > img {
-  object-fit: cover;
-}
-
-.gallery__overlay {
-  transition: opacity 0.2s;
-  opacity: 0;
-  display: flex;
-  align-items: center;
-  color: white;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 2;
-  margin: 12px;
-}
-
-.gallery__photographer {
-  color: white;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 11.5px;
-  line-height: 16px;
-  letter-spacing: 0.005em;
-  display: inline-block;
-  max-width: calc(100% - 24px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: 4px;
-  user-select: none;
-}
-
-.gallery__overlay > svg {
-  width: 16px;
-  height: 16px;
-  display: block;
-  position: relative;
-  top: 1px;
-}
-
-.notice {
-  position: fixed;
-  bottom: 60px;
-  z-index: 99;
-  display: flex;
-  left: 20px;
-  right: 20px;
-  justify-content: center;
-}
-
-.search {
-  margin-bottom: 0;
-  padding: 10px;
-  background-color: white;
-  z-index: 99;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  background-clip: padding-box;
-}
-
-.search input::-webkit-search-cancel-button {
-  position: relative;
-  right: 4px;
-}
-
-.input-icon__input:active,
-.input-icon__input:focus {
-  width: calc(100% + 2px);
-}
-
-.footer {
-  color: #4d4d4d;
-  height: 40px;
-  background: white;
-  padding-left: 20px;
-  padding-right: 20px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  background-clip: padding-box;
-  text-align: center;
-  z-index: 99;
-}
-
-.container {
-  display: flex;
-  height: 100%;
-  flex-flow: column;
-}
-
-#controls {
-  text-align: center;
-}
-
-#controls > * {
-  margin-bottom: 20px;
-  margin-top: 20px;
-}
-.empty {
-  background: #f8f8f8;
-  color: black;
-  margin-left: -20px;
-  margin-right: -20px;
-  padding: 20px;
-  text-align: center;
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-  align-items: center;
-}
-
-.empty__image {
-  height: auto;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 40px;
-  border-radius: 100%;
-  margin-bottom: 40px;
-  margin-top: 40px;
-}
-
-.empty__image svg {
-  opacity: 0.1;
-  height: auto;
-  width: 56px;
-}
-
-.empty p {
-  opacity: 0.5;
-  font-size: 14px;
-  line-height: 20px;
-  margin-bottom: 0;
-  margin-top: 0;
-  max-width: 100%;
-}
-
-.empty__title {
-  opacity: 0.75;
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: normal;
-}
-
-.empty__button {
-  margin-top: 40px !important;
-}
-
-.infinite-scroll-loader {
-  opacity: 0.5;
-  grid-column: span 2;
-  width: 100%;
-  padding: 8px;
-  text-align: center;
-  font-size: 11px;
-  line-height: 16px;
-  background: white;
-}
diff --git a/src/app/utils/handle-errors.tsx b/src/app/utils/handle-errors.tsx
deleted file mode 100644
index d3bb52e..0000000
--- a/src/app/utils/handle-errors.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-const handleErrors = (response) => {
-  if (!response.ok) {
-    let message = `Error Code: ${response.status}`;
-
-    if (response.statusText) {
-      message = `Error: ${response.statusText}`;
-    }
-
-    parent.postMessage(
-      {
-        pluginMessage: {
-          type: 'notice',
-          message: message,
-        },
-      },
-      '*',
-    );
-
-    throw Error(response.statusText);
-  }
-
-  return response;
-};
-
-export default handleErrors;
diff --git a/src/app/utils/insert-media.ts b/src/app/utils/insert-media.ts
new file mode 100644
index 0000000..dc56de2
--- /dev/null
+++ b/src/app/utils/insert-media.ts
@@ -0,0 +1,23 @@
+import { Media } from '@pexels/types';
+import { postPluginMessage } from './post-plugin-message';
+
+export async function insertMedia(media: Media) {
+  try {
+    const data = await (await fetch(media.src)).arrayBuffer();
+    postPluginMessage({
+      type: 'imageHash',
+      message: {
+        media,
+        data: new Uint8Array(data),
+      },
+    });
+  } catch (err) {
+    console.error(err);
+    postPluginMessage({
+      type: 'notice',
+      message: {
+        text: String(err.message),
+      },
+    });
+  }
+}
\ No newline at end of file
diff --git a/src/app/utils/post-plugin-message.ts b/src/app/utils/post-plugin-message.ts
new file mode 100644
index 0000000..b49cf68
--- /dev/null
+++ b/src/app/utils/post-plugin-message.ts
@@ -0,0 +1,25 @@
+import { Media } from '@pexels/types';
+
+type TNoticeMessage = {
+  type: 'notice';
+  message: {
+    text: string;
+    timeout?: number;
+  };
+}
+
+type TImageHashMessage = {
+  type: 'imageHash';
+  message: {
+    data: Uint8Array;
+    media: Media
+  };
+}
+
+export type TPluginMessage = TNoticeMessage | TImageHashMessage;
+
+export const postPluginMessage = (message: TPluginMessage) => {
+  parent.postMessage({
+    pluginMessage: message,
+  }, '*');
+}
\ No newline at end of file
diff --git a/src/app/utils/post-ui-message.ts b/src/app/utils/post-ui-message.ts
new file mode 100644
index 0000000..a3c34f2
--- /dev/null
+++ b/src/app/utils/post-ui-message.ts
@@ -0,0 +1,18 @@
+import { Media } from '@pexels/types';
+
+export type TPhotoInsertedMessage = {
+  type: 'photo-inserted';
+}
+
+export type TMediaHistoryChangedMessage = {
+  type: 'media-history-changed';
+  message: {
+    media: Media[];
+  };
+}
+
+export type TUIMessage = TPhotoInsertedMessage | TMediaHistoryChangedMessage;
+
+export const postUiMessage = (message: TUIMessage) => {
+  figma.ui.postMessage(message);
+}
\ No newline at end of file
diff --git a/src/app/utils/random-number.tsx b/src/app/utils/random-number.tsx
index c5e97d9..43da957 100644
--- a/src/app/utils/random-number.tsx
+++ b/src/app/utils/random-number.tsx
@@ -1,7 +1,7 @@
 // Generate a random number
 // Used for random curated photos page
 const randomNumber = (multiplier: number = 100) => {
-  return Math.round(Math.random() * multiplier);
+  return Math.floor(Math.random() * multiplier);
 };
 
 export default randomNumber;
diff --git a/src/constants/ImageColor.ts b/src/constants/ImageColor.ts
new file mode 100644
index 0000000..70db3b9
--- /dev/null
+++ b/src/constants/ImageColor.ts
@@ -0,0 +1,15 @@
+export enum ImageColor {
+  ALL = 'all',
+  RED = 'red',
+  ORANGE = 'orange',
+  YELLOW = 'yellow',
+  GREEN = 'green',
+  TURQUOISE = 'turquoise',
+  BLUE = 'blue',
+  VIOLET = 'violet',
+  PINK = 'pink',
+  BROWN = 'brown',
+  BLACK = 'black',
+  GRAY = 'gray',
+  WHITE = 'white',
+}
\ No newline at end of file
diff --git a/src/constants/ImageSize.ts b/src/constants/ImageSize.ts
new file mode 100644
index 0000000..2bcf566
--- /dev/null
+++ b/src/constants/ImageSize.ts
@@ -0,0 +1,6 @@
+export enum ImageSize {
+  ALL = 'all',
+  LARGE = 'large',
+  MEDIUM = 'medium',
+  SMALL = 'small',
+}
\ No newline at end of file
diff --git a/src/constants/Orientation.ts b/src/constants/Orientation.ts
new file mode 100644
index 0000000..c723c3e
--- /dev/null
+++ b/src/constants/Orientation.ts
@@ -0,0 +1,6 @@
+export enum Orientation {
+  ALL = 'all',
+  PORTRAIT = 'portrait',
+  LANDSCAPE = 'landscape',
+  SQUARE = 'square'
+}
\ No newline at end of file
diff --git a/src/constants/Pages.ts b/src/constants/Pages.ts
new file mode 100644
index 0000000..9ded159
--- /dev/null
+++ b/src/constants/Pages.ts
@@ -0,0 +1,4 @@
+export enum Pages {
+  SEARCH = 'search',
+  HISTORY = 'history'
+}
\ No newline at end of file
diff --git a/src/constants/PluginDataKeys.ts b/src/constants/PluginDataKeys.ts
new file mode 100644
index 0000000..2098430
--- /dev/null
+++ b/src/constants/PluginDataKeys.ts
@@ -0,0 +1,3 @@
+export enum PluginDataKeys {
+  MEDIA_HISTORY = 'media_history'
+}
\ No newline at end of file
diff --git a/src/constants/Tags.ts b/src/constants/Tags.ts
new file mode 100644
index 0000000..c2868fb
--- /dev/null
+++ b/src/constants/Tags.ts
@@ -0,0 +1,35 @@
+import type { Tag } from '@pexels/types';
+
+export const Tags: Tag[] = [{
+  title: 'Portrait/Faces',
+  query: 'faces',
+  preview: 'https://images.pexels.com/photos/8159657/pexels-photo-8159657.jpeg?auto=compress&cs=tinysrgb&w=180&dpr=2',
+}, {
+  title: 'Minimal',
+  query: 'minimal',
+  preview: 'https://images.pexels.com/photos/7412111/pexels-photo-7412111.jpeg?auto=compress&cs=tinysrgb&w=180&dpr=2'
+}, {
+  title: 'Business',
+  query: 'work',
+  preview: 'https://images.pexels.com/photos/4348395/pexels-photo-4348395.jpeg?auto=compress&cs=tinysrgb&w=180&dpr=2',
+}, {
+  title: 'Architecture',
+  query: 'architecture',
+  preview: 'https://images.pexels.com/photos/3126553/pexels-photo-3126553.png?auto=compress&cs=tinysrgb&w=180&dpr=2',
+}, {
+  title: 'Texture',
+  query: 'texture',
+  preview: 'https://images.pexels.com/photos/1534925/pexels-photo-1534925.jpeg?auto=compress&cs=tinysrgb&w=180&dpr=2',
+}, {
+  title: 'Interior',
+  query: 'interior',
+  preview: 'https://images.pexels.com/photos/3932930/pexels-photo-3932930.jpeg?auto=compress&cs=tinysrgb&w=180&dpr=2',
+}, {
+  title: 'Technology',
+  query: 'technology',
+  preview: 'https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=180&dpr=2',
+}, {
+  title: 'Abstract',
+  query: 'abstract',
+  preview: 'https://images.pexels.com/photos/2317711/pexels-photo-2317711.jpeg?auto=compress&cs=tinysrgb&w=180&dpr=2',
+}]
\ No newline at end of file
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 0000000..e87ac55
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,6 @@
+export * from './Pages';
+export * from './Tags';
+export * from './Orientation';
+export * from './ImageSize';
+export * from './ImageColor';
+export * from './PluginDataKeys';
\ No newline at end of file
diff --git a/src/plugin/clone.ts b/src/plugin/clone.ts
deleted file mode 100644
index 03351af..0000000
--- a/src/plugin/clone.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-const clone = (val) => {
-  const type = typeof val;
-  if (val === null) {
-    return null;
-  } else if (type === 'undefined' || type === 'number' || type === 'string' || type === 'boolean') {
-    return val;
-  } else if (type === 'object') {
-    if (val instanceof Array) {
-      return val.map((x) => clone(x));
-    } else if (val instanceof Uint8Array) {
-      return new Uint8Array(val);
-    } else {
-      const o = {};
-      for (const key in val) {
-        if (o) {
-          o[key] = clone(val[key]);
-        }
-      }
-      return o;
-    }
-  }
-  throw new Error('unknown');
-};
-
-export default clone;
diff --git a/src/plugin/controller.ts b/src/plugin/controller.ts
index 7b47385..6105ff8 100644
--- a/src/plugin/controller.ts
+++ b/src/plugin/controller.ts
@@ -1,21 +1,24 @@
-import clone from './clone';
+import { Media } from '@pexels/types';
+import { TPluginMessage } from '../app/utils/post-plugin-message';
+import { postUiMessage } from '../app/utils/post-ui-message';
+import { PluginDataKeys } from '../constants';
 
-let notification;
+let notification: ReturnType<typeof figma['notify']> | null = null;
 
 // Allows us to cancel notifications instead of queing them
-const cancelNotify = (el) => {
-  if (typeof el !== 'undefined' && typeof el.cancel === 'function') {
-    el.cancel();
-  }
+const cancelNotify = (el: typeof notification) => {
+  if (el) el.cancel();
 };
 
-figma.showUI(__html__, {width: 400, height: 600});
+figma.showUI(__html__, { width: 480, height: 620 });
 
-figma.ui.onmessage = (event) => {
-  const {type, message} = event;
+let mediaHistory = JSON.parse(figma.root.getPluginData(PluginDataKeys.MEDIA_HISTORY) || '[]') as Media[];
+postUiMessage({ type: 'media-history-changed', message: { media: mediaHistory } });
 
+figma.ui.onmessage = (event: TPluginMessage) => {
   // Notice messages
-  if (type === 'notice') {
+  if (event.type === 'notice') {
+    const { message } = event;
     let timeout = message.timeout || 4000;
     // Cancel any existing message
     cancelNotify(notification);
@@ -24,20 +27,27 @@ figma.ui.onmessage = (event) => {
   }
 
   // Image data
-  if (type === 'imageHash') {
+  if (event.type === 'imageHash') {
+    const message = event.message;
+
+    mediaHistory = mediaHistory.filter(m => m.id !== message.media.id).slice(0, 50);
+    mediaHistory.push(message.media);
+    figma.root.setPluginData(PluginDataKeys.MEDIA_HISTORY, JSON.stringify(mediaHistory));
+    postUiMessage({ type: 'media-history-changed', message: { media: mediaHistory } });
+
     const imageHash = figma.createImage(message.data).hash;
 
     // If no selection
     if (figma.currentPage.selection.length === 0) {
       const rect = figma.createRectangle();
-      rect.name = `Pexels Photo by ${message.photographer}`;
+      rect.name = `Pexels Photo by ${message.media.user.name}`;
 
       // Half the size of the image so it looks good on retina
-      rect.resizeWithoutConstraints(message.width / 2, message.height / 2);
+      rect.resizeWithoutConstraints(message.media.size.width / 2, message.media.size.height / 2);
 
       // Center the frame in our current viewport so we can see it.
-      rect.x = figma.viewport.center.x - message.width / 2;
-      rect.y = figma.viewport.center.y - message.height / 2;
+      rect.x = figma.viewport.center.x - message.media.size.width / 2;
+      rect.y = figma.viewport.center.y - message.media.size.height / 2;
 
       // Use FILL so it can be resized
       rect.fills = [{type: 'IMAGE', scaleMode: 'FILL', imageHash}];
@@ -53,14 +63,13 @@ figma.ui.onmessage = (event) => {
     // If there's a selection, add the image data to each
     for (const node of figma.currentPage.selection) {
       if ('fills' in node) {
-        let fills = clone(node.fills);
-        fills = [{type: 'IMAGE', scaleMode: 'FILL', imageHash}];
-        node.fills = fills;
+        const imagePaint: Paint = { type: 'IMAGE', scaleMode: 'FILL', imageHash };
+        node.fills = (node.fills === figma.mixed) ? [imagePaint] : [...node.fills, imagePaint];
       }
     }
 
     // Tell the plugin that the image was inserted
-    figma.ui.postMessage({type: 'photo-inserted'});
+    postUiMessage({ type: 'photo-inserted' });
     // Cancel any existing message
     cancelNotify(notification);
     // Display a new message
diff --git a/tsconfig.json b/tsconfig.json
index 8c6fb16..dd2a5c1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,11 +3,18 @@
     "outDir": "dist",
     "jsx": "react",
     "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "noUnusedParameters": true,
     "experimentalDecorators": true,
     "removeComments": true,
-    "noImplicitAny": false,
-    "moduleResolution": "node"
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "moduleResolution": "node",
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@figma"
+    ]
   },
   "downlevelIteration": true,
   "lib": ["dom", "dom.iterable", "esnext"]
diff --git a/webpack.config.js b/webpack.config.js
index 69a5c94..16c4096 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -38,21 +38,33 @@ module.exports = (env, argv) => ({
         },
       },
       // Converts TypeScript code to JavaScript
-      {test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/},
+      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
+
+      {
+        test: /\.module\.scss$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: { modules: true, importLoaders: 1 },
+          },
+          'sass-loader'
+        ]
+      },
 
       // Enables including CSS by doing "import './file.css'" in your TypeScript code
-      {test: /\.css$/, loader: [{loader: 'style-loader'}, {loader: 'css-loader'}]},
+      { test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },
 
       // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
-      {test: /\.(png|jpg|gif|webp)$/, loader: [{loader: 'url-loader'}]},
+      { test: /\.(png|jpg|gif|webp)$/, loader: [{ loader: 'url-loader' }] },
 
       // Convert SVG to React components
-      {test: /\.svg$/, use: ['@svgr/webpack']},
+      { test: /\.svg$/, use: ['@svgr/webpack'] },
     ],
   },
 
   // Webpack tries these extensions for you if you omit the extension like "import './file'"
-  resolve: {extensions: ['.tsx', '.ts', '.jsx', '.js']},
+  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
 
   output: {
     filename: '[name].js',
@@ -62,7 +74,6 @@ module.exports = (env, argv) => ({
   // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
   plugins: [
     new webpack.EnvironmentPlugin(['API_KEY']),
-    new CopyPlugin([{from: 'manifest.json', to: 'manifest.json'}]),
     new HtmlWebpackPlugin({
       template: './src/app/index.html',
       filename: 'ui.html',
diff --git a/yarn.lock b/yarn.lock
index 3f202c4..e8892fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -968,6 +968,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -1009,6 +1016,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@figma/plugin-typings@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.26.0.tgz#2a0ef53919ac226f0a7fe7dbbde404a2c8b797b5"
+  integrity sha512-afX0lhkV6EWQ4UGGIl+C/298KOZx/fRNCMx/DHEOYweM1gwonwizi0SuloT0C+A8mvbWeQ9eKqpJGD5ftIHeqw==
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
@@ -1030,6 +1042,49 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
+"@pexels/constants@^2.7.9":
+  version "2.7.9"
+  resolved "https://npm.pkg.github.com/download/@pexels/constants/2.7.9/000c4df3a27d34de76570e7c0d139ba47eef48160e2d9e4e517177de1ee10768#9c8783a92f713e2a37da4ca8a5ed9fa326498353"
+  integrity sha512-fMag/LkP9xvhLKY+vmM44g91ToeqQDmsD+ozLrHp/1P3NIknp7E8i+YBzx5r+ovKtEd7ysy28vmDNwJ/uDwPUQ==
+
+"@pexels/figma@^2.7.9":
+  version "2.7.9"
+  resolved "https://npm.pkg.github.com/download/@pexels/figma/2.7.9/0522872f608438e6357aa416390c3f787e356e44c9983dc8108b24457a064a4f#bf26ca63e4598ca37dcc311ac219f838594de5fa"
+  integrity sha512-lnwONW6rtT8lm2+DCDezkq53WIuxtm1faDU2tkJrTgbBBL+KI5WkxVHSoTvVYwsASJd6j7aLkqZFn6flmoyCKA==
+  dependencies:
+    "@pexels/constants" "^2.7.9"
+    "@pexels/hooks" "^2.7.9"
+    "@pexels/icons" "^2.7.9"
+    "@pexels/utils" "^2.7.9"
+    classnames "^2.3.1"
+    modern-css-reset "^1.4.0"
+    react-responsive-masonry "^2.1.3"
+
+"@pexels/hooks@^2.7.9":
+  version "2.7.9"
+  resolved "https://npm.pkg.github.com/download/@pexels/hooks/2.7.9/875eb1a3a171de8faa2c224b509c49681d3ce745155d29983a8cef2eeaef56c2#1efc624078f1f7e22cbbad2d27b1bde3e6216937"
+  integrity sha512-KmS1k4yFbKGUpQCr0PYcsexKGcUscE1s0M1ywXJ0191p0JGte7I0GyVU+KGkAC/aBcm00eqeu7hx59ajUhVDOA==
+
+"@pexels/icons@^2.7.9":
+  version "2.7.9"
+  resolved "https://npm.pkg.github.com/download/@pexels/icons/2.7.9/c90596c9c6d78b1216fc68bf33af788993df529698ef6a3cb4d02396e91ea643#41345627a385fc9d66ba8899b48f33a2bd66acc0"
+  integrity sha512-GtpNN+gMBOszqxDgXsjRcVvGjewv+O6PrYPlijFebXTwwe/mpjPO2QskLR/RXXKmnsGt/68ZD2WdnF5WyZjzdQ==
+
+"@pexels/types@^2.7.9":
+  version "2.7.9"
+  resolved "https://npm.pkg.github.com/download/@pexels/types/2.7.9/6a9661ff116e82e9adf96cd3f0cc50288f0fdc05702cabbc960d1e19e1d634bf#3cfde60d985e689df28fcd3ba21cd9e3e75ef347"
+  integrity sha512-Dof6kUdOtWdxnhL+uuciS8PIKxs0KYqZZXJGcrsfoUu/eUjtRxT124IVbBZVTQk0E8ISPyWHH+9ESNasKYqiSw==
+  dependencies:
+    "@pexels/constants" "^2.7.9"
+
+"@pexels/utils@^2.7.9":
+  version "2.7.9"
+  resolved "https://npm.pkg.github.com/download/@pexels/utils/2.7.9/1a1ddf46a29b8126612cfbd1c5015bc892cdeebc2864d5b674f4a50b8547cdcf#722c7aeb8443baf522dc19b4fab8d3b9c60194e1"
+  integrity sha512-Boc/R4qEOPZLqyDT9XxoGSVO51FjZq1WYGlRRNWxj70dHUYWlX8Yv7dx2SUeNXu8o9XLYhjFe6tnNWs2+h0Sbg==
+  dependencies:
+    "@pexels/constants" "^2.7.9"
+    "@pexels/types" "^2.7.9"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
@@ -1188,6 +1243,11 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/qs@^6.9.6":
+  version "6.9.6"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.6.tgz#df9c3c8b31a247ec315e6996566be3171df4b3b1"
+  integrity sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA==
+
 "@types/react-dom@^16.8.5":
   version "16.9.13"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.13.tgz#5898f0ee68fe200685e6b61d3d7d8828692814d0"
@@ -1447,7 +1507,7 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@~3.1.1:
+anymatch@~3.1.1, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
@@ -1926,6 +1986,21 @@ chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -1993,6 +2068,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@4.2.x:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -2434,6 +2514,11 @@ del@^5.0.0:
     rimraf "^3.0.0"
     slash "^3.0.0"
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -2808,11 +2893,6 @@ figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
   integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
 
-figma-plugin-ds@^0.1.8:
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/figma-plugin-ds/-/figma-plugin-ds-0.1.9.tgz#705f0212b5cc9f98a90f472e58ca7d5a8bf2a62e"
-  integrity sha512-/nHfRltntOAU+2vEAyIZX7YEgU23iJZsuKzu4BJ/GJZs+zzEKIG7MfZCTKjtwr0tb7XPfJohQunYfGxfovsC+w==
-
 figures@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -2917,6 +2997,26 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^4.1.17:
+  version "4.1.17"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.17.tgz#4029469252a62ea599902e5a92b537120cc89721"
+  integrity sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==
+  dependencies:
+    framesync "5.3.0"
+    hey-listen "^1.0.8"
+    popmotion "9.3.6"
+    style-value-types "4.1.4"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
+  integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
+  dependencies:
+    tslib "^2.1.0"
+
 from2@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
@@ -2948,7 +3048,7 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
-fsevents@~2.3.1:
+fsevents@~2.3.1, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -3014,7 +3114,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.1.0, glob-parent@~5.1.0:
+glob-parent@^5.1.0, glob-parent@~5.1.0, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -3187,6 +3287,11 @@ he@1.2.x:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3649,6 +3754,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz#0267b005049046d2421207215d45d6a262b8b8b4"
+  integrity sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==
+  dependencies:
+    node-fetch "^2.6.1"
+    whatwg-fetch "^3.4.1"
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3730,6 +3843,11 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+klona@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
+  integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -3880,7 +3998,7 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4074,6 +4192,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+modern-css-reset@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/modern-css-reset/-/modern-css-reset-1.4.0.tgz#5bee4d11eeca2ff19b882c6e8f1769773e792d04"
+  integrity sha512-0crZmSFmrxkI7159rvQWjpDhy0u4+Awg/iOycJdlVn0RSeft/a+6BrQHR3IqvmdK25sqt0o6Z5Ap7cWgUee2rw==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -4123,7 +4246,7 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-neo-async@^2.5.0, neo-async@^2.6.1:
+neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@@ -4140,6 +4263,11 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-fetch@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-libs-browser@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
@@ -4236,7 +4364,7 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.10.3:
+object-inspect@^1.10.3, object-inspect@^1.9.0:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
   integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
@@ -4498,6 +4626,13 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pexels@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pexels/-/pexels-1.2.1.tgz#bda4b715a6129e9527339b0b0cd9e6c6b08e65d7"
+  integrity sha512-zOhtX+iGtusBvp5MIgqYF4zJYVArIwTpYVRj7MRAYgdwykdPvxawQ7Eavlccuopjk28TFL58C1YkHQ2gvTaLSw==
+  dependencies:
+    isomorphic-fetch "^3.0.0"
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
@@ -4534,6 +4669,16 @@ please-upgrade-node@^3.1.1, please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
+popmotion@9.3.6:
+  version "9.3.6"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1"
+  integrity sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==
+  dependencies:
+    framesync "5.3.0"
+    hey-listen "^1.0.8"
+    style-value-types "4.1.4"
+    tslib "^2.1.0"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -4617,15 +4762,6 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@^15.6.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -4688,6 +4824,13 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qs@^6.10.1:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
+  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
+  dependencies:
+    side-channel "^1.0.4"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -4718,26 +4861,20 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
-react-dom@^16.8.6:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^17.0.0:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.2"
 
 react-intersection-observer@^8.26.1:
   version "8.32.0"
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.32.0.tgz#47249332e12e8bb99ed35a10bb7dd10446445a7b"
   integrity sha512-RlC6FvS3MFShxTn4FHAy904bVjX5Nn4/eTjUkurW0fHK+M/fyQdXuyCy9+L7yjA+YMGogzzSJNc7M4UtfSKvtw==
 
-react-is@^16.8.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
 react-loading-skeleton@^2.0.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-2.2.0.tgz#b8ce516f9a2471e90d7d9ead35d61425367e3340"
@@ -4745,14 +4882,18 @@ react-loading-skeleton@^2.0.1:
   dependencies:
     "@emotion/core" "^10.0.22"
 
-react@^16.8.6:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react-responsive-masonry@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/react-responsive-masonry/-/react-responsive-masonry-2.1.3.tgz#d8153e25a7e8aca8e715b0b62ac6f19e3d0a7943"
+  integrity sha512-2C3iwnV60WBszR7vCugY6/yTA+hW+ZMR/3pHadOD6gUQScyN3KmMNaxh1rtR9A1MobWi/XBWK/W+Ub4AVx0CDg==
+
+react@^17.0.0:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg@^5.2.0:
   version "5.2.0"
@@ -4802,6 +4943,13 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -5025,15 +5173,33 @@ safer-buffer@^2.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^10.1.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716"
+  integrity sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==
+  dependencies:
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
+
+sass@^1.35.1:
+  version "1.35.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.35.1.tgz#90ecf774dfe68f07b6193077e3b42fb154b9e1cd"
+  integrity sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -5085,7 +5251,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.5:
+semver@^7.3.2, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
@@ -5158,6 +5324,15 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -5451,6 +5626,14 @@ style-loader@^1.2.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+style-value-types@4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75"
+  integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -5494,6 +5677,13 @@ svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swr@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.6.tgz#70bfe9bc9d7ac49a064be4a0f4acf57982e55a31"
+  integrity sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==
+  dependencies:
+    dequal "2.0.2"
+
 symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -5606,6 +5796,11 @@ tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslint-react@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-4.2.0.tgz#41b16e0438365f8d3ed4120501f02cabff9fd1e4"
@@ -5933,6 +6128,11 @@ webpack@^4.41.4:
     watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
+whatwg-fetch@^3.4.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"