diff --git a/public/index.html b/public/index.html
index 536be3b..14ef258 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,7 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
+<link href="https://unpkg.com/pattern.css" rel="stylesheet">
 
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index 8fd2717..d384834 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -8,8 +8,9 @@ class ConfigCover extends React.Component {
     state = {
         title: 'How I built my first project with react',
         bgcolor: '',
-        border: ''
-       
+        border: '',
+        pattern: ''
+
     };
 
     render() {
@@ -17,7 +18,7 @@ class ConfigCover extends React.Component {
             <div className="container">
 
                 <div className="inputData">
-                    <input type="text" placeholder="Enter title here" className="inputTitle"
+                    <input type="text" placeholder="Enter title here" className="inputTitle form-control"
                         onChange={e => this.setState({ title: e.target.value })}></input>
 
                     {/* <div className="d-flex flex-row">
@@ -38,24 +39,50 @@ class ConfigCover extends React.Component {
                     <input type="color" defaultValue="#8c52ff"
                         onChange={e => this.setState({ border: e.target.value })} />
 
+                    <label>Background Pattern</label>
+                    <select onChange={e => this.setState({ pattern: e.target.value })}
+                        className="form-control">
+                        <option>none</option>
 
+                        <option>pattern-grid-md</option>
+                        <option>pattern-grid-lg</option>
+                        <option>pattern-grid-xl</option>
+
+                        <option>pattern-cross-dots-xl</option>
+                        <option>pattern-dots-lg</option>
+
+                        <option>pattern-diagonal-lines-md</option>
+                        <option>pattern-diagonal-lines-lg</option>
+                        <option>pattern-diagonal-lines-xl</option>
+
+                        <option>pattern-vertical-lines-md</option>
+                        <option>pattern-vertical-lines-lg</option>
+                        <option>pattern-vertical-lines-xl</option>
+
+                        <option>pattern-horizontal-lines-md</option>
+                        <option>pattern-horizontal-lines-lg</option>
+                        <option>pattern-horizontal-lines-xl</option>
+
+
+                    </select>
                 </div>
 
-<ComponentToImg>
-<CoverImage
+                <ComponentToImg>
+                    <CoverImage
+
+                        title={this.state.title}
+                        bgcolor={this.state.bgcolor}
+                        border={this.state.border}
+                        pattern={this.state.pattern}
+
+
+
+                    />
+                </ComponentToImg>
 
-title={this.state.title}
-bgcolor={this.state.bgcolor}
-border={this.state.border}
-
-
-    
-/>
-</ComponentToImg>
 
 
 
-                
 
 
 
diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index 1db5b7b..a35a0ad 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -7,12 +7,14 @@ class CoverImage extends React.Component {
 
     render() {
         return (
-            <div className="cover"
+            <div className={` cover ${this.props.pattern}`}
                 style={{ backgroundColor:this.props.bgcolor }}>
+                    <div className={`${this.props.pattern}`}>
                 <div className="card"
                     style={{ borderTop: `15px solid ${this.props.border}`}}>
                     <h1>{this.props.title}</h1>
                 </div>
+                </div>
             </div>