diff --git a/blockchainCloud_client.html b/blockchainCloud_client.html
index caab280..ab436ca 100644
--- a/blockchainCloud_client.html
+++ b/blockchainCloud_client.html
@@ -6,407 +6,562 @@
     <meta name="keywords" content="blockchain,ContentCollaboration,RanchiMall">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="This web app can be used to collaborate between various teams using blockchain technology.">
-    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand|Roboto&display=swap" rel="stylesheet">
     <!--<link rel="stylesheet" href="css/main.css">-->
-    <style>
-        body {
-            margin: 0;
-            font-size: 16px;
-            background: #111;
-            }
-
-            * {
-            -webkit-box-sizing: border-box;
-                    box-sizing: border-box;
-            font-family: 'Roboto', sans-serif;
-            }
-
-            ::-webkit-scrollbar {
-            width: 0.5em;
-            height: 0.25em;
-            }
-
-            ::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.1);
-            }
-
-            ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.1);
-            }
-
-            ::-webkit-scrollbar-thumb:hover {
-            background: #555;
-            }
-
-            button {
-            -ms-flex-item-align: start;
-                align-self: flex-start;
-            display: flexbox;
-            background: transparent;
-            color: mediumspringgreen;
-            padding: 1em 2em;
-            border: none;
-            -webkit-transition: background 0.2s ease;
-            transition: background 0.2s ease;
-            font-size: 1em;
-            }
-
-            button:hover {
-            background: linear-gradient(45deg, teal, mediumSpringGreen);
-            cursor: pointer;
-            color: white;
-            }
-
-            button:first-of-type {
-            margin-left: auto;
-            }
-
-            input {
-            -ms-flex-item-align: start;
-                align-self: flex-start;
-            display: flexbox;
-            width: 100%;
-            padding: 1em;
-            margin: 1em 0;
-            color: white;
-            border: none;
-            font-size: 1em;
-            }
-
-            #modal_container {
-            position: fixed;
-            display: -ms-grid;
-            display: grid;
-            width: 100vw;
-            height: 100vh;
-            place-items: center;
-            z-index: 12;
-            background: rgba(0, 0, 0, 0.6);
-            -webkit-transition: opacity 0.2s ease;
-            transition: opacity 0.2s ease;
-            }
-
-            #article_creation_modal {
-            position: relative;
-            overflow-y: auto;
-            max-height: 24em;
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            -ms-flex-wrap: wrap;
-                flex-wrap: wrap;
-            width: 24em;
-            background: #222;
-            padding: 1em 2em;
-            color: white;
-            -webkit-transform: translateY(1em);
-                    transform: translateY(1em);
-            -webkit-transition: -webkit-transform 0.2s ease;
-            transition: -webkit-transform 0.2s ease;
-            transition: transform 0.2s ease;
-            transition: transform 0.2s ease, -webkit-transform 0.2s ease;
-            }
-
-            #article_creation_modal h3, #article_creation_modal h4 {
-            font-weight: normal;
-            width: 100%;
-            }
-
-            #article_creation_modal input {
-            -ms-flex-item-align: start;
-                align-self: flex-start;
-            display: flexbox;
-            width: 100%;
-            padding: 1em;
-            border: none;
-            margin: 1em 0;
-            background: #111;
-            color: white;
-            }
-
-            #article_creation_modal select {
-            width: 100%;
-            padding: 1em;
-            background: #111;
-            color: white;
-            border: none;
-            font-size: 1em;
-            }
-
-            #article_creation_modal #section_settings, #article_creation_modal #section_names_select_settings {
-            width: 100%;
-            }
-
-            #article_creation_modal button {
-            margin: 1em 0;
-            }
-
-            #article_creation_modal #hide_article_creation_modal {
-            margin-left: auto;
-            }
-
-            .section-title {
-            color: #111;
-            background: mediumspringgreen;
-            padding: 0.5em;
-            display: inline-block;
-            margin: 0.5em 0;
-            }
-
-            .gallery-container {
-            position: relative;
-            }
-
-            .gallery-container .navigation-arrows {
-            -webkit-transition: opacity 0.2s ease;
-            transition: opacity 0.2s ease;
-            cursor: pointer;
-            padding: 1.5em;
-            height: 100%;
-            width: 4em;
-            z-index: 2;
-            position: absolute;
-            top: 50%;
-            -webkit-transform: translateY(-50%);
-                    transform: translateY(-50%);
-            fill: white;
-            }
-
-            .gallery-container .navigation-arrows:nth-of-type(1) {
-            background: -webkit-gradient(linear, right top, left top, from(transparent), to(rgba(0, 0, 0, 0.6)));
-            background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.6));
-            }
-
-            .gallery-container .navigation-arrows:nth-of-type(2) {
-            right: 0;
-            background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0, 0, 0, 0.6)));
-            background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6));
-            }
-
-            .gallery {
-            position: relative;
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            -webkit-box-orient: horizontal;
-            -webkit-box-direction: normal;
-                -ms-flex-direction: row;
-                    flex-direction: row;
-            overflow-x: auto;
-            -ms-scroll-snap-type: x mandatory;
-                scroll-snap-type: x mandatory;
-            }
-
-            .gallery-name {
-            font-weight: normal;
-            padding: 0.2em 0;
-            margin-bottom: 0.5em;
-            color: white;
-            }
-
-            .article-body {
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-                -ms-flex-direction: column;
-                    flex-direction: column;
-            scroll-snap-align: center;
-            min-width: 30%;
-            background-color: #222;
-            color: white;
-            margin: 0 1em 1em 0;
-            -webkit-box-shadow: 0.25px 0.5em 0.5em rgba(0, 0, 0, 0.3);
-                    box-shadow: 0.25px 0.5em 0.5em rgba(0, 0, 0, 0.3);
-            }
-
-            .article-body .article-header {
-            padding: 1em;
-            word-break: break-all;
-            }
-
-            .article-body .article-header h5 {
-            font-weight: normal;
-            }
-
-            .article-body .card-body {
-            padding: 1em;
-            -webkit-box-flex: 1;
-                -ms-flex: 1;
-                    flex: 1;
-            }
-
-            .article-body .card-footer {
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            padding: 1em;
-            }
-
-            .article-body .card-footer h5 {
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            font-weight: normal;
-            display: inline-flexbox;
-            -webkit-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                    user-select: none;
-            -ms-flex-line-pack: center;
-                align-content: center;
-            }
-
-            .article-body .card-footer h5:first-of-type {
-            margin-left: auto;
-            color: mediumspringgreen;
-            cursor: pointer;
-            }
-
-            .article-body .card-footer h5 svg {
-            stroke: mediumspringgreen;
-            width: 1.2em;
-            margin-right: 0.5em;
-            }
-
-            .article-body .card-footer h5 svg:hover {
-            fill: mediumspringgreen;
-            }
-
-            .show {
-            opacity: 1;
-            pointer-events: all;
-            }
-
-            .hide {
-            opacity: 0;
-            pointer-events: none;
-            }
-
-            #article_container {
-            padding: 2em;
-            }
-
-            .no-transformations {
-            -webkit-transform: none !important;
-                    transform: none !important;
-            }
-
-            #navbar {
-            width: 100%;
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            -webkit-box-orient: horizontal;
-            -webkit-box-direction: normal;
-                -ms-flex-direction: row;
-                    flex-direction: row;
-            -webkit-box-align: center;
-                -ms-flex-align: center;
-                    align-items: center;
-            color: white;
-            background: #222;
-            }
-
-            #navbar #icon {
-            width: 2em;
-            margin: 0 0.5em;
-            }
-
-            #navbar button {
-            padding: 1.2em 2em;
-            background: linear-gradient(45deg, teal, mediumSpringGreen);
-            text-transform: uppercase;
-            font-weight: bold;
-            color: white;
-            }
-
-            #loader_container {
-            position: fixed;
-            height: 100vh;
-            width: 100vw;
-            top: 0;
-            background: rgba(0, 0, 0, 0.3);
-            display: -ms-grid;
-            display: grid;
-            place-content: center;
-            z-index: 15;
-            }
-
-            #loader_container #spinner {
-            position: relative;
-            height: 2em;
-            fill: teal;
-            overflow: visible;
-            -ms-grid-column-align: center;
-                justify-self: center;
-            }
-
-            #loader_container h4 {
-            font-weight: normal;
-            color: white;
-            }
-
-            .pulse .first-orb {
-            -webkit-animation: pulse 1s infinite ease;
-                    animation: pulse 1s infinite ease;
-            }
-
-            .pulse .second-orb {
-            -webkit-animation: pulse 1s 0.1s infinite ease;
-                    animation: pulse 1s 0.1s infinite ease;
-            }
-
-            .pulse .third-orb {
-            -webkit-animation: pulse 1s 0.2s infinite ease;
-                    animation: pulse 1s 0.2s infinite ease;
-            }
-
-            @-webkit-keyframes pulse {
-            0% {
-                -webkit-transform: scale(1);
-                        transform: scale(1);
-            }
-            60% {
-                -webkit-transform: scale(1.5);
-                        transform: scale(1.5);
-            }
-            100% {
-                -webkit-transform: scale(1);
-                        transform: scale(1);
-            }
-            }
-
-            @keyframes pulse {
-            0% {
-                -webkit-transform: scale(1);
-                        transform: scale(1);
-            }
-            60% {
-                -webkit-transform: scale(1.5);
-                        transform: scale(1.5);
-            }
-            100% {
-                -webkit-transform: scale(1);
-                        transform: scale(1);
-            }
-            }
-
-            @media only screen and (max-width: 720px) {
-            .article-body {
-                min-width: calc(100% - 2em);
-            }
-            #article_container {
-                padding: 1em;
-            }
-            .navigation-arrows {
-                opacity: 0;
-                pointer-events: none;
-            }
-            }
-            /*# sourceMappingURL=main.css.map */
-    </style>
+    <style>html {
+        font-size: 16px;
+      }
+      
+      @media only screen and (min-width: 1920px) {
+        html {
+          font-size: 18px;
+        }
+      }
+      
+      @media only screen and (min-width: 2560px) {
+        html {
+          font-size: 20px;
+        }
+      }
+      
+      @media only screen and (min-width: 3840px) {
+        html {
+          font-size: 22px;
+        }
+      }
+      
+      body {
+        margin: 0;
+        font-size: 16px;
+        background: #111;
+      }
+      
+      :root {
+        --primary-color: #00fa9a;
+        --light-shade: rgba(255, 255, 255, 0.1);
+      }
+      
+      * {
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+        font-family: 'Roboto', sans-serif;
+      }
+      
+      h1, h2, h3, h4, h5 {
+        font-family: 'Quicksand', sans-serif;
+      }
+      
+      ::-webkit-scrollbar {
+        width: 0.6rem;
+        height: 0.25rem;
+      }
+      
+      ::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+      }
+      
+      ::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.2);
+      }
+      
+      ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+      }
+      
+      button {
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        background: transparent;
+        color: var(--primary-color);
+        padding: 1.2rem;
+        border: none;
+        -webkit-transition: background 0.2s ease;
+        transition: background 0.2s ease;
+        font-weight: bold;
+      }
+      
+      button svg {
+        height: 1rem;
+      }
+      
+      button:hover {
+        background: var(--light-shade);
+        cursor: pointer;
+      }
+      
+      button:first-of-type {
+        margin-left: auto;
+      }
+      
+      button:focus {
+        outline: none;
+      }
+      
+      input {
+        -ms-flex-item-align: start;
+            align-self: flex-start;
+        display: flexbox;
+        width: 100%;
+        padding: 1rem;
+        border: none;
+        margin: 1rem 0;
+        background: #181818;
+        color: white;
+        font-size: 1rem !important;
+      }
+      
+      .popup-container {
+        display: -ms-grid;
+        display: grid;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        place-items: center;
+        background: rgba(0, 0, 0, 0.4);
+        z-index: 4;
+        -webkit-transition: opacity 0.2s ease;
+        transition: opacity 0.2s ease;
+      }
+      
+      .popup-container .popup {
+        overflow-y: auto;
+        padding: 1rem 0;
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+        background: #222;
+        -webkit-transform: translateY(1em);
+                transform: translateY(1em);
+        -webkit-transition: -webkit-transform 0.2s ease;
+        transition: -webkit-transform 0.2s ease;
+        transition: transform 0.2s ease;
+        transition: transform 0.2s ease, -webkit-transform 0.2s ease;
+        -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+                box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+        color: white;
+      }
+      
+      #article_creation_modal {
+        max-height: 24rem;
+        width: 24rem;
+        padding: 1rem 2rem;
+      }
+      
+      #article_creation_modal h3, #article_creation_modal h4 {
+        font-weight: normal;
+        width: 100%;
+      }
+      
+      #article_creation_modal button {
+        margin: 1rem 0;
+      }
+      
+      #article_creation_modal button:first-of-type {
+        margin-left: auto;
+        margin-right: 1rem;
+      }
+      
+      .section-title {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        width: 100%;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+      }
+      
+      .section-title h2 {
+        color: #111;
+        background: var(--primary-color);
+        padding: 0.5rem;
+        margin: 0;
+      }
+      
+      .gallery-name {
+        padding: 0.2rem 0;
+        margin: 1rem 0;
+        color: white;
+      }
+      
+      .edit-article {
+        margin-left: auto;
+      }
+      
+      .edit-article svg {
+        fill: var(--primary-color);
+        margin-right: 0.5rem;
+      }
+      
+      #edit_article {
+        width: 24rem;
+        padding: 0;
+      }
+      
+      #edit_article label {
+        font-size: 0.9rem;
+      }
+      
+      #edit_article input {
+        margin-bottom: 2rem;
+        margin-top: 0.5rem;
+        width: 100%;
+      }
+      
+      #edit_article header {
+        width: 100%;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        padding: 0.5rem 2rem;
+      }
+      
+      #edit_article header button {
+        margin-left: auto;
+        margin-right: 0;
+        -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+      }
+      
+      #edit_article header button svg {
+        stroke: var(--primary-color);
+        stroke-width: 0.2rem;
+        fill: none;
+        margin-right: 0.5rem;
+      }
+      
+      #edit_article #edit_section_container {
+        max-height: 50vh;
+        overflow-y: auto;
+        padding: 1rem 2rem;
+      }
+      
+      .gallery-container {
+        position: relative;
+      }
+      
+      .gallery-container .navigation-arrows {
+        -webkit-transition: opacity 0.2s ease;
+        transition: opacity 0.2s ease;
+        cursor: pointer;
+        padding: 1.5rem;
+        height: 100%;
+        width: 4rem;
+        z-index: 2;
+        position: absolute;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+                transform: translateY(-50%);
+        fill: white;
+      }
+      
+      .gallery-container .navigation-arrows:nth-of-type(1) {
+        background: -webkit-gradient(linear, right top, left top, from(transparent), to(rgba(0, 0, 0, 0.6)));
+        background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.6));
+      }
+      
+      .gallery-container .navigation-arrows:nth-of-type(2) {
+        right: 0;
+        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0, 0, 0, 0.6)));
+        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6));
+      }
+      
+      .gallery {
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        overflow-x: auto;
+        -ms-scroll-snap-type: x mandatory;
+            scroll-snap-type: x mandatory;
+      }
+      
+      .article-body {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+        scroll-snap-align: start;
+        min-width: 30%;
+        background-color: #222;
+        color: white;
+        margin: 0 1rem 1rem 0;
+      }
+      
+      .article-body .article-header {
+        padding: 0.5rem 1rem;
+        word-break: break-all;
+      }
+      
+      .article-body .article-header h5 {
+        font-weight: normal;
+        color: #82DDF0;
+        font-family: 'roboto', sans-serif;
+      }
+      
+      .article-body .card-body {
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+      }
+      
+      .article-body .card-body .content-div {
+        padding: 0 1rem;
+        min-height: 12rem;
+        line-height: 1.4rem;
+        max-height: 60vh;
+        overflow-y: auto;
+        font-family: 'Quicksand', serif;
+        font-weight: normal !important;
+        font-size: 1.1rem;
+      }
+      
+      .article-body .card-footer {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        padding: 0.5rem 1rem;
+      }
+      
+      .article-body .card-footer h5 {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        font-weight: normal;
+        -webkit-user-select: none;
+           -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+      }
+      
+      .article-body .card-footer h5:first-of-type {
+        margin-left: auto;
+        color: var(--primary-color);
+        cursor: pointer;
+      }
+      
+      .article-body .card-footer h5 svg {
+        stroke: var(--primary-color);
+        width: 1.2rem;
+        margin-right: 0.5rem;
+      }
+      
+      .article-body .card-footer h5 svg:hover {
+        fill: var(--primary-color);
+      }
+      
+      .show {
+        opacity: 1;
+        pointer-events: all;
+      }
+      
+      .hide {
+        opacity: 0;
+        pointer-events: none;
+      }
+      
+      #article_container {
+        padding: 2rem;
+        position: absolute;
+        width: 100%;
+        height: calc(100% - 4.4rem);
+        bottom: 0;
+        overflow-y: auto;
+      }
+      
+      .no-transformations {
+        -webkit-transform: none !important;
+                transform: none !important;
+      }
+      
+      #navbar {
+        position: fixed;
+        width: 100%;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        color: white;
+        background: #222;
+        padding: 0.5rem;
+        z-index: 2;
+      }
+      
+      #navbar h5 {
+        font-weight: normal;
+        margin: 0 0 0.25rem 0;
+      }
+      
+      #navbar span {
+        font-size: 0.9rem;
+        -ms-grid-column-align: center;
+            justify-self: center;
+      }
+      
+      #navbar #icon {
+        width: 2rem;
+        margin: 0 0.5rem;
+      }
+      
+      #navbar button {
+        text-transform: uppercase;
+      }
+      
+      #navbar button svg {
+        stroke: var(--primary-color);
+        stroke-width: 0.2rem;
+        margin-right: 0.5rem;
+      }
+      
+      #loader_container {
+        position: fixed;
+        height: 100vh;
+        width: 100vw;
+        top: 0;
+        background: rgba(0, 0, 0, 0.3);
+        display: -ms-grid;
+        display: grid;
+        place-content: center;
+        z-index: 4;
+        text-align: center;
+      }
+      
+      #loader_container #spinner {
+        position: relative;
+        height: 2rem;
+        fill: teal;
+        overflow: visible;
+        -ms-grid-column-align: center;
+            justify-self: center;
+      }
+      
+      #loader_container h4 {
+        font-weight: normal;
+        color: white;
+      }
+      
+      .pulse .first-orb {
+        -webkit-animation: pulse 1s infinite ease;
+                animation: pulse 1s infinite ease;
+      }
+      
+      .pulse .second-orb {
+        -webkit-animation: pulse 1s 0.1s infinite ease;
+                animation: pulse 1s 0.1s infinite ease;
+      }
+      
+      .pulse .third-orb {
+        -webkit-animation: pulse 1s 0.2s infinite ease;
+                animation: pulse 1s 0.2s infinite ease;
+      }
+      
+      @-webkit-keyframes pulse {
+        0% {
+          -webkit-transform: scale(1);
+                  transform: scale(1);
+        }
+        60% {
+          -webkit-transform: scale(1.5);
+                  transform: scale(1.5);
+        }
+        100% {
+          -webkit-transform: scale(1);
+                  transform: scale(1);
+        }
+      }
+      
+      @keyframes pulse {
+        0% {
+          -webkit-transform: scale(1);
+                  transform: scale(1);
+        }
+        60% {
+          -webkit-transform: scale(1.5);
+                  transform: scale(1.5);
+        }
+        100% {
+          -webkit-transform: scale(1);
+                  transform: scale(1);
+        }
+      }
+      
+      @media only screen and (max-width: 640px) {
+        ::-webkit-scrollbar {
+          width: 0.2rem;
+          height: 0.2rem;
+        }
+        ::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.3);
+        }
+        .article-body {
+          min-width: calc(100% - 2em) !important;
+        }
+        #article_container {
+          padding: 1rem;
+        }
+        .navigation-arrows {
+          opacity: 0;
+          pointer-events: none;
+        }
+        .popup {
+          width: 100% !important;
+        }
+        .popup-container {
+          -webkit-box-align: end;
+              -ms-flex-align: end;
+                  align-items: flex-end;
+        }
+        #edit_section_container {
+          max-height: 70vh !important;
+        }
+      }
+      
+      @media only screen and (max-width: 1280px) {
+        .article-body {
+          min-width: 50%;
+        }
+      }
+      /*# sourceMappingURL=main.css.map */</style>
 </head>
 
 <script>
@@ -441,45 +596,34 @@
 </script>
 
 <body onload="onLoadStartUp()">
-    <section id="modal_container" class="hide">
-        <div id="article_creation_modal">
+    <section class="popup-container hide">
+        <div id="article_creation_modal" class="popup">
             <h3>Create a new article</h3>
             <input type="text" id="article_name" placeholder="Article name">
     
-            <input type="number" id="section_nums" placeholder="Section number">
+            <input type="number" id="section_nums" placeholder="Number of sections">
 
-            <button id="hide_article_creation_modal" onclick="hide_article_creation_modal(this.parentNode)">Cancel</button>
+            <button onclick="hidePopup('article_creation_modal')">Cancel</button>
             <button id="reset_data_btn">Create</button>
-
-            <div id="section_names_select_settings"></div>
-            <div id="section_settings"></div>
             
         </div>
     </section>
+    <div class="popup-container hide">
+        <div id="edit_article" class="popup">
+            <header>
+                <h3>Edit section names</h3>
+                <button onclick="cloudArticleApp.update_section_names()">
+                    <svg viewBox="0 0 45.91 32.62">
+                        <polyline points="0.71,17.21 14.71,31.21 45.21,0.71 "/>
+                    </svg>
+                    Done</button>
+            </header>
+            <div id="edit_section_container"></div>
+        </div>
+    </div>
 
     <nav id="navbar">
-        <svg id="icon" viewBox="0 0 99.555 117.877" style="enable-background:new 0 0 99.555 117.877;"
-            xml:space="preserve">
-            <style type="text/css">
-                .st0{fill:url(#SVGID_1_);}
-                .st1{fill:url(#SVGID_2_);}
-            </style>
-            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="97.2301" y1="78.3705" x2="9.026" y2="12.0223">
-                <stop  offset="0" style="stop-color:mediumspringgreen"/>
-                <stop  offset="1" style="stop-color:teal"/>
-            </linearGradient>
-            <path class="st0" d="M98.46,77.89c-4.54-16.94-21.95-27-38.9-22.46c-4.21,1.13-7.99,3.05-11.23,5.57l-4.93-4.93
-            c6.24-8.59,6.09-20.35-0.46-28.78l4.97-4.97c4.6,2.71,10.62,2.11,14.57-1.84c4.69-4.69,4.69-12.28,0-16.97s-12.28-4.69-16.97,0
-            c-3.95,3.95-4.56,9.97-1.84,14.57l-4.97,4.97c-9.42-7.32-23.02-6.68-31.67,1.97c-9.37,9.37-9.37,24.57,0,33.94
-            c8.35,8.35,21.31,9.24,30.67,2.71l4.98,4.98c-5.86,7.58-8.24,17.7-5.57,27.67c4.54,16.94,21.95,27,38.9,22.46
-            C92.95,112.25,103,94.83,98.46,77.89z"/>
-        </svg>
-      <span>Blockchain Content Collaboration</span>
-      <button id="show_article_creation_modal" onclick="show_article_creation_modal()">Create article</button>
-    </nav>
-    
-    <div id="loader_container" class="hide">
-        <svg id="spinner"viewBox="0 0 100 118" xml:space="preserve">
+        <svg id="icon" viewBox="0 0 99.555 117.877">
             <style type="text/css">
                 .first-orb{fill:#00FA9A;}
                 .second-orb{fill:#00EDBF;}
@@ -491,84 +635,104 @@
                 <circle class="third-orb" cx="68" cy="86" r="32"/>
             </g>
         </svg>
+      <span><h5>RanchiMall</h5>CONTENT COLLABORATION</span>
+      <button onclick="showPopup('article_creation_modal')">
+        <svg viewBox="0 0 24 24">
+            <line x1="12" y1="0" x2="12" y2="24"/>
+            <line x1="0" y1="12" x2="24" y2="12"/>
+        </svg>
+         Article</button>
+    </nav>
+    
+    <div id="loader_container" class="hide">
+        <svg id="spinner"viewBox="0 0 100 118" xml:space="preserve">
+            <g>
+                <circle class="first-orb" cx="54" cy="12" r="12"/>
+                <circle class="second-orb" cx="24" cy="42" r="24"/>
+                <circle class="third-orb" cx="68" cy="86" r="32"/>
+            </g>
+        </svg>
         <h4 id="show_log_events"></h4>
     </div>
 
     <section id="article_container">
         <div id="current_data"></div>
     </section>
-</div>
 
-<script>
-    function show_article_creation_modal(){ 
-        let container = document.getElementById('modal_container');
-        container.classList.remove('hide');
-        let modal = document.getElementById('article_creation_modal')
-        modal.classList.add('no-transformations');
-        window.onclick = function(event) {
-            if (event.target == container)
-                hide_article_creation_modal(modal);
+    <script>
+        // function required for popups or modals to appear
+        function showPopup(popup) { 
+            let thisPopup = document.getElementById(popup);
+            thisPopup.parentNode.classList.remove('hide');    
+            thisPopup.classList.add('no-transformations');    
+            window.onclick = function(event) {
+                if (event.target == thisPopup.parentNode)
+                    hidePopup(popup);
+            }
         }
-    }
-    function hide_article_creation_modal(element){ 
-        element.parentNode.classList.add('hide');
-        element.classList.remove('no-transformations');
-    }
-    let options = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.5
-    }
-    function prevArticle(container){
-        const observer = new IntersectionObserver((entries) => {
-            if(entries[0].isIntersecting)
-                container.children[1].classList.add('hide')
-            else
-                container.children[1].classList.remove('hide')
-        }, options)
-        observer.observe(container.children[0].firstElementChild)
-        container.children[0].scrollBy({
-            top: 0,
-            left: -400,
-            behavior: 'smooth'
-        });
-    }
-    function nextArticle(container){
-        container.children[1].classList.remove('hide')
-        const observer = new IntersectionObserver((entries) => {
-            if(entries[0].isIntersecting)
-                container.children[2].classList.add('hide')
-            else
-                container.children[2].classList.remove('hide')
-        }, options)
-        observer.observe(container.children[0].lastElementChild)
-
-        container.children[0].scrollBy({
-            top: 0,
-            left: 400,
-            behavior: 'smooth'
-        });  
-    }
-    function showMessage(msg) {
-        document.getElementById('show_log_events').textContent = msg;
-        if(document.getElementById('loader_container').classList.contains('hide')){
-            showLoader()
-            setTimeout(() => {
-                hideLoader()
-            }, 1000);
+    
+        // hides the popup or modal 
+        function hidePopup(popup) { 
+            let thisPopup = document.getElementById(popup);
+            thisPopup.parentNode.classList.add('hide');    
+            thisPopup.classList.remove('no-transformations');    
         }
-    }
-    function showLoader(){
-        let spinner = document.getElementById('loader_container');
-            spinner.firstElementChild.classList.add('pulse');
-            spinner.classList.remove('hide');
-    }
-    function hideLoader(){
-        let spinner = document.getElementById('loader_container');
-            spinner.firstElementChild.classList.remove('pulse');
-            spinner.classList.add('hide');
-    }
-</script>
+        function prevArticle(container){
+            let observer = new IntersectionObserver((entries) => {
+                if(entries[0].isIntersecting)
+                    container.children[1].classList.add('hide')
+                else
+                    container.children[1].classList.remove('hide')
+            },{
+                root: container,
+                threshold: 1
+            })
+            observer.observe(container.children[0].firstElementChild)
+            container.children[0].scrollBy({
+                top: 0,
+                left: -400,
+                behavior: 'smooth'
+            });
+        }
+        function nextArticle(container){
+            container.children[1].classList.remove('hide')
+            let observer = new IntersectionObserver((entries) => {
+                if(entries[0].isIntersecting)
+                    container.children[2].classList.add('hide')
+                else
+                    container.children[2].classList.remove('hide')
+            }, {
+                root: container,
+                threshold: 1
+            })
+            observer.observe(container.children[0].lastElementChild)
+    
+            container.children[0].scrollBy({
+                top: 0,
+                left: 400,
+                behavior: 'smooth'
+            });  
+        }
+        function showMessage(msg) {
+            document.getElementById('show_log_events').textContent = msg;
+            if(document.getElementById('loader_container').classList.contains('hide')){
+                showLoader()
+                setTimeout(() => {
+                    hideLoader()
+                }, 1000);
+            }
+        }
+        function showLoader(){
+            let spinner = document.getElementById('loader_container');
+                spinner.firstElementChild.classList.add('pulse');
+                spinner.classList.remove('hide');
+        }
+        function hideLoader(){
+            let spinner = document.getElementById('loader_container');
+                spinner.firstElementChild.classList.remove('pulse');
+                spinner.classList.add('hide');
+        }
+    </script>    
 
 <script id="init_lib">
     //All util libraries required for Standard operations (DO NOT EDIT ANY)
@@ -8169,6 +8333,7 @@ Bitcoin.Util = {
     sendDataToSN(data, snfloID){
         return new Promise((resolve, reject) => {
             console.log(snfloID)
+            console.info("five");
             var websocket = new WebSocket("wss://" + floGlobals.supernodes[snfloID].uri + "/ws");
             websocket.onmessage = (evt => {
                 if(evt.data == '$+'){
@@ -8196,6 +8361,8 @@ Bitcoin.Util = {
     sendData: function (data, floID) {
       return new Promise((resolve, reject) => {
         this.kBucket.determineClosestSupernode(floID).then(closestNode => {
+            console.info("four");
+            console.log(closestNode)
             this.sendDataToSN(data, closestNode[0])
                 .then(result => resolve(result))
                 .catch(error => reject(error))
@@ -8872,6 +9039,8 @@ Bitcoin.Util = {
                     type: type,
                     comment: options.comment || ""
                 }
+                console.info("three");
+                console.table(data);
                 floSupernode.sendData(JSON.stringify(data), data.receiverID)
                     .then(result => resolve(result))
                     .catch(error => reject(error))
@@ -8901,6 +9070,7 @@ Bitcoin.Util = {
         //send General Data
         sendGeneralData: function(message, type, options = {}){
             return new Promise((resolve,reject) => {
+                console.info("two");
                 this.sendApplicationData(message, type, options)
                     .then(result => resolve(result))
                     .catch(error => reject(error))
@@ -9259,11 +9429,13 @@ Bitcoin.Util = {
     
     const cloudArticleApp = {
 
-        SUBJECT: "testArticle7",
+        SUBJECT: "BusinessDesign1", // BusinessDesign1 | testArticle9
 
         numberOfSections: 5,
 
-        CONTENT_TYPE: "typeContentCollab7",
+        CONTENT_TYPE: "BUSINESS_DESIGN", // BUSINESS_DESIGN | typeContentCollab9
+
+        todaysContenthashList: [],
 
         delay: (t, v) => {
           return new Promise(function(resolve) {
@@ -9282,7 +9454,9 @@ Bitcoin.Util = {
             const full_data_div = document.getElementById('current_data'),
                   articleSubject = floGlobals.appObjects[this.SUBJECT]; 
 
-            const new_generalData = floDapps.getNextGeneralData(this.CONTENT_TYPE, floGlobals.vectorClock[this.SUBJECT]);
+            //const new_generalData = floDapps.getNextGeneralData(this.CONTENT_TYPE, floGlobals.vectorClock[this.SUBJECT]);
+
+            const new_generalData = floGlobals.generalData[JSON.stringify({application:floGlobals.application, type:cloudArticleApp.CONTENT_TYPE})]
 
             let new_entries_array = [];
             
@@ -9304,7 +9478,7 @@ Bitcoin.Util = {
 
             for(key in obj) {
                 if (Object.keys(articleSubject).includes(key)) {
-                    article_structure += `<h2 class="section-title">${key}</h2>`;
+                    article_structure += `<div class="section-title"><h2>${key}</h2><div class="edit-article"></div></div>`;
                 }
 
                 for(secKey in articleSubject[key].data) {
@@ -9313,7 +9487,7 @@ Bitcoin.Util = {
 
                     if(typeof secObject.section_details==="object"
                       && secObject.section_details.section_name.length) {
-                      article_structure += `<h3 class="gallery-name">${secKey.toUpperCase()} - ${secObject.section_details.section_name}</h3>`;
+                      article_structure += `<h3 class="gallery-name">${secObject.section_details.section_name}</h3>`;
                     }
              
                     // Add non scored new entries from users
@@ -9339,14 +9513,24 @@ Bitcoin.Util = {
                         let vc = article_data.vectorClock || "";
 
                         if(Number(article_data.score)>0) {
+                          // const new_content_object = {
+                          //   content: article_data.content,
+                          //   content_creator: article_data.content_creator,
+                          //   score: article_data.score,
+                          //   vectorClock: article_data.vectorClock,
+                          //   signerPubKey: article_data.signerPubKey
+                          // }
                           const new_content_object = {
+                            article_name: article_data.article_name,
                             content: article_data.content,
+                            contentSHA256Hash: article_data.contentSHA256Hash,
                             content_creator: article_data.content_creator,
+                            section: article_data.section,
                             score: article_data.score,
                             vectorClock: article_data.vectorClock,
                             signerPubKey: article_data.signerPubKey
                           }
-                          if(!floGlobals.subAdmins.includes(bitjs.pubkey2address(myPubKey))) continue;
+                          if(!floGlobals.subAdmins.includes(bitjs.pubkey2address(article_data.signerPubKey))) continue;
                           if(floCrypto.verifySign(JSON.stringify(new_content_object), article_data.sign, article_data.signerPubKey)!==true) continue;
                           if(vc.length>0) vc_array.push(vc);
                         } else {
@@ -9360,18 +9544,17 @@ Bitcoin.Util = {
                         article_structure += 
                         `<div class="article-body">
                                 <div class="article-header">
-                                    <h5>Author Id: ${article_data.content_creator}</h5>
+                                    <h5>${article_data.content_creator}</h5>
                                 </div>
                                 <div class="card-body">
-                                    <div class="content_div" id="${gen_div_id}" data-value="${key}__${secKey}" contenteditable="true" onfocusout="cloudArticleApp.edit_onfocuout()">
+                                    <div class="content-div" id="${gen_div_id}" data-value="${key}__${secKey}" contenteditable="true" onfocusout="cloudArticleApp.edit_onfocuout(event)">
                                         ${article_data.content.trim()}
                                     </div>
                                     <input type="hidden" id="hash_${gen_div_id}" value="${content_hash}">
                                 </div>
                                 <div class="card-footer">
                                     <h5 title="Give score to this article">
-                                        <svg viewBox="0 0 16.55 16" style="enable-background:new 0 0 16.55 16;" xml:space="preserve" fill="${fill}"
-                                         >
+                                        <svg viewBox="0 0 16.55 16" style="enable-background:new 0 0 16.55 16;" xml:space="preserve" fill="${fill}">
                                             <polygon
                                             id="score_${vc}" onclick="cloudArticleApp.upgrade_article(event)"
                                              points="8.28,13.27 3.16,16 4.14,10.21 0,6.11 5.72,5.27 8.28,0 10.83,5.27 16.55,6.11 12.41,10.21 13.39,16"/>
@@ -9401,36 +9584,33 @@ Bitcoin.Util = {
             //section_settings
             if(!floGlobals.subAdmins.includes(myFloID)) return false;
             if(typeof floGlobals.appObjects[this.SUBJECT]!=="object") return false;
-            const section_names_settings = document.getElementById('section_names_select_settings');
-            let section_settings_html = `<h4>Section Settings</h4>
-                                        <select id="topic_name_section" onchange="cloudArticleApp.pop_up_section_names_ui()">
-                                        <option>Choose Topic...</option>`;
-            Object.keys(floGlobals.appObjects[this.SUBJECT]).forEach(k=>{
-              section_settings_html += `<option>${k}</option>`;
-            });
-            section_settings_html += `</select>`;
-
-            section_names_settings.innerHTML = section_settings_html;
-
+            let topics = document.querySelectorAll('.edit-article');
+                for(let i = 0; i < Object.keys(floGlobals.appObjects[this.SUBJECT]).length; i++){
+                    topics[i].innerHTML= `<button title="Edit article sections" id="${Object.keys(floGlobals.appObjects[this.SUBJECT])[i]}" onclick="cloudArticleApp.editArticleSectionNames(this.id)"><svg viewBox="0 0 30.57 30.57">
+                                            <path d="M24.32,0.59l-3.53,3.53l5.66,5.66l3.53-3.53c0.78-0.78,0.78-2.05,0-2.83l-2.83-2.83
+                                                C26.37-0.2,25.11-0.2,24.32,0.59z"/>
+                                            <path d="M19.38,5.53L1.7,23.21c-0.52,0.52-0.68,1.24-0.52,1.9L0.04,29.3c-0.2,0.75,0.48,1.43,1.23,1.23l4.19-1.14
+                                                c0.66,0.17,1.38,0,1.9-0.52l17.68-17.68L19.38,5.53z"/>
+                                            </svg>Edit</button>
+                                            `;
+                }
         },
 
-        pop_up_section_names_ui: function() {
+        editArticleSectionNames: function(Topic) {
+            showPopup('edit_article');
             let sec_counter = 1,
-                section_settings_html = ``;
-            const Topic = document.getElementById("topic_name_section").value,
-                  section_settings = document.getElementById("section_settings");
+                sectionSettingsHtml = ``,
+                sectionSettingsList = document.getElementById("edit_section_container");
             
             if(!Object.keys(floGlobals.appObjects[this.SUBJECT]).includes(Topic)) return;
-            section_settings.innerHTML=""; 
-            section_settings_html += `<h4>Change section names </h4>`;
+            sectionSettingsList.innerHTML=``; 
             for(vals of Object.values(floGlobals.appObjects[this.SUBJECT][Topic].data)) {
-              section_settings_html += `<label for="section${sec_counter}">Section ${sec_counter} </label>
+              sectionSettingsHtml += `<label for="section${sec_counter}">Section ${sec_counter}</label>
                                         <input type="text" id="section${sec_counter}" name="section_names_ip" value="${vals.section_details.section_name}">`;
               sec_counter++;
             }
-            section_settings_html += `<button id="change-section-names-btn" onclick="cloudArticleApp.update_section_names()">Update</button>`;
 
-            section_settings.innerHTML = section_settings_html;          
+            sectionSettingsList.innerHTML = sectionSettingsHtml;          
         },
 
         update_section_names: async function() {
@@ -9445,7 +9625,7 @@ Bitcoin.Util = {
       
           floCloudAPI.updateObjectData(floGlobals.appObjects[this.SUBJECT], full_data, this.SUBJECT, {receiverID: floGlobals.adminID}); 
           this.retrieveLatestContent();
-          hide_article_creation_modal();
+          hidePopup('edit_article')
         },
 
         retrieveLatestContent: async function(receiverID=floGlobals.adminID, senderIDs=floGlobals.subAdmins) {
@@ -9519,8 +9699,8 @@ Bitcoin.Util = {
             return true;    
         }, 
 
-        addArticleContent: function(article_name="", section="", newcontent="", content_creator="", score=0, vectorClock="") {
-            this.retrieveLatestContent();  
+        addArticleContent: async function(article_name="", section="", newcontent="", content_creator="", score=0, vectorClock="") {
+            await this.retrieveLatestContent();  
             let full_data =  JSON.parse(JSON.stringify(floGlobals.appObjects[this.SUBJECT]));
             let article = full_data[article_name];
 
@@ -9541,9 +9721,24 @@ Bitcoin.Util = {
             let oldArticle = article.data[section]["section_iters"][`iteration${iterNumber}`];
             let iterNum = Number(iterNumber)+1;
 
+            // Convert line breaks into br
+            newcontent = newcontent.replace(/\n/g, '<br>').trim();
+
+            const contentSHA256Hash = Crypto.SHA256(newcontent);
+
+            // Reject if this hash is already present in db
+            if (JSON.stringify(article).includes(contentSHA256Hash)) return false;
+
+            // Reject if duplicate content is being submitted && which is not yet registered in floGlobals.appObjects[this.SUBJECT]
+            if(cloudArticleApp.todaysContenthashList.includes(contentSHA256Hash)) return false;
+            cloudArticleApp.todaysContenthashList.push(contentSHA256Hash);
+
             const new_content_object = {
+                article_name: article_name,
                 content: newcontent,
+                contentSHA256Hash: contentSHA256Hash,
                 content_creator: content_creator,
+                section: section,
                 score: score,
                 vectorClock: vectorClock,
                 signerPubKey: myPubKey
@@ -9561,13 +9756,17 @@ Bitcoin.Util = {
               const general_data_obj = {
                 article_name: article_name,
                 content: newcontent,
+                contentSHA256Hash: contentSHA256Hash,
                 content_creator: myFloID,
                 section: section,
                 score: 0,
+                vectorClock: vectorClock,
                 signerPubKey: myPubKey
               }
               general_data_obj.sign = floCrypto.signData(JSON.stringify(general_data_obj), myPrivKey);
 
+              console.info("one");
+
               floCloudAPI.sendGeneralData(general_data_obj,this.CONTENT_TYPE,{receiverID:floGlobals.adminID, senderIDs:[myFloID]});
             }
             
@@ -9582,7 +9781,7 @@ Bitcoin.Util = {
         edit_onfocuout: function(event) {
             if(floGlobals.subAdmins.includes(myFloID)) return;
             let target = this.getEventTarget(event);
-            const updated_content = target.innerText.trim().replace('..' , '');   
+            const updated_content = target.innerText.trim();   
             const updated_content_hash = Crypto.SHA256(updated_content);
             let editable_div = document.getElementsByClassName('content_div');
             let _id = target.id;
@@ -9609,6 +9808,7 @@ Bitcoin.Util = {
                   && iters.vectorClock==article_vc) {
                   cloudArticleApp.addArticleContent(title, sections, iters.content,
                     iters.content_creator, new_score, article_vc);
+                  break;
                 }
               }
             }
@@ -9624,7 +9824,7 @@ Bitcoin.Util = {
         const reset_data_btn = document.getElementById('reset_data_btn');
         reset_data_btn.onclick = function() {
             cloudArticleApp.resetArticleContent();
-            hide_article_creation_modal();
+            hidePopup('edit_article')
         }
     })();
  </script>