diff --git a/frontend/components/MenuList/MenuList.vue b/frontend/components/MenuList/MenuList.vue
new file mode 100644
index 0000000..6dc7909
--- /dev/null
+++ b/frontend/components/MenuList/MenuList.vue
@@ -0,0 +1,172 @@
+<script lang="ts">
+import MenuPreview from '../MenuPreview/MenuPreview.vue';
+import {emitter, MenuChangePayload} from '../../lib/global';
+export default {
+    name:"MenuList",
+    components: { MenuPreview },
+    data(){
+        return {selectedMenu:false,}
+    },
+    //mounted emitter.on for menuPreview click emits
+    mounted(){
+        emitter.on('menu-change',(payload:string) => {
+            console.log('change menu please')
+            console.log(payload)
+            if(payload){
+                this.activeMenu = payload;
+                this.selectedMenu =true;
+            }
+            else{
+                this.activeMenu = 'none'
+                this.selectedMenu = false;
+            }
+        })
+    },
+}
+</script>
+<template>
+    <div class="list_container" v-bind:class="(this.selectedMenu) ? 'hide-if-small': 'no-menu-selected'" id="THREADLIST">
+        <div class="threadlist-header d-flex justify-content-between align-items-center">
+            <div class="ml-05">
+                <router-link class="fa fa-arrow-left btn btn-large " to="`/threadlist.php`" aria="Go Back to threadlist!"></router-link>
+
+                <h6 class="m-auto">Settings</h6>
+            </div>
+        </div>
+        <MenuPreview name="templates" link='templates.php' descriptions="Manage Message Templates" 
+                   ></MenuPreview>
+
+        <div class="threadlist-table">
+            <div class="preview_list_container">
+                
+            </div>
+        </div>
+    
+    </div>
+</template>
+<style>
+.ml-05{
+    margin-left:5%;
+}
+.mr-05{
+    margin-right:5%;
+}
+/*body{
+    cursor:pointer;
+} */
+.menu-icon{
+    color:white;
+}
+.menu-icon:hover{
+    color:#BB6025;
+}
+.float-right{
+    position:absolute;
+    top: 50%;
+    float:right;
+}
+
+.active{
+    grid-column-start: 1;
+}
+.preview_list_container {
+    direction: ltr;
+}
+.list_container {
+    height: 100%;
+    grid-column-start: 1;
+    grid-column-end: 1;
+    padding-right: 0.25rem;
+    border-radius: 0.5rem;
+    border-color: none;
+}
+.hide-if-small{
+}
+
+.threadlist-header{
+    box-shadow: 0 4px 4px -2px white;
+    margin: 0 auto 0px auto;
+    padding-top: 0.75rem;
+    padding-bottom: 0.25rem;
+    background-color: #5f9fd3;
+    color: #fff;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    font-weight: bold;
+    border: solid #5f9fd3 2px;
+}
+
+.threadlist-table {
+    /*border-spacing: 1em; */
+    direction: rtl;
+    overflow-y: auto;
+    height: 69dvh;
+    width: 100%;
+    table-layout: fixed;
+    padding-left: 3px;
+}
+.link-container{
+    font-size: 2rem;
+    line-height: 2rem;
+    height: 3rem;
+    width: 3rem;
+    background-color: #5f9fd3;
+    border-radius: 50%;
+    position:relative;
+    float: center;
+    margin-top: 0.5rem;
+}
+
+.dot-center{
+    text-align:center;
+     margin: 0;
+     position: absolute;               
+     top: 50%;                         
+     left: 50%;
+     transform: translate(-50%, -50%) ; 
+}
+.dot {    
+     
+         border-radius: 50%;
+         -moz-border-radius: 50%;
+         -webkit-border-radius: 50%;
+         color: #ffffff;
+         display: inline-block;
+         font-weight: bold;
+         line-height: 22px;
+         margin-right: 5px;
+         text-align: center;
+ 
+ }
+ .dot:hover{
+     color:#BB6025;
+ }
+
+ .link-container-container{
+    justify-content: center;
+    display:flex;
+}
+.load-animation-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+
+    @media screen and (width <=700px) {    
+    div.action_bar {
+        top: 0px;
+    }
+    .active{
+        z-index:7;
+    }
+    .table {
+        height: 79dvh;
+    }
+    .hide-if-small{
+        display:none;
+    }
+    
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/MenuPlaceholder/MenuPlaceholder.vue b/frontend/components/MenuPlaceholder/MenuPlaceholder.vue
new file mode 100644
index 0000000..ed40f5d
--- /dev/null
+++ b/frontend/components/MenuPlaceholder/MenuPlaceholder.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+export default{
+    name:"MenuPlaceholder",
+    props:{
+        selectedConvo: Boolean,
+    }
+}
+</script>
+<template>
+    <div id="NO_MESSAGES" >
+            <p v-if="!selectedConvo" class="center">  Click on a Menu Item to get started!</p>
+        
+    </div>
+</template>
+<style scoped>
+#NO_MESSAGES {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+}
+.center{
+    grid-column-start: 1;
+    grid-row-start: 1;
+    align-self: center;
+    justify-self: center;
+}
+
+@media screen and (width <=700px) {
+    #NO_MESSAGES{
+        display:none;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/MenuPreview/MenuPreview.vue b/frontend/components/MenuPreview/MenuPreview.vue
new file mode 100644
index 0000000..4abda61
--- /dev/null
+++ b/frontend/components/MenuPreview/MenuPreview.vue
@@ -0,0 +1,167 @@
+<script lang='ts'>
+import {emitter} from '../../lib/global';
+
+export default {
+    name:'MenuPreview',
+    props:{
+        link:{
+            type:String
+        },
+        description:{
+            type: String
+        },
+        name:{
+            type:String
+        }
+    },
+    methods:{
+        menuLinkClickHandler(){
+            console.log(this.name)
+            emitter.emit("menu-change",this.name)
+        }
+    }
+    //mounted click event emitter
+}
+
+</script>
+<template>
+    <div class='tr_replace' :data-displayName="this.name"  >
+        <div class='td_preview' >
+            <router-link :to="this.link" class="menu-link" @click="menuLinkClickHandler">
+                <div class="menu-preview-container" >
+                    <span class='menu-name' >{{
+                        this.name }}</span>
+                    <span class='timestamp' 
+                        :data-timestamp="this.timestamp"></span>
+
+                    <span class='menu-last-message' >{{
+                        this.description }}</span>
+                        <div class="new-messages">
+                            <span class="new-message-alert-dot bgc-AN-orange" v-if="newMessages>0">{{this.newMessages}}</span>
+                        </div>
+                </div>
+
+
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<style>
+.menu-name {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row: 1;
+    justify-self: start;
+    color: black;
+}
+
+.timestamp {
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row: 1;
+    justify-self: end;
+}
+
+.menu-last-message {
+    color: darkgray;
+    grid-row-start: 2;
+    grid-column: 1;
+    justify-self: start;
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.new-messages{
+    grid-row:2;
+    grid-column: 3;
+    display: inline-block;
+    justify-content: right;
+    justify-self: right;
+}
+.new-message-alert-dot {    
+         border-radius: 50%;
+         -moz-border-radius: 50%;
+         -webkit-border-radius: 50%;
+         color: #ffffff;
+         display: inline-block;
+         font-weight: bold;
+         line-height: 22px;
+         margin-right: 1.5rem;
+         text-align: center;
+         width: 22px;
+ 
+ }
+ .dot:hover{
+     color:#fff;
+ }
+
+.timestamp.activeMenu {
+    color: white;
+}
+
+.menu-name.activeMenu {
+    color: white;
+}
+
+.menu-last-message.activeMenu {
+    color: white;
+}
+
+.text-center {
+    margin: 0;
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.activeMenu {
+    color: white;
+}
+
+.menu-preview-container {
+    border-radius: 1em;
+    padding: 0.5625em;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 0 auto auto;
+}
+.tr_replace{
+    max-height: 6rem;
+
+}
+
+.tr_replace:hover span {
+    color: black;
+}
+.tr_replace:hover {
+    background-color: #aaaaaa;
+}
+
+.tr_replace.activeMenu:hover span {
+    color: white;
+}
+.tr_replace.activeMenu:hover {
+    background-color: #aaaaaa;
+}
+
+.tr_replace.activeMenu {
+    background-color: #3178B1;
+}
+
+.tr_replace.activeMenu:hover {
+    background-color: #aaaaaa;
+}
+
+/*
+.tr_replace:first-child {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+}
+*/
+.tr_replace:last-child {
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/TemplatesMenu/TemplatesMenu.vue b/frontend/components/TemplatesMenu/TemplatesMenu.vue
new file mode 100644
index 0000000..2fedfa3
--- /dev/null
+++ b/frontend/components/TemplatesMenu/TemplatesMenu.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+import {emitter} from '../../lib/global';
+
+export default {
+    name: 'TemplatesMenu',
+    emits:{
+        'leave-menu':String
+    },
+    methods:{
+        backArrowClickHandler() {
+            emitter.emit('menu-change');
+        }
+    }
+
+}
+</script>
+<template>
+    <div id="TEMPLATES_MENU">
+        <div class="templates-container">
+            <div class="thread-header new-message-header">
+                <div class="thread-header-container  d-flex justify-content-between align-items-center">
+                    <div class="'ml-05">
+                        <router-link class="fa fa-arrow-left btn btn-large "
+                            :to="`/menu.php`" @click="backArrowClickHandler"
+                            aria="Go Back to Settings Menu"></router-link>
+                    
+                        <div class="new-message-headline">
+                            <h6>Templates</h6>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+@media screen and (width <=700px) {
+    #THREAD {
+        z-index: 5;
+        grid-column-start: 1;
+        grid-column-end: 1;
+        height: 91vh;
+    }
+
+    .thread-container {
+        height: 90vh;
+    }
+
+    .messages {
+        height: 80vh;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/ThreadList/ThreadList.vue b/frontend/components/ThreadList/ThreadList.vue
index 55614f7..8832034 100644
--- a/frontend/components/ThreadList/ThreadList.vue
+++ b/frontend/components/ThreadList/ThreadList.vue
@@ -161,6 +161,7 @@ export default {
                 <h6 class="m-auto">Conversations</h6>
             </div>
             <div class="mr-05">
+                <router-link to="/menu.php" id="SETTINGS-BTN" role="button" class="fas fa-cog f btn btn-large"> </router-link>
                 <a id="notification-btn" role="button" class="fas fa-bell-slash fa-fw f btn btn-large" onclick="toggleNotifications()" aria-label="toggle notifications"></a>
             </div>
         </div>
diff --git a/frontend/components/conversation/Conversation.vue b/frontend/components/conversation/Conversation.vue
index 000ab61..0b48766 100644
--- a/frontend/components/conversation/Conversation.vue
+++ b/frontend/components/conversation/Conversation.vue
@@ -484,4 +484,5 @@ table {
         height: 80vh;
     }
 
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/frontend/lib/global.ts b/frontend/lib/global.ts
index a34754d..dd59843 100644
--- a/frontend/lib/global.ts
+++ b/frontend/lib/global.ts
@@ -13,6 +13,9 @@ type ThreadChangePayload = {
   threadUUID?: string
   
 };
+type MenuChangePayload = {
+    name: String
+}
 
 type MessageData = {
     direction: string;
@@ -142,4 +145,4 @@ function updateOldestMessage(newOldestTimestamp: Number){
     //console.log(state.oldestMessage)
     return state.oldestMessage;
 }
-export { state, emitter, QUERY_LIMIT, MessageData, GlobalState, ThreadChangePayload, addMessage, addPreview, updatePageNumber  }
+export { state, emitter, QUERY_LIMIT, MessageData, GlobalState, ThreadChangePayload, MenuChangePayload, addMessage, addPreview, updatePageNumber  }
diff --git a/frontend/routes/index.ts b/frontend/routes/index.ts
index aabc8f0..c8caa28 100644
--- a/frontend/routes/index.ts
+++ b/frontend/routes/index.ts
@@ -4,6 +4,9 @@ import ThreadList from '@/components/ThreadList/ThreadList.vue';
 import NewMessage from '@/components/NewMessage.vue';
 import ConversationVue from '@/components/conversation/Conversation.vue';
 import ConvoPlaceholderVue from '@/components/ConvoPlaceholder.vue';
+import MenuPlaceHolder from '@/components/MenuPlaceholder/MenuPlaceholder.vue';
+import MenuList from '../components/MenuList/MenuList.vue';
+import TemplatesMenu from '@/components/TemplatesMenu/TemplatesMenu.vue';
 
 export const router = createRouter({
     history: createWebHistory("/app/webtexting/"),
@@ -35,6 +38,20 @@ export const router = createRouter({
                 }
                     
             },
+            {
+                path:'/menu.php',
+                components:{
+                    leftSide: MenuList,
+                    rightSide: MenuPlaceHolder,
+                }
+            },
+            {
+                path:"/templates.php",
+                components:{
+                    leftSide:MenuList,
+                    rightSide: TemplatesMenu,
+                }
+            },
             
         ]
         }
diff --git a/vite.config.js b/vite.config.js
index 5624bee..ea12339 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,7 +12,7 @@ export default defineConfig({
     }
   },
   define: {
-    "process.env.NODE_ENV": "'production'",
+    "process.env.NODE_ENV": "'development'",
   },
   root: "frontend",
   build: {