diff --git a/components/interactables/Chip/Chip.vue b/components/interactables/Chip/Chip.vue
index 6736a0e293..b22a0a51ef 100644
--- a/components/interactables/Chip/Chip.vue
+++ b/components/interactables/Chip/Chip.vue
@@ -26,6 +26,10 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method hide
+     * @description Hides chip element
+     */
     hide() {
       this.show = false
     },
diff --git a/components/interactables/ContextMenu/ContextMenu.vue b/components/interactables/ContextMenu/ContextMenu.vue
index 8dd698027c..450d7dfdff 100644
--- a/components/interactables/ContextMenu/ContextMenu.vue
+++ b/components/interactables/ContextMenu/ContextMenu.vue
@@ -27,13 +27,29 @@ export default Vue.extend({
     ...mapState(['settings', 'ui']),
   },
   methods: {
+    /**
+     * @method close
+     * @description Closes context menu by setting toggleContextMenu in state to false
+     */
     close() {
       this.$store.commit('toggleContextMenu', false)
     },
+    /**
+     * @method handle
+     * @description Executes callback function and closes the ContextMenu component
+     * @param func Function to execute
+     * @example @click="handle(item.func)"
+     */
     handle(func: any) {
       func()
       this.close()
     },
+    /**
+     * @method handleOverflow
+     * @description Ensures contextMenu is positioned correctly by calculating if the div overflows the page and respositioning as needed.
+     * Corrects position by commiting an adjusted position to setContextMenuPosition in state
+     * @example
+     */
     handleOverflow() {
       const contextMenu = this.$refs.contextMenu as HTMLElement
       const position = this.ui.contextMenuPosition
diff --git a/components/interactables/Input/Input.vue b/components/interactables/Input/Input.vue
index 431be534b5..ffb5c17aca 100644
--- a/components/interactables/Input/Input.vue
+++ b/components/interactables/Input/Input.vue
@@ -80,9 +80,17 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method update
+     * @description Emits the update event with updated internalText string
+     */
     update() {
       this.$emit('update', this.internalText)
     },
+    /**
+     * @method clearSearch
+     * @description Sets internalText in data to an empty string
+     */
     clearSearch() {
       this.internalText = ''
     },
diff --git a/components/interactables/InputGroup/InputGroup.vue b/components/interactables/InputGroup/InputGroup.vue
index acbec42791..fe2c94fc9b 100644
--- a/components/interactables/InputGroup/InputGroup.vue
+++ b/components/interactables/InputGroup/InputGroup.vue
@@ -117,6 +117,10 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method update
+     * @description Emits the update event with updated internalText string
+     */
     update() {
       this.$emit('update', this.$data.internalText)
     },
diff --git a/components/interactables/QuickProfile/QuickProfile.vue b/components/interactables/QuickProfile/QuickProfile.vue
index 76d2c97652..3e42717e02 100644
--- a/components/interactables/QuickProfile/QuickProfile.vue
+++ b/components/interactables/QuickProfile/QuickProfile.vue
@@ -18,9 +18,18 @@ export default Vue.extend({
     ...mapState(['ui']),
   },
   methods: {
+    /**
+     * @method close
+     * @description Closes quickProfile by commiting quickProfile false to state
+     */
     close() {
       this.$store.commit('quickProfile', false)
     },
+    /**
+     * @method close
+     * @description Ensures quickProfile is positioned correctly by calculating if the div overflows the page and respositioning as needed.
+     * Corrects position by commiting an adjusted position to setQuickProfilePosition in state
+     */
     handleOverflow() {
       if (this.$device.isDesktop) {
         const quickProfile = this.$refs.quickProfile as HTMLElement
diff --git a/components/interactables/Search/Input/Input.vue b/components/interactables/Search/Input/Input.vue
index f26445a7c6..89aff87b4c 100644
--- a/components/interactables/Search/Input/Input.vue
+++ b/components/interactables/Search/Input/Input.vue
@@ -53,13 +53,30 @@ export default Vue.extend({
     }
   },
   computed: {
+    /**
+     * @method searchOptions DocsTODO
+     * @description
+     * @returns
+     */
     searchOptions() {
       return SearchUtil.getCommandMetaList()
     },
+
+    /**
+     * @method hasOptions DocsTODO
+     * @description
+     * @returns
+     */
     hasOptions(): SearchOption[] {
       return SearchUtil.getCommandTypeParams()[SearchCommandType.Has]
         .options as SearchOption[]
     },
+
+    /**
+     * @method isEmptyCommand DocsTODO
+     * @description
+     * @returns
+     */
     isEmptyCommand() {
       if (
         this.current != null &&
@@ -70,12 +87,24 @@ export default Vue.extend({
       }
       return false
     },
+
+    /**
+     * @method isOption DocsTODO
+     * @description
+     * @returns
+     */
     isOption() {
       if (this.isFocus && (this.isEmpty || this.isHas || this.isEmptyCommand)) {
         return true
       }
       return false
     },
+
+    /**
+     * @method isHas DocsTODO
+     * @description
+     * @returns
+     */
     isHas() {
       if (this.current == null || this.current.value !== '') {
         return false
@@ -85,6 +114,12 @@ export default Vue.extend({
       }
       return false
     },
+
+    /**
+     * @method isDate DocsTODO
+     * @description
+     * @returns
+     */
     isDate() {
       if (this.current == null || this.current.value !== '') {
         return false
@@ -98,6 +133,12 @@ export default Vue.extend({
       }
       return false
     },
+
+    /**
+     * @method isSearch DocsTODO
+     * @description
+     * @returns
+     */
     isSearch() {
       if (this.isEmpty || !this.isFocus || this.current == null) {
         return false
@@ -112,9 +153,19 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method _setEmpty DocsTODO
+     * @description
+     * @param isEmpty
+     */
     _setEmpty(isEmpty: boolean) {
       this.isEmpty = isEmpty
     },
+
+    /**
+     * @method _desectStatus DocsTODO
+     * @description
+     */
     _detectStatus() {
       const searchInput = this.$refs.searchInput as HTMLElement
       if (searchInput.textContent === '') {
@@ -125,6 +176,13 @@ export default Vue.extend({
         this._setEmpty(false)
       }
     },
+
+    /**
+     * @method _insertBlank DocsTODO
+     * @description
+     * @param after
+     * @returns
+     */
     _insertBlank(after: number) {
       this.current = this.searchQuery.insertCommand(
         SearchCommand.Empty,
@@ -133,6 +191,12 @@ export default Vue.extend({
       )
       this._produceItems()
     },
+
+    /**
+     * @method _insertOption DocsTODO
+     * @description
+     * @returns
+     */
     _insertOption() {
       if (this.option < 0 || (!this.isEmpty && !this.isEmptyCommand)) {
         return
@@ -153,6 +217,12 @@ export default Vue.extend({
       }
       this.option = -1
     },
+
+    /**
+     * @method _insertHasOption DocsTODO
+     * @description
+     * @returns
+     */
     _insertHasOption() {
       if (this.option < 0 || this.current == null || !this.isHas) {
         return
@@ -165,6 +235,11 @@ export default Vue.extend({
         this.option = -1
       }
     },
+
+    /**
+     * @method _insertSearch DocsTODO
+     * @description
+     */
     _insertSearch() {
       if (this.search < 0 || !this.searchResult) {
         return
@@ -178,6 +253,12 @@ export default Vue.extend({
         this.searchQuery.queryItems[this.searchQuery.queryItems.length - 1]
       this.caretPosition = this.current.cursorEnd
     },
+
+    /**
+     * @method _insertDate DocsTODO
+     * @description
+     * @param date
+     */
     _insertDate(date: string) {
       if (date == null) {
         return
@@ -188,6 +269,12 @@ export default Vue.extend({
         this.caretPosition = this.current.cursorEnd
       }
     },
+
+    /**
+     * @method _prepareItem DocsTODO
+     * @description
+     * @returns
+     */
     _prepareItem() {
       const searchInput = this.$refs.searchInput as HTMLElement
       this.caretPosition = this.searchQuery.caretPosition(searchInput)
@@ -200,6 +287,11 @@ export default Vue.extend({
       })
       return happens
     },
+
+    /**
+     * @method _produceItems DocsTODO
+     * @description
+     */
     _produceItems() {
       const searchInput = this.$refs.searchInput as HTMLElement
       searchInput.innerHTML = ''
@@ -220,11 +312,23 @@ export default Vue.extend({
         searchInput.appendChild(newElement)
       })
     },
+
+    /**
+     * @method _getCaretPosition DocsTODO
+     * @description
+     * @returns
+     */
     _getCaretPosition() {
       const searchInput = this.$refs.searchInput as HTMLElement
       const caretPosition = this.searchQuery.caretPosition(searchInput)
       return caretPosition
     },
+
+    /**
+     * @method _setCaretPosition DocsTODO
+     * @description
+     * @param position
+     */
     _setCaretPosition(position: number) {
       const selection = window.getSelection()
       if (!selection) {
@@ -265,6 +369,12 @@ export default Vue.extend({
         searchInput.focus()
       }
     },
+
+    /**
+     * @method _navigatePanel DocsTODO
+     * @description
+     * @param down
+     */
     _navigatePanel(down: boolean) {
       if (this.isEmpty || this.isEmptyCommand || this.isHas) {
         if (down === true) {
@@ -292,6 +402,11 @@ export default Vue.extend({
         }
       }
     },
+
+    /**
+     * @method _prepareSearch DocsTODO
+     * @description
+     */
     _prepareSearch() {
       // this.caretPosition = this._getCaretPosition()
       this.current = this.searchQuery.queryItemFrom(
@@ -307,12 +422,23 @@ export default Vue.extend({
       this.searchFor = this.searchQuery.getQueryString()
       this._filterSearchResult()
     },
+
+    /**
+     * @method _filterSearchResult DocsTODO
+     * @description
+     */
     _filterSearchResult() {
       this.searchResult = SearchUtil.filterSearchRecommendResult(
         this.searchRecommend,
         this.current
       )
     },
+
+    /**
+     * @method clickOption DocsTODO
+     * @description
+     * @param i
+     */
     clickOption(i: number) {
       const searchInput = this.$refs.searchInput as HTMLElement
       this.option = i
@@ -322,6 +448,12 @@ export default Vue.extend({
       this._detectStatus()
       searchInput.focus()
     },
+
+    /**
+     * @method clickHasOption DocsTODO
+     * @description
+     * @param i
+     */
     clickHasOption(i: number) {
       const searchInput = this.$refs.searchInput as HTMLElement
       this.option = i
@@ -333,6 +465,12 @@ export default Vue.extend({
       this._prepareSearch()
       this.emitSearch()
     },
+
+    /**
+     * @method clickSearchOption DocsTODO
+     * @description
+     * @param i
+     */
     clickSearchOption(i: number) {
       const searchInput = this.$refs.searchInput as HTMLElement
       this.search = i
@@ -344,6 +482,12 @@ export default Vue.extend({
       this._prepareSearch()
       this.emitSearch()
     },
+
+    /**
+     * @method clickDateOption DocsTODO
+     * @description
+     * @param day
+     */
     clickDateOption(day: CalendarDateType) {
       const searchInput = this.$refs.searchInput as HTMLElement
       this._insertDate(day.id)
@@ -354,6 +498,11 @@ export default Vue.extend({
       this._prepareSearch()
       this.emitSearch()
     },
+
+    /**
+     * @method input DocsTODO
+     * @description
+     */
     input() {
       const searchInput = this.$refs.searchInput as HTMLElement
       this.searchQuery.setQueryByHTML(searchInput)
@@ -364,6 +513,12 @@ export default Vue.extend({
       this._prepareSearch()
       this.emitChange()
     },
+
+    /**
+     * @method keydown DocsTODO
+     * @description
+     * @param event
+     */
     keydown(event: KeyboardEvent) {
       switch (event.key) {
         case 'Enter':
@@ -427,6 +582,12 @@ export default Vue.extend({
           break
       }
     },
+
+    /**
+     * @method keyup DocsTODO
+     * @description
+     * @param event
+     */
     keyup(event: KeyboardEvent) {
       if (event.key === ':') {
         this.caretPosition = this._getCaretPosition()
@@ -434,6 +595,11 @@ export default Vue.extend({
         this._setCaretPosition(this.caretPosition)
       }
     },
+
+    /**
+     * @method clearSearch DocsTODO
+     * @description
+     */
     clearSearch() {
       const searchInput = this.$refs.searchInput as HTMLElement
       searchInput.innerHTML = ''
@@ -442,6 +608,11 @@ export default Vue.extend({
       searchInput.focus()
       this.current = null
     },
+
+    /**
+     * @method setFocus DocsTODO
+     * @description
+     */
     setFocus() {
       const searchInput = this.$refs.searchInput as HTMLElement
       searchInput.contentEditable = 'true'
@@ -449,6 +620,11 @@ export default Vue.extend({
       this.isFocus = true
       this.caretPosition = this._getCaretPosition()
     },
+
+    /**
+     * @method lostFocus DocsTODO
+     * @description
+     */
     lostFocus() {
       const searchInput = this.$refs.searchInput as HTMLElement
       searchInput.contentEditable = 'false'
@@ -456,6 +632,11 @@ export default Vue.extend({
       searchInput.blur()
       this.isFocus = false
     },
+
+    /**
+     * @method emitSearch DocsTODO
+     * @description
+     */
     emitSearch() {
       const searchInput = this.$refs.searchInput as HTMLElement
       this.searchQuery.setQueryByHTML(searchInput)
@@ -465,6 +646,11 @@ export default Vue.extend({
         this.searchQuery.queryItems
       )
     },
+
+    /**
+     * @method emitChange DocsTODO
+     * @description
+     */
     emitChange() {
       const searchInput = this.$refs.searchInput as HTMLElement
       this.searchQuery.setQueryByHTML(searchInput)
diff --git a/components/interactables/Search/Result/Result.vue b/components/interactables/Search/Result/Result.vue
index d29f7fead2..45d1052c4f 100644
--- a/components/interactables/Search/Result/Result.vue
+++ b/components/interactables/Search/Result/Result.vue
@@ -51,6 +51,11 @@ export default Vue.extend({
     }
   },
   computed: {
+    /**
+     * @method DataStateType DocsTODO
+     * @description
+     * @returns
+     */
     DataStateType: () => DataStateType,
     ...mapState(['dataState', 'search']),
     loading: {
@@ -61,6 +66,11 @@ export default Vue.extend({
         return this.dataState.search
       },
     },
+    /**
+     * @method userOptions DocsTODO
+     * @description
+     * @returns
+     */
     userOptions() {
       return this.result &&
         this.result.recommends &&
@@ -69,6 +79,11 @@ export default Vue.extend({
         ? this.result.recommends.users
         : []
     },
+    /**
+     * @method channelOptions DocsTODO
+     * @description
+     * @returns
+     */
     channelOptions() {
       return this.result &&
         this.result.recommends &&
@@ -77,11 +92,22 @@ export default Vue.extend({
         ? this.result.recommends.channels
         : []
     },
+    /**
+     * @method givenQueryItems DocsTODO
+     * @description
+     * @returns
+     */
     givenQueryItems() {
       return this.search.query.split(' ')
     },
   },
   watch: {
+    /**
+     * @method saerchQuery DocsTODO
+     * @description
+     * @param
+     * @returns
+     */
     searchQuery(query) {
       if (!this.show || query !== this.searchQuery) {
         return
@@ -90,15 +116,34 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method toggle DocsTODO
+     * @description
+     */
     toggle() {
       this.$emit('toggle')
     },
+    /**
+     * @method toggleGroupBy DocsTODO
+     * @description
+     * @param state
+     */
     toggleGroupBy(state: SearchResultGroupType) {
       this.groupBy = state
     },
+    /**
+     * @method toggleOrderBy DocsTODO
+     * @description
+     * @param state
+     */
     toggleOrderBy(state: SearchOrderType) {
       this.orderBy = state
     },
+    /**
+     * @method fetchResult DocsTODO
+     * @description
+     * @param query
+     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async fetchResult(query: string): Promise<void> {
       this.loading = DataStateType.Loading
diff --git a/components/interactables/Search/SearchQuery.ts b/components/interactables/Search/SearchQuery.ts
index 7d20df9b7c..575088190d 100644
--- a/components/interactables/Search/SearchQuery.ts
+++ b/components/interactables/Search/SearchQuery.ts
@@ -14,6 +14,10 @@ export default class SearchQuery {
     this.queryItems = []
   }
 
+  /**
+   * @method clear
+   * @description Resets all properties on the SearchQuery object
+   */
   clear() {
     this.query = ''
     this.cursorPosition = 0
@@ -21,6 +25,14 @@ export default class SearchQuery {
     this.queryItems = []
   }
 
+  /**
+   * @method insertCommand DocsTODO
+   * @description
+   * @param command
+   * @param value
+   * @param position
+   * @returns
+   */
   insertCommand(
     command: SearchCommand,
     value: string,
@@ -58,6 +70,13 @@ export default class SearchQuery {
     return newItem
   }
 
+  /**
+   * @method appendCommand DocsTODO
+   * @description
+   * @param command
+   * @param value
+   * @returns
+   */
   appendCommand(command: SearchCommand, value: string): SearchQueryItem | null {
     let last: SearchQueryItem | null =
       this.queryItems[this.queryItems.length - 1]
@@ -83,6 +102,13 @@ export default class SearchQuery {
     return newItem
   }
 
+  /**
+   * @method setCommandValue DocsTODO
+   * @description
+   * @param index
+   * @param value
+   * @returns
+   */
   setCommandValue(index: number, value: string) {
     this.queryItems.forEach((queryItem) => {
       if (queryItem.index === index) {
@@ -95,6 +121,12 @@ export default class SearchQuery {
     })
   }
 
+  /**
+   * @method queryItemFrom DocsTODO
+   * @description
+   * @param caretPosition
+   * @returns
+   */
   queryItemFrom(caretPositon: number): SearchQueryItem | null {
     let found = null
     this.queryItems.forEach((queryItem) => {
@@ -108,6 +140,11 @@ export default class SearchQuery {
     return found
   }
 
+  /**
+   * @method deleteItemFrom DocsTODO
+   * @description
+   * @param caretPosition
+   */
   deleteItemFrom(caretPositon: number) {
     let index = -1
     this.queryItems.forEach((queryItem) => {
@@ -124,6 +161,11 @@ export default class SearchQuery {
     })
   }
 
+  /**
+   * @method deleteItemAt DocsTODO
+   * @description
+   * @param index
+   */
   deleteItemAt(index: number) {
     this.queryItems.splice(index, 1)
     this.queryItems.forEach((queryItem) => {
@@ -133,6 +175,13 @@ export default class SearchQuery {
     })
   }
 
+  /**
+   * @method setQuery DocsTODO
+   * @description
+   * @param queury
+   * @param cursorPosition
+   * @example
+   */
   setQuery(query: string, cursorPosition: number) {
     this.query = query
     this.cursorPosition = cursorPosition
@@ -141,6 +190,11 @@ export default class SearchQuery {
     this.queryItems = queryItems
   }
 
+  /**
+   * @method setQueryByHTML DocsTODO
+   * @description
+   * @param html
+   */
   setQueryByHTML(html: HTMLElement) {
     this.setQuery(
       html.textContent ? html.textContent : '',
@@ -148,6 +202,11 @@ export default class SearchQuery {
     )
   }
 
+  /**
+   * @method getQueryString DocsTODO
+   * @description
+   * @returns
+   */
   getQueryString() {
     const ret = this.queryItems
       .map(
@@ -160,6 +219,12 @@ export default class SearchQuery {
     return ret
   }
 
+  /**
+   * @method caretPosition DocsTODO
+   * @description
+   * @param htmlElement
+   * @returns
+   */
   caretPosition(htmlElement: HTMLElement): number {
     if (!window.getSelection) {
       return 0
@@ -183,6 +248,13 @@ export default class SearchQuery {
     return caretPosInNode
   }
 
+  /**
+   * @method _parseQuery DocsTODO
+   * @description
+   * @param query
+   * @param cursorPosition
+   * @returns
+   */
   _parseQuery(query: string, cursorPosition: number) {
     query = query.trim().replace(/\u00A0/g, '\u0020')
     const strQuerySplits = query.split('\u0020')
@@ -224,6 +296,13 @@ export default class SearchQuery {
     return { queryItems, queryIndex }
   }
 
+  /**
+   * @method _caretPositionInParentNode DocsTODO
+   * @description
+   * @param node
+   * @param caretPosInNode
+   * @returns
+   */
   _caretPositionInParentNode(node: Node, caretPosInNode: number): number {
     let itemNode = node.parentNode?.firstChild
     let caretPos = caretPosInNode
@@ -235,6 +314,13 @@ export default class SearchQuery {
     return caretPos
   }
 
+  /**
+   * @method _hasAncestor DocsTODO
+   * @description
+   * @param node
+   * @param parentNode
+   * @returns
+   */
   _hasAncestor(node: Node, parentNode: Node) {
     let tempNode: Node | null = node
     do {
diff --git a/components/interactables/Search/SearchUtil.ts b/components/interactables/Search/SearchUtil.ts
index 571d50ab55..1e84514838 100644
--- a/components/interactables/Search/SearchUtil.ts
+++ b/components/interactables/Search/SearchUtil.ts
@@ -143,6 +143,12 @@ const SearchUtil = {
   getCommandMetaList: () => searchCommandMetaList,
   getSearchResultGroupList: () => searchResultGroupList,
   getSearchOrderTypeList: () => searchOrderTypeList,
+  /**
+   * @method getCommandMeta DocsTODO
+   * @description
+   * @param command
+   * @returns
+   */
   getCommandMeta: (command: SearchCommand) => {
     let commandMeta = null
     searchCommandMetaList.every((item) => {
@@ -154,6 +160,12 @@ const SearchUtil = {
     })
     return commandMeta
   },
+  /**
+   * @method getCommandTypeParam DocsTODO
+   * @description
+   * @param command
+   * @returns
+   */
   getCommandTypeParam: (command: SearchCommand) => {
     const commandMeta = SearchUtil.getCommandMeta(command)
     if (!commandMeta) {
@@ -162,6 +174,13 @@ const SearchUtil = {
     const commandType = (commandMeta as SearchCommandMeta).type
     return searchCommandTypeParams[commandType] as SearchCommandTypeParam
   },
+  /**
+   * @method filterSearchRecommendResult DocsTODO
+   * @description
+   * @param recommends
+   * @param queryItem
+   * @returns
+   */
   filterSearchRecommendResult(
     recommends: SearchRecommend,
     queryItem: SearchQueryItem | null
diff --git a/components/interactables/Select/Select.vue b/components/interactables/Select/Select.vue
index c5e8b9e422..c7a29062a0 100644
--- a/components/interactables/Select/Select.vue
+++ b/components/interactables/Select/Select.vue
@@ -65,20 +65,39 @@ export default Vue.extend({
     }
   },
   watch: {
+    /**
+     * @method selected DocsTODO
+     * @description When the component is first created, if the user doesn't have a default value for the select, we set it here
+     * @param newValue
+     * @param oldValue
+     * @example
+     */
     selected(newValue, oldValue) {
-      // When the component is first created, if the user doesn't have a default value for the select, we set it here
       if (!oldValue) {
         this.$data.selectedValue = newValue
       }
     },
   },
   methods: {
+    /**
+     * @method change DocsTODO
+     * @description
+     * @param option
+     * @example
+     */
     change(option: any) {
       if (option.disabled) return
       this.selectedValue = option.value
       this.$emit('change', this.selectedValue)
       this.open = false
     },
+    /**
+     * @method getSelectLabel DocsTODO
+     * @description
+     * @param
+     * @returns
+     * @example
+     */
     getSelectLabel() {
       if (this.selectedValue) {
         const item: any = (this.options as Array<SelectOption>).find(
diff --git a/components/interactables/Switch/Switch.vue b/components/interactables/Switch/Switch.vue
index 27de12b601..a976d74ea7 100644
--- a/components/interactables/Switch/Switch.vue
+++ b/components/interactables/Switch/Switch.vue
@@ -36,6 +36,11 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method toggle DocsTODO
+     * @description
+     * @example
+     */
     toggle() {
       this.$emit('toggle', !this.isEnabled)
     },
diff --git a/components/interactables/Volume/Volume.vue b/components/interactables/Volume/Volume.vue
index 2191b59b5d..8e84c31d7f 100644
--- a/components/interactables/Volume/Volume.vue
+++ b/components/interactables/Volume/Volume.vue
@@ -27,12 +27,24 @@ export default Vue.extend({
   data() {
     return {
       value: this.volume,
+      /**
+       * @method percentageFormatter DocsTODO
+       * @description
+       * @param volumePercentage
+       * @returns
+       * @example
+       */
       percentageFormatter: (volumePercentage) => {
         return volumePercentage + ' %'
       },
     }
   },
   methods: {
+    /**
+     * @method returnValue DocsTODO
+     * @description
+     * @example
+     */
     returnValue() {
       this.$emit('returned-value', this.value)
     },
diff --git a/components/mixins/Swipe/Swipe.ts b/components/mixins/Swipe/Swipe.ts
index ba01ce05a9..bd40ed24e7 100644
--- a/components/mixins/Swipe/Swipe.ts
+++ b/components/mixins/Swipe/Swipe.ts
@@ -3,6 +3,13 @@ export const mobileSwipe = {
     // can add functions here on start-up if needed
   },
   methods: {
+    /**
+     * @method sidebarSwipeHandler DocsTODO
+     * @description
+     * @param currThis
+     * @returns
+     * @example
+     */
     sidebarSwipeHandler(currThis: any) {
       return function (direction: string) {
         if (direction === 'left' && currThis.$device.isMobile) {
diff --git a/components/mixins/UI/ContextMenu.ts b/components/mixins/UI/ContextMenu.ts
index 0567021c02..bfbe7b44cd 100644
--- a/components/mixins/UI/ContextMenu.ts
+++ b/components/mixins/UI/ContextMenu.ts
@@ -5,6 +5,12 @@ export const ContextMenu = {
     ...mapState(['ui']),
   },
   methods: {
+    /**
+     * @method contextMenu
+     * @description Toggles ContextMenu mixin with related component ContextMenu values
+     * @param e Context menu event object
+     * @example v-on:context-menu="contextMenu"
+     */
     contextMenu(e: Event) {
       e.preventDefault()
       const contextMenuStatus = this.ui.contextMenuStatus
diff --git a/components/mixins/UI/Keybinds.ts b/components/mixins/UI/Keybinds.ts
index f01b91cb26..7d3c9fac32 100644
--- a/components/mixins/UI/Keybinds.ts
+++ b/components/mixins/UI/Keybinds.ts
@@ -9,6 +9,11 @@ export const Keybinds = {
     }
   },
   methods: {
+    /**
+     * @method activateKeybinds
+     * @description Activates all keybindings with Mousetrap
+     * @example mounted (){ activateKeybinds() }
+     */
     activateKeybinds() {
       Mousetrap.reset()
       Mousetrap.bind(
@@ -28,25 +33,50 @@ export const Keybinds = {
         this.callActiveChat
       )
     },
+    /**
+     * @method clearKeybinds
+     * @description Unbinds all current keybindings with Mousetrap
+     * @example destroyed (){ clearKeybinds() }
+     */
     clearKeybinds() {
       Mousetrap.reset()
     },
+    /**
+     * @method toggleMute
+     * @description Toggles mute for outgoing audio
+     * @example Mousetrap.bind('ctrl+m', this.toggleMute )
+     */
     toggleMute() {
       const muted = this.$store.state.audio.muted
       if (!muted) this.$Sounds.playSound(Sounds.MUTE)
       else this.$Sounds.playSound(Sounds.UNMUTE)
       this.$store.commit('mute')
     },
+    /**
+     * @method toggleDeafen
+     * @description Toggles deafen for incoming audio
+     * @example Mousetrap.bind('ctrl+d', this.toggleDeafen )
+     */
     toggleDeafen() {
       const deafened = this.$store.state.audio.deafened
       if (!deafened) this.$Sounds.playSound(Sounds.DEAFEN)
       else this.$Sounds.playSound(Sounds.UNDEAFEN)
       this.$store.commit('deafen')
     },
+    /**
+     * @method openSettings
+     * @description Opens setting page
+     * @example Mousetrap.bind('ctrl+s', this.openSettings )
+     */
     openSettings() {
       const showSettings = this.$store.state.ui.showSettings
       this.$store.commit('toggleSettings', !showSettings)
     },
+    /**
+     * @method callActiveChat
+     * @description Makes P2P call to current chat
+     * @example Mousetrap.bind('ctrl+c', this.callActiveChat )
+     */
     callActiveChat() {},
   },
 }
diff --git a/components/mixins/UserPermissions/index.ts b/components/mixins/UserPermissions/index.ts
index e8c7bad283..b94dffa893 100644
--- a/components/mixins/UserPermissions/index.ts
+++ b/components/mixins/UserPermissions/index.ts
@@ -27,6 +27,13 @@ interface Device {
   value: string
 }
 
+/**
+ * @method formatDevices DocsTODO
+ * @description
+ * @param devices
+ * @returns
+ * @example
+ */
 const formatDevices = (devices: any[]) => {
   const responsearray: Device[] = []
   devices.forEach((device) => {
@@ -43,6 +50,13 @@ const formatDevices = (devices: any[]) => {
   })
   return responsearray
 }
+
+/**
+ * @method getRTC
+ * @description Gets users RTC info (devices, permissions, browser, etc.)
+ * @returns Promise that resolves to responseObject with RTC info
+ * @example const UserPermissions = await this.$props.getRTC()
+ */
 const getRTC = async () => {
   const promise = await new Promise((resolve) => {
     const responseObject: permissionObject = {
@@ -97,11 +111,24 @@ export const UserPermissions = {
     // can add functions here on start-up if needed
   },
   methods: {
+    /**
+     * @method getUserPermissions DocsTODO
+     * @description Uses getRTC method to return users RTC info
+     * @returns Object with users RTC info
+     * @example
+     */
     async getUserPermissions(): Promise<any> {
       // Todo: Firefox does not allow querying for Microphone https://github.com/mozilla/standards-positions/issues/19, and is spotty in it's implementation of the permissions api
       // https://bugzilla.mozilla.org/show_bug.cgi?id=1609427
       return await getRTC()
     },
+    /**
+     * @method requestUserPermissions DocsTODO
+     * @description Requests user permission to access their media devices such as webcams and microphones
+     * @param permission Object with contraints for which permissions to request
+     * @returns Promise that resolves to a MediaStream object
+     * @example
+     */
     async requestUserPermissions(
       permission: PermissionRequestOptions
     ): Promise<any> {
diff --git a/components/tailored/commands/preview/Preview.vue b/components/tailored/commands/preview/Preview.vue
index 7f141a6822..7632652ade 100644
--- a/components/tailored/commands/preview/Preview.vue
+++ b/components/tailored/commands/preview/Preview.vue
@@ -19,6 +19,12 @@ export default Vue.extend({
   },
   computed: {
     ...mapState(['ui']),
+    /**
+     * @method hasCommand DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     hasCommand() {
       return (
         containsCommand(this.ui.chatbarContent) &&
@@ -29,9 +35,21 @@ export default Vue.extend({
         )
       )
     },
+    /**
+     * @method command DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     command() {
       return parseCommand(this.ui.chatbarContent)
     },
+    /**
+     * @method commands DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     commands() {
       return commands.filter((cmd) =>
         cmd.name.startsWith(
@@ -41,6 +59,12 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method completeCommand DocsTODO
+     * @description
+     * @param command
+     * @example
+     */
     completeCommand(command: CurrentCommand) {
       this.$store.commit('chatbarContent', `/${command.name}`)
     },
diff --git a/components/tailored/core/chatbar/Chatbar.vue b/components/tailored/core/chatbar/Chatbar.vue
index 22dc3cde34..6dd36874ec 100644
--- a/components/tailored/core/chatbar/Chatbar.vue
+++ b/components/tailored/core/chatbar/Chatbar.vue
@@ -45,9 +45,24 @@ export default Vue.extend({
   },
   computed: {
     ...mapState(['ui']),
+    /**
+     * Computes the amount of characters left
+     */
+    /**
+     * @method charlimit DocsTODO
+     * @description Checks if current text is longer than the max character limit
+     * @returns Boolean based on if the current text length is longer than the max character limit
+     * @example
+     */
     charlimit() {
       return this.$data.text.length > this.$data.maxChars
     },
+    /**
+     * @method hasCommand DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     hasCommand() {
       return (
         containsCommand(this.ui.chatbarContent) &&
@@ -58,6 +73,12 @@ export default Vue.extend({
         )
       )
     },
+    /**
+     * @method isValidCommand DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     isValidCommand() {
       const currentText = parseCommand(
         this.ui.chatbarContent
@@ -68,9 +89,21 @@ export default Vue.extend({
       return currentCommand && isArgsValid(currentCommand, currentArgs)
     },
     value: {
+      /**
+       * @method get
+       * @description Gets chatbars current text
+       * @returns String of chatbars current text
+       * @example const currText = this.get()
+       */
       get() {
         return this.ui.chatbarContent
       },
+      /**
+       * @method set
+       * @description Sets current chatbar text to new value
+       * @param val Value to set the chatbar content to
+       * @example set('This is the new chatbar content')
+       */
       set(val: string) {
         this.$store.commit('chatbarContent', val)
         this.$data.text = val
@@ -85,10 +118,18 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method toggleEnhancers
+     * @description Toggles enhancers by commiting the opposite of it's current value (this.ui.showEnhancers) to toggleEnhancers in state
+     * @example v-on:click="toggleEnhancers"
+     */
     toggleEnhancers() {
       this.$store.commit('toggleEnhancers', !this.ui.showEnhancers)
     },
     /**
+     * @method autoGrow DocsTODO
+     * @description When textarea for chat is changed, autoGrow handles chat section to grow and allow multi-line display
+     * @example
      * When Shift+Enter is pressed, this controls chatbar's height so that user can input multiple lines.
      * This is called after the typed inputed are processed in order to display markdown expression.
      */
@@ -115,9 +156,11 @@ export default Vue.extend({
       messageBox.scrollTop = messageBox.scrollHeight
     },
     /**
-     * Called from handleInputKeydown function when normal key events are fired for typing in chatbar.
+     * @method handleInputChange DocsTODO
+     * @description Called from handleInputKeydown function when normal key events are fired for typing in chatbar.
      * Decodes current HTML content of chatbar to plain text and Encodes plain text to Markdown HTML expression.
      * Once replaced current HTML content, move the caret to proper position.
+     * @example
      */
     handleInputChange(caretPosition: number | null) {
       const messageBox = this.$refs.messageuser as HTMLElement
@@ -148,9 +191,13 @@ export default Vue.extend({
       this.autoGrow()
     },
     /**
-     * Called from chatbar's keydown event to process all key events for typing in chatbar.
+     * @method handleInputKeydown DocsTODO
+     * @description Called from chatbar's keydown event to process all key events for typing in chatbar.
      * This interacts with handleInputChange in order to convert typed input to markdown expression.
      * This controls the caret position when Backspace, Spacebar is pressed.
+     * @param event Keydown event object
+     * @returns Boolean
+     * @example
      */
     handleInputKeydown(event: KeyboardEvent) {
       const messageBox = this.$refs.messageuser as HTMLElement
@@ -214,7 +261,10 @@ export default Vue.extend({
       return true
     },
     /**
-     * Called when user sends message by pressing Enter.
+     * @method sendMessage
+     * @description Sends message by calling the sendMessage action with current data and
+     * then setting all related feilds to their default (empty)
+     * @example v-on:click="sendMessage"
      */
     sendMessage() {
       this.$store.dispatch('sendMessage', {
diff --git a/components/tailored/core/chatbar/reply/Reply.vue b/components/tailored/core/chatbar/reply/Reply.vue
index 14ef99dd5d..177175e3a6 100644
--- a/components/tailored/core/chatbar/reply/Reply.vue
+++ b/components/tailored/core/chatbar/reply/Reply.vue
@@ -15,6 +15,11 @@ export default Vue.extend({
     ...mapState(['ui']),
   },
   methods: {
+    /**
+     * @method setReplyChatbarContent
+     * @description Adds message reply by commiting chatbar content to setReplyChatbarContent in state
+     * @example @click="setReplyChatbarContent"
+     */
     setReplyChatbarContent() {
       this.$store.commit('setReplyChatbarContent', {
         id: '',
diff --git a/components/tailored/core/fileupload/FileUpload.vue b/components/tailored/core/fileupload/FileUpload.vue
index 0c471d2d44..fe3897cf86 100644
--- a/components/tailored/core/fileupload/FileUpload.vue
+++ b/components/tailored/core/fileupload/FileUpload.vue
@@ -32,7 +32,10 @@ export default Vue.extend({
   },
   methods: {
     /**
-     * Triggered when a file is changed on the input
+     * @method handleFile
+     * @description Handles file in event object by NSFW checking and then loading it. Triggered when a file is changed on the input.
+     * @param event Input event object
+     * @example <input @change="handleFile" />
      */
     async handleFile(event: any) {
       this.$data.file = event.target.files[0]
@@ -42,7 +45,10 @@ export default Vue.extend({
       this.loadPicture(this.$data.file)
     },
     /**
-     * Load a picture into a data URL push to data
+     * @method loadPicture
+     * @description Creates data URL from file and pushes it to url in the components data object (this.$data.url = the new created data URL)
+     * @param file File to load
+     * @example this.loadPicture(this.$data.file)
      */
     loadPicture(file: File) {
       if (!file) return
@@ -54,8 +60,12 @@ export default Vue.extend({
       reader.readAsDataURL(file)
     },
     /**
-     * Return if a file has an image extension
+     * @method isEmbedableImage
+     * @description Uses Regex to check if a files filename has a valid extension
      * Potential image extensions pulled from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+     * @param filename A files filename
+     * @returns Boolean based on if the filename has a valid extension or not
+     * @example v-if="isEmbedableImage(file.name)"
      */
     isEmbedableImage(filename: string): boolean {
       // eslint-disable-next-line prefer-regex-literals
@@ -65,9 +75,10 @@ export default Vue.extend({
       return imageFormatsRegex.test(filename.toLowerCase())
     },
     /**
-     * Clear local data
-     * TODO: Clear input field, this currently breaks
-     * when you upload the same file after cancelling
+     * @method cancelUpload
+     * @description Cancels file upload by setting file and url in local data to false
+     * TODO: Clear input field, this currently breaks when you upload the same file after cancelling
+     * @example @click="cancelUpload"
      */
     cancelUpload() {
       this.$data.file = false
diff --git a/components/tailored/core/group/Group.vue b/components/tailored/core/group/Group.vue
index febc1f64a7..d15a705cb5 100644
--- a/components/tailored/core/group/Group.vue
+++ b/components/tailored/core/group/Group.vue
@@ -37,6 +37,12 @@ export default Vue.extend({
     testFunc(): void {
       console.log('User Func')
     },
+    /**
+     * @method navigateToGroup
+     * @description Navigates to a groups page by pushing "/chat/groups/" + groups address to router
+     * @param address The groups address you'd like to route to
+     * @example v-on:click="navigateToGroup(group.address)"
+     */
     navigateToGroup(address: string) {
       this.$router.push(`/chat/groups/${address}`)
     },
diff --git a/components/tailored/core/group/aside/Aside.vue b/components/tailored/core/group/aside/Aside.vue
index fd8dbcdfa1..c3e9fb44fc 100644
--- a/components/tailored/core/group/aside/Aside.vue
+++ b/components/tailored/core/group/aside/Aside.vue
@@ -32,6 +32,12 @@ export default Vue.extend({
     },
   },
   computed: {
+    /**
+     * @method members DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     members() {
       const filterFriends = (friends: User[], members: string[]) => {
         return friends.filter((friend: User) =>
diff --git a/components/tailored/core/imageCropper/ImageCropper.vue b/components/tailored/core/imageCropper/ImageCropper.vue
index 7950556382..e24c10a65e 100644
--- a/components/tailored/core/imageCropper/ImageCropper.vue
+++ b/components/tailored/core/imageCropper/ImageCropper.vue
@@ -42,6 +42,11 @@ export default Vue.extend({
     })
   },
   methods: {
+    /**
+     * @method crop DocsTODO
+     * @description
+     * @example
+     */
     crop() {
       // Options can be updated.
       // Current option will return a base64 version of the uploaded image with a size of 600px X 450px.
diff --git a/components/tailored/core/media/Media.vue b/components/tailored/core/media/Media.vue
index ea1260111e..da52b98105 100644
--- a/components/tailored/core/media/Media.vue
+++ b/components/tailored/core/media/Media.vue
@@ -166,6 +166,12 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method volumeControlValueChange DocsTODO
+     * @description Changes volume by setting new value using $Sounds.changeLevels and commiting new value to setVolume in state
+     * @param volume New volume level
+     * @example
+     */
     volumeControlValueChange(volume: number) {
       this.$Sounds.changeLevels(volume / 100)
       this.$store.commit('setVolume', volume)
diff --git a/components/tailored/core/media/actions/Actions.vue b/components/tailored/core/media/actions/Actions.vue
index 349232a91c..6ba25611a3 100644
--- a/components/tailored/core/media/actions/Actions.vue
+++ b/components/tailored/core/media/actions/Actions.vue
@@ -28,6 +28,11 @@ export default Vue.extend({
     ...mapState(['audio', 'video']),
   },
   methods: {
+    /**
+     * @method toggleMute
+     * @description Toggles mute for outgoing audio
+     * @example
+     */
     toggleMute() {
       const muted = this.audio.muted
       if (!muted) this.$Sounds.playSound(Sounds.MUTE)
@@ -35,6 +40,11 @@ export default Vue.extend({
 
       this.$store.commit('mute')
     },
+    /**
+     * @method toggleVideo
+     * @description Toggles outgoing video
+     * @example
+     */
     toggleVideo() {
       const videoDisabled = this.video.disabled
       if (!videoDisabled) this.$Sounds.playSound(Sounds.DEAFEN)
diff --git a/components/tailored/core/media/actions/settings/Settings.vue b/components/tailored/core/media/actions/settings/Settings.vue
index c16a84fa92..a60ad4bc66 100644
--- a/components/tailored/core/media/actions/settings/Settings.vue
+++ b/components/tailored/core/media/actions/settings/Settings.vue
@@ -60,14 +60,32 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method toggleMenu DocsTODO
+     * @description
+     * @param event
+     * @example
+     */
     toggleMenu(event: Event): void {
       this.$data.menuOpen = !this.$data.menuOpen
       event.stopPropagation()
     },
+    /**
+     * @method hideMenu DocsTODO
+     * @description
+     * @param event
+     * @example
+     */
     hideMenu(event: Event): void {
       this.$data.menuOpen = !this.$data.menuOpen
       event.stopPropagation()
     },
+    /**
+     * @method switchMenuItem DocsTODO
+     * @description
+     * @param event
+     * @example
+     */
     switchMenuItem(event: Event): void {
       const menu = this.$refs.menu as HTMLElement
       const target = event.target as HTMLElement
@@ -114,6 +132,11 @@ export default Vue.extend({
       }
     },
     ...UserPermissions.methods,
+    /**
+     * @method setupDefaults DocsTODO
+     * @description
+     * @example
+     */
     async setupDefaults() {
       const permissionsObject: any = await this.getUserPermissions()
       // Toggles the show/hide on the button to request permissions
@@ -149,6 +172,11 @@ export default Vue.extend({
         )
       }
     },
+    /**
+     * @method enableAudio DocsTODO
+     * @description
+     * @example
+     */
     async enableAudio() {
       // Check to see if the user has permission
       try {
diff --git a/components/tailored/core/media/actions/volume/Volume.vue b/components/tailored/core/media/actions/volume/Volume.vue
index c5ff6ad9bf..59156d9505 100644
--- a/components/tailored/core/media/actions/volume/Volume.vue
+++ b/components/tailored/core/media/actions/volume/Volume.vue
@@ -52,9 +52,20 @@ export default Vue.extend({
     document.removeEventListener('click', this.hideSlider)
   },
   methods: {
+    /**
+     * @method toggleSlider DocsTODO
+     * @description
+     * @example
+     */
     toggleSlider() {
       this.$data.showSlider = !this.$data.showSlider
     },
+    /**
+     * @method hideSlider DocsTODO
+     * @description
+     * @param event
+     * @example
+     */
     hideSlider(event: Event) {
       if (
         (this.$refs.volumegroup as Element).contains(event.target as Node) ===
@@ -63,6 +74,12 @@ export default Vue.extend({
         this.$data.showSlider = false
       }
     },
+    /**
+     * @method recievedValue DocsTODO
+     * @description
+     * @param volume
+     * @example
+     */
     receivedValue(volume: Number) {
       this.$emit('volumeControlValueChange', volume)
     },
diff --git a/components/tailored/core/media/heading/Heading.vue b/components/tailored/core/media/heading/Heading.vue
index f25cd05b2d..b392df1d98 100644
--- a/components/tailored/core/media/heading/Heading.vue
+++ b/components/tailored/core/media/heading/Heading.vue
@@ -18,6 +18,11 @@ export default Vue.extend({
     this.$store.commit('fullscreen', false)
   },
   methods: {
+    /**
+     * @method toggleFullscreen
+     * @description Toggles fullscreen by commiting the opposite of it's current value (this.ui.fullscreen) to fullscreen in state
+     * @example @click="toggleFullscreen"
+     */
     toggleFullscreen() {
       this.$store.commit('fullscreen', !this.ui.fullscreen)
     },
diff --git a/components/tailored/core/servers/create/Create.vue b/components/tailored/core/servers/create/Create.vue
index 89615346ff..d2ede24726 100644
--- a/components/tailored/core/servers/create/Create.vue
+++ b/components/tailored/core/servers/create/Create.vue
@@ -26,10 +26,20 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method toggleCropper DocsTODO
+     * @description
+     * @example
+     */
     toggleCropper() {
       this.showCropper = !this.showCropper
     },
-
+    /**
+     * @method selectImage DocsTODO
+     * @description
+     * @param e
+     * @example
+     */
     selectImage(e) {
       if (e.target.value !== null) {
         const files = e.target.files || e.dataTransfer.files
@@ -46,12 +56,22 @@ export default Vue.extend({
         reader.readAsDataURL(files[0])
       }
     },
-
+    /**
+     * @method setCroppedImage DocsTODO
+     * @description
+     * @param image
+     * @example
+     */
     setCroppedImage(image) {
       this.croppedImage = image
       this.$refs.file.value = null
     },
-
+    /**
+     * @method confirm DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     confirm() {
       if (this.name < 5) {
         this.error = 'Server name must be at least 5 characters.'
diff --git a/components/tailored/core/sidebar/controls/Controls.vue b/components/tailored/core/sidebar/controls/Controls.vue
index c04c1dc907..3fecd05d72 100644
--- a/components/tailored/core/sidebar/controls/Controls.vue
+++ b/components/tailored/core/sidebar/controls/Controls.vue
@@ -26,6 +26,11 @@ export default Vue.extend({
     ...mapState(['audio', 'video']),
   },
   methods: {
+    /**
+     * @method toggleMute DocsTODO
+     * @description
+     * @example
+     */
     toggleMute() {
       const muted = this.audio.muted
       if (!muted) this.$Sounds.playSound(Sounds.MUTE)
@@ -33,6 +38,11 @@ export default Vue.extend({
 
       this.$store.commit('mute')
     },
+    /**
+     * @method toggleDeafen DocsTODO
+     * @description
+     * @example
+     */
     toggleDeafen() {
       const deafened = this.audio.deafened
       if (!deafened) this.$Sounds.playSound(Sounds.DEAFEN)
@@ -40,6 +50,11 @@ export default Vue.extend({
 
       this.$store.commit('deafen')
     },
+    /**
+     * @method toggleVideo DocsTODO
+     * @description
+     * @example
+     */
     toggleVideo() {
       const videoDisabled = this.video.disabled
       if (!videoDisabled) this.$Sounds.playSound(Sounds.DEAFEN)
diff --git a/components/tailored/core/statusbar/Statusbar.vue b/components/tailored/core/statusbar/Statusbar.vue
index f3aada4a9e..9b3cb62819 100644
--- a/components/tailored/core/statusbar/Statusbar.vue
+++ b/components/tailored/core/statusbar/Statusbar.vue
@@ -76,18 +76,42 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method handleChange DocsTODO
+     * @description
+     * @param value
+     * @param item
+     * @example
+     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     handleChange(value: string, item: SearchQueryItem) {
       // console.log('change-search-input:', value, item)
     },
+    /**
+     * @method handleSearch DocsTODO
+     * @description
+     * @param value
+     * @param item
+     * @example
+     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     handleSearch(value: string, items: SearchQueryItem[]) {
       this.showSearchResult = true
       this.searchQuery = value
     },
+    /**
+     * @method toggleSearchResult DocsTODO
+     * @description
+     * @example
+     */
     toggleSearchResult() {
       this.showSearchResult = !this.showSearchResult
     },
+    /**
+     * @method toggleMarketPlace DocsTODO
+     * @description
+     * @example
+     */
     toggleMarketPlace() {
       this.$store.commit('toggleModal', {
         name: 'showMarketPlace',
diff --git a/components/tailored/core/user/User.vue b/components/tailored/core/user/User.vue
index 3ae566d9d0..20853f1769 100644
--- a/components/tailored/core/user/User.vue
+++ b/components/tailored/core/user/User.vue
@@ -49,6 +49,12 @@ export default Vue.extend({
     testFunc() {
       console.log('User Func')
     },
+    /**
+     * @method navigateToUser
+     * @description Navigates to chat with specific user by pushing "/chat/direct/" + users ID to the router
+     * Pretty sure this is just a placeholder for what will be the actual function?
+     * @example ---
+     */
     navigateToUser() {
       this.$router.push('/chat/direct')
     },
diff --git a/components/tailored/core/user/create/Create.vue b/components/tailored/core/user/create/Create.vue
index 600dd741e4..f4196fe4bc 100644
--- a/components/tailored/core/user/create/Create.vue
+++ b/components/tailored/core/user/create/Create.vue
@@ -28,10 +28,20 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method toggleCropper DocsTODO
+     * @description
+     * @example
+     */
     toggleCropper() {
       this.showCropper = !this.showCropper
     },
-
+    /**
+     * @method selectIamge DocsTODO
+     * @description
+     * @param e
+     * @example
+     */
     selectImage(e: Event) {
       const target = e.target as HTMLInputElement
       if (target.value === null) return
@@ -50,7 +60,13 @@ export default Vue.extend({
 
       reader.readAsDataURL(files[0])
     },
-
+    /**
+     * @method setCroppedImage
+     * @description
+     * @param image
+     * @returns
+     * @example
+     */
     setCroppedImage(image: string) {
       this.croppedImage = image
 
@@ -60,7 +76,12 @@ export default Vue.extend({
         fileInputRef.value = ''
       }
     },
-
+    /**
+     * @method confirm DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     confirm() {
       if (this.name.length < 5) {
         this.error = 'Username name must be at least 5 characters.'
diff --git a/components/tailored/files/controls/Controls.vue b/components/tailored/files/controls/Controls.vue
index 22346b3305..88796fcbce 100644
--- a/components/tailored/files/controls/Controls.vue
+++ b/components/tailored/files/controls/Controls.vue
@@ -26,9 +26,21 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method show
+     * @description Shows modals by commiting the modal name with status as true to toggleModal in state
+     * @param modalName Name of modal to show
+     * @example v-on:click="show('newfolder')"
+     */
     show(modalName: String) {
       this.$store.commit('toggleModal', { name: modalName, state: true })
     },
+    /**
+     * @method hide
+     * @description Hides modals by commiting the modal name with status as false to toggleModal in state
+     * @param modalName Name of modal to hide
+     * @example v-on:click="hide('newfolder')"
+     */
     hide(modalName: String) {
       this.$store.commit('toggleModal', { name: modalName, state: false })
     },
diff --git a/components/tailored/files/file/File.vue b/components/tailored/files/file/File.vue
index 81328ef269..8c4b27af1e 100644
--- a/components/tailored/files/file/File.vue
+++ b/components/tailored/files/file/File.vue
@@ -29,6 +29,13 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method isImage
+     * @description Checks if files filetype complies with Satellites accepted image types
+     * @param fileType Files MIME type (a.k.a filetype)
+     * @returns Boolean based on if the current image complies with Satellites accepted image types
+     * @example
+     */
     isImage(filetype: string) {
       const acceptableImages = ['image/png', 'image/jpg']
       return acceptableImages.includes(filetype)
diff --git a/components/tailored/files/filepath/Filepath.vue b/components/tailored/files/filepath/Filepath.vue
index ef0f5c226e..6fb9cf9b9a 100644
--- a/components/tailored/files/filepath/Filepath.vue
+++ b/components/tailored/files/filepath/Filepath.vue
@@ -37,6 +37,13 @@ export default Vue.extend({
     /**
      * Gets the data path attribute and manually updates parent path
      */
+    /**
+     * @method jumpTo DocsTODO
+     * @description
+     * @param e
+     * @returns
+     * @example
+     */
     jumpTo(e: Event | any) {
       this.setPath(JSON.parse(e.currentTarget.getAttribute('data-self-path')))
     },
diff --git a/components/tailored/files/grid/Grid.vue b/components/tailored/files/grid/Grid.vue
index 928596c398..eb9e84e35f 100644
--- a/components/tailored/files/grid/Grid.vue
+++ b/components/tailored/files/grid/Grid.vue
@@ -26,6 +26,13 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method handle DocsTODO
+     * @description
+     * @param item
+     * @returns
+     * @example
+     */
     handle(item: FileType | Folder): void {
       const hasChildren = ((<Folder>item).children)
       if (hasChildren) {
diff --git a/components/tailored/files/list/List.vue b/components/tailored/files/list/List.vue
index 8791b066c3..c0773d2ef5 100644
--- a/components/tailored/files/list/List.vue
+++ b/components/tailored/files/list/List.vue
@@ -48,6 +48,12 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method handle DocsTODO
+     * @description 
+     * @param item
+     * @example
+     */
     handle(item: FileType | Folder): void {
       const hasChildren = ((<Folder>item).children)
       if (hasChildren) {
diff --git a/components/tailored/files/topbar/Topbar.vue b/components/tailored/files/topbar/Topbar.vue
index ce0b17a1e0..3fc930a899 100644
--- a/components/tailored/files/topbar/Topbar.vue
+++ b/components/tailored/files/topbar/Topbar.vue
@@ -24,12 +24,25 @@ export default Vue.extend({
     ...mapState(['ui']),
   },
   methods: {
+    /**
+     * @method createFolder DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     createFolder() {
       // shows what was in the user's input for a Folder Name
       // console.log(this.$data.text)
       // hides the modal that the button is displayed on when pressed
       this.hide('newfolder')
     },
+    /**
+     * @method hide DocsTODO
+     * @description
+     * @param modalName
+     * @returns
+     * @example
+     */
     hide(modalName: String) {
       this.$store.commit('toggleModal', { name: modalName, state: false })
     },
diff --git a/components/tailored/files/uploader/Uploader.vue b/components/tailored/files/uploader/Uploader.vue
index f072e7597c..57d3cf7e20 100644
--- a/components/tailored/files/uploader/Uploader.vue
+++ b/components/tailored/files/uploader/Uploader.vue
@@ -41,6 +41,13 @@ export default Vue.extend({
      * Return if a file has an image extension
      * Potential image extensions pulled from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
      */
+    /**
+     * @method isEmbedableImage DocsTODO
+     * @description
+     * @param filename
+     * @returns
+     * @example
+     */
     isEmbedableImage(filename: string): boolean {
       // eslint-disable-next-line prefer-regex-literals
       const imageFormatsRegex = new RegExp(
diff --git a/components/tailored/files/view/View.vue b/components/tailored/files/view/View.vue
index ff4a0504fb..f1acd12dc3 100644
--- a/components/tailored/files/view/View.vue
+++ b/components/tailored/files/view/View.vue
@@ -29,6 +29,13 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method open DocsTODO
+     * @description
+     * @param location
+     * @returns
+     * @example
+     */
     open(location: string): void {
       window.open(location)
     },
diff --git a/components/tailored/files/viewSwitcher/ViewSwitcher.vue b/components/tailored/files/viewSwitcher/ViewSwitcher.vue
index 3bb34323f5..11a8c73224 100644
--- a/components/tailored/files/viewSwitcher/ViewSwitcher.vue
+++ b/components/tailored/files/viewSwitcher/ViewSwitcher.vue
@@ -21,6 +21,13 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method switchView DocsTODO
+     * @description
+     * @param type
+     * @returns
+     * @example
+     */
     switchView(type: 'grid' | 'list') {
       this.$data.view = type
       this.changeView(type)
diff --git a/components/tailored/marketplace/Marketplace.vue b/components/tailored/marketplace/Marketplace.vue
index 8fb6966624..7430abb8fc 100644
--- a/components/tailored/marketplace/Marketplace.vue
+++ b/components/tailored/marketplace/Marketplace.vue
@@ -29,6 +29,13 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method changeSubject DocsTODO
+     * @description
+     * @param subject
+     * @returns
+     * @example
+     */
     changeSubject(subject: String) {
       console.log(subject)
     },
diff --git a/components/tailored/marketplace/filterbox/Filterbox.vue b/components/tailored/marketplace/filterbox/Filterbox.vue
index 65ff1ef18a..9bae8439b1 100644
--- a/components/tailored/marketplace/filterbox/Filterbox.vue
+++ b/components/tailored/marketplace/filterbox/Filterbox.vue
@@ -22,9 +22,19 @@ export default Vue.extend({
   },
   computed: {},
   methods: {
+    /**
+     * @method toggleDrop DocsTODO
+     * @description
+     * @example
+     */
     toggleDrop() {
       this.showDrop = !this.showDrop
     },
+    /**
+     * @method hideDrop DocsTODO
+     * @description
+     * @example
+     */
     hideDrop() {
       this.showDrop = false
     },
diff --git a/components/tailored/marketplace/sidebar/Sidebar.vue b/components/tailored/marketplace/sidebar/Sidebar.vue
index ec095c70dd..470259803d 100644
--- a/components/tailored/marketplace/sidebar/Sidebar.vue
+++ b/components/tailored/marketplace/sidebar/Sidebar.vue
@@ -57,6 +57,12 @@ export default Vue.extend({
     })
   },
   methods: {
+    /**
+     * @method clickCategory DocsTODO
+     * @description
+     * @param item
+     * @example
+     */
     clickCategory(item: CategoryTreeItem) {
       if (item.children.length > 0) {
         item.collapsed = !item.collapsed
diff --git a/components/tailored/messaging/enhancers/Enhancers.vue b/components/tailored/messaging/enhancers/Enhancers.vue
index ab3459f151..7f69a4d58e 100644
--- a/components/tailored/messaging/enhancers/Enhancers.vue
+++ b/components/tailored/messaging/enhancers/Enhancers.vue
@@ -32,6 +32,13 @@ export default Vue.extend({
      * Adds emoji to current text input
      * (emoji: any) Comes from <picker/> select event
      */
+    /**
+     * @method addEmoji
+     * @description Adds emoji to either the users current chatbar or a messages emoji reactions depending on state of this.ui.settingReaction.status
+     * TODO: Change reactor in dispatch addReaction to current users name instead of 'Jpanay'
+     * @param emoji Emoji-mart emoji event object
+     * @example v-on:select="addEmoji"
+     */
     addEmoji(emoji: any) {
       if (this.ui.settingReaction.status) {
         this.$store.dispatch('addReaction', {
@@ -49,9 +56,20 @@ export default Vue.extend({
         )
       }
     },
+    /**
+     * @method setRoute DocsTODO
+     * @description
+     * @param route
+     * @example
+     */
     setRoute(route: string) {
       this.$data.route = route
     },
+    /**
+     * @method toggleEnhancers DocsTODO
+     * @description Toggles enhancers by commiting the opposite of it's current value (this.ui.showEnhancers) to toggleEnhancers in state
+     * @example v-on:click="toggleEnhancers"
+     */
     toggleEnhancers() {
       this.$store.commit('toggleEnhancers', !this.ui.showEnhancers)
       if (this.ui.settingReaction.status) {
diff --git a/components/tailored/messaging/group/Group.vue b/components/tailored/messaging/group/Group.vue
index 366aa08461..0ba51e218a 100644
--- a/components/tailored/messaging/group/Group.vue
+++ b/components/tailored/messaging/group/Group.vue
@@ -12,6 +12,13 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method showQuickProfile
+     * @description Shows quickprofile component for user by setting quickProfile to true in state and setQuickProfilePosition
+     * to the current group components click event data
+     * @param e Event object from group component click
+     * @example v-on:click="showQuickProfile"
+     */
     showQuickProfile(e: Event) {
       this.$store.commit('setQuickProfilePosition', e)
       this.$store.commit('quickProfile', true)
diff --git a/components/tailored/messaging/message/Message.vue b/components/tailored/messaging/message/Message.vue
index d2c7006884..e498bdf50b 100644
--- a/components/tailored/messaging/message/Message.vue
+++ b/components/tailored/messaging/message/Message.vue
@@ -94,9 +94,19 @@ export default Vue.extend({
     testFunc() {
       console.log('Message Func Testing ' + this.$data.disData)
     },
+    /**
+     * @method mouseOver DocsTODO
+     * @description
+     * @example
+     */
     mouseOver() {
       this.$data.messageHover = !this.$data.messageHover
     },
+    /**
+     * @method setReplyChatbarContent DocsTODO
+     * @description
+     * @example
+     */
     setReplyChatbarContent() {
       const { id, type, payload } = this.$props.message
       let finalPayload = payload
@@ -110,6 +120,11 @@ export default Vue.extend({
         from: this.$props.from,
       })
     },
+    /**
+     * @method emojiReaction DocsTODO
+     * @description
+     * @example
+     */
     emojiReaction() {
       this.$store.commit('settingReaction', {
         status: true,
diff --git a/components/tailored/messaging/message/reactions/Reactions.vue b/components/tailored/messaging/message/reactions/Reactions.vue
index d45c3ba765..7fa4cea242 100644
--- a/components/tailored/messaging/message/reactions/Reactions.vue
+++ b/components/tailored/messaging/message/reactions/Reactions.vue
@@ -46,6 +46,11 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method emojiReaction DocsTODO
+     * @description
+     * @example
+     */
     emojiReaction() {
       this.$store.commit('settingReaction', {
         status: true,
@@ -55,6 +60,12 @@ export default Vue.extend({
       })
       this.$store.commit('toggleEnhancers', true)
     },
+    /**
+     * @method quickReaction DocsTODO
+     * @description
+     * @param emoji
+     * @example
+     */
     quickReaction(emoji: String) {
       this.$store.dispatch('addReaction', {
         emoji,
@@ -64,9 +75,22 @@ export default Vue.extend({
         replyID: this.$props.reply.id,
       })
     },
+    /**
+     * @method toggleReactors DocsTODO
+     * @description
+     * @param emoji
+     * @example
+     */
     toggleReactors(emoji: any) {
       this.$data.hovering = emoji
     },
+    /**
+     * @method didIReact DocsTODO
+     * @description
+     * @param reaction
+     * @returns
+     * @example
+     */
     didIReact(reaction: any) {
       return reaction.reactors.includes(this.$mock.user.name)
     },
diff --git a/components/tailored/messaging/message/reply/Reply.vue b/components/tailored/messaging/message/reply/Reply.vue
index b371ca49cf..262481e643 100644
--- a/components/tailored/messaging/message/reply/Reply.vue
+++ b/components/tailored/messaging/message/reply/Reply.vue
@@ -67,10 +67,21 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method mouseOver DocsTODO
+     * @description
+     * @param replyId
+     * @example
+     */
     mouseOver(replyId: string) {
       this.$data.replyHover = replyId
     },
-
+    /**
+     * @method emojiReaction DocsTODO
+     * @description
+     * @param replyId
+     * @example
+     */
     emojiReaction(replyID: string) {
       this.$store.commit('settingReaction', {
         status: true,
@@ -80,10 +91,21 @@ export default Vue.extend({
       })
       this.$store.commit('toggleEnhancers', true)
     },
+    /**
+     * @method showQuickProfile DocsTODO
+     * @description
+     * @param e
+     * @example
+     */
     showQuickProfile(e: Event) {
       this.$store.commit('setQuickProfilePosition', e)
       this.$store.commit('quickProfile', true)
     },
+    /**
+     * @method toggleReplies DocsTODO
+     * @description
+     * @example
+     */
     toggleReplies() {
       this.$data.showReplies = !this.$data.showReplies
     },
diff --git a/components/tailored/servers/sidebar/channels/Channels.vue b/components/tailored/servers/sidebar/channels/Channels.vue
index 7d4e78d81c..8c3cde20c4 100644
--- a/components/tailored/servers/sidebar/channels/Channels.vue
+++ b/components/tailored/servers/sidebar/channels/Channels.vue
@@ -8,23 +8,29 @@ import { mapState } from 'vuex'
 
 export default Vue.extend({
   methods: {
-    setActiveChannel (ch: Channel) {
+    /**
+     * @method setActiveChannel DocsTODO
+     * @description
+     * @param ch
+     * @example
+     */
+    setActiveChannel(ch: Channel) {
       const nonText = ['voice', 'label']
       if (!nonText.includes(ch.type)) {
         this.$store.commit('setActiveChannel', ch)
       } else {
         // TODO: Join voice channel
       }
-    }
+    },
   },
   computed: {
     ...mapState(['channel']),
   },
-  mounted () {
+  mounted() {
     if (!this.channel) {
       this.$store.commit('setActiveChannel', this.$mock.server.info.channels['0'])
     }
-  }
+  },
 })
 </script>
 
diff --git a/components/tailored/servers/sidebar/channels/channel/Channel.vue b/components/tailored/servers/sidebar/channels/channel/Channel.vue
index db11782302..322edf5452 100644
--- a/components/tailored/servers/sidebar/channels/channel/Channel.vue
+++ b/components/tailored/servers/sidebar/channels/channel/Channel.vue
@@ -18,6 +18,12 @@ export default {
     ...mapState(['channel']),
   },
   methods: {
+    /**
+     * @method getChannelClass DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     getChannelClass() {
       return this.channel && this.channel.id === this.localChannel.id
         ? 'active'
diff --git a/components/tailored/servers/sidebar/channels/group/Group.vue b/components/tailored/servers/sidebar/channels/group/Group.vue
index 9de14b6f2b..441d083304 100644
--- a/components/tailored/servers/sidebar/channels/group/Group.vue
+++ b/components/tailored/servers/sidebar/channels/group/Group.vue
@@ -22,6 +22,11 @@ export default {
     }
   },
   methods: {
+    /**
+     * @method toggleCollapse DocsTODO
+     * @description
+     * @example
+     */
     toggleCollapse() {
       this.collapsed = !this.collapsed
     },
diff --git a/components/tailored/settings/Sidebar.vue b/components/tailored/settings/Sidebar.vue
index dcb002bbfb..842cd0c295 100644
--- a/components/tailored/settings/Sidebar.vue
+++ b/components/tailored/settings/Sidebar.vue
@@ -89,6 +89,12 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method customAction DocsTODO
+     * @description
+     * @param link
+     * @example
+     */
     customAction(link: string) {
       this.$data.route = link
       this.$props.handleRouteChange(link)
diff --git a/components/tailored/settings/modal/Modal.vue b/components/tailored/settings/modal/Modal.vue
index 4018a8429a..31b6ef2118 100644
--- a/components/tailored/settings/modal/Modal.vue
+++ b/components/tailored/settings/modal/Modal.vue
@@ -13,21 +13,47 @@ export default Vue.extend({
     /**
      * Opens and closes the left hand sidebar
      */
+    /**
+     * @method toggleSidebar DocsTODO
+     * @description
+     * @example
+     */
     toggleSidebar() {
       this.$data.sidebar = !this.$data.sidebar
     },
+    /**
+     * @method showSidebar DocsTODO
+     * @description
+     * @example
+     */
     showSidebar() {
       this.$data.sidebar = true
     },
+    /**
+     * @method collapseSidebar DocsTODO
+     * @description
+     * @example
+     */
     collapseSidebar() {
       this.$data.sidebar = false
     },
+    /**
+     * @method changeRoute DocsTODO
+     * @description
+     * @param route
+     * @example
+     */
     changeRoute(route: string) {
       this.$data.page = route
       if (this.$device.isMobile) {
         this.collapseSidebar()
       }
     },
+    /**
+     * @method closeModal DocsTODO
+     * @description
+     * @example
+     */
     closeModal() {
       this.$store.commit('toggleSettings', false)
     },
diff --git a/components/tailored/settings/pages/audio/index.vue b/components/tailored/settings/pages/audio/index.vue
index 7e4c37e7ef..dedcf1e2db 100644
--- a/components/tailored/settings/pages/audio/index.vue
+++ b/components/tailored/settings/pages/audio/index.vue
@@ -135,6 +135,12 @@ export default Vue.extend({
   },
   methods: {
     ...UserPermissions.methods,
+    /**
+     * @method getMicLevel DocsTODO
+     * @description
+     * @param stream
+     * @example
+     */
     getMicLevel(stream: MediaStream) {
       const audioContext = new AudioContext()
       const gainNode = audioContext.createGain()
@@ -175,10 +181,21 @@ export default Vue.extend({
 
       draw()
     },
+    /**
+     * @method setupMicMeter DocsTODO
+     * @description
+     * @param stream
+     * @example
+     */
     setupMicMeter(stream: MediaStream) {
       this.$data.stream = stream
       this.getMicLevel(stream)
     },
+    /**
+     * @method setupDefaults DocsTODO
+     * @description
+     * @example
+     */
     async setupDefaults() {
       const permissionsObject: any = await this.getUserPermissions()
 
@@ -213,6 +230,11 @@ export default Vue.extend({
         this.isAudioOutput = permissionsObject.devices.audioOut[0]?.value || ''
       }
     },
+    /**
+     * @method enableAudio DocsTODO
+     * @description
+     * @example
+     */
     async enableAudio() {
       // Check to see if the user has permission
       try {
@@ -225,17 +247,44 @@ export default Vue.extend({
         this.$data.userDeniedAudioAccess = true
       }
     },
+    /**
+     * @method volumeControlValueChange DocsTODO
+     * @description
+     * @param volume
+     * @example
+     */
     volumeControlValueChange(volume: number) {
       this.$Sounds.changeLevels(volume / 100)
       this.$store.commit('setVolume', volume)
     },
+    /**
+     * @method inputVolumeControlValueChange DocsTODO
+     * @description
+     * @param volume
+     * @example
+     */
     inputVolumeControlValueChange(volume: number) {
       this.$store.commit('setInputVolume', volume)
     },
+    /**
+     * @method hasConstraint DocsTODO
+     * @description
+     * @param prop
+     * @returns
+     * @example
+     */
     hasConstraint(prop: keyof MediaTrackConstraintSet): Boolean {
       const supports = navigator.mediaDevices.getSupportedConstraints()
       return Boolean(supports[prop])
     },
+    /**
+     * @method setContraint DocsTODO
+     * @description
+     * @param prop
+     * @param value
+     * @returns
+     * @example
+     */
     setConstraint(prop: keyof MediaTrackConstraintSet, value: any) {
       // hasConstraint is true only if the prop is supported by the browser
       if (!this.hasConstraint(prop)) {
diff --git a/components/tailored/settings/pages/keybinds/index.vue b/components/tailored/settings/pages/keybinds/index.vue
index ae9a73adad..fbe938b4ec 100644
--- a/components/tailored/settings/pages/keybinds/index.vue
+++ b/components/tailored/settings/pages/keybinds/index.vue
@@ -26,6 +26,12 @@ export default Vue.extend({
     ...mapState(['settings']),
   },
   methods: {
+    /**
+     * @method editKeybind DocsTODO
+     * @description
+     * @param keybind
+     * @example
+     */
     editKeybind(keybind: String) {
       this.clearKeybinds()
       window.addEventListener('keydown', this.recordKeybind)
@@ -34,6 +40,12 @@ export default Vue.extend({
       this.$data.editingKeybind.newString =
         this.settings.keybinds[this.$data.editingKeybind.name]
     },
+    /**
+     * @method recordKeybind DocsTODO
+     * @description
+     * @param e
+     * @example
+     */
     recordKeybind(e: any) {
       this.errorCheck(e)
       if (!this.$data.editingKeybind.error) {
@@ -42,6 +54,11 @@ export default Vue.extend({
           : (this.$data.editingKeybind.newString += `+${e.key.toLowerCase()}`)
       }
     },
+    /**
+     * @method saveKeybind DocsTODO
+     * @description
+     * @example
+     */
     saveKeybind() {
       window.removeEventListener('keydown', this.recordKeybind)
       const keybindName = this.$data.editingKeybind.name
@@ -59,6 +76,11 @@ export default Vue.extend({
       this.$data.editingKeybind.status = false
       this.activateKeybinds()
     },
+    /**
+     * @method cancelKeybind DocsTODO
+     * @description
+     * @example
+     */
     cancelKeybind() {
       window.removeEventListener('keydown', this.recordKeybind)
       this.$data.editingKeybind.newString = ''
@@ -67,11 +89,21 @@ export default Vue.extend({
       this.$data.editingKeybind.error = false
       this.activateKeybinds()
     },
+    /**
+     * @method clearKeybind DocsTODO
+     * @description
+     * @example
+     */
     clearKeybind() {
       this.$data.editingKeybind.newString = ''
       this.$data.editingKeybind.errorMessage = ''
       this.$data.editingKeybind.error = false
     },
+    /**
+     * @method resetKeybinds DocsTODO
+     * @description
+     * @example
+     */
     resetKeybinds() {
       this.$store.commit('updateKeybinding', {
         keybindName: 'toggleMute',
@@ -91,6 +123,12 @@ export default Vue.extend({
       })
       this.activateKeybinds()
     },
+    /**
+     * @method errorCheck DocsTODO
+     * @description
+     * @param e
+     * @example
+     */
     errorCheck(e: any) {
       const key = e.key.toLowerCase()
       const newString = this.$data.editingKeybind.newString
diff --git a/components/tailored/settings/pages/notifications/index.vue b/components/tailored/settings/pages/notifications/index.vue
index d537ac5761..129eeb7eb7 100644
--- a/components/tailored/settings/pages/notifications/index.vue
+++ b/components/tailored/settings/pages/notifications/index.vue
@@ -55,10 +55,23 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method requestPermissions DocsTODO
+     * @description Uses the local $notifcations plugins requestNotificationPermission method
+     * which prompts the platform to request the users permission to send notifications
+     * (Based on the Notification object in notifications.ts)
+     * @example ---
+     */
     requestPermissions() {
       // @ts-ignore
       this.$notifications.requestNotificationPermission()
     },
+    /**
+     * @method sendNotification DocsTODO
+     * @description Uses the local $notifcations plugins sendNotifications method to send the user a notification
+     * (Based on the Notification object in notifications.ts)
+     * @example ---
+     */
     sendNotification() {
       this.$notifications
         // @ts-ignore
diff --git a/components/tailored/settings/pages/profile/index.vue b/components/tailored/settings/pages/profile/index.vue
index b73b9a9d8c..7357caf37e 100644
--- a/components/tailored/settings/pages/profile/index.vue
+++ b/components/tailored/settings/pages/profile/index.vue
@@ -37,25 +37,49 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method togglePhrase DocsTODO
+     * @description
+     * @example
+     */
     togglePhrase() {
       this.$data.showPhrase = !this.$data.showPhrase
     },
-
+    /**
+     * @method toggleCropper DocsTODO
+     * @description
+     * @example
+     */
     toggleCropper() {
       this.showCropper = !this.showCropper
     },
-
+    /**
+     * @method openFileDialog DocsTODO
+     * @description
+     * @example
+     */
     openFileDialog() {
       const fileInput = this.$refs.file as HTMLElement
       fileInput.click()
     },
-
+    /**
+     * @method setCroppedImage DocsTODO
+     * @description
+     * @param image
+     * @example
+     */
     setCroppedImage(image: any) {
       const fileInput = this.$refs.file as HTMLInputElement
       this.croppedImage = image
       fileInput.value = ''
     },
-
+    /**
+     * @method selectProfileImage DocsTODO
+     * @description
+     * @param e
+     * @returns
+     * @example
+     */
     selectProfileImage(e: any) {
       if (e.target && e.target.value !== null) {
         const files = e.target.files || e.dataTransfer.files
diff --git a/components/tailored/settings/pages/user/Search.vue b/components/tailored/settings/pages/user/Search.vue
index 4c40b8ab29..4a60e86c68 100644
--- a/components/tailored/settings/pages/user/Search.vue
+++ b/components/tailored/settings/pages/user/Search.vue
@@ -79,6 +79,11 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method showDropDown DocsTODO
+     * @description
+     * @example
+     */
     showDropDown() {
       this.dropDown = true
       const searchResult = this.$refs.searchResult as HTMLElement
@@ -94,15 +99,33 @@ export default Vue.extend({
         }
       }, 10)
     },
+    /**
+     * @method hideDropDown DocsTODO
+     * @description
+     * @example
+     */
     hideDropDown() {
       this.dropDown = false
     },
+    /**
+     * @method searchResult DocsTODO
+     * @description
+     * @example
+     */
     searchResult() {
       this.result = Users.filter((user) =>
         user.name.toLowerCase().startsWith(this.search.toLowerCase())
       )
       this.selection = -1
     },
+    /**
+     * @method selectUser DocsTODO
+     * @description
+     * @param user
+     * @param event
+     * @returns
+     * @example
+     */
     selectUser(user: User, event: Event) {
       if (!user) {
         return
@@ -112,6 +135,13 @@ export default Vue.extend({
       this.showDropDown()
       this.$emit('input', this.selected)
     },
+    /**
+     * @method handleKeydown DocsTODO
+     * @description
+     * @param event
+     * @returns
+     * @example
+     */
     handleKeydown(event: KeyboardEvent) {
       switch (event.key) {
         case 'Backspace':
@@ -144,6 +174,13 @@ export default Vue.extend({
       this.showDropDown()
       return true
     },
+    /**
+     * @method removeSelected DocsTODO
+     * @description
+     * @param index
+     * @returns
+     * @example
+     */
     removeSelected(index: number) {
       this.selected.splice(index, 1)
       this.showDropDown()
diff --git a/components/ui/Breadcrumbs/Breadcrumbs.vue b/components/ui/Breadcrumbs/Breadcrumbs.vue
index 6e2724f0ee..3691d6350b 100644
--- a/components/ui/Breadcrumbs/Breadcrumbs.vue
+++ b/components/ui/Breadcrumbs/Breadcrumbs.vue
@@ -9,6 +9,13 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method buildLink DocsTODO
+     * @description
+     * @param depth
+     * @returns
+     * @example
+     */
     buildLink(depth: number) {
       return `/${this.route.slice(0, depth + 1).join('/')}`
     },
diff --git a/components/ui/ChatScroll/ChatScroll.vue b/components/ui/ChatScroll/ChatScroll.vue
index 14f033edc9..4cd73b577d 100644
--- a/components/ui/ChatScroll/ChatScroll.vue
+++ b/components/ui/ChatScroll/ChatScroll.vue
@@ -70,6 +70,11 @@ export default Vue.extend({
     this.loaded = false
   },
   methods: {
+    /**
+     * @method autoScrollToBottom DocsTODO
+     * @description
+     * @example
+     */
     autoScrollToBottom() {
       const interval = this.loaded ? 100 : 1000
       if (this.$el && this.autoScroll) {
@@ -82,6 +87,11 @@ export default Vue.extend({
         }, interval)
       }
     },
+    /**
+     * @method onScrolled DocsTODO
+     * @description
+     * @example
+     */
     onScrolled() {
       if (this.$el) {
         if (Math.abs(this.$el.scrollTop) > this.preventScrollOffset) {
diff --git a/components/ui/Global/Global.vue b/components/ui/Global/Global.vue
index 9945d90315..d5d85db96a 100644
--- a/components/ui/Global/Global.vue
+++ b/components/ui/Global/Global.vue
@@ -52,18 +52,38 @@ export default Vue.extend({
     ...mapState(['ui', 'media']),
   },
   methods: {
+    /**
+     * @method toggleModal
+     * @description
+     * @example
+     */
     toggleModal() {
       this.$store.commit('toggleModal', {
         name: 'createServer',
         state: !this.ui.modals.createServer,
       })
     },
+    /**
+     * @method acceptCall DocsTODO
+     * @description
+     * @example
+     */
     acceptCall() {
       this.$store.dispatch('acceptCall')
     },
+    /**
+     * @method denyCall DocsTODO
+     * @description
+     * @example
+     */
     denyCall() {
       this.$store.dispatch('denyCall')
     },
+    /**
+     * @method toggleMarketPlace DocsTODO
+     * @description
+     * @example
+     */
     toggleMarketPlace() {
       this.$store.commit('toggleModal', {
         name: 'showMarketPlace',
diff --git a/components/ui/GlowingCursorArea/GlowingCursorArea.vue b/components/ui/GlowingCursorArea/GlowingCursorArea.vue
index b39d0f3fed..326d138951 100644
--- a/components/ui/GlowingCursorArea/GlowingCursorArea.vue
+++ b/components/ui/GlowingCursorArea/GlowingCursorArea.vue
@@ -21,6 +21,13 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method moveCursor DocsTODO
+     * @description
+     * @param e
+     * @returns
+     * @example
+     */
     moveCursor(e: Event | any) {
       let bounds = e.target.getBoundingClientRect()
 
diff --git a/components/ui/Image/Image.vue b/components/ui/Image/Image.vue
index 3ceb14e7f2..b24388aeb1 100644
--- a/components/ui/Image/Image.vue
+++ b/components/ui/Image/Image.vue
@@ -23,6 +23,11 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method openImage DocsTODO
+     * @description
+     * @example
+     */
     oepnImage() {
       // @ts-ignore
       window?.open(source, '_blank').focus()
diff --git a/components/ui/Meter/Meter.vue b/components/ui/Meter/Meter.vue
index 43619e94d8..b0e13445cf 100644
--- a/components/ui/Meter/Meter.vue
+++ b/components/ui/Meter/Meter.vue
@@ -52,9 +52,21 @@ export default Vue.extend({
     })
   },
   methods: {
+    /**
+     * @method onResize DocsTODO
+     * @description
+     * @example
+     */
     onResize() {
       this.resizeHandler()
     },
+    /**
+     * @method getTickColor DocsTODO
+     * @description
+     * @param increment
+     * @returns
+     * @example
+     */
     // Returns the designated tick color based on the increment value
     getTickColor(increment: number): string {
       if (this.numberOfTicks) {
@@ -71,6 +83,11 @@ export default Vue.extend({
       }
       return ''
     },
+    /**
+     * @method resizeHandler DocsTODO
+     * @description
+     * @example
+     */
     resizeHandler() {
       const meterElm: HTMLElement = this.$refs.meter as HTMLElement
       if (meterElm) {
diff --git a/components/ui/Modal/Modal.vue b/components/ui/Modal/Modal.vue
index 55fb9611ef..1fdad81114 100644
--- a/components/ui/Modal/Modal.vue
+++ b/components/ui/Modal/Modal.vue
@@ -22,6 +22,11 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method close DocsTODO
+     * @description
+     * @example
+     */
     close() {
       this.closeModal()
     },
diff --git a/layouts/chat.vue b/layouts/chat.vue
index bee8405fcc..28079ee651 100644
--- a/layouts/chat.vue
+++ b/layouts/chat.vue
@@ -27,20 +27,40 @@ export default Vue.extend({
     this.$store.commit('setTypingUser', this.$mock.users[0])
   },
   methods: {
+    /**
+     * @method toggleModal DocsTODO
+     * @description
+     * @example
+     */
     toggleModal() {
       this.$store.commit('toggleModal', {
         name: 'createServer',
         state: !this.ui.modals.createServer,
       })
     },
+    /**
+     * @method acceptCall DocsTODO
+     * @description
+     * @example
+     */
     acceptCall() {
       this.$store.dispatch('acceptCall')
       this.$Sounds.playSound(Sounds.CONNECTED)
     },
+    /**
+     * @method denyCall DocsTODO
+     * @description
+     * @example
+     */
     denyCall() {
       this.$store.dispatch('denyCall')
       this.$Sounds.playSound(Sounds.HANGUP)
     },
+    /**
+     * @method toggleMarketPlace DocsTODO
+     * @description
+     * @example
+     */
     toggleMarketPlace() {
       this.$store.commit('toggleModal', {
         name: 'showMarketPlace',
diff --git a/layouts/server.vue b/layouts/server.vue
index aafbe7cb45..e3bdc43f42 100644
--- a/layouts/server.vue
+++ b/layouts/server.vue
@@ -18,6 +18,11 @@ export default Vue.extend({
     ...mapState(['ui']),
   },
   methods: {
+    /**
+     * @method toggleMarketPlace DocsTODO
+     * @description
+     * @example
+     */
     toggleMarketPlace() {
       this.$store.commit('toggleModal', {
         name: 'showMarketPlace',
diff --git a/libraries/WebRTC/WebRTC.ts b/libraries/WebRTC/WebRTC.ts
index 45936953f6..d1e6c6072c 100644
--- a/libraries/WebRTC/WebRTC.ts
+++ b/libraries/WebRTC/WebRTC.ts
@@ -21,9 +21,11 @@ export default class WebRTC {
     this.peers = new Map()
   }
 
-  /** @method
-   * Bind required startup data to the WebRTC class
-   * @id identifier to connect to the signaling server with
+  /**
+   * @method init
+   * @description Bind required startup data to the WebRTC class
+   * @param id identifier to connect to the signaling server with
+   * @example
    */
   init(id: string) {
     this.id = id
@@ -32,8 +34,11 @@ export default class WebRTC {
     this._runQueue()
   }
 
-  /** @computed
-   * Get the total count of connected peers
+  /**
+   * @computed peerCount
+   * @description Get the total count of connected peers
+   * @returns
+   * @example
    */
   get peerCount(): number {
     return this.peers ? this.peers.size : 0
@@ -43,15 +48,18 @@ export default class WebRTC {
   //
   // Methods reserved for internal use
 
-  /** @method
-   * Queue functions that are exectued before init for execution later
+  /**
+   * @method _queue
+   * @description Queue functions that are exectued before init for execution later
+   * @param fn
    */
   protected _queue(fn: Function) {
     this._fnQueue.push(fn)
   }
 
-  /** @method
-   * Execute all queued functions
+  /**
+   * @method _runQueue
+   * @description Execute all queued functions
    */
   protected _runQueue() {
     this._fnQueue.forEach((fn) => fn())
@@ -61,15 +69,18 @@ export default class WebRTC {
    * @method setAnnounceURLs
    * @description Allow to specify different WebTorrent announce URLs for the signaling
    * @param announceURLs list of announce urls
+   * @example
    */
   setAnnounceURLs(announceURLs: Array<string>) {
     this._announceURLs = announceURLs
   }
 
-  /** @method
-   * Internal abstraction of connect to allow for
-   * connection queueing
-   * @peerId identifier of peer we're connecting to
+  /**
+   * @method _connect
+   * @description Internal abstraction of connect to allow for connection queueing
+   * @param peerId identifier of peer we're connecting to
+   * @returns
+   * @example
    */
   protected _connect(peerId: string): void {
     console.log('connecting to', peerId)
@@ -80,26 +91,34 @@ export default class WebRTC {
   //
   // Methods who are exposed for interaction
 
-  /** @method
-   * Check if we are connected to a given peer by ID
-   * @peerId identifier of peer we're seeking
+  /**
+   * @method exists
+   * @description Check if we are connected to a given peer by ID
+   * @param peerId identifier of peer we're seeking
+   * @returns
+   * @example
    */
   exists(peerId: string): boolean {
     if (!this.peers) return false
     return this.peers.has(peerId)
   }
 
-  /** @method
-   * Get a WebRTCUser from the list of connected peers
-   * @peerId identifier of peer we're seeking
+  /**
+   * @method getPeer
+   * @description Get a WebRTCUser from the list of connected peers
+   * @param peerId identifier of peer we're seeking
+   * @returns
+   * @example
    */
   getPeer(peerId: string): WebRTCUser | undefined {
     return this.peers?.get(peerId)
   }
 
-  /** @method
-   * Connect to a new peer
-   * @peerId identifier of peer we're connecting to
+  /**
+   * @method connect
+   * @description Connect to a new peer
+   * @param peerId identifier of peer we're connecting to
+   * @example
    */
   connect(peerId: string) {
     if (!this.initalized) {
diff --git a/libraries/ui/Commands.ts b/libraries/ui/Commands.ts
index 0545bca1b2..11ced911c6 100644
--- a/libraries/ui/Commands.ts
+++ b/libraries/ui/Commands.ts
@@ -2,6 +2,13 @@ import { Command, CurrentCommand } from '~/types/utils/commands'
 
 const commandPrefix = '/'
 
+/**
+ * @method containsCommand
+ * @description
+ * @param text
+ * @returns
+ * @example
+ */
 export function containsCommand(text: string) {
   const cmd = text.split(' ')[0].replace(commandPrefix, '')
   return (
@@ -10,6 +17,13 @@ export function containsCommand(text: string) {
   )
 }
 
+/**
+ * @method parseCommand
+ * @description
+ * @param text
+ * @returns
+ * @example
+ */
 export function parseCommand(text: string): CurrentCommand {
   const splitMessage = text.split(/\s+/)
   return {
@@ -19,7 +33,8 @@ export function parseCommand(text: string): CurrentCommand {
 }
 
 /**
- * Returns true if currentArgs are valid for command, else false
+ * @method isArgsValid
+ * @description Returns true if currentArgs are valid for command, else false
  * @param command command which arguments need to be checked
  * @param currentArgs incoming args value
  * @returns boolean if currentArgs are valid for command
diff --git a/libraries/ui/Friends.ts b/libraries/ui/Friends.ts
index e95998ab7b..9d6ffafe1b 100644
--- a/libraries/ui/Friends.ts
+++ b/libraries/ui/Friends.ts
@@ -11,11 +11,12 @@ import { Friend } from '~/types/ui/friends'
  * Ported from Satellite Legacy
  */
 
-/** @method
- * Sort friends by name and groups them by the first
- * letter of the name
- * @name getAlphaSorted
+/**
+ * @method getAlphaSorted
+ * @description Sort friends by name and groups them by the first letter of the name
  * @param friends array of friends
+ * @returns
+ * @example
  */
 export function getAlphaSorted(friends: Array<Friend>) {
   const sorted = sortBy(friends, ['name'])
@@ -30,12 +31,13 @@ export function getAlphaSorted(friends: Array<Friend>) {
   return grouped
 }
 
-/** @method
- * Filter friends by stored keyword and
- * rebind the friends data
- * @name filterFriends
+/**
+ * @method filterFriends
+ * @description Filter friends by stored keyword and rebind the friends data
  * @param friends Array of friends to filter
  * @param keyword string keyword to search for
+ * @returns
+ * @example
  */
 export function getFilteredFriends(friends: Array<Friend>, keyword: string) {
   if (keyword) {
diff --git a/middleware/authenticated.ts b/middleware/authenticated.ts
index 7ecd2f70a2..0ed9aeeabf 100644
--- a/middleware/authenticated.ts
+++ b/middleware/authenticated.ts
@@ -6,6 +6,14 @@ interface Arguments {
   redirect: (location: RawLocation) => void
   route: NuxtRouteConfig
 }
+
+/**
+ * @method
+ * @description
+ * @param
+ * @returns
+ * @example
+ */
 export default function ({ store, route, redirect }: Arguments) {
   const { locked, phrase } = store.state.accounts
 
diff --git a/pages/auth/unlock/index.vue b/pages/auth/unlock/index.vue
index d8f5a8c253..123fbc461f 100644
--- a/pages/auth/unlock/index.vue
+++ b/pages/auth/unlock/index.vue
@@ -26,7 +26,13 @@ export default Vue.extend({
     ...mapState(['accounts']),
   },
   methods: {
-    getIcon(): string {
+    /**
+     * @method getIcon DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
+    getIcon(): String {
       if (this.getPinHash) {
         return 'unlocked'
       } else {
@@ -34,6 +40,11 @@ export default Vue.extend({
       }
     },
     // Decrypt stored encrypted data into memory
+    /**
+     * @method decrypt DocsTODO
+     * @description
+     * @example
+     */
     async decrypt() {
       this.$data.decrypting = true
       this.error = ''
@@ -53,6 +64,11 @@ export default Vue.extend({
       this.$data.decrypting = false
     },
     // Create & store a new pin, then decrypt.
+    /**
+     * @method create DocsTODO
+     * @description
+     * @example
+     */
     async create() {
       try {
         await this.$store.dispatch('setPin', this.$data.pin)
diff --git a/pages/chat/direct/index.vue b/pages/chat/direct/index.vue
index 665c9abd9a..6b893a25fa 100644
--- a/pages/chat/direct/index.vue
+++ b/pages/chat/direct/index.vue
@@ -35,6 +35,11 @@ export default Vue.extend({
     ...mapState(['ui']),
   },
   methods: {
+    /**
+     * @method sendMessageAutomatically DocsTODO
+     * @description
+     * @example
+     */
     sendMessageAutomatically() {
       this.$data.testMsgSent += 1
       if (this.$data.testMsgSent > 5) clearInterval(this.$data.updateInterval)
diff --git a/pages/files/browse/index.vue b/pages/files/browse/index.vue
index cf71f18205..fec246a577 100644
--- a/pages/files/browse/index.vue
+++ b/pages/files/browse/index.vue
@@ -27,12 +27,24 @@ export default Vue.extend({
     this.$store.dispatch('fetchFiles')
   },
   methods: {
+    /**
+     * @method changeView DocsTODO
+     * @description
+     * @param type
+     * @example
+     */
     changeView(type: 'grid' | 'list') {
       this.$data.view = type
     },
     /**
      * Allows you to get the current path file object
      */
+    /**
+     * @method getPath DocsTODO
+     * @description
+     * @returns
+     * @example
+     */
     getPath(): any {
       if (this.$data.path.length === 0) {
         return this.files.tree
@@ -48,6 +60,12 @@ export default Vue.extend({
     /**
      * Push a new child name to the path array
      */
+    /**
+     * @method push DocsTODO
+     * @description
+     * @param item
+     * @example
+     */
     push(item: any) {
       if (item.children) {
         this.$data.path.push(item.name)
@@ -56,6 +74,12 @@ export default Vue.extend({
     /**
      * Pull n items from the file path array
      */
+    /**
+     * @method pull DocsTODO
+     * @description
+     * @param count
+     * @example
+     */
     pull(count: number = 1) {
       for (let i = 0; i < count; i++) {
         this.$data.path.pop()
@@ -64,12 +88,24 @@ export default Vue.extend({
     /**
      * Manually override the path array from a child component
      */
+    /**
+     * @method setPath DocsTODO
+     * @description
+     * @param pth
+     * @example
+     */
     setPath(pth: Array<String>) {
       this.$data.path = pth
     },
     /**
      * Triggered when a file is changed on the input
      */
+    /**
+     * @method handleFile DocsTODO
+     * @description
+     * @param event
+     * @example
+     */
     async handleFile(event: any) {
       this.$data.file = event.target.files[0]
       this.$data.nsfw.checking = true
@@ -80,6 +116,12 @@ export default Vue.extend({
     /**
      * Load a picture into a data URL push to data
      */
+    /**
+     * @method loadPicture DocsTODO
+     * @description
+     * @param file
+     * @example
+     */
     loadPicture(file: File) {
       if (!file) return
       const self = this
@@ -94,6 +136,11 @@ export default Vue.extend({
      * TODO: Clear input field, this currently breaks
      * when you upload the same file after cancelling
      */
+    /**
+     * @method cancelUpload DocsTODO
+     * @description
+     * @example
+     */
     cancelUpload() {
       this.$data.file = false
       this.$data.url = ''
diff --git a/pages/friends/list/index.vue b/pages/friends/list/index.vue
index 08486f6d2f..54e5907069 100644
--- a/pages/friends/list/index.vue
+++ b/pages/friends/list/index.vue
@@ -32,6 +32,12 @@ export default Vue.extend({
     this.$store.dispatch('fetchFriends')
   },
   methods: {
+    /**
+     * @method setRoute DocsTODO
+     * @description
+     * @param route
+     * @example
+     */
     setRoute(route: Route) {
       this.$data.route = route
     },
diff --git a/pages/generic/loading/index.vue b/pages/generic/loading/index.vue
index 27261fbeab..c444b0e9a6 100644
--- a/pages/generic/loading/index.vue
+++ b/pages/generic/loading/index.vue
@@ -57,14 +57,29 @@ export default Vue.extend({
     if (this.blockchainBound) this.completeBlockchain()
   },
   methods: {
+    /**
+     * @method completeP2P DocsTODO
+     * @description
+     * @example
+     */
     completeP2P() {
       this.$data.step = 'Peer 2 Peer Bound'
       this.$data.stepsCompleted += 1
     },
+    /**
+     * @method completeBlockchain DocsTODO
+     * @description
+     * @example
+     */
     completeBlockchain() {
       this.$data.step = 'Blockchain Bound'
       this.$data.stepsCompleted += 1
     },
+    /**
+     * @method completeState DocsTODO
+     * @description
+     * @example
+     */
     completeState() {
       this.$data.step = 'State Initalized'
       this.$data.stepsCompleted += 1
diff --git a/pages/index.vue b/pages/index.vue
index 50cf0e635b..5b77145eca 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -36,6 +36,13 @@ export default Vue.extend({
     }
   },
   methods: {
+    /**
+     * @method loadAccount
+     * @description Load user account by dispatching the loadAccount action in store/accounts/actions.ts,
+     * if successful route user to home page at /allcomponents,
+     * if an error is thrown route user to authentication at /auth/register
+     * @example mounted() { this.loadAccount() }
+     */
     async loadAccount() {
       try {
         await this.$store.dispatch('loadAccount')
diff --git a/store/accounts/actions.ts b/store/accounts/actions.ts
index 3f5f3f0724..78abb84351 100644
--- a/store/accounts/actions.ts
+++ b/store/accounts/actions.ts
@@ -11,6 +11,12 @@ import SolanaManager from '~/libraries/Solana/SolanaManager/SolanaManager'
 import ServerProgram from '~/libraries/Solana/ServerProgram/ServerProgram'
 
 export default {
+  /**
+   * @method setPin DocsTODO
+   * @description
+   * @param pin
+   * @example
+   */
   async setPin({ commit }: ActionsArguments, pin: string) {
     if (pin.length < 5) {
       throw new Error(AccountsError.PIN_TOO_SHORT)
@@ -25,6 +31,12 @@ export default {
     commit('setPin', pin)
     commit('setPinHash', pinHash)
   },
+  /**
+   * @method unlock DocsTODO
+   * @description
+   * @param pin
+   * @example
+   */
   async unlock({ commit, state, dispatch }: ActionsArguments, pin: string) {
     const { pinHash, encryptedPhrase } = state.accounts
 
@@ -52,6 +64,12 @@ export default {
     commit('unlock', pin)
     dispatch('loadAccount')
   },
+  /**
+   * @method generateWallet DocsTODO
+   * @description
+   * @param
+   * @example
+   */
   async generateWallet({ commit, state }: ActionsArguments) {
     const { pin } = state.accounts
 
@@ -77,6 +95,12 @@ export default {
 
     commit('setEncryptedPhrase', encryptedPhrase)
   },
+  /**
+   * @method loadAccount DocsTODO
+   * @description
+   * @param
+   * @example
+   */
   async loadAccount({ commit, state, dispatch }: ActionsArguments) {
     const $SolanaManager: SolanaManager = Vue.prototype.$SolanaManager
 
@@ -111,6 +135,12 @@ export default {
       ...userInfo,
     })
   },
+  /**
+   * @method registerUser DocsTODO
+   * @description
+   * @param userData
+   * @example
+   */
   async registerUser(
     { commit, dispatch }: ActionsArguments,
     userData: UserRegistrationPayload
@@ -166,6 +196,12 @@ export default {
       address: userAccount.publicKey.toBase58(),
     })
   },
+  /**
+   * @method initializeEncryptionEngine DocsTODO
+   * @description
+   * @param userAccount
+   * @example
+   */
   async initializeEncryptionEngine(_: RootState, userAccount: Keypair) {
     // Initialize crypto engine
     const $Crypto: Crypto = Vue.prototype.$Crypto
diff --git a/store/files/actions.ts b/store/files/actions.ts
index 60fa7c18a8..b0feecaec5 100644
--- a/store/files/actions.ts
+++ b/store/files/actions.ts
@@ -4,6 +4,12 @@ import { Files } from '~/mock/files'
 
 export default {
   handler: () => {},
+  /**
+   * @method fetchFiles DocsTODO
+   * @description
+   * @param
+   * @example
+   */
   async fetchFiles({ commit, state }: ActionsArguments) {
     if (
       state.dataState.files === DataStateType.Loading ||
diff --git a/store/friends/actions.ts b/store/friends/actions.ts
index 29d9bb7d2f..735ae746b9 100644
--- a/store/friends/actions.ts
+++ b/store/friends/actions.ts
@@ -25,6 +25,12 @@ import Crypto from '~/libraries/Crypto/Crypto'
 import { AccountsError } from '~/store/accounts/types'
 
 export default {
+  /**
+   * @method fetchFriendRequests DocsTODO
+   * @description
+   * @param
+   * @example
+   */
   async fetchFriendRequests({ commit }: ActionsArguments) {
     const $SolanaManager: SolanaManager = Vue.prototype.$SolanaManager
 
@@ -44,6 +50,12 @@ export default {
     commit('setIncomingRequests', incomingRequests)
     commit('setOutgoingRequests', outgoingRequests)
   },
+  /**
+   * @method fetchFriends DocsTODO
+   * @description
+   * @param
+   * @example
+   */
   async fetchFriends({ dispatch }: ActionsArguments) {
     const $SolanaManager: SolanaManager = Vue.prototype.$SolanaManager
     const friendsProgram: FriendsProgram = new FriendsProgram($SolanaManager)
@@ -57,6 +69,12 @@ export default {
       dispatch('fetchFriendDetails', friendData)
     )
   },
+  /**
+   * @method fetchFriendDetails DocsTODO
+   * @description
+   * @param friendAccount
+   * @example
+   */
   async fetchFriendDetails(
     { commit, state }: ActionsArguments,
     friendAccount: FriendAccount
@@ -121,6 +139,12 @@ export default {
       )
     }
   },
+  /**
+   * @method subscribeToFriendsEvents DocsTODO
+   * @description
+   * @param
+   * @example
+   */
   subscribeToFriendsEvents({ dispatch, commit }: ActionsArguments) {
     const $SolanaManager: SolanaManager = Vue.prototype.$SolanaManager
 
@@ -171,6 +195,13 @@ export default {
       }
     })
   },
+  /**
+   * @method createFriendRequest DocsTODO
+   * @description
+   * @param friendToKey
+   * @param textileMailboxId
+   * @example
+   */
   async createFriendRequest(
     { commit }: ActionsArguments,
     { friendToKey, textileMailboxId }: CreateFriendRequestArguments
@@ -262,6 +293,13 @@ export default {
       commit('addOutgoingRequest', parsedFriendRequest)
     }
   },
+  /**
+   * @method acceptFriendRequest DocsTODO
+   * @description
+   * @param friendRequest
+   * @param textileMailboxId
+   * @example
+   */
   async acceptFriendRequest(
     { commit, dispatch }: ActionsArguments,
     { friendRequest, textileMailboxId }: AcceptFriendRequestArguments
@@ -315,6 +353,12 @@ export default {
       dispatch('fetchFriendDetails', friendAccount)
     }
   },
+  /**
+   * @method denyFriendRequest DocsTODO
+   * @description
+   * @param friendRequest
+   * @example
+   */
   async denyFriendRequest(
     { commit }: ActionsArguments,
     friendRequest: FriendRequest
@@ -358,6 +402,12 @@ export default {
       })
     }
   },
+  /**
+   * @method removeFriendRequest DocsTODO
+   * @description
+   * @param friendRequest
+   * @example
+   */
   async removeFriendRequest(
     { commit }: ActionsArguments,
     friendRequest: OutgoingRequest
@@ -398,6 +448,12 @@ export default {
       commit('removeOutgoingRequest', friendRequest)
     }
   },
+  /**
+   * @method removeFriend DocsTODO
+   * @description
+   * @param friend
+   * @example
+   */
   async removeFriend({ commit }: ActionsArguments, friend: Friend) {
     const $SolanaManager: SolanaManager = Vue.prototype.$SolanaManager
 
diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
index 53d39efe05..8e8622a432 100644
--- a/store/ui/mutations.ts
+++ b/store/ui/mutations.ts
@@ -86,6 +86,13 @@ export default {
     state.ui.isScrollOver = status
     if (!status) state.ui.unreadMessage = 0
   },
+  /**
+   * @method sendMessage DocsTODO
+   * @description
+   * @param message
+   * @param isOwner
+   * @example
+   */
   sendMessage(state: NuxtState, message: any, isOwner: boolean) {
     const messages: any[] = [...state.ui.messages]
     const lastIndex = messages.length - 1
@@ -195,6 +202,12 @@ export default {
     }
   },
 
+  /**
+   * @method addReaction DocsTODO
+   * @description
+   * @param reaction
+   * @example
+   */
   addReaction(state: NuxtState, reaction: any) {
     const messageGroups: MessageGroup = [...state.ui.messages]
 
diff --git a/utilities/EXIF.ts b/utilities/EXIF.ts
index 6a13d5288c..e3c2cbf126 100644
--- a/utilities/EXIF.ts
+++ b/utilities/EXIF.ts
@@ -1,3 +1,10 @@
+/**
+ * @method stripEXIF
+ * @description Strips jpeg file of all EXIF data
+ * @param file JPEG file
+ * @returns Blob stripped of EXIF data
+ * @example
+ */
 export const stripEXIF = (file: File) => {
   if (file.type !== 'image/jpeg') {
     return file
@@ -22,6 +29,13 @@ export const stripEXIF = (file: File) => {
     })
 }
 
+/**
+ * @method strip
+ * @description Strips EXIF data from FileReader event object
+ * @param e FileReader event object
+ * @returns Blob stripped of EXIF data
+ * @example
+ */
 const strip = (e: any) => {
   const dv = new DataView(e.target.result)
   let offset = 0
diff --git a/utilities/NSFW.ts b/utilities/NSFW.ts
index 7060ed80bd..30ffe78b31 100644
--- a/utilities/NSFW.ts
+++ b/utilities/NSFW.ts
@@ -1,6 +1,13 @@
 // @ts-nocheck
 import * as nsfwjs from 'nsfwjs'
 
+/**
+ * @method isNSFW
+ * @description Checks if an image is NSFW using nsfwjs
+ * @param file Image or GIF
+ * @returns Boolean based on predictionResults
+ * @example
+ */
 export const isNSFW = (file: File) => {
   const fileTypePrefix = file.type.split('/')[0]
   if (fileTypePrefix !== 'image') {
diff --git a/utilities/Notifications.ts b/utilities/Notifications.ts
index 82e5986c36..88f58f6029 100644
--- a/utilities/Notifications.ts
+++ b/utilities/Notifications.ts
@@ -76,6 +76,12 @@ export const Notifications = class Notifications {
     }
   }
 
+  /**
+   * @method registerNotificationWatch DocsTODO
+   * @description
+   * @returns
+   * @example
+   */
   registerNotificationWatch(): any {
     return LocalNotifications.addListener(
       'localNotificationReceived',
@@ -85,6 +91,12 @@ export const Notifications = class Notifications {
     )
   }
 
+  /**
+   * @method requestNotificationPermission DocsTODO
+   * @description
+   * @returns
+   * @example
+   */
   requestNotificationPermission(): any {
     // @ts-ignore
     if (this.currentPlatform === 'web' || this.currentPlatform === 'electron') {
@@ -112,6 +124,14 @@ export const Notifications = class Notifications {
   //   }
   // }
 
+  /**
+   * @method sendNotifications DocsTODO
+   * @description
+   * @param type
+   * @param titleText
+   * @param message
+   * @example
+   */
   async sendNotifications(
     type: string,
     titleText: string,