diff --git a/calculator/index.html b/calculator/index.html
new file mode 100644
index 0000000..2a10992
--- /dev/null
+++ b/calculator/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>Calculator</title>
+  </head>
+  <body>
+    <div class="calculator">
+      <input type="text" class="display" />
+
+      <button class="clear">C</button>
+      <button>←</button>
+      <button>÷</button>
+
+      <button>7</button>
+      <button>8</button>
+      <button>9</button>
+      <button>×</button>
+
+      <button>4</button>
+      <button>5</button>
+      <button>6</button>
+      <button>-</button>
+
+      <button>1</button>
+      <button>2</button>
+      <button>3</button>
+      <button>+</button>
+
+      <button class="zero">0</button>
+      <button>=</button>
+    </div>
+  </body>
+</html>
diff --git a/calculator/style.css b/calculator/style.css
new file mode 100644
index 0000000..105a0ef
--- /dev/null
+++ b/calculator/style.css
@@ -0,0 +1,35 @@
+body {
+  font-family: "Roboto Mono", monospace;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.calculator {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.display {
+    grid-column: 1 / 5;
+    height: 50px;
+    width: 200px;
+}
+
+button {
+    height: 50px;
+}
+
+.clear {
+    grid-column: 1 / 3;
+}
+
+.zero {
+    grid-column: 1 / 4;
+}
+
+
