diff --git a/src/app/features/backbone/home/home.component.html b/src/app/features/backbone/home/home.component.html
index ca92d2ef..56a5fdf0 100644
--- a/src/app/features/backbone/home/home.component.html
+++ b/src/app/features/backbone/home/home.component.html
@@ -72,6 +72,7 @@
           <lib-hero-header class="gradientCard"
                            description="Explore a vast library of modules, discover new favorites, and track your collection with ease."
                            title="Discover new modules"
+                           #moduleBrowser
           >
             <lib-screen-wrapper maxSize="75rem">
               <lib-device-frame-wrapper>
diff --git a/src/app/features/rack-browser/rack-browser-detail/rack-browser-detail-view.component.html b/src/app/features/rack-browser/rack-browser-detail/rack-browser-detail-view.component.html
index ff061e26..9d7080fd 100644
--- a/src/app/features/rack-browser/rack-browser-detail/rack-browser-detail-view.component.html
+++ b/src/app/features/rack-browser/rack-browser-detail/rack-browser-detail-view.component.html
@@ -4,11 +4,11 @@
 >
   <div class="col gap1"
   >
-    <lib-hero-content-card titleBig="Rack details"
-                           class="racksBG"
+    <lib-hero-content-card class="racksBG"
+                           titleBig="Rack details"
     >
-      <lib-auto-content-loading-indicator [updateData$]="dataService.updateSingleRackData$"
-                                          [data$]="dataService.singleRackData$"
+      <lib-auto-content-loading-indicator [data$]="dataService.singleRackData$"
+                                          [updateData$]="dataService.updateSingleRackData$"
       ></lib-auto-content-loading-indicator>
       <ng-container *ngIf="bag.data"
       >
@@ -17,15 +17,39 @@
           ></app-rack-composite>
           <lib-clean-card>
             <app-rack-editor
-                [data]="(bag.data)"
+              [data]="(bag.data)"
             ></app-rack-editor>
           </lib-clean-card>
         
         </div>
       </ng-container>
     </lib-hero-content-card>
-    <app-module-browser-root *ngIf="(dataService.isCurrentRackEditable$|async)&&(dataService.isCurrentRackPropertyOfCurrentUser$|async)"
-                             [viewConfig]="viewConfig"
-    ></app-module-browser-root>
+    <ng-container *ngIf="dataService.isCurrentRackPropertyOfCurrentUser$|async">
+      <app-module-browser-root *ngIf="(dataService.isCurrentRackEditable$|async) else noBrowserOpen"
+                               [viewConfig]="viewConfig"
+      ></app-module-browser-root>
+    </ng-container>
   </div>
-</ng-container>
\ No newline at end of file
+</ng-container>
+<!--template if no browser open-->
+<ng-template #noBrowserOpen
+>
+  <div class="col gap4 center"
+       style="
+      font-size: 1.5em;
+      padding: 3em;
+"
+  >
+    <mat-label
+    
+    >
+      Unlock to add modules or make changes
+    </mat-label>
+    
+    <app-brand-primary-button (click)="dataService.requestRackEditableStatusChange$.next()"
+    >
+      Unlock rack now
+    </app-brand-primary-button>
+  </div>
+
+</ng-template>
\ No newline at end of file
diff --git a/src/app/features/rack-browser/rack-browser.module.ts b/src/app/features/rack-browser/rack-browser.module.ts
index 841a8243..56510234 100644
--- a/src/app/features/rack-browser/rack-browser.module.ts
+++ b/src/app/features/rack-browser/rack-browser.module.ts
@@ -42,6 +42,7 @@ import { AutoUpdateLoadingIndicatorModule } from '../../shared-interproject/comp
 import { CleanCardModule } from '../../shared-interproject/components/@visual/clean-card/clean-card.module';
 import { ModuleBrowserModule } from '../module-browser/module-browser.module';
 import { StatisticsModule } from "src/app/components/shared-atoms/statistics/statistics.module";
+import { MatInputModule } from "@angular/material/input";
 
 
 const parentPrefix: string = 'racks';
@@ -73,12 +74,12 @@ const parentPrefix: string = 'racks';
           // canActivate: [LocalAuthGuardService],
         },
         {
-          path: '',
+          path:   '',
           component: CommonSidebarComponent,
           outlet: 'sidebar'
         },
         {
-          path: '',
+          path:   '',
           component: UserDataHandlerComponent,
           outlet: 'user'
         }
@@ -117,7 +118,8 @@ const parentPrefix: string = 'racks';
     CleanCardModule,
     RackListModule,
     ModuleBrowserModule,
-    StatisticsModule
+    StatisticsModule,
+    MatInputModule
   ]
 })
 export class RackBrowserModule {}
\ No newline at end of file
diff --git a/src/app/style/tools.scss b/src/app/style/tools.scss
index ff4054e5..be2cfbd1 100644
--- a/src/app/style/tools.scss
+++ b/src/app/style/tools.scss
@@ -39,6 +39,14 @@
   gap: $standardUnit*2 $standardUnit*2
 }
 
+.gap3 {
+  gap: $standardUnit*3 $standardUnit*3
+}
+
+.gap4 {
+  gap: $standardUnit*4 $standardUnit*4
+}
+
 .col {
   @include flex;
   flex-direction:     column;
@@ -53,6 +61,16 @@
   align-items: flex-end;
 }
 
+//align flex to center
+.center {
+  align-items: center;
+}
+
+//align flex to start
+.start {
+  align-items: flex-start;
+}
+
 
 
 
diff --git a/src/build.ts b/src/build.ts
index 50dcd377..890871af 100644
--- a/src/build.ts
+++ b/src/build.ts
@@ -1,13 +1,13 @@
 // Build information, automatically generated by `ng-info`
 const build = {
     version: "4.2.3",
-    timestamp: "Fri Feb 09 2024 11:53:26 GMT+0100 (Ora standard dell’Europa centrale)",
+    timestamp: "Fri Feb 09 2024 16:40:41 GMT+0100 (Ora standard dell’Europa centrale)",
     message: null,
     git: {
         user: "Polyterative",
         branch: "develop",
-        hash:     "228029",
-        fullHash: "2280297164013d554e69b322dae22aaac8d3f231"
+        hash:     "4bfc4e",
+        fullHash: "4bfc4eb5859e4885689f95903df7aa51103ddfe9"
     }
 };