diff --git a/frontend/components/EditLink/index.tsx b/frontend/components/EditLink/index.tsx
deleted file mode 100644
index 5bc7b76..0000000
--- a/frontend/components/EditLink/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const EditLink: React.FC = () => {
-  return <div />;
-};
-
-export default EditLink;
diff --git a/frontend/components/Editor/Link.tsx b/frontend/components/Editor/Link.tsx
new file mode 100644
index 0000000..0fc0ba1
--- /dev/null
+++ b/frontend/components/Editor/Link.tsx
@@ -0,0 +1,92 @@
+import React, { useRef, useState } from "react";
+import { Draggable } from "react-beautiful-dnd";
+
+export type EditableLink = {
+  title: string;
+  url: string;
+  active: boolean;
+  clicks: number;
+};
+
+interface LinkProps {
+  index: number;
+  link: EditableLink;
+  onChange: (newLink: EditableLink) => void;
+  onDelete: () => void;
+}
+
+const DeleteIcon = () => (
+  <svg
+    color="palette.blueGrey7"
+    viewBox="0 0 16 16"
+    enableBackground="new 0 0 24 24"
+    className="h-4 inline"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 2.5v-2h4v2M1 2.5h14M9.533 13.5l.25-9M6.217 4.5l.25 9M2.661 4.5l.889 11h8.9l.888-11"
+    ></path>
+  </svg>
+);
+
+const DragIcon = () => (
+  <svg width="4" height="16" viewBox="0 0 4 16">
+    <path d="M0 2C0 .897.897 0 2 0s2 .897 2 2-.897 2-2 2-2-.897-2-2M0 8c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2-2-.897-2-2M0 14c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2-2-.897-2-2"></path>
+  </svg>
+);
+
+const Link: React.FC<LinkProps> = ({ index, link, onChange, onDelete }) => {
+  return (
+    <Draggable key={index} draggableId={index.toString()} index={index}>
+      {(provided) => (
+        <div {...provided.draggableProps} ref={provided.innerRef}>
+          <div className="p-2 container flex">
+            <div
+              className="flex justify-center w-1/12 flex items-center border-r bg-white rounded-sm shadow-sm"
+              {...provided.dragHandleProps}
+            >
+              <DragIcon />
+            </div>
+            <div className="w-11/12 space-y-2 bg-white rounded-sm shadow-sm">
+              <div className="flex justify-between items-center px-2 pt-2">
+                <input
+                  type="text"
+                  placeholder="Edit Title"
+                  value={link.title}
+                  onChange={(e) => onChange({ ...link, title: e.target.value })}
+                />
+
+                <input
+                  type="checkbox"
+                  onChange={(e) =>
+                    onChange({ ...link, active: e.target.checked })
+                  }
+                  checked={link.active}
+                  className="float-right"
+                />
+              </div>
+
+              <div className="flex justify-between items-center px-2 pb-2">
+                <input
+                  type="url"
+                  placeholder="https://url"
+                  value={link.url}
+                  onChange={(e) => onChange({ ...link, url: e.target.value })}
+                />
+
+                <button onClick={onDelete}>
+                  <DeleteIcon />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </Draggable>
+  );
+};
+
+export default Link;
diff --git a/frontend/components/Editor/index.tsx b/frontend/components/Editor/index.tsx
new file mode 100644
index 0000000..48f47bc
--- /dev/null
+++ b/frontend/components/Editor/index.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { DragDropContext, Droppable, DropResult } from "react-beautiful-dnd";
+import Link, { EditableLink } from "components/Editor/Link";
+
+import { useDragDrop } from "./useDragDrop";
+import equal from "fast-deep-equal";
+
+interface EditorProps {
+  links: EditableLink[];
+  setLinks: React.Dispatch<React.SetStateAction<EditableLink[]>>;
+}
+
+const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
+  const [formState, setFormState] = useState<EditableLink[]>(links);
+  const { displayDragDrop } = useDragDrop();
+
+  const handleOnDragEnd = (result: DropResult) => {
+    if (!result?.destination) return;
+
+    const items = Array.from(formState);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    setFormState(items);
+  };
+
+  /*note that we need to make the new links name render with nothing*/
+  const handleOnClickAdd = () =>
+    setFormState([
+      ...formState,
+      {
+        title: "",
+        url: "",
+        clicks: 0,
+        active: true,
+      },
+    ]);
+
+  // useEffect(() => {
+  //   setFormState(links);
+  // }, [links]);
+
+  const onSubmit = () => {
+    // const res = await updateLinks(formState);
+    // setLinks(res.data);
+  };
+
+  const didEdit = !equal(formState, links);
+
+  console.log({ formState, didEdit });
+
+  return (
+    <div className="space-y-4 bg-gray-100 w-1/2 p-2">
+      {/* add link button */}
+      <button
+        className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full"
+        onClick={handleOnClickAdd}
+      >
+        Add New Link
+      </button>
+      {displayDragDrop && (
+        <DragDropContext onDragEnd={handleOnDragEnd}>
+          <Droppable droppableId="links">
+            {(provided) => (
+              <div
+                className="links"
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+              >
+                {formState.map((link, index) => (
+                  <Link
+                    key={index}
+                    index={index}
+                    link={link}
+                    onChange={(newLink: EditableLink) =>
+                      setFormState([
+                        ...formState.slice(0, index),
+                        newLink,
+                        ...formState.slice(index + 1),
+                      ])
+                    }
+                    onDelete={() =>
+                      setFormState([
+                        ...formState.slice(0, index),
+                        ...formState.slice(index + 1),
+                      ])
+                    }
+                  />
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      )}
+    </div>
+  );
+};
+
+export default Editor;
diff --git a/frontend/components/Editor/useDragDrop.ts b/frontend/components/Editor/useDragDrop.ts
new file mode 100644
index 0000000..55f40b2
--- /dev/null
+++ b/frontend/components/Editor/useDragDrop.ts
@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+type TUseDragDrop = () => { displayDragDrop: boolean };
+
+export const useDragDrop: TUseDragDrop = () => {
+  const [isBrowser, setIsBrowser] = useState(false);
+
+  useEffect(() => {
+    setIsBrowser(process.browser);
+  }, []);
+
+  return { displayDragDrop: isBrowser };
+};
diff --git a/frontend/components/Links/index.tsx b/frontend/components/Links/index.tsx
index 6e36b1d..67c7c4d 100644
--- a/frontend/components/Links/index.tsx
+++ b/frontend/components/Links/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useEffect } from "react";
 
 interface Link {
-  name: string;
+  title: string;
   url: string;
 }
 interface LinkProps {
@@ -23,9 +23,9 @@ const Links: React.FC<LinkProps> = ({ links }) => {
       });
   };
 
-  useEffect((): void => {
-    postData("https://dog.ceo/api/breeds/list/all"); // TODO: Change to '/api/view'
-  }, []);
+  // useEffect((): void => {
+  //   postData("https://dog.ceo/api/breeds/list/all"); // TODO: Change to '/api/view'
+  // }, []);
 
   const handleClick = (): void => {
     postData("https://dog.ceo/api/breeds/list/all"); // TODO: Change to '/api/click'
@@ -36,8 +36,8 @@ const Links: React.FC<LinkProps> = ({ links }) => {
       <img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" />
       <h1 className="font-bold">@uwcsclub</h1>
       <ul className="flex flex-col my-6 w-full">
-        {links.map(({ name, url }) => (
-          <li key={name + url} className="w-full contents">
+        {links.map(({ title, url }, i) => (
+          <li key={i} className="w-full contents">
             <a
               className="btn bg-gray-450 p-3 text-white font-bold text-center self-center my-1.5
         hover:bg-white hover:text-black border-2 border-gray-800 transition duration-200 ease-in-out
@@ -47,7 +47,7 @@ const Links: React.FC<LinkProps> = ({ links }) => {
               rel="noreferrer"
               onClick={handleClick}
             >
-              {name}
+              {title}
             </a>
           </li>
         ))}
diff --git a/frontend/components/editor.tsx b/frontend/components/editor.tsx
deleted file mode 100644
index 14b655e..0000000
--- a/frontend/components/editor.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import Analytics from "components/Analytics/index";
-
-const Editor: React.FC = () => {
-  return (
-    <div>
-      <Analytics />
-    </div>
-  );
-};
-
-export default Editor;
diff --git a/frontend/components/index.ts b/frontend/components/index.ts
index a6f1ea8..0914f5a 100644
--- a/frontend/components/index.ts
+++ b/frontend/components/index.ts
@@ -1,3 +1,3 @@
 export { default as Links } from "./Links";
-export { default as EditLink } from "./EditLink";
+export { default as Editor } from "./Editor";
 export { default as Preview } from "./Preview";
diff --git a/frontend/next.config.js b/frontend/next.config.js
index b5619f4..6f31c75 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -10,7 +10,7 @@ const devConfig = {
     return [
       {
         source: "/api",
-        destination: "http://localhost:5000",
+        destination: "http://localhost:5000/editor/links",
       },
       {
         source: "/api/:slug",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fbaeb7e..ffb0778 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -83,7 +83,6 @@
       "version": "7.13.9",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz",
       "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.13.0",
         "jsesc": "^2.5.1",
@@ -94,7 +93,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -104,8 +102,27 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz",
+      "integrity": "sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==",
+      "requires": {
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.0",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
+          "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
         }
       }
     },
@@ -125,7 +142,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
       "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
-      "dev": true,
       "requires": {
         "@babel/helper-get-function-arity": "^7.12.13",
         "@babel/template": "^7.12.13",
@@ -136,7 +152,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -149,7 +164,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
       "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.13"
       },
@@ -158,7 +172,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -193,7 +206,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
       "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.13"
       },
@@ -202,7 +214,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -314,7 +325,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
       "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.13"
       },
@@ -323,7 +333,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -380,8 +389,7 @@
     "@babel/parser": {
       "version": "7.13.9",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.9.tgz",
-      "integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw==",
-      "dev": true
+      "integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw=="
     },
     "@babel/runtime": {
       "version": "7.12.5",
@@ -395,7 +403,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
       "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.13",
         "@babel/parser": "^7.12.13",
@@ -406,7 +413,6 @@
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
           "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
-          "dev": true,
           "requires": {
             "@babel/highlight": "^7.12.13"
           }
@@ -415,7 +421,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -428,7 +433,6 @@
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz",
       "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.13",
         "@babel/generator": "^7.13.0",
@@ -445,7 +449,6 @@
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
           "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
-          "dev": true,
           "requires": {
             "@babel/highlight": "^7.12.13"
           }
@@ -454,7 +457,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -464,8 +466,7 @@
         "globals": {
           "version": "11.12.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-          "dev": true
+          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
         }
       }
     },
@@ -479,6 +480,29 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
@@ -677,180 +701,14 @@
         "unist-util-find-all-after": "^3.0.2"
       }
     },
-    "@tailwindcss/postcss7-compat": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.3.tgz",
-      "integrity": "sha512-R43aiSzwlybDMhDld8vkSIKPSLXxbbmotZ+I2GIrX+IzFNy9JAByC7Ncf9A81Dg0JLBWHY5m769lBbBnJCF8cw==",
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
       "dev": true,
       "requires": {
-        "@fullhuman/postcss-purgecss": "^3.1.3",
-        "autoprefixer": "^9",
-        "bytes": "^3.0.0",
-        "chalk": "^4.1.0",
-        "color": "^3.1.3",
-        "detective": "^5.2.0",
-        "didyoumean": "^1.2.1",
-        "fs-extra": "^9.1.0",
-        "html-tags": "^3.1.0",
-        "lodash": "^4.17.20",
-        "modern-normalize": "^1.0.0",
-        "node-emoji": "^1.8.1",
-        "object-hash": "^2.1.1",
-        "postcss": "^7",
-        "postcss-functions": "^3",
-        "postcss-js": "^2",
-        "postcss-nested": "^4",
-        "postcss-selector-parser": "^6.0.4",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "reduce-css-calc": "^2.1.8",
-        "resolve": "^1.19.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "autoprefixer": {
-          "version": "9.8.6",
-          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
-          "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
-          "dev": true,
-          "requires": {
-            "browserslist": "^4.12.0",
-            "caniuse-lite": "^1.0.30001109",
-            "colorette": "^1.2.1",
-            "normalize-range": "^0.1.2",
-            "num2fraction": "^1.2.2",
-            "postcss": "^7.0.32",
-            "postcss-value-parser": "^4.1.0"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "3.2.1",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-              "dev": true,
-              "requires": {
-                "color-convert": "^1.9.0"
-              }
-            },
-            "chalk": {
-              "version": "2.4.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-              "dev": true,
-              "requires": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-              },
-              "dependencies": {
-                "supports-color": {
-                  "version": "5.5.0",
-                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-                  "dev": true,
-                  "requires": {
-                    "has-flag": "^3.0.0"
-                  }
-                }
-              }
-            },
-            "color-convert": {
-              "version": "1.9.3",
-              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-              "dev": true,
-              "requires": {
-                "color-name": "1.1.3"
-              }
-            },
-            "color-name": {
-              "version": "1.1.3",
-              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-              "dev": true
-            },
-            "has-flag": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-              "dev": true
-            },
-            "supports-color": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
       }
     },
     "@types/json-schema": {
@@ -914,6 +772,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-beautiful-dnd": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz",
+      "integrity": "sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.1.tgz",
@@ -923,6 +790,17 @@
         "@types/react": "*"
       }
     },
+    "@types/styled-components": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.8.tgz",
+      "integrity": "sha512-or4lQ12MhR4wTZ34rxRwI+Fw9vPqhd9WeEqFfF6yssDe1uS7L8p9YYMbmtDgHRbBKLR4aJIK8KHA0h9wSYifkg==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/unist": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
@@ -1292,6 +1170,17 @@
         "postcss-value-parser": "^4.1.0"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
+      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -1505,6 +1394,11 @@
         "quick-lru": "^4.0.1"
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-lite": {
       "version": "1.0.30001194",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001194.tgz",
@@ -1755,6 +1649,7 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
       "requires": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1779,6 +1674,29 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-unit-converter": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
@@ -1879,7 +1797,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
       "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -2673,8 +2590,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-diff": {
       "version": "1.2.0",
@@ -3066,6 +2982,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -3372,7 +3296,8 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
     },
     "isobject": {
       "version": "2.1.0",
@@ -3419,8 +3344,7 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
     },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -3696,6 +3620,11 @@
       "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
       "dev": true
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -3946,8 +3875,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "nanoid": {
       "version": "3.1.20",
@@ -4440,7 +4368,8 @@
     "path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
     },
     "path-parse": {
       "version": "1.0.6",
@@ -4563,44 +4492,6 @@
         "htmlparser2": "^3.10.0"
       }
     },
-    "postcss-js": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
-      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
-      "dev": true,
-      "requires": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^7.0.18"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "postcss-less": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
@@ -4644,44 +4535,6 @@
       "integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=",
       "dev": true
     },
-    "postcss-nested": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
-      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.32",
-        "postcss-selector-parser": "^6.0.2"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.35",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "postcss-resolve-nested-selector": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
@@ -4821,8 +4674,7 @@
     "postcss-value-parser": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-      "dev": true
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
     },
     "prebuild-install": {
       "version": "6.0.1",
@@ -5001,6 +4853,11 @@
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
       "dev": true
     },
+    "raf-schd": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.2.tgz",
+      "integrity": "sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -5050,6 +4907,20 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-beautiful-dnd": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz",
+      "integrity": "sha512-87It8sN0ineoC3nBW0SbQuTFXM6bUqM62uJGY4BtTf0yzPl8/3+bHMWkgIe0Z6m8e+gJgjWxefGRVfpE3VcdEg==",
+      "requires": {
+        "@babel/runtime": "^7.8.4",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.1.1",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      }
+    },
     "react-dom": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
@@ -5065,6 +4936,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-redux": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
+      "integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -5199,6 +5082,15 @@
         }
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
@@ -5359,6 +5251,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "sharp": {
       "version": "0.26.3",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.26.3.tgz",
@@ -5392,6 +5289,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "requires": {
         "shebang-regex": "^3.0.0"
       }
@@ -5399,7 +5297,8 @@
     "shebang-regex": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
     },
     "shell-quote": {
       "version": "1.7.2",
@@ -5739,6 +5638,23 @@
       "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=",
       "dev": true
     },
+    "styled-components": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
+      "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "styled-jsx": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.3.2.tgz",
@@ -6034,6 +5950,11 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "table": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
@@ -6220,6 +6141,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -6435,6 +6361,11 @@
         }
       }
     },
+    "use-memo-one": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
+    },
     "use-subscription": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
@@ -6520,14 +6451,6 @@
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
     },
-    "webpack-merge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
-      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
-      "requires": {
-        "lodash": "^4.17.15"
-      }
-    },
     "whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -6542,6 +6465,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
diff --git a/frontend/package.json b/frontend/package.json
index 49298d6..8bb1070 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,14 +14,19 @@
     "check:fix": "npm run format && npm run lint"
   },
   "dependencies": {
+    "fast-deep-equal": "^3.1.3",
     "next": "10.0.7",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "17.0.1",
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.2",
+    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.1",
+    "@types/styled-components": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
     "autoprefixer": "^10.2.4",
diff --git a/frontend/pages/editor.tsx b/frontend/pages/editor.tsx
index c96c1b2..9954c47 100644
--- a/frontend/pages/editor.tsx
+++ b/frontend/pages/editor.tsx
@@ -1,52 +1,79 @@
 import Head from "next/head";
 import { GetStaticProps } from "next";
-import React from "react";
+import React, { useState } from "react";
 import { AuthProvider, useAuth } from "components/Login/authcontext";
 import LoginHead from "components/Login/loginhead";
 import LoginBox from "components/Login/loginbox";
-import Editor from "components/editor";
+import Analytics from "components/Analytics";
+import Editor from "components/Editor";
+import { EditableLink } from "components/Editor/Link";
 
 export const getStaticProps: GetStaticProps = async () => {
   // TODO: Fetch links here
 
   return {
-    props: { data: null }, // will be passed to the page component as props
+    props: {
+      data: [
+        {
+          title: "dummlink1",
+          url: "www.helloworld.com",
+          clicks: 0,
+          active: true,
+        },
+        {
+          title: "dummlink2",
+          url: "www.hiworld.com",
+          clicks: 0,
+          active: true,
+        },
+      ],
+    }, // will be passed to the page component as props
     // Next.js will attempt to re-generate the page:
-    // - When a request comes in
+    // - When a request comes intype EditableLink = {
     // - At most once every second
     revalidate: 1,
   };
 };
 
-const LoginScreen: React.FC = () => {
-  return (
-    <div className="fixed h-screen w-full overflow-auto bg-gray-100">
-      <div className="m-auto h-full flex justify-center items-center">
-        <div className="container m-auto h-auto flex flex-col justify-center items-center p-10 space-y-20">
-          <Head>
-            <title>Login</title>
-          </Head>
-          <LoginHead />
-          <div className="flex justify-center items-center px-10 py-8 bg-gray-50 border-2 border-gray-300 rounded-lg">
-            <LoginBox />
-          </div>
+const LoginScreen: React.FC = () => (
+  <div className="fixed h-screen w-full overflow-auto bg-gray-100">
+    <div className="m-auto h-full flex justify-center items-center">
+      <div className="container m-auto h-auto flex flex-col justify-center items-center p-10 space-y-20">
+        <Head>
+          <title>Login</title>
+        </Head>
+        <LoginHead />
+        <div className="flex justify-center items-center px-10 py-8 bg-gray-50 border-2 border-gray-300 rounded-lg">
+          <LoginBox />
         </div>
       </div>
     </div>
+  </div>
+);
+
+interface EditorPageProps {
+  data: any;
+}
+
+const EditorPage: React.FC<EditorPageProps> = ({ data }) => {
+  const { loggedIn } = useAuth();
+  const [links, setLinks] = useState<EditableLink[]>(data ?? []);
+
+  console.log({ links });
+  return loggedIn ? (
+    <>
+      <Analytics />
+      <Editor links={links} setLinks={setLinks} />
+    </>
+  ) : (
+    <LoginScreen />
   );
 };
 
-const LoginChecker: React.FC = () => {
-  const { loggedIn } = useAuth();
-  return loggedIn ? <Editor /> : <LoginScreen />;
-};
-
-const Login: React.FC = () => {
+export default function EditorPageWrapper({ data }: any): JSX.Element {
   return (
     <AuthProvider>
-      <LoginChecker />
+      <EditorPage data={data} />
     </AuthProvider>
   );
-};
-
-export default Login;
+}
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 040d8ee..9c5e180 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -10,13 +10,20 @@ export const getStaticProps: GetStaticProps = async () => {
   const data = await fetch(API).then((res) => res.json());
 
   return {
-    props: { links: data }, // will be passed to the page component as props
+    props: { data }, // will be passed to the page component as props
     revalidate: 1,
   };
 };
 
-const Home: React.FC = ({ links }: any) => {
-  return <Links links={links} />;
+const Home: React.FC = ({ data }: any) => {
+  return (
+    <Links
+      links={data.map((dog: any) => ({
+        title: dog.name,
+        url: "https://www.google.com/",
+      }))}
+    />
+  );
 };
 
 export default Home;
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
index 6f8f1cb..7335818 100644
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@@ -1,5 +1,5 @@
 /* ./your-css-folder/styles.css */
-@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -7,6 +7,11 @@
 @font-face {
   font-family: "Karla";
   src: local("Karla"),
-       url("/fonts/Karla-VariableFont_wght.ttf") format("truetype");
+    url("/fonts/Karla-VariableFont_wght.ttf") format("truetype");
   font-style: normal;
 }
+
+input,
+button {
+  outline: none;
+}