diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 000000000..b0224045b
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,4 @@
+# List the ports you want to expose and what to do when they are served. See https://www.gitpod.io/docs/config-ports/
+ports:
+  - port: 3000
+    onOpen: open-browser
\ No newline at end of file
diff --git a/.theia/launch.json b/.theia/launch.json
new file mode 100644
index 000000000..a2ea02c46
--- /dev/null
+++ b/.theia/launch.json
@@ -0,0 +1,6 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  "version": "0.2.0",
+  "configurations": []
+}
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 000000000..fb56b47f0
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,93 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activemodel (4.2.11.3)
+      activesupport (= 4.2.11.3)
+      builder (~> 3.1)
+    activerecord (4.2.11.3)
+      activemodel (= 4.2.11.3)
+      activesupport (= 4.2.11.3)
+      arel (~> 6.0)
+    activesupport (4.2.11.3)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    arel (6.0.4)
+    bond (0.5.1)
+    builder (3.2.4)
+    coderay (1.1.3)
+    concurrent-ruby (1.1.7)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    method_source (1.0.0)
+    minitest (5.14.2)
+    multi_json (1.15.0)
+    mustermann (1.1.1)
+      ruby2_keywords (~> 0.0.1)
+    nio4r (2.5.4)
+    pry (0.13.1)
+      coderay (~> 1.1)
+      method_source (~> 1.0)
+    puma (5.0.4)
+      nio4r (~> 2.0)
+    rack (2.2.3)
+    rack-protection (2.1.0)
+      rack
+    rack-test (0.6.3)
+      rack (>= 1.0)
+    rake (13.0.1)
+    ripl (0.7.1)
+      bond (~> 0.5.1)
+    ripl-multi_line (0.3.1)
+      ripl (>= 0.3.6)
+    ripl-rack (0.2.1)
+      rack (>= 1.0)
+      rack-test (~> 0.6.2)
+      ripl (>= 0.7.0)
+    ruby2_keywords (0.0.2)
+    shotgun (0.9.2)
+      rack (>= 1.0)
+    sinatra (2.1.0)
+      mustermann (~> 1.0)
+      rack (~> 2.2)
+      rack-protection (= 2.1.0)
+      tilt (~> 2.0)
+    sinatra-activerecord (2.0.21)
+      activerecord (>= 4.1)
+      sinatra (>= 1.0)
+    sinatra-contrib (2.1.0)
+      multi_json
+      mustermann (~> 1.0)
+      rack-protection (= 2.1.0)
+      sinatra (= 2.1.0)
+      tilt (~> 2.0)
+    sqlite3 (1.3.13)
+    thread_safe (0.3.6)
+    tilt (2.0.10)
+    tux (0.3.0)
+      ripl (>= 0.3.5)
+      ripl-multi_line (>= 0.2.4)
+      ripl-rack (>= 0.2.0)
+      sinatra (>= 1.2.1)
+    tzinfo (1.2.8)
+      thread_safe (~> 0.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activerecord (~> 4.2.0)
+  activesupport
+  pry
+  puma
+  rake
+  shotgun
+  sinatra
+  sinatra-activerecord
+  sinatra-contrib
+  sqlite3 (~> 1.3.6)
+  tux
+
+BUNDLED WITH
+   2.1.4
diff --git a/README.md b/README.md
index 2577b6932..d1371d6d9 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/lighthouse-labs/finstagram)
+
 # finstagram
 
 
diff --git a/app/actions.rb b/app/actions.rb
index e69de29bb..e631cfc24 100755
--- a/app/actions.rb
+++ b/app/actions.rb
@@ -0,0 +1,136 @@
+helpers do
+  def current_user
+    User.find_by(id: session[:user_id])
+  end
+end
+
+
+get '/' do
+  @finstagram_posts = FinstagramPost.order(created_at: :desc)
+  erb(:index)
+end
+
+
+get '/signup' do 
+    @user = User.new 
+    erb(:signup) 
+end
+
+
+post '/signup' do
+  email      = params[:email]
+  avatar_url = params[:avatar_url]
+  username   = params[:username]
+  password   = params[:password]
+
+  @user = User.new({ email: email, avatar_url: avatar_url, username: username, password: password })
+
+  if @user.save
+    "User #{username} saved!"
+  else
+    erb(:signup)
+  end
+end
+
+
+get '/login' do    # when a GET request comes into /login
+  erb(:login)      # render app/views/login.erb
+end
+
+
+post '/login' do
+  username = params[:username]
+  password = params[:password]
+
+  user = User.find_by(username: username)  
+
+  if user && user.password == password
+    session[:user_id] = user.id
+    redirect to('/')
+  else
+    @error_message = "Login failed."
+    erb(:login)
+  end
+end
+
+
+post '/signup' do
+  email      = params[:email]
+  avatar_url = params[:avatar_url]
+  username   = params[:username]
+  password   = params[:password]
+
+  @user = User.new({ email: email, avatar_url: avatar_url, username: username, password: password })
+
+  if @user.save
+    redirect to('/login')
+  else
+    erb(:signup)
+  end
+end
+
+
+get '/logout' do
+  session[:user_id] = nil
+  redirect to('/')
+end
+
+
+get '/finstagram_posts/new' do
+  @finstagram_post = FinstagramPost.new
+  erb(:"finstagram_posts/new")
+end
+
+
+post '/finstagram_posts' do
+  photo_url = params[:photo_url]
+
+  @finstagram_post = FinstagramPost.new({ photo_url: photo_url, user_id: current_user.id })
+
+  if @finstagram_post.save
+    redirect(to('/'))
+  else
+    erb(:"finstagram_posts/new")
+  end
+end
+
+
+get '/finstagram_posts/:id' do
+  @finstagram_post = FinstagramPost.find(params[:id])   # find the finstagram post with the ID from the URL
+  erb(:"finstagram_posts/show")               # render app/views/finstagram_posts/show.erb
+end
+
+
+
+post '/comments' do
+  # point values from params to variables
+  text = params[:text]
+  finstagram_post_id = params[:finstagram_post_id]
+
+  # instantiate a comment with those values & assign the comment to the `current_user`
+  comment = Comment.new({ text: text, finstagram_post_id: finstagram_post_id, user_id: current_user.id })
+
+  # save the comment
+  comment.save
+
+  # `redirect` back to wherever we came from
+  redirect(back)
+end
+
+
+post '/likes' do
+  finstagram_post_id = params[:finstagram_post_id]
+
+  like = Like.new({ finstagram_post_id: finstagram_post_id, user_id: current_user.id })
+  like.save
+
+  redirect(back)
+end
+
+delete '/likes/:id' do
+  like = Like.find(params[:id])
+  like.destroy
+  redirect(back)
+end
+
+
diff --git a/app/models/comment.rb b/app/models/comment.rb
new file mode 100644
index 000000000..ddbd0478e
--- /dev/null
+++ b/app/models/comment.rb
@@ -0,0 +1,10 @@
+class Comment < ActiveRecord::Base
+
+  # Associations from a previous exercise
+  belongs_to :user
+  belongs_to :finstagram_post
+
+  # New validation code
+  validates_presence_of :text, :user, :finstagram_post
+
+end
\ No newline at end of file
diff --git a/app/models/finstagram_post.rb b/app/models/finstagram_post.rb
new file mode 100644
index 000000000..d586044b6
--- /dev/null
+++ b/app/models/finstagram_post.rb
@@ -0,0 +1,26 @@
+class FinstagramPost < ActiveRecord::Base
+  # (this is where your associations are, e.g. has_many :finstagram_posts, etc.)...
+  belongs_to :user
+  has_many :comments
+  has_many :likes
+  # validations in between association definitions and methods!
+  validates :photo_url, :user, presence: true
+  # (this is where your def humanized_time_ago method is, along with the rest of your methods in this file)...
+  def humanized_time_ago
+    time_ago_in_seconds = Time.now - self.created_at
+    time_ago_in_minutes = time_ago_in_seconds / 60
+    if time_ago_in_minutes >= 60
+      "#{(time_ago_in_minutes / 60).to_i} hours ago"
+    else
+      "#{time_ago_in_minutes.to_i} minutes ago"
+    end
+  end
+  # New Stuff Start 
+  def like_count
+    self.likes.size
+  end
+  def comment_count
+    self.comments.size
+  end
+  # New Stuff End
+end
\ No newline at end of file
diff --git a/app/models/like.rb b/app/models/like.rb
new file mode 100644
index 000000000..b4a8fb81f
--- /dev/null
+++ b/app/models/like.rb
@@ -0,0 +1,12 @@
+class Like < ActiveRecord::Base
+
+  belongs_to :user
+  belongs_to :finstagram_post
+  
+  # ...
+
+  validates_presence_of :user, :finstagram_post
+
+  
+
+end
\ No newline at end of file
diff --git a/app/models/user.rb b/app/models/user.rb
new file mode 100644
index 000000000..61ab65902
--- /dev/null
+++ b/app/models/user.rb
@@ -0,0 +1,15 @@
+class User < ActiveRecord::Base
+
+  # ... The rest of your code is still here ...
+
+  # --- Add these lines ---
+  validates :email, :username, uniqueness: true
+  validates :email, :avatar_url, :username, :password, presence: true
+
+has_many :finstagram_posts
+has_many :comments
+has_many :likes
+
+  # -----------------------
+
+end
\ No newline at end of file
diff --git a/app/views/finstagram_post.erb b/app/views/finstagram_post.erb
new file mode 100644
index 000000000..4c5917654
--- /dev/null
+++ b/app/views/finstagram_post.erb
@@ -0,0 +1,27 @@
+<article class="finstagram-post">
+  <div class="user-info">
+    <img src="<%= finstagram_post.user.avatar_url %>" alt="<%= finstagram_post.user.username %>">
+    <h2><%= finstagram_post.user.username %></h2>
+    <h3><%= finstagram_post.humanized_time_ago %></h3>
+  </div>
+  <a class="photo" href="/finstagram_posts/<%= finstagram_post.id %>">    
+    <img src="<%= finstagram_post.photo_url %>" alt="finstagram post from <%= finstagram_post.user.username %>">
+  </a>
+  
+  <div class="actions">
+    <%= finstagram_post.like_count %> likes
+    <span class="comment-count"><%= finstagram_post.comment_count %> comments</span>
+      <%= erb(:"shared/new_comment", { locals: { finstagram_post: finstagram_post }}) %>
+
+  </div>
+  <ul class="comments">
+    <% finstagram_post.comments.each do |comment| %>
+      <li>
+        <p>
+          <%= comment.user.username %>: <%= comment.text %>
+        </p>
+      </li>
+    <% end %>
+  </ul>
+</article> 
+
diff --git a/app/views/finstagram_posts/new.erb b/app/views/finstagram_posts/new.erb
new file mode 100644
index 000000000..5e99bca27
--- /dev/null
+++ b/app/views/finstagram_posts/new.erb
@@ -0,0 +1,39 @@
+<h2>New Post</h2>
+
+<ul class="errors">
+  <% @finstagram_post.errors.full_messages.each do |message| %>
+    <li><%= message %></li>
+  <% end %>
+</ul>
+
+<form action="/finstagram_posts" method="POST">
+  <div class="form-group">
+    <label for="photo_url">Photo URL</label>
+    <input type="text" id="photo_url" name="photo_url">
+  </div>
+  <div class="form-group">
+    <button class="button" type="submit">Post</button>
+  </div>
+</form>
+
+<img id="preview" style="display: none;max-width: 200px;" src="">
+<script
+  src="https://code.jquery.com/jquery-3.5.1.min.js"
+  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+  crossorigin="anonymous"></script>
+<script>
+  $(document).ready(function() {
+    // Listen for blur event
+    $('#photo_url').on('blur', function(event) {
+      // Blur event fired
+      var photoUrl = $(this).val();
+      var preview = $('#preview');
+      if(photoUrl) {
+        preview.attr('src', photoUrl);
+        preview.show();
+      } else {
+        preview.hide();
+      }
+    });
+  });
+</script> 
\ No newline at end of file
diff --git a/app/views/finstagram_posts/show.erb b/app/views/finstagram_posts/show.erb
new file mode 100644
index 000000000..5921e2035
--- /dev/null
+++ b/app/views/finstagram_posts/show.erb
@@ -0,0 +1 @@
+<%= erb(:"shared/finstagram_post", { locals: { finstagram_post: @finstagram_post, allow_new_comment: true }}) %>
diff --git a/app/views/index.erb b/app/views/index.erb
new file mode 100644
index 000000000..39d10e874
--- /dev/null
+++ b/app/views/index.erb
@@ -0,0 +1,11 @@
+<% if current_user %>
+  <div class="new-finstagram-post">
+    <a href="/finstagram_posts/new" class="button">New Post</a>
+  </div>
+<% end %>
+
+<% @finstagram_posts.each do |finstagram_post| %>
+
+    <%= erb(:"shared/finstagram_post", { locals: { finstagram_post: finstagram_post, allow_new_comment: false }}) %>
+
+<% end %>
\ No newline at end of file
diff --git a/app/views/index.html b/app/views/index.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/views/layout.erb b/app/views/layout.erb
new file mode 100644
index 000000000..d0bb4347f
--- /dev/null
+++ b/app/views/layout.erb
@@ -0,0 +1,31 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="/stylesheets/normalize.css">
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,700italic,700,300">
+    <link rel="stylesheet" href="/stylesheets/lib.css">
+    <link rel="stylesheet" href="/stylesheets/app.css">
+    <title>Finstagram</title>
+  </head>
+
+   <body>
+    <header>
+      <h1>
+    <a href="/">Finstagram</a>
+  </h1>
+      <div class="login-info">
+        <% if current_user %>
+          <%= current_user.username %>
+          <a href="/logout">Logout</a>
+        <% else %>
+          <a href="/login">Login</a>
+          <a href="/signup">Signup</a>
+        <% end %>
+      </div>
+    </header>
+    <main role="main">
+      <%= yield %>
+    </main>
+  </body>
+
+
+</html>
\ No newline at end of file
diff --git a/app/views/login.erb b/app/views/login.erb
new file mode 100644
index 000000000..14ba4fa6b
--- /dev/null
+++ b/app/views/login.erb
@@ -0,0 +1,17 @@
+<h2>Login to Finstagram</h2>
+
+<%= @error_message if @error_message %>
+
+<form action="/login" method="POST">
+  <div class="form-group">
+    <label for="username">Username</label>
+    <input type="text" id="username" name="username">
+  </div>
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input type="password" id="password" name="password">
+  </div>
+  <div class="form-group">
+    <button class="button" type="submit">login</button>
+  </div>
+</form>
\ No newline at end of file
diff --git a/app/views/shared/finstagram_post.erb b/app/views/shared/finstagram_post.erb
new file mode 100644
index 000000000..20b257303
--- /dev/null
+++ b/app/views/shared/finstagram_post.erb
@@ -0,0 +1,33 @@
+<article class="finstagram-post">
+
+  <div class="user-info">
+    <img src="<%= finstagram_post.user.avatar_url %>" alt="<%= finstagram_post.user.username %>">
+    <h2><%= finstagram_post.user.username %></h2>
+    <h3><%= finstagram_post.humanized_time_ago %></h3>
+  </div>
+
+  <a class="photo" href="/finstagram_posts/<%= finstagram_post.id %>">
+    <img src="<%= finstagram_post.photo_url %>" alt="finstagram post from <%= finstagram_post.user.username %>">
+  </a>
+
+  <div class="actions">
+  <%= erb(:"shared/likes", { locals: { finstagram_post: finstagram_post }}) %>
+  <span class="comment-count"><%= finstagram_post.comment_count %> comments</span>
+</div>
+
+<% if current_user && allow_new_comment %>
+  <%= erb(:"shared/new_comment", { locals: { finstagram_post: finstagram_post }}) %>
+<% end %>
+
+  <ul class="comments">
+    <% finstagram_post.comments.each do |comment| %>
+      <li>
+        <p>
+          <%= comment.user.username %>: <%= comment.text %>
+        </p>
+      </li>
+    <% end %>
+  </ul>
+
+</article>
+
diff --git a/app/views/shared/likes.erb b/app/views/shared/likes.erb
new file mode 100644
index 000000000..05a997c05
--- /dev/null
+++ b/app/views/shared/likes.erb
@@ -0,0 +1,29 @@
+<!-- check if `current_user` exists -->
+<% if current_user %>
+
+  <!-- check to see if user already has a like for given finstagram post -->
+  <% if like = current_user.likes.find_by({ finstagram_post_id: finstagram_post.id }) %>
+
+    <!-- display a form to delete that like the user already have -->
+    <form action="/likes/<%= like.id %>" method="POST">
+      <input name="_method" type="hidden" value="delete">
+      <button class="button user-like" type="submit">
+        <%= finstagram_post.like_count %> likes
+      </button>
+    </form>
+
+  <% else %>
+
+    <!-- display our existing form to create a like -->
+    <form action="/likes" method="POST">
+      <input type="hidden" name="finstagram_post_id" value="<%= finstagram_post.id %>">
+      <button class="button" type="submit">
+        <%= finstagram_post.like_count %> likes
+      </button>
+    </form>
+  <% end %>
+<% else %>
+
+  <!-- show like count without any form -->
+  <%= finstagram_post.like_count %> likes
+<% end %>
\ No newline at end of file
diff --git a/app/views/shared/new_comment.erb b/app/views/shared/new_comment.erb
new file mode 100644
index 000000000..2ebf6238a
--- /dev/null
+++ b/app/views/shared/new_comment.erb
@@ -0,0 +1,9 @@
+<form class="new-comment" action="/comments" method="POST">
+  <div class="form-group">
+    <input type="text" id="text" name="text" placeholder="Comment">
+  </div>
+  <input type="hidden" id="finstagram_post_id" name="finstagram_post_id" value="<%= finstagram_post.id %>">
+  <div class="form-group">
+    <button class="button" type="submit">Submit</button>
+  </div>
+</form>
\ No newline at end of file
diff --git a/app/views/signup.erb b/app/views/signup.erb
new file mode 100644
index 000000000..259f045aa
--- /dev/null
+++ b/app/views/signup.erb
@@ -0,0 +1,29 @@
+<h2>Join Finstagram!</h2>
+
+<ul class="errors">
+  <% @user.errors.full_messages.each do |message| %>
+    <li><%= message %></li>
+  <% end %>
+</ul>
+
+<form action="/signup" method="POST">
+  <div class="form-group">
+    <label for="email">Email</label>
+    <input type="email" id="email" name="email" value="<%= @user.email %>">
+  </div>
+  <div class="form-group">
+    <label for="avatar_url">Avatar URL</label>
+    <input type="text" id="avatar_url" name="avatar_url" value="<%= @user.avatar_url %>">
+  </div>
+  <div class="form-group">
+    <label for="username">Username</label>
+    <input type="text" id="username" name="username" value="<%= @user.username %>">
+  </div>
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input type="password" id="password" name="password">
+  </div>
+  <div class="form-group">
+    <button class="button" type="submit">Signup</button>
+  </div>
+</form>
\ No newline at end of file
diff --git a/db/schema.rb b/db/schema.rb
new file mode 100644
index 000000000..c2f2d7cd9
--- /dev/null
+++ b/db/schema.rb
@@ -0,0 +1,47 @@
+# encoding: UTF-8
+# This file is auto-generated from the current state of the database. Instead
+# of editing this file, please use the migrations feature of Active Record to
+# incrementally modify your database, and then regenerate this schema definition.
+#
+# Note that this schema.rb definition is the authoritative source for your
+# database schema. If you need to create the application database on another
+# system, you should be using db:schema:load, not running all the migrations
+# from scratch. The latter is a flawed and unsustainable approach (the more migrations
+# you'll amass, the slower it'll run and the greater likelihood for issues).
+#
+# It's strongly recommended that you check this file into your version control system.
+
+ActiveRecord::Schema.define(version: 0) do
+
+  create_table "comments", force: :cascade do |t|
+    t.integer  "user_id"
+    t.integer  "finstagram_post_id"
+    t.text     "text"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+  end
+
+  create_table "finstagram_posts", force: :cascade do |t|
+    t.integer  "user_id"
+    t.string   "photo_url"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+  end
+
+  create_table "likes", force: :cascade do |t|
+    t.integer  "user_id"
+    t.integer  "finstagram_post_id"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+  end
+
+  create_table "users", force: :cascade do |t|
+    t.string   "username"
+    t.string   "avatar_url"
+    t.string   "email"
+    t.string   "password"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+  end
+
+end
diff --git a/public/stylesheets/app.css b/public/stylesheets/app.css
index e69de29bb..400657343 100755
--- a/public/stylesheets/app.css
+++ b/public/stylesheets/app.css
@@ -0,0 +1,33 @@
+header {
+  background-color: #244751;
+  color: #E8FDFF;
+}
+
+body {
+  background-color: whitesmoke;
+}
+
+main {
+  background-color: white;
+  padding: 16px;
+}
+
+.finstagram-post {
+  margin-bottom: 48px;
+}
+
+.finstagram-post .user-info img {
+  border-radius: 50%;
+}
+
+body { 
+font-family: 'Lobster', cursive;
+/* font-family: 'Xanh Mono', monospace; */
+}
+
+a.photo{
+    transition: padding 0.5s;
+  }
+  a.photo:hover{
+    padding: 10px;
+  }
\ No newline at end of file