diff --git a/src/app/adf-user-management/df-login/df-login.component.html b/src/app/adf-user-management/df-login/df-login.component.html
index b74967b2..3c134266 100644
--- a/src/app/adf-user-management/df-login/df-login.component.html
+++ b/src/app/adf-user-management/df-login/df-login.component.html
@@ -22,7 +22,7 @@
       <mat-divider></mat-divider>
       <mat-card-content>
         <form name="login-form" [formGroup]="loginForm" (ngSubmit)="login()">
-          <mat-form-field appearance="fill" *ngIf="ldapServices.length">
+          <mat-form-field appearance="outline" *ngIf="ldapServices.length">
             <mat-label>
               {{
                 'userManagement.controls.services.label' | transloco
@@ -37,7 +37,9 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field appearance="fill" *ngIf="loginAttribute === 'email'">
+          <mat-form-field
+            appearance="outline"
+            *ngIf="loginAttribute === 'email'">
             <mat-label>
               {{ 'userManagement.controls.email.label' | transloco }}</mat-label
             >
@@ -59,7 +61,7 @@
           </mat-form-field>
 
           <mat-form-field
-            appearance="fill"
+            appearance="outline"
             *ngIf="loginAttribute === 'username'">
             <mat-label>{{
               'userManagement.controls.username.altLabel' | transloco
@@ -72,7 +74,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field appearance="fill">
+          <mat-form-field appearance="outline">
             <mat-label>{{
               'userManagement.controls.password.label' | transloco
             }}</mat-label>
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html
index f3cf8f76..5019b45b 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.html
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html
@@ -59,6 +59,29 @@
       [opened]="(isSmallScreen | async) === false"
       class="sidenav"
       [mode]="(isSmallScreen | async) ? 'over' : 'side'">
+      <ng-container *ngIf="(isLoggedIn$ | async) === false">
+        <div class="login-side-container">
+          <div class="image-wrapper">
+            <img src="assets/img/Server-Stack.gif" alt="Self Hosted" />
+            <h3>Self Hosted</h3>
+          </div>
+          <div class="image-wrapper">
+            <img src="assets/img/API.gif" alt="API Generation" />
+            <h3>
+              Database & Network<br />
+              API Generation
+            </h3>
+          </div>
+          <div class="image-wrapper">
+            <img src="assets/img/Browser.gif" alt="Api Security" />
+            <h3>API Security</h3>
+          </div>
+          <div class="image-wrapper">
+            <img src="assets/img/Tools.gif" alt="API Scripting" />
+            <h3>API Scripting</h3>
+          </div>
+        </div>
+      </ng-container>
       <mat-nav-list *ngIf="isLoggedIn$ | async">
         <button class="search-btn" mat-button (click)="handleSearchClick()">
           {{ 'Search Features' | transloco }}
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
index be4f7a64..417fabb2 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.scss
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
@@ -48,6 +48,33 @@ $red-palette: mat.define-palette(mat.$red-palette);
     min-width: 40%;
     border: none;
     transition: min-width 0.3s ease-out;
+    max-width: 450px;
+
+    .login-side-container {
+      display: flex;
+      justify-content: center;
+      align-items: center; // Vertically centers the content
+      flex-wrap: wrap;
+      text-align: center;
+      height: 40%;
+      gap: 8px;
+      width: 100%;
+      margin-top: 15%;
+      .image-wrapper {
+        width: calc(45% - 8px); // 2 columns, so each takes up 50% of the width
+        padding: 10px; // Optional, for spacing
+
+        img {
+          width: 80%; // Makes the image responsive within its wrapper
+          height: auto;
+        }
+
+        h3 {
+          color: #fff;
+        }
+      }
+    }
+
     .small & {
       min-width: 0;
     }
diff --git a/src/assets/img/API.gif b/src/assets/img/API.gif
new file mode 100644
index 00000000..0187ae77
Binary files /dev/null and b/src/assets/img/API.gif differ
diff --git a/src/assets/img/Browser.gif b/src/assets/img/Browser.gif
new file mode 100644
index 00000000..658952db
Binary files /dev/null and b/src/assets/img/Browser.gif differ
diff --git a/src/assets/img/Server-Stack.gif b/src/assets/img/Server-Stack.gif
new file mode 100644
index 00000000..da0c8cc3
Binary files /dev/null and b/src/assets/img/Server-Stack.gif differ
diff --git a/src/assets/img/Tools.gif b/src/assets/img/Tools.gif
new file mode 100644
index 00000000..4771e112
Binary files /dev/null and b/src/assets/img/Tools.gif differ