diff --git a/paragon/_login.scss b/paragon/_login.scss
new file mode 100644
index 00000000..47bf80e4
--- /dev/null
+++ b/paragon/_login.scss
@@ -0,0 +1,212 @@
+#root {
+
+    .extra-large-screen-top-stripe,
+    .medium-screen-top-stripe,
+    .col-md-2.bg-white,
+    .extra-large-screen-top-stripe,
+    .small-screen-top-stripe {
+        display: none !important;
+    }
+
+    .layout {
+        min-height: 100vh;
+        background: $primary-light;
+        padding: 20px;
+        overflow: hidden;
+        position: relative;
+
+        @include media-breakpoint-up(sm) {
+            padding: 50px;
+        }
+
+        &:after,
+        &:before {
+            position: absolute;
+            left: -400px;
+            bottom: -400px;
+            content: "";
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+            box-shadow: 400px -400px 143px 90px rgb(208, 237, 88, 0.25);
+            display: none;
+
+            @include media-breakpoint-up(sm) {
+                display: block;
+            }
+        }
+
+        &:before {
+            right: 400px;
+            top: -400px;
+            left: auto;
+            bottom: auto;
+            box-shadow: 400px 400px 143px 90px rgb(208, 237, 88, 0.25);
+        }
+
+        .col-md-3.bg-white {
+            display: none;
+        }
+
+        .pgn__hyperlink.default-link.standalone-link {
+            display: none;
+        }
+
+        .bg-primary-400 {
+            background: none !important;
+            flex: 0 0 100%;
+            max-width: 100%;
+            display: block;
+
+            .min-vh-100 {
+                min-height: calc(100vh - 100px) !important;
+                display: flex !important;
+
+                @media screen and (max-width: 1200px) {
+                    min-height: 20px !important;
+                    display: block !important;
+                }
+            }
+
+            h1 {
+                margin: 0 auto !important;
+                max-width: 564px !important;
+                font-size: 32px;
+                line-height: 40px;
+                color: $primary !important;
+                padding: 50px 0;
+                position: relative;
+                z-index: 1;
+                width: 100%;
+                font-weight: 400;
+
+                @include media-breakpoint-up(sm) {
+                    font-size: 52px;
+                    line-height: 78px;
+                }
+
+                @media screen and (max-width: 1200px) {
+                    padding: 0;
+                }
+
+                .text-accent-a {
+                    font-weight: 400;
+                    font-size: 34px;
+                    line-height: 40px;
+                    color: $text-accent-a !important;
+                    display: block !important;
+                    font-weight: 900;
+
+                    @include media-breakpoint-up(sm) {
+                        font-size: 64px;
+                        line-height: 74px;
+                    }
+                }
+            }
+        }
+
+        .content {
+            background: #fff;
+            border-radius: 20px 0px;
+            padding: 20px;
+            margin: 0;
+            position: relative;
+            z-index: 1;
+            display: block;
+
+            @include media-breakpoint-up(sm) {
+                padding: 50px;
+                border-radius: 50px 0px;
+            }
+
+            @media screen and (max-width: 1200px) {
+                margin: 0 auto;
+                width: 100%;
+                max-width: 564px;
+            }
+
+            .nav.nav-tabs {
+                border-bottom: 1px solid #E5E7EB;
+                max-width: 450px;
+                margin: 0 auto;
+
+                a {
+                    font-size: 14px;
+                    line-height: 20px;
+                    font-weight: 500;
+                    padding: 0 0 16px;
+                    margin: 0 32px -1px 0;
+                    color: $text-color-primary;
+                    background: none !important;
+
+                    &:before {
+                        display: none;
+                    }
+
+                    &.active,
+                    &:hover {
+                        color: $primary;
+                        border-bottom: 2px solid $primary;
+                    }
+                }
+            }
+
+            #main-content {
+                min-width: 100px !important;
+                padding: 20px 0 0 !important;
+
+                >.mw-xs {
+                    min-width: 100px !important;
+                    max-width: 450px !important;
+                    margin: 0 auto !important;
+                }
+
+                .alert-danger {
+                    border-radius: 6px;
+                    background: #FEF2F2;
+                    padding: 16px;
+                    color: #B91C1C;
+                    font-size: 14px;
+                    line-height: 20px;
+                    box-shadow: none;
+
+                    .alert-heading {
+                        color: #B91C1C;
+                        font-size: 14px;
+                        line-height: 20px;
+                        font-weight: 500;
+                    }
+                }
+
+                .form-control:hover {
+                    box-shadow: none !important;
+                }
+
+                .form-control:focus {
+                    border: 2px solid $primary;
+                }
+
+                .form-control {
+                    border: 1px solid $primary;
+                }
+
+                .pgn__form-control-decorator-group {
+                    margin-inline-end: 0;
+                }
+
+                #forgot-password {
+                    font-weight: 400 !important;
+                    font-size: 14px;
+                }
+
+                .btn-brand {
+                    background-color: $primary;
+                    border-color: $primary;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 30px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
index a242f09f..361ddf72 100644
--- a/paragon/_overrides.scss
+++ b/paragon/_overrides.scss
@@ -1,2 +1,4 @@
 // Use this file to define style overrides for @edx/paragon
 // This file is included after all Paragon styles, but should generally avoid using private mixins in Paragon.
+
+@import "./login";
\ No newline at end of file
diff --git a/paragon/_variables.scss b/paragon/_variables.scss
index f84e2b32..283ff804 100644
--- a/paragon/_variables.scss
+++ b/paragon/_variables.scss
@@ -1,2 +1,11 @@
 // Use this file to set SASS variables for @edx/paragon
 // See _variables.scss in https://github.com/openedx/paragon/blob/master/scss/core/ for reference
+
+$primary: #6c9e00 !default;
+$primary-light: rgba(163, 216, 72, 0.2) !default;
+$light-dark: #374151 !default;
+$text-color-primary: #515661 !default;
+$text-color-light: #515661 !default;
+$brand: #6c9e00 !default;
+$text-accent-a: #00b3a7 !default;
+$teal: #00b3a7 !default;
\ No newline at end of file