diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.css b/src/components/layouts/ThreeColumn/ColumnLayout.css
new file mode 100644
index 0000000..7ad8bb3
--- /dev/null
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.css
@@ -0,0 +1,35 @@
+.left-bar {
+  grid-area: lb;
+}
+
+.main-bar {
+  grid-area: main;
+}
+
+.right-bar {
+  grid-area: rb;
+}
+
+.column-layout-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "main" "rb";
+}
+
+@media (min-width: 768px) {
+  .column-layout-grid {
+    display: grid;
+    grid-template-columns: minmax(300px, 1fr);
+    grid-template-areas:
+      "lb main"
+      "lb rb";
+  }
+}
+
+@media (min-width: 1280px) {
+  .column-layout-grid {
+    display: grid;
+    grid-template-columns: 300px 1fr 300px;
+    grid-template-areas: "lb main rb";
+  }
+}
diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.tsx b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
new file mode 100644
index 0000000..ddd3d1a
--- /dev/null
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
@@ -0,0 +1,95 @@
+import React, { Fragment, useState, useRef, useEffect } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
+import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies";
+import { Button } from "components/Button/Button";
+import classNames from "classnames";
+import "./ColumnLayout.css";
+import { container } from "webpack";
+
+/* -------------------------------------------------------------------------- */
+/*                    Custom hook to track container width                    */
+/* -------------------------------------------------------------------------- */
+const useScreenWidth = () => {
+  const ref: any = useRef();
+  const [width, setWidth] = useState<null | number>(null);
+
+  const observer = useRef(
+    new ResizeObserver((entries) => {
+      const { width } = entries[0].contentRect;
+      setWidth(width);
+    })
+  );
+
+  useEffect(() => {
+    observer.current.observe(ref.current);
+  }, [ref, observer]);
+
+  return [ref, width];
+};
+
+/* -------------------------------------------------------------------------- */
+/*                            Component properties                            */
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------- */
+/*                             Component function                             */
+/* -------------------------------------------------------------------------- */
+export function ColumnLayout() {
+  const mdScreen = 768;
+
+  //Hooks
+  const [ref, widthElement] = useScreenWidth(); // to track width of screen
+  const [openLeftBar, setOpenLeftBar] = useState(false); //to open or close left bar
+  function leftBar() {
+    return setOpenLeftBar(!openLeftBar);
+  }
+  // Change openLeftBar when width of screen > 768
+  useEffect(() => {
+    if (widthElement > mdScreen) {
+      setOpenLeftBar(false);
+    }
+  });
+
+  return (
+    <div ref={ref} className="w-full px-2 xl:px-12 column-layout-grid">
+      <Transition
+        appear
+        as={Fragment}
+        show={widthElement < mdScreen ? openLeftBar : true}
+        enter={classNames(
+          widthElement < mdScreen
+            ? "ease-in-out duration-150"
+            : "transition-none"
+        )}
+        enterFrom="-translate-x-full"
+        enterTo="translate-x-0"
+        leave="ease-in-out duration-150"
+        leaveFrom="translate-x-0"
+        leaveTo="-translate-x-full"
+      >
+        <div
+          className={classNames("h-full bg-blue-600 left-bar", {
+            "fixed inset-0 w-80": widthElement < mdScreen,
+          })}
+        >
+          ffadfag
+        </div>
+      </Transition>
+
+      <div className="text-gray-900 bg-blue-200 h-full main-bar">
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ad,
+        autem quas hic architecto iusto maxime veritatis laborum. Quas ducimus
+        sequi impedit harum tempora est nesciunt porro assumenda animi
+        temporibus?
+        <div className="h-96 bg-blue-100"></div>
+        <div className="h-96 bg-blue-400"></div>
+        <div className="h-96 bg-blue-700"></div>
+        <div className="h-96 bg-blue-100"></div>
+        <div className="h-96 bg-blue-200"></div>
+        <div className="h-96 bg-blue-800"></div>
+      </div>
+      <div className="h-full  bg-blue-400 right-bar">dflajdfjlj</div>
+    </div>
+  );
+}