diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss
index d8c4ad41f23..13e814a76b7 100644
--- a/src/sass/_common/reskin.scss
+++ b/src/sass/_common/reskin.scss
@@ -1,39 +1,39 @@
 body {
-  &.DE {
-    .quill-purchase-section {
-      .purchase-box {
-        .purchase-header {
-          .purchase-icon-box {
-            .contract_heading {
-              background-size: 35% !important;
+    &.DE {
+        .quill-purchase-section {
+            .purchase-box {
+                .purchase-header {
+                    .purchase-icon-box{ 
+                        .contract_heading {
+                            background-size: 35% !important;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 
 .quill {
-  &-container {
-    &-centered {
-      width: 100%;
-      position: sticky;
-      display: flex;
-      justify-content: center;
-      padding-bottom: 24px;
+    &-container {
+        &-centered {
+            width: 100%;
+            position: sticky;
+            display: flex;
+            justify-content: center;
+            padding-bottom: 24px;
+        }
     }
-  }
 }
 
 .tab-explanation {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 
-  h3 {
-    font-weight: 700;
-  }
+    h3 {
+        font-weight: 700;
+    }
 }
 
 .secondary-heading {
@@ -41,1011 +41,1030 @@ body {
 }
 
 .hint {
-  line-height: 22px;
+    line-height: 22px;
 }
 
 .chart-section {
-  padding-block: 32px;
+    padding-block: 32px;
 }
 
+
 .contained-section {
-  width: 100%;
-  max-width: 940px;
-  margin: 0 auto;
-  padding-block: 40px;
-
-  @media (max-width: 940px) {
-    padding-inline: 16px;
-  }
+    width: 100%;
+    max-width: 940px;
+    margin: 0 auto;
+    padding-block: 40px;
+
+    @media(max-width: 940px){
+        padding-inline: 16px;
+    }
 }
 
 .trading-container {
-  background: var(--core-color-solid-slate-75);
+    background: var(--core-color-solid-slate-75);
 }
 
 .market-navigation-container {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--core-size-800);
-
-  @media (max-width: 768px) {
-    flex-direction: column-reverse;
-  }
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--core-size-800);
 
-  div#markets-dropdown-container {
-    @media (max-width: 768px) {
-      width: 100%;
+    @media(max-width: 768px){
+        flex-direction: column-reverse;
     }
-  }
-  div#underlying_details {
-    display: flex;
-    flex-direction: column;
-    transform: scale(0.88);
 
-    @media (max-width: 768px) {
-      flex-direction: row;
+    div#markets-dropdown-container {
+        @media(max-width: 768px){
+            width: 100%;
+        }
     }
+    div#underlying_details {
+        display: flex;
+        flex-direction: column;
+        transform: scale(0.88);
+
+        @media(max-width: 768px){
+           flex-direction: row;
+        }
 
-    #spot {
-      margin-top: 5px;
+        #spot{
+            margin-top:  5px;
+        }
     }
-  }
-  div#onboarding-container {
-    margin-left: auto;
+    div#onboarding-container {
+        margin-left: auto;
 
-    @media (max-width: 768px) {
-      display: none;
+        @media (max-width: 768px) {
+           display: none;
+            
+        }
     }
-  }
-  .sub-navigation-container {
-    display: flex;
-    justify-content: space-between;
-    flex-grow: 1;
-    align-items: center;
+    .sub-navigation-container {
+        display: flex;
+        justify-content: space-between;
+        flex-grow: 1;
+        align-items: center;
 
-    @media (max-width: 768px) {
-      width: 100%;
+        @media(max-width: 768px){
+            width: 100%;
+        }
     }
-  }
 }
 
 .trade-container {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  margin: 16px 0 0;
-
-  #contract_forms_wrapper {
-    .quill-form-container {
-      border-radius: 16px;
-      background: var(--core-color-solid-slate-50);
-      width: 100%;
-      height: 100%;
-      align-items: center;
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin: 16px 0 0;
+
+    #contract_forms_wrapper {
+        .quill-form-container {
+            border-radius: 16px;
+            background: var(--core-color-solid-slate-50);
+            width: 100%;
+            height: 100%;
+            align-items: center;
+        }
     }
-  }
 }
 
 .trade-parameter-block {
-  max-width: 462px;
-  width: 100%;
-
-  @media (max-width: 940px) {
-    max-width: none;
+    max-width: 462px;
     width: 100%;
-  }
+
+    @media (max-width: 940px){
+        max-width: none;
+        width: 100%;
+    }
 }
 
 .quill-market-selector {
-  &-container {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    position: relative;
-    z-index: 100;
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        position: relative;
+        z-index: 100;
 
-    @media (max-width: 768px) {
-      gap: var(--core-size-800);
+        @media(max-width: 768px){
+           gap: var(--core-size-800);
+        }
     }
-  }
-  &-dropdown {
-    width: 100%;
-    max-width: 222px !important;
-    margin: 0 10px 0 0;
-    flex: none;
+    &-dropdown {
+        width: 100%;
+        max-width: 222px !important;
+        margin: 0 10px 0 0;
+        flex: none;
 
-    @media (max-width: 768px) {
-      max-width: 100% !important;
+        @media(max-width: 768px){
+            max-width: 100% !important;
 
-      .quill-custom-dropdown__container {
-        max-width: 100% !important;
-      }
+            .quill-custom-dropdown__container {
+                max-width: 100% !important;
+            }
+        }
     }
-  }
 }
 
 .quill-market-dropdown {
-  &-container {
-    width: 360px;
-    padding: 8px 0 0;
-    background: var(--core-color-solid-slate-50);
-    margin: 10px 0px;
-    border-radius: 8px;
-    border: 1px solid rgba(0, 0, 0, 0.04);
+    &-container {
+        width: 360px;
+        padding: 8px 0 0;
+        background: var(--core-color-solid-slate-50);
+        margin: 10px 0px;
+        border-radius: 8px;
+        border: 1px solid rgba(0, 0, 0, 0.04);
 
-    @media (max-width: 768px) {
-      width: 100%;
-      margin: 0px;
-    }
-  }
-  &-search-container {
-    padding: var(--core-spacing-400) var(--core-spacing-800);
-  }
-  &-tab-container {
-    .tab-list--item-hug-content {
-      height: 48px; // Needs to be fixed from Quill side.
+        @media(max-width: 768px){
+            width: 100%;
+            margin: 0px;
+        }
     }
-  }
-  &-item-container {
-    height: fit-content;
-    max-height: 420px;
-    overflow-y: auto;
-    padding: 0 var(--core-spacing-400);
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
-    border-radius: var(--core-borderRadius-500);
-
-    &::-webkit-scrollbar {
-      scrollbar-width: thin;
-      width: var(--core-size-200);
-      background-color: transparent;
-      border-radius: var(--core-borderRadius-500);
+    &-search-container {
+        padding: var(--core-spacing-400) var(--core-spacing-800);
     }
-    &::-webkit-scrollbar-track {
-      scrollbar-width: thin;
-      background-color: transparent !important;
+    &-tab-container {
+        .tab-list--item-hug-content {
+            height: 48px; // Needs to be fixed from Quill side. 
+        }
     }
-    &:hover {
-      scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
-      border-radius: var(--core-borderRadius-500);
-
-      &::-webkit-scrollbar-thumb {
+    &-item-container {
+        height: fit-content;
+        max-height: 420px;
+        overflow-y: auto;
+        padding: 0 var(--core-spacing-400);
         scrollbar-width: thin;
-        display: unset;
+        scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
         border-radius: var(--core-borderRadius-500);
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    &.market-item-container {
-      max-height: 320px;
 
-      @media (max-width: 768px) {
-        max-height: calc(100vh - 300px);
-      }
+        &::-webkit-scrollbar {
+            scrollbar-width: thin;
+            width: var(--core-size-200);
+            background-color: transparent;
+            border-radius: var(--core-borderRadius-500);
+        }
+        &::-webkit-scrollbar-track {
+            scrollbar-width: thin;
+            background-color: transparent !important;
+        }
+        &:hover {
+            scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
+            border-radius: var(--core-borderRadius-500);
+    
+            &::-webkit-scrollbar-thumb {
+                scrollbar-width: thin;
+                display: unset;
+                border-radius: var(--core-borderRadius-500);
+                background-color: rgba(0, 0, 0, 0.08);
+            }  
+        } 
+        &.market-item-container {
+            max-height: 320px;
+
+            @media(max-width: 768px){
+                max-height: calc(100vh - 300px);
+            }
+        }
     }
-  }
 }
 
+
 div#tradetype-dropdown {
-  #contract_component {
-    display: none;
-  }
+    #contract_component {
+        display: none;
+    }
 }
 
 div#contract-injection-container {
-  #contract_component {
-    display: block;
+    #contract_component {
+        display: block;
 
-    @media (max-width: 768px) {
-      width: 100%;
-      max-height: none;
+        @media(max-width: 768px){
+           width: 100%;
+           max-height: none;
+           
+        }
     }
-  }
 }
 
 .quill-purchase-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--core-spacing-800);
-
-  @media (max-width: 940px) {
-    flex-direction: row;
-  }
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-
-  p {
-    margin: 0px;
-  }
-  &-results {
     display: flex;
     flex-direction: column;
-    background: var(--core-color-solid-slate-50);
-    border-radius: var(--core-borderRadius-800);
-    width: 100%;
-    height: 100%;
+    gap: var(--core-spacing-800);
 
-    p {
-      margin: 0px;
+    @media (max-width: 940px) {
+       flex-direction: row;    
     }
-    .top-box {
-      display: flex;
-      flex-direction: column;
-      padding: var(--core-spacing-1200) 0;
 
-      .header-box {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0 var(--core-size-800);
-        margin-bottom: var(--core-size-800);
-        position: relative;
+    @media (max-width: 768px) {
+        flex-direction: column;
+        
+    }
 
-        .close-btn {
-          position: absolute;
-          right: 16px;
-          display: flex;
-          width: 48px;
-          height: 48px;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-        }
-      }
-      .body-box {
+    p {
+        margin: 0px;
+    }
+    &-results {
         display: flex;
         flex-direction: column;
-        padding: 0 var(--core-size-800);
-        gap: var(--core-size-800);
-
-        .description-box {
-          display: flex;
-          border-radius: var(--core-borderRadius-200);
-          border: solid 1px var(--core-color-opacity-slate-100);
-          padding: var(--core-size-800);
-          background-color: var(--core-color-opacity-slate-75);
-        }
-        .table-box {
-          display: flex;
-          @media (max-width: 319px) {
-            flex-direction: column;
-          }
+        background: var(--core-color-solid-slate-50);
+        border-radius: var(--core-borderRadius-800);
+        width: 100%;
+        height: 100%;
 
-          .table-item {
+        p {
+            margin: 0px;
+        }
+        .top-box {
             display: flex;
             flex-direction: column;
-            width: 100%;
-            align-items: center;
-          }
-        }
-        .info-box {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-          .view-btn {
-            margin-top: var(--core-size-400);
-          }
-        }
-        .error-box {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          gap: var(--core-size-800);
-
-          .error-message {
-            padding: var(--core-size-800);
-          }
-          button {
-            width: fit-content;
-          }
-        }
-      }
-      .analysis-box {
-        margin-top: var(--core-spacing-800);
-
-        .digit-tick-epoch {
-          position: relative !important;
-          margin-bottom: var(--core-spacing-800);
-          top: 0 !important;
-          right: 0 !important;
-        }
-        .digit-trade {
-          .quote {
-            font-weight: bold;
-          }
-        }
-        .digit-ticker {
-          margin-top: var(--core-spacing-800);
-
-          .mask {
-            font-size: 10px;
-            text-align: center;
-            border: none;
-            font-weight: bold;
-          }
-          .digit {
-            &.digit-winning {
-              background-color: var(--core-color-solid-emerald-100);
-              color: var(--core-color-solid-emerald-700);
+            padding: var(--core-spacing-1200) 0;
+
+            .header-box {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 0 var(--core-size-800);
+                margin-bottom: var(--core-size-800);
+                position: relative;
+
+                .close-btn {
+                    position: absolute;
+                    right: 16px;
+                    display: flex;
+                    width: 48px;
+                    height: 48px;
+                    justify-content: center;
+                    align-items: center;
+                    cursor: pointer;
+                }
             }
-          }
-          .peek-box {
-            &.digit-winning {
-              .peek {
-                border: none;
-              }
+            .body-box {
+                display: flex;
+                flex-direction: column;
+                padding: 0 var(--core-size-800);
+                gap: var(--core-size-800);
+
+                .description-box {
+                    display: flex;
+                    border-radius: var(--core-borderRadius-200);
+                    border: solid 1px var( --core-color-opacity-slate-100);
+                    padding: var(--core-size-800);
+                    background-color: var(--core-color-opacity-slate-75);
+                }
+                .table-box {
+                    display: flex;
+                    @media (max-width: 319px) {
+                        flex-direction: column;
+                        
+                    }
+        
+                    .table-item {
+                        display: flex;
+                        flex-direction: column;
+                        width: 100%;
+                        align-items: center;
+                    }
+                }
+                .info-box {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+
+                    .view-btn {
+                        margin-top: var(--core-size-400);
+                    }
+                }
+                .error-box {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: var(--core-size-800);
+
+                    .error-message {
+                        padding: var(--core-size-800);
+                    }
+                    button {
+                        width: fit-content;
+                    }
+                }
+            }
+            .analysis-box {
+                margin-top: var(--core-spacing-800);
+
+                .digit-tick-epoch {
+                    position: relative !important;
+                    margin-bottom: var(--core-spacing-800);
+                    top: 0 !important;
+                    right: 0 !important;
+                }
+                .digit-trade {
+                    .quote {
+                        font-weight: bold;
+                    }
+                }
+                .digit-ticker {
+                    margin-top: var(--core-spacing-800);
+
+                    .mask {
+                        font-size: 10px;
+                        text-align: center;
+                        border: none;
+                        font-weight: bold;
+                    }
+                    .digit {
+                        &.digit-winning {
+                            background-color: var(--core-color-solid-emerald-100);
+                            color: var(--core-color-solid-emerald-700);
+                        }
+                    }
+                    .peek-box {
+                        &.digit-winning {
+                            .peek {
+                                border: none;
+                            }
+                        }
+                    }
+                }
             }
-          }
         }
-      }
+        .footer-box {
+            display: flex;
+            justify-content: center;
+            background-color: var(--core-color-opacity-slate-100);
+            padding: var(--core-spacing-400);
+            border-radius: 0 0 var(--core-borderRadius-800) var(--core-borderRadius-800);
+            gap: 4px;
+            margin-top: auto;
+        }
     }
-    .footer-box {
-      display: flex;
-      justify-content: center;
-      background-color: var(--core-color-opacity-slate-100);
-      padding: var(--core-spacing-400);
-      border-radius: 0 0 var(--core-borderRadius-800)
-        var(--core-borderRadius-800);
-      gap: 4px;
-      margin-top: auto;
+    &.disabled {
+        opacity: 0.5;
     }
-  }
-  &.disabled {
-    opacity: 0.5;
-  }
-  .purchase-box {
-    display: flex;
-    flex-direction: column;
-    background: var(--core-color-solid-slate-50);
-    border-radius: var(--core-borderRadius-800);
-    height: fit-content;
-    min-height: 50px;
-    width: 100%;
-
-    .purchase-header {
-      display: flex;
-      padding: var(--core-spacing-800);
-      gap: var(--core-spacing-800);
-
-      .purchase-icon-box {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        max-width: 80px;
-
-        .contract_heading {
-          height: 48px;
-          width: 48px;
-          background-size: 75% !important;
-        }
-      }
-      .purchase-body-box {
+    .purchase-box {
         display: flex;
         flex-direction: column;
-        gap: var(--core-spacing-800);
+        background: var(--core-color-solid-slate-50);
+        border-radius: var(--core-borderRadius-800);
+        height: fit-content;
+        min-height: 50px;
         width: 100%;
-
-        .purchase-amount-box {
-          display: flex;
-          gap: var(--core-spacing-400);
-          justify-content: center;
-          flex-wrap: wrap;
-
-          .purchase-amount-info-box {
+        
+       
+        .purchase-header {
             display: flex;
-            flex-direction: column;
-            flex: 1;
-            align-items: center;
+            padding: var(--core-spacing-800);
+            gap: var(--core-spacing-800);
+           
+            .purchase-icon-box {
+                display:flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                max-width: 80px;
 
-            p {
-              transition: 100ms color ease-in-out;
-            }
-            .price_moved_up,
-            .price_moved_down {
-              background: unset;
-            }
-            .price_moved_up {
-              color: var(--semantic-color-emerald-solid-surface-normal-highest);
+                .contract_heading {
+                    height: 48px;
+                    width: 48px;
+                    background-size: 75% !important;
+                }
             }
-            .price_moved_down {
-              color: var(--semantic-color-cherry-solid-surface-normal-highest);
+            .purchase-body-box {
+                display: flex;
+                flex-direction: column;
+                gap: var(--core-spacing-800);
+                width: 100%;
+
+                .purchase-amount-box {
+                    display: flex;
+                    gap: var(--core-spacing-400);
+                    justify-content: center;
+                    flex-wrap: wrap;
+
+                    .purchase-amount-info-box {
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1;
+                        align-items: center;
+
+                        p {
+                            transition: 100ms color ease-in-out;
+                        }
+                        .price_moved_up,.price_moved_down{
+                            background: unset;
+                        }
+                        .price_moved_up {
+                            color: var(--semantic-color-emerald-solid-surface-normal-highest);
+                        }
+                        .price_moved_down {
+                            color: var(--semantic-color-cherry-solid-surface-normal-highest);
+                        }
+                    }   
+                }
             }
-          }
         }
-      }
-    }
-    .purchase-footer {
-      display: flex;
-      width: 100%;
-      min-height: 32px;
-      border-radius: 0 0 var(--core-borderRadius-800)
-        var(--core-borderRadius-800);
-      background: var(--core-color-opacity-slate-100);
-      justify-content: center;
-      padding: var(--core-spacing-400) var(--core-spacing-800);
+        .purchase-footer {
+            display: flex;
+            width: 100%;
+            min-height: 32px;
+            border-radius: 0 0 var(--core-borderRadius-800) var(--core-borderRadius-800);
+            background: var(--core-color-opacity-slate-100);
+            justify-content: center;
+            padding: var(--core-spacing-400) var(--core-spacing-800);
+        }
+        
     }
-  }
 }
 
 .quill-purchase-popup,
 .quill-generic-popup {
-  position: fixed;
-  top: 48px;
-  left: 0;
-  width: 100%;
-  height: calc(100% - 84px);
-  background: var(--core-color-solid-slate-75);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  @media (max-width: 940px) {
-    top: 40px;
-    height: calc(100% - 40px);
-  }
-
-  .popup-scroller {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-    height: calc(100% - 48px);
+    position: fixed;
+    top: 48px;
+    left: 0;
     width: 100%;
-  }
-  .header-box {
-    display: flex;
-    width: 100%;
-    height: 48px;
-    background: var(--core-color-opacity-white-800);
-
-    .title-box {
-      display: flex;
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-  .body-box {
+    height: calc(100% - 84px);
+    background: var(--core-color-solid-slate-75);
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 100%;
-    max-width: 940px;
 
-    .purchase-details-box {
-      display: flex;
-      width: 100%;
-      justify-content: center;
-      gap: var(--core-spacing-1200);
-      flex-direction: column;
-      padding: var(--core-spacing-1200) 0;
-      @media (max-width: 940px) {
-        padding: var(--core-spacing-1200) var(--core-spacing-800);
-      }
+    @media (max-width: 940px) {
+        top: 40px;   
+        height: calc(100% - 40px);   
     }
-    .loader-box {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: var(--core-spacing-1200);
-      padding: 40px 0 var(--core-spacing-1200) 0;
-
-      .body-loader {
+ 
+    .popup-scroller {
         display: flex;
-        gap: var(--core-size-800);
-      }
-    }
-    .details-title {
-      display: flex;
-      width: 100%;
-      justify-content: center;
-    }
-    .details-column {
-      display: flex;
-      width: 100%;
-      gap: var(--core-spacing-800);
-      @media (max-width: 940px) {
         flex-direction: column;
-      }
-
-      .chart-wrapper {
-        background: var(--core-color-solid-slate-50);
-        padding: 16px;
-        border-radius: 8px;
-        width: fit-content;
-        height: fit-content;
-
-        &:first-child {
-          width: 620px;
-        }
+        align-items: center;
+        overflow-y: auto;
+        height: calc(100% - 48px);
+        width: 100%;
+    }
+    .header-box {
+        display: flex;
+        width: 100%;
+        height: 48px;
+        background: var(--core-color-opacity-white-800);
 
-        @media (max-width: 940px) {
-          &:first-child {
+        .title-box {
+            display: flex;
             width: 100%;
-          }
+            justify-content: center;
+            align-items: center;
         }
-      }
-      .contract-info-wrapper {
+    }
+    .body-box {
         display: flex;
         flex-direction: column;
-        max-width: 360px;
-        background: var(--core-color-solid-slate-50);
-        border-radius: 8px;
-        height: fit-content;
-        @media (max-width: 940px) {
-          max-width: 100%;
-        }
-
-        &.full {
-          max-width: none;
-          min-width: 564px;
+        align-items: center;
+        width: 100%;
+        max-width: 940px;
+ 
 
-          @media (max-width: 940px) {
-            min-width: 100%;
-          }
-        }
-        .table-box {
-          width: 100%;
-          height: fit-content;
-          display: flex;
-          padding: 8px 16px;
-          border-bottom: solid 1px var(--core-color-opacity-slate-100);
-          gap: var(--core-spacing-400);
-          @media (max-width: 319px) {
+        .purchase-details-box {
+            display: flex;
+            width: 100%;
+            justify-content: center;
+            gap: var(--core-spacing-1200);
             flex-direction: column;
-          }
+            padding: var(--core-spacing-1200) 0;
+            @media (max-width: 940px){
+                padding: var(--core-spacing-1200) var(--core-spacing-800);
+            
+            }
 
-          &.lg {
-            flex-direction: column;
-            border-bottom: none;
-            justify-content: center;
-            padding: var(--core-spacing-800);
-            margin: var(--core-spacing-800) 0 0 0;
-          }
-          p,
-          .info-msg {
-            width: 100%;
-            white-space: normal;
-          }
-          .table-item {
+        }
+        .loader-box {
             display: flex;
             flex-direction: column;
-            justify-content: center;
-            min-width: 140px;
-            width: fit-content;
-            word-break: break-word;
+            width: 100%;
+            gap: var(--core-spacing-1200);
+            padding: 40px 0 var(--core-spacing-1200) 0;
 
-            &:last-child {
-              min-width: 180px;
+            .body-loader {
+                display: flex;
+                gap: var(--core-size-800);
             }
-
+        }
+        .details-title {
+            display: flex;
+            width: 100%;
+            justify-content: center;
+        }
+        .details-column {
+            display: flex;
+            width: 100%;
+            gap: var(--core-spacing-800);
             @media (max-width: 940px) {
-              word-break: break-word;
-
-              &:first-child,
-              &:last-child {
-                min-width: 120px;
-              }
+                flex-direction: column;
+                
             }
 
-            &.profit-loss {
-              p {
-                font-weight: bold;
+            .chart-wrapper {
+                background: var(--core-color-solid-slate-50);
+                padding: 16px;
+                border-radius: 8px;
+                width: fit-content;        
+                height: fit-content;
 
-                &.profit {
-                  color: var(
-                    --semantic-color-emerald-solid-surface-normal-highest
-                  );
-                }
-                &.loss {
-                  color: var(
-                    --semantic-color-cherry-solid-surface-normal-highest
-                  );
+                &:first-child {
+                    width: 620px ;
                 }
-                .symbols {
-                  margin-right: 5px;
-                }
-                .percent {
-                  font-weight: normal;
+
+                @media (max-width: 940px) {
+                    &:first-child {
+                        width: 100%;
+                    }
+                    
                 }
-              }
             }
-          }
-        }
-        .table-container {
-          display: flex;
-          flex-direction: column;
-          padding: var(--core-spacing-800);
-          gap: var(--core-spacing-400);
-          border-bottom: solid 1px var(--core-color-opacity-slate-100);
-
-          .table-item {
-            display: flex;
-            gap: var(--core-spacing-800);
+            .contract-info-wrapper {
+                display: flex;
+                flex-direction: column;
+                max-width: 360px;
+                background: var(--core-color-solid-slate-50);
+                border-radius: 8px;
+                height: fit-content;
+                @media (max-width: 940px) {
+                    max-width: 100%;
+                    
+                }
 
-            .item-header {
-              display: flex;
-              width: 100%;
-              max-width: 120px;
-              padding: var(--core-spacing-400);
-            }
-            .item-content {
-              display: flex;
-              padding: var(--core-spacing-400);
-              width: 100%;
-              text-align: center;
-
-              &.highlighted {
-                background: var(--core-color-solid-slate-100);
-              }
-              &.selected {
-                background: var(--core-color-solid-slate-700);
-
-                p {
-                  color: var(--core-color-solid-slate-50);
+                &.full {
+                    max-width: none;
+                    min-width: 564px;
+
+                    @media (max-width: 940px) {
+                        min-width: 100%;
+                        
+                    }
+                }
+                .table-box {
+                    width: 100%;
+                    height: fit-content;
+                    display: flex;
+                    padding: 8px 16px;
+                    border-bottom: solid 1px var(--core-color-opacity-slate-100);
+                    gap: var(--core-spacing-400);
+                    @media (max-width: 319px) {
+                        flex-direction: column;
+                        
+                    }
+
+                    &.lg {
+                        flex-direction: column;
+                        border-bottom: none;
+                        justify-content: center;
+                        padding: var(--core-spacing-800);
+                        margin: var(--core-spacing-800) 0 0 0;
+                    }
+                    p, .info-msg {
+                        width: 100%;
+                        white-space: normal;
+                    }
+                    .table-item {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        min-width: 140px;
+                        width: fit-content;
+                        word-break: break-word;
+
+                        &:last-child {
+                            min-width: 180px;
+                        }
+
+                        @media (max-width: 940px) {
+                            word-break: break-word;
+
+                            &:first-child, &:last-child {
+                                min-width: 120px;
+                            }
+                        }
+
+                        
+                        &.profit-loss {
+                            p {
+                                font-weight: bold;
+
+                                &.profit {
+                                    color: var(--semantic-color-emerald-solid-surface-normal-highest);
+                                }
+                                &.loss {
+                                    color: var(--semantic-color-cherry-solid-surface-normal-highest);
+                                }
+                                .symbols {
+                                    margin-right: 5px;
+                                }
+                                .percent {
+                                    font-weight: normal;
+                                }
+                            }
+                        }
+                    }
+                }
+                .table-container {
+                    display: flex;
+                    flex-direction: column;
+                    padding: var(--core-spacing-800);
+                    gap: var(--core-spacing-400);
+                    border-bottom: solid 1px var(--core-color-opacity-slate-100);
+
+                    .table-item {
+                        display: flex;
+                        gap: var(--core-spacing-800);
+
+                        .item-header {
+                            display: flex;
+                            width: 100%;
+                            max-width: 120px;
+                            padding: var(--core-spacing-400);
+                        }
+                        .item-content {
+                            display: flex;
+                            padding: var(--core-spacing-400);
+                            width: 100%;
+                            text-align: center;
+
+                            &.highlighted {
+                                background: var(--core-color-solid-slate-100);
+                            }
+                            &.selected {
+                                background: var(--core-color-solid-slate-700);
+                                
+                                p {
+                                    color: var(--core-color-solid-slate-50);
+                                }
+                            }
+                            .item-inner {
+                                display: flex;
+                                width: 100%;
+                                align-items: center;
+                                justify-content: center;
+                            }
+                        }
+                    }
                 }
-              }
-              .item-inner {
-                display: flex;
-                width: 100%;
-                align-items: center;
-                justify-content: center;
-              }
             }
-          }
         }
-      }
     }
-  }
 }
 
-// Hide old containers
+// Hide old containers 
 // This is to allow QA to disable this quickly
 html:not(.test) {
-  #trading_init_progress,
-  #contract_container,
-  #contract_symbol_container,
-  #contract_prices_container,
-  .popup_page_overlay,
-  .inpage_popup_container {
-    position: absolute !important;
-    top: -999px !important;
-  }
+    #trading_init_progress, 
+    #contract_container,
+    #contract_symbol_container,
+    #contract_prices_container, 
+    .popup_page_overlay, 
+    .inpage_popup_container {
+        position: absolute !important;
+        top: -999px !important;
+    }
 }
 
 html.test {
-  .inpage_popup_container {
-    z-index: 9999 !important;
-  }
-  .quill-purchase-popup {
-    z-index: 12;
-  }
+    .inpage_popup_container {
+        z-index: 9999 !important;
+    }
+    .quill-purchase-popup {
+        z-index: 12;
+    }
 }
 
 .purchase-tooltip {
-  display: block;
-  width: 100%;
-  max-width: 200px;
+    display: block;
+    width: 100%;
+    max-width: 200px;
 }
 
 #react-tiny-popover-container {
-  z-index: 999;
+    z-index: 999;
 }
 
 .explanation-container-loader {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-
-  .section-loaders {
     display: flex;
+    flex-direction: column;
     gap: 16px;
-    justify-content: center;
-    width: 100%;
-    flex-wrap: wrap;
-  }
+
+    .section-loaders {
+        display: flex;
+        gap: 16px;
+        justify-content: center;
+        width: 100%;
+        flex-wrap: wrap;
+    }
 }
 
 .explanation-heading {
-  padding-bottom: 8px;
+   padding-bottom: 8px;
 }
 
 .explanation-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.quill-form {
-  &-container {
     display: flex;
-    position: relative;
-    z-index: 99;
-    padding: 16px;
     flex-direction: column;
     gap: 16px;
-    min-height: 290px;
+}
 
-    @media (max-width: 940px) {
-      padding: 32px 16px;
-    }
+.quill-form {
+    &-container {
+        display: flex;
+        position: relative;
+        z-index: 99;
+        padding: 16px;
+        flex-direction: column;
+        gap: 16px;
+        min-height: 290px;
 
-    .section-msg-container {
-      width: 100%;
-    }
-  }
-  &-rows {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: 16px;
+        @media(max-width: 940px){
+            padding: 32px 16px;
+        }
 
-    @media (max-width: 768px) {
-      gap: 8px;
+        .section-msg-container {
+            width: 100%;
+        }
     }
-  }
-  &-row {
-    display: flex;
-    gap: 8px;
+    &-rows {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        gap: 16px;
 
-    @media (max-width: 768px) {
-      flex-direction: column;
-      gap: 8px;
+        @media(max-width: 768px){
+            gap: 8px;
+        }
     }
+    &-row {
+        display: flex;
+        gap: 8px;
+
+        @media(max-width: 768px){
+            flex-direction: column;
+            gap: 8px;
+        }
 
-    .form_field {
-      flex: 1;
+        .form_field {
+            flex: 1;
 
-      &.field-pb {
-        padding-bottom: 20px;
-      }
+            &.field-pb {
+                padding-bottom: 20px;
+            }
 
-      @media (max-width: 768px) {
-        width: 100%;
-      }
-
-      .dropdown__wrapper {
-        max-width: unset !important;
-      }
-      .dropdown__container {
-        width: 100% !important;
-        min-width: unset !important;
-      }
-      .custom-dropdown-wrapper {
-        padding: 8px 0 0;
-        background: var(--core-color-solid-slate-50);
-        margin: 10px 0px;
-        border-radius: 8px;
-        border: 1px solid rgba(0, 0, 0, 0.04);
-        max-height: 320px;
-        overflow-y: auto;
+            @media(max-width: 768px){
+                width: 100%;
+            }
 
-        &::-webkit-scrollbar {
-          scrollbar-width: thin;
-          width: var(--core-size-200);
-          background-color: transparent;
-          border-radius: var(--core-borderRadius-500);
-        }
-        &::-webkit-scrollbar-track {
-          scrollbar-width: thin;
-          background-color: transparent !important;
+            .dropdown__wrapper {
+                max-width: unset !important;
+            }
+            .dropdown__container {
+                width: 100% !important;
+                min-width: unset !important;
+            }
+            .custom-dropdown-wrapper {
+                padding: 8px 0 0;
+                background: var(--core-color-solid-slate-50);
+                margin: 10px 0px;
+                border-radius: 8px;
+                border: 1px solid rgba(0, 0, 0, 0.04);
+                max-height: 320px;
+                overflow-y: auto;
+
+                &::-webkit-scrollbar {
+                    scrollbar-width: thin;
+                    width: var(--core-size-200);
+                    background-color: transparent;
+                    border-radius: var(--core-borderRadius-500);
+                }
+                &::-webkit-scrollbar-track {
+                    scrollbar-width: thin;
+                    background-color: transparent !important;
+                }
+                &:hover {
+                    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
+                    border-radius: var(--core-borderRadius-500);
+            
+                    &::-webkit-scrollbar-thumb {
+                        scrollbar-width: thin;
+                        display: unset;
+                        border-radius: var(--core-borderRadius-500);
+                        background-color: rgba(0, 0, 0, 0.08);
+                    } 
+                }     
+            }
+            .quill-custom-dropdown__container {
+                max-width: unset !important;
+            }
+            .datepicker__wrapper {
+                max-width: unset !important;
+            }
         }
-        &:hover {
-          scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
-          border-radius: var(--core-borderRadius-500);
-
-          &::-webkit-scrollbar-thumb {
-            scrollbar-width: thin;
-            display: unset;
-            border-radius: var(--core-borderRadius-500);
-            background-color: rgba(0, 0, 0, 0.08);
-          }
+        &.allow-equals {
+            justify-content: center;
+            align-items: center;
         }
-      }
-      .quill-custom-dropdown__container {
-        max-width: unset !important;
-      }
-      .datepicker__wrapper {
-        max-width: unset !important;
-      }
     }
-    &.allow-equals {
-      justify-content: center;
-      align-items: center;
-    }
-  }
 }
 
 .barrier-tooltip {
-  display: block;
-  width: 100%;
-  max-width: 300px;
+    display: block;
+    width: 100%;
+    max-width: 300px;
 }
 
 .barrier-indicator {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 .datepicker-dropdown__menu {
-  position: absolute;
+    position: absolute;
 }
 
 .deriv-dropdown__menu--open {
-  position: relative;
-  z-index: 99;
+    position: relative;
+    z-index: 99;
 }
 
 .bottom-content-section {
-  min-height: 400px;
-  padding: 16px;
+    min-height: 400px;
+    padding: 16px;
 
-  @media (max-width: 768px) {
-    min-height: fit-content;
-  }
+    @media(max-width: 768px){
+        min-height: fit-content;
+    }
+   
 }
 
 .not-available-container {
-  height: calc(100vh - 48px - 37px);
-  padding: var(--core-spacing-1600) var(--core-spacing-800);
-  display: flex;
-  justify-content: center;
-
-  button:focus {
-    background-color: var(--core-color-solid-coral-700);
-  }
+    height: calc(100vh - 48px - 37px);
+    padding: var(--core-spacing-1600) var(--core-spacing-800);
+    display: flex;
+    justify-content: center;
+
+    button:focus {
+        background-color: var(--core-color-solid-coral-700);
+    }
 }
 
 .not-available-section {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: var(--core-spacing-1600);
-  max-width: 940px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--core-spacing-1600);
+    max-width: 940px;
 }
 
 .not-available-section-text {
-  color: var(--component-textIcon-normal-prominent);
+    color: var(--component-textIcon-normal-prominent);
 }
 
 .main-loader {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 942px;
-  margin: 0 auto;
-
-  @media (max-width: 768px) {
-    padding: 16px;
-  }
-
-  .header-loader {
     display: flex;
-    margin-top: 42px;
-    gap: 26px;
+    flex-direction: column;
+    width: 100%;
+    max-width: 942px;
+    margin: 0 auto;
+
 
     @media (max-width: 768px) {
-      flex-direction: column-reverse;
-      gap: 16px;
+        padding: 16px;
+        
     }
+    
+    .header-loader {
+        display: flex;
+        margin-top: 42px;
+        gap: 26px;
 
-    .dropdown-loader-container {
-      display: flex;
-      gap: 12px;
+        @media (max-width: 768px) {
+           flex-direction: column-reverse;
+           gap: 16px;
+            
+        }
 
-      @media (max-width: 768px) {
-        flex-direction: column;
-      }
+        .dropdown-loader-container {
+            display: flex;
+            gap: 12px;
 
-      .dropdown-loader {
-        width: 220px;
+            @media (max-width: 768px) {
+                flex-direction: column;
+                   
+            }
 
-        @media (max-width: 768px) {
-          width: 100%;
+            .dropdown-loader {
+                width: 220px;
+
+                @media (max-width: 768px) {
+                    width: 100%;
+                       
+                }
+            }
+        }
+        .other-header-loader-container {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
         }
-      }
-    }
-    .other-header-loader-container {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
     }
-  }
-  .body-loader {
-    display: flex;
-    margin-top: 18px;
-    width: 100%;
-    gap: 16px;
+    .body-loader {
+        display: flex;
+        margin-top: 18px;
+        width: 100%;
+        gap: 16px;
 
-    @media (max-width: 768px) {
-      flex-direction: column;
-    }
+        @media (max-width: 768px) {
+            flex-direction: column;
+               
+        }
+
+        .trade-section-loader {
+            display: flex;
+            width: 100%;
+            max-width: 462px;
 
-    .trade-section-loader {
-      display: flex;
-      width: 100%;
-      max-width: 462px;
+            @media (max-width: 768px) {
+                max-width: 100%;
+                   
+            }
+        }
+        .purchase-section-loader {
+            display: flex;
+            flex-direction: column;
+            gap: var(--core-spacing-800);
+            width: 100%;
+            max-width: 490px;
 
-      @media (max-width: 768px) {
-        max-width: 100%;
-      }
+            @media (max-width: 768px) {
+                max-width: 100%;
+                   
+            }
+        }
     }
-    .purchase-section-loader {
-      display: flex;
-      flex-direction: column;
-      gap: var(--core-spacing-800);
-      width: 100%;
-      max-width: 490px;
-
-      @media (max-width: 768px) {
-        max-width: 100%;
-      }
+    .footer-loader {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        margin-top: 132px;
     }
-  }
-  .footer-loader {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-    margin-top: 132px;
-  }
 }
 
 .static-page-layout {
-  margin-top: 40px;
-  margin-bottom: 20px;
+    margin-top: 40px;
+    margin-bottom: 20px;
 
-  @media (max-width: 768px) {
-    margin-top: 25px;
-  }
+    @media (max-width: 768px) {
+        margin-top: 25px;
+        
+    }
 }
 
 .static-content {
-  margin: 0 auto;
-  max-width: 960px;
-  padding-inline: 10px;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+    margin : 0 auto;
+    max-width: 960px;
+    padding-inline: 10px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
-.input-class {
-  width: 346px !important;
-  padding: 10px 12px;
-  border: 1px solid var(--core-color-solid-slate-400);
-  font-size: 14px;
-  height: 40px;
-
-  @media (max-width: 768px) {
-    height: 48px !important;
-    width: 312px !important;
-  }
+.input-class{
+    width: 346px !important;
+    padding: 10px 12px;
+    border: 1px solid var(--core-color-solid-slate-400);
+    font-size: 14px;
+    height: 40px; 
+
+    @media (max-width: 768px) {
+        height: 48px !important;
+        width: 312px !important;
+        
+    }
 }
 
 .submit-button {
-  background: var(--core-color-solid-green-700);
-  text-decoration: none;
-  text-align: center;
-  line-height: 100%;
-  padding: 10px 25px;
-  display: inline-block;
-  font-weight: 400;
-  font-family: inherit;
-  border-radius: 4px;
-  overflow: visible;
-  border: 0;
-  color: var(--core-color-solid-slate-50);
-
-  &:hover {
-    background: var(--core-color-solid-green-1100);
-  }
+    background: var(--core-color-solid-green-700);
+    text-decoration: none;
+    text-align: center;
+    line-height: 100%;
+    padding: 10px 25px;
+    display: inline-block;
+    font-weight: 400;
+    font-family: inherit;
+    border-radius: 4px;
+    overflow: visible;
+    border: 0;
+    color: var(--core-color-solid-slate-50);
+
+    &:hover {
+        background: var(--core-color-solid-green-1100);
+    }
 }
 
 .header__hamburger {
-  box-sizing: content-box;
-}
+    box-sizing: content-box;
+}
\ No newline at end of file