diff --git a/src/cryptometrics/components/content/Container.js b/src/cryptometrics/components/content/Container.js
new file mode 100644
index 0000000000000000000000000000000000000000..b267876d458f42e17128b896c3d373c75db35df6
--- /dev/null
+++ b/src/cryptometrics/components/content/Container.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Container(props) {
+  return (
+    <div className="container mx-auto pt-8 p-2 sm:p-8 md:p-16">
+      {props.children}
+    </div>
+  );
+}
+
+export default Container;
diff --git a/src/cryptometrics/components/content/Main.js b/src/cryptometrics/components/content/Main.js
new file mode 100644
index 0000000000000000000000000000000000000000..0dce157d859bec0d3701850b52734eac89258de6
--- /dev/null
+++ b/src/cryptometrics/components/content/Main.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Main(props) {
+  return (
+    <main className="flex flex-col flex-auto overflow-auto min-h-screen pl-0 transition-[padding] duration-200 dark:bg-dark-800">
+      {props.children}
+    </main>
+  );
+}
+
+export default Main;
diff --git a/src/cryptometrics/components/inputs/SearchInput.js b/src/cryptometrics/components/inputs/SearchInput.js
new file mode 100644
index 0000000000000000000000000000000000000000..32731bfeebdd90a0cbe4d821986ad8cdd00f1a29
--- /dev/null
+++ b/src/cryptometrics/components/inputs/SearchInput.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { SearchIcon } from "@heroicons/react/outline";
+
+function SearchInput() {
+  return (
+    <div className="relative">
+      <input
+        className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700"
+        placeholder="Search"
+        type="text"
+      ></input>
+      <button className="absolute top-0 right-3 bottom-0 w-6">
+        <SearchIcon className="w-6 h-6 dark:text-white" />
+      </button>
+    </div>
+  );
+}
+
+export default SearchInput;
diff --git a/src/cryptometrics/components/titles/BoldGradientHeading.js b/src/cryptometrics/components/titles/BoldGradientHeading.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a630cae70a4ea9be2714fc06abc141fe921cdcc
--- /dev/null
+++ b/src/cryptometrics/components/titles/BoldGradientHeading.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function BoldGradientHeading({ children }) {
+  return (
+    <h1 className="text-4xl font-extrabold font-poppins text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-blue-500">
+      {children}
+    </h1>
+  );
+}
+
+export default BoldGradientHeading;
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 0c3d620c337acb008c3ffecc15ebf071189905c6..0d03c27de60d760c7e0d3b5400a20a34c11cbdce 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -1,4 +1,8 @@
 import Head from "next/head";
+import Container from "../components/content/Container";
+import Main from "../components/content/Main";
+import SearchInput from "../components/inputs/SearchInput";
+import BoldGradientHeading from "../components/titles/BoldGradientHeading";
 
 export default function Home() {
   return (
@@ -8,9 +12,14 @@ export default function Home() {
         <meta name="description" content="CryptoMetrics" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="text-4xl font-extrabold text-center mt-5">
-        CryptoMetrics
-      </div>
+      <Main>
+        <Container>
+          <div className="flex flex-row justify-between">
+            <BoldGradientHeading>CryptoMetrics</BoldGradientHeading>
+            <SearchInput />
+          </div>
+        </Container>
+      </Main>
     </div>
   );
 }