diff --git a/angular.json b/angular.json
index f6402d1ae4765976cd93890a26f5e961e7da336e..444e8de3f015bdde564cd62958d83eae67cee5a5 100644
--- a/angular.json
+++ b/angular.json
@@ -27,7 +27,8 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/web.config"
             ],
             "styles": [
               "src/styles.scss"
@@ -44,8 +45,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "50kb",
+                  "maximumError": "50kb"
                 }
               ],
               "outputHashing": "all"
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 33538e008571424d4ac267aac494422ec2482040..50623c9b167f4cc612ba802cc0271eb6ed0271cc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { CommonModule } from '@angular/common';
+import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -41,7 +41,9 @@ import { UserComponent } from './components/user/user.component';
     MatSnackBarModule,
     BrowserAnimationsModule,
   ],
-  providers: [],
+  providers: [
+    {provide: LocationStrategy, useClass: HashLocationStrategy}
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/components/products/products.component.html b/src/app/components/products/products.component.html
index 75015c6c6f58cec9ecd41a69902591211b7007bd..690c245b1724d0c751098af60f978f5bd9d38f96 100644
--- a/src/app/components/products/products.component.html
+++ b/src/app/components/products/products.component.html
@@ -1,6 +1,9 @@
 <ng-container *ngIf="!productsList.length; else showProducts">
-  <p>No products available yet. <br />Please come back later</p>
+  <div class="center-content">
+    <p>No products available yet. <br/>The backend is loading... Please be patient, this may take a moment.</p>
+  </div>  
 </ng-container>
+
 <ng-template #showProducts>
   <section>
     <div class="row">
diff --git a/src/app/components/products/products.component.scss b/src/app/components/products/products.component.scss
index 822b4719ea7a82dbd85d2c44cffdc82faddba36f..9e537c0e3ffc01d8b5113b8bd3a5e55fd0e12eb5 100644
--- a/src/app/components/products/products.component.scss
+++ b/src/app/components/products/products.component.scss
@@ -2,6 +2,14 @@
 
 $transition-time: 2.3s;
 
+.center-content {
+    text-align: center;
+    padding: 20px;
+    background-color: #fff;
+    margin-top: 200px;
+    margin-bottom: 400px;
+  }
+  
 section{
     margin: 25px;
 }
diff --git a/src/web.config b/src/web.config
new file mode 100644
index 0000000000000000000000000000000000000000..9fcc323449d434c284d53e6d42e639bc4f023553
--- /dev/null
+++ b/src/web.config
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+  <system.webServer>
+    <rewrite>
+      <rules>
+        <rule name="angular cli routes" stopProcessing="true">
+          <match url=".*" />
+          <conditions logicalGrouping="MatchAll">
+            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+          </conditions>
+          <action type="Rewrite" url="/" />
+        </rule>
+      </rules>
+    </rewrite>
+  </system.webServer>
+</configuration>
\ No newline at end of file