diff --git a/public/_DS_Store b/public/_DS_Store
new file mode 100644
index 0000000..b8633bb
Binary files /dev/null and b/public/_DS_Store differ
diff --git a/public/css/myStyle.css b/public/css/myStyle.css
new file mode 100644
index 0000000..593fc84
--- /dev/null
+++ b/public/css/myStyle.css
@@ -0,0 +1,860 @@
+@import url("reset.css");
+@import url("https://fonts.googleapis.com/css?family=Droid+Serif|Share+Tech+Mono");
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
+@import url('https://fonts.googleapis.com/css?family=Great+Vibes');
+
+
+
+:root {
+  --Burger-background-color: #fff;
+}
+
+
+body {
+    font-family: "Droid Serif", sans-serif;
+    font-size: 12pt;
+    margin: 0px;
+    padding: 0px;
+
+}
+
+a, strong, em {
+    color: #0099ff;
+}
+
+section {
+    padding-left: 10px;
+    border: 1px dashed black;
+}
+
+
+img {
+        height: 120px;
+}
+
+p.info,
+#login p {
+    width: 80%;
+    margin: 1vw auto;
+}
+
+ul {
+    list-style: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+/* header-banner */
+.header-banner {
+  height: 420px;
+  position: relative;
+  z-index: -5;
+}
+
+.g {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  left: calc(1px + 52%);
+  transform: translateX(-50%);
+  width: 25%;
+}
+
+.header-banner h1 {
+  color: #f77ea9;
+  position: absolute;
+  font-family: 'Great Vibes', cursive;
+  font-size: 70px;
+  top: -30px;
+  text-shadow: -2px -5px 3px rgba(2, 2, 2, 0.3);
+
+}
+
+
+#banderoller {
+  background-image: url(https://wallpapercave.com/wp/irL5WAG.jpg);
+  display: block;
+  width: 100%;
+  height: 200%;
+  position: absolute;
+  top: -246px;
+  opacity: 0.8;
+}
+ 
+
+/* Before burger select */
+#burgerContainer {
+  background: var(--Burger-background-color);
+  border-top: 1px solid black;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+/* Table styling for burger info */
+
+
+
+.burger-checkbox {
+  position: absolute;
+  top: 70px;
+  right: 40px;
+}
+
+
+
+.check {
+    cursor: pointer;
+    position: relative;
+    margin: auto;
+    width: 18px;
+    height: 18px;
+    -webkit-tap-highlight-color: transparent;
+    transform: translate3d(0, 0, 0);
+  }
+  .check:before {
+    content: "";
+    position: absolute;
+    top: -15px;
+    left: -15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: rgba(34,50,84,0.03);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  .check svg {
+    position: relative;
+    z-index: 1;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: #c8ccd4;
+    stroke-width: 1.5;
+    transform: translate3d(0, 0, 0);
+    transition: all 0.2s ease;
+  }
+  .check svg path {
+    stroke-dasharray: 60;
+    stroke-dashoffset: 0;
+  }
+  .check svg polyline {
+    stroke-dasharray: 22;
+    stroke-dashoffset: 66;
+  }
+  .check:hover:before {
+    opacity: 1;
+  }
+  .check:hover svg {
+    stroke: #d0e8c8;
+  }
+
+
+
+[id^=submit]:checked + .check svg {
+    stroke: #4eb72b;
+}
+
+[id^=submit]:checked + .check svg path {
+    stroke-dashoffset: 60;
+    transition: all 0.3s linear;
+}
+
+[id^=submit]:checked + .check svg polyline {
+    stroke-dashoffset: 42;
+    transition: all 0.2s linear;
+    transition-delay: 0.15s;
+  }
+
+
+.wrapper {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+
+.row {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.burger-background {
+    background: rgb(247, 247, 247);
+    height: 108%;
+    position: relative;
+    top: -23px;
+}
+
+.card-burger {
+
+    padding: 0px;
+    margin: 0 auto;
+    padding-top: 40px;
+    background-color:  rgb(247, 247, 247);
+    height: 250px;
+    width: 175px;
+    /* Only on hover */
+    /* border: 1px solid; */
+    margin-top: 15px;
+    box-shadow: 0 .20rem 0.5rem rgba(0,0,0,0.275) !important;
+}
+
+.selectedBurgerCard {
+    background: #2c3e50;
+    /* background: #3a8621; */
+    -webkit-transition: 1s;
+    -moz-transition: 1s;
+    -ms-transition: 1s;
+    -o-transition: 1s;
+    transition: 1s;
+}
+
+.removeBurgerCard {
+    -webkit-transition: 1s;
+    -moz-transition: 1s;
+    -ms-transition: 1s;
+    -o-transition: 1s;
+    transition: 1s;
+    background:  rgb(247, 247, 247);
+}
+
+
+
+
+.box {
+    position: relative;
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+
+.burger-heading {
+    padding-top: 10px;
+    padding-left: 25px;
+    font-size: 22px;
+}
+
+.burger-img-container {
+  padding-left: 0px !important;
+  padding-right: 0;
+  margin-left: 5px;
+}
+
+
+
+.box ul {
+    padding: 0px;
+}
+
+.burger-desc-text {
+
+}
+
+
+
+
+.burger-price {
+  position: absolute;
+  top: 70px;
+  left: 70px;
+  font-weight: 600;
+}
+
+.burger-price::after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 18px;
+  left: 5px;
+  height: 1px;
+  width: 25px;
+  background: #dedede;
+}
+
+
+
+
+
+
+
+
+
+
+#exempel-2 li {
+    list-style: none;
+}
+
+
+
+/* Adaptive size of burger menu */
+@media screen and (max-width: 1200px) {
+    .container {
+        max-width: 1140px;
+       
+    }
+
+}
+
+@media screen and (max-width: 992px) {
+    .container {
+        max-width: 960px;
+
+    }
+
+}
+
+@media screen and (max-width: 768px) {
+    .card-burger {
+        padding-top: 25px;
+    }
+
+    
+    .container {
+        max-width: 720px;
+        
+    }
+    .burger-heading {
+        font-size: 16px;
+    }
+}
+
+
+@media screen and (max-width: 576px) {
+.container {
+        max-width: 540px;
+        
+    }
+    .burger-desc-text {
+        font-size: 12px;
+    }
+
+    li {
+        font-size: 10px;
+    }
+
+    .burger-checkbox {
+
+    }
+}
+
+
+
+#customer-information {
+  margin: 50px;
+  font-size: 24px;
+  display: inline;
+  position: relative;
+  left: 100px;
+}
+
+.debug::before {
+    content: "Conformation";
+    position: relative;
+    font-size: 24px;
+    left: 35%;
+    top: -5px;
+}
+
+
+
+/* Table styling */
+
+table {
+  width: 20%;
+}
+
+th td {
+  padding: 0;
+  margin: 0;
+}
+
+td ul, li {
+  padding: 0;
+  padding-left: 10px;
+  margin: 0;
+}
+
+td li {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+  padding-left: 0px;
+}
+
+.emph {
+  color: #f15ca9;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 400;  
+}
+
+
+
+td {
+  font-size: 10px;
+}
+
+
+
+
+
+
+
+
+
+
+/* Burger styling */
+
+.burger-information-section {
+  background-color: var(--Burger-background-color);
+  color: black;
+  padding-bottom: 10px;
+  border: 1px dashed white;
+  overflow: hidden;
+}
+
+.burger-information-section, p {
+  font-size: 14px;
+}
+
+
+main {
+  background: var(--Burger-background-color);
+  margin-left: 15px;
+}
+
+
+
+#selectBurger h1 {
+  margin: 50px;
+  font-size: 24px;
+}
+
+
+#selectBurger::before {
+  margin: 50px;
+  font-size: 24px;
+}
+
+
+
+
+/* Edit forms below */
+#contact-info {
+      padding-top: 20px;
+    margin: 40px;
+    position: relative;
+    left: 14px;
+    padding-left: 30px;
+}
+
+.btn-text {
+    display: block;
+    position: absolute;
+    transform: translateY(-50%);
+    top: 50%;
+    right: 20%;
+}
+
+
+button {
+    height: 45px;
+    width: 150px;
+    background-color: #f4511e;
+    border: 1px solid white;
+    position: relative;
+    color: white;
+    padding: 16px 32px;
+    text-align: center;
+    font-size: 16px;
+    margin: 4px 2px;
+    opacity: 0.9;
+    transition: 0.3s;
+
+
+}
+
+button img {
+    max-width: 100%;
+    max-height: 100%;
+    transform: scale(0.5);
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+
+button:hover {
+    opacity: 0.78;
+    /* transition: ease-in;
+*/
+}
+
+
+
+input[type="radio"] {
+    height: 22px;
+    width: 12px;
+
+}
+
+
+
+/* fieldset {
+  display: block;
+  margin-inline-start: 2px;
+  margin-inline-end: 2px;
+  padding-block-start: 0.35em;
+  padding-inline-start: 0.75em;
+  padding-inline-end: 0.75em;
+  padding-block-end: 0.625em;
+  min-inline-size: min-content;
+  border-width: 2px;
+  border-style: groove;
+  border-color: threedface;
+  border-image: initial;
+} */
+
+
+
+#app {
+    display: flex;
+  }
+
+  #contact-info p {
+    color: #ff7aaa;
+  }
+
+  span.darker {
+    color: #292929;
+  }
+
+  
+  .wrapp-info {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .vue-form {
+    font-size: 16px;
+    width: 500px;
+    padding: 15px 30px;
+    border-radius: 4px;
+    margin: 50px auto;
+    width: 500px;
+    background-color: #fff;
+    box-shadow: 0px 1px 6px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .vue-form fieldset {
+    margin: 24px 0 0 0;
+    border: none;
+    margin-top: 42px;
+  }
+
+  .vue-form fieldset::before {
+    content: "Delivery Information";
+    font-size: 24px;
+    position: relative;
+    left: 27%;
+    top: -23px;
+  }
+
+  .vue-form legend {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ecf0f1;
+  }
+  .vue-form div {
+    position: relative;
+    margin: 20px 0;
+  }
+  .vue-form h4,
+  .vue-form .label {
+    color: #000;
+    margin-bottom: 10px;
+  }
+  .vue-form .label {
+    display: block;
+    font-family: "Droid Serif", sans-serif;
+  }
+  .vue-form input,
+  .vue-form textarea,
+  .vue-form select,
+  .vue-form label {
+    color: #2b3e51;
+  }
+  .vue-form input[type="text"],
+  .vue-form input[type="email"],
+  .vue-form textarea,
+  .vue-form select,
+  .vue-form legend {
+    display: block;
+    width: 100%;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+  .vue-form input[type="text"],
+  .vue-form input[type="email"],
+  .vue-form textarea,
+  .vue-form select {
+    margin-left: 4px;
+    width: 89%;
+    padding: 8px;
+    border: 1px solid #dedede;
+    background-color: #ffffff;
+    border-radius: 0.25em;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
+}
+  
+  .vue-form input[type="text"]:focus,
+  .vue-form input[type="email"]:focus,
+  .vue-form textarea:focus,
+  .vue-form select:focus {
+    outline: none;
+    border-color: #2c3e50;
+    box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
+  }
+  .vue-form .select {
+    position: relative;
+  }
+  .vue-form .select::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    right: 16px;
+    top: 50%;
+    margin-top: -8px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    background: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpolygon%20fill%3D%22%232c3e50%22%20points%3D%220.9%2C5.5%203.1%2C3.4%208%2C8.3%2012.9%2C3.4%2015.1%2C5.5%208%2C12.6%20%09%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E")
+      no-repeat center center;
+    pointer-events: none;
+  }
+  .vue-form select {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+  }
+  .vue-form select::-ms-expand {
+    display: none;
+  }
+  .vue-form .vue-form-list {
+    margin-top: 16px;
+  }
+  .vue-form .vue-form-list::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+  .vue-form .vue-form-list li {
+    display: inline-block;
+    position: relative;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    margin: 0 26px 16px 0;
+    float: left;
+  }
+  .vue-form input[type="radio"],
+  .vue-form input[type="checkbox"] {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    z-index: 2;
+  }
+  .vue-form input[type="radio"] + label,
+  .vue-form input[type="checkbox"] + label {
+    padding-left: 24px;
+  }
+  .vue-form input[type="radio"] + label::before,
+  .vue-form input[type="radio"] + label::after,
+  .vue-form input[type="checkbox"] + label::before,
+  .vue-form input[type="checkbox"] + label::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -8px;
+    width: 16px;
+    height: 16px;
+  }
+  .vue-form input[type="radio"] + label::before,
+  .vue-form input[type="checkbox"] + label::before {
+    border: 1px solid #cfd9db;
+    background: #ffffff;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
+  }
+  .vue-form input[type="radio"] + label::before,
+  .vue-form input[type="radio"] + label::after {
+    border-radius: 50%;
+  }
+  .vue-form input[type="checkbox"] + label::before,
+  .vue-form input[type="checkbox"] + label::after {
+    border-radius: 0.25em;
+  }
+  .vue-form input[type="radio"] + label::after,
+  .vue-form input[type="checkbox"] + label::after {
+    background-color: #2c3e50;
+    background-position: center center;
+    background-repeat: no-repeat;
+    box-shadow: 0 0 5px rgba(44, 151, 222, 0.4);
+    display: none;
+  }
+  .vue-form input[type="radio"] + label::after {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%0D%0A%3C%2Fsvg%3E");
+  }
+  .vue-form input[type="checkbox"] + label::after {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20points%3D%225%2C8%207%2C10%2011%2C6%20%22%2F%3E%0D%0A%3C%2Fsvg%3E");
+  }
+  .vue-form input[type="radio"]:focus + label::before,
+  .vue-form input[type="checkbox"]:focus + label::before {
+    box-shadow: 0 0 5px rgba(44, 151, 222, 0.6);
+  }
+  .vue-form input[type="radio"]:checked + label::after,
+  .vue-form input[type="checkbox"]:checked + label::after {
+    display: block;
+  }
+  .vue-form input[type="radio"]:checked + label::before,
+  .vue-form input[type="radio"]:checked + label::after,
+  .vue-form input[type="checkbox"]:checked + label::before,
+  .vue-form input[type="checkbox"]:checked + label::after {
+    -webkit-animation: cd-bounce 0.3s;
+            animation: cd-bounce 0.3s;
+  }
+  .vue-form textarea {
+    min-height: 120px;
+    resize: vertical;
+    overflow: auto;
+  }
+  .vue-form input[type="submit"] {
+    border: none;
+    background: #2c3e50;
+    border-radius: 0.25em;
+    padding: 12px 20px;
+    color: #ffffff;
+    font-weight: bold;
+    float: right;
+    cursor: pointer;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+  .no-touch .vue-form input[type="submit"]:hover {
+    background: #42a2e1;
+  }
+  .vue-form input[type="submit"]:focus {
+    outline: none;
+    background: #2b3e51;
+  }
+  .vue-form input[type="submit"]:active {
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+  }
+  .vue-form .error-message {
+    height: 35px;
+    margin: 0px;
+    background: #ff79a7;
+  }
+  .vue-form .error-message p {
+    background: ##ff79a7;
+    color: #ffffff;
+    font-size: 1.4rem;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    border-radius: 0.25em;
+    padding: 16px;
+  }
+  .vue-form .error {
+    border-color: #e06b93 !important;
+  }
+  .vue-form .counter {
+    background-color: #ecf0f1;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    font-size: 10px;
+    padding: 4px;
+  }
+  
+  .debug {
+    margin: 50px auto;
+    width: 500px;
+    padding: 50px;
+    background: rgba(181, 222, 255, 0.12);
+    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
+  }
+  
+  .debug pre {
+    color: #ffffff;
+    font-size: 18px;
+    line-height: 30px;
+    font-family: "Source Code Pro", monospace;
+    font-weight: 300;
+    white-space: pre-wrap;
+  }
+
+
+  .heading-contact {
+    font-size: 20px;
+    padding-top: 20px;
+    color: #4c4c4c !important;
+  }
+  
+  @-webkit-keyframes cd-bounce {
+    0%,
+    100% {
+      -webkit-transform: scale(1);
+    }
+    50% {
+      -webkit-transform: scale(0.8);
+    }
+  }
+  @keyframes cd-bounce {
+    0%,
+    100% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+    50% {
+      -webkit-transform: scale(0.8);
+              transform: scale(0.8);
+    }
+  }
+  
+
+
+
+  
\ No newline at end of file
diff --git a/public/img/Wallpaper.jpg b/public/img/Wallpaper.jpg
new file mode 100644
index 0000000..4bdd2cf
Binary files /dev/null and b/public/img/Wallpaper.jpg differ
diff --git a/public/img/background_banner.jpeg b/public/img/background_banner.jpeg
new file mode 100644
index 0000000..a9be4f9
Binary files /dev/null and b/public/img/background_banner.jpeg differ
diff --git a/public/img/burg1.png b/public/img/burg1.png
new file mode 100644
index 0000000..d395a3a
Binary files /dev/null and b/public/img/burg1.png differ
diff --git a/public/img/burg10.jpeg b/public/img/burg10.jpeg
new file mode 100644
index 0000000..4b6b4aa
Binary files /dev/null and b/public/img/burg10.jpeg differ
diff --git a/public/img/burg2.png b/public/img/burg2.png
new file mode 100644
index 0000000..b50884a
Binary files /dev/null and b/public/img/burg2.png differ
diff --git a/public/img/burg3.png b/public/img/burg3.png
new file mode 100644
index 0000000..c67d3d8
Binary files /dev/null and b/public/img/burg3.png differ
diff --git a/public/img/burg4.png b/public/img/burg4.png
new file mode 100644
index 0000000..d27f06f
Binary files /dev/null and b/public/img/burg4.png differ
diff --git a/public/img/burg5.png b/public/img/burg5.png
new file mode 100644
index 0000000..7ef94da
Binary files /dev/null and b/public/img/burg5.png differ
diff --git a/public/img/burg6.png b/public/img/burg6.png
new file mode 100644
index 0000000..86b564b
Binary files /dev/null and b/public/img/burg6.png differ
diff --git a/public/img/burg7.png b/public/img/burg7.png
new file mode 100644
index 0000000..9e9051c
Binary files /dev/null and b/public/img/burg7.png differ
diff --git a/public/img/burg8.jpeg b/public/img/burg8.jpeg
new file mode 100644
index 0000000..cfc7db3
Binary files /dev/null and b/public/img/burg8.jpeg differ
diff --git a/public/img/burg8.png b/public/img/burg8.png
new file mode 100644
index 0000000..ea0fead
Binary files /dev/null and b/public/img/burg8.png differ
diff --git a/public/img/burger1.jpeg b/public/img/burger1.jpeg
new file mode 100644
index 0000000..d858863
Binary files /dev/null and b/public/img/burger1.jpeg differ
diff --git a/public/img/burger2.jpeg b/public/img/burger2.jpeg
new file mode 100644
index 0000000..8bde516
Binary files /dev/null and b/public/img/burger2.jpeg differ
diff --git a/public/img/burger3.jpeg b/public/img/burger3.jpeg
new file mode 100644
index 0000000..8545ed6
Binary files /dev/null and b/public/img/burger3.jpeg differ
diff --git a/public/img/green-wallpaper18.jpg b/public/img/green-wallpaper18.jpg
new file mode 100644
index 0000000..80014c7
Binary files /dev/null and b/public/img/green-wallpaper18.jpg differ
diff --git a/public/img/send.png b/public/img/send.png
new file mode 100644
index 0000000..702ddce
Binary files /dev/null and b/public/img/send.png differ
diff --git a/public/js/ vue_script.js b/public/js/ vue_script.js
new file mode 100644
index 0000000..a70c0b6
--- /dev/null
+++ b/public/js/ vue_script.js	
@@ -0,0 +1,50 @@
+
+
+
+/*
+var vm = new Vue({
+    el: '#selectBurger',
+    data: {
+        burgerMessage: 'Välj burgare'
+    }
+})
+
+
+var example2 = new Vue({
+    el: '#wrapper',
+    data: {
+        parentMessage: 'Parent',
+        burgers: [{
+                name: "Supreme",
+                stock: 2,
+                img: "img/burg1.png"
+            },
+            {
+                name: "Extra cheese",
+                stock: 8,
+                img: "img/burg2.png"
+            },
+            {
+                name: "Chicken Royal",
+                stock: 0,
+                img: "img/burg3.png"
+            },
+            {
+                name: "Supreme",
+                stock: 2,
+                img: "img/burg4.png"
+            },
+            {
+                name: "Chicken Royal",
+                stock: 0,
+                img: "img/burg5.png"
+            },
+            {
+                name: "pp Royal",
+                stock: 8,
+                img: "img/burg6.png"
+            }
+        ]
+    }
+})
+*/
\ No newline at end of file
diff --git a/public/js/App.vue b/public/js/App.vue
new file mode 100644
index 0000000..2bce645
--- /dev/null
+++ b/public/js/App.vue
@@ -0,0 +1,222 @@
+
+// Send "Burger Menu"
+var vm1 = new Vue({
+    el: '#selectBurger',
+    data: {
+        burgerMessage: 'Select Burger', 
+    }
+})
+
+
+
+
+
+var example2 = new Vue({
+    el: '#wrapper',
+    data: {
+        parentMessage: 'Parent',
+        newTodoText: '',
+        burgers: [ ] 
+    }, 
+
+    // Calls on functions in "method: " and makes it reactive
+    created: function() {
+        for(var i = 0; i < food.burgers.length; i++) {
+            this.print(i);
+        }    
+    },
+
+    // initalize static functions to be called later 
+    methods: {
+        print: function(i) {
+            this.burgers.push({
+                name: food.burgers[i].name,
+                kCal: food.burgers[i].kCal,
+                lactose: food.burgers[i].lactose,
+                gluten: food.burgers[i].gluten,
+                img: food.burgers[i].img,
+                price: food.burgers[i].price,
+                checked: food.burgers[i].checked
+            })
+        }
+    },     
+})
+
+
+
+// This way you can initalize staticly ...
+//example2.print(0);
+//example2.print(3);
+
+
+// new Vue({
+//   el: '#exxx',
+//   data: {
+//     buyerInfo: []
+//   }
+// })
+
+
+new Vue({
+  el: '#sendForm',
+  methods: {
+    logMessage: function (message) {
+      console.log(message);
+      processFormData();
+    }
+  }
+})
+
+
+
+
+
+var vm = new Vue({
+  el: '#getBurgers',
+  data: function() {
+    return {
+      burgers: []
+    }
+  },
+
+  methods: {
+    get: function(event) {
+
+    }
+  },
+  watch: {
+
+  }
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Regular expression from W3C HTML5.2 input specification:
+// https://www.w3.org/TR/html/sec-forms.html#email-state-typeemail
+var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+
+// Regular expression to only allow positive wholenumbers, not beginning with 0
+var houseRegExp = /^(|[1-9][0-9]*)$/;
+
+
+new Vue({
+  // root node
+  el: "#app",
+  // the instance state
+  data: function() {
+    return {
+      burgers: [],
+      name: "",
+      email: {
+        value: "",
+        valid: true
+      },
+      street: "",
+      house: {
+        value: "",
+        valid: true
+      },
+      features: ["Online card", "Credit", "Swish", "Burger Heaven card"],
+      selection: {
+        payment: "Bank Card",
+        gender: "Undisclosed",
+        features: []
+      },
+      message: {
+        text: `Dear Mr. President,\n...`,
+        maxlength: 255
+      },
+      submitted: false
+    };
+  },
+
+  // Calls on functions in "method: " and makes it reactive
+    created: function() {
+        for(var i = 0; i < food.burgers.length; i++) {
+            this.print(i);
+        }    
+    },
+
+
+
+
+  methods: {
+
+    
+    // submit form handler
+    submit: function() {
+      this.submitted = true;
+    },
+    // validate by type and value
+    validate: function(type, value) {
+      if (type === "email") {
+        this.email.valid = this.isEmail(value) ? true : false;
+      }
+    },
+   // validate by type and value
+    validateHouse: function(type, value) {
+      if (type === "house") {
+        this.house.valid = this.isHouse(value) ? true : false;
+      }
+    },
+    // check for valid email adress
+    isEmail: function(value) {
+      return emailRegExp.test(value);
+    },
+    // check for valid email adress
+    isHouse: function(value) {
+      return houseRegExp.test(value);
+    },
+    // check or uncheck all
+    checkAll: function(event) {
+      this.selection.features = event.target.checked ? this.features : [];
+    },
+
+
+    print: function(i) {
+            this.burgers.push({
+                name: food.burgers[i].name,
+                checked: food.burgers[i].checked,
+                
+            })
+        }
+
+
+
+
+  },
+  watch: {
+    // watching nested property
+    "email.value": function(value) {
+      this.validate("email", value);
+    },
+
+    // watching nested property
+    "house.value": function(value) {
+      this.validateHouse("house", value);
+    },
+
+  }
+});
+
+
+
diff --git a/public/js/js_script.js b/public/js/js_script.js
new file mode 100644
index 0000000..aab0727
--- /dev/null
+++ b/public/js/js_script.js
@@ -0,0 +1,197 @@
+
+// Add burgers to select
+var burgersSelectedTotal = [];
+document.getElementById("testing").innerHTML = burgersSelectedTotal;
+
+
+function addBurgersCheckout(name) {
+    burgersSelectedTotal.push(name);
+    document.getElementById("testing").innerHTML = burgersSelectedTotal;
+}
+
+function remove(array, element) {
+    const index = array.indexOf(element);
+  
+    if (index !== -1) {
+      array.splice(index, 1);
+    }
+  }
+
+function removeBurgersCheckout(name) {
+    remove(burgersSelectedTotal,name)
+    document.getElementById("testing").innerHTML = burgersSelectedTotal;
+}
+
+
+
+
+
+// Change burgers to selected in "JSON"-file
+function changeInJSON(index, name, checked) {
+    var burgersSelectedTotal = {};
+
+    if (checked) {
+        food.burgers[index].checked = true;
+        addBurgersCheckout(name);
+    }
+       
+    else {
+        food.burgers[index].checked = false;
+        removeBurgersCheckout(name);
+    }
+}
+
+
+
+// For burger checkboxes
+function selectBurger(burgerPressed) {
+   
+    var checked;
+    var index = burgerPressed.split('submit-').pop()[0];
+
+    var checkbox = document.getElementById(burgerPressed);
+    var burgerSelected = burgerPressed.replace('submit', 'hamburger');
+    var burger = document.getElementById(burgerSelected);
+    var burgerContainer = burger.parentElement;
+
+    if (checkbox.checked === true) {
+        burgerContainer.classList.toggle('selectedBurgerCard');
+        burgerContainer.classList.replace('removeBurgerCard', 'selectedBurgerCard');
+        checked = true
+    }
+    else {
+        burgerContainer.classList.replace('selectedBurgerCard', 'removeBurgerCard');
+        checked = false;
+    }
+
+    
+    str = burger.innerHTML;
+    var name = str.split('<div class="box burger-heading">').pop().split('</div>')[0];
+    changeInJSON(index, name, checked);
+}
+
+
+
+// Handle the for to order burger
+function processFormData() {
+
+    var name = order_name.value.replace(/^\s+|\s+$/g, '');
+    var email = order_mail.value.replace(/^\s+|\s+$/g, '');
+    var street = order_street.value.replace(/^\s+|\s+$/g, '');
+    var house_number = order_house_nr.value.replace(/^\s+|\s+$/g, '');
+    var recipient = order_recipiant.value.replace(/^\s+|\s+$/g, '');
+    var gender = document.querySelector('input[name = "gender"]:checked').value;
+
+
+
+    var error_message = 'The following fields had errors in them: \n\n';
+    var data = 'You entered the following information: \n\n';
+
+    var error_flag = false;
+
+
+    // Check name
+    if (name == '') {
+        error_message += 'Please enter your name\n';
+        error_flag = true;
+    } else {
+        data += 'Name: ' + name + '\n';
+    }
+
+    // Check mail
+    if (!checkEmail(email)) {
+        error_message += 'Please enter a valid email address\n';
+        error_flag = true;
+    } else {
+        data += 'Email: ' + email + '\n';
+    }
+
+    // Check street
+    if (street == '') {
+        error_message += 'Please enter a valid street name\n';
+        error_flag = true;
+    } else {
+        data += 'Street: ' + street + '\n';
+    }
+
+
+    // Check house number
+    if (house_number == '') {
+        error_message += 'Please enter a valid house number\n';
+        error_flag = true;
+    } else {
+        data += 'House number: ' + house_number + '\n';
+    }
+
+
+
+    if (recipient == '') {
+        error_message += 'Please enter a payment option\n';
+        error_flag = true;
+    } else {
+        data += 'Payment option: ' + recipient + '\n';
+    }
+
+
+
+    if (gender == '') {
+        error_message += 'Please specify your gender\n';
+        error_flag = true;
+    } else {
+        data += 'Gender: ' + gender + '\n';
+    }
+
+
+
+
+    if (error_flag) {
+        alert(error_message);
+        // document.getElementById("dat").innerHTML = 'dasdasdasdasdasd';
+        
+    } else {
+        alert(data);
+    }
+
+
+
+    
+    // var finalInfo = document.getElementById("customerConfirmation");
+    // var inf = finalInfo.getElementsByTagName("p");
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+function loadJSON(path, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                // Here the callback gets implemented
+                object = JSON.parse(xhr.responseText);
+                callback();
+            } else {
+
+            }
+        }
+    };
+
+    xhr.open("GET", path, true);
+    xhr.send();
+    return xhr.onreadystatechange();
+}
+
+loadJSON('js/menu.json', function printJSONObject(){
+          console.log(object);
+    });
diff --git a/public/js/jsonTest.html b/public/js/jsonTest.html
new file mode 100644
index 0000000..a7675b0
--- /dev/null
+++ b/public/js/jsonTest.html
@@ -0,0 +1,17 @@
+<html>
+<body>
+
+<p id="user"></p>
+
+<script>
+var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';
+
+var obj = JSON.parse(s);
+
+document.getElementById("user").innerHTML =
+"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
+"Location: " + obj.location;
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/js/menu.js b/public/js/menu.js
new file mode 100644
index 0000000..c08f6a5
--- /dev/null
+++ b/public/js/menu.js
@@ -0,0 +1,79 @@
+var food = {
+  
+  "burgers": [
+    {
+        "name": "Supreme",
+        "kCal": 850,
+        "lactose": true,
+        "gluten": true,    
+        "img": "img/burg1.png",
+        "price": "40 kr",
+        "checked": false
+    },
+    {
+        "name": "Extra Cheese",
+        "kCal": 1150,
+        "lactose": true,
+        "gluten": true,    
+        "img": "img/burg2.png",
+        "price": "75 kr",
+        "checked": false
+    },
+    {
+        "name": "Del Chicken",
+        "kCal": 620,
+        "lactose": false,
+        "gluten": true,    
+        "img": "../img/burg3.png",
+        "price": "95 kr",
+        "checked": false
+    },
+    {
+        "name": "CheeseMac",
+        "kCal": 850,
+        "lactose": true,
+        "gluten": true,    
+        "img": "img/burg4.png",
+        "price": "20 kr",
+        "checked": false   
+    },
+    {
+        "name": "Rex Special",
+        "kCal": 785,
+        "lactose": false,
+        "gluten": false,    
+        "img": "img/burg5.png",
+        "price": "45 kr",
+        "checked": false
+    },
+    {
+        "name": "Delux",
+        "kCal": 1850,
+        "lactose": true,
+        "gluten": true,    
+        "img": "img/burg6.png",
+        "price": "85 kr",
+        "checked": false
+    },
+    {
+        "name": "McFluff",
+        "kCal": 1100,
+        "lactose": true,
+        "gluten": true,    
+        "img": "img/burg7.png",
+        "price": "70 kr",
+        "checked": false
+    },
+    {
+        "name": "McFishy",
+        "kCal": 675,
+        "lactose": true,
+        "gluten": false,    
+        "img": "img/burg8.png",
+        "price": "50 kr",
+        "checked": false
+    }
+   
+  ]
+}
+
diff --git a/public/js/menu.json b/public/js/menu.json
new file mode 100644
index 0000000..6328d96
--- /dev/null
+++ b/public/js/menu.json
@@ -0,0 +1,16 @@
+{
+  "name": "deli-very-skeleton",
+  "version": "0.0.1",
+  "description": "Stub for delivery service",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Mikael Laaksoharju",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.16.2",
+    "socket.io": "^2.0.4",
+    "vue": "^2.5.2"
+  }
+}
\ No newline at end of file
diff --git a/public/js/vue_s.vue b/public/js/vue_s.vue
new file mode 100644
index 0000000..f05d286
--- /dev/null
+++ b/public/js/vue_s.vue
@@ -0,0 +1,49 @@
+
+
+
+
+var vm = new Vue({
+    el: '#selectBurger',
+    data: {
+        burgerMessage: 'Välj burgare'
+    }
+})
+
+
+var example2 = new Vue({
+    el: '#wrapper',
+    data: {
+        parentMessage: 'Parent',
+        burgers: [{
+                name: "Supreme",
+                stock: 2,
+                img: "img/burg1.png"
+            },
+            {
+                name: "Extra cheese",
+                stock: 8,
+                img: "img/burg2.png"
+            },
+            {
+                name: "Chicken Royal",
+                stock: 0,
+                img: "img/burg3.png"
+            },
+            {
+                name: "Supreme",
+                stock: 2,
+                img: "img/burg4.png"
+            },
+            {
+                name: "Chicken Royal",
+                stock: 0,
+                img: "img/burg5.png"
+            },
+            {
+                name: "pp Royal",
+                stock: 8,
+                img: "img/burg6.png"
+            }
+        ]
+    }
+})
diff --git a/public/menu.json b/public/menu.json
new file mode 100644
index 0000000..6328d96
--- /dev/null
+++ b/public/menu.json
@@ -0,0 +1,16 @@
+{
+  "name": "deli-very-skeleton",
+  "version": "0.0.1",
+  "description": "Stub for delivery service",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Mikael Laaksoharju",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.16.2",
+    "socket.io": "^2.0.4",
+    "vue": "^2.5.2"
+  }
+}
\ No newline at end of file
diff --git a/views/_DS_Store b/views/_DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/views/_DS_Store differ
diff --git a/views/burger1.jpeg b/views/burger1.jpeg
new file mode 100644
index 0000000..d858863
Binary files /dev/null and b/views/burger1.jpeg differ
diff --git a/views/burger2.jpeg b/views/burger2.jpeg
new file mode 100644
index 0000000..8bde516
Binary files /dev/null and b/views/burger2.jpeg differ
diff --git a/views/burger3.jpeg b/views/burger3.jpeg
new file mode 100644
index 0000000..8545ed6
Binary files /dev/null and b/views/burger3.jpeg differ
diff --git a/views/forPartHTML.html b/views/forPartHTML.html
new file mode 100644
index 0000000..ebba861
--- /dev/null
+++ b/views/forPartHTML.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+
+
+<head>
+    <title>Page title shown in window title</title>
+    <meta charset="utf-8" />
+
+    <link rel="stylesheet" type="text/css" href="css/myStyle.css">
+</head>
+
+<body>
+
+
+    <!-- Logo and brand name here -->
+    <header> </header>
+
+
+    <!-- Burger Selection -->
+    <section class="burger-information-section">
+        <main>
+            <h1>Välkommen till BurgerHeaven Online</h1>
+            <p>This is where you execute burger selection</p>
+            <br>
+
+
+            <table>
+                <!-- Column headlines -->
+                <thead align="center">
+                    <tr>
+                        <th>Supreme Burger</th>
+                        <th>Extra cheese Burger</th>
+                        <th>Chicken Burger</th>
+                    </tr>
+                </thead>
+                <!-- Main Table -->
+                <tbody>
+                    <tr align="center">
+                        <td><img src="img/burger1.jpeg" alt="Bacon Burger" title="Burger1" width="200px"></th>
+                        <td><img src="img/burger2.jpeg" alt="Extra cheese Burger" title="Burger2" width="200px"></th>
+                        <td><img src="img/burger3.jpeg" alt="Chicken Burger" title="Burger3" width="200px"></th>
+                    </tr>
+                    <tr>
+                        <td>
+                            <ul>
+                                <li>Kobe beef of the highest quality</li>
+                                <li>Covered in fancy cheese (contains <span class="emph">lactose</span>)</li>
+                                <li>Cold-leavened sourdough bread (contains <span class="emph">gluten</span>)</li>
+                            </ul>
+                        </td>
+                        <td>
+                            <ul>
+                                <li>Extra cheese imported from France</li>
+                                <li>Extra spicy cheese (contains <span class="emph">lactose</span>)</li>
+                                <li>Cold-leavened sourdough bread (contains <span class="emph">gluten</span>)</li>
+                            </ul>
+                        </td>
+                        <td>
+                            <ul>
+                                <li>Chicken beef of highest quality</li>
+                                <li>Added extra red pepper to enhance the experience </li>
+                                <li>All ingredients from local farmers</li>
+                            </ul>
+                        </td>
+                    </tr>
+
+                </tbody>
+
+            </table>
+            <!-- More info to come...-->
+        </main>
+    </section>
+
+
+    <section id="contact-info">
+    <!-- Custumer Info-->
+    <div id="customer-information">
+        <h3>Customer information</h3>
+        <p>This is where you provide necessary information</p>
+    </div>
+
+
+    <!--Delivery info-->
+    <h4>Delivery information</h4>
+
+    <main>
+            <form>
+                <p>
+                    <label for="firstname">Full name</label><br>
+                    <input type="text" id="full-name" name="fn" required="required" placeholder="First- and Last name">
+                </p>
+                <p>
+                    <label for="firstname">E-mail</label><br>
+                    <input type="email" id="firstname" name="em" required="required" placeholder="E-mail adress">
+                </p>
+                <p>
+                    <label for="firstname">Street</label><br>
+                    <input type="text" id="firstname" name="st" required="required" placeholder="Street name">
+                </p>
+                <p>
+                    <label for="firstname">House Number</label><br>
+                    <input type="number" id="firstname" name="house" required="required" placeholder="House number">
+                </p>
+
+
+                <p>Payment options</p>
+                <p>
+                    <label for="recipient">Recipient</label><br>
+                    <select id="recipient" name="rcp">
+                        <option>Credit card</option>
+                        <option>Swish</option>
+                        <option>Pay later</option>
+                    </select>
+                </p>
+
+
+                <!-- Buttons -->
+                <p>Gender</p>
+                <input type="radio" name="gender" value="male"> Male<br>
+                <input type="radio" name="gender" value="female"> Female<br>
+                <input type="radio" name="gender" value="Non-binary"> Non-binary<br>
+                <input type="radio" name="gender" value="Undisclosed" checked> Undisclosed <br>
+                <br>
+
+            </form>
+    </main>
+        </section>
+    
+
+                    <!--Submit button-->
+                    <button type="submit"><img src="img/send.png"> <span class="btn-text" id="send-text">Send Info</span></button>
+
+
+
+
+
+
+
+
+
+
+
+    <hr>
+
+    <!-- Info about contact information -->
+    <footer>
+        <p> &#169; Burger Inc.
+    </footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/green-wallpaper18.jpg b/views/green-wallpaper18.jpg
new file mode 100644
index 0000000..80014c7
Binary files /dev/null and b/views/green-wallpaper18.jpg differ
diff --git a/views/index.html b/views/index.html
index f051cec..9ecc515 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,9 +1,279 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>DELI-VERY</title>
-    </head>
-    <body>
-        <h1>Hello World!!!</h1>
-    </body>
+
+
+
+
+<head>
+    <title>Burger Heaven</title>
+    <meta charset="utf-8" />
+
+    <!-- CSS FILES -->
+    <link rel="stylesheet" type="text/css" href="css/myStyle.css">
+
+    <!-- Javascript files -->
+    <!-- <script src="https://vuejs.org/js/vue.js"></script> -->
+    <script type="text/javascript" src="js/menu.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
+    <script type="text/javascript" src="js/js_script.js" defer></script>
+    <script type="text/javascript" src="js/App.vue" defer></script>
+
+</head>
+
+<body>
+
+    <div class="content">
+        <!-- Logo and brand name here -->
+        <header> </header>
+
+
+
+        <div class="header-banner">
+            <div class="g">
+                <h1>Burger Heaven</h1>
+            </div>
+            <div id="banderoller"></div>
+        </div>
+
+
+
+
+        <!-- Burger Selection -->
+        <div id="burgerContainer">
+            <section class="burger-information-section">
+                <main>
+
+                    <div id="selectBurger">
+                        <h1>{{burgerMessage}}</h1>
+                    </div>
+                    <br>
+
+
+
+
+
+
+
+                    <div class="wrapper" id="wrapper">
+                        <div class="row">
+                            <div v-for="(burger, key, index) in burgers" class="card-burger">
+                                <div :id=" 'hamburger-' + key" class="burger-background">
+                                    <div class="box burger-heading"> {{burger.name}} </div>
+                                    <div class="box burger-img-container">
+                                        <img :src='burger.img' alt="burger.name" title="burger.name"></div>
+
+                                    <div class="box burger-desc-text" id="burger-supreme">
+                                        <ul>
+                                            <li> {{burger.kCal}} kCal</li>
+                                            <li v-if="burger.lactose"> Contains <span class="emph"> lactose </span></li>
+                                            <li v-if="burger.gluten">Contains <span class="emph">gluten</span></li>
+                                            <li> </li>
+                                        </ul>
+
+
+
+
+                                        <!-- Here we place the price of the burgers -->
+                                        <div class="burger-price"> {{ burger.price}} </div>
+
+                                        <!-- Here we place the checkbox for the burger -->
+                                        <div class="burger-checkbox" id="getBurgers">
+                                            <input type="checkbox" :id="'submit-'+key" style="display: none;" onClick="selectBurger(this.id)">
+                                            <label :for="'submit-'+key" class="check">
+                                                <svg width="18px" height="18px" viewBox="0 0 18 18">
+                                                    <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+                                                    <polyline points="1 9 7 14 15 4"></polyline>
+                                                </svg>
+                                            </label>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </section>
+    </div>
+
+
+
+
+
+
+    <section id="contact-info">
+        <!-- Custumer Info-->
+        <div id="customer-information">
+            <h3>Customer information</h3>
+            <p>This is where you provide necessary information</p>
+        </div>
+
+
+
+
+        <div id="app">
+
+            <div class="wrapp-info">
+
+                <form class="vue-form" @submit.prevent="submit">
+                    <!--
+                <div class="error-message">
+                    <p v-show="!email.valid">Please enter a valid email address.</p>
+                </div>
+                <div class="error-message">
+                    <p v-show="!house.valid">Please enter a valid house number.</p>
+                </div>
+                -->
+
+                    <fieldset>
+                        <!-- <legend>Contact information</legend> -->
+                        <div>
+                            <label class="label" for="name">Name</label>
+                            <input type="text" name="name" id="name" required="" v-model="name">
+                        </div>
+                        <div>
+                            <label class="label" for="email">Email</label>
+                            <input type="email" name="email" id="email" required="" :class="{ email , error: !email.valid }"
+                                v-model="email.value">
+                        </div>
+                        <div>
+                            <label class="label" for="street">Street</label>
+                            <input type="text" name="street" id="street" required="" v-model="street">
+                        </div>
+                        <div>
+
+                            <label class="label" for="house">House</label>
+                            <input type="text" name="house" id="house" required="" :class="{ house , error: !house.valid }"
+                                v-model="house.value">
+
+                        </div>
+
+
+
+                        <div>
+                            <label for="payment" class="label">Payment Options</label>
+                            <p class="select">
+                                <select class="budget" v-model="selection.payment">
+                                    <option value="Burger Heaven">Burger Heaven Card</option>
+                                    <option value="Bank Card">Bank Card</option>
+                                    <option value="Credit Card">Credit Card</option>
+                                    <option value="Swish">Swish</option>
+                                </select>
+
+
+                            </p>
+                        </div>
+
+                        <div>
+                            <label for="gender" class="label">Gender</label>
+                            <ul class="vue-form-list">
+                                <li>
+                                    <input type="radio" name="radio-1" id="radio-1" value="Male" v-model="selection.gender">
+                                    <label for="radio-1">Male</label>
+                                </li>
+                                <li>
+                                    <input type="radio" name="radio-2" id="radio-2" value="Female" v-model="selection.gender">
+                                    <label for="radio-2">Female</label>
+                                </li>
+                                <li>
+                                    <input type="radio" name="radio-3" id="radio-3" value="Non-Binary" v-model="selection.gender">
+                                    <label for="radio-3">Non-binary</label>
+                                </li>
+                                <li>
+                                    <input type="radio" name="radio-4" id="radio-4" value="Undisclosed" v-model="selection.gender">
+                                    <label for="radio-2">Undisclosed</label>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <!-- <div>
+                        <label for="features" class="label">Features</label>
+                        <ul class="vue-form-list">
+                            <li v-for="(feature, index) in features">
+                                <input type="checkbox" :value="feature" :id="'cb-feature-'+index" v-model="selection.features">
+                                <label :for="'cb-feature-'+index">{{feature}}</label>
+                            </li>
+                            <li>
+                                <input type="checkbox" id="checkbox-all" @click="checkAll">
+                                <label for="checkbox-all">Check All</label>
+                            </li>
+                        </ul>
+                    </div> -->
+                        <!-- <div>
+                  <label class="label" for="textarea">Message with Counter</label>
+                  <textarea class="message" name="textarea" id="textarea" required="" 
+                            v-model="message.text" 
+                            :maxlength="message.maxlength"></textarea>
+                  <span class="counter">{{ message.text.length }} / {{ message.maxlength }}</span>
+                </div> -->
+                        <div>
+                            <input type="submit" value="Send Form">
+                        </div>
+                    </fieldset>
+                </form>
+
+
+                <div class="debug">
+                    <div class="Custumer details">
+                        <p class="heading-contact">Customer Details</p>
+
+                        <div>
+                            <p><span class="darker">Name:</span>        {{name}}</p>
+                            <p><span class="darker">Email: </span>      {{email.value}}</p>
+                            <p><span class="darker">Street:</span>      {{street}}</p>
+                            <p><span class="darker">House:</span>       {{house.value}}</p>
+                            <p><span class="darker">Gender:</span>      {{selection.gender}}</p>
+                            <p><span class="darker">Payment: </span>    {{selection.payment}}</p>
+
+                        </div>
+                    </div>
+                    <div class="order-summary">
+                        <p class="heading-contact">Order Summary</p>
+                        <div>
+                            <p id="testing"></p>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+
+
+
+
+
+
+    </section>
+    </div>
+
+
+
+    <hr>
+
+    <!-- Info about contact information -->
+    <footer>
+        <p> &#169; Burger Inc.
+    </footer>
+
+
+
+
+
+
+</body>
+
+
+
+
+
+<script>
+
+
+
+
+</script>
+
+
 </html>
\ No newline at end of file
diff --git a/views/oldIndex.html b/views/oldIndex.html
new file mode 100644
index 0000000..51c8885
--- /dev/null
+++ b/views/oldIndex.html
@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+
+
+<head>
+    <title>Page title shown in window title</title>
+    <meta charset="utf-8" />
+
+    <!-- CSS FILES -->
+    <link rel="stylesheet" type="text/css" href="css/myStyle.css">
+
+    <!-- Javascript files -->
+    <!-- <script src="https://vuejs.org/js/vue.js"></script> -->
+    <script type="text/javascript" src="js/menu.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
+    <script type="text/javascript" src="js/js_script.js" defer></script>
+    <script type="text/javascript" src="js/App.vue" defer></script>
+
+</head>
+
+<body>
+
+    <!-- Logo and brand name here -->
+    <header> </header>
+
+
+
+    <div class="header-banner">
+        <div class="g">
+            <h1>Burger Heaven</h1>
+        </div>
+        <div id="banderoller"></div>
+    </div>
+
+
+
+
+    <!-- Burger Selection -->
+    <div id="burgerContainer">
+        <section class="burger-information-section">
+            <main>
+
+                <div id="selectBurger">
+                    <h1>{{burgerMessage}}</h1>
+                </div>
+                <br>
+
+
+
+
+
+
+
+                <div class="wrapper" id="wrapper">
+                    <div class="row">
+                        <div v-for="(burger, key, index) in burgers" class="card-burger">
+                            <div :id=" 'hamburger-' + key" class="burger-background" @click="press">
+                                <div class="box burger-heading"> {{burger.name}} </div>
+                                <div class="box burger-img-container">
+                                    <img :src='burger.img' alt="burger.name" title="burger.name"></div>
+
+                                <div class="box burger-desc-text" id="burger-supreme">
+                                    <ul>
+                                        <li> {{burger.kCal}} kCal</li>
+                                        <li v-if="burger.lactose"> Contains <span class="emph"> lactose </span></li>
+                                        <li v-if="burger.gluten">Contains <span class="emph">gluten</span></li>
+                                        <li> </li>
+                                    </ul>
+
+
+
+
+                                    <!-- Here we place the price of the burgers -->
+                                    <div class="burger-price"> {{ burger.price}} </div>
+
+                                    <!-- Here we place the checkbox for the burger -->
+                                    <div class="burger-checkbox">
+                                        <input type="checkbox" :id="'submit-'+key" style="display: none;" onClick="selectBurger(this.id)">
+                                        <label :for="'submit-'+key" class="check">
+                                            <svg width="18px" height="18px" viewBox="0 0 18 18">
+                                                <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+                                                <polyline points="1 9 7 14 15 4"></polyline>
+                                            </svg>
+                                        </label>
+                                    </div>
+
+
+
+                                </div>
+
+
+
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+    </div>
+    </main>
+    </section>
+    </div>
+
+
+
+
+
+
+    <section id="contact-info">
+        <!-- Custumer Info-->
+        <div id="customer-information">
+            <h3>Customer information</h3>
+            <p>This is where you provide necessary information</p>
+        </div>
+
+
+        <!--Delivery info-->
+        <h4>Delivery information</h4>
+
+
+        <div id="sendForm">
+            <button v-on:click="logMessage('clicked!')" type="submit"><img src="img/send.png"> <span class="btn-text"
+                    id="send-text">Send
+                    Info</span></button>
+        </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        <div id="app">
+
+            <form class="vue-form" @submit.prevent="submit">
+
+                <div class="error-message">
+                    <p v-show="!email.valid">Please enter a valid email address.</p>
+                </div>
+                <div class="error-message">
+                    <p v-show="!house.valid">Please enter a valid house number.</p>
+                </div>
+
+
+                <fieldset>
+                    <legend>Contact information</legend>
+                    <div>
+                        <label class="label" for="name">Name</label>
+                        <input type="text" name="name" id="name" required="" v-model="name">
+                    </div>
+                    <div>
+                        <label class="label" for="email">Email</label>
+                        <input type="email" name="email" id="email" required="" :class="{ email , error: !email.valid }"
+                            v-model="email.value">
+                    </div>
+                    <div>
+                        <label class="label" for="street">Street</label>
+                        <input type="text" name="street" id="street" required="" v-model="street">
+                    </div>
+                    <div>
+                       
+                        <label class="label" for="house">House</label>
+                        <input type="house" name="house" id="house" required="" :class="{ house , error: !house.valid }"
+                            v-model="house.value">
+
+                    </div>
+
+
+
+                    <div>
+                        <h4>Payment Options</h4>
+                        <p class="select">
+                            <select class="budget" v-model="selection.payment">
+                                <option value="Burger Heaven">Burger Heaven Card</option>
+                                <option value="Bank Card">Bank Card</option>
+                                <option value="Credit Card">Credit Card</option>
+                                <option value="Swish">Swish</option>
+                            </select>
+
+
+                        </p>
+                    </div>
+
+                    <div>
+                        <h4>Gender</h4>
+
+                        <ul class="vue-form-list">
+                            <li>
+                                <input type="radio" name="radio-1" id="radio-1" value="Male" v-model="selection.gender">
+                                <label for="radio-1">Male</label>
+                            </li>
+                            <li>
+                                <input type="radio" name="radio-2" id="radio-2" value="Female" v-model="selection.gender">
+                                <label for="radio-2">Female</label>
+                            </li>
+                            <li>
+                                <input type="radio" name="radio-3" id="radio-3" value="Non-Binary" v-model="selection.gender">
+                                <label for="radio-3">Non-binary</label>
+                            </li>
+                            <li>
+                                <input type="radio" name="radio-4" id="radio-4" value="Undisclosed" v-model="selection.gender">
+                                <label for="radio-2">Undisclosed</label>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h4>Features</h4>
+                        <ul class="vue-form-list">
+                            <li v-for="(feature, index) in features">
+                                <input type="checkbox" :value="feature" :id="'cb-feature-'+index" v-model="selection.features">
+                                <label :for="'cb-feature-'+index">{{feature}}</label>
+                            </li>
+                            <li>
+                                <input type="checkbox" id="checkbox-all" @click="checkAll">
+                                <label for="checkbox-all">Check All</label>
+                            </li>
+                        </ul>
+                    </div>
+                    <!--<div>
+                  <label class="label" for="textarea">Message with Counter</label>
+                  <textarea class="message" name="textarea" id="textarea" required="" 
+                            v-model="message.text" 
+                            :maxlength="message.maxlength"></textarea>
+                  <span class="counter">{{ message.text.length }} / {{ message.maxlength }}</span>
+                </div> -->
+                    <div>
+                        <input type="submit" value="Send Form">
+                    </div>
+                </fieldset>
+            </form>
+
+
+            <div class="debug">
+                <p>{{burgers.name}}</p>
+                <p>{{burgers}}</p>
+                <p>{{name}}</p>
+                <p>{{email.value}}</p>
+                <p>{{street}}</p>
+                <p>{{house.value}}</p>
+                <p>{{features}}</p>
+                <p></p>
+                <!--                 
+                features: ["Online card", "Credit", "Swish", "Burger Heaven card"],
+                selection: {
+                  payment: [],
+                  gender: "Undisclosed",
+                  features: []
+                },
+                message: {
+                  text: `Dear Mr. President,\n...`,
+                  maxlength: 255
+                },
+                submitted: false -->
+                <!-- <pre><code>{{ $data }}</code></pre> -->
+            </div>
+
+        </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        <!--
+<button onclick="processFormData() " type="submit"><img src="img/send.png"> <span class="btn-text" id="send-text">Send Info</span></button>
+</div>
+
+-->
+
+
+
+
+        <hr>
+
+        <!-- Info about contact information -->
+        <footer>
+            <p> &#169; Burger Inc.
+        </footer>
+
+
+
+
+
+
+</body>
+
+
+
+
+
+<script>
+
+
+
+
+</script>
+
+
+</html>
\ No newline at end of file
diff --git a/views/testAllign.html b/views/testAllign.html
new file mode 100644
index 0000000..7a1e75c
--- /dev/null
+++ b/views/testAllign.html
@@ -0,0 +1,142 @@
+<div class="container">
+
+      <div class="row">
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card mb-4 shadow-sm">
+            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"></rect><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
+            <div class="card-body">
+              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                </div>
+                <small class="text-muted">9 mins</small>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
\ No newline at end of file