diff --git a/src/App.css b/src/App.css
index e69de29..83cfb0c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,11 @@
+button{
+    width:100px;
+    height:100px;
+    background-color: gray;
+    margin: 10px;
+    font-size: 30px;
+}
+
+#display{
+    font-size: 26px;;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index f99674f..e0b4ed7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,10 @@
 import './App.css';
+import Calculator from './Components/Calculator';
 
 function App() {
   return (
     <div className="App">
-   
+      <Calculator/>
     </div>
   );
 }
diff --git a/src/Components/Button.js b/src/Components/Button.js
index e3de568..40d5f7d 100644
--- a/src/Components/Button.js
+++ b/src/Components/Button.js
@@ -1,3 +1,6 @@
 export default function Button(props){
-    
+
+    return(
+        <button>{props.children}</button>
+    )
 }
\ No newline at end of file
diff --git a/src/Components/Calculator.js b/src/Components/Calculator.js
new file mode 100644
index 0000000..b97c600
--- /dev/null
+++ b/src/Components/Calculator.js
@@ -0,0 +1,33 @@
+import { useState } from "react";
+import NumPad from "./NumPad";
+import Operators from "./Operators";
+
+export default function Calculator(props){
+    const [input,setInput] = useState(0)
+    const [memory,setMemory] = useState(0)
+    const [operation,setOperation] = useState("")
+
+
+    function handleInput(content){    
+        if(typeof content === "number" ){
+            setInput(prev=>{return prev.toString()+content.toString()})
+        }else{ //EXTRA CONDITION FOR DECIMAL, REGEX TO MAKE IT MAKE SENSE
+            setMemory(input)
+            setInput(0)
+            setOperation(content)
+        }
+    }
+
+
+    return(
+        <>
+        <div id="display">
+            <p id="memory">{memory}</p>
+            <p id="input">{input}</p>
+            <p id="operation">{operation}</p>
+        </div>
+        <NumPad handleInput={handleInput}/>
+        <Operators handleInput={handleInput}/>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/Components/NumPad.js b/src/Components/NumPad.js
new file mode 100644
index 0000000..5da55db
--- /dev/null
+++ b/src/Components/NumPad.js
@@ -0,0 +1,28 @@
+import Button from "./Button"
+export default function NumPad(props){
+    const map = {
+        zero:{number:0,callback:""},
+        one:{number:1,callback:""},
+        two:{number:2,callback:""},
+        three:{number:3,callback:""},
+        four:{number:4,callback:""},
+        five:{number:5,callback:""},
+        six:{number:6,callback:""},
+        seven:{number:7,callback:""},
+        eight:{number:8,callback:""},
+        nine:{number:9,callback:""}
+    }
+    const numPad = Object.keys(map).map((e,i)=>{
+        return(
+            <Button id={e} number={map[e].number} key={"numPad"+e} callback={map[e]}>
+                {i}
+            </Button>
+        )
+    })
+
+    return(
+        <>
+        {numPad}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/Components/Operators.js b/src/Components/Operators.js
new file mode 100644
index 0000000..a46a4a8
--- /dev/null
+++ b/src/Components/Operators.js
@@ -0,0 +1,19 @@
+import Button from "./Button";
+export default function Operators(props){
+    const map = {
+        add:{symbol:"+",callback:""},
+        subtract:{symbol:"-",callback:""},
+        multiply:{symbol:"x",callback:""},
+        divide:{symbol:"/",callback:""},
+        decimal:{symbol:".",callback:""}
+    }
+
+    const operators = Object.keys(map).map(e=>{
+        return <Button  id={e} callback={map[e].callback} key={e}>
+                    {map[e].symbol}
+                </Button>
+    })
+
+    return ( <>{operators}</>)
+    
+}
\ No newline at end of file