diff --git a/lib/states/boot.rb b/lib/states/boot.rb
index c386590..8c95bb6 100644
--- a/lib/states/boot.rb
+++ b/lib/states/boot.rb
@@ -7,7 +7,7 @@ class W3DHub
         @fraction = 0.0
         @w3dhub_logo = get_image("#{GAME_ROOT_PATH}/media/icons/w3dhub.png")
 
-        stack(width: 1.0, height: 1.0) do
+        stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: 0xff_aaaaaa) do
           stack(width: 1.0, height: 0.925) do
           end
 
diff --git a/lib/states/interface.rb b/lib/states/interface.rb
index bb9e092..796b9e6 100644
--- a/lib/states/interface.rb
+++ b/lib/states/interface.rb
@@ -4,6 +4,7 @@ class W3DHub
       def setup
         window.show_cursor = true
 
+        @active_page = nil
         @focused_game = W3DHub::Game.games.first
 
         @main_thread_queue = []
@@ -43,10 +44,10 @@ class W3DHub
 
         @game_news = {}
 
-        stack(width: 1.0, height: 1.0) do
-          @header_container = flow(width: 1.0, height: 0.15, padding: 4) do
-            background 0xff_252525
+        stack(width: 1.0, height: 1.0, border_thickness: 1, border_color: 0xff_aaaaaa) do
+          background 0xff_252525
 
+          @header_container = flow(width: 1.0, height: 0.15, padding: 4) do
             image "#{GAME_ROOT_PATH}/media/icons/w3dhub.png", width: 0.11
 
             stack(width: 0.89, height: 1.0) do
@@ -68,12 +69,13 @@ class W3DHub
                     tagline "<b>Cyberarm</b>"
 
                     flow(width: 1.0) do
-                      link "Logout", text_size: 14
+                      link("Logout", text_size: 14) { page(:login) }
                       link "Profile", text_size: 14
+                      link("Settings", text_size: 14) { page(:settings) }
                     end
                   end
 
-                  image EMPTY_IMAGE, height: 1.0
+                  image BLACK_IMAGE, height: 1.0
                 end
               end
 
@@ -84,9 +86,17 @@ class W3DHub
                 end
 
                 flow(width: 0.55, height: 1.0) do
-                  link "Games"
-                  link "Server Browser", margin_left: 18
-                  link "Community", margin_left: 18
+                  link "Games" do
+                    page(:games)
+                  end
+
+                  link "Server Browser", margin_left: 18 do
+                    page(:server_browser)
+                  end
+
+                  link "Community", margin_left: 18 do
+                    page(:community)
+                  end
                 end
 
                 flow(width: 0.20, height: 1.0) do
@@ -96,20 +106,10 @@ class W3DHub
           end
 
           @content_container = flow(width: 1.0, height: 0.85) do
-            # background 0xff_44aa00
-
-            # Games List
-            @games_list_container = stack(width: 0.15, height: 1.0) do
-            end
-
-            # Game Menu
-            @game_page_container = stack(width: 0.85, height: 1.0) do
-            end
           end
         end
 
-        populate_game_page(W3DHub::Game.games.first)
-        populate_games_list
+        page(:games)
       end
 
       def update
@@ -120,6 +120,222 @@ class W3DHub
         end
       end
 
+      def page(page)
+        return if page == @active_page
+
+        send(:"#{page}_page")
+
+        @active_page = page
+      end
+
+      def games_page
+        @content_container.clear do
+          # Games List
+          @games_list_container = stack(width: 0.15, height: 1.0) do
+          end
+
+          # Game Menu
+          @game_page_container = stack(width: 0.85, height: 1.0) do
+          end
+        end
+
+        populate_game_page(W3DHub::Game.games.first)
+        populate_games_list
+      end
+
+      def server_browser_page
+        @content_container.clear do
+          stack(width: 1.0, height: 1.0, padding: 8) do
+            stack(width: 1.0, height: 0.04) do
+              inscription "<b>Filters</b>"
+            end
+
+            flow(width: 1.0, height: 0.06) do
+              flow(width: 0.75, height: 1.0) do
+                image "#{GAME_ROOT_PATH}/media/icons/ren.png", height: 1.0
+                image "#{GAME_ROOT_PATH}/media/icons/ecw.png", height: 1.0, margin_left: 32
+                image "#{GAME_ROOT_PATH}/media/icons/ia.png", height: 1.0, margin_left: 32
+                image "#{GAME_ROOT_PATH}/media/icons/apb.png", height: 1.0, margin_left: 32
+                image "#{GAME_ROOT_PATH}/media/icons/tsr.png", height: 1.0, margin_left: 32, margin_right: 32
+                para "Region"
+                list_box items: ["Any", "North America", "Europe"], width: 0.25
+              end
+
+              flow(width: 0.25, height: 1.0) do
+                inscription "Nickname:"
+                inscription "Cyberarm"
+                image EMPTY_IMAGE, height: 1.0
+              end
+            end
+
+            flow(width: 1.0, height: 0.9, margin_top: 16) do
+              stack(width: 0.62, height: 1.0, scroll: true) do
+                para "SERVERS"
+                # Icon
+                # Hostname
+                # Current Map
+                # Players
+                # Ping
+
+                15.times do |i|
+                  flow(width: 1.0, height: 48) do
+                    background 0xff_333333 if i.odd?
+
+                    image "#{GAME_ROOT_PATH}/media/icons/ecw.png", width: 0.08
+
+                    stack(width: 0.50, height: 1.0) do
+                      para "<b>[W3DHub] GAME SERVER"
+
+                      flow(width: 1.0, height: 1.0) do
+                        inscription "Release", margin_right: 64
+                        inscription "North America"
+                      end
+                    end
+
+                    flow(width: 0.25, height: 1.0) do
+                      para "MAP NAME"
+                    end
+
+                    flow(width: 0.1, height: 1.0) do
+                      para "99/127"
+                    end
+
+                    image "#{GAME_ROOT_PATH}/media/ui_icons/signal3.png", width: 0.05, color: 0xff_008000
+                  end.subscribe(:clicked_left_mouse_button) do
+                    populate_server_info(nil)
+                  end
+                end
+              end
+
+              @game_server_info_container = stack(width: 0.38, height: 1.0) do
+                para "SERVER INFO"
+              end
+            end
+          end
+        end
+      end
+
+      def community_page
+        @content_container.clear do
+          stack(width: 1.0, height: 1.0, padding: 8) do
+            stack(width: 1.0, height: 0.15) do
+              tagline "<b>Welcome to the W3D Hub Launcher</b>"
+              para "The W3D Hub launcher is a one-stop shop for your W3D gamings needs, providing game downloads and automatic updating, an intregrated server browser, centralized management of in-game options and many other features."
+            end
+
+            flow(width: 1.0, height: 0.1, margin_top: 24) do
+              flow(width: 0.375, height: 1.0) do
+              end
+
+              flow(width: 0.25, height: 1.0) do
+                image "#{GAME_ROOT_PATH}/media/icons/apb.png", height: 1.0
+                image "#{GAME_ROOT_PATH}/media/icons/ren.png", height: 1.0, margin_left: 32
+                image "#{GAME_ROOT_PATH}/media/icons/tsr.png", height: 1.0, margin_left: 32
+                image "#{GAME_ROOT_PATH}/media/icons/w3dhub.png", height: 1.0, margin_left: 32
+              end
+
+              flow(width: 0.375, height: 1.0) do
+              end
+            end
+
+            stack(width: 1.0, height: 0.6, scroll: true) do
+              tagline "<b>Latest Updates</b>"
+              para "<b>Beta 12</b>", margin_left: 16
+              para "- Server Browser: Added detailed information for selection server", margin_left: 32
+
+              para "<b>Beta 11.6</b>", margin_left: 16, margin_top: 16
+              para "- Localisation: Added Korean translations (unknown author)", margin_left: 32
+              para "- Localisation: Added Spanish translations (thanks to Silverlight and URKA)", margin_left: 32
+              para "- Localisation: Added Spanish translations (thanks to darkyuri-cz)", margin_left: 32
+
+              para "<b>Beta 11.0</b>", margin_left: 16, margin_top: 16
+              para "- Localisation: Added partial Chinese (Simplified) translations and Polish (thanks to DoDoCat and TrollekPL on the W3D Hub forums for providing translations)", margin_left: 32
+              para "- Performance: Reduced CPU and GPU usage during game installs and updates", margin_left: 32
+              para "- Settings: Added new setting menu for the launcher - click on the [gear] icon in the titlebar. Incluudes:", margin_left: 32
+              para "- Manually choose language, rather than using default based on OS", margin_left: 48
+              para "- Choose package cache folder location", margin_left: 48
+              para "- Choose default folder into which games are installed", margin_left: 48
+              para "- Server Browser: Now receives push notifications so it shows changes to maps, player counts, etc. as soon as they are available", margin_left: 32
+              para "- Server Browser: Now lists servers with players in above empty ones", margin_left: 32
+              para "- Server Browser: Game filter options are now saved", margin_left: 32
+            end
+
+            stack(width: 1.0, height: 0.15) do
+              tagline "<b>Help & Support</b>"
+              flow(width: 1.0) do
+                para "For help and support using this launcher or playing any W3D Hub game visit the"
+                link("W3D Hub forums", text_size: 16) { Launchy.open("https://w3dhub.com/forum/") }
+                para "or join us in"
+                link("[discord]#tech-support", text_size: 16) { Launchy.open("https://w3dhub.com/forum/") }
+                para "on the W3D Hub Discord server"
+              end
+            end
+          end
+        end
+      end
+
+      def login_page
+        @content_container.clear do
+          stack(width: 1.0, height: 1.0, padding: 32) do
+            background 0xff_252535
+
+            para "Login using your W3D Hub forum account"
+
+            flow(width: 1.0) do
+              tagline "Username", width: 0.25, text_align: :right, focus: true
+              edit_line ""
+            end
+
+            flow(width: 1.0) do
+              tagline "Password", width: 0.25, text_align: :right
+              edit_line "", type: :password
+            end
+
+            flow(width: 1.0) do
+              tagline "", width: 0.25
+              button "Log In"
+            end
+          end
+        end
+      end
+
+      def settings_page
+        @content_container.clear do
+          stack(width: 1.0, height: 1.0, padding: 64) do
+            para "<b>Language</b>"
+            para "Select the UI language you'd like to use in the W3D Hub Launcher. You should restart the launcher after changing this setting before the ui will update"
+            list_box items: ["English", "French", "German"], width: 1.0
+
+            para "<b>Folder Paths</b>", margin_top: 32
+            stack(width: 1.0, height: 0.35) do
+              flow(width: 1.0, height: 0.5) do
+                para "<b>App Install Folder</b>", width: 0.249
+
+                stack(width: 0.75, height: 1.0) do
+                  edit_line "C:\\Program Files (x86)\\W3D Hub", width: 1.0
+                  inscription "The folder into which new games and apps will be installed by the launcher"
+                end
+              end
+
+              flow(width: 1.0, height: 0.5) do
+                para "<b>Package Cache Folder</b>", width: 0.249
+
+                stack(width: 0.75, height: 1.0) do
+                  edit_line "C:\\Program Data\\W3D Hub\\Launcher\\package-cache", width: 1.0
+                  inscription "A folder which will be used to cache downloaded packages used to install games and apps"
+                end
+              end
+            end
+
+            para "<b>Diagnostics</b>"
+            check_box "Enable Automatic Error Reporting", text_size: 16
+            inscription "If this is enabled the launcher will automatically report errors to the development team, along with basic information about your machine, such as operating system."
+
+            button "Save", margin_top: 32
+          end
+        end
+      end
+
       def populate_games_list
         @games_list_container.clear do
           background 0xff_121920
@@ -245,6 +461,12 @@ class W3DHub
           end
         end
       end
+
+      def populate_server_info(server)
+        @game_server_info_container.clear do
+          title "TODO"
+        end
+      end
     end
   end
 end
diff --git a/w3dhub.rb b/w3dhub.rb
index 43fdf56..ebd867a 100644
--- a/w3dhub.rb
+++ b/w3dhub.rb
@@ -6,6 +6,7 @@ require "launchy"
 
 GAME_ROOT_PATH = File.expand_path(".", __dir__)
 EMPTY_IMAGE = Gosu::Image.from_blob(1, 1)
+BLACK_IMAGE = Gosu::Image.from_blob(1, 1, "\x00\x00\x00\xff")
 
 require_relative "lib/window"
 require_relative "lib/states/boot"