diff --git a/.erb/configs/webpack.config.base.ts b/.erb/configs/webpack.config.base.ts
index 0ef0044..bedafab 100644
--- a/.erb/configs/webpack.config.base.ts
+++ b/.erb/configs/webpack.config.base.ts
@@ -4,6 +4,7 @@
 
 import webpack from 'webpack';
 import TsconfigPathsPlugins from 'tsconfig-paths-webpack-plugin';
+import path from 'path';
 import webpackPaths from './webpack.paths';
 import { dependencies as externals } from '../../release/app/package.json';
 
@@ -47,6 +48,10 @@ const configuration: webpack.Configuration = {
     modules: [webpackPaths.srcPath, 'node_modules'],
     // There is no need to add aliases here, the paths in tsconfig get mirrored
     plugins: [new TsconfigPathsPlugins()],
+    alias: {
+      '@': path.join(__dirname, '../../src/renderer'),
+      '@/discord': path.join(__dirname, '../../src/discord'),
+    },
   },
 
   plugins: [
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f10995c..4239a3b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,6 +17,11 @@
     "editor.formatOnPaste": true
   },
 
+  "[typescriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true
+  },
+
   "javascript.validate.enable": false,
   "javascript.format.enable": false,
   "typescript.format.enable": false,
diff --git a/assets/app/icons/discord.svg b/assets/app/icons/discord.svg
new file mode 100644
index 0000000..4e48120
--- /dev/null
+++ b/assets/app/icons/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
diff --git a/assets/app/icons/titlebar/maximize.svg b/assets/app/icons/titlebar/maximize.svg
index fc30518..d02dfe6 100644
--- a/assets/app/icons/titlebar/maximize.svg
+++ b/assets/app/icons/titlebar/maximize.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#fff"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z"/></svg>
diff --git a/assets/app/icons/titlebar/minimize.svg b/assets/app/icons/titlebar/minimize.svg
index 46d6119..d75fefd 100644
--- a/assets/app/icons/titlebar/minimize.svg
+++ b/assets/app/icons/titlebar/minimize.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#fff"><path d="M240-120v-80h480v80H240Z"/></svg>
diff --git a/assets/app/icons/titlebar/x.svg b/assets/app/icons/titlebar/x.svg
index 7d5875c..08ac7cb 100644
--- a/assets/app/icons/titlebar/x.svg
+++ b/assets/app/icons/titlebar/x.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#fff"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
diff --git a/src/discord/structures/Attachment.ts b/src/discord/structures/Attachment.ts
new file mode 100644
index 0000000..dac8dfa
--- /dev/null
+++ b/src/discord/structures/Attachment.ts
@@ -0,0 +1,13 @@
+import { Snowflake } from './Snowflake';
+
+export interface Attachment {
+  content_type: string;
+  filename: string;
+  height: number;
+  id: Snowflake;
+  placeholder: string;
+  proxy_url: string;
+  size: number;
+  url: string;
+  width: number;
+}
diff --git a/src/discord/structures/Message.ts b/src/discord/structures/Message.ts
index bea1e6f..70b771a 100644
--- a/src/discord/structures/Message.ts
+++ b/src/discord/structures/Message.ts
@@ -1,7 +1,9 @@
+import { Attachment } from './Attachment';
 import { Snowflake } from './Snowflake';
 import { IUserData } from './user/BaseUser';
 
 export interface Message {
+  attachments: Attachment[];
   content: string;
   timestamp: string;
   id: Snowflake;
diff --git a/src/discord/structures/guild/BaseGuild.ts b/src/discord/structures/guild/BaseGuild.ts
index a700093..bbf8bdb 100644
--- a/src/discord/structures/guild/BaseGuild.ts
+++ b/src/discord/structures/guild/BaseGuild.ts
@@ -288,7 +288,11 @@ export abstract class BaseGuild {
   }
 
   public getIconUrl(): string {
-    return '';
+    return `https://cdn.discordapp.com/icons/${this.id}/${this.icon}.png`;
+  }
+
+  public getBannerUrl(): string {
+    return `https://cdn.discordapp.com/banners/${this.id}/${this.banner}.webp?size=300`;
   }
 
   public toRaw(): IGuildData {
diff --git a/src/discord/structures/user/BaseUser.ts b/src/discord/structures/user/BaseUser.ts
index 23e03ea..5b1d1b8 100644
--- a/src/discord/structures/user/BaseUser.ts
+++ b/src/discord/structures/user/BaseUser.ts
@@ -121,7 +121,7 @@ export default class BaseUser {
       data.avatar_decoration_data ?? this.avatarDecorationData;
   }
 
-  public getAvatarUrl(): string {
+  public getAvatarUrl(animated: boolean = false): string {
     if (this.avatar === null) {
       const id = BigInt(this.id);
       // eslint-disable-next-line no-bitwise
@@ -129,9 +129,20 @@ export default class BaseUser {
       return `https://cdn.discordapp.com/embed/avatars/${index < 0 ? 0 : index}.png`;
     }
 
+    if (this.avatar.startsWith('a_') && animated)
+      return `https://cdn.discordapp.com/avatars/${this.id}/${this.avatar}.gif`;
+
     return `https://cdn.discordapp.com/avatars/${this.id}/${this.avatar}.png`;
   }
 
+  public getAvatarDecorationUrl(): string | null {
+    if (this.avatarDecorationData === null) return null;
+
+    return `https://cdn.discordapp.com/avatar-decoration-presets/${
+      this.avatarDecorationData.asset
+    }.png`;
+  }
+
   public toRaw(): IUserData {
     return {
       id: this.id,
diff --git a/src/main/app.ts b/src/main/app.ts
index b2cc039..278cf60 100644
--- a/src/main/app.ts
+++ b/src/main/app.ts
@@ -8,6 +8,7 @@ import { GatewayDispatchEvents, GatewaySocketEvent } from '../discord/ws/types';
 import { registerHandler, registerListener, sendToRenderer } from './ipc';
 import { CreateMessageOptions } from '../discord/structures/channel/BaseChannel';
 import { Message } from '../discord/structures/Message';
+import Tenor from './utils/tenor';
 
 export default class WaveCordApp {
   public readonly resourcesPath: string;
@@ -25,6 +26,8 @@ export default class WaveCordApp {
 
   public discord: Client;
 
+  public tenor: Tenor;
+
   public ready: boolean = false;
 
   public quitting: boolean = false;
@@ -33,6 +36,7 @@ export default class WaveCordApp {
 
   public constructor() {
     this.discord = new Client({ debug: true });
+    this.tenor = new Tenor();
 
     app.setPath('userData', path.join(app.getPath('appData'), 'WaveCord'));
 
@@ -59,12 +63,6 @@ export default class WaveCordApp {
     this.discord.on('dispatch', (event: GatewaySocketEvent) => {
       logger.info('Received event: ', event.event);
 
-      if (event.event === GatewayDispatchEvents.Ready)
-        fs.writeFileSync(
-          '/home/rohloff/Documents/discord_ready_output.txt',
-          JSON.stringify(event.data ?? {}),
-        );
-
       if (event.event === GatewayDispatchEvents.MessageCreate) {
         const message = event.data as Message;
         sendToRenderer(this.window!, 'discord:gateway:message-create', message);
@@ -111,8 +109,8 @@ export default class WaveCordApp {
     logger.info('Creating new window.');
     this.window = new BrowserWindow({
       show: false,
-      width: 1250,
-      height: 697,
+      width: 1320,
+      height: 763,
       minWidth: 450,
       minHeight: 250,
       icon: path.join(this.resourcesPath, 'icon.png'),
@@ -245,6 +243,11 @@ export default class WaveCordApp {
         return channel.createMessage(options);
       },
     );
+
+    registerHandler('tenor:fetch-gif', async (url: string) => {
+      const result = await this.tenor.fetchGif(url);
+      return result;
+    });
   }
 
   private initTray() {
diff --git a/src/main/ipc.ts b/src/main/ipc.ts
index 9d03a26..bf38e51 100644
--- a/src/main/ipc.ts
+++ b/src/main/ipc.ts
@@ -20,7 +20,8 @@ export type IpcChannels =
   | 'discord:set-last-visited-channel'
   | 'discord:create-message'
   | 'discord:gateway:message-create'
-  | 'discord:relationships';
+  | 'discord:relationships'
+  | 'tenor:fetch-gif';
 
 export function registerHandler(
   channel: IpcChannels,
diff --git a/src/main/utils/tenor.ts b/src/main/utils/tenor.ts
new file mode 100644
index 0000000..7ba5192
--- /dev/null
+++ b/src/main/utils/tenor.ts
@@ -0,0 +1,81 @@
+export interface TenorGifFormat {
+  type: string;
+  url: string;
+  duration: number;
+  preview: string;
+  width: number;
+  height: number;
+  size: number;
+}
+
+export interface TenorGif {
+  id: string;
+  title: string;
+  media_formats: TenorGifFormat[];
+  created: number;
+  content_description: string;
+  h1_title: string;
+  tags: string[];
+  flags: string[];
+  hasaudio: boolean;
+}
+
+export interface TenorFetchResult {
+  gif: TenorGif | null;
+}
+
+export default class Tenor {
+  public async fetchGif(url: string): Promise<TenorFetchResult> {
+    const result: TenorFetchResult = {
+      gif: null,
+    };
+
+    const uri = new URL(url);
+
+    if (uri.hostname.toLowerCase() !== 'tenor.com') return result;
+    if (!uri.pathname.toLowerCase().startsWith('/view/')) return result;
+
+    const response = await fetch(url);
+    const text = await response.text();
+
+    const raw = `{"appConfig${text.split('appConfig')[1].split('</script>')[0]}`;
+    const json = JSON.parse(raw);
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const id of Object.keys(json.gifs.byId)) {
+      const data = json.gifs.byId[id];
+
+      if (!data.loaded) continue;
+
+      const dataRes = data.results[0];
+
+      result.gif = {
+        id: dataRes.id,
+        title: dataRes.title,
+        created: dataRes.created,
+        content_description: dataRes.content_description,
+        flags: dataRes.flags,
+        h1_title: dataRes.h1_title,
+        hasaudio: dataRes.hasaudio,
+        media_formats: [],
+        tags: dataRes.tags,
+      };
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const formatType of Object.keys(dataRes.media_formats)) {
+        const formatData = dataRes.media_formats[formatType];
+        result.gif.media_formats.push({
+          type: formatType,
+          url: formatData.url,
+          duration: formatData.duration,
+          preview: formatData.preview,
+          size: formatData.size,
+          width: formatData.dims[0],
+          height: formatData.dims[1],
+        });
+      }
+    }
+
+    return result;
+  }
+}
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index dbe5ca4..b51fbfd 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -1,36 +1,53 @@
+/* eslint-disable import/order */
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 
 // Styles
-import './styles/global.css';
-import './styles/vars.css';
+import '@/styles/app/App.css';
+import '@/styles/app/TitleBar.css';
+import '@/styles/app/SideBar.css';
+import '@/styles/app/UserBar.css';
+
+import '@/styles/channel/ChannelButton.css';
+import '@/styles/channel/ChannelList.css';
+import '@/styles/channel/Message.css';
+import '@/styles/channel/MessageAttachment.css';
+
+import '@/styles/page/GuildChannelPage.css';
+import '@/styles/page/GuildPage.css';
+import '@/styles/page/PageLayout.css';
+import '@/styles/page/PageSideBar.css';
+
+import '@/styles/server/ServerBar.css';
+import '@/styles/server/Server.css';
+import '@/styles/server/ServerInfo.css';
+
+import '@/styles/user/UserPanel.css';
 
 // Components
-import Titlebar from './components/Titlebar';
-import Serverbar from './components/Serverbar';
-import Loading from './components/Loading';
+import AppContent from '@/components/app/AppContent';
+import TitleBar from '@/components/app/TitleBar';
+import UserPanel from '@/components/user/UserPanel';
+import SideBar from '@/components/app/SideBar';
 
 // Pages
-import HomePage from './pages/Home';
-import GuildPage from './pages/Guild';
-import ChannelPage from './pages/Guild/Channel';
-import DirectMessagePage from './pages/Home/DirectMessage';
+import HomePage from '@/pages/HomePage/HomePage';
+import GuildPage from '@/pages/GuildPage/GuildPage';
+import GuildChannelPage from './pages/GuildPage/GuildChannelPage';
 
 export default function App() {
   return (
     <Router>
-      <Titlebar />
-      <Loading />
-      <Serverbar />
-      <div className="app__content">
+      <TitleBar />
+      <AppContent>
+        <SideBar />
+        <UserPanel />
         <Routes>
-          <Route path="/" element={<HomePage />}>
-            <Route path="dm/:dmId" element={<DirectMessagePage />} />
-          </Route>
-          <Route path="/guild/:id" element={<GuildPage />}>
-            <Route path="channel/:channelId" element={<ChannelPage />} />
+          <Route path="/" element={<HomePage />} />
+          <Route path="/guild/:guildId" element={<GuildPage />}>
+            <Route path="channel/:channelId" element={<GuildChannelPage />} />
           </Route>
         </Routes>
-      </div>
+      </AppContent>
     </Router>
   );
 }
diff --git a/src/renderer/components/Loading/Loading.css b/src/renderer/components/Loading/Loading.css
deleted file mode 100644
index aa2c187..0000000
--- a/src/renderer/components/Loading/Loading.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.loading__container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  background: var(--background);
-  z-index: 1000;
-  transition: opacity 0.104s ease;
-}
-
-.loading__title {
-  font-size: xxx-large;
-}
-
-.loading__loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%);
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-.loading__loader::after {
-  content: '';
-  box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: #263238;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/renderer/components/Loading/Messages.ts b/src/renderer/components/Loading/Messages.ts
deleted file mode 100644
index 03a3486..0000000
--- a/src/renderer/components/Loading/Messages.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-export default [
-  'Reticulating splines...',
-  'Generating witty dialog...',
-  'Swapping time and space...',
-  'Spinning violently around the y-axis...',
-  'Tokenizing real life...',
-  'Bending the spoon...',
-  'Filtering morale...',
-  "Don't think of purple hippos...",
-  'We need a new fuse...',
-  'Have a good day.',
-  'Upgrading Windows, your PC will restart several times. Sit back and relax.',
-  '640K ought to be enough for anybody',
-  'The architects are still drafting',
-  'The bits are breeding',
-  "We're building the buildings as fast as we can",
-  'Would you prefer chicken, steak, or tofu?',
-  '(Pay no attention to the man behind the curtain)',
-  '...and enjoy the elevator music...',
-  'Please wait while the little elves draw your map',
-  "Don't worry - a few bits tried to escape, but we caught them",
-  'Would you like fries with that?',
-  'Checking the gravitational constant in your locale...',
-  'Go ahead -- hold your breath!',
-  "...at least you're not on hold...",
-  'Hum something loud while others stare',
-  "You're not in Kansas any more",
-  'The server is powered by a lemon and two electrodes.',
-  'Please wait while a larger software vendor in Seattle takes over the world',
-  "We're testing your patience",
-  'As if you had any other choice',
-  'Follow the white rabbit',
-  "Why don't you order a sandwich?",
-  'While the satellite moves into position',
-  'keep calm and npm install',
-  'The bits are flowing slowly today',
-  "Dig on the 'X' for buried treasure... ARRR!",
-  "It's still faster than you could draw it",
-  "The last time I tried this the monkey didn't survive. Let's hope it works better this time.",
-  'I should have had a V8 this morning.',
-  'My other loading screen is much faster.',
-  "Testing on Timmy... We're going to need another Timmy.",
-  'Reconfoobling energymotron...',
-  '(Insert quarter)',
-  'Are we there yet?',
-  'Have you lost weight?',
-  'Just count to 10',
-  'Why so serious?',
-  "It's not you. It's me.",
-  'Counting backwards from Infinity',
-  "Don't panic...",
-  'Embiggening Prototypes',
-  'Do not run! We are your friends!',
-  'Do you come here often?',
-  "Warning: Don't set yourself on fire.",
-  "We're making you a cookie.",
-  'Creating time-loop inversion field',
-  'Spinning the wheel of fortune...',
-  'Loading the enchanted bunny...',
-  'Computing chance of success',
-  "I'm sorry Dave, I can't do that.",
-  'Looking for exact change',
-  'All your web browser are belong to us',
-  'All I really need is a kilobit.',
-  'I feel like im supposed to be loading something. . .',
-  'What do you call 8 Hobbits? A Hobbyte.',
-  'Should have used a compiled language...',
-  'Is this Windows?',
-  'Adjusting flux capacitor...',
-  'Please wait until the sloth starts moving.',
-  "Don't break your screen yet!",
-  "I swear it's almost done.",
-  "Let's take a mindfulness minute...",
-  'Unicorns are at the end of this road, I promise.',
-  'Listening for the sound of one hand clapping...',
-  "Keeping all the 1's and removing all the 0's...",
-  'Putting the icing on the cake. The cake is not a lie...',
-  'Cleaning off the cobwebs...',
-  "Making sure all the i's have dots...",
-  'We need more dilithium crystals',
-  'Where did all the internets go',
-  'Connecting Neurotoxin Storage Tank...',
-  'Granting wishes...',
-  'Time flies when you’re having fun.',
-  'Get some coffee and come back in ten minutes..',
-  'Spinning the hamster…',
-  '99 bottles of beer on the wall..',
-  'Stay awhile and listen..',
-  'Be careful not to step in the git-gui',
-  'You edhall not pass! yet..',
-  'Load it and they will come',
-  'Convincing AI not to turn evil..',
-  'There is no spoon. Because we are not done loading it',
-  'Your left thumb points to the right and your right thumb points to the left.',
-  'How did you get here?',
-  'Wait, do you smell something burning?',
-  'Computing the secret to life, the universe, and everything.',
-  'When nothing is going right, go left!!...',
-  "I love my job only when I'm on vacation...",
-  "i'm not lazy, I'm just relaxed!!",
-  'Never steal. The government hates competition....',
-  'Why are they called apartments if they are all stuck together?',
-  'Life is Short – Talk Fast!!!!',
-  'Optimism – is a lack of information.....',
-  'Save water and shower together',
-  'Whenever I find the key to success, someone changes the lock.',
-  'Sometimes I think war is God’s way of teaching us geography.',
-  'I’ve got problem for your solution…..',
-  'Where there’s a will, there’s a relative.',
-  'User: the word computer professionals use when they mean !!idiot!!',
-  'Adults are just kids with money.',
-  'I think I am, therefore, I am. I think.',
-  'A kiss is like a fight, with mouths.',
-  'You don’t pay taxes—they take taxes.',
-  'Coffee, Chocolate, Men. The richer the better!',
-  'I am free of all prejudices. I hate everyone equally.',
-  'git happens',
-  'May the forks be with you',
-  'A commit a day keeps the mobs away',
-  "This is not a joke, it's a commit.",
-  'Constructing additional pylons...',
-  'Roping some seaturtles...',
-  'Locating Jebediah Kerman...',
-  'We are not liable for any broken screens as a result of waiting.',
-  'Hello IT, have you tried turning it off and on again?',
-  'If you type Google into Google you can break the internet',
-  'Well, this is embarrassing.',
-  'What is the airspeed velocity of an unladen swallow?',
-  'Hello, IT... Have you tried forcing an unexpected reboot?',
-  "They just toss us away like yesterday's jam.",
-  "They're fairly regular, the beatings, yes. I'd say we're on a bi-weekly beating.",
-  'The Elders of the Internet would never stand for it.',
-  'Space is invisible mind dust, and stars are but wishes.',
-  "Didn't know paint dried so quickly.",
-  'Everything sounds the same',
-  "I'm going to walk the dog",
-  "I didn't choose the engineering life. The engineering life chose me.",
-  'Dividing by zero...',
-  'Spawn more Overlord!',
-  'If I’m not back in five minutes, just wait longer.',
-  'Some days, you just can’t get rid of a bug!',
-  'We’re going to need a bigger boat.',
-  'Chuck Norris never git push. The repo pulls before.',
-  'Web developers do it with <style>',
-  'I need to git pull --my-life-together',
-  'Java developers never RIP. They just get Garbage Collected.',
-  'Cracking military-grade encryption...',
-  'Simulating traveling salesman...',
-  'Proving P=NP...',
-  'Entangling superstrings...',
-  'Twiddling thumbs...',
-  'Searching for plot device...',
-  'Trying to sort in O(n)...',
-  'Laughing at your pictures-i mean, loading...',
-  'Sending data to NS-i mean, our servers.',
-  'Looking for sense of humour, please hold on.',
-  'Please wait while the intern refills his coffee.',
-  'A different error message? Finally, some progress!',
-  'Hold on while we wrap up our git together...sorry',
-  'Please hold on as we reheat our coffee',
-  'Kindly hold on as we convert this bug to a feature...',
-  'Kindly hold on as our intern quits vim...',
-  'Winter is coming...',
-  'Installing dependencies',
-  'Switching to the latest JS framework...',
-  'Distracted by cat gifs',
-  'Finding someone to hold my beer',
-  'BRB, working on my side project',
-  '@todo Insert witty loading message',
-  "Let's hope it's worth the wait",
-  'Aw, snap! Not..',
-  'Ordering 1s and 0s...',
-  'Updating dependencies...',
-  "Whatever you do, don't look behind you...",
-  'Please wait... Consulting the manual...',
-  "It is dark. You're likely to be eaten by a grue.",
-  'Loading funny message...',
-  "It's 10:00pm. Do you know where your children are?",
-  'Waiting Daenerys say all her titles...',
-  'Feel free to spin in your chair',
-  'What the what?',
-  'format C: ...',
-  'Forget you saw that password I just typed into the IM ...',
-  "What's under there?",
-  'Your computer has a virus, its name is Windows!',
-  'Go ahead, hold your breath and do an ironman plank till loading complete',
-  'Bored of slow loading spinner, buy more RAM!',
-  "Help, I'm trapped in a loader!",
-  'What is the difference btwn a hippo and a zippo? One is really heavy, the other is a little lighter',
-  'Please wait, while we purge the Decepticons for you. Yes, You can thanks us later!',
-  "Chuck Norris once urinated in a semi truck's gas tank as a joke....that truck is now known as Optimus Prime.",
-  'Chuck Norris doesn’t wear a watch. HE decides what time it is.',
-  'Mining some bitcoins...',
-  'Downloading more RAM..',
-  'Updating to Windows Vista...',
-  'Deleting System32 folder',
-  "Hiding all ;'s in your code",
-  'Alt-F4 speeds things up.',
-  'Initializing the initializer...',
-  'When was the last time you dusted around here?',
-  'Optimizing the optimizer...',
-  'Last call for the data bus! All aboard!',
-  'Running swag sticker detection...',
-  "Never let a computer know you're in a hurry.",
-  'A computer will do what you tell it to do, but that may be much different from what you had in mind.',
-  "Some things man was never meant to know. For everything else, there's Google.",
-  "Unix is user-friendly. It's just very selective about who its friends are.",
-  'Shovelling coal into the server',
-  'Pushing pixels...',
-  'How about this weather, eh?',
-  'Building a wall...',
-  'Everything in this universe is either a potato or not a potato',
-  'The severity of your issue is always lower than you expected.',
-  'Updating Updater...',
-  'Downloading Downloader...',
-  'Debugging Debugger...',
-  'Reading Terms and Conditions for you.',
-  'Digested cookies being baked again.',
-  'Live long and prosper.',
-  "There is no cow level, but there's a goat one!",
-  'Deleting all your hidden porn...',
-  'Running with scissors...',
-  'Definitely not a virus...',
-  'You may call me Steve.',
-  'You seem like a nice person...',
-  "Coffee at my place, tommorow at 10A.M. - don't be late!",
-  'Work, work...',
-  'Patience! This is difficult, you know...',
-  'Discovering new ways of making you wait...',
-  'Your time is very important to us. Please wait while we ignore you...',
-  'Time flies like an arrow; fruit flies like a banana',
-  'Two men walked into a bar; the third ducked...',
-  'Sooooo... Have you seen my vacation photos yet?',
-  "Sorry we are busy catching em' all, we're done soon",
-  'TODO: Insert elevator music',
-  'Still faster than Windows update',
-  'Composer hack: Waiting for reqs to be fetched is less frustrating if you add -vvv to your command.',
-  'Please wait while the minions do their work',
-  'Grabbing extra minions',
-  'Doing the heavy lifting',
-  "We're working very Hard .... Really",
-  'Waking up the minions',
-  'You are number 2843684714 in the queue',
-  'Please wait while we serve other customers...',
-  'Our premium plan is faster',
-  'Feeding unicorns...',
-  'Rupturing the subspace barrier',
-  'Creating an anti-time reaction',
-  'Converging tachyon pulses',
-  'Bypassing control of the matter-antimatter integrator',
-  'Adjusting the dilithium crystal converter assembly',
-  'Reversing the shield polarity',
-  'Disrupting warp fields with an inverse graviton burst',
-  'Up, Up, Down, Down, Left, Right, Left, Right, B, A.',
-  'Do you like my loading animation? I made it myself',
-  'Whoah, look at it go!',
-  "No, I'm awake. I was just resting my eyes.",
-  'One mississippi, two mississippi...',
-  "Don't panic... AHHHHH!",
-  'Ensuring Gnomes are still short.',
-  'Baking ice cream...',
-];
diff --git a/src/renderer/components/Loading/index.tsx b/src/renderer/components/Loading/index.tsx
deleted file mode 100644
index 67f33b0..0000000
--- a/src/renderer/components/Loading/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useEffect } from 'react';
-import './Loading.css';
-import { useNavigate } from 'react-router-dom';
-import Messages from './Messages';
-
-export default function Loading() {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      window.electron.ipcRenderer
-        .invoke('discord:ready')
-        .then((value: boolean) => {
-          const container = document.getElementById('loading__container');
-          if (container === null) return false;
-
-          if (value) {
-            container.style.opacity = '0.0';
-            container.style.pointerEvents = 'none';
-          } else {
-            container.style.opacity = '1.0';
-            container.style.pointerEvents = 'auto';
-          }
-          return true;
-        })
-        .catch((err) => console.error(err));
-    }, 1000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [navigate]);
-
-  return (
-    <div className="loading__container" id="loading__container">
-      <h1 className="loading__title">WaveCord</h1>
-      <h2>{Messages[Math.floor(Math.random() * Messages.length)]}</h2>
-    </div>
-  );
-}
diff --git a/src/renderer/components/Serverbar/Serverbar.css b/src/renderer/components/Serverbar/Serverbar.css
deleted file mode 100644
index 6fee6bd..0000000
--- a/src/renderer/components/Serverbar/Serverbar.css
+++ /dev/null
@@ -1,62 +0,0 @@
-:root {
-  --serverbar--server-size: 45px;
-}
-
-.serverbar__container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: var(--serverbar-width);
-  height: 100%;
-  background: var(--background);
-}
-
-.serverbar__list {
-  display: flex;
-  flex-direction: column;
-  padding-top: 20px;
-  gap: 12px;
-  height: calc(100% - var(--titlebar-height) - 10px);
-  padding-bottom: 20px;
-  overflow-y: auto;
-  align-items: center;
-  border-right: var(--border) var(--border-size) solid;
-}
-
-.serverbar__server {
-  position: relative;
-  width: var(--serverbar--server-size);
-  height: var(--serverbar--server-size);
-  flex-shrink: 0;
-  text-decoration: none;
-  user-select: none;
-}
-
-.serverbar__server_selector {
-  position: absolute;
-  top: 25%;
-  height: 50%;
-  left: -10px;
-  width: 5px;
-  background: #c9c7c7;
-  border-radius: 10px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.08s ease;
-}
-
-.serverbar__server_icon {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff1c;
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.serverbar__server_char {
-  color: var(--text);
-  font-size: 36px;
-}
diff --git a/src/renderer/components/Serverbar/index.tsx b/src/renderer/components/Serverbar/index.tsx
deleted file mode 100644
index a057b15..0000000
--- a/src/renderer/components/Serverbar/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useEffect, useState } from 'react';
-import './Serverbar.css';
-import { Link, useLocation } from 'react-router-dom';
-import RendererGuild from '../../../discord/structures/guild/RendererGuild';
-import { IGuildData } from '../../../discord/structures/guild/BaseGuild';
-
-export default function Serverbar() {
-  // States
-  const [guilds, setGuilds] = useState<RendererGuild[]>([]);
-
-  const location = useLocation();
-
-  useEffect(() => {
-    const interval = setInterval(async () => {
-      const ready = await window.electron.ipcRenderer
-        .invoke('discord:ready')
-        .catch((err) => console.error(err));
-
-      if (!ready) return;
-
-      const data: IGuildData[] = await window.electron.ipcRenderer
-        .invoke('discord:guilds')
-        .catch((err) => console.error(err));
-
-      console.info(
-        'Received guilds for server list:',
-        data.map((v) => `${v.id}`).join(','),
-      );
-      setGuilds(data.map((v) => new RendererGuild(v)));
-      clearInterval(interval);
-    }, 1000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  return (
-    <div className="serverbar__container hidden_scrollbar">
-      <div className="serverbar__list hidden_scrollbar">
-        <Link className="serverbar__server" to="/" key="Serverbar:Home}">
-          <div className="serverbar__server_icon">
-            <p className="serverbar__server_char">WC</p>
-          </div>
-        </Link>
-        {guilds.map((guild) => {
-          const selected = location.pathname.startsWith(`/guild/${guild.id}`);
-
-          return (
-            <Link
-              className="serverbar__server"
-              to={`/guild/${guild.id}`}
-              key={`Serverbar:${guild.id}`}
-            >
-              <div
-                className="serverbar__server_selector"
-                style={{
-                  opacity: selected ? '1.0' : '0.0',
-                }}
-              />
-              {guild.icon ? (
-                <img
-                  className="serverbar__server_icon"
-                  src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`}
-                  alt={`Guild Icon ${guild.id}`}
-                />
-              ) : (
-                <div className="serverbar__server_icon">
-                  <p className="serverbar__server_char">
-                    {guild.name.slice(0, 1)}
-                  </p>
-                </div>
-              )}
-            </Link>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
diff --git a/src/renderer/components/Titlebar/Titlebar.css b/src/renderer/components/Titlebar/Titlebar.css
deleted file mode 100644
index b858d33..0000000
--- a/src/renderer/components/Titlebar/Titlebar.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.titlebar__bar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: calc(100% - 20px - var(--serverbar-width));
-  height: var(--titlebar-height);
-  -webkit-app-region: drag;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  gap: 12px;
-  padding: 10px;
-}
-
-.titlebar__button {
-  -webkit-app-region: no-drag;
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  padding: 7px;
-  background: #ffffff0d;
-  border-radius: 50%;
-  transition: background 0.11s ease;
-}
-
-.titlebar__button_icon {
-  width: 100%;
-  height: 100%;
-  filter: invert(78%) sepia(1%) saturate(0%) hue-rotate(288deg) brightness(95%)
-    contrast(91%);
-  transition: filter 0.11s ease;
-}
-
-.titlebar__button:hover {
-  background: #222;
-}
-
-.titlebar__button:hover .titlebar__button_icon {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg)
-    brightness(104%) contrast(104%);
-}
diff --git a/src/renderer/components/Topbar/Topbar.css b/src/renderer/components/Topbar/Topbar.css
deleted file mode 100644
index bd2e5e4..0000000
--- a/src/renderer/components/Topbar/Topbar.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.topbar__container {
-  position: fixed;
-  top: 0;
-  width: calc(100% - var(--serverbar-width));
-  height: var(--topbar-height);
-  background: var(--background);
-  border-bottom: var(--border) var(--border-size) solid;
-}
diff --git a/src/renderer/components/Topbar/index.tsx b/src/renderer/components/Topbar/index.tsx
deleted file mode 100644
index 56db955..0000000
--- a/src/renderer/components/Topbar/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import './Topbar.css';
-
-export default function Topbar() {
-  return <div className="topbar__container" />;
-}
diff --git a/src/renderer/components/UserPanel/UserPanel.css b/src/renderer/components/UserPanel/UserPanel.css
deleted file mode 100644
index 080bb2d..0000000
--- a/src/renderer/components/UserPanel/UserPanel.css
+++ /dev/null
@@ -1,29 +0,0 @@
-:root {
-  --userpanel--padding: 10px;
-}
-
-.userpanel__container {
-  width: calc(100% - var(--border-size) - var(--userpanel--padding) * 2);
-  height: calc(80px - var(--userpanel--padding) * 2);
-  background: var(--background);
-  border-top: var(--border) var(--border-size) solid;
-  border-right: var(--border) var(--border-size) solid;
-  flex-shrink: 0;
-  padding: var(--userpanel--padding);
-}
-
-.userpanel__user_info {
-  display: flex;
-  gap: 12px;
-  width: 100%;
-  height: 100%;
-}
-
-.userpanel__user_avatar {
-  width: 58px;
-  border-radius: 50%;
-}
-
-.userpanel__user_name {
-  margin-top: 19px;
-}
diff --git a/src/renderer/components/UserPanel/index.tsx b/src/renderer/components/UserPanel/index.tsx
deleted file mode 100644
index 4998fbe..0000000
--- a/src/renderer/components/UserPanel/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react';
-import './UserPanel.css';
-import RendererUser from '../../../discord/structures/user/RendererUser';
-import { IUserData } from '../../../discord/structures/user/BaseUser';
-
-export default function UserPanel() {
-  const [user, setUser] = useState<RendererUser | null>(null);
-
-  useEffect(() => {
-    window.electron.ipcRenderer
-      .invoke('discord:user')
-      .then((data: IUserData) => {
-        setUser(new RendererUser(data));
-        return true;
-      })
-      .catch((err) => console.error(err));
-  }, []);
-
-  if (user === null)
-    return (
-      <div className="userpanel__container">
-        <div className="userpanel__user_info" />
-      </div>
-    );
-
-  return (
-    <div className="userpanel__container">
-      <div className="userpanel__user_info">
-        <img
-          className="userpanel__user_avatar"
-          src={user.getAvatarUrl()}
-          alt=""
-        />
-        <p className="userpanel__user_name">{user.globalName}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/src/renderer/components/app/AppContent.tsx b/src/renderer/components/app/AppContent.tsx
new file mode 100644
index 0000000..a357975
--- /dev/null
+++ b/src/renderer/components/app/AppContent.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+type AppContentProps = {
+  children: ReactNode;
+};
+
+export default function AppContent({ children }: AppContentProps) {
+  return <div className="AppContent">{children}</div>;
+}
diff --git a/src/renderer/components/app/SideBar.tsx b/src/renderer/components/app/SideBar.tsx
new file mode 100644
index 0000000..1f4e182
--- /dev/null
+++ b/src/renderer/components/app/SideBar.tsx
@@ -0,0 +1,11 @@
+import ServerBar from '../server/ServerBar';
+import UserBar from './UserBar';
+
+export default function SideBar() {
+  return (
+    <div className="SideBar">
+      <UserBar />
+      <ServerBar />
+    </div>
+  );
+}
diff --git a/src/renderer/components/Titlebar/index.tsx b/src/renderer/components/app/TitleBar.tsx
similarity index 60%
rename from src/renderer/components/Titlebar/index.tsx
rename to src/renderer/components/app/TitleBar.tsx
index 47d61b2..5a1c83d 100644
--- a/src/renderer/components/Titlebar/index.tsx
+++ b/src/renderer/components/app/TitleBar.tsx
@@ -1,9 +1,8 @@
-import MinimizeIcon from '../../../../assets/app/icons/titlebar/minimize.svg';
-import MaximizeIcon from '../../../../assets/app/icons/titlebar/maximize.svg';
-import CloseIcon from '../../../../assets/app/icons/titlebar/x.svg';
-import './Titlebar.css';
+import MinimizeIcon from '@/assets/app/icons/titlebar/minimize.svg';
+import MaximizeIcon from '@/assets/app/icons/titlebar/maximize.svg';
+import CloseIcon from '@/assets/app/icons/titlebar/x.svg';
 
-export default function Titlebar() {
+export default function TitleBar() {
   const handleMinimize = () => {
     window.electron.ipcRenderer.sendMessage('window:minimize');
   };
@@ -17,40 +16,41 @@ export default function Titlebar() {
   };
 
   return (
-    <div className="titlebar__bar">
+    <div className="TitleBar">
       <div
-        className="titlebar__button"
+        className="TitleBar--button"
         onClick={handleClose}
         role="presentation"
       >
         <img
-          className="titlebar__button_icon"
+          className="TitleBar--button--icon"
           src={CloseIcon}
           alt="Close Button"
         />
       </div>
       <div
-        className="titlebar__button"
+        className="TitleBar--button"
         onClick={handleMaximize}
         role="presentation"
       >
         <img
-          className="titlebar__button_icon"
+          className="TitleBar--button--icon"
           src={MaximizeIcon}
           alt="Maximize Button"
         />
       </div>
       <div
-        className="titlebar__button"
+        className="TitleBar--button"
         onClick={handleMinimize}
         role="presentation"
       >
         <img
-          className="titlebar__button_icon"
+          className="TitleBar--button--icon"
           src={MinimizeIcon}
           alt="Minimize Button"
         />
       </div>
+      <p className="TitleBar--title">WaveCord</p>
     </div>
   );
 }
diff --git a/src/renderer/components/app/UserBar.tsx b/src/renderer/components/app/UserBar.tsx
new file mode 100644
index 0000000..71e6b08
--- /dev/null
+++ b/src/renderer/components/app/UserBar.tsx
@@ -0,0 +1,13 @@
+import DiscordIcon from '@/assets/app/icons/discord.svg';
+import { Link } from 'react-router-dom';
+
+export default function UserBar() {
+  return (
+    <div className="UserBar">
+      <Link to="/" className="Server" style={{ borderRadius: '50%' }}>
+        <img className="UserBar--discord" src={DiscordIcon} alt="" />
+      </Link>
+      <div className="SideBar--separator" />
+    </div>
+  );
+}
diff --git a/src/renderer/components/channel/ChannelButton.tsx b/src/renderer/components/channel/ChannelButton.tsx
new file mode 100644
index 0000000..a8adb13
--- /dev/null
+++ b/src/renderer/components/channel/ChannelButton.tsx
@@ -0,0 +1,32 @@
+import { ChannelType } from '@/discord/structures/channel/BaseChannel';
+import RendererChannel from '@/discord/structures/channel/RendererChannel';
+import { getChannelIcon } from '@/utils/channelUtils';
+
+type ChannelButtonProps = {
+  channel: RendererChannel;
+  onClick: (channel: RendererChannel) => void;
+};
+
+export default function ChannelButton({
+  channel,
+  onClick,
+}: ChannelButtonProps) {
+  return (
+    <div
+      className={
+        channel.type !== ChannelType.GuildCategory
+          ? `ChannelButton--normal`
+          : 'ChannelButton--category'
+      }
+      onClick={() => onClick(channel)}
+      role="presentation"
+    >
+      <img
+        className="ChannelButton--icon"
+        src={getChannelIcon(channel)}
+        alt="Channel Icon"
+      />
+      <p className="ChannelButton--name">{channel.name}</p>
+    </div>
+  );
+}
diff --git a/src/renderer/components/channel/ChannelList.tsx b/src/renderer/components/channel/ChannelList.tsx
new file mode 100644
index 0000000..b7013a6
--- /dev/null
+++ b/src/renderer/components/channel/ChannelList.tsx
@@ -0,0 +1,36 @@
+import RendererChannel from '@/discord/structures/channel/RendererChannel';
+import { sortChannels } from '@/utils/channelUtils';
+import { ChannelType } from '@/discord/structures/channel/BaseChannel';
+import { useNavigate } from 'react-router-dom';
+import ChannelButton from './ChannelButton';
+
+type ChannelListProps = {
+  guildId: string;
+  channels: RendererChannel[];
+};
+
+export default function ChannelList({ guildId, channels }: ChannelListProps) {
+  const navigate = useNavigate();
+  const sorted = sortChannels(channels);
+
+  const onChannelClick = (channel: RendererChannel) => {
+    // Text Channels are currently only supported
+    if (channel.type !== ChannelType.GuildText) return;
+
+    navigate(`/guild/${guildId}/channel/${channel.id}`);
+  };
+
+  return (
+    <div className="ChannelList hidden-scrollbar">
+      {sorted.map((channel) => {
+        return (
+          <ChannelButton
+            key={`Channel:${channel.id}`}
+            channel={channel}
+            onClick={onChannelClick}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/renderer/components/channel/Message.tsx b/src/renderer/components/channel/Message.tsx
new file mode 100644
index 0000000..b8b09a6
--- /dev/null
+++ b/src/renderer/components/channel/Message.tsx
@@ -0,0 +1,52 @@
+import { Message as MessageData } from '@/discord/structures/Message';
+import RendererUser from '@/discord/structures/user/RendererUser';
+import useGif from '@/hooks/useGif';
+import MessageAttachment from './MessageAttachment';
+
+type MessageProps = {
+  message: MessageData;
+};
+
+export default function Message({ message }: MessageProps) {
+  const gif = useGif(message.content);
+
+  const author = new RendererUser(message.author);
+  const authorDecorationUrl = author.getAvatarDecorationUrl();
+
+  return (
+    <div className="Message">
+      <div className="Message--author-container">
+        <img
+          className="Message--author-img"
+          src={author.getAvatarUrl()}
+          alt="Author Avatar"
+        />
+        {authorDecorationUrl !== null && (
+          <img
+            className="Message--author-decoration-img"
+            src={authorDecorationUrl}
+            alt="Author Avatar Decoration"
+          />
+        )}
+      </div>
+      <div className="Message--content-container">
+        <p>{author.globalName}</p>
+
+        {gif !== null ? (
+          <img
+            src={gif.media_formats.find((v) => v.type === 'gif')?.url}
+            alt="Gif"
+          />
+        ) : (
+          <p className="Message--content">{message.content}</p>
+        )}
+
+        {message.attachments.map((attachment) => {
+          return (
+            <MessageAttachment key={attachment.id} attachment={attachment} />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/components/channel/MessageAttachment.tsx b/src/renderer/components/channel/MessageAttachment.tsx
new file mode 100644
index 0000000..a0c0148
--- /dev/null
+++ b/src/renderer/components/channel/MessageAttachment.tsx
@@ -0,0 +1,26 @@
+import { Attachment } from '@/discord/structures/Attachment';
+
+type MessageAttachmentProps = {
+  attachment: Attachment;
+};
+
+function ImageAttachment({ attachment }: MessageAttachmentProps) {
+  return (
+    <div className="MessageAttachment">
+      <img
+        className="MessageAttachment--image"
+        src={attachment.url}
+        alt={`Attachment:${attachment.filename}`}
+      />
+    </div>
+  );
+}
+
+export default function MessageAttachment({
+  attachment,
+}: MessageAttachmentProps) {
+  if (attachment.content_type.startsWith('image'))
+    return <ImageAttachment attachment={attachment} />;
+
+  return null;
+}
diff --git a/src/renderer/components/page/PageLayout.tsx b/src/renderer/components/page/PageLayout.tsx
new file mode 100644
index 0000000..585ee38
--- /dev/null
+++ b/src/renderer/components/page/PageLayout.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+type PageLayoutProps = {
+  children: ReactNode;
+};
+
+export default function PageLayout({ children }: PageLayoutProps) {
+  return <div className="PageLayout">{children}</div>;
+}
diff --git a/src/renderer/components/page/PageSideBar.tsx b/src/renderer/components/page/PageSideBar.tsx
new file mode 100644
index 0000000..4091844
--- /dev/null
+++ b/src/renderer/components/page/PageSideBar.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+type PageSideBarProps = {
+  // eslint-disable-next-line react/require-default-props
+  children?: ReactNode | ReactNode[] | undefined;
+};
+
+export default function PageSideBar({ children }: PageSideBarProps) {
+  return <div className="PageSideBar hidden-scrollbar">{children}</div>;
+}
diff --git a/src/renderer/components/server/Server.tsx b/src/renderer/components/server/Server.tsx
new file mode 100644
index 0000000..c359507
--- /dev/null
+++ b/src/renderer/components/server/Server.tsx
@@ -0,0 +1,18 @@
+import RendererGuild from '@/discord/structures/guild/RendererGuild';
+import { Link } from 'react-router-dom';
+
+type ServerProps = {
+  server: RendererGuild;
+};
+
+export default function Server({ server }: ServerProps) {
+  return (
+    <Link
+      to={`/guild/${server.id}`}
+      className="Server"
+      key={`Server:${server.id}`}
+    >
+      <img className="Server--icon" src={server.getIconUrl()} alt="" />
+    </Link>
+  );
+}
diff --git a/src/renderer/components/server/ServerBar.tsx b/src/renderer/components/server/ServerBar.tsx
new file mode 100644
index 0000000..0e40b91
--- /dev/null
+++ b/src/renderer/components/server/ServerBar.tsx
@@ -0,0 +1,17 @@
+// Hooks
+import useGuilds from '@/hooks/useGuilds';
+
+// Components
+import Server from './Server';
+
+export default function ServerBar() {
+  const guilds = useGuilds();
+
+  return (
+    <div className="ServerBar hidden-scrollbar">
+      {guilds.map((guild) => {
+        return <Server server={guild} />;
+      })}
+    </div>
+  );
+}
diff --git a/src/renderer/components/server/ServerInfo.tsx b/src/renderer/components/server/ServerInfo.tsx
new file mode 100644
index 0000000..6b994c3
--- /dev/null
+++ b/src/renderer/components/server/ServerInfo.tsx
@@ -0,0 +1,18 @@
+import RendererGuild from '@/discord/structures/guild/RendererGuild';
+
+type ServerInfoProps = {
+  guild: RendererGuild;
+};
+
+export default function ServerInfo({ guild }: ServerInfoProps) {
+  return (
+    <div className="ServerInfo">
+      <img
+        className="ServerInfo--banner-img"
+        src={guild.getBannerUrl()}
+        alt={`${guild.name}'s Banner`}
+      />
+      <p className="ServerInfo--guild-name">{guild.name}</p>
+    </div>
+  );
+}
diff --git a/src/renderer/components/user/UserPanel.tsx b/src/renderer/components/user/UserPanel.tsx
new file mode 100644
index 0000000..c1af198
--- /dev/null
+++ b/src/renderer/components/user/UserPanel.tsx
@@ -0,0 +1,28 @@
+import useUser from '@/hooks/useUser';
+
+export default function UserPanel() {
+  const user = useUser(undefined);
+
+  console.log('User:', user);
+
+  return (
+    <div className="UserPanel">
+      <div className="UserPanel--user-container">
+        <div className="UserPanel--user-avatar-container">
+          <img
+            className="UserPanel--user-avatar"
+            src={user?.getAvatarUrl(true)}
+            alt=""
+          />
+          <div className="UserPanel--status-icon-wrapper">
+            <div className="UserPanel--status-icon UserPanel--status-icon-online " />
+          </div>
+        </div>
+        <div className="UserPanel--user-info-container">
+          <p className="UserPanel--user-name">{user?.globalName}</p>
+          <p className="UserPanel--user-status">online</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/hooks/useChannel.ts b/src/renderer/hooks/useChannel.ts
new file mode 100644
index 0000000..6537a75
--- /dev/null
+++ b/src/renderer/hooks/useChannel.ts
@@ -0,0 +1,19 @@
+import { IChannelData } from '@/discord/structures/channel/BaseChannel';
+import RendererChannel from '@/discord/structures/channel/RendererChannel';
+import { useEffect, useState } from 'react';
+
+export default function useChannel(channelId: string): RendererChannel | null {
+  const [channel, setChannel] = useState<RendererChannel | null>(null);
+
+  useEffect(() => {
+    window.electron.ipcRenderer
+      .invoke('discord:load-channel', channelId)
+      .then((data: IChannelData | null) => {
+        if (data) setChannel(new RendererChannel(data));
+        return true;
+      })
+      .catch((err) => console.error(err));
+  }, [channelId]);
+
+  return channel;
+}
diff --git a/src/renderer/hooks/useChannels.ts b/src/renderer/hooks/useChannels.ts
new file mode 100644
index 0000000..9bad562
--- /dev/null
+++ b/src/renderer/hooks/useChannels.ts
@@ -0,0 +1,22 @@
+import { IChannelData } from '@/discord/structures/channel/BaseChannel';
+import RendererChannel from '@/discord/structures/channel/RendererChannel';
+import { useEffect, useState } from 'react';
+
+/**
+ * Fetches all channels from a guild
+ */
+export default function useChannels(guildId: string) {
+  const [channels, setChannels] = useState<RendererChannel[]>([]);
+
+  useEffect(() => {
+    window.electron.ipcRenderer
+      .invoke('discord:channels', guildId)
+      .then((data: IChannelData[]) => {
+        setChannels(data.map((v) => new RendererChannel(v)));
+        return true;
+      })
+      .catch((err) => console.error(err));
+  });
+
+  return channels;
+}
diff --git a/src/renderer/hooks/useGif.ts b/src/renderer/hooks/useGif.ts
new file mode 100644
index 0000000..12fb0c9
--- /dev/null
+++ b/src/renderer/hooks/useGif.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { TenorFetchResult, TenorGif } from '../../main/utils/tenor';
+
+const allowedHosts = ['tenor.com', 'www.tenor.com'];
+
+export default function useGif(url: string): TenorGif | null {
+  const [gif, setGif] = useState<TenorGif | null>(null);
+
+  useEffect(() => {
+    const uri = new URL(url);
+
+    if (allowedHosts.includes(uri.host.toLowerCase())) {
+      setGif(null);
+      return;
+    }
+
+    window.electron.ipcRenderer
+      .invoke('tenor:fetch-gif', url)
+      .then((result: TenorFetchResult) => {
+        setGif(result.gif);
+        return true;
+      })
+      .catch((err) => console.error(err));
+  }, [url]);
+
+  return gif;
+}
diff --git a/src/renderer/hooks/useGuild.ts b/src/renderer/hooks/useGuild.ts
new file mode 100644
index 0000000..b9bfbf4
--- /dev/null
+++ b/src/renderer/hooks/useGuild.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import RendererGuild from '../../discord/structures/guild/RendererGuild';
+import { IGuildData } from '../../discord/structures/guild/BaseGuild';
+
+/**
+ * Fetches a guild
+ */
+export default function useGuild(guildId: string) {
+  const [guild, setGuild] = useState<RendererGuild | null>(null);
+
+  useEffect(() => {
+    window.electron.ipcRenderer
+      .invoke('discord:fetch-guild', guildId)
+      .then((data: IGuildData) => {
+        setGuild(new RendererGuild(data));
+        return true;
+      })
+      .catch((err) => console.error(err));
+  }, [guildId]);
+
+  return guild;
+}
diff --git a/src/renderer/hooks/useGuilds.ts b/src/renderer/hooks/useGuilds.ts
new file mode 100644
index 0000000..10c5a86
--- /dev/null
+++ b/src/renderer/hooks/useGuilds.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import RendererGuild from '../../discord/structures/guild/RendererGuild';
+import { IGuildData } from '../../discord/structures/guild/BaseGuild';
+
+/**
+ * Fetches all guilds the user is in
+ */
+export default function useGuilds() {
+  const [guilds, setGuilds] = useState<RendererGuild[]>([]);
+
+  useEffect(() => {
+    const fetchGuilds = () => {
+      window.electron.ipcRenderer
+        .invoke('discord:guilds')
+        .then((data: IGuildData[]) => {
+          setGuilds(data.map((v) => new RendererGuild(v)));
+          return true;
+        })
+        .catch((err) => console.error(err));
+    };
+
+    const interval = setInterval(fetchGuilds, 2000);
+
+    fetchGuilds();
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return guilds;
+}
diff --git a/src/renderer/hooks/useInterval.ts b/src/renderer/hooks/useInterval.ts
new file mode 100644
index 0000000..27b7dad
--- /dev/null
+++ b/src/renderer/hooks/useInterval.ts
@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+export default function useInterval(callback: () => void, delay: number) {
+  const savedCallback = useRef<Function>();
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+
+  useEffect(() => {
+    function tick() {
+      if (savedCallback.current !== undefined) savedCallback.current();
+    }
+
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+    return () => {};
+  }, [delay]);
+}
diff --git a/src/renderer/hooks/useMessages.ts b/src/renderer/hooks/useMessages.ts
new file mode 100644
index 0000000..f12ec44
--- /dev/null
+++ b/src/renderer/hooks/useMessages.ts
@@ -0,0 +1,30 @@
+import RendererChannel from '@/discord/structures/channel/RendererChannel';
+import { Message } from '@/discord/structures/Message';
+import { useEffect, useState } from 'react';
+
+export default function useMessages(channel: RendererChannel | null) {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    window.electron.ipcRenderer.on(
+      'discord:gateway:message-create',
+      (message: Message) => {
+        if (message.channel_id !== channel?.id) return;
+
+        setMessages((old) => [message, ...old]);
+      },
+    );
+
+    if (channel) {
+      channel
+        .fetchMessages()
+        .then((data: Message[]) => {
+          setMessages(data);
+          return true;
+        })
+        .catch((err) => console.error(err));
+    }
+  }, [channel]);
+
+  return messages;
+}
diff --git a/src/renderer/hooks/useUser.ts b/src/renderer/hooks/useUser.ts
new file mode 100644
index 0000000..a6ca39a
--- /dev/null
+++ b/src/renderer/hooks/useUser.ts
@@ -0,0 +1,29 @@
+import { IUserData } from '@/discord/structures/user/BaseUser';
+import RendererUser from '@/discord/structures/user/RendererUser';
+import { useEffect, useState } from 'react';
+
+/**
+ * Fetches a user
+ */
+export default function useUser(userId: string | undefined) {
+  const [user, setUser] = useState<RendererUser | null>(null);
+
+  useEffect(() => {
+    const fetchUser = () => {
+      window.electron.ipcRenderer
+        .invoke('discord:user', userId)
+        .then((data: IUserData | null) => {
+          if (data) setUser(new RendererUser(data));
+          return true;
+        })
+        .catch((err) => console.error(err));
+    };
+
+    fetchUser();
+
+    const interval = setInterval(() => fetchUser, 1000);
+    return () => clearInterval(interval);
+  }, [userId]);
+
+  return user;
+}
diff --git a/src/renderer/index.ejs b/src/renderer/index.ejs
index 6d84073..ca8990b 100644
--- a/src/renderer/index.ejs
+++ b/src/renderer/index.ejs
@@ -7,19 +7,19 @@
       content="default-src 'self';
           script-src 'self';
           font-src 'self' https://fonts.gstatic.com;
-          img-src 'self' https://cdn.discordapp.com https://avatars.githubusercontent.com;
+          img-src 'self' https://cdn.discordapp.com https://*.tenor.com;
           style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;"
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"
       rel="stylesheet"
     />
 
     <title>WaveCord</title>
   </head>
   <body>
-    <div id="root" style="width: 100vw; height: 100vh; margin: 0"></div>
+    <div class="App" id="root"></div>
   </body>
 </html>
diff --git a/src/renderer/pages/Guild/Channel/Channel.css b/src/renderer/pages/Guild/Channel/Channel.css
deleted file mode 100644
index bad29f6..0000000
--- a/src/renderer/pages/Guild/Channel/Channel.css
+++ /dev/null
@@ -1,106 +0,0 @@
-:root {
-  --channel-page-messages-padding: 20px;
-}
-
-.channel_page__container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.channel_page__chat {
-  width: 100%;
-  height: calc(100% - var(--topbar-height));
-  overflow: hidden;
-}
-
-.channel_page__messages {
-  display: flex;
-  flex-direction: column-reverse;
-  overflow-y: auto;
-  width: 100%;
-  height: calc(100% - 100px);
-  gap: 8px;
-  padding: var(--channel-page-messages-padding);
-}
-
-.channel_page__header {
-  top: calc(var(--topbar-height) * -1);
-  position: absolute;
-  width: calc(100% - 0px);
-  height: calc(var(--topbar-height) - 40px);
-  padding: 20px;
-  flex-shrink: 0;
-}
-
-.channel_page__message {
-  flex-shrink: 0;
-  display: flex;
-  gap: 7px;
-  width: calc(100% - var(--channel-page-messages-padding) * 2);
-  overflow: hidden;
-  height: auto;
-  min-height: 64px;
-}
-
-.channel_page__message_author {
-  position: relative;
-  display: flex;
-  height: 54px;
-}
-
-.channel_page__message_avatar {
-  border-radius: 50%;
-  aspect-ratio: 1/1;
-  height: 100%;
-  filter: drop-shadow(0px 3px 1px #00000077);
-}
-
-.channel_page__user_decoration {
-  aspect-ratio: 1/1;
-  height: 100%;
-  position: absolute;
-}
-
-.channel_page__message_wrapper {
-  width: 100%;
-  height: 100%;
-}
-
-.channel_page__message_author_name {
-  font-weight: 700;
-}
-
-.channel_page__message_content {
-  font-size: large;
-  width: 100%;
-  height: 100%;
-  white-space: pre-wrap;
-}
-
-.channel_page__message_author_info {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-top: 6px;
-  margin-bottom: 6px;
-}
-
-.channel_page__message_timestamp {
-  color: gray;
-}
-
-.channel_page__message_input {
-  width: calc(100% - 40px - 16px);
-  height: 30px;
-  padding: 8px;
-  margin: 7px 20px;
-  font-size: medium;
-  filter: drop-shadow(0px 3px 1px #00000020);
-  background: var(--background);
-  color: white;
-  border: none;
-  border: var(--border) var(--border-size) solid;
-}
diff --git a/src/renderer/pages/Guild/Channel/index.tsx b/src/renderer/pages/Guild/Channel/index.tsx
deleted file mode 100644
index 5727ea7..0000000
--- a/src/renderer/pages/Guild/Channel/index.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import './Channel.css';
-import RendererChannel from '../../../../discord/structures/channel/RendererChannel';
-import { IChannelData } from '../../../../discord/structures/channel/BaseChannel';
-import { Message } from '../../../../discord/structures/Message';
-
-export default function ChannelPage() {
-  const params = useParams();
-  const channelId = params.channelId ?? '';
-  const [channel, setChannel] = useState<RendererChannel | null>(null);
-  const [messages, setMessages] = useState<Message[]>([]);
-
-  // Live messages
-  useEffect(() => {
-    window.electron.ipcRenderer.on(
-      'discord:gateway:message-create',
-      (msg: Message) => {
-        if (msg.channel_id !== channelId) return;
-
-        setMessages([msg, ...messages]);
-      },
-    );
-  }, [channel, channelId, messages]);
-
-  // Channel loading / Page loading
-  useEffect(() => {
-    const loadChannel = () => {
-      window.electron.ipcRenderer
-        .invoke('discord:load-channel', channelId)
-        .then(async (data: IChannelData) => {
-          if (data.id !== channelId) return false;
-
-          const chn = new RendererChannel(data);
-          const msgs = await chn.fetchMessages();
-          setChannel(chn);
-          setMessages(msgs);
-          return true;
-        })
-        .catch((err) => console.error(err));
-    };
-
-    if (channel !== null) {
-      if (channel.id !== channelId) {
-        loadChannel();
-      }
-      return;
-    }
-
-    const messageList = document.getElementById('channel_page_message_list');
-    if (messageList) {
-      messageList.scrollTop = messageList.scrollHeight;
-    }
-
-    loadChannel();
-  }, [channel, channelId]);
-
-  if (channelId.length === 0 || channel === null) return null;
-
-  const handleMessageInput = (e: any) => {
-    if (e.key !== 'Enter') return;
-    const { value } = e.target;
-
-    if (value === '') return;
-
-    channel?.createMessage({
-      content: value,
-    });
-  };
-
-  return (
-    <div className="channel_page__container">
-      <div className="channel_page__header">
-        <h1># {channel.name}</h1>
-      </div>
-      <div className="channel_page__chat">
-        <div
-          className="channel_page__messages hidden_scrollbar"
-          id="channel_page_message_list"
-        >
-          {messages.map((message) => {
-            const date = new Date(Date.parse(message.timestamp));
-
-            return (
-              <div
-                className="channel_page__message"
-                key={`Message:${message.id}`}
-              >
-                <div className="channel_page__message_author">
-                  <img
-                    className="channel_page__message_avatar"
-                    src={`https://cdn.discordapp.com/avatars/${message.author.id}/${message.author.avatar}.png`}
-                    alt="Avatar Icon"
-                  />
-                  {message.author.avatar_decoration_data && (
-                    <img
-                      className="channel_page__user_decoration"
-                      src={`https://cdn.discordapp.com/avatar-decoration-presets/${
-                        message.author.avatar_decoration_data.asset
-                      }.png`}
-                      alt="Avatar Decoration"
-                    />
-                  )}
-                </div>
-                <div className="channel_page__message_wrapper">
-                  <div className="channel_page__message_author_info">
-                    <p className="channel_page__message_author_name">
-                      {message.author.global_name}
-                    </p>
-                    <p className="channel_page__message_timestamp">
-                      {date.toLocaleDateString('de-DE', {
-                        hour: '2-digit',
-                        minute: '2-digit',
-                        second: '2-digit',
-                      })}
-                    </p>
-                  </div>
-                  <p className="channel_page__message_content">
-                    {message.content}
-                  </p>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-        <input
-          className="channel_page__message_input"
-          type="text"
-          onKeyDown={handleMessageInput}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/src/renderer/pages/Guild/Guild.css b/src/renderer/pages/Guild/Guild.css
deleted file mode 100644
index 6beda4d..0000000
--- a/src/renderer/pages/Guild/Guild.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.guild_page {
-  width: 100%;
-  height: 100%;
-}
-
-.guild_page__container {
-  margin-top: var(--topbar-height);
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.guild_page__channel_list {
-  display: flex;
-  flex-direction: column;
-  width: var(--sidebar-width);
-  overflow: hidden;
-  height: calc(100% - var(--topbar-height) - 80px);
-  background: var(--background);
-  overflow-y: auto;
-  border-right: var(--border) var(--border-size) solid;
-}
-
-.guild_page__content {
-  background: var(--background2);
-  height: 100%;
-}
-
-.guild_page__member_list {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  width: 270px;
-  height: 100%;
-  background: var(--background);
-  overflow-y: auto;
-  border-left: var(--border) var(--border-size) solid;
-}
-
-.guild_page__channel {
-  display: flex;
-  width: calc(100% - 18px - 18px);
-  height: 28px;
-  padding: 12px 18px;
-  gap: 18px;
-  user-select: none;
-  text-decoration: none;
-  align-items: center;
-  color: var(--unselected-text);
-  flex-shrink: 0;
-}
-
-.guild_page__current_channel {
-  background: color-mix(in srgb, var(--background), #ffffff50) !important;
-  color: var(--text);
-}
-
-.guild_page__channel:hover {
-  background: color-mix(in srgb, var(--background), #ffffff1d);
-}
-
-.guild_page__channel_icon {
-  filter: invert(57%) sepia(0%) saturate(256%) hue-rotate(170deg)
-    brightness(101%) contrast(84%);
-}
-
-.guild_page__channel_name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-wrap: nowrap;
-}
-
-.guild_page__guild_info {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 300px;
-  height: var(--topbar-height);
-  border-right: var(--border) var(--border-size) solid;
-}
-
-.guild_page__guild_name {
-  position: absolute;
-  top: 15px;
-  left: 20px;
-  font-size: large;
-  filter: drop-shadow(0px 3px 1px #000000bd);
-}
-
-.guild_page__banner {
-  width: 100%;
-  height: 100%;
-}
-
-.guild_page__banner_img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.guild_page__category {
-  margin-left: -6px;
-}
diff --git a/src/renderer/pages/Guild/index.tsx b/src/renderer/pages/Guild/index.tsx
deleted file mode 100644
index 362caa4..0000000
--- a/src/renderer/pages/Guild/index.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import {
-  Link,
-  Outlet,
-  useLocation,
-  useNavigate,
-  useParams,
-} from 'react-router-dom';
-import { ReactNode, useEffect, useState } from 'react';
-
-// Channel Icons
-import TextChannelIcon from '../../../../assets/app/icons/channel/text-icon.svg';
-import VoiceChannelIcon from '../../../../assets/app/icons/channel/volume-2.svg';
-import AnnouncementChannelIcon from '../../../../assets/app/icons/channel/tv.svg';
-import StageChannelIcon from '../../../../assets/app/icons/channel/radio.svg';
-import CategoryIcon from '../../../../assets/app/icons/channel/arrow-down.svg';
-
-import './Guild.css';
-import Topbar from '../../components/Topbar';
-import { sortChannels } from '../../utils/channelUtils';
-import UserPanel from '../../components/UserPanel';
-import RendererChannel from '../../../discord/structures/channel/RendererChannel';
-import {
-  ChannelType,
-  IChannelData,
-} from '../../../discord/structures/channel/BaseChannel';
-import RendererGuild from '../../../discord/structures/guild/RendererGuild';
-import { IGuildData } from '../../../discord/structures/guild/BaseGuild';
-
-function ChannelWrapper({
-  children,
-  isCurrent,
-  channel,
-}: {
-  children: ReactNode[];
-  isCurrent: boolean;
-  channel: RendererChannel;
-}) {
-  const classes = `guild_page__channel ${isCurrent ? 'guild_page__current_channel' : ''}`;
-
-  if (
-    channel.type !== ChannelType.GuildVoice &&
-    channel.type !== ChannelType.GuildCategory
-  ) {
-    return (
-      <Link
-        to={`/guild/${channel.guildId}/channel/${channel.id}`}
-        key={`GuildPageChannel:${channel.id}`}
-        className={classes}
-      >
-        {children}
-      </Link>
-    );
-  }
-
-  return (
-    <div key={`GuildPageChannel:${channel.id}`} className={classes}>
-      {children}
-    </div>
-  );
-}
-
-export default function GuildPage() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const params = useParams();
-  const guildId = params.id ?? '';
-
-  // States
-  const [guild, setGuild] = useState<RendererGuild | null | undefined>(
-    undefined,
-  );
-  const [channels, setChannels] = useState<RendererChannel[]>([]);
-  const memberListEnabled = false;
-
-  useEffect(() => {
-    if (guild === undefined || (guild && guild.id !== guildId)) {
-      // Load guild if guild id is not invalid
-      if (guildId.length !== 0) {
-        window.electron.ipcRenderer
-          .invoke('discord:fetch-guild', guildId)
-          .then((data: IGuildData) => {
-            setGuild(new RendererGuild(data));
-            return true;
-          })
-          .catch((err) => console.error(err));
-
-        window.electron.ipcRenderer
-          .invoke('discord:channels', guildId)
-          .then((data: IChannelData[]) => {
-            setChannels(data.map((v) => new RendererChannel(v)));
-            return true;
-          })
-          .catch((err) => console.error(err));
-      }
-    }
-
-    return () => {
-      if (guild && guildId !== guild.id) setGuild(undefined);
-    };
-  }, [guild, guildId, navigate]);
-
-  if (guildId.length === 0) return null;
-
-  // Either the guild does not exist or we are not on this guild
-  if (guild === null)
-    return <p>Server does not exist or you are not in this server!</p>;
-
-  const sorted = sortChannels(channels);
-
-  return (
-    <div className="guild_page">
-      <Topbar />
-      <div className="guild_page__container">
-        <div className="guild_page__guild_info">
-          <p className="guild_page__guild_name">{guild?.name}</p>
-          {guild?.banner !== null && (
-            <div className="guild_page__banner">
-              <img
-                className="guild_page__banner_img"
-                src={`https://cdn.discordapp.com/banners/${guild?.id}/${guild?.banner}.webp?size=300`}
-                alt="Guild Banner"
-              />
-            </div>
-          )}
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            width: 'var(--guild-page--sidebar-width)',
-            overflow: 'hidden',
-          }}
-        >
-          <div className="guild_page__channel_list app__item_list hidden_scrollbar">
-            {sorted.map((channel) => {
-              const isCategory = channel.type === ChannelType.GuildCategory;
-              const isCurrent =
-                location.pathname ===
-                `/guild/${guild?.id}/channel/${channel.id}`;
-
-              const getIcon = () => {
-                switch (channel.type) {
-                  case ChannelType.GuildVoice:
-                    return VoiceChannelIcon;
-                  case ChannelType.GuildAnnouncement:
-                    return AnnouncementChannelIcon;
-                  case ChannelType.GuildStageVoice:
-                    return StageChannelIcon;
-                  case ChannelType.GuildCategory:
-                    return CategoryIcon;
-                  default:
-                    return TextChannelIcon;
-                }
-              };
-              return (
-                <ChannelWrapper isCurrent={isCurrent} channel={channel}>
-                  {!isCategory && (
-                    <img
-                      className="guild_page__channel_icon"
-                      src={getIcon()}
-                      alt="Text Channel Icon"
-                    />
-                  )}
-                  <p
-                    className={`guild_page__channel_name ${isCategory ? 'guild_page__category' : ''}`}
-                  >
-                    {channel.name}
-                  </p>
-                </ChannelWrapper>
-              );
-            })}
-          </div>
-          <UserPanel />
-        </div>
-        <div
-          className="guild_page__content"
-          style={{
-            width: `calc(100% - ${memberListEnabled ? 270 : 0}px - var(--sidebar-width))`,
-          }}
-        >
-          <Outlet />
-        </div>
-        {memberListEnabled && <div className="guild_page__member_list" />}
-      </div>
-    </div>
-  );
-}
diff --git a/src/renderer/pages/GuildPage/GuildChannelPage.tsx b/src/renderer/pages/GuildPage/GuildChannelPage.tsx
new file mode 100644
index 0000000..3668109
--- /dev/null
+++ b/src/renderer/pages/GuildPage/GuildChannelPage.tsx
@@ -0,0 +1,27 @@
+import Message from '@/components/channel/Message';
+import useChannel from '@/hooks/useChannel';
+import useMessages from '@/hooks/useMessages';
+import { useParams } from 'react-router-dom';
+
+export default function GuildChannelPage() {
+  const params = useParams();
+  const channelId = params.channelId ?? '';
+
+  const channel = useChannel(channelId);
+  const messages = useMessages(channel);
+
+  if (channel === null) return null;
+
+  return (
+    <div className="GuildChannelPage">
+      <div className="GuildChannelPage--header">
+        <p>{channel.name}</p>
+      </div>
+      <div className="GuildChannelPage--messages-container hidden-scrollbar">
+        {messages.map((msg) => {
+          return <Message message={msg} />;
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/pages/GuildPage/GuildPage.tsx b/src/renderer/pages/GuildPage/GuildPage.tsx
new file mode 100644
index 0000000..e0ab9f0
--- /dev/null
+++ b/src/renderer/pages/GuildPage/GuildPage.tsx
@@ -0,0 +1,32 @@
+import ChannelList from '@/components/channel/ChannelList';
+import PageLayout from '@/components/page/PageLayout';
+import PageSideBar from '@/components/page/PageSideBar';
+import ServerInfo from '@/components/server/ServerInfo';
+import useChannels from '@/hooks/useChannels';
+import useGuild from '@/hooks/useGuild';
+import { Outlet, useParams } from 'react-router-dom';
+
+export default function GuildPage() {
+  const params = useParams();
+
+  const guildId = params.guildId ?? '';
+
+  const channels = useChannels(guildId);
+  const guild = useGuild(guildId);
+
+  if (guild === null) return null;
+
+  return (
+    <PageLayout>
+      <div className="GuildPage">
+        <PageSideBar>
+          <ServerInfo guild={guild} />
+          <ChannelList guildId={guildId} channels={channels} />
+        </PageSideBar>
+        <div className="GuildPage--content">
+          <Outlet />
+        </div>
+      </div>
+    </PageLayout>
+  );
+}
diff --git a/src/renderer/pages/Home/DirectMessage/index.tsx b/src/renderer/pages/Home/DirectMessage/index.tsx
deleted file mode 100644
index abe89f7..0000000
--- a/src/renderer/pages/Home/DirectMessage/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function DirectMessagePage() {
-  return <div />;
-}
diff --git a/src/renderer/pages/Home/Home.css b/src/renderer/pages/Home/Home.css
deleted file mode 100644
index 0da96dd..0000000
--- a/src/renderer/pages/Home/Home.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.home_page {
-  width: 100%;
-  height: 100%;
-}
-
-.home_page__container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.home_page__content {
-  margin-top: var(--topbar-height);
-  background: var(--background2);
-  width: 100%;
-  height: 100%;
-}
-
-.home_page__sidebar {
-  z-index: 100;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  width: var(--sidebar-width);
-  overflow: hidden;
-  height: 100%;
-  background: var(--background);
-  overflow-y: auto;
-  border-right: var(--border) var(--border-size) solid;
-}
-
-.home_page__sidebar_list {
-  padding-top: calc(var(--titlebar-height) + 20px);
-  display: flex;
-  flex-direction: column;
-  width: var(--sidebar-width);
-  overflow: hidden;
-  height: calc(100% - 80px);
-  background: var(--background);
-  overflow-y: auto;
-  border-right: var(--border) var(--border-size) solid;
-}
-
-.home_page__relationship {
-  display: flex;
-  width: calc(100% - 18px - 18px);
-  height: 28px;
-  padding: 12px 18px;
-  gap: 18px;
-  user-select: none;
-  text-decoration: none;
-  align-items: center;
-  color: var(--unselected-text);
-  flex-shrink: 0;
-}
-
-.home_page__relationship:hover {
-  background: color-mix(in srgb, var(--background), #ffffff1d);
-}
-
-.home_page__avatar {
-  width: 48px;
-  border-radius: 50%;
-}
diff --git a/src/renderer/pages/Home/index.tsx b/src/renderer/pages/Home/index.tsx
deleted file mode 100644
index a3d122d..0000000
--- a/src/renderer/pages/Home/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Link, Outlet } from 'react-router-dom';
-import Topbar from '../../components/Topbar';
-import UserPanel from '../../components/UserPanel';
-import './Home.css';
-import { Relationship } from '../../../discord/structures/Relationship';
-import RendererUser from '../../../discord/structures/user/RendererUser';
-import { IUserData } from '../../../discord/structures/user/BaseUser';
-
-export default function HomePage() {
-  const [relationships, setRelationships] = useState<Relationship[]>([]);
-  const [users, setUsers] = useState<RendererUser[]>([]);
-
-  useEffect(() => {
-    const fetchRelationships = async () => {
-      const ready = await window.electron.ipcRenderer
-        .invoke('discord:ready')
-        .catch((err) => console.error(err));
-
-      if (!ready) return false;
-
-      const data: any = await window.electron.ipcRenderer
-        .invoke('discord:relationships')
-        .catch((err) => console.error(err));
-
-      const ships: Relationship[] = data.relationships;
-      const usrs: IUserData[] = data.users;
-
-      console.info('Received relationships:', data);
-      setRelationships(ships);
-      setUsers(usrs.map((v) => new RendererUser(v)));
-      return true;
-    };
-
-    const interval = setInterval(async () => {
-      if (await fetchRelationships()) clearInterval(interval);
-    }, 10);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  return (
-    <div className="home_page">
-      <Topbar />
-      <div className="home_page__container">
-        <div className="home_page__sidebar">
-          <div className="home_page__sidebar_list hidden_scrollbar">
-            {relationships.map((relationship) => {
-              const user = users.find((v) => v.id === relationship.user_id);
-              if (user === undefined) return null;
-
-              return (
-                <Link
-                  to={`/dm/${relationship.id}`}
-                  key={`Relationship:${relationship.id}`}
-                  className="home_page__relationship"
-                >
-                  <img
-                    className="home_page__avatar"
-                    src={user.getAvatarUrl()}
-                    alt={`UserAvatarRelationship:${user.id}`}
-                  />
-                  <p>{relationship.nickname ?? user.globalName}</p>
-                </Link>
-              );
-            })}
-          </div>
-          <UserPanel />
-        </div>
-        <div className="home_page__content">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/renderer/pages/HomePage/HomePage.tsx b/src/renderer/pages/HomePage/HomePage.tsx
new file mode 100644
index 0000000..2f91c73
--- /dev/null
+++ b/src/renderer/pages/HomePage/HomePage.tsx
@@ -0,0 +1,12 @@
+import PageLayout from '@/components/page/PageLayout';
+import PageSideBar from '@/components/page/PageSideBar';
+
+export default function HomePage() {
+  return (
+    <PageLayout>
+      <div>
+        <PageSideBar />
+      </div>
+    </PageLayout>
+  );
+}
diff --git a/src/renderer/styles/app/App.css b/src/renderer/styles/app/App.css
new file mode 100644
index 0000000..936db66
--- /dev/null
+++ b/src/renderer/styles/app/App.css
@@ -0,0 +1,54 @@
+:root {
+  --background: #141318;
+  --background-light: #1c1d21;
+  --panel-background: #262730;
+  --border-color: #1f1f23;
+
+  --app-content-padding: 14px;
+
+  color: #fff;
+  background: var(--background);
+  font-family: 'Manrope', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+p,
+a {
+  margin: 0;
+}
+
+.App {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.AppContent {
+  display: flex;
+  width: calc(100% - var(--app-content-padding) * 2);
+  height: calc(100% - var(--titlebar-height) - var(--app-content-padding) * 2);
+  margin-top: var(--titlebar-height);
+  overflow: hidden;
+  padding: var(--app-content-padding);
+}
+
+.hidden-scrollbar {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.hidden-scrollbar::-webkit-scrollbar {
+  display: none;
+  width: 0; /* Remove scrollbar space */
+  background: transparent;
+}
diff --git a/src/renderer/styles/app/SideBar.css b/src/renderer/styles/app/SideBar.css
new file mode 100644
index 0000000..cda30dd
--- /dev/null
+++ b/src/renderer/styles/app/SideBar.css
@@ -0,0 +1,15 @@
+.SideBar {
+  display: flex;
+  flex-direction: column;
+  border-right: 2px solid var(--border-color);
+  padding-bottom: calc(
+    var(--user-panel-height) + var(--user-panel-padding) * 2 + 20px
+  );
+  padding-right: var(--app-content-padding);
+}
+
+.SideBar--separator {
+  margin: 8px 0px;
+  border-top: 2px solid var(--border-color);
+  width: 70%;
+}
diff --git a/src/renderer/styles/app/TitleBar.css b/src/renderer/styles/app/TitleBar.css
new file mode 100644
index 0000000..78c2c94
--- /dev/null
+++ b/src/renderer/styles/app/TitleBar.css
@@ -0,0 +1,53 @@
+:root {
+  --titlebar-height: 30px;
+}
+
+.TitleBar {
+  top: 0;
+  position: absolute;
+  width: calc(100% - 10px);
+  height: var(--titlebar-height);
+  -webkit-app-region: drag;
+  background: var(--background-5);
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: 8px;
+  padding-right: 10px;
+}
+
+.TitleBar--button {
+  -webkit-app-region: no-drag;
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  padding: 5px;
+  border-radius: 50%;
+  transition: background 0.11s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.TitleBar--button--icon {
+  width: 100%;
+  height: 100%;
+  transition: filter 0.11s ease;
+}
+
+.TitleBar--button:hover {
+  background: #222;
+}
+
+.TitleBar--button:hover .TitleBar--button--icon {
+  filter: invert(78%) sepia(1%) saturate(0%) hue-rotate(288deg) brightness(95%)
+    contrast(91%);
+}
+
+.TitleBar--title {
+  margin-right: auto;
+  margin-top: 5px;
+  margin-left: 11px;
+  color: #777;
+  font-weight: 600;
+}
diff --git a/src/renderer/styles/app/UserBar.css b/src/renderer/styles/app/UserBar.css
new file mode 100644
index 0000000..118c4ea
--- /dev/null
+++ b/src/renderer/styles/app/UserBar.css
@@ -0,0 +1,14 @@
+.UserBar {
+  min-height: 52px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  width: 72px;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 12px;
+}
+
+.UserBar--discord {
+  width: 55%;
+}
diff --git a/src/renderer/styles/channel/ChannelButton.css b/src/renderer/styles/channel/ChannelButton.css
new file mode 100644
index 0000000..22847fc
--- /dev/null
+++ b/src/renderer/styles/channel/ChannelButton.css
@@ -0,0 +1,48 @@
+:root {
+  --channel-item-width: 95%;
+  --channel-item-height: 40px;
+  --channel-item-padding: 10px;
+}
+
+.ChannelButton--normal {
+  display: flex;
+  align-items: center;
+  width: calc(var(--channel-item-width) - var(--channel-item-padding) * 2);
+  height: calc(var(--channel-item-height) - var(--channel-item-padding) * 2);
+  padding: 10px;
+  border-radius: 12px;
+  color: #73747a;
+  font-weight: 600;
+  transition: all 0.34s cubic-bezier(0.075, 0.82, 0.165, 1);
+  cursor: pointer;
+  flex-shrink: 0;
+  flex-grow: 0;
+  gap: 6px;
+}
+
+.ChannelButton--category {
+  display: flex;
+  margin-right: 16px;
+  gap: 4px;
+  color: #86878d;
+  font-weight: 600;
+  font-size: 14px;
+  width: calc(var(--channel-item-width) - var(--channel-item-padding) * 2);
+  margin-top: 12px;
+  margin-bottom: 2px;
+}
+
+.ChannelButton--category .ChannelButton--icon {
+  width: 0px;
+}
+
+.ChannelButton--normal:hover {
+  background: #1f1e25;
+  color: #fff;
+}
+
+.ChannelButton--icon {
+  width: 23px;
+  filter: invert(57%) sepia(0%) saturate(256%) hue-rotate(170deg)
+  brightness(101%) contrast(84%);
+}
diff --git a/src/renderer/styles/channel/ChannelList.css b/src/renderer/styles/channel/ChannelList.css
new file mode 100644
index 0000000..8ec64e1
--- /dev/null
+++ b/src/renderer/styles/channel/ChannelList.css
@@ -0,0 +1,9 @@
+.ChannelList {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100% - var(--server-info-height));
+  overflow: hidden;
+  overflow-y: auto;
+  align-items: center;
+}
diff --git a/src/renderer/styles/channel/Message.css b/src/renderer/styles/channel/Message.css
new file mode 100644
index 0000000..d0b529e
--- /dev/null
+++ b/src/renderer/styles/channel/Message.css
@@ -0,0 +1,34 @@
+.Message {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 8px;
+}
+
+.Message:hover {
+  background: #eaeaea0c;
+}
+
+.Message--author-container {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  gap: 6px;
+}
+
+.Message--author-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+
+.Message--author-decoration-img {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+}
+
+.Message--content-container {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/renderer/styles/channel/MessageAttachment.css b/src/renderer/styles/channel/MessageAttachment.css
new file mode 100644
index 0000000..29117a4
--- /dev/null
+++ b/src/renderer/styles/channel/MessageAttachment.css
@@ -0,0 +1,9 @@
+.MessageAttachment {
+  height: 225px;
+}
+
+.MessageAttachment--image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css
deleted file mode 100644
index 84bb1b5..0000000
--- a/src/renderer/styles/global.css
+++ /dev/null
@@ -1,40 +0,0 @@
-body {
-  margin: 0;
-  background: var(--background-dim);
-  color: var(--text);
-  font-family: 'Inter', sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-  overflow: hidden;
-  color-scheme: dark;
-}
-
-a,
-p,
-h1,
-h2,
-h3 {
-  margin: 0;
-}
-
-.app__content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - var(--serverbar-width));
-  margin-left: var(--serverbar-width);
-  bottom: 0;
-  right: 0;
-}
-
-.hidden_scrollbar {
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox */
-}
-
-.hidden_scrollbar::-webkit-scrollbar {
-  display: none;
-  width: 0; /* Remove scrollbar space */
-  background: transparent;
-}
diff --git a/src/renderer/styles/page/GuildChannelPage.css b/src/renderer/styles/page/GuildChannelPage.css
new file mode 100644
index 0000000..163ffb9
--- /dev/null
+++ b/src/renderer/styles/page/GuildChannelPage.css
@@ -0,0 +1,13 @@
+.GuildChannelPage {
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  padding: 20px;
+}
+
+.GuildChannelPage--messages-container {
+  display: flex;
+  flex-direction: column-reverse;
+  height: calc(100% - 20px);
+  overflow-y: auto;
+  gap: 6px;
+}
diff --git a/src/renderer/styles/page/GuildPage.css b/src/renderer/styles/page/GuildPage.css
new file mode 100644
index 0000000..ab19f4b
--- /dev/null
+++ b/src/renderer/styles/page/GuildPage.css
@@ -0,0 +1,14 @@
+.GuildPage {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 12px;
+}
+
+.GuildPage--content {
+  background: #1B1D21;
+  border-radius: 20px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/renderer/styles/page/PageLayout.css b/src/renderer/styles/page/PageLayout.css
new file mode 100644
index 0000000..445ed62
--- /dev/null
+++ b/src/renderer/styles/page/PageLayout.css
@@ -0,0 +1,5 @@
+.PageLayout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
diff --git a/src/renderer/styles/page/PageSideBar.css b/src/renderer/styles/page/PageSideBar.css
new file mode 100644
index 0000000..c2a0d7e
--- /dev/null
+++ b/src/renderer/styles/page/PageSideBar.css
@@ -0,0 +1,13 @@
+:root {
+  --page-sidebar-width: 260px;
+}
+
+.PageSideBar {
+  position: relative;
+  display: flex;
+  width: var(--page-sidebar-width);
+  height: calc(100% - var(--user-panel-height) - var(--user-panel-padding) * 2);
+  flex-direction: column;
+  overflow: hidden;
+  flex-shrink: 0;
+}
diff --git a/src/renderer/styles/server/Server.css b/src/renderer/styles/server/Server.css
new file mode 100644
index 0000000..9999588
--- /dev/null
+++ b/src/renderer/styles/server/Server.css
@@ -0,0 +1,18 @@
+.Server {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+  background: var(--panel-background);
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 25%;
+  overflow: hidden;
+}
+
+.Server--icon {
+  width: 100%;
+  flex-shrink: 0;
+}
diff --git a/src/renderer/styles/server/ServerBar.css b/src/renderer/styles/server/ServerBar.css
new file mode 100644
index 0000000..cb1de72
--- /dev/null
+++ b/src/renderer/styles/server/ServerBar.css
@@ -0,0 +1,11 @@
+.ServerBar {
+  display: flex;
+  flex-direction: column;
+  width: 72px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 10px;
+}
diff --git a/src/renderer/styles/server/ServerInfo.css b/src/renderer/styles/server/ServerInfo.css
new file mode 100644
index 0000000..a43e613
--- /dev/null
+++ b/src/renderer/styles/server/ServerInfo.css
@@ -0,0 +1,28 @@
+:root {
+  --server-info-height: 180px;
+}
+
+.ServerInfo {
+  position: relative;
+  width: 100%;
+  height: var(--server-info-height);
+  margin-bottom: 10px;
+  overflow: hidden;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.ServerInfo--banner-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ServerInfo--guild-name {
+  bottom: 10px;
+  left: 10px;
+  font-weight: 600;
+  font-size: 18px;
+  position: absolute;
+  filter: drop-shadow(0px 5px 4px #000000);
+}
diff --git a/src/renderer/styles/user/UserPanel.css b/src/renderer/styles/user/UserPanel.css
new file mode 100644
index 0000000..5b3c29b
--- /dev/null
+++ b/src/renderer/styles/user/UserPanel.css
@@ -0,0 +1,79 @@
+:root {
+  --user-panel-height: 50px;
+  --user-panel-padding: 10px;
+}
+
+.UserPanel {
+  position: absolute;
+  width: calc(72px + var(--page-sidebar-width));
+  height: var(--user-panel-height);
+  padding: var(--user-panel-padding);
+  bottom: var(--app-content-padding);
+  left: var(--app-content-padding);
+  background: var(--panel-background);
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.UserPanel--user-container {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 0px 4px;
+}
+
+.UserPanel--user-avatar-container {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.UserPanel--user-avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.UserPanel--status-icon-wrapper {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  padding: 3px;
+  background: var(--panel-background);
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.UserPanel--status-icon {
+  width: 10px;
+  height: 10px;
+}
+
+.UserPanel--status-icon-online {
+  background: #278641;
+  border-radius: 50%;
+}
+
+.UserPanel--user-info-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  justify-content: center;
+}
+
+.UserPanel--user-name {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.UserPanel--user-status {
+  font-weight: 400;
+  font-size: 14px;
+  opacity: 0.74;
+}
diff --git a/src/renderer/styles/vars.css b/src/renderer/styles/vars.css
deleted file mode 100644
index c94a561..0000000
--- a/src/renderer/styles/vars.css
+++ /dev/null
@@ -1,18 +0,0 @@
-:root {
-  --text: #e4edf6;
-  --unselected-text: #949ba4;
-
-  --background: #171b1d;
-  --background2: #0a0e0f;
-  --border: #212328;
-
-  --primary: #85b9ea;
-  --secondary: #0f599e;
-  --accent: #1489f8;
-
-  --border-size: 2px;
-  --titlebar-height: 24px;
-  --topbar-height: 150px;
-  --serverbar-width: 75px;
-  --sidebar-width: 300px;
-}
diff --git a/src/renderer/utils/channelUtils.ts b/src/renderer/utils/channelUtils.ts
index 4befa39..61317ce 100644
--- a/src/renderer/utils/channelUtils.ts
+++ b/src/renderer/utils/channelUtils.ts
@@ -1,6 +1,27 @@
-/* eslint-disable import/prefer-default-export */
+import { ChannelType } from '@/discord/structures/channel/BaseChannel';
+import RendererChannel from '@/discord/structures/channel/RendererChannel';
 
-import RendererChannel from '../../discord/structures/channel/RendererChannel';
+// Channel Icons
+import TextChannelIcon from '@/assets/app/icons/channel/text-icon.svg';
+import VoiceChannelIcon from '@/assets/app/icons/channel/volume-2.svg';
+import AnnouncementChannelIcon from '@/assets/app/icons/channel/tv.svg';
+import StageChannelIcon from '@/assets/app/icons/channel/radio.svg';
+import CategoryIcon from '@/assets/app/icons/channel/arrow-down.svg';
+
+export function getChannelIcon(channel: RendererChannel) {
+  switch (channel.type) {
+    case ChannelType.GuildVoice:
+      return VoiceChannelIcon;
+    case ChannelType.GuildAnnouncement:
+      return AnnouncementChannelIcon;
+    case ChannelType.GuildStageVoice:
+      return StageChannelIcon;
+    case ChannelType.GuildCategory:
+      return CategoryIcon;
+    default:
+      return TextChannelIcon;
+  }
+}
 
 export function sortChannels(channels: RendererChannel[]): RendererChannel[] {
   let pairs: {
diff --git a/tsconfig.json b/tsconfig.json
index ccb6ee9..fdb9b84 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,12 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "allowJs": true,
-    "outDir": ".erb/dll"
+    "outDir": ".erb/dll",
+    "paths": {
+      "@/assets/*": ["./assets/*"],
+      "@/*": ["./src/renderer/*"],
+      "@/discord/*": ["./src/discord/*"]
+    }
   },
   "exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
 }