diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx
new file mode 100644
index 0000000..3bc0ad1
--- /dev/null
+++ b/src/components/MainSection.tsx
@@ -0,0 +1,105 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Imports                                  */
+/* -------------------------------------------------------------------------- */
+import classNames from "classnames";
+import React from "react";
+import Inputgroup from "./Inputgroup";
+import Select from "./Select";
+import { useState } from "react";
+import { Button } from "./Button/Button";
+import { SVGSearch } from "../components/icons";
+import SearchBar from "components/SearchBar";
+
+type Props<T, H> = {
+  className?: string;
+  options: T[];
+  hintsValues: H[];
+  displayValueResolver?: (element: T) => any;
+};
+
+/* -------------------------------------------------------------------------- */
+/*                          Component implementation                          */
+/* -------------------------------------------------------------------------- */
+
+export default function MainSection<T, H>({
+  className,
+  options,
+  hintsValues,
+  displayValueResolver,
+  ...props
+}: Props<T, H>) {
+  const [value, setValue] = useState(options[0]); // Category
+
+  const [hints, setHints] = useState<any[]>([]); //Response list
+  const [onSelected, setOnSelected] = useState(""); // Selected item from response list
+  const [query, setQuery] = useState(""); // Query
+
+  const onChange = (query: string) => {
+    //console.log(query)
+    setQuery(query);
+    setHints(hintsValues);
+  };
+  const onClick = () => {
+    console.log(displayValueResolver ? displayValueResolver(value) : value);
+    console.log(onSelected);
+    console.log(query);
+  };
+  const searchResolver = (item: any) => {
+    setOnSelected(item.caption);
+    console.log(onSelected);
+  };
+  //empty items message
+  const IsEmptyItems = () => {
+    return <p className="tex-blue-500">Nothing Found</p>;
+  };
+
+  return (
+    <div className="bg-main bg-center bg-cover bg-origin-border bg-no-repeat h-full py-32 px-2 sm:px-6 md:px-6 lg:px-0">
+      <div className="m-auto text-center font-bold text-4xl ">
+        Scientific Library with Free Access
+      </div>
+      <div className="flex flex-row items-center justify-center space-x-3 pt-2">
+        <div className=" text-2xl text-gray-400">Search</div>
+        <div className=" text-3xl text-blue-500">320 455</div>
+        <div className=" text-2xl text-gray-400">Items</div>
+      </div>
+      <div className="max-w-xl m-auto pt-16">
+        <Inputgroup className="m-0 p-0">
+          <div className="flex items-center w-full divide-x-2 divide-solid divide-gray-200">
+            <div className="flex w-1/3">
+              <Select
+                inGroup={true}
+                className="w-full top-0"
+                options={options}
+                value={value}
+                onChange={setValue}
+                displayValueResolver={(value: any) => value?.name ?? ""}
+              />
+            </div>
+            <div className="w-full">
+              <SearchBar
+                className="w-full"
+                hints={hints}
+                onChange={onChange}
+                onSelected={searchResolver}
+                inGroup={true}
+                IsEmptyItems={IsEmptyItems}
+                displayValueResolver={(value: any) => value.caption}
+              />
+            </div>
+          </div>
+          <div className="pr-0.5">
+            <Button onClick={onClick}>
+              <Button.Icon>
+                <SVGSearch className="fill-white stroke-white w-4 "></SVGSearch>
+              </Button.Icon>
+            </Button>
+          </div>
+        </Inputgroup>
+        <div className="mt-7 pr-1 text-right font-semibold text-sm">
+          Advanced Search
+        </div>
+      </div>
+    </div>
+  );
+}