diff --git a/globals/keycode.ts b/globals/keycode.ts
new file mode 100644
index 0000000..051c060
--- /dev/null
+++ b/globals/keycode.ts
@@ -0,0 +1,127 @@
+export enum KeyCode {
+    Backspace = 8,
+    Tab = 9,
+    Enter = 13,
+    Shift = 16,
+    Ctrl = 17,
+    Alt = 18,
+    PauseBreak = 19,
+    CapsLock = 20,
+    Escape = 27,
+    Space = 32,
+    PageUp = 33,
+    PageDown = 34,
+    End = 35,
+    Home = 36,
+
+    LeftArrow = 37,
+    UpArrow = 38,
+    RightArrow = 39,
+    DownArrow = 40,
+
+    Insert = 45,
+    Delete = 46,
+
+    Zero = 48,
+    ClosedParen = Zero,
+    One = 49,
+    ExclamationMark = One,
+    Two = 50,
+    AtSign = Two,
+    Three = 51,
+    PoundSign = Three,
+    Hash = PoundSign,
+    Four = 52,
+    DollarSign = Four,
+    Five = 53,
+    PercentSign = Five,
+    Six = 54,
+    Caret = Six,
+    Hat = Caret,
+    Seven = 55,
+    Ampersand = Seven,
+    Eight = 56,
+    Star = Eight,
+    Asterik = Star,
+    Nine = 57,
+    OpenParen = Nine,
+
+    A = 65,
+    B = 66,
+    C = 67,
+    D = 68,
+    E = 69,
+    F = 70,
+    G = 71,
+    H = 72,
+    I = 73,
+    J = 74,
+    K = 75,
+    L = 76,
+    M = 77,
+    N = 78,
+    O = 79,
+    P = 80,
+    Q = 81,
+    R = 82,
+    S = 83,
+    T = 84,
+    U = 85,
+    V = 86,
+    W = 87,
+    X = 88,
+    Y = 89,
+    Z = 90,
+
+    LeftWindowKey = 91,
+    RightWindowKey = 92,
+    SelectKey = 93,
+
+    Numpad0 = 96,
+    Numpad1 = 97,
+    Numpad2 = 98,
+    Numpad3 = 99,
+    Numpad4 = 100,
+    Numpad5 = 101,
+    Numpad6 = 102,
+    Numpad7 = 103,
+    Numpad8 = 104,
+    Numpad9 = 105,
+
+    Multiply = 106,
+    Add = 107,
+    Subtract = 109,
+    DecimalPoint = 110,
+    Divide = 111,
+
+    F1 = 112,
+    F2 = 113,
+    F3 = 114,
+    F4 = 115,
+    F5 = 116,
+    F6 = 117,
+    F7 = 118,
+    F8 = 119,
+    F9 = 120,
+    F10 = 121,
+    F11 = 122,
+    F12 = 123,
+
+    NumLock = 144,
+    ScrollLock = 145,
+
+    SemiColon = 186,
+    Equals = 187,
+    Comma = 188,
+    Dash = 189,
+    Period = 190,
+    UnderScore = Dash,
+    PlusSign = Equals,
+    ForwardSlash = 191,
+    Tilde = 192,
+    GraveAccent = Tilde,
+
+    OpenBracket = 219,
+    ClosedBracket = 221,
+    Quote = 222
+}
\ No newline at end of file
diff --git a/pages/teams/demo.tsx b/pages/teams/demo.tsx
index dc3e62b..ffb62a2 100644
--- a/pages/teams/demo.tsx
+++ b/pages/teams/demo.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image';
 import React from 'react';
 import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh } from "react-icons/fa";
 import { UserStatus, User } from '../../models/user'
+import { KeyCode } from '../../globals/keycode'
 
 let testFriends = [ 
     {
@@ -49,9 +50,19 @@ export default class Demo extends React.Component {
         this.state = {
             selectedChannel: 1
         }
+
+        this.handleKeyboardShortcut = this.handleKeyboardShortcut.bind(this);
     }
 
-    statusBubble(status: UserStatus) {
+    componentDidMount(): void {
+        document.addEventListener("keydown", this.handleKeyboardShortcut)
+    }
+
+    componentWillUnmount(): void {
+        // this.removeEventListener("keydown", this.handleKeyboardShortcut);
+    }
+
+    statusBubble(status: UserStatus): React.Component {
         console.log(status)
 
         switch(status) {
@@ -66,102 +77,178 @@ export default class Demo extends React.Component {
         }
     }
 
+    handleKeyboardShortcut(event) {    
+        console.log(event.keyCode)
+
+        switch(event.keyCode) {
+            case KeyCode.Zero:
+                this.setState({
+                    selectedChannel: 0
+                });
+                break 
+            case KeyCode.One:
+                this.setState({
+                    selectedChannel: 1
+                });
+                break 
+            case KeyCode.Two:
+                this.setState({
+                    selectedChannel: 2
+                });
+                break 
+            case KeyCode.Three:
+                this.setState({
+                    selectedChannel: 3
+                });
+                break 
+            case KeyCode.Four:
+                this.setState({
+                    selectedChannel: 4
+                });
+                break
+            case KeyCode.Five:
+                this.setState({
+                    selectedChannel: 5
+                });
+                break
+            default:
+                return
+        }
+    }
+
     render() {
         return (
-            <div className="container mx-auto max-w-screen-xl pt-10 flex flex-col">
-                <Head>
-                    <link
-                    href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
-                    rel="stylesheet"
-                    />
-        
-                    <link
-                    href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap"
-                    rel="stylesheet"
-                    />
-                </Head>
-                
-                {/* header content */}
-                <section className="flex-1 flex flex-row items-center justify-between py-5">
-                    {/* welcome message */}
-                    <span className='flex flex-col'>
-                        <font className="font-sans font-bold text-xl">👋Hey Arjun, Good Afternoon!</font>
-                        
-                    </span>
+            <>
+                <div className="container mx-auto max-w-screen-xl pt-10 flex flex-col">
+                    <Head>
+                        <link
+                        href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
+                        rel="stylesheet"
+                        />
+            
+                        <link
+                        href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap"
+                        rel="stylesheet"
+                        />
+                    </Head>
                     
-                    {/* avatar */}
-                    <span className="flex flex-row items-center space-x-5">
-                        <FaHeadphonesAlt className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
-                        <FaMicrophoneAlt className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
-                        <FaTh className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
-                        <span className='relative flex'>
-                            <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                            <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
-                            <Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
-                        </span>
-                    </span>
-                </section>
-                
-                <div className='flex flex-row items-baseline space-x-5'>
-                    {/* personal line */}
-                    <section className='flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
-                        <span className='p-5 flex flex-col'>
-                            <span className="text-gray-300">PERSONAL LINE</span>
-                            <font className="font-sans text-sm text-gray-400 pt-2">
-                                <font className="rounded-full p-1 bg-opacity-30 bg-teal-700 text-teal-700 font-bold">3</font> teammates open for collab</font>
+                    {/* header content */}
+                    <section className="flex-1 flex flex-row items-center justify-between py-5">
+                        {/* welcome message */}
+                        <span className='flex flex-col'>
+                            <font className="font-sans font-bold text-xl">👋Hey Arjun, Good Afternoon!</font>
+                            
                         </span>
                         
-                        {/* list of team members */}
-                        {
-                            testFriends.map((friend, i) => {
-                                return (
-                                    <span key={i} className={`flex flex-row items-center border-t-2 py-2 px-2 justify-items-start w-60${this.state.selectedNumber == i ? "bg-gray-300" : " "}`}>
-                                        <span className='relative flex mr-2'>
-                                            <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                                            
-                                            {this.statusBubble(friend.status)}
-
-                                            <Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
-                                        </span>
-                    
-                                        <span className='flex flex-col'>
-                                            <font className="text-sm text-black font-bold">{friend.name} {friend.status}</font>
-                    
-                                            <font className="text-gray-300 text-xs font-sans">{friend.role}</font>
-                                        </span>                                        
-                                        
-                                        {
-                                            this.state.selectedNumber == i ? 
-                                            <span className="rounded-lg p-2 ml-auto border border-gray-300 shadow-lg">
-                                                <font className="text-gray-200">{i}</font>
-                                            </span>
-                                            :
-                                            <span className="rounded-lg p-2 ml-auto border border-gray-100 shadow-md">
-                                                <font className="text-gray-200">{i}</font>
-                                            </span>
-                                        }
-                                    </span>
-                                )
-                            })
-                        }
+                        {/* avatar */}
+                        <span className="flex flex-row items-center space-x-5">
+                            <FaHeadphonesAlt className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
+                            <FaMicrophoneAlt className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
+                            <FaTh className='text-lg text-gray-400 hover:text-teal-900 ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
+                            <span className='relative flex'>
+                                <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                                <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+                                <Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
+                            </span>
+                        </span>
                     </section>
+                    
+                    <div className='flex flex-row items-baseline space-x-5'>
+                        {/* personal line */}
+                        <section className='flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
+                            <span className='p-5 flex flex-col'>
+                                <span className="text-gray-300">PERSONAL LINE</span>
+                                <font className="font-sans text-sm text-gray-400 pt-2">
+                                    <font className="rounded-full p-1 bg-opacity-30 bg-teal-700 text-teal-700 font-bold">3</font> teammates open for collab</font>
+                            </span>
+                            
+                            {/* list of team members */}
+                            {
+                                testFriends.map((friend, i) => {
+                                    return (
+                                        <span key={i} className={"flex flex-row items-center border-t-2 py-2 px-2 justify-items-start w-60 ease-in-out duration-300 " + (this.state.selectedChannel == i ? "bg-gray-300 scale-105 shadow-2xl" : " ")}>
+                                            <span className='relative flex mr-2'>
+                                                <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                                                
+                                                {this.statusBubble(friend.status)}
+
+                                                <Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
+                                            </span>
+                        
+                                            <span className='flex flex-col'>
+                                                <font className="text-sm text-black font-bold">{friend.name} </font>
+                        
+                                                <font className={"text-xs font-sans text-gray-300" + (this.state.selectedChannel == i ? "text-black" : " ")}>{friend.role}</font>
+                                            </span>                                        
+                                            
+                                            {
+                                                this.state.selectedChannel == i ? 
+                                                <>
+                                                    <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center">
+                                                        <font className="text-white text-sm">{i}</font>
+                                                    </span>
+                                                </>
+                                                
+                                                :
+                                                <span className="rounded-lg p-2 ml-auto border border-gray-100 shadow-md w-10 h-10 text-center">
+                                                    <font className="text-gray-200 text-sm">{i}</font>
+                                                </span>
+                                            }
+                                        </span>
+                                    )
+                                })
+                            }
+                        </section>
+            
+                        {/* live conversations */}
+                        <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
+                            <span className="text-gray-300">LIVE CONVERSATIONS</span>
+            
+                            <span>
+            
+                            </span>
+                        </section>
+                    </div>
+                    
+                    
+                    {/*  */}
+                    <section className=''>
+            
+                    </section>
+                </div>
+                
+                <div className='fixed bottom-10 w-full'>
+                    {/* dynamic footer based on selection */}
+                    <section className='flex flex-row bg-gray-300 max-w-screen-md mx-auto p-5 shadow-xl rounded-xl justify-between'>
+                        <span className='flex flex-row'>
+                            <span className='relative flex mr-2'>
+                                <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+                                
+                                {this.statusBubble(UserStatus.online)}
+
+                                <Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
+                            </span>
         
-                    {/* live conversations */}
-                    <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
-                        <span className="text-gray-300">LIVE CONVERSATIONS</span>
-        
-                        <span>
+                            <span className='flex flex-col'>
+                                <font className="text-sm text-black font-bold">{testFriends[this.state.selectedChannel].name} </font>
         
+                                <font className={"text-xs font-sans text-gray-300 text-black"}>{testFriends[this.state.selectedChannel].role}</font>
+                            </span> 
+                        </span>
+
+                        {/* shortcuts */}
+                        <span className='flex flex-row space-x-3'>
+                            <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center">
+                                <font className="text-white text-sm font-bold">R</font>
+                            </span>
+                            <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-20 h-10 text-center">
+                                <font className="text-white text-sm font-bold">SPACE</font>
+                            </span>
                         </span>
                     </section>
                 </div>
                 
-                
-                {/*  */}
-                <section className=''>
-        
-                </section>
-            </div>
+            </>
             )
     }