diff --git a/index.js b/index.js
index 67f8e0b..1bb35ab 100644
--- a/index.js
+++ b/index.js
@@ -1,15 +1,13 @@
 'use strict';
-// project dependencies
-const fs = require('fs');
-const path = require('path');
-
 // Electron dependencies
 const { app, BrowserWindow, ipcMain } = require('electron');
 
-const modules = require('./modules/index');
+// project dependencies
+const modules = require('./modules/git');
+const api = require('./modules/api');
 
 // global electron window object
-let win;
+let win, authWindow;
 
 // global var for dir
 let dir;
@@ -51,6 +49,21 @@ ipcMain.on('changeUser', function(evet, data) {
 	});
 }); 
 
+ipcMain.on('login', async () => {
+	console.log('received login, creating window...');
+	authWindow = await api.handleGitHub();
+
+	authWindow.webContents.on('will-navigate', (event, url) => {
+		console.log('received will-navigate');
+		api.handleGitHubCallback(authWindow, url, win);
+	});
+
+	authWindow.on('close', () => {
+		authWindow = null;
+	}, false);
+});
+
+
 ipcMain.on('chooseDir', async function(event, data) {
 	// set dir
 	dir = modules.chooseDir(win);
diff --git a/modules/api.js b/modules/api.js
new file mode 100644
index 0000000..6512eaf
--- /dev/null
+++ b/modules/api.js
@@ -0,0 +1,59 @@
+'use strict';
+const { BrowserWindow, ipcRenderer } = require('electron');
+
+const axios = require('axios');
+
+let options = {
+    client_id: '552f169c185b172eda15',
+    client_secret: 'e4e065e669f64a60a979990000ea2b321303e1d0',
+    scopes: ["repo", "user:email"]
+};
+
+function handleGitHub() {
+    let authWindow = new BrowserWindow({
+        width: 600,
+        height: 800,
+        show: false,
+        'node-integration': true
+    });
+
+    let url = `https://github.com/login/oauth/authorize?client_id=${options.client_id}&scope=${options.scopes}`
+    authWindow.loadURL(url);
+    authWindow.show();
+
+    return authWindow;
+}
+
+function handleGitHubCallback(authWindow, url, mainWin) {
+    console.log('handleGitHubCallback hit');
+    let raw_code = /code=([^&]*)/.exec(url) || null;
+    let code = (raw_code && raw_code.length > 1) ? raw_code[1] : null;
+    let error = /\?error=(.+)$/.exec(url);
+
+    if(code || error) {
+        authWindow.destroy();
+
+        if(code) {
+            requestGitHubToken(code, mainWin);
+        } else {
+            console.log('Error in handleGitHubCallback');
+        }
+    }
+}
+
+function requestGitHubToken(code, mainWin) {
+    axios.post('https://github.com/login/oauth/access_token', {
+        client_id: options.client_id,
+        client_secret: options.client_secret,
+        code: code
+    })
+    .then((response) => {
+        let token = response.data.split('&')[0].split('=')[1];
+        mainWin.webContents.send("token", token);
+    });
+}
+
+module.exports = {
+    handleGitHub,
+    handleGitHubCallback
+};
\ No newline at end of file
diff --git a/modules/index.js b/modules/git.js
similarity index 100%
rename from modules/index.js
rename to modules/git.js
diff --git a/package-lock.json b/package-lock.json
index ff5e8d4..4b0d13a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "cpgc",
-  "version": "1.0.0",
+  "version": "0.0.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -67,6 +67,16 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "dev": true,
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      }
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -356,6 +366,32 @@
         }
       }
     },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "dev": true,
+      "requires": {
+        "debug": "=3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -465,6 +501,12 @@
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
+    "is-buffer": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+      "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==",
+      "dev": true
+    },
     "is-finite": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
diff --git a/package.json b/package.json
index 5fbee5a..5f9a810 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/ayush123460/cpgc#readme",
   "devDependencies": {
+    "axios": "^0.19.0",
     "electron": "^6.0.12"
   }
 }
diff --git a/src/css/main.css b/src/css/main.css
index c8428db..00825a8 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -122,4 +122,61 @@ a.active {
     background: transparent;
     border: 1px solid;
     border-radius: 5px;
+}
+
+p {
+    font-size: 14pt;
+}
+
+button {
+    display: block;
+    width: 150px;
+    height: 50px;
+    font-size: 12pt;
+    font-weight: 500;
+    text-transform: uppercase;
+    
+    background: #3788CE;
+    border: none;
+    border-radius: 4px;
+}
+
+button:hover {
+    cursor: pointer;
+}
+
+.wrapper {
+    width: 80%;
+    height: 100%;
+    margin: 0 auto;
+    padding: 1em 1.5em;
+}
+
+.header {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* background: #0D3E68; */
+    /* color: white; */
+    padding: 1em 0;
+    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.05);
+}
+
+.header > h1 {
+    font-weight: 800;
+    font-style: italic;
+    font-size: 42pt;
+    line-height: 0;
+}
+
+.header > h4 {
+    margin-top: 10px;
+    font-weight: 600;
+    line-height: 0;
+    font-size: 16pt;
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 1b384ee..e326064 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
 			<div class="left">
 				<header>
 					<h1>CPGC</h1>
-					<h3>0.0.5</h3>
+					<h3>0.1.0</h3>
 				</header>
 				<!-- <div class="user_name">
 					User Name:
@@ -48,31 +48,5 @@
 		</div>
 	</body>
 
-	<script>
-		const electron = require('electron');
-		const ipc = electron.ipcRenderer;
-
-		ipc.on('send_username', function(event, args) {
-			document.getElementById("user_name").innerHTML = args;
-			console.log(args);
-		});
-		ipc.on('send_useremail', function(event, args) {
-			document.getElementById("user_email").innerHTML = args;
-			console.log(args);
-		});
-		ipc.on('send_remote', function(event, args) {
-			document.getElementById("remote").innerHTML = args;
-			console.log(args);
-		});
-
-		ipc.on('send_status', function(event, args) {
-			document.getElementById("status").innerHTML = args;
-			console.log(args);
-		});
-
-		ipc.on('send_log', function(event, args) {
-			document.getElementById("log").innerHTML = args;
-			console.log(args);
-		});
-	</script>
+	<script src="js/main.js"></script>
 </html>
diff --git a/src/intro.html b/src/intro.html
index 4569d73..94a6cfc 100644
--- a/src/intro.html
+++ b/src/intro.html
@@ -5,48 +5,33 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,800" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,800" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="css/normalize.css">
     <link rel="stylesheet" type="text/css" href="css/main.css">
     <title>CPGC</title>
 </head>
 <body>
-    <h1>Choose repo:</h1>
-    <div class="user_info" style="display: none;">
-        <form id="user_info">
-            <input type="name" id="user.name" required>
-            <input type="email" id="user.email" required>
-            <input type="submit" value="Submit" onclick="handleUserChange()">
-        </form>
+    <div class="header">
+        <h1>CPGC</h1>
+        <h4>0.1.0</h4>
     </div>
 
-    <button onclick="handleClick()" id="chooseRepo">Choose Repo</button>
-
-    <script>
-        const { ipcRenderer } = require('electron');
-
-        ipcRenderer.on('get-user-name', function(event, data) {
-            if(data == true) {
-                document.querySelector('.user_info').style.display = "block";
-                document.querySelector('#chooseRepo').style.display = "none";
-            }
-        });
+    <div class="wrapper">
+        <p>Welcome! Please choose a folder to continue</p>
+        <button onclick="handleClick()" id="chooseRepo">Choose folder</button>
+    </div>
 
-        function handleClick() {
-            ipcRenderer.sendSync('chooseDir');
-        }
+    <!-- <button onclick="login()">login</button> -->
 
-        function handleUserChange() {
-            event.preventDefault();
-            let name = document.getElementById('user.name').value;
-            let email = document.getElementById('user.email').value;
 
-            let user = {
-                'name': name,
-                'email': email
-            }
+    <!-- <div class="user_info" style="display: none;">
+        <form id="user_info">
+            <input type="name" id="user.name" required>
+            <input type="email" id="user.email" required>
+            <input type="submit" value="Submit" onclick="handleUserChange()">
+        </form>
+    </div> -->
 
-            ipcRenderer.sendSync('changeUser', user);
-        }
-    </script>
+    <script src="js/intro.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/js/intro.js b/src/js/intro.js
new file mode 100644
index 0000000..8dc690c
--- /dev/null
+++ b/src/js/intro.js
@@ -0,0 +1,34 @@
+const { ipcRenderer } = require('electron');
+
+ipcRenderer.on('get-user-name', function(event, data) {
+    if(data == true) {
+        document.querySelector('.user_info').style.display = "block";
+        document.querySelector('#chooseRepo').style.display = "none";
+    }
+});
+
+ipcRenderer.on('token', function(event, data) {
+    localStorage.setItem('token', data);
+});
+
+function handleClick() {
+    ipcRenderer.sendSync('chooseDir');
+}
+
+function handleUserChange() {
+    event.preventDefault();
+    let name = document.getElementById('user.name').value;
+    let email = document.getElementById('user.email').value;
+
+    let user = {
+        'name': name,
+        'email': email
+    }
+
+    ipcRenderer.sendSync('changeUser', user);
+}
+
+function login() {
+    event.preventDefault();
+    ipcRenderer.send('login');
+}
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 0000000..13ea305
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,25 @@
+const electron = require('electron');
+const ipc = electron.ipcRenderer;
+
+ipc.on('send_username', function(event, args) {
+    document.getElementById("user_name").innerHTML = args;
+    console.log(args);
+});
+ipc.on('send_useremail', function(event, args) {
+    document.getElementById("user_email").innerHTML = args;
+    console.log(args);
+});
+ipc.on('send_remote', function(event, args) {
+    document.getElementById("remote").innerHTML = args;
+    console.log(args);
+});
+
+ipc.on('send_status', function(event, args) {
+    document.getElementById("status").innerHTML = args;
+    console.log(args);
+});
+
+ipc.on('send_log', function(event, args) {
+    document.getElementById("log").innerHTML = args;
+    console.log(args);
+});
\ No newline at end of file