diff --git a/index.js b/index.js
deleted file mode 100644
index 28a8fa1c6..000000000
--- a/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-console.log( "Hello!" );
diff --git a/package.json b/package.json
index 17ed2f33c..aed4893d0 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "github-profile-card",
   "version": "0.0.1",
   "description": "Generate github profile card",
-  "main": "index.js",
+  "main": "src/app.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/src/app.js b/src/app.js
new file mode 100644
index 000000000..4aa13e749
--- /dev/null
+++ b/src/app.js
@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+const writer = require("./utils/svg-writer");
+const TopLangCard = require("./templates/top-lang-card");
+
+var myArgs = process.argv.slice(2);
+let card = new TopLangCard("user");
+writer.save("test", card.getSVG());
diff --git a/src/const/theme.js b/src/const/theme.js
new file mode 100644
index 000000000..926520368
--- /dev/null
+++ b/src/const/theme.js
@@ -0,0 +1,12 @@
+const Theme={
+    default:
+    `
+      .card-title{
+      font: 500 20px 'Segoe UI', Ubuntu, Sans-Serif;
+      fill: black;
+      }
+      .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: grey } 
+    `
+}
+
+module.exports = Theme;
diff --git a/src/templates/card.js b/src/templates/card.js
new file mode 100644
index 000000000..e322e6837
--- /dev/null
+++ b/src/templates/card.js
@@ -0,0 +1,65 @@
+const Theme = require("../const/theme");
+
+class Card {
+  constructor(
+    title = "Title",
+    width = 320,
+    height = 180,
+    theme = Theme.default
+  ) {
+    this.title = title;
+    this.paddingX = 20;
+    this.paddingY = 30;
+    this.theme = theme;
+    this.width = width;
+    this.height = height;
+  }
+
+  getContentSVG() {
+    return "";
+  }
+
+  getSVG() {
+    return `
+      <svg
+        height= "${this.height}"
+        width= "${this.width}"
+        viewBox="0 0 ${this.width} ${this.height}"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+      <style>
+      ${this.theme}
+      </style>
+      
+      <rect
+        data-testid="card-bg"
+        rx="4.0"
+        ry="4.0"
+        height="100%"
+        stroke="#E4E2E2"
+        fill="#006600"
+        stroke-opacity="1"
+        />
+
+      <g
+        data-testid="card-title"
+        transform="translate(${this.paddingX}, ${this.paddingY})"
+      >
+      <text
+        class="card-title"
+        data-testid="card-title"
+      >
+      ${this.title}
+      </text>
+      </g>
+        <g
+          data-testid="card-content"
+        >
+        </g>
+      </svg>
+          `;
+  }
+}
+
+module.exports = Card;
diff --git a/src/templates/top-lang-card.js b/src/templates/top-lang-card.js
new file mode 100644
index 000000000..eeca4d355
--- /dev/null
+++ b/src/templates/top-lang-card.js
@@ -0,0 +1,21 @@
+const Theme = require("../const/theme");
+const Card = require("./card");
+
+class TopLangCard extends Card {
+  constructor(
+    username,
+    title = "TopLangCard",
+    width = 320,
+    height = 180,
+    theme = Theme.default
+  ) {
+    super(title, width, height, theme);
+    this.username = username;
+  }
+  getContentSVG() {
+    return `
+        `;
+  }
+}
+
+module.exports = TopLangCard;
diff --git a/src/utils/svg-writer.js b/src/utils/svg-writer.js
new file mode 100644
index 000000000..01fe50d3d
--- /dev/null
+++ b/src/utils/svg-writer.js
@@ -0,0 +1,13 @@
+const fs = require("fs");
+module.exports.save = function (filename, svgString) {
+  const folder = "/tmp/github-svg/";
+  fs.mkdir(folder, { recursive: true }, (err) => {
+    if (err) throw err;
+  });
+  fs.writeFileSync(`${folder}${filename}.svg`, svgString, function (
+    err,
+    result
+  ) {
+    if (err) console.log("error", err);
+  });
+};