diff --git a/.vscode/launch.json b/.vscode/launch.json
index 6545395..59da6a4 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -6,7 +6,7 @@
             "type": "firefox",
             "request": "launch",
             "reAttach": true,
-            "url": "http://localhost:4200/",
+            "url": "http://127.0.0.1:4200/",
             "pathMappings": [
                 {
                     "url": "webpack:///projects/budgetkey/src/",
diff --git a/Dockerfile b/Dockerfile
index 68740dd..0e644fc 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -21,4 +21,6 @@ RUN npm install
 
 COPY  --from=build /app/dist dist
 
+ENV NODE_ENV=production
+
 ENTRYPOINT [ "node", "/app/dist/budgetkey/server/main.js" ]
diff --git a/angular.json b/angular.json
index c842db9..dba615e 100644
--- a/angular.json
+++ b/angular.json
@@ -89,7 +89,10 @@
               "browserTarget": "budgetkey:build:development"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "development",
+          "options": {
+            "host": "127.0.0.1"
+          }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
diff --git a/projects/budgetkey/src/app/about/about.module.ts b/projects/budgetkey/src/app/about/about.module.ts
index e92cdb2..c7903d6 100644
--- a/projects/budgetkey/src/app/about/about.module.ts
+++ b/projects/budgetkey/src/app/about/about.module.ts
@@ -5,6 +5,7 @@ import { AboutRoutingModule } from './about-routing.module';
 import { AboutPageComponent } from './about-page/about-page.component';
 import { CommonComponentsModule } from '../common-components/common-components.module';
 import { HttpClientModule } from '@angular/common/http';
+import { ListComponentsModule } from '../list-components/list-components.module';
 
 
 @NgModule({
@@ -14,6 +15,7 @@ import { HttpClientModule } from '@angular/common/http';
   imports: [
     CommonModule,
     CommonComponentsModule,
+    ListComponentsModule,
     HttpClientModule,
     AboutRoutingModule
   ]
diff --git a/projects/budgetkey/src/app/app-routing.module.ts b/projects/budgetkey/src/app/app-routing.module.ts
index f2fcac9..9fab5b6 100644
--- a/projects/budgetkey/src/app/app-routing.module.ts
+++ b/projects/budgetkey/src/app/app-routing.module.ts
@@ -8,6 +8,7 @@ const routes: Routes = [
   { path: 'i', loadChildren: () => import('./item/item.module').then(m => m.ItemModule) },
   { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
   { path: 'p', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },
+  { path: 'l', loadChildren: () => import('./list-page/list-page.module').then(m => m.ListPageModule) },
   { path: 'not-found', component: PageNotFoundComponent },
   { path: '**', pathMatch: 'full', component: PageNotFoundComponent },
 ];
@@ -16,6 +17,7 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabledBlocking',
     anchorScrolling: 'enabled',
+    // enableTracing: true,
 })],
   exports: [RouterModule]
 })
diff --git a/projects/budgetkey/src/app/app.module.ts b/projects/budgetkey/src/app/app.module.ts
index b802da8..956fe7f 100644
--- a/projects/budgetkey/src/app/app.module.ts
+++ b/projects/budgetkey/src/app/app.module.ts
@@ -7,6 +7,9 @@ import { CommonComponentsModule } from './common-components/common-components.mo
 import { NGX_SEO_CONFIG_TOKEN, NgxSeoModule } from '@avivharuzi/ngx-seo';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { AppErrorHandler } from './app-error-handler';
+import { ListComponentsModule } from './list-components/list-components.module';
+import { provideRouter, withDebugTracing } from '@angular/router';
+import { ListPageModule } from './list-page/list-page.module';
 
 @NgModule({
   declarations: [
@@ -17,11 +20,13 @@ import { AppErrorHandler } from './app-error-handler';
     BrowserModule,
     AppRoutingModule,
     CommonComponentsModule,
+    ListComponentsModule,
     NgxSeoModule.forRoot(),
+    ListPageModule,
   ],
   providers: [
     provideClientHydration(),
-    {provide: ErrorHandler, useClass: AppErrorHandler},
+    // {provide: ErrorHandler, useClass: AppErrorHandler},
     {provide: NGX_SEO_CONFIG_TOKEN, useValue: {
       changeTitle: (title: any) => title,
       preserve: true,
diff --git a/projects/budgetkey/src/app/charts/chart-plotly/chart-plotly.component.ts b/projects/budgetkey/src/app/charts/chart-plotly/chart-plotly.component.ts
index 6062054..4393768 100644
--- a/projects/budgetkey/src/app/charts/chart-plotly/chart-plotly.component.ts
+++ b/projects/budgetkey/src/app/charts/chart-plotly/chart-plotly.component.ts
@@ -60,7 +60,6 @@ export class ChartPlotlyComponent implements OnChanges, AfterViewInit {
     }
 
     el.innerHTML = '';
-    console.log('plotly new plot', this.data, layout, this.config);
     this.plotly.newPlot(el, this.data, layout, Object.assign({responsive: true}, this.config));
     el.querySelectorAll('svg').forEach((svg) => {
       svg.setAttribute('alt', this.data.title || 'diagram');
diff --git a/projects/budgetkey/src/app/common-components/auth/auth.component.html b/projects/budgetkey/src/app/common-components/auth/auth.component.html
index d1d2b74..a8f4aa3 100644
--- a/projects/budgetkey/src/app/common-components/auth/auth.component.html
+++ b/projects/budgetkey/src/app/common-components/auth/auth.component.html
@@ -16,8 +16,9 @@
             </svg>
         </div>
         <div *ngIf="user && user.authenticated" class='menu'>
-            <a class='menu-line' (activated)="profile()" clickOnReturn>התראות שמורות</a>
-            <a class='menu-line' (activated)="profile()" clickOnReturn>פרופיל אישי</a>
+            <a class='menu-line' (activated)="profile()" *ngIf='hasProfile' clickOnReturn>התראות שמורות</a>
+            <a class='menu-line' (activated)="myLists()" clickOnReturn *ngIf='lists.curatedLists().length > 0'>הרשימות שלי</a>
+            <!-- <a class='menu-line' (activated)="profile()" clickOnReturn>פרופיל אישי</a> -->
             <a class='menu-line' (activated)="logout()" clickOnReturn>התנתקות</a>
         </div>
 </div>
diff --git a/projects/budgetkey/src/app/common-components/auth/auth.component.less b/projects/budgetkey/src/app/common-components/auth/auth.component.less
index deb48d1..36de826 100644
--- a/projects/budgetkey/src/app/common-components/auth/auth.component.less
+++ b/projects/budgetkey/src/app/common-components/auth/auth.component.less
@@ -46,7 +46,7 @@
     background-color: #FFFFFF;
     box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
     display: none;
-    z-index: 10;
+    z-index: 100;
 }
 
 .widget:hover .menu, .widget:focus-within .menu {
diff --git a/projects/budgetkey/src/app/common-components/auth/auth.component.ts b/projects/budgetkey/src/app/common-components/auth/auth.component.ts
index 27d6dff..5cf68c2 100644
--- a/projects/budgetkey/src/app/common-components/auth/auth.component.ts
+++ b/projects/budgetkey/src/app/common-components/auth/auth.component.ts
@@ -1,34 +1,36 @@
 import {
+    AfterViewInit,
   Component, Input, OnInit
 } from '@angular/core';
 import { AuthService } from './auth.service';
 import { Observable } from 'rxjs';
 import { PlatformService } from '../platform.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Router } from '@angular/router';
+import { ListsService } from '../services/lists.service';
 
-
+@UntilDestroy()
 @Component({
     selector: 'app-auth',
     templateUrl: './auth.component.html',
     styleUrls: ['./auth.component.less']
 })
-export class AuthComponent implements OnInit {
+export class AuthComponent implements AfterViewInit {
     public user: any;
-    private next: string;
 
     @Input() theme: any;
 
-    constructor(private auth: AuthService, private ps: PlatformService) {}
-
-    ngOnInit() {
-        this.ps.browser(() => {
-            this.next = document.location.href;
-            this.setUser(this.auth.check(this.next));
+    constructor(private auth: AuthService, private ps: PlatformService, private router: Router, public lists: ListsService) {
+        this.auth.getUser().pipe(
+            untilDestroyed(this)
+        ).subscribe((user) => {
+            this.user = user;
         });
     }
 
-    setUser(o: Observable<any>) {
-        o.subscribe((user: any) => {
-            this.user = user;
+    ngAfterViewInit() {
+        this.ps.browser(() => {
+            this.auth.check().subscribe();
         });
     }
 
@@ -36,11 +38,10 @@ export class AuthComponent implements OnInit {
         if (this.user && this.user.providers) {
             const href = this.user.providers.google || this.user.providers.github;
             if (href && href.url) {
-                if (document.location.href === this.next) {
+                if (document.location.href === this.auth.getNext()) {
                     window.location.href = href.url;
                 } else {
-                    this.next = document.location.href;
-                    this.auth.check(this.next)
+                    this.auth.check()
                         .subscribe((user) => {
                             this.user = user;
                             this.login();
@@ -51,16 +52,22 @@ export class AuthComponent implements OnInit {
     }
 
     logout() {
-        this.auth.logout(document.location.href);
+        this.auth.logout().subscribe((user) => {
+            console.log('logged out!');
+        });
     }
 
+    get hasProfile() {
+        return this.auth?.authConfig?.profilePagePath || null;
+    }
+    
     profile() {
         if (this.auth.authConfig.profilePagePath) {
-            let params = '';
-            if (this.theme && this.theme.themeId) {
-                params = '?theme=' + this.theme.themeId;
-            }
-            window.location.href = this.auth.authConfig.profilePagePath + params;
+            this.router.navigate(this.auth.authConfig.profilePagePath, { queryParamsHandling: 'preserve' });
         }
     }
+
+    myLists() {
+        this.router.navigate(['/l', this.user.profile.id], { queryParamsHandling: 'preserve' });
+    }
 }
diff --git a/projects/budgetkey/src/app/common-components/auth/auth.service.ts b/projects/budgetkey/src/app/common-components/auth/auth.service.ts
index aa9bb65..9899677 100644
--- a/projects/budgetkey/src/app/common-components/auth/auth.service.ts
+++ b/projects/budgetkey/src/app/common-components/auth/auth.service.ts
@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, ReplaySubject, tap } from 'rxjs';
+import { Observable, ReplaySubject, tap, timer } from 'rxjs';
 import { filter, first, switchMap } from 'rxjs/operators';
+import { Location } from '@angular/common';
+import { PlatformService } from '../platform.service';
 
 @Injectable()
 export class AuthService {
@@ -10,15 +12,16 @@ export class AuthService {
     private jwtQueryParam: string;
     private user = new ReplaySubject<any>();
     private jwt = new ReplaySubject<any>();
+    private next: string | null = null;
 
     public authConfig = {
         authServerUrl: 'https://next.obudget.org',
         jwtLocalStorageKey: 'jwt',
         jwtQueryParam: 'jwt',
-        profilePagePath: '/p/'
+        profilePagePath: ['/p']
     };    
 
-    constructor(private http: HttpClient) {
+    constructor(private http: HttpClient, private platform: PlatformService) {
         this.authServerUrl = this.authConfig.authServerUrl;
         this.jwtLocalStorageKey = this.authConfig.jwtLocalStorageKey;
         this.jwtQueryParam = this.authConfig.jwtQueryParam;
@@ -78,30 +81,41 @@ export class AuthService {
         return this.jwt;
     }
 
-    check(next: string): Observable<any> {
+    public getNext(): string | null {
+        return this.next;
+    }
+
+    check(next_?: string): Observable<any> {
+        const next = next_ || window.location.href;
         const jwt = this.resolveToken();
+        const headers: any = {};
         if (jwt) {
             this.setToken(jwt);
+            headers['auth-token'] = jwt;
         }
         return this.http
-            .get(this.authServerUrl + '/auth/check?jwt=' + (jwt ? jwt : '') + '&next=' + encodeURIComponent(next))
+            .get(`${this.authServerUrl}/auth/check?next=${encodeURIComponent(next)}`, { headers })
             .pipe(
-                tap((user) => this.user.next(user)),
+                tap((user) => {
+                    this.next = next;
+                    this.user.next(user);
+                }),
             );
     }
 
-    logout(next: string): Observable<any> {
+    logout(): Observable<any> {
         this.deleteToken();
-        return this.check(next);
+        return this.check();
     }
 
     permission(service: string): Observable<any> {
         return this.jwt
             .pipe(
                 filter((token) => token !== null),
-                switchMap((token) =>
-                   this.http.get(this.authServerUrl + '/auth/authorize?service=' + service + '&jwt=' + token)
-                ),
+                switchMap((token) => {
+                    const headers = { 'auth-token': token };
+                    return this.http.get(`${this.authServerUrl}/auth/authorize?service=${service}`, { headers });
+                }),
                 first()
             );
     }
diff --git a/projects/budgetkey/src/app/common-components/bk-tooltip.less b/projects/budgetkey/src/app/common-components/bk-tooltip.less
index 505e96b..dca9649 100644
--- a/projects/budgetkey/src/app/common-components/bk-tooltip.less
+++ b/projects/budgetkey/src/app/common-components/bk-tooltip.less
@@ -1,3 +1,5 @@
+@import '../../common.less';
+
 .bk-tooltip-anchor {
     position: relative;
     display: inline;
@@ -8,21 +10,31 @@
     span.bk-tooltip {
         position: absolute;
         display: none;
-        width: 300px;
+        width: max-content;
+        max-width: 300px;
         color: #FFFFFF;
-        background: #434343;
+        background: @color-gray-700;
         line-height: 18px;
-        text-align: center;
         visibility: hidden;
-        border-radius: 3px;
+        border-radius: 4px;
+
+        text-align: right;
         font-size: 14px;
+        line-height: 17x;
         font-weight: 300;
-        padding: 10px;
-        text-align: justify;
-        font-family: "Abraham TRIAL", "Alef Hebrew", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+
+        &.bk-bigger {
+            text-align: center;
+            font-size: 16px;
+            line-height: 20px;
+            font-weight: 400;    
+        }
+        padding: 4px 8px;
+
+        .font-abraham;
 
         @media only screen and (max-width: 600px)  {
-            width: 150px;
+            max-width: 150px;
             font-size: 10px;
             line-height: 12px;
             padding: 5px;
@@ -31,11 +43,10 @@
         &:after {
             content: '';
             position: absolute;
-            bottom: 100%;
-            left: 95%;
-            margin-left: -5px;
+            top: -5px;
+            right: 5px;
             width: 0; height: 0;
-            border-bottom: 5px solid #434343;
+            border-bottom: 5px solid @color-gray-700;
             border-right: 5px solid transparent;
             border-left: 5px solid transparent;
 
@@ -46,26 +57,37 @@
         
         &.bk-align-left {        
             &:after {
-                left: 5%;
+                left: 5px;
+                right: auto;
             }
         }
 
+        &.bk-align-top {        
+            &:after {
+                bottom: -5px;
+                top: auto;
+                transform: rotate(180deg);
+            }
+        }
     }
 
     &:hover .bk-tooltip {
         visibility: visible;
         display: inherit;
-        top: ~"calc(100% + 5px)";
-        left: 50%;
-        margin-left: -280px;
+        bottom: -4px;
+        right: calc(50% ~'-' 10px);
+        transform: translateY(100%);
         z-index: 999;    
 
-        @media only screen and (max-width: 600px)  {
-            margin-left: -75px;
+        &.bk-align-left {        
+            left: 4px;
+            right: auto;
         }
 
-        &.bk-align-left {        
-            margin-left: -10px;
+        &.bk-align-top {        
+            top: -4px;
+            bottom: auto;
+            transform: translateY(-100%);
         }
     }
 
@@ -76,8 +98,8 @@
         position: relative;
     }
     
-    &.img:hover .bk-tooltip {
-        top: ~"calc(100% + 0.75em)";
-        left: ~"calc(50% - 0.32em)";
-    }
+    // &.img:hover .bk-tooltip {
+    //     top: ~"calc(100% + 0.75em)";
+    //     left: ~"calc(50% - 0.32em)";
+    // }
 }
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/common-components/common-components.module.ts b/projects/budgetkey/src/app/common-components/common-components.module.ts
index 64fc633..a8bddf1 100644
--- a/projects/budgetkey/src/app/common-components/common-components.module.ts
+++ b/projects/budgetkey/src/app/common-components/common-components.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
-import { AppContainerComponent } from './components/app-container/app-container.component';
 import { BkHeaderComponent } from './components/header/bk-header.component';
 import { BkFooterComponent } from './components/footer/bk-footer.component';
 import { BkSearchBar } from './components/searchbar/bk-search-bar.component';
@@ -20,6 +19,8 @@ import { AuthComponent } from './auth/auth.component';
 import { AuthService } from './auth/auth.service';
 import { RouterModule } from '@angular/router';
 import { SeoService } from './seo.service';
+import { LayoutService } from './layout.service';
+import { WindowService } from './window.service';
 
 /**
  * Created by adam on 27/12/2016.
@@ -32,7 +33,6 @@ import { SeoService } from './seo.service';
     RouterModule
   ],
   declarations: [
-    AppContainerComponent,
     BkHeaderComponent,
     BkFooterComponent,
     BkSearchBar,
@@ -41,17 +41,18 @@ import { SeoService } from './seo.service';
     BkSubscriptionManager,
     ModalComponent,
     ClickOnReturnDirective,
-    AuthComponent
+    AuthComponent,
   ],
   providers: [
     ListsService,
     GlobalSettingsService,
     PlatformService,
     AuthService,
-    SeoService
+    SeoService,
+    LayoutService,
+    WindowService
   ],
   exports: [
-    AppContainerComponent,
     BkHeaderComponent,
     BkFooterComponent,
     BkSearchBar,
diff --git a/projects/budgetkey/src/app/common-components/common.less b/projects/budgetkey/src/app/common-components/common.less
deleted file mode 100644
index edd0169..0000000
--- a/projects/budgetkey/src/app/common-components/common.less
+++ /dev/null
@@ -1,4 +0,0 @@
-@headerHeight: 56px;
-@footerHeight: 333px;
-
-@textColor: #3C4948;
diff --git a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.html b/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.html
deleted file mode 100644
index 2dcb2f8..0000000
--- a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<ng-container *ngIf='configured'>
-    <app-bk-header *ngIf="showHeader"
-        [showSearchBar]="showSearchBar"
-        [showLanguages]="showLanguages"
-    ></app-bk-header>
-    <div class="app" id='main'>
-        <ng-content></ng-content>
-    </div>
-    <app-bk-footer *ngIf="showFooter" [helpWidget]='helpWidget'></app-bk-footer>
-</ng-container>
diff --git a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.less b/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.less
deleted file mode 100644
index 148268c..0000000
--- a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.less
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '../../common.less';
-
-:host {
-  display: flex;
-  flex-flow: column;
-  min-height: 100vh;
-  
-  app-bk-header {
-    flex: 0 0 auto;
-  }
-  
-  .app {
-    flex: 1 0 auto;    
-    direction: rtl;
-    min-height: ~"calc(100vh - 333px - 64px)";
-    margin-top: 9px; //calc(9 - @headerHeight);
-    margin-bottom: 6px;  
-    width: 100%;
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-  }  
-  
-}
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.ts b/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.ts
deleted file mode 100644
index 5e6af6e..0000000
--- a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import {Component, ViewEncapsulation, Input} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { GlobalSettingsService } from '../../global-settings.service';
-import { distinct, distinctUntilChanged, map, switchMap } from 'rxjs';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { PlatformService } from '../../platform.service';
-
-@UntilDestroy()
-@Component({
-    selector: 'app-container',
-    templateUrl: './app-container.component.html',
-    styleUrls: ['./app-container.component.less'],
-})
-export class AppContainerComponent {
-    @Input() showHeader = true;
-    @Input() showFooter = true;
-    @Input() showSearchBar = false;
-    @Input() showLanguages = false;
-    @Input() helpWidget = true;
-
-    configured = false;
-
-    constructor(private http: HttpClient, private route: ActivatedRoute, private globalSettings: GlobalSettingsService, private ps: PlatformService) {
-        globalSettings.ready.subscribe(() => {
-            this.configured = true;
-        });
-        globalSettings.init(this, route);
-    }
-}
diff --git a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html
index dea0f49..6b26e31 100644
--- a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html
+++ b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html
@@ -1,13 +1,14 @@
 <header>
     <a class="skip-to-content" [routerLink]="['.']" [fragment]='"main"' [queryParamsHandling]='"preserve"'>דלג לתוכן עיקרי</a>
     <div class="logo">
-      <a [href]="globalSettings.theme.siteUrl"  aria-label='homepage' [style.background-image]='"url(assets/common/img/" + globalSettings.theme.siteLogo + ")"'>
+      <a [routerLink]='["/"]'  aria-label='homepage' [style.background-image]='"url(assets/common/img/" + globalSettings.theme.siteLogo + ")"'>
       </a>
     </div>
-    <div *ngIf="showSearchBar" class="search-div">
+    <div *ngIf="showSearchBar" class="search-div layout-desktop">
       <app-bk-search-bar [fake]='true'></app-bk-search-bar>
     </div>
-    <div class="menu-links">
+    <div class='mobile-separator'></div>
+    <div class="menu-links layout-desktop">
       <ng-container *ngFor="let link of globalSettings.theme.headerLinks">
         <a [href]="link.href" [innerHtml]='link.title' [target]='link.href.indexOf("http") === 0 ? "_blank" : null' clickOnReturn></a>
       </ng-container>
@@ -17,14 +18,37 @@
         <a (activated)='switchLang("he")' clickOnReturn>עב</a>
       </ng-container>
     </div>
-    <div *ngIf="showSearchBar" class="collapsed-search" (click)='doSearch()'>
+    <div *ngIf="showSearchBar" class="collapsed-search layout-mobile" (click)='doSearch()'>
       <img class="search-icon" src="/assets/common/img/search-glass-white.svg">
     </div>
-    <div class="collapsed-menu" [ngClass]="{'with-search': showSearchBar}">
+    <div *ngIf='showShare' class="collapsed-share" [class.visible]='showShareMenu()' (click)='openShareMenu()'>
+      <div class="share-icon"></div>
+      <div class='menu'>
+        <a class='menu-line' [href]='seo.twitterShare' target="_blank">
+          <span class='icon twitter'></span>
+          שיתוף בטוויטר
+        </a>
+        <a class='menu-line' [href]='seo.fbShare' target="_blank">
+          <span class='icon facebook'></span>
+          שיתוף בפייסבוק
+        </a>
+        <a class='menu-line' [href]='seo.whatsappShare' target="_blank">
+          <span class='icon whatsapp'></span>
+          שיתוף בוואטסאפ
+        </a>
+        <a class='menu-line layout-mobile' (activated)="seo.mobileShare()" clickOnReturn>
+          <span class='icon mobile-share'></span>
+          שיתוף אחר
+        </a>
+      </div>
+    </div>
+    <div class="collapsed-menu layout-mobile" [class.with-search]='showSearchBar' [class.visible]='showCollapsedMenu()' (click)='openCollapsedMenu()'>
       <i class="glyphicon glyphicon-menu-hamburger"></i>
       <div class='menu'>
         <ng-container *ngFor="let link of globalSettings.theme.headerLinks">
-          <a class='menu-line' (activated)="doNavigate(link.href)" [innerHtml]='link.title' clickOnReturn></a>
+          <a class='menu-line' (activated)="doNavigate(link.href)" clickOnReturn>
+            <span [innerHtml]='link.title'></span>
+          </a>
         </ng-container>
       </div>
     </div>
diff --git a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.less b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.less
index 131eeac..c0a7204 100644
--- a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.less
+++ b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.less
@@ -1,4 +1,4 @@
-@import '../../common.less';
+@import '../../../../common.less';
 
 header {
   height: @headerHeight;
@@ -8,6 +8,13 @@ header {
   align-items: center;
   background-color: #f8f8f8;
   border-color: #e7e7e7;
+  gap: 24px;
+  .desktop({
+    padding: 0 24px;
+  });
+  .mobile({
+    padding: 0 16px;
+  });
 
   .skip-to-content {
     position: absolute;
@@ -27,10 +34,10 @@ header {
   }
 
   div.logo {
+    flex: 0 0 auto;
     width: 80px;
     height: 100%;
     padding: 2px 0;
-    margin-right: 2%;
 
     a {
       width: 100%;
@@ -43,7 +50,6 @@ header {
   }
 
   div.search-div{
-    margin-right: 5%;
     padding: 0;
     flex: 1;
 
@@ -52,17 +58,16 @@ header {
     } 
   }
   div.menu-links {
-    margin-right: auto;
     display: flex;
     align-items: center;
     flex-flow: row;
     justify-content: left;
-    margin-left: 40px;
+    gap: 40px;
 
     a {
-      margin-right: 40px;
       cursor: pointer;
       white-space: nowrap;
+      text-align: center;
 
       &, &:hover, &:visited {
         color: #192841;
@@ -70,9 +75,13 @@ header {
     }
   }
 
-  div.collapsed-search {
-    display: none;
+  .mobile-separator {
     margin-right: auto;
+    margin-left: -24px;
+  }
+
+  div.collapsed-search {
+    flex: 0 0 auto;
     width: 34px;
     height: 34px;
     border-radius: 17px;
@@ -83,34 +92,35 @@ header {
     cursor: pointer;
   }
 
-  div.collapsed-menu {
-    display: none;
+  div.collapsed-menu, div.collapsed-share {
+    flex: 0 0 auto;
     position: relative;
-    margin-right: auto;
-    margin-left: 10px;
     cursor: pointer;
 
-    &.with-search {
-      margin-right: 10px;
-    }
+    // &.with-search {
+    //   margin-right: 10px;
+    // }
 
     &:hover .menu {
       display: flex;
     }
+    &.visible .menu {
+      display: flex;
+    }
 
     .menu {
       position: absolute;
-      top: 16px;
-      right: -114px;
+      top: 32px;
+      right: -100px;
       flex-flow: column;
       align-items: flex-start;
-      width: 130px;
+      width: 150px;
       border: 1px solid #EEEEEE;
       border-radius: 4px;
       background-color: #FFFFFF;
       box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
       display: none;
-      z-index: 10;
+      z-index: 100;
 
       
       .menu-line {
@@ -118,8 +128,12 @@ header {
         padding: 6px 10px;
         width: 100%;
         color: #505050;
-        font-family: "Abraham TRIAL";	
         font-size: 14px;
+        .font-abraham;
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        gap: 8px;
       }
       
       .menu-line:hover {
@@ -130,9 +144,66 @@ header {
     }
   }
 
+  div.collapsed-share {
+    width: 32px;
+    height: 32px;
+    .share-icon {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      .background-image;
+      width: 32px;
+      height: 32px;
+      background-size: 32px;
+      background-image: url(../../../../assets/common/img/icon-share-main.svg);
+    }
+    .menu {
+      top: 32px;
+      right: 16px;
+      transform: translateX(50%);
+
+      .menu-line {
+        .icon {
+          .background-image;
+          width: 24px;
+          height: 24px;
+          background-size: 24px;
+          background-image: url(../../../../assets/common/img/icon-share-main.svg);
+
+          &.twitter {
+            background-image: url(../../../../assets/common/img/icon-share-twitter.svg);
+          }
+          &.facebook {
+            background-image: url(../../../../assets/common/img/icon-share-facebook.svg);
+          }
+          &.whatsapp {
+            background-image: url(../../../../assets/common/img/icon-share-whatsapp.svg);
+          }
+          &.mobile-share {
+            background-image: url(../../../../assets/common/img/icon-share-mobile-share.svg);
+          }
+        }
+
+        &:hover {
+          .icon {
+            &.twitter {
+              background-image: url(../../../../assets/common/img/icon-share-twitter-hover.svg);
+            }
+            &.facebook {
+              background-image: url(../../../../assets/common/img/icon-share-facebook-hover.svg);
+            }
+            &.whatsapp {
+              background-image: url(../../../../assets/common/img/icon-share-whatsapp-hover.svg);
+            }
+            &.mobile-share {
+              background-image: url(../../../../assets/common/img/icon-share-mobile-share-hover.svg);
+            }            
+          }
+        }
+      }
+    }
+  }
   div.auth-widget{
-    margin-right: 5px;
-    margin-left: 2%;
     padding: 0;
     display: block;
 
@@ -140,22 +211,4 @@ header {
       color: #505050 !important;
     }
   }
-
-  @media only screen and (max-width: 799px) {
-    div.menu-links {
-      display: none;
-    }
-    div.collapsed-menu {
-      display: inherit;
-      flex-grow: 0;
-    }
-    div.collapsed-search {
-      display: block;
-      flex-grow: 0;
-    }
-    div.search-div {
-      display: none;
-    }
-  }
-
 }
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.ts b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.ts
index c0487b6..240d672 100644
--- a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.ts
+++ b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.ts
@@ -1,6 +1,11 @@
-import {Component, Inject, Input} from '@angular/core';
+import {Component, Inject, Input, signal} from '@angular/core';
 import { GlobalSettingsService } from '../../global-settings.service';
 import { Router } from '@angular/router';
+import { platform } from 'os';
+import { PlatformService } from '../../platform.service';
+import { WindowService } from '../../window.service';
+import { EMPTY, Subscription, fromEvent, switchMap, take, timer } from 'rxjs';
+import { SeoService } from '../../seo.service';
 
 @Component({
     selector: 'app-bk-header',
@@ -9,39 +14,78 @@ import { Router } from '@angular/router';
 })
 
 export class BkHeaderComponent {
-    @Input() showSearchBar = false;
-    @Input() showLanguages = false;
-    public showAuth = false;
+  @Input() showSearchBar = false;
+  @Input() showLanguages = false;
+  @Input() showShare = true;
+  public showAuth = false;
+  public showCollapsedMenu = signal(false);
+  public showShareMenu = signal(false);
+  collapseMenuSub: Subscription | null = null;
+  shareMenuSub: Subscription | null = null;
 
-    constructor (public globalSettings: GlobalSettingsService, private router: Router) {
-      this.showAuth = !globalSettings.theme.disableAuth;
-    }
+  constructor (public globalSettings: GlobalSettingsService, private router: Router, private platform: PlatformService, private window: WindowService, public seo: SeoService) {
+    this.showAuth = !globalSettings.theme.disableAuth && this.platform.browser();
+  }
 
-    doSearch(href?: string) {
-      const themeId = this.globalSettings.theme.themeId;
-      let _href = href || `https://next.obudget.org/s/?theme=${themeId}&lang=${this.globalSettings.lang}`;
-      this.doNavigateURL(_href, '_self');
-    }
+  doSearch(href?: string) {
+    const themeId = this.globalSettings.theme.themeId;
+    let _href = href || `https://next.obudget.org/s/?theme=${themeId}&lang=${this.globalSettings.lang}`;
+    this.doNavigateURL(_href, '_self');
+  }
 
-    switchLang(lang: string) {
-      const param = 'lang=' + lang;
-      let search = window.location.search;
-      search = search.replace(RegExp('lang=[a-z]{2}'), param);
-      if (search.indexOf(param) < 0) {
-        if (search[0] === '?') {
-          search += '&' + param;
-        } else {
-          search = '?' + param;
-        }
+  switchLang(lang: string) {
+    const param = 'lang=' + lang;
+    let search = window.location.search;
+    search = search.replace(RegExp('lang=[a-z]{2}'), param);
+    if (search.indexOf(param) < 0) {
+      if (search[0] === '?') {
+        search += '&' + param;
+      } else {
+        search = '?' + param;
       }
-      window.location.search = search;
     }
+    window.location.search = search;
+  }
 
-    doNavigate(href: string) {
-      this.doNavigateURL(href, '_blank');
-    }
+  doNavigate(href: string) {
+    this.doNavigateURL(href, '_blank');
+  }
+
+  doNavigateURL(href: string, target: string) {
+    window.open(href, target);
+  }
 
-    doNavigateURL(href: string, target: string) {
-      window.open(href, target);
+  openCollapsedMenu() {
+    if (this.showCollapsedMenu()) {
+      this.showCollapsedMenu.set(false);
+      return;
+    }
+    this.showCollapsedMenu.set(true);
+    if (this.window._) {
+      this.collapseMenuSub?.unsubscribe();
+      this.collapseMenuSub = timer(100).pipe(
+        switchMap(() => this.window._ ? fromEvent(this.window._, 'click') : EMPTY),
+        take(1),
+      ).subscribe(() => {
+        this.showCollapsedMenu.set(false);
+      });
+    }
+  }
+  
+  openShareMenu() {
+    if (this.showShareMenu()) {
+      this.showShareMenu.set(false);
+      return;
+    }
+    this.showShareMenu.set(true);
+    if (this.window._) {
+      this.shareMenuSub?.unsubscribe();
+      this.shareMenuSub = timer(100).pipe(
+        switchMap(() => this.window._ ? fromEvent(this.window._, 'click') : EMPTY),
+        take(1),
+      ).subscribe(() => {
+        this.showShareMenu.set(false);
+      });
     }
+  }
 }
diff --git a/projects/budgetkey/src/app/common-components/components/modal/modal.component.html b/projects/budgetkey/src/app/common-components/components/modal/modal.component.html
index 415b25c..04a9902 100644
--- a/projects/budgetkey/src/app/common-components/components/modal/modal.component.html
+++ b/projects/budgetkey/src/app/common-components/components/modal/modal.component.html
@@ -1,13 +1,13 @@
 <div class="bkmodal-bg">
-    <div class="bkmodal-dialog">
-      <div class="bkmodal-content">
-          <button type="button" class="close" (click)="_close()">&times;</button>
-          <div class="bkmodal-header" *ngIf='title'>
-            <h4 class="modal-title">{{title}}</h4>
-          </div>
-          <div class="bkmodal-body">
-            <ng-content></ng-content>
-          </div>
-        </div>
+  <div class="bkmodal-dialog">
+    <div class="bkmodal-content" [class.standard]='standardLayout'>
+      <button *ngIf='standardLayout' type="button" class="close" (click)="_close()">&times;</button>
+      <div  *ngIf='standardLayout && title' class='bkmodal-header'>
+        <h4 class="modal-title">{{title}}</h4>
+      </div>
+      <div [class.bkmodal-body]='standardLayout'>
+        <ng-content></ng-content>
+      </div>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+</div>
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/common-components/components/modal/modal.component.less b/projects/budgetkey/src/app/common-components/components/modal/modal.component.less
index ef5280d..84deaa0 100644
--- a/projects/budgetkey/src/app/common-components/components/modal/modal.component.less
+++ b/projects/budgetkey/src/app/common-components/components/modal/modal.component.less
@@ -1,4 +1,7 @@
-.bkmodal-bg {
+:host {
+  position: relative;
+  
+  .bkmodal-bg {
     position: fixed;
     z-index: 10000;
     top: 0;
@@ -13,8 +16,7 @@
   }
 
   .bkmodal-dialog {
-
-    width: 60%;
+    width: fit-content;
     max-width: 600px;
     background: white;
     border: none;
@@ -25,7 +27,9 @@
 
   .bkmodal-content {
       position: relative;
-      padding: 100px;
+      &.standard {
+        padding: 100px;        
+      }
   }
 
   .close {
@@ -54,10 +58,13 @@
 
   @media only screen and (max-width: 600px)  {
     .bkmodal-content {
-      padding: 20px;
+      &.standard {
+        padding: 20px;        
+      }
     }
 
     .bkmodal-dialog {
       width: 100%;
     }
-  }
\ No newline at end of file
+  }
+}
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/common-components/components/modal/modal.component.ts b/projects/budgetkey/src/app/common-components/components/modal/modal.component.ts
index 5d0bf4a..95c00f7 100644
--- a/projects/budgetkey/src/app/common-components/components/modal/modal.component.ts
+++ b/projects/budgetkey/src/app/common-components/components/modal/modal.component.ts
@@ -3,12 +3,12 @@ import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angu
 
 @Component({
     selector: 'app-modal',
-    encapsulation: ViewEncapsulation.None,
     templateUrl: './modal.component.html',
     styleUrls: ['./modal.component.less'],
 })
 export class ModalComponent {
   @Input() title: string;
+  @Input() standardLayout = true;
   @Output() close = new EventEmitter();
 
   constructor() {
diff --git a/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.html b/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.html
index ee1d3b8..b5e22a4 100644
--- a/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.html
+++ b/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.html
@@ -66,6 +66,10 @@
 
 </div>
 
-<a class='search-box fake' *ngIf='fake' [href]='externalUrl' clickOnReturn>
+<a class='search-box fake' *ngIf='fake' 
+   [href]='externalUrlHref ? externalUrl : null'
+   [routerLink]='externalUrlHref ? null : ["/s"]'
+   queryParamsHandling='merge'
+   clickOnReturn>
     <span>חיפוש באתר...</span>
 </a>
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.less b/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.less
index ba4508f..783a088 100644
--- a/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.less
+++ b/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.less
@@ -242,7 +242,7 @@ input {
 
 .subscribe-button {
     position: absolute;
-    z-index: 3;
+    z-index: 11;
     left: 11px;
     top: 11px;
 }
@@ -258,6 +258,7 @@ input {
     align-items: center;
     justify-content: flex-start;
     padding: 0 48px;
+    padding-left: 8px;
     background-color: #fff;
     font-family: "Abraham TRIAL";
     font-size: 16px;
@@ -266,9 +267,17 @@ input {
     color: #000000;
     border: 1px solid #FF5A5F;
     text-decoration: none;
-
+    white-space: nowrap;
+    
     &:focus, &:hover, &:visited {
         color: #000000;
         text-decoration: underline;
     }
+
+    span {
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.ts b/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.ts
index 1382a8a..9bfce83 100644
--- a/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.ts
+++ b/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.ts
@@ -78,12 +78,16 @@ export class BkSearchBar implements OnChanges, AfterViewInit, OnInit {
   public dropdownOpen = false;
   public showSubscribe = false;
   public externalUrl: string;
+  public externalUrlHref: boolean;
   public forcedPlaceholder: string;
   
   constructor (public globalSettings: GlobalSettingsService, private ps: PlatformService) {
   }
   
-  public static buildExternalUrl(searchTerm: string, searchType: SearchBarType, extraUrlParams: string | null, theme: any | null, lang: string | null, hostname: string) {
+  public static buildExternalUrl(
+    searchTerm: string, searchType: SearchBarType, extraUrlParams: string | null, 
+    theme: any | null, lang: string | null, hostname: string
+  ): [string, boolean] {
     let urlParams =
     'q=' + encodeURIComponent(searchTerm) +
     '&dd=' + searchType.id;
@@ -99,10 +103,10 @@ export class BkSearchBar implements OnChanges, AfterViewInit, OnInit {
     }
     urlParams = params.toString();
     const url = '/s/?' + urlParams;
-    if (hostname !== 'next.obudget.org' && hostname.indexOf('localhost') !== 0 && hostname.indexOf('whiletrue') < 0) {
-      return 'https://next.obudget.org' + url;
+    if (hostname !== 'next.obudget.org' && hostname.indexOf('localhost') !== 0 && hostname.indexOf('whiletrue') < 0 && hostname.indexOf('127.0.0.1') !== 0) {
+      return ['https://next.obudget.org' + url, true];
     } else {
-      return url;
+      return [url, false];
     }
   }
   
@@ -112,7 +116,7 @@ export class BkSearchBar implements OnChanges, AfterViewInit, OnInit {
   
   private calcExternalUrl() {
     if (this.selectedSearchType) {
-      this.externalUrl = BkSearchBar.buildExternalUrl(
+      [this.externalUrl, this.externalUrlHref] = BkSearchBar.buildExternalUrl(
         this.searchTerm,
         this.selectedSearchType,
         this.externalUrlParams,
diff --git a/projects/budgetkey/src/app/common-components/components/subcsription-manager/bk-subscription-manager.component.less b/projects/budgetkey/src/app/common-components/components/subcsription-manager/bk-subscription-manager.component.less
index ae81296..b568cc5 100644
--- a/projects/budgetkey/src/app/common-components/components/subcsription-manager/bk-subscription-manager.component.less
+++ b/projects/budgetkey/src/app/common-components/components/subcsription-manager/bk-subscription-manager.component.less
@@ -1,28 +1,36 @@
-.subscription-modal-contents {
+:host {
+    width: 130px;
+    height: 25px;
+    overflow: visible;
     display: flex;
     flex-flow: column;
-    align-items: center;
-}
-.title {
-    font-family: "Miriam Libre";
-    font-size: 22px;
-    font-weight: bold;
-    color: #FF5A5F;
-    margin-bottom: 30px;
-}
-p {
-    text-align: center;
-    margin-top: 30px;
-}
-.connect {
-    display: block;
-    pointer-events: none;
-    color: #FFFFFF;
-    font-family: "Miriam Libre";
-    font-size: 14px;
-    font-weight: bold;
-    letter-spacing: 0.4px;
-    margin-top: -33px;
-    margin-right: -33px;
-    margin-bottom: 33px;
+
+    .subscription-modal-contents {
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+    }
+    .title {
+        font-family: "Miriam Libre";
+        font-size: 22px;
+        font-weight: bold;
+        color: #FF5A5F;
+        margin-bottom: 30px;
+    }
+    p {
+        text-align: center;
+        margin-top: 30px;
+    }
+    .connect {
+        display: block;
+        pointer-events: none;
+        color: #FFFFFF;
+        font-family: "Miriam Libre";
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 0.4px;
+        margin-top: -33px;
+        margin-right: -33px;
+        margin-bottom: 33px;
+    }    
 }
diff --git a/projects/budgetkey/src/app/common-components/components/subcsription-manager/bk-subscription-manager.component.ts b/projects/budgetkey/src/app/common-components/components/subcsription-manager/bk-subscription-manager.component.ts
index 13ac266..cce4f6f 100644
--- a/projects/budgetkey/src/app/common-components/components/subcsription-manager/bk-subscription-manager.component.ts
+++ b/projects/budgetkey/src/app/common-components/components/subcsription-manager/bk-subscription-manager.component.ts
@@ -29,7 +29,9 @@ export class BkSubscriptionManager implements OnInit {
     ps.browser(() => {
       fromEvent(window, 'message').subscribe((evt) => {
         console.log('GOT Message', evt);
-        this.auth.check(window.location.href);
+        if (this.loginModal) {
+          this.auth.check();
+        }
         this.loginModal = false;
       });    
     });
@@ -113,7 +115,7 @@ export class BkSubscriptionManager implements OnInit {
           if (this.isLoggedIn) {
             this.lists.get(SEARCHES_LIST)
               .subscribe((lc: ListContents) => {
-                for (const item of lc.items) {
+                for (const item of (lc.items || [])) {
                   const key = this.urlKey(item.url);
                   if (key) {
                     this.subscribedUrls[key] = item.id;
diff --git a/projects/budgetkey/src/app/common-components/components/subscribe-star/bk-subscribe-star.component.html b/projects/budgetkey/src/app/common-components/components/subscribe-star/bk-subscribe-star.component.html
index e855c8b..dcb136f 100644
--- a/projects/budgetkey/src/app/common-components/components/subscribe-star/bk-subscribe-star.component.html
+++ b/projects/budgetkey/src/app/common-components/components/subscribe-star/bk-subscribe-star.component.html
@@ -4,7 +4,8 @@
     />
 </ng-container>
 <ng-container *ngIf='!active || !enabled'>
-    <span [class.faded]='!enabled'
+    <span class='layout-desktop'
+          [class.faded]='!enabled'
           (click)='click($event)'
     >הרשמו לעדכונים</span>
     <img src='assets/common/img/star-inactive.svg'
diff --git a/projects/budgetkey/src/app/common-components/components/subscribe-star/bk-subscribe-star.component.less b/projects/budgetkey/src/app/common-components/components/subscribe-star/bk-subscribe-star.component.less
index 2180a7e..cd5af12 100644
--- a/projects/budgetkey/src/app/common-components/components/subscribe-star/bk-subscribe-star.component.less
+++ b/projects/budgetkey/src/app/common-components/components/subscribe-star/bk-subscribe-star.component.less
@@ -1,7 +1,11 @@
+@import '../../../../common.less';
+
 :host {
     display: flex;
     flex-flow: row;
     align-items: center;
+    justify-content: flex-end;
+
     span {
         color: #FF5A5F;
         margin-left: 10px;
diff --git a/projects/budgetkey/src/app/common-components/layout.service.ts b/projects/budgetkey/src/app/common-components/layout.service.ts
new file mode 100644
index 0000000..8dbfa26
--- /dev/null
+++ b/projects/budgetkey/src/app/common-components/layout.service.ts
@@ -0,0 +1,30 @@
+import { Injectable, signal } from '@angular/core';
+import { WindowService } from './window.service';
+import { fromEvent } from 'rxjs';
+
+@Injectable()
+export class LayoutService {
+
+  width = signal<number>(0);
+
+  constructor(private window: WindowService) {
+    if (this.window._) {
+      fromEvent(this.window._, 'resize').subscribe(() => {
+        this.recalcWidth();
+      });
+      this.recalcWidth();
+    }
+  }
+
+  recalcWidth() {
+    this.width.set(this.window._?.innerWidth || 0);
+  }
+
+  get mobile() {
+    return (this.window._?.innerWidth || 0) < 1000;
+  }
+
+  get desktop() {
+    return (this.window._?.innerWidth || 0) >= 1000;
+  }
+}
diff --git a/projects/budgetkey/src/app/search/model.ts b/projects/budgetkey/src/app/common-components/search-models.ts
similarity index 93%
rename from projects/budgetkey/src/app/search/model.ts
rename to projects/budgetkey/src/app/common-components/search-models.ts
index b682d55..0012f6a 100644
--- a/projects/budgetkey/src/app/search/model.ts
+++ b/projects/budgetkey/src/app/common-components/search-models.ts
@@ -1,4 +1,4 @@
-import { SearchBarType } from '../common-components/components/searchbar/bk-search-bar.component';
+import { SearchBarType } from './components/searchbar/bk-search-bar.component';
 
 export class SearchParams {
     constructor(other?: SearchParams) {
diff --git a/projects/budgetkey/src/app/common-components/seo.service.ts b/projects/budgetkey/src/app/common-components/seo.service.ts
index 4971e34..ad03ead 100644
--- a/projects/budgetkey/src/app/common-components/seo.service.ts
+++ b/projects/budgetkey/src/app/common-components/seo.service.ts
@@ -1,13 +1,20 @@
 import { Inject, Injectable } from "@angular/core";
 import { NgxSeo, NgxSeoService } from "@avivharuzi/ngx-seo";
 import { GlobalSettingsService } from "./global-settings.service";
-import { Meta } from "@angular/platform-browser";
+import { DomSanitizer, Meta, SafeUrl } from "@angular/platform-browser";
 import { DOCUMENT } from "@angular/common";
 
 @Injectable()
 export class SeoService {
   
-  constructor(private seo: NgxSeoService, private globalSettings: GlobalSettingsService, @Inject(DOCUMENT) private document: any) {}
+  twitterShare: SafeUrl;
+  fbShare: SafeUrl;
+  whatsappShare: SafeUrl;
+  scrolledOnce = false;
+  shareData: { text: any; url: string; };
+
+  constructor(private seo: NgxSeoService, private globalSettings: GlobalSettingsService, 
+    private sanitizer: DomSanitizer, @Inject(DOCUMENT) private document: any) {}
 
   setSeo(title: string, canonical: string) {
     // const seo: NgxSeo = {
@@ -26,7 +33,7 @@ export class SeoService {
     //   }
     // };
     this.seo.setTitle(title);
-    this.seo.setMetaSiteName(this.globalSettings.siteName + '1');
+    this.seo.setMetaSiteName(this.globalSettings.siteName + '');
     this.seo.setMetaCanonical(canonical);
     this.seo.setMetaUrl(canonical);
     this.seo.setMetaCustomTags([
@@ -35,5 +42,29 @@ export class SeoService {
     const head = this.document.getElementsByTagName('head')[0];
     const link = head.querySelector('link[rel="canonical"]');
     link?.setAttribute('href', canonical);
+
+    let shareMessage = title
+      .replace(this.globalSettings.siteName + ' - ', '')
+      .replace(this.globalSettings.siteName, '');
+    this.prepareShare(shareMessage, canonical, 'מפתח_התקציב');
+  }
+
+  prepareShare(shareText: string, url: string, hashtag: string) {
+    this.shareData = {
+      text: shareText + '\n#' + hashtag,
+      url
+    };
+    this.twitterShare = this.sanitizer.bypassSecurityTrustUrl(`http://twitter.com/share?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(url)}&hashtags=${encodeURIComponent(hashtag)}`);
+    this.fbShare = this.sanitizer.bypassSecurityTrustUrl(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`);
+    this.whatsappShare = this.sanitizer.bypassSecurityTrustUrl(`https://wa.me/?text= ${encodeURIComponent(url)} ${encodeURIComponent(shareText)}`);
   }
+
+  async mobileShare() {
+    try {
+        await navigator.share(this.shareData);
+    } catch (err) {
+      console.log('Failed to share', err);
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/common-components/services/lists.service.ts b/projects/budgetkey/src/app/common-components/services/lists.service.ts
index d87cf36..99ae539 100644
--- a/projects/budgetkey/src/app/common-components/services/lists.service.ts
+++ b/projects/budgetkey/src/app/common-components/services/lists.service.ts
@@ -1,12 +1,12 @@
 /**
  * Created by adam on 18/12/2016.
  */
-import { Injectable, Inject } from '@angular/core';
+import { Injectable, computed, effect, signal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { EMPTY, Observable, ReplaySubject, Subject, Subscription, forkJoin, from, of, timer } from 'rxjs';
 import { AuthService } from '../auth/auth.service';
-import { BehaviorSubject } from 'rxjs';
-import { map, filter, switchMap, first } from 'rxjs/operators';
+import { map, filter, switchMap, first, tap } from 'rxjs/operators';
+import { DocResultEntry } from '../search-models';
 
 export class ListItem {
   id?: number;
@@ -14,27 +14,158 @@ export class ListItem {
   url: string;
   title: string;
   properties: any;
+  update_time?: string;
+  create_time?: string;
 }
 
-export class ListContents {
+
+export class ListProperties {
+  url: string | null;
+  title: string | null;
+  properties: any | null;
+  kind: string | null;
+  update_time?: string;
+  create_time?: string;
+  visibility?: number;
+}
+
+export class ListContents extends ListProperties {
   id: number;
-  items: Array<ListItem>;
+  name: string;
+  user_id: string;
+  items?: Array<ListItem>;
+  success?: boolean;
 }
 
+export const CURATED_KIND = 'curated';
+
+export const EMPTY_LIST: ListContents = {
+  id: 0,
+  name: '',
+  user_id: '',
+  url: null,
+  title: 'הרשימה שלי',
+  properties: {description: 'תיאור הרשימה...'},
+  kind: 'curated',
+  items: [],
+  visibility: 1
+};
 
 @Injectable()
 export class ListsService {
 
-  private token = new BehaviorSubject<any>(null);
+  private token = new ReplaySubject<string | null>();
+  private token_: string | null = null;
+
+  public curatedLists = signal<Array<ListContents>>([]);
+  public curatedListsMap = computed<{[key: string]: ListContents}>(() => {
+    const lists = this.curatedLists();
+    const map: {[key: string]: ListContents} = {};
+    lists.forEach((list) => {
+      map[list.name] = list;
+    });
+    return map;
+  });
+  public hasCuratedLists = signal<boolean>(false);
+  public curatedItemIds = computed<any>(() => {
+    const lists = this.curatedLists();
+    const itemIds: any = {};
+    lists.forEach((list) => {
+      list.items?.forEach((item) => {
+        const doc_id = item.properties?.source.doc_id;
+        if (doc_id) {
+          itemIds[doc_id] = true;
+        }
+      });
+    });
+    return itemIds;
+  });
+
+  public currentListId = signal<string | null>(null);
+  public currentList = signal<ListContents | null>(null);
+  public currentListItemIds = computed<any>(() => {
+    const list = this.currentList();
+    if (!list) {
+      return {};
+    }
+    const itemIds: any = {};
+    list.items?.forEach((item) => {
+      const doc_id = item.properties?.source.doc_id;
+      if (doc_id) {
+        itemIds[doc_id] = item.id;
+      }
+    });
+    return itemIds;
+  });
+
+  public emptyList = EMPTY_LIST;
+  private anonymousSub: Subscription | null = null;
 
   constructor(private http: HttpClient, private auth: AuthService) {
-    this.auth.permission('list-manager')
-        .pipe(
-          map((permission) => permission.token)
-        )
-        .subscribe((token) => {
-          this.token.next(token);
+    this.auth.getJwt().pipe(
+      switchMap((jwt) => {
+        if (!!jwt) {
+          return this.auth.permission('list-manager');
+        } else {
+          this.token_ = null;
+          this.token.next(this.token_);
+          return EMPTY;
+        }
+      }),
+      map((permission) => permission.token)
+    ).subscribe((token) => {
+      this.token_ = token;  
+      this.token.next(token);
+    });
+    this.token.pipe(
+      switchMap((token) => {
+        if (!!token) {
+          return forkJoin([of(true), this.getAllLists(token, CURATED_KIND), this.getAllItems(token, CURATED_KIND)]);
+        } else {
+          return forkJoin([of(false), of([]), of([])]);
+        }
+      }),
+    ).subscribe(([enabled, lists, items]) => {
+      lists = lists.sort((a: ListContents, b: ListContents) => (b.update_time || '').localeCompare(a.update_time || ''));
+      items = items.sort((a: ListItem, b: ListItem) => (b.create_time || '').localeCompare(a.create_time || ''));
+      lists.forEach((list: any) => {
+        list.items = items.filter((item: ListItem) => item.list_id === list.id);
+      });
+      this.curatedLists.set(lists);
+      this.hasCuratedLists.set(enabled);
+    });
+    effect(() => {
+      const id = this.currentListId();
+      if (!id) {
+        this.currentList.set(null);
+        return;
+      }
+      const parts = id ? id.split(':') : [];
+      if (parts.length === 2) {
+        const user_id = parts[0];
+        const name = parts[1];
+        for (const list of this.curatedLists()) {
+          if (list.name === name && list.user_id === user_id) {
+            this.anonymousSub?.unsubscribe();
+            this.anonymousSub = null;
+            this.currentList.set(list);
+            return;
+          }
+        }
+        this.anonymousSub?.unsubscribe();
+        this.anonymousSub = timer(1).pipe(
+          switchMap(() => this.getAnonymous(user_id, name))
+        ).subscribe((list) => {
+          this.currentList.set(list);
         });
+      }
+    }, {allowSignalWrites: true});
+  }
+
+  public headers(token: string | null) {
+    return {
+      'auth-token': token || ''
+    };
   }
 
   public get(list: string): Observable<ListContents> {
@@ -42,43 +173,198 @@ export class ListsService {
       this.token
           .pipe(
             filter((token) => token !== null),
+            first(),
             switchMap((token) => {
-              return this.http.get('https://next.obudget.org/list?list=' + encodeURIComponent(list) + '&jwt=' + token);
+              const params = {
+                list, items: true
+              };
+              return this.http.get('https://next.obudget.org/lists/', {params, headers: this.headers(token)});
             }),
-            first()
+            tap((resp: any) => {
+              const list = resp as ListContents;
+              if (list.kind === CURATED_KIND) {
+                const curatedLists = this.curatedLists();
+                this.curatedLists.set([list, ...curatedLists.filter((l) => l.name !== list.name)]);
+              }
+            })
           )
     );
   }
 
+  public getAnonymous(user_id: string, list: string): Observable<ListContents | null> {
+    const params = {
+      list, user_id, items: true
+    };
+    return (this.http.get<ListContents>('https://next.obudget.org/lists/', {params}))
+      .pipe(
+        tap((resp: ListContents) => {
+          resp.items = resp.items?.sort((a: ListItem, b: ListItem) => (b.create_time || '').localeCompare(a.create_time || ''));
+        }),
+      );
+  }
+
+  public getPublicLists(user_id: string): Observable<ListContents[]> {
+    const params = {
+      user_id, kind: CURATED_KIND
+    };
+    return (this.http.get<ListContents[]>('https://next.obudget.org/lists/', {params}))
+      .pipe(
+        map((resp: ListContents[]) => {
+          return resp.sort((a: ListContents, b: ListContents) => (b.update_time || '').localeCompare(a.update_time || ''));
+        })
+      );
+  }
+
   public put(list: string, item: ListItem): Observable<ListItem> {
     return this.token
       .pipe(
         filter((token) => token !== null),
+        first(),
+        switchMap((token) => {
+          const params = {list};
+          return this.http.put<ListItem>('https://next.obudget.org/lists/', item, {params, headers: this.headers(token)});
+        }),
+        tap((resp: ListItem) => {
+          const curatedLists = this.curatedLists();
+          const listIndex = curatedLists.findIndex((l) => l.name === list);
+          if (listIndex >= 0) {
+            const curatedList = curatedLists[listIndex];
+            const itemIndex = (curatedList.items || []).findIndex((i) => i.properties.source.doc_id === item.properties.source.doc_id);
+            if (itemIndex >= 0) {
+              curatedList.items?.splice(itemIndex, 1, resp);
+            } else {
+              curatedList.items?.unshift(resp);
+            }
+            const list = curatedLists.splice(listIndex, 1);
+            this.curatedLists.set([...list, ...curatedLists]);
+          }
+        }),
+      );
+  }
+
+  public updateList(listName: string | null, list: ListProperties): Observable<any> {
+    return this.token
+      .pipe(
+        filter((token) => token !== null),
+        first(),
         switchMap((token) => {
-          console.log('PUTTING ITEM', item);
-          return this.http.put('https://next.obudget.org/list?list=' + encodeURIComponent(list) + '&jwt=' + token, item);
+          const params: any = {self: true};
+          if (listName) {
+            params['list'] = listName;
+          }
+          return this.http.put('https://next.obudget.org/lists/', list, {params, headers: this.headers(token)});
         }),
-        map((response) => {
-          const added: any = response;
-          item.id = added.item_id;
-          item.list_id = added.list_id;
-          return item;
+        tap(() => {
+          const curatedLists = this.curatedLists();
+          const listIndex = curatedLists.findIndex((l) => l.name === listName);
+          if (listIndex >= 0) {
+            const curatedList = curatedLists[listIndex];
+            Object.assign(curatedList, list);
+            this.curatedLists.set([...curatedLists]);
+          }
         }),
-        first()
       );
   }
 
-  public delete(list: string, item_id: number | null): Observable<boolean> {
+  public delete(list: string, item_id: number | null): Observable<any> {
     const _item_id = item_id ? item_id : 'all';
-    return <Observable<boolean>>(this.token
+    return this.token
       .pipe(
         filter((token) => token !== null),
+        first(),
         switchMap((token) => {
-          return this.http.delete('https://next.obudget.org/list?list=' + encodeURIComponent(list) +
-                                  '&item_id=' + _item_id +
-                                  '&jwt=' + token);
+          const params = {list, item_id: _item_id}; 
+          return this.http.delete('https://next.obudget.org/lists/', {params, headers: this.headers(token)});
         }),
-        first()
-      ));
+        tap(() => {
+          const curatedLists = this.curatedLists();
+          const listIndex = curatedLists.findIndex((l) => l.name === list);
+          if (listIndex >= 0) {
+            const curatedList = curatedLists[listIndex];
+            if (_item_id !== 'all') {
+              const itemIndex = (curatedList.items || []).findIndex((i) => i.id === item_id);
+              if (itemIndex >= 0) {
+                curatedList.items?.splice(itemIndex, 1);
+              }
+            } else {
+              curatedList.items = [];
+              curatedLists.splice(listIndex, 1);
+            }
+            this.curatedLists.set([...curatedLists]);
+          }
+        })
+      );
+  }
+
+  public getAllLists(token: string, kind?: string, items?: boolean): Observable<Array<ListContents>> {
+    const params: any = {};
+    if (kind) {
+      params['kind'] = kind;
+    }
+    if (items) {
+      params['items'] = 'yes';
+    }
+    return this.http.get('https://next.obudget.org/lists/', {params, headers: this.headers(token)})
+      .pipe(
+        map((response: any) => {
+          const lists: ListContents[] = response;
+          return lists;
+        })
+    );
+  }
+
+  public getAllItems(token: string, kind?: string): Observable<Array<ListItem>> {
+    const params: any = {items: true};
+    if (kind) {
+      params['kind'] = kind;
+    }
+    return this.http.get('https://next.obudget.org/lists/', {params, headers: this.headers(token)})
+      .pipe(
+        map((response: any) => {
+          const lists: ListItem[] = response;
+          return lists;
+        })
+    );
+  }
+
+  public addDocToList(listName: string, doc: DocResultEntry) {
+    return this.put(listName, {
+      title: doc.source.page_title,
+      url: '/i/' + doc.source.doc_id,
+      properties: doc
+    });
+  }
+
+  public removeItemFromList(listName: string, itemId: number) {
+    return this.delete(listName, itemId).pipe(
+      switchMap(() => {
+        return this.get(listName);
+      }),
+    );
+  }
+
+  public createList(properties?: ListProperties) {
+    return this.auth.getUser().pipe(
+      first(),
+      map((user) => {
+        return {
+          name: user.profile?.name,
+          avatar_url: user.profile?.avatar_url,
+          user_id: user.profile?.id,
+        };
+      }),
+      switchMap((user_props) => {
+        const list = Object.assign({}, this.emptyList, properties || {});
+        list.properties = Object.assign(list.properties, {
+          name: user_props.name,
+          avatar_url: user_props.avatar_url,
+        });
+        return this.updateList(null, list)
+      }),
+      tap((list) => {
+        list.items = [];
+        this.curatedLists.set([list, ...this.curatedLists()]);
+      })
+    );
   }
 }
diff --git a/projects/budgetkey/src/app/common-components/window.service.ts b/projects/budgetkey/src/app/common-components/window.service.ts
new file mode 100644
index 0000000..9c08922
--- /dev/null
+++ b/projects/budgetkey/src/app/common-components/window.service.ts
@@ -0,0 +1,15 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+
+@Injectable()
+export class WindowService {
+
+  constructor(@Inject(DOCUMENT) private document: Document) { }
+
+  get _(): Window | null {
+    return (this.document && this.document.defaultView) ? this.document.defaultView : null;
+  }
+  get D(): Document {
+    return this.document;
+  }
+}
diff --git a/projects/budgetkey/src/app/format.ts b/projects/budgetkey/src/app/format.ts
index 5d0c495..e7da88b 100644
--- a/projects/budgetkey/src/app/format.ts
+++ b/projects/budgetkey/src/app/format.ts
@@ -1,10 +1,12 @@
 import * as durationPlugin from 'dayjs/plugin/duration';
 import * as relativeTimePlugin from 'dayjs/plugin/relativeTime';
+import * as utcPlugin from 'dayjs/plugin/utc';
 import * as dayjs from 'dayjs';
 import 'dayjs/locale/he';
 dayjs.locale('he')
 dayjs.extend(durationPlugin);
 dayjs.extend(relativeTimePlugin);
+dayjs.extend(utcPlugin);
 
 export class Format {
   
@@ -34,11 +36,18 @@ export class Format {
     return dayjs(value).format('DD/MM/YYYY');
   }
 
-  public relativeDate(value: string): string {
+  public relativeDate(value: string|null|undefined, noVal?: string): string {
     if (value) {
       return dayjs(value).fromNow();
     }
-    return 'תאריך פרסום לא ידוע';
+    return noVal || 'תאריך פרסום לא ידוע';
+  }
+
+  public relativeUTCDate(value: string|null|undefined, noVal?: string): string {
+    if (value) {
+      return dayjs.utc(value).fromNow();
+    }
+    return noVal || 'לא ידוע';
   }
 
   public percent(value: number): string {
diff --git a/projects/budgetkey/src/app/item/item-page/item-page.component.html b/projects/budgetkey/src/app/item/item-page/item-page.component.html
index 204df07..c3e8527 100644
--- a/projects/budgetkey/src/app/item/item-page/item-page.component.html
+++ b/projects/budgetkey/src/app/item/item-page/item-page.component.html
@@ -1,4 +1,4 @@
-<app-container [showHeader]="true" [showSearchBar]="true">
+<app-container [showHeader]="true" [showSearchBar]="true" [listSideView]='true'>
   <div #container class="budgetkey-item-wrapper container-fluid" [ngClass]="'style-' + style" *ngIf='init'>
     <div class='item-container'>
       <app-item-budget0dig *ngIf='prefix("budget/00/")' [item]='item'></app-item-budget0dig>
diff --git a/projects/budgetkey/src/app/item/item.module.ts b/projects/budgetkey/src/app/item/item.module.ts
index 2026205..ed39275 100644
--- a/projects/budgetkey/src/app/item/item.module.ts
+++ b/projects/budgetkey/src/app/item/item.module.ts
@@ -58,6 +58,7 @@ import { ItemSocialServiceComponent } from './items/item-soproc/item-social-serv
 import { SocialServiceDataTableComponent } from './items/item-soproc/item-social-service/social-service-data-table/social-service-data-table.component';
 import { ItemSupportsComponent } from './items/item-supports/item-supports.component';
 import { SearchLinkComponent } from './search-link/search-link.component';
+import { ListComponentsModule } from '../list-components/list-components.module';
 
 @NgModule({
   declarations: [
@@ -118,6 +119,7 @@ import { SearchLinkComponent } from './search-link/search-link.component';
     HttpClientModule,
     ItemRoutingModule,
     CommonComponentsModule,
+    ListComponentsModule,
     ChartsModule
   ],
   providers: [
diff --git a/projects/budgetkey/src/app/item/items/item-soproc/item-social-service/item-social-service.component.ts b/projects/budgetkey/src/app/item/items/item-soproc/item-social-service/item-social-service.component.ts
index 3cab565..83b9837 100644
--- a/projects/budgetkey/src/app/item/items/item-soproc/item-social-service/item-social-service.component.ts
+++ b/projects/budgetkey/src/app/item/items/item-soproc/item-social-service/item-social-service.component.ts
@@ -34,7 +34,6 @@ export class ItemSocialServiceComponent implements OnInit {
     ];
     this.item.breadcrumbs = [this.item.office, this.item.unit, this.item.subunit, this.item.subsubunit].filter(x => !!x).join(' / ');
     this.item.catalog_number = parseInt(this.item.catalog_number, 10) || null;
-    // console.log('ITEM=', this.item);
     const budget = this.item.manualBudget.sort((a: any, b: any) => a.year - b.year).filter((x: any) => x.year <= 2021);
     const beneficiaries = this.item.beneficiaries.sort((a: any, b: any) => a.year - b.year);
     this.budget_chart = {
diff --git a/projects/budgetkey/src/app/item/questions/item-data-table/item-data-table.component.ts b/projects/budgetkey/src/app/item/questions/item-data-table/item-data-table.component.ts
index d07c9d1..a1f779d 100644
--- a/projects/budgetkey/src/app/item/questions/item-data-table/item-data-table.component.ts
+++ b/projects/budgetkey/src/app/item/questions/item-data-table/item-data-table.component.ts
@@ -49,7 +49,6 @@ export class ItemDataTableComponent implements OnInit {
 
   private onDataReady(ev: any) {
     const {headers, data, err, total, graphData, graphLayout} = ev;
-    // console.log('DATA READY', ev);
     this.headers = headers;
     this.data = data;
     this.err = err;
diff --git a/projects/budgetkey/src/app/item/questions/questions-manager.ts b/projects/budgetkey/src/app/item/questions/questions-manager.ts
index 5b3e863..5d3ba96 100644
--- a/projects/budgetkey/src/app/item/questions/questions-manager.ts
+++ b/projects/budgetkey/src/app/item/questions/questions-manager.ts
@@ -201,7 +201,6 @@ export class QuestionsManager {
   getGraphFormatter(formatter: any) {
     if (formatter.type === 'bars') {
       return (items: any[]) => {
-        // console.log('DATA', items);
         const graphLayout = {barmode: 'stack'};
         const graphData = formatter.series.map((s: any) => {
           return {
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html
new file mode 100644
index 0000000..a06dced
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html
@@ -0,0 +1,42 @@
+<div class='dialog'>
+    <ng-container *ngIf='!listSelectionMode'>
+        <div class='header'>
+            <div class='icon' (activated)='cancel()' clickOnReturn></div>
+            <div class='title'>
+                <span>נוסף לרשימה:</span>
+                <h1>{{list.title}}</h1>
+            </div>
+            <div class='action'>
+                <a class='close-button' *ngIf='editing' (activated)='listDialog.close()' clickOnReturn></a>
+                <a class='select-list-button' *ngIf='!editing' (activated)='listSelectionMode = true' clickOnReturn></a>
+            </div>
+        </div>
+        <div class='notes'>
+            <div class='placeholder' *ngIf='!editing' clickOnReturn (activated)='editing = true'>#תגיות והערות לסעיף זה...</div>
+            <textarea [(ngModel)]='itemNotes' placeholder='#תגיות והערות לסעיף זה...' *ngIf='editing'></textarea>
+        </div>
+    </ng-container>
+    <ng-container *ngIf='listSelectionMode'>
+        <div class='list-selection'>
+            <ng-container *ngFor='let list of lists.curatedLists()'>
+                <div class='list-selection-item' clickOnReturn (activated)='toggleSubscription(list)' [class.subscribed]='subscribed(list)'>
+                    <div class='icon'></div>
+                    <div class='title'>{{list.title}}</div>
+                </div>
+            </ng-container>
+        </div>
+        <div class='new-list'>
+            <div class='editor' clickOnReturn (activated)='editing = true' *ngIf='!editing'>
+                <div class='icon'></div>
+                <div class='placeholder'>רשימה חדשה</div>
+            </div>
+            <div class='editor' *ngIf='editing'>
+                <div class='icon'></div>
+                <input [(ngModel)]='newList' placeholder='רשימה חדשה'/>
+            </div>
+            <div class='action'>
+                <a class='close-button' (activated)='$event.stopPropagation(); listDialog.close()' clickOnReturn></a>
+            </div>
+        </div>
+    </ng-container>
+</div>
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less
new file mode 100644
index 0000000..056f28b
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less
@@ -0,0 +1,289 @@
+@import '../../../common.less';
+
+:host {
+    .desktop({
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translateX(-100%);
+        z-index: 100;    
+    });
+    .mobile({
+        position: fixed;
+        top: 0;
+        right: 0;    
+        z-index: 100;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.8);
+        display: flex;
+        flex-flow: column;
+        align-items: stretch;
+        justify-content: flex-end;
+    });
+
+    .dialog {
+        .desktop({
+            width: 280px;
+        });
+        .mobile({
+            width: 100%;
+            height: auto;
+        });
+        min-height: 32px;
+        max-height: 220px;
+        border-radius: 4px;
+        border: 1px solid @color-fill-lead;
+        background: @color-white;
+        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
+        overflow: hidden;
+    
+        .header {
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            gap: 8px;
+            padding: 2px 8px;
+            background-image: url(../../../assets/lists/bg.png);
+            background-size: 8px;
+            background-repeat: repeat;
+        
+            .icon {
+                flex: 0 0 auto;
+                // margin-top: 4px;
+                width: 24px;
+                height: 24px;
+                margin-right: 2px;
+                background-image: url(../../../assets/lists/icon-list-red.svg);
+                background-size: contain;
+                background-repeat: no-repeat;
+                cursor: pointer;
+
+                &:hover {
+                    background-image: url(../../../assets/lists/icon-remove-list-red.svg);
+                }
+            }
+    
+            .title {
+                display: flex;
+                flex-flow: column;
+                align-items: flex-start;
+                gap: 4px;
+    
+                span {
+                    color: @color-gray-600;
+                    .font-abraham;
+                    font-size: 11px;
+                    font-weight: 300;
+                    line-height: normal;
+                }
+                h1 {
+                    color: @color-lists-blue;
+                    .font-gadi;
+                    font-size: 16px;
+                    font-weight: 400;
+                    line-height: normal;
+                    margin: 0;
+                }
+            }
+        }
+        .notes {
+            padding: 4px;
+            .placeholder {
+                border-radius: 2px;
+                background: @color-white;
+                border: 1px solid @color-lists-blue2;
+                padding: 4px;
+                padding-right: 32px;
+                color: @color-gray-600;
+                .font-abraham;
+                font-size: 13px;
+                font-weight: 300;
+                line-height: normal;
+                .background-image;
+                background-image: url(../../../assets/lists/icon-edit-gray-400.svg);
+                background-size: 16px;
+                background-position: center right 8px;
+                cursor: pointer;
+            }
+            textarea {
+                width: 100%;
+                border-radius: 2px;
+                background: @color-white;
+                border: 1px solid @color-lists-blue2;
+                padding: 8px;
+                color: @color-lists-blue;
+                text-align: right;
+                .font-gadi;
+                font-size: 13px;
+                font-weight: 400;
+                line-height: 18px;
+                &::placeholder {
+                    color: @color-gray-600;
+                    .font-abraham;
+                    font-size: 13px;
+                    font-weight: 300;
+                    line-height: normal;    
+                }
+            }
+        }
+        .list-selection {
+            width: 100%;
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            padding: 0 8px;
+            height: 128px;
+            overflow-y: auto;
+            .no-scrollbars;
+    
+            .list-selection-item {
+                width: 100%;
+                display: flex;
+                flex-flow: row;
+                align-items: center;
+                gap: 12px;
+                padding: 4px;
+                cursor: pointer;
+                border-bottom: 1px solid @color-disabled;
+    
+                // &:last-child {
+                //     border-bottom: none;
+                // }
+    
+                .icon {
+                    flex: 0 0 auto;
+                    width: 24px;
+                    height: 24px;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    background-image: url(../../../assets/lists/icon-select-list-gray-400.svg);
+                }
+    
+                .title {
+                    color: @color-gray-500;
+                    .font-gadi;
+                    font-size: 13px;
+                    font-weight: 400;
+                    line-height: normal;
+                    overflow: hidden;
+                    text-align: right;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+    
+                &.subscribed {
+                    .icon {
+                        background-image: url(../../../assets/lists/icon-list-red.svg);
+
+                        &:hover {
+                            background-image: url(../../../assets/lists/icon-remove-list-red.svg);
+                        }
+                    }
+    
+                    .title {
+                        color: @color-lists-blue;
+                    }
+                }
+            }
+        }
+    
+        .new-list {
+            padding: 4px 12px;
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            gap: 12px;
+            background-image: url(../../../assets/lists/bg.png);
+            background-size: 8px;
+            background-repeat: repeat;
+            border-top: 1px solid @color-lists-blue2;
+
+            .editor {
+                display: flex;
+                flex-flow: row;
+                align-items: center;
+                gap: 12px;
+                cursor: pointer;
+                flex: 1 1 auto;
+
+                .icon {
+                    flex: 0 0 auto;
+                    width: 24px;
+                    height: 24px;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    background-image: url(../../../assets/lists/icon-new-list-gray-500.svg);
+                }
+    
+                .placeholder {
+                    color: @color-gray-500;
+                    .font-abraham;
+                    text-align: right;
+                    font-size: 16px;
+                    font-weight: 300;
+                    line-height: normal;
+                }
+
+                input {
+                    flex: 1 1 auto;
+                    display: flex;
+                    height: 24px;
+                    padding: 1px 4px;
+                    border-radius: 2px;
+                    border: 1px solid @color-lists-blue2;
+                    background: @color-white;
+
+                    color: @color-lists-blue;
+                    text-align: right;
+                    .font-gadi;
+                    font-size: 13px;
+                    font-weight: 400;
+                    line-height: normal;
+
+                    &::placeholder {
+                        color: @color-gray-200;
+                        .font-abraham;
+                        text-align: right;
+                        font-size: 16px;
+                        font-weight: 300;
+                        line-height: normal;
+                    }
+                }
+            }
+        }
+
+        .action {
+            width: 24px;
+            height: 24px;
+            flex: 0 0 auto;
+            margin-right: auto;
+            cursor: pointer;
+    
+            a {
+                border: none;
+                appearance: none;
+                background: none;
+                .background-image;
+                width: 100%;
+                height: 100%;
+                display: inline-block;
+    
+                transform: translateY(0px);
+                &:hover {
+                    transform: translateY(1px);
+                }
+    
+                &.close-button {
+                    background-image: url(../../../assets/lists/icon-complete-red.svg);
+                    background-size: 24px;
+                }
+
+                &.select-list-button {
+                    background-image: url(../../../assets/lists/icon-chevron-down-grayish-blue.svg);
+                    background-size: 12px;
+                }
+            }
+        }
+    }
+}
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts
new file mode 100644
index 0000000..524a290
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts
@@ -0,0 +1,156 @@
+import { AfterViewInit, Component, ElementRef, OnChanges, OnInit, effect, signal } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { fromEvent, take, timer } from 'rxjs';
+import { EMPTY_LIST, ListContents, ListItem, ListsService } from '../../common-components/services/lists.service';
+import { AddToListDialogCommand, ListDialogService } from '../list-dialog.service';
+import { LayoutService } from '../../common-components/layout.service';
+
+
+@UntilDestroy()
+@Component({
+  selector: 'app-add-to-list-dialog',
+  templateUrl: './add-to-list-dialog.component.html',
+  styleUrls: ['./add-to-list-dialog.component.less'],
+  host: {
+    '[style.top]': 'layout.desktop ? listDialog.top() + "px" : 0',
+    '[style.left]': 'layout.desktop ? listDialog.right() + "px" : 0',
+    '(click)': 'layout.mobile ? done($event) : null',
+  }
+})
+export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChanges {
+
+  ready = signal<boolean>(false);
+
+  list: ListContents = EMPTY_LIST;
+  originalSubscriptionState: any = {};
+  subscriptionState: any = {};
+
+  listSelectionMode = false;
+  editing = false;
+  itemNotes = '';
+  newList: string | null = null;
+
+  constructor(private el: ElementRef, public lists: ListsService, public listDialog: ListDialogService, public layout: LayoutService) {
+    effect(() => {
+      if (!this.ready()) {
+        return;
+      }
+      const currentList = this.lists.currentList();
+      let list: ListContents | null = null;
+      if (currentList && currentList.success !== false) {
+        list = currentList;
+      } else {
+        const lists = (this.lists.curatedLists() || []).sort((a, b) => (b.update_time || '').localeCompare(a.update_time || ''));
+        if (lists.length > 0) {
+          list = lists[0];
+        }
+      }
+      this.lists.curatedLists()?.forEach((list_) => {
+        this.originalSubscriptionState[list_.name] = this.checkSubscribed(list_);
+        this.subscriptionState[list_.name] = this.originalSubscriptionState[list_.name];
+      });
+      if (list && !this.listSelectionMode) {
+        this.originalSubscriptionState[list.name] = false;
+        this.subscriptionState[list.name] = true;
+      }
+      if (!list) {
+        this.list = this.lists.emptyList;
+        this.newList = this.list.title;
+      } else {
+        this.list = list;
+      }
+    });
+    listDialog.closeQ.pipe(
+      take(1)
+    ).subscribe(() => {
+      this.done();
+    });
+  }
+
+  ngOnInit(): void {
+    this.listSelectionMode = this.listDialog.listSelection();
+    this.ready.set(true);
+  }
+
+  ngOnChanges(): void {
+    this.ready.set(true);
+  }
+
+  ngAfterViewInit(): void {
+    const el = this.el.nativeElement as HTMLElement;
+    let clicked = false;
+    fromEvent(el, 'click').pipe(
+      untilDestroyed(this)
+    ).subscribe((e) => {
+      clicked = true;
+      e.stopPropagation();
+    });
+    fromEvent(el, 'mousedown').pipe(
+      untilDestroyed(this)
+    ).subscribe((e) => {
+      clicked = true;
+      e.stopPropagation();
+    });
+    fromEvent(el, 'touchstart').pipe(
+      untilDestroyed(this)
+    ).subscribe((e) => {
+      clicked = true;
+      e.stopPropagation();
+    });
+    timer(3000).pipe(
+      untilDestroyed(this)
+    ).subscribe(() => {
+      if (!clicked) {
+        // this.listDialog.close();
+      }
+    });
+    fromEvent(document, 'click').pipe(
+      untilDestroyed(this),
+      take(1),
+    ).subscribe(() => {
+      this.listDialog.close();
+    });
+  }
+
+  done(ev: Event | null = null) {
+    ev?.stopPropagation();
+    const commands: AddToListDialogCommand[] = [];
+    let toOpenList: ListContents | null = null;
+    for (const list of this.lists.curatedLists()) {
+      if (this.originalSubscriptionState[list.name] && !this.subscriptionState[list.name]) {
+        const itemId = (list.items || []).find((item: ListItem) => item.properties.source.doc_id === this.listDialog.doc().source.doc_id)?.id;
+        commands.push({command: 'remove-item', list, itemId});
+      }
+      if (!this.originalSubscriptionState[list.name] && this.subscriptionState[list.name]) {
+        commands.push({command: 'add-item', list});
+        toOpenList = toOpenList || list;
+      }
+    }
+    toOpenList = toOpenList || this.list;
+    if (this.newList) {
+      commands.push({command: 'new-list', listTitle: this.newList});
+      toOpenList = null;
+    }
+    if (toOpenList) {
+      commands.push({'command': 'open-list', 'list': toOpenList});
+    }
+    this.listDialog.executeQ.next([this.listDialog.doc(), commands]);
+    this.listDialog.dialogOpen.set(false);
+  }
+
+  checkSubscribed(list: ListContents) {
+    return (list.items || []).map((item: ListItem) => item.properties.source.doc_id).indexOf(this.listDialog.doc().source.doc_id) >= 0;
+  }
+
+  subscribed(list: ListContents) {
+    return this.subscriptionState[list.name];
+  }
+
+  toggleSubscription(list: ListContents) {
+    this.subscriptionState[list.name] = !this.subscriptionState[list.name];
+  }
+
+  cancel() {
+    this.listDialog.executeQ.next([this.listDialog.doc(), []]);
+  }
+}
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html
new file mode 100644
index 0000000..7634d13
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html
@@ -0,0 +1,8 @@
+<ng-container *ngIf='doc'>
+    <div class='icon bk-tooltip-anchor' *ngIf='!enabled()' (click)='$event.stopPropagation(); $event.preventDefault()'>
+        <span *ngIf='tooltipText()' class='bk-tooltip bk-align-top bk-bigger' [innerHTML]='tooltipText()'></span>
+    </div>
+    <div class='icon bk-tooltip-anchor' *ngIf='enabled()' [class.subscribed]='subscribed()' [class.processing]='processing()' clickOnReturn (activated)='click($event)'>
+        <span *ngIf='tooltipText()' class='bk-tooltip bk-align-top bk-bigger' [innerHTML]='tooltipText()'></span>
+    </div>
+</ng-container>
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.less b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.less
new file mode 100644
index 0000000..1932b86
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.less
@@ -0,0 +1,49 @@
+@import '../../../common.less';
+
+:host {
+    display: inline-block;
+
+    width: 0;
+    margin-right: -4px;
+    overflow: hidden;
+    transition-property: width, margin-left;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in-out;
+
+    position: relative;
+
+    // &.enabled {
+        width: 24px;
+        height: 24px;
+        overflow: visible;
+    // }
+    .icon {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        .background-image;
+        background-size: 24px;
+
+        background-image: url(../../../assets/lists/icon-not-subscribed.svg);
+        &.subscribed {
+            background-image: url(../../../assets/lists/icon-subscribed.svg);
+        }
+        &.processing {
+            opacity: 0.5;
+            cursor: wait;
+        }
+    }
+
+    &.enabled {
+        .icon {
+            cursor: pointer;
+        }
+    }
+
+    app-add-to-list-dialog {
+        position: absolute;
+        top: 24px;
+        right: 0;
+        z-index: 100;
+    }
+}
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts
new file mode 100644
index 0000000..3f892b1
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts
@@ -0,0 +1,130 @@
+import { Component, ElementRef, Input, OnChanges, SimpleChanges, computed, effect, signal } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { EMPTY_LIST, ListContents, ListsService } from '../../common-components/services/lists.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { EMPTY, first, forkJoin, from, map, of, switchMap, tap, timer } from 'rxjs';
+import { DocResultEntry } from '../../common-components/search-models';
+import { AddToListDialogCommand, ListDialogService } from '../list-dialog.service';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-add-to-list-icon',
+  templateUrl: './add-to-list-icon.component.html',
+  styleUrls: ['./add-to-list-icon.component.less'],
+  host: {
+    '[class.enabled]': 'enabled()',
+  }
+})
+export class AddToListIconComponent implements OnChanges {
+  @Input() doc: DocResultEntry;
+
+  enabled = computed(() => {
+    return this.lists.hasCuratedLists();
+  });
+  subscribed = signal(false);
+  tooltipText = computed(() => {
+    if (this.listDialog.dialogOpen()) {
+      return null;
+    }
+    if (!this.enabled()) {
+      return 'יש להתחבר בכדי<br/>להוסיף לרשימה';
+    }
+    if (this.subscribed()) {
+      return 'ניהול פריט';
+    } else {
+      return 'הוספה לרשימה';
+    }
+  });
+  itemIds: any = {};
+  processing = signal(false);
+
+  constructor(public lists: ListsService, private router: Router, private route: ActivatedRoute, private listDialog: ListDialogService, private el: ElementRef) {
+    effect(() => this.update(), {
+      allowSignalWrites: true,
+    });
+  }
+
+  ngOnChanges(): void {
+    this.update();
+  }
+
+  update() {
+    this.itemIds = this.lists.curatedItemIds();
+    this.subscribed.set(this.doc && this.doc.source.doc_id && !!this.itemIds[this.doc.source.doc_id]);
+  }
+
+  click(ev: Event) {
+    if (!this.enabled()) {
+      return;
+    }
+    if (this.processing()) {
+      return;
+    }
+    ev.stopPropagation();
+    ev.preventDefault();
+    this.listDialog.open(this.doc, this.subscribed(), this.el.nativeElement as HTMLElement);
+    timer(50).subscribe(() => {
+      this.subscribed.set(true);
+    });
+    this.listDialog.executeQ.pipe(
+      untilDestroyed(this),
+      first(),
+    ).subscribe(([doc, commands]) => this.execute(doc, commands));
+  }
+
+  tooltip() {
+  }
+
+  execute(doc: DocResultEntry, commands: AddToListDialogCommand[]) {
+    if (doc !== this.doc) {
+      return;
+    }
+    this.processing.set(true);
+    this.update();
+    if (commands.length === 0) {
+      this.processing.set(false);
+      return;
+    }
+    const observables = commands.map(command => this.executeCommand(command));
+    forkJoin(observables)
+      .subscribe((results) => {
+        commands.forEach((command) => {
+          const result = results.shift();
+          let listToOpen: ListContents | null = null;
+          if (command.command === 'open-list' && command.list) {
+            listToOpen = command.list;
+          } else if (command.command === 'new-list' && result) {
+            listToOpen = result as ListContents;
+          }
+          if (listToOpen) {
+            const key = `${listToOpen.user_id}:${listToOpen.name}`;
+            this.router.navigate(['.'], { relativeTo: this.route, queryParams: { list: key }, queryParamsHandling: 'merge' });
+          }
+        });
+        this.processing.set(false);
+      });
+  }
+
+  executeCommand(command: AddToListDialogCommand) {
+    if (command.command === 'add-item' && command.list && this.doc) {
+      const doc = Object.assign({}, this.doc, {__notes: command.itemNotes});
+      return this.lists.addDocToList(command.list.name, doc);
+    } else if (command.command === 'remove-item') {
+      if (command.itemId && command.list && command.itemId) {
+        return this.lists.removeItemFromList(command.list.name, command.itemId);
+      }
+    } else if (command.command === 'new-list' && command.listTitle) {
+      if (command.listTitle) {
+        const properties = Object.assign({}, EMPTY_LIST, {title: command.listTitle});
+        return this.lists.createList(properties).pipe(
+          switchMap((list: ListContents) => {
+            return this.lists.addDocToList(list.name, this.doc).pipe(
+              map(() => list),
+            );
+          }),
+        );
+      }
+    }
+    return of(true);
+  }
+}
diff --git a/projects/budgetkey/src/app/list-components/app-container/app-container.component.html b/projects/budgetkey/src/app/list-components/app-container/app-container.component.html
new file mode 100644
index 0000000..0e74b22
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/app-container/app-container.component.html
@@ -0,0 +1,20 @@
+<ng-container *ngIf='configured'>
+    <app-bk-header *ngIf="showHeader"
+        [showSearchBar]="showSearchBar"
+        [showLanguages]="showLanguages"
+    ></app-bk-header>
+    <div class='scrollable'>
+        <div class='app'>
+            <div class='main' id='main' [style.width]='maxWidth() + "px"'>
+                <ng-content></ng-content>
+            </div>
+            <div class='list' *ngIf='showListView()'>
+                <app-list-view [list]="lists.currentList() || lists.emptyList" [headerControls]='true'
+                    (deleted)='onDeleted()'
+                ></app-list-view>
+            </div>
+        </div>
+        <app-bk-footer *ngIf="showFooter" [helpWidget]='helpWidget'></app-bk-footer>    
+    </div>
+    <app-add-to-list-dialog *ngIf='listDialog.dialogOpen()'></app-add-to-list-dialog>
+</ng-container>
diff --git a/projects/budgetkey/src/app/list-components/app-container/app-container.component.less b/projects/budgetkey/src/app/list-components/app-container/app-container.component.less
new file mode 100644
index 0000000..258dafd
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/app-container/app-container.component.less
@@ -0,0 +1,54 @@
+@import '../../../common.less';
+
+:host {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  max-height: 100%;
+  
+  app-bk-header {
+    flex: 0 0 auto;
+  }
+  
+  .scrollable {
+    flex: 1 1 auto; 
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .app {
+      direction: rtl;
+      min-height: calc(100vh ~'-' @headerHeight - 100px);
+      // margin-top: 9px; //calc(9 - @headerHeight);
+      // margin-bottom: 6px;  
+      width: 100%;
+      max-width: 100%;
+      display: flex;
+      flex-flow: row;
+      align-items: stretch;
+  
+      .list {
+        flex: 0 0 auto;
+        width: 400px;
+        position: sticky;
+        left: 0;
+        top: 0;
+        max-height: 100vh;
+        height: calc(100vh ~'-' @headerHeight);
+        overflow: scroll;
+        border-right: 1px solid #DAEAF5;
+        box-shadow: 0px 1px 2px 0px rgba(189, 189, 189, 0.60);
+        z-index: 100;
+      }
+  
+      .main {
+        flex: 0 1 auto;
+        width: 100%;
+        min-height: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;  
+      }
+    }  
+  }  
+}
diff --git a/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts b/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts
new file mode 100644
index 0000000..3d69323
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts
@@ -0,0 +1,94 @@
+import { HttpClient } from '@angular/common/http';
+import {Component, ViewEncapsulation, Input, signal, AfterViewInit, effect, computed, OnChanges} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GlobalSettingsService } from '../../common-components/global-settings.service';
+import { distinct, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { PlatformService } from '../../common-components/platform.service';
+import { ListContents, ListsService } from '../../common-components/services/lists.service';
+import { LayoutService } from '../../common-components/layout.service';
+import { ListDialogService } from '../list-dialog.service';
+
+@UntilDestroy()
+@Component({
+    selector: 'app-container',
+    templateUrl: './app-container.component.html',
+    styleUrls: ['./app-container.component.less'],
+})
+export class AppContainerComponent implements AfterViewInit, OnChanges {
+    @Input() showHeader = true;
+    @Input() showFooter = true;
+    @Input() showSearchBar = false;
+    @Input() showLanguages = false;
+    @Input() helpWidget = true;
+    @Input() listSideView = false;
+
+    configured = false;
+
+    maxWidth = signal<number>(0);
+    hasListView = computed(() => {
+        const list = this.lists.currentList();
+        if (!list) {
+            return false;
+        }
+        if (list.success === false) {
+            return false;
+        }
+        if (!this.listKey()) {
+            return false;
+        }
+        if (this.listKey() !== `${list?.user_id}:${list?.name}`) {
+            return false;
+        }
+        return true;
+    });
+    listKey = signal<string | null>(null);
+
+    constructor(private route: ActivatedRoute, private globalSettings: GlobalSettingsService, public lists: ListsService, 
+        public layout: LayoutService, private router: Router, public listDialog: ListDialogService) {
+        this.globalSettings.ready.subscribe(() => {
+            this.configured = true;
+        });
+        this.globalSettings.init(this, this.route);
+        this.route.queryParams.pipe(
+            untilDestroyed(this),
+            map((params) => params['list']),
+            distinctUntilChanged(),
+        ).subscribe((list) => {
+            this.listKey.set(list);
+            this.lists.currentListId.set(this.listKey());
+        });
+        effect(() => {
+            const x = this.hasListView();
+            this.updateWidth();
+        }, { allowSignalWrites: true});
+    }
+
+    ngAfterViewInit(): void {
+        this.layout.recalcWidth();
+        this.updateWidth();
+    }
+
+    ngOnChanges(): void {
+        this.updateWidth();
+    }
+
+    showListView() {
+        return this.layout.desktop && this.listSideView && this.hasListView();
+    }
+
+    onDeleted() {
+        this.router.navigate(['.'], { relativeTo: this.route, queryParams: { list: null }, queryParamsHandling: 'merge', replaceUrl: true});
+    }
+
+    updateWidth() {
+        let maxWidth = this.layout.width();
+        if (this.showListView()) {
+            maxWidth -= 400;
+        }
+        if (maxWidth < 0) {
+            maxWidth = 0;
+        }
+        this.maxWidth.set(maxWidth);
+    }
+}
diff --git a/projects/budgetkey/src/app/list-components/edited-content.directive.ts b/projects/budgetkey/src/app/list-components/edited-content.directive.ts
new file mode 100644
index 0000000..ef0db70
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/edited-content.directive.ts
@@ -0,0 +1,65 @@
+import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, Output, signal } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { filter, first, fromEvent, timer } from 'rxjs';
+
+@UntilDestroy()
+@Directive({
+  selector: '[editedContent]'
+})
+export class EditedContentDirective implements AfterViewInit {
+
+  @Input() editedContent: boolean;
+  @Output() updated = new EventEmitter<string>();
+
+  active = false;
+
+  constructor(private el_: ElementRef) {
+  }
+
+  ngAfterViewInit(): void {
+    const el = this.el;
+    el.style.cursor = 'edit';
+    el.style.display = 'inline';
+    el.style.whiteSpace = 'pre-wrap';
+
+    fromEvent(el, 'click').pipe(
+      untilDestroyed(this),
+    ).subscribe(() => {
+      if (this.editedContent) {
+        this.edit();
+      }
+    });
+    fromEvent(el, 'keydown').pipe(
+      untilDestroyed(this),
+      filter((ev: Event) => (ev as KeyboardEvent).key === 'Enter'),
+    ).subscribe((ev) => {
+      if (!this.active) {
+        this.edit();
+      } else {
+        el.blur();
+        ev.preventDefault()
+      }
+    });
+  }
+
+  get el(): HTMLElement {
+    return this.el_.nativeElement;
+  }
+
+  edit() {
+    const el = this.el;
+    if (!this.active) {
+      this.active = true;
+      el.contentEditable = 'true';
+      el.focus();
+      fromEvent(el, 'blur').pipe(first()).subscribe(() => {
+        el.contentEditable = 'false';
+        this.active = false;
+        const text = el.innerText;
+        timer(0).subscribe(() => {
+          this.updated.emit(text);
+        });
+      });    
+    }
+  }
+}
diff --git a/projects/budgetkey/src/app/list-components/list-components.module.ts b/projects/budgetkey/src/app/list-components/list-components.module.ts
new file mode 100644
index 0000000..3997f28
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/list-components.module.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import { AddToListIconComponent } from './add-to-list-icon/add-to-list-icon.component';
+import { ListViewComponent } from './list-view/list-view.component';
+import { CommonComponentsModule } from '../common-components/common-components.module';
+import { SearchResultComponent } from './search-result/search-result.component';
+import { EditedContentDirective } from './edited-content.directive';
+import { AppContainerComponent } from './app-container/app-container.component';
+import { AddToListDialogComponent } from './add-to-list-dialog/add-to-list-dialog.component';
+import { ListDialogService } from './list-dialog.service';
+
+/**
+ * Created by adam on 27/12/2016.
+ */
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    FormsModule,
+    RouterModule,
+    CommonComponentsModule,
+  ],
+  declarations: [
+    AddToListIconComponent,
+    ListViewComponent,
+    SearchResultComponent,
+    EditedContentDirective,
+    AppContainerComponent,
+    AddToListDialogComponent,
+  ],
+  providers: [
+    ListDialogService,
+  ],
+  exports: [
+    AddToListIconComponent,
+    ListViewComponent,
+    SearchResultComponent,
+    AppContainerComponent,
+  ]
+})
+export class ListComponentsModule { }
diff --git a/projects/budgetkey/src/app/list-components/list-dialog.service.ts b/projects/budgetkey/src/app/list-components/list-dialog.service.ts
new file mode 100644
index 0000000..aeafddf
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/list-dialog.service.ts
@@ -0,0 +1,57 @@
+import { Injectable, signal } from '@angular/core';
+import { DocResultEntry } from '../common-components/search-models';
+import { ListContents } from '../common-components/services/lists.service';
+import { Subject, Subscription, animationFrameScheduler, interval, takeUntil, timer } from 'rxjs';
+
+export interface AddToListDialogCommand {
+  command: 'add-item' | 'remove-item' | 'open-list' | 'new-list';
+  list?: ListContents;
+  itemNotes?: string;
+  itemId?: number;
+  listTitle?: string;
+};
+
+@Injectable()
+export class ListDialogService {
+
+  dialogOpen = signal(false);
+  listSelection = signal(false);
+  doc: any = signal<DocResultEntry|null>(null);
+  top = signal(0);
+  right = signal(0);
+
+  executeQ = new Subject<[DocResultEntry, AddToListDialogCommand[]]>();
+  closeQ = new Subject<void>();
+  positionSub: Subscription | null = null;
+
+  constructor() { }
+
+  execute(commands: AddToListDialogCommand[]) {
+    this.executeQ.next([this.doc(), commands]);
+  }
+
+  open(doc: DocResultEntry, listSelection: boolean, el: HTMLElement) {
+    if (this.dialogOpen()) {
+      this.close();
+      timer(0).subscribe(() => this.open(doc, listSelection, el));
+    } else {
+      this.doc.set(doc);
+      this.listSelection.set(listSelection);
+      this.positionSub = interval(16, animationFrameScheduler).pipe(
+        takeUntil(this.closeQ),
+      ).subscribe(() => {
+        const rect = el.getBoundingClientRect();
+        this.top.set(rect.bottom);
+        this.right.set(rect.right);
+      });
+      this.dialogOpen.set(true);
+    }
+  }
+
+  close() {
+    console.log('closed');
+    this.positionSub?.unsubscribe();
+    this.positionSub = null;
+    this.closeQ.next();
+  }
+}
diff --git a/projects/budgetkey/src/app/list-components/list-view/list-view.component.html b/projects/budgetkey/src/app/list-components/list-view/list-view.component.html
new file mode 100644
index 0000000..990acb2
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/list-view/list-view.component.html
@@ -0,0 +1,100 @@
+<div class='header'>
+    <div class='header-content'>
+        <div class='author'>
+            <div class='avatar' [style.background-image]='"url(" + list.properties.avatar_url + ")"'></div>
+            <a class='name' [routerLink]='["/l", list.user_id]' queryParamsHandling='preserve'>{{list.properties.name}}</a>
+        </div>
+        <div class='title'>
+            <div class='icon'></div>
+            <h1 [editedContent]='editable()' (updated)='title = $event' #titleEl>{{title}}</h1>
+        </div>
+        <div class='timestamps'>
+            <span>עודכן:</span>
+            <span>{{format.relativeUTCDate(list.update_time)}}</span>
+            <span>|</span>
+            <span>נוצר:</span>
+            <span>{{format.relativeUTCDate(list.create_time)}}</span>
+        </div>
+        <div class='description' [editedContent]='editable()' (updated)='description = $event' #descriptionEl>{{description}}</div>
+        <div class='selectors'>
+    
+        </div>
+    </div>
+    <div class='controls' *ngIf='headerControls'>
+        <a class='fullscreen-button' [routerLink]='["/l",  list.user_id, list.name]' [queryParams]='{list: null}' queryParamsHandling='merge' clickOnReturn></a>
+        <a class='close-button' [routerLink]='"."' [queryParams]='{list: null}' queryParamsHandling='merge' clickOnReturn></a>
+    </div>
+    <div class='edit-controls' *ngIf='editable()'>
+        <a class='delete-button' (activated)='deleteDialog.set(true)' clickOnReturn>
+            <span class='icon'></span>
+            מחיקת רשימה
+        </a>
+    </div>
+</div>
+<div class='list-contents'>
+    <div class='list-contents-results'>
+        <ng-container  *ngFor='let item of list.items; let i = index'>
+            <search-result [item]="item.properties" [index]="i" [kind]="item.properties.type" 
+                [bare]='false'
+                [showNotes]='true' [notes]='item.properties.__notes' [editableNotes]='editable()'
+                (updatedNotes)='updateNotes(item, $event)'
+                *ngIf='item.properties'
+            ></search-result>
+        </ng-container>        
+    </div>
+    <div class='share'>
+        <button class='share-button' clickOnReturn (activated)='share()'>שיתוף</button>
+    </div>
+</div>
+<app-modal [standardLayout]='false'
+    *ngIf='shareDialog()'
+    (close)='shareDialog.set(false)'
+>
+    <div class='dialog-header'>
+        <span>שיתוף הרשימה:</span>
+        <div class='title'>{{list.title}}</div>
+    </div>
+    <div class='dialog-explanation' *ngIf='editable()'>
+        <span>מי יכול לראות את הרשימה הזו?</span>
+        <div class='dialog-option private' [class.active]='!public' clickOnReturn (activated)='public = false'>
+            <div class='icon'></div>
+            <div class='dialog-option-text'>
+                <strong>טיוטא</strong>
+                <span>רק למי שיש את הקישור הסודי הזה</span>
+            </div>
+        </div>
+        <div class='dialog-option public' [class.active]='public' clickOnReturn (activated)='public = true'>
+            <div class='icon'></div>
+            <div class='dialog-option-text'>
+                <strong>פומבי</strong>
+                <span>לכולם יש גישה לרשימה, אפילו למנועי חיפוש</span>    
+            </div>
+        </div>
+    </div>
+    <div class='dialog-done'>
+        <button class='copy-to-clipboard' clickOnReturn (activated)='copyLinkToClipboard()' [class.copied]='copied'>
+            <span class='icon'></span>
+            העתקת הקישור
+        </button>
+        <button class='done-button' clickOnReturn (activated)='shareDialog.set(false)'>אישור</button>
+    </div>
+</app-modal>
+
+<app-modal [standardLayout]='false'
+    *ngIf='deleteDialog()'
+    (close)='deleteDialog.set(false)'
+>
+    <div class='dialog-header'>
+        <span>מחיקת הרשימה:</span>
+        <div class='title'>{{list.title}}</div>
+    </div>
+    <div class='dialog-explanation'>
+        <span>לא ניתן לבטל פעולה זו.</span><br/>
+    </div>
+    <div class='dialog-done'>
+        <button class='cancel-button' clickOnReturn (activated)='deleteDialog.set(false)'>
+            ביטול
+        </button>
+        <button class='done-button' clickOnReturn (activated)='deleteSelf()'>מחיקה</button>
+    </div>
+</app-modal>
diff --git a/projects/budgetkey/src/app/list-components/list-view/list-view.component.less b/projects/budgetkey/src/app/list-components/list-view/list-view.component.less
new file mode 100644
index 0000000..ec6e60a
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/list-view/list-view.component.less
@@ -0,0 +1,415 @@
+@import '../../../common.less';
+
+@max-width: 750px + 2 * 32px;
+
+.button-behavior {
+    appearance: none;
+    border: none;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+        box-shadow: 0px 0px 4px 4px rgba(207, 221, 231, 0.50);
+    }
+
+    &:active {
+        transform: translateY(1px);
+    }
+}
+
+.list-button {
+    .button-behavior;
+
+    padding: 0 80px;
+    height: 35px;
+    border-radius: 8px;
+    background: @color-fill-lead;
+
+    color: @color-white;
+    .font-abraham;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: normal;
+}
+
+:host {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    position: relative;
+
+    .header {
+        width: 100%;
+        background-image: url(../../../assets/lists/bg.png);
+        background-size: 8px;
+        background-repeat: repeat;
+        padding-top: 64px;
+        padding-bottom: 56px;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        border-bottom: 2px solid @color-lists-light-blue;
+
+        .header-content {
+            display: flex;
+            flex-flow: column;
+            align-items: flex-start;
+            padding: 0 32px;
+            max-width: @max-width;
+            width: 100%;
+            gap: 8px;
+
+            .author {
+                display: flex;
+                flex-flow: row;
+                align-items: center;
+                gap: 8px;
+                .avatar {
+                    flex: 0 0 auto;
+                    width: 28px;
+                    height: 28px;
+                    border-radius: 28px;
+                    border: 1px solid @color-fill-lead;
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                }
+                .name {
+                    color: @color-gray-700;
+                    .font-abraham;
+                    font-size: 16px;
+                    font-weight: 400;
+                }
+            }
+            .title {
+                display: flex;
+                flex-flow: row;
+                align-items: center;
+                gap: 8px;
+                .icon {
+                    flex: 0 0 auto;
+                    align-self: center;
+                    // margin-right: -8px;
+                    width: 32px;
+                    height: 24px;
+                    margin-right: -10px;
+                    background-image: url(../../../assets/lists/icon-list-red.svg);
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                }
+                h1 {
+                    margin: 0;
+                    font-size: 32px;
+                }    
+            }
+            .description {
+                font-size: 20px;
+                line-height: 36px; /* 180% */
+                white-space: pre-wrap;
+            }
+            .title, .description {
+                .font-gadi;
+                color: @color-lists-blue;
+            }
+            .timestamps {
+                display: flex;
+                flex-flow: row;
+                align-items: baseline;
+                gap: 4px;
+
+                color: @color-gray-500;
+                .font-abraham;
+                font-size: 16px;
+                font-weight: 300;
+            }
+        }
+        .controls {
+            display: flex;
+            flex-flow: row;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            
+            .close-button, .fullscreen-button {
+                width: 32px;
+                height: 32px;
+                flex: 0 0 auto;
+                .background-image;
+                background-size: 16px;
+            }
+
+            .close-button {
+                background-image: url(../../../assets/lists/icon-close-gray-500.svg);
+            }
+
+            .fullscreen-button {
+                background-image: url(../../../assets/lists/icon-fullscreen-gray-500.svg);
+            }
+        }
+
+        .edit-controls {
+            display: flex;
+            flex-flow: row;
+            position: absolute;
+            top: 8px;
+            right: 8px;
+
+            .delete-button {
+                appearance: none;
+                border: none;
+                display: flex;
+                flex-flow: row;
+                align-items: center;
+                justify-content: center;
+                gap: 2px;
+                padding: 2px 4px 2px 12px;
+                border-radius: 4px;
+                border: 1px solid @color-lists-light-blue;
+                background: @color-white;
+                                
+                color: @color-lists-grayish-blue;
+                .font-abraham;
+                font-size: 16px;
+                font-weight: 400;
+                line-height: 28px;
+                text-decoration: none;
+
+                .icon {
+                    .background-image;
+                    background-image: url(../../../assets/lists/icon-lists-trash-grayish-blue.svg);
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                }
+
+                &:hover {
+                    border: 1px solid @color-fill-lead;
+                    background: @color-fill-lead-lighter;
+                    color: @color-fill-lead;
+
+                    .icon {
+                        background-image: url(../../../assets/lists/icon-lists-trash-red.svg);
+                    }    
+                }
+            }
+        }
+    }
+
+    .list-contents {
+        width: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        flex: 1 0 auto;
+        // min-height: 100vh;
+
+        .list-contents-results {
+            padding: 16px 32px;
+            display: flex;
+            flex-flow: column;
+            align-items: stretch;
+            gap: 8px;
+            width: 100%;
+            max-width: @max-width;
+        }
+
+        .share {
+            margin-top: auto;
+            position: sticky;
+            bottom: 0;
+            width: 100%;
+            height: 50px;
+            padding: 0 8px;
+            background-color: white;
+            border-top: 1px solid @color-lists-lighter-blue;
+            box-shadow: 0px -4px 8px 0px rgba(207, 221, 231, 0.50);
+
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            justify-content: flex-end;
+            z-index: 1;
+
+            .share-button {
+                .list-button;
+            }
+        }
+    }
+
+    .dialog-header {
+        padding: 24px 32px;
+        background-image: url(../../../assets/lists/bg.png);
+        background-size: 8px;
+        background-repeat: repeat;
+        display: flex;
+        flex-flow: column;
+        align-items: flex-start;
+        justify-content: center;
+
+        span {
+            color: @color-gray-800;
+            text-align: right;
+            .font-abraham;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 28px;
+        }
+
+        .title {
+            color: @color-lists-blue;
+            text-align: right;
+            .font-gadi;
+            font-size: 20px;
+            font-weight: 400;
+            line-height: normal;            
+        }
+    }
+
+    .dialog-explanation {
+        width: 100%;
+        padding: 16px 32px;
+        color: @color-gray-800;
+        text-align: right;
+        .font-abraham;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 28px;
+        
+        display: flex;
+        flex-flow: column;
+        gap: 8px;
+
+        .dialog-option {
+            display: flex;
+            flex-flow: row;
+            padding: 4px 6px 4px 12px;
+            align-items: center;
+            gap: 8px;
+            align-self: stretch;
+
+            border-radius: 25px;
+            border: 1px solid @color-disabled;
+
+            &.active {
+                border: 1px solid @color-gray-600;
+            }
+
+            .icon {
+                .background-image;
+                width: 28px;
+                height: 28px;
+                background-size: 28px;
+                flex: 0 0 auto;
+            }
+
+            .dialog-option-text {
+                display: flex;
+                flex-flow: column;
+                align-items: flex-start;
+
+                color: @color-gray-500;
+                .font-abraham;
+                font-size: 16px;
+                font-weight: 300;
+                line-height: 16px;
+
+                strong {
+                    font-weight: 700;
+                }
+            }
+
+            &.private {
+                .icon {
+                    background-image: url(../../../assets/lists/icon-list-private-inactive.svg);
+                }
+            }
+
+            &.public {
+                .icon {
+                    background-image: url(../../../assets/lists/icon-list-public-inactive.svg);
+                }
+            }
+
+            &.active {
+                &.private {
+                    .icon {
+                        background-image: url(../../../assets/lists/icon-list-private-active.svg);
+                    }
+                }
+    
+                &.public {
+                    .icon {
+                        background-image: url(../../../assets/lists/icon-list-public-active.svg);
+                    }
+                }    
+            }
+        }
+    }
+
+    .dialog-done {
+        padding: 8px;
+        width: 100%;
+        display: flex;
+        flex-flow: row;
+        gap: 20px;
+        align-items: center;
+        justify-content: space-between;
+        border-top: 1px solid @color-lists-lighter-blue;
+
+        .copy-to-clipboard {
+            .button-behavior;
+
+            border-radius: 20px;
+            border: 1px solid @color-gray-100;
+            gap: 4px;
+            padding: 4px 4px 4px 12px;
+
+            color: @color-fill-lead;
+            background-color: white;
+            .font-abraham;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 28px;
+            
+            .icon {
+                .background-image;
+                background-image: url(../../../assets/lists/icon-copy-to-clipboard.svg);
+                display: inline-block;
+                width: 28px;
+                height: 28px;
+            }
+
+            &.copied {
+                .icon {
+                    background-image: url(../../../assets/lists/icon-check-red.svg);
+                }
+            }
+        }
+
+        .cancel-button {
+            appearance: none;
+            border: none;
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            justify-content: center;
+            color: @color-gray-500;
+            background-color: white;
+            padding: 0 24px;
+
+            &:hover {
+                color: @color-gray-800;
+            }
+        }
+
+        .done-button {
+            margin-right: auto;
+            flex: 0 0 auto;
+            .list-button;
+            padding: 0 40px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/list-components/list-view/list-view.component.ts b/projects/budgetkey/src/app/list-components/list-view/list-view.component.ts
new file mode 100644
index 0000000..8eda324
--- /dev/null
+++ b/projects/budgetkey/src/app/list-components/list-view/list-view.component.ts
@@ -0,0 +1,122 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, computed, signal } from '@angular/core';
+import { ListContents, ListsService } from '../../common-components/services/lists.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Format } from '../../format';
+import { AuthService } from '../../common-components/auth/auth.service';
+import { map } from 'rxjs';
+import { sign } from 'crypto';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-list-view',
+  templateUrl: './list-view.component.html',
+  styleUrls: ['./list-view.component.less']
+})
+export class ListViewComponent implements OnChanges {
+
+  @Input() list: ListContents;
+  @Input() headerControls = false;
+
+  @Output() deleted = new EventEmitter<void>();
+
+  @ViewChild('titleEl') titleEl: ElementRef;
+  @ViewChild('descriptionEl') descriptionEl: ElementRef;
+
+  format = new Format();
+  editable = signal<boolean>(false);
+  userId = '';
+  shareDialog = signal<boolean>(false);
+  copied = false;
+  deleteDialog = signal<boolean>(false);
+  link = '';
+
+  constructor(private auth: AuthService, private lists: ListsService) {
+    this.auth.getUser().pipe(
+      untilDestroyed(this),
+      map((user) => user?.profile?.id || '')
+    ).subscribe((userId) => {
+      this.userId = userId;
+      this.checkEditable();
+    });
+  }
+
+  ngOnChanges(): void {
+    this.checkEditable();
+    this.link = `${window.location.origin}/l/${this.list.user_id}/${this.list.name}`;
+  }
+
+  checkEditable() {
+    if (this.userId.length) {
+      this.editable.set(this.userId === this.list?.user_id);
+    } else {
+      this.editable.set(false);
+    }
+  }
+
+  save() {
+    if (this.editable()) {
+      this.lists.updateList(this.list.name, this.list).subscribe((list) => {
+        // console.log('List updated', list);
+      });
+    }
+  }
+
+  set title(title: string) {
+    this.list.title = title.trim();
+    this.save();
+    (this.titleEl.nativeElement as HTMLElement).innerHTML = this.title;
+  }
+
+  get title(): string {
+    if (this.list?.title?.trim().length) {
+      return this.list?.title.trim();
+    } else {
+      return this.lists.emptyList.title || '';
+    }
+  }
+
+  set description(description: string) {
+    this.list.properties.description = description;
+    this.save();
+    (this.descriptionEl.nativeElement as HTMLElement).innerHTML = this.description;
+  }
+
+  get description(): string {
+    return this.list?.properties?.description || 'רשימה ללא תיאור';
+  }
+
+  updateNotes(item: any, notes: string) {
+    item.properties.__notes = notes;
+    this.lists.addDocToList(this.list.name, item.properties).subscribe((item) => {});
+  }
+
+  share() {
+    this.shareDialog.set(true);
+  }
+
+  copyLinkToClipboard() {
+    const el = document.createElement('textarea');
+    el.value = this.link;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    this.copied = true;
+  }
+
+  deleteSelf() {
+    this.lists.delete(this.list.name, null).subscribe((success) => {
+      this.deleted.emit();
+      this.deleteDialog.set(false);
+    });
+  }
+
+  get public() {
+    return (this.list?.visibility || 0) > 1;
+  }
+
+  set public(value: boolean) {
+    this.list.visibility = value ? 2 : 1;
+    this.save();
+  }
+}
diff --git a/projects/budgetkey/src/app/search/search-result/search-result.component.html b/projects/budgetkey/src/app/list-components/search-result/search-result.component.html
similarity index 65%
rename from projects/budgetkey/src/app/search/search-result/search-result.component.html
rename to projects/budgetkey/src/app/list-components/search-result/search-result.component.html
index e95a47c..1d28c79 100644
--- a/projects/budgetkey/src/app/search/search-result/search-result.component.html
+++ b/projects/budgetkey/src/app/list-components/search-result/search-result.component.html
@@ -1,9 +1,17 @@
-<div class='card' 
-     [class.horizontal]='horizontal'
-     [style.border-color]='p.secondaryColor'
-     [style.background-color]='p.bgColor'
-     [attr.data-doc-id]='item.source.doc_id'
-    >
+<a  
+    class='card' 
+    [class.horizontal]='horizontal'
+    [style.border-color]='p.secondaryColor'
+    [style.background-color]='p.bgColor'
+    [attr.data-doc-id]='item.source.doc_id'
+    [href]='href()' 
+    [target]='bare ? "_blank" : "_self"'
+    clickOnReturn
+    [attr.aria-label]='p.title + " - מעבר לעמוד הפריט"'
+    [routerLink]='routerLink()'
+    [queryParams]='{li: index}'
+    [queryParamsHandling]='"merge"'
+>
     <div class='top-line'>
         <span class='top-line-tag' *ngIf='p.tag' [innerHtml]='p.tag'
               [style.background-color]='p.tagColor'
@@ -30,18 +38,16 @@
              [style.color]='p.primaryColor'
              [attr.aria-label]='p.title'
             >
-            <a [href]='href()' class='body-title' *ngIf='p.title'
-               [target]='bare ? "_blank" : "_self"'
-               [style.color]='p.primaryColor'
-               clickOnReturn
-               [attr.aria-label]='p.title + " - מעבר לעמוד הפריט"'
-            >
-                <span [innerHtml]='p.title' [title]='p.title'></span>
-                <div class='fadeoff'
-                    [style.background]='fadeoff()'
-                >
-                </div>
-            </a>
+            <div class='body-title' *ngIf='p.title'>
+                <app-add-to-list-icon [doc]='item' *ngIf='listable'></app-add-to-list-icon>
+                <span [style.color]='p.primaryColor'>
+                    <span [innerHtml]='p.title' [title]='p.title'></span>
+                    <div class='fadeoff'
+                        [style.background]='fadeoff()'
+                    >
+                    </div>
+                </span> 
+            </div>
             <span class='parties' *ngIf='p.partyFrom || p.partyTo'>
                 <span class='body-party-from' *ngIf='p.partyFrom' [innerHtml]='p.partyFrom'></span>
                 <span class='body-arrow' *ngIf='p.arrowKind'>
@@ -62,7 +68,7 @@
         <span class='bottom-line-text' *ngIf='p.bottomLineText'
               [style.color]='p.primaryColor' [style.opacity]='p.bottomLineTextOpacity || "1.0"'
         >
-            <span [innerHtml]='p.bottomLineText' tabindex="-1"></span>
+            <span [innerHtml]='p.bottomLineText'></span>
             <div class='fadeoff'
                 [style.background]='fadeoff(true)'
             ></div>
@@ -74,4 +80,10 @@
               [style.background-color]='p.tertiaryColor'
         ></span>
     </div>
-</div>
\ No newline at end of file
+    <div class='notes' *ngIf='showNotes && (editableNotes || (notes && notes.length))'>
+        <div class='inner' (click)='stopEvent($event)' (keydown)='stopEvent($event)'>
+            <input [(ngModel)]='notes' kind='text' placeholder='#תגיות והערות לסעיף זה....' [class.empty]='!notes || !notes.length'
+            (blur)='updateNotes()' [style.pointer-events]='editableNotes ? "all" : "none"'>
+        </div>
+    </div>
+</a>
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/search/search-result/search-result.component.less b/projects/budgetkey/src/app/list-components/search-result/search-result.component.less
similarity index 74%
rename from projects/budgetkey/src/app/search/search-result/search-result.component.less
rename to projects/budgetkey/src/app/list-components/search-result/search-result.component.less
index 17397ab..fba5613 100644
--- a/projects/budgetkey/src/app/search/search-result/search-result.component.less
+++ b/projects/budgetkey/src/app/list-components/search-result/search-result.component.less
@@ -1,3 +1,5 @@
+@import '../../../common.less';
+
 .card {
     display: flex;
     flex-flow: column;
@@ -5,6 +7,18 @@
     box-shadow: 0 1px 2px 0 rgba(189, 189, 189, 0.6);
     border: solid 1px black;
 
+    &:hover {
+        text-decoration: inherit;
+    }
+
+    & > * {
+        background-color: @color-white;
+    }
+
+    app-add-to-list-icon {
+        pointer-events: all;
+    }
+
     &.horizontal {
         width: 320px;
         height: 100%;
@@ -15,6 +29,7 @@
         display: flex;
         flex-flow: row;
         align-items: center;
+        position: relative;
 
         span {
             font-family: 'Abraham TRIAL';
@@ -87,6 +102,7 @@
             display: flex;
             flex-flow: column;
             align-items: flex-start;
+            gap: 4px;
             // margin: 0 8px;
             max-width: 100%;
             margin: 0;
@@ -106,7 +122,11 @@
                 max-height: 44px;
                 width: 100%;
                 position: relative;
-
+                display: flex;
+                flex-flow: row;
+                gap: 4px;
+                align-items: center;
+            
                 .fadeoff {
                     content: '';
                     position: absolute;
@@ -221,4 +241,57 @@
             top: -1px;
         }
     }
+
+    .notes {
+        padding: 4px;
+        padding-top: 0;
+        width: 100%;
+        
+        .inner {
+            display: block;
+            width: 100%;
+            border-radius: 2px;
+            border: 1px solid #9CD3FE;
+            background-color: @color-white;
+            background-image: url(../../../assets/lists/bg.png);
+            background-size: 8px;
+            background-repeat: repeat;
+            height: 24px;
+            padding: 0 4px;
+            color: @color-lists-blue;
+            text-align: right;
+            .font-gadi;
+            font-size: 13px;
+            font-weight: 400;
+            line-height: 18px;
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            input {
+                width: 100%;
+                border: none;
+                outline: none;
+                background-color: transparent;
+
+                &.empty {
+                    padding-right: 20px;
+                    .background-image;
+                    background-size: 10px;
+                    background-image: url(../../../assets/lists/icon-edit-gray-400.svg);
+                    background-position: center right 2px;
+                }
+
+                &::placeholder {
+                    color: @color-gray-600;
+                    .font-abraham;
+                    font-size: 13px;
+                    font-weight: 300;
+                }
+
+                // &:focus {
+                //     background-image: none;
+                // }
+            }
+        }
+    }
 }
diff --git a/projects/budgetkey/src/app/search/search-result/search-result.component.ts b/projects/budgetkey/src/app/list-components/search-result/search-result.component.ts
similarity index 94%
rename from projects/budgetkey/src/app/search/search-result/search-result.component.ts
rename to projects/budgetkey/src/app/list-components/search-result/search-result.component.ts
index 20c1bcf..7dfe694 100644
--- a/projects/budgetkey/src/app/search/search-result/search-result.component.ts
+++ b/projects/budgetkey/src/app/list-components/search-result/search-result.component.ts
@@ -1,12 +1,13 @@
-import { Component, Input, Inject, OnInit } from '@angular/core';
+import { Component, Input, Inject, OnInit, EventEmitter, Output } from '@angular/core';
 
 
-import { DocResultEntry } from '../model';
+import { DocResultEntry } from '../../common-components/search-models';
 
 import { GlobalSettingsService } from '../../common-components/global-settings.service';
 
 import * as dayjs from 'dayjs';
 import 'dayjs/locale/he';
+import { DomSanitizer } from '@angular/platform-browser';
 dayjs.locale('he');
 
 type StringOrFunc = string | ((x: any) => string);
@@ -55,6 +56,12 @@ export class SearchResultComponent implements OnInit {
   @Input() kind: string;
   @Input() horizontal = false;
   @Input() bare = false;
+  @Input() listable = true;
+  
+  @Input() showNotes = false;
+  @Input() editableNotes = false;
+  @Input() notes: string;
+  @Output() updatedNotes = new EventEmitter<string>();
 
   private PARAMETERS: { [s: string]: Parameter; } = {
     // // ENTITIES
@@ -557,7 +564,7 @@ export class SearchResultComponent implements OnInit {
 
   public p: Parameter;
 
-  constructor(private globalSettings: GlobalSettingsService) { }
+  constructor(private globalSettings: GlobalSettingsService, private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
     const parts = this.item.source.doc_id.split('/');
@@ -679,13 +686,21 @@ export class SearchResultComponent implements OnInit {
     return x['payments'][x['payments'].length - 1];
   }
 
+  routerLink() {
+    const doc_id = this.item.source.doc_id;
+    if (doc_id.indexOf('activities/gov_social_service') === 0) {
+      return null;
+    }
+    return [`/i/${doc_id}`];
+  }
+
   href() {
     const doc_id = this.item.source.doc_id;
-    let base = '';
     if (doc_id.indexOf('activities/gov_social_service') === 0) {
-      base = 'https://www.socialpro.org.il';
+      const theme = (!this.bare && this.globalSettings.themeId) ? `&theme=${this.globalSettings.themeId}` : '';
+      return this.sanitizer.bypassSecurityTrustUrl(`https://www.socialpro.org.il/i/${doc_id}?li=${this.index}${theme}`);
     }
-    return base + '/i/' + doc_id + '?li=' + this.index + (!this.bare && this.globalSettings.themeId ? '&theme=' + this.globalSettings.themeId : '');
+    return null;
   }
 
   remainingTime(x: any) {
@@ -701,4 +716,15 @@ export class SearchResultComponent implements OnInit {
     }
     return null;
   }
+
+  updateNotes() {
+    this.updatedNotes.emit(this.notes);
+  }
+
+  stopEvent(event: Event) {
+    event.stopPropagation();
+    if (event.type === 'click') {
+      event.preventDefault();
+    }
+  }
 }
diff --git a/projects/budgetkey/src/app/list-page/list-page.module.ts b/projects/budgetkey/src/app/list-page/list-page.module.ts
new file mode 100644
index 0000000..7fdd3b6
--- /dev/null
+++ b/projects/budgetkey/src/app/list-page/list-page.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ListComponentsModule } from '../list-components/list-components.module';
+import { ListRoutingModule } from './list-routing.module';
+import { ListPageComponent } from './list-page/list-page.component';
+import { UserListsPageComponent } from './user-lists-page/user-lists-page.component';
+import { CommonComponentsModule } from '../common-components/common-components.module';
+
+
+
+@NgModule({
+  declarations: [
+    ListPageComponent,
+    UserListsPageComponent
+  ],
+  imports: [
+    CommonModule,
+    CommonComponentsModule,
+    ListComponentsModule,
+    ListRoutingModule,
+  ]
+})
+export class ListPageModule { }
diff --git a/projects/budgetkey/src/app/list-page/list-page/list-page.component.html b/projects/budgetkey/src/app/list-page/list-page/list-page.component.html
new file mode 100644
index 0000000..cc2da46
--- /dev/null
+++ b/projects/budgetkey/src/app/list-page/list-page/list-page.component.html
@@ -0,0 +1,6 @@
+<app-container [showHeader]="true" [showSearchBar]="true" [listSideView]='false'>
+    <div *ngIf='init && list'>
+        <app-list-view [list]='list' (deleted)='onDeleted()'></app-list-view>
+    </div>
+</app-container>
+  
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/list-page/list-page/list-page.component.less b/projects/budgetkey/src/app/list-page/list-page/list-page.component.less
new file mode 100644
index 0000000..abea493
--- /dev/null
+++ b/projects/budgetkey/src/app/list-page/list-page/list-page.component.less
@@ -0,0 +1,6 @@
+:host {
+    div {
+        width: 100%;
+        height: 100%;
+    }
+}
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/list-page/list-page/list-page.component.ts b/projects/budgetkey/src/app/list-page/list-page/list-page.component.ts
new file mode 100644
index 0000000..9b4a663
--- /dev/null
+++ b/projects/budgetkey/src/app/list-page/list-page/list-page.component.ts
@@ -0,0 +1,69 @@
+import { Component, Inject, Optional, effect } from '@angular/core';
+import { GlobalSettingsService } from '../../common-components/global-settings.service';
+import { SeoService } from '../../common-components/seo.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ListContents, ListsService } from '../../common-components/services/lists.service';
+import { filter, map, switchMap } from 'rxjs';
+import { PlatformService } from '../../common-components/platform.service';
+import { REQUEST } from '@nguniversal/express-engine/tokens';
+import { Request } from 'express';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-list-page',
+  templateUrl: './list-page.component.html',
+  styleUrls: ['./list-page.component.less']
+})
+export class ListPageComponent {
+
+  init = false;
+  list: ListContents|null = null;
+  listKey: string|null = null;
+  canonical: string = '';
+
+  constructor(private globalSettings: GlobalSettingsService, private seo: SeoService, private route: ActivatedRoute,
+      private lists: ListsService, private router: Router, private ps: PlatformService, @Optional() @Inject(REQUEST) private request: Request) {
+    this.globalSettings.ready.subscribe(() => {
+      this.init = true;
+    });
+    effect(() => {
+      const list = lists.currentList();
+      if (!this.listKey) {
+        return;
+      }
+      if (this.listKey !== `${list?.user_id}:${list?.name}`) {
+        return;
+      }
+      if (list?.success === false) {
+        this.ps.server(() => {
+          this.request?.res?.status(404);
+        });
+        this.router.navigate(['/not-found'], {queryParamsHandling: 'preserve', replaceUrl: true});
+      } else {
+        this.list = list;
+        this.seo.setSeo(`${list?.title} - מפתח התקציב`, this.canonical);
+      }
+    });
+    this.route.params.pipe(
+      untilDestroyed(this),
+      map((params) => ({
+        userId: params['user-id'],
+        listId: params['list-id']
+      })),
+      filter((params) => !!params.listId && !!params.userId),
+    ).subscribe((list) => {
+      this.listKey = `${list.userId}:${list.listId}`;
+      this.canonical = `https://next.obudget.org/l/${list.userId}/${list.listId}`;
+      this.router.navigate(['.'], { relativeTo: this.route, queryParams: { list: this.listKey }, queryParamsHandling: 'merge', replaceUrl: true});
+    });
+  }
+
+  onDeleted() {
+    if (this.lists.curatedLists().length > 0) {
+      this.router.navigate(['/l/my'], { queryParamsHandling: 'preserve'});
+    } else {
+      this.router.navigate(['/'], { queryParamsHandling: 'preserve' });
+    }
+  }
+}
diff --git a/projects/budgetkey/src/app/list-page/list-routing.module.ts b/projects/budgetkey/src/app/list-page/list-routing.module.ts
new file mode 100644
index 0000000..81f06dd
--- /dev/null
+++ b/projects/budgetkey/src/app/list-page/list-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { ListPageComponent } from "./list-page/list-page.component";
+import { UserListsPageComponent } from "./user-lists-page/user-lists-page.component";
+
+const routes: Routes = [
+  {
+    path: ':user-id/:list-id',
+    component: ListPageComponent
+  },
+  {
+    path: ':user-id',
+    component: UserListsPageComponent
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ListRoutingModule {}
diff --git a/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.html b/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.html
new file mode 100644
index 0000000..7b0e448
--- /dev/null
+++ b/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.html
@@ -0,0 +1,30 @@
+<app-container [showHeader]="true" [showSearchBar]="true" [listSideView]='false'>
+    <ng-container *ngIf='init'>
+        <div class='header'>
+            <div class='logo'></div>
+            <div class='title'>הרשימות של<br/>{{theLists()[0]?.properties?.name}}</div>
+        </div>
+        <div class='lists'>
+            <div class='list' *ngFor='let list of theLists()'
+                [routerLink]='["/l", list.user_id, list.name]'
+                clickOnReturn
+            >
+                <div class='list-title'>
+                    <div class='icon'></div>
+                    <h1>{{list.title}}</h1>
+                </div>
+                <div class='list-description'>
+                    {{list.properties.description}}
+                </div>
+                <div class='timestamps'>
+                    <span>עודכן:</span>
+                    <span>{{format.relativeUTCDate(list.update_time)}}</span>
+                    <span>|</span>
+                    <span>נוצר:</span>
+                    <span>{{format.relativeUTCDate(list.create_time)}}</span>
+                </div>        
+            </div>
+        </div>
+    </ng-container>
+</app-container>
+  
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.less b/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.less
new file mode 100644
index 0000000..82b2178
--- /dev/null
+++ b/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.less
@@ -0,0 +1,105 @@
+@import '../../../common.less';
+
+:host {
+    .header {
+        width: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        gap: 24px;
+        padding: 40px 0;
+        
+        .logo {
+            .background-image;
+            background-image: url(../../../assets/lists/logo-my-lists.svg);
+            width: 110px;
+            height: 100px;
+        }
+
+        .title {
+            color: @color-fill-lead;
+            text-align: center;
+            .font-miriam;
+            font-size: 28px;
+            font-weight: 700;
+            line-height: normal;
+        }
+    }
+    .lists {
+        width: 100%;
+        height: 100%;
+        background-image: url(../../../assets/lists/bg.png);
+        background-size: 8px;
+        background-repeat: repeat;
+        border-top: 2px solid @color-lists-light-blue;
+
+        padding: 0 16px;
+        padding-top: 64px;
+        padding-bottom: 56px;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        gap: 48px;
+
+        .list {
+            width: 100%;
+            max-width: @container-width;
+            display: flex;
+            flex-flow: column;
+            align-items: flex-start;
+            gap: 8px;
+
+            .list-title {
+                display: flex;
+                flex-flow: row;
+                align-items: center;
+                gap: 8px;
+                .icon {
+                    flex: 0 0 auto;
+                    align-self: center;
+                    // margin-right: -8px;
+                    width: 32px;
+                    height: 24px;
+                    margin-right: -10px;
+                    background-image: url(../../../assets/lists/icon-list-red.svg);
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                }
+                h1 {
+                    .font-gadi;
+                    color: @color-lists-blue;
+                    margin: 0;
+                    font-size: 28px;
+                    font-weight: 400;
+                }    
+            }
+
+            .list-description {
+                width: 100%;
+                padding-right: 32px;
+                .font-gadi;
+                color: @color-gray-600;
+                font-size: 16px;
+                line-height: 28px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: right;
+                font-weight: 400;
+            }
+
+            .timestamps  {
+                padding-right: 32px;
+                display: flex;
+                flex-flow: row;
+                align-items: baseline;
+                gap: 4px;
+
+                color: @color-gray-500;
+                .font-abraham;
+                font-size: 16px;
+                font-weight: 300;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.ts b/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.ts
new file mode 100644
index 0000000..3544525
--- /dev/null
+++ b/projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.ts
@@ -0,0 +1,74 @@
+import { Component, WritableSignal, effect, signal } from '@angular/core';
+import { GlobalSettingsService } from '../../common-components/global-settings.service';
+import { SeoService } from '../../common-components/seo.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ListContents, ListsService } from '../../common-components/services/lists.service';
+import { filter, from, map, switchMap } from 'rxjs';
+import { Format } from '../../format';
+import { AuthService } from '../../common-components/auth/auth.service';
+import { PlatformService } from '../../common-components/platform.service';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-user-lists-page',
+  templateUrl: './user-lists-page.component.html',
+  styleUrls: ['./user-lists-page.component.less']
+})
+export class UserListsPageComponent {
+
+  init = false;
+
+  format = new Format();
+
+  publicLists = signal<ListContents[]>([]);
+  theLists = this.publicLists;
+
+  constructor(private globalSettings: GlobalSettingsService, private seo: SeoService, private auth: AuthService,
+      public lists: ListsService, private router: Router, private route: ActivatedRoute, private platform: PlatformService) {
+    this.globalSettings.ready.subscribe(() => {
+      this.init = true;
+    });
+    this.route.params.pipe(
+      untilDestroyed(this),
+      map((params) => params['user-id']),
+      filter((userId) => !!userId),
+      switchMap((userId: string) => {
+        if (this.platform.browser()) {
+          return this.auth.getUser().pipe(
+              map((user) => user?.profile?.id || ''),
+              map((loggedInUserId: string) => ({ userId, loggedInUserId }))
+          );
+        } else {
+          return from([{ userId, loggedInUserId: '' }]);
+        }
+      }),
+      map(({userId, loggedInUserId}) => {
+        if (userId === loggedInUserId) {
+          return this.lists.curatedLists;
+        } else {
+          this.lists.getPublicLists(userId).pipe(
+            untilDestroyed(this)
+          ).subscribe((lists) => {
+            this.publicLists.set(lists);
+          });
+          return this.publicLists;
+        }
+      })
+    ).subscribe((listsSignal: WritableSignal<ListContents[]>) => {
+      this.theLists = listsSignal;
+    });
+    effect(() => {
+      const publicLists = this.publicLists();
+      const curatedLists = this.lists.curatedLists();
+      const lists = this.theLists() || publicLists || curatedLists;
+      if (lists.length) {
+        const userId = lists[0].user_id;
+        const userName = lists[0].properties?.name;
+        const title = `רשימות המשתמש ${userName}`;
+        const canonical = `https://next.obudget.org/l/${userId}`;
+        this.seo.setSeo(`${title} - מפתח התקציב`, canonical);
+      }
+    });
+  }
+}
diff --git a/projects/budgetkey/src/app/main-page/hero/hero.component.ts b/projects/budgetkey/src/app/main-page/hero/hero.component.ts
index bb526ea..6f6d1bf 100644
--- a/projects/budgetkey/src/app/main-page/hero/hero.component.ts
+++ b/projects/budgetkey/src/app/main-page/hero/hero.component.ts
@@ -1,4 +1,4 @@
-import {Component, ViewChild, ElementRef, EventEmitter, Inject, HostListener} from '@angular/core';
+import {Component, ViewChild, ElementRef, EventEmitter, AfterViewInit} from '@angular/core';
 import {
   MushonKeyChart, MushonKeyFlow, MushonKeyFlowGroup,
   MushonkeyComponent
@@ -9,7 +9,10 @@ import { __T as __ } from '../main-page.component';
 import { sum as d3Sum, max as d3Max } from 'd3-array';
 import { easeExpOut, easePolyInOut } from 'd3-ease';
 import { bubbles } from '../bubbles';
-import { timer } from 'rxjs';
+import { animationFrameScheduler, debounceTime, fromEvent } from 'rxjs';
+import { WindowService } from '../../common-components/window.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { PlatformService } from '../../common-components/platform.service';
 
 const CENTER_WIDTH = 200;
 const CENTER_HEIGHT = 80;
@@ -482,12 +485,13 @@ function initDialog() {
   }
 }
 
+@UntilDestroy()
 @Component({
   selector: 'app-hero',
   templateUrl: './hero.component.html',
   styleUrls: ['./hero.component.less']
 })
-export class HeroComponent {
+export class HeroComponent implements AfterViewInit {
 
   @ViewChild('mushonkeyWrapper') mushonkeyComponentWrapper: ElementRef;
   @ViewChild('mushonkey') mushonkeyComponent: MushonkeyComponent;
@@ -513,7 +517,7 @@ export class HeroComponent {
     return new MushonKeyFlow(amount, title, null);
   }
 
-  constructor() {
+  constructor(private window: WindowService, private platform: PlatformService) {
     this.makeDeficitCharts(bubbles.deficitChart);
     bubbles.educationCharts.forEach((c: any) => this.makeEducationCharts(c));
     this.makeSupportChart(bubbles.supportChart[0], bubbles.supportChart[1]);
@@ -724,19 +728,26 @@ export class HeroComponent {
     });
   }
 
-  @HostListener('window:scroll', ['$event'])
-  onScroll(event: Event) {
-    timer(10).subscribe(() => {
-      const el = this.heroElement.nativeElement;
-      const rectTop = el.getBoundingClientRect().top;
-      const offsetHeight = el.scrollHeight;
-      if ((rectTop < 0) && (rectTop > -offsetHeight)) {
-        const progress = -1 * rectTop / offsetHeight;
-        this.scroller.emit(progress);
-      } else if (rectTop > 0) {
-        this.scroller.emit(0);
-      } else {
-        this.scroller.emit(1);
+  ngAfterViewInit(): void {
+    this.platform.browser(() => {
+      const el = this.window.D?.querySelector('.scrollable');
+      if (el) {
+        fromEvent(el, 'scroll').pipe(
+          untilDestroyed(this),
+          debounceTime(16, animationFrameScheduler),
+        ).subscribe((event: Event) => {
+          const el = this.heroElement.nativeElement;
+          const rectTop = el.getBoundingClientRect().top;
+          const offsetHeight = el.scrollHeight;
+          if ((rectTop < 0) && (rectTop > -offsetHeight)) {
+            const progress = -1 * rectTop / offsetHeight;
+            this.scroller.emit(progress);
+          } else if (rectTop > 0) {
+            this.scroller.emit(0);
+          } else {
+            this.scroller.emit(1);
+          }
+        });
       }
     });
   }
diff --git a/projects/budgetkey/src/app/main-page/main-page.component.less b/projects/budgetkey/src/app/main-page/main-page.component.less
index e0031e5..3c8cfec 100644
--- a/projects/budgetkey/src/app/main-page/main-page.component.less
+++ b/projects/budgetkey/src/app/main-page/main-page.component.less
@@ -1,99 +1,101 @@
-::ng-deep .app {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  position: relative;
-}
-
-::ng-deep app-bk-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 100;
-}
-
-.ad {
-  position: fixed;
-  left: 0;
-  border-top-right-radius: 10px;
-  background-color: #009adf;  
-  padding: 5px 10px;
-  bottom: -40px;
-  transition-property: bottom;
-  transition-delay: 0s;
-  transition-duration: 1s;
-  z-index: 100;
-  span {
-    font-size: 16px;
-    color: white;  
+:host {
+  ::ng-deep .main {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    position: relative;
   }
   
-  &.active {
-    bottom: 0px;
-    transition-delay: 3s;
+  ::ng-deep app-bk-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 100;
   }
   
-}
-
-.budgetism {
-  font-family: Heebo, sans-serif;
-  color: #fad900 !important;
-  background-image: url(https://act.obudget.org/wp-content/uploads/2018/02/banner_main-2.jpg);
-  border-radius: 15px;
-  padding: 0 20px;
-}
-
-.header, .footer {
-  width: 100vw;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-}
-
-.header {
-  .bubbles {
-    margin-top: 60px;
-    margin-bottom: 20px;
+  .ad {
+    position: fixed;
+    left: 0;
+    border-top-right-radius: 10px;
+    background-color: #009adf;  
+    padding: 5px 10px;
+    bottom: -40px;
+    transition-property: bottom;
+    transition-delay: 0s;
+    transition-duration: 1s;
+    z-index: 100;
+    span {
+      font-size: 16px;
+      color: white;  
+    }
+    
+    &.active {
+      bottom: 0px;
+      transition-delay: 3s;
+    }
+    
   }
   
-  .category-visualizations {
+  .budgetism {
+    font-family: Heebo, sans-serif;
+    color: #fad900 !important;
+    background-image: url(https://act.obudget.org/wp-content/uploads/2018/02/banner_main-2.jpg);
+    border-radius: 15px;
+    padding: 0 20px;
+  }
+  
+  .header, .footer {
+    width: 100vw;
     display: flex;
-    flex-flow: row;
-    justify-content: center;
-    align-items: baseline;
-    flex-wrap: wrap;
-    max-width: 1250px;
-    width: 100%;
+    flex-flow: column;
+    align-items: center;
+  }
+  
+  .header {
+    .bubbles {
+      margin-top: 60px;
+      margin-bottom: 20px;
+    }
+    
+    .category-visualizations {
+      display: flex;
+      flex-flow: row;
+      justify-content: center;
+      align-items: baseline;
+      flex-wrap: wrap;
+      max-width: 1250px;
+      width: 100%;
+    }
   }
-}
-
-.course {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  margin-top: 2em;
-  margin-bottom: 0.5em;
-  padding: 0.5em 1em;
-  border-radius: 2em 2em 0 2em;
-  background: #F2F2F2;
-  font-size: 3em;
-  color:  black;
   
-  .scroll-down{
-    flex: 0 0 auto;
-    margin: 30px 0 0 0;
+  .course {
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
     align-items: center;
-    justify-content: flex-end;
+    margin-top: 2em;
+    margin-bottom: 0.5em;
+    padding: 0.5em 1em;
+    border-radius: 2em 2em 0 2em;
+    background: #F2F2F2;
+    font-size: 3em;
+    color:  black;
     
-    svg {
-      display: block;
+    .scroll-down{
+      flex: 0 0 auto;
+      margin: 30px 0 0 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
       
-      path {
-        fill: #ff6666;
+      svg {
+        display: block;
+        
+        path {
+          fill: #ff6666;
+        }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/projects/budgetkey/src/app/main-page/main-page.module.ts b/projects/budgetkey/src/app/main-page/main-page.module.ts
index dc90d8f..f867cbf 100644
--- a/projects/budgetkey/src/app/main-page/main-page.module.ts
+++ b/projects/budgetkey/src/app/main-page/main-page.module.ts
@@ -12,6 +12,7 @@ import { MushonkeyModule } from 'mushonkey';
 import { HttpClientModule } from '@angular/common/http';
 import { UtilsService } from './utils.service';
 import { NgxSeoModule } from '@avivharuzi/ngx-seo';
+import { ListComponentsModule } from '../list-components/list-components.module';
 
 
 @NgModule({
@@ -26,6 +27,7 @@ import { NgxSeoModule } from '@avivharuzi/ngx-seo';
   imports: [
     CommonModule,
     CommonComponentsModule,
+    ListComponentsModule,
     MainPageRoutingModule,
     MushonkeyModule,
   ],
diff --git a/projects/budgetkey/src/app/page-not-found/page-not-found.component.html b/projects/budgetkey/src/app/page-not-found/page-not-found.component.html
index 78a38a2..e8caf1f 100644
--- a/projects/budgetkey/src/app/page-not-found/page-not-found.component.html
+++ b/projects/budgetkey/src/app/page-not-found/page-not-found.component.html
@@ -1,6 +1,7 @@
 <app-container [showHeader]="true" [showSearchBar]="true" [showLanguages]="false">
-    <div class='container'>
+    <div class='inner'>
         <h1>לא מצאנו את מה שחיפשת...</h1>
         <a href='/'>חזרה לדף הבית</a>
+        <img src='assets/img/404.png' />
     </div>
 </app-container>
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/page-not-found/page-not-found.component.less b/projects/budgetkey/src/app/page-not-found/page-not-found.component.less
index 17fb6f4..3d89b6f 100644
--- a/projects/budgetkey/src/app/page-not-found/page-not-found.component.less
+++ b/projects/budgetkey/src/app/page-not-found/page-not-found.component.less
@@ -1,5 +1,7 @@
+@import '../../common.less';
+
 :host {
-    .container {
+    .inner {
         display: flex;
         flex-flow: column;
         align-items: center;
@@ -7,5 +9,10 @@
         gap: 20px;
         width: 100%;
         height: 100%;
+        max-width: @container-width;
+
+        img {
+            width: 66%;
+        }
     }
 }
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/page-not-found/page-not-found.component.ts b/projects/budgetkey/src/app/page-not-found/page-not-found.component.ts
index 6b257dc..92de668 100644
--- a/projects/budgetkey/src/app/page-not-found/page-not-found.component.ts
+++ b/projects/budgetkey/src/app/page-not-found/page-not-found.component.ts
@@ -19,7 +19,6 @@ export class PageNotFoundComponent {
     @Optional() @Inject(REQUEST) private request: Request
   ) {
     this.globalSettings.ready.subscribe(() => {
-      // console.log('NOT FOUND', this.route.snapshot.url);
       if (this.ps.server()) {
         this.request?.res?.status(404);
       }
diff --git a/projects/budgetkey/src/app/profile/delete-all-subscription-items/delete-all-subscription-items.component.html b/projects/budgetkey/src/app/profile/delete-all-subscription-items/delete-all-subscription-items.component.html
index 4c37496..780c182 100644
--- a/projects/budgetkey/src/app/profile/delete-all-subscription-items/delete-all-subscription-items.component.html
+++ b/projects/budgetkey/src/app/profile/delete-all-subscription-items/delete-all-subscription-items.component.html
@@ -1,6 +1,4 @@
-<div class='row'>
-    <div class='icon trash' (click)="delete()">
-        <span>מחקו הכל</span>
-        <img src='assets/profile/img/trash.svg'/>
-    </div>
+<div class='icon trash' (click)="delete()">
+    <span>מחקו הכל</span>
+    <img src='assets/profile/img/trash.svg'/>
 </div>
diff --git a/projects/budgetkey/src/app/profile/delete-all-subscription-items/delete-all-subscription-items.component.less b/projects/budgetkey/src/app/profile/delete-all-subscription-items/delete-all-subscription-items.component.less
index 68971e6..f9c9fa0 100644
--- a/projects/budgetkey/src/app/profile/delete-all-subscription-items/delete-all-subscription-items.component.less
+++ b/projects/budgetkey/src/app/profile/delete-all-subscription-items/delete-all-subscription-items.component.less
@@ -1,25 +1,22 @@
-.row {
-    width: 815px;
-    display: flex;
-    justify-content: flex-end;
-    flex-flow: row;
-}
-
-.icon {
-    cursor: pointer;
-    text-align: center;
-    opacity: 0.5;
-    color: #333333;
-    font-family: "Miriam Libre";
-    font-size: 16px;
-    font-weight: bold;
-}
-
-span {
-    padding: 10px;
-    display: inline-block;
-}
-
-img {
-    margin-top: -3px;
+:host {
+    align-self: flex-end;
+    margin-left: 6px;
+    .icon {
+        cursor: pointer;
+        text-align: center;
+        opacity: 0.5;
+        color: #333333;
+        font-family: "Miriam Libre";
+        font-size: 16px;
+        font-weight: bold;
+    }
+    
+    span {
+        padding: 10px;
+        display: inline-block;
+    }
+    
+    img {
+        margin-top: -3px;
+    }    
 }
diff --git a/projects/budgetkey/src/app/profile/profile-page/profile-page.component.ts b/projects/budgetkey/src/app/profile/profile-page/profile-page.component.ts
index edac40c..7bd0b57 100644
--- a/projects/budgetkey/src/app/profile/profile-page/profile-page.component.ts
+++ b/projects/budgetkey/src/app/profile/profile-page/profile-page.component.ts
@@ -25,7 +25,7 @@ export class ProfilePageComponent {
   }
   
   updateItems() {
-    this.auth.check(window.location.href)
+    this.auth.check()
     .subscribe((result) => {
       if (result) {
         this.authenticated = result.authenticated;
@@ -43,8 +43,8 @@ export class ProfilePageComponent {
     this.lists.get(SEARCHES_LIST)
     .subscribe((lc) => {
       this.init = true;
-      this.hasItems = lc.items && lc.items.length > 0;
-      this.items.next(lc.items);
+      this.hasItems = !!lc.items && lc.items.length > 0;
+      this.items.next(lc.items || []);
       this.refreshShareThis();
     });
   }
diff --git a/projects/budgetkey/src/app/profile/profile.module.ts b/projects/budgetkey/src/app/profile/profile.module.ts
index 97b2a76..cda3792 100644
--- a/projects/budgetkey/src/app/profile/profile.module.ts
+++ b/projects/budgetkey/src/app/profile/profile.module.ts
@@ -6,6 +6,7 @@ import { ProfilePageComponent } from './profile-page/profile-page.component';
 import { CommonComponentsModule } from '../common-components/common-components.module';
 import { SingleSubscriptionItemComponent } from './single-subscription-item/single-subscription-item.component';
 import { DeleteAllSubscriptionItemsComponent } from './delete-all-subscription-items/delete-all-subscription-items.component';
+import { ListComponentsModule } from '../list-components/list-components.module';
 
 
 @NgModule({
@@ -17,7 +18,8 @@ import { DeleteAllSubscriptionItemsComponent } from './delete-all-subscription-i
   imports: [
     CommonModule,
     ProfileRoutingModule,
-    CommonComponentsModule
+    CommonComponentsModule,
+    ListComponentsModule,
   ]
 })
 export class ProfileModule { }
diff --git a/projects/budgetkey/src/app/search/bare-page/bare-page.component.ts b/projects/budgetkey/src/app/search/bare-page/bare-page.component.ts
index 99dcc40..66c17ff 100644
--- a/projects/budgetkey/src/app/search/bare-page/bare-page.component.ts
+++ b/projects/budgetkey/src/app/search/bare-page/bare-page.component.ts
@@ -32,13 +32,13 @@ export class BarePageComponent implements OnInit {
     });
   }
 
-  externalUrl() {
+  externalUrl(): string {
     return BkSearchBar.buildExternalUrl(
       this.search.searchState.term || '',
       this.all,
       this.search.subscriptionUrlParams,
       this.globalSettings.theme, this.globalSettings.lang,
       this.ps.browser() ? window.location.hostname : 'next.obudget.org'
-    );
+    )[0];
   }
 }
diff --git a/projects/budgetkey/src/app/search/bare-search-bar/bare-search-bar.component.ts b/projects/budgetkey/src/app/search/bare-search-bar/bare-search-bar.component.ts
index c059566..427920e 100644
--- a/projects/budgetkey/src/app/search/bare-search-bar/bare-search-bar.component.ts
+++ b/projects/budgetkey/src/app/search/bare-search-bar/bare-search-bar.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 import { AuthService } from '../../common-components/auth/auth.service';
+import { PlatformService } from '../../common-components/platform.service';
 
 @Component({
   selector: 'app-bare-search-bar',
@@ -12,8 +13,10 @@ export class BareSearchBarComponent implements OnInit {
   @Input() term = '';
   @Output() search = new EventEmitter<string>();
 
-  constructor(private auth: AuthService) {
-    auth.check(window.location.href).subscribe((user) => {});
+  constructor(private auth: AuthService, private ps: PlatformService) {
+    this.ps.browser(() => {
+      this.auth.check().subscribe((user) => {});
+    });
   }
 
   ngOnInit() {
diff --git a/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.html b/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.html
index 0a04cef..6396afc 100644
--- a/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.html
+++ b/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.html
@@ -4,14 +4,16 @@
       {{searchManager.last.docType.name}}
       <span *ngIf='searchManager.last.docType.amount'>({{searchManager.last.docType.amount | number}})</span>
     </div>
+    <div *ngIf='searchManager.last.docType' class='precard layout-mobile'>{{searchManager.last.docType.description}}</div>
     <div class='results'>
-      <div class='right-fade' [class.visible]='showRightFade' (click)='scroll(1)'></div>
+      <div class='right-fade layout-desktop' [class.visible]='showRightFade' (click)='scroll(1)'></div>
       <div class='cards' #cards [class.refresh]='refresh'>
-        <div *ngIf='searchManager.last.docType' class='precard'>{{searchManager.last.docType.description}}</div>
+        <div *ngIf='searchManager.last.docType' class='precard layout-desktop'>{{searchManager.last.docType.description}}</div>
         <search-result 
             *ngFor="let item of ((searchManager.searchResults | async)?.docs || []); let i = index"
             [item]="item" [index]="i" [kind]="item.type" [horizontal]='true' [bare]='bare'
         ></search-result>
+        <div class='loading' *ngIf='!searchManager.done'></div>
       </div>
       <div class='left-fade' [class.visible]='showLeftFade' (click)='scroll(-1)'></div>
     </div>
@@ -23,5 +25,5 @@
         ></search-tag>
       </ng-container>
     </div>
-  </ng-container>'
+  </ng-container>
 </div>
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.less b/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.less
index 3898c55..6e14950 100644
--- a/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.less
+++ b/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.less
@@ -1,8 +1,12 @@
+@import '../../../common.less';
+
 :host {
     display: flex;
     flex-flow: column;
     align-items: center;
     width: 100%;
+    max-width: @container-width;
+    overflow: visible;
 }
 .host {
     display: flex;
@@ -15,10 +19,9 @@
     margin-top: 60px;
     margin-bottom: 10px;
 
-    @media only screen and (max-width: 600px) {
-        width: 100vw;
+    .mobile({
         margin-top: 30px;
-    }
+    });
 
     &:not(.shown) {
         display: none;
@@ -32,13 +35,41 @@
         background-color: #fafafa;
         font-size: 22px;
         font-weight: normal;
-        font-family: "Abraham TRIAL";
+        .font-abraham;
         top: -16px;
         right: 16px;
         margin-bottom: -32px;
         cursor: pointer;
     }
 
+    .precard {
+        display: flex;
+        .desktop({
+            width: 240px;
+            margin: 16px 16px 16px 8px;
+            padding: 8px;
+            scroll-snap-align: end;
+        });
+        .mobile({
+            width: 100%;
+            margin: 0;
+            padding: 8px;
+            padding-top: 16px;
+        });
+        align-self: stretch;
+        flex: 0 0 auto;
+        border-radius: 4px;
+        border: 1px solid #edeef0;
+        // box-shadow: 0 1px 2px 0 rgba(189, 189, 189, 0.6);
+
+        .font-abraham;
+        font-size: 16px;
+        font-weight: normal;
+        color: #7d7d7d;
+
+        background-color: white;
+    }
+
     .results {
         width: 100%;
         position: relative;
@@ -55,25 +86,6 @@
             overscroll-behavior-x: contain;
             scrollbar-width: none;
             
-            .precard {
-                display: flex;
-                width: 240px;
-                align-self: stretch;
-                flex: 0 0 auto;
-                margin: 16px 16px 16px 8px;
-                border-radius: 4px;
-                padding: 8px;
-                border: 1px solid #edeef0;
-                // box-shadow: 0 1px 2px 0 rgba(189, 189, 189, 0.6);
-    
-                font-family: "Abraham TRIAL";
-                font-size: 16px;
-                font-weight: normal;
-                color: #7d7d7d;
-
-                scroll-snap-align: end;
-                background-color: white;
-            }
         
             search-result {
                 max-width: 320px;
@@ -93,6 +105,14 @@
                     transform: translatez(0);
                 }
             }
+
+            .loading {
+                width: 240px;
+                align-self: stretch;
+                flex: 0 0 auto;
+                margin: 16px 16px 16px 8px;
+                border-radius: 4px;
+            }
         }
 
         .left-fade {
diff --git a/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.ts b/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.ts
index 73802ff..937b14e 100644
--- a/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.ts
+++ b/projects/budgetkey/src/app/search/horizontal-results/horizontal-results.component.ts
@@ -4,10 +4,11 @@ import { animationFrameScheduler, fromEvent, scheduled } from 'rxjs';
 import { debounceTime, delay, skip, switchMap, take, tap, throttleTime } from 'rxjs/operators';
 import { SearchBarType } from '../../common-components/components/searchbar/bk-search-bar.component';
 import { PlatformService } from '../../common-components/platform.service';
-import { SearchParams } from '../model';
+import { SearchParams } from '../../common-components/search-models';
 import { SearchApiService } from '../search-api.service';
 import { SearchManager, SearchOutcome } from '../search-manager/search-manager';
 import { SearchState, mergeFilters } from '../search-state/search-state';
+import { LayoutService } from '../../common-components/layout.service';
 
 
 @UntilDestroy()
@@ -34,7 +35,7 @@ export class HorizontalResultsComponent implements OnInit, OnDestroy, AfterViewI
   showRightFade = false;
   refresh = false;
 
-  constructor(private searchService: SearchApiService, private ps: PlatformService) { }
+  constructor(private searchService: SearchApiService, private ps: PlatformService, private layout: LayoutService) { }
 
   ngOnInit() {
     this.docTypes = [this.docType];
@@ -114,9 +115,9 @@ export class HorizontalResultsComponent implements OnInit, OnDestroy, AfterViewI
   ngAfterViewInit() {
     this.ps.browser(() => {
       if (this.cards?.nativeElement) {
-        scheduled(fromEvent(this.cards.nativeElement, 'scroll'), animationFrameScheduler).pipe(
+        fromEvent(this.cards.nativeElement, 'scroll').pipe(
           untilDestroyed(this),
-          throttleTime(150),
+          throttleTime(150, animationFrameScheduler),
           delay(150)
         ).subscribe((event: Event) => {
           this.scrollHandler(event.target as HTMLElement);
@@ -156,7 +157,7 @@ export class HorizontalResultsComponent implements OnInit, OnDestroy, AfterViewI
       }
     }
     this.showRightFade = target.scrollLeft < -320;
-    this.showLeftFade = left > 0;
+    this.showLeftFade = this.layout.mobile ? target.scrollLeft === 0 : left > 0;
   }
 
   titleClicked() {
diff --git a/projects/budgetkey/src/app/search/search-api.service.ts b/projects/budgetkey/src/app/search/search-api.service.ts
index 8b9c60b..e8f6696 100644
--- a/projects/budgetkey/src/app/search/search-api.service.ts
+++ b/projects/budgetkey/src/app/search/search-api.service.ts
@@ -4,7 +4,7 @@ import { Observable, from, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
 // import { URL } from './config';
-import { SearchResults, SearchParams } from './model';
+import { SearchResults, SearchParams } from '../common-components/search-models';
 import { SearchBarType } from '../common-components/components/searchbar/bk-search-bar.component';
 import { SearchModule } from './search.module';
 import { PlatformService } from '../common-components/platform.service';
diff --git a/projects/budgetkey/src/app/search/search-filter-menu-bar/search-filter-menu-bar.component.less b/projects/budgetkey/src/app/search/search-filter-menu-bar/search-filter-menu-bar.component.less
index 0c0bc63..a31a41c 100644
--- a/projects/budgetkey/src/app/search/search-filter-menu-bar/search-filter-menu-bar.component.less
+++ b/projects/budgetkey/src/app/search/search-filter-menu-bar/search-filter-menu-bar.component.less
@@ -1,15 +1,10 @@
+@import '../../../common.less';
 
-.search-filter-bar {
-    @media only screen and (max-width: 600px) {
+:host {
+  padding: 16px;
+  .search-filter-bar {
       display: flex;
-      flex-flow: column;
-    }
-
-    display: flex;
-    width: 100%;
-    flex-flow: row;
-    margin-top: 15px;
-    &.bare {
-      margin-top: 0;
-    }
+      width: 100%;
+      flex-flow: row wrap;
+  }
 }
diff --git a/projects/budgetkey/src/app/search/search-manager/search-manager.ts b/projects/budgetkey/src/app/search/search-manager/search-manager.ts
index 8535979..cb38fba 100644
--- a/projects/budgetkey/src/app/search/search-manager/search-manager.ts
+++ b/projects/budgetkey/src/app/search/search-manager/search-manager.ts
@@ -1,5 +1,5 @@
 import { Subject, of, BehaviorSubject, Observable, from, merge, empty, EMPTY, ReplaySubject } from 'rxjs';
-import { SearchParams, SearchResults, DocResultEntry } from '../model';
+import { SearchParams, SearchResults, DocResultEntry } from '../../common-components/search-models';
 import { debounceTime, switchMap, mergeMap, filter, map, last, tap, catchError } from 'rxjs/operators';
 import { SearchState } from '../search-state/search-state';
 import { SearchApiService } from '../search-api.service';
@@ -22,7 +22,7 @@ export class SearchManager {
     
   // Fetch more
   private moreQueue = new Subject<SearchParams>();
-  private done = false;
+  public done = false;
   public last: SearchParams = new SearchParams();
   
   // Results
diff --git a/projects/budgetkey/src/app/search/search-mode-selector/search-mode-selector.component.less b/projects/budgetkey/src/app/search/search-mode-selector/search-mode-selector.component.less
index cf04489..1bf18b1 100644
--- a/projects/budgetkey/src/app/search/search-mode-selector/search-mode-selector.component.less
+++ b/projects/budgetkey/src/app/search/search-mode-selector/search-mode-selector.component.less
@@ -4,6 +4,9 @@
     
     > div {
         width: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
 
         &.bare {
             ::ng-deep {
diff --git a/projects/budgetkey/src/app/search/search-page/search-page.component.html b/projects/budgetkey/src/app/search/search-page/search-page.component.html
index a7404b9..347c181 100644
--- a/projects/budgetkey/src/app/search/search-page/search-page.component.html
+++ b/projects/budgetkey/src/app/search/search-page/search-page.component.html
@@ -1,5 +1,5 @@
-<app-container>
-    <div class="container" *ngIf='init'>
+<app-container [listSideView]='true'>
+    <div class="inner" *ngIf='init'>
         <app-search></app-search>
     </div>
 </app-container>
diff --git a/projects/budgetkey/src/app/search/search-page/search-page.component.less b/projects/budgetkey/src/app/search/search-page/search-page.component.less
index 1964e2e..a94da82 100644
--- a/projects/budgetkey/src/app/search/search-page/search-page.component.less
+++ b/projects/budgetkey/src/app/search/search-page/search-page.component.less
@@ -1,79 +1,85 @@
 :host {
-    ::ng-deep {
-        app-container {
-            background: #fafafa fixed;
-            min-height: 400px;
-            display: block;
-            .container {
-              display:flex;
-              flex-flow: column;
-              align-content: center;
-              align-items: center;
-              app-search {
-                display: flex;
-                flex-flow: column;
-                align-items: center;
-                width: 100%;
-                & > .row {
-                  max-width: 800px;
-                  width: 100%;
-                }
-              }
+//     ::ng-deep {
+//         app-container {
+//             background: #fafafa fixed;
+//             // min-height: 400px;
+//             // display: block;
+            .inner {
+//               display:flex;
+//               flex-flow: column;
+//               align-content: center;
+//               align-items: center;
+//               padding: 0 32px;
+              width: 100%;
+//               max-width: 100%;
+//               overflow-x: hidden;                
+//               app-search {
+//                 display: flex;
+//                 flex-flow: column;
+//                 align-items: center;
+//                 width: 100%;
+//                 & > .row {
+//                   max-width: 800px;
+//                   width: 100%;
+//                 }
+//               }
             }
-            .search_body {
-              margin-top: 20px;
+//             .search_body {
+//               margin-top: 20px;
           
-              .status {
-                padding: 0 10px;
-                color: #4A4A4A;
-                font-family: "Abraham TRIAL";
-                font-size: 16px;
-                letter-spacing: 0.37px;
-                line-height: 19px;
-              }
-            }
+//               .status {
+//                 padding: 0 10px;
+//                 color: #4A4A4A;
+//                 font-family: "Abraham TRIAL";
+//                 font-size: 16px;
+//                 letter-spacing: 0.37px;
+//                 line-height: 19px;
+//               }
+//             }
           
-          }
+//           }
           
-          app-bk-header header {
-            background-color: #fff;
-          }         
+//           app-bk-header header {
+//             background-color: #fff;
+//           }         
 
-          @media only screen and (max-width: 600px) {
-            .app {
-              margin-top: 0;
-              min-height: 100vh;
-            }
+//           @media only screen and (max-width: 600px) {
+//             .app > .main {
+//               margin-top: 0;
+//               min-height: 100vh;
+//             }
           
-            app-bk-header {
-              display: none;
-            }
+//             app-bk-header {
+//               display: none;
+//             }
           
-            app-container {
-              .container {
-                app-search {
-                  & > .row {
-                    width: 100vw;
-                  }
-                }
-              }
-            }
+//             app-container {
+//               .inner {
+//                 app-search {
+//                   & > .row {
+//                     width: 100vw;
+//                   }
+//                 }
+//               }
+//             }
             
-            app-bk-footer {
-              display: none;
-            }
+//             app-bk-footer {
+//               display: none;
+//             }
 
-            .type-text-in-search-bar-right {
-                display: none;
-            }
+//             .type-text-in-search-bar-right {
+//                 display: none;
+//             }
 
-            .bkmodal-dialog {
-                width: 90% !important;
-            }
+//             .bkmodal-dialog {
+//                 width: 90% !important;
+//             }
 
-            .bkmodal-content {
-                padding: 30px !important;
-            }
-        }    
-    }
+//             .bkmodal-content {
+//                 &.standard {
+//                   padding: 30px !important;
+//                 }
+//             }
+//         }    
+//     }
 }
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/search/search-state/search-state.ts b/projects/budgetkey/src/app/search/search-state/search-state.ts
index 3a980d6..ce65255 100644
--- a/projects/budgetkey/src/app/search/search-state/search-state.ts
+++ b/projects/budgetkey/src/app/search/search-state/search-state.ts
@@ -1,5 +1,5 @@
 import { ReplaySubject } from 'rxjs';
-import { SearchParams } from '../model';
+import { SearchParams } from '../../common-components/search-models';
 import { SearchBarType } from '../../common-components/components/searchbar/bk-search-bar.component';
 import { some } from 'd3-array';
 
diff --git a/projects/budgetkey/src/app/search/search.module.ts b/projects/budgetkey/src/app/search/search.module.ts
index 17c092a..2c53e64 100644
--- a/projects/budgetkey/src/app/search/search.module.ts
+++ b/projects/budgetkey/src/app/search/search.module.ts
@@ -10,12 +10,12 @@ import { HorizontalResultsComponent } from './horizontal-results/horizontal-resu
 import { SearchFilterMenuComponent } from './search-filter-menu/search-filter-menu.component';
 import { SearchFilterMenuBarComponent } from './search-filter-menu-bar/search-filter-menu-bar.component';
 import { SearchModeSelectorComponent } from './search-mode-selector/search-mode-selector.component';
-import { SearchResultComponent } from './search-result/search-result.component';
 import { SearchTagComponent } from './search-tag/search-tag.component';
 import { VerticalResultsComponent } from './vertical-results/vertical-results.component';
 import { FormsModule } from '@angular/forms';
 
 import { SearchApiService } from './search-api.service';
+import { ListComponentsModule } from '../list-components/list-components.module';
 
 @NgModule({
   declarations: [
@@ -27,7 +27,6 @@ import { SearchApiService } from './search-api.service';
     SearchFilterMenuComponent,
     SearchFilterMenuBarComponent,
     SearchModeSelectorComponent,
-    SearchResultComponent,
     SearchTagComponent,
     VerticalResultsComponent,
   ],
@@ -36,6 +35,7 @@ import { SearchApiService } from './search-api.service';
     CommonComponentsModule,
     FormsModule,
     SearchRoutingModule,
+    ListComponentsModule,
   ],
   providers: [
     SearchApiService
diff --git a/projects/budgetkey/src/app/search/search/search.component.less b/projects/budgetkey/src/app/search/search/search.component.less
index c654a64..284ba96 100644
--- a/projects/budgetkey/src/app/search/search/search.component.less
+++ b/projects/budgetkey/src/app/search/search/search.component.less
@@ -1,9 +1,15 @@
+@import '../../../common.less';
+
 :host {
     display: flex;
     flex-flow: column;
     align-items: center;
     width: 100%;
 
+    .mobile({
+        padding: 0 16px;
+    });
+
     .count-tags {
         display: flex;
         flex-flow: row;
diff --git a/projects/budgetkey/src/app/search/search/search.component.ts b/projects/budgetkey/src/app/search/search/search.component.ts
index 8c6e06a..d3ccf86 100644
--- a/projects/budgetkey/src/app/search/search/search.component.ts
+++ b/projects/budgetkey/src/app/search/search/search.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, Inject, Input } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Location } from '@angular/common';
 
-import { SearchParams } from '../model';
+import { SearchParams } from '../../common-components/search-models';
 import { SearchState } from '../search-state/search-state';
 import { AuthService } from '../../common-components/auth/auth.service';
 import { filter, first, switchMap } from 'rxjs/operators';
@@ -11,6 +11,7 @@ import { SearchBarType } from '../../common-components/components/searchbar/bk-s
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { timer } from 'rxjs';
 import { PlatformService } from '../../common-components/platform.service';
+import { SeoService } from '../../common-components/seo.service';
 
 @UntilDestroy()
 @Component({
@@ -37,7 +38,8 @@ export class SearchComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     public globalSettings: GlobalSettingsService,
-    private ps: PlatformService
+    private ps: PlatformService,
+    private seo: SeoService
   ) {
     this.searchState = new SearchState(<SearchBarType[]>this.globalSettings.theme.searchBarConfig);
     this.docTypes = this.globalSettings.theme.searchBarConfig;
@@ -86,6 +88,7 @@ export class SearchComponent implements OnInit {
               kinds: sp.docType.id 
             });
           }
+          this.seo.setSeo(this.globalSettings.siteName + ' - חיפוש ' + sp.term, `https://next.obudget.org/s?q=${encodeURIComponent(sp.term)}`);
         }
       });
     });
diff --git a/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.html b/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.html
index fb1e6f7..38d4a90 100644
--- a/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.html
+++ b/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.html
@@ -1,7 +1,7 @@
 <div class="search_body">
   <ng-container *ngFor="let item of ((searchManager.searchResults | async)?.docs || []); let i = index" >
     <search-result [item]="item" [index]="i" [kind]="item.type" [bare]='bare'></search-result>
-    <div class='separator'></div>
   </ng-container>
-  <div i18n="@@statusText" class="status" [innerHtml]='getStatusText()'></div>
+  <div class='loading' *ngIf='!searchManager.done'></div>
+  <div i18n="@@statusText" class="status" [innerHtml]='getStatusText()' #more></div>
 </div>
diff --git a/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.less b/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.less
index 71d9a59..b29ae48 100644
--- a/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.less
+++ b/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.less
@@ -1,5 +1,24 @@
-.search_body {
-    .separator {
-        height: 20px;
-    }   
+@import '../../../common.less';
+
+:host {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+
+    .search_body {
+        display: flex;
+        flex-flow: column;
+        gap: 20px;
+        max-width: @container-width;
+        width: 100%;
+        padding: 8px 0;
+
+        .loading {
+            height: 120px;
+            width: 100%;
+            max-width: @container-width;
+        }
+    }
 }
\ No newline at end of file
diff --git a/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.ts b/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.ts
index 840ebdb..e8db065 100644
--- a/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.ts
+++ b/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Inject, HostListener, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, Inject, HostListener, Output, EventEmitter, OnDestroy, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { SearchState } from '../search-state/search-state';
 import { SearchManager, SearchOutcome } from '../search-manager/search-manager';
 import { take, skip, first } from 'rxjs/operators';
@@ -15,17 +15,20 @@ import { PlatformService } from '../../common-components/platform.service';
   templateUrl: './vertical-results.component.html',
   styleUrls: ['./vertical-results.component.less']
 })
-export class VerticalResultsComponent implements OnInit, OnDestroy {
+export class VerticalResultsComponent implements OnInit, OnDestroy, AfterViewInit {
 
   @Input() state: SearchState;
   @Input() bare = false;
   @Output() searching = new EventEmitter<boolean>();
 
+  @ViewChild('more') moreElement: ElementRef;
+  
   searchManager: SearchManager;
 
   // Autofetch control
   gotMore = false;
   lastOutcome: SearchOutcome;
+  moreObserver: IntersectionObserver;
 
   constructor(
     private searchService: SearchApiService,
@@ -49,12 +52,12 @@ export class VerticalResultsComponent implements OnInit, OnDestroy {
       this.lastOutcome = outcome;
       this.searching.emit(outcome.isSearching);
     });
+  }
 
+  ngAfterViewInit() {
     this.ps.browser(() => {
-      scheduled(fromEvent(window, 'scroll'), animationFrameScheduler).pipe(
-        untilDestroyed(this),
-      ).subscribe(() => {
-        if (window.innerHeight + window.scrollY + 300 > window.document.body.scrollHeight) {
+      this.moreObserver = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
           if (!this.gotMore) {
             this.gotMore = true;
             this.searchManager.getMore();
@@ -64,6 +67,7 @@ export class VerticalResultsComponent implements OnInit, OnDestroy {
           }
         }
       });
+      this.moreObserver.observe(this.moreElement?.nativeElement);
     });
   }
 
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-facebook-hover.svg b/projects/budgetkey/src/assets/common/img/icon-share-facebook-hover.svg
new file mode 100644
index 0000000..dd1c9ed
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-facebook-hover.svg
@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="54" height="54" rx="27" fill="#405790"/>
+<path d="M33.5 19.503C33.5 19.3704 33.4473 19.2432 33.3536 19.1494C33.2598 19.0557 33.1326 19.003 33 19.003H30.5C29.2411 18.9403 28.0086 19.3784 27.0717 20.2216C26.1348 21.0648 25.5698 22.2445 25.5 23.503V26.203H23C22.8674 26.203 22.7402 26.2557 22.6464 26.3494C22.5527 26.4432 22.5 26.5704 22.5 26.703V29.303C22.5 29.4356 22.5527 29.5628 22.6464 29.6565C22.7402 29.7503 22.8674 29.803 23 29.803H25.5V36.503C25.5 36.6356 25.5527 36.7628 25.6464 36.8565C25.7402 36.9503 25.8674 37.003 26 37.003H29C29.1326 37.003 29.2598 36.9503 29.3536 36.8565C29.4473 36.7628 29.5 36.6356 29.5 36.503V29.803H32.12C32.2312 29.8046 32.3397 29.7691 32.4285 29.7021C32.5172 29.635 32.5811 29.5404 32.61 29.433L33.33 26.833C33.3499 26.7591 33.3526 26.6816 33.3378 26.6066C33.3231 26.5315 33.2913 26.4608 33.2449 26.4C33.1985 26.3391 33.1388 26.2897 33.0704 26.2555C33.0019 26.2214 32.9265 26.2034 32.85 26.203H29.5V23.503C29.5249 23.2555 29.6411 23.0261 29.826 22.8597C30.0109 22.6933 30.2512 22.6017 30.5 22.603H33C33.1326 22.603 33.2598 22.5503 33.3536 22.4565C33.4473 22.3628 33.5 22.2356 33.5 22.103V19.503Z" fill="white"/>
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#405790" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-facebook.svg b/projects/budgetkey/src/assets/common/img/icon-share-facebook.svg
new file mode 100644
index 0000000..f3490a1
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-facebook.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.5 19.503C33.5 19.3704 33.4473 19.2432 33.3536 19.1494C33.2598 19.0557 33.1326 19.003 33 19.003H30.5C29.2411 18.9403 28.0086 19.3784 27.0717 20.2216C26.1348 21.0648 25.5698 22.2445 25.5 23.503V26.203H23C22.8674 26.203 22.7402 26.2557 22.6464 26.3494C22.5527 26.4432 22.5 26.5704 22.5 26.703V29.303C22.5 29.4356 22.5527 29.5628 22.6464 29.6565C22.7402 29.7503 22.8674 29.803 23 29.803H25.5V36.503C25.5 36.6356 25.5527 36.7628 25.6464 36.8565C25.7402 36.9503 25.8674 37.003 26 37.003H29C29.1326 37.003 29.2598 36.9503 29.3536 36.8565C29.4473 36.7628 29.5 36.6356 29.5 36.503V29.803H32.12C32.2312 29.8046 32.3397 29.7691 32.4285 29.7021C32.5172 29.635 32.5811 29.5404 32.61 29.433L33.33 26.833C33.3499 26.7591 33.3526 26.6816 33.3378 26.6066C33.3231 26.5315 33.2913 26.4608 33.2449 26.4C33.1985 26.3391 33.1388 26.2897 33.0704 26.2555C33.0019 26.2214 32.9265 26.2034 32.85 26.203H29.5V23.503C29.5249 23.2555 29.6411 23.0261 29.826 22.8597C30.0109 22.6933 30.2512 22.6017 30.5 22.603H33C33.1326 22.603 33.2598 22.5503 33.3536 22.4565C33.4473 22.3628 33.5 22.2356 33.5 22.103V19.503Z" fill="#405790"/>
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#405790" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-main.svg b/projects/budgetkey/src/assets/common/img/icon-share-main.svg
new file mode 100644
index 0000000..34b3e85
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-main.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="8 8 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="9" width="38" height="38" rx="25" fill="#FF5A5F"/>
+<path d="M27.293 18.2928C27.4805 18.1053 27.7348 18 28 18C28.2652 18 28.5195 18.1053 28.707 18.2928L31.707 21.2928C31.8892 21.4814 31.99 21.734 31.9877 21.9962C31.9854 22.2584 31.8802 22.5092 31.6948 22.6946C31.5094 22.88 31.2586 22.9852 30.9964 22.9875C30.7342 22.9897 30.4816 22.8889 30.293 22.7068L29 21.4138V30.9998C29 31.265 28.8946 31.5194 28.7071 31.7069C28.5196 31.8944 28.2652 31.9998 28 31.9998C27.7348 31.9998 27.4804 31.8944 27.2929 31.7069C27.1054 31.5194 27 31.265 27 30.9998V21.4138L25.707 22.7068C25.5184 22.8889 25.2658 22.9897 25.0036 22.9875C24.7414 22.9852 24.4906 22.88 24.3052 22.6946C24.1198 22.5092 24.0146 22.2584 24.0123 21.9962C24.01 21.734 24.1108 21.4814 24.293 21.2928L27.293 18.2928ZM20 26.9998C20 26.4694 20.2107 25.9606 20.5858 25.5856C20.9609 25.2105 21.4696 24.9998 22 24.9998H24C24.2652 24.9998 24.5196 25.1051 24.7071 25.2927C24.8946 25.4802 25 25.7346 25 25.9998C25 26.265 24.8946 26.5194 24.7071 26.7069C24.5196 26.8944 24.2652 26.9998 24 26.9998H22V35.9998H34V26.9998H32C31.7348 26.9998 31.4804 26.8944 31.2929 26.7069C31.1054 26.5194 31 26.265 31 25.9998C31 25.7346 31.1054 25.4802 31.2929 25.2927C31.4804 25.1051 31.7348 24.9998 32 24.9998H34C34.5304 24.9998 35.0391 25.2105 35.4142 25.5856C35.7893 25.9606 36 26.4694 36 26.9998V35.9998C36 36.5302 35.7893 37.0389 35.4142 37.414C35.0391 37.7891 34.5304 37.9998 34 37.9998H22C21.4696 37.9998 20.9609 37.7891 20.5858 37.414C20.2107 37.0389 20 36.5302 20 35.9998V26.9998Z" fill="white"/>
+<rect x="9" y="9" width="38" height="38" rx="25" stroke="#FF5A5F" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-mobile-share-hover.svg b/projects/budgetkey/src/assets/common/img/icon-share-mobile-share-hover.svg
new file mode 100644
index 0000000..4b62faa
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-mobile-share-hover.svg
@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="54" height="54" rx="27" fill="#0052B4"/>
+<path d="M27.293 18.2928C27.4805 18.1053 27.7348 18 28 18C28.2652 18 28.5195 18.1053 28.707 18.2928L31.707 21.2928C31.8892 21.4814 31.99 21.734 31.9877 21.9962C31.9854 22.2584 31.8802 22.5092 31.6948 22.6946C31.5094 22.88 31.2586 22.9852 30.9964 22.9875C30.7342 22.9897 30.4816 22.8889 30.293 22.7068L29 21.4138V30.9998C29 31.265 28.8946 31.5194 28.7071 31.7069C28.5196 31.8944 28.2652 31.9998 28 31.9998C27.7348 31.9998 27.4804 31.8944 27.2929 31.7069C27.1054 31.5194 27 31.265 27 30.9998V21.4138L25.707 22.7068C25.5184 22.8889 25.2658 22.9897 25.0036 22.9875C24.7414 22.9852 24.4906 22.88 24.3052 22.6946C24.1198 22.5092 24.0146 22.2584 24.0123 21.9962C24.01 21.734 24.1108 21.4814 24.293 21.2928L27.293 18.2928ZM20 26.9998C20 26.4694 20.2107 25.9606 20.5858 25.5856C20.9609 25.2105 21.4696 24.9998 22 24.9998H24C24.2652 24.9998 24.5196 25.1051 24.7071 25.2927C24.8946 25.4802 25 25.7346 25 25.9998C25 26.265 24.8946 26.5194 24.7071 26.7069C24.5196 26.8944 24.2652 26.9998 24 26.9998H22V35.9998H34V26.9998H32C31.7348 26.9998 31.4804 26.8944 31.2929 26.7069C31.1054 26.5194 31 26.265 31 25.9998C31 25.7346 31.1054 25.4802 31.2929 25.2927C31.4804 25.1051 31.7348 24.9998 32 24.9998H34C34.5304 24.9998 35.0391 25.2105 35.4142 25.5856C35.7893 25.9606 36 26.4694 36 26.9998V35.9998C36 36.5302 35.7893 37.0389 35.4142 37.414C35.0391 37.7891 34.5304 37.9998 34 37.9998H22C21.4696 37.9998 20.9609 37.7891 20.5858 37.414C20.2107 37.0389 20 36.5302 20 35.9998V26.9998Z" fill="white"/>
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#0052B4" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-mobile-share.svg b/projects/budgetkey/src/assets/common/img/icon-share-mobile-share.svg
new file mode 100644
index 0000000..9778f5a
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-mobile-share.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.293 18.2928C27.4805 18.1053 27.7348 18 28 18C28.2652 18 28.5195 18.1053 28.707 18.2928L31.707 21.2928C31.8892 21.4814 31.99 21.734 31.9877 21.9962C31.9854 22.2584 31.8802 22.5092 31.6948 22.6946C31.5094 22.88 31.2586 22.9852 30.9964 22.9875C30.7342 22.9897 30.4816 22.8889 30.293 22.7068L29 21.4138V30.9998C29 31.265 28.8946 31.5194 28.7071 31.7069C28.5196 31.8944 28.2652 31.9998 28 31.9998C27.7348 31.9998 27.4804 31.8944 27.2929 31.7069C27.1054 31.5194 27 31.265 27 30.9998V21.4138L25.707 22.7068C25.5184 22.8889 25.2658 22.9897 25.0036 22.9875C24.7414 22.9852 24.4906 22.88 24.3052 22.6946C24.1198 22.5092 24.0146 22.2584 24.0123 21.9962C24.01 21.734 24.1108 21.4814 24.293 21.2928L27.293 18.2928ZM20 26.9998C20 26.4694 20.2107 25.9606 20.5858 25.5856C20.9609 25.2105 21.4696 24.9998 22 24.9998H24C24.2652 24.9998 24.5196 25.1051 24.7071 25.2927C24.8946 25.4802 25 25.7346 25 25.9998C25 26.265 24.8946 26.5194 24.7071 26.7069C24.5196 26.8944 24.2652 26.9998 24 26.9998H22V35.9998H34V26.9998H32C31.7348 26.9998 31.4804 26.8944 31.2929 26.7069C31.1054 26.5194 31 26.265 31 25.9998C31 25.7346 31.1054 25.4802 31.2929 25.2927C31.4804 25.1051 31.7348 24.9998 32 24.9998H34C34.5304 24.9998 35.0391 25.2105 35.4142 25.5856C35.7893 25.9606 36 26.4694 36 26.9998V35.9998C36 36.5302 35.7893 37.0389 35.4142 37.414C35.0391 37.7891 34.5304 37.9998 34 37.9998H22C21.4696 37.9998 20.9609 37.7891 20.5858 37.414C20.2107 37.0389 20 36.5302 20 35.9998V26.9998Z" fill="#0052B4"/>
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#0052B4" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-twitter-hover.svg b/projects/budgetkey/src/assets/common/img/icon-share-twitter-hover.svg
new file mode 100644
index 0000000..cde1eb7
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-twitter-hover.svg
@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="54" height="54" rx="27" fill="#4FA0EB"/>
+<path d="M24.0705 35.9954C25.5492 36.0449 27.0228 35.7974 28.4042 35.2677C29.7856 34.738 31.0469 33.9367 32.1134 32.9112C33.1798 31.8857 34.0299 30.6569 34.6134 29.2973C35.1969 27.9377 35.5019 26.4749 35.5105 24.9954C36.1881 24.1568 36.6913 23.1912 36.9905 22.1554C37.0128 22.0736 37.011 21.987 36.9853 21.9062C36.9596 21.8253 36.911 21.7537 36.8455 21.6998C36.78 21.6459 36.7003 21.6121 36.616 21.6024C36.5317 21.5928 36.4465 21.6077 36.3705 21.6454C36.0159 21.8161 35.6168 21.8712 35.2293 21.803C34.8418 21.7348 34.4854 21.5468 34.2105 21.2654C33.8594 20.881 33.4348 20.5709 32.9617 20.3536C32.4886 20.1363 31.9768 20.0162 31.4564 20.0003C30.9361 19.9845 30.4178 20.0732 29.9324 20.2613C29.447 20.4494 29.0043 20.7331 28.6305 21.0954C28.1187 21.5911 27.7438 22.2107 27.5423 22.8941C27.3408 23.5775 27.3195 24.3014 27.4805 24.9954C24.1305 25.1954 21.8305 23.6054 19.9905 21.4254C19.9352 21.3628 19.8629 21.3177 19.7824 21.2955C19.7019 21.2733 19.6166 21.275 19.5371 21.3005C19.4575 21.3259 19.3871 21.374 19.3345 21.4388C19.2818 21.5036 19.2491 21.5823 19.2405 21.6654C18.8899 23.6098 19.1428 25.615 19.9651 27.4115C20.7874 29.208 22.1397 30.7099 23.8405 31.7154C22.7001 33.0232 21.0987 33.8401 19.3705 33.9954C19.2779 34.0108 19.1924 34.0547 19.126 34.121C19.0596 34.1874 19.0156 34.2728 19.0002 34.3654C18.9848 34.4579 18.9987 34.553 19.04 34.6373C19.0812 34.7216 19.1479 34.7909 19.2305 34.8354C20.734 35.5868 22.3897 35.9836 24.0705 35.9954Z" fill="white"/>
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#4FA0EB" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-twitter.svg b/projects/budgetkey/src/assets/common/img/icon-share-twitter.svg
new file mode 100644
index 0000000..209c5bc
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-twitter.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.0705 35.9954C25.5492 36.0449 27.0228 35.7974 28.4042 35.2677C29.7856 34.738 31.0469 33.9367 32.1134 32.9112C33.1798 31.8857 34.0299 30.6569 34.6134 29.2973C35.1969 27.9377 35.5019 26.4749 35.5105 24.9954C36.1881 24.1568 36.6913 23.1912 36.9905 22.1554C37.0128 22.0736 37.011 21.987 36.9853 21.9062C36.9596 21.8253 36.911 21.7537 36.8455 21.6998C36.78 21.6459 36.7003 21.6121 36.616 21.6024C36.5317 21.5928 36.4465 21.6077 36.3705 21.6454C36.0159 21.8161 35.6168 21.8712 35.2293 21.803C34.8418 21.7348 34.4854 21.5468 34.2105 21.2654C33.8594 20.881 33.4348 20.5709 32.9617 20.3536C32.4886 20.1363 31.9768 20.0162 31.4564 20.0003C30.9361 19.9845 30.4178 20.0732 29.9324 20.2613C29.447 20.4494 29.0043 20.7331 28.6305 21.0954C28.1187 21.5911 27.7438 22.2107 27.5423 22.8941C27.3408 23.5775 27.3195 24.3014 27.4805 24.9954C24.1305 25.1954 21.8305 23.6054 19.9905 21.4254C19.9352 21.3628 19.8629 21.3177 19.7824 21.2955C19.7019 21.2733 19.6166 21.275 19.5371 21.3005C19.4575 21.3259 19.3871 21.374 19.3345 21.4388C19.2818 21.5036 19.2491 21.5823 19.2405 21.6654C18.8899 23.6098 19.1428 25.615 19.9651 27.4115C20.7874 29.208 22.1397 30.7099 23.8405 31.7154C22.7001 33.0232 21.0987 33.8401 19.3705 33.9954C19.2779 34.0108 19.1924 34.0547 19.126 34.121C19.0596 34.1874 19.0156 34.2728 19.0002 34.3654C18.9848 34.4579 18.9987 34.553 19.04 34.6373C19.0812 34.7216 19.1479 34.7909 19.2305 34.8354C20.734 35.5868 22.3897 35.9836 24.0705 35.9954Z" fill="#4FA0EB"/>
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#4FA0EB" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-whatsapp-hover.svg b/projects/budgetkey/src/assets/common/img/icon-share-whatsapp-hover.svg
new file mode 100644
index 0000000..13c6c24
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-whatsapp-hover.svg
@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="54" height="54" rx="27" fill="#6BC879"/>
+<path d="M18.004 38L19.356 33.032C18.4652 31.5049 17.9971 29.768 18 28C18 22.477 22.477 18 28 18C33.523 18 38 22.477 38 28C38 33.523 33.523 38 28 38C26.2328 38.0029 24.4967 37.5352 22.97 36.645L18.004 38ZM24.391 23.308C24.2619 23.316 24.1357 23.35 24.02 23.408C23.9115 23.4694 23.8125 23.5462 23.726 23.636C23.606 23.749 23.538 23.847 23.465 23.942C23.0954 24.423 22.8966 25.0134 22.9 25.62C22.902 26.11 23.03 26.587 23.23 27.033C23.639 27.935 24.312 28.89 25.201 29.775C25.415 29.988 25.624 30.202 25.849 30.401C26.9524 31.3725 28.2673 32.073 29.689 32.447L30.258 32.534C30.443 32.544 30.628 32.53 30.814 32.521C31.1053 32.506 31.3896 32.4271 31.647 32.29C31.778 32.2225 31.9058 32.1491 32.03 32.07C32.03 32.07 32.073 32.042 32.155 31.98C32.29 31.88 32.373 31.809 32.485 31.692C32.568 31.606 32.64 31.505 32.695 31.39C32.773 31.227 32.851 30.916 32.883 30.657C32.907 30.459 32.9 30.351 32.897 30.284C32.893 30.177 32.804 30.066 32.707 30.019L32.125 29.758C32.125 29.758 31.255 29.379 30.724 29.137C30.668 29.1126 30.608 29.0987 30.547 29.096C30.4786 29.089 30.4095 29.0967 30.3443 29.1186C30.2791 29.1405 30.2193 29.1761 30.169 29.223V29.221C30.164 29.221 30.097 29.278 29.374 30.154C29.3325 30.2098 29.2754 30.2519 29.2098 30.2751C29.1443 30.2982 29.0733 30.3013 29.006 30.284C28.9409 30.2666 28.877 30.2445 28.815 30.218C28.691 30.166 28.648 30.146 28.563 30.109L28.558 30.107C27.9859 29.8572 27.4562 29.5198 26.988 29.107C26.862 28.997 26.745 28.877 26.625 28.761C26.2316 28.3842 25.8887 27.958 25.605 27.493L25.546 27.398C25.5036 27.3342 25.4694 27.2653 25.444 27.193C25.406 27.046 25.505 26.928 25.505 26.928C25.505 26.928 25.748 26.662 25.861 26.518C25.9551 26.3983 26.0429 26.2738 26.124 26.145C26.242 25.955 26.279 25.76 26.217 25.609C25.937 24.925 25.647 24.244 25.349 23.568C25.29 23.434 25.115 23.338 24.956 23.319C24.902 23.313 24.848 23.307 24.794 23.303C24.6597 23.2963 24.5251 23.2987 24.391 23.308Z" fill="white"/>
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#6BC879" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/common/img/icon-share-whatsapp.svg b/projects/budgetkey/src/assets/common/img/icon-share-whatsapp.svg
new file mode 100644
index 0000000..240071b
--- /dev/null
+++ b/projects/budgetkey/src/assets/common/img/icon-share-whatsapp.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.004 38L19.356 33.032C18.4652 31.5049 17.9971 29.768 18 28C18 22.477 22.477 18 28 18C33.523 18 38 22.477 38 28C38 33.523 33.523 38 28 38C26.2328 38.0029 24.4967 37.5352 22.97 36.645L18.004 38ZM24.391 23.308C24.2619 23.316 24.1357 23.35 24.02 23.408C23.9115 23.4694 23.8125 23.5462 23.726 23.636C23.606 23.749 23.538 23.847 23.465 23.942C23.0954 24.423 22.8966 25.0134 22.9 25.62C22.902 26.11 23.03 26.587 23.23 27.033C23.639 27.935 24.312 28.89 25.201 29.775C25.415 29.988 25.624 30.202 25.849 30.401C26.9524 31.3725 28.2673 32.073 29.689 32.447L30.258 32.534C30.443 32.544 30.628 32.53 30.814 32.521C31.1053 32.506 31.3896 32.4271 31.647 32.29C31.778 32.2225 31.9058 32.1491 32.03 32.07C32.03 32.07 32.073 32.042 32.155 31.98C32.29 31.88 32.373 31.809 32.485 31.692C32.568 31.606 32.64 31.505 32.695 31.39C32.773 31.227 32.851 30.916 32.883 30.657C32.907 30.459 32.9 30.351 32.897 30.284C32.893 30.177 32.804 30.066 32.707 30.019L32.125 29.758C32.125 29.758 31.255 29.379 30.724 29.137C30.668 29.1126 30.608 29.0987 30.547 29.096C30.4786 29.089 30.4095 29.0967 30.3443 29.1186C30.2791 29.1405 30.2193 29.1761 30.169 29.223V29.221C30.164 29.221 30.097 29.278 29.374 30.154C29.3325 30.2098 29.2754 30.2519 29.2098 30.2751C29.1443 30.2982 29.0733 30.3013 29.006 30.284C28.9409 30.2666 28.877 30.2445 28.815 30.218C28.691 30.166 28.648 30.146 28.563 30.109L28.558 30.107C27.9859 29.8572 27.4562 29.5198 26.988 29.107C26.862 28.997 26.745 28.877 26.625 28.761C26.2316 28.3842 25.8887 27.958 25.605 27.493L25.546 27.398C25.5036 27.3342 25.4694 27.2653 25.444 27.193C25.406 27.046 25.505 26.928 25.505 26.928C25.505 26.928 25.748 26.662 25.861 26.518C25.9551 26.3983 26.0429 26.2738 26.124 26.145C26.242 25.955 26.279 25.76 26.217 25.609C25.937 24.925 25.647 24.244 25.349 23.568C25.29 23.434 25.115 23.338 24.956 23.319C24.902 23.313 24.848 23.307 24.794 23.303C24.6597 23.2963 24.5251 23.2987 24.391 23.308Z" fill="#6BC879"/>
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#6BC879" stroke-width="2"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.eot b/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.eot
new file mode 100644
index 0000000..0f3648a
Binary files /dev/null and b/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.eot differ
diff --git a/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.woff b/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.woff
new file mode 100644
index 0000000..6753909
Binary files /dev/null and b/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.woff differ
diff --git a/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.woff2 b/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.woff2
new file mode 100644
index 0000000..9296eb3
Binary files /dev/null and b/projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.woff2 differ
diff --git a/projects/budgetkey/src/assets/fonts/gadi-almog.less b/projects/budgetkey/src/assets/fonts/gadi-almog.less
new file mode 100644
index 0000000..a7ba64b
--- /dev/null
+++ b/projects/budgetkey/src/assets/fonts/gadi-almog.less
@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'Gadi Almog';
+    src: url('./gadi-almog-regular-aaa.eot');
+    src: url('./gadi-almog-regular-aaa.eot?#iefix') format('embedded-opentype'),
+         url('./gadi-almog-regular-aaa.woff') format('woff'),
+         url('./gadi-almog-regular-aaa.woff2') format('woff2');
+    font-weight: regular;
+    font-style: normal;
+}
diff --git a/projects/budgetkey/src/assets/img/404.png b/projects/budgetkey/src/assets/img/404.png
new file mode 100644
index 0000000..427545e
Binary files /dev/null and b/projects/budgetkey/src/assets/img/404.png differ
diff --git a/projects/budgetkey/src/assets/img/og.png b/projects/budgetkey/src/assets/img/og.png
new file mode 100644
index 0000000..2ff5b05
Binary files /dev/null and b/projects/budgetkey/src/assets/img/og.png differ
diff --git a/projects/budgetkey/src/assets/lists/bg.png b/projects/budgetkey/src/assets/lists/bg.png
new file mode 100644
index 0000000..437f9d4
Binary files /dev/null and b/projects/budgetkey/src/assets/lists/bg.png differ
diff --git a/projects/budgetkey/src/assets/lists/icon-check-red.svg b/projects/budgetkey/src/assets/lists/icon-check-red.svg
new file mode 100644
index 0000000..2410b4c
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-check-red.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1.05444" width="23.0022" height="23.0022" rx="11.5" stroke="#FF5A5F"/>
+<path d="M16.8949 10.0555L11.001 15.9495L8.10706 13.0555" stroke="#FF5A5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-chevron-down-grayish-blue.svg b/projects/budgetkey/src/assets/lists/icon-chevron-down-grayish-blue.svg
new file mode 100644
index 0000000..a41b399
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-chevron-down-grayish-blue.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
+<path d="M2.53033 4.05634C2.23744 3.76345 1.76256 3.76345 1.46967 4.05634C1.17678 4.34923 1.17678 4.82411 1.46967 5.117L5.46967 9.117C5.76256 9.40989 6.23744 9.40989 6.53033 9.117L10.5303 5.117C10.8232 4.82411 10.8232 4.34923 10.5303 4.05634C10.2374 3.76345 9.76256 3.76345 9.46967 4.05634L6 7.52601L2.53033 4.05634Z" fill="#496097"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-close-gray-500.svg b/projects/budgetkey/src/assets/lists/icon-close-gray-500.svg
new file mode 100644
index 0000000..c281aa1
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-close-gray-500.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.41525 8.00105L15.7085 1.70707C16.099 1.31652 16.099 0.683356 15.7084 0.292854C15.3179 -0.0976492 14.6847 -0.0976133 14.2942 0.292934L8.00096 6.58691L1.70707 0.293736C1.31652 -0.0967664 0.683355 -0.0967305 0.292853 0.293816C-0.097649 0.684362 -0.0976131 1.31753 0.292933 1.70803L6.58682 8.00121L0.293614 14.2951C-0.0968882 14.6857 -0.0968523 15.3188 0.293694 15.7093C0.68424 16.0998 1.31741 16.0998 1.70791 15.7093L8.00112 9.41534L14.2951 15.7086C14.6857 16.0991 15.3188 16.0991 15.7093 15.7086C16.0998 15.318 16.0998 14.6848 15.7093 14.2943L9.41525 8.00105Z" fill="#979797"/>
+</svg>
\ No newline at end of file
diff --git a/projects/budgetkey/src/assets/lists/icon-complete-red.svg b/projects/budgetkey/src/assets/lists/icon-complete-red.svg
new file mode 100644
index 0000000..470927f
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-complete-red.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+<rect x="0.5" y="1.08667" width="23.0022" height="23.0022" rx="11.5" stroke="#FF5A5F"/>
+<path d="M16.3949 10.0878L10.501 15.9817L7.60706 13.0878" stroke="#FF5A5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-copy-to-clipboard.svg b/projects/budgetkey/src/assets/lists/icon-copy-to-clipboard.svg
new file mode 100644
index 0000000..cd00b25
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-copy-to-clipboard.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="14" fill="#E6E0E1"/>
+<path d="M13.7752 9.27518L15.0252 8.02518C15.3502 7.70016 15.7361 7.44234 16.1607 7.26644C16.5854 7.09053 17.0405 7 17.5002 7C17.9598 7 18.415 7.09053 18.8396 7.26644C19.2643 7.44234 19.6502 7.70016 19.9752 8.02518C20.3002 8.3502 20.558 8.73606 20.7339 9.16072C20.9098 9.58538 21.0004 10.0405 21.0004 10.5002C21.0004 10.9598 20.9098 11.415 20.7339 11.8396C20.558 12.2643 20.3002 12.6502 19.9752 12.9752L17.4752 15.4752C17.1502 15.8002 16.7643 16.0581 16.3397 16.234C15.915 16.4099 15.4598 16.5004 15.0002 16.5004C14.5405 16.5004 14.0854 16.4099 13.6607 16.234C13.236 16.0581 12.8502 15.8002 12.5252 15.4752C12.3928 15.3329 12.3207 15.1449 12.324 14.9505C12.3274 14.7562 12.4059 14.5708 12.5432 14.4332C12.6808 14.2959 12.8662 14.2174 13.0605 14.214C13.2549 14.2107 13.4429 14.2828 13.5852 14.4152C13.7708 14.6014 13.9913 14.7491 14.2341 14.8499C14.477 14.9507 14.7373 15.0026 15.0002 15.0026C15.2631 15.0026 15.5234 14.9507 15.7662 14.8499C16.009 14.7491 16.2296 14.6014 16.4152 14.4152L18.9152 11.9152C19.2722 11.5362 19.4676 11.0331 19.4598 10.5125C19.452 9.99194 19.2418 9.49485 18.8737 9.12671C18.5055 8.75856 18.0084 8.54831 17.4878 8.54056C16.9673 8.5328 16.4641 8.72816 16.0852 9.08518L14.8352 10.3352C14.6929 10.4676 14.5049 10.5397 14.3105 10.5363C14.1162 10.533 13.9308 10.4544 13.7932 10.3172C13.6559 10.1796 13.5774 9.99413 13.574 9.79981C13.5707 9.60549 13.6428 9.41744 13.7752 9.27518ZM9.08518 18.9152C9.27079 19.1014 9.49132 19.2491 9.73414 19.3499C9.97695 19.4507 10.2373 19.5026 10.5002 19.5026C10.7631 19.5026 11.0234 19.4507 11.2662 19.3499C11.509 19.2491 11.7296 19.1014 11.9152 18.9152L13.1652 17.6652C13.3074 17.5328 13.4955 17.4607 13.6898 17.464C13.8841 17.4674 14.0696 17.5459 14.2072 17.6832C14.3444 17.8208 14.423 18.0062 14.4263 18.2005C14.4297 18.3949 14.3576 18.5829 14.2252 18.7252L12.9752 19.9752C12.6502 20.3002 12.2643 20.558 11.8396 20.7339C11.415 20.9098 10.9598 21.0004 10.5002 21.0004C9.57187 21.0004 8.68159 20.6316 8.02518 19.9752C7.36877 19.3188 7 18.4285 7 17.5002C7 16.5719 7.36877 15.6816 8.02518 15.0252L10.5252 12.5252C10.8502 12.2001 11.236 11.9423 11.6607 11.7664C12.0854 11.5905 12.5405 11.4999 13.0002 11.4999C13.4598 11.4999 13.915 11.5905 14.3397 11.7664C14.7643 11.9423 15.1502 12.2001 15.4752 12.5252C15.6076 12.6674 15.6797 12.8555 15.6763 13.0498C15.673 13.2441 15.5944 13.4296 15.4572 13.5672C15.3196 13.7044 15.1341 13.783 14.9398 13.7863C14.7455 13.7897 14.5574 13.7176 14.4152 13.5852C14.2296 13.399 14.009 13.2513 13.7662 13.1505C13.5234 13.0497 13.2631 12.9978 13.0002 12.9978C12.7373 12.9978 12.477 13.0497 12.2341 13.1505C11.9913 13.2513 11.7708 13.399 11.5852 13.5852L9.08518 16.0852C8.89899 16.2708 8.75126 16.4913 8.65046 16.7341C8.54966 16.977 8.49777 17.2373 8.49777 17.5002C8.49777 17.7631 8.54966 18.0234 8.65046 18.2662C8.75126 18.509 8.89899 18.7296 9.08518 18.9152Z" fill="#FF5A5F"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-edit-gray-400.svg b/projects/budgetkey/src/assets/lists/icon-edit-gray-400.svg
new file mode 100644
index 0000000..a0d0328
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-edit-gray-400.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M3.6215 8.49222H9.5V9.49222H0.5V7.37122L5.45 2.42122L7.571 4.54272L3.621 8.49272L3.6215 8.49222ZM6.1565 1.71422L7.2175 0.653717C7.31126 0.559982 7.43842 0.507324 7.571 0.507324C7.70358 0.507324 7.83074 0.559982 7.9245 0.653717L9.339 2.06772C9.43274 2.16148 9.48539 2.28864 9.48539 2.42122C9.48539 2.5538 9.43274 2.68095 9.339 2.77472L8.278 3.83572L6.157 1.71422H6.1565Z" fill="#998B8C"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-edit.svg b/projects/budgetkey/src/assets/lists/icon-edit.svg
new file mode 100644
index 0000000..87700af
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-edit.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.6215 11.4922H12.5V12.4922H3.5V10.3712L8.45 5.42122L10.571 7.54272L6.621 11.4927L6.6215 11.4922ZM9.1565 4.71422L10.2175 3.65372C10.3113 3.55998 10.4384 3.50732 10.571 3.50732C10.7036 3.50732 10.8307 3.55998 10.9245 3.65372L12.339 5.06772C12.4327 5.16148 12.4854 5.28864 12.4854 5.42122C12.4854 5.5538 12.4327 5.68095 12.339 5.77472L11.278 6.83572L9.157 4.71422H9.1565Z" fill="#496097"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-fullscreen-gray-500.svg b/projects/budgetkey/src/assets/lists/icon-fullscreen-gray-500.svg
new file mode 100644
index 0000000..5180c06
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-fullscreen-gray-500.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5818 2.00098L11.0018 2.00098C10.7366 2.00098 10.4823 1.89562 10.2947 1.70808C10.1072 1.52055 10.0018 1.26619 10.0018 1.00098C10.0018 0.73576 10.1072 0.481406 10.2947 0.29387C10.4823 0.106333 10.7366 0.000976563 11.0018 0.000976563L15.0018 0.000976563C15.267 0.000976563 15.5214 0.106333 15.7089 0.29387C15.8965 0.481406 16.0018 0.73576 16.0018 1.00098V5.00098C16.0018 5.26619 15.8965 5.52055 15.7089 5.70808C15.5214 5.89562 15.267 6.00098 15.0018 6.00098C14.7366 6.00098 14.4823 5.89562 14.2947 5.70808C14.1072 5.52055 14.0018 5.26619 14.0018 5.00098V3.42098L10.7118 6.70098C10.6189 6.7947 10.5083 6.8691 10.3864 6.91987C10.2645 6.97064 10.1338 6.99677 10.0018 6.99677C9.86982 6.99677 9.73911 6.97064 9.61725 6.91987C9.49539 6.8691 9.38479 6.7947 9.29183 6.70098C9.1981 6.60801 9.12371 6.49741 9.07294 6.37555C9.02217 6.25369 8.99603 6.12299 8.99603 5.99098C8.99603 5.85896 9.02217 5.72826 9.07294 5.6064C9.12371 5.48454 9.1981 5.37394 9.29183 5.28098L12.5818 2.00098ZM3.42195 14.001H5.00195C5.26717 14.001 5.52152 14.1063 5.70906 14.2939C5.8966 14.4814 6.00195 14.7358 6.00195 15.001C6.00195 15.2662 5.8966 15.5205 5.70906 15.7081C5.52152 15.8956 5.26717 16.001 5.00195 16.001L1.00195 16.001C0.736737 16.001 0.482382 15.8956 0.294846 15.7081C0.107309 15.5205 0.00195312 15.2662 0.00195312 15.001L0.00195312 11.001C0.00195312 10.7358 0.10731 10.4814 0.294846 10.2939C0.482382 10.1063 0.736737 10.001 1.00195 10.001C1.26717 10.001 1.52152 10.1063 1.70906 10.2939C1.8966 10.4814 2.00195 10.7358 2.00195 11.001L2.00195 12.581L5.29195 9.30098C5.38492 9.20725 5.49552 9.13285 5.61738 9.08209C5.73924 9.03132 5.86994 9.00518 6.00195 9.00518C6.13397 9.00518 6.26467 9.03132 6.38653 9.08209C6.50839 9.13285 6.61899 9.20725 6.71195 9.30098C6.80568 9.39394 6.88008 9.50454 6.93084 9.6264C6.98161 9.74826 7.00775 9.87897 7.00775 10.011C7.00775 10.143 6.98161 10.2737 6.93084 10.3956C6.88008 10.5174 6.80568 10.628 6.71195 10.721L3.42195 14.001Z" fill="#979797"/>
+</svg>
\ No newline at end of file
diff --git a/projects/budgetkey/src/assets/lists/icon-list-private-active.svg b/projects/budgetkey/src/assets/lists/icon-list-private-active.svg
new file mode 100644
index 0000000..2e877d4
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-list-private-active.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="14" fill="#332A2A"/>
+<path d="M13.7752 9.27493L15.0252 8.02493C15.3502 7.69991 15.7361 7.44209 16.1607 7.26619C16.5854 7.09029 17.0405 6.99976 17.5002 6.99976C17.9598 6.99976 18.415 7.09029 18.8396 7.26619C19.2643 7.44209 19.6502 7.69991 19.9752 8.02493C20.3002 8.34996 20.558 8.73581 20.7339 9.16047C20.9098 9.58514 21.0004 10.0403 21.0004 10.4999C21.0004 10.9596 20.9098 11.4147 20.7339 11.8394C20.558 12.2641 20.3002 12.6499 19.9752 12.9749L17.4752 15.4749C17.1502 15.8 16.7643 16.0578 16.3397 16.2337C15.915 16.4096 15.4598 16.5002 15.0002 16.5002C14.5405 16.5002 14.0854 16.4096 13.6607 16.2337C13.236 16.0578 12.8502 15.8 12.5252 15.4749C12.3928 15.3327 12.3207 15.1446 12.324 14.9503C12.3274 14.756 12.4059 14.5705 12.5432 14.4329C12.6808 14.2957 12.8662 14.2171 13.0605 14.2138C13.2549 14.2104 13.4429 14.2825 13.5852 14.4149C13.7708 14.6011 13.9913 14.7489 14.2341 14.8497C14.477 14.9505 14.7373 15.0023 15.0002 15.0023C15.2631 15.0023 15.5234 14.9505 15.7662 14.8497C16.009 14.7489 16.2296 14.6011 16.4152 14.4149L18.9152 11.9149C19.2722 11.536 19.4676 11.0329 19.4598 10.5123C19.452 9.9917 19.2418 9.49461 18.8737 9.12646C18.5055 8.75831 18.0084 8.54806 17.4878 8.54031C16.9673 8.53256 16.4641 8.72791 16.0852 9.08493L14.8352 10.3349C14.6929 10.4673 14.5049 10.5394 14.3105 10.5361C14.1162 10.5327 13.9308 10.4542 13.7932 10.3169C13.6559 10.1793 13.5774 9.99388 13.574 9.79956C13.5707 9.60525 13.6428 9.4172 13.7752 9.27493ZM9.08518 18.9149C9.27079 19.1011 9.49132 19.2489 9.73414 19.3497C9.97695 19.4505 10.2373 19.5023 10.5002 19.5023C10.7631 19.5023 11.0234 19.4505 11.2662 19.3497C11.509 19.2489 11.7296 19.1011 11.9152 18.9149L13.1652 17.6649C13.3074 17.5325 13.4955 17.4604 13.6898 17.4638C13.8841 17.4671 14.0696 17.5457 14.2072 17.6829C14.3444 17.8205 14.423 18.006 14.4263 18.2003C14.4297 18.3946 14.3576 18.5827 14.2252 18.7249L12.9752 19.9749C12.6502 20.3 12.2643 20.5578 11.8396 20.7337C11.415 20.9096 10.9598 21.0001 10.5002 21.0001C9.57187 21.0001 8.68159 20.6313 8.02518 19.9749C7.36877 19.3185 7 18.4282 7 17.4999C7 16.5716 7.36877 15.6813 8.02518 15.0249L10.5252 12.5249C10.8502 12.1999 11.236 11.9421 11.6607 11.7661C12.0854 11.5902 12.5405 11.4997 13.0002 11.4997C13.4598 11.4997 13.915 11.5902 14.3397 11.7661C14.7643 11.9421 15.1502 12.1999 15.4752 12.5249C15.6076 12.6672 15.6797 12.8552 15.6763 13.0496C15.673 13.2439 15.5944 13.4293 15.4572 13.5669C15.3196 13.7042 15.1341 13.7827 14.9398 13.7861C14.7455 13.7894 14.5574 13.7173 14.4152 13.5849C14.2296 13.3987 14.009 13.251 13.7662 13.1502C13.5234 13.0494 13.2631 12.9975 13.0002 12.9975C12.7373 12.9975 12.477 13.0494 12.2341 13.1502C11.9913 13.251 11.7708 13.3987 11.5852 13.5849L9.08518 16.0849C8.89899 16.2705 8.75126 16.4911 8.65046 16.7339C8.54966 16.9767 8.49777 17.237 8.49777 17.4999C8.49777 17.7628 8.54966 18.0232 8.65046 18.266C8.75126 18.5088 8.89899 18.7293 9.08518 18.9149Z" fill="white"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-list-private-inactive.svg b/projects/budgetkey/src/assets/lists/icon-list-private-inactive.svg
new file mode 100644
index 0000000..ce44034
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-list-private-inactive.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="14" fill="#F2F0F0"/>
+<path d="M13.7752 9.27493L15.0252 8.02493C15.3502 7.69991 15.7361 7.44209 16.1607 7.26619C16.5854 7.09029 17.0405 6.99976 17.5002 6.99976C17.9598 6.99976 18.415 7.09029 18.8396 7.26619C19.2643 7.44209 19.6502 7.69991 19.9752 8.02493C20.3002 8.34996 20.558 8.73581 20.7339 9.16047C20.9098 9.58514 21.0004 10.0403 21.0004 10.4999C21.0004 10.9596 20.9098 11.4147 20.7339 11.8394C20.558 12.2641 20.3002 12.6499 19.9752 12.9749L17.4752 15.4749C17.1502 15.8 16.7643 16.0578 16.3397 16.2337C15.915 16.4096 15.4598 16.5002 15.0002 16.5002C14.5405 16.5002 14.0854 16.4096 13.6607 16.2337C13.236 16.0578 12.8502 15.8 12.5252 15.4749C12.3928 15.3327 12.3207 15.1446 12.324 14.9503C12.3274 14.756 12.4059 14.5705 12.5432 14.4329C12.6808 14.2957 12.8662 14.2171 13.0605 14.2138C13.2549 14.2104 13.4429 14.2825 13.5852 14.4149C13.7708 14.6011 13.9913 14.7489 14.2341 14.8497C14.477 14.9505 14.7373 15.0023 15.0002 15.0023C15.2631 15.0023 15.5234 14.9505 15.7662 14.8497C16.009 14.7489 16.2296 14.6011 16.4152 14.4149L18.9152 11.9149C19.2722 11.536 19.4676 11.0329 19.4598 10.5123C19.452 9.9917 19.2418 9.49461 18.8737 9.12646C18.5055 8.75831 18.0084 8.54806 17.4878 8.54031C16.9673 8.53256 16.4641 8.72791 16.0852 9.08493L14.8352 10.3349C14.6929 10.4673 14.5049 10.5394 14.3105 10.5361C14.1162 10.5327 13.9308 10.4542 13.7932 10.3169C13.6559 10.1793 13.5774 9.99388 13.574 9.79956C13.5707 9.60525 13.6428 9.4172 13.7752 9.27493ZM9.08518 18.9149C9.27079 19.1011 9.49132 19.2489 9.73414 19.3497C9.97695 19.4505 10.2373 19.5023 10.5002 19.5023C10.7631 19.5023 11.0234 19.4505 11.2662 19.3497C11.509 19.2489 11.7296 19.1011 11.9152 18.9149L13.1652 17.6649C13.3074 17.5325 13.4955 17.4604 13.6898 17.4638C13.8841 17.4671 14.0696 17.5457 14.2072 17.6829C14.3444 17.8205 14.423 18.006 14.4263 18.2003C14.4297 18.3946 14.3576 18.5827 14.2252 18.7249L12.9752 19.9749C12.6502 20.3 12.2643 20.5578 11.8396 20.7337C11.415 20.9096 10.9598 21.0001 10.5002 21.0001C9.57187 21.0001 8.68159 20.6313 8.02518 19.9749C7.36877 19.3185 7 18.4282 7 17.4999C7 16.5716 7.36877 15.6813 8.02518 15.0249L10.5252 12.5249C10.8502 12.1999 11.236 11.9421 11.6607 11.7661C12.0854 11.5902 12.5405 11.4997 13.0002 11.4997C13.4598 11.4997 13.915 11.5902 14.3397 11.7661C14.7643 11.9421 15.1502 12.1999 15.4752 12.5249C15.6076 12.6672 15.6797 12.8552 15.6763 13.0496C15.673 13.2439 15.5944 13.4293 15.4572 13.5669C15.3196 13.7042 15.1341 13.7827 14.9398 13.7861C14.7455 13.7894 14.5574 13.7173 14.4152 13.5849C14.2296 13.3987 14.009 13.251 13.7662 13.1502C13.5234 13.0494 13.2631 12.9975 13.0002 12.9975C12.7373 12.9975 12.477 13.0494 12.2341 13.1502C11.9913 13.251 11.7708 13.3987 11.5852 13.5849L9.08518 16.0849C8.89899 16.2705 8.75126 16.4911 8.65046 16.7339C8.54966 16.9767 8.49777 17.237 8.49777 17.4999C8.49777 17.7628 8.54966 18.0232 8.65046 18.266C8.75126 18.5088 8.89899 18.7293 9.08518 18.9149Z" fill="#807172"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-list-public-active.svg b/projects/budgetkey/src/assets/lists/icon-list-public-active.svg
new file mode 100644
index 0000000..a3210d4
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-list-public-active.svg
@@ -0,0 +1,11 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="14" fill="#332A2A"/>
+<g clip-path="url(#clip0_69_9186)">
+<path d="M14 7.21875C10.1331 7.21875 7 10.2539 7 14C7 17.7461 10.1331 20.7812 14 20.7812C17.8669 20.7812 21 17.7461 21 14C21 10.2539 17.8669 7.21875 14 7.21875ZM19.6452 14C19.6452 14.6152 19.5351 15.2086 19.3403 15.7609H18.7673C18.646 15.7609 18.5302 15.7145 18.4456 15.6297L17.5423 14.7383C17.4153 14.6125 17.4153 14.4074 17.5452 14.2816L17.898 13.9398V13.702C17.898 13.6199 17.8641 13.5406 17.8048 13.4832L17.5395 13.2262C17.4802 13.1687 17.3984 13.1359 17.3137 13.1359H16.8621C16.6871 13.1359 16.5431 12.9965 16.5431 12.827C16.5431 12.7449 16.577 12.6656 16.6363 12.6082L16.9016 12.3512C16.9609 12.2937 17.0427 12.2609 17.1274 12.2609H18.0306C18.2056 12.2609 18.3496 12.1215 18.3496 11.952V11.6949C18.3496 11.5254 18.2056 11.3859 18.0306 11.3859H16.9948C16.7464 11.3859 16.5431 11.5828 16.5431 11.8234V11.9465C16.5431 12.1352 16.419 12.302 16.2355 12.3621L15.3435 12.6492C15.2504 12.6793 15.1883 12.7613 15.1883 12.857V12.9172C15.1883 13.0375 15.0867 13.1359 14.9625 13.1359H14.5109C14.3867 13.1359 14.2851 13.0375 14.2851 12.9172C14.2851 12.7969 14.1835 12.6984 14.0593 12.6984H13.9718C13.8871 12.6984 13.8081 12.7449 13.7685 12.8187L13.5032 13.3301C13.427 13.4777 13.2718 13.5707 13.0996 13.5707H12.4758C12.2274 13.5707 12.0242 13.3738 12.0242 13.1332V12.4414C12.0242 12.3266 12.0722 12.2145 12.1569 12.1324L12.7242 11.5828C12.854 11.457 12.9274 11.2848 12.9274 11.1043C12.9274 11.0113 12.9895 10.9266 13.0827 10.8965L14.2117 10.5328C14.2597 10.5164 14.302 10.4918 14.3359 10.459L15.0923 9.72617C15.1516 9.66875 15.1855 9.58945 15.1855 9.50742C15.1855 9.33789 15.0415 9.19844 14.8665 9.19844H14.2823L13.8306 9.63594V9.85469C13.8306 9.975 13.729 10.0734 13.6048 10.0734H13.1532C13.029 10.0734 12.9274 9.975 12.9274 9.85469V9.30781C12.9274 9.23945 12.9613 9.17383 13.0177 9.13281L13.8335 8.53945C13.8871 8.53672 13.9407 8.53125 13.9944 8.53125C17.1133 8.53125 19.6452 10.984 19.6452 14ZM10.6722 11.077C10.6722 10.9949 10.706 10.9156 10.7653 10.8582L11.4823 10.1637C11.5415 10.1062 11.6234 10.0734 11.7081 10.0734C11.8831 10.0734 12.027 10.2129 12.027 10.3824V10.8199C12.027 10.902 11.9931 10.9812 11.9339 11.0387L11.6685 11.2957C11.6093 11.3531 11.5274 11.3859 11.4427 11.3859H10.9911C10.8161 11.3859 10.6722 11.2465 10.6722 11.077ZM14.2851 19.4551V19.2609C14.2851 19.0203 14.0819 18.8234 13.8335 18.8234H13.2633C12.9585 18.8234 12.5097 18.6785 12.2641 18.5008L11.6375 18.0441C11.3129 17.809 11.1238 17.4398 11.1238 17.0488V16.3953C11.1238 15.9578 11.3609 15.5531 11.7476 15.3289L12.9585 14.6262C13.1589 14.5113 13.3875 14.4484 13.619 14.4484H14.4996C14.8073 14.4484 15.1036 14.5551 15.3351 14.7465L16.5544 15.7609H17.071C17.3109 15.7609 17.5395 15.8539 17.7089 16.018L18.1972 16.491C18.2931 16.584 18.4258 16.6359 18.5613 16.6359H18.9395C18.025 18.2465 16.2919 19.3566 14.2851 19.4551Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_69_9186">
+<rect width="14" height="14" fill="white" transform="translate(7 7)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-list-public-inactive.svg b/projects/budgetkey/src/assets/lists/icon-list-public-inactive.svg
new file mode 100644
index 0000000..5ee6e83
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-list-public-inactive.svg
@@ -0,0 +1,11 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="14" fill="#F2F0F0"/>
+<g clip-path="url(#clip0_63_10700)">
+<path d="M14 7.21875C10.1331 7.21875 7 10.2539 7 14C7 17.7461 10.1331 20.7812 14 20.7812C17.8669 20.7812 21 17.7461 21 14C21 10.2539 17.8669 7.21875 14 7.21875ZM19.6452 14C19.6452 14.6152 19.5351 15.2086 19.3403 15.7609H18.7673C18.646 15.7609 18.5302 15.7145 18.4456 15.6297L17.5423 14.7383C17.4153 14.6125 17.4153 14.4074 17.5452 14.2816L17.898 13.9398V13.702C17.898 13.6199 17.8641 13.5406 17.8048 13.4832L17.5395 13.2262C17.4802 13.1687 17.3984 13.1359 17.3137 13.1359H16.8621C16.6871 13.1359 16.5431 12.9965 16.5431 12.827C16.5431 12.7449 16.577 12.6656 16.6363 12.6082L16.9016 12.3512C16.9609 12.2937 17.0427 12.2609 17.1274 12.2609H18.0306C18.2056 12.2609 18.3496 12.1215 18.3496 11.952V11.6949C18.3496 11.5254 18.2056 11.3859 18.0306 11.3859H16.9948C16.7464 11.3859 16.5431 11.5828 16.5431 11.8234V11.9465C16.5431 12.1352 16.419 12.302 16.2355 12.3621L15.3435 12.6492C15.2504 12.6793 15.1883 12.7613 15.1883 12.857V12.9172C15.1883 13.0375 15.0867 13.1359 14.9625 13.1359H14.5109C14.3867 13.1359 14.2851 13.0375 14.2851 12.9172C14.2851 12.7969 14.1835 12.6984 14.0593 12.6984H13.9718C13.8871 12.6984 13.8081 12.7449 13.7685 12.8187L13.5032 13.3301C13.427 13.4777 13.2718 13.5707 13.0996 13.5707H12.4758C12.2274 13.5707 12.0242 13.3738 12.0242 13.1332V12.4414C12.0242 12.3266 12.0722 12.2145 12.1569 12.1324L12.7242 11.5828C12.854 11.457 12.9274 11.2848 12.9274 11.1043C12.9274 11.0113 12.9895 10.9266 13.0827 10.8965L14.2117 10.5328C14.2597 10.5164 14.302 10.4918 14.3359 10.459L15.0923 9.72617C15.1516 9.66875 15.1855 9.58945 15.1855 9.50742C15.1855 9.33789 15.0415 9.19844 14.8665 9.19844H14.2823L13.8306 9.63594V9.85469C13.8306 9.975 13.729 10.0734 13.6048 10.0734H13.1532C13.029 10.0734 12.9274 9.975 12.9274 9.85469V9.30781C12.9274 9.23945 12.9613 9.17383 13.0177 9.13281L13.8335 8.53945C13.8871 8.53672 13.9407 8.53125 13.9944 8.53125C17.1133 8.53125 19.6452 10.984 19.6452 14ZM10.6722 11.077C10.6722 10.9949 10.706 10.9156 10.7653 10.8582L11.4823 10.1637C11.5415 10.1062 11.6234 10.0734 11.7081 10.0734C11.8831 10.0734 12.027 10.2129 12.027 10.3824V10.8199C12.027 10.902 11.9931 10.9812 11.9339 11.0387L11.6685 11.2957C11.6093 11.3531 11.5274 11.3859 11.4427 11.3859H10.9911C10.8161 11.3859 10.6722 11.2465 10.6722 11.077ZM14.2851 19.4551V19.2609C14.2851 19.0203 14.0819 18.8234 13.8335 18.8234H13.2633C12.9585 18.8234 12.5097 18.6785 12.2641 18.5008L11.6375 18.0441C11.3129 17.809 11.1238 17.4398 11.1238 17.0488V16.3953C11.1238 15.9578 11.3609 15.5531 11.7476 15.3289L12.9585 14.6262C13.1589 14.5113 13.3875 14.4484 13.619 14.4484H14.4996C14.8073 14.4484 15.1036 14.5551 15.3351 14.7465L16.5544 15.7609H17.071C17.3109 15.7609 17.5395 15.8539 17.7089 16.018L18.1972 16.491C18.2931 16.584 18.4258 16.6359 18.5613 16.6359H18.9395C18.025 18.2465 16.2919 19.3566 14.2851 19.4551Z" fill="#807172"/>
+</g>
+<defs>
+<clipPath id="clip0_63_10700">
+<rect width="14" height="14" fill="white" transform="translate(7 7)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-list-red.svg b/projects/budgetkey/src/assets/lists/icon-list-red.svg
new file mode 100644
index 0000000..e9df3fe
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-list-red.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_192_7167" fill="white">
+<path d="M19.9893 5.00195C20.5415 5.00195 20.9893 5.44967 20.9893 6.00195V22.493H19.9893V5.00195Z"/>
+</mask>
+<path d="M20.9893 22.493V24.493H22.9893V22.493H20.9893ZM19.9893 22.493H17.9893V24.493H19.9893V22.493ZM19.9893 5.00195V3.00195H17.9893V5.00195H19.9893ZM18.9893 6.00195V22.493H22.9893V6.00195H18.9893ZM20.9893 20.493H19.9893V24.493H20.9893V20.493ZM21.9893 22.493V5.00195H17.9893V22.493H21.9893ZM19.9893 7.00195C19.437 7.00195 18.9893 6.55424 18.9893 6.00195H22.9893C22.9893 4.3451 21.6461 3.00195 19.9893 3.00195V7.00195Z" fill="#FF5A5F" mask="url(#path-1-inside-1_192_7167)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 22.0584V22.1964V22.6964C5 23.1419 5.53857 23.365 5.85355 23.05L6.20711 22.6964L6.85696 22.0466L7 21.9035L11.9861 16.9174L11.0706 16.002L7 20.0726L6.85696 20.2156L6.20711 20.8654L5.85355 21.219C5.82827 21.2443 5.80156 21.2661 5.77379 21.2846L5 22.0584ZM19 21.9035L16.7239 19.6274L17.6394 18.712L19 20.0726V21.7692V21.9035ZM20 22.9035L20.1464 23.05C20.4614 23.365 21 23.1419 21 22.6964V22.1964V21.2774V21.0751V20.8654C21 21.3109 20.4614 21.534 20.1464 21.219L20 21.0726V21.7692V22.9035Z" fill="#FF5A5F"/>
+<path d="M3 4.00195C3 3.44967 3.44772 3.00195 4 3.00195H18C18.5523 3.00195 19 3.44967 19 4.00195V21.7948C19 22.2403 18.4614 22.4634 18.1464 22.1484L11.7071 15.7091C11.3166 15.3185 10.6834 15.3185 10.2929 15.7091L3.85355 22.1484C3.53857 22.4634 3 22.2403 3 21.7948V4.00195Z" fill="#FF5A5F"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-lists-trash-grayish-blue.svg b/projects/budgetkey/src/assets/lists/icon-lists-trash-grayish-blue.svg
new file mode 100644
index 0000000..3540a33
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-lists-trash-grayish-blue.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.21112 9.6904L8.09192 18.4168C8.14072 18.7856 9.92152 19.9984 12.4999 20C15.0799 19.9984 16.8607 18.7856 16.9087 18.4168L17.7903 9.6904C16.4431 10.444 14.4295 10.8 12.4999 10.8C10.5719 10.8 8.55752 10.444 7.21112 9.6904ZM15.0343 5.208L14.3471 4.4472C14.0815 4.0688 13.7935 4 13.2327 4H11.7679C11.2079 4 10.9191 4.0688 10.6543 4.4472L9.96712 5.208C7.91112 5.5672 6.41992 6.52 6.41992 7.2232V7.3592C6.41992 8.5968 9.14232 9.6 12.4999 9.6C15.8583 9.6 18.5807 8.5968 18.5807 7.3592V7.2232C18.5807 6.52 17.0903 5.5672 15.0343 5.208ZM14.1559 7.472L13.2999 6.4H11.6999L10.8455 7.472H9.48552C9.48552 7.472 10.9751 5.6952 11.1743 5.4544C11.3263 5.2704 11.4815 5.2 11.6831 5.2H13.3175C13.5199 5.2 13.6751 5.2704 13.8271 5.4544C14.0255 5.6952 15.5159 7.472 15.5159 7.472H14.1559Z" fill="#496097"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-lists-trash-red.svg b/projects/budgetkey/src/assets/lists/icon-lists-trash-red.svg
new file mode 100644
index 0000000..c9bf4d1
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-lists-trash-red.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.21112 9.6904L8.09192 18.4168C8.14072 18.7856 9.92152 19.9984 12.4999 20C15.0799 19.9984 16.8607 18.7856 16.9087 18.4168L17.7903 9.6904C16.4431 10.444 14.4295 10.8 12.4999 10.8C10.5719 10.8 8.55752 10.444 7.21112 9.6904ZM15.0343 5.208L14.3471 4.4472C14.0815 4.0688 13.7935 4 13.2327 4H11.7679C11.2079 4 10.9191 4.0688 10.6543 4.4472L9.96712 5.208C7.91112 5.5672 6.41992 6.52 6.41992 7.2232V7.3592C6.41992 8.5968 9.14232 9.6 12.4999 9.6C15.8583 9.6 18.5807 8.5968 18.5807 7.3592V7.2232C18.5807 6.52 17.0903 5.5672 15.0343 5.208ZM14.1559 7.472L13.2999 6.4H11.6999L10.8455 7.472H9.48552C9.48552 7.472 10.9751 5.6952 11.1743 5.4544C11.3263 5.2704 11.4815 5.2 11.6831 5.2H13.3175C13.5199 5.2 13.6751 5.2704 13.8271 5.4544C14.0255 5.6952 15.5159 7.472 15.5159 7.472H14.1559Z" fill="#FF5A5F"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-new-list-gray-500.svg b/projects/budgetkey/src/assets/lists/icon-new-list-gray-500.svg
new file mode 100644
index 0000000..ed0df3a
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-new-list-gray-500.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 5.08667H23V6.08667H24V5.08667ZM22 5.08667H11V6.08667H22V5.08667ZM6 5.08667H9V11.0867H15V14.0867H9V20.0867H6V14.0867H0V11.0867H6V5.08667ZM11 8.08667H22V9.08667H11V8.08667ZM22 11.0867H17V12.0867H22V11.0867ZM17 14.0867H22V15.0867H17V14.0867ZM23 8.08667H24V9.08667H23V8.08667ZM24 11.0867H23V12.0867H24V11.0867ZM23 14.0867H24V15.0867H23V14.0867Z" fill="#807172"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-not-subscribed.svg b/projects/budgetkey/src/assets/lists/icon-not-subscribed.svg
new file mode 100644
index 0000000..4057f88
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-not-subscribed.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<path id="Rectangle 1" d="M5 3.87939L19 3.87939V20.4652L13.4142 14.8794C12.6332 14.0983 11.3668 14.0983 10.5858 14.8794L5 20.4652V3.87939Z" stroke="#9888BB" stroke-width="2"/>
+</g>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-remove-list-red.svg b/projects/budgetkey/src/assets/lists/icon-remove-list-red.svg
new file mode 100644
index 0000000..653610b
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-remove-list-red.svg
@@ -0,0 +1,12 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_48_13781" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.923828 2.52823L2.33804 1.11401L4.45936 3.23534L6.58068 1.11402L7.9949 2.52823L5.87358 4.64955L7.9949 6.77087L6.58068 8.18508L4.45936 6.06376L2.33804 8.18509L0.923828 6.77087L3.04515 4.64955L0.923828 2.52823Z"/>
+</mask>
+<path d="M2.33804 1.11401L3.75226 -0.3002L2.33804 -1.71441L0.923828 -0.3002L2.33804 1.11401ZM0.923828 2.52823L-0.490385 1.11401L-1.9046 2.52823L-0.490386 3.94244L0.923828 2.52823ZM4.45936 3.23534L3.04515 4.64955L4.45936 6.06376L5.87358 4.64955L4.45936 3.23534ZM6.58068 1.11402L7.9949 -0.300194L6.58068 -1.71441L5.16647 -0.300194L6.58068 1.11402ZM7.9949 2.52823L9.40911 3.94245L10.8233 2.52823L9.40911 1.11402L7.9949 2.52823ZM5.87358 4.64955L4.45936 3.23534L3.04515 4.64955L4.45936 6.06376L5.87358 4.64955ZM7.9949 6.77087L9.40911 8.18508L10.8233 6.77087L9.40911 5.35666L7.9949 6.77087ZM6.58068 8.18508L5.16647 9.59929L6.58068 11.0135L7.99489 9.5993L6.58068 8.18508ZM4.45936 6.06376L5.87358 4.64955L4.45936 3.23534L3.04515 4.64955L4.45936 6.06376ZM2.33804 8.18509L0.923828 9.5993L2.33804 11.0135L3.75226 9.5993L2.33804 8.18509ZM0.923828 6.77087L-0.490385 5.35666L-1.9046 6.77087L-0.490386 8.18509L0.923828 6.77087ZM3.04515 4.64955L4.45937 6.06376L5.87358 4.64955L4.45937 3.23534L3.04515 4.64955ZM0.923828 -0.3002L-0.490385 1.11401L2.33804 3.94244L3.75226 2.52823L0.923828 -0.3002ZM5.87358 1.82112L3.75226 -0.3002L0.923828 2.52823L3.04515 4.64955L5.87358 1.82112ZM5.16647 -0.300194L3.04515 1.82112L5.87358 4.64955L7.9949 2.52823L5.16647 -0.300194ZM9.40911 1.11402L7.9949 -0.300194L5.16647 2.52823L6.58068 3.94245L9.40911 1.11402ZM7.28779 6.06376L9.40911 3.94245L6.58068 1.11402L4.45936 3.23534L7.28779 6.06376ZM9.40911 5.35666L7.28779 3.23534L4.45936 6.06376L6.58068 8.18508L9.40911 5.35666ZM7.99489 9.5993L9.40911 8.18508L6.58068 5.35665L5.16647 6.77087L7.99489 9.5993ZM3.04515 7.47798L5.16647 9.59929L7.9949 6.77087L5.87358 4.64955L3.04515 7.47798ZM3.75226 9.5993L5.87358 7.47798L3.04515 4.64955L0.923828 6.77087L3.75226 9.5993ZM-0.490386 8.18509L0.923828 9.5993L3.75226 6.77087L2.33804 5.35666L-0.490386 8.18509ZM1.63094 3.23534L-0.490385 5.35666L2.33804 8.18509L4.45937 6.06376L1.63094 3.23534ZM-0.490386 3.94244L1.63094 6.06376L4.45937 3.23534L2.33804 1.11401L-0.490386 3.94244Z" fill="#FF5A5F" mask="url(#path-1-inside-1_48_13781)"/>
+<mask id="path-3-inside-2_48_13781" fill="white">
+<path d="M20.4893 5.55225C21.0415 5.55225 21.4893 5.99996 21.4893 6.55225V23.0433H20.4893V5.55225Z"/>
+</mask>
+<path d="M21.4893 23.0433V25.0433H23.4893V23.0433H21.4893ZM20.4893 23.0433H18.4893V25.0433H20.4893V23.0433ZM20.4893 5.55225V3.55225H18.4893V5.55225H20.4893ZM19.4893 6.55225V23.0433H23.4893V6.55225H19.4893ZM21.4893 21.0433H20.4893V25.0433H21.4893V21.0433ZM22.4893 23.0433V5.55225H18.4893V23.0433H22.4893ZM20.4893 7.55225C19.937 7.55225 19.4893 7.10453 19.4893 6.55225H23.4893C23.4893 4.89539 22.1461 3.55225 20.4893 3.55225V7.55225Z" fill="#FF5A5F" mask="url(#path-3-inside-2_48_13781)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 22.6087V22.7467V23.2467C5.5 23.6922 6.03857 23.9153 6.35355 23.6003L6.70711 23.2467L7.35696 22.5969L7.5 22.4538L12.4861 17.4677L11.5706 16.5522L7.5 20.6228L7.35696 20.7659L6.70711 21.4157L6.35355 21.7693C6.32827 21.7946 6.30156 21.8164 6.27379 21.8349L5.5 22.6087ZM19.5 22.4538L17.2239 20.1777L18.1394 19.2623L19.5 20.6228V22.3195V22.4538ZM20.5 23.4538L20.6464 23.6003C20.9614 23.9153 21.5 23.6922 21.5 23.2467V22.7467V21.8277V21.6254V21.4157C21.5 21.8612 20.9614 22.0843 20.6464 21.7693L20.5 21.6228V22.3195V23.4538Z" fill="#FF5A5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.77629 9.47427C6.16682 9.86479 6.79998 9.86479 7.19051 9.47427L9.31183 7.35294C9.70235 6.96242 9.70235 6.32926 9.31183 5.93873L7.97228 4.59918L9.0192 3.55226L9.01922 3.55225H18.5C19.0523 3.55225 19.5 3.99996 19.5 4.55225V22.3451C19.5 22.7906 18.9614 23.0137 18.6464 22.6987L12.2071 16.2594C11.8166 15.8688 11.1834 15.8688 10.7929 16.2594L4.35355 22.6987C4.03857 23.0137 3.5 22.7906 3.5 22.3451V9.07146L4.43674 8.13472L5.77629 9.47427Z" fill="#FF5A5F"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/icon-select-list-gray-400.svg b/projects/budgetkey/src/assets/lists/icon-select-list-gray-400.svg
new file mode 100644
index 0000000..c2ba9b3
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-select-list-gray-400.svg
@@ -0,0 +1,13 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 25" fill="none">
+<mask id="path-1-inside-1_267_11714" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0.58667H5V3.58667H8V5.58667H5V8.58667H3V5.58667H0V3.58667H3V0.58667Z"/>
+</mask>
+<path d="M5 0.58667H7V-1.41333H5V0.58667ZM3 0.58667V-1.41333H1V0.58667H3ZM5 3.58667H3V5.58667H5V3.58667ZM8 3.58667H10V1.58667H8V3.58667ZM8 5.58667V7.58667H10V5.58667H8ZM5 5.58667V3.58667H3V5.58667H5ZM5 8.58667V10.5867H7V8.58667H5ZM3 8.58667H1V10.5867H3V8.58667ZM3 5.58667H5V3.58667H3V5.58667ZM0 5.58667H-2V7.58667H0V5.58667ZM0 3.58667V1.58667H-2V3.58667H0ZM3 3.58667V5.58667H5V3.58667H3ZM5 -1.41333H3V2.58667H5V-1.41333ZM7 3.58667V0.58667H3V3.58667H7ZM8 1.58667H5V5.58667H8V1.58667ZM10 5.58667V3.58667H6V5.58667H10ZM5 7.58667H8V3.58667H5V7.58667ZM7 8.58667V5.58667H3V8.58667H7ZM3 10.5867H5V6.58667H3V10.5867ZM1 5.58667V8.58667H5V5.58667H1ZM0 7.58667H3V3.58667H0V7.58667ZM-2 3.58667V5.58667H2V3.58667H-2ZM3 1.58667H0V5.58667H3V1.58667ZM1 0.58667V3.58667H5V0.58667H1Z" fill="#998B8C" mask="url(#path-1-inside-1_267_11714)"/>
+<mask id="path-3-inside-2_267_11714" fill="white">
+<path d="M19.9893 5.58667C20.5415 5.58667 20.9893 6.03439 20.9893 6.58667V23.0778H19.9893V5.58667Z"/>
+</mask>
+<path d="M20.9893 23.0778V25.0778H22.9893V23.0778H20.9893ZM19.9893 23.0778H17.9893V25.0778H19.9893V23.0778ZM18.9893 6.58667V23.0778H22.9893V6.58667H18.9893ZM20.9893 21.0778H19.9893V25.0778H20.9893V21.0778ZM21.9893 23.0778V5.58667H17.9893V23.0778H21.9893ZM19.9893 7.58667C19.437 7.58667 18.9893 7.13895 18.9893 6.58667H22.9893C22.9893 4.92982 21.6461 3.58667 19.9893 3.58667V7.58667Z" fill="#998B8C" mask="url(#path-3-inside-2_267_11714)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 22.6431V22.7811V23.2811C5 23.7266 5.53857 23.9497 5.85355 23.6347L6.20711 23.2811L6.85696 22.6313L7 22.4882L11.9861 17.5022L11.0706 16.5867L7 20.6573L6.85696 20.8003L6.20711 21.4502L5.85355 21.8037C5.82827 21.829 5.80156 21.8508 5.77379 21.8693L5 22.6431ZM19 22.4882L16.7239 20.2122L17.6394 19.2967L19 20.6573V22.354V22.4882ZM20 23.4882L20.1464 23.6347C20.4614 23.9497 21 23.7266 21 23.2811V22.7811V21.8621V21.6598V21.4502C21 21.8956 20.4614 22.1187 20.1464 21.8037L20 21.6573V22.354V23.4882Z" fill="#998B8C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 10.5867V20.7582V20.9605V21.8796V22.3796C3 22.825 3.53857 23.0481 3.85355 22.7331L4.20711 22.3796L4.85696 21.7297L5 21.5867L10.2929 16.2938C10.6834 15.9033 11.3166 15.9033 11.7071 16.2938L17 21.5867L17.143 21.7297L17.7929 22.3796L18.1464 22.7331C18.4614 23.0481 19 22.825 19 22.3796V21.8796V20.9605V20.7582V4.58667C19 4.03439 18.5523 3.58667 18 3.58667H9.8623V5.58667H17V18.7582L13.1213 14.8796C11.9497 13.708 10.0503 13.708 8.87868 14.8796L5 18.7582V10.5867H3Z" fill="#998B8C"/>
+</svg>
\ No newline at end of file
diff --git a/projects/budgetkey/src/assets/lists/icon-subscribed.svg b/projects/budgetkey/src/assets/lists/icon-subscribed.svg
new file mode 100644
index 0000000..acf2566
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/icon-subscribed.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<path id="Rectangle 1" d="M5 3.87939L19 3.87939V20.4652L13.4142 14.8794C12.6332 14.0983 11.3668 14.0983 10.5858 14.8794L5 20.4652V3.87939Z" fill="#5D5077" stroke="#5D5077" stroke-width="2"/>
+</g>
+</svg>
diff --git a/projects/budgetkey/src/assets/lists/logo-my-lists.svg b/projects/budgetkey/src/assets/lists/logo-my-lists.svg
new file mode 100644
index 0000000..0539610
--- /dev/null
+++ b/projects/budgetkey/src/assets/lists/logo-my-lists.svg
@@ -0,0 +1,15 @@
+<svg width="114" height="103" viewBox="0 0 114 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_267_15273" fill="white">
+<path d="M80.3047 51.874C81.7774 51.874 82.9714 53.0679 82.9714 54.5407V98.5169H80.3047V51.874Z"/>
+</mask>
+<path d="M82.9714 98.5169V103.85H88.3047V98.5169H82.9714ZM80.3047 98.5169H74.9714V103.85H80.3047V98.5169ZM77.638 54.5407V98.5169H88.3047V54.5407H77.638ZM82.9714 93.1836H80.3047V103.85H82.9714V93.1836ZM85.638 98.5169V51.874H74.9714V98.5169H85.638ZM80.3047 57.2074C78.8319 57.2074 77.638 56.0135 77.638 54.5407H88.3047C88.3047 50.1224 84.723 46.5407 80.3047 46.5407V57.2074Z" fill="#FF5A5F" mask="url(#path-1-inside-1_267_15273)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.333 97.3577V97.7267V99.0601C40.333 100.248 41.7692 100.843 42.6092 100.003L43.552 99.0601L45.2849 97.3271L45.6663 96.9457L58.9632 83.6488L56.5219 81.2075L45.6663 92.0631L45.2849 92.4445L43.552 94.1775L42.6092 95.1203C42.5409 95.1885 42.4687 95.2473 42.3937 95.2971L40.333 97.3577ZM77.6663 96.9457L71.5963 90.8757L74.0376 88.4344L77.6663 92.0631V96.5863V96.9457ZM80.333 99.6124L80.7235 100.003C81.5635 100.843 82.9997 100.248 82.9997 99.0601V97.7267V95.276V94.7366V94.1775C82.9997 95.3654 81.5635 95.9602 80.7235 95.1203L80.333 94.7298V96.5863V99.6124Z" fill="#FF5A5F"/>
+<path d="M35 49.2072C35 47.7344 36.1939 46.5405 37.6667 46.5405H75C76.4728 46.5405 77.6667 47.7344 77.6667 49.2072V96.6549C77.6667 97.8428 76.2305 98.4377 75.3905 97.5977L58.219 80.4261C57.1776 79.3848 55.4891 79.3847 54.4477 80.4261L37.2761 97.5977C36.4362 98.4377 35 97.8428 35 96.6549V49.2072Z" fill="#FF5A5F"/>
+<path d="M57 25.5596L57 2.42822" stroke="#FF5A5F" stroke-width="4" stroke-linecap="round"/>
+<path d="M36.8921 30.7842L31.1079 20.7691" stroke="#FF5A5F" stroke-width="4" stroke-linecap="round"/>
+<path d="M15.5854 59.2734L4.4141 56.2801" stroke="#FF5A5F" stroke-width="4" stroke-linecap="round"/>
+<path d="M109.466 56.2803L98.2945 59.2736" stroke="#FF5A5F" stroke-width="4" stroke-linecap="round"/>
+<path d="M20.835 43.0791L2.00409 29.6457" stroke="#FF5A5F" stroke-width="4" stroke-linecap="round"/>
+<path d="M77.1079 30.7842L82.8921 20.7691" stroke="#FF5A5F" stroke-width="4" stroke-linecap="round"/>
+<path d="M93.165 43.0791L111.996 29.6457" stroke="#FF5A5F" stroke-width="4" stroke-linecap="round"/>
+</svg>
diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.am.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.am.json
index e52e897..4b5a2ad 100644
--- a/projects/budgetkey/src/assets/themes/theme.budgetkey.am.json
+++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.am.json
@@ -50,17 +50,13 @@
         "href": "/about/",
         "title": "מי אנחנו"
       },
-      {
-        "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/",
-        "title": "הסדנא"
-      },
       {
         "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal",
         "title": "תרמו לנו"
       },
       {
         "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12",
-        "title": "קבוצת המשתמשים בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
+        "title": "קבוצת המשתמשים<br/>בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
       }
     ],
     "searchBarConfig": [
diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.ar.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.ar.json
index feb1709..70399bf 100644
--- a/projects/budgetkey/src/assets/themes/theme.budgetkey.ar.json
+++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.ar.json
@@ -50,17 +50,13 @@
         "href": "/about/",
         "title": "من نحن"
       },
-      {
-        "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/",
-        "title": "الورشة"
-      },
       {
         "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal",
         "title": "تبرّعوا لنا"
       },
       {
         "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12",
-        "title": "קבוצת המשתמשים בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
+        "title": "קבוצת המשתמשים<br/>בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
       }
     ],
     "searchBarConfig": [
diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.en.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.en.json
index adf3f8c..489abb9 100644
--- a/projects/budgetkey/src/assets/themes/theme.budgetkey.en.json
+++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.en.json
@@ -50,17 +50,13 @@
         "href": "/about/",
         "title": "About Us"
       },
-      {
-        "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/",
-        "title": "The Public Knowledge Workshop"
-      },
       {
         "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal",
         "title": "Donate"
       },
       {
         "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12",
-        "title": "קבוצת המשתמשים בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
+        "title": "קבוצת המשתמשים<br/>בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
       }
     ],
     "searchBarConfig": [
diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.he.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.he.json
index e52e897..4b5a2ad 100644
--- a/projects/budgetkey/src/assets/themes/theme.budgetkey.he.json
+++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.he.json
@@ -50,17 +50,13 @@
         "href": "/about/",
         "title": "מי אנחנו"
       },
-      {
-        "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/",
-        "title": "הסדנא"
-      },
       {
         "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal",
         "title": "תרמו לנו"
       },
       {
         "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12",
-        "title": "קבוצת המשתמשים בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
+        "title": "קבוצת המשתמשים<br/>בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
       }
     ],
     "searchBarConfig": [
diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.ru.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.ru.json
index e52e897..4b5a2ad 100644
--- a/projects/budgetkey/src/assets/themes/theme.budgetkey.ru.json
+++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.ru.json
@@ -50,17 +50,13 @@
         "href": "/about/",
         "title": "מי אנחנו"
       },
-      {
-        "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/",
-        "title": "הסדנא"
-      },
       {
         "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal",
         "title": "תרמו לנו"
       },
       {
         "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12",
-        "title": "קבוצת המשתמשים בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
+        "title": "קבוצת המשתמשים<br/>בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
       }
     ],
     "searchBarConfig": [
diff --git a/projects/budgetkey/src/common.less b/projects/budgetkey/src/common.less
new file mode 100644
index 0000000..7d6afdc
--- /dev/null
+++ b/projects/budgetkey/src/common.less
@@ -0,0 +1,156 @@
+.font-gadi {
+    font-family: 'Gadi Almog', sans-serif;
+    font-style: normal;
+}
+
+.font-abraham {
+    font-family: 'Abraham TRIAL', sans-serif;
+    font-style: normal;
+}
+
+.font-miriam {
+    font-family: 'Miriam Libre', sans-serif;
+    font-style: normal;
+}
+
+@color-white: #ffffff;
+@color-fill-lead-lighter: #FFF2F3;
+@color-fill-lead: #FF5A5F;
+@color-lists-grayish-blue: #496097;
+@color-lists-blue: #2C00AA;
+@color-lists-blue2: #9CD3FE;
+@color-lists-light-blue: #CFDDE7;
+@color-lists-lighter-blue: #E3F3FF;
+
+@color-gray-100: #E6E0E1;
+@color-gray-200: #CCC3C3;
+@color-gray-500: #807172;
+@color-gray-600: #665859;
+@color-gray-700: #4C4141;
+@color-gray-800: #332A2A;
+
+@color-disabled: #DADADA;
+
+@headerHeight: 56px;
+@footerHeight: 333px;
+
+@container-width: 800px;
+
+// Utils
+.background-image {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+}
+
+
+.no-scrollbars {
+    /*FireFox*/
+    scrollbar-width: none;
+    /*IE10+*/
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    &::-webkit-scrollbar {
+    /*Chrome, Safari, Edge*/
+        display: none;
+    }
+}
+
+.ellipsis {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.ellipsis-2-line {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+}
+
+
+@mobile-threshold: 1000px;
+
+.mobile(@rules) {
+    @media only screen and (max-width: (@mobile-threshold - 1px)) {
+        @rules();
+    }
+}
+
+.desktop(@rules) {
+    @media only screen and (min-width: @mobile-threshold) {
+        @rules();
+    }
+}
+
+.mobile({
+    ::ng-deep .layout-desktop {
+        display: none !important;
+    }
+});
+
+.desktop({
+    ::ng-deep .layout-mobile {
+        display: none !important;
+    }
+});
+
+::ng-deep .display-none {
+    display: block;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.loading {
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;  
+    background: rgb(239, 241, 246) no-repeat;
+    display: inline-block;
+    will-change: transform;
+  
+    &:after,
+    &:before {
+      box-sizing: border-box;
+    }
+  
+    &:after,
+    &:before {
+        box-sizing: border-box;
+    }
+
+    transform: translate3d(0, 0, 0);
+  
+    &:before {
+        animation: progress 2s ease-in-out infinite;
+        background-size: 200px 100%;
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 200px;
+        height: 100%;
+        content: '';
+    }
+  
+    &:before {
+        background-image: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0),
+          rgba(255, 255, 255, 0.6),
+          rgba(255, 255, 255, 0)
+        );
+    }
+}  
+
+@keyframes progress {
+    0% {
+      transform: translate3d(-200px, 0, 0);
+    }
+    100% {
+      transform: translate3d(calc(200px + 100vw), 0, 0);
+    }
+}
diff --git a/projects/budgetkey/src/environments/environment.ts b/projects/budgetkey/src/environments/environment.ts
index 9bece72..cba12c4 100644
--- a/projects/budgetkey/src/environments/environment.ts
+++ b/projects/budgetkey/src/environments/environment.ts
@@ -1,5 +1,5 @@
 export const environment = {
-    ssrBase: 'http://localhost:4200',
+    ssrBase: 'http://127.0.0.1:4200',
 };
 
 /*
diff --git a/projects/budgetkey/src/index.html b/projects/budgetkey/src/index.html
index 61c52ee..143d23d 100644
--- a/projects/budgetkey/src/index.html
+++ b/projects/budgetkey/src/index.html
@@ -6,7 +6,7 @@
   <base href="/"/>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
   <meta name="referrer" content="origin" />
-  <meta name="image" content="https://next.obudget.org/assets/common/img/obudget_key@2x.png"/>
+  <meta name="image" content="https://next.obudget.org/assets/img/og.png"/>
   <meta name="canonical" content="https://next.obudget.org/"/>
 
   <link rel="icon" type="image/x-icon" href="favicon.ico"/>
@@ -20,7 +20,7 @@
   <meta property="og:title" content="מפתח התקציב"/>
   <meta property="og:description" content="אספנו והנגשנו ב״מפתח התקציב״ את כל המידע על תקציב המדינה ועל הוצאות הממשלה – כדי שנוכל לדעת מה עושים עם הכסף שלנו…"/>
   <meta property="og:url" content="https://next.obudget.org/"/>
-  <meta property="og:image" content="https://next.obudget.org/assets/common/img/obudget_key@2x.png"/>
+  <meta property="og:image" content="https://next.obudget.org/assets/img/og.png"/>
   <meta property="og:site_name" content="מפתח התקציב"/>
   <meta property="og:locale" content="he_IL"/>
   <meta property="og:type" content="website"/>
@@ -32,10 +32,10 @@
   <meta name="twitter:site" content="@hasadna"/>
   <meta name="twitter:creator" content="@ikramvada"/>
   <meta name="twitter:description" content="אספנו והנגשנו ב״מפתח התקציב״ את כל המידע על תקציב המדינה ועל הוצאות הממשלה – כדי שנוכל לדעת מה עושים עם הכסף שלנו…"/>
-  <meta name="twitter:image:src" content="https://next.obudget.org/assets/common/img/obudget_key@2x.png"/>
+  <meta name="twitter:image:src" content="https://next.obudget.org/assets/img/og.png"/>
 
   <meta itemprop="name" content="מפתח התקציב"/>
-  <meta itemprop="image" content="https://next.obudget.org/assets/common/img/obudget_key@2x.png"/>
+  <meta itemprop="image" content="https://next.obudget.org/assets/img/og.png"/>
 
   <link rel="canonical" href="https://next.obudget.org/"/>
 
@@ -57,7 +57,7 @@
         "@type": "Organization",
       "name": "מפתח התקציב - The Budget Key Project",
         "url": "https://next.obudget.org/",
-        "logo": "https://next.obudget.org/assets/common/img/obudget_key@2x.png"
+        "logo": "https://next.obudget.org/assets/img/og.png"
       }
     </script>
   
diff --git a/projects/budgetkey/src/styles.less b/projects/budgetkey/src/styles.less
index f207fc4..d8b03b7 100644
--- a/projects/budgetkey/src/styles.less
+++ b/projects/budgetkey/src/styles.less
@@ -3,10 +3,18 @@
 
 @import (inline) './assets/fonts/alefhebrew.css';
 @import './assets/fonts/miriam.less';
+@import './assets/fonts/gadi-almog.less';
 @import (css) url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
 @import (css) url('//fonts.googleapis.com/css?family=Heebo:900&amp;subset=hebrew');
 @import (css) url('//next.obudget.org/_fonts/stylesheet.css');
 
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;    
+}
+
 body {
   display: block;
   margin: 0;
@@ -15,8 +23,19 @@ body {
   -webkit-font-feature-settings: 'tnum','lnum';
   -moz-font-feature-settings: 'tnum','lnum';
   overflow-x: hidden;
+  direction: rtl;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overscroll-behavior: none;
 }
 
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+
 @font-face {
   font-family: 'arrows';
   src: url('data:application/octet-stream;base64,d09GRgABAAAAAAugAA8AAAAAFFwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABWAAAADsAAABUIIslek9TLzIAAAGUAAAAQwAAAFY+IU3QY21hcAAAAdgAAABQAAABfohI7KpjdnQgAAACKAAAABMAAAAgBtX/BGZwZ20AAAI8AAAFkAAAC3CKkZBZZ2FzcAAAB8wAAAAIAAAACAAAABBnbHlmAAAH1AAAASYAAAF4epoc2WhlYWQAAAj8AAAALgAAADYaGxPpaGhlYQAACSwAAAAeAAAAJAzECdlobXR4AAAJTAAAAAwAAAAMGL4AAGxvY2EAAAlYAAAACAAAAAgAfgC8bWF4cAAACWAAAAAgAAAAIADxC9duYW1lAAAJgAAAAXcAAALNzJ0fIXBvc3QAAAr4AAAAKQAAADyTfXCZcHJlcAAACyQAAAB6AAAAhuVBK7x4nGNgZGBg4GIwYLBjYHJx8wlh4MtJLMljkGJgYYAAkDwymzEnMz2RgQPGA8qxgGkOIGaDiAIAJjsFSAB4nGNg5LBnnMDAysDAVMW0h4GBoQdCMz5gMGRkAooysDIzYAUBaa4pDA4vGF8wMQf9z2KIYg5imAYUZgTJAQDVcgt0AHic7ZCxDYAwDATPjqFAjEFBwTBU7F+yRfJ2GIOX7qR/uTKwAE1cIsAejMyt1WpvbLUHR91E7q/3LltaPcourfzZy+fXPP80mZ+b4APPbAtjeJxjYEADEhDIHPQ/C4QBEmwD3QB4nK1WaXfTRhQdeUmchCwlCy1qYcTEabBGJmzBgAlBsmMgXZytlaCLFDvpvvGJ3+Bf82Tac+g3flrvGy8kkLTncJqTo3fnzdXM22USWpLYC+uRlJsvxdTWJo3sPAnphk3LUXwoO3shZYrJ3wVREK2W2rcdh0REIlC1rrBEEPseWZpkfOhRRsu2pFdNyi096S5b40G9Vd9+GjrKsTuhpGYzdGg9siVVGFWiSKY9UtKmZaj6K0krvL/CzFfNUMKITiJpvBnG0EjeG2e0ymg1tuMoimyy3ChSJJrhQRR5lNUS5+SKCQzKB82Q8sqnEeXD/Iis2KOcVrBLttP8vi95p3c5P7Ffb1G25EAfyI7s4Ox0JV+EW1th3LST7ShUEXbXd0Js2exU/2aP8ppGA7crMr3QjGCpfIUQKz+hzP4hWS2cT/mSR6NaspETQetlTuxLPoHW44gpcc0YWdDd0QkR1P2SMwz2mD4e/PHeKZYLEwJ4HMt6RyWcCBMpYXM0SdowcmAlZYsqqfWumDjldVrEW8J+7drRl85o41B3YjxbDx1bOVHJ8WhSp5lMndpJzaMpDaKUdCZ4zK8DKD+iSV5tYzWJlUfTOGbGhEQiAi3cS1NBLDuxpCkEzaMZvbkbprl2LVqkyQP13KP39OZWuLnTU9oO9LNGf1anYjrYC9PpaeQv8Wna5SJF6frpGX5M4kHWAjKRLTbDlIMHb/0O0svXlhyF1wbY7u3zK6h91kTwpAH7G9AeT9UpCUyFmFWIVkBirWtZlsnVrBapyNR3Q5pWvqzTBIpyHBfHvoxx/V8zM5aYEr7fidOzIy49c+1LCNMcfJt1PZrXqcVyAXFmeU6nWZbv6zTH8gOd5lme1+kIS1unoyw/1GmB5Uc6HWN5QQuadN/BkIsw5AIOkDCEpQNDWF6CISwVDGG5CENYFmEIyyUYwvJjGMJyGYawvKxl1dRTSePamVgGbEJgYo4eucxF5WoquVRCu2hUakOeEm6VVBTPqn9loF488oY5sBZIl8iaXzHOlY9G5fjWFS1vGjtXwLHqbx+O9jnxUtaLhT8F/9XWVCW9Ys3Dk6vwG4aebCeqNql4dE2Xz1U9uv5fVFRYC/QbSIVYKMqybHBnIoSPOp2GaqCVQ8xszDy063XLmp/D/TcxQhZQ/fg3FBoL3INOWUlZ7eCs1dfbstw7g3I4EyxJMTfz+lb4IiOz0n6RWcqej3wecAWMSmXYagOtFbzZJzEPmd4kzwRxW1E2SNrYzgSJDRzzgHnznQQmYeqqDeRO4YYN+AVhbsF5J1yieqMsh+5F7PMopPxbp+JE9qhojMCz2Rthr+9Cym9xDCQ0+aV+DFQVoakYNRXQNFJuqAZfxtm6bULGDvQjKnbDsqziw8cW95WSbRmEfKSI1aOjn9Zeok6q3H5mFJfvnb4FwSA1MX9733RxkMq7WskyR20DU7calVPXmkPjVYfq5lH1vePsEzlrmm66Jx56X9Oq28HFXCyw9m0O0lImF9T1YYUNosvFpVDqZTRJ77gHGBYY0O9Qio3/q/rYfJ4rVYXRcSTfTtS30edgDPwP2H9H9QPQ92Pocg0uz/eaE59u9OFsma6iF+un6Dcwa625WboG3NB0A+IhR62OuMoNfKcGcXqkuRzpIeBj3RXiAcAmgMXgE921jOZTAKP5jDk+wOfMYdBkDoMt5jDYZs4awA5zGOwyh8Eecxh8wZx1gC+ZwyBkDoOIOQyeMCcAeMocBl8xh8HXzGHwDXPuA3zLHAYxcxgkzGGwr+nWMMwtXtBdoLZBVaADU09Y3MPiUFNlyP6OF4b9vUHM/sEgpv6o6faQ+hMvDPVng5j6i0FM/VXTnSH1N14Y6u8GMfUPg5j6TL8Yy2UGv4x8lwoHlF1sPufvifcP28VAuQABAAH//wAPeJxVT01Lw0AUfO+1TYxrTCht3TYlaT4tLNgmDS30oD1IED8uKuLdmy3or/FWvXny4G8Q/5NGQdxFC/pYZubNPBYGqiDHuKUnaEMMKUzhaHYAgHCzobPaekVDIjxfaaTLNa1qVAnpeJT1k24HYDLOpqPpjkjSfhp4nbgby6945Jq1lsAtFzcpGWCS7+E4azUs9CVqYTxSJDBI8rH/VyupBL7ObcZ6Qthlu13yYsgXFAdpGuDJhyIFdH2mpAJ8kbAvmS1sIXqM2Z+84CUfFnwh/UeV/X+gSqruc3oGB/isKQ2EU+VfyAgPmzapCr6LDU33f5psyyYT3EWXNB3v9CX3PP5+dW+ZuhOF7OutXkeDhZGjmxYuK9EgqjysVqOey/D38hsLEzbgAAB4nGNgZGBgAOKTx35axvPbfGXgZn4BFGG4cSxDC5nmLGDaAKQ4GJhAPABaEQruAAB4nGNgZGBgDvqfxcDAlc0ABJwFDIwMqIAZAEkIArIAAAPoAAAKawAACmsAAAAAAAAAfgC8AAEAAAADADsABAAAAAAAAgAaACoAcwAAAFwLcAAAAAB4nHWQy07CQBSG/5GLCokaTdw6KwMxlkviAhISEgxsdEMMW1NKaUtKh0wHEl7Dd/BhfAmfxZ92MAZim+l855szZ04HwDW+IZA/Txw5C5wxyvkEp+hZLtA/Wy6SXyyXUMWb5TL9u+UKHhBYruIGH6wgiueMFvi0LHAlLi2f4ELcWS7QP1ouknuWS7gVr5bL9J7lCiYitVzFvfgaqNVWR0FoZG1Ql+1mqyOnW6moosSNpbs2odKp7Mu5Sowfx8rx1HLPYz9Yx67eh/t54us0UolsOc29GvmJr13jz3bV003QNmYu51ot5dBmyJVWC98zTmjMqtto/D0PAyissIVGxKsKYSBRo61zbqOJFjqkKTMkM/OsCAlcxDQu1twRZisp4z7HnFFC6zMjJjvw+F0e+TEp4P6YVfTR6mE8Ie3OiDIv2ZfD7g6zRqQky3QzO/vtPcWGp7VpDXftutRZVxLDgxqS97FbW9B49E52K4a2iwbff/7vB+x4hFUAeJxjYGKAAC4G7ICZkYmRmZGFgTsnNa1ENyWxOCM1hQXEZmAAAEOzBhcAAAB4nGPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGVidNjEwMmiBGJu5mBg5ICw+BjCLzWkX0wGgNCeQze60i8EBwmZmcNmowtgRGLHBoSNiI3OKy0Y1EG8XRwMDI4tDR3JIBEhJJBBs5mFi5NHawfi/dQNL70YmBhcADHYj9AAA') format('woff'),
diff --git a/themes/theme.budgetkey.he.json b/themes/theme.budgetkey.he.json
index ca7959b..cc31a15 100644
--- a/themes/theme.budgetkey.he.json
+++ b/themes/theme.budgetkey.he.json
@@ -502,17 +502,13 @@
         "href": "/about/",
         "title": "מי אנחנו"
       },
-      {
-        "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/",
-        "title": "הסדנא"
-      },
       {
         "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal",
         "title": "תרמו לנו"
       },
       {
         "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12",
-        "title": "קבוצת המשתמשים בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
+        "title": "קבוצת המשתמשים<br/>בווטסאפ <i class='fa fa-whatsapp' aria-hidden='true'></i>"
       }
     ],
     "footerLinks": [