diff --git a/src/components/App.css b/src/components/App.css
new file mode 100644
index 0000000..2f53998
--- /dev/null
+++ b/src/components/App.css
@@ -0,0 +1,4 @@
+.navbar{
+    color:#ffffff;
+    padding-left:40px;
+}
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index e73d983..afe5d9d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ConfigCover from './ConfigCover';
-
+import Navbar from './Navbar';
 
 class App extends React.Component {
 
@@ -8,6 +8,8 @@ class App extends React.Component {
     render() {
         return (
             <div>
+                <Navbar />
+
                 <ConfigCover />
             </div>
 
diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css
index b3b033d..5da5ce0 100644
--- a/src/components/ConfigCover.css
+++ b/src/components/ConfigCover.css
@@ -1,12 +1,20 @@
 .container{
-    margin:20px;
+    width:auto;
     display:flex;
     flex-direction: column;
     
     justify-content: center;
     align-items: center;
 }
-
+.inputData{
+    margin:60px 0px 20px 0px;
+}
 label{margin:5px;}
-.input-sm{width:60px;}
-input{margin:4px;}
\ No newline at end of file
+input{margin:4px;}
+
+.inputTitle{
+    height:40px;
+    width:300px;
+    border-radius:4px;
+    padding-left:20px;
+}
\ No newline at end of file
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index 0e03a8f..cf42308 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -5,8 +5,6 @@ class ConfigCover extends React.Component {
 
     state = {
         title: 'How I built my first project with react',
-        height: 420,
-        width: 800,
         bgcolor: '',
         bxshadow: ''
     };
@@ -15,38 +13,37 @@ class ConfigCover extends React.Component {
         return (
             <div className="container">
 
-                
-                    <input type="text" placeholder="Enter title here" 
-                    onChange={e=>this.setState({title:e.target.value})}></input>
+                <div className="inputData">
+                    <input type="text" placeholder="Enter title here" className="inputTitle"
+                        onChange={e => this.setState({ title: e.target.value })}></input>
 
-                    <div className="d-flex flex-row">
+                    {/* <div className="d-flex flex-row">
                         <label >width</label>
                         <input type="number" name="width" className="input-sm"
                         onChange={e=>this.setState({width:e.target.value})}></input>
                         <label >height</label>
                         <input type="number" name="height" className="input-sm"
                         onChange={e=>this.setState({height:e.target.value})}></input>
-                    </div>
+                    </div> */}
 
 
                     <label>Background</label>
-                    <input type="color" defaultValue="#c5a8ff" 
-                    onChange={e=>this.setState({bgcolor:e.target.value})}/>
+                    <input type="color" defaultValue="#c5a8ff"
+                        onChange={e => this.setState({ bgcolor: e.target.value })} />
 
                     <label>box-shadow</label>
                     <input type="color" defaultValue="#8c52ff"
-                    onChange={e=>this.setState({bxshadow:e.target.value})} />
+                        onChange={e => this.setState({ bxshadow: e.target.value })} />
 
 
+                </div>
 
-                
 
-                <CoverImage 
-                title={this.state.title} 
-                bgcolor={this.state.bgcolor}
-                bxshadow={this.state.bxshadow}
-                height={this.state.height}
-                width={this.state.width}
+                <CoverImage
+                    title={this.state.title}
+                    bgcolor={this.state.bgcolor}
+                    bxshadow={this.state.bxshadow}
+                    
                 />
 
 
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index 06c9655..1c0cba1 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -6,8 +6,8 @@
 }
 .cover{
     
-    width:auto;
-    height:auto;
+    width:800px;
+    height:420px;
     background-color: #c5a8ff;
     text-align: center;
     
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
new file mode 100644
index 0000000..947f1a9
--- /dev/null
+++ b/src/components/Navbar.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import './App.css';
+
+const Navbar = () => {
+
+    return <nav className="navbar bg-dark"><h4>CoverView</h4></nav>;
+
+
+
+};
+
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ec13dfa..b8ec135 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ import App from './components/App';
 
 
 ReactDOM.render(
-    <App/>,
+    <App />,
     document.querySelector('#root')
 );