diff --git a/backend/main.py b/backend/main.py
index bc2e666..95dbbed 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -37,20 +37,19 @@ async def validate_file(file: UploadFile):
     """
     Validate the uploaded Excel file format
     """
-    try:
-        if not file.filename or not file.filename.endswith(('.xls', '.xlsx')):
-            return FormValidation(
-                valid=False, 
-                message="Invalid file format. Only .xls/.xlsx files are allowed.",
-                sheets=[],
-                form_metadata={},
-                questions_count=0,
-                options_count=0
-            )
+    if not file.filename or not file.filename.endswith(('.xls', '.xlsx')):
+        return FormValidation(
+            valid=False, 
+            message="Invalid file format. Only .xls/.xlsx files are allowed.",
+            sheets=[],
+            form_metadata={},
+            questions_count=0,
+            options_count=0
+        )
 
+    try:
         parser = XLSFormParser()
         validation_result = await parser.validate_file(file)
-
         return FormValidation(**validation_result)
     except Exception as e:
         logger.error(f"Error validating file: {str(e)}")
@@ -90,10 +89,10 @@ async def get_form_by_id(form_id: str):
         form = await db_service.get_form_by_id(form_id)
         if not form:
             raise HTTPException(status_code=404, detail="Form not found")
-        
+
         questions = await db_service.get_questions_by_form_id(form_id)
         options = await db_service.get_options_by_form_id(form_id)
-        
+
         return {
             "form": form,
             "questions": questions,
@@ -116,7 +115,7 @@ async def delete_form(form_id: str):
         success = await db_service.delete_form(form_id)
         if not success:
             raise HTTPException(status_code=404, detail="Form not found")
-        
+
         return {"message": "Form deleted successfully"}
     except HTTPException:
         raise
diff --git a/backend/services/database_service.py b/backend/services/database_service.py
index c63b785..d9659ea 100644
--- a/backend/services/database_service.py
+++ b/backend/services/database_service.py
@@ -6,22 +6,22 @@ import logging
 logger = logging.getLogger(__name__)
 
 class DatabaseService:
-    
+
     async def save_form(self, form_data: Dict[str, Any]) -> str:
         """Save form metadata to database"""
         try:
             if 'id' in form_data:
                 del form_data['id']
-            
+
             form_data['_id'] = ObjectId()
-            
+
             result = await forms_collection.insert_one(form_data)
             logger.info(f"Form saved with ID: {result.inserted_id}")
             return str(result.inserted_id)
         except Exception as e:
             logger.error(f"Error saving form: {e}")
             raise e
-    
+
     async def save_questions(self, questions: List[Dict[str, Any]], form_id: str) -> List[str]:
         """Save questions to database"""
         try:
@@ -29,16 +29,16 @@ class DatabaseService:
             for question in questions:
                 question['form_id'] = form_id
                 question['_id'] = ObjectId()
-                
+
                 result = await questions_collection.insert_one(question)
                 question_ids.append(str(result.inserted_id))
-            
+
             logger.info(f"Saved {len(questions)} questions for form {form_id}")
             return question_ids
         except Exception as e:
             logger.error(f"Error saving questions: {e}")
             raise e
-    
+
     async def save_options(self, options: List[Dict[str, Any]], form_id: str) -> List[str]:
         """Save answer options to database"""
         try:
@@ -46,16 +46,16 @@ class DatabaseService:
             for option in options:
                 option['form_id'] = form_id
                 option['_id'] = ObjectId()
-                
+
                 result = await options_collection.insert_one(option)
                 option_ids.append(str(result.inserted_id))
-            
+
             logger.info(f"Saved {len(options)} options for form {form_id}")
             return option_ids
         except Exception as e:
             logger.error(f"Error saving options: {e}")
             raise e
-    
+
     async def get_form_by_id(self, form_id: str) -> Optional[Dict[str, Any]]:
         """Get form by ID"""
         try:
@@ -67,7 +67,7 @@ class DatabaseService:
         except Exception as e:
             logger.error(f"Error getting form: {e}")
             return None
-    
+
     async def get_questions_by_form_id(self, form_id: str) -> List[Dict[str, Any]]:
         """Get all questions for a form"""
         try:
@@ -79,7 +79,7 @@ class DatabaseService:
         except Exception as e:
             logger.error(f"Error getting questions: {e}")
             return []
-    
+
     async def get_options_by_form_id(self, form_id: str) -> List[Dict[str, Any]]:
         """Get all options for a form"""
         try:
@@ -91,7 +91,7 @@ class DatabaseService:
         except Exception as e:
             logger.error(f"Error getting options: {e}")
             return []
-    
+
     async def get_all_forms(self) -> List[Dict[str, Any]]:
         """Get all forms"""
         try:
@@ -103,16 +103,16 @@ class DatabaseService:
         except Exception as e:
             logger.error(f"Error getting all forms: {e}")
             return []
-    
+
     async def delete_form(self, form_id: str) -> bool:
         """Delete form and all related data"""
         try:
             form_result = await forms_collection.delete_one({"_id": ObjectId(form_id)})
-            
+
             questions_result = await questions_collection.delete_many({"form_id": form_id})
-            
+
             options_result = await options_collection.delete_many({"form_id": form_id})
-            
+
             logger.info(f"Deleted form {form_id} with {questions_result.deleted_count} questions and {options_result.deleted_count} options")
             return form_result.deleted_count > 0
         except Exception as e:
diff --git a/backend/services/xlsform_parser.py b/backend/services/xlsform_parser.py
index 766d898..72fbd6d 100644
--- a/backend/services/xlsform_parser.py
+++ b/backend/services/xlsform_parser.py
@@ -20,17 +20,17 @@ class XLSFormParser:
     async def validate_file(self, file: UploadFile) -> Dict[str, Any]:
         try:
             df_dict = pd.read_excel(file.file, sheet_name=None)
-            
+
             sheets_validation = []
             form_metadata = {}
             questions_count = 0
             options_count = 0
-            
+
             forms_validation = self._validate_sheet(
                 df_dict, 'Forms', self.REQUIRED_FORMS_COLUMNS
             )
             sheets_validation.append(forms_validation)
-            
+
             if forms_validation['exists'] and not forms_validation['missing_columns']:
                 forms_df = df_dict['Forms']
                 if not forms_df.empty:
@@ -38,27 +38,27 @@ class XLSFormParser:
                         'language': forms_df.iloc[0].get('Language', 'Unknown'),
                         'title': forms_df.iloc[0].get('Title', 'Untitled')
                     }
-            
+
             questions_validation = self._validate_sheet(
                 df_dict, 'Questions Info', self.REQUIRED_QUESTIONS_COLUMNS
             )
             sheets_validation.append(questions_validation)
-            
+
             if questions_validation['exists'] and not questions_validation['missing_columns']:
                 questions_df = df_dict['Questions Info']
                 questions_count = len(questions_df)
-            
+
             options_validation = self._validate_sheet(
                 df_dict, 'Answer Options', self.REQUIRED_OPTIONS_COLUMNS
             )
             sheets_validation.append(options_validation)
-            
+
             if options_validation['exists'] and not options_validation['missing_columns']:
                 options_df = df_dict['Answer Options']
                 options_count = len(options_df)
-            
+
             is_valid = all(sheet['exists'] and not sheet['missing_columns'] for sheet in sheets_validation)
-            
+
             return {
                 'valid': is_valid,
                 'message': "File format is valid." if is_valid else "Invalid XLSForm structure.",
@@ -86,7 +86,7 @@ class XLSFormParser:
         columns = list(df_dict[sheet_name].columns) if exists else []
         missing_columns = [col for col in required_columns if col not in columns]
         row_count = len(df_dict[sheet_name]) if exists else 0
-        
+
         return {
             'name': sheet_name,
             'exists': exists,
@@ -105,12 +105,12 @@ class XLSFormParser:
             options_df = df_dict['Answer Options']
 
             form_metadata = self._parse_form_metadata(forms_df)
-            
+
             form_id = await self.db_service.save_form(form_metadata)
-            
+
             questions_data = self._parse_questions_data(questions_df)
             question_ids = await self.db_service.save_questions(questions_data, form_id)
-            
+
             options_data = self._parse_options_data(options_df)
             option_ids = await self.db_service.save_options(options_data, form_id)
 
@@ -146,19 +146,19 @@ class XLSFormParser:
             'version': '1.0.0',
             'created_at': pd.Timestamp.now().isoformat()
         }
-        
+
         if not forms_df.empty:
             if 'Language' in forms_df.columns:
                 metadata['language'] = forms_df.iloc[0]['Language']
             if 'Title' in forms_df.columns:
                 metadata['title'] = forms_df.iloc[0]['Title']
-        
+
         return metadata
 
     def _parse_questions_data(self, questions_df: pd.DataFrame) -> List[Dict[str, Any]]:
         """Parse questions data for database storage"""
         questions_data = []
-        
+
         for _, row in questions_df.iterrows():
             question_data = {
                 'order': int(row['Order']),
@@ -168,13 +168,13 @@ class XLSFormParser:
                 'created_at': pd.Timestamp.now().isoformat()
             }
             questions_data.append(question_data)
-        
+
         return questions_data
 
     def _parse_options_data(self, options_df: pd.DataFrame) -> List[Dict[str, Any]]:
         """Parse options data for database storage"""
         options_data = []
-        
+
         for _, row in options_df.iterrows():
             option_data = {
                 'order': int(row['Order']),
@@ -183,7 +183,7 @@ class XLSFormParser:
                 'created_at': pd.Timestamp.now().isoformat()
             }
             options_data.append(option_data)
-        
+
         return options_data
 
     def _get_form_title(self, forms_df: pd.DataFrame) -> Dict[str, str]:
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cdd8438..9ed162d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -32,7 +32,7 @@
         "@angular/cli": "^19.2.9",
         "@angular/compiler-cli": "^19.2.0",
         "@types/express": "^4.17.21",
-        "@types/node": "^18.19.100",
+        "@types/node": "^24.0.3",
         "typescript": "~5.7.2"
       }
     },
@@ -4979,13 +4979,13 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "18.19.100",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.100.tgz",
-      "integrity": "sha512-ojmMP8SZBKprc3qGrGk8Ujpo80AXkrP7G2tOT4VWr5jlr5DHjsJF+emXJz+Wm0glmy4Js62oKMdZZ6B9Y+tEcA==",
+      "version": "24.0.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.3.tgz",
+      "integrity": "sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~5.26.4"
+        "undici-types": "~7.8.0"
       }
     },
     "node_modules/@types/node-forge": {
@@ -12106,9 +12106,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
+      "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/frontend/package.json b/frontend/package.json
index b1f75a1..2b9769c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "serve:ssr:mform-upload": "node dist/mform-upload/server/server.mjs"
+    "serve:ssr:mform-upload": "node --no-deprecation dist/mform-upload/server/server.mjs"
   },
   "private": true,
   "dependencies": {
@@ -34,7 +34,7 @@
     "@angular/cli": "^19.2.9",
     "@angular/compiler-cli": "^19.2.0",
     "@types/express": "^4.17.21",
-    "@types/node": "^18.19.100",
+    "@types/node": "^24.0.3",
     "typescript": "~5.7.2"
   }
 }
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 62e552c..292fdb8 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -6,8 +6,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { NavbarComponent } from './components/navbar/navbar.component';
 import { SearchComponent } from './components/search/search.component';
 import { UploadComponent } from './components/upload/upload.component';
-import { DownloadComponent } from './components/download/download.component';
-import { FileUploadComponent } from './components/file-upload/file-upload.component';
 
 @Component({
   selector: 'app-root',
@@ -19,9 +17,7 @@ import { FileUploadComponent } from './components/file-upload/file-upload.compon
     MatToolbarModule,
     NavbarComponent,
     SearchComponent,
-    UploadComponent,
-    DownloadComponent,
-    FileUploadComponent
+    UploadComponent
   ],
   template: `
     <div class="app-container">
@@ -30,9 +26,7 @@ import { FileUploadComponent } from './components/file-upload/file-upload.compon
         <app-search></app-search>
         <div class="content-grid">
           <app-upload></app-upload>
-          <app-download></app-download>
         </div>
-        <app-file-upload></app-file-upload>
         <router-outlet></router-outlet>
       </main>
     </div>
@@ -44,16 +38,16 @@ import { FileUploadComponent } from './components/file-upload/file-upload.compon
       flex-direction: column;
       background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     }
-    
+
     .main-content {
       flex: 1;
       padding: 2rem;
       overflow-y: auto;
     }
-    
+
     .content-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      grid-template-columns: 1fr;
       gap: 2rem;
       margin-top: 2rem;
     }
diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
index 700d2a5..362b090 100644
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -1,7 +1,7 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { routes } from './app.routes';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
@@ -12,6 +12,6 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes),
     provideClientHydration(withEventReplay()),
     provideAnimations(),
-    provideHttpClient()
+    provideHttpClient(withFetch())
   ]
 };
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
deleted file mode 100644
index 7dfb61b..0000000
--- a/frontend/src/app/app.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
-import { AppComponent } from './app.component';
-import { FileUploadComponent } from './components/file-upload/file-upload.component';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    FileUploadComponent
-  ],
-  imports: [
-    BrowserModule,
-    HttpClientModule,
-    CommonModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { } 
\ No newline at end of file
diff --git a/frontend/src/app/components/download/download.component.ts b/frontend/src/app/components/download/download.component.ts
deleted file mode 100644
index 5fc44b3..0000000
--- a/frontend/src/app/components/download/download.component.ts
+++ /dev/null
@@ -1,284 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatDividerModule } from '@angular/material/divider';
-import { FormService, FormData, FormDetails } from '../../services/form.service';
-
-@Component({
-  selector: 'app-download',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatCardModule,
-    MatButtonModule,
-    MatIconModule,
-    MatMenuModule,
-    MatDividerModule
-  ],
-  template: `
-    <mat-card class="download-card">
-      <mat-card-header>
-        <mat-icon mat-card-avatar>download</mat-icon>
-        <mat-card-title>Parsed Forms</mat-card-title>
-        <mat-card-subtitle>Download or preview parsed forms from database</mat-card-subtitle>
-      </mat-card-header>
-
-      <mat-card-content>
-        <div class="form-list" *ngIf="parsedForms.length > 0; else noForms">
-          <div *ngFor="let form of parsedForms" class="form-item">
-            <div class="form-info">
-              <mat-icon>description</mat-icon>
-              <div class="form-details">
-                <h3>{{form.title}}</h3>
-                <p>{{form.language}} • {{form.version}} • {{form.created_at | date:'short'}}</p>
-              </div>
-            </div>
-            
-            <div class="form-actions">
-              <button mat-icon-button [matMenuTriggerFor]="menu">
-                <mat-icon>more_vert</mat-icon>
-              </button>
-              <mat-menu #menu="matMenu">
-                <button mat-menu-item (click)="previewForm(form)">
-                  <mat-icon>preview</mat-icon>
-                  <span>Preview</span>
-                </button>
-                <button mat-menu-item (click)="downloadForm(form)">
-                  <mat-icon>download</mat-icon>
-                  <span>Download JSON</span>
-                </button>
-                <mat-divider></mat-divider>
-                <button mat-menu-item color="warn" (click)="deleteForm(form)">
-                  <mat-icon color="warn">delete</mat-icon>
-                  <span class="warn-text">Delete</span>
-                </button>
-              </mat-menu>
-            </div>
-          </div>
-        </div>
-
-        <ng-template #noForms>
-          <div class="no-forms">
-            <mat-icon>info</mat-icon>
-            <p>No forms have been parsed yet</p>
-            <button mat-stroked-button color="primary">
-              Upload an Excel file to get started
-            </button>
-          </div>
-        </ng-template>
-      </mat-card-content>
-
-      <mat-card-actions *ngIf="parsedForms.length > 0">
-        <button mat-button color="primary" (click)="downloadAllForms()">
-          <mat-icon>download_all</mat-icon>
-          Download All
-        </button>
-        <button mat-button color="warn" (click)="clearAllForms()">
-          <mat-icon>clear_all</mat-icon>
-          Clear All
-        </button>
-      </mat-card-actions>
-    </mat-card>
-  `,
-  styles: [`
-    .download-card {
-      background: rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(10px);
-      height: 100%;
-      min-height: 300px;
-      color: white;
-
-      ::ng-deep {
-        .mat-mdc-card-header {
-          padding: 1rem;
-        }
-
-        .mat-mdc-card-avatar {
-          background: rgba(255, 255, 255, 0.1);
-          border-radius: 50%;
-          padding: 8px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 40px;
-          height: 40px;
-
-          mat-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-        .mat-mdc-card-title {
-          color: white;
-        }
-
-        .mat-mdc-card-subtitle {
-          color: rgba(255, 255, 255, 0.7);
-        }
-      }
-    }
-
-    .form-list {
-      max-height: 400px;
-      overflow-y: auto;
-    }
-
-    .form-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 1rem;
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 8px;
-      margin-bottom: 0.5rem;
-      transition: all 0.3s ease;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.1);
-      }
-    }
-
-    .form-info {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-
-      mat-icon {
-        color: rgba(255, 255, 255, 0.7);
-      }
-    }
-
-    .form-details {
-      h3 {
-        margin: 0;
-        font-size: 1rem;
-        font-weight: 500;
-      }
-
-      p {
-        margin: 0;
-        font-size: 0.875rem;
-        color: rgba(255, 255, 255, 0.7);
-      }
-    }
-
-    .no-forms {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
-      text-align: center;
-      height: 100%;
-      min-height: 200px;
-
-      mat-icon {
-        font-size: 48px;
-        width: 48px;
-        height: 48px;
-        margin-bottom: 1rem;
-        color: rgba(255, 255, 255, 0.5);
-      }
-
-      p {
-        margin: 0 0 1rem;
-        color: rgba(255, 255, 255, 0.7);
-      }
-    }
-
-    .warn-text {
-      color: #f44336;
-    }
-
-    mat-card-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 1rem;
-      padding: 1rem;
-
-      button {
-        border: 2px solid;
-        border-radius: 8px;
-        padding: 8px 16px;
-        font-weight: 500;
-        transition: all 0.3s ease;
-
-        &[color="primary"] {
-          background-color: #3f51b5;
-          border-color: #3f51b5;
-          color: white;
-
-          &:hover {
-            background-color: #303f9f;
-            border-color: #303f9f;
-          }
-        }
-
-        &[color="warn"] {
-          background-color: #f44336;
-          border-color: #f44336;
-          color: white;
-
-          &:hover {
-            background-color: #d32f2f;
-            border-color: #d32f2f;
-          }
-        }
-
-        mat-icon {
-          margin-right: 8px;
-        }
-      }
-    }
-  `]
-})
-export class DownloadComponent implements OnInit {
-  parsedForms: FormData[] = [];
-
-  constructor(private formService: FormService) {}
-
-  ngOnInit(): void {
-    this.loadForms();
-  }
-
-  loadForms(): void {
-    this.formService.getAllForms().subscribe(response => {
-      this.parsedForms = response.forms;
-    });
-  }
-
-  previewForm(form: FormData) {
-    console.log('Preview form:', form);
-  }
-
-  downloadForm(form: FormData) {
-    console.log('Download form:', form);
-  }
-
-  deleteForm(form: FormData) {
-    this.formService.deleteForm(form.id).subscribe(() => {
-      this.parsedForms = this.parsedForms.filter(f => f.id !== form.id);
-    });
-  }
-
-  downloadAllForms() {
-    console.log('Download all forms');
-  }
-
-  clearAllForms() {
-    const deletePromises = this.parsedForms.map(form => 
-      this.formService.deleteForm(form.id).toPromise()
-    );
-    
-    Promise.all(deletePromises).then(() => {
-      this.parsedForms = [];
-    });
-  }
-} 
\ No newline at end of file
diff --git a/frontend/src/app/components/file-upload/file-upload.component.ts b/frontend/src/app/components/file-upload/file-upload.component.ts
deleted file mode 100644
index 825765b..0000000
--- a/frontend/src/app/components/file-upload/file-upload.component.ts
+++ /dev/null
@@ -1,364 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormService } from '../../services/form.service';
-import { FormValidation, ParsedForm } from '../../models/form.model';
-
-@Component({
-  selector: 'app-file-upload',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div class="file-upload-container">
-      <div class="upload-section">
-        <input type="file" (change)="onFileSelected($event)" accept=".xls,.xlsx" class="file-input">
-        <div class="button-group">
-          <button (click)="validateFile()" [disabled]="!selectedFile" class="action-button validate">Validate</button>
-          <button (click)="uploadFile()" [disabled]="!selectedFile" class="action-button upload">Upload</button>
-        </div>
-      </div>
-      
-      <div class="results-container">
-        <div *ngIf="validationResult" class="result-section">
-          <div class="validation-result" [class.valid]="validationResult.valid" [class.invalid]="!validationResult.valid">
-            <h3>Validation Result</h3>
-            <p class="status">Status: {{ validationResult.valid ? 'Valid' : 'Invalid' }}</p>
-            <p class="message">{{ validationResult.message }}</p>
-            
-            <div *ngIf="validationResult.form_metadata" class="metadata-section">
-              <h4>Form Metadata</h4>
-              <div class="metadata-grid">
-                <div class="metadata-item">
-                  <strong>Language:</strong> {{ validationResult.form_metadata['language'] }}
-                </div>
-                <div class="metadata-item">
-                  <strong>Title:</strong> {{ validationResult.form_metadata['title'] }}
-                </div>
-              </div>
-            </div>
-
-            <div class="stats-section">
-              <h4>File Statistics</h4>
-              <div class="stats-grid">
-                <div class="stat-item">
-                  <strong>Questions:</strong> {{ validationResult.questions_count || 0 }}
-                </div>
-                <div class="stat-item">
-                  <strong>Answer Options:</strong> {{ validationResult.options_count || 0 }}
-                </div>
-              </div>
-            </div>
-
-            <div *ngIf="validationResult.sheets && validationResult.sheets.length > 0" class="sheets-section">
-              <h4>Sheet Details</h4>
-              <div class="sheets-grid">
-                <div *ngFor="let sheet of validationResult.sheets" class="sheet-item" [class.valid]="sheet.exists && sheet.missing_columns.length === 0" [class.invalid]="!sheet.exists || sheet.missing_columns.length > 0">
-                  <div class="sheet-header">
-                    <h5>{{ sheet.name }}</h5>
-                    <span class="sheet-status">{{ sheet.exists && sheet.missing_columns.length === 0 ? '✓' : '✗' }}</span>
-                  </div>
-                  <div class="sheet-details">
-                    <p><strong>Exists:</strong> {{ sheet.exists ? 'Yes' : 'No' }}</p>
-                    <p><strong>Rows:</strong> {{ sheet.row_count }}</p>
-                    <p><strong>Columns:</strong> {{ sheet.columns.join(', ') }}</p>
-                    <div *ngIf="sheet.missing_columns.length > 0" class="missing-columns">
-                      <strong>Missing Columns:</strong>
-                      <ul>
-                        <li *ngFor="let col of sheet.missing_columns">{{ col }}</li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div *ngIf="parsedForm" class="result-section">
-          <div class="form-details">
-            <h3>Form Details</h3>
-            <p><strong>Title:</strong> {{ parsedForm.title.default }}</p>
-            <p><strong>Version:</strong> {{ parsedForm.version }}</p>
-            <p><strong>Number of Groups:</strong> {{ parsedForm.groups.length }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .file-upload-container {
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 8px;
-      padding: 2rem;
-      margin: 2rem 0;
-      color: white;
-      display: flex;
-      flex-direction: column;
-      gap: 2rem;
-    }
-
-    .upload-section {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      align-items: center;
-    }
-
-    .file-input {
-      padding: 1rem;
-      background: rgba(255, 255, 255, 0.05);
-      border: 2px solid rgba(255, 255, 255, 0.2);
-      border-radius: 8px;
-      width: 100%;
-      max-width: 400px;
-      color: white;
-      font-weight: 500;
-      transition: all 0.3s ease;
-      cursor: pointer;
-
-      &:hover {
-        border-color: rgba(255, 255, 255, 0.4);
-        background: rgba(255, 255, 255, 0.1);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: #3f51b5;
-        background: rgba(63, 81, 181, 0.1);
-      }
-
-      &::file-selector-button {
-        border: 2px solid #3f51b5;
-        border-radius: 6px;
-        padding: 6px 12px;
-        font-weight: 500;
-        transition: all 0.3s ease;
-        background-color: #3f51b5;
-        color: white;
-        cursor: pointer;
-        margin-right: 1rem;
-
-        &:hover {
-          background-color: #303f9f;
-          border-color: #303f9f;
-        }
-      }
-    }
-
-    .button-group {
-      display: flex;
-      gap: 1rem;
-    }
-
-    .action-button {
-      padding: 0.5rem 1rem;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-weight: 500;
-      transition: all 0.3s ease;
-    }
-
-    .action-button:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .validate {
-      background: #4CAF50;
-      color: white;
-    }
-
-    .upload {
-      background: #2196F3;
-      color: white;
-    }
-
-    .results-container {
-      display: flex;
-      flex-direction: column;
-      gap: 1.5rem;
-    }
-
-    .result-section {
-      width: 100%;
-    }
-
-    .validation-result, .form-details {
-      background: rgba(255, 255, 255, 0.05);
-      padding: 1.5rem;
-      border-radius: 4px;
-      width: 100%;
-    }
-
-    .validation-result.valid {
-      border-left: 4px solid #4CAF50;
-    }
-
-    .validation-result.invalid {
-      border-left: 4px solid #f44336;
-    }
-
-    .status {
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-    }
-
-    .message {
-      color: rgba(255, 255, 255, 0.8);
-      margin-bottom: 1rem;
-    }
-
-    h4 {
-      margin: 0 0 0.5rem 0;
-      color: rgba(255, 255, 255, 0.9);
-      font-size: 1rem;
-    }
-
-    .metadata-section, .stats-section, .sheets-section {
-      margin-top: 1.5rem;
-      padding-top: 1rem;
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .metadata-grid, .stats-grid {
-      display: flex;
-      gap: 1rem;
-    }
-
-    .metadata-item, .stat-item {
-      flex: 1;
-      background: rgba(255, 255, 255, 0.05);
-      padding: 0.5rem;
-      border-radius: 4px;
-    }
-
-    .sheets-grid {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 1rem;
-    }
-
-    .sheet-item {
-      flex: 1 1 calc(33.33% - 1rem);
-      background: rgba(255, 255, 255, 0.05);
-      padding: 1rem;
-      border-radius: 4px;
-      border-left: 4px solid transparent;
-    }
-
-    .sheet-item.valid {
-      border-left-color: #4CAF50;
-    }
-
-    .sheet-item.invalid {
-      border-left-color: #f44336;
-    }
-
-    .sheet-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.5rem;
-    }
-
-    .sheet-header h5 {
-      margin: 0;
-      color: rgba(255, 255, 255, 0.9);
-      font-size: 0.9rem;
-    }
-
-    .sheet-status {
-      padding: 0.25rem 0.5rem;
-      border-radius: 4px;
-      background: rgba(255, 255, 255, 0.1);
-      font-size: 0.8rem;
-    }
-
-    .sheet-details p {
-      margin: 0.25rem 0;
-      font-size: 0.85rem;
-    }
-
-    .missing-columns {
-      margin-top: 0.5rem;
-    }
-
-    .missing-columns ul {
-      margin: 0.25rem 0;
-      padding-left: 1rem;
-    }
-
-    .missing-columns li {
-      color: #f44336;
-      font-size: 0.85rem;
-    }
-
-    h3 {
-      margin: 0 0 1rem 0;
-      color: rgba(255, 255, 255, 0.9);
-      font-size: 1.2rem;
-    }
-
-    p {
-      margin: 0.5rem 0;
-      color: rgba(255, 255, 255, 0.7);
-      line-height: 1.5;
-    }
-
-    strong {
-      color: rgba(255, 255, 255, 0.9);
-    }
-  `]
-})
-export class FileUploadComponent {
-  selectedFile: File | null = null;
-  validationResult: FormValidation | null = null;
-  parsedForm: ParsedForm | null = null;
-
-  constructor(private formService: FormService) {}
-
-  onFileSelected(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    if (input.files?.length) {
-      this.selectedFile = input.files[0];
-      this.validationResult = null;
-      this.parsedForm = null;
-    }
-  }
-
-  validateFile(): void {
-    if (this.selectedFile) {
-      this.formService.validateFile(this.selectedFile).subscribe({
-        next: (result) => {
-          this.validationResult = result;
-          console.log('Validation result:', result);
-        },
-        error: (error) => {
-          console.error('Validation error:', error);
-          this.validationResult = {
-            valid: false,
-            message: 'Error validating file: ' + error.message
-          };
-        }
-      });
-    }
-  }
-
-  uploadFile(): void {
-    if (this.selectedFile) {
-      this.formService.uploadFile(this.selectedFile).subscribe({
-        next: (result) => {
-          this.parsedForm = result;
-          console.log('Upload result:', result);
-        },
-        error: (error) => {
-          console.error('Upload error:', error);
-          this.validationResult = {
-            valid: false,
-            message: 'Error uploading file: ' + error.message
-          };
-        }
-      });
-    }
-  }
-}
diff --git a/frontend/src/app/components/form-preview/form-preview.component.ts b/frontend/src/app/components/form-preview/form-preview.component.ts
deleted file mode 100644
index cd1bb13..0000000
--- a/frontend/src/app/components/form-preview/form-preview.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-form-preview',
-  imports: [],
-  template: `
-    <p>
-      form-preview works!
-    </p>
-  `,
-  styles: ``
-})
-export class FormPreviewComponent {
-
-}
diff --git a/frontend/src/app/components/navbar/navbar.component.ts b/frontend/src/app/components/navbar/navbar.component.ts
index e6b2638..6eaa637 100644
--- a/frontend/src/app/components/navbar/navbar.component.ts
+++ b/frontend/src/app/components/navbar/navbar.component.ts
@@ -1,29 +1,18 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatIconModule],
+  imports: [CommonModule, MatToolbarModule, MatIconModule],
   template: `
     <mat-toolbar class="navbar">
       <div class="navbar-brand">
         <mat-icon class="brand-icon">description</mat-icon>
         <span>mForm Upload</span>
       </div>
-      <div class="navbar-actions">
-        <button mat-button>
-          <mat-icon>help_outline</mat-icon>
-          Help
-        </button>
-        <button mat-button>
-          <mat-icon>settings</mat-icon>
-          Settings
-        </button>
-      </div>
     </mat-toolbar>
   `,
   styles: [`
@@ -47,24 +36,6 @@ import { MatIconModule } from '@angular/material/icon';
       width: 24px;
       height: 24px;
     }
-
-    .navbar-actions {
-      margin-left: auto;
-      display: flex;
-      gap: 1rem;
-    }
-
-    button {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      color: white;
-      transition: all 0.3s ease;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.1);
-      }
-    }
   `]
 })
-export class NavbarComponent {} 
\ No newline at end of file
+export class NavbarComponent {}
\ No newline at end of file
diff --git a/frontend/src/app/components/search/search.component.ts b/frontend/src/app/components/search/search.component.ts
index c17c2e1..67b1145 100644
--- a/frontend/src/app/components/search/search.component.ts
+++ b/frontend/src/app/components/search/search.component.ts
@@ -39,15 +39,16 @@ import { MatIconModule } from '@angular/material/icon';
 
     .search-field {
       width: 100%;
-      
+
       ::ng-deep {
         .mat-mdc-form-field-flex {
-          background: rgba(255, 255, 255, 0.1);
+          background: rgba(255, 255, 255, 0.04);
           border-radius: 8px;
         }
 
         .mat-mdc-text-field-wrapper {
           background: transparent;
+          padding: 0;
         }
 
         .mat-mdc-form-field-outline {
@@ -72,12 +73,12 @@ import { MatIconModule } from '@angular/material/icon';
 export class SearchComponent {
   searchQuery = '';
 
-  onSearch() {
-    console.log('Searching for:', this.searchQuery);
+  onSearch(): void {
+    // TODO: Implement search functionality
   }
 
-  clearSearch() {
+  clearSearch(): void {
     this.searchQuery = '';
     this.onSearch();
   }
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/app/components/upload/upload.component.ts b/frontend/src/app/components/upload/upload.component.ts
index e2ea732..b24f2da 100644
--- a/frontend/src/app/components/upload/upload.component.ts
+++ b/frontend/src/app/components/upload/upload.component.ts
@@ -1,9 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { FormService, FormData, FormDetails, OptionData } from '../../services/form.service';
+import { FormValidation } from '../../models/form.model';
 
 @Component({
   selector: 'app-upload',
@@ -16,12 +18,19 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
     MatProgressBarModule
   ],
   template: `
-    <mat-card class="upload-card" 
+    <mat-card class="upload-card"
               [class.dragover]="isDragOver"
               (dragover)="onDragOver($event)"
               (dragleave)="onDragLeave($event)"
               (drop)="onDrop($event)">
+      <mat-card-header>
+        <mat-icon mat-card-avatar>cloud_upload</mat-icon>
+        <mat-card-title>Upload & Manage Forms</mat-card-title>
+        <mat-card-subtitle>Drag & drop Excel files or browse to upload</mat-card-subtitle>
+      </mat-card-header>
+
       <mat-card-content>
+        <!-- Upload Area -->
         <div class="upload-area">
           <mat-icon class="upload-icon">cloud_upload</mat-icon>
           <h2>Drag & Drop Excel Files</h2>
@@ -29,26 +38,183 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
           <button mat-raised-button color="primary" (click)="fileInput.click()">
             Browse Files
           </button>
-          <input #fileInput type="file" 
+          <input #fileInput type="file"
                  accept=".xls,.xlsx"
                  style="display: none"
                  (change)="onFileSelected($event)">
         </div>
-        
-        <div *ngIf="uploadProgress > 0" class="upload-progress">
+
+        <!-- File Selection and Actions -->
+        <div *ngIf="selectedFile" class="file-actions">
+          <div class="selected-file">
+            <mat-icon>description</mat-icon>
+            <span>{{selectedFile.name}}</span>
+          </div>
+          <div class="button-group">
+            <button mat-raised-button color="accent" (click)="validateFile()" [disabled]="isValidating">
+              <mat-icon>check_circle</mat-icon>
+              {{isValidating ? 'Validating...' : 'Validate'}}
+            </button>
+            <button mat-raised-button color="primary" (click)="uploadFile()" [disabled]="isUploading || !validationResult?.valid">
+              <mat-icon>upload</mat-icon>
+              {{isUploading ? 'Uploading...' : 'Upload'}}
+            </button>
+          </div>
+        </div>
+
+        <!-- Upload Progress -->
+        <div *ngIf="isUploading" class="upload-progress">
           <mat-progress-bar mode="determinate" [value]="uploadProgress">
           </mat-progress-bar>
           <span>{{uploadProgress}}%</span>
         </div>
 
-        <div *ngIf="uploadedFiles.length > 0" class="uploaded-files">
-          <h3>Uploaded Files</h3>
-          <div *ngFor="let file of uploadedFiles" class="file-item">
-            <mat-icon>description</mat-icon>
-            <span>{{file.name}}</span>
-            <button mat-icon-button color="warn" (click)="removeFile(file)">
-              <mat-icon>delete</mat-icon>
-            </button>
+        <!-- Validation Result -->
+        <div *ngIf="validationResult" class="validation-result" [class.valid]="validationResult.valid" [class.invalid]="!validationResult.valid">
+          <h3>Validation Result</h3>
+          <p class="status">Status: {{ validationResult.valid ? 'Valid' : 'Invalid' }}</p>
+          <p class="message">{{ validationResult.message }}</p>
+
+          <div *ngIf="validationResult.form_metadata" class="metadata-section">
+            <h4>Form Metadata</h4>
+            <div class="metadata-grid">
+              <div class="metadata-item">
+                <strong>Language:</strong> {{ validationResult.form_metadata['language'] }}
+              </div>
+              <div class="metadata-item">
+                <strong>Title:</strong> {{ validationResult.form_metadata['title'] }}
+              </div>
+            </div>
+          </div>
+
+          <div class="stats-section">
+            <h4>File Statistics</h4>
+            <div class="stats-grid">
+              <div class="stat-item">
+                <strong>Questions:</strong> {{ validationResult.questions_count || 0 }}
+              </div>
+              <div class="stat-item">
+                <strong>Answer Options:</strong> {{ validationResult.options_count || 0 }}
+              </div>
+            </div>
+          </div>
+
+          <div *ngIf="validationResult.sheets && validationResult.sheets.length > 0" class="sheets-section">
+            <h4>Sheet Details</h4>
+            <div class="sheets-grid">
+              <div *ngFor="let sheet of validationResult.sheets" class="sheet-item" [class.valid]="sheet.exists && sheet.missing_columns.length === 0" [class.invalid]="!sheet.exists || sheet.missing_columns.length > 0">
+                <div class="sheet-header">
+                  <h5>{{ sheet.name }}</h5>
+                  <span class="sheet-status">{{ sheet.exists && sheet.missing_columns.length === 0 ? '✓' : '✗' }}</span>
+                </div>
+                <div class="sheet-details">
+                  <p><strong>Exists:</strong> {{ sheet.exists ? 'Yes' : 'No' }}</p>
+                  <p><strong>Rows:</strong> {{ sheet.row_count }}</p>
+                  <p><strong>Columns:</strong> {{ sheet.columns.join(', ') }}</p>
+                  <div *ngIf="sheet.missing_columns.length > 0" class="missing-columns">
+                    <strong>Missing Columns:</strong>
+                    <ul>
+                      <li *ngFor="let col of sheet.missing_columns">{{ col }}</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Form List -->
+        <div *ngIf="parsedForms.length > 0" class="form-list">
+          <h3>Parsed Forms</h3>
+          <div *ngFor="let form of parsedForms" class="form-item" (click)="showFormDetails(form)">
+            <div class="form-info">
+              <mat-icon>description</mat-icon>
+              <div class="form-details">
+                <h4>{{form.title}}</h4>
+                <p>{{form.language}} • {{form.version}} • {{form.created_at | date:'short'}}</p>
+              </div>
+            </div>
+
+            <div class="form-actions">
+              <button mat-icon-button color="warn" (click)="deleteForm(form, $event)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Form Details Modal -->
+        <div *ngIf="selectedFormDetails" class="form-details-modal">
+          <div class="modal-overlay" (click)="closeFormDetails()"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h2>{{selectedFormDetails.form.title}}</h2>
+              <button mat-icon-button (click)="closeFormDetails()">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
+
+            <div class="modal-body">
+              <div class="form-info-section">
+                <h3>Form Information</h3>
+                <div class="info-grid">
+                  <div class="info-item">
+                    <strong>Language:</strong> {{selectedFormDetails.form.language}}
+                  </div>
+                  <div class="info-item">
+                    <strong>Version:</strong> {{selectedFormDetails.form.version}}
+                  </div>
+                  <div class="info-item">
+                    <strong>Created:</strong> {{selectedFormDetails.form.created_at | date:'medium'}}
+                  </div>
+                  <div class="info-item">
+                    <strong>Questions:</strong> {{selectedFormDetails.questions_count}}
+                  </div>
+                  <div class="info-item">
+                    <strong>Options:</strong> {{selectedFormDetails.options_count}}
+                  </div>
+                </div>
+              </div>
+
+              <div class="questions-section">
+                <h3>Questions ({{selectedFormDetails.questions.length}})</h3>
+                <div class="questions-list">
+                  <div *ngFor="let question of selectedFormDetails.questions; let i = index" class="question-item">
+                    <div class="question-header">
+                      <span class="question-number">{{i + 1}}</span>
+                      <h4>{{question.title}}</h4>
+                      <span class="question-type">{{question.input_type}}</span>
+                    </div>
+                    <div class="question-details">
+                      <p><strong>Order:</strong> {{question.order}}</p>
+                      <p><strong>View Sequence:</strong> {{question.view_sequence}}</p>
+                    </div>
+
+                    <div *ngIf="getQuestionOptions(question.id).length > 0" class="question-options">
+                      <h5>Options ({{getQuestionOptions(question.id).length}})</h5>
+                      <div class="options-list">
+                        <div *ngFor="let option of getQuestionOptions(question.id)" class="option-item">
+                          <span class="option-id">{{option.option_id}}</span>
+                          <span class="option-label">{{option.label}}</span>
+                          <span class="option-order">Order: {{option.order}}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div *ngIf="selectedFormDetails.options.length > 0" class="all-options-section">
+                <h3>All Options ({{selectedFormDetails.options.length}})</h3>
+                <div class="options-list">
+                  <div *ngFor="let option of selectedFormDetails.options" class="option-item">
+                    <span class="option-id">{{option.option_id}}</span>
+                    <span class="option-label">{{option.label}}</span>
+                    <span class="option-order">Order: {{option.order}}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </mat-card-content>
@@ -61,12 +227,53 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
       border: 2px dashed rgba(255, 255, 255, 0.2);
       transition: all 0.3s ease;
       height: 100%;
-      min-height: 300px;
+      min-height: 400px;
+      color: white;
 
       &.dragover {
         border-color: #4CAF50;
         background: rgba(76, 175, 80, 0.1);
       }
+
+      ::ng-deep {
+        .mat-mdc-card-header {
+          padding: 1rem;
+        }
+
+        .mat-mdc-card-content {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          padding: 0;
+        }
+
+        .mat-mdc-card-avatar {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 50%;
+          padding: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+
+          mat-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .mat-mdc-card-title {
+          color: white;
+        }
+
+        .mat-mdc-card-subtitle {
+          color: rgba(255, 255, 255, 0.7);
+        }
+      }
     }
 
     .upload-area {
@@ -77,7 +284,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
       padding: 2rem;
       color: white;
       text-align: center;
-      height: 100%;
+      flex: 1;
       min-height: 200px;
 
       .upload-icon {
@@ -98,29 +305,38 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
         margin: 1rem 0;
         color: rgba(255, 255, 255, 0.6);
       }
+    }
 
-      button {
-        border: 2px solid;
-        border-radius: 8px;
-        padding: 8px 16px;
-        font-weight: 500;
-        transition: all 0.3s ease;
-        background-color: #3f51b5;
-        border-color: #3f51b5;
-        color: white;
+    .file-actions {
+      padding: 1rem;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
 
-        &:hover {
-          background-color: #303f9f;
-          border-color: #303f9f;
+      .selected-file {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+        padding: 0.5rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+
+        mat-icon {
+          color: rgba(255, 255, 255, 0.7);
         }
       }
+
+      .button-group {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+      }
     }
 
     .upload-progress {
-      margin-top: 1rem;
       display: flex;
       align-items: center;
       gap: 1rem;
+      padding: 1rem;
       color: white;
 
       mat-progress-bar {
@@ -128,39 +344,498 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
       }
     }
 
-    .uploaded-files {
-      margin-top: 2rem;
-      color: white;
+    .validation-result {
+      padding: 1rem;
+      margin: 1rem;
+      border-radius: 4px;
+      background: rgba(255, 255, 255, 0.05);
+
+      &.valid {
+        border-left: 4px solid #4CAF50;
+      }
+
+      &.invalid {
+        border-left: 4px solid #f44336;
+      }
+
+      h3 {
+        margin: 0 0 0.5rem;
+        font-size: 1.1rem;
+      }
+
+      .status {
+        font-weight: 500;
+        margin: 0.5rem 0;
+      }
+
+      .message {
+        margin: 0.5rem 0;
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .metadata-section {
+        margin-top: 1rem;
+
+        h4 {
+          margin: 0 0 0.5rem;
+          font-size: 1rem;
+        }
+
+        .metadata-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 0.5rem;
+
+          .metadata-item {
+            padding: 0.25rem 0;
+          }
+        }
+      }
+
+      .stats-section {
+        margin-top: 1rem;
+
+        h4 {
+          margin: 0 0 0.5rem;
+          font-size: 1rem;
+        }
+
+        .stats-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 0.5rem;
+
+          .stat-item {
+            padding: 0.25rem 0;
+          }
+        }
+      }
+
+      .sheets-section {
+        margin-top: 1rem;
+
+        h4 {
+          margin: 0 0 0.5rem;
+          font-size: 1rem;
+        }
+
+        .sheets-grid {
+          display: grid;
+          grid-template-columns: 1fr;
+          gap: 0.5rem;
+        }
+
+        .sheet-item {
+          padding: 0.5rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 4px;
+          margin-bottom: 0.5rem;
+          transition: all 0.3s ease;
+
+          &.valid {
+            border-left: 3px solid #4CAF50;
+          }
+
+          &.invalid {
+            border-left: 3px solid #f44336;
+          }
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.1);
+          }
+
+          .sheet-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
+
+            h5 {
+              margin: 0;
+              font-size: 1rem;
+              font-weight: 500;
+            }
+
+            .sheet-status {
+              padding: 0.25rem 0.5rem;
+              background: rgba(255, 255, 255, 0.05);
+              border-radius: 4px;
+              font-weight: 500;
+            }
+          }
+
+          .sheet-details {
+            p {
+              margin: 0.25rem 0;
+              font-size: 0.875rem;
+              color: rgba(255, 255, 255, 0.7);
+            }
+
+            .missing-columns {
+              margin-top: 0.5rem;
+
+              strong {
+                margin-right: 0.5rem;
+              }
+
+              ul {
+                margin: 0;
+                padding-left: 1rem;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .form-list {
+      padding: 1rem;
+      max-height: 300px;
+      overflow-y: auto;
 
       h3 {
         margin: 0 0 1rem;
         font-size: 1.1rem;
+        color: white;
+      }
+    }
+
+    .form-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 8px;
+      margin-bottom: 0.5rem;
+      transition: all 0.3s ease;
+      cursor: pointer;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    .form-info {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+
+      mat-icon {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+
+    .form-details {
+      h4 {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: 500;
       }
 
-      .file-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem;
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: 4px;
-        margin-bottom: 0.5rem;
+      p {
+        margin: 0;
+        font-size: 0.875rem;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
 
-        mat-icon {
-          color: rgba(255, 255, 255, 0.6);
+    .form-details-modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 1000;
+
+      .modal-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      .modal-content {
+        background: rgba(26, 26, 46, 0.95);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 2rem;
+        border-radius: 8px;
+        width: 80%;
+        max-width: 800px;
+        max-height: 80vh;
+        overflow-y: auto;
+        position: relative;
+        color: white;
+
+        .modal-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1.5rem;
+          padding-bottom: 1rem;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+          h2 {
+            margin: 0;
+            color: white;
+            font-size: 1.5rem;
+            font-weight: 500;
+          }
+
+          button {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            color: white;
+
+            &:hover {
+              background: rgba(255, 255, 255, 0.2);
+              border-color: rgba(255, 255, 255, 0.3);
+            }
+
+            mat-icon {
+              font-size: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
         }
 
-        span {
-          flex: 1;
+        .modal-body {
+          .form-info-section {
+            margin-bottom: 2rem;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 8px;
+
+            h3 {
+              margin: 0 0 1rem;
+              color: white;
+              font-size: 1.2rem;
+              font-weight: 500;
+            }
+
+            .info-grid {
+              display: grid;
+              grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+              gap: 1rem;
+
+              .info-item {
+                padding: 0.5rem;
+                background: rgba(255, 255, 255, 0.05);
+                border-radius: 4px;
+
+                strong {
+                  display: block;
+                  margin-bottom: 0.25rem;
+                  color: rgba(255, 255, 255, 0.8);
+                  font-size: 0.875rem;
+                }
+
+                span {
+                  color: white;
+                  font-weight: 500;
+                }
+              }
+            }
+          }
+
+          .questions-section {
+            margin-top: 2rem;
+
+            h3 {
+              margin: 0 0 1rem;
+              color: white;
+              font-size: 1.2rem;
+              font-weight: 500;
+            }
+
+            .questions-list {
+              .question-item {
+                margin-bottom: 1rem;
+                padding: 1rem;
+                background: rgba(255, 255, 255, 0.05);
+                border-radius: 8px;
+                border-left: 3px solid #3f51b5;
+
+                .question-header {
+                  display: flex;
+                  align-items: center;
+                  gap: 1rem;
+                  margin-bottom: 0.5rem;
+
+                  .question-number {
+                    background: #3f51b5;
+                    color: white;
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 0.75rem;
+                    font-weight: bold;
+                  }
+
+                  h4 {
+                    margin: 0;
+                    color: white;
+                    font-size: 1rem;
+                    font-weight: 500;
+                    flex: 1;
+                  }
+
+                  .question-type {
+                    padding: 0.25rem 0.5rem;
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: 4px;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                    color: rgba(255, 255, 255, 0.8);
+                  }
+                }
+
+                .question-details {
+                  margin-bottom: 0.5rem;
+
+                  p {
+                    margin: 0.25rem 0;
+                    color: rgba(255, 255, 255, 0.7);
+                    font-size: 0.875rem;
+
+                    strong {
+                      color: rgba(255, 255, 255, 0.9);
+                    }
+                  }
+                }
+
+                .question-options {
+                  margin-top: 0.5rem;
+
+                  h5 {
+                    margin: 0 0 0.5rem;
+                    color: rgba(255, 255, 255, 0.8);
+                    font-size: 0.875rem;
+                  }
+
+                  .options-list {
+                    .option-item {
+                      display: flex;
+                      align-items: center;
+                      gap: 0.5rem;
+                      margin-bottom: 0.25rem;
+                      padding: 0.25rem 0.5rem;
+                      background: rgba(255, 255, 255, 0.03);
+                      border-radius: 4px;
+
+                      .option-id {
+                        background: rgba(255, 255, 255, 0.1);
+                        color: white;
+                        padding: 0.125rem 0.375rem;
+                        border-radius: 3px;
+                        font-size: 0.75rem;
+                        font-weight: bold;
+                        min-width: 20px;
+                        text-align: center;
+                      }
+
+                      .option-label {
+                        flex: 1;
+                        color: white;
+                        font-size: 0.875rem;
+                      }
+
+                      .option-order {
+                        font-size: 0.75rem;
+                        color: rgba(255, 255, 255, 0.5);
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          .all-options-section {
+            margin-top: 2rem;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 8px;
+
+            h3 {
+              margin: 0 0 1rem;
+              color: white;
+              font-size: 1.2rem;
+              font-weight: 500;
+            }
+
+            .options-list {
+              .option-item {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                margin-bottom: 0.5rem;
+                padding: 0.5rem;
+                background: rgba(255, 255, 255, 0.05);
+                border-radius: 4px;
+
+                .option-id {
+                  background: rgba(255, 255, 255, 0.1);
+                  color: white;
+                  padding: 0.25rem 0.5rem;
+                  border-radius: 3px;
+                  font-size: 0.75rem;
+                  font-weight: bold;
+                  min-width: 30px;
+                  text-align: center;
+                }
+
+                .option-label {
+                  flex: 1;
+                  color: white;
+                  font-size: 0.875rem;
+                }
+
+                .option-order {
+                  font-size: 0.75rem;
+                  color: rgba(255, 255, 255, 0.5);
+                }
+              }
+            }
+          }
         }
       }
     }
   `]
 })
-export class UploadComponent {
+export class UploadComponent implements OnInit {
   isDragOver = false;
+  isUploading = false;
+  isValidating = false;
   uploadProgress = 0;
-  uploadedFiles: File[] = [];
+  selectedFile: File | null = null;
+  validationResult: FormValidation | null = null;
+  parsedForms: FormData[] = [];
+  selectedFormDetails: FormDetails | null = null;
+
+  constructor(private formService: FormService) {}
+
+  ngOnInit(): void {
+    this.loadForms();
+  }
 
   onDragOver(event: DragEvent) {
     event.preventDefault();
@@ -180,47 +855,122 @@ export class UploadComponent {
     this.isDragOver = false;
 
     const files = event.dataTransfer?.files;
-    if (files) {
-      this.handleFiles(Array.from(files));
+    if (files && files.length > 0) {
+      this.selectedFile = files[0];
+      this.validationResult = null;
     }
   }
 
   onFileSelected(event: Event) {
     const input = event.target as HTMLInputElement;
-    if (input.files) {
-      this.handleFiles(Array.from(input.files));
+    if (input.files && input.files.length > 0) {
+      this.selectedFile = input.files[0];
+      this.validationResult = null;
     }
+    input.value = '';
   }
 
-  handleFiles(files: File[]) {
-    const excelFiles = files.filter(file => 
-      file.type === 'application/vnd.ms-excel' || 
-      file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-    );
+  validateFile() {
+    if (!this.selectedFile) return;
 
-    if (excelFiles.length > 0) {
-      this.uploadedFiles.push(...excelFiles);
-      this.simulateUpload();
-    }
+    this.isValidating = true;
+    this.formService.validateFile(this.selectedFile).subscribe({
+      next: (result) => {
+        this.validationResult = result;
+        this.isValidating = false;
+      },
+      error: (error: any) => {
+        console.error('Validation failed:', error);
+        this.isValidating = false;
+      }
+    });
   }
 
-  simulateUpload() {
+  uploadFile() {
+    if (!this.selectedFile || !this.validationResult?.valid) return;
+
+    this.isUploading = true;
     this.uploadProgress = 0;
-    const interval = setInterval(() => {
-      this.uploadProgress += 10;
-      if (this.uploadProgress >= 100) {
-        clearInterval(interval);
-        setTimeout(() => {
-          this.uploadProgress = 0;
-        }, 500);
+
+    const progressInterval = setInterval(() => {
+      this.uploadProgress = Math.min(this.uploadProgress + 10, 90);
+      if (this.uploadProgress >= 90) {
+        clearInterval(progressInterval);
       }
     }, 200);
+
+    this.formService.uploadFile(this.selectedFile).subscribe({
+      next: () => {
+        clearInterval(progressInterval);
+        this.uploadProgress = 100;
+        setTimeout(() => {
+          this.resetUploadState();
+        }, 500);
+      },
+      error: (error: any) => {
+        clearInterval(progressInterval);
+        this.resetUploadState();
+        console.error('Upload failed:', error);
+      }
+    });
   }
 
-  removeFile(file: File) {
-    const index = this.uploadedFiles.indexOf(file);
-    if (index > -1) {
-      this.uploadedFiles.splice(index, 1);
+  private resetUploadState(): void {
+    this.isUploading = false;
+    this.uploadProgress = 0;
+    this.selectedFile = null;
+    this.validationResult = null;
+    this.loadForms();
+  }
+
+  loadForms(): void {
+    this.formService.getAllForms().subscribe({
+      next: (response) => {
+        this.parsedForms = response.forms;
+      },
+      error: (error: any) => {
+        console.error('Failed to load forms:', error);
+      }
+    });
+  }
+
+  deleteForm(form: FormData, event: Event): void {
+    event.stopPropagation();
+    if (confirm(`Are you sure you want to delete "${form.title}"?`)) {
+      this.formService.deleteForm(form.id).subscribe({
+        next: () => {
+          this.loadForms();
+        },
+        error: (error: any) => {
+          console.error('Failed to delete form:', error);
+        }
+      });
     }
   }
-} 
\ No newline at end of file
+
+  showFormDetails(form: FormData): void {
+    this.formService.getFormById(form.id).subscribe({
+      next: (response: FormDetails) => {
+        this.selectedFormDetails = response;
+      },
+      error: (error: any) => {
+        console.error('Failed to load form details:', error);
+      }
+    });
+  }
+
+  closeFormDetails(): void {
+    this.selectedFormDetails = null;
+  }
+
+  getQuestionOptions(questionId: string): OptionData[] {
+    if (!this.selectedFormDetails) return [];
+
+    const question = this.selectedFormDetails.questions.find(q => q.id === questionId);
+    if (!question) return [];
+
+    return this.selectedFormDetails.options.filter(option =>
+      option.order === question.order
+    );
+  }
+}
diff --git a/frontend/src/app/core/core.module.ts b/frontend/src/app/core/core.module.ts
deleted file mode 100644
index 339a911..0000000
--- a/frontend/src/app/core/core.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule
-  ]
-})
-export class CoreModule { }
diff --git a/frontend/src/app/models/form.model.ts b/frontend/src/app/models/form.model.ts
index 45f803a..a9b3427 100644
--- a/frontend/src/app/models/form.model.ts
+++ b/frontend/src/app/models/form.model.ts
@@ -52,4 +52,4 @@ export interface ParsedForm {
   version: string;
   groups: FormGroup[];
   settings?: { [key: string]: string };
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/src/app/services/form.service.ts b/frontend/src/app/services/form.service.ts
index a862d95..29c46d3 100644
--- a/frontend/src/app/services/form.service.ts
+++ b/frontend/src/app/services/form.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { FormValidation, ParsedForm } from '../models/form.model';
+import { FormValidation } from '../models/form.model';
 
 export interface FormData {
   id: string;
@@ -47,7 +47,7 @@ export interface FormsResponse {
   providedIn: 'root'
 })
 export class FormService {
-  private apiUrl = 'http://localhost:8000/api';
+  private readonly apiUrl = 'http://localhost:8000/api';
 
   constructor(private http: HttpClient) { }
 
@@ -57,10 +57,10 @@ export class FormService {
     return this.http.post<FormValidation>(`${this.apiUrl}/validate`, formData);
   }
 
-  uploadFile(file: File): Observable<ParsedForm> {
+  uploadFile(file: File): Observable<FormDetails> {
     const formData = new FormData();
     formData.append('file', file);
-    return this.http.post<ParsedForm>(`${this.apiUrl}/upload`, formData);
+    return this.http.post<FormDetails>(`${this.apiUrl}/upload`, formData);
   }
 
   getAllForms(): Observable<FormsResponse> {
@@ -74,4 +74,4 @@ export class FormService {
   deleteForm(formId: string): Observable<{ message: string }> {
     return this.http.delete<{ message: string }>(`${this.apiUrl}/forms/${formId}`);
   }
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
deleted file mode 100644
index 76cf203..0000000
--- a/frontend/src/app/shared/shared.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule
-  ]
-})
-export class SharedModule { }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 5fc93f4..900804c 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,5 +1,5 @@
 @import '@angular/material/prebuilt-themes/purple-green.css';
 
 .mat-typography {
-  margin: 0 !important;
+  margin: 0;
 }
diff --git a/run.sh b/run.sh
index 268f96a..b4905a4 100755
--- a/run.sh
+++ b/run.sh
@@ -1,44 +1,27 @@
 #!/bin/bash
 
-# Define your project root (where this script is located)
 PROJECT_ROOT=$(pwd)
-
-# Define the paths relative to the project root
 FRONTEND_PATH="$PROJECT_ROOT/frontend"
 BACKEND_PATH="$PROJECT_ROOT/backend"
-
-# Name of your tmux session
 SESSION_NAME="dev-project"
 
-# Check if the tmux session already exists
-tmux has-session -t "$SESSION_NAME" 2>/dev/null
+if ! tmux has-session -t "$SESSION_NAME"; then
+    tmux new-session -s "$SESSION_NAME" -d
+    tmux split-window -v -t "$SESSION_NAME:0.0"
 
-if [ $? != 0 ]; then
-  echo "Creating new tmux session: $SESSION_NAME"
-  # Create a new tmux session and window
-  tmux new-session -s "$SESSION_NAME" -d
+    # --- Top Pane (Frontend) ---
+    tmux send-keys -t "$SESSION_NAME:0.0" "cd $FRONTEND_PATH" C-m
+    tmux send-keys -t "$SESSION_NAME:0.0" "ng serve" C-m
 
-  # Split the window into two panes
-  tmux split-window -v -t "$SESSION_NAME:0.0" # Splits the first pane vertically
+    # --- Bottom Pane (Backend) ---
+    tmux send-keys -t "$SESSION_NAME:0.0" "select-pane -t 1" C-m
+    tmux send-keys -t "$SESSION_NAME:0.1" "cd $BACKEND_PATH" C-m
+    tmux send-keys -t "$SESSION_NAME:0.1" "source .venv/bin/activate" C-m
+    tmux send-keys -t "$SESSION_NAME:0.1" "uvicorn main:app --reload" C-m
 
-  # --- Top Pane (Frontend) ---
-  echo "Setting up top pane (frontend)..."
-  tmux send-keys -t "$SESSION_NAME:0.0" "cd $FRONTEND_PATH" C-m
-  tmux send-keys -t "$SESSION_NAME:0.0" "echo 'Starting Angular development server...'" C-m
-  tmux send-keys -t "$SESSION_NAME:0.0" "ng serve" C-m
-
-  # --- Bottom Pane (Backend) ---
-  echo "Setting up bottom pane (backend)..."
-  tmux send-keys -t "$SESSION_NAME:0.0" "select-pane -t 1" C-m # Select the bottom pane
-  tmux send-keys -t "$SESSION_NAME:0.1" "cd $BACKEND_PATH" C-m
-  tmux send-keys -t "$SESSION_NAME:0.1" "echo 'Activating Python virtual environment...'" C-m
-  tmux send-keys -t "$SESSION_NAME:0.1" "source .venv/bin/activate" C-m
-  tmux send-keys -t "$SESSION_NAME:0.1" "echo 'Starting FastAPI development server...'" C-m
-  tmux send-keys -t "$SESSION_NAME:0.1" "uvicorn main:app --reload" C-m
-
-  echo "Tmux session '$SESSION_NAME' created. Attaching..."
-  tmux attach-session -t "$SESSION_NAME"
+    tmux attach-session -t "$SESSION_NAME"
 else
-  echo "Tmux session '$SESSION_NAME' already exists. Attaching..."
-  tmux attach-session -t "$SESSION_NAME"
+    echo "Tmux session '$SESSION_NAME' already exists. Attaching..."
+    tmux attach-session -t "$SESSION_NAME"
 fi
+