diff --git a/package-lock.json b/package-lock.json
index d343e0e..2215053 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,12 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@mdi/font": {
+      "version": "3.4.93",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-3.4.93.tgz",
+      "integrity": "sha512-iXNInmV6Xlmq8SA1zvYxp4uUA7/Z3cNgiK+Ps8UmHZNn1FLD6KDgeg0XE5RCraK+9qPWl8jsiBMpmbs+RFxI4Q==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -1487,6 +1493,11 @@
       "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==",
       "dev": true
     },
+    "blueimp-gallery": {
+      "version": "2.33.0",
+      "resolved": "https://registry.npmjs.org/blueimp-gallery/-/blueimp-gallery-2.33.0.tgz",
+      "integrity": "sha512-gz++nODmcJkENLXizdazy4z4EqoJCXyOisrH6M/fR3JE507yO+tPgoEsRCBggGwMAmQsu6kWACfldlq7RIa+Lg=="
+    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
@@ -1525,7 +1536,7 @@
       "requires": {
         "ansi-align": "2.0.0",
         "camelcase": "4.1.0",
-        "chalk": "2.4.1",
+        "chalk": "2.4.2",
         "cli-boxes": "1.0.0",
         "string-width": "2.1.1",
         "term-size": "1.2.0",
@@ -1704,7 +1715,7 @@
         "mkdirp": "0.5.1",
         "move-concurrently": "1.0.1",
         "promise-inflight": "1.0.1",
-        "rimraf": "2.6.2",
+        "rimraf": "2.6.3",
         "ssri": "5.3.0",
         "unique-filename": "1.1.1",
         "y18n": "4.0.0"
@@ -1814,9 +1825,9 @@
       }
     },
     "chalk": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-      "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "dev": true,
       "requires": {
         "ansi-styles": "3.2.1",
@@ -2217,9 +2228,9 @@
       }
     },
     "connect-history-api-fallback": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz",
-      "integrity": "sha1-sGhzk0vF40T+9hGhlqb6rgruAVo=",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
       "dev": true
     },
     "console-browserify": {
@@ -2289,7 +2300,7 @@
         "fs-write-stream-atomic": "1.0.10",
         "iferr": "0.1.5",
         "mkdirp": "0.5.1",
-        "rimraf": "2.6.2",
+        "rimraf": "2.6.3",
         "run-queue": "1.0.3"
       }
     },
@@ -2870,7 +2881,7 @@
         "is-path-in-cwd": "1.0.1",
         "p-map": "1.2.0",
         "pify": "3.0.0",
-        "rimraf": "2.6.2"
+        "rimraf": "2.6.3"
       },
       "dependencies": {
         "globby": {
@@ -5330,7 +5341,7 @@
       "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
       "dev": true,
       "requires": {
-        "chalk": "2.4.1"
+        "chalk": "2.4.2"
       }
     },
     "longest": {
@@ -5639,7 +5650,7 @@
         "copy-concurrently": "1.0.5",
         "fs-write-stream-atomic": "1.0.10",
         "mkdirp": "0.5.1",
-        "rimraf": "2.6.2",
+        "rimraf": "2.6.3",
         "run-queue": "1.0.3"
       }
     },
@@ -5960,7 +5971,7 @@
       "integrity": "sha512-iMK1DOQxzzh2MBlVsU42G80mnrvUhqsMh74phHtDlrcTZPK0pH6o7l7DRshK+0YsxDyEuaOkziVdvM3T0QTzpw==",
       "dev": true,
       "requires": {
-        "chalk": "2.4.1",
+        "chalk": "2.4.2",
         "cli-cursor": "2.1.0",
         "cli-spinners": "1.3.1",
         "log-symbols": "2.2.0"
@@ -6227,7 +6238,7 @@
       "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
       "dev": true,
       "requires": {
-        "chalk": "2.4.1",
+        "chalk": "2.4.2",
         "source-map": "0.6.1",
         "supports-color": "5.5.0"
       }
@@ -9007,9 +9018,9 @@
       }
     },
     "rimraf": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
-      "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
       "dev": true,
       "requires": {
         "glob": "7.1.3"
@@ -9705,7 +9716,7 @@
       "requires": {
         "del": "3.0.0",
         "sw-precache": "5.2.1",
-        "uglify-es": "3.3.9"
+        "uglify-es": "3.3.10"
       }
     },
     "sw-toolbox": {
@@ -9882,19 +9893,19 @@
       "dev": true
     },
     "uglify-es": {
-      "version": "3.3.9",
-      "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
-      "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.10.tgz",
+      "integrity": "sha512-rPzPisCzW68Okj1zNrfa2dR9uEm43SevDmpR6FChoZABFk9dANGnzzBMgHYUXI3609//63fnVkyQ1SQmAMyjww==",
       "dev": true,
       "requires": {
-        "commander": "2.13.0",
+        "commander": "2.14.1",
         "source-map": "0.6.1"
       },
       "dependencies": {
         "commander": {
-          "version": "2.13.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
-          "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==",
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==",
           "dev": true
         }
       }
@@ -10099,7 +10110,7 @@
       "dev": true,
       "requires": {
         "boxen": "1.3.0",
-        "chalk": "2.4.1",
+        "chalk": "2.4.2",
         "configstore": "3.1.2",
         "import-lazy": "2.1.0",
         "is-ci": "1.2.1",
@@ -10240,9 +10251,17 @@
       }
     },
     "vue": {
-      "version": "2.5.21",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.21.tgz",
-      "integrity": "sha512-Aejvyyfhn0zjVeLvXd70h4hrE4zZDx1wfZqia6ekkobLmUZ+vNFQer53B4fu0EjWBSiqApxPejzkO1Znt3joxQ=="
+      "version": "2.5.22",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.22.tgz",
+      "integrity": "sha512-pxY3ZHlXNJMFQbkjEgGVMaMMkSV1ONpz+4qB55kZuJzyJOhn6MSy/YZdzhdnumegNzVTL/Dn3Pp4UrVBYt1j/g=="
+    },
+    "vue-gallery": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vue-gallery/-/vue-gallery-1.5.0.tgz",
+      "integrity": "sha512-eOUIfzTBA+ylZUgfM8piT4wzJ4LHTCHTU4i5AbqApTBzZHBXFBB4YIRCEthe+GK35kPav7kTwTLzvUeuAasTgg==",
+      "requires": {
+        "blueimp-gallery": "2.33.0"
+      }
     },
     "vue-hot-reload-api": {
       "version": "2.3.1",
@@ -10287,9 +10306,9 @@
       }
     },
     "vue-template-compiler": {
-      "version": "2.5.21",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz",
-      "integrity": "sha512-Vmk5Cv7UcmI99B9nXJEkaK262IQNnHp5rJYo+EwYpe2epTAXqcVyExhV6pk8jTkxQK2vRc8v8KmZBAwdmUZvvw==",
+      "version": "2.5.22",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.22.tgz",
+      "integrity": "sha512-1VTw/NPTUeHNiwhkq6NkFzO7gYLjFCueBN0FX8NEiQIemd5EUMQ5hxrF7O0zCPo5tae+U9S/scETPea+hIz8Eg==",
       "dev": true,
       "requires": {
         "de-indent": "1.0.2",
@@ -10303,9 +10322,9 @@
       "dev": true
     },
     "vuetify": {
-      "version": "1.3.15",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.3.15.tgz",
-      "integrity": "sha512-4xpSvvz2OPwf8L9grz4clsgRswvw8xRJKe1xGmUi26gvbXllqPAMtiMt84vwXoGWYCb7dhnj/bWZ6h3Wj8lNLg=="
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.4.4.tgz",
+      "integrity": "sha512-i0fNciTrzP+U6NinB2kmNMC5vWXtrTy5QcVFLOxv4dhhqTiMTyHj7rV1B2lwBTZYoDhimmSAYRfqHeKdCMx+Gg=="
     },
     "watchpack": {
       "version": "1.6.0",
@@ -10403,7 +10422,7 @@
       "requires": {
         "acorn": "5.7.3",
         "bfj-node4": "5.3.1",
-        "chalk": "2.4.1",
+        "chalk": "2.4.2",
         "commander": "2.17.1",
         "ejs": "2.6.1",
         "express": "4.16.4",
@@ -10449,9 +10468,9 @@
       }
     },
     "webpack-merge": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.5.tgz",
-      "integrity": "sha512-sVcM+MMJv6DO0C0GLLltx8mUlGMKXE0zBsuMqZ9jz2X9gsekALw6Rs0cAfTWc97VuWS6NpVUa78959zANnMMLQ==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.1.tgz",
+      "integrity": "sha512-4p8WQyS98bUJcCvFMbdGZyZmsKuWjWVnVHnAS3FFg0HDaRVrPbkivx2RYCre8UiemD67RsiFFLfn4JhLAin8Vw==",
       "dev": true,
       "requires": {
         "lodash": "4.17.11"
diff --git a/package.json b/package.json
index 56a51ca..0b47325 100644
--- a/package.json
+++ b/package.json
@@ -10,22 +10,23 @@
     "build": "node build/build.js"
   },
   "dependencies": {
-    "vuetify": "^1.0.0",
-    "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue": "^2.5.22",
+    "vue-gallery": "^1.5.0",
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.4.4"
   },
   "devDependencies": {
+    "@mdi/font": "^3.4.93",
     "autoprefixer": "^7.1.5",
     "babel-core": "^6.26.0",
-    "sw-precache-webpack-plugin": "^0.11.4",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-imports": "^1.4.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.26.0",
-    "chalk": "^2.1.0",
-    "connect-history-api-fallback": "^1.4.0",
+    "chalk": "^2.4.2",
+    "connect-history-api-fallback": "^1.6.0",
     "copy-webpack-plugin": "^4.1.1",
     "css-loader": "^0.28.7",
     "cssnano": "^3.10.0",
@@ -36,24 +37,25 @@
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "http-proxy-middleware": "^0.17.4",
-    "webpack-bundle-analyzer": "^2.9.0",
+    "opn": "^5.1.0",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.3.0",
+    "rimraf": "^2.6.3",
     "semver": "^5.4.1",
     "shelljs": "^0.7.8",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "opn": "^5.1.0",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^1.3.0",
-    "rimraf": "^2.6.2",
+    "sw-precache-webpack-plugin": "^0.11.4",
+    "uglify-es": "^3.3.10",
     "url-loader": "^0.6.2",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.3",
-    "vue-template-compiler": "^2.5.2",
+    "vue-template-compiler": "^2.5.22",
     "webpack": "^3.7.1",
+    "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-middleware": "^2.19.1",
-    "webpack-merge": "^4.1.0",
-    "uglify-es": "^3.1.3"
+    "webpack-merge": "^4.2.1"
   },
   "engines": {
     "node": ">= 4.0.0",
diff --git a/src/assets/images/hackv1/image1.jpg b/src/assets/images/hackv1/image1.jpg
new file mode 100644
index 0000000..3bccd99
Binary files /dev/null and b/src/assets/images/hackv1/image1.jpg differ
diff --git a/src/assets/images/hackv1/image2.jpg b/src/assets/images/hackv1/image2.jpg
new file mode 100644
index 0000000..1d8cd67
Binary files /dev/null and b/src/assets/images/hackv1/image2.jpg differ
diff --git a/src/components/Programs.vue b/src/components/Programs.vue
index c8bb403..5f223b5 100644
--- a/src/components/Programs.vue
+++ b/src/components/Programs.vue
@@ -1,29 +1,22 @@
 <template>
   <div>
-    <v-toolbar tabs color="primary" dark>
+    <v-toolbar tabs>
 
       <v-toolbar-title>Hackathon v1.0 <span class="subheading">"Youth and Entrepreneurship"</span></v-toolbar-title>
       
 
       <v-spacer></v-spacer>
 
-      <v-btn icon>
-        <v-icon>search</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>more_vert</v-icon>
-      </v-btn>
+      <span class="caption">Nov 16 to 18, 2018 @American Center, Addis Ababa</span>
+     
 
       <v-tabs
         slot="extension"
         v-model="tabs"
         fixed-tabs
-        color="primary"
         icons-and-text
         centered
 
-        dark
       >
         <v-tabs-slider></v-tabs-slider>
 
@@ -34,12 +27,17 @@
       </v-tabs>
     </v-toolbar>
 
-    <v-tabs-items v-model="tabs" class="white elevation-1">
+    <v-tabs-items v-model="tabs" class="elevation-1">
       <v-tab-item v-for="(tab, i) in tabList" :id="'tab-' + i" :key="i">
           <v-card flat>
             <v-card-text>
               <intro-page v-if="i == 0"></intro-page>
               <teams-page v-if="i == 1"></teams-page>
+              <schedule-page v-if="i == 2"></schedule-page>
+              <guideline-page v-if="i == 3"></guideline-page>
+              <winners-page v-if="i == 4"></winners-page>
+              <gallery-page v-if="i == 5"></gallery-page>
+              <discussion-page v-if="i == 6"></discussion-page>
               
               </v-card-text>
           </v-card>
@@ -51,11 +49,21 @@
 
 import Intro from './programPages/Intro.vue';
 import Teams from './programPages/Teams.vue';
+import Schedule from './programPages/Schedule.vue';
+import Guideline from './programPages/Guideline.vue';
+import Winners from './programPages/Winners.vue';
+import Gallery from './programPages/Gallery.vue';
+import Discussion from './programPages/Discussion.vue';
 
 export default {
   components: {
     'intro-page': Intro,
-    'teams-page': Teams
+    'teams-page': Teams,
+    'schedule-page': Schedule,
+    'guideline-page': Guideline,
+    'winners-page': Winners,
+    'gallery-page': Gallery,
+    'discussion-page': Discussion
   },
   data() {
     return {
@@ -74,11 +82,7 @@ export default {
           icon: "timer",
         },
         {
-          title: "Judging",
-          icon: "how_to_vote"
-        },
-        {
-          title: "Rules",
+          title: "Guideline",
           icon: "book"
         },
         {
diff --git a/src/components/programPages/Discussion.vue b/src/components/programPages/Discussion.vue
new file mode 100644
index 0000000..77515fd
--- /dev/null
+++ b/src/components/programPages/Discussion.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h5>Comming Soon...</h5>
+    </div>
+</template>
diff --git a/src/components/programPages/DiscussionPage.vue b/src/components/programPages/DiscussionPage.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/programPages/Gallery.vue b/src/components/programPages/Gallery.vue
new file mode 100644
index 0000000..864ffbe
--- /dev/null
+++ b/src/components/programPages/Gallery.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+      <h1>Gallery Page</h1>
+    <gallery :images="images" :index="index" @close="index = null"></gallery>
+    <div
+      class="image"
+      v-for="(image, imageIndex) in images"
+      :key="imageIndex"
+      @click="index = imageIndex"
+    ></div>
+  </div>
+</template>
+
+<script>
+import VueGallery from 'vue-gallery';
+export default {
+    components: {
+      'gallery': VueGallery
+    },
+    data() {
+        return {
+            images: [
+                'https://randomuser.me/api/portraits/men/1.jpg',
+                'https://randomuser.me/api/portraits/men/2.jpg',
+                'https://randomuser.me/api/portraits/men/3.jpg',
+                'https://randomuser.me/api/portraits/men/4.jpg',
+                'https://randomuser.me/api/portraits/men/5.jpg',
+            ], 
+            index: null
+        }
+    }
+}
+</script>
diff --git a/src/components/programPages/GalleryPage.vue b/src/components/programPages/GalleryPage.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/programPages/Guideline.vue b/src/components/programPages/Guideline.vue
new file mode 100644
index 0000000..cc95e90
--- /dev/null
+++ b/src/components/programPages/Guideline.vue
@@ -0,0 +1,36 @@
+<template>
+  <v-card class="mx-auto">
+    <v-card-title class="blue-grey white--text">
+      <span class="title">Guidelines and Rules</span>
+      <v-spacer></v-spacer>
+    </v-card-title>
+    <v-card-text class="py-0">
+      <v-timeline dense>
+        
+        <v-slide-x-reverse-transition>
+          <v-timeline-item color="green lighten-3" fill-dot>
+            <span slot="icon">1</span>
+            <v-card>
+              <v-card-title primary-title>
+                <span class="title">Program Objective</span>
+              </v-card-title>
+              <v-card-text>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.</v-card-text>
+            </v-card>
+          </v-timeline-item>
+        </v-slide-x-reverse-transition>
+
+        <v-slide-x-reverse-transition>
+          <v-timeline-item color="blue lighten-3" fill-dot>
+            <span slot="icon">2</span>
+            <v-card>
+              <v-card-title primary-title>
+                <span class="title">Code of Conduct</span>
+              </v-card-title>
+              <v-card-text>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.</v-card-text>
+            </v-card>
+          </v-timeline-item>
+        </v-slide-x-reverse-transition>
+      </v-timeline>
+    </v-card-text>
+  </v-card>
+</template>
\ No newline at end of file
diff --git a/src/components/programPages/Intro.vue b/src/components/programPages/Intro.vue
index 69640dc..c7cca4c 100644
--- a/src/components/programPages/Intro.vue
+++ b/src/components/programPages/Intro.vue
@@ -1,15 +1,229 @@
 <template>
-    <div>
-        <h3>What is Hackathon?</h3>
-    </div>
+  <div>
+    <v-layout row wrap>
+
+      <!-- Left Content -->
+      <v-flex xs12 md8 lg8>
+        <!-- Second Parallex -->
+        <section>
+          <v-parallax :src="getImageUrl('hackv1/image1.jpg')" height="380">
+            <v-layout column align-center justify-center>
+              <!-- <div
+            class="headline white--text mb-3 text-xs-center"
+              >Web development has never been easier</div>-->
+              <!-- <em>“Whether we're fighting climate change or going to space,
+            <br>everything is moved forward by computers, and we don't
+            <br>have enough people who can code.”
+            <br>- Richard Branson
+              </em>-->
+            </v-layout>
+          </v-parallax>
+        </section>
+        <v-card>
+          <v-card-title primary-title>Youth and Entrepreneurship</v-card-title>
+          <v-card-text>
+            <h3 class="headline">Hackathon v1.0</h3>
+            <p>
+              “Ethiopia Hack” Hackathon v1.0 is one of the 12 hackathon programs
+              and it was conducted from Nov 16th to Nov 18 th, 2018 at American Center,
+              inside NALA, Addis Ababa, Ethiopia.
+            </p>
+
+            <h3 class="display-1">Problem Statement</h3>
+            <blockquote class="blockquote">
+              <p>
+                “In Ethiopia plenty of trucks (1.5 – 40.0 tons) are driving empty in one direction to reach
+                their destination e.g. Djibouti. This increased cost and wear and tear of tires and
+                equipment without generating revenue. On the same road potential customers are waiting
+                for transport so that their goods will be transported to the next town, etc.
+              </p>
+
+              <p>
+                A system should be developed that addresses the issue by which customers can call
+                (USSD or call center) and ask for a transport service. This call will go out to drivers that
+                are in the nearby area. The system will have registered about 5,000 certified truck
+                drivers with their certified trucks incl. load capacity. If the driver agrees, he will receive
+                further instructions and a contract will be signed using USSD. Distances and prices are
+                calculated based on a standardized pricing system. After the customer and driver are
+                satisfied (a feedback is given by the customer and the truck driver) with the agreed
+                service the contract amount will be transferred via mobile money. The public can see the
+                satisfaction of the customer with the driver and the delivery of goods. The application
+                needs to be developed in at last three local languages.
+              </p>
+
+              <p>
+                With this application the prices for the service can be reduced over time while the income
+                for the truck drivers can increase. As truck drivers get regular information about
+                potential clients they are better informed and can adequately make business decisions.”
+              </p>
+            </blockquote>
+          </v-card-text>
+        </v-card>
+      </v-flex>
+
+      <!-- Right Content -->
+      <v-flex xs12 md4 lg4>
+        <!-- Hackathon Information -->
+        <v-card elevation-20 style="margin:5px">
+          <v-card-title>{{mainSideInfo.title}}
+            <v-spacer></v-spacer>
+             <v-btn color="error" flat>passed!</v-btn>
+             </v-card-title>
+          <v-card-text>
+            <v-layout column>
+              <h3 class="header">Theme</h3>
+              <h4 class="subheading">{{mainSideInfo.theme}}</h4>
+
+              <h3 class="header" style="margin-top:10px">@{{mainSideInfo.venue}}</h3>
+              <h4 class="subheading">{{mainSideInfo.city}}</h4>
+
+              <h3 class="header" style="margin-top:30px" pa-3>Program Schedule</h3>
+              <v-layout row justify-space-between ma-2>
+                <v-layout column align-center>
+                  <v-icon>mdi-calendar</v-icon>
+                  <span class="caption">Start Date</span>
+                  <h4>{{mainSideInfo.startDate}}</h4>
+                </v-layout>
+
+                <v-layout column align-center>
+                  <v-icon>mdi-calendar-check</v-icon>
+                  <span class="caption">End Date</span>
+                  <h4>{{mainSideInfo.endDate}}</h4>
+                </v-layout>
+              </v-layout>
+              <v-divider></v-divider>
+              <p style="margin-top:40px">
+                For for more information, please contact us
+                <a href="/contact">here</a>
+              </p>
+            </v-layout>
+          </v-card-text>
+        </v-card>
+
+        <!-- Statics -->
+        <v-card elevation-20 style="margin:5px">
+          <v-card-text>
+            <v-layout row wrap justify-space-between>
+              <v-layout
+                column
+                justify-start
+                align-center
+                v-for="(stat, key) in attendee_statistics"
+                :key="key"
+              >
+                <v-icon>{{stat.icon}}</v-icon>
+                <h4>{{stat.desc}}</h4>
+              </v-layout>
+            </v-layout>
+          </v-card-text>
+        </v-card>
+
+        <!-- prize -->
+        <v-card elevation-20 style="margin:5px">
+          <v-card-title>
+            <span class="display-1">Prize</span>
+            <span class="subheading">for each winning team members</span>
+          </v-card-title>
+          <v-card-text>
+            <v-sheet class="d-flex" color="cyan lighten-1">
+              <v-layout row wrap justify-space-between style="margin:5px" elevation="12">
+                <span class="display-1">1</span>
+                <span class="caption">st</span>
+                <v-layout column align-end>
+                  <span class="subheading">1TB Hard Disk</span>
+                  <span class="subheading">Backpack</span>
+                </v-layout>
+              </v-layout>
+            </v-sheet>
+
+            <v-divider></v-divider>
+
+            <v-sheet class="d-flex" color="teal lighten-1">
+              <v-layout row wrap justify-space-between style="margin:5px">
+                <span class="display-1">2</span>
+                <span class="caption">nd</span>
+                <v-layout column align-end>
+                  <span class="subheading">128 GB Flash Disk</span>
+                  <span class="subheading">Backpack</span>
+                  <span class="subheading">Power Bank: for mobile phones</span>
+                </v-layout>
+              </v-layout>
+            </v-sheet>
+
+            <v-divider></v-divider>
+
+            <v-sheet class="d-flex" color="green lighten-3">
+              <v-layout row wrap justify-space-between style="margin:5px">
+                <span class="display-1">3</span>
+                <span class="caption">rd</span>
+                <v-layout column align-end>
+                  <span class="subheading">Wireless Bluetooth Mouse</span>
+                  <span class="subheading">Backpack</span>
+                  <span class="subheading">Waterbottle with Stickers Branding</span>
+                </v-layout>
+              </v-layout>
+            </v-sheet>
+          </v-card-text>
+        </v-card>
+
+        <!-- Feedbacks -->
+        <v-card elevation-20 style="margin:5px">
+          <v-card-media class="red--text" :src="getImageUrl('hackv1/image1.jpg')" height="200px"></v-card-media>
+        </v-card>
+
+        <v-card elevation-20 style="margin:5px">
+          <v-card-title class="subheading">Participant Feedback</v-card-title>
+          <v-card-text v-for="(feedback, key) in feedbacks" :key="key">
+            <em>{{feedback}}</em>
+          </v-card-text>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </div>
 </template>
 
 <script>
+import appMixins from "../../mixins/appMixins.js";
 export default {
-    data() {
-        return {
+  mixins: [appMixins],
+  data() {
+    return {
+      //Main Side Information
+      mainSideInfo: {
+        isPassed: true,
+        title: "Ethiopia Hacks v1.0",
+        theme: "Youth and Entreprunership",
+        venue: "American Center",
+        city: "Addis Ababa, Ethiopia",
+        startDate: "Nov 16, 2018",
+        endDate: "Nov 18, 2018"
+      },
 
+      //Attendee statistics
+      attendee_statistics: [
+        {
+          icon: "mdi-account-group",
+          desc: "10 Teams"
+        },
+        {
+          icon: "mdi-account",
+          desc: "50 Participants"
+        },
+        {
+          icon: "mdi-human-female-female",
+          desc: "15 Women"
+        },
+        {
+          icon: "mdi-human-male-male",
+          desc: "35 Male"
         }
-    }
-}
-</script>
\ No newline at end of file
+      ],
+      feedbacks: [
+        "It was really great, it has motivated me to do more and help as much people as i can with my knowledge. And i was amazed with the staff they were 100% willing to help us. keep it up!!!👌👍👍",
+        "The most exiting and interesting experience of my life in short",
+        "I think it was great after all we learnt alot from each other and Networked well. The way I see it you can guys make it hard and testing not that this is not. I hope you will surprise us at the next event!"
+      ]
+    };
+  }
+};
+</script>
diff --git a/src/components/programPages/RulesPage.vue b/src/components/programPages/RulesPage.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/programPages/Schedule.vue b/src/components/programPages/Schedule.vue
new file mode 100644
index 0000000..fb7ae58
--- /dev/null
+++ b/src/components/programPages/Schedule.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <v-layout row wrap>
+      <!-- Day-1 -->
+      <v-flex xs12 sm12 md4 lg4 v-for="(sch, key) in schedules" :key="key">
+        <v-card flat>
+          <v-card dark flat>
+            <v-card-text>
+              <v-container fill-height>
+                <v-layout align-center>
+                  <strong class="display-4 font-weight-regular mr-4">{{sch.day}}</strong>
+                  <v-layout column justify-end>
+                    <div class="headline font-weight-light">{{sch.dayOfWeek}}</div>
+                    <div class="text-uppercase font-weight-light">{{sch.month}} {{sch.year}}</div>
+                  </v-layout>
+                </v-layout>
+              </v-container>
+            </v-card-text>
+          </v-card>
+          <v-card-text class="py-0">
+            <v-timeline align-top dense>
+              <v-timeline-item
+                :color="i%2 == 0?'pink': 'teal lighten-3'"
+                small
+                v-for="(agenda, i) in sch.agendas"
+                :key="i"
+              >
+                <v-layout justify-space-between>
+                  <v-flex xs3>
+                    <strong>{{agenda.time}}:</strong>
+                  </v-flex>
+                  <v-flex>
+                    <strong>{{agenda.agenda}}</strong>
+                    <div class="caption">{{agenda.caption}}</div>
+                  </v-flex>
+                </v-layout>
+              </v-timeline-item>
+            </v-timeline>
+          </v-card-text>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schedules: [
+        //Day 1
+        {
+          day: "16",
+          dayOfWeek: "Friday",
+          month: "November",
+          year: "2018",
+          agendas: [
+            {
+              time: "2:30pm",
+              agenda: "Ethiopia Hack Launching Program",
+              caption: "U.S. Embassy in Ethiopia & GDG Addis"
+            },
+            {
+              time: "3:00pm",
+              agenda: "Keynote Speech on Ethiopia Hacks v1.0 challenge topic",
+              caption: "By Mr. Olaf Erz | Save the Children"
+            },
+            {
+              time: "4:00pm",
+              agenda: "Tea Break",
+              caption: "Networking, group photo and small discussion"
+            },
+            {
+              time: "4:15pm",
+              agenda: "Team Formation and Introduction",
+              caption: "Formal and informal way of team formation"
+            },
+            {
+              time: "5:00pm",
+              agenda: "End of Day-1",
+              caption: "Meanwhile, teams start to explore problem topic"
+            }
+          ]
+        },
+        //Day 2
+        {
+          day: "18",
+          dayOfWeek: "Saturday",
+          month: "November",
+          year: "2018",
+          agendas: [
+            {
+              time: "8:30am",
+              agenda: "Hackathon Day-2 Start",
+              caption: "Teams arrive at the venue, prepare the materials & tools"
+            },
+            {
+              time: "9am",
+              agenda: "Teams Working - Problem Exploration",
+              caption: "Domain experts help around"
+            },
+            {
+              time: "10:30am",
+              agenda: "Coffee Break",
+              caption: "Convening moment, lighting talk, group photo, ..."
+            },
+            {
+              time: "11am",
+              agenda: "Teams Working - Idea generation and problem refinement",
+              caption: "Design experts help around"
+            },
+            {
+              time: "12:30pm",
+              agenda: "Lunch Break",
+              caption: ""
+            },
+            {
+              time: "2pm",
+              agenda: "Teams Working - Hacking Buiding",
+              caption: "Developers help around"
+            },
+            {
+              time: "3:30pm",
+              agenda: "Coffee Break",
+              caption: "Convening moment, lighting talk, group photo, ..."
+            },
+            {
+              time: "4pm",
+              agenda: "Teams Working - Hacking Buiding",
+              caption: "Developers help around"
+            },
+            {
+              time: "5:30pm",
+              agenda: "End of Day-2",
+              caption: ""
+            },
+          ]
+        },
+        //Day 3
+        {
+          day: "19",
+          dayOfWeek: "Sunday",
+          month: "November",
+          year: "2018",
+          agendas: [
+            {
+              time: "8:30am",
+              agenda: "Hackathon Day-3 Start",
+              caption: "Teams arrive at the venue, prepare the materials & tools"
+            },
+            {
+              time: "9am",
+              agenda: "Teams Working - Finalize the Hacking",
+              caption: "Teams also start to prepare presentation materials"
+            },
+            {
+              time: "10:30am",
+              agenda: "Coffee Break",
+              caption: "Convening moment, lighting talk, group photo, ..."
+            },
+            {
+              time: "11am",
+              agenda: "Teams Presenting",
+              caption: "The first 5 teams present their solution to the judges."
+            },
+            {
+              time: "12:30pm",
+              agenda: "Lunch Break",
+              caption: ""
+            },
+            {
+              time: "2pm",
+              agenda: "Teams Presenting",
+              caption: "The last 5 teams present their solution to the judges"
+            },
+            {
+              time: "3:30pm",
+              agenda: "Awarding",
+              caption: "Award ceremony"
+            },
+            {
+              time: "4pm",
+              agenda: "End of Ethiopia Hacks v1.0",
+              caption: "Group photo, networking, feedback"
+            }
+          ]
+        }
+      ]
+    };
+  }
+};
+</script>
+
diff --git a/src/components/programPages/SchedulePage.vue b/src/components/programPages/SchedulePage.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/programPages/Teams.vue b/src/components/programPages/Teams.vue
index d1e0513..d82732b 100644
--- a/src/components/programPages/Teams.vue
+++ b/src/components/programPages/Teams.vue
@@ -1,15 +1,78 @@
 <template>
-    <div>
-        <h3>Teams Page</h3>
-    </div>
+  <section>
+    <v-container grid-list-xl>
+      <v-layout row wrap justify-space-between>
+        <v-flex xs12 sm-6 md4 lg4 v-for="(team, key) in teams" :key="key">
+          <v-card>
+            <v-card-media class="red--text" :src="getImageUrl(team.image)" height="200px"></v-card-media>
+            <v-card-title>
+              <div>
+                <span class="headline gray--text">{{team.name}}</span>
+                <br>
+                <v-layout row wrap justify-space-between>
+                    <v-flex xs6 v-for="(memb, i) in team.members" :key="i">
+                        <span class="caption"> {{memb}}</span>
+                    </v-flex>
+                </v-layout>
+              </div>
+            </v-card-title>
+            <v-card-actions>
+              <v-btn flat color="blue-grey lighten-1"><v-icon>mdi-thumb-up</v-icon> 14</v-btn>
+              <v-btn flat color="blue-grey lighten-1"><v-icon>mdi-eye</v-icon></v-btn>
+              <v-btn flat color="blue-grey lighten-1"><v-icon>mdi-share-variant</v-icon></v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </section>
 </template>
 
 <script>
+import appMixins from "../../mixins/appMixins.js";
 export default {
-    data() {
-        return {
-            
-        }
-    }
-}
-</script>
\ No newline at end of file
+  mixins: [appMixins],
+  data() {
+    return {
+      teams: [
+        {
+          image: "hackv1/image1.jpg",
+          name: "Trackly",
+          likes: 4,
+          members: ["Abebe Yohannes", "Selam Mulugeta", "Hillina Wubshet", "Abraham Mulugeta", "Sara Teshome"]
+        },
+        {
+          image: "hackv1/image1.jpg",
+          name: "Adwa",
+          likes: 10,
+          members: ["Abebe Yohannes", "Selam Mulugeta", "Hillina Wubshet", "Abraham Mulugeta", "Sara Teshome"]
+        },
+        {
+          image: "hackv1/image1.jpg",
+          name: "H.W.A",
+          likes: 10,
+          members: ["Abebe Yohannes", "Selam Mulugeta", "Hillina Wubshet", "Abraham Mulugeta", "Sara Teshome"]
+        },
+        {
+          image: "hackv1/image1.jpg",
+          name: "Team Addis",
+          likes: 15,
+          members: ["Abebe Yohannes", "Selam Mulugeta", "Hillina Wubshet", "Abraham Mulugeta", "Sara Teshome"]
+        },
+        {
+          image: "hackv1/image1.jpg",
+          name: "The SQUAD",
+          likes: 15,
+          members: ["Abebe Yohannes", "Selam Mulugeta", "Hillina Wubshet", "Abraham Mulugeta", "Sara Teshome"]
+        },
+        {
+          image: "hackv1/image1.jpg",
+          name: "Team Adrash",
+          likes: 15,
+          members: ["Abebe Yohannes", "Selam Mulugeta", "Hillina Wubshet", "Abraham Mulugeta", "Sara Teshome"]
+        },
+      ]
+    };
+  }
+};
+</script>
diff --git a/src/components/programPages/Winners.vue b/src/components/programPages/Winners.vue
new file mode 100644
index 0000000..ea7f1d0
--- /dev/null
+++ b/src/components/programPages/Winners.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h4>Winners Page</h4>
+    </div>
+</template>
diff --git a/src/components/programPages/WinnersPage.vue b/src/components/programPages/WinnersPage.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main.js b/src/main.js
index 8558a26..c3b9df9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import '@mdi/font/css/materialdesignicons.css'
 import Vue from 'vue'
 import App from './App'
 import router from './router'
@@ -20,12 +21,15 @@ import {
   VSwitch,
   VDivider,
   VTabs,
+  VSheet,
+  VImg,
   transitions,
   
 } from 'vuetify'
 import '../node_modules/vuetify/src/stylus/app.styl'
 
 Vue.use(Vuetify, {
+  iconfont: 'mdi',
   components: {
     VApp,
     VNavigationDrawer,
@@ -42,6 +46,8 @@ Vue.use(Vuetify, {
     VSwitch,
     VDivider,
     VTabs,
+    VSheet,
+    VImg,
     transitions
   }
 })
diff --git a/src/mixins/appMixins.js b/src/mixins/appMixins.js
new file mode 100644
index 0000000..d9c4938
--- /dev/null
+++ b/src/mixins/appMixins.js
@@ -0,0 +1,7 @@
+export default {
+    methods: {
+        getImageUrl(img) {
+            return require("../assets/images/" + img);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 24e8d69..59f86b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,6 +22,11 @@ export default new Router({
       path: '/programs',
       name: 'Programs',
       component: Programs
+    },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: HomePage
     }
   ]
 })