diff --git a/package-lock.json b/package-lock.json
index c3a5814..214a6f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,11 +27,13 @@
         "react-dom": "^18.2.0",
         "react-hotkeys": "^2.0.0",
         "react-i18next": "^11.18.3",
+        "react-loading-skeleton": "^3.1.0",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "react-scrollbars-custom": "^4.1.0",
         "storybook-addon-pseudo-states": "^1.15.1",
+        "swiper": "^8.3.2",
         "tailwindcss": "^3.1.7",
         "tsconfig-paths-webpack-plugin": "^4.0.0",
         "typescript": "^4.7.4",
@@ -16220,6 +16222,14 @@
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
       "dev": true
     },
+    "node_modules/dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "dependencies": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "node_modules/domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -29008,6 +29018,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
+      "integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-merge-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
@@ -32959,6 +32977,11 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -33598,6 +33621,29 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.3.2.tgz",
+      "integrity": "sha512-8wsC7ORYvVSnLUoxs2+xmfLrDPNjBVQXMCFbOlqtHeON6wtu/blOyySDr8TCBCdse1bdcIbn7m8xJNxVFL8o4Q==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -48570,6 +48616,14 @@
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
       "dev": true
     },
+    "dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "requires": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -58057,6 +58111,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-loading-skeleton": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
+      "integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw=="
+    },
     "react-merge-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
@@ -61036,6 +61095,11 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -61526,6 +61590,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.3.2.tgz",
+      "integrity": "sha512-8wsC7ORYvVSnLUoxs2+xmfLrDPNjBVQXMCFbOlqtHeON6wtu/blOyySDr8TCBCdse1bdcIbn7m8xJNxVFL8o4Q==",
+      "requires": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 0273842..369ffad 100644
--- a/package.json
+++ b/package.json
@@ -22,11 +22,13 @@
     "react-dom": "^18.2.0",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.18.3",
+    "react-loading-skeleton": "^3.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-scrollbars-custom": "^4.1.0",
     "storybook-addon-pseudo-states": "^1.15.1",
+    "swiper": "^8.3.2",
     "tailwindcss": "^3.1.7",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.7.4",
diff --git a/src/components/AspectRatio.tsx b/src/components/AspectRatio.tsx
new file mode 100644
index 0000000..be6a1b8
--- /dev/null
+++ b/src/components/AspectRatio.tsx
@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import React from "react";
+
+export type Props = {
+  /**
+   * The style of component
+   */
+  className?: string;
+  /**
+   * The optional child
+   */
+  children?: React.ReactNode;
+};
+const AspectRatio = ({ className, children }: Props) => {
+  return (
+    <div
+      className={classNames(
+        "relative overflow-hidden pt-[55%] rounded w-full",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+AspectRatio.Content = function AspectRatioContent({
+  className,
+  children,
+}: Props) {
+  return (
+    <div className={classNames([className, "absolute top-0 w-full h-full"])}>
+      {children}
+    </div>
+  );
+};
+
+export default AspectRatio;
diff --git a/src/components/FeaturedAuthors.tsx b/src/components/FeaturedAuthors.tsx
index a3efad3..c81a1d4 100644
--- a/src/components/FeaturedAuthors.tsx
+++ b/src/components/FeaturedAuthors.tsx
@@ -6,7 +6,6 @@ import SkeletonCard from "./SkeletonCard";
 import { Button } from "./Button/Button";
 import Avatar from "./Avatar";
 import Card from "./Card";
-import Link from "./Link";
 
 /* -------------------------------------------------------------------------- */
 /*                                   Swiper                                   */
@@ -27,6 +26,7 @@ import Authors from "./Authors.json";
 /*                                    Icons                                   */
 /* -------------------------------------------------------------------------- */
 import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
+import Link from "./typography/Link";
 
 /* -------------------------------------------------------------------------- */
 /*                                  Variables                                 */
diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx
new file mode 100644
index 0000000..21ac885
--- /dev/null
+++ b/src/components/MainSection.tsx
@@ -0,0 +1,104 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Imports                                  */
+/* -------------------------------------------------------------------------- */
+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>
+  );
+}
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 8698e4b..182d2d3 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -6,7 +6,6 @@ import classNames from "classnames";
 import "../index.css";
 import { Combobox, Transition } from "@headlessui/react";
 import { Fragment, useEffect, useState } from "react";
-import { Scrollbar } from "react-scrollbars-custom";
 
 /* -------------------------------------------------------------------------- */
 /*                               Component props                              */
@@ -16,15 +15,18 @@ type Hint = {
   caption: string;
 };
 
-type Props = {
+type Props<T> = {
   onChange: (query: string) => void;
-  onSelected?: (value: Hint) => void;
+  onSelected: (value: Hint) => void;
+  IsEmptyItems: () => React.ReactNode;
   hints: Hint[];
+  displayValueResolver?: (element: T) => any;
   disabled?: boolean;
   inGroup?: boolean;
   className?: string;
   maxScrollSize?: number;
   elementScrollSize?: number;
+  placeHolder?: string;
 };
 /* -------------------------------------------------------------------------- */
 /*                                 styles                                     */
@@ -67,17 +69,20 @@ const inputInGroup = [
 /*                          Component implementation                          */
 /* -------------------------------------------------------------------------- */
 
-export default function TextInputBox({
+export default function SearchBar<T>({
   onChange,
   onSelected,
   hints,
+  displayValueResolver,
   disabled,
-  inGroup,
+  inGroup = false,
   className,
   maxScrollSize = 140,
   elementScrollSize = 36,
+  placeHolder = "Search...",
+  IsEmptyItems,
   ...props
-}: Props) {
+}: Props<T>) {
   const [selected, setSelected] = useState<any>(hints);
   const [query, setQuery] = useState("");
 
@@ -90,7 +95,7 @@ export default function TextInputBox({
     onSelected && onSelected(value);
   };
   return (
-    <div className={classNames("w-60", className)}>
+    <div>
       <Combobox value={selected} {...props} onChange={handleSelected}>
         <div className="relative">
           <div className="relative w-full  bg-white text-left focus:outline-none sm:text-sm">
@@ -101,8 +106,10 @@ export default function TextInputBox({
                 className,
               ])}
               onChange={(event) => setQuery(event.target.value)}
-              placeholder={"Search..."}
-              displayValue={(hint: Hint | undefined) => hint?.caption ?? ""}
+              placeholder={placeHolder}
+              displayValue={(value: T) =>
+                displayValueResolver ? displayValueResolver(value) : value
+              }
             />
           </div>
           <div>
@@ -113,36 +120,35 @@ export default function TextInputBox({
                   leave="transition ease-in duration-100"
                   leaveFrom="opacity-100"
                   leaveTo="opacity-0"
+                  afterLeave={() => setQuery("")}
                 >
                   <Combobox.Options>
-                    {hints.length === 0 && query !== "" ? (
-                      <p className="">Nothing found.</p>
-                    ) : null}
+                    {hints.length === 0 && query !== "" ? IsEmptyItems() : null}
                     {/* <Scrollbar
                       style={{
                         height: hints.length * elementScrollSize,
                         maxHeight: maxScrollSize,
                       }}
                     > */}
-                      {hints.map((item: any, id: number) => (
-                        <Combobox.Option
-                          key={id}
-                          className={({ active, selected }) =>
-                            classNames(
-                              active
-                                ? "text-gray-900 bg-blue-50"
-                                : "font-normal ",
-                              "cursor-default select-none relative py-2 pl-3 pr-9",
-                              selected
-                                ? "text-gray-900 bg-blue-100"
-                                : "font-normal "
-                            )
-                          }
-                          value={item}
-                        >
-                          <div>{item.caption}</div>
-                        </Combobox.Option>
-                      ))}
+                    {hints.map((item: any, id: number) => (
+                      <Combobox.Option
+                        key={id}
+                        className={({ active, selected }) =>
+                          classNames(
+                            active
+                              ? "text-gray-900 bg-blue-50"
+                              : "font-normal ",
+                            "cursor-default select-none relative py-2 pl-3 pr-9",
+                            selected
+                              ? "text-gray-900 bg-blue-100"
+                              : "font-normal "
+                          )
+                        }
+                        value={item}
+                      >
+                        <div>{item.caption}</div>
+                      </Combobox.Option>
+                    ))}
                     {/* </Scrollbar> */}
                   </Combobox.Options>
                 </Transition>
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 1670d5d..0310de3 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -6,7 +6,7 @@ import { Fragment } from "react";
 import { Listbox, Transition } from "@headlessui/react";
 import classNames from "classnames";
 import "../index.css";
-import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg";
+import { ReactComponent as SelectIcon } from "../assets/svg/caret-down.svg";
 import { Scrollbar } from "react-scrollbars-custom";
 
 /* -------------------------------------------------------------------------- */
@@ -98,10 +98,10 @@ function Select<T>({
                   displayValueResolver ? displayValueResolver(value) : value
                 }`}</span>
                 <span className={`${SelectIconStyle}`}>
-                  <SelectIcon
+                  <SelectIcon 
                     className={`${
                       open ? "rotate-180 transform" : "font-normal"
-                    } h-2 w-3`}
+                    } h-3 w-4 fill-black hover:fill-black stroke-black`}
                   />
                 </span>
               </>
@@ -114,12 +114,12 @@ function Select<T>({
             leaveTo="opacity-0"
           >
             <Listbox.Options className={`${SelectOptionsStyle}`}>
-              <Scrollbar
+              {/* <Scrollbar
                 style={{
                   height: options.length * elementScrollSize,
                   maxHeight: maxScrollSize,
                 }}
-              >
+              > */}
                 {options.map((option, id) => (
                   <Listbox.Option
                     key={id}
@@ -139,7 +139,7 @@ function Select<T>({
                     }`}
                   </Listbox.Option>
                 ))}
-              </Scrollbar>
+              {/* </Scrollbar> */}
             </Listbox.Options>
           </Transition>
         </div>
diff --git a/src/components/typography/Heading.tsx b/src/components/typography/Heading.tsx
index a476ea4..324d888 100644
--- a/src/components/typography/Heading.tsx
+++ b/src/components/typography/Heading.tsx
@@ -1,9 +1,20 @@
 import React from "react";
+import classNames from "classnames";
 
 type Props = {
+  className?: string | undefined;
   children: React.ReactNode;
 };
 
-export default function Heading({ children }: Props) {
-  return <h3 className="text-2xl text-current font-medium leading-relaxed">{children}</h3>;
+export default function Heading({ children, className }: Props) {
+  return (
+    <h3
+      className={classNames([
+        className,
+        "text-2xl text-current font-medium leading-7 ",
+      ])}
+    >
+      {children}
+    </h3>
+  );
 }