diff --git a/.eslintrc.js b/.eslintrc.js
index d7fea5f..118a649 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,5 +14,6 @@ module.exports = {
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
     },
 };
diff --git a/package-lock.json b/package-lock.json
index e124a9c..3e7b0e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3223,6 +3223,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6495,8 +6503,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
-      "dev": true
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
     },
     "for-in": {
       "version": "1.0.2",
diff --git a/package.json b/package.json
index a9e8dad..b769afa 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "firebase": "^8.6.8",
     "vue": "^2.6.11",
diff --git a/src/App.vue b/src/App.vue
index da6f1ea..16e2e1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
     <v-app>
+        <the-navbar :onLogin="login" :onLogout="logout" />
         <v-main>
             <router-view />
         </v-main>
@@ -8,6 +9,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import TheNavbar from './components/TheNavbar.vue';
 
 export default Vue.extend({
     name: 'App',
@@ -15,5 +17,17 @@ export default Vue.extend({
     data: () => ({
         //
     }),
+
+    components: {
+        TheNavbar,
+    },
+    methods: {
+        login() {
+            this.$store.dispatch('login');
+        },
+        logout() {
+            this.$store.dispatch('logout');
+        },
+    },
 });
 </script>
diff --git a/src/api/github.ts b/src/api/github.ts
new file mode 100644
index 0000000..845ad60
--- /dev/null
+++ b/src/api/github.ts
@@ -0,0 +1,30 @@
+import { Repo } from '@/utils/types';
+import apiHelpers from './helper';
+import { GithubRepoIndentifier } from '@/utils/types';
+
+const baseURL = 'https://api.github.com';
+
+const GithubAPI = {
+    async getRepo(repoIden: GithubRepoIndentifier): Promise<Partial<Repo>> {
+        const repoRes = await apiHelpers.get(
+            baseURL + `/repos/${repoIden.owner}/${repoIden.repo}`,
+            {
+                headers: {
+                    Accept: 'application/vnd.github.v3+json',
+                },
+            }
+        );
+        const repo: Partial<Repo> = {
+            name: repoRes.name,
+            shortDes: repoRes.description,
+            link: repoRes.html_url,
+            topics: repoRes.topics || [],
+        };
+        const readmeLink = `https://raw.githubusercontent.com/${repoRes.owner.login}/${repo.name}/${repoRes.default_branch}/README.md`;
+        const readmeString = await apiHelpers.get(readmeLink);
+        repo.longDes = readmeString;
+        return repo;
+    },
+};
+
+export default GithubAPI;
diff --git a/src/api/helper.ts b/src/api/helper.ts
new file mode 100644
index 0000000..7683bff
--- /dev/null
+++ b/src/api/helper.ts
@@ -0,0 +1,20 @@
+import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
+
+const apiHelpers = {
+    get(url: string, config?: AxiosRequestConfig): Promise<any> {
+        return APICreatingUtility(axios.get(url, config));
+    },
+};
+
+export default apiHelpers;
+
+export const APICreatingUtility = async (
+    promise: Promise<AxiosResponse<any>>
+): Promise<any> => {
+    try {
+        const _res = await promise;
+        return _res.data;
+    } catch (err) {
+        throw err.response.data;
+    }
+};
diff --git a/src/components/TheNavbar.vue b/src/components/TheNavbar.vue
index 740ba83..cc75105 100644
--- a/src/components/TheNavbar.vue
+++ b/src/components/TheNavbar.vue
@@ -3,6 +3,25 @@
         <v-app-bar>
             <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
             <v-toolbar-title>Searchbar</v-toolbar-title>
+            <v-spacer />
+            <v-btn
+                color="primary"
+                @click="onLogin"
+                :loading="authLoading"
+                :disabled="authLoading"
+                v-if="!authenticated"
+            >
+                Login
+            </v-btn>
+            <v-btn
+                color="primary"
+                @click="onLogout"
+                :loading="authLoading"
+                :disabled="authLoading"
+                v-if="authenticated"
+            >
+                Logout
+            </v-btn>
         </v-app-bar>
         <v-navigation-drawer v-model="drawer" absolute temporary>
             <v-list>
@@ -33,11 +52,29 @@
 </template>
 
 <script lang="ts">
-export default {
-    name: 'TheNavbar',
+import Vue, { PropType } from 'vue';
+import { mapState } from 'vuex';
 
+export default Vue.extend({
+    name: 'TheNavbar',
+    props: {
+        onLogin: {
+            type: Function as PropType<() => void>,
+            required: true,
+        },
+        onLogout: {
+            type: Function as PropType<() => void>,
+            required: true,
+        },
+    },
+    computed: {
+        ...mapState({
+            authLoading: 'authLoading',
+            authenticated: 'authenticated',
+        }),
+    },
     data: () => ({
         drawer: false,
     }),
-};
+});
 </script>
diff --git a/src/components/TheNewProjectForm.vue b/src/components/TheNewProjectForm.vue
index ce10843..9c68920 100644
--- a/src/components/TheNewProjectForm.vue
+++ b/src/components/TheNewProjectForm.vue
@@ -12,7 +12,12 @@
                     required
                 ></v-text-field>
             </v-form>
-            <v-btn :disabled="!valid.link" @click="submitLink">Continue</v-btn>
+            <v-btn
+                :disabled="!valid.link"
+                @click="submitLink"
+                :loading="continueLoading"
+                >Continue</v-btn
+            >
         </v-stepper-content>
 
         <v-stepper-step :complete="current > 2" step="2">
@@ -52,24 +57,40 @@
 </template>
 
 <script lang="ts">
-export default {
+import GithubAPI from '@/api/github';
+import Parsers from '@/utils/parsers';
+import Vue from 'vue';
+export default Vue.extend({
     name: 'TheNewProjectForm',
 
-    data: () => ({
-        current: 1,
-        valid: { link: false, nameAbout: false },
-        link: '',
-        linkRules: [(link: string) => !!link || 'Link is required'],
-        name: '',
-        nameRules: [(name: string) => !!name || 'Name is required'],
-        description: '',
-        readme: '',
-    }),
+    data() {
+        return {
+            current: 1,
+            valid: { link: false, nameAbout: false },
+            link: '',
+            linkRules: [(link: string) => !!link || 'Link is required'],
+            name: '',
+            nameRules: [(name: string) => !!name || 'Name is required'],
+            description: '',
+            readme: '',
+            continueLoading: false,
+        };
+    },
 
     methods: {
-        submitLink: function (e: any) {
+        submitLink: async function (e: any) {
             e.preventDefault();
             if (!this.valid.link) return;
+            const parsed = Parsers.parseRepoLink(this.link);
+            if (parsed) {
+                this.continueLoading = true;
+                const repo = await GithubAPI.getRepo(parsed);
+                this.name = repo.name || '';
+                this.description = repo.shortDes || '';
+                this.readme = repo.longDes || '';
+                this.continueLoading = false;
+            }
+
             this.current++;
         },
         submitNameAbout: function (e: any) {
@@ -83,5 +104,5 @@ export default {
             console.log('submit');
         },
     },
-};
+});
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6744d81..1bfcb13 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,13 +11,13 @@ const routes: Array<RouteConfig> = [
         component: Home,
     },
     {
-        path: '/about',
-        name: 'About',
+        path: '/new-project',
+        name: 'New',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         component: () =>
-            import(/* webpackChunkName: "about" */ '../views/About.vue'),
+            import(/* webpackChunkName: "about" */ '../views/NewProject.vue'),
     },
 ];
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 4d6db0d..4934a3a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,16 +1,17 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import firebase from 'firebase';
-import { auth, provider, usersCollection } from '@/firebase'
+import { auth, provider, usersCollection } from '@/firebase';
 import router from '@/router';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
     state: {
+        authLoading: false,
         authenticated: false,
-        accessToken: "", // github access token to acces the github api
-        userProfile: {}  // user profile object
+        accessToken: '', // github access token to acces the github api
+        userProfile: {}, // user profile object
     },
     mutations: {
         setUserProfile(state, val) {
@@ -21,50 +22,55 @@ export default new Vuex.Store({
         },
         setAuthenticated(state, val: boolean) {
             state.authenticated = val;
-        }
+        },
+        setAuthLoading(state, val: boolean) {
+            state.authLoading = val;
+        },
     },
     actions: {
         async login({ dispatch, commit }) {
             try {
-                const result = await auth.signInWithPopup(provider)
+                commit('setAuthLoading', true);
+                const result = await auth.signInWithPopup(provider);
                 /** @type {firebase.auth.OAuthCredential} */
-                const credential = <firebase.auth.OAuthCredential>result.credential;
-                // This gives you a GitHub Access Token. You can use it to access the GitHub API.
+                const credential = <firebase.auth.OAuthCredential>(
+                    result.credential
+                );
+
                 const user = result.user;
                 const token = credential.accessToken;
                 dispatch('fetchUserProfile', user);
                 commit('setAccessToken', token);
             } catch (error) {
-                // Handle Errors here.
+                commit('setAuthLoading', false);
                 const errorCode = error.code;
                 const errorMessage = error.message;
-                // // The email of the user's account used.
                 const email = error.email;
-                // // The firebase.auth.AuthCredential type that was used.
                 const credential = error.credential;
             }
         },
         async fetchUserProfile({ commit }, user) {
-            const userProfile = await usersCollection.doc(user.uid).get()
+            const userProfile = await usersCollection.doc(user.uid).get();
             if (!userProfile.exists) {
                 usersCollection.doc(user.uid).set({
                     username: user.displayName,
-                    email: user.email
-                })
+                    email: user.email,
+                });
             }
-            commit('setUserProfile', userProfile.data())
+            commit('setUserProfile', userProfile.data());
             commit('setAuthenticated', true);
-            router.push('/')
+            commit('setAuthLoading', false);
+            router.push('/');
         },
-        async signOut({ commit }) {
+        async logout({ commit }) {
             try {
-                const result = await auth.signOut()
+                const result = await auth.signOut();
                 commit('setAuthenticated', false);
             } catch (error) {
                 const errorCode = error.code;
                 const errorMessage = error.message;
             }
-        }
+        },
     },
     modules: {},
 });
diff --git a/src/utils/parsers.ts b/src/utils/parsers.ts
new file mode 100644
index 0000000..036e7df
--- /dev/null
+++ b/src/utils/parsers.ts
@@ -0,0 +1,19 @@
+import { GithubRepoIndentifier } from './types';
+
+const Parsers = {
+    parseRepoLink(link: string): GithubRepoIndentifier | null {
+        const url = new URL(link);
+
+        if (url.host != 'github.com') return null;
+        else {
+            const split = url.pathname.split('/');
+            const repo: GithubRepoIndentifier = {
+                owner: split[1],
+                repo: split[2],
+            };
+            return repo;
+        }
+    },
+};
+
+export default Parsers;
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 0000000..ff64f54
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,20 @@
+export interface User {
+    uid: string;
+    name: string;
+    email: string;
+}
+
+export interface Repo {
+    uid: string;
+    name: string;
+    ownerUID: string;
+    shortDes: string;
+    longDes: string;
+    link: string;
+    topics: string[];
+}
+
+export type GithubRepoIndentifier = {
+    owner: string;
+    repo: string;
+};
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 091eb3c..116c5cc 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,27 @@
 <template>
     <div>
-        <button @click="login()" class="button">Log In</button>
+        <v-btn @click="test">Test</v-btn>
         <div>hi</div>
     </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import GithubAPI from '@/api/github';
+import Parsers from '@/utils/parsers';
 
 export default Vue.extend({
     name: 'Home',
     methods: {
-        async login() {
-            this.$store.dispatch('login');
+        async test() {
+            const parsed = Parsers.parseRepoLink(
+                'https://github.com/gsc2001/Visual-Painter'
+            );
+            console.log(parsed);
+            if (parsed) {
+                const res = await GithubAPI.getRepo(parsed);
+                console.log(res);
+            }
         },
         async logout() {
             this.$store.dispatch('signOut');
diff --git a/src/views/NewProject.vue b/src/views/NewProject.vue
new file mode 100644
index 0000000..6f10aa6
--- /dev/null
+++ b/src/views/NewProject.vue
@@ -0,0 +1,14 @@
+<template>
+    <the-new-project-form />
+</template>
+
+<script>
+import Vue from 'vue';
+import TheNewProjectForm from '../components/TheNewProjectForm.vue';
+
+export default Vue.extend({
+    components: {
+        TheNewProjectForm,
+    },
+});
+</script>