diff --git a/src/components/search/AdvanceSearchOptions.js b/src/components/search/AdvanceSearchOptions.js
new file mode 100644
index 0000000..a3b66c4
--- /dev/null
+++ b/src/components/search/AdvanceSearchOptions.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import './AdvanceSearchOptions.scss';
+
+export default class AdvanceSearchOptions extends React.Component {
+    render() {
+        return (
+            <div className="adv-options">
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2017"
+                        name="year"
+                        value="2017"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2018"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2019"
+                        name="year"
+                        value="207"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2020"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2021"
+                        name="year"
+                        value="2017"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2022"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2023"
+                        name="year"
+                        value="2017"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2024"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2025"
+                        name="year"
+                        value="2017"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2026"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+            </div>
+        );
+    }
+}
+
+/**
+ * Radio
+ * @param {props} - accepts props from parent component
+ */
+
+const Radio = props => {
+    return(
+        <div className="form-check">
+            <input className="form-check-input" type="radio" name={props.name} value={props.value} id={props.id} />
+            <label className="form-check-label" htmlFor={props.id}>
+                {props.label_text}
+            </label>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/search/AdvanceSearchOptions.scss b/src/components/search/AdvanceSearchOptions.scss
new file mode 100644
index 0000000..38d5be5
--- /dev/null
+++ b/src/components/search/AdvanceSearchOptions.scss
@@ -0,0 +1,37 @@
+.adv-options {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    font-weight: 900;
+    border-top: 1px solid #c0c0c0a8;
+    border-bottom: 1px solid #c0c0c0a8;
+
+    & .form-check { 
+        & .form-check-label {
+            font-weight: 300;
+            font-size: .9rem;
+            cursor: pointer;
+        }
+
+        &:hover {
+            color: #37a000;
+        }
+    }
+    & section {
+        width: auto;
+        min-width: 15%;
+        margin: 20px;
+
+        & .section-header {
+            margin: 4px 0;
+        }
+    }
+
+}
+
+@media (max-width: 800px) {
+    .adv-options {
+    
+       
+    }    
+}
\ No newline at end of file
diff --git a/src/components/search/Search.js b/src/components/search/Search.js
new file mode 100644
index 0000000..a2b264e
--- /dev/null
+++ b/src/components/search/Search.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import './Search.scss';
+import AdvanceSearchOptions from './AdvanceSearchOptions';
+import SearchResult from './SearchResult';
+
+export default class SearchBox extends React.Component {
+
+    constructor() {
+        super();
+
+        this.fetchData = this.fetchData.bind(this);
+        this.state = {
+            showAdvSearch: false,
+            searchResult: null
+        }
+    }
+
+    onFormSubmit(e) {
+        e.preventDefault();
+        this.fetchData();
+    }
+
+    toggleFilter(e) {
+        this.setState({
+            showAdvSearch: !this.state.showAdvSearch
+        })
+    }
+
+    fetchData() {
+        fetch('https://jsonplaceholder.typicode.com/posts')
+        .then(data => data.json())
+        .then(data => this.setState({searchResult: data}));
+    }
+
+    render() {
+        return(
+            <>
+                <div className="search-wrapper">
+                    <form className="search-box" action="/" method="GET" onSubmit={this.onFormSubmit.bind(this)}>
+                        <div className="basic-search">
+                            <input type="search" name="q" placeholder="Enter a Search Query"/>
+                            <input type="submit" value="GO"/>
+                            <input type="button" value="Filter" onClick={this.toggleFilter.bind(this)}/>
+                        </div>
+                        <div className={this.state.showAdvSearch === true ? 'adv-search' : 'adv-search hide-adv-search'}>
+                            <AdvanceSearchOptions />
+                        </div>
+                    </form>
+                    <div className="search-result">
+                        {this.state.searchResult !== null ? this.state.searchResult.map((val, i) => <SearchResult header={val.title} description={val.body} key={i} />) : <NoDataFound/> }
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
+
+/**
+ * No data found - search result 
+ */
+
+const NoDataFound = () => {
+    return(
+        <div className="no-data-found">No Data Found... Press 'GO' to Load Dummy Data!</div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/search/Search.scss b/src/components/search/Search.scss
new file mode 100644
index 0000000..f58c063
--- /dev/null
+++ b/src/components/search/Search.scss
@@ -0,0 +1,98 @@
+.search-wrapper {
+    width: 80%;
+    margin: auto;
+    padding: 30px 0;
+    border-radius: 4px;
+    box-shadow: 0 0 10px 0 #c0c0c0a8;
+    // border: 1px solid #c4c4c467;
+    // border-bottom: 1px solid #c4c4c467;
+
+    & form.search-box, 
+    & .search-result {
+        width: 90%;
+        margin: auto;
+
+        & .basic-search {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+
+            & > * {
+                border: 1px solid #37a000;
+                padding: 10px;
+                background: transparent;
+                border-radius: 3px;
+                font-weight: 900;
+            }
+    
+            & input[name="q"] {
+                width: 80%;
+    
+                &::placeholder {
+                    color: #37a000;
+                }
+            }
+    
+            & input[type="submit"],
+            & input[type="button"] {
+                width: 9.5%;
+                color: #37a000;
+                cursor: pointer;
+            }
+            
+            & input[type="submit"] {
+                background: #37a000;
+                color: #fff;
+            }
+        }
+
+        & .adv-search {
+            overflow: hidden;
+            max-height: 600px;
+            padding-top: 30px;
+            transition: .4s cubic-bezier(.65,.05,.36,1) all;
+        }
+
+        // & .show-adv-search {
+        // }
+
+        & .hide-adv-search {
+            max-height: 0;
+            padding-top: 0;
+        }
+    }
+}
+
+@media (max-width: 800px) {
+    .search-wrapper {
+        width: 95%;
+        & form.search-box {
+            & .basic-search {
+                & input[name="q"] {
+                    width: 100%;
+                }
+        
+                & input[type="submit"],
+                & input[type="button"] {
+                    margin-top: 1px;
+                    width: 49.5%;
+                }
+            }
+            & .adv-search {
+                max-height: 800px;
+            }
+
+            & .hide-adv-search {
+                max-height: 0;
+            }
+        }
+    }
+}
+
+// no data found
+.no-data-found {
+    font-size: 1.2rem;
+    color: #9b9b9b;
+    margin: 2rem 0;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/search/SearchResult.js b/src/components/search/SearchResult.js
new file mode 100644
index 0000000..242591e
--- /dev/null
+++ b/src/components/search/SearchResult.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import './SearchResult.scss'
+
+export default class SearchResult extends React.Component {
+    constructor(props) {
+        super();
+    }
+    render() {
+        return(
+            <>
+                <div className="result-card">
+                    <div className="header">{this.props.header}</div>
+                    <div className="description">{this.props.description}</div>
+                    <div className="action">
+                        <button className="button download">Download</button>
+                        <button className="button view">View</button>
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/components/search/SearchResult.scss b/src/components/search/SearchResult.scss
new file mode 100644
index 0000000..cbb9d55
--- /dev/null
+++ b/src/components/search/SearchResult.scss
@@ -0,0 +1,24 @@
+.result-card {
+    padding: 40px 0;
+    border-bottom: 1px solid #c0c0c0a8;
+
+    & .header {
+        font-size: 1.2rem;
+        font-weight: bolder;
+    }
+
+    & .description {
+        color: #5a5a5a;
+        margin: 10px 0;
+    }
+
+    & .button {
+        background: unset;
+        font-size: inherit;
+        border: 1px solid #c0c0c0a8;
+        margin: 1px;
+        padding: 7px 10px;
+        border-radius: 2px; 
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 1bc0df7..73c99aa 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,14 +2,15 @@
 
 <html>
 
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-  <base href="/">
-  <title>WP4R</title>
-</head>
-
-<body>
-  <div id="app"></div>
-</body>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <base href="/">
+    <title>WP4R</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
 
 </html>
\ No newline at end of file
diff --git a/src/views/home/home.view.js b/src/views/home/home.view.js
index 3cb2d7d..7431345 100644
--- a/src/views/home/home.view.js
+++ b/src/views/home/home.view.js
@@ -1,7 +1,12 @@
 import React from "react";
+import SearchBox from "../../components/search/Search"
 
 function Home() {
-  return <div>Home</div>;
+  return (
+    <>
+      <SearchBox/>
+    </>
+  );
 }
 
 export default Home;