diff --git a/imgbook/config/app.php b/imgbook/config/app.php
index 2f1cf7c..28fcaa2 100644
--- a/imgbook/config/app.php
+++ b/imgbook/config/app.php
@@ -13,7 +13,7 @@
     |
     */
 
-    'name' => env('APP_NAME', 'ImgBook'),
+    'name' => env('APP_NAME', 'Imgbook'),
 
     /*
     |--------------------------------------------------------------------------
diff --git a/imgbook/public/js/app.js b/imgbook/public/js/app.js
index 42f5521..14a4f3f 100644
--- a/imgbook/public/js/app.js
+++ b/imgbook/public/js/app.js
@@ -1855,6 +1855,16 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   props: ['postId', 'userId'],
   data: function data() {
@@ -1877,6 +1887,7 @@ __webpack_require__.r(__webpack_exports__);
         //success
         _this.comments = response.data;
         _this.newComment = '';
+        console.log(response.data);
       })["catch"](function (response) {
         //failure
         console.log(response);
@@ -37328,63 +37339,95 @@ var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { attrs: { id: "root" } }, [
-    _vm._v("\n    " + _vm._s(_vm.commentMessage) + "\n    \n    "),
-    _c("input", {
-      directives: [
-        {
-          name: "model",
-          rawName: "v-model",
-          value: _vm.newComment,
-          expression: "newComment"
-        }
-      ],
-      attrs: { type: "text", id: "input" },
-      domProps: { value: _vm.newComment },
-      on: {
-        input: function($event) {
-          if ($event.target.composing) {
-            return
-          }
-          _vm.newComment = $event.target.value
-        }
-      }
-    }),
-    _vm._v(" "),
-    _c("button", { on: { click: _vm.createComment } }, [
-      _vm._v(_vm._s(_vm.changeOrPost))
-    ]),
-    _vm._v("\n\n    Comments:\n    "),
-    _c(
-      "ul",
+  return _c(
+    "div",
+    { attrs: { id: "root" } },
+    [
+      _c("div", { staticClass: "form-group" }, [
+        _c("label", [_c("b", [_vm._v(_vm._s(_vm.commentMessage))])]),
+        _vm._v(" "),
+        _c("div", { staticClass: "input-group" }, [
+          _c("input", {
+            directives: [
+              {
+                name: "model",
+                rawName: "v-model",
+                value: _vm.newComment,
+                expression: "newComment"
+              }
+            ],
+            staticClass: "form-control",
+            attrs: {
+              type: "textarea",
+              name: "text",
+              placeholder: "Enter a comment"
+            },
+            domProps: { value: _vm.newComment },
+            on: {
+              input: function($event) {
+                if ($event.target.composing) {
+                  return
+                }
+                _vm.newComment = $event.target.value
+              }
+            }
+          }),
+          _vm._v(" "),
+          _c(
+            "button",
+            {
+              staticClass: "btn btn-primary",
+              on: { click: _vm.createComment }
+            },
+            [_vm._v(_vm._s(_vm.changeOrPost))]
+          )
+        ])
+      ]),
+      _vm._v(" "),
+      _c("hr"),
+      _vm._v(" "),
       _vm._l(_vm.comments, function(comment) {
-        return _c("li", { key: comment.id }, [
-          _vm._v(
-            "\n            " +
-              _vm._s(comment.user.username) +
-              " -- " +
-              _vm._s(comment.text) +
-              "\n            "
-          ),
-          comment.user.id == _vm.userId
-            ? _c(
-                "button",
-                {
-                  attrs: { id: "editButton" },
-                  on: {
-                    click: function($event) {
-                      return _vm.editCommentButton(comment)
-                    }
-                  }
-                },
-                [_vm._v("Edit")]
-              )
-            : _vm._e()
+        return _c("div", { key: comment.id }, [
+          _c("h4", { staticClass: "media-heading user_name" }, [
+            _vm._v(_vm._s(comment.user.username))
+          ]),
+          _vm._v(" "),
+          _c("p", [_c("small", [_vm._v(_vm._s(comment.updated_at))])]),
+          _vm._v(" "),
+          _c("div", { staticClass: "container" }, [
+            _c("div", { staticClass: "row" }, [
+              _c("div", { staticClass: "col" }, [
+                _vm._v(
+                  "\n                    " +
+                    _vm._s(comment.text) +
+                    "\n                "
+                )
+              ]),
+              _vm._v(" "),
+              _c("div", { staticClass: "col-md-auto" }, [
+                comment.user.id == _vm.userId
+                  ? _c(
+                      "button",
+                      {
+                        staticClass: "btn btn-primary pull-right",
+                        attrs: { id: "editButton" },
+                        on: {
+                          click: function($event) {
+                            return _vm.editCommentButton(comment)
+                          }
+                        }
+                      },
+                      [_vm._v("Edit")]
+                    )
+                  : _vm._e()
+              ])
+            ])
+          ])
         ])
-      }),
-      0
-    )
-  ])
+      })
+    ],
+    2
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -49720,8 +49763,8 @@ __webpack_require__.r(__webpack_exports__);
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! /home/vagrant/laravel/testsite/resources/js/app.js */"./resources/js/app.js");
-module.exports = __webpack_require__(/*! /home/vagrant/laravel/testsite/resources/sass/app.scss */"./resources/sass/app.scss");
+__webpack_require__(/*! /home/vagrant/laravel/laravel-web-app/imgbook/resources/js/app.js */"./resources/js/app.js");
+module.exports = __webpack_require__(/*! /home/vagrant/laravel/laravel-web-app/imgbook/resources/sass/app.scss */"./resources/sass/app.scss");
 
 
 /***/ })
diff --git a/imgbook/resources/js/components/CommentComponent.vue b/imgbook/resources/js/components/CommentComponent.vue
index fd97758..afbed3b 100644
--- a/imgbook/resources/js/components/CommentComponent.vue
+++ b/imgbook/resources/js/components/CommentComponent.vue
@@ -1,17 +1,28 @@
 <template>
     <div id="root">
-        {{ commentMessage}}
-        
-        <input type="text" id="input" v-model="newComment">
-        <button @click="createComment">{{changeOrPost}}</button>
-
-        Comments:
-        <ul>
-            <li v-for="comment in comments" :key="comment.id">
-                {{ comment.user.username }} -- {{ comment.text}}
-                <button id="editButton" v-if="comment.user.id == userId" @click="editCommentButton(comment)">Edit</button>
-            </li>
-        </ul>
+        <div class="form-group">
+            <label><b>{{ commentMessage }}</b></label>
+            <div class="input-group">
+                <input type="textarea" name="text" class="form-control" placeholder="Enter a comment" v-model="newComment">
+                <br>
+                <button class="btn btn-primary" @click="createComment">{{changeOrPost}}</button>
+            </div>
+        </div>
+        <hr/>
+        <div v-for="comment in comments" :key="comment.id">
+            <h4 class="media-heading user_name">{{ comment.user.username }}</h4>
+            <p><small>{{ comment.updated_at }}</small></p>
+            <div class="container">
+                <div class="row">
+                    <div class="col">
+                        {{ comment.text}}
+                    </div>
+                    <div class="col-md-auto">
+                        <button class="btn btn-primary pull-right" id="editButton" v-if="comment.user.id == userId" @click="editCommentButton(comment)">Edit</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -37,6 +48,7 @@
                     //success
                     this.comments = response.data;
                     this.newComment = '';
+                    console.log(response.data);
                 })
                 .catch(response => {
                     //failure
diff --git a/imgbook/resources/views/layouts/app.blade.php b/imgbook/resources/views/layouts/app.blade.php
index 9b58777..60dd6e0 100644
--- a/imgbook/resources/views/layouts/app.blade.php
+++ b/imgbook/resources/views/layouts/app.blade.php
@@ -22,7 +22,7 @@
 <body> 
     <div id="app">
         <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
-            <div class="container">
+            <div class="container-fluid">
                 <a class="navbar-brand" href="{{ url('/') }}">
                     {{ config('app.name', 'ImgBook') }}
                 </a>
@@ -73,20 +73,31 @@
         </nav>
 
         <main class="py-4">
-            @yield('title')
-            @if (session('message'))
-                <p><b>{{ session('message')}}</b></p>
-            @endif
-            @if ($errors->any())
-            <div>
-                Errors:
-                <ul>
-                    @foreach ($errors->all() as $error)
-                        <li>{{ $error}}</li>
-                    @endforeach
-                </ul>
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <h1>@yield('title')</h1>
+                    @yield('back')
+                    @if (session('message'))
+                        <div>&nbsp;</div> {{-- add single space --}}
+                        <div class="alert alert-success alert-dismissible">
+                            <b>{{ session('message')}}</b>
+                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                        </div>
+                    @endif
+                    @if ($errors->any())
+                        <div>&nbsp;</div> {{-- add single space --}}
+                        <div class="alert alert-danger">
+                            <strong>Errors:</strong>
+                            <ul>
+                                @foreach ($errors->all() as $error)
+                                    <li>{{ $error}}</li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    @endif
+                </div>
             </div>
-        @endif
+            <div>&nbsp;</div> {{-- add single space --}}
             @yield('content')
         </main>
     </div>
diff --git a/imgbook/resources/views/posts/create.blade.php b/imgbook/resources/views/posts/create.blade.php
index 30a9fad..7ffa98f 100644
--- a/imgbook/resources/views/posts/create.blade.php
+++ b/imgbook/resources/views/posts/create.blade.php
@@ -7,28 +7,48 @@
 @endif
 
 @section('content')
-    @if ($update)
-        <form method="POST" action="{{ route('posts.update', ['id' => $post->id]) }}">
-            @csrf
-            <p>Title: <input type="text" name="title" 
-                value="{{$post->title}}"></p>
-            <p>Description: <input type="text" name="description" 
-                value="{{$post->description}}"></p>
-            <input type="submit" value="Update">
-            <a href="{{ route('posts.show', ['id' => $post->id]) }}">Cancel</a>
-            <br>
-            <img src="{{ asset($post->image->image) ?? 'No Image'}}"></li>
-        </form>
-    @else
-        <form method="POST" action="{{ route('posts.store') }}" enctype="multipart/form-data">
-            @csrf
-            <p>Title: <input type="text" name="title" 
-                value="{{ old('title') }}"></p>
-            <input type="file" name="image">
-            <p>Description: <input type="text" name="description" 
-                value="{{ old('description') }}"></p>
-            <input type="submit" value="Submit">
-            <a href="{{ route('posts.index') }}">Cancel</a>
-        </form>
-    @endif
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            @if ($update)
+                <div class="alert alert-warning">
+                    <strong>Warning!</strong>
+                    <br>
+                    To change the picture please delete the post and repost it.
+                </div>
+                <form method="POST" action="{{ route('posts.update', ['id' => $post->id]) }}">
+                    @csrf
+                    <div class="form-group">
+                            <label>Title</label>
+                            <input type="text" name="title" class="form-control" placeholder="Enter title" value="{{$post->title}}">
+                    </div>
+                    <div class="form-group">
+                            <label>Description</label>
+                            <input type="textarea" name="description" class="form-control" placeholder="Enter description" value="{{$post->description}}">
+                    </div>
+                    <button type="submit" class="btn btn-primary">Update</button>
+                    <a class="btn btn-danger" href="{{ route('posts.show', ['id' => $post->id]) }}">Cancel</a>
+                    <div>&nbsp;</div> {{-- add single space --}}
+                    <img class="img-fluid" src="{{ asset($post->image->image) ?? 'No Image'}}"></li>
+                </form>
+            @else
+                <form method="POST" action="{{ route('posts.store') }}" enctype="multipart/form-data">
+                    @csrf
+                    <div class="form-group">
+                        <label>Title</label>
+                        <input type="text" name="title" class="form-control" placeholder="Enter title" value="{{ old('title') }}">
+                    </div>
+                    <div class="form-group">
+                        <label for="exampleFormControlFile1">Attach image to your post</label>
+                        <input type="file" name="image" class="form-control-file" value="{{ old('image') }}">
+                    </div>
+                    <div class="form-group">
+                        <label>Description</label>
+                        <input type="textarea" name="description" class="form-control" placeholder="Enter description" value="{{ old('description') }}">
+                    </div>
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                    <a class="btn btn-danger" href="{{ route('posts.index') }}">Cancel</a>
+                </form>
+            @endif
+        </div>
+    </div>
 @endsection
\ No newline at end of file
diff --git a/imgbook/resources/views/posts/show.blade.php b/imgbook/resources/views/posts/show.blade.php
index e256e85..e160171 100644
--- a/imgbook/resources/views/posts/show.blade.php
+++ b/imgbook/resources/views/posts/show.blade.php
@@ -2,30 +2,45 @@
 
 @section('title', 'Post details')
 
-@section('content')
-
-    <ul>
-        <li>Title: {{ $post->title  ?? 'Untitled'}}</li>
-        <li>Image: <img src="{{ asset($post->image->image) ?? 'No Image'}}"></li>
-        <li>Description: {{ $post->description ?? 'No description'}}</li>
-        <li>User: {{ $post->user->username ?? 'Error with retrieving user'}}</li>
-    </ul>
-    @if ($post->user_id == $user_id)
-        <form method="POST"
-            action="{{ route('posts.destroy', ['user_id' => $user_id, 'id' => $post->id]) }}">
-            @csrf
-            @method('DELETE')
-            <button type="submit">Delete</button>
-        </form>
-        <form method="GET"
-            action="{{ route('posts.edit', ['id' => $post->id]) }}">
-            @csrf
-            <button type="submit">Edit</button>
-        </form>
-    @endif
-    
+@section('back')
+<a class="btn btn-primary hBack align-right" href="{{ route('posts.index') }}">Back</a>
+@stop
 
-    <p><a href="{{ route('posts.index') }}">Back</a></p>
+@section('content')
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <img src="{{ asset($post->image->image) }}" class="card-img-top">
+                <div class="card-body">
+                    
+                    <div class="row">
+                        <div class="col">
+                            <small class="text-muted">Posted by: {{ $post->user->username }}</small>
+                            <h5 class="card-title">{{ $post->title }}</h5>
+                        </div>
+                            @if ($post->user_id == $user_id)
+                            <div class="col-md-auto">
+                                <form method="GET"
+                                    action="{{ route('posts.edit', ['id' => $post->id]) }}">
+                                    @csrf
+                                    <button class="btn btn-primary" type="submit">Edit</button>
+                                </form>
+                            </div>
+                            <div class="col-md-auto">
+                                <form method="POST"
+                                    action="{{ route('posts.destroy', ['user_id' => $user_id, 'id' => $post->id]) }}">
+                                    @csrf
+                                    @method('DELETE')
+                                    <button class="btn btn-danger" type="submit">Delete</button>
+                                </form>
+                            @endif
+                        </div>
+                    </div>
 
-    <comment-component :post-id={{$post->id}} :user-id={{Auth::user()->id}}></comment-component>
+                    <p class="card-text">{{ $post->description }}</p>
+                    <comment-component :post-id={{$post->id}} :user-id={{Auth::user()->id}}></comment-component>
+                </div>
+            </div>
+        </div>
+    </div>
 @endsection
\ No newline at end of file