diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/html/css/main.css b/html/css/main.css
deleted file mode 100644
index 14cb8fb..0000000
--- a/html/css/main.css
+++ /dev/null
@@ -1,82 +0,0 @@
-html,
-body {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    color: #292929;
-    /* max-width: 99vw; */
-}
-
-*,
-*::before, 
-*::after {
-    box-sizing: inherit;
-}
-
-header {
-    height: 80px;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.05);
-}
-
-header > h1 {
-    font-family: 'Montserrat', sans-serif;
-    letter-spacing: 0.3rem;
-    font-size: 2.2rem;
-}
-
-.container {
-    display: grid;
-    grid-template-rows: 1fr;
-    /* grid-column-gap: 10px; */
-    grid-template-columns: 300px 0px 1fr;
-    grid-template-areas: 'left gap right';
-    height: 100%;
-    background: #eee;
-    min-height: 0;
-    min-width: 0;
-    overflow-wrap: break-word;
-}
-
-.container > .left {
-    grid-area: left;
-    background: #999;
-    padding: 1.5em 1em;
-    overflow: hidden;
-    min-width: 0;
-}
-
-.left > .user_email {
-    margin: 50px 0;
-}
-
-.container > .right {
-    grid-area: right;
-    padding: 1.5em 1em;
-    overflow: hidden;
-    min-width: 0;
-}
-
-.container > .right > #status {
-    width: 100%;
-    height: 300px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    overflow-wrap: break-word;
-    background: transparent;
-    border: 1px solid;
-    border-radius: 5px;
-}
-
-.container > .right > #log {
-    width: 100%;
-    height: 300px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    overflow-wrap: break-word;
-    background: transparent;
-    border: 1px solid;
-    border-radius: 5px;
-}
\ No newline at end of file
diff --git a/index.js b/index.js
index e33042d..67f8e0b 100644
--- a/index.js
+++ b/index.js
@@ -1,39 +1,73 @@
-const { platform, EOL } = require('os');
-const { execSync } = require('child_process');
+'use strict';
+// project dependencies
 const fs = require('fs');
 const path = require('path');
-const { app, BrowserWindow } = require('electron');
-const ipc = require('electron').ipcMain;
 
-function createWindow() {
-	let win = new BrowserWindow({
-		width: 800,
-		height: 600,
+// Electron dependencies
+const { app, BrowserWindow, ipcMain } = require('electron');
+
+const modules = require('./modules/index');
+
+// global electron window object
+let win;
+
+// global var for dir
+let dir;
+
+// global vars for user and repo info.
+let user, repo;
+
+async function createWindow() {
+	user = modules.getUserInfo();
+
+	win = new BrowserWindow({
+		width: 1280,
+		height: 800,
 		webPreferences: {
 			nodeIntegration: true
 		}
 	});
 
-	//win.loadFile('html/index.html');
-	// win.webContents.openDevTools()
-	win.webContents.on('did-finish-load', () => {
-		win.webContents.send('send_username', name);
-		win.webContents.send('send_useremail', email);
-		win.webContents.send('send_remote', remote);
-		win.webContents.send('send_status', status);
-		win.webContents.send('send_log', log);
-		win.webContents.send('send_branch', branch);
-	});
+	// load the index.html file
+	win.loadFile('src/intro.html');
+
+	if(user.name == undefined || user.email == undefined) {
+		win.webContents.on('did-finish-load', function() {
+			win.webContents.send('get-user-name', true);
+		});
+	}
 }
 
-//app.on('ready', createWindow);
+// when done init, create the window.
+app.on('ready', createWindow);
 
-// let user = execSync("git config --list").toString().split(EOL);
-let email = execSync("git config user.email").toString();
-let name = execSync("git config user.name").toString();
-let remote = execSync("git config remote.origin.url").toString();
+ipcMain.on('changeUser', function(evet, data) {
+	modules.changeUser(data);
 
-let status = execSync("git status").toString();
-let log = execSync("git log").toString();
-let branch = execSync("git branch").toString().split("\n");
-console.log(branch[0].split(' ')[1]);
+	win.loadFile('src/intro.html');
+
+	win.webContents.on('did-finish-load', function() {
+		win.webContents.send('get-user-name', false);
+	});
+}); 
+
+ipcMain.on('chooseDir', async function(event, data) {
+	// set dir
+	dir = modules.chooseDir(win);
+
+	// load main view
+	win.loadFile('src/index.html');
+
+	// load the user info
+	repo = await modules.getRepoInfo(dir);
+
+	// when done loading the window, send the details.
+	win.webContents.on('did-finish-load', () => {
+		win.webContents.send('send_username', user.name);
+		win.webContents.send('send_useremail', user.email);
+		win.webContents.send('send_remote', repo.remote);
+		win.webContents.send('send_status', repo.status);
+		win.webContents.send('send_log', repo.log);
+		win.webContents.send('send_branch', repo.branch);
+	});
+});
\ No newline at end of file
diff --git a/modules/index.js b/modules/index.js
new file mode 100644
index 0000000..ecba732
--- /dev/null
+++ b/modules/index.js
@@ -0,0 +1,71 @@
+'use strict';
+const { execSync } = require('child_process');
+const { dialog } = require('electron');
+
+function getRepoInfo(dir) {
+    let remote = execSync("git config remote.origin.url", { cwd: dir }).toString().split('//')[1].split('/')[2];
+    
+    let status = execSync("git status", { cwd: dir }).toString();
+
+    let log = execSync("git log", { cwd: dir }).toString();
+
+    // get branch, split by nextline, take the first one(assumed to be active), split by space and take the name of the branch
+    let branch = execSync("git branch").toString().split("\n")[0].split(' ')[1];
+
+    return {
+        'remote': remote,
+        'status': status,
+        'log': log,
+        'branch': branch
+    };
+}
+
+function getUserInfo() {
+    let name, email;
+
+    try {
+        email = execSync("git config user.email").toString();
+    } catch(e) {
+        email = undefined;
+    }
+    try {
+        name = execSync("git config user.name").toString();
+    } catch(e) {
+        name = undefined;
+    }
+
+    return {
+        'name': name,
+        'email': email
+    }
+}
+
+function chooseDir(win) {
+    let d = dialog.showOpenDialogSync(win, {
+        properties: [
+            'openDirectory'
+        ]
+    });
+    return d[0];
+}
+
+function changeUser(user) {
+    try {
+        execSync(`git config --global user.name "${user.name}"`);
+    } catch(e) {
+        console.log(e);
+    }
+
+    try {
+        execSync(`git config --global user.email "${user.email}"`);
+    } catch(e) {
+        console.log(e);
+    }
+}
+
+module.exports = {
+    getUserInfo,
+    getRepoInfo,
+    chooseDir,
+    changeUser,
+};
\ No newline at end of file
diff --git a/package.json b/package.json
index 9fa0918..5fbee5a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpgc",
-  "version": "1.0.0",
+  "version": "0.0.5",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/src/css/main.css b/src/css/main.css
new file mode 100644
index 0000000..c8428db
--- /dev/null
+++ b/src/css/main.css
@@ -0,0 +1,125 @@
+.u-full-width {
+    width: 100%;
+}
+
+section {
+    display: block;
+    margin: 20px 0;
+    padding-left: 0.4rem;
+    font-weight: 600;
+    font-size: 32pt;
+    border-left: 5px solid #0D3E68;
+}
+
+body {
+    font-family: 'Montserrat', 'sans-serif';
+    font-weight: 400;
+    color: #292929;
+}
+
+.container {
+    display: grid;
+    grid-template-rows: 1fr;
+    /* grid-column-gap: 10px; */
+    grid-template-columns: 200px 32px 1fr;
+    grid-template-areas: 'left gap right';
+    height: 100%;
+    background: #EFEFEF;
+    min-height: 0;
+    min-width: 0;
+}
+
+.container > .left {
+    grid-area: left;
+    background: #0D3E68;
+    color: white;
+    overflow: hidden;
+    min-width: 0;
+}
+
+.left > header {
+    margin-top: 51px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.left > header > h1 {
+    font-size: 32pt;
+    line-height: 0;
+    font-weight: 800;
+    font-style: italic;
+}
+
+.left > header > h3 {
+    margin-top: 10px;
+    font-size: 16pt;
+    line-height: 0;
+    font-weight: 500;
+}
+
+.left > .container {
+    background: transparent;
+    margin-top: 70px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.left > .container > a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-transform: uppercase;
+    font-size: 14px;
+    height: 47px;
+    width: 100%;
+    color: white;
+    text-decoration: none;
+}
+
+a.active {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.left > .user_email {
+    margin: 50px 0;
+}
+
+.container > .right {
+    grid-area: right;
+    padding: 1.5em 0;
+    overflow: hidden;
+    min-width: 0;
+}
+
+.window {
+    width: 95%;
+    height: 77%;
+    background: white;
+    border-radius: 5px;
+    box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.05);
+}
+
+.container > .right > #status {
+    width: 100%;
+    height: 300px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    overflow-wrap: break-word;
+    background: transparent;
+    border: 1px solid;
+    border-radius: 5px;
+}
+
+.container > .right > #log {
+    width: 100%;
+    height: 300px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    overflow-wrap: break-word;
+    background: transparent;
+    border: 1px solid;
+    border-radius: 5px;
+}
\ No newline at end of file
diff --git a/src/css/normalize.css b/src/css/normalize.css
new file mode 100644
index 0000000..c45a85f
--- /dev/null
+++ b/src/css/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }
\ No newline at end of file
diff --git a/html/index.html b/src/index.html
similarity index 70%
rename from html/index.html
rename to src/index.html
index 0352543..1b384ee 100644
--- a/html/index.html
+++ b/src/index.html
@@ -1,17 +1,18 @@
 <html>
 	<head>
 		<title>CPGC</title>
-		<link href="https://fonts.googleapis.com/css?family=Montserrat:800i&display=swap" 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">
 	</head>
 	<body>
-		<header>
-			<h1>CPGC</h1>
-		</header>
-
 		<div class="container">
 			<div class="left">
-				<div class="user_name">
+				<header>
+					<h1>CPGC</h1>
+					<h3>0.0.5</h3>
+				</header>
+				<!-- <div class="user_name">
 					User Name:
 					<span id="user_name"></span>
 				</div>
@@ -24,13 +25,25 @@
 				<div class="remote">
 					Remote URL: <br>
 					<span id="remote"></span>
+				</div> -->
+
+				<div class="container u-full-width">
+					<a href="" class="active">Overview</a>
 				</div>
 			</div>
 			<div class="right">
-				Git Status: <br>
+				<div class="user_name">
+					Welcome,&nbsp;<span id="user_name"></span>
+				</div>
+
+				<section>Overview</section>
+				<div class="container window">
+
+				</div>
+				<!-- Git Status: <br>
 				<textarea name="status" id="status" cols="30" rows="10"></textarea>
 				Git Log: <br>
-				<textarea name="log" id="log" cols="30" rows="10"></textarea>
+				<textarea name="log" id="log" cols="30" rows="10"></textarea> -->
 			</div>
 		</div>
 	</body>
@@ -41,20 +54,25 @@
 
 		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>
 </html>
diff --git a/src/intro.html b/src/intro.html
new file mode 100644
index 0000000..4569d73
--- /dev/null
+++ b/src/intro.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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 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>
+
+    <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";
+            }
+        });
+
+        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);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file