Index: src/Clients/Angular/finki-chattery/src/app/core/state/question-facade.service.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/core/state/question-facade.service.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/core/state/question-facade.service.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -5,6 +5,11 @@
 import { catchError, filter, map } from 'rxjs/operators';
 
-import { QuestionStateViewModel } from 'src/app/shared-app/models';
-import { EffectStartedWorking, GetQuestionState } from './question-state/question.actions';
+import { PreviewQuestionsOrderEnum, PreviewQuestionViewModel, QuestionStateViewModel } from 'src/app/shared-app/models';
+import {
+  EffectStartedWorking,
+  GetPreviewQuestionsLatest,
+  GetPreviewQuestionsPopular,
+  GetQuestionState
+} from './question-state/question.actions';
 import { questionStateQuery } from './question-state/question.selectors';
 import { QuestionState } from './question-state/question.state';
@@ -38,6 +43,30 @@
   }
 
+  public getPreviewQuestionsLatest(): Observable<PreviewQuestionViewModel[]> {
+    return this.store.select(questionStateQuery.getPreviewQuestionsLatest);
+  }
+
+  public getPreviewQuestionsPopular(): Observable<PreviewQuestionViewModel[]> {
+    return this.store.select(questionStateQuery.getPreviewQuestionsPopular);
+  }
+
+  public fetchPreviewQuestions(orderBy: PreviewQuestionsOrderEnum): void {
+    if (orderBy === PreviewQuestionsOrderEnum.Latest) {
+      this.fetchPreviewQuestionsLatest();
+    } else if (orderBy === PreviewQuestionsOrderEnum.Popular) {
+      this.fetchPreviewQuestionsPopular();
+    }
+  }
+
   public fetchQuestion(questionUid: string): void {
     this.dispatchEffect(new GetQuestionState(questionUid));
+  }
+
+  private fetchPreviewQuestionsLatest(): void {
+    this.dispatchEffect(new GetPreviewQuestionsLatest());
+  }
+
+  private fetchPreviewQuestionsPopular(): void {
+    this.dispatchEffect(new GetPreviewQuestionsPopular());
   }
 
Index: src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question-state.models.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question-state.models.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question-state.models.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -59,2 +59,16 @@
   public reputation!: number;
 }
+
+export class PreviewQuestionResponse {
+  public uid!: string;
+  public title!: string;
+  public createdOn!: moment.Moment;
+  public views!: number;
+  public answersCount!: number;
+  public categories!: PreviewQuestionCategoryResponse[];
+}
+
+export class PreviewQuestionCategoryResponse {
+  public uid!: string;
+  public text!: string;
+}
Index: src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.actions.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.actions.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.actions.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -2,9 +2,14 @@
 import { Action } from '@ngrx/store';
 
-import { QuestionStateViewModel } from 'src/app/shared-app/models';
+import { PreviewQuestionViewModel, QuestionStateViewModel } from 'src/app/shared-app/models';
+import { PreviewQuestionResponse } from './question-state.models';
 
 export enum QuestionActionTypes {
   GetQuestionState = '[Question] Get state',
   GetQuestionStateSuccess = '[Question] Get state success',
+  GetPreviewQuestionsLatest = '[Question] Get preview questions Latest',
+  GetPreviewQuestionsLatestSuccess = '[Question] Get preview questions Latest Success',
+  GetPreviewQuestionsPopular = '[Question] Get preview questions Popular',
+  GetPreviewQuestionsPopularSuccess = '[Question] Get preview questions Popular Success',
   EffectStartedWorking = '[Question] Effect Started Working',
   EffectFinishedWorking = '[Question] Effect Finished Working',
@@ -22,4 +27,28 @@
 
   constructor(public payload: QuestionStateViewModel) {}
+}
+
+export class GetPreviewQuestionsLatest implements Action {
+  readonly type = QuestionActionTypes.GetPreviewQuestionsLatest;
+
+  constructor() {}
+}
+
+export class GetPreviewQuestionsLatestSuccess implements Action {
+  readonly type = QuestionActionTypes.GetPreviewQuestionsLatestSuccess;
+
+  constructor(public payload: PreviewQuestionViewModel[]) {}
+}
+
+export class GetPreviewQuestionsPopular implements Action {
+  readonly type = QuestionActionTypes.GetPreviewQuestionsPopular;
+
+  constructor() {}
+}
+
+export class GetPreviewQuestionsPopularSuccess implements Action {
+  readonly type = QuestionActionTypes.GetPreviewQuestionsPopularSuccess;
+
+  constructor(public payload: PreviewQuestionViewModel[]) {}
 }
 
@@ -42,3 +71,9 @@
 }
 
-export type QuestionAction = GetQuestionStateSuccess | EffectStartedWorking | EffectFinishedWorking | EffectFinishedWorkingError;
+export type QuestionAction =
+  | GetQuestionStateSuccess
+  | GetPreviewQuestionsLatestSuccess
+  | GetPreviewQuestionsPopularSuccess
+  | EffectStartedWorking
+  | EffectFinishedWorking
+  | EffectFinishedWorkingError;
Index: src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.effects.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.effects.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.effects.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -1,11 +1,16 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { catchError, switchMap } from 'rxjs/operators';
+import { catchError, filter, switchMap, withLatestFrom } from 'rxjs/operators';
+import { PreviewQuestionsOrderEnum } from 'src/app/shared-app/models';
+import { TranslateFromJsonService } from 'src/app/shared-app/services';
 
 import { BaseApiService } from 'src/app/shared-app/services/base-api.service';
-import { QuestionStateResponse } from './question-state.models';
+import { QuestionFacadeService } from '../question-facade.service';
+import { PreviewQuestionResponse, QuestionStateResponse } from './question-state.models';
 import {
   EffectFinishedWorking,
   EffectFinishedWorkingError,
+  GetPreviewQuestionsLatestSuccess,
+  GetPreviewQuestionsPopularSuccess,
   GetQuestionState,
   GetQuestionStateSuccess,
@@ -18,5 +23,10 @@
 })
 export class QuestionEffects {
-  constructor(private actions$: Actions, private api: BaseApiService) {}
+  constructor(
+    private actions$: Actions,
+    private api: BaseApiService,
+    private translate: TranslateFromJsonService,
+    private facade: QuestionFacadeService
+  ) {}
 
   getQuestionState$ = createEffect(() => {
@@ -31,3 +41,37 @@
     );
   });
+
+  getPreviewQuestionsLatest$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType<GetQuestionState>(QuestionActionTypes.GetPreviewQuestionsLatest),
+      withLatestFrom(this.facade.getPreviewQuestionsLatest()),
+      filter(([action, questions]) => questions.length === 0),
+      switchMap((action) => {
+        return this.api.get<PreviewQuestionResponse[]>(`v1/questions/preview?order=${PreviewQuestionsOrderEnum.Latest}`).pipe(
+          switchMap((state) => [
+            new GetPreviewQuestionsLatestSuccess(QuestionMapper.ToPreviwQuestionsViewModel(state, this.translate)),
+            new EffectFinishedWorking()
+          ]),
+          catchError((err) => [new EffectFinishedWorkingError(err)])
+        );
+      })
+    );
+  });
+
+  getPreviewQuestionsPopular$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType<GetQuestionState>(QuestionActionTypes.GetPreviewQuestionsPopular),
+      withLatestFrom(this.facade.getPreviewQuestionsPopular()),
+      filter(([action, questions]) => questions.length === 0),
+      switchMap((action) => {
+        return this.api.get<PreviewQuestionResponse[]>(`v1/questions/preview?order=${PreviewQuestionsOrderEnum.Popular}`).pipe(
+          switchMap((state) => [
+            new GetPreviewQuestionsPopularSuccess(QuestionMapper.ToPreviwQuestionsViewModel(state, this.translate)),
+            new EffectFinishedWorking()
+          ]),
+          catchError((err) => [new EffectFinishedWorkingError(err)])
+        );
+      })
+    );
+  });
 }
Index: src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.mapper.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.mapper.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.mapper.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -5,4 +5,6 @@
   AnswerResponseStudentQuestionStateViewModel,
   AnswerStudentQuestionStateViewModel,
+  PreviewQuestionCategoryViewModel,
+  PreviewQuestionViewModel,
   QuestionCategoryQuestionStateViewModel,
   QuestionStateViewModel,
@@ -10,5 +12,6 @@
   TeamQuestionStateViewModel
 } from 'src/app/shared-app/models';
-import { QuestionStateResponse } from './question-state.models';
+import { TranslateFromJsonService } from 'src/app/shared-app/services';
+import { PreviewQuestionCategoryResponse, PreviewQuestionResponse, QuestionStateResponse } from './question-state.models';
 
 export class QuestionMapper {
@@ -84,3 +87,24 @@
     );
   }
+
+  public static ToPreviwQuestionsViewModel(
+    previewQuestionsResponse: PreviewQuestionResponse[],
+    translate: TranslateFromJsonService
+  ): PreviewQuestionViewModel[] {
+    let questions = new Array<PreviewQuestionViewModel>();
+
+    if (previewQuestionsResponse.length > 0) {
+      questions = previewQuestionsResponse.map((x) => {
+        let categories = new Array<PreviewQuestionCategoryViewModel>();
+
+        if (x.categories.length > 0) {
+          categories = x.categories.map((y) => new PreviewQuestionCategoryViewModel(y.uid, y.text, translate.instant(y.text)));
+        }
+
+        return new PreviewQuestionViewModel(x.uid, x.title, moment(x.createdOn), x.views, x.answersCount, categories);
+      });
+    }
+
+    return questions;
+  }
 }
Index: src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.reducers.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.reducers.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.reducers.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -8,4 +8,14 @@
         ...state,
         question: action.payload
+      };
+    case QuestionActionTypes.GetPreviewQuestionsLatestSuccess:
+      return {
+        ...state,
+        previewQuestionsLatest: action.payload
+      };
+    case QuestionActionTypes.GetPreviewQuestionsPopularSuccess:
+      return {
+        ...state,
+        previewQuestionsPopular: action.payload
       };
     case QuestionActionTypes.EffectStartedWorking: {
Index: src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.selectors.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.selectors.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.selectors.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -5,8 +5,12 @@
 
 const getQuestion = createSelector(getQuestionState, (state) => state.question);
+const getPreviewQuestionsLatest = createSelector(getQuestionState, (state) => state.previewQuestionsLatest);
+const getPreviewQuestionsPopular = createSelector(getQuestionState, (state) => state.previewQuestionsPopular);
 const effectWorking = createSelector(getQuestionState, (state) => state.effectWorking);
 
 export const questionStateQuery = {
   effectWorking,
-  getQuestion
+  getQuestion,
+  getPreviewQuestionsLatest,
+  getPreviewQuestionsPopular
 };
Index: src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.state.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.state.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/core/state/question-state/question.state.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -1,4 +1,4 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { QuestionStateViewModel } from 'src/app/shared-app/models';
+import { PreviewQuestionViewModel, QuestionStateViewModel } from 'src/app/shared-app/models';
 
 export const questionStateKey = 'question';
@@ -6,4 +6,6 @@
 export interface QuestionState {
   question: QuestionStateViewModel | null;
+  previewQuestionsLatest: PreviewQuestionViewModel[];
+  previewQuestionsPopular: PreviewQuestionViewModel[];
   effectWorking: boolean | HttpErrorResponse;
 }
@@ -11,4 +13,6 @@
 export const initialState: QuestionState = {
   question: null,
+  previewQuestionsLatest: [],
+  previewQuestionsPopular: [],
   effectWorking: false
 };
Index: src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-components.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-components.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-components.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -1,4 +1,9 @@
 import { QuestionPreviewGeneralComponent } from './question-preview-general/question-preview-general.component';
+import { QuestioningGeneralComponent } from './questioning-general/questioning-general.component';
 import { QuestionsPreviewGeneralComponent } from './questions-preview-general/questions-preview-general.component';
 
-export const QUESTIONING_COMPONENTS: any[] = [QuestionPreviewGeneralComponent, QuestionsPreviewGeneralComponent];
+export const QUESTIONING_COMPONENTS: any[] = [
+  QuestionPreviewGeneralComponent,
+  QuestionsPreviewGeneralComponent,
+  QuestioningGeneralComponent
+];
Index: src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.html
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.html	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.html	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,7 @@
+<div class="padding-md" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxL fxLayoutAlign="space-around center">
+  <div fxFlex="20%"></div>
+  <div class="margin-top-md" fxFlex="80%">
+    <router-outlet></router-outlet>
+  </div>
+  <div fxFlex="20%"></div>
+</div>
Index: src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.spec.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.spec.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.spec.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestioningGeneralComponent } from './questioning-general.component';
+
+describe('QuestioningGeneralComponent', () => {
+  let component: QuestioningGeneralComponent;
+  let fixture: ComponentFixture<QuestioningGeneralComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ QuestioningGeneralComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestioningGeneralComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questioning-general/questioning-general.component.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-questioning-general',
+  templateUrl: './questioning-general.component.html',
+  styleUrls: ['./questioning-general.component.scss']
+})
+export class QuestioningGeneralComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
Index: src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.html
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.html	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.html	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -1,1 +1,13 @@
-<p>questions-preview-general works!</p>
+<app-search-question></app-search-question>
+<div class="margin-x-lg">
+  <h1 class="mat-headline">{{ 'questions-preview' | translate }}</h1>
+  <mat-button-toggle-group [formControl]="questionsSortByForm">
+    <mat-button-toggle [value]="QuestionsSortBy.Latest">{{ 'question-sort-newest' | translate }}</mat-button-toggle>
+    <mat-button-toggle [value]="QuestionsSortBy.Popular">{{ 'question-sort-popular' | translate }}</mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+<app-preview-question-display
+  *ngFor="let question of previewQuestions$ | async"
+  [question]="question"
+  (questionClicked)="goToQuestion(question.uid)"
+></app-preview-question-display>
Index: src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
 import { CategoryFacadeService } from 'src/app/core/state/category-facade.service';
+import { QuestionFacadeService } from 'src/app/core/state/question-facade.service';
+import { CategoryStateViewModel, PreviewQuestionsOrderEnum } from 'src/app/shared-app/models';
 
 @Component({
@@ -8,8 +12,27 @@
 })
 export class QuestionsPreviewGeneralComponent implements OnInit {
-  constructor(private categoriesFacade: CategoryFacadeService) {}
+  categories?: CategoryStateViewModel[];
+  previewQuestions$ = this.questionFacade.getPreviewQuestionsLatest();
+  QuestionsSortBy = PreviewQuestionsOrderEnum;
+  questionsSortByForm = new FormControl(PreviewQuestionsOrderEnum.Latest);
+
+  constructor(private categoriesFacade: CategoryFacadeService, private questionFacade: QuestionFacadeService, private router: Router) {}
 
   ngOnInit(): void {
     this.categoriesFacade.fetchCategories();
+    this.questionFacade.fetchPreviewQuestions(PreviewQuestionsOrderEnum.Latest);
+    this.questionsSortByForm.valueChanges.subscribe((value: PreviewQuestionsOrderEnum) => {
+      this.questionFacade.fetchPreviewQuestions(value);
+
+      if (value === PreviewQuestionsOrderEnum.Latest) {
+        this.previewQuestions$ = this.questionFacade.getPreviewQuestionsLatest();
+      } else if (value === PreviewQuestionsOrderEnum.Popular) {
+        this.previewQuestions$ = this.questionFacade.getPreviewQuestionsPopular();
+      }
+    });
+  }
+
+  goToQuestion(uid: string): void {
+    this.router.navigateByUrl(`questioning/${uid}`);
   }
 }
Index: src/Clients/Angular/finki-chattery/src/app/modules/questioning/questioning.routes.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/modules/questioning/questioning.routes.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/modules/questioning/questioning.routes.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -2,15 +2,22 @@
 import { Routes, RouterModule } from '@angular/router';
 import { QuestionPreviewGeneralComponent } from './components/question-preview-general/question-preview-general.component';
+import { QuestioningGeneralComponent } from './components/questioning-general/questioning-general.component';
 import { QuestionsPreviewGeneralComponent } from './components/questions-preview-general/questions-preview-general.component';
 
 const routes: Routes = [
   {
-    path: 'preview',
-    pathMatch: 'full',
-    component: QuestionsPreviewGeneralComponent
-  },
-  {
-    path: ':questionUid',
-    component: QuestionPreviewGeneralComponent
+    component: QuestioningGeneralComponent,
+    path: '',
+    children: [
+      {
+        path: 'preview',
+        pathMatch: 'full',
+        component: QuestionsPreviewGeneralComponent
+      },
+      {
+        path: ':questionUid',
+        component: QuestionPreviewGeneralComponent
+      }
+    ]
   }
 ];
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/components/components.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/components/components.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/components/components.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -4,5 +4,7 @@
 import { HeaderComponent } from './generic/header/header.component';
 import { VoteComponent } from './generic/vote/vote.component';
+import { PreviewQuestionDisplayComponent } from './question/preview-question-display/preview-question-display.component';
 import { QuestionPreviewComponent } from './question/question-preview/question-preview.component';
+import { SearchQuestionComponent } from './question/search-question/search-question.component';
 import { StudentCardComponent } from './question/student-card/student-card.component';
 
@@ -14,4 +16,6 @@
   VoteComponent,
   StudentCardComponent,
-  HeaderComponent
+  HeaderComponent,
+  SearchQuestionComponent,
+  PreviewQuestionDisplayComponent
 ];
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.html
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.html	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.html	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,24 @@
+<mat-card class="margin-bottom-md cursor" appHoverElevation (click)="handleQuestionCardClicked()">
+  <mat-card-title>{{ question?.title }}</mat-card-title>
+  <mat-card-subtitle>{{
+    'questions-preview-question-subtitle' | translate: { date: question?.createdOn | momentDate: 'LLLL' }
+  }}</mat-card-subtitle>
+
+  <mat-card-content>
+    <div fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="start center">
+      <mat-chip-list>
+        <mat-chip *ngFor="let category of question?.categories">
+          {{ category.nameTranslated }}
+        </mat-chip>
+      </mat-chip-list>
+      <div class="text-center push-end">
+        <mat-icon matBadge="{{ question?.answersCount }}" matBadgeColor="primary">question_answer</mat-icon>
+        <p>{{ 'questions-preview-question-answers' | translate }}</p>
+      </div>
+      <div class="text-center">
+        <mat-icon matBadge="{{ question?.views }}" matBadgeColor="primary">visibility</mat-icon>
+        <p>{{ 'questions-preview-question-views' | translate }}</p>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.scss
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.scss	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.scss	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,11 @@
+mat-card-subtitle {
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.push-end {
+  margin-left: auto;
+}
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.spec.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.spec.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.spec.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreviewQuestionDisplayComponent } from './preview-question-display.component';
+
+describe('PreviewQuestionDisplayComponent', () => {
+  let component: PreviewQuestionDisplayComponent;
+  let fixture: ComponentFixture<PreviewQuestionDisplayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PreviewQuestionDisplayComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PreviewQuestionDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/preview-question-display/preview-question-display.component.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { PreviewQuestionViewModel } from 'src/app/shared-app/models';
+
+@Component({
+  selector: 'app-preview-question-display',
+  templateUrl: './preview-question-display.component.html',
+  styleUrls: ['./preview-question-display.component.scss']
+})
+export class PreviewQuestionDisplayComponent implements OnInit {
+  @Input() question?: PreviewQuestionViewModel;
+  @Output() questionClicked = new EventEmitter();
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  handleQuestionCardClicked(): void {
+    this.questionClicked.emit();
+  }
+}
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.html
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.html	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.html	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,28 @@
+<mat-card>
+  <mat-card-content>
+    <mat-form-field class="full-width" appearance="fill" appHandleInputFormErrors>
+      <input
+        [placeholder]="'questions-preview-find-question' | translate"
+        matInput
+        autocomplete="off"
+        [formControl]="questionSearchFormContor"
+        (keydown)="searchQuestionsKeyboard($event)"
+      />
+      <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+    <mat-form-field appearance="fill">
+      <mat-select
+        [formControl]="questionCategoriesFormContor"
+        multiple
+        [placeholder]="'questions-preview-find-question-categories' | translate"
+      >
+        <mat-option *ngFor="let category of categories$ | async" [value]="category.uid">{{ category.translatedName }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </mat-card-content>
+  <mat-card-actions>
+    <app-button [buttonType]="ButtonType.CallToAction" [disabled]="questionSearchFormContor.invalid" (action)="searchQuestions()">{{
+      'questions-search' | translate
+    }}</app-button>
+  </mat-card-actions>
+</mat-card>
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.spec.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.spec.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.spec.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchQuestionComponent } from './search-question.component';
+
+describe('SearchQuestionComponent', () => {
+  let component: SearchQuestionComponent;
+  let fixture: ComponentFixture<SearchQuestionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchQuestionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchQuestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { CategoryFacadeService } from 'src/app/core/state/category-facade.service';
+import { CategoryStateViewModel } from 'src/app/shared-app/models';
+import { ButtonType } from '../../generic/button/button.models';
+
+@Component({
+  selector: 'app-search-question',
+  templateUrl: './search-question.component.html',
+  styleUrls: ['./search-question.component.scss']
+})
+export class SearchQuestionComponent implements OnInit {
+  ButtonType = ButtonType;
+  questionSearchFormContor = new FormControl('', [Validators.required, Validators.maxLength(250)]);
+  questionCategoriesFormContor = new FormControl();
+  categories$ = this.categoriesFacade.getCategories();
+
+  constructor(private categoriesFacade: CategoryFacadeService) {}
+
+  ngOnInit(): void {}
+
+  public searchQuestionsKeyboard(event: KeyboardEvent): void {
+    if (event.code === 'enter') {
+      this.searchQuestions();
+    }
+  }
+
+  public searchQuestions(): void {
+    alert('SEARCH');
+  }
+}
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/models/index.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/models/index.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/models/index.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -3,2 +3,3 @@
 export * from './question-state-view-models.models';
 export * from './category-state-view-models.models';
+export * from './question-state-enums.models';
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/models/question-state-enums.models.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/models/question-state-enums.models.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/models/question-state-enums.models.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -0,0 +1,4 @@
+export enum PreviewQuestionsOrderEnum {
+  Latest,
+  Popular
+}
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/models/question-state-view-models.models.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/models/question-state-view-models.models.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/models/question-state-view-models.models.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -54,2 +54,17 @@
   constructor(public uid: string, public index: string, public imageUrl: string, public reputation: number) {}
 }
+
+export class PreviewQuestionViewModel {
+  constructor(
+    public uid: string,
+    public title: string,
+    public createdOn: moment.Moment,
+    public views: number,
+    public answersCount: number,
+    public categories: PreviewQuestionCategoryViewModel[]
+  ) {}
+}
+
+export class PreviewQuestionCategoryViewModel {
+  constructor(public uid: string, public text: string, public nameTranslated: string) {}
+}
Index: src/Clients/Angular/finki-chattery/src/app/shared-app/pipes/moment-date.pipe.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-app/pipes/moment-date.pipe.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/shared-app/pipes/moment-date.pipe.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -6,5 +6,5 @@
 })
 export class MomentDatePipe implements PipeTransform {
-  transform(value: moment.Moment, dateFormat: string): any {
+  transform(value: moment.Moment | undefined | null, dateFormat: string): any {
     return moment(value).format(dateFormat);
   }
Index: src/Clients/Angular/finki-chattery/src/app/shared-material/shared-material.module.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/shared-material/shared-material.module.ts	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/app/shared-material/shared-material.module.ts	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -23,4 +23,5 @@
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({
@@ -47,5 +48,6 @@
     MatChipsModule,
     MatTooltipModule,
-    MatButtonToggleModule
+    MatButtonToggleModule,
+    MatBadgeModule
   ],
   exports: [
@@ -70,5 +72,6 @@
     MatChipsModule,
     MatTooltipModule,
-    MatButtonToggleModule
+    MatButtonToggleModule,
+    MatBadgeModule
   ]
 })
Index: src/Clients/Angular/finki-chattery/src/assets/translations/en.json
===================================================================
--- src/Clients/Angular/finki-chattery/src/assets/translations/en.json	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/assets/translations/en.json	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -28,4 +28,19 @@
   "software-engineering": "Software engineering",
   "visual-programming": "Visual programming",
-  "operating-systems": "Operating systems"
+  "operating-systems": "Operating systems",
+  "internet-programming": "Internet programming",
+  "object-oriented-programming": "Object oriented programming",
+  "calculus": "Calculus",
+  "discrete-mathematics": "Discrete mathematics",
+  "web-programming": "Web programming",
+  "advanced-programming": "Advanced programming",
+  "questions-preview-find-question": "Search for a question",
+  "questions-preview-find-question-categories": "Search in categories",
+  "questions-search": "Search",
+  "questions-preview": "Preview questions",
+  "question-sort-newest": "Newest",
+  "question-sort-popular": "Most popular",
+  "questions-preview-question-subtitle": "Asked on: {{date}}",
+  "questions-preview-question-answers": "Answers",
+  "questions-preview-question-views": "Views"
 }
Index: src/Clients/Angular/finki-chattery/src/styles.scss
===================================================================
--- src/Clients/Angular/finki-chattery/src/styles.scss	(revision 2b66157c337b3a9dfedd72eb4a1f8f936a9d69f9)
+++ src/Clients/Angular/finki-chattery/src/styles.scss	(revision 70e04f1c57f82159bfd145eb4e57f6b71dee8bd6)
@@ -285,2 +285,6 @@
   z-index: 1100 !important;
 }
+
+.full-width {
+  width: 100%;
+}
