diff --git a/src/App.css b/src/App.css
index cccf63a..8480766 100644
--- a/src/App.css
+++ b/src/App.css
@@ -63,9 +63,6 @@ li {
 
 #notebooks {
     background: whitesmoke;
-    position: absolute;
-    left: 50%;
-    margin-left: -175px;
     margin-top: 35px;
     width: 350px;
     padding: 15px;
@@ -83,7 +80,7 @@ li {
 ul {
     margin: 0 auto;
     padding: 0;
-    max-height: 390px;
+    max-height: 280px;
     overflow-y: auto;
     border: 1px solid rgba(0, 0, 0, 0.1);
     padding: 5px 5px 0 5px;
@@ -93,14 +90,12 @@ ul {
 
 #notebooks span {
     display: block;
-    position: absolute;
     background: #FFD32E;
-    bottom: -35px;
-    left: -1px;
-    width: 360px;
     border-radius: 0 0 5px 5px;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    padding: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    width: 350px;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
 }
\ No newline at end of file
diff --git a/src/myFaculty.js b/src/myFaculty.js
index 4e11a30..2b60a7c 100644
--- a/src/myFaculty.js
+++ b/src/myFaculty.js
@@ -49,7 +49,7 @@ export default class AutoCompletedText extends React.Component{
             return null;
         }
         return (
-            <ul >
+            <ul>
                 {
                     suggestions.map((item, index) => (<li key={index} onClick={() => this.selectedText(item)}>{item.FACULTY}</li>))
                 }
@@ -60,12 +60,19 @@ export default class AutoCompletedText extends React.Component{
     render() {
         const { text, suggestions } = this.state;
         return(
-            <div id="notebooks">
-                <h2><FontAwesomeIcon icon={faSearch} /> Search Your Faculty</h2>
-                <input id="query" type="text" onChange={this.onTextChange} value={text}/>
-                {this.renderSuggestions()}
-                {this.state.showProfile ? <Profile {...this.state.selectedFaculty}/> : <div />}
-                <span>Suggestions: {suggestions.length}</span>
+            <div style = {{
+                display:"flex",
+                flex:1,
+                justifyContent:"center",
+                alignItems:"center",
+            }}>
+                <div id="notebooks">
+                    <h2><FontAwesomeIcon icon={faSearch} /> Search Your Faculty</h2>
+                    <input id="query" type="text" onChange={this.onTextChange} value={text}/>
+                    {this.renderSuggestions()}
+                    {this.state.showProfile ? <Profile {...this.state.selectedFaculty}/> : <div />}
+                    <span>Suggestions: {suggestions.length}</span>
+                </div>
             </div>
         );
     }