diff --git a/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif b/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif
index 2a257b043..693dc88c8 100644
Binary files a/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif and b/samples/react-onedrive-finder/Assets/OneDrivefinderSample3.gif differ
diff --git a/samples/react-onedrive-finder/Assets/OneDrivefinderSample4.PNG b/samples/react-onedrive-finder/Assets/OneDrivefinderSample4.PNG
new file mode 100644
index 000000000..b81fcef1c
Binary files /dev/null and b/samples/react-onedrive-finder/Assets/OneDrivefinderSample4.PNG differ
diff --git a/samples/react-onedrive-finder/Assets/sample.json b/samples/react-onedrive-finder/Assets/sample.json
index a3b664826..a61dba5ad 100644
--- a/samples/react-onedrive-finder/Assets/sample.json
+++ b/samples/react-onedrive-finder/Assets/sample.json
@@ -9,8 +9,8 @@
       "This sample access drives from OneDrive and navigate between his content using Graph OneDrive and Site API and Microsoft Graph Toolkit React controls with the addition of new FileList control.",
       "This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file. "
     ],
-    "created": "2021-04-16",
-    "modified": "2021-04-24",
+    "creationDateTime": "2021-04-16",
+    "updateDateTime": "2021-04-29",
     "products": [
       "SharePoint",
       "Office"
diff --git a/samples/react-onedrive-finder/README.md b/samples/react-onedrive-finder/README.md
index f030cde12..eef43680d 100644
--- a/samples/react-onedrive-finder/README.md
+++ b/samples/react-onedrive-finder/README.md
@@ -2,9 +2,14 @@
 
 ## Summary
 
-This sample access drives from OneDrive and navigate between his content using **Graph OneDrive and Site API and [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit) react controls "@microsoft/mgt-react**" with the addition of new control **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136) "still preview version"** . This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file.
+This sample access drives from OneDrive and navigate between his content using **Graph OneDrive and Site API and [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit) react controls "@microsoft/mgt-react**" with the addition of new controls **Mgt-File-List [FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/stories/components/fileList.stories.js)** and **Mgt-File [File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/stories/components/file.stories.js) "Beta version"** . This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file.
 
-**[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136)** control allow to load files base on graph querys or parameters ids.
+**[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file-list.md)** control allow to load files base on graph querys or parameters ids.
+
+**[File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file.md)** control allow to File component is used to represent an individual file/folder from OneDrive or SharePoint base on graph querys or parameters ids.
+
+Below a draw resuming the custom query's made and what control uses to retrieve associated folders and files from different locations.
+![Demo](./Assets/OneDrivefinderSample4.PNG)
 
 ### Retrieve Sites with drives associate
 
@@ -14,7 +19,7 @@ This sample access drives from OneDrive and navigate between his content using *
 
 ![Demo](./Assets/OneDrivefinderSample2.PNG)
 
-### Navigate and filter extensions
+### Navigate, search Files and filter extensions
 
 ![Demo](./Assets/OneDrivefinderSample3.gif)
 
@@ -43,6 +48,7 @@ react-onedrive-finder | [André Lage](http://aaclage.blogspot.com) ([@aaclage](h
 
 Version|Date|Comments
 -------|----|--------
+1.2|April 30, 2021|Include content Search on Drive Library, file details and Minimal style change.
 1.1|April 24, 2021|Fixes, optimization, Styling and extension filter included
 1.0|April 16, 2021|Initial release
 
@@ -82,8 +88,11 @@ Description of the extension that expands upon high-level summary above.
 This extension illustrates the following concepts:
 
 - Easy to navigate between shared Drives using **Graph API and Breadcrumb**
-- **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136)** control allow to load documents base on graph querys or parameters ids.
-
+- Search in OneDrive Library
+- Filter by File Extension
+- Change theme of control
+- **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file-list.md)** New mgt-file-list control.
+- **[File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file.md)** New mgt-file control.
 
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-onedrive-finder" />
 
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx
new file mode 100644
index 000000000..3882a1788
--- /dev/null
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {IDialogFileProps } from './IDialogFileProps';
+import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; 
+import { File,ViewType } from '@microsoft/mgt-react';
+
+export function DialogFile(props: IDialogFileProps) {
+    let _queryString= "";
+    const { open, fileItem, onClose } = props;
+
+    const dialogStyles = { main: { maxWidth: 800 } };
+
+    const dialogContentProps = {
+        type: DialogType.normal,
+        title: 'File Details',
+    };
+
+    const handleClose = () => () => {
+        onClose();
+    };
+
+    const modalProps = {
+        isBlocking: true,
+    };
+
+    const checkLink = () => {
+        if(fileItem != null)
+        {
+            window.open(fileItem.webUrl, '_blank');
+        }
+    };
+    if(fileItem != null)
+    {
+        _queryString = "/drives/"+fileItem.parentReference.driveId +"/items/"+ fileItem.id;
+    }
+    
+    return (
+        <Dialog
+            hidden={!open}
+            onDismiss={handleClose()}
+            dialogContentProps={dialogContentProps}
+            styles={dialogStyles}
+            modalProps={modalProps}>
+                <File
+                view={ViewType.threelines}
+                fileQuery={_queryString}
+                ></File>
+                <Link onClick={checkLink} >File link</Link>
+            <DialogFooter>
+                <DefaultButton onClick={handleClose()} text="Close" />
+            </DialogFooter>
+        </Dialog>
+    );
+} 
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/IDialogFileProps.ts b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/IDialogFileProps.ts
new file mode 100644
index 000000000..477871e1e
--- /dev/null
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/IDialogFileProps.ts
@@ -0,0 +1,5 @@
+export interface IDialogFileProps {
+    open: boolean;
+    fileItem:any;
+    onClose: () => void;
+}
\ No newline at end of file
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
index b7cb21511..3d43c0ba2 100644
--- a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts
@@ -10,4 +10,7 @@ export interface IOneDriveFinderState {
     siteItems: IDropdownOption[];
     fileExtensions: string[];
     customStyle: string;
+    searchDrive: string;
+    dialogFileStatus: boolean;
+    dialogFile: any;
 }
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.module.scss b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.module.scss
index b0469f771..fed4b8a50 100644
--- a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.module.scss
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.module.scss
@@ -1,4 +1,4 @@
-.some-page-wrapper {
+.pageWrapper {
   margin: 5px;
 }
 
diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
index e9b78fbd4..7a059054a 100644
--- a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
+++ b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx
@@ -3,11 +3,14 @@ import styles from './OneDriveFinder.module.scss';
 import { IOneDriveFinderProps } from './IOneDriveFinderProps';
 import { IOneDriveFinderState } from './IOneDriveFinderState';
 import { FileList } from '@microsoft/mgt-react';
+import { DialogFile } from './Dialog/DialogFile';
 import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
 import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';
 import { AadHttpClient } from "@microsoft/sp-http";
 import { ITheme, mergeStyleSets, getTheme } from 'office-ui-fabric-react/lib/Styling';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
+import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
 
 const theme: ITheme = getTheme();
 const { palette, fonts } = theme;
@@ -39,6 +42,8 @@ const onRenderCaretDown = (): JSX.Element => {
   return <Icon iconName="PageRight" />;
 };
 
+const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
+
 /**
  * 
  * @param option 
@@ -107,13 +112,17 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       siteItems: [],
       itemID: "",
       fileExtensions: [],
-      customStyle:""
+      customStyle: "",
+      searchDrive: "",
+      dialogFileStatus: false,
+      dialogFile: null
     };
     this.getDomainData();
   }
 
   public render(): React.ReactElement<IOneDriveFinderProps> {
-    const CheckDrives = (e, selectedOption) => {
+    const CheckDrives = (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
+
       if (selectedOption.data.root == undefined) {
         this._siteID = selectedOption.key.toString();
         this.setState({
@@ -132,7 +141,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       this.getDrives(selectedOption);
     };
 
-    const CheckPageSize= (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
+    const CheckPageSize = (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
       let fileListpageSize: number;
       fileListpageSize = +selectedOption.key;
       this.setState({
@@ -144,9 +153,9 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       let fileExtensions: string[] = [];
       if (selectedOption.selected == true) {
         fileExtensions.push(selectedOption.key.toString());
-        fileExtensions = [...fileExtensions,...this.state.fileExtensions];
+        fileExtensions = [...fileExtensions, ...this.state.fileExtensions];
       } else {
-        fileExtensions = this.state.fileExtensions.filter(e => e !== selectedOption.key );
+        fileExtensions = this.state.fileExtensions.filter(e => e !== selectedOption.key);
       }
       this.setState({
         fileExtensions: [...fileExtensions]
@@ -164,23 +173,46 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
         });
       }
     };
-    
-    const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, customStyle } = this.state;
+
+    const checkSearchDrive = (SearchQuery: string) => {
+      if (this.state.siteID != "") {
+        this.setState({
+          searchDrive: "/sites/" + this.state.siteID + "/drive/root/search(q='" + SearchQuery + "')"
+        });
+      } else {
+        this.setState({
+          searchDrive: "/me/drive/root/search(q='" + SearchQuery + "')"
+        });
+      }
+    };
+    const checkClear = (ev: any) => {
+      this.setState({
+        searchDrive: ""
+      });
+    };
+    const selectFile = (selectedFile: any) => {
+      console.log(selectedFile.detail);
+      this.setState({
+        dialogFileStatus: true,
+        dialogFile: selectedFile.detail,
+      });
+    };
+
+    const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, searchDrive, customStyle } = this.state;
     this._itemID = itemID;
     this._siteID = siteID;
     this._breadcrumbItem = breadcrumbItem;
     this._pageSize = pageSize;
     this._customStyle = customStyle;
-    if(fileExtensions.length != 0)
-    {
+    if (fileExtensions.length != 0) {
       this._fileExtensions = fileExtensions;
     }
-    else{
+    else {
       this._fileExtensions = null;
     }
     return (
       <div>
-        <div className={styles['some-page-wrapper']}>
+        <div className={styles.pageWrapper}>
           <div className={styles.row}>
             <div className={styles.column}>
               <Dropdown
@@ -251,7 +283,12 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
             ariaLabel="Breadcrumb with items rendered as buttons"
             overflowAriaLabel="More links"
           />
-          {(this.state.itemID != "") &&
+          {(this.state.breadcrumbItem.length > 0) &&
+            <Stack tokens={stackTokens}>
+              <SearchBox placeholder="Search Drive" onSearch={checkSearchDrive} onClear={checkClear} />
+            </Stack>
+          }
+          {(this.state.itemID != "" && this.state.searchDrive == "") &&
             <FileList
               className={this._customStyle}
               fileExtensions={this._fileExtensions}
@@ -261,18 +298,35 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
               itemClick={this.manageFolder}
             ></FileList>
           }
+          {(this.state.searchDrive != "") &&
+            <FileList
+              className={this._customStyle}
+              fileExtensions={this._fileExtensions}
+              pageSize={this._pageSize}
+              fileListQuery={searchDrive}
+              itemClick={selectFile}
+            ></FileList>
+          }
+          <DialogFile
+            open={this.state.dialogFileStatus}
+            fileItem={this.state.dialogFile}
+            onClose={() => {
+              this.setState({
+                dialogFileStatus: false
+              });
+            }}
+          ></DialogFile>
         </div>
       </div>
     );
   }
-  
+
   /**
    * 
    * @param e 
    * Capture file or folder and manages breadcrumb
    */
   private manageFolder = (e: any) => {
-
     if (e.detail.folder != undefined) {
       this._breadcrumbItem.push({
         text: e.detail.name,
@@ -301,7 +355,11 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
         breadcrumbItem: this._breadcrumbItem
       });
     } else {
-      window.open(e.detail.webUrl, '_blank');
+      console.log(e.detail);
+      this.setState({
+        dialogFileStatus: true,
+        dialogFile: e.detail,
+      });
     }
   }
   private getRootDriveFolderID = async (siteID) => {