diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3400761e..d97463a8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,12 +4,15 @@
 </div>
 <splash-screen></splash-screen>
 <div class="header">
-  <div class="logo">
-    <img src="../assets/soda-foundation-logo-white.svg">
-  </div>
-  <div class="release">
-    Latest Release - {{siteDetails.release}}
-  </div>
+  <mat-toolbar color="primary">
+    <mat-toolbar-row>
+      <div class="logo">
+        <img src="../assets/soda-foundation-logo-white.svg">
+      </div>
+      <span class="example-spacer"></span>
+      Latest Release - {{siteDetails.release}}
+    </mat-toolbar-row>
+  </mat-toolbar>
 </div>
 <div class="main-container">
   <router-outlet></router-outlet>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index c038afb3..70f11ebf 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -10,31 +10,18 @@ $border-bottom-color_1: #1c87c9;
 		transform: translate3d(-50%, -50%, 0) rotate(360deg);
 	}
 }
-.header {
-	width: 100%;
-	height: 40px;
-	background: #1c87c9;
-	padding: 12px;
-	margin-bottom: 12px;
-}
-.logo {
-	padding-left: 12px;
-	float: left;
-}
-.release {
-	float: right;
-	color: $color_1;
-	padding-right: 24px;
-}
-.main-container {
-	padding: 12px;
+
+.example-spacer {
+	flex: 1 1 auto;
 }
+
 .footer {
-	float: left;
+	position: fixed;
+	bottom: 0;
+	left: 0;
 	width: 100%;
 	height: 20px;
-	background: #1c87c9;
-	margin-top: 12px;
+	background: #3f51b5;
 	padding: 8px;
 	color: $color_1;
 	text-align: center;
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 37496f90..c5688a53 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,7 +14,9 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { ProjectDetailsComponent } from './project-details/project-details.component';
-
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
 
 @NgModule({
   declarations: [
@@ -31,7 +33,10 @@ import { ProjectDetailsComponent } from './project-details/project-details.compo
     HttpClientModule,
     MatGridListModule,
     MatCardModule,
-    MatButtonModule
+    MatButtonModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatListModule
   ],
   providers: [
     { 
diff --git a/src/app/project-details/project-details.component.html b/src/app/project-details/project-details.component.html
index cc13d821..605d9468 100644
--- a/src/app/project-details/project-details.component.html
+++ b/src/app/project-details/project-details.component.html
@@ -1 +1,24 @@
-<p>project-details works!</p>
+<div class="project-details-container">
+    <div class="details-top">
+        <span class="p-name">{{projectDetails.name}}</span>
+        <button mat-raised-button color="primary" (click)="returnBack()" class="right">
+            <mat-icon>arrow_back</mat-icon>
+        </button>
+    </div>
+    <div class="details-container">
+        <div class="project-details-list">
+            <p>Use Cases</p>
+            <mat-list role="list">
+                <mat-list-item role="listitem" *ngFor="let useCase of projectDetails.useCases">
+                    {{useCase}}
+                </mat-list-item>
+            </mat-list>
+            <p>Features</p>
+            <mat-list role="list">
+                <mat-list-item role="listitem" *ngFor="let feature of projectDetails.features">
+                    {{feature}}
+                </mat-list-item>
+            </mat-list>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/project-details/project-details.component.scss b/src/app/project-details/project-details.component.scss
index e69de29b..1b230616 100644
--- a/src/app/project-details/project-details.component.scss
+++ b/src/app/project-details/project-details.component.scss
@@ -0,0 +1,13 @@
+.project-details-container{
+    padding: 12px;
+    .p-name{
+        font-weight: bold;
+        font-size: 18px;
+    }
+    .right{
+        float: right;
+    }
+    .details-container{
+        clear: both;
+    }
+}
\ No newline at end of file
diff --git a/src/app/project-details/project-details.component.ts b/src/app/project-details/project-details.component.ts
index d5086873..15ca20a0 100644
--- a/src/app/project-details/project-details.component.ts
+++ b/src/app/project-details/project-details.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpService } from '../services/http.service';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-project-details',
@@ -7,9 +10,29 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProjectDetailsComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private api: HttpService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+  
+  projectName: any;
+  projectDetails: any;
 
   ngOnInit(): void {
+    this.projectName = this.route.snapshot.paramMap.get('projectName')?.toLowerCase();
+    this.getProjectDetails();
+  }
+
+  getProjectDetails(){
+    this.api.getProjectDetails(this.projectName).subscribe(resp => {
+      console.log(resp);
+      this.projectDetails = resp;
+    });
+  }
+
+  returnBack(){
+    this.router.navigateByUrl('projects');
   }
 
 }
diff --git a/src/app/project-intro/project-intro.component.html b/src/app/project-intro/project-intro.component.html
index 249b0f67..12869112 100644
--- a/src/app/project-intro/project-intro.component.html
+++ b/src/app/project-intro/project-intro.component.html
@@ -1,36 +1,24 @@
-<mat-card class="project-list" *ngFor="let project of projects; let index=index; let odd=odd; let even=even;" [ngClass]="{ odd: odd, even: even }">
-    <mat-card-header>
-      <mat-card-title>
-        <img width="100%" src="{{project.logo}}">
-      </mat-card-title>
-      <mat-card-subtitle></mat-card-subtitle>
-    </mat-card-header>
-    <mat-card-content>
-        <div class="inline-text">
-            {{project.shortDescription}}
-        </div>
-        <div class="inline-text">
-            {{project.description}}
-        </div>
-        <div class="inline-text">
-            <p><b>Use Cases</b></p>
-            <ul>
-                <li *ngFor="let useCase of project.useCases">
-                    {{useCase}}
-                </li>
-            </ul>
-        </div>
-        <div class="inline-text">
-            <p><b>Features</b></p>
-            <ul>
-                <li *ngFor="let feature of project.features">
-                    {{feature}}
-                </li>
-            </ul>
-        </div>
-    </mat-card-content>
-    <mat-card-actions>
-        <button style="float:right;" mat-raised-button color="primary" (click)="navigateTo(project.name)">Architecture and Demo</button>
-        <button style="float:right;" mat-raised-button color="primary">Install {{project.name}}</button>
-    </mat-card-actions>
-</mat-card>
\ No newline at end of file
+<mat-grid-list cols="2" rowHeight="3:1">
+    <mat-grid-tile *ngFor="let project of projects;">
+        <mat-card class="project-list">
+            <mat-card-header>
+              <mat-card-title>
+                <img width="100%" src="{{project.logo}}">
+              </mat-card-title>
+              <mat-card-subtitle></mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
+                <div class="inline-text">
+                    {{project.shortDescription}}
+                </div>
+                <div class="inline-text">
+                    {{project.description}}
+                </div>
+            </mat-card-content>
+            <mat-card-actions>
+                <button style="float:right;" mat-raised-button color="primary" (click)="navigateTo(project.name)">Architecture and Demo</button>
+                <button style="float:right;" mat-raised-button color="primary">Install {{project.name}}</button>
+            </mat-card-actions>
+        </mat-card>
+    </mat-grid-tile>
+</mat-grid-list>
diff --git a/src/app/project-intro/project-intro.component.scss b/src/app/project-intro/project-intro.component.scss
index 6207d2f8..e69de29b 100644
--- a/src/app/project-intro/project-intro.component.scss
+++ b/src/app/project-intro/project-intro.component.scss
@@ -1,24 +0,0 @@
-.project-list{
-    width: 100%;
-    padding: 12px;
-    float:left
-}
-.even{
-    float: left;
-    width: 47%;
-    clear: both;
-    margin-bottom: 30px;
-}
-.odd{
-    float: right;
-    width: 47%;
-    margin-bottom: 30px;
-}
-.inline-text{
-    padding: 12px;
-    font-size: 18px;
-}
-.project-list ul li {
-    list-style: none;
-    padding: 12px 0 0 12px;
-}
\ No newline at end of file
diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts
index f762e4ad..c95c20fc 100644
--- a/src/app/services/http.service.ts
+++ b/src/app/services/http.service.ts
@@ -18,4 +18,8 @@ export class HttpService {
     return this.http.get('assets/siteBasics.json');
   }
 
+  getProjectDetails(projectName: any){
+    return this.http.get('assets/'+projectName+'/'+projectName+'Details.json');
+  }
+
 }
diff --git a/src/app/services/loading.service.spec.ts b/src/app/services/loading.service.spec.ts
index e48e940c..674e801b 100644
--- a/src/app/services/loading.service.spec.ts
+++ b/src/app/services/loading.service.spec.ts
@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { LoaderInterceptorService } from './loading.service';
+import { LoadingService } from './loading.service';
 
 describe('LoaderInterceptorService', () => {
-  let service: LoaderInterceptorService;
+  let service: LoadingService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(LoaderInterceptorService);
+    service = TestBed.inject(LoadingService);
   });
 
   it('should be created', () => {
diff --git a/src/app/splash-screen/splash-screen.component.html b/src/app/splash-screen/splash-screen.component.html
index 08b84bf6..51c05ae8 100644
--- a/src/app/splash-screen/splash-screen.component.html
+++ b/src/app/splash-screen/splash-screen.component.html
@@ -5,8 +5,13 @@
 >
 <div class="app-splash-inner">
   <div class="app-logo"></div>
+  <div class="">
+    <mat-spinner></mat-spinner>
+  </div>
   <div class="app-label">
     <p class="animate-charcter">Loading The SODA Experience</p>
   </div>
-  <div class="app-loader"></div>
+  <div class="app-loader">
+    
+  </div>
 </div>
diff --git a/src/app/splash-screen/splash-screen.component.scss b/src/app/splash-screen/splash-screen.component.scss
index 9ee49602..e5e59545 100644
--- a/src/app/splash-screen/splash-screen.component.scss
+++ b/src/app/splash-screen/splash-screen.component.scss
@@ -1,5 +1,5 @@
 .app-splash-screen {
-  background: #557cc3;
+  background: #212327;
   position: fixed;
   top: 0;
   left: 0;
@@ -29,48 +29,11 @@
 }
 
 .app-logo {
-  /*background: url("./../../assets/lighty.svg");*/
+  background: url("../../assets/soda-foundation-logo-white.svg");
   background-repeat: no-repeat;
   max-width: 100%;
   background-position: center;
   background-size: contain;
-  width: 100px;
-  height: 100px;
+  width: 600px;
+  height: 400px;
 }
-
-.app-loader {
-  /*background: url("./../../assets/three-dots.svg");*/
-  background-repeat: no-repeat;
-  max-width: 100%;
-  background-position: center;
-  background-size: contain;
-  width: 80px;
-  height: 80px;
-  margin-top: 80px;
-}
-
-.animate-charcter
-{
-  background-image: linear-gradient(
-    -225deg,
-    #231557 0%,
-    #44107a 29%,
-    #ff1361 67%,
-    #fff800 100%
-  );
-  background-size: auto auto;
-  background-clip: border-box;
-  background-size: 200% auto;
-  color: #fff;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: textclip 2s linear infinite;
-  display: inline-block;
-}
-
-@keyframes textclip {
-  to {
-    background-position: 200% center;
-  }
-}
\ No newline at end of file
diff --git a/src/assets/delfin/delfinDetails.json b/src/assets/delfin/delfinDetails.json
index 3b0578f0..dcdda378 100644
--- a/src/assets/delfin/delfinDetails.json
+++ b/src/assets/delfin/delfinDetails.json
@@ -1,7 +1,17 @@
 {
     "name": "Delfin",
     "slackLink": "",
-
+    "useCases": [
+        "Performance-Monitoring : Monitor storage metrics such as IOP's, r/w throughput, latencies",
+        "Predictive-Analytics : Identify anomalies, forecast resource usage, and fix problems using storage automation capabilities",
+        "Automated-Remediation : Speed up the process of problem solving with alerts"
+    ],
+    "features": [
+        "Support performance monitoring and alerting across heterogeneous storage with CM and Host Mapping",
+        "Unified, intelligent and scalable resource management",
+        "Exporter framework to add custom clients from data processing and visualization. Prometheus supported out of the box",
+        "Support monitoring for EMC, IBM, NetApp, PureStorage, Huawei, etc"
+    ],
     "architectureImages": [
         {
             "imgUrl": "assets/delfin/arch1.jpeg",
diff --git a/src/assets/kahu/kahuDetails.json b/src/assets/kahu/kahuDetails.json
new file mode 100644
index 00000000..89c7156e
--- /dev/null
+++ b/src/assets/kahu/kahuDetails.json
@@ -0,0 +1,29 @@
+{
+    "name": "KAHU",
+    "slackLink": "",
+    "useCases": [
+        "Data Migration: enable cluster portability by easily migrating K8s resources from one cluster to another on-prem and across clouds",
+        "Data Protection: schedule backups, retention schedules, etc.",
+        "Disaster Recovery: reduce time to recovery in case of catastrophic failures"
+    ],
+    "features":[
+        "Snapshot CSI PVC’s",
+        "Backup to any storage (EMC, NetApp, IBM, Huawei, etc.)",
+        "Backup to any cloud storage (AWS S3, Azure Blob, GCP Object Store)",
+        "Multi Cluster",
+        "Global Controller and Meta Data Management"
+    ],
+    "architectureImages": [
+        {
+            "imgUrl": "assets/kahu/arch1.jpeg",
+            "description": "Some description about the above image"
+        }
+    ],
+    "demo": [
+        {
+            "demoUrl": "assets/kahu/demo.avi",
+            "description": "Some description about the above video"
+        }
+    ]
+
+}
\ No newline at end of file
diff --git a/src/assets/projectList.json b/src/assets/projectList.json
index 69f4130e..4f5d2935 100644
--- a/src/assets/projectList.json
+++ b/src/assets/projectList.json
@@ -3,69 +3,24 @@
         "name": "DELFIN",
         "logo": "assets/delfin/delfin-title.svg",
         "shortDescription": "Delfin: Heterogeneous Storage Monitoring",
-        "description": "Delfin is an open source storage monitoring and alerting toolkit.",
-        "useCases": [
-            "Performance-Monitoring : Monitor storage metrics such as IOP's, r/w throughput, latencies",
-            "Predictive-Analytics : Identify anomalies, forecast resource usage, and fix problems using storage automation capabilities",
-            "Automated-Remediation : Speed up the process of problem solving with alerts"
-        ],
-        "features": [
-            "Support performance monitoring and alerting across heterogeneous storage with CM and Host Mapping",
-            "Unified, intelligent and scalable resource management",
-            "Exporter framework to add custom clients from data processing and visualization. Prometheus supported out of the box",
-            "Support monitoring for EMC, IBM, NetApp, PureStorage, Huawei, etc"
-        ]
+        "description": "Delfin is an open source storage monitoring and alerting toolkit."
     },
     {
         "name": "STRATO",
         "logo": "assets/strato/strato-title.svg",
         "shortDescription": "Strato - Multicloud Data Management",
-        "description": "Strato is an open source tool to control data in multicloud IT environments.",
-        "useCases": [
-            "Cloud Backup: replicate snapshots to multiple clouds for high availability backup",
-            "Cloud Switching: easily move data from one cloud to another",
-            "Multicloud Content Distribution: distribute content from data center across different clouds"
-        ],
-        "features":[
-            "Provides a cloud vendor agnostic data management for hybrid cloud, intercloud, or intracloud.",
-            "Unified interface for file and object services across multiple cloud vendors.",
-            "S3 compatible APIs for object data management on cloud or on premise",
-            "Deploy on-premise or in the cloud"
-        ]
+        "description": "Strato is an open source tool to control data in multicloud IT environments."        
     },
     {
         "name": "KAHU",
         "logo": "assets/kahu/kahu-title.svg",
         "shortDescription": "Kahu: Container Data Protection",
-        "description": "Kahu is a cloud native tool to backup and restore, perform disaster recovery, and migrate Kubernetes cluster resources and persistent volumes.",
-        "useCases": [
-            "Data Migration: enable cluster portability by easily migrating K8s resources from one cluster to another on-prem and across clouds",
-            "Data Protection: schedule backups, retention schedules, etc.",
-            "Disaster Recovery: reduce time to recovery in case of catastrophic failures"
-        ],
-        "features":[
-            "Snapshot CSI PVC’s",
-            "Backup to any storage (EMC, NetApp, IBM, Huawei, etc.)",
-            "Backup to any cloud storage (AWS S3, Azure Blob, GCP Object Store)",
-            "Multi Cluster",
-            "Global Controller and Meta Data Management"
-        ]
+        "description": "Kahu is a cloud native tool to backup and restore, perform disaster recovery, and migrate Kubernetes cluster resources and persistent volumes."
     },
     {
         "name": "TERRA",
         "logo": "assets/terra/terra-title.svg",
         "shortDescription": "Terra - SDS Controller",
-        "description": "Terra is an open source storage management and automation project.",
-        "useCases": [
-            "Storage Provisioning: automate block and file storage provisioning",
-            "Data Protection: schedule snapshots and backups",
-            "Storage-as-a-Service (STaaS): self-service catalog empowers users and reduces OPEX"
-
-        ],
-        "features":[
-            "Standardized API, Controller for metadata and Dock for Drivers to provide seamless data management across various storage vendors",
-            "Supports to connect different platforms like Kubernetes, Open Stack, VMware through plugins",
-            "Supports custom vendors drivers and CSI plugins for heterogeneous storages"
-        ]
+        "description": "Terra is an open source storage management and automation project."
     }
 ]
diff --git a/src/assets/strato/stratoDetails.json b/src/assets/strato/stratoDetails.json
new file mode 100644
index 00000000..f0af7b78
--- /dev/null
+++ b/src/assets/strato/stratoDetails.json
@@ -0,0 +1,28 @@
+{
+    "name": "STRATO",
+    "slackLink": "",
+    "useCases": [
+        "Cloud Backup: replicate snapshots to multiple clouds for high availability backup",
+        "Cloud Switching: easily move data from one cloud to another",
+        "Multicloud Content Distribution: distribute content from data center across different clouds"
+    ],
+    "features":[
+        "Provides a cloud vendor agnostic data management for hybrid cloud, intercloud, or intracloud.",
+        "Unified interface for file and object services across multiple cloud vendors.",
+        "S3 compatible APIs for object data management on cloud or on premise",
+        "Deploy on-premise or in the cloud"
+    ],
+    "architectureImages": [
+        {
+            "imgUrl": "assets/strato/arch1.jpeg",
+            "description": "Some description about the above image"
+        }
+    ],
+    "demo": [
+        {
+            "demoUrl": "assets/strato/demo.avi",
+            "description": "Some description about the above video"
+        }
+    ]
+
+}
\ No newline at end of file
diff --git a/src/assets/terra/terraDetails.json b/src/assets/terra/terraDetails.json
new file mode 100644
index 00000000..43441682
--- /dev/null
+++ b/src/assets/terra/terraDetails.json
@@ -0,0 +1,28 @@
+{
+    "name": "TERRA",
+    "slackLink": "",
+    "useCases": [
+        "Storage Provisioning: automate block and file storage provisioning",
+        "Data Protection: schedule snapshots and backups",
+        "Storage-as-a-Service (STaaS): self-service catalog empowers users and reduces OPEX"
+
+    ],
+    "features":[
+        "Standardized API, Controller for metadata and Dock for Drivers to provide seamless data management across various storage vendors",
+        "Supports to connect different platforms like Kubernetes, Open Stack, VMware through plugins",
+        "Supports custom vendors drivers and CSI plugins for heterogeneous storages"
+    ],
+    "architectureImages": [
+        {
+            "imgUrl": "assets/terra/arch1.jpeg",
+            "description": "Some description about the above image"
+        }
+    ],
+    "demo": [
+        {
+            "demoUrl": "assets/terra/demo.avi",
+            "description": "Some description about the above video"
+        }
+    ]
+
+}
\ No newline at end of file