diff --git a/src/components/QrItem.js b/src/components/QrItem.js
new file mode 100644
index 0000000..2bcf439
--- /dev/null
+++ b/src/components/QrItem.js
@@ -0,0 +1,36 @@
+import React from "react";
+import './Qrcode.css'
+
+function calViewBox(props) {
+    if (!props.qrcode) return '0 0 0 0';
+
+    const nCount = props.qrcode.getModuleCount();
+    return '0 0 ' + String(nCount) + ' ' + String(nCount);
+}
+
+class QrItem extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.value
+        }
+    }
+
+    render() {
+        return (
+            <div className="Qr-item">
+                <div className="Qr-item-image">
+                    <svg width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white">
+                        {this.props.renderer}
+                    </svg>
+                </div>
+                <div className="Qr-item-detail">
+                    {this.state.value}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default QrItem;
diff --git a/src/components/QrRendererBase.js b/src/components/QrRendererBase.js
new file mode 100644
index 0000000..40b9fa9
--- /dev/null
+++ b/src/components/QrRendererBase.js
@@ -0,0 +1,36 @@
+import React from "react";
+import './Qrcode.css'
+
+function listPoint(props) {
+    if (!props.qrcode) return []
+
+    const qrcode = props.qrcode;
+    const nCount = qrcode.getModuleCount();
+    const pointList = new Array(nCount);
+    let id = 0;
+    for (let row = 0; row < nCount; row++) {
+        for (let col = 0; col < nCount; col++) {
+            if (qrcode.isDark(row, col))
+                pointList.push(<use key={id++} fill="black" x={row} y={col} href="#simpleRect"/>)
+        }
+    }
+    return pointList;
+}
+
+class QrRendererBase extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <svg>
+                <rect fill="black" width={1} height={1} id="simpleRect"/>
+                {listPoint(this.props)}
+            </svg>
+        );
+    }
+}
+
+export default QrRendererBase
diff --git a/src/components/QrRendererRound.js b/src/components/QrRendererRound.js
new file mode 100644
index 0000000..4c90004
--- /dev/null
+++ b/src/components/QrRendererRound.js
@@ -0,0 +1,36 @@
+import React from "react";
+import './Qrcode.css'
+
+function listPoint(props) {
+    if (!props.qrcode) return []
+
+    const qrcode = props.qrcode;
+    const nCount = qrcode.getModuleCount();
+    const pointList = new Array(nCount);
+    let id = 0;
+    for (let row = 0; row < nCount; row++) {
+        for (let col = 0; col < nCount; col++) {
+            if (qrcode.isDark(row, col))
+                pointList.push(<use key={id++} fill="black" x={row} y={col} href="#simpleRound"/>)
+        }
+    }
+    return pointList;
+}
+
+class QrRendererRound extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <svg>
+                <circle fill="black" r={0.6} id="simpleRound"/>
+                {listPoint(this.props)}
+            </svg>
+        );
+    }
+}
+
+export default QrRendererRound
diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js
index d7fadbf..1b7c288 100644
--- a/src/components/Qrcode.js
+++ b/src/components/Qrcode.js
@@ -1,51 +1,74 @@
 import React from "react";
+import QrItem from './QrItem'
+import {getQrcodeData} from "../utils/qrcodeHandler";
 import './Qrcode.css'
 
-function QrItem(props) {
-    return (
-        <div className="Qr-item">
-            <div className="Qr-item-image">
+import QrRendererBase from './QrRendererBase'
+import QrRendererRound from './QrRendererRound'
 
-            </div>
-            <div className="Qr-item-detail">
-                {props.value}
-            </div>
-        </div>
+function QrBoxList(props) {
+    return (
+        <React.Fragment>
+            <QrItem value={1} qrcode={props.qrcode} renderer={<QrRendererBase qrcode={props.qrcode}/>} />
+            <QrItem value={2} qrcode={props.qrcode} renderer={<QrRendererRound qrcode={props.qrcode}/>} />
+            <QrItem value={3} qrcode={props.qrcode} />
+            <QrItem value={4} qrcode={props.qrcode} />
+            <QrItem value={5} qrcode={props.qrcode} />
+            <QrItem value={6} qrcode={props.qrcode} />
+            <QrItem value={7} qrcode={props.qrcode} />
+            <QrItem value={8} qrcode={props.qrcode} />
+        </React.Fragment>
     );
 }
 
-function Qrs(props) {
-    const numbers = props.numbers;
-    const listItems = numbers.map((number) =>
-        <QrItem key={number.toString()}              value={number} />
+class Qrcode extends React.Component {
 
-    );
-    return (
-        <div>
-            <div className="Qr-Centered">
-                <h1>qrbtf.com</h1>
-                <input className="Qr-input" placeholder="Input your URL here"/>
-            </div>
-            <div className="Qr-titled">
-                <div className="Qr-Centered Qr-s-title">
-                    Styles
+    constructor(props) {
+        super(props);
+        this.handleChange = this.handleChange.bind(this)
+        this.handleCreate = this.handleCreate.bind(this)
+        this.state = {
+            text: '',
+            options: {text: ''},
+            qrcode: null
+        };
+    }
+
+    handleChange(e) {
+        this.setState({text: e.target.value})
+    }
+
+    handleCreate(e) {
+        const text = this.state.text
+        this.setState({options: {text: text}, qrcode: getQrcodeData({text: text})});
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="Qr-Centered">
+                    <h1>qrbtf.com</h1>
+                    <input
+                        className="Qr-input"
+                        placeholder="Input your URL here"
+                        onChange={this.handleChange}
+                        onBlur={this.handleCreate}
+                        onKeyPress={(e) => {if(e.key == 'Enter') this.handleCreate(e)}}
+                    />
                 </div>
-                <div className="Qr-s">
-                    <div className="Qr-box">
-                        {listItems}
+                <div className="Qr-titled">
+                    <div className="Qr-Centered Qr-s-title">
+                        Styles
+                    </div>
+                    <div className="Qr-s">
+                        <div className="Qr-box">
+                            <QrBoxList qrcode={this.state.qrcode} options={this.state.options}/>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-    );
-}
-
-const numbers = ['C1', 'C2', 'S1', 'D1', 'D2', 'D3', 'D4', 'A1', 'A2', 'A3', 'A4'];
-const Qrcode = (props) => {
-    return (
-        <Qrs numbers={numbers} />
-    );
+        );
+    }
 }
 
 export default Qrcode;